:root{color-scheme:dark;--bg:#07131b;--surface:#101f2a;--surface2:#132732;--panel:#0c1b25;--panel2:#101f2a;--line:#213744;--line2:#314954;--text:#d9e7ea;--muted:#718d9c;--mint:#57d1ad;--aqua:#58c9e5;--amber:#e9bb68;--red:#e47573;--round:7px}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;min-height:640px;background:var(--bg);color:var(--text);font:12px/1.45 Inter,system-ui,-apple-system,'Segoe UI',Arial,sans-serif}button,select,input{font:inherit}button{cursor:pointer}button:disabled{opacity:.43;cursor:not-allowed}button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--mint);outline-offset:3px}#app{height:100vh;min-height:640px;display:flex;flex-direction:column;overflow:hidden}.topbar{min-height:66px;height:66px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 22px;background:#091822;border-bottom:1px solid #24404d;z-index:3}.brand{display:flex;align-items:center;gap:12px;min-width:310px}.brand-icon{width:42px;height:42px;border:1px solid #39757d;border-radius:7px;color:#80ddd1;display:flex;align-items:center;justify-content:center;background:#122832;padding:6px}.brand-icon svg{width:100%}.wordmark{font-size:18px;font-weight:800;letter-spacing:2px;line-height:1.2}.wordmark small{font-size:8px;letter-spacing:1px;border:1px solid #517975;border-radius:3px;padding:2px 4px;vertical-align:middle;color:#84cbbb}.divider-word{color:#7ad6ce;font-weight:400;margin:0 5px}.subbrand{font-size:8px;letter-spacing:1.9px;color:#7f9da8;margin-top:3px}.header-center{display:flex;align-items:center;gap:14px;font-size:9px;letter-spacing:1.5px;color:#b3d3d7}.header-center i{height:15px;width:1px;background:#345260}.live-dot,.chip-green{width:7px;height:7px;border-radius:50%;background:var(--mint);display:inline-block;box-shadow:0 0 12px #49cda6}.top-actions{display:flex;align-items:center;gap:9px}.icon-button,.top-button{border:1px solid #345463;background:#172f3a;color:#cae3e7;border-radius:5px;font-size:9px;font-weight:700;letter-spacing:1px;padding:10px 12px}.icon-button{font-size:14px;padding:5px 11px}.top-button.outline{background:transparent}.top-button:hover,.icon-button:hover,.control-btn:hover{border-color:var(--mint);color:white}.app-grid{display:grid;grid-template-columns:288px minmax(0,1fr) 323px;flex:1;min-height:0}.sidebar-left,.sidebar-right{background:var(--panel);min-height:0;display:flex;flex-direction:column}.sidebar-left{border-right:1px solid var(--line)}.sidebar-right{border-left:1px solid var(--line)}.sidebar-scroll,.right-scroll{overflow-y:auto;overscroll-behavior:contain;padding:18px 16px 25px;scrollbar-color:#2a4d5a transparent;scrollbar-width:thin}.aside-top,.section-heading,.panel-head,.level-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.eyebrow,.section-heading,.panel-head,.level-header,.field-label,.label-tiny{font-size:9px;font-weight:800;letter-spacing:1.6px;color:#87a3ac}.small-tag{font-size:9px;letter-spacing:.6px;color:#679da6;border:1px solid #2d535d;border-radius:3px;padding:4px 6px}.metric-lead{border:1px solid #2a4856;border-radius:7px;padding:19px 14px 14px;background:linear-gradient(144deg,#122d36,#10232d 64%,#0c1e28);margin:16px 0 11px}.metric-lead>span{font-size:9px;letter-spacing:1.4px;color:#a4bdbd}.metric-lead strong{display:block;font-size:42px;line-height:1.1;letter-spacing:-1px;margin-top:8px;color:#dbf6ee}.metric-lead strong span{color:#70d5cc}.metric-lead strong small{font-size:17px;color:#8eb9c0;letter-spacing:0}.metric-lead p{font-size:10px;color:#83a0a8;margin:9px 0 1px}.side-metrics{display:grid;grid-template-columns:1fr 1fr;gap:7px}.side-metrics>div{background:#122732;border:1px solid #233c48;border-radius:5px;padding:12px 10px}.side-metrics strong{display:block;font-size:23px;font-weight:650;line-height:1.2}.side-metrics span{font-size:8px;letter-spacing:.7px;color:#769ba8}.section-heading{margin:22px 0 10px;padding-bottom:10px;border-bottom:1px solid var(--line);white-space:nowrap}.section-heading.first{margin-top:0}.tiny{font-size:8px;color:#66838e;font-weight:500;letter-spacing:.6px}.map-shell{background:#0b202a;border:1px solid #2b4b5a;border-radius:6px;padding:6px}.map-shell canvas{width:100%;height:135px;display:block;cursor:crosshair}.map-leg{display:flex;justify-content:space-between;gap:5px;padding:3px 6px 5px;font-size:9px;color:#6b8995}.map-leg span{display:flex;align-items:center;gap:5px}.map-leg i{width:9px;height:4px;display:inline-block;background:#2a8db0;border-radius:2px}.map-leg .legend-node{width:6px;height:6px;background:#8fe2b7;border-radius:50%}.site-list{display:flex;flex-direction:column;gap:4px}.site-item{display:flex;align-items:center;justify-content:space-between;text-align:left;background:transparent;color:#a7bec7;border:1px solid transparent;border-radius:5px;padding:9px 9px;min-height:42px;width:100%}.site-item:hover{background:#163440}.site-item.selected{background:#15343b;border-color:#33736f;color:#e0fff4}.site-item .site-number{font-size:9px;color:#6e98a6;min-width:24px}.site-item.selected .site-number{color:#7de3c3}.site-item>span:nth-child(2){flex:1}.site-item b{display:block;font-size:10px;font-weight:650;letter-spacing:.4px}.site-item small{display:block;font-size:9px;color:#6e8d9c;margin-top:2px}.site-item>em{font-style:normal;color:#6e9aa8;font-size:9px}.key-help{line-height:1.9;color:#688a98;font-size:9px;letter-spacing:.5px}.key-help b{color:#9fb8c1;font-weight:650}.legal-corner{font-size:8px;color:#4f7180;line-height:2;margin-top:25px}.workspace{display:flex;flex-direction:column;min-width:0;background:#0d1e28}.viewport{position:relative;min-height:250px;flex:1;overflow:hidden;background:radial-gradient(at 60% 15%,#567c8d,#1a3d50 45%,#102333)}#scene{width:100%;height:100%;display:block;touch-action:none}.scene-overlay{position:absolute;pointer-events:none}.top-left{left:27px;top:25px}.top-right{top:27px;right:29px;text-align:right}.bottom-left{left:26px;bottom:23px;display:flex;gap:7px;flex-wrap:wrap}.bottom-right{right:25px;bottom:19px;text-align:right}.scene-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border:1px solid #74999a77;background:#102a38c7;color:#a6e4de;font-size:8px;letter-spacing:1.3px;border-radius:3px}.scene-chip .chip-green{width:6px;height:6px}.dotsep{color:#839aa4}.scene-overlay h1{margin:14px 0 2px;color:#f0fafb;font-size:24px;line-height:1.2;font-weight:700;letter-spacing:1.4px;text-shadow:0 2px 10px #092432bb}.scene-overlay p{margin:0;font-size:10px;color:#c0d5d9;text-shadow:0 2px 5px #08212b}.scene-quality{color:#ecf7f7;font-size:11px;font-weight:700;letter-spacing:1px;margin:7px 0}.scene-quality span{color:#78b8c1;font-weight:500}.label-tiny{font-size:8px;color:#c6d8db}.view-tag{border:1px solid #7894a16b;background:#082532b3;color:#aacbd2;padding:6px 8px;font-size:8px;letter-spacing:.8px}.wind-indicator{font-size:11px;color:#e6f6fa;margin-bottom:6px}.camera-footnote{color:#b4d0d3;font-size:8px;letter-spacing:.6px}.loading-screen{position:absolute;inset:0;background:linear-gradient(150deg,#0b2533ee,#08161ef2);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:15px;z-index:2;text-align:center;padding:25px}.loading-screen[hidden]{display:none}.spinner{width:44px;height:44px;border:2px solid #38636d;border-top-color:#85e6d4;border-radius:50%;animation:spin .8s linear infinite}.loading-title{font-size:12px;letter-spacing:2px;font-weight:800}.loading-screen p{font-size:11px;color:#8facb7;max-width:360px;line-height:1.6;margin:0}@keyframes spin{to{transform:rotate(360deg)}}.hud-bar{background:#0e202b;border-top:1px solid #284550;border-bottom:1px solid #284550;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));min-height:88px}.hud-stat{padding:16px 15px;border-right:1px solid #27404b}.hud-stat:last-child{border-right:none}.hud-stat span{display:block;color:#7c9ca7;font-size:8px;letter-spacing:1px}.hud-stat strong{display:block;font-weight:650;font-size:24px;margin-top:7px;color:#e1f4ee;line-height:1}.hud-stat strong span{display:inline;font-size:24px;color:inherit;letter-spacing:0}.hud-stat strong small{font-size:11px;color:#82aeb6;font-weight:400}.bottom-panel{height:168px;flex-shrink:0;padding:12px 19px 10px;background:#0b1b25}.panel-head{margin:0 0 4px}.trend-area{height:130px}.trend-area canvas{display:block;width:100%;height:100%}.right-scroll{padding:17px 16px 20px}.station-online{color:#61d7b4;font-size:9px;letter-spacing:1px}.field-label{display:block;margin:14px 0 7px;color:#8eacb5}.select{display:block;width:100%;background:#152d38;border:1px solid #32515e;border-radius:4px;padding:10px 28px 10px 11px;color:#deeff1;outline:none;font-size:11px}.control-intro{display:flex;align-items:center;justify-content:space-between;padding:14px 0 10px;border-bottom:1px solid #24404b;margin-top:9px}.control-intro .field-label{margin:0 0 5px}.control-intro strong{font-size:12px;letter-spacing:1px}.status-pill{border-radius:3px;padding:5px 7px;color:#85d9bf;background:#244a43;border:1px solid #37645b;font-size:9px;letter-spacing:.7px}.level-card{border:1px solid #2d505d;background:#112a34;border-radius:6px;margin-top:12px;padding:12px}.level-header{font-size:8px}.level-header span:last-child{color:#7bdcc9}.level-profile{display:flex;gap:13px;margin:11px 0 0}.level-lane{width:45px;height:110px;border:2px solid #607d80;position:relative;background:#071821;flex-shrink:0;overflow:hidden;border-radius:2px}.water-fill{position:absolute;bottom:0;left:0;right:0;height:4%;background:linear-gradient(180deg,#5bd5df,#156ca4);transition:height .25s ease;opacity:.9}.upper-reference{position:absolute;top:2px;left:0;right:0;height:2px;background:#a7d3bd;z-index:2}.lower-reference{position:absolute;bottom:2px;left:0;right:0;height:2px;background:#f3ba6d;z-index:2}.profile-boat{position:absolute;bottom:3px;left:8px;color:#d9e8e1;font-size:23px;z-index:3;text-shadow:0 0 10px #093b4a}.level-scale{display:flex;flex-direction:column;justify-content:space-between;flex:1;gap:5px}.level-scale span{font-size:8px;letter-spacing:.7px;color:#769ba8}.level-scale b{display:block;font-size:14px;color:#d2e8e8;letter-spacing:0;margin-top:2px}.control-heading{margin-top:18px}.actuator{padding:4px 0 12px}.actuator>div:first-child{display:flex;align-items:center;justify-content:space-between}.actuator-label{font-size:9px;color:#9bb8c1;letter-spacing:.6px}.actuator b{color:#91dad7;font-size:11px;font-weight:650}.track{height:4px;border-radius:3px;background:#29434e;overflow:hidden;margin:8px 0 9px}.track>div{height:100%;width:0;background:linear-gradient(90deg,#288bb1,#5dd8c2);transition:width .2s}.control-btn{width:100%;padding:9px 6px;background:#17323e;border:1px solid #3c5b66;border-radius:4px;font-size:9px;font-weight:750;letter-spacing:.8px;color:#c4e2e4}.control-btn.active{background:#2a655f;color:#eafff8;border-color:#51a798}.dual-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}.dual-actions .actuator-label{font-size:8px}.dual-actions .actuator{min-width:0}.primary-command{width:100%;background:#27786b;border:1px solid #55c3a5;color:#e7fff6;font-weight:800;letter-spacing:.9px;font-size:10px;padding:14px 6px;border-radius:4px}.primary-command.active{background:#a57740;border-color:#e3b46e}.button-row{margin-top:9px}.emergency{width:100%;padding:11px;border:1px solid #8f4a4c;background:#42282c;color:#f3b2ac;border-radius:4px;font-size:10px;font-weight:800;letter-spacing:1px;margin-top:12px}.emergency:hover{background:#6f3436}.warning-box{border:1px solid #936f45;background:#423626;color:#eed3a0;padding:11px;margin-top:11px;border-radius:4px;font-size:10px}.warning-box[hidden]{display:none}.slider-row{padding:9px 0 10px}.slider-row>div{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}.slider-row label{font-size:9px;letter-spacing:.6px;color:#8aabb7}.slider-row b{color:#d1eeea;font-size:11px}.slider-row input{width:100%;accent-color:#6adbc0;cursor:pointer}.event-log{font-size:10px;max-height:180px;overflow-y:auto;scrollbar-width:thin}.log-item{border-left:2px solid #437684;padding:6px 7px;margin-bottom:5px;background:#142a33;color:#a9c2c8}.log-item.success{border-color:#55ba9d}.log-item.warning{border-color:#d7aa60}.log-item.danger{border-color:#e97876}.log-item small{font-size:8px;color:#6f94a1;margin-right:6px}.log-empty{color:#607f8c;font-size:10px;padding:12px}.side-footer{display:flex;gap:8px;justify-content:space-between;align-items:center;padding:12px 15px;background:#0a1720;border-top:1px solid #263f4c}.side-footer button{font-size:9px;font-weight:750;letter-spacing:.5px;background:#183440;color:#b8dcd9;border:1px solid #376573;border-radius:4px;padding:10px 11px}.side-footer span{font-size:8px;color:#587d8b;letter-spacing:1px;text-align:right}.modal-backdrop{position:fixed;inset:0;background:#02080cda;z-index:9;display:flex;align-items:center;justify-content:center;padding:25px}.modal-backdrop[hidden]{display:none}.modal-card{position:relative;background:#102934;border:1px solid #397c7b;border-radius:7px;max-width:530px;padding:27px 30px 30px;color:#d1e8e6;font-size:13px;line-height:1.65;box-shadow:0 22px 80px #0008}.modal-card h2{letter-spacing:1px;margin-top:0}.modal-card p{color:#a3c0c7}.modal-card .modal-warning{font-size:11px;color:#e4b875}.modal-x{position:absolute;top:12px;right:12px;background:transparent;color:white;font-size:24px;border:0}
@media(max-width:1300px){.app-grid{grid-template-columns:245px minmax(0,1fr) 295px}.header-center{display:none}.topbar{padding:0 15px}.sidebar-scroll,.right-scroll{padding-left:12px;padding-right:12px}.top-left{left:16px;top:19px}.scene-overlay h1{font-size:20px}.hud-stat{padding-left:9px;padding-right:7px}.hud-stat strong{font-size:20px}.hud-stat strong span{font-size:20px}}
@media(max-width:960px){#app{height:auto;overflow:visible;min-height:100vh}.topbar{height:62px;min-height:62px}.brand{min-width:0}.app-grid{grid-template-columns:1fr 300px;min-height:0}.sidebar-left{grid-column:1/-1;order:3;border-right:0;border-top:1px solid var(--line)}.sidebar-left .sidebar-scroll{max-height:310px;display:grid;grid-template-columns:repeat(2,1fr);gap:0 16px}.site-list{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,1fr)}.workspace{min-height:650px}.sidebar-right{grid-column:2;grid-row:1}.sidebar-left{grid-row:2}.viewport{min-height:400px}.bottom-panel{height:140px}}
@media(max-width:650px){.app-grid{display:flex;flex-direction:column}.sidebar-right{order:2}.workspace{order:1;min-height:550px}.sidebar-left{order:3}.topbar .top-actions{gap:3px}.topbar .top-button{display:none}.viewport{min-height:370px}.top-right{display:none}.hud-stat{padding:10px 8px}.hud-stat span{font-size:7px}.hud-stat strong,.hud-stat strong span{font-size:15px}.hud-stat strong small{font-size:8px}.hud-bar{min-height:70px}.bottom-panel{height:135px}.sidebar-left .sidebar-scroll{display:block}.site-list{display:flex}.scene-overlay h1{font-size:16px}.scene-chip{font-size:7px}}