:root{font-family:Inter,'Segoe UI',Roboto,Arial,sans-serif;color:#e5f1f4;background:#07131b;font-synthesis:none;--mint:#3fe4bd;--line:#263844;--muted:#71909d;--panel:#0b1a24;--ink:#e5f1f4}*{box-sizing:border-box}body{margin:0;min-width:720px;overflow:hidden}button,select,input{font:inherit}button{cursor:pointer;color:inherit}#app{display:grid;grid-template-columns:82px minmax(550px,1fr) 326px;grid-template-rows:68px minmax(0,1fr);height:100vh;min-height:650px}#topbar{grid-column:1/4;display:flex;align-items:center;position:relative;z-index:5;background:#091722;border-bottom:1px solid #1b3441;padding:0 22px;gap:13px}.brand-symbol{color:#a9e8dd}.brand-main{font-size:15px;font-weight:800;letter-spacing:2.6px}.brand-main span{color:#486979;font-weight:400}.brand-small{font-weight:650;color:#5f8592;letter-spacing:1.6px;font-size:8px;margin-top:5px}.top-center{position:absolute;left:43%;top:50%;transform:translate(-50%,-50%);font-size:10px;font-weight:700;letter-spacing:1.2px;color:#8daab5;white-space:nowrap}.live-pulse,.mint-dot{width:7px;height:7px;display:inline-block;background:var(--mint);border-radius:50%;box-shadow:0 0 0 4px #35d9ad16;margin-right:7px}.sep{color:#294552;margin:0 12px}.top-actions{margin-left:auto;display:flex;gap:10px;align-items:center}.icon-btn{border:1px solid #26404c;background:#122734;color:#a7c6d1;border-radius:6px;width:31px;height:31px}.operator-avatar{background:#254f56;border:1px solid #4d777a;border-radius:50%;width:32px;height:32px;display:grid;place-items:center;font-size:11px;color:#d7f6ed;font-weight:800}#rail{background:#0a1922;border-right:1px solid #233943;display:flex;flex-direction:column;align-items:center;padding-top:23px;gap:4px;min-height:0}.rail-label{color:#557885;letter-spacing:1.6px;font-size:8px;font-weight:700;margin-bottom:15px}.rail-item{width:72px;min-height:62px;display:flex;gap:5px;flex-direction:column;align-items:center;justify-content:center;border:none;background:transparent;color:#7295a1;font-size:9px;font-weight:700;letter-spacing:.25px;position:relative}.rail-item b{font-size:21px;font-weight:500}.rail-item:hover{color:#c7e7eb;background:#122a35}.rail-item.active{color:#55f0c8;background:linear-gradient(90deg,#0c3034,#122c34)}.rail-item.active:before{content:'';position:absolute;left:0;height:40px;width:3px;border-radius:3px;background:var(--mint)}.rail-bottom{margin-top:auto;margin-bottom:10px}#main{display:flex;flex-direction:column;min-width:0;min-height:0}#viewport{position:relative;min-height:0;flex:1;background:radial-gradient(at 55% 60%,#174050,#091822 70%);overflow:hidden}#scene{position:absolute;inset:0;width:100%;height:100%;outline:none;touch-action:none}.scene-top{position:absolute;left:30px;top:26px;pointer-events:none;text-shadow:0 2px 12px #09202b}.eyebrow{font-size:9px;letter-spacing:2px;color:#91adb8;font-weight:800}.green-mark{color:var(--mint);font-size:10px;margin-left:10px}.scene-top h1{font-size:22px;letter-spacing:1.1px;line-height:1.2;margin:7px 0;font-weight:750;color:white}.subheading{font-size:9px;letter-spacing:1.15px;color:#b6d2d5;font-weight:700}.subheading span{color:var(--mint)}.view-toolbar{position:absolute;right:19px;top:21px;display:flex;gap:5px}.view-toolbar button,.view-toolbar select{border:1px solid #38606d;background:#0a2332df;border-radius:5px;padding:9px 10px;color:#b8d3db;font-size:9px;letter-spacing:.8px;font-weight:750}.view-toolbar button.active{color:#5df7d0;border-color:#368a84}.view-toolbar select{max-width:105px}.scene-bottom-left{position:absolute;bottom:17px;left:25px;pointer-events:none;text-shadow:0 1px 8px #091820}.view-tag{font-size:11px;font-weight:800;letter-spacing:1.35px;color:#efffff}.helper,.techline{font-size:9px;letter-spacing:.8px;margin-top:9px;color:#bfdae0}.techline{color:#79c8c5;font-size:8px}.compass{position:absolute;right:19px;bottom:22px;color:#c4e5e7;text-align:center;font-weight:700;font-size:11px}.compass div{font-size:32px;color:#55e8c6;line-height:35px}.compass small{color:#637f88}#bottom-panel{height:237px;background:#0b1b25;border-top:1px solid #2b4651;padding:17px 23px 14px;z-index:2}.bottom-heading{display:flex;justify-content:space-between;letter-spacing:1.7px;font-size:10px;font-weight:850;color:#c8e3e6;margin:0 3px 15px}.pale{color:#5b7c88;font-size:8px}.chart-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;height:171px}.chart-tile{background:#112632;border:1px solid #203e49;border-radius:7px;padding:11px 12px 7px;min-width:0;position:relative;overflow:hidden}.chart-tile header{display:flex;align-items:start;justify-content:space-between}.metric-label{color:#83a5b0;letter-spacing:1.1px;font-size:9px;font-weight:750}.big-metric{font-size:27px;font-weight:800;white-space:nowrap;letter-spacing:-.6px;margin-top:5px;color:#eefcff}.big-metric small{font-size:9px;letter-spacing:0;color:#8daab5;margin-left:3px}.metric-marker{border-radius:5px;padding:5px 8px;font-size:17px}.green-marker{background:#183c37;color:#63ebc0}.orange-marker{background:#493022;color:#ffc07c}.blue-marker{background:#1d364b;color:#8cbef8}.chart-tile canvas{width:100%;height:67px;display:block;margin:3px 0}.chart-footer{display:flex;justify-content:space-between;gap:5px;color:#7595a1;letter-spacing:.6px;font-size:8px;font-weight:800;white-space:nowrap}.chart-footer span:last-child{color:#acc8cd}.quality{font-size:8px;font-weight:850;letter-spacing:.7px;padding:7px;border-radius:5px}.quality.good{color:#66d9b5;background:#193c39}.quality.neutral{color:#e6d38f;background:#413c2a}.quality.bad{color:#ffb4a7;background:#482a2b}.reservoir-graphic{height:67px;display:flex;justify-content:center;align-items:center;gap:9px}.liquid{height:11px;width:70%;border:1px solid #447381;border-radius:4px;overflow:hidden;background:#172d37}.liquid span{display:block;height:100%;width:0;background:linear-gradient(90deg,#236f89,#36d4d6);transition:width .2s}.reservoir-pct{color:#a6d7e2;font-size:12px;font-weight:700}#control-panel{background:#0a1a24;border-left:1px solid #26424d;min-height:0;z-index:2}.side-scroll{height:100%;overflow:auto;scrollbar-color:#34505b transparent;scrollbar-width:thin}.panel-title{display:flex;justify-content:space-between;padding:24px 20px 16px;align-items:center}.panel-title h2{margin:5px 0 0;font-size:16px;letter-spacing:1.3px}.small-outline{background:#112936;border:1px solid #355260;border-radius:5px;width:29px;height:29px}.status{margin:0 18px 22px;padding:13px 11px;display:flex;gap:10px;align-items:center;background:#10332e;border:1px solid #235f52;border-radius:6px}#status-dot{width:8px;height:8px;background:var(--mint);border-radius:50%;box-shadow:0 0 0 5px #43dcb91b}#status-dot.warn{background:#ffba6c;box-shadow:0 0 0 5px #ffba6c1f}.status strong{display:block;font-size:10px;letter-spacing:.5px;color:#7de8c8}.status small{display:block;font-size:8px;color:#779d9f;margin-top:4px}.status button{margin-left:auto;background:#204d49;border:1px solid #3c746b;border-radius:4px;padding:7px;color:#9deed8;white-space:nowrap;font-size:8px;font-weight:700}.side-section{border-top:1px solid #233a45;padding:15px 18px 5px}.section-title{color:#d3e9ec;font-size:9px;letter-spacing:1.2px;font-weight:850;display:flex;justify-content:space-between;margin-bottom:16px}.section-title span{font-size:8px;color:#5ed4b8}.control{margin-bottom:15px}.control-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.control-label label{font-size:11px;color:#98b4bf}.control-label b{font-size:11px;color:#effafa;font-variant-numeric:tabular-nums;margin-left:auto}.unit{display:none}.control input[type=range]{-webkit-appearance:none;appearance:none;background:linear-gradient(to right,#3cbea5,#29747c);height:3px;width:100%;border-radius:2px;cursor:ew-resize;accent-color:var(--mint);display:block}.control input::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#7ff7d6;border:2px solid #133e3d;box-shadow:0 0 0 2px #64d9b63b}.control-limits{display:flex;justify-content:space-between;font-size:8px;color:#5b8493;margin-top:8px}.telemetry{display:flex;justify-content:space-between;align-items:center;border-bottom:1px dashed #264451;padding-bottom:10px;margin-bottom:10px;font-size:10px;color:#91abb7}.telemetry strong{font-size:11px;color:#d9f1f4}.telemetry small{color:#648994;font-size:9px}.alarm-section{padding-bottom:16px}.no-alerts{color:#73d9b8;font-size:10px;padding:9px 0}.no-alerts span{background:#174b3c;border-radius:50%;display:inline-grid;place-items:center;width:18px;height:18px;margin-right:8px}.alert{font-size:10px;border:1px solid #805a40;background:#3c2f27;color:#ffcc9b;padding:9px;border-radius:4px;margin-bottom:6px}.alert span{margin-right:9px}.alert.danger{color:#ffa5a5;border-color:#844a4a}.reset{background:#153a3d;color:#8af2d5;border:1px solid #36796a;border-radius:5px;width:calc(100% - 36px);margin:2px 18px 20px;padding:11px;font-size:10px;font-weight:850;letter-spacing:.7px}.reset:hover{background:#225751}.panel-footer{text-align:center;color:#527784;font-size:8px;line-height:1.9;padding-bottom:20px}#loading{position:absolute;inset:0;z-index:4;background:radial-gradient(circle at 50% 50%,#15333c,#06131e);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .6s;pointer-events:auto}#loading.hidden{opacity:0;pointer-events:none}.loading-ring{border:3px solid #2c5861;border-top-color:#59edc2;border-radius:50%;width:58px;height:58px;animation:spin 1.1s linear infinite;margin-bottom:30px}.loading-title{letter-spacing:3px;color:#e2f5f6;font-weight:800}.load-failed{color:#ffb18b;text-align:center;line-height:2}.loading-title+p{color:#7299a4;font-size:12px}@keyframes spin{to{transform:rotate(360deg)}}#toast{position:fixed;left:50%;bottom:255px;transform:translate(-50%,20px);z-index:12;background:#153b41;border:1px solid #47af9d;border-radius:5px;padding:12px 16px;color:#b5f8dc;font-size:12px;font-weight:700;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none}#toast.show{opacity:1;transform:translate(-50%,0)}dialog{background:#0c2330;border:1px solid #3b6c72;border-radius:12px;color:#d6eef0;max-width:640px;width:calc(100% - 48px);padding:25px 30px;box-shadow:0 15px 70px #000a}dialog::backdrop{background:#051016c7}dialog h2{font-size:24px;letter-spacing:1.5px}dialog p{line-height:1.6;color:#adc5cf}.dialog-title{font-weight:850;letter-spacing:1.4px;font-size:10px;color:#51d7b9;display:flex;justify-content:space-between}.dialog-title button{font-size:24px;border:none;background:transparent}.dialog-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.dialog-grid>div{background:#13333d;border:1px solid #315463;border-radius:6px;padding:14px}.dialog-grid b{font-size:25px;color:#b6ffea}.dialog-grid small{display:block;font-size:9px;color:#8fb0bd;margin-top:7px}.disclaimer{font-size:11px;color:#d7af85!important}@media(max-width:1280px){#app{grid-template-columns:68px minmax(420px,1fr) 298px}.rail-item{width:66px}.top-center{display:none}#bottom-panel{height:216px;padding:13px}.chart-list{gap:6px}.chart-tile{padding:9px 8px}.big-metric{font-size:21px}.chart-tile canvas,.reservoir-graphic{height:62px}#rail{gap:1px}}@media(max-height:770px){#bottom-panel{height:204px}.scene-top{top:14px}.scene-top h1{font-size:18px}.side-section{padding-top:12px}.control{margin-bottom:11px}}@media(max-width:920px){body{overflow:auto;min-width:360px}#app{height:auto;min-height:100vh;display:grid;grid-template-columns:60px 1fr;grid-template-rows:65px 68vh auto}#topbar{grid-column:1/3}#rail{grid-column:1;grid-row:2/4}#main{grid-column:2;grid-row:2;min-height:650px}#control-panel{grid-column:2;grid-row:3;height:auto}#bottom-panel{height:auto;min-height:220px}.chart-list{grid-template-columns:repeat(2,1fr);height:auto}.chart-tile{height:167px}.scene-top{left:15px}.scene-top h1{font-size:15px}.subheading{font-size:7px}.view-toolbar{right:8px;top:91px;flex-wrap:wrap;max-width:210px;justify-content:flex-end}.view-toolbar button span{display:none}.scene-bottom-left{left:13px}.helper{font-size:7px}.panel-title{padding-top:22px}.side-scroll{overflow:visible}.top-actions{gap:4px}}