/* ══════════════════════════════════════════════════════════════
   四象御界 · 多主题引擎  v1  (2026-11-14)
   切换方式：<html data-theme="主题key">  →  全部组件随变量联动
   6 套主题，冷→热→紫→青，全部带科技网格 / 扫描线 / 光晕
   ══════════════════════════════════════════════════════════════ */

/* ─────── 1. 鬼斧玄铁（默认 · 冷钢青蓝 · 科技安全风） ─────── */
:root,
[data-theme="guifu"]{
  --t-bg:#080D16;      --t-bg2:#0C1422;
  --t-panel:#0F1928;   --t-panel2:#14202F;  --t-raise:#1A2839;
  --t-line:#223349;    --t-line2:#2E445F;
  --t-text:#DCE6F2;    --t-text2:#8FA3BC;   --t-dim:#5D7691;
  --t-accent:#00D9FF;  --t-accent2:#4DE8FF;
  --t-glow:rgba(0,217,255,.35);
  --t-hot:#FF3D71;     --t-warm:#FFB020;    --t-ok:#00E5A0;
  --t-grid:rgba(0,217,255,.045);
  --t-scan:linear-gradient(90deg,transparent,rgba(0,217,255,.07),transparent);
  --t-head:linear-gradient(90deg,#0C1422 0%,#132033 50%,#0C1422 100%);
}

/* ─────── 2. 镇魂血月（暗红 · 压迫感 · 血月） ─────── */
[data-theme="zhenhun"]{
  --t-bg:#0A0508;      --t-bg2:#140810;
  --t-panel:#160B12;   --t-panel2:#1E101A;  --t-raise:#2A1520;
  --t-line:#3A1B27;    --t-line2:#552435;
  --t-text:#F2DCE2;    --t-text2:#BC8F9C;   --t-dim:#8A5D6B;
  --t-accent:#FF2D55;  --t-accent2:#FF6B8A;
  --t-glow:rgba(255,45,85,.40);
  --t-hot:#FF0044;     --t-warm:#FF9500;    --t-ok:#00D97E;
  --t-grid:rgba(255,45,85,.05);
  --t-scan:linear-gradient(90deg,transparent,rgba(255,45,85,.09),transparent);
  --t-head:linear-gradient(90deg,#140810 0%,#26111C 50%,#140810 100%);
}

/* ─────── 3. 星野乾元（青紫星云 · 数据星图） ─────── */
[data-theme="xingye"]{
  --t-bg:#070912;      --t-bg2:#0B0F1E;
  --t-panel:#0E1226;   --t-panel2:#141A32;  --t-raise:#1C2444;
  --t-line:#232C52;    --t-line2:#33406E;
  --t-text:#E2E4F5;    --t-text2:#9AA0C8;   --t-dim:#666E9C;
  --t-accent:#7B61FF;  --t-accent2:#A78BFA;
  --t-glow:rgba(123,97,255,.40);
  --t-hot:#FF4D9D;     --t-warm:#FFC53D;    --t-ok:#22D3B8;
  --t-grid:rgba(123,97,255,.05);
  --t-scan:linear-gradient(90deg,transparent,rgba(123,97,255,.09),transparent);
  --t-head:linear-gradient(90deg,#0B0F1E 0%,#1A1440 50%,#0B0F1E 100%);
}

/* ─────── 4. 龙渊紫极（深紫鎏金 · 尊贵霸者） ─────── */
[data-theme="longyuan"]{
  --t-bg:#0B0716;      --t-bg2:#150E28;
  --t-panel:#170F2E;   --t-panel2:#1F163C;  --t-raise:#2A1F52;
  --t-line:#312356;    --t-line2:#4A3678;
  --t-text:#EDE4FA;    --t-text2:#B49EDC;   --t-dim:#7E68A8;
  --t-accent:#B15CFF;  --t-accent2:#D8A5FF;
  --t-glow:rgba(177,92,255,.42);
  --t-hot:#FF3D71;     --t-warm:#FFCC33;    --t-ok:#2DD4BF;
  --t-grid:rgba(177,92,255,.05);
  --t-scan:linear-gradient(90deg,transparent,rgba(216,165,255,.09),transparent);
  --t-head:linear-gradient(90deg,#150E28 0%,#2B1B4D 50%,#150E28 100%);
}

/* ─────── 5. 焰境赤霄（橙红烈焰 · 高能预警） ─────── */
[data-theme="yanjing"]{
  --t-bg:#0F0805;      --t-bg2:#1A0E07;
  --t-panel:#1C1009;   --t-panel2:#26160D;  --t-raise:#331E12;
  --t-line:#3D2415;    --t-line2:#5C3820;
  --t-text:#FAE8D8;    --t-text2:#D0A583;   --t-dim:#9A7355;
  --t-accent:#FF7A18;  --t-accent2:#FFA94D;
  --t-glow:rgba(255,122,24,.42);
  --t-hot:#FF2D2D;     --t-warm:#FFD23F;    --t-ok:#52D96B;
  --t-grid:rgba(255,122,24,.05);
  --t-scan:linear-gradient(90deg,transparent,rgba(255,169,77,.10),transparent);
  --t-head:linear-gradient(90deg,#1A0E07 0%,#33180A 50%,#1A0E07 100%);
}

/* ─────── 6. 青冥霜刃（冰青 · 极寒锋锐） ─────── */
[data-theme="qingming"]{
  --t-bg:#050C12;      --t-bg2:#08131C;
  --t-panel:#0A1A26;   --t-panel2:#0F2433;  --t-raise:#153142;
  --t-line:#1C3E52;    --t-line2:#2A5A75;
  --t-text:#D6EEF5;    --t-text2:#8AB4C8;   --t-dim:#5A8299;
  --t-accent:#00FFD1;  --t-accent2:#6BFFE8;
  --t-glow:rgba(0,255,209,.38);
  --t-hot:#FF4D6D;     --t-warm:#FFC857;    --t-ok:#00E5A0;
  --t-grid:rgba(0,255,209,.045);
  --t-scan:linear-gradient(90deg,transparent,rgba(0,255,209,.08),transparent);
  --t-head:linear-gradient(90deg,#08131C 0%,#0D2836 50%,#08131C 100%);
}

/* ═══════════ 主题统一应用层（覆盖全部容器） ═══════════ */
html[data-theme],html[data-theme] body,html[data-theme] #root,html[data-theme] .ant-app{
  background:var(--t-bg)!important; color:var(--t-text)!important;
}
/* 全局科幻网格背景 */
html[data-theme] body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:linear-gradient(var(--t-grid) 1px,transparent 1px),
                   linear-gradient(90deg,var(--t-grid) 1px,transparent 1px);
  background-size:44px 44px;
}
/* 扫描线动画 */
html[data-theme] body::after{
  content:""; position:fixed; left:0; right:0; height:2px; pointer-events:none; z-index:1;
  background:var(--t-scan); animation:t-scanmove 7s linear infinite;
}
@keyframes t-scanmove{0%{top:-2px}100%{top:100%}}

/* 面板 / 卡片 / 侧栏 */
html[data-theme] .ant-card,html[data-theme] .device-card,html[data-theme] .stat-card,
html[data-theme] .dashboard-card,html[data-theme] .panel,html[data-theme] .card,
html[data-theme] .kpi,html[data-theme] .ctrl-device-row,html[data-theme] .ctrl-tab-panel,
html[data-theme] .ctrl-tab-content,html[data-theme] .ctrl-sidebar-panel,
html[data-theme] .ctrl-header,html[data-theme] .ctrl-tabs-bar,html[data-theme] .inj-panel{
  background:var(--t-panel)!important; border-color:var(--t-line)!important;
  color:var(--t-text)!important;
}
html[data-theme] .ant-layout,html[data-theme] .ant-layout-content{background:transparent!important}

/* 菜单 / 侧栏 */
html[data-theme] .ant-menu,html[data-theme] .ant-menu-sub,html[data-theme] .sidebar,
html[data-theme] .sider{background:var(--t-bg2)!important;color:var(--t-text)!important}
html[data-theme] .ant-menu-item-selected{
  background:var(--t-glow)!important; color:var(--t-accent2)!important;
  border-left:3px solid var(--t-accent)!important;
}
/* 顶部栏用主题渐变 */
html[data-theme] .ctrl-header,html[data-theme] .fc-header{
  background:var(--t-head)!important; border-bottom:1px solid var(--t-line)!important;
}

/* 输入控件 */
html[data-theme] input,html[data-theme] select,html[data-theme] textarea,
html[data-theme] .ant-input,html[data-theme] .ant-select-selector{
  background:var(--t-bg2)!important; color:var(--t-text)!important;
  border-color:var(--t-line2)!important;
}
html[data-theme] input:focus,html[data-theme] select:focus,
html[data-theme] textarea:focus{border-color:var(--t-accent)!important}

/* 按钮 */
html[data-theme] button{background:var(--t-panel2);color:var(--t-text);border-color:var(--t-line2)}
html[data-theme] button:hover{border-color:var(--t-accent)!important;color:var(--t-accent2)!important}
html[data-theme] button.primary,html[data-theme] .ant-btn-primary{
  background:linear-gradient(135deg,var(--t-accent),var(--t-accent2))!important;
  border:none!important;color:#04121A!important;font-weight:700!important;
  box-shadow:0 0 14px var(--t-glow)!important;
}
html[data-theme] .danger,html[data-theme] .ant-btn-dangerous{
  background:var(--t-hot)!important;border-color:var(--t-hot)!important;color:#fff!important;
}

/* 表格 */
html[data-theme] table thead th{
  background:var(--t-panel2)!important;color:var(--t-text2)!important;
  border-bottom:1px solid var(--t-line2)!important;
}
html[data-theme] table tbody tr:hover{background:var(--t-raise)!important}
html[data-theme] table td{border-bottom:1px solid var(--t-line)!important;color:var(--t-text)!important}

/* 强调元素 */
html[data-theme] .kpi .v,html[data-theme] .stat-value,html[data-theme] .big{
  color:var(--t-accent2)!important; text-shadow:0 0 12px var(--t-glow);
}
html[data-theme] .tag.hit,html[data-theme] .tag.bad{background:var(--t-hot)!important}
html[data-theme] .tag.ok,html[data-theme] .tag.up,html[data-theme] .tag.on{background:var(--t-ok)!important}
html[data-theme] .tag.warn{background:var(--t-warm)!important}

/* 滚动条 */
html[data-theme] ::-webkit-scrollbar{width:9px;height:9px}
html[data-theme] ::-webkit-scrollbar-track{background:var(--t-bg2)}
html[data-theme] ::-webkit-scrollbar-thumb{
  background:var(--t-line2);border-radius:5px;border:2px solid var(--t-bg2);
}
html[data-theme] ::-webkit-scrollbar-thumb:hover{background:var(--t-accent)}

/* ═══════════ 主题切换器 UI（右上角） ═══════════ */
.fj-theme-btn{
  display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;
  border-radius:15px;cursor:pointer;font-size:12px;font-weight:600;
  background:var(--t-panel2);color:var(--t-text);
  border:1px solid var(--t-line2);transition:all .18s;
}
.fj-theme-btn:hover{border-color:var(--t-accent);color:var(--t-accent2);
  box-shadow:0 0 12px var(--t-glow)}
.fj-theme-btn .dot{width:9px;height:9px;border-radius:50%;
  background:var(--t-accent);box-shadow:0 0 8px var(--t-accent)}
.fj-theme-pop{
  position:fixed;top:52px;right:16px;z-index:99999;width:262px;
  background:var(--t-panel);border:1px solid var(--t-line2);border-radius:12px;
  box-shadow:0 14px 44px rgba(0,0,0,.65),0 0 0 1px var(--t-glow) inset;
  padding:10px;display:none;animation:fjfade .16s ease-out;
}
.fj-theme-pop.show{display:block}
@keyframes fjfade{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.fj-theme-pop .hd{font-size:11px;color:var(--t-text2);letter-spacing:1.5px;
  padding:2px 6px 8px;border-bottom:1px solid var(--t-line);margin-bottom:6px}
.fj-theme-item{
  display:flex;align-items:center;gap:10px;padding:8px 9px;border-radius:8px;
  cursor:pointer;transition:background .15s;border:1px solid transparent;
}
.fj-theme-item:hover{background:var(--t-raise);border-color:var(--t-line2)}
.fj-theme-item.active{background:var(--t-glow);border-color:var(--t-accent)}
.fj-theme-item .sw{width:26px;height:26px;border-radius:7px;flex:0 0 auto;
  border:1px solid rgba(255,255,255,.14);position:relative;overflow:hidden}
.fj-theme-item .sw::after{content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,transparent 45%,rgba(255,255,255,.22))}
.fj-theme-item .nm{font-size:12.5px;font-weight:600;color:var(--t-text);line-height:1.25}
.fj-theme-item .ds{font-size:10px;color:var(--t-text2);line-height:1.3}
.fj-theme-item .ck{margin-left:auto;color:var(--t-accent2);font-size:13px;opacity:0}
.fj-theme-item.active .ck{opacity:1}


/* ═══════════ 登录页隐藏主题切换器（保险） ═══════════ */
html:has(.login-page) #fj-theme-wrap,
html:has(.login-container) #fj-theme-wrap,
html:has(.login-form-section) #fj-theme-wrap,
body:has(.login-page) #fj-theme-wrap,
body:has(.login-container) #fj-theme-wrap { display: none !important; }

/* 无 :has 支持时的兜底 —— JS 会加这个 class */
html.fj-on-login #fj-theme-wrap { display: none !important; }