:root { --cyan:#52d9c0; --line:#d9e2eb; --text:#142c45; --muted:#65788b; --smc-font-ui:'Segoe UI',Arial,sans-serif; --smc-font-display:'Segoe UI',Arial,sans-serif; }
* { box-sizing:border-box; }
body { margin:0; color:#173049; background:#edf2f6; }
.shell { padding:0; gap:0; min-height:100vh; }
button { box-shadow:none; background:#f5f8fb; color:#173049; border:1px solid #d3dde7; border-radius:6px; letter-spacing:0; font-weight:600; }
button:hover { box-shadow:none; filter:none; background:#e6eef5; }
button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible { outline:3px solid #45b9ea; outline-offset:2px; }
.ui-icon { width:20px; height:20px; flex:none; object-fit:contain; }
.app-header { min-height:66px; padding:10px 20px; display:flex; align-items:center; gap:22px; background:#062438; color:#f3fbff; border-bottom:1px solid #20475f; }
.app-brand { display:flex; align-items:center; gap:10px; color:inherit; text-decoration:none; white-space:nowrap; }
.app-brand strong { font-size:22px; letter-spacing:.5px; }
.app-brand .ui-icon { width:32px; height:32px; filter:invert(77%) sepia(57%) saturate(555%) hue-rotate(118deg); }
.header-location { border-left:1px solid #416174; padding-left:22px; min-width:0; }
.header-location strong,.header-location small { display:block; }
.header-location strong { font-size:15px; font-weight:600; }
.header-location small { margin-top:2px; font-size:12px; color:#a3bdcf; }
.header-view { display:flex; border:1px solid #4a6c81; padding:3px; border-radius:24px; margin-left:auto; }
.header-view button { width:78px; margin:0; padding:7px 9px; border:0; border-radius:20px; background:transparent; color:#d5e4ed; }
.header-view button[aria-pressed=true] { background:#61e3bf; color:#042c35; }
.header-actions { display:flex; align-items:center; gap:16px; }
.language-switch { display:flex; border:1px solid #416278; border-radius:7px; overflow:hidden; }
.language-switch button { margin:0; padding:7px 11px; width:auto; border:0; border-radius:0; color:#d9e6ef; background:transparent; }
.language-switch button[aria-pressed=true] { background:#d8f6ee; color:#052b38; }
.header-settings { display:flex; align-items:center; gap:8px; width:auto; margin:0; padding:8px 10px; background:transparent; border-color:#416278; color:#f1f8ff; }
.header-settings .ui-icon { filter:invert(1); }
.header-settings:hover { background:#143e55; }
.map-actions { position:absolute; z-index:15; top:123px; left:calc(280px + 18px); display:flex; gap:6px; pointer-events:none; }
.map-actions button { width:auto; margin:0; padding:6px 10px; font-size:11px!important; pointer-events:auto; color:#d8e9f3; border-color:#426276; background:#082b40; }
.map-actions button[aria-pressed=true] { color:#6ef0cf; border-color:#4ba58f; }
.map-actions [hidden] { display:none!important; }
.anchor-ticker-bar { flex:none; min-height:40px; height:40px; background:#082a3e; border:0; border-bottom:1px solid #284b61; border-radius:0; box-shadow:none; color:#d8e7ef; }
.anchor-ticker-title { background:#0e3d4b; color:#c4f6e7; border-right:1px solid #2c606b; box-shadow:none; }
.anchor-ticker-title strong { font-size:11px; }
.anchor-ticker-symbol { display:none; }
.anchor-ticker-item { color:#d5e6ee; font-size:12px; }
.anchor-ticker-item time { color:#f6ce75; }
.anchor-ticker-summary { font-size:10px; }
.anchor-ticker-summary small { color:#e9c47e; }
.anchor-ticker-title b { background:transparent; color:#fff; }
.ticker-clock { background:transparent; min-width:120px; color:#cce2ed; }
.ticker-clock small { font-size:11px; }
.workspace { height:calc(100dvh - 143px); min-height:540px; display:grid; grid-template-columns:280px minmax(0,1fr) 330px; gap:0; flex:none; transition:none; background:#10364c; }
.workspace.controls-collapsed { grid-template-columns:0 minmax(0,1fr) 330px!important; }
.workspace.fleet-collapsed { grid-template-columns:280px minmax(0,1fr) 0; }
.workspace.controls-collapsed.fleet-collapsed { grid-template-columns:0 minmax(0,1fr) 0!important; }
.controls { min-width:0; padding:0 0 12px; overflow:auto; border:0; border-right:1px solid #d1dde7; border-radius:0; box-shadow:none; background:#f7f9fc; color:#18344d; scrollbar-width:thin; scrollbar-color:#b9c8d6 transparent; }
.settings-heading { display:flex; height:50px; padding:0 18px; align-items:center; justify-content:space-between; border-bottom:1px solid #dce5ed; background:#fff; }
.settings-heading strong { font-size:16px; }
.settings-heading button { width:28px; height:28px; padding:4px; margin:0; background:transparent; border:0; }
.settings-group { border-bottom:1px solid #dbe4ed; }
.settings-group>summary { display:flex; align-items:center; gap:10px; padding:18px; cursor:pointer; font-weight:650; font-size:14px; list-style:none; }
.settings-group>summary::-webkit-details-marker { display:none; }
.settings-group>summary:after { content:''; width:16px; height:16px; margin-left:auto; background:url('./vendor/tabler/chevron-down.svg') center/16px no-repeat; }
.settings-group[open]>summary:after { transform:rotate(180deg); }
.settings-content { padding:0 18px 16px; }
.settings-content>label { display:block; margin:0 0 13px; color:#25455d; font-size:13px; line-height:1.5; }
.settings-content>label:has(input[type=checkbox]) { display:flex; align-items:center; gap:9px; min-height:28px; margin:4px 0; }
.settings-content label input[type=checkbox] { width:16px; height:16px; accent-color:#008d81; margin:0; flex:none; }
.controls select,.controls input[type=number],.controls input[inputmode=decimal] { background:#fff; border:1px solid #c9d6e2; border-radius:5px; padding:8px; color:#1a3b55; margin-top:6px; font-size:13px!important; }
.controls label output { color:#177e86; background:transparent; }
.controls .surface-style,.controls .label-density,.controls .render-quality { padding:0; margin:0 0 13px; background:transparent; border:0; color:#25455d; font-weight:400; letter-spacing:0; }
.controls .surface-style small,.controls .surface-style small.is-ready { color:#24776c; font-size:11px; line-height:1.4; }
.controls input[type=range] { accent-color:#159b97; }
.controls .depth-profile span,.controls .depth-profile label,.controls .manual-center,.controls .readout small { color:#4d697e; }
.controls .depth-settings,.controls .source-card,.controls .readout { background:#edf2f7; border-color:#c9d7e3; box-shadow:none; color:#25455d; }
.controls .depth-settings summary { color:#26445d; font-size:12px; }
.controls .source-card b { color:#19706d; }
.controls .source-card small { color:#60788a; }
.controls .readout { padding:8px; margin-top:10px; }
.controls .readout strong { font-size:18px; }
.controls .surface-summary { background:transparent; padding:8px 0; border:0; }
.controls .surface-summary strong { font-size:14px; color:#1b455a; }
.controls #resetView { margin:14px 18px 0; width:calc(100% - 36px); background:#e5eff4; border:1px solid #bdcedb; color:#1a4559; font-size:12px!important; }
.map-disclaimer { margin:12px 18px 0; font-size:11px; color:#7a5863; }
.seamark-layer-status { font-size:10px!important; background:#e9f2f5; color:#527182; border-color:#7fadb5; letter-spacing:0; }
.viewport-panel { grid-column:2; grid-row:1; border:0; box-shadow:none; border-radius:0; min-height:0; }
.viewport { background:#174d69; }
.viewport:after { background:none; box-shadow:none; }
.north,.viewport-panel.fleet-open .north,.viewport-panel.detail-open .north { right:16px; top:16px; width:38px; height:38px; background:#072c41; color:#e0edf5; border-color:#86aabd; box-shadow:none; }
.north:before { display:none; }
.map-tools { position:absolute; z-index:6; right:16px; bottom:62px; display:flex; flex-direction:column; gap:3px; }
.map-tools button { margin:0; padding:8px; width:36px; height:36px; background:#f5f9fc; border-color:#bacbd9; box-shadow:none; }
.view-readout { left:16px; bottom:16px; right:auto; padding:7px 10px; font-size:11px; color:#d9e7ef; background:#082b40e8; border:1px solid #52758a; border-radius:5px; }
.viewport-panel.fleet-open .view-readout,.viewport-panel.detail-open .view-readout { right:auto; max-width:calc(100% - 90px); }
.help { display:none; }
.ship-label { box-shadow:0 2px 4px #0002; background:#073044eb; border-color:#6e95a5; border-radius:4px; padding:4px 7px; }
.ship-label strong { font-size:11px!important; letter-spacing:0; }
.ship-label small { font-size:10px!important; }
.ship-label.is-name-chip { padding:4px 7px; }
.ship-label.is-flag-only { opacity:.82; }
.airport-marker { filter:drop-shadow(0 1px 2px #0005); }
.airport-marker strong { font-size:10px; }
.fleet-table-panel { position:relative; grid-column:3; grid-row:1; top:auto; right:auto; bottom:auto; width:100%; min-width:0; border:0; border-left:1px solid #35576b; box-shadow:none; backdrop-filter:none; background:#062539; border-radius:0; }
.fleet-table-panel>header { min-height:54px; padding:8px 14px; background:#082c41; border-color:#2b4c61; }
.fleet-table-panel>header strong { font-size:17px; color:#eff8ff; letter-spacing:0; }
.fleet-table-panel>header small { font-size:11px; color:#99b3c5; letter-spacing:0; }
.fleet-table-panel>header button { font-size:15px!important; }
#toggleFleetFlow { width:auto; padding:5px 7px; margin-left:auto; margin-right:4px; font-size:11px!important; border:1px solid #3e677d; border-radius:5px; color:#99ccdf; }
#toggleFleetFlow[aria-pressed=true] { color:#5de0bf; }
.fleet-search { margin:8px 12px; display:flex; align-items:center; gap:6px; border:1px solid #3a5b72; background:#032136; padding:0 8px; border-radius:6px; }
.fleet-search .ui-icon { width:15px; height:15px; filter:invert(.8); }
.fleet-search input { width:100%; min-width:0; padding:9px 0; background:transparent; border:0; color:#e6f1fa; font-size:12px!important; }
.fleet-search input::placeholder { color:#99afc1; }
.fleet-search select { width:76px; margin:0; padding:5px 2px; background:#092c42; border:0; color:#b6ccda; font-size:11px!important; }
.fleet-table-head,.fleet-table-row { grid-template-columns:22px minmax(70px,1fr) 52px 28px 61px; gap:4px; }
.fleet-table-head { padding:0 12px; min-height:30px; background:#08293d; color:#a9c3d3; border-color:#24495f; font-size:10px!important; }
.fleet-table-head button { font-size:10px!important; letter-spacing:0; }
.fleet-table-row { min-height:39px; padding:6px 12px; background:#082c40; border-bottom:1px solid #173d53; font-size:11px; }
.fleet-table-row:nth-child(even) { background:#06283c; }
.fleet-table-row .fleet-name { font-size:12px; font-weight:600; }
.fleet-table-row .fleet-status { font-size:9px; font-weight:600; }
.fleet-table-row .fleet-speed { font-size:11px; }
.fleet-table-row .fleet-wait { color:#edca78; font-size:11px; text-align:right; }
.fleet-table-row .fleet-course,.fleet-table-row .fleet-destination { display:none; }
.fleet-table-row .ship-flag { transform:none; width:21px; height:15px; }
.fleet-table-row .ship-flag img { width:21px; height:14px; left:0; top:0; }
.fleet-table-row .ship-flag:before { display:none; }
.fleet-table-row.is-selected { background:#0862a3; box-shadow:inset 3px 0 #74d9ff; }
.fleet-table-row:hover,.fleet-table-row.is-highlighted { background:#15465f; box-shadow:inset 3px 0 var(--status-color); }
.fleet-table-row.is-nuc { position:relative; top:auto; background:#612c3c; border:0; border-bottom:1px solid #914858; box-shadow:inset 3px 0 #ee8195; }
.fleet-table-body { scrollbar-width:thin; scrollbar-color:#416980 #062539; }
.fleet-empty { color:#b1c5d3; font-size:13px; padding:12px 16px; }
.ais-detail { position:relative; top:auto; right:auto; flex:none; width:auto; max-height:45%; overflow:auto; margin:0; padding:0 12px 10px; border:0; border-top:1px solid #4b6c82; border-radius:0; background:#072b40; box-shadow:none; backdrop-filter:none; }
.ais-detail>header { font-size:11px; height:30px; border-color:#294e63; color:#b6d5e5; letter-spacing:0; }
.ais-detail-identity { padding:8px 0; gap:8px; }
.ais-detail-identity strong { font-size:14px; }
.ais-detail-identity small { font-size:10px; }
.selected-preview { display:flex; gap:12px; align-items:center; }
.selected-preview figure { margin:0; width:120px; flex:none; }
.selected-preview canvas { display:block; width:120px; height:76px; background:#0c3852; border:1px solid #3e5d72; border-radius:4px; }
.selected-preview figcaption { margin-top:3px; font-size:9px; color:#92b0c2; }
.selected-preview>div { min-width:0; }
.selected-preview small,.selected-preview b { display:block; }
.selected-preview small { font-size:10px; color:#9cb7c9; margin-top:5px; }
.selected-preview b { font-size:14px; font-variant-numeric:tabular-nums; color:#e1f2fc; }
.selected-more { margin-top:8px; }
.selected-more>summary { color:#a6c7da; font-size:11px; cursor:pointer; padding:5px 0; }
.ais-detail-grid div,.ais-detail-status { background:transparent; border:0; border-bottom:1px solid #26495e; padding:5px 0; }
.ais-detail-grid span,.ais-detail-status span { font-size:10px; text-transform:none; letter-spacing:0; color:#9cb9cd; }
.ais-detail-grid b,.ais-detail-status strong { font-size:12px; }
.overview-map-panel { right:64px!important; bottom:62px; background:#082d43; border-color:#62869b; box-shadow:none; }
footer { display:flex; min-height:37px; margin:0; padding:8px 16px; border:0; border-top:1px solid #cedbe6; color:#698192; background:#e9eff4; box-shadow:none; font-size:10px; }
footer a { color:#1b5c78; }
.map-information { background:#fff; color:#17334c; box-shadow:none; border-color:#d5e1ea; }
.map-information h1,.map-information h2 { color:#153b54; }
.map-information p { color:#536b7e; }
.map-information-label { color:#177a83; }
.map-information a { color:#007c8b; }
body.bathy-fullscreen .app-header,body.bathy-focus-mode .app-header,body.bathy-fullscreen .map-actions,body.bathy-focus-mode .map-actions { display:none; }
body.bathy-fullscreen .workspace,body.bathy-focus-mode .workspace { height:100dvh; grid-template-columns:minmax(0,1fr) 330px!important; }
body.bathy-fullscreen .fleet-table-panel,body.bathy-focus-mode .fleet-table-panel { grid-column:2; top:auto; bottom:auto; }
body.bathy-fullscreen .viewport-panel,body.bathy-focus-mode .viewport-panel { grid-column:1; }
@media(min-width:1001px) { .shell:has(.controls-collapsed) .map-actions { left:16px; } }
@media(max-width:1100px) { .workspace { grid-template-columns:250px minmax(0,1fr) 305px; }.workspace.controls-collapsed{grid-template-columns:0 minmax(0,1fr) 305px!important;}.header-location{display:none;}.map-actions{left:268px;}.app-header{gap:14px;}.header-view{margin-left:auto;} }
@media(max-width:800px) {
 .app-header { min-height:60px; padding:8px 10px; gap:8px; }.app-brand strong{font-size:16px;}.app-brand .ui-icon{width:24px;height:24px;}.header-actions{gap:6px;}.header-settings span{display:none;}.header-view button{width:45px;padding:6px 4px;font-size:11px!important;}.language-switch button{padding:6px 8px;}
 .workspace,.workspace.controls-collapsed { height:calc(100dvh - 137px); min-height:480px; grid-template-columns:minmax(0,1fr) 280px!important; }.workspace.fleet-collapsed,.workspace.controls-collapsed.fleet-collapsed{grid-template-columns:minmax(0,1fr) 0!important;}
 .viewport-panel{grid-column:1;}.fleet-table-panel{grid-column:2;}.controls{position:absolute;z-index:18;left:0;top:0;bottom:0;width:270px;border-right:1px solid #aebfce;box-shadow:8px 0 28px #00172830;}.workspace.controls-collapsed .controls{display:none;}.map-actions{left:10px;top:113px;}.anchor-ticker-summary{display:none;}.anchor-ticker-title{min-width:180px;}.ticker-clock{display:none;}footer{font-size:9px;}footer #imageryAttribution{display:none;}
}
@media(max-width:540px) { .app-brand strong{font-size:14px;}.app-brand .ui-icon{display:none;}.app-header{gap:6px;}.header-view{margin-left:auto;}.header-view button{width:36px;font-size:10px!important;}.header-settings{padding:7px;}.header-actions{gap:5px;}.language-switch button{padding:6px;}.workspace,.workspace.controls-collapsed{grid-template-columns:minmax(0,1fr)!important;}.fleet-table-panel{position:absolute;right:0;top:0;bottom:0;width:min(310px,88vw);z-index:16;grid-column:auto;box-shadow:-8px 0 28px #00172830;}.workspace.fleet-collapsed .fleet-table-panel{display:none;}.map-actions button{font-size:10px!important;padding:5px 7px;} }
html,body { height:100%; overflow:hidden; overscroll-behavior:none; }
.shell { height:100dvh; min-height:0; overflow:hidden; }
.app-header,.shell>footer { flex:none; }
.workspace,.workspace.controls-collapsed { flex:1 1 0; height:auto; min-height:0; }
.viewport,.controls,.fleet-table-body,.ais-detail { overscroll-behavior:contain; }
.viewport { touch-action:none; user-select:none; -webkit-user-select:none; }
.viewport img { -webkit-user-drag:none; }
.shell>footer { display:flex; }
.ship-scale-setting output { float:right; font-weight:600; }
.ship-scale-setting input { display:block; width:100%; margin:8px 0 4px; }
.ship-scale-setting small { display:block; color:#65788b; font-size:11px; }
.ship-scale-setting { margin:0 0 14px; font-size:13px; color:#25455d; }
.ship-scale-heading { display:flex; align-items:center; gap:8px; }
.ship-scale-heading label { margin-right:auto; }
.ship-scale-heading output { float:none; white-space:nowrap; }
.ship-scale-heading #resetShipScale { width:auto; margin:0; padding:3px 6px; font-size:11px; color:#196b70; background:#e8f4f3; border-color:#b5d5d0; }
.ship-label { max-width:calc(111px + 21px * var(--vessel-icon-scale,1)); }
.ship-label.is-selected { max-width:calc(139px + 21px * var(--vessel-icon-scale,1)); }
.ship-label .ship-flag { flex-basis:calc(21px * var(--vessel-icon-scale,1)); width:calc(21px * var(--vessel-icon-scale,1)); height:calc(14px * var(--vessel-icon-scale,1)); }
.ship-label .ship-flag:before { height:calc(14px * var(--vessel-icon-scale,1)); }
.ship-label .ship-flag img,.ship-label .ship-flag:after { left:calc(2px * var(--vessel-icon-scale,1)); width:calc(19px * var(--vessel-icon-scale,1)); height:calc(12px * var(--vessel-icon-scale,1)); }
.ship-label.is-flag-only { width:calc(4px + 21px * var(--vessel-icon-scale,1)); min-width:calc(4px + 21px * var(--vessel-icon-scale,1)); max-width:calc(4px + 21px * var(--vessel-icon-scale,1)); }
.ship-label.is-selected small { margin-left:calc(4px + 21px * var(--vessel-icon-scale,1)); }
.interaction-guide { flex:none; min-height:32px; height:32px; display:flex; align-items:center; justify-content:center; padding:0 14px; background:#103449; border-bottom:1px solid #315469; color:#c4d9e7; font-size:12px; }
.guide-mouse,.guide-touch { align-items:center; gap:24px; }
.guide-mouse { display:flex; }.guide-touch { display:none; }
.interaction-guide span { display:flex; align-items:center; gap:7px; white-space:nowrap; }
.interaction-guide kbd { font:inherit; color:#edf6fb; background:#09283b; padding:2px 7px; border:1px solid #3c6075; border-radius:4px; }
.interaction-guide b { font-weight:400; }
.map-actions { top:155px; }
body.bathy-fullscreen .interaction-guide,body.bathy-focus-mode .interaction-guide { display:none; }
@media(max-width:800px) { .map-actions{top:145px;} }
@media(max-width:700px) { .guide-mouse{display:none;}.guide-touch{display:flex;gap:16px;}.interaction-guide{font-size:10px;padding:0 8px;}.interaction-guide kbd{padding:2px 5px;}.interaction-guide span{gap:5px;} }
#mapInformationDialog { width:min(1040px,94vw); max-height:88dvh; padding:0; border:1px solid #bfd1df; border-radius:12px; color:#17334c; background:#fff; box-shadow:0 20px 80px #00172860; overflow:auto; overscroll-behavior:contain; }
#mapInformationDialog::backdrop { background:#021b30a8; }
#mapInformationDialog .map-information { margin:0; max-width:none; border:0; border-radius:0; padding:28px; }
.information-close { position:sticky; z-index:2; top:12px; display:block; width:auto; margin:12px 16px 0 auto; padding:7px 16px; color:#143c55; background:#edf3f7; }
#aisDetailPanel { position:fixed; inset:0; width:min(500px,94vw); height:fit-content; max-height:88dvh; margin:auto; padding:0 20px 20px; overflow:auto; border:1px solid #486c83; border-radius:12px; background:#072b40; box-shadow:0 20px 80px #00172860; overscroll-behavior:contain; }
#aisDetailPanel::backdrop { background:#021b30a8; }
#aisDetailPanel>header { height:44px; font-size:13px; }
#aisDetailPanel .ais-detail-identity { padding:16px 0; }
#aisDetailPanel .ais-detail-identity strong { font-size:20px; white-space:normal; }
#aisDetailPanel .selected-preview { margin-bottom:16px; }
#aisDetailPanel .ais-detail-grid { gap:10px 20px; }
#aisDetailPanel .ais-detail-grid span,#aisDetailPanel .ais-detail-status span { font-size:12px; }
#aisDetailPanel .ais-detail-grid b,#aisDetailPanel .ais-detail-status strong { font-size:14px; }
body.bathy-fullscreen #mapInformationDialog .map-information,body.bathy-focus-mode #mapInformationDialog .map-information { display:block; }
@media(max-width:540px) { .shell>footer { min-height:28px; padding:5px 10px; gap:3px 10px; font-size:9px; }.shell>footer #footerSource{display:none;}.shell>footer a{margin-left:auto;}.ship-scale-setting small{font-size:11px;}#mapInformationDialog .map-information{padding:18px;}.map-information h1{font-size:24px;} }

/* Public, anonymous controls: connection and position age are independent. */
.map-scale { position:absolute; z-index:8; left:16px; bottom:46px; padding:6px 9px; border-radius:5px; background:#062438df; color:#e6f4fc; pointer-events:none; }
.map-scale span { display:block; height:6px; border:1px solid #e6f4fc; border-top:0; }
.map-scale small { display:block; font-size:10px; margin-top:3px; }
.interaction-guide { flex-wrap:wrap; gap:7px 22px; }
.map-type-legend { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 14px; font-size:11px; }
.map-type-legend i { display:inline-block; width:9px; height:9px; border-radius:2px; }
body[data-panel-theme="light"] .controls,body[data-panel-theme="light"] .fleet-table-panel { background:#f4f8fb; color:#17334c; }
body[data-panel-theme="light"] .controls label,body[data-panel-theme="light"] .controls summary,body[data-panel-theme="light"] .settings-heading,body[data-panel-theme="light"] .fleet-table-panel>header strong { color:#17334c; }
body[data-panel-theme="light"] .fleet-table-body,body[data-panel-theme="light"] .fleet-table-row { color:#19384d; background:#f4f8fb; border-bottom-color:#d6e2eb; }
body[data-panel-theme="light"] .fleet-name { color:#19384d; }
body[data-panel-theme="light"] .fleet-table-row.is-selected,body[data-panel-theme="light"] .fleet-table-row.is-highlighted { background:#ccece7; }
body[data-panel-theme="light"] .fleet-table-row:hover { background:#dcecf4; }
body[data-panel-theme="light"] .fleet-table-head,body[data-panel-theme="light"] .fleet-table-panel>header { background:#e6eff5; }
body[data-panel-theme="light"] .fleet-table-panel>header button { background:#fff; color:#17334c; }
body[data-panel-theme="light"] #toggleFleetFlow { color:#17334c; }
body[data-panel-theme="light"] #toggleFleetFlow[aria-pressed="true"] { background:#ccece7; color:#0a5c53; }
body[data-panel-theme="light"] .fleet-table-panel>header small,body[data-panel-theme="light"] .fleet-table-head>span { color:#496b82; }
body[data-panel-theme="light"] .fleet-table-head button,body[data-panel-theme="light"] .fleet-speed,body[data-panel-theme="light"] .fleet-wait { color:#17334c; }
body[data-panel-theme="light"] .fleet-table-row .fleet-age { color:#496b82; }
body[data-panel-theme="light"] .fleet-table-row[data-freshness="aging"] .fleet-age { color:#805818; }
body[data-panel-theme="light"] .fleet-table-row[data-freshness="stale"] .fleet-age,body[data-panel-theme="light"] .fleet-table-row[data-freshness="unknown"] .fleet-age { color:#964830; }
body[data-panel-theme="light"] .fleet-status { color:#244b65!important; }
body[data-panel-theme="light"] .controls small { color:#4d6d81; }
[hidden] { display:none!important; }
.ais-health { flex:none; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:4px 18px; min-height:34px; padding:7px 18px; border-bottom:1px solid #c8d8e2; background:#f1f7fa; color:#435e72; font-size:12px; }
.ais-health strong { color:#166d62; font-size:12px; }
.ais-health[data-connection="delayed"] { background:#fff6e5; }
.ais-health[data-connection="delayed"] strong { color:#94600d; }
.ais-health span { font-variant-numeric:tabular-nums; }
.viewport-panel .map-actions,.shell:has(.controls-collapsed) .viewport-panel .map-actions { position:absolute; z-index:15; top:12px; left:12px; right:60px; display:flex; flex-wrap:wrap; gap:6px; width:auto; pointer-events:none; }
.viewport-panel .map-actions>* { pointer-events:auto; }
.viewport-panel .map-actions button { min-height:44px; margin:0; padding:8px 12px; font-size:12px!important; color:#173c54; background:#f8fcfff2; box-shadow:0 2px 8px #001e3520; }
.viewport-panel .map-actions button[aria-pressed="true"],.viewport-panel .map-actions button[aria-expanded="true"] { background:#0c5c72; color:#fff; border-color:#0c5c72; }
#shareMapLink { width:min(520px,100%); min-height:44px; background:#fff; color:#183e56; }
.map-tools button,.north,.header-settings,.language-switch button,.header-view button,.fleet-table-panel>header button,#closeAisDetail,#closeSettings,.overview-map-actions button { min-height:44px; min-width:44px; }
.fleet-table-row { min-height:52px; }
.fleet-table-row .fleet-name { display:flex; flex-direction:column; gap:3px; min-width:0; }
.fleet-name>span { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.fleet-table-row .fleet-age { font-size:10px!important; font-weight:400; line-height:1.3; color:#a1b9c9; }
.fleet-table-row[data-freshness="aging"] .fleet-age { color:#ecd08c; }
.fleet-table-row[data-freshness="stale"] .fleet-age,.fleet-table-row[data-freshness="unknown"] .fleet-age { color:#ffc58c; }
.fleet-table-row[data-freshness="stale"],.fleet-table-row[data-freshness="unknown"] { border-left:3px dashed #bb9272; }
.ship-label[data-freshness="stale"],.ship-label[data-freshness="unknown"] { opacity:.65; border-style:dashed; }
.ship-label.is-selected { opacity:1; }
.favorite-action { display:block; width:100%; min-height:44px; margin:14px 0 0; }
.favorite-action[aria-pressed="true"] { color:#0b695e; background:#d9f3ea; }
body:not(.motion-enabled) .anchor-ticker-track { animation:none!important; transform:none!important; }
body:not(.motion-enabled) .anchor-ticker-set+ .anchor-ticker-set { display:none; }
body:not(.motion-enabled) .anchor-ticker-window { overflow-x:auto; scrollbar-width:thin; }
.interaction-guide { height:auto; min-height:38px; padding:7px 12px; }
.guide-mouse { display:flex; flex-wrap:wrap; justify-content:center; gap:7px 20px; }
.guide-touch { display:none; }
body.bathy-fullscreen .ais-health,body.bathy-focus-mode .ais-health { display:none; }
@media(pointer:coarse) { .guide-mouse { display:none; }.guide-touch { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 16px; }.controls label { min-height:36px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation:none!important; transition:none!important; } }
@media(max-width:800px) {
 .ais-health { padding:6px 10px; gap:3px 8px; font-size:10px; }.ais-health strong{font-size:11px;}
 #aisDetailPanel { inset:auto 0 0; width:100%; max-width:100%; max-height:78vh; max-height:78dvh; margin:0; border-radius:18px 18px 0 0; padding-bottom:max(20px,env(safe-area-inset-bottom)); }
 #aisDetailPanel>header { position:sticky; top:0; z-index:2; background:#072b40; min-height:52px; }
 .viewport-panel .map-actions,.shell:has(.controls-collapsed) .viewport-panel .map-actions { top:8px; left:8px; right:56px; gap:5px; flex-wrap:nowrap; overflow-x:auto; padding:0 0 4px; scrollbar-width:thin; }
 .viewport-panel .map-actions button { flex:none; padding:7px 9px; font-size:11px!important; }
 .shell>footer { flex-wrap:wrap; min-height:32px; }
 .shell>footer #imageryAttribution { display:inline; }
 .fleet-table-panel { width:min(340px,92vw); }
}