/* ============================================================
   Solexus 中控平台 · 第二版（V2）
   设计方向：多色体系 — 主色（按钮/选中）、辅助色（导航/链接/焦点）、四个配色（图标/图表），边框保持中性
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;700&family=Geist+Mono:wght@400;500&display=swap");

:root {
  /* 表面 */
  --ground: #f1f4f8;
  --canvas: var(--ground);
  --bg-image: linear-gradient(165deg, #f7f9fc 0%, #eef2f7 55%, #e8edf4 100%);
  /* 浅色主题的底纹网格；深色主题换成极淡的白线 */
  --grid-line: rgba(15, 23, 42, 0.045);
  --amb-1: rgba(20, 184, 166, 0.12);
  --amb-2: rgba(59, 130, 246, 0.09);
  --amb-3: rgba(139, 92, 246, 0.07);
  --surface: #f7f9fb;
  --raised: #ffffff;
  --tray: #eef1f5;
  /* 边框与分割线一律中性灰，不随主色染色 */
  --border: #d7dde5;
  --rule: #e7ebf0;
  --control: #bfc7d2;
  --sidebar-bg: color-mix(in srgb, var(--raised) 86%, transparent);

  /* 文字 */
  --ink: #1b2333;
  --muted: #4f5b6e;
  --subtle: #6f7a8c;

  /* 多色体系：主色只管「按下去的东西」，辅助色管导航/链接/焦点，四个配色轮流给图标、指标点与图表系列 */
  --solid: #0d9488;
  --solid-2: #14b8a6;
  --solid-ink: #ffffff;
  --data: #2563eb;
  --data-soft: #e8effd;
  --hue-1: #3b82f6;
  --hue-2: #14b8a6;
  --hue-3: #8b5cf6;
  --hue-4: #f59e0b;
  /* 主按钮边框渐变：和按钮本色拉开色相 */
  --edge-a: #3b82f6;
  --edge-b: #8b5cf6;

  /* 状态色 — 仅用于信号 */
  --positive: #1f8a50;
  --negative: #d23f45;
  --warning: #c4701b;

  --pill-pos-bg: #e5f4ec; --pill-pos-ink: #145234;
  --pill-neg-bg: #fbe9ea; --pill-neg-ink: #8a1f24;
  --pill-warn-bg: #fcefe1; --pill-warn-ink: #7a420c;
  --pill-neu-bg: #e7ecf3;  --pill-neu-ink: #3f4a5c;

  /* 阴影 */
  /* 白底卡片靠三层把自己从底上托起来：顶边高光、贴地细影、远处柔影 */
  --shadow-card:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 0 0 1px rgba(20, 35, 60, 0.035),
    0 1px 2px rgba(20, 35, 60, 0.08),
    0 4px 10px -2px rgba(20, 35, 60, 0.06),
    0 14px 32px -10px rgba(20, 35, 60, 0.16);
  --shadow-lift:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 0 0 1px rgba(20, 35, 60, 0.05),
    0 2px 4px rgba(20, 35, 60, 0.08),
    0 10px 20px -4px rgba(20, 35, 60, 0.1),
    0 24px 48px -12px rgba(20, 35, 60, 0.22);
  --glass-blur: 0px;

  /* 形状 */
  --r-card: 12px;
  --r-ctrl: 8px;
  --r-pill: 999px;

  /* 度量 */
  --row-h: 44px;
  --sidebar-w: 248px;
  --gap: 12px;
  --pad: 24px;
  /* 控件三档高度：常规 / 小 / 迷你；同一行里的控件只用同一档 */
  --ctrl-h: 36px;
  --ctrl-h-sm: 30px;
  --ctrl-h-xs: 26px;

  /* 字号 */
  --fs-title: 24px;
  --fs-section: 16px;
  --fs-kpi: 30px;
  --fs-body: 14px;
  --fs-small: 12px;

  /* 字体 */
  --sans: "Geist", "Noto Sans SC", "PingFang SC", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============================================================
   主题 — 四套风格（data-tone 由 shell.js 按主题写入：light / dark）
   浅色：classic 晴彩（唯一一套白底，多色）
   深色：dark 深空 · aurora 极光 · dusk 暮霭
   ============================================================ */

/* 晴彩 — 白纸网格；青绿按钮、钴蓝导航，图标与图表轮流用蓝 / 青 / 紫 / 玫红，底上三团彩色柔光 */
[data-theme="classic"] {
  --ground: #f3f5f9;
  --bg-image: linear-gradient(160deg, #f9fafc 0%, #f2f5f9 50%, #eceff6 100%);
  --amb-1: rgba(20, 184, 166, 0.16);
  --amb-2: rgba(244, 63, 94, 0.1);
  --amb-3: rgba(99, 102, 241, 0.11);
  --hue-1: #3b82f6;
  --hue-2: #14b8a6;
  --hue-3: #8b5cf6;
  --hue-4: #f43f5e;
}

/* 深色共用 */
[data-tone="dark"] {
  --pill-pos-bg: rgba(76, 195, 138, 0.16); --pill-pos-ink: #9de6c1;
  --pill-neg-bg: rgba(242, 112, 122, 0.16); --pill-neg-ink: #ffb3ba;
  --pill-warn-bg: rgba(240, 163, 94, 0.16); --pill-warn-ink: #ffcf9f;
  --pill-neu-bg: rgba(255, 255, 255, 0.07); --pill-neu-ink: #c3cad6;
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 8px 24px rgba(0, 0, 0, 0.22);
  --shadow-lift: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 18px 40px rgba(0, 0, 0, 0.32);
  --grid-line: rgba(255, 255, 255, 0.028);
  color-scheme: dark;
}

/* 深空 — 石板蓝灰，长春花蓝 */
[data-theme="dark"] {
  --ground: #161d2b;
  --bg-image: linear-gradient(165deg, #1b2335 0%, #161d2b 50%, #121825 100%);
  --amb-1: rgba(91, 141, 239, 0.2);
  --amb-2: rgba(56, 189, 248, 0.09);
  --amb-3: rgba(139, 120, 255, 0.1);
  --surface: #1c2536;
  --raised: #222c40;
  --tray: #29344a;
  --border: #34415b;
  --rule: #2a3549;
  --control: #46546f;
  --ink: #e8edf5;
  --muted: #a6b1c3;
  --subtle: #8390a5;
  --solid: #3b6ef5;
  --solid-2: #5b8cff;
  --solid-ink: #ffffff;
  --data: #2dd4bf;
  --data-soft: rgba(45, 212, 191, 0.14);
  --hue-1: #60a5fa;
  --hue-2: #2dd4bf;
  --hue-3: #fbbf24;
  --hue-4: #f472b6;
  --edge-a: #22d3ee;
  --edge-b: #a78bfa;
  --positive: #4cc38a;
  --negative: #f2707a;
  --warning: #f0a35e;
}

/* 极光 — 靛紫夜空，紫罗兰 + 青绿极光 */
[data-theme="aurora"] {
  --ground: #1b1838;
  --bg-image: linear-gradient(150deg, #211c48 0%, #1b1838 45%, #152340 100%);
  --amb-1: rgba(139, 92, 246, 0.34);
  --amb-2: rgba(45, 212, 191, 0.18);
  --amb-3: rgba(236, 72, 153, 0.14);
  --surface: rgba(40, 34, 82, 0.6);
  --raised: rgba(52, 45, 100, 0.66);
  --tray: rgba(78, 66, 140, 0.36);
  --border: rgba(203, 213, 255, 0.16);
  --rule: rgba(203, 213, 255, 0.09);
  --control: rgba(203, 213, 255, 0.26);
  --sidebar-bg: rgba(27, 22, 60, 0.62);
  --ink: #f3f0ff;
  --muted: #c4bfe0;
  --subtle: #9c96c2;
  --solid: #7c5cf0;
  --solid-2: #9b7bff;
  --solid-ink: #ffffff;
  --data: #22d3ee;
  --data-soft: rgba(34, 211, 238, 0.14);
  --hue-1: #a78bfa;
  --hue-2: #22d3ee;
  --hue-3: #34d399;
  --hue-4: #f472b6;
  --edge-a: #22d3ee;
  --edge-b: #f472b6;
  --positive: #5eead4;
  --negative: #fb7185;
  --warning: #fdba74;
  --pill-neu-bg: rgba(203, 213, 255, 0.09); --pill-neu-ink: #d6d2f0;
  --glass-blur: 20px;
}

/* 暮霭 — 暖梅紫，珊瑚橘 */
[data-theme="dusk"] {
  --ground: #241b2b;
  --bg-image: linear-gradient(160deg, #2c2033 0%, #241b2b 50%, #1e1724 100%);
  --amb-1: rgba(255, 128, 102, 0.2);
  --amb-2: rgba(168, 85, 247, 0.15);
  --amb-3: rgba(255, 180, 140, 0.08);
  --surface: #2b2133;
  --raised: #33283c;
  --tray: #3b2e45;
  --border: #443c4b;
  --rule: #372f3e;
  --control: #57505e;
  --ink: #f8eff3;
  --muted: #cbbfc8;
  --subtle: #9f939c;
  --solid: #ff7a66;
  --solid-2: #ff9a85;
  --solid-ink: #2a141a;
  --data: #2dd4bf;
  --data-soft: rgba(45, 212, 191, 0.14);
  --hue-1: #fb7185;
  --hue-2: #fbbf24;
  --hue-3: #2dd4bf;
  --hue-4: #818cf8;
  --edge-a: #fbbf24;
  --edge-b: #818cf8;
  --positive: #6ee7b7;
  --negative: #ff6b81;
  --warning: #ffb36b;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  background-color: var(--ground);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
    var(--bg-image);
  background-size: 32px 32px, 32px 32px, auto;
  background-attachment: fixed;
  transition: background-color 0.4s ease;
}

html, body {
  font-family: var(--sans);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  font-size: var(--fs-body);
  line-height: 1.5;
}
body { background: transparent; }

button, input, select, textarea { font-family: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }

/* 数字列：等宽数字 */
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.mono { font-family: var(--mono); }

/* ============================================================
   布局：Open plane — 侧边栏直接落在地面上，无顶栏
   ============================================================ */
#app {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100vh;
}
#app.has-sidebar {
  grid-template-columns: var(--sidebar-w) 1fr;
}

/* 侧边栏 */
.sidebar {
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  box-shadow: 4px 0 24px color-mix(in srgb, var(--ink) 5%, transparent);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 2;
}

.brand {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 12px 12px 10px;
  border-bottom: 1px solid var(--rule);
}
.brand-head {
  display: block;
  text-decoration: none;
  color: inherit;
  min-width: 0;
  line-height: 0;
}
.brand-logo-panel {
  position: relative;
  background: transparent;
  box-sizing: border-box;
  min-height: 52px;
  height: 52px;
}
.brand-logo-img {
  width: 100%;
  height: 44px;
  max-height: 44px;
  object-fit: contain;
  object-position: left center;
  border-radius: 4px;
}
.brand-logo-img.brand-logo-for-classic,
.brand-logo-img.brand-logo-for-dark {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
}
.brand-logo-img.brand-logo-for-classic {
  display: none;
}
.brand-logo-img.brand-logo-for-dark {
  display: block;
}
[data-tone="light"] .brand-logo-img.brand-logo-for-classic {
  display: block;
}
[data-tone="light"] .brand-logo-img.brand-logo-for-dark {
  display: none;
}
.brand-version {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.02em;
  margin-top: 8px;
  padding-left: 2px;
}
.brand a.brand-link {
  display: block;
  line-height: 0;
  flex-shrink: 0;
}
.brand .mark {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  background: var(--solid);
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--solid-ink);
}
.brand .mark svg {
  width: 20px;
  height: 20px;
}
.brand-partner {
  width: 100%;
  line-height: 0;
  background: #fff;
  border-radius: 8px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 44px;
  box-sizing: border-box;
}
.brand .brand-logo {
  height: 28px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  display: block;
  background: transparent;
  border-radius: 0;
  padding: 0;
  box-sizing: content-box;
}
.brand .name {
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--ink);
}
.brand .ver {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--subtle);
  background: var(--tray);
  padding: 2px 6px;
  border-radius: 4px;
}

.nav {
  padding: 12px 12px;
  flex: 1;
  overflow-y: auto;
}
.nav-group-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--subtle);
  padding: 14px 12px 8px;
}
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  margin-bottom: 2px;
  border: none;
  background: transparent;
  transition: background 0.2s, color 0.2s, transform 0.25s var(--ease-out);
}
.nav-item:hover {
  background: color-mix(in srgb, var(--data) 8%, transparent);
  color: var(--ink);
  transform: translateX(2px);
}
.nav-item.active {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--data) 20%, transparent),
    color-mix(in srgb, var(--data) 6%, transparent));
  color: var(--ink);
  font-weight: 600;
}
.nav-item.active::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--data);
  box-shadow: 0 0 12px var(--data);
}
.nav-item.active svg { color: var(--data); }
.nav-item svg { width: 17px; height: 17px; stroke-width: 1.7; flex-shrink: 0; transition: transform 0.3s var(--ease-out); }
.nav-item:hover svg { transform: scale(1.08); }

/* 右上角用户区 — 固定定位，浮于内容之上 */
.top-user {
  position: fixed;
  top: 16px;
  right: 24px;
  z-index: 90;
}
.top-user .user-row {
  background: color-mix(in srgb, var(--raised) 80%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 12px 4px 4px;
  box-shadow: var(--shadow-card);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.25s var(--ease-out);
}
.top-user .user-row:hover {
  background: color-mix(in srgb, var(--raised) 92%, transparent);
  border-color: color-mix(in srgb, var(--data) 55%, var(--border));
  box-shadow: var(--shadow-lift);
  transform: translateY(-1px);
}
.top-user .avatar {
  background: linear-gradient(135deg, var(--solid), color-mix(in srgb, var(--solid) 55%, var(--data)));
  color: var(--solid-ink);
}
.top-user .user-pop-menu {
  top: calc(100% + 8px);
  bottom: auto;
  left: auto;
  right: 0;
  min-width: 160px;
}

.nav-foot {
  border-top: 1px solid var(--rule);
  padding: 12px;
}
.app-build {
  margin-top: 10px;
  font-size: 11px;
  font-family: var(--mono);
  color: var(--subtle);
  letter-spacing: 0.02em;
  user-select: all;
}
.app-build-login {
  margin-top: 16px;
  text-align: center;
  font-size: 11px;
  font-family: var(--mono);
  color: var(--subtle);
  user-select: all;
}
.user-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 8px;
  position: relative;
}
.user-row:hover { background: var(--tray); }
.user-pop-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 12px;
  right: 12px;
  z-index: 60;
  background: var(--raised);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-lift);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  overflow: hidden;
  animation: pop-in 0.22s var(--ease-out);
}
.user-pop-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  background: transparent;
  border: none;
  color: var(--ink);
  font-size: 13px;
  cursor: pointer;
  border-bottom: 1px solid var(--rule);
}
.user-pop-menu button:last-child { border-bottom: none; }
.user-pop-menu button:hover { background: var(--tray); }
.avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--tray);
  display: grid; place-items: center;
  font-weight: 600;
  font-size: 13px;
  flex-shrink: 0;
}
.user-meta { min-width: 0; }
.user-meta .uname { font-size: 13px; font-weight: 500; }
.user-meta .urole { font-size: 11px; color: var(--subtle); }

/* 风格切换器 — 六枚双色圆单选排成一行（前浅色、后深色），悬停显示名称 */
.theme-switcher {
  display: flex;
  justify-content: center;
  padding: 6px 0 4px;
}
.theme-dots {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-items: center;
  width: 100%;
}
.theme-dot-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 3px;
  border-radius: 50%;
}
.theme-dot-wrap::after {
  content: attr(data-label);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translate(-50%, 4px);
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--ink);
  color: var(--ground);
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s, transform 0.2s var(--ease-out);
  z-index: 5;
}
.theme-dot-wrap:hover::after {
  opacity: 1;
  transform: translate(-50%, 0);
}
.theme-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.theme-dot {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 68% 68%, var(--sw-ac) 0 36%, transparent 38%),
    var(--sw-bg);
  border: 1px solid color-mix(in srgb, var(--ink) 24%, transparent);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s var(--ease-out), box-shadow 0.2s ease;
}
.theme-dot-wrap:hover .theme-dot {
  transform: scale(1.15) rotate(-12deg);
}
.theme-radio:checked + .theme-dot {
  box-shadow:
    0 0 0 2px var(--ground),
    0 0 0 3.5px var(--data),
    0 0 12px color-mix(in srgb, var(--data) 60%, transparent);
}
.theme-radio:focus-visible + .theme-dot {
  outline: 2px solid var(--data);
  outline-offset: 3px;
}

/* 主内容区 */
.canvas {
  min-width: 0;
  width: 100%;
  padding: 24px 36px 60px;
}

main { width: 100%; min-width: 0; }

/* 页面标题行 */
.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px;
}
.page-head > div:first-child { flex: 1; min-width: 0; }
.page-title { font-size: var(--fs-title); font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; }
.page-sub { font-size: 14px; color: var(--muted); margin-top: 4px; }
.page-actions { display: flex; gap: 8px; align-items: center; }

/* ============================================================
   控件
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--ctrl-h);
  padding: 0 14px;
  border-radius: var(--r-ctrl);
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--border);
  background: var(--raised);
  color: var(--ink);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent);
  transition: background 0.15s, border-color 0.15s, box-shadow 0.2s, transform 0.2s var(--ease-out);
  white-space: nowrap;
}
.btn:hover { background: var(--tray); border-color: color-mix(in srgb, var(--data) 35%, var(--border)); }
.btn:active:not(:disabled) { transform: translateY(1px) scale(0.98); }
/* 主按钮的边框不用按钮本色：填充画在 padding-box，边框位置透出另一组渐变（--edge-a → --edge-b） */
.btn.primary {
  position: relative;
  overflow: hidden;
  border: 1px solid transparent;
  background:
    linear-gradient(135deg, var(--solid-2, var(--solid)), var(--solid)) padding-box,
    linear-gradient(135deg, var(--edge-a), var(--edge-b)) border-box;
  color: var(--solid-ink);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--solid) 26%, transparent),
              0 2px 10px -2px color-mix(in srgb, var(--edge-a) 30%, transparent);
}
.btn.primary:hover {
  background:
    linear-gradient(135deg, var(--solid), color-mix(in srgb, var(--solid) 85%, #000)) padding-box,
    linear-gradient(135deg, var(--edge-b), var(--edge-a)) border-box;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--solid) 36%, transparent),
              0 4px 16px -4px color-mix(in srgb, var(--edge-b) 45%, transparent);
  transform: translateY(-1px);
}
.btn.primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.35) 50%, transparent 65%);
  transform: translateX(-120%);
  pointer-events: none;
}
.btn.primary:hover::after { transform: translateX(120%); transition: transform 0.7s var(--ease-out); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--muted); }
.btn.ghost:hover { background: var(--tray); color: var(--ink); }
.btn-small { height: var(--ctrl-h-sm); padding: 0 12px; font-size: 12.5px; border-radius: 7px; gap: 5px; }
.btn-small svg { width: 13px; height: 13px; }
.input-sm, .select-sm { height: var(--ctrl-h-sm); font-size: 12.5px; padding: 0 10px; border-radius: 7px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn svg { width: 15px; height: 15px; }

.input, .select {
  height: var(--ctrl-h);
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-ctrl);
  background: var(--surface);
  font-size: 13px;
  width: 100%;
  transition: border-color 0.15s, box-shadow 0.2s;
}
.input:focus, .select:focus {
  outline: none;
  border-color: var(--data);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--data) 18%, transparent);
}
.input::placeholder { color: var(--subtle); }
.input.mono { font-family: var(--mono); font-size: 12.5px; }

.secret-wrap { position: relative; width: 100%; min-width: 0; }
.secret-wrap > .input { padding-right: 40px; width: 100%; box-sizing: border-box; }
.secret-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.secret-toggle:hover { color: var(--ink); background: var(--tray); }
.secret-toggle svg { width: 18px; height: 18px; display: block; }
.secret-toggle .eye-off { display: none; }
.secret-toggle.is-visible .eye-open { display: none; }
.secret-toggle.is-visible .eye-off { display: block; }

/* 预置站点下拉菜单 */
.site-url-wrap { position: relative; }
.site-url-wrap .input { width: 100%; padding-right: 36px; }
.site-preset-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
  border-radius: var(--r-ctrl);
  padding: 0;
  line-height: 1;
}
.site-preset-btn:hover { color: var(--ink); background: var(--tray); }
.preset-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--raised);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  overflow: hidden;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
/* 挂到 body，避免 aurora 等磨砂主题下 panel 的 backdrop-filter 篡改 fixed 定位 */
.preset-menu-portal {
  position: fixed;
  top: auto;
  left: auto;
  right: auto;
  z-index: 1000;
}
.preset-menu button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s;
}
.preset-menu button:last-child { border-bottom: none; }
.preset-menu button:hover { background: var(--tray); }
.preset-menu .ps-name { font-weight: 600; }
.preset-menu .ps-url { font-size: 11px; color: var(--subtle); font-family: var(--mono); }

textarea.input {
  height: auto;
  padding: 10px 12px;
  line-height: 1.5;
  resize: vertical;
}

/* 字段行 */
.field { display: flex; flex-direction: column; gap: 6px; position: relative; }
.field > label { font-size: 13px; font-weight: 500; }
.field .hint { font-size: 12px; color: var(--subtle); }

/* ============================================================
   面板（卡片）
   ============================================================ */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
}
.panel,
.kpi-strip,
.signal-strip,
.entry-card,
.site-card,
.key-block,
.result-item,
.modal {
  background: var(--raised);
  border-color: var(--border);
  box-shadow: var(--shadow-card);
}
/* 卡里套卡只留一层贴地细影，外层卡负责和底分开 */
.panel :is(.site-card, .key-block, .result-item) {
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 7%, transparent);
}
[data-theme="aurora"] :is(.panel, .kpi-strip, .signal-strip, .entry-card, .modal) {
  backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
}
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--rule);
}
.panel-head {
  background: color-mix(in srgb, var(--tray) 35%, transparent);
  border-radius: var(--r-card) var(--r-card) 0 0;
}
.panel-title { font-size: var(--fs-section); font-weight: 600; }
.panel-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.panel-body { padding: 20px; }

/* ============================================================
   KPI 条 — 不分瓦片，用 1px 分割线连成一条
   ============================================================ */
.kpi-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
}
.kpi-cell {
  position: relative;
  padding: 18px 22px;
  border-right: 1px solid var(--rule);
  min-width: 0;
}
.kpi-cell:last-child { border-right: none; }
.kpi-label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 6px;
}
.kpi-cell { --tile: var(--hue-1); }
.kpi-cell:nth-child(4n+2) { --tile: var(--hue-2); }
.kpi-cell:nth-child(4n+3) { --tile: var(--hue-3); }
.kpi-cell:nth-child(4n+4) { --tile: var(--hue-4); }
.kpi-label::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: 7px;
  vertical-align: 1px;
  border-radius: 50%;
  background: var(--tile);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tile) 18%, transparent);
}
.kpi-value {
  font-size: var(--fs-kpi);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
  white-space: nowrap;
}
.kpi-value .unit {
  font-size: 1em; /* 与数字同高，如「307个」 */
  color: inherit;
  font-weight: inherit;
  margin-left: 4px;
  letter-spacing: inherit;
}
.kpi-delta {
  font-size: 12px;
  margin-top: 6px;
  font-weight: 500;
}
.kpi-delta.up-good { color: var(--positive); }
.kpi-delta.down-bad { color: var(--negative); }
.kpi-delta.neutral { color: var(--muted); }

/* ============================================================
   标签页（下划线式）
   ============================================================ */
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}
.tab {
  padding: 10px 16px;
  font-size: 14px;
  color: var(--muted);
  font-weight: 400;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.2s;
}
.tab.active { color: var(--ink); font-weight: 600; border-bottom-color: var(--solid); }
.tab:hover { color: var(--ink); }

/* ============================================================
   表格
   ============================================================ */
.table { width: 100%; border-collapse: collapse; }
.table th {
  text-align: left;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
}
.table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
  font-size: 13px;
  transition: background 0.15s;
}
.table tbody tr:hover td { background: color-mix(in srgb, var(--data) 5%, transparent); }
.table tr:last-child td { border-bottom: none; }
.table .num { text-align: right; }
.table th.num { text-align: right; }
.table .mono { font-size: 12px; }

/* 销售对应：多张表并列时固定列宽，避免「区间充值 / 平台」左右漂移 */
#sales-list .table {
  table-layout: fixed;
}
#sales-list .table col.col-user { width: 46%; }
#sales-list .table col.col-recharge { width: 28%; }
#sales-list .table col.col-station { width: 26%; }
#sales-list .table td:first-child,
#sales-list .table th:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* pill */
.pill {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 500;
}
.pill.pos { background: var(--pill-pos-bg); color: var(--pill-pos-ink); }
.pill.neg { background: var(--pill-neg-bg); color: var(--pill-neg-ink); }
.pill.warn { background: var(--pill-warn-bg); color: var(--pill-warn-ink); }
.pill.neu { background: var(--pill-neu-bg); color: var(--pill-neu-ink); }

/* ============================================================
   筛选 / 控件条
   ============================================================ */
.filter-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 20px;
}
.seg {
  display: inline-flex;
  background: var(--tray);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}
.seg button {
  height: 30px;
  min-width: 52px;
  padding: 0 14px;
  border-radius: 6px;
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 500;
}
.seg button.on {
  background: var(--surface);
  color: var(--ink);
  border-bottom: 2px solid var(--solid);
} /* taste-skill-ignore: selected-state underline indicator */

/* ============================================================
   图表容器
   ============================================================ */
.chart-wrap { position: relative; width: 100%; }
.chart-axis { font-size: 11px; fill: var(--subtle); }
.chart-grid { stroke: var(--rule); stroke-width: 1; }
.chart-baseline { stroke: var(--control); stroke-width: 1; }

/* 图表加载骨架 — 中性灰 + shimmer */
.chart-loading {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 4px 0;
}
.chart-loading .skel-row {
  display: grid;
  grid-template-columns: 180px 1fr 60px;
  gap: 12px;
  align-items: center;
}
.chart-loading .skel-name {
  height: 12px;
  background: var(--tray);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
.chart-loading .skel-bar {
  height: 8px;
  background: var(--tray);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
.chart-loading .skel-val {
  height: 12px;
  background: var(--tray);
  border-radius: 4px;
  width: 40px;
  justify-self: end;
  position: relative;
  overflow: hidden;
}
.chart-loading .skel-name::after,
.chart-loading .skel-bar::after,
.chart-loading .skel-val::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--surface) 50%, transparent) 50%,
    transparent 100%
  );
  animation: skel-shimmer 1.6s ease-in-out infinite;
}
@keyframes skel-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* 数据条（横向排行） */
.bar-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 8px 0;
}
.bar-row .bar-label { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-row .bar-track {
  grid-column: 1 / -1;
  height: 8px;
  background: var(--tray);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 2px;
}
.bar-row .bar-fill {
  height: 100%;
  background: linear-gradient(90deg, color-mix(in srgb, var(--solid) 60%, transparent), var(--solid));
  border-radius: 4px;
  transition: width 0.6s var(--ease-out);
}
.bar-row .bar-fill.data { background: var(--data); }
.bar-row .bar-val { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ============================================================
   状态点
   ============================================================ */
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; }
.dot.ok { background: var(--positive); animation: dot-pulse 2.4s ease-out infinite; }
.dot.warn { background: var(--warning); }
.dot.bad { background: var(--negative); }
.dot.idle { background: var(--subtle); }

/* ============================================================
   栅格辅助
   ============================================================ */
.grid { display: grid; gap: var(--gap); }
.gap-16 { gap: 16px; }
.gap-24 { gap: 24px; }
.cols-2 { grid-template-columns: 1fr 1fr; }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.cols-5 { grid-template-columns: repeat(5, 1fr); }
.cols-6 { grid-template-columns: repeat(6, 1fr); }
.span-2 { grid-column: span 2; }

/* 四方格：2×2 等宽，同一行两张卡等高，卡内图表随行高伸展 */
.quad {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
.quad > .panel { display: flex; flex-direction: column; min-width: 0; }
.quad > .panel > .panel-body { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.kpi-strip.kpi-4 { grid-template-columns: repeat(4, 1fr); }
.span-3 { grid-column: span 3; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }

.muted { color: var(--muted); }
.subtle { color: var(--subtle); }
.small { font-size: var(--fs-small); }
.mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mt-20 { margin-top: 20px; } .mt-24 { margin-top: 24px; }
.mb-8 { margin-bottom: 8px; } .mb-12 { margin-bottom: 12px; } .mb-16 { margin-bottom: 16px; } .mb-20 { margin-bottom: 20px; }

/* 模态 */
.modal-mask {
  position: fixed; inset: 0;
  background: color-mix(in srgb, var(--ground) 45%, rgba(8, 10, 20, 0.55));
  backdrop-filter: blur(6px);
  display: none;
  z-index: 100;
  align-items: flex-start;
  justify-content: center;
  padding-top: 8vh;
}
.modal-mask.show { display: flex; }
.modal {
  border-radius: 14px;
  animation: pop-in 0.28s var(--ease-out);
  width: min(560px, calc(100vw - 32px));
  max-height: 84vh;
  overflow-y: auto;
  border: 1px solid var(--border);
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  padding: 10px 22px;
  border-bottom: 1px solid var(--rule);
}
.modal-title { font-size: 16px; font-weight: 600; }
.modal-body { padding: 22px; }
.modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 22px;
  border-top: 1px solid var(--rule);
}

/* 首页入口卡 */
.entry-card {
  position: relative;
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 24px;
  text-decoration: none;
  color: var(--ink);
  overflow: hidden;
  isolation: isolate;
  transition: border-color 0.25s, transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
/* 每张入口卡分到一个配色，图标是实心渐变方块，悬停边框也用自己的颜色 */
.entry-card { --tile: var(--hue-1); }
.entry-card:nth-child(4n+2) { --tile: var(--hue-2); }
.entry-card:nth-child(4n+3) { --tile: var(--hue-3); }
.entry-card:nth-child(4n+4) { --tile: var(--hue-4); }
.entry-card:hover {
  border-color: color-mix(in srgb, var(--tile) 45%, var(--border));
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift), 0 0 0 1px color-mix(in srgb, var(--tile) 14%, transparent);
}
.entry-card .ec-icon {
  width: 40px; height: 40px;
  border-radius: 11px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--tile) 78%, #fff), var(--tile));
  color: #fff;
  box-shadow: 0 6px 14px -4px color-mix(in srgb, var(--tile) 55%, transparent);
  display: grid; place-items: center;
  margin-bottom: 14px;
  transition: transform 0.4s var(--ease-out), box-shadow 0.25s;
}
.entry-card:hover .ec-icon {
  transform: rotate(-6deg) scale(1.06);
  box-shadow: 0 10px 20px -6px color-mix(in srgb, var(--tile) 65%, transparent);
}
.entry-card .ec-icon svg { width: 19px; height: 19px; }
.entry-card h3 { font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.entry-card p { font-size: 13px; color: var(--muted); line-height: 1.55; }
.entry-card .ec-go {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 14px; font-size: 13px; font-weight: 500; color: var(--data);
  transition: gap 0.3s var(--ease-out);
}
.entry-card:hover .ec-go { gap: 8px; }

/* 信号条 — 该产品独有：上游平台实时健康度 */
.signal-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
}
.signal-cell {
  position: relative;
  padding: 16px 20px;
  border-right: 1px solid var(--rule);
}
.signal-cell:last-child { border-right: none; }
.signal-cell .sc-name { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.signal-cell .sc-val { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; }
.signal-cell .sc-val .sc-unit { font-size: 12px; color: var(--muted); margin-left: 3px; font-weight: 400; }
.signal-cell .sc-bar {
  margin-top: 10px;
  height: 6px;
  background: var(--tray);
  border-radius: 3px;
  overflow: hidden;
}
.signal-cell .sc-bar > i {
  position: relative;
  display: block; height: 100%;
  background: linear-gradient(90deg, color-mix(in srgb, var(--data) 55%, transparent), var(--data));
  border-radius: 3px;
  box-shadow: 0 0 10px color-mix(in srgb, var(--data) 50%, transparent);
  overflow: hidden;
  transition: width 0.8s var(--ease-out);
}
.signal-cell .sc-bar > i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: translateX(-100%);
  animation: bar-sheen 2.8s ease-in-out infinite;
}

/* ============================================================
   动效
   ============================================================ */

/* 氛围光 — 三团主题色光斑缓慢漂移；登录页有自己的背景，不参与 */
body:not(.auth-page)::before {
  content: "";
  position: fixed;
  inset: -15%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38% 42% at 82% 12%, var(--amb-1), transparent 70%),
    radial-gradient(34% 40% at 12% 88%, var(--amb-2), transparent 70%),
    radial-gradient(30% 34% at 55% 55%, var(--amb-3), transparent 70%);
  filter: blur(30px);
  animation: ambient-drift 26s ease-in-out infinite alternate;
}
/* 细颗粒，压掉大面积渐变的塑料感 */
body:not(.auth-page)::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
[data-tone="dark"] body:not(.auth-page)::after { opacity: 0.07; mix-blend-mode: overlay; }

/* 光斑跟随 — 坐标由 shell.js 写入 --mx / --my */
.entry-card::before,
.kpi-cell::before,
.signal-cell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%),
    color-mix(in srgb, var(--data) 14%, transparent), transparent 65%);
  opacity: 0;
  transition: opacity 0.3s;
}
.kpi-cell::before,
.signal-cell::before { z-index: 0; }
.kpi-cell > *,
.signal-cell > * { position: relative; z-index: 1; }
.entry-card:hover::before,
.kpi-cell:hover::before,
.signal-cell:hover::before { opacity: 1; }

/* 进场 — 页面主区块依次浮现 */
.canvas > *,
.canvas > .grid > * {
  animation: rise-in 0.6s var(--ease-out) both;
}
.canvas > :nth-child(2) { animation-delay: 0.05s; }
.canvas > :nth-child(3) { animation-delay: 0.1s; }
.canvas > :nth-child(4) { animation-delay: 0.15s; }
.canvas > :nth-child(5) { animation-delay: 0.2s; }
.canvas > :nth-child(n+6) { animation-delay: 0.25s; }
.canvas > .grid > :nth-child(1) { animation-delay: 0.2s; }
.canvas > .grid > :nth-child(2) { animation-delay: 0.26s; }
.canvas > .grid > :nth-child(3) { animation-delay: 0.32s; }
.canvas > .grid > :nth-child(4) { animation-delay: 0.38s; }
.canvas > .grid > :nth-child(5) { animation-delay: 0.44s; }
.canvas > .grid > :nth-child(n+6) { animation-delay: 0.5s; }

.page-title {
  background: linear-gradient(100deg, var(--ink) 30%, color-mix(in srgb, var(--data) 75%, var(--ink)) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 切换主题 — 从点中的色圆处圆形扩散（View Transitions） */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
::view-transition-new(root) {
  animation: theme-reveal 0.65s var(--ease-out);
}

@keyframes ambient-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-3%, 2%, 0) scale(1.06); }
  100% { transform: translate3d(2%, -3%, 0) scale(1.02); }
}
@keyframes rise-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes pop-in {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
@keyframes dot-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--positive) 55%, transparent); }
  70%  { box-shadow: 0 0 0 6px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@keyframes bar-sheen {
  0%, 30% { transform: translateX(-100%); }
  100%    { transform: translateX(100%); }
}
@keyframes theme-reveal {
  from { clip-path: circle(0 at var(--vt-x, 0) var(--vt-y, 100%)); }
  to   { clip-path: circle(var(--vt-r, 150vmax) at var(--vt-x, 0) var(--vt-y, 100%)); }
}

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

/* 响应式 */
@media (max-width: 1180px) {
  .quad { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  #app, #app.has-sidebar { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .canvas { padding: 20px 16px 40px; }
  .cols-3, .cols-4, .cols-5, .cols-6 { grid-template-columns: 1fr 1fr; }
  .kpi-strip { grid-template-columns: 1fr 1fr; }
  .kpi-value { font-size: 22px; }
  .kpi-value .unit { font-size: 1em; }
  .signal-strip { grid-template-columns: 1fr; }
}