/* ══════════════════════════════════════════════════════════════════════
   theme-neon.css — 暗色科技感皮肤（2026-10-19）
   加载顺序：styles.css → theme-v2.css → theme-neon.css
   生效范围：**仅 html.dark**（点右上角 ◐ 切深色即生效），浅色保持专业版。
   不改结构、不加控件；回滚 = 删掉 index.html 里这一行。

   这一版对标的视觉语言（抖音「酷炫后台」那一类）：
     · 深空底 + 径向光晕，不用纯黑
     · 玻璃拟态卡片：半透明 + 背景模糊 + 顶部高光边
     · 青→紫渐变作为功能色，KPI 数字用渐变文字
     · 激活项 / 主按钮带外发光（克制，只给「当前状态」和「主操作」）
     · 表格头近乎透明，hover 行发光而不是变白
   ────────────────────────────────────────────────────────────────────── */

/* ── 1. 暗色 token 重定义（覆盖 theme-v2 的 dark 变量）──────────────── */
html.dark{
  --bg:#080b12;
  --card:rgba(22,28,40,.72);          /* 半透明，配合模糊做玻璃 */
  --ink:#eaf0ff;
  --sub:#a8b6d0;
  --faint:#77869e;
  --muted:#93a2ba;
  --line:rgba(120,160,220,.16);
  --line2:rgba(120,160,220,.30);

  --accent:#4ecbff;                   /* 青 */
  --accent-bg:rgba(78,203,255,.12);
  --accent-line:rgba(78,203,255,.38);
  --accent2:#a78bfa;                  /* 紫，只用于渐变端点 */
  --glow:0 0 0 1px rgba(78,203,255,.20), 0 0 28px -6px rgba(78,203,255,.45);

  --green:#4ade80; --green-bg:rgba(74,222,128,.12); --green-line:rgba(74,222,128,.32);
  --teal:#2dd4bf;  --teal-bg:rgba(45,212,191,.12);  --teal-line:rgba(45,212,191,.32);
  --amber:#fbbf24; --amber-bg:rgba(251,191,36,.12); --amber-line:rgba(251,191,36,.32);
  --red:#fb7185;   --red-bg:rgba(251,113,133,.12);  --red-line:rgba(251,113,133,.32);

  --sh-1:0 1px 0 rgba(255,255,255,.04) inset, 0 8px 24px -16px rgba(0,0,0,.9);
  --sh-2:0 1px 0 rgba(255,255,255,.06) inset, 0 18px 40px -22px rgba(0,0,0,.95);
  --sh-3:0 24px 60px -20px rgba(0,0,0,.9);
  --focus:0 0 0 3px rgba(78,203,255,.30);
}

/* ── 2. 背景：深空 + 两团光晕（固定不随滚动，避免长页花）───────────── */
html.dark body{
  background:
    radial-gradient(900px 480px at 12% -8%, rgba(78,203,255,.16), transparent 62%),
    radial-gradient(760px 420px at 88% 4%, rgba(167,139,250,.14), transparent 60%),
    linear-gradient(180deg,#080b12 0%,#0a0f18 52%,#080b12 100%);
  background-attachment:fixed;
}

/* ── 3. 玻璃拟态：卡片 / KPI / 侧栏 / 顶栏 ─────────────────────────── */
html.dark .side,
html.dark .top,
html.dark .card,
html.dark .kpi,
html.dark .asset,
html.dark .alert,
html.dark .todo,
html.dark .modal .mb{
  background:var(--card);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border:1px solid var(--line);
  box-shadow:var(--sh-1);
}

/* 顶部高光边：玻璃质感的关键，一行 inset 高光即可 */
html.dark .card,
html.dark .kpi,
html.dark .asset{
  position:relative;
  overflow:hidden;
}
html.dark .card::before,
html.dark .kpi::before,
html.dark .asset::before{
  content:"";position:absolute;inset:0 0 auto;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  opacity:.7;pointer-events:none;
}

/* 侧栏：比主区略深一点，形成前后关系 */
html.dark .side{
  background:linear-gradient(180deg,rgba(16,22,34,.92),rgba(11,16,26,.86));
  border-right:1px solid var(--line);
  backdrop-filter:blur(16px);
}
html.dark .top{
  background:linear-gradient(180deg,rgba(16,22,34,.90),rgba(12,17,27,.86));
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(16px) saturate(140%);
}

/* ── 4. 导航：激活项发光 ───────────────────────────────────────────── */
html.dark .nv{color:var(--sub)}
html.dark .nv:hover{
  background:rgba(120,170,240,.10);color:var(--ink);
}
html.dark .nv.on{
  background:linear-gradient(90deg,rgba(78,203,255,.20),rgba(167,139,250,.10));
  color:#dff3ff;
  box-shadow:inset 0 0 0 1px rgba(78,203,255,.28);
}
html.dark .nv.on::before{
  background:linear-gradient(180deg,var(--accent),var(--accent2));
  box-shadow:0 0 12px rgba(78,203,255,.75);
  width:3px;height:20px;
}
html.dark .nv.on .ct{
  background:rgba(78,203,255,.20);color:#c9ecff;
}
html.dark .ngrp-t{color:rgba(147,162,186,.75);letter-spacing:.12em}

/* ── 5. KPI：渐变数字（这一版的视觉锤）───────────────────────────── */
html.dark .kpi .v{
  background:linear-gradient(120deg,#eaf6ff 0%,#7fdcff 45%,#b9a6ff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 28px rgba(78,203,255,.28);
}
/* 语义色不参与渐变（涨跌必须一眼可辨） */
html.dark .kpi .v.good,
html.dark .kpi .v.warn,
html.dark .kpi .v.bad{
  background:none;-webkit-text-fill-color:currentColor;text-shadow:none;
}
html.dark .kpi:hover{
  border-color:rgba(78,203,255,.34);
  box-shadow:var(--glow);
  transform:translateY(-1px);
  transition:transform var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease),
             border-color var(--t-fast) var(--ease);
}

/* ── 6. 按钮：主操作走渐变 + 外发光 ───────────────────────────────── */
html.dark .btn, html.dark .sel{
  background:rgba(22,28,40,.72);
  border:1px solid var(--line2);
  color:var(--ink);
}
html.dark .btn:hover, html.dark .sel:hover{
  border-color:rgba(78,203,255,.45);
  background:rgba(30,38,54,.85);
  box-shadow:0 0 18px -8px rgba(78,203,255,.65);
}
html.dark #refreshBtn,
html.dark .btn.primary{
  background:linear-gradient(135deg,#2fb6f5,#7c6cf5);
  border:1px solid transparent;
  color:#fff;font-weight:650;
  box-shadow:0 8px 22px -10px rgba(78,203,255,.85);
}
html.dark #refreshBtn:hover,
html.dark .btn.primary:hover{
  box-shadow:0 10px 26px -8px rgba(124,108,245,.9);
  filter:brightness(1.06);
}

/* ── 7. 表格：头透明、行 hover 发光 ───────────────────────────────── */
html.dark th{
  background:rgba(14,19,29,.86);
  color:rgba(168,182,208,.92);
  border-bottom:1px solid var(--line2);
  backdrop-filter:blur(6px);
}
html.dark tbody tr:nth-child(even) td{background:rgba(255,255,255,.018)}
html.dark tbody tr:hover td{
  background:rgba(78,203,255,.075);
  box-shadow:inset 0 1px 0 rgba(78,203,255,.16), inset 0 -1px 0 rgba(78,203,255,.16);
}
html.dark .tw, html.dark .tblwrap{
  background:rgba(14,19,29,.60);
  border:1px solid var(--line);
  box-shadow:var(--sh-1);
}
/* 浅色皮肤下用的滚动阴影图在深色里会发白，关掉（theme-v2 已关 .tw，这里补 .pm-tblwrap）*/
html.dark .pm-tblwrap{background-image:none}
html.dark th[data-sort]:hover{background:rgba(78,203,255,.14);color:#cdeeff}

/* ── 8. 徽标 / 芯片：描边发光，不用大面积填色 ─────────────────────── */
html.dark .chip{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(120,160,220,.22);
  color:var(--sub);
}
html.dark .chip.good{background:var(--green-bg);border-color:var(--green-line);color:var(--green)}
html.dark .chip.warn{background:var(--amber-bg);border-color:var(--amber-line);color:var(--amber)}
html.dark .chip.bad{background:var(--red-bg);border-color:var(--red-line);color:var(--red)}
html.dark .tag, html.dark .sev{border:1px solid rgba(120,160,220,.18)}
html.dark .L0, html.dark .L1{box-shadow:0 0 14px -8px var(--green)}
html.dark .L4{box-shadow:0 0 14px -8px var(--red)}

/* ── 9. 进度条：渐变 + 发光 ───────────────────────────────────────── */
html.dark .bar{background:rgba(120,160,220,.14)}
html.dark .bar > i{
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  box-shadow:0 0 12px -2px rgba(78,203,255,.6);
}
html.dark .bar.g > i{background:linear-gradient(90deg,#34d399,#4ade80);box-shadow:none}
html.dark .bar.w > i{background:linear-gradient(90deg,#f59e0b,#fbbf24);box-shadow:none}
html.dark .bar.b > i{background:linear-gradient(90deg,#f43f5e,#fb7185);box-shadow:none}

/* ── 10. 顶栏控件与浮层 ───────────────────────────────────────────── */
html.dark #gsearch{
  background:rgba(255,255,255,.04);
  border:1px solid var(--line2);
  color:var(--ink);
}
html.dark #gsearch:focus{
  border-color:rgba(78,203,255,.6);
  background:rgba(255,255,255,.06);
  box-shadow:var(--focus);
}
html.dark .pill{background:rgba(255,255,255,.05);color:var(--sub)}
html.dark .pill.fresh{border-color:var(--line2);background:transparent}
html.dark .acct-pill{
  background:rgba(78,203,255,.08);
  border:1px solid var(--accent-line);
}
html.dark .spop, html.dark .drawer, html.dark .toast{
  background:rgba(16,22,34,.96);
  border:1px solid var(--line2);
  backdrop-filter:blur(18px);
  box-shadow:var(--sh-3);
}
html.dark .fp{
  background:rgba(255,255,255,.04);
  border-color:rgba(120,160,220,.22);
  color:var(--sub);
}
html.dark .fp.b-period{border-color:var(--green-line);color:var(--green)}
html.dark .fp.b-realtime{border-color:var(--amber-line);color:var(--amber)}
html.dark .fp.b-snapshot{border-color:var(--accent-line);color:var(--accent)}

/* ── 11. 滚动条（发光细条）───────────────────────────────────────── */
html.dark .view::-webkit-scrollbar-thumb,
html.dark .tw::-webkit-scrollbar-thumb,
html.dark .tblwrap::-webkit-scrollbar-thumb,
html.dark .pm-tblwrap::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,rgba(78,203,255,.45),rgba(167,139,250,.45));
  border-radius:999px;
}

/* ── 12. 性能与降级 ────────────────────────────────────────────────
   backdrop-filter 在 4K 多窗口下会掉帧：给低性能场景留个开关
   （html.no-glass 由 URL ?noglass=1 控制，见 theme-neon.js 无需引入，直接手加类即可） */
html.no-glass .side, html.no-glass .top, html.no-glass .card,
html.no-glass .kpi, html.no-glass .asset, html.no-glass .tw,
html.no-glass .tblwrap, html.no-glass .spop, html.no-glass .drawer{
  backdrop-filter:none;-webkit-backdrop-filter:none;
  background:rgba(18,24,36,.98);
}
@media (prefers-reduced-motion:reduce){
  html.dark .kpi:hover{transform:none}
}