/* Shared appearance tokens. Geometry and operational marker colours live elsewhere. */
:root, :root[data-theme="vts-dark"] {
  color-scheme: dark;
  --bg: #051423; --surface: rgba(7,22,37,.94); --surface-solid: #0a1c2e;
  --border: rgba(105,174,194,.22); --accent: #71e1df; --accent-glow: rgba(86,215,215,.13);
  --green: #70e6b0; --red: #ff6d77; --text: #ebf7f7; --text-dim: #91aab7;
  --font: 'Inter', system-ui, sans-serif; --mono: 'JetBrains Mono', monospace;
  --control-bg: #0d293a; --input-bg: #041220; --card-bg: rgba(255,255,255,.035);
  --accent-strong: rgba(0,212,255,.3);
  --hover-bg: rgba(255,255,255,.08); --muted-border: #355061;
  --yellow: #f4c46a; --blue: #75aaff; --on-status: #051423;
  --panel-shadow: 0 20px 50px rgba(0,10,20,.52), inset 0 1px 0 rgba(255,255,255,.04);
  --glass-bg: rgba(6,23,38,.96); --glass-rim: rgba(113,225,223,.25);
  --glass-highlight: rgba(255,255,255,.04); --glass-blur: 24px; --glass-saturation: 1;
  --glass-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
  --header-bg: linear-gradient(110deg,#142c3c,#132332);
  --warning-bg: rgba(244,196,106,.1); --danger-bg: rgba(255,109,119,.1);
  --success-bg: rgba(112,230,176,.1); --info-bg: rgba(117,170,255,.1);
  --scroll-thumb: #617c8f; --glass-surface: var(--surface-solid);
}
:root[data-theme="glass-light"] {
  color-scheme: light;
  --bg: #e8eef5; --surface: rgba(244,248,253,.92); --surface-solid: #f4f8fd;
  --auth-bg: rgba(244,248,253,.98); --connection-bg: rgba(244,248,253,.95);
  --text: #152c40; --text-dim: #435b70; --border: rgba(51,78,105,.28);
  --accent: #075ac1; --accent-glow: rgba(7,90,193,.1);
  --accent-strong: rgba(7,90,193,.2); --type-label-color: var(--text);
  --green: #12683e; --red: #b5263b; --yellow: #815207; --blue: #075ac1; --on-status: #fff;
  --control-bg: #e5edf6; --input-bg: #fff; --card-bg: rgba(255,255,255,.86);
  --hover-bg: rgba(7,90,193,.09); --muted-border: #b0c1d4;
  --glass-bg: rgba(244,248,253,.90); --glass-rim: rgba(255,255,255,.85);
  --glass-highlight: rgba(255,255,255,.7); --glass-blur: 20px; --glass-saturation: 1.3;
  --glass-surface: rgba(244,248,253,.90);
  --header-bg: linear-gradient(120deg,rgba(255,255,255,.94),rgba(231,241,253,.92));
  --panel-shadow: 0 14px 40px rgba(14,38,70,.2), inset 0 1px 0 rgba(255,255,255,.85);
  --warning-bg: #fff2d7; --danger-bg: #ffe9ed; --success-bg: #e5f4eb; --info-bg: #e5effe;
  --scroll-thumb: #7b93ad;
}
:root[data-theme="glass-dark"] {
  color-scheme: dark;
  --bg: #071a29; --surface: rgba(16,37,56,.92); --surface-solid: #102538;
  --auth-bg: rgba(16,37,56,.98); --connection-bg: rgba(16,37,56,.95);
  --text: #edf6ff; --text-dim: #b1c2d3; --border: rgba(175,206,235,.3);
  --accent: #80c8ff; --accent-glow: rgba(128,200,255,.14);
  --accent-strong: rgba(128,200,255,.25);
  --green: #8ce6b5; --red: #ff8892; --yellow: #ffd27f; --blue: #92caff; --on-status: #071a29;
  --control-bg: #19364f; --input-bg: #0b2033; --card-bg: rgba(22,46,67,.94);
  --hover-bg: rgba(128,200,255,.12); --muted-border: #53728f;
  --glass-bg: rgba(16,37,56,.90); --glass-rim: rgba(205,228,249,.35);
  --glass-highlight: rgba(235,246,255,.12); --glass-blur: 20px; --glass-saturation: 1.3;
  --glass-surface: rgba(16,37,56,.90);
  --header-bg: linear-gradient(120deg,rgba(40,67,92,.96),rgba(16,37,56,.94));
  --panel-shadow: 0 14px 40px rgba(0,6,16,.42), inset 0 1px 0 rgba(235,246,255,.2);
  --warning-bg: #3d3324; --danger-bg: #402b3c; --success-bg: #203e39; --info-bg: #213b57;
  --scroll-thumb: #7b99b4;
}
/* Each outer surface has one blur; dense data and sticky headings stay opaque. */
:root[data-theme^="glass-"] :is(#topbar,.vts-tool,.port-picker,.port-picker-menu,#traffic-panel,#zones-panel,#weather-panel,#port-profile-panel,#data-sources-panel,#map-layers-panel,#control-panel,#ship-info,#legends-panel,#alarms-panel,#ecdis-panel,#ship-popup,#ais-popup,#sensor-popup,#observation-popup,#vhf-transcription-panel,#ai-chat-panel,.cam-window,#zone-draw-banner,#map-readout,#map-attributions .ol-attribution,.ai-chat-launcher) {
  background: linear-gradient(130deg,var(--glass-highlight),transparent 45%),var(--glass-bg);
  color: var(--text); border-color: var(--glass-rim); box-shadow: var(--panel-shadow);
  backdrop-filter: var(--glass-filter);
  -webkit-backdrop-filter: var(--glass-filter);
}
:root[data-theme^="glass-"] :is(.traffic-item,.fleet-card,.port-source-card,.port-service-card,.source-health-row,.observation-card,.observation-group,.observation-measurement,.ai-chat-message,.zone-card,.zone-item,.track-list-item,.sensor-reading-tag) { background: var(--card-bg); border-color: var(--border); }
:root[data-theme^="glass-"] :is(.sp-header,.ais-popup-header,.sensor-popup-header,.cam-win-hdr,.ecdis-hdr,#alarms-panel .alarms-header,.alarms-tabs,#ai-chat-panel .vts-panel-heading,.traffic-filters,.traffic-search,.yolo-tab-bar) { background: var(--header-bg); color: var(--text); border-color: var(--border); }
:root[data-theme^="glass-"] :is(.ctrl-btn,.sp-cam-btn,.spd-btn,.cam-mode-toggle,.yolo-tab,.alarms-btn,.vts-panel-close,.traffic-filters button,.alarms-tabs button,.zone-form button,.weather-portal,#source-health-summary,.port-controls button,.port-picker-menu select,.ai-chat-toolbar select,.ai-chat-toolbar button,.ai-chat-document-tools button,.ai-chat-navigation button,.ai-chat-history-actions button,.ai-chat-conversation,#ai-chat-send,#ai-chat-stop) { background: var(--control-bg); color: var(--text); border-color: var(--border); }
:root[data-theme^="glass-"] :is(input:not([type="range"]):not([type="checkbox"]),textarea,select,.voice-selector,#ai-chat-input,#ai-chat-conversations-search,#ai-chat-conversation-title) { background: var(--input-bg); color: var(--text); border-color: var(--border); }
:root[data-theme^="glass-"] :is(.ctrl-btn.active,.ctrl-btn:hover,.sp-cam-btn.active,.spd-btn.active,.yolo-tab.active,.traffic-filters button.is-active,.alarms-tabs button.is-active,.vts-tool[aria-expanded="true"],.ai-chat-conversation[aria-pressed="true"],.port-controls button:hover,#ai-chat-send,.weather-portal) { background: var(--accent-glow); color: var(--accent); border-color: var(--accent); }
:root[data-theme^="glass-"] :is(.sp-sub,.sp-label,.ais-popup-label,.sensor-popup-type,.legend-title,.legend-item,.speed-labels,.voice-config-hint,.alarm-time,.alarms-empty,.zones-list-title,.zones-clear-btn,.alarm-dismiss,.zone-remove-btn,.alarm-setting label,.source-health-row span,.source-health-row small,.source-popup-health,.observation-meta,.vts-connection,.traffic-empty,.track-name,.si-label,.cam-no-signal) { color: var(--text-dim); }
:root[data-theme^="glass-"] :is(.sp-value,.ais-popup-value,.sensor-popup-name,.si-value,.alarm-message,.alarm-type,.zone-name,.port-picker-current,.legend-item strong) { color: var(--text); }
:root[data-theme^="glass-"] :is(#ais-legend,#sensor-legend,#track-legend,.alarms-voice-config,.alarm-types-settings,.observation-group,.ai-chat-content pre,.ai-chat-documents,.traffic-list-note) { background: var(--card-bg); color: var(--text); border-color: var(--border); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
:root[data-theme^="glass-"] .ai-chat-message-user { background: var(--info-bg); border-color: var(--border); }
:root[data-theme^="glass-"] .alarm-item { background: var(--card-bg); }
:root[data-theme^="glass-"] :is(.alarm-item.warning,.zone-card[data-type="warning"]) { background: var(--warning-bg); border-left-color: var(--yellow); }
:root[data-theme^="glass-"] :is(.alarm-item.danger,.zone-card[data-type="danger"]) { background: var(--danger-bg); border-left-color: var(--red); }
:root[data-theme^="glass-"] .alarm-item.info { background: var(--info-bg); border-left-color: var(--blue); }
:root[data-theme^="glass-"] .alarm-item.success { background: var(--success-bg); border-left-color: var(--green); }
:root[data-theme^="glass-"] :is(.alarms-badge,.vts-alarm-count) { background: var(--red); color: var(--on-status); }
:root[data-theme^="glass-"] :is(.vts-connection.is-connected,.mode-badge,.si-status,.source-health-row.is-available) { color: var(--green); }
:root[data-theme^="glass-"] .vts-connection.is-error { color: var(--red); }
:root[data-theme^="glass-"] #topbar .mode-badge { background: var(--success-bg); border-color: var(--green); }
:root[data-theme^="glass-"] :is(#auth-overlay,#ship-connecting-overlay) { background: var(--surface); color: var(--text); }
:root[data-theme^="glass-"] .compass-wrap .compass { background: var(--control-bg); border-color: var(--border); }
:root[data-theme^="glass-"] .tilt-slider { background: var(--control-bg); }
:root[data-theme^="glass-"] .ol-attribution { color: var(--text) !important; }
:root[data-theme^="glass-"] .ol-attribution a { color: var(--accent) !important; }
:root[data-theme^="glass-"] ::placeholder { color: var(--text-dim); opacity: 1; }
:root[data-theme^="glass-"] :is(.kc-logout-btn,.ais-popup-close,.sp-close) { color: var(--text-dim); }
:root[data-theme^="glass-"] :is(.kc-logout-btn:hover,.ais-popup-close:hover,.sp-close:hover) { color: var(--red); }
:root[data-theme^="glass-"] * { scrollbar-color: var(--scroll-thumb) transparent; }
:root[data-theme^="glass-"] ::-webkit-scrollbar-thumb { background: var(--scroll-thumb); }
/* Legend dots, map colours, partner-logo backplates, embedded video and speed gradients remain semantic. */
#theme-toggle { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; padding: 7px 9px; color: var(--text); background: var(--control-bg); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; font: 12px var(--font); }
#theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
#theme-toggle:hover,#theme-toggle[aria-expanded="true"] { color: var(--accent); border-color: var(--accent); }
#theme-menu { position: fixed; right: 14px; width: 245px; padding: 8px; border: 1px solid var(--border); border-radius: 12px; color: var(--text); background: var(--surface-solid); box-shadow: var(--panel-shadow); z-index: 400; }
#theme-menu[hidden] { display: none; }
#theme-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; color: var(--text); border: 1px solid transparent; border-radius: 8px; background: transparent; text-align: left; font: 13px var(--font); cursor: pointer; }
#theme-menu button:hover { background: var(--hover-bg); }
#theme-menu button[aria-checked="true"] { border-color: var(--accent); background: var(--accent-glow); }
#theme-menu button[aria-checked="true"]::after { content: '✓'; margin-left: auto; color: var(--accent); }
#theme-toggle:focus-visible,#theme-menu button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-swatch { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; border: 1px solid #8ba0b4; background: linear-gradient(135deg,#0a1c2e 50%,#71e1df 50%); }
.theme-swatch-light { background: linear-gradient(135deg,#f4f8fd 50%,#075ac1 50%); }
.theme-swatch-dark { background: linear-gradient(135deg,#102538 50%,#80c8ff 50%); }
.theme-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Keep the added control compact within the existing desktop ribbon. */
@media (min-width: 801px) and (max-width: 1400px) {
  #topbar .tb-right { gap: 8px; }
  #theme-toggle span { display: none; }
  #topbar .tb-center { min-width: 0; }
  #topbar .vts-connection { max-width: 115px; overflow: hidden; text-overflow: ellipsis; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root[data-theme^="glass-"] { --glass-bg: var(--surface-solid); --glass-highlight: transparent; --glass-filter: none; }
}
@media (prefers-reduced-transparency: reduce) {
  :root[data-theme^="glass-"] { --glass-bg: var(--surface-solid); --surface: var(--surface-solid); --card-bg: var(--surface-solid); --auth-bg: var(--surface-solid); --connection-bg: var(--surface-solid); --glass-highlight: transparent; --glass-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  #theme-toggle,#theme-menu button,.vts-tool,.vts-brand-mark::after { transition: none; animation: none; }
}
/* Locally owned port-camera player controls; never filter live video pixels. */
.roc-camera-player { background: #000; color: var(--text-dim); }
.roc-camera-player #notice { background: var(--surface-solid); color: var(--text); border: 1px solid var(--border); box-shadow: var(--panel-shadow); }
.roc-camera-player button { background: var(--control-bg); color: var(--accent); border-color: var(--accent); }
/* Remaining operational cards and action states share the same materials. */
:root[data-theme^="glass-"] :is(.guard-zone,.fleet-card,.port-source-card,.port-service-card,.zones-summary,.alarm-vessel,.sensor-reading-tag) { background: var(--card-bg); border-color: var(--border); }
:root[data-theme^="glass-"] :is(.zones-primary,.guard-zone-actions button,.zone-form-actions button,#zone-draw-cancel) { background: var(--control-bg); color: var(--text); border-color: var(--border); }
:root[data-theme^="glass-"] .zones-primary { color: var(--accent); border-color: var(--accent); }
:root[data-theme^="glass-"] :is(.source-health-summary.has-issues,.source-health-row.has-issues) { border-color: var(--yellow); }
:root[data-theme^="glass-"] :is(.weather-portal:hover,.traffic-item:hover,.track-list-item:hover,.zone-item:hover,.guard-zone-actions button:hover) { background: var(--hover-bg); border-color: var(--accent); }
:root[data-theme^="glass-"] :is(.cam-mode-toggle.active,.yolo-tab:hover,.sp-cam-btn:hover,.spd-btn:hover) { background: var(--accent-glow); color: var(--accent); border-color: var(--accent); }
:root[data-theme^="glass-"] :is(.voice-selector option,.port-controls select option) { background: var(--surface-solid); color: var(--text); }
:root[data-theme^="glass-"] .guard-zone { border-left-color: var(--zone-color); }
:root[data-theme^="glass-"] .port-controls select { color-scheme: inherit; }
:root[data-theme="glass-light"] :is(#ais-popup-type,#sensor-popup-type) { border-left: 4px solid var(--type-marker-color); padding-left: 6px; }

@media (min-width: 801px) and (max-width: 1900px) {
  #topbar .tb-left { min-width: 0; }
  #topbar .vts-brand-copy { min-width: 0; overflow: hidden; }
  #topbar .logo-text { overflow: hidden; text-overflow: ellipsis; }
}

:root[data-theme^="glass-"] .ship-model-panel { background: linear-gradient(130deg,var(--glass-highlight),transparent 45%),var(--glass-bg); border-color: var(--glass-rim); box-shadow: var(--panel-shadow); backdrop-filter: var(--glass-filter); -webkit-backdrop-filter: var(--glass-filter); }
.ship-model-controls button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }