/* ═══════════════════════════════════════════════════════════════
   机考页 · shell-kit 遗留类兼容层   exam-compat.css
   ---------------------------------------------------------------
   作答端页面是在 shell-kit 离线包里做的，用的是那套包自带的基础组件类
   （.cta / .chip / .tabs / .field / .card …）。官网设计系统里**一个都没有**
   —— 官网用的是 .btn / .badge / .card 那一套。页面并入官网后这些类全部失效，
   表现为按钮变成浏览器默认样式、状态徽章变成纯文字、等级 Tab 没有选中态。

   这一层把它们按官网 token 重新实现，页面 HTML 与 JS 因此一行都不用改。
   变量取自 base.css 的 :root（shell-kit 的 --seal / --paper / --line 等旧名
   在下方统一映射到官网 token）。

   ⚠ 这是过渡层，不是长期方案。后续应把页面与 JS 里的类名逐步换成官网的
     .btn / .badge，换完即可删掉本文件。在那之前，新写的机考页面**不要**再用
     这里的类，直接用官网 base.css 的。

   ⚠ 作用域限定在 body[data-page="hsk-mock-test"]：这些类名很通用
     （.card / .field / .tab），泄漏到其他页面会打架。
   ═══════════════════════════════════════════════════════════════ */

body[data-page="hsk-mock-test"] {
  /* shell-kit 旧变量名 → 官网 token */
  --seal: var(--red);
  --seal-dark: var(--red-dark);
  --seal-tint: var(--red-light);
  --paper: var(--surface);
  --paper-2: var(--surface-2);
  --paper-3: var(--surface-3);
  --line: var(--border);
  --line-soft: var(--border);
  --line-strong: var(--border-2);
  --serif: var(--font);
  --serif-sc: var(--font);
  --sans: var(--font);
}

body[data-page="hsk-mock-test"] .eyebrow { display:flex;align-items:center;gap:14px;
  font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--seal); }
body[data-page="hsk-mock-test"] .eyebrow::after { content:'';height:1px;width:56px;background:var(--seal);opacity:.4; }
body[data-page="hsk-mock-test"] .page-title { font-weight:800;font-size:clamp(2rem,4vw,3.2rem);
  line-height:1.1;letter-spacing:-.035em;margin-top:16px; }
body[data-page="hsk-mock-test"] .page-title em { font-style:normal;font-weight:800;color:var(--red); }
body[data-page="hsk-mock-test"] .page-sub { font-size:15.5px;color:var(--ink-2);margin-top:14px;max-width:58ch; }
/* .cta 基础样式 —— 之前只补了 :hover / .ghost / .lg，漏了本体，
   于是按钮用的是浏览器默认边框，hover 时才叠上红底，看起来就是「红底黑框」。
   焦点态一并接管：默认的 focus outline 在实心深色按钮上也是一圈黑框。 */
body[data-page="hsk-mock-test"] .cta {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 22px; border:1px solid var(--red); border-radius:var(--radius-sm);
  background:var(--red); color:#fff; font-family:inherit; font-size:14px; font-weight:600;
  line-height:1; white-space:nowrap; cursor:pointer;
  transition:background .15s, border-color .15s, color .15s;
}
body[data-page="hsk-mock-test"] .cta:focus-visible {
  outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--red) 30%, transparent);
}
body[data-page="hsk-mock-test"] .cta:disabled {
  cursor:not-allowed; background:var(--surface-2); border-color:var(--border); color:var(--ink-4);
}
body[data-page="hsk-mock-test"] .cta:hover:not(:disabled) { background:var(--red-dark);border-color:var(--red-dark); }
body[data-page="hsk-mock-test"] .cta svg { width:14px;height:14px; }
body[data-page="hsk-mock-test"] .cta.ghost { background:var(--surface);color:var(--ink-2);border-color:var(--border-2);box-shadow:none; }
body[data-page="hsk-mock-test"] .cta.ghost:hover:not(:disabled) { border-color:var(--ink);color:var(--ink);background:var(--surface); }
body[data-page="hsk-mock-test"] .cta.lg { min-height:46px;padding:0 30px;font-size:15px; }
/* ⚠ 这里原本有一套 shell-kit 的 .card 悬停外观：顶部 3px 红条（::before）、
   上浮 3px、大投影。三条全部删掉，原因不是"不好看"，是它**画错了地方**：
   那个 ::before 是 position:absolute + top:0，而本页唯一带 .card 的元素
   （buildCards 生成的 `.card.paper-card`）没有定位上下文 —— 官网 base.css 的
   .card 不设 position。绝对定位于是逐层上溯到页面根元素，红条画在了整页顶端：
   鼠标划过任意一张试卷卡，网页最上方就闪出一条红色进度条一样的东西。
   卡片的外观本就由页面自己的 .paper-card 规则定义（边框 + 阴影，不位移、无红条），
   这几条只是 shell-kit 的重复实现，删掉即回到设计稿。 */
body[data-page="hsk-mock-test"] .card-title { font-weight:700;font-size:20px;letter-spacing:-.025em; }
body[data-page="hsk-mock-test"] .card-meta { font-size:12.5px;color:var(--ink-3); }
body[data-page="hsk-mock-test"] .chip svg { width:13px;height:13px; }
body[data-page="hsk-mock-test"] .chip-code { color:var(--seal); }
body[data-page="hsk-mock-test"] .chip-soon { color:var(--ink-3); }
body[data-page="hsk-mock-test"] .chip-box { border:1px solid currentColor;border-radius:6px;padding:4px 9px; }
body[data-page="hsk-mock-test"] .tab { padding:9px 18px;border:1px solid var(--line);border-radius:6px;background:none;font-family:inherit;font-size:13px;font-weight:600;color:var(--ink-2);transition:all .15s; }
body[data-page="hsk-mock-test"] .tab.on { background:var(--ink);border-color:var(--ink);color:var(--paper); }
body[data-page="hsk-mock-test"] .tab:not(.on):not(:disabled):hover { border-color:var(--seal);color:var(--seal); }
body[data-page="hsk-mock-test"] .tab:disabled { opacity:.38;cursor:not-allowed; }
body[data-page="hsk-mock-test"] .kv:last-child { border-bottom:none; }