/* 雅思讲台 · IELTS Lectern
   ─────────────────────────────────────────────────────────────
   双主题：深色液态玻璃（默认）/ 浅色玻璃。
   全部尺寸走 --u 单位系统，玻璃配方按层级分档。

   主题切换：<html data-theme="light|dark">，存 localStorage。
   ───────────────────────────────────────────────────────────── */

:root {
  /* 单位系统：一套代码适配所有屏 */
  --u: min(100vw / 1440, 100dvh / 900);
  --e-out: cubic-bezier(.16,1,.3,1);
  --e-soft: cubic-bezier(.22,.61,.36,1);
  --e-pen: cubic-bezier(.37,.01,.2,1);

  --r-lg: 22px;
  --r: 16px;
  --r-sm: 11px;

  /* 语义色（两主题共用，只调透明度差） */
  --c-teal: #5eead4;
  --c-amber: #fbbf24;
  --c-rose: #fda4af;
  --c-violet: #c4b5fd;
  --c-sky: #7dd3fc;
}

/* ═══════════════ 深色玻璃（默认）═══════════════ */
:root, [data-theme="dark"] {
  color-scheme: dark;

  --bg-base: #06222e;
  --ink: #ffffff;
  --ink-1: rgba(255,255,255,.95);
  /* 品牌标识的实心点 —— 近白，与强调色拉开明度差
     （SVG 的 presentation attribute 支持 var()，能穿透 <use> 引用） */
  --brand-dot: rgba(255,255,255,.92);
  --ink-2: rgba(255,255,255,.80);
  --ink-3: rgba(255,255,255,.60);
  --ink-4: rgba(255,255,255,.40);

  /* 玻璃配方：按层级分三档，越靠前越实 */
  --glass-1: rgba(255,255,255,.155);   /* 侧栏 */
  --glass-2: rgba(255,255,255,.175);   /* 工具/chip */
  --glass-3: rgba(255,255,255,.225);   /* 主卡 */
  --glass-line: rgba(255,255,255,.16);
  --glass-line-2: rgba(255,255,255,.26);

  --blur-1: blur(18px) saturate(115%);
  --blur-2: blur(16px) saturate(115%);
  --blur-3: blur(26px) saturate(118%);

  --track: rgba(255,255,255,.16);
  --sheen: rgba(255,255,255,.17);
  --shadow: 0 8px 32px rgba(0,0,0,.28);
  --shadow-lg: 0 20px 56px rgba(0,0,0,.38);

  --panel-tint: rgba(255,255,255,.06);
  --hover: rgba(255,255,255,.10);
  --active: rgba(255,255,255,.16);
  --focus-ring: rgba(255,255,255,.85);
}

/* ═══════════════ 浅色玻璃 ═══════════════ */
[data-theme="light"] {
  color-scheme: light;

  --bg-base: #e8eef8;
  --ink: #0d1b2a;
  --ink-1: rgba(13,27,42,.95);
  /* 品牌标识的实心点 —— 浅色主题用近黑，与强调色拉开明度差 */
  --brand-dot: rgba(13,27,42,.88);
  --ink-2: rgba(13,27,42,.74);
  --ink-3: rgba(13,27,42,.54);
  --ink-4: rgba(13,27,42,.34);

  --glass-1: rgba(255,255,255,.58);
  --glass-2: rgba(255,255,255,.66);
  --glass-3: rgba(255,255,255,.78);
  --glass-line: rgba(13,27,42,.09);
  --glass-line-2: rgba(13,27,42,.16);

  --blur-1: blur(18px) saturate(130%);
  --blur-2: blur(16px) saturate(130%);
  --blur-3: blur(24px) saturate(135%);

  --track: rgba(13,27,42,.10);
  --sheen: rgba(255,255,255,.55);
  --shadow: 0 6px 22px rgba(13,27,42,.07);
  --shadow-lg: 0 18px 48px rgba(13,27,42,.12);

  --panel-tint: rgba(13,27,42,.035);
  --hover: rgba(13,27,42,.055);
  --active: rgba(13,27,42,.09);
  --focus-ring: rgba(13,27,42,.55);

  /* 浅色下的语义色要加深，否则在白底上看不清 */
  --c-teal: #0d9488;
  --c-amber: #b45309;
  --c-rose: #be123c;
  --c-violet: #6d28d9;
  --c-sky: #0369a1;
}

@supports not (height: 100dvh) { :root { --u: min(100vw / 1440, 100vh / 900); } }

* { box-sizing: border-box; }
/* ═══════════ 0. 元素重置 ═══════════
   button 的浏览器默认样式是**浅灰底 + 2px outset 边框**
   （Chrome: rgb(107,107,107)）——
   在深色主题下就是一个突兀的浅灰方块。

   这个坑踩过两次：
     · tb-brand —— 顶栏品牌区一直带着灰底方框，
       因为默认的浅灰文字颜色把问题掩盖了很久
     · rms-item —— 移动端「更多视图」抽屉 22 个按钮全是默认样式

   根因是没有全局 button reset，每个用到的按钮都得自己清一遍，
   漏一个就坏一个。所以在这里一次清干净。 */
button {
  background: none; border: none; padding: 0;
  font-family: inherit; color: inherit; text-align: inherit;
  -webkit-appearance: none; appearance: none;
}
button:not(:disabled) { cursor: pointer; }
input, select, textarea { font-family: inherit; }
img, svg { display: block; }
html, body { margin: 0; padding: 0; min-height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
    'Hiragino Sans GB', 'Microsoft YaHei', Roboto, sans-serif;
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
  color: var(--ink);
  background: var(--bg-base);
  font-size: 14px;
  line-height: 1.62;
  overflow-x: hidden;
}

/* ═══════════ 背景层（双主题共用结构，色值随主题变）═══════════ */
.bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(1150px 700px at 14% 4%,  rgba(20,184,166,.42), transparent 56%),
    radial-gradient(900px 620px at 86% 10%,   rgba(99,102,241,.36), transparent 58%),
    radial-gradient(820px 520px at 62% 46%,   rgba(14,165,233,.18), transparent 60%),
    radial-gradient(1000px 740px at 58% 100%, rgba(8,47,73,.58),   transparent 62%),
    linear-gradient(158deg, var(--bg-base) 0%, #07283a 42%, #041520 100%);
}
[data-theme="light"] .bg {
  background:
    radial-gradient(1150px 700px at 14% 4%,  rgba(45,212,191,.40), transparent 56%),
    radial-gradient(900px 620px at 86% 10%,   rgba(129,140,248,.38), transparent 58%),
    radial-gradient(820px 520px at 62% 46%,   rgba(125,211,252,.34), transparent 60%),
    radial-gradient(1000px 740px at 58% 100%, rgba(255,255,255,.70),  transparent 62%),
    linear-gradient(158deg, #eef3fb 0%, #e6edf9 44%, #eef1f8 100%);
}
.bg::after {
  content: ""; position: absolute; inset: 0;
  opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
}
[data-theme="light"] .bg::after { opacity: .04; mix-blend-mode: multiply; }

/* ═══════════ 布局：顶栏 + 图标侧栏 + 主区 + 右侧面板 ═══════════ */
.shell {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto 1fr;
  min-height: 100vh;
}
/* 顶栏跨全宽 */
.topbar { grid-column: 1 / -1; }

/* ── 侧栏 ── */
.rail {
  position: sticky; top: calc(62 * var(--u));
  height: calc(100vh - calc(62 * var(--u)) - calc(28 * var(--u)));
  width: calc(72 * var(--u));
  flex: 0 0 auto;
  margin: 0 0 calc(14 * var(--u)) calc(16 * var(--u));
  border-radius: calc(20 * var(--u));
  background: var(--glass-1);
  backdrop-filter: var(--blur-1);
  -webkit-backdrop-filter: var(--blur-1);
  border: 1px solid var(--glass-line);
  display: flex; flex-direction: column; align-items: center;
  padding: calc(18 * var(--u)) 0 calc(16 * var(--u));
  transition: width .38s var(--e-out), border-radius .38s var(--e-out);
  overflow: hidden;
  z-index: 20;
}
.rail.open { width: calc(212 * var(--u)); align-items: stretch; }

.rail-pip {
  position: absolute; left: 0; top: calc(126 * var(--u));
  width: calc(4 * var(--u)); height: calc(28 * var(--u));
  border-radius: 0 calc(3 * var(--u)) calc(3 * var(--u)) 0;
  background: var(--c-teal);
  box-shadow: 0 0 calc(10 * var(--u)) var(--c-teal);
  transition: top .3s var(--e-out);
}

.rail-logo {
  width: calc(40 * var(--u)); height: calc(40 * var(--u));
  flex: 0 0 auto; margin-bottom: calc(4 * var(--u));
}
/* 品牌区 —— 展开态 logo 与品牌名并排一行 */
.rail-top { display: contents; }
/* 折叠态：logo 只剩三道波纹（去掉外框方块），不再像一个空按钮；
   display:contents 下它是 rail 的直接 flex 子项，所以要 align-self 居中 */
.rail:not(.open) .rail-logo {
  width: calc(26 * var(--u)); height: calc(26 * var(--u));
  margin-bottom: calc(6 * var(--u));
  color: var(--acc);
  align-self: center;
}
.rail-brand {
  display: none; align-items: baseline; gap: calc(8 * var(--u));
  padding: 0 calc(16 * var(--u)) calc(10 * var(--u));
}
.rail.open .rail-brand { display: flex; }
.rail-brand .bn { font-size: calc(15 * var(--u)); font-weight: 800; letter-spacing: calc(-.2 * var(--u)); white-space: nowrap; }
.rail-brand .bs { font-size: calc(10.5 * var(--u)); color: var(--ink-3); white-space: nowrap; }
/* 展开态：logo 与品牌名同一行 —— 需要 rail 顶部是一个 flex 行而不是 display:contents */
.rail.open .rail-top {
  display: flex; align-items: center; gap: calc(9 * var(--u));
  width: 100%; padding: 0 calc(14 * var(--u)) calc(8 * var(--u));
}
.rail.open .rail-top .rail-logo { margin-bottom: 0; width: calc(26 * var(--u)); height: calc(26 * var(--u)); }
.rail.open .rail-top .rail-brand { padding: 0; display: flex; align-items: baseline; }
.rail.open .rail-top .rail-brand .bs { align-self: center; }

.rail-nav {
  margin-top: calc(34 * var(--u));
  display: flex; flex-direction: column; gap: calc(4 * var(--u));
  width: 100%; align-items: center;
  /* 19 项图标在矮屏放不下 → 导航区自己滚，底部渐隐提示还有更多 */
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--glass-line-2) transparent;
  mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 22 * var(--u)), transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 22 * var(--u)), transparent 100%);
}
.rail-nav::-webkit-scrollbar { width: calc(4 * var(--u)); }
.rail-nav::-webkit-scrollbar-thumb { background: var(--glass-line-2); border-radius: calc(4 * var(--u)); }
.rail-nav::-webkit-scrollbar-track { background: transparent; }
.rail.open .rail-nav { align-items: stretch; }
/* 分组标题：展开态显示文字，折叠态收成一条分隔线
   用 ::before 画线而不是给 div 设 height —— div 内含 span，
   在 flex 容器里 height:1px 会被内容盒模型吃掉。 */
.rail-sec { display: none; width: 100%; position: relative; }
.rail.open .rail-sec { display: block; }
.rail-sec-t {
  display: none;
}
.rail.open .rail-sec-t {
  display: block;
  font-size: calc(9.5 * var(--u)); font-weight: 800; letter-spacing: calc(1 * var(--u));
  color: var(--ink-4); text-transform: uppercase;
  margin: calc(12 * var(--u)) 0 calc(4 * var(--u));
  padding-left: calc(18 * var(--u)); white-space: nowrap;
}
/* 折叠态：组与组之间用一条短横线分隔，保留「有分组」的信息 */
.rail:not(.open) .rail-sec {
  display: block;
  height: 1px;
  margin: calc(9 * var(--u)) auto;
}
.rail:not(.open) .rail-sec::before {
  content: ""; display: block;
  width: calc(20 * var(--u)); height: 1px;
  margin: 0 auto;
  background: var(--glass-line-2);
  border-radius: 1px;
}
.rail:not(.open) .rail-sec:first-child { display: none; }

.rail-item {
  position: relative;
  display: flex; align-items: center; gap: calc(12 * var(--u));
  width: calc(46 * var(--u)); height: calc(42 * var(--u));
  padding: 0; border: none; background: none; cursor: pointer;
  color: var(--ink-2); border-radius: calc(12 * var(--u));
  justify-content: center; flex: 0 0 auto;
  transition: background .18s var(--e-out), color .18s var(--e-out);
  font-family: inherit; font-size: calc(13 * var(--u));
}
.rail.open .rail-item { width: auto; padding: 0 calc(14 * var(--u)); justify-content: flex-start; }
.rail-item:hover { background: var(--hover); color: var(--ink-1); }
.rail-item.on { background: var(--active); color: var(--ink-1); }
/* 选中态左侧色条 —— 折叠成图标条时，「我在哪」只能靠它 */
.rail-item.on::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: calc(3 * var(--u)); height: calc(16 * var(--u));
  transform: translateY(-50%);
  border-radius: 0 calc(3 * var(--u)) calc(3 * var(--u)) 0;
  background: var(--c-teal);
  box-shadow: 0 0 calc(8 * var(--u)) var(--c-teal);
}
.rail.open .rail-item.on::before { left: calc(-14 * var(--u)); }
.rail-item .ri {
  width: calc(21 * var(--u)); height: calc(21 * var(--u));
  flex: 0 0 auto; display: grid; place-items: center;
}
.rail-item .ri svg { width: 100%; height: 100%; }
.rail-item .rl {
  display: none; white-space: nowrap; font-weight: 600; font-size: calc(12.5 * var(--u));
}
.rail.open .rail-item .rl { display: block; }
.rail-item .rc {
  display: none; margin-left: auto; font-size: calc(9.5 * var(--u));
  color: var(--ink-4); font-variant-numeric: tabular-nums;
}
.rail.open .rail-item .rc { display: block; }

/* 折叠态 tooltip —— 唯一的文字线索来源
   用 JS 定位到 body 层（.rail 有 overflow:hidden，伪元素伸出侧栏必被裁切），
   挂在 rail-tip 上，由 app.js 的 hover 事件驱动。 */
.rail-tip {
  position: fixed; z-index: 90; pointer-events: none;
  padding: calc(4 * var(--u)) calc(9 * var(--u));
  border-radius: calc(7 * var(--u));
  background: var(--n-750); color: var(--ink-1);
  border: 1px solid var(--glass-line-2);
  font-size: calc(11.5 * var(--u)); font-weight: 600;
  white-space: nowrap; line-height: 1.3;
  box-shadow: var(--shadow);
  opacity: 0; transform: translateY(-50%) translateX(calc(-4 * var(--u)));
  transition: opacity .14s var(--e-out), transform .14s var(--e-out);
}
.rail-tip.on { opacity: 1; transform: translateY(-50%) translateX(0); }
.rail-tip .n { color: var(--ink-4); font-weight: 400; margin-left: calc(6 * var(--u)); }

.rail-spacer { flex: 1 1 auto; min-height: calc(12 * var(--u)); }

/* 侧栏折叠控制 —— 唯一入口在页头（.pg-fold），侧栏本身不再挂浮动把手。
   原因：把手浮在侧栏上时，会同时与 logo 方块、图标列抢空间，
   折叠态只剩 72px 宽，圆形把手正好压在图标列右侧。
   移到页头后：
     · 侧栏顶部只剩品牌标识，干净
     · 折叠/展开状态在页头可见，不依赖侧栏宽度
     · 展开态图标有文字，tooltip 不再是唯一线索 */
.pg-fold {
  width: calc(30 * var(--u)); height: calc(30 * var(--u));
  border-radius: calc(9 * var(--u)); flex: 0 0 auto;
  border: 1px solid var(--glass-line);
  background: var(--n-850); color: var(--ink-3);
  display: grid; place-items: center; cursor: pointer;
  margin-top: calc(3 * var(--u));
  transition: background .18s var(--e-out), color .18s var(--e-out),
              border-color .18s var(--e-out);
}
.pg-fold:hover { background: var(--n-750); color: var(--ink); border-color: var(--glass-line-2); }
.pg-fold svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); transition: transform .38s var(--e-out); }
/* 展开态：箭头朝左 = 收起；折叠态：朝右 = 展开 */
.rail.open ~ .main .pg-fold svg { transform: rotate(180deg); }

/* ── 主区 ── */
.main {
  min-width: 0;
  padding: calc(14 * var(--u)) calc(20 * var(--u)) calc(60 * var(--u));
  position: relative;
}
.main-inner {
  max-width: calc(1240 * var(--u));   /* 上限放宽：右侧栏存在时主区可以更宽 */
  width: 100%;
}

/* ── 页头 ── */
.p-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: calc(16 * var(--u)); margin-bottom: calc(18 * var(--u));
}
.p-head .hi { font-size: calc(15 * var(--u)); color: var(--ink-2); }
.p-head .hn {
  font-size: calc(19 * var(--u)); font-weight: 700; letter-spacing: calc(-.35 * var(--u));
  margin-top: calc(3 * var(--u));
}
.p-tools { display: flex; gap: calc(10 * var(--u)); align-items: center; }
.p-tool {
  width: calc(42 * var(--u)); height: calc(42 * var(--u)); border-radius: 50%;
  border: 1px solid var(--glass-line); background: var(--glass-2);
  backdrop-filter: var(--blur-2); -webkit-backdrop-filter: var(--blur-2);
  color: var(--ink-1); cursor: pointer; display: grid; place-items: center;
  transition: background .18s var(--e-out);
}
.p-tool:hover { background: var(--hover); }
.p-tool svg { width: calc(17 * var(--u)); height: calc(17 * var(--u)); }

/* ═══════════ 通用组件 ═══════════ */
.g-card {
  background: var(--glass-3);
  backdrop-filter: var(--blur-3); -webkit-backdrop-filter: var(--blur-3);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-lg);
  padding: calc(18 * var(--u)) calc(20 * var(--u));
  box-shadow: var(--shadow);
  margin-bottom: calc(14 * var(--u));
  position: relative; overflow: hidden;
}
.g-card.tight { padding: calc(14 * var(--u)) calc(16 * var(--u)); }
.g-card h3 {
  margin: 0 0 calc(4 * var(--u)); font-size: calc(15.5 * var(--u));
  font-weight: 700; display: flex; align-items: center; gap: calc(8 * var(--u));
  flex-wrap: wrap; color: var(--ink);
}
.g-card .sub {
  margin: 0 0 calc(13 * var(--u)); font-size: calc(12.5 * var(--u));
  color: var(--ink-3); line-height: 1.68;
}

/* 标签 */
.p-tag {
  display: inline-block; padding: calc(2.5 * var(--u)) calc(9 * var(--u));
  border-radius: 999px; font-size: calc(10.5 * var(--u)); font-weight: 700;
  background: var(--panel-tint); color: var(--ink-2); white-space: nowrap;
  border: 1px solid var(--glass-line);
}
.p-tag.teal { color: var(--c-teal); border-color: color-mix(in srgb, var(--c-teal) 32%, transparent); }
.p-tag.amber { color: var(--c-amber); border-color: color-mix(in srgb, var(--c-amber) 32%, transparent); }
.p-tag.rose { color: var(--c-rose); border-color: color-mix(in srgb, var(--c-rose) 32%, transparent); }
.p-tag.violet { color: var(--c-violet); border-color: color-mix(in srgb, var(--c-violet) 32%, transparent); }
.p-tag.sky { color: var(--c-sky); border-color: color-mix(in srgb, var(--c-sky) 32%, transparent); }

/* 证据等级 */
.p-ev {
  font-size: calc(9.5 * var(--u)); font-weight: 800; padding: calc(2 * var(--u)) calc(6 * var(--u));
  border-radius: calc(5 * var(--u)); font-family: ui-monospace, Menlo, monospace;
  border: 1px solid var(--glass-line-2); color: var(--ink-2);
}
.p-ev.L4 { color: #16a34a; } .p-ev.L3 { color: #2563eb; }
.p-ev.L2 { color: #ca8a04; } .p-ev.L1 { color: #64748b; } .p-ev.L0 { color: #dc2626; }
.p-ev["L4-A"] { color: #dc2626; } .p-ev["L4-B"] { color: #16a34a; } .p-ev["L4-C"] { color: #0891b2; }

/* 块（左边线） */
.g-block { border-left: 3px solid var(--glass-line-2); padding: calc(2 * var(--u)) 0 calc(2 * var(--u)) calc(14 * var(--u)); margin-bottom: calc(13 * var(--u)); }
.g-block .bh {
  font-size: calc(11 * var(--u)); font-weight: 800; color: var(--ink-1);
  margin-bottom: calc(5 * var(--u)); letter-spacing: calc(.3 * var(--u));
  display: flex; align-items: center; gap: calc(6 * var(--u)); flex-wrap: wrap;
}
.g-block .bc { font-size: calc(13 * var(--u)); color: var(--ink-2); line-height: 1.8; }
.g-block ul { margin: 0; padding-left: calc(19 * var(--u)); }
.g-block li { font-size: calc(13 * var(--u)); color: var(--ink-2); line-height: 1.8; margin-bottom: calc(3 * var(--u)); }
.g-block.risk { border-left-color: var(--c-rose); } .g-block.risk .bh { color: var(--c-rose); }
.g-block.ok { border-left-color: var(--c-teal); } .g-block.ok .bh { color: var(--c-teal); }
.g-block.warn { border-left-color: var(--c-amber); } .g-block.warn .bh { color: var(--c-amber); }
.g-block.info { border-left-color: var(--c-sky); } .g-block.info .bh { color: var(--c-sky); }
.g-block.violet { border-left-color: var(--c-violet); } .g-block.violet .bh { color: var(--c-violet); }
.g-block.official { border-left-color: var(--ink-2); }
.g-block.official .bc { font-style: italic; color: var(--ink-3); font-size: calc(12.5 * var(--u)); }

/* 网格 */
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: calc(14 * var(--u)); }
.g3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(250 * var(--u)), 1fr)); gap: calc(12 * var(--u)); }
@media (max-width: 1100px) { .g2 { grid-template-columns: 1fr; } }

/* 统计 */
.g-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(126 * var(--u)), 1fr)); gap: calc(11 * var(--u)); margin-bottom: calc(16 * var(--u)); }
.g-stat {
  background: var(--glass-2);
  backdrop-filter: var(--blur-2); -webkit-backdrop-filter: var(--blur-2);
  border: 1px solid var(--glass-line);
  border-radius: var(--r); padding: calc(13 * var(--u)) calc(15 * var(--u));
}
.g-stat .v {
  font-size: calc(23 * var(--u)); font-weight: 800; line-height: 1;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.g-stat .l { font-size: calc(11 * var(--u)); color: var(--ink-3); margin-top: calc(5 * var(--u)); }

/* 筛选按钮 */
.g-filters { display: flex; gap: calc(7 * var(--u)); flex-wrap: wrap; margin-bottom: calc(13 * var(--u)); }
.g-f {
  padding: calc(6 * var(--u)) calc(13 * var(--u)); border-radius: calc(9 * var(--u));
  font-size: calc(12.5 * var(--u)); font-weight: 600;
  border: 1px solid var(--glass-line); background: var(--glass-2);
  backdrop-filter: var(--blur-2); -webkit-backdrop-filter: var(--blur-2);
  color: var(--ink-2); cursor: pointer; transition: all .16s var(--e-out); font-family: inherit;
}
.g-f:hover { border-color: var(--glass-line-2); color: var(--ink-1); }
.g-f.on { background: var(--active); border-color: var(--glass-line-2); color: var(--ink); }
.g-f .n { opacity: .65; margin-left: calc(3 * var(--u)); font-weight: 400; }

/* 表单 */
.g-inp {
  width: 100%; border: 1px solid var(--glass-line-2); border-radius: var(--r-sm);
  padding: calc(9 * var(--u)) calc(12 * var(--u)); font-size: calc(13 * var(--u));
  font-family: inherit; color: var(--ink);
  background: var(--glass-2); resize: vertical; line-height: 1.7;
}
.g-inp:focus { outline: none; border-color: var(--c-sky); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-sky) 18%, transparent); }
.g-lbl { font-size: calc(11.5 * var(--u)); font-weight: 700; color: var(--ink-2); margin: 0 0 calc(5 * var(--u)); display: flex; align-items: center; gap: calc(6 * var(--u)); }
.g-lbl .hint { font-weight: 400; color: var(--ink-3); font-size: calc(10.5 * var(--u)); }
.g-btn {
  border: 1px solid transparent; border-radius: var(--r-sm);
  padding: calc(9 * var(--u)) calc(17 * var(--u)); font-size: calc(13 * var(--u));
  font-weight: 700; cursor: pointer;
  background: var(--ink-1); color: var(--bg-base);
  transition: opacity .16s var(--e-out); font-family: inherit;
}
.g-btn:hover { opacity: .88; }
.g-btn.ghost { background: var(--glass-2); color: var(--ink-1); border-color: var(--glass-line-2); }
.g-btn.ghost:hover { background: var(--hover); opacity: 1; }
.g-btn.sm { padding: calc(6 * var(--u)) calc(12 * var(--u)); font-size: calc(12 * var(--u)); }

/* 表格 */
.g-tbl { width: 100%; border-collapse: collapse; font-size: calc(12.5 * var(--u)); }
.g-tbl th {
  text-align: left; padding: calc(8 * var(--u)) calc(10 * var(--u));
  background: var(--panel-tint); color: var(--ink-2); font-weight: 700;
  border-bottom: 1px solid var(--glass-line-2); font-size: calc(11 * var(--u));
}
.g-tbl td { padding: calc(8 * var(--u)) calc(10 * var(--u)); border-bottom: 1px solid var(--glass-line); color: var(--ink-2); line-height: 1.65; vertical-align: top; }
.g-tbl tr:last-child td { border-bottom: none; }
.g-tbl td b { color: var(--ink); }

/* 列表卡（长内容用） */
.g-item {
  border: 1px solid var(--glass-line); border-radius: var(--r);
  padding: calc(14 * var(--u)) calc(16 * var(--u)); margin-bottom: calc(11 * var(--u));
  background: var(--panel-tint); transition: border-color .16s var(--e-out);
}
.g-item:hover { border-color: var(--glass-line-2); }
.g-item .ih { display: flex; gap: calc(6 * var(--u)); flex-wrap: wrap; align-items: center; margin-bottom: calc(9 * var(--u)); }
.g-item .it { font-size: calc(14 * var(--u)); color: var(--ink); line-height: 1.7; font-weight: 500; margin-bottom: calc(8 * var(--u)); }
.g-item .isub { font-size: calc(12.5 * var(--u)); color: var(--ink-3); line-height: 1.7; padding-left: calc(11 * var(--u)); border-left: 2px solid var(--glass-line-2); margin-bottom: calc(8 * var(--u)); }
.g-item .irow { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(220 * var(--u)), 1fr)); gap: calc(10 * var(--u)); }
.g-item .icell { background: var(--panel-tint); border-radius: var(--r-sm); padding: calc(10 * var(--u)) calc(12 * var(--u)); }
.g-item .icell .ik { font-size: calc(10 * var(--u)); font-weight: 800; color: var(--c-sky); margin-bottom: calc(4 * var(--u)); letter-spacing: calc(.3 * var(--u)); }
.g-item .icell.risk .ik { color: var(--c-rose); }
.g-item .icell.ok .ik { color: var(--c-teal); }
.g-item .icell.violet .ik { color: var(--c-violet); }
.g-item .icell .iv { font-size: calc(12.5 * var(--u)); color: var(--ink-2); line-height: 1.72; }
.g-item .icell .iv ul { margin: 0; padding-left: calc(17 * var(--u)); }
.g-item .icell .iv li { margin-bottom: calc(2 * var(--u)); }

/* 进度条 */
.g-bar { height: calc(4 * var(--u)); border-radius: calc(2 * var(--u)); background: var(--track); overflow: hidden; margin-top: calc(9 * var(--u)); }
.g-bar > i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--c-teal), var(--ink-1)); }

/* 空态 */
.g-empty { text-align: center; padding: calc(34 * var(--u)) calc(20 * var(--u)); color: var(--ink-3); font-size: calc(13 * var(--u)); }

/* 可折叠 */
.g-fold { border: 1px solid var(--glass-line); border-radius: var(--r); overflow: hidden; margin-bottom: calc(12 * var(--u)); background: var(--panel-tint); }
.g-fold > .fh {
  padding: calc(13 * var(--u)) calc(16 * var(--u)); cursor: pointer;
  display: flex; gap: calc(12 * var(--u)); align-items: flex-start;
  border: none; background: none; width: 100%; text-align: left; font-family: inherit; color: inherit;
}
.g-fold > .fh:hover { background: var(--hover); }
.g-fold .fn { font-size: calc(14.5 * var(--u)); font-weight: 800; color: var(--ink); }
.g-fold .fh2 { font-size: calc(12.5 * var(--u)); color: var(--ink-2); margin-top: calc(3 * var(--u)); line-height: 1.65; }
.g-fold .fb { padding: 0 calc(16 * var(--u)) calc(16 * var(--u)); border-top: 1px solid var(--glass-line); padding-top: calc(13 * var(--u)); }
.g-fold.closed .fb { display: none; }
.g-fold .arrow { color: var(--ink-3); font-size: calc(11 * var(--u)); margin-left: auto; flex: 0 0 auto; transition: transform .3s var(--e-out); }
.g-fold.open .arrow { transform: rotate(90deg); }

/* 焦点 */
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: calc(4 * var(--u)); }

/* 滚动条 */
::-webkit-scrollbar { width: calc(9 * var(--u)); height: calc(9 * var(--u)); }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--track); border-radius: calc(5 * var(--u)); }
::-webkit-scrollbar-thumb:hover { background: var(--glass-line-2); }

/* 打印 */
@media print {
  .rail, .p-tools, .g-filters, .g-btn, .particles { display: none !important; }
  body { background: #fff !important; }
  .g-card { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; background: #fff; }
  .shell { display: block; }
}

/* 移动端 */
@media (max-width: 900px) {
  :root { --u: min(100vw / 430, 1.25px); }
  .shell { grid-template-columns: 1fr; }

  /* 底部 dock —— 2026-10-28 重做
     旧版把 19 个视图全部横排进 dock，必然溢出（实测 scrollWidth 723 > 390）。
     新版：dock 只放 **5 个高频视图 + 更多按钮**，
     其余视图收进「更多」抽屉（上滑面板）。 */
  .rail {
    position: fixed; left: calc(10 * var(--u)); right: calc(10 * var(--u));
    bottom: calc(10 * var(--u)); top: auto; width: auto; height: calc(56 * var(--u));
    margin: 0; border-radius: calc(18 * var(--u));
    flex-direction: row; justify-content: space-around; align-items: center;
    padding: 0 calc(6 * var(--u));
    z-index: 35;
    background: color-mix(in srgb, var(--n-850) 94%, transparent);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  }
  .rail-brand, .rail-sec, .rail-item .rl, .rail-item .rc { display: none !important; }
  /* 移动端 dock：侧栏是底部栏，折叠按钮与 logo 都无意义 */
  .rail-logo { display: none; }
  .rail-nav {
    margin: 0; flex-direction: row; gap: calc(2 * var(--u));
    align-items: center; justify-content: space-around;
    width: 100%; overflow: visible;
    mask-image: none; -webkit-mask-image: none;
    overflow-y: visible;
  }
  .rail-item {
    width: calc(40 * var(--u)); height: calc(40 * var(--u));
    flex: 1 1 0; max-width: calc(52 * var(--u));
  }
  /* 页头折叠按钮在移动端隐藏 —— 底部 dock 已经占满宽度 */
  .pg-fold { display: none; }

  /* dock 上只显示前 5 个 + 更多按钮 */
  .rail-item:nth-child(n+6) { display: none; }
  .rail-more {
    width: calc(40 * var(--u)); height: calc(40 * var(--u));
    flex: 1 1 0; max-width: calc(52 * var(--u));
    border: none; background: none; cursor: pointer;
    border-radius: calc(11 * var(--u));
    color: var(--ink-2);
    display: grid; place-items: center;
  }
  .rail-more svg { width: calc(19 * var(--u)); height: calc(19 * var(--u)); }

  /* 更多抽屉：上滑面板 */
  .rail-more-sheet {
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 45;
    max-height: 72vh;
    overflow-y: auto;
    padding: calc(16 * var(--u)) calc(14 * var(--u)) calc(80 * var(--u));
    border-radius: calc(20 * var(--u)) calc(20 * var(--u)) 0 0;
    background: var(--n-850);
    border-top: 1px solid var(--glass-line-2);
    box-shadow: var(--shadow-lg);
    transform: translateY(100%);
    transition: transform .3s var(--e-out);
  }
  .rail-more-sheet.open { transform: translateY(0); }
  .rms-h {
    font-size: var(--fs-4); font-weight: 800; color: var(--ink);
    margin-bottom: calc(10 * var(--u));
    display: flex; align-items: center; justify-content: space-between;
  }
  .rms-sec {
    font-size: var(--fs-2); font-weight: 800; color: var(--ink-4);
    letter-spacing: calc(.8 * var(--u)); text-transform: uppercase;
    margin: calc(12 * var(--u)) 0 calc(5 * var(--u));
  }
  .rms-item {
    display: flex; align-items: center; gap: calc(11 * var(--u));
    width: 100%; text-align: left; cursor: pointer;
    padding: calc(9 * var(--u)) calc(11 * var(--u));
    margin-bottom: calc(3 * var(--u));
    border: none; border-radius: calc(11 * var(--u));
    background: var(--n-800); color: var(--ink-1);
    font-family: inherit; font-size: var(--fs-4);
  }
  .rms-item .ri { width: calc(19 * var(--u)); height: calc(19 * var(--u)); color: var(--ink-3); }
  .rms-item.on { background: var(--acc); color: var(--acc-ink); }
  .rms-item.on .ri { color: var(--acc-ink); }

  .main { padding: calc(16 * var(--u)) calc(14 * var(--u)) calc(84 * var(--u)); }
  .g2 { grid-template-columns: 1fr; }
  .g-item .irow { grid-template-columns: 1fr; }
  .g-tbl { display: block; overflow-x: auto; }
}
@media (max-width: 430px) { :root { --u: calc(100vw / 430); } }

/* 动效降级 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   首页专用：Hero / 动态汉字 / 粒子刻度场
   ══════════════════════════════════════════════════════════════ */

/* ── Hero ── */
.hero { position: relative; margin-bottom: calc(16 * var(--u)); }
.hero-chip {
  display: inline-flex; align-items: center; gap: calc(8 * var(--u));
  height: calc(34 * var(--u)); padding: 0 calc(15 * var(--u));
  border-radius: calc(17 * var(--u));
  font-size: calc(12.5 * var(--u)); font-weight: 600; letter-spacing: calc(.1 * var(--u));
  background: var(--glass-2);
  backdrop-filter: var(--blur-2); -webkit-backdrop-filter: var(--blur-2);
  border: 1px solid var(--glass-line);
  color: var(--ink-1);
  position: relative; overflow: hidden;
  animation: chipIn .8s var(--e-out) .10s both;
}
.hero-chip .dot {
  width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%;
  background: var(--c-teal);
  box-shadow: 0 0 calc(9 * var(--u)) var(--c-teal);
  animation: pulse 2.6s var(--e-soft) infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .55; transform: scale(.82); }
}
@keyframes chipIn {
  from { opacity: 0; clip-path: inset(0 100% 0 0); }
  to { opacity: 1; clip-path: inset(0 0 0 0); }
}

/* 动态汉字标题：逐字浮现 + 轻微浮沉 */
.hero-title {
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', sans-serif;
  font-weight: 800;
  font-size: calc(50 * var(--u));
  line-height: calc(64 * var(--u));
  letter-spacing: calc(.5 * var(--u));
  margin: calc(16 * var(--u)) 0 0;
  color: var(--ink);
}
.hero-title .hl { display: block; white-space: nowrap; }
.hero-title .hc {
  display: inline-block;
  animation: charIn .62s var(--e-out) both, floatY 5.5s var(--e-soft) infinite;
  animation-delay: inherit;
}
@keyframes charIn {
  from { opacity: 0; transform: translateY(calc(16 * var(--u))) scale(.86); filter: blur(4px); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(calc(-4 * var(--u))); }
}

.hero-blurb {
  max-width: calc(560 * var(--u));
  margin: calc(18 * var(--u)) 0 0;
  font-size: calc(14.5 * var(--u));
  line-height: calc(25 * var(--u));
  font-weight: 400;
  letter-spacing: calc(-.2 * var(--u));
  color: var(--ink-2);
  animation: fadeUp .9s var(--e-soft) .55s both;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(calc(10 * var(--u))); }
  to { opacity: 1; transform: none; }
}

/* ── 粒子刻度场 ── */
.particle-field {
  position: relative;
  height: calc(250 * var(--u));
  margin: calc(-8 * var(--u)) 0 calc(16 * var(--u));
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--glass-line);
  background:
    linear-gradient(180deg, var(--panel-tint), transparent 60%),
    var(--glass-1);
  backdrop-filter: var(--blur-1); -webkit-backdrop-filter: var(--blur-1);
}
.particle-field canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
}
/* 左侧刻度尺标注 */
.particle-field::before {
  content: "等级刻度";
  position: absolute; left: calc(14 * var(--u)); top: calc(12 * var(--u));
  font-size: calc(10 * var(--u)); font-weight: 800; letter-spacing: calc(1 * var(--u));
  color: var(--ink-4); text-transform: uppercase; pointer-events: none;
}
/* 顶部/底部参考线 */
.particle-field::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, transparent 0%, transparent 22%, var(--glass-line) 22%, var(--glass-line) calc(22% + 1px), transparent calc(22% + 1px)),
    linear-gradient(180deg, transparent 0%, transparent 76%, var(--glass-line) 76%, var(--glass-line) calc(76% + 1px), transparent calc(76% + 1px));
  opacity: .6;
}

@media (max-width: 900px) {
  .hero-title { font-size: calc(34 * var(--u)); line-height: calc(44 * var(--u)); }
  .hero-blurb { font-size: calc(13 * var(--u)); line-height: calc(22 * var(--u)); }
  .particle-field { height: calc(190 * var(--u)); }
}

/* ── 侧栏底部：当前阶段状态 ── */
.rail-foot {
  width: calc(46 * var(--u));
  display: flex; flex-direction: column; align-items: center; gap: calc(6 * var(--u));
  flex: 0 0 auto;
}
.rail.open .rail-foot { width: auto; align-items: stretch; padding: 0 calc(14 * var(--u)); }
.rf-stage { display: flex; align-items: center; gap: calc(6 * var(--u)); }
.rail-foot .rf-t { display: none; font-size: calc(10.5 * var(--u)); color: var(--ink-3); white-space: nowrap; }
.rail.open .rail-foot .rf-t { display: block; }
.rf-bar { width: 100%; height: calc(3 * var(--u)); border-radius: calc(2 * var(--u)); background: var(--track); overflow: hidden; }
.rf-bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--c-teal), transparent); }

/* ── 打印覆盖（必须放在所有媒体查询之后）──────────────────
   移动端媒体查询里 `.rail` 改成了 flex（底部 dock），
   同优先级下会覆盖前面的 print 规则 → 这里再声明一次。 */
@media print {
  .rail, .p-tools, .g-filters, .g-btn, .particles, .particle-field {
    display: none !important;
  }
  .shell { display: block !important; }
  .main { padding: 0 !important; }
  body { background: #fff !important; }
  .g-card, .g-item, .g-fold {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
    break-inside: avoid;
    background: #fff !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   右侧栏（常驻）—— 阶梯进度 + 视图上下文 + 快捷动作
   ══════════════════════════════════════════════════════════════ */
.rail-right {
  position: sticky; top: 0;
  height: 100vh;
  width: calc(272 * var(--u));
  flex: 0 0 calc(272 * var(--u));
  margin: calc(14 * var(--u)) calc(16 * var(--u)) calc(14 * var(--u)) 0;
  padding: calc(16 * var(--u)) calc(14 * var(--u));
  border-radius: calc(26 * var(--u));
  background: var(--glass-1);
  backdrop-filter: var(--blur-1);
  -webkit-backdrop-filter: var(--blur-1);
  border: 1px solid var(--glass-line);
  display: flex; flex-direction: column; gap: calc(10 * var(--u));
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin;
}

.rr-card {
  border-radius: calc(16 * var(--u));
  background: var(--glass-2);
  border: 1px solid var(--glass-line);
  padding: calc(12 * var(--u)) calc(13 * var(--u));
}
.rr-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: calc(9 * var(--u));
}
.rr-h {
  font-size: calc(10.5 * var(--u)); font-weight: 800;
  letter-spacing: calc(1.1 * var(--u)); text-transform: uppercase;
  color: var(--ink-3);
}
.rr-badge {
  font-size: calc(10 * var(--u)); font-weight: 700;
  padding: calc(3 * var(--u)) calc(8 * var(--u));
  border-radius: calc(9 * var(--u));
  background: color-mix(in srgb, var(--acc) 1600%, transparent); color: var(--c-teal);
  border: 1px solid color-mix(in srgb, var(--acc) 2800%, transparent);
}

/* ── 当前阶 ── */
.rr-current {
  padding: calc(9 * var(--u)) calc(10 * var(--u));
  border-radius: calc(12 * var(--u));
  background: linear-gradient(135deg, color-mix(in srgb, var(--acc) 1300%, transparent), rgba(99,102,241,.10));
  border: 1px solid var(--glass-line);
}
.rr-cname {
  font-size: calc(15 * var(--u)); font-weight: 800; letter-spacing: calc(-.2 * var(--u));
  color: var(--ink);
}
.rr-cen {
  font-size: calc(10 * var(--u)); font-weight: 600; color: var(--ink-4);
  margin-left: calc(5 * var(--u)); letter-spacing: .3px;
}
.rr-cgoal {
  margin-top: calc(5 * var(--u));
  font-size: calc(11.5 * var(--u)); line-height: calc(16 * var(--u));
  color: var(--ink-2);
}

/* ── 七阶进度 ── */
.rr-steps {
  display: flex; flex-direction: column; gap: calc(3 * var(--u));
  margin: calc(10 * var(--u)) 0 calc(9 * var(--u));
}
.rr-step {
  display: flex; align-items: center; gap: calc(8 * var(--u));
  padding: calc(5 * var(--u)) calc(8 * var(--u));
  border-radius: calc(9 * var(--u));
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer; text-align: left;
  font-family: inherit; color: var(--ink-3);
  transition: background .16s, color .16s;
}
.rr-step:hover { background: var(--hover); color: var(--ink-1); }
.rr-step .rsn {
  width: calc(19 * var(--u)); height: calc(19 * var(--u));
  border-radius: calc(6 * var(--u));
  display: grid; place-items: center; flex: 0 0 auto;
  font-size: calc(10 * var(--u)); font-weight: 800;
  background: var(--track); color: var(--ink-3);
}
.rr-step .rs-name { font-size: calc(11.5 * var(--u)); font-weight: 600; flex: 1; }
.rr-step .rs-check { font-size: calc(10 * var(--u)); color: var(--c-teal); font-weight: 800; }
.rr-step.done { color: var(--ink-2); }
.rr-step.done .rsn { background: color-mix(in srgb, var(--acc) 1800%, transparent); color: var(--c-teal); }
.rr-step.on {
  background: color-mix(in srgb, var(--acc) 1400%, transparent);
  border-color: color-mix(in srgb, var(--acc) 3400%, transparent);
  color: var(--ink);
}
.rr-step.on .rsn { background: var(--c-teal); color: #06222e; }
.rr-step.on .rs-name { font-weight: 800; }

/* ── 位置提示 ── */
.rr-reason {
  display: flex; align-items: flex-start; gap: calc(6 * var(--u));
  padding: calc(7 * var(--u)) calc(9 * var(--u));
  border-radius: calc(9 * var(--u));
  background: var(--glass-3);
  font-size: calc(10.5 * var(--u)); line-height: calc(15 * var(--u));
  color: var(--ink-2);
}
.rr-reason svg { flex: 0 0 auto; margin-top: calc(1 * var(--u)); color: var(--c-amber); }

/* ── 过关动作 ── */
.rr-verify { margin-top: calc(11 * var(--u)); }
.rr-vh {
  font-size: calc(10 * var(--u)); font-weight: 800; letter-spacing: calc(.6 * var(--u));
  color: var(--ink-4); margin-bottom: calc(6 * var(--u));
}
.rr-v {
  font-size: calc(11 * var(--u)); line-height: calc(15.5 * var(--u));
  color: var(--ink-2); padding-left: calc(11 * var(--u));
  position: relative; margin-bottom: calc(6 * var(--u));
}
.rr-v::before {
  content: ""; position: absolute; left: 0; top: calc(6 * var(--u));
  width: calc(4 * var(--u)); height: calc(4 * var(--u));
  border-radius: 50%; background: var(--c-teal);
}
.rr-go {
  margin-top: calc(4 * var(--u));
  background: none; border: none; padding: 0;
  font-family: inherit; cursor: pointer;
  font-size: calc(11 * var(--u)); font-weight: 700; color: var(--c-teal);
}
.rr-go:hover { text-decoration: underline; }

/* ── 视图上下文 ── */
.rr-what {
  margin: 0 0 calc(9 * var(--u));
  font-size: calc(11.5 * var(--u)); line-height: calc(16.5 * var(--u));
  color: var(--ink-2);
}
.rr-watch {
  font-size: calc(10.5 * var(--u)); line-height: calc(15 * var(--u));
  color: var(--ink-2);
  padding: calc(7 * var(--u)) calc(9 * var(--u));
  border-radius: calc(9 * var(--u));
  background: rgba(251,191,36,.10);
  border-left: calc(2 * var(--u)) solid var(--c-amber);
}
.rr-watch b {
  display: block; font-size: calc(9.5 * var(--u)); font-weight: 800;
  color: var(--c-amber); letter-spacing: calc(.5 * var(--u)); margin-bottom: calc(2 * var(--u));
}
.rr-links { display: flex; flex-wrap: wrap; gap: calc(5 * var(--u)); margin-top: calc(9 * var(--u)); }
.rr-link {
  display: inline-flex; align-items: center; gap: calc(4 * var(--u));
  padding: calc(4 * var(--u)) calc(9 * var(--u));
  border-radius: calc(10 * var(--u));
  background: var(--glass-3); border: 1px solid var(--glass-line);
  color: var(--ink-2); font-family: inherit; cursor: pointer;
  font-size: calc(10.5 * var(--u)); font-weight: 600;
  transition: background .16s, color .16s;
}
.rr-link:hover { background: var(--hover); color: var(--ink); }
.rr-link svg { width: calc(11 * var(--u)); height: calc(11 * var(--u)); opacity: .7; }

/* ── 快捷动作 ── */
.rr-qs { display: flex; flex-direction: column; gap: calc(6 * var(--u)); }
.rr-q {
  padding: calc(7 * var(--u)) calc(11 * var(--u));
  border-radius: calc(9 * var(--u));
  background: color-mix(in srgb, var(--acc) 1300%, transparent);
  border: 1px solid color-mix(in srgb, var(--acc) 2800%, transparent);
  color: var(--c-teal); font-family: inherit; cursor: pointer;
  font-size: calc(11 * var(--u)); font-weight: 700; text-align: left;
  transition: background .16s;
}
.rr-q:hover { background: color-mix(in srgb, var(--acc) 2200%, transparent); }

.rr-foot {
  margin-top: auto; padding-top: calc(10 * var(--u));
  font-size: calc(10 * var(--u)); line-height: calc(14.5 * var(--u));
  color: var(--ink-4);
  border-top: 1px solid var(--glass-line);
}
.rr-foot button {
  display: block; margin-top: calc(5 * var(--u));
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: inherit; font-size: calc(10.5 * var(--u)); font-weight: 700;
  color: var(--c-teal);
}
.rr-foot button:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════
   学习阶梯视图
   ══════════════════════════════════════════════════════════════ */
.ladder-map {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: calc(6 * var(--u));
  margin-bottom: calc(16 * var(--u));
}
.lm-step {
  display: flex; flex-direction: column; align-items: center; gap: calc(3 * var(--u));
  padding: calc(10 * var(--u)) calc(5 * var(--u));
  border-radius: calc(12 * var(--u));
  background: var(--glass-2); border: 1px solid var(--glass-line);
  cursor: pointer; font-family: inherit;
  transition: transform .18s, border-color .18s, background .18s;
}
.lm-step:hover { transform: translateY(-2px); border-color: var(--glass-line-2); }
.lm-step.on {
  background: color-mix(in srgb, var(--acc) 1500%, transparent); border-color: color-mix(in srgb, var(--acc) 400%, transparent);
}
.lm-no {
  width: calc(24 * var(--u)); height: calc(24 * var(--u));
  border-radius: calc(8 * var(--u)); display: grid; place-items: center;
  background: var(--track); color: var(--ink-3);
  font-size: calc(12 * var(--u)); font-weight: 800;
}
.lm-step.on .lm-no { background: var(--c-teal); color: #06222e; }
.lm-nm { font-size: calc(11.5 * var(--u)); font-weight: 700; color: var(--ink-1); text-align: center; }
.lm-du { font-size: calc(9.5 * var(--u)); color: var(--ink-4); }

.ladder-stage {
  border-radius: var(--r);
  background: var(--glass-2);
  border: 1px solid var(--glass-line);
  padding: calc(16 * var(--u)) calc(18 * var(--u));
  margin-bottom: calc(12 * var(--u));
  transition: border-color .2s, background .2s;
}
.ladder-stage.focus {
  border-color: color-mix(in srgb, var(--acc) 4200%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--acc) 700%, transparent), var(--glass-2) 45%);
}
.lsh { display: flex; align-items: flex-start; gap: calc(12 * var(--u)); }
.ls-no {
  width: calc(32 * var(--u)); height: calc(32 * var(--u));
  border-radius: calc(11 * var(--u)); flex: 0 0 auto;
  display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(20,184,166,.85), rgba(99,102,241,.75));
  color: #fff; font-size: calc(15 * var(--u)); font-weight: 800;
}
.ls-t { flex: 1; min-width: 0; }
.ls-name { font-size: calc(17 * var(--u)); font-weight: 800; letter-spacing: calc(-.3 * var(--u)); }
.ls-en { font-size: calc(11 * var(--u)); font-weight: 600; color: var(--ink-4); margin-left: calc(7 * var(--u)); }
.ls-goal { margin-top: calc(4 * var(--u)); font-size: calc(12.5 * var(--u)); line-height: calc(18 * var(--u)); color: var(--ink-2); }
.ls-meta { display: flex; flex-direction: column; align-items: flex-end; gap: calc(5 * var(--u)); flex: 0 0 auto; }
.ls-du { font-size: calc(10.5 * var(--u)); color: var(--ink-4); font-weight: 600; }

.ls-body {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(14 * var(--u));
  margin-top: calc(14 * var(--u));
}
.ls-col { min-width: 0; }
.ls-ch {
  display: flex; align-items: center; gap: calc(6 * var(--u));
  font-size: calc(11 * var(--u)); font-weight: 800;
  letter-spacing: calc(.4 * var(--u)); color: var(--ink-2);
  padding-bottom: calc(7 * var(--u));
  border-bottom: 1px solid var(--glass-line);
  margin-bottom: calc(8 * var(--u));
}
.ls-ic { width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; display: block; }
.ls-ic.learn { background: var(--c-sky); }
.ls-ic.teach { background: var(--c-violet); }
.ls-ic.ok { background: var(--c-teal); }
.ls-list { margin: 0; padding: 0; list-style: none; }
.ls-list li {
  position: relative; padding-left: calc(11 * var(--u));
  margin-bottom: calc(7 * var(--u));
  font-size: calc(11.5 * var(--u)); line-height: calc(16.5 * var(--u));
  color: var(--ink-2);
}
.ls-list li::before {
  content: ""; position: absolute; left: 0; top: calc(7 * var(--u));
  width: calc(4 * var(--u)); height: calc(4 * var(--u));
  border-radius: 50%; background: var(--ink-4);
}
.ls-verify .ls-list li::before { background: var(--c-teal); }

.ls-foot {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(12 * var(--u));
  margin-top: calc(15 * var(--u));
  padding-top: calc(13 * var(--u));
  border-top: 1px solid var(--glass-line);
}
.ls-fb { min-width: 0; }
.ls-fh {
  display: block; font-size: calc(9.5 * var(--u)); font-weight: 800;
  letter-spacing: calc(.8 * var(--u)); color: var(--ink-4);
  text-transform: uppercase; margin-bottom: calc(6 * var(--u));
}
.ls-tool {
  display: block; width: 100%; text-align: left;
  padding: calc(7 * var(--u)) calc(9 * var(--u));
  border-radius: calc(9 * var(--u)); margin-bottom: calc(5 * var(--u));
  background: var(--glass-3); border: 1px solid var(--glass-line);
  cursor: pointer; font-family: inherit;
  transition: border-color .16s, background .16s;
}
.ls-tool:hover { border-color: color-mix(in srgb, var(--acc) 3600%, transparent); background: color-mix(in srgb, var(--acc) 100%, transparent); }
.ls-tool b { display: block; font-size: calc(11.5 * var(--u)); font-weight: 700; color: var(--ink-1); }
.ls-tool span { font-size: calc(10 * var(--u)); color: var(--ink-4); }
.ls-art, .ls-stuck, .ls-mk {
  font-size: calc(11 * var(--u)); line-height: calc(16 * var(--u)); color: var(--ink-2);
}
.ls-mistake .ls-mk { color: var(--ink-2); }
.ls-mistake .ls-fh { color: var(--c-rose); }

.thread-grow {
  margin-top: calc(7 * var(--u));
  font-size: calc(10.5 * var(--u)); font-weight: 700; color: var(--c-teal);
}
.thread-why {
  margin-top: calc(4 * var(--u));
  font-size: calc(10.5 * var(--u)); line-height: calc(15 * var(--u)); color: var(--ink-4);
}

.ladder-entries { display: flex; flex-direction: column; gap: calc(4 * var(--u)); }
.le-row {
  display: flex; align-items: center; gap: calc(11 * var(--u));
  padding: calc(9 * var(--u)) calc(12 * var(--u));
  border-radius: calc(10 * var(--u));
  background: var(--glass-2); border: 1px solid var(--glass-line);
  cursor: pointer; font-family: inherit; text-align: left;
  transition: background .16s, border-color .16s;
}
.le-row:hover { background: var(--hover); border-color: var(--glass-line-2); }
.le-no {
  font-size: calc(10 * var(--u)); font-weight: 800; flex: 0 0 auto;
  padding: calc(3 * var(--u)) calc(8 * var(--u));
  border-radius: calc(9 * var(--u));
  background: color-mix(in srgb, var(--acc) 1400%, transparent); color: var(--c-teal);
}
.le-lb { font-size: calc(13 * var(--u)); font-weight: 700; color: var(--ink-1); flex: 0 0 auto; }
.le-ds { font-size: calc(11 * var(--u)); color: var(--ink-3); flex: 1; min-width: 0; }
.le-row svg { color: var(--ink-4); flex: 0 0 auto; }

.ladder-faq { display: flex; flex-direction: column; gap: calc(5 * var(--u)); }
.faq-item {
  border-radius: calc(10 * var(--u));
  background: var(--glass-2); border: 1px solid var(--glass-line);
  overflow: hidden;
}
.faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: calc(9 * var(--u));
  width: 100%; padding: calc(10 * var(--u)) calc(12 * var(--u));
  background: none; border: none; cursor: pointer; font-family: inherit;
  font-size: calc(12.5 * var(--u)); font-weight: 700; color: var(--ink-1); text-align: left;
}
.faq-q svg { flex: 0 0 auto; color: var(--ink-4); transition: transform .2s; }
.faq-item.open .faq-q svg { transform: rotate(90deg); }
.faq-a {
  max-height: 0; overflow: hidden;
  padding: 0 calc(12 * var(--u));
  font-size: calc(11.5 * var(--u)); line-height: calc(17 * var(--u)); color: var(--ink-2);
  transition: max-height .28s var(--e-soft), padding .28s var(--e-soft);
}
.faq-item.open .faq-a { max-height: calc(240 * var(--u)); padding: 0 calc(12 * var(--u)) calc(11 * var(--u)); }

/* ══════════════════════════════════════════════════════════════
   响应式：三栏 → 两栏 → 单栏
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1500px) {
  .rail-right { width: calc(248 * var(--u)); flex-basis: calc(248 * var(--u)); }
  .main-inner { max-width: 100%; }
}
@media (max-width: 1180px) {
  .shell { grid-template-columns: auto 1fr; }
  .rail-right {
    grid-column: 2; grid-row: 2;
    position: static; height: auto; width: auto; flex: none;
    margin: 0 calc(20 * var(--u)) calc(60 * var(--u));
    overflow: visible;
  }
  .main-inner { max-width: 100%; }
  .ls-body { grid-template-columns: 1fr; }
  .ls-foot { grid-template-columns: repeat(2, 1fr); }
  .ladder-map { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
  .rail-right { margin: 0 calc(14 * var(--u)) calc(84 * var(--u)); padding: calc(13 * var(--u)); }
  .ls-foot { grid-template-columns: 1fr; }
  .ladder-map { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .ladder-map { grid-template-columns: repeat(2, 1fr); }
  .rr-steps { max-height: calc(220 * var(--u)); overflow-y: auto; }
}

/* ── 首页「从哪开始」起始条 ── */
.start-bar {
  border-radius: var(--r);
  background: linear-gradient(140deg, color-mix(in srgb, var(--acc) 1000%, transparent), rgba(99,102,241,.07) 55%, transparent);
  border: 1px solid var(--glass-line);
  padding: calc(14 * var(--u)) calc(16 * var(--u));
  margin-bottom: calc(16 * var(--u));
}
.sb-head { display: flex; align-items: baseline; gap: calc(11 * var(--u)); flex-wrap: wrap; margin-bottom: calc(11 * var(--u)); }
.sb-h { font-size: calc(14 * var(--u)); font-weight: 800; letter-spacing: calc(-.2 * var(--u)); color: var(--ink); flex: 0 0 auto; }
.sb-note { font-size: calc(11 * var(--u)); line-height: calc(16 * var(--u)); color: var(--ink-3); flex: 1; min-width: calc(220 * var(--u)); }
.sb-steps {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(8 * var(--u));
}
/* 7 阶在 4 列网格里 = 4 + 3。
   第二行 3 个要填满 4 列：让最后一个跨 2 列，正好 1+1+2 = 4。
   （之前让它跨满 4 列会溢出成 6 列，右下角反而更空） */
.sb-step:nth-child(7) { grid-column: span 2; }
@media (max-width: 1180px) {
  .sb-steps { grid-template-columns: repeat(3, 1fr); }
  .sb-step:nth-child(7) { grid-column: span 1; }
  .sb-step:nth-child(6) { grid-column: span 1; }
}
@media (max-width: 900px)  {
  .sb-steps { grid-template-columns: repeat(2, 1fr); }
  .sb-step:nth-child(7) { grid-column: span 2; }
}
@media (max-width: 560px)  { .sb-steps { grid-template-columns: 1fr; } .sb-step:nth-child(7) { grid-column: span 1; } }
.sb-step {
  display: flex; flex-direction: column; gap: calc(3 * var(--u));
  padding: calc(10 * var(--u)) calc(11 * var(--u));
  border-radius: calc(12 * var(--u));
  background: var(--glass-2); border: 1px solid var(--glass-line);
  cursor: pointer; font-family: inherit; text-align: left;
  transition: transform .18s, border-color .18s, background .18s;
}
.sb-step:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--acc) 400%, transparent); background: color-mix(in srgb, var(--acc) 900%, transparent); }
.sb-no {
  width: calc(21 * var(--u)); height: calc(21 * var(--u));
  border-radius: calc(7 * var(--u)); display: grid; place-items: center;
  background: var(--track); color: var(--ink-3);
  font-size: calc(11 * var(--u)); font-weight: 800;
}
.sb-step:hover .sb-no { background: var(--c-teal); color: #06222e; }
.sb-nm { font-size: calc(12.5 * var(--u)); font-weight: 800; color: var(--ink-1); }
.sb-goal { font-size: calc(10.5 * var(--u)); line-height: calc(14.5 * var(--u)); color: var(--ink-4); }
@media (max-width: 1180px) { .sb-steps { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .sb-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .sb-steps { grid-template-columns: 1fr; } }

/* ── 右侧栏迷你进度点 ── */
.rr-bar {
  display: flex; align-items: center; gap: calc(4 * var(--u));
  margin: calc(10 * var(--u)) 0 calc(9 * var(--u));
}
.rr-dot {
  flex: 1; height: calc(5 * var(--u));
  border-radius: calc(3 * var(--u));
  background: var(--track); border: none; padding: 0; cursor: pointer;
  transition: background .2s, height .2s;
}
.rr-dot:hover { background: var(--ink-4); }
.rr-dot.done { background: color-mix(in srgb, var(--acc) 4500%, transparent); }
.rr-dot.on {
  background: var(--c-teal);
  height: calc(8 * var(--u));
  box-shadow: 0 0 calc(8 * var(--u)) color-mix(in srgb, var(--acc) 5500%, transparent);
}


/* ══════════════════════════════════════════════════════════════
   官方判例视图
   ══════════════════════════════════════════════════════════════ */
.g-tabs { display: flex; gap: calc(5 * var(--u)); margin-bottom: calc(16 * var(--u)); flex-wrap: wrap; }
.g-tab {
  display: inline-flex; align-items: center; gap: calc(7 * var(--u));
  padding: calc(8 * var(--u)) calc(14 * var(--u));
  border-radius: calc(12 * var(--u));
  background: var(--glass-2); border: 1px solid var(--glass-line);
  color: var(--ink-2); font-family: inherit; cursor: pointer;
  font-size: calc(12.5 * var(--u)); font-weight: 600;
  transition: background .16s, color .16s, border-color .16s;
}
.g-tab:hover { background: var(--hover); color: var(--ink); }
.g-tab.on { background: color-mix(in srgb, var(--acc) 1500%, transparent); border-color: color-mix(in srgb, var(--acc) 3800%, transparent); color: var(--ink); }
.g-tab .cnt {
  font-size: calc(10 * var(--u)); font-weight: 800;
  padding: calc(2 * var(--u)) calc(7 * var(--u));
  border-radius: calc(8 * var(--u));
  background: var(--track); color: var(--ink-3);
}
.g-tab.on .cnt { background: color-mix(in srgb, var(--acc) 2400%, transparent); color: var(--c-teal); }

.of-case {
  border-radius: var(--r);
  background: var(--glass-2);
  border: 1px solid var(--glass-line);
  padding: calc(15 * var(--u)) calc(17 * var(--u));
  margin-bottom: calc(13 * var(--u));
}
.ofc-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: calc(13 * var(--u)); flex-wrap: wrap;
  padding-bottom: calc(11 * var(--u));
  border-bottom: 1px solid var(--glass-line);
  margin-bottom: calc(13 * var(--u));
}
.ofc-id { display: flex; align-items: center; gap: calc(9 * var(--u)); flex-wrap: wrap; }
.ofc-no { font-size: calc(13 * var(--u)); font-weight: 700; color: var(--ink-1); }
.ofc-bands { display: flex; align-items: center; gap: calc(16 * var(--u)); flex-wrap: wrap; }
.ofc-official, .ofc-engine { display: flex; flex-direction: column; align-items: flex-end; gap: calc(2 * var(--u)); }
.ofc-official .lbl, .ofc-engine .lbl {
  font-size: calc(9 * var(--u)); font-weight: 700; letter-spacing: calc(.6 * var(--u));
  color: var(--ink-4); text-transform: uppercase;
}
.ofc-official .val {
  font-family: 'Inter Tight', 'Inter', -apple-system, sans-serif;
  font-size: calc(26 * var(--u)); font-weight: 500; line-height: 1;
  letter-spacing: calc(-1 * var(--u)); color: var(--c-teal);
}
.ofc-engine .val { font-size: calc(20 * var(--u)); color: var(--ink-2); }
.ofc-engine .val.ok { color: var(--c-teal); }
.ofc-engine .val.off { color: var(--c-amber); }
.ofc-engine .delta { font-size: calc(9.5 * var(--u)); color: var(--ink-4); }
.ofc-words { font-size: calc(11 * var(--u)); color: var(--ink-4); font-weight: 600; }
.ofc-frames { display: flex; gap: calc(5 * var(--u)); flex-wrap: wrap; }
.ofc-frames .fr {
  font-size: calc(10.5 * var(--u)); padding: calc(3 * var(--u)) calc(9 * var(--u));
  border-radius: calc(9 * var(--u));
  background: var(--glass-3); border: 1px solid var(--glass-line); color: var(--ink-3);
}

.ofc-body { display: grid; grid-template-columns: 1fr 1fr; gap: calc(16 * var(--u)); }
.ofc-lbl {
  font-size: calc(9.5 * var(--u)); font-weight: 800; letter-spacing: calc(.8 * var(--u));
  color: var(--ink-4); text-transform: uppercase; margin-bottom: calc(7 * var(--u));
}
.ofc-text, .ofc-ctext {
  font-size: calc(12 * var(--u)); line-height: calc(19 * var(--u));
  color: var(--ink-2);
  background: var(--glass-1); border: 1px solid var(--glass-line);
  border-radius: calc(10 * var(--u));
  padding: calc(11 * var(--u)) calc(13 * var(--u));
  max-height: calc(320 * var(--u)); overflow-y: auto;
  white-space: pre-wrap;
}
.ofc-ctext.transcript { font-size: calc(11.5 * var(--u)); line-height: calc(18 * var(--u)); }
.ofc-ctext.full { max-height: calc(300 * var(--u)); }
.ofc-dims { margin-top: calc(11 * var(--u)); display: flex; flex-direction: column; gap: calc(9 * var(--u)); }
.ofc-dim .dh {
  font-size: calc(10 * var(--u)); font-weight: 800; color: var(--c-violet);
  margin-bottom: calc(4 * var(--u));
}
.ofc-dim ul { margin: 0; padding: 0; list-style: none; }
.ofc-dim li {
  position: relative; padding-left: calc(10 * var(--u));
  font-size: calc(11 * var(--u)); line-height: calc(16 * var(--u));
  color: var(--ink-3); margin-bottom: calc(5 * var(--u));
}
.ofc-dim li::before {
  content: ""; position: absolute; left: 0; top: calc(7 * var(--u));
  width: calc(3 * var(--u)); height: calc(3 * var(--u));
  border-radius: 50%; background: var(--ink-4);
}
.ofc-qs { margin: 0; padding: 0; list-style: none; }
.ofc-qs li {
  position: relative; padding-left: calc(13 * var(--u));
  font-size: calc(12 * var(--u)); line-height: calc(18 * var(--u));
  color: var(--ink-2); margin-bottom: calc(6 * var(--u));
}
.ofc-qs li::before {
  content: "?"; position: absolute; left: 0; top: 0;
  width: calc(9 * var(--u)); height: calc(9 * var(--u));
  border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--acc) 1600%, transparent); color: var(--c-teal);
  font-size: calc(7 * var(--u)); font-weight: 800;
}
.ofc-qs.card li::before { content: "·"; background: var(--track); color: var(--ink-3); }

.ofc-keygrid { display: flex; flex-wrap: wrap; gap: calc(5 * var(--u)); }
.ofc-keygrid .kg {
  display: flex; align-items: center; gap: calc(5 * var(--u));
  padding: calc(4 * var(--u)) calc(9 * var(--u));
  border-radius: calc(9 * var(--u));
  background: var(--glass-1); border: 1px solid var(--glass-line);
}
.ofc-keygrid .q { font-size: calc(10 * var(--u)); color: var(--ink-4); font-weight: 700; }
.ofc-keygrid .a { font-size: calc(11.5 * var(--u)); font-weight: 800; color: var(--c-teal); }
.ofc-filename {
  margin-top: calc(9 * var(--u));
  font-size: calc(9.5 * var(--u)); color: var(--ink-4);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  word-break: break-all;
}

@media (max-width: 900px) {
  .ofc-body { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════════════════════════
   剑桥真题视图 + 教学资料
   ══════════════════════════════════════════════════════════════ */
.cb-item { margin-bottom: calc(8 * var(--u)); }
.cb-book {
  font-size: calc(11 * var(--u)); font-weight: 800; color: var(--c-amber);
  padding: calc(2 * var(--u)) calc(8 * var(--u));
  border-radius: calc(8 * var(--u));
  background: rgba(251,191,36,.14);
}
.cb-test { font-size: calc(11 * var(--u)); color: var(--ink-4); font-weight: 600; }
.cb-prompt {
  font-size: calc(12.5 * var(--u)); line-height: calc(19 * var(--u));
  color: var(--ink-1); margin-top: calc(7 * var(--u));
}
.cb-meta {
  display: flex; gap: calc(14 * var(--u)); flex-wrap: wrap;
  margin-top: calc(7 * var(--u));
  font-size: calc(10.5 * var(--u)); color: var(--ink-4);
}
.cb-meta span:first-child { color: var(--c-teal); font-weight: 600; }

.cb-books { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: calc(10 * var(--u)); }
.cb-book-card {
  border-radius: var(--r); padding: calc(12 * var(--u)) calc(14 * var(--u));
  background: var(--glass-2); border: 1px solid var(--glass-line);
}
.bb-h { display: flex; align-items: center; gap: calc(7 * var(--u)); flex-wrap: wrap; margin-bottom: calc(9 * var(--u)); }
.bb-no { font-size: calc(15 * var(--u)); font-weight: 800; letter-spacing: calc(-.3 * var(--u)); }
.bb-stats { display: flex; gap: calc(16 * var(--u)); }
.bb-stats div { display: flex; flex-direction: column; }
.bb-stats b { font-size: calc(19 * var(--u)); font-weight: 800; color: var(--c-teal); line-height: 1.1; }
.bb-stats span { font-size: calc(10 * var(--u)); color: var(--ink-4); }
.bb-src { margin-top: calc(8 * var(--u)); display: flex; flex-direction: column; gap: calc(2 * var(--u)); }
.bb-src span {
  font-size: calc(9 * var(--u)); color: var(--ink-4);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  word-break: break-all;
}
.cb-skip {
  font-size: calc(10.5 * var(--u)); color: var(--ink-4);
  padding: calc(3 * var(--u)) 0;
  border-bottom: 1px solid var(--glass-line);
}

.sub-sec { font-weight: 500; color: var(--ink-4); font-size: calc(10.5 * var(--u)); }
.sp-item {
  display: inline-block; margin: 0 calc(4 * var(--u)) calc(4 * var(--u)) 0;
  padding: calc(3 * var(--u)) calc(8 * var(--u));
  border-radius: calc(8 * var(--u));
  background: var(--glass-3); border: 1px solid var(--glass-line);
  font-size: calc(10.5 * var(--u)); color: var(--ink-2);
}
.sp-more { font-size: calc(10 * var(--u)); color: var(--ink-4); }

.p2-detail { margin-top: calc(12 * var(--u)); display: grid; grid-template-columns: 1fr 1.4fr; gap: calc(13 * var(--u)); }
.p2-req {
  font-size: calc(12 * var(--u)); line-height: calc(18 * var(--u)); color: var(--ink-1);
  padding: calc(11 * var(--u)) calc(13 * var(--u));
  border-radius: calc(10 * var(--u));
  background: var(--glass-1); border: 1px solid var(--glass-line);
}
.p2-req b { display: block; font-size: calc(9.5 * var(--u)); color: var(--c-amber); margin-bottom: calc(4 * var(--u)); letter-spacing: calc(.6 * var(--u)); }
.p2-rq { margin-top: calc(8 * var(--u)); display: flex; flex-wrap: wrap; gap: calc(4 * var(--u)); }
.p2-rq span {
  font-size: calc(10 * var(--u)); padding: calc(2 * var(--u)) calc(7 * var(--u));
  border-radius: calc(8 * var(--u));
  background: var(--glass-3); border: 1px solid var(--glass-line); color: var(--ink-3);
}
.p2-model {
  font-size: calc(12 * var(--u)); line-height: calc(19 * var(--u)); color: var(--ink-2);
  padding: calc(11 * var(--u)) calc(13 * var(--u));
  border-radius: calc(10 * var(--u));
  background: var(--glass-1); border: 1px solid var(--glass-line);
  max-height: calc(340 * var(--u)); overflow-y: auto;
}

.cb-topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: calc(9 * var(--u)); margin-top: calc(10 * var(--u)); }
.cb-topic {
  padding: calc(9 * var(--u)) calc(11 * var(--u));
  border-radius: calc(10 * var(--u));
  background: var(--glass-1); border: 1px solid var(--glass-line);
}
.ct-n { font-size: calc(11.5 * var(--u)); font-weight: 700; color: var(--ink-1); margin-bottom: calc(5 * var(--u)); }
.cb-topic ul { margin: 0; padding: 0; list-style: none; }
.cb-topic li {
  position: relative; padding-left: calc(10 * var(--u));
  font-size: calc(10.5 * var(--u)); line-height: calc(15 * var(--u));
  color: var(--ink-3); margin-bottom: calc(3 * var(--u));
}
.cb-topic li::before {
  content: "?"; position: absolute; left: 0; top: 0;
  width: calc(8 * var(--u)); height: calc(8 * var(--u));
  border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--acc) 1500%, transparent); color: var(--c-teal);
  font-size: calc(6 * var(--u)); font-weight: 800;
}
.cb-essays { display: flex; flex-direction: column; gap: calc(7 * var(--u)); margin-top: calc(10 * var(--u)); }
.cb-essay {
  padding: calc(9 * var(--u)) calc(12 * var(--u));
  border-radius: calc(10 * var(--u));
  background: var(--glass-1); border: 1px solid var(--glass-line);
}
.ce-p { font-size: calc(11.5 * var(--u)); line-height: calc(17 * var(--u)); color: var(--ink-2); }

@media (max-width: 900px) {
  .p2-detail { grid-template-columns: 1fr; }
}


/* 听力音频卡 */
.cb-audio { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: calc(8 * var(--u)); }
.cb-au {
  padding: calc(9 * var(--u)) calc(11 * var(--u));
  border-radius: calc(10 * var(--u));
  background: var(--glass-1); border: 1px solid var(--glass-line);
}
.au-h { display: flex; align-items: center; gap: calc(7 * var(--u)); flex-wrap: wrap; }
.au-sec { font-size: calc(10.5 * var(--u)); color: var(--ink-3); font-weight: 600; }
.au-dur { font-size: calc(10 * var(--u)); color: var(--ink-4); margin-left: auto; }
.au-n { margin-top: calc(5 * var(--u)); font-size: calc(11 * var(--u)); color: var(--ink-1); font-weight: 600; }
.au-p {
  margin-top: calc(3 * var(--u));
  font-size: calc(9 * var(--u)); color: var(--ink-4);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  word-break: break-all;
}


/* ═══════════════════════════════════════════════════════════════
   精讲解析视图
   ───────────────────────────────────────────────────────────────
   视觉逻辑：教学链条是「篇章结构 → 场景背景 → 词汇 → 逐句理解 → 题目解析」，
   所以配色按链条走：sky(结构) → violet(背景) → teal(词汇) → amber(逐句) → rose(解题)。
   ═══════════════════════════════════════════════════════════════ */

/* 单元列表 */
.ex-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(280 * var(--u)), 1fr));
  gap: calc(9 * var(--u));
}
.ex-card {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: calc(11 * var(--u)) calc(13 * var(--u));
  border-radius: var(--r);
  background: var(--glass-1); border: 1px solid var(--glass-line);
  transition: transform .22s var(--e-out), border-color .22s var(--e-out), background .22s var(--e-out);
}
.ex-card:hover {
  transform: translateY(calc(-2 * var(--u)));
  border-color: var(--glass-line-2);
  background: var(--hover);
}
.ex-ch { display: flex; align-items: center; gap: calc(7 * var(--u)); flex-wrap: wrap; margin-bottom: calc(6 * var(--u)); }
.ex-cs { font-size: calc(10.5 * var(--u)); color: var(--ink-3); font-weight: 600; }
.ex-ct {
  font-size: calc(13.5 * var(--u)); font-weight: 700; color: var(--ink);
  line-height: calc(19 * var(--u)); margin-bottom: calc(5 * var(--u));
}
.ex-cb {
  font-size: calc(10 * var(--u)); color: var(--ink-4); line-height: calc(15 * var(--u));
}

/* 单元详情 */
.ex-unit {
  padding: calc(16 * var(--u)) calc(18 * var(--u));
  border-radius: var(--r);
  background: var(--glass-1); border: 1px solid var(--glass-line);
  margin-bottom: calc(14 * var(--u));
}
.ex-uh { margin-bottom: calc(11 * var(--u)); }
.ex-ut { font-size: calc(17 * var(--u)); font-weight: 800; color: var(--ink); line-height: calc(24 * var(--u)); }
.ex-ul { font-size: calc(11 * var(--u)); color: var(--ink-3); margin-top: calc(4 * var(--u)); }

/* 元信息网格 */
.ex-meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(200 * var(--u)), 1fr));
  gap: calc(7 * var(--u)); margin-bottom: calc(13 * var(--u));
}
.ex-m {
  padding: calc(8 * var(--u)) calc(11 * var(--u));
  border-radius: calc(9 * var(--u));
  background: var(--panel-tint); border: 1px solid var(--glass-line);
  font-size: calc(12 * var(--u)); color: var(--ink-2); line-height: calc(17 * var(--u));
}
.ex-mk {
  display: inline-block; margin-right: calc(7 * var(--u));
  font-size: calc(10 * var(--u)); font-weight: 700; color: var(--ink-3);
}

/* 逐段大纲 */
.ex-outline {
  padding: calc(10 * var(--u)) calc(13 * var(--u));
  border-radius: calc(10 * var(--u));
  background: var(--panel-tint); border: 1px solid var(--glass-line);
  margin-bottom: calc(13 * var(--u));
}
.ex-oh { font-size: calc(11 * var(--u)); font-weight: 700; color: var(--ink-2); margin-bottom: calc(6 * var(--u)); }
.ex-outline ul { margin: 0; padding: 0; list-style: none; }
.ex-outline li {
  position: relative; padding-left: calc(10 * var(--u));
  font-size: calc(11.5 * var(--u)); color: var(--ink-2);
  line-height: calc(17 * var(--u)); margin-bottom: calc(3 * var(--u));
}
.ex-outline li::before {
  content: ""; position: absolute; left: 0; top: calc(7 * var(--u));
  width: calc(3 * var(--u)); height: calc(3 * var(--u));
  border-radius: 50%; background: var(--c-sky); opacity: .6;
}
.ex-on { color: var(--ink-3); font-weight: 700; margin-right: calc(6 * var(--u)); }

/* 解析文本块 */
.ex-blk {
  padding: calc(11 * var(--u)) calc(13 * var(--u));
  border-radius: calc(10 * var(--u));
  background: var(--panel-tint);
  border: 1px solid var(--glass-line);
  border-left: 3px solid var(--glass-line-2);
  margin-bottom: calc(9 * var(--u));
}
.ex-bh { display: flex; align-items: baseline; gap: calc(9 * var(--u)); margin-bottom: calc(8 * var(--u)); flex-wrap: wrap; }
.ex-bt { font-size: calc(12.5 * var(--u)); font-weight: 800; color: var(--ink); }
.ex-br { font-size: calc(10 * var(--u)); color: var(--ink-4); }
.ex-bc { font-size: calc(12 * var(--u)); color: var(--ink-2); line-height: calc(19 * var(--u)); }

.ex-structure, .ex-q_type, .ex-article { border-left-color: var(--c-sky); }
.ex-structure .ex-bt, .ex-q_type .ex-bt, .ex-article .ex-bt { color: var(--c-sky); }
.ex-background, .ex-background2, .ex-translation { border-left-color: var(--c-violet); }
.ex-background .ex-bt, .ex-background2 .ex-bt, .ex-translation .ex-bt { color: var(--c-violet); }
.ex-vocab_core, .ex-vocab_ext, .ex-vocab_note, .ex-sample { border-left-color: var(--c-teal); }
.ex-vocab_core .ex-bt, .ex-vocab_ext .ex-bt, .ex-vocab_note .ex-bt, .ex-sample .ex-bt { color: var(--c-teal); }
.ex-text_notes { border-left-color: var(--c-amber); }
.ex-text_notes .ex-bt { color: var(--c-amber); }
.ex-q_analysis { border-left-color: var(--c-rose); }
.ex-q_analysis .ex-bt { color: var(--c-rose); }

/* 词汇条目 */
.ex-vocab { display: flex; flex-direction: column; gap: calc(4 * var(--u)); }
.ex-vw {
  display: flex; align-items: baseline; gap: calc(7 * var(--u));
  padding: calc(5 * var(--u)) calc(8 * var(--u));
  border-radius: calc(7 * var(--u));
  background: var(--glass-1);
  font-size: calc(11.5 * var(--u)); line-height: calc(16 * var(--u));
}
.ex-ven { font-weight: 700; color: var(--ink); flex: 0 0 auto; }
.ex-vpos { font-size: calc(10 * var(--u)); color: var(--c-teal); font-style: italic; flex: 0 0 auto; }
.ex-vcn { color: var(--ink-2); }

/* 逐句解析 */
.ex-sent { display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
.ex-sn {
  padding: calc(8 * var(--u)) calc(10 * var(--u));
  border-radius: calc(8 * var(--u));
  background: var(--glass-1);
}
.ex-sen {
  font-size: calc(12.5 * var(--u)); color: var(--ink); line-height: calc(19 * var(--u));
  display: flex; gap: calc(8 * var(--u)); align-items: baseline;
}
.ex-num {
  flex: 0 0 auto; min-width: calc(16 * var(--u)); text-align: center;
  font-size: calc(10 * var(--u)); font-weight: 800; color: var(--c-amber);
  background: var(--active); border-radius: calc(4 * var(--u));
  padding: calc(1 * var(--u)) calc(4 * var(--u));
}
.ex-scn {
  margin-top: calc(4 * var(--u)); padding-left: calc(24 * var(--u));
  font-size: calc(11.5 * var(--u)); color: var(--ink-2); line-height: calc(18 * var(--u));
}

/* 上/下一单元 */
.ex-nav { display: flex; justify-content: space-between; gap: calc(10 * var(--u)); margin-bottom: calc(14 * var(--u)); }
.ex-nb {
  flex: 1 1 0; text-align: left; cursor: pointer;
  padding: calc(9 * var(--u)) calc(12 * var(--u));
  border-radius: var(--r); border: 1px solid var(--glass-line);
  background: var(--glass-1); color: var(--ink-2);
  font-size: calc(11.5 * var(--u)); font-weight: 600;
  transition: border-color .2s var(--e-out), color .2s var(--e-out);
}
.ex-nb:last-child { text-align: right; }
.ex-nb:hover { border-color: var(--glass-line-2); color: var(--ink); }

@media (max-width: 700px) {
  .ex-list { grid-template-columns: 1fr; }
  .ex-scn { padding-left: 0; }
}


/* ═══════════════════════════════════════════════════════════════
   听力精练台
   ───────────────────────────────────────────────────────────────
   音频走 /media 流式（Range 可拖进度条），不占项目空间。
   ═══════════════════════════════════════════════════════════════ */

.ls-book { margin-bottom: calc(16 * var(--u)); }
.ls-bh {
  font-size: calc(14 * var(--u)); font-weight: 800; color: var(--ink);
  margin-bottom: calc(9 * var(--u));
  display: flex; align-items: baseline; gap: calc(8 * var(--u));
}
.ls-bn { font-size: calc(11 * var(--u)); color: var(--ink-3); font-weight: 600; }
.ls-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(220 * var(--u)), 1fr));
  gap: calc(9 * var(--u));
}
.ls-test {
  padding: calc(11 * var(--u)) calc(13 * var(--u));
  border-radius: var(--r);
  background: var(--glass-1); border: 1px solid var(--glass-line);
}
.ls-th {
  font-size: calc(12 * var(--u)); font-weight: 700; color: var(--ink-2);
  margin-bottom: calc(8 * var(--u));
}
.ls-chip {
  display: flex; align-items: center; justify-content: space-between; gap: calc(8 * var(--u));
  width: 100%; cursor: pointer; text-align: left;
  padding: calc(6 * var(--u)) calc(10 * var(--u));
  margin-bottom: calc(4 * var(--u));
  border-radius: calc(8 * var(--u));
  border: 1px solid var(--glass-line);
  background: var(--panel-tint);
  transition: border-color .2s var(--e-out), background .2s var(--e-out);
}
.ls-chip:hover { border-color: var(--glass-line-2); background: var(--hover); }
.ls-cn { font-size: calc(11.5 * var(--u)); font-weight: 600; color: var(--ink-1); }
.ls-cd { font-size: calc(10 * var(--u)); color: var(--ink-4); }

/* 播放器 */
.ls-player {
  padding: calc(15 * var(--u)) calc(17 * var(--u));
  border-radius: var(--r);
  background: var(--glass-1); border: 1px solid var(--glass-line);
  margin-bottom: calc(14 * var(--u));
}
.ls-pt { font-size: calc(16 * var(--u)); font-weight: 800; color: var(--ink); }
.ls-ps { font-size: calc(11 * var(--u)); color: var(--ink-3); margin-top: calc(4 * var(--u)); }
.ls-player audio {
  width: 100%; margin-top: calc(12 * var(--u));
  height: calc(38 * var(--u));
  border-radius: calc(9 * var(--u));
}
.ls-meta {
  display: flex; align-items: center; gap: calc(9 * var(--u));
  flex-wrap: wrap; margin-top: calc(10 * var(--u));
}
.ls-ms { font-size: calc(11 * var(--u)); color: var(--ink-2); font-weight: 600; }
.ls-md { font-size: calc(10.5 * var(--u)); color: var(--ink-3); }
.ls-mf {
  font-size: calc(9.5 * var(--u)); color: var(--ink-4);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  word-break: break-all;
}
.ls-blocks { display: flex; flex-direction: column; gap: calc(9 * var(--u)); }

@media (max-width: 700px) {
  .ls-grid { grid-template-columns: 1fr; }
}

/* 方法要点（应试指导原文） */
.ex-guide_head {
  border-left-color: var(--c-sky);
  background: var(--glass-1);
}
.ex-gh {
  font-size: calc(13 * var(--u)); font-weight: 800; color: var(--ink);
  line-height: calc(19 * var(--u)); margin-bottom: calc(3 * var(--u));
}
.ex-gp {
  font-size: calc(10 * var(--u)); color: var(--c-sky); font-weight: 600;
  margin-bottom: calc(7 * var(--u));
  padding-bottom: calc(6 * var(--u));
  border-bottom: 1px dashed var(--glass-line);
}
.ex-guide_head .ex-bc { font-size: calc(12 * var(--u)); }
.ex-unit.is-guide { border-left: 3px solid var(--c-sky); }

/* 官方刻度页 */
.oh-row {
  display: flex; align-items: baseline; gap: calc(10 * var(--u));
  padding: calc(6 * var(--u)) 0;
  border-bottom: 1px dashed var(--glass-line);
}
.oh-row:last-child { border-bottom: none; }
.oh-b {
  flex: 0 0 auto; min-width: calc(22 * var(--u)); text-align: center;
  font-size: calc(14 * var(--u)); font-weight: 800; color: var(--c-sky);
}
.oh-l {
  flex: 0 0 auto; min-width: calc(110 * var(--u));
  font-size: calc(11.5 * var(--u)); font-weight: 700; color: var(--ink-1);
}
.oh-d { font-size: calc(11.5 * var(--u)); color: var(--ink-2); line-height: calc(18 * var(--u)); }

@media (max-width: 700px) {
  .oh-row { flex-wrap: wrap; }
  .oh-l { min-width: 0; }
}

/* 首页 · 素材库入口卡 */
.sb-link {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "no nm" "no goal";
  gap: calc(3 * var(--u)) calc(11 * var(--u));
  align-items: center;
  width: 100%; text-align: left; cursor: pointer;
  padding: calc(10 * var(--u)) calc(12 * var(--u));
  margin-bottom: calc(8 * var(--u));
  border-radius: var(--r);
  border: 1px solid var(--glass-line);
  background: var(--glass-1);
  transition: border-color .22s var(--e-out), transform .22s var(--e-out), background .22s var(--e-out);
}
.sb-link:last-child { margin-bottom: 0; }
.sb-link:hover {
  transform: translateY(calc(-2 * var(--u)));
  border-color: var(--glass-line-2);
  background: var(--hover);
}
.sb-link .sb-no {
  grid-area: no;
  display: grid; place-items: center;
  width: calc(26 * var(--u)); height: calc(26 * var(--u));
  border-radius: calc(8 * var(--u));
  background: var(--active);
  font-size: calc(12 * var(--u)); font-weight: 800; color: var(--c-teal);
}
.sb-link .sb-nm {
  grid-area: nm;
  font-size: calc(13 * var(--u)); font-weight: 700; color: var(--ink);
}
.sb-link .sb-goal {
  grid-area: goal;
  font-size: calc(10.5 * var(--u)); color: var(--ink-3);
  line-height: calc(15 * var(--u));
}

/* 精讲解析 · 按册折叠（手风琴） */
.ex-sec { margin-bottom: calc(10 * var(--u)); }
.ex-sech {
  display: flex; align-items: center; gap: calc(10 * var(--u));
  width: 100%; text-align: left; cursor: pointer;
  padding: calc(10 * var(--u)) calc(13 * var(--u));
  border-radius: var(--r-sm);
  border: 1px solid var(--glass-line);
  background: var(--glass-1);
  transition: border-color .2s var(--e-out), background .2s var(--e-out);
}
.ex-sech:hover { border-color: var(--glass-line-2); background: var(--hover); }
.ex-sec.open .ex-sech {
  border-color: var(--glass-line-2);
  background: var(--hover);
  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
.ex-secn {
  font-size: calc(13.5 * var(--u)); font-weight: 800; color: var(--ink);
  white-space: nowrap;
}
.ex-secc {
  font-size: calc(10.5 * var(--u)); color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.ex-secar {
  margin-left: auto; font-size: calc(10.5 * var(--u));
  color: var(--c-teal); font-weight: 700; white-space: nowrap;
}
.ex-sec.open .lay-grid { padding-top: calc(9 * var(--u)); }