/* ============ 暗色（默认） ============ */
:root{
  --bg-0:#0a0000;
  --bg-1:#1a0505;
  --body-bg:
    radial-gradient(ellipse at 20% 0%, rgba(255,0,60,0.08), transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(255,107,0,0.05), transparent 50%),
    linear-gradient(180deg,#0a0000 0%, #160404 100%);
  --topbar-bg:linear-gradient(90deg,#0d0101 0%,#1a0303 50%,#0d0101 100%);
  --topbar-shadow:0 0 30px rgba(255,0,60,0.15);
  --sidebar-bg:linear-gradient(180deg,#0d0101,#120202);
  --ticker-bg:#0d0202;
  --ticker-shadow-l:linear-gradient(90deg,#0d0202,transparent);
  --ticker-shadow-r:linear-gradient(270deg,#0d0202,transparent);
  --panel-grad:linear-gradient(160deg,rgba(31,6,6,0.9),rgba(15,2,2,0.95));
  --kpi-bg:rgba(10,0,0,0.6);
  --miss-bg:rgba(10,0,0,0.5);
  --footbar-bg:#0a0000;
  --table-head-bg:rgba(255,0,60,0.04);
  --nav-active-bg:linear-gradient(90deg,rgba(255,0,60,0.12),transparent);
  --nav-hover-bg:rgba(255,0,60,0.06);
  --miss-warn-bg:rgba(255,107,0,0.06);
  --miss-crit-bg:rgba(255,0,60,0.08);
  --tag-bg:rgba(255,0,60,0.1);

  --text:#ffffff;
  --gray:#8a5a5a;
  --gray-2:#5a3838;

  --red:#ff003c;
  --red-dim:#b3002a;
  --orange:#ff6b00;
  --cyan:#00d4ff;
  --cyan-dim:#0099bb;

  --c2:#4fc3f7;
  --c3:#81c784;
  --c8:#ffd54f;
  --c16:#b388ff;
  --c30:#e57373;

  --border:#3a0a0a;
  --border-dim:#2a0606;
  --border-dash:#3a0a0a;

  --hex-text:#0a0000;
  --axis:#5a3838;
  --axis-dim:#8a5a5a;
  --axis-bright:#ff6b00;
  --split:#3a1212;
  --tooltip-bg:#1a0505;
  --tooltip-border:#ff003c;
  --item-border:#0a0000;
  --table-row-border:#1f0505;
  --miss-bar-bg:#2a0606;
  --hud-dash:#2a0606;
  --crit-glow:rgba(255,0,60,0.5);

  --scanlines-opacity:1;
  --noise-opacity:0.04;
  --vignette-opacity:1;
  --glitch-opacity:1;
}

/* ============ 亮色（Apple HIG · 日间模式） ============ */
[data-theme="light"]{
  --bg-0:#fbfbfd;
  --bg-1:#f5f5f7;
  --body-bg:
    radial-gradient(ellipse at 20% 0%, rgba(0,113,227,0.05), transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(175,82,222,0.04), transparent 55%),
    linear-gradient(180deg,#fbfbfd 0%, #f5f5f7 100%);
  --topbar-bg:rgba(251,251,253,0.72);
  --topbar-shadow:0 1px 0 rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.04);
  --sidebar-bg:rgba(245,245,247,0.6);
  --ticker-bg:rgba(245,245,247,0.85);
  --ticker-shadow-l:linear-gradient(90deg,#f5f5f7,transparent);
  --ticker-shadow-r:linear-gradient(270deg,#f5f5f7,transparent);
  --panel-grad:#ffffff;
  --kpi-bg:#ffffff;
  --miss-bg:#f5f5f7;
  --footbar-bg:rgba(245,245,247,0.8);
  --table-head-bg:rgba(0,113,227,0.04);
  --nav-active-bg:linear-gradient(90deg,rgba(0,113,227,0.10),transparent);
  --nav-hover-bg:rgba(0,113,227,0.05);
  --miss-warn-bg:rgba(255,149,0,0.07);
  --miss-crit-bg:rgba(255,59,48,0.06);
  --tag-bg:rgba(0,113,227,0.08);

  --text:#1d1d1f;
  --gray:#86868b;
  --gray-2:#aeaeb2;

  --red:#0071e3;
  --red-dim:#0058b0;
  --orange:#ff9500;
  --cyan:#5ac8fa;
  --cyan-dim:#34a9d8;

  --c2:#007aff;
  --c3:#34c759;
  --c8:#ff9500;
  --c16:#af52de;
  --c30:#ff3b30;

  --border:#d2d2d7;
  --border-dim:#e5e5ea;
  --border-dash:#e5e5ea;

  --hex-text:#ffffff;
  --axis:#c7c7cc;
  --axis-dim:#86868b;
  --axis-bright:#1d1d1f;
  --split:#e8e8ed;
  --tooltip-bg:#ffffff;
  --tooltip-border:#d2d2d7;
  --item-border:#ffffff;
  --table-row-border:#f0f0f4;
  --miss-bar-bg:#e5e5ea;
  --hud-dash:#e8e8ed;
  --crit-glow:rgba(255,59,48,0.28);

  --scanlines-opacity:0;
  --noise-opacity:0;
  --vignette-opacity:0;
  --glitch-opacity:0;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{background:var(--bg-0);color:var(--text);font-family:'Rajdhani','Noto Sans SC',sans-serif;font-size:15px;overflow-x:hidden}
body{
  background:var(--body-bg);
  min-height:100vh;
}

/* === 全局覆盖层 === */
.scanlines{position:fixed;inset:0;pointer-events:none;z-index:9998;opacity:var(--scanlines-opacity);
  background:repeating-linear-gradient(0deg,rgba(255,0,60,0.025) 0,rgba(255,0,60,0.025) 1px,transparent 1px,transparent 3px);
  mix-blend-mode:overlay;transition:opacity .4s}
.crt-noise{position:fixed;inset:0;pointer-events:none;z-index:9997;opacity:var(--noise-opacity);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:noise-shift .2s steps(2) infinite;transition:opacity .4s}
@keyframes noise-shift{0%{transform:translate(0,0)}50%{transform:translate(-2px,1px)}100%{transform:translate(1px,-1px)}}
.vignette{position:fixed;inset:0;pointer-events:none;z-index:9996;opacity:var(--vignette-opacity);
  background:radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,0.6) 100%);transition:opacity .4s}

/* === 顶栏 === */
.topbar{
  position:sticky;top:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 28px;
  background:var(--topbar-bg);
  border-bottom:1px solid var(--red-dim);
  box-shadow:var(--topbar-shadow);
}
.topbar::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--red),transparent)}
.brand{display:flex;align-items:center;gap:16px}
.brand-mark{
  width:42px;height:42px;
  background:linear-gradient(135deg,var(--red),var(--orange));
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  display:flex;align-items:center;justify-content:center;
  font-family:'Orbitron';font-weight:900;color:var(--hex-text);font-size:18px;
}
.title-glitch{
  font-family:'Orbitron';font-weight:900;font-size:22px;letter-spacing:2px;
  color:var(--text);position:relative;text-transform:uppercase;
}
.title-glitch::before,.title-glitch::after{
  content:attr(data-text);position:absolute;top:0;left:0;width:100%;
  overflow:hidden;opacity:var(--glitch-opacity);transition:opacity .4s;
}
.title-glitch::before{color:var(--red);clip-path:inset(0 0 55% 0);animation:gl-1 2.6s infinite linear alternate}
.title-glitch::after{color:var(--cyan);clip-path:inset(55% 0 0 0);animation:gl-2 2s infinite linear alternate}
@keyframes gl-1{0%,90%{transform:translate(0)}92%{transform:translate(-2px,1px)}94%{transform:translate(2px,-1px)}96%{transform:translate(-1px,0)}100%{transform:translate(0)}}
@keyframes gl-2{0%,88%{transform:translate(0)}90%{transform:translate(2px,-1px)}93%{transform:translate(-2px,1px)}97%{transform:translate(1px,0)}100%{transform:translate(0)}}

.kana{font-family:'JetBrains Mono','Noto Sans KR',monospace;font-size:11px;color:var(--red-dim);letter-spacing:3px;margin-top:2px}
.topbar-right{display:flex;align-items:center;gap:18px}
.top-meta{display:flex;align-items:center;gap:24px;font-family:'JetBrains Mono';font-size:13px}
.status-dot{display:inline-flex;align-items:center;gap:8px;color:var(--cyan)}
.status-dot .dot{width:8px;height:8px;background:var(--cyan);border-radius:50%;box-shadow:0 0 8px var(--cyan);animation:pulse-cyan 1.5s infinite}
.status-dot.connecting .dot{background:var(--orange);box-shadow:0 0 8px var(--orange);animation:pulse-orange 1.5s infinite}
.status-dot.disconnected .dot{background:var(--gray-2);box-shadow:none;animation:none}
@keyframes pulse-cyan{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes pulse-orange{0%,100%{opacity:1}50%{opacity:.4}}
.rec-count{color:var(--orange);font-weight:700}
.rec-count .num{color:var(--text)}
.clock{color:var(--gray);font-size:12px}

/* === 侧栏圆形图标按钮（太阳/月亮 + 联系方式） === */
.sidebar-actions{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:8px 0;
}
.icon-btn{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;position:relative;flex-shrink:0;
  background:rgba(255,255,255,0.06);
  border:1px solid var(--border);
  color:var(--gray);
  transition:color .3s,border-color .3s,background .3s,box-shadow .3s;
}
.icon-btn svg{width:20px;height:20px;display:block}
.icon-btn:hover{color:var(--red);border-color:var(--red)}
.icon-btn:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
[data-theme="light"] .icon-btn{
  background:#f5f5f7;border:1px solid var(--border);color:var(--gray);
}
[data-theme="light"] .icon-btn:hover{color:var(--red);border-color:var(--red)}

/* 太阳/月亮图标显隐：暗色显月亮，亮色显太阳 */
.icon-btn .icon-sun{display:none}
.icon-btn .icon-moon{display:block}
[data-theme="light"] .icon-btn .icon-sun{display:block}
[data-theme="light"] .icon-btn .icon-moon{display:none}

.action-label{
  font-family:'JetBrains Mono';font-size:10px;color:var(--gray-2);
  letter-spacing:2px;text-align:center;
}

/* === 联系方式弹出面板 === */
.contact-panel{
  display:none;position:fixed;z-index:9999;width:240px;padding:16px;
  top:80px;left:80px;
}
.contact-panel-title{
  font-family:'Orbitron';font-weight:700;font-size:13px;letter-spacing:2px;
  color:var(--text);text-transform:uppercase;margin-bottom:12px;text-align:center;
}
.qr-wrap{width:180px;height:180px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center}
.qr-img{width:100%;height:100%;object-fit:contain;border-radius:8px}
[data-theme="light"] .qr-wrap{border-radius:12px}
.contact-hint{
  font-family:'Rajdhani';font-size:12px;color:var(--gray);
  text-align:center;margin-bottom:12px;
}
.qq-link{
  display:block;text-align:center;text-decoration:none;
  font-family:'Rajdhani';font-weight:600;font-size:13px;letter-spacing:1px;
  padding:8px 12px;transition:all .2s;
}
/* 暗色面板：赛博斜切角 */
.contact-panel{
  background:var(--panel-grad);border:1px solid var(--border);
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
  box-shadow:0 8px 30px rgba(0,0,0,0.5);
}
.contact-panel.open{
  display:block;
}
.qq-link{color:var(--red);border:1px solid var(--red-dim);background:var(--tag-bg)}
.qq-link:hover{background:var(--red);color:var(--hex-text)}
/* 亮色面板：苹果圆角 */
[data-theme="light"] .contact-panel{
  background:#ffffff;border:1px solid var(--border);border-radius:16px;
  clip-path:none;box-shadow:0 8px 30px rgba(0,0,0,0.12);
}
[data-theme="light"] .contact-panel-title{
  font-family:-apple-system,"SF Pro Display",sans-serif;font-weight:600;
  letter-spacing:-0.01em;text-transform:none;font-size:15px;
}
[data-theme="light"] .qr-placeholder{border-color:var(--border);border-radius:12px}
[data-theme="light"] .contact-hint{font-family:-apple-system,"SF Pro Text",sans-serif}
[data-theme="light"] .qq-link{
  font-family:-apple-system,"SF Pro Text",sans-serif;font-weight:500;letter-spacing:0;
  color:var(--red);border:1px solid var(--border);background:var(--tag-bg);border-radius:8px;
}
[data-theme="light"] .qq-link:hover{background:var(--red);color:#fff}

/* === 跑马灯 === */
.ticker{
  background:var(--ticker-bg);border-top:1px solid var(--border-dim);border-bottom:1px solid var(--border-dim);
  overflow:hidden;white-space:nowrap;padding:8px 0;position:relative;
  display:flex;align-items:center;
}
.ticker::before{content:'';position:absolute;left:0;top:0;bottom:0;width:80px;z-index:2;
  background:var(--ticker-shadow-l)}
.ticker::after{content:'';position:absolute;right:0;top:0;bottom:0;width:80px;z-index:2;
  background:var(--ticker-shadow-r)}
.ticker-label{
  display:inline-block;padding:4px 14px;margin-right:10px;
  background:var(--red);color:var(--hex-text);font-family:'Orbitron';font-weight:700;font-size:11px;
  letter-spacing:1px;margin-left:10px;clip-path:polygon(8% 0,100% 0,92% 100%,0 100%);
  position:relative;z-index:3;flex-shrink:0;
}
.ticker-track{display:inline-block;animation:scroll 40s linear infinite;font-family:'JetBrains Mono';font-size:13px;color:var(--gray);flex-shrink:0}
.ticker-track span{margin:0 30px}
.ticker-track .hi{color:var(--orange)}
.ticker-track .crit{color:var(--red);font-weight:700}
@keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* === 布局 === */
.layout{display:grid;grid-template-columns:200px 1fr;gap:0;min-height:calc(100vh - 100px)}
/* 侧边栏 */
.sidebar{
  background:var(--sidebar-bg);
  border-right:1px solid var(--border-dim);padding:24px 0;position:sticky;top:100px;height:calc(100vh - 100px);
  overflow-y:auto;display:flex;flex-direction:column;
}
.sidebar-user{
  margin-top:auto;padding:12px 16px;border-top:1px solid var(--border-dim);
  display:flex;align-items:center;gap:10px;cursor:pointer;
  transition:background .2s;
}
.sidebar-user:hover{background:var(--nav-hover-bg)}
.su-avatar{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-family:'Orbitron';font-weight:700;font-size:14px;color:#fff;
  background:linear-gradient(135deg,var(--red),var(--orange));
}
.su-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.su-name{font-family:'Rajdhani';font-weight:600;font-size:13px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.su-role{font-family:'JetBrains Mono';font-size:10px;color:var(--gray)}
[data-theme="light"] .su-name{font-family:-apple-system,"SF Pro Text",sans-serif;font-weight:600}
[data-theme="light"] .su-role{font-family:"SF Mono",ui-monospace,monospace}
[data-theme="light"] .su-avatar{border-radius:50%}
[data-theme="light"] .sidebar-user{border-top-color:rgba(0,0,0,0.06)}
.nav-section{font-family:'Orbitron';font-size:10px;color:var(--red-dim);letter-spacing:2px;padding:0 20px;margin-bottom:12px;height:28px;line-height:28px;transition:font-family 0s}
.nav-item{
  display:flex;align-items:center;gap:12px;padding:0 20px;height:44px;line-height:44px;
  font-family:'Rajdhani';font-weight:600;font-size:14px;color:var(--gray);
  border-left:2px solid transparent;cursor:pointer;transition:color .3s,background .3s,border-color .3s,font-family 0s;text-transform:uppercase;letter-spacing:1px;
  position:relative;
}
.nav-item:hover{color:var(--text);background:var(--nav-hover-bg)}
.nav-item.active{color:var(--red);border-left-color:var(--red);background:var(--nav-active-bg)}
.nav-item.active::after{content:'\25B8';position:absolute;right:14px;color:var(--red)}
.nav-num{font-family:'JetBrains Mono';font-size:10px;color:var(--gray-2);width:18px}
.nav-item.active .nav-num{color:var(--orange)}
.nav-divider{height:1px;background:linear-gradient(90deg,transparent,var(--border-dim),transparent);margin:16px 0}

/* === 主内容 === */
.main{padding:24px 28px;display:flex;flex-direction:column;gap:24px}
.grid-2{display:grid;grid-template-columns:1.4fr 1fr;gap:24px}
.grid-2-eq{display:grid;grid-template-columns:1fr 1fr;gap:24px}

/* === 面板 === */
.panel{
  background:var(--panel-grad);
  border:1px solid var(--border);position:relative;padding:22px 22px 18px;
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));
}
.panel::before,.panel::after{content:'';position:absolute;width:14px;height:14px;border:2px solid var(--red);pointer-events:none}
.panel::before{top:0;left:0;border-right:none;border-bottom:none}
.panel::after{bottom:0;right:0;border-left:none;border-top:none}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:10px;border-bottom:1px dashed var(--border-dash)}
.panel-title{display:flex;align-items:center;gap:10px}
.panel-title .tag{
  font-family:'JetBrains Mono';font-size:10px;color:var(--red);background:var(--tag-bg);
  padding:2px 6px;border:1px solid var(--red-dim);letter-spacing:1px;
}
.panel-title h2{font-family:'Orbitron';font-weight:700;font-size:15px;letter-spacing:2px;text-transform:uppercase;color:var(--text)}
.panel-title .sub{font-family:'JetBrains Mono';font-size:11px;color:var(--gray)}
.panel-tools{display:flex;gap:8px}
.tool-btn{
  font-family:'JetBrains Mono';font-size:10px;color:var(--gray);background:transparent;
  border:1px solid var(--border);padding:3px 8px;cursor:pointer;letter-spacing:1px;transition:all .15s;
}
.tool-btn:hover,.tool-btn.on{color:var(--red);border-color:var(--red);background:var(--nav-hover-bg)}
.panel-info{font-family:'JetBrains Mono';font-size:10px;color:var(--gray);letter-spacing:1px}

/* === 号码徽章 (六边形) === */
.hex-badge{
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  width:56px;height:64px;color:var(--hex-text);font-weight:900;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  font-family:'Orbitron';position:relative;
}
.hex-badge .n{font-size:18px;line-height:1}
.hex-badge .m{font-size:9px;opacity:.8}
.hex-row{display:flex;gap:10px;flex-wrap:nowrap;margin:14px 0;overflow:hidden;align-items:center}
.hex-badge{transition:opacity .3s,transform .3s}
.hex-badge.fade{opacity:.3;transform:scale(.85)}
.hex-next{position:relative;opacity:1;background:var(--red-dim)}
.hex-next::before{content:'';position:absolute;inset:2px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:var(--miss-crit-bg);z-index:0}
.hex-next .n{font-size:18px;color:var(--red);font-weight:900;transition:opacity .15s ease;position:relative;z-index:1}
.hex-next .m{color:var(--orange);position:relative;z-index:1}

/* === KPI 条 === */
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:8px}
.kpi{
  background:var(--kpi-bg);border:1px solid var(--border-dim);padding:14px 16px;position:relative;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
  transition:background .4s,border-color .4s;
  display:flex;align-items:center;gap:12px;min-height:64px;
}
.kpi .lbl{
  font-family:'JetBrains Mono';font-size:14px;color:var(--gray);
  letter-spacing:1px;text-transform:uppercase;
  flex-shrink:0;max-width:90px;line-height:1.3;
  transition:color .3s,font-family 0s;
}
.kpi .val-wrap{flex:1;text-align:right;min-width:0}
.kpi .val{font-family:'Orbitron';font-weight:700;font-size:26px;line-height:1.1;
  transition:color .3s,font-family 0s;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi .val.r{color:var(--red)}.kpi .val.o{color:var(--orange)}.kpi .val.c{color:var(--cyan)}.kpi .val.w{color:var(--text)}
.kpi .delta{font-family:'JetBrains Mono';font-size:12px;margin-top:3px;
  transition:color .3s,font-family 0s}
.kpi .delta.up{color:var(--c3)}.kpi .delta.dn{color:var(--red)}

/* 图表容器 */
.chart{width:100%;height:300px}
.chart-tall{width:100%;height:340px}
.chart-short{width:100%;height:240px}

/* === 冷热+遗漏 === */
.miss-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.miss-list{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.miss-item{
  display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:14px;
  padding:10px 12px;background:var(--miss-bg);border:1px solid var(--border-dim);
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
}
.miss-item.warn{border-color:var(--orange);background:var(--miss-warn-bg)}
.miss-item.crit{border-color:var(--red);background:var(--miss-crit-bg);animation:pulse-red 1.8s infinite}
@keyframes pulse-red{0%,100%{box-shadow:0 0 0 var(--crit-glow)}50%{box-shadow:0 0 18px var(--crit-glow)}}
.miss-hex{
  width:42px;height:48px;display:flex;align-items:center;justify-content:center;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  font-family:'Orbitron';font-weight:900;color:var(--hex-text);font-size:16px;
}
.miss-info{display:flex;flex-direction:column;gap:2px}
.miss-char{font-family:'Rajdhani';font-weight:600;font-size:14px;color:var(--text)}
.miss-meta{font-family:'JetBrains Mono';font-size:11px;color:var(--gray)}
.miss-val{text-align:right}
.miss-val .v{font-family:'Orbitron';font-weight:900;font-size:22px}
.miss-val .u{font-family:'JetBrains Mono';font-size:10px;color:var(--gray);display:block}
.miss-bar{height:4px;background:var(--miss-bar-bg);margin-top:6px;position:relative;overflow:hidden}
.miss-bar span{display:block;height:100%}

/* === 表格 === */
.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-family:'JetBrains Mono';font-size:13px}
thead th{
  text-align:left;padding:10px 12px;font-family:'Orbitron';font-weight:700;font-size:11px;
  letter-spacing:1px;color:var(--red);border-bottom:1px solid var(--red-dim);text-transform:uppercase;
  background:var(--table-head-bg);
}
tbody td{padding:9px 12px;border-bottom:1px solid var(--table-row-border);color:var(--text)}
tbody tr:hover{background:var(--nav-hover-bg)}
.cell-num{display:inline-flex;align-items:center;gap:6px;font-weight:700}
.cell-dot{width:10px;height:10px;border-radius:0;transform:rotate(45deg)}
.cell-tag{font-size:10px;padding:1px 6px;border:1px solid;color:var(--gray)}
.pager{display:flex;align-items:center;justify-content:space-between;margin-top:14px;font-family:'JetBrains Mono';font-size:12px;color:var(--gray)}
.pager-btns{display:flex;gap:4px;flex-wrap:wrap}
.pager-btns button{
  background:transparent;border:1px solid var(--border);color:var(--gray);padding:4px 10px;cursor:pointer;
  font-family:'JetBrains Mono';font-size:12px;transition:all .15s;
}
.pager-btns button:hover{color:var(--red);border-color:var(--red);background:var(--nav-hover-bg)}
.pager-btns button.on{color:var(--red);border-color:var(--red);background:var(--nav-hover-bg)}
.pager-btns button:disabled{opacity:.3;cursor:not-allowed}

/* HUD 仪表区 */
.hud-row{display:flex;align-items:center;gap:18px}
.hud-gauge{width:160px;height:160px;flex-shrink:0}
.hud-stats{flex:1;display:flex;flex-direction:column;gap:4px}
.hud-stat{display:flex;align-items:baseline;justify-content:space-between;padding:4px 0;border-bottom:1px dashed var(--hud-dash);font-family:'JetBrains Mono';font-size:13px;gap:12px}
.hud-stat .k{color:var(--gray);white-space:nowrap;flex-shrink:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.hud-stat .v{color:var(--text);font-weight:700;text-align:right;white-space:nowrap;flex-shrink:0}
.hud-stat .v.r{color:var(--red)}.hud-stat .v.o{color:var(--orange)}.hud-stat .v.c{color:var(--cyan)}

/* 底部状态条 */
.footbar{
  margin-top:auto;padding:10px 28px;border-top:1px solid var(--border-dim);
  display:flex;justify-content:space-between;font-family:'JetBrains Mono';font-size:11px;color:var(--gray-2);
  background:var(--footbar-bg);
}
.footbar .sys{color:var(--red-dim)}

/* === 告警台 === */
.alert-list{display:flex;flex-direction:column;gap:8px;max-height:400px;overflow-y:auto}
.alert-item{
  display:flex;align-items:flex-start;gap:12px;padding:10px 14px;
  background:var(--miss-bg);border:1px solid var(--border-dim);
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
}
.alert-item.crit{border-color:var(--red);background:var(--miss-crit-bg);animation:pulse-red 1.8s infinite}
.alert-item.warn{border-color:var(--orange);background:var(--miss-warn-bg)}
.alert-tag{
  font-family:'Orbitron';font-weight:700;font-size:10px;padding:2px 8px;flex-shrink:0;
  letter-spacing:1px;
}
.alert-item.crit .alert-tag{background:var(--red);color:var(--hex-text)}
.alert-item.warn .alert-tag{background:var(--orange);color:var(--hex-text)}
.alert-item.info .alert-tag{background:var(--tag-bg);color:var(--gray);border:1px solid var(--border)}
.alert-text{flex:1;font-family:'JetBrains Mono';font-size:12px;color:var(--text);line-height:1.5}
.alert-time{font-family:'JetBrains Mono';font-size:10px;color:var(--gray-2);flex-shrink:0}
[data-theme="light"] .alert-item{clip-path:none;border-radius:10px}
[data-theme="light"] .alert-tag{border-radius:4px}

/* ============ 响应式 ============ */
.topbar-actions{display:none}

@media(min-width:1600px){
  .topbar,.ticker{padding-left:calc((100vw - 1600px)/2 + 28px);padding-right:calc((100vw - 1600px)/2 + 28px)}
  .layout{max-width:1600px;margin:0 auto}
}

@media(max-width:1099px){
  .grid-2,.grid-2-eq{grid-template-columns:1fr}
  .miss-grid{grid-template-columns:1fr}
  .kpi-row{grid-template-columns:repeat(2,1fr)}
  .chart-tall{height:300px}
  .chart{height:260px}
}

@media(max-width:900px) and (min-width:601px){
  .kpi .lbl{max-width:70px;font-size:12px}
  .kpi .val{font-size:22px}
  .chart-tall{height:280px}
  .chart{height:260px}
}

@media(max-width:767px){
  .topbar{flex-wrap:wrap;gap:8px;padding:10px 16px;padding-top:max(10px,env(safe-area-inset-top))}
  .title-glitch{font-size:16px;letter-spacing:1px}
  .kana{display:none}
  .top-meta{font-size:11px;gap:12px}
  .clock{display:none}
  .rec-count{font-size:11px}
  .topbar-actions{display:flex;align-items:center;gap:8px}
  .topbar-actions .icon-btn{width:44px;height:44px}
  .sidebar-actions{display:none}

  .layout{grid-template-columns:1fr}
  .sidebar{
    position:fixed;left:0;right:0;bottom:0;top:auto;
    height:56px;padding:0;
    border-right:none;border-top:1px solid var(--border-dim);
    display:flex;flex-direction:row;align-items:center;
    overflow-x:auto;overflow-y:hidden;
    background:var(--sidebar-bg);
    z-index:100;
    padding-bottom:env(safe-area-inset-bottom);
    -webkit-overflow-scrolling:touch;
  }
  .sidebar::-webkit-scrollbar{display:none}
  .nav-section,.nav-divider{display:none}
  .nav-item{
    flex-shrink:0;height:44px;line-height:44px;padding:0 14px;
    border-left:none;border-bottom:2px solid transparent;
    font-size:12px;gap:6px;
  }
  .nav-item.active{border-left:none;border-bottom-color:var(--red)}
  .nav-item.active::after{display:none}
  .nav-num{font-size:9px}

  .main{padding:16px;padding-bottom:calc(70px + env(safe-area-inset-bottom))}

  .kpi-row{grid-template-columns:repeat(2,1fr);gap:10px}
  .kpi{min-height:56px;padding:10px 12px}
  .kpi .lbl{max-width:64px;font-size:12px}
  .kpi .val{font-size:22px}

  .chart-tall{height:240px}
  .chart{height:220px}

  .panel{clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));padding:16px 14px 14px}
  .panel-title h2{font-size:14px;letter-spacing:1px}

  .hud-row{flex-direction:column;align-items:stretch;gap:12px}
  .hud-gauge{width:100% !important;height:200px !important}
  .hud-stats{font-size:12px}

  .ticker-label{font-size:10px;padding:3px 10px;margin-left:6px}
  .ticker-track{font-size:11px}
  .ticker-track span{margin:0 18px}

  table{font-size:12px}
  thead th{padding:8px 8px;font-size:10px}
  tbody td{padding:7px 8px}

  .footbar{font-size:10px;padding:8px 16px;flex-wrap:wrap;gap:4px}

  .contact-panel{
    left:50% !important;right:auto !important;
    bottom:calc(76px + env(safe-area-inset-bottom)) !important;
    top:auto !important;
    transform:translate(-50%,8px);
    width:calc(100vw - 32px);max-width:240px;
  }
  .contact-panel.open{transform:translate(-50%,0)}
}

@media(max-width:480px){
  html,body{font-size:14px}
  .kpi-row{grid-template-columns:1fr}
  .kpi .lbl{max-width:80px}
  .topbar{padding:8px 12px}
  .top-meta .status-dot{display:none}
  .main{padding:12px;padding-bottom:calc(70px + env(safe-area-inset-bottom));gap:16px}
  .grid-2,.grid-2-eq{gap:16px}
  .hex-badge{width:48px;height:56px}
  .hex-badge .n{font-size:16px}
  .hex-row{gap:8px}
  .panel{padding:14px 12px 12px}
  .panel-title h2{font-size:13px}
  .pager{flex-direction:column;gap:8px;align-items:stretch}
  .pager-btns{justify-content:center;flex-wrap:wrap}
}

@media(max-height:500px) and (orientation:landscape){
  .chart-tall{height:200px}
  .chart{height:180px}
  .chart-short{height:150px}
  .kpi{min-height:48px}
  .topbar{padding:6px 16px}
  .sidebar{height:48px}
  .nav-item{height:40px;line-height:40px}
  .main{padding-bottom:calc(60px + env(safe-area-inset-bottom))}
  .hud-gauge{height:160px !important}
}

/* 角标装饰字符 */
.corner-deco{position:absolute;font-family:'JetBrains Mono';font-size:10px;color:var(--red-dim);pointer-events:none;opacity:.6}
.cd-tl{top:4px;left:18px}
.cd-tr{top:4px;right:18px}
.cd-bl{bottom:4px;left:18px}
.cd-br{bottom:4px;right:18px}

/* === 主题切换过渡 === */
body,.topbar,.sidebar,.ticker,.panel,.kpi,.miss-item,.footbar,
.hex-badge,.miss-hex,.brand-mark,.ticker-label,
thead th,tbody td,.tool-btn,.pager-btns button,.nav-item,
.title-glitch,.title-glitch::before,.title-glitch::after,
.scanlines,.crt-noise,.vignette,.icon-btn,
.miss-bar,.hud-stat,.corner-deco,.cell-tag,.nav-divider,
.panel-title .tag,.status-dot,.status-dot .dot,.rec-count,.clock,.kana{
  transition:background-color .4s,background .4s,color .4s,border-color .4s,opacity .4s,box-shadow .4s,border-radius .4s;
}

/* ============ 亮色：赛博 → 苹果 元素退化 ============ */
[data-theme="light"] body,
[data-theme="light"] .title-glitch,
[data-theme="light"] .panel-title h2,
[data-theme="light"] .panel-title .sub,
[data-theme="light"] .panel-title .tag,
[data-theme="light"] .kpi .val,
[data-theme="light"] .kpi .delta,
[data-theme="light"] .kpi .lbl,
[data-theme="light"] .hex-badge .n,
[data-theme="light"] .hex-badge .m,
[data-theme="light"] .miss-hex,
[data-theme="light"] .miss-char,
[data-theme="light"] .miss-val .v,
[data-theme="light"] .miss-val .u,
[data-theme="light"] .miss-meta,
[data-theme="light"] .nav-item,
[data-theme="light"] .nav-section,
[data-theme="light"] .nav-num,
[data-theme="light"] .ticker-label,
[data-theme="light"] .ticker-track,
[data-theme="light"] .tool-btn,
[data-theme="light"] .pager,
[data-theme="light"] .pager-btns button,
[data-theme="light"] .hud-stat,
[data-theme="light"] .status-dot,
[data-theme="light"] .rec-count,
[data-theme="light"] .clock,
[data-theme="light"] .footbar,
[data-theme="light"] .cell-tag,
[data-theme="light"] .corner-deco,
[data-theme="light"] .brand-mark{
  font-family:-apple-system,"SF Pro Display","SF Pro Text","Helvetica Neue","Helvetica",Arial,sans-serif;
  font-variant-numeric:tabular-nums;
}
[data-theme="light"] .ticker-track,
[data-theme="light"] .miss-meta,
[data-theme="light"] .miss-val .u,
[data-theme="light"] .nav-num,
[data-theme="light"] .panel-title .sub,
[data-theme="light"] .panel-title .tag,
[data-theme="light"] .tool-btn,
[data-theme="light"] .pager,
[data-theme="light"] .pager-btns button,
[data-theme="light"] .hud-stat,
[data-theme="light"] .status-dot,
[data-theme="light"] .clock,
[data-theme="light"] .footbar,
[data-theme="light"] .cell-tag{
  font-family:"SF Mono",ui-monospace,"JetBrains Mono",Menlo,Consolas,monospace;
}

[data-theme="light"] .topbar{
  background:var(--topbar-bg);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom-color:rgba(0,0,0,0.08);
}
[data-theme="light"] .topbar::after{display:none}

[data-theme="light"] .brand-mark{
  clip-path:none;
  border-radius:10px;
  background:linear-gradient(135deg,#007aff,#5856d6);
  box-shadow:0 2px 8px rgba(0,113,227,0.25);
}

[data-theme="light"] .title-glitch::before,
[data-theme="light"] .title-glitch::after{opacity:0 !important;animation:none}
[data-theme="light"] .title-glitch{letter-spacing:-0.01em;font-weight:700}

[data-theme="light"] .panel{
  clip-path:none;
  border-radius:16px;
  border-color:rgba(0,0,0,0.06);
  box-shadow:0 4px 12px rgba(0,0,0,0.06),0 1px 2px rgba(0,0,0,0.04);
}
[data-theme="light"] .panel::before,
[data-theme="light"] .panel::after{border:none;display:none}
[data-theme="light"] .panel-head{border-bottom-color:var(--border-dim)}
[data-theme="light"] .panel-title h2{letter-spacing:-0.01em;font-weight:600;text-transform:none}
[data-theme="light"] .panel-title .tag{
  border-radius:4px;border-color:transparent;background:var(--tag-bg);
}

[data-theme="light"] .corner-deco{display:none}

[data-theme="light"] .hex-badge{
  clip-path:none;
  border-radius:12px;
  box-shadow:0 1px 3px rgba(0,0,0,0.12);
}
[data-theme="light"] .hex-badge .n{font-weight:700}

[data-theme="light"] .kpi{
  clip-path:none;
  border-radius:14px;
  border-color:rgba(0,0,0,0.05);
  box-shadow:0 1px 3px rgba(0,0,0,0.04);
}
[data-theme="light"] .kpi .val{font-family:-apple-system,"SF Pro Display",sans-serif;font-weight:600;font-size:26px;letter-spacing:-0.02em}
[data-theme="light"] .kpi .lbl{font-family:-apple-system,"SF Pro Text",sans-serif;font-size:14px}
[data-theme="light"] .kpi .delta{font-family:-apple-system,"SF Pro Text",sans-serif;font-size:12px}

[data-theme="light"] .miss-item{
  clip-path:none;
  border-radius:12px;
  border-color:rgba(0,0,0,0.06);
  transition:background .3s,border-color .3s,box-shadow .3s,border-radius .4s;
}
[data-theme="light"] .miss-item.crit{
  border-color:var(--c30);
  animation:none;
  box-shadow:0 0 0 1px rgba(255,59,48,0.2);
}
[data-theme="light"] .miss-hex{
  clip-path:none;
  border-radius:8px;
  box-shadow:0 1px 3px rgba(0,0,0,0.15);
}

[data-theme="light"] .ticker-label{
  clip-path:none;
  border-radius:4px;
  font-weight:600;
  letter-spacing:0.5px;
}

[data-theme="light"] .cell-dot{transform:none;border-radius:50%}

[data-theme="light"] .tool-btn{
  border-radius:6px;border-color:var(--border);
}
[data-theme="light"] .tool-btn:hover,
[data-theme="light"] .tool-btn.on{
  background:var(--nav-hover-bg);border-color:var(--red);
}
[data-theme="light"] .pager-btns button{border-radius:6px}

[data-theme="light"] .sidebar{
  background:var(--sidebar-bg);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-right-color:rgba(0,0,0,0.06);
}
[data-theme="light"] .nav-item{text-transform:none;letter-spacing:0;border-radius:8px}
[data-theme="light"] .nav-item.active{border-left-color:var(--red);font-weight:600}
[data-theme="light"] .nav-item.active::after{content:''}
[data-theme="light"] .nav-section{font-weight:600;letter-spacing:0.08em;color:var(--gray)}
[data-theme="light"] .nav-divider{background:var(--border-dim)}

[data-theme="light"] .ticker{border-color:rgba(0,0,0,0.06)}

[data-theme="light"] thead th{
  text-transform:none;letter-spacing:0;font-weight:600;
  border-bottom-color:var(--border);background:transparent;
}
[data-theme="light"] tbody td{border-bottom-color:var(--table-row-border)}
[data-theme="light"] .cell-tag{border-radius:4px}

[data-theme="light"] .hud-stat{border-bottom-color:var(--hud-dash)}

[data-theme="light"] .footbar{
  border-top-color:rgba(0,0,0,0.06);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
}

/* === 告警台悬浮窗 === */
.alert-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:300;opacity:0;pointer-events:none;transition:opacity .25s}
.alert-modal-overlay.open{opacity:1;pointer-events:auto}
.alert-modal{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95);
  width:520px;max-width:calc(100vw - 32px);max-height:calc(100vh - 100px);
  z-index:301;opacity:0;pointer-events:none;
  transition:opacity .25s,transform .25s;
  background:var(--panel-grad);border:1px solid var(--red);
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));
  display:flex;flex-direction:column;overflow:hidden;
}
.alert-modal.open{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto}
[data-theme="light"] .alert-modal{clip-path:none;border-radius:16px;background:#fff;box-shadow:0 12px 40px rgba(0,0,0,0.15)}
.am-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border-dim)}
.am-title{display:flex;align-items:center;gap:10px}
.am-icon{font-size:20px;color:var(--red)}
.am-title h3{font-family:'Orbitron';font-weight:700;font-size:16px;color:var(--text);letter-spacing:1px}
[data-theme="light"] .am-title h3{font-family:-apple-system,sans-serif;font-weight:600;letter-spacing:0}
.am-sub{font-family:'JetBrains Mono';font-size:11px;color:var(--gray)}
.am-close{background:none;border:none;color:var(--gray);font-size:18px;cursor:pointer;padding:4px 8px;transition:color .2s}
.am-close:hover{color:var(--red)}
.am-body{padding:16px 20px;overflow-y:auto;flex:1}
.am-section{margin-bottom:20px}
.am-section-title{font-family:'Orbitron';font-size:12px;color:var(--red-dim);letter-spacing:1px;margin-bottom:10px;text-transform:uppercase}
[data-theme="light"] .am-section-title{font-family:-apple-system,sans-serif;font-weight:600;color:var(--gray);text-transform:none;letter-spacing:0}
.am-count{background:var(--red);color:var(--hex-text);font-size:10px;padding:1px 6px;border-radius:3px;margin-left:4px}
.am-alert-list{display:flex;flex-direction:column;gap:6px;max-height:200px;overflow-y:auto}
.am-alert-item{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--miss-bg);border:1px solid var(--border-dim);font-family:'JetBrains Mono';font-size:11px;color:var(--text);border-radius:4px}
.am-alert-item.crit{border-color:var(--red);background:var(--miss-crit-bg)}
.am-alert-item.warn{border-color:var(--orange);background:var(--miss-warn-bg)}
.am-alert-tag{font-weight:700;font-size:10px;padding:1px 5px;flex-shrink:0}
.am-alert-item.crit .am-alert-tag{background:var(--red);color:var(--hex-text)}
.am-alert-item.warn .am-alert-tag{background:var(--orange);color:var(--hex-text)}
.am-alert-item.info .am-alert-tag{background:var(--tag-bg);color:var(--gray)}
.am-rules{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.am-rule{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--miss-bg);border:1px solid var(--border-dim);border-radius:4px;font-family:'JetBrains Mono';font-size:12px}
.am-rule-num{font-weight:700;padding:2px 6px;border-radius:3px;color:#fff}
.am-rule-del{margin-left:auto;background:none;border:1px solid var(--border);color:var(--gray);cursor:pointer;padding:2px 8px;border-radius:3px;font-size:11px}
.am-rule-del:hover{color:var(--red);border-color:var(--red)}
.am-rule-add{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:10px;background:var(--miss-bg);border:1px dashed var(--border);border-radius:6px}
.am-select,.am-input{background:var(--bg-0);border:1px solid var(--border);color:var(--text);padding:5px 8px;font-family:'JetBrains Mono';font-size:12px;border-radius:4px}
[data-theme="light"] .am-select,[data-theme="light"] .am-input{background:#fff}
.am-rule-label{font-family:'JetBrains Mono';font-size:11px;color:var(--gray)}
.am-add-btn{background:var(--red);color:var(--hex-text);border:none;padding:5px 12px;cursor:pointer;font-family:'JetBrains Mono';font-size:12px;border-radius:4px;transition:opacity .2s}
.am-add-btn:hover{opacity:.85}

/* === 全屏告警闪烁 === */
.alert-fullscreen{
  position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse at center,rgba(255,0,0,0.15) 0%,rgba(255,0,0,0.4) 60%,rgba(180,0,0,0.6) 100%);
  transition:opacity .3s;
  display:flex;align-items:center;justify-content:center;
}
.alert-fullscreen.active{pointer-events:auto;opacity:1;animation:af-pulse 0.8s ease-in-out infinite}
@keyframes af-pulse{0%,100%{opacity:.7}50%{opacity:1}}
.af-content{text-align:center;color:#fff;text-shadow:0 0 20px rgba(255,0,0,0.8)}
.af-icon{font-size:64px;margin-bottom:16px;animation:af-shake .3s ease-in-out infinite}
@keyframes af-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.af-title{font-family:'Orbitron';font-weight:900;font-size:36px;letter-spacing:4px;margin-bottom:8px}
.af-desc{font-family:'JetBrains Mono';font-size:14px;opacity:.9;margin-bottom:24px}
.af-dismiss{background:rgba(255,255,255,0.15);border:2px solid #fff;color:#fff;padding:10px 28px;font-family:'Orbitron';font-weight:700;font-size:14px;cursor:pointer;border-radius:4px;backdrop-filter:blur(10px);transition:background .2s}
.af-dismiss:hover{background:rgba(255,255,255,0.25)}