@font-face {
  font-family: "MiSans";
  src: url("/assets/fonts/MiSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "MiSans";
  src: url("/assets/fonts/MiSans-Medium.woff2") format("woff2");
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "MiSans";
  src: url("/assets/fonts/MiSans-Bold.woff2") format("woff2");
  font-weight: 650 800;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   主题层：浅色为默认（:root），深色在 [data-theme="dark"] 覆盖。
   全站其它 CSS 一律只引用变量，不写死颜色。
   切换：document.documentElement.dataset.theme = 'light' | 'dark'
   ========================================================================== */

:root {
  /* 晨雾蓝白：纸面、雾蓝面板与冷色输入层分开。 */
  --bg-base: #f7f8fa;
  --bg-panel: #f1f6fc;
  --bg-panel-2: #edf3fa;
  --bg-raised: #e7eff8;
  --bg-input: #f8fbff;
  --bg-elevated: #fdfeff;
  --bg-glass: rgba(250, 253, 255, 0.88);

  --line: #d6e1ee;
  --line-strong: #b9cde0;
  --line-faint: #e4edf6;
  --line-hover: #83a8cc;

  --text-1: #182a41;
  --text-2: #40556e;
  --text-3: #526b86;
  --text-4: #586f88;

  --brand: #2768d7;
  --brand-soft: rgba(39, 104, 215, 0.11);
  --brand-hover: #1854b9;
  --brand-glow: rgba(39, 104, 215, 0.22);
  --brand-2: #568ee5;

  /* 语义色（浅色下压深保证对比度） */
  --warn: #a06b24;
  --warn-soft: rgba(160, 107, 36, 0.12);
  --danger: #dc4147;
  --danger-soft: rgba(220, 65, 71, 0.10);
  --ok: #189e58;
  --ok-soft: rgba(24, 158, 88, 0.12);
  --info: #0e9fd8;
  --info-soft: rgba(14, 159, 216, 0.12);
  --purple: #7c4fe0;
  --purple-soft: rgba(124, 79, 224, 0.12);

  /* 彩色文字（徽标/胶囊用） */
  --brand-text: #2f5ce6;
  --ok-text: #11763f;
  --warn-text: #8b5705;
  --danger-text: #b62d39;
  --info-text: #0b7096;
  --purple-text: #693bc1;

  /* 选中态文字（导航激活等） */
  --active-text: var(--brand);
  --muted-brand-text: #4963a2;
  --onbrand: #ffffff;
  --button-bg: #2768d7;
  --button-bg-hover: #1854b9;
  --button-bg-end: #3c6fc8;

  /* 阴影与玻璃反光保留浅色阅读边界。 */
  --shadow-1: 0 1px 2px rgba(40, 74, 111, 0.06), 0 8px 24px -20px rgba(39, 104, 215, 0.35);
  --shadow-2: 0 4px 16px rgba(40, 74, 111, 0.09), 0 16px 40px -28px rgba(83, 102, 183, 0.3);
  --shadow-3: 0 18px 52px rgba(30, 58, 92, 0.18);

  --scroll-thumb: #b6c8dc;
  --scroll-thumb-hover: #87a5c3;
  --overlay-bg: rgba(26, 46, 72, 0.38);
  --topbar-bg: rgba(249, 252, 255, 0.84);
  --dot-ring: #f8fbff;
  --hover-wash: rgba(39, 104, 215, 0.07);
  --danger-line: rgba(220, 65, 71, 0.40);
  --row-alt: rgba(68, 117, 170, 0.035);

  --nav-grad-a: rgba(250, 253, 255, 0.95);
  --nav-grad-b: rgba(231, 241, 250, 0.93);
  --stat-grad-a: rgba(255, 255, 255, 0.97);
  --stat-grad-b: rgba(233, 243, 251, 0.95);
  --avatar-grad-a: #dceafb;
  --avatar-grad-b: #e4e0f7;

  --veil-line: rgba(57, 110, 163, 0.07);
  --sheen-1: rgba(96, 175, 222, 0.14);
  --sheen-2: rgba(131, 111, 210, 0.12);
  --aurora-1: rgba(99, 174, 236, 0.22);
  --aurora-2: rgba(143, 124, 221, 0.16);
  --aurora-3: rgba(87, 204, 217, 0.14);
  --ripple: rgba(255, 255, 255, 0.3);
  --card-hairline: linear-gradient(90deg, transparent, rgba(64, 149, 219, 0.5), rgba(131, 111, 210, 0.28), transparent);
  --surface-sheen: rgba(255, 255, 255, 0.8);
  --surface-edge: rgba(255, 255, 255, 0.76);
  --interactive-glow: rgba(48, 140, 217, 0.22);

  /* 代码块 */
  --code-bg: #f6f8fb;
  --code-text: #3a4356;
  --code-wash: rgba(59, 110, 245, 0.08);
  --link-line: rgba(59, 110, 245, 0.35);

  /* 登录页 */
  --glass-panel: rgba(255, 255, 255, 0.75);
  --glass-panel-2: rgba(255, 255, 255, 0.6);
  --glass-line: rgba(15, 23, 42, 0.08);
  --login-title-a: #1c2740;
  --login-title-b: #3b6ef5;
  --login-panel-bg: rgba(255, 255, 255, 0.55);
  /* 登录页星核场景 */
  --login-art-bg: radial-gradient(ellipse 85% 74% at 68% 48%, rgba(211, 232, 252, 0.8), transparent 68%), linear-gradient(140deg, #f7fbff, #eaf3fc 60%, #f1effb);
  --login-grid: rgba(59, 110, 245, 0.085);
  --login-scan: rgba(59, 110, 245, 0.09);
  --login-point-bg: rgba(255, 255, 255, 0.72);
  /* 星核配色：浅色下也用饱和电光蓝，只是底衬更浅 */
  --nuc-petal-stroke: #2f95e8;
  --nuc-petal-stroke-2: #6f5cf0;
  --nuc-petal-fill: rgba(59, 110, 245, 0.07);
  --nuc-orbit: #4aa6f0;
  --empty-img-filter: saturate(0.85) brightness(1.05);

  --r-sm: 4px;
  --r: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-xs: 3px;
  --r-pill: 999px;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 14px;
  --fs-lg: 15px;
  --fs-xl: 20px;
  --fs-2xl: 28px;
  --fs-3xl: 36px;

  /* 与 base.css 保持一致：MiSans 优先，缺失时回退系统字体栈。 */
  --font: "MiSans", Inter, "SF Pro Text", "Segoe UI", "PingFang SC", "Microsoft YaHei UI",
          "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC",
          "WenQuanYi Micro Hei", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Mono", Consolas,
               "Noto Sans Mono CJK SC", monospace;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --nav-w: 208px;
  --nav-w-collapsed: 60px;
  --top-h: 52px;

  /* 运营层次：外壳、内容面板、数字、队列与风险各用不同材质。 */
  --shell-grid: rgba(58, 114, 167, 0.055);
  --shell-horizon: rgba(70, 142, 205, 0.16);
  --nav-item-hover: rgba(71, 137, 201, 0.09);
  --nav-active-bg: linear-gradient(90deg, rgba(46, 112, 198, 0.15), rgba(78, 147, 206, 0.065) 72%, rgba(124, 92, 190, 0.045));
  --panel-bg: rgba(249, 252, 255, 0.96);
  --panel-border: rgba(133, 168, 201, 0.52);
  --panel-cap: rgba(229, 239, 250, 0.56);
  --queue-bg: rgba(225, 238, 250, 0.46);
  --queue-hover: rgba(213, 232, 249, 0.8);
  --risk-bg: rgba(250, 246, 252, 0.92);
  --risk-item-bg: rgba(229, 225, 241, 0.26);
  --shortcut-bg: rgba(234, 243, 253, 0.88);
  --shortcut-border: rgba(131, 166, 203, 0.48);
  --metric-surface: rgba(248, 252, 255, 0.74);
  --ice-blue: #326ba9;
  --ice-cyan: #126b86;
  --ice-purple: #7450b6;
  --accent-wash: linear-gradient(90deg, #4083c4, #45a0bc 52%, #8670bf);
  --decorative-opacity: 0.68;
}

/* ==========================================================================
   深色覆盖
   ========================================================================== */

[data-theme="dark"] {
  --bg-base: #080e19;
  --bg-panel: #0f1b2b;
  --bg-panel-2: #182639;
  --bg-raised: #213249;
  --bg-input: #0d1827;
  --bg-elevated: #16253a;
  --bg-glass: rgba(15, 27, 43, 0.86);

  --line: #263b54;
  --line-strong: #38536f;
  --line-faint: #1c2e43;
  --line-hover: #5480a8;

  --text-1: #edf5ff;
  --text-2: #bacce0;
  --text-3: #91a8c0;
  --text-4: #8099b4;

  --brand: #3b6ef5;
  --brand-soft: rgba(59, 110, 245, 0.12);
  --brand-hover: #5583ff;
  --brand-glow: rgba(59, 110, 245, 0.28);
  --brand-2: #6f9bff;

  --warn: #f5a524;
  --warn-soft: rgba(245, 165, 36, 0.12);
  --danger: #f2555a;
  --danger-soft: rgba(242, 85, 90, 0.12);
  --ok: #2eb872;
  --ok-soft: rgba(46, 184, 114, 0.12);
  --info: #4cc9f0;
  --info-soft: rgba(76, 201, 240, 0.12);
  --purple: #9b6dff;
  --purple-soft: rgba(155, 109, 255, 0.12);

  --brand-text: #8ab0ff;
  --ok-text: #58d29a;
  --warn-text: #f7bd57;
  --danger-text: #ff8589;
  --info-text: #76cef0;
  --purple-text: #b494ff;

  --active-text: #b6cdff;
  --muted-brand-text: #9fb9e6;
  --onbrand: #ffffff;
  --button-bg: #2c61c4;
  --button-bg-hover: #3971d8;
  --button-bg-end: #426fc6;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-3: 0 12px 40px rgba(0, 0, 0, 0.45);

  --scroll-thumb: #334c69;
  --scroll-thumb-hover: #50779e;
  --overlay-bg: rgba(3, 8, 17, 0.74);
  --topbar-bg: rgba(8, 17, 30, 0.82);
  --dot-ring: #111c2b;
  --hover-wash: rgba(114, 188, 240, 0.09);
  --danger-line: #663b4c;
  --row-alt: rgba(103, 165, 219, 0.04);

  --nav-grad-a: rgba(13, 26, 43, 0.97);
  --nav-grad-b: rgba(9, 19, 33, 0.96);
  --stat-grad-a: #172a40;
  --stat-grad-b: #111e30;
  --avatar-grad-a: #2d466b;
  --avatar-grad-b: #332e58;

  --veil-line: rgba(127, 185, 234, 0.06);
  --sheen-1: rgba(125, 205, 255, 0.12);
  --sheen-2: rgba(172, 137, 255, 0.12);
  --aurora-1: rgba(48, 129, 221, 0.25);
  --aurora-2: rgba(122, 86, 215, 0.2);
  --aurora-3: rgba(37, 169, 197, 0.15);
  --ripple: rgba(190, 227, 255, 0.25);
  --card-hairline: linear-gradient(90deg, transparent, rgba(112, 200, 255, 0.46), rgba(161, 133, 255, 0.28), transparent);
  --surface-sheen: rgba(166, 217, 255, 0.055);
  --surface-edge: rgba(177, 218, 255, 0.1);
  --interactive-glow: rgba(89, 181, 248, 0.25);

  --code-bg: #0d1119;
  --code-text: #cfd9e8;
  --code-wash: rgba(255, 255, 255, 0.07);
  --link-line: rgba(138, 176, 255, 0.27);

  --glass-panel: rgba(17, 30, 47, 0.78);
  --glass-panel-2: rgba(20, 35, 53, 0.7);
  --glass-line: #2b435e;
  --login-title-a: #f2f8ff;
  --login-title-b: #9ecbff;
  --login-panel-bg: rgba(8, 18, 32, 0.68);
  /* 登录页星核场景 */
  --login-art-bg: radial-gradient(ellipse 88% 78% at 68% 48%, rgba(29, 70, 124, 0.58), transparent 70%), linear-gradient(140deg, #081323, #0c1d34 60%, #151a34);
  --login-grid: rgba(122, 162, 255, 0.085);
  --login-scan: rgba(122, 162, 255, 0.10);
  --login-point-bg: rgba(20, 25, 34, 0.62);
  /* 星核配色：深色下走强发光的冰蓝紫 */
  --nuc-petal-stroke: #7fd4ff;
  --nuc-petal-stroke-2: #b07bff;
  --nuc-petal-fill: rgba(90, 150, 255, 0.10);
  --nuc-orbit: #bfe4ff;
  --empty-img-filter: none;

  /* 深空保持有内容的蓝黑层级，业务面板持续使用可读实底。 */
  --shell-grid: rgba(115, 179, 224, 0.075);
  --shell-horizon: rgba(60, 151, 214, 0.28);
  --nav-item-hover: rgba(90, 168, 223, 0.11);
  --nav-active-bg: linear-gradient(90deg, rgba(62, 132, 215, 0.24), rgba(52, 117, 177, 0.12) 72%, rgba(127, 102, 191, 0.1));
  --panel-bg: rgba(17, 32, 50, 0.98);
  --panel-border: rgba(88, 139, 183, 0.46);
  --panel-cap: rgba(52, 91, 130, 0.19);
  --queue-bg: rgba(31, 55, 80, 0.72);
  --queue-hover: rgba(42, 74, 107, 0.84);
  --risk-bg: rgba(28, 32, 54, 0.98);
  --risk-item-bg: rgba(68, 60, 95, 0.24);
  --shortcut-bg: rgba(29, 54, 81, 0.82);
  --shortcut-border: rgba(103, 160, 206, 0.48);
  --metric-surface: rgba(29, 53, 82, 0.86);
  --ice-blue: #91c7ff;
  --ice-cyan: #73d5e9;
  --ice-purple: #c2acff;
  --accent-wash: linear-gradient(90deg, #69b5f3, #72d1e4 52%, #b4a1ef);
  --decorative-opacity: 0.72;
}

/* ==========================================================================
   主题切换按钮（C 组在 shell.js 挂 .theme-toggle）
   ========================================================================== */

.theme-toggle {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: background 150ms var(--ease), color 150ms var(--ease),
    border-color 150ms var(--ease), transform 90ms var(--ease);
}

.theme-toggle:hover {
  background: var(--bg-panel-2);
  color: var(--text-1);
  border-color: var(--line-strong);
}

.theme-toggle:active { transform: scale(0.94); }
.theme-toggle .ico { width: 16px; height: 16px; }
.theme-toggle svg { width: 16px; height: 16px; }

/* 主题只控制材质参数，公共结构由各组件层复用。 */
html { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }
::selection { background: var(--brand-soft); color: var(--text-1); }
.theme-toggle:focus-visible,
.icon-btn:focus-visible,
.btn:focus-visible,
.ask-chip:focus-visible,
.demo-acc:focus-visible {
  border-color: var(--brand-hover);
  box-shadow: 0 0 0 3px var(--brand-soft), 0 0 24px -9px var(--interactive-glow);
}

/* ==========================================================================
   科幻感静态装饰（克制）
   ========================================================================== */

/* 卡片顶部细渐变线 */
.card {
  position: relative;
}
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--card-hairline);
  pointer-events: none;
}

/* 空状态插画：浅色下轻滤镜调和 */
[data-theme="light"] .empty-art img {
  filter: var(--empty-img-filter);
  opacity: 0.85;
}

/* ==========================================================================
   大屏铺满：页面级布局在宽屏下放开限制、加宽侧栏
   （用 .page 前缀提高优先级，盖过页面 JS 内联样式）
   ========================================================================== */

@media (min-width: 1800px) {
  .page .wb-grid { grid-template-columns: minmax(0, 1fr) 420px; }
  .page .ck-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .page .chat-layout { grid-template-columns: 260px minmax(0, 1fr); }
}

@media (min-width: 2400px) {
  .page .wb-grid { grid-template-columns: minmax(0, 1fr) 480px; }
}