:root{--ink:#d9edf3;--muted:#7897a7;--border:rgba(122,181,197,.15);--panel:rgba(7,23,34,.94);--cyan:#4bdfdf;--blue:#6f9ff9;--mint:#7ccda5;--orange:#ffba73;--font:'Inter',system-ui,sans-serif;--mono:'DM Mono',monospace}
*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden;font-family:var(--font);background:#06131d;color:var(--ink)}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}#viewport{position:absolute;width:100%;height:100%;display:block;outline:none}#vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(3,14,24,.45),transparent 26%,transparent 70%,rgba(3,14,24,.35)),linear-gradient(180deg,rgba(3,14,24,.40),transparent 18%,transparent 75%,rgba(3,14,24,.37))}#grid-overlay{position:absolute;inset:0;pointer-events:none;opacity:.10;background-image:linear-gradient(transparent 49%,rgba(96,170,188,.12) 50%,transparent 51%);background-size:100% 4px}
.topbar{position:absolute;top:0;left:0;right:0;min-height:77px;display:flex;align-items:center;gap:30px;padding:0 25px;background:linear-gradient(180deg,rgba(5,18,28,.98),rgba(6,21,31,.88));border-bottom:1px solid var(--border);z-index:10;backdrop-filter:blur(15px)}.brand{display:flex;align-items:center;gap:13px;flex:1;min-width:300px}.brandmark{height:42px;width:42px;display:grid;place-items:center;background:rgba(62,219,218,.09);border:1px solid rgba(70,225,217,.35);color:var(--cyan);border-radius:10px;font-size:31px;line-height:1}.eyebrow{font:500 9px var(--mono);letter-spacing:1.8px;color:#6f9aad}.brandtitle{font-weight:800;font-size:19px;letter-spacing:2.1px;margin-top:4px}.brandtitle span{color:var(--cyan);font-weight:500}.live-dot,.status-indicator,.pulse{display:inline-block;width:6px;height:6px;background:var(--cyan);border-radius:100%;box-shadow:0 0 13px var(--cyan);vertical-align:middle;margin:0 7px}.top-stat{display:flex;flex-direction:column;gap:6px}.top-stat>span{font:500 9px var(--mono);letter-spacing:1.4px;color:var(--muted)}.top-stat strong{font:500 11px var(--mono);letter-spacing:.4px}.top-stat em{color:var(--cyan);font-style:normal}.top-status{background:rgba(67,214,172,.065);border:1px solid rgba(97,205,174,.23);color:#9ad9bf;padding:11px 12px;border-radius:5px;font:500 9px var(--mono);letter-spacing:1px;white-space:nowrap}.top-status .status-indicator{background:#7dccae;box-shadow:0 0 12px #61c7a4;margin:0 8px 0 0}
.left-panel,.right-panel{position:absolute;top:93px;bottom:93px;z-index:8;background:var(--panel);border:1px solid rgba(118,175,196,.20);backdrop-filter:blur(24px);box-shadow:0 12px 45px #030d15b8;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#1a3946 transparent}.left-panel{left:18px;width:327px}.right-panel{right:18px;width:302px}.panel-top{display:flex;align-items:flex-start;justify-content:space-between;padding:23px 20px 18px;border-bottom:1px solid var(--border)}h2{font-size:17px;letter-spacing:-.2px;font-weight:650;margin:6px 0 0}.pill{font:500 9px var(--mono);color:#9dd7b4;border:1px solid #2a6653;background:#123229;padding:6px 7px;border-radius:4px;letter-spacing:1px}.section-sub{padding:20px 20px 11px;display:flex;justify-content:space-between;color:#7eacbd;font:500 9px var(--mono);letter-spacing:1.4px}.section-sub span{color:#486879}.metric-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:0 17px}.metric{background:#0d2837a0;border:1px solid rgba(101,157,181,.14);border-radius:5px;padding:12px 10px 11px;min-height:99px}.metric>span{font:500 8px var(--mono);letter-spacing:.3px;color:#8da6b3;white-space:nowrap}.metric strong{display:flex;flex-wrap:wrap;align-items:baseline;gap:5px;margin-top:12px}.metric b{font:500 21px var(--mono);letter-spacing:-1.2px;color:#e8fcfd}.metric small{font:400 9px var(--mono);color:var(--muted)}.sparkline{width:80px;height:6px;margin-top:10px;border-radius:10px;background:linear-gradient(90deg,#154454,#1b8a97,#59d0d0);opacity:.8}.meter-track{margin-top:12px;width:100%;height:3px;background:#1b3444;overflow:hidden;border-radius:3px}.meter-fill{height:100%;background:var(--cyan);width:70%;box-shadow:0 0 10px var(--cyan);transition:width .4s}.meter-fill.secondary{background:var(--blue)}.meter-fill.mint{background:var(--mint)}.process-chain{padding:0 17px;display:flex;flex-direction:column;gap:3px}.process-step{display:flex;align-items:center;gap:10px;text-align:left;padding:10px 8px;background:transparent;border:1px solid transparent;color:var(--ink);border-radius:4px}.process-step.active,.process-step:hover{background:#123342;border-color:#285568}.step-symbol{display:grid;place-items:center;width:31px;height:31px;font:500 11px var(--mono);border:1px solid #2d6571;color:var(--cyan);background:#133641;border-radius:50%}.process-step span:nth-child(2){flex:1}.process-step strong{font-size:11px;font-weight:650;display:block}.process-step small{font:400 9px var(--mono);color:var(--muted);display:block;margin-top:4px}.process-step i{width:5px;height:5px;border-radius:50%;background:#5dd9ba}.util-row{display:flex;justify-content:space-between;margin:1px 20px 10px;font:400 10px var(--mono);color:#a9bec7}.util-row strong{font-weight:500;color:#e4f5f5}.util-row.faded{color:#658695;margin:11px 20px 0}.thin-meter{height:6px;margin:0 20px;background:#1c3746;border-radius:7px;overflow:hidden}.thin-meter>div{height:100%;width:0;background:linear-gradient(90deg,#257d9a,#5fe5d8);transition:width .7s}.chart-title{margin:0 19px;display:flex;justify-content:space-between;font:400 10px var(--mono);color:#c3d7db}.chart-title strong{font-weight:500}#trendChart{display:block;width:calc(100% - 38px);height:110px;margin:8px 19px 2px}.legend{display:flex;justify-content:space-between;margin:3px 20px 16px;font:400 9px var(--mono);color:#7192a3}.legend i{display:inline-block;vertical-align:middle;height:2px;width:14px;margin-right:5px}.legend-cyan{background:var(--cyan)}.legend-dash{border-top:1px dashed #7394ad}
.panel-icon{border:1px solid #2b5264;padding:7px;color:var(--cyan);border-radius:5px}.scenario-grid{padding:0 17px;display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.scenario{border:1px solid #264657;color:#8ca7b4;background:#102937;font:500 9px var(--mono);padding:10px 0;border-radius:3px;letter-spacing:-.5px}.scenario.active{color:#052632;background:var(--cyan);border-color:var(--cyan);font-weight:700}.setting{padding:14px 19px 2px}.setting-label,.range-ends{display:flex;justify-content:space-between;align-items:center}.setting-label label{font-size:11px;color:#b9ccd2}.setting-label strong{color:#5ce4e2;font:500 12px var(--mono)}input[type=range]{appearance:none;-webkit-appearance:none;display:block;width:100%;height:4px;border-radius:4px;outline:none;margin:17px 0 12px;background:#264352;accent-color:var(--cyan)}input[type=range]::-webkit-slider-thumb{appearance:none;width:12px;height:12px;border:3px solid var(--cyan);background:#0f3340;border-radius:50%;box-shadow:0 0 10px #3adad35a}.range-ends{font:400 8px var(--mono);color:#5e8190;letter-spacing:.4px}.subheading{font:500 9px var(--mono);letter-spacing:1.4px;color:#7eacbd;padding:23px 19px 10px}.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:9px 19px;font-size:11px;color:#b4cad0}.switch{width:29px;height:16px;border-radius:16px;background:#25414f;border:1px solid #426371;padding:2px;transition:.2s}.switch span{display:block;width:10px;height:10px;background:#7b98a6;border-radius:50%;transition:.2s}.switch.on{background:#15545a;border-color:#32b8bb}.switch.on span{background:var(--cyan);transform:translateX(13px)}.play-row{display:flex;gap:6px;padding:0 18px}.primary-button{flex:1;border:0;border-radius:4px;background:var(--cyan);color:#052833;padding:12px 5px;font:700 10px var(--mono);letter-spacing:.1px}.small-button{background:#163341;color:#91b9c7;border:1px solid #2c5361;font:600 12px var(--mono);border-radius:4px;min-width:38px}.warning{font:400 10px/1.6 var(--mono);color:#8ecdb4;background:#10362e87;border:1px solid #215b47;padding:12px;margin:18px;border-radius:4px}.warning span{margin-right:6px}.warning.alert{color:#ffc595;border-color:#98623a;background:#39291eaa}
.bottom-toolbar{position:absolute;left:18px;right:18px;bottom:16px;z-index:8;min-height:57px;display:flex;align-items:center;gap:15px;padding:7px 14px;background:rgba(6,23,34,.91);border:1px solid rgba(117,178,196,.19);backdrop-filter:blur(18px);border-radius:5px}.coord{display:flex;gap:8px;align-items:center;flex:1;white-space:nowrap}.coord strong{font:500 10px var(--mono);letter-spacing:.5px}.coord small{font:400 9px var(--mono);color:#6491a4;margin-left:10px}.toolbar-actions{display:flex;gap:4px}.view{font:500 9px var(--mono);color:#8eafbd;background:#133040;border:1px solid transparent;border-radius:3px;padding:11px 13px}.view.active{color:var(--cyan);background:#1a4650;border-color:#2b777d}.help{flex:1;text-align:right;color:#7895a3;font:400 9px var(--mono);white-space:nowrap}.help b{color:#d7edf0;font-weight:500}.map-key{position:absolute;bottom:93px;left:365px;z-index:5;display:flex;gap:18px;font:500 8px var(--mono);letter-spacing:.6px;color:#b8d1d8;background:rgba(7,24,35,.62);padding:11px 13px;border:1px solid var(--border);border-radius:4px}.map-key i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;vertical-align:middle}.key-sea{background:#3989aa}.key-pretreat{background:#e9b67d}.key-ro{background:#4fd1cd}.key-out{background:#8ccaac}
.inspector{position:absolute;z-index:11;right:335px;bottom:95px;width:290px;padding:23px;background:rgba(6,23,34,.96);border:1px solid #31717f;box-shadow:0 0 35px #03111eaf;transition:opacity .2s}.inspector.hidden{display:none}.inspector>button{position:absolute;right:10px;top:8px;color:#a0c4c8;font-size:21px;border:0;background:none}.inspector h3{margin:9px 0 13px;font-size:16px}.inspector p{font:400 11px/1.6 var(--font);color:#9dbbc5}.inspect-specs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px}.inspect-specs>div{border:1px solid #2d4955;background:#102e3d;padding:9px;font:500 11px var(--mono)}.inspect-specs small{display:block;font-size:8px;color:#80a6b5;margin-bottom:7px}.loading{position:absolute;z-index:30;inset:0;background:#051722;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px}.loading-icon{height:60px;width:60px;border:1px solid #3f9c9d;border-radius:18px;color:var(--cyan);font-size:55px;display:grid;place-items:center}.loading-title{font-weight:800;font-size:22px;letter-spacing:3px;margin-top:9px}.loading-caption{font:500 9px var(--mono);color:#7ba5b2;letter-spacing:2px}.loading-track{width:250px;height:3px;background:#21404e;margin-top:20px}.loading-track>div{height:100%;width:0;background:var(--cyan);transition:width .2s}.loading #loadingDetails{font:400 9px var(--mono);color:#668d9b;margin-top:3px}#errorPanel{position:absolute;z-index:50;left:50%;top:50%;transform:translate(-50%,-50%);max-width:580px;background:#141f2b;border:1px solid #bb795e;border-radius:8px;padding:25px;font:13px/1.7 var(--mono);color:#ffe2d3}
@media(max-width:1450px){.topbar{gap:15px}.left-panel{width:293px}.right-panel{width:278px}.map-key{left:315px}.view{padding:11px 9px}.help{display:none}}
@media(max-width:1100px){.top-stat.desktop,.top-stat:not(.desktop),.help,.map-key{display:none}.left-panel{width:255px}.right-panel{width:260px}.metric-grid{grid-template-columns:1fr 1fr}.metric b{font-size:17px}.bottom-toolbar{justify-content:center}.coord{flex:0 1 auto}.toolbar-actions{flex:1;justify-content:flex-end}}
@media(max-width:730px){.topbar{padding:0 12px;min-height:62px}.brand{min-width:0}.brandtitle{font-size:12px}.eyebrow{font-size:7px}.top-status{font-size:7px;padding:7px}.left-panel{left:8px;top:72px;bottom:auto;width:calc(50% - 12px);max-height:38%;}.right-panel{right:8px;top:72px;bottom:auto;width:calc(50% - 12px);max-height:38%}.panel-top{padding:13px 10px}.panel-top h2{font-size:12px}.section-sub{padding:13px 10px 8px}.metric-grid{padding:0 8px}.metric{min-height:78px;padding:8px 5px}.metric>span{font-size:7px}.metric b{font-size:15px}.metric small{font-size:7px}.scenario-grid{padding:0 8px}.setting{padding:11px 9px 0}.setting-label label{font-size:9px}.toggle-row{padding:7px 9px}.bottom-toolbar{left:7px;right:7px;bottom:7px;flex-wrap:wrap;min-height:45px;padding:6px}.coord{display:none}.toolbar-actions{justify-content:center;flex-wrap:wrap}.view{font-size:8px;padding:8px 7px}.inspector{right:8px;bottom:68px;width:min(280px,calc(100% - 16px))}}