
:root{color-scheme:dark;--bg:#06131b;--panel:rgba(6,22,33,.96);--panel2:#102836;--border:rgba(112,169,187,.19);--faint:#72929f;--ink:#e1eff1;--cyan:#57dfe1;--mint:#75edc0;--orange:#ffbe75;--red:#ff6d77;font-family:Inter,Segoe UI,Arial,sans-serif;font-size:12px}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--ink)}button,input{font:inherit}button{cursor:pointer}button:disabled{opacity:.35;cursor:not-allowed}#app{position:relative;width:100vw;height:100vh;min-height:500px}#world{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;background:linear-gradient(#587e94,#9bbbc3)}.topbar,.statbar,.control-dock,.viewbar,.right-column,.bottom-status,.selection{position:absolute;z-index:4}.topbar{height:70px;top:0;left:0;right:0;padding:0 23px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(180deg,#061720 3%,rgba(5,23,33,.92));border-bottom:1px solid var(--border);backdrop-filter:blur(16px)}.brand{display:flex;gap:12px;align-items:center}.brand-icon,.loader-mark{height:42px;width:42px;display:flex;align-items:center;justify-content:center;border:1px solid #63bfc2;color:#cdf5f4;font-weight:900;letter-spacing:-2px;font-size:16px;background:rgba(26,96,109,.21)}.brand-icon span,.loader-mark span{color:var(--cyan)}.brand b{font-size:17px;letter-spacing:2px;white-space:nowrap}.brand em{font-style:normal;color:var(--cyan)}.brand small{display:block;color:#86a5ad;font-size:9px;letter-spacing:1.5px;margin-top:4px}.top-middle{display:flex;gap:12px;align-items:center;color:#b3c8cb;font-size:10px;font-weight:700;letter-spacing:1.3px}.live-dot{height:7px;width:7px;background:#67e7a7;border-radius:100%;box-shadow:0 0 12px #2eff9e;animation:pulse 2s infinite}.thin-separator{height:16px;border-left:1px solid var(--border)}.top-actions{display:flex;gap:7px}.toolbtn,.icon-btn{background:#18303c;border:1px solid #335263;border-radius:4px;color:#cfdee3;padding:9px 13px;font-size:10px;font-weight:750;letter-spacing:1px}.toolbtn:hover,.icon-btn:hover{border-color:var(--cyan);color:var(--cyan)}.toolbtn.circle{border-radius:50%;width:33px;padding:9px}.statbar{left:0;right:0;top:70px;height:103px;padding:10px 350px 10px 344px;display:grid;grid-template-columns:repeat(5,minmax(115px,1fr));gap:7px;background:linear-gradient(180deg,rgba(8,27,37,.94),rgba(7,27,36,.52));border-bottom:1px solid rgba(110,162,183,.1);pointer-events:none}.stat{padding:12px 14px 6px;border-left:1px solid var(--border);overflow:hidden}.stat>span{font-size:9px;font-weight:700;color:#a7c2cb;letter-spacing:1.1px;white-space:nowrap}.stat>b{display:block;margin:6px 0 1px;font-size:25px;font-weight:680;letter-spacing:-.8px;white-space:nowrap}.stat>b small{font-size:11px;color:#acc7d0;font-weight:500}.stat>i{font-size:9px;font-style:normal;color:#70909d;letter-spacing:.9px}.accent-cyan{color:var(--cyan)!important}.risk-low{color:#84eac5}.risk-elevated{color:#ffe28e}.risk-severe{color:#ffa35c}.risk-critical{color:#ff6c75}.control-dock{top:70px;left:0;bottom:38px;width:326px;background:var(--panel);border-right:1px solid #315060;display:flex;flex-direction:column;box-shadow:10px 0 50px rgba(0,0,0,.14);backdrop-filter:blur(18px);transition:transform .25s}.control-dock.collapsed{transform:translateX(-286px)}.control-dock.collapsed .tab-panel,.control-dock.collapsed .tabs{visibility:hidden}.control-dock.collapsed .dock-header{flex-direction:row-reverse}.control-dock.collapsed .dock-header>div{display:none}.dock-header{height:99px;padding:22px 19px 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}.dock-header small{font-size:10px;letter-spacing:2px;color:var(--cyan);font-weight:700}.dock-header h2{margin:8px 0 0;font-size:24px;font-weight:550;letter-spacing:.1px}.icon-btn{font-size:18px;padding:4px 9px}.tabs{display:grid;grid-template-columns:repeat(4,1fr);height:43px;flex-shrink:0;border-bottom:1px solid var(--border)}.tabs button{background:none;color:#8ba9b4;border:0;letter-spacing:.7px;font-size:10px;font-weight:700}.tabs button.active{color:#89fcf0;border-bottom:2px solid var(--cyan);background:rgba(75,223,224,.07)}.tab-panel{padding:8px 18px 25px;display:none;overflow-y:auto;flex:1;scrollbar-color:#254858 transparent;scrollbar-width:thin}.tab-panel.active{display:block}.section-heading{display:flex;justify-content:space-between;align-items:center;margin:21px 0 12px;font-size:10px;color:#d1e0e7;font-weight:750;letter-spacing:1px}.section-heading strong{font-size:9px;color:#789ba9;font-weight:650;letter-spacing:.2px}.gate-schematic{padding:8px 0 4px}.gate-grid{display:grid;grid-template-columns:repeat(16,1fr);gap:3px;margin:9px 0}.gate-grid button{height:27px;min-width:0;background:#17374b;border:1px solid #27596d;border-radius:1px;padding:0;color:#83b5c8;font-size:8px}.gate-grid button.selected{background:#1b6e78;border-color:#89ebe6;color:white;box-shadow:0 0 8px rgba(80,220,200,.3)}.gate-grid button.unhealthy{border-color:#fc8e64;color:#ffb08c}.gate-line{height:5px;border-radius:2px;background:repeating-linear-gradient(90deg,#5b7782 0 5px,#254859 5px 9px);box-shadow:0 0 0 1px #2b414e}.gate-line.bottom{background:#1d5269}.selection-label{display:flex;justify-content:space-between;margin:13px 0 10px;color:#8eabb7;font-size:9px;font-weight:700;letter-spacing:1px}.selection-label strong{color:#ddf6f3}.range-row{display:flex;justify-content:space-between;margin:10px 0 8px;color:#bed1d8;font-size:11px}.range-row strong{color:#f0f9f9}input[type=range]{appearance:none;width:100%;height:5px;background:#274557;border-radius:10px;accent-color:var(--cyan);cursor:pointer;margin:7px 0 14px}input[type=range]::-webkit-slider-thumb{appearance:none;background:#84e1db;border:2px solid #142d3b;border-radius:50%;height:15px;width:15px;box-shadow:0 0 9px #3a998c}input[type=range]:disabled{opacity:.4;cursor:not-allowed}.dual-buttons{display:grid;grid-template-columns:1fr 1fr;gap:9px}.primary,.secondary{border-radius:3px;height:34px;border:1px solid #488f96;color:#c9f7f1;background:rgba(27,119,122,.25);font-size:10px;letter-spacing:1px;font-weight:750}.primary{background:#146c73;border-color:#2d9394;color:white}.secondary{background:#19323d;border-color:#32515c}.primary:hover,.secondary:hover{filter:brightness(1.3)}.slider-block{padding-bottom:5px}.slider-block .range-row{margin:11px 0 5px}.range-captions{display:flex;justify-content:space-between;color:#557787;font-size:9px;font-weight:700;letter-spacing:.7px}.switchrow{display:flex;align-items:center;justify-content:space-between;color:#b1c5cc;padding:9px 0}.switchrow input{accent-color:#64daba;width:18px;height:18px}.pump-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:10px 0}.pump{border:1px solid #34606b;background:rgba(35,85,93,.22);height:44px;color:#b8dfdb;font-size:10px;letter-spacing:.8px}.pump b{display:block;color:#79edc2;font-size:10px;margin-top:3px}.pump.off{border-color:#6e4448;color:#cd9a9c;background:#4c282c44}.pump.off b{color:#ef8790}.lock-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.lock{border:1px solid #36616f;color:#d0e8e8;background:#122f3d;padding:11px;text-align:left}.lock strong{display:block;font-size:11px}.lock small{display:block;font-size:9px;color:#86aebb;margin-top:5px}.health-list{display:grid;gap:8px}.health-row{padding:9px;background:#112a37;border-left:2px solid #44ba9e;color:#b8d1d6;display:flex;justify-content:space-between}.health-row.warn{border-color:#e9a169}.health-row b{color:#e9f4f1}.muted{font-size:11px;color:#96b0bb;line-height:1.65}.scenario-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.scenario-card{border:1px solid #2e5463;background:#102b37;text-align:left;min-height:70px;padding:10px;color:#dfedf0}.scenario-card:hover,.scenario-card.active{background:#16414b;border-color:#55bfc2}.scenario-card strong{display:block;font-size:11px;font-weight:700}.scenario-card small{display:block;margin-top:7px;color:#82a6b4;font-size:9px}.scenario-card.emergency{border-color:#6c5047}.incident{display:flex;gap:9px;align-items:flex-start;border-bottom:1px solid #243f4c;padding:12px 0;color:#cddcde}.incident em{width:7px;height:7px;background:#6ce3bb;border-radius:50%;margin-top:3px;flex-shrink:0}.incident.warning em{background:var(--orange)}.incident.critical em{background:var(--red)}.full{width:100%;margin-top:18px}.inventory{display:grid;grid-template-columns:1fr 1fr;gap:8px}.inventory>div{padding:12px;background:#15303e}.inventory b{display:block;font-size:21px;color:#d7f6f1}.inventory small{color:#89a7af;font-size:9px;letter-spacing:.6px}#map-image{display:block;width:100%;border:1px solid #41606f;cursor:crosshair}.dock-bottom{height:29px;flex-shrink:0;padding:8px 18px 5px;border-top:1px solid var(--border);display:flex;justify-content:space-between;letter-spacing:.8px;font-size:9px;color:#739ba8}.viewbar{top:192px;left:348px;display:flex;align-items:center;gap:3px;padding:7px;background:#061c29bf;border:1px solid #46707b60;backdrop-filter:blur(15px);flex-wrap:wrap;max-width:calc(100% - 740px)}.viewbar span{font-size:9px;letter-spacing:1.3px;margin:0 8px 0 5px;color:#90b6c3}.viewbar button{border:0;background:transparent;color:#a8c1c8;padding:8px 11px;font-size:9px;letter-spacing:.9px;font-weight:700}.viewbar button.chosen{background:#25768166;color:#b7fff2;border-bottom:2px solid #6de1d7}.viewbar button:hover{color:white}.right-column{right:18px;top:191px;width:315px;display:flex;flex-direction:column;gap:10px}.telemetry-card{padding:15px;background:rgba(6,22,33,.89);border:1px solid rgba(111,164,183,.27);backdrop-filter:blur(12px)}.card-heading{display:flex;justify-content:space-between;font-size:10px;letter-spacing:1px;font-weight:700;color:#daecef}.card-heading strong{color:#69dccb;font-size:9px}#history-chart{width:100%;height:132px;margin-top:11px}.legend{display:flex;gap:11px;color:#84a7b3;font-size:9px}.legend>span{display:flex;align-items:center;gap:4px}.legend>span:last-child{margin-left:auto}.legend i{width:14px;height:2px;display:inline-block}.legend-ocean{background:#5bdce1}.legend-inland{background:#e9bd87}.mini-metrics{display:grid;gap:10px;margin-top:15px}.mini-metrics span{font-size:9px;letter-spacing:1px;color:#779cac;display:flex;justify-content:space-between}.mini-metrics b{font-size:11px;color:#cfeced}.bottom-status{left:326px;right:0;bottom:0;height:38px;padding:0 18px;background:#061923ed;border-top:1px solid #2f5060;display:flex;align-items:center;justify-content:space-between;color:#92b1bb;font-size:9px;letter-spacing:1px;gap:10px;white-space:nowrap}.crosshair{color:#74e3d5;font-size:15px}.selection{right:20px;bottom:63px;width:310px;border:1px solid #468391;background:#071f2ae8;padding:16px 18px;backdrop-filter:blur(12px)}.selection>div{color:#65d7d1;font-size:10px;letter-spacing:1.4px;font-weight:700}.selection h3{font-size:17px;margin:10px 0}.selection p{color:#a0c0c7;line-height:1.5}.selection button{width:100%;background:#174954;border:1px solid #387780;color:#c7ede8;padding:10px;font-size:10px}.hidden{display:none!important}.modal{position:absolute;inset:0;background:#020d14be;z-index:12;display:grid;place-items:center;padding:20px;backdrop-filter:blur(12px)}.modal-box{position:relative;max-width:560px;background:#071e2c;border:1px solid #326270;padding:36px;box-shadow:0 20px 70px #0009}.modal-box h2{font-size:24px;letter-spacing:.8px}.modal-box p{font-size:13px;line-height:1.7;color:#b0c6d0}.modal-box button.primary{padding:0 20px;margin-top:12px}.modal-x{position:absolute;top:12px;right:16px;font-size:25px;background:transparent;color:#b8dde4;border:0}.eyebrow{color:#5fdcca;font-size:10px;letter-spacing:1.4px;font-weight:750}.loader{position:absolute;inset:0;z-index:20;background:radial-gradient(circle at 50% 50%,#123442,#05121d 65%);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.loader-mark{width:68px;height:68px;font-size:24px}.loader h1{font-size:19px;letter-spacing:3px;margin:22px 0 0}.loader p{font-size:11px;color:#9dbac6;letter-spacing:1px;margin-top:13px}.loader-line{height:2px;width:260px;background:#284754;margin-top:12px}.loader-line span{display:block;width:75%;height:100%;background:#73f5e5;animation:load 1.8s infinite alternate}.loader.error .loader-line{display:none}.loader.error p{color:#ffac8c;max-width:480px}@keyframes load{0%{width:10%}100%{width:97%}}@keyframes pulse{50%{opacity:.5;box-shadow:0 0 1px #2eff9e}}@media(max-width:1420px){.statbar{padding-right:340px;grid-template-columns:repeat(5,1fr)}.stat>b{font-size:20px}.viewbar{max-width:calc(100% - 710px)}.viewbar button{padding:6px}.statbar{padding-left:328px}.top-middle{display:none}}@media(max-width:1090px){.statbar{padding-right:4px;padding-left:330px}.right-column{top:auto;bottom:55px;width:240px}.right-column .compact{display:none}.viewbar{max-width:calc(100% - 350px)}.statbar .stat{padding:11px 5px}.stat>b{font-size:17px}.stat span{font-size:8px}}@media(max-width:780px){.topbar{padding:0 12px}.brand b{font-size:14px}.brand small{display:none}.top-actions .toolbtn:not(.circle){display:none}.statbar{top:70px;padding:0 5px;grid-template-columns:repeat(3,1fr);height:77px}.statbar .stat:nth-child(4),.statbar .stat:nth-child(5){display:none}.control-dock{top:148px;width:295px;bottom:28px}.control-dock.collapsed{transform:translateX(-255px)}.viewbar{left:46px;top:157px;right:10px;max-width:none}.viewbar button{font-size:8px}.viewbar span{display:none}.right-column{display:none}.bottom-status{left:0;bottom:0;height:28px;font-size:8px}.bottom-status span:not(:first-child){display:none}.selection{width:220px;right:8px;bottom:40px}.dock-header{height:72px}.loader h1{font-size:14px}}
