/* ==========================================================================
   多租户智能消防管理平台 · 设计系统
   9 套风格主题（默认「晨曦白」浅色），令牌见文件头 themes 区块
   ========================================================================== */
/* ==========================================================================
   主题令牌：9 套风格（默认 晨曦白 · 浅色），由顶栏「风格」切换器驱动
   html[data-theme="xxx"] 覆盖 :root 默认值
   ========================================================================== */
:root {
  --radius: 14px;
  --radius-sm: 9px;
  --font: "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", "Cascadia Code", Consolas, monospace;

  /* 告警等级徽标底色（配白字）—— 品牌色 --flame/--orange/--amber 太亮，
     白字压上去只有 2.8~3.4:1，投屏/客户现场会「看不清」，故单独取可读版本（均 ≥5:1）。
     只用于「底色」，发光/描边/图表仍走品牌色 --vwt-rgb 等。 */
  --lvb-p0: #c62f21; --lvb-p1: #b3510f; --lvb-p2: #8f5f08; --lvb-p3: #0b6e88;

  /* 小字号「状态字色」默认取品牌亮色（深色主题下足够可读）；
     3 套浅色主题各自覆盖为深色可读版本，详见下方主题块。 */
  --tx-red: var(--flame); --tx-green: var(--emerald); --tx-amber: var(--amber);
  --tx-cyan: var(--cyan); --tx-orange: var(--orange);
}

/* ---------- 1. 晨曦白（浅色 · 默认） ---------- */
:root,
html[data-theme="light"] {
  color-scheme: light;
  --bg-0: #eef3fa; --bg-1: #f6f9fd; --bg-2: #e7eef7;
  --bg0-rgb: 238, 243, 250; --deep-rgb: 246, 249, 253; --inset-rgb: 240, 245, 251;
  --float-rgb: 255, 255, 255; --panel-rgb: 255, 255, 255; --panel2-rgb: 244, 248, 253;
  --panel: rgba(255, 255, 255, .9); --panel-solid: #ffffff; --panel-2: rgba(244, 248, 253, .92);
  --tint-rgb: 24, 58, 105; --tint-strong-rgb: 24, 58, 105; --txt-rgb: 24, 58, 105;
  --line: rgba(24, 58, 105, .14); --line-strong: rgba(24, 58, 105, .3);
  --txt-1: #0f1c2e; --txt-2: #4a5c74; --txt-3: #5f6f86;
  --cyan: #0d8fb3; --cyan-rgb: 13, 143, 179; --cyan-dim: rgba(13, 143, 179, .12);
  --blue: #2f6fed; --blue-rgb: 47, 111, 237;
  --violet: #7c4ff0; --violet-rgb: 124, 79, 240;
  --emerald: #0f9d76; --emerald-rgb: 15, 157, 118;
  --amber: #d18b0a; --amber-rgb: 209, 139, 10;
  --orange: #e06a1e; --orange-rgb: 224, 106, 30;
  --flame: #dc3a2c; --flame-rgb: 220, 58, 44;
  --pink: #d6418e;
  --on-primary: #ffffff;
  --on-cyan: #0a6d8a; --on-blue: #2456b8; --on-violet: #6636d6; --on-emerald: #0a7156;
  --on-amber: #8a5c08; --on-flame: #b5301f; --on-orange: #a84b15;
  --overlay-rgb: 18, 34, 58;
  --shadow: 0 18px 44px -20px rgba(21, 44, 80, .3);
  --glow-cyan: 0 0 0 1px rgba(13, 143, 179, .36), 0 0 24px -8px rgba(13, 143, 179, .38);
  /* 浅色主题：状态字色换成深色可读版本（×白底 5.1~6.2:1，×淡底色 ≥4.9:1） */
  --tx-red: #b5301f; --tx-green: #0a6f54; --tx-amber: #8a5c08; --tx-cyan: #0a6d8a; --tx-orange: #a8481a;
}

/* ---------- 2. 暖阳米（浅色 · 暖调） ---------- */
html[data-theme="light-sand"] {
  color-scheme: light;
  --bg-0: #f7f3ea; --bg-1: #fcf9f4; --bg-2: #efe8dc;
  --bg0-rgb: 247, 243, 234; --deep-rgb: 252, 249, 244; --inset-rgb: 244, 238, 229;
  --float-rgb: 255, 253, 250; --panel-rgb: 255, 253, 249; --panel2-rgb: 247, 241, 232;
  --panel: rgba(255, 253, 249, .92); --panel-solid: #fffdf9; --panel-2: rgba(247, 241, 232, .94);
  --tint-rgb: 96, 68, 34; --tint-strong-rgb: 96, 68, 34; --txt-rgb: 96, 68, 34;
  --line: rgba(96, 68, 34, .16); --line-strong: rgba(96, 68, 34, .32);
  --txt-1: #2c2116; --txt-2: #5e4f3c; --txt-3: #75664f;
  --cyan: #c2410c; --cyan-rgb: 194, 65, 12; --cyan-dim: rgba(194, 65, 12, .12);
  --blue: #b45309; --blue-rgb: 180, 83, 9;
  --violet: #92400e; --violet-rgb: 146, 64, 14;
  --emerald: #4d7c0f; --emerald-rgb: 77, 124, 15;
  --amber: #a16207; --amber-rgb: 161, 98, 7;
  --orange: #ea580c; --orange-rgb: 234, 88, 12;
  --flame: #b91c1c; --flame-rgb: 185, 28, 28;
  --pink: #be185d;
  --on-primary: #ffffff;
  --on-cyan: #9a3412; --on-blue: #92400e; --on-violet: #78350f; --on-emerald: #3f6212;
  --on-amber: #854d0e; --on-flame: #991b1b; --on-orange: #9a3412;
  --overlay-rgb: 60, 42, 20;
  --shadow: 0 18px 44px -20px rgba(80, 55, 25, .3);
  --glow-cyan: 0 0 0 1px rgba(194, 65, 12, .34), 0 0 24px -8px rgba(194, 65, 12, .36);
  --tx-red: #b91c1c; --tx-green: #4d7c0f; --tx-amber: #7d4c05; --tx-cyan: #c2410c; --tx-orange: #b8440a;
}

/* ---------- 3. 冰湖青（浅色 · 冷调） ---------- */
html[data-theme="light-mint"] {
  color-scheme: light;
  --bg-0: #edf7f6; --bg-1: #f5fbfa; --bg-2: #e2f0ee;
  --bg0-rgb: 237, 247, 246; --deep-rgb: 245, 251, 250; --inset-rgb: 236, 245, 244;
  --float-rgb: 255, 255, 255; --panel-rgb: 255, 255, 255; --panel2-rgb: 238, 247, 246;
  --panel: rgba(255, 255, 255, .9); --panel-solid: #ffffff; --panel-2: rgba(238, 247, 246, .92);
  --tint-rgb: 18, 74, 70; --tint-strong-rgb: 18, 74, 70; --txt-rgb: 18, 74, 70;
  --line: rgba(18, 74, 70, .15); --line-strong: rgba(18, 74, 70, .3);
  --txt-1: #0c2b29; --txt-2: #3d5b58; --txt-3: #4f706c;
  --cyan: #0d9488; --cyan-rgb: 13, 148, 136; --cyan-dim: rgba(13, 148, 136, .12);
  --blue: #0e7490; --blue-rgb: 14, 116, 144;
  --violet: #6d5bd0; --violet-rgb: 109, 91, 208;
  --emerald: #16a34a; --emerald-rgb: 22, 163, 74;
  --amber: #b7791f; --amber-rgb: 183, 121, 31;
  --orange: #ea7317; --orange-rgb: 234, 115, 23;
  --flame: #dc2626; --flame-rgb: 220, 38, 38;
  --pink: #db2777;
  --on-primary: #ffffff;
  --on-cyan: #0c6a63; --on-blue: #155e75; --on-violet: #5b45bd; --on-emerald: #12702f;
  --on-amber: #92400e; --on-flame: #b91c1c; --on-orange: #a8420c; /* 原 #c2410c/#15803d/#0f766e 压淡底只有 4.3~4.45:1 */
  --overlay-rgb: 16, 52, 50;
  --shadow: 0 18px 44px -20px rgba(16, 60, 55, .28);
  --glow-cyan: 0 0 0 1px rgba(13, 148, 136, .34), 0 0 24px -8px rgba(13, 148, 136, .36);
  --tx-red: #b91c1c; --tx-green: #0f7a37; --tx-amber: #8a5c12; --tx-cyan: #0b7268; --tx-orange: #b35410;
}

/* ---------- 4. 科技深蓝（深色 · 经典） ---------- */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg-0: #04070f; --bg-1: #070d1a; --bg-2: #0b1526;
  --bg0-rgb: 4, 7, 15; --deep-rgb: 2, 7, 15; --inset-rgb: 4, 10, 20;
  --float-rgb: 7, 14, 26; --panel-rgb: 13, 24, 43; --panel2-rgb: 18, 32, 55;
  --panel: rgba(13, 24, 43, .72); --panel-solid: #0d1728; --panel-2: rgba(18, 32, 55, .66);
  --tint-rgb: 74, 123, 178; --tint-strong-rgb: 94, 165, 224; --txt-rgb: 74, 123, 178;
  --line: rgba(74, 123, 178, .22); --line-strong: rgba(94, 165, 224, .38);
  --txt-1: #e8f3ff; --txt-2: #9fb6d1; --txt-3: #7f97b3;
  /* 深色主题：状态字色直接用品牌亮色（对深底普遍 ≥8:1） */
  --tx-red: var(--flame); --tx-green: var(--emerald); --tx-amber: var(--amber); --tx-cyan: var(--cyan); --tx-orange: var(--orange);
  --cyan: #22d3ee; --cyan-rgb: 34, 211, 238; --cyan-dim: rgba(34, 211, 238, .16);
  --blue: #3b82f6; --blue-rgb: 59, 130, 246;
  --violet: #8b5cf6; --violet-rgb: 139, 92, 246;
  --emerald: #10d9a0; --emerald-rgb: 16, 217, 160;
  --amber: #fbbf24; --amber-rgb: 251, 191, 36;
  --orange: #ff7a2f; --orange-rgb: 255, 122, 47;
  --flame: #ff4d3d; --flame-rgb: 255, 77, 61;
  --pink: #f472b6;
  --on-primary: #04121c;
  --on-cyan: #a9f0fb; --on-blue: #bcd4ff; --on-violet: #c3a8ff; --on-emerald: #5ef0c3;
  --on-amber: #f5d489; --on-flame: #f7a79c; --on-orange: #ffab74;
  --overlay-rgb: 0, 0, 0;
  --shadow: 0 18px 46px -18px rgba(0, 0, 0, .86);
  --glow-cyan: 0 0 0 1px rgba(34, 211, 238, .32), 0 0 26px -6px rgba(34, 211, 238, .5);
}

/* ---------- 5. 赤焰红（深色 · 消防主题） ---------- */
html[data-theme="dark-flame"] {
  color-scheme: dark;
  --bg-0: #100606; --bg-1: #17090a; --bg-2: #200d0e;
  --bg0-rgb: 16, 6, 6; --deep-rgb: 12, 4, 4; --inset-rgb: 24, 9, 9;
  --float-rgb: 30, 12, 13; --panel-rgb: 42, 17, 18; --panel2-rgb: 56, 23, 23;
  --panel: rgba(42, 17, 18, .74); --panel-solid: #200e0f; --panel-2: rgba(56, 23, 23, .66);
  --tint-rgb: 214, 96, 74; --tint-strong-rgb: 244, 126, 96; --txt-rgb: 214, 96, 74;
  --line: rgba(214, 96, 74, .24); --line-strong: rgba(244, 126, 96, .42);
  --txt-1: #ffeeea; --txt-2: #dcb4ac; --txt-3: #a5837c; /* 原 #9d7a73 压深红面板只有 4.45:1 */
  /* 深色主题：状态字色直接用品牌亮色（对深底普遍 ≥8:1） */
  --tx-red: var(--flame); --tx-green: var(--emerald); --tx-amber: var(--amber); --tx-cyan: var(--cyan); --tx-orange: var(--orange);
  --cyan: #ff6a3d; --cyan-rgb: 255, 106, 61; --cyan-dim: rgba(255, 106, 61, .16);
  --blue: #ffa03d; --blue-rgb: 255, 160, 61;
  --violet: #ff4d8d; --violet-rgb: 255, 77, 141;
  --emerald: #35c48b; --emerald-rgb: 53, 196, 139;
  --amber: #ffc53d; --amber-rgb: 255, 197, 61;
  --orange: #ff7a2f; --orange-rgb: 255, 122, 47;
  --flame: #ff3b30; --flame-rgb: 255, 59, 48;
  --pink: #ff5fa2;
  --on-primary: #1c0603;
  --on-cyan: #ffc9b6; --on-blue: #ffdcb4; --on-violet: #ffc2d8; --on-emerald: #a8f0d3;
  --on-amber: #ffe6a8; --on-flame: #ffc0ba; --on-orange: #ffd0b3;
  --overlay-rgb: 0, 0, 0;
  --shadow: 0 18px 46px -18px rgba(0, 0, 0, .84);
  --glow-cyan: 0 0 0 1px rgba(255, 106, 61, .34), 0 0 26px -6px rgba(255, 106, 61, .52);
}

/* ---------- 6. 森野绿（深色） ---------- */
html[data-theme="dark-forest"] {
  color-scheme: dark;
  --bg-0: #05100c; --bg-1: #08170f; --bg-2: #0c2119;
  --bg0-rgb: 5, 16, 12; --deep-rgb: 3, 11, 8; --inset-rgb: 7, 21, 16;
  --float-rgb: 10, 28, 21; --panel-rgb: 14, 38, 29; --panel2-rgb: 20, 51, 39;
  --panel: rgba(14, 38, 29, .74); --panel-solid: #0e2119; --panel-2: rgba(20, 51, 39, .66);
  --tint-rgb: 74, 152, 116; --tint-strong-rgb: 96, 186, 142; --txt-rgb: 74, 152, 116;
  --line: rgba(74, 152, 116, .24); --line-strong: rgba(96, 186, 142, .4);
  --txt-1: #e7fff5; --txt-2: #a6cebb; --txt-3: #739687; /* 原 #6d8f7f 压极深绿底 4.45:1，差一点点 */
  /* 深色主题：状态字色直接用品牌亮色（对深底普遍 ≥8:1） */
  --tx-red: var(--flame); --tx-green: var(--emerald); --tx-amber: var(--amber); --tx-cyan: var(--cyan); --tx-orange: var(--orange);
  --cyan: #34d399; --cyan-rgb: 52, 211, 153; --cyan-dim: rgba(52, 211, 153, .16);
  --blue: #2dd4bf; --blue-rgb: 45, 212, 191;
  --violet: #a3e635; --violet-rgb: 163, 230, 53;
  --emerald: #10d9a0; --emerald-rgb: 16, 217, 160;
  --amber: #fbbf24; --amber-rgb: 251, 191, 36;
  --orange: #f59e0b; --orange-rgb: 245, 158, 11;
  --flame: #f35c4c; --flame-rgb: 243, 92, 76; /* #ef4444 在极深绿底上做小红字只有 4.3:1 */
  --pink: #f472b6;
  --on-primary: #05170f;
  --on-cyan: #aeffd9; --on-blue: #a9f5ec; --on-violet: #ddf7a8; --on-emerald: #8ff0d0;
  --on-amber: #f8e2a3; --on-flame: #f8b4b4; --on-orange: #f8d9a3;
  --overlay-rgb: 0, 0, 0;
  --shadow: 0 18px 46px -18px rgba(0, 0, 0, .84);
  --glow-cyan: 0 0 0 1px rgba(52, 211, 153, .32), 0 0 26px -6px rgba(52, 211, 153, .5);
}

/* ---------- 7. 星河紫（深色） ---------- */
html[data-theme="dark-violet"] {
  color-scheme: dark;
  --bg-0: #0a0716; --bg-1: #100a1f; --bg-2: #170f2c;
  --bg0-rgb: 10, 7, 22; --deep-rgb: 7, 4, 16; --inset-rgb: 14, 9, 28;
  --float-rgb: 20, 13, 38; --panel-rgb: 28, 19, 52; --panel2-rgb: 38, 26, 68;
  --panel: rgba(28, 19, 52, .74); --panel-solid: #180f2e; --panel-2: rgba(38, 26, 68, .66);
  --tint-rgb: 140, 114, 214; --tint-strong-rgb: 168, 146, 240; --txt-rgb: 140, 114, 214;
  --line: rgba(140, 114, 214, .24); --line-strong: rgba(168, 146, 240, .42);
  --txt-1: #f1eaff; --txt-2: #bcaade; --txt-3: #a294c9;
  /* 深色主题：状态字色直接用品牌亮色（对深底普遍 ≥8:1） */
  --tx-red: var(--flame); --tx-green: var(--emerald); --tx-amber: var(--amber); --tx-cyan: var(--cyan); --tx-orange: var(--orange);
  --cyan: #a78bfa; --cyan-rgb: 167, 139, 250; --cyan-dim: rgba(167, 139, 250, .16);
  --blue: #7c8cff; --blue-rgb: 124, 140, 255;
  --violet: #c084fc; --violet-rgb: 192, 132, 252;
  --emerald: #34d399; --emerald-rgb: 52, 211, 153;
  --amber: #fbbf24; --amber-rgb: 251, 191, 36;
  --orange: #fb923c; --orange-rgb: 251, 146, 60;
  --flame: #f87171; --flame-rgb: 248, 113, 113;
  --pink: #f472b6;
  --on-primary: #150a2c;
  --on-cyan: #d9c9ff; --on-blue: #c8d0ff; --on-violet: #ecd0ff; --on-emerald: #a8f0d3;
  --on-amber: #f8e2a3; --on-flame: #fbc4c4; --on-orange: #fcd0a8;
  --overlay-rgb: 0, 0, 0;
  --shadow: 0 18px 46px -18px rgba(0, 0, 0, .84);
  --glow-cyan: 0 0 0 1px rgba(167, 139, 250, .32), 0 0 26px -6px rgba(167, 139, 250, .5);
}

/* ---------- 8. 曜石黑金（深色） ---------- */
html[data-theme="dark-gold"] {
  color-scheme: dark;
  --bg-0: #0b0a06; --bg-1: #12100a; --bg-2: #1b170e;
  --bg0-rgb: 11, 10, 6; --deep-rgb: 8, 7, 4; --inset-rgb: 18, 16, 10;
  --float-rgb: 22, 19, 12; --panel-rgb: 30, 26, 16; --panel2-rgb: 42, 36, 22;
  --panel: rgba(30, 26, 16, .74); --panel-solid: #191509; --panel-2: rgba(42, 36, 22, .66);
  --tint-rgb: 196, 164, 96; --tint-strong-rgb: 226, 196, 124; --txt-rgb: 196, 164, 96;
  --line: rgba(196, 164, 96, .24); --line-strong: rgba(226, 196, 124, .42);
  --txt-1: #fff8e6; --txt-2: #d2c3a2; --txt-3: #918872;
  /* 深色主题：状态字色直接用品牌亮色（对深底普遍 ≥8:1） */
  --tx-red: var(--flame); --tx-green: var(--emerald); --tx-amber: var(--amber); --tx-cyan: var(--cyan); --tx-orange: var(--orange);
  --cyan: #e9c46a; --cyan-rgb: 233, 196, 106; --cyan-dim: rgba(233, 196, 106, .16);
  --blue: #c9a227; --blue-rgb: 201, 162, 39;
  --violet: #b07d3a; --violet-rgb: 176, 125, 58;
  --emerald: #9caa3c; --emerald-rgb: 156, 170, 60;
  --amber: #f5c542; --amber-rgb: 245, 197, 66;
  --orange: #e0912f; --orange-rgb: 224, 145, 47;
  --flame: #e0553f; --flame-rgb: 224, 85, 63;
  --pink: #d98cae;
  --on-primary: #1d1607;
  --on-cyan: #ffe9b8; --on-blue: #f0dda0; --on-violet: #e8cda6; --on-emerald: #e2eab0;
  --on-amber: #ffeaa8; --on-flame: #f8c2b8; --on-orange: #f8d9a8;
  --overlay-rgb: 0, 0, 0;
  --shadow: 0 18px 46px -18px rgba(0, 0, 0, .86);
  --glow-cyan: 0 0 0 1px rgba(233, 196, 106, .34), 0 0 26px -6px rgba(233, 196, 106, .5);
}

/* ---------- 9. 极夜墨黑（深色 · 中性） ---------- */
html[data-theme="dark-ink"] {
  color-scheme: dark;
  --bg-0: #08090b; --bg-1: #0d0f12; --bg-2: #15181c;
  --bg0-rgb: 8, 9, 11; --deep-rgb: 5, 6, 8; --inset-rgb: 12, 14, 17;
  --float-rgb: 18, 20, 24; --panel-rgb: 24, 27, 32; --panel2-rgb: 34, 38, 44;
  --panel: rgba(24, 27, 32, .76); --panel-solid: #14171b; --panel-2: rgba(34, 38, 44, .66);
  --tint-rgb: 132, 142, 156; --tint-strong-rgb: 164, 176, 192; --txt-rgb: 132, 142, 156;
  --line: rgba(132, 142, 156, .22); --line-strong: rgba(164, 176, 192, .4);
  --txt-1: #eef1f4; --txt-2: #a8b0ba; --txt-3: #8f99a5;
  /* 深色主题：状态字色直接用品牌亮色（对深底普遍 ≥8:1） */
  --tx-red: var(--flame); --tx-green: var(--emerald); --tx-amber: var(--amber); --tx-cyan: var(--cyan); --tx-orange: var(--orange);
  --cyan: #8ab4f8; --cyan-rgb: 138, 180, 248; --cyan-dim: rgba(138, 180, 248, .16);
  --blue: #6b9bf5; --blue-rgb: 107, 155, 245;
  --violet: #9b8afb; --violet-rgb: 155, 138, 251;
  --emerald: #4ade80; --emerald-rgb: 74, 222, 128;
  --amber: #fbbf24; --amber-rgb: 251, 191, 36;
  --orange: #fb923c; --orange-rgb: 251, 146, 60;
  --flame: #f87171; --flame-rgb: 248, 113, 113;
  --pink: #f472b6;
  --on-primary: #0d1117;
  --on-cyan: #cfe0ff; --on-blue: #c3d8ff; --on-violet: #d8ceff; --on-emerald: #b6f5cb;
  --on-amber: #f8e2a3; --on-flame: #fbc4c4; --on-orange: #fcd0a8;
  --overlay-rgb: 0, 0, 0;
  --shadow: 0 18px 46px -18px rgba(0, 0, 0, .86);
  --glow-cyan: 0 0 0 1px rgba(138, 180, 248, .3), 0 0 26px -6px rgba(138, 180, 248, .46);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body, #app { height: 100%; }
body {
  font-family: var(--font);
  color: var(--txt-1);
  background: var(--bg-0);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(1100px 620px at 12% -8%, rgba(var(--cyan-rgb), 0.15), transparent 62%),
    radial-gradient(900px 560px at 96% 4%, rgba(var(--violet-rgb), 0.13), transparent 60%),
    radial-gradient(760px 520px at 50% 108%, rgba(var(--orange-rgb), 0.1), transparent 62%);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(var(--tint-rgb), .06) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(var(--tint-rgb), .06) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(circle at 50% 40%, #000 30%, transparent 88%);
}
a { color: var(--cyan); text-decoration: none; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(var(--tint-strong-rgb), .26); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(var(--tint-strong-rgb), .46); }
::-webkit-scrollbar-track { background: transparent; }

/* ---------------- 通用工具类 ---------------- */
.row { display: flex; align-items: center; }
.between { display: flex; align-items: center; justify-content: space-between; }
.col { display: flex; flex-direction: column; }
.gap4 { gap: 4px } .gap6 { gap: 6px } .gap8 { gap: 8px } .gap10 { gap: 10px }
.gap12 { gap: 12px } .gap16 { gap: 16px } .gap20 { gap: 20px } .gap24 { gap: 24px }
.wrap { flex-wrap: wrap; }
.grow { flex: 1 } .center { display: flex; align-items: center; justify-content: center; }
.muted { color: var(--txt-2) } .dim { color: var(--txt-3) }
.mono { font-family: var(--mono) }
.fz11 { font-size: 11px } .fz12 { font-size: 12px } .fz13 { font-size: 13px }
.fz14 { font-size: 14px } .fz16 { font-size: 16px } .fz18 { font-size: 18px } .fz22 { font-size: 22px }
.bold { font-weight: 700 } .semibold { font-weight: 600 }
.mt4 { margin-top: 4px } .mt8 { margin-top: 8px } .mt12 { margin-top: 12px } .mt16 { margin-top: 16px }
.mt20 { margin-top: 20px } .mt24 { margin-top: 24px } .mb8 { margin-bottom: 8px } .mb12 { margin-bottom: 12px }
.mb16 { margin-bottom: 16px } .mb20 { margin-bottom: 20px }
.tc { text-align: center } .tr { text-align: right }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.g6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1500px) { .g6 { grid-template-columns: repeat(3, minmax(0,1fr)) } .g5 { grid-template-columns: repeat(3, minmax(0,1fr)) } }
@media (max-width: 1180px) { .g4, .g3 { grid-template-columns: repeat(2, minmax(0,1fr)) } }

/* ---------------- 面板 / 卡片 ---------------- */
.card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  padding: 18px;
}
.card.tight { padding: 14px; }
.card.glow::before {
  content: ""; position: absolute; inset: -1px; border-radius: var(--radius); pointer-events: none;
  background: linear-gradient(140deg, rgba(var(--cyan-rgb),.5), transparent 42%, transparent 58%, rgba(var(--orange-rgb),.35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; padding: 1px;
}
.card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.card-title { display: flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 700; letter-spacing: .3px; }
.card-title::before {
  content: ""; width: 4px; height: 15px; border-radius: 2px;
  background: linear-gradient(180deg, var(--cyan), var(--blue));
  box-shadow: 0 0 10px rgba(var(--cyan-rgb),.8);
}
.card-sub { font-size: 12px; color: var(--txt-3); }

/* ---------------- 指标卡 ---------------- */
.stat { position: relative; overflow: hidden; }
.stat .label { font-size: 12.5px; color: var(--txt-2); display: flex; align-items: center; gap: 6px; }
.stat .value { font-size: 30px; font-weight: 800; letter-spacing: -.5px; margin-top: 8px; font-family: var(--mono); }
.stat .unit { font-size: 13px; color: var(--txt-3); font-weight: 500; margin-left: 3px; }
.stat .sub { font-size: 11.5px; color: var(--txt-3); margin-top: 7px; }
.stat .ico {
  position: absolute; right: 14px; top: 14px; width: 40px; height: 40px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center; font-size: 19px;
  background: var(--cyan-dim); border: 1px solid rgba(var(--cyan-rgb),.24);
}
.stat::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: linear-gradient(90deg, var(--cyan), transparent);
  opacity: .55;
}
.stat.p-orange::after { background: linear-gradient(90deg, var(--orange), transparent); }
.stat.p-orange .ico { background: rgba(var(--orange-rgb),.14); border-color: rgba(var(--orange-rgb),.3); }
.stat.p-red::after { background: linear-gradient(90deg, var(--flame), transparent); }
.stat.p-red .ico { background: rgba(var(--flame-rgb),.14); border-color: rgba(var(--flame-rgb),.3); }
.stat.p-green::after { background: linear-gradient(90deg, var(--emerald), transparent); }
.stat.p-green .ico { background: rgba(var(--emerald-rgb),.14); border-color: rgba(var(--emerald-rgb),.3); }
.stat.p-violet::after { background: linear-gradient(90deg, var(--violet), transparent); }
.stat.p-violet .ico { background: rgba(var(--violet-rgb),.14); border-color: rgba(var(--violet-rgb),.3); }

/* ---------------- 按钮 ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; padding: 0 14px; border-radius: var(--radius-sm); cursor: pointer;
  font-size: 13px; font-weight: 600; font-family: var(--font);
  border: 1px solid var(--line-strong); background: rgba(var(--cyan-rgb),.08); color: var(--txt-1);
  transition: all .18s ease; white-space: nowrap;
}
.btn:hover { background: rgba(var(--cyan-rgb),.18); border-color: var(--cyan); box-shadow: 0 0 16px -3px rgba(var(--cyan-rgb),.6); }
.btn:active { transform: translateY(1px); }
.btn.primary {
  background: linear-gradient(135deg, var(--cyan), var(--blue));
  border-color: transparent; color: var(--on-primary); font-weight: 700;
  box-shadow: 0 8px 22px -10px rgba(var(--cyan-rgb),.9);
}
.btn.primary:hover { filter: brightness(1.1); box-shadow: 0 10px 26px -8px rgba(var(--cyan-rgb),.95); }
.btn.warn { background: rgba(var(--orange-rgb),.14); border-color: rgba(var(--orange-rgb),.5); }
.btn.warn:hover { background: rgba(var(--orange-rgb),.26); box-shadow: 0 0 16px -3px rgba(var(--orange-rgb),.7); }
.btn.danger { background: rgba(var(--flame-rgb),.13); border-color: rgba(var(--flame-rgb),.46); }
.btn.danger:hover { background: rgba(var(--flame-rgb),.26); box-shadow: 0 0 16px -3px rgba(var(--flame-rgb),.7); }
.btn.ghost { background: transparent; border-color: var(--line); color: var(--txt-2); }
.btn.ghost:hover { color: var(--txt-1); background: rgba(var(--tint-strong-rgb),.1); box-shadow: none; }
.btn.sm { height: 27px; padding: 0 10px; font-size: 12px; border-radius: 7px; }
.btn.block { width: 100%; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------------- 标签 / 徽章 ---------------- */
.tag {
  display: inline-flex; align-items: center; gap: 4px; height: 21px; padding: 0 8px;
  border-radius: 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .2px;
  border: 1px solid transparent; white-space: nowrap;
}
.tag.cyan { background: rgba(var(--cyan-rgb),.13); color: var(--on-cyan); border-color: rgba(var(--cyan-rgb),.34); }
.tag.green { background: rgba(var(--emerald-rgb),.13); color: var(--on-emerald); border-color: rgba(var(--emerald-rgb),.34); }
.tag.amber { background: rgba(var(--amber-rgb),.13); color: var(--on-amber); border-color: rgba(var(--amber-rgb),.34); }
.tag.orange { background: rgba(var(--orange-rgb),.14); color: var(--on-orange); border-color: rgba(var(--orange-rgb),.36); }
.tag.red { background: rgba(var(--flame-rgb),.14); color: var(--on-flame); border-color: rgba(var(--flame-rgb),.38); }
.tag.violet { background: rgba(var(--violet-rgb),.14); color: var(--on-violet); border-color: rgba(var(--violet-rgb),.36); }
.tag.gray { background: rgba(var(--tint-rgb),.15); color: var(--txt-2); border-color: rgba(var(--tint-rgb),.3); }
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.dot.pulse { animation: pulse 1.6s infinite; }
@keyframes pulse { 0%,100% { opacity:1; box-shadow: 0 0 0 0 currentColor } 50% { opacity:.6; box-shadow: 0 0 0 5px transparent } }

/* ---------------- 表格 ---------------- */
.table-wrap { overflow: auto; border-radius: var(--radius-sm); border: 1px solid var(--line); }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tbl th {
  position: sticky; top: 0; z-index: 2; text-align: left; padding: 10px 12px;
  background: rgba(var(--panel2-rgb), .96); color: var(--txt-2); font-weight: 600; font-size: 12px;
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
table.tbl td { padding: 10px 12px; border-bottom: 1px solid rgba(var(--tint-rgb),.11); color: var(--txt-1); }
table.tbl tbody tr { transition: background .15s; }
table.tbl tbody tr:hover { background: rgba(var(--cyan-rgb),.055); }
table.tbl tbody tr:last-child td { border-bottom: none; }
.tbl-empty { padding: 42px 0; text-align: center; color: var(--txt-3); font-size: 13px; }

/* ---------------- 表单 ---------------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label { font-size: 12.5px; color: var(--txt-2); font-weight: 600; display: flex; align-items: center; gap: 5px; }
.field .req { color: var(--flame); }
.input, .select, .textarea {
  height: 34px; padding: 0 11px; border-radius: var(--radius-sm); font-size: 13px; font-family: var(--font);
  background: rgba(var(--inset-rgb),.75); border: 1px solid var(--line); color: var(--txt-1); outline: none;
  transition: all .16s; width: 100%;
}
.textarea { height: auto; padding: 9px 11px; resize: vertical; min-height: 76px; line-height: 1.6; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(var(--cyan-rgb),.13); }
.input::placeholder, .textarea::placeholder { color: var(--txt-3); }
.select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--txt-3) 50%), linear-gradient(135deg, var(--txt-3) 50%, transparent 50%); background-position: calc(100% - 16px) 14px, calc(100% - 11px) 14px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 30px; }
.select option { background: var(--panel-solid); color: var(--txt-1); }
.hint { font-size: 11.5px; color: var(--txt-3); line-height: 1.6; }
.switch { position: relative; width: 40px; height: 22px; border-radius: 22px; background: rgba(var(--tint-rgb),.3); cursor: pointer; transition: all .2s; flex: none; border: 1px solid var(--line); }
.switch::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--txt-3); transition: all .2s; }
.switch.on { background: linear-gradient(135deg, var(--cyan), var(--blue)); border-color: transparent; }
.switch.on::after { left: 20px; background: var(--on-primary); }
.switch.sm { width: 32px; height: 18px; }
.switch.sm::after { width: 12px; height: 12px; }
.switch.sm.on::after { left: 16px; }

/* ---------------- 布局：侧栏 + 顶栏 ---------------- */
.layout { position: relative; z-index: 1; display: flex; height: 100vh; }
.sidebar {
  width: 226px; flex: none; display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(var(--float-rgb),.94), rgba(var(--float-rgb),.9));
  border-right: 1px solid var(--line); backdrop-filter: blur(12px); transition: width .22s ease;
}
.sidebar.collapsed { width: 66px; }
.brand { display: flex; align-items: center; gap: 11px; padding: 17px 16px 15px; border-bottom: 1px solid var(--line); }
.brand .logo {
  width: 36px; height: 36px; flex: none; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(var(--flame-rgb),.9), rgba(var(--orange-rgb),.85)); font-size: 19px;
  box-shadow: 0 0 20px -4px rgba(var(--orange-rgb),.9);
}
.brand .txt .n { font-size: 14.5px; font-weight: 800; letter-spacing: .4px; }
.brand .txt .s { font-size: 10.5px; color: var(--txt-3); letter-spacing: 1.6px; }
.menu { flex: 1; overflow-y: auto; padding: 10px 8px 20px; }
.menu .group { font-size: 10.5px; color: var(--txt-3); letter-spacing: 1.4px; padding: 14px 10px 7px; font-weight: 700; }
.menu .item {
  display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 11px; border-radius: 9px;
  color: var(--txt-2); font-size: 13.2px; cursor: pointer; transition: all .16s; margin-bottom: 2px; position: relative;
}
.menu .item:hover { background: rgba(var(--tint-strong-rgb),.1); color: var(--txt-1); }
.menu .item.active {
  background: linear-gradient(90deg, rgba(var(--cyan-rgb),.2), rgba(var(--cyan-rgb),.03));
  color: var(--on-cyan); font-weight: 600;
}
.menu .item.active::before {
  content: ""; position: absolute; left: -8px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 17px; border-radius: 0 3px 3px 0; background: var(--cyan); box-shadow: 0 0 10px var(--cyan);
}
.menu .item .mi { width: 17px; text-align: center; font-size: 15px; flex: none; }
.menu .item .badge { margin-left: auto; font-size: 10.5px; background: rgba(var(--flame-rgb),.2); color: var(--on-flame); padding: 1px 6px; border-radius: 8px; font-weight: 700; }
.sidebar.collapsed .menu .item span.lbl, .sidebar.collapsed .brand .txt, .sidebar.collapsed .menu .group { display: none; }
.sidebar.collapsed .menu .item { justify-content: center; padding: 0; }
.sidebar-foot { padding: 12px; border-top: 1px solid var(--line); }
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar {
  position: relative; z-index: 60;
  height: 58px; flex: none; display: flex; align-items: center; gap: 14px; padding: 0 20px;
  border-bottom: 1px solid var(--line); background: rgba(var(--float-rgb),.72); backdrop-filter: blur(12px);
}
.topbar .crumb { font-size: 14.5px; font-weight: 700; }
.topbar .crumb small { color: var(--txt-3); font-weight: 500; font-size: 12px; margin-left: 8px; }
.topbar .right { margin-left: auto; display: flex; align-items: center; gap: 12px; }

/* ---------------- 顶栏「界面风格」切换器（9 套主题） ---------------- */
.theme-pick { position: relative; }
.theme-btn { display: inline-flex; align-items: center; gap: 8px; }
.theme-btn .caret { font-size: 9px; opacity: .7; }
.tp-dots { display: inline-flex; align-items: center; gap: 3px; }
.tp-dots i { width: 9px; height: 9px; border-radius: 50%; display: block; box-shadow: 0 0 0 1px rgba(var(--tint-rgb), .38); }
.tp-dots.lg i { width: 10px; height: 10px; }
.theme-menu {
  position: absolute; right: 0; top: calc(100% + 9px); z-index: 96;
  width: 352px; padding: 12px; border-radius: var(--radius);
  background: var(--panel-solid); border: 1px solid var(--line-strong);
  box-shadow: var(--shadow); animation: tmfade .16s ease;
}
@keyframes tmfade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.tm-head { font-size: 11.5px; color: var(--txt-3); margin-bottom: 9px; padding-left: 2px; }
.tm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tm-item { position: relative; display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 9px; cursor: pointer; border: 1px solid transparent; transition: all .15s; }
.tm-item:hover { background: rgba(var(--tint-rgb), .1); }
.tm-item.on { border-color: var(--cyan); background: rgba(var(--cyan-rgb), .13); }
.tm-nm { font-size: 12.5px; font-weight: 600; color: var(--txt-1); white-space: nowrap; }
.tm-sub { font-size: 10.5px; color: var(--txt-3); white-space: nowrap; }
.tm-ck { position: absolute; right: 7px; top: 6px; color: var(--cyan); font-size: 11px; }
.who { display: flex; align-items: center; gap: 9px; padding: 5px 11px 5px 6px; border-radius: 22px; background: rgba(var(--cyan-rgb),.07); border: 1px solid var(--line); }
.who .av { width: 27px; height: 27px; border-radius: 50%; background: linear-gradient(135deg, var(--cyan), var(--blue)); color: var(--on-primary); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; }
.content { flex: 1; overflow-y: auto; padding: 20px; }

/* ---------------- 模态 / 抽屉 ---------------- */
.overlay { position: fixed; inset: 0; z-index: 90; background: rgba(var(--deep-rgb),.76); backdrop-filter: blur(5px); display: flex; align-items: center; justify-content: center; padding: 26px; }
.modal {
  width: min(760px, 96vw); max-height: 88vh; display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--panel-solid), var(--panel-2)); border: 1px solid var(--line-strong);
  border-radius: var(--radius); box-shadow: 0 30px 70px -20px rgba(var(--overlay-rgb),.95);
  animation: pop .2s ease;
}
.modal.wide { width: min(1080px, 96vw); }
.modal.narrow { width: min(520px, 96vw); }
@keyframes pop { from { transform: scale(.96) translateY(10px); opacity: 0 } to { transform: none; opacity: 1 } }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; border-bottom: 1px solid var(--line); }
.modal-head .t { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.modal-body { padding: 18px; overflow-y: auto; flex: 1; }
.modal-foot { padding: 13px 18px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 10px; }
.x { cursor: pointer; color: var(--txt-3); font-size: 19px; line-height: 1; padding: 2px 6px; border-radius: 6px; }
.x:hover { color: var(--txt-1); background: rgba(var(--tint-rgb), .1); }

/* ---------------- 提示 ---------------- */
.toasts { position: fixed; top: 18px; right: 18px; z-index: 200; display: flex; flex-direction: column; gap: 10px; }
.toast {
  min-width: 250px; max-width: 420px; padding: 12px 15px; border-radius: 11px; font-size: 13px;
  background: rgba(var(--panel-rgb),.97); border: 1px solid var(--line-strong); box-shadow: var(--shadow);
  display: flex; gap: 9px; align-items: flex-start; animation: slideIn .22s ease;
}
@keyframes slideIn { from { transform: translateX(26px); opacity: 0 } to { transform: none; opacity: 1 } }
.toast.ok { border-left: 3px solid var(--emerald); }
.toast.err { border-left: 3px solid var(--flame); }
.toast.info { border-left: 3px solid var(--cyan); }
.toast.warn { border-left: 3px solid var(--amber); }

/* ---------------- 其他 ---------------- */
.progress { height: 6px; border-radius: 6px; background: rgba(var(--tint-rgb),.2); overflow: hidden; }
.progress > i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--cyan), var(--blue)); transition: width .5s ease; }
.progress.warn > i { background: linear-gradient(90deg, var(--amber), var(--orange)); }
.progress.danger > i { background: linear-gradient(90deg, var(--orange), var(--flame)); }
.empty { padding: 46px 20px; text-align: center; color: var(--txt-3); font-size: 13px; }
.empty .ic { font-size: 34px; opacity: .4; margin-bottom: 10px; }
.spin { width: 15px; height: 15px; border: 2px solid rgba(var(--cyan-rgb),.3); border-top-color: var(--cyan); border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg) } }
.divider { height: 1px; background: var(--line); margin: 14px 0; }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dashed rgba(var(--tint-rgb),.16); font-size: 13px; }
.kv:last-child { border-bottom: none; }
.kv .k { color: var(--txt-2); }
.kv .v { font-weight: 600; text-align: right; }
.chart { width: 100%; height: 260px; }
.chart.sm { height: 190px; }
.chart.lg { height: 330px; }
.steps { display: flex; align-items: center; gap: 0; }
.steps .st { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--txt-3); }
.steps .st .n { width: 23px; height: 23px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700; background: rgba(var(--tint-rgb),.2); border: 1px solid var(--line); }
.steps .st.on { color: var(--cyan); }
.steps .st.on .n { background: linear-gradient(135deg, var(--cyan), var(--blue)); color: var(--on-primary); border-color: transparent; box-shadow: 0 0 14px -2px var(--cyan); }
.steps .st.done .n { background: rgba(var(--emerald-rgb),.2); color: var(--emerald); border-color: rgba(var(--emerald-rgb),.5); }
.steps .ln { flex: 1; height: 1px; background: var(--line); margin: 0 10px; min-width: 18px; }
.timeline { position: relative; padding-left: 18px; }
.timeline::before { content: ""; position: absolute; left: 4px; top: 4px; bottom: 4px; width: 1px; background: var(--line); }
.timeline .ti { position: relative; padding-bottom: 13px; }
.timeline .ti::before { content: ""; position: absolute; left: -18px; top: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.timeline .ti.lv-P0::before { background: var(--flame); box-shadow: 0 0 9px var(--flame); }
.timeline .ti.lv-P1::before { background: var(--orange); box-shadow: 0 0 9px var(--orange); }
.timeline .ti.lv-P2::before { background: var(--amber); box-shadow: 0 0 9px var(--amber); }
.timeline .ti.lv-P3::before { background: var(--cyan); }
.pill-tabs { display: flex; gap: 6px; background: rgba(var(--inset-rgb),.6); padding: 4px; border-radius: 10px; border: 1px solid var(--line); }
.pill-tabs .pt { padding: 5px 13px; border-radius: 7px; font-size: 12.5px; color: var(--txt-2); cursor: pointer; transition: all .16s; white-space: nowrap; }
.pill-tabs .pt:hover { color: var(--txt-1); }
.pill-tabs .pt.on { background: linear-gradient(135deg, rgba(var(--cyan-rgb),.22), rgba(var(--blue-rgb),.18)); color: var(--on-cyan); font-weight: 600; }
.model-card { position: relative; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 13px; cursor: pointer; transition: all .18s; background: rgba(var(--panel-rgb),.6); }
.model-card:hover { border-color: var(--line-strong); transform: translateY(-2px); box-shadow: 0 12px 28px -14px rgba(var(--cyan-rgb),.6); }
.model-card.on { border-color: var(--cyan); background: rgba(var(--cyan-rgb),.09); box-shadow: var(--glow-cyan); }
.model-card .nm { font-size: 13.5px; font-weight: 700; }
.model-card .vv { font-size: 11.5px; color: var(--txt-3); margin-top: 4px; }
.code-box { font-family: var(--mono); font-size: 12px; background: rgba(var(--deep-rgb),.8); border: 1px solid var(--line); border-radius: 9px; padding: 11px 13px; color: var(--on-cyan); white-space: pre-wrap; word-break: break-all; line-height: 1.65; max-height: 300px; overflow: auto; }
.banner { display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px; border-radius: 10px; font-size: 12.5px; line-height: 1.65; }
.banner.info { background: rgba(var(--cyan-rgb),.08); border: 1px solid rgba(var(--cyan-rgb),.26); color: var(--on-cyan); }
.banner.warn { background: rgba(var(--amber-rgb),.08); border: 1px solid rgba(var(--amber-rgb),.28); color: var(--on-amber); }
.banner.err { background: rgba(var(--flame-rgb),.08); border: 1px solid rgba(var(--flame-rgb),.3); color: var(--on-flame); }

/* ---------------- 登录页 ----------------
   左：消防主题视觉区（背景图 / 深色，后台可切换）  右：登录框
   浅色主题令牌作用域限定在 .login-wrap，不影响后台深色界面 */
.login-wrap {
  position: relative; z-index: 1; height: 100vh; overflow: hidden; color: #111c30;
  --panel: #ffffff;
  --panel-solid: #ffffff;
  --panel-2: #f6f9fd;
  --line: #e4eaf3;
  --line-strong: #cdd9e9;
  --txt-1: #111c30;
  --txt-2: #4f6078;
  --txt-3: #5f6f86;
  --cyan: #0d8fb3;
  --cyan-dim: rgba(13, 143, 179, 0.1);
  --shadow: 0 26px 60px -30px rgba(21, 44, 80, 0.4);
  background: #eef3fa;
}
/* 初始化中的加载占位 */
.login-wrap > .center { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.login-split { height: 100%; display: grid; grid-template-columns: minmax(0, 47%) minmax(0, 1fr); }

/* ============ 左侧：品牌视觉区 ============ */
.login-side {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center;
  padding: 56px 60px; color: #ffffff; background: #070d18;
  background-size: cover; background-position: center 32%; background-repeat: no-repeat;
}
.login-side.has-bg::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(3, 8, 16, .93) 0%, rgba(3, 8, 16, .84) 30%, rgba(4, 11, 22, .52) 62%, rgba(4, 11, 22, .22) 100%),
    linear-gradient(0deg, rgba(3, 8, 16, .72) 0%, rgba(3, 8, 16, 0) 40%);
}
.login-side.is-dark {
  background:
    radial-gradient(880px 560px at 16% 14%, #123a63 0%, rgba(20, 48, 85, 0) 62%),
    linear-gradient(160deg, #0b1a2d 0%, #050b16 100%);
}
.login-side.is-dark::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(760px 520px at 24% 26%, rgba(28, 74, 130, .5) 0%, rgba(28, 74, 130, 0) 64%);
}
.login-side::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(122, 190, 255, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(122, 190, 255, .07) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: radial-gradient(circle at 28% 46%, #000 0%, transparent 76%);
  mask-image: radial-gradient(circle at 28% 46%, #000 0%, transparent 76%);
}
.ls-ember {
  position: absolute; left: -14%; right: -14%; bottom: -14%; height: 48%; pointer-events: none; z-index: 1;
  background: radial-gradient(58% 100% at 32% 100%, rgba(255, 96, 44, .26), rgba(255, 96, 44, 0) 72%);
}
.ls-inner { position: relative; z-index: 3; max-width: 520px; }
.ls-badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border-radius: 20px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
  font-size: 12px; color: #cfe6f7; letter-spacing: .8px; backdrop-filter: blur(6px);
}
.ls-badge .dot { background: #34d399; color: #34d399; box-shadow: 0 0 0 3px rgba(52, 211, 153, .2); }
.ls-inner h1 {
  font-size: 42px; line-height: 1.26; margin: 20px 0 16px; letter-spacing: -1px; font-weight: 800; color: #ffffff;
  text-shadow: 0 3px 26px rgba(0, 0, 0, .55);
}
.ls-inner h1 em {
  font-style: normal;
  background: linear-gradient(120deg, #7ee7ff, #5ea0ff 48%, #bb8cff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.login-side.is-dark .ls-inner h1 em { background: linear-gradient(120deg, #22d3ee, #3b82f6 48%, #a78bfa); -webkit-background-clip: text; background-clip: text; }
.ls-inner p { color: rgba(226, 238, 252, .74); font-size: 14px; line-height: 1.88; max-width: 500px; }
.ls-feats { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-top: 28px; }
.ls-feats .lf {
  display: flex; gap: 10px; align-items: center; padding: 11px 13px; border-radius: 11px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(7px); transition: all .18s;
}
.ls-feats .lf:hover { background: rgba(255, 255, 255, .13); border-color: rgba(126, 231, 255, .4); transform: translateY(-1px); }
.ls-feats .lfi {
  width: 30px; height: 30px; border-radius: 9px; flex: none; display: flex; align-items: center; justify-content: center;
  background: rgba(126, 231, 255, .15); font-size: 15px;
}
.ls-feats .lft { font-size: 12.5px; font-weight: 600; color: #edf5ff; }
.ls-feats .lfs { font-size: 11px; color: rgba(198, 214, 234, .62); }
.ls-foot {
  position: absolute; left: 60px; bottom: 30px; z-index: 3; display: flex; gap: 9px; align-items: center;
  font-size: 11.5px; color: rgba(186, 204, 226, .5);
}
.ls-foot .sep { opacity: .5; }

/* ============ 右侧：登录框 ============ */
.login-main {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  padding: 36px 28px; overflow: auto;
  background:
    radial-gradient(1000px 520px at 88% 6%, #ffffff 0%, rgba(255, 255, 255, 0) 58%),
    radial-gradient(760px 470px at 6% 96%, #e2ecfb 0%, rgba(226, 236, 251, 0) 62%),
    linear-gradient(155deg, #f8fafd 0%, #e9f0f9 100%);
}
.login-foot { display: flex; align-items: center; gap: 9px; font-size: 11.5px; color: #93a3b8; text-align: center; flex-wrap: wrap; justify-content: center; }
.login-foot .sep { opacity: .55; }
.login-card {
  width: min(410px, 100%); padding: 30px 28px;
  background: #ffffff; border: 1px solid #e6ecf5; backdrop-filter: none;
  box-shadow: 0 34px 74px -36px rgba(21, 44, 80, .5), 0 2px 6px -3px rgba(21, 44, 80, .08);
}
.login-card::before { display: none; }
.login-head { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.login-card .logo { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex: none; background: linear-gradient(135deg, #ff5a45, #ff8a3d); box-shadow: 0 10px 22px -10px rgba(255, 110, 60, .9); }
.login-card h2 { font-size: 20px; font-weight: 800; color: #0d1729; }
.login-card .sub { color: var(--txt-3); font-size: 12.5px; margin-top: 6px; }
.login-card .field > label { color: #46586f; }
.login-card .input { background: #f8fafd; border-color: #e0e8f3; height: 38px; }
.login-card .input:focus { background: #ffffff; border-color: #2f6fed; box-shadow: 0 0 0 3px rgba(47, 111, 237, .12); }
.login-card .input::placeholder { color: #9dabc0; }

.auto-tip { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-radius: 9px; background: #f1f7ff; border: 1px solid #dbe9fb; font-size: 11.5px; color: #47627f; line-height: 1.5; }
.auto-tip .at-ic { font-size: 13px; }
.auto-tip strong { color: #1d4e89; }

.login-submit { height: 40px; margin-top: 4px; background: linear-gradient(135deg, #1a9fd4, #2f6fed); border-color: transparent; color: #ffffff; font-weight: 700; box-shadow: 0 12px 26px -12px rgba(47, 111, 237, .85); }
.login-submit:hover { filter: brightness(1.06); box-shadow: 0 14px 30px -12px rgba(47, 111, 237, .95); }
.login-submit .spin { border-color: rgba(255, 255, 255, .4); border-top-color: #ffffff; }
.login-card .banner.err { background: #fff2f0; border-color: #ffd6cf; color: #c0392b; }

.login-card .divider { background: #eaf0f8; }
.demo-title { font-size: 11px; color: var(--txt-3); margin-bottom: 8px; }
.demo-list { max-height: 42vh; overflow: auto; padding-right: 2px; }
.demo-acct { display: flex; align-items: center; gap: 9px; padding: 8px 11px; border-radius: 9px; background: #f8fafd; border: 1px solid #e6ecf5; font-size: 12px; cursor: pointer; transition: all .16s; }
.demo-acct:hover { border-color: #9fc4f0; background: #f1f7ff; transform: translateX(2px); }
.demo-acct .dc-arrow { color: #2f6fed; font-size: 11px; }
.demo-acct .dt { font-weight: 600; font-size: 12px; color: #1b2a42; }
.demo-acct .dd { color: var(--txt-3); font-size: 10.5px; font-family: var(--mono); }

/* 响应式：窄屏改为上下布局 / 收起视觉区 */
@media (max-width: 1180px) {
  .login-side { padding: 44px 42px; }
  .ls-inner h1 { font-size: 34px; }
  .ls-foot { left: 42px; }
}
@media (max-width: 980px) {
  .login-split { grid-template-columns: 1fr; grid-template-rows: 208px 1fr; }
  .login-side { padding: 24px 28px; justify-content: flex-end; background-position: center 38%; }
  .login-side .ls-inner h1 { font-size: 23px; margin: 10px 0 0; }
  .login-side .ls-inner p, .login-side .ls-feats { display: none; }
  .login-side .ls-badge { font-size: 11px; padding: 5px 11px; }
  .login-side .ls-foot { display: none; }
  .login-main { padding: 22px 18px; }
}
@media (max-width: 620px) {
  .login-split { grid-template-rows: 158px 1fr; }
  .login-side .ls-inner h1 { font-size: 20px; }
  .login-card { padding: 24px 20px; }
}

/* 平台参数页：登录页左侧外观实时预览 */
.login-preview {
  position: relative; height: 132px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line);
  display: flex; align-items: center; padding: 18px 20px; background: #070d18;
  background-size: cover; background-position: center 32%; background-repeat: no-repeat;
}
.login-preview::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, rgba(3, 8, 16, .95) 0%, rgba(3, 8, 16, .86) 40%, rgba(4, 11, 22, .34) 100%);
}
.login-preview.is-dark { background: linear-gradient(160deg, #0b1a2d 0%, #050b16 100%); }
.login-preview.is-dark::before { background: radial-gradient(320px 220px at 22% 30%, rgba(28, 74, 130, .6) 0%, rgba(28, 74, 130, 0) 70%); }
.login-preview .lp-inner { position: relative; z-index: 2; }
.login-preview .lp-badge { display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px; border-radius: 16px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); font-size: 10.5px; color: #cfe6f7; }
.login-preview .lp-badge .dot { background: #34d399; color: #34d399; }
.login-preview .lp-t { margin-top: 10px; font-size: 18px; font-weight: 800; color: #ffffff; letter-spacing: -.4px; }
.login-preview .lp-t em { font-style: normal; background: linear-gradient(120deg, #7ee7ff, #5ea0ff 48%, #bb8cff); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------------- 地图 ---------------- */
.map-shell { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--bg-1); }
#amap-container, #bmap-container { width: 100%; height: 100%; }
.map-legend { position: absolute; right: 12px; bottom: 12px; z-index: 6; background: rgba(var(--float-rgb),.88); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 11.5px; backdrop-filter: blur(8px); }
.map-legend .li { display: flex; align-items: center; gap: 7px; padding: 3px 0; color: var(--txt-2); }
.map-legend .li i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.map-hud { position: absolute; left: 12px; top: 12px; z-index: 6; background: rgba(var(--float-rgb),.88); border: 1px solid var(--line); border-radius: 10px; padding: 10px 13px; backdrop-filter: blur(8px); min-width: 176px; }
.map-hud .n { font-size: 21px; font-weight: 800; font-family: var(--mono); }
.map-hud .l { font-size: 11px; color: var(--txt-3); }
.map-tools { position: absolute; right: 12px; top: 12px; z-index: 6; display: flex; flex-direction: column; gap: 7px; }
.map-tools .mt { width: 34px; height: 34px; border-radius: 9px; background: rgba(var(--float-rgb),.9); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 15px; backdrop-filter: blur(8px); }
.map-tools .mt:hover { border-color: var(--cyan); background: rgba(var(--cyan-rgb),.16); }
.radius-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(var(--flame-rgb),.35); background: rgba(var(--flame-rgb),.06); pointer-events: none; }

/* ---------------- 全局 AI 助手 ---------------- */
.ai-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 120; width: 50px; height: 50px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 21px; cursor: pointer;
  background: linear-gradient(135deg, rgba(var(--cyan-rgb),.95), rgba(var(--blue-rgb),.95));
  color: var(--on-primary); box-shadow: 0 10px 30px -10px rgba(var(--cyan-rgb),.95);
  transition: transform .2s ease, box-shadow .2s ease, right .2s ease;
}
.ai-fab:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 14px 36px -10px rgba(var(--cyan-rgb),1); }
.ai-fab.on { background: linear-gradient(135deg, rgba(var(--flame-rgb),.95), rgba(var(--orange-rgb),.95)); color: var(--on-primary); }
.ai-dock {
  position: fixed; right: 22px; bottom: 84px; z-index: 119; width: min(430px, 94vw); height: min(600px, 76vh);
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--panel-solid), var(--panel-2)); border: 1px solid var(--line-strong);
  border-radius: var(--radius); box-shadow: 0 30px 70px -20px rgba(var(--overlay-rgb),.95); overflow: hidden;
}
.ai-head { padding: 13px 15px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.ai-body { flex: 1; overflow-y: auto; padding: 12px 12px 4px; display: flex; flex-direction: column; gap: 10px; }
.ai-msg { display: flex; flex-direction: column; gap: 5px; max-width: 100%; }
.ai-msg.user { align-items: flex-end; }
.ai-msg .bub {
  padding: 9px 12px; border-radius: 11px; font-size: 12.8px; line-height: 1.75; white-space: pre-wrap; word-break: break-word;
  background: rgba(var(--panel2-rgb), .9); border: 1px solid var(--line); max-width: 92%;
}
.ai-msg.user .bub { background: linear-gradient(135deg, rgba(var(--cyan-rgb),.2), rgba(var(--blue-rgb),.16)); border-color: rgba(var(--cyan-rgb),.34); }
.ai-msg .bub.err { background: rgba(var(--flame-rgb),.1); border-color: rgba(var(--flame-rgb),.4); color: var(--on-flame); }
.ai-msg .meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ai-input { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); }
.fade-enter-active, .fade-leave-active { transition: opacity .18s ease, transform .18s ease; }
.fade-enter-from, .fade-leave-to { opacity: 0; transform: translateY(10px); }

/* ---------------- 列表 / 辅助 ---------------- */
.list-row { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 9px; border: 1px solid var(--line); background: rgba(var(--panel-rgb),.5); transition: all .16s; }
.list-row:hover { border-color: var(--line-strong); background: rgba(var(--cyan-rgb),.06); }
.mini-kpi { display: flex; align-items: baseline; gap: 6px; }
.mini-kpi .v { font-family: var(--mono); font-size: 18px; font-weight: 800; }
.pager { display: flex; align-items: center; justify-content: flex-end; gap: 7px; margin-top: 12px; font-size: 12.5px; color: var(--txt-2); }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.scroll-y { overflow-y: auto; }
.rank-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 12.5px; }
.rank-row .idx { width: 18px; height: 18px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 700; background: rgba(var(--tint-rgb),.22); color: var(--txt-2); flex: none; }
.rank-row .idx.top { background: linear-gradient(135deg, var(--cyan), var(--blue)); color: var(--on-primary); }

/* ---------------- 地图标记 / 离线底图 ---------------- */
.mk {
  width: 12px; height: 12px; border-radius: 50%; background: var(--c, var(--cyan));
  box-shadow: 0 0 0 2px rgba(var(--bg0-rgb),.7), 0 0 12px var(--c, var(--cyan));
  transition: transform .16s ease;
}
.mk:hover { transform: scale(1.5); }
.mk-center {
  width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 13px; background: rgba(var(--cyan-rgb),.18); border: 1px solid rgba(var(--cyan-rgb),.65);
  box-shadow: 0 0 18px -2px rgba(var(--cyan-rgb),.95);
}
.gis-offline { position: absolute; inset: 0; z-index: 5; background: radial-gradient(circle at 50% 45%, rgba(var(--panel-rgb),.6), rgba(var(--bg0-rgb),.96)); }
.grid-plane {
  position: absolute; inset: 30px; border: 1px solid var(--line); border-radius: 12px;
  background-image: linear-gradient(rgba(var(--tint-rgb),.09) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--tint-rgb),.09) 1px, transparent 1px);
  background-size: 5% 5%;
}
.grid-plane .pd {
  position: absolute; width: 8px; height: 8px; border-radius: 50%; transform: translate(-50%, -50%);
  border: 1px solid rgba(var(--bg0-rgb),.6);
}

/* ==========================================================================
   人工消防管理 + 应急管理（新增视图专用）
   ========================================================================== */

/* ---------- 页面小标题 ---------- */
.sec-t {
  font-size: 12.5px; font-weight: 700; color: var(--txt-1);
  letter-spacing: .3px; margin: 0 0 9px;
  display: flex; align-items: center; gap: 7px;
}
.sec-t::before {
  content: ""; width: 3px; height: 12px; border-radius: 2px;
  background: linear-gradient(180deg, var(--cyan), var(--blue)); flex: none;
}

/* ---------- 键值小卡片 ---------- */
.mini {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: rgba(var(--panel-rgb),.62); padding: 10px 12px;
}
.mini .k { font-size: 11px; color: var(--txt-3); margin-bottom: 4px; }
.mini .v { font-size: 13px; font-weight: 700; color: var(--txt-1); word-break: break-all; }

/* ---------- 清单 / 步骤 ---------- */
.chk-list, .step-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.chk-list li {
  position: relative; padding: 8px 11px 8px 30px; font-size: 12.5px; color: var(--txt-2);
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: rgba(var(--panel-rgb),.55); line-height: 1.55;
}
.chk-list li::before {
  content: "☐"; position: absolute; left: 10px; top: 7px; color: var(--cyan); font-size: 13px;
}
.step-list li {
  display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; color: var(--txt-2);
  padding: 7px 10px; border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: rgba(var(--panel-rgb),.55); line-height: 1.55;
}
.step-list li .sn {
  flex: none; width: 19px; height: 19px; border-radius: 6px; display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 800; font-family: var(--mono);
  background: linear-gradient(135deg, var(--cyan), var(--blue)); color: var(--on-primary); margin-top: 1px;
}

/* ---------- 上传盒 ---------- */
.upload-box {
  border: 1.5px dashed var(--line-strong); border-radius: var(--radius);
  padding: 26px 16px; text-align: center; cursor: pointer; transition: all .18s;
  background: rgba(var(--panel-rgb),.5);
  display: flex; flex-direction: column; align-items: center; gap: 7px;
}
.upload-box:hover { border-color: var(--cyan); background: rgba(var(--cyan-rgb),.07); box-shadow: var(--glow-cyan); }

/* ---------- OCR 字段网格 ---------- */
.ocr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 10px; }
.ocr-cell {
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px;
  background: rgba(var(--panel-rgb),.6);
}
.ocr-cell .k { font-size: 11px; color: var(--txt-3); margin-bottom: 5px; }
.ocr-cell .v { font-size: 12.5px; font-weight: 600; color: var(--txt-1); word-break: break-all; }
.input.sm { height: 28px; font-size: 12.5px; padding: 0 9px; }

/* ---------- 预案卡片 ---------- */
.plan-card { display: flex; flex-direction: column; gap: 6px; }
.plan-card .plan-name { font-size: 14px; font-weight: 800; color: var(--txt-1); line-height: 1.4; }
.plan-card .plan-meta {
  display: flex; gap: 14px; font-size: 12px; color: var(--txt-2);
  padding: 7px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.plan-card .plan-meta b { color: var(--cyan); font-family: var(--mono); font-size: 13px; }

/* ---------- 应急指挥条 ---------- */
.command-bar {
  background: linear-gradient(120deg, rgba(var(--flame-rgb),.1), rgba(var(--orange-rgb),.06) 46%, transparent 78%) !important;
  border-color: rgba(var(--flame-rgb),.35) !important;
}
.btn.danger {
  background: linear-gradient(135deg, var(--flame), var(--orange)) !important;
  border-color: transparent !important; color: #fff !important;
}
.btn.danger:hover { filter: brightness(1.08); box-shadow: 0 10px 24px -12px rgba(var(--flame-rgb),.9); }
.btn.lg { height: 40px; padding: 0 20px; font-size: 13.5px; font-weight: 700; }

/* ---------- 进行中事件卡 ---------- */
.event-card { border-color: rgba(var(--flame-rgb),.4) !important; }
.event-card.ongoing {
  background: linear-gradient(120deg, rgba(var(--flame-rgb),.08), transparent 62%) !important;
  box-shadow: 0 0 0 1px rgba(var(--flame-rgb),.18), 0 16px 34px -22px rgba(var(--flame-rgb),.75);
}
.pulse-dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--flame); flex: none;
  position: relative; box-shadow: 0 0 10px var(--flame);
}
.pulse-dot::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 2px solid var(--flame); opacity: .65; animation: pulseRing 1.6s ease-out infinite;
}
@keyframes pulseRing {
  0% { transform: scale(.6); opacity: .8; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* ---------- 处置时间线（tl-* 变体） ---------- */
.timeline .tl-item { position: relative; padding-bottom: 14px; }
.timeline .tl-item:last-child { padding-bottom: 0; }
.timeline .tl-dot {
  position: absolute; left: -18px; top: 4px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 8px var(--cyan);
}
.timeline .tl-body { padding-left: 2px; }
.timeline .tl-a { font-size: 13px; font-weight: 700; color: var(--txt-1); }
.timeline .tl-meta { font-size: 11px; color: var(--txt-3); margin-top: 2px; }
.timeline .tl-note { font-size: 12px; color: var(--txt-2); margin-top: 3px; line-height: 1.55; }

/* ---------- 总结 / 报告文本 ---------- */
.sum-box {
  font-size: 12.5px; color: var(--txt-2); line-height: 1.7;
  border: 1px solid var(--line); border-left: 3px solid var(--cyan);
  border-radius: var(--radius-sm); padding: 11px 13px; background: rgba(var(--cyan-rgb),.06);
}
.report-pre {
  font-family: var(--font); font-size: 12.5px; color: var(--txt-2); line-height: 1.85;
  white-space: pre-wrap; word-break: break-word; margin: 0;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 14px 16px; background: rgba(var(--panel-rgb),.6);
  max-height: 46vh; overflow: auto;
}

/* ---------- 窄屏适配 ---------- */
@media (max-width: 760px) {
  .ocr-grid { grid-template-columns: 1fr; }
  .plan-card .plan-meta { flex-wrap: wrap; gap: 8px; }
  .btn.lg { width: 100%; }
}

/* ==========================================================================
   辅助与集成模块（推送策略 / 流程编排 / 培训考试 / 值班交接 / 开放接口）
   ========================================================================== */

/* ---------- 多选标签 ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  padding: 5px 12px; border-radius: 999px; font-size: 12px; cursor: pointer;
  border: 1px solid var(--line); background: rgba(var(--panel-rgb),.6); color: var(--txt-2);
  transition: all .16s; user-select: none; white-space: nowrap;
}
.chip:hover { border-color: var(--line-strong); color: var(--txt-1); }
.chip.on {
  background: linear-gradient(135deg, rgba(var(--cyan-rgb),.2), rgba(var(--blue-rgb),.16));
  border-color: rgba(var(--cyan-rgb),.55); color: var(--on-cyan); font-weight: 700;
}

/* ---------- 流程链（横向） ---------- */
.flow-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 8px 0 2px; }
.fc-node {
  padding: 3px 9px; border-radius: 7px; font-size: 11.5px; color: var(--txt-2);
  border: 1px solid var(--line); background: rgba(var(--panel-rgb),.62); white-space: nowrap;
}
.fc-node.branch { border-color: rgba(var(--amber-rgb),.5); color: var(--on-amber); background: rgba(var(--amber-rgb),.1); }
.fc-arrow { color: var(--txt-3); font-size: 11px; }

/* ---------- 流程链（纵向详情） ---------- */
.flow-vertical { display: flex; flex-direction: column; gap: 9px; }
.fv-item { display: flex; gap: 11px; align-items: flex-start; }
.fv-idx {
  flex: none; width: 24px; height: 24px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 11.5px; font-weight: 800; margin-top: 4px;
  background: linear-gradient(135deg, var(--cyan), var(--blue)); color: var(--on-primary);
}
.fv-body {
  flex: 1; border: 1px solid var(--line); border-left: 3px solid rgba(var(--cyan-rgb),.6);
  border-radius: var(--radius-sm); padding: 8px 12px; background: rgba(var(--panel-rgb),.55);
}
.fv-t { font-size: 13px; font-weight: 700; color: var(--txt-1); display: flex; align-items: center; flex-wrap: wrap; }
.fv-d { font-size: 12px; color: var(--txt-2); margin-top: 3px; line-height: 1.6; }

/* ---------- 在线考试 ---------- */
.quiz-card { display: flex; flex-direction: column; gap: 9px; }
.q-idx {
  width: 22px; height: 22px; border-radius: 7px; display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 11.5px; font-weight: 800;
  background: linear-gradient(135deg, var(--violet), var(--blue)); color: #fff;
}
.q-title { font-size: 13.5px; font-weight: 700; color: var(--txt-1); line-height: 1.6; }
.quiz-opts { display: flex; flex-direction: column; gap: 7px; }
.q-opt {
  display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px; color: var(--txt-2);
  padding: 8px 12px; border-radius: var(--radius-sm); cursor: pointer;
  border: 1px solid var(--line); background: rgba(var(--panel-rgb),.5); transition: all .15s; line-height: 1.55;
}
.q-opt:hover { border-color: var(--line-strong); color: var(--txt-1); }
.q-opt-k {
  flex: none; width: 19px; height: 19px; border-radius: 6px; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; font-family: var(--mono);
  border: 1px solid var(--line-strong); color: var(--txt-2);
}
.q-opt.on { border-color: rgba(var(--cyan-rgb),.6); background: rgba(var(--cyan-rgb),.1); color: var(--txt-1); }
.q-opt.on .q-opt-k { background: var(--cyan); color: var(--on-primary); border-color: var(--cyan); }
.q-opt.right { border-color: rgba(var(--emerald-rgb),.6); background: rgba(var(--emerald-rgb),.12); color: var(--on-emerald); }
.q-opt.right .q-opt-k { background: var(--emerald); color: #fff; border-color: var(--emerald); }
.q-opt.wrong { border-color: rgba(var(--flame-rgb),.6); background: rgba(var(--flame-rgb),.1); color: var(--on-flame); }
.q-opt.wrong .q-opt-k { background: var(--flame); color: #fff; border-color: var(--flame); }
.q-analysis {
  border-top: 1px dashed var(--line); padding-top: 9px; font-size: 12.5px; color: var(--txt-2);
}
.exam-result {
  display: flex; align-items: center; gap: 18px; padding: 16px 20px; border-radius: var(--radius);
  border: 1px solid var(--line);
}
.exam-result.ok { background: linear-gradient(120deg, rgba(var(--emerald-rgb),.14), transparent 70%); border-color: rgba(var(--emerald-rgb),.4); }
.exam-result.bad { background: linear-gradient(120deg, rgba(var(--flame-rgb),.12), transparent 70%); border-color: rgba(var(--flame-rgb),.4); }
.er-score { font-family: var(--mono); font-size: 40px; font-weight: 800; line-height: 1; }
.exam-result.ok .er-score { color: var(--emerald); }
.exam-result.bad .er-score { color: var(--flame); }
.er-score small { font-size: 14px; margin-left: 3px; }

/* ---------- 值班排班 ---------- */
.day-head { display: flex; align-items: center; gap: 10px; padding: 2px 0; }
.dh-date { font-family: var(--mono); font-size: 14px; font-weight: 800; color: var(--txt-1); }
.dh-date.today { color: var(--flame); }
.dh-wd { font-size: 12px; color: var(--txt-3); }
.duty-card { display: flex; flex-direction: column; gap: 7px; }
.duty-card.on { border-color: rgba(var(--flame-rgb),.34); background: linear-gradient(120deg, rgba(var(--flame-rgb),.06), transparent 70%) !important; }
.duty-post { font-size: 13.5px; font-weight: 800; color: var(--txt-1); }
.sign-badge {
  display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  border-radius: 6px; font-size: 12px; font-weight: 800;
  background: rgba(var(--cyan-rgb),.16); color: var(--on-cyan); border: 1px solid rgba(var(--cyan-rgb),.4);
}

/* ---------- 通用状态字色 ----------
   统一走 --tx-* （浅色主题下是「可读深色版」，深色主题回落品牌亮色），
   直接用 --flame/--amber 这类发光色当小字色在浅色主题下只有 2.5~3.7:1，看不清。 */
.red { color: var(--tx-red) !important; }
.green { color: var(--tx-green) !important; }
.amber { color: var(--tx-amber) !important; }
.cyan { color: var(--tx-cyan) !important; }
.warn { color: var(--tx-orange) !important; }
/* 同上：标签必须显式重声明，否则会被上面带 !important 的通用类覆盖回亮色。
   注意用 --on-*（为该标签淡底色专门调过的那组），不要用 --tx-*：
   --tx-* 是「打在面板/白底上」的深(浅色主题)或亮(深色主题)版本，
   压到淡色标签底上反而偏浅 —— 实测 light-sand tag.cyan 会掉到 4.13:1。 */
.tag.red { color: var(--on-flame) !important; }
.tag.green { color: var(--on-emerald) !important; }
.tag.amber { color: var(--on-amber) !important; }
.tag.cyan { color: var(--on-cyan) !important; }
.tag.orange { color: var(--on-orange) !important; }
.tag.violet { color: var(--on-violet) !important; }

/* 履职考核得分（大字重、等宽数字，方便横向对比） */
.score { font-family: var(--mono); font-size: 15px; font-weight: 700; }
.mt12 { margin-top: 12px; }
.semibold { font-weight: 600; }
code {
  font-family: var(--mono); font-size: 12px; padding: 1px 6px; border-radius: 5px;
  background: rgba(var(--tint-rgb),.1); color: var(--on-cyan);
}

/* ==========================================================================
   消防灾情实时弹窗（右下角显著提示 + 语音播报）
   ========================================================================== */
.alarm-stack {
  position: fixed; right: 20px; bottom: 74px; z-index: 999;
  display: flex; flex-direction: column-reverse; gap: 12px; max-width: 384px;
}
.alarm-pop {
  position: relative; overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid rgba(var(--c-rgb),.55);
  background: linear-gradient(160deg, rgba(var(--c-rgb),.16), rgba(var(--panel-rgb),.97) 62%);
  box-shadow: 0 22px 48px -20px rgba(var(--c-rgb),.9), 0 0 0 1px rgba(var(--c-rgb),.2);
  padding: 13px 15px 12px;
  backdrop-filter: blur(8px);
  animation: alarmIn .28s ease;
}
@keyframes alarmIn { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
.alarm-pop.lv-P0 { --c-rgb: var(--flame-rgb); }
.alarm-pop.lv-P1 { --c-rgb: var(--orange-rgb); }
.alarm-pop.lv-P2 { --c-rgb: var(--amber-rgb); }
.alarm-pop.lv-P3 { --c-rgb: var(--cyan-rgb); }
.alarm-pop .ap-glow {
  position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg,
    rgb(var(--c-rgb)) 0%, rgba(var(--c-rgb),.25) 70%, transparent 100%);
  opacity: .9;
}
.alarm-pop .ap-head { display: flex; align-items: center; justify-content: space-between; }
.ap-badge { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 800; color: rgb(var(--c-rgb)); }
.ap-dot {
  width: 9px; height: 9px; border-radius: 50%; background: rgb(var(--c-rgb)); position: relative;
  box-shadow: 0 0 10px rgb(var(--c-rgb));
}
.ap-dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid rgb(var(--c-rgb)); animation: pulseRing 1.5s ease-out infinite;
}
.ap-kind {
  font-size: 10.5px; font-weight: 600; padding: 1px 7px; border-radius: 999px;
  background: rgba(var(--c-rgb),.14); color: rgb(var(--c-rgb)); border: 1px solid rgba(var(--c-rgb),.35);
}
.ap-level {
  font-family: var(--mono); font-size: 12px; font-weight: 800; padding: 2px 9px; border-radius: 7px;
  background: rgb(var(--c-rgb)); color: #fff;
}
.ap-title { font-size: 14px; font-weight: 800; color: var(--txt-1); margin-top: 8px; line-height: 1.45; }
.ap-loc { font-size: 12.5px; color: var(--txt-2); margin-top: 4px; }
.ap-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 11px; color: var(--txt-3); margin-top: 6px;
}
.ap-tenant { padding: 1px 7px; border-radius: 999px; background: rgba(var(--tint-rgb),.1); color: var(--txt-2); }
.ap-foot { display: flex; gap: 7px; margin-top: 10px; }
.alarm-pop .ap-btn {
  background: rgba(var(--panel-rgb),.9); border-color: rgba(var(--c-rgb),.4); color: var(--txt-1);
}
.alarm-pop .ap-btn:hover { background: rgba(var(--c-rgb),.14); }
.alarm-pop .ap-btn.ghost { background: transparent; }

.alarm-voice {
  position: fixed; right: 20px; bottom: 22px; z-index: 1000;
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 17px;
  background: rgba(var(--panel-rgb),.95); border: 1px solid var(--line-strong);
  box-shadow: var(--shadow); transition: all .16s;
}
.alarm-voice:hover { transform: scale(1.08); border-color: var(--cyan); }
.alarm-voice .vc {
  position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; color: #fff; background: var(--flame);
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
}
.alarm-stack:empty + .alarm-voice { display: none; }

.alarm-pop-enter-active, .alarm-pop-leave-active { transition: all .24s ease; }
.alarm-pop-enter-from { opacity: 0; transform: translateY(18px) scale(.96); }
.alarm-pop-leave-to { opacity: 0; transform: translateX(30px) scale(.96); }

@media (max-width: 760px) {
  .alarm-stack { left: 12px; right: 12px; max-width: none; bottom: 12px; }
}

/* ======================================================================
   组织架构与责任体系 / 角色权限矩阵
   ====================================================================== */
.org-tree { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow-x: auto; }
.org-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  font-size: 12.5px; border-bottom: 1px solid var(--line); min-width: 900px;
}
.org-row:last-child { border-bottom: none; }
.org-row.head {
  background: rgba(var(--inset-rgb), .6); color: var(--txt-3);
  font-size: 11.5px; font-weight: 600; letter-spacing: .3px;
}
.org-row:not(.head):hover { background: rgba(var(--cyan-rgb), .05); }
.org-c1 { flex: 1 1 auto; min-width: 220px; display: flex; align-items: center; gap: 7px; }
.org-c2 { flex: none; width: 62px; }
.org-c3, .org-c4 { flex: none; width: 168px; color: var(--txt-2); }
.org-c5 { flex: none; width: 92px; color: var(--txt-2); font-family: var(--mono); }
.org-c6 { flex: none; width: 156px; display: flex; gap: 5px; }
.org-caret { width: 14px; text-align: center; cursor: pointer; color: var(--txt-2); user-select: none; font-size: 11px; flex: none; }
.org-caret.ghost { cursor: default; }
.org-name { color: var(--txt-1); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.role-wrap { display: grid; grid-template-columns: 252px minmax(0, 1fr); gap: 16px; }
@media (max-width: 1100px) { .role-wrap { grid-template-columns: 1fr; } }
.role-list { display: flex; flex-direction: column; gap: 7px; }
.role-item {
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px;
  cursor: pointer; transition: all .16s; background: rgba(var(--panel-rgb), .5);
}
.role-item:hover { border-color: var(--line-strong); }
.role-item.on { border-color: var(--cyan); background: rgba(var(--cyan-rgb), .09); box-shadow: var(--glow-cyan); }
.role-item .rn { font-size: 13px; font-weight: 600; color: var(--txt-1); }
.role-item .rc { display: flex; align-items: center; gap: 6px; margin-top: 5px; font-size: 11.5px; color: var(--txt-3); flex-wrap: wrap; }

.role-perms { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px; }
.perm-group + .perm-group { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.pg-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.chk-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--txt-1); cursor: pointer; }
.perm-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 7px 14px; }
.perm-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--txt-2); cursor: pointer; }
.perm-item:hover { color: var(--txt-1); }
.perm-item input, .chk-item input { accent-color: var(--cyan); cursor: pointer; flex: none; }
.perm-item input:disabled, .chk-item input:disabled { cursor: not-allowed; }
.perm-item input:disabled + span, .chk-item input:disabled { opacity: .55; }

/* ==========================================================================
   GIS 一张图 · 全屏作战指挥 + 视频墙
   ========================================================================== */

.min0 { min-width: 0; }
.mt8 { margin-top: 8px; }
.ellip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flame { color: var(--flame); }

/* ---------- 工具条 / 舞台 ---------- */
.gis-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 13px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); backdrop-filter: blur(8px);
}
.gis-stage { position: relative; }
.gis-stage .map-shell { height: calc(100vh - 232px); }
/* 地图始终只占左侧：右侧留给作战指挥面板 / 告警清单（分栏而非浮层，互不遮挡） */
.gis-stage:has(.gis-cmd) .map-shell { margin-right: 366px; }
.gis-stage:has(.gis-alarms) .map-shell { margin-right: 316px; }

/* 全屏指挥模式：左侧地图铺满视口，右侧「作战指挥面板」保留成独立一列 */
.gis.fs .gis-bar {
  position: fixed; left: 0; right: 376px; top: 0; z-index: 960; border-radius: 0;
  border-left: 0; border-right: 0; border-top: 0;
}
.gis.fs .gis-stage .map-shell {
  position: fixed; left: 0; right: 376px; top: 0; bottom: 0; z-index: 950;
  height: auto; border-radius: 0; border: 0;
  /* 必须清掉非全屏那条 :has() 的 margin-right，否则 fixed + left/right 会被再扣一次宽度 */
  margin-right: 0;
}
.gis.fs .gis-cmd {
  position: fixed; right: 0; top: 0; bottom: 0; width: 376px; z-index: 965;
  border-radius: 0; border-top: 0; border-right: 0; border-bottom: 0;
}
.gis.fs .gis-alarms {
  position: fixed; right: 0; top: 0; bottom: 0; width: 376px; z-index: 962;
  max-height: none; border-radius: 0; border-top: 0; border-right: 0; border-bottom: 0;
}
.gis.fs .gis-stage { padding-top: 0; }
.gis-fs-tip {
  position: absolute; left: 50%; transform: translateX(-50%); top: 12px; z-index: 12;
  padding: 6px 14px; border-radius: 999px; font-size: 11.5px; letter-spacing: .3px;
  background: rgba(var(--float-rgb), .9); border: 1px solid var(--line); color: var(--txt-2);
  backdrop-filter: blur(8px); pointer-events: none;
}
.gis.fs .map-hud { top: 62px; }
.gis.fs .map-legend { bottom: 18px; }
/* 工具条在全屏下吸顶占位 ~56px，这两条提示条要顺次让开，否则被压在工具条下面 */
.gis.fs .gis-fs-tip { top: 62px; }
.gis.fs .gis-target { top: 100px; }

/* 选中告警落点条 */
.gis-target {
  position: absolute; left: 50%; transform: translateX(-50%); top: 54px; z-index: 13;
  display: flex; align-items: center; gap: 10px; max-width: 620px;
  padding: 7px 10px 7px 13px; border-radius: 10px;
  background: rgba(var(--float-rgb), .94); border: 1px solid var(--line-strong);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .45); backdrop-filter: blur(10px);
}
.gt-lv {
  font-size: 10.5px; font-weight: 800; padding: 2px 7px; border-radius: 5px; color: #fff; flex: none;
  background: var(--txt-3);
}
.gt-lv.P0 { background: var(--flame); } .gt-lv.P1 { background: var(--orange); }
.gt-lv.P2 { background: var(--amber); } .gt-lv.P3 { background: var(--cyan); }

/* ---------- 告警标记：脉冲扩散 + 悬停浮卡 ---------- */
.mk-alarm { position: relative; width: 26px; height: 26px; cursor: pointer; }
.mk-alarm .mc {
  position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px;
  border-radius: 50%; background: var(--c-lv, var(--flame));
  box-shadow: 0 0 0 2px rgba(var(--bg0-rgb), .55), 0 0 14px var(--c-lv, var(--flame));
}
.mk-alarm .mr {
  position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px;
  border-radius: 50%; border: 2px solid var(--c-lv, var(--flame));
  animation: mkPulse 2.4s ease-out infinite; opacity: 0;
}
.mk-alarm .mr.d2 { animation-delay: .8s; }
.mk-alarm .mr.d3 { animation-delay: 1.6s; }
@keyframes mkPulse {
  0%   { transform: scale(1);   opacity: .95; }
  70%  { transform: scale(4.2); opacity: 0; }
  100% { transform: scale(4.2); opacity: 0; }
}
.mk-alarm.lv-P0 { --c-lv: var(--flame); }
.mk-alarm.lv-P1 { --c-lv: var(--orange); }
.mk-alarm.lv-P2 { --c-lv: var(--amber); }
.mk-alarm.lv-P3 { --c-lv: var(--cyan); }
/* P0 更快更亮，P3 更收敛 —— 一眼分出轻重缓急 */
.mk-alarm.lv-P0 .mr { animation-duration: 1.6s; }
.mk-alarm.lv-P3 .mr { animation-duration: 3.4s; }
.mk-alarm.lv-P0 .mc { animation: coreBlink 1s ease-in-out infinite alternate; }
@keyframes coreBlink { from { opacity: .55; } to { opacity: 1; } }

/* 悬停浮卡（纯 CSS，高德 / 百度 / 离线底图都成立） */
.mk-tip {
  position: absolute; left: 22px; bottom: 20px; width: 264px; z-index: 300;
  padding: 10px 12px; border-radius: 10px;
  background: rgba(var(--float-rgb), .97); border: 1px solid var(--line-strong);
  box-shadow: 0 16px 40px -14px rgba(0, 0, 0, .55); backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  /* 浮卡是标记的子元素，开着 pointer-events 才能把鼠标从点移进卡片点「打开视频」，
     且鼠标在卡片上时父级 :hover 仍成立，卡片不会闪掉 */
  pointer-events: auto; white-space: normal; text-align: left;
}
.mk-alarm:hover .mk-tip { opacity: 1; visibility: visible; transform: translateY(0); }
.mk-tip .mt-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mk-tip .mt-h b { font-size: 12px; color: var(--flame); }
.mk-tip .mt-s { font-size: 10.5px; color: var(--txt-3); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; }
.mk-tip .mt-t { font-size: 12.5px; font-weight: 600; color: var(--txt-1); margin: 5px 0 6px; line-height: 1.4; }
.mk-tip .mt-k { display: flex; gap: 7px; font-size: 11px; color: var(--txt-2); padding: 1.5px 0; }
.mk-tip .mt-k span { color: var(--txt-3); flex: none; width: 28px; }
/* 「打开视频」：需求要求详情里能点开视频，做成明确的按钮而不是一句提示文字 */
.mk-tip .mt-go {
  margin-top: 8px; padding: 6px 9px; border-radius: 7px; cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; color: #fff;
  background: linear-gradient(180deg, rgba(var(--cyan-rgb), .95), rgba(var(--cyan-rgb), .72));
  transition: filter .14s, transform .14s;
}
.mk-tip .mt-go em { font-style: normal; font-size: 10.5px; opacity: .85; margin-left: auto; }
.mk-tip .mt-go:hover { filter: brightness(1.12); transform: translateY(-1px); }
.mk-tip .mt-sub { margin-top: 5px; font-size: 10.5px; color: var(--cyan); font-weight: 600; }

/* 离线底图上的告警脉冲点 */
.pd-alarm {
  position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  cursor: pointer; background: var(--c-lv, var(--flame));
  box-shadow: 0 0 14px var(--c-lv, var(--flame));
  animation: pdPulse 1.8s ease-out infinite;
}
.pd-alarm.lv-P0 { --c-lv: var(--flame); } .pd-alarm.lv-P1 { --c-lv: var(--orange); }
.pd-alarm.lv-P2 { --c-lv: var(--amber); }  .pd-alarm.lv-P3 { --c-lv: var(--cyan); }
@keyframes pdPulse {
  0% { box-shadow: 0 0 0 0 var(--c-lv, var(--flame)), 0 0 14px var(--c-lv, var(--flame)); }
  70% { box-shadow: 0 0 0 22px rgba(0, 0, 0, 0), 0 0 14px var(--c-lv, var(--flame)); }
  100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0), 0 0 14px var(--c-lv, var(--flame)); }
}
.map-legend .li i.pi { border-radius: 2px; width: 9px; height: 9px; }
.map-legend .li i.pi.lv-P0 { background: var(--flame); } .map-legend .li i.pi.lv-P1 { background: var(--orange); }
.map-legend .li i.pi.lv-P2 { background: var(--amber); }

/* ---------- 作战指挥面板 ---------- */
.gis-cmd {
  position: absolute; right: 0; top: 0; bottom: 0; width: 356px; z-index: 800;
  display: flex; flex-direction: column; gap: 0;
  background: rgba(var(--float-rgb), .97); border: 1px solid var(--line-strong);
  border-radius: var(--radius); overflow: hidden; backdrop-filter: blur(12px);
  box-shadow: -10px 0 40px -18px rgba(0, 0, 0, .5);
}
.gis.fs .gis-cmd { position: fixed; right: 0; top: 0; bottom: 0; z-index: 965; }
.gis-cmd > * { padding: 11px 13px; }
.gis-cmd > * + * { border-top: 1px solid var(--line); }
.gis-cmd .gc-head { display: flex; align-items: flex-start; gap: 9px; background: rgba(var(--flame-rgb), .07); }
.gc-lv {
  font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 6px; color: #fff; flex: none;
  background: var(--flame);
}
.gc-lv.sm { font-size: 10px; padding: 1px 6px; }
.gc-lv.P0 { background: var(--flame); } .gc-lv.P1 { background: var(--orange); }
.gc-lv.P2 { background: var(--amber); } .gc-lv.P3 { background: var(--cyan); }
.gc-title { font-size: 13px; font-weight: 700; color: var(--txt-1); line-height: 1.4; }
.gc-act { display: flex; flex-direction: column; }
.gc-sec { overflow-y: auto; }
.gc-cmd .gc-sec { }
.gc-st {
  font-size: 11.5px; font-weight: 700; color: var(--txt-2); letter-spacing: .4px;
  margin-bottom: 8px; display: flex; align-items: center; gap: 8px;
}
.gc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.gc-f {
  display: flex; flex-direction: column; gap: 3px; padding: 7px 9px; border-radius: 8px;
  background: rgba(var(--tint-rgb), .05); border: 1px solid var(--line);
}
.gc-f span { font-size: 10.5px; color: var(--txt-3); }
.gc-f b { font-size: 13px; font-family: var(--mono); color: var(--txt-1); }
.gc-force { margin-bottom: 8px; }
.gf-t { font-size: 11px; color: var(--txt-3); margin-bottom: 4px; }
.gf-i { display: flex; align-items: center; gap: 7px; padding: 3px 0; }
.gc-step { display: flex; gap: 9px; align-items: flex-start; padding: 6px 0; }
.gs-n {
  width: 18px; height: 18px; flex: none; border-radius: 50%; font-size: 10.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--cyan-rgb), .16); color: var(--cyan); border: 1px solid rgba(var(--cyan-rgb), .4);
}
.gs-t { font-size: 12px; font-weight: 600; color: var(--txt-1); }
.gs-d { font-size: 11px; color: var(--txt-3); line-height: 1.5; margin-top: 1px; }
.gc-duty { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.gc-log { padding: 5px 0; border-bottom: 1px dashed var(--line); }
.gc-log:last-child { border-bottom: 0; }

/* ---------- 告警清单（未选中时） ---------- */
.gis-alarms {
  position: absolute; right: 0; top: 0; width: 306px; max-height: calc(100% - 8px); z-index: 780;
  display: flex; flex-direction: column;
  background: rgba(var(--float-rgb), .96); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; backdrop-filter: blur(10px);
}
.gis.fs .gis-alarms { position: fixed; right: 0; top: 0; bottom: 0; z-index: 962; }
.ga-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 13px; border-bottom: 1px solid var(--line); }
.ga-item {
  display: flex; align-items: center; gap: 9px; padding: 8px 13px; cursor: pointer;
  border-bottom: 1px dashed var(--line); transition: background .14s;
}
.ga-item:hover { background: rgba(var(--tint-rgb), .07); }
.ga-item:last-of-type { border-bottom: 0; }
.ga-foot { padding: 8px 13px; border-top: 1px solid var(--line); }

/* ==========================================================================
   视频墙（多窗口：拖动 / 缩放 / 关闭 / 最大化）
   ========================================================================== */
.vwall {
  position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 860;
  display: flex; flex-direction: column; pointer-events: none;
}
/* 视频墙只占「地图」区域：右侧 356px 留给作战指挥面板 / 告警清单，
   否则右上角的视频窗口会盖住指挥面板。用户要的是"地图右上角"列视频框。 */
.gis-stage:has(.gis-cmd) .vwall { right: 366px; }
.gis.fs .vwall { position: fixed; left: 0; right: 376px; top: 62px; bottom: 0; z-index: 970; }
.vwall-head {
  pointer-events: auto; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin: 10px; padding: 8px 12px; border-radius: 10px;
  background: rgba(var(--float-rgb), .96); border: 1px solid var(--line-strong);
  backdrop-filter: blur(10px); box-shadow: 0 12px 34px -16px rgba(0, 0, 0, .5);
}
.vwall-body { position: relative; flex: 1; min-height: 0; }
.vwall-empty {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
  text-align: center; pointer-events: none; color: var(--txt-2);
}
.ve-icon { font-size: 34px; opacity: .8; }
.ve-t { font-size: 14px; font-weight: 700; margin-top: 6px; color: var(--txt-1); }
.ve-s { font-size: 11.5px; color: var(--txt-3); margin-top: 4px; }

/* 可点开的摄像头清单（左下角 —— 右上角留给视频窗口，避免遮挡） */
.vwall-rail {
  position: absolute; left: 10px; bottom: 10px; width: 268px; max-height: 54%; overflow-y: auto;
  pointer-events: auto; border-radius: 10px; padding: 9px 10px;
  background: rgba(var(--float-rgb), .96); border: 1px solid var(--line-strong);
  backdrop-filter: blur(10px); box-shadow: 0 12px 34px -16px rgba(0, 0, 0, .5);
}
.vr-title { font-size: 11px; font-weight: 700; color: var(--txt-3); margin-bottom: 6px; letter-spacing: .4px; }
.vr-item {
  display: flex; align-items: center; gap: 7px; padding: 5px 7px; border-radius: 7px;
  cursor: pointer; transition: background .14s;
}
.vr-item:hover { background: rgba(var(--tint-rgb), .09); }
.vr-item.on { background: rgba(var(--cyan-rgb), .13); }
.vr-add { font-size: 11px; color: var(--cyan); font-weight: 700; width: 22px; text-align: right; }

/* 单个视频窗口 */
.vw {
  position: absolute; pointer-events: auto; display: flex; flex-direction: column;
  border-radius: 9px; overflow: hidden; background: #05080d;
  border: 1px solid rgba(var(--cyan-rgb), .45);
  box-shadow: 0 18px 46px -16px rgba(0, 0, 0, .75), 0 0 0 1px rgba(0, 0, 0, .35) inset;
  min-width: 240px; min-height: 150px;
}
.vw-head {
  display: flex; align-items: center; gap: 7px; padding: 5px 7px; cursor: move; flex: none;
  background: linear-gradient(180deg, rgba(var(--cyan-rgb), .22), rgba(var(--cyan-rgb), .07));
  border-bottom: 1px solid rgba(var(--cyan-rgb), .3);
  color: #dbe7f3; user-select: none;
}
.vw-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--emerald); flex: none; }
.vw-dot.P0 { background: #ff4d4d; animation: coreBlink .9s ease-in-out infinite alternate; }
.vw-dot.P1 { background: #ff9a3c; } .vw-dot.P2 { background: #ffd15c; } .vw-dot.P3 { background: #6fd6ef; }
.vw-title { font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; }
.vw-code { font-size: 10px; opacity: .6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 96px; }
.vw-btn {
  width: 20px; height: 20px; flex: none; border: 0; border-radius: 5px; cursor: pointer;
  background: rgba(255, 255, 255, .1); color: #dbe7f3; font-size: 11px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.vw-btn:hover { background: rgba(255, 255, 255, .22); }
.vw-btn.close:hover { background: var(--flame); color: #fff; }
.vw-body { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.vw-resize {
  position: absolute; right: 0; bottom: 0; width: 16px; height: 16px; cursor: nwse-resize; z-index: 5;
  background: linear-gradient(135deg, transparent 45%, rgba(var(--cyan-rgb), .8) 45%, rgba(var(--cyan-rgb), .8) 100%);
}
.vw-edge { position: absolute; z-index: 4; }
.vw-edge.e { right: 0; top: 8px; bottom: 16px; width: 6px; cursor: ew-resize; }
.vw-edge.s { left: 0; right: 16px; bottom: 0; height: 6px; cursor: ns-resize; }

/* 单路画面 */
.cam-feed { position: absolute; inset: 0; background: #05080d; }
.cam-video, .cam-canvas { width: 100%; height: 100%; object-fit: cover; display: block; }
.cam-badge {
  position: absolute; left: 7px; top: 7px; z-index: 3; display: flex; align-items: center; gap: 5px;
  padding: 2px 7px; border-radius: 5px; font-size: 10.5px; font-weight: 700; color: #fff;
  background: rgba(0, 0, 0, .55); letter-spacing: .2px;
}
.cam-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--emerald); }
.cam-badge.P0 { background: rgba(220, 58, 44, .88); } .cam-badge.P0 .dot { background: #fff; animation: coreBlink .8s ease-in-out infinite alternate; }
.cam-badge.P1 { background: rgba(224, 106, 30, .88); }
.cam-badge.P2 { background: rgba(209, 139, 10, .88); }
.cam-badge.P3 { background: rgba(13, 143, 179, .88); }
.cam-meta {
  position: absolute; left: 7px; bottom: 7px; z-index: 3; display: flex; gap: 8px;
  font-size: 10px; color: #cfe0f0; text-shadow: 0 1px 3px #000;
}
.cam-src {
  position: absolute; right: 7px; top: 7px; z-index: 3; padding: 2px 6px; border-radius: 5px;
  font-size: 9.5px; color: #d8f0ff; background: rgba(13, 143, 179, .55); letter-spacing: .2px;
}
.cam-src.mock { background: rgba(120, 120, 120, .5); color: #ffe9c9; }
.cam-wait { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }

/* ==========================================================================
   智慧监控 · 视频监控台（值守大屏）
   ========================================================================== */
.vw-console {
  display: flex; flex-direction: column; gap: 10px;
  height: calc(100vh - 208px); min-height: 520px;
}
.vwc-bar {
  display: flex; flex-direction: column; gap: 8px;
  padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); backdrop-filter: blur(8px);
}
/* 第一行：运行状态 + 值守时钟；第二行：编排与轮播控制 —— 固定两行，避免控件随机折行 */
.vwc-bar-r1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vwc-bar-r2 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding-top: 8px; border-top: 1px dashed var(--line); }
.vwc-bar-l { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.vwc-bar-r { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.vwc-sep { width: 1px; height: 18px; background: var(--line); margin: 0 2px; }
/* 值守时钟：控制室大屏的"心跳" */
.vwc-bar-c {
  margin-left: auto;
  font-family: var(--mono); font-size: 12.5px; font-weight: 700; letter-spacing: .4px;
  color: var(--txt-2); white-space: nowrap; padding: 2px 9px; border-radius: 999px;
  background: rgba(var(--tint-rgb), .07); border: 1px solid var(--line);
}
.vwc-sel { width: 108px; height: 30px; font-size: 12px; }
.vwc-hint { opacity: .75; }

/* 轮播按钮内的进度条：一眼看出还有多久切画面 */
.vwc-rot { position: relative; overflow: hidden; min-width: 88px; }
.vwc-rot .vr-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255, 255, 255, .28); }
.vwc-rot .vr-prog i { display: block; height: 100%; background: #fff; transition: width .12s linear; }
.vwc-rot .vr-t { position: relative; z-index: 1; }

/* 工具条下方的轮播进度细线 —— 大屏模式收起工具条后仍能看到节奏 */
.vwc-line { flex: none; height: 2px; margin: -8px 0 -6px; border-radius: 2px; background: rgba(var(--tint-rgb), .14); overflow: hidden; }
.vwc-line i { display: block; height: 100%; background: linear-gradient(90deg, rgba(var(--cyan-rgb), .8), rgba(var(--cyan-rgb), 1)); transition: width .12s linear; }

/* 大屏模式下的退出按钮 */
.vwc-fsx {
  position: fixed; right: 12px; top: 12px; z-index: 960;
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 13px;
  border: 1px solid rgba(var(--flame-rgb), .5); background: rgba(var(--float-rgb), .85);
  color: var(--flame); display: flex; align-items: center; justify-content: center;
}
.vwc-fsx:hover { background: rgba(var(--flame-rgb), .16); }

/* ---------- 灾情横幅 ---------- */
.vwc-alertbar {
  flex: none;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 13px; border-radius: var(--radius);
  background: linear-gradient(90deg, rgba(var(--flame-rgb), .16), rgba(var(--flame-rgb), .05));
  border: 1px solid rgba(var(--flame-rgb), .42);
  font-size: 12.5px; color: var(--txt-1);
}
.vwc-alertbar .vab-ic { font-size: 15px; animation: coreBlink 1s ease-in-out infinite alternate; }
.vab-list { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.vab-i {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px;
  background: rgba(var(--float-rgb), .8); border: 1px solid var(--line); font-size: 11px; color: var(--txt-2);
}
.vab-i em { font-style: normal; font-weight: 800; font-size: 10px; padding: 1px 5px; border-radius: 4px; color: #fff; background: var(--txt-3); }
/* 等级徽标底色走 --lvb-*（白字 ≥5:1）；品牌亮色留给发光/描边 */
.vab-i em.lv-P0 { background: var(--lvb-p0); } .vab-i em.lv-P1 { background: var(--lvb-p1); }
.vab-i em.lv-P2 { background: var(--lvb-p2); } .vab-i em.lv-P3 { background: var(--lvb-p3); }
.vab-more { font-size: 11px; font-weight: 700; color: var(--flame); }

/* ---------- 主体：左大屏 + 右清单 ---------- */
.vwc-main { flex: 1 1 auto; min-height: 0; display: flex; gap: 10px; }
.vwc-stage { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; }

.vwc-grid { flex: 1 1 auto; min-height: 0; display: grid; gap: 8px; }
.vwc-grid.g4 { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); }
.vwc-grid.g6 { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); }
.vwc-grid.g9 { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); }

/* ---------- 单个监视位 ---------- */
.vwt {
  position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0;
  border-radius: 10px; overflow: hidden; cursor: pointer; user-select: none;
  background: #05080d; border: 1px solid var(--line-strong);
  transition: border-color .16s, box-shadow .16s;
}
.vwt:hover { border-color: rgba(var(--cyan-rgb), .6); }
.vwt.on { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(var(--cyan-rgb), .28); }
.vwt.empty { background: rgba(var(--tint-rgb), .04); border-style: dashed; }
/* 拖拽落点：整格亮起来，松手即换画面 */
.vwt.drop { border-color: var(--cyan); background: rgba(var(--cyan-rgb), .1); box-shadow: inset 0 0 0 2px rgba(var(--cyan-rgb), .5); }
.vwt-head {
  display: flex; align-items: center; gap: 6px; flex: none; padding: 4px 7px;
  background: rgba(var(--float-rgb), .94); border-bottom: 1px solid var(--line);
  font-size: 11.5px; color: var(--txt-1);
}
.vwt-idx {
  flex: none; width: 17px; height: 17px; border-radius: 5px; font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--tint-rgb), .16); color: var(--txt-2);
}
.vwt.on .vwt-idx { background: var(--cyan); color: #04121a; }
.vwt.alarm .vwt-idx { background: var(--vwt-c); color: #fff; }
.vwt-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--txt-3); flex: none; }
.vwt-dot.on { background: var(--emerald); box-shadow: 0 0 6px var(--emerald); }
.vwt-dot.off { background: var(--txt-3); }
.vwt-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.vwt-flag {
  flex: none; font-size: 9.5px; font-weight: 800; letter-spacing: .3px;
  padding: 1px 5px; border-radius: 4px; background: rgba(var(--tint-rgb), .18); color: var(--txt-2);
}
.vwt-flag.pin { background: rgba(var(--amber-rgb), .25); color: var(--tx-amber); }
.vwt-flag.al { background: var(--vwt-c, var(--lvb-p0)); color: #fff; }
/* 操作按钮平时收起来，鼠标移到这一格才出现 —— 大屏上少一点杂讯 */
.vwt-tools { display: flex; align-items: center; gap: 3px; flex: none; }
.vwt-b {
  width: 19px; height: 19px; flex: none; border: 0; border-radius: 5px; cursor: pointer;
  background: rgba(var(--tint-rgb), .14); color: var(--txt-2); font-size: 10px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.vwt:hover .vwt-b { background: rgba(var(--tint-rgb), .22); }
.vwt:not(:hover) .vwt-b:not(.pin) { opacity: 0; }
.vwt-b { transition: opacity .14s, background .14s; }
.vwt-b:hover { background: rgba(var(--cyan-rgb), .32); color: #fff; }
.vwt-b.pin { background: rgba(var(--amber-rgb), .3); opacity: 1; }
.vwt-b:disabled { opacity: .4; cursor: not-allowed; }

.vwt-body { position: relative; flex: 1 1 auto; min-height: 0; }
/* 监视位自带头部（名称/固定/操作）、灾情角标与底部信息条，
   摄像头组件那三层浮层在这里会重复且互相遮挡，统一隐掉 */
.vwt .cam-badge, .vwt .cam-meta, .vwt .cam-src { display: none; }
.vwt-empty {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  font-size: 12px; color: var(--txt-3); background: transparent; text-align: center;
}
.vwt-empty span { font-size: 13px; font-weight: 700; opacity: .8; }
.vwt-empty em { font-style: normal; font-size: 10.5px; opacity: .6; }

/* 离线通道：明确告知值守人员"这不是黑屏故障" */
.vwt-off {
  position: absolute; inset: 0; z-index: 4;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: repeating-linear-gradient(45deg, rgba(6, 10, 16, .93) 0 12px, rgba(11, 17, 26, .93) 12px 24px);
  color: #93a3b6; text-align: center; padding: 8px;
}
.vwt-off .vwo-ic { font-size: 20px; filter: grayscale(.4); }
.vwt-off b { font-size: 12px; letter-spacing: .5px; color: #cfd9e6; }
.vwt-off em { font-style: normal; font-size: 10px; opacity: .7; }
.vwt-foot {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 3px 7px; font-size: 10px; color: #cfe0f0;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .62));
  /* 演示流本身烧了时间戳与规格 OSD，压条常显会互相打架 → 悬停才出来 */
  opacity: 0; transition: opacity .15s;
}
.vwt:hover .vwt-foot { opacity: 1; }
.vwt-foot .mono { opacity: .8; }

/* 灾情画面突出显示：等级色描边 + 呼吸脉冲 + 顶部角标
   用 --vwt-c / --vwt-rgb 按等级切换，描边、脉冲、角标三处同色，不会一件红一件橙 */
.vwt.alarm { --vwt-c: var(--lvb-p0); --vwt-rgb: var(--flame-rgb); border-color: var(--vwt-c); }
.vwt.alarm.lv-P1 { --vwt-c: var(--lvb-p1); --vwt-rgb: var(--orange-rgb); }
.vwt.alarm.lv-P2 { --vwt-c: var(--lvb-p2); --vwt-rgb: var(--amber-rgb); }
.vwt.alarm.lv-P3 { --vwt-c: var(--lvb-p3); --vwt-rgb: var(--cyan-rgb); }
/* 左侧等级色带：画面全黑时也能一眼看出这一格是灾情、什么等级 */
.vwt.alarm::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; z-index: 6;
  background: var(--vwt-c); box-shadow: 0 0 10px 0 rgba(var(--vwt-rgb), .85);
}
.vwt.alarm::after {
  content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  border: 2px solid var(--vwt-c); border-radius: 10px;
  animation: vwtPulse 1.3s ease-in-out infinite;
}
@keyframes vwtPulse {
  0%, 100% { opacity: .35; box-shadow: inset 0 0 0 0 rgba(var(--vwt-rgb), 0); }
  50%      { opacity: 1;   box-shadow: inset 0 0 22px 0 rgba(var(--vwt-rgb), .35); }
}
.vwt-alarm {
  position: absolute; left: 6px; right: 6px; top: 6px; z-index: 5;
  display: flex; align-items: center; gap: 6px;
  padding: 3px 7px; border-radius: 7px;
  background: linear-gradient(90deg, rgba(var(--vwt-rgb), .94), rgba(var(--vwt-rgb), .66));
  box-shadow: 0 4px 14px -6px rgba(0, 0, 0, .7);
  font-size: 10.5px; color: #fff;
}
.vwt-alarm .va-lv { flex: none; font-weight: 800; letter-spacing: .2px; }
.vwt-alarm .va-t { flex: 1 1 auto; min-width: 0; }
.vwt-alarm .va-n { flex: none; opacity: .85; }

/* ---------- 大屏底部操作条 ---------- */
.vwc-foot {
  flex: none; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 11px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel);
}
.vwc-foot .cyan { color: var(--cyan); }

/* ---------- 右侧摄像头清单 ---------- */
.vwc-list {
  flex: none; width: 306px; display: flex; flex-direction: column; min-height: 0;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--panel); overflow: hidden; backdrop-filter: blur(8px);
}
.vwl-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
/* KPI 四联：总路数 / 在线 / 离线 / 灾情 */
.vwl-kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); flex: none; }
.vwl-kpi .vk { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 7px 2px; background: var(--panel); }
.vwl-kpi .vk b { font-size: 15px; font-weight: 800; line-height: 1.05; color: var(--txt-1); }
.vwl-kpi .vk span { font-size: 9.5px; color: var(--txt-2); } /* 9.5px 属小字，--txt-3 在告警格淡红底上只有 3.4:1 */
.vwl-kpi .vk.on b { color: var(--tx-green); }
.vwl-kpi .vk.off b { color: var(--txt-3); }
.vwl-kpi .vk.al b { color: var(--tx-red); }
.vwl-kpi .vk.al.hot { background: rgba(var(--flame-rgb), .12); }
.vwl-kpi .vk.al.hot b { animation: coreBlink 1.2s ease-in-out infinite alternate; }

.vwl-filter { display: flex; flex-direction: column; gap: 6px; padding: 9px 11px; border-bottom: 1px solid var(--line); flex: none; }
.vwl-chk { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--txt-2); cursor: pointer; white-space: nowrap; }

/* 区域筛选片：替代原来的下拉，顺带把每个区域的在线数与灾情数摊开
   ⚠️ 必须 flex: none —— 侧栏是 flex column，允许收缩的话它会被压扁，
   超过两行的区域片就被裁掉（只剩前 4 个可见）。 */
.vwl-buildings {
  flex: none; display: flex; gap: 5px; flex-wrap: wrap; align-content: flex-start;
  padding: 8px 10px; border-bottom: 1px solid var(--line);
  max-height: 112px; overflow-y: auto;
}
.vlb {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; cursor: pointer;
  font-size: 11px; color: var(--txt-2); border: 1px solid var(--line); background: rgba(var(--tint-rgb), .05);
  transition: border-color .14s, background .14s;
}
.vlb:hover { border-color: rgba(var(--cyan-rgb), .5); }
.vlb.on { border-color: var(--cyan); background: rgba(var(--cyan-rgb), .14); color: var(--txt-1); font-weight: 700; }
.vlb em { font-style: normal; font-size: 9.5px; opacity: .7; }
.vlb.hot { border-color: rgba(var(--flame-rgb), .5); }
.vlb.hot i { font-style: normal; font-size: 9px; font-weight: 800; color: #fff; background: var(--lvb-p0); border-radius: 4px; padding: 0 4px; }
.vlb.weak { opacity: .62; }

.vwl-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 6px; }
.vwl-grp {
  display: flex; align-items: center; gap: 6px; padding: 6px 6px 3px;
  font-size: 10.5px; font-weight: 700; color: var(--txt-3); letter-spacing: .3px;
  position: sticky; top: -6px; z-index: 2; background: var(--panel); backdrop-filter: blur(6px);
}
.vwl-grp em { font-style: normal; font-weight: 600; opacity: .8; }
.vwl-grp i { font-style: normal; font-weight: 800; color: var(--on-flame); } /* 10.5px 小字，用 --on-flame：浅色主题=深红、深色主题=淡红，两向都达标 */
.vwl-i {
  display: flex; align-items: center; gap: 7px; padding: 6px 7px; border-radius: 8px;
  cursor: pointer; border: 1px solid transparent; transition: background .14s, border-color .14s;
}
.vwl-i:hover { background: rgba(var(--tint-rgb), .08); border-color: var(--line); }
.vwl-i.on { background: rgba(var(--cyan-rgb), .12); border-color: rgba(var(--cyan-rgb), .4); }
.vwl-i.pinned { border-color: rgba(var(--amber-rgb), .45); }
.vwl-i.alarm { background: rgba(var(--flame-rgb), .07); }
.vwl-i.alarm:hover { background: rgba(var(--flame-rgb), .13); }
.vwl-ic { flex: none; font-size: 13px; }
.vwl-tag { flex: none; font-size: 9.5px; font-weight: 800; padding: 1px 5px; border-radius: 4px; color: #fff; background: var(--txt-3); }
.vwl-tag.lv-P0 { background: var(--lvb-p0); } .vwl-tag.lv-P1 { background: var(--lvb-p1); }
.vwl-tag.lv-P2 { background: var(--lvb-p2); } .vwl-tag.lv-P3 { background: var(--lvb-p3); }
.vwl-pin { flex: none; font-size: 10px; }
.vwl-on { flex: none; font-size: 9.5px; font-weight: 700; color: var(--tx-cyan); }
.vwl-i.offline { opacity: .66; }
.vwl-i.offline .vwl-ic { filter: grayscale(.55); }
.vwl-foot { padding: 8px 12px; border-top: 1px solid var(--line); }

/* ---------- 看大图 ---------- */
.vwc-preview {
  position: fixed; inset: 0; z-index: 990; display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .62); backdrop-filter: blur(3px);
}
.vwp-box {
  width: min(1080px, 88vw); display: flex; flex-direction: column;
  border-radius: 12px; overflow: hidden; background: #05080d;
  border: 1px solid rgba(var(--cyan-rgb), .45);
  box-shadow: 0 30px 70px -24px rgba(0, 0, 0, .8);
}
.vwp-head {
  display: flex; align-items: center; gap: 8px; padding: 9px 12px;
  background: linear-gradient(180deg, rgba(var(--cyan-rgb), .22), rgba(var(--cyan-rgb), .07));
  border-bottom: 1px solid rgba(var(--cyan-rgb), .3); color: #dbe7f3;
}
.vwp-body { position: relative; aspect-ratio: 16 / 9; min-height: 0; }
.vwp-foot { padding: 8px 12px; background: rgba(0, 0, 0, .5); color: #cfe0f0; }

/* ==========================================================================
   大屏值守模式：铺满视口；3 秒无鼠标动作就把工具条与底部操作条收起来
   ========================================================================== */
.vw-console.fs {
  position: fixed; inset: 0; z-index: 900;
  height: auto; min-height: 0; padding: 10px; gap: 8px;
  background: var(--bg-0);
}
.vw-console.fs .vwc-bar,
.vw-console.fs .vwc-foot,
.vw-console.fs .vwc-line { transition: opacity .3s ease, transform .3s ease; }
.vw-console.fs.idle { cursor: none; }
.vw-console.fs.idle .vwc-bar,
.vw-console.fs.idle .vwc-foot,
.vw-console.fs.idle .vwc-line { opacity: 0; transform: translateY(-12px); pointer-events: none; }
.vw-console.fs.idle .vwt-b { opacity: 0 !important; }
.vw-console.fs.idle .vwt-foot { opacity: 0 !important; }
.vw-console.fs .vwc-list { width: 300px; }
.vw-console.fs .vwc-grid { gap: 10px; }

@media (max-width: 1180px) {
  .vwc-main { flex-direction: column; }
  .vwc-list { width: auto; max-height: 320px; }
  .vw-console { height: auto; min-height: 0; }
  .vwc-grid { min-height: 520px; }
  .vwc-bar-c { order: 3; flex: 1 1 100%; }
  .vw-console.fs { padding: 6px; }
  .vw-console.fs .vwc-list { width: auto; }
}

/* ==========================================================================
   帮助中心（停靠在主页面右侧 · 顶栏与侧栏双入口 · F1 切换）
   内容随平台版本发布：平台定位 / 升级记录 / 操作手册 / 常见问题
   ========================================================================== */
/* ---------- 侧栏底部入口 ---------- */
.side-help {
  width: 100%; display: flex; align-items: center; gap: 8px; margin-bottom: 9px;
  padding: 8px 10px; cursor: pointer; font-family: var(--font);
  font-size: 12.5px; font-weight: 700; color: var(--txt-1);
  border: 1px solid rgba(var(--cyan-rgb), .3); border-radius: 9px;
  background: rgba(var(--cyan-rgb), .08);
  transition: background .15s, border-color .15s;
}
.side-help:hover { background: rgba(var(--cyan-rgb), .17); border-color: rgba(var(--cyan-rgb), .5); }
.side-help.on { background: rgba(var(--cyan-rgb), .22); border-color: rgba(var(--cyan-rgb), .62); }
.side-help .sh-ic { flex: none; font-size: 13px; }
.side-help .sh-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar.collapsed .side-help { justify-content: center; padding: 8px 0; }
.sidebar.collapsed .side-help .sh-t { display: none; }

/* ---------- 顶栏入口 ---------- */
.help-entry { border-color: rgba(var(--cyan-rgb), .34); color: var(--on-cyan); }
.help-entry:hover { background: rgba(var(--cyan-rgb), .1); }
.help-entry.on { background: rgba(var(--cyan-rgb), .2); border-color: rgba(var(--cyan-rgb), .6); }
.help-entry .he-ic { font-size: 12.5px; }
.help-entry .he-t { font-weight: 700; }

/* ---------- 停靠列：与 .content 并排，挤压而非遮挡主内容 ---------- */
.main-row { position: relative; flex: 1; min-height: 0; display: flex; }
.hc-dock {
  flex: none; width: clamp(620px, 46vw, 900px); min-width: 0;
  display: flex; flex-direction: column; min-height: 0;
  border-left: 1px solid var(--line-strong);
  background: var(--panel-solid);
  box-shadow: -16px 0 40px -32px rgba(var(--overlay-rgb), .55);
  animation: hcDock .2s cubic-bezier(.2, .8, .3, 1);
}
@keyframes hcDock { from { transform: translateX(22px); opacity: .35 } to { transform: none; opacity: 1 } }

/* 帮助停靠时，浮动的 AI 助手整体右移让位，避免压住帮助内容 */
.layout { --help-dock-w: 0px; }
.layout.help-on { --help-dock-w: clamp(620px, 46vw, 900px); }
.layout.help-on .ai-fab,
.layout.help-on .ai-dock { right: calc(22px + var(--help-dock-w, 0px)); }

/* ---------- 头部 ---------- */
.hc-head {
  flex: none; display: flex; flex-direction: column; gap: 9px; padding: 10px 14px 11px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(var(--cyan-rgb), .07), transparent);
}
.hc-hrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hc-brand { display: flex; align-items: center; gap: 9px; flex: none; min-width: 0; }
.hc-brand .hc-ic {
  width: 30px; height: 30px; flex: none; border-radius: 9px; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--cyan-rgb), .14); border: 1px solid rgba(var(--cyan-rgb), .3);
}
.hc-brand .hc-t { font-size: 14px; font-weight: 800; color: var(--txt-1); letter-spacing: .2px; }
.hc-brand .hc-s { font-size: 11px; color: var(--txt-3); white-space: nowrap; }
.hc-search {
  flex: 1 1 auto; min-width: 0; width: 100%; height: 34px;
  display: flex; align-items: center; gap: 7px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 9px; background: rgba(var(--panel2-rgb), .85);
  transition: border-color .15s, box-shadow .15s;
}
.hc-search:focus-within { border-color: rgba(var(--cyan-rgb), .6); box-shadow: 0 0 0 3px rgba(var(--cyan-rgb), .12); }
.hc-search .hc-si { flex: none; font-size: 12px; opacity: .7; }
.hc-input {
  flex: 1 1 auto; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent;
  color: var(--txt-1); font-size: 12.5px; font-family: var(--font);
}
.hc-input::placeholder { color: var(--txt-3); }
.hc-sn {
  flex: none; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 7px;
  color: var(--on-cyan); background: rgba(var(--cyan-rgb), .14);
}
.hc-sclr {
  flex: none; width: 18px; height: 18px; border: 0; border-radius: 5px; cursor: pointer;
  background: rgba(var(--tint-rgb), .1); color: var(--txt-2); font-size: 10px; line-height: 1;
}
.hc-sclr:hover { background: rgba(var(--tint-rgb), .22); }
.hc-kbd {
  flex: none; font-family: var(--mono); font-size: 10.5px; color: var(--txt-3);
  border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px;
}
.hc-meta { flex: none; display: flex; align-items: center; gap: 6px; }
.hc-x {
  flex: none; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 9px;
  cursor: pointer; background: transparent; color: var(--txt-2); font-size: 13px;
}
.hc-x:hover { background: rgba(var(--flame-rgb), .12); color: var(--on-flame); border-color: rgba(var(--flame-rgb), .34); }

/* ---------- 主体 ---------- */
.hc-body { flex: 1 1 auto; min-height: 0; display: flex; }
.hc-nav {
  flex: none; width: 244px; overflow-y: auto; padding: 10px 8px 24px;
  border-right: 1px solid var(--line); background: rgba(var(--panel2-rgb), .5);
}
.hc-nav-h { padding: 4px 8px 10px; font-size: 11px; color: var(--txt-3); }

.hc-sec { margin-bottom: 4px; }
.hc-sec-h {
  display: flex; align-items: center; gap: 7px; padding: 8px 9px; border-radius: 9px;
  cursor: pointer; user-select: none; font-size: 13px; font-weight: 700; color: var(--txt-1);
}
.hc-sec-h:hover { background: rgba(var(--tint-rgb), .06); }
.hc-sec-h.on { color: var(--on-cyan); }
.hc-sec-h.here { background: rgba(var(--cyan-rgb), .09); }
.hc-caret { width: 12px; flex: none; font-size: 9px; color: var(--txt-3); }
.hc-caret.sm { font-size: 8px; }
.hc-sec-ic { flex: none; font-size: 13px; }
.hc-sec-t { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-sec-n { flex: none; font-size: 10.5px; color: var(--txt-3); font-family: var(--mono); }
.hc-dot { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 6px rgba(var(--cyan-rgb), .8); }
.hc-sec-b { padding-left: 12px; }
.hc-sub { padding: 2px 8px 8px 27px; font-size: 11px; line-height: 1.5; color: var(--txt-3); }

.hc-grp { margin-bottom: 2px; }
.hc-grp-h {
  display: flex; align-items: center; gap: 6px; padding: 6px 8px 6px 12px; border-radius: 8px;
  cursor: pointer; user-select: none; font-size: 11.5px; font-weight: 700; color: var(--txt-2);
}
.hc-grp-h:hover { background: rgba(var(--tint-rgb), .05); }
.hc-grp-t { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-grp-n { flex: none; font-size: 10px; color: var(--txt-3); font-family: var(--mono); }

.hc-item {
  display: flex; align-items: center; gap: 6px; margin-left: 4px; padding: 6px 8px 6px 24px;
  border-radius: 8px; border-left: 2px solid transparent; cursor: pointer;
  font-size: 12.5px; color: var(--txt-2);
}
.hc-item:hover { background: rgba(var(--cyan-rgb), .08); color: var(--txt-1); }
.hc-item.on {
  background: rgba(var(--cyan-rgb), .13); border-left-color: var(--cyan);
  color: var(--on-cyan); font-weight: 700;
}
.hc-item.nop { opacity: .62; }
.hc-li { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-tag {
  flex: none; max-width: 76px; font-size: 9.5px; color: var(--txt-3);
  border: 1px solid var(--line); border-radius: 4px; padding: 0 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hc-item.on .hc-tag { color: var(--on-cyan); border-color: rgba(var(--cyan-rgb), .4); }
.hc-lock { flex: none; font-size: 9px; }

/* ---------- 菜单覆盖度提醒 ---------- */
.hc-cov {
  margin: 12px 6px 0; padding: 9px 11px; border-radius: 9px;
  background: rgba(var(--amber-rgb), .1); border: 1px solid rgba(var(--amber-rgb), .34);
}
.hc-cov-t { font-size: 11.5px; font-weight: 700; color: var(--on-amber); }
.hc-cov-l { margin-top: 4px; font-size: 11px; line-height: 1.5; color: var(--txt-2); }
.hc-cov-n { margin-top: 4px; font-size: 10.5px; color: var(--txt-3); }

/* ---------- 搜索结果 ---------- */
.hc-res { display: flex; flex-direction: column; gap: 4px; }
.hc-res-i { padding: 9px 10px; border-radius: 9px; border: 1px solid transparent; cursor: pointer; }
.hc-res-i:hover { background: rgba(var(--cyan-rgb), .07); }
.hc-res-i.on { background: rgba(var(--cyan-rgb), .12); border-color: rgba(var(--cyan-rgb), .34); }
.hc-res-t { font-size: 12.5px; font-weight: 700; color: var(--txt-1); }
.hc-res-p { margin-top: 2px; font-size: 10.5px; color: var(--txt-3); }
.hc-res-s {
  margin-top: 5px; font-size: 11.5px; line-height: 1.6; color: var(--txt-2);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------- 正文 ---------- */
.hc-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.hc-bar {
  flex: none; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; row-gap: 6px;
  padding: 8px 12px; border-bottom: 1px solid var(--line);
}
.hc-crumb {
  display: flex; align-items: center; flex: 1 1 auto; min-width: 0; font-size: 11.5px; color: var(--txt-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hc-crumb .sep { margin: 0 4px; opacity: .5; }
.hc-doc { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 18px 26px 60px; scroll-behavior: smooth; }
.hc-doc-h { padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.hc-doc-t { font-size: 19px; font-weight: 800; color: var(--txt-1); letter-spacing: .3px; }
.hc-doc-m { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }

.hc-md { font-size: 13.4px; line-height: 1.95; color: var(--txt-2); }
.hc-md .hc-h { margin: 22px 0 10px; color: var(--txt-1); font-weight: 800; letter-spacing: .2px; }
.hc-md h3.hc-h { font-size: 15.5px; padding-left: 10px; border-left: 3px solid var(--cyan); }
.hc-md h4.hc-h { font-size: 14px; }
.hc-md h5.hc-h { font-size: 13px; color: var(--txt-2); }
.hc-md .hc-p { margin: 9px 0; }
.hc-md strong { color: var(--txt-1); font-weight: 700; }
.hc-md code {
  font-family: var(--mono); font-size: 12px; padding: 1px 5px; border-radius: 5px;
  background: rgba(var(--tint-rgb), .09); border: 1px solid var(--line); color: var(--on-cyan);
}
.hc-md .hc-pre {
  margin: 12px 0; padding: 12px 14px; overflow-x: auto; border-radius: 10px;
  background: rgba(var(--tint-rgb), .06); border: 1px solid var(--line);
}
.hc-md .hc-pre code { padding: 0; border: 0; background: transparent; font-size: 12px; color: var(--txt-2); }
.hc-md .hc-ul, .hc-md .hc-ol { margin: 8px 0 8px 4px; padding-left: 20px; }
.hc-md .hc-ul li, .hc-md .hc-ol li { margin: 5px 0; }
.hc-md .hc-ul li::marker { color: var(--cyan); }
.hc-md .hc-ol li::marker { color: var(--cyan); font-weight: 700; }
.hc-md .hc-q {
  margin: 12px 0; padding: 10px 14px; font-size: 13px; color: var(--txt-1);
  border-left: 3px solid rgba(var(--amber-rgb), .8); border-radius: 0 9px 9px 0;
  background: rgba(var(--amber-rgb), .08);
}
.hc-md .hc-tw { margin: 12px 0; overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.hc-md .hc-tb { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.hc-md .hc-tb th {
  padding: 8px 11px; text-align: left; white-space: nowrap; font-weight: 700; color: var(--txt-1);
  background: rgba(var(--tint-rgb), .06); border-bottom: 1px solid var(--line);
}
.hc-md .hc-tb td { padding: 7px 11px; border-bottom: 1px solid var(--line); vertical-align: top; }
.hc-md .hc-tb tr:last-child td { border-bottom: 0; }
.hc-md .hc-a { color: var(--cyan); text-decoration: none; border-bottom: 1px dashed rgba(var(--cyan-rgb), .5); }
.hc-hl { background: rgba(var(--amber-rgb), .38); color: inherit; border-radius: 3px; padding: 0 2px; }

.hc-empty { padding: 34px 14px; text-align: center; font-size: 12.5px; color: var(--txt-3); }
.hc-empty .ic { font-size: 30px; margin-bottom: 8px; }

@media (max-width: 1400px) {
  .hc-hint { display: none; }
  .hc-nav { width: 228px; }
}
@media (max-width: 1200px) {
  /* 窄屏：帮助中心铺满主内容区（仍在页面内，只是盖住 .content，不动顶栏与侧栏） */
  .hc-dock { position: absolute; inset: 0; width: auto; z-index: 6; }
  .layout.help-on .ai-fab, .layout.help-on .ai-dock { display: none; }
  .hc-upd { display: none; }
  .hc-nav { width: 246px; }
  .hc-doc { padding: 16px 20px 56px; }
}
@media (max-width: 760px) {
  .hc-body { flex-direction: column; }
  .hc-nav { width: auto; max-height: 40%; border-right: 0; border-bottom: 1px solid var(--line); }
  .hc-search { width: 100%; }
  .hc-meta { display: none; }
}