:root{color-scheme:dark;--bg:#06151f;--panel:#0c202c;--surface:#102a38;--border:#254352;--line:rgba(130,179,190,.18);--text:#d7e8ec;--muted:#7894a2;--accent:#4bd6be;--orange:#e2b16b;--blue:#7fb9e7}*{box-sizing:border-box}html,body,#application{width:100%;height:100%;margin:0;overflow:hidden}body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;background:var(--bg);color:var(--text);font-size:12px}button,input,select{font:inherit}button{color:inherit;cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.topbar{height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 24px 0 18px;border-bottom:1px solid #1f3e4b;background:#0a202b;gap:10px}.brand{display:flex;align-items:center;gap:13px;min-width:0}.brandmark{height:43px;width:43px;flex:none;border:1px solid #48c7b8;display:grid;place-items:center;transform:skew(-8deg);box-shadow:inset 0 0 17px #1e746e,0 0 13px #225e6b}.brandmark span{font-size:24px;font-weight:900;color:#78ede0}.brandtitle{font-weight:800;font-size:16px;letter-spacing:2.2px;white-space:nowrap}.brandtitle em{color:#419c9d;font-style:normal;margin:0 3px}.brandsub{font-size:8.6px;letter-spacing:1.65px;color:#718e9b;margin-top:5px}.brandsub .dot{color:#66d5c7}.header-right{display:flex;align-items:center;gap:20px;white-space:nowrap}.status{font-size:10px;font-weight:750;letter-spacing:1px;color:#72e6b9}.pulse{display:inline-block;width:7px;height:7px;border-radius:100%;background:#54d9a9;box-shadow:0 0 13px #27cb9d;margin-right:8px;animation:pulse 2s infinite}@keyframes pulse{50%{opacity:.45}}.header-time{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;color:#a7bdc6;font-size:12px}.top-btn{background:none;border:1px solid #315364;padding:9px 12px;font-size:10px;letter-spacing:1px}.top-btn:hover{border-color:var(--accent);color:var(--accent)}.workspace{height:calc(100% - 70px);display:grid;grid-template-columns:302px minmax(300px,1fr) 305px;min-height:0}.sidebar{min-height:0;overflow:auto;background:#0a1e29;scrollbar-width:thin;scrollbar-color:#2a5865 transparent}.left{border-right:1px solid #264452;padding:19px 17px 22px}.right{border-left:1px solid #264452;padding:18px 19px 20px}.section-header{font-size:10px;letter-spacing:1.7px;font-weight:750;color:#bfd1d7;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:15px;margin-top:8px}.section-header .tiny{font-size:8px;letter-spacing:1px;color:#5dd8c6;border:1px solid #2f7975;padding:3px 6px}.summary-box{background:linear-gradient(115deg,#173a47,#0b2633);border:1px solid #25556a;padding:17px 15px;margin:8px 0 14px;position:relative}.summary-box:before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:#5fdfc7}.summary-label{color:#89a9b2;font-size:9px;letter-spacing:1.25px;font-weight:700}.hero-value{font-family:ui-monospace,Consolas,monospace;font-size:37px;letter-spacing:-1.8px;color:#e9fbf8;font-weight:600;margin:7px 0 5px}.mini-line{font-size:8.5px;letter-spacing:.9px;color:#7498a3;display:flex;justify-content:space-between}.good{color:#58dbaa!important}.metric-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 25px}.metric{background:#0e2935;border:1px solid #1d3d4a;padding:13px 10px;display:flex;flex-direction:column;gap:7px}.metric span{font-size:8.5px;color:#87a5af;letter-spacing:.5px;font-weight:700}.metric strong{font-size:19px;letter-spacing:-.6px;color:#c9e9eb}.metric small{font-size:8px;color:#5f8291;letter-spacing:1px}.stage-list{margin:-6px 0 25px}.stage{display:flex;text-align:left;align-items:center;gap:9px;width:100%;background:transparent;padding:9px 4px;border:0;border-bottom:1px solid var(--line);position:relative}.stage:hover,.stage.active{background:#123542}.stage-number{color:#5995a4;font:11px ui-monospace,monospace;border:1px solid #315966;padding:5px 5px}.stage-desc{min-width:0;flex:1;display:flex;flex-direction:column;gap:4px}.stage-desc strong{font-weight:650;font-size:10.5px;color:#bdd8dc;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.stage-desc span{font-size:9px;color:#648a98}.stage-meter{width:30px;height:3px;background:#244350;display:block;flex-shrink:0}.stage-meter i{display:block;height:100%}.chart-header{display:flex;justify-content:space-between;font-size:10px;color:#9bb8c0;margin-top:6px}.chart-header strong{color:var(--accent)}#trend{width:100%;height:92px;display:block;margin:6px 0 4px}.muted-note{color:#648593;font-size:10px;line-height:1.65;margin-top:15px}.viewport-wrap{position:relative;min-width:0;min-height:0;overflow:hidden;background:radial-gradient(ellipse at 45% 25%,#153744,#081822 63%,#07131c)}#scene{width:100%;height:100%;display:block;touch-action:none;cursor:grab}#scene:active{cursor:grabbing}.viewport-toolbar{position:absolute;top:17px;left:17px;right:17px;z-index:5;display:flex;align-items:start;justify-content:space-between;gap:10px;pointer-events:none}.viewport-toolbar button{pointer-events:all}.mode-toggle{display:flex;background:#09232fcc;border:1px solid #2f5261;padding:4px;gap:4px}.mode-toggle button{border:0;background:transparent;padding:10px 13px;color:#90aab3;font-size:9px;letter-spacing:1px;white-space:nowrap}.mode-toggle button.selected{background:#225b63;color:#b3fff0;box-shadow:inset 0 -2px #4fd6c3}.tools{display:flex;gap:5px}.tools button{border:1px solid #37606c;background:#0a2a39e8;font-size:20px;width:37px;height:37px}.tools button:hover{background:#24546a}.viewport-fade{position:absolute;pointer-events:none;inset:0;box-shadow:inset 0 0 160px #020d1769}.zone-labels{position:absolute;inset:0;pointer-events:none}.zone-marker{position:absolute;transform:translate(-50%,-50%);padding:6px 9px;white-space:nowrap;pointer-events:all;background:#0a2436e5;border:1px solid #42818a;color:#bddde2;font-size:10px;box-shadow:0 2px 10px #0019;display:flex;align-items:center;gap:9px;letter-spacing:.15px}.zone-marker:hover,.zone-marker.focused{border-color:#4ce8c5;background:#19444a;color:#f0fffb}.marker-code{font:700 10px ui-monospace,Consolas,monospace;color:#6ee0d0;border-right:1px solid #467078;padding-right:7px}.viewport-corner{position:absolute;bottom:17px;font:10px ui-monospace,monospace;letter-spacing:.7px;color:#7db1b9;z-index:3;text-shadow:0 1px 3px #001}.left-bottom{left:19px;display:flex;gap:8px;flex-wrap:wrap;max-width:65%;align-items:center}.crosshair{font-size:17px;color:#56dbc7}.view-hint{color:#527f8b;margin-left:8px}.right-bottom{right:18px;text-align:right;display:flex;flex-direction:column;gap:5px;color:#64929f;font-size:9px}.loading,.error-box{position:absolute;z-index:30;left:50%;top:50%;transform:translate(-50%,-50%);padding:17px 24px;border:1px solid #3b887d;background:#0d3540;color:#a5ffdf;font-size:11px;letter-spacing:1px}.loading.hidden{display:none}.error-box{width:min(90%,480px);border-color:#d26b6b;color:#ffd5d5}.tabs{display:flex;margin:0 0 25px;border:1px solid #2b4c58}.tabs button{flex:1;border:0;background:#0c2934;color:#789fa9;padding:12px 7px;font-size:10px;letter-spacing:1px;font-weight:750}.tabs button.active{background:#1c4d53;color:#a7f6df;box-shadow:inset 0 -2px #50dbbb}.tab-panel{display:none}.tab-panel.active{display:block}.panel-label{color:#a8c5cc;font-size:10px;letter-spacing:1.2px;font-weight:750;display:flex;justify-content:space-between;margin:0 0 15px}.panel-label .good{font-size:9px;letter-spacing:0}.big-controls{display:flex;gap:8px;margin-bottom:22px}.big-controls button,.wide{padding:12px;border:1px solid #386271;background:#173745;font-size:10px;font-weight:800;letter-spacing:1.2px}.big-controls button{flex:1}.primary{background:#2a807f!important;border-color:#5bc3b7!important;color:#e8fffc!important}.primary:hover{background:#3b9796!important}.field{display:flex;flex-direction:column;gap:11px;margin-bottom:20px}.field label{display:flex;justify-content:space-between;font-size:10px;color:#97b5bd}.field output{font-family:ui-monospace,Consolas,monospace;color:#5fe0c9;font-weight:700}.field input[type=range]{width:100%;margin:0;appearance:none;background:linear-gradient(90deg,#2b8685,#284750);height:4px;outline:none;cursor:pointer}.field input[type=range]::-webkit-slider-thumb{appearance:none;background:#9be7da;border:2px solid #1e6f6f;width:14px;height:14px;border-radius:50%}.field select{width:100%;padding:11px;border:1px solid #2d5864;background:#112e3c;color:#d6e6e9;outline:0}.toggle-row{margin:11px 0 18px;color:#a8c3ca;font-size:10px}.toggle-row input{accent-color:#4dceb1;vertical-align:middle;margin-right:8px}.divider{height:1px;background:var(--line);margin:25px 0 21px}.statline{display:flex;justify-content:space-between;font-size:10px;padding:12px 0;border-bottom:1px solid #193745;color:#7d9eaa}.statline b{color:#d0e8ee;letter-spacing:.3px}.right-footer{border-top:1px solid #274551;margin-top:37px;padding-top:13px;display:flex;flex-direction:column;gap:9px}.right-footer div{font-size:8.5px;letter-spacing:.65px;color:#577e89;display:flex;justify-content:space-between;gap:7px}.right-footer strong{color:#78a6af;text-align:right}.selection-box{border:1px solid #315660;padding:14px;background:#102d3b;margin-bottom:19px}.selection-box small{color:#6b9aab;letter-spacing:1px;font-size:8px}.selection-box strong{display:block;margin:11px 0;color:#bff2e3;font-size:13px}.selection-box p{color:#87acb7;line-height:1.65;margin-bottom:0}.micro-preview{position:relative;height:177px;margin-bottom:25px;background:#061c27;border:1px solid #274e5a}.micro-preview canvas{width:100%;height:100%;display:block}.scan-corner{position:absolute;width:14px;height:14px;pointer-events:none}.c1{left:6px;top:6px;border-left:2px solid #6dd3bc;border-top:2px solid #6dd3bc}.c2{right:6px;top:6px;border-right:2px solid #6dd3bc;border-top:2px solid #6dd3bc}.c3{left:6px;bottom:6px;border-left:2px solid #6dd3bc;border-bottom:2px solid #6dd3bc}.c4{right:6px;bottom:6px;border-right:2px solid #6dd3bc;border-bottom:2px solid #6dd3bc}.wide{width:100%}.event{border-left:2px solid #306b76;border-bottom:1px solid var(--line);padding:12px 11px;margin-bottom:9px;background:#102936}.event.alarm{border-color:#d78d73}.event.recover{border-color:#5ddab4}.event.scenario{border-color:#e7bb68}.event-row{display:flex;justify-content:space-between;color:#a5ded4;letter-spacing:1px;font-size:9px}.event-row time{color:#6a95a2}.event p{color:#9ab5bd;line-height:1.6;font-size:10px}.modal-backdrop{position:fixed;inset:0;background:#021018db;z-index:100;display:grid;place-items:center}.modal-backdrop[hidden]{display:none}.modal{width:min(510px,92vw);border:1px solid #3d877e;background:#112c38;padding:30px 35px;position:relative;box-shadow:0 15px 90px #0009}.modal h2{font-size:23px;font-weight:600}.modal p{font-size:12px;line-height:1.9;color:#aac4c9}.modal button.primary{padding:12px 15px;letter-spacing:1px;font-weight:750;border:1px solid #5dbbae}.modal-close{position:absolute;right:12px;top:8px;background:none;border:none;font-size:26px;color:#9edbd1}@media(max-width:1280px){.workspace{grid-template-columns:255px minmax(320px,1fr) 268px}.left,.right{padding:14px 12px}.brandtitle{font-size:13px}.mode-toggle button{padding:9px 8px;font-size:8px}.zone-marker{font-size:8px}}@media(max-width:990px){.workspace{grid-template-columns:220px minmax(320px,1fr)}.right{display:none}.brandsub{font-size:7px}.header-right{gap:8px}.topbar{padding:0 12px}.zone-marker{padding:4px}}@media(max-width:680px){.topbar{height:59px}.workspace{height:calc(100% - 59px);grid-template-columns:minmax(0,1fr)}.left{display:none}.brandtitle{font-size:11px;letter-spacing:1px}.brandsub{font-size:6px;letter-spacing:.7px}.brandmark{height:34px;width:34px}.header-time,.status,.top-btn#snapshot{display:none}.mode-toggle button{font-size:8px;padding:9px 5px}.viewport-toolbar{left:5px;right:5px;top:8px}.zone-marker{font-size:7px}.marker-code{font-size:7px}.left-bottom{font-size:8px}.view-hint{display:none}}
