/* ============================================================
   舆情工作量数据驾驶舱 — 基于「工作台设计系统」
   暗色默认 / 亮色覆盖 / 五套强调色 / 流体材质卡片 / 玻璃面板
   ============================================================ */

:root {
  color-scheme: dark;
  --bg: #050706;
  --panel: #0c1210;
  --panel-2: #101714;
  --panel-soft: #151c19;
  --line: rgba(187, 210, 200, 0.16);
  --line-bright: rgba(194, 217, 205, 0.25);
  --text: #f5f7f6;
  --muted: #8e9994;

  /* 静海 Ocean（默认） */
  --accent-h: 202; --accent-s: 78%; --accent-soft-s: 58%;
  --accent-rgb: 42 169 232;
  --accent-foreground: #f4fbff;
  --accent-ink: #03212e;

  /* 强调色明暗九档：--accent-50 最浅 → --accent-900 最深（正文规范） */
  --accent-50: hsl(var(--accent-h) var(--accent-soft-s) 94%);
  --accent-100: hsl(var(--accent-h) var(--accent-soft-s) 86%);
  --accent-200: hsl(var(--accent-h) var(--accent-soft-s) 74%);
  --accent-300: hsl(var(--accent-h) var(--accent-soft-s) 62%);
  --accent-400: hsl(var(--accent-h) var(--accent-soft-s) 50%);
  --accent-500: hsl(var(--accent-h) var(--accent-s) 46%);
  --accent-600: hsl(var(--accent-h) var(--accent-s) 38%);
  --accent-700: hsl(var(--accent-h) var(--accent-s) 30%);
  --accent-800: hsl(var(--accent-h) var(--accent-s) 24%);
  --accent-900: hsl(var(--accent-h) var(--accent-s) 17%);

  /* 动效 Token（补充篇 2.1/2.2：统一节奏，禁止一处一个时长） */
  --dur-instant: 80ms;    /* 状态闪烁、按下反馈 */
  --dur-fast:    150ms;   /* hover 颜色、opacity、边框 */
  --dur-base:    220ms;   /* transform、面板展开、下拉 */
  --dur-slow:    340ms;   /* 视图切换、抽屉进出、折叠 */
  --ease-enter:  cubic-bezier(.22, .7, .28, 1);  /* 进入/到达：减速 */
  --ease-exit:   cubic-bezier(.55, 0, 1, .45);   /* 离开/消失：加速 */
  --ease-feedback: ease-out;                     /* 悬浮/按下反馈 */

  /* 间距 Token（补充篇 3.1：4px 基准节奏） */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-12: 48px;

  --c-cyan: #27e8df;
  --c-green: #3ddc97;
  --c-amber: #f5a94d;
  --c-violet: #9d7bff;
  --c-rose: #ff5c8a;
  --c-red: #ff6b6b;
  --c-slate: #8d9996;

  --font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---- 强调色套装 ---- */
html[data-accent="emerald"] {
  --accent-h: 158; --accent-s: 76%; --accent-soft-s: 54%;
  --accent-rgb: 35 226 160; --accent-foreground: #f4fff9; --accent-ink: #04241a;
}
html[data-accent="iris"] {
  --accent-h: 263; --accent-s: 68%; --accent-soft-s: 50%;
  --accent-rgb: 132 94 231; --accent-foreground: #fbf8ff; --accent-ink: #180b33;
}
html[data-accent="amber"] {
  --accent-h: 36; --accent-s: 84%; --accent-soft-s: 62%;
  --accent-rgb: 230 157 35; --accent-foreground: #fffaf0; --accent-ink: #2b1b05;
  --accent-300: hsl(36 80% 58%);
}
html[data-accent="sakura"] {
  --accent-h: 344; --accent-s: 76%; --accent-soft-s: 56%;
  --accent-rgb: 224 82 124; --accent-foreground: #fff7fa; --accent-ink: #30091a;
}

/* ---- 亮色主题 ---- */
html[data-theme-resolved="light"] {
  color-scheme: light;
  --bg: #e9edeb;
  --panel: #f7f9f8;
  --panel-2: #f0f3f1;
  --panel-soft: #e7ece9;
  --line: rgba(43, 61, 54, 0.11);
  --line-bright: rgba(43, 61, 54, 0.17);
  --text: #18221f;
  --muted: #67726e;
  --c-slate: #7b8682;
}

* { box-sizing: border-box; }
html, body { min-width: 1180px; min-height: 700px; }

/* ============ 交互状态（补充篇规范落地） ============ */
/* z-index 分层标尺：0 内容 / 10 吸顶 / 100 抽屉 / 200 遮罩+弹窗 / 300 提示（弹窗内可悬浮）/ 1000 调试 */
:root { --z-sticky: 10; --z-tooltip: 300; --z-drawer: 100; }
button:not(:disabled), .chip, .nav-item:not(.ghost), .data-table th, .accent-dot, .person-card { cursor: pointer; }
.nav-item.ghost { cursor: default; }
/* 键盘焦点环：2px 环 + 2px 留白，跟随强调色 */
:where(button, .chip, .nav-item, .accent-dot, .data-table th, .side-collapse, .person-card, .round-btn):focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px rgb(var(--accent-rgb) / .8);
}
/* 按下反馈：只动 transform，不改布局尺寸 */
.chip:active { transform: scale(.96); }
.round-btn:active, .side-collapse:active { transform: scale(.96); }
.nav-item:active:not(.ghost) { transform: scale(.98); background: rgba(255,255,255,.08); }
.person-card:active { transform: scale(.98); }
button:disabled, .chip:disabled { opacity: .45; pointer-events: none; cursor: not-allowed; }
body {
  margin: 0;
  overflow: hidden;
  font-family: var(--font);
  color: var(--text);
  background:
    radial-gradient(circle at 50% -30%, rgba(37, 86, 65, .12), transparent 43%),
    linear-gradient(90deg, #07100b 0, #020403 14%, #020302 86%, #07100b 100%);
  -webkit-font-smoothing: antialiased;
}
html[data-theme-resolved="light"] body {
  background:
    radial-gradient(circle at 49% -20%, rgb(var(--accent-rgb) / .075), transparent 39%),
    radial-gradient(circle at 0 58%, rgba(92, 112, 105, .055), transparent 30%),
    linear-gradient(110deg, #e3e8e6 0, #f1f4f2 17%, #f4f6f5 82%, #e5eae8 100%);
}

::selection { background: rgb(var(--accent-rgb) / .35); }
button { font-family: inherit; color: inherit; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ================= 应用外壳 ================= */
.app-shell {
  width: min(1900px, calc(100vw - 36px));
  height: min(1020px, calc(100vh - 32px));
  margin: max(16px, calc((100vh - 1020px) / 2)) auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: 62px auto 1fr 30px;
  grid-template-areas:
    "topbar    topbar"
    "sidebar   toolbar"
    "sidebar   content"
    "statusbar statusbar";
  gap: 14px;
}
.topbar { grid-area: topbar; }
.sidebar { grid-area: sidebar; }
.toolbar { grid-area: toolbar; }
.content { grid-area: content; }
.statusbar { grid-area: statusbar; }
@media (max-height: 820px) {
  .app-shell { height: calc(100vh - 20px); margin-block: 10px; }
}

/* ================= 顶栏 ================= */
.topbar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 20px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(17, 24, 21, .92), rgba(8, 13, 11, .96));
  box-shadow: inset 0 1px rgba(255,255,255,.03), 0 18px 50px rgba(0,0,0,.28);
}
html[data-theme-resolved="light"] .topbar {
  background: linear-gradient(145deg, rgba(250,251,250,.9), rgba(239,243,241,.94));
  box-shadow: inset 0 1px rgba(255,255,255,.9), 0 14px 34px rgba(39,57,50,.08);
}
.brand { display: flex; align-items: center; gap: 13px; min-width: 0; }
.brand-mark {
  width: 38px; height: 38px; border-radius: 12px; flex: none;
  display: grid; place-items: center;
  color: var(--accent-foreground);
  background: linear-gradient(145deg, var(--accent-700), var(--accent-900));
  border: 1px solid rgb(var(--accent-rgb) / .35);
  box-shadow: 0 0 18px rgb(var(--accent-rgb) / .22), inset 0 1px rgba(255,255,255,.14);
}
.brand-mark svg { width: 20px; height: 20px; }
.brand-title { font-size: 17px; font-weight: 650; letter-spacing: .02em; white-space: nowrap; }
.brand-sub { font-size: 11.5px; color: var(--muted); margin-top: 1px; white-space: nowrap; }
.period-chip {
  height: 26px; padding: 0 11px; border-radius: 13px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--muted);
  border: 1px solid var(--line); background: rgba(255,255,255,.03);
}
.period-chip .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgb(var(--accent-rgb));
  box-shadow: 0 0 8px rgb(var(--accent-rgb) / .8);
  animation: pulseDot 2.4s ease-in-out infinite;
}
@keyframes pulseDot { 50% { opacity: .35; } }

.topbar-spacer { flex: 1; }

/* ================= 左侧导航栏 ================= */
.sidebar {
  --side-w: 238px;
  width: var(--side-w);
  min-width: 0;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(17, 24, 21, .94), rgba(8, 13, 11, .97));
  box-shadow: inset 0 1px rgba(255,255,255,.03), 0 18px 50px rgba(0,0,0,.28);
  overflow: hidden;
  transition: width var(--dur-slow) cubic-bezier(.3, .75, .25, 1), border-color var(--dur-slow), background-color var(--dur-slow);
}
html[data-theme-resolved="light"] .sidebar {
  background: linear-gradient(180deg, rgba(250,251,250,.94), rgba(239,243,241,.96));
  box-shadow: inset 0 1px rgba(255,255,255,.9), 0 14px 34px rgba(39,57,50,.08);
}
.sidebar.collapsed { --side-w: 74px; }
.side-inner { display: flex; flex-direction: column; height: 100%; padding: 14px 12px; gap: 6px; }
.side-group-label {
  font-size: 10.5px; color: var(--muted); letter-spacing: .14em;
  padding: 6px 10px 4px; white-space: nowrap; overflow: hidden;
  transition: opacity var(--dur-fast), padding var(--dur-slow);
}
.sidebar.collapsed .side-group-label { opacity: 0; padding-inline: 0; }
.side-nav { display: flex; flex-direction: column; gap: 6px; }

.nav-item {
  position: relative;
  height: 46px; border-radius: 14px;
  display: flex; align-items: center; gap: 12px; padding: 0 13px;
  color: var(--muted); cursor: pointer;
  border: 1px solid transparent; background: transparent;
  font-size: 13.5px; font-weight: 600; letter-spacing: .03em;
  white-space: nowrap; overflow: hidden; text-align: left;
  transition: color var(--dur-fast), background-color var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast), padding var(--dur-slow), gap var(--dur-slow);
}
.nav-item .nav-ico {
  flex: none; width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .06);
  color: var(--muted);
  transition: color var(--dur-fast), background-color var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.nav-item:hover .nav-ico { background: rgba(255, 255, 255, .09); color: var(--text); }
.nav-item.active .nav-ico {
  color: var(--accent-foreground);
  background: linear-gradient(145deg, var(--accent-700), var(--accent-900));
  border-color: rgb(var(--accent-rgb) / .35);
  box-shadow: 0 0 12px rgb(var(--accent-rgb) / .25);
}
.nav-item .nav-ico svg { width: 17px; height: 17px; }
.nav-item .nav-label { overflow: hidden; text-overflow: ellipsis; transition: opacity var(--dur-fast), width var(--dur-slow); }
.nav-item .nav-badge {
  margin-left: auto; flex: none;
  font-family: var(--mono); font-size: 10px; color: var(--muted);
  border: 1px solid var(--line); border-radius: 8px; padding: 2px 7px;
  transition: opacity var(--dur-fast), width var(--dur-slow); overflow: hidden;
}
.nav-item:hover { color: var(--text); background: rgba(255,255,255,.045); }
.nav-item.active {
  color: #f3f6f5;
  background: linear-gradient(90deg, rgba(255,255,255,.11), rgba(255,255,255,.055));
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 5px 18px rgba(0,0,0,.25);
}
.nav-item.active::before {
  content: ""; position: absolute; left: -1px; top: 11px; bottom: 11px; width: 3px;
  border-radius: 0 2px 2px 0;
  background: linear-gradient(180deg, var(--accent-400), var(--accent-700));
  box-shadow: 0 0 10px rgb(var(--accent-rgb) / .55);
}
html[data-theme-resolved="light"] .nav-item.active {
  color: #1c2622;
  background: linear-gradient(90deg, rgba(43,61,54,.09), rgba(43,61,54,.04));
  border-color: rgba(43,61,54,.14);
  box-shadow: 0 5px 14px rgba(39,57,50,.12);
}
.nav-item.ghost {
  opacity: .5; cursor: default;
  border: 1px dashed var(--line); background: transparent;
}
.nav-item.ghost:hover { color: var(--muted); background: transparent; }
.nav-item.ghost .plus { font-size: 14px; line-height: 1; }

.sidebar.collapsed .nav-item { justify-content: center; padding: 0; gap: 0; }
.sidebar.collapsed .nav-label, .sidebar.collapsed .nav-badge { opacity: 0; width: 0; margin-left: 0; padding: 0; border: none; overflow: hidden; }
.sidebar.collapsed .nav-item.active::before { left: -1px; }

.side-spacer { flex: 1; }
.side-collapse {
  height: 38px; border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: var(--muted); cursor: pointer;
  display: flex; align-items: center; gap: 10px; padding: 0 13px;
  font-size: 12px; white-space: nowrap; overflow: hidden;
  transition: color var(--dur-fast), border-color var(--dur-fast), background-color var(--dur-fast), padding var(--dur-slow);
}
html[data-theme-resolved="light"] .side-collapse { background: rgba(0,0,0,.03); }
.side-collapse:hover { color: var(--text); border-color: var(--line-bright); }
.side-collapse svg { width: 15px; height: 15px; flex: none; transition: transform var(--dur-slow) cubic-bezier(.3,.75,.25,1); }
.collapse-label { overflow: hidden; transition: opacity var(--dur-fast), width var(--dur-slow); }
.sidebar.collapsed .side-collapse { justify-content: center; padding: 0; }
.sidebar.collapsed .side-collapse svg { transform: rotate(180deg); }
.sidebar.collapsed .collapse-label { opacity: 0; width: 0; }

/* 顶栏操作 */
.top-actions { display: flex; align-items: center; gap: 8px; }
.round-btn {
  width: 43px; height: 43px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: linear-gradient(145deg, #141b18, #0b100e);
  box-shadow: inset 0 1px rgba(255,255,255,.03);
  color: var(--muted); cursor: pointer;
  display: grid; place-items: center;
  transition: color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
}
html[data-theme-resolved="light"] .round-btn { background: linear-gradient(145deg, #fdfdfd, #eef2f0); }
.round-btn:hover { color: var(--text); border-color: var(--line-bright); transform: translateY(-1px); }
.round-btn svg { width: 18px; height: 18px; }
.round-btn .icon-swap { transition: transform .5s cubic-bezier(.4,0,.2,1), opacity .25s; }
html[data-theme-resolved="light"] .round-btn .icon-swap { transform: rotate(180deg); }

.accent-set { display: flex; align-items: center; gap: 5px; padding: 0 8px 0 4px; }
.accent-dot {
  width: 20px; height: 20px; border-radius: 50%; cursor: pointer;
  border: 1px solid transparent; padding: 0;
  display: grid; place-items: center; position: relative;
  transition: transform var(--dur-fast);
}
.accent-dot::before {
  content: ""; width: 12px; height: 12px; border-radius: 50%;
  background: var(--dot-c);
  box-shadow: 0 0 8px var(--dot-c);
}
.accent-dot:hover { transform: scale(1.15); }
.accent-dot.active { border-color: rgb(var(--accent-rgb) / .65); box-shadow: 0 0 10px rgb(var(--accent-rgb) / .25); }

/* ================= 工具条（筛选 chips） ================= */
.toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(12, 18, 16, .78);
}
.toolbar-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 1 1 100%; }
html[data-theme-resolved="light"] .toolbar { background: rgba(247,249,248,.72); }
.toolbar-label {
  flex: none; font-size: 11.5px; color: var(--muted);
  letter-spacing: .06em; padding: 0 6px 0 2px; white-space: nowrap;
}
.chip {
  flex: none; height: 30px; padding: 0 13px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.025);
  color: var(--muted); font-size: 12.5px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  transition: color var(--dur-fast), background var(--dur-fast), border-color var(--dur-fast);
  white-space: nowrap;
}
html[data-theme-resolved="light"] .chip {
  border-color: rgba(43,61,54,.12); background: rgba(255,255,255,.5); color: #4b5652;
}
.chip:hover { color: var(--text); border-color: var(--line-bright); }
.chip.active {
  color: var(--accent-foreground);
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--accent-700) 78%, transparent),
    color-mix(in srgb, var(--accent-900) 82%, transparent));
  border-color: rgb(var(--accent-rgb) / .27);
  box-shadow: 0 4px 12px rgb(var(--accent-rgb) / .18);
}
.chip .chip-dot { width: 7px; height: 7px; border-radius: 2px; background: var(--chip-c, var(--muted)); opacity: .9; }
.chip.sm { height: 26px; padding: 0 10px; font-size: 11px; border-radius: 9px; }
.chip-sep { flex: none; width: 1px; height: 18px; background: var(--line); margin: 0 2px; }

/* ================= 内容区 ================= */
.content {
  overflow-y: auto; overflow-x: hidden;
  padding-right: 4px;
  scrollbar-gutter: stable;
  scrollbar-width: thin; scrollbar-color: rgba(150,170,160,.25) transparent;
}
.content::-webkit-scrollbar { width: 8px; }
.content::-webkit-scrollbar-thumb { background: rgba(150,170,160,.22); border-radius: 4px; }
.view { display: flex; flex-direction: column; gap: 14px; min-height: 100%; }
.view.hidden { display: none; }
.view-inner { display: flex; flex-direction: column; gap: 14px; min-height: 100%; }

/* ================= 面板 ================= */
.panel {
  background: linear-gradient(145deg, rgba(17, 24, 21, .97), rgba(8, 13, 11, .98));
  border: 1px solid var(--line-bright);
  border-radius: 20px;
  box-shadow: inset 0 1px rgba(255,255,255,.025), 0 24px 70px rgba(0,0,0,.35);
  padding: 18px 20px;
}
html[data-theme-resolved="light"] .panel {
  background: linear-gradient(145deg, rgba(250,251,250,.94), rgba(239,243,241,.96));
  border-color: rgba(43,61,54,.13);
  box-shadow: inset 0 1px rgba(255,255,255,.9), 0 18px 46px rgba(39,57,50,.09);
}
.panel-head { display: flex; align-items: center; gap: 10px 16px; margin-bottom: 16px; flex-wrap: wrap; }
.panel-head .panel-icon {
  width: 30px; height: 30px; border-radius: 10px; flex: none;
  display: grid; place-items: center; color: var(--accent-foreground);
  background: linear-gradient(145deg, var(--accent-700), var(--accent-900));
  border: 1px solid rgb(var(--accent-rgb) / .28);
}
.panel-head .panel-icon svg { width: 15px; height: 15px; }
.panel-title { font-size: 14.5px; font-weight: 650; letter-spacing: .03em; }
.panel-sub { font-size: 11.5px; color: var(--muted); }
.panel-head .spacer { flex: 1; }
.panel-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* 区块标题条：与上下文拉开呼吸间距（上 12 + 视图 gap 14 = 26px，下 4 + gap = 18px） */
.section-bar { display: flex; align-items: baseline; gap: 10px; margin: 12px 2px 4px; }
.section-bar .sec-no {
  font-family: var(--mono); font-size: 11px; color: var(--accent-foreground);
  background: linear-gradient(145deg, var(--accent-700), var(--accent-900));
  border-radius: 7px; padding: 3px 8px; letter-spacing: .08em;
}
.section-bar .sec-title { font-size: 15px; font-weight: 680; letter-spacing: .02em; }
.section-bar .sec-sub { font-size: 11.5px; color: var(--muted); }

/* ================= 流体材质指标卡 ================= */
.metric-card {
  --m-a: #27e8df; --m-b: #11a9c8; --m-c: #17346f;
  --metric-opacity: .52; /* 流体场不透明度 45%–100% */
  --metric-blur: 26px;   /* 模糊强度 4–30px */
  --metric-speed: 16s;   /* 流动速度（duration）0.5×–3× */
  position: relative; overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 1px rgba(255,255,255,.13), 0 15px 35px rgba(0,0,0,.3);
  background: rgba(12, 18, 16, .9);
  transform: perspective(900px) translateY(var(--metric-lift, 0px))
             rotateX(var(--metric-rx, 0deg)) rotateY(var(--metric-ry, 0deg)) scale(var(--metric-scale, 1));
  transition: transform var(--dur-base) var(--ease-feedback), border-color var(--dur-base), box-shadow var(--dur-base), filter var(--dur-base);
}
.metric-card::before {
  content: ""; position: absolute; inset: -42%;
  background:
    radial-gradient(38% 55% at 22% 30%, var(--m-a), transparent 60%),
    radial-gradient(46% 60% at 80% 24%, var(--m-b), transparent 62%),
    radial-gradient(52% 70% at 55% 92%, var(--m-c), transparent 66%);
  filter: blur(var(--metric-blur)) saturate(1.25);
  opacity: var(--metric-opacity);
  animation: metricFluidDrift var(--metric-speed) cubic-bezier(.45,.05,.55,.95) infinite alternate;
}
.metric-card::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(90% 60% at 50% -12%, rgba(255,255,255,.14), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(0,0,0,.22) 78%);
}
.metric-card[data-material="original"] { --m-a: #ff4aa9; --m-b: #ff8849; --m-c: #aa49ff; }
.metric-card[data-material="rain"]    { --m-a: #2e66ff; --m-b: #ff693f; --m-c: #4721ac; }
.metric-card[data-material="chrome"]  { --m-a: #f4f8f6; --m-b: #8d9996; --m-c: #11172b; --metric-opacity: .34; }
.metric-card[data-material="accent"] {
  --m-a: rgb(var(--accent-rgb));
  --m-b: hsl(var(--accent-h) var(--accent-soft-s) 55%);
  --m-c: hsl(var(--accent-h) var(--accent-s) 30%);
}
.metric-card:hover {
  --metric-lift: -6px; --metric-scale: 1.015;
  border-color: rgba(255,255,255,.34);
  box-shadow: inset 0 1px rgba(255,255,255,.22), 0 22px 48px rgba(0,0,0,.42),
              0 0 24px rgb(var(--accent-rgb) / .08);
  filter: brightness(1.055) saturate(1.08);
}
html[data-theme-resolved="light"] .metric-card {
  background: rgba(255,255,255,.72);
  border-color: rgba(43,61,54,.14);
  box-shadow: inset 0 1px rgba(255,255,255,.95), 0 14px 32px rgba(39,57,50,.1);
}
html[data-theme-resolved="light"] .metric-card::before { opacity: .38; }
html[data-theme-resolved="light"] .metric-card::after {
  background:
    radial-gradient(90% 60% at 50% -12%, rgba(255,255,255,.5), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.1), rgba(0,0,0,.05) 78%);
}
.metric-card .mc-inner { position: relative; z-index: 1; padding: 19px 22px 17px; height: 100%; display: flex; flex-direction: column; }
.mc-label { font-size: 12px; color: var(--muted); letter-spacing: .05em; display: flex; align-items: center; gap: 7px; }
.mc-label .mc-icon { width: 16px; height: 16px; opacity: .85; }
.mc-value { font-family: var(--mono); font-size: 33px; font-weight: 700; line-height: 1.08; margin-top: 9px; letter-spacing: -.01em; }
.mc-value .unit { font-size: 14px; font-weight: 600; color: var(--muted); margin-left: 4px; }
.mc-foot { margin-top: auto; padding-top: 9px; font-size: 11.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.mc-foot .trend { font-family: var(--mono); color: var(--c-green); }
.mc-foot .trend.down { color: var(--c-rose); }
.mc-spark { position: absolute; right: 16px; top: 16px; width: 96px; height: 34px; opacity: .9; }

.cards-row { display: grid; gap: 14px; }
.cards-row.c4 { grid-template-columns: repeat(4, 1fr); }
.cards-row.c6 { grid-template-columns: repeat(6, 1fr); }
.cards-row.c5 { grid-template-columns: repeat(5, 1fr); }

/* ================= 图表 ================= */
.chart-wrap { position: relative; width: 100%; }
.heat-host { display: flex; justify-content: center; }
.chart-wrap svg { display: block; width: 100%; height: auto; }
/* 文字/线条/格子样式作用到所有图表 SVG（含 heat-host、hStack、miniBars 等非 .chart-wrap 容器），
   跟随主题：暗色白字、亮色黑字，避免 SVG 默认黑色在深色面板上看不清 */
svg text { font-family: var(--font); }
svg .axis-label { fill: var(--muted); font-size: 10.5px; }
svg .val-text { fill: var(--text); font-weight: 600; font-family: ui-monospace, Menlo, monospace; }
svg .heat-text { fill: var(--text); font-weight: 600; font-family: ui-monospace, Menlo, monospace; }
svg .bar-label { fill: var(--muted); font-size: 9px; font-family: ui-monospace, Menlo, monospace; pointer-events: none; }
svg .axis-line { stroke: var(--line); }
/* 构成图组间淡虚线分隔 */
svg .group-divider { stroke: var(--line); stroke-dasharray: 3 4; }
/* 人效折线 8H 阈值线 */
svg .thr-line { stroke: var(--c-red); stroke-dasharray: 5 4; stroke-width: 1.4; }
svg .thr-label { fill: var(--c-red); font-size: 10px; font-weight: 600; }
svg .bar-rect { transition: opacity var(--dur-fast); }
svg .bar-rect:hover { opacity: .82; }
/* 柱状图生长动画：切月份/维度刷新时从底部（纵向）或左侧（横向条）长出；热力格（.heat-cell）排除 */
svg rect.bar-rect:not(.heat-cell) {
  transform-box: fill-box;
  transform-origin: bottom;
  animation: barGrow .38s var(--ease-feedback) backwards;
}
svg rect.bar-rect.bar-h { transform-origin: left; animation-name: barGrowX; }
@keyframes barGrow { from { transform: scaleY(0); } }
@keyframes barGrowX { from { transform: scaleX(0); } }
/* 柱顶数值标签：柱长完后淡入上浮 */
svg .bar-label { animation: labelIn .3s ease .26s backwards; }
@keyframes labelIn { from { opacity: 0; transform: translateY(4px); } }
/* barLine 折线：从左到右绘制 + 折线点淡入 */
svg .line-path { animation: lineDraw .6s var(--ease-feedback) .15s forwards; }
@keyframes lineDraw { to { stroke-dashoffset: 0; } }
svg .line-dot { animation: dotIn .3s ease .45s backwards; }
@keyframes dotIn { from { opacity: 0; } }
/* 图例切换重绘：不再播放生长动画（silent 重绘；容器为 .chart-wrap-host / .rank-host） */
.redraw svg rect.bar-rect:not(.heat-cell),
.redraw svg .bar-label,
.redraw svg .line-path,
.redraw svg .line-dot { animation: none; }
.chart-empty { color: var(--muted); font-size: 12px; text-align: center; padding: 30px 0; }

.legend { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); cursor: pointer; user-select: none; transition: color var(--dur-fast), opacity var(--dur-fast); border-radius: 6px; }
.legend-item:hover { color: var(--text); }
.legend-item:focus-visible { outline: 2px solid rgb(var(--accent-rgb) / .8); outline-offset: 2px; }
.legend-item.off { opacity: .38; text-decoration: line-through; }
.legend-item .sw { width: 10px; height: 10px; border-radius: 3px; }
/* 图例点击隐藏对应系列（rect/折线/数值标签） */
.panel.hide-s0 svg .series-0, .panel.hide-s1 svg .series-1, .panel.hide-s2 svg .series-2,
.panel.hide-s3 svg .series-3, .panel.hide-s4 svg .series-4, .panel.hide-s5 svg .series-5,
.panel.hide-s6 svg .series-6, .panel.hide-s7 svg .series-7, .panel.hide-s8 svg .series-8,
.panel.hide-s9 svg .series-9, .panel.hide-s10 svg .series-10, .panel.hide-s11 svg .series-11,
.panel.hide-s12 svg .series-12, .panel.hide-s13 svg .series-13, .panel.hide-s14 svg .series-14,
.panel.hide-s15 svg .series-15, .panel.hide-s16 svg .series-16 { display: none; }

/* ================= 表格 ================= */
.table-wrap { overflow: auto; border-radius: 13px; border: 1px solid var(--line); max-height: 420px; }
table.data-table { border-collapse: collapse; width: 100%; font-size: 12px; }
.data-table th {
  position: sticky; top: 0; z-index: 2;
  background: var(--panel-2);
  color: var(--muted); font-weight: 600; font-size: 11.5px; letter-spacing: .04em;
  padding: 10px 12px; text-align: right; white-space: nowrap;
  border-bottom: 1px solid var(--line-bright);
  cursor: pointer; user-select: none;
}
.data-table th:first-child, .data-table td:first-child { text-align: left; }
.data-table th:hover { color: var(--text); }
.data-table th .sort-mark { opacity: .9; margin-left: 4px; font-family: var(--mono); }
.data-table td {
  padding: 9px 12px; text-align: right; white-space: nowrap;
  border-bottom: 1px solid rgba(150,170,160,.08);
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}
.data-table td.cell-txt { font-family: var(--font); }
.data-table td.cell-txt.strong { font-weight: 650; }
.data-table tbody tr:hover td { background: rgb(var(--accent-rgb) / .06); }
.data-table tbody tr.total-row td {
  background: rgb(var(--accent-rgb) / .07);
  font-weight: 700; border-top: 1px solid var(--line-bright);
}
.data-table td.hi { color: rgb(var(--accent-rgb)); font-weight: 700; }
.data-table td.rate-good { color: var(--c-green); }
.data-table td.rate-mid { color: var(--c-amber); }
.data-table td.rate-bad { color: var(--c-rose); }
/* 考勤排班班次着色 */
.data-table td.cell-rest { background: rgba(61, 220, 151, .16); color: var(--c-green); font-weight: 700; }
.data-table td.cell-leave { background: rgba(157, 123, 255, .16); color: var(--c-violet); font-weight: 700; }
.data-table td.cell-half { background: rgba(245, 169, 77, .16); color: var(--c-amber); font-weight: 700; }
.data-table td.cell-wkend { background: rgba(150, 170, 160, .08); }
/* 排班色块日历图 */
.sched-heat { display: grid; gap: 3px; align-items: center; overflow-x: auto; padding-bottom: 4px; }
.sched-heat .sh-name { font-size: 12px; color: var(--muted); padding-right: 6px; white-space: nowrap; }
.sched-heat .sh-name.sh-head { color: var(--text); font-weight: 650; }
.sched-heat .sh-day { text-align: center; font-size: 9px; color: var(--muted); line-height: 15px; }
.sched-heat .sh-day.sh-wkend { color: var(--c-rose); font-weight: 700; }
.sched-heat .sh-cell { width: 15px; height: 15px; border-radius: 3px; }
.sched-heat .sh-work { border: 1px solid rgba(150, 170, 160, .12); }
.sched-heat .sh-wkend { background: rgba(150, 170, 160, .12); }
.sched-heat .sh-rest { background: rgba(61, 220, 151, .6); }
.sched-heat .sh-leave { background: rgba(157, 123, 255, .6); }
.sched-heat .sh-half { background: rgba(245, 169, 77, .6); }
.person-tag { color: var(--muted); font-size: 11px; font-family: var(--font); }

/* ================= 人员面板 ================= */
.roster { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 14px; }
.person-card { grid-column: span 2; }
.person-card.wide { grid-column: span 5; }
.person-card[draggable="true"] { cursor: grab; }
.person-card.dragging { cursor: grabbing; opacity: .45; transform: scale(.97); box-shadow: 0 18px 44px rgba(0,0,0,.4); }
.person-card {
  position: relative;
  border-radius: 20px; padding: 16px 17px;
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(17,24,21,.96), rgba(9,14,12,.98));
  box-shadow: inset 0 1px rgba(255,255,255,.025), 0 14px 34px rgba(0,0,0,.28);
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-feedback), border-color var(--dur-base), box-shadow var(--dur-base);
}
html[data-theme-resolved="light"] .person-card {
  background: linear-gradient(145deg, rgba(250,251,250,.94), rgba(240,244,242,.96));
  box-shadow: inset 0 1px rgba(255,255,255,.9), 0 12px 26px rgba(39,57,50,.08);
}
.person-card:hover { transform: translateY(-2px); border-color: var(--line-bright); }
.person-card.active {
  border-color: rgb(var(--accent-rgb) / .55);
  box-shadow: 0 0 0 1px rgb(var(--accent-rgb) / .35), 0 14px 38px rgb(var(--accent-rgb) / .16);
}
.pc-top { display: flex; align-items: center; gap: 11px; }
.avatar {
  width: 40px; height: 40px; border-radius: 13px; flex: none;
  display: grid; place-items: center;
  font-size: 16px; font-weight: 700;
  color: var(--accent-foreground);
  background: linear-gradient(145deg, var(--accent-700), var(--accent-900));
  border: 1px solid rgb(var(--accent-rgb) / .3);
}
.pc-name { font-size: 14.5px; font-weight: 680; }
.pc-projects { font-size: 11px; color: var(--muted); margin-top: 2px; max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-spark { height: 34px; margin: 12px 0 10px; }
.pc-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }

/* ================= 业务分配一览表 ================= */
.alloc-table { display: flex; flex-direction: column; gap: 6px; }
.alloc-row {
  display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: center;
  padding: 8px 12px; border-radius: 11px;
  border: 1px solid var(--line); background: rgba(255,255,255,.025);
}
html[data-theme-resolved="light"] .alloc-row { background: rgba(255,255,255,.55); }
.alloc-row.alloc-head {
  font-size: 11px; color: var(--muted); letter-spacing: .05em;
  background: transparent; border-style: dashed; padding-block: 5px;
}
.alloc-name { font-weight: 650; font-size: 13px; }
.alloc-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.alloc-empty { color: var(--muted); font-size: 12px; }

/* ================= 弹窗（个人月度明细） ================= */
.modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(3, 7, 6, .6); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 26px;
  animation: modalFade .22s ease;
}
.modal {
  background: linear-gradient(145deg, rgba(15, 22, 19, .985), rgba(8, 13, 11, .995));
  border: 1px solid var(--line-bright); border-radius: 22px;
  box-shadow: inset 0 1px rgba(255, 255, 255, .03), 0 30px 90px rgba(0, 0, 0, .55);
  width: min(1120px, 94vw); max-height: 92vh;
  display: flex; flex-direction: column;
  animation: modalPop .26s cubic-bezier(.2, .9, .3, 1.1);
}
html[data-theme-resolved="light"] .modal {
  background: linear-gradient(145deg, rgba(250, 251, 250, .985), rgba(240, 243, 241, .995));
  border-color: rgba(43, 61, 54, .13);
  box-shadow: inset 0 1px rgba(255, 255, 255, .9), 0 24px 70px rgba(39, 57, 50, .2);
}
.modal-head { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--line); flex: none; }
.modal-close {
  margin-left: auto; width: 32px; height: 32px; border-radius: 10px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, .04); color: var(--muted); font-size: 13px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: transform var(--dur-base) var(--ease-feedback), color var(--dur-base), border-color var(--dur-base);
}
.modal-close:hover { color: var(--text); border-color: var(--line-bright); transform: rotate(90deg); }
.modal-close:focus-visible { outline: 2px solid var(--accent, #2aa8f0); outline-offset: 2px; }
.modal-body { padding: 18px 20px 24px; overflow-y: auto; }
/* 弹窗明细内容：统一纵向呼吸间距（stat-row / 图表行 / 上架运营之间） */
.detail-body { display: flex; flex-direction: column; gap: var(--sp-5); }
.detail-body .grid-2 { gap: var(--sp-5); } /* 并排图表面板左右也保持呼吸 */
@keyframes modalFade { from { opacity: 0; } }
@keyframes modalPop { from { opacity: 0; transform: scale(.94) translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .modal-overlay, .modal { animation: none; } }
.pc-listing { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.pc-listing-label { font-size: 10px; color: var(--muted); letter-spacing: .08em; margin-bottom: 6px; }
.pc-listing .pc-listing-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.pc-stat { border-radius: 10px; padding: 7px 8px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.05); }
html[data-theme-resolved="light"] .pc-stat { background: rgba(0,0,0,.03); border-color: rgba(43,61,54,.08); }
.pc-stat .k { font-size: 10px; color: var(--muted); }
.pc-stat .v { font-family: var(--mono); font-size: 14.5px; font-weight: 700; margin-top: 3px; }
.pc-stat .v.small { font-size: 12.5px; }

/* 人效维度图表布局：三列/四列网格 */
.charts-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.charts-3 > .panel { display: flex; flex-direction: column; }
.charts-3 .donut-grid { flex: 1; align-content: center; }
.proj-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: start; }
/* 项目占比环形图 */
.donut-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 6px; }
.donut-cell { display: flex; justify-content: center; padding: 4px 0; }
svg .donut-seg { transition: opacity var(--dur-fast); }
svg .donut-seg:hover { opacity: .78; }
svg .donut-name { fill: var(--text); font-size: 10px; font-weight: 650; }
svg .donut-val { fill: var(--muted); font-size: 8.5px; font-family: ui-monospace, Menlo, monospace; }

/* ================= 双栏网格 ================= */
.grid-2 { display: grid; grid-template-columns: 1.55fr 1fr; gap: 14px; }
.grid-2.even { grid-template-columns: 1fr 1fr; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
/* 项目维度各板块内部：面板/区块纵向呼吸间距，避免矩形贴在一起 */
.section-body { display: flex; flex-direction: column; gap: var(--sp-4); }

/* 个人明细头部 */
.detail-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.detail-name { font-size: 19px; font-weight: 700; }
.detail-projects { display: flex; flex-wrap: wrap; gap: 6px; }
.mini-tag {
  font-size: 11px; color: var(--muted); padding: 3px 9px; border-radius: 8px;
  border: 1px solid var(--line); background: rgba(255,255,255,.03);
}
html[data-theme-resolved="light"] .mini-tag { background: rgba(0,0,0,.03); }

/* 小型 KPI 块 */
.stat-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-3); }
.stat-block { border-radius: 14px; padding: 12px 14px; border: 1px solid var(--line); background: rgba(255,255,255,.025); }
html[data-theme-resolved="light"] .stat-block { background: rgba(255,255,255,.55); }
.stat-block .k { font-size: 11px; color: var(--muted); }
.stat-block .v { font-family: var(--mono); font-size: 20px; font-weight: 700; margin-top: 5px; }
.stat-block .v small { font-size: 12px; color: var(--muted); font-weight: 600; }
.stat-block .bar-track { height: 3px; border-radius: 2px; background: rgba(150,170,160,.18); margin-top: 7px; overflow: hidden; }
.stat-block .bar-fill { height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--accent-700), var(--accent-300)); }

/* ================= 状态栏 ================= */
.statusbar {
  display: flex; align-items: center; gap: 16px;
  padding: 0 14px; border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(12,18,16,.7);
  font-size: 11px; color: var(--muted);
}
html[data-theme-resolved="light"] .statusbar { background: rgba(247,249,248,.7); }
.statusbar .spacer { flex: 1; }
.statusbar .ok { display: inline-flex; align-items: center; gap: 6px; }
.statusbar .ok .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-green); box-shadow: 0 0 7px var(--c-green); }

/* ================= 悬浮提示 ================= */
#tooltip {
  position: fixed; z-index: var(--z-tooltip); pointer-events: none; opacity: 0;
  max-width: 260px; padding: 8px 11px; border-radius: 11px;
  background: rgba(10,15,13,.96);
  border: 1px solid var(--line-bright);
  box-shadow: 0 10px 28px rgba(0,0,0,.45);
  font-size: 11.5px; line-height: 1.55;
  transition: opacity var(--dur-instant);
  backdrop-filter: blur(6px);
}
html[data-theme-resolved="light"] #tooltip { background: rgba(252,253,252,.97); }
#tooltip.show { opacity: 1; }
#tooltip .tt-title { font-weight: 700; margin-bottom: 3px; color: var(--text); }
#tooltip .tt-row { display: flex; gap: 8px; color: var(--muted); }
#tooltip .tt-row b { color: var(--text); font-family: var(--mono); margin-left: auto; }

/* ================= 动画 ================= */
@keyframes metricFluidDrift {
  from { transform: translate3d(-4%, -3%, 0) rotate(0deg) scale(1); }
  50%  { transform: translate3d(4%, 2%, 0) rotate(7deg) scale(1.07); }
  to   { transform: translate3d(-2%, 4%, 0) rotate(-5deg) scale(1.03); }
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* 视图切换过渡：旧视图轻柔淡出，新视图缓入 */
@keyframes viewIn {
  from { opacity: .25; }
  to   { opacity: 1; }
}
@keyframes viewOut {
  from { opacity: 1; }
  to   { opacity: 0; transform: translateY(5px) scale(.998); }
}
.view { transition: opacity .18s ease; }
.view.view-in { animation: viewIn .34s cubic-bezier(.22, .7, .28, 1) both; }
.view.view-leave { animation: viewOut .15s ease both; pointer-events: none; }

/* 主题 / 强调色切换时的柔和过渡（零特异性，组件级规则可覆盖） */
:where(body, .topbar, .sidebar, .toolbar, .panel, .statusbar, .metric-card, .chip, .person-card,
  .stat-block, .mini-tag, .table-wrap, .data-table th, .data-table td, .nav-item, .side-collapse,
  .legend-item, .round-btn, .avatar, .period-chip, .pc-stat) {
  transition-property: background-color, border-color, color, box-shadow;
  transition-duration: .3s;
  transition-timing-function: ease;
}

@media (prefers-reduced-motion: reduce) {
  .metric-card::before { animation: none; }
  .view.view-in, .view.view-leave { animation: none; }
  svg rect.bar-rect:not(.heat-cell), svg .bar-label, svg .line-path, svg .line-dot { animation: none; }
  * { transition-duration: .01ms !important; }
}