/* ============================================================
   苜星抄表平台 · 界面风格（5 套）
   通过 html[data-theme] 切换；:root 是深色基底，三套主题各自覆盖
   classic / scifi / minimal
   ============================================================ */

/* 标题字体跟随主题（默认 inherit） */
.page-head h1,
.card-h h3,
.modal-h h3,
.brand-txt b,
.stmt h1 {
  font-family: var(--font-title, inherit);
}

/* ------------------------------------------------------------
   1 · 传统 classic —— 米白纸感 + 藏青 + 宋体标题 + 小圆角
   ------------------------------------------------------------ */
html[data-theme="classic"] {
  --w: 26, 30, 38;
  --k: 26, 30, 38;
  --mint-rgb: 30, 58, 95;
  --blue-rgb: 30, 58, 95;
  --red-rgb: 158, 43, 37;
  --violet-rgb: 110, 84, 60;
  --amber-rgb: 170, 120, 40;

  --bg: #f4f0e6;
  --text: #1f2328;
  --text-2: #4a4f57;
  --text-3: #8b8578;
  --line: #d9d2c2;
  --line-2: #e6e0d2;

  --mint: #1e3a5f;
  --blue: #1e3a5f;
  --solar: #b8860b;
  --violet: #6b4f3a;
  --red: #9e2b25;

  --r: 3px;
  --rail-bg: linear-gradient(180deg, #22303f, #16202b);
  --topbar-bg: rgba(255, 255, 255, 0.94);
  --status-bg: rgba(250, 247, 240, 0.96);
  --canvas-bg: #fbf8f1;
  --canvas-dot: rgba(30, 42, 56, 0.12);
  --node-bg: linear-gradient(180deg, #ffffff, #f7f3ea);
  --node-text: #1f2328;
  --chart-grid: rgba(30, 42, 56, 0.1);
  --chart-axis: #8b8578;
  --ch-1: #2f6b4f;
  --ch-2: #b8860b;
  --ch-3: #6b4f8a;
  --ch-4: #2f5580;
  --ch-5: #9e2b25;
  --tou-1: #9e2b25;
  --tou-2: #b8860b;
  --tou-3: #2f5580;
  --tou-4: #3f6b4a;
  --tou-5: #5b4a6b;
  --font-title: "Songti SC", "STSong", "SimSun", "宋体", serif;
}

html[data-theme="classic"] .page-head h1 { letter-spacing: 2px; }
html[data-theme="classic"] .brand-txt b { color: #f6efe2; letter-spacing: 2px; }

/* ------------------------------------------------------------
   1.5 · 护眼 eye —— 豆沙绿底 + 暖褐 + 低对比，长时间看不累
   ------------------------------------------------------------ */
html[data-theme="eye"] {
  --w: 51, 56, 44;
  --k: 51, 56, 44;
  --mint-rgb: 109, 127, 78;
  --blue-rgb: 109, 127, 78;
  --red-rgb: 179, 86, 63;
  --violet-rgb: 154, 123, 95;
  --amber-rgb: 192, 138, 62;

  --bg: #eceee1;
  --text: #33382c;
  --text-2: #5a604f;
  --text-3: #8b907c;
  --line: #d7dbc6;
  --line-2: #e4e7d5;

  --mint: #6d7f4e;
  --blue: #7d8f5c;
  --solar: #c08a3e;
  --violet: #9a7b5f;
  --red: #b3563f;

  --r: 10px;
  --rail-bg: linear-gradient(180deg, #414a37, #333b2b);
  --topbar-bg: rgba(251, 249, 241, 0.94);
  --status-bg: rgba(247, 245, 235, 0.96);
  --canvas-bg: #f0f2e6;
  --canvas-dot: rgba(51, 56, 44, 0.1);
  --node-bg: linear-gradient(180deg, #fdfcf6, #f4f2e6);
  --node-text: #33382c;
  --chart-grid: rgba(51, 56, 44, 0.1);
  --chart-axis: #8b907c;
  --ch-1: #5f7044;
  --ch-2: #c08a3e;
  --ch-3: #8b6f5c;
  --ch-4: #7d8f5c;
  --ch-5: #b3563f;
  --tou-1: #b3563f;
  --tou-2: #c99a4e;
  --tou-3: #8a9a6a;
  --tou-4: #6f8f7a;
  --tou-5: #9a7b8f;
}

html[data-theme="eye"] .brand-txt b { color: #f4ecd8; }
html[data-theme="eye"] .nav-item { color: #cfd4c1; }
html[data-theme="eye"] .nav-item:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
html[data-theme="eye"] .nav-item.active {
  background: rgba(240, 228, 200, 0.14);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(240, 228, 200, 0.2);
}
html[data-theme="eye"] .nav-item.active::before { background: #d8b26a; box-shadow: none; }
html[data-theme="eye"] .nav-group > h6 { color: #8e9a7c; }
html[data-theme="eye"] .rail-foot { color: #9aa48a; border-top-color: rgba(255, 255, 255, 0.08); }
html[data-theme="eye"] .btn.primary {
  background: linear-gradient(135deg, #7c8d58, #5f7044);
  color: #ffffff;
  box-shadow: none;
}
html[data-theme="eye"] .card,
html[data-theme="eye"] .kpi {
  box-shadow: 0 2px 10px rgba(51, 56, 44, 0.05);
}
/* ------------------------------------------------------------
   2 · 科幻 scifi —— 深空底 + 青色霓虹 + 细线发光 + 等宽数字
   ------------------------------------------------------------ */
html[data-theme="scifi"] {
  --w: 180, 250, 255;
  --k: 0, 0, 0;
  --mint-rgb: 34, 211, 238;
  --blue-rgb: 79, 124, 255;
  --red-rgb: 255, 61, 92;
  --violet-rgb: 255, 61, 242;
  --amber-rgb: 255, 196, 61;

  --bg: #03060c;
  --text: #d8fbff;
  --text-2: #7fb3c4;
  --text-3: #4a7688;
  --line: rgba(34, 211, 238, 0.22);
  --line-2: rgba(34, 211, 238, 0.1);

  --mint: #22d3ee;
  --blue: #4f7cff;
  --solar: #ffc43d;
  --violet: #ff3df2;
  --red: #ff3d5c;

  --r: 2px;
  --rail-bg: linear-gradient(180deg, #02060e, #010409);
  --topbar-bg: rgba(2, 6, 12, 0.72);
  --status-bg: rgba(1, 4, 8, 0.92);
  --canvas-bg: #02060c;
  --canvas-dot: rgba(34, 211, 238, 0.16);
  --node-bg: linear-gradient(180deg, #071018, #040a12);
  --node-text: #d8fbff;
  --chart-grid: rgba(34, 211, 238, 0.13);
  --chart-axis: #4a7688;
  --ch-1: #22d3ee;
  --ch-2: #ffc43d;
  --ch-3: #ff3df2;
  --ch-4: #4f7cff;
  --ch-5: #ff3d5c;
  --tou-1: #ff3d5c;
  --tou-2: #ffc43d;
  --tou-3: #4f7cff;
  --tou-4: #22d3ee;
  --tou-5: #ff3df2;
}

html[data-theme="scifi"] .card,
html[data-theme="scifi"] .kpi {
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.07), 0 0 28px rgba(34, 211, 238, 0.07);
}
html[data-theme="scifi"] .page-head h1 {
  letter-spacing: 3px;
  text-shadow: 0 0 18px rgba(34, 211, 238, 0.45);
}
html[data-theme="scifi"] .num,
html[data-theme="scifi"] .kpi .k-val,
html[data-theme="scifi"] .metric .m-v {
  font-family: "Cascadia Mono", Consolas, monospace;
  letter-spacing: 0;
}
html[data-theme="scifi"] .btn.primary {
  background: linear-gradient(135deg, #22d3ee, #0891b2);
  color: #03151c;
  box-shadow: 0 0 18px rgba(34, 211, 238, 0.35);
}
html[data-theme="scifi"] .nav-item.active {
  background: linear-gradient(90deg, rgba(34, 211, 238, 0.18), rgba(34, 211, 238, 0.01));
  box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.28);
}
html[data-theme="scifi"] .live-dot { box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.18), 0 0 12px #22d3ee; }

/* ------------------------------------------------------------
   3 · 简约 minimal —— 纯白 + 黑白灰 + 发丝线 + 无阴影
   ------------------------------------------------------------ */
html[data-theme="minimal"] {
  --w: 17, 17, 17;
  --k: 17, 17, 17;
  --mint-rgb: 17, 17, 17;
  --blue-rgb: 17, 17, 17;
  --red-rgb: 198, 40, 40;
  --violet-rgb: 90, 90, 90;
  --amber-rgb: 150, 110, 0;

  --bg: #ffffff;
  --text: #101010;
  --text-2: #555555;
  --text-3: #9a9a9a;
  --line: #e8e8e8;
  --line-2: #f2f2f2;

  --mint: #111111;
  --blue: #111111;
  --solar: #8a6d00;
  --violet: #555555;
  --red: #c62828;

  --r: 4px;
  --rail-bg: #ffffff;
  --topbar-bg: rgba(255, 255, 255, 0.92);
  --status-bg: #fafafa;
  --canvas-bg: #ffffff;
  --canvas-dot: rgba(17, 17, 17, 0.1);
  --node-bg: #ffffff;
  --node-text: #101010;
  --chart-grid: rgba(0, 0, 0, 0.07);
  --chart-axis: #9a9a9a;
  --ch-1: #1f2937;
  --ch-2: #6b7280;
  --ch-3: #9ca3af;
  --ch-4: #4b5563;
  --ch-5: #c62828;
  --tou-1: #111111;
  --tou-2: #4b5563;
  --tou-3: #6b7280;
  --tou-4: #9ca3af;
  --tou-5: #cbd5e1;
}

html[data-theme="minimal"] .card,
html[data-theme="minimal"] .kpi,
html[data-theme="minimal"] .plan,
html[data-theme="minimal"] .dev,
html[data-theme="minimal"] .site-card,
html[data-theme="minimal"] .report,
html[data-theme="minimal"] .modal,
html[data-theme="minimal"] .drawer {
  box-shadow: none;
}
html[data-theme="minimal"] .btn.primary {
  background: #111111;
  color: #ffffff;
  box-shadow: none;
}
html[data-theme="minimal"] .page-head h1 { letter-spacing: 0; font-weight: 600; }

/* ------------------------------------------------------------
   浅色主题的公共修正（classic / minimal）
   ------------------------------------------------------------ */
:is([data-theme="classic"], [data-theme="minimal"], [data-theme="eye"]) :is(.card, .kpi, .plan, .filters, .dev, .metric, .panel, .site-card, .palette, .inspector, .modal, .drawer) {
  background: #ffffff;
}

:is([data-theme="classic"], [data-theme="minimal"], [data-theme="eye"]) .json-box {
  background: #0f172a;
  color: #9fd6bd;
  border-color: #1e293b;
}

:is([data-theme="classic"], [data-theme="minimal"], [data-theme="eye"]) .statusbar {
  color: #7b8794;
}
:is([data-theme="classic"], [data-theme="minimal"], [data-theme="eye"]) .statusbar .s b {
  color: #33405a;
}

/* 白色侧边栏：文字与图标转深色（minimal） */
:is([data-theme="minimal"]) .rail {
  border-right: 1px solid var(--line);
}
:is([data-theme="minimal"]) .brand { border-bottom-color: var(--line-2); }
:is([data-theme="minimal"]) .brand-txt b { color: #16233a; }
:is([data-theme="minimal"]) .brand-txt span { color: #9aa8bd; }
:is([data-theme="minimal"]) .nav-group > h6 { color: #a3adbd; }
:is([data-theme="minimal"]) .nav-item { color: #5c6b80; }
:is([data-theme="minimal"]) .nav-item:hover {
  background: rgba(var(--mint-rgb), 0.07);
  color: #16233a;
}
:is([data-theme="minimal"]) .nav-item.active {
  color: var(--mint);
  background: rgba(var(--mint-rgb), 0.1);
  box-shadow: inset 0 0 0 1px rgba(var(--mint-rgb), 0.18);
}
:is([data-theme="minimal"]) .rail-foot {
  color: #8b99ac;
  border-top-color: var(--line-2);
}
:is([data-theme="minimal"]) .rail-foot .live { color: #6b7c91; }

/* 顶栏与状态栏的边框在浅色下更清晰 */
:is([data-theme="classic"], [data-theme="minimal"], [data-theme="eye"]) .topbar {
  border-bottom-color: var(--line);
}
:is([data-theme="classic"], [data-theme="minimal"], [data-theme="eye"]) .crumb { color: #8395b0; }
:is([data-theme="classic"], [data-theme="minimal"], [data-theme="eye"]) .crumb b { color: #16233a; }

/* 模态框/抽屉在浅色下用白底 */
:is([data-theme="classic"], [data-theme="minimal"], [data-theme="eye"]) .modal,
:is([data-theme="classic"], [data-theme="minimal"], [data-theme="eye"]) .drawer {
  background: #ffffff;
  border-color: var(--line);
}
:is([data-theme="classic"], [data-theme="minimal"], [data-theme="eye"]) .modal-f,
:is([data-theme="classic"], [data-theme="minimal"], [data-theme="eye"]) .drawer-f {
  background: #fafbfc;
}
:is([data-theme="classic"], [data-theme="minimal"], [data-theme="eye"]) .chart-tip {
  background: #16233a;
}

/* 传统主题保留深色侧边栏的文字色 */
html[data-theme="classic"] .nav-item { color: #c3cede; }
html[data-theme="classic"] .nav-item:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
html[data-theme="classic"] .nav-item.active {
  background: rgba(246, 239, 226, 0.14);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(246, 239, 226, 0.22);
}
html[data-theme="classic"] .nav-item.active::before { background: #d9b45e; box-shadow: none; }
html[data-theme="classic"] .nav-group > h6 { color: #7d8b9b; }
html[data-theme="classic"] .rail-foot { color: #8b97a5; border-top-color: rgba(255, 255, 255, 0.08); }
html[data-theme="classic"] .btn.primary {
  background: linear-gradient(135deg, #27476f, #162a44);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(22, 42, 68, 0.3);
}

/* ------------------------------------------------------------
   浅色主题的状态色对比度修正（默认的亮色徽标在浅底上偏淡）
   ------------------------------------------------------------ */
:is([data-theme="classic"], [data-theme="minimal"], [data-theme="eye"]) .env-badge {
  color: #0b7a4d;
  background: rgba(15, 157, 99, 0.08);
  border-color: rgba(15, 157, 99, 0.25);
}
:is([data-theme="classic"], [data-theme="minimal"], [data-theme="eye"]) .pill.ok {
  color: #0b7a4d;
  background: rgba(15, 157, 99, 0.1);
  border-color: rgba(15, 157, 99, 0.22);
}
:is([data-theme="classic"], [data-theme="minimal"], [data-theme="eye"]) .pill.warn {
  color: #8a5a0a;
  background: rgba(201, 138, 18, 0.1);
  border-color: rgba(201, 138, 18, 0.24);
}
:is([data-theme="classic"], [data-theme="minimal"], [data-theme="eye"]) .pill.err {
  color: #a83a33;
  background: rgba(200, 71, 63, 0.1);
  border-color: rgba(200, 71, 63, 0.24);
}
:is([data-theme="classic"], [data-theme="minimal"], [data-theme="eye"]) .pill.info {
  color: #174f96;
  background: rgba(26, 86, 168, 0.1);
  border-color: rgba(26, 86, 168, 0.22);
}
:is([data-theme="classic"], [data-theme="minimal"], [data-theme="eye"]) .tag {
  color: #5a6b82;
  background: #f3f6fb;
  border-color: #dbe3ee;
}
:is([data-theme="classic"], [data-theme="minimal"], [data-theme="eye"]) .alarm .lv.h {
  color: #a83a33;
  background: rgba(200, 71, 63, 0.12);
}
:is([data-theme="classic"], [data-theme="minimal"], [data-theme="eye"]) .alarm .lv.m {
  color: #8a5a0a;
  background: rgba(201, 138, 18, 0.14);
}
:is([data-theme="classic"], [data-theme="minimal"], [data-theme="eye"]) .alarm .lv.l {
  color: #174f96;
  background: rgba(26, 86, 168, 0.12);
}
:is([data-theme="classic"], [data-theme="minimal"], [data-theme="eye"]) .delta.down {
  color: #c8473f;
}
:is([data-theme="classic"], [data-theme="minimal"], [data-theme="eye"]) .live-dot {
  background: #12a150;
  box-shadow: 0 0 0 3px rgba(18, 161, 80, 0.16);
}
:is([data-theme="classic"], [data-theme="minimal"], [data-theme="eye"]) .note {
  color: #4a5b78;
  background: rgba(26, 86, 168, 0.05);
  border-color: rgba(26, 86, 168, 0.16);
}
/* 浅色主题：抄表校验卡片 */
:is([data-theme="classic"], [data-theme="minimal"], [data-theme="eye"]) .ck-item {
  background: #f7f9fc;
  border-color: #e3e9f2;
}
:is([data-theme="classic"], [data-theme="minimal"], [data-theme="eye"]) .ck-d {
  color: #5a6b82;
}

/* 浅色主题：计费方式卡片 */
:is([data-theme="classic"], [data-theme="minimal"], [data-theme="eye"]) .dmd-meter { background: rgba(30, 40, 60, 0.08); }
:is([data-theme="classic"], [data-theme="minimal"], [data-theme="eye"]) .dmd-meter-62 { background: rgba(30, 40, 60, 0.45); }
:is([data-theme="classic"], [data-theme="minimal"], [data-theme="eye"]) .dmd-warn.ok { color: #0b7a4d; background: rgba(15, 157, 99, 0.1); }
:is([data-theme="classic"], [data-theme="minimal"], [data-theme="eye"]) .dmd-warn.yellow { color: #8a5a0a; background: rgba(201, 138, 18, 0.12); }
:is([data-theme="classic"], [data-theme="minimal"], [data-theme="eye"]) .dmd-warn.red { color: #a83a33; background: rgba(200, 71, 63, 0.1); }
:is([data-theme="classic"], [data-theme="minimal"], [data-theme="eye"]) .dmd-rule { color: #4a5b78; }

/* 浅色主题：代客横幅 */
:is([data-theme="classic"], [data-theme="minimal"], [data-theme="eye"]) .imp-bar {
  color: #8a5a0a; background: rgba(201, 138, 18, 0.12); border-color: rgba(201, 138, 18, 0.35);
}