:root{color-scheme:dark;--bg:#09151f;--pane:#0d202bd9;--line:#304c56a8;--muted:#7895a4;--text:#e4eef0;--mint:#68e3c7;--blue:#67c6ed;--amber:#e6b15f;--red:#ec7974;--shadow:0 12px 45px #0007}
*{box-sizing:border-box}body,html{width:100%;height:100%;margin:0;overflow:hidden;background:var(--bg);color:var(--text);font:12px/1.4 'Inter', 'Segoe UI',Arial,sans-serif;letter-spacing:.03em}
button,input,select{font:inherit}button{cursor:pointer;border:1px solid var(--line);color:var(--text);background:#21333e86;transition:.15s ease}button:hover{border-color:#71decc;color:white;background:#2d4951}button:active{transform:translateY(1px)}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #72ddc8;outline-offset:2px}
#viewport{position:fixed;inset:0;width:100vw;height:100vh;display:block;cursor:grab}#viewport:active{cursor:grabbing}#vignette{pointer-events:none;position:fixed;inset:0;background:linear-gradient(to bottom,#07131b42 0,transparent 22%,transparent 64%,#07131ca6 100%),linear-gradient(90deg,#0b16242f,transparent 35%,transparent 67%,#091a2185);opacity:.9}
.topbar{position:fixed;top:0;left:0;right:0;height:78px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;gap:22px;background:#091923e8;backdrop-filter:blur(18px);border-bottom:1px solid #3a69765c;z-index:5}.brand{display:flex;align-items:center;gap:12px;min-width:310px}.logo{width:47px;height:44px;border:1px solid #5ce1c887;display:grid;place-items:center;font-weight:900;font-size:20px;color:#e1fffa;letter-spacing:-.09em;border-radius:3px;background:linear-gradient(135deg,#1f776a44,#0a1925)}.logo span,.loading-mark span{color:var(--mint)}.brand-name{font-weight:750;letter-spacing:.18em;font-size:13px}.brand-sub{color:#95aeb7;letter-spacing:.12em;font-size:8px;margin-top:5px}.divider-dot{color:#70d8c6}.dot,.green-dot{color:var(--mint)}.top-center{display:flex;gap:42px;align-items:center}.top-stat label{font-size:9px;color:#87a1ad;letter-spacing:.1em;display:block}.top-stat strong{font-size:17px;font-variant-numeric:tabular-nums}.top-stat small{font-size:10px;font-weight:400;color:#9bb6c0}.top-actions{display:flex;align-items:center;gap:9px}.mode-pill{border:1px solid #4db29a7b;color:#a0f9d4;border-radius:3px;letter-spacing:.1em;font-size:9px;padding:12px 14px;background:#1744387d;white-space:nowrap}.mode-pill.alarm{border-color:#bb7770;color:#ffbf9f;background:#532b2d96}.signal{display:inline-block;width:7px;height:7px;background:var(--mint);border-radius:50%;box-shadow:0 0 12px #73ffce;margin-right:7px}.alarm .signal{background:var(--red)}.icon-button{height:37px;width:37px;font-size:19px;border-radius:3px}
.left-hud{position:fixed;left:22px;top:95px;bottom:138px;overflow-y:auto;width:312px;z-index:3;scrollbar-width:none}.left-hud::-webkit-scrollbar{display:none}.glass{background:linear-gradient(138deg,#102631e8,#0d202bdc);border:1px solid #41616d7b;box-shadow:var(--shadow);backdrop-filter:blur(20px);padding:17px 18px;margin-bottom:10px;border-radius:3px}.micro-label{font-size:9px;letter-spacing:.17em;color:#82b7bc;font-weight:750}.time-stack{padding-top:13px}.time-stack strong{font-size:30px;font-weight:650;letter-spacing:.055em;font-variant-numeric:tabular-nums}.time-stack small{display:block;color:var(--muted);font-size:9px;margin-top:2px;letter-spacing:.12em}.separator{height:1px;background:linear-gradient(90deg,#58798775,#58798711);margin:16px 0}.telemetry-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 11px}.telemetry span,.flow-row span{color:var(--muted);font-size:9px;letter-spacing:.075em}.telemetry strong{display:block;font-size:22px;font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap;margin-top:4px}.telemetry strong small{font-size:12px;color:#91adb8;font-weight:400}.mini{margin-top:8px;background:#304c56;height:3px;border-radius:3px}.mini>span{height:3px;display:block;border-radius:3px;width:34%;transition:width .4s}.blue-bar{background:#74ccea}.green-bar{background:var(--mint)}.flow-row{display:flex;justify-content:space-between;margin:10px 0}.flow-row b{font-size:11px;font-variant-numeric:tabular-nums}.risk-heading{display:flex;justify-content:space-between;font-size:9px;letter-spacing:.1em;color:#a9c0c6;font-weight:750}.risk-track{height:5px;background:#2c3d43;margin:11px 0 8px;overflow:hidden}.risk-track div{height:100%;width:12%;background:var(--mint);transition:width .4s,background .4s}.risk-footer{font-size:9px;color:#95b5ad;letter-spacing:.05em}.camera-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:12px}.view-button{padding:10px 4px;color:#93c7bd;font-size:10px;text-align:center}.view-button span{display:block;color:#c2d2d5;font-size:8px;letter-spacing:.09em;margin-top:4px}.view-button.chosen,.view-button:hover{background:#23655970;border-color:#48b99f}.toggle-line{display:flex;align-items:center;gap:9px;color:#bbced2;font-size:10px;margin:14px 0 0;cursor:pointer}.toggle-line input{display:none}.switch{width:29px;height:16px;border-radius:12px;background:#28424e;position:relative;border:1px solid #50717c;flex:none}.switch:after{content:'';position:absolute;width:10px;height:10px;top:2px;left:3px;border-radius:50%;background:#8199a1;transition:transform .2s}.toggle-line input:checked+.switch{background:#227867}.toggle-line input:checked+.switch:after{transform:translateX(12px);background:#baffee}.mini-right{float:right;color:#99abb2;letter-spacing:.06em}.minimap-hud canvas{width:100%;height:150px;margin-top:9px;background:#0d2630;border:1px solid #31515d}.map-legend{display:flex;justify-content:space-between;gap:5px;font-size:8px;color:#92a7b3;margin-top:6px}.map-legend span{white-space:nowrap}.map-legend i{display:inline-block;width:7px;height:7px;margin-right:4px}.map-sea{background:#2c869b}.map-basin{background:#477c84}.map-barrier{background:#edc37c}
.right-panel{position:fixed;right:0;top:78px;bottom:124px;width:351px;background:#0b1d28f2;border-left:1px solid #42616b85;z-index:4;box-shadow:-15px 0 50px #0006;backdrop-filter:blur(22px)}.panel-scroll{overflow-y:auto;height:100%;scrollbar-width:thin;scrollbar-color:#3b626c #122632}.panel-intro{padding:20px 19px 16px}.panel-intro h2{font-size:20px;letter-spacing:.01em;margin:9px 0 7px;font-weight:650}.panel-intro p{font-size:11px;line-height:1.55;color:#9ab0bb;margin:0}.control-section{border-top:1px solid #3e5a6485;padding:16px 19px 19px}.section-label{font-size:10px;color:#b7d4d3;letter-spacing:.105em;font-weight:700;margin-bottom:15px}.section-label span{display:inline-block;background:#224e52;color:#76ddcb;font-size:9px;padding:4px;margin-right:9px}.selected-gate{background:#18343c;display:flex;justify-content:space-between;align-items:center;padding:12px 13px;margin-bottom:16px;border:1px solid #49737c6d}.selected-gate small{display:block;color:#8cafb8;font-size:9px;letter-spacing:.08em}.selected-gate div div{font-size:16px;letter-spacing:.02em;font-weight:700;margin-top:4px}.tag{border:1px solid #57bc9d;color:#8cedcf;padding:5px 6px;font-size:9px}.tag.jammed{border-color:var(--red);color:#ff9691}.range-heading{display:flex;justify-content:space-between;align-items:center;margin:14px 0 7px;font-size:11px}.range-heading label{color:#a9c3cb}.range-heading strong{color:#e9fcf7;font-variant-numeric:tabular-nums}.range{display:block;width:100%;accent-color:var(--mint);height:12px;margin:0 0 13px;cursor:pointer}.three-actions,.two-actions{display:grid;gap:7px;grid-template-columns:repeat(3,1fr)}.two-actions{grid-template-columns:repeat(2,1fr);margin-top:7px}.button{font-size:9px;letter-spacing:.07em;padding:10px 4px;color:#bed1d5}.button.emphasized{border-color:#60bbad;color:#b2ffde;background:#155347}.small-desc{font-size:10px;color:#829da8;margin:11px 0}.input-row{display:flex;align-items:center;gap:8px;margin-top:11px}.input-row label{font-size:9px;color:#8eabb1;letter-spacing:.08em;flex:1}.input-row input,.input-row select{color:#dbf5f4;width:65px;height:29px;background:#142d37;border:1px solid #40606a;padding:5px}.input-row select{width:94px}.input-row button{font-size:9px;padding:8px 9px;color:#a8e9dc}.pump-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}.pump-stats div{border:1px solid #3d5b657a;padding:10px 2px;background:#18303a}.pump-stats small{display:block;font-size:8px;color:#8bb1b9}.pump-stats b{font-size:22px;display:block;margin-top:3px}.scenario-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}.scenario{display:grid;grid-template-columns:22px 1fr;align-items:center;text-align:left;padding:11px 9px;background:#17313a69}.scenario .sc-icon{grid-row:1/3;font-size:20px;color:#97b6b5}.scenario span:not(.sc-icon){font-size:10px;font-weight:650}.scenario small{font-size:9px;color:#849eac}.scenario.chosen{background:#1c5d527d;border-color:#65bca8}.scenario.chosen .sc-icon{color:#67e8c9}.warning-box{color:#bfb4a3;background:#49342136;border-left:2px solid #b18b59;padding:9px 11px;font-size:10px;line-height:1.5;margin-top:13px}.major{margin:0 0 16px}.foot-controls{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;padding:20px}.foot-controls button{font-size:9px}
.bottom-bar{position:fixed;bottom:0;left:0;right:0;z-index:5;height:124px;padding:14px 23px;background:#0b1923f2;backdrop-filter:blur(18px);border-top:1px solid #375962a8;display:flex;gap:35px;justify-content:space-between;align-items:center}.bottom-left{width:270px;flex:none}.current-condition{font-size:11px;letter-spacing:.13em;font-weight:750}.pulse-light{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;background:var(--mint);box-shadow:0 0 9px #68ffcc}.bottom-sub{font-size:9px;color:#94aab4;margin-top:13px;line-height:2}.bottom-sep{padding:0 6px;color:#446571}.chart-shell{width:min(41vw,660px);align-self:stretch}.chart-label{font-size:9px;color:#a9c0c9;letter-spacing:.1em;display:flex;justify-content:space-between}.chart-label span{font-size:8px;color:#79c6dd}.chart-label i{font-style:normal;color:#8d9a9c;margin-left:9px}.chart-shell canvas{width:100%;height:79px;margin-top:3px}.bottom-right{margin-left:auto;text-align:right;white-space:nowrap}.fineprint{color:#7894a0;font-size:8px;letter-spacing:.12em;margin-top:7px}.coordinates{font-size:13px;font-variant-numeric:tabular-nums;font-weight:650;margin:5px 0}.toast{position:fixed;top:94px;left:50%;transform:translateX(-50%) translateY(-15px);border:1px solid #56a397;background:#153c3fed;color:#d8fff5;padding:11px 18px;font-size:11px;opacity:0;transition:opacity .25s,transform .25s;z-index:12;pointer-events:none;box-shadow:var(--shadow)}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#loading{position:fixed;inset:0;background:radial-gradient(ellipse at center,#184452,#07121c 78%);z-index:30;display:grid;place-items:center;text-align:center;transition:opacity .6s}.loading-center{width:340px}.loading-mark{font-size:55px;letter-spacing:-.16em;font-weight:900;margin-bottom:24px}.eyebrow{font-size:10px;letter-spacing:.27em;color:#75c9c4}.loading-center h1{font-size:38px;letter-spacing:.17em;font-weight:600;margin:8px 0}.loading-center p{color:#8baab7;font-size:11px}.loader{margin:25px 0 10px;height:3px;background:#22404c}.loader>div{width:8%;height:100%;background:var(--mint);transition:width .25s}#loadStatus{color:#7396a0;font-size:10px}.help-dialog{width:min(570px,90vw);padding:28px;background:#102633;color:#d9ebee;border:1px solid #5b888e;box-shadow:0 30px 100px #000a}.help-dialog::backdrop{background:#02090edb}.help-dialog .help-head{display:flex;justify-content:space-between;align-items:center;font-size:18px}.help-dialog .help-head button{padding:7px 11px}.help-dialog h3{font-size:12px;color:#70d7bc;letter-spacing:.1em;margin-top:22px}.help-dialog p{line-height:1.7;font-size:12px;color:#b4ced1}
@media(max-width:1250px){.top-center{gap:15px}.right-panel{width:317px}.left-hud{width:268px}.bottom-left{width:200px}.bottom-bar{gap:12px}.chart-shell{width:36vw}}
@media(max-width:960px){.top-center{display:none}.left-hud{width:240px;left:10px;top:84px;bottom:113px}.right-panel{width:290px}.bottom-bar{height:102px}.bottom-right{display:none}.chart-shell{width:55vw}}
@media(max-width:720px){.topbar{padding:0 10px;height:66px}.brand{min-width:unset}.brand-name{font-size:10px}.brand-sub{font-size:7px;max-width:205px}.mode-pill{display:none}.left-hud{width:190px;left:7px;top:75px;bottom:90px}.glass{padding:11px}.time-stack strong{font-size:21px}.telemetry strong{font-size:16px}.camera-grid{grid-template-columns:repeat(2,1fr)}.minimap-hud{display:none}.right-panel{top:66px;bottom:90px;width:min(240px,53vw)}.panel-intro{padding:12px}.panel-intro h2{font-size:15px}.control-section{padding:12px}.bottom-bar{height:90px;padding:8px}.bottom-left{display:none}.chart-shell{width:100%}.chart-label i{display:none}}