/* ==========================================================================
   奕链 YiLink · 深青墨 × 链路朱 · 编辑式动量
   在 app.css 之后加载；只覆盖「令牌 + 门户 / 控制台外壳 / 工作台结构样式」，
   不动 DOM 契约、不动 app.js 的既有选择器。

   设计主张（换轨，不是抛光）：
     - 颜色：底 = 中性砂灰纸面（刻意避开「暖奶油」这个 AI 味最重的默认），
             墨 = 深青墨（带绿的近黑，不是纯灰黑），
             强调 = 链路朱橙 —— 全站唯一的有彩色，像一条被点亮的链路
     - 体积：靠分层柔和阴影与实心色块分区建立层级，删掉全站 1px 发丝线语言
     - 圆角：容器 18–22px / 内部件 12–16px / 按钮与标签 999px 胶囊（差异化，不是一刀切）
     - 排版：编辑式动量 —— 字号跳跃 3–5 倍，行高收紧，负字距只给拉丁；
             中文大标题字重封顶 600（雅黑 700 会发闷）；
             等宽字族只留给真实数值，不再当「科技感贴纸」到处刷
     - 交互：hover 抬升而非变色，60ms 错峰入场，焦点环 2px 实色
     - 明确去掉：32px 工程网格底纹、满屏等宽丝印小字、全站 hairline 边框、
                 玻璃拟态、渐变标题、发光光斑
   ========================================================================== */

/* ══════════════════════════════════════════════════════════════════════════
   A. 令牌 —— 浅色（默认 / 显式浅色）
   ══════════════════════════════════════════════════════════════════════════ */
:root,
:root[data-theme="light"] {
  color-scheme: light;

  /* 字体：全部系统栈（CSP 禁外链字体）。等宽只服务数值与代码。 */
  --font-sans: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system,
    "HarmonyOS Sans SC", "MiSans", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-disp: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system,
    "HarmonyOS Sans SC", "MiSans", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: "Cascadia Mono", ui-monospace, "SF Mono", "JetBrains Mono",
    Consolas, "Liberation Mono", monospace;
  --font-num: var(--font-mono);

  /* 尺度：差异化圆角 —— 内部件 12，容器另用 --radius-lg，按钮走胶囊 */
  --radius: 12px;
  --radius-sm: 10px;
  --radius-xs: 8px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* 底色 / 文字：中性砂灰纸面 + 深青墨 */
  --page-bg: #F2F1EE;
  --bg-0: #F2F1EE;
  --bg-1: #FCFCFB;
  --text: #0C1A1D;
  --muted: #5C6A6D;
  --grid-line: rgba(12, 26, 29, 0.03);

  /* 表面：全部实色（不再有玻璃三档） */
  --glass-1: #FFFFFF;
  --glass-2: #FFFFFF;
  --glass-3: #FBFAF8;
  --glass-inset: rgba(12, 26, 29, 0.03);
  --glass-line: #E5E3DE;
  --glass-line-strong: #D2D0C9;
  --glass-hi: inset 0 1px 0 rgba(255, 255, 255, 1);
  --glass-drop: 0 1px 2px rgba(12, 26, 29, 0.05);
  --shell-bg: #EAE8E3;
  --blur-1: none;
  --blur-2: none;
  --surface: #FFFFFF;
  --surface-raised: #FFFFFF;
  --panel: #FFFFFF;
  --panel-strong: #F5F4F1;
  --line: #E6E4DF;
  --line-strong: #D2D0C9;

  /* 仪表墙：深青墨实底，指标墙专用（硬指标工作台的主角面板） */
  --ink-bg: #0C1A1D;
  --ink-tile: rgba(255, 255, 255, 0.055);
  --ink-text: #EDF3F2;
  --ink-muted: #96A7A8;
  --ink-line: rgba(237, 243, 242, 0.12);
  /* 墨面内专用强调色：必须比浅色档的 --accent(#C9451A) 更亮，
     否则深底 #0C1A1D 上的对比度只有约 3.7:1（低于 AA 正文 4.5:1）。 */
  --ink-accent: #E4663A;
  --ink-accent-soft: rgba(228, 102, 58, 0.16);
  --ink-danger: #FF8A72;

  /* 环境光：一层极淡的链路朱晕，作为门户的呼吸，不做光斑 */
  --atmo-1: rgba(201, 69, 26, 0.075);
  --atmo-2: rgba(12, 26, 29, 0.022);
  --atmo-3: rgba(255, 255, 255, 0.6);
  --grain-op: 0.02;

  /* 强调：全站唯一有彩色 —— 链路朱橙 */
  --accent: #C9451A;
  --accent-2: #C9451A;
  --accent-soft: rgba(201, 69, 26, 0.10);
  --accent-line: rgba(201, 69, 26, 0.30);
  --accent-hover: #AE3812;
  --on-accent: #FFFFFF;
  --sel-bg: rgba(201, 69, 26, 0.20);

  /* 语义色：低饱和、与朱橙同族气质 */
  --warm: #8A5A0A;
  --warn: #96620B;
  --ok: #0E6B4E;
  --danger: #AC2118;
  --ok-soft: rgba(14, 107, 78, 0.11);
  --ok-line: rgba(14, 107, 78, 0.30);
  --warn-soft: rgba(150, 98, 11, 0.11);
  --warn-line: rgba(150, 98, 11, 0.32);
  --danger-soft: rgba(172, 33, 24, 0.10);
  --danger-line: rgba(172, 33, 24, 0.32);
  --info-soft: rgba(201, 69, 26, 0.10);
  --info-line: rgba(201, 69, 26, 0.30);
  --neutral-soft: rgba(12, 26, 29, 0.05);
  --neutral-line: rgba(12, 26, 29, 0.14);

  /* 阴影：三档分层 —— 静置 / 抬升 / 弹层。柔和、大扩散、低透明度。 */
  --shadow: 0 1px 2px rgba(12, 26, 29, 0.06);
  --shadow-1: 0 1px 2px rgba(12, 26, 29, 0.04),
    0 6px 18px -8px rgba(12, 26, 29, 0.12);
  --shadow-2: 0 2px 6px rgba(12, 26, 29, 0.06),
    0 24px 48px -22px rgba(12, 26, 29, 0.23);
  --shadow-3: 0 4px 10px rgba(12, 26, 29, 0.07),
    0 40px 80px -32px rgba(12, 26, 29, 0.30);
  --glow: none;

  /* 外壳分区阴影（用色块而非边框区分侧栏 / 顶栏） */
  --shell-shadow: 30px 0 70px -52px rgba(12, 26, 29, 0.40);
  --bar-shadow: 0 14px 36px -30px rgba(12, 26, 29, 0.34);

  /* 内嵌面 / 代码 */
  --soft-bg: #F1F0EC;
  --code-bg: rgba(12, 26, 29, 0.05);
  --code-text: #8E2E0F;
  --pre-bg: #F5F4F1;
  --pre-text: #0C1A1D;
  --row-hover: rgba(12, 26, 29, 0.035);
  --qcard-hover: #F7F6F3;
  --syn-c: #6C7573;
  --syn-k: #8E2E5F;
  --syn-s: #0A4A66;

  /* 动效：编辑式动量 —— 略长、有弹性、不拖沓 */
  --dur-1: 140ms;
  --dur-2: 220ms;
  --dur-3: 320ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.32, 0.5, 1);
  --spot-r: 190px;
  --pin-top: 96px;
}

/* ══════════════════════════════════════════════════════════════════════════
   B. 令牌 —— 深青墨夜色（跟随系统的深色档）
   ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --font-sans: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system,
      "HarmonyOS Sans SC", "MiSans", "PingFang SC", "Microsoft YaHei", sans-serif;
    --font-disp: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system,
      "HarmonyOS Sans SC", "MiSans", "PingFang SC", "Microsoft YaHei", sans-serif;
    --font-mono: "Cascadia Mono", ui-monospace, "SF Mono", "JetBrains Mono",
      Consolas, "Liberation Mono", monospace;
    --font-num: var(--font-mono);

    --radius: 12px;
    --radius-sm: 10px;
    --radius-xs: 8px;
    --radius-lg: 18px;
    --radius-xl: 22px;
    --radius-pill: 999px;

    --page-bg: #0B1416;
    --bg-0: #0B1416;
    --bg-1: #101B1E;
    --text: #E9EFEE;
    --muted: #8C9B9C;
    --grid-line: rgba(233, 239, 238, 0.035);

    --glass-1: #111C1F;
    --glass-2: #142023;
    --glass-3: #172528;
    --glass-inset: rgba(233, 239, 238, 0.03);
    --glass-line: rgba(233, 239, 238, 0.10);
    --glass-line-strong: rgba(233, 239, 238, 0.20);
    --glass-hi: inset 0 1px 0 rgba(233, 239, 238, 0.05);
    --glass-drop: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shell-bg: #0E181B;
    --blur-1: none;
    --blur-2: none;
    --surface: #111C1F;
    --surface-raised: #162326;
    --panel: #111C1F;
    --panel-strong: #162326;
    --line: rgba(233, 239, 238, 0.10);
    --line-strong: rgba(233, 239, 238, 0.20);

    --ink-bg: #162326;
    --ink-tile: rgba(233, 239, 238, 0.05);
    --ink-text: #E9EFEE;
    --ink-muted: #8C9B9C;
    --ink-line: rgba(233, 239, 238, 0.10);
    --ink-accent: #FF6B41;
    --ink-accent-soft: rgba(255, 107, 65, 0.16);
    --ink-danger: #FF7A68;

    --atmo-1: rgba(255, 107, 65, 0.09);
    --atmo-2: rgba(233, 239, 238, 0.018);
    --atmo-3: rgba(255, 255, 255, 0.02);
    --grain-op: 0.03;

    --accent: #FF6B41;
    --accent-2: #FF6B41;
    --accent-soft: rgba(255, 107, 65, 0.14);
    --accent-line: rgba(255, 107, 65, 0.36);
    --accent-hover: #FF8158;
    --on-accent: #2A0A02;
    --sel-bg: rgba(255, 107, 65, 0.24);

    --warm: #E8B44A;
    --warn: #E8B44A;
    --ok: #46D69A;
    --danger: #FF7A68;
    --ok-soft: rgba(70, 214, 154, 0.14);
    --ok-line: rgba(70, 214, 154, 0.34);
    --warn-soft: rgba(232, 180, 74, 0.13);
    --warn-line: rgba(232, 180, 74, 0.32);
    --danger-soft: rgba(255, 122, 104, 0.13);
    --danger-line: rgba(255, 122, 104, 0.34);
    --info-soft: rgba(255, 107, 65, 0.13);
    --info-line: rgba(255, 107, 65, 0.32);
    --neutral-soft: rgba(233, 239, 238, 0.06);
    --neutral-line: rgba(233, 239, 238, 0.16);

    --shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5),
      0 12px 28px -16px rgba(0, 0, 0, 0.75);
    --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.55),
      0 30px 60px -26px rgba(0, 0, 0, 0.82);
    --shadow-3: 0 4px 12px rgba(0, 0, 0, 0.6),
      0 48px 90px -34px rgba(0, 0, 0, 0.9);
    --glow: none;

    --shell-shadow: 30px 0 70px -52px rgba(0, 0, 0, 0.9);
    --bar-shadow: 0 14px 36px -30px rgba(0, 0, 0, 0.9);

    --soft-bg: rgba(233, 239, 238, 0.05);
    --code-bg: rgba(233, 239, 238, 0.07);
    --code-text: #FF9C7A;
    --pre-bg: rgba(233, 239, 238, 0.045);
    --pre-text: #E9EFEE;
    --row-hover: rgba(233, 239, 238, 0.045);
    --qcard-hover: #162326;
    --syn-c: #8C9B9C;
    --syn-k: #E4663A;
    --syn-s: #8FC3E8;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   C. 令牌 —— 深青墨夜色（显式深色档，与 B 同值，供用户手选「深色」）
   ══════════════════════════════════════════════════════════════════════════ */
:root[data-theme="dark"] {
  color-scheme: dark;

  --font-sans: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system,
    "HarmonyOS Sans SC", "MiSans", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-disp: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system,
    "HarmonyOS Sans SC", "MiSans", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: "Cascadia Mono", ui-monospace, "SF Mono", "JetBrains Mono",
    Consolas, "Liberation Mono", monospace;
  --font-num: var(--font-mono);

  --radius: 12px;
  --radius-sm: 10px;
  --radius-xs: 8px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  --page-bg: #0B1416;
  --bg-0: #0B1416;
  --bg-1: #101B1E;
  --text: #E9EFEE;
  --muted: #8C9B9C;
  --grid-line: rgba(233, 239, 238, 0.035);

  --glass-1: #111C1F;
  --glass-2: #142023;
  --glass-3: #172528;
  --glass-inset: rgba(233, 239, 238, 0.03);
  --glass-line: rgba(233, 239, 238, 0.10);
  --glass-line-strong: rgba(233, 239, 238, 0.20);
  --glass-hi: inset 0 1px 0 rgba(233, 239, 238, 0.05);
  --glass-drop: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shell-bg: #0E181B;
  --blur-1: none;
  --blur-2: none;
  --surface: #111C1F;
  --surface-raised: #162326;
  --panel: #111C1F;
  --panel-strong: #162326;
  --line: rgba(233, 239, 238, 0.10);
  --line-strong: rgba(233, 239, 238, 0.20);

  --ink-bg: #162326;
  --ink-tile: rgba(233, 239, 238, 0.05);
  --ink-text: #E9EFEE;
  --ink-muted: #8C9B9C;
  --ink-line: rgba(233, 239, 238, 0.10);
  --ink-accent: #FF6B41;
  --ink-accent-soft: rgba(255, 107, 65, 0.16);
  --ink-danger: #FF7A68;

  --atmo-1: rgba(255, 107, 65, 0.09);
  --atmo-2: rgba(233, 239, 238, 0.018);
  --atmo-3: rgba(255, 255, 255, 0.02);
  --grain-op: 0.03;

  --accent: #FF6B41;
  --accent-2: #FF6B41;
  --accent-soft: rgba(255, 107, 65, 0.14);
  --accent-line: rgba(255, 107, 65, 0.36);
  --accent-hover: #FF8158;
  --on-accent: #2A0A02;
  --sel-bg: rgba(255, 107, 65, 0.24);

  --warm: #E8B44A;
  --warn: #E8B44A;
  --ok: #46D69A;
  --danger: #FF7A68;
  --ok-soft: rgba(70, 214, 154, 0.14);
  --ok-line: rgba(70, 214, 154, 0.34);
  --warn-soft: rgba(232, 180, 74, 0.13);
  --warn-line: rgba(232, 180, 74, 0.32);
  --danger-soft: rgba(255, 122, 104, 0.13);
  --danger-line: rgba(255, 122, 104, 0.34);
  --info-soft: rgba(255, 107, 65, 0.13);
  --info-line: rgba(255, 107, 65, 0.32);
  --neutral-soft: rgba(233, 239, 238, 0.06);
  --neutral-line: rgba(233, 239, 238, 0.16);

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5),
    0 12px 28px -16px rgba(0, 0, 0, 0.75);
  --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.55),
    0 30px 60px -26px rgba(0, 0, 0, 0.82);
  --shadow-3: 0 4px 12px rgba(0, 0, 0, 0.6),
    0 48px 90px -34px rgba(0, 0, 0, 0.9);
  --glow: none;

  --shell-shadow: 30px 0 70px -52px rgba(0, 0, 0, 0.9);
  --bar-shadow: 0 14px 36px -30px rgba(0, 0, 0, 0.9);

  --soft-bg: rgba(233, 239, 238, 0.05);
  --code-bg: rgba(233, 239, 238, 0.07);
  --code-text: #FF9C7A;
  --pre-bg: rgba(233, 239, 238, 0.045);
  --pre-text: #E9EFEE;
  --row-hover: rgba(233, 239, 238, 0.045);
  --qcard-hover: #162326;
  --syn-c: #8C9B9C;
  --syn-k: #E4663A;
  --syn-s: #8FC3E8;
}

/* ══════════════════════════════════════════════════════════════════════════
   D. 排版基线：编辑式字号节奏；等宽字族只留给真实数值
   ══════════════════════════════════════════════════════════════════════════ */
body {
  background: var(--page-bg);
  background-attachment: fixed;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .portal-title, .view-title, .side-name {
  font-family: var(--font-disp);
}

/* 大标题：中文系统字在特大号下「真粗」会发闷，封顶 600、字距归零，
   层级靠字号跳跃而不是字重差 */
h1, h2, h3 {
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.16;
  text-wrap: balance;
}

/* 读数与代码：任何会变宽的数字都锁 tabular-nums，刷新时不跳字宽 */
.num,
.spec-val b,
.stat .v,
.live-metric strong,
.health-score,
.deck-foot,
td.num,
.live-row span:last-child,
.portal-title,
.view-title {
  font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════════════════════════════════════
   E. 门户：7:5 编辑式不对称台面 + 读数样张 + 独立工具块
   ══════════════════════════════════════════════════════════════════════════ */
.portal {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  /* 顶距收敛到 88px：再大主台面就浮到视口中段，读起来像布局 bug 而不像留白 */
  padding: 88px 44px 96px;
  overflow: hidden;
  background-color: var(--page-bg);
  /* V1 数据手册风：门户不再铺链路朱晕（--atmo 环境光全站关闭），回到纯纸面底色 */
}
/* 左上角一段实心朱橙：编辑式刊头的起笔，替代原来的发丝线顶条 */
.portal::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 172px; height: 6px;
  border-radius:0 0 2px 0;
  background: var(--accent);
}
.portal-inner {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
  text-align: left;
}

/* —— 主舞台：5:7 不对称，仪表样张坐在右下，是这一屏的重心 —— */
.portal-hero {
  display: grid;
  /* 5:7 —— 仪表样张比文案更宽：这一屏的重心是读数，不是标题 */
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 64px;
  align-items: end;
}

/* 铭牌标签：实心浅朱胶囊。原来的那枚 7px 装饰圆点已删除 ——
   圆点只有在表达真实状态时才配存在，这里它什么都不表示。 */
.portal-eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 30px;
  padding: 7px 15px;
  border: 0;
  border-radius:var(--radius-pill);
  background: var(--accent-soft);
}

/* 门户主标题：3–5 倍字号跳跃，行高收紧到 1.04 */
.portal-title {
  margin: 0;
  font-family: var(--font-disp);
  font-size: clamp(46px, 6.3vw, 76px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.04;
  color: var(--text);
  background: none;
  -webkit-text-fill-color: currentColor;
  text-wrap: balance;
}
/* 第二行的强调片段：唯一的朱橙落点，形成编辑式两色标题 */
.portal-title .pt-accent {
  color: var(--accent);
}
.portal-sub {
  margin: 26px 0 0;
  max-width: 30em;
  font-size: 17px;
  line-height: 1.72;
  color: var(--muted);
}
.portal-cta {
  margin-top: 42px;
  display: flex;
  gap: 14px;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.portal-btn {
  appearance: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: 0.005em;
  padding: 16px 34px;
  border-radius:var(--radius-pill);
  transition:
    background-color var(--dur-2) var(--ease-out),
    border-color var(--dur-2) var(--ease-out),
    color var(--dur-2) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out),
    transform var(--dur-2) var(--ease-spring);
}
.portal-btn:active { transform: translateY(1px) scale(0.99); }
.portal-btn.primary {
  background: var(--accent);
  color: var(--on-accent);
  border: 1px solid transparent;
  box-shadow: var(--shadow-3);
}@media (hover: hover) {
.portal-btn.primary:hover {
  background: var(--accent-hover);
  box-shadow: var(--shadow-3);
  transform: translateY(-2px);
}}

.portal-btn.ghost {
  background: var(--surface);
  color: var(--text);
  border: 1px solid transparent;
  box-shadow: var(--shadow-1);
}@media (hover: hover) {
.portal-btn.ghost:hover {
  background: var(--surface);
  color: var(--accent);
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}}


/* —— 仪表样张：这一屏唯一的深色块 ——
   层级靠「色块 + 尺度」建立：深青墨实底把读数顶成主角，
   上沿一条量程刻线（repeating 硬边，不是多段渐变，避免接缝带）。
   深底上的量程色用链路朱的亮档 —— 原色 #C9451A 在深青墨上对比度不足。 */
.portal-spec {
  --spec-accent: var(--ink-accent);
  position: relative;
  padding: 28px 14px 14px;
  border: 0;
  border-radius:var(--radius-xl);
  background: var(--ink-bg);
  box-shadow: var(--shadow-3);
  overflow: hidden;
}
.portal-spec::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background-image: repeating-linear-gradient(
    90deg,
    var(--spec-accent) 0 2px,
    transparent 2px 13px
  );
  opacity: 0.55;
}
.spec-kicker {
  display: block;
  padding: 2px 8px 14px;
  border: 0;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--spec-accent);
}
.spec-row {
  padding: 16px 18px 17px;
  margin-bottom: 8px;
  border: 0;
  border-radius:var(--radius-lg);
  background: var(--ink-tile);
}
.spec-label {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
  margin-bottom: 9px;
}
.spec-val { display: flex; align-items: baseline; gap: 8px; }
/* 样张读数走大字号主角：这是门户的视觉重力中心 */
.spec-val b {
  font-family: var(--font-num);
  font-size: 34px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink-text);
  font-variant-numeric: tabular-nums;
}
.spec-val i { font-style: normal; font-family: var(--font-num); font-size: 13px; color: var(--ink-muted); }
.spec-meta {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.spec-spark { width: 112px; height: 28px; margin-left: auto; align-self: center; color: var(--spec-accent); }
.spec-foot {
  padding: 12px 10px 4px;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
}

/* 工具入口盘：12 栅格 × 2 行 —— 首格 6×2（大，带读数折线），
   次格 6×1，余下两格各 3×1。合计正好铺满 24 格，中间与末尾都不留空格。
   这是一块不对称盘面，不是四等分表格 —— 四张等大卡片是最典型的模板脸。 */
.portal-cards {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(126px, auto));
  gap: 16px;
  text-align: left;
  border: 0;
  border-radius:0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.portal-card.is-lead { grid-column: 1 / span 6; grid-row: 1 / span 2; }
/* 宽格（次格）横向用满：副标题挪到同一基线的右侧 ——
   否则 6 栅格的宽格子里是「左边一小簇图标文字 + 右边一整片空白」。 */
.portal-card:nth-child(2) {
  grid-column: 7 / span 6;
  grid-row: 1;
  grid-template-columns: 46px auto minmax(0, 1fr);
  grid-template-rows: auto;
  column-gap: 14px;
}
.portal-card:nth-child(2) .pc-ico { grid-row: auto; }
.portal-card:nth-child(2) .pc-desc { grid-column: 3; text-align: right; align-self: center; }
.portal-card:nth-child(3) { grid-column: 7 / span 3; grid-row: 2; }
.portal-card:nth-child(4) { grid-column: 10 / span 3; grid-row: 2; }
.portal-card {
  appearance: none;
  cursor: pointer;
  position: relative;
  font-family: inherit;
  text-align: left;
  background: var(--surface);
  border: 0;
  border-radius:var(--radius-lg);
  padding: 22px 22px 24px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 4px;
  align-items: center;
  align-content: center;
  box-shadow: var(--shadow-1);
  transition:
    box-shadow var(--dur-2) var(--ease-out),
    transform var(--dur-2) var(--ease-spring),
    background-color var(--dur-2) var(--ease-out);
}
/* 顶部朱橙指示条：hover 时点亮 */
.portal-card::after {
  content: "";
  position: absolute;
  left: 22px; right: 22px; top: 0;
  height: 3px;
  border-radius:0 0 2px 2px;
  background: transparent;
  transition: background-color var(--dur-2) var(--ease-out);
}@media (hover: hover) {
.portal-card:hover {
  background: var(--surface);
  box-shadow: var(--shadow-2);
  transform: translateY(-4px);
}}
@media (hover: hover) {
.portal-card:hover::after { background: var(--accent); }}

.portal-card:active { transform: translateY(-1px); }
.pc-ico {
  grid-row: 1 / span 2;
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius:2px;
  color: var(--accent);
  background: var(--accent-soft);
  border: 0;
  transition: background-color var(--dur-2) var(--ease-out);
}@media (hover: hover) {
.portal-card:hover .pc-ico { background: var(--accent-line); color: var(--on-accent); }}

.pc-name {
  font-family: var(--font-disp);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0;
}
.pc-desc {
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
}

/* 首格（大）：着色块 + 读数折线，是入口盘里唯一「有画面」的格。
   底色用 --accent-soft（链路朱 10%），与上方深青墨样张形成冷 / 暖两块对照 ——
   满足「盘面里至少两三格有真实视觉变化」，不再是清一色白底文字卡。 */
.portal-card.is-lead {
  padding: 26px 26px 22px;
  background: var(--accent-soft);
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto 1fr;
  align-items: start;
  align-content: start;
  row-gap: 10px;
}
.portal-card.is-lead .pc-ico {
  grid-row: auto;
  width: 52px; height: 52px;
  border-radius:2px;
}
.portal-card.is-lead .pc-name { font-size: 19px; }
.portal-card.is-lead .pc-desc { font-size: 13px; }
.portal-card.is-lead::after { left: 26px; right: 26px; }
/* 折线填满首格的下半区：把中间那块「空洞」变成真正的图表面积。
   polyline 上带了 vector-effect="non-scaling-stroke" ——
   preserveAspectRatio="none" 会做非等比拉伸，没有它线宽会被一起拉粗。 */
.pc-spark {
  width: 100%;
  height: 100%;
  min-height: 60px;
  margin-top: 12px;
  color: var(--accent);
  opacity: 0.9;
}@media (hover: hover) {
.portal-card.is-lead:hover .pc-spark { opacity: 1; }}


/* 入场：主台面先落定，入口盘随后错峰 60ms 一档。
   用 animation + backwards，不用 forwards —— forwards 会把 transform
   钉死在动画终值上，hover 的抬升就永久失效了。
   prefers-reduced-motion 下整块不注册，走静态呈现。 */
@media (prefers-reduced-motion: no-preference) {
  .portal-lead > *,
  .portal-spec,
  .portal-card {
    animation: portal-rise 620ms var(--ease-out) backwards;
  }
  .portal-lead > *:nth-child(1) { animation-delay: 40ms; }
  .portal-lead > *:nth-child(2) { animation-delay: 100ms; }
  .portal-lead > *:nth-child(3) { animation-delay: 160ms; }
  .portal-lead > *:nth-child(4) { animation-delay: 220ms; }
  .portal-spec { animation-delay: 190ms; }
  .portal-card:nth-child(1) { animation-delay: 260ms; }
  .portal-card:nth-child(2) { animation-delay: 320ms; }
  .portal-card:nth-child(3) { animation-delay: 370ms; }
  .portal-card:nth-child(4) { animation-delay: 420ms; }
}
@keyframes portal-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

/* ── 门户 ↔ 控制台衔接（原 apple-hig 层职责，这里重写）── */
.sidebar,
.viewbar {
  transition: opacity 0.45s var(--ease-out), transform 0.5s var(--ease-out);
}
body.portal-active .sidebar {
  opacity: 0;
  transform: translateX(-14px);
  pointer-events: none;
}
body.portal-active .skip-link,
body.portal-active #progress { display: none; }
/* 控制台激活（不在门户态）时，门户层不再接受任何命中 ——
   修 P0-2：此前门户区虽已淡出，仍占着命中层，点侧栏/顶栏会被它拦截。
   只关命中、不 display:none，保证向上滚回门户时仍可正常点击（回到门户态即恢复）。 */
body:not(.portal-active) .portal { pointer-events: none; }
.portal-inner > * {
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
/* 回到门户时：主舞台先落定，工具块随后 —— 60ms 错峰 */
body.portal-active .portal-inner > .portal-cards { transition-delay: 60ms; }
body:not(.portal-active) .portal-inner > * {
  opacity: 0;
  transform: translateY(-14px);
}

/* ══════════════════════════════════════════════════════════════════════════
   F. 控制台外壳：侧栏 / 顶栏改实心色块分区（去 hairline）
   ══════════════════════════════════════════════════════════════════════════ */
.sidebar {
  background: var(--shell-bg);
  border-right: 0;
  box-shadow: var(--shell-shadow);
}
.viewbar {
  background: var(--bg-1);
  border-bottom: 0;
  box-shadow: var(--bar-shadow);
}
/* 品牌块：实心方章；控制台锁墨后跟随磷光绿（门户侧品牌朱橙） */
.logo {
  background: var(--accent);
  border: 0;
  border-radius:2px;
  color: var(--on-accent);
}
.side-name { font-family: var(--font-disp); font-weight: 600; letter-spacing: -0.01em; }
.side-name em { color: var(--muted); font-weight: 400; }
.side-tag { font-size: 11.5px; letter-spacing: 0.02em; color: var(--muted); }
.side-tag .tag-dot { color: var(--line-strong); }

/* 分组：靠留白分段，不再整组一条分隔线；组标题走无衬线小字 + 朱橙点 */
.side-nav .ws { border-top: 0; margin-top: 20px; }
.side-nav .ws:first-child { margin-top: 0; }
.ws-head {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--muted);
  border-radius:var(--radius-sm);
  transition: color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}
.ws-ico { color: inherit; }@media (hover: hover) {
.ws-head:hover { background: var(--neutral-soft); color: var(--text); }}
@media (hover: hover) {
.ws-head:hover .ws-ico { color: var(--accent); }}

.ws.active > .ws-head { color: var(--text); }
.ws.active > .ws-head .ws-ico { color: var(--accent); }

/* 侧栏项：胶囊，选中 = 浅朱实心填充 + 朱橙字（不靠左侧贴条） */
.side-link {
  border-radius:var(--radius-pill);
  border-left: 0;
  font-size: 13.5px;
  transition:
    background-color var(--dur-1) var(--ease-out),
    color var(--dur-1) var(--ease-out);
}@media (hover: hover) {
.side-link:hover { background: var(--neutral-soft); transform: none; }}

.side-link.active {
  background: var(--accent-soft);
  border-left: 0;
  color: var(--accent);
  font-weight: 600;
}
.lock-ico { color: var(--muted); }
.side-link.active .lock-ico { color: var(--accent); }
.side-ext { color: var(--accent); font-weight: 500; }
.aidc-mon-status { font-size: 11.5px; letter-spacing: 0; color: var(--muted); }
.side-foot .badge,
.side-foot-sub { font-family: var(--font-sans); }
/* 门户 ↔ 控制台：进入控制台后侧栏常驻，这里给一个显式的回门户入口 */
.side-home {
  display: block; width: 100%;
  margin-bottom: 10px; padding: 6px 10px;
  font-family: var(--font-sans); font-size: 12px; letter-spacing: 0;
  color: var(--muted); text-align: left;
  background: transparent; border: 1px solid var(--line);
  border-radius: var(--radius-xs); cursor: pointer;
}
.side-home:hover { color: var(--text); border-color: var(--line-strong); }

/* 顶栏 */
.view-title { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em; }
.breadcrumb { font-size: 11.5px; letter-spacing: 0.02em; }
.bc-sep { color: var(--line-strong); }
.link-copy-btn {
  border-radius:var(--radius-pill);
  border: 0;
  background: var(--soft-bg);
  font-family: var(--font-sans);
  font-size: 12.5px;
  letter-spacing: 0;
  text-transform: none;
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}@media (hover: hover) {
.link-copy-btn:hover { background: var(--accent-soft); color: var(--accent); }}

.theme-btn { border-radius:var(--radius-pill); }
.theme-menu { border-radius:var(--radius-lg); box-shadow: var(--shadow-2); border: 0; padding: 8px; }
.theme-opt { border-radius:var(--radius-sm); font-size: 13.5px; font-family: var(--font-sans); }
.theme-status { font-family: var(--font-sans); font-size: 11.5px; }

/* 状态点：回到圆点（信号灯语义），不再做方形 LED */
.dot,
.signal-dot { border-radius:var(--radius-pill); }
.badge {
  border-radius:var(--radius-pill);
  border: 0;
  background: var(--neutral-soft);
  font-family: var(--font-sans);
  font-size: 11.5px;
  letter-spacing: 0;
}

/* ── 外壳结构（一）：侧栏主组 / 次组拉开层级 ────────────────────────────
   侧栏现有 3 个分组、14 条链接，但主组「工具箱」是每天都在用的功能，
   另外两组（项目档案 / 实验记录）是只读参考资料。旧样式给三组完全相同的
   胶囊与字号 —— 14 条链接读下来是一张没有主次的清单，用户找不到「我今天
   要干的活」在哪。
   这里不改 DOM、不加类：分组本来就带 data-ws，直接按它区分主次。
   主组：行高加大、字号上调、分组标题提亮；组与组之间用留白切开。
   次组：压成紧凑参考行，颜色降一档。
   于是视线先落在「能做什么」，再落到「这个项目怎么做的」。 */
.side-nav .ws[data-ws="tools"] { margin-bottom: 26px; }
.side-nav .ws[data-ws="tools"] > .ws-head { color: var(--text); }
.side-nav .ws[data-ws="tools"] .side-link {
  min-height: 40px;
  font-size: 14px;
  padding-top: 10px;
  padding-bottom: 10px;
}
/* 「监控与档案」是跳转子页的外链组，视觉降一级：小一号、弱一档颜色，
   让视线先落在网络工具与我的设备两组实时能力上。 */
.side-nav .ws[data-ws="links"] > .ws-head { opacity: 0.82; }
.side-nav .ws[data-ws="links"] .side-link {
  min-height: 32px;
  font-size: 13px;
  color: var(--muted);
  padding-top: 6px;
  padding-bottom: 6px;
}
.side-nav .ws[data-ws="links"] .side-link.active { color: var(--accent); }

/* 选中指示只保留一层：app.css 给 .side-link.active 画了 3px 左贴条，
   而 F 节已把选中态改成浅朱胶囊填充 —— 两者叠加会出现「胶囊 + 左侧竖条」
   两层指示，是换皮肤时留下的叠影。按 F 节的既定意图，去掉贴条。 */
.side-link.active::before { display: none; }

/* ── 外壳结构（二）：顶栏一个主动作 ────────────────────────────────────
   旧顶栏把「搜索」和「复制链接」做成两枚一模一样的灰胶囊，读不出主次 ——
   但这两个动作的分量完全不同：搜索（Ctrl+K）是主要入口，复制链接是偶发小工具。
   现在搜索用浅朱实心、字号加粗，复制链接降为无底色安静按钮。
   同时把右侧控件与标题之间用一条实色分隔（靠背景块，不用 1px 发丝线）。 */
#btn-cmdk {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}@media (hover: hover) {
#btn-cmdk:hover { background: var(--accent-line); color: var(--on-accent); }}

#btn-copy-link { background: transparent; color: var(--muted); }@media (hover: hover) {
#btn-copy-link:hover { background: var(--soft-bg); color: var(--text); }}

.viewbar-right { gap: 8px; }

/* ══════════════════════════════════════════════════════════════════════════
   G. 工作台：硬指标驾驶舱（指标墙置顶）+ 文案次行 + 独立入口块
   ══════════════════════════════════════════════════════════════════════════ */
/* 工作台骨架：指标墙置顶全宽当主角，文案降级为次行 */
#tab-overview > .hero {
  border-top: 0;
  padding: 14px 0 0;
}
.hero {
  grid-template-columns: minmax(0, 1fr);
  gap: 26px;
}
/* 全宽之后指标墙恢复左右双区（≤768px 由 app.css 回落单栏） */
.hero-side .command-deck {
  grid-template-columns: minmax(0, 1.42fr) minmax(260px, .88fr);
  margin: 0;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 6px 14px;
  border-radius:var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.lede { max-width: 68ch; line-height: 1.75; font-size: 15px; }

/* 标题降级：指标墙才是第一视觉，标题只做「这页是什么」的说明 */
.hero h1 {
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.22;
  letter-spacing: -0.01em;
}
.hero h1 .grad {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--accent);
  font-weight: inherit;
}

/* 两张入口卡：实色块 + 分层阴影，hover 抬升；主卡加一道朱橙顶盖 */
.hero-entry {
  background: var(--surface);
  border: 0;
  border-radius:var(--radius-xl);
  box-shadow: var(--shadow-1);
  transition:
    box-shadow var(--dur-2) var(--ease-out),
    transform var(--dur-2) var(--ease-spring);
}@media (hover: hover) {
.hero-entry:hover {
  box-shadow: var(--shadow-2);
  transform: translateY(-3px);
}}

.hero-entry.is-primary {
  border-top: 3px solid var(--accent);
}@media (hover: hover) {
.hero-entry.is-primary:hover {
  box-shadow: var(--shadow-2);
}}

.he-title { font-size: 15px; font-weight: 600; }
.he-sub { font-family: var(--font-sans); font-size: 12.5px; letter-spacing: 0; color: var(--muted); }
.he-link {
  border-radius:var(--radius);
  border: 0;
  transition:
    background-color var(--dur-1) var(--ease-out),
    color var(--dur-1) var(--ease-out),
    transform var(--dur-1) var(--ease-out);
}@media (hover: hover) {
.he-link:hover { background: var(--accent-soft); transform: translateX(2px); }}

.he-link em { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0; color: var(--muted); }

/* 事实条：胶囊标签 */
.hero-facts { gap: 9px 12px; }
.hero-facts .fact {
  font-family: var(--font-sans);
  font-size: 12.5px;
  letter-spacing: 0;
  border: 0;
  border-radius:var(--radius-pill);
  background: var(--soft-bg);
  padding: 7px 14px;
}
.hero-facts .fact b { font-family: var(--font-num); color: var(--text); font-variant-numeric: tabular-nums; }
.tech-details > summary { font-size: 12.5px; letter-spacing: 0.02em; color: var(--muted); font-family: var(--font-sans); }
.chip { border-radius:var(--radius-pill); font-family: var(--font-sans); font-size: 12px; border: 0; background: var(--soft-bg); }
.chip b { font-family: var(--font-mono); color: var(--accent); }

/* —— 指标墙：深青墨仪表墙，硬指标工作台的主角 ——
   砂灰纸面上一块实墨面板：数字是白色仪表读数，健康度走朱橙，
   这块墙决定了工作台「监控台」而不是「营销页」的身份 */
.command-deck {
  border: 0;
  border-radius:var(--radius-xl);
  background: var(--ink-bg);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}
/* 示波器格底纹：V1 关闭装饰性网格渐变，墨面保持纯色 */
.command-deck::before {
  opacity: 1;
  background-image: none;
}
.command-deck h2 {
  color: var(--ink-text);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  margin: 10px 0 4px;
}
.deck-kicker {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
}
.deck-desc { color: var(--ink-muted); font-size: 12.5px; }
.hero-side .deck-primary {
  border-right: 1px solid var(--ink-line);
  border-bottom: 0;
}
/* 读数瓦片：墨面上的浅白瓦，数字走超大仪表字号 */
.live-metric {
  background: var(--ink-tile);
  border: 0;
  border-radius:var(--radius);
  padding: 15px 16px 16px;
}
.live-metric span {
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.live-metric strong {
  color: var(--ink-accent);
  font-size: clamp(28px, 2.6vw, 40px);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-top: 8px;
}
/* 健康度：墙上的大读数 */
.health-score {
  font-size: clamp(44px, 4vw, 60px);
  color: var(--ink-accent);
}
.command-deck .badge {
  background: var(--ink-tile);
  color: var(--ink-text);
}
.deck-label { color: var(--ink-muted); font-size: 12px; }
.deck-foot { color: var(--ink-muted); }
.health-item span { color: var(--ink-muted); }
.health-bar {
  height: 5px;
  border-radius:var(--radius-pill);
  background: var(--ink-line);
}
/* 墨面板里的四态组件（空 / 加载 / 错误 / 无权限）—— app.css 的默认四态是
   「浅色卡片 + 虚线边」，落进深青墨仪表墙就是一块白斑。这里把落在墨面内的
   四态整体改走 --ink-* 令牌：面 = 浅白瓦、字 = 墨面文字、骨架 = 墨面瓦片。
   只作用于 .command-deck 子树，工作台里落在浅面上的四态保持原样。 */
.command-deck .state {
  background: var(--ink-tile);
  border-color: var(--ink-line);
  color: var(--ink-muted);
}
.command-deck .state-error { border-color: var(--ink-danger); }
.command-deck .state-error .state-text { color: var(--ink-text); }
.command-deck .state .state-text b { color: var(--ink-text); }
.command-deck .state .state-ico { color: var(--ink-accent); opacity: 1; }
.command-deck .state details summary { color: var(--ink-muted); }
.command-deck .state details pre {
  background: rgba(0, 0, 0, 0.26);
  border-color: var(--ink-line);
  color: var(--ink-muted);
}
.command-deck .skel i {
  background: var(--ink-tile);
}
/* 墨面里的按钮：实心主按钮用墨面专用亮橙（深底上才够对比），
   幽灵按钮退成墨面的安静样式，不再借用浅面的 --soft-bg */
.command-deck .btn-primary {
  background: var(--ink-accent);
  color: #10201D;
}@media (hover: hover) {
.command-deck .btn-primary:hover { background: #FF8158; }}

.command-deck .btn-ghost {
  background: var(--ink-tile);
  color: var(--ink-text);
}@media (hover: hover) {
.command-deck .btn-ghost:hover { background: var(--ink-accent-soft); color: var(--ink-accent); }}

/* 离线态的「健康度」读数：app.css 把它的 background 与 color 都设成 --danger，
   文字与底色同色 —— 墨面上只会看到一块没有任何信息的纯红方块（「离线」两个字
   完全看不见）。改成「淡红实底 + 亮红文字」的告警读数，读数本身可读。
   注意 .deck-offline 加在 #command-deck 自身上，不是它的后代，所以是两个类连着写。 */
.command-deck.deck-offline .health-score {
  display: inline-block;
  padding: 2px 10px;
  border-radius:var(--radius-sm);
  background: rgba(255, 122, 104, 0.16);
  color: var(--ink-danger);
}
@media (max-width: 768px) {
  /* 收窄后指标墙回落单栏（这里必须压过上面的双列规则，否则窄屏被挤成竖条） */
  .hero-side .command-deck { grid-template-columns: minmax(0, 1fr); }
  .hero-side .deck-primary {
    border-right: 0;
    border-bottom: 1px solid var(--ink-line);
  }
}

/* 读数带：从「一格连一格的边框条」改成独立读数卡阵列 */
.stats {
  gap: 12px;
  border: 0;
  border-radius:0;
  margin: 26px 0 10px;
  overflow: visible;
}
.stats-bench-note {
  grid-column: 1 / -1;
  padding: 12px 18px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  letter-spacing: 0;
  color: var(--muted);
  border: 0;
  border-radius:var(--radius);
  background: var(--panel-strong);
}
.stats-bench-note b { color: var(--text); font-weight: 600; }
.stat {
  background: var(--surface);
  border: 0;
  border-left: 0;
  border-radius:var(--radius-lg);
  box-shadow: var(--shadow-1);
  padding: 20px 20px 22px;
  transition: box-shadow var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-spring);
}@media (hover: hover) {
.stat:hover { background: var(--surface); box-shadow: var(--shadow-2); transform: translateY(-2px); }}

.stat .k {
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.stat .v {
  font-family: var(--font-num);
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -0.02em;
}
.stat .v small { font-family: var(--font-sans); font-size: 12px; color: var(--muted); }
/* 基准卡：朱橙胶囊角标，替代原来的虚线与斜纹 */
.stat-bench {
  border-style: none;
  background-image: none;
  position: relative;
}
.stat-bench::before {
  content: "基准";
  position: absolute;
  top: 12px; right: 12px;
  font-family: var(--font-sans);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--accent);
  background: var(--accent-soft);
  border: 0;
  border-radius:var(--radius-pill);
  padding: 2px 8px;
  opacity: 1;
}

/* ── 读数区构图：两组读数不再等分堆叠 ──────────────────────────────────
   问题：原来两条各 4 张、完全等宽的 .stat 条带上下相叠，8 张卡一样重，
   读者找不到「最该看的那个数」。
   解法：A 组（基准读数）给出主次 —— 一个主读数跨两列领衔；
         B 组（项目规模）整组收进一条共享面板，不再是四张并列卡。 */

/* A 组：1 主 + 3 次。主读数跨 2 列，字号再上一档，标签转正文色。 */
.stats--bench { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.stats--bench .stat--lead { grid-column: span 2; }
.stats--bench .stat--lead .k { color: var(--text); }
.stats--bench .stat--lead .v { font-size: clamp(30px, 3.1vw, 40px); }

/* B 组：四读数合成一条面板 —— 去卡片化，与 A 组的浮起卡形成层级差。
   面板本身是实色浅面，四格共享；无分隔线，靠留白分组（沿用「删掉发丝线」的约定）。 */
.stats--scale {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0 0 10px;
  padding: 6px 8px;
  background: var(--panel-strong);
  border-radius:var(--radius-xl);
  box-shadow: var(--shadow-1);
}
.stats--scale .stat {
  background: transparent;
  box-shadow: none;
  border-radius:var(--radius);
  padding: 16px 20px 18px;
}@media (hover: hover) {
.stats--scale .stat:hover {
  background: var(--glass-inset);
  box-shadow: none;
  transform: none;
}}

.stats--scale .stat .k { font-size: 11.5px; }
.stats--scale .stat .v { font-size: 24px; }
/* 「项目成果」标题贴着读数条，当作这条面板的题头，不再另起一段
   （加一节 .section-head 基类，确保压过后文里 .section-head 的 margin-bottom） */
.section-head.section-head--scale { margin-bottom: 12px; }

/* 滚动深度入场（app.css H3 的 yl-depth）会让 #tab-overview 的 .stats / .quick-grid
   在「进入视口」时最多下移 22px（translateY(22px) scale(.988)），随滚动才归位。
   若紧跟其后的区块标题只留 8px 间距，滚动途中标题必被上一块压住 —— 实测压掉
   约 12px 的字头。给这三个「跟在深度块之后」的标题留 26px，任何滚动位置都不碰字；
   同时让标题更贴近它自己那一块（下方 12–20px），层级反而更清楚。
   用 #tab-overview > 限定：别的页签里 .stats 后面跟 .section-head 的地方
   （如 dclearn-stats）没有深度入场，不该被这条一起改掉。 */
#tab-overview > .stats + .section-head,
#tab-overview > .quick-grid + .section-head { margin-top: 26px; }

/* 六张并列 qcard 原先是 auto-fill（宽屏挤成 5+1 的孤儿行），
   改成 3 列定盘 = 2 行 × 3，并把唯一的外链卡（跨层监控台）单独做深，
   当作「跨出本站」的独立出口，不再是六张等重方块的最后一张。 */
.quick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.section-head + .quick-grid { margin-top: 0; }

/* 外链出口卡：深青墨实底 —— 与指标墙同一材质语言，
   在浅色入口盘里一眼可辨「这张会离开本站」。 */
#aidc-mon-qcard {
  background: var(--ink-bg);
  color: var(--ink-text);
  box-shadow: var(--shadow-2);
}@media (hover: hover) {
#aidc-mon-qcard:hover { background: var(--ink-bg); color: var(--ink-text); box-shadow: var(--shadow-3); }}

#aidc-mon-qcard b { color: var(--ink-text); }
#aidc-mon-qcard .q-sub { color: var(--ink-muted); }
#aidc-mon-qcard .q-ico { background: var(--ink-accent-soft); color: var(--ink-accent); }@media (hover: hover) {
#aidc-mon-qcard:hover .q-ico { background: var(--ink-accent); color: #10201D; }}

/* 集群未接入时仍要能读：不用 app.css 的 grayscale（会把墨底洗成脏灰），
   改为整体降透明 + 标签转墨面弱色。 */
#aidc-mon-qcard.aidc-gated { opacity: 0.55; filter: none; }

/* 中窄屏：三块一起回落，避免 5 列主读数被挤成竖条。
   1260 是算出来的：内容区宽 ≈ 视口 − 236(侧栏) − 2×36(沟槽)，
   5 列要留够 180px/格（否则读数与单位换行）：
   (v − 352)/5 ≥ 180 → v ≥ 1252，取整到 1260。 */
@media (max-width: 1260px) {
  .stats--bench { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats--bench .stat--lead { grid-column: span 2; }
  .stats--scale { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .quick-grid { grid-template-columns: minmax(0, 1fr); }
  .stats--scale { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 4px; }
}

/* 快捷入口：独立方块阵列，不共用边框网格 */
.quick-grid {
  gap: 12px;
  border: 0;
  border-radius:0;
  overflow: visible;
  margin: 30px 0 10px;
}
.qcard {
  border: 0;
  border-radius:var(--radius-lg);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-1);
  padding: 18px 18px 17px;
  transition: box-shadow var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-spring);
}@media (hover: hover) {
/* .qcard 是 <a>：不写 color 会落到 UA 默认链接蓝，破坏全站唯一强调色 */
.qcard:hover { color: var(--text); }}

.qcard b { color: inherit; }@media (hover: hover) {
.qcard:hover {
  background: var(--surface);
  box-shadow: var(--shadow-2);
  transform: translateY(-3px);
}}

.qcard b { font-family: var(--font-disp); font-weight: 600; font-size: 14.5px; }
.q-sub { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0; color: var(--muted); }
.q-ico {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius:2px;
  color: var(--accent);
  background: var(--accent-soft);
  transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}@media (hover: hover) {
.qcard:hover .q-ico { background: var(--accent); color: var(--on-accent); }}


/* 区块标题：靠上方留白分段，不再画规则线 */
.section-head {
  border-top: 0;
  padding-top: 0;
  margin-top: 8px;
  margin-bottom: 20px;
}
.section-head h2 {
  font-family: var(--font-disp);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.hint { font-family: var(--font-sans); font-size: 12.5px; letter-spacing: 0; }

/* 空态：实心浅面，不用虚线 */
#recent-tasks {
  border: 0;
  border-radius:var(--radius-lg);
  background: var(--panel-strong);
}

/* ══════════════════════════════════════════════════════════════════════════
   H. 数据可读性：表格 / 代码 / 日志
   ══════════════════════════════════════════════════════════════════════════ */
table {
  background: var(--surface);
  border: 0;
  border-radius:var(--radius-lg);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
th, td { padding: 12px 16px; }
th {
  background: var(--panel-strong);
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
}
td { font-size: 13.5px; }
th.num, td.num, table td:nth-child(n) .mono { font-variant-numeric: tabular-nums; }@media (hover: hover) {
tr:hover td { background: var(--row-hover); }}

code { font-family: var(--font-mono); border-radius:var(--radius-xs); }
pre { font-family: var(--font-mono); border-radius:var(--radius-lg); }

/* 视角卡 / 文档卡：实色块 + 分层阴影，hover 抬升 */
.card {
  background: var(--surface);
  border: 0;
  border-radius:var(--radius-lg);
  box-shadow: var(--shadow-1);
  transition:
    box-shadow var(--dur-2) var(--ease-out),
    transform var(--dur-2) var(--ease-spring);
}@media (hover: hover) {
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
}}

.modal {
  background: var(--surface-raised);
  border: 0;
  border-radius:var(--radius-xl);
  box-shadow: var(--shadow-3);
}
.modal .m-logo { background: var(--accent-soft); border: 0; color: var(--accent); border-radius:2px; }
.modal-mask { background: rgba(12, 26, 29, 0.42); }

/* ══════════════════════════════════════════════════════════════════════════
   I. 交互与可达性
   ══════════════════════════════════════════════════════════════════════════ */
:where(button, a, [tabindex], summary, input, select, textarea):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* 无类名的 <a>（文档正文里的普通链接）此前落到 UA 默认链接蓝，破坏唯一强调色；
   用 :not([class]) 只兜住这些裸链接，绝不碰到任何有类名的组件链接。 */
a:not([class]),
a:not([class]):visited {
  color: var(--accent);
  text-underline-offset: 2px;
}
.btn { border-radius:var(--radius-pill); }
/* 权限提示条：实心浅面 + 一道语义色左盖 */
.perm-banner {
  border-radius:var(--radius-lg);
  background: var(--warn-soft);
  border: 0;
  border-left: 4px solid var(--warn);
}
/* 自检告警条同样去边框化 */
.selfcheck-bar { border-radius:var(--radius-lg); }

/* ══════════════════════════════════════════════════════════════════════════
   K. 控制台不再锁墨（旧的「终端驾驶舱 · 方向 A」已撤）
   ══════════════════════════════════════════════════════════════════════════
   旧方案在 .app 子树里把整套令牌重定义成深青墨 + 磷光绿，控制台因此不跟随
   浅色档。它有两个甲方一眼就会问的问题：
     ① 从门户滚进控制台，强调色由链路朱橙跳成磷光绿 —— 一个产品两套身份色；
     ② 顶栏主题开关对控制台完全无效：用户点「浅色」，控制台仍是一片黑，
        开关形同虚设。
   现在统一：控制台与门户共用同一套令牌与链路朱橙，跟随用户的浅色 / 深色选择。
   需要「深色读数面板」的地方不再靠整页反色，而是由 --ink-* 令牌单独上色 ——
   门户的读数样张、工作台的指标墙都是这么做的，层级比整页反色干净得多。
   随之去掉的还有 .app 上的 28px 示波器格底纹：E 节已声明全站不要工程网格，
   K 节当初又给控制台加了回去，两处自相矛盾。
   ══════════════════════════════════════════════════════════════════════════ */

/* 实时读数与健康度读数都改由 --ink-accent（亮链路朱）着色，见 G 节。
   早先这里用 --accent 覆盖过 .live-metric strong：浅色档下那是 #C9451A 深橙，
   压在 #0C1A1D 墨底上只有约 3.7:1，低于 AA 正文标准，已撤。 */

/* ══════════════════════════════════════════════════════════════════════════
   J. 窄屏
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1020px) {
  .portal { padding: 104px 26px 72px; align-items: flex-start; }
  .portal-hero { grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: start; }
  .portal-spec { max-width: 520px; }
  .portal-title { font-size: clamp(38px, 8.4vw, 56px); }
  /* 平板：抽成 2×2 —— 所有格子回到单格、首格不再跨行跨列，
     否则 12 栅格的两行跨位会在窄栏下留出空格 */
  .portal-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    margin-top: 48px;
  }
  .portal-card.is-lead,
  .portal-card:nth-child(2),
  .portal-card:nth-child(3),
  .portal-card:nth-child(4) {
    grid-column: auto;
    grid-row: auto;
  }
}
@media (max-width: 560px) {
  .portal { padding: 96px 18px 60px; }
  .portal::before { width: 104px; height: 5px; }
  .portal-title { font-size: clamp(34px, 10.6vw, 46px); }
  .portal-sub { font-size: 16px; }
  .portal-cards { grid-template-columns: minmax(0, 1fr); }
  .portal-cta { flex-direction: column; align-items: stretch; }
  .portal-btn { width: 100%; }
  .portal-spec { max-width: none; }
  .spec-val b { font-size: 30px; }
  .spec-spark { display: none; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .live-metric strong { font-size: 24px; }
  .health-score { font-size: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar, .viewbar, .portal-inner > * {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  .card, .hero-entry, .portal-btn, .q-ico, .pc-ico, .stat, .portal-card, .qcard {
    transition-duration: 0.01ms !important;
  }
}