/*
 * beginner-01（新手入门）模板的全站样式 —— 唯一的样式来源。
 *
 * 从旧项目 `templates/beginner/assets/beginner.css` 搬来，做了三处适配：
 *   ① 令牌名换成本仓的 12 个保留角色（`--fg` → `--text`、`--muted` → `--text-dim`、
 *      `--border` → `--line`）；
 *   ② 主题取**旧项目那套深色基座**（`preview.png` 的设计稿就是深底 ＋ 品牌金 `#F0B90B`）；
 *      ⚠️ `src/schema.json` 里写的 `themeBase: light` 与设计稿**对不上** —— 以设计稿为准
 *      （2026-10-17 用户指出“配色跟原模版完全不一样”，见 DESIGN.md §7.1）；
 *   ③ 选择器跟着新模板的 class 改名（`.hdr` → `.site-head`、`.dl-*` → `.download-*`）。
 *
 * 🔴 颜色字面量**只许住在这里和 tokens.json**（页面里写死颜色会被上传校验 A8 报出来）。
 * 🔴 本文件里每一个 `var(--…)` 都必须在 tokens.json 里声明过（校验 C5 会查）。
 */

/* === 令牌（与 tokens.json 逐字一致） === */
:root {
  --bg: #0b0e11;
  --text: #eaecef;
  --text-dim: #848e9c;
  --accent: #f0b90b;
  --line: #2b3139;
  --space: 16px;
  --surface: #1e2329;
  --font-body: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-head: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  --text-size: 16px;
  --head-size: 32px;
  --radius: 8px;
}

/* === 12 个保留角色各自的同名 class（内容作者可用的词汇表，校验 C10） === */
.bg { background: var(--bg) }
.text { color: var(--text) }
.text-dim { color: var(--text-dim) }
.accent { color: var(--accent) }
.line { border-color: var(--line) }
.space { padding: var(--space) }
.surface { background: var(--surface) }
.font-body { font-family: var(--font-body) }
.font-head { font-family: var(--font-head) }
.text-size { font-size: var(--text-size) }
.head-size { font-size: var(--head-size) }
.radius { border-radius: var(--radius) }

/* === 基础排版 === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
html { -webkit-text-size-adjust: 100% }
body {
  font-family: var(--font-body);
  font-size: var(--text-size);
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit }
img, svg { display: block; max-width: 100% }
ul, ol { list-style: none }
.mono { font-family: "SFMono-Regular", "SF Mono", Consolas, Menlo, monospace; font-variant-numeric: tabular-nums }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }

/* === 按钮 === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 22px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
  gap: 8px;
  transition: background .15s, color .15s, border-color .15s;
}
.btn-primary { background: var(--accent); color: #0b0e11 }
.btn-primary:hover { background: #f8d12f }
.btn-ghost { border: 1px solid var(--line); color: var(--text-dim) }
.btn-ghost:hover { color: var(--text); border-color: var(--text-dim) }
.btn-lg { height: 48px; padding: 0 26px; font-size: 16px }

/* === 页头（_shared/header.html） === */
.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
  /* 🔴 移动端左右各 16px（24px 在 375 宽上会让"品牌 + 操作"更早挤爆）；桌面恢复 24px */
  padding: 0 16px;
  background: rgba(11, 14, 17, .92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.brand-group { display: flex; align-items: center; min-width: 0 }
/* 🔴 品牌区**不许被压缩**：它是识别物，压到 0 宽时 SVG 会按固有比例溢出（实测 375 宽下
   整页横向多出 51px）。⇒ 三样都 `flex: 0 0 auto`，让页头去挤别的东西。 */
.brand-group, .brand, .brand-logo { flex: 0 0 auto }
/* 品牌区是一个整体：站名 ＋ 细分隔线 ＋ 官方图形。
   🔴 站名用 `--accent` —— 与官方图形那抹金同一族，避免"白站名 + 金 logo"两种主色打架；
   🔴 三样在同一个 `<a href="/">` 里 ⇒ 整块可点、`aria-label` 说明是回首页。 */
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; color: var(--text) }
.brand-name { color: var(--accent); letter-spacing: .02em; white-space: nowrap }
.brand-divider { width: 1px; height: 18px; background: var(--line); flex: 0 0 auto }
.brand-logo { display: inline-flex; align-items: center }
/* 🔴 官方图形的尺寸由渲染器写在**内联 style** 上（`height:1.75em` / `1.25em`）——
   普通规则压不过它，必须 `!important`；收到 26px / 18px 与 17px 的站名同一视觉高度。 */
.brand-logo .wm-icon { height: 26px !important }
.brand-logo .wm-word { height: 18px !important }
.brand-logo img, .brand-logo svg { max-width: none }
/* 占位文本（没有官方图形时的兜底）也不许把品牌区挤成竖排 */
.official-logo { font-size: 12px; color: var(--text-dim); white-space: nowrap }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 24px }
.site-nav { display: none; gap: 22px }
.site-nav a { font-size: 15px; color: var(--text-dim) }
.site-nav a:hover { color: var(--text) }
.site-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto }
/* 🔴 **移动端页头只留必要的**（旧项目同一条口径：`.actions .btn-g,.btn-p:not(.actions-sm){display:none}`）：
   <480 ⇒ 只有菜单按钮；480–959 ⇒ 登录 ＋ 紧凑注册 ＋ 菜单；≥960 ⇒ 全部 ＋ 桌面导航。
   ⚠️ 这些按钮在移动菜单里都有对应入口，⛔ 不是"藏起来就没了"。 */
.site-actions .action-login,
.site-actions .action-register,
.site-actions .action-download { display: none }
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  color: var(--text-dim);
}
.menu-toggle:hover { color: var(--text) }
@media (min-width: 480px) {
  .site-actions .action-login,
  .site-actions .action-register { display: inline-flex }
}
/* 🔴 **紧凑档只在 480–959 生效**（原先那条没有上界 ⇒ 桌面宽度下注册仍是 36px，
   与旁边两个 44px 的按钮并排时高矮不齐）。这一档里**登录与注册一起缩**，
   否则同一排里仍会一个 44、一个 36。 */
@media (min-width: 480px) and (max-width: 959px) {
  .site-actions .action-login,
  .site-actions .action-register { height: 36px; padding: 0 14px; font-size: 13px }
}
@media (min-width: 960px) {
  .site-head { padding: 0 24px }
  .site-nav { display: flex }
  .site-actions .action-download { display: inline-flex }
  .menu-toggle { display: none }
}

/* === 移动菜单（与页头同源：beginner.js 用 #mobileMenu / #menuOpen / #menuClose） === */
/* 🔴 **关着的时候用 `display: none`**（不靠 `translateX(100%)`）：
   一个移出屏幕的 fixed 面板**仍然算进文档的滚动宽度**（实测 375 宽下整页多出 360px），
   于是手机上会出现一条莫名其妙的横向滚动条。⇒ 关 = 不参与布局；开 = flex。 */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  flex-direction: column;
  gap: 8px;
  padding: 24px 16px;
  background: var(--bg);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-menu.open { display: flex }
.mobile-menu-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px }
.mobile-menu-title { font-family: var(--font-head); font-size: 18px; font-weight: 700 }
.mobile-nav { display: flex; flex-direction: column; gap: 4px; margin-bottom: auto }
.mobile-nav a { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 17px }
.mobile-auth { display: flex; gap: 10px; margin-top: 16px }
.mobile-auth .btn { flex: 1 1 0 }
.mobile-cta { margin-top: 12px }
body.mm-open { overflow: hidden }

/* === 首页 === */
.hero {
  max-width: 1040px;
  margin: 0 auto;
  padding: 72px 24px 56px;
  text-align: center;
}
.hero h1 { font-family: var(--font-head); line-height: 1.25 }
.hero p { margin: 18px auto 28px; max-width: 40em }
.section { max-width: 1040px; margin: 0 auto; padding: 40px 24px }
.section h2 { font-family: var(--font-head); margin-bottom: 18px }
.section h2 + p { margin: -8px 0 22px }
.app-band { max-width: 1040px; margin: 24px auto 0; padding: 40px 24px 56px; text-align: center }
.app-band h2 { font-family: var(--font-head); margin-bottom: 12px }
.app-band p { margin: 0 auto 22px; max-width: 40em }

/* === 卡片列表（_shared/card.html） === */
.cards { display: grid; grid-template-columns: 1fr; gap: var(--space) }
@media (min-width: 720px) { .cards { grid-template-columns: repeat(2, 1fr) } }
@media (min-width: 1024px) { .cards { grid-template-columns: repeat(3, 1fr) } }
.card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.card-title { font-family: var(--font-head); font-size: 18px }
.card-tag { align-self: flex-start; padding: 2px 10px; border-radius: 999px; background: #e8f5ec; color: var(--accent); font-size: 12px }
.card-link { margin-top: auto; color: var(--accent); font-weight: 600 }

/* === 步骤列表（_shared/step.html） === */
.steps { display: flex; flex-direction: column; gap: 14px }
.step { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line) }
.step-num { flex: 0 0 auto; min-width: 36px; height: 36px; padding: 0 10px; display: grid; place-items: center; border-radius: 999px; background: var(--surface); color: var(--accent); font-weight: 700; white-space: nowrap }
.step-title { font-family: var(--font-head); font-size: 16px; margin-bottom: 2px }

/* === 术语表（_shared/term.html） === */
.terms { display: flex; flex-direction: column; gap: 14px }
.term { padding: 14px 0; border-bottom: 1px solid var(--line) }
.term-name { font-family: var(--font-head); font-weight: 700; margin-bottom: 4px }
.term-def { font-size: 15px }
.term-level { display: inline-block; margin-left: 8px; font-size: 12px; color: var(--accent) }

/* === 问答（_shared/faq.html） === */
.faq { display: flex; flex-direction: column; gap: 10px }
.faq-item { padding: 14px 16px; background: var(--surface); border-radius: var(--radius) }
.faq-q { font-family: var(--font-head); font-weight: 600 }
.faq-a { margin-top: 8px; font-size: 15px }

/* === 任务清单（_shared/task.html） === */
.tasks { display: flex; flex-direction: column; gap: 12px }
.task { display: flex; align-items: flex-start; gap: 12px; padding: 16px; background: var(--surface); border-radius: var(--radius) }
.task-dot { flex: 0 0 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: #0b0e11; font-size: 13px }
.task-body { flex: 1 }
.task-title { font-family: var(--font-head); font-size: 16px; margin-bottom: 2px }
.task-reward { font-size: 13px; font-weight: 600 }

/* === 内容页的公共版式 === */
.page { max-width: 880px; margin: 0 auto; padding: 48px 24px 24px }
.page h1 { font-family: var(--font-head); line-height: 1.3; margin-bottom: 12px }
.page > p { margin-bottom: 22px }
.prose > h2 { font-family: var(--font-head); margin: 34px 0 14px }
.about-body { margin: 8px 0 28px }
.article { max-width: 760px; margin: 0 auto }
.article-body { margin: 8px 0 26px }
.page-cta { margin: 36px 0 8px; text-align: center }

/* === 下载页 === */
.download-page { min-height: 60vh; display: grid; place-items: center; padding: 64px 24px }
.download-card { width: 100%; max-width: 520px; padding: 40px 28px; text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: 16px }
.download-card h1 { font-family: var(--font-head); margin-bottom: 12px }
.download-card > p { margin-bottom: 8px }
.download-actions { display: flex; flex-direction: column; gap: 12px; margin: 26px 0 16px }
.download-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 20px;
  border-radius: var(--radius);
  background: var(--accent);
  color: #0b0e11;
  font-weight: 700;
}
.download-btn:hover { background: #f8d12f }
.download-btn-alt { background: #e8a600; color: #1a1300 }
.download-btn-alt:hover { background: #f0b300 }
.download-note { font-size: 13px; margin-top: 10px }

/* === 页脚（_shared/footer.html） === */
.site-foot { margin-top: 64px; border-top: 1px solid var(--line); background: var(--surface) }
.site-foot-inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 40px 24px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
.site-foot-brand { font-weight: 700; font-size: 17px }
.site-foot-title { font-family: var(--font-head); font-size: 14px; margin-bottom: 10px }
.site-foot-links { display: flex; flex-direction: column; gap: 8px; font-size: 14px }
.site-foot-links a { color: var(--text-dim) }
.site-foot-links a:hover { color: var(--text) }
.site-foot-note { font-size: 12px; grid-column: 1 / -1; padding-top: 16px; border-top: 1px solid var(--line) }
@media (min-width: 720px) {
  .site-foot-inner { grid-template-columns: 2fr 1fr }
}

/* ============================================================
 * S11a：把旧站首页与子页的区块样式补齐
 *
 * 来路：旧项目 `templates/beginner/assets/beginner.css`（深色基座那一套）。
 * 🔴 颜色字面量只许住在这里与 tokens.json；页面里写颜色会被上传校验 A8 报出来。
 * ============================================================ */

/* === 通用容器与区块标题 === */
.container { max-width: 1120px; margin: 0 auto; padding: 0 24px }
.sh { margin-bottom: 32px; max-width: 620px }
.sh h2 { margin-bottom: 10px }
.sh p { font-size: 15px; color: var(--text-dim) }
.eb {
  display: inline-block;
  font-size: 12px;
  font-weight: 510;
  color: var(--accent);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px 14px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  margin-bottom: 18px;
}
.hero-p { font-size: 16px; line-height: 1.75; color: var(--text-dim); max-width: 56ch; margin: 0 auto 28px }
.hero-home { padding: 72px 24px 48px }
.hero-home h1 { max-width: 22ch; margin: 0 auto 18px }
.hero-sub { padding: 56px 24px 32px }
.hero-sub h1 { max-width: 24ch; margin: 0 auto 14px }

/* === 首页学习路径（竖排时间线 + 完成态） === */
.path { position: relative; display: flex; flex-direction: column }
.path::before { content: ''; position: absolute; left: 24px; top: 24px; bottom: 24px; width: 2px; background: var(--line) }
.path-step { display: flex; gap: 20px; padding: 18px 0; position: relative }
.path-dot {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--accent);
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 14px;
  color: var(--accent);
  position: relative;
  z-index: 1;
}
.path-step.done .path-dot { background: var(--accent); color: var(--bg) }
.path-content { flex: 1; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px }
.path-step.done .path-content { border-color: var(--accent) }
.path-content h3 { font-size: 16px; font-weight: 600; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
.path-tag {
  font-size: 11px;
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--text-dim);
  letter-spacing: .04em;
}
.path-step.done .path-tag { border-color: var(--accent); color: var(--accent) }
.path-content p { font-size: 13px; line-height: 1.6; margin-bottom: 10px }
.path-link { font-size: 13px; color: var(--accent); font-weight: 600 }

/* === 首页课程卡（课程名 + 讲师 + 学习人数） === */
.courses { display: grid; gap: 16px; grid-template-columns: 1fr }
@media (min-width: 640px) { .courses { grid-template-columns: repeat(2, 1fr) } }
@media (min-width: 1024px) { .courses { grid-template-columns: repeat(4, 1fr) } }
.course {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .15s, transform .15s;
}
.course:hover { border-color: var(--accent); transform: translateY(-2px) }
.course-cover {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--surface), var(--bg));
  position: relative;
  border-bottom: 1px solid var(--line);
}
.course-cover-tag,
.course-cover-kind {
  position: absolute;
  font-size: 10px;
  padding: 3px 8px;
  background: var(--bg);
  border-radius: 4px;
  letter-spacing: .04em;
}
/* 封面正中的课程图形：跟着主题金走、压在渐变底上。
   ⚠️ 它只是装饰（`aria-hidden`），⛔ 不要放进可读文本里。 */
.course-icon { position: absolute; inset: 0; display: grid; place-items: center; color: var(--accent); opacity: .55; transition: opacity .15s }
.course-icon svg { width: 56px; height: 56px }
.course:hover .course-icon { opacity: .85 }
.course-cover-tag { top: 12px; left: 12px; border: 1px solid var(--accent); color: var(--accent); text-transform: uppercase }
.course-cover-kind { bottom: 12px; right: 12px; border: 1px solid var(--line); color: var(--text-dim) }
.course-body { padding: 16px; flex: 1; display: flex; flex-direction: column }
.course-body h3 { font-size: 15px; font-weight: 600; line-height: 1.4 }
.course-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-dim); margin-top: auto; padding-top: 12px }
.course-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-dim) }

/* === 首页术语角 === */
.glossary { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden }
.glossary .term { padding: 18px 22px; background: var(--surface) }
@media (min-width: 768px) {
  .glossary .term { display: grid; grid-template-columns: 200px 1fr 120px; gap: 24px; align-items: center }
}
.glossary .term-name { color: var(--accent); font-weight: 600 }
.glossary .term-def { font-size: 13px; line-height: 1.6 }
.glossary .term-level { margin-left: 0; color: var(--text-dim); text-transform: uppercase; font-size: 11px }

/* === 首页模拟交易区 === */
.sim {
  padding: 40px;
  background: linear-gradient(180deg, var(--surface), var(--bg));
  border: 1px solid var(--line);
  border-radius: 16px;
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 960px) { .sim { grid-template-columns: 1.1fr .9fr; gap: 56px } }
.sim h2 { margin-bottom: 12px }
.sim > div > p { font-size: 15px; color: var(--text-dim); margin-bottom: 24px }
.sim-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px }
.sim-item { display: flex; align-items: flex-start; gap: 12px; font-size: 13px; color: var(--text-dim) }
.sim-check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(2, 192, 118, .12);
  color: #02c076;
  display: grid;
  place-items: center;
  margin-top: 1px;
}
.sim-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px }
.sim-card-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px }
.sim-card-h b { font-size: 14px; font-weight: 600 }
.sim-tag { font-size: 10px; padding: 3px 8px; background: rgba(2, 192, 118, .12); color: #02c076; border-radius: 4px; letter-spacing: .04em }
.sim-bal { font-size: 28px; font-weight: 500; margin-bottom: 4px }
.sim-bal-sub { font-size: 13px; color: #02c076; display: flex; align-items: center; gap: 6px }
/* 那颗小圆点表示「示例数据在动」——纯装饰，⛔ 不进可读文本（`aria-hidden`）。 */
.sim-live {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 0 rgba(2, 192, 118, .45);
  animation: sim-pulse 2.4s ease-out infinite;
}
@keyframes sim-pulse {
  0% { box-shadow: 0 0 0 0 rgba(2, 192, 118, .45) }
  70% { box-shadow: 0 0 0 8px rgba(2, 192, 118, 0) }
  100% { box-shadow: 0 0 0 0 rgba(2, 192, 118, 0) }
}
@media (prefers-reduced-motion: reduce) { .sim-live { animation: none } }
/* 🔴 示例行情线：一张**画出来的**走势（不是真数据）——它要看起来像行情，
   却**不能**被读成"这个站在报实时价格"（整块 `aria-hidden`，且内容里写明「模拟」）。
   ⚠️ 网格 / 面积 / 折线全部靠 CSS class 取色，页面里一个字面量颜色都没有（`A8`）。 */
.sim-chart { margin-top: 20px; height: 80px; color: #02c076; position: relative }
.sim-chart svg { width: 100%; height: 100%; display: block }
.sim-grid path { fill: none; stroke: var(--line); stroke-width: 1; opacity: .55; vector-effect: non-scaling-stroke }
.sim-area { fill: currentColor; opacity: .12; stroke: none }
.sim-line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke }
.sim-point { fill: currentColor; stroke: var(--surface); stroke-width: 1.5; vector-effect: non-scaling-stroke }
.sim-times { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-dim); margin-top: 8px }
.sim-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 20px }
.sim-action { padding: 10px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); font-size: 12px; font-weight: 600 }
.sim-action.buy { background: #02c076; border-color: #02c076; color: var(--bg) }

/* === 首页下载区（应用商店按钮 + 二维码卡） === */
.app-band { padding: 56px 0; border-top: 1px solid var(--line) }
.app-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 40px;
  display: grid;
  gap: 36px;
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 1024px) { .app-card { grid-template-columns: 1.1fr .9fr; gap: 56px } }
.app-band h2 { margin-bottom: 14px }
.app-card > div > p { font-size: 15px; color: var(--text-dim); max-width: 42ch; line-height: 1.6; margin-bottom: 28px }
.store-row { display: flex; flex-wrap: wrap; gap: 12px }
.store-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 52px;
  padding: 0 20px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  transition: border-color .15s, background .15s;
  min-width: 172px;
}
.store-btn:hover { border-color: var(--accent); background: var(--surface) }
.store-btn svg { width: 24px; height: 24px; flex-shrink: 0 }
.store-btn small { display: block; font-size: 11px; color: var(--text-dim); line-height: 1; margin-bottom: 2px }
.store-btn strong { display: block; font-size: 14px; font-weight: 600; line-height: 1.3 }
.qr-card {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 20px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  max-width: 420px;
  margin-inline: auto;
}
.qr-svg { width: 108px; height: 108px; flex-shrink: 0; background: #ffffff; border-radius: 8px; padding: 8px }
.qr-info { flex: 1; min-width: 0 }
.qr-info h4 { font-size: 15px; font-weight: 600; margin-bottom: 4px }
.qr-info p { font-size: 13px; color: var(--text-dim); line-height: 1.55; margin: 0 }
/* 🔴 **二维码是给电脑上扫码用的**（2026-10-18 用户点名）：手机上显示它没有意义 ——
   用户就在手机上，不可能扫自己屏幕上的码。窄屏直接隐藏，把版面让给商店按钮。 */
@media (max-width: 767px) { .qr-card { display: none } }

/* === 子页公共版式 === */
.page { max-width: 1120px; margin: 0 auto; padding-bottom: 24px }
.page > .prose > section { margin-bottom: 0 }
.sub { font-size: 13px; color: var(--text-dim); margin-bottom: 20px }

/* === 学院：阶段时间线 + 课程卡 + FAQ === */
.tline { padding: 48px 0; border-top: 1px solid var(--line) }
.tline-rail { position: relative; max-width: 880px; margin: 0 auto; padding-left: 40px }
.tline-rail::before { content: ''; position: absolute; left: 15px; top: 8px; bottom: 8px; width: 2px; background: var(--line) }
.tline-stage { position: relative; padding: 0 0 40px }
.tline-stage:last-child { padding-bottom: 0 }
.tline-node {
  position: absolute;
  left: -40px;
  top: 2px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--accent);
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 13px;
  color: var(--accent);
}
.tline-stage h2 { font-size: 24px; font-weight: 600; margin-bottom: 6px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap }
.tline-eta { font-size: 11px; padding: 3px 10px; border-radius: 999px; background: rgba(2, 192, 118, .12); color: #02c076; letter-spacing: .04em }
.tline-stage > .sub { font-size: 13px; color: var(--text-dim); margin-bottom: 18px; max-width: 56ch }
.tline-lessons { display: grid; gap: 12px; grid-template-columns: 1fr }
@media (min-width: 768px) { .tline-lessons { grid-template-columns: repeat(2, 1fr) } }
.tline-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; transition: border-color .15s }
.tline-card:hover { border-color: var(--accent) }
.tline-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px }
/* 这一课的小图形（`aria-hidden`，装饰用）；`margin-right:auto` 把时长顶到最右。 */
.tline-icon { display: inline-flex; color: var(--accent) }
.tline-icon svg { width: 18px; height: 18px }
.tline-fmt { margin-right: auto }
.tline-min { font-size: 12px; color: var(--text-dim) }
.tline-fmt { font-size: 11px; padding: 2px 8px; border: 1px solid var(--line); border-radius: 4px; color: var(--text-dim) }
.tline-card h3 { font-size: 15px; font-weight: 600; margin-bottom: 6px; line-height: 1.4 }
.tline-card p { font-size: 13px; color: var(--text-dim); line-height: 1.7 }
.tline-check { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px }
.tline-check span { font-size: 11px; color: #02c076; background: rgba(2, 192, 118, .12); padding: 3px 9px; border-radius: 999px }
.tline-faq { padding: 48px 0; border-top: 1px solid var(--line) }
.tline-faq h2 { margin-bottom: 8px }
.tline-faq details { max-width: 820px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 10px; overflow: hidden }
.tline-faq summary { cursor: pointer; padding: 16px 20px; font-size: 15px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 12px }
.tline-faq summary::after { content: '+'; color: var(--accent); font-size: 18px }
.tline-faq details[open] summary::after { content: '−' }
.tline-faq .faq-a { padding: 0 20px 18px; font-size: 14px; line-height: 1.75 }

/* === 术语表：分类锚点 + 定义列表 + 速查表 + 问答 === */
.termbook-anchors {
  position: sticky;
  top: 64px;
  z-index: 40;
  padding: 12px 24px;
  background: rgba(11, 14, 17, .92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.termbook-anchors-in { display: flex; gap: 10px; flex-wrap: wrap; max-width: 1120px; margin: 0 auto }
.termbook-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  color: var(--text-dim);
}
.termbook-chip:hover { color: var(--accent); border-color: var(--accent) }
.termbook-chip .mono { font-size: 11px; color: var(--text-dim) }
.termbook-cat { padding: 44px 0 0 }
.termbook-cat h2 { font-size: 24px; font-weight: 600; margin-bottom: 6px; display: flex; align-items: baseline; gap: 10px }
.termbook-cat h2 .mono { font-size: 12px; color: var(--text-dim); font-weight: 400 }
.termbook-cat > .container > .sub { font-size: 13px; color: var(--text-dim); margin-bottom: 18px }
.termbook-dl { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden }
.termbook-dl > div { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 18px 22px; background: var(--surface) }
@media (min-width: 768px) { .termbook-dl > div { grid-template-columns: 220px 1fr; gap: 24px; align-items: start } }
.termbook-dl dt { color: var(--accent); font-weight: 600 }
.termbook-dl dt small { display: block; font-size: 11px; color: var(--text-dim); margin-top: 3px; letter-spacing: .03em }
.termbook-dl dd { font-size: 13px; line-height: 1.7 }
.termbook-table-sec { padding: 48px 0 }
.termbook-table-sec h2 { margin-bottom: 8px }
.termbook-scroll { border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; background: var(--surface) }
.termbook-scroll table { width: 100%; border-collapse: collapse; min-width: 600px }
.termbook-scroll th,
.termbook-scroll td { padding: 13px 18px; text-align: left; font-size: 13px; border-bottom: 1px solid var(--line) }
.termbook-scroll th { font-size: 12px; color: var(--text-dim); font-weight: 600; background: var(--bg) }
.termbook-scroll td:first-child { color: var(--accent); white-space: nowrap }
.termbook-scroll td:last-child { color: var(--text-dim) }
.termbook-lvl { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: rgba(2, 192, 118, .12); color: #02c076; white-space: nowrap }
.termbook-qa { padding: 44px 0; border-top: 1px solid var(--line) }
.termbook-qa h2 { margin-bottom: 18px }
.termbook-qa-item { max-width: 760px; padding: 18px 0; border-top: 1px solid var(--line) }
.termbook-qa-item h3 { font-size: 15px; font-weight: 600; margin-bottom: 8px }
.termbook-qa-item p { font-size: 14px; line-height: 1.75 }

/* === 帮助中心：左目录 + 右正文 + FAQ + 分步 === */
.docflow { padding: 44px 0; border-top: 1px solid var(--line) }
.docflow-grid { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start }
@media (min-width: 960px) { .docflow-grid { grid-template-columns: 240px 1fr; gap: 48px } }
.docflow-toc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px }
@media (min-width: 960px) { .docflow-toc { position: sticky; top: 88px } }
.docflow-toc h2 { font-size: 13px; font-weight: 600; color: var(--text-dim); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 12px }
.docflow-toc a { display: block; padding: 9px 12px; border-radius: var(--radius); font-size: 13px; color: var(--text-dim) }
.docflow-toc a:hover { background: var(--bg); color: var(--accent) }
.docflow-body > section { margin-bottom: 32px; scroll-margin-top: 88px }
.docflow-body h3 { font-size: 20px; font-weight: 600; margin-bottom: 6px }
.docflow-body p { font-size: 14px; line-height: 1.75; max-width: 64ch }
.docflow-faq { padding: 44px 0; border-top: 1px solid var(--line) }
.docflow-faq h2 { margin-bottom: 8px }
.docflow-faq details { max-width: 820px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 10px; overflow: hidden }
.docflow-faq summary { cursor: pointer; padding: 16px 20px; font-size: 15px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 12px }
.docflow-faq summary::after { content: '+'; color: var(--accent); font-size: 18px }
.docflow-faq details[open] summary::after { content: '−' }
.docflow-faq .faq-a { padding: 0 20px 18px; font-size: 14px; line-height: 1.75 }
.docflow-steps-sec { padding: 44px 0; border-top: 1px solid var(--line) }

/* === 福利中心：任务清单 + 规则表 + 领取指引 + 问答 === */
.quest { padding: 44px 0; border-top: 1px solid var(--line) }
.quest h2 { margin-bottom: 18px }
.quest .tasks { max-width: 820px }
.quest-rules { padding: 44px 0 }
.quest-rules h2 { margin-bottom: 8px }
.quest-scroll { border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; background: var(--surface) }
.quest-scroll table { width: 100%; border-collapse: collapse; min-width: 620px }
.quest-scroll th,
.quest-scroll td { padding: 13px 18px; text-align: left; font-size: 13px; border-bottom: 1px solid var(--line); vertical-align: top }
.quest-scroll th { font-size: 12px; color: var(--text-dim); font-weight: 600; background: var(--bg) }
.quest-scroll td:first-child { color: var(--text); font-weight: 600; white-space: nowrap }
.quest-scroll td:last-child { color: var(--text-dim) }
.quest-claim { padding: 44px 0; border-top: 1px solid var(--line) }
.quest-claim h2 { margin-bottom: 20px }
.quest-qa { padding: 44px 0; border-top: 1px solid var(--line) }
.quest-qa h2 { margin-bottom: 8px }

/* === 关于页：对照表 + 资质表 + FAQ === */
.cards { padding: 8px 0 32px }
.compare-sec,
.credentials-sec,
.faq-sec { padding: 40px 0; border-top: 1px solid var(--line) }
.compare-sec h2,
.credentials-sec h2,
.faq-sec h2 { margin-bottom: 8px }
.compare-scroll { border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; background: var(--surface) }
.compare-scroll table { width: 100%; border-collapse: collapse; min-width: 600px }
.compare-scroll th,
.compare-scroll td { padding: 13px 18px; text-align: left; font-size: 13px; border-bottom: 1px solid var(--line); vertical-align: top }
.compare-scroll th { font-size: 12px; color: var(--text-dim); font-weight: 600; background: var(--bg) }
.compare-scroll td:first-child { color: var(--accent); font-weight: 600; white-space: nowrap }
/* 🔴 窄屏下表格不许把整页撑宽 ⇒ 外面套一层可横向滚动的框（与 `.compare-scroll` 同一条口径）。
   ⚠️ 框自己画边框，表格**不再画**（否则滚动时边框会跟着走、右边多一条）。 */
.credentials-scroll { border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; background: var(--surface) }
.credentials-table { width: 100%; min-width: 560px; border-collapse: collapse; background: var(--surface); border: none; border-radius: 0 }
.credentials-table caption { padding: 12px 18px; text-align: left; font-size: 12px; color: var(--text-dim); border-bottom: 1px solid var(--line) }
.credentials-table td { padding: 13px 18px; font-size: 13px; border-bottom: 1px solid var(--line) }
.credentials-table td:first-child { color: var(--text); font-weight: 600 }
.credentials-table td:last-child { color: var(--text-dim) }
.faq-dl { display: flex; flex-direction: column; gap: 12px; max-width: 820px }
.faq-dl-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 20px }
.faq-dl-item dt { font-weight: 600; margin-bottom: 6px }
.faq-dl-item dd p { font-size: 14px; line-height: 1.75 }

/* === 子页转化带 === */
.cta { padding: 48px 0; border-top: 1px solid var(--line) }
.cta h2 { margin-bottom: 10px }
.cta > .container > p { font-size: 14px; color: var(--text-dim); margin-bottom: 24px; max-width: 46ch }
.cta-row { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap }
.cta-note { margin-top: 16px; font-size: 12px; color: var(--text-dim) }

/* === 文章页正文（learn-*） === */
.article { max-width: 820px; margin: 0 auto; padding: 0 24px }
.article-body { margin: 8px 0 26px }
.article-body h2 { font-size: 22px; font-weight: 600; margin: 28px 0 10px }
.article-body p { font-size: 15px; line-height: 1.8; color: var(--text-dim); margin-bottom: 14px }
.article > .steps { margin-bottom: 8px }

/* === 页脚：旧站三栏 + 子页导航 + 免责 === */
.site-foot-inner { grid-template-columns: 1fr; gap: 28px }
@media (min-width: 720px) { .site-foot-inner { grid-template-columns: 1.4fr 1fr 1fr 1fr } }
.site-foot-col { min-width: 0 }
.site-foot-subnav { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px 20px; flex-wrap: wrap; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px }
.site-foot-subnav-label { color: var(--text-dim); font-size: 11px; letter-spacing: .06em; text-transform: uppercase }
.site-foot-subnav a { color: var(--text-dim) }
.site-foot-subnav a:hover { color: var(--accent) }
.site-foot-legal { grid-column: 1 / -1; font-size: 12px; color: var(--text-dim) }

/* === 首页区段：改成整宽 + 内层 .container 居中（旧站版式） === */
.section { max-width: none; margin: 0; padding: 56px 0; border-top: 1px solid var(--line) }
.app-band { max-width: none; margin: 0; padding: 56px 0; text-align: left }

/* === 移动端收尾（≤639px） ===
 * 🔴 本项目的规矩：**窄屏不许出现横向滚动条**，且标题不许把一行拆成三四个字。
 *    这一块统一收窄内边距与标题字号；断点 640 与其余媒体查询保持同一套。
 * ⚠️ 改这里的数要同批在 375 / 768 两档真浏览器里看一眼（`DESIGN.md` §7.11）。
 */
@media (max-width: 639px) {
  .container { padding: 0 16px }
  .section, .app-band { padding: 44px 0 }
  .hero-home { padding: 48px 16px 36px }
  .hero-sub { padding: 40px 16px 28px }
  .download-card { padding: 32px 20px }
  /* 标题：32px 在 375 宽上会把「成长任务清单」拆成三行 ⇒ 收到 24–28 */
  .head-size { font-size: clamp(24px, 7vw, 28px) }
  .hero-home h1, .hero-sub h1 { font-size: clamp(24px, 6.8vw, 32px) }
  .section h2, .app-band h2 { margin-bottom: 14px }
}

/* 🔴 表格横向滚动条的配色：默认那条浅色滚动条在深底上很扎眼（实测截图里是一条白杠）。 */
.termbook-scroll, .compare-scroll, .quest-scroll, .credentials-scroll { scrollbar-width: thin; scrollbar-color: var(--line) transparent }
.termbook-scroll::-webkit-scrollbar, .compare-scroll::-webkit-scrollbar, .quest-scroll::-webkit-scrollbar, .credentials-scroll::-webkit-scrollbar { height: 8px }
.termbook-scroll::-webkit-scrollbar-thumb, .compare-scroll::-webkit-scrollbar-thumb, .quest-scroll::-webkit-scrollbar-thumb, .credentials-scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px }