:root{--bg:#08131c;--panel:#0d1e2a;--panel2:#102533;--line:#24404f;--line2:#173340;--text:#d9e5eb;--muted:#809aaa;--teal:#55d5c6;--blue:#45a9c6;--gold:#d5a958;--red:#ef7066;--ff:Inter,'Segoe UI',system-ui,Arial,sans-serif}*{box-sizing:border-box}html,body{padding:0;margin:0;height:100%;color:var(--text);background:var(--bg);font-family:var(--ff);font-size:12px}button,select,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.38}button:hover:not(:disabled){filter:brightness(1.21)}.topbar{height:70px;background:#0b1b26;border-bottom:1px solid #2a4251;display:flex;align-items:center;justify-content:space-between;padding:0 20px;gap:20px;position:relative;z-index:4}.brand{display:flex;gap:12px;align-items:center;min-width:350px}.brand-logo{width:39px;height:39px;border-radius:9px;border:1px solid #367c80;background:#143c46;display:grid;place-items:center;color:#71e3de;font-size:31px;line-height:1;font-weight:100}.brand-word{font-size:16px;letter-spacing:1.3px;font-weight:800;color:#eef8f8}.brand-word span{color:#68d7d0}.brand-word .thin{font-weight:300}.subline{margin-top:6px;color:#6f95a3;font-size:8px;letter-spacing:1.15px;font-weight:700}.separator{color:#4bd3c6;margin:0 4px}.topmid{display:flex;align-items:center;gap:14px;color:#b3c9d0;font-size:10px;letter-spacing:.9px;font-weight:700}.live-dot,.pulse{width:7px;height:7px;background:#62e3b1;box-shadow:0 0 8px #4dd2a5;border-radius:50%;display:inline-block;flex:0 0 auto}.divider-v{height:19px;width:1px;background:#33505d}.caps{white-space:nowrap;font-size:12px;color:#e4eefa}.caps small{font-size:8px;color:#819ca9;margin-left:4px}.head-actions{display:flex;gap:8px;align-items:center}.top-icon{border:1px solid #2e4b5c;background:#142b39;color:#9cbdc9;border-radius:6px;width:32px;height:31px;font-size:16px}.top-pause{background:#155b60;border:1px solid #318b85;padding:9px 14px;border-radius:6px;color:#a5faf2;font-weight:800;font-size:10px;letter-spacing:1px}.layout{display:grid;grid-template-columns:305px minmax(0,1fr) 303px;height:calc(100vh - 70px);overflow:hidden}.sidebar{background:#0c1d28;min-width:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#244353 transparent}.leftside{border-right:1px solid #2a4656}.rightside{border-left:1px solid #2a4656}.side-inner{padding:19px 17px 30px}.section-caption,.section-title{color:#b0c7cd;font-size:10px;letter-spacing:1.27px;font-weight:800;display:flex;align-items:center;justify-content:space-between}.section-caption{margin:0 0 14px}.section-title{margin:26px 0 13px;padding-bottom:10px;border-bottom:1px solid #284150}.section-title.first{margin-top:3px}.tag{border-radius:3px;color:#8defd6;background:#185148;padding:4px 7px;font-size:8px;letter-spacing:1px}.metrics-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.metric{background:#102734;border:1px solid #294251;border-radius:6px;padding:12px 11px 10px;min-width:0}.metric label{display:block;color:#7396a6;font-size:9px;letter-spacing:1px;font-weight:800;margin-bottom:7px}.metric strong{font-size:20px;font-weight:700;color:#f0f8fa;font-variant-numeric:tabular-nums}.metric strong small{font-size:10px;color:#78cad1}.tiny{color:#718f9d;margin-top:6px;font-size:9px}.id-badge{color:#7ad8dd;background:#143c49;border:1px solid #2a5c6c;border-radius:4px;padding:4px 6px;font-weight:700;font-size:9px;letter-spacing:1px}.field-label{color:#71939f;font-size:9px;font-weight:800;letter-spacing:1px;margin:14px 0 7px}select{width:100%;outline:none;border-radius:5px;padding:10px 9px;background:#132c3b;color:#dce9ee;border:1px solid #315465;font-size:11px}select:focus{border-color:#58c8ca}.schematic{border-radius:6px;background:#0a1b26;border:1px solid #2c5061;margin-top:13px;padding:9px}.schematic-head,.schematic-foot{display:flex;justify-content:space-between;color:#8caebd;letter-spacing:.65px;font-size:9px;font-weight:700}.schematic-head span:last-child{color:#67d6d1}.schematic svg{width:100%;height:auto;margin:8px 0 2px}.schematic-foot{border-top:1px solid #183240;padding-top:10px;color:#7acbd1}.readout{border-bottom:1px solid #1a3542;padding:10px 0;display:flex;justify-content:space-between;gap:7px;align-items:center}.readout span{font-size:9px;color:#789aa8;letter-spacing:.75px;font-weight:700}.readout strong{font-size:10px;color:#d7e4e9;letter-spacing:.4px;text-align:right}.green-label{color:#64d9ad;font-size:9px;letter-spacing:.7px}.control-title{margin-top:25px}.toggle-row{display:flex;justify-content:space-between;align-items:center;gap:8px;background:#122b37;padding:12px;border-radius:6px;border:1px solid #294857;margin:10px 0}.toggle-row b{font-size:10px}.toggle-row small{display:block;color:#72919d;margin-top:4px;font-size:9px}.toggle-row input{width:33px;height:17px;accent-color:#4cc3b8;cursor:pointer}.toggle-row i{display:none}.control-pair{display:flex;gap:8px;margin-top:10px}.control-pair button{flex:1;min-width:0;padding:11px 5px;border-radius:5px;background:#143442;color:#c2e3e4;border:1px solid #315766;font-size:9px;font-weight:800;letter-spacing:.7px}.control-pair button.active{background:#266a73;color:#e7ffff}.control-btn small{display:block;color:#719cab;font-weight:400;font-size:8px;margin-top:4px}.slider-label{display:flex;justify-content:space-between;margin:15px 0 4px;color:#8dabb8;font-size:9px;letter-spacing:.7px;font-weight:800}.slider-label output{color:#75d8db}.range{width:100%;accent-color:#42b1c3;cursor:pointer;height:5px}.maintenance{margin-top:17px}.maintenance button{padding:10px 5px}.control-pair button.danger-outline{background:#321e27;border-color:#73444b;color:#f2a3a1}.control-pair button.neutral-outline{background:#19333d}.viewport{position:relative;overflow:hidden;background:#101c27;min-width:0}#world{display:block;width:100%;height:100%;touch-action:none;outline:none}.view-top{position:absolute;top:17px;left:18px;display:flex;align-items:center;gap:9px;pointer-events:none}.scene-chip{background:#0b202cdf;color:#a5cbd1;border:1px solid #2a5260;padding:9px 11px;display:flex;gap:8px;align-items:center;border-radius:5px;letter-spacing:.6px;font-size:9px;font-weight:700;backdrop-filter:blur(12px)}.scene-chip i{height:10px;border-left:1px solid #416477}.scene-chip.secondary{color:#6fb2b9;background:#0b202c99}.view-left-tools{position:absolute;top:91px;left:18px;display:flex;flex-direction:column;gap:5px}.view-left-tools button{color:#b3d5df;background:#0e2331dc;border:1px solid #315464;width:35px;height:35px;border-radius:5px;font-size:17px}.compass{position:absolute;right:25px;top:25px;width:45px;height:45px;border:1px solid #4a6b7a;border-radius:50%;background:#0b2233a5;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#d4eaf0;font-weight:800;font-size:10px}.compass-arrow{color:#56dbd4;font-size:18px;line-height:18px}.view-bottom{position:absolute;bottom:112px;left:17px;right:16px;display:flex;align-items:center;gap:9px;flex-wrap:wrap;color:#adc2cb;font-size:8px;font-weight:800;letter-spacing:.65px;text-shadow:0 1px 5px #000}.view-bottom b{color:#4e7783}.view-coords{margin-left:auto;color:#cceaf0}.bottom-dock{position:absolute;bottom:13px;left:17px;right:16px;background:#0b202fe8;border:1px solid #416073;padding:13px 15px;border-radius:8px;box-shadow:0 8px 30px #030b0e88;backdrop-filter:blur(14px)}.dock-head,.dock-row{display:flex;align-items:center;justify-content:space-between;gap:14px}.dock-head{font-size:9px;color:#a0c6d2;letter-spacing:1.1px;font-weight:800;margin-bottom:12px}.dock-button{border:1px solid #4fc6b7;background:#146b6a;color:#e5fffa;border-radius:5px;width:37px;height:34px;font-size:15px;flex:0 0 auto}.speed-wrap{display:flex;flex-direction:column;gap:5px;flex:1;min-width:0}.speed-wrap>span{font-size:8px;color:#8bafb9;font-weight:800;letter-spacing:.8px}.speed-buttons{display:flex;gap:4px}.speed-buttons button{padding:7px 9px;border:1px solid #335563;border-radius:4px;color:#9ebfcb;background:#153040;font-weight:800;font-size:10px}.speed-buttons button.selected{background:#20636e;color:#bafffa;border-color:#3d95a1}#daylight{width:100%;accent-color:#f6bb66}#qualitySelect{padding:7px;font-size:9px}.map-shell{background:#0b1a25;border:1px solid #2a4554;border-radius:6px;overflow:hidden}.map-shell canvas{width:100%;height:auto;display:block;cursor:crosshair}.map-footer{border-top:1px solid #294757;display:flex;justify-content:space-between;color:#79a2b2;padding:8px;font-size:9px;font-weight:700;letter-spacing:.8px}.route-list{margin-top:8px}.route-line{display:flex;align-items:center;justify-content:space-between;color:#bad1d7;padding:7px 2px;border-bottom:1px solid #1c3644;font-size:9px;cursor:pointer}.route-line:hover{color:white}.route-name{display:flex;align-items:center;gap:8px}.route-color{height:6px;width:18px;display:inline-block;border-radius:4px}.route-line strong{color:#88b8c4}.dim{font-size:9px;color:#7194a1}.chart-shell{background:#0b1c28;border:1px solid #284655;border-radius:6px;padding:9px}.chart-shell canvas{width:100%;height:auto;display:block}.chart-key{border-top:1px solid #203846;padding-top:9px;display:flex;justify-content:space-between;color:#8cabb8;font-size:9px}.chart-key i{display:inline-block;width:12px;height:3px;margin-right:4px;vertical-align:middle}.key-blue{background:#64c4ea}.key-green{background:#8ae8bf}.vessel-list{max-height:220px;overflow-y:auto;scrollbar-width:thin}.vessel-row{display:flex;justify-content:space-between;gap:10px;padding:11px 1px;border-bottom:1px solid #213947;cursor:pointer}.vessel-row:hover{background:#152d3b}.vessel-row b{font-size:10px;color:#c7e0e5}.vessel-row small{display:block;color:#7999a8;font-size:9px;margin-top:3px}.vessel-row>span{font-size:9px;color:#82d5cf;font-weight:700}.vessel-row>span.waiting{color:#ecbd73}.text-button{border:0;background:none;color:#70bdc4;font-size:9px;font-weight:800}.event-stream{max-height:310px;overflow:auto;scrollbar-width:thin}.event{padding:11px 0 11px 12px;border-bottom:1px solid #1d3846;position:relative}.event:before{content:'';position:absolute;left:0;top:13px;width:5px;height:5px;background:#6ed7ce;border-radius:50%}.event.alarm:before{background:var(--red)}.event.interlock:before{background:#e8b760}.event .event-top{display:flex;justify-content:space-between;color:#8aaab7;font-size:9px;font-weight:800;letter-spacing:.6px}.event .event-text{margin-top:4px;color:#b3cbd5;line-height:1.5;font-size:10px}.modal{position:fixed;inset:0;z-index:30;background:#020a11d9;display:grid;place-items:center;padding:20px;backdrop-filter:blur(7px)}.modal.hidden{display:none}.modal-card{max-height:90vh;overflow-y:auto;max-width:590px;padding:28px;background:#0e2331;border:1px solid #4b7a8b;border-radius:10px;box-shadow:0 25px 80px #0009;color:#a9c5d0;line-height:1.8;font-size:12px}.modal-card h2{font-size:16px;color:#d5f0f2;letter-spacing:1px;margin:0}.modal-card h3{color:#6bd8cb;font-size:12px;letter-spacing:.8px;margin-top:18px}.modal-head{display:flex;justify-content:space-between;align-items:center}.modal-card strong{color:#fff}.modal-card .footnote{font-size:10px;color:#85b0c0}.modal-card .top-pause{margin-top:12px}.offline-warning{position:absolute;top:66px;left:18px;right:18px;color:#f7e6c8;background:#51382bcf;border:1px solid #ab8058;padding:8px;border-radius:5px;text-align:center;font-size:11px;z-index:2}@media(max-width:1350px){.layout{grid-template-columns:270px minmax(0,1fr) 276px}.topmid{gap:8px}.brand{min-width:290px}.brand-word{font-size:14px}.side-inner{padding:16px 13px}.scene-chip.secondary{display:none}.view-bottom{font-size:7px;gap:6px}}@media(max-width:1050px){.topmid .caps:nth-of-type(1),.topmid .caps:nth-of-type(2),.topmid .divider-v{display:none}.layout{grid-template-columns:255px minmax(0,1fr)}.rightside{display:none}.brand{min-width:0}}@media(max-width:650px){.topbar{height:59px;padding:0 10px}.layout{height:calc(100vh - 59px);display:flex;flex-direction:column}.brand-word{font-size:12px}.subline{font-size:6px}.brand-logo{width:32px;height:32px}.topmid{display:none}.leftside{order:2;min-height:380px;border-top:1px solid #244a56}.viewport{order:1;flex:0 0 55vh}.view-bottom,.scene-chip.secondary,.speed-wrap.weather{display:none}.bottom-dock{bottom:8px;left:8px;right:8px;padding:9px}.view-top{top:8px;left:8px}.dock-row{gap:5px}.dock-head{margin-bottom:6px}.speed-buttons button{padding:6px}.side-inner{padding:15px}.head-actions{gap:4px}.top-pause{font-size:9px;padding:7px}}
.inspect-btn{display:block;width:100%;background:#14525a;border:1px solid #33828a;border-radius:5px;padding:11px 7px;margin-top:10px;color:#b4f6f4;font-size:10px;font-weight:800;letter-spacing:.6px}