:root{color-scheme:dark;--bg:#071521;--panel:#081924;--panel2:#0c202e;--line:rgba(129,196,209,.15);--dim:#70909d;--text:#dcecf0;--aqua:#48e0c2;--light:#b4ecfa;--orange:#e8a777}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);font:12px/1.4 'Inter','Segoe UI',Arial,sans-serif;color:var(--text)}button,input{font:inherit}.app{height:100%;display:grid;grid-template-columns:276px minmax(0,1fr) 294px;grid-template-rows:63px 1fr;background:#071521}.topbar{grid-column:1/4;grid-row:1;background:#071722;display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid #183747;z-index:10}.brand{display:flex;align-items:center;gap:11px;min-width:270px}.logo{width:39px;height:39px;border:1px solid #49d5c2;display:flex;align-items:center;justify-content:center;color:#e8fcf9;font-weight:900;font-size:17px;letter-spacing:-2px}.logo span{color:#49d5c2}.brand strong{font-size:14px;letter-spacing:2px;display:block}.brand strong span{color:#4bd4bd}.brand small{display:block;color:#5c8994;font-size:8px;letter-spacing:2.2px;margin-top:3px}.system-state{font:600 10px Consolas,monospace;color:#9fc8ce;display:flex;align-items:center;gap:9px;letter-spacing:.7px}.alive{width:8px;height:8px;border-radius:100%;background:#4cedc7;box-shadow:0 0 12px #48e0c2}.sep{width:1px;height:20px;background:#315060;margin:0 13px}.top-actions{display:flex;gap:7px}.utility-btn{background:#0d2330;border:1px solid #244150;color:#85abb7;min-height:31px;padding:0 11px;font-size:9px;letter-spacing:1px;cursor:pointer}.utility-btn:hover,.utility-btn.active{border-color:#51d4bd;color:#bdf8e9}.sidebar{min-height:0;background:#081a25;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#275060 transparent}.sidebar.left{grid-row:2;grid-column:1;padding:22px 18px;border-right:1px solid #244150}.sidebar.right{grid-row:2;grid-column:3;padding:20px 17px;border-left:1px solid #244150}.side-heading{display:flex;align-items:center;justify-content:space-between;color:#cee5e9;font-weight:700;font-size:10px;letter-spacing:1.4px;margin-bottom:17px}.side-heading span{color:#537683;font:9px Consolas,monospace;letter-spacing:0}.zones{display:flex;flex-direction:column;gap:6px}.zone{border:1px solid transparent;background:#0c2230;cursor:pointer;color:#9bb9c1;text-align:left;display:flex;gap:12px;align-items:center;width:100%;padding:11px 9px;transition:background .18s}.zone:hover{background:#163441}.zone.active{background:#14373e;border-color:#31756f;color:#edfff8}.zone-num{font:11px Consolas,monospace;color:#63cdb8;min-width:18px}.zone-text{font-size:10px;font-weight:700;letter-spacing:.8px;display:block}.zone-sub{font-size:9px;color:#648895;display:block;margin-top:2px;font-weight:400}.zone-icon{margin-left:auto;color:#4d8898;font-size:15px}.divider{height:1px;background:#173342;margin:22px 0}.control{margin:18px 0}.control-label{display:flex;justify-content:space-between;margin-bottom:12px;align-items:center}.control-label label{font-size:9px;letter-spacing:.9px;font-weight:700;color:#8babb4}.control-label b{font:11px Consolas,monospace;color:#6fe5d0}input[type=range]{width:100%;appearance:none;background:linear-gradient(90deg,#38c3ab,#284f60);height:3px;outline:none;cursor:pointer}input[type=range]::-webkit-slider-thumb{appearance:none;background:#cdfcf1;border:2px solid #3bd0b8;width:13px;height:13px;border-radius:50%}.switches{display:grid;gap:12px;margin:25px 0}.switches label{display:flex;gap:9px;align-items:center;font-size:9px;letter-spacing:.9px;color:#9bb6bc;cursor:pointer}.switches input{accent-color:#3fcab1}.danger,.reset{width:100%;height:37px;border:1px solid #8c4a46;background:#301c23;color:#f0a6a2;font-weight:700;letter-spacing:1.2px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:0 13px;margin-top:14px}.danger.armed{background:#8c3434;color:white}.reset{height:29px;display:block;border-color:#30505b;background:transparent;color:#87aab2;font-size:9px;margin-top:8px}.viewport{position:relative;grid-column:2;grid-row:2;overflow:hidden;background:#091b25}.viewport canvas#scene{display:block;width:100%;height:100%;cursor:grab;touch-action:none}.viewport canvas#scene:active{cursor:grabbing}.scene-corner{position:absolute;pointer-events:none}.top-left{top:31px;left:30px}.small-tag{font:9px Consolas,monospace;color:#68d7c6;letter-spacing:2px;border-left:2px solid #50cbb4;padding-left:9px}.top-left h1{font-size:29px;line-height:1.1;letter-spacing:2px;margin:14px 0 9px;font-weight:800;text-shadow:0 1px 8px #06141c}.top-left h1 em{font-style:normal;font-weight:300;color:#a4e7e0}.top-left p{font:10px Consolas,monospace;letter-spacing:.9px;color:#bdcbd0}.top-left p span{color:#61dbbc}.top-right{top:33px;right:27px;text-align:right}.compass{display:inline-flex;flex-direction:column;align-items:center;gap:2px;color:#9bc7cf;font:10px Consolas,monospace}.compass-face{border:1px solid #3a6775;border-radius:50%;width:44px;height:44px;display:flex;justify-content:center;align-items:center;font-size:28px;color:#61d9cb;background:#071e2b9b}.scale{color:#aec5cc;font:9px Consolas,monospace;margin-top:16px;letter-spacing:1px}.bottom-left{bottom:27px;left:29px}.legend{display:flex;gap:20px;margin-bottom:11px}.legend span{font:9px Consolas,monospace;color:#bcdbdf}.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px}.dot.blue{background:#2b90c7}.dot.aqua,.dot.live{background:#49d8bd}.dot.coral{background:#eea07a}.hint{font:9px Consolas,monospace;letter-spacing:.9px;color:#a0c0c5}.hint b{color:#4bbca8}.bottom-right{bottom:26px;right:26px;display:flex;flex-direction:column;gap:5px;text-align:right;color:#a1bdc5;font:9px Consolas,monospace}.kpi{background:#0b2330;border:1px solid #1c3948;padding:13px 12px;min-width:0}.kpi small{font-size:9px;color:#7297a4;letter-spacing:1.1px;display:block}.kpi strong{font:700 25px Consolas,monospace;display:block;margin:5px 0 0;color:#f0ffff;letter-spacing:-1px}.kpi>span{display:block;color:#75a4ac;font-size:10px;margin-top:1px}.main-kpi{background:linear-gradient(125deg,#0d383e,#0b2534);border-color:#286961;padding:17px;margin-bottom:9px}.main-kpi div{display:flex;align-items:baseline;gap:9px}.main-kpi strong{font-size:35px;color:#64e5cf}.main-kpi div span{font:12px Consolas,monospace;color:#bddedc}.main-kpi .kpi-sub{font:9px Consolas,monospace;color:#75dcbf;margin-top:8px}.kpi-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.chart-heading{margin-top:24px;margin-bottom:11px}.right canvas{width:100%;display:block;background:#071c29;border:1px solid #193544}.flows{margin-top:4px}.flow-line,.readout-row{display:flex;justify-content:space-between;align-items:center;margin:13px 0 6px;color:#88adb8;font-size:10px}.flow-line b{color:#e0eeef;font:10px Consolas,monospace}.meter{height:6px;background:#183645;overflow:hidden}.meter i{display:block;height:100%;background:#318eb6;width:0;transition:width .3s}.meter.fresh i{background:#47d0b6}.meter.brine i{background:#d98a67}.readout{border-top:1px solid #214351;margin-top:20px;padding-top:14px}.readout-top{display:flex;justify-content:space-between;color:#c0d9dd;font-size:10px;letter-spacing:.9px;font-weight:700}.readout-row{border-bottom:1px solid #102f3c;padding-bottom:6px;font-size:10px}.readout-row b{color:#75dcc6;font:11px Consolas,monospace}.footer-mark{color:#6bc2b3;font:10px Consolas,monospace;margin:21px 0 10px;letter-spacing:1px}.footer-mark span{color:#557581;display:block;font-size:8px;margin-top:5px}.inspection{position:absolute;right:26px;bottom:72px;width:260px;background:#09202beF;border:1px solid #4bb3a6;box-shadow:0 15px 45px #0008;padding:18px;z-index:3}.hidden{display:none!important}.inspection button{position:absolute;right:10px;top:8px;background:none;border:none;color:#b7ece5;cursor:pointer;font-size:24px}.eyebrow{font:9px Consolas,monospace;color:#46cbb0;letter-spacing:2px}.inspection h3{font-size:17px;margin:11px 0;color:#e1f9f5}.inspect-row{border-bottom:1px solid #24434c;padding:6px 0;display:flex;justify-content:space-between;color:#89adb5;font:10px Consolas,monospace}.inspect-row b{color:#e2f0f1}#rendererNotice{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:5;font:10px Consolas,monospace;color:#f5cf8b;background:#14232a;padding:6px 13px;display:none}dialog{background:#0b2330;color:#cee4e8;border:1px solid #488579;padding:28px;max-width:530px;line-height:1.8;box-shadow:0 20px 90px #000b}dialog::backdrop{background:#000b}.close-dialog{float:right;background:none;border:none;color:#eee;font-size:24px;cursor:pointer}dialog h2{letter-spacing:1px}dialog p{color:#9dbbc4}dialog kbd{border:1px solid #365963;padding:1px 5px}@media(max-width:1150px){.app{grid-template-columns:230px minmax(0,1fr) 248px}.sidebar.left{padding:18px 12px}.sidebar.right{padding:18px 12px}.brand{min-width:235px}.system-state{display:none}.top-left h1{font-size:22px}}@media(max-width:800px){.app{grid-template-columns:210px minmax(0,1fr);grid-template-rows:57px 1fr}.topbar{grid-column:1/3}.sidebar.right{display:none}.sidebar.left{grid-column:1}.viewport{grid-column:2}.top-left h1{font-size:18px}.top-left p{font-size:8px}.top-actions{gap:3px}.utility-btn{font-size:8px;padding:0 5px}}
@media(max-width:600px){.app{display:flex!important;flex-direction:column;height:auto!important;min-height:100dvh}.topbar{grid-column:auto!important;flex:none}.sidebar,.sidebar.left,.sidebar.right{grid-column:auto!important;grid-row:auto!important;width:auto!important;max-height:none!important;flex:none}.viewport{grid-column:auto!important;grid-row:auto!important;flex:none;height:60vh;min-height:320px;order:-1}.topbar{order:-2}}