/* Токени теми — css/themes.css (--dark-bg, --primary-color тощо) */

        body {
            font-family: 'Roboto', sans-serif;
        }

        /* Главная навигация */
        .main-header {
            background: var(--bg-card);
            backdrop-filter: blur(15px);
            box-shadow: var(--shadow-primary);
            position: sticky;
            top: 0;
            z-index: 2000;
            border-bottom: 2px solid var(--primary-color);
        }

        .header-container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 15px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 20px;
        }

        .main-header h1 {
            margin: 0;
            font-size: 1.8rem;
            background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: 700;
        }

        .main-navigation {
            position: relative;
            display: flex;
            align-items: center;
        }

        /* Burger Menu Button */
        .menu-btn {
            width: 35px;
            height: 35px;
            position: relative;
            cursor: pointer;
            transition: all 0.5s ease-in-out;
            z-index: 2003;
        }

        .line {
            width: 25px;
            height: 3px;
            background: var(--primary-color);
            display: block;
            margin: 5px auto;
            transition: all 0.3s ease-in-out;
            border-radius: 2px;
            box-shadow: 0 2px 5px rgba(187, 134, 252, 0.3);
        }

        .menu-btn.active .line--1 {
            transform: rotate(45deg) translate(5px, 5px);
        }

        .menu-btn.active .line--2 {
            opacity: 0;
        }

        .menu-btn.active .line--3 {
            transform: rotate(-45deg) translate(7px, -6px);
        }

        /* Navigation Links */
        .nav-links {
            position: absolute;
            top: 100%;
            right: 0;
            z-index: 2002;
            background: var(--nav-dropdown-bg);
            backdrop-filter: blur(20px);
            min-width: 250px;
            border-radius: 15px;
            box-shadow: var(--shadow-card);
            border: 2px solid var(--primary-color);
            opacity: 0;
            visibility: hidden;
            transform: translateY(-20px);
            transition: all 0.3s ease;
            padding: 15px 0;
            margin-top: 10px;
        }

        .nav-links.active {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .nav-links .link {
            display: block;
            padding: 12px 25px;
            color: var(--text-color);
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s ease;
            border-left: 3px solid transparent;
            font-size: 0.95rem;
        }

        .nav-links .link:hover {
            background: rgba(187, 134, 252, 0.1);
            border-left-color: var(--primary-color);
            color: var(--primary-color);
            transform: translateX(5px);
        }

        .nav-links .link.active {
            background: linear-gradient(45deg, rgba(187, 134, 252, 0.2), rgba(3, 218, 198, 0.2));
            border-left-color: var(--primary-color);
            color: var(--primary-color);
        }

        .nav-links .link.active:hover {
            background: linear-gradient(45deg, rgba(187, 134, 252, 0.3), rgba(3, 218, 198, 0.3));
            transform: translateX(8px);
        }

        @media (max-width: 768px) {
            .header-container {
                justify-content: space-between;
                gap: 15px;
                padding: 15px;
            }

            .main-header h1 {
                font-size: 1.5rem;
            }

            .nav-links {
                min-width: 220px;
                right: -10px;
            }

            .nav-links .link {
                padding: 10px 20px;
                font-size: 0.9rem;
            }
        }

        @media (max-width: 480px) {
            .header-container {
                flex-direction: column;
                text-align: center;
                align-items: center;
            }

            .logo-container {
                width: 100%;
                justify-content: center;
            }

            .main-navigation {
                position: absolute;
                right: 20px;
                top: 50%;
                transform: translateY(-50%);
            }

            .nav-links {
                right: 0;
                left: 0;
                margin: 10px 20px 0;
                min-width: auto;
            }
        }
        .logo-container {
    display: flex;
    align-items: center;
    gap: 15px;
}

.main-logo {
    filter: drop-shadow(0 0 10px rgba(0, 212, 255, 0.3));
    transition: all 0.3s ease;
}

.main-logo:hover {
    filter: drop-shadow(0 0 20px rgba(0, 212, 255, 0.6));
    transform: scale(1.05);
}
        .radio-map-container {
            display: flex;
            height: calc(100vh - 80px);
            min-height: 0;
            overflow: hidden;
        }

        /* Триколоночне розміщення: ліва панель (дані) — карта — права панель (комплектуючі) */
        .side-panel {
            width: 340px;
            min-width: 280px;
            flex-shrink: 0;
            background-color: var(--dark-surface);
            display: flex;
            flex-direction: column;
            min-height: 0;
            overflow: hidden;
        }

        .left-panel {
            border-right: 2px solid var(--primary-color);
            padding: 16px;
            overflow-y: auto;
            gap: 12px;
        }

        .right-panel {
            border-left: 2px solid var(--primary-color);
            width: 380px;
            padding: 0;
        }

        .right-panel.map-controls {
            gap: 0;
        }

        .panel-top-bar {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 16px;
            border-bottom: 1px solid var(--rm-panel-bar-border);
            background: var(--rm-panel-bar-bg);
        }

        .panel-top-bar h3 {
            margin: 0;
            font-size: 0.95rem;
        }

        .panel-scroll-hint {
            font-size: 0.65rem;
            color: var(--rm-text-muted);
            letter-spacing: 0.02em;
        }

        .panel-scroll-area {
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            overflow-x: hidden;
            padding: 12px 14px;
            scroll-behavior: smooth;
        }

        .panel-footer-fixed {
            flex-shrink: 0;
            padding: 12px 14px 16px;
            border-top: 1px solid var(--rm-accent-border);
            background: var(--dark-surface);
            box-shadow: var(--rm-footer-shadow);
        }

        .panel-scroll-area::-webkit-scrollbar,
        .left-panel::-webkit-scrollbar { width: 8px; }
        .panel-scroll-area::-webkit-scrollbar-track,
        .left-panel::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); border-radius: 8px; }
        .panel-scroll-area::-webkit-scrollbar-thumb,
        .left-panel::-webkit-scrollbar-thumb { background: rgba(187,134,252,0.35); border-radius: 8px; }

        .left-panel h3, .right-panel h3 {
            margin: 0 0 8px 0;
        }

        /* Оформлення лівого інформаційного блоку */
        #left-info-panel { position: relative; }
        #left-info-panel .section {
            background-color: var(--dark-bg);
            border: 1px solid var(--rm-accent-border);
            border-radius: 10px;
            padding: 12px;
        }
        #left-info-panel .section + .section { margin-top: 12px; }
        #left-info-panel .section h4 {
            margin: 0 0 8px 0;
            color: var(--secondary-color);
            font-size: 14px;
        }
        #left-info-panel .metric-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px 12px;
        }
        #left-info-panel .metric-item {
            background: var(--rm-surface-inset);
            border: 1px solid var(--rm-border-subtle);
            border-radius: 8px;
            padding: 8px;
        }
        #left-info-panel .metric-label {
            font-size: 11px;
            color: var(--text-secondary);
            margin-bottom: 4px;
        }
        #left-info-panel .metric-value {
            font-weight: 700;
            color: var(--secondary-color);
            font-size: 13px;
        }
        #left-info-panel .badge {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 999px;
            background: rgba(187, 134, 252, 0.15);
            border: 1px solid rgba(187, 134, 252, 0.35);
            font-size: 10px;
            color: var(--text-color);
        }
        #left-info-panel .hint { font-size: 11px; color: var(--text-muted); }
        #left-info-panel .control-group {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        #left-info-panel .control-group label { font-size: 12px; font-weight: 600; }
        #left-info-panel select {
            padding: 8px 10px;
            background-color: var(--dark-surface);
            border: 1px solid var(--primary-color);
            border-radius: 6px;
            color: var(--text-color);
            font-size: 12px;
        }
        /* Скролбар для панелей — див. panel-scroll-area вище */

        @media (max-width: 1024px) {
            .radio-map-container {
                flex-direction: column;
                height: auto;
                min-height: calc(100vh - 80px);
                overflow: visible;
            }
            .side-panel {
                width: 100%;
                max-height: none;
            }
            .right-panel.map-controls {
                width: 100%;
                max-height: 55vh;
            }
            .left-panel {
                max-height: 45vh;
            }
            .panel-scroll-area {
                max-height: calc(55vh - 110px);
            }
            .map-column {
                min-height: 45vh;
            }
            .ukraine-map {
                height: 45vh;
                min-height: 300px;
            }
        }

        .ukraine-map {
            flex-grow: 2;
            height: 100%;
        }

        .map-controls { gap: 15px; }

        .tx-settings, .rx-settings {
            background-color: var(--dark-bg);
            padding: 15px;
            border-radius: 8px;
        }

        input {
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
            background-color: var(--dark-surface);
            border: 1px solid var(--primary-color);
            color: var(--text-color);
            border-radius: 4px;
        }

        #calculate-radio {
            width: 100%;
            padding: 12px;
            background-color: var(--primary-color);
            color: var(--dark-bg);
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        #calculate-radio:hover {
            background-color: #9969e0;
        }

        .custom-marker .marker-icon {
            background-color: var(--secondary-color);
            color: var(--dark-bg);
            padding: 5px 10px;
            border-radius: 50%;
            font-weight: bold;
        }

        .tx-marker .marker-icon {
            background-color: #FF6B6B;
        }

        .rx-marker .marker-icon {
            background-color: #4ECDC4;
        }

        .obstacle-marker .obstacle-icon {
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: rgba(255, 0, 0, 0.7);
            color: white;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 10px;
            min-width: 80px;
            text-align: center;
            transform: translate(-50%, -100%);
            box-shadow: 0 2px 5px rgba(0,0,0,0.3);
        }

        .obstacle-marker .obstacle-details {
            margin-top: 4px;
            font-size: 8px;
            opacity: 0.8;
        }

        .terrain-settings {
            background-color: var(--dark-bg);
            padding: 15px;
            border-radius: 8px;
            margin-top: 15px;
        }

        .terrain-settings label {
            display: block;
            margin-bottom: 10px;
        }

        .terrain-settings select,
        .terrain-settings input {
            width: 100%;
            padding: 8px;
            margin-top: 5px;
            background-color: var(--dark-surface);
            border: 1px solid var(--primary-color);
            color: var(--text-color);
            border-radius: 4px;
        }

        .antenna-settings {
            background-color: var(--dark-bg);
            padding: 15px;
            border-radius: 8px;
            margin-top: 15px;
        }

        .antenna-settings label {
            display: block;
            margin-bottom: 10px;
        }

        .antenna-settings select,
        .antenna-settings input {
            width: 100%;
            padding: 8px;
            margin-top: 5px;
            background-color: var(--dark-surface);
            border: 1px solid var(--primary-color);
            color: var(--text-color);
            border-radius: 4px;
        }

        .signal-visualization {
            margin-top: 15px;
            background-color: var(--dark-surface);
            padding: 10px;
            border-radius: 8px;
        }

        .signal-visualization p {
            margin: 5px 0;
            display: flex;
            justify-content: space-between;
        }

        .signal-visualization span {
            font-weight: bold;
            color: var(--secondary-color);
        }

        .frequency-settings {
            background-color: var(--dark-bg);
            padding: 15px;
            border-radius: 8px;
            margin-top: 15px;
        }

        .frequency-settings label {
            display: block;
            margin-bottom: 10px;
        }

        .frequency-settings select,
        .frequency-settings input {
            width: 100%;
            padding: 8px;
            margin-top: 5px;
            background-color: var(--dark-surface);
            border: 1px solid var(--primary-color);
            color: var(--text-color);
            border-radius: 4px;
        }

        .frequency-settings h4 {
            margin: 0 0 10px 0;
            color: var(--secondary-color);
            font-size: 14px;
        }

        .frequency-settings input[type="text"],
        .frequency-settings input[type="number"] {
            margin-bottom: 8px;
        }

        .frequency-settings input:focus {
            border-color: var(--secondary-color);
            outline: none;
            box-shadow: 0 0 5px rgba(3, 218, 198, 0.3);
        }

        #frequency-range-info {
            padding: 8px;
            border-radius: 4px;
            background-color: var(--dark-surface);
            border-left: 3px solid var(--primary-color);
        }

        /* Стилі для швидкого введення частоти */
        .quick-custom-freq {
            background-color: var(--dark-surface);
            border-radius: 4px;
            border: 1px solid var(--primary-color);
        }

        .quick-custom-freq input[type="number"] {
            font-size: 16px;
            font-weight: bold;
            background-color: var(--dark-bg);
            border: 2px solid var(--primary-color);
            color: var(--secondary-color);
            text-align: center;
        }

        .quick-custom-freq input[type="number"]:focus {
            border-color: var(--secondary-color);
            box-shadow: 0 0 10px rgba(187, 134, 252, 0.3);
        }

        .quick-custom-freq p {
            font-size: 11px;
            color: var(--text-secondary);
            margin: 5px 0;
            text-align: center;
        }

        /* Стилі для оверлею параметрів сигналу поверх карти */
        .signal-overlay {
            position: absolute;
            top: 20px;
            left: 20px;
            z-index: 1000;
            background-color: var(--bg-card);
            border: 2px solid var(--primary-color);
            border-radius: 12px;
            padding: 15px;
            min-width: 300px;
            max-width: 400px;
            max-height: calc(100vh - 100px);
            overflow-y: auto;
            backdrop-filter: blur(10px);
            box-shadow: var(--shadow-card);
            font-size: 13px;
            color: var(--text-color);
        }

        .signal-overlay h3 {
            margin: 0 0 15px 0;
            color: var(--secondary-color);
            text-align: center;
            font-size: 16px;
            border-bottom: 1px solid var(--primary-color);
            padding-bottom: 8px;
        }

        .signal-overlay .signal-section {
            margin-bottom: 15px;
            padding: 10px;
            background-color: var(--rm-surface-inset);
            border-radius: 8px;
            border-left: 3px solid;
        }

        .signal-overlay .primary-freq {
            border-left-color: var(--primary-color);
        }

        .signal-overlay .secondary-freq {
            border-left-color: var(--secondary-color);
        }

        .signal-overlay .basic-params {
            border-left-color: #FF9800;
        }

        .signal-overlay .height-params {
            border-left-color: #4CAF50;
        }

        .signal-overlay .details-params {
            border-left-color: #9C27B0;
        }

        .signal-overlay p {
            margin: 4px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .signal-overlay span {
            font-weight: bold;
        }

        /* Покращене відображення параметрів у лівому оверлеї */
        .signal-overlay .signal-section p {
            padding: 6px 10px;
            background: var(--rm-surface-inset);
            border: 1px solid var(--rm-border-subtle);
            border-radius: 8px;
            margin: 6px 0;
            gap: 12px;
        }
        .signal-overlay .signal-section p strong {
            color: #ccd;
            font-weight: 600;
        }
        .signal-overlay .signal-section p span {
            background: rgba(3, 218, 198, 0.12);
            border: 1px solid rgba(3, 218, 198, 0.35);
            color: var(--secondary-color);
            padding: 2px 8px;
            border-radius: 999px;
            font-family: 'Courier New', monospace;
            font-size: 12px;
            min-width: 64px;
            text-align: right;
        }
        /* Не переофарбовуємо спеціальні індикатори якості */
        .signal-overlay .signal-section p span.quality-excellent,
        .signal-overlay .signal-section p span.quality-good,
        .signal-overlay .signal-section p span.quality-fair,
        .signal-overlay .signal-section p span.quality-poor,
        .signal-overlay .signal-section p span.quality-none {
            background: transparent;
            border: none;
            padding: 0;
            border-radius: 0;
            font-family: inherit;
            font-size: 13px;
        }

        .signal-overlay .quality-excellent { color: #4CAF50; }
        .signal-overlay .quality-good { color: #8BC34A; }
        .signal-overlay .quality-fair { color: #FF9800; }
        .signal-overlay .quality-poor { color: #FF5722; }
        .signal-overlay .quality-none { color: #f44336; }

        .signal-overlay .toggle-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            background: var(--primary-color);
            color: var(--dark-bg);
            border: none;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            cursor: pointer;
            font-size: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .signal-overlay.minimized {
            max-height: 60px;
            overflow: hidden;
        }

        .signal-overlay.minimized .signal-content {
            display: none;
        }

        /* Стилі для швидкого вибору систем */
        .quick-systems {
            margin-bottom: 15px;
            padding: 10px;
            background-color: var(--dark-surface);
            border-radius: 6px;
            border-left: 3px solid var(--secondary-color);
        }

        .quick-systems select {
            background-color: var(--dark-bg);
            color: var(--secondary-color);
            font-weight: bold;
        }

        .frequency-mode-selector {
            margin-bottom: 15px;
            padding: 8px;
            background-color: var(--dark-surface);
            border-radius: 6px;
            border-left: 3px solid var(--primary-color);
        }

        .visualization-options {
            margin-top: 15px;
            padding: 10px;
            background-color: var(--dark-surface);
            border-radius: 6px;
        }

        .visualization-options label {
            display: flex;
            align-items: center;
            margin-bottom: 8px;
        }

        .visualization-options input[type="checkbox"] {
            width: auto;
            margin-right: 8px;
        }

        .auto-analysis-info {
            margin-top: 10px;
            padding: 8px;
            background-color: rgba(3, 218, 198, 0.1);
            border-radius: 4px;
            border: 1px solid rgba(3, 218, 198, 0.3);
        }

        .auto-analysis-info p {
            margin: 0;
            font-style: italic;
        }

        /* Стилі для налаштувань частоти керування */
        .control-frequency-settings {
            background-color: var(--dark-bg);
            padding: 15px;
            border-radius: 8px;
            margin-top: 15px;
            border: 1px solid var(--primary-color);
        }

        .control-frequency-settings h3 {
            margin: 0 0 15px 0;
            color: var(--secondary-color);
            font-size: 16px;
        }

        .control-freq-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .control-freq-group label {
            font-size: 12px;
            color: var(--text-color);
            font-weight: 600;
        }

        .control-freq-group select {
            padding: 8px 10px;
            background-color: var(--dark-surface);
            border: 1px solid var(--primary-color);
            border-radius: 4px;
            color: var(--text-color);
            font-size: 12px;
        }

        .control-freq-group select:focus {
            border-color: var(--secondary-color);
            outline: none;
            box-shadow: 0 0 5px rgba(3, 218, 198, 0.3);
        }

        .custom-freq-input {
            margin-top: 10px;
            padding: 10px;
            background-color: var(--dark-surface);
            border-radius: 4px;
            border: 1px solid var(--secondary-color);
        }

        .custom-freq-input label {
            display: block;
            margin: 8px 0 4px 0;
            font-size: 11px;
            color: var(--text-color);
        }

        .custom-freq-input input {
            width: 100%;
            padding: 6px 8px;
            background-color: var(--dark-bg);
            border: 1px solid var(--primary-color);
            border-radius: 3px;
            color: var(--text-color);
            font-size: 11px;
        }

        .custom-freq-input input:focus {
            border-color: var(--secondary-color);
            outline: none;
        }

        .auto-analysis-info {
            margin-top: 10px;
            padding: 8px;
            background-color: rgba(3, 218, 198, 0.1);
            border-radius: 4px;
            border-left: 3px solid var(--secondary-color);
        }

        .auto-analysis-info p {
            margin: 0;
            color: var(--text-secondary);
            font-style: italic;
        }

        .analysis-controls {
            margin-top: 15px;
        }

        .analysis-controls button {
            width: 100%;
            margin-bottom: 8px;
            padding: 10px;
            border: none;
            border-radius: 6px;
            color: white;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 12px;
        }

        .analysis-controls button:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        }

        #calculate-radio {
            background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
        }

        #calculate-range {
            background-color: var(--secondary-color);
        }

        #test-obstacles {
            background-color: #FF9800;
        }

        /* Стилі для кнопок позиціонування */
        .position-controls {
            margin: 10px 0;
        }

        .pos-btn {
            width: 100%;
            background: linear-gradient(45deg, #FF5722, #FF7043);
            color: white;
            border: none;
            border-radius: 8px;
            padding: 12px 16px;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .pos-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(255, 87, 34, 0.4);
            background: linear-gradient(45deg, #FF7043, #FF8A65);
        }

        .pos-btn.active {
            background: linear-gradient(45deg, #4CAF50, #66BB6A);
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7); }
            70% { box-shadow: 0 0 0 10px rgba(76, 175, 80, 0); }
            100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); }
        }

        /* Стилі для курсора карти в режимі вибору */
        .map-selection-mode {
            cursor: crosshair !important;
        }

        .map-selection-mode * {
            cursor: crosshair !important;
        }

        /* Покращення інпутів координат */
        #tx-lat, #tx-lng, #rx-lat, #rx-lng {
            font-family: 'Courier New', monospace;
            font-size: 12px;
            text-align: center;
        }

        /* Адаптивні стилі для мобільних */
        @media (max-width: 768px) {
            .radio-map-container {
                flex-direction: column;
                height: auto;
            }

            .ukraine-map {
                height: 50vh;
                min-height: 300px;
            }

            .map-controls {
                width: 100%;
                max-height: 55vh;
            }

            .panel-scroll-area {
                max-height: calc(55vh - 110px);
            }

            .position-controls {
                flex-direction: column;
                gap: 5px;
            }

            .navigation-controls {
                padding: 6px;
            }

            .nav-btn {
                width: 28px;
                height: 28px;
                font-size: 12px;
            }

            .pos-btn {
                padding: 6px 10px;
                font-size: 10px;
            }

            .signal-overlay {
                position: relative;
                top: 0;
                left: 0;
                width: 100%;
                max-width: none;
                margin-bottom: 10px;
            }
        }

        /* Splash Screen стилі */
        .splash-screen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            opacity: 1;
            visibility: visible;
            transition: opacity 0.8s ease, visibility 0.8s ease;
        }

        .splash-screen.fade-out {
            opacity: 0;
            visibility: hidden;
        }

        .splash-content {
            text-align: center;
            color: var(--text-color);
        }

        .logo-animation {
            position: relative;
            display: inline-block;
            margin-bottom: 30px;
        }

        .splash-logo {
            animation: logoFloat 3s ease-in-out infinite, logoRotate 8s linear infinite;
            filter: drop-shadow(0 0 30px rgba(187, 134, 252, 0.6));
            transition: all 0.3s ease;
        }

        .pulse-ring {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 160px;
            height: 160px;
            border: 2px solid rgba(187, 134, 252, 0.4);
            border-radius: 50%;
            animation: pulse 2s ease-out infinite;
        }

        .pulse-ring-delay {
            animation-delay: 1s;
        }

        .splash-title {
            font-size: 3rem;
            font-weight: 700;
            margin: 20px 0;
            background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: titleGlow 2s ease-in-out infinite alternate;
            text-shadow: 0 0 30px rgba(187, 134, 252, 0.5);
        }

        .loading-dots {
            display: flex;
            justify-content: center;
            gap: 8px;
            margin-top: 30px;
        }

        .loading-dots span {
            width: 12px;
            height: 12px;
            background: var(--primary-color);
            border-radius: 50%;
            animation: dotBounce 1.4s ease-in-out infinite both;
            box-shadow: 0 0 15px rgba(187, 134, 252, 0.5);
        }

        .loading-dots span:nth-child(1) { animation-delay: -0.32s; }
        .loading-dots span:nth-child(2) { animation-delay: -0.16s; }
        .loading-dots span:nth-child(3) { animation-delay: 0s; }

        /* Анімації */
        @keyframes logoFloat {
            0%, 100% { transform: translateY(0px) scale(1); }
            50% { transform: translateY(-10px) scale(1.05); }
        }

        @keyframes logoRotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        @keyframes pulse {
            0% {
                transform: translate(-50%, -50%) scale(0.9);
                opacity: 1;
            }
            100% {
                transform: translate(-50%, -50%) scale(1.5);
                opacity: 0;
            }
        }

        @keyframes titleGlow {
            0% { 
                text-shadow: 0 0 20px rgba(187, 134, 252, 0.5); 
                transform: scale(1);
            }
            100% { 
                text-shadow: 0 0 40px rgba(187, 134, 252, 0.8), 0 0 60px rgba(3, 218, 198, 0.3); 
                transform: scale(1.02);
            }
        }

        @keyframes dotBounce {
            0%, 80%, 100% {
                transform: scale(0.8);
                opacity: 0.5;
            }
            40% {
                transform: scale(1.2);
                opacity: 1;
            }
        }

        /* Адаптивні стилі для splash screen */
        @media (max-width: 768px) {
            .splash-logo {
                width: 100px;
                height: 100px;
            }
            
            .pulse-ring {
                width: 140px;
                height: 140px;
            }
            
            .splash-title {
                font-size: 2.2rem;
            }
        }

        @media (max-width: 480px) {
            .splash-logo {
                width: 80px;
                height: 80px;
            }
            
            .pulse-ring {
                width: 120px;
                height: 120px;
            }
            
            .splash-title {
                font-size: 1.8rem;
            }
        }

        /* Стилі для контролу вибору карт — нижній правий кут, нижче шапки/меню */
        .ukraine-map .leaflet-top.leaflet-right,
        .ukraine-map .leaflet-bottom.leaflet-right {
            z-index: 450;
        }

        .leaflet-control-layers {
            background: rgba(30, 30, 46, 0.95) !important;
            backdrop-filter: blur(15px);
            border: 2px solid var(--primary-color) !important;
            border-radius: 15px !important;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
            color: var(--text-color) !important;
            min-width: 200px;
            max-width: min(280px, calc(100vw - 24px));
        }

        .leaflet-control-layers-expanded {
            max-height: min(60vh, 420px);
            overflow-y: auto;
        }

        .leaflet-control-layers-toggle {
            background: linear-gradient(45deg, var(--primary-color), var(--secondary-color)) !important;
            border-radius: 8px !important;
            width: 40px !important;
            height: 40px !important;
            background-image: none !important;
            position: relative;
        }

        /* Згорнутий блок: показуємо назву активної карти */
        .rm-active-map-name {
            display: none;
            padding: 8px 14px 10px;
            font-size: 13px;
            font-weight: 600;
            color: var(--text-color);
            line-height: 1.35;
            border-bottom: 1px solid rgba(187, 134, 252, 0.25);
            margin: 0 10px 8px;
            background: rgba(3, 218, 198, 0.08);
            border-radius: 8px;
            border: 1px solid rgba(3, 218, 198, 0.25);
        }

        .rm-active-map-name::before {
            content: 'Активна карта';
            display: block;
            font-size: 10px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: var(--secondary-color);
            margin-bottom: 4px;
            opacity: 0.9;
        }

        .leaflet-control-layers:not(.leaflet-control-layers-expanded) .rm-active-map-name {
            display: block;
        }

        .leaflet-control-layers:not(.leaflet-control-layers-expanded) {
            padding-bottom: 8px;
            min-width: 220px;
        }

        .leaflet-control-layers:not(.leaflet-control-layers-expanded) .leaflet-control-layers-toggle {
            width: calc(100% - 20px) !important;
            height: 32px !important;
            margin: 0 10px 6px;
            display: flex !important;
            align-items: center;
            justify-content: center;
        }

        .leaflet-control-layers:not(.leaflet-control-layers-expanded) .leaflet-control-layers-toggle::before {
            content: "Змінити карту ▾";
            position: static;
            transform: none;
            font-size: 12px;
            font-weight: 600;
            filter: none;
        }

        .leaflet-control-layers-expanded .rm-active-map-name {
            display: none;
        }

        /* Заголовок — лише у згорнутому стані (у розгорнутому є список) */
        .leaflet-control-layers::before {
            content: "🗺️ Вибір карти";
            display: block;
            padding: 12px 14px 6px;
            font-size: 14px;
            font-weight: 600;
            color: var(--secondary-color);
            border-bottom: 1px solid rgba(187, 134, 252, 0.3);
            margin: 0 0 8px;
        }

        .leaflet-control-layers-expanded::before {
            content: "🗺️ Вибір карти";
            padding: 12px 15px 8px;
            margin: -15px -15px 10px;
            border-bottom-width: 2px;
        }

        .leaflet-control-layers:not(.leaflet-control-layers-expanded)::before {
            padding-bottom: 4px;
            margin-bottom: 4px;
            border-bottom: none;
        }

        .leaflet-control-layers-expanded .leaflet-control-layers-toggle {
            width: calc(100% - 30px) !important;
            height: 28px !important;
            margin: 0 15px 8px;
            display: flex !important;
            align-items: center;
            justify-content: center;
        }

        .leaflet-control-layers-expanded .leaflet-control-layers-toggle::before {
            content: "Згорнути ▴";
            position: static;
            transform: none;
            font-size: 11px;
            font-weight: 600;
            filter: none;
        }

        .leaflet-control-layers-toggle:hover {
            background: linear-gradient(45deg, #9969e0, #00bfa5) !important;
            transform: scale(1.05);
            transition: all 0.3s ease;
        }

        .leaflet-control-layers-list {
            padding: 15px !important;
            background: transparent !important;
        }

        .leaflet-control-layers-base {
            margin-bottom: 8px;
        }

        .leaflet-control-layers-base label {
            display: flex !important;
            align-items: center;
            padding: 8px 12px;
            margin: 2px 0;
            border-radius: 8px;
            background: rgba(18, 18, 18, 0.6);
            border: 1px solid rgba(187, 134, 252, 0.2);
            color: var(--text-color) !important;
            font-weight: 500;
            transition: all 0.3s ease;
            cursor: pointer;
            font-size: 13px;
        }

        .leaflet-control-layers-base label:hover {
            background: rgba(187, 134, 252, 0.1);
            border-color: var(--primary-color);
            transform: translateX(3px);
            box-shadow: 0 4px 12px rgba(187, 134, 252, 0.2);
        }

        .leaflet-control-layers-selector {
            margin-right: 8px !important;
            width: 16px !important;
            height: 16px !important;
            accent-color: var(--secondary-color) !important;
        }

        .leaflet-control-layers-base label span {
            flex-grow: 1;
            margin-left: 4px;
        }

        /* Активний стан */
        .leaflet-control-layers-base input:checked + span {
            color: var(--secondary-color) !important;
            font-weight: 600;
        }

        .leaflet-control-layers-base input:checked {
            accent-color: var(--secondary-color) !important;
        }

        .leaflet-control-layers-base:has(input:checked) label {
            background: linear-gradient(45deg, rgba(187, 134, 252, 0.2), rgba(3, 218, 198, 0.2));
            border-color: var(--secondary-color);
            box-shadow: 0 0 15px rgba(3, 218, 198, 0.3);
        }

        /* Анімація появи */
        .leaflet-control-layers {
            animation: slideInFromRight 0.3s ease-out;
        }

        @keyframes slideInFromRight {
            from {
                opacity: 0;
                transform: translateX(20px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        /* Адаптивні стилі для мобільних */
        @media (max-width: 768px) {
            .leaflet-control-layers {
                min-width: 180px;
                font-size: 12px;
            }

            .leaflet-control-layers-toggle {
                width: 35px !important;
                height: 35px !important;
            }

            .leaflet-control-layers-base label {
                padding: 6px 10px;
                font-size: 12px;
            }
        }

        /* Стилі для зон Френеля на карті */
        .fresnel-zone-100 {
            stroke: #03DAC6 !important;
            stroke-dasharray: 5,5 !important;
            fill: #03DAC6 !important;
            fill-opacity: 0.1 !important;
            stroke-opacity: 0.8 !important;
            stroke-width: 2px !important;
        }

        .fresnel-zone-80 {
            stroke: #BB86FC !important;
            stroke-dasharray: 3,3 !important;
            fill: #BB86FC !important;
            fill-opacity: 0.08 !important;
            stroke-opacity: 0.6 !important;
            stroke-width: 1.5px !important;
        }

        .fresnel-zone-60 {
            stroke: #4CAF50 !important;
            stroke-dasharray: 2,2 !important;
            fill: #4CAF50 !important;
            fill-opacity: 0.05 !important;
            stroke-opacity: 0.4 !important;
            stroke-width: 1px !important;
        }

        /* Анімація для зон Френеля при наведенні */
        .fresnel-zone-100:hover,
        .fresnel-zone-80:hover,
        .fresnel-zone-60:hover {
            fill-opacity: 0.2 !important;
            stroke-opacity: 1 !important;
            transition: all 0.3s ease !important;
        }

/* ─── Оновлений layout radio-map v2 ─── */
.map-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.map-wrap {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.map-wrap .ukraine-map {
    flex: 1;
    min-height: 320px;
    height: 100%;
}

.map-terrain-legend {
    position: absolute;
    bottom: 14px;
    left: 14px;
    z-index: 1000;
    background: var(--rm-legend-bg);
    border: 1px solid var(--rm-accent-border-strong);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 0.72rem;
    line-height: 1.45;
    pointer-events: none;
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.map-terrain-legend strong {
    display: block;
    margin-bottom: 6px;
    color: var(--secondary-color);
    font-size: 0.75rem;
}

.legend-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 3px 0;
    color: var(--text-primary);
}

.leg-swatch {
    width: 16px;
    height: 8px;
    border-radius: 4px;
    flex-shrink: 0;
}

.leg-low { background: #22c55e; }
.leg-mid { background: #eab308; }
.leg-high { background: #ef4444; }

.leg-marker { font-size: 0.85rem; width: 16px; text-align: center; }

.map-column .ukraine-map {
    flex: 1;
    min-height: 320px;
}

.elevation-profile-section {
    background: var(--dark-surface);
    border-top: 2px solid var(--primary-color);
    padding: 12px 16px 16px;
    flex-shrink: 0;
}

.profile-header h3 {
    margin: 0 0 4px;
    font-size: 0.95rem;
    color: var(--secondary-color);
}

.hint-text {
    font-size: 0.72rem;
    color: var(--rm-text-muted);
    margin: 0 0 8px;
    line-height: 1.4;
}

.ok-text { color: #4ade80 !important; }

.elevation-profile-canvas {
    width: 100%;
    height: 220px;
    border-radius: 10px;
    border: 1px solid var(--rm-accent-border);
    display: block;
}

.link-summary-bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

.link-stat {
    background: var(--rm-surface-inset);
    border: 1px solid var(--rm-border-subtle);
    border-radius: 10px;
    padding: 8px 10px;
    text-align: center;
}

.link-stat-label {
    display: block;
    font-size: 0.65rem;
    color: var(--rm-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}

.link-stat-value {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--secondary-color);
}

.source-ok { color: #4ade80 !important; }
.source-fallback { color: #fbbf24 !important; }

.obstacle-list-panel {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--rm-border-subtle);
}

.obstacle-list-panel h4 {
    margin: 0 0 10px;
    font-size: 0.85rem;
    color: var(--primary-color);
}

.obstacle-list-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 280px;
    overflow-y: auto;
}

.obstacle-card {
    padding: 10px 12px;
    border-radius: 10px;
    border-left: 4px solid #f97316;
    background: rgba(255, 255, 255, 0.03);
    font-size: 0.78rem;
    line-height: 1.45;
}

.obstacle-card p { margin: 4px 0; }

.obstacle-card.impact-Критичний { border-left-color: #ef4444; background: rgba(239, 68, 68, 0.08); }
.obstacle-card.impact-Високий { border-left-color: #f97316; }
.obstacle-card.impact-Середній { border-left-color: #eab308; }
.obstacle-card.impact-Низький { border-left-color: #22c55e; }

.obstacle-card-head { font-weight: 600; margin-bottom: 6px; }

.obstacle-card-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}

.obstacle-card-metrics span {
    font-size: 0.68rem;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.obstacle-action { color: #03DAC6; margin: 4px 0 0; font-size: 0.75rem; }
.terrain-features-panel { margin-top: 8px; }

.terrain-features-intro {
    font-size: 0.78rem;
    margin: 8px 0 6px;
    color: var(--text-secondary);
}

/* ── Результати аналізу (ліва панель) ── */
.analysis-results {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.analysis-empty {
    text-align: center;
    padding: 20px 12px;
    border-radius: 12px;
    border: 1px dashed var(--rm-border-subtle);
    background: var(--rm-surface-inset);
}

.analysis-empty-icon {
    font-size: 2rem;
    margin-bottom: 8px;
    opacity: 0.85;
}

.analysis-empty-title {
    margin: 0 0 6px;
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--text-color);
}

.analysis-empty-hint {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--rm-text-muted);
}

.analysis-hero {
    padding: 14px;
    border-radius: 12px;
    border: 1px solid var(--rm-border-subtle);
    background: linear-gradient(145deg, var(--rm-surface-inset) 0%, rgba(187, 134, 252, 0.06) 100%);
    border-left: 4px solid var(--primary-color);
}

.analysis-hero.quality-excellent { border-left-color: #4ade80; }
.analysis-hero.quality-good { border-left-color: #03DAC6; }
.analysis-hero.quality-fair { border-left-color: #fbbf24; }
.analysis-hero.quality-poor { border-left-color: #f97316; }
.analysis-hero.quality-none { border-left-color: #94a3b8; }

.analysis-hero-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.analysis-quality-badge {
    font-size: 0.82rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-color);
}

.analysis-mode-tag {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rm-text-muted);
}

.analysis-hero-main {
    margin-bottom: 8px;
}

.analysis-margin-block {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 8px;
}

.analysis-margin-value {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.analysis-margin-unit {
    font-size: 0.78rem;
    color: var(--rm-text-muted);
}

.analysis-margin-track {
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.analysis-margin-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.35s ease;
}

.analysis-hero-detail {
    margin: 0 0 8px;
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--rm-text-muted);
}

.analysis-hero-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    font-size: 0.75rem;
    color: var(--text-secondary);
    padding-top: 8px;
    border-top: 1px solid var(--rm-border-subtle);
}

.analysis-hero-foot strong {
    color: var(--text-color);
}

.analysis-metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.analysis-metric {
    padding: 10px 8px;
    border-radius: 10px;
    text-align: center;
    background: var(--rm-surface-inset);
    border: 1px solid var(--rm-border-subtle);
}

.analysis-metric-value {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: var(--secondary-color);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.analysis-metric-label {
    display: block;
    margin-top: 4px;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rm-text-muted);
}

.analysis-metric.tone-ok .analysis-metric-value { color: #4ade80; }
.analysis-metric.tone-warn .analysis-metric-value { color: #fbbf24; }

.analysis-band-card {
    padding: 12px;
    border-radius: 12px;
    border: 1px solid var(--rm-border-subtle);
    background: var(--rm-surface-inset);
}

.analysis-band-card.primary {
    border-left: 3px solid var(--primary-color);
}

.analysis-band-card.secondary {
    border-left: 3px solid var(--secondary-color);
    opacity: 0.95;
}

.analysis-band-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.analysis-band-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-color);
}

.analysis-band-quality {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
}

.analysis-band-quality.quality-excellent { color: #4ade80; }
.analysis-band-quality.quality-good { color: #03DAC6; }
.analysis-band-quality.quality-fair { color: #fbbf24; }
.analysis-band-quality.quality-poor { color: #f97316; }

.analysis-band-meta {
    margin: 0 0 10px;
    font-size: 0.68rem;
    color: var(--rm-text-muted);
    line-height: 1.35;
}

.analysis-band-highlight {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--rm-border-subtle);
}

.analysis-band-freq {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--secondary-color);
    font-variant-numeric: tabular-nums;
}

.analysis-band-freq-unit {
    font-size: 0.72rem;
    color: var(--rm-text-muted);
    margin-left: 3px;
}

.analysis-band-margin {
    font-size: 1.1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.analysis-band-margin small {
    font-size: 0.65rem;
    font-weight: 500;
    opacity: 0.85;
}

.analysis-kv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 10px;
}

.analysis-kv-grid.compact .analysis-kv-label {
    font-size: 0.62rem;
}

.analysis-kv-grid.compact .analysis-kv-value {
    font-size: 0.76rem;
}

.analysis-kv {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.analysis-kv-label {
    font-size: 0.65rem;
    color: var(--rm-text-muted);
    line-height: 1.2;
}

.analysis-kv-value {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-color);
    font-variant-numeric: tabular-nums;
    word-break: break-word;
}

.analysis-accordion {
    border-radius: 10px;
    border: 1px solid var(--rm-border-subtle);
    background: var(--rm-surface-inset);
    overflow: hidden;
}

.analysis-accordion summary {
    padding: 10px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    user-select: none;
    color: var(--text-color);
    transition: background 0.15s;
}

.analysis-accordion summary::-webkit-details-marker { display: none; }

.analysis-accordion summary::after {
    content: '▾';
    font-size: 0.7rem;
    color: var(--rm-text-muted);
    transition: transform 0.2s;
}

.analysis-accordion[open] summary::after {
    transform: rotate(180deg);
}

.analysis-accordion summary:hover {
    background: rgba(187, 134, 252, 0.06);
}

.analysis-accordion .analysis-kv-grid {
    padding: 10px 12px 12px;
    margin: 0;
    border-top: 1px solid var(--rm-border-subtle);
}

.control-section {
    background: var(--dark-bg);
    border-radius: 12px;
    border: 1px solid rgba(187, 134, 252, 0.15);
    overflow: hidden;
    margin-bottom: 10px;
    transition: border-color 0.2s;
}

.control-section:hover {
    border-color: rgba(187, 134, 252, 0.28);
}

.control-section .section-toggle {
    width: 100%;
    margin: 0;
    padding: 12px 14px;
    font-size: 0.9rem;
    background: var(--rm-accent-soft);
    border: none;
    border-bottom: 1px solid var(--rm-panel-bar-border);
    color: var(--text-color);
    font-family: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    transition: background 0.15s;
}

.control-section .section-toggle:hover {
    background: rgba(187, 134, 252, 0.14);
}

.control-section .section-toggle::after {
    content: '▼';
    font-size: 0.6rem;
    opacity: 0.6;
    transition: transform 0.2s;
    flex-shrink: 0;
}

.control-section .section-toggle:not(.open)::after {
    transform: rotate(-90deg);
}

.control-section .section-toggle:not(.open) {
    border-bottom: none;
}

.section-body {
    padding: 12px 14px;
}

.section-body[hidden] {
    display: none;
}

.viz-options-title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--rm-text-muted);
    margin: 10px 0 8px;
}

.visualization-options {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
}

.input-grid.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

@media (max-width: 480px) {
    .input-grid.two-col {
        grid-template-columns: 1fr;
    }
}

.input-card {
    background: var(--rm-card-gradient);
    border: 1px solid var(--rm-border-subtle);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.input-card:focus-within {
    border-color: rgba(187, 134, 252, 0.45);
    box-shadow: 0 0 0 2px rgba(187, 134, 252, 0.12);
}

.tx-card { border-top: 3px solid rgba(187, 134, 252, 0.6); }
.rx-card { border-top: 3px solid rgba(3, 218, 198, 0.55); }

.input-card input,
.input-card select,
.section-body input,
.section-body select {
    width: 100%;
    padding: 9px 11px;
    margin-bottom: 0;
    background: var(--rm-input-bg);
    border: 1px solid var(--rm-accent-border);
    color: var(--text-color);
    border-radius: 8px;
    font-size: 0.85rem;
    transition: border-color 0.15s, background 0.15s;
}

.input-card input:focus,
.input-card select:focus,
.section-body input:focus,
.section-body select:focus {
    outline: none;
    border-color: var(--secondary-color);
    background: var(--rm-input-bg-focus);
}

.input-card-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 6px;
    width: fit-content;
}

.tx-card .input-card-badge { background: var(--rm-badge-tx-bg); color: var(--rm-badge-tx-text); }
.rx-card .input-card-badge { background: var(--rm-badge-rx-bg); color: var(--rm-badge-rx-text); }

.input-card label {
    font-size: 0.75rem;
    color: var(--rm-text-dim);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.check-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    padding: 5px 10px;
    margin: 0;
    cursor: pointer;
    background: var(--rm-surface-inset);
    border: 1px solid var(--rm-border-subtle);
    border-radius: 999px;
    transition: background 0.15s, border-color 0.15s;
}

.check-pill:hover {
    background: rgba(187, 134, 252, 0.1);
    border-color: rgba(187, 134, 252, 0.25);
}

.check-pill input[type="checkbox"] {
    width: auto;
    margin: 0;
    accent-color: var(--primary-color);
}

/* Маркери рельєфу на карті */
.terrain-feature-marker {
    background: transparent !important;
    border: none !important;
}

.tf-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 1.1rem;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
    line-height: 1;
}

.tf-icon span {
    font-size: 0.62rem;
    font-weight: 800;
    background: var(--rm-marker-bg);
    color: var(--text-primary);
    padding: 1px 5px;
    border-radius: 4px;
    margin-top: 2px;
    white-space: nowrap;
}

.tf-peak {
    border-bottom: 2px solid #ef4444;
    padding-bottom: 2px;
}

.tf-valley span {
    color: #93c5fd;
}

.btn-primary {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--primary-color), #7c3aed);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: transform 0.15s, opacity 0.15s;
}

.field-hint {
    font-size: 0.68rem;
    color: var(--rm-text-muted);
    margin: 0;
    line-height: 1.35;
}

.signal-quick {
    font-size: 0.82rem;
    line-height: 1.55;
}

.signal-quick p { margin: 6px 0; }

.link-margin-bar-wrap {
    height: 8px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    overflow: hidden;
    margin: 6px 0 10px;
}

.link-margin-bar {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    transition: width 0.35s ease, background 0.25s;
    background: #94a3b8;
}

.cache-clear-btn {
    margin-top: 8px;
    width: 100%;
    font-size: 0.78rem;
    padding: 8px 12px;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #fca5a5;
}

.cache-clear-btn:hover {
    background: rgba(239, 68, 68, 0.22);
}

.btn-primary:hover:not(:disabled) { transform: translateY(-1px); }
.btn-primary:disabled { opacity: 0.65; cursor: wait; }

.analysis-controls { padding: 4px 0 12px; }

.bearing-marker { background: transparent !important; border: none !important; text-align: center; }

.bearing-arrow {
    font-size: 28px;
    color: #03DAC6;
    text-shadow: 0 0 8px rgba(3, 218, 198, 0.6);
    line-height: 1;
}

.bearing-label {
    font-size: 10px;
    color: #fff;
    background: rgba(0, 0, 0, 0.7);
    padding: 2px 6px;
    border-radius: 6px;
    margin-top: 2px;
    white-space: nowrap;
}

.obstacle-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(0, 0, 0, 0.85);
    border: 2px solid #f97316;
    border-radius: 10px;
    padding: 4px 8px;
    min-width: 44px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.obstacle-num { font-weight: 800; font-size: 12px; color: #fff; }
.obstacle-delta { font-size: 10px; color: #fbbf24; }

.signal-quick strong { color: var(--secondary-color); }

@media (max-width: 1100px) {
    .input-grid.two-col { grid-template-columns: 1fr; }
    .link-summary-bar { grid-template-columns: 1fr; }
}

/* ─── Board config (тип борту) ─── */
.board-intro { margin-bottom: 10px; }

.board-category-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.board-category-tab {
    flex: 1;
    min-width: 90px;
    padding: 8px 6px;
    border: 1px solid var(--rm-border-subtle);
    border-radius: 10px;
    background: var(--rm-surface-inset);
    color: var(--text-primary);
    font-size: 0.72rem;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.board-category-tab.active,
.board-category-tab:hover {
    border-color: var(--primary-color);
    background: rgba(3, 218, 198, 0.08);
}

.board-preset-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 320px;
    overflow-y: auto;
    margin-bottom: 10px;
    padding-right: 4px;
}

.board-preset-group-title {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rm-text-muted);
    margin-bottom: 4px;
    padding-left: 2px;
}

.board-preset-group-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
}

.board-mod-panel {
    border-color: rgba(251, 191, 36, 0.35);
    background: rgba(251, 191, 36, 0.04);
}

.board-mod-effective {
    color: #fbbf24;
    font-weight: 600;
}

.board-summary-mod {
    font-size: 0.72rem;
    color: #fbbf24;
    margin: 4px 0 6px;
}

.board-summary-mod strong {
    font-weight: 700;
}

.board-preset-card {
    text-align: left;
    padding: 8px 10px;
    border: 1px solid var(--rm-border-subtle);
    border-radius: 10px;
    background: var(--dark-surface);
    cursor: pointer;
    transition: border-color 0.2s;
}

.board-preset-card.active {
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 1px rgba(187, 134, 252, 0.35);
}

.board-preset-name {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--secondary-color);
}

.board-preset-short {
    display: block;
    font-size: 0.68rem;
    color: var(--rm-text-muted);
    margin-top: 2px;
}

.board-config-summary {
    background: var(--rm-surface-inset);
    border: 1px solid var(--rm-accent-border);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 12px;
    font-size: 0.75rem;
}

.board-summary-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 8px;
}

.board-summary-tag { color: var(--rm-text-muted); font-size: 0.68rem; }

.board-summary-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.board-summary-link {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 6px 8px;
}

.board-summary-link span { display: block; font-size: 0.65rem; color: var(--rm-text-muted); }
.board-summary-link strong { display: block; font-size: 0.72rem; color: var(--text-primary); }
.board-summary-link small { font-size: 0.65rem; color: var(--rm-text-muted); }

.link-panel {
    border: 1px solid var(--rm-border-subtle);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 10px;
}

.link-panel-locked { opacity: 0.85; }

.link-panel-title {
    margin: 0 0 8px;
    font-size: 0.82rem;
    color: var(--secondary-color);
}

.video-fields { margin: 8px 0; }

.analysis-section-label {
    font-size: 0.78rem;
    color: var(--secondary-color);
    margin: 12px 0 6px;
    font-weight: 600;
}

/* ─── Elevation preload ─── */
.elevation-preload-block {
    margin: 12px 0;
    padding: 10px;
    border: 1px dashed var(--rm-accent-border);
    border-radius: 10px;
}

.preload-progress-wrap { margin: 8px 0; }

.preload-progress-track {
    height: 8px;
    background: var(--rm-surface-inset);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 4px;
}

.preload-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #03DAC6, #BB86FC);
    transition: width 0.3s ease;
}

.preload-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.full-width-hint {
    grid-column: 1 / -1;
}

@media (max-width: 1100px) {
    .board-summary-links { grid-template-columns: 1fr; }
}