:root{font-family:'DM Sans',Inter,Arial,sans-serif;color:#e6f3ef;background:#06131b;--bg:#081922e9;--line:#3454658a;--muted:#819ba5;--accent:#61d8d0;--gold:#ffca70;--error:#ff855f;--f:'Barlow Condensed',Impact,'Arial Narrow',sans-serif;--mono:'DM Mono',Consolas,monospace}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}button,input{font:inherit}button{color:inherit;cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}#viewport{position:fixed;inset:0;background:linear-gradient(#6a9aa7,#064358 52%,#052d3d)}#viewport>canvas{width:100%;height:100%;display:block}#vignette{position:fixed;inset:0;pointer-events:none;background:linear-gradient(90deg,#03101983,transparent 29%,transparent 75%,#03101992),linear-gradient(0deg,#0610199d,transparent 26%);z-index:1}#depth-lines{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.15;background:repeating-linear-gradient(0deg,transparent,transparent 43px,#82f7e416 44px)}
.topbar{z-index:4;position:fixed;top:0;left:0;right:0;height:80px;background:linear-gradient(180deg,#081720f7,#081720e6);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:0 28px;gap:26px;box-shadow:0 13px 35px #08131b55}.brand{display:flex;gap:17px;align-items:center}.brandmark{width:46px;height:46px;border:1px solid #74bbb6;background:#17424a;display:grid;place-items:center;font:800 30px var(--f);letter-spacing:-5px;color:#eafffb}.brandmark span{color:#8bd9d1;margin-left:-4px}.brandtitle{font:700 22px var(--f);letter-spacing:2px;line-height:1.1}.brandtitle span{color:#6cd1cc}.brandsub{font:10px var(--mono);letter-spacing:1.1px;color:#91acb3;padding-top:5px}.dot{font-size:9px;color:#5aded5;margin:0 8px}.top-status{display:flex;align-items:center;gap:31px}.top-stat small{display:block;color:#88a0a8;font:10px var(--mono);letter-spacing:1px;margin-bottom:6px}.top-stat b{font:500 13px var(--mono);white-space:nowrap}.tint{color:var(--accent)!important}.led,.pulsedot{display:inline-block;width:7px;height:7px;background:#69e2b4;border-radius:50%;box-shadow:0 0 10px #4fd6a6;margin-right:7px}#hud-toggle{background:#152e37;border:1px solid #426773;padding:11px 12px;font:600 10px var(--mono);letter-spacing:1px}
.rail,.insights{position:fixed;top:93px;bottom:91px;width:326px;z-index:3;background:var(--bg);border:1px solid #3457659e;box-shadow:0 30px 70px #00131b7a;backdrop-filter:blur(19px);overflow:auto;scrollbar-width:thin;scrollbar-color:#395e68 transparent}.rail{left:15px}.insights{right:15px;width:322px}.panel-heading{height:76px;display:flex;justify-content:space-between;align-items:center;padding:19px 19px 16px;border-bottom:1px solid var(--line)}.panel-heading small{font:10px var(--mono);color:var(--accent);letter-spacing:1.25px}.panel-heading h2{font:600 24px var(--f);margin:2px 0 0;letter-spacing:.5px}.panel-id{font:9px var(--mono);color:#66808b;align-self:start;margin-top:2px}.tabbar{display:flex;margin:0 19px 4px;border-bottom:1px solid #34515a}.tabbar button{flex:1;border:0;background:transparent;padding:16px 7px 14px;color:#7899a2;font:500 11px var(--mono);letter-spacing:.4px;border-bottom:2px solid transparent}.tabbar button.selected{border-bottom-color:var(--accent);color:#cffff9}.tab-pane{padding:5px 19px 20px}.tab-pane.hidden,.hidden{display:none!important}.section-head{display:flex;justify-content:space-between;align-items:center;color:var(--accent);font:600 10px var(--mono);letter-spacing:.35px;margin:21px 0 17px}.section-head>span:last-child{font:9px var(--mono);color:#829eaa}.section-head .small-chip{background:#153d42;color:#a9ece2!important;padding:4px 6px}.control{margin:0 0 20px}.control label{display:flex;align-items:center;justify-content:space-between;color:#b7cbd1;font:500 12px var(--f);letter-spacing:.4px}.control output{color:#e1eecb;font:13px var(--mono)}input[type=range]{appearance:none;width:100%;height:3px;border:0;border-radius:0;background:linear-gradient(90deg,#57d0c9 0,#57d0c9 53%,#3c5359 53%);margin:15px 0 6px;cursor:pointer}input[type=range]::-webkit-slider-thumb{appearance:none;height:12px;width:12px;border:3px solid #d9fcf0;background:#3c817e;transform:rotate(45deg)}.range-ends{display:flex;justify-content:space-between;font:9px var(--mono);color:#718c98}.switch-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0 12px;border-bottom:1px solid #2e47516a}.switch-row b{display:block;font:600 12px var(--f);letter-spacing:.5px}.switch-row small{display:block;color:#7f9da5;font-size:10px;margin-top:4px}.switch-row input{appearance:none;background:#253b44;border:1px solid #567481;border-radius:20px;height:18px;width:34px;position:relative;flex-shrink:0;cursor:pointer}.switch-row input:after{content:'';position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:100%;background:#66848e;transition:transform .2s}.switch-row input:checked{background:#237b78;border-color:#4de8d5}.switch-row input:checked:after{background:#d7fff6;transform:translateX(15px)}.btnrow{display:flex;gap:7px;margin-top:22px}.btnrow button{border:1px solid #416a73;padding:13px 10px;font:600 11px var(--mono)}.btnrow .primary{background:#80dbd1;color:#07242b;flex:1;border-color:#80dbd1}.btnrow .ghost{width:44px;background:#172e39}.repair-steps{display:flex;flex-direction:column;gap:8px}.repair-steps button{display:flex;align-items:center;gap:11px;text-align:left;border:1px solid #365763;background:#112833;padding:12px 10px;font:21px var(--f);color:#a8dbd6}.repair-steps button:hover{border-color:#69cfc7;background:#1b3944}.repair-steps button>span{color:var(--accent);font:16px var(--f)}.repair-steps button>div{flex:1}.repair-steps b{display:block;color:#e1eee8;font:600 11px var(--mono)}.repair-steps small{display:block;color:#819ca5;font:10px var(--f);margin-top:5px}.operator-message,.note-box{margin-top:15px;color:#a2b9bd;font:11px/1.6 var(--mono);background:#1e3139;padding:12px;border-left:2px solid var(--accent)}.panel-foot{position:sticky;bottom:-1px;background:#0c212aff;border-top:1px solid #345765;padding:16px 19px;display:flex;justify-content:space-between;color:#84a8b3;font:9px var(--mono)}
.hero-metric{padding:22px 19px;border-bottom:1px solid var(--line)}.hero-metric>small{display:flex;justify-content:space-between;color:#91aab1;font:10px var(--mono);letter-spacing:.7px}.hero-metric>small>span{color:var(--accent)}.hero-metric>div:nth-child(2){display:flex;align-items:baseline;gap:8px;margin:9px 0 15px}.hero-metric strong{font:600 51px var(--f);letter-spacing:.5px;line-height:1;color:#eaf8f1}.hero-metric span{font:13px var(--mono);color:var(--accent)}.hero-metric span small{color:#859da4;font:10px var(--mono)}.progress-track{background:#203842;height:5px;overflow:hidden}.progress-track div{height:100%;background:linear-gradient(90deg,#3bbbae,#a4e8ce);transition:width .4s}.metric-foot{display:flex;justify-content:space-between;margin-top:12px}.metric-foot span{font:9px var(--mono);color:#8faeb4}.metrics-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#28444c;border-bottom:1px solid var(--line)}.metric-box{background:#0c202a;padding:16px 16px 12px;min-height:114px}.metric-box>small{color:#8cabb1;font:9px var(--mono)}.metric-box>div{display:flex;align-items:baseline;gap:5px;margin:8px 0 4px}.metric-box strong{font:500 29px var(--f)}.metric-box span{font:12px var(--mono);color:var(--accent)}.metric-box>small:last-child{font:8px var(--mono);letter-spacing:.2px;color:#5aaea6}.graph-head{display:flex;align-items:center;justify-content:space-between;padding:17px 17px 9px;font:600 10px var(--mono);color:#d3e3df}.graph-head b{color:#7babb0;font:9px var(--mono)}.graph-head b span{color:#5a8d95}.insights canvas{width:calc(100% - 28px);height:85px;margin:0 14px;border:1px solid #284550;display:block;background:#091b25}.insights #minimap{height:136px}.graph-foot,.maplegend{display:flex;justify-content:space-between;gap:4px;margin:6px 16px 13px;color:#6f949e;font:9px var(--mono)}.maplegend i{display:inline-block;height:6px;width:6px;border-radius:100%;vertical-align:middle}.telemetry-list{padding:4px 17px 14px}.telemetry-list>div{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid #29424a;color:#819ca6;font:9px var(--mono)}.telemetry-list strong{color:#e1ece6;font:11px var(--mono)}
#mode-name{position:fixed;top:112px;left:calc(50% - 112px);z-index:2;pointer-events:none;display:flex;align-items:center;gap:12px;text-shadow:0 2px 7px #091720;white-space:nowrap}.view-line{height:27px;width:2px;background:var(--accent);box-shadow:0 0 12px #55dbb7}.view-line+span{display:flex;flex-direction:column;gap:4px}#mode-name small{font:9px var(--mono);color:#b6dad9;letter-spacing:1px}#mode-name b{font:16px var(--f);letter-spacing:1.2px}.scene-crosshair{pointer-events:none;position:fixed;top:48%;left:50%;z-index:1;color:#affff3;opacity:.55;font:30px var(--mono);font-weight:100;text-shadow:0 1px 10px #002d3b}#object-pop{position:fixed;left:50%;bottom:106px;z-index:8;max-width:310px;background:#07232bec;border:1px solid #6bc5c4;padding:14px;font:12px/1.5 var(--mono);box-shadow:0 5px 25px #01171fae}.object-pop h3{margin:0 0 4px;font:19px var(--f)}.object-pop p{margin:0;color:#95b8ba}
.bottombar{position:fixed;z-index:4;bottom:0;left:0;right:0;min-height:78px;background:#081922ef;border-top:1px solid #33545d;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 24px}.cam-switch{display:flex;align-items:center;gap:21px}.cam-switch>small{font:10px var(--mono);color:#80a4aa}.cam-switch>div{display:flex;gap:4px}.cam-switch button{background:#142b36;border:1px solid #2e4a53;padding:13px 12px;font:10px var(--mono);white-space:nowrap;color:#adc4c8}.cam-switch button.selected{background:#2c6567;color:#e2fff6;border-color:#78d6ce}.sim-controls{display:flex;align-items:center;gap:8px}.sim-controls>button{border:1px solid #37545d;background:#1e4049;height:38px;min-width:43px;font:15px var(--mono)}.sim-controls>div{padding-left:11px;border-left:1px solid #355059;margin-left:8px}.sim-controls small{display:block;font:9px var(--mono);color:#83a2a8}.sim-controls b{display:block;font:13px var(--mono);padding-top:5px}.loadscreen{position:fixed;z-index:30;inset:0;background:#061b23;display:grid;place-items:center;transition:opacity .85s}.loadscreen.done{opacity:0;pointer-events:none}.load-inner{text-align:center}.load-emblem{font:800 75px var(--f);color:#81dfd7;letter-spacing:-11px}.load-inner h1{font:600 42px var(--f);letter-spacing:2px;margin:3px}.load-inner h1 span{color:#76d0c6}.load-inner p{font:11px var(--mono);color:#8dabae;letter-spacing:3px}.loadline{width:350px;height:3px;background:#1e4149;margin:30px auto 11px}.loadline span{display:block;height:100%;width:100%;background:#80dcd4}.load-inner>small{font:9px var(--mono);color:#6d929a}#toast{position:fixed;left:50%;bottom:101px;transform:translateX(-50%);z-index:14;background:#09252de9;border:1px solid #6abdb8;padding:12px 17px;color:#e9ffff;font:12px var(--mono);opacity:0;pointer-events:none;transition:opacity .3s}#toast.show{opacity:1}
body.compact .rail,body.compact .insights{display:none}@media(max-width:1280px){.top-stat:first-child{display:none}.cam-switch>small{display:none}.cam-switch button{padding:12px 8px}.rail{width:296px}.insights{width:293px}}@media(max-width:1010px){.top-stat{display:none}.insights{display:none}.rail{width:290px}.cam-switch button{padding:10px 7px;font-size:9px}.bottombar{gap:4px;padding:0 10px}.sim-controls>div{display:none}}@media(max-width:660px){.topbar{height:60px;padding:0 12px}.brandmark{width:38px;height:38px}.brandtitle{font-size:17px}.brandsub{font-size:7px}.rail{top:70px;bottom:67px;width:min(80%,300px);left:8px}.bottombar{min-height:64px;overflow:auto}.cam-switch{gap:0}.cam-switch>div{min-width:max-content}.cam-switch button{padding:8px 7px}.sim-controls{position:fixed;right:10px;top:71px}#mode-name{display:none}}