:root{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#dbe7df;background:#091719;--bg:#091719;--card:#102124;--line:#264245;--muted:#729096;--acid:#bcf27d;--mint:#73cea7;--blue:#73c7dc}*{box-sizing:border-box}html,body{margin:0;min-height:100%;overflow-x:hidden}body{background:radial-gradient(ellipse at 35% -30%,#1b383b 0%,transparent 48%),var(--bg);font-size:13px}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible,canvas:focus-visible{outline:2px solid var(--acid);outline-offset:3px}h1,h2,h3,p{margin:0}#app{max-width:1720px;margin:0 auto;padding:0 30px}.topbar{height:79px;border-bottom:1px solid #284346;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:13px}.mark{width:47px;height:47px;background:#29473c;color:#d5f9a1;border:1px solid #55866a;display:grid;place-items:center;border-radius:12px}.mark svg{width:29px;height:29px}.brand-name{font-weight:850;font-size:19px;letter-spacing:.14em;line-height:1.18;color:#e3f4e6}.brand-name span{font-weight:450;color:var(--acid)}.brand-tag{font-size:9px;letter-spacing:.2em;color:#749a94;margin-top:5px;font-weight:700}.top-center{display:flex;align-items:center;gap:12px;letter-spacing:.13em;color:#8cb7aa;font-size:10px;font-weight:700}.top-center strong{color:#d0d9cc}.status-dot,.node-online,.view-pin{width:7px;height:7px;border-radius:50%;display:inline-block;background:var(--acid);box-shadow:0 0 0 4px #bcf27d16,0 0 12px #bcf27d62}.top-center .divider{height:17px;width:1px;background:var(--line);margin:0 6px}.top-actions{display:flex;gap:9px}.btn{border-radius:9px;border:1px solid #375154;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:10px 13px;color:#d0e5dd;background:#172c30;font-size:12px;font-weight:700;transition:background .15s,border-color .15s}.btn:hover{background:#284440;border-color:#71ac92}.btn.ghost{background:transparent}.btn.quiet{background:#172d2e}.headstrip{display:flex;justify-content:space-between;align-items:end;gap:20px;padding:29px 0 28px}.eyebrow{letter-spacing:.175em;font-size:9px;color:#85b3a1;font-weight:800;margin-bottom:11px}.headstrip h1{font-size:clamp(27px,3vw,38px);font-weight:775;letter-spacing:-.055em;line-height:1.1;color:#f1f9f0}.headstrip h1 em{font-weight:560;color:var(--acid);font-style:normal}.headstrip p{margin-top:9px;color:#86a2a2;font-size:13px}.clockbox{text-align:right}.label-small{display:block;color:#6f9c95;font-size:9px;letter-spacing:.19em;font-weight:800}.clock-readout{font-variant-numeric:tabular-nums;font-size:38px;line-height:1.15;font-weight:730;letter-spacing:-.045em;margin-top:4px}.clock-day{font-size:9px;font-weight:740;letter-spacing:.15em;color:var(--acid)}.clock-day .sep{color:#617d7f;padding:0 7px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 346px;align-items:start;gap:18px}.maincol{min-width:0;display:flex;flex-direction:column;gap:15px}.sidecol{min-width:0}.card{border:1px solid #254246;background:linear-gradient(155deg,#132a2b,#102326 70%);border-radius:13px;box-shadow:inset 0 1px 0 #ffffff04,0 8px 35px #00101627}.viewport{height:430px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 54% 34%,#315a53a6 0%,#203b3d84 33%,#0d2429 77%),linear-gradient(160deg,#1b3337,#0a2226)}.viewport canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;z-index:1;cursor:grab}.viewport canvas:active{cursor:grabbing}.viewport-glow{position:absolute;width:60%;height:40%;background:radial-gradient(ellipse,#86e5a915,transparent 65%);left:20%;top:33%;pointer-events:none;z-index:0}.viewport-top,.view-bottom{z-index:2;pointer-events:none;position:absolute;left:24px;right:24px;display:flex;align-items:center;justify-content:space-between;color:#adc3bb}.viewport-top{top:20px}.view-bottom{bottom:21px;font-size:10px;letter-spacing:.105em}.view-title{display:flex;align-items:center;gap:10px;letter-spacing:.17em;font-size:10px;font-weight:780}.view-stats{display:flex;gap:20px;align-items:center;font-size:9px;font-weight:700;letter-spacing:.13em;color:#7d9e9d}.view-stats .live{color:#b5f48f}.view-bottom b{color:#d3f7b0}.obullet{padding:0 5px;color:#688784}.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.metric{height:145px;padding:15px 16px 10px;overflow:hidden;position:relative}.metric-heading{font-size:9px;letter-spacing:.14em;color:#91b1aa;display:flex;justify-content:space-between;align-items:center;font-weight:800;white-space:nowrap;gap:7px}.metric-symbol{font-size:16px;color:#a4e890;line-height:1}.metric-symbol.water{color:#78c4e0}.metric-symbol.gas{color:#e4c783}.metric-value{font-size:39px;letter-spacing:-.06em;font-weight:760;color:#f1faf3;margin-top:11px;line-height:1.1;font-variant-numeric:tabular-nums}.metric-value small{font-size:15px;letter-spacing:0;color:#88b3a8;margin-left:4px;font-weight:600}.metric-foot{display:flex;justify-content:space-between;gap:4px;margin-top:12px;font-size:9px;font-weight:750;letter-spacing:.08em;color:#9ad4a6}.metric-target{color:#789391}.metric-target b{color:#d6ded9}.microline{height:2px;background:linear-gradient(90deg,#b4ee79 10%,#78bcb8 55%,transparent 98%);position:absolute;bottom:0;left:0;width:100%;opacity:.55}.data-card{padding:21px 23px 12px}.section-top{display:flex;justify-content:space-between;align-items:center}.section-top .eyebrow{margin-bottom:7px}.section-top h2{font-size:18px;letter-spacing:-.025em}.segment{background:#0a1d20;border:1px solid #2c4446;padding:3px;display:flex;gap:3px;border-radius:8px}.segment-btn{background:transparent;border:0;color:#799c99;font-size:11px;font-weight:720;padding:8px 15px;border-radius:5px}.segment-btn.active{color:#c9f1b7;background:#2e5046;box-shadow:0 1px 2px #0006}.chart-wrap{height:185px;margin:9px 0 0;position:relative}.chart-wrap canvas{width:100%;height:100%}.chart-legend{display:flex;justify-content:flex-end;gap:16px;flex-wrap:wrap;font-size:9px;color:#a4bab7;margin-top:2px}.legend-item{display:flex;align-items:center;gap:6px}.legend-dot{width:15px;height:3px;border-radius:4px}.data-footer{border-top:1px solid #294245;margin-top:15px;padding-top:12px;display:flex;justify-content:space-between;gap:10px;color:#688d8b;letter-spacing:.11em;font-weight:760;font-size:9px}.data-footer b{color:#b5dcac}.bottom-strip{border:1px solid #264348;background:#102427b3;border-radius:10px;display:grid;grid-template-columns:repeat(4,1fr);padding:17px 14px;margin-bottom:20px}.bottom-strip>div{padding:0 15px;border-right:1px solid #2f4a4e;min-width:0}.bottom-strip>div:last-child{border:0}.tiny-key{font-size:9px;display:block;letter-spacing:.10em;font-weight:750;color:#769899;white-space:nowrap}.bottom-strip strong{display:block;margin-top:9px;color:#def0e4;font-size:16px;letter-spacing:-.02em}.controls-card{padding:21px 22px 22px}.ctrl-title{display:flex;align-items:start;justify-content:space-between}.ctrl-title .eyebrow{margin-bottom:7px}.ctrl-title h2{font-size:19px;letter-spacing:-.03em}.ctrl-icon{color:#b9ef9b;background:#304d3e;border:1px solid #527658;border-radius:9px;width:36px;height:36px;display:grid;place-items:center;font-size:21px}.runbar{display:grid;grid-template-columns:1fr auto;gap:7px;margin-top:20px}.btn.primary{background:#b8ee86;border-color:#cefba2;color:#1b321e;min-height:40px;gap:6px}.btn.primary:hover{background:#d5ffa7}.time-select{font-size:8px;letter-spacing:.10em;font-weight:800;color:#73938c;border:1px solid #35504d;padding:5px 9px;border-radius:9px;display:flex;flex-direction:column;justify-content:center;gap:3px;background:#132a29}.time-select select{border:0;background:transparent;color:#e1ecde;font-size:11px;font-weight:700;outline:0;cursor:pointer}.time-select option{background:#16302f}.rule{height:1px;background:#2b4545;margin:23px 0 20px}.ctrl-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:10px}.ctrl-section-head h3{font-size:12px;color:#ecf4e9;letter-spacing:.008em;font-weight:780}.switch{display:flex;align-items:center;gap:7px;cursor:pointer;font-size:9px;font-weight:820;letter-spacing:.1em;color:#b4da9c}.switch input{position:absolute;opacity:0;width:1px;height:1px}.track{width:30px;height:17px;border-radius:15px;background:#37534a;border:1px solid #60806b;position:relative;transition:background .1s}.track:before{content:'';position:absolute;width:11px;height:11px;background:#d5e5cf;left:3px;top:2px;border-radius:50%;transition:transform .15s}.switch input:checked+.track{background:#4b8c63;border-color:#89d89c}.switch input:checked+.track:before{transform:translateX(13px);background:#e2ffbd}.slider-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:3px 8px;margin:0 0 15px}.slider-row label{font-size:11px;font-weight:600;color:#a5bfba}.slider-row output{font-size:11px;color:#d6f6bf;font-weight:760;font-variant-numeric:tabular-nums}.slider-row input[type=range]{grid-column:1/-1;width:100%;height:4px;margin:10px 0 0;accent-color:#bbf38c;cursor:pointer;appearance:none;background:linear-gradient(90deg,#a8e681 var(--fill,50%),#314f4c var(--fill,50%));border-radius:12px}.slider-row input[type=range]::-webkit-slider-thumb{appearance:none;background:#daf9ae;border:2px solid #335a42;width:15px;height:15px;border-radius:50%;box-shadow:0 0 0 2px #a8e58130}.slider-row input[type=range]::-moz-range-thumb{background:#daf9ae;border:2px solid #335a42;width:12px;height:12px;border-radius:50%}.manual-control{background:#162e2c;padding:12px;border:1px dashed #486f61;border-radius:8px;margin:4px 0 16px}.manual-control[hidden]{display:none}.manual-control .slider-row:last-child{margin-bottom:2px}.manual-label{font-size:9px;letter-spacing:.13em;color:#b4d69d;margin-bottom:14px;font-weight:850}.tank{background:#0c1d20;border:1px solid #294c4c;border-radius:9px;padding:12px;margin-top:6px}.tank-top,.tank-bottom{display:flex;align-items:center;justify-content:space-between;gap:5px}.tank-top{font-size:9px;letter-spacing:.09em;color:#7eac9e;font-weight:800}.tank-top b{font-size:10px;color:#d6f7e7}.tank-track{height:7px;background:#2a4d4c;border-radius:5px;overflow:hidden;margin:11px 0}.tank-track>span{display:block;height:100%;background:linear-gradient(90deg,#70ba9a,#c5f47e);border-radius:5px;transition:width .4s}.tank-bottom{font-size:10px;color:#a0c1b8}.tank-bottom button{background:none;border:none;color:#bff299;font-size:10px;font-weight:750;padding:1px}.caps-tag{font-size:9px;color:#8bb0a7;letter-spacing:.11em;background:#22413f;border-radius:4px;padding:5px 6px}.select-label{display:block;margin-bottom:9px;font-size:11px;color:#a5bfba}.crop-select{width:100%;color:#e7f3df;background:#132b2b;border:1px solid #3b5954;border-radius:7px;padding:11px 12px;cursor:pointer;font-size:12px}.presets-title{color:#82a69d;font-size:9px;font-weight:750;letter-spacing:.11em;margin:18px 0 10px}.scenario-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.scenario{border-radius:6px;border:1px solid #3c5854;color:#9fcbc2;background:#17312f;padding:9px 4px;font-size:10px;font-weight:720}.scenario:hover,.scenario.selected{color:#d5f5c7;background:#315647;border-color:#89bc86}.state-actions{display:flex;gap:6px;flex-wrap:wrap}.small-button{background:#183532;color:#a9d3c5;border:1px solid #355954;border-radius:6px;padding:8px;font-size:10px;font-weight:725}.small-button:hover{background:#2e5144;color:#e3ffe3}.small-button.danger{color:#f1b7a0}.side-foot{display:flex;justify-content:center;align-items:center;gap:9px;font-size:9px;letter-spacing:.08em;font-weight:790;color:#789a94;margin:15px 0}.side-foot span:nth-child(2){color:#456567}.footer{border-top:1px solid #253f41;margin-top:15px;padding:22px 0 34px;display:flex;justify-content:space-between;gap:20px;color:#5d8584;font-weight:720;letter-spacing:.1em;font-size:9px}.footer b{color:#91b6a9}@media(max-width:1240px){#app{padding:0 20px}.workspace{grid-template-columns:minmax(0,1fr) 320px}.metric{padding:13px 11px}.metric-heading{font-size:8px}.metric-value{font-size:33px}.bottom-strip strong{font-size:13px}}@media(max-width:980px){.workspace{grid-template-columns:1fr}.sidecol{order:2}.controls-card{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 25px}.controls-card .ctrl-title,.controls-card .runbar{grid-column:1/-1}.controls-card>.rule{display:none}.control-section{padding:20px 0;border-top:1px solid #2b4545}.viewport{height:470px}}@media(max-width:650px){#app{padding:0 12px}.topbar{height:67px}.brand-name{font-size:14px}.brand-tag{font-size:7px}.mark{width:37px;height:37px}.top-center,.top-actions .btn span{display:none}.top-actions{gap:5px}.top-actions .btn{font-size:13px}.headstrip{padding:22px 0;align-items:center}.headstrip h1{font-size:29px}.headstrip p{font-size:11px;max-width:250px}.clock-readout{font-size:24px}.label-small,.clock-day{font-size:7px}.viewport{height:340px}.viewport-top,.view-bottom{left:13px;right:13px}.view-title{font-size:8px}.view-stats span:last-child{display:none}.view-bottom{font-size:8px}.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.metric{height:120px}.metric-value{font-size:32px;margin-top:7px}.metric-foot{margin-top:8px}.data-card{padding:17px 12px}.section-top h2{font-size:16px}.segment-btn{padding:8px}.chart-wrap{height:160px}.bottom-strip{grid-template-columns:repeat(2,1fr);row-gap:17px}.bottom-strip>div:nth-child(2){border:0}.bottom-strip>div:nth-child(3){padding-top:10px}.bottom-strip>div:nth-child(4){border:0;padding-top:10px}.controls-card{display:block;padding:20px 19px}.control-section{padding:0;border-top:0}.controls-card>.rule{display:block;margin:20px 0}.footer{font-size:8px;flex-direction:column;gap:6px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}