/* ==========================================================================
   智眸 Web v2.2 · 深浅双主题皮肤层（themes.css）
   —— 不改动 style.css 的任何结构，仅通过 html[data-theme="dark|light"]
      覆盖颜色 / 光晕 / 玻璃强度 / 圆角变量。
      全站所有白色半透明由 --w* 令牌收口，浅色下统一换成深色半透明。
   ========================================================================== */

html{
  --gl-blur:10px;
  --gl-op:1;
  --tex-op:.5;
  --glass-blur:26px;
  --glass-sat:170%;
  --r:20px;--r2:14px;--r3:10px;
}
body::before,
body::after{
  transition:opacity .45s ease, filter .45s ease, background .45s ease, color .3s ease;
}
.glass,.top,.rail,.bnav,.mbox,.panel,.kpi,.tbl th,.tbl td,.gate-card,.nav-item{
  transition:background .35s ease,border-color .35s ease,color .3s ease,backdrop-filter .35s ease;
}
body::before{opacity:var(--gl-op);filter:blur(var(--gl-blur))}
body::after{opacity:var(--tex-op)}
.glass{
  background:var(--glass-bg);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
}

/* ========================== 深色（默认） ========================== */
html[data-theme="dark"]{
  --bg:#080B13;
  --ink:#F0F3F9; --ink2:#9BA6BC; --ink3:#5E6A82;
  --panel:var(--w045); --panel2:var(--w028);
  --line:var(--w09); --line2:var(--w055);
  --glass-bg:var(--w045);
  --shadow:0 18px 44px -20px rgba(0,0,0,.7);
  --aurora:
    radial-gradient(1200px 700px at 8% -14%, rgba(124,92,255,.30), transparent 58%),
    radial-gradient(1000px 620px at 96% 4%, rgba(34,211,238,.20), transparent 58%),
    radial-gradient(900px 600px at 62% 108%, rgba(244,114,182,.16), transparent 60%);
  --gl-blur:10px; --gl-op:1; --tex-op:.5;
  --glass-blur:26px; --glass-sat:170%;
  --accent-grad:linear-gradient(135deg,#7C5CFF,#22D3EE);
  --surface:var(--panel);
  --surface-2:var(--w028); --surface-3:var(--w055);
  --line-strong:var(--w17);
  --text:var(--ink); --sub:var(--ink2); --weak:var(--ink3);
  --brand-soft:rgba(124,92,255,.16);
  --up:#F6465D; --dn:#0ECB81; --down:#0ECB81;
}
html[data-theme="dark"] body::before{background:var(--aurora)}
html[data-theme="dark"] body::after{
  background-image:linear-gradient(var(--w022) 1px,transparent 1px),
                   linear-gradient(90deg,var(--w022) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse 100% 80% at 50% 40%,#000 20%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 100% 80% at 50% 40%,#000 20%,transparent 100%);
}

/* ========================== 浅色 ========================== */
html[data-theme="light"]{
  --bg:#F4F6FB;
  --ink:#101828; --ink2:#59667E; --ink3:#8B96A9;
  --panel:rgba(255,255,255,.86);
  --panel2:rgba(255,255,255,.66);
  --line:rgba(16,24,40,.12);
  --line2:rgba(16,24,40,.07);
  --glass-bg:rgba(255,255,255,.78);
  --shadow:0 18px 44px -24px rgba(16,24,40,.26);
  --aurora:
    radial-gradient(1200px 700px at 8% -14%, rgba(124,92,255,.16), transparent 58%),
    radial-gradient(1000px 620px at 96% 4%, rgba(34,211,238,.14), transparent 58%),
    radial-gradient(900px 600px at 62% 108%, rgba(244,114,182,.12), transparent 60%);
  --gl-blur:14px; --gl-op:.75; --tex-op:.3;
  --glass-blur:22px; --glass-sat:150%;
  --accent-grad:linear-gradient(135deg,#6D4BFF,#0EA5C9);
  --surface:var(--panel);
  --surface-2:rgba(255,255,255,.66);
  --surface-3:rgba(255,255,255,.92);
  --line-strong:rgba(16,24,40,.2);
  --text:var(--ink); --sub:var(--ink2); --weak:var(--ink3);
  --brand-soft:rgba(109,75,255,.1);
  --up:#E5484D; --dn:#12A150; --down:#12A150;
  --r:20px;--r2:14px;--r3:10px;
  --w022:rgba(16,24,40,0.022);
  --w028:rgba(16,24,40,0.028);
  --w03:rgba(16,24,40,0.03);
  --w035:rgba(16,24,40,0.035);
  --w04:rgba(16,24,40,0.04);
  --w045:rgba(16,24,40,0.045);
  --w05:rgba(16,24,40,0.05);
  --w055:rgba(16,24,40,0.055);
  --w06:rgba(16,24,40,0.06);
  --w07:rgba(16,24,40,0.07);
  --w08:rgba(16,24,40,0.08);
  --w09:rgba(16,24,40,0.09);
  --w1:rgba(16,24,40,0.1);
  --w11:rgba(16,24,40,0.11);
  --w13:rgba(16,24,40,0.13);
  --w14:rgba(16,24,40,0.14);
  --w15:rgba(16,24,40,0.15);
  --w17:rgba(16,24,40,0.16);
  --w24:rgba(16,24,40,0.16);
  --w26:rgba(16,24,40,0.16);
}
html[data-theme="light"] body::before{background:var(--aurora)}
html[data-theme="light"] body::after{
  background-image:linear-gradient(rgba(16,24,40,.035) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(16,24,40,.035) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse 100% 80% at 50% 40%,#000 20%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 100% 80% at 50% 40%,#000 20%,transparent 100%);
}

/* 渐变主按钮 / 选中标记：跟随强调色 */
.btn.grad{background:var(--accent-grad,linear-gradient(135deg,#7C5CFF,#22D3EE))}
.bmark{background:var(--accent-grad,linear-gradient(140deg,#7C5CFF,#22D3EE))}
.bn.on::before{background:linear-gradient(90deg,var(--vio),var(--cyn))}

/* ========================== 顶栏明暗切换按钮 ==========================
   v2.2：单键即点即换，不再有调色盘弹出层。 */
.tsw{position:relative;display:inline-flex;align-items:center}
.tsw-btn{
  width:38px;height:38px;flex:0 0 38px;border-radius:11px;border:1px solid var(--line);
  background:var(--w04);color:var(--ink2);cursor:pointer;
  display:grid;place-items:center;transition:all .18s;position:relative;padding:0;
}
.tsw-btn:hover{background:var(--w1);color:var(--ink)}
.tsw-btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tsw-btn::after{
  content:"";position:absolute;right:5px;bottom:5px;width:9px;height:9px;border-radius:50%;
  background:var(--accent-grad,linear-gradient(135deg,#7C5CFF,#22D3EE));
  box-shadow:0 0 0 2px var(--bg);
}
@media (max-width:860px){
  .tsw-btn{width:36px;height:36px;flex:0 0 36px;border-radius:11px}
}