/* OSS中转直链 oss_browser_link 样式 */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  background: linear-gradient(160deg, #10162e 0%, #1a2450 60%, #10162e 100%);
  color: #e8ecff;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  padding: 24px 16px calc(24px + env(safe-area-inset-bottom));
}
#obl-root { width: 100%; max-width: 640px; }

#obl-header h1 { font-size: 24px; letter-spacing: 1px; }
#obl-sub { color: #8f9ac8; font-size: 13px; margin-top: 6px; }

#obl-file-card {
  display: flex; align-items: center; gap: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  padding: 18px;
  margin-top: 20px;
}
#obl-file-icon { font-size: 40px; }
#obl-file-info { flex: 1; min-width: 0; }
#obl-file-name { font-weight: 600; font-size: 15px; word-break: break-all; }
#obl-file-meta { color: #8f9ac8; font-size: 12px; margin-top: 5px; }
.obl-status {
  font-size: 12px; padding: 4px 10px; border-radius: 999px; white-space: nowrap;
  background: rgba(255,255,255,.1); color: #aab4e0;
}
.obl-status.ok { background: rgba(46,204,113,.16); color: #4be08a; }
.obl-status.miss { background: rgba(255,120,120,.16); color: #ff8f8f; }

#obl-link-row { display: flex; gap: 8px; margin-top: 14px; }
#obl-link-input {
  flex: 1; min-width: 0;
  background: rgba(0,0,0,.3);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  color: #b9c3ef;
  font-size: 12px;
  padding: 10px 12px;
  outline: none;
}

.obl-btn {
  border: none; border-radius: 10px; cursor: pointer;
  font-size: 14px; padding: 12px 16px; color: #fff;
  transition: opacity .15s, transform .05s;
  -webkit-tap-highlight-color: transparent;
}
.obl-btn:active { transform: scale(.97); }
.obl-btn:disabled { opacity: .5; cursor: not-allowed; }
.obl-btn.primary { background: linear-gradient(135deg, #3d7bff, #5a4dff); }
.obl-btn.green { background: linear-gradient(135deg, #20b26a, #17a05e); }
.obl-btn.ghost {
  background: transparent; color: #aab4e0;
  border: 1px solid rgba(255,255,255,.22);
}

#obl-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
#obl-link-row .obl-btn { white-space: nowrap; }

#obl-steps {
  margin-top: 22px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 16px 18px;
}
#obl-steps h2 { font-size: 15px; margin-bottom: 10px; color: #cfd7ff; }
#obl-steps ol { padding-left: 20px; }
#obl-steps li { font-size: 13px; color: #9aa5d2; line-height: 1.9; }
#obl-steps code {
  background: rgba(0,0,0,.35); padding: 1px 6px; border-radius: 5px;
  font-size: 12px; color: #7fd0ff;
}

/* Toast */
#obl-toast {
  position: fixed; left: 50%; top: 18%; transform: translateX(-50%);
  background: #2d3a6e; color: #fff; font-size: 14px;
  padding: 10px 18px; border-radius: 10px; z-index: 60;
  box-shadow: 0 6px 24px rgba(0,0,0,.4);
  max-width: 86vw;
}
#obl-toast.success { background: #1d9e58; }
#obl-toast.error { background: #d84a4a; }

/* 交互详情弹窗（双模式） */
#obl-dialog {
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 100; padding: 20px;
}
#obl-dialog-box {
  width: 100%; max-width: 560px; max-height: 78vh;
  background: #182047; border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px; display: flex; flex-direction: column;
}
#obl-dialog-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.1);
}
#obl-dialog-title { flex: 1; font-size: 14px; font-weight: 600; }
#obl-dialog-head button {
  background: rgba(255,255,255,.1); border: none; color: #dfe5ff;
  border-radius: 8px; padding: 6px 12px; cursor: pointer; font-size: 13px;
}
#obl-dialog-body {
  padding: 12px 14px; overflow: auto; flex: 1;
  font-size: 12px; line-height: 1.7; color: #b9c3ef; white-space: pre-wrap; word-break: break-all;
}
.obl-hidden { display: none !important; }

@media (min-width: 720px) {
  #obl-actions { flex-direction: row; flex-wrap: wrap; }
  #obl-actions .obl-btn { flex: 1; }
}