:root{--bg:#07121b;--panel:#0c1d28;--panel2:#102531;--ink:#e9f4f7;--muted:#7897a8;--line:#27404e;--cyan:#5ce0d3;--blue:#60c8e9;--orange:#f5b36e;--danger:#ec806b;--header:68px;--footer:45px;color-scheme:dark}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink)}button,select,input{font:inherit}button{cursor:pointer}button:disabled{opacity:.4;cursor:not-allowed}#root{display:flex;flex-direction:column;height:100dvh;min-height:540px}#topbar{height:var(--header);min-height:var(--header);display:flex;align-items:center;padding:0 20px;gap:14px;border-bottom:1px solid #264551;background:linear-gradient(90deg,#0b1d2a,#102633 61%,#0b202b);z-index:6}.brandmark{display:flex;align-items:center}.brand{display:flex;flex-direction:column;line-height:1.05;gap:4px}.brand strong{font-weight:850;font-size:19px;letter-spacing:1.9px}.brand em{font-style:normal;color:var(--cyan)}.eyebrow{color:#8cb4c4;font-weight:700;font-size:8.5px;letter-spacing:2px}.eyebrow b{color:#e3c994}.header-sep{width:1px;background:#30515e;height:34px;margin-left:25px}.project-name{font-size:12px;font-weight:650;letter-spacing:.1px;color:#deedf1;line-height:1.4}.project-name span{display:block;font-size:10px;font-weight:400;color:#8fa9b7}.header-right{margin-left:auto;display:flex;align-items:center;gap:20px}.pulse{font-size:10px;color:#8cdbb8;white-space:nowrap;letter-spacing:1.2px;font-weight:700}.pulse i{display:inline-block;width:7px;height:7px;background:#58d8a0;border-radius:50%;box-shadow:0 0 12px #43d3a6;margin-right:7px}#hud-clock{font-variant-numeric:tabular-nums;font-size:13px;letter-spacing:1px;font-weight:750}.ghost{border:1px solid var(--line);border-radius:4px;background:#16313e;color:#d1e8ed;padding:9px 11px;font-size:11px}
#stage{display:grid;grid-template-columns:275px minmax(300px,1fr) 305px;min-height:0;flex:1}.panel{background:linear-gradient(180deg,#0d202b,#0a1b25);min-width:0;border-right:1px solid #2b4550;overflow:auto;scrollbar-width:thin;scrollbar-color:#365565 transparent}#right-panel{border-left:1px solid #2b4550;border-right:0}.panel-section{padding:17px 17px 19px;border-bottom:1px solid #273d49}.section-heading{display:flex;justify-content:space-between;align-items:center;color:#d7e8ef;letter-spacing:1.35px;font-size:10px;font-weight:800;margin-bottom:16px}.micro{font-size:8px;color:#6c9da9;letter-spacing:.7px;font-weight:700}.alert-micro{color:#e4b88c}.level-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:15px}.level-card{border:1px solid #285565;background:linear-gradient(160deg,#133444,#0d2532);padding:11px 10px;min-width:0}.level-card.basin{border-color:#375462;background:linear-gradient(160deg,#1b3440,#0f2731)}.level-card span{font-size:8px;letter-spacing:1px;color:#a0bfc9}.level-card strong{display:block;font-size:25px;letter-spacing:-1.3px;font-weight:750;font-variant-numeric:tabular-nums;color:#65dbec;padding:7px 0 4px}.level-card.basin strong{color:#80dfbd}.level-card small{font-size:13px}.level-card i{font-style:normal;font-size:7px;color:#7996a4;letter-spacing:.5px}.metric-row{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-top:1px solid #203644;color:#91aab7;font-size:11px}.metric-row strong{font-size:11px;font-variant-numeric:tabular-nums;color:#d4ebef;font-weight:650}.toggle-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:19px;gap:8px}.toggle-row.second{margin:20px 0 12px}.toggle-row strong,.toggle-row span{display:block}.toggle-row strong{font-size:11px;font-weight:650}.toggle-row div>span{color:#7f9cab;font-size:9px;margin-top:5px}.toggle-row div>span b{color:#b8dfe0}.switch{position:relative;flex:0 0 37px;height:21px}.switch input{opacity:0;width:0;height:0}.switch span{position:absolute;inset:0;background:#2e4855;border-radius:20px;border:1px solid #43606d}.switch span:before{content:"";position:absolute;top:3px;left:3px;height:13px;width:13px;border-radius:50%;background:#c1d4d7;transition:transform .15s}.switch input:checked+span{background:#1e726f;border-color:#2ca6a2}.switch input:checked+span:before{transform:translateX(16px);background:#bffff0}.field-label{display:flex;justify-content:space-between;font-size:10px;color:#93b0bd;gap:5px}.field-label b{color:#b7d6dd;font-size:9px}.panel select{width:100%;height:34px;background:#132d3a;border:1px solid #335362;color:#d6e8ee;margin:8px 0 16px;padding:0 9px;border-radius:4px;font-size:10px}.slider-label{display:flex;justify-content:space-between;font-size:10px;color:#95afbd;margin:17px 0 12px}.slider-label b{font-size:10px;color:#caebe9;font-variant-numeric:tabular-nums}input[type=range]{width:100%;height:3px;appearance:none;background:linear-gradient(90deg,#4acdbf,#305a67);margin:2px 0 4px;border-radius:4px;cursor:pointer}input[type=range]::-webkit-slider-thumb{appearance:none;background:#acece1;border:2px solid #195464;width:13px;height:13px;border-radius:100%}.range-legends{display:flex;justify-content:space-between;color:#708e9c;font-size:8px;margin:4px 0 16px;letter-spacing:.6px}.primary{background:linear-gradient(90deg,#238a88,#246a75);border:1px solid #3dc9bf;border-radius:3px;color:#efffff;font-weight:800;font-size:9px;letter-spacing:1.2px;padding:12px}.wide{width:100%}.secondary{background:#153341;border:1px solid #365564;color:#c8e5eb;border-radius:3px;padding:11px 5px;font-size:10px;letter-spacing:.4px;font-weight:750}.double{display:grid;grid-template-columns:1fr 1fr;gap:7px}.pump-matrix{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}.pump{border:1px solid #28645d;border-radius:2px;padding:8px 1px;background:#133b3a;color:#9fdfc7;text-align:center;font-size:9px;font-weight:700}.pump.off{background:#3a2527;border-color:#81544d;color:#e2aca2}.pump:hover{filter:brightness(1.2)}
.viewport{position:relative;min-width:0;overflow:hidden;background:radial-gradient(ellipse at 40% 48%,#92c0c4 0%,#90b4c0 36%,#7598ad 65%,#506f89 100%)}#scene{position:absolute;width:100%;height:100%;display:block;touch-action:none}.horizon-vignette{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 140px #05152055}.corner{position:absolute;z-index:2;pointer-events:none}.top-left{top:24px;left:27px}.scene-subtitle{font-size:9px;font-weight:800;letter-spacing:2px;color:#d5faff;text-shadow:0 1px 5px #102c37}.scene-title{font-size:20px;font-weight:850;letter-spacing:1.1px;margin:7px 0;text-shadow:0 2px 10px #182b38}.scene-detail{color:#e6f4f3;font-size:10px;text-shadow:0 1px 6px #153844}.top-right{top:20px;right:19px;text-align:center}.compass{margin:0 auto 7px;border:1px solid #cde5e8aa;box-shadow:0 2px 10px #122e3540;border-radius:100%;height:42px;width:42px;color:white;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:9px;background:#142f3c77}.compass i{font-style:normal;color:#f3bb7f;font-size:13px;line-height:12px}.sky-caption{display:block;font-size:7px;color:#eef7f8;letter-spacing:1px;text-shadow:0 1px 4px #162d37}.scene-middle-bottom{position:absolute;bottom:70px;left:0;width:100%;display:flex;justify-content:center;z-index:2;pointer-events:none}.scene-navigation{display:flex;gap:3px;max-width:calc(100% - 20px);overflow:auto;padding:4px;background:#081b28b7;backdrop-filter:blur(10px);border:1px solid #6c959a55;border-radius:5px;pointer-events:auto}.camera-btn{background:transparent;color:#bad2d9;border:0;font-size:9px;letter-spacing:.7px;font-weight:700;padding:10px;white-space:nowrap;border-radius:3px}.camera-btn.selected{background:#286f73;color:white}.view-stats{position:absolute;left:18px;bottom:19px;background:#081924bb;padding:8px 10px;display:flex;align-items:center;gap:12px;border:1px solid #b8d5d555;font-size:9px;z-index:2;color:#cae8ef}.view-stats span{font-size:8px;letter-spacing:.7px}.view-stats i{color:var(--cyan)}.view-stats small{color:#a9bdc6;font-size:8px}.tooltip{position:absolute;z-index:7;background:#102b3ce8;border:1px solid #6ea9ae;color:#f0fcfa;padding:11px 13px;font-size:11px;pointer-events:none;border-radius:3px;box-shadow:0 9px 28px #05101d88;max-width:220px}#error-overlay{position:absolute;inset:25%;z-index:9;background:#10222fe8;border:2px solid var(--danger);padding:25px;color:white;overflow:auto}#error-overlay strong{color:var(--danger)}
.scenario-display{border:1px solid #355560;padding:12px 12px 11px;background:linear-gradient(120deg,#142f3d,#102935);position:relative;margin-bottom:12px}.scenario-display>span:first-child{display:block;font-size:8px;letter-spacing:1px;color:#759aab;margin-bottom:7px}.scenario-display>strong{font-size:13px;font-weight:720}.risk{font-size:9px;font-weight:800;letter-spacing:1px;display:block;margin-top:12px;color:#8cdfb6}.risk.warn{color:#f3ba72}.risk.critical{color:#ef867e}.scenario-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.scenario-btn{text-align:left;background:#102a36;color:#d5ebef;border:1px solid #34505e;border-radius:3px;padding:9px;min-height:69px}.scenario-btn b{font-size:9px;color:#71abc0;display:block;margin-bottom:7px}.scenario-btn strong{font-size:10px;letter-spacing:.4px;display:block}.scenario-btn small{display:block;font-size:9px;color:#7fa1b1;margin-top:4px}.scenario-btn.active{border-color:#51cab9;background:#164247}.scenario-btn.emergency strong{color:#f4c0a1}.scenario-btn:hover,.camera-btn:hover,.secondary:hover{filter:brightness(1.17)}.chart-section{padding-bottom:12px}.plot-legend{display:flex;gap:14px;color:#a7c4ce;font-size:9px;margin-bottom:6px}.plot-legend span{white-space:nowrap}.sea-dot,.basin-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px;background:#63d3ef}.basin-dot{background:#7fe0bd}#trend-chart{display:block;width:100%;height:144px}.chart-footer{display:flex;justify-content:space-between;font-size:8px;color:#728f9b;letter-spacing:.7px}#sector-map{width:100%;height:auto;border:1px solid #284857;background:#102732;display:block}.map-key{display:flex;gap:15px;margin-top:10px;font-size:8px;color:#94b0bc}.map-line{display:inline-block;background:#ecac6d;width:13px;height:2px;vertical-align:middle}.map-dot{display:inline-block;background:#69d0c8;width:6px;height:6px;vertical-align:middle;border-radius:100%}.inspect-detail{background:#102935;border:1px solid #284856;padding:12px;min-height:74px}.inspect-detail strong{font-size:10px;letter-spacing:.8px;display:block;color:#c9e5ea}.inspect-detail span{display:block;margin-top:8px;font-size:10px;color:#8cadba;line-height:1.5}.inspect-detail b{color:#82d8bd}.event-log{max-height:150px;overflow:auto;scrollbar-width:thin}.log-entry{font-size:9px;display:flex;gap:9px;align-items:flex-start;color:#acc4cc;line-height:1.5;padding:6px 0;border-bottom:1px solid #25414b}.log-entry i{color:#5cb5c4;font-size:8px;font-style:normal;min-width:40px}#footer{display:flex;align-items:center;justify-content:space-between;gap:10px;height:var(--footer);min-height:var(--footer);background:#081923;border-top:1px solid #34515e;padding:0 17px;color:#a1bfc9;font-size:9px;font-weight:700;letter-spacing:.5px}.little-square{display:inline-block;width:6px;height:6px;background:#65d8b4;box-shadow:0 0 8px #65d8b4;margin-right:4px}.status-left i{font-style:normal;color:#496874;padding:0 4px}.playback{display:flex;align-items:center;gap:4px}.playback button{background:#132f3a;color:#cae6ea;border:1px solid #375563;min-width:29px;padding:6px 7px;font-size:10px}.playback span{min-width:47px;text-align:center;font-variant-numeric:tabular-nums;font-size:11px;color:#8ce8d8}.footer-right b{color:#d9edf1;font-variant-numeric:tabular-nums}.modal{position:fixed;inset:0;z-index:20;background:#020a0ecb;display:grid;place-items:center;padding:20px}.modal[hidden]{display:none}.modal-card{position:relative;max-width:560px;max-height:90vh;overflow:auto;background:#122a36;border:1px solid #56818b;padding:28px 35px;box-shadow:0 30px 120px #000b}.modal-card h2{font-size:25px}.modal-card p{color:#a5c0c9;font-size:13px;line-height:1.65}.modal-card dl{display:grid;grid-template-columns:1fr 1fr;gap:10px;font-size:12px}.modal-card dt{color:#80dfd3;font-weight:650}.modal-card dd{margin:0;color:#c5dbe0}.modal-card .notice{font-size:11px;color:#f0bb91}.modal-close{float:right;background:none;border:0;color:#d8edef;font-size:29px}
@media(max-width:1250px){#stage{grid-template-columns:248px minmax(280px,1fr) 270px}.panel-section{padding:14px 12px}.header-sep{margin-left:10px}.view-stats small{display:none}.camera-btn{padding:9px 6px;font-size:8px}}
@media(max-width:920px){#stage{grid-template-columns:220px minmax(250px,1fr)}#right-panel{display:none}.project-name{display:none}#topbar{padding:0 12px}.header-right{gap:10px}.pulse{font-size:8px}.status-left{display:none}.footer-right{font-size:8px}}
@media(max-width:560px){#stage{grid-template-columns:minmax(0,1fr)}#left-panel{display:none}.brand strong{font-size:15px}.brandmark{display:none}.header-right .ghost{display:none}.scene-title{font-size:15px}.top-left{left:14px;top:14px}.top-right{display:none}.camera-btn{font-size:8px;padding:8px 5px}.view-stats{bottom:13px;font-size:8px}.footer-right{display:none}#footer{justify-content:center}}