:root{
  --cyan:#22d3ee; --cyan-dim:rgba(34,211,238,.35); --amber:#fbbf24; --green:#34d399;
  --red:#f87171; --bg:#05080e; --panel:rgba(8,14,24,.82); --line:rgba(56,189,248,.25);
  --text:#dbeafe; --dim:#7dd3fc;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);
  font-family:"PingFang SC","Microsoft YaHei","Segoe UI",system-ui,sans-serif;color:var(--text);
  font-size:14px;user-select:none}
.hidden{display:none !important}
#gl{position:fixed;inset:0}
#gl canvas{display:block}

/* CSS2D 标签层 */
.dev-label{pointer-events:auto;cursor:pointer;background:var(--panel);border:1px solid var(--line);
  border-radius:6px;padding:3px 8px;font-size:11px;white-space:nowrap;backdrop-filter:blur(4px);
  box-shadow:0 0 12px rgba(34,211,238,.15);transition:border-color .2s, transform .2s, opacity .35s}
body.cine .dev-label{opacity:0 !important;pointer-events:none !important}
.dev-label:hover{border-color:var(--cyan);transform:scale(1.06)}
.dev-label .dl-name{color:var(--cyan);font-weight:600;letter-spacing:.5px}
.dev-label .dl-val{color:var(--text);opacity:.85;margin-left:6px;font-variant-numeric:tabular-nums}
.dev-label.alarm{border-color:var(--red);animation:blink 1s infinite}
@keyframes blink{50%{box-shadow:0 0 14px rgba(248,113,113,.7)}}

/* 启动画面 */
#boot{position:fixed;inset:0;z-index:100;background:radial-gradient(ellipse at 50% 40%,#0a1626,#030509);
  display:flex;align-items:center;justify-content:center;transition:opacity .8s}
#boot.fade{opacity:0;pointer-events:none}
.boot-inner{text-align:center}
.boot-logo{font-size:52px;font-weight:800;color:var(--cyan);letter-spacing:4px;text-shadow:0 0 30px var(--cyan-dim)}
.boot-logo span{color:#64748b;font-weight:300}
.boot-title{margin:10px 0 26px;color:var(--dim);letter-spacing:6px;font-size:14px}
.boot-bar{width:280px;height:3px;background:#0f2233;margin:0 auto;border-radius:2px;overflow:hidden}
#boot-fill{width:0%;height:100%;background:linear-gradient(90deg,var(--cyan),#818cf8);transition:width .3s}
#boot-msg{margin-top:12px;font-size:12px;color:#475569}

#ctxlost{position:fixed;inset:0;z-index:99;background:rgba(3,5,9,.9);display:flex;align-items:center;justify-content:center}
.ctx-inner{color:var(--amber);font-size:18px;letter-spacing:2px}

/* 告警 */
#alarms{position:fixed;top:10px;left:50%;transform:translateX(-50%);z-index:40;display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none}
.alarm-item{background:rgba(60,10,10,.85);border:1px solid var(--red);color:#fecaca;border-radius:6px;
  padding:5px 16px;font-size:12px;animation:blink 1.2s infinite;backdrop-filter:blur(4px)}

/* HUD */
#hud{position:fixed;top:14px;left:88px;z-index:30;background:var(--panel);border:1px solid var(--line);
  border-radius:10px;padding:10px 14px;min-width:230px;backdrop-filter:blur(8px)}
.hud-title{font-size:12px;color:var(--dim);letter-spacing:2px;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}
.dot.paused{background:var(--amber);box-shadow:0 0 8px var(--amber)}
.dot.estop{background:var(--red);box-shadow:0 0 8px var(--red)}
#hud-kpis{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px}
.kpi{display:flex;justify-content:space-between;font-size:12px;gap:8px}
.kpi span{color:#94a3b8;white-space:nowrap}
.kpi b{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.kpi b.pos{color:var(--green)} .kpi b.neg{color:var(--amber)} .kpi b.cyan{color:var(--cyan)}

/* 右上状态 */
#status{position:fixed;top:14px;right:14px;z-index:30;background:var(--panel);border:1px solid var(--line);
  border-radius:10px;padding:8px 14px;backdrop-filter:blur(8px);font-size:12px;min-width:110px}
.st-row{display:flex;justify-content:space-between;gap:12px;padding:1px 0}
.st-row span{color:#64748b} .st-row b{color:var(--cyan);font-weight:600}

/* 时钟 */
#clockbox{position:fixed;right:14px;bottom:14px;z-index:30;background:var(--panel);border:1px solid var(--line);
  border-radius:10px;padding:8px 16px;backdrop-filter:blur(8px);text-align:center}
#sim-clock{font-size:22px;font-weight:700;color:var(--cyan);font-variant-numeric:tabular-nums;letter-spacing:2px}
#day-bar{position:relative;width:150px;height:4px;background:#0f2233;border-radius:2px;margin:6px 0 4px;overflow:visible}
#day-fill{height:100%;width:30%;background:linear-gradient(90deg,#1e3a8a,var(--amber),#1e3a8a);border-radius:2px}
#day-bar .sun{position:absolute;top:-7px;font-style:normal;font-size:10px;transform:translateX(-50%)}
#sim-speed{font-size:11px;color:#64748b}

#hint{position:fixed;left:74px;bottom:14px;z-index:30;font-size:11px;color:#475569;letter-spacing:1px}

/* SCADA 侧栏 */
#scada{position:fixed;left:10px;top:50%;transform:translateY(-50%);z-index:35;display:flex;flex-direction:column;gap:6px;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 8px;backdrop-filter:blur(8px)}
.scada-logo{font-size:10px;color:var(--dim);letter-spacing:2px;text-align:center;margin-bottom:4px}
.sc-btn{width:52px;height:48px;background:rgba(15,30,48,.6);border:1px solid rgba(56,189,248,.18);border-radius:8px;
  color:var(--text);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font-size:15px;transition:all .15s}
.sc-btn span{font-size:10px;color:#94a3b8}
.sc-btn:hover{border-color:var(--cyan);box-shadow:0 0 10px var(--cyan-dim)}
.sc-btn.on{border-color:var(--cyan);background:rgba(34,211,238,.12)}
.sc-btn.danger{border-color:rgba(248,113,113,.4);color:var(--red)}
.sc-btn.danger.active{background:rgba(248,113,113,.2);animation:blink 1s infinite}
.scada-views{display:flex;gap:4px;justify-content:center;margin-top:4px}
.vbtn{width:22px;height:22px;border-radius:5px;border:1px solid rgba(56,189,248,.18);background:transparent;
  color:#94a3b8;font-size:11px;cursor:pointer}
.vbtn.on{border-color:var(--cyan);color:var(--cyan)}

/* 设备面板 */
#panel{position:fixed;top:70px;right:14px;z-index:36;width:320px;max-height:calc(100% - 90px);overflow-y:auto;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;backdrop-filter:blur(10px)}
.panel-head{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:10px}
#panel-title{font-size:16px;font-weight:700;color:var(--cyan)}
#panel-sub{font-size:11px;color:#64748b;margin-top:2px}
#panel-close,#topo-close,#help-close{background:none;border:none;color:#64748b;font-size:16px;cursor:pointer}
#panel-close:hover,#topo-close:hover,#help-close:hover{color:var(--red)}
.tel-row{display:flex;justify-content:space-between;font-size:12px;padding:3px 0;border-bottom:1px dashed rgba(56,189,248,.08)}
.tel-row span{color:#94a3b8} .tel-row b{font-variant-numeric:tabular-nums;color:var(--text)}
.panel-sec{font-size:11px;color:var(--dim);letter-spacing:2px;margin:12px 0 8px}
.param-row{margin-bottom:10px}
.param-row label{display:flex;justify-content:space-between;font-size:12px;color:#94a3b8;margin-bottom:4px}
.param-row label b{color:var(--cyan);font-variant-numeric:tabular-nums}
.param-row input[type=range]{width:100%;height:4px;-webkit-appearance:none;background:#0f2233;border-radius:2px;outline:none}
.param-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;
  background:var(--cyan);box-shadow:0 0 8px var(--cyan-dim);cursor:pointer}
.toggle-row{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#94a3b8;padding:6px 0}
.tog{width:40px;height:20px;border-radius:10px;background:#1e293b;border:1px solid var(--line);cursor:pointer;position:relative;transition:background .2s}
.tog::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#64748b;transition:all .2s}
.tog.on{background:rgba(34,211,238,.25)} .tog.on::after{left:22px;background:var(--cyan)}

/* 拓扑 */
#topology{position:fixed;inset:0;z-index:45;background:rgba(3,6,12,.88);backdrop-filter:blur(6px);
  display:flex;flex-direction:column;padding:16px 24px}
.topo-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.topo-tabs{display:flex;gap:8px}
.topo-tab{background:rgba(15,30,48,.6);border:1px solid var(--line);color:#94a3b8;border-radius:8px;
  padding:8px 22px;font-size:14px;cursor:pointer}
.topo-tab.on{color:var(--cyan);border-color:var(--cyan);background:rgba(34,211,238,.1)}
#topo-svg{flex:1;width:100%;min-height:0}
.topo-node rect{fill:rgba(10,20,35,.9);stroke:rgba(56,189,248,.25);rx:10}
.topo-node text{fill:var(--text);font-size:14px;text-anchor:middle}
.topo-node .tn-val{fill:var(--cyan);font-size:12px;font-variant-numeric:tabular-nums}
.topo-node .tn-name{fill:#94a3b8;font-size:12px}
.topo-edge{fill:none;stroke-width:2.5;stroke-dasharray:8 6;animation:flow 1.2s linear infinite}
.topo-edge.rev{animation-direction:reverse}
.topo-edge.idle{stroke:#334155 !important;stroke-dasharray:3 6;animation:none;opacity:.5}
@keyframes flow{to{stroke-dashoffset:-14}}
.topo-elabel{fill:#e2e8f0;font-size:12px;font-variant-numeric:tabular-nums;text-anchor:middle}

/* 帮助 */
#help{position:fixed;inset:0;z-index:46;background:rgba(3,6,12,.85);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(6px)}
.help-inner{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:24px 30px;max-width:760px;width:92%}
.help-title{font-size:18px;color:var(--cyan);display:flex;justify-content:space-between;margin-bottom:14px}
.help-cols{display:flex;gap:30px;flex-wrap:wrap}
.help-cols h4{color:var(--dim);font-size:13px;margin-bottom:8px}
.help-cols p{font-size:12px;color:#94a3b8;margin-bottom:5px}
.help-cols b{color:var(--cyan);font-weight:600}
.help-url{margin-top:16px;font-size:11px;color:#64748b;line-height:1.9}
.help-url code{background:#0f2233;padding:1px 6px;border-radius:4px;color:var(--dim)}

/* 调试 */
#debug-info{position:fixed;left:74px;top:190px;z-index:30;background:rgba(0,0,0,.7);border:1px solid var(--line);
  border-radius:8px;padding:10px 14px;font-size:11px;font-family:monospace;color:#86efac;white-space:pre;line-height:1.7}

/* AI 调度日志 */
#ailog{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:30;width:480px;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 14px;backdrop-filter:blur(8px)}
.ai-head{font-size:11px;color:var(--dim);letter-spacing:2px;margin-bottom:4px;display:flex;align-items:center;gap:6px}
.ai-head::before{content:"◈";color:var(--cyan);animation:aipulse 2s infinite}
@keyframes aipulse{50%{opacity:.4}}
.ai-line{font-size:11px;padding:1.5px 0;color:#94a3b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-line.dispatch{color:#7dd3fc}
.ai-line.opt{color:#6ee7b7}
.ai-line.truck{color:#fcd34d}
.ai-badge{margin-left:auto;font-size:10px;color:var(--cyan);border:1px solid var(--cyan-dim);border-radius:4px;
  padding:1px 6px;letter-spacing:1px;animation:aipulse 2.4s infinite}

#toast{position:fixed;bottom:70px;left:50%;transform:translateX(-50%);z-index:60;background:var(--panel);
  border:1px solid var(--cyan);color:var(--cyan);border-radius:8px;padding:8px 20px;font-size:13px;
  opacity:0;transition:opacity .3s;pointer-events:none}
#toast.show{opacity:1}

body.shot-mode #hint{opacity:0}

@media (max-width:820px){
  #hud{left:64px;min-width:180px;padding:8px 10px}
  #hud-kpis{grid-template-columns:1fr}
  #hint{display:none}
  #ailog{display:none}
  #panel{width:calc(100% - 28px);top:auto;bottom:14px;max-height:55%}
  #status{display:none}
  .sc-btn{width:44px;height:42px}
}