/* =================================================================
 * Sales Command Center · v4 · Mono-accent dual-theme
 *
 * Two independent themes (NOT inverted):
 *   ☀ light  "Paper & Ink"  — warm cream, deep ink, single deep-indigo accent
 *   ☾ dark   "Carbon & Lime"— warm carbon, cream white,  single electric-lime accent
 *
 * Color philosophy: ONE accent, six greys, three sparingly-used semantic
 * status colors. Hierarchy is achieved through weight & spacing,
 * NOT through colorfulness.
 * ================================================================= */

/* ════════════════════════════════════════════════════════════════
 * Light — "Paper & Ink"
 * ════════════════════════════════════════════════════════════════ */
:root,
:root[data-theme="light"] {
  --is-dark: 0;

  /* surfaces — warm cream paper */
  --bg:        #F1EEE5;            /* warm cream */
  --bg-soft:   #E9E5DA;
  --surf-1:    rgba(255, 255, 255, 0.62);
  --surf-2:    rgba(255, 255, 255, 0.82);
  --surf-3:    #FFFFFF;
  --surf-line: rgba(255, 255, 255, 0.55);

  /* hairline borders */
  --line-1:    rgba(14, 14, 18, 0.06);
  --line-2:    rgba(14, 14, 18, 0.10);
  --line-3:    rgba(14, 14, 18, 0.18);

  /* 6-step ink (text grayscale) */
  --ink-1:     #0F0F14;            /* deepest — display + numbers */
  --ink-2:     #2A2B33;            /* heading body */
  --ink-3:     #5C5E6E;            /* secondary */
  --ink-4:     #82859A;            /* meta / labels */
  --ink-5:     #B5B7C5;            /* hint */
  --ink-6:     #DEDFE6;            /* divider tint */

  /* primary + secondary accent (cool indigo + warm amber — classic editorial pair) */
  --acc:       #3730A3;            /* deep royal indigo — cool, structural */
  --acc-soft:  rgba(55, 48, 163, 0.08);
  --acc-line:  rgba(55, 48, 163, 0.22);
  --acc-on:    #FFFFFF;
  --acc-2:     #E26A2C;            /* warm rust amber — warmth & energy */
  --acc-2-soft:rgba(226, 106, 44, 0.10);
  --acc-3:     #0F766E;            /* deep teal — third role for tertiary data */
  --acc-3-soft:rgba(15, 118, 110, 0.10);

  /* status (used SPARINGLY) */
  --good:      #16A34A;
  --good-soft: rgba(22, 163, 74, 0.10);
  --warn:      #D97706;
  --warn-soft: rgba(217, 119, 6, 0.10);
  --bad:       #DC2626;
  --bad-soft:  rgba(220, 38, 38, 0.10);

  /* light mode 对照色 (用于 chart 对比图) */
  --warm:      #78706A;            /* warm slate */
  --warm-soft: rgba(120, 112, 106, 0.10);
  --chart-grid:    rgba(15, 18, 38, 0.06);
  --chart-split:   rgba(15, 18, 38, 0.04);
  --chart-border:  rgba(15, 18, 38, 0.10);
  --info:      #0891B2;
  --info-soft: rgba(8, 145, 178, 0.10);

  /* chart palette — 2 accents + neutrals (so charts look alive, not dead) */
  --c-1: #3730A3;     /* primary indigo */
  --c-2: #E26A2C;     /* secondary amber */
  --c-3: #0F766E;     /* tertiary teal */
  --c-4: #6366F1;     /* indigo light */
  --c-5: #82859A;     /* neutral 1 */
  --c-6: #C2C4D2;     /* neutral 2 */

  /* nav background */
  --nav-bg:    rgba(241, 238, 229, 0.78);
  --subnav-bg: rgba(241, 238, 229, 0.92);

  /* shadows */
  --sh-1: 0 1px 2px rgba(14, 14, 22, 0.04);
  --sh-2: 0 4px 14px -4px rgba(14, 14, 22, 0.08), 0 1px 2px rgba(14, 14, 22, 0.04);
  --sh-3: 0 14px 40px -8px rgba(14, 14, 22, 0.14), 0 2px 6px rgba(14, 14, 22, 0.05);
  --sh-pop: 0 24px 60px -12px rgba(55, 48, 163, 0.20), 0 8px 20px -4px rgba(55, 48, 163, 0.10);
  --sh-glow: 0 0 0 1px rgba(55, 48, 163, 0.18), 0 12px 36px -8px rgba(55, 48, 163, 0.18);

  /* page ambient (very subtle, not colorful) */
  --ambient:
    radial-gradient(ellipse 1100px 600px at 90% -10%, rgba(55, 48, 163, 0.06), transparent 60%),
    radial-gradient(ellipse 800px 500px at -10% 100%, rgba(14, 14, 22, 0.04), transparent 60%);

  /* film grain overlay strength */
  --grain-opacity: 0.45;
  --grain-blend: overlay;

  /* type */
  --f-sans:    -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI Variable', 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei UI', 'Microsoft YaHei', 'Helvetica Neue', sans-serif;
  --f-mono:    ui-monospace, 'SF Mono', SFMono-Regular, 'JetBrains Mono', 'Cascadia Code', Consolas, Menlo, monospace;

  /* radius */
  --r-xs: 6px; --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-xl: 28px;

  --blur: 18px;
}

/* ════════════════════════════════════════════════════════════════
 * Dark — "Graphite Editorial"
 * 墨石灰底 (NOT 死黑) · 单 hue 降饱和 · 状态色全 desaturated · 层级靠亮度而非饱和
 *
 *   ├ bg #18181D 比之前 #0E0E14 亮 ~30% — 不死黑、有空气感
 *   ├ surf-3 卡片 #262630 比 bg 浅 50% 亮度差，层次明显但不刺眼
 *   ├ accent #9BA8DC = soft indigo 但饱和度比 #A5B4FC 低 ~30%
 *   ├ 状态色全部 muted (good/warn/bad 灰度版)
 *   └ ambient 几乎不可见，没有强 violet aura
 * 灵感：Linear / Apple Notes / Stripe Dashboard 这种 editorial 风格
 * ════════════════════════════════════════════════════════════════ */
:root[data-theme="dark"] {
  --is-dark: 1;

  /* ════════════════════════════════════════════════════════════════
   * Aurora Editorial — multi-hue desaturated (2026-04-29 重设计)
   * 设计灵感:Linear / Vercel Geist v2 / Notion dark — "安静的 vibrant"
   * 6 个色相 (indigo/coral/teal/lavender/saffron/sky) 各 35-50% 饱和度
   * WCAG 全部 ≥ 7:1 但相互低饱和,长时间盯不疲劳
   * ════════════════════════════════════════════════════════════════ */

  /* surfaces — 深炭带 cool tint,4 级层次让卡片自然浮起 */
  --bg:        #16161E;            /* 深炭蓝调 (不再中性 graphite) */
  --bg-soft:   #1B1B26;
  --surf-1:    #1E1E2A;            /* tile 默认底色 (实色,不靠 alpha) */
  --surf-2:    #25253A;            /* hover/强调 */
  --surf-3:    #2D2D45;            /* popup/dropdown 最浅 */
  --surf-line: rgba(255, 255, 255, 0.10);

  /* line 系统 — 边框可见且柔和 */
  --line-1:    rgba(255, 255, 255, 0.08);
  --line-2:    rgba(255, 255, 255, 0.13);
  --line-3:    rgba(255, 255, 255, 0.20);

  /* ink 灰阶 — 6 级,带极轻 cool tint 跟 bg 一致 */
  --ink-1:     #ECEAE0;            /* 主标题/数字 — 13:1 */
  --ink-2:     #B8B4A8;            /* 副标题 — 8.5:1 */
  --ink-3:     #8E8B82;            /* meta/label — 5.2:1 */
  --ink-4:     #6B6862;            /* 弱辅助 — 3.0:1 */
  --ink-5:     #3D3B40;            /* divider */
  --ink-6:     #2D2B30;            /* divider 最弱 */

  /* ════════════════════════════════════════════════════════════════
   * Multi-Hue Data Palette — 6 hue,每个 35-50% 饱和,WCAG AA+
   * 互相色相差 ≥ 30°,视觉易区分但都柔和
   * ════════════════════════════════════════════════════════════════ */

  /* 主色 indigo (data-1 / 本月 / primary) */
  --acc:       #A8B5E5;            /* 230° indigo, 对比 8.8:1 */
  --acc-soft:  rgba(168, 181, 229, 0.10);
  --acc-line:  rgba(168, 181, 229, 0.24);
  --acc-on:    #16161E;

  /* ✅ acc-2 / acc-3 不再是 indigo 深浅,改为 不同色相
     所有前端硬编码 ACC/ACC2/ACC3 三色 chart (donut/line/bar) 立刻变成多色 */
  --acc-2:     #E8A87C;            /* 22° warm coral, 对比 8.3:1 */
  --acc-2-soft:rgba(232, 168, 124, 0.10);
  --acc-3:     #7DD3C0;            /* 165° teal-mint, 对比 9.7:1 */
  --acc-3-soft:rgba(125, 211, 192, 0.10);

  /* ✅ 对照色 coral — 暖橙,经典冷↔暖反差,但 desat 不刺眼 (data-2 / 上月) */
  --warm:      #E8A87C;            /* 22° warm coral, 对比 8.3:1 */
  --warm-soft: rgba(232, 168, 124, 0.10);

  /* status — 提亮但仍 desat (good/warn/bad 全部 ≥ 6:1) */
  --good:      #7DD3C0;            /* 165° teal-mint, 9.7:1 */
  --good-soft: rgba(125, 211, 192, 0.12);
  --warn:      #E5C26B;            /* 45° gold, 9.0:1 */
  --warn-soft: rgba(229, 194, 107, 0.12);
  --bad:       #E89A9A;            /* 0° rose, 6.8:1 */
  --bad-soft:  rgba(232, 154, 154, 0.12);
  --info:      #A8B5E5;
  --info-soft: rgba(168, 181, 229, 0.10);

  /* ════════════════════════════════════════════════════════════════
   * Chart palette — 6 个色相轮换,色相差 ≥ 30°
   * 0° rose · 22° coral · 53° saffron · 165° teal · 210° sky · 230° indigo · 270° lavender
   * ════════════════════════════════════════════════════════════════ */
  --c-1: #A8B5E5;     /* indigo  (主) */
  --c-2: #E8A87C;     /* coral   (cool↔warm 反差) */
  --c-3: #7DD3C0;     /* teal    (绿青,提神) */
  --c-4: #C9B8E0;     /* lavender (紫,柔和) */
  --c-5: #D4C97A;     /* saffron  (沙金,强调) */
  --c-6: #9FBBD8;     /* sky     (浅蓝,辅助) */

  /* chart 网格 — 提亮到 5%,可见但不抢戏 */
  --chart-grid:    rgba(255, 255, 255, 0.07);
  --chart-split:   rgba(255, 255, 255, 0.05);
  --chart-border:  rgba(255, 255, 255, 0.10);

  --nav-bg:    rgba(22, 22, 30, 0.92);     /* 跟新 bg #16161E 同色调 */
  --subnav-bg: rgba(22, 22, 30, 0.96);

  /* shadows — 强 drop shadow + 微亮 inset,卡片浮感立体 */
  --sh-1: 0 1px 0 rgba(255, 255, 255, 0.05) inset;
  --sh-2: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 4px 24px -6px rgba(0, 0, 0, 0.55);
  --sh-3: 0 1px 0 rgba(255, 255, 255, 0.07) inset, 0 16px 48px -16px rgba(0, 0, 0, 0.65);
  --sh-pop: 0 1px 0 rgba(255, 255, 255, 0.07) inset, 0 16px 48px -12px rgba(0, 0, 0, 0.60), 0 0 0 1px rgba(168, 181, 229, 0.16);
  --sh-glow: 0 0 0 1px rgba(168, 181, 229, 0.24), 0 8px 24px -8px rgba(168, 181, 229, 0.18);

  /* ambient — 多色相微光源 (cool indigo + warm coral),营造"自然夜晚"感 */
  --ambient:
    radial-gradient(ellipse 1400px 800px at 70% -8%, rgba(168, 181, 229, 0.040), transparent 55%),
    radial-gradient(ellipse 1100px 700px at 8% 100%, rgba(232, 168, 124, 0.022), transparent 60%),
    radial-gradient(ellipse 900px 540px at 100% 60%, rgba(125, 211, 192, 0.018), transparent 65%);

  --grain-opacity: 0.07;
  --grain-blend: soft-light;
}

/* ════════════════════════════════════════════════════════════════
 * Reset + base
 * ════════════════════════════════════════════════════════════════ */
* { box-sizing: border-box; margin: 0; padding: 0; }
*::selection { background: var(--acc); color: var(--acc-on); }
html { scroll-behavior: smooth; background: var(--bg); }
i, em { font-style: normal; }     /* CJK never italic */

body {
  font-family: var(--f-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "ss02", "cv11";
  min-height: 100vh;
  overflow-x: hidden;
  background-image: var(--ambient);
  background-attachment: fixed;
  transition: background 400ms ease, color 400ms ease;
}

body::before {
  content: ''; position: fixed; inset: 0;
  pointer-events: none; z-index: 200;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.18'/%3E%3C/svg%3E");
  mix-blend-mode: var(--grain-blend);
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* ════════════════════════════════════════════════════════════════
 * Layout — left sidebar + main content (NEW v6.3)
 * ════════════════════════════════════════════════════════════════ */
.app {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  align-content: start;
  min-height: 100vh;
}
/* sidebar pinned to col 1 spanning all rows; rest stacks in col 2 */
.app > .nav     { grid-column: 1; grid-row: 1 / -1; }
.app > .subnav  { grid-column: 2; grid-row: 1; min-width: 0; }
.app > .page    { grid-column: 2; grid-row: 2; min-width: 0; }
.app > .footer  { grid-column: 2; grid-row: 3; min-width: 0; }
/* fallback for any other direct child (e.g. login-page when grid still active) */
.app > *:not(.nav):not(.subnav):not(.page):not(.footer) { grid-column: 2; min-width: 0; }
/* Login page bypasses sidebar grid — full-screen single column */
.app:has(> .login-page),
.app.app-login {
  display: block;
  grid-template-columns: none;
}
.app.app-login > *:not(.nav) { grid-column: auto; }
/* user-toggled collapsed sidebar */
.app.app-nav-collapsed { grid-template-columns: 64px minmax(0, 1fr); }
.app.app-nav-collapsed .side-label,
.app.app-nav-collapsed .nav-section-title,
.app.app-nav-collapsed .nav-crumb,
.app.app-nav-collapsed .nav-actions .theme-toggle { display: none; }
.app.app-nav-collapsed .nav { padding: 18px 8px; gap: 12px; }
.app.app-nav-collapsed .nav-top { flex-direction: column; gap: 8px; align-items: center; }
.app.app-nav-collapsed .nav-brand { padding: 4px 0 12px; justify-content: center; }
.app.app-nav-collapsed .nav-brand-mark { width: 34px; height: 34px; font-size: 13px; }
.app.app-nav-collapsed .nav-pill { justify-content: center; padding: 9px 6px; gap: 0; }
.app.app-nav-collapsed .nav-pill .dot { width: 7px; height: 7px; opacity: .8; }
.app.app-nav-collapsed .nav-pill.active::before { left: -8px; }
.app.app-nav-collapsed .nav-pill-ch { padding: 7px 4px; }
.app.app-nav-collapsed .nav-pill-ch .num-ch { font-size: 11px; }
.app.app-nav-collapsed .nav-actions { justify-content: center; padding: 4px 0; }
.app.app-nav-collapsed .nav-meta { justify-content: center; padding: 8px 0; }
@media (max-width: 980px) {
  .app { grid-template-columns: 64px minmax(0, 1fr); }
  .side-label, .nav-section-title { display: none; }
}

/* Sidebar */
.nav {
  position: sticky; top: 0;
  height: 100vh;
  display: flex; flex-direction: column; gap: 16px;
  padding: 18px 14px;
  background: var(--nav-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-right: 1px solid var(--line-1);
  overflow-y: auto;
  z-index: 30;
}
.nav::-webkit-scrollbar { width: 4px; }
.nav::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 2px; }

.nav-top {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-1);
}
.nav-top .nav-brand { padding: 4px 4px 0; border-bottom: 0; flex: 1; min-width: 0; }
.nav-collapse-btn {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 8px;
  border: 1px solid var(--line-2);
  background: var(--surf-1);
  color: var(--ink-3); cursor: pointer;
  transition: all 180ms;
  flex-shrink: 0;
}
.nav-collapse-btn:hover { background: var(--surf-2); color: var(--ink-1); border-color: var(--line-3); }
.nav-collapse-btn svg { width: 14px; height: 14px; display: block; }
.nav-collapse-btn .ico-c { display: inline-flex; }
.nav-collapse-btn .ico-e { display: none; }
.app.app-nav-collapsed .nav-collapse-btn .ico-c { display: none; }
.app.app-nav-collapsed .nav-collapse-btn .ico-e { display: inline-flex; }

.nav-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 8px 14px;
  border-bottom: 1px solid var(--line-1);
  font-family: var(--f-sans);
  font-weight: 700; font-size: 15px;
  letter-spacing: -0.012em;
  color: var(--ink-1);
  text-decoration: none;
}
.nav-brand > span:not(.nav-brand-mark) { display: inline-flex; flex-direction: column; line-height: 1.15; }
.nav-brand .light { font-weight: 400; color: var(--ink-4); font-size: 11px; letter-spacing: 0.6px; text-transform: uppercase; margin-bottom: 1px; }
.nav-brand-mark {
  width: 30px; height: 30px;
  border-radius: 9px;
  background: var(--ink-1);
  display: grid; place-items: center;
  color: var(--bg);
  font-family: var(--f-sans); font-weight: 700; font-size: 12px;
  letter-spacing: 0.4px;
}
:root[data-theme="dark"] .nav-brand-mark { background: var(--acc); color: var(--acc-on); }

.nav-crumb {
  font-family: var(--f-mono); font-size: 10px;
  color: var(--ink-4); letter-spacing: 1.2px; text-transform: uppercase;
  padding: 8px 10px 4px;
  font-weight: 600;
}
.nav-crumb b { color: var(--ink-2); font-weight: 600; display: block; margin-top: 3px; font-family: var(--f-sans); font-size: 13px; letter-spacing: -0.01em; text-transform: none; }

.nav-spacer { flex: 1; }

.nav-section-title {
  font-family: var(--f-mono); font-size: 10px;
  color: var(--ink-4); letter-spacing: 1.4px; text-transform: uppercase;
  padding: 8px 10px 4px; font-weight: 600;
  margin-top: 2px;
}

/* 可折叠 section title (4 段：总览/部门/子单位/章节) */
.nav-section-toggle {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; user-select: none;
  transition: color 180ms;
  border-radius: 6px;
}
.nav-section-toggle:hover { color: var(--ink-2); background: var(--surf-1); }
.nav-section-chev {
  font-size: 9px; color: var(--ink-4);
  transition: transform 200ms cubic-bezier(.4,0,.2,1);
  margin-left: 6px;
}
.nav-section-toggle.collapsed .nav-section-chev { transform: rotate(-90deg); }
.nav-section-toggle.collapsed + .nav-branches { display: none; }
.app.app-nav-collapsed .nav-section-chev { display: none; }

/* 紧凑版 nav-pill 用在部门/子单位段 (减少占用) */
.nav-branches-compact { gap: 1px !important; }
.nav-branches-compact .nav-pill { padding: 6px 10px; font-size: 12.5px; }
.nav-branches-compact .nav-pill .dot { width: 5px; height: 5px; }

/* 返回上一层 按钮 */
.nav-crumb-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
.nav-crumb-pos { flex: 1; min-width: 0; }
.nav-back-btn {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px;
  background: var(--surf-2);
  border: 1px solid var(--line-2);
  border-radius: 6px;
  color: var(--ink-3);
  font-family: var(--f-mono); font-size: 10.5px; font-weight: 600;
  cursor: pointer;
  transition: all 180ms;
}
.nav-back-btn:hover {
  background: var(--surf-3);
  color: var(--ink-1);
  border-color: var(--line-3);
  transform: translateX(-2px);
}
.nav-back-arrow { font-size: 13px; line-height: 1; }
.app.app-nav-collapsed .nav-back-label { display: none; }
.app.app-nav-collapsed .nav-back-btn { padding: 4px 6px; }

/* ── 产品上下架 折叠/展开 按钮 ─────────────────────────────── */
.lc-toggle {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--surf-1);
  border: 1px solid var(--line-2);
  border-radius: 6px;
  color: var(--ink-3);
  font-size: 12px; font-weight: 500;
  cursor: pointer;
  transition: all 180ms;
  font-family: var(--f-mono); letter-spacing: 0.3px;
}
.lc-toggle:hover {
  background: var(--surf-2);
  color: var(--ink-1);
  border-color: var(--line-3);
}

/* ── hero 日期范围 toolbar (L6 + L4-sales) ───────────────────── */
.hero-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 16px;
  margin: 0 0 18px;
  background: var(--surf-1);
  border: 1px solid var(--line-1);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
}
.dr-presets {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--surf-2);
  border-radius: 8px;
}
.dr-btn {
  padding: 5px 12px;
  border-radius: 6px;
  background: transparent;
  border: 0;
  color: var(--ink-3);
  font-size: 12px; font-weight: 500;
  cursor: pointer;
  transition: all 180ms cubic-bezier(.4,0,.2,1);
  font-family: var(--f-sans);
}
.dr-btn:hover { color: var(--ink-1); background: var(--surf-3); }
.dr-btn.active {
  background: var(--acc);
  color: var(--acc-on);
  font-weight: 600;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset;
}
.dr-custom {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.dr-input {
  padding: 5px 10px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  background: var(--surf-3);
  color: var(--ink-1);
  font-family: var(--f-mono);
  font-size: 12px;
  outline: none;
  transition: border-color 180ms;
}
.dr-input:focus { border-color: var(--acc-line); }
.dr-input::-webkit-calendar-picker-indicator { opacity: 0.55; cursor: pointer; }
.dr-input:hover::-webkit-calendar-picker-indicator { opacity: 1; }
.dr-arrow { color: var(--ink-4); font-size: 13px; user-select: none; }
.dr-apply {
  padding: 5px 14px;
  border-radius: 6px;
  background: var(--surf-3);
  border: 1px solid var(--line-2);
  color: var(--ink-1);
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: all 180ms;
  font-family: var(--f-sans);
}
.dr-apply:hover {
  background: var(--acc);
  color: var(--acc-on);
  border-color: var(--acc);
}
.dr-status {
  font-size: 12.5px;
  color: var(--ink-3);
  margin-left: auto;
  white-space: nowrap;
  font-family: var(--f-mono);
  letter-spacing: 0.2px;
}
@media (max-width: 980px) {
  .hero-toolbar { flex-direction: column; align-items: stretch; }
  .dr-status { margin-left: 0; text-align: center; }
}

.nav-branches { display: flex; flex-direction: column; gap: 2px; }
.nav-pill {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px; font-weight: 500;
  color: var(--ink-2); cursor: pointer;
  transition: all 180ms cubic-bezier(.4,0,.2,1);
  background: transparent; border: 1px solid transparent;
  text-decoration: none;
  position: relative;
}
.nav-pill:hover { background: var(--surf-2); color: var(--ink-1); }
.nav-pill.active {
  background: var(--surf-3);
  color: var(--ink-1);
  font-weight: 600;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset;
}
.nav-pill.active::before {
  content: ''; position: absolute; left: -14px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 18px; background: var(--acc); border-radius: 0 3px 3px 0;
}
:root[data-theme="dark"] .nav-pill.active { background: var(--surf-3); }
.nav-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .55; flex-shrink: 0; }
.nav-pill.active .dot { background: var(--acc); opacity: 1; }
.nav-pill .badge {
  margin-left: auto; font-family: var(--f-mono); font-size: 10px; font-weight: 600;
  padding: 1px 6px; background: var(--surf-3); color: var(--ink-3);
  border-radius: 4px; letter-spacing: 0.3px;
}

/* chapters 区段 (flex:1 占据剩余空间 + 内部独立滚动) */
.nav-chapters-section {
  flex: 1 1 auto;
  min-height: 0;
  display: flex; flex-direction: column; gap: 6px;
  overflow: hidden;
}
.nav-chapters-section .nav-section-title { flex-shrink: 0; }
.nav-chapters-scroll {
  flex: 1; min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  padding-right: 4px; margin-right: -4px;
}
.nav-chapters-scroll::-webkit-scrollbar { width: 4px; }
.nav-chapters-scroll::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 2px; }
/* 当 chapters section 存在时,外层 nav 不再滚动(让 chapters 自己滚) */
.nav:has(.nav-chapters-section) { overflow: hidden; }

/* chapter pills (sidebar version of subnav) */
.nav-pill-ch { padding: 7px 10px; gap: 9px; font-size: 12.5px; }
.nav-pill-ch .num-ch {
  font-family: var(--f-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.4px; color: var(--ink-5);
  background: var(--surf-2); border: 1px solid var(--line-1);
  padding: 2px 6px; border-radius: 5px;
  flex-shrink: 0; line-height: 1.4;
}
.nav-pill-ch:hover .num-ch { color: var(--acc); border-color: var(--acc-soft); }
.nav-pill-ch.active .num-ch { background: var(--acc); color: var(--acc-on); border-color: var(--acc); }
:root[data-theme="dark"] .nav-pill-ch.active .num-ch { background: var(--acc); color: var(--acc-on); }
.nav-chapters { gap: 1px; }

.nav-meta {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 10px;
  margin-top: auto;
  border-top: 1px solid var(--line-1);
  font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-4);
  letter-spacing: 0.4px;
}
.nav-meta .dot-live {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 0 4px var(--good-soft);
  animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }

.nav-icon-btn {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: var(--surf-1);
  color: var(--ink-3); cursor: pointer;
  transition: all 180ms;
}
.nav-icon-btn:hover { background: var(--surf-2); color: var(--ink-1); border-color: var(--line-3); transform: translateY(-1px); }
.nav-icon-btn svg { width: 14px; height: 14px; }

/* theme toggle pill (sun/moon) */
.theme-toggle {
  display: inline-flex; align-items: center;
  background: var(--surf-1);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 3px;
  gap: 0;
}
.theme-toggle button {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 0; background: transparent;
  color: var(--ink-4); cursor: pointer;
  transition: all 180ms;
}
.theme-toggle button:hover { color: var(--ink-2); }
.theme-toggle button.on {
  background: var(--ink-1); color: var(--bg);
  box-shadow: 0 2px 8px -2px rgba(0,0,0,0.2);
}
:root[data-theme="dark"] .theme-toggle button.on { background: var(--acc); color: var(--acc-on); }
.theme-toggle button svg { width: 14px; height: 14px; }

.nav-actions { display: flex; align-items: center; gap: 8px; padding: 4px 10px; }

/* ── Sub nav (chapter tabs) — now sticks to top of main column ── */
.subnav {
  position: sticky; top: 0; z-index: 35;
  padding: 8px 28px;
  background: var(--subnav-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line-1);
  display: flex; gap: 4px; align-items: center;
  overflow-x: auto; scrollbar-width: none;
}
.subnav::-webkit-scrollbar { display: none; }
.subnav-item {
  flex-shrink: 0; padding: 6px 12px;
  border-radius: 7px;
  font-family: var(--f-mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.4px; color: var(--ink-4);
  cursor: pointer; user-select: none;
  transition: all 160ms;
  display: inline-flex; align-items: center; gap: 6px;
}
.subnav-item .num { color: var(--ink-5); font-weight: 600; }
.subnav-item:hover { background: var(--surf-2); color: var(--ink-1); }
.subnav-item:hover .num { color: var(--acc); }
.subnav-item.active { background: var(--ink-1); color: var(--bg); }
:root[data-theme="dark"] .subnav-item.active { background: var(--acc); color: var(--acc-on); }
.subnav-item.active .num { color: inherit; opacity: 0.7; }

/* ── Page ── */
.page { padding: 22px 28px 72px; max-width: none; margin: 0; }
.app.app-nav-collapsed .page { padding-left: 36px; padding-right: 36px; }

/* ════════════════════════════════════════════════════════════════
 * Editorial typography — single ink color, hierarchy via weight
 * ════════════════════════════════════════════════════════════════ */
.eyebrow {
  font-family: var(--f-mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--ink-4);
  display: inline-flex; align-items: center; gap: 8px;
}
.eyebrow .num {
  color: var(--acc); font-weight: 700;
}

.h-display {
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: clamp(38px, 4.6vw, 60px);
  line-height: 1.05; letter-spacing: -0.028em;
  color: var(--ink-1);
}
.h-display .accent { color: var(--acc); }
.h-display .light  { font-weight: 400; color: var(--ink-3); }

.h-section {
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.15; letter-spacing: -0.022em;
  color: var(--ink-1);
}
.h-section .accent { color: var(--acc); }
.h-section .light  { font-weight: 400; color: var(--ink-4); }

.num-hero {
  font-family: var(--f-mono);
  font-feature-settings: "tnum" 1, "ss01" 1;
  font-weight: 500;
  font-size: clamp(72px, 9.6vw, 144px);
  line-height: 0.88;
  letter-spacing: -0.05em;
  color: var(--ink-1);
}
.num-hero .unit { font-size: 0.30em; color: var(--ink-4); margin-left: 10px; font-weight: 400; }

.num-xl  { font-family: var(--f-mono); font-weight: 500; font-size: clamp(36px, 4vw, 56px); line-height: 0.95; letter-spacing: -0.03em; color: var(--ink-1); }
.num-lg  { font-family: var(--f-mono); font-weight: 500; font-size: 28px; line-height: 1; letter-spacing: -0.02em; color: var(--ink-1); }
.num-md  { font-family: var(--f-mono); font-weight: 500; font-size: 18px; }
.num-mono { font-family: var(--f-mono); font-feature-settings: "tnum" 1; }

/* ════════════════════════════════════════════════════════════════
 * Hero
 * ════════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  padding: 24px 0 22px;
  border-bottom: 1px solid var(--line-1);
  margin-bottom: 24px;
}
.hero-grid { display: grid; grid-template-columns: minmax(360px, 1fr) minmax(560px, 1.6fr); gap: 40px; align-items: end; }
@media (max-width: 1280px) { .hero-grid { grid-template-columns: 1fr; gap: 24px; } }
/* mini hero shown on non-overview chapters */
.hero-mini-bar {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 0 16px;
  border-bottom: 1px solid var(--line-1);
  margin-bottom: 22px;
}
.hero-mini-bar .branch {
  font-family: var(--f-sans); font-weight: 700;
  font-size: 22px; letter-spacing: -0.022em; color: var(--ink-1);
  display: inline-flex; align-items: center; gap: 10px;
}
.hero-mini-bar .branch .swatch {
  width: 4px; height: 22px; border-radius: 2px;
  background: var(--acc); box-shadow: 0 0 8px var(--acc);
}
.hero-mini-bar .accent { color: var(--acc); }
.hero-mini-bar .sep { width: 1px; height: 22px; background: var(--line-2); }
.hero-mini-bar .stat {
  display: inline-flex; flex-direction: column; gap: 2px;
}
.hero-mini-bar .stat .lbl { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-4); font-weight: 600; }
.hero-mini-bar .stat .v { font-family: var(--f-mono); font-size: 16px; font-weight: 600; color: var(--ink-1); letter-spacing: -0.015em; line-height: 1; }
.hero-mini-bar .pg-title {
  margin-left: auto;
  font-family: var(--f-sans); font-weight: 700;
  font-size: clamp(18px, 1.8vw, 24px);
  letter-spacing: -0.018em; color: var(--ink-1);
}
.hero-mini-bar .pg-title .num {
  font-family: var(--f-mono); font-size: 0.55em;
  color: var(--acc); margin-right: 8px; letter-spacing: 1px;
  font-weight: 700;
}
@media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; gap: 32px; } }
.hero-left { display: flex; flex-direction: column; gap: 14px; }
.hero-meta {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--f-mono); font-size: 11px;
  color: var(--ink-4); letter-spacing: 1.2px; text-transform: uppercase;
}
.hero-meta .sep { color: var(--ink-5); }
.hero-meta .branch-mark {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px; border-radius: 6px;
  background: var(--ink-1); color: var(--bg);
  font-weight: 600;
}
:root[data-theme="dark"] .hero-meta .branch-mark { background: var(--acc); color: var(--acc-on); }
.hero-meta .branch-mark .swatch { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: 0.7; }

.hero-progress {
  display: flex; align-items: center; gap: 18px; padding-top: 10px;
}
.hero-progress-bar {
  flex: 1; height: 4px;
  background: var(--ink-6); border-radius: 2px; overflow: hidden;
  position: relative;
}
.hero-progress-bar::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--w, 0%);
  background: var(--acc);
  border-radius: 2px;
  transition: width 1.6s cubic-bezier(.4,0,.2,1);
}
.hero-progress-pct {
  font-family: var(--f-mono); font-size: 13px;
  color: var(--ink-3); letter-spacing: 0.3px;
}
.hero-progress-pct b { color: var(--acc); font-weight: 700; }

/* hero side mini-KPIs — 4-col grid for 8 metrics */
.hero-side {
  display: grid; gap: 14px 22px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line-2);
  padding-top: 14px;
}
@media (max-width: 1480px) { .hero-side { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .hero-side { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hero-mini {
  display: flex; flex-direction: column; gap: 4px;
  padding: 4px 0;
  min-width: 0;
}
.hero-mini .lbl { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-mini .val { font-family: var(--f-mono); font-size: 22px; font-weight: 500; letter-spacing: -0.02em; color: var(--ink-1); line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-mini .sub { font-size: 10.5px; color: var(--ink-4); display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* delta pill */
.delta-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--f-mono); font-size: 11px; font-weight: 600;
  padding: 3px 8px; border-radius: 5px; letter-spacing: 0.2px;
}
.delta-pill.up   { background: var(--good-soft); color: var(--good); }
.delta-pill.down { background: var(--bad-soft);  color: var(--bad); }
.delta-pill.flat { background: var(--surf-2);    color: var(--ink-4); }

/* ════════════════════════════════════════════════════════════════
 * Section header
 * ════════════════════════════════════════════════════════════════ */
.sec { margin-top: 36px; scroll-margin-top: 130px; }
.sec:first-child { margin-top: 0; }
.sec-head {
  display: flex; align-items: flex-end; gap: 18px;
  margin-bottom: 18px; padding-bottom: 12px;
  border-bottom: 1px solid var(--line-1);
}
.sec-head-title { display: flex; flex-direction: column; gap: 4px; }
.sec-head-spacer { flex: 1; }
.sec-head-action {
  font-family: var(--f-mono); font-size: 11px;
  color: var(--ink-4); letter-spacing: 0.6px;
}
.sec-head-action b { color: var(--ink-1); font-weight: 600; }

/* ════════════════════════════════════════════════════════════════
 * Bento grid
 * ════════════════════════════════════════════════════════════════ */
.bento {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: 14px;
  grid-auto-rows: minmax(110px, auto);
}
.b-2{grid-column:span 2;} .b-3{grid-column:span 3;} .b-4{grid-column:span 4;}
.b-5{grid-column:span 5;} .b-6{grid-column:span 6;} .b-7{grid-column:span 7;}
.b-8{grid-column:span 8;} .b-9{grid-column:span 9;} .b-12{grid-column:span 12;}
.row-2 { grid-row: span 2; }
@media (max-width: 1280px) {
  .b-3, .b-4 { grid-column: span 6; }
  .b-2 { grid-column: span 4; }
  .b-5, .b-7, .b-8, .b-9 { grid-column: span 12; }
}
@media (max-width: 720px) {
  .b-2, .b-3, .b-4, .b-5, .b-6, .b-7, .b-8, .b-9 { grid-column: span 12; }
}

/* ════════════════════════════════════════════════════════════════
 * Tile (glass)
 * ════════════════════════════════════════════════════════════════ */
.tile {
  position: relative;
  background: var(--surf-1);
  backdrop-filter: blur(var(--blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(160%);
  border: 1px solid var(--line-1);
  border-radius: var(--r-md);
  padding: 18px;
  box-shadow: var(--sh-2);
  overflow: hidden;
  transition: all 280ms cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column;
  min-height: 100%;
}
.tile::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--surf-line), transparent);
  pointer-events: none;
}
.tile:hover {
  background: var(--surf-2);
  border-color: var(--line-2);
  transform: translateY(-2px);
  box-shadow: var(--sh-3);
}
.tile-hero { background: var(--surf-2); border-color: var(--line-2); }
.tile-glow {
  background: linear-gradient(135deg, var(--surf-2), var(--acc-soft));
  border-color: var(--acc-line);
  box-shadow: var(--sh-glow);
}

.tile-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.tile-title {
  font-family: var(--f-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-3);
}
.tile-meta { margin-left: auto; font-family: var(--f-mono); font-size: 10px; color: var(--ink-4); letter-spacing: 0.4px; }

/* tile-head period toggle (本月 / vs 上月) */
.tile-toggle {
  margin-left: auto;
  display: inline-flex;
  background: var(--surf-2);
  border: 1px solid var(--line-2);
  border-radius: 7px;
  padding: 2px;
  gap: 0;
}
.tile-toggle .tt-btn {
  padding: 3px 9px;
  border-radius: 5px;
  background: transparent;
  border: 0;
  font-family: var(--f-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--ink-4);
  cursor: pointer;
  transition: all 140ms;
}
.tile-toggle .tt-btn:hover { color: var(--ink-1); }
.tile-toggle .tt-btn.active {
  background: var(--ink-1);
  color: var(--bg);
}
:root[data-theme="dark"] .tile-toggle .tt-btn.active { background: var(--acc); color: var(--acc-on); }
.tile-head .tile-meta + .tile-toggle { margin-left: 8px; }
.tile-foot {
  margin-top: auto; padding-top: 14px;
  border-top: 1px dashed var(--line-1);
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; color: var(--ink-4);
}

/* ════════════════════════════════════════════════════════════════
 * KPI tile
 * ════════════════════════════════════════════════════════════════ */
.kpi-tile {
  position: relative;
  background: var(--surf-1);
  backdrop-filter: blur(var(--blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(160%);
  border: 1px solid var(--line-1);
  border-radius: var(--r-md);
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 6px;
  overflow: hidden;
  box-shadow: var(--sh-1);
  transition: all 280ms cubic-bezier(.4,0,.2,1);
  min-height: 100%;
}
.kpi-tile::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--top-c, var(--acc));
  opacity: 1;
}
.kpi-tile:hover { transform: translateY(-2px); box-shadow: var(--sh-3); background: var(--surf-2); }
.kpi-tile .lbl {
  font-family: var(--f-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-4);
}
.kpi-tile .val {
  font-family: var(--f-mono); font-feature-settings: "tnum" 1;
  font-weight: 500; font-size: 36px; line-height: 1;
  letter-spacing: -0.028em; color: var(--ink-1);
  margin-top: 2px;
}
.kpi-tile .val .unit { font-size: 0.42em; color: var(--ink-4); margin-left: 4px; }
.kpi-tile .sub {
  font-size: 12px; color: var(--ink-4);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.kpi-tile .spark { height: 36px; margin-top: auto; opacity: 0.92; }

/* ════════════════════════════════════════════════════════════════
 * SVG Ring
 * ════════════════════════════════════════════════════════════════ */
.ring-wrap {
  position: relative;
  display: grid; place-items: center;
  width: 100%; aspect-ratio: 1;
  max-width: 200px;
  margin: 0 auto;
}
.ring-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-track { stroke: var(--ink-6); }
:root[data-theme="dark"] .ring-track { stroke: rgba(255,255,255,0.08); }
.ring-fill { transition: stroke-dashoffset 1.8s cubic-bezier(.16,1,.3,1), stroke-width 220ms; }
.ring-wrap:hover .ring-fill { stroke-width: 14; }
.ring-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}
.ring-center .v {
  font-family: var(--f-mono); font-feature-settings: "tnum" 1;
  font-weight: 500; font-size: 38px; line-height: 1;
  letter-spacing: -0.03em; color: var(--ink-1);
}
.ring-center .v .pct { font-size: 0.5em; color: var(--ink-4); margin-left: 2px; }
.ring-center .lbl {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--ink-4); margin-top: 6px; font-weight: 500;
}

/* ════════════════════════════════════════════════════════════════
 * Branch hero card
 * Note: NO per-branch color saturation — single accent, ranks differ via №.
 * ════════════════════════════════════════════════════════════════ */
.branch-card {
  position: relative;
  padding: 22px;
  background: var(--surf-1);
  backdrop-filter: blur(var(--blur)) saturate(160%);
  border: 1px solid var(--line-1);
  border-radius: var(--r-md);
  cursor: pointer;
  display: flex; flex-direction: column; gap: 12px;
  overflow: hidden;
  transition: all 320ms cubic-bezier(.16,1,.3,1);
  box-shadow: var(--sh-1);
  text-decoration: none; color: inherit;
}
.branch-card::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--ink-1); opacity: 0.18;
}
:root[data-theme="dark"] .branch-card::after { background: var(--ink-2); opacity: 0.30; }
.branch-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-3), var(--sh-pop);
  border-color: var(--line-2);
  background: var(--surf-2);
}
.branch-card:hover::after { background: var(--acc); opacity: 1; height: 3px; }

.branch-card .rank {
  position: absolute; top: 18px; right: 20px;
  font-family: var(--f-mono);
  font-size: 11px; font-weight: 600;
  color: var(--ink-5); letter-spacing: 0.6px;
}
.branch-card .lead {
  font-family: var(--f-mono); font-size: 10px;
  color: var(--ink-4); letter-spacing: 1px;
  text-transform: uppercase;
}
.branch-card .name {
  font-family: var(--f-sans);
  font-weight: 700; font-size: 26px; line-height: 1;
  letter-spacing: -0.028em; color: var(--ink-1);
}
.branch-card .num {
  font-family: var(--f-mono); font-feature-settings: "tnum" 1;
  font-weight: 500; font-size: 30px; line-height: 1;
  letter-spacing: -0.025em; color: var(--ink-1);
}
.branch-card .num .unit { font-size: 0.42em; color: var(--ink-4); margin-left: 2px; }
.branch-card .meta {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--f-mono); font-size: 11px; color: var(--ink-3);
  margin-top: auto;
}
.branch-card .pct-big { font-weight: 700; color: var(--acc); }
.branch-card .progress {
  height: 3px; background: var(--ink-6); border-radius: 2px; position: relative; overflow: hidden;
}
.branch-card .progress::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--w, 0%);
  background: var(--acc);
  border-radius: 2px;
  animation: progress-fill 1.6s cubic-bezier(.16,1,.3,1) both;
}
@keyframes progress-fill { from { width: 0; } }

/* ── Rank mini list (compact horizontal bars with rank/name/bar/pct/yoy) ── */
.rank-mini { display: flex; flex-direction: column; gap: 0; padding-top: 4px; }
.rank-mini-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) minmax(70px, 1.2fr) 50px 60px;
  gap: 10px; align-items: center;
  font-family: var(--f-mono); font-size: 12px;
  padding: 7px 0;
  border-bottom: 1px dashed var(--line-1);
}
.rank-mini-row:last-child { border-bottom: 0; }
.rk-no { color: var(--ink-5); font-weight: 600; letter-spacing: 0.4px; }
.rk-name {
  color: var(--ink-1); font-family: var(--f-sans); font-weight: 500;
  font-size: 13px; text-decoration: none; letter-spacing: -0.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rk-name:hover { color: var(--acc); }
.rk-bar {
  height: 6px; background: var(--ink-6); border-radius: 3px;
  position: relative; overflow: hidden;
}
.rk-bar-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  border-radius: 3px;
  transition: width 1.2s cubic-bezier(.16,1,.3,1);
}
.rk-good { background: var(--good); }
.rk-acc  { background: var(--acc); }
.rk-warn { background: var(--warn); }
.rk-bad  { background: var(--bad); }
.rk-pct { color: var(--ink-1); text-align: right; font-feature-settings: "tnum" 1; }
.rk-yoy { text-align: right; font-size: 11px; }
.t-link { color: inherit; text-decoration: none; }
.t-link:hover { color: var(--acc); }

/* ── Filter bar (chips) ── */
.filter-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 10px 0 14px; border-bottom: 1px dashed var(--line-1);
  margin-bottom: 10px;
}
.fb-label {
  font-family: var(--f-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-4);
  margin-right: 4px;
}
.fb-divider { width: 1px; height: 18px; background: var(--line-2); margin: 0 6px; }
.fb-chip {
  padding: 5px 11px; border-radius: 6px;
  border: 1px solid var(--line-2);
  background: var(--surf-1);
  font-family: var(--f-mono); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.3px; color: var(--ink-3);
  cursor: pointer;
  transition: all 160ms;
}
.fb-chip:hover { background: var(--surf-2); color: var(--ink-1); border-color: var(--line-3); }
.fb-chip.active {
  background: var(--ink-1); color: var(--bg);
  border-color: var(--ink-1);
}
:root[data-theme="dark"] .fb-chip.active { background: var(--acc); color: var(--acc-on); border-color: var(--acc); }

/* ── Team hierarchy (sec2_team) ── */
.team-tree { display: flex; flex-direction: column; gap: 16px; padding-top: 6px; }
.team-block {
  border: 1px solid var(--line-1); border-radius: 12px;
  overflow: hidden; background: var(--surf-1);
}
.team-block-head {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) minmax(180px, 2fr) minmax(160px, 1fr) auto;
  gap: 18px; align-items: center;
  padding: 16px 20px;
  background: var(--surf-2);
  border-bottom: 1px solid var(--line-1);
  text-decoration: none; color: inherit;
  cursor: pointer; transition: background 160ms;
}
.team-block-head:hover { background: var(--surf-3); }
.tbh-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.tbh-rank {
  font-family: var(--f-mono); font-size: 14px; font-weight: 700;
  color: var(--acc); letter-spacing: 0.6px;
  width: 36px;
}
.tbh-meta { min-width: 0; }
.tbh-name { font-family: var(--f-sans); font-size: 16px; font-weight: 700; color: var(--ink-1); letter-spacing: -0.012em; }
.tbh-sub { font-family: var(--f-mono); font-size: 11px; color: var(--ink-4); margin-top: 2px; letter-spacing: 0.4px; }
.tbh-mid { padding: 0 8px; }
.tbh-bar { height: 6px; background: var(--ink-6); border-radius: 3px; position: relative; overflow: hidden; }
.tbh-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; transition: width 1s; }
.tbh-right { text-align: right; min-width: 0; }
.tbh-pct { font-family: var(--f-mono); font-size: 22px; font-weight: 600; line-height: 1; letter-spacing: -0.02em; }
.tbh-rev { font-family: var(--f-mono); font-size: 11px; color: var(--ink-4); margin-top: 4px; }
.tbh-arrow {
  font-family: var(--f-mono); font-size: 11px; font-weight: 600; color: var(--acc);
  letter-spacing: 0.4px; padding: 6px 10px; border: 1px solid var(--acc-soft);
  border-radius: 6px; white-space: nowrap;
}
.team-members { padding: 4px 8px; }
.tm-row {
  display: grid;
  grid-template-columns: 36px 32px minmax(180px, 1fr) minmax(140px, 1.2fr) auto auto;
  gap: 14px; align-items: center;
  padding: 10px 12px;
  border-bottom: 1px dashed var(--line-1);
  text-decoration: none; color: inherit;
  cursor: pointer; transition: background 140ms;
}
.tm-row:last-child { border-bottom: 0; }
.tm-row:hover { background: var(--surf-2); }
.tm-no { font-family: var(--f-mono); font-size: 10px; font-weight: 600; color: var(--ink-5); letter-spacing: 0.4px; }
.tm-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--surf-3); color: var(--ink-1);
  display: grid; place-items: center;
  font-family: var(--f-sans); font-size: 12px; font-weight: 700;
}
.tm-info { min-width: 0; }
.tm-name { font-family: var(--f-sans); font-size: 13.5px; font-weight: 600; color: var(--ink-1); letter-spacing: -0.005em; }
.tm-sub { font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-4); margin-top: 2px; letter-spacing: 0.4px; }
.tm-bar { height: 5px; background: var(--ink-6); border-radius: 3px; position: relative; overflow: hidden; }
.tm-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; transition: width 1s; }
.tm-stat { text-align: right; min-width: 90px; }
.tm-rev { font-family: var(--f-mono); font-size: 13px; font-weight: 600; color: var(--ink-1); }
.tm-pct { font-family: var(--f-mono); font-size: 11px; font-weight: 700; margin-top: 2px; }
.tm-arrow { font-family: var(--f-mono); font-size: 12px; color: var(--ink-5); padding-left: 4px; }
.rep-link { display: block; text-decoration: none; color: inherit; }
.rep-link:hover { background: var(--surf-2); border-radius: 8px; }

/* ── CRUD form (L2 客户管理) ── */
.btn-acc {
  padding: 7px 14px; border-radius: 7px;
  background: var(--acc); color: var(--acc-on);
  border: 0; cursor: pointer;
  font-family: var(--f-sans); font-weight: 600; font-size: 13px;
  transition: all 160ms;
}
.btn-acc:hover { transform: translateY(-1px); box-shadow: 0 4px 12px -2px rgba(0,0,0,0.25); }
.btn-mute {
  padding: 7px 14px; border-radius: 7px;
  background: var(--surf-2); color: var(--ink-2);
  border: 1px solid var(--line-2); cursor: pointer;
  font-family: var(--f-sans); font-weight: 600; font-size: 13px;
  transition: all 160ms;
}
.btn-mute:hover { background: var(--surf-3); }
.btn-mini {
  padding: 4px 9px; border-radius: 5px;
  background: var(--surf-2); border: 1px solid var(--line-2);
  font-family: var(--f-mono); font-size: 10.5px; font-weight: 600;
  color: var(--ink-2); cursor: pointer; letter-spacing: 0.4px;
  transition: all 140ms;
}
.btn-mini:hover { background: var(--ink-1); color: var(--bg); border-color: var(--ink-1); }
.btn-mini-bad { color: var(--bad); }
.btn-mini-bad:hover { background: var(--bad); color: white; border-color: var(--bad); }
.cust-form { padding: 12px 4px 4px; display: flex; flex-direction: column; gap: 14px; }
.cf-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1100px) { .cf-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cf-field { display: flex; flex-direction: column; gap: 5px; }
.cf-field > span {
  font-family: var(--f-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-4);
}
.cf-field input, .cf-field select {
  padding: 8px 11px; border-radius: 7px;
  border: 1px solid var(--line-2);
  background: var(--surf-1);
  color: var(--ink-1);
  font-family: var(--f-sans); font-size: 13px;
  transition: border 140ms;
}
.cf-field input:focus, .cf-field select:focus {
  outline: none; border-color: var(--acc);
  box-shadow: 0 0 0 3px var(--acc-soft);
}
.cf-actions { display: flex; gap: 10px; justify-content: flex-end; padding-top: 4px; }

/* ── L2 member detail cards ── */
.mem-card { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; }
.mem-head {
  display: flex; align-items: center; gap: 12px;
}
.mem-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--surf-3); color: var(--ink-1);
  display: grid; place-items: center;
  font-family: var(--f-sans); font-size: 14px; font-weight: 700;
  flex-shrink: 0;
}
.mem-meta { flex: 1; min-width: 0; }
.mem-name { font-family: var(--f-sans); font-size: 15px; font-weight: 700; color: var(--ink-1); letter-spacing: -0.01em; }
.mem-sub { font-family: var(--f-mono); font-size: 11px; color: var(--ink-4); margin-top: 2px; letter-spacing: 0.4px; }
.mem-edit-btn { flex-shrink: 0; }
.mem-kpi-row {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px; padding: 8px 0;
  border-top: 1px solid var(--line-1);
  border-bottom: 1px solid var(--line-1);
}
.mk-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mk-lbl {
  font-family: var(--f-mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: 1.1px; text-transform: uppercase; color: var(--ink-4);
}
.mk-val {
  font-family: var(--f-mono); font-size: 16px; font-weight: 600;
  color: var(--ink-1); letter-spacing: -0.015em; line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mk-mute { color: var(--ink-3); font-weight: 500; }
.mem-progress {
  height: 5px; background: var(--ink-6); border-radius: 3px;
  position: relative; overflow: hidden;
}
.mem-progress-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  border-radius: 3px;
  transition: width 1.2s cubic-bezier(.16,1,.3,1);
}
.mem-spark { height: 44px; opacity: 0.85; }
.mem-edit-form {
  border-top: 1px solid var(--line-1); padding-top: 14px;
  display: flex; flex-direction: column; gap: 12px;
}

/* ── Launch products (产品上下架) ── */
.launch-stat { padding: 16px 18px; gap: 6px; }
.launch-stat .ls-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ls-lbl {
  font-family: var(--f-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-4);
}
.ls-num {
  font-family: var(--f-mono); font-size: 36px; font-weight: 600;
  line-height: 1; letter-spacing: -0.025em;
  margin-top: 4px;
}
.ls-num .ls-unit { font-size: 0.36em; color: var(--ink-4); margin-left: 4px; font-weight: 500; letter-spacing: 0.5px; }
.ls-sub { font-family: var(--f-mono); font-size: 11px; color: var(--ink-4); letter-spacing: 0.4px; margin-top: 4px; }
.ls-sub b { color: var(--ink-1); font-weight: 600; }
.launch-stat-good { border-top: 2px solid var(--good); }
.launch-stat-bad { border-top: 2px solid var(--bad); }
.launch-stat-warn { border-top: 2px solid var(--warn); }
.launch-stat-acc { border-top: 2px solid var(--acc); }

.launch-grid { grid-auto-rows: auto; }
.launch-col { padding: 18px; }
.launch-col .tile-head { margin-bottom: 14px; }
.ls-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.ls-dot.rk-good { background: var(--good); }
.ls-dot.rk-bad { background: var(--bad); }
.ls-dot.rk-warn { background: var(--warn); }
.ls-dot.rk-acc { background: var(--acc); }
.lc-list { display: flex; flex-direction: column; gap: 10px; }

.launch-card {
  border: 1px solid var(--line-1); border-radius: 10px;
  padding: 12px 14px; background: var(--surf-1);
  transition: all 180ms;
}
.launch-card:hover { border-color: var(--line-2); background: var(--surf-2); }
.launch-card-good { border-left: 3px solid var(--good); }
.launch-card-bad { border-left: 3px solid var(--bad); }
.launch-card-warn { border-left: 3px solid var(--warn); }
.launch-card-acc { border-left: 3px solid var(--acc); }

.lc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.lc-name { font-family: var(--f-sans); font-size: 13px; font-weight: 700; color: var(--ink-1); letter-spacing: -0.005em; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-meta {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-4);
  letter-spacing: 0.3px;
}
.lc-sep { opacity: 0.4; }
.lc-channel { color: var(--ink-3); font-weight: 600; }
.lc-note {
  font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-3);
  letter-spacing: 0.3px;
  background: var(--surf-2); padding: 4px 8px; border-radius: 5px;
  margin-top: 6px; display: inline-block;
}
.lc-bar { height: 4px; background: var(--ink-6); border-radius: 2px; position: relative; overflow: hidden; margin: 8px 0 4px; }
.lc-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; transition: width 1.2s cubic-bezier(.16,1,.3,1); }
.lc-foot {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--f-mono); font-size: 10.5px;
}
.lc-budget { color: var(--ink-3); }
.lc-pct { font-weight: 700; }

/* ── Pagination bar ── */
.paginated-table { display: flex; flex-direction: column; gap: 8px; }
.pg-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 6px 4px;
  border-top: 1px solid var(--line-1);
  margin-top: 4px;
}
.pg-info {
  font-family: var(--f-mono); font-size: 11px; color: var(--ink-4);
  letter-spacing: 0.4px;
}
.pg-info b { color: var(--ink-1); font-weight: 700; }
.pg-spacer { flex: 1; }
.pg-cur {
  font-family: var(--f-mono); font-size: 11.5px; color: var(--ink-3);
  letter-spacing: 0.4px; padding: 0 6px;
}
.pg-cur b { color: var(--acc); font-weight: 700; font-size: 13px; }
.pg-btn {
  padding: 5px 10px; border-radius: 6px;
  background: var(--surf-1);
  border: 1px solid var(--line-2);
  font-family: var(--f-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.3px; color: var(--ink-2);
  cursor: pointer; transition: all 140ms;
}
.pg-btn:hover:not(:disabled) {
  background: var(--ink-1); color: var(--bg); border-color: var(--ink-1);
}
.pg-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* ════════════════════════════════════════════════════════════════
 * Heat matrix — neutral-first palette
 * ════════════════════════════════════════════════════════════════ */
.matrix { display: grid; gap: 6px; font-family: var(--f-mono); }
.matrix .row {
  display: grid; grid-template-columns: 110px repeat(5, 1fr); gap: 6px;
  align-items: center;
}
.matrix .h-row .cell {
  font-size: 10px; font-weight: 600;
  color: var(--ink-4); letter-spacing: 0.8px;
  text-transform: uppercase; padding: 6px 0;
  text-align: center; background: transparent;
}
.matrix .row-label {
  font-family: var(--f-sans);
  font-weight: 600; font-size: 14px;
  color: var(--ink-1); letter-spacing: -0.005em;
}
.matrix .cell {
  position: relative;
  height: 42px; border-radius: 8px;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 600;
  background: var(--surf-1);
  color: var(--ink-3);
  cursor: default;
  transition: all 250ms cubic-bezier(.16,1,.3,1);
  overflow: hidden;
  border: 1px solid var(--line-1);
}
.matrix .cell:hover { transform: scale(1.05); z-index: 5; box-shadow: var(--sh-2); }
.matrix .cell .v { position: relative; z-index: 1; }

/* heat tones — light theme: subtle pastel; dark theme: subtle bright */
.h-100 { background: var(--good-soft); color: var(--good); border-color: transparent; }
.h-90  { background: var(--good-soft); color: var(--good); opacity: 0.78; border-color: transparent; }
.h-80  { background: var(--surf-2); color: var(--ink-1); }
.h-70  { background: var(--warn-soft); color: var(--warn); opacity: 0.82; border-color: transparent; }
.h-60  { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.h-low { background: var(--bad-soft);  color: var(--bad);  border-color: transparent; }

/* ════════════════════════════════════════════════════════════════
 * People list
 * ════════════════════════════════════════════════════════════════ */
.rep-list { display: flex; flex-direction: column; }
.rep {
  display: grid; grid-template-columns: 32px 1fr auto;
  align-items: center; gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-1);
  position: relative;
  transition: all 200ms;
}
.rep:last-child { border-bottom: 0; }
.rep:hover { padding-left: 6px; }
.rep .rank {
  font-family: var(--f-mono);
  font-weight: 500; font-size: 13px; color: var(--ink-5); letter-spacing: 0.5px;
}
.rep .info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rep .nm {
  font-size: 14px; font-weight: 600; color: var(--ink-1);
  display: flex; align-items: center; gap: 8px;
}
.rep .nm .badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 5px;
  font-family: var(--f-mono); font-size: 10px;
  background: var(--good-soft); color: var(--good);
}
.rep .nm .badge.warn { background: var(--warn-soft); color: var(--warn); }
.rep .nm .badge.bad  { background: var(--bad-soft);  color: var(--bad); }
.rep .progress-mini {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--f-mono); font-size: 10px; color: var(--ink-4);
}
.rep .progress-mini .bar {
  width: 110px; height: 3px; background: var(--ink-6); border-radius: 2px;
  position: relative; overflow: hidden;
}
.rep .progress-mini .bar::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--w, 0%);
  background: var(--c, var(--acc)); border-radius: 2px;
  animation: progress-fill 1.4s cubic-bezier(.16,1,.3,1) both;
}
.rep .stat { text-align: right; font-family: var(--f-mono); font-feature-settings: "tnum" 1; }
.rep .stat .v { font-size: 17px; font-weight: 500; color: var(--ink-1); letter-spacing: -0.01em; }
.rep .stat .pct { font-size: 11px; margin-top: 2px; font-weight: 500; color: var(--ink-4); }
.rep .stat .pct.good { color: var(--good); }
.rep .stat .pct.warn { color: var(--warn); }
.rep .stat .pct.bad  { color: var(--bad); }

/* ════════════════════════════════════════════════════════════════
 * Channel pills (CPT/CPA/CPS, etc) — single accent
 * ════════════════════════════════════════════════════════════════ */
.chan {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: var(--surf-1);
  border: 1px solid var(--line-1);
  border-radius: var(--r-sm);
  transition: all 220ms;
}
.chan:hover { background: var(--surf-2); border-color: var(--line-2); transform: translateX(3px); box-shadow: var(--sh-1); }
.chan-icon {
  width: 36px; height: 36px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--surf-2);
  color: var(--ink-1);
  font-size: 12px; font-weight: 700;
  font-family: var(--f-mono);
  border: 1px solid var(--line-2);
}
.chan.featured .chan-icon { background: var(--acc); color: var(--acc-on); border-color: transparent; }
.chan.chan-tinted .chan-icon {
  background: var(--ch-soft, var(--surf-2));
  color: var(--ch, var(--ink-1));
  border-color: transparent;
}
.chan.chan-tinted .chan-stat .v { color: var(--ch, var(--ink-1)); }
.chan-info { flex: 1; min-width: 0; }
.chan-info .nm { font-size: 13px; font-weight: 600; color: var(--ink-1); }
.chan-info .sub { font-family: var(--f-mono); font-size: 10px; color: var(--ink-4); margin-top: 2px; }
.chan-stat { text-align: right; font-family: var(--f-mono); }
.chan-stat .v { font-size: 18px; font-weight: 500; color: var(--ink-1); letter-spacing: -0.01em; }
.chan.featured .chan-stat .v { color: var(--acc); }

/* vertical row — single accent + neutral bar */
.vrow {
  display: grid; grid-template-columns: 24px 1fr 90px 80px 70px;
  gap: 16px; align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-1);
  font-family: var(--f-mono);
  transition: all 180ms;
}
.vrow:last-child { border-bottom: 0; }
.vrow:hover { padding-left: 6px; background: var(--surf-1); }
.vrow .rk {
  font-family: var(--f-mono);
  font-weight: 600; font-size: 13px; color: var(--ink-5); letter-spacing: 0.6px;
}
.vrow .nm {
  font-family: var(--f-sans); font-weight: 600;
  font-size: 15px; color: var(--ink-1); letter-spacing: -0.005em;
  display: flex; align-items: center; gap: 12px;
}
.vrow .nm::before {
  content: ''; display: inline-block; width: 3px; height: 16px;
  background: var(--c, var(--ink-3)); border-radius: 1px;
}
.vrow .v { font-size: 14px; font-weight: 600; color: var(--ink-1); text-align: right; }
.vrow .share { font-size: 11px; color: var(--ink-4); text-align: right; }
.vrow .pct { font-size: 11px; text-align: right; }

/* ════════════════════════════════════════════════════════════════
 * Tier card
 * ════════════════════════════════════════════════════════════════ */
.tier-card {
  position: relative;
  padding: 26px 24px;
  background: var(--surf-1);
  backdrop-filter: blur(var(--blur)) saturate(160%);
  border: 1px solid var(--line-1);
  border-radius: var(--r-md);
  display: flex; flex-direction: column; gap: 16px;
  overflow: hidden;
  box-shadow: var(--sh-1);
  transition: all 280ms cubic-bezier(.16,1,.3,1);
}
.tier-card:hover { transform: translateY(-3px); box-shadow: var(--sh-3); }
.tier-card.t-good { border-top: 2px solid var(--good); }
.tier-card.t-warn { border-top: 2px solid var(--warn); }
.tier-card.t-bad  { border-top: 2px solid var(--bad); }

.tier-card .head { display: flex; justify-content: space-between; align-items: baseline; }
.tier-card .head .lbl {
  font-family: var(--f-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-3);
}
.tier-card .head .badge {
  font-family: var(--f-mono); font-size: 11px; font-weight: 600;
  padding: 3px 10px; border-radius: 5px;
  background: var(--surf-2); color: var(--ink-3);
}
.tier-card .num {
  font-family: var(--f-mono); font-feature-settings: "tnum" 1;
  font-weight: 500; font-size: 76px; line-height: 0.88;
  letter-spacing: -0.045em; color: var(--ink-1);
}
.tier-card .num .unit { font-size: 0.30em; color: var(--ink-4); margin-left: 6px; font-weight: 400; }
.tier-card.t-good .num { color: var(--good); }
.tier-card.t-warn .num { color: var(--warn); }
.tier-card.t-bad  .num { color: var(--bad); }
.tier-card .reps { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.tier-card .reps .rep-tiny {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12.5px; color: var(--ink-3);
  padding: 4px 0; border-bottom: 1px dashed var(--line-1);
}
.tier-card .reps .rep-tiny:last-child { border-bottom: 0; }
.tier-card .reps .rep-tiny .v { font-family: var(--f-mono); font-weight: 600; font-size: 12px; color: var(--ink-1); }

/* ════════════════════════════════════════════════════════════════
 * Compact list
 * ════════════════════════════════════════════════════════════════ */
.list { display: flex; flex-direction: column; }
.list-row {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 14px; align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid var(--line-1);
  font-size: 13px;
  transition: all 180ms;
}
.list-row:last-child { border-bottom: 0; }
.list-row:hover { padding-left: 4px; background: var(--surf-1); }
.list-row .marker { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-4); }
.list-row .marker.acc  { background: var(--acc); }
.list-row .marker.warn { background: var(--warn); }
.list-row .marker.bad  { background: var(--bad); }
.list-row .marker.good { background: var(--good); }
.list-row .text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.list-row .text .nm  { font-weight: 600; color: var(--ink-1); }
.list-row .text .sub { font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-4); letter-spacing: 0.4px; }
.list-row .meta {
  font-family: var(--f-mono); font-size: 11px; color: var(--ink-3); text-align: right;
}
.list-row .meta b { color: var(--ink-1); font-weight: 600; }

/* ════════════════════════════════════════════════════════════════
 * Tags
 * ════════════════════════════════════════════════════════════════ */
.tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px;
  font-family: var(--f-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.4px;
  border-radius: 5px;
  background: var(--surf-2); color: var(--ink-3);
}
.tag-good { background: var(--good-soft); color: var(--good); }
.tag-warn { background: var(--warn-soft); color: var(--warn); }
.tag-bad  { background: var(--bad-soft);  color: var(--bad); }
.tag-info { background: var(--info-soft); color: var(--info); }
.tag-acc  { background: var(--acc-soft);  color: var(--acc); }

/* ════════════════════════════════════════════════════════════════
 * Funnel — single accent ladder
 * ════════════════════════════════════════════════════════════════ */
.funnel-edit { display: flex; flex-direction: column; gap: 6px; padding: 4px 0; }
.funnel-edit .stage {
  display: grid; grid-template-columns: 70px 1fr 80px;
  align-items: center; gap: 14px; padding: 10px 0;
  border-bottom: 1px solid var(--line-1);
}
.funnel-edit .stage:last-child { border-bottom: 0; }
.funnel-edit .stage .label {
  font-family: var(--f-sans); font-weight: 600;
  font-size: 14px; color: var(--ink-1); letter-spacing: -0.005em;
}
.funnel-edit .stage .bar-wrap { position: relative; }
.funnel-edit .stage .bar-fill {
  height: 26px; border-radius: 6px;
  background: var(--acc);
  display: flex; align-items: center; padding: 0 12px;
  font-family: var(--f-mono); font-size: 12px; font-weight: 600;
  color: var(--acc-on);
  animation: progress-fill 1.4s cubic-bezier(.16,1,.3,1) both;
}
.funnel-edit .stage:nth-child(2) .bar-fill { opacity: 0.82; }
.funnel-edit .stage:nth-child(3) .bar-fill { opacity: 0.64; }
.funnel-edit .stage:nth-child(4) .bar-fill { opacity: 0.46; color: var(--ink-1); }
.funnel-edit .stage:nth-child(5) .bar-fill { opacity: 0.28; color: var(--ink-1); }
.funnel-edit .stage .pct {
  text-align: right;
  font-family: var(--f-mono); font-size: 13px;
  font-weight: 700; color: var(--acc);
}

/* ════════════════════════════════════════════════════════════════
 * Stat cell
 * ════════════════════════════════════════════════════════════════ */
.stat-cell {
  padding: 18px 18px;
  background: var(--surf-1);
  backdrop-filter: blur(var(--blur)) saturate(160%);
  border: 1px solid var(--line-1);
  border-radius: var(--r-sm);
  display: flex; flex-direction: column; gap: 8px;
  box-shadow: var(--sh-1);
  transition: all 220ms;
}
.stat-cell:hover { background: var(--surf-2); transform: translateY(-1px); }
.stat-cell .lbl { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--ink-4); font-weight: 600; }
.stat-cell .v {
  font-family: var(--f-mono); font-feature-settings: "tnum" 1;
  font-weight: 500; font-size: 30px; line-height: 1;
  color: var(--ink-1); letter-spacing: -0.025em;
}
.stat-cell .v.acc  { color: var(--acc); }
.stat-cell .v.good { color: var(--good); }
.stat-cell .v.warn { color: var(--warn); }
.stat-cell .v.bad  { color: var(--bad); }
.stat-cell .sub { font-size: 11px; color: var(--ink-4); }

.bignum { display: flex; flex-direction: column; gap: 8px; text-align: center; padding: 22px 12px; }
.bignum .lbl { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-4); font-weight: 600; }
.bignum .v {
  font-family: var(--f-mono); font-feature-settings: "tnum" 1;
  font-weight: 500; font-size: clamp(56px, 7vw, 88px); line-height: 0.88;
  letter-spacing: -0.045em; color: var(--ink-1);
}
.bignum .v.acc  { color: var(--acc); }
.bignum .v.good { color: var(--good); }
.bignum .v.warn { color: var(--warn); }
.bignum .v.bad  { color: var(--bad); }
.bignum .sub { font-size: 12px; color: var(--ink-3); }

/* ════════════════════════════════════════════════════════════════
 * Table
 * ════════════════════════════════════════════════════════════════ */
.table-edit { width: 100%; border-collapse: collapse; font-size: 13px; }
.table-edit th {
  text-align: left; padding: 12px 14px;
  font-family: var(--f-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--ink-4);
  border-bottom: 1px solid var(--line-2);
}
.table-edit td {
  padding: 14px;
  border-bottom: 1px solid var(--line-1);
  vertical-align: middle;
  color: var(--ink-2);
}
.table-edit td b { color: var(--ink-1); }
.table-edit td.num { font-family: var(--f-mono); text-align: right; }
.table-edit th.num { text-align: right; }
.table-edit tr { transition: all 180ms; }
.table-edit tr:hover td { background: var(--surf-1); }
.table-edit tr:last-child td { border-bottom: 0; }
.table-edit tr.clickable { cursor: pointer; }
.table-edit.tbl-tight th, .table-edit.tbl-tight td { padding: 9px 10px; }

/* Sticky thead — 表头跟随滚动,加在 .table-edit 上,跨表通用 */
.table-edit.sticky-thead thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--surf-1);
  /* 用 box-shadow 模拟下边线(border 在 sticky 元素上滚动会消失) */
  box-shadow: inset 0 -1px 0 var(--line-2);
}
/* 在 dark 主题下用更暗的背景对齐 */
[data-theme="dark"] .table-edit.sticky-thead thead th { background: var(--surf-1); }

/* 可排序表头 — th 有 data-sort-key 即可点击切换 升/降 */
.table-edit th[data-sort-key] {
  cursor: pointer;
  user-select: none;
  transition: color .15s ease;
  white-space: nowrap;
}
.table-edit th[data-sort-key]::after {
  content: '↕';
  margin-left: 4px;
  font-size: 0.82em;
  opacity: 0.28;
  font-family: var(--f-mono);
  display: inline-block;
  transition: opacity .15s ease;
}
.table-edit th[data-sort-key]:hover { color: var(--acc); }
.table-edit th[data-sort-key]:hover::after { opacity: 0.65; }
.table-edit th[data-sort-key].sort-asc,
.table-edit th[data-sort-key].sort-desc { color: var(--acc); }
.table-edit th[data-sort-key].sort-asc::after  { content: '↑'; opacity: 1; }
.table-edit th[data-sort-key].sort-desc::after { content: '↓'; opacity: 1; }
.table-edit th[data-sort-key]:focus-visible { outline: 2px solid var(--acc); outline-offset: 1px; }

/* charts container */
.chart { width: 100%; height: 240px; }
.chart-sm { height: 160px; }
.chart-md { height: 220px; }
.chart-lg { height: 320px; }
.chart-xl { height: 400px; }

/* misc */
.hr-soft { height: 1px; background: var(--line-1); margin: 18px 0; border: 0; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-baseline { align-items: baseline; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; }

.t-acc  { color: var(--acc); }
.t-good { color: var(--good); }
.t-warn { color: var(--warn); }
.t-bad  { color: var(--bad); }
.t-mute { color: var(--ink-4); }
.t-mono { font-family: var(--f-mono); }
.t-grad { color: var(--acc); font-weight: inherit; }
.grad   { color: var(--acc); font-weight: 700; }
.h-section .light, .h-display .light { color: var(--ink-4); font-weight: 400; }
.t-sm { font-size: 11px; }
.t-xs { font-size: 10px; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }

.scroll-y { max-height: 320px; overflow-y: auto; padding-right: 6px; }
.scroll-y::-webkit-scrollbar { width: 6px; }
.scroll-y::-webkit-scrollbar-thumb { background: var(--line-3); border-radius: 3px; }
.scroll-y::-webkit-scrollbar-track { background: transparent; }

/* 横向滚动包装 — 给宽表(11+ 列)在窄屏下用 */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.scroll-x::-webkit-scrollbar { height: 6px; }
.scroll-x::-webkit-scrollbar-thumb { background: var(--line-3); border-radius: 3px; }
.scroll-x::-webkit-scrollbar-track { background: transparent; }

/* 表格内联搜索输入 — 风格对齐 .alliance-cur-btn / surf-1 */
.pops-search {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--surf-1);
  color: var(--ink-1);
  font-family: var(--f-sans);
  font-size: 12px;
  min-width: 220px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.pops-search:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-soft); }
.pops-search::placeholder { color: var(--ink-4); }

/* period 切换条 — 紧凑 chip 组,fixed-y 跟 hero 同节奏 */
.pops-period {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  margin: -4px 0 14px;
}
.pops-period-chip {
  display: inline-flex; align-items: center;
  padding: 5px 11px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--surf-1);
  color: var(--ink-3);
  font-family: var(--f-sans);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: all .15s ease;
  user-select: none;
}
.pops-period-chip:hover { color: var(--ink-1); border-color: var(--line-3); }
.pops-period-chip.on {
  background: var(--acc); color: var(--acc-on);
  border-color: var(--acc);
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.pops-period-meta { color: var(--ink-4); font-size: 11px; font-family: var(--f-mono); margin-left: auto; }

/* 筛选 toolbar(广告主章节专用)— 多维度组合筛选 */
.pops-filter-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-bottom: 12px;
  padding: 12px 14px;
  background: var(--surf-1);
  border: 1px solid var(--line-1);
  border-radius: 12px;
}
.pops-filter-group {
  display: inline-flex; align-items: center; gap: 6px;
  padding-right: 12px;
  border-right: 1px solid var(--line-1);
}
.pops-filter-group:last-of-type { border-right: 0; padding-right: 0; }
.pops-filter-group .lbl {
  font-size: 11px; color: var(--ink-4); font-weight: 600;
  margin-right: 2px; letter-spacing: 0.4px;
}
.pops-filter-chip {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--surf-3, var(--surf-2));
  color: var(--ink-2);
  font-size: 11px; font-weight: 600;
  cursor: pointer; user-select: none;
  transition: all .15s ease;
}
.pops-filter-chip:hover { color: var(--ink-1); border-color: var(--line-3); }
.pops-filter-chip.on {
  background: var(--acc); color: var(--acc-on);
  border-color: var(--acc);
}
.pops-filter-chip.on-good { background: var(--good); color: #fff; border-color: var(--good); }
.pops-filter-chip.on-warn { background: var(--warn); color: #fff; border-color: var(--warn); }
.pops-filter-chip.on-mute { background: var(--ink-3); color: var(--bg); border-color: var(--ink-3); }

.pops-filter-date {
  display: inline-flex; align-items: center; gap: 6px;
}
.pops-filter-date input[type="date"] {
  padding: 4px 8px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  background: var(--surf-1);
  color: var(--ink-1);
  font-family: var(--f-mono); font-size: 11px;
  cursor: pointer;
}
.pops-filter-date input[type="date"]:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 2px var(--acc-soft); }
.pops-filter-date .sep { color: var(--ink-4); font-size: 12px; }
.pops-filter-apply {
  padding: 4px 12px;
  border: 1px solid var(--acc);
  border-radius: 6px;
  background: var(--surf-1);
  color: var(--acc);
  font-size: 11px; font-weight: 600; cursor: pointer;
  transition: all .15s ease;
}
.pops-filter-apply:hover { background: var(--acc); color: var(--acc-on); }
.pops-filter-reset {
  padding: 4px 10px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  background: transparent;
  color: var(--ink-3);
  font-size: 11px; cursor: pointer;
  transition: all .15s ease;
}
.pops-filter-reset:hover { color: var(--bad); border-color: var(--bad); }

.pops-filter-meta {
  margin-left: auto;
  color: var(--ink-4); font-size: 11px;
  font-family: var(--f-mono); letter-spacing: 0.5px;
}
.pops-filter-meta b { color: var(--acc); font-weight: 700; }

.empty { padding: 40px 20px; text-align: center; color: var(--ink-4); font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.6px; }

/* ════════════════════════════════════════════════════════════════
 * Login page · Enterprise Gateway · Editorial
 * ════════════════════════════════════════════════════════════════ */
.login-page {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  background: var(--bg);
  overflow: hidden;
}
/* 全页 dot grid — 整张画面一体的底纹 (而非左右分块) */
.login-page::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle, var(--line-2) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 0.32; pointer-events: none; z-index: 0;
  mask-image: radial-gradient(ellipse 80% 60% at 30% 50%, black 0%, rgba(0,0,0,0.6) 50%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 30% 50%, black 0%, rgba(0,0,0,0.6) 50%, transparent 90%);
}
/* 极细中线 — 留一道几乎不可见的视觉分界（仅大屏） */
.login-page::after {
  content: ''; position: absolute; top: 8%; bottom: 8%;
  left: calc(100% * 1.15 / 2.15);  /* 左侧 1.15fr / 总 2.15fr 的位置 */
  width: 1px;
  background: linear-gradient(to bottom, transparent 0%, var(--line-1) 25%, var(--line-1) 75%, transparent 100%);
  opacity: 0.5; z-index: 0; pointer-events: none;
}
@media (max-width: 980px) {
  .login-page { grid-template-columns: 1fr; }
  .login-page::after { display: none; }
}

/* ── 左侧 品牌叙事区 (内容靠右贴近中线, 中线两侧各留 ~64px 呼吸) ── */
.login-narrative {
  position: relative; z-index: 1;
  padding: 44px 64px 36px 72px;
  background: transparent;
  display: grid; grid-template-rows: auto 1fr auto auto auto;
  justify-items: end;            /* 子元素靠右贴中线 */
  gap: 32px; min-height: 100vh; min-height: 100svh;
  overflow: visible;
}
.login-narrative > * { position: relative; z-index: 1; width: 100%; max-width: 600px; }
@media (max-width: 980px) {
  .login-narrative {
    padding: 28px 24px; min-height: auto;
    grid-template-rows: auto auto auto auto auto;
    justify-items: stretch;
  }
}

.ln-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.ln-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.ln-brand-mark {
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--ink-1); color: var(--bg);
  display: grid; place-items: center;
  font-family: var(--f-sans); font-weight: 700; font-size: 13px;
  letter-spacing: 0.4px;
}
:root[data-theme="dark"] .ln-brand-mark { background: var(--acc); color: var(--acc-on); }
.ln-brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.ln-brand-name { font-family: var(--f-sans); font-size: 14.5px; font-weight: 700; color: var(--ink-1); letter-spacing: -0.012em; }
.ln-brand-meta { font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-4); letter-spacing: 0.8px; text-transform: uppercase; margin-top: 2px; }
.ln-ver {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 11px; border-radius: 999px;
  background: var(--surf-2); border: 1px solid var(--line-2);
  font-family: var(--f-mono); font-size: 10.5px; font-weight: 600;
  color: var(--ink-3); letter-spacing: 0.5px;
}
.ln-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--good);
  box-shadow: 0 0 0 4px var(--good-soft);
  animation: pulse 2s infinite;
}

/* ── 装饰: 角落十字标 (editorial) ── */
.ln-cross {
  position: absolute; width: 14px; height: 14px;
  pointer-events: none; opacity: 0.35;
  z-index: 2;
}
.ln-cross::before, .ln-cross::after {
  content: ''; position: absolute; background: var(--ink-3);
}
.ln-cross::before { left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%); }
.ln-cross::after  { top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-50%); }
.ln-cross-tl { top: 18px; left: 18px; }
.ln-cross-tr { top: 18px; right: 18px; }
.ln-cross-bl { bottom: 18px; left: 18px; }
.ln-cross-br { bottom: 18px; right: 18px; }

/* ── Version chip ── */
.ln-ver-en { font-weight: 700; color: var(--ink-2); }
.ln-ver-sep { color: var(--ink-5); margin: 0 4px; }
.ln-ver-cn { letter-spacing: 0.4px; }

/* ── Hero · Bilingual Editorial ── */
.ln-hero { display: flex; flex-direction: column; gap: 24px; max-width: 580px; padding-top: 8px; }
.ln-eyebrow {
  font-family: var(--f-mono); font-size: 10.5px; font-weight: 600;
  color: var(--ink-4); letter-spacing: 1.8px; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 14px;
}
.ln-rule {
  width: 28px; height: 1px; background: var(--ink-3);
  display: inline-block;
  animation: ruleGrow 1.4s cubic-bezier(.16,1,.3,1) both;
}
@keyframes ruleGrow { from { width: 0; } to { width: 28px; } }

.ln-display {
  display: flex; flex-direction: column; gap: 8px;
  margin: 0;
  font-family: var(--f-sans);
}
.ln-line {
  display: flex; align-items: baseline; gap: 24px;
  position: relative;
  animation: lineUp 0.9s cubic-bezier(.16,1,.3,1) both;
}
.ln-line:nth-child(1) { animation-delay: 0.1s; }
.ln-line:nth-child(2) { animation-delay: 0.22s; }
@keyframes lineUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ln-en {
  font-weight: 600;
  font-size: clamp(64px, 7.6vw, 104px);
  line-height: 0.92; letter-spacing: -0.05em;
  color: var(--ink-1);
  display: inline-block;
  transition: letter-spacing 400ms cubic-bezier(.16,1,.3,1);
}
.ln-en:hover { letter-spacing: -0.045em; }
.ln-cn {
  font-weight: 500;
  font-size: clamp(18px, 1.6vw, 24px);
  letter-spacing: -0.012em;
  color: var(--ink-4);
  position: relative;
  align-self: end;
  padding-bottom: 0.2em;
}
.ln-cn::before {
  content: ''; position: absolute; left: -14px; top: 50%;
  width: 8px; height: 1px; background: var(--ink-5);
  transform: translateY(-50%);
}
.ln-en-mark {
  position: relative; display: inline-block;
}
.ln-en-mark::after {
  content: ''; position: absolute; left: -2px; right: -2px; bottom: 0.11em;
  height: 0.26em; background: var(--acc); opacity: 0.42; z-index: -1;
  border-radius: 2px;
  animation: markIn 1s cubic-bezier(.16,1,.3,1) 0.5s both;
}
@keyframes markIn { from { transform: scaleX(0); transform-origin: left; } to { transform: scaleX(1); } }
:root[data-theme="dark"] .ln-en-mark::after { opacity: 0.55; }

.ln-lede {
  display: flex; flex-direction: column; gap: 6px;
  margin: 12px 0 0;
  animation: lineUp 0.9s cubic-bezier(.16,1,.3,1) 0.32s both;
}
.ln-lede-en {
  font-family: var(--f-mono); font-size: 11.5px; font-weight: 600;
  color: var(--ink-2); letter-spacing: 0.5px;
  text-transform: uppercase;
}
.ln-lede-cn {
  font-family: var(--f-sans); font-size: 13px;
  color: var(--ink-4); letter-spacing: -0.005em;
}

/* ── 抽象 hero metric tile (与 hero 同宽, 左边对齐) ── */
.ln-art {
  position: relative;
  padding: 24px 28px 22px;
  width: 100%;                   /* 跟随父容器 600px max */
  border: 1px solid var(--line-1); border-radius: 14px;
  background: linear-gradient(135deg, var(--surf-2) 0%, var(--surf-1) 100%);
  display: flex; flex-direction: column; gap: 14px;
  overflow: hidden;
}
.ln-art::before {
  content: ''; position: absolute; right: -40px; top: -40px;
  width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, var(--acc-soft) 0%, transparent 70%);
  opacity: 0.6; pointer-events: none;
}
.ln-art-top {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 1.2px;
  text-transform: uppercase; font-weight: 600;
  color: var(--ink-4);
  position: relative; z-index: 1;
}
.ln-art-tag { color: var(--ink-3); }
.ln-art-period { color: var(--ink-5); }
/* ── Matrix art (7×6 dot pattern · 紧凑) ── */
.ln-matrix {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  padding: 14px 4px 10px;
  position: relative; z-index: 1;
}
.ln-cell {
  aspect-ratio: 1;
  max-width: 78px;
  border-radius: 4px;
  background: var(--surf-3);
  border: 1px solid var(--line-1);
  position: relative;
  cursor: pointer;
  transition: background 240ms cubic-bezier(.16,1,.3,1),
              border-color 240ms cubic-bezier(.16,1,.3,1),
              transform 240ms cubic-bezier(.16,1,.3,1),
              opacity 240ms;
}
.ln-cell:hover {
  background: var(--ink-1);
  border-color: var(--ink-1);
  transform: scale(1.18);
  z-index: 2;
}
:root[data-theme="dark"] .ln-cell:hover { background: var(--acc); border-color: var(--acc); }
.ln-cell-active {
  background: var(--ink-1);
  border-color: var(--ink-1);
  animation: cellPulse 4s ease-in-out infinite;
}
:root[data-theme="dark"] .ln-cell-active { background: var(--acc); border-color: var(--acc); }
.ln-cell-cross:not(.ln-cell-active) {
  background: var(--ink-3);
  border-color: var(--ink-3);
  opacity: 0.55;
}
.ln-cell-cross.ln-cell-active { transform: scale(1.10); }

@keyframes cellPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.42; transform: scale(0.92); }
}
@media (prefers-reduced-motion: reduce) {
  .ln-cell-active { animation: none; }
}

.ln-art-foot {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.4px;
  position: relative; z-index: 1;
  padding-top: 14px; border-top: 1px solid var(--line-1);
  margin-top: 6px;
}
.ln-art-stat { color: var(--ink-4); font-weight: 500; }
.ln-art-stat b { color: var(--ink-1); font-weight: 700; font-size: 13px; margin-right: 3px; }
.ln-art-dot { color: var(--ink-5); }
.ln-art-grow { flex: 1; height: 1px; background: var(--line-2); margin: 0 4px; }
.ln-art-live {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--ink-3); font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase;
  font-size: 9.5px;
}

.ln-foot { display: flex; align-items: flex-end; }
.ln-mono-line {
  font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-5);
  letter-spacing: 0.6px;
  display: inline-flex; align-items: center; gap: 12px; width: 100%;
}
.ln-foot-l { color: var(--ink-4); }
.ln-foot-arrow { color: var(--ink-5); font-size: 11px; }
.ln-foot-r { color: var(--ink-4); margin-left: auto; font-weight: 600; }

/* ── 右侧 登录表单区 (内容靠左贴近中线, 同时整体往右挪) ── */
.login-main {
  position: relative; z-index: 1;
  padding: 44px 72px 36px 64px;
  display: grid; grid-template-rows: auto 1fr auto;
  justify-items: start;          /* 子元素靠左贴中线 */
  gap: 24px; min-height: 100vh; min-height: 100svh;
  background: transparent;
}
.login-main > * { width: 100%; max-width: 480px; }
@media (max-width: 980px) {
  .login-main { padding: 24px 20px; min-height: auto; }
}
.lm-top {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--f-mono); font-size: 11.5px;
}
.lm-link {
  color: var(--ink-3); text-decoration: none;
  letter-spacing: 0.4px; transition: color 140ms;
}
.lm-link:hover { color: var(--acc); }
.lm-link-mute { color: var(--ink-4); font-size: 11.5px; }
.lm-sep { color: var(--ink-5); }
.lm-theme { margin-left: 4px; }

/* ── inline status (合并到 lm-top 一行, 不再浮动避免重叠) ── */
.lm-status-inline {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 11px; border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--surf-1);
  font-family: var(--f-mono); font-size: 10.5px;
  letter-spacing: 0.5px;
}
.lm-status-lbl { color: var(--ink-4); font-weight: 700; text-transform: uppercase; }
.lm-status-val { color: var(--ink-2); font-weight: 600; }
.lm-spacer { flex: 1; }
@media (max-width: 980px) { .lm-status-inline { display: none; } }

/* ── 角落十字 (用左侧的 .ln-cross 同款 class, 但放在右侧 main) ── */
.login-main > .ln-cross-tr { top: 18px; right: 18px; }
.login-main > .ln-cross-bl { bottom: 18px; left: 18px; }
.login-main > .ln-cross-br { bottom: 18px; right: 18px; }

.lm-card {
  width: 100%; max-width: 460px;
  margin: 0; align-self: center;
  display: flex; flex-direction: column; gap: 26px;
  position: relative; z-index: 1;
}
.lm-header { display: flex; flex-direction: column; gap: 6px; }
.lm-eyebrow-row {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--f-mono); font-size: 10.5px; font-weight: 600;
  color: var(--ink-4); letter-spacing: 1.6px; text-transform: uppercase;
}
.lm-rule {
  flex: 1; max-width: 60px; height: 1px; background: var(--ink-3);
  display: inline-block; opacity: 0.4;
}
.lm-eyebrow-num { color: var(--ink-3); font-weight: 700; }
.lm-eyebrow {
  font-family: var(--f-mono); font-size: 10.5px; font-weight: 600;
  color: var(--ink-4); letter-spacing: 1.6px; text-transform: uppercase;
}
.lm-title {
  font-family: var(--f-sans); font-weight: 700;
  font-size: 36px; line-height: 1.1; letter-spacing: -0.028em;
  color: var(--ink-1); margin: 8px 0 0;
}
.lm-sub { font-size: 13.5px; color: var(--ink-3); line-height: 1.5; margin: 4px 0 0; }

.lm-form { display: flex; flex-direction: column; gap: 14px; }
.lm-field { display: flex; flex-direction: column; gap: 6px; }
.lm-label-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lm-label {
  font-family: var(--f-mono); font-size: 10.5px; font-weight: 600;
  color: var(--ink-3); letter-spacing: 1.1px; text-transform: uppercase;
}
.lm-input-wrap {
  position: relative;
  display: flex; align-items: center;
  background: var(--surf-1); border: 1px solid var(--line-2);
  border-radius: 10px; transition: all 160ms;
}
.lm-input-wrap:focus-within {
  border-color: var(--ink-1);
  box-shadow: 0 0 0 4px var(--surf-3);
}
:root[data-theme="dark"] .lm-input-wrap:focus-within { border-color: var(--acc); box-shadow: 0 0 0 4px var(--acc-soft); }
.lm-input-icon { padding-left: 14px; color: var(--ink-4); display: inline-flex; }
.lm-input-icon svg { width: 16px; height: 16px; }
.lm-input {
  flex: 1; min-width: 0;
  padding: 12px 14px;
  background: transparent; border: 0; outline: none;
  font-family: var(--f-sans); font-size: 14.5px;
  color: var(--ink-1); letter-spacing: -0.005em;
}
.lm-input::placeholder { color: var(--ink-5); font-weight: 400; }
.lm-input-btn {
  margin-right: 6px; padding: 6px;
  border: 0; background: transparent; cursor: pointer;
  color: var(--ink-4); border-radius: 6px;
  display: inline-flex;
}
.lm-input-btn:hover { color: var(--ink-1); background: var(--surf-2); }
.lm-input-btn svg { width: 14px; height: 14px; }

.lm-check {
  display: inline-flex; align-items: center; gap: 9px;
  cursor: pointer; user-select: none;
  font-family: var(--f-mono); font-size: 11.5px; font-weight: 600;
  color: var(--ink-3); letter-spacing: 0.4px;
  margin-top: 2px;
}
.lm-check input { display: none; }
.lm-check-box {
  width: 16px; height: 16px; border-radius: 4px;
  border: 1.5px solid var(--line-3);
  background: var(--surf-1);
  display: grid; place-items: center;
  transition: all 140ms;
}
.lm-check input:checked + .lm-check-box {
  background: var(--ink-1); border-color: var(--ink-1);
}
:root[data-theme="dark"] .lm-check input:checked + .lm-check-box { background: var(--acc); border-color: var(--acc); }
.lm-check input:checked + .lm-check-box::after {
  content: ''; width: 4px; height: 8px;
  border-right: 2px solid var(--bg);
  border-bottom: 2px solid var(--bg);
  transform: translateY(-1px) rotate(45deg);
}
:root[data-theme="dark"] .lm-check input:checked + .lm-check-box::after {
  border-color: var(--acc-on);
}
.lm-check:hover .lm-check-box { border-color: var(--ink-2); }

.lm-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 22px;
  background: var(--ink-1); color: var(--bg);
  border: 0; border-radius: 10px;
  font-family: var(--f-sans); font-size: 14px; font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: all 180ms cubic-bezier(.4,0,.2,1);
  margin-top: 4px;
}
.lm-cta:hover {
  background: var(--ink-2);
  box-shadow: 0 8px 22px -8px rgba(15, 18, 38, 0.40);
}
.lm-cta:hover .lm-cta-arrow { transform: translateX(3px); }
.lm-cta:active { transform: translateY(1px); }
.lm-cta:disabled { opacity: 0.6; cursor: wait; }
.lm-cta-arrow { display: inline-flex; transition: transform 180ms; }
.lm-cta-arrow svg { width: 14px; height: 14px; }
:root[data-theme="dark"] .lm-cta { background: var(--acc); color: var(--acc-on); }
:root[data-theme="dark"] .lm-cta:hover { background: var(--acc); box-shadow: 0 8px 24px -6px rgba(199, 247, 90, 0.45); }

.lm-alt {
  text-align: center;
  font-family: var(--f-mono); font-size: 11.5px; color: var(--ink-4);
  letter-spacing: 0.4px;
  margin-top: 4px;
}
.lm-alt .lm-link { color: var(--ink-2); font-weight: 600; margin-left: 4px; }
.lm-alt .lm-link:hover { color: var(--acc); }

.lm-tos {
  font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-5);
  letter-spacing: 0.4px; text-align: center; line-height: 1.7;
  padding-top: 16px; border-top: 1px solid var(--line-1);
  margin-top: 4px;
}
.lm-tos .lm-link { color: var(--ink-3); }
.lm-tos .lm-link:hover { color: var(--acc); }

/* ── 底部 editorial 引言 + footer ── */
.lm-foot-block {
  display: flex; flex-direction: column; gap: 18px;
  padding-top: 24px;
  position: relative; z-index: 1;
}
.lm-quote {
  display: flex; flex-direction: column;
  margin: 0; padding: 0 20px 0 28px;
  position: relative;
  max-width: 420px;
}
.lm-quote-mark {
  position: absolute; left: -2px; top: -16px;
  font-family: 'Times New Roman', serif;
  font-size: 56px; line-height: 1; color: var(--acc);
  opacity: 0.55; font-weight: 400;
  pointer-events: none;
}
.lm-quote-text {
  font-family: var(--f-sans); font-style: normal; font-weight: 500;
  font-size: 15px; line-height: 1.5; color: var(--ink-1);
  letter-spacing: -0.01em;
}
.lm-quote-cn {
  font-family: var(--f-mono); font-size: 10.5px;
  color: var(--ink-4); letter-spacing: 0.6px;
  margin-top: 6px; text-transform: uppercase;
}

.lm-foot {
  text-align: center;
  padding-top: 14px; border-top: 1px dashed var(--line-1);
}
.lm-foot-mono {
  font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-5);
  letter-spacing: 0.5px;
}
.lm-foot-mono .lm-link { color: var(--ink-3); }
.lm-foot-mono .lm-link:hover { color: var(--acc); }

/* ── 测试账号 Modal ───────────────────────── */
.lm-modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(15, 18, 38, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: grid; place-items: center;
  padding: 24px;
  animation: fadeIn 180ms ease-out;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.lm-modal {
  width: 100%; max-width: 880px;
  max-height: 86vh; overflow-y: auto;
  background: var(--bg); border: 1px solid var(--line-2);
  border-radius: 18px; box-shadow: 0 30px 80px -20px rgba(15,18,38,0.35);
  padding: 32px 36px;
  animation: modalUp 220ms cubic-bezier(.16,1,.3,1);
}
@keyframes modalUp { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.lm-modal-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--line-1);
}
.lm-modal-title {
  font-family: var(--f-sans); font-weight: 700;
  font-size: 22px; line-height: 1.2; letter-spacing: -0.022em;
  color: var(--ink-1); margin: 4px 0;
}
.lm-modal-sub { font-size: 13px; color: var(--ink-3); margin: 0; }
.lm-modal-close {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--line-2); background: var(--surf-1);
  font-size: 20px; color: var(--ink-3); cursor: pointer;
  display: grid; place-items: center;
  transition: all 140ms;
  flex-shrink: 0;
}
.lm-modal-close:hover { background: var(--ink-1); color: var(--bg); border-color: var(--ink-1); }

.lm-modal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.lm-acc-card {
  text-align: left; padding: 14px 16px;
  background: var(--surf-1); border: 1px solid var(--line-1);
  border-radius: 10px; cursor: pointer;
  transition: all 180ms;
  display: flex; flex-direction: column; gap: 4px;
  font-family: inherit;
}
.lm-acc-card:hover {
  border-color: var(--ink-1); background: var(--surf-2);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -8px rgba(15,18,38,0.20);
}
.lm-acc-card:hover .lm-acc-arrow { color: var(--acc); transform: translateX(2px); }
:root[data-theme="dark"] .lm-acc-card:hover { border-color: var(--acc); }
.lm-acc-top { display: flex; align-items: center; justify-content: space-between; }
.lm-acc-role {
  font-family: var(--f-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 1px; color: var(--bg);
  background: var(--ink-1); padding: 2px 7px; border-radius: 4px;
}
:root[data-theme="dark"] .lm-acc-role { background: var(--acc); color: var(--acc-on); }
.lm-acc-arrow { color: var(--ink-5); transition: all 180ms; display: inline-flex; }
.lm-acc-arrow svg { width: 14px; height: 14px; }
.lm-acc-name { font-family: var(--f-sans); font-size: 14px; font-weight: 700; color: var(--ink-1); letter-spacing: -0.012em; margin-top: 4px; }
.lm-acc-email { font-family: var(--f-mono); font-size: 11px; color: var(--ink-4); letter-spacing: 0.3px; }
.lm-acc-dept { font-family: var(--f-mono); font-size: 10px; color: var(--ink-5); letter-spacing: 0.4px; text-transform: uppercase; margin-top: 2px; }

.footer {
  margin-top: 80px; padding: 32px 36px;
  border-top: 1px solid var(--line-1);
  text-align: center;
  font-family: var(--f-mono); font-size: 11px;
  color: var(--ink-4); letter-spacing: 0.6px;
}
.footer .accent { color: var(--acc); font-weight: 700; }

/* ════════════════════════════════════════════════════════════════
 * Animations
 * ════════════════════════════════════════════════════════════════ */
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.fade-up   { animation: fadeUp 700ms cubic-bezier(.16,1,.3,1) both; }
.fade-up-2 { animation: fadeUp 700ms 100ms cubic-bezier(.16,1,.3,1) both; }
.fade-up-3 { animation: fadeUp 700ms 200ms cubic-bezier(.16,1,.3,1) both; }
.fade-up-4 { animation: fadeUp 700ms 300ms cubic-bezier(.16,1,.3,1) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ─── 全局货币切换 (USDT ↔ CNY 实时汇率) ──────────────────────── */
.fx-toggle {
  display: inline-flex; align-items: center; gap: 0;
  background: var(--surf-1);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 3px;
  margin-left: 4px;
}
.fx-toggle button {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 0; background: transparent;
  color: var(--ink-4); cursor: pointer;
  font-family: var(--f-mono);
  font-size: 13px; font-weight: 600;
  transition: all 180ms;
}
.fx-toggle button:hover { color: var(--ink-2); }
.fx-toggle button.on {
  background: var(--ink-1); color: var(--bg);
  box-shadow: 0 2px 8px -2px rgba(0,0,0,0.2);
}
:root[data-theme="dark"] .fx-toggle button.on { background: var(--acc); color: var(--acc-on); }
.fx-toggle .fx-rate {
  padding: 0 8px 0 4px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: 0.3px;
}

/* ─── 广告联盟部 · DSP 接入专用样式 ───────────────────────────── */
.alliance-cur {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: auto;
  padding: 3px;
  background: var(--surf-2);
  border: 1px solid var(--line-2);
  border-radius: 8px;
}
.alliance-cur-btn {
  font-family: var(--f-mono);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.4px;
  padding: 4px 10px;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.alliance-cur-btn:hover { color: var(--ink-1); background: var(--surf-3); }
.alliance-cur-btn:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}
.alliance-cur-btn.on {
  background: var(--acc);
  color: var(--acc-on, #fff);
  box-shadow: 0 1px 0 rgba(0,0,0,0.08);
}
.alliance-cur-rate {
  margin-left: 4px;
  padding: 0 8px 0 6px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: 0.3px;
}

/* 联盟 hero 大数字含 $/¥ 前缀,字符比纯数字部门多 1 个,
   缩 ~25% 字号避免与右栏 mini 重叠 */
.alliance-hero-num {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
  font-size: clamp(54px, 7.0vw, 108px);
  display: inline-block;
}
.num-hero:has(.alliance-hero-num) { font-size: inherit; }

.alliance-subpanel-grid {
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 960px) {
  .alliance-subpanel-grid { grid-template-columns: 1fr; }
}

.alliance-subpanel { padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.alliance-sub-summary {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.6;
  padding: 10px 12px;
  background: var(--surf-2);
  border-left: 2px solid var(--acc);
  border-radius: 4px;
}
.alliance-km-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 720px) {
  .alliance-km-grid { grid-template-columns: repeat(2, 1fr); }
}
.alliance-km {
  padding: 10px 12px;
  background: var(--surf-2);
  border: 1px solid var(--line-1);
  border-radius: 6px;
}
.alliance-km-lbl {
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 4px;
}
.alliance-km-val {
  font-family: var(--f-mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-1);
  letter-spacing: -0.01em;
}
.alliance-sub-foot {
  margin-top: auto;
  display: flex;
  justify-content: flex-end;
}
.alliance-sub-link {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--acc);
  text-decoration: none;
  letter-spacing: 0.3px;
  border-bottom: 1px solid transparent;
  transition: border-color 160ms ease, opacity 160ms ease;
}
.alliance-sub-link:hover {
  opacity: 0.85;
  border-bottom-color: var(--acc);
}
.alliance-sub-link:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════
   §09 商务考核 · 照妖镜 (传统销售部 L4 章节)
   ─ KPI 卡 / 红榜卡 / 金银铜 / 评级矩阵 / 数据源说明
   ═══════════════════════════════════════════════════════════════════════ */

/* --- 工具栏 (紧凑 inline:label + select 横排 + 右侧按钮组) --- */
/* ⚠ 必须显式覆盖 .tile 父类的 flex-direction:column 和 min-height:100% */
.tile.kh-toolbar {
  margin-top: 14px;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  justify-content: flex-start;
  padding: 10px 14px;
  min-height: 0;
}
.kh-toolbar .kh-lbl {
  font-family: var(--f-mono);
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-4);
  white-space: nowrap;
  margin-right: -4px;  /* 紧跟 select */
}
.kh-toolbar .kh-sel {
  font-family: var(--f-mono);
  font-size: 12px; font-weight: 600;
  padding: 7px 28px 7px 10px;
  min-width: 124px; min-height: 32px;
  background: var(--surf-1);
  color: var(--ink-1);
  border: 1px solid var(--ink-6);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 120ms ease;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
                    linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.kh-toolbar .kh-sel:hover { border-color: var(--acc); }
.kh-toolbar .kh-sel:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 20%, transparent); }
.kh-toolbar-spacer { flex: 1; min-width: 8px; }
.kh-toolbar #l4-kaohe-fresh { font-size: 11px; }
/* L3 视图固定分公司标签 (替代 dept select) */
.kh-tag-dept {
  font-family: var(--f-mono);
  font-size: 11px; font-weight: 600;
  padding: 6px 12px;
  background: color-mix(in srgb, var(--acc) 12%, transparent);
  color: var(--acc);
  border: 1px solid color-mix(in srgb, var(--acc) 30%, transparent);
  border-radius: 6px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* --- 旧 .kh-filter (列布局,保留兼容,当前未使用) --- */
.kh-filter {
  display: flex; flex-direction: column; gap: 4px;
}
.kh-filter > label {
  font-family: var(--f-mono);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-4);
}
.kh-filter > select {
  font-family: var(--f-mono);
  font-size: 12px; font-weight: 600;
  padding: 8px 12px; min-width: 140px;
  background: var(--surf-1);
  color: var(--ink-1);
  border: 1px solid var(--ink-6);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 120ms ease;
}
.kh-filter > select:hover  { border-color: var(--acc); }
.kh-filter > select:focus  { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 20%, transparent); }

/* --- 按钮 --- */
.btn-mini {
  font-family: var(--f-mono);
  font-size: 11px; font-weight: 600;
  padding: 7px 12px; min-height: 32px;
  background: var(--surf-1);
  color: var(--ink-1);
  border: 1px solid var(--ink-6);
  border-radius: 6px;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: all 120ms ease;
  white-space: nowrap;
}
.btn-mini:hover { background: var(--acc); color: #fff; border-color: var(--acc); }

/* --- §09/§08 顶部 tab 切换 (业绩考核 ↔ 成员健康) --- */
.kh-tabs {
  display: flex; flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
  padding: 6px;
  background: var(--surf-1);
  border: 1px solid var(--ink-6);
  border-radius: 10px;
  align-items: center;
}
.kh-tab {
  display: flex; align-items: baseline; gap: 8px;
  padding: 10px 18px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  cursor: pointer;
  transition: all 160ms ease;
  font-family: var(--f-sans);
  color: var(--ink-3);
  position: relative;
  white-space: nowrap;
}
.kh-tab:hover {
  background: color-mix(in srgb, var(--acc) 6%, transparent);
  color: var(--ink-1);
}
.kh-tab.on {
  background: var(--surf-3);
  border-color: color-mix(in srgb, var(--acc) 30%, var(--ink-6));
  color: var(--ink-1);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--ink-1) 8%, transparent),
              inset 0 0 0 1px color-mix(in srgb, var(--acc) 14%, transparent);
}
.kh-tab .kh-tab-num {
  font-family: var(--f-mono);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink-4);
}
.kh-tab.on .kh-tab-num { color: var(--acc); }
.kh-tab .kh-tab-lbl {
  font-size: 14px; font-weight: 700;
  letter-spacing: -0.2px;
}
.kh-tab .kh-tab-sub {
  font-family: var(--f-mono);
  font-size: 11px; font-weight: 500;
  color: var(--ink-4);
  margin-left: 4px;
}
.kh-tab:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}
.kh-tab-spacer { flex: 1; min-width: 8px; }
.kh-tab-meta { font-size: 11px; padding: 0 10px; }
@media (max-width: 768px) {
  .kh-tab .kh-tab-sub { display: none; }
  .kh-tab { padding: 8px 14px; }
}

/* --- 成员健康 · 卡片网格 --- */
.kh-h-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 14px;
  margin-top: 6px;
}
.kh-h-card {
  display: flex; flex-direction: column; gap: 12px;
  padding: 18px;
  background: var(--surf-3);
  border: 1px solid var(--ink-6);
  border-left: 4px solid var(--ink-4);
  border-radius: 10px;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.kh-h-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--ink-1) 10%, transparent);
}
.kh-h-good { border-left-color: var(--good); background: linear-gradient(135deg, color-mix(in srgb, var(--good) 6%, var(--surf-3)) 0%, var(--surf-3) 50%); }
.kh-h-mid  { border-left-color: var(--warn); background: linear-gradient(135deg, color-mix(in srgb, var(--warn) 6%, var(--surf-3)) 0%, var(--surf-3) 50%); }
.kh-h-bad  { border-left-color: var(--bad);  background: linear-gradient(135deg, color-mix(in srgb, var(--bad)  6%, var(--surf-3)) 0%, var(--surf-3) 50%); }

.kh-h-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ink-6);
}
.kh-h-name-block { flex: 1; min-width: 0; }
.kh-h-name {
  font-size: 18px; font-weight: 700; color: var(--ink-1);
  letter-spacing: -0.3px; margin-bottom: 4px;
}
.kh-h-meta {
  display: flex; flex-wrap: wrap; gap: 4px 10px;
  font-size: 11.5px; color: var(--ink-4);
  align-items: center;
}
.kh-h-brand {
  font-weight: 600; color: var(--ink-3);
}
.kh-h-nickname { color: var(--ink-4); font-style: italic; }
.kh-h-tg { color: var(--acc); font-size: 11px; }

.kh-h-score {
  text-align: right;
  flex-shrink: 0;
  min-width: 64px;
}
.kh-h-score-num {
  font-size: 32px; font-weight: 800;
  line-height: 1; letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-1);
}
.kh-h-good .kh-h-score-num { color: var(--good); }
.kh-h-mid  .kh-h-score-num { color: var(--warn); }
.kh-h-bad  .kh-h-score-num { color: var(--bad); }
.kh-h-score-lbl {
  font-family: var(--f-mono);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-4); margin-top: 2px;
}

.kh-h-summary {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 12.5px; line-height: 1.55;
  color: var(--ink-2);
}
.kh-h-summary > .tag { align-self: flex-start; }
.kh-h-msg-count {
  font-family: var(--f-mono); font-size: 11px;
}
.kh-h-summary-text {
  color: var(--ink-2);
}

.kh-h-suggest {
  background: color-mix(in srgb, var(--acc) 6%, transparent);
  border-left: 2px solid var(--acc);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 12px; line-height: 1.5;
  color: var(--ink-2);
  display: flex; gap: 6px; align-items: flex-start;
}
.kh-h-suggest-icon { font-size: 14px; flex-shrink: 0; }

.kh-h-bars {
  display: flex; flex-direction: column; gap: 6px;
}
.kh-h-bar-row {
  display: grid;
  grid-template-columns: 56px 1fr 48px;
  align-items: center;
  gap: 10px;
}
.kh-h-bar-lbl {
  font-family: var(--f-mono);
  font-size: 11px; font-weight: 600;
  color: var(--ink-4);
  letter-spacing: 0.04em;
}
.kh-h-bar-track {
  height: 6px;
  background: var(--ink-6);
  border-radius: 3px;
  overflow: hidden;
}
.kh-h-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 600ms cubic-bezier(.16,1,.3,1);
}
.kh-h-bar-val {
  font-family: var(--f-mono);
  font-size: 11.5px; font-weight: 700;
  color: var(--ink-1);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.kh-h-anomaly {
  background: color-mix(in srgb, var(--bad) 8%, transparent);
  border: 1px dashed var(--bad);
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 11.5px; font-family: var(--f-mono);
  color: var(--bad);
  font-weight: 600;
}

.kh-h-footer {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--ink-6);
}

@media (prefers-reduced-motion: reduce) {
  .kh-h-card { transition: none; }
  .kh-h-card:hover { transform: none; }
  .kh-h-bar-fill { transition: none; }
}

/* --- 战绩榜 表内搜索框 --- */
.kh-search {
  font-family: var(--f-sans);
  font-size: 12px;
  padding: 6px 10px; min-height: 30px;
  min-width: 200px; max-width: 260px;
  background: var(--surf-1);
  color: var(--ink-1);
  border: 1px solid var(--ink-6);
  border-radius: 6px;
  outline: none;
  transition: border-color 120ms ease;
}
.kh-search::placeholder { color: var(--ink-4); }
.kh-search:focus { border-color: var(--acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 20%, transparent); }

/* --- callout (顶部红色提示) --- */
.callout-kh {
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 12.5px; line-height: 1.6;
  border-left: 3px solid var(--ink-3);
  background: color-mix(in srgb, var(--ink-6) 40%, transparent);
  color: var(--ink-2);
}
.callout-kh-red {
  border-left-color: var(--bad);
  background: color-mix(in srgb, var(--bad) 8%, transparent);
}

/* --- KPI 卡 (6 张, 顶部 3px 色条 + 大数字 + 底部 delta) --- */
.kh-kpi {
  position: relative;
  overflow: hidden;
  padding: 22px 22px 18px;
  display: flex; flex-direction: column; gap: 10px;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.kh-kpi:hover { transform: translateY(-2px); box-shadow: 0 10px 24px color-mix(in srgb, var(--ink-1) 10%, transparent); }
.kh-kpi-bar {
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--ink-1);
}
.kh-kpi .lbl {
  font-family: var(--f-mono);
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-4);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.kh-kpi-val {
  font-size: 36px; font-weight: 700;
  line-height: 1; letter-spacing: -1px;
  color: var(--ink-1);
  font-variant-numeric: tabular-nums;
}
.kh-kpi-unit {
  font-size: 14px; font-weight: 500;
  color: var(--ink-3); margin-left: 4px;
  vertical-align: 6px;
}
.kh-kpi-foot {
  font-family: var(--f-mono); font-size: 11.5px;
  color: var(--ink-3);
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: auto;
}
.kh-kpi-foot b { color: var(--ink-1); font-weight: 600; }

.kh-kpi-red    .kh-kpi-bar { background: var(--acc); }
.kh-kpi-red    .kh-kpi-val { color: var(--acc); }
.kh-kpi-green  .kh-kpi-bar { background: var(--good); }
.kh-kpi-green  .kh-kpi-val { color: var(--good); }
.kh-kpi-slate  .kh-kpi-bar { background: var(--ink-3); }
.kh-kpi-slate  .kh-kpi-val { color: var(--ink-2); }
.kh-kpi-amber  .kh-kpi-bar { background: var(--warn); }
.kh-kpi-amber  .kh-kpi-val { color: var(--warn); }
.kh-kpi-blue   .kh-kpi-bar { background: var(--acc-2, var(--acc)); }
.kh-kpi-blue   .kh-kpi-val { color: var(--acc-2, var(--acc)); }
.kh-kpi-danger .kh-kpi-bar { background: var(--bad); }
.kh-kpi-danger .kh-kpi-val { color: var(--bad); }

/* --- a11y: 触摸目标 ≥40px / focus-visible / reduced motion --- */
.kh-filter > select { min-height: 38px; }
.btn-mini { min-height: 38px; }
.btn-mini:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .kh-kpi, .kh-redban-card, .kh-podium-item, .kh-cell {
    transition: none !important;
  }
  .kh-kpi:hover, .kh-redban-card:hover, .kh-podium-item:hover, .kh-cell:hover {
    transform: none !important;
  }
  .kh-podium-item.gold { transform: none !important; }
}

/* --- 红榜卡片 --- */
.kh-redban-card {
  padding: 16px 18px;
  background: var(--surf-3);
  border: 1px solid var(--bad);
  border-left: 5px solid var(--bad);
  border-radius: 8px;
  transition: transform 140ms ease, box-shadow 140ms ease;
  display: flex; flex-direction: column; gap: 12px;
}
.kh-redban-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--bad) 18%, transparent);
}
.kh-redban-card .who {
  font-size: 17px; font-weight: 700; color: var(--bad);
  letter-spacing: -0.3px;
}
.kh-redban-card .dept {
  font-family: var(--f-mono);
  font-size: 10.5px; color: var(--ink-4);
  letter-spacing: 0.06em; text-transform: uppercase;
  margin-top: -8px;
}
.kh-redban-card .stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
  padding-top: 12px; border-top: 1px dashed var(--ink-6);
  font-family: var(--f-mono); font-size: 10.5px;
  color: var(--ink-4); text-transform: uppercase; letter-spacing: 0.06em;
}
.kh-redban-card .stats > div { display: flex; flex-direction: column; gap: 3px; }
.kh-redban-card .stats b {
  font-family: var(--f-sans); font-size: 19px; font-weight: 700;
  color: var(--ink-1); letter-spacing: -0.5px;
}
.kh-redban-card .reason {
  font-size: 12px; line-height: 1.55;
  color: var(--ink-2);
  background: color-mix(in srgb, var(--bad) 6%, transparent);
  padding: 9px 12px; border-radius: 4px;
  border-left: 2px solid var(--bad);
}

/* --- 金银铜 podium --- */
.kh-podium {
  display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 14px;
  margin-top: 6px; align-items: end;
}
@media (max-width: 980px) { .kh-podium { grid-template-columns: 1fr 1fr 1fr; gap: 8px; } }
.kh-podium-item {
  padding: 22px 16px 18px;
  background: var(--surf-3);
  border: 1px solid var(--ink-6);
  border-radius: 10px;
  text-align: center;
  transition: transform 160ms ease;
}
.kh-podium-item:hover { transform: translateY(-3px); }
.kh-podium-item .medal { font-size: 30px; line-height: 1; margin-bottom: 8px; }
.kh-podium-item .name {
  font-size: 17px; font-weight: 700; color: var(--ink-1);
  letter-spacing: -0.3px;
}
.kh-podium-item .dept {
  font-family: var(--f-mono); font-size: 10.5px;
  color: var(--ink-4); letter-spacing: 0.06em;
  margin: 4px 0 12px;
}
.kh-podium-item .num {
  font-size: 32px; font-weight: 700; color: var(--ink-1);
  line-height: 1; letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
}
.kh-podium-item .num small {
  font-size: 11px; color: var(--ink-3); font-weight: 500; margin-left: 4px;
}
.kh-podium-item .amt {
  font-family: var(--f-mono); font-size: 11px;
  color: var(--ink-3); margin-top: 8px; font-weight: 600;
}
.kh-podium-item.gold {
  background: linear-gradient(180deg, color-mix(in srgb, var(--warn) 22%, var(--surf-3)) 0%, var(--surf-3) 100%);
  border-color: var(--warn);
  border-top: 4px solid var(--warn);
  transform: translateY(-12px);
}
.kh-podium-item.gold:hover { transform: translateY(-16px); }
.kh-podium-item.silver {
  background: linear-gradient(180deg, color-mix(in srgb, var(--ink-3) 14%, var(--surf-3)) 0%, var(--surf-3) 100%);
  border-color: var(--ink-3);
  border-top: 4px solid var(--ink-3);
}
.kh-podium-item.bronze {
  background: linear-gradient(180deg, color-mix(in srgb, #c2410c 18%, var(--surf-3)) 0%, var(--surf-3) 100%);
  border-color: #c2410c;
  border-top: 4px solid #c2410c;
}

/* --- 评级矩阵 cell --- */
.kh-matrix {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}
.kh-cell {
  padding: 12px 14px;
  background: var(--surf-3);
  border: 1px solid var(--ink-6);
  border-left: 4px solid var(--ink-4);
  border-radius: 6px;
  font-size: 12.5px;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.kh-cell:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px color-mix(in srgb, var(--ink-1) 8%, transparent);
}
.kh-cell .who { font-weight: 700; font-size: 14px; color: var(--ink-1); letter-spacing: -0.2px; }
.kh-cell .dept {
  font-family: var(--f-mono); font-size: 10px;
  color: var(--ink-4); letter-spacing: 0.04em;
  margin: 4px 0 8px;
  display: flex; justify-content: space-between; align-items: center;
}
.kh-cell-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px 8px;
  font-family: var(--f-mono); font-size: 11px;
}
.kh-cell-grid span { color: var(--ink-4); }
.kh-cell-grid b { color: var(--ink-1); font-weight: 600; }

.kh-cell-A   { border-left-color: var(--good); background: linear-gradient(135deg, color-mix(in srgb, var(--good) 8%, var(--surf-3)) 0%, var(--surf-3) 60%); }
.kh-cell-B   { border-left-color: var(--warn); background: linear-gradient(135deg, color-mix(in srgb, var(--warn) 8%, var(--surf-3)) 0%, var(--surf-3) 60%); }
.kh-cell-C   { border-left-color: #ea580c;     background: linear-gradient(135deg, color-mix(in srgb, #ea580c     8%, var(--surf-3)) 0%, var(--surf-3) 60%); }
.kh-cell-RED { border-left-color: var(--bad);  background: linear-gradient(135deg, color-mix(in srgb, var(--bad)  8%, var(--surf-3)) 0%, var(--surf-3) 60%); }

/* --- 数据源说明 row --- */
.kh-source { display: flex; flex-direction: column; gap: 8px; padding: 4px 0; }
.kh-source-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 8px 12px;
  background: color-mix(in srgb, var(--acc) 5%, transparent);
  border-left: 3px solid var(--acc);
  border-radius: 4px;
  font-size: 12.5px; line-height: 1.6; color: var(--ink-2);
}
.kh-source-row b {
  flex-shrink: 0; min-width: 84px;
  color: var(--ink-1); font-weight: 700;
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
  padding-top: 1px;
}
.kh-source-row code {
  font-family: var(--f-mono);
  background: var(--surf-1);
  padding: 1px 6px; border-radius: 3px;
  font-size: 11.5px;
  color: var(--acc);
  border: 1px solid var(--ink-6);
}