/* ═══════════════════════════════════════════════════════════════════
   雅思教练 · 皮肤层 v3（参考图设计语言）
   ───────────────────────────────────────────────────────────────────
   参考图的设计语言，与原「青绿液态玻璃」是两套体系：

     ① 中性深色基底 —— 近黑石墨（#14171E → #2E333D），
        没有色相倾向，靠**明度阶梯**分层，不靠彩色玻璃
     ② 单一高饱和强调色 —— 全站只有一种"响亮"颜色，
        只用在：激活胶囊 / 进度条 / 主按钮 / 选中行 / 焦点环
     ③ 白色胶囊分段导航 —— 顶栏中间浮一个白胶囊，
        段内深色文字，激活段用强调色填充（反相于深色底）
     ④ 不等宽 KPI 带 —— 一张宽卡 + 两张窄卡 + 一张带小表的宽卡
     ⑤ 明暗分割面板 —— 左侧"纸质清单"（浅）+ 右侧"详情"（深）
     ⑥ 悬浮分段控件 —— 骑在分割面板交界处

   五套配色方案（data-skin），只换强调色的色相，
   中性基底与明度阶梯完全一致 —— 这是「顺版」的关键：
   换色不换骨架。

   加载顺序：在 theme.css / layout.css **之后**，
   覆盖同名令牌 —— 19 个视图无需改一行代码即整体换肤。
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════ 1. 强调色方案（5 套）═══════════ */
:root {
  /* 默认：青柠 —— 参考图的原色 */
  --acc-h: 84;  --acc-s: 88%;  --acc-l: 56%;
}
[data-skin="cyan"]   { --acc-h: 189; --acc-s: 84%; --acc-l: 52%; }
[data-skin="violet"] { --acc-h: 258; --acc-s: 86%; --acc-l: 70%; }
[data-skin="amber"]  { --acc-h: 38;  --acc-s: 94%; --acc-l: 56%; }
[data-skin="rose"]   { --acc-h: 350; --acc-s: 90%; --acc-l: 68%; }

/* 强调色的三个派生量 —— 全站只允许用这三个 */
:root {
  --acc:      hsl(var(--acc-h) var(--acc-s) var(--acc-l));
  --acc-soft: hsl(var(--acc-h) var(--acc-s) var(--acc-l) / .16);
  --acc-line: hsl(var(--acc-h) var(--acc-s) var(--acc-l) / .42);
  /* 强调色上的文字 —— 强调色都是亮色，所以文字用近黑 */
  --acc-ink:  hsl(var(--acc-h) 40% 8%);
}

/* ═══════════ 2. 中性基底（深色）═══════════ */
:root, [data-theme="dark"] {
  color-scheme: dark;

  /* 明度阶梯 —— 参考图靠这个分层，不靠色相 */
  --n-1000: #0E1116;   /* 最深：页面底 */
  --n-900:  #14171E;   /* 面板底 */
  --n-850:  #191D25;   /* 侧栏 / 顶栏 */
  --n-800:  #1E222B;   /* 卡片 */
  --n-750:  #252932;   /* 嵌套卡 / hover */
  --n-700:  #2E333D;   /* 描边高亮 */

  --ink:    #FFFFFF;
  --ink-1:  rgba(255,255,255,.95);
  --ink-2:  rgba(255,255,255,.70);
  --ink-3:  rgba(255,255,255,.48);
  --ink-4:  rgba(255,255,255,.32);

  /* 覆盖原玻璃令牌 → 映射到中性阶梯 */
  --glass-1:     var(--n-850);
  --glass-2:     var(--n-800);
  --glass-3:     var(--n-800);
  --glass-line:  rgba(255,255,255,.075);
  --glass-line-2: rgba(255,255,255,.14);

  --blur-1: none; --blur-2: none; --blur-3: none;

  --track:   rgba(255,255,255,.10);
  --sheen:   rgba(255,255,255,.06);
  --shadow:    0 1px 2px rgba(0,0,0,.5);
  --shadow-lg: 0 18px 44px rgba(0,0,0,.55);

  --panel-tint: rgba(255,255,255,.035);
  --hover:   rgba(255,255,255,.055);
  --active:  var(--acc-soft);
  --focus-ring: var(--acc);

  /* 语义色：整体压低饱和度，让唯一的强调色成为视觉焦点 */
  --c-teal:   #5FCFC0;
  --c-amber:  #E8B05C;
  --c-rose:   #E88A9A;
  --c-violet: #A99BE8;
  --c-sky:    #6FA8DC;
}

/* ═══════════ 3. 中性基底（浅色）═══════════ */
[data-theme="light"] {
  color-scheme: light;

  --n-1000: #FFFFFF;
  --n-900:  #F4F5F7;
  --n-850:  #EDEEF1;
  --n-800:  #FFFFFF;
  --n-750:  #F2F3F6;
  --n-700:  #DCDFE5;

  --ink:    #0B0D12;
  --ink-1:  rgba(11,13,18,.95);
  --ink-2:  rgba(11,13,18,.70);
  --ink-3:  rgba(11,13,18,.50);
  --ink-4:  rgba(11,13,18,.34);

  --glass-1:     var(--n-900);
  --glass-2:     #FFFFFF;
  --glass-3:     #FFFFFF;
  --glass-line:  rgba(11,13,18,.09);
  --glass-line-2: rgba(11,13,18,.16);

  --blur-1: none; --blur-2: none; --blur-3: none;

  --track:   rgba(11,13,18,.09);
  --sheen:   rgba(255,255,255,.7);
  --shadow:    0 1px 2px rgba(11,13,18,.06);
  --shadow-lg: 0 16px 40px rgba(11,13,18,.10);

  --panel-tint: rgba(11,13,18,.028);
  --hover:   rgba(11,13,18,.045);
  --active:  var(--acc-soft);
  --focus-ring: var(--acc);

  --acc-ink: #FFFFFF;

  --c-teal:   #0E9384;
  --c-amber:  #B4740A;
  --c-rose:   #BE3452;
  --c-violet: #6244C8;
  --c-sky:    #1F6FB8;
}

/* ═══════════ 4. 页面底纹（中性，不再是青绿海面）═══════════ */
.bg {
  background:
    radial-gradient(1100px 620px at 18% -6%, rgba(255,255,255,.055), transparent 62%),
    radial-gradient(900px 560px at 88% 8%,  rgba(255,255,255,.035), transparent 60%),
    linear-gradient(178deg, var(--n-1000) 0%, #12151B 46%, var(--n-1000) 100%);
}
[data-theme="light"] .bg {
  background:
    radial-gradient(1100px 620px at 18% -6%, rgba(255,255,255,.85), transparent 62%),
    radial-gradient(900px 560px at 88% 8%,  rgba(255,255,255,.7), transparent 60%),
    linear-gradient(178deg, #F7F8FA 0%, var(--n-900) 48%, #EDEFF3 100%);
}
.bg::after { opacity: .035; }
[data-theme="light"] .bg::after { opacity: .03; }

/* ═══════════ 5. 顶栏：品牌 + 白胶囊分段导航 + 图标组 + 头像 ═══════════ */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: calc(14 * var(--u));
  padding: calc(9 * var(--u)) calc(16 * var(--u));
  margin-bottom: calc(16 * var(--u));
  background: color-mix(in srgb, var(--n-1000) 88%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--glass-line);
}
/* 品牌区 —— 是 <button>，必须清掉浏览器默认样式。
   默认 button 是灰底 + outset 边框（rgb(107,107,107) + 2px outset），
   在深色主题下就是一个突兀的浅灰方块，把标识本身盖住。
   这条曾经漏了很久 —— 因为默认的浅灰文字颜色把问题掩盖了。 */
.tb-brand {
  display: flex; align-items: center; gap: calc(8 * var(--u));
  flex: 0 0 auto; cursor: pointer;
  background: none; border: none; padding: 0;
  font-family: inherit; text-align: left;
  color: inherit;
}
.tb-brand:hover .tb-mark { filter: brightness(1.15); }
/* 品牌标识 —— 用强调色，随 5 套配色变化。
   理由：品牌色 = 当前主题色，用户换配色时整个工作台的身份感一起变。

   实心点的颜色在 symbol 里用 var(--brand-dot) 指定 ——
   <use> 引用无法用外部 CSS 选中 symbol 内部的元素，
   SVG 的 presentation attribute 支持 var()，这是唯一能穿透 use 的办法。 */
.tb-mark {
  width: calc(26 * var(--u)); height: calc(26 * var(--u));
  color: var(--acc); flex: 0 0 auto;
}
.tb-mark svg { width: 100%; height: 100%; }
.tb-name {
  font-size: var(--fs-4); font-weight: 800;
  letter-spacing: calc(.2 * var(--u)); color: var(--ink);
  white-space: nowrap;
}
.tb-name small {
  display: block; font-size: calc(9 * var(--u)); font-weight: 600;
  letter-spacing: calc(1.4 * var(--u)); color: var(--ink-4);
  text-transform: uppercase; margin-top: calc(1 * var(--u));
}

/* 白胶囊分段导航 —— 参考图最标志性的控件 */
.tb-seg {
  display: flex; align-items: center; gap: calc(2 * var(--u));
  padding: calc(3 * var(--u));
  border-radius: 999px;
  background: #FFFFFF;
  flex: 0 1 auto; min-width: 0;
  overflow-x: auto; scrollbar-width: none;
}
.tb-seg::-webkit-scrollbar { display: none; }
.tb-segi {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: calc(6 * var(--u));
  height: calc(28 * var(--u)); padding: 0 calc(13 * var(--u));
  border: none; background: none; cursor: pointer;
  border-radius: 999px;
  font-family: inherit; font-size: calc(12 * var(--u)); font-weight: 600;
  color: #4A4E57; white-space: nowrap;
  transition: background .18s var(--e-out), color .18s var(--e-out);
}
.tb-segi:hover { background: rgba(11,13,18,.055); color: #0B0D12; }
.tb-segi.on {
  background: var(--acc); color: var(--acc-ink); font-weight: 700;
}
.tb-segi .n {
  font-size: calc(9.5 * var(--u)); opacity: .6;
  font-variant-numeric: tabular-nums;
}
.tb-segi.on .n { opacity: .78; }

/* 顶栏右侧：图标组 + 换色盘 + 头像 */
.tb-right {
  display: flex; align-items: center; gap: calc(9 * var(--u));
  margin-left: auto; flex: 0 0 auto;
}
.tb-ibtn {
  width: calc(32 * var(--u)); height: calc(32 * var(--u));
  border-radius: calc(10 * var(--u));
  border: 1px solid var(--glass-line);
  background: var(--n-850); color: var(--ink-2);
  display: grid; place-items: center; cursor: pointer;
  transition: background .18s var(--e-out), color .18s var(--e-out);
}
.tb-ibtn:hover { background: var(--n-750); color: var(--ink); }
.tb-ibtn svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }

/* 换色盘 —— 5 个小圆点 */
.tb-skins { display: flex; align-items: center; gap: calc(4 * var(--u)); }
.tb-skin {
  width: calc(14 * var(--u)); height: calc(14 * var(--u));
  border-radius: 50%; cursor: pointer; padding: 0;
  border: 2px solid transparent;
  box-shadow: 0 0 0 1px var(--glass-line-2);
  transition: transform .18s var(--e-out), box-shadow .18s var(--e-out);
}
.tb-skin:hover { transform: scale(1.18); }
.tb-skin.on { box-shadow: 0 0 0 2px var(--n-1000), 0 0 0 3.5px currentColor; }

.tb-avatar {
  width: calc(30 * var(--u)); height: calc(30 * var(--u));
  border-radius: 50%;
  background: linear-gradient(140deg, var(--n-700), var(--n-850));
  border: 1px solid var(--glass-line-2);
  display: grid; place-items: center;
  font-size: calc(11.5 * var(--u)); font-weight: 800; color: var(--ink);
  letter-spacing: calc(.2 * var(--u));
}

/* ═══════════ 6. 大标题页头 ═══════════ */
.pg-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: calc(20 * var(--u));
  margin-bottom: calc(10 * var(--u));
}
.pg-head-l { display: flex; align-items: flex-start; gap: calc(11 * var(--u)); min-width: 0; }
.pg-kicker {
  font-size: calc(11 * var(--u)); font-weight: 600; color: var(--ink-3);
  margin-bottom: calc(6 * var(--u)); letter-spacing: calc(.1 * var(--u));
}
.pg-kicker b { color: var(--acc); font-weight: 700; }
.pg-title {
  font-size: calc(38 * var(--u)); font-weight: 500;
  letter-spacing: calc(-1.4 * var(--u)); line-height: calc(43 * var(--u));
  color: var(--ink); margin: 0;
}
.pg-head-r { display: flex; align-items: center; gap: calc(9 * var(--u)); flex: 0 0 auto; }

/* 主按钮 —— 唯一允许大面积用强调色的地方 */
.g-btn.accent {
  background: var(--acc); color: var(--acc-ink);
  border-color: transparent; font-weight: 700;
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset;
}
.g-btn.accent:hover { opacity: .9; }
.g-btn.accent .arw { margin-left: calc(6 * var(--u)); }

/* ═══════════ 7. KPI 带（不等宽）═══════════ */
.kpi-band {
  display: grid;
  grid-template-columns: 2.05fr .92fr .92fr 1.5fr;
  gap: calc(10 * var(--u));
  margin-bottom: calc(14 * var(--u));
}
.kpi {
  position: relative;
  padding: calc(15 * var(--u)) calc(17 * var(--u));
  border-radius: calc(15 * var(--u));
  background: var(--n-800);
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow);
  min-width: 0;
}
.kpi-l {
  font-size: calc(11 * var(--u)); font-weight: 600; color: var(--ink-3);
  margin-bottom: calc(8 * var(--u));
}
.kpi-v {
  font-size: calc(27 * var(--u)); font-weight: 600;
  letter-spacing: calc(-.9 * var(--u)); color: var(--ink);
  line-height: calc(31 * var(--u));
  font-variant-numeric: tabular-nums;
}
.kpi-v em {
  font-style: normal; font-size: calc(11.5 * var(--u)); font-weight: 600;
  color: var(--ink-3); margin-left: calc(5 * var(--u)); letter-spacing: 0;
}
.kpi-sub { font-size: calc(10.5 * var(--u)); color: var(--ink-4); margin-top: calc(7 * var(--u)); }

/* 宽卡里的三联小指标 */
.kpi-3 {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(10 * var(--u)); margin-bottom: calc(14 * var(--u));
}
.kpi-s { min-width: 0; }
.kpi-s .kpi-v { font-size: calc(21 * var(--u)); line-height: calc(25 * var(--u)); }

/* 迷你条形图 —— 参考图 KPI 卡 1 底部的横条 */
.kpi-chart { display: flex; flex-direction: column; gap: calc(5 * var(--u)); }
.kpi-chart-row { display: flex; align-items: center; gap: calc(9 * var(--u)); }
.kpi-chart-k {
  font-size: calc(9.5 * var(--u)); color: var(--ink-4);
  width: calc(30 * var(--u)); flex: 0 0 auto;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kpi-chart-t {
  flex: 1 1 auto; height: calc(4 * var(--u));
  border-radius: 999px; background: var(--n-750); overflow: hidden;
}
.kpi-chart-f {
  display: block; height: 100%; border-radius: 999px;
  background: var(--acc);
}
.kpi-chart-v {
  font-size: calc(9.5 * var(--u)); color: var(--ink-3);
  width: calc(38 * var(--u)); text-align: right; flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}

/* 头像堆叠 —— 参考图 KPI 卡 1 底部 */
.kpi-avs { display: flex; align-items: center; margin-top: calc(13 * var(--u)); }
.kpi-av {
  width: calc(22 * var(--u)); height: calc(22 * var(--u));
  border-radius: 50%; margin-left: calc(-6 * var(--u));
  border: 2px solid var(--n-800);
  background: var(--n-700); color: var(--ink-1);
  display: grid; place-items: center;
  font-size: calc(9 * var(--u)); font-weight: 800;
}
.kpi-av:first-child { margin-left: 0; }
.kpi-av.on { background: var(--acc); color: var(--acc-ink); border-color: var(--n-800); }
.kpi-av-more {
  width: calc(22 * var(--u)); height: calc(22 * var(--u));
  border-radius: 50%; margin-left: calc(-6 * var(--u));
  border: 2px solid var(--n-800);
  background: var(--n-750); color: var(--ink-3);
  display: grid; place-items: center; font-size: calc(8.5 * var(--u)); font-weight: 700;
}

/* KPI 宽卡里的小表 —— 一格用强调色高亮 */
.kpi-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(5 * var(--u)); margin-top: calc(11 * var(--u));
}
.kpi-cell {
  padding: calc(7 * var(--u)) calc(8 * var(--u));
  border-radius: calc(8 * var(--u));
  background: var(--n-750);
  border: 1px solid transparent;
}
.kpi-cell .c {
  font-size: calc(9.5 * var(--u)); color: var(--ink-4);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kpi-cell .v {
  font-size: calc(12.5 * var(--u)); font-weight: 700; color: var(--ink-1);
  margin-top: calc(3 * var(--u));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kpi-cell.on { background: var(--acc); }
.kpi-cell.on .c { color: var(--acc-ink); opacity: .72; }
.kpi-cell.on .v { color: var(--acc-ink); }
.kpi-cta {
  margin-top: calc(11 * var(--u));
  display: inline-flex; align-items: center; gap: calc(5 * var(--u));
  height: calc(27 * var(--u)); padding: 0 calc(13 * var(--u));
  border-radius: 999px; border: none; cursor: pointer;
  background: var(--acc); color: var(--acc-ink);
  font-family: inherit; font-size: calc(11.5 * var(--u)); font-weight: 700;
}
.kpi-cta:hover { opacity: .9; }

/* ═══════════ 8. 筛选条 ═══════════ */
.fs-strip {
  display: flex; align-items: center; gap: calc(9 * var(--u));
  flex-wrap: wrap;
  padding: calc(8 * var(--u)) calc(10 * var(--u));
  margin-bottom: calc(18 * var(--u));
  border-radius: calc(13 * var(--u));
  background: var(--n-850);
  border: 1px solid var(--glass-line);
}
.fs-lbl {
  font-size: calc(11 * var(--u)); font-weight: 700; color: var(--ink-2);
  display: inline-flex; align-items: center; gap: calc(6 * var(--u));
  padding-right: calc(4 * var(--u));
}
.fs-lbl .cnt {
  min-width: calc(16 * var(--u)); height: calc(16 * var(--u));
  border-radius: 999px; background: var(--acc); color: var(--acc-ink);
  display: grid; place-items: center;
  font-size: calc(9 * var(--u)); font-weight: 800;
}
.fs-pill {
  display: inline-flex; align-items: center; gap: calc(7 * var(--u));
  height: calc(30 * var(--u)); padding: 0 calc(12 * var(--u));
  border-radius: 999px; cursor: pointer;
  background: var(--n-800); border: 1px solid var(--glass-line);
  color: var(--ink-2); font-family: inherit;
  font-size: calc(11.5 * var(--u)); font-weight: 600;
  transition: background .16s var(--e-out), color .16s var(--e-out);
}
.fs-pill:hover { background: var(--n-750); color: var(--ink); }
.fs-pill.on { background: var(--acc-soft); border-color: var(--acc-line); color: var(--ink); }
.fs-pill svg { width: calc(12 * var(--u)); height: calc(12 * var(--u)); opacity: .6; }
.fs-search {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: calc(7 * var(--u));
  height: calc(30 * var(--u)); padding: 0 calc(12 * var(--u));
  border-radius: 999px;
  background: var(--n-800); border: 1px solid var(--glass-line);
  min-width: calc(170 * var(--u));
}
.fs-search svg { width: calc(13 * var(--u)); height: calc(13 * var(--u)); color: var(--ink-4); flex: 0 0 auto; }
.fs-search input {
  flex: 1 1 auto; min-width: 0;
  background: none; border: none; outline: none;
  color: var(--ink); font-family: inherit; font-size: calc(11.5 * var(--u));
}
.fs-search input::placeholder { color: var(--ink-4); }

/* ═══════════ 9. 悬浮分段控件（骑在分割面板上）═══════════ */
.float-seg {
  display: flex; align-items: center; gap: calc(3 * var(--u));
  padding: calc(3 * var(--u));
  border-radius: 999px;
  background: var(--n-900);
  border: 1px solid var(--glass-line-2);
  box-shadow: var(--shadow-lg);
  margin: calc(-17 * var(--u)) auto calc(14 * var(--u));
  position: relative; z-index: 3;
  width: max-content;
}
.float-segi {
  display: inline-flex; align-items: center; gap: calc(6 * var(--u));
  height: calc(28 * var(--u)); padding: 0 calc(14 * var(--u));
  border: none; background: none; cursor: pointer;
  border-radius: 999px;
  font-family: inherit; font-size: calc(11.5 * var(--u)); font-weight: 600;
  color: var(--ink-3); white-space: nowrap;
  transition: background .18s var(--e-out), color .18s var(--e-out);
}
.float-segi:hover { color: var(--ink); }
.float-segi.on { background: var(--acc); color: var(--acc-ink); font-weight: 700; }
.float-segi .n {
  font-size: calc(9.5 * var(--u)); opacity: .62; font-variant-numeric: tabular-nums;
}
.float-segi.on .n { opacity: .8; }

/* ═══════════ 10. 明暗分割面板 ═══════════ */
.split-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: calc(10 * var(--u));
  align-items: stretch;
}

/* 左：纸质清单
   深色主题下它是「白纸」（反相），浅色主题下它是「浅灰纸」——
   两种主题都保证与右侧详情卡有明度差，层次才立得住。 */
.sp-list {
  border-radius: calc(15 * var(--u));
  background: #FFFFFF;
  color: #0B0D12;
  padding: calc(16 * var(--u)) calc(14 * var(--u)) calc(12 * var(--u));
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex; flex-direction: column;
  min-height: 0;
}
[data-theme="light"] .sp-list {
  background: #EDEFF3;
  border: 1px solid var(--glass-line);
}
[data-theme="light"] .sp-row:hover { background: #E3E6EB; }
[data-theme="light"] .sp-row.on { background: #DFE2E8; }
[data-theme="light"] .sp-av { background: #D3D7DE; color: #4A4E57; }
[data-theme="light"] .btn-line:hover { background: #E3E6EB; }
.sp-list-h {
  font-size: calc(13.5 * var(--u)); font-weight: 700; color: #0B0D12;
  margin-bottom: calc(11 * var(--u));
  flex: 0 0 auto;
}
.sp-row {
  display: grid;
  grid-template-columns: calc(26 * var(--u)) minmax(0, 1fr) auto;
  align-items: center; gap: calc(10 * var(--u));
  padding: calc(7 * var(--u)) calc(8 * var(--u));
  border-radius: calc(10 * var(--u));
  cursor: pointer; width: 100%; text-align: left;
  background: none; border: none; font-family: inherit;
  transition: background .16s var(--e-out);
}
.sp-row:hover { background: #F1F2F5; }
.sp-row.on { background: #ECEDF1; }
.sp-av {
  width: calc(26 * var(--u)); height: calc(26 * var(--u));
  border-radius: 50%; flex: 0 0 auto;
  background: #DFE1E6; color: #4A4E57;
  display: grid; place-items: center;
  font-size: calc(9.5 * var(--u)); font-weight: 800;
}
.sp-row.on .sp-av { background: var(--acc); color: var(--acc-ink); }
.sp-txt { min-width: 0; }
.sp-txt .t {
  display: block;
  font-size: calc(11.5 * var(--u)); font-weight: 600; color: #0B0D12;
  line-height: calc(16 * var(--u));
  max-height: calc(32 * var(--u)); overflow: hidden;
}
.sp-txt .s {
  display: block;
  font-size: calc(9.5 * var(--u)); color: #8A8E98; margin-top: calc(1 * var(--u));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sp-tag {
  font-size: calc(9.5 * var(--u)); font-weight: 700;
  padding: calc(2 * var(--u)) calc(8 * var(--u));
  border-radius: 999px;
  background: #ECEDF1; color: #6B6F79; white-space: nowrap;
}
.sp-tag.on { background: var(--acc); color: var(--acc-ink); }
.sp-amt {
  font-size: calc(11.5 * var(--u)); font-weight: 700; color: #0B0D12;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* 右：详情（深） */
.sp-detail {
  border-radius: calc(15 * var(--u));
  background: var(--n-800);
  border: 1px solid var(--glass-line);
  padding: calc(17 * var(--u)) calc(19 * var(--u)) calc(13 * var(--u));
  display: flex; flex-direction: column;
  box-shadow: var(--shadow);
}
.sp-dh {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: calc(14 * var(--u)); margin-bottom: calc(15 * var(--u));
}
.sp-dt {
  font-size: calc(29 * var(--u)); font-weight: 600;
  letter-spacing: calc(-1 * var(--u)); color: var(--ink);
  line-height: calc(33 * var(--u));
}
.sp-dt em {
  font-style: normal; font-size: calc(11 * var(--u)); font-weight: 700;
  color: var(--ink-3); margin-left: calc(7 * var(--u));
  letter-spacing: 0;
}
.sp-dl { font-size: calc(11 * var(--u)); color: var(--ink-3); margin-top: calc(4 * var(--u)); }
.sp-dc { display: flex; align-items: center; gap: calc(9 * var(--u)); flex: 0 0 auto; }
.sp-dc-av {
  width: calc(34 * var(--u)); height: calc(34 * var(--u));
  border-radius: 50%; background: var(--n-700); color: var(--ink-1);
  display: grid; place-items: center; font-size: calc(11 * var(--u)); font-weight: 800;
}
.sp-dc-n { font-size: calc(12.5 * var(--u)); font-weight: 700; color: var(--ink); }
.sp-dc-s { font-size: calc(10 * var(--u)); color: var(--ink-4); }

/* 详情里的三联子卡 */
.sp-sub {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(9 * var(--u)); margin-bottom: calc(14 * var(--u));
}
.sp-subc {
  padding: calc(11 * var(--u)) calc(12 * var(--u));
  border-radius: calc(11 * var(--u));
  background: var(--n-750);
  border: 1px solid var(--glass-line);
}
.sp-subc .k {
  font-size: calc(10 * var(--u)); color: var(--ink-4);
  display: flex; align-items: center; justify-content: space-between; gap: calc(6 * var(--u));
}
.sp-subc .v {
  font-size: calc(16 * var(--u)); font-weight: 700; color: var(--ink);
  margin-top: calc(6 * var(--u)); letter-spacing: calc(-.3 * var(--u));
  font-variant-numeric: tabular-nums;
}
.sp-subc.add {
  display: grid; place-items: center; color: var(--ink-4);
  cursor: pointer; font-size: calc(17 * var(--u));
}
.sp-subc.add:hover { background: var(--n-700); color: var(--ink-2); }

/* 详情底栏：三项统计 + 操作 */
.sp-foot {
  margin-top: auto; padding-top: calc(13 * var(--u));
  border-top: 1px solid var(--glass-line);
  display: flex; align-items: center; gap: calc(18 * var(--u));
}
.sp-fs { min-width: 0; }
.sp-fs .k { font-size: calc(10 * var(--u)); color: var(--ink-4); }
.sp-fs .v {
  font-size: calc(15 * var(--u)); font-weight: 700; color: var(--ink);
  margin-top: calc(2 * var(--u)); font-variant-numeric: tabular-nums;
}
.sp-fa { margin-left: auto; display: flex; align-items: center; gap: calc(8 * var(--u)); }
.sp-ib {
  width: calc(28 * var(--u)); height: calc(28 * var(--u));
  border-radius: calc(9 * var(--u));
  border: 1px solid var(--glass-line); background: var(--n-750);
  color: var(--ink-3); display: grid; place-items: center; cursor: pointer;
}
.sp-ib:hover { background: var(--n-700); color: var(--ink); }
.sp-ib svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.sp-pill {
  height: calc(29 * var(--u)); padding: 0 calc(14 * var(--u));
  border-radius: 999px; border: none; cursor: pointer;
  background: var(--acc); color: var(--acc-ink);
  font-family: inherit; font-size: calc(11.5 * var(--u)); font-weight: 700;
}
.sp-pill:hover { opacity: .9; }
.sp-pill.ghost {
  background: var(--n-750); color: var(--ink-2); border: 1px solid var(--glass-line);
}

/* ═══════════ 11. 组件微调（贴合新基底）═══════════ */
/* 卡片：去掉玻璃模糊，靠边框分层 */
.g-card {
  background: var(--n-800);
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow);
}
.g-card h3 { color: var(--ink); }
/* 按钮 */
.g-btn { background: var(--ink-1); color: var(--n-1000); border-radius: calc(10 * var(--u)); }
.g-btn.ghost { background: var(--n-750); color: var(--ink-1); border-color: var(--glass-line-2); }
.g-btn.ghost:hover { background: var(--n-700); }
/* 筛选胶囊 */
.g-f {
  background: var(--n-800); border-color: var(--glass-line);
  border-radius: 999px; color: var(--ink-2);
}
.g-f:hover { background: var(--n-750); color: var(--ink-1); }
.g-f.on {
  background: var(--acc); color: var(--acc-ink);
  border-color: transparent; font-weight: 700;
}
.g-f.on .n { opacity: .75; }
/* 输入框 */
.g-inp {
  background: var(--n-850); border-color: var(--glass-line);
  border-radius: calc(10 * var(--u));
}
.g-inp:focus {
  border-color: var(--acc);
  box-shadow: 0 0 0 3px var(--acc-soft);
}
/* 标签 */
.p-tag { background: var(--n-750); border-color: var(--glass-line); }
/* 页签 */
.g-tab { background: var(--n-800); border-color: var(--glass-line); border-radius: 999px; }
.g-tab.on { background: var(--acc); color: var(--acc-ink); border-color: transparent; }
.g-tab.on .cnt { background: rgba(0,0,0,.16); color: inherit; }
/* 统计条 */
.g-stats { background: var(--n-850); border-color: var(--glass-line); }
.g-stat { border-right-color: var(--glass-line); }
/* 条目 */
.g-item, .cb-item, .ex-card {
  background: var(--n-800); border-color: var(--glass-line);
}
.g-item:hover, .cb-item:hover, .ex-card:hover {
  background: var(--n-750); border-color: var(--glass-line-2);
}
/* 区块 */
.g-block { border-left-color: var(--glass-line-2); }
.g-block .bh { color: var(--ink-3); }
/* 视图页头 */
.vh { border-bottom-color: var(--glass-line); }
.vh-eyebrow::before { background: var(--vh-accent, var(--acc)); }
.vh-mv em { color: var(--vh-accent, var(--acc)); }
/* 工具条 */
.vbar {
  background: var(--n-850); border-color: var(--glass-line);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-radius: calc(13 * var(--u));
}
/* 侧栏 */
.rail { background: var(--n-850); border-color: var(--glass-line); backdrop-filter: none; }
.rail-item.on { background: var(--acc); color: var(--acc-ink); }
.rail-item.on .rc { color: var(--acc-ink); opacity: .7; }
/* 选中色条跟随强调色 —— 折叠成图标条时它是唯一的「我在哪」标识 */
.rail-item.on::before { background: var(--acc); box-shadow: 0 0 calc(8 * var(--u)) var(--acc); }
.rail-pip { background: var(--acc); box-shadow: 0 0 calc(10 * var(--u)) var(--acc); }
/* 页头折叠按钮 —— 中性底，与顶栏胶囊区分 */
.pg-fold { background: var(--n-850); color: var(--ink-3); }
/* 折叠态 tooltip 用中性色，避免 5 套配色下文字对比失衡 */
.rail:not(.open) .rail-item::after { background: var(--n-750); }
.rail.open .rail-item.on { background: var(--acc); }
/* 折叠态：不用整块强调色铺满（72px 窄条里太抢眼，压住图标本身），
   改成「图标用强调色 + 左侧色条」，选中感还在但不喧宾夺主 */
.rail:not(.open) .rail-item.on {
  background: var(--acc-soft);
  color: var(--acc);
}
.rail:not(.open) .rail-item.on::before {
  background: var(--acc); box-shadow: 0 0 calc(10 * var(--u)) var(--acc);
}
/* 右侧栏 */
.rr-card { background: var(--n-800); border-color: var(--glass-line); }
/* 主按钮类（已有 .g-btn 基础） */
.g-script { background: var(--n-750); border-left-color: var(--acc); }

/* ═══════════ 12. 响应式 ═══════════ */
@media (max-width: 1280px) {
  .kpi-band { grid-template-columns: 1.6fr 1fr 1fr; }
  .kpi-band .kpi:nth-child(4) { grid-column: span 3; }
}
@media (max-width: 1080px) {
  .split-panel { grid-template-columns: minmax(0, 1fr); }
  .tb-name small { display: none; }
}
@media (max-width: 820px) {
  .kpi-band { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .kpi-band .kpi:nth-child(4) { grid-column: span 2; }
  .kpi-3 { grid-template-columns: minmax(0, 1fr); }
  .pg-title { font-size: calc(29 * var(--u)); line-height: calc(34 * var(--u)); }
  .topbar { flex-wrap: wrap; }
  .tb-right { order: 3; }
}
@media (max-width: 560px) {
  .kpi-band { grid-template-columns: minmax(0, 1fr); }
  .kpi-band .kpi:nth-child(4) { grid-column: span 1; }
  .sp-sub { grid-template-columns: minmax(0, 1fr); }
  .pg-head { flex-direction: column; }
}

/* ═══════════ 13. 打印 ═══════════ */
@media print {
  .topbar, .float-seg, .fs-strip { display: none !important; }
}

/* 浅色清单里的文本链接按钮 */
.btn-line {
  width: 100%; text-align: left; cursor: pointer;
  background: none; border: none; font-family: inherit;
  font-size: calc(11.5 * var(--u)); font-weight: 700; color: #4A4E57;
  padding: calc(6 * var(--u)) calc(8 * var(--u));
  border-radius: calc(8 * var(--u));
  transition: background .16s var(--e-out), color .16s var(--e-out);
}
.btn-line:hover { background: #F1F2F5; color: #0B0D12; }

/* 旧页头（p-head / p-tool）已被全局顶栏取代，隐藏以免重复 */
.p-head, .p-tools { display: none; }

/* 详情面板里的解析链 —— 六步闭环，填满右侧留白 */
.sp-chain {
  flex: 1 1 auto;
  display: flex; flex-direction: column; gap: calc(3 * var(--u));
  padding: calc(12 * var(--u)) 0 calc(4 * var(--u));
}
.sp-chain-h {
  font-size: calc(10.5 * var(--u)); font-weight: 700; color: var(--ink-3);
  margin-bottom: calc(4 * var(--u));
}
.sp-chain-row {
  display: grid;
  grid-template-columns: calc(17 * var(--u)) minmax(0, 1fr) auto;
  align-items: center; gap: calc(9 * var(--u));
  padding: calc(5 * var(--u)) calc(8 * var(--u));
  border-radius: calc(8 * var(--u));
  background: var(--n-850);
}
[data-theme="light"] .sp-chain-row { background: var(--n-900); }
.sp-chain-n {
  width: calc(17 * var(--u)); height: calc(17 * var(--u));
  border-radius: 50%; background: var(--acc); color: var(--acc-ink);
  display: grid; place-items: center;
  font-size: calc(9 * var(--u)); font-weight: 800;
}
.sp-chain-t {
  font-size: calc(11.5 * var(--u)); color: var(--ink-2); line-height: calc(16 * var(--u));
}
.sp-chain-s {
  font-size: calc(9.5 * var(--u)); font-weight: 700; color: var(--ink-4);
  letter-spacing: calc(.4 * var(--u));
}