:root{color-scheme:dark;--bg:#051421;--panel:#071623ed;--stroke:#274556a6;--line:#234252;--muted:#8bafbd;--aqua:#70e5db;--ink:#e5f6fb;--orange:#efb77b;--purple:#acb5f4;font-family:Inter,'Segoe UI',Arial,sans-serif;font-size:12px}
*{box-sizing:border-box}html,body,#app{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--ink)}button,input{font:inherit}button{cursor:pointer;transition:background .18s,border-color .18s,color .18s}button:focus-visible,input:focus-visible{outline:2px solid var(--aqua);outline-offset:2px}button:hover{border-color:var(--aqua)!important}#viewport{position:absolute;inset:0;width:100%;height:100%;cursor:grab;display:block}#viewport:active{cursor:grabbing}.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 54% 46%,transparent 38%,#03132188 100%)}
.topbar{position:absolute;left:0;top:0;width:100%;height:74px;display:flex;align-items:center;justify-content:space-between;padding:0 25px;background:linear-gradient(#071624f9,#071624b8);border-bottom:1px solid var(--stroke);z-index:5;gap:16px}.brandmark{display:flex;gap:12px;align-items:center}.mark{font-size:34px;color:var(--aqua);line-height:1}.brand{font-size:19px;letter-spacing:3px;font-weight:800}.brand span{color:#69dacf;margin-left:6px}.eyebrow{color:#9ab6c4;font-weight:800;letter-spacing:1.6px;font-size:9px}.brandmark .eyebrow{margin-top:4px;font-size:8px}.eyebrow.aqua{color:#65d8db}.topstatus{display:flex;align-items:center;gap:12px;color:#d6e8ef;letter-spacing:1.1px;font-size:9px;font-weight:700}.live-dot{width:7px;height:7px;border-radius:50%;background:#4de2bc;box-shadow:0 0 12px #4de2bc;display:inline-block}.divider-v{width:1px;height:20px;background:var(--line)}.topactions{display:flex;gap:8px;align-items:center}.topactions button{background:#112a38bd;border:1px solid #315260;color:#d5e8ef;padding:10px 12px;border-radius:4px;font-weight:700;letter-spacing:1px;font-size:9px}.topactions .iconbtn{font-size:14px;width:33px;height:33px;padding:0}
.panel{position:absolute;top:88px;bottom:214px;background:var(--panel);border:1px solid var(--stroke);backdrop-filter:blur(14px);z-index:4;box-shadow:0 14px 48px #00101aa6;display:flex;flex-direction:column;min-height:380px}.leftpane{left:16px;width:284px}.rightpane{right:16px;width:285px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#305765 transparent}.panel-heading{padding:19px 18px 15px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.panel-heading h1,.panel-heading h2{font-size:18px;letter-spacing:-.3px;margin:6px 0 0;font-weight:690}.tiny-status,.signal{font-size:9px;letter-spacing:1px;color:#92b7c6;border:1px solid var(--line);padding:7px;display:flex;align-items:center;gap:8px}.tiny-status{color:var(--aqua)}.scroller{overflow-y:auto;padding:12px 16px 0;min-height:0;flex:1;scrollbar-width:thin;scrollbar-color:#2b5461 transparent}.section-title{color:#8ab6c5;display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:1.3px;font-weight:800;padding:18px 0 12px}.section-title .mini{color:#568999}.control{padding:0 0 15px}.control-label{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px;gap:8px}.control-label label{color:#c3d7df;font-size:11px}.control-label span{color:#77e5dc;font-weight:700;font-size:11px;white-space:nowrap}.control input[type=range]{width:100%;height:4px;accent-color:#72ddd4;cursor:pointer}.endcaps{display:flex;justify-content:space-between;color:#5b8593;font-size:9px;margin-top:4px}.preset-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.preset{padding:9px 5px;background:#0d2735;border:1px solid #2c4a56;color:#99b7c4;font-size:9px;letter-spacing:.8px;font-weight:700}.preset.active,.segbuttons .active,.chartmodes .active{background:#18505c;color:#8ef5e4;border-color:#58c1b8}.toggle-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:12px}.toggle-row label{font-size:10.5px;color:#bfd3db;line-height:1.4}.toggle-row input{accent-color:#65d8d0;width:16px;height:16px}.segbuttons{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.segbuttons button{padding:9px 2px;background:#0c2632;border:1px solid #2b4c5b;color:#92aebb;font-size:8px;font-weight:800;letter-spacing:.4px}.foot-control{padding-top:10px}.foot-actions{border-top:1px solid var(--line);padding:12px 14px;display:flex;gap:8px}.primary,.secondary{border:1px solid #4eb1b0;border-radius:3px;padding:12px 10px;font-size:10px;letter-spacing:1px;font-weight:800}.primary{flex:1;background:#2b9c9b;color:#061e29}.secondary{background:#0d2936;color:#a4d9d9;width:44px;font-size:18px}.primary:hover{background:#62d7c7}
.rightpane .panel-heading{padding:17px}.rightpane .section-title{padding:15px 17px 8px}.readout{padding:17px;border-bottom:1px solid var(--line)}.readout>span,.metric>span{font-size:9px;color:#83a7b6;letter-spacing:1px;font-weight:800}.readout.hero{background:linear-gradient(110deg,#06344299,#09202bcc)}.readout.hero>div:nth-child(2){display:flex;gap:9px;align-items:baseline;margin-top:11px}.hero strong{font-size:32px;color:#91f0e5;letter-spacing:-1.2px;font-variant-numeric:tabular-nums}.hero small{font-size:11px;color:#91afb9}.progress-track{height:5px;background:#26434a;overflow:hidden;margin-top:14px}.progress-track>div{height:100%;background:linear-gradient(90deg,#288baf,#69e7d2);transition:width .3s}.readout-foot{display:flex;justify-content:space-between;font-size:9px;color:#789ca9;margin-top:8px}.metrics{display:grid;grid-template-columns:1fr 1fr}.metric{padding:15px 12px;border-bottom:1px solid var(--line)}.metric:nth-child(odd){border-right:1px solid var(--line)}.metric>span{font-size:8px;display:block;min-height:23px}.metric strong{display:block;color:#e1f5f8;font-size:23px;margin-top:5px;font-weight:700;letter-spacing:-.6px;font-variant-numeric:tabular-nums}.metric small{display:block;color:#7397a5;margin-top:5px;font-size:9px}.balance{padding:0 17px}.balance-row{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #1b3542;padding:8px 0;font-size:10px;color:#b6d0d9}.balance-row strong{font-size:11px;color:#d9f3fa}.swatch{display:inline-block;width:7px;height:7px;margin-right:8px;border-radius:50%}.swatch-feed{background:#61bdf3}.swatch-product{background:#64e2ad}.swatch-brine{background:#eead61}.reservoir-wrap{display:flex;align-items:center;gap:13px;padding:4px 17px 13px}.storage-icon{font-size:40px;color:#48c7dc}.storage-data{flex:1}.storage-data strong{display:block;font-size:19px;color:#d6f4fa}.storage-data span{display:block;font-size:10px;color:#88aeba;margin-top:3px}.progress-track.thin{height:4px;margin-top:9px}.alerts{padding:0 17px 8px;display:grid;gap:5px}.alerts>span{font-size:10px;line-height:1.4;border:1px solid #385b64;padding:8px;background:#082734}.alerts .success{border-color:#2d6659;color:#76e0b8}.alerts .warn{border-color:#77573a;background:#3c2a1d88;color:#ffd29d}.inspector{padding:0 17px 15px}.inspector-empty{border:1px dashed #34535f;color:#83a6b4;font-size:10px;line-height:1.6;padding:13px}.inspector-title{font-size:12px;color:#a2f3ee;line-height:1.4;margin-bottom:9px}.inspector-kv{display:grid;grid-template-columns:1fr 1fr;gap:7px;font-size:9px;margin-bottom:7px}.inspector-kv span{color:#779eac}.inspector-kv strong{text-align:right;color:#d3e8ed;overflow:hidden;text-overflow:ellipsis}
.zonebar{position:absolute;bottom:203px;left:316px;right:317px;z-index:4;background:#071725d9;border:1px solid #285060;backdrop-filter:blur(12px);padding:9px 10px}.zonehead{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.5px;font-weight:800;color:#94c0cd;margin-bottom:8px}.zonehead span{font-size:8px;color:#5e8795}.zones{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}.zones button{min-height:39px;border:1px solid #285263;background:#0d2735bb;text-align:left;color:#bfd5de;font-size:9px;line-height:1.35;padding:7px 6px}.zones button b{display:block;color:var(--zone);font-size:9px}.zones button.active{border-color:var(--zone);background:#1a4550cc}.chartpanel{position:absolute;bottom:17px;height:179px;left:316px;right:317px;background:#071725ed;border:1px solid var(--stroke);padding:13px 16px 8px;z-index:4;backdrop-filter:blur(15px)}.chartheading{display:flex;justify-content:space-between;align-items:center}.chartheading h3{font-size:13px;margin:3px 0 0}.chartmodes{display:flex;gap:5px}.chartmodes button{font-size:8px;letter-spacing:.9px;padding:7px 8px;background:#0d2835;color:#81a8b7;border:1px solid #2c4b5b;font-weight:700}#historyChart{width:100%;height:95px;display:block;margin-top:5px}.chartbottom{display:flex;justify-content:space-between;color:#638e9c;font-size:8px;letter-spacing:1px}.chartbottom span:nth-child(2){color:#6bd4cf}.renderbadge{position:absolute;bottom:20px;left:17px;background:#051a26ce;border:1px solid #315766;color:#afd0db;font-size:9px;padding:11px;z-index:4;letter-spacing:.7px}.renderdot{display:inline-block;background:#58e7d0;border-radius:50%;height:6px;width:6px;margin:0 5px}.mapbadge{position:absolute;left:316px;top:87px;z-index:3;padding:9px 14px;background:#071924b0;border:1px solid #315463;text-align:center}.mapbadge .n{font-size:18px;color:#77dfda}.mapbadge .coords{font-size:9px;color:#8caeba;letter-spacing:1px}.hintline{position:absolute;bottom:19px;right:17px;font-size:8px;color:#6d9bac;letter-spacing:.5px;z-index:3}
.modal-back{position:absolute;inset:0;background:#001019dc;z-index:10;display:grid;place-items:center;backdrop-filter:blur(5px)}[hidden]{display:none!important}.modal{width:min(600px,calc(100% - 40px));max-height:80vh;overflow:auto;background:#0a2634;border:1px solid #44717c;box-shadow:0 22px 90px #000b;padding:28px 30px;position:relative}.modal-close{position:absolute;right:12px;top:12px;border:1px solid #355865;background:#0d2c3a;color:#a7dce1;padding:8px 11px}.modal h2{font-size:22px;margin:8px 0 20px}.modal p,.modal li{font-size:12px;line-height:1.7;color:#bdd2dc}.modal ul{padding-left:20px}.modal table{border-collapse:collapse;width:100%;font-size:11px}.modal td,.modal th{border-bottom:1px solid #254653;padding:8px;text-align:left}.modal th{color:#64d7d1}.modal .tools{display:flex;gap:8px;margin-top:15px}.modal a{display:inline-block;color:#7deadd;padding:8px;border:1px solid #376d74;text-decoration:none}.loading{position:absolute;inset:0;z-index:20;background:radial-gradient(circle at 52% 40%,#15475c 0%,#05131e 58%);display:flex;align-items:center;justify-content:center;flex-direction:column}.loader-mark{color:#65e0d1;font-size:58px;animation:breathe 1.7s infinite}.load-title{font-weight:900;letter-spacing:6px;font-size:26px;margin:10px 0 4px}.load-title span{color:#5ed8ca}.loading p{color:#8fb4c2;font-size:12px;letter-spacing:1px;margin-top:11px}.load-bar{width:220px;height:3px;background:#244b59;overflow:hidden;margin-top:19px}.load-bar>div{height:100%;width:40%;background:#61e5d2;animation:slide 1.25s infinite}.loading small{color:#527b8a;margin-top:28px;letter-spacing:2px;font-size:9px}@keyframes breathe{50%{opacity:.4;transform:scale(.95)}}@keyframes slide{0%{transform:translateX(-120%)}100%{transform:translateX(350%)}}
@media(max-width:1150px){.leftpane{width:252px}.rightpane{width:255px}.zonebar,.chartpanel{left:282px;right:282px}.mapbadge{left:282px}.topstatus{display:none}.zones button{font-size:8px}.topactions .outline{padding:9px}}@media(max-width:890px){.topbar{height:62px;padding:0 10px}.brand{font-size:13px;letter-spacing:1px}.brandmark .eyebrow{font-size:7px}.topactions .outline{display:none}.leftpane{left:9px;top:70px;width:min(260px,40vw);bottom:204px}.rightpane{right:9px;top:70px;width:min(240px,34vw);bottom:204px}.zonebar{left:9px;right:9px;bottom:181px}.chartpanel{left:9px;right:9px;bottom:7px;height:168px}.zones{overflow-x:auto;grid-template-columns:repeat(7,minmax(95px,1fr))}.mapbadge{display:none}.renderbadge,.hintline{display:none}}
@media(max-width:590px){.panel{background:#071a27dd}.leftpane{left:5px;top:68px;width:47vw;bottom:190px}.rightpane{right:5px;top:68px;width:47vw;bottom:190px}.panel-heading{padding:10px}.panel-heading h1,.panel-heading h2{font-size:13px}.scroller{padding:5px 10px}.readout{padding:10px}.hero strong{font-size:21px}.metric{padding:8px}.metric strong{font-size:17px}.metric>span{font-size:7px}.rightpane .section-title{padding:10px}.balance,.reservoir-wrap,.alerts,.inspector{padding-left:10px;padding-right:10px}.zonebar{bottom:171px}.chartpanel{bottom:5px;height:160px;padding:8px}.chartmodes button{padding:6px 3px;font-size:7px}.chartheading h3{font-size:11px}.brandmark .eyebrow{max-width:180px}.topactions .iconbtn{display:block}.toggle-row label{font-size:9px}}