:root{--bg:#060a11;--panel:#0b1320;--card:#0e1828;--line:#1c2c44;--txt:#e8f0ff;--mut:#8ea5c7;--blue:#4aa3ff;--cyan:#2dd4bf;--warn:#ffc857;--bad:#ff5d73}
*{box-sizing:border-box}html,body{height:100%}
body{margin:0;background:radial-gradient(1000px 700px at 18% 0%,#12233c,#05080e 70%);color:var(--txt);font:13px/1.45 "Segoe UI",system-ui,sans-serif;overflow:hidden}
#app{height:100vh;display:flex;flex-direction:column}
header{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid var(--line);background:rgba(5,9,15,.82);backdrop-filter:blur(10px);z-index:5}
.brand{display:flex;gap:10px;align-items:center}.brand b{font-size:15px;letter-spacing:.3px}.brand small{display:block;color:var(--mut);font-size:11px;margin-top:1px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--cyan);box-shadow:0 0 14px var(--cyan)}
.status{display:flex;gap:8px;align-items:center}
.mode-link{color:#cfe6ff;text-decoration:none;font-size:11px;border:1px solid #2c4d70;background:linear-gradient(180deg,#10243b,#0a1726);padding:5px 10px;border-radius:999px;white-space:nowrap}
.mode-link:hover{border-color:var(--cyan);color:#fff;box-shadow:0 0 16px rgba(45,212,191,.18)}
.pill{padding:4px 9px;border-radius:999px;border:1px solid var(--line);background:#0a1322;color:var(--mut);font-size:11px}.pill.ok{color:var(--cyan);border-color:rgba(45,212,191,.35);background:rgba(45,212,191,.07)}.pill.warn{color:var(--warn);border-color:rgba(255,200,87,.4);background:rgba(255,200,87,.08)}.pill.bad{color:var(--bad);border-color:rgba(255,93,115,.4);background:rgba(255,93,115,.08)}
main{flex:1;display:grid;grid-template-columns:250px 1fr 340px;min-height:0}
aside{background:linear-gradient(180deg,#0a1220,#070c15);overflow:auto;padding:10px;display:flex;flex-direction:column;gap:10px;border-right:1px solid var(--line)}
aside.right{border-right:0;border-left:1px solid var(--line)}
.card{border:1px solid var(--line);border-radius:11px;background:linear-gradient(180deg,#0f1a2c,#0b1322);padding:10px}
.card-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;color:#dbe7fb;font-size:12px}
.mono{font-family:Consolas,monospace;color:var(--mut);font-size:10px}
.stage{position:relative;min-width:0;background:radial-gradient(700px 500px at 50% 40%,#12233c,#05080e 72%)}
#viewport{position:absolute;inset:0}
#viewport canvas{display:block;width:100%;height:100%}
.hud{position:absolute;border:1px solid var(--line);background:rgba(6,11,19,.76);border-radius:9px;padding:7px 10px;backdrop-filter:blur(5px);pointer-events:none}
.hud .k{display:block;color:var(--mut);font-size:10px;letter-spacing:.5px}.hud b{font-size:12px}
.top-left{top:12px;left:12px}.top-right{top:12px;right:12px;text-align:right}
.bottom{position:absolute;left:12px;right:12px;bottom:12px;display:flex;gap:8px;align-items:center;border:1px solid var(--line);border-radius:11px;background:rgba(6,11,19,.82);padding:8px 10px;backdrop-filter:blur(8px)}
.explode{display:flex;align-items:center;gap:8px;flex:1;color:var(--mut);font-size:11px}.explode input{flex:1;accent-color:var(--blue)}.explode b{color:var(--blue);font-family:Consolas,monospace;width:38px;text-align:right}
button{border:1px solid #263a5c;background:#12203a;color:#dbe7fb;border-radius:7px;padding:6px 9px;font-size:11px;cursor:pointer;white-space:nowrap}
button:hover{border-color:var(--blue);color:#fff}button.primary{background:#174a5c;border-color:#2dd4bf;color:#d9fffa}
button.on{background:rgba(74,163,255,.16);border-color:var(--blue);color:#fff}
.tree{display:flex;flex-direction:column;gap:3px;max-height:300px;overflow:auto}
.node{padding:5px 7px;border-radius:6px;border:1px solid transparent;color:#a9bddb;font-size:11px;cursor:pointer;display:flex;justify-content:space-between;gap:6px}
.node:hover{border-color:#263a5c;background:#0b1626;color:#fff}.node.active{border-color:var(--blue);background:rgba(74,163,255,.1);color:#fff}
.btns{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.guide{color:#a9bddb;font-size:11px;line-height:1.6}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.kpi{border:1px solid var(--line);border-radius:8px;background:#0a1423;padding:7px 8px}.kpi span{display:block;color:var(--mut);font-size:10px}.kpi b{font-size:18px;font-weight:700}.kpi em{font-style:normal;color:var(--mut);font-size:10px;margin-left:3px}
.gasrow{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:5px;margin-bottom:8px}.gasrow button.active{border-color:var(--cyan);color:#d9fffa;background:rgba(45,212,191,.1)}
.phasebar{height:6px;background:#0a1423;border:1px solid var(--line);border-radius:99px;overflow:hidden;margin:7px 0}.phasebar div{height:100%;width:0;background:linear-gradient(90deg,#2dd4bf,#4aa3ff);transition:width .5s}
.statline{display:flex;justify-content:space-between;padding:4px 0;border-top:1px dashed #1a2a42;color:var(--mut);font-size:11px}.statline b{color:#e4edff;font-family:Consolas,monospace}
.alertbox{margin-top:6px;border-left:3px solid var(--cyan);padding:7px 8px;background:#0a1423;border-radius:6px;color:#bcd2ef;font-size:11px}
.ctrl{display:flex;align-items:center;gap:7px;padding:5px 0;border-bottom:1px dashed #1a2a42;color:var(--mut);font-size:11px}.ctrl label{width:74px;flex:none}.ctrl button{flex:1}.ctrl input[type=range]{flex:1;accent-color:var(--blue)}.ctrl b{font-family:Consolas,monospace;color:#e4edff;font-size:11px}
#trend{width:100%;height:110px;display:block}
.ifaces{display:flex;flex-wrap:wrap;gap:4px}.ifaces span{font-size:10px;color:#bcd2ef;border:1px solid var(--line);background:#0a1423;border-radius:99px;padding:3px 6px}
.hint{margin-top:6px;color:var(--mut);font-size:10px;line-height:1.5}
#camPanel{left:12px;bottom:64px;padding:7px;pointer-events:auto;width:292px}
.cam-title{display:flex;justify-content:space-between;color:#bcd2ef;font-size:10px;margin-bottom:4px}.live{color:var(--bad);font-family:Consolas,monospace;font-size:9px}
#cam{width:276px;height:154px;border-radius:6px;background:#03070d;border:1px solid #1a2a42;display:block}
.cam-note{color:var(--mut);font-size:9px;margin-top:3px;text-align:center}
.pipe-legend{position:absolute;right:12px;bottom:64px;display:flex;gap:9px;align-items:center;padding:6px 9px;border:1px solid var(--line);border-radius:8px;background:rgba(6,11,19,.82);color:var(--mut);font-size:10px;backdrop-filter:blur(6px)}
.pipe-legend span{display:flex;align-items:center;gap:4px;white-space:nowrap}
.pl{width:14px;height:3px;border-radius:2px;display:inline-block;box-shadow:0 0 6px currentColor}
.pl.gas{background:#4aa3ff;color:#4aa3ff}.pl.liquid{background:#2dd4bf;color:#2dd4bf}.pl.cooling{background:#ffc857;color:#ffc857}
.stage-rail{position:absolute;left:50%;transform:translateX(-50%);bottom:64px;padding:5px 12px;border:1px solid var(--line);border-radius:99px;background:rgba(6,11,19,.78);color:#8ea5c7;font-size:10px;white-space:nowrap;pointer-events:none}
#toast{position:fixed;left:50%;top:70px;transform:translateX(-50%);background:rgba(8,16,28,.94);border:1px solid var(--blue);color:#e8f0ff;padding:7px 14px;border-radius:8px;font-size:12px;opacity:0;pointer-events:none;transition:opacity .25s;z-index:20}
@media(max-width:1400px){.stage-rail{display:none}}@media(max-width:1200px){main{grid-template-columns:210px 1fr 300px}#camPanel,.pipe-legend{display:none}}