:root {
  --bg-dark: #07111f;
  --glass-bg: rgba(7, 19, 34, 0.94);
  --glass-border: rgba(78, 183, 221, 0.34);
  --glass-border-hover: rgba(32, 213, 255, 0.88);
  --accent: #20d5ff;
  --accent-dim: rgba(32, 213, 255, 0.17);
  --accent-glow: rgba(32, 213, 255, 0.38);
  --text-primary: #eef8ff;
  --text-secondary: rgba(218, 238, 249, 0.84);
  --text-dim: rgba(168, 198, 216, 0.76);
  --menu-bg: #071529;
  --market-positive: #b6ff3b;
  --market-risk: #ff477e;
  --market-caution: #ffc95c;
  --market-intel: #f3c96a;
  --interface-surface: rgba(8, 22, 39, 0.96);
  --interface-raised: rgba(15, 37, 59, 0.96);
  --interface-edge: rgba(72, 177, 210, 0.38);
  --interface-edge-active: rgba(32, 213, 255, 0.76);
  --interface-focus: #dff7ff;
}

body {
  background-color: var(--bg-dark);
  color: var(--text-primary);
}

:where(button, input, select, textarea, [role='button']):focus-visible {
  outline-color: var(--interface-focus) !important;
  box-shadow: 0 0 0 3px rgba(32, 213, 255, 0.2);
}

:is(
  #left-panel-stack > #data-panel .data-panel-inner,
  #left-panel-stack > #cctv-panel .cctv-panel-inner,
  #left-panel-stack > #scene-panel .scene-panel-inner,
  #left-panel-stack > #global-context-panel .global-context-panel-inner,
  #right-context-rail > #cctv-panel .cctv-panel-inner,
  #right-context-rail .radio-panel-inner,
  #right-context-rail .weather-panel-inner,
  #right-context-rail .recent-imagery-panel-inner,
  #right-context-rail .global-context-panel-inner,
  #pp-toggles,
  #param-slider-panel,
  #command-dock,
  #location-bar
) {
  color: var(--text-primary);
  border-color: var(--interface-edge);
  background-color: var(--interface-surface);
  box-shadow:
    inset 2px 0 rgba(32, 213, 255, 0.2),
    0 14px 38px rgba(0, 0, 0, 0.52),
    0 0 20px rgba(32, 213, 255, 0.08);
  backdrop-filter: blur(22px) saturate(1.35);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
}

:is(
  #left-panel-stack > #data-panel:not(.collapsed) .data-panel-inner,
  #left-panel-stack > #cctv-panel:not(.collapsed) .cctv-panel-inner,
  #left-panel-stack > #scene-panel:not(.collapsed) .scene-panel-inner,
  #left-panel-stack > #global-context-panel:not(.collapsed) .global-context-panel-inner,
  #right-context-rail > #cctv-panel:not(.collapsed) .cctv-panel-inner,
  #right-context-rail > [data-panel-id]:not(.collapsed)
    :is(.radio-panel-inner, .weather-panel-inner, .recent-imagery-panel-inner, .global-context-panel-inner)
) {
  border-color: var(--interface-edge-active);
  box-shadow:
    inset 2px 0 rgba(32, 213, 255, 0.22),
    0 16px 42px rgba(0, 0, 0, 0.58),
    0 0 22px rgba(32, 213, 255, 0.12);
}

:is(
  #left-panel-stack,
  #right-context-rail
) :is(.panel-header, .param-panel-header, .cctv-calibration-header) {
  border-color: rgba(91, 190, 220, 0.22);
}

:is(
  #left-panel-stack,
  #right-context-rail,
  #command-dock,
  #pp-toggles,
  #param-slider-panel
) :is(.panel-title, .param-panel-title, .pp-header-label, .cctv-summary-label) {
  color: #a8d5e5;
  letter-spacing: 0.16em;
}

:is(#left-panel-stack, #right-context-rail) .panel-divider,
#param-slider-panel .param-panel-divider {
  background: linear-gradient(90deg, rgba(32, 213, 255, 0.6), transparent);
}

:is(
  #left-panel-stack,
  #right-context-rail,
  #command-dock,
  #pp-toggles,
  #param-slider-panel,
  #key-setup,
  #first-run-launcher,
  #whats-new-dialog,
  #cctv-large-view
) :is(button, select, input, textarea) {
  accent-color: var(--accent);
}

:is(
  #left-panel-stack,
  #right-context-rail,
  #command-dock,
  #pp-toggles,
  #param-slider-panel,
  #key-setup,
  #first-run-launcher,
  #whats-new-dialog,
  #cctv-large-view
) :is(input:not([type='range']), select, textarea) {
  color: var(--text-primary);
  border-color: rgba(93, 156, 184, 0.55);
  background-color: rgba(5, 16, 29, 0.9);
}

:is(
  #left-panel-stack,
  #right-context-rail,
  #command-dock,
  #pp-toggles,
  #param-slider-panel,
  #key-setup,
  #first-run-launcher,
  #whats-new-dialog,
  #cctv-large-view
) :is(input:not([type='range']), select, textarea):is(:hover, :focus-visible) {
  border-color: var(--interface-edge-active);
  background-color: rgba(8, 28, 45, 0.98);
}

:is(
  #left-panel-stack,
  #right-context-rail,
  #command-dock,
  #pp-toggles,
  #param-slider-panel
) .data-toggle-btn:not(.active),
:is(
  #left-panel-stack,
  #right-context-rail,
  #command-dock,
  #pp-toggles,
  #param-slider-panel
) .scene-btn:not(.scene-btn-danger),
:is(#pp-toggles, #param-slider-panel) .pp-toggle-btn:not(.active) {
  color: #d8edf5;
  border-color: rgba(75, 135, 160, 0.38);
  background: linear-gradient(145deg, rgba(17, 42, 64, 0.92), rgba(8, 23, 39, 0.95));
}

:is(
  #left-panel-stack,
  #right-context-rail,
  #command-dock,
  #pp-toggles,
  #param-slider-panel
) :is(.data-toggle-btn, .scene-btn, .pp-toggle-btn, .panel-collapse-btn):is(:hover, :focus-visible) {
  color: #f4fbff;
  border-color: rgba(32, 213, 255, 0.7);
  background-color: rgba(32, 213, 255, 0.12);
  box-shadow: 0 0 14px rgba(32, 213, 255, 0.12);
}

:is(
  #left-panel-stack,
  #right-context-rail,
  #command-dock,
  #pp-toggles,
  #param-slider-panel
) :is(.data-toggle-btn.active, .pp-toggle-btn.active, [aria-pressed='true']) {
  color: var(--market-positive);
  border-color: rgba(182, 255, 59, 0.7);
  background: linear-gradient(135deg, rgba(182, 255, 59, 0.15), rgba(32, 213, 255, 0.09));
  box-shadow: inset 0 0 0 1px rgba(182, 255, 59, 0.08), 0 0 13px rgba(182, 255, 59, 0.1);
}

:is(
  #left-panel-stack,
  #right-context-rail,
  #command-dock,
  #pp-toggles,
  #param-slider-panel
) .scene-btn-danger {
  color: #ff9bb4;
  border-color: rgba(255, 71, 126, 0.48);
  background: rgba(255, 71, 126, 0.1);
}

:is(#key-setup, #first-run-launcher, #whats-new-dialog, #cctv-large-view) {
  color: var(--text-primary);
  border: 1px solid var(--interface-edge-active);
  background: linear-gradient(145deg, rgba(8, 24, 41, 0.99), rgba(7, 15, 31, 0.99));
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.72), 0 0 30px rgba(32, 213, 255, 0.13);
}

:is(#key-setup, #first-run-launcher, #whats-new-dialog, #cctv-large-view)::backdrop {
  background: rgba(2, 8, 17, 0.76);
  backdrop-filter: blur(5px);
}

:is(#key-setup, #first-run-launcher, #whats-new-dialog, #cctv-large-view)
  :is(h1, h2, h3, .key-setup-kicker, .first-run-kicker, .whats-new-header) {
  color: #e9f8ff;
}

:is(#toast, #traffic-sync-chip, #cctv-sync-chip, #key-setup-chip, #style-indicator) {
  color: var(--text-primary);
  border-color: rgba(32, 213, 255, 0.45);
  background-color: rgba(6, 20, 36, 0.94);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.42), 0 0 14px rgba(32, 213, 255, 0.08);
}

#intel-hud {
  --hud-color: rgba(213, 245, 255, 0.94);
  --hud-glow: rgba(32, 213, 255, 0.26);
  --hud-border: rgba(32, 213, 255, 0.38);
}

#cockpit-hud {
  --cockpit-accent: #20d5ff;
}

:is(#view-switcher, .cockpit-vision-controls, .cockpit-context-actions)
  :is(button, [role='button']) {
  color: #dff7ff;
  border-color: rgba(78, 183, 221, 0.55);
  background: linear-gradient(145deg, rgba(8, 27, 45, 0.96), rgba(6, 17, 32, 0.96));
  transition:
    color 160ms ease,
    border-color 160ms ease,
    background-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

:is(#view-switcher, .cockpit-vision-controls, .cockpit-context-actions)
  :is(button, [role='button']):is(:hover, :focus-visible, [aria-pressed='true']) {
  color: var(--market-positive);
  border-color: var(--interface-edge-active);
  background-color: rgba(32, 213, 255, 0.16);
  box-shadow: 0 0 15px rgba(32, 213, 255, 0.16);
}

#cockpit-hud :is(
  .cockpit-context-window,
  .cockpit-signal-window,
  .cockpit-route-card,
  .cockpit-briefing-window,
  .cockpit-camera-window
) {
  color: var(--text-primary);
  border-color: rgba(78, 183, 221, 0.48);
  background-color: rgba(5, 16, 30, 0.92);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 18px rgba(32, 213, 255, 0.1);
  backdrop-filter: blur(16px);
}

:is(#cesiumContainer, .cesium-viewer) :is(.cesium-button, .cesium-toolbar-button, .cesium-navigation-button) {
  color: #def6ff;
  border-color: rgba(78, 183, 221, 0.42);
  background-color: rgba(6, 19, 34, 0.9);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.36);
}

:is(#cesiumContainer, .cesium-viewer) :is(.cesium-button, .cesium-toolbar-button, .cesium-navigation-button):is(:hover, :focus-visible) {
  color: var(--market-positive);
  border-color: rgba(32, 213, 255, 0.72);
  background-color: rgba(13, 46, 66, 0.96);
}

:is(#left-panel-stack, #right-context-rail) > [data-panel-id] {
  color: var(--text-primary);
}

:is(#left-panel-stack, #right-context-rail) > [data-panel-id].collapsed
  :is(.panel-header, .param-panel-header, .pp-header-row) {
  border-color: rgba(72, 177, 210, 0.4);
  background: linear-gradient(145deg, rgba(10, 29, 48, 0.96), rgba(6, 17, 31, 0.96));
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.38), inset 0 1px rgba(213, 245, 255, 0.05);
}

:is(#left-panel-stack, #right-context-rail) > [data-panel-id]
  :is(.panel-collapse-btn, .pp-collapse-btn) {
  color: #dff7ff;
  border-color: rgba(78, 183, 221, 0.5);
  background: rgba(8, 27, 45, 0.94);
  transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

:is(#left-panel-stack, #right-context-rail) > [data-panel-id]
  :is(.panel-collapse-btn, .pp-collapse-btn):is(:hover, :focus-visible, [aria-expanded='true']) {
  color: var(--market-positive);
  border-color: var(--interface-edge-active);
  background: rgba(32, 213, 255, 0.14);
  box-shadow: 0 0 14px rgba(32, 213, 255, 0.14);
}

:is(#pp-toggles, #param-slider-panel) {
  --interface-edge: rgba(72, 177, 210, 0.42);
}

#param-slider-panel :is(.param-panel-header, .param-panel-divider) {
  border-color: rgba(91, 190, 220, 0.28);
}

#param-slider-panel :is(.param-panel-title, .param-slider-label, .param-value) {
  color: var(--text-secondary);
}

#param-slider-panel :is(input[type='range'], .param-slider) {
  accent-color: var(--accent);
}

:is(#left-panel-stack, #right-context-rail) .rail-card,
:is(#left-panel-stack, #right-context-rail) .rail-timeline {
  color: var(--text-primary);
  border-color: rgba(72, 177, 210, 0.32);
  background-color: rgba(8, 22, 39, 0.86);
}

:is(#left-panel-stack, #right-context-rail) :is(.rail-card-header, .rail-card-setting) {
  color: var(--text-secondary);
  border-color: rgba(72, 177, 210, 0.24);
}

:is(#left-panel-stack, #right-context-rail) .rail-card-header:is(:hover, :focus-visible),
:is(#left-panel-stack, #right-context-rail) .rail-card[data-open='true'] > .rail-card-header {
  color: #f4fbff;
  border-color: rgba(32, 213, 255, 0.58);
  background-color: rgba(32, 213, 255, 0.1);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }
}