/* Design Token + 壳层主题
 * light 浅色（白）· dark 暗色（黑）· custom/amber 自定义（跟随 UI_BRAND_COLOR）
 *
 * 语义约定（对比度）：
 *   --brand / --brand-hover  → 填充色（按钮、进度、强调底）
 *   --on-brand               → 叠在 brand 填充上的文字（高对比）
 *   --fg-accent              → 当「文字色」用的品牌色（禁止用过亮的 brand 当字色）
 *   --chart-*                → ECharts 专用，随主题切换
 */
:root {
  /* Brand — 默认晴空蓝（浅色主题） */
  --brand: #2563eb;
  --brand-hover: #1d4ed8;
  --brand-soft: rgba(37, 99, 235, 0.10);
  --brand-ink: #1e3a8a;
  --fg-accent: #1d4ed8;
  --on-brand: #ffffff;
  --accent-mist: #93c5fd;

  /* Surface — 干净浅灰白分层，避免发灰发脏 */
  --bg: #f4f6f9;
  --bg-elevated: #f9fafb;
  --panel: #ffffff;
  --panel-2: #eef2f7;
  --line: #e2e8f0;
  --line-strong: #cbd5e1;

  /* Text — 提高正文/次要文案对比，杜绝发虚 */
  --text: #0f172a;
  --muted: #64748b;
  --text-invert: #ffffff;

  /* Status */
  --ok: #047857;
  --ok-bg: #ecfdf5;
  --danger: #b91c1c;
  --danger-bg: #fef2f2;
  --warn: #b45309;
  --warn-bg: #fffbeb;

  /* Charts */
  --chart-fg: #0f172a;
  --chart-muted: #64748b;
  --chart-axis: #64748b;
  --chart-split: rgba(15, 23, 42, 0.08);
  --chart-border: #ffffff;
  --chart-tooltip-bg: rgba(255, 255, 255, 0.98);
  --chart-tooltip-border: #e2e8f0;
  --chart-radar-a: rgba(37, 99, 235, 0.03);
  --chart-radar-b: rgba(37, 99, 235, 0.09);
  --chart-palette: #2563eb, #0d9488, #d97706, #dc2626, #7c3aed, #0284c7, #65a30d, #64748b;
  --chart-heatmap: #eff6ff, #bfdbfe, #60a5fa, #2563eb, #f59e0b, #ef4444;
  --chart-map: #eef2ff, #c7d2fe, #818cf8, #4f46e5, #f59e0b, #ef4444;
  --chart-map-empty: #c7d2fe;
  --chart-map-border: rgba(255, 255, 255, 0.72);
  --chart-map-emphasis: #fbbf24;
  --chart-gauge-track: rgba(15, 23, 42, 0.08);
  --chart-gauge-progress: #2563eb;
  --chart-area-opacity: 0.16;
  --chart-bar-radius: 4;

  /* Geometry */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --side-w: 160px;
  --topbar-h: 52px;

  /* Elevation */
  --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-2: 0 4px 12px rgba(15, 23, 42, 0.06);
  --shadow-3: 0 12px 28px rgba(15, 23, 42, 0.08);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-snap: cubic-bezier(0.34, 1.45, 0.64, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-1: 140ms;
  --dur-2: 260ms;
  --dur-side: 320ms;

  /* Type */
  --font-sans: "Segoe UI Variable", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: Consolas, "Cascadia Mono", Monaco, monospace;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;

  color-scheme: light;
}

/* 显式锁定浅色：不读取 --ui-brand-custom，避免配置主色渗入黑白主题 */
html[data-theme="light"] {
  --brand: #2563eb;
  --brand-hover: #1d4ed8;
  --brand-soft: rgba(37, 99, 235, 0.10);
  --brand-ink: #1e3a8a;
  --fg-accent: #1d4ed8;
  --on-brand: #ffffff;
  --accent-mist: #93c5fd;

  --bg: #f4f6f9;
  --bg-elevated: #f9fafb;
  --panel: #ffffff;
  --panel-2: #eef2f7;
  --line: #e2e8f0;
  --line-strong: #cbd5e1;

  --text: #0f172a;
  --muted: #64748b;
  --text-invert: #ffffff;

  --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-2: 0 4px 12px rgba(15, 23, 42, 0.06);
  --shadow-3: 0 12px 28px rgba(15, 23, 42, 0.08);

  --chart-fg: #0f172a;
  --chart-muted: #64748b;
  --chart-axis: #64748b;
  --chart-split: rgba(15, 23, 42, 0.08);
  --chart-border: #ffffff;
  --chart-tooltip-bg: rgba(255, 255, 255, 0.98);
  --chart-tooltip-border: #e2e8f0;
  --chart-radar-a: rgba(37, 99, 235, 0.03);
  --chart-radar-b: rgba(37, 99, 235, 0.09);
  --chart-palette: #2563eb, #0d9488, #d97706, #dc2626, #7c3aed, #0284c7, #65a30d, #64748b;
  --chart-heatmap: #eff6ff, #bfdbfe, #60a5fa, #2563eb, #f59e0b, #ef4444;
  --chart-map: #eef2ff, #c7d2fe, #818cf8, #4f46e5, #f59e0b, #ef4444;
  --chart-map-empty: #c7d2fe;
  --chart-map-border: rgba(255, 255, 255, 0.72);
  --chart-map-emphasis: #fbbf24;
  --chart-gauge-track: rgba(15, 23, 42, 0.08);
  --chart-gauge-progress: #2563eb;
  --chart-area-opacity: 0.16;

  color-scheme: light;
}

html[data-theme="dark"] {
  /* 深墨黑底 · 冷灰分层 · 高对比正文 */
  --brand: #60a5fa;
  --brand-hover: #93c5fd;
  --brand-soft: rgba(96, 165, 250, 0.16);
  --brand-ink: #dbeafe;
  --fg-accent: #93c5fd;
  --on-brand: #0a0c10;
  --accent-mist: #3b82f6;

  --bg: #0a0c10;
  --bg-elevated: #10141a;
  --panel: #141922;
  --panel-2: #1a2130;
  --line: #2c3545;
  --line-strong: #3f4b5f;

  --text: #f1f5f9;
  --muted: #94a3b8;
  --text-invert: #0a0c10;

  --ok: #34d399;
  --ok-bg: rgba(52, 211, 153, 0.14);
  --danger: #f87171;
  --danger-bg: rgba(248, 113, 113, 0.14);
  --warn: #fbbf24;
  --warn-bg: rgba(251, 191, 36, 0.14);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 4px 14px rgba(0, 0, 0, 0.4);
  --shadow-3: 0 12px 28px rgba(0, 0, 0, 0.48);

  --chart-fg: #f1f5f9;
  --chart-muted: #94a3b8;
  --chart-axis: #94a3b8;
  --chart-split: rgba(241, 245, 249, 0.1);
  --chart-border: #141922;
  --chart-tooltip-bg: rgba(20, 25, 34, 0.96);
  --chart-tooltip-border: #2c3545;
  --chart-radar-a: rgba(96, 165, 250, 0.06);
  --chart-radar-b: rgba(96, 165, 250, 0.14);
  --chart-palette: #60a5fa, #2dd4bf, #fbbf24, #fb7185, #a78bfa, #38bdf8, #a3e635, #94a3b8;
  --chart-heatmap: #0c1a2e, #163a66, #1d5fa8, #3b82f6, #f59e0b, #f87171;
  /* 地图：低端用可见的灰蓝，避免近黑「底片」 */
  --chart-map: #334155, #3b82f6, #38bdf8, #fbbf24, #f87171;
  --chart-map-empty: #1e293b;
  --chart-map-border: rgba(148, 163, 184, 0.42);
  --chart-map-emphasis: #fbbf24;
  --chart-gauge-track: rgba(241, 245, 249, 0.12);
  --chart-gauge-progress: #60a5fa;
  --chart-area-opacity: 0.2;
  --chart-bar-radius: 4;

  color-scheme: dark;
}

/* Custom / 历史 amber：跟随 --ui-brand-custom 的品牌风格主题 */
html[data-theme="custom"],
html[data-theme="amber"] {
  --brand: var(--ui-brand-custom, #2563eb);
  --brand-hover: color-mix(in srgb, var(--ui-brand-custom, #2563eb) 78%, #0f172a);
  --brand-soft: color-mix(in srgb, var(--ui-brand-custom, #2563eb) 12%, transparent);
  --brand-ink: var(--ui-brand-ink, color-mix(in srgb, var(--ui-brand-custom, #2563eb) 45%, #0f172a));
  --fg-accent: var(--ui-brand-fg, color-mix(in srgb, var(--ui-brand-custom, #2563eb) 58%, #0f172a));
  --on-brand: var(--ui-brand-on, #ffffff);
  --accent-mist: color-mix(in srgb, var(--ui-brand-custom, #2563eb) 42%, #ffffff);

  --bg: color-mix(in srgb, var(--ui-brand-custom, #2563eb) 5%, #f5f6f8);
  --bg-elevated: color-mix(in srgb, var(--ui-brand-custom, #2563eb) 3%, #fafbfc);
  --panel: #ffffff;
  --panel-2: color-mix(in srgb, var(--ui-brand-custom, #2563eb) 7%, #eef1f5);
  --line: color-mix(in srgb, var(--ui-brand-custom, #2563eb) 11%, #e2e8f0);
  --line-strong: color-mix(in srgb, var(--ui-brand-custom, #2563eb) 18%, #cbd5e1);

  --text: #121826;
  --muted: #5b6578;
  --text-invert: var(--ui-brand-on, #ffffff);

  --ok: #047857;
  --ok-bg: #ecfdf5;
  --danger: #b91c1c;
  --danger-bg: #fef2f2;
  --warn: color-mix(in srgb, var(--ui-brand-custom, #2563eb) 35%, #b45309);
  --warn-bg: color-mix(in srgb, var(--ui-brand-custom, #2563eb) 8%, #fffbeb);

  --shadow-1: 0 1px 2px color-mix(in srgb, var(--ui-brand-custom, #2563eb) 8%, rgba(15, 23, 42, 0.04));
  --shadow-2: 0 4px 12px color-mix(in srgb, var(--ui-brand-custom, #2563eb) 10%, rgba(15, 23, 42, 0.06));
  --shadow-3: 0 12px 28px color-mix(in srgb, var(--ui-brand-custom, #2563eb) 14%, rgba(15, 23, 42, 0.08));

  --chart-fg: #121826;
  --chart-muted: #5b6578;
  --chart-axis: #5b6578;
  --chart-split: rgba(18, 24, 38, 0.08);
  --chart-border: #ffffff;
  --chart-tooltip-bg: rgba(255, 255, 255, 0.98);
  --chart-tooltip-border: color-mix(in srgb, var(--ui-brand-custom, #2563eb) 12%, #e2e8f0);
  --chart-radar-a: color-mix(in srgb, var(--ui-brand-custom, #2563eb) 4%, transparent);
  --chart-radar-b: color-mix(in srgb, var(--ui-brand-custom, #2563eb) 10%, transparent);
  --chart-palette: var(--ui-brand-custom, #2563eb), #0d9488, #d97706, #dc2626, #7c3aed, #0284c7, #65a30d, #64748b;
  --chart-heatmap: color-mix(in srgb, var(--ui-brand-custom, #2563eb) 6%, #fff),
    color-mix(in srgb, var(--ui-brand-custom, #2563eb) 22%, #fff),
    color-mix(in srgb, var(--ui-brand-custom, #2563eb) 45%, #fff),
    var(--ui-brand-custom, #2563eb), #f59e0b, #ef4444;
  /* 地图色阶用纯 hex，避免 color-mix 逗号被 splitCsv 拆坏 */
  --chart-map: #eef2ff, #c7d2fe, #818cf8, #4f46e5, #f59e0b, #ef4444;
  --chart-map-empty: #c7d2fe;
  --chart-map-border: rgba(255, 255, 255, 0.72);
  --chart-map-emphasis: #fbbf24;
  --chart-gauge-track: rgba(18, 24, 38, 0.08);
  --chart-gauge-progress: var(--ui-brand-custom, #2563eb);
  --chart-area-opacity: 0.18;
  --chart-bar-radius: 4;

  color-scheme: light;
}

/* 文字强调一律走 fg-accent，避免亮色当字色对比不足 */
a { color: var(--fg-accent); }
a:hover:not(.btn) { color: var(--brand-hover); }
html[data-theme="custom"] a:hover:not(.btn),
html[data-theme="amber"] a:hover:not(.btn) {
  color: color-mix(in srgb, var(--fg-accent) 78%, #0f172a);
}
html[data-theme="dark"] a:hover:not(.btn) { color: #dbeafe; }

html[data-theme="custom"] .side a.active,
html[data-theme="custom"] .side a[aria-current="page"],
html[data-theme="amber"] .side a.active,
html[data-theme="amber"] .side a[aria-current="page"],
html[data-theme="dark"] .side a.active,
html[data-theme="dark"] .side a[aria-current="page"] {
  color: var(--fg-accent);
}
html[data-theme="custom"] .tag.on,
html[data-theme="custom"] .stat,
html[data-theme="custom"] .home-metric .value,
html[data-theme="custom"] .home-rank .idx,
html[data-theme="custom"] .toolbar .btn.secondary:hover,
html[data-theme="amber"] .tag.on,
html[data-theme="amber"] .stat,
html[data-theme="amber"] .home-metric .value,
html[data-theme="amber"] .home-rank .idx,
html[data-theme="amber"] .toolbar .btn.secondary:hover {
  color: var(--fg-accent);
}
html[data-theme="custom"] .pager-bar a:hover,
html[data-theme="amber"] .pager-bar a:hover {
  color: var(--fg-accent);
  border-color: var(--brand);
}
html[data-theme="custom"] .adv-table th .pin-btn:hover,
html[data-theme="custom"] .adv-table th .sort-btn:hover,
html[data-theme="custom"] .adv-table th .pin-btn.is-active,
html[data-theme="custom"] .adv-table th .sort-btn.is-active,
html[data-theme="amber"] .adv-table th .pin-btn:hover,
html[data-theme="amber"] .adv-table th .sort-btn:hover,
html[data-theme="amber"] .adv-table th .pin-btn.is-active,
html[data-theme="amber"] .adv-table th .sort-btn.is-active {
  color: var(--fg-accent);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 0ms;
    --dur-2: 0ms;
  }
}

/* —— 基础 —— */
* { box-sizing: border-box; }
html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}
body {
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--bg);
  font-size: var(--fs-14);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--fg-accent); }
a:hover:not(.btn) { color: var(--brand-hover); }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 10000;
  padding: 8px 12px;
  background: var(--brand);
  color: var(--on-brand);
  border-radius: var(--radius-sm);
}
.skip-link:focus {
  left: 12px;
  top: 12px;
}

/* —— 壳层 —— */
.app-shell {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.topbar {
  flex: 0 0 var(--topbar-h);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  color: var(--text);
  z-index: 20;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
}
html[data-theme="dark"] .topbar {
  background: color-mix(in srgb, var(--panel) 78%, transparent);
  border-bottom-color: var(--line);
  color: var(--text);
}
.topbar .brand-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  user-select: none;
}
.topbar .brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: none;
}
.topbar .brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.topbar .brand-name {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  line-height: 1;
  white-space: nowrap;
  color: var(--text);
  filter: none;
}
.topbar .brand-title {
  font-size: 18px;
  font-weight: 750;
  letter-spacing: 0.04em;
  color: var(--text);
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  -webkit-text-fill-color: unset;
}
.topbar .brand-separator {
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
}
.topbar .brand-subtitle {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.035em;
}
html[data-theme="dark"] .topbar .brand-title {
  color: var(--text);
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  -webkit-text-fill-color: unset;
}
html[data-theme="custom"] .topbar .brand-title,
html[data-theme="amber"] .topbar .brand-title {
  color: var(--brand-ink);
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  -webkit-text-fill-color: unset;
}
@media (max-width: 760px) {
  .topbar .brand-subtitle,
  .topbar .brand-separator { display: none; }
}
.topbar-right {
  display: flex;
  align-items: center;
  gap: 6px;
}
.btn.icon-btn {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.55);
  color: var(--text);
  border-radius: var(--radius-md);
  width: 34px;
  height: 34px;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-snap);
}
.btn.icon-btn:hover {
  background: var(--panel);
}
.btn.icon-btn:active {
  transform: scale(0.94);
}
html[data-theme="dark"] .btn.icon-btn {
  border-color: var(--line);
  background: var(--panel-2);
  color: var(--text);
}

.layout {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: var(--side-w) minmax(0, 1fr);
  overflow: hidden;
  transition: grid-template-columns var(--dur-side) var(--ease-soft);
}
.layout.side-collapsed { --side-w: 64px; }

.side-wrap {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: visible;
  z-index: 5;
}

.side {
  height: 100%;
  background: color-mix(in srgb, var(--panel) 72%, transparent);
  color: var(--text);
  padding: 10px 8px 0;
  overflow: hidden;
  min-width: 0;
  border-right: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
  display: flex;
  flex-direction: column;
}
.side-nav-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-bottom: 8px;
  scrollbar-width: thin;
}

/* 侧栏左下角：当前用户 */
.side-user {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 0;
  padding: 10px 8px 12px;
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  background: transparent;
  min-width: 0;
  transition: padding var(--dur-side) var(--ease-soft), gap var(--dur-side) var(--ease-soft);
}
.side-user-avatar {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0;
  color: var(--fg-accent);
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--brand-soft) 100%, #fff) 0%,
      color-mix(in srgb, var(--brand) 12%, var(--panel)) 100%
    );
  border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--line));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
  line-height: 1;
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.side-user-meta {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
  opacity: 1;
  max-width: 140px;
  overflow: hidden;
  transition:
    opacity calc(var(--dur-side) * 0.7) var(--ease-soft),
    max-width var(--dur-side) var(--ease-soft),
    transform var(--dur-side) var(--ease-soft);
}
.side-user-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.side-user-email {
  font-size: 10.5px;
  color: var(--muted);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.side-user-email--empty {
  opacity: 0.6;
  font-style: italic;
}

/* 收起：只保留圆形头像，不再挤出姓名文字块 */
.layout.side-collapsed .side-user {
  justify-content: center;
  align-items: center;
  gap: 0;
  padding: 12px 0 14px;
}
.layout.side-collapsed .side-user-meta {
  opacity: 0;
  max-width: 0;
  pointer-events: none;
  transform: translateX(-4px);
}
.layout.side-collapsed .side-user-avatar {
  width: 32px;
  height: 32px;
  font-size: 12.5px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 1px 4px color-mix(in srgb, var(--brand) 12%, transparent);
}
.layout.side-collapsed .side-user:hover .side-user-avatar {
  transform: scale(1.05);
}

/* 侧栏右缘中部：折叠 / 展开切换 */
.side-rail-toggle {
  position: absolute;
  top: 50%;
  right: 0;
  z-index: 24;
  transform: translate(50%, -50%);
  width: 20px;
  height: 44px;
  padding: 0;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--line) 90%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  color: var(--muted);
  box-shadow: var(--shadow-1);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background var(--dur-1) var(--ease-soft),
    color var(--dur-1) var(--ease-soft),
    border-color var(--dur-1) var(--ease-soft),
    box-shadow var(--dur-1) var(--ease-soft),
    transform var(--dur-1) var(--ease-soft);
}
.side-rail-toggle:hover {
  background: var(--panel);
  border-color: color-mix(in srgb, var(--brand) 28%, var(--line));
  color: var(--fg-accent);
  box-shadow: var(--shadow-2);
  transform: translate(50%, -50%);
}
.side-rail-toggle:active {
  transform: translate(50%, -50%) scale(0.96);
}
.side-rail-toggle:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.side-rail-ico {
  display: none;
  flex-shrink: 0;
  pointer-events: none;
  opacity: 0.9;
}
.side-rail-ico--collapse { display: block; }
.layout.side-collapsed .side-rail-ico--collapse { display: none; }
.layout.side-collapsed .side-rail-ico--expand { display: block; }
html[data-theme="dark"] .side-rail-toggle {
  background: color-mix(in srgb, var(--panel-2) 92%, transparent);
  border-color: var(--line);
  color: var(--muted);
}
html[data-theme="custom"] .side-rail-toggle,
html[data-theme="amber"] .side-rail-toggle {
  color: var(--muted);
}
html[data-theme="dark"] .side {
  background: rgba(22, 25, 36, 0.72);
  color: var(--text);
  border-right-color: var(--line);
}
html[data-theme="dark"] .side-user-avatar {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.side .nav-label {
  display: none;
}
html[data-theme="dark"] .side .nav-label { color: var(--muted); }
.side a {
  display: flex;
  align-items: center;
  gap: 9px;
  color: inherit;
  text-decoration: none;
  padding: 7px 8px;
  border-radius: 9px;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  transition:
    background var(--dur-1) var(--ease-soft),
    color var(--dur-1) var(--ease-soft),
    padding var(--dur-side) var(--ease-soft),
    gap var(--dur-side) var(--ease-soft);
}
.side a .nav-ico {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: transparent;
  color: color-mix(in srgb, var(--nav-accent, var(--fg-accent)) 78%, var(--muted));
  transition:
    background var(--dur-1) var(--ease-soft),
    color var(--dur-1) var(--ease-soft),
    box-shadow var(--dur-1) var(--ease-soft),
    transform var(--dur-1) var(--ease-soft);
}
.side a .nav-ico svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.side a .nav-text {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  font-weight: 450;
  letter-spacing: 0.01em;
  opacity: 1;
  max-width: 120px;
  transform: translateX(0);
  transition:
    opacity calc(var(--dur-side) * 0.65) var(--ease-soft),
    max-width var(--dur-side) var(--ease-soft),
    transform var(--dur-side) var(--ease-soft);
}
.side a[data-nav="home"] { --nav-accent: #2f8af5; }
.side a[data-nav="objects"] { --nav-accent: #0d9488; }
.side a[data-nav="sql"] { --nav-accent: #6366f1; }
.side a[data-nav="charts"] { --nav-accent: #f59e0b; }
.side a[data-nav="dashboards"] { --nav-accent: #0ea5e9; }
.side a[data-nav="logs"] { --nav-accent: #64748b; }
.side a[data-nav="api"] { --nav-accent: #e11d48; }
.side a[data-nav="settings"] { --nav-accent: #2563eb; }
.side a[data-nav="tools"] { --nav-accent: #16a34a; }

html[data-theme="dark"] .side a[data-nav="home"] { --nav-accent: #5ba8ff; }
html[data-theme="dark"] .side a[data-nav="objects"] { --nav-accent: #2dd4bf; }
html[data-theme="dark"] .side a[data-nav="sql"] { --nav-accent: #a5b4fc; }
html[data-theme="dark"] .side a[data-nav="charts"] { --nav-accent: #fbbf24; }
html[data-theme="dark"] .side a[data-nav="dashboards"] { --nav-accent: #38bdf8; }
html[data-theme="dark"] .side a[data-nav="logs"] { --nav-accent: #94a3b8; }
html[data-theme="dark"] .side a[data-nav="api"] { --nav-accent: #fb7185; }
html[data-theme="dark"] .side a[data-nav="settings"] { --nav-accent: #93c5fd; }
html[data-theme="dark"] .side a[data-nav="tools"] { --nav-accent: #4ade80; }

/* 自定义主题沿用浅色导航点缀色，避免再锁死暖金 */
html[data-theme="custom"] .side a[data-nav="home"],
html[data-theme="amber"] .side a[data-nav="home"] { --nav-accent: var(--brand); }

.side a:hover {
  background: color-mix(in srgb, var(--panel-2) 80%, transparent);
  color: var(--text);
}
.side a:hover .nav-ico {
  color: var(--nav-accent, var(--fg-accent));
  /* 与菜单行背景一致，避免图标方块另起一层色差 */
  background: transparent;
  box-shadow: none;
}
.side a.active,
.side a[aria-current="page"] {
  background: color-mix(in srgb, var(--brand-soft) 78%, var(--panel));
  color: var(--fg-accent);
  box-shadow: inset 2px 0 0 var(--brand);
}
.side a.active .nav-ico,
.side a[aria-current="page"] .nav-ico {
  color: var(--nav-accent, var(--fg-accent));
  background: transparent;
  box-shadow: none;
}
html[data-theme="dark"] .side a.active,
html[data-theme="dark"] .side a[aria-current="page"] {
  background: var(--brand-soft);
  color: var(--fg-accent);
  box-shadow: inset 2px 0 0 var(--brand);
}
.layout.side-collapsed .side .nav-label {
  opacity: 0;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  pointer-events: none;
}
.layout.side-collapsed .side a .nav-text {
  opacity: 0;
  max-width: 0;
  transform: translateX(-6px);
  pointer-events: none;
}
.layout.side-collapsed .side a {
  justify-content: center;
  padding: 7px 0;
  gap: 0;
  box-shadow: none;
}
.layout.side-collapsed .side a.active,
.layout.side-collapsed .side a[aria-current="page"] {
  background: transparent;
  box-shadow: none;
}
.layout.side-collapsed .side a .nav-ico {
  flex-basis: 34px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
}
.layout.side-collapsed .side a .nav-ico svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.35;
}
/* 收起态：图标承载整行背景，与展开态同色 */
.layout.side-collapsed .side a:hover .nav-ico {
  background: color-mix(in srgb, var(--panel-2) 80%, transparent);
  box-shadow: none;
}
.layout.side-collapsed .side a.active .nav-ico,
.layout.side-collapsed .side a[aria-current="page"] .nav-ico {
  background: color-mix(in srgb, var(--brand-soft) 78%, var(--panel));
  box-shadow: none;
}
html[data-theme="dark"] .layout.side-collapsed .side a.active .nav-ico,
html[data-theme="dark"] .layout.side-collapsed .side a[aria-current="page"] .nav-ico {
  background: var(--brand-soft);
}

/* 必须用 main.main，避免命中 Monaco 补全列表内部的 div.main（会导致建议项只见图标不见文字） */
main.main {
  min-width: 0;
  min-height: 0;
  padding: 10px 12px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  background: transparent;
  transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-2) var(--ease-snap);
  overscroll-behavior-y: contain;
}
main.main.soft-nav-loading { opacity: 0; pointer-events: none; filter: none; }
html[data-low-gpu="1"] main.main.soft-nav-loading { filter: none; opacity: 0; }
html[data-low-gpu="1"] .layout {
  transition: none;
}
html[data-low-gpu="1"] .side a .nav-text,
html[data-low-gpu="1"] .side .nav-label,
html[data-low-gpu="1"] .side-user-meta {
  transition: none;
}
main.main.page-mode-fill { overflow: hidden; }

/* 指定页面隐藏全局 AI 助手（软导航只换 main class，不销毁助手 DOM） */
body:has(#consoleMain.hide-ai-assistant) #aiAssistantSlot,
body:has(#consoleMain.hide-ai-assistant) #aiAssistantRoot,
body:has(#consoleMain.hide-ai-assistant) #aiFab,
body:has(#consoleMain.hide-ai-assistant) #aiOverlay,
body:has(#consoleMain.hide-ai-assistant) #aiProbeOverlay,
body:has(#consoleMain.hide-ai-assistant) #aiFabToggle,
html.ai-assistant-suppressed #aiAssistantSlot,
html.ai-assistant-suppressed #aiAssistantRoot,
html.ai-assistant-suppressed #aiFab,
html.ai-assistant-suppressed #aiOverlay,
html.ai-assistant-suppressed #aiProbeOverlay,
html.ai-assistant-suppressed #aiFabToggle,
#aiAssistantSlot[hidden],
#aiAssistantRoot[hidden],
#aiFab[hidden] {
  display: none !important;
}

.console-busy {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(18, 28, 40, 0.38);
  backdrop-filter: blur(2px);
}
.console-busy[hidden] { display: none !important; }
.console-busy-card {
  min-width: 240px;
  max-width: min(420px, 92vw);
  padding: 22px 26px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  text-align: center;
}
.console-busy-spinner {
  width: 36px;
  height: 36px;
  margin: 0 auto 14px;
  border: 3px solid #d7e0ea;
  border-top-color: var(--brand, #1f6feb);
  border-radius: 50%;
  animation: console-busy-spin 0.8s linear infinite;
}
.console-busy-title {
  font-size: 16px;
  font-weight: 650;
  color: var(--text, #1a2332);
  margin-bottom: 6px;
}
.console-busy-text {
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted, #667788);
}
html.console-is-busy,
html.console-is-busy body {
  cursor: progress;
}
@keyframes console-busy-spin {
  to { transform: rotate(360deg); }
}

.job-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 0;
  border-radius: 8px;
  background: var(--brand-soft);
  border: 1px solid color-mix(in srgb, var(--brand) 32%, var(--line));
  color: var(--text);
  font-size: 13px;
}
.job-banner .job-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brand);
  animation: job-pulse 1.2s ease-in-out infinite;
  flex: 0 0 auto;
}
@keyframes job-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.85); }
}

.page-fill {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
}
.page-fill > .card.shrink,
.page-fill > .page-head { flex: 0 0 auto; }
.page-fill > .card.fill,
.page-fill > .table-stack {
  flex: 1;
  min-height: 0;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.page-fill .table-stack { gap: 8px; }
.page-fill .table-stack > .card.fill,
.page-fill .table-stack > .obj-split-panel {
  flex: 1 1 0;
  min-height: 0;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* 折叠时必须盖过上方 flex:1，否则 body 隐藏后仍占满空白 */
.page-fill .table-stack > .obj-split-panel.collapsed {
  flex: 0 0 auto;
  min-height: auto;
  overflow: visible;
}
.page-fill .card.fill { padding: 0; }
.page-fill .adv-table-shell {
  flex: 1;
  min-height: 0;
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.page-fill .adv-table-scroll {
  flex: 1;
  min-height: 0;
  max-height: none;
  overflow: auto;
}

/* 对象管理上下分栏（软导航后也可靠） */
.obj-split-panel {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: var(--shadow-1);
}
.obj-split-panel.collapsed {
  flex: 0 0 auto;
  min-height: auto;
}
.obj-split-panel.collapsed .obj-split-body {
  display: none !important;
}
.obj-split-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  user-select: none;
  flex: 0 0 auto;
}
.obj-split-panel.collapsed .obj-split-head {
  border-bottom: 0;
}
.obj-split-head:hover { background: var(--bg-elevated); }
.obj-split-head-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
  flex-wrap: wrap;
}
.obj-split-head-main strong { font-size: 14px; }
.obj-split-head-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  justify-content: flex-end;
  position: relative;
}
.obj-split-head-actions .btn {
  height: 28px;
  min-height: 28px;
  padding: 0 10px;
  font-size: 12px;
  white-space: nowrap;
}
.obj-split-batch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 4px;
  flex-wrap: wrap;
}
.obj-split-batch .btn {
  height: 28px;
  min-height: 28px;
  padding: 0 10px;
  font-size: 12px;
}
.obj-batch-check {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  color: var(--text);
  white-space: nowrap;
}
.obj-split-chev {
  color: var(--muted);
  font-size: 12px;
  min-width: 2.5em;
  text-align: right;
}
.obj-split-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.obj-row.is-active td {
  background: color-mix(in srgb, var(--brand-soft) 70%, transparent) !important;
}
.view-data-link { font-weight: 500; }
.view-data-link.is-disabled,
.row-op.is-muted {
  color: var(--muted);
  font-weight: 500;
  cursor: not-allowed;
  opacity: 0.45;
  text-decoration: none;
  pointer-events: none;
}
.obj-row.is-sync-off td {
  color: color-mix(in srgb, var(--text) 72%, var(--muted));
}

/* —— 组件 —— */
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 10px 12px;
  margin-bottom: 8px;
  box-shadow: none;
  transition: border-color var(--dur-1) var(--ease-out);
}
.card:hover { box-shadow: none; border-color: color-mix(in srgb, var(--line-strong) 70%, var(--line)); }
.page-fill > .card.shrink {
  margin-bottom: 0;
  padding: 6px 10px;
  box-shadow: none;
}
.page-fill > .card.shrink:hover { box-shadow: none; }

h1 { margin: 0 0 6px; font-size: 22px; font-weight: 650; letter-spacing: -0.01em; }
h2 { margin: 0 0 10px; font-size: var(--fs-18); font-weight: 600; }
.muted { color: var(--muted); }

/* 说明文案：默认更轻、更短视觉占用 */
.field-help,
.field-tip,
.settings-card-lead,
.page-desc {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
  max-width: 52em;
}
.settings-card-lead {
  margin: 0 0 12px;
}
.bi-fold-hint {
  opacity: 0.78;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 6px 14px;
  background: var(--brand);
  color: var(--on-brand);
  cursor: pointer;
  text-decoration: none;
  font-size: var(--fs-13);
  line-height: 1.25;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: max-content;
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-snap), box-shadow var(--dur-1) var(--ease-out);
}
html[data-theme="custom"] .btn:not(.secondary):not(.danger),
html[data-theme="amber"] .btn:not(.secondary):not(.danger) {
  text-shadow: none;
  font-weight: 650;
}
.btn:hover {
  background: var(--brand-hover);
  color: var(--on-brand);
}
.btn:active { transform: translateY(1px) scale(0.97); }
.btn.secondary {
  background: var(--panel);
  color: var(--text);
  border-color: var(--line);
}
.btn.secondary:hover {
  background: var(--panel-2);
  border-color: var(--line-strong);
  color: var(--text);
}
.btn.danger { background: var(--danger); color: #fff; }
.btn.danger:hover { color: #fff; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

table { width: 100%; border-collapse: collapse; font-size: var(--fs-13); }
th, td {
  border-bottom: 1px solid var(--line);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}
th { background: var(--panel-2); font-weight: 600; }

input[type=text], input[type=password], input[type=number], input[type=time],
textarea, select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  font-size: var(--fs-14);
  background: var(--panel);
  color: var(--text);
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
input:hover, textarea:hover, select:hover { border-color: var(--line-strong); }
input:focus-visible, textarea:focus-visible, select:focus-visible {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 0;
  align-items: center;
}
.toolbar-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 280px;
  min-width: 0;
}
.toolbar-search .search-input,
.toolbar input.search-input,
.toolbar input[type=text],
.toolbar input[type=search],
input.search-input {
  width: auto;
  flex: 1 1 180px;
  min-width: 140px;
  max-width: 420px;
  padding: 0 12px;
  font-size: var(--fs-13);
  line-height: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-elevated);
  box-sizing: border-box;
}
.toolbar-search .search-input:focus-visible,
.toolbar input.search-input:focus-visible {
  background: var(--panel);
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.toolbar-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  flex-shrink: 0;
  color: var(--muted);
  font-size: var(--fs-13);
  user-select: none;
}
.toolbar .btn,
.toolbar-search .btn {
  padding: 0 14px;
  height: 32px;
  min-height: 32px;
  box-sizing: border-box;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
.toolbar .btn.secondary {
  background: var(--panel);
  box-shadow: var(--shadow-1);
}
.toolbar .btn.secondary:hover {
  border-color: var(--brand);
  color: var(--fg-accent);
  box-shadow: var(--shadow-2);
}
.toolbar .btn:not(.secondary):not(.danger) {
  box-shadow: 0 1px 2px color-mix(in srgb, var(--brand) 28%, transparent);
}
.toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
textarea { min-height: 120px; font-family: var(--font-mono); }

.messages { list-style: none; padding: 0; margin: 0 0 8px; flex: 0 0 auto; }
/* Django flash 由壳层提成悬浮 toast，避免顶栏横幅顶起布局 */
#consoleMain > .messages[data-django-flash="1"] {
  display: none !important;
}
.messages li {
  padding: 8px 10px;
  border-radius: var(--radius-md);
  margin-bottom: 6px;
  border: 1px solid transparent;
  animation: msg-in var(--dur-2) var(--ease-out);
}
@keyframes msg-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
.messages .success { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
.messages .error { background: var(--danger-bg); color: var(--danger); }
.messages .warning { background: var(--warn-bg); color: var(--warn); }

.tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--fs-12);
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--text);
}
.tag.on { background: var(--brand-soft); color: var(--fg-accent); border-color: transparent; }
.tag.off { background: var(--danger-bg); color: var(--danger); border-color: transparent; }
/* 本地表：与「同步」品牌色区分，用成功绿表示已有物理表 */
.tag.local {
  background: var(--ok-bg);
  color: var(--ok);
  border-color: transparent;
}
.tag.miss {
  background: color-mix(in srgb, var(--muted) 14%, var(--panel));
  color: var(--muted);
  border-color: transparent;
}

/* —— 全局确认 / 提示弹窗 —— */
.cd-overlay {
  position: fixed;
  inset: 0;
  z-index: 14000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-2) var(--ease-out);
}
.cd-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
.cd-overlay[hidden] { display: none !important; }
html[data-low-gpu="1"] .cd-overlay {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(15, 23, 42, 0.55);
}
html[data-theme="dark"] .cd-overlay {
  background: rgba(4, 6, 12, 0.62);
}

.cd-dialog {
  width: min(440px, calc(100vw - 32px));
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow-3), 0 24px 48px rgba(18, 24, 48, 0.16);
  overflow: hidden;
  transform: translateY(10px) scale(0.97);
  opacity: 0;
  transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out);
}
.cd-overlay.is-open .cd-dialog {
  transform: none;
  opacity: 1;
}
html[data-low-gpu="1"] .cd-dialog {
  transition: none;
}

.cd-dialog-body {
  display: flex;
  gap: 14px;
  padding: 20px 20px 8px;
}
.cd-icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-soft);
  color: var(--fg-accent);
}
.cd-icon svg { width: 22px; height: 22px; }
.cd-dialog.is-danger .cd-icon {
  background: var(--danger-bg);
  color: var(--danger);
}
.cd-dialog.is-warn .cd-icon {
  background: var(--warn-bg);
  color: var(--warn);
}
.cd-dialog.is-ok .cd-icon {
  background: var(--ok-bg);
  color: var(--ok);
}
.cd-dialog.is-info .cd-icon,
.cd-dialog.is-primary .cd-icon {
  background: var(--brand-soft);
  color: var(--fg-accent);
}

.cd-copy { min-width: 0; flex: 1; padding-top: 2px; }
.cd-kicker {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.cd-title {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  line-height: 1.35;
}
.cd-message {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}
.cd-detail {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--panel-2);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
  white-space: pre-wrap;
  word-break: break-word;
}
.cd-detail[hidden],
.cd-kicker:empty { display: none !important; }

.cd-prompt {
  margin-top: 12px;
}
.cd-prompt[hidden] { display: none !important; }
.cd-prompt-label {
  display: block;
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.cd-prompt-input {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.cd-prompt-input:focus {
  border-color: color-mix(in srgb, var(--brand) 55%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-soft) 70%, transparent);
  background: var(--panel);
}
.cd-prompt-input.is-invalid {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent);
}
.cd-prompt-error {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--danger);
  line-height: 1.4;
}
.cd-prompt-error[hidden] { display: none !important; }
.cd-dialog.is-prompt {
  width: min(420px, calc(100vw - 32px));
}

.cd-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px 20px 18px;
}
.cd-actions .btn { min-width: 84px; }
.cd-dialog.is-danger .cd-btn-ok {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}
.cd-dialog.is-danger .cd-btn-ok:hover {
  filter: brightness(0.94);
  background: var(--danger);
}
html[data-theme="dark"] .cd-dialog.is-danger .cd-btn-ok {
  color: #1a0b0a;
}
.cd-dialog.is-warn .cd-btn-ok {
  background: var(--warn);
  border-color: var(--warn);
  color: #1a1208;
}
.cd-dialog.is-warn .cd-btn-ok:hover {
  filter: brightness(0.96);
  background: var(--warn);
}

/* Toast */
.cd-toast-host {
  position: fixed;
  top: calc(var(--topbar-h) + 14px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 14500;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  width: min(420px, calc(100vw - 24px));
}

/* 全屏弹层：挂到 body 后高于顶栏（见 ConsoleModal.portal） */
body > .global-var-modal,
body > .ot-overlay,
body > .obj-modal,
body > .bi-ai-modal,
body > .script-version-modal,
body > .stm-overlay,
body > .ai-prompt-modal,
body > #scriptAiModal.ai-overlay,
body > #scriptAiModal {
  z-index: 16000;
}
.cd-toast {
  pointer-events: auto;
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow-2);
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
  animation: cd-toast-in var(--dur-2) var(--ease-out);
}
.cd-toast.is-leaving {
  animation: cd-toast-out 180ms var(--ease-out) forwards;
}
.cd-toast-ico {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: var(--fg-accent);
}
.cd-toast.is-danger {
  border-color: color-mix(in srgb, var(--danger) 35%, var(--line));
  background: color-mix(in srgb, var(--danger-bg) 70%, var(--panel));
}
.cd-toast.is-danger .cd-toast-ico { color: var(--danger); }
.cd-toast.is-warn {
  border-color: color-mix(in srgb, var(--warn) 35%, var(--line));
  background: color-mix(in srgb, var(--warn-bg) 70%, var(--panel));
}
.cd-toast.is-warn .cd-toast-ico { color: var(--warn); }
.cd-toast.is-ok {
  border-color: color-mix(in srgb, var(--ok) 35%, var(--line));
  background: color-mix(in srgb, var(--ok-bg) 70%, var(--panel));
}
.cd-toast.is-ok .cd-toast-ico { color: var(--ok); }
.cd-toast-msg { flex: 1; min-width: 0; white-space: pre-wrap; word-break: break-word; }
.cd-toast-close {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 2px;
}
.cd-toast-close:hover { color: var(--text); }
@keyframes cd-toast-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}
@keyframes cd-toast-out {
  to { opacity: 0; transform: translateY(-6px); }
}
html[data-low-gpu="1"] .cd-toast {
  animation: none;
}

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.stat { font-size: 28px; font-weight: 700; color: var(--fg-accent); letter-spacing: -0.02em; }
.field { margin-bottom: 12px; }
.field label { display: block; margin-bottom: 4px; font-size: var(--fs-13); color: var(--muted); }
pre {
  background: #0b1220;
  color: #e2e8f0;
  padding: 12px;
  border-radius: var(--radius-md);
  overflow: auto;
  white-space: pre-wrap;
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  border: 1px solid transparent;
}
/* 浅色/自定义：保持「深底浅字」代码块，避免只改背景导致字色对比崩掉 */
html[data-theme="light"] pre,
html:not([data-theme]) pre {
  background: #0f172a;
  color: #e2e8f0;
  border-color: color-mix(in srgb, #0f172a 82%, var(--line));
}
html[data-theme="custom"] pre,
html[data-theme="amber"] pre {
  background: color-mix(in srgb, var(--ui-brand-custom, #2563eb) 18%, #0f172a);
  color: #e8eef8;
  border-color: color-mix(in srgb, #0f172a 70%, var(--line));
}
html[data-theme="dark"] pre {
  background: #070a0f;
  color: #e8edf7;
  border-color: var(--line);
}

.fs-resume-tip {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 12000;
  border: 0;
  border-radius: 999px;
  padding: 10px 14px;
  background: var(--brand);
  color: var(--on-brand);
  font-size: var(--fs-13);
  cursor: pointer;
  box-shadow: var(--shadow-3);
  transition: transform var(--dur-1) var(--ease-snap);
}
.fs-resume-tip:hover { transform: translateY(-1px); }

.cmd-palette-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.35);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  z-index: 12000;
}
.cmd-palette-backdrop.open { display: flex; }
.cmd-palette {
  width: min(440px, calc(100vw - 32px));
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  overflow: hidden;
  animation: msg-in var(--dur-2) var(--ease-out);
}
.cmd-palette header {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
}
.cmd-palette ul {
  list-style: none;
  margin: 0;
  padding: 8px;
}
.cmd-palette li { margin: 0; padding: 0; }
.cmd-palette button.cmd-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius-md);
  font-size: var(--fs-13);
  color: var(--text);
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.cmd-palette button.cmd-item:hover,
.cmd-palette button.cmd-item:focus-visible {
  background: var(--panel-2);
  outline: none;
}
.cmd-palette kbd {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: var(--bg-elevated);
  color: var(--muted);
}

@media (max-width: 900px) {
  .layout { grid-template-columns: var(--side-w) minmax(0, 1fr); }
  .grid-3 { grid-template-columns: 1fr; }
}

/* 主色变量仅供「自定义」主题消费；浅色/暗色固定使用上方默认 token，不受 UI_BRAND_COLOR 影响 */

html[data-density="compact"] {
  --fs-13: 12px;
  --fs-14: 13px;
  --fs-16: 14px;
  --topbar-h: 46px;
  --side-w: 148px;
  --space-4: 12px;
  --space-5: 18px;
}
html[data-density="compact"] .topbar .brand-subtitle {
  display: none;
}

html[data-fab-label="0"] .ai-fab-label,
.ai-fab.is-icon-only .ai-fab-label {
  display: none;
}
html[data-fab-label="0"] .ai-fab,
.ai-fab.is-icon-only {
  padding-right: 10px;
}