/* =========================================================
 * 医学科研知识库 —— 全站样式（科研学术风格）
 * 视觉语言：衬线标题 + 等宽数字 + 细线分隔 + 网格抬头 + 编号章节
 * 浅色 / 深色两套主题，全部由 CSS 变量驱动
 * ========================================================= */

:root {
  /* color-scheme 有两个作用（L-11）：
     ① 让 light-dark() 能按主题取色 —— 方向主色的「可读版本」--lay-ink 就是靠它，
        这样同一个内联值在两套主题下各自成立，主题切换不需要重渲染；
     ② 顺带把浏览器自带的控件（滚动条、下拉框、日期选择器）也切到对应配色，
        否则深色主题下滚动条还是白的。 */
  color-scheme: light;
  /* 版面 */
  --bg: #f4f6f9;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --surface-3: #f1f4f8;
  --border: #e3e8ef;
  --border-strong: #cdd6e1;
  --text: #14202e;
  --text-2: #526072;
  /* --text-3 是「第三层次要说明文字」。原来 #8d97a6 在 #ffffff 上只有 2.95:1、
     在 #f1f4f8 上 2.68:1 —— 远低于 WCAG AA 的 4.5:1，浅色下等于「灰得看不清」。
     改成 #67707d 后：在 #f1f4f8 上 4.54、#f8fafc 上 4.79、#ffffff 上 5.01，
     三档全过；与 --text-2(#526072) 仍差一档，层次没丢。
     判据与复算：`.workbuddy-ai/tools/audit-a11y.mjs`（改这个值必须重跑它）。 */
  --text-3: #67707d;

  /* 主色：学术靛蓝 / 辅助色：青 + 金 */
  --primary: #17497f;
  --primary-soft: #e9f0f9;
  --accent: #0f766e;
  --accent-soft: #e6f4f2;
  --gold: #a16207;

  --ok: #047857;
  --ok-soft: #e6f5ef;
  --warn: #b45309;
  --warn-soft: #fdf3e3;
  --bad: #b91c1c;
  --bad-soft: #fdecec;

  /* 「写在彩色底上的字」用哪个颜色（方案 L-11 无障碍）。
     浅色主题里 --primary/--accent/--ok 都是深色，白字对比度 9.15 / 5.47 / 5.48 ✅；
     深色主题里它们反过来变成亮色（#7aa9f0 / #5eead4 / #34d399），白字掉到
     2.40 / 1.48 / 1.92 —— 尤其青底白字几乎看不见。所以这三个色不能写死 #fff，
     必须跟着主题走。实测（audit-a11y.mjs）：深色下用 #0f141b 是 7.71 / 12.49 / 9.61。 */
  --on-primary: #ffffff;
  --on-accent: #ffffff;
  --on-ok: #ffffff;

  /* 文献 / 引文紫：经典文献卡与文献库页专用（与主蓝、辅助青区分开） */
  --paper: #7c3aed;
  --paper-deep: #5b21b6;
  --paper-soft: #ede9fe;

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow: 0 2px 8px rgba(16, 24, 40, .07);
  --shadow-lg: 0 12px 30px -12px rgba(16, 24, 40, .22);

  --radius: 12px;
  --radius-lg: 16px;
  --sidebar-w: 280px;
  --topbar-h: 60px;
  --wrap-max: 1360px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif;
  --serif: Georgia, "Times New Roman", "Source Han Serif SC", "Noto Serif SC", "Songti SC", STSong, SimSun, serif;
  --mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Courier New", monospace;

  /* ---------- 阅读排版 token（全站唯一体系，改这里即全站生效） ----------
     为什么要有这一层：正文写在 JS 字符串里，作者多、改动多，
     把字号/行高/行宽收成变量才能保证 220 个主题页读起来是同一个人排的。
     行宽是其中最要命的一条 —— 超宽行是中文长文可读性的头号杀手。 */
  --fs-body: 15.5px;        /* 正文基准字号（三档见 body[data-fs]） */
  --lh-body: 1.78;          /* 正文行高 */
  --measure: 74ch;          /* 正文行宽上限（约 720–780px） */
  --fs-h2: 21px;            /* 小节标题（一、二、三…） */
  --fs-h3: 17px;            /* 子节标题（①②③…） */
  --fs-h4: 16px;
  --gap-p: .9em;            /* 段落间距 */
  --gap-li: .35em;          /* 列表项间距 */
  --fs-code: 12.5px;        /* 代码块字号 */

  /* 插图调色板（figures*.js 里所有 SVG 都从这里取色，深浅色自动切换）
     1 主蓝 · 2 红 · 3 绿 · 4 琥珀 · 5 紫 · 6 灰青 */
  --fig-1: #2563eb; --fig-2: #dc2626; --fig-3: #059669;
  --fig-4: #b45309; --fig-5: #7c3aed; --fig-6: #64748b;
  --fig-bg: #f8fafc; --fig-grid: #e2e8f0; --fig-axis: #94a3b8;
  --fig-dash: #cbd5e1; --fig-text: #334155; --fig-muted: #64748b;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f141b;
  --surface: #161d26;
  --surface-2: #1b232e;
  --surface-3: #202a36;
  --border: #2a3441;
  --border-strong: #3a4655;
  --text: #e7ecf2;
  --text-2: #a7b2c0;
  /* 原 #6d7987 在 #202a36 上只有 3.27:1。改成 #8593a6：4.65 / 5.07 / 5.43（三档底色）全过，
     仍在 --text-2(#a7b2c0) 之下，层次保留。 */
  --text-3: #8593a6;

  --primary: #7aa9f0;
  --primary-soft: #1a2740;
  --accent: #5eead4;
  --accent-soft: #12312d;
  --gold: #dcae5a;

  --ok: #34d399;
  --ok-soft: #14312a;
  --warn: #f5b04c;
  --warn-soft: #37281a;
  --bad: #fca5a5;
  --bad-soft: #3a1d1d;

  /* 深色下 --primary / --accent / --ok 是亮色，字必须反过来用深色（见 :root 里的说明） */
  --on-primary: #0f141b;
  --on-accent: #0f141b;
  --on-ok: #0f141b;

  /* 文献 / 引文紫：深色下提亮，保证在 #161d26 上对比度够 */
  --paper: #a78bfa;
  --paper-deep: #c4b5fd;
  --paper-soft: #2a2340;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow: 0 2px 10px rgba(0, 0, 0, .45);
  --shadow-lg: 0 14px 34px -14px rgba(0, 0, 0, .7);

  --fig-1: #60a5fa; --fig-2: #f87171; --fig-3: #34d399;
  --fig-4: #fbbf24; --fig-5: #a78bfa; --fig-6: #94a3b8;
  --fig-bg: #1e293b; --fig-grid: #334155; --fig-axis: #64748b;
  --fig-dash: #475569; --fig-text: #e2e8f0; --fig-muted: #94a3b8;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--primary-soft); }

/* 滚动条（科研工具感） */
.sidebar::-webkit-scrollbar, .search-panel::-webkit-scrollbar, .modal-box::-webkit-scrollbar { width: 9px; }
.sidebar::-webkit-scrollbar-thumb, .search-panel::-webkit-scrollbar-thumb, .modal-box::-webkit-scrollbar-thumb {
  background: var(--border-strong); border-radius: 6px; border: 2px solid transparent; background-clip: content-box;
}

/* ================= 顶栏 ================= */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 14px;
  padding: 0 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, var(--primary), var(--accent) 60%, transparent);
  opacity: .55;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 16.5px; color: var(--text);
  white-space: nowrap; letter-spacing: .01em;
}
.brand:hover { text-decoration: none; }
.brand .logo {
  width: 34px; height: 34px; border-radius: 9px;
  background: linear-gradient(135deg, #17497f, #0f766e);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 18px; box-shadow: var(--shadow-sm);
}
.search-wrap { position: relative; flex: 1; max-width: 460px; }
.search-wrap .icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--text-3); font-size: 14px; pointer-events: none;
}
#searchInput {
  width: 100%; height: 38px;
  padding: 0 70px 0 34px;
  border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface-2); color: var(--text);
  font-size: 14px; font-family: inherit;
  outline: none; transition: border-color .15s, box-shadow .15s, background .15s;
}
#searchInput:focus { border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 3px var(--primary-soft); }
.search-wrap .kbd {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-family: var(--mono); font-size: 11px; color: var(--text-3);
  border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px;
  background: var(--surface);
}
.search-panel {
  display: none;
  position: absolute; top: 46px; left: 0; right: 0;
  max-height: 420px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow-lg);
  padding: 6px;
}
.search-panel.open { display: block; }
.search-item { display: block; padding: 9px 12px; border-radius: 8px; }
.search-item:hover, .search-item.active { background: var(--surface-2); text-decoration: none; }
.search-item .t { font-weight: 600; font-size: 14px; color: var(--text); }
.search-item .t mark { background: var(--primary-soft); color: var(--primary); border-radius: 3px; padding: 0 1px; }
.search-item .p { font-size: 12px; color: var(--text-3); }
.search-empty { padding: 16px 12px; color: var(--text-3); font-size: 13px; text-align: center; }

/* =========================================================
 * 搜索面板的分组（L-13）
 *
 * 改造前搜索只覆盖「主题 + 板块」，结果是一列平铺；现在扩到 8 类内容
 * （问答 / 术语 / 排错 / 案例 / 文献 / 示例实验），平铺会变成一锅粥 ——
 * 所以按类别分组。**为什么不混排**：不同类别的分数不可比
 * （「术语名命中」和「正文命中」对读者的意义完全不同），
 * 强行排序会让人以为分数可比。组内才排序，组间只按固定顺序（越靠前越可能是想要的）。
 * ========================================================= */
.search-scope {
  padding: 8px 12px 10px; font-size: 11.5px; line-height: 1.7;
  color: var(--text-3); border-bottom: 1px solid var(--border); margin-bottom: 4px;
}
.search-scope b { color: var(--text-2); font-weight: 600; }

.search-group { padding: 2px 0 6px; }
.search-group + .search-group { border-top: 1px dashed var(--border); margin-top: 4px; padding-top: 8px; }
.search-group-h {
  display: flex; align-items: baseline; gap: 8px;
  padding: 4px 12px 6px; font-size: 11.5px; font-weight: 600; color: var(--text-3);
  letter-spacing: .04em;
}
.search-group-h .n {
  margin-left: auto; font-family: var(--mono); font-size: 11px; font-weight: 400;
  color: var(--text-3); opacity: .85;
}
.search-more { padding: 4px 12px 2px; font-size: 11.5px; color: var(--text-3); }


.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.icon-btn {
  width: 36px; height: 36px; border-radius: 9px;
  border: 1px solid var(--border); background: var(--surface-2);
  color: var(--text-2); font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  transition: .15s;
}
.icon-btn:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-soft); }
#menuBtn { display: none; }

/* ================= 侧边栏 ================= */
.sidebar {
  position: fixed; top: var(--topbar-h); left: 0; bottom: 0; z-index: 90;
  width: var(--sidebar-w);
  overflow-y: auto;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 14px 12px 40px;
}
.nav-label {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em;
  color: var(--text-3); text-transform: uppercase;
  padding: 4px 10px 10px; margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.nav-cat { margin-bottom: 3px; }
/* 侧栏顶部的「实战案例库」入口：横向任务索引，视觉上和下面的学科树分开 */
.nav-case-link {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 10px; margin-bottom: 12px; border-radius: 9px;
  background: var(--primary-soft); border: 1px solid var(--border);
  font-size: 14px; font-weight: 600; color: var(--primary);
  transition: background .15s, border-color .15s;
}
.nav-case-link:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.nav-case-link .ncl-ic { font-size: 15px; line-height: 1; flex: none; }
.nav-case-link .ncl-tx { flex: 1; }
.nav-case-link .n {
  font-family: var(--mono); font-size: 11px; color: var(--text-3);
  background: var(--surface); border-radius: 20px; padding: 1px 7px;
}
.nav-cat-btn {
  width: 100%; display: flex; align-items: center; gap: 9px;
  padding: 9px 10px; border: none; border-radius: 9px;
  background: transparent; color: var(--text);
  font-size: 14px; font-weight: 600; text-align: left;
  transition: background .15s;
}
.nav-cat-btn:hover { background: var(--surface-2); }
.nav-cat-btn .arrow { margin-left: auto; font-size: 11px; color: var(--text-3); transition: transform .18s; }
.nav-cat.open .nav-cat-btn { background: var(--primary-soft); color: var(--primary); }
.nav-cat.open .nav-cat-btn .arrow { transform: rotate(90deg); }
.nav-groups { display: none; padding-left: 12px; border-left: 1px solid var(--border); margin: 2px 0 8px 14px; }
.nav-cat.open .nav-groups { display: block; }
.nav-group { margin-top: 2px; }
.nav-group-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 6px 9px; border: none; border-radius: 7px;
  background: transparent; color: var(--text-2);
  font-size: 13px; text-align: left;
}
.nav-group-btn:hover { background: var(--surface-2); color: var(--text); }
.nav-group.open > .nav-group-btn { color: var(--primary); font-weight: 600; }
.nav-group-btn .n {
  font-family: var(--mono); font-size: 11px; color: var(--text-3); font-weight: 400;
  background: var(--surface-3); border-radius: 999px; padding: 0 6px; flex: 0 0 auto;
}
.nav-topics { display: none; padding: 3px 0 5px; }
.nav-group.open .nav-topics { display: block; }
.nav-topic {
  display: flex; align-items: flex-start; gap: 6px;
  padding: 5px 9px 5px 14px; border-radius: 7px;
  color: var(--text-2); font-size: 13px; line-height: 1.5;
}
.nav-topic:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.nav-topic.active { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.nav-topic .done { color: var(--ok); font-size: 11px; flex: 0 0 auto; margin-top: 3px; }
.sidebar-foot {
  margin-top: 20px; padding: 14px 12px 0; font-size: 12px; color: var(--text-3);
  border-top: 1px solid var(--border); line-height: 1.7;
}

/* ================= 主区域与容器 ================= */
.main {
  margin-left: var(--sidebar-w);
  padding: calc(var(--topbar-h) + 28px) 32px 80px;
}
.wrap { max-width: var(--wrap-max); margin: 0 auto; }
.wrap-narrow { max-width: 980px; margin: 0 auto; }

.crumb { font-size: 13px; color: var(--text-3); margin-bottom: 16px; }
.crumb a { color: var(--text-2); }
.crumb a:hover { color: var(--primary); }
.crumb .sep { margin: 0 6px; color: var(--text-3); }

/* 页内跳转落点：避免被固定顶栏遮住 */
.group-sec, #path, #resources { scroll-margin-top: calc(var(--topbar-h) + 16px); }
.nav-group-btn { cursor: pointer; }

/* ---- 章节标题（编号 + 衬线标题 + 细线） ---- */
.sec-head { display: flex; align-items: center; gap: 12px; margin: 40px 0 16px; }
.sec-num {
  font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: .1em;
  color: var(--primary); background: var(--primary-soft);
  border: 1px solid var(--border); border-radius: 5px; padding: 2px 8px;
}
.sec-title {
  font-family: var(--serif); font-size: 20px; font-weight: 700;
  letter-spacing: .02em; display: flex; align-items: center; gap: 8px;
}
.sec-rule { flex: 1; height: 1px; background: linear-gradient(90deg, var(--border-strong), transparent); }
.sec-note { font-size: 12.5px; color: var(--text-3); white-space: nowrap; }

/* ---- 抬头 HERO ---- */
.hero {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #0b2545 0%, #17497f 52%, #0f766e 100%);
  color: #fff; padding: 34px 36px 0;
  box-shadow: 0 20px 44px -26px rgba(11, 37, 69, .7);
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.055) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.055) 0 1px, transparent 1px 30px);
}
.hero::after {
  content: ""; position: absolute; width: 460px; height: 460px; right: -150px; top: -180px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(94,234,212,.30), rgba(94,234,212,0) 68%);
}
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 268px; gap: 34px; }
.hero-kicker {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .22em;
  text-transform: uppercase; color: rgba(255,255,255,.72);
  display: flex; align-items: center; gap: 9px; margin-bottom: 14px;
}
.hero-kicker::before { content: ""; width: 22px; height: 1px; background: rgba(255,255,255,.55); }
.hero h1 { font-family: var(--serif); font-size: 33px; letter-spacing: .04em; line-height: 1.25; margin-bottom: 8px; }
.hero-tagline { font-family: var(--serif); font-size: 15.5px; color: rgba(255,255,255,.9); margin-bottom: 10px; }
.hero p.hero-desc { max-width: 660px; opacity: .82; font-size: 14px; }
.hero-hi {
  margin-top: 16px; display: inline-block;
  font-size: 13.5px; padding: 4px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .26);
}
.hero-actions { margin-top: 22px; display: flex; gap: 10px; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 16px; border-radius: 9px;
  font-size: 13.5px; font-weight: 600; border: 1px solid transparent;
  transition: .15s;
}
.btn-primary { background: #fff; color: #0b2545; }
.btn-primary:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 10px 22px -10px rgba(0,0,0,.5); }
.btn-ghost { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.34); }
.btn-ghost:hover { text-decoration: none; background: rgba(255,255,255,.22); }

.hero-side { position: relative; border-left: 1px solid rgba(255,255,255,.20); padding-left: 26px; }
.hs-title {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.66); margin-bottom: 12px;
}
.hs-list { list-style: none; }
.hs-list li {
  display: flex; align-items: baseline; gap: 10px;
  padding: 8px 0; border-bottom: 1px dashed rgba(255,255,255,.16); font-size: 13.5px;
}
.hs-list li:last-child { border-bottom: none; }
.hs-num {
  font-family: var(--mono); font-size: 10.5px; color: #0b2545;
  background: rgba(255,255,255,.85); border-radius: 4px; padding: 1px 6px; font-weight: 700;
}
.hs-list b { font-weight: 600; }
.hs-list li > span:last-child { margin-left: auto; font-family: var(--mono); color: rgba(255,255,255,.78); }
.hs-foot {
  margin-top: 14px; font-size: 11.5px; line-height: 1.8; color: rgba(255,255,255,.62);
}

.stat-row {
  position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 30px; border-top: 1px solid rgba(255,255,255,.18);
}
.stat { padding: 15px 16px 19px; border-right: 1px solid rgba(255,255,255,.10); }
.stat:last-child { border-right: none; }
.stat b { font-family: var(--mono); font-size: 22px; font-weight: 700; display: block; line-height: 1.25; }
.stat span { font-size: 12px; opacity: .74; }

/* ---- 知识板块卡片 ---- */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 16px; }
.cat-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px 20px 18px; color: var(--text);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.cat-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--cat-color, var(--primary)); opacity: .9;
}
.cat-card:hover {
  text-decoration: none; transform: translateY(-3px);
  box-shadow: var(--shadow-lg); border-color: var(--cat-color, var(--primary));
}
.cc-head { display: flex; align-items: center; justify-content: space-between; }
.cc-icon {
  width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center; font-size: 20px;
  background: var(--surface-2); border: 1px solid var(--border);
}
.cc-idx { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--text-3); }
.cat-card h3 { font-family: var(--serif); font-size: 18px; margin: 12px 0 6px; letter-spacing: .01em; }
.cat-card > p { font-size: 13px; color: var(--text-2); }
.cc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
.cc-chip {
  font-size: 11.5px; color: var(--text-2); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px;
}
.cc-more { font-size: 11.5px; color: var(--text-3); align-self: center; }
.cc-meta {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  margin-top: auto; padding-top: 14px; font-size: 12px; color: var(--text-3);
}
.cc-meta .cc-learn { font-family: var(--mono); color: var(--text-2); }

.progress-track { height: 4px; border-radius: 2px; background: var(--surface-3); overflow: hidden; margin-top: 9px; }
.progress-fill { height: 100%; border-radius: 2px; background: var(--cat-color, var(--primary)); transition: width .3s; }

/* ---- 双栏（学习路线 + 右侧信息栏） ---- */
.cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 18px; align-items: start; }
.panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 20px 20px; margin-bottom: 16px;
}
.panel:last-child { margin-bottom: 0; }
.panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 14px; font-weight: 700; padding-bottom: 10px;
  border-bottom: 1px solid var(--border); margin-bottom: 14px;
}
.ph-tag { font-family: var(--mono); font-size: 11px; font-weight: 400; color: var(--text-3); }

/* 学习路线时间线 */
.timeline { list-style: none; position: relative; }
.tl-item { position: relative; display: flex; gap: 16px; padding: 0 0 18px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ""; position: absolute; left: 18px; top: 38px; bottom: 2px; width: 1px;
  background: linear-gradient(var(--border-strong), var(--border));
}
.tl-item:last-child::before { display: none; }
.tl-node {
  flex: 0 0 auto; width: 37px; height: 37px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 12.5px; font-weight: 700;
  background: var(--primary-soft); color: var(--primary);
  border: 1px solid var(--border);
  position: relative; z-index: 1;
}
.tl-body { min-width: 0; padding-top: 2px; }
.tl-body h4 { font-size: 15px; font-weight: 700; margin-bottom: 2px; }
.tl-body .d { font-size: 12.5px; color: var(--text-3); margin-bottom: 9px; }

.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  font-size: 12.5px; padding: 3px 11px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2);
  transition: .15s;
}
.chip:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; background: var(--primary-soft); }
.chip.done { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }

/* 右侧信息栏：进度环 */
.ring-row { display: flex; align-items: center; gap: 18px; }
.ring { width: 106px; height: 106px; flex: 0 0 auto; }
.ring circle { fill: none; stroke-width: 9; }
.ring .bg { stroke: var(--surface-3); }
.ring .fg { stroke: var(--primary); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dasharray .4s; }
.ring-num { font-family: var(--mono); font-size: 21px; font-weight: 700; fill: var(--text); }
.ring-sub { font-size: 10px; fill: var(--text-3); }
.ring-info { min-width: 0; }
.ring-info b { font-family: var(--mono); font-size: 22px; display: block; line-height: 1.3; }
.ring-info b span { font-size: 13px; color: var(--text-3); font-weight: 400; }
.ring-info > span { display: block; font-size: 12.5px; color: var(--text-3); }
.ring-info .ring-pct { color: var(--primary); font-family: var(--mono); margin-top: 4px; }

.cat-progress { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--border); }
.cp-item {
  display: grid; grid-template-columns: 74px minmax(0, 1fr) 48px;
  align-items: center; gap: 9px;
  font-size: 12.5px; color: var(--text-2); margin: 8px 0;
}
.cp-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-bar { height: 5px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.cp-bar i { display: block; height: 100%; border-radius: 3px; background: var(--cat-color, var(--primary)); }
.cp-num { text-align: right; font-family: var(--mono); font-size: 11px; color: var(--text-3); }

.tips { list-style: none; font-size: 13px; color: var(--text-2); }
.tips li { display: flex; gap: 9px; padding: 7px 0; border-bottom: 1px dashed var(--border); line-height: 1.6; }
.tips li:last-child { border-bottom: none; }
.tips li b { color: var(--text); font-weight: 600; flex: 0 0 auto; }
.tips .k {
  font-family: var(--mono); font-size: 11.5px; background: var(--surface-3);
  border: 1px solid var(--border); border-radius: 5px; padding: 0 6px; color: var(--text-2);
}
.tips code {
  font-family: var(--mono); font-size: 12px; background: var(--surface-3);
  border: 1px solid var(--border); border-radius: 4px; padding: 0 5px; color: var(--text-2);
}
.btn-soft {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2);
  height: 34px; padding: 0 14px; border-radius: 9px; font-size: 13px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px; justify-content: center;
}
.btn-soft:hover { border-color: var(--primary); color: var(--primary); }
.btn-soft.done { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }
.btn-soft.wide { width: 100%; margin-top: 14px; }

/* ---- 资源导航 ---- */
.res-group-head {
  display: flex; align-items: center; gap: 9px;
  margin: 22px 0 10px; font-size: 13px; font-weight: 700; color: var(--text-2);
}
.res-group-head:first-of-type { margin-top: 6px; }
.res-group-head .rg-line { flex: 1; height: 1px; background: var(--border); }
.res-group-head .rg-cnt { font-family: var(--mono); font-size: 11px; color: var(--text-3); font-weight: 400; }
.res-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 10px; }
.res-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 11px 14px; display: flex; flex-direction: column; gap: 1px;
  transition: .15s;
}
.res-card b { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 5px; }
.res-card b .out { color: var(--text-3); font-size: 11px; }
.res-card span { font-size: 12px; color: var(--text-3); line-height: 1.55; }
.res-card:hover { border-color: var(--primary); text-decoration: none; background: var(--primary-soft); }
.res-card:hover b .out { color: var(--primary); }

/* ---- 页脚 ---- */
.site-foot {
  margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--text-3);
}
.site-foot .mono { font-family: var(--mono); }

/* ---- 分类页页头 ---- */
.page-head {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 26px 28px; margin-bottom: 30px;
}
.page-head::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--cat-color, var(--primary));
}
/* 板块底纹：data-tone 决定图案，右侧渐隐，不遮挡文字 */
.page-head::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(115deg, transparent 40%, #000 100%);
  mask-image: linear-gradient(115deg, transparent 40%, #000 100%);
}
.page-head[data-tone="grid"]::after {
  background-image: linear-gradient(var(--gt-line) 1px, transparent 1px),
                    linear-gradient(90deg, var(--gt-line) 1px, transparent 1px);
  background-size: 26px 26px;
}
.page-head[data-tone="dots"]::after {
  background-image: radial-gradient(var(--gt-line) 1.5px, transparent 1.5px);
  background-size: 18px 18px;
}
.page-head[data-tone="lines"]::after {
  background-image: repeating-linear-gradient(180deg, var(--gt-line) 0 1px, transparent 1px 13px);
}
.page-head[data-tone="waves"]::after {
  background-image: repeating-radial-gradient(circle at 100% 0, transparent 0 20px, var(--gt-line) 20px 21px);
}
.page-head[data-tone="arc"]::after {
  background-image: repeating-radial-gradient(circle at 100% 100%, transparent 0 24px, var(--gt-line) 24px 25px);
}
.ph-top { position: relative; display: flex; align-items: center; gap: 16px; }
.ph-icon {
  width: 54px; height: 54px; border-radius: 14px; flex: 0 0 auto;
  display: grid; place-items: center; font-size: 27px;
  background: var(--surface-2); border: 1px solid var(--border);
}
.ph-top h1 { font-family: var(--serif); font-size: 24px; letter-spacing: .02em; margin-bottom: 3px; }
.ph-top p { font-size: 13.5px; color: var(--text-2); }
.ph-stats { position: relative; display: flex; gap: 24px; margin-top: 18px; flex-wrap: wrap; }
.ph-stats div { font-size: 12.5px; color: var(--text-3); }
.ph-stats b { font-family: var(--mono); font-size: 17px; color: var(--text); display: block; line-height: 1.3; }
.ph-jump { position: relative; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--border); }
.ph-jump .chip { background: var(--surface-2); }

/* ---- 分类页分组 ---- */
.group-sec { margin-bottom: 34px; }
.group-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 5px; }
.group-head .gnum { font-family: var(--mono); font-size: 11.5px; color: var(--text-3); }
.group-head h2 { font-family: var(--serif); font-size: 18.5px; letter-spacing: .01em; }
.group-head .cnt { font-family: var(--mono); font-size: 11.5px; color: var(--text-3); margin-left: auto; }
.group-head .grule { flex: 1; height: 1px; background: var(--border); }
.group-desc { font-size: 13.5px; color: var(--text-2); margin-bottom: 14px; }
.topic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(246px, 1fr)); gap: 12px; }
.topic-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 15px 17px; display: block; color: var(--text); position: relative;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.topic-card:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--primary); }
.topic-card h4 { font-size: 14.5px; display: flex; align-items: center; gap: 7px; padding-right: 74px; }
.topic-card p { font-size: 12.5px; color: var(--text-3); margin-top: 5px; line-height: 1.6; }
.topic-card .flags { position: absolute; top: 13px; right: 13px; display: flex; gap: 5px; font-size: 12px; }
.badge { font-size: 11px; padding: 1px 8px; border-radius: 999px; font-weight: 600; }
.badge-filled { background: var(--ok-soft); color: var(--ok); }
.badge-todo { background: var(--surface-2); color: var(--text-3); border: 1px solid var(--border); }
.badge-done { background: var(--ok-soft); color: var(--ok); }

/* ---- 主题详情页 ---- */
.article { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 34px 40px 40px; }
.article-head { border-bottom: 1px solid var(--border); padding-bottom: 18px; margin-bottom: 6px; }
.article-head h1 { font-family: var(--serif); font-size: 25px; line-height: 1.4; letter-spacing: .01em; margin: 4px 0 10px; }
.article-head .tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; align-items: center; }
.tag { font-size: 12px; padding: 2px 10px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.article-head .summary {
  color: var(--text-2); font-size: 14px;
  background: var(--surface-2); border-left: 3px solid var(--primary);
  border-radius: 0 8px 8px 0; padding: 10px 14px;
}
.article-actions { display: flex; gap: 10px; margin: 16px 0 0; flex-wrap: wrap; }
.article-actions .btn-soft { cursor: pointer; }

.toc { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 14px 18px; margin: 20px 0 6px; }
.toc b { font-size: 13px; color: var(--text-2); }
.toc ol { margin: 6px 0 0 18px; font-size: 13.5px; }
.toc li { margin: 3px 0; }
.toc a { color: var(--text-2); }
.toc a:hover { color: var(--primary); }

/* 正文排版（字号/行高/间距全部走 :root 的 token，见文件顶部） */
.article-body { font-size: var(--fs-body); line-height: var(--lh-body); }
.article-body h2 {
  font-family: var(--serif); font-size: var(--fs-h2); margin: 32px 0 12px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border); scroll-margin-top: calc(var(--topbar-h) + 16px);
}
.article-body h3 { font-size: var(--fs-h3); margin: 22px 0 8px; }
.article-body h4 { font-size: var(--fs-h4); margin: 18px 0 6px; }
.article-body p { margin: var(--gap-p) 0; color: var(--text); }
.article-body ul, .article-body ol { margin: 10px 0 10px 22px; }
.article-body li { margin: var(--gap-li) 0; }

/* ---------- 阅读行宽（C 项核心修复） ----------
   正文列在 1360px 容器里约 960px 宽，按 15.5px 字号算每行超过 110 字符，
   远超 74ch 的舒适上限。这里只给「纯文字元素」限宽；
   表格 / 代码卡 / 插图块 / 流程条不限宽——它们本来就需要横向空间，
   硬压窄反而会挤成竖条。 */
.sec-body > p,
.sec-body > ul,
.sec-body > ol,
.sec-body > h3,
.sec-body > h4,
.sec-body > .callout { max-width: var(--measure); }
.article-body li::marker { color: var(--primary); }
.article-body blockquote {
  margin: 14px 0; padding: 10px 16px;
  background: var(--primary-soft); border-left: 3px solid var(--primary);
  border-radius: 0 8px 8px 0; color: var(--text-2); font-size: 14px;
}
.article-body code {
  font-family: var(--mono); font-size: 13px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 5px; padding: 1px 6px;
}
.article-body table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 13.5px; }
.article-body th, .article-body td { border: 1px solid var(--border); padding: 8px 12px; text-align: left; }
.article-body th { background: var(--surface-2); font-weight: 600; white-space: nowrap; }
.article-body tr:nth-child(even) td { background: var(--surface-2); }
.article-body .kw { background: var(--primary-soft); color: var(--primary); border-radius: 4px; padding: 0 4px; font-weight: 600; }

/* 代码块 */
.article-body pre {
  background: #0f172a; color: #e2e8f0;
  border-radius: 10px; padding: 14px 16px;
  overflow-x: auto; margin: 14px 0;
}
.article-body pre code { background: none; border: none; padding: 0; color: inherit; font-size: var(--fs-code); line-height: 1.65; }

/* ---------- 代码语法高亮（零依赖，离线可用；由 layouts.js 的 highlightCode 生成） ----------
   代码块底色固定为深色（不随深浅色主题变），所以这里用一组「浅色文字」配色。
   对比度均已超过 4.5:1，满足无障碍要求。 */
.hl-c { color: #7f93a8; font-style: italic; }   /* 注释 */
.hl-s { color: #8fd6a8; }                        /* 字符串 */
.hl-n { color: #f0b46e; }                        /* 数字 */
.hl-k { color: #7fb0f0; font-weight: 600; }      /* 关键字 */
.hl-f { color: #d0a6f2; }                        /* 函数名 */
.hl-o { color: #e2a0a0; }                        /* 运算符 */

/* 流程步骤条 */
ol.flow { list-style: none; margin: 14px 0; counter-reset: step; }
ol.flow li {
  counter-increment: step; position: relative;
  padding: 10px 0 10px 44px; border-bottom: 1px dashed var(--border);
}
ol.flow li:last-child { border-bottom: none; }
ol.flow li::before {
  content: counter(step);
  position: absolute; left: 4px; top: 11px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--primary); color: var(--on-primary);
  font-family: var(--mono); font-size: 12.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
ol.flow li span { display: block; font-size: 12.5px; color: var(--text-3); }

/* 待补充模板 */
.placeholder-box { border: 2px dashed var(--border-strong); border-radius: var(--radius); padding: 34px 28px; text-align: center; margin: 20px 0; }
.placeholder-box .pi { font-size: 40px; }
.placeholder-box h3 { margin: 10px 0 6px; font-size: 17px; font-family: var(--serif); }
.placeholder-box p { color: var(--text-2); font-size: 13.5px; }
.skeleton-list { text-align: left; max-width: 520px; margin: 20px auto 0; list-style: none; }
.skeleton-list li {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 4px; border-bottom: 1px dashed var(--border); font-size: 14px;
}
.skeleton-list li:last-child { border-bottom: none; }
.howto { margin-top: 18px; text-align: left; background: var(--surface-2); border-radius: 10px; padding: 14px 18px; font-size: 13.5px; color: var(--text-2); }
.howto code { font-family: var(--mono); font-size: 12.5px; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; }

/* 上一页 / 下一页 */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 26px; }
.pager a {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 13px 18px; font-size: 13.5px; color: var(--text);
  display: flex; flex-direction: column; gap: 2px; transition: .15s;
}
.pager a:hover { text-decoration: none; border-color: var(--primary); box-shadow: var(--shadow); }
.pager a small { color: var(--text-3); font-size: 12px; }
.pager .next { text-align: right; }
.pager a:hover .t { color: var(--primary); }

/* ================= 用户设置弹窗 ================= */
.modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(15, 23, 42, .5);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.modal-overlay[hidden] { display: none; }
.modal-box {
  background: var(--surface); color: var(--text);
  border-radius: 16px; box-shadow: var(--shadow-lg);
  width: 480px; max-width: 100%; max-height: 86vh; overflow-y: auto;
  padding: 22px 24px;
}
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.modal-head h2 { font-size: 18px; font-family: var(--serif); }
.modal-box label { display: block; font-size: 13px; color: var(--text-2); margin: 13px 0 5px; font-weight: 600; }
.modal-box input[type="text"], .modal-box select {
  width: 100%; height: 38px;
  border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface-2); color: var(--text);
  padding: 0 12px; font-size: 14px; font-family: inherit; outline: none;
}
.modal-box input[type="text"]:focus, .modal-box select:focus {
  border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft);
}
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
.seg button { border: none; background: var(--surface-2); color: var(--text-2); padding: 8px 18px; font-size: 13px; cursor: pointer; font-family: inherit; }
.seg button.active { background: var(--primary); color: var(--on-primary); font-weight: 600; }
.hint { font-size: 12.5px; color: var(--text-3); margin-top: 12px; line-height: 1.6; }
.settings-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.settings-actions .btn-soft.danger { color: #dc2626; border-color: #f3b4b4; }
[data-theme="dark"] .settings-actions .btn-soft.danger { color: #f87171; }
.settings-footer { margin-top: 18px; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.settings-footer .hint { margin: 0; }
.btn-main {
  background: var(--primary); color: var(--on-primary);
  height: 38px; padding: 0 20px; border: none; border-radius: 9px;
  font-weight: 600; font-size: 14px; font-family: inherit; cursor: pointer;
}
[data-theme="dark"] .btn-main { color: #0f141b; }
.btn-main:hover { filter: brightness(1.08); }

/* ---------- 正文字号三档（设置面板 A- / A / A+，记忆在 localStorage） ----------
   改 token 而不是直接改 .article-body 的 font-size：这样标题、代码、表格
   等所有跟着正文字号的元素会一起缩放，不会出现「正文变大、标题没变」的割裂。 */
body[data-fs="small"] { --fs-body: 14.5px; --fs-h2: 19.5px; --fs-h3: 16px; --fs-h4: 15px; }
body[data-fs="large"] { --fs-body: 17.5px; --fs-h2: 23px;   --fs-h3: 19px; --fs-h4: 17px; }

/* =========================================================
 * 主题页布局系统（layouts.js 配套）
 * 六套布局 protocol / omics / stats / clinical / writing / grant
 * 主色由容器上的 --lay-accent 注入
 * ========================================================= */

/* 阅读进度条 */
.readbar {
  position: fixed; top: var(--topbar-h); left: var(--sidebar-w); right: 0;
  height: 3px; z-index: 88; pointer-events: none; background: transparent;
}
.readbar i {
  display: block; height: 100%; width: 0;
  background: var(--lay-accent, var(--primary)); transition: width .1s linear;
}

/* ---------- 返回顶部（方案 C 的「阅读体验组件」）----------
   两个容易写错的地方：
   ① 必须显式写 `.to-top[hidden] { display: none }`。本类用了 display: flex，
      类选择器的优先级高于浏览器对 [hidden] 的默认规则，不写就「藏不住」——
      按钮会在刚进页面时也浮在那儿。
   ② hover 的字色用 --on-primary 而不是 #fff：深色主题下 --primary 是亮色（#7aa9f0），
      白字对比度只有 2.40:1（见 :root 里 L-11 的说明）。 */
.to-top {
  position: fixed; right: 18px; bottom: 18px; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--border); border-radius: 50%;
  background: var(--surface-2); color: var(--text-2);
  font-family: var(--font); font-size: 17px; line-height: 1; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
  transition: background .15s, color .15s, transform .15s;
}
.to-top[hidden] { display: none; }
.to-top:hover { background: var(--primary); color: var(--on-primary); transform: translateY(-2px); }
.to-top:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* 窄屏：右下角更贴边一点，但不贴死（避免和浏览器手势区打架） */
@media (max-width: 720px) {
  .to-top { right: 12px; bottom: 12px; width: 36px; height: 36px; font-size: 15px; }
}

/* 两栏：正文 + 学科侧栏 */
.topic-cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.topic-main {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 28px 34px 34px; min-width: 0;
}
.rail { position: sticky; top: calc(var(--topbar-h) + 18px); max-height: calc(100vh - var(--topbar-h) - 36px); overflow-y: auto; }
.rail .panel { padding: 14px 16px 16px; }

/* ---- 布局头部带 ---- */
.lay-head {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 24px 28px 20px; margin-bottom: 18px;
}
.lay-head::before {
  content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px;
  background: var(--lay-accent); opacity: .9;
}
/* 方向底纹：data-tone 决定图案，右侧渐隐，不遮挡文字 */
.lay-head::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(115deg, transparent 40%, #000 100%);
  mask-image: linear-gradient(115deg, transparent 40%, #000 100%);
}
.lay-head[data-tone="grid"]::after {
  background-image: linear-gradient(var(--gt-line) 1px, transparent 1px),
                    linear-gradient(90deg, var(--gt-line) 1px, transparent 1px);
  background-size: 26px 26px;
}
.lay-head[data-tone="dots"]::after {
  background-image: radial-gradient(var(--gt-line) 1.5px, transparent 1.5px);
  background-size: 18px 18px;
}
.lay-head[data-tone="lines"]::after {
  background-image: repeating-linear-gradient(180deg, var(--gt-line) 0 1px, transparent 1px 13px);
}
.lay-head[data-tone="waves"]::after {
  background-image: repeating-radial-gradient(circle at 100% 0, transparent 0 20px, var(--gt-line) 20px 21px);
}
.lay-head[data-tone="arc"]::after {
  background-image: repeating-radial-gradient(circle at 100% 100%, transparent 0 24px, var(--gt-line) 24px 25px);
}
.lay-badge { position: relative; display: inline-flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.lb-icon {
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-size: 16px;
  background: color-mix(in srgb, var(--lay-accent) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--lay-accent) 32%, var(--border));
}
.lb-text { display: flex; flex-direction: column; line-height: 1.25; }
.lb-text b {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; font-weight: 700;
  color: var(--lay-ink, var(--lay-accent)); text-transform: uppercase;
}
.lb-text i { font-style: normal; font-size: 11.5px; color: var(--text-3); }
.lay-head h1 {
  position: relative; font-family: var(--serif); font-size: 26px; line-height: 1.35;
  letter-spacing: .01em; margin-bottom: 10px;
}
.lay-tags { position: relative; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.lay-path { font-size: 12px; color: var(--text-3); }
.lay-summary {
  position: relative; color: var(--text-2); font-size: 14px;
  background: var(--surface-2); border-left: 3px solid var(--lay-accent);
  border-radius: 0 8px 8px 0; padding: 10px 14px;
}
.lay-quick {
  position: relative; display: flex; flex-wrap: wrap; gap: 0; margin-top: 16px;
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface-2);
}
.lay-quick > div {
  flex: 1 1 120px; padding: 9px 14px; border-right: 1px solid var(--border);
  display: flex; align-items: baseline; gap: 7px;
}
.lay-quick > div:last-child { border-right: none; }
.lay-quick b { font-family: var(--mono); font-size: 17px; color: var(--lay-ink, var(--lay-accent)); }
.lay-quick span { font-size: 11.5px; color: var(--text-3); }
.lay-foot {
  position: relative; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--border);
  font-size: 12px; color: var(--text-3);
}
.lay-tagline { font-family: var(--mono); letter-spacing: .01em; }
.lay-actions { position: relative; margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
a.btn-soft { text-decoration: none; }
.lay-chip {
  display: inline-flex; align-items: center; gap: 5px; font-weight: 600;
  color: var(--lay-ink, var(--lay-accent));
}

/* ---- 小节：语义条 + 标题 + 正文 ---- */
.topic-main .sec { scroll-margin-top: calc(var(--topbar-h) + 20px); margin-bottom: 30px; }
.topic-main .sec:last-child { margin-bottom: 4px; }
.sec-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.sb-icon { font-size: 14px; color: var(--lay-ink, var(--lay-accent)); line-height: 1; }
.sb-label {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em;
  color: var(--lay-ink, var(--lay-accent)); background: color-mix(in srgb, var(--lay-accent) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--lay-accent) 30%, var(--border));
  border-radius: 999px; padding: 1px 9px;
}
.sb-line { flex: 1; height: 1px; background: var(--border); }
.topic-main .sec-h {
  font-family: var(--serif); font-size: 19px; line-height: 1.5;
  margin: 0 0 12px; padding-bottom: 0; border-bottom: none;
}
.sec-body > *:first-child { margin-top: 0; }
.sec-body > *:last-child { margin-bottom: 0; }

/* 语义着色：排错 / 结果 / 材料 / 参考 各自一套色 */
.sec-trouble .sb-icon, .sec-trouble .sb-label { color: var(--warn); }
.sec-trouble .sb-label { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 40%, var(--border)); }
.sec-result .sb-icon, .sec-result .sb-label { color: var(--ok); }
.sec-result .sb-label { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 40%, var(--border)); }
.sec-materials .sb-icon, .sec-materials .sb-label { color: var(--accent); }
.sec-materials .sb-label { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.sec-ref .sb-icon, .sec-ref .sb-label { color: var(--text-3); }
.sec-ref .sb-label { background: var(--surface-2); border-color: var(--border); }
.sec-checklist .sb-icon, .sec-checklist .sb-label { color: var(--gold); }
.sec-checklist .sb-label { background: var(--warn-soft); border-color: color-mix(in srgb, var(--gold) 40%, var(--border)); }

/* ---- 组件 1：竖向步骤器（实验方案） ---- */
.topic-main ol.steps { list-style: none; margin: 16px 0 4px; }
.topic-main ol.steps .step { position: relative; display: flex; gap: 14px; padding-bottom: 16px; }
.topic-main ol.steps .step::before {
  content: ""; position: absolute; left: 17px; top: 38px; bottom: 2px; width: 1px; background: var(--border);
}
.topic-main ol.steps .step:last-child { padding-bottom: 0; }
.topic-main ol.steps .step:last-child::before { display: none; }
.st-num {
  flex: 0 0 auto; width: 35px; height: 35px; border-radius: 9px;
  display: grid; place-items: center; font-family: var(--mono); font-size: 12.5px; font-weight: 700;
  color: var(--lay-ink, var(--lay-accent));
  background: color-mix(in srgb, var(--lay-accent) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--lay-accent) 30%, var(--border));
}
.st-body { min-width: 0; padding-top: 3px; }
.st-body b { display: block; font-size: 14.5px; }
.st-d { display: block; font-size: 12.5px; color: var(--text-3); line-height: 1.65; }

/* ---- 组件 2：横向管线（组学与生信） ---- */
.topic-main ol.pipe { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.pipe-item {
  position: relative; flex: 1 1 190px; min-width: 170px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 10px; padding: 11px 13px;
}
.pipe-item::after {
  content: "→"; position: absolute; right: -11px; top: 50%; transform: translateY(-50%);
  color: var(--text-3); font-size: 13px; z-index: 1;
}
.pipe-item:last-child::after { display: none; }
.pp-num { display: block; font-family: var(--mono); font-size: 11px; color: var(--lay-ink, var(--lay-accent)); }
.pp-body b { display: block; font-size: 14px; margin: 2px 0 3px; }
.pp-d { display: block; font-size: 12px; color: var(--text-3); line-height: 1.6; }

/* ---- 组件 3：横向时间轴（基金与进阶） ---- */
.topic-main ol.timeline-h {
  list-style: none; display: flex; gap: 16px; overflow-x: auto;
  margin: 20px 0 8px; padding: 24px 2px 6px; position: relative;
}
.topic-main ol.timeline-h::before {
  content: ""; position: absolute; left: 2px; right: 2px; top: 34px; height: 1px; background: var(--border);
}
.th-item { flex: 0 0 auto; width: 178px; position: relative; }
.th-node {
  position: absolute; top: -20px; left: 0; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--mono); font-size: 11px; font-weight: 700;
  color: var(--lay-on, #ffffff); background: var(--lay-accent);
}
.th-item b { display: block; font-size: 13.5px; }
.th-d { display: block; font-size: 12px; color: var(--text-3); line-height: 1.6; margin-top: 3px; }

/* ---- 组件 4：代码卡 / 终端卡 ---- */
.code-card {
  margin: 16px 0; border-radius: 10px; overflow: hidden;
  border: 1px solid #1e293b; background: #0f172a;
}
.code-bar {
  display: flex; align-items: center; gap: 10px; padding: 7px 12px;
  background: #121d33; border-bottom: 1px solid #1e293b;
  font-family: var(--mono); font-size: 11px; color: #94a3b8;
}
.cb-dots { display: flex; gap: 5px; }
.cb-dots i { width: 8px; height: 8px; border-radius: 50%; background: #334155; }
.cb-dots i:nth-child(1) { background: #f87171; }
.cb-dots i:nth-child(2) { background: #fbbf24; }
.cb-dots i:nth-child(3) { background: #34d399; }
.cb-lang { color: #e2e8f0; font-weight: 600; }
.cb-idx { color: #64748b; }
.cb-copy {
  margin-left: auto; background: transparent; border: 1px solid #334155; color: #94a3b8;
  border-radius: 6px; font-size: 11px; padding: 2px 9px; font-family: inherit; cursor: pointer;
}
.cb-copy:hover { color: #fff; border-color: #64748b; }
.topic-main .code-card pre { margin: 0; border-radius: 0; background: transparent; padding: 14px 16px; }

/* ---- 组件 5：表卡 ---- */
.tbl-card { margin: 16px 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface); }
.tbl-cap {
  display: flex; align-items: center; gap: 10px; padding: 7px 12px;
  background: var(--surface-2); border-bottom: 1px solid var(--border);
  font-family: var(--mono); font-size: 11px; color: var(--text-3);
}
.tbl-note { margin-left: auto; }
.tbl-scroll { overflow-x: auto; }
.topic-main .tbl-card table { margin: 0; border: none; }
.topic-main .tbl-card th, .topic-main .tbl-card td { border-left: none; border-right: none; }
.topic-main .tbl-card tr:last-child td { border-bottom: none; }
.tbl-warn { border-color: color-mix(in srgb, var(--warn) 35%, var(--border)); }
.tbl-warn .tbl-cap { background: var(--warn-soft); color: var(--warn); }

/* ---- 组件 6：提示卡（各布局语义不同） ---- */
.callout {
  display: flex; gap: 12px; margin: 16px 0; padding: 12px 16px;
  border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border);
  border-left: 3px solid var(--lay-accent); font-size: 14px; color: var(--text-2);
}
.co-tag {
  flex: 0 0 auto; height: fit-content; margin-top: 3px; white-space: nowrap;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em;
  color: var(--lay-ink, var(--lay-accent)); border: 1px solid color-mix(in srgb, var(--lay-accent) 45%, transparent);
  border-radius: 5px; padding: 1px 7px;
}
.co-body { min-width: 0; }
.co-body > *:first-child { margin-top: 0; }
.co-body > *:last-child { margin-bottom: 0; }
.callout-protocol { border-left-color: #2563eb; }
.callout-omics { border-left-color: #059669; background: var(--accent-soft); }
.callout-stats { border-left-color: #0891b2; }
.callout-clinical { border-left-color: #0d9488; }
.callout-writing { border-left-color: #ea580c; }
.callout-grant { border-left-color: #7c3aed; }

/* ---- 组件 7：核对清单 ---- */
.topic-main ul.checklist { list-style: none; margin: 14px 0; padding: 0; }
.topic-main ul.checklist li {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 8px 0; border-bottom: 1px dashed var(--border); font-size: 14px;
}
.topic-main ul.checklist li:last-child { border-bottom: none; }
.ck {
  flex: 0 0 auto; width: 15px; height: 15px; border-radius: 4px; margin-top: 5px;
  border: 1.5px solid color-mix(in srgb, var(--lay-accent) 55%, var(--border));
}

/* ---- 组件 8：工具 / 规范标签 ---- */
.tool-tag {
  display: inline-block; font-family: var(--mono); font-size: 11.5px; padding: 0 6px;
  border-radius: 5px; background: var(--surface-3); border: 1px solid var(--border); color: var(--text-2);
}
.guide-tag {
  display: inline-block; font-family: var(--mono); font-size: 11.5px; font-weight: 600; padding: 0 7px;
  border-radius: 5px; color: var(--lay-ink, var(--lay-accent));
  background: color-mix(in srgb, var(--lay-accent) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--lay-accent) 32%, var(--border));
}
.tool-cloud { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---- 侧栏面板 ---- */
.rail-toc { list-style: none; margin: 0; }
.rail-toc li { border-left: 2px solid var(--border); }
.rail-toc li a {
  display: flex; gap: 8px; padding: 6px 10px; font-size: 12.5px; line-height: 1.55; color: var(--text-2);
}
.rail-toc li a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.rail-toc li.active { border-left-color: var(--lay-accent); }
.rail-toc li.active a { color: var(--lay-ink, var(--lay-accent)); font-weight: 600; background: var(--surface-2); }
.rt-icon { flex: 0 0 auto; font-size: 11px; color: var(--text-3); }
.rail-toc li.active .rt-icon { color: var(--lay-ink, var(--lay-accent)); }

.rail-meta { list-style: none; font-size: 12.5px; }
.rail-meta li {
  display: flex; gap: 10px; align-items: baseline; padding: 6px 0;
  border-bottom: 1px dashed var(--border);
}
.rail-meta li:last-child { border-bottom: none; }
.rail-meta li > span { flex: 0 0 62px; color: var(--text-3); }
.rail-meta b { font-weight: 600; color: var(--text); }
.rail-meta a { color: var(--primary); }

.rail-steps { list-style: none; font-size: 12.5px; }
.rail-steps li { display: flex; gap: 9px; padding: 5px 0; color: var(--text-2); line-height: 1.5; }
.rs-num {
  flex: 0 0 auto; width: 18px; height: 18px; border-radius: 5px; margin-top: 2px;
  display: grid; place-items: center; font-family: var(--mono); font-size: 10.5px;
  color: var(--lay-ink, var(--lay-accent)); background: var(--surface-3); border: 1px solid var(--border);
}

.rail-rel { list-style: none; font-size: 12.5px; }
.rail-rel li a, .rail-rel li {
  display: flex; gap: 8px; align-items: baseline; padding: 6px 0; color: var(--text-2);
  border-bottom: 1px dashed var(--border); line-height: 1.55;
}
.rail-rel li:last-child a, .rail-rel li:last-child { border-bottom: none; }
.rail-rel li a:hover { color: var(--primary); text-decoration: none; }
.rr-dot {
  flex: 0 0 auto; width: 5px; height: 5px; border-radius: 50%; margin-top: 7px;
  background: var(--lay-accent, var(--primary)); opacity: .7;
}
.rr-done { margin-left: auto; color: var(--ok); font-size: 11px; }

/* 写作布局正文用衬线，读起来更像学术范文 */
.body-writing .sec-body { font-family: var(--serif); line-height: 1.85; }
.body-writing .sec-body code, .body-writing .sec-body pre { font-family: var(--mono); }

@media (max-width: 1240px) {
  .topic-cols { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; max-height: none; }
}

@media (max-width: 900px) {
  .readbar { left: 0; }
  .topic-main { padding: 20px 18px 24px; }
  .lay-head { padding: 18px 18px 16px; }
  .lay-head h1 { font-size: 21px; }
  .lay-quick > div { flex: 1 1 100%; border-right: none; border-bottom: 1px solid var(--border); }
  .lay-quick > div:last-child { border-bottom: none; }
  .topic-main ol.timeline-h { padding-top: 26px; }
  .topic-main ol.pipe .pipe-item::after { display: none; }
}

/* ================= 响应式 ================= */
.overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 85; }
.overlay.show { display: block; }

@media (max-width: 1240px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .hero-side { border-left: none; border-top: 1px solid rgba(255,255,255,.20); padding-left: 0; padding-top: 18px; }
  .cols { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 980px) {
  .stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat:nth-child(3) { border-right: none; }
}

@media (max-width: 900px) {
  #menuBtn { display: flex; }
  .sidebar { transform: translateX(-100%); transition: transform .2s; }
  .sidebar.show { transform: translateX(0); box-shadow: var(--shadow-lg); }
  .main { margin-left: 0; padding: calc(var(--topbar-h) + 20px) 16px 60px; }
  .hero { padding: 26px 20px 0; }
  .hero h1 { font-size: 24px; }
  .hero-tagline { font-size: 14px; }
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(2n) { border-right: none; }
  .stat:nth-child(3) { border-right: 1px solid rgba(255,255,255,.10); }
  .article { padding: 22px 18px; }
  .page-head { padding: 20px 18px; }
  .pager { grid-template-columns: 1fr; }
  .search-wrap .kbd { display: none; }
  .sec-head { flex-wrap: wrap; gap: 8px; }
  .sec-note { white-space: normal; }

  /* ---- 触摸目标（L-8 移动端走查）----
     桌面下这些行只有 ~30px 高，鼠标点毫无问题；手指点就会经常点偏 ——
     尤其是侧栏，它本来就是「一组挨一组的窄行」，点偏一下会展开隔壁的分类。
     统一抬到 36–42px：不追求 Apple 的 44pt（那会让 220 个主题的侧栏长得没法用），
     取「手指能稳、长度还能忍」的折中。 */
  .icon-btn { width: 40px; height: 40px; }
  .nav-cat-btn { padding: 11px 10px; }
  .nav-group-btn { padding: 10px 9px; }
  .nav-topic { padding: 8px 9px 8px 14px; }
  .nav-case-link { padding: 11px 10px; }
}

/* 窄屏下设备规格表：th 的 nowrap 在 100% 宽的表格里会把表撑破（表宽由最宽的
   不可断行内容决定），而这张表没有横向滚动容器 —— 所以窄屏下允许折行。 */
@media (max-width: 640px) {
  .eqd-spec th { white-space: normal; padding-right: 8px; }
}

/* =========================================================
 * 步骤详解（数据见 assets/js/step-details.js）
 * 面向零基础读者：把「标题 + 一句话」扩展为可展开的操作说明
 * ========================================================= */

/* ---- 流程块上方的覆盖提示 ---- */
.flow-note {
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  margin: 16px 0 12px; padding: 9px 13px;
  background: color-mix(in srgb, var(--lay-accent) 7%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--lay-accent) 26%, var(--border));
  border-left: 3px solid var(--lay-accent);
  border-radius: 8px; font-size: 12.5px; color: var(--text-2); line-height: 1.65;
}
.flow-note b { color: var(--lay-ink, var(--lay-accent)); }
.fn-k {
  flex: 0 0 auto; font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  color: var(--lay-ink, var(--lay-accent));
  background: color-mix(in srgb, var(--lay-accent) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--lay-accent) 32%, var(--border));
  border-radius: 5px; padding: 1px 7px;
}

/* ---- 可展开的步骤详解 ---- */
.step-more {
  margin-top: 9px; border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface-2); overflow: hidden;
}
.step-more > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; font-size: 12.5px; font-weight: 600;
  color: var(--lay-ink, var(--lay-accent)); background: color-mix(in srgb, var(--lay-accent) 6%, var(--surface-2));
  user-select: none;
}
.step-more > summary::-webkit-details-marker { display: none; }
.step-more > summary:hover { background: color-mix(in srgb, var(--lay-accent) 11%, var(--surface-2)); }
.step-more[open] > summary { border-bottom: 1px solid var(--border); }
.sm-arrow { margin-left: auto; font-size: 9px; transition: transform .18s; opacity: .7; }
.sm-arrow::before { content: "▼"; }
.step-more[open] .sm-arrow { transform: rotate(180deg); }

.sm-body { padding: 13px 14px 15px; display: grid; gap: 12px; }
.sm-blk { display: grid; gap: 7px; }
.sm-h { display: flex; align-items: center; }
.sm-k {
  display: inline-block; font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  padding: 1px 7px; border-radius: 5px;
  color: var(--primary); background: var(--primary-soft);
  border: 1px solid color-mix(in srgb, var(--primary) 26%, var(--border));
}
.sm-k-warn {
  color: var(--warn); background: var(--warn-soft);
  border-color: color-mix(in srgb, var(--warn) 34%, var(--border));
}
.sm-goal, .sm-why { font-size: 13px; line-height: 1.8; color: var(--text-2); }
.sm-goal .sm-k, .sm-why .sm-k { margin-right: 7px; vertical-align: 1px; }
.sm-why { padding-left: 11px; border-left: 2px solid color-mix(in srgb, var(--lay-accent) 40%, var(--border)); }

.sm-how { list-style: none; counter-reset: smh; display: grid; gap: 8px; }
.sm-how > li {
  position: relative; padding-left: 27px; counter-increment: smh;
  font-size: 13px; line-height: 1.8; color: var(--text-2);
}
.sm-how > li::before {
  content: counter(smh); position: absolute; left: 0; top: 3px;
  width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center;
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  color: var(--lay-ink, var(--lay-accent));
  background: color-mix(in srgb, var(--lay-accent) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--lay-accent) 28%, var(--border));
}
.sm-how b, .sm-warn b { color: var(--text); }

.sm-params { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.sm-params th {
  text-align: left; padding: 5px 9px; white-space: nowrap;
  font-size: 11.5px; font-weight: 600; color: var(--text-3);
  background: var(--surface-3); border-bottom: 1px solid var(--border);
}
.sm-params td {
  padding: 6px 9px; vertical-align: top; line-height: 1.7;
  color: var(--text-2); border-bottom: 1px solid var(--border);
}
.sm-params tr:last-child td { border-bottom: none; }
.sm-params td:first-child { color: var(--text); font-weight: 600; white-space: nowrap; }
.sm-params td:nth-child(2) { color: var(--lay-ink, var(--lay-accent)); font-weight: 600; }

.sm-warn { list-style: none; display: grid; gap: 7px; }
.sm-warn > li {
  position: relative; padding-left: 21px;
  font-size: 13px; line-height: 1.8; color: var(--text-2);
}
.sm-warn > li::before {
  content: "!"; position: absolute; left: 0; top: 3px;
  width: 15px; height: 15px; border-radius: 50%; display: grid; place-items: center;
  font-size: 10px; font-weight: 700;
  color: var(--warn); background: var(--warn-soft);
  border: 1px solid color-mix(in srgb, var(--warn) 36%, var(--border));
}

.sm-body code {
  font-family: var(--mono); font-size: 12px;
  background: var(--surface-3); border: 1px solid var(--border);
  border-radius: 4px; padding: 0 4px;
}

/* 已配详解的步骤：左侧加一条色标 */
.topic-main ol.steps .step-has-detail .st-num {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lay-accent) 14%, transparent);
}

/* ---- 横排流程（管线 / 时间轴）后置的逐步详解 ---- */
.flow-details { margin: 20px 0 4px; padding-top: 15px; border-top: 1px dashed var(--border); }
.fd-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 13px; }
.fd-k { font-family: var(--mono); font-size: 11.5px; font-weight: 700; color: var(--lay-ink, var(--lay-accent)); }
.fd-note { font-size: 12px; color: var(--text-3); }

/* ---- 侧栏：标记已配详解的步骤 ---- */
.rail-steps li.rs-has { color: var(--text); }
.rs-dot { color: var(--lay-ink, var(--lay-accent)); font-size: 8px; margin-left: 5px; vertical-align: 2px; }

@media (max-width: 640px) {
  .sm-body { padding: 11px 11px 13px; }
  .sm-params { font-size: 12px; }
  .sm-params th, .sm-params td { padding: 5px 6px; }
  .sm-params td:first-child { white-space: normal; }
}

/* =========================================================
 * 示例实验（#/e/<主题id>）：从设计到结果解读
 * 主题页顶部入口卡 + 独立范例页
 * ========================================================= */

/* ---------- 主题页顶部入口卡 ---------- */
.ex-entry {
  display: flex; align-items: center; gap: 14px;
  margin-top: 18px; padding: 14px 18px;
  background: linear-gradient(135deg, var(--primary-soft), var(--accent-soft));
  border: 1px solid var(--border-strong);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius);
  text-decoration: none; color: var(--text);
  transition: transform .18s, box-shadow .18s, border-left-color .18s;
}
.ex-entry:hover { transform: translateY(-1px); box-shadow: var(--shadow); border-left-color: var(--accent); }
.ex-entry .ee-ic { font-size: 26px; line-height: 1; flex: none; }
.ex-entry .ee-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.ex-entry .ee-tx b { font-size: 14.5px; color: var(--primary); letter-spacing: .2px; }
.ex-entry .ee-tx i { font-size: 12.5px; color: var(--text-2); font-style: normal; }
.ex-entry .ee-meta {
  flex: none; font-size: 12px; color: var(--text-3);
  font-family: var(--mono); padding: 3px 9px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
}
.ex-entry .ee-go { flex: none; font-size: 13px; color: var(--accent); font-weight: 600; white-space: nowrap; }

/* ---------- 范例页头部 ---------- */
.ex-head {
  position: relative; overflow: hidden; margin-bottom: 26px; padding: 22px 24px 20px;
  background: var(--surface); border: 1px solid var(--border);
  border-top: 4px solid var(--lay-accent, var(--primary)); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
/* 示例实验页继承所属方向的标志图案与底纹 */
.ex-motif {
  position: absolute; right: 20px; top: 14px;
  width: 176px; height: 82px;
  color: var(--lay-ink, var(--lay-accent)); opacity: .15;
  pointer-events: none; z-index: 0;
}
.ex-motif svg { width: 100%; height: 100%; display: block; }
.ex-head::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(115deg, transparent 42%, #000 100%);
  mask-image: linear-gradient(115deg, transparent 42%, #000 100%);
}
.ex-head[data-tone="grid"]::after {
  background-image: linear-gradient(var(--gt-line) 1px, transparent 1px),
                    linear-gradient(90deg, var(--gt-line) 1px, transparent 1px);
  background-size: 26px 26px;
}
.ex-head[data-tone="dots"]::after {
  background-image: radial-gradient(var(--gt-line) 1.5px, transparent 1.5px);
  background-size: 18px 18px;
}
.ex-head[data-tone="lines"]::after {
  background-image: repeating-linear-gradient(180deg, var(--gt-line) 0 1px, transparent 1px 13px);
}
.ex-head[data-tone="waves"]::after {
  background-image: repeating-radial-gradient(circle at 100% 0, transparent 0 20px, var(--gt-line) 20px 21px);
}
.ex-head[data-tone="arc"]::after {
  background-image: repeating-radial-gradient(circle at 100% 100%, transparent 0 24px, var(--gt-line) 24px 25px);
}
.ex-head > * { position: relative; z-index: 1; }
[data-theme="dark"] .ex-motif { color: var(--gt-a2); opacity: .19; }
@media (max-width: 900px) {
  .ex-motif { width: 112px; height: 52px; right: 8px; top: 10px; opacity: .12; }
}
.ex-kicker {
  display: inline-block; margin-bottom: 10px; padding: 3px 10px;
  font-size: 12px; font-weight: 600; letter-spacing: .3px;
  color: var(--primary); background: var(--primary-soft);
  border-radius: 999px;
}
.ex-head h1 { margin: 0 0 10px; font-size: 25px; line-height: 1.4; font-family: var(--serif); }
.ex-goal { margin: 0 0 16px; font-size: 14.5px; line-height: 1.85; color: var(--text-2); }
.ex-head-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  padding-top: 14px; border-top: 1px dashed var(--border);
}
.ex-back {
  display: inline-block; padding: 7px 15px; font-size: 13px; font-weight: 600;
  color: var(--surface); background: var(--primary);
  border-radius: 8px; text-decoration: none; transition: opacity .15s;
}
.ex-back:hover { opacity: .86; }
.ex-hint { font-size: 12.5px; color: var(--text-3); }

/* ---------- 章节 ---------- */
.ex-sec { margin-bottom: 30px; }
.ex-sec-h { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; }
.ex-num {
  flex: none; width: 30px; height: 30px; display: grid; place-items: center;
  font-size: 14px; font-weight: 700; font-family: var(--mono);
  color: var(--surface); background: var(--primary); border-radius: 8px;
}
.ex-sec-h h2 { margin: 0; font-size: 19px; font-family: var(--serif); }
.ex-sec-note {
  margin: 0 0 14px 41px; font-size: 13px; line-height: 1.8; color: var(--text-3);
}
.ex-sec-note b { color: var(--text-2); }

/* ---------- 小节卡 ---------- */
.ex-blk {
  margin: 0 0 12px 41px; padding: 13px 16px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius);
}
.ex-blk.accent { background: var(--primary-soft); border-color: var(--border-strong); }
.ex-blk-lb {
  margin-bottom: 8px; font-size: 12.5px; font-weight: 700;
  color: var(--accent); letter-spacing: .3px;
}
.ex-blk.accent .ex-blk-lb { color: var(--primary); }
.ex-blk p { margin: 0; font-size: 14px; line-height: 1.9; color: var(--text); }

/* ---------- 小表格 ---------- */
.ex-tbl { overflow-x: auto; }
.ex-tbl table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ex-tbl th {
  padding: 8px 11px; text-align: left; font-size: 12.5px; font-weight: 700;
  color: var(--text-2); background: var(--surface-2);
  border-bottom: 2px solid var(--border-strong); white-space: nowrap;
}
.ex-tbl td {
  padding: 9px 11px; line-height: 1.75; color: var(--text);
  border-bottom: 1px solid var(--border); vertical-align: top;
}
.ex-tbl tr:last-child td { border-bottom: none; }
.ex-tbl td.c1 { font-weight: 600; color: var(--primary); white-space: nowrap; }

/* ---------- 结果图卡 ---------- */
.ex-fig {
  margin: 0 0 18px 41px; background: var(--surface);
  border: 1px solid var(--border); border-left: 4px solid var(--accent);
  border-radius: var(--radius); overflow: hidden;
}
.ef-head {
  display: flex; align-items: baseline; gap: 11px; padding: 13px 16px;
  background: var(--surface-2); border-bottom: 1px solid var(--border);
}
.ef-tag {
  flex: none; padding: 3px 10px; font-size: 12px; font-weight: 700;
  font-family: var(--mono); color: var(--surface);
  background: var(--accent); border-radius: 6px;
}
.ef-head h3 { margin: 0; font-size: 15.5px; line-height: 1.6; }
.ef-body { padding: 6px 16px 14px; }
.ef-row { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px dashed var(--border); }
.ef-row:last-child { border-bottom: none; }
.ef-lb {
  flex: none; width: 96px; font-size: 12.5px; font-weight: 700;
  color: var(--text-2); line-height: 1.9; letter-spacing: .3px;
}
/* 用色点代替 emoji 做功能标记：更接近正式科研站的做法 */
.ef-lb::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px;
  border-radius: 50%; background: var(--border-strong); vertical-align: 2px;
}
.ef-row.saw .ef-lb::before { background: var(--primary); }
.ef-row.read .ef-lb::before { background: var(--accent); }
.ef-row.conc .ef-lb::before { background: var(--ok); }
.ef-row.trap .ef-lb::before { background: var(--warn); }
.ef-row > div { flex: 1; font-size: 14px; line-height: 1.9; color: var(--text); }
.ef-row.conc > div { color: var(--ok); font-weight: 500; }
.ef-row.trap > div { color: var(--warn); }
.ef-row.trap .ef-lb { color: var(--warn); }

/* ---------- 结论框 / 范例 / 延伸 ---------- */
.ex-conc-box {
  margin-left: 41px; padding: 16px 18px;
  font-size: 14.5px; line-height: 1.95; color: var(--text);
  background: var(--ok-soft); border: 1px solid var(--border);
  border-left: 4px solid var(--ok); border-radius: var(--radius);
}
.ex-sample {
  padding: 13px 15px; font-family: var(--serif); font-size: 13.5px;
  line-height: 1.95; color: var(--text-2);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 8px; white-space: pre-wrap; word-break: break-word;
}
.ex-extend { margin: 0 0 0 41px; padding-left: 22px; }
.ex-extend li { margin-bottom: 9px; font-size: 14px; line-height: 1.85; color: var(--text-2); }

/* ---------- 窄屏 ---------- */
@media (max-width: 900px) {
  .ex-head { padding: 18px 16px; }
  .ex-head h1 { font-size: 21px; }
  .ex-sec-note, .ex-blk, .ex-fig, .ex-conc-box, .ex-extend { margin-left: 0; }
  .ef-row { flex-direction: column; gap: 4px; }
  .ef-lb { width: auto; }
  .ex-entry { flex-wrap: wrap; }
  .ex-entry .ee-meta { order: 3; }
}

/* =========================================================
 * 实战案例页（#/case/<id>）与案例索引页（#/cases）
 *
 * 骨架直接复用示例实验页的 ex-head / ex-sec / ex-blk / ex-fig / ex-toc ——
 * 两个页面回答的是不同问题（示例实验「做出来长什么样」，实战案例「怎么一步步跑出来」），
 * 但读者是同一批人，视觉语言必须一致，否则会觉得是两套东西。
 * 这里只补案例特有的三块：步骤卡、输出预览、检查点。
 * ========================================================= */

/* ---- 页头：案例编号徽标 ---- */
.case-no {
  display: inline-block; margin-right: 10px; padding: 2px 9px;
  font-family: var(--mono); font-size: 15px; font-weight: 700;
  color: var(--lay-on, #ffffff); background: var(--lay-accent, var(--primary));
  border-radius: 6px; vertical-align: 3px;
}

/* ---- 步骤卡：一步一块，左竖线标出「这是一步」 ---- */
.cs-step {
  margin: 0 0 22px 41px; padding: 0 0 4px 18px;
  border-left: 3px solid var(--border-strong);
}
.cs-step-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.cs-step-n {
  flex: none; width: 26px; height: 26px; line-height: 26px; text-align: center;
  font-family: var(--mono); font-size: 13px; font-weight: 700;
  color: var(--surface); background: var(--primary); border-radius: 50%;
  transform: translateY(3px);
}
.cs-step-h h3 { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--text); }

/* 「这一步在干嘛」：解释块，不是代码注释的重复 */
.cs-why {
  display: flex; gap: 12px; margin: 0 0 12px; padding: 11px 14px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
}
.cs-why-lb {
  flex: none; width: 84px; font-size: 12.5px; font-weight: 700;
  color: var(--text-2); letter-spacing: .3px; line-height: 1.9;
}
.cs-why-lb::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px;
  border-radius: 50%; background: var(--primary); vertical-align: 2px;
}
.cs-why > div { flex: 1; font-size: 13.5px; line-height: 1.9; color: var(--text); }

/* 输出预览：与代码卡视觉上必须能一眼分开（代码卡深底、输出预览浅底） */
.cs-out {
  margin: -6px 0 12px; border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; background: var(--surface-3);
}
.cs-out-lb {
  padding: 6px 13px; font-family: var(--mono); font-size: 11px; color: var(--text-3);
  background: var(--surface-2); border-bottom: 1px solid var(--border);
}
.cs-out-lb::before { content: "▸ "; color: var(--accent); }
.cs-out-pre {
  margin: 0; padding: 12px 14px; overflow-x: auto;
  font-family: var(--mono); font-size: 12px; line-height: 1.75;
  color: var(--text-2); white-space: pre; background: transparent;
}

/* 检查点：整页最该被看见的一栏，用警示色 */
.cs-check {
  display: flex; gap: 12px; margin: 0 0 8px; padding: 12px 14px;
  background: var(--warn-soft); border: 1px solid var(--border);
  border-left: 4px solid var(--warn); border-radius: 8px;
}
.cs-check-lb {
  flex: none; width: 84px; font-size: 12.5px; font-weight: 700;
  color: var(--warn); letter-spacing: .3px; line-height: 1.9;
}
.cs-check > div { flex: 1; font-size: 13.5px; line-height: 1.9; color: var(--text); }

/* 附注（数据获取说明、脚本使用说明） */
.cs-note {
  margin: 8px 0 0; padding: 10px 13px; font-size: 13px; line-height: 1.85;
  color: var(--text-2); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 8px;
}

/* 关联文献卡（临床背景那一节） */
.cs-paper {
  padding: 13px 15px; background: var(--surface-2);
  border: 1px solid var(--border); border-left: 3px solid var(--primary);
  border-radius: 8px;
}
.cs-paper-cite { font-family: var(--serif); font-size: 13.5px; line-height: 1.9; color: var(--text); }
.cs-paper-why { margin-top: 8px; font-size: 13px; line-height: 1.85; color: var(--text-2); }
.cs-paper-why i {
  display: block; font-style: normal; font-size: 11.5px; font-weight: 700;
  color: var(--text-3); letter-spacing: .3px; margin-bottom: 2px;
}
.cs-paper-a {
  display: inline-block; margin-top: 9px; font-family: var(--mono);
  font-size: 12px; color: var(--accent);
}

/* 完整脚本下载条 */
.cs-dl {
  display: flex; align-items: center; gap: 13px; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.cs-dl-ic { font-size: 26px; line-height: 1; flex: none; }
.cs-dl-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cs-dl-tx b { font-size: 14.5px; color: var(--primary); font-family: var(--mono); }
.cs-dl-tx i { font-size: 12px; color: var(--text-3); font-style: normal; font-family: var(--mono); }
.cs-dl-a {
  flex: none; padding: 8px 16px; font-size: 13px; font-weight: 600;
  color: var(--surface); background: var(--primary); border-radius: 8px;
}
.cs-dl-a:hover { opacity: .88; }

/* 「这份案例还服务哪些主题」的跳转网格（索引页的缺口清单也用同一套） */
.cs-topic-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px;
}
.cs-topic {
  display: flex; flex-direction: column; gap: 3px; padding: 11px 13px;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--accent); border-radius: 8px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.cs-topic:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.cs-topic b { font-size: 13.5px; color: var(--text); line-height: 1.5; }
.cs-topic i { font-size: 11.5px; color: var(--text-3); font-style: normal; }
.cs-topic.gap { border-left-color: var(--text-3); opacity: .82; }

/* ---- 案例索引页：卡片网格 ---- */
.case-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px;
}
.case-card {
  display: flex; flex-direction: column; gap: 8px; padding: 16px 17px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); border-top: 3px solid var(--primary);
  transition: transform .12s ease, box-shadow .12s ease;
}
.case-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.cc-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.cc-no {
  flex: none; padding: 2px 8px; font-family: var(--mono); font-size: 11.5px; font-weight: 700;
  color: var(--surface); background: var(--primary); border-radius: 5px;
}
.cc-kicker { font-size: 11.5px; color: var(--accent); font-weight: 600; letter-spacing: .2px; }
.cc-take { margin-left: auto; font-size: 11.5px; color: var(--text-3); }
.case-card h3 { margin: 2px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--text); }
.cc-goal {
  margin: 0; font-size: 13px; line-height: 1.8; color: var(--text-2);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.cc-foot {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: auto; padding-top: 9px;
  border-top: 1px dashed var(--border);
  font-family: var(--mono); font-size: 11.5px; color: var(--text-3);
}
.cc-sib { margin-left: auto; color: var(--accent); }

/* ---- 案例页窄屏 ---- */
@media (max-width: 900px) {
  .cs-step { margin-left: 0; padding-left: 14px; }
  .cs-why, .cs-check { flex-direction: column; gap: 4px; }
  .cs-why-lb, .cs-check-lb { width: auto; }
  .case-grid { grid-template-columns: 1fr; }
  .cs-dl { flex-wrap: wrap; }
  .case-no { font-size: 13px; }
  .case-band { grid-template-columns: 1fr; }
}

/* ---- 首页的案例库横条 ---- */
.case-band {
  display: grid; grid-template-columns: minmax(300px, 1fr) minmax(320px, 1.15fr);
  gap: 26px; margin: 0 0 30px; padding: 24px 26px;
  background: linear-gradient(135deg, var(--primary-soft) 0%, var(--accent-soft) 100%);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.cb-kicker {
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 8px;
}
.case-band h2 { margin: 0 0 10px; font-size: 23px; font-family: var(--serif); color: var(--primary); }
.case-band p { margin: 0 0 14px; font-size: 14px; line-height: 1.9; color: var(--text-2); }
.cb-stats { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 16px; }
.cb-stats span { font-size: 13px; color: var(--text-2); }
.cb-stats b { font-family: var(--mono); font-size: 15px; color: var(--primary); }
.cb-go {
  display: inline-block; padding: 9px 18px; font-size: 13.5px; font-weight: 600;
  color: var(--surface); background: var(--primary); border-radius: 8px;
}
.cb-go:hover { opacity: .88; }
.cb-right { display: flex; flex-direction: column; gap: 8px; }
.cb-mini {
  display: flex; align-items: baseline; gap: 10px; padding: 10px 13px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 9px;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.cb-mini:hover { transform: translateX(3px); box-shadow: var(--shadow); border-color: var(--accent); }
.cbm-no {
  flex: none; font-family: var(--mono); font-size: 11px; font-weight: 700;
  color: var(--surface); background: var(--accent); border-radius: 5px; padding: 1px 6px;
}
.cb-mini b { flex: 1; font-size: 13.5px; line-height: 1.5; color: var(--text); }
.cb-mini i {
  flex: none; font-style: normal; font-family: var(--mono);
  font-size: 11px; color: var(--text-3);
}

/* =========================================================
 * 学习资源（方案 D）
 * 主题页末尾的「📚 学习资源」区块 + 资源白名单页（#/resources）
 * 配色一律走变量，深浅色模式自动跟随。
 * ========================================================= */

/* ---- 主题页资源区块 ---- */
.res-block {
  margin: 34px 0 0; padding: 22px 24px 20px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); border-left: 3px solid var(--accent);
}
.res-h { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 8px; }
.res-ic { font-size: 19px; line-height: 1; }
.res-h h2 {
  margin: 0; font-family: var(--serif); font-size: 20px; color: var(--primary);
}
.res-count {
  margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: var(--text-3);
  padding: 3px 9px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
}
.res-note { margin: 0 0 15px; font-size: 13px; line-height: 1.85; color: var(--text-2); }
.res-note a { color: var(--accent); border-bottom: 1px dashed currentColor; }

.res-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.res-card {
  display: flex; align-items: flex-start; gap: 11px; padding: 12px 13px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.res-card:hover {
  transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--accent);
}
.rc-ic { flex: none; font-size: 17px; line-height: 1.5; display: flex; align-items: flex-start; padding-top: 2px; }
.rc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.rc-name { font-size: 13.5px; line-height: 1.55; color: var(--text); font-weight: 600; }
.rc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.rc-site, .rc-type, .rc-lang, .rc-free, .rc-kind {
  font-family: var(--mono); font-size: 10.5px; line-height: 1.6;
  padding: 1px 6px; border-radius: 4px; white-space: nowrap;
}
.rc-site { background: var(--primary-soft); color: var(--primary); font-weight: 700; }
.rc-type { background: var(--surface-3); color: var(--text-2); }
.rc-lang { background: var(--surface-3); color: var(--text-3); }
.rc-free { background: var(--ok-soft); color: var(--ok); font-weight: 700; }
.rc-free.paid { background: var(--warn-soft); color: var(--warn); }
.rc-kind { background: var(--surface-3); color: var(--text-3); }
.rc-kind.page { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.rc-note {
  font-size: 12px; line-height: 1.75; color: var(--text-3);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.rc-go { flex: none; font-size: 13px; color: var(--text-3); line-height: 1.6; }
.res-card:hover .rc-go { color: var(--accent); }
.res-foot {
  margin: 13px 0 0; padding-top: 11px; border-top: 1px dashed var(--border);
  font-size: 12.5px; line-height: 1.8; color: var(--text-3);
}

/* ---- 白名单页 ---- */
.res-site-list { display: flex; flex-direction: column; gap: 12px; }
.rs-item {
  padding: 15px 17px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  border-left: 3px solid var(--accent);
}
.rs-item.pending { border-left-color: var(--warn); background: var(--surface-2); }
.rs-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.rs-ic { font-size: 17px; line-height: 1; }
.rs-ic svg, .rc-ic svg { display: block; color: var(--accent); }
.rs-top b { font-size: 15px; color: var(--primary); font-family: var(--serif); }
.rs-home {
  margin-left: auto; font-family: var(--mono); font-size: 11.5px;
  color: var(--accent); border-bottom: 1px dashed currentColor;
}
.rs-note { margin: 0 0 9px; font-size: 13px; line-height: 1.85; color: var(--text-2); }
.rs-verify {
  margin: 0; padding: 9px 11px; font-size: 12.5px; line-height: 1.8;
  background: var(--ok-soft); border-radius: 8px; color: var(--text-2);
}
.rs-verify.block { background: var(--warn-soft); }
.rs-verify span {
  display: inline-block; margin-right: 8px; font-family: var(--mono);
  font-size: 10.5px; font-weight: 700; color: var(--ok);
  padding: 1px 6px; background: var(--surface); border-radius: 4px;
}
.rs-verify.block span { color: var(--warn); }

@media (max-width: 860px) {
  .res-grid { grid-template-columns: 1fr; }
  .res-block { padding: 18px 16px 16px; }
  .res-count { margin-left: 0; }
  .rs-home { margin-left: 0; }
}
/* =========================================================
 * 理解性三问 + 经典文献（方案 E）
 * 三问紧跟「原理概述」之后；文献卡在正文之后、学习资源之前。
 * 两者都不用 <h3>，避免被「固定 6 小节」的检查误计为一个小节。
 * ========================================================= */

/* ---- 理解性三问 ---- */
.why-block {
  margin: 26px 0 6px; padding: 20px 22px 18px;
  background: linear-gradient(180deg, var(--primary-soft) 0%, var(--surface-2) 100%);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  border-left: 3px solid var(--primary);
}
.why-h { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.why-ic { font-size: 19px; line-height: 1; }
.why-h h2 {
  margin: 0; font-family: var(--serif); font-size: 19px; color: var(--primary); line-height: 1.4;
}
.why-lead { margin: 0 0 15px; font-size: 13px; line-height: 1.85; color: var(--text-2); }
.why-grid { display: flex; flex-direction: column; gap: 10px; }
.why-card {
  padding: 13px 15px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px;
}
.why-card.w-q1 { border-left: 3px solid var(--primary); }
.why-card.w-q2 { border-left: 3px solid var(--warn); }
.why-card.w-q3 { border-left: 3px solid var(--accent); }
.wc-h { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }
.wc-ic { font-size: 15px; line-height: 1; }
.wc-h b { font-size: 14px; color: var(--text); }
.why-card.w-q2 .wc-h b { color: var(--warn); }
.why-card.w-q3 .wc-h b { color: var(--accent); }
.wc-tx {
  margin: 0; font-size: 13.5px; line-height: 1.9; color: var(--text-2);
  max-width: var(--measure);
}
.wc-hint {
  display: block; margin-top: 8px; padding-top: 7px; border-top: 1px dashed var(--border);
  font-family: var(--mono); font-size: 11px; line-height: 1.7; color: var(--text-3);
}

/* ---- 经典文献 ---- */
.kp-block {
  margin: 30px 0 0; padding: 22px 24px 20px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); border-left: 3px solid var(--paper);
}
.kp-h { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 8px; }
.kp-ic { font-size: 19px; line-height: 1; }
.kp-h h2 { margin: 0; font-family: var(--serif); font-size: 20px; color: var(--paper-deep); }
.kp-count {
  margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: var(--text-3);
  padding: 3px 9px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
}
.kp-note { margin: 0 0 15px; font-size: 13px; line-height: 1.85; color: var(--text-2); }
.kp-note a { color: var(--paper); border-bottom: 1px dashed currentColor; }

.kp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.kp-item {
  padding: 13px 15px 12px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px;
}
.kp-top { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }
.kp-tag {
  font-family: var(--mono); font-size: 10.5px; font-weight: 700; line-height: 1.6;
  padding: 1px 7px; border-radius: 4px; background: var(--paper-soft); color: var(--paper-deep);
}
.kp-year {
  margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: var(--text-3);
}
.kp-title {
  display: block; font-size: 14px; line-height: 1.65; color: var(--text);
  font-weight: 600; margin-bottom: 6px; max-width: var(--measure);
}
.kp-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 8px; }
.kp-journal { font-size: 12.5px; color: var(--primary); font-style: italic; }
.kp-authors { font-size: 12px; color: var(--text-3); }
.kp-why {
  margin: 0 0 9px; font-size: 13px; line-height: 1.88; color: var(--text-2);
  max-width: var(--measure);
}
.kp-links {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  padding-top: 8px; border-top: 1px dashed var(--border);
}
.kp-links a, .kp-links span {
  font-family: var(--mono); font-size: 11.5px; line-height: 1.7; color: var(--paper);
}
.kp-links a { border-bottom: 1px dashed currentColor; word-break: break-all; }
.kp-links a:hover { color: var(--primary); }

/* ---- 文献库页（#/papers） ---- */
.rp-policy {
  margin: 20px 0 26px; padding: 20px 22px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); border-left: 3px solid var(--paper);
}
.rp-policy h2 {
  margin: 0 0 12px; font-family: var(--serif); font-size: 18px; color: var(--paper-deep);
}
.rp-steps { margin: 0 0 12px; padding-left: 20px; }
.rp-steps li {
  font-size: 13.5px; line-height: 1.9; color: var(--text-2); margin-bottom: 7px;
  max-width: var(--measure);
}
.rp-steps code {
  font-family: var(--mono); font-size: 12px;
  padding: 1px 5px; background: var(--surface-3); border-radius: 4px;
}
.rp-gap {
  margin: 0; padding: 11px 13px; font-size: 13px; line-height: 1.88;
  background: var(--warn-soft); border-radius: 8px; color: var(--text-2);
  max-width: var(--measure);
}
.rp-list { display: flex; flex-direction: column; gap: 22px; }
.rp-topic {
  padding: 18px 20px 16px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.rp-th { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.rp-th h3 { margin: 0; font-family: var(--serif); font-size: 17px; }
.rp-th h3 a { color: var(--primary); border-bottom: 1px dashed currentColor; }
.rp-tg { margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: var(--text-3); }
.kp-compact .kp-title { font-size: 13.5px; }
.kp-compact .kp-why { font-size: 12.5px; }

@media (max-width: 860px) {
  .why-block, .kp-block, .rp-policy, .rp-topic { padding: 16px 14px 14px; }
  .kp-count, .rp-tg { margin-left: 0; }
}
.cb-more { font-size: 12.5px; color: var(--accent); padding-left: 4px; }

/* =========================================================
 * 方向视觉身份（GROUP_THEME 驱动）
 * 31 个方向各有自己的配色、图标、标志图案与底纹，
 * 目的：让方向之间一眼可辨，而不是同一套模板换文字。
 * 颜色全部走内联变量 --lay-accent / --gt-*，深浅色模式自动适配。
 * ========================================================= */

.gt-motif {
  position: absolute; right: 22px; top: 16px;
  width: 210px; height: 98px;
  color: var(--lay-ink, var(--lay-accent)); opacity: .16;
  pointer-events: none; z-index: 0;
}
.gt-motif svg { width: 100%; height: 100%; display: block; }

.gt-strip {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap;
  padding-bottom: 13px; margin-bottom: 16px;
  border-bottom: 1px dashed var(--gt-line);
}
.gt-ic {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  display: grid; place-items: center; font-size: 18px;
  background: var(--gt-soft); border: 1px solid var(--gt-line);
}
.gt-tx { display: flex; flex-direction: column; line-height: 1.25; }
.gt-tx b {
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  color: var(--lay-ink, var(--lay-accent)); font-weight: 700;
}
.gt-tx i { font-style: normal; font-size: 13px; color: var(--text-2); font-weight: 600; }
.gt-sig { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.gt-sig span {
  font-size: 11.5px; padding: 3px 9px; border-radius: 999px;
  color: var(--lay-ink, var(--lay-accent)); background: var(--gt-soft); border: 1px solid var(--gt-line);
}

/* 深色模式换用较亮的辅色，避免深底上看不见 */
[data-theme="dark"] .gt-motif { color: var(--gt-a2); opacity: .2; }
[data-theme="dark"] .gt-strip { border-bottom-color: var(--gt-line2); }
[data-theme="dark"] .gt-ic { background: var(--gt-soft2); border-color: var(--gt-line2); }
[data-theme="dark"] .gt-tx b { color: var(--gt-a2); }
[data-theme="dark"] .gt-sig span { color: var(--gt-a2); background: var(--gt-soft2); border-color: var(--gt-line2); }

@media (max-width: 900px) {
  .gt-motif { width: 130px; height: 62px; right: 10px; top: 12px; opacity: .13; }
  .gt-sig { margin-left: 0; width: 100%; }
  .gt-strip { gap: 8px 10px; }
}

/* =========================================================
 * 板块页的 5 套页面结构（见 app.js 的 CAT_BODY 分派）
 *   .cb-lab    实验台：方向条 + 主题网格
 *   .cb-pipe   数据管线：提示符 + 等宽列表
 *   .cb-cr     研究阶段：竖向编号时间线
 *   .cb-flow   投稿流程：步骤轨道
 *   .cb-ladder 成长阶梯：分级台阶
 * 目的：5 个板块页不再共用同一套骨架。
 * ========================================================= */

/* ---------- ① 实验台：方向条 ---------- */
.cbl-bar {
  display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap;
  position: relative; overflow: hidden;
  padding: 10px 14px; margin-bottom: 14px;
  border-left: 3px solid var(--lay-accent);
  background: var(--gt-soft); border-radius: 0 10px 10px 0;
}
.cbl-ic { font-size: 17px; flex: none; }
.cbl-kick {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
  color: var(--lay-ink, var(--lay-accent)); font-weight: 700;
}
.cbl-sig { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.cbl-sig span {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  color: var(--lay-ink, var(--lay-accent)); border: 1px solid var(--gt-line); background: var(--surface);
}
.cbl-motif {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 96px; height: 45px; color: var(--lay-ink, var(--lay-accent)); opacity: .14; pointer-events: none;
}
.cbl-motif svg { width: 100%; height: 100%; display: block; }
[data-theme="dark"] .cbl-kick, [data-theme="dark"] .cbl-sig span { color: var(--gt-a2); }
[data-theme="dark"] .cbl-sig span { border-color: var(--gt-line2); }
[data-theme="dark"] .cbl-motif { color: var(--gt-a2); }

/* ---------- ② 数据管线：等宽列表 ---------- */
.cb-pipe { border-left: 2px solid var(--border); padding-left: 16px; margin-left: 4px; }
.cb-data { margin-bottom: 26px; position: relative; }
.cb-data::before {
  content: ""; position: absolute; left: -22px; top: 7px;
  width: 9px; height: 9px; border-radius: 2px;
  background: var(--lay-accent); transform: rotate(45deg);
}
.cd-head { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.cd-num { font-family: var(--mono); font-size: 11px; color: var(--text-3); }
.cd-prompt { font-family: var(--mono); font-size: 16px; color: var(--lay-ink, var(--lay-accent)); font-weight: 700; }
.cd-head h2 { font-size: 17px; margin: 0; font-family: var(--mono); letter-spacing: -.01em; }
.cd-cnt { font-size: 11.5px; color: var(--text-3); font-family: var(--mono); }
.cd-desc { font-size: 13px; color: var(--text-2); margin: 5px 0 10px; }
.cd-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.cd-list li { border-bottom: 1px solid var(--border); }
.cd-list a {
  display: grid; grid-template-columns: minmax(150px, 240px) 1fr auto;
  gap: 12px; align-items: baseline; padding: 9px 4px; text-decoration: none;
}
.cd-list a:hover { background: var(--surface-2); }
.cd-name { font-size: 13.5px; font-weight: 600; color: var(--text); }
.cd-sub { font-size: 12.5px; color: var(--text-3); }
.cb-ok, .cb-todo {
  font-size: 11px; padding: 1px 8px; border-radius: 999px; white-space: nowrap;
  font-family: var(--mono);
}
.cb-ok { color: var(--ok); background: var(--ok-soft); }
.cb-todo { color: var(--warn); background: var(--warn-soft); }
@media (max-width: 760px) {
  .cd-list a { grid-template-columns: 1fr; gap: 3px; }
}

/* ---------- ③ 研究阶段：竖向时间线 ---------- */
.cb-cr { list-style: none; margin: 0; padding: 0 0 0 4px; }
.cr-stage { display: grid; grid-template-columns: 44px 1fr; gap: 16px; position: relative; padding-bottom: 24px; }
.cr-stage::before {
  content: ""; position: absolute; left: 21px; top: 34px; bottom: 0;
  width: 2px; background: var(--border); 
}
.cr-stage:last-child::before { display: none; }
.cr-mark {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); border: 2px solid var(--cat-color, var(--primary));
  color: var(--cat-color, var(--primary)); font-weight: 700; font-size: 15px;
  font-family: var(--mono); z-index: 1;
}
.cr-body h2 { font-size: 17px; margin: 8px 0 4px; }
.cr-body p { font-size: 13px; color: var(--text-2); margin: 0 0 10px; }
.cr-topics { display: flex; flex-wrap: wrap; gap: 7px; }
.cr-topic {
  font-size: 12.5px; padding: 5px 11px; border-radius: 8px; text-decoration: none;
  color: var(--text); background: var(--surface-2); border: 1px solid var(--border);
}
.cr-topic:hover { border-color: var(--cat-color, var(--primary)); color: var(--cat-color, var(--primary)); }
.cr-topic i { font-style: normal; font-size: 10.5px; color: var(--warn); margin-left: 5px; }

/* ---------- ④ 投稿流程：步骤轨道 ---------- */
.cb-flow { position: relative; }
.cp-step { display: grid; grid-template-columns: 26px 1fr; gap: 14px; position: relative; padding-bottom: 20px; }
.cp-rail { display: flex; justify-content: center; }
.cp-dot {
  width: 13px; height: 13px; border-radius: 50%; margin-top: 6px;
  background: var(--cat-color, var(--primary)); box-shadow: 0 0 0 4px var(--surface);
}
.cp-step::before {
  content: ""; position: absolute; left: 12px; top: 22px; bottom: 0;
  width: 2px; background: var(--border);
}
.cp-step:last-child::before { display: none; }
.cp-body { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; background: var(--surface); }
.cp-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cp-num {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; font-weight: 700;
  color: var(--cat-color, var(--primary)); padding: 2px 7px; border-radius: 5px;
  background: var(--surface-3);
}
.cp-h h2 { font-size: 16.5px; margin: 0; }
.cp-body p { font-size: 13px; color: var(--text-2); margin: 6px 0 10px; }
.cp-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.cp-chip {
  font-size: 12.5px; padding: 4px 10px; border-radius: 6px; text-decoration: none;
  color: var(--text-2); border: 1px dashed var(--border-strong);
}
.cp-chip:hover { color: var(--cat-color, var(--primary)); border-color: var(--cat-color, var(--primary)); border-style: solid; }

/* ---------- ⑤ 成长阶梯：分级台阶 ---------- */
.cb-ladder { display: flex; flex-direction: column; gap: 14px; }
.cl-rung {
  display: grid; grid-template-columns: 62px 1fr; gap: 16px;
  margin-left: calc((var(--lvl) - 1) * 26px);
  padding: 15px 18px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; border-left: 4px solid var(--cat-color, var(--primary));
}
.cl-badge {
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .1em;
  color: var(--cat-color, var(--primary)); align-self: start; padding-top: 3px;
}
.cl-body h2 { font-size: 17px; margin: 0 0 4px; }
.cl-body p { font-size: 13px; color: var(--text-2); margin: 0 0 10px; }
.cl-cards { display: flex; flex-wrap: wrap; gap: 7px; }
.cl-card {
  font-size: 12.5px; padding: 5px 11px; border-radius: 8px; text-decoration: none;
  color: var(--text); background: var(--surface-2); border: 1px solid var(--border);
}
.cl-card:hover { border-color: var(--cat-color, var(--primary)); color: var(--cat-color, var(--primary)); }
.cl-card i { font-style: normal; font-size: 10.5px; color: var(--warn); margin-left: 5px; }
@media (max-width: 760px) {
  .cl-rung { margin-left: 0; grid-template-columns: 1fr; gap: 6px; }
}

/* =========================================================
 * 板块页抬头：板块自己的标志图案 + 底纹 + 特征词
 * （对应 app.js renderCategory 里的 .ph-motif / .ph-kicker / .ph-sig）
 * ========================================================= */
.ph-motif {
  position: absolute; right: 26px; top: 22px;
  width: 190px; height: 89px;
  color: var(--lay-ink, var(--lay-accent)); opacity: .15;
  pointer-events: none; z-index: 0;
}
.ph-motif svg { width: 100%; height: 100%; display: block; }

.ph-kicker {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em; font-weight: 700;
  color: var(--lay-ink, var(--lay-accent));
  padding-bottom: 12px; margin-bottom: 14px;
  border-bottom: 1px dashed var(--gt-line);
}
.ph-kicker span { font-size: 14px; letter-spacing: 0; }

.ph-top, .ph-stats, .ph-jump { position: relative; z-index: 1; }

.ph-sig {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px;
}
.ph-sig span {
  font-size: 11.5px; padding: 3px 10px; border-radius: 999px;
  color: var(--lay-ink, var(--lay-accent)); background: var(--gt-soft); border: 1px solid var(--gt-line);
}

[data-theme="dark"] .ph-motif { color: var(--gt-a2); opacity: .19; }
[data-theme="dark"] .ph-kicker { color: var(--gt-a2); border-bottom-color: var(--gt-line2); }
[data-theme="dark"] .ph-sig span { color: var(--gt-a2); background: var(--gt-soft2); border-color: var(--gt-line2); }

@media (max-width: 900px) {
  .ph-motif { width: 120px; height: 56px; right: 10px; top: 16px; opacity: .12; }
}

/* =========================================================
 * 插图样式（手绘 SVG 图库）
 *
 * 图库数据：assets/js/figures.js（主表 + 构建器 + 页面映射）
 *           assets/js/figures-2/3/4.js（增量合并）
 * 图块结构（由 enhanceBody / renderExample 展开）：
 *   抬头（图题 + 图号）→ 画布（内联 SVG）→ 图注 → 怎么读 → 容易读错
 *
 * 重要：SVG 内部一律用下面这些 CSS 类取色，不写死颜色，
 *       因此浅色/深色主题会自动切换（调色板见 :root 的 --fig-*）。
 *       深色块上的白字（fill="#fff"）是刻意保留的，不要改。
 * ========================================================= */

/* ---------- 图块外壳 ---------- */
.fig-block {
  margin: 22px 0 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.fig-head {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.fig-ic { color: var(--fig-1); font-size: 13px; line-height: 1; }
.fig-title { font-weight: 700; font-size: 14px; color: var(--text); }
.fig-id {
  margin-left: auto;
  font-family: var(--mono); font-size: 10.5px; color: var(--text-3);
  padding: 2px 8px; border: 1px solid var(--border); border-radius: 999px;
}

/* ---------- 画布 ---------- */
.fig-canvas { padding: 16px 14px 8px; background: var(--surface); }
.fig-canvas svg {
  display: block; width: 100%; height: auto;
  font-family: var(--font); font-size: 12.5px;
  overflow: visible;
}

/* ---------- 图注 / 解读 / 误读 ---------- */
.fig-cap, .fig-read, .fig-trap {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  font-size: 13.5px; line-height: 1.8; color: var(--text-2);
}
.fig-cap > span:last-child,
.fig-read > div, .fig-trap > div { flex: 1; min-width: 0; }
.fig-k {
  flex: 0 0 92px; padding-top: 2px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em;
  color: var(--text-3);
}
.fig-cap { background: var(--surface-2); font-size: 12.5px; line-height: 1.7; }
.fig-read { border-left: 3px solid var(--fig-1); }
.fig-read .fig-k { color: var(--fig-1); }
.fig-trap { border-left: 3px solid var(--fig-2); background: var(--surface-2); }
.fig-trap .fig-k { color: var(--fig-2); }
.fig-read b, .fig-trap b, .fig-cap b { color: var(--text); font-weight: 700; }

/* 板块页 / 示例页里的图块容器 */
.cat-fig { margin: 0 0 26px; }
.ex-fig .fig-block { margin: 14px 0 16px; }
.ex-fig .fig-head { background: var(--surface-3); }

/* ---------- SVG 取色类 ---------- */
.fig-canvas svg .ax { fill: none; stroke: var(--fig-axis); stroke-width: 1.6; }
.fig-canvas svg .gr { fill: none; stroke: var(--fig-grid); stroke-width: 1; }
.fig-canvas svg .dx { fill: none; stroke: var(--fig-dash); stroke-width: 1.3; stroke-dasharray: 5 4; }
.fig-canvas svg .fs { fill: var(--fig-bg); stroke: var(--fig-grid); stroke-width: 1; }

.fig-canvas svg .lb   { fill: var(--fig-text);  font-size: 12px; }
.fig-canvas svg .lbb  { fill: var(--fig-text);  font-size: 13px; font-weight: 700; }
.fig-canvas svg .lbm  { fill: var(--fig-muted); font-size: 11px; }
.fig-canvas svg .lbms { fill: var(--fig-muted); font-size: 10px; }
/* 总览图（方案 I）里的「⚠ 最容易翻车」小标题。
   用 --warn 而不是写死 #b91c1c：深浅两套主题都要能读，
   且全站警示色只有这一个来源。 */
.fig-canvas svg .lbw  { fill: var(--warn); font-size: 11.5px; font-weight: 700; }
.fig-canvas svg .lbe  { text-anchor: end; }
.fig-canvas svg .lbc  { text-anchor: middle; }

.fig-canvas svg .f1 { fill: var(--fig-1); }
.fig-canvas svg .f2 { fill: var(--fig-2); }
.fig-canvas svg .f3 { fill: var(--fig-3); }
.fig-canvas svg .f4 { fill: var(--fig-4); }
.fig-canvas svg .f5 { fill: var(--fig-5); }
.fig-canvas svg .f6 { fill: var(--fig-6); }

.fig-canvas svg .s1 { fill: none; stroke: var(--fig-1); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fig-canvas svg .s2 { fill: none; stroke: var(--fig-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fig-canvas svg .s3 { fill: none; stroke: var(--fig-3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fig-canvas svg .s4 { fill: none; stroke: var(--fig-4); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fig-canvas svg .s5 { fill: none; stroke: var(--fig-5); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fig-canvas svg .s6 { fill: none; stroke: var(--fig-6); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.fig-canvas svg .sf1 { fill: var(--fig-1); opacity: .28; }
.fig-canvas svg .sf2 { fill: var(--fig-2); opacity: .26; }
.fig-canvas svg .sf3 { fill: var(--fig-3); opacity: .26; }
.fig-canvas svg .sf4 { fill: var(--fig-4); opacity: .3; }
.fig-canvas svg .sf5 { fill: var(--fig-5); opacity: .3; }
.fig-canvas svg .sf6 { fill: var(--fig-6); opacity: .28; }

/* ---------- 窄屏 ---------- */
@media (max-width: 760px) {
  .fig-canvas { padding: 12px 8px 6px; }
  .fig-cap, .fig-read, .fig-trap { flex-direction: column; gap: 5px; padding: 11px 13px; }
  .fig-k { flex: none; padding-top: 0; }
  .fig-title { font-size: 13px; }
}

/* =========================================================
 * 示例实验页 · 深度模块
 * 对标 Nature Protocols / Bio-protocol 的规范结构：
 *   速览条（at a glance）/ 页内目录 / 时间轴（Timing）/
 *   关键步骤（CRITICAL STEP）/ 排错表（Troubleshooting）/
 *   局限（Limitations）/ 参考文献（References）
 * 全部取色走 CSS 变量，深浅两套主题自动跟随。
 * ========================================================= */

/* ---------- 速览条：一眼看清这一页的规模 ---------- */
.ex-glance {
  display: flex; flex-wrap: wrap;
  margin: 0 0 20px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.ex-gl {
  flex: 1 1 134px; min-width: 116px;
  display: flex; flex-direction: column; gap: 3px;
  padding: 12px 14px;
  border-right: 1px solid var(--border);
}
.ex-gl:last-child { border-right: none; }
.ex-gl-k { font-size: 11.5px; color: var(--text-3); letter-spacing: .4px; }
.ex-gl-v { font-size: 13.5px; font-weight: 600; color: var(--primary); line-height: 1.5; }

/* ---------- 页内目录 ---------- */
.ex-toc {
  margin: 0 0 26px; padding: 12px 14px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius);
}
.ex-toc-lb {
  display: block; margin-bottom: 9px;
  font-size: 11.5px; letter-spacing: 1.4px; color: var(--text-3);
}
.ex-toc ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ex-toc a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px 5px 8px;
  font-size: 13px; color: var(--text-2); text-decoration: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  transition: border-color .15s, color .15s, background .15s;
}
.ex-toc a:hover { color: var(--primary); border-color: var(--border-strong); background: var(--primary-soft); }
.ex-toc i {
  font-style: normal; font-family: var(--mono); font-size: 11px;
  color: var(--text-3); min-width: 15px; text-align: center;
}
.ex-toc a:hover i { color: var(--primary); }

/* ---------- 时间轴 ---------- */
.ex-tl { display: flex; gap: 4px; margin: 4px 0 2px; padding-bottom: 4px; overflow-x: auto; }
.ex-tl-seg {
  min-width: 62px; padding: 9px 10px;
  display: flex; flex-direction: column; gap: 3px;
  background: var(--primary-soft);
  border: 1px solid var(--border); border-top: 3px solid var(--primary);
  border-radius: 8px;
}
.ex-tl-p { font-size: 12px; font-weight: 600; color: var(--primary); line-height: 1.45; }
.ex-tl-t { font-size: 11.5px; color: var(--text-3); font-family: var(--mono); white-space: nowrap; }

/* ---------- 关键步骤（CRITICAL STEP） ---------- */
.ex-crit { margin: 0; padding: 0; list-style: none; }
.ex-crit li {
  position: relative; margin-bottom: 11px; padding: 11px 14px 11px 94px;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--accent); border-radius: 8px;
}
.ex-crit li:last-child { margin-bottom: 0; }
.ex-crit li::before {
  content: "CRITICAL"; position: absolute; left: 12px; top: 12px;
  padding: 2px 6px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .6px;
  color: var(--surface); background: var(--accent); border-radius: 4px;
}
.ex-crit b { display: block; margin-bottom: 4px; font-size: 13.5px; color: var(--text); line-height: 1.7; }
.ex-crit span { display: block; font-size: 13.5px; line-height: 1.85; color: var(--text-2); }

/* ---------- 局限与不能下的结论 ---------- */
.ex-limits {
  margin: 0 0 0 41px; padding: 15px 18px 15px 40px; list-style: none;
  background: var(--warn-soft); border: 1px solid var(--border);
  border-left: 4px solid var(--warn); border-radius: var(--radius);
}
.ex-limits li { position: relative; margin-bottom: 10px; font-size: 14px; line-height: 1.9; color: var(--text-2); }
.ex-limits li:last-child { margin-bottom: 0; }
.ex-limits li::before {
  content: "×"; position: absolute; left: -21px; top: 0;
  font-family: var(--mono); font-weight: 700; font-size: 15px; color: var(--warn);
}

/* ---------- 参考文献 ---------- */
.ex-refs { margin: 0 0 0 41px; padding: 0; list-style: none; counter-reset: exref; }
.ex-ref {
  position: relative; margin-bottom: 10px; padding: 13px 15px 13px 54px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); counter-increment: exref;
}
.ex-ref:last-child { margin-bottom: 0; }
.ex-ref::before {
  content: "[" counter(exref) "]"; position: absolute; left: 15px; top: 13px;
  font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--primary);
}
.ex-ref-cite { font-size: 13.5px; line-height: 1.8; color: var(--text); }
.ex-ref-foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; margin-top: 9px; }
.ex-ref-doi {
  flex: none; padding: 2px 9px; font-family: var(--mono); font-size: 11.5px;
  color: var(--primary); text-decoration: none;
  background: var(--primary-soft); border: 1px solid var(--border); border-radius: 999px;
}
.ex-ref-doi:hover { border-color: var(--primary); }
.ex-ref-doi.plain { color: var(--text-3); background: var(--surface-3); }
.ex-ref-why { flex: 1 1 260px; font-size: 12.5px; line-height: 1.8; color: var(--text-3); }
.ex-ref-why i {
  display: block; margin-bottom: 3px; font-style: normal;
  font-size: 10.5px; letter-spacing: 1.1px; color: var(--text-3);
}

/* ---------- 窄屏 ---------- */
@media (max-width: 900px) {
  .ex-limits, .ex-refs { margin-left: 0; }
  .ex-gl { flex: 1 1 46%; border-right: none; border-bottom: 1px solid var(--border); }
  .ex-crit li { padding: 30px 13px 12px; }
  .ex-crit li::before { top: 10px; }
  .ex-tl-seg { min-width: 76px; }
}

/* =========================================================
 * 实验器材库（assets/js/lab-equipment.js 的手绘 SVG 取色）
 * 所有器材的深浅色都由这里的变量驱动，SVG 里不写死颜色
 * ========================================================= */
:root {
  --eq-glass: #e8eef6;      --eq-glass-line: #a9b6c6;
  --eq-liq: #6aa9e0;        --eq-liq-top: #a8cdf0;
  --eq-liq-0: #6aa9e0;      --eq-liq-1: #34a853;    --eq-liq-2: #d64545;
  --eq-liq-3: #dd8a1f;      --eq-liq-4: #8259d6;    --eq-liq-5: #7b8798;
  --eq-pellet: #b9743f;
  --eq-cap: #cfd7e2;        --eq-cap-line: #97a4b5;  --eq-knurl: #aab5c3;
  --eq-shell: #dde3ea;      --eq-shell-2: #c8d1dc;
  --eq-chamber: #2f3b4b;    --eq-rotor: #b9c4d1;     --eq-rotor-2: #97a3b2;
  --eq-hole: #7b8798;       --eq-axle: #6d7987;
  --eq-panel: #cfd7e2;      --eq-screen: #16222e;    --eq-screen-tx: #7dd3fc;
  --eq-btn: #aab5c3;
  --eq-tank: #dbe3ec;       --eq-buffer: #9dc4e4;    --eq-buffer-top: #c3dcf0;
  --eq-gel-block: #f4f7fa;  --eq-band: #4a5a6d;
  --eq-tick: #8d9aa9;
  --eq-hi: rgba(255,255,255,.75);
  --eq-uv-band: #ff8a5c;
}
[data-theme="dark"] {
  --eq-glass: #223040;      --eq-glass-line: #4a5c72;
  --eq-liq: #3f7fbe;        --eq-liq-top: #6aa6dd;
  --eq-liq-0: #3f7fbe;      --eq-liq-1: #4ade80;    --eq-liq-2: #f87171;
  --eq-liq-3: #fbbf24;      --eq-liq-4: #a78bfa;    --eq-liq-5: #94a3b8;
  --eq-pellet: #8f5730;
  --eq-cap: #38475a;        --eq-cap-line: #55677e;  --eq-knurl: #4a5c72;
  --eq-shell: #2a3644;      --eq-shell-2: #223040;
  --eq-chamber: #101820;    --eq-rotor: #3a4859;     --eq-rotor-2: #2c3846;
  --eq-hole: #1d2733;       --eq-axle: #55677e;
  --eq-panel: #33404f;      --eq-screen: #0c141c;    --eq-screen-tx: #5eead4;
  --eq-btn: #4a5c72;
  --eq-tank: #26313d;       --eq-buffer: #2f5d80;    --eq-buffer-top: #47789e;
  --eq-gel-block: #33404f;  --eq-band: #cbd5e1;
  --eq-tick: #6d7987;
  --eq-hi: rgba(255,255,255,.16);
  --eq-uv-band: #ffa06b;
}

.eq-svg { display: block; overflow: visible; }
.eq-glass       { fill: var(--eq-glass); }
.eq-glass-line  { fill: none; stroke: var(--eq-glass-line); stroke-width: 1.1; }
.eq-liq         { fill: var(--eq-liq); opacity: .85; }
.eq-liq-top     { fill: var(--eq-liq-top); }
.eq-pellet      { fill: var(--eq-pellet); }
.eq-hi          { stroke: var(--eq-hi); stroke-width: 2; stroke-linecap: round; }
.eq-tick        { stroke: var(--eq-tick); stroke-width: .9; }
.eq-cap         { fill: var(--eq-cap); stroke: var(--eq-cap-line); stroke-width: 1; }
.eq-cap-edge    { stroke: var(--eq-cap-line); stroke-width: 1; }
.eq-cap-ring    { fill: var(--eq-cap); stroke: var(--eq-cap-line); stroke-width: 1; }
.eq-knurl       { stroke: var(--eq-knurl); stroke-width: .9; }

.eq-tube.is-dim { opacity: .34; }
.eq-tube.is-sel .eq-glass-line { stroke: var(--primary); stroke-width: 2; }

/* ---- 试管内的液体配色（.eq-tube.cN 覆盖 --eq-liq） ----
   0 水/缓冲液 · 1 绿（Mix / 培养基）· 2 红（模板 / 染料）
   3 橙（显色底物）· 4 紫（核酸染料）· 5 灰（有机相 / 上清）
   深浅两套值分开写：深色主题下要提亮，否则液体在暗底上糊成一团。 */
.eq-tube.c0 .eq-liq, .eq-tube.c0 .eq-liq-top { fill: var(--eq-liq-0); }
.eq-tube.c1 .eq-liq, .eq-tube.c1 .eq-liq-top { fill: var(--eq-liq-1); }
.eq-tube.c2 .eq-liq, .eq-tube.c2 .eq-liq-top { fill: var(--eq-liq-2); }
.eq-tube.c3 .eq-liq, .eq-tube.c3 .eq-liq-top { fill: var(--eq-liq-3); }
.eq-tube.c4 .eq-liq, .eq-tube.c4 .eq-liq-top { fill: var(--eq-liq-4); }
.eq-tube.c5 .eq-liq, .eq-tube.c5 .eq-liq-top { fill: var(--eq-liq-5); }
.eq-tube.c0 .eq-liq-top, .eq-tube.c1 .eq-liq-top, .eq-tube.c2 .eq-liq-top,
.eq-tube.c3 .eq-liq-top, .eq-tube.c4 .eq-liq-top, .eq-tube.c5 .eq-liq-top { opacity: .5; }

/* --- 离心机 --- */
.eq-shell        { fill: var(--eq-shell); stroke: var(--eq-shell-2); stroke-width: 1; }
.eq-shell-top    { fill: var(--eq-shell-2); opacity: .7; }
.eq-chamber      { fill: var(--eq-chamber); }
.eq-chamber-in   { fill: var(--eq-chamber); opacity: .55; }
.eq-rotor-disc   { fill: var(--eq-rotor); stroke: var(--eq-rotor-2); stroke-width: 1; }
.eq-hole         { fill: var(--eq-hole); }
.eq-hole-tube    { fill: var(--eq-glass); stroke: var(--eq-glass-line); stroke-width: .8; }
.eq-hole-cap     { fill: var(--eq-cap); }
.eq-axle         { fill: var(--eq-rotor-2); }
.eq-axle-2       { fill: var(--eq-axle); }
.eq-lid-plate    { fill: var(--eq-shell-2); stroke: var(--eq-shell); stroke-width: 1; }
.eq-lid-glass    { fill: var(--eq-glass); opacity: .55; }
.eq-lid.is-open .eq-lid-plate { fill: var(--eq-shell-2); opacity: .85; }
.eq-hinge        { stroke: var(--eq-shell-2); stroke-width: 3; stroke-linecap: round; }
.eq-panel        { fill: var(--eq-panel); }
.eq-screen       { fill: var(--eq-screen); }
.eq-screen-tx    { fill: var(--eq-screen-tx); font: 500 9px var(--mono); opacity: .8; }
.eq-screen-num   { fill: var(--eq-screen-tx); font: 600 15px var(--mono); }
.eq-screen-u     { fill: var(--eq-screen-tx); font: 400 8px var(--mono); opacity: .7; }
.eq-btn          { fill: var(--eq-btn); stroke: var(--eq-shell); stroke-width: 1; }
.eq-btn.is-on    { fill: var(--ok); }
.eq-vent         { fill: var(--eq-shell-2); opacity: .8; }
.eq-foot         { fill: var(--eq-shell-2); }
.eq-rotor.is-spin { animation: eq-spin 1.05s linear infinite; }
@keyframes eq-spin { to { transform: rotate(360deg); } }

/* --- 移液器 --- */
.eq-p-body   { fill: var(--eq-shell); stroke: var(--eq-shell-2); stroke-width: 1; }
.eq-p-btn    { fill: var(--eq-cap); stroke: var(--eq-cap-line); stroke-width: 1; }
.eq-p-knob   { fill: var(--eq-shell-2); stroke: var(--eq-cap-line); stroke-width: 1; }
.eq-p-knob-l { stroke: var(--eq-cap-line); stroke-width: 1.6; stroke-linecap: round; }
.eq-p-eject  { fill: var(--eq-cap); }
.eq-p-grip   { stroke: var(--eq-shell-2); stroke-width: 1.4; }
.eq-p-shaft  { fill: var(--eq-shell-2); }
.eq-p-tip    { fill: var(--eq-glass); stroke: var(--eq-glass-line); stroke-width: 1; opacity: .95; }
.eq-p-liq    { fill: var(--eq-liq); opacity: .9; }
.eq-p-naked  { stroke: var(--eq-glass-line); stroke-width: 1.4; }
.eq-p-num    { fill: var(--eq-screen-tx); font: 600 12px var(--mono); }
.eq-p-unit   { fill: var(--eq-screen-tx); font: 400 8px var(--mono); opacity: .75; }

/* --- PCR 仪 --- */
.eq-heatlid      { transition: transform .45s cubic-bezier(.34,1.4,.64,1); }
.eq-hl-plate     { fill: var(--eq-shell-2); stroke: var(--eq-shell); stroke-width: 1; }
.eq-hl-inner     { fill: var(--eq-chamber); opacity: .5; }
.eq-hl-tx        { fill: var(--text-2); font: 500 11px var(--font); }
.eq-block        { fill: var(--eq-shell-2); }
.eq-well         { fill: var(--eq-chamber); opacity: .35; }
.eq-well.is-full { opacity: .75; }
.eq-well-tube    { fill: var(--eq-glass); stroke: var(--eq-glass-line); stroke-width: .8; }
.eq-block-tx     { fill: var(--text-3); font: 400 10px var(--font); }
.eq-curve        { fill: none; stroke: var(--eq-screen-tx); stroke-width: 1.4; opacity: .85; }

/* --- 电泳槽 --- */
.eq-tank         { fill: var(--eq-tank); stroke: var(--eq-shell-2); stroke-width: 1; }
.eq-buffer       { fill: var(--eq-buffer); opacity: .5; }
.eq-buffer-top   { fill: var(--eq-buffer-top); opacity: .9; }
.eq-pole         { fill: var(--eq-band); }
.eq-pole.pos     { fill: #b91c1c; }
.eq-pole.neg     { fill: #1f2937; }
[data-theme="dark"] .eq-pole.neg { fill: #64748b; }
.eq-pole-tx      { fill: var(--text-2); font: 600 16px var(--font); }
.eq-bubble       { fill: var(--eq-hi); animation: eq-bub 1.9s ease-in infinite; }
@keyframes eq-bub {
  0%   { transform: translateY(0); opacity: 0; }
  22%  { opacity: .85; }
  100% { transform: translateY(-74px); opacity: 0; }
}
.eq-gel-block    { fill: var(--eq-gel-block); stroke: var(--eq-glass-line); stroke-width: 1; opacity: .93; }
.eq-well-gel     { fill: var(--eq-chamber); opacity: .28; }
.eq-band         { fill: var(--eq-band); transition: y .5s linear, opacity .3s; }
.eq-gel.uv .eq-band { fill: var(--eq-uv-band); }
.eq-gel:not(.uv) .eq-band { opacity: .3 !important; }
.eq-lane-tx      { fill: var(--text-3); font: 500 10px var(--mono); }
.eq-tank-hd      { fill: var(--eq-shell-2); opacity: .85; }
.eq-tank-tx      { fill: var(--text-2); font: 500 11px var(--font); }

/* --- 管架 / 试剂瓶 / 96 孔板 --- */
.eq-rack-body    { fill: var(--eq-shell); stroke: var(--eq-shell-2); stroke-width: 1; }
.eq-rack-top     { fill: var(--eq-shell-2); }
.eq-rack-hole    { fill: var(--eq-chamber); opacity: .4; }
.eq-rack-tube    { fill: var(--eq-glass); stroke: var(--eq-glass-line); stroke-width: .7; }
.eq-bottle       { fill: var(--eq-glass); stroke: var(--eq-glass-line); stroke-width: 1; }
.eq-bottle-liq   { fill: var(--eq-liq); opacity: .8; }
.eq-bottle-neck  { fill: var(--eq-glass); stroke: var(--eq-glass-line); stroke-width: 1; }
.eq-label        { fill: var(--surface); stroke: var(--eq-cap-line); stroke-width: .8; }
.eq-label-tx     { fill: var(--text); font: 600 10px var(--font); }
.eq-plate-body   { fill: var(--eq-shell); stroke: var(--eq-shell-2); stroke-width: 1; }
.eq-plate-well   { fill: var(--eq-chamber); opacity: .3; }
.eq-plate-well.is-full { fill: var(--eq-liq); opacity: .8; }

@media (prefers-reduced-motion: reduce) {
  .eq-rotor.is-spin { animation: none; }
  .eq-bubble { animation: none; opacity: .5; }
  .eq-heatlid { transition: none; }
}

/* =========================================================
 * 器材库扩充段（8 件 → 45 件）
 * 新增变量：金属件 / 深色件 / 水 / 不锈钢 / 转膜三明治 / 指示灯
 * ========================================================= */
:root {
  --eq-metal: #c3ccd8;      --eq-metal-2: #a3aebd;    --eq-metal-3: #8b96a5;
  --eq-dark: #3b4654;       --eq-rubber: #5a6473;
  --eq-water: #7fbde6;      --eq-water-top: #b3d9f2;
  --eq-steel: #d7dee7;      --eq-steel-2: #eef2f6;
  --eq-paper: #f4f1e8;      --eq-membrane: #e8e2d4;   --eq-gel-slab: #dfe9f2;
  --eq-ice: #cfe4f5;        --eq-frost: #dbeafe;
  --eq-led-r: #dc2626;      --eq-led-g: #16a34a;
  --eq-led-b: #2563eb;      --eq-led-a: #d97706;
  --eq-jack-pos: #b91c1c;   --eq-jack-neg: #1f2937;
  --eq-uv-lamp: #7c3aed;
  --eq-cell: #7c9cbf;
  --eq-dot: #64748b;        --eq-dot-1: #0ea5e9;      --eq-dot-2: #f97316;
  --eq-grid: #94a3b8;       --eq-cover: #eef4fa;
}
[data-theme="dark"] {
  --eq-metal: #46556a;      --eq-metal-2: #38465a;    --eq-metal-3: #2c3846;
  --eq-dark: #1a222c;       --eq-rubber: #2f3a48;
  --eq-water: #2f6f9e;      --eq-water-top: #4a90c2;
  --eq-steel: #3d4b5c;      --eq-steel-2: #4c5b6d;
  --eq-paper: #3a3a34;      --eq-membrane: #3d3a30;   --eq-gel-slab: #2e3d4d;
  --eq-ice: #1e3a52;        --eq-frost: #2a4a66;
  --eq-led-r: #f87171;      --eq-led-g: #4ade80;
  --eq-led-b: #60a5fa;      --eq-led-a: #fbbf24;
  --eq-jack-pos: #f87171;   --eq-jack-neg: #94a3b8;
  --eq-uv-lamp: #a78bfa;
  --eq-cell: #4a6b8f;
  --eq-dot: #94a3b8;        --eq-dot-1: #38bdf8;      --eq-dot-2: #fb923c;
  --eq-grid: #64748b;       --eq-cover: #2a3a4c;
}

/* ---- 文字 / 金属 / 深色件 ---- */
.eq-tx          { fill: var(--text); font: 600 11px var(--font); }
.eq-tx2         { fill: var(--text-3); font: 500 9.5px var(--font); }
.eq-shell-2     { fill: var(--eq-shell-2); stroke: var(--eq-shell); stroke-width: 1; }
.eq-metal       { fill: var(--eq-metal); stroke: var(--eq-metal-3); stroke-width: 1; }
.eq-metal-2     { fill: var(--eq-metal-2); stroke: var(--eq-metal-3); stroke-width: .9; }
.eq-metal-2-l   { stroke: var(--eq-metal-3); stroke-width: 1; opacity: .6; }
.eq-steel       { fill: var(--eq-steel); stroke: var(--eq-metal-2); stroke-width: 1; }
.eq-steel-2     { fill: var(--eq-steel-2); }
.eq-dark        { fill: var(--eq-dark); stroke: var(--eq-metal-3); stroke-width: .9; }
.eq-rubber      { fill: var(--eq-rubber); }
.eq-rubber-ring { fill: none; stroke: var(--eq-metal-3); stroke-width: .8; opacity: .45; }
.eq-top         { fill: var(--eq-steel-2); stroke: var(--eq-metal-2); stroke-width: 1; }
.eq-cable       { fill: none; stroke: var(--eq-metal-3); stroke-width: 3.4; stroke-linecap: round; }
.eq-door-gap    { stroke: var(--eq-metal-3); stroke-width: 2; }
.eq-lid-knob    { fill: var(--eq-metal-2); stroke: var(--eq-metal-3); stroke-width: 1; }
.eq-inlet       { fill: var(--eq-metal-2); stroke: var(--eq-metal-3); stroke-width: 1; }

/* ---- 旋钮 / 指示灯 / 插孔 ---- */
.eq-knob        { fill: var(--eq-metal-2); stroke: var(--eq-metal-3); stroke-width: 1; }
.eq-knob-l      { stroke: var(--text-2); stroke-width: 1.8; stroke-linecap: round; }
.eq-led         { fill: var(--eq-metal-3); opacity: .2; }
.eq-led.r       { fill: var(--eq-led-r); }
.eq-led.g       { fill: var(--eq-led-g); }
.eq-led.b       { fill: var(--eq-led-b); }
.eq-led.a       { fill: var(--eq-led-a); }
.eq-led.on      { opacity: 1; }
.eq-jack        { stroke: var(--eq-metal-3); stroke-width: 2; }
.eq-jack.pos    { fill: var(--eq-jack-pos); }
.eq-jack.neg    { fill: var(--eq-jack-neg); }
.eq-jack-tx     { fill: #fff; font: 700 12px var(--mono); }
[data-theme="dark"] .eq-jack-tx { fill: #10151c; }
.eq-screen-fill { fill: var(--eq-screen-tx); opacity: .45; }

/* ---- 水 / 低温 ---- */
.eq-water       { fill: var(--eq-water); opacity: .48; }
.eq-water-top   { fill: var(--eq-water-top); }
.eq-ln2-liq     { fill: var(--eq-ice); opacity: .72; }
.eq-ln2-top     { fill: var(--eq-water-top); opacity: .85; }
.eq-frost       { fill: none; stroke: var(--eq-ice); stroke-width: 1.4; stroke-linecap: round; }
.eq-mist        { fill: var(--eq-ice); opacity: .5; animation: eq-mist 3.2s ease-out infinite; }

/* ---- 加热 / 气流 ---- */
.eq-heat        { fill: none; stroke: var(--eq-led-a); stroke-width: 2; opacity: .8; stroke-linecap: round; }
.eq-heat-dot    { fill: var(--eq-led-a); opacity: .6; animation: eq-rise 2.4s ease-out infinite; }
.eq-air         { stroke: var(--eq-led-b); stroke-width: 1.6; stroke-dasharray: 3 4; opacity: .55;
                  animation: eq-air 1.8s linear infinite; }
.eq-beam        { stroke: var(--eq-led-b); stroke-width: 1.6; stroke-dasharray: 3 3; opacity: .75; }

/* ---- 转膜三明治 ---- */
.eq-paper       { fill: var(--eq-paper); stroke: var(--eq-glass-line); stroke-width: .8; }
.eq-membrane    { fill: var(--eq-membrane); stroke: var(--eq-glass-line); stroke-width: .8; }
.eq-gel-slab    { fill: var(--eq-gel-slab); stroke: var(--eq-glass-line); stroke-width: .8; }

/* ---- 检测类 ---- */
.eq-axis        { fill: none; stroke: var(--eq-screen-tx); stroke-width: 1; opacity: .5; }
.eq-ct          { stroke: var(--eq-led-r); stroke-width: 1; stroke-dasharray: 4 3; opacity: .9; }
.eq-dot         { fill: var(--eq-dot); }
.eq-dot.c1      { fill: var(--eq-dot-1); }
.eq-dot.c2      { fill: var(--eq-dot-2); }
.eq-gate        { fill: none; stroke: var(--eq-led-g); stroke-width: 1.4; stroke-dasharray: 4 3; }
.eq-drop        { fill: var(--eq-liq); opacity: .85; }
.eq-grid-bg     { fill: var(--eq-glass); opacity: .6; }
.eq-grid-l      { stroke: var(--eq-grid); stroke-width: .8; }
.eq-grid-l.thin { stroke-width: .4; opacity: .55; }
.eq-cover       { fill: var(--eq-cover); stroke: var(--eq-glass-line); stroke-width: .8; }
.eq-cover-edge  { fill: var(--eq-glass-line); opacity: .5; }
.eq-cell        { fill: var(--eq-cell); }
.eq-cell-layer  { fill: var(--eq-cell); opacity: .55; }
.eq-uv-lamp     { fill: var(--eq-uv-lamp); opacity: .8; }
.eq-lamp-tray   { fill: var(--eq-dark); }

/* ---- 其他 ---- */
.eq-cal-line    { stroke: var(--eq-led-r); stroke-width: 1.6; }
.eq-stirbar     { fill: var(--eq-metal); stroke: var(--eq-metal-3); stroke-width: .8; }
.eq-hole-liq    { fill: var(--eq-liq); opacity: .85; }
.eq-hi-soft     { fill: var(--eq-hi); opacity: .5; }
.eq-bubble-lvl  { fill: var(--eq-glass); stroke: var(--eq-metal-3); stroke-width: .8; }
.eq-bubble-lvl-in { fill: var(--eq-led-g); opacity: .8; }
.eq-glass-front { fill: var(--eq-glass); opacity: .26; }
.eq-arm         { transition: transform .4s cubic-bezier(.34,1.3,.64,1); }
.eq-arm.is-open { transform: rotate(-34deg); }

/* ---- 动画 ---- */
@keyframes eq-rise {
  0%   { transform: translateY(0); opacity: 0; }
  25%  { opacity: .7; }
  100% { transform: translateY(-56px); opacity: 0; }
}
@keyframes eq-air {
  0%   { transform: translateY(6px); opacity: 0; }
  30%  { opacity: .7; }
  100% { transform: translateY(-18px); opacity: 0; }
}
@keyframes eq-mist {
  0%   { transform: translateY(0) scale(.7); opacity: 0; }
  25%  { opacity: .55; }
  100% { transform: translateY(-40px) scale(1.5); opacity: 0; }
}
@keyframes eq-shake {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(1.6px, -1.2px); }
  50%      { transform: translate(-1.4px, 1px); }
  75%      { transform: translate(1px, 1.4px); }
}
.eq-rubber.is-shake, .eq-rubber-ring.is-shake { animation: eq-shake .11s linear infinite; }
.eq-stirbar.is-spin { animation: eq-spin 1.6s linear infinite; }

/* ---- 各器材根容器（统一成块级，尺寸由外部 CSS 决定） ---- */
.eq-tube, .eq-rack, .eq-reagent, .eq-plate, .eq-gel,
.eq-centrifuge, .eq-pipette, .eq-pcr, .eq-microfuge, .eq-multipipette, .eq-bottletop,
.eq-cylinder, .eq-vortex, .eq-stirrer, .eq-sonicator, .eq-qpcr, .eq-waterbath,
.eq-heatblock, .eq-shaker, .eq-incubator, .eq-oven, .eq-powersupply, .eq-vertgel,
.eq-blotter, .eq-microscope, .eq-flowcyto, .eq-platereader, .eq-nanodrop,
.eq-geldoc, .eq-hemo, .eq-biosafety, .eq-cflask, .eq-dish, .eq-freezer,
.eq-fridge, .eq-ln2, .eq-balance, .eq-phmeter, .eq-flask3, .eq-beaker, .eq-volumetric {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .eq-mist, .eq-heat-dot, .eq-air, .eq-rubber.is-shake, .eq-rubber-ring.is-shake,
  .eq-stirbar.is-spin { animation: none; }
  .eq-arm { transition: none; }
}

/* =========================================================
 * 器材库再扩充段（45 件 → 87 件）
 *   病理制片 / 动物实验 / 显微成像 / 检测读数 / 通用设备 / 零散补充
 * 新增变量：刀片 / 石蜡 / 磁铁磁珠 / 激光 / 碱基 / 小鼠 / 轨迹 / 染色
 * ========================================================= */
:root {
  --eq-blade: #e4eaf2;      --eq-blade-2: #b6c2d0;
  --eq-paraffin: #f2e8d5;   --eq-wax: #e6d9bc;      --eq-xylene: #d2e2f0;
  --eq-magnet: #939dab;     --eq-beads: #7a5230;
  --eq-mouse: #d9d0c5;      --eq-mouse-ear: #e6b3ae;
  --eq-track: #f97316;      --eq-curve: #0d9488;
  --eq-laser-0: #7c3aed;    --eq-laser-1: #2563eb;
  --eq-laser-2: #16a34a;    --eq-laser-3: #dc2626;
  --eq-signal-1: #0ea5e9;   --eq-signal-2: #f59e0b;  --eq-signal-3: #dc2626;
  --eq-stain-n: #6d5bd0;    --eq-stain-e: #ec6a8a;
  --eq-base-0: #16a34a;     --eq-base-1: #dc2626;
  --eq-base-2: #2563eb;     --eq-base-3: #d97706;
  --eq-reagent-0: #6aa9e0;  --eq-reagent-1: #16a34a;
  --eq-reagent-2: #dc2626;  --eq-reagent-3: #d97706;
  --eq-arc: #818cf8;        --eq-bluepad: #2563eb;
  --eq-vent: #8b96a5;       --eq-waste: #c9a227;
  --eq-label: #ffffff;
}
[data-theme="dark"] {
  --eq-blade: #4a5c72;      --eq-blade-2: #38465a;
  --eq-paraffin: #3d3a30;   --eq-wax: #38352c;      --eq-xylene: #2f4356;
  --eq-magnet: #5a6473;     --eq-beads: #4a3520;
  --eq-mouse: #6b6259;      --eq-mouse-ear: #a8706c;
  --eq-track: #fb923c;      --eq-curve: #2dd4bf;
  --eq-laser-0: #a78bfa;    --eq-laser-1: #60a5fa;
  --eq-laser-2: #4ade80;    --eq-laser-3: #f87171;
  --eq-signal-1: #38bdf8;   --eq-signal-2: #fbbf24;  --eq-signal-3: #f87171;
  --eq-stain-n: #a78bfa;    --eq-stain-e: #f9a8c0;
  --eq-base-0: #4ade80;     --eq-base-1: #f87171;
  --eq-base-2: #60a5fa;     --eq-base-3: #fbbf24;
  --eq-reagent-0: #3f7fbe;  --eq-reagent-1: #4ade80;
  --eq-reagent-2: #f87171;  --eq-reagent-3: #fbbf24;
  --eq-arc: #c7d2fe;        --eq-bluepad: #1d4ed8;
  --eq-vent: #55677e;       --eq-waste: #b45309;
  --eq-label: #101820;
}

/* ---- 刻线加长（mj 修饰） ---- */
.eq-tick.mj { stroke-width: 1.6; }

/* ---- 状态修饰 ---- */
.eq-band.is-uv       { fill: var(--eq-uv-band); }
.eq-glass.is-active  { stroke: var(--primary); stroke-width: 1.8; }

/* ---- 按钮加大 ---- */
.eq-btn.big { fill: var(--eq-metal-2); stroke: var(--eq-metal-3); stroke-width: 1.2; }

/* ---- 病理制片 ---- */
.eq-wheel        { fill: var(--eq-metal); stroke: var(--eq-metal-3); stroke-width: 1.2; }
.eq-blade        { fill: var(--eq-blade); stroke: var(--eq-blade-2); stroke-width: 1; }
.eq-paraffin     { fill: var(--eq-paraffin); stroke: var(--eq-glass-line); stroke-width: .8; }
.eq-wax          { fill: var(--eq-wax); stroke: var(--eq-glass-line); stroke-width: .8; }
.eq-ribbon       { fill: none; stroke: var(--eq-paraffin); stroke-width: 2.4; stroke-dasharray: 7 2; }
.eq-frozen       { fill: var(--eq-ice); stroke: var(--eq-frost); stroke-width: .9; }
.eq-hotplate     { fill: var(--eq-metal-2); stroke: var(--eq-metal-3); stroke-width: 1; }
.eq-float        { fill: var(--eq-water); opacity: .55; }
.eq-tissue       { fill: var(--eq-stain-e); stroke: var(--eq-stain-n); stroke-width: .8; opacity: .9; }
.eq-reagent-liq  { fill: var(--eq-reagent-0); opacity: .75; }
.eq-reagent-liq.xylene { fill: var(--eq-xylene); opacity: .8; }
.eq-reagent-liq.wax    { fill: var(--eq-wax); opacity: .85; }
.eq-stain        { fill: var(--eq-stain-n); opacity: .8; }
.eq-stain.c0     { fill: var(--eq-stain-n); }
.eq-stain.c1     { fill: var(--eq-stain-e); }
.eq-stain.c2     { fill: var(--eq-metal-3); opacity: .55; }
.eq-antibody     { fill: var(--eq-led-g); opacity: .85; }
.eq-drop-wax     { fill: var(--eq-wax); opacity: .9; }

/* ---- 动物实验 ---- */
.eq-arena        { fill: var(--eq-shell); stroke: var(--eq-shell-2); stroke-width: 1.2; }
.eq-arena-floor  { fill: var(--eq-glass); stroke: var(--eq-glass-line); stroke-width: .8; }
.eq-track        { fill: none; stroke: var(--eq-track); stroke-width: 1.8; stroke-linecap: round; opacity: .85; }
.eq-mouse        { }
.eq-mouse-body   { fill: var(--eq-mouse); stroke: var(--eq-metal-3); stroke-width: .8; }
.eq-mouse-tail   { fill: none; stroke: var(--eq-mouse-ear); stroke-width: 1.8; stroke-linecap: round; }
.eq-mouse-ear    { fill: var(--eq-mouse-ear); stroke: var(--eq-metal-3); stroke-width: .6; }
.eq-mouse-eye    { fill: var(--eq-dark); }
.eq-anesthesia   { fill: var(--eq-shell); stroke: var(--eq-shell-2); stroke-width: 1; }
.eq-caliper      { }
.eq-cagerack     { }
.eq-cage         { fill: var(--eq-glass); stroke: var(--eq-glass-line); stroke-width: 1; }
.eq-cage-bed     { fill: var(--eq-paper); stroke: var(--eq-glass-line); stroke-width: .8; }

/* ---- 显微与成像 ---- */
.eq-inverted     { }
.eq-confocal     { }
.eq-facs         { }
.eq-ivis         { }
.eq-tem          { }
.eq-highcontent  { }
.eq-livecell     { }
.eq-laser        { fill: var(--eq-laser-1); opacity: .85; }
.eq-laser.c0     { fill: var(--eq-laser-0); }
.eq-laser.c1     { fill: var(--eq-laser-1); }
.eq-laser.c2     { fill: var(--eq-laser-2); }
.eq-laser.c3     { fill: var(--eq-laser-3); }
.eq-laser-beam   { stroke: var(--eq-laser-1); stroke-width: 1.6; stroke-dasharray: 5 3; opacity: .8;
                   animation: eq-air 1.6s linear infinite; }
.eq-laser-tx     { fill: var(--text-3); font: 600 8px var(--mono); }
.eq-droplet      { fill: var(--eq-liq); opacity: .9; }
.eq-droplet.is-fall { animation: eq-fall 1.4s ease-in infinite; }
.eq-signal       { fill: var(--eq-signal-1); opacity: .8; }
.eq-signal.s1    { fill: var(--eq-signal-1); }
.eq-signal.s2    { fill: var(--eq-signal-2); }
.eq-signal.s3    { fill: var(--eq-signal-3); }
.eq-hl-inner     { fill: var(--eq-cell); opacity: .5; }
.eq-curve        { fill: none; stroke: var(--eq-curve); stroke-width: 1.6; stroke-linecap: round; }

/* ---- 检测与读数 ---- */
.eq-spectro      { }
.eq-cuvette      { fill: var(--eq-glass); stroke: var(--eq-glass-line); stroke-width: 1; }
.eq-fluorometer  { }
.eq-bioanalyzer  { }
.eq-chip         { fill: var(--eq-glass); stroke: var(--eq-glass-line); stroke-width: 1; }
.eq-chip-well    { fill: var(--eq-hole); }
.eq-autocounter  { }
.eq-platewasher  { }
.eq-waste        { fill: var(--eq-waste); opacity: .55; }
.eq-luminometer  { }
.eq-sequencer    { }
.eq-base         { fill: var(--eq-base-2); }
.eq-base.c0      { fill: var(--eq-base-0); }
.eq-base.c1      { fill: var(--eq-base-1); }
.eq-base.c2      { fill: var(--eq-base-2); }
.eq-base.c3      { fill: var(--eq-base-3); }
.eq-reagent-vial { fill: var(--eq-reagent-0); opacity: .85; }
.eq-reagent-vial.c0 { fill: var(--eq-reagent-0); }
.eq-reagent-vial.c1 { fill: var(--eq-reagent-1); }
.eq-reagent-vial.c2 { fill: var(--eq-reagent-2); }
.eq-reagent-vial.c3 { fill: var(--eq-reagent-3); }
.eq-singlecell   { }
.eq-microchannel { fill: var(--eq-liq); opacity: .5; }
.eq-droplet-emul { fill: var(--eq-liq); opacity: .7; stroke: var(--eq-liq-top); stroke-width: .6; }

/* ---- 通用设备与安全 ---- */
.eq-cleanbench   { }
.eq-air-down     { stroke: var(--eq-led-b); stroke-width: 1.5; stroke-dasharray: 3 4; opacity: .55;
                   animation: eq-air 1.7s linear infinite; }
.eq-fumehood     { }
.eq-air-up       { stroke: var(--eq-led-g); stroke-width: 1.5; stroke-dasharray: 3 4; opacity: .5;
                   animation: eq-rise 2.2s linear infinite; }
.eq-vent         { fill: var(--eq-vent); opacity: .6; }
.eq-autoclave    { }
.eq-steam        { fill: var(--eq-frost); opacity: .5; animation: eq-rise 2.6s ease-out infinite; }
.eq-icemachine   { }
.eq-ice-pile     { fill: var(--eq-ice); stroke: var(--eq-frost); stroke-width: .8; }
.eq-waterpurifier{ }
.eq-bluecutter   { }
.eq-bluepad      { fill: var(--eq-bluepad); opacity: .35; }
.eq-electroporator { }
.eq-arc          { fill: none; stroke: var(--eq-arc); stroke-width: 2; stroke-linecap: round;
                   animation: eq-fall .5s ease-in-out infinite alternate; }

/* ---- 零散补充 ---- */
.eq-transwell    { }
.eq-pipetteaid   { }
.eq-magnetrack   { }
.eq-magnet       { fill: var(--eq-magnet); stroke: var(--eq-metal-3); stroke-width: .9; }
.eq-beads        { fill: var(--eq-beads); opacity: .9; }
.eq-rotator      { }
.eq-focusedsonic { }
.eq-sound        { fill: none; stroke: var(--eq-led-b); stroke-width: 1.4; opacity: 0; }
.eq-sound.is-on  { opacity: .6; animation: eq-air 1.2s linear infinite; }
.eq-thermalinc   { }
.eq-anaerobic    { }
.eq-rollerdrum   { }

/* ---- 共用小件（本轮新增引用） ---- */
.eq-label        { fill: var(--eq-label); font: 600 8px var(--font); }
.eq-screen-u     { fill: var(--eq-screen-tx); font: 700 12px var(--mono); }
.eq-hinge        { fill: var(--eq-metal-3); opacity: .7; }
.eq-hole-tube    { fill: var(--eq-hole); }
.eq-bottle       { fill: var(--eq-glass); stroke: var(--eq-glass-line); stroke-width: 1; }
.eq-bottle-liq   { fill: var(--eq-liq); opacity: .8; }
.eq-lid-glass    { fill: var(--eq-glass); opacity: .5; stroke: var(--eq-glass-line); stroke-width: 1; }
.eq-lid-plate    { fill: var(--eq-steel-2); stroke: var(--eq-metal-2); stroke-width: 1; }
.eq-plate-body   { fill: var(--eq-shell); stroke: var(--eq-shell-2); stroke-width: 1; }
.eq-rack-body    { fill: var(--eq-metal-2); stroke: var(--eq-metal-3); stroke-width: 1; }
.eq-foot         { fill: var(--eq-rubber); }

/* ---- 新动画 ---- */
@keyframes eq-fall {
  0%   { transform: translateY(0); opacity: 0; }
  20%  { opacity: .9; }
  100% { transform: translateY(22px); opacity: 0; }
}

/* ---- 根容器（新增 42 件） ---- */
.eq-tissueprocessor, .eq-embedding, .eq-microtome, .eq-floatingbath, .eq-cryostat,
.eq-stainingrack, .eq-retrieval, .eq-humidbox, .eq-arena, .eq-anesthesia, .eq-caliper,
.eq-cagerack, .eq-inverted, .eq-confocal, .eq-facs, .eq-ivis, .eq-tem, .eq-highcontent,
.eq-livecell, .eq-spectro, .eq-fluorometer, .eq-bioanalyzer, .eq-autocounter,
.eq-platewasher, .eq-luminometer, .eq-sequencer, .eq-singlecell, .eq-cleanbench,
.eq-fumehood, .eq-autoclave, .eq-icemachine, .eq-waterpurifier, .eq-bluecutter,
.eq-electroporator, .eq-transwell, .eq-pipetteaid, .eq-magnetrack, .eq-rotator,
.eq-focusedsonic, .eq-thermalinc, .eq-anaerobic, .eq-rollerdrum {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .eq-air-down, .eq-air-up, .eq-steam, .eq-sound.is-on,
  .eq-droplet.is-fall, .eq-arc, .eq-laser-beam { animation: none; }
}

/* =========================================================
 * 实验器材专题（主站第 6 个板块）
 *   器材总览页（.eqc-*） + 单件器材详情页（.eqd-*）
 *   配色：板块主色走 --fa（由器材族决定，逐块内联）
 * ========================================================= */

/* ---------- 器材总览：族导航 ---------- */
.eqc-nav {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 20px 22px; margin-bottom: 24px;
}
.eqc-nav-head { font-size: 13.5px; color: var(--text-2); margin-bottom: 14px; }
.eqc-nav-head b { font-family: var(--mono); font-size: 16px; color: var(--primary); }
.eqc-nav-note { display: block; font-size: 12px; color: var(--text-3); margin-top: 5px; }
.eqc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.eqc-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px 7px 9px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface-2);
  font-size: 12.5px; color: var(--text-2); transition: all .16s;
  border-left: 3px solid var(--fa);
}
.eqc-chip:hover {
  text-decoration: none; color: var(--fa); border-color: var(--fa);
  background: var(--surface); transform: translateY(-1px); box-shadow: var(--shadow-sm);
}
.eqc-chip-ic {
  width: 20px; height: 20px; border-radius: 6px; flex: none;
  display: grid; place-items: center; font-size: 11px;
  background: color-mix(in srgb, var(--fa) 14%, transparent);
  color: var(--fa);
}
.eqc-chip i {
  font-family: var(--mono); font-style: normal; font-size: 11px;
  color: var(--text-3); margin-left: 2px;
}

/* ---------- 器材总览：族分区 ---------- */
.eqc-sec { margin-bottom: 34px; scroll-margin-top: calc(var(--topbar-h) + 16px); }
.eqc-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 0 0 12px; border-bottom: 2px solid var(--fa); margin-bottom: 18px;
}
.eqc-num { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--fa); }
.eqc-ic {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  display: grid; place-items: center; font-size: 14px; font-weight: 700;
  background: color-mix(in srgb, var(--fa) 14%, transparent); color: var(--fa);
}
.eqc-hx { flex: 1; min-width: 180px; }
.eqc-hx h2 { font-size: 19px; letter-spacing: -.2px; }
.eqc-hx p { font-size: 12.5px; color: var(--text-3); margin-top: 3px; }
.eqc-cnt {
  font-family: var(--mono); font-size: 12px; color: var(--fa);
  background: color-mix(in srgb, var(--fa) 12%, transparent);
  padding: 4px 10px; border-radius: 999px;
}

/* ---------- 器材卡片 ---------- */
.eqc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(226px, 1fr)); gap: 14px; }
.eqc-grid-sm { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.eqc {
  display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; transition: transform .18s, box-shadow .18s, border-color .18s;
}
.eqc:hover {
  text-decoration: none; transform: translateY(-3px);
  box-shadow: var(--shadow-lg); border-color: var(--fa, var(--primary));
}
.eqc-fig {
  height: 150px; padding: 12px 10px 8px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background:
    linear-gradient(var(--border) 1px, transparent 1px) 0 0 / 100% 24px,
    linear-gradient(90deg, var(--border) 1px, transparent 1px) 0 0 / 24px 100%,
    var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.eqc-fig svg { width: 100%; height: 100%; display: block; }
.eqc-body { padding: 12px 14px 13px; display: flex; flex-direction: column; flex: 1; }
.eqc-top { display: flex; align-items: baseline; gap: 8px; justify-content: space-between; }
.eqc-top h4 { font-size: 14px; color: var(--text); }
.eqc-tag {
  font-family: var(--mono); font-size: 10.5px; color: var(--text-3);
  background: var(--surface-3); padding: 2px 6px; border-radius: 5px;
  white-space: nowrap; flex: none;
}
.eqc-en { font-size: 10.5px; color: var(--text-3); margin-top: 3px; letter-spacing: .2px; }
.eqc-use { font-size: 12px; color: var(--text-2); line-height: 1.62; margin-top: 8px; flex: 1; }
.eqc-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 11px; padding-top: 9px; border-top: 1px dashed var(--border);
}
.eqc-tech { font-size: 11px; color: var(--text-3); }
.eqc-go { font-size: 11.5px; font-weight: 600; color: var(--fa, var(--primary)); white-space: nowrap; }
.eqc-empty { color: var(--text-3); }

/* ---------- 器材详情页 ---------- */
.eqd-head {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 24px 26px 22px; margin-bottom: 20px;
  border-top: 4px solid var(--fa);
}
.eqd-kicker { font-size: 11.5px; font-weight: 700; letter-spacing: .6px; color: var(--fa); display: flex; align-items: center; gap: 7px; }
.eqd-kicker span {
  width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--fa) 15%, transparent); font-size: 12px;
}
.eqd-h1 { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.eqd-h1 h1 { font-size: 27px; letter-spacing: -.4px; }
.eqd-tag {
  font-family: var(--mono); font-size: 12px; color: var(--fa);
  background: color-mix(in srgb, var(--fa) 12%, transparent);
  padding: 3px 9px; border-radius: 6px;
}
.eqd-en { font-size: 12.5px; color: var(--text-3); margin-top: 5px; }
.eqd-use { font-size: 14px; color: var(--text-2); margin-top: 12px; line-height: 1.7; }
.eqd-meta {
  display: flex; flex-wrap: wrap; gap: 18px; margin-top: 15px;
  padding-top: 14px; border-top: 1px solid var(--border);
  font-size: 12.5px; color: var(--text-3);
}
.eqd-meta b { font-family: var(--mono); font-size: 15px; color: var(--fa); margin: 0 2px; }

.eqd-cols { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 20px; align-items: start; }

.eqd-figbox {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px 22px 16px;
}
.eqd-fig {
  height: 400px; display: flex; align-items: center; justify-content: center;
  background:
    linear-gradient(var(--border) 1px, transparent 1px) 0 0 / 100% 32px,
    linear-gradient(90deg, var(--border) 1px, transparent 1px) 0 0 / 32px 100%,
    var(--surface-2);
  border-radius: 10px; padding: 16px;
}
.eqd-fig svg { width: 100%; height: 100%; display: block; }
.eqd-cap { font-size: 11.5px; color: var(--text-3); margin-top: 11px; text-align: center; }
.eqd-states { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; justify-content: center; }
.eqs {
  font: inherit; font-size: 12px; cursor: pointer;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2);
  transition: all .15s;
}
.eqs:hover { border-color: var(--fa); color: var(--fa); }
.eqs.on {
  background: var(--fa); border-color: var(--fa); color: #fff; font-weight: 600;
}
[data-theme="dark"] .eqs.on { color: #0b1220; }

.eqd-rail .panel { padding: 16px 18px 18px; }
.eqd-spec { width: 100%; border-collapse: collapse; }
.eqd-spec tr { border-bottom: 1px dashed var(--border); }
.eqd-spec tr:last-child { border-bottom: none; }
.eqd-spec th {
  text-align: left; font-size: 12px; font-weight: 500; color: var(--text-3);
  padding: 8px 10px 8px 0; vertical-align: top; white-space: nowrap;
}
.eqd-spec td { font-size: 12.5px; color: var(--text); padding: 8px 0; line-height: 1.6; }

.eqd-tech { list-style: none; }
.eqd-tech li { border-bottom: 1px dashed var(--border); }
.eqd-tech li:last-child { border-bottom: none; }
.eqd-tech a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 8px 0; font-size: 12.5px; color: var(--text-2);
}
.eqd-tech a:hover { text-decoration: none; color: var(--primary); }
.eqd-tech a:hover .et-name { color: var(--primary); }
.et-name { font-weight: 500; }
.et-grp { font-size: 10.5px; color: var(--text-3); white-space: nowrap; flex: none; }

.eqd-blocks { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 16px; margin-top: 20px; }
.eqd-blocks section {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 17px 19px 19px;
  border-left: 4px solid var(--border-strong);
}
.eqd-bh { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; margin-bottom: 10px; }
.eqd-bh span { font-size: 12px; }
.eqd-blocks p { font-size: 13px; color: var(--text-2); line-height: 1.82; }
.eqd-why { border-left-color: var(--fa) !important; background: color-mix(in srgb, var(--fa) 5%, var(--surface)) !important; }
.eqd-why .eqd-bh { color: var(--fa); }
.eqd-pick { border-left-color: var(--accent) !important; }
.eqd-pick .eqd-bh { color: var(--accent); }
.eqd-miss { border-left-color: var(--warn) !important; background: color-mix(in srgb, var(--warn) 5%, var(--surface)) !important; }
.eqd-miss .eqd-bh { color: var(--warn); }

.eqd-sib { margin-top: 30px; }
.eqd-sh { display: flex; align-items: baseline; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.eqd-sh h2 { font-size: 16px; }
.eqd-sh span { font-family: var(--mono); font-size: 12px; color: var(--text-3); }

/* ---------- 窄屏 ---------- */
@media (max-width: 1080px) {
  .eqd-cols { grid-template-columns: 1fr; }
  .eqd-fig { height: 330px; }
}
@media (max-width: 640px) {
  .eqc-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .eqc-fig { height: 122px; }
  .eqd-fig { height: 260px; }
  .eqd-h1 h1 { font-size: 22px; }
  .eqd-head { padding: 20px 18px; }
}

/* ---------- 技术页底部：这一项技术要用到哪些器材 ---------- */
.tech-eq {
  margin-top: 30px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 20px 22px 22px;
  border-top: 3px solid var(--accent);
}
.tech-eq-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 15px;
}
.tech-eq-head h2 { font-size: 16px; }
.teq-cnt { font-size: 12px; color: var(--text-3); }
.tech-eq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 11px; }
.teq {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 10px 8px 9px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface-2); transition: all .16s; text-align: center;
}
.teq:hover {
  text-decoration: none; transform: translateY(-2px); border-color: var(--accent);
  background: var(--surface); box-shadow: var(--shadow);
}
.teq-fig {
  height: 74px; width: 100%; display: flex; align-items: center; justify-content: center;
}
.teq-fig svg { width: 100%; height: 100%; display: block; }
.teq-b { display: flex; flex-direction: column; gap: 2px; }
.teq-b b { font-size: 12px; color: var(--text); line-height: 1.4; }
.teq-b i { font-size: 10px; font-style: normal; color: var(--text-3); }

/* ---------- 示例实验页：动手前把台面备齐（要用到哪些器材） ---------- */
.ex-eq-lead {
  font-size: 13.5px; line-height: 1.85; color: var(--text-2);
  margin: 0 0 14px; max-width: 80ch;
}
.ex-eq-lead b { color: var(--text); }
.ex-eq-sum {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-size: 13px; color: var(--text-2);
  padding: 9px 13px; margin-bottom: 16px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px;
}
.ex-eq-sum b { color: var(--accent); font-size: 15px; }
.ex-eq-note { font-size: 11.5px; color: var(--text-3); }
.ex-eq-fam { margin-bottom: 18px; }
.ex-eq-fam:last-child { margin-bottom: 0; }
.ex-eq-fh {
  display: flex; align-items: center; gap: 8px; margin-bottom: 9px;
  padding-left: 9px; border-left: 3px solid var(--fa);
}
.ex-eq-fi { font-size: 14px; }
.ex-eq-fh b { font-size: 13.5px; color: var(--text); }
.ex-eq-fc {
  font-size: 11px; color: var(--text-3);
  padding: 1px 7px; border-radius: 20px;
  background: var(--surface-2); border: 1px solid var(--border);
}
/* 器材卡在示例页里悬停时跟着「族色」走，而不是板块主色 */
.ex-eq-fam .teq:hover { border-color: var(--fa); }
/* 卡片副标题从「族名」换成了「一句用途」，会长一些，限两行 */
.ex-eq-fam .teq-b i {
  font-size: 11px; line-height: 1.45; color: var(--text-3);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (max-width: 640px) {
  .ex-eq-sum { font-size: 12px; }
  .ex-eq-note { display: none; }
}

/* =========================================================
 * 分步操作台（#/do/<示例id>）
 * 三栏：左步骤条 / 中台面 / 右记录本
 * 和「实验工作台.html」的独立页是同一套交互语言（ok / warn / bad 三色判读），
 * 但这里的数据是数据驱动的（do-lab.js），加一台操作台不用改这个文件。
 * ========================================================= */
.do-head {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 26px 28px 22px; margin-bottom: 22px; position: relative; overflow: hidden;
  border-top: 3px solid var(--accent);
}
.do-kicker { font-size: 12px; letter-spacing: .06em; color: var(--accent); font-weight: 600; margin-bottom: 8px; }
.do-head h1 { font-size: 24px; line-height: 1.4; margin: 0 0 10px; }
.do-head-goal { font-size: 14px; line-height: 1.85; color: var(--text-2); margin: 0 0 16px; max-width: 76ch; }
.do-meta { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 16px; }
.do-meta span { font-size: 12.5px; color: var(--text-3); }
.do-meta b { font-size: 19px; color: var(--accent); margin-right: 3px; font-weight: 700; }
.do-switch { display: flex; gap: 8px; }
.do-sw {
  font-size: 13px; padding: 7px 15px; border-radius: 9px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2);
}
.do-sw:hover { text-decoration: none; border-color: var(--accent); color: var(--accent); }
.do-sw.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }

.do-shell {
  display: grid; grid-template-columns: 216px minmax(0, 1fr) 268px; gap: 20px; align-items: start;
}

/* ---- 左：步骤条 ---- */
.do-rail-wrap {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 15px 15px 17px; position: sticky; top: calc(var(--topbar-h) + 14px);
}
.do-rail-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-size: 11.5px; color: var(--text-3); letter-spacing: .04em; margin-bottom: 11px;
}
.do-rail-n { font-size: 11px; color: var(--ok); font-weight: 600; }
.do-rail { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.do-r {
  display: flex; gap: 9px; align-items: flex-start; padding: 8px 9px;
  border-radius: 9px; font-size: 12.5px; color: var(--text-3); line-height: 1.5;
  border-left: 2px solid transparent;
}
.do-rn {
  flex: none; width: 19px; height: 19px; border-radius: 50%; margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 700; background: var(--surface-3); color: var(--text-3);
}
.do-r.is-cur { background: var(--accent-soft); color: var(--text); border-left-color: var(--accent); font-weight: 600; }
.do-r.is-cur .do-rn { background: var(--accent); color: var(--on-accent); }
.do-r.is-done { color: var(--text-2); }
.do-r.is-done .do-rn { background: var(--ok); color: var(--on-ok); }
/* 已完成的步骤条可点回看 —— 给一点「可点」的暗示，但别抢当前步的视觉重量 */
.do-r.is-jump { cursor: pointer; transition: background .14s, color .14s; }
.do-r.is-jump:hover { background: var(--surface-2); color: var(--text); }
.do-r.is-jump:hover .do-rt { text-decoration: underline; text-underline-offset: 2px; }
.do-rt { flex: 1 1 auto; min-width: 0; }

/* ---- 中：台面 + 当前步 ---- */
.do-main { min-width: 0; }
.do-step {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 22px 24px 24px;
}
.do-sh { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.do-sn { font-size: 11.5px; color: var(--accent); font-weight: 600; letter-spacing: .05em; }
.do-sh h2 { font-size: 18px; margin: 0; line-height: 1.45; }
.do-goal { font-size: 13.5px; line-height: 1.8; color: var(--text-2); margin: 0 0 18px; }

.do-bench-wrap { margin-bottom: 18px; }
.do-bench-lb { font-size: 11.5px; color: var(--text-3); margin-bottom: 9px; }
.do-bench {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px;
  padding: 14px; border-radius: var(--radius);
  background: linear-gradient(180deg, transparent 64%, var(--surface-3) 64%);
  border: 1px solid var(--border);
}
.do-eq {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 8px 6px 7px; border-radius: 10px; background: var(--surface);
  border: 1px solid var(--border); text-align: center; transition: all .16s;
}
.do-eq:hover { text-decoration: none; transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow-sm); }
.do-eq-fig { height: 62px; width: 100%; display: flex; align-items: center; justify-content: center; }
.do-eq-fig svg { width: 100%; height: 100%; display: block; }
.do-eq b { font-size: 11px; font-weight: 500; color: var(--text-2); line-height: 1.35; }
.do-eq.is-pickable { cursor: pointer; position: relative; font: inherit; }
.do-eq.is-pickable:hover { border-color: var(--accent); }
.do-eq.is-on { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent-soft); }
.do-eq.is-on b { color: var(--text); font-weight: 600; }
.do-eq-ck {
  position: absolute; top: 5px; right: 6px; width: 17px; height: 17px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 10px; font-style: normal;
  background: var(--surface-3); color: var(--text-3); border: 1px solid var(--border);
}
.do-eq.is-on .do-eq-ck { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.do-figwrap { margin-bottom: 18px; }
.do-fig-lb { font-size: 11.5px; color: var(--text-3); margin-bottom: 8px; }

.do-q {
  font-size: 14.5px; line-height: 1.85; color: var(--text);
  padding: 13px 16px; border-radius: var(--radius);
  background: var(--surface-2); border-left: 3px solid var(--accent); margin-bottom: 16px;
}

/* 选项 */
.do-opts { display: flex; flex-direction: column; gap: 9px; margin-bottom: 16px; }
.do-opt {
  display: flex; gap: 11px; align-items: flex-start; text-align: left; cursor: pointer;
  padding: 12px 15px; border-radius: var(--radius); font: inherit; font-size: 13.5px;
  line-height: 1.7; color: var(--text); background: var(--surface-2);
  border: 1px solid var(--border); transition: all .16s;
}
.do-opt:hover:not(:disabled) { border-color: var(--accent); background: var(--surface); transform: translateX(2px); }
.do-opt i {
  flex: none; width: 21px; height: 21px; border-radius: 6px; font-style: normal;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; background: var(--surface-3); color: var(--text-3);
}
.do-opt.is-ok { border-color: var(--ok); background: var(--ok-soft); }
.do-opt.is-ok i { background: var(--ok); color: var(--on-ok); }
.do-opt.is-bad { border-color: #b91c1c; background: #fdecec; }
.do-opt.is-bad i { background: #b91c1c; color: #fff; }
[data-theme="dark"] .do-opt.is-bad { background: #3a1d1d; }
.do-opt.is-locked { cursor: default; opacity: .95; }
.do-opt:disabled { cursor: default; }

/* 滑杆 */
.do-param { margin-bottom: 16px; }
.do-pv { display: flex; align-items: baseline; gap: 5px; margin-bottom: 10px; }
.do-pv b { font-size: 30px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.do-pv span { font-size: 14px; color: var(--text-3); }
.do-param input[type="range"] { width: 100%; accent-color: var(--accent); height: 26px; cursor: pointer; }
.do-scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-3); }

/* 加样顺序 */
.do-seq { display: flex; flex-direction: column; gap: 13px; margin-bottom: 16px; }
.do-seq-row { display: flex; flex-direction: column; gap: 7px; }
.do-seq-lb { font-size: 11.5px; color: var(--text-3); }
.do-seq-slots { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.do-slot {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px;
  padding: 6px 11px 6px 7px; border-radius: 8px; background: var(--accent-soft);
  border: 1px solid var(--accent); color: var(--text);
}
.do-slot i {
  width: 17px; height: 17px; border-radius: 50%; font-style: normal; font-size: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--on-accent); font-weight: 700;
}
.do-slot.empty { background: var(--surface-2); border-color: var(--border); border-style: dashed; color: var(--text-3); padding: 6px 12px; }
.do-seq-pool { display: flex; flex-wrap: wrap; gap: 7px; }
.do-chip {
  font: inherit; font-size: 12.5px; padding: 7px 13px; border-radius: 8px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--text);
  transition: all .14s;
}
.do-chip:hover { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-1px); }

/* 认器材 */
.do-pickbar {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  padding: 11px 14px; border-radius: var(--radius); background: var(--surface-2);
  border: 1px solid var(--border); margin-bottom: 16px; font-size: 13px; color: var(--text-2);
}
.do-pickbar b { color: var(--accent); font-size: 16px; }
.do-pick-hint { font-size: 11.5px; color: var(--text-3); }
.do-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.do-confirm, .do-clear, .do-retry, .do-next, .do-again {
  font: inherit; font-size: 13px; padding: 8px 17px; border-radius: 9px; cursor: pointer;
  border: 1px solid transparent; transition: all .15s;
}
.do-confirm { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.do-confirm:hover { filter: brightness(1.08); }
.do-clear, .do-retry { background: var(--surface); border-color: var(--border-strong); color: var(--text-2); }
.do-clear:hover, .do-retry:hover { border-color: var(--accent); color: var(--accent); }

/* 判读区 */
.do-msg {
  font-size: 13.5px; line-height: 1.85; padding: 14px 17px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2);
}
.do-msg b { display: block; margin-bottom: 5px; font-size: 13.5px; }
.do-msg.is-idle { color: var(--text-3); border-style: dashed; }
.do-msg.m-ok { background: var(--ok-soft); border-color: var(--ok); color: var(--text); }
.do-msg.m-ok b { color: var(--ok); }
.do-msg.m-warn { background: var(--warn-soft); border-color: var(--warn); color: var(--text); }
.do-msg.m-warn b { color: var(--warn); }
/* 「错误」这一档原来把浅色底 #fdecec 与深色底 #3a1d1d 分别写死在两处，
   字色却共用 var(--text) —— 深色主题下靠一条 `[data-theme="dark"]` 覆盖把底压回去，
   但**边框和加粗字仍写死 #b91c1c**（深红配深红底，几乎看不见）。
   现在统一走 --bad / --bad-soft 两个变量，两套主题各自定义一次。 */
.do-msg.m-bad { background: var(--bad-soft); border-color: var(--bad); color: var(--text); }
.do-msg.m-bad b { color: var(--bad); }
.do-pk { display: block; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); }
.do-pk b { display: block; margin-bottom: 2px; }

.do-why, .do-trap {
  margin-top: 13px; padding: 13px 16px; border-radius: var(--radius);
  font-size: 13px; line-height: 1.85; border: 1px solid var(--border);
}
.do-why { background: var(--surface-2); }
.do-trap { background: var(--warn-soft); border-color: var(--warn); }
.do-why > b, .do-trap > b { display: block; font-size: 11.5px; letter-spacing: .04em; margin-bottom: 6px; }
.do-why > b { color: var(--accent); }
.do-trap > b { color: var(--warn); }
.do-why p, .do-trap p { margin: 0; color: var(--text-2); }

.do-actions { display: flex; gap: 10px; align-items: center; margin-top: 18px; flex-wrap: wrap; }
.do-next { background: var(--accent); color: var(--on-accent); font-weight: 600; padding: 10px 22px; }
.do-next:hover:not(:disabled) { filter: brightness(1.08); }
.do-next:disabled { background: var(--surface-3); color: var(--text-3); border-color: var(--border); cursor: not-allowed; font-weight: 500; }
/* 回退按钮：低调一点，别跟「下一步」抢注意力 —— 但要有，不能让人回不去 */
.do-prev, .do-front {
  background: var(--surface); border-color: var(--border-strong); color: var(--text-2);
  font-weight: 500;
}
.do-prev:hover, .do-front:hover { border-color: var(--accent); color: var(--accent); }
.do-front { margin-left: auto; }

/* ---- 右：记录本 ---- */
.do-log {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 16px 16px 18px; position: sticky; top: calc(var(--topbar-h) + 14px);
}
.do-log-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-size: 12px; font-weight: 600; color: var(--text); letter-spacing: .04em;
  padding-bottom: 9px; margin-bottom: 11px; border-bottom: 1px solid var(--border);
}
.do-log-n { font-size: 11px; color: var(--ok); font-weight: 600; }
.do-log-empty { font-size: 12.5px; line-height: 1.8; color: var(--text-3); margin: 0; }
.do-log-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.do-log-list li { display: flex; gap: 9px; font-size: 12.5px; line-height: 1.7; color: var(--text-2); }
.do-log-list li.is-jump {
  cursor: pointer; border-radius: 8px; padding: 5px 7px; margin: -5px -7px;
  transition: background .14s, color .14s;
}
.do-log-list li.is-jump:hover { background: var(--surface-2); color: var(--text); }
.do-log-list i {
  flex: none; width: 18px; height: 18px; border-radius: 50%; font-style: normal; font-size: 10px;
  display: flex; align-items: center; justify-content: center; margin-top: 2px;
  background: var(--ok-soft); color: var(--ok); font-weight: 700;
}
.do-log-tip { font-size: 11px; color: var(--text-3); margin: 12px 0 0; text-align: center; }

/* ---- 完成页 ---- */
.do-fin { text-align: center; padding: 14px 6px 6px; }
.do-fin-ic {
  width: 54px; height: 54px; border-radius: 50%; margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; background: var(--ok-soft); color: var(--ok); border: 2px solid var(--ok);
}
.do-fin h2 { font-size: 21px; margin: 0 0 12px; }
.do-fin-lead { font-size: 13.5px; line-height: 1.9; color: var(--text-2); max-width: 60ch; margin: 0 auto 22px; }
.do-fin-lead b { color: var(--accent); font-size: 16px; }
.do-fin-grid { display: grid; gap: 8px; text-align: left; margin-bottom: 24px; }
.do-fin-i {
  display: flex; gap: 11px; align-items: flex-start; font-size: 13px; line-height: 1.7;
  padding: 11px 14px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-2);
}
.do-fin-i i {
  flex: none; width: 20px; height: 20px; border-radius: 6px; font-style: normal; font-size: 11px;
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
  background: var(--accent); color: var(--on-accent); font-weight: 700;
}
.do-fin-acts { display: flex; gap: 11px; justify-content: center; flex-wrap: wrap; }
.do-again { background: var(--surface); border-color: var(--border-strong); color: var(--text-2); }
.do-again:hover { border-color: var(--accent); color: var(--accent); }
.do-goread {
  font-size: 13px; padding: 8px 17px; border-radius: 9px;
  background: var(--accent); color: var(--on-accent); font-weight: 600;
}
.do-goread:hover { text-decoration: none; filter: brightness(1.08); }
.do-print {
  font: inherit; font-size: 13px; padding: 8px 17px; border-radius: 9px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border-strong); color: var(--text-2);
  transition: all .15s;
}
.do-print:hover { border-color: var(--accent); color: var(--accent); }
.do-fin-save { font-size: 11.5px; color: var(--text-3); margin: 16px 0 0; }

/* ---- 完成页的复盘块：这一台你做错过哪几步 ---- */
.do-fin-miss {
  text-align: left; margin: 0 0 20px; padding: 13px 16px 14px;
  border-radius: var(--radius); background: var(--warn-soft); border: 1px solid var(--warn);
}
.do-fin-miss.is-clean { background: var(--ok-soft); border-color: var(--ok); }
.do-fin-miss-h { font-size: 12.5px; font-weight: 600; color: var(--text); margin-bottom: 9px; }
.do-fin-miss-h b { color: var(--warn); font-size: 15px; }
.do-fin-miss.is-clean .do-fin-miss-h { color: var(--ok); }
.do-fin-miss-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
/* 每条错题 = 标题行（回看本步 + 跳主题页小节）+ 一行翻车点。
   方案 J 之前只有「回看本步」一种交互，看完还是不知道知识点在正文哪一节。 */
.do-miss {
  padding: 7px 9px; margin: 0 -9px; border-radius: 7px;
  font-size: 12.5px; line-height: 1.6; color: var(--text-2);
  transition: background .14s;
}
.do-miss:hover { background: var(--surface); }
.do-miss-hd { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.do-miss-go { display: inline-flex; gap: 8px; align-items: baseline; cursor: pointer; flex: 1 1 auto; min-width: 0; }
.do-miss-go:hover span { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.do-fin-miss-list i { flex: none; font-style: normal; font-size: 11px; color: var(--warn); font-weight: 700; }
.do-miss-link {
  flex: none; font-size: 11.5px; color: var(--accent); text-decoration: none;
  padding: 2px 9px; border-radius: 999px; background: var(--surface-2);
  border: 1px solid var(--border); white-space: nowrap;
}
.do-miss-link:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.do-miss-risk { margin: 5px 0 0; font-size: 12px; line-height: 1.65; color: var(--text-3); }
.do-miss-risk b { color: var(--warn); font-weight: 700; margin-right: 5px; }
.do-fin-miss-tip { margin: 11px 0 0; font-size: 11.5px; color: var(--text-3); }

/* ---- 键盘焦点可见性 ----
   键盘用户必须看得见自己在哪。:focus-visible 只在键盘导航时出现，鼠标点击不会闪一圈蓝框。 */
.do-r:focus-visible,
.do-log-list li:focus-visible,
.do-miss-go:focus-visible,
.do-miss-link:focus-visible,
.dg-card:focus-visible,
.dg-slot:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.dg-kb { color: var(--text-3); font-size: 11px; }
.do-meta-prog { color: var(--ok) !important; }
.do-meta-prog b { color: var(--ok); }

/* ---- 底部翻页 ---- */
.do-pager { display: flex; gap: 12px; justify-content: space-between; margin-top: 24px; }
.do-pager > a {
  flex: 1 1 0; min-width: 0; padding: 13px 16px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 3px;
}
.do-pager > a:hover { border-color: var(--accent); text-decoration: none; }
.do-pager > a.next { text-align: right; align-items: flex-end; }
.do-pager small { font-size: 11.5px; color: var(--text-3); }
.do-pager .t { font-size: 13.5px; color: var(--text); line-height: 1.5; }

/* ---- 入口（主题页第二张卡 / 示例页按钮）---- */
.ex-entry.do-entry { border-left-color: var(--accent); }
.ex-entry.do-entry .ee-ic { background: var(--accent-soft); }
.ex-dobtn {
  font-size: 12.5px; padding: 6px 13px; border-radius: 8px; font-weight: 600;
  background: var(--accent); color: var(--on-accent);
}
.ex-dobtn:hover { text-decoration: none; filter: brightness(1.08); }

/* ============================================================
   ---- 拖拽交互（操作台里 sort / drag 两种步骤）----
   sort：一列卡片，按住拖到目标位置换序
   drag：左边物品池 / 右边目标槽，把物品拖进正确的目标

   三条实现要点（改这段前先读）：
   ① 全程不调用 setPointerCapture。一旦捕获，pointermove / pointerup 的 target
      会被钉在被捕获的那个元素上，就拿不到「松手时指针下面压着哪个落点」了。
      不捕获时 target 天然就是指针下方的元素，落点判定直接 closest() 即可，
      不需要 getBoundingClientRect / elementFromPoint。
   ② 跟手位移只改 style.transform，悬停高亮只改 classList —— 都不重绘 DOM。
      一重绘，被拖的元素就被换掉，拖拽当场中断。
   ③ 拖拽与点选共用同一个 .is-hold（拿起）状态：点一下拿起、再点目标位置放下。
      所以触屏 / 没有鼠标的环境也能完整走完，也是自动化测试的主路径。
   ============================================================ */
.dg-wrap { margin-bottom: 16px; }
.dg-lb { font-size: 11.5px; color: var(--text-3); margin-bottom: 11px; line-height: 1.7; }

/* 抓手：所有可拖元素统一的手感提示 */
.dg-grip {
  flex: none; font-style: normal; font-size: 13px; line-height: 1;
  color: var(--text-3); opacity: .7;
}

/* ---- sort：一列卡片 ---- */
.dg-sort { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dg-card {
  display: flex; align-items: center; gap: 11px; padding: 11px 13px;
  border-radius: 10px; background: var(--surface); border: 1px solid var(--border-strong);
  font-size: 13px; color: var(--text); cursor: grab;
  touch-action: none; user-select: none; -webkit-user-select: none;
  transition: border-color .14s, box-shadow .14s, background .14s;
}
.dg-card:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.dg-card .dg-n {
  flex: none; width: 21px; height: 21px; border-radius: 50%; font-style: normal; font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-3); color: var(--text-2); font-weight: 700;
}
.dg-card .dg-tx { flex: 1 1 auto; min-width: 0; line-height: 1.6; }
.dg-card.is-hold { border-color: var(--accent); background: var(--accent-soft); }
.dg-card.is-hold .dg-n { background: var(--accent); color: var(--on-accent); }
.dg-card.is-dragging {
  cursor: grabbing; position: relative; z-index: 5;
  box-shadow: var(--shadow-lg); border-color: var(--accent);
}

/* ---- drag：左物品池 / 右目标槽 ---- */
.dg-board { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 14px; align-items: start; }
.dg-col { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.dg-col-h {
  font-size: 11.5px; color: var(--text-3); letter-spacing: .04em;
  padding-bottom: 7px; border-bottom: 1px solid var(--border);
}
.dg-pool {
  display: flex; flex-direction: column; gap: 8px; min-height: 84px;
  padding: 9px; border-radius: 10px; background: var(--surface-2); border: 1px dashed var(--border);
}
.dg-item {
  font: inherit; font-size: 12.5px; text-align: left; width: 100%;
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px; border-radius: 9px; cursor: grab;
  background: var(--surface); border: 1px solid var(--border-strong); color: var(--text);
  touch-action: none; user-select: none; -webkit-user-select: none;
  transition: border-color .14s, box-shadow .14s, background .14s, opacity .14s;
}
.dg-item:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.dg-item .dg-tx { flex: 1 1 auto; min-width: 0; line-height: 1.55; }
.dg-item.is-hold { border-color: var(--accent); background: var(--accent-soft); }
.dg-item.is-out { opacity: .4; border-style: dashed; }
.dg-item.is-dragging {
  cursor: grabbing; position: relative; z-index: 5;
  box-shadow: var(--shadow-lg); border-color: var(--accent);
}

.dg-targets { display: flex; flex-direction: column; gap: 8px; }
.dg-slot {
  border-radius: 10px; background: var(--surface-2); border: 1px dashed var(--border-strong);
  padding: 10px 12px; min-height: 54px;
  transition: border-color .14s, background .14s, box-shadow .14s;
}
.dg-slot-h { display: block; font-size: 12px; color: var(--text-2); margin-bottom: 7px; }
.dg-slot.has { border-style: solid; border-color: var(--accent); background: var(--accent-soft); }
.dg-slot.is-over {
  border-style: solid; border-color: var(--accent); background: var(--accent-soft);
  outline: 2px solid var(--accent); outline-offset: 1px;
}
.dg-ph { font-size: 12px; color: var(--text-3); }
.dg-ins { display: flex; flex-wrap: wrap; gap: 6px; }
.dg-in {
  font-style: normal; font-size: 12px; padding: 5px 10px; border-radius: 7px; cursor: pointer;
  background: var(--accent); color: var(--on-accent);
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.dg-in:hover { filter: brightness(1.08); }

.dg-acts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.dg-cnt { font-size: 11.5px; color: var(--text-3); }
.dg-cnt b { color: var(--accent); font-size: 14px; }
.dg-reset {
  font: inherit; font-size: 12.5px; padding: 7px 15px; border-radius: 9px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border-strong); color: var(--text-2);
  transition: all .15s;
}
.dg-reset:hover { border-color: var(--accent); color: var(--accent); }

/* =========================================================
 * 试管架（kind: tube 移液入管 / judge 多管判断）
 *
 * 为什么要有这一块：drag 练的是「概念该归到哪一类」，拖的是文字标签；
 * 这一块练的是「这一管该加什么」—— 认的是管身上的标签和管里的液体。
 * 所以管是画出来的（拟物 SVG），液面与颜色跟着数据走。
 * ========================================================= */
.tb-sw {
  flex: 0 0 auto; width: 13px; height: 13px; border-radius: 3px;
  border: 1px solid var(--border-strong);
}
.tb-sw.c0 { background: var(--eq-liq-0); }
.tb-sw.c1 { background: var(--eq-liq-1); }
.tb-sw.c2 { background: var(--eq-liq-2); }
.tb-sw.c3 { background: var(--eq-liq-3); }
.tb-sw.c4 { background: var(--eq-liq-4); }
.tb-sw.c5 { background: var(--eq-liq-5); }
/* 「已加 2/3 管」—— 要分装到多支管的试剂，不加这个计数用户会以为加一次就够 */
.tb-cnt {
  flex: 0 0 auto; font-style: normal; font-size: 10.5px; font-weight: 600;
  padding: 1px 7px; border-radius: 20px;
  background: var(--accent-soft); color: var(--accent);
}

/* 架子：一行试管位，底下一道「台面」，管子站在上面 */
.tube-rack {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 8px; align-items: end; padding: 12px 10px 0;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  box-shadow: inset 0 -5px 0 -1px var(--surface-3);
}
.tube-slot {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 4px 12px; min-width: 0;
  border-radius: 10px; border: 1.5px dashed transparent;
  font: inherit; color: inherit; background: transparent; text-align: center;
  transition: border-color .14s, background .14s, box-shadow .14s;
}
.tube-slot .tube-fig {
  display: flex; align-items: flex-end; justify-content: center;
  width: 100%; height: var(--tb-fig-h, 84px);
}
.tube-slot .tube-fig svg { width: 100%; height: 100%; }
.tube-slot .tube-cap {
  font-size: 12px; font-weight: 600; color: var(--text);
  padding: 1px 8px; border-radius: 20px;
  background: var(--surface); border: 1px solid var(--border-strong);
}
.tube-slot .tube-sub {
  font-size: 10.5px; color: var(--text-3); line-height: 1.45;
  word-break: break-word;
}
.tube-slot .tube-ph { font-size: 10.5px; color: var(--text-3); opacity: .7; }
.tube-slot .tube-ins { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.tube-slot .tube-ins .dg-in { font-size: 10.5px; padding: 3px 7px; border-radius: 6px; }

/* 拖拽落点态：能放 / 正悬停 / 已放满 */
.tube-slot[data-dg-slot] { cursor: pointer; }
.tube-slot[data-dg-slot]:hover { border-color: var(--border-strong); background: var(--surface); }
.tube-slot.is-over {
  border-style: solid; border-color: var(--accent); background: var(--accent-soft);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.tube-slot.is-full .tube-cap { border-color: var(--accent); color: var(--accent); }
.tube-slot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* judge：管子本身是可点的按钮，选中的那支把标签与边框一起点亮 */
.tube-rack.is-pick .tube-slot.is-pickable { cursor: pointer; border-color: var(--border); background: var(--surface); }
.tube-rack.is-pick .tube-slot.is-pickable:hover { border-color: var(--accent); transform: translateY(-2px); }
.tube-rack.is-pick .tube-slot.is-pickable.is-on {
  border-color: var(--accent); background: var(--accent-soft);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.tube-rack.is-pick .tube-slot.is-pickable.is-on .tube-cap { border-color: var(--accent); color: var(--accent); }
.tb-judge { margin-bottom: 16px; }
.tb-judge-lb { font-size: 11.5px; color: var(--text-3); margin-bottom: 8px; }
.tb-judge-hint { font-size: 11.5px; color: var(--text-3); margin-top: 9px; }

/* 深色主题：accent 是浅青，配白字读不清，改用深字 */
[data-theme="dark"] .dg-in,
[data-theme="dark"] .dg-card.is-hold .dg-n { color: #0f141b; }

/* ---- 窄屏：三栏收成一栏 ---- */
@media (max-width: 1080px) {
  .do-shell { grid-template-columns: 1fr; }
  .do-rail-wrap, .do-log { position: static; }
  .do-rail { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .do-r { border-left: none; border: 1px solid var(--border); border-radius: 20px; padding: 6px 11px; }
  .do-r.is-cur { border-color: var(--accent); }
  .do-rail-head { display: none; }
  /* 拖拽归位：两栏太挤，收成一栏（物品池在上、目标槽在下） */
  .dg-board { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .do-head { padding: 20px 18px 18px; }
  .do-head h1 { font-size: 20px; }
  .do-step { padding: 18px 16px 20px; }
  .do-bench { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); padding: 11px; }
  .do-pv b { font-size: 25px; }
  .do-pager { flex-direction: column; }
}

/* ============================================================
   ---- 打印 ----
   两件事：
   ① 操作台的记录本上写着「可以直接抄进实验记录」—— 那就得真的能打印。
      打印操作台页时只留「标题 + 目标 + 记录本要点」，交互区 / 台面 / 步骤条 / 翻页全去掉。
   ② 主题页里有上千个折叠的「展开详细操作」块，默认是收起来的，
      直接打印会得到一叠空标题。展开交给 JS 的 beforeprint 处理（CSS 覆盖 details 不可靠），
      这里只负责把展开/收起的小三角与提示文案藏掉。
   ============================================================ */
@media print {
  /* 页面外框：导航、搜索、目录、翻页、浮动按钮、交互区一律去掉。
     ⚠️ 这里原来写的是 .toTop / .back-top —— 两个**从来没有被定义过**的类名，
     只在这条隐藏列表里出现过。后果不只是「多写了两个没用的选择器」：
     verify-site 的「7 个阅读体验组件」断言用 /.toTop/ 去 css 里找，
     于是**靠这条隐藏列表就把「返回顶部」判成了已完成**，而按钮其实不存在（假绿）。
     现在换成真实的 .to-top，并给断言加了「必须是真规则」的约束。 */
  .topbar, .sidebar, .sidebar-mask, .crumb, .search-panel, .to-top,
  .ex-toc, .do-pager, .do-switch, .do-actions, .do-bench-wrap, .do-rail-wrap,
  .do-log-tip, .do-fin-acts, .do-fin-save, .dg-acts, .do-step,
  .lay-tabs, .ex-entry, .ex-dobtn, .do-goread, .do-print, .do-again,
  .hero-actions, .quick-links, .site-foot, .gt-motif, .cbl-motif,
  .ex-motif, .ph-motif, .lay-motif, .do-kicker { display: none !important; }

  /* 版面：白底黑字、去掉阴影与圆角、把宽度放开 */
  html, body { background: #fff !important; color: #000 !important; }
  * { box-shadow: none !important; text-shadow: none !important; animation: none !important; }
  .wrap { max-width: none !important; padding: 0 !important; margin: 0 !important; }
  .do-shell { display: block !important; grid-template-columns: none !important; }
  .do-main, .do-log {
    position: static !important; width: auto !important; max-width: none !important;
    border: none !important; background: none !important; padding: 0 !important; margin: 0 !important;
  }
  /* 打印操作台时，记录本才是主角 —— 给它一个可见的框，抄起来不会漏行 */
  .do-log { border: 1px solid #999 !important; padding: 10mm !important; margin-top: 6mm !important; }
  .do-log-list li { break-inside: avoid; page-break-inside: avoid; }
  .do-log-list i { background: none !important; color: #000 !important; border: 1px solid #000; }

  /* 折叠块：JS 已展开，把「展开详细操作」的提示与箭头藏掉，正文按普通段落排 */
  .sm-arrow, .sm-sum { display: none !important; }
  details.step-more { border: none !important; background: none !important; padding: 0 !important; }
  details.step-more > summary { display: none !important; }
  details.step-more > .sm-body { padding: 0 !important; }
  .sm-k { background: none !important; color: #000 !important; border: 1px solid #000 !important; }

  /* 链接不要印成一串 URL，颜色统一为黑 */
  a { color: #000 !important; text-decoration: none !important; }

  /* 分页：标题不与正文分家，表格与插图整块不拆 */
  h1, h2, h3, h4 { break-after: avoid; page-break-after: avoid; }
  table, figure, .fig-box, .fig-wrap, .do-figwrap, .ex-fig {
    break-inside: avoid; page-break-inside: avoid;
  }
  img, svg { max-width: 100% !important; }
  @page { margin: 16mm 14mm; }
}

/* =========================================================
 * 人体解剖 × 科研选题（anatomy.js / app.js 的 an-* / anc-* / and-* 类）
 *
 * 配色：10 个解剖系统各一套色，器官按系统上色；
 *       浅色 / 深色两套（深色模式要提亮，否则深底上看不见）。
 * ========================================================= */
:root {
  --an-nervous: #7c3aed;        /* 神经系统 */
  --an-endocrine: #b45309;      /* 内分泌系统 */
  --an-respiratory: #0891b2;    /* 呼吸系统 */
  --an-cardio: #dc2626;         /* 心血管系统 */
  --an-digestive: #ea580c;      /* 消化系统 */
  --an-urinary: #2563eb;        /* 泌尿与男性生殖 */
  --an-repro: #db2777;          /* 女性生殖与乳腺 */
  --an-blood: #7f1d1d;          /* 血液与免疫系统 */
  --an-musculo: #78716c;        /* 骨与软组织 */
  --an-skin: #0f766e;           /* 皮肤与感觉器官 */

  --an-body-fill: #eef2f7;      /* 人体轮廓填充 */
  --an-body-line: #cbd5e1;      /* 人体轮廓描边 */
  --an-org-line: #ffffff;       /* 器官描边（分隔相邻器官） */
}
[data-theme="dark"] {
  --an-nervous: #a78bfa;
  --an-endocrine: #fbbf24;
  --an-respiratory: #22d3ee;
  --an-cardio: #f87171;
  --an-digestive: #fb923c;
  --an-urinary: #60a5fa;
  --an-repro: #f472b6;
  --an-blood: #fca5a5;
  --an-musculo: #a8a29e;
  --an-skin: #5eead4;

  --an-body-fill: #1b232e;
  --an-body-line: #3a4655;
  --an-org-line: #0f141b;
}

/* ---------- 人体图 ---------- */
.an-body-svg { display: block; width: 100%; height: auto; max-width: 340px; margin: 0 auto; }
.an-body-svg .an-skin { fill: var(--an-body-fill); stroke: var(--an-body-line); stroke-width: 2; }
.an-body-svg .an-arm { fill: var(--an-body-fill); stroke: var(--an-body-line); stroke-width: 2; }

/* 每个器官：形状 + 可点热区 */
.an-body-svg .an-org { cursor: pointer; transition: opacity .18s ease; }
.an-body-svg .an-sh { stroke: var(--an-org-line); stroke-width: 1.6; stroke-linejoin: round; }
.an-body-svg .an-org:hover .an-sh { stroke-width: 3; }
.an-body-svg .an-lb {
  font-family: var(--font); font-size: 13px; fill: var(--text-3);
  pointer-events: none; user-select: none;
}

/* 系统配色 */
.an-sys-nervous .an-sh { fill: var(--an-nervous); }
.an-sys-endocrine .an-sh { fill: var(--an-endocrine); }
.an-sys-respiratory .an-sh { fill: var(--an-respiratory); }
.an-sys-cardio .an-sh { fill: var(--an-cardio); }
.an-sys-digestive .an-sh { fill: var(--an-digestive); }
.an-sys-urinary .an-sh { fill: var(--an-urinary); }
.an-sys-repro-female .an-sh { fill: var(--an-repro); }
.an-sys-blood-immune .an-sh { fill: var(--an-blood); }
.an-sys-musculo .an-sh { fill: var(--an-musculo); }
.an-sys-skin-sense .an-sh { fill: var(--an-skin); }

/* 器官分组容器：只做分组语义，渲染上要求路径精度（曲线多，默认值会显毛边） */
.an-orgs { shape-rendering: geometricPrecision; }

/* 皮肤是体表：只描边不上色，否则会把里面的器官全盖住。
   注意只能选 [data-an="skin"]，不能用 .an-sys-skin-sense —— 同系统的「眼」也在里面，
   那样会把眼球也画成虚线圈。 */
.an-body-svg .an-org[data-an="skin"] .an-sh {
  fill: none; stroke: var(--an-skin); stroke-width: 4; stroke-dasharray: 10 6; opacity: .5;
}
.an-body-svg .an-org[data-an="skin"]:hover .an-sh { opacity: .85; }

/* 淋巴结：一组小圆 */
.an-nodes .an-sh { fill: var(--an-blood); stroke-width: 1.2; }

/* 未聚焦系统的器官淡出；详情页里非本系统的也淡出 */
.an-body-svg .an-org.is-off { opacity: .12; }
.an-body-svg .an-org.is-on .an-sh { stroke: var(--text); stroke-width: 3.4; }

/* 板块页：点了某个系统 → 其余淡出（只改一个 data-focus，纯 CSS） */
.an-map[data-focus="nervous"] .an-org:not(.an-sys-nervous),
.an-map[data-focus="endocrine"] .an-org:not(.an-sys-endocrine),
.an-map[data-focus="respiratory"] .an-org:not(.an-sys-respiratory),
.an-map[data-focus="cardio"] .an-org:not(.an-sys-cardio),
.an-map[data-focus="digestive"] .an-org:not(.an-sys-digestive),
.an-map[data-focus="urinary"] .an-org:not(.an-sys-urinary),
.an-map[data-focus="repro-female"] .an-org:not(.an-sys-repro-female),
.an-map[data-focus="blood-immune"] .an-org:not(.an-sys-blood-immune),
.an-map[data-focus="musculo"] .an-org:not(.an-sys-musculo),
.an-map[data-focus="skin-sense"] .an-org:not(.an-sys-skin-sense) { opacity: .08; }

/* ---------- 板块页：图 + 系统导航 ---------- */
.an-map {
  display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: 32px;
  align-items: start; margin: 0 0 40px;
  padding: 26px 28px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.an-map-fig { position: relative; }
.an-map-side { min-width: 0; }
.an-map-cap { text-align: center; font-size: 12px; color: var(--text-3); margin-top: 8px; }
.an-map-head { font-size: 14px; color: var(--text-2); margin-bottom: 16px; }
.an-map-head b { font-family: var(--mono); font-size: 20px; color: var(--text); }
.an-map-head span { display: block; font-size: 12.5px; color: var(--text-3); margin-top: 4px; }

.an-sys-list { display: flex; flex-direction: column; gap: 8px; }
.an-sys {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--border);
  border-left: 4px solid var(--sy); border-radius: 10px; cursor: pointer;
  font-family: inherit; color: inherit; transition: background .15s, transform .15s;
}
.an-sys:hover { background: var(--surface-3); transform: translateX(2px); }
.an-sys[disabled] { opacity: .45; cursor: default; transform: none; }
.an-sys-ic { font-size: 18px; flex: none; }
.an-sys-tx { flex: 1; min-width: 0; }
.an-sys-tx b { display: block; font-size: 14px; font-weight: 600; }
.an-sys-tx i { display: block; font-style: normal; font-size: 12px; color: var(--text-3); line-height: 1.5; }
.an-sys-n { flex: none; font-family: var(--mono); font-size: 13px; color: var(--sy); font-weight: 700; }
.an-map[data-focus="nervous"] .an-sys[data-an-sys="nervous"],
.an-map[data-focus="endocrine"] .an-sys[data-an-sys="endocrine"],
.an-map[data-focus="respiratory"] .an-sys[data-an-sys="respiratory"],
.an-map[data-focus="cardio"] .an-sys[data-an-sys="cardio"],
.an-map[data-focus="digestive"] .an-sys[data-an-sys="digestive"],
.an-map[data-focus="urinary"] .an-sys[data-an-sys="urinary"],
.an-map[data-focus="repro-female"] .an-sys[data-an-sys="repro-female"],
.an-map[data-focus="blood-immune"] .an-sys[data-an-sys="blood-immune"],
.an-map[data-focus="musculo"] .an-sys[data-an-sys="musculo"],
.an-map[data-focus="skin-sense"] .an-sys[data-an-sys="skin-sense"] {
  background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--sy);
}

/* ---------- 3D 图谱入口 ---------- */
.an-3d {
  display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 12px 14px;
  background: var(--primary-soft); border: 1px solid var(--border);
  border-radius: 10px; text-decoration: none; color: inherit; transition: background .15s;
}
.an-3d:hover { background: var(--surface-3); }
.an-3d-ic { font-size: 20px; flex: none; }
.an-3d-tx { flex: 1; min-width: 0; }
.an-3d-tx b { display: block; font-size: 13.5px; color: var(--primary); }
.an-3d-tx i { display: block; font-style: normal; font-size: 12px; color: var(--text-3); line-height: 1.5; }
.an-3d-go { flex: none; font-size: 12.5px; color: var(--primary); }
.an-3d-note { margin-top: 8px; font-size: 11.5px; color: var(--text-3); line-height: 1.6; }

/* ---------- 部位卡片 ---------- */
.anc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 16px; }
.anc {
  display: flex; flex-direction: column; padding: 16px 18px; background: var(--surface);
  border: 1px solid var(--border); border-top: 3px solid var(--sy); border-radius: var(--radius);
  text-decoration: none; color: inherit; box-shadow: var(--shadow-sm);
  transition: box-shadow .18s, transform .18s;
}
.anc:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.anc-top { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.anc-top h4 { font-size: 17px; font-weight: 600; }
.anc-en { font-size: 12px; color: var(--text-3); font-style: italic; }
.anc-brief {
  font-size: 13px; color: var(--text-2); line-height: 1.7; margin: 0 0 12px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.anc-stats { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--text-3); margin-bottom: 12px; }
.anc-stats b { font-family: var(--mono); color: var(--sy); font-size: 14px; margin-right: 2px; }
.anc-foot {
  display: flex; justify-content: space-between; align-items: center; margin-top: auto;
  padding-top: 10px; border-top: 1px dashed var(--border); font-size: 12px; color: var(--text-3);
}
.anc-db { display: inline-flex; align-items: center; gap: 4px; }
.anc-db::before { content: "🗄"; font-size: 11px; opacity: .8; }
.anc-go { color: var(--sy); font-weight: 600; }

/* ---------- 部位详情页 ---------- */
/* 整页容器：只承载 --fa（部位强调色），其余靠子元素取用 */
.an-detail { --fa: var(--an-nervous); }

.and-head {
  padding: 26px 30px; margin-bottom: 28px; border: 1px solid var(--border);
  border-left: 5px solid var(--fa); border-radius: var(--radius-lg);
  background: var(--surface); box-shadow: var(--shadow-sm);
}
.and-kicker { font-size: 12.5px; color: var(--text-3); letter-spacing: .04em; margin-bottom: 10px; }
.and-kicker span { margin-right: 6px; }
.and-h1 { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.and-h1 h1 { font-family: var(--serif); font-size: 32px; line-height: 1.2; }
.and-en { font-size: 14px; color: var(--text-3); font-style: italic; }
.and-brief { margin: 12px 0 0; font-size: 14.5px; line-height: 1.85; color: var(--text-2); max-width: 78ch; }
.and-meta { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 16px; font-size: 13px; color: var(--text-3); }
.and-meta b { font-family: var(--mono); font-size: 17px; color: var(--fa); margin-right: 4px; }

.and-cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
.and-main { min-width: 0; }
.and-rail { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 76px; }

.and-figbox {
  padding: 20px; margin-bottom: 26px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); text-align: center;
}
.and-fig { max-width: 260px; margin: 0 auto; }
.and-figcap { margin-top: 10px; font-size: 12px; color: var(--text-3); }

.and-sec { margin-bottom: 30px; }
.and-sh { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.and-num { font-family: var(--mono); font-size: 13px; color: var(--fa); font-weight: 700; }
.and-sh h2 { font-family: var(--serif); font-size: 19px; flex: 1; }
.and-cnt { font-size: 12.5px; color: var(--text-3); }
.and-note { margin: 10px 0 12px; font-size: 12.5px; color: var(--text-3); line-height: 1.7; }

.and-qs { margin: 0; padding-left: 0; list-style: none; counter-reset: anq; }
.and-qs li {
  position: relative; counter-increment: anq; padding: 11px 14px 11px 46px; margin-bottom: 8px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
  font-size: 14px; line-height: 1.75;
}
.and-qs li::before {
  content: "Q" counter(anq); position: absolute; left: 14px; top: 11px;
  font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--fa);
}

.an-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.an-link {
  display: flex; align-items: center; gap: 10px; padding: 11px 13px; background: var(--surface);
  border: 1px solid var(--border); border-left: 3px solid var(--sy); border-radius: 10px;
  text-decoration: none; color: inherit; transition: background .15s, transform .15s;
}
.an-link:hover { background: var(--surface-2); transform: translateX(2px); }
.an-link-ic { font-size: 15px; flex: none; }
.an-link-tx { flex: 1; min-width: 0; }
.an-link-tx b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.an-link-tx i { display: block; font-style: normal; font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.an-link-go { flex: none; color: var(--text-3); font-size: 13px; }
.an-link.is-bad { border-left-color: var(--bad, #b91c1c); color: #b91c1c; font-size: 13px; }

.and-dbs { display: flex; flex-direction: column; gap: 8px; }
.and-db {
  display: block; position: relative; padding: 10px 26px 10px 12px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 9px; text-decoration: none; color: inherit;
  transition: background .15s;
}
.and-db:hover { background: var(--surface-3); }
.and-db b { display: block; font-size: 13px; font-weight: 600; }
.and-db i { display: block; font-style: normal; font-size: 11.5px; color: var(--text-3); line-height: 1.55; margin-top: 3px; }
.and-db-go { position: absolute; right: 10px; top: 10px; font-size: 12px; color: var(--text-3); }
.and-3d-panel .an-3d { margin-top: 0; }
.and-3d-note { margin: 10px 0 0; font-size: 11.5px; color: var(--text-3); line-height: 1.65; }

.and-sib { display: flex; flex-direction: column; gap: 6px; }
.and-sib a {
  display: block; padding: 8px 11px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 8px; text-decoration: none; color: inherit; font-size: 13px; transition: background .15s;
}
.and-sib a:hover { background: var(--surface-3); }
.and-sib a b { font-weight: 600; }
.and-sib a i { font-style: normal; font-size: 11.5px; color: var(--text-3); margin-left: 6px; }

/* ---------- 技术页底部：这项技术用在哪些部位 ---------- */
.tech-an { margin-top: 28px; }
.an-chiprow { display: flex; flex-wrap: wrap; gap: 10px; }
.an-chip {
  display: flex; align-items: center; gap: 8px; padding: 9px 14px; background: var(--surface);
  border: 1px solid var(--border); border-left: 3px solid var(--sy); border-radius: 999px;
  text-decoration: none; color: inherit; font-size: 13.5px; transition: background .15s, transform .15s;
}
.an-chip:hover { background: var(--surface-2); transform: translateY(-1px); }
.an-chip-ic { font-size: 14px; }
.an-chip b { font-weight: 600; }
.an-chip i { font-style: normal; font-size: 11.5px; color: var(--text-3); }

/* ---------- 窄屏 ---------- */
@media (max-width: 1080px) {
  .and-cols { grid-template-columns: 1fr; }
  .and-rail { position: static; }
}
@media (max-width: 860px) {
  .an-map { grid-template-columns: 1fr; gap: 22px; padding: 20px; }
  .an-body-svg { max-width: 280px; }
  .and-head { padding: 20px; }
  .and-h1 h1 { font-size: 26px; }
}

/* =========================================================
 * 技术地图（方案 F）—— 实验技术板块 landing 页
 * 四个视图：证据链金字塔 / 筛选矩阵 / 科学问题决策树 / 按实验室流程分类
 * 层次色走内联 --ly（来自 topic-dims.js 的 DIM_LAYERS），这里只消费不定义。
 * 全部用设计 token，暗色模式自动跟随。
 * ========================================================= */
.tm { margin-bottom: 34px; }

.tm-head { margin-bottom: 18px; }
.tm-title h2 { margin: 0 0 6px; font-size: 22px; }
.tm-title p { margin: 0; color: var(--text-2); font-size: 14px; line-height: 1.75; max-width: 78ch; }
.tm-title p b { color: var(--text); }

.tm-tabs {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px;
  padding-bottom: 2px; border-bottom: 1px solid var(--border);
}
.tm-tab {
  appearance: none; border: 1px solid var(--border); background: var(--surface);
  color: var(--text-2); font: inherit; font-size: 13.5px; font-weight: 600;
  padding: 8px 14px; border-radius: 10px 10px 0 0; cursor: pointer;
  border-bottom-color: transparent; transition: all .16s;
}
.tm-tab:hover { color: var(--text); border-color: var(--border-strong); }
.tm-tab.is-on {
  color: var(--primary); background: var(--primary-soft);
  border-color: var(--primary); border-bottom-color: var(--primary-soft);
}
[data-theme="dark"] .tm-tab.is-on { background: rgba(23, 73, 127, .28); color: #cfe0f5; }

.tm-note {
  margin: 0 0 16px; padding: 12px 15px; font-size: 13.5px; line-height: 1.8;
  color: var(--text-2); background: var(--surface-2);
  border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 8px;
}
.tm-note b { color: var(--text); }

/* ---------- 视图一：证据链金字塔 ---------- */
.tm-pyr { display: flex; flex-direction: column; gap: 10px; }
.tm-layer {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 4px solid var(--ly, var(--border-strong));
  border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow-sm);
}
.tm-ly-head { display: flex; align-items: flex-start; gap: 12px; }
.tm-ly-num {
  flex: none; width: 24px; height: 24px; border-radius: 7px; margin-top: 2px;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
  color: #fff; background: var(--ly, var(--text-3));
}
.tm-ly-txt { flex: 1 1 auto; min-width: 0; }
.tm-ly-txt h3 { margin: 0 0 2px; font-size: 15.5px; }
.tm-ly-txt p { margin: 0; font-size: 12.5px; color: var(--text-3); line-height: 1.6; }
.tm-ly-cnt {
  flex: none; font-size: 12px; font-weight: 600; color: var(--ly, var(--text-3));
  background: color-mix(in srgb, var(--ly, #94a3b8) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--ly, #94a3b8) 34%, transparent);
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.tm-ly-body { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.tm-ly-empty {
  display: block; font-size: 12.5px; color: var(--text-3); line-height: 1.7;
  padding: 9px 12px; background: var(--surface-2); border-radius: 8px;
}
.tm-ly-empty a { color: var(--primary); font-weight: 600; }

.tm-chip {
  display: inline-block; font-size: 12.5px; padding: 4px 10px; border-radius: 8px;
  color: var(--text-2); background: var(--surface-3);
  border: 1px solid var(--border); text-decoration: none; transition: all .14s;
}
.tm-chip:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-soft); }
.tm-chip-missing { color: var(--warn); border-style: dashed; background: var(--warn-soft); }
.tm-chip-link { font-weight: 600; color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

/* ---------- 视图二：筛选矩阵 ---------- */
.tm-filters {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
  padding: 14px 16px; margin-bottom: 16px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius);
}
.tm-sel { display: flex; flex-direction: column; gap: 5px; }
.tm-sel > span { font-size: 12px; font-weight: 600; color: var(--text-3); }
.tm-sel select {
  font: inherit; font-size: 13.5px; color: var(--text); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: 8px;
  padding: 7px 10px; min-width: 150px; cursor: pointer;
}
.tm-sel select:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
.tm-reset {
  appearance: none; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  color: var(--text-2); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: 8px; padding: 7px 14px;
}
.tm-reset:hover { color: var(--primary); border-color: var(--primary); }
.tm-count { font-size: 12.5px; color: var(--text-3); margin-left: auto; font-weight: 600; }

.tm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.tm-card {
  display: block; padding: 12px 13px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; transition: all .15s;
}
.tm-card:hover { border-color: var(--primary); box-shadow: var(--shadow); transform: translateY(-1px); }
.tm-card[hidden] { display: none; }
.tm-card-ly {
  display: inline-block; font-size: 11px; font-weight: 700; color: #fff;
  background: var(--ly, var(--text-3)); padding: 2px 7px; border-radius: 6px; margin-bottom: 7px;
}
.tm-card b { display: block; font-size: 14px; color: var(--text); line-height: 1.45; margin-bottom: 4px; }
.tm-card i { display: block; font-size: 12px; color: var(--text-3); font-style: normal; }

/* ---------- 视图三：决策树 ---------- */
.tm-trees { display: flex; flex-direction: column; gap: 12px; }
.tm-tree {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden;
}
.tm-tree > summary {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 14px 16px; font-size: 15px; font-weight: 600; color: var(--text);
  list-style: none;
}
.tm-tree > summary::-webkit-details-marker { display: none; }
.tm-tree > summary::after {
  content: "▾"; margin-left: auto; color: var(--text-3); font-size: 13px; transition: transform .18s;
}
.tm-tree[open] > summary::after { transform: rotate(180deg); }
.tm-tree > summary:hover { background: var(--surface-2); }
.tm-tree[open] > summary { border-bottom: 1px solid var(--border); background: var(--surface-2); }
.tm-tree-ic { font-size: 17px; }
.tm-tree-q { flex: 1 1 auto; min-width: 0; }
.tm-tree-hint {
  margin: 0; padding: 12px 16px; font-size: 13px; line-height: 1.8;
  color: var(--text-2); background: var(--surface-2); border-bottom: 1px solid var(--border);
}
.tm-branch { padding: 13px 16px; border-bottom: 1px dashed var(--border); }
.tm-branch:last-child { border-bottom: 0; }
.tm-branch-h { font-size: 13.5px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.tm-branch-h::before { content: "└ "; color: var(--text-3); font-weight: 400; }
.tm-branch-b { display: flex; flex-wrap: wrap; gap: 6px; }
.tm-branch-note { margin-top: 8px; font-size: 12.5px; color: var(--text-3); line-height: 1.7; }

/* ---------- 视图四：按实验室流程分类（原板块网格） ---------- */
.tm-view[data-tm-view="groups"] > .group-sec:first-child { margin-top: 18px; }

@media (max-width: 860px) {
  .tm-tab { font-size: 12.5px; padding: 7px 11px; }
  .tm-grid { grid-template-columns: 1fr 1fr; }
  .tm-sel select { min-width: 0; width: 100%; }
  .tm-sel { flex: 1 1 140px; }
  .tm-count { margin-left: 0; width: 100%; }
}

/* =========================================================
 * 相关阅读（方案 L-5）—— 主题页底部，把主题串成网
 * 依据「同方向 + 同一证据层次 / 科学问题」（标签来自 F 项的技术地图）
 * ========================================================= */
.rel-block {
  margin-top: 30px; padding: 20px 22px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.rel-h { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.rel-ic { font-size: 19px; }
.rel-h h2 { margin: 0; font-size: 19px; }
.rel-count {
  margin-left: auto; font-size: 12px; font-weight: 600; color: var(--text-3);
  background: var(--surface-3); border: 1px solid var(--border);
  padding: 3px 10px; border-radius: 999px;
}
.rel-note { margin: 0 0 15px; font-size: 12.5px; color: var(--text-3); line-height: 1.75; }
.rel-note a { color: var(--primary); font-weight: 600; }

.rel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 10px; }
.rel-card {
  position: relative; display: block; padding: 12px 13px; text-decoration: none;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 10px; transition: all .15s;
}
.rel-card:hover { border-color: var(--primary); background: var(--surface); box-shadow: var(--shadow); transform: translateY(-1px); }
.rel-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.rel-tag {
  font-size: 10.5px; font-weight: 600; color: var(--accent);
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  padding: 2px 7px; border-radius: 6px; white-space: nowrap;
}
.rel-card b { display: block; font-size: 14px; color: var(--text); line-height: 1.45; margin-bottom: 4px; }
.rel-card i { display: block; font-size: 11.5px; color: var(--text-3); font-style: normal; }
.rel-done {
  position: absolute; top: 10px; right: 11px; font-size: 10.5px; font-weight: 600;
  color: var(--ok); background: var(--ok-soft); padding: 2px 6px; border-radius: 6px;
}
@media (max-width: 860px) {
  .rel-grid { grid-template-columns: 1fr; }
  .rel-block { padding: 16px; }
}

/* =========================================================
 * 问答体系（方案 G）—— 主题页 FAQ 区块 + 问答总览页
 *
 * 交互用原生 <details>/<summary>，不写 JS：静态站少一段脚本就少一处可能坏的地方，
 * 而且 <details> 天然可键盘操作、可被浏览器查找（Ctrl+F 能展开命中的项）。
 * 折叠项的「展开箭头」靠 ::after 画，因为各浏览器对 ::marker 的样式支持不一致。
 * ========================================================= */
.faq-block {
  margin-top: 26px; padding: 20px 22px;
  background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.faq-h { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.faq-ic { font-size: 19px; }
.faq-h h2 { margin: 0; font-size: 19px; }
.faq-count {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  color: var(--accent); background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  padding: 2px 8px; border-radius: 999px;
}
.faq-note { margin: 0 0 15px; font-size: 12.5px; color: var(--text-3); line-height: 1.75; }
.faq-note a { color: var(--primary); font-weight: 600; }

.faq-list { display: flex; flex-direction: column; gap: 8px; }
.faq-item {
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; transition: border-color .15s, box-shadow .15s;
}
.faq-item[open] { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: var(--shadow-sm); }
.faq-item > summary {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 40px 11px 14px; position: relative;
  font-size: 14px; font-weight: 600; color: var(--text);
  line-height: 1.6; cursor: pointer; list-style: none;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: "▾"; position: absolute; right: 15px; top: 11px;
  font-size: 12px; color: var(--text-3); transition: transform .18s;
}
.faq-item[open] > summary::after { transform: rotate(180deg); color: var(--accent); }
.faq-item > summary:hover { background: var(--surface-2); }
.faq-n {
  flex: 0 0 auto; font-family: var(--mono); font-size: 11px; font-weight: 700;
  color: var(--accent); background: var(--accent-soft);
  padding: 2px 7px; border-radius: 6px; margin-top: 2px; white-space: nowrap;
}
.faq-a {
  padding: 2px 16px 15px 16px; font-size: 14px; color: var(--text-2);
  line-height: 1.85; border-top: 1px dashed var(--border);
}
.faq-src { margin-top: 9px; font-size: 11.5px; color: var(--text-3); }
.faq-src a { color: var(--primary); }

/* ---- 问答总览页 ---- */
.faq-sec { margin-top: 26px; }
.faq-sec-h {
  display: flex; align-items: baseline; gap: 10px;
  padding-bottom: 9px; margin-bottom: 13px;
  border-bottom: 1px solid var(--border);
}
.faq-sec-h h2 { margin: 0; font-size: 19px; }
.faq-sec-h span { font-size: 12px; color: var(--text-3); }
.faq-g { margin-bottom: 18px; }
.faq-g h3 {
  margin: 0 0 9px; font-size: 13px; font-weight: 700;
  color: var(--text-2); letter-spacing: .02em;
}
.faq-g h3::before { content: "▸ "; color: var(--text-3); font-weight: 400; }
.faq-note code {
  font-family: var(--mono); font-size: 11.5px; padding: 1px 5px;
  background: var(--surface-3); border-radius: 5px; color: var(--text-2);
}

/* ---- 讨论区（未配置后端时只呈现说明，不发任何外部请求） ---- */
.faq-comment {
  margin-top: 22px; padding: 18px 20px;
  background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.fc-h { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.fc-ic { font-size: 18px; }
.fc-h h2 { margin: 0; font-size: 17px; }
.fc-note { margin: 0; font-size: 13px; color: var(--text-2); line-height: 1.85; }
.fc-note b { color: var(--warn); }
.fc-mount { margin-top: 14px; }

/* ---- 读者反馈条（方案 L-7）—— 纯本地，零外部请求 ----
   位置在「相关阅读」之后、讨论位之前。视觉上比讨论区轻一档：
   反馈是顺手点一下的事，不该抢正文的注意力。 */
.fb-block {
  margin-top: 22px; padding: 16px 20px 15px;
  background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.fb-h { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.fb-ic { font-size: 17px; }
.fb-h h2 { margin: 0; font-size: 16px; }
.fb-note { margin: 0 0 12px; font-size: 12.5px; color: var(--text-2); line-height: 1.85; }
.fb-note b { color: var(--text); }
.fb-acts { display: flex; flex-wrap: wrap; gap: 9px; }
.fb-btn {
  font: inherit; font-size: 13px; padding: 7px 15px; cursor: pointer;
  border-radius: 999px; border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text-2);
  transition: background .14s, border-color .14s, color .14s;
}
.fb-btn:hover { border-color: var(--accent); color: var(--accent); }
.fb-btn.is-on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.fb-more { margin-top: 12px; }
.fb-ta {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 13px; line-height: 1.7;
  padding: 9px 11px; border-radius: 9px; resize: vertical;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
}
.fb-ta:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.fb-row { display: flex; align-items: center; gap: 11px; margin-top: 9px; flex-wrap: wrap; }
.fb-send {
  font: inherit; font-size: 13px; font-weight: 600; padding: 7px 16px; cursor: pointer;
  border-radius: 9px; border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent);
}
.fb-send:hover { filter: brightness(1.08); }
.fb-hint { font-size: 11.5px; color: var(--text-3); }
.fb-done {
  margin: 12px 0 0; font-size: 12.5px; line-height: 1.8;
  color: var(--ok); border-top: 1px dashed var(--border); padding-top: 10px;
}
.fb-when { color: var(--text-3); }

/* 讨论区页的「我标记过的反馈」列表 */
.fb-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.fb-li {
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
  font-size: 12.5px; line-height: 1.7; color: var(--text-2);
  padding: 7px 10px; border-radius: 8px; background: var(--surface-2);
}
.fb-li-v { flex: none; }
.fb-li-t { color: var(--accent); text-decoration: none; font-weight: 600; }
.fb-li-t:hover { text-decoration: underline; text-underline-offset: 2px; }
.fb-li-n { flex: 1 1 240px; color: var(--text); }
.fb-li-n.is-none { color: var(--text-3); font-style: italic; }
.fb-li-d { flex: none; color: var(--text-3); font-size: 11.5px; }
.fb-export {
  width: 100%; box-sizing: border-box; margin-top: 12px;
  font-family: var(--mono);
  font-size: 12px; line-height: 1.75; padding: 10px 12px;
  border-radius: 9px; resize: vertical;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
}

/* ---- 侧栏第三条横向入口 ---- */
.nav-faq-link .ncl-ic { color: var(--accent); }

/* ---- 讨论区聚合页（方案 G 第三步）：板块讨论位 + 主题讨论位 ---- */
.disc-board {
  display: flex; align-items: center; gap: 12px; margin: 0 0 14px;
  padding: 13px 16px; text-decoration: none;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); transition: border-color .16s, transform .16s;
}
.disc-board:hover { border-color: var(--accent); transform: translateX(3px); }
.db-ic { font-size: 17px; }
.db-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.db-tx b { font-size: 13.5px; color: var(--text); }
.db-tx em { font-style: normal; font-size: 11.5px; color: var(--text-3); }
.db-n, .di-n {
  flex: none; font-family: var(--mono); font-size: 11.5px; font-weight: 700;
  color: var(--text-3); background: var(--surface-3);
  border-radius: 20px; padding: 2px 9px; min-width: 30px; text-align: center;
}
.disc-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px;
}
.disc-item {
  display: flex; align-items: center; gap: 8px; padding: 8px 11px;
  text-decoration: none; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); transition: border-color .16s, background .16s;
}
.disc-item:hover { border-color: var(--accent); background: var(--surface-2); }
.di-tx { flex: 1; min-width: 0; font-size: 12.5px; color: var(--text-2); line-height: 1.5;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 讨论热度排行（有后端时才出现） */
.disc-rank { list-style: none; margin: 0; padding: 0; }
.disc-rank li {
  display: flex; align-items: center; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.disc-rank li:last-child { border-bottom: 0; }
.dr-n {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
  background: var(--surface-3); color: var(--text-3);
}
.disc-rank li:nth-child(1) .dr-n { background: var(--accent); color: var(--on-accent); }
.disc-rank li:nth-child(2) .dr-n { background: color-mix(in srgb, var(--accent) 60%, var(--surface-3)); color: var(--text); }
.disc-rank li:nth-child(3) .dr-n { background: color-mix(in srgb, var(--accent) 35%, var(--surface-3)); color: var(--text); }
.dr-tx { flex: 1; min-width: 0; font-size: 13px; color: var(--text-2); }
.dr-c { flex: none; font-family: var(--mono); font-size: 11.5px; color: var(--text-3); }

@media (max-width: 860px) {
  .faq-block, .faq-comment { padding: 15px 16px; }
  .faq-item > summary { font-size: 13.5px; }
  .faq-a { font-size: 13.5px; }
  .disc-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .disc-board { padding: 11px 13px; }
}

/* =========================================================
 * 问题与排错实战（方案 G 第四步）
 * 用 --warn（琥珀）作强调色，和 FAQ 的 --accent（青）区分开 ——
 * 读者一眼能看出「这一页是排错」而不是「又一页知识」。
 * ========================================================= */

/* 母主题页顶部的入口卡 */
.ts-entry {
  display: flex; align-items: center; gap: 12px; margin: 0 0 20px;
  padding: 14px 17px; text-decoration: none;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--warn);
  border-radius: var(--radius);
  transition: border-color .16s, transform .16s, box-shadow .16s;
}
.ts-entry:hover { transform: translateX(3px); box-shadow: var(--shadow-sm); }
.te-ic { flex: none; font-size: 20px; }
.te-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.te-tx b { font-size: 13.5px; color: var(--text); }
.te-tx i { font-style: normal; font-size: 12.5px; color: var(--text-3); line-height: 1.6; }
.te-go { flex: none; font-size: 12px; font-weight: 600; color: var(--warn); }

/* 排错页开头的说明段 */
.ts-lead {
  margin: 0 0 22px; padding: 15px 18px;
  font-size: 13.5px; line-height: 1.95; color: var(--text-2);
  background: color-mix(in srgb, var(--warn) 8%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--warn) 26%, var(--border));
  border-radius: var(--radius);
}
.ts-lead b { color: var(--text); }

/* 相关问答（从母主题 FAQ 里挑的几条，只做导航） */
.ts-refs {
  margin-top: 26px; padding: 17px 19px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.tr-h { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.tr-ic { font-size: 17px; }
.tr-h h2 { margin: 0; font-size: 16px; }
.tr-list { list-style: none; margin: 0; padding: 0; }
.tr-list li { padding: 10px 0; border-bottom: 1px solid var(--border); }
.tr-list li:last-child { border-bottom: 0; }
.tr-list b { display: block; font-size: 13.5px; color: var(--text); margin-bottom: 4px; }
.tr-list span { display: block; font-size: 12.5px; color: var(--text-2); line-height: 1.8; }
.tr-note { margin: 10px 0 0; font-size: 12px; color: var(--text-3); }
.tr-note a { color: var(--primary); font-weight: 600; }

/* 本页依据 */
.ts-basis {
  margin-top: 18px; padding: 13px 16px;
  font-size: 12.5px; color: var(--text-3); line-height: 1.85;
  background: var(--surface-3); border-radius: var(--radius);
}
.ts-basis b { color: var(--text-2); }
.ts-basis p { margin: 5px 0 0; }

/* 回链母主题：两向互链的另一半，做成明确的「回程卡」而不是小链接 */
.ts-back {
  display: flex; align-items: center; gap: 12px; margin: 26px 0 0;
  padding: 15px 18px; text-decoration: none;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); transition: border-color .16s, transform .16s;
}
.ts-back:hover { border-color: var(--accent); transform: translateX(-3px); }
.tb-ic { flex: none; font-size: 20px; }
.tb-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tb-tx b { font-size: 13.5px; color: var(--text); }
.tb-tx i { font-style: normal; font-size: 12px; color: var(--text-3); }
.tb-go { flex: none; font-size: 12px; font-weight: 600; color: var(--accent); }

/* 排错实战总览页 */
.ts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.ts-card {
  display: flex; flex-direction: column; gap: 5px; padding: 14px 16px;
  text-decoration: none; background: var(--surface);
  border: 1px solid var(--border); border-left: 3px solid var(--warn);
  border-radius: var(--radius); transition: border-color .16s, transform .16s;
}
.ts-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.ts-card b { font-size: 13.5px; color: var(--text); line-height: 1.6; }
.ts-card em { font-style: normal; font-size: 12px; color: var(--text-3); }
.tc-n { font-family: var(--mono); font-size: 11px; color: var(--warn); }

/* 侧栏说明块 */
.rail-note { margin: 0; font-size: 12.5px; color: var(--text-2); line-height: 1.85; }
.rail-note a { color: var(--primary); font-weight: 600; }

@media (max-width: 860px) {
  .ts-entry, .ts-back { padding: 12px 14px; }
  .te-tx i, .tb-tx i { font-size: 12px; }
  .ts-grid { grid-template-columns: 1fr; }
  .ts-lead { padding: 13px 15px; }
}

/* =========================================================
 * 术语表（方案 L-4 / H-4）
 *
 * 气泡是**纯 CSS**（:hover / :focus）—— 零 JS。理由：
 *   ① 静态站少一段脚本就少一处会坏的地方；
 *   ② 不用 JS 就不用管「滚动时气泡跟不跟着走」「点了别处怎么关」这类问题；
 *   ③ 键盘用户 Tab 到术语就能看到解释（术语带 tabindex="0"）。
 *
 * 手机（<760px）改用手势更顺的**底部浮层**：hover 在触屏上不可靠，
 * 但 tap 会让带 tabindex 的元素获得焦点，所以 :focus 能触发浮层。
 * ========================================================= */
.term {
  position: relative;
  border-bottom: 1px dashed color-mix(in srgb, var(--primary) 55%, transparent);
  cursor: help;
}
.term:hover, .term:focus, .term.is-open { border-bottom-color: var(--primary); background: var(--primary-soft); outline: none; }
.term:focus-visible { box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 40%, transparent); border-radius: 3px; }

.term-pop {
  display: none;
  position: absolute; left: 50%; bottom: calc(100% + 9px);
  transform: translateX(-50%);
  z-index: 60;
  width: max-content; max-width: min(330px, 78vw);
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  text-align: left; font-size: 12.5px; line-height: 1.8;
  color: var(--text-2); font-weight: 400; cursor: auto;
  white-space: normal;
}
/* `.term.is-open` 是触摸设备的显式开关（见 terms.js 的 termTapToggle）——
   :focus 那条路在 iOS 上不稳，且点第二下关不掉。 */
.term:hover > .term-pop, .term:focus > .term-pop, .term.is-open > .term-pop { display: block; }
.term-pop::after {
  content: ""; position: absolute; left: 50%; top: 100%;
  margin-left: -6px; border: 6px solid transparent; border-top-color: var(--border-strong);
}
.tp-t { display: block; font-size: 13.5px; color: var(--text); margin-bottom: 5px; }
.tp-p { display: block; color: var(--accent); font-weight: 600; margin-bottom: 7px; }
.tp-d { display: block; color: var(--text-2); }
.tp-m {
  display: inline-block; margin-top: 9px; font-size: 12px;
  color: var(--primary); font-weight: 600;
}

/* 进阶模式（H 项）只留悬浮可看，去掉虚线下划线。
   现在没有 data-mode 属性，所以默认（=入门友好）显示下划线；
   H 项接上模式开关后，只要给 <body> 加 data-mode="pro" 就自动生效。 */
[data-mode="pro"] .term { border-bottom-color: transparent; }

/* 手机：气泡改底部浮层，避免在小屏上被裁掉或盖住正文 */
@media (max-width: 760px) {
  .term-pop {
    position: fixed; left: 12px; right: 12px; bottom: 12px; top: auto;
    transform: none; width: auto; max-width: none; max-height: 52vh; overflow-y: auto;
  }
  .term-pop::after { display: none; }
  /* 贴底浮层会盖住正文，得给一个明确的「怎么关」——
     触摸设备上「点空白处」是唯一退路，但不写出来没人会去试。 */
  .term-pop::before {
    content: "点气泡外任意位置关闭";
    display: block; margin-top: 9px; padding-top: 7px;
    border-top: 1px dashed var(--border);
    font-size: 11px; color: var(--text-3);
  }
}

/* ---- 术语表页 ---- */
.term-search {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 22px 0 6px; padding: 13px 16px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.term-q {
  flex: 1 1 260px; min-width: 0;
  padding: 9px 13px; font-size: 14px; font-family: inherit;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius);
}
.term-q:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.term-q-n { font-family: var(--mono); font-size: 12px; color: var(--text-3); }

.term-sec { margin-top: 26px; }
.term-sec-h {
  display: flex; align-items: baseline; gap: 10px;
  padding-bottom: 9px; margin-bottom: 8px; border-bottom: 1px solid var(--border);
}
.term-sec-h h2 { margin: 0; font-size: 19px; }
.term-sec-h span { font-size: 12px; color: var(--text-3); }
.term-sec-d { margin: 0 0 14px; font-size: 12.5px; color: var(--text-3); line-height: 1.75; }

.term-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 11px; }
.term-card {
  padding: 14px 16px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  border-top: 3px solid var(--gold);
}
.term-card[hidden] { display: none; }
.tg-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 7px; }
.tg-h b { font-size: 15px; color: var(--text); }
.tg-al {
  font-family: var(--mono); font-size: 10.5px; color: var(--text-3);
  background: var(--surface-3); padding: 1px 6px; border-radius: 5px;
}
.tg-p {
  margin: 0 0 8px; font-size: 13px; font-weight: 600;
  color: var(--accent); line-height: 1.65;
}
.tg-d { margin: 0; font-size: 12.5px; color: var(--text-2); line-height: 1.85; }
.tg-m { display: inline-block; margin-top: 9px; font-size: 12px; color: var(--primary); font-weight: 600; }

.term-foot {
  margin: 30px 0 0; padding-top: 16px;
  border-top: 1px dashed var(--border);
  font-size: 12.5px; color: var(--text-3); line-height: 1.8;
}
.term-foot code {
  font-family: var(--mono); font-size: 11.5px; padding: 1px 5px;
  background: var(--surface-3); border-radius: 5px; color: var(--text-2);
}

@media (max-width: 860px) {
  .term-list { grid-template-columns: 1fr; }
  .term-search { padding: 11px 13px; }
}




/* =========================================================
 * 入门 / 进阶阅读模式（方案 H）
 * 与 data-theme 同一套做法：状态写在 <body data-mode>，CSS 直接按模式改样式。
 * 强调色用 --primary（与 FAQ 的 --accent、排错的 --warn 区分开）——
 * 「入门」是阅读辅助，不该抢内容的注意力。
 * ========================================================= */

/* ---- 首次访问的模式选择横幅 ---- */
.mode-banner {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 0; padding: 15px 22px;
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
  border-bottom: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border));
}
.mb-ic { flex: none; font-size: 24px; }
.mb-tx { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 4px; }
.mb-tx b { font-size: 14px; color: var(--text); }
.mb-tx span { font-size: 12.5px; color: var(--text-2); line-height: 1.75; }
.mb-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mb-btn {
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  padding: 7px 14px; border-radius: 20px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text-2); transition: all .16s;
}
.mb-beginner { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.mb-beginner:hover { filter: brightness(1.08); }
.mb-pro:hover { border-color: var(--primary); color: var(--text); }
.mb-skip {
  font: inherit; font-size: 12px; cursor: pointer; background: none; border: 0;
  color: var(--text-3); text-decoration: underline; padding: 6px 4px;
}
.mb-skip:hover { color: var(--text-2); }

/* ---- 小白版速览块 ---- */
.bg-block {
  margin: 0 0 26px; padding: 20px 22px;
  background: color-mix(in srgb, var(--primary) 6%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--primary) 26%, var(--border));
  border-radius: var(--radius-lg);
}
.bg-h { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.bg-ic { font-size: 20px; }
.bg-h h2 { margin: 0; font-size: 18px; }
.bg-tag {
  margin-left: auto; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  color: var(--primary); background: color-mix(in srgb, var(--primary) 16%, transparent);
  border-radius: 20px; padding: 2px 10px;
}
.bg-lead { margin: 0 0 16px; font-size: 12.5px; color: var(--text-3); line-height: 1.8; }
.bg-list { list-style: none; margin: 0; padding: 0; counter-reset: bg; }
.bg-item { position: relative; padding: 0 0 15px 0; margin-bottom: 15px; border-bottom: 1px dashed var(--border); }
.bg-item:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.bi-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.bi-n {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
  background: color-mix(in srgb, var(--primary) 18%, transparent); color: var(--primary);
}
.bi-h b { font-size: 14px; color: var(--text); }
.bi-tx { font-size: 13.5px; line-height: 1.95; color: var(--text-2); }
.bi-tx b { color: var(--text); }
.bi-tx code {
  font-family: var(--mono); font-size: 11.5px; padding: 1px 5px;
  background: var(--surface-3); border-radius: 5px; color: var(--text-2);
}
/* ⑤「结果代表什么」是新手最该记住的一栏，给它一点底色 */
.bg-result .bi-tx {
  padding: 11px 14px; border-radius: var(--radius);
  background: color-mix(in srgb, var(--warn) 10%, transparent);
  border-left: 3px solid var(--warn);
}

.bg-params {
  margin-top: 14px; padding: 11px 15px;
  background: var(--surface-3); border-radius: var(--radius);
}
.bg-params > summary {
  cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--text-2);
  list-style: none;
}
.bg-params > summary::-webkit-details-marker { display: none; }
.bg-params > summary::after { content: " ▾"; color: var(--text-3); }
.bg-params[open] > summary::after { content: " ▴"; }
.bp-body { margin-top: 9px; font-size: 12.5px; line-height: 1.9; color: var(--text-2); }
.bp-body code {
  font-family: var(--mono); font-size: 11.5px; padding: 1px 5px;
  background: var(--surface); border-radius: 5px;
}

/* ---- 没有入门版时的降级提示条（方案 H 要求：绝不空页）---- */
.bg-fallback {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  margin: 0 0 22px; padding: 13px 17px;
  background: var(--surface-2); border: 1px dashed var(--border);
  border-radius: var(--radius);
}
.bf-ic { flex: none; font-size: 19px; }
.bf-tx { flex: 1; min-width: 220px; font-size: 12.5px; color: var(--text-3); line-height: 1.8; }
.bf-tx b { color: var(--text-2); }
.bf-btn {
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  padding: 6px 13px; border-radius: 20px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
}
.bf-btn:hover { border-color: var(--primary); color: var(--text); }

/* ---- 进阶参数折叠块在入门模式下淡化（方案 H §5）---- */
[data-mode="beginner"] .pro-only {
  opacity: .72;
}
[data-mode="beginner"] .pro-only > summary {
  font-size: 12.5px;
}

@media (max-width: 860px) {
  .mode-banner { padding: 13px 16px; gap: 10px; }
  .mb-acts { width: 100%; }
  .mb-btn { flex: 1; text-align: center; }
  .bg-block { padding: 16px 16px; }
  .bi-tx { font-size: 13px; line-height: 1.9; }
}

/* =========================================================
   学习路径（Roadmap，方案 L-3）
   ---------------------------------------------------------
   索引页 = 4 张路线卡（受众 / 终点 / 进度条）；
   详情页 = 阶段 + 勾选清单。
   「已勾选」的视觉态用**纯 CSS 兄弟选择器** `:checked ~ .rp-lab` 做，
   不靠 JS 加 class：勾选框是 .rp-item 的第一个子元素，位置固定，
   这样老浏览器（不支持 :has()）也能正常划线，且 DOM 桩里也能跑。
   ========================================================= */

/* ---------- 索引页：路线卡 ---------- */
.rp-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 16px;
  margin: 18px 0 10px;
}
.rp-card {
  display: block;
  padding: 17px 18px 13px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--rp-accent, var(--primary));
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: box-shadow .16s, transform .16s;
}
.rp-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.rp-card-top { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.rp-card-icon { font-size: 22px; line-height: 1; }
.rp-card-name { font-size: 17px; font-weight: 700; color: var(--text); }
.rp-card-aud {
  margin: 0 0 7px; font-size: 12.5px; line-height: 1.65; color: var(--rp-accent, var(--primary));
  font-weight: 600;
}
.rp-card-goal { margin: 0 0 12px; font-size: 13px; line-height: 1.7; color: var(--text-2); }
.rp-card-bar, .rp-bar {
  height: 7px; border-radius: 4px; background: var(--surface-3); overflow: hidden;
}
.rp-card-bar i, .rp-bar i {
  display: block; height: 100%; border-radius: 4px;
  background: var(--rp-accent, var(--primary)); transition: width .22s;
}
.rp-card-foot {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  margin-top: 8px; font-size: 12px; color: var(--text-3);
}
.rp-card-pct { font-weight: 700; color: var(--rp-accent, var(--primary)); font-variant-numeric: tabular-nums; }

/* ---------- 详情页：头部与进度区 ---------- */
.rp-aud {
  margin: 10px 0 0; font-size: 13px; line-height: 1.7; color: var(--text-2);
}
.rp-aud b { color: var(--text); }
.rp-prog {
  margin: 20px 0 26px; padding: 15px 18px 13px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  position: sticky; top: calc(var(--topbar-h) + 10px); z-index: 5;
}
.rp-prog-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 9px; }
.rp-prog-n { font-size: 14px; color: var(--text-2); }
.rp-prog-n b { font-size: 19px; color: var(--text); font-variant-numeric: tabular-nums; }
.rp-prog-p { font-size: 17px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.rp-prog-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin-top: 10px; font-size: 12px; color: var(--text-3);
}
.rp-reset {
  flex: none; padding: 4px 11px; font: inherit; font-size: 12px;
  background: transparent; color: var(--text-3);
  border: 1px solid var(--border-strong); border-radius: 8px; cursor: pointer;
}
.rp-reset:hover { color: var(--warn); border-color: var(--warn); }

/* ---------- 详情页：阶段与清单 ---------- */
.rp-stage { margin: 0 0 26px; }
.rp-stage-h {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 6px; padding: 0 0 8px; border-bottom: 1px solid var(--border);
  font-size: 17px; font-weight: 700; color: var(--text);
}
.rp-stage-n {
  flex: none; width: 25px; height: 25px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent);
  font-size: 13px; font-weight: 700;
}
.rp-stage-c {
  margin-left: auto; flex: none; font-size: 12.5px; font-weight: 600;
  color: var(--text-3); font-variant-numeric: tabular-nums;
}
.rp-stage-note {
  margin: 8px 0 13px; font-size: 13px; line-height: 1.78; color: var(--text-2);
  padding-left: 11px; border-left: 3px solid var(--accent-soft);
}
.rp-list { list-style: none; margin: 0; padding: 0; }
.rp-item {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface);
  margin-bottom: 7px;
}
.rp-item:hover { border-color: var(--border-strong); }
.rp-cb {
  flex: none; width: 17px; height: 17px; margin-top: 2px; cursor: pointer;
  accent-color: var(--accent);
}
.rp-lab { flex: 1; min-width: 0; cursor: pointer; display: block; }
.rp-name { display: block; font-size: 14.5px; font-weight: 600; color: var(--text); line-height: 1.5; }
.rp-grp { display: block; margin-top: 2px; font-size: 11.5px; color: var(--text-3); }
.rp-go {
  flex: none; align-self: center; font-size: 12.5px; font-weight: 600;
  color: var(--accent); text-decoration: none; white-space: nowrap;
}
.rp-go:hover { text-decoration: underline; }

/* 已勾选：划线 + 变灰。纯 CSS，勾选框与 label 是相邻兄弟 */
.rp-cb:checked ~ .rp-lab .rp-name {
  text-decoration: line-through; text-decoration-color: var(--text-3); color: var(--text-3);
}
.rp-item.is-done { background: var(--surface-2); }

/* =========================================================
 * 全站统一焦点环（方案 L-11 无障碍）
 *
 * 为什么必须有：浏览器默认的焦点环各家用各自的样式，深色主题下有些直接看不见；
 * 而这个站点里有一堆「自绘控件」（`.chip` / `.btn-soft` / `.btn-main` / 卡片式链接），
 * 它们既不是 <button> 也不是 <a>，默认根本不会画焦点环 ——
 * 键盘用户 Tab 过去之后完全不知道自己在哪。
 *
 * 为什么用 :focus-visible 而不是 :focus：鼠标点击也会触发 :focus，
 * 那样每点一下都闪一圈蓝框，很吵。:focus-visible 只在「键盘导航」时才出现。
 *
 * ⚠️ 特异度提醒：`#searchInput { outline: none }`（ID 选择器）会盖过这条，
 * 但它自己有一条 `:focus` 规则画 box-shadow 环，所以仍然看得见。
 * 判据在 .workbuddy-ai/tools/audit-a11y.mjs 第 ② 节（会区分「抹了但另有指示」与「抹了就没」）。
 * ========================================================= */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- 页脚与错误页 ---------- */
.rp-foot {
  margin: 20px 0 0; padding: 13px 15px; font-size: 12.5px; line-height: 1.8;
  color: var(--text-2); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.rp-foot code, .rp-miss-p code {
  font-family: var(--mono); font-size: .92em;
  background: var(--surface-3); padding: 1px 5px; border-radius: 5px;
}
.rp-miss { margin: 20px 0 8px; font-size: 20px; color: var(--text); }
.rp-miss-p { font-size: 13.5px; color: var(--text-2); line-height: 1.9; }

/* ---------- 窄屏 ---------- */
@media (max-width: 760px) {
  .rp-cards { grid-template-columns: 1fr; gap: 12px; }
  .rp-prog { position: static; }
  .rp-item { flex-wrap: wrap; }
  .rp-go { align-self: flex-start; margin-left: 28px; }
  .rp-prog-foot { flex-direction: column; align-items: flex-start; gap: 8px; }
  .rp-stage-h { flex-wrap: wrap; }
}

/* =========================================================
 * 分块加载失败提示条（方案 L-8 走查时补 · 见 lazy.js 纪律 ①b）
 *
 * 只在「按需注入的逐步详解确实没到」时出现，正常情况页面上没有这个元素。
 * 视觉上刻意做得像「故障」而不是「说明」：黄色警示边 + ⚠️，
 * 因为它要传达的是「这页少东西了」，不能让读者误当成一条普通提示划过去。
 * ========================================================= */
.lz-fail {
  display: flex; align-items: flex-start; gap: 11px; flex-wrap: wrap;
  margin: 0 0 18px; padding: 12px 14px;
  background: var(--warn-soft);
  border: 1px solid color-mix(in srgb, var(--warn) 40%, var(--border));
  border-left: 3px solid var(--warn);
  border-radius: 10px;
  font-size: 13px; line-height: 1.75; color: var(--text-2);
}
.lz-ic { flex: 0 0 auto; font-size: 15px; line-height: 1.5; }
.lz-tx { flex: 1 1 260px; min-width: 0; }
.lz-tx b { display: block; color: var(--text); font-size: 13.5px; margin-bottom: 3px; }
.lz-tx p { margin: 0; }
.lz-tx code {
  font-family: var(--mono); font-size: .92em;
  background: color-mix(in srgb, var(--warn) 12%, var(--surface));
  padding: 1px 5px; border-radius: 5px;
}
.lz-btn {
  flex: 0 0 auto; align-self: center;
  font-size: 12.5px; font-weight: 600; color: var(--warn);
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--border));
  border-radius: 999px; padding: 7px 15px;
}
.lz-btn:hover { background: color-mix(in srgb, var(--warn) 12%, var(--surface)); }
.lz-btn[disabled] { opacity: .6; cursor: default; }
.lz-btn:focus-visible { box-shadow: 0 0 0 2px color-mix(in srgb, var(--warn) 40%, transparent); }

/* =========================================================
 * 阅读统计页（L-9）—— #/stats
 *
 * 这一页的视觉目标是「像一张体检单，不像一张仪表盘」：
 *   · 主结论（覆盖率）用一条粗进度条讲完，不铺十几个数字卡片；
 *   · 「最常看」是排行列表，不是柱状图 —— 12 条数据画图反而更难读；
 *   · 「从没打开过」默认折叠，展开后是**可点击的清单**（能直接跳过去读）。
 * 颜色一律走既有变量，深色主题自动跟随（L-11 之后不再写死颜色）。
 * ========================================================= */
.nav-stat-link .ncl-ic { color: var(--accent); }

.st-note {
  margin: 14px 0 4px; padding: 13px 16px;
  font-size: 13px; line-height: 1.8; color: var(--text-2);
  background: var(--surface-2); border: 1px solid var(--border);
  border-left: 3px solid var(--accent); border-radius: 10px;
}
.st-note b { color: var(--text); }
.st-note code {
  font-family: var(--mono); font-size: .92em;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  padding: 1px 5px; border-radius: 5px;
}

/* 覆盖率条：唯一一个「图形」，因为它要表达的就是「一条进度」 */
.st-bar {
  position: relative; height: 10px; margin: 16px 0 6px;
  background: var(--surface-3); border-radius: 999px; overflow: hidden;
}
.st-bar-f {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--ok)));
  border-radius: 999px;
}

.st-empty {
  margin: 22px 0; padding: 22px 20px; text-align: center;
  background: var(--surface-2); border: 1px dashed var(--border); border-radius: 12px;
  font-size: 13.5px; line-height: 1.9; color: var(--text-2);
}
.st-empty p { margin: 0 0 10px; }
.st-empty p:last-child { margin-bottom: 0; }

.st-h {
  margin: 30px 0 12px; font-size: 16px; font-weight: 700; color: var(--text);
  padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.st-sub { font-size: 12.5px; font-weight: 400; color: var(--text-3); margin-left: 6px; }

/* 排行：序号用 CSS counter，不写进 HTML（省 12 个 span） */
.st-top { list-style: none; counter-reset: sttop; margin: 0; padding: 0; }
.st-top li {
  counter-increment: sttop;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 9px 4px; border-bottom: 1px solid var(--border);
  font-size: 13.5px;
}
.st-top li::before {
  content: counter(sttop); flex: 0 0 22px;
  font-family: var(--mono); font-size: 12px; color: var(--text-3); text-align: right;
}
.st-top a { color: var(--text); font-weight: 600; text-decoration: none; }
.st-top a:hover { color: var(--lay-ink, var(--lay-accent)); }
.st-cat {
  font-size: 11.5px; color: var(--text-3);
  border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px;
}
.st-n {
  margin-left: auto; font-family: var(--mono); font-size: 12px;
  color: var(--text-2); white-space: nowrap;
}
.st-when { flex: 0 0 auto; font-size: 11.5px; color: var(--text-3); white-space: nowrap; }

.st-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.st-tbl th, .st-tbl td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; }
.st-tbl th { font-size: 12px; color: var(--text-3); font-weight: 600; }
.st-mini {
  display: inline-block; width: 74px; height: 7px; vertical-align: middle;
  background: var(--surface-3); border-radius: 999px; overflow: hidden;
}
.st-mini-f { display: block; height: 100%; background: var(--accent); border-radius: 999px; }

.st-tip {
  margin: 10px 0 14px; font-size: 12.5px; line-height: 1.8; color: var(--text-3);
}
.st-tip b { color: var(--text-2); }
.st-tip code {
  font-family: var(--mono); font-size: .94em;
  background: var(--surface-3); padding: 1px 5px; border-radius: 5px;
}

.st-cold { border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px; overflow: hidden; }
.st-cold > summary {
  cursor: pointer; padding: 11px 14px; font-size: 13.5px; font-weight: 600; color: var(--text);
  background: var(--surface-2); display: flex; align-items: center; gap: 10px;
}
.st-cold > summary::-webkit-details-marker { display: none; }
.st-cold > summary::before { content: "▸"; color: var(--text-3); font-size: 11px; }
.st-cold[open] > summary::before { content: "▾"; }
.st-cold ul { list-style: none; margin: 0; padding: 8px 14px 12px; }
.st-cold li {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 6px 0; font-size: 13px; border-bottom: 1px dashed var(--border);
}
.st-cold li:last-child { border-bottom: none; }
.st-cold a { color: var(--text-2); text-decoration: none; }
.st-cold a:hover { color: var(--lay-ink, var(--lay-accent)); text-decoration: underline; }
.st-cold .st-cat { margin-left: auto; }
.st-more { color: var(--text-3); font-size: 12.5px; }
.st-more a { color: var(--accent); }

.st-foot {
  margin: 30px 0 10px; padding-top: 16px; border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.st-foot-tx { font-size: 12.5px; color: var(--text-3); }
.st-foot-tx b { color: var(--text-2); }

@media (max-width: 640px) {
  .st-top li { gap: 6px; }
  .st-n { margin-left: 0; }
  .st-when { margin-left: auto; }
  .st-mini { width: 46px; }
  .st-tbl th, .st-tbl td { padding: 7px 6px; }
}