:root{color-scheme:dark;--bg:#0a141d;--panel:#101d28;--panel2:#132430;--line:#2a3b47;--muted:#7895a6;--text:#dbeaf0;--cyan:#47d5d0;--amber:#e6b575;--violet:#aaa4dc;--card:#152632;--shadow:rgba(0,0,0,.5)}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:12px/1.45 Inter,'Segoe UI',Arial,sans-serif;-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}#app{height:100vh;min-height:720px;display:flex;flex-direction:column;overflow:hidden}.topbar{flex:0 0 76px;background:#0c1923;display:flex;align-items:center;padding:0 22px 0 24px;justify-content:space-between;border-bottom:1px solid #29404c;z-index:6;gap:20px}.brand{display:flex;align-items:center;gap:12px;white-space:nowrap}.brand-icon{height:43px;width:43px;border:1px solid rgba(71,213,208,.65);display:grid;place-items:center;background:linear-gradient(145deg,#07354c,#114250);border-radius:8px;box-shadow:inset 0 0 12px #2f99a744}.brand-icon span{color:#83f2dc;font-size:36px;line-height:1;margin-top:-6px}.brand-name{font-size:21px;letter-spacing:.08em;font-weight:700}.brand-name strong{color:#55dad5}.brand-name small{font-size:11px;color:#86b2c0;letter-spacing:.15em;font-weight:500}.brand-sub{font-size:9px;letter-spacing:.13em;color:#7199ad;margin-top:3px}.top-stats{display:flex;align-items:center;gap:33px}.top-stat{display:grid;gap:2px}.top-stat small{font-size:9px;letter-spacing:.14em;color:#7392a3}.top-stat strong{font-size:18px;letter-spacing:.04em}.top-stat em{font-style:normal;font-size:9px;color:#7b9aa7;font-weight:500}.header-actions{display:flex;align-items:center;gap:10px}.live-indicator{color:#85dcc0;background:#113c3c;padding:8px 10px;border:1px solid #326660;border-radius:3px;font-size:9px;letter-spacing:.1em;white-space:nowrap}.live-indicator i,.pulse-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#56e0ac;box-shadow:0 0 10px #56e0ac;vertical-align:middle;margin-right:6px;animation:pulse 2s ease-in-out infinite}.icon-button{width:33px;height:33px;border-radius:4px;border:1px solid var(--line);background:#13232e;color:#a9c7d3;font-size:19px}.icon-button:hover{border-color:#56bdc5;color:white}.layout{display:grid;grid-template-columns:303px minmax(320px,1fr) 306px;flex:1;min-height:0}.left-panel,.right-panel{overflow:auto;scrollbar-width:thin;scrollbar-color:#304857 transparent;background:var(--panel);z-index:3}.left-panel{border-right:1px solid var(--line);display:flex;flex-direction:column}.right-panel{border-left:1px solid var(--line);padding-bottom:18px}.panel-section{padding:23px 18px 15px}.heading-row{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.eyebrow{color:var(--cyan);font-size:9px;font-weight:650;letter-spacing:.17em}h1,h2,h3,p{margin:0}h1{font-size:17px;font-weight:650;margin-top:5px}h2{font-size:17px;font-weight:650;margin-top:5px}.chip{border:1px solid #385563;color:#80aec0;font-size:9px;padding:5px 7px;margin-top:9px;white-space:nowrap}.tabs{display:flex;padding:0 18px;border-bottom:1px solid var(--line);gap:18px}.tab{padding:13px 0 12px;color:#6e8795;font-size:9px;letter-spacing:.13em;background:none;border:0;border-bottom:2px solid transparent}.tab:hover{color:#cad9de}.tab.active{border-color:var(--cyan);color:#d8f6f2}.tab-pane{display:none;padding:17px 18px 23px;flex:1}.tab-pane.active{display:block}.section-mini{font-size:9px;letter-spacing:.13em;font-weight:700;color:#a5bdc6;display:flex;align-items:center;gap:8px;margin-bottom:22px}.section-mini.spaced{margin-top:24px}.label-dot{display:inline-block;width:6px;height:6px;border-radius:50%}.cyan{background:#4dcfd4}.amber{background:#e7b26b}.violet{background:#aaa4dc}.section-code{margin-left:auto;color:#577282;font-size:9px}.control{margin-bottom:23px}.control-label{display:flex;justify-content:space-between;align-items:center;gap:5px;margin-bottom:9px}.control-label label{color:#afc5ce;font-size:11px}.control-label b{font-size:14px;color:#e1f2f2;white-space:nowrap}.control-label b small{font-size:10px;color:#86a2af;font-weight:400}input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:0;background:linear-gradient(90deg,#36aba9 52%,#344652 52%);cursor:pointer;display:block;margin:13px 0 7px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:13px;width:13px;background:#d5edec;border:2px solid #2bb3b5;border-radius:50%;box-shadow:0 0 0 3px #218b8c30}input[type=range]::-moz-range-thumb{height:10px;width:10px;background:#d5edec;border:2px solid #2bb3b5;border-radius:50%}.ticks{display:flex;justify-content:space-between;color:#516e7c;font-size:8px;letter-spacing:.06em}.primary-button,.secondary-button{width:100%;padding:13px 8px;border-radius:4px;font-size:10px;letter-spacing:.09em;font-weight:700}.primary-button{background:linear-gradient(90deg,#155b68,#1c7977);border:1px solid #34b1b1;color:#e5f9f5;margin-top:7px}.primary-button:hover{filter:brightness(1.24)}.secondary-button{margin-top:9px;border:1px solid #41606c;background:#172d38;color:#b0d4df}.panel-footer{border-top:1px solid var(--line);margin-top:auto;padding:13px 18px;color:#5b7687;font-size:8px;letter-spacing:.08em;display:flex;justify-content:space-between}.ok-led{color:#58d5a8}.mono,.micro-label{font-family:Consolas,monospace}.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:1px solid #2d3d48;gap:8px;cursor:pointer}.toggle-row strong{font-size:12px;font-weight:500}.toggle-row small{display:block;color:#7896a2;font-size:10px;margin-top:4px}.toggle-row input{appearance:none;width:34px;height:19px;border-radius:11px;background:#304553;position:relative;flex-shrink:0;cursor:pointer}.toggle-row input:before{content:'';position:absolute;width:13px;height:13px;left:3px;top:3px;background:#b1c0c8;border-radius:50%;transition:.18s}.toggle-row input:checked{background:#1e8c8d}.toggle-row input:checked:before{left:18px;background:white}.control-select{padding-top:18px}.control-select label{display:block;color:#abc4cd;margin-bottom:9px}.control-select select{width:100%;background:#172c39;border:1px solid #385465;color:#deeded;padding:10px;border-radius:3px}.info-note,.panel-copy{color:#86a6b3;line-height:1.8;margin:19px 0}.info-note{background:#182d38;border-left:2px solid var(--cyan);padding:12px}.asset-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:25px 0}.asset-summary div{padding:12px 6px;border:1px solid #34505c;text-align:center;background:#172b37}.asset-summary b{font-size:21px;display:block}.asset-summary small{font-size:8px;color:#89a6b1}.viewport{position:relative;min-height:0;overflow:hidden;background:linear-gradient(#9db7bc 0%,#8bb0be 21%,#365d73 55%,#112c40 100%)}#world{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}.viewport-vignette{pointer-events:none;position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 33%,rgba(3,17,29,.18) 100%)}.viewport-corner{position:absolute;color:#c7e6ee;z-index:2;text-shadow:0 2px 9px #061721}.upper-left{top:19px;left:22px}.micro-label{color:#8bc4ce;font-size:9px;letter-spacing:.1em}.location-title{font-weight:700;font-size:12px;letter-spacing:.12em;margin:6px 0 4px}.micro-detail{font-size:9px;color:#c3d8e3;letter-spacing:.09em}.lower-left{bottom:79px;left:21px;font-size:9px;letter-spacing:.12em}.lower-right{bottom:79px;right:16px;font-size:9px;color:#d1e4e7;letter-spacing:.1em}.map-dot{display:inline-block;background:var(--cyan);width:6px;height:6px;border-radius:50%;margin-right:5px}.middle-dot{margin:0 5px}.compass{position:absolute;top:23px;right:21px;color:#b9e9ef;text-shadow:0 1px 4px #000;display:grid;justify-items:center;font-family:Consolas,monospace;font-size:10px;opacity:.85}.compass-shape{font-size:24px}.view-toolbar{position:absolute;left:16px;right:16px;bottom:16px;display:flex;gap:4px;justify-content:center;z-index:3;flex-wrap:wrap}.view-button{font-size:11px;letter-spacing:.04em;background:rgba(10,30,43,.9);color:#a1bbc6;border:1px solid rgba(111,162,177,.35);border-radius:2px;padding:11px 13px;white-space:nowrap;backdrop-filter:blur(8px)}.view-button:hover,.view-button.active{color:#efffff;border-color:#51c8c9;background:rgba(12,83,96,.85)}.view-button span{margin-left:4px;font-size:9px}.loading{position:absolute;inset:0;z-index:5;background:rgba(5,20,31,.96);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center}.loading.hidden{display:none}.loader-mark{font-size:82px;color:#59c7c4;line-height:.75;animation:pulse 2s infinite}.loading h2{font-size:15px;letter-spacing:.24em}.loading p{color:#7aaab9}.progressline{width:250px;height:2px;background:#345564;overflow:hidden;margin-top:15px}.progressline span{display:block;height:100%;width:38%;background:#55e0d7;animation:slide 1.7s infinite}.pick-tooltip{position:absolute;left:20px;bottom:124px;background:rgba(9,34,45,.92);border:1px solid #4c9f9d;padding:12px 15px;max-width:320px;display:grid;gap:4px;z-index:2}.pick-tooltip b{color:#77e1da;letter-spacing:.06em;font-size:10px}.pick-tooltip span{color:#cfe1e9;font-size:11px}.hidden{display:none!important}.right-panel>.panel-section{padding:23px 16px 15px}.production-card{margin:0 14px 12px;padding:14px 13px 13px;border:1px solid #316e75;background:linear-gradient(128deg,#183e4b,#122a38);box-shadow:inset 0 0 30px #0f35383b}.card-top{display:flex;justify-content:space-between;font-size:9px;color:#8fcdd1;letter-spacing:.15em}.hero-number{display:flex;align-items:baseline;gap:7px;margin:4px 0}.hero-number span{font-size:30px;letter-spacing:-.045em;font-weight:650;color:#dcf9f2;line-height:1.35}.hero-number small{color:#91bdbf;font-size:10px;white-space:nowrap}.capacity-bar{height:4px;background:#335360;margin:10px 0}.capacity-bar span{display:block;width:30%;height:100%;background:linear-gradient(90deg,#3da7b9,#71eed0);transition:width .25s}.card-foot{display:flex;justify-content:space-between;color:#7cabba;font-size:8px;letter-spacing:.04em}.metric-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 14px}.metric{background:#152936;border:1px solid #2b4552;padding:12px 11px;min-height:80px}.metric-name{color:#88abb9;letter-spacing:.12em;font-size:8px}.metric b{display:block;font-size:20px;margin:3px 0;color:#dcebec}.metric small{font-size:8px;color:#6c91a1;letter-spacing:.04em}.diagram-panel,.chart-panel,.alarm-panel,.minimap-panel{border-top:1px solid #304650;margin-top:13px;padding:15px 15px 0}.section-header{display:flex;align-items:center;justify-content:space-between;font-size:9px;font-weight:700;letter-spacing:.1em;color:#b5d0d9;margin-bottom:13px}.section-header .micro-label{font-size:8px;color:#688fa2;font-weight:400}.flow-diagram{text-align:center}.flow-node{border:1px solid #46606c;background:#162d38;padding:10px;flex:1}.flow-node small{font-size:8px;color:#94b0bd;letter-spacing:.07em;display:block}.flow-node strong{font-size:17px;display:block;margin-top:4px;color:#d8f0f1}.feed{width:74%;margin:0 auto;border-color:#3b7182}.flow-split{height:33px;display:flex;justify-content:center;align-items:center;position:relative;color:#6a9eb0}.flow-split:before{content:'';position:absolute;width:1px;height:14px;background:#609ca9;top:0;left:50%}.flow-split span{height:1px;width:21%;background:#426b7c;margin-top:28px}.flow-split b{font-size:9px;margin:22px 8px 0;color:#99d7d3}.flow-products{display:flex;gap:8px}.potable{border-color:#2d847f}.potable strong{color:#67ded1}.concentrate{border-color:#8c6262}.concentrate strong{color:#e1aba6}.divider-row{display:flex;justify-content:space-between;margin-top:12px;padding-top:11px;border-top:1px solid #263d47;font-size:9px;color:#7899a7}.divider-row b{color:#cde1e9;font-size:11px}.chart{display:block;width:100%;height:92px}.legend{display:flex;gap:15px;margin:4px 0 0;color:#7796a4;font-size:8px;letter-spacing:.07em}.legend i{display:inline-block;width:13px;height:2px;vertical-align:middle;margin-right:5px}.line-a{background:#45d5d0}.line-b{background:#e6b06f}.alarms{display:grid;gap:7px}.alarm{display:flex;align-items:flex-start;gap:9px;padding:9px 10px;background:#192d39;font-size:10px;color:#b1cbd2;line-height:1.4}.alarm i{width:6px;height:6px;border-radius:100%;flex:none;margin-top:4px;background:#eac376}.alarm.ok i{background:#55d4aa}.alarm.critical i{background:#fa7777}.minimap-panel canvas{width:100%;height:100px;display:block;border:1px solid #385365}.mini-footer{display:flex;justify-content:space-between;color:#7295a5;margin-top:5px;font-size:8px;letter-spacing:.08em}.statusbar{height:28px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 19px;border-top:1px solid #28424b;background:#08151d;color:#6c8997;font-size:9px;letter-spacing:.06em}.bar-divider{color:#41616a;margin:0 9px}.status-right{white-space:nowrap}.modal{position:fixed;z-index:30;inset:0;display:grid;place-items:center}.modal-mask{position:absolute;inset:0;background:#020b10d9;backdrop-filter:blur(3px)}.modal-content{position:relative;max-width:930px;width:min(93vw,930px);max-height:86vh;overflow:hidden;background:#101f2a;border:1px solid #39717b;box-shadow:0 20px 65px #000a;display:flex;flex-direction:column;padding:24px}.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}.modal-head h2{font-size:23px;margin:6px 0}.modal-head p{color:#7ea1b0}.modal input{background:#152d3a;border:1px solid #426372;color:white;padding:13px 14px;margin:19px 0 14px;font-size:13px}.catalog-items{overflow:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding-right:6px}.asset-card{border:1px solid #304a55;background:#162b36;padding:14px;display:grid;gap:6px}.asset-card h3{font-size:13px}.asset-card small{color:#75aaaf;font-size:9px;letter-spacing:.09em}.asset-card p{color:#94adb8;font-size:10px}.asset-card a{color:#62d9d1;text-decoration:none;font-size:10px;border-top:1px solid #30505b;padding-top:9px;display:block}.asset-card a:hover{text-decoration:underline}.asset-card .color-swatch{height:5px}.toast{position:fixed;z-index:50;bottom:40px;left:50%;transform:translateX(-50%);padding:12px 19px;background:#184453;color:#ddf7f4;border:1px solid #55c5c1;box-shadow:0 10px 25px #0008;max-width:90vw;text-align:center}@keyframes pulse{50%{opacity:.48}}@keyframes slide{0%{transform:translateX(-100%)}100%{transform:translateX(650%)}}
@media(max-width:1300px){.layout{grid-template-columns:267px minmax(200px,1fr) 269px}.top-stats{gap:12px}.left-panel .panel-section{padding-left:14px}.view-button{padding:10px 7px}.view-button span{font-size:8px}}
@media(max-width:1010px){.layout{grid-template-columns:240px minmax(220px,1fr)}.right-panel{display:none}.top-stats{display:none}}
@media(max-width:620px){#app{min-height:620px}.topbar{height:62px;flex:0 0 62px;padding:0 10px}.brand-name{font-size:15px}.brand-sub{font-size:7px}.brand-icon{height:35px;width:35px}.live-indicator{display:none}.layout{grid-template-columns:1fr;grid-template-rows:minmax(370px,1fr) auto}.viewport{grid-row:1}.left-panel{grid-row:2;max-height:220px;border-top:1px solid var(--line)}.left-panel .panel-section,.tabs{display:none}.tab-pane{display:none!important}.view-button{font-size:9px;padding:7px}.view-button span{display:none}.statusbar{font-size:8px;padding:0 7px}.status-left{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.catalog-items{grid-template-columns:1fr}.modal-content{padding:13px}.upper-left{top:12px;left:11px}.compass{top:12px;right:12px}}

/* Small displays retain all operational controls in a vertical layout. */
@media(max-width:620px){#app{height:auto;min-height:100vh;overflow:visible}.layout{display:flex;flex-direction:column}.viewport{height:65vh;min-height:390px;flex:none;order:0}.left-panel{order:1;display:flex;max-height:none;min-height:260px}.right-panel{order:2;display:block;border-left:0}.left-panel .panel-section{display:flex}.tabs{display:flex}.tab-pane.active{display:block!important}.panel-footer{display:flex}.statusbar{min-height:28px}}