/* ============================================================================
   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); }

/* ============================================================================
   hero 右栏「控制台位」+ 额度与充值卡
   ----------------------------------------------------------------------------
   ★★ 为什么右栏要能放两张不同的卡：登录前是登录卡，登录后原地换成「额度与充值」。
      两张卡同父、同列、同左边缘 ⇒ 登录只换内容，不换位置、不换宽度（门禁断言差 ≤1px）。
   ★★ 下面四条规则**必须成对**，漏一条就会跳版：
      ① .key-console { max-width: 460px }        ↔ .auth-card { max-width: 460px }
      ② @media(min-width:1024px) 解除限宽        ↔ .hero-sm .auth-card
      ③ @media(max-width:480px) 收紧内边距        ↔ .hero-sm .auth-card
      ④ .hero-quick 全宽度显示（2026-10-16 修；原为「只在 ≥1024」，见下方左栏注释）
   ============================================================================ */
.hero-aside { min-inline-size: 0; }
.hero-aside > .auth-card,
.hero-aside > .key-console { width: 100%; }
.hero-aside > .key-console { animation: kc-in .22s var(--ease-out) both; }
@keyframes kc-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero-aside > .key-console { animation: none; } }

.key-console {
  max-width: 460px;                    /* ① 必须与 .auth-card 同值 */
  /* ★ 卡内行高收到 1.55：body 是 1.8（适合长文），但卡片里全是单行控件
     （额度池数字 / 三档行 / 输入框 / 按钮），1.8 会把每一行都撑高 ~10px，
     六行就是 60px —— 而卡高直接决定「能不能零滚动」。长文（.key-note / .caption /
     .kc-note）自己有 line-height，不受这条影响。 */
  line-height: 1.55;
  padding: 24px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1);
}
@media (min-width: 1024px) {
  .hero-sm .key-console { max-width: none; }   /* ② 与 .hero-sm .auth-card 同一条规则，成对出现 */
}
@media (max-width: 480px) {
  .hero-sm .key-console { padding: 20px 18px; }  /* ③ 与 .hero-sm .auth-card 成对 */
}

.kc-hd { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.kc-hd .who { margin-inline-start: auto; }
.kc-hd + .meta { margin-top: 6px; }

/* 两个「钱」是两个不同的数：额度池（Key 的）/ 账户余额（账号的）
   并排对照 + 各自带标签 ⇒ 杜绝「402 说额度不足，可我账户里明明有钱」的误读 */
.kc-pool { margin-top: 14px; padding: 14px 16px; background: var(--surface-2); border-radius: var(--r-lg); }
.kc-pool__row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.kc-pool__k { font-size: 13px; color: var(--ink-3); }
.kc-pool__v { font-family: var(--font-mono); font-size: 30px; line-height: 1; font-weight: 600; color: var(--ink); }
.kc-pool__u { font-size: 13px; color: var(--ink-3); }
.kc-pool.is-empty .kc-pool__v { color: var(--danger); }
.kc-pool__acct { margin-top: 8px; font-size: 13px; color: var(--ink-3); }
.kc-pool__acct b { font-family: var(--font-mono); color: var(--ink-2); }
.kc-pool__totals { margin-top: 8px; font-size: 12px; line-height: 1.6; color: var(--ink-3); }
.kc-topup { display: flex; gap: 8px; margin-top: 12px; }
.kc-topup input {
  flex: 1 1 auto; max-width: 190px; min-inline-size: 0; padding: 8px 10px; text-align: end;
  background: var(--well); border: 1px solid var(--line); border-radius: var(--r-sm);
  font: inherit; font-family: var(--font-mono); font-size: 14px; color: var(--ink);
}
.kc-topup input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.kc-topup button { flex: none; }
.kc-warn { margin-top: 10px; font-size: 13px; line-height: 1.6; color: var(--danger); }

/* ---------- 充值：输入积分数 → 三档各自的金额 ----------
   ★ 竖排三行而不是并排三列：440px 的列宽里并排三列每列只剩 ~130px，
     档位名 + 单价 + 金额挤成三行小字反而比不出来；竖排后金额右对齐，
     「同样 5600 积分，三档差多少钱」一眼可见。 */
.kc-buy { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.kc-buy__amt { display: flex; align-items: center; gap: 8px; }
.kc-buy__amt > label { flex: none; font-size: 14px; font-weight: 600; color: var(--ink); }
.kc-buy__amt > input {
  /* ★ 不铺满整行：4 位数用不着 230px 宽的框，撑满会把「积分」推到卡片最右边、
     整行看起来像两个不相关的控件。限宽后三件（标签 / 框 / 单位）是**一簇**。 */
  flex: 1 1 auto; max-width: 190px; min-inline-size: 0; padding: 8px 10px; text-align: end;
  background: var(--well); border: 1px solid var(--line); border-radius: var(--r-sm);
  font: inherit; font-family: var(--font-mono); font-size: 15px; font-weight: 600;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.kc-buy__amt > input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.kc-buy__amt > input[aria-invalid="true"] { border-color: var(--danger); }
.kc-buy__unit { flex: none; font-size: 13px; color: var(--ink-3); }
.kc-buy__quick { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.kc-buy__quick button {
  padding: 4px 9px; border: 1px solid var(--line); border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); cursor: pointer;
}
.kc-buy__quick button:hover { border-color: var(--ink-3); background: var(--line-soft); }

/* 三档：真 radio + label 行 ⇒ 键盘/读屏可用；选中态靠 :has()，不靠 JS 加类 */
.kc-tiers { margin: 10px 0 0; padding: 0; border: 0; }
.kc-tier {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: var(--r-sm); cursor: pointer;
  border: 1px solid transparent;
  transition: background-color .14s var(--ease-out), border-color .14s var(--ease-out);
}
.kc-tier:hover { background: var(--line-soft); }
.kc-tier input { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.kc-tier__name { font-size: 14px; font-weight: 600; color: var(--ink); }
.kc-tier__rate { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); }
.kc-tier__sum {
  margin-inline-start: auto; font-family: var(--font-mono); font-size: 15px; font-weight: 600;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.kc-tier:has(input:checked) { background: var(--accent-soft); border-color: var(--accent-line); }
.kc-tier:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }
/* ★ 未购买的档位：**灰显但金额照常显示**（用户要能看见别档单价），且不可选。
   ★ 灰显靠「字重 + 颜色降到 --ink-3 + 控件降透明」，**不靠整行 opacity** ——
     整行降透明会让文字对比度掉到阈值以下，而对比度门禁会跳过 opacity<0.9 的节点 ⇒ 自己把自己测瞎了。 */
.kc-tier.is-locked { cursor: not-allowed; }
.kc-tier.is-locked:hover { background: transparent; }
.kc-tier.is-locked .kc-tier__name { font-weight: 500; color: var(--ink-3); }
.kc-tier.is-locked input { opacity: .5; }
.kc-tier.is-locked .kc-tier__sum { font-weight: 500; }

.kc-tiers-note { margin-top: 6px; font-size: 12px; line-height: 1.6; color: var(--ink-3); }
.kc-tiers-note b { color: var(--ink-2); }
.kc-buy #kcPay { margin-top: 12px; }
.kc-buy #kcPay:disabled { opacity: .45; cursor: default; }
.kc-note { margin-top: 8px; font-size: 12px; line-height: 1.6; color: var(--ink-3); }
.kc-note b { color: var(--ink-2); }

/* ---------- 卡密激活（点开才出现输入框） ---------- */
.kc-redeem { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.kc-redeem__toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; color: var(--accent-ink); cursor: pointer;
}
.kc-redeem__toggle::after {
  content: ""; width: 0; height: 0;
  border-inline: 4px solid transparent; border-block-start: 5px solid currentColor;
  transition: transform .18s var(--ease-out);
}
.kc-redeem__toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
.kc-redeem__toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-xs); }
.kc-redeem__form { margin-top: 10px; }
.kc-redeem__form 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: 14px; letter-spacing: .04em;
  color: var(--ink); text-transform: uppercase;
}
.kc-redeem__form input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.kc-redeem__form input[aria-invalid="true"] { border-color: var(--danger); }
.kc-redeem__msg { margin-top: 8px; min-height: 18px; font-size: 12px; line-height: 1.5; color: var(--danger); }
.kc-redeem__msg.ok { color: var(--ok); }

.kc-ft {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line-soft);
}
.kc-ft a { font-size: 13px; font-weight: 700; color: var(--accent-ink); }
.kc-logout { margin-inline-start: auto; font-size: 13px; color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; }
.kc-logout:hover { color: var(--ink); }

/* `.meta` 带 text-transform: uppercase，会把 cookie 名渲染成 NB_SESS（真名是小写）。
   字面量必须原样显示 ⇒ 单独复位 transform（它是**继承**属性，必须包在字面量那一层）。 */
.kc-literal { text-transform: none; }

/* ---------- 左栏（已登录）：BASE URL + API Key ----------
   ★ 全宽度显示（2026-10-16 修）：原先只在 ≥1024px 显示，理由是「窄屏这两个字段由下方
      『三步接入』承担」—— 但**本构建器已把「三步接入」整节删掉**，兜底路径消失、隐藏规则
      还在 ⇒ 手机端（<1024px）完全拿不到 API Key（看不到 / 复制不了 / 连「新建密钥」都点不到）。
      ⇒ 取消隐藏。代价：窄屏额度卡下移 ~357px（实测 390px：top 381 → 738）；
      而「隐藏时额度卡本就不在首屏」（实测卡底 1088 > 视口 844）⇒ 原顾虑不成立。 */
/* ★ mobile-key-visible v1 */
#heroLeadIn .api-lead { margin-top: 14px; }
.hero-quick { display: grid; gap: 14px; max-width: 52ch; margin-top: 22px; }
.hero-quick .code-row { align-items: center; }

/* 窄屏 / 宽屏文案切换：单列堆叠时，「右边那张卡」其实在**下方** */
.mkey-sm { display: inline; }
.mkey-lg { display: none; }
@media (min-width: 1024px) { .mkey-sm { display: none; } .mkey-lg { display: inline; } }

/* 密钥清单卡头的「新建密钥」入口（与 hero 左栏那个共用同一个 createKey） */
.key-card-hd #newKey2 { margin-inline-start: auto; }
.hero-quick__acts { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- 三步接入：已登录时收成一行（<details>） ---------- */
.qs-fold > summary {
  cursor: pointer; padding: 14px 18px; border: 1px solid var(--line);
  border-radius: var(--r-lg); background: var(--surface);
  font-size: 15px; font-weight: 600; color: var(--ink);
}
.qs-fold > summary::marker { color: var(--accent-ink); }
.qs-fold[open] > summary { border-end-start-radius: 0; border-end-end-radius: 0; }
.qs-fold .qs { margin-top: 0; }

/* 扫码付款弹窗的样式在 assets/pay-qr.css（index.html 与 api.html 共用同一个弹窗，
   抄两份必然分叉）。两页都加载它。 */

/* ============================================================================
   用量与消耗看板（api.html #usage）
   ★ 加新块前已 grep 过类名：us-* / .num / .tbl / .locked 均未被本文件占用。
   ============================================================================ */
.us-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}
@media (min-width: 720px) {
  .us-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.us-card {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 16px 18px 14px;
  box-shadow: var(--sh-1);
}
.us-card__hd { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.us-card__hd b { font-size: 15px; color: var(--ink); }
.us-card__hd span { font-size: 12px; color: var(--ink-3); }
.us-card__main { display: flex; align-items: baseline; gap: 6px; margin-top: 10px; }
.us-card__main .num { font-size: 30px; line-height: 1.05; color: var(--ink); font-variant-numeric: tabular-nums; }
.us-card__main i { font-style: normal; font-size: 12px; color: var(--ink-3); }
.us-card__kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; margin: 12px 0 0; }
.us-card__kv > div { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.us-card__kv dt { font-size: 12px; color: var(--ink-3); }
.us-card__kv dd { margin: 0; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.us-total {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  margin: 16px 0 0; font-size: 13px; color: var(--ink-2);
}
.us-total b { color: var(--ink); font-variant-numeric: tabular-nums; }
.us-models { margin-top: 28px; }
.us-models__hd { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.us-models .tbl { margin-top: 10px; }
/* ★ 窄屏不把表头竖排（「类型」被拆成两行）——让 .table-scroll 横向滚，与本站其它表格一致 */
.us-models .tbl th, .us-models .tbl td { white-space: nowrap; }
.us-empty { color: var(--ink-3); padding: 18px 4px; text-align: center; }
#usage .locked { margin-top: 4px; }