/* ==========================================================================
   ui.css — 公共组件层
   为什么单独一个文件：tokens/base/chrome 之外，现状没有任何 CSS 能同时到达 12 页——
   sections 到不了 api/pricing/tools/404，console 到不了 api/pricing，home+docs 到不了控制台族。
   结果就是 api.html / pricing.html 上写着 .btn / .badge / .code__bar / .tok-key，
   而这些 class 在它们加载的任何文件里都没定义，文档页的代码块一直是裸 <pre>。
   加载顺序固定：tokens → base → chrome → ui → 页专属。
   B1 只做“补上从未定义的原语 + 把控制台族与文档族共用的那几条搬到这一层”，
   卡片/表格/模态/输入的收敛在后续批次，不在这里。
   ========================================================================== */

/* ---------------- 按钮 ----------------
   几何与配色沿用控制台原 .ui-btn（已从此处上移），文档页的 .btn* 是同一族的别名。 */
.ui-btn, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 12px;
  border: 1px solid var(--color-border-warm); border-radius: var(--r-6);
  background: var(--color-card); color: var(--color-text);
  font-size: 13px; font-family: var(--font-main);
  white-space: nowrap;
  transition: background-color .15s var(--ease-std), border-color .15s var(--ease-std), color .15s var(--ease-std);
}
.ui-btn:hover, .btn:hover { background: var(--color-surface-hover); color: var(--color-text-strong); }

.ui-btn--primary, .btn--primary { background: var(--color-invert); border-color: var(--color-invert); color: var(--color-on-invert); }
.ui-btn--primary:hover, .btn--primary:hover { background: var(--color-primary-85); color: var(--color-on-invert); }
.ui-btn--outline, .btn--outline { background: transparent; }

/* --cta：文档/定价页顶栏那颗唯一的强调钮 */
.btn--cta { background: var(--color-invert); border-color: var(--color-invert); color: var(--color-on-invert); }
.btn--cta:hover { background: var(--color-primary-85); color: var(--color-on-invert); }

.ui-btn--danger, .btn--danger { color: var(--color-danger); border-color: var(--color-danger-soft); }
.ui-btn--sm, .btn--sm { height: 26px; padding: 0 9px; font-size: 12px; }
.ui-btn--block, .btn--block { display: flex; width: 100%; }
.ui-btn[disabled], .btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------------- 提示行 / 状态徽章 ----------------
   .ui-hint 与 .badge* 原在 console.css，搬到这层后 api/pricing/terms/privacy 才拿得到。 */
.ui-hint { font-size: 12px; line-height: 18px; color: var(--color-text-secondary); }

.badge, .ui-tag {
  display: inline-flex; align-items: center; gap: 5px;
  height: 21px; padding: 0 8px; border-radius: var(--r-999);
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.badge--ok    { background: var(--color-ok-soft);      color: var(--color-ok); }
.badge--warn  { background: var(--color-warn-soft);    color: var(--color-warn); }
.badge--off   { background: var(--color-bg-section);   color: var(--color-text-secondary); }
.badge--danger{ background: var(--color-danger-soft);  color: var(--color-danger); }

/* pill 上的小圆点：api.html:88 一直靠内联 style 现场补，这里给它一个真定义 */
.pill__dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.pill--accent {
  border-color: var(--accent-line); background: var(--accent-soft);
  color: var(--accent-ink); min-width: 0; height: 32px; font-size: 13px;
}

/* ---------------- 代码块 ----------------
   这是文档族此前最大的视觉缺口：.code 只有 margin-top，pre 完全裸奔。 */
.code {
  margin-top: var(--s-4);
  border: 1px solid var(--color-border-warm);
  border-radius: var(--r-12);
  background: var(--color-card-2);
  overflow: hidden;
}
.code__bar {
  display: flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 8px 0 14px;
  border-bottom: 1px solid var(--color-border-warm);
  background: var(--color-bg-section);
}
.code__spacer { flex: 1 1 auto; }
.code__tab {
  display: inline-flex; align-items: center; height: 28px; padding: 0 10px;
  border: 0; border-radius: var(--r-999); background: transparent;
  font-family: var(--font-mono); font-size: 12px; line-height: 16px;
  color: var(--color-text-secondary); white-space: nowrap;
  transition: background-color .15s var(--ease-std), color .15s var(--ease-std);
}
button.code__tab { cursor: pointer; }
button.code__tab:hover { background: var(--color-hover); color: var(--color-text-strong); }
.code__tab[aria-selected="true"], .code__tab.is-on {
  background: var(--accent-soft); color: var(--accent-ink); font-weight: 600;
}
.code__copy {
  display: inline-flex; align-items: center; gap: 5px;
  height: 28px; padding: 0 9px;
  border: 1px solid var(--color-border-warm); border-radius: var(--r-6);
  background: var(--color-card); color: var(--color-text-secondary);
  font-family: var(--font-main); font-size: 12px; white-space: nowrap;
  transition: background-color .15s var(--ease-std), color .15s var(--ease-std);
}
.code__copy:hover { background: var(--color-surface-hover); color: var(--color-text-strong); }
.code__copy svg { width: 14px; height: 14px; }
.code__copy.is-done { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-ink); }

.code pre {
  margin: 0; padding: 14px 16px;
  font-family: var(--font-mono); font-size: 12.5px; line-height: 21px;
  color: var(--color-text-strong);
  tab-size: 2;
}

/* ---------------- 语法着色 ----------------
   文档页的 pre 全是手写 span（curl 示例：met=命令/方法，key=旗标，str=引号内，num=数字，com=注释）。
   配色跟暖纸基调：主色走橄榄，字符串走赭/杏，冷色只留给数字，注释用弱色斜体。
   深浅成对，且每一支在自己的底上都过 AA。 */
.tok-met { color: var(--accent-ink); font-weight: 600; }
.tok-key { color: var(--accent); }
.tok-str { color: #8a5a2b; }
.tok-num { color: #2f5d74; }
.tok-com { color: rgba(31, 35, 41, .52); font-style: italic; }

html[data-theme="dark"] .tok-met { color: var(--accent-ink); }
html[data-theme="dark"] .tok-str { color: #e0b487; }
html[data-theme="dark"] .tok-num { color: #8fc3dd; }
html[data-theme="dark"] .tok-com { color: rgba(255, 255, 255, .44); }

/* ==========================================================================
   语义补充层 —— 控制台（账户面）这一轮立的目标形态
   为什么不写进 tokens.css：那是两套材质的色板、另有代理在并行改；这里补的
   是"组件级"语义（选中块、遮罩、内嵌圆角、骨架屏），本来就该归组件层。
   这一层能到达全部 12 页，console.css 只引用、不再各开一套。
   ========================================================================== */

/* 双材质：浅色 = 暖纸 + 10/8 圆角；深色 = 直角卡 + 1px 细线分层（刻意保留） */
:root,
html[data-theme="light"] {
  --ui-r-card:   10px;
  --ui-r-inner:  8px;
  --ui-r-thumb:  4px;

  --ui-track:        #f0ebe5;                              /* 分段控件轨道：暖纸凹 */
  --ui-thumb:        #fff;                                 /* 选中块比轨道亮一档 */
  --ui-thumb-line:   rgba(31, 35, 41, .10);
  --ui-thumb-shadow: 0 1px 2px rgba(31, 35, 41, .08);
  --ui-rail:         #fff;                                 /* 侧栏 / 窄屏导航条底 */

  --ui-scrim:        rgba(31, 35, 41, .42);                /* 与 --color-highlight 同墨，不再是 Tailwind slate */
  --ui-pop-shadow:   0 18px 44px rgba(31, 35, 41, .16);

  --ui-on-warn:      #3a2200;                              /* 琥珀底上的墨色字：白字在深色琥珀只有 1.6:1 */
  --ui-bar:          rgba(82, 110, 62, .26);               /* 柱图 / 排行条：橄榄 */
  --ui-bar-hot:      #526e3e;
  --ui-chip-on:      rgba(82, 110, 62, .09);               /* 选中态底色 */
  --ui-accent-ink:   #f7f3ea;                               /* 橄榄实心钮上的字 */

  --ui-skel-a:       #f0ebe5;
  --ui-skel-b:       #e5ded4;
}

html[data-theme="dark"] {
  --ui-r-card:   0px;
  --ui-r-inner:  0px;
  --ui-r-thumb:  0px;

  /* 原稿选中块用 --color-card(#121212) 压在 rgba(255,255,255,.05) 的轨道上 → 明度反装；
     这里轨道 .07 白、选中块 #26272b，比轨道再亮一档并补 1px 描边。 */
  --ui-track:        rgba(255, 255, 255, .07);
  --ui-thumb:        #26272b;
  --ui-thumb-line:   rgba(255, 255, 255, .16);
  --ui-thumb-shadow: none;
  --ui-rail:         #171717;                              /* 与 #121212 页面底拉开一档，不再只剩 1px */

  --ui-scrim:        rgba(8, 8, 9, .74);
  --ui-pop-shadow:   0 0 0 1px rgba(255, 255, 255, .14), 0 24px 60px rgba(0, 0, 0, .7);

  --ui-on-warn:      #231800;
  --ui-bar:          rgba(163, 194, 128, .40);
  --ui-bar-hot:      #a3c280;
  --ui-chip-on:      rgba(163, 194, 128, .14);
  --ui-accent-ink:   #16210f;

  --ui-skel-a:       rgba(255, 255, 255, .07);
  --ui-skel-b:       rgba(255, 255, 255, .15);
}

/* ---------------- 强调钮：橄榄实心 ----------------
   .ui-btn--primary 是全站唯一的黑色主钮，12 页共用，这轮不动它；
   账户面的钱动作（开 Key / 兑换 / 保存）改用 --accent，与"暖纸+橄榄"同调。 */
.ui-btn--accent, .btn--accent { background: var(--accent); border-color: var(--accent); color: var(--ui-accent-ink); }
.ui-btn--accent:hover, .btn--accent:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: var(--ui-accent-ink); }
html[data-theme="dark"] .ui-btn--accent:hover,
html[data-theme="dark"] .btn--accent:hover { background: var(--accent-ink); border-color: var(--accent-ink); }

/* ---------------- 分段单选（额度模式 / 有效期 / 区间） ----------------
   .seg 是控制台族的历史名，.ui-seg 是目标形态，同一份规则，不再两处各写。 */
.ui-seg, .seg {
  display: flex; gap: 4px; padding: 3px;
  background: var(--ui-track); border-radius: var(--r-6);
}
.ui-seg > button, .seg > button {
  flex: 1; min-width: 0; height: 30px; padding: 0 8px;
  border: 1px solid transparent; border-radius: var(--ui-r-thumb);
  font-size: 13px; color: var(--color-text-secondary); white-space: nowrap;
  transition: background-color .15s var(--ease-std), color .15s var(--ease-std), border-color .15s var(--ease-std);
}
.ui-seg > button:hover, .seg > button:hover { color: var(--color-text-strong); }
.ui-seg > .is-on, .seg > .is-on,
.ui-seg > [aria-pressed="true"], .seg > [aria-pressed="true"] {
  background: var(--ui-thumb); border-color: var(--ui-thumb-line);
  color: var(--color-text-strong); font-weight: 600; box-shadow: var(--ui-thumb-shadow);
}

/* ---------------- 骨架屏 ----------------
   全站此前零骨架：加载态一律用一行"加载中…"顶掉整张表，跳一下就是白屏。 */
.skel {
  display: block; height: 11px; border-radius: var(--r-6);
  background-color: var(--ui-skel-a);
  background-image: linear-gradient(90deg, transparent, var(--ui-skel-b) 45%, transparent 88%);
  background-size: 220% 100%; background-repeat: no-repeat;
  animation: ui-skel 1.15s var(--ease-std) infinite;
}
@keyframes ui-skel { from { background-position: -120% 0; } to { background-position: 230% 0; } }
.skel--sm { width: 56px; }
.skel--md { width: 96px; }
.skel--lg { width: 150px; }
.skel--card { height: 88px; border-radius: var(--ui-r-card); }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }

/* ---------------- 表格状态格（空 / 载入中失败 / 无数据） ----------------
   原先五处手写 text-align:center;padding:28px 内联，且把块级 .empty 塞进 <td> 用。 */
.cell-state { padding: 30px 16px; text-align: center; font-size: 13px; color: var(--color-text-secondary); }
.cell-state b { display: block; margin-bottom: 4px; font-size: 14px; font-weight: 600; color: var(--color-text-strong); }
.cell-state .ui-btn, .cell-state .btn { margin-top: 12px; }
.cell-state--bad { color: var(--color-danger); }

/* ---------------- 提示条（未保存密钥 / 连接降级） ---------------- */
.ui-strip {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--accent-line); border-left: 3px solid var(--accent);
  border-radius: var(--ui-r-inner); background: var(--ui-chip-on);
  font-size: 13px; line-height: 20px; color: var(--color-text);
}
.ui-strip__body { flex: 1 1 auto; min-width: 0; }
.ui-strip__body b { display: block; font-size: 13px; font-weight: 600; color: var(--color-text-strong); }
.ui-strip__act { flex: none; display: flex; align-items: center; gap: 8px; }
.ui-strip--warn { border-color: var(--color-warn); border-left-color: var(--color-warn); background: var(--color-warn-soft); }
.ui-strip--warn .ui-strip__body b { color: var(--color-warn); }

/* ---------------- 文本工具（只为消掉内联 style 而存在） ---------------- */
.ui-hint--p { font-size: 13px; line-height: 22px; }        /* 正文级提示段，非标签级 12/18 */
.ui-hint a {
  color: var(--color-text-strong); text-decoration: underline;
  text-underline-offset: 2px; text-decoration-color: var(--hairline-strong);
}
.cell-clip {
  max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cell-act { white-space: nowrap; text-align: right; }
.stack { display: grid; gap: 12px; justify-items: start; align-content: start; }