:root {
  color-scheme: dark;

  --wf2-neutral-950: #08111b;
  --wf2-neutral-925: #0b1420;
  --wf2-neutral-900: #0f1724;
  --wf2-neutral-875: #121c2b;
  --wf2-neutral-850: #162132;
  --wf2-neutral-825: #192638;
  --wf2-neutral-800: #1d2b3f;
  --wf2-neutral-775: #223248;
  --wf2-neutral-750: #28384f;
  --wf2-neutral-725: #30425d;
  --wf2-neutral-700: #3a4f6f;
  --wf2-neutral-675: #46607f;

  --wf2-blue-500: #5c97ff;
  --wf2-blue-450: #7cb1ff;
  --wf2-blue-400: #9fc5ff;
  --wf2-blue-350: #c5dcff;
  --wf2-green-500: #32b86b;
  --wf2-green-450: #4fd787;
  --wf2-green-350: #8ae4ad;
  --wf2-red-500: #d75260;
  --wf2-red-450: #f06d7a;
  --wf2-red-350: #ffb0b8;
  --wf2-orange-500: #f2a34f;
  --wf2-orange-450: #ffbf70;
  --wf2-yellow-400: #f4d67a;
  --wf2-yellow-350: #ffe2a3;
  --wf2-teal-500: #15958b;
  --wf2-teal-450: #28b8ad;
  --wf2-pink-450: #f067ac;
  --wf2-purple-350: #b0a8ff;

  --wf2-body-bg: var(--wf2-neutral-950);

  --wf2-surface-card: var(--wf2-neutral-900);
  --wf2-surface-header: var(--wf2-neutral-850);
  --wf2-surface-panel-subtle: var(--wf2-neutral-875);
  --wf2-surface-soft: var(--wf2-neutral-825);
  --wf2-surface-overview: #0b1220;
  --wf2-surface-button: var(--wf2-neutral-825);
  --wf2-surface-button-active: #1d3658;
  --wf2-surface-button-hover: var(--wf2-neutral-775);
  --wf2-surface-button-ghost-hover: var(--wf2-neutral-775);
  --wf2-surface-hover: var(--wf2-neutral-800);
  --wf2-surface-row-hover: var(--wf2-neutral-850);
  --wf2-surface-accent-soft: #162741;
  --wf2-surface-accent-strong: #1d3658;
  --wf2-surface-alert: #78232c;
  --wf2-surface-alert-active: #5f1a22;
  --wf2-surface-bubble: var(--wf2-neutral-900);
  --wf2-surface-bubble-chat: #13233b;
  --wf2-surface-chip: var(--wf2-neutral-825);
  --wf2-chat-overlay-bg: rgba(7, 12, 22, 0.72);
  --wf2-chat-overlay-border: rgba(239, 244, 255, 0.28);
  --wf2-chat-overlay-message-bg: rgba(19, 35, 59, 0.78);
  --wf2-chat-overlay-message-border: rgba(126, 192, 255, 0.22);
  --wf2-chat-overlay-text: #e6edf8;
  --wf2-chat-overlay-user: #8bd3ff;
  --wf2-viewer-line: #38bdf8;
  --wf2-viewer-tooltip-bg: #07111f;
  --wf2-viewer-tooltip-text: #dff5ff;
  --wf2-surface-danger-hover: #44202a;
  --wf2-surface-danger-soft: #371922;
  --wf2-surface-file-controls: linear-gradient(180deg, #0f1724 0%, #162132 100%);
  --wf2-surface-floating: rgba(19, 30, 46, 0.96);
  --wf2-surface-gmap-canvas:
    radial-gradient(circle at top, rgba(92, 151, 255, 0.16), transparent 42%),
    linear-gradient(180deg, #102033 0%, #0d1724 100%);
  --wf2-surface-gmap-frame: linear-gradient(180deg, #121c2b 0%, #162132 100%);
  --wf2-surface-lock-danger: linear-gradient(180deg, #f06d7a 0%, #a33442 100%);
  --wf2-surface-lock-success: linear-gradient(180deg, #3bcf7b 0%, #1b7f4c 100%);
  --wf2-surface-marker-current: #d75260;
  --wf2-surface-marker-pending: #d8952f;
  --wf2-surface-marker-selected: #0f766e;
  --wf2-surface-media-placeholder: #1a2638;
  --wf2-surface-mode-soft: #241f46;
  --wf2-surface-panel-glass: rgba(14, 22, 33, 0.98);
  --wf2-surface-primary: var(--wf2-blue-500);
  --wf2-surface-primary-hover: #467fd8;
  --wf2-surface-rumble-child: #3f2b14;
  --wf2-surface-rumble-child-hover: #573818;
  --wf2-surface-rumble-parent: #402028;
  --wf2-surface-rumble-parent-hover: #552835;
  --wf2-surface-selected: #14314f;
  --wf2-surface-success-action: #20834f;
  --wf2-surface-success-action-hover: #1b6d42;
  --wf2-surface-success-highlight: #1e5f32;
  --wf2-surface-success-soft: #173a27;
  --wf2-surface-tab: var(--wf2-neutral-825);
  --wf2-surface-tag: var(--wf2-neutral-800);
  --wf2-surface-timeline: var(--wf2-neutral-875);
  --wf2-surface-warning-soft: #4a3514;

  --wf2-text-strong: #edf4ff;
  --wf2-text-primary: #dbe5f1;
  --wf2-text-secondary: #a9b5c8;
  --wf2-text-secondary-soft: #8f9db4;
  --wf2-text-muted: #8794a8;
  --wf2-text-dim: #738097;
  --wf2-text-tag: #d0d9e7;
  --wf2-text-button: #e4ebf4;
  --wf2-text-button-active: var(--wf2-blue-400);
  --wf2-text-danger: #ff8f9d;
  --wf2-text-danger-soft: #ffb4be;
  --wf2-text-edit: #ff8f9d;
  --wf2-text-info: #7ec0ff;
  --wf2-text-mode: #c2baff;
  --wf2-text-on-accent: #08111b;
  --wf2-text-rumble-child: #ffd79f;
  --wf2-text-rumble-parent: #ffbcc5;
  --wf2-text-seek: #7be98f;
  --wf2-text-subtitle: #d7deea;
  --wf2-text-subtitle-strong: #eef4ff;
  --wf2-text-success: #9be8b8;
  --wf2-text-success-strong: #b9f3cb;
  --wf2-text-accent: var(--wf2-blue-400);

  --wf2-border-subtle: #2a3447;
  --wf2-border-subtle-soft: #313b4d;
  --wf2-border-default: #334055;
  --wf2-border-overview: #31445f;
  --wf2-border-panel: #314155;
  --wf2-border-soft: #3d516b;
  --wf2-border-soft-dark: rgba(255, 255, 255, 0.12);
  --wf2-border-strong: #587191;
  --wf2-border-tag: #42556f;
  --wf2-border-input: #405169;
  --wf2-border-button: #465a76;
  --wf2-border-button-active: var(--wf2-blue-450);
  --wf2-border-row-divider: #2f3d52;
  --wf2-border-accent: var(--wf2-blue-500);
  --wf2-border-accent-strong: var(--wf2-blue-400);
  --wf2-border-success: var(--wf2-green-450);
  --wf2-border-success-strong: #2f8d57;
  --wf2-border-success-deep: #266844;
  --wf2-border-danger: #d36b77;
  --wf2-border-danger-strong: #ba4b58;
  --wf2-border-alert: #9b3f4b;
  --wf2-border-alert-active: #7d303c;
  --wf2-border-warning: var(--wf2-yellow-400);
  --wf2-border-mode: #7067d8;
  --wf2-border-canvas: #31445f;
  --wf2-border-contrast: rgba(239, 244, 255, 0.86);
  --wf2-border-bubble: #2d394d;
  --wf2-border-bubble-chat: #33527d;
  --wf2-border-bubble-hover: #4a5d79;
  --wf2-border-timeline: #2f394a;
  --wf2-border-timeline-rail: #334052;
  --wf2-border-panel-glass: rgba(255, 255, 255, 0.08);

  --wf2-focus-accent: var(--wf2-blue-450);
  --wf2-focus-contrast: #d6e4ff;
  --wf2-focus-danger: #ffb0b8;
  --wf2-focus-success: #95e9b3;
  --wf2-selected-ring: #73d592;

  --wf2-path-accent-rumble: #d2574a;
  --wf2-path-accent-youtube: #5c97ff;
  --wf2-path-accent-kick: #2fc1b5;
  --wf2-path-accent-la: #f2a34f;
  --wf2-path-accent-roce: #f067ac;
  --wf2-path-accent-default: #7d8fa9;

  --wf2-shadow-popup: 0 16px 30px rgba(0, 0, 0, 0.42);
  --wf2-shadow-dialog: 0 26px 64px rgba(0, 0, 0, 0.56);
  --wf2-shadow-floating: 0 8px 18px rgba(0, 0, 0, 0.38);
  --wf2-shadow-control: 0 10px 20px rgba(0, 0, 0, 0.34);
  --wf2-shadow-control-hover: 0 14px 28px rgba(0, 0, 0, 0.42);
  --wf2-shadow-control-strong: 0 14px 30px rgba(0, 0, 0, 0.46);
  --wf2-shadow-control-strong-hover: 0 18px 36px rgba(0, 0, 0, 0.52);
  --wf2-shadow-marker-blue: rgba(92, 151, 255, 0.38);
  --wf2-shadow-marker-red: rgba(215, 82, 96, 0.4);
  --wf2-shadow-marker-teal: rgba(21, 149, 139, 0.35);
  --wf2-shadow-panel: 0 14px 28px rgba(0, 0, 0, 0.32), 0 4px 10px rgba(0, 0, 0, 0.24);
  --wf2-shadow-timeline-block: 0 2px 8px rgba(0, 0, 0, 0.22);
  --wf2-shadow-warning: 0 4px 16px rgba(244, 214, 122, 0.2);
  --wf2-shadow-inset-soft: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --wf2-shadow-inset-strong: inset 0 1px 0 rgba(255, 255, 255, 0.08);

  --wf2-backdrop-modal: rgba(4, 9, 16, 0.72);
}

.leaflet-control-zoom a,
.leaflet-bar a {
  background: var(--wf2-surface-card);
  color: var(--wf2-text-strong);
  border-color: var(--wf2-border-soft);
}

.leaflet-control-zoom a:hover,
.leaflet-bar a:hover {
  background: var(--wf2-surface-hover);
  color: var(--wf2-text-strong);
}

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  background: var(--wf2-surface-card);
  color: var(--wf2-text-primary);
}

.leaflet-control-attribution {
  background: rgba(8, 17, 27, 0.82);
  color: var(--wf2-text-secondary);
}

.leaflet-control-attribution a {
  color: var(--wf2-text-accent);
}

#confirmDialog {
  background: var(--wf2-surface-card);
  color: var(--wf2-text-primary);
  border: 1px solid var(--wf2-border-panel);
  box-shadow: var(--wf2-shadow-dialog);
}

#confirmDialog::backdrop {
  background: var(--wf2-backdrop-modal);
}

#confirmDialog button {
  background: var(--wf2-surface-button);
  color: var(--wf2-text-primary);
  border: 1px solid var(--wf2-border-button);
}

#confirmDialog button[value=\"confirm\"] {
  background: var(--wf2-surface-alert);
  color: var(--wf2-text-on-accent);
  border-color: var(--wf2-border-alert);
}