/* ============================================================
   展会电箱安全监测大屏 · 共享主题（字体 / 设计令牌 / 玻璃面板 / 数字排版）
   专家会诊后统一规范：思源黑体 + Rajdhani 数字、青蓝冷色主调、
   红只给告警、规格色去饱和、文字去辉光、8px 栅格、玻璃拟态。
   ============================================================ */
@font-face{font-family:'Noto Sans SC';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/noto-sans-sc-400.woff2) format('woff2')}
@font-face{font-family:'Noto Sans SC';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/noto-sans-sc-500.woff2) format('woff2')}
@font-face{font-family:'Noto Sans SC';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/noto-sans-sc-700.woff2) format('woff2')}
@font-face{font-family:'Noto Sans SC';font-style:normal;font-weight:900;font-display:swap;src:url(fonts/noto-sans-sc-900.woff2) format('woff2')}
@font-face{font-family:'Rajdhani';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/rajdhani-600.woff2) format('woff2')}
@font-face{font-family:'Rajdhani';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/rajdhani-700.woff2) format('woff2')}

/* token 覆盖：沿用旧变量名，统一改值，避免动到大量内联 CSS */
:root{
  --bg0:#060b14; --bg1:#0a1422;
  --text:#e6f2ff; --muted:#8099af; --muted2:#6e8ca6;
  --cyan:#23d3ec;        /* 品牌主色（装饰：环/链路/边） */
  --blue:#3fa9f5;
  --green:#27e07a;       /* 语义：正常/在线 */
  --amber:#ffc23d;       /* 语义：预警 */
  --red:#ff3b47;         /* 语义：告警（独占最高饱和） */
  --purple:#9b7bff;
  --line:rgba(120,180,230,.22);
  --panel:rgba(14,24,38,.55);
  --font-cn:'Noto Sans SC','Microsoft YaHei','PingFang SC',system-ui,sans-serif;
  --font-num:'Rajdhani','Bahnschrift','DIN Alternate','Noto Sans SC',sans-serif;
}

/* 全局字体 */
body{font-family:var(--font-cn);color:var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* 标题：思源黑 Heavy + 字距，辉光收到极轻 */
h1{font-family:var(--font-cn)!important;font-weight:900!important;letter-spacing:1.5px!important;
   text-shadow:0 0 14px rgba(35,211,236,.22)!important}

/* 英文/坐标小标：全大写 + 字距 + 降明度 */
.clock{color:var(--muted2)!important;letter-spacing:.4px;font-variant-numeric:tabular-nums}

/* 数字（KPI / 数值）统一 Rajdhani 等宽数字、去模糊辉光 */
.kpi .value,.value,.metric strong,.kpi .value *{
  font-family:var(--font-num)!important;font-weight:600!important;
  font-variant-numeric:tabular-nums!important;letter-spacing:.5px;text-shadow:none!important}
.kpi .label,.metric span{color:var(--muted)!important;font-weight:400;letter-spacing:.3px}

/* 玻璃面板：圆角 + 细描边 + 顶部内高光 + 毛玻璃，让 3D 光晕透出 */
.kpi,.panel,.timeline,.drill-card,.cutaway,.halllist,.legend,.hint,.back,#tip,.drill-overlay header,.mini,.mini2{
  border:1px solid var(--line)!important}
.kpi,.panel,.timeline,.drill-card,.cutaway,.legend,.hint,.back{
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,0) 16px),var(--panel)!important;
  border-radius:10px!important;backdrop-filter:blur(9px)!important;
  box-shadow:inset 0 0 0 1px rgba(120,180,230,.04),0 8px 30px rgba(0,4,10,.45)!important}

/* 面板标题：左侧信号条 + 16px/600，颜色随语义 */
.panel h2,.drill-card h2,.cutaway h2{font-weight:700!important;letter-spacing:.3px}

/* 告警卡：一红压全场 + 呼吸 */
.alarm,.alarm-card{border:1px solid var(--red)!important;
  box-shadow:0 0 22px rgba(255,59,71,.28),inset 0 0 26px rgba(255,59,71,.10)!important;
  animation:alarmPulse 2.6s ease-in-out infinite}
@keyframes alarmPulse{0%,100%{box-shadow:0 0 16px rgba(255,59,71,.20),inset 0 0 22px rgba(255,59,71,.08)}
  50%{box-shadow:0 0 30px rgba(255,59,71,.40),inset 0 0 28px rgba(255,59,71,.14)}}

/* 列表行：3 列 + 数值右对齐等宽 */
.halllist .hrow b,.row b,.layer-row b,.state-row b{font-family:var(--font-num)!important;font-variant-numeric:tabular-nums}

/* 统一暗色悬浮提示（替换浏览器原生白底 title 气泡）*/
.uitip{position:fixed;z-index:100000;display:none;pointer-events:none;max-width:320px;
  padding:8px 12px;border-radius:9px;font-family:var(--font-cn);font-size:12px;line-height:1.55;color:#eafdff;
  border:1px solid rgba(35,211,236,.5);background:linear-gradient(180deg,rgba(11,24,38,.97),rgba(6,14,24,.98));
  box-shadow:0 10px 30px rgba(0,4,10,.6),inset 0 0 0 1px rgba(120,180,230,.05);backdrop-filter:blur(7px);white-space:normal}
.uitip.show{display:block}

/* ===== 在线率保障 · 作战看板（右侧抽屉） ===== */
.ogmask{position:fixed;inset:0;z-index:90000;display:none;background:rgba(2,7,14,.62);backdrop-filter:blur(3px)}
.ogmask.show{display:block}
.ogpanel{position:absolute;top:0;right:0;height:100%;width:min(580px,95vw);display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(12,24,38,.98),rgba(6,14,24,.99));border-left:1px solid rgba(35,211,236,.45);
  box-shadow:-18px 0 60px rgba(0,4,12,.6);transform:translateX(24px);transition:transform .25s ease}
.ogmask.show .ogpanel{transform:none}
.ogh{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid rgba(120,180,230,.14);flex:0 0 auto}
.ogh .t{font-size:16px;font-weight:800;color:#eafdff}
.ogh .sc{font-size:12px;color:#8fb9cc}
.ogh .x{margin-left:auto;cursor:pointer;color:#7e97ad;font-size:18px;padding:2px 8px;line-height:1}.ogh .x:hover{color:#fff}
.ogbody{flex:1;overflow:auto;padding:16px 20px;min-height:0}
.ogbody::-webkit-scrollbar{width:7px}.ogbody::-webkit-scrollbar-thumb{background:rgba(120,180,230,.25);border-radius:4px}
.ograte{display:flex;align-items:center;gap:16px;margin-bottom:14px}
.ograte .big{font-family:var(--font-num);font-size:46px;font-weight:800;line-height:1}
.ograte .big.ok{color:#35f39a;text-shadow:0 0 18px rgba(53,243,154,.4)}
.ograte .big.warn{color:#ffc23d}.ograte .big.bad{color:#ff4c66}.ograte .big.neutral{color:#23d3ec}
.ograte .sub{font-size:12.5px;color:#a7d9e8;line-height:1.7}
.ogbanner{padding:9px 12px;border-radius:8px;font-size:12px;line-height:1.6;margin-bottom:14px}
.ogbanner.info{background:rgba(63,169,245,.12);border:1px solid rgba(63,169,245,.35);color:#bfe0f7}
.ogbanner.ok{background:rgba(53,243,154,.1);border:1px solid rgba(53,243,154,.3);color:#9ff0c2}
.ogbanner.warn{background:rgba(255,76,102,.12);border:1px solid rgba(255,76,102,.4);color:#ffc9d0}
.ogstat{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:4px}
.ogstat .c{background:rgba(7,18,30,.6);border:1px solid rgba(120,180,230,.16);border-radius:9px;padding:10px 6px;text-align:center}
.ogstat .c .v{font-family:var(--font-num);font-size:20px;font-weight:800;line-height:1;color:#eafdff}
.ogstat .c .l{font-size:10.5px;color:#8fb9cc;margin-top:5px}
.ogsec{font-size:13px;font-weight:700;color:#cfe7f4;margin:18px 0 10px;display:flex;align-items:center;gap:8px}
.ogsec::before{content:"";width:3px;height:14px;border-radius:2px;background:var(--cyan)}
.ogsec .tag{margin-left:auto;font-size:10.5px;font-weight:400;color:#6e8ca6}
.ogsop .step{display:grid;grid-template-columns:26px 1fr;gap:10px;position:relative;padding-bottom:13px}
.ogsop .step:not(:last-child)::before{content:"";position:absolute;left:12px;top:25px;bottom:-1px;width:2px;background:rgba(35,211,236,.25)}
.ogsop .step .n{width:24px;height:24px;border-radius:50%;background:rgba(35,211,236,.16);border:1px solid var(--cyan);color:#9fe9f7;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.ogsop .step .h{font-size:13px;color:#eafdff;font-weight:600}
.ogsop .step .d{font-size:11.5px;color:#8fb9cc;margin-top:2px;line-height:1.5}
.ogtl{display:flex;flex-direction:column;gap:8px}
.ogtl .row{border:1px solid rgba(120,180,230,.16);border-radius:9px;padding:10px 12px;background:rgba(7,18,30,.4)}
.ogtl .row.ok{border-left:3px solid #35f39a}.ogtl .row.doing{border-left:3px solid #ffc23d}.ogtl .row.off{border-left:3px solid #ff4c66}
.ogtl .row .top{display:flex;align-items:center;gap:8px;font-size:13px;color:#eafdff;font-weight:600}
.ogtl .row .top .st{margin-left:auto;font-size:11px;padding:2px 9px;border-radius:11px;font-weight:600}
.ogtl .st.ok{background:rgba(53,243,154,.15);color:#73e6a6}.ogtl .st.doing{background:rgba(255,200,91,.15);color:#ffd98a}.ogtl .st.off{background:rgba(255,76,102,.15);color:#ffc9d0}
.ogtl .row .flow{margin-top:7px;font-size:11.5px;color:#a7d9e8;line-height:1.7}
.ogtl .row .flow b{color:#d6f7ff;font-family:var(--font-num)}
.ogoff{display:flex;flex-direction:column;gap:6px}
.ogoff .row{display:grid;grid-template-columns:1fr auto;gap:3px 10px;border:1px solid rgba(255,76,102,.22);border-radius:8px;padding:8px 11px;background:rgba(255,76,102,.05)}
.ogoff .row .b{font-size:13px;color:#ffd0d8;font-weight:600}
.ogoff .row .m{font-size:11px;color:#9fb6c6;grid-column:1}
.ogoff .row .t{font-family:var(--font-num);font-size:12px;color:#ffc9d0;text-align:right;align-self:center}
.ogempty{text-align:center;color:#73e6a6;font-size:13px;padding:18px 8px;border:1px dashed rgba(53,243,154,.3);border-radius:10px;background:rgba(53,243,154,.05)}
.ogsrc{margin-top:18px;font-size:11px;color:#6e8ca6;line-height:1.7;border-top:1px solid rgba(120,180,230,.12);padding-top:10px}
.kpi.ogclick{cursor:pointer}
.kpi.ogclick:hover{border-color:var(--cyan)!important;box-shadow:inset 0 0 28px rgba(35,211,236,.14),0 0 30px rgba(0,0,0,.4)!important}
.kpi.ogclick::after{content:"详情›";position:absolute;right:8px;top:7px;font-size:9.5px;color:#6e8ca6;letter-spacing:.3px}
.kpi.ogclick{position:relative}
.uitip::after{content:"";position:absolute;left:16px;bottom:-5px;width:9px;height:9px;transform:rotate(45deg);
  background:rgba(8,17,28,.98);border-right:1px solid rgba(35,211,236,.5);border-bottom:1px solid rgba(35,211,236,.5)}
.uitip.below::after{bottom:auto;top:-5px;border:none;border-left:1px solid rgba(35,211,236,.5);border-top:1px solid rgba(35,211,236,.5)}