/* ═══════════════════════════════════════════════════════════════
   FPV Calculator — Design tokens & theme system
   Єдине джерело кольорів для темної / світлої теми
   ═══════════════════════════════════════════════════════════════ */

:root {
    color-scheme: dark;

    --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
    --theme-duration: 0.32s;

    /* Solid surfaces (плавно анімуються) */
    --color-bg-base: #121826;
    --color-bg-muted: #1a2236;
    --color-bg-elevated: #1e2538;
    --color-bg-overlay: rgba(0, 0, 0, 0.72);

    --bg-primary: linear-gradient(145deg, #121826 0%, #1a2236 45%, #1e3a5f 100%);
    --bg-secondary: rgba(30, 37, 56, 0.88);
    --bg-tertiary: rgba(255, 255, 255, 0.08);
    --bg-card: rgba(26, 34, 54, 0.94);
    --bg-input: rgba(255, 255, 255, 0.07);
    --bg-button: linear-gradient(145deg, #0891b2, #4f46e5);
    --bg-button-hover: linear-gradient(145deg, #06b6d4, #6366f1);
    --bg-modal: rgba(22, 28, 42, 0.97);
    --bg-overlay: rgba(0, 0, 0, 0.7);
    --bg-splash: linear-gradient(145deg, #121826 0%, #1a2236 50%, #1e3a5f 100%);

    --text-primary: #e8eaed;
    --text-secondary: #a8b0bd;
    --text-accent: #22d3ee;
    --text-gradient: linear-gradient(45deg, #22d3ee, #818cf8, #c084fc);
    --text-muted: #64748b;
    --text-inverse: #0f172a;
    --text-on-accent: #ffffff;

    --border-primary: rgba(255, 255, 255, 0.14);
    --border-accent: rgba(34, 211, 238, 0.35);
    --border-input: rgba(255, 255, 255, 0.18);
    --border-card: rgba(255, 255, 255, 0.1);
    --border-subtle: rgba(255, 255, 255, 0.06);

    --shadow-primary: 0 4px 18px rgba(0, 0, 0, 0.35);
    --shadow-accent: 0 0 22px rgba(34, 211, 238, 0.22);
    --shadow-card: 0 12px 40px rgba(0, 0, 0, 0.32);
    --shadow-button: 0 4px 14px rgba(0, 0, 0, 0.25);

    --accent-primary: #22d3ee;
    --accent-secondary: #6366f1;
    --accent-tertiary: #a78bfa;

    --success: #22c55e;
    --warning: #f59e0b;
    --error: #ef4444;
    --info: #3b82f6;

    --freq-1g3: #ff6b6b;
    --freq-3g3: #4ecdc4;
    --freq-5g8: #45b7d1;
    --harmonic-1: rgba(239, 68, 68, 0.28);
    --harmonic-2: rgba(34, 197, 94, 0.28);
    --imd-color: rgba(245, 158, 11, 0.35);

    /* Панелі / dashboard */
    --panel-bg: rgba(0, 0, 0, 0.22);
    --panel-bg-soft: rgba(255, 255, 255, 0.04);
    --chip-bg: rgba(0, 0, 0, 0.28);
    --chip-border: rgba(255, 255, 255, 0.14);
    --chip-text: rgba(255, 255, 255, 0.78);

    --dash-danger-border: rgba(239, 68, 68, 0.28);
    --dash-danger-bg: linear-gradient(180deg, rgba(239, 68, 68, 0.07) 0%, rgba(0, 0, 0, 0.18) 100%);
    --dash-danger-title: #fca5a5;
    --dash-info-border: rgba(34, 211, 238, 0.28);
    --dash-info-bg: linear-gradient(180deg, rgba(34, 211, 238, 0.06) 0%, rgba(0, 0, 0, 0.16) 100%);
    --dash-info-title: #67e8f9;

    --status-bad-bg: rgba(239, 68, 68, 0.18);
    --status-bad-border: rgba(239, 68, 68, 0.45);
    --status-bad-text: #fecaca;
    --status-warn-bg: rgba(245, 158, 11, 0.14);
    --status-warn-border: rgba(245, 158, 11, 0.42);
    --status-warn-text: #fde68a;
    --status-ok-bg: rgba(34, 197, 94, 0.12);
    --status-ok-border: rgba(34, 197, 94, 0.38);
    --status-ok-text: #bbf7d0;

    --focus-ring: 0 0 0 2px rgba(34, 211, 238, 0.55);
    --scrollbar-thumb: rgba(255, 255, 255, 0.18);
    --scrollbar-track: rgba(0, 0, 0, 0.2);

    /* Секції / панелі (legacy CSS → vars) */
    --section-bg: rgba(26, 34, 54, 0.88);
    --section-border: rgba(255, 255, 255, 0.1);
    --canvas-bg: radial-gradient(circle at center, rgba(34, 211, 238, 0.06) 0%, rgba(26, 34, 54, 0.85) 70%);
    --heading-accent: #22d3ee;
    --nav-dropdown-bg: rgba(26, 34, 54, 0.98);
    --nav-link-hover: rgba(34, 211, 238, 0.1);

    /* Radio-map aliases */
    --dark-bg: #121826;
    --dark-surface: #1e2538;
    --primary-color: #818cf8;
    --secondary-color: #22d3ee;
    --text-color: #e8eaed;

    /* Radio-map semantic tokens */
    --rm-accent-soft: rgba(129, 140, 248, 0.08);
    --rm-accent-border: rgba(129, 140, 248, 0.15);
    --rm-accent-border-strong: rgba(129, 140, 248, 0.35);
    --rm-surface-inset: rgba(255, 255, 255, 0.04);
    --rm-border-subtle: rgba(255, 255, 255, 0.08);
    --rm-text-muted: rgba(255, 255, 255, 0.5);
    --rm-text-dim: rgba(255, 255, 255, 0.65);
    --rm-input-bg: rgba(0, 0, 0, 0.25);
    --rm-input-bg-focus: rgba(0, 0, 0, 0.35);
    --rm-panel-bar-bg: rgba(129, 140, 248, 0.05);
    --rm-panel-bar-border: rgba(129, 140, 248, 0.15);
    --rm-legend-bg: rgba(18, 18, 30, 0.93);
    --rm-marker-bg: rgba(18, 18, 30, 0.9);
    --rm-card-gradient: linear-gradient(145deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
    --rm-footer-shadow: 0 -6px 24px rgba(0, 0, 0, 0.28);
    --rm-badge-tx-bg: rgba(129, 140, 248, 0.25);
    --rm-badge-tx-text: #e9d5ff;
    --rm-badge-rx-bg: rgba(34, 211, 238, 0.2);
    --rm-badge-rx-text: #5eead4;

    /* Control-analysis page tokens */
    --ca-card-bg: rgba(255, 255, 255, 0.05);
    --ca-card-border: rgba(255, 255, 255, 0.1);
    --ca-card-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    --ca-surface-inset: rgba(255, 255, 255, 0.03);
    --ca-surface-soft: rgba(255, 255, 255, 0.05);
    --ca-input-bg: rgba(255, 255, 255, 0.1);
    --ca-input-border: rgba(255, 255, 255, 0.2);
    --ca-text-muted: rgba(255, 255, 255, 0.5);
    --ca-text-dim: rgba(255, 255, 255, 0.7);
    --ca-text-body: rgba(255, 255, 255, 0.8);
    --ca-text-strong: rgba(255, 255, 255, 0.9);
    --ca-page-header-bg: rgba(30, 30, 46, 0.95);
    --ca-tab-bar-bg: rgba(0, 0, 0, 0.2);
    --ca-panel-bg: rgba(255, 255, 255, 0.02);
    --ca-help-bg: rgba(30, 30, 46, 0.95);
    --ca-spectrum-bg: rgba(0, 0, 0, 0.3);
    --ca-list-bg: rgba(0, 0, 0, 0.2);
    --ca-table-bg: rgba(255, 255, 255, 0.02);
    --ca-table-head-bg: rgba(255, 255, 255, 0.05);

    /* Video analysis (analysis.html) */
    --va-drawer-bg: linear-gradient(160deg, rgba(20, 24, 40, 0.97), rgba(30, 30, 50, 0.95));
    --va-drawer-border: rgba(34, 211, 238, 0.35);
    --va-drawer-shadow: 0 12px 48px rgba(0, 0, 0, 0.45), 0 0 32px rgba(34, 211, 238, 0.08);
    --va-drawer-header-bg: linear-gradient(135deg, rgba(34, 211, 238, 0.12), rgba(129, 140, 248, 0.1));
    --va-freq-section-bg: rgba(0, 0, 0, 0.15);
    --va-option-bg: radial-gradient(circle at top left, rgba(34, 211, 238, 0.12), rgba(255, 255, 255, 0.02));
    --va-option-border: rgba(255, 255, 255, 0.15);
    --va-footer-bg: rgba(30, 30, 46, 0.95);
    --va-panel-dark: rgba(30, 30, 46, 0.95);

    /* Index spectrum map */
    --spectrum-track-bg: rgba(0, 0, 0, 0.38);
    --spectrum-track-border: rgba(255, 255, 255, 0.14);
    --spectrum-track-inset: inset 0 1px 4px rgba(0, 0, 0, 0.35);
    --spectrum-dot-bg: rgba(22, 28, 42, 0.96);
    --spectrum-dot-border: rgba(255, 255, 255, 0.32);
    --spectrum-dot-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    --spectrum-zone-opacity: 0.4;
    --spectrum-scale-color: rgba(255, 255, 255, 0.72);
    --spectrum-scale-bg: rgba(0, 0, 0, 0.35);

    /* Education page */
    --edu-hero-bg: linear-gradient(135deg, rgba(26, 34, 54, 0.98) 0%, rgba(30, 58, 95, 0.92) 55%, rgba(79, 70, 229, 0.18) 100%);
    --edu-hero-pattern: rgba(34, 211, 238, 0.07);
    --edu-card-bg: rgba(26, 34, 54, 0.94);
    --edu-card-hover: rgba(34, 211, 238, 0.08);
    --edu-nav-active: linear-gradient(135deg, rgba(34, 211, 238, 0.14), rgba(129, 140, 248, 0.12));
    --edu-inset: rgba(255, 255, 255, 0.04);
}

[data-theme="light"] {
    color-scheme: light;

    --color-bg-base: #ffffff;
    --color-bg-muted: #f1f5f9;
    --color-bg-elevated: #ffffff;
    --color-bg-overlay: rgba(15, 23, 42, 0.45);

    --bg-primary: linear-gradient(180deg, #ffffff 0%, #f1f5f9 55%, #e2e8f0 100%);
    --bg-secondary: #ffffff;
    --bg-tertiary: rgba(15, 23, 42, 0.06);
    --bg-card: #ffffff;
    --bg-input: #ffffff;
    --bg-button: linear-gradient(145deg, #0891b2, #4f46e5);
    --bg-button-hover: linear-gradient(145deg, #0e7490, #4338ca);
    --bg-modal: rgba(255, 255, 255, 0.98);
    --bg-overlay: rgba(15, 23, 42, 0.4);
    --bg-splash: linear-gradient(145deg, #f8fafc 0%, #eef2f7 50%, #dbeafe 100%);

    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-accent: #0369a1;
    --text-gradient: linear-gradient(45deg, #0369a1, #4338ca, #7c3aed);
    --text-muted: #94a3b8;
    --text-inverse: #f8fafc;
    --text-on-accent: #ffffff;

    --border-primary: rgba(15, 23, 42, 0.14);
    --border-accent: rgba(8, 145, 178, 0.45);
    --border-input: rgba(15, 23, 42, 0.18);
    --border-card: rgba(15, 23, 42, 0.12);
    --border-subtle: rgba(15, 23, 42, 0.08);

    --shadow-primary: 0 2px 12px rgba(15, 23, 42, 0.1);
    --shadow-accent: 0 0 18px rgba(8, 145, 178, 0.18);
    --shadow-card: 0 4px 20px rgba(15, 23, 42, 0.12);
    --shadow-button: 0 4px 12px rgba(15, 23, 42, 0.12);

    --accent-primary: #0891b2;
    --accent-secondary: #4f46e5;
    --accent-tertiary: #7c3aed;

    --success: #16a34a;
    --warning: #d97706;
    --error: #dc2626;
    --info: #2563eb;

    --freq-1g3: #dc2626;
    --freq-3g3: #059669;
    --freq-5g8: #2563eb;
    --harmonic-1: rgba(220, 38, 38, 0.15);
    --harmonic-2: rgba(5, 150, 105, 0.15);
    --imd-color: rgba(217, 119, 6, 0.2);

    --panel-bg: rgba(255, 255, 255, 0.75);
    --panel-bg-soft: rgba(15, 23, 42, 0.03);
    --chip-bg: rgba(255, 255, 255, 0.9);
    --chip-border: rgba(15, 23, 42, 0.12);
    --chip-text: #334155;

    --dash-danger-border: rgba(220, 38, 38, 0.25);
    --dash-danger-bg: linear-gradient(180deg, rgba(254, 226, 226, 0.65) 0%, rgba(255, 255, 255, 0.9) 100%);
    --dash-danger-title: #b91c1c;
    --dash-info-border: rgba(8, 145, 178, 0.25);
    --dash-info-bg: linear-gradient(180deg, rgba(224, 242, 254, 0.7) 0%, rgba(255, 255, 255, 0.92) 100%);
    --dash-info-title: #0369a1;

    --status-bad-bg: rgba(254, 226, 226, 0.85);
    --status-bad-border: rgba(220, 38, 38, 0.35);
    --status-bad-text: #991b1b;
    --status-warn-bg: rgba(254, 243, 199, 0.9);
    --status-warn-border: rgba(217, 119, 6, 0.35);
    --status-warn-text: #92400e;
    --status-ok-bg: rgba(220, 252, 231, 0.9);
    --status-ok-border: rgba(22, 163, 74, 0.35);
    --status-ok-text: #166534;

    --focus-ring: 0 0 0 2px rgba(8, 145, 178, 0.45);
    --scrollbar-thumb: rgba(15, 23, 42, 0.18);
    --scrollbar-track: rgba(15, 23, 42, 0.05);

    --section-bg: #ffffff;
    --section-border: rgba(15, 23, 42, 0.12);
    --canvas-bg: radial-gradient(circle at center, rgba(8, 145, 178, 0.06) 0%, rgba(255, 255, 255, 0.95) 72%);
    --heading-accent: #0369a1;
    --nav-dropdown-bg: rgba(255, 255, 255, 0.98);
    --nav-link-hover: rgba(8, 145, 178, 0.08);

    --dark-bg: #f8fafc;
    --dark-surface: #ffffff;
    --primary-color: #4f46e5;
    --secondary-color: #0891b2;
    --text-color: #0f172a;

    --rm-accent-soft: rgba(79, 70, 229, 0.08);
    --rm-accent-border: rgba(79, 70, 229, 0.18);
    --rm-accent-border-strong: rgba(79, 70, 229, 0.35);
    --rm-surface-inset: rgba(15, 23, 42, 0.03);
    --rm-border-subtle: rgba(15, 23, 42, 0.1);
    --rm-text-muted: #64748b;
    --rm-text-dim: #475569;
    --rm-input-bg: #ffffff;
    --rm-input-bg-focus: #f8fafc;
    --rm-panel-bar-bg: rgba(79, 70, 229, 0.06);
    --rm-panel-bar-border: rgba(79, 70, 229, 0.14);
    --rm-legend-bg: rgba(255, 255, 255, 0.97);
    --rm-marker-bg: rgba(255, 255, 255, 0.96);
    --rm-card-gradient: linear-gradient(145deg, #ffffff, #f8fafc);
    --rm-footer-shadow: 0 -4px 16px rgba(15, 23, 42, 0.08);
    --rm-badge-tx-bg: rgba(79, 70, 229, 0.12);
    --rm-badge-tx-text: #4338ca;
    --rm-badge-rx-bg: rgba(8, 145, 178, 0.12);
    --rm-badge-rx-text: #0e7490;

    --ca-card-bg: #ffffff;
    --ca-card-border: rgba(15, 23, 42, 0.12);
    --ca-card-shadow: 0 4px 20px rgba(15, 23, 42, 0.1);
    --ca-surface-inset: rgba(15, 23, 42, 0.03);
    --ca-surface-soft: rgba(15, 23, 42, 0.04);
    --ca-input-bg: #ffffff;
    --ca-input-border: rgba(15, 23, 42, 0.18);
    --ca-text-muted: #64748b;
    --ca-text-dim: #475569;
    --ca-text-body: #334155;
    --ca-text-strong: #0f172a;
    --ca-page-header-bg: #ffffff;
    --ca-tab-bar-bg: #f1f5f9;
    --ca-panel-bg: #f8fafc;
    --ca-help-bg: #ffffff;
    --ca-spectrum-bg: #f8fafc;
    --ca-list-bg: #f1f5f9;
    --ca-table-bg: #ffffff;
    --ca-table-head-bg: #f1f5f9;

    --va-drawer-bg: #ffffff;
    --va-drawer-border: rgba(8, 145, 178, 0.35);
    --va-drawer-shadow: 0 8px 32px rgba(15, 23, 42, 0.12);
    --va-drawer-header-bg: linear-gradient(135deg, rgba(8, 145, 178, 0.08), rgba(79, 70, 229, 0.06));
    --va-freq-section-bg: #f8fafc;
    --va-option-bg: linear-gradient(145deg, #ffffff, #f8fafc);
    --va-option-border: rgba(15, 23, 42, 0.12);
    --va-footer-bg: #ffffff;
    --va-panel-dark: #ffffff;

    --spectrum-track-bg: #dbeafe;
    --spectrum-track-border: rgba(15, 23, 42, 0.16);
    --spectrum-track-inset: inset 0 1px 2px rgba(15, 23, 42, 0.06);
    --spectrum-dot-bg: #ffffff;
    --spectrum-dot-border: rgba(15, 23, 42, 0.28);
    --spectrum-dot-shadow: 0 1px 4px rgba(15, 23, 42, 0.14);
    --spectrum-zone-opacity: 0.48;
    --spectrum-scale-color: #475569;
    --spectrum-scale-bg: rgba(255, 255, 255, 0.88);

    --edu-hero-bg: linear-gradient(135deg, #ffffff 0%, #f0f9ff 52%, #eef2ff 100%);
    --edu-hero-pattern: rgba(8, 145, 178, 0.08);
    --edu-card-bg: #ffffff;
    --edu-card-hover: rgba(8, 145, 178, 0.06);
    --edu-nav-active: linear-gradient(135deg, rgba(8, 145, 178, 0.1), rgba(79, 70, 229, 0.08));
    --edu-inset: rgba(15, 23, 42, 0.04);
}

/* ── Base ── */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    background-color: var(--color-bg-base);
}

body {
    margin: 0;
    background-color: var(--color-bg-base);
    background-image: var(--bg-primary);
    background-attachment: fixed;
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
}

/* Плавна зміна теми — тільки потрібні властивості, без animation/transform */
html.theme-transitioning :where(
    body,
    .main-header,
    .nav-links,
    .card,
    .panel,
    .modal-content,
    .conflict-dashboard,
    .conflict-audit,
    .frequency-cell,
    .cdash-filter,
    .cdash-stat,
    .theme-toggle-btn,
    .side-panel,
    .left-panel,
    .right-panel,
    .control-section,
    .elevation-profile-section,
    .map-terrain-legend,
    .input-card,
    .link-stat,
    .custom-frequency-card,
    .standard-bands-card,
    .selected-frequencies-card,
    .spectrum-section,
    .analysis-results-section,
    .radio-calculations-section,
    .tab-panel,
    .stat-card,
    .group-selector,
    .visualization-section,
    .detailed-analysis,
    .channel-detail-drawer,
    .analysis-option,
    .spectrum-map,
    .spectrum-track,
    input,
    textarea,
    select,
    button:not(.no-theme-transition)
) {
    transition:
        background-color var(--theme-duration) var(--ease-out),
        color var(--theme-duration) var(--ease-out),
        border-color var(--theme-duration) var(--ease-out),
        box-shadow var(--theme-duration) var(--ease-out),
        fill var(--theme-duration) var(--ease-out),
        stroke var(--theme-duration) var(--ease-out) !important;
}

/* Анімації не чіпаємо під час перемикання теми */
html.theme-transitioning :where(
    svg,
    svg *,
    canvas,
    .splash-screen,
    .splash-screen *,
    .pulse-ring,
    .loading-dots,
    .loading-dots *,
    .logo-animation,
    .channel-circle,
    .wave-animation,
    #wave-canvas,
    #wave-canvas *,
    [class*="animate"],
    .menu-btn .line
) {
    transition: none !important;
}

/* Cross-document view transitions — увімкнено через theme-init.js лише для http(s) */

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.35s;
    animation-timing-function: var(--ease-out);
}

/* ── Theme toggle ── */
.theme-switcher {
    display: flex;
    align-items: center;
    margin: 0 16px;
}

.theme-toggle-btn {
    background: var(--chip-bg);
    border: 1.5px solid var(--chip-border);
    border-radius: 999px;
    padding: 0;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 52px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    box-shadow: var(--shadow-button);
}

.theme-toggle-btn:hover {
    border-color: var(--border-accent);
    box-shadow: var(--shadow-accent);
    transform: scale(1.04);
}

.theme-toggle-btn:active {
    transform: scale(0.96);
}

.theme-toggle-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.theme-icon {
    font-size: 1.05rem;
    line-height: 1;
    transition: opacity 0.28s var(--ease-out), transform 0.28s var(--ease-out);
    position: absolute;
}

.theme-icon-dark {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

.theme-icon-light {
    opacity: 0;
    transform: scale(0.6) rotate(-90deg);
}

[data-theme="light"] .theme-icon-dark {
    opacity: 0;
    transform: scale(0.6) rotate(90deg);
}

[data-theme="light"] .theme-icon-light {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

/* ── Shared components ── */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
}

a {
    color: var(--text-accent);
}

a:hover {
    color: var(--accent-primary);
}

button:not(.theme-toggle-btn):not(.cdash-filter):not(.nav-links .link):not(.channel-card):not(.spectrum-dot):not(.action-btn):not(.group-filter-chip):not(.rc-step-btn):not(.dpc-apply):not(.section-toggle):not(.pos-btn):not(.btn-primary):not(.cdash-target-btn):not(.cdash-ch-btn):not(.cdd-close):not(.cdd-alt-btn):not(.analysis-button):not(.comparison-btn):not(.browser-row):not(.nav-section-btn):not(.filter-btn):not(.alphabet-btn):not(.start-tutorial-btn):not(.start-scenario-btn):not(.tutorial-btn):not(.close-modal):not(.generate-btn) {
    background: var(--bg-button);
    color: var(--text-on-accent);
    border: 1px solid transparent;
}

button:not(.theme-toggle-btn):not(.cdash-filter):not(.channel-card):not(.spectrum-dot):not(.action-btn):not(.group-filter-chip):not(.rc-step-btn):not(.dpc-apply):not(.section-toggle):not(.pos-btn):not(.btn-primary):not(.cdash-target-btn):not(.cdash-ch-btn):not(.cdd-close):not(.cdd-alt-btn):not(.analysis-button):not(.comparison-btn):not(.browser-row):not(.nav-section-btn):not(.filter-btn):not(.alphabet-btn):not(.start-tutorial-btn):not(.start-scenario-btn):not(.tutorial-btn):not(.close-modal):not(.generate-btn):hover {
    background: var(--bg-button-hover);
}

input,
textarea,
select {
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1.5px solid var(--border-input);
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--border-accent);
    box-shadow: var(--shadow-accent);
}

input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
select:focus:not(:focus-visible) {
    outline: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.menu-btn:focus-visible,
.nav-links .link:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.nav-links .link:focus-visible {
    border-left-color: var(--accent-primary);
}

.card,
.panel,
.modal-content {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    box-shadow: var(--shadow-card);
    color: var(--text-primary);
}

.main-header {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-accent);
    box-shadow: var(--shadow-primary);
}

.nav-links {
    background: var(--bg-card);
    border: 1px solid var(--border-accent);
    box-shadow: var(--shadow-card);
}

.nav-links .link {
    color: var(--text-primary);
}

.nav-links .link:hover {
    background: var(--bg-tertiary);
    color: var(--text-accent);
}

.nav-links .link.active {
    background: var(--bg-button);
    color: var(--text-on-accent);
}

/* Scrollbar */
* {
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* Frequency groups */
.freq-group-1g3 { border-color: var(--freq-1g3) !important; color: var(--freq-1g3) !important; }
.freq-group-3g3 { border-color: var(--freq-3g3) !important; color: var(--freq-3g3) !important; }
.freq-group-5g8 { border-color: var(--freq-5g8) !important; color: var(--freq-5g8) !important; }

.harmonic-freq-1 { background: var(--harmonic-1) !important; }
.harmonic-freq-2 { background: var(--harmonic-2) !important; }
.imd { background: var(--imd-color) !important; }

.status-success { color: var(--success); border-color: var(--success); }
.status-warning { color: var(--warning); border-color: var(--warning); }
.status-error { color: var(--error); border-color: var(--error); }
.status-info { color: var(--info); border-color: var(--info); }

@media (max-width: 768px) {
    .theme-switcher { margin: 0 8px; }
    .theme-toggle-btn { width: 46px; height: 30px; }
}

@media (prefers-contrast: more) {
    :root {
        --border-primary: rgba(255, 255, 255, 0.35);
        --text-secondary: #cbd5e1;
    }
    [data-theme="light"] {
        --border-primary: rgba(15, 23, 42, 0.22);
        --text-secondary: #334155;
    }
}

@media (prefers-reduced-motion: reduce) {
    html.theme-transitioning :where(body, .main-header, .card, .panel) {
        transition: none !important;
    }
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none !important;
    }
    .theme-toggle-btn,
    .theme-icon {
        transition: none !important;
    }
    .splash-logo,
    .pulse-ring,
    .logo-container,
    .loading-dots span {
        animation: none !important;
    }
}