*{margin:0;padding:0;box-sizing:border-box}html,body,#root{width:100%;height:100vh;overflow:hidden;background:#0a1628;font-family:Segoe UI,system-ui,-apple-system,sans-serif}.dock-container{width:100%;height:100vh;position:relative}.dock-canvas{width:100%;height:100%}.board-button{position:absolute;bottom:60px;left:50%;transform:translate(-50%);z-index:10;display:flex;flex-direction:column;align-items:center;gap:2px;background:#143c78d9;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:2px solid rgba(100,160,255,.5);border-radius:16px;padding:14px 32px;cursor:pointer;transition:all .3s ease;animation:board-pulse 2.5s ease-in-out infinite}.board-button:hover{background:#1e50a0f2;border-color:#82b4ffcc;transform:translate(-50%) scale(1.05)}.board-button:active{transform:translate(-50%) scale(.97)}.board-button-icon{font-size:1.5rem;line-height:1}.board-button-text{color:#fff;font-size:1rem;font-weight:700;letter-spacing:.05em}.board-button-sub{color:#b4d2ffb3;font-size:.65rem;text-transform:uppercase;letter-spacing:.1em}@keyframes board-pulse{0%,to{box-shadow:0 0 20px #3c78ff4d,0 4px 20px #0000004d}50%{box-shadow:0 0 35px #3c78ff99,0 4px 25px #0006}}.hotspot-overlay{position:absolute;inset:0;pointer-events:none;z-index:5}.hotspot-btn{position:absolute;pointer-events:auto;display:flex;align-items:center;gap:6px;background:#0a1428b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1px solid rgba(80,140,220,.4);border-radius:20px;padding:4px 10px 4px 6px;cursor:pointer;transform:translate(-50%,-50%);transition:all .2s ease;animation:hotspot-pulse 2s ease-in-out infinite}.hotspot-btn:hover{background:#143264e6;border-color:#64b4ffb3;transform:translate(-50%,-50%) scale(1.1)}.hotspot-btn.active{background:#1e468cf2;border-color:#78c8ffcc;animation:none}.hotspot-dot{width:8px;height:8px;border-radius:50%;background:#4a9aff;box-shadow:0 0 8px #50a0ff99;flex-shrink:0}.hotspot-btn.active .hotspot-dot{background:#0fa;box-shadow:0 0 10px #0fa9}.hotspot-label{color:#b0d0ff;font-size:.6rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}@keyframes hotspot-pulse{0%,to{box-shadow:0 0 6px #50a0ff33}50%{box-shadow:0 0 14px #50a0ff80}}.hotspot-panel{position:absolute;right:16px;top:50%;transform:translateY(-50%);z-index:15;width:240px;background:#08101eeb;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(60,120,200,.4);border-radius:10px;overflow:hidden;animation:panel-slide-in .3s ease-out}@keyframes panel-slide-in{0%{transform:translateY(-50%) translate(20px);opacity:0}to{transform:translateY(-50%) translate(0);opacity:1}}.hotspot-panel-header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid rgba(60,100,160,.3)}.hotspot-panel-title{color:#ace;font-size:.75rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase}.hotspot-panel-close{background:none;border:none;color:#6a8aaa;font-size:1.2rem;cursor:pointer;padding:0 4px;line-height:1}.hotspot-panel-close:hover{color:#f64}.hotspot-panel-body{padding:8px 12px}.hotspot-spec-row{display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid rgba(30,50,80,.4)}.hotspot-spec-row:last-child{border-bottom:none}.hotspot-spec-label{color:#5a7a9a;font-size:.6rem;font-weight:600}.hotspot-spec-value{color:#8abadd;font-size:.6rem;font-family:Courier New,monospace;text-align:right}@media(max-width:600px){.board-button{bottom:50px;padding:12px 28px}.board-button-text{font-size:.9rem}.hotspot-panel{right:8px;width:200px}.hotspot-btn{padding:3px 8px 3px 5px}.hotspot-label{font-size:.5rem}}.boarding-container{width:100%;height:100vh;position:relative}.boarding-fade{position:absolute;inset:0;background:#0a1628;opacity:0;transition:opacity .5s ease-in;pointer-events:none;z-index:10}.boarding-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#b4d2ffcc;font-size:1.2rem;letter-spacing:.15em;text-transform:uppercase;z-index:5;animation:boarding-fade-in .5s ease-in forwards}@keyframes boarding-fade-in{0%{opacity:0}to{opacity:1}}.windshield-frame{position:absolute;inset:0;pointer-events:none;z-index:2}.ws-rail{position:absolute;left:0;right:0;height:6px;background:linear-gradient(180deg,#2a3040,#1a2030);box-shadow:0 2px 8px #00000080}.ws-top{top:0}.ws-bottom{bottom:0;height:8px;background:linear-gradient(0deg,#2a3040,#1a2030)}.ws-pillar{position:absolute;top:0;bottom:0;width:4px;background:linear-gradient(90deg,#1a2030,#2a3040,#1a2030);box-shadow:0 0 6px #0006}.ws-left{left:0;width:8px}.ws-right{right:0;width:8px}.ws-center{left:50%;transform:translate(-50%)}.ws-lcenter{left:25%;transform:translate(-50%)}.ws-rcenter{left:75%;transform:translate(-50%)}.ws-compass-tape{position:absolute;top:8px;left:15%;right:15%;height:22px;overflow:hidden;z-index:3;background:#060c1880;border-radius:3px;border:1px solid rgba(60,100,140,.2)}.ws-compass-center-mark{position:absolute;left:50%;top:0;bottom:0;width:2px;background:#0fa;transform:translate(-50%);z-index:2}.ws-compass-strip{position:relative;width:100%;height:100%}.ws-compass-tick{position:absolute;top:0;bottom:0;transform:translate(-50%);display:flex;flex-direction:column;align-items:center}.ws-compass-tick-line{width:1px;height:6px;background:#648cb44d}.ws-compass-tick.major .ws-compass-tick-line{height:10px;background:#648cb499}.ws-compass-tick-label{color:#6a8aaa;font-size:.45rem;font-weight:600;letter-spacing:.02em;white-space:nowrap}.ws-rain-overlay{position:absolute;inset:0;z-index:1;pointer-events:none;background:repeating-linear-gradient(175deg,transparent,transparent 3px,rgba(150,180,220,.12) 3px,rgba(150,180,220,.12) 4px);animation:ws-rain-fall .3s linear infinite}@keyframes ws-rain-fall{0%{background-position:0 0}to{background-position:-5px 20px}}.ws-fog-overlay{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at center,transparent 30%,rgba(180,200,220,.4) 100%)}.hud-overlay{position:absolute;top:12px;left:50%;transform:translate(-50%);z-index:3;display:flex;gap:16px;background:#060c18b3;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(60,100,140,.3);border-radius:8px;padding:6px 16px}.hud-item{display:flex;align-items:baseline;gap:4px}.hud-label{color:#4a6a8a;font-size:.55rem;font-weight:600;letter-spacing:.05em}.hud-value{color:#0fa;font-size:.85rem;font-family:Courier New,monospace;font-weight:700}.hud-unit{color:#4a6a8a;font-size:.55rem}.hud-warn{color:#f44!important;animation:hud-blink .8s ease-in-out infinite}.hud-alert .hud-value{color:#f64;font-size:.65rem}.hud-alert-anchor .hud-value{color:#fa4;font-size:.65rem}.hud-alert-warn{background:#c8281426;border-radius:4px;padding:0 4px}.hud-alert-warn .hud-value{color:#f44;font-size:.6rem}.hud-secondary .hud-value-sm{color:#6a8aaa;font-size:.6rem;font-family:Courier New,monospace}@keyframes hud-blink{0%,to{opacity:1}50%{opacity:.3}}@media(max-width:500px){.hud-overlay{gap:10px;padding:4px 10px}.hud-value{font-size:.75rem}}.layer{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:8px;overflow:hidden}.helm-controls{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;max-width:600px}.helm-throttle{flex-shrink:0}.helm-dual-throttle{display:flex;gap:2px}.helm-extras-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center}.helm-center{display:flex;flex-direction:column;align-items:center;gap:6px}.helm-gauges-row{display:flex;gap:8px;align-items:center}.helm-readouts{display:flex;gap:8px}.helm-wheel{flex-shrink:0}.engine-off-notice{position:absolute;bottom:8px;left:50%;transform:translate(-50%);background:#b43c144d;border:1px solid rgba(255,100,40,.4);border-radius:6px;padding:4px 12px;color:#fa6;font-size:.65rem;white-space:nowrap}.nav-content{display:flex;gap:10px;width:100%;height:100%;max-width:600px}.nav-chart{flex:1;min-width:0;height:100%}.nav-side{display:flex;flex-direction:column;gap:6px;align-items:center;flex-shrink:0}.nav-btn{background:#0a121ed9;border:1px solid rgba(60,100,140,.3);border-radius:6px;padding:6px 14px;color:#6a8aaa;font-size:.7rem;font-weight:700;cursor:pointer;letter-spacing:.05em;transition:all .15s}.nav-btn.active{background:#145028e6;border-color:#3cc86480;color:#0f6}.nav-layer.night .nav-side{filter:hue-rotate(-30deg) saturate(.5)}.nav-layer.night .nav-btn{border-color:#8c28284d;color:#844}.nav-layer.night .nav-btn.active{background:#501414e6;border-color:#c83c3c80;color:#c44}.systems-grid{display:flex;gap:10px;align-items:center;max-width:600px}.systems-readouts{display:grid;grid-template-columns:1fr 1fr;gap:6px}.systems-gen-btn{display:flex;align-items:center;gap:6px;background:#0a121ed9;border:1px solid rgba(60,100,140,.3);border-radius:6px;padding:6px 14px;color:#6a8aaa;font-size:.65rem;font-weight:700;cursor:pointer;letter-spacing:.05em;margin-top:6px;transition:all .15s}.systems-gen-btn.on{background:#14321ee6;border-color:#3cc86466;color:#aeb}.systems-gen-indicator{width:8px;height:8px;border-radius:50%;background:#333}.systems-gen-btn.on .systems-gen-indicator{background:#0f6;box-shadow:0 0 6px #00ff6466}.power-grid{display:flex;gap:10px;width:100%;max-width:700px;overflow-y:auto;max-height:100%}.power-bms{flex:1;min-width:0}.bms-header{color:#5a8aaa;font-size:.65rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:6px;font-weight:600}.bms-stats-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:4px}.bms-stats-row.secondary{margin-bottom:6px}.bms-stat{display:flex;flex-direction:column;align-items:center}.bms-stat-label{color:#4a6a8a;font-size:.45rem;text-transform:uppercase;letter-spacing:.05em}.bms-stat-value{color:#8aaabb;font-size:.7rem;font-family:Courier New,monospace;font-weight:700}.bms-stat-value.cyan{color:#0cc}.bms-stat-value.yellow{color:#cc0}.power-solar{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px}.power-flow-diagram{width:100%;max-width:260px}.power-flow-svg{width:100%;height:auto}.power-stats-row{display:flex;gap:12px}.power-stat{display:flex;flex-direction:column;align-items:center}.power-stat-label{color:#4a6a8a;font-size:.45rem;text-transform:uppercase}.power-stat-value{color:#8aaabb;font-size:.6rem;font-family:Courier New,monospace;font-weight:700}.comfort-grid{display:flex;gap:20px;width:100%;max-width:500px}.comfort-grid-4col{max-width:700px;gap:10px;flex-wrap:wrap}.comfort-btn-row{display:flex;gap:3px;flex-wrap:wrap;margin-bottom:4px}.comfort-btn-col{display:flex;flex-direction:column;gap:3px}.comfort-btn-sm{background:#0a121ed9;border:1px solid rgba(60,100,140,.2);border-radius:4px;padding:3px 6px;color:#5a7a9a;font-size:.5rem;font-weight:600;cursor:pointer;transition:all .15s;letter-spacing:.03em}.comfort-btn-sm.on{background:#143250e6;border-color:#50a0ff66;color:#ace}.hvac-zone-row{display:flex;align-items:center;gap:4px;margin-bottom:3px}.hvac-zone-label{color:#4a6a8a;font-size:.45rem;font-weight:600;min-width:40px}.hvac-zone-temp{color:#0fa;font-size:.6rem;font-family:Courier New,monospace;font-weight:700;min-width:30px;text-align:center}.comfort-cameras{display:grid;grid-template-columns:1fr 1fr;gap:3px}.comfort-section{flex:1}.comfort-title{color:#5a7a9a;font-size:.65rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px;font-weight:600}.comfort-toggles{display:flex;flex-direction:column;gap:6px}.comfort-btn{display:flex;align-items:center;gap:8px;background:#0a121ed9;border:1px solid rgba(60,100,140,.2);border-radius:6px;padding:8px 12px;color:#6a8aaa;font-size:.7rem;cursor:pointer;transition:all .15s;text-align:left}.comfort-btn.on{background:#143250e6;border-color:#50a0ff66;color:#ace}.comfort-btn-indicator{width:8px;height:8px;border-radius:50%;background:#333;flex-shrink:0}.comfort-btn.on .comfort-btn-indicator{background:#0f6;box-shadow:0 0 6px #00ff6466}.comfort-rewrite{flex-wrap:wrap;gap:8px;max-width:750px;overflow-y:auto;max-height:100%;align-items:flex-start}.comfort-lighting{min-width:200px}.lighting-content{display:flex;gap:6px}.boat-diagram-container{width:90px;flex-shrink:0}.boat-light-svg{width:100%;height:auto}.lighting-controls{flex:1;min-width:0}.light-toggles-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-bottom:4px}.light-toggle-btn{display:flex;align-items:center;gap:3px;background:#0a121ed9;border:1px solid rgba(60,100,140,.15);border-radius:3px;padding:2px 4px;color:#4a6a8a;font-size:.4rem;font-weight:600;cursor:pointer;transition:all .15s;text-transform:capitalize;white-space:nowrap}.light-toggle-btn.on{background:#143250e6;border-color:#50a0ff4d;color:#ace}.light-toggle-led{width:5px;height:5px;border-radius:50%;background:#222;flex-shrink:0}.light-toggle-btn.on .light-toggle-led{background:#0f6;box-shadow:0 0 4px #00ff6480}.comfort-music{min-width:140px}.webamp-container{position:relative;min-height:80px;max-height:200px;overflow:hidden;transform:scale(.55);transform-origin:top left;width:182%}.webamp-container,.webamp-container *{position:relative!important}.webamp-container>div{position:relative!important;display:flex!important;flex-direction:column!important;gap:1px!important}.webamp-placeholder{color:#3a5a7a;font-size:.5rem;text-align:center;padding:8px}.comfort-env{min-width:140px}.comfort-info{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;font-size:.7rem}.comfort-info-label{color:#4a6a8a}.comfort-info-value{color:#8aaabb}@media(max-width:700px){.helm-controls{gap:8px}.nav-content,.systems-grid{gap:6px}}@media(max-width:500px){.layer{padding:4px}.helm-controls,.helm-gauges-row,.helm-readouts,.nav-content,.nav-side{gap:4px}.nav-btn{padding:4px 8px;font-size:.6rem}.systems-grid{gap:6px;flex-wrap:wrap;justify-content:center}.comfort-grid{flex-direction:column;gap:8px}.comfort-btn{padding:6px 8px;font-size:.6rem}}@media(max-width:380px){.layer{padding:2px}.helm-controls,.helm-readouts{gap:2px}}@media(max-height:420px)and (orientation:landscape){.layer{padding:4px}.helm-controls{gap:6px}.helm-gauges-row{gap:4px}}.instrument-panel{position:relative;width:100%;height:100%;overflow:hidden;background:#060c18f2;display:flex;flex-direction:column}.layer-tabs{display:flex;flex-shrink:0;border-bottom:1px solid rgba(60,100,140,.2);z-index:5}.layer-tab{flex:1;padding:6px 0;background:transparent;border:none;border-bottom:2px solid transparent;color:#4a6a8a;font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;cursor:pointer;transition:all .15s}.layer-tab:hover{color:#6a8aaa;background:#2846641a}.layer-tab.active{color:#0fa;border-bottom-color:#0fa;background:#00ffaa0d}.layers-track{display:flex;width:400%;flex:1;min-height:0;transition:transform .3s cubic-bezier(.25,.1,.25,1);will-change:transform}.layer-slot{width:25%;height:100%;flex-shrink:0;position:relative;overflow:hidden;contain:layout style paint}.sidebar{display:flex;flex-direction:column;gap:6px;padding:6px;z-index:5}.sidebar-left{grid-area:left}.sidebar-right{grid-area:right}.sidebar-btn{display:flex;flex-direction:column;align-items:center;gap:2px;background:#0a121ed9;border:1px solid rgba(60,100,140,.3);border-radius:8px;padding:8px 6px;cursor:pointer;transition:all .15s;min-width:44px;touch-action:manipulation}.sidebar-btn:active{transform:scale(.92)}.sidebar-btn.active{background:#143c64e6;border-color:#50a0ff80}.sidebar-btn.warn{border-color:#ff782880}.sidebar-btn.active.warn{background:#64320ae6;border-color:#ff963299}.sidebar-btn:disabled{opacity:.35;cursor:default}.sidebar-btn:disabled:active{transform:none}.sidebar-icon{font-size:1.1rem;line-height:1;filter:grayscale(.3)}.sidebar-btn.active .sidebar-icon{filter:none}.sidebar-label{color:#6a8aaa;font-size:.5rem;font-weight:600;letter-spacing:.05em}.sidebar-btn.active .sidebar-label{color:#ace}.anchor-status{color:#fa4;font-size:.45rem;text-align:center;padding:2px 4px;font-weight:600;letter-spacing:.05em;animation:anchor-blink 1s ease-in-out infinite}@keyframes anchor-blink{0%,to{opacity:1}50%{opacity:.5}}.sidebar-btn.emergency{background:#781414e6;border-color:#ff3c3c99;animation:emergency-pulse 1.5s ease-in-out infinite}.sidebar-btn.emergency .sidebar-icon{color:#f44;filter:none}.sidebar-btn.emergency .sidebar-label{color:#f88}@keyframes emergency-pulse{0%,to{box-shadow:0 0 4px #ff3c3c4d}50%{box-shadow:0 0 12px #ff3c3c99}}.sidebar-btn.mob{border-color:#ffa02880}.sidebar-btn.mob .sidebar-icon{color:#ff8c00}.sidebar-btn.mob.active{background:#78460ae6;border-color:#ffb43cb3;animation:anchor-blink 1s ease-in-out infinite}.sidebar-btn.radio.active{background:#0a3c1ee6;border-color:#3cff6480}.sidebar-btn.radio.active .sidebar-icon{animation:radio-blink .8s ease-in-out infinite}@keyframes radio-blink{0%,to{opacity:1}50%{opacity:.4}}@media(max-width:500px){.sidebar{gap:4px;padding:3px}.sidebar-btn{padding:5px 3px;min-width:32px;border-radius:6px}.sidebar-icon{font-size:.9rem}.sidebar-label{font-size:.4rem}.anchor-status{font-size:.38rem}}@media(max-height:420px)and (orientation:landscape){.sidebar{gap:3px;padding:2px}.sidebar-btn{padding:4px 3px;min-width:30px}.sidebar-icon{font-size:.85rem}.sidebar-label{font-size:.4rem}}.helm-container{width:100%;height:100vh;display:flex;flex-direction:column;background:#060c18;overflow:hidden}.helm-windshield{position:relative;flex:6;min-height:0}.helm-instruments{flex:4;min-height:0;display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"left panel right";border-top:2px solid #1a2a3a}.helm-panel-area{grid-area:panel;overflow:hidden;position:relative}@media(max-height:500px){.helm-windshield,.helm-instruments{flex:5}}@media(max-width:700px){.helm-instruments{grid-template-columns:38px 1fr 38px}}@media(max-width:500px){.helm-windshield{flex:5}.helm-instruments{flex:5;grid-template-columns:34px 1fr 34px}}@media(max-width:400px){.helm-instruments{grid-template-columns:30px 1fr 30px}}@media(max-height:420px)and (orientation:landscape){.helm-windshield{flex:5}.helm-instruments{flex:5;grid-template-columns:34px 1fr 34px}}.keyboard-hint{position:absolute;bottom:4px;left:50%;transform:translate(-50%);color:#5078a080;font-size:.55rem;white-space:nowrap;pointer-events:none;z-index:20}@media(max-width:800px){.keyboard-hint{display:none}}.touch-dpad{position:absolute;bottom:8px;right:8px;z-index:10;display:flex;flex-direction:column;align-items:center;gap:3px;pointer-events:auto;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none}.dpad-mid{display:flex;gap:3px}.dpad-btn{width:52px;height:52px;border-radius:10px;background:#0a1428bf;border:2px solid rgba(0,255,170,.35);color:#0fac;font-size:1.2rem;display:flex;align-items:center;justify-content:center;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;outline:none;padding:0}.dpad-btn:active{background:#00ffaa4d;border-color:#00ffaab3;color:#0fa;transform:scale(.93)}@media(min-width:801px){.touch-dpad{display:none}}@media(max-height:400px){.dpad-btn{width:42px;height:42px;font-size:1rem}.touch-dpad{bottom:4px;right:4px;gap:2px}.dpad-mid{gap:2px}}.app-container{width:100%;height:100vh;position:relative}.info-panel{position:absolute;top:16px;left:16px;background:#0a1628e0;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:16px 20px;color:#e0e8f0;max-width:300px;z-index:10}.info-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer}.info-header h1{font-size:1.2rem;font-weight:700;color:#fff;letter-spacing:.02em;margin:0}.toggle-btn{background:none;border:none;color:#68a;font-size:.8rem;cursor:pointer;padding:4px 8px;line-height:1}.info-panel .subtitle{font-size:.7rem;color:#89a;text-transform:uppercase;letter-spacing:.1em;margin:4px 0 14px}.info-panel .specs{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;font-size:.8rem}.info-panel .spec-label{color:#68a;font-weight:500}.info-panel .spec-value{color:#c0d0e0}.info-panel .divider{height:1px;background:#ffffff14;margin:8px 0;grid-column:1 / -1}.controls-hint{position:absolute;bottom:16px;left:50%;transform:translate(-50%);background:#0a1628b3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:8px 16px;color:#68a;font-size:.7rem;text-align:center;z-index:10;pointer-events:none;white-space:nowrap}.controls-hint span{margin:0 10px}.view-controls{position:absolute;top:16px;right:16px;z-index:10;display:flex;gap:8px}.view-controls button{background:#0a1628e0;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:8px 14px;color:#c0d0e0;font-size:.75rem;cursor:pointer;transition:all .2s;font-family:inherit}.view-controls button:hover{background:#142846e6;border-color:#fff3}.view-controls button.active{background:#1e3c64e6;border-color:#6496ff66;color:#fff}@media(max-width:600px){.info-panel{top:10px;left:10px;right:10px;max-width:none;padding:12px 16px}.info-panel.closed{right:auto;max-width:200px}.info-header h1{font-size:1rem}.info-panel .specs{font-size:.72rem;gap:4px 10px}.info-panel .subtitle{font-size:.6rem;margin:2px 0 10px}.view-controls{top:auto;bottom:50px;right:10px;flex-direction:column}.controls-hint{bottom:10px;padding:6px 12px;font-size:.6rem}.controls-hint span{margin:0 6px}}@media(max-width:380px){.info-panel .specs{font-size:.65rem;gap:3px 8px}.info-header h1{font-size:.9rem}}
/* Power Dashboard v10 - Island Commander */
@keyframes pd-pulse-cyan{0%,100%{text-shadow:0 0 4px rgba(0,220,255,.4)}50%{text-shadow:0 0 12px rgba(0,220,255,.8),0 0 20px rgba(0,220,255,.3)}}
@keyframes pd-pulse-green{0%,100%{text-shadow:0 0 4px rgba(0,255,136,.4)}50%{text-shadow:0 0 12px rgba(0,255,136,.8),0 0 20px rgba(0,255,136,.3)}}
@keyframes pd-pulse-amber{0%,100%{text-shadow:0 0 4px rgba(255,180,50,.4)}50%{text-shadow:0 0 12px rgba(255,180,50,.8),0 0 20px rgba(255,180,50,.3)}}
@keyframes pd-pulse-yellow{0%,100%{text-shadow:0 0 4px rgba(255,230,60,.4)}50%{text-shadow:0 0 12px rgba(255,230,60,.8),0 0 20px rgba(255,230,60,.3)}}
@keyframes pd-pulse-red{0%,100%{text-shadow:0 0 4px rgba(255,60,60,.4)}50%{text-shadow:0 0 12px rgba(255,60,60,.9),0 0 24px rgba(255,60,60,.4)}}
@keyframes pd-flow{from{stroke-dashoffset:18}to{stroke-dashoffset:0}}
@keyframes pd-flow-rev{from{stroke-dashoffset:0}to{stroke-dashoffset:18}}
@keyframes pd-blink{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes pd-glow-pulse{0%,100%{filter:drop-shadow(0 0 2px rgba(0,255,136,.3))}50%{filter:drop-shadow(0 0 8px rgba(0,255,136,.7))}}
@keyframes pd-gen-vib{0%,100%{transform:translate(0,0)}25%{transform:translate(.4px,-.3px)}50%{transform:translate(-.4px,.3px)}75%{transform:translate(.3px,.4px)}}
.power-layer{align-items:stretch!important;justify-content:stretch!important;overflow:hidden!important;padding:4px!important}
.pd-dashboard{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr) auto;gap:4px;width:100%;height:calc(40vh - 38px);max-height:100%;box-sizing:border-box;background:linear-gradient(165deg,#060a14,#0b1220 40%,#070d16);border-radius:6px;font-family:'Segoe UI',system-ui,sans-serif;overflow:hidden}
@media(max-height:500px){.pd-dashboard{height:calc(50vh - 38px)}}
@media(max-width:500px){.pd-dashboard{height:calc(50vh - 38px)}}
.pd-panel{background:linear-gradient(180deg,rgba(12,18,35,.95),rgba(8,14,26,.98));border:1px solid rgba(35,60,105,.28);border-radius:5px;padding:5px 7px;position:relative;overflow:hidden}
.pd-panel::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 5%,rgba(0,160,255,.15) 50%,transparent 95%);pointer-events:none}
.pd-title{font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:rgba(120,165,230,.5);margin-bottom:4px;padding-bottom:2px;border-bottom:1px solid rgba(35,60,105,.18);flex-shrink:0}
.pd-area-batt{min-height:0;display:flex;flex-direction:column}
.pd-area-flow{min-height:0;display:flex;flex-direction:column}
.pd-batt-row{display:flex;gap:8px;align-items:flex-start;flex:1;min-height:0;overflow:hidden}
.pd-soc-block{display:flex;flex-direction:column;align-items:center;gap:1px;flex-shrink:0}
.pd-soc-volts{font-size:12px;font-weight:600;font-family:Consolas,Monaco,monospace}
.pd-soc-status{font-size:8px;font-weight:700;letter-spacing:.5px;padding:1px 5px;border-radius:3px;display:inline-block;width:fit-content;text-transform:uppercase}
.pd-charging{color:#0f8;background:rgba(0,255,136,.08);border:1px solid rgba(0,255,136,.2);animation:pd-blink 2s ease-in-out infinite}
.pd-discharging{color:#fa4;background:rgba(255,170,68,.08);border:1px solid rgba(255,170,68,.2)}
.pd-batt-stats{flex:1;min-width:0;overflow:hidden}
.pd-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
.pd-grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:3px}
.pd-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:3px}
.pd-stat{background:rgba(6,10,20,.7);border:1px solid rgba(25,45,75,.28);border-radius:3px;padding:2px 4px;display:flex;flex-direction:column;gap:0px}
.pd-stat-lbl{font-size:8px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:rgba(110,150,200,.5);line-height:1.1}
.pd-stat-val{font-size:13px;font-weight:700;font-family:Consolas,Monaco,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}
.pd-stat-unit{font-size:9px;font-weight:400;opacity:.5;margin-left:1px}
.pd-cyan{color:#0df;animation:pd-pulse-cyan 3s ease-in-out infinite}
.pd-green{color:#0f8;animation:pd-pulse-green 3.5s ease-in-out infinite}
.pd-yellow{color:#fe3;animation:pd-pulse-yellow 3s ease-in-out infinite}
.pd-amber{color:#fb4;animation:pd-pulse-amber 3s ease-in-out infinite}
.pd-red{color:#f44;animation:pd-pulse-red 2s ease-in-out infinite}
.pd-white{color:#b8c8e0}
.pd-cell-wrap{border-radius:4px;overflow:hidden;border:1px solid rgba(25,50,85,.3)}
.pd-cell-wrap canvas{display:block;width:100%;height:auto}
.pd-boat-wrap{flex:1;min-height:0;border-radius:5px;overflow:hidden;background:linear-gradient(180deg,#080e1c,#0a1322 50%,#060c18);border:1px solid rgba(25,50,85,.28);position:relative}
.pd-boat-wrap svg{position:absolute;inset:0;width:100%;height:100%}
.pd-sources{display:grid;grid-template-columns:repeat(5,1fr);gap:3px}
.pd-src{background:rgba(6,10,20,.7);border:1px solid rgba(25,45,75,.28);border-radius:3px;padding:3px 2px;text-align:center}
.pd-src-lbl{font-size:8px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:rgba(110,150,200,.5);display:block;margin-bottom:1px}
.pd-src-val{font-size:13px;font-weight:700;font-family:Consolas,Monaco,monospace;display:block;line-height:1.2}
.pd-gen-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:5px 12px;border:2px solid rgba(60,65,85,.35);border-radius:5px;background:linear-gradient(180deg,rgba(20,24,36,.9),rgba(14,16,28,.95));color:rgba(140,150,175,.7);font-size:11px;font-weight:700;font-family:Consolas,Monaco,monospace;letter-spacing:1.5px;cursor:pointer;transition:all .3s;text-transform:uppercase;outline:none;-webkit-tap-highlight-color:transparent}
.pd-gen-btn:hover{border-color:rgba(90,100,140,.45);color:rgba(170,180,200,.85)}
.pd-gen-btn:active{transform:scale(.98)}
.pd-gen-btn.on{border-color:rgba(0,200,100,.45);background:linear-gradient(180deg,rgba(8,35,22,.92),rgba(5,25,15,.96));color:#0f8;box-shadow:0 0 20px rgba(0,255,136,.08),inset 0 0 20px rgba(0,255,136,.03)}
.pd-gen-ind{width:8px;height:8px;border-radius:50%;background:rgba(60,65,85,.4);border:1px solid rgba(80,85,105,.3);transition:all .3s;flex-shrink:0}
.pd-gen-btn.on .pd-gen-ind{background:#0f8;border-color:rgba(0,255,136,.6);box-shadow:0 0 6px rgba(0,255,136,.5),0 0 14px rgba(0,255,136,.25);animation:pd-blink 1.2s ease-in-out infinite}
@media(max-width:600px){.pd-dashboard{grid-template-columns:1fr;grid-template-rows:auto auto auto auto;height:auto;max-height:calc(50vh - 38px);overflow-y:auto}.pd-batt-row{flex-direction:column;align-items:center}.pd-sources{grid-template-columns:repeat(3,1fr)}.pd-grid4{grid-template-columns:repeat(2,1fr)}}
/* Webamp Integrated Panel - Marine Electronics Theme */
.webamp-integrated-panel{background:linear-gradient(180deg,rgba(8,14,26,.98),rgba(5,10,18,.99));border:1px solid rgba(35,60,105,.35);border-radius:5px;overflow:hidden;margin-top:4px}
.webamp-panel-header{display:flex;align-items:center;gap:6px;padding:4px 8px;background:linear-gradient(180deg,rgba(15,22,40,.95),rgba(10,16,30,.98));border-bottom:1px solid rgba(35,60,105,.25);font-size:8px;font-weight:700;letter-spacing:1.5px;color:rgba(100,150,220,.55);text-transform:uppercase;font-family:Consolas,Monaco,monospace}
.webamp-panel-led{width:5px;height:5px;border-radius:50%;background:#0f8;box-shadow:0 0 4px rgba(0,255,136,.5);flex-shrink:0;animation:pd-blink 2s ease-in-out infinite}
.webamp-panel-status{margin-left:auto;font-size:7px;color:rgba(0,220,255,.6);letter-spacing:1px}
.webamp-embed-frame{position:relative;background:#000;border-radius:0 0 4px 4px;overflow:hidden;padding:2px}
.webamp-container{position:relative;transform:scale(.6);transform-origin:top left;width:167%;min-height:70px;max-height:180px;overflow:hidden}
.webamp-container,.webamp-container *{position:relative!important}
.webamp-container>div{position:relative!important;display:flex!important;flex-direction:column!important;gap:1px!important}
.webamp-placeholder{color:rgba(0,180,255,.4);font-size:8px;text-align:center;padding:12px 8px;font-family:Consolas,Monaco,monospace;letter-spacing:1px;animation:pd-blink 2s ease-in-out infinite}
/* === HUD v12: Flight-sim layout + drag overlay + camera toggle + GPS === */
/* Windshield: prevent text selection during drag */
.helm-windshield{user-select:none!important;-webkit-user-select:none!important;touch-action:none!important;position:relative!important}
/* Drag overlay: sits above canvas, below HUD, captures all drag events */
.drag-overlay{position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;z-index:4!important;cursor:grab!important;touch-action:none!important;user-select:none!important;-webkit-user-select:none!important}
/* HUD container on windshield */
.ws-helm-hud{position:absolute;top:0;left:0;right:0;bottom:0;z-index:5;pointer-events:none;padding:8px}
.ws-helm-hud>*{pointer-events:auto}
/* Helm layer fills HUD */
.ws-helm-hud .helm-layer{width:100%!important;height:100%!important;background:transparent!important;padding:0!important}
/* Controls row: throttle left, center, wheel right - fill full area */
.ws-helm-hud .helm-controls{width:100%!important;height:100%!important;max-width:none!important;display:flex!important;justify-content:space-between!important;align-items:stretch!important;gap:0!important}
/* Throttle levers - bottom left */
.ws-helm-hud .helm-throttle{align-self:flex-end!important;padding:0 4px 16px 4px!important;background:rgba(6,12,24,0.45)!important;border-radius:8px!important;backdrop-filter:blur(4px)!important;-webkit-backdrop-filter:blur(4px)!important;display:flex!important;align-items:flex-end!important;gap:1px!important}
/* Steering wheel - bottom right */
.ws-helm-hud .helm-wheel{align-self:flex-end!important;padding:0 4px 16px 6px!important;background:rgba(6,12,24,0.45)!important;border-radius:8px!important;backdrop-filter:blur(4px)!important;-webkit-backdrop-filter:blur(4px)!important}
/* Center column: indicators top/bottom, middle clear */
.ws-helm-hud .helm-center{flex:1!important;display:flex!important;flex-direction:column!important;justify-content:space-between!important;align-items:center!important;gap:0!important;padding:0 8px!important;min-width:0!important}
/* RPM top-left, Compass top-right (absolute, split to corners) */
.ws-helm-hud .helm-gauges-row{position:absolute!important;top:8px!important;left:8px!important;right:8px!important;display:flex!important;justify-content:space-between!important;background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;padding:0!important;z-index:2!important;gap:0!important;pointer-events:none!important}
.ws-helm-hud .helm-gauges-row>*{background:rgba(6,12,24,0.45)!important;border-radius:8px!important;padding:6px!important;backdrop-filter:blur(4px)!important;-webkit-backdrop-filter:blur(4px)!important;pointer-events:auto!important}
/* Speed/Depth readouts - top center, pushed below gauges */
.ws-helm-hud .helm-readouts{background:rgba(6,12,24,0.45)!important;border-radius:6px!important;padding:3px 10px!important;backdrop-filter:blur(4px)!important;-webkit-backdrop-filter:blur(4px)!important;margin-top:140px!important}
/* Push rudder indicator to bottom (will be repositioned near wheel) */
.ws-helm-hud .helm-center>:nth-child(3){margin-top:auto!important}
/* Rudder indicator - position right above the wheel */
.ws-helm-hud .helm-center>:nth-child(3){position:absolute!important;bottom:170px!important;right:12px!important;z-index:3!important;background:rgba(6,12,24,0.45)!important;border-radius:6px!important;padding:2px 4px!important;backdrop-filter:blur(4px)!important;-webkit-backdrop-filter:blur(4px)!important}
/* Extras row (thruster/trim) - bottom of windshield, bigger buttons */
.ws-helm-hud .helm-extras-row{position:absolute!important;bottom:8px!important;left:50%!important;transform:translateX(-50%)!important;z-index:3!important;background:rgba(6,12,24,0.55)!important;border-radius:8px!important;padding:8px 16px!important;backdrop-filter:blur(4px)!important;-webkit-backdrop-filter:blur(4px)!important;display:flex!important;gap:14px!important}
/* Bigger thruster/trim buttons */
.ws-helm-hud .helm-extras-row button{min-width:56px!important;min-height:56px!important;font-size:0.85rem!important;padding:8px 14px!important;border-radius:8px!important;cursor:pointer!important;touch-action:manipulation!important}
/* Hide depth chart (box with blue line) */
.ws-helm-hud .helm-center>:nth-child(5){display:none!important}
/* Hide engine off notice */
.ws-helm-hud .engine-off-notice{display:none!important}
/* Camera toggle button - top right area */
.cam-toggle-btn{position:absolute!important;top:12px!important;right:50%!important;transform:translateX(50%)!important;z-index:10!important;background:rgba(6,12,24,0.65)!important;color:#7cb8d8!important;border:1px solid #1a3050!important;border-radius:8px!important;padding:8px 16px!important;font-size:0.85rem!important;font-weight:600!important;font-family:system-ui,sans-serif!important;cursor:pointer!important;backdrop-filter:blur(4px)!important;-webkit-backdrop-filter:blur(4px)!important;transition:all .2s!important;pointer-events:auto!important}
.cam-toggle-btn:hover{background:rgba(0,255,170,0.15)!important;border-color:#0fa!important;color:#0fa!important}
/* GPS button - top left */
.gps-btn{position:absolute!important;top:12px!important;left:12px!important;z-index:10!important;background:rgba(6,12,24,0.65)!important;color:#7cb8d8!important;border:1px solid #1a3050!important;border-radius:8px!important;padding:8px 16px!important;font-size:0.85rem!important;font-weight:600!important;font-family:system-ui,sans-serif!important;cursor:pointer!important;backdrop-filter:blur(4px)!important;-webkit-backdrop-filter:blur(4px)!important;transition:all .2s!important;pointer-events:auto!important}
.gps-btn:hover{background:rgba(0,120,255,0.2)!important;border-color:#08f!important;color:#08f!important}
/* Nav chart Leaflet map */
.nav-chart{width:100%!important;height:100%!important;min-height:200px!important}
.nav-chart>div{width:100%!important;height:100%!important;min-height:200px!important}
.nav-chart .leaflet-container{background:#0a1520!important}
/* Power button bigger */
.power-panel button,.power-dashboard button,.pd-canvas-wrap+div button{min-width:60px!important;min-height:48px!important;font-size:0.85rem!important;padding:10px 16px!important;border-radius:8px!important;cursor:pointer!important;touch-action:manipulation!important}
/* Minimize instruments (bottom panel) */
.helm-instruments.pd-minimized{flex:0 0 38px!important;min-height:38px!important;overflow:hidden!important}
/* Minimize button */
.pd-min-btn{flex:0 0 36px!important;padding:4px 0!important;background:transparent!important;border:none!important;border-bottom:2px solid transparent!important;color:#4a6a8a!important;font-size:.75rem!important;font-weight:700!important;cursor:pointer!important;transition:all .15s!important;font-family:system-ui,sans-serif!important}
.pd-min-btn:hover{color:#0fa!important;background:rgba(0,255,170,0.05)!important}