/* ==========================================================================
 * ShearMon 全站主题系统（theme.css）
 * --------------------------------------------------------------------------
 * 用法：三个页面（大屏 index / 管理 admin / 登录 login）都在 <head> 里引入本文件，
 *       并由 theme.js 在 <html> 上写 data-theme="dark|light|tech|aurora|violet|amber|graphite"。
 *
 * 设计原则：
 *   1) 本文件不改动页面原有的任何选择器语义，只做「变量化 + 外观增强」，
 *      选择器统一以 html[data-theme] 开头，权重高于页面内联 <style>，切换即时生效；
 *   2) 页面原有样式 = 默认（深蓝），不设 data-theme 时行为和过去完全一致；
 *   3) 每套主题只需定义下面这一组变量，无需为每个页面重写规则。
 * ========================================================================== */

/* ============================ 1. 主题配色变量 ============================ */

/* ---------- 深蓝科技（默认） ---------- */
html[data-theme="dark"] {
  --s-page: radial-gradient(1200px 700px at 70% 20%, #123a75 0%, #0a1e3f 45%, #061024 100%);
  --s-card: #0b1c38;
  --s-panel-a: rgba(10, 30, 60, .72); --s-panel-b: rgba(6, 18, 40, .88);
  --s-panel-brd: rgba(40, 110, 200, .30);
  --s-glow: rgba(30, 120, 255, .12);
  --s-shadow: 0 6px 22px rgba(0, 12, 32, .45);
  --s-text: #cfe3ff; --s-sub: #9cc3ee; --s-faint: #7fa8d9;
  --s-hl: #7ecbff; --s-hl2: #2b7bd3; --s-hl-soft: rgba(90, 170, 255, .5);
  --s-accent: #ffd479;
  --s-ok: #4be3a2; --s-warn: #ffc53d; --s-bad: #ff5c5c; --s-off: #5d7396;
  --s-th-bg: #0d2040; --s-th-tx: #7ecbff;
  --s-line: rgba(60, 140, 255, .18);
  --s-row-brd: rgba(60, 140, 255, .10); --s-row-hover: rgba(60, 140, 255, .10);
  --s-zebra: rgba(60, 140, 255, .045);
  --s-bar-bg: rgba(40, 80, 140, .30); --s-bar-a: #1554c0; --s-bar-b: #38b6ff;
  --s-ctl-bg: rgba(12, 32, 62, .9); --s-ctl-brd: rgba(60, 140, 255, .35);
  --s-ctl-tx: #9cc3ee; --s-ctl-hover: rgba(60, 140, 255, .22);
  --s-header-a: rgba(10, 40, 90, .55); --s-header-b: rgba(8, 24, 55, .88);
  --s-glass-bg: rgba(6, 18, 40, .62); --s-glass-brd: rgba(60, 140, 255, .28);
  --s-scroll: rgba(70, 140, 230, .5);
  --s-logo-bg: #ffffff;
}

/* ---------- 晨曦白（浅色） ---------- */
html[data-theme="light"] {
  --s-page: linear-gradient(180deg, #f1f5fb 0%, #e7edf6 100%);
  --s-card: #ffffff;
  --s-panel-a: rgba(255, 255, 255, .94); --s-panel-b: rgba(243, 248, 254, .92);
  --s-panel-brd: rgba(90, 140, 210, .35);
  --s-glow: rgba(30, 120, 255, .05);
  --s-shadow: 0 6px 20px rgba(30, 70, 140, .10);
  --s-text: #24344d; --s-sub: #40628f; --s-faint: #5a7aa8;
  --s-hl: #1d5aa8; --s-hl2: #2b7bd3; --s-hl-soft: rgba(45, 120, 210, .45);
  --s-accent: #b06a00;
  --s-ok: #14a06a; --s-warn: #d99a00; --s-bad: #d93a3f; --s-off: #8296ad;
  --s-th-bg: #f2f7fd; --s-th-tx: #40628f;
  --s-line: rgba(60, 110, 190, .22);
  --s-row-brd: rgba(60, 110, 190, .14); --s-row-hover: rgba(60, 120, 220, .09);
  --s-zebra: rgba(60, 120, 220, .035);
  --s-bar-bg: rgba(90, 140, 210, .20); --s-bar-a: #2a6fd1; --s-bar-b: #57b0f5;
  --s-ctl-bg: #ffffff; --s-ctl-brd: rgba(90, 140, 210, .45);
  --s-ctl-tx: #40628f; --s-ctl-hover: rgba(60, 120, 220, .14);
  --s-header-a: rgba(210, 228, 250, .85); --s-header-b: rgba(240, 246, 253, .95);
  --s-glass-bg: rgba(255, 255, 255, .88); --s-glass-brd: rgba(90, 140, 210, .35);
  --s-scroll: rgba(60, 120, 200, .38);
  --s-logo-bg: #ffffff;
}

/* ---------- 极客青（深色 · 青绿霓虹） ---------- */
html[data-theme="tech"] {
  --s-page: radial-gradient(1200px 700px at 70% 20%, #0a4a4f 0%, #04141a 55%, #01080b 100%);
  --s-card: #06222a;
  --s-panel-a: rgba(6, 46, 54, .76); --s-panel-b: rgba(3, 20, 28, .9);
  --s-panel-brd: rgba(0, 226, 200, .30);
  --s-glow: rgba(0, 226, 200, .12);
  --s-shadow: 0 6px 22px rgba(0, 24, 28, .5);
  --s-text: #d9fff7; --s-sub: #84ead9; --s-faint: #5aa8a4;
  --s-hl: #2ff0d0; --s-hl2: #0e9f8f; --s-hl-soft: rgba(47, 240, 208, .5);
  --s-accent: #ffe066;
  --s-ok: #2ff0a0; --s-warn: #ffd45e; --s-bad: #ff6b81; --s-off: #4d7f86;
  --s-th-bg: #052a30; --s-th-tx: #2ff0d0;
  --s-line: rgba(0, 226, 200, .20);
  --s-row-brd: rgba(0, 226, 200, .12); --s-row-hover: rgba(0, 226, 200, .10);
  --s-zebra: rgba(0, 226, 200, .045);
  --s-bar-bg: rgba(0, 130, 118, .32); --s-bar-a: #068a7d; --s-bar-b: #2ff0d0;
  --s-ctl-bg: rgba(4, 32, 38, .92); --s-ctl-brd: rgba(0, 220, 195, .38);
  --s-ctl-tx: #84ead9; --s-ctl-hover: rgba(0, 226, 200, .20);
  --s-header-a: rgba(0, 66, 70, .62); --s-header-b: rgba(2, 22, 28, .9);
  --s-glass-bg: rgba(3, 22, 28, .66); --s-glass-brd: rgba(0, 226, 200, .30);
  --s-scroll: rgba(0, 200, 180, .5);
  --s-logo-bg: #ffffff;
}

/* ---------- 极光绿（深色 · 墨绿翡翠） ---------- */
html[data-theme="aurora"] {
  --s-page: radial-gradient(1200px 700px at 70% 20%, #0d4a2c 0%, #05170f 55%, #020c07 100%);
  --s-card: #072a1a;
  --s-panel-a: rgba(10, 52, 34, .76); --s-panel-b: rgba(5, 26, 18, .9);
  --s-panel-brd: rgba(70, 226, 148, .28);
  --s-glow: rgba(40, 220, 140, .12);
  --s-shadow: 0 6px 22px rgba(0, 26, 14, .5);
  --s-text: #deffee; --s-sub: #8becba; --s-faint: #63ab88;
  --s-hl: #43e97b; --s-hl2: #17a86a; --s-hl-soft: rgba(67, 233, 123, .5);
  --s-accent: #ffd479;
  --s-ok: #43e97b; --s-warn: #ffc53d; --s-bad: #ff7a7a; --s-off: #5d8a70;
  --s-th-bg: #082f1e; --s-th-tx: #43e97b;
  --s-line: rgba(70, 226, 148, .20);
  --s-row-brd: rgba(70, 226, 148, .12); --s-row-hover: rgba(70, 226, 148, .10);
  --s-zebra: rgba(70, 226, 148, .045);
  --s-bar-bg: rgba(30, 120, 74, .32); --s-bar-a: #128a52; --s-bar-b: #43e97b;
  --s-ctl-bg: rgba(6, 34, 24, .92); --s-ctl-brd: rgba(70, 226, 148, .35);
  --s-ctl-tx: #8becba; --s-ctl-hover: rgba(70, 226, 148, .20);
  --s-header-a: rgba(6, 56, 36, .62); --s-header-b: rgba(4, 26, 18, .9);
  --s-glass-bg: rgba(4, 26, 18, .66); --s-glass-brd: rgba(70, 226, 148, .30);
  --s-scroll: rgba(60, 200, 130, .5);
  --s-logo-bg: #ffffff;
}

/* ---------- 午夜紫（深色 · 紫罗兰） ---------- */
html[data-theme="violet"] {
  --s-page: radial-gradient(1200px 700px at 70% 20%, #3d1a72 0%, #170b34 55%, #0a0618 100%);
  --s-card: #1b1040;
  --s-panel-a: rgba(52, 26, 92, .76); --s-panel-b: rgba(22, 12, 46, .9);
  --s-panel-brd: rgba(168, 120, 255, .32);
  --s-glow: rgba(150, 100, 255, .14);
  --s-shadow: 0 6px 22px rgba(12, 4, 32, .5);
  --s-text: #efe6ff; --s-sub: #c8acf7; --s-faint: #9a80c9;
  --s-hl: #b98cff; --s-hl2: #7a4dff; --s-hl-soft: rgba(185, 140, 255, .5);
  --s-accent: #ffd479;
  --s-ok: #56e39f; --s-warn: #ffc857; --s-bad: #ff6b8b; --s-off: #6f6390;
  --s-th-bg: #22124a; --s-th-tx: #b98cff;
  --s-line: rgba(168, 120, 255, .22);
  --s-row-brd: rgba(168, 120, 255, .12); --s-row-hover: rgba(168, 120, 255, .12);
  --s-zebra: rgba(168, 120, 255, .05);
  --s-bar-bg: rgba(120, 80, 210, .32); --s-bar-a: #6a3ddb; --s-bar-b: #b98cff;
  --s-ctl-bg: rgba(30, 16, 60, .92); --s-ctl-brd: rgba(168, 120, 255, .38);
  --s-ctl-tx: #c8acf7; --s-ctl-hover: rgba(168, 120, 255, .22);
  --s-header-a: rgba(64, 30, 116, .62); --s-header-b: rgba(24, 12, 50, .9);
  --s-glass-bg: rgba(24, 12, 50, .68); --s-glass-brd: rgba(168, 120, 255, .32);
  --s-scroll: rgba(160, 110, 250, .5);
  --s-logo-bg: #ffffff;
}

/* ---------- 熔金工业（深色 · 琥珀暖调） ---------- */
html[data-theme="amber"] {
  --s-page: radial-gradient(1200px 700px at 70% 20%, #553013 0%, #16100a 55%, #0b0805 100%);
  --s-card: #2b1c0d;
  --s-panel-a: rgba(68, 44, 20, .76); --s-panel-b: rgba(28, 18, 10, .9);
  --s-panel-brd: rgba(255, 186, 88, .30);
  --s-glow: rgba(255, 170, 60, .12);
  --s-shadow: 0 6px 22px rgba(30, 16, 4, .5);
  --s-text: #ffeed8; --s-sub: #f2c98d; --s-faint: #bd9765;
  --s-hl: #ffb545; --s-hl2: #e07b1a; --s-hl-soft: rgba(255, 181, 69, .5);
  --s-accent: #ffe9a8;
  --s-ok: #7fdc6a; --s-warn: #ffb545; --s-bad: #ff6a5a; --s-off: #8a7358;
  --s-th-bg: #33210e; --s-th-tx: #ffb545;
  --s-line: rgba(255, 186, 88, .20);
  --s-row-brd: rgba(255, 186, 88, .12); --s-row-hover: rgba(255, 186, 88, .10);
  --s-zebra: rgba(255, 186, 88, .05);
  --s-bar-bg: rgba(190, 120, 34, .30); --s-bar-a: #c9701a; --s-bar-b: #ffc76b;
  --s-ctl-bg: rgba(40, 26, 14, .92); --s-ctl-brd: rgba(255, 186, 88, .35);
  --s-ctl-tx: #f2c98d; --s-ctl-hover: rgba(255, 186, 88, .20);
  --s-header-a: rgba(80, 50, 18, .62); --s-header-b: rgba(30, 20, 10, .9);
  --s-glass-bg: rgba(30, 20, 10, .68); --s-glass-brd: rgba(255, 186, 88, .30);
  --s-scroll: rgba(230, 160, 70, .5);
  --s-logo-bg: #ffffff;
}

/* ---------- 石墨灰（深色 · 低饱和商务） ---------- */
html[data-theme="graphite"] {
  --s-page: radial-gradient(1200px 700px at 70% 20%, #333b45 0%, #14171c 55%, #0c0e12 100%);
  --s-card: #1d2127;
  --s-panel-a: rgba(44, 51, 60, .78); --s-panel-b: rgba(22, 26, 32, .9);
  --s-panel-brd: rgba(160, 180, 200, .22);
  --s-glow: rgba(160, 190, 220, .07);
  --s-shadow: 0 6px 22px rgba(0, 0, 0, .45);
  --s-text: #e3e9f0; --s-sub: #b6c3d1; --s-faint: #8d99a9;
  --s-hl: #a6c6ea; --s-hl2: #6f8fb5; --s-hl-soft: rgba(166, 198, 234, .5);
  --s-accent: #ffd479;
  --s-ok: #56d6a0; --s-warn: #ffc857; --s-bad: #ff7a7a; --s-off: #6f7c8c;
  --s-th-bg: #252a31; --s-th-tx: #b6c3d1;
  --s-line: rgba(160, 180, 200, .18);
  --s-row-brd: rgba(160, 180, 200, .10); --s-row-hover: rgba(160, 180, 200, .10);
  --s-zebra: rgba(160, 180, 200, .04);
  --s-bar-bg: rgba(130, 150, 175, .28); --s-bar-a: #4f6274; --s-bar-b: #a6c6ea;
  --s-ctl-bg: rgba(32, 37, 44, .92); --s-ctl-brd: rgba(160, 180, 200, .30);
  --s-ctl-tx: #b6c3d1; --s-ctl-hover: rgba(160, 180, 200, .18);
  --s-header-a: rgba(52, 60, 70, .70); --s-header-b: rgba(24, 28, 34, .92);
  --s-glass-bg: rgba(24, 28, 34, .68); --s-glass-brd: rgba(160, 180, 200, .26);
  --s-scroll: rgba(160, 180, 200, .45);
  --s-logo-bg: #ffffff;
}

/* ======================= 2. 派生变量（通用，无需每套重写） ======================= */
html[data-theme] {
  --s-input-bg: var(--s-ctl-bg);
  --s-input-brd: var(--s-ctl-brd);
  --s-chip-bg: var(--s-ctl-bg);
}

/* ============================ 3. 运维大屏主题化 ============================ */
html[data-theme] body {
  background: var(--s-page);
  color: var(--s-text);
  transition: background .35s ease, color .35s ease;
}
/* 面板：圆角 + 阴影 + hover 微高亮 */
html[data-theme] .panel {
  background: linear-gradient(180deg, var(--s-panel-a), var(--s-panel-b));
  border: 1px solid var(--s-panel-brd);
  border-radius: 9px;
  box-shadow: var(--s-shadow);
  transition: border-color .25s ease, box-shadow .25s ease;
}
html[data-theme] .panel:hover { border-color: var(--s-hl-soft); }
html[data-theme] .panel::before {
  border-radius: 9px;
  box-shadow: inset 0 0 30px var(--s-glow);
}
/* 面板标题 */
html[data-theme] .p-title {
  color: var(--s-hl);
  border-bottom: 1px solid var(--s-line);
}
html[data-theme] .p-title::before {
  background: linear-gradient(var(--s-hl), var(--s-hl2));
  box-shadow: 0 0 10px var(--s-hl-soft);
}
html[data-theme] .pt-tools select,
html[data-theme] .pt-btn {
  color: var(--s-ctl-tx); background: var(--s-ctl-bg); border: 1px solid var(--s-ctl-brd);
  border-radius: 5px;
}
html[data-theme] .pt-btn:hover { color: var(--s-text); border-color: var(--s-hl); background: var(--s-ctl-hover); }
html[data-theme] .p-mini { color: var(--s-faint); }
/* 分段按钮（环形/树图/排行） */
html[data-theme] .seg button { color: var(--s-ctl-tx); border-color: var(--s-ctl-brd); }
html[data-theme] .seg button:last-child { border-right: 1px solid var(--s-ctl-brd); }
html[data-theme] .seg button:hover { color: var(--s-text); }
html[data-theme] .seg button.on { background: var(--s-ctl-hover); color: var(--s-hl); }
/* 滚动条（全站统一细样式；此前只作用于 .scroll-y，弹窗等区域仍是浏览器原生粗条） */
html[data-theme] * { scrollbar-width: thin; scrollbar-color: var(--s-scroll) transparent; }
html[data-theme] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-theme] ::-webkit-scrollbar-track { background: transparent; }
html[data-theme] ::-webkit-scrollbar-thumb {
  background: var(--s-scroll); border-radius: 99px;
  border: 3px solid transparent; background-clip: padding-box;
}
html[data-theme] ::-webkit-scrollbar-thumb:hover,
html[data-theme] ::-webkit-scrollbar-thumb:active { background: var(--s-hl); background-clip: padding-box; }
html[data-theme] ::-webkit-scrollbar-corner { background: transparent; }
/* ---------- 头部 ---------- */
html[data-theme] #header {
  background: linear-gradient(90deg, var(--s-header-a), var(--s-header-b) 40%, var(--s-header-b) 60%, var(--s-header-a));
  border: 1px solid var(--s-panel-brd);
  border-radius: 9px;
  position: relative;
  z-index: 50; /* 调色盘弹层从头部垂下，必须盖过下方地图面板 */
}
/* 头部底边流光：用背景位移动画（背景自动裁剪在元素内，不会把 overflow 撑出去），
   不能用 overflow:hidden + 移动伪元素 —— 那会把调色盘弹层一起裁掉 */
html[data-theme] #header::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--s-hl), transparent) no-repeat;
  background-size: 32% 100%;
  animation: tpFlow 7s linear infinite; pointer-events: none;
}
@keyframes tpFlow { 0% { background-position: -50% 0; } 100% { background-position: 150% 0; } }
html[data-theme] #header h1 {
  background: linear-gradient(90deg, var(--s-hl), var(--s-hl2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 22px var(--s-hl-soft);
}
html[data-theme] #header .sub { color: var(--s-faint); }
html[data-theme] #header .logo {
  background: var(--s-logo-bg);
  border-radius: 11px;
  box-shadow: 0 2px 10px var(--s-shadow), 0 0 0 1px var(--s-hl-soft);
}
html[data-theme] #header a {
  color: var(--s-sub) !important;
  border: 1px solid var(--s-ctl-brd) !important;
  border-radius: 10px !important;
}
html[data-theme] #header a:hover { color: var(--s-hl) !important; border-color: var(--s-hl) !important; }
html[data-theme] #clock .date { color: var(--s-sub); }
html[data-theme] #clock .week { color: var(--s-faint); }
html[data-theme] #clock .time { color: var(--s-text); text-shadow: 0 0 12px var(--s-hl-soft); }
html[data-theme] #conn-tag { border-color: var(--s-ctl-brd); }
html[data-theme] #sim-tag { color: var(--s-warn) !important; border-color: var(--s-warn) !important; }
/* ---------- KPI ---------- */
html[data-theme] .kpi {
  background: linear-gradient(180deg, var(--s-panel-a), var(--s-panel-b));
  border: 1px solid var(--s-panel-brd);
  border-radius: 9px;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
html[data-theme] .kpi:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px var(--s-glow);
  border-color: var(--s-hl-soft);
}
html[data-theme] .kpi .lbl { color: var(--s-faint); }
html[data-theme] .kpi.online .num { color: var(--s-ok); text-shadow: 0 0 14px var(--s-ok); }
html[data-theme] .kpi.total  .num { color: var(--s-hl); text-shadow: 0 0 14px var(--s-hl-soft); }
html[data-theme] .kpi.fault  .num { color: var(--s-bad); text-shadow: 0 0 14px var(--s-bad); }
html[data-theme] #kpi-rate { color: var(--s-ok) !important; }
/* ---------- 地理分布 ---------- */
html[data-theme] .geo-head { color: var(--s-faint); }
html[data-theme] .geo-head b { color: var(--s-hl); }
html[data-theme] .geo-grp { color: var(--s-faint); }
html[data-theme] .geo-grp::after { background: var(--s-line); }
html[data-theme] .geo-item .nm { color: var(--s-text); }
html[data-theme] .geo-item .bar-wrap { background: var(--s-bar-bg); }
html[data-theme] .geo-item .bar { background: linear-gradient(90deg, var(--s-bar-a), var(--s-bar-b)); }
html[data-theme] .geo-item .val { color: var(--s-text); }
html[data-theme] .geo-item .val small { color: var(--s-faint); }
html[data-theme] .geo-empty, html[data-theme] .geo-foot { color: var(--s-faint); }
html[data-theme] .geo-foot { border-top-color: var(--s-line); }
/* ---------- 表格 ---------- */
html[data-theme] .tbl thead th {
  color: var(--s-th-tx); background: var(--s-th-bg); border-bottom: 1px solid var(--s-line);
}
html[data-theme] .tbl thead th.srt:hover { color: var(--s-text); }
html[data-theme] .tbl thead th .ar { color: var(--s-hl); }
html[data-theme] .tbl tbody td { border-bottom: 1px solid var(--s-row-brd); }
html[data-theme] .tbl tbody tr:nth-child(even) td { background: var(--s-zebra); }
html[data-theme] .tbl tbody tr:hover td { background: var(--s-row-hover); }
html[data-theme] .tbl-empty { color: var(--s-faint); }
/* ---------- 最新动态滚动列表 ---------- */
html[data-theme] .srow { border-bottom: 1px dashed var(--s-row-brd); transition: background .2s; }
html[data-theme] .srow:hover { background: var(--s-row-hover); }
html[data-theme] .srow .sid { color: var(--s-sub); }
html[data-theme] .srow .scu { color: var(--s-text); }
html[data-theme] .srow .spr { color: var(--s-accent); }
/* ---------- 地图图例 / 风格条（毛玻璃） ---------- */
html[data-theme] #amap-legend {
  color: var(--s-sub); background: var(--s-glass-bg); border: 1px solid var(--s-glass-brd);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
html[data-theme] #amap-stylebar {
  background: var(--s-glass-bg); border: 1px solid var(--s-glass-brd);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
html[data-theme] #amap-stylebar button { color: var(--s-ctl-tx); border-radius: 5px; }
html[data-theme] #amap-stylebar button:hover { color: var(--s-text); }
html[data-theme] #amap-stylebar button.on { background: var(--s-ctl-hover); color: var(--s-hl); }
html[data-theme] .amk-lbl { color: var(--s-text); }
/* ---------- 状态标签 ---------- */
html[data-theme] .tag-ok  { color: var(--s-ok);  border-color: var(--s-ok);  background: transparent; }
html[data-theme] .tag-bad { color: var(--s-bad); border-color: var(--s-bad); background: transparent; }
/* ---------- 入场动画（仅首屏，不影响后续刷新内容） ---------- */
html[data-theme] #app > .panel,
html[data-theme] #left-col > .panel,
html[data-theme] #right-col > .panel,
html[data-theme] #right-col2 > .panel {
  animation: tpIn .5s cubic-bezier(.22, .68, .35, 1) both;
}
html[data-theme] #left-col > .panel:nth-child(2),
html[data-theme] #right-col > .panel:nth-child(2) { animation-delay: .07s; }
html[data-theme] #right-col > .panel:nth-child(3),
html[data-theme] #right-col2 > .panel:nth-child(1) { animation-delay: .14s; }
@keyframes tpIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ============================ 4. 管理页主题化 ============================ */
html[data-theme] body { background-attachment: fixed; }
html[data-theme] #topbar {
  background: var(--s-card);
  border-bottom: 1px solid var(--s-panel-brd);
  box-shadow: 0 2px 12px var(--s-glow);
}
html[data-theme] #topbar h1 { color: var(--s-text); }
html[data-theme] #topbar .right { color: var(--s-sub); }
html[data-theme] a { color: var(--s-hl); }
/* 卡片 / 表格 */
html[data-theme] .card {
  background: var(--s-card);
  border: 1px solid var(--s-panel-brd);
  border-radius: 10px;
  box-shadow: var(--s-shadow);
  transition: box-shadow .25s ease, border-color .25s ease;
}
html[data-theme] .card:hover { border-color: var(--s-hl-soft); }
html[data-theme] th, html[data-theme] td { border-bottom: 1px solid var(--s-row-brd); color: var(--s-text); }
html[data-theme] thead th { color: var(--s-th-tx); background: var(--s-th-bg); border-bottom: 1px solid var(--s-line); }
html[data-theme] thead th.srt:hover { color: var(--s-hl); }
html[data-theme] tbody tr:nth-child(even) { background: var(--s-zebra); }
html[data-theme] tbody tr:hover, html[data-theme] tbody tr:hover td { background: var(--s-row-hover); }
/* 表单控件 */
html[data-theme] select,
html[data-theme] input[type=text],
html[data-theme] input[type=number],
html[data-theme] input[type=password] {
  background: var(--s-input-bg); border: 1px solid var(--s-input-brd); color: var(--s-text);
  border-radius: 6px; transition: border-color .18s, box-shadow .18s;
}
html[data-theme] select:focus,
html[data-theme] input:focus { border-color: var(--s-hl); box-shadow: 0 0 0 3px var(--s-glow); }
html[data-theme] input::placeholder { color: var(--s-faint); }
/* 按钮 */
html[data-theme] button { color: var(--s-sub); }
html[data-theme] button.primary { background: linear-gradient(90deg, var(--s-hl2), var(--s-hl)); color: #fff; }
html[data-theme] button.primary:hover { filter: brightness(1.12); }
html[data-theme] button.ghost {
  border: 1px solid var(--s-ctl-brd); color: var(--s-ctl-tx); background: var(--s-ctl-bg);
  border-radius: 6px;
}
html[data-theme] button.ghost:hover { border-color: var(--s-hl); color: var(--s-hl); background: var(--s-ctl-hover); }
html[data-theme] button.danger { background: var(--s-bad); color: #fff; }
html[data-theme] button.link { color: var(--s-hl); }
/* 设备图标 / 状态 chip */
html[data-theme] .dev-ico { background: var(--s-ctl-hover); color: var(--s-hl); }
html[data-theme] .st-run   { color: var(--s-ok);   border-color: var(--s-ok);   background: transparent; }
html[data-theme] .st-idle  { color: var(--s-warn); border-color: var(--s-warn); background: transparent; }
html[data-theme] .st-fault { color: var(--s-bad);  border-color: var(--s-bad);  background: transparent; }
html[data-theme] .st-off   { color: var(--s-off);  border-color: var(--s-off);  background: transparent; }
html[data-theme] .sim { color: var(--s-warn); }
html[data-theme] .mono { color: var(--s-sub); }
html[data-theme] .chip.on  { color: var(--s-ok);   border-color: var(--s-ok);   background: transparent; }
html[data-theme] .chip.off { color: var(--s-off);  border-color: var(--s-off);  background: transparent; }
html[data-theme] #sim-chip.amber { color: var(--s-warn) !important; border-color: var(--s-warn) !important; background: transparent !important; }
/* 菜单 / 底栏 / 分页 */
html[data-theme] #ctx-menu {
  background: var(--s-card); border: 1px solid var(--s-panel-brd);
  box-shadow: 0 10px 30px var(--s-glow);
}
html[data-theme] #ctx-menu div { color: var(--s-text); }
html[data-theme] #ctx-menu div:hover { background: var(--s-row-hover); color: var(--s-hl); }
html[data-theme] #ctx-menu div.red { color: var(--s-bad); }
html[data-theme] #footbar { border-top: 1px solid var(--s-line); color: var(--s-sub); }
html[data-theme] #batch button, html[data-theme] #pager button {
  border: 1px solid var(--s-ctl-brd); background: var(--s-ctl-bg); color: var(--s-ctl-tx);
  border-radius: 6px;
}
html[data-theme] #batch button:hover, html[data-theme] #pager button:hover { border-color: var(--s-hl); color: var(--s-hl); }
html[data-theme] #batch button.red, html[data-theme] #ctx-menu div.red:hover { color: var(--s-bad); }
html[data-theme] #pager button.cur { border-color: var(--s-hl); color: var(--s-hl); background: var(--s-ctl-hover); }
/* 弹窗 */
html[data-theme] #modal-mask, html[data-theme] .mask { background: rgba(4, 10, 22, .55); }
html[data-theme] #modal, html[data-theme] .mbox {
  background: var(--s-card); border: 1px solid var(--s-panel-brd);
  box-shadow: 0 18px 50px var(--s-glow);
}
html[data-theme] .mbox .m-head { border-bottom: 1px solid var(--s-line); color: var(--s-text); }
html[data-theme] .mbox .m-head span { color: var(--s-faint); }
html[data-theme] .mbox .row label { color: var(--s-sub); }
html[data-theme] #m-map { border: 1px solid var(--s-ctl-brd); background: var(--s-ctl-bg); }
html[data-theme] #m-metrics { color: var(--s-faint); }
html[data-theme] #m-metrics b { color: var(--s-hl); }
html[data-theme] .mtbl th, html[data-theme] .mtbl td { border-bottom: 1px solid var(--s-row-brd); }
html[data-theme] .mtbl thead th { color: var(--s-th-tx); background: var(--s-th-bg); }
html[data-theme] .mtbl tr[data-primary="1"] { background: var(--s-row-hover); }
html[data-theme] .sec-title { color: var(--s-text); }
html[data-theme] .badge-primary { color: var(--s-hl); border: 1px solid var(--s-hl-soft); background: transparent; }
html[data-theme] .hint { color: var(--s-faint); }
/* 弹窗细节（2026-10-11 观感优化新增）：标题条 / 底栏 / 分区标题 / 连接参数卡片 / 参数表 */
html[data-theme] .mbox .m-head b::before { background: linear-gradient(var(--s-hl2), var(--s-hl)); }
html[data-theme] .mbox .m-head span:hover { background: var(--s-ctl-hover); color: var(--s-bad); }
html[data-theme] .mbox .m-foot { border-top: 1px solid var(--s-line); background: var(--s-th-bg); }
html[data-theme] .mbox .blk-t { color: var(--s-sub); }
html[data-theme] #m-uplink-info {
  background: var(--s-ctl-bg); border: 1px solid var(--s-panel-brd); color: var(--s-sub);
}
html[data-theme] .pktbl td { border-bottom-color: var(--s-row-brd); }
html[data-theme] .pktbl td.pk { color: var(--s-faint); }
html[data-theme] .pktbl td.pv { color: var(--s-text); }
html[data-theme] .warn-tx { color: var(--s-warn); }
html[data-theme] .sub-tx { color: var(--s-faint); }
html[data-theme] #settings h2 { color: var(--s-text); }
html[data-theme] #settings .frow label { color: var(--s-sub); }
html[data-theme] #log { background: var(--s-th-bg); color: var(--s-ok); border: 1px solid var(--s-line); }

/* ============================ 5. 登录页主题化 ============================ */
html[data-theme] .box {
  background: var(--s-glass-bg);
  border: 1px solid var(--s-glass-brd);
  box-shadow: 0 18px 60px var(--s-glow);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
html[data-theme] .box h1 { color: var(--s-text); }
html[data-theme] .box .sub { color: var(--s-faint); }
html[data-theme] .box .field label { color: var(--s-sub); }
html[data-theme] .box .field input {
  background: var(--s-input-bg); border: 1px solid var(--s-input-brd); color: var(--s-text);
}
html[data-theme] .box .field input:focus { border-color: var(--s-hl); box-shadow: 0 0 0 3px var(--s-glow); }
html[data-theme] .box #err { color: var(--s-bad); }
html[data-theme] .box #btn-login {
  background: linear-gradient(90deg, var(--s-hl2), var(--s-hl)); color: #fff;
  box-shadow: 0 8px 24px var(--s-glow);
}
html[data-theme] .box #btn-login:hover { filter: brightness(1.1); }
html[data-theme] .box .foot { color: var(--s-faint); }

/* ============================ 6. 调色盘组件 ============================ */
#tpick { position: relative; display: inline-flex; align-items: center; }
#tpick-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit; font-size: 13px; line-height: 1;
  padding: 6px 12px; border-radius: 12px; cursor: pointer;
  color: var(--s-sub); background: var(--s-ctl-bg);
  border: 1px solid var(--s-ctl-brd);
  transition: color .2s, border-color .2s, background .2s, transform .2s;
  white-space: nowrap;
}
#tpick-btn:hover { color: var(--s-hl); border-color: var(--s-hl); transform: translateY(-1px); }
#tpick-btn.on { color: var(--s-hl); border-color: var(--s-hl); background: var(--s-ctl-hover); }
#tpick-btn .tp-dot {
  width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .35) inset;
}
#tpick-panel {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 400;
  width: 282px; padding: 10px; border-radius: 14px;
  background: var(--s-glass-bg); border: 1px solid var(--s-glass-brd);
  box-shadow: 0 16px 44px var(--s-glow);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  display: none; grid-template-columns: 1fr 1fr; gap: 8px;
}
#tpick-panel.on { display: grid; animation: tpIn .18s ease both; }
#tpick-panel .tp-hd {
  grid-column: 1 / -1; font-size: 12px; color: var(--s-faint);
  padding: 2px 4px 4px; letter-spacing: 1px;
  display: flex; align-items: center; justify-content: space-between;
}
#tpick-panel .tp-hd b { color: var(--s-hl); font-weight: normal; }
.tp-item {
  padding: 7px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--s-ctl-brd); background: var(--s-ctl-bg);
  transition: transform .18s, border-color .18s, box-shadow .18s;
}
.tp-item:hover { transform: translateY(-2px); border-color: var(--s-hl-soft); }
.tp-item.on { border-color: var(--s-hl); box-shadow: 0 0 0 1px var(--s-hl) inset, 0 6px 18px var(--s-glow); }
.tp-sw { height: 28px; border-radius: 7px; margin-bottom: 6px; box-shadow: 0 2px 8px var(--s-glow); }
.tp-nm { font-size: 12px; color: var(--s-text); display: flex; align-items: center; gap: 4px; }
.tp-nm i { font-style: normal; margin-left: auto; color: var(--s-hl); font-size: 11px; }