/* 子页专用样式（首页不用）：2026-10-15 建。
   壳（导航/段落骨架/按钮/套餐/表格/页脚）全部走 style.css，这里只放子页独有的块，
   避免五个页面各写一套重复 token。 */

/* 子页页头：主标题与 h2 同级，不抢首屏那种展示字 */
.page__h1 {
  font-size: var(--s-h2);
  font-weight: 600;
  letter-spacing: -0.02em;
  max-width: 20ch;
}
/* 页内的次级小节标题（真出过的片这种） */
.page__h2 {
  margin-top: 68px;
  font-size: var(--s-h3);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* 套餐卡里的「额度与价格按需配置」 */
.plan__price {
  margin: 0 0 18px;
  font-size: var(--s-small);
  color: var(--muted);
}
.plan ul { margin-bottom: 20px; }

/* 接口计费口径：两块两列文本，不做卡片阵 */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 44px; }
.fact h3 { font-size: var(--s-h3); }
.fact p { margin-top: 10px; font-size: var(--s-body); color: var(--muted); max-width: 44ch; }
.fact__act { margin-top: 16px; }

/* ★ 2026-10-15 修：下面这些元素在 HTML 里带 width/height 属性 —— 那是表现性提示，
   会给出一个【显式高度】，而 aspect-ratio 只在宽高都 auto 时才生效。
   实测（390 宽真站点）：控制台三张帧图被拉成 109×720 的竖条（原图 1280×720）。
   规矩：凡是「宽度按容器自适应 + aspect-ratio」的 img/video，一律配 height: auto。 */
/* 真片子：一条 wide 成片 + 四帧对照（真帧，不用占位图） */
.reel {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  border-radius: var(--r-lg);
  background: var(--fill-2);
}
.frames { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.frames figure { margin: 0; }
.frames img,
.frames video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-md);
  background: var(--fill-2);
}
.frames figcaption { margin-top: 10px; font-size: var(--s-small); color: var(--ink); }
.frames figcaption span { display: block; color: var(--muted); }

/* 能力对照表：窄屏每行变成「能力 + 两条带标签的值」，不然接口那列会掉下来没头没尾 */
@media (max-width: 720px) {
  .spec3 tbody tr { display: grid; gap: 3px; padding: 14px 0; }
  .spec3 tbody tr + tr th, .spec3 tbody tr + tr td { box-shadow: none; }
  .spec3 tbody tr + tr { border-top: 1px solid var(--line); }
  .spec3 tbody th, .spec3 tbody td { padding: 0; }
  .spec3 tbody td { color: var(--muted); }
  .spec3 tbody td:nth-of-type(1)::before { content: "会员订阅 · "; }
  .spec3 tbody td:nth-of-type(2)::before { content: "接口 · "; }
}

@media (max-width: 720px) {
  .facts { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .reel { aspect-ratio: 16 / 9; }
  .frames { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}
@media (max-width: 560px) {
  .frames { grid-template-columns: minmax(0, 1fr); }
}

/* 接口文档：左目录 + 正文，窄屏收成一列 */
.docwrap { display: grid; grid-template-columns: 188px minmax(0, 1fr); gap: 52px; align-items: start; }
.toc { position: sticky; top: calc(var(--nav-h) + 26px); display: grid; gap: 2px; }
.toc a {
  padding: 8px 12px;
  border-radius: var(--pill);
  font-size: var(--s-small);
  color: var(--muted);
  transition: background-color .24s var(--ease), color .24s var(--ease), transform .24s var(--ease);
}
.toc a:hover { background: var(--fill-2); color: var(--ink); }
.toc a:active { transform: scale(.96); }

.doc { max-width: 74ch; }
.doc h2 { margin-top: 60px; scroll-margin-top: calc(var(--nav-h) + 22px); }
.doc h2:first-child { margin-top: 0; }
.doc h3 { margin-top: 30px; }
.doc p { margin-top: 14px; color: var(--muted); }
.doc a { color: var(--accent); text-underline-offset: 3px; }
.doc ul { margin: 16px 0 0; padding-left: 20px; display: grid; gap: 10px; color: var(--muted); }
.doc code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .92em;
  background: var(--fill-2);
  border-radius: 6px;
  padding: 2px 6px;
}

.doc .ep { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.doc .ep code { background: none; padding: 0; font-size: var(--s-body); color: var(--ink); }
.verb {
  font-size: var(--s-small);
  font-weight: 600;
  color: var(--accent);
  background: var(--tint);
  border-radius: var(--pill);
  padding: 5px 11px;
}
.verb--get { color: var(--ink); background: var(--fill-2); }
.req { margin-left: 7px; font-size: var(--s-small); font-weight: 400; color: var(--muted); }

.doc .code { margin: 18px 0; background: var(--fill-2); border-radius: var(--r-md); padding: 16px 20px 18px; display: grid; gap: 12px; }
/* 单行片段不用大盒子：一行高度，按钮跟在右边 */
.doc .code--slim { display: flex; align-items: center; gap: 14px; padding: 12px 16px; }
.doc .code--slim code { flex: 1; min-width: 0; }
.doc .code--slim .btn { flex: none; }
.code__top { display: flex; align-items: center; gap: 12px; }
.code__lbl { font-size: var(--s-small); color: var(--muted); }
.code__top .btn { margin-left: auto; }
.doc .code code {
  background: none;
  padding: 0;
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
  white-space: pre;
  overflow-x: auto;
}

.doc .ftable { margin-top: 16px; overflow-x: auto; }
.ftable table { width: 100%; border-collapse: collapse; }
.ftable th { text-align: left; font-size: var(--s-small); font-weight: 500; color: var(--muted); padding: 0 16px 12px 0; }
.ftable td { padding: 14px 16px 14px 0; vertical-align: top; font-size: var(--s-small); color: var(--muted); }
.ftable tbody tr + tr td { border-top: 1px solid var(--line); }
.ftable td:first-child { white-space: nowrap; color: var(--ink); }

.docreel { display: block; margin-top: 20px; }
.docreel video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r-lg);
  background: var(--fill-2);
}

@media (max-width: 900px) {
  .docwrap { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .toc { position: static; display: flex; flex-wrap: wrap; gap: 4px; }
  .doc h2 { margin-top: 46px; }
}
@media (max-width: 720px) {
  .ftable td:first-child { white-space: normal; }
  .doc .code { padding: 14px 16px 16px; }
  /* ★ 2026-10-16 手机端拇指尺寸：真机 390 实测目录锚点（docs.html:53-59 的 .toc a）
     只有 64×20px，低于 40px 的可点高度。这里只抬高命中区，不改字号与间距。 */
  .toc a { min-height: 40px; display: inline-flex; align-items: center; }
  /* ★ 2026-10-16 补：探针在 390 下量出表格单元格里的内联链（docs.html:82「模型名，见
     <a href="#models">模型列表</a>。」）只有 64×20px（inTd:true、display:inline、line-height 24）。
     同一文本的目录链（.toc a）改完已是 88×40。这里给表格内的链同样的可点高度：
     24px 行高 + 上下各 8px = 40px。只作用于 ≤720px 的表格，桌面端一个像素不动。 */
  .ftable td a { display: inline-block; padding: 8px 0; }
}

/* ==========================================================================
   工作台（app.html）：登录卡 + 生成表单 + 我的生成记录
   ★ id/class 受 assets/app.js 约束（$('#quotaLeft') 这类选择器一个都不能改名），
     它们的样式全部在这个文件里给；JS 自己吐出来的 .btn-ghost/.btn-sm/.btn-primary
     也在末尾给了兼容定义，注入的按钮跟页面其它按钮长得一样。
   ========================================================================== */
.page-app .sec { padding-top: 52px; }

.auth { max-width: 440px; }
.auth__tabs { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 6px;
  background: var(--fill-2); border-radius: var(--pill); }
.authtabs .tab {
  font: inherit; font-size: var(--s-small); color: var(--muted);
  background: none; border: 0; cursor: pointer;
  padding: 8px 16px; border-radius: var(--pill);
  transition: background-color .24s var(--ease), color .24s var(--ease), transform .2s var(--ease);
}
.authtabs .tab:hover { color: var(--ink); }
.authtabs .tab:active { transform: scale(.96); }
.authtabs .tab[aria-selected="true"] { background: var(--fill-1); color: var(--ink); font-weight: 500; }
.auth .btn { margin-top: 22px; }
.auth .hint { margin-top: 14px; }

.field { margin-top: 18px; }
.field label { display: block; margin-bottom: 8px; font-size: var(--s-small); color: var(--muted); }
.field input, .field textarea, .field select {
  width: 100%; font: inherit; font-size: var(--s-body); color: var(--ink);
  background: var(--fill-2); border: 0; border-radius: var(--r-sm); padding: 13px 14px;
  transition: background-color .24s var(--ease);
}
.field input:hover, .field textarea:hover, .field select:hover { background: var(--fill-3); }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; background: var(--fill-1);
}
.field textarea { min-height: 132px; resize: vertical; line-height: 1.55; }
.hint { margin-top: 10px; font-size: var(--s-small); color: var(--muted); }
/* ★ 2026-10-16 加：工作台提示词字数计数器（wb.js 注入 #promptCount）。
   上限由 /v1/models 的 max_prompt_chars 给，这里只管显示；超限变深梅红，不拦输入。 */
.hint--split { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.count { font-variant-numeric: tabular-nums; white-space: nowrap; }
.count.is-over { color: var(--accent-deep); }
.muted { color: var(--muted); }
.hidden { display: none !important; }
#tsBox { margin-top: 18px; }

.msg { margin-top: 16px; font-size: var(--s-small); display: none; }
.msg.on { display: block; }
.msg.err { color: #9c2b2b; }
.msg.ok { color: #1e6b3a; }

.wb { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: 30px; align-items: start; }
.card-wb { background: var(--fill-1); border-radius: var(--r-lg); padding: 26px 24px; }
.card-wb h2 { font-size: var(--s-h3); font-weight: 600; letter-spacing: -0.01em; }

.quota { display: flex; align-items: baseline; gap: 12px; margin: 18px 0 4px; }
.quota b { font-size: var(--s-h2); font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.quota span { font-size: var(--s-small); color: var(--muted); }

.row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.card-wb .btn { margin-top: 24px; }

.tl { margin-top: 6px; }
/* 任务条不做「一叠同构盒卡」：条目落在白卡上，靠间距分块，播放器本身就是视觉锚点 */
.ti { margin-top: 0; }
.ti + .ti { margin-top: 26px; }
.ti .top { display: flex; align-items: center; gap: 10px; }
.ti .st { font-size: var(--s-small); font-weight: 500; padding: 4px 11px; border-radius: var(--pill);
  background: var(--fill-2); color: var(--muted); }
.ti .st.done { background: #e6f4ea; color: #1e6b3a; }
.ti .st.bad { background: #fdeaea; color: #9c2b2b; }
.ti .p { margin-top: 10px; font-size: var(--s-body); color: var(--ink); overflow-wrap: anywhere; }
.ti .meta { margin-top: 8px; font-size: var(--s-small); color: var(--muted); }
.ti video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  margin-top: 12px; border-radius: var(--r-md); background: var(--fill-3); }

/* app.js 注入的按钮类名（它按生产老壳写的），在这里映射到新壳的样子 */
.bar__slot { display: inline-flex; align-items: center; }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-ghost { background: var(--fill-2); color: var(--ink); }
.btn-sm { padding: 9px 16px; font-size: var(--s-small); }

@media (max-width: 960px) {
  .wb { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}
@media (max-width: 560px) {
  .row2 { grid-template-columns: minmax(0, 1fr); }
  .card-wb { padding: 22px 20px; }
}