/* ============================================================================
   console.css — api.html 专属（控制台：工作台/暗房操作台）
   token + 通用基元在 assets/neo-tokens.css；这里只写本页的版式与密度。
   ============================================================================ */

/* ============================================================================
   ★ 控制台页粘性导航：必须不透明（首页不受影响 —— 本文件只被 api/contact 加载）
   为什么：.nav 基类（neo-tokens.css:155）是透明的，唯一给背景的 .nav.is-scrolled
   （neo-tokens.css:160）由 landing.js:119 切换；而 api/contact **不加载 landing.js**，
   所以滚动时 .nav 恒为 rgba(0,0,0,0)，下方密集表格文字整块透上来（用户「字体重合」）。
   修法：用与页面同色的 --bg 钉死不透明，并显式关掉 blur 与 is-scrolled 分支（未来若
   有人给控制台页也挂上 landing.js，这里仍是安全的）。
   取舍：控制台页顶部无大图，不透明与透明首屏无差；换取滚动零穿透。
   ============================================================================ */
.nav,
.nav.is-scrolled {
  background: var(--bg);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: var(--line);
}

/* ---------- HERO（工具页：比首页更冷、更密） ----------
   移动优先单栏 → ≥1024 双栏（左文案 / 右登录卡）。
   ★ minmax(0,1fr) 里的 0 是关键：只用 1fr 会被内容顶宽导致溢出。
   ★ 原 .hero-sm 的 max-width:60ch 移到左栏 .hero-copy，否则整个 hero 被限宽、右栏没地方。 */
.hero-sm {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  align-items: start;
  padding-block: 56px 8px;
}
.hero-sm > .hero-copy { max-width: 60ch; }
.hero-sm > .hero-copy .api-lead { max-width: 52ch; }
.api-lead { max-width: 52ch; margin-top: 14px; }
@media (min-width: 1024px) {
  .hero-sm { grid-template-columns: minmax(0, 1fr) minmax(360px, 440px); gap: 64px; align-items: start; }
  .hero-sm .auth-card { max-width: none; }   /* 列已限 440，卡填满列宽 */
}
@media (max-width: 480px) {
  .hero-sm .auth-card { padding: 20px 18px; }
}

/* 已登录：hero 右栏摘要卡（登录态 + 账号 + 积分 + 跳转；不复刻钱包明细） */
.hero-session {
  padding: 24px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1);
}
.hero-session__who { margin-top: 8px; font-size: 15px; color: var(--ink); overflow-wrap: anywhere; }
.hero-session__bal { margin-top: 6px; font-size: 14px; color: var(--ink-2); }
.hero-session__bal b { color: var(--ink); }
.hero-session .btn { margin-top: 16px; }

/* 导航里的余额 chip */
.balance { font-family: var(--font-mono); font-size: 13px; color: var(--ink-3); white-space: nowrap; }
.balance b { color: var(--ink); }
.balance.low b { color: var(--danger); }

/* originWarn 由 api.js 填 innerHTML（<b>…</b>：…），不能用 .locked 的 flex（会把文本切成两段） */
#originWarn { display: block; }

/* ---------- 登录 / 注册卡 ---------- */
.auth-card {
  max-width: 460px; padding: 24px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-1);
}
.auth-card > .caption { margin-top: 14px; }
.auth-form { display: grid; gap: 16px; margin-top: 18px; }
.auth-msg { min-height: 20px; margin: 0; font-size: 13px; line-height: 1.5; color: var(--danger); }
.auth-msg.ok { color: var(--ok); }
.center { text-align: center; }
#switchMode { color: var(--accent-ink); font-weight: 700; }

/* ---------- 联系页 ---------- */
/* ★ base.css 里也有 .btnrow，但被 `.cta-band .btnrow` 限定住了；
   contact.html 不加载 base.css，所以这里给一个通用的（只影响加载 console.css 的页面）。 */
.btnrow { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.contact-card {
  padding: 20px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg);
}
.contact-card > b { display: block; font-size: 15px; line-height: 1.5; color: var(--ink); }
.contact-card > p { margin-top: 8px; font-size: 14px; line-height: 1.7; color: var(--ink-3); }
.contact-card > p.mono { font-family: var(--font-mono); font-size: 13px; color: var(--ink-2); overflow-wrap: anywhere; }
.contact-form { display: grid; gap: 16px; margin-top: 20px; max-width: 640px; }
.contact-form textarea {
  width: 100%; padding: 10px 12px; font: inherit; font-size: 15px; line-height: 1.7;
  color: var(--ink); background: var(--well);
  border: 1px solid var(--line); border-radius: var(--r-sm); resize: vertical;
}
.contact-form textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.fallback-box { margin-top: 16px; }
.fallback-box .code { margin: 0; }

/* ---------- 三步接入 ---------- */
.qs { display: grid; gap: 12px; margin-top: 20px; padding: 0; list-style: none; counter-reset: qs; }
.qs > li {
  position: relative; padding: 16px 18px 16px 54px; counter-increment: qs;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.qs > li::before {
  content: counter(qs); position: absolute; inset-inline-start: 16px; inset-block-start: 16px;
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-ink);
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
}
.qs > li > b { display: block; font-size: 15px; line-height: 1.5; color: var(--ink); }
.qs > li > span { display: block; margin-top: 6px; font-size: 14px; line-height: 1.7; color: var(--ink-3); }
.qs-base { display: grid; gap: 14px; margin-top: 20px; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }

/* ---------- 登录方式切换（手机号 / 账号密码） ---------- */
.auth-tabs {
  display: flex; gap: 4px; margin-top: 18px; padding: 4px;
  background: var(--well); border-radius: var(--r-pill);
}
.auth-tabs [role="tab"] {
  flex: 1 1 0; min-inline-size: 0; padding: 9px 12px;
  border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--ink-3);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.auth-tabs [role="tab"][aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--sh-1); }
.auth-tabs [role="tab"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 验证码输入 + 获取按钮同一行（★ 输入框必须 min-inline-size:0，否则窄屏撑破卡片） */
.code-row { display: flex; gap: 8px; align-items: stretch; }
.code-row input { flex: 1 1 auto; min-inline-size: 0; }
.code-row button { flex: none; white-space: nowrap; }
.code-row button[disabled] { opacity: .6; cursor: default; }

.auth-form > .caption { margin: 0; }
#forgotLink, #skipPw, #backToLogin, #switchMode { color: var(--accent-ink); font-weight: 700; }

/* ---------- 密钥卡 ---------- */
#keyPanel > .key-card, #keyPanel > .billing { margin-block-end: 24px; }
.key-card {
  padding: 24px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-1);
}
.key-card-hd { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.key-card-hd #logoutBtn { margin-inline-start: auto; }
.key-card > .meta { margin-top: 6px; }
.who { font-size: 13px; color: var(--ink-3); }
.key-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.key-value {
  flex: 1 1 260px; min-inline-size: 0; padding: 10px 12px;
  background: var(--well); border: 1px solid var(--line); border-radius: var(--r-sm);
  font-size: 13px; color: var(--ink); overflow-wrap: anywhere;
}
.key-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.key-note { margin-top: 10px; font-size: 13px; line-height: 1.6; color: var(--ink-3); }
.key-note .mono { color: var(--ink-2); }
#keyTableBox { margin-top: 14px; }

/* 密钥表：名称单元格第二行放明文（api.js renderKeyTable 生成）
   ★ 默认遮罩（maskKey），行内「显示」就地揭示；与顶部大框共用 revealed{} 状态。
   min-height 预留两行，避免「显示/隐藏」时整行高度抽动。 */
.key-cell { min-width: 220px; }
.key-cell__name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.key-cell__title { color: var(--ink); }
.key-cell__secret {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 4px; min-height: 34px;
}
.key-secret {
  font-family: var(--font-mono);
  font-size: 12px; line-height: 1.4;
  color: var(--ink-2);                 /* 明暗两套均 ~10.5:1，远超 AA */
  max-width: 30ch;                     /* 限宽：长串在格内折行，不把表格顶宽 */
  overflow-wrap: anywhere;             /* 密钥无空格，必须能任意断行 */
}

/* ---------- 计费标准 ---------- */
.billing {
  padding: 24px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-1);
}
.billing > .meta { margin-top: 6px; }
.billing > .lead { margin-top: 14px; }
.bill-facts { margin-top: 16px; }
.bill-facts .chip b { color: var(--ink); }
.bill-formula {
  margin-top: 16px; padding: 16px 18px; background: var(--surface-2);
  border-radius: var(--r-lg); font-size: 14px; line-height: 1.8; color: var(--ink-2);
}
.bill-formula .mono { color: var(--ink); overflow-wrap: anywhere; }
.bill-block { margin-top: 28px; }
.bill-block > .meta { margin-top: 6px; }
.filter-field { max-width: 280px; margin-top: 12px; }
.billing > .note { margin-top: 18px; }

/* ---------- 控制台（三栏） ---------- */
.console {
  display: grid; grid-template-columns: 248px minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px; align-items: start;
}
@media (max-width: 1079px) {
  .console { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .console .resp-pane { grid-column: 1 / -1; }
}
@media (max-width: 759px) {
  .console { grid-template-columns: minmax(0, 1fr); }
  .console .resp-pane { grid-column: auto; }
}
.console > .pane { min-inline-size: 0; }
.pane-bd { padding: 16px 18px; }

/* 接口列表（竖向 tablist） */
.ep-list { display: flex; flex-direction: column; gap: 4px; padding: 10px; overflow-x: auto; scrollbar-width: thin; }
.ep {
  display: flex; flex-direction: column; gap: 2px; text-align: start; width: 100%;
  padding: 10px 12px; border-radius: var(--r-sm); cursor: pointer;
  border: 1px solid transparent;
  transition: background-color .14s var(--ease-out), border-color .14s var(--ease-out);
}
.ep:hover { background: var(--line-soft); }
.ep[aria-selected="true"] { background: var(--accent-soft); border-color: var(--accent-line); }
.ep .m { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--ink-3); }
.ep .p { font-family: var(--font-mono); font-size: 12px; color: var(--ink); overflow-wrap: anywhere; }
.ep .t { font-size: 13px; line-height: 1.5; color: var(--ink-3); }

/* 请求栏 */
.base-url { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.base-url span { flex: none; font-size: 11px; letter-spacing: .06em; color: var(--ink-3); }
.base-url input {
  flex: 1 1 auto; min-inline-size: 0; padding: 8px 10px;
  background: var(--well); border: 1px solid var(--line); border-radius: var(--r-sm);
  font: inherit; font-family: var(--font-mono); font-size: 13px; color: var(--ink);
}
.raw-details { margin-block: 6px 14px; }
.raw-details summary { cursor: pointer; font-weight: 700; color: var(--ink-2); font-size: 14px; }
.raw-details textarea { min-height: 140px; font-family: var(--font-mono); font-size: 13px; }
.run-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

/* 响应栏 */
.resp-body {
  margin-top: 12px; padding: 14px 16px; min-height: 120px;
  background: var(--code-bg); color: var(--code-ink);
  font-family: var(--font-mono); font-size: 13px; line-height: 1.7;
  border-radius: var(--r-sm); white-space: pre-wrap; overflow-wrap: anywhere;
}
.resp-body .dim { color: var(--code-dim); }
.resp-body .k { color: var(--accent); }
.resp-body .ok { color: var(--code-ink); }
#respExtra { display: flex; flex-direction: column; gap: 12px; }
.resp-img { max-width: 100%; height: auto; margin-top: 12px; border-radius: var(--r-sm); border: 1px solid var(--line-soft); }
.code-pane { padding: 0 8px 8px; }
.code-pane .code { max-height: 320px; overflow: auto; }

/* ---------- 说明区 ---------- */
.api-note {
  margin-top: 24px; padding: 14px 16px;
  background: var(--surface-2); border: 1px solid var(--line-soft);
  border-radius: var(--r-lg); font-size: 13px; line-height: 1.7; color: var(--ink-2);
}
.api-note .mono { color: var(--ink); overflow-wrap: anywhere; }

/* ---------- api.js 生成的按钮用的是旧式空格类名（btn ghost sm / btn sm primary） ---------- */
.btn.primary { background: var(--accent); color: var(--on-accent); }
.btn.primary:hover { background: var(--accent-hover); }
.btn.ghost { border: 1px solid var(--line); color: var(--ink); }
.btn.ghost:hover { border-color: var(--ink-3); background: var(--line-soft); }