:root{color-scheme:dark;--bg:#07121b;--panel:#0e1b25;--panel2:#101f29;--line:#263741;--text:#e8f0f1;--muted:#718b9a;--cyan:#70d7db;--green:#a5d7b1;--amber:#ebb978;--orange:#e6a474;--blue:#8dbcf1;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}html,body{margin:0;min-width:320px;min-height:100%;background:var(--bg);color:var(--text)}button,input{font:inherit}button{cursor:pointer}#app{min-height:100vh}.topbar{height:72px;border-bottom:1px solid #263740;background:#0c1922;display:flex;align-items:center;justify-content:space-between;padding:0 24px;gap:15px}.brand{display:flex;align-items:center;gap:12px}.brand-symbol{width:39px;height:39px;border-radius:11px;background:linear-gradient(140deg,#184b56,#173a43);display:flex;align-items:center;justify-content:center;border:1px solid #386570}.brand-wave{font-size:32px;font-weight:700;line-height:1;color:#74e2e2;transform:translateY(-3px)}.brand-txt strong{display:block;font-weight:790;font-size:17px;letter-spacing:2px}.brand-ext{color:#7cd5da;font-weight:400;font-size:12px;margin-left:6px;letter-spacing:0}.brand-txt small{display:block;font-size:8px;color:#7898a2;letter-spacing:2.05px;margin-top:4px;font-weight:700}.header-system{display:flex;gap:10px;align-items:center;color:#9bb1b6;font-size:10px;letter-spacing:1.2px;font-weight:750}.live-dot{width:7px;height:7px;display:inline-block;border-radius:50%;background:#65d6b1;box-shadow:0 0 11px #65d6b1}.header-divider{background:#30434e;height:16px;width:1px;margin:0 10px}.header-actions{display:flex;gap:9px;align-items:center}.engine-chip{font:700 9px/1 ui-monospace,monospace;letter-spacing:.6px;color:#93a7aa;border:1px solid #30464e;padding:8px;border-radius:4px}.btn-quiet{background:#16252f;border:1px solid #2e434e;color:#b7c8cf;padding:9px 12px;font-size:11px;border-radius:5px;font-weight:700}.btn-quiet:hover{color:white;border-color:#6dc2cc}.shell{display:flex;min-height:calc(100vh - 72px)}.rail{width:58px;flex:none;background:#0b1821;border-right:1px solid #24343d;display:flex;align-items:center;flex-direction:column;gap:13px;padding-top:28px;padding-bottom:18px}.rail-icon{border:0;background:none;color:#69818c;width:38px;height:38px;border-radius:6px;font-size:24px;line-height:1}.rail-icon:hover,.rail-icon.selected{color:#80e2dc;background:#1b363d}.rail-spacer{flex:1}.workspace{flex:1;min-width:0;padding:24px 21px 30px}.titleline{display:flex;gap:15px;align-items:flex-end;justify-content:space-between;margin-bottom:21px}.eyebrow,.section-kicker{font-size:9px;color:#6bbfbd;font-weight:800;letter-spacing:1.8px}.titleline h1{font-size:24px;font-weight:690;margin:8px 0 0;letter-spacing:-.55px}.titleline h1 span{font-weight:350;color:#bac8ca}.title-info{display:flex;align-items:center;gap:8px;padding-bottom:3px}.pill{font:700 9px ui-monospace,monospace;color:#acd7d4;background:#163038;border:1px solid #31525a;letter-spacing:.55px;padding:8px 9px;border-radius:4px}.pill.muted{color:#8199a3;background:#14232c;border-color:#30414a}.metrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:11px;margin-bottom:14px}.metric{border:1px solid #233741;background:linear-gradient(135deg,#112630,#0e1d27);min-width:0;border-radius:6px;padding:14px 14px 12px}.metric-label{font-size:9px;letter-spacing:1.15px;color:#8faab3;font-weight:800;display:flex;justify-content:space-between;align-items:center}.mini-led{display:inline-block;height:6px;width:6px;border-radius:50%;background:#79e0d3;box-shadow:0 0 6px #79e0d3}.mini-led.blue{background:#a9c9ff;box-shadow:0 0 8px #a9c9ff}.mini-led.amber{background:#f1bd82;box-shadow:0 0 8px #f1bd82}.mini-led.green{background:#a8dbb9;box-shadow:0 0 8px #a8dbb9}.metric-main{display:flex;align-items:baseline;gap:7px;margin-top:15px;white-space:nowrap}.metric-main strong{font-variant-numeric:tabular-nums;font-size:clamp(20px,2vw,29px);font-weight:690;letter-spacing:-.6px}.metric-main>span{font-size:10px;color:#88a2ae}.metric-foot{display:flex;justify-content:space-between;align-items:center;margin-top:14px;color:#64818c;font-size:9px;white-space:nowrap;overflow:hidden}.metric-arrow{color:var(--green);font-size:15px}.stage-wrap{min-width:0;display:flex;gap:12px;align-items:stretch}.stage-main{min-width:0;flex:1}.stage-main{border:1px solid #2d4248;border-radius:7px;overflow:hidden;background:#0c1c25}.viewport{height:clamp(500px,62vh,735px);min-height:400px;position:relative;overflow:hidden;background:linear-gradient(180deg,#628b9e 0%,#8caab1 52%,#172f37 100%);isolation:isolate}#scene{width:100%;height:100%;display:block;cursor:grab;touch-action:none}#scene:active{cursor:grabbing}.view-top{pointer-events:none;position:absolute;left:17px;right:17px;top:15px;display:flex;align-items:center;justify-content:space-between}.view-label{display:flex;gap:10px;align-items:center;background:#091c26d9;border:1px solid #46687588;border-radius:4px;padding:10px 11px;box-shadow:0 3px 16px #05101b36}.view-label strong{font-size:10px;letter-spacing:1.1px}.view-live{height:6px;width:6px;background:#8bebc6;border-radius:50%;box-shadow:0 0 7px #8bebc6}.view-coord{color:#7297a7;font-size:9px;letter-spacing:.4px;border-left:1px solid #45616b;padding-left:10px}.view-tools{display:flex;gap:5px;pointer-events:auto}.icon-button{background:#102c36d9;border:1px solid #4a747b88;border-radius:4px;width:32px;height:32px;font-size:18px;color:#c8d9de}.icon-button:hover,.icon-button.active{color:#92ecec;background:#1b4951}.pin-layer{position:absolute;inset:0;pointer-events:none}.site-pin{position:absolute;display:flex;align-items:center;flex-direction:column;transform:translate(-50%,-95%);pointer-events:auto;white-space:nowrap;cursor:pointer;background:transparent;border:0;padding:0}.site-pin .pin-dot{width:9px;height:9px;border:2px solid #e7ffff;background:#5bd1d7;border-radius:50%;box-shadow:0 0 0 5px #74d8d546,0 0 10px #7adbe3}.site-pin .pin-text{order:-1;background:#0d2833dc;color:#e3f0f4;font-size:9px;letter-spacing:.8px;font-weight:790;padding:6px 8px;border-radius:3px;border:1px solid #407782a3;margin-bottom:7px}.site-pin.active .pin-text{border-color:#73dddd;background:#1d4c54}.site-pin:after{content:'';display:block;height:18px;width:1px;background:#8ccbc9}.hud-left{position:absolute;bottom:65px;left:18px;width:196px;background:#061b23bc;border:1px solid #40616d73;border-radius:5px;padding:13px 15px;pointer-events:none}.hud-heading{font:800 9px ui-monospace,monospace;letter-spacing:1px;color:#88d3d4;margin-bottom:11px}.hud-detail{display:flex;align-items:center;justify-content:space-between;font-size:9px;color:#b8d4da;margin-top:9px}.hud-detail>span{color:#8cabba}.hud-detail>b{font-variant-numeric:tabular-nums;font-size:10px}.hud-bottom{position:absolute;bottom:12px;left:18px;right:18px;display:flex;gap:13px;align-items:center;pointer-events:none}.compass{border:1px solid #b6d6db4d;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;flex-direction:column;font-size:9px;font-weight:900;color:#e5f3f5;background:#0a232bb3}.compass i{font-size:16px;font-style:normal;color:#84e0db;line-height:15px}.range{margin-left:5px}.ruler{display:flex;align-items:flex-end;width:93px;height:8px;border-bottom:2px solid #eaf4f4}.ruler span{height:5px;width:33.33%;border-left:1px solid white}.ruler span:last-child{border-right:1px solid white}.range small{font-size:8px;color:#f0f7f7;letter-spacing:1px}.help-hint{margin-left:auto;color:#deebeb;font:700 9px ui-monospace,monospace;letter-spacing:.5px;text-shadow:0 2px 4px #03111a}.help-hint em{color:#59d2d2;font-style:normal;padding:0 6px}.center-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#0a1d27ed;padding:18px 28px;border:1px solid #4f8d94;color:#bce8e6;font-size:12px;letter-spacing:1px;display:flex;gap:14px;align-items:center;border-radius:6px}.spinner{height:18px;width:18px;border:2px solid #55808a;border-top-color:#8cffff;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.status-note{position:absolute;right:17px;bottom:53px;background:#0a1f2bd5;padding:8px 10px;border-radius:3px;border:1px solid #3c63698c;font:700 9px ui-monospace,monospace;letter-spacing:.6px;display:flex;align-items:center;gap:8px}.footer-strip{display:flex;justify-content:space-between;gap:10px;padding:11px 16px;font:650 9px ui-monospace,monospace;letter-spacing:.3px;color:#8aa6b3;background:#0b202b;border-top:1px solid #34505b}.footer-strip>span:first-child{color:#b6e2d0}.footer-strip b{color:#c2d9df}.bottom-panels{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr);gap:12px;margin-top:13px}.chart-panel,.split-panel{border:1px solid #2a404a;background:#0d1d28;border-radius:5px;padding:16px 16px 12px;min-width:0}.section-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.section-head h3{margin:6px 0 0;font-size:13px;font-weight:680}.chart-tabs{display:flex;gap:2px;border:1px solid #293e48;border-radius:4px;padding:2px}.tab{background:transparent;border:0;padding:6px 8px;border-radius:2px;color:#7996a0;font-size:10px}.tab.active{background:#1b3f49;color:#9ee6e4}.chart{height:92px;width:100%;margin-top:14px;display:block}.chart-axis{display:flex;justify-content:space-between;font-size:8px;color:#65838d}.symbol{font-size:24px;color:#6fbfb9}.split-visual{display:flex;height:15px;background:#172e38;border-radius:3px;overflow:hidden;gap:2px;margin-top:30px}.split-prod{background:linear-gradient(90deg,#358d9a,#76d2d0);width:45%}.split-brine{background:linear-gradient(90deg,#d39a72,#e6b688);flex:1}.split-legend{display:flex;gap:18px;justify-content:space-between;margin-top:14px;font-size:10px;color:#bbd0d2}.split-legend>div{display:flex;gap:8px;align-items:center}.legend-dot{width:8px;height:8px;display:inline-block;border-radius:2px}.legend-dot.teal{background:#60c9c9}.legend-dot.orange{background:#e6a878}.split-legend b{color:#e2eded}.split-note{font-size:10px;line-height:1.5;color:#6d8a98;margin:14px 0 0}.control-panel{width:290px;flex:none;border-left:1px solid #273b47;background:#10202b;padding:24px 18px;display:flex;flex-direction:column;gap:0}.control-top{padding-bottom:20px;border-bottom:1px solid #29404b}.op-header{display:flex;align-items:center;justify-content:space-between;margin-top:9px}.op-header h2{font-size:20px;font-weight:680;letter-spacing:-.4px;margin:0}.op-icon{border:1px solid #3a5d64;color:#90d2d2;border-radius:5px;padding:5px 8px}.control-top p{color:#78929c;font-size:11px;line-height:1.6;margin:12px 0 0}.control-subtitle{margin:20px 0 11px}.scenario-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:15px}.scenario{padding:9px 7px;text-align:left;border:1px solid #2e4852;border-radius:4px;background:#172b36;color:#a3b7c1;font-size:10px;font-weight:700}.scenario:hover,.scenario.active{border-color:#5e989e;color:#c9f5ed;background:#1e4148}.scenario:last-child{grid-column:span 2}.sliders{border-top:1px solid #2b414c;padding-top:4px}.control-row{margin-top:15px}.control-row>div{display:flex;justify-content:space-between;align-items:center;gap:7px}.control-row label{font-size:11px;font-weight:660;color:#cedde1}.control-row output{font:750 11px ui-monospace,monospace;color:#8cd9d5;white-space:nowrap}.control-row small{display:block;color:#6f8b97;font-size:9px;margin-top:5px}.control-row input[type=range]{appearance:none;width:100%;height:4px;border-radius:3px;cursor:pointer;background:linear-gradient(90deg,#63cac7 var(--pct,50%),#314854 var(--pct,50%));margin:14px 0 3px;display:block}.control-row input[type=range]::-webkit-slider-thumb{appearance:none;height:11px;width:11px;border:2px solid #8cebe4;background:#0f2832;border-radius:50%;box-shadow:0 0 0 3px #4d9f9d41}.control-row input[type=range]::-moz-range-thumb{height:9px;width:9px;border:2px solid #8cebe4;background:#0f2832;border-radius:50%}.health{margin-top:25px;border-top:1px solid #293f49;padding-top:20px}.health-heading,.speed-head{display:flex;justify-content:space-between;font-size:9px;font-weight:780;letter-spacing:.8px;color:#8aa6af}.health-heading b{color:#d9eae9;font-size:11px}.progress{height:7px;border-radius:3px;background:#2a434e;margin-top:12px;overflow:hidden}.progress>div{height:100%;width:50%;background:linear-gradient(90deg,#418f9f,#87d6d1)}.health-info{display:flex;justify-content:space-between;color:#6c8b98;font-size:9px;margin-top:8px}.control-bottom{margin-top:auto;border-top:1px solid #29404a;padding-top:18px}.speed-head{gap:5px}.speed-head span:last-child{color:#a5d8d7}.speed-row{display:flex;justify-content:space-between;gap:8px;margin-top:12px}.pause-btn{background:#24515a;color:#a6ece8;border:1px solid #477b83;border-radius:3px;font-size:11px;padding:7px 12px}.speed-options{display:flex;gap:3px}.speed{color:#92aab5;background:#1c3440;border:1px solid #32515a;padding:7px;font-size:10px;border-radius:3px}.speed.active{background:#31656b;color:#d3ffff}.reset-btn{width:100%;background:none;border:1px solid #35505a;color:#99bdc8;border-radius:4px;font-size:10px;margin-top:13px;padding:10px 6px}.reset-btn:hover{color:white;border-color:#71abb3}.modal{position:fixed;inset:0;z-index:50;background:#06121ac9;display:flex;justify-content:center;align-items:center;padding:20px}.modal.hidden{display:none}.modal-card{position:relative;max-width:565px;background:#102631;border:1px solid #4b7078;border-radius:8px;box-shadow:0 30px 70px #0009;padding:27px 30px}.modal-card h2{margin:10px 0}.modal-card p,.modal-card li{color:#b4cbd0;line-height:1.6;font-size:13px}.modal-card li{margin:10px 0}.modal-card a{color:#88d9da}.modal-close{position:absolute;right:14px;top:14px;border:0;background:none;color:#bad1d5;font-size:18px}.modal-bottom{font-size:10px;letter-spacing:.5px;color:#8fb6b7;margin-top:19px;border-top:1px solid #32515b;padding-top:15px}
@media(max-width:1350px){.control-panel{width:268px;padding:20px 13px}.workspace{padding:20px 14px}.title-info .pill:last-child{display:none}.metric-main strong{font-size:21px}.metric{padding:11px 10px}.metric-foot{font-size:8px}}
@media(max-width:1080px){.metrics{grid-template-columns:repeat(3,minmax(0,1fr))}.control-panel{width:260px}.footer-strip>span:nth-child(3),.footer-strip>span:nth-child(4){display:none}.help-hint{display:none}.view-coord{display:none}}
@media(max-width:760px){.topbar{padding:0 10px;height:59px}.brand-txt strong{font-size:13px}.brand-txt small{font-size:6px}.header-system,.engine-chip,.header-actions .btn-quiet:first-of-type{display:none}.shell{display:block}.rail{height:44px;width:auto;display:flex;flex-direction:row;padding:3px 7px;gap:8px;overflow:auto}.rail-icon{width:33px;height:33px;flex:none}.rail-spacer{display:none}.workspace{padding:13px 9px}.titleline{align-items:flex-start;display:block}.titleline h1{font-size:19px}.title-info{margin-top:12px}.metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.metrics .metric:last-child{grid-column:span 2}.metric-main strong{font-size:23px}.viewport{height:500px}.hud-left{display:none}.view-tools .icon-button{width:30px}.bottom-panels{grid-template-columns:1fr}.control-panel{width:auto;display:block;border-left:0;border-top:1px solid #29434d}.sliders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}.control-bottom{margin-top:25px}.status-note{font-size:8px}.footer-strip{flex-wrap:wrap;line-height:1.8}.footer-strip>span:nth-child(3){display:block}}

@media(max-width:1080px){.stage-wrap{display:block}.control-panel{width:auto;display:block;border:1px solid #29434d;border-radius:5px;margin-top:13px}.sliders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 19px}.control-bottom{margin-top:20px}}

.equipment-card{z-index:3;position:absolute;right:17px;top:62px;width:229px;border:1px solid #6ab7bc87;background:#092531ed;color:#d6e8ec;border-radius:5px;padding:14px;box-shadow:0 10px 35px #0006}.equipment-card.hidden{display:none}.equipment-card-head{display:flex;align-items:center;justify-content:space-between;color:#81d8d9;font:800 8px ui-monospace,monospace;letter-spacing:.9px}.equipment-card-head button{border:0;background:transparent;font-size:18px;color:#a1c5c9}.equipment-card>strong{font-size:13px;display:block;margin:12px 0 13px}.equipment-pair{display:flex;align-items:start;justify-content:space-between;gap:12px;font-size:9px;margin-top:10px}.equipment-pair span{color:#749eaa}.equipment-pair b{color:#deeff0;font-weight:700;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.stage-wrap{width:100%}
