:root{--bg:#08121a;--panel:#0a1721;--panel2:#101f29;--line:#24353e;--faint:#78909d;--text:#e6f1f0;--green:#37d9ba;--amber:#f5ae5b;--red:#fb626d}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);font-family:Inter,'Segoe UI',Arial,sans-serif;color:var(--text);font-size:12px}button,input{font:inherit}button{cursor:pointer}button:focus-visible{outline:2px solid var(--green);outline-offset:2px}#app{position:relative;width:100%;height:100%;min-width:940px}#viewport{position:absolute;left:338px;right:0;top:0;bottom:0;background:linear-gradient(180deg,#91bac6 0%,#bdd4d3 38%,#b5c8bf 56%,#687e75 100%)}#gl{width:100%;height:100%;display:block;outline:0}.film-grain{pointer-events:none;position:absolute;inset:0;opacity:.11;background-image:url('../../assets/textures/film-grain.png');background-size:192px;mix-blend-mode:soft-light}#sidebar{position:absolute;z-index:10;left:0;top:0;bottom:0;width:338px;background:#0a151e;border-right:1px solid #3a4549;display:flex;flex-direction:column;box-shadow:8px 0 26px #08111d45}.brand{display:flex;align-items:center;gap:12px;padding:24px 19px 22px;border-bottom:1px solid var(--line);flex-shrink:0}.brand-icon{width:38px;height:38px;border:1px solid #37d9ba60;color:#37d9ba;padding:7px;background:#15312f;border-radius:7px}.brand-icon svg{width:100%;height:100%}.brand-name{font-weight:900;font-size:16px;letter-spacing:1.5px;white-space:nowrap}.brand-name span{color:#48bfae;font-weight:600;font-size:12px}.brand-sub{font-size:9px;letter-spacing:1.55px;color:#718f9e;margin-top:5px}.icon-btn{border:1px solid #344951;background:transparent;color:#bcced1;border-radius:5px;width:27px;height:27px;margin-left:auto}.sidebar-scroll{padding:0 18px 25px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#31515d transparent}.group-heading{display:flex;justify-content:space-between;align-items:center;color:#acc1c6;letter-spacing:1.6px;font-size:10px;font-weight:800;margin:25px 0 12px}.group-heading span{font-size:9px;font-weight:600;letter-spacing:.6px;color:#7f969d}.group-heading .indicator{color:#51d7b1}.group-heading .blink-status{color:#51d7b1}.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.stat{min-height:95px;padding:12px;background:linear-gradient(125deg,#122530,#0d1c26);border:1px solid #293d45;border-radius:6px}.stat span{font-size:9px;color:#88a3ac;letter-spacing:1px;font-weight:700}.stat strong{display:block;margin:9px 0 5px;font-size:27px;font-weight:690;letter-spacing:-1px;font-variant-numeric:tabular-nums;line-height:1}.stat strong small{font-size:12px;font-weight:500;color:#9ab0b6}.stat em{font-style:normal;font-size:9px;color:#657f88}.tabs{display:flex;background:#101e28;border-radius:6px;border:1px solid #29404b;padding:3px;gap:3px}.tabs button{flex:1;background:none;border:0;color:#86a1ac;font-size:10px;letter-spacing:1px;font-weight:800;padding:8px 4px;border-radius:4px}.tabs .active{background:#26463e;color:#66edca}.site-list{max-height:157px;overflow:auto;border:1px solid #293b44;border-radius:6px;margin-top:9px;scrollbar-width:thin;scrollbar-color:#36515b transparent}.site-row{display:flex;gap:9px;align-items:center;text-align:left;color:#d1e2e4;background:#0e1c26;border:none;border-bottom:1px solid #23343c;padding:11px 11px;width:100%}.site-row:hover{background:#172e38}.site-row.active{background:#183b3a;border-left:3px solid #34d8b7;padding-left:8px}.site-row .si{border:1px solid #35535b;width:26px;height:26px;display:grid;place-items:center;color:#d1b880;border-radius:4px;font-size:13px;flex-shrink:0}.site-row .text-wrap{min-width:0;flex:1}.site-row .site-name{font-size:11px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.site-row .site-desc{font-size:9px;color:#7b969f;margin-top:4px}.site-row .state{font-size:9px;color:#56d3b4;margin-left:auto}.command-panel{border:1px solid #355059;border-radius:6px;background:#10212a;padding:12px}.command-top{display:flex;align-items:center;justify-content:space-between;gap:6px}.mini-label{font-size:9px;color:#78949e;letter-spacing:1.1px}.command-name{font-size:12px;font-weight:750;margin-top:4px}.status-pill{font-size:9px;color:#48e0bc;border:1px solid #287b6e;padding:4px 7px;border-radius:3px}.status-pill.active{color:#ffcb83;border-color:#b68549}.level-row{display:flex;justify-content:space-between;align-items:center;margin:17px 0 7px;gap:4px}.level-row span{font-size:9px;color:#90aab2}.level-row span:nth-child(3){font-size:15px;color:#52e1c4;font-weight:700;font-variant-numeric:tabular-nums}.level-row span:first-child,.level-row span:last-child{font-size:8px}.level-track{height:5px;border-radius:4px;background:#29424a;position:relative}.level-track>div:first-child{height:100%;background:linear-gradient(90deg,#147c8e,#37d7b5);width:20%;border-radius:4px}.level-pin{position:absolute;left:20%;top:-4px;width:3px;height:13px;background:#e4ffe0;box-shadow:0 0 8px #7dfce2}.schematic{height:119px;margin:10px -5px 7px}.schematic svg{height:100%;width:100%}.cmd-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px}.cmd-actions button,.bottom-tools button{padding:10px 5px;border:1px solid #344b55;border-radius:4px;background:#152a35;color:#d5e9e8;font-size:10px;font-weight:800;letter-spacing:.3px}.cmd-actions button:hover,.bottom-tools button:hover{border-color:#57baa7;background:#1c4244}.cmd-actions .primary{background:#207c70;border-color:#33beab;color:white}.cmd-actions .primary.alt{background:#19595d}.cmd-actions .wide{grid-column:span 2}.cmd-actions .emergency{color:#ff9ca2;border-color:#70373f;background:#332029}.cmd-actions .reset{color:#e7bf8a;border-color:#4f4637}.alarm-msg{font-size:9px;color:#89a4ac;line-height:1.5;margin-top:10px}.alarm-msg.error{color:#ff8b91}.sliders{background:#0d1b25;padding:13px;border:1px solid #293a44;border-radius:6px;display:grid;gap:13px}.sliders label{display:grid;grid-template-columns:1fr auto;align-items:center;font-size:10px;color:#a7bfc4;font-weight:700;letter-spacing:.7px}.sliders label strong{color:#70dfca}.sliders input{grid-column:span 2;width:100%;accent-color:#43d4b8;height:3px;margin:10px 0 0}.bottom-tools{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:17px 0}.bottom-tools button:last-child{grid-column:span 2}.overline{font-size:10px;letter-spacing:2.1px;font-weight:750;color:#e7f2ee}.live-dot,.small-live{width:7px;height:7px;border-radius:50%;background:#50f0ca;display:inline-block;margin-right:8px;box-shadow:0 0 9px #56ffc9}.mini-divider{height:12px;border-left:1px solid #fff6;display:inline;margin:0 13px}.overline b{font-weight:500;letter-spacing:1px}#viewport-overlay{position:absolute;top:32px;left:34px;pointer-events:none;text-shadow:0 2px 10px #17252a8a}.view-title{font-size:28px;font-weight:700;letter-spacing:-.65px;margin-top:9px}.view-sub{font-size:9px;color:#e4eeeb;letter-spacing:1.6px;margin-top:8px}.view-sub .sep{margin:0 10px}.compass{position:absolute;right:32px;top:34px;width:42px;height:42px;border-radius:50%;border:1px solid #e8ffedaa;display:grid;place-items:center;color:#e9f7f0;font-size:10px;text-shadow:0 1px 4px #0007;background:#1b393a44}.compass-arrow{font-size:16px;color:#e4f9f3;margin-bottom:-13px}.view-footer{position:absolute;bottom:20px;left:30px;right:31px;display:flex;align-items:center;gap:16px;font-size:9px;color:#e7f7f0;letter-spacing:1.2px;text-shadow:0 1px 6px #000d}.view-footer .footer-badge{border:1px solid #63dcc7aa;background:#12382dcf;padding:8px 10px;border-radius:4px}.view-footer span:last-child{margin-left:auto}.camera-tools{position:absolute;right:26px;bottom:22px;display:flex;gap:6px}.camera-tools button{width:34px;height:34px;border:1px solid #ffffff8c;border-radius:4px;color:#eff6f2;background:#1d393faa;font-size:19px}.camera-tools button:hover{background:#206b65}#right-widgets{pointer-events:none;position:absolute;right:26px;top:106px;width:276px;display:flex;flex-direction:column;gap:12px}.widget{pointer-events:auto;background:#0c1e29eF;backdrop-filter:blur(15px);border:1px solid #3b5961a8;border-radius:6px;padding:14px 13px;box-shadow:0 7px 25px #08182332}.widget-header{display:flex;justify-content:space-between;font-size:10px;font-weight:800;letter-spacing:1.25px;color:#d5e9e7}.widget-header .glyph{color:#58b2a4}.world-map canvas{display:block;width:100%;height:170px;margin-top:7px;cursor:crosshair}.map-legend{display:flex;justify-content:space-between;font-size:8px;color:#a6c0c1;letter-spacing:.3px;margin-top:2px}.map-legend i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#1ca7bc;margin-right:4px}.map-legend .amber{background:#ffae52}.map-legend .green{background:#3fe0af}.green-text{color:#5cddbd}.chart-heading{display:flex;justify-content:space-between;margin-top:15px}.chart-heading small{font-size:9px;color:#7896a2;letter-spacing:.65px}.chart-heading strong{display:block;font-size:27px;margin-top:2px;font-variant-numeric:tabular-nums}.chart-heading strong small{font-weight:400;color:#afc8ca;font-size:13px}.chart-arrow{font-size:28px;color:#4cdaba}.water-widget canvas{display:block;width:100%;height:86px}.chart-footer{font-size:8px;color:#819ba5;display:flex;justify-content:space-between;letter-spacing:.9px}.vessel-widget #vessel-list{margin-top:12px;display:flex;flex-direction:column;gap:7px}.vessel-row{display:flex;justify-content:space-between;align-items:center;font-size:10px;padding:2px 0;color:#bed1d2}.vessel-row b{font-size:10px;color:#e1e8e6;font-weight:700}.vessel-row em{font-style:normal;color:#69d8b6;font-size:9px}.vessel-row em.hold{color:#ffc074}.vessel-row small{color:#78929a}#toast{position:absolute;left:50%;bottom:75px;transform:translateX(-25%);background:#12302fee;border:1px solid #3dc4ae;color:#e3fff2;padding:12px 19px;border-radius:6px;opacity:0;pointer-events:none;transition:opacity .2s;box-shadow:0 12px 38px #06101588;z-index:30}#toast.show{opacity:1}dialog{background:#102530;color:#e5f1f0;border:1px solid #416c70;border-radius:9px;max-width:560px;padding:25px 30px;box-shadow:0 24px 80px #0009}dialog::backdrop{background:#02080db8}.dialog-top{display:flex;align-items:center;justify-content:space-between}.dialog-top h2{font-size:17px;letter-spacing:1.4px}dialog p{font-size:12px;line-height:1.8;color:#bed4d5}dialog .primary{padding:11px 15px;border-radius:4px;background:#1b8479;border:0;color:white;font-weight:bold}@media(max-height:830px){.brand{padding-top:15px;padding-bottom:15px}.stat{min-height:83px}.group-heading{margin-top:17px}.sidebar-scroll{padding-bottom:10px}.vessel-widget{display:none}}@media(max-width:1100px){#right-widgets{width:216px;right:17px}.world-map canvas{height:132px}.vessel-widget{display:none}.view-title{font-size:24px}}

.scenario{margin-bottom:10px;display:flex;flex-direction:column;gap:7px}.scenario label{color:#8aa7b2;font-size:9px;letter-spacing:1.2px}.scenario select{background:#112b35;color:#d8eee8;border:1px solid #315058;padding:10px 8px;border-radius:5px;font-size:11px}.scenario select option{background:#112630}