/* =============================================================================
   CSS Custom Properties — Theme Tokens
   These variables are set here as defaults that exactly reproduce the original
   hardcoded palette. The server can override them at runtime by injecting
   document.documentElement.style.setProperty('--token', value) from ui-config.js
   after fetching /api/ui-config. When no theme is configured the page looks
   identical to the original hardcoded version.
   ============================================================================= */
:root {
    --page-bg:      #adb5bd; /* panel/page background (Bootstrap gray-400)      */
    --panel-dark:   #2c3e50; /* dark widget backgrounds (meter, canvases, modal) */
    --panel-mid:    #34495e; /* mid-tone headers, section backgrounds            */
    --accent:       #667eea; /* interactive highlights, hover, scrollbar thumbs  */
    --accent-end:   #764ba2; /* gradient end (always paired with --accent)       */
    --text-light:   #ecf0f1; /* text on dark backgrounds                         */
    --control-text: #495057; /* labels on light backgrounds (Volume, Left, etc.) */
    /* Controls overlay opacity — set at runtime by ui-config.js from /api/ui-config.
       --controls-opacity:           docked receiver controls (#dock-overlay-wrapper)
       --waterfall-controls-opacity: waterfall controls bar (.spectrum-display-controls),
                                     always 15% higher than --controls-opacity, capped at 1. */
    --controls-opacity:           0.50;
    --waterfall-controls-opacity: 0.65;
}

/* Digital Spots Country Badges on Main Page */
.digital-spots-badges-main {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    background: transparent;
    min-height: 0;
    align-items: center;
    justify-content: center;
}

.digital-spots-badges-main.empty {
    color: #666;
    font-size: 12px;
    font-style: italic;
}

.digital-spots-badges-main .country-badge {
    padding: 6px 12px;
    background: #4a9eff;
    color: white;
    border-radius: 12px;
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
}

.digital-spots-badges-main .country-badge:hover {
    background: #3a8eef;
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
}

.digital-spots-badges-main .country-badge:active {
    transform: translateY(0);
}

/* CW Spots Country Badges on Main Page */
.cw-spots-badges-main {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    background: transparent;
    min-height: 0;
    align-items: center;
    justify-content: center;
}

.cw-spots-badges-main.empty {
    color: #666;
    font-size: 12px;
    font-style: italic;
}

.cw-spots-badges-main .country-badge {
    padding: 6px 12px;
    background: #17a2b8;
    color: white;
    border-radius: 12px;
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
}

.cw-spots-badges-main .country-badge:hover {
    background: #138496;
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
}

.cw-spots-badges-main .country-badge:active {
    transform: translateY(0);
}

/* Notification Toast */
.notification-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    min-width: 300px;
    max-width: 500px;
    padding: 16px 20px;
    background-color: #dc3545;
    color: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 10001;
    display: none;
    font-size: 14px;
    line-height: 1.5;
}

.notification-toast.show {
    display: block;
    animation: slideIn 0.3s ease-out;
}

.notification-toast.top-left {
    right: auto;
    left: 20px;
}

.notification-toast.error {
    background-color: #dc3545;
}

.notification-toast.warning {
    background-color: #ffc107;
    color: #000;
}

.notification-toast.info {
    background-color: #17a2b8;
}

.notification-toast.success {
    background-color: #28a745;
}

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

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

.notification-toast.hiding {
    animation: slideOut 0.3s ease-in forwards;
}

/* ka9q UberSDR Styles */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Audio Start Overlay */
.audio-start-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(5px);
}

.audio-start-overlay.hidden {
    display: none;
}

/* Firefox Browser Suggestion Toast */
.firefox-suggestion-toast {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 520px;
    width: calc(100% - 40px);
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a2e 100%);
    border: 1px solid rgba(255, 165, 0, 0.5);
    border-radius: 12px;
    padding: 14px 18px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    z-index: 10002;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 165, 0, 0.15);
    animation: firefoxToastSlideIn 0.4s ease-out;
}

.firefox-suggestion-icon {
    font-size: 24px;
    flex-shrink: 0;
    line-height: 1;
    margin-top: 2px;
}

.firefox-suggestion-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: #e0e0e0;
    font-size: 13px;
    line-height: 1.5;
}

.firefox-suggestion-text strong {
    color: #ffa500;
    font-size: 14px;
}

.firefox-suggestion-close {
    background: none;
    border: none;
    color: #888;
    font-size: 22px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    flex-shrink: 0;
    transition: color 0.2s;
}

.firefox-suggestion-close:hover {
    color: #fff;
}

@keyframes firefoxToastSlideIn {
    from {
        transform: translateX(-50%) translateY(-30px);
        opacity: 0;
    }
    to {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

.audio-start-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.audio-start-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 30px 50px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-end) 100%);
    border: none;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 40px rgba(102, 126, 234, 0.4);
}

.audio-start-button:hover {
    transform: scale(1.05);
    box-shadow: 0 15px 50px rgba(102, 126, 234, 0.6);
}

.audio-start-button:active {
    transform: scale(0.98);
}

.audio-start-button svg {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.audio-start-button span {
    color: white;
    font-size: 1.5em;
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.receiver-callsign {
    display: block !important;
    font-size: 1.4em;
    color: white !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.1em;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    margin-bottom: 0;
    visibility: visible !important;
    opacity: 1 !important;
    line-height: 1.2;
}

.overlay-buttons-container {
    display: flex;
    gap: 15px;
    margin-top: 20px;
    justify-content: center;
    align-items: center;
}

.download-client-button {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: white;
    font-size: 1em;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.download-client-button:hover {
    transform: scale(1.05);
}

.download-client-button:active {
    transform: scale(0.98);
}

.blue-button {
    background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
    box-shadow: 0 4px 15px rgba(33, 150, 243, 0.4);
}

.blue-button:hover {
    box-shadow: 0 6px 20px rgba(33, 150, 243, 0.6);
}

.digital-spots-button {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: white;
    font-size: 1em;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.digital-spots-button:hover {
    transform: scale(1.05);
}

.digital-spots-button:active {
    transform: scale(0.98);
}

.orange-button {
    background: linear-gradient(135deg, #FF9800 0%, #F57C00 100%);
    box-shadow: 0 4px 15px rgba(255, 152, 0, 0.4);
}

.orange-button:hover {
    box-shadow: 0 6px 20px rgba(255, 152, 0, 0.6);
}

.green-button {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: white;
    font-size: 1em;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    background: linear-gradient(135deg, #4CAF50 0%, #388E3C 100%);
    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4);
}

.green-button:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(76, 175, 80, 0.6);
}

.green-button:active {
    transform: scale(0.98);
}

.password-key-button {
    padding: 12px 16px;
    font-size: 1em;
    line-height: normal;
}

.password-key-button span {
    font-size: 1em;
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: var(--page-bg);
    min-height: 100vh;
    padding: 0;
    margin: 0;
    color: #333;
}

.container {
    width: 100%;
    margin: 0;
    background: var(--page-bg);
    overflow: hidden;
    position: relative;
}

/* Site Description in audio start overlay */
.site-description {
    padding: 12px 24px;
    background: rgba(44, 62, 80, 0.9);
    border-radius: 8px;
    color: var(--text-light);
    font-size: 1.2em;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    font-family: 'Courier New', monospace;
    font-weight: bold;
    margin-bottom: 30px;
    text-align: center;
    min-width: 400px;
    max-width: 600px;
}

.site-description a {
    color: #3498db;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s;
}

.site-description a:hover {
    color: #5dade2;
    text-decoration: underline;
}

/* Time Display in bottom left */
.time-display {
    position: fixed;
    bottom: 0;
    left: 0;
    background: rgba(44, 62, 80, 0.9);
    border-radius: 0 6px 0 0;
    z-index: 10001;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    padding: 4px 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.time-line {
    color: white;
    font-size: 10px;
    font-weight: bold;
    font-family: 'Courier New', monospace;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    white-space: nowrap;
}

/* Audio Buffer Display in bottom right */
.audio-buffer-display {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100px;
    height: 12px;
    background: rgba(44, 62, 80, 0.9);
    border-radius: 6px 0 0 0;
    z-index: 10002;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

/* Space Weather Display under audio buffer */
.space-weather-display {
    position: fixed;
    bottom: 0;
    right: 0;
    background: rgba(44, 62, 80, 0.9);
    border-radius: 0 0 0 6px;
    z-index: 10001;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    padding: 2px 6px;
}

.space-weather-text {
    color: white;
    font-size: 9px;
    font-weight: bold;
    font-family: 'Courier New', monospace;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    white-space: nowrap;
    display: flex;
    gap: 4px;
}

.space-weather-text span {
    display: inline-block;
}

.audio-buffer-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    transition: width 0.3s ease-out, background-color 0.3s ease-out;
    border-radius: 6px 0 0 0;
    pointer-events: none;
}

.audio-buffer-icon {
    position: absolute;
    top: 0;
    left: 2px;
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 8px;
    line-height: 1;
    pointer-events: none;
    z-index: 2;
}

.media-session-indicator {
    position: absolute;
    top: 0;
    left: 12px;
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 8px;
    line-height: 1;
    pointer-events: none;
    z-index: 2;
    padding-top: 2px;
}

.audio-buffer-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 22px;
    box-sizing: border-box;
    color: white;
    font-size: 9px;
    font-weight: bold;
    font-family: 'Courier New', monospace;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    pointer-events: none;
    z-index: 1;
}

/* Site Footer */
.site-footer {
    text-align: center;
    padding: 20px;
    margin-top: 20px;
}

.site-footer p {
    display: inline-block;
    margin: 0;
    padding: 4px 15px;
    background: rgba(44, 62, 80, 0.9);
    border-radius: 6px;
    color: var(--text-light);
    font-size: 0.9em;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.site-footer .footer-mobile {
    display: none;
}

.site-footer a {
    color: #3498db;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s;
}

.site-footer a:hover {
    color: #5dade2;
    text-decoration: underline;
}

.status-bar {
    display: flex;
    justify-content: space-around;
    padding: 20px;
    background: var(--page-bg);
    border-bottom: 2px solid #868e96;
}

.status-item {
    text-align: center;
}

.status-item .label {
    font-weight: bold;
    color: #666;
    display: block;
    margin-bottom: 5px;
}

.status-item .value {
    font-size: 1.2em;
    padding: 5px 15px;
    border-radius: 20px;
    display: inline-block;
}

.value.connected {
    background: #28a745;
    color: white;
}

.value.disconnected {
    background: #dc3545;
    color: white;
}

/* Band Status Bar */
.band-status-bar {
    padding: 4px 30px 2px;
    background: transparent;
    position: relative;
    z-index: 100;
}

.band-status-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    background: transparent;
    padding: 4px 15px 2px;
    position: relative;
    z-index: 100;
}

/* Band Buttons Container */
.band-buttons-container {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Frequency Readout Container */
.freq-readout-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    margin-bottom: 10px;
}

.freq-readout-display {
    display: flex;
    align-items: center;
    gap: 2px;
    background: linear-gradient(135deg, var(--panel-dark) 0%, var(--panel-mid) 100%);
    padding: 8px 16px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 2px 4px rgba(0, 0, 0, 0.2);
    border: none;
    font-family: 'Courier New', monospace;
    font-size: 1.4em;
    font-weight: bold;
}

.freq-digit {
    color: #00ff00;
    text-shadow: 0 0 8px rgba(0, 255, 0, 0.6), 0 0 12px rgba(0, 255, 0, 0.4);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    transition: all 0.2s ease;
    user-select: none;
    min-width: 20px;
    text-align: center;
    background: rgba(0, 0, 0, 0.3);
}

.freq-digit:hover {
    background: rgba(102, 126, 234, 0.4);
    transform: scale(1.15);
    box-shadow: 0 0 12px rgba(102, 126, 234, 0.6);
    color: #00ffff;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.8), 0 0 16px rgba(0, 255, 255, 0.5);
}

.freq-digit:active {
    transform: scale(1.05);
}

.freq-separator {
    color: var(--accent);
    font-weight: bold;
    padding: 0 2px;
    text-shadow: 0 0 6px rgba(102, 126, 234, 0.6);
}

.freq-unit-label {
    color: #3498db;
    font-size: 0.8em;
    margin-left: 8px;
    font-weight: bold;
    text-shadow: 0 0 6px rgba(52, 152, 219, 0.6);
}

.band-status-badge {
    padding: 6px 14px;
    background: #6c757d;
    color: white;
    border-radius: 4px;
    font-size: 0.9em;
    font-weight: bold;
    text-transform: uppercase;
    transition: all 0.3s ease;
    cursor: pointer;
    border: 2px solid transparent;
    user-select: none;
    pointer-events: auto;
    display: inline-block;
}

.band-status-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    filter: brightness(1.2);
}

.band-status-badge:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.band-status-badge[data-status="EXCELLENT"] {
    background: #22c55e;
    border-color: #22c55e;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
}

.band-status-badge[data-status="GOOD"] {
    background: #fbbf24;
    border-color: #fbbf24;
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.5);
}

.band-status-badge[data-status="FAIR"] {
    background: #ff9800;
    border-color: #ff9800;
    box-shadow: 0 0 8px rgba(255, 152, 0, 0.5);
}

.band-status-badge[data-status="POOR"] {
    background: #ef4444;
    border-color: #ef4444;
}

.band-status-badge[data-status="UNKNOWN"] {
    background: #6c757d;
    border-color: #6c757d;
    opacity: 0.6;
}

/* Active state - bright white border with glow (works for all status colors) */
.band-status-badge.active {
    border: 3px solid white !important;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.8),
                0 0 8px rgba(255, 255, 255, 0.6) inset !important;
    transform: scale(1.1) translateY(-2px);
    z-index: 10;
}

/* Voice Activity Button */
.voice-activity-button {
    padding: 8px 12px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-end) 100%);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 36px;
}

.voice-activity-button:hover {
    background: linear-gradient(135deg, var(--accent-end) 0%, var(--accent) 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.5);
}

.voice-activity-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.voice-activity-button:disabled {
    background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
    cursor: not-allowed;
    position: relative;
}

.voice-activity-button:disabled svg {
    opacity: 0.7;
    filter: brightness(1.5);
}

.voice-activity-button:disabled::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 120%;
    background: #dc3545;
    transform: translate(-50%, -50%) rotate(45deg);
    box-shadow: 0 0 4px rgba(220, 53, 69, 0.8);
    z-index: 1;
}

.voice-activity-button svg {
    width: 16px;
    height: 16px;
    position: relative;
    z-index: 0;
}

/* TTS Announce Button - matches voice activity button styling */
.tts-announce-button {
    padding: 8px 12px;
    background: linear-gradient(135deg, #4a4a4a 0%, #3a3a3a 100%);
    color: #999;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 36px;
    margin-left: 8px;
}

.tts-announce-button:hover {
    background: linear-gradient(135deg, #5a5a5a 0%, #4a4a4a 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(90, 90, 90, 0.5);
    color: #bbb;
}

.tts-announce-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.tts-announce-button.active {
    background: linear-gradient(135deg, #00e676 0%, #00c853 100%);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 2px 12px rgba(0, 230, 118, 0.6);
}

.tts-announce-button.active:hover {
    background: linear-gradient(135deg, #00ff88 0%, #00e676 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 230, 118, 0.8);
}

/* Voice Command Button */
.voice-command-button {
    padding: 8px 12px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-end) 100%);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 36px;
}

.voice-command-button:hover {
    background: linear-gradient(135deg, var(--accent-end) 0%, var(--accent) 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.5);
}

.voice-command-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.voice-command-button.recording {
    background: linear-gradient(135deg, #f44336 0%, #e91e63 100%);
    animation: recording-pulse 1.5s ease-in-out infinite;
}

@keyframes recording-pulse {
    0%, 100% { box-shadow: 0 2px 8px rgba(244, 67, 54, 0.5); }
    50% { box-shadow: 0 4px 16px rgba(244, 67, 54, 0.8); }
}

.voice-command-button svg {
    width: 16px;
    height: 16px;
    position: relative;
    z-index: 0;
}

.controls {
    padding: 30px 0 10px 0;
    display: grid;
    grid-template-columns: 300px 300px 450px; /* Fixed widths so margin:auto centres correctly */
    gap: 40px; /* Gap between columns */
    width: max-content; /* Shrink to grid content so margin:auto works */
    margin-left: auto;
    margin-right: auto;
    transform: scale(0.75);
    transform-origin: top center;
    margin-top: -30px; /* Reduce gap from waterfall */
    margin-bottom: -60px; /* Compensate for scaled height */
}

.control-group {
    display: flex;
    flex-direction: column;
    min-width: 0; /* Allow flex items to shrink below content size */
}

.control-group label {
    font-weight: bold;
    margin-bottom: 8px;
    color: var(--control-text);
}

.frequency-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.frequency-input-wrapper input[type="number"],
.frequency-input-wrapper input[type="text"] {
    width: 100%;
    padding: 12px;
    padding-right: 38px; /* Make room for kHz/MHz label */
    -moz-appearance: textfield; /* Firefox */
    border: 2px solid #dee2e6;
    border-radius: 6px;
    font-size: 1em;
    transition: border-color 0.3s;
}

.frequency-input-wrapper input[type="number"]::-webkit-outer-spin-button,
.frequency-input-wrapper input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.frequency-unit {
    position: absolute;
    right: 4px;
    color: #6c757d;
    font-weight: bold;
    font-size: 0.9em;
    pointer-events: auto;
    cursor: pointer;
    user-select: none;
    padding: 2px 4px;
    border-radius: 3px;
    transition: all 0.2s ease;
}

.frequency-unit:hover {
    background: var(--accent);
    color: white;
    transform: scale(1.05);
}

.frequency-unit:active {
    transform: scale(0.95);
}

.control-group input[type="number"],
.control-group select {
    padding: 12px;
    border: 2px solid #dee2e6;
    border-radius: 6px;
    font-size: 1em;
    transition: border-color 0.3s;
}

.control-group input[type="number"]:focus,
.control-group select:focus {
    outline: none;
    border-color: var(--accent);
}

/* Bookmark search box */
.bookmark-search-wrap {
    position: relative;
    margin-top: 4px;
    margin-bottom: 2px;
}

.bookmark-search-input {
    width: 100%;
    box-sizing: border-box;
    padding: 5px 8px;
    background: #34495e;
    color: #ecf0f1;
    border: 1px solid #7f8c8d;
    border-radius: 4px;
    font-size: 0.9em;
    outline: none;
    transition: border-color 0.2s;
}

.bookmark-search-input:focus {
    border-color: var(--accent);
}

.bookmark-search-input::placeholder {
    color: #95a5a6;
}

.bookmark-search-results {
    position: fixed;   /* set by JS portal; declaration here for specificity */
    z-index: 99999;
    /* Match the visual scale of .controls (transform:scale(0.75) on desktop).
       The portal lives on <body> so it doesn't inherit the transform — we
       compensate with font-size so text matches the scaled-down UI. */
    font-size: 0.75em;
    background: #2c3e50;
    border: 1px solid #7f8c8d;
    border-top: none;
    border-radius: 0 0 4px 4px;
    max-height: 260px;
    overflow-y: auto;
    list-style: none;
    margin: 0;
    padding: 0;
    box-shadow: 0 6px 16px rgba(0,0,0,0.5);
}

.bookmark-search-results li {
    padding: 6px 10px;
    font-size: 0.85em;
    color: #ecf0f1;
    cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bookmark-search-results li:last-child {
    border-bottom: none;
}

.bookmark-search-results li:hover,
.bookmark-search-results li.bm-search-active {
    background: var(--accent);
    color: #fff;
}

.bookmark-search-results li.bm-search-noresult {
    color: #95a5a6;
    font-style: italic;
    cursor: default;
}

.bookmark-search-results li.bm-search-noresult:hover {
    background: transparent;
    color: #95a5a6;
}

.bm-search-star {
    color: #ffd700;
    margin-right: 4px;
}

.preset-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    margin-top: 4px;
}

.preset-buttons button {
    padding: 8px;
    background: #e9ecef;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    transition: all 0.3s;
}

.preset-buttons button:hover:not(.active) {
    background: var(--accent);
    color: white;
    transform: translateY(-2px);
}

.mode-btn.active {
    background: #155724 !important;
    color: white;
    font-weight: bold;
    cursor: pointer;
    opacity: 0.9;
}

.band-btn.active {
    background: #155724 !important;
    color: white !important;
    font-weight: bold;
}

.tuning-buttons {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-top: 10px;
    margin-bottom: 5px;
}

/* Mobile tuning mode toggle (Buttons / Wheel radios) — hidden on desktop */
#tuning-mode-toggle {
    display: none;
    flex-direction: row;
    gap: 8px;
    align-items: center;
}

/* Mobile tuning wheel — hidden by default; JS shows/hides based on radio selection */
.tuning-wheel-container {
    display: none;
    margin: 10px 0 5px;
    position: relative;
}

.tuning-wheel {
    width: 100%;
    height: 55px;
    overflow: hidden;
    border-radius: 8px;
    border: 2px solid #4a5568;
    background: linear-gradient(180deg, #3d5166 0%, #2c3e50 50%, #3d5166 100%);
    cursor: grab;
    touch-action: pan-y;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
}

.tuning-wheel:active {
    cursor: grabbing;
}

.tuning-wheel-drum {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        90deg,
        transparent 0px, transparent 9px,
        rgba(255, 255, 255, 0.15) 9px, rgba(255, 255, 255, 0.15) 11px
    );
    pointer-events: none;
}

/* Left and right curved-edge overlays — make the drum look cylindrical */
.tuning-wheel::before,
.tuning-wheel::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 28%;
    pointer-events: none;
    z-index: 2;
}

/* Left edge: fades to dark, simulating the drum curving away */
.tuning-wheel::before {
    left: 0;
    background: linear-gradient(
        to right,
        rgba(10, 18, 28, 0.96) 0%,
        rgba(10, 18, 28, 0.6)  35%,
        rgba(10, 18, 28, 0.15) 70%,
        transparent            100%
    );
}

/* Right edge: mirror of left */
.tuning-wheel::after {
    right: 0;
    background: linear-gradient(
        to left,
        rgba(10, 18, 28, 0.96) 0%,
        rgba(10, 18, 28, 0.6)  35%,
        rgba(10, 18, 28, 0.15) 70%,
        transparent            100%
    );
}

/* Marker overlay — subtly shows the bookmark / CW / DX spot at the current
   dial freq+mode, near the top of the wheel. Sits above the edge gradients
   (z-index 2) but stays out of the way of dragging (pointer-events: none). */
.tuning-wheel-marker {
    position: absolute;
    top: 16px;
    /* Keep clear of the curved-edge gradients (28% each side) but allow a
       little overlap into the fade so long names have room to scroll. */
    left: 14%;
    right: 14%;
    height: 20px;            /* a touch taller so descenders (g, p, y) aren't clipped */
    overflow: hidden;
    text-align: center;
    pointer-events: none;
    z-index: 5;              /* above the step label so it's never clipped by it */
    opacity: 0;
    transition: opacity 0.25s ease;
}

.tuning-wheel-marker.visible {
    opacity: 1;
}

.tuning-wheel-marker-text {
    display: inline-block;
    white-space: nowrap;
    font-size: 0.74em;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.82);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
}

/* Only animates when JS detects the name overflows the container. The scroll
   distance + duration are set inline per-name; alternate avoids a jump-back. */
.tuning-wheel-marker.scrolling {
    text-align: left;
}

.tuning-wheel-marker-text.scrolling {
    animation: tuningWheelMarkerScroll var(--marker-scroll-dur, 5s) ease-in-out infinite alternate;
}

@keyframes tuningWheelMarkerScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(var(--marker-scroll-dist, 0)); }
}

/* Prev/next marker jump buttons — pinned to the wheel edges, with the
   neighbouring marker name stacked directly above the arrow. Unlike the centre
   marker overlay these are interactive (pointer-events: auto) so a tap tunes to
   the marker. z-index 4 keeps them above the edge fades and centre marker. */
/* ID-scoped (#tuning-wheel) so these beat the generic `button { }` chrome —
   we want bare arrows + text floating on the drum, no button background. */
/* The button is a FIXED-WIDTH hit strip pinned to the wheel edge — its tap
   area never changes with the marker name length, so the central drag region
   stays large and the edge buttons are hard to hit by accident. The neighbour
   name label can spill inward beyond this width but is pointer-events:none
   (see below), so only this constant strip actually triggers the jump. */
#tuning-wheel .tuning-wheel-nav {
    position: absolute;
    top: 0;
    bottom: 0;               /* full wheel height — easy to hit on purpose */
    width: 40px;             /* constant hit area, regardless of label length */
    display: none;           /* shown by JS only when a neighbour exists */
    flex-direction: column;
    justify-content: center; /* arrow vertically centred in the strip */
    gap: 1px;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    pointer-events: auto;
    overflow: visible;       /* let the name label overflow the strip inward */
    z-index: 4;
}

#tuning-wheel .tuning-wheel-nav.visible {
    display: flex;
}

#tuning-wheel .tuning-wheel-nav:hover,
#tuning-wheel .tuning-wheel-nav:active,
#tuning-wheel .tuning-wheel-nav:focus {
    background: transparent;
    box-shadow: none;
    outline: none;
}

.tuning-wheel-nav-prev { left: 4px;  align-items: flex-start; text-align: left;  }
.tuning-wheel-nav-next { right: 4px; align-items: flex-end;   text-align: right; }

/* Truncate long neighbour names rather than scrolling them (the centre marker
   keeps the marquee). Reuses .tuning-wheel-marker-text for identical styling.
   The label overflows the fixed-width hit strip inward, but pointer-events:none
   makes taps on it fall through to the wheel — only the strip jumps markers. */
.tuning-wheel-nav .tuning-wheel-marker-text {
    max-width: 34vw;        /* cap very long names; still readable, never huge */
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

.tuning-wheel-nav-arrow {
    font-size: 1.15em;
    line-height: 1;
    color: rgba(255, 255, 255, 0.82);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
}

/* Step label overlaid inside the wheel — takes no extra vertical space */
.tuning-wheel-step-label {
    position: absolute;
    bottom: 3px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 0.68em;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.03em;
    pointer-events: none;
    z-index: 3;
}

.tuning-buttons button {
    padding: 8px 12px;
    background: #e9ecef;
    border: 2px solid #dee2e6;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    transition: all 0.2s;
    min-width: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tuning-buttons button:hover {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.tuning-buttons button:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(102, 126, 234, 0.3);
}

/* Different styling for different step sizes */
.tuning-buttons button:nth-child(1),
.tuning-buttons button:nth-child(7) {
    /* Coarse tuning (1 kHz) - larger, more prominent */
    font-size: 1.1em;
    background: #d4d8dd;
}

.tuning-buttons button:nth-child(2),
.tuning-buttons button:nth-child(6) {
    /* Fine tuning (100 Hz) - medium */
    font-size: 1em;
}

.tuning-buttons button:nth-child(3),
.tuning-buttons button:nth-child(5) {
    /* Ultra-fine tuning (10 Hz) - smaller */
    font-size: 0.9em;
    padding: 8px 10px;
}

/* Centre snap-to-kHz button */
.tuning-btn-snap {
    min-width: 20px !important;
    padding: 8px 5px !important;
    font-size: 0.65em !important;
}

.bandwidth-control {
    margin-top: 15px;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 4px;
    border: 1px solid #dee2e6;
}

.bandwidth-control label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.9em;
}

.bandwidth-control input[type="range"] {
    width: 100%;
}

.bandwidth-controls {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 5px;
    margin-top: 10px;
    width: 100%;
    align-items: center;
}

.bandwidth-pill-toggle {
    flex-shrink: 0;
    align-self: center;
    background-color: #3498db;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.85em;
    font-weight: bold;
    line-height: 1.4;
    cursor: pointer;
    transition: background-color 0.2s;
    white-space: nowrap;
    min-width: 24px;
    text-align: center;
}

.bandwidth-pill-toggle.active {
    background-color: #e74c3c;
}

.bandwidth-combined-group {
    flex: 2;
}

.bandwidth-controls .control-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: visible; /* Edge/Opera: don't clip thumb overflow from child range inputs */
    padding-bottom: 8px; /* give the 20px thumb room below the 6px track */
}

.bandwidth-controls .control-group label {
    font-size: 0.9em;
    white-space: nowrap;
}

.bandwidth-controls .control-group input[type="range"] {
    width: 100%;
    overflow: visible; /* Edge/Opera: allow thumb to paint outside the 6px track box */
}

/* Edge/Opera: -webkit-appearance:none disables auto thumb-centering in Blink.
   Explicitly centre the 20px thumb on the 6px track: -(20-6)/2 = -7px.
   Firefox uses ::-moz-range-thumb which auto-centres; no change needed there. */
.bandwidth-controls .control-group input[type="range"]::-webkit-slider-thumb {
    margin-top: -7px;
}

.squelch-controls {
    display: flex;
    gap: 20px;
    margin-top: 10px;
}

.squelch-controls .control-group {
    flex: 1;
}

.squelch-controls .control-group label {
    font-size: 0.9em;
    white-space: nowrap;
}

.squelch-controls .control-group input[type="range"] {
    width: 100%;
}

button {
    padding: 12px 24px;
    border: none;
    border-radius: 6px;
    font-size: 1em;
    cursor: pointer;
    transition: all 0.3s;
    font-weight: bold;
}

.primary-btn {
    background: var(--accent);
    color: white;
}

.primary-btn:hover {
    background: #5568d3;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

button:disabled {
    background: #dee2e6;
    color: #6c757d;
    cursor: not-allowed;
    transform: none;
}

button:not(.primary-btn):not(:disabled):not(.download-client-button):not(.digital-spots-button):not(.cp-tab-btn):not(.cp-ant-btn):not(.cp-ant-ground-btn):not(.cp-ant-password-confirm):not(.rotator-controls-button):not(.cp-ant-history-btn) {
    background: #28a745;
    color: white;
}

button:not(.primary-btn):not(:disabled):not(.download-client-button):not(.digital-spots-button):not(.cp-tab-btn):not(.cp-ant-btn):not(.cp-ant-ground-btn):not(.cp-ant-password-confirm):not(.rotator-controls-button):not(.cp-ant-history-btn):hover {
    background: #218838;
    transform: translateY(-2px);
}

.audio-controls {
    padding: 5px 0;
    background: var(--page-bg);
    border-top: none;
    border-bottom: none;
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: center;
    transform: scale(0.75);
    transform-origin: top center;
    margin-top: -70px; /* Reduce gap from controls */
    margin-bottom: -20px; /* Compensate for scaled height */
}

.audio-controls .control-group {
    flex-direction: row;
    align-items: center;
    gap: 15px;
}

/* Compact VU Meter in audio controls */
.vu-meter-compact-container {
    flex: 1;
    display: flex;
    align-items: center;
    max-width: 450px;
    cursor: pointer;
}

.vu-meter-compact-container .vu-meter {
    width: 100%;
    cursor: pointer;
}

/* LED canvas for compact VU meter */
.vu-meter-leds-compact {
    width: 100%;
    height: 40px;
    border-radius: 6px;
    cursor: pointer;
    display: block;
}

input[type="range"] {
    width: 200px;
    height: 6px;
    border-radius: 3px;
    background: #dee2e6;
    outline: none;
    -webkit-appearance: none;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    border: none;
}

#volume-value {
    min-width: 50px;
    font-weight: bold;
    color: var(--accent);
}

#snr-squelch-value {
    font-weight: bold;
    color: var(--accent);
    cursor: pointer;
}

#mute-btn {
    background: #ffc107;
    color: #333;
}

#mute-btn:hover {
    background: #e0a800;
}

/* Audio Controls Section (Collapsible) */
.audio-controls-section {
    padding: 0 30px;
    background: var(--page-bg);
    border-top: none;
    transform: scale(0.75);
    transform-origin: top center;
    margin-top: 20px;
}

/* When collapsed, ensure header is fully visible */
.audio-controls-section:has(#audio-controls-filters-content[style*="display: none"]) {
    margin-bottom: 10px;
}

/* When expanded, use negative margin to compensate for scaled content */
.audio-controls-section:has(#audio-controls-filters-content[style*="display: block"]) {
    margin-bottom: -300px;
}

.audio-controls-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: var(--panel-mid);
    cursor: pointer;
    user-select: none;
    transition: background 0.3s;
    border-radius: 6px;
}

.audio-controls-header:hover {
    background: #3d566e;
}

.audio-controls-header h3 {
    margin: 0;
    color: var(--text-light);
    font-size: 1.1em;
}

.audio-controls-filters-content {
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    transform: none;
}

/* Audio Visualization Section (Collapsible) */
.audio-visualization-section {
    padding: 0 30px;
    background: var(--page-bg);
    border-top: none;
    transform: scale(0.75);
    transform-origin: top center;
    margin-top: 20px;
}

/* When collapsed, reduce negative margin */
.audio-visualization-section:has(.audio-visualization-content[style*="display: none"]) {
    margin-bottom: 0px;
}

/* When expanded, use full negative margin */
.audio-visualization-section:has(.audio-visualization-content[style*="display: block"]) {
    margin-bottom: -180px;
}

.audio-visualization-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: var(--panel-mid);
    cursor: pointer;
    user-select: none;
    transition: background 0.3s;
    border-radius: 6px;
}

.audio-visualization-header:hover {
    background: #3d566e;
}

.audio-visualization-header h3 {
    margin: 0;
    color: var(--text-light);
    font-size: 1.1em;
}

.toggle-icon {
    color: var(--text-light);
    font-size: 1.2em;
    font-weight: bold;
    transition: transform 0.3s;
}

.toggle-icon.expanded {
    transform: rotate(180deg);
}

.audio-visualization-content {
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

/* Visualizer Panel */
.visualizer-panel {
    padding: 10px 0 10px 0;
    background: var(--page-bg);
}

.visualizer-panel h3 {
    margin-bottom: 20px;
    color: #495057;
}

/* Top visualizers container */
.top-visualizers {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 30px;
    margin-bottom: 20px;
    align-items: start;
}

/* VU Meter */
.vu-meter-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vu-meter-container label {
    font-weight: bold;
    color: #495057;
}

.vu-meter {
    position: relative;
    width: 100%;
    height: 40px;
    background: var(--panel-dark);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.vu-meter-bar {
    position: absolute;
    height: 100%;
    width: 0%;
    /* Gradient will be set dynamically by JavaScript to show correct portion */
    transition: none;
    border-radius: 6px 0 0 6px;
}

.vu-meter-peak {
    position: absolute;
    height: 100%;
    width: 3px;
    background: #ffffff;
    left: 0%;
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
    transition: none;
}

.vu-meter-scale {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    pointer-events: none;
}

.vu-meter-scale span {
    font-size: 0.7em;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    font-weight: bold;
}

.vu-meter-values {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.vu-value-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px;
    background: white;
    border-radius: 4px;
    border: 2px solid #dee2e6;
}

.vu-label {
    font-size: 0.85em;
    font-weight: bold;
    color: #666;
    margin-bottom: 2px;
}

.vu-value {
    font-size: 1.1em;
    font-weight: bold;
    color: var(--accent);
}

/* Oscilloscope */
.oscilloscope-container {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.oscilloscope-container label {
    font-weight: bold;
    color: #495057;
}

#oscilloscope-canvas {
    width: 100%;
    height: 160px;
    background: var(--panel-dark);
    border-radius: 6px 6px 0 0;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.oscilloscope-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    background: var(--panel-mid);
    border-radius: 0 0 6px 6px;
}

.oscilloscope-controls label {
    color: var(--text-light);
    font-weight: bold;
    font-size: 0.9em;
    margin: 0;
}

.oscilloscope-controls input[type="range"] {
    width: 150px;
    height: 6px;
    border-radius: 3px;
    background: var(--panel-dark);
    outline: none;
    -webkit-appearance: none;
}

.oscilloscope-controls input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #00ff00;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.oscilloscope-controls input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #00ff00;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.oscilloscope-controls span {
    color: #00ff00;
    font-weight: bold;
    font-size: 0.9em;
    min-width: 60px;
    text-align: center;
}

/* Spectrum Analyzer */
.spectrum-container {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 0;
}

.spectrum-container label {
    font-weight: bold;
    color: #495057;
}

#spectrum-canvas {
    width: 100%;
    height: 150px;
    background: var(--panel-dark);
    border-radius: 6px 6px 0 0;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Waterfall Display */
.waterfall-container {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.waterfall-container label {
    font-weight: bold;
    color: #495057;
}

#waterfall-canvas {
    width: 100%;
    height: 300px;
    background: #000;
    border-radius: 0;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
    image-rendering: pixelated; /* Crisp pixels for waterfall */
    display: block;
    margin-bottom: 0;
}

.waterfall-controls {
    display: flex;
    gap: 20px;
    padding: 15px;
    background: var(--panel-dark);
    border-radius: 0;
    align-items: center;
}

.waterfall-control-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.waterfall-control-group label {
    color: var(--text-light);
    font-weight: bold;
    font-size: 0.9em;
    margin: 0;
}

.waterfall-control-group select {
    padding: 6px 10px;
    border: 2px solid var(--panel-mid);
    border-radius: 4px;
    background: var(--text-light);
    color: var(--panel-dark);
    font-size: 0.9em;
    cursor: pointer;
    transition: all 0.3s;
}

.waterfall-control-group select:hover {
    border-color: var(--accent);
    background: #fff;
}

.waterfall-control-group select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

.waterfall-control-group input[type="range"] {
    width: 150px;
    height: 6px;
    border-radius: 3px;
    background: var(--panel-mid);
    outline: none;
    -webkit-appearance: none;
}

.waterfall-control-group input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.waterfall-control-group input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.waterfall-control-group span {
    color: var(--text-light);
    font-weight: bold;
    font-size: 0.9em;
    min-width: 45px;
    text-align: center;
}

.info-panel {
    padding: 30px;
}

.info-panel h3 {
    margin-bottom: 15px;
    color: #495057;
}


.info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.info-item {
    padding: 10px;
    background: white;
    border-radius: 4px;
    border-left: 3px solid var(--accent);
}

.info-label {
    font-weight: bold;
    color: #666;
    display: block;
    margin-bottom: 3px;
    font-size: 0.85em;
}

.info-value {
    font-size: 1.1em;
    color: #333;
    font-weight: bold;
}

.log-panel {
    padding: 30px;
    background: var(--page-bg);
}

.log-panel h3 {
    margin-bottom: 15px;
    color: #495057;
}

.log-content {
    background: #fff;
    border: 2px solid #dee2e6;
    border-radius: 6px;
    padding: 15px;
    height: 200px;
    overflow-y: auto;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
}

.log-entry {
    padding: 5px;
    margin-bottom: 5px;
    border-radius: 3px;
}

.log-entry.info {
    color: #333;
}

.log-entry.error {
    background: #f8d7da;
    color: #721c24;
    font-weight: bold;
}

/* Responsive design */
@media (max-width: 1024px) {
    /* Lock the viewport — no scrolling on mobile */
    html, body {
        height: 100%;
        overflow: hidden !important;
    }

    /* Container fills exactly the viewport */
    .container {
        height: 100vh;
        height: 100dvh; /* dynamic viewport height — accounts for mobile browser chrome */
        overflow: hidden !important;
    }

    /* Spectrum panel fills the container; black background so the semi-transparent
       .spectrum-display-controls bar at the bottom shows the waterfall behind it
       rather than the solid page background colour. */
    .spectrum-display-panel {
        padding: 0 !important;
        background: black !important;
    }

    /* Spectrum container fills the full viewport height via CSS —
       no JS timing issues. JS may refine this after layout. */
    .spectrum-display-container {
        height: 100vh !important;
        height: 100dvh !important;
        min-height: unset !important;
    }

    /* Remove footer entirely on mobile — controls are docked over the waterfall */
    .site-footer {
        display: none !important;
    }

    /* Hide space weather so the audio buffer bar sits flush at the bottom right */
    .space-weather-display {
        display: none !important;
    }

    /* Dock overlay: remove the max-height cap and scrollbar on mobile so the
       controls panel sizes to its content without clipping or a scrollbar.
       padding-bottom extends the semi-transparent background down to meet
       the waterfall controls bar (covers the gap from _dockPositionWrapper). */
    #dock-overlay-wrapper {
        max-height: none !important;
        overflow: visible !important;
        overflow-y: visible !important;
        padding-bottom: 12px !important;
    }

    /* Hide the waterfall drag-resize handle on mobile — waterfall fills full
       viewport height and cannot be resized */
    .waterfall-resize-handle {
        display: none !important;
    }

    #local-time {
        display: none;
    }

    .controls {
        grid-template-columns: minmax(0, 1fr);
        transform: scale(0.9);
        transform-origin: top center;
        margin-top: -10px;
        margin-bottom: -15px;
        padding: 10px 0;
        gap: 15px;
        width: auto;
        max-width: 100%;
        /* overflow must stay visible so the bookmark search dropdown can escape
           the grid and float over the audio controls below */
    }

    /* Prevent <select> elements with long option text from expanding the controls.
       <select> has an intrinsic min-width equal to its widest <option> text;
       min-width:0 alone is not enough — we also need max-width to cap it,
       and the flex-parent div must allow shrinking via overflow:hidden. */
    .control-group select {
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* The bookmark selects sit inside an inline-styled flex div;
       ensure that div itself can shrink below its content size. */
    .controls .control-group > div {
        min-width: 0;
        overflow: hidden;
    }
    
    .info-grid {
        grid-template-columns: 1fr;
    }
    
    /* Hide S-meter on mobile */
    .smeter-control-group {
        display: none !important;
    }

    /* On mobile: #bw-squelch-row is a wrapper div created by JS containing
       #bandwidth-controls and #snr-squelch-row side-by-side.
       It sits inside the second .control-group of .controls, after the mode buttons. */
    #bw-squelch-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
        gap: 6px !important;
        width: 100%;
        padding-bottom: 8px;
    }

    /* Bandwidth and SNR squelch share the row equally */
    #bw-squelch-row > #bandwidth-controls,
    #bw-squelch-row > #snr-squelch-row {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        margin-top: 0 !important;
        box-sizing: border-box;
    }

    /* SNR squelch row: flex-row + wrap.
       JS reorders DOM to: label | span | slider
       so label+value share top line, slider wraps to full-width line below. */
    #bw-squelch-row > #snr-squelch-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        gap: 0 !important;
    }

    #bw-squelch-row > #snr-squelch-row label {
        flex: 0 0 auto !important;
        min-width: unset !important;
        font-size: 0.9em;
        font-weight: bold;
        margin: 0 4px 8px 0 !important;
    }

    #bw-squelch-row > #snr-squelch-row #snr-squelch-value {
        flex: 0 0 auto !important;
        min-width: unset !important;
        font-size: 0.9em;
        margin-bottom: 8px !important;
    }

    /* Target both the slider directly and the wrapper div that initSNRSquelch()
       creates around it (position:relative flex:1 div with the SNR marker). */
    #bw-squelch-row > #snr-squelch-row input[type="range"],
    #bw-squelch-row > #snr-squelch-row > div {
        flex: 0 0 100% !important;
        width: 100% !important;
        min-width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* NR button moved to frequency input row on mobile — no special sizing needed,
       the parent flex row handles alignment. Hide NB button. */
    #nb-quick-toggle {
        display: none !important;
    }

    /* Hide the bandwidth slider toggle button on narrow screens */
    .bandwidth-pill-toggle {
        display: none !important;
    }

    /* On mobile, hide the entire audio-controls panel — NR button is moved into
       .bw-squelch-row by JS, so nothing useful remains here. */
    .audio-controls {
        display: none !important;
    }
    
    /* Hide audio visualization section on mobile */
    .audio-visualization-section {
        display: none !important;
    }
    
    /* Hide audio filters section on mobile */
    .audio-controls-section {
        display: none !important;
    }
    
    /* Hide all filter panels on mobile */
    .filters-grid,
    .filters-grid-2x3,
    .equalizer-panel,
    .active-channels-panel {
        display: none !important;
    }
    
    /* Hide extension panel on mobile */
    .decoder-extension-panel,
    #extension-panel {
        display: none !important;
    }
    
    /* Hide extensions dropdown on mobile */
    #extensions-dropdown {
        display: none !important;
    }
    
    /* Hide spectrum/waterfall tooltips on mobile */
    .spectrum-frequency-overlay {
        pointer-events: none !important;
    }
    
    /* Hide all tooltip divs on mobile (spectrum tooltips are created dynamically) */
    body > div[style*="position: fixed"][style*="monospace"] {
        display: none !important;
    }

    /* On mobile: show band buttons but hide voice/TTS/lookup buttons */
    .band-status-bar {
        display: block !important;
        padding: 4px 8px;
    }

    .band-status-container {
        gap: 2px;
        padding: 4px 6px;
        justify-content: center;
    }

    /* Make band badges smaller and tighter on mobile */
    .band-buttons-container {
        gap: 2px;
    }

    .band-status-badge {
        padding: 3px 5px;
        font-size: 0.65em;
    }

    /* Hide voice activity, callsign lookup, TTS, and dock buttons on mobile */
    #voice-activity-button,
    #callsign-lookup-button,
    #tts-announce-button,
    #dock-controls-button {
        display: none !important;
    }

    /* Hide band selector dropdown on mobile */
    #band-selector {
        display: none !important;
    }

    /* Hide addons dropdown on mobile */
    #addons-dropdown {
        display: none !important;
    }

    /* Bookmark search wrap must not clip its absolutely-positioned dropdown */
    .bookmark-search-wrap {
        overflow: visible !important;
        margin-top: 0;
        margin-bottom: 0;
    }

    /* On mobile .controls is scale(0.9) not scale(0.75) — adjust portal font */
    .bookmark-search-results {
        font-size: 0.9em;
    }

    /* Pull the second control-group (freq readout + search + mode buttons) up
       so there's no visible gap between the bookmark dropdowns above and the
       search box below — the grid gap is cancelled by a negative margin. */
    .controls .control-group:nth-child(2) {
        margin-top: -10px;
    }

    /* Hide green per-digit frequency readout on mobile */
    #freq-readout-container {
        display: none !important;
    }

    /* Hide frequency scroll checkbox on mobile (no mouse wheel on touch) */
    /* The scroll mode selector is kept as it controls step size for tuning buttons too */
    #frequency-scroll-label {
        display: none !important;
    }

    /* Show Buttons/Wheel radio toggle on mobile (replaces the hidden Scroll checkbox) */
    #tuning-mode-toggle {
        display: flex !important;
    }

    /* Hide spectrum controls not needed on mobile */
    #spectrum-vfo-toggle,
    #spectrum-btn-center,
    #spectrum-label-scroll,
    #spectrum-label-snap,
    #spectrum-label-edge-tune,
    #spectrum-label-manual,
    #spectrum-control-group-manual,
    #spectrum-manual-range-controls {
        display: none !important;
    }

    /* Keep − and + zoom buttons on mobile; hide Min/Max */
    #spectrum-zoom-btn-min,
    #spectrum-zoom-btn-max {
        display: none !important;
    }

    /* Make − and + slightly larger for touch targets on narrow screens */
    #spectrum-zoom-btn-out,
    #spectrum-zoom-btn-in {
        padding: 6px 14px;
        font-size: 1.4em;
    }

    /* Increase gap between − and + buttons on narrow screens */
    #spectrum-zoom-slider-wrap {
        gap: 10px !important;
    }

    /* Show vertical zoom slider on narrow screens, fixed 225px from top */
    #spectrum-vzoom-slider {
        display: block !important;
        top: 225px !important;
        transform: rotate(-90deg) !important;
        transform-origin: center center;
    }

    input[type="range"]:not(#spectrum-vzoom-slider) {
        width: 100%;
    }
    
    .top-visualizers {
        grid-template-columns: 1fr;
    }

    /* Browser zoom buttons hidden on mobile — waterfall fills full height so
       browser-level zoom is no longer needed */
    #browser-zoom-group {
        display: none !important;
    }
}

/* Browser zoom buttons — hidden by default (desktop), shown on narrow via media query above */
#browser-zoom-group {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 0 6px;
    background: var(--page-bg);
}

#browser-zoom-group button {
    background-color: #17a2b8;
    color: white;
    padding: 8px 12px;
    touch-action: manipulation;
}

#browser-zoom-group button:hover {
    background-color: #138496;
}

#browser-zoom-group button:active {
    background-color: #0f6674;
}

#browser-zoom-level {
    font-size: 0.85em;
    color: var(--text-light);
    min-width: 38px;
    text-align: center;
    font-weight: bold;
}

/* Scrollbar styling */
.log-content::-webkit-scrollbar {
    width: 8px;
}

.log-content::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.log-content::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: 4px;
}

.log-content::-webkit-scrollbar-thumb:hover {
    background: #5568d3;
}

/* Equalizer */
.equalizer-container {
    margin-top: 0;
    padding: 15px 20px;
    background: var(--panel-mid);
    border-radius: 6px;
}

.equalizer-container label {
    display: block;
    font-weight: bold;
    color: var(--text-light);
    margin-bottom: 15px;
    font-size: 1.1em;
}

.equalizer-bands {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 10px;
    padding: 20px;
    background: var(--panel-dark);
    border-radius: 6px;
    min-height: 200px;
}

.eq-band {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.eq-slider {
    -webkit-appearance: slider-vertical;
    writing-mode: bt-lr;
    width: 30px;
    height: 150px;
    background: linear-gradient(to top, #e74c3c 0%, #f39c12 50%, #2ecc71 100%);
    border-radius: 15px;
    outline: none;
    cursor: pointer;
}

.eq-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 30px;
    height: 15px;
    border-radius: 8px;
    background: var(--text-light);
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.eq-slider::-moz-range-thumb {
    width: 30px;
    height: 15px;
    border-radius: 8px;
    background: var(--text-light);
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.eq-value {
    font-size: 0.85em;
    font-weight: bold;
    color: #3498db;
    min-width: 50px;
    text-align: center;
}

.eq-label {
    font-size: 0.8em;
    color: #95a5a6;
    text-align: center;
    font-weight: bold;
}

.eq-reset-btn {
    margin-top: 15px;
    padding: 10px 20px;
    background: #e74c3c;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s;
}

.eq-reset-btn:hover {
    background: #c0392b;
    transform: translateY(-2px);
}

/* Filter Panels Grid Container - 2x2 Grid (default) */
.filters-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 10px 30px;
    background: var(--page-bg);
    transform: none;
    transform-origin: top center;
    margin-bottom: 0;
}

/* Filter Panels Grid Container - 2x3 Grid (with NR2) */
.filters-grid.filters-grid-2x3 {
    grid-template-columns: 1fr 1fr 1fr;
}

/* Uniform styling for filter panels in grid */
.squelch-panel,
.bandpass-panel,
.notch-panel,
.compressor-panel,
.noise-reduction-panel,
.stereo-virtualizer-panel {
    padding: 0;
    background: transparent;
    border-top: none;
    transform: none;
    transform-origin: top center;
    margin-bottom: 0;
    min-height: 400px;
}

/* Empty panel slot */
.empty-panel {
    padding: 0;
    background: transparent;
    min-height: 400px;
}

/* Uniform styling for filter containers in grid */
.squelch-container,
.bandpass-container,
.notch-container,
.compressor-container,
.noise-reduction-container,
.stereo-virtualizer-container {
    padding: 15px 20px;
    background: var(--panel-dark);
    border-radius: 6px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Equalizer Panel - Full Width Below Grid */
.equalizer-panel {
    padding: 10px 30px;
    background: var(--page-bg);
    border-top: none;
    transform: none;
    transform-origin: top center;
    margin-top: 0;
    margin-bottom: 0;
}

.equalizer-container {
    padding: 15px 20px;
    background: var(--panel-dark);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
}

/* Filter Status Badges */
.filter-status-badge {
    position: absolute;
    top: 8px;
    right: 15px;
    font-weight: bold;
    padding: 4px 10px;
    border-radius: 4px;
    z-index: 100;
    font-size: 11px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    border: 2px solid;
    transition: all 0.3s ease;
}

.filter-status-badge.filter-disabled {
    color: #dc3545;
    background-color: rgba(220, 53, 69, 0.15);
    border-color: #dc3545;
}

.filter-status-badge.filter-enabled {
    color: #28a745;
    background-color: rgba(40, 167, 69, 0.15);
    border-color: #28a745;
}

/* Filter Latency Badges */
.filter-latency-badge {
    position: absolute;
    top: 8px;
    right: 105px;
    font-weight: bold;
    padding: 4px 10px;
    border-radius: 4px;
    z-index: 100;
    font-size: 11px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    border: 2px solid #3498db;
    color: #3498db;
    background-color: rgba(52, 152, 219, 0.15);
    transition: all 0.3s ease;
    font-family: 'Courier New', monospace;
}

/* CW Decoder Panel - Full Width */
.cw-decoder-panel {
    padding: 10px 30px;
    background: var(--page-bg);
    border-top: none;
    transform: scale(0.75);
    transform-origin: top center;
    margin-bottom: -20px;
}

.cw-decoder-container {
    padding: 15px 20px;
    background: var(--panel-dark);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
}

/* Uniform control group styling within filters */
.filters-grid .control-group {
    margin-bottom: 12px;
}

.filters-grid .control-group label {
    font-size: 0.9em;
    color: var(--text-light);
    margin-bottom: 6px;
    display: block;
}

.filters-grid .control-group input[type="range"] {
    width: 100%;
}

.filters-grid .control-group span {
    font-size: 0.9em;
    color: #3498db;
}

/* Uniform control group styling for all filter containers */
.filters-grid .control-group,
.equalizer-panel .control-group,
.cw-decoder-panel .control-group {
    margin-bottom: 15px;
}

.filters-grid .control-group label,
.equalizer-panel .control-group label,
.cw-decoder-panel .control-group label {
    display: flex;
    align-items: center;
    font-weight: bold;
    color: var(--text-light);
    margin-bottom: 8px;
    font-size: 0.9em;
    cursor: pointer;
    user-select: none;
}

.filters-grid .control-group input[type="checkbox"],
.equalizer-panel .control-group input[type="checkbox"],
.cw-decoder-panel .control-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    margin-right: 8px;
}

.filters-grid .control-group input[type="range"],
.equalizer-panel .control-group input[type="range"],
.cw-decoder-panel .control-group input[type="range"] {
    width: 100%;
}

.filters-grid .control-group span,
.equalizer-panel .control-group span,
.cw-decoder-panel .control-group span {
    display: inline-block;
    min-width: 60px;
    font-weight: bold;
    color: #3498db;
    margin-left: 10px;
    font-size: 0.9em;
}

#squelch-controls,
#audio-gate-controls,
#bandpass-controls,
#notch-controls,
#compressor-controls,
#noise-reduction-controls,
#stereo-virtualizer-controls,
#equalizer-controls,
#cw-decoder-controls {
    margin-top: 10px;
    padding-top: 0;
    border-top: none;
    flex: 1;
}

/* Help text styling for noise reduction */
.help-text {
    color: #95a5a6;
    font-size: 0.85em;
    font-style: italic;
    margin-top: 10px;
    line-height: 1.4;
}

.squelch-status {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
    padding: 10px 15px;
    background: var(--panel-mid);
    border-radius: 4px;
}

.squelch-status label {
    font-weight: bold;
    color: var(--text-light);
    font-size: 0.9em;
    margin: 0;
}

#squelch-status {
    font-size: 1em;
    padding: 4px 12px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.3);
}

#squelch-level {
    font-size: 0.9em;
}


#notch-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.notch-filter-item {
    padding: 15px;
    background: var(--panel-mid);
    border-radius: 6px;
    border-left: 4px solid #e74c3c;
}

.notch-filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.notch-filter-title {
    font-weight: bold;
    color: var(--text-light);
    font-size: 1em;
}

.notch-remove-btn {
    padding: 4px 10px;
    background: #e74c3c;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.9em;
    transition: all 0.3s;
}

.notch-remove-btn:hover {
    background: #c0392b;
    transform: scale(1.1);
}

.notch-filter-item .control-group {
    margin-bottom: 10px;
}

.notch-filter-item .control-group label {
    font-size: 0.9em;
    color: var(--text-light);
    margin-bottom: 5px;
}

.notch-filter-item .control-group input[type="range"] {
    width: 100%;
    max-width: 600px;
}

.notch-filter-item .control-group span {
    display: inline-block;
    min-width: 80px;
    font-weight: bold;
    color: #e74c3c;
    margin-left: 10px;
}

#notch-count {
    font-size: 0.9em;
    margin-left: 5px;
}

.notch-add-btn {
    padding: 10px 20px;
    background: #3498db;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s;
    font-size: 0.95em;
}

.notch-add-btn:hover {
    background: #2980b9;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(52, 152, 219, 0.3);
}

.notch-add-btn:active {
    transform: translateY(0);
}


.equalizer-bands {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 6px;
    padding: 15px;
    background: var(--panel-dark);
    border-radius: 6px;
}

.eq-band {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1;
}

/* Preset buttons live as a vertically-stacked column to the left of the first
   band slider (the rotated sliders are narrow enough to free up the room). */
.equalizer-bands .eq-presets {
    flex: 0 0 auto;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    margin-right: 8px;
}

.equalizer-bands .eq-presets .eq-reset-btn {
    margin: 0;            /* drop the default margin-top:15px in this stacked layout */
    padding: 6px 12px;
    font-size: 0.85em;
    min-width: 64px;
}

.eq-label {
    font-size: 0.85em;
    color: var(--text-light);
    font-weight: bold;
    text-align: center;
    order: 3;            /* label below the slider */
}

.eq-value {
    font-size: 0.85em;
    font-weight: bold;
    color: #3498db;
    text-align: center;
    order: 1;            /* value above the slider */
}

/* Vertical sliders are built from a normal horizontal range input rotated -90°
   inside a fixed-size slot, the same technique used by eq.widget.html. This
   avoids the cross-browser breakage of appearance:slider-vertical / writing-mode.
   NB: every layout rule is scoped under .equalizer-bands on purpose. The host
   page styles `input[type="range"]` (specificity 0,1,1 — width:200px, height:6px),
   which would beat a bare `.eq-slider` class (0,1,0) and blow the rotated sliders
   out to 200px tall. The descendant prefix (0,2,0) guarantees we win. */
.equalizer-bands .eq-slot {
    position: relative;
    width: 30px;
    height: 150px;
    order: 2;
}

.equalizer-bands .eq-slider {
    position: absolute;
    top: 50%;
    left: 50%;
    /* !important: the @media (max-width:1024px) rule
       `input[type="range"]:not(#spectrum-vzoom-slider){width:100%}` has an id in
       its :not() (specificity 1,1,1) and cannot be beaten by classes alone; it
       would otherwise collapse the rotated slider's vertical travel. */
    width: 150px !important;   /* becomes the vertical travel once rotated; keep == slot height */
    height: 30px !important;
    transform: translate(-50%, -50%) rotate(-90deg);
    margin: 0;
    writing-mode: horizontal-tb;   /* override the stale slider-vertical block above */
    -webkit-appearance: none;
    appearance: none;
    /* "to right" maps to "to top" after the -90° rotation: green (boost) on top. */
    background: linear-gradient(to right, #e74c3c 0%, #f39c12 50%, #2ecc71 100%);
    border-radius: 6px;
    outline: none;
    cursor: pointer;
}

.equalizer-bands .eq-slider::-webkit-slider-runnable-track {
    background: transparent;
    border: none;
}

.equalizer-bands .eq-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 30px;
    border-radius: 6px;
    background: var(--text-light);
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    border: 2px solid var(--panel-mid);
}

.equalizer-bands .eq-slider::-webkit-slider-thumb:hover {
    background: #fff;
}

.equalizer-bands .eq-slider::-moz-range-track {
    background: transparent;
    border: none;
}

.equalizer-bands .eq-slider::-moz-range-thumb {
    width: 14px;
    height: 30px;
    border-radius: 6px;
    background: var(--text-light);
    cursor: pointer;
    border: 2px solid var(--panel-mid);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.equalizer-bands .eq-slider::-moz-range-thumb:hover {
    background: #fff;
}

.eq-reset-btn {
    margin-top: 15px;
    padding: 10px 20px;
    background: #e74c3c;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s;
}

.eq-reset-btn:hover {
    background: #c0392b;
    transform: translateY(-2px);
}

.cw-decoder-display {
    background: var(--panel-dark);
    border-radius: 6px;
    padding: 20px;
    color: var(--text-light);
}

.cw-current-symbol {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    padding: 10px;
    background: var(--panel-mid);
    border-radius: 4px;
}

.cw-current-symbol label {
    font-weight: bold;
    color: var(--text-light);
    font-size: 0.9em;
}

.cw-current-symbol span {
    font-family: 'Courier New', monospace;
    font-size: 1.5em;
    font-weight: bold;
    color: #3498db;
    min-width: 100px;
}

.cw-decoded-text-container {
    margin-bottom: 15px;
}

.cw-decoded-text-container label {
    display: block;
    font-weight: bold;
    color: var(--text-light);
    margin-bottom: 8px;
    font-size: 0.9em;
}

.cw-decoded-text {
    background: #1a252f;
    border: 2px solid var(--panel-mid);
    border-radius: 4px;
    padding: 15px;
    min-height: 120px;
    max-height: 200px;
    overflow-y: auto;
    font-family: 'Courier New', monospace;
    font-size: 1.1em;
    color: #00ff00;
    line-height: 1.6;
    word-wrap: break-word;
}

.cw-decoded-text::-webkit-scrollbar {
    width: 8px;
}

.cw-decoded-text::-webkit-scrollbar-track {
    background: var(--panel-dark);
    border-radius: 4px;
}

.cw-decoded-text::-webkit-scrollbar-thumb {
    background: #3498db;
    border-radius: 4px;
}

.cw-decoded-text::-webkit-scrollbar-thumb:hover {
    background: #5dade2;
}

.cw-decoder-buttons {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.cw-btn {
    padding: 8px 16px;
    background: #3498db;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.9em;
    transition: all 0.3s;
}

.cw-btn:hover {
    background: #2980b9;
    transform: translateY(-2px);
}

.cw-btn:active {
    transform: translateY(0);
}

#cw-wpm-value,
#cw-threshold-value {
    display: inline-block;
    min-width: 40px;
    color: #3498db;
    font-weight: bold;
}

/* CW Decoder Signal Meter */
.cw-status-bar {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-bottom: 15px;
    padding: 10px;
    background: var(--panel-mid);
    border-radius: 4px;
}

.cw-signal-indicator {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.cw-signal-indicator label {
    font-weight: bold;
    color: var(--text-light);
    font-size: 0.9em;
    white-space: nowrap;
}

.cw-signal-meter {
    flex: 1;
    height: 20px;
    background: #1a252f;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid var(--panel-dark);
}

.cw-signal-bar {
    height: 100%;
    width: 0%;
    background: #6c757d;
    transition: width 0.1s ease-out, background 0.3s ease;
    border-radius: 8px;
}

#cw-signal-value {
    font-weight: bold;
    color: #3498db;
    font-size: 0.9em;
    min-width: 40px;
    text-align: right;
}

/* Spectrum Display Panel (Full-band FFT from radiod) */
.spectrum-display-panel {
    padding: 0 0 5px 0;
    background: var(--page-bg);
    border-top: none;
}

.spectrum-display-panel h3 {
    margin-bottom: 20px;
    color: #495057;
}

.spectrum-display-container {
    position: relative; /* For absolute positioning of controls overlay and line graph */
    z-index: 1; /* Base stacking context */
    height: var(--spectrum-container-height, 600px); /* Resizable via drag handle */
    min-height: 300px;
}

/* Waterfall drag-resize handle — sits below the spectrum-display-container */
.waterfall-resize-handle {
    width: 100%;
    height: 8px;
    background: #1a252f;
    cursor: ns-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    touch-action: none;
    position: relative;
    z-index: 10;
    transition: background 0.15s;
}

.waterfall-resize-handle:hover,
.waterfall-resize-handle.dragging {
    background: #2c3e50;
}

.waterfall-resize-handle::before {
    content: '';
    display: block;
    width: 40px;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.25);
    transition: background 0.15s;
}

.waterfall-resize-handle:hover::before,
.waterfall-resize-handle.dragging::before {
    background: rgba(255, 255, 255, 0.6);
}

/* On touch devices expand the invisible hit area to ~48px without changing the
   visual bar size or affecting the layout of neighbouring elements.
   ::after is used because ::before is already the visual grip dots.
   Only applied on coarse-pointer (touch) devices so desktop is unaffected.
   Expands 40px upward into the waterfall (no buttons there).
   Does NOT expand downward — the Btns/Wheel radio buttons in .controls sit
   immediately below the handle on mobile and would be blocked. */
@media (pointer: coarse) {
    .waterfall-resize-handle::after {
        content: '';
        position: absolute;
        top: -40px;
        bottom: 0;
        left: 0;
        right: 0;
    }
}

/* ── Vertical zoom slider ─────────────────────────────────────────────────── */
/* Hidden by default (desktop uses the Min/−/+/Max buttons); shown on narrow screens.
   A normal horizontal range input rotated -90deg — the most reliable cross-browser
   approach (writing-mode/appearance:slider-vertical is broken on iOS/Android Chrome).
   The slider is 140px wide (= visual height after rotation).
   right + transform centres it on the right edge of the container. */
#spectrum-vzoom-slider {
    display: none;
    position: absolute;
    right: -61px;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: center center;
    z-index: 20;
    pointer-events: auto;

    width: 186px;          /* visual height after rotation */
    height: 27px;          /* touch-target thickness */
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    opacity: 0.65;
    transition: opacity 0.15s;
}

#spectrum-vzoom-slider:active {
    opacity: 1;
}

/* Track — thin white line with tick marks */
#spectrum-vzoom-slider::-webkit-slider-runnable-track {
    height: 3px;
    background: repeating-linear-gradient(
        to right,
        #fff 0px, #fff 2px,
        rgba(255,255,255,0.25) 2px, rgba(255,255,255,0.25) calc((100% - 2px) / 14)
    );
    border-radius: 2px;
}

#spectrum-vzoom-slider::-moz-range-track {
    height: 3px;
    background: repeating-linear-gradient(
        to right,
        #fff 0px, #fff 2px,
        rgba(255,255,255,0.25) 2px, rgba(255,255,255,0.25) calc((100% - 2px) / 14)
    );
    border-radius: 2px;
}

/* Thumb — small white circle */
#spectrum-vzoom-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: none;
    margin-top: -7px;   /* centre 18px thumb on 3px track: -(18/2 - 3/2) = -7.5px */
    box-shadow: 0 0 6px rgba(0,0,0,0.8);
    cursor: pointer;
}

#spectrum-vzoom-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: none;
    box-shadow: 0 0 6px rgba(0,0,0,0.8);
    cursor: pointer;
}

/* Spectrum frequency overlay - below audio start overlay */
.spectrum-frequency-overlay {
    z-index: 9000 !important;
    background: transparent !important;
}

/* In split view, keep container at same height so controls don't jump */
.spectrum-display-container:has(#spectrum-line-graph-canvas.split-mode) {
    height: var(--spectrum-container-height, 600px); /* Resizable via drag handle */
}

/* In graph-only view, container needs to be tall enough for the full-height line graph */
.spectrum-display-container:has(#spectrum-line-graph-canvas.graph-only-mode) {
    min-height: 600px; /* 600px line graph */
}

#spectrum-display-canvas {
    width: 100%;
    height: 600px;
    background: #000;
    border-radius: 6px 6px 0 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    cursor: crosshair;
    image-rendering: pixelated; /* Crisp pixels for waterfall, no smoothing */
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

/* Split view mode - waterfall takes bottom half */
#spectrum-display-canvas.split-view {
    height: 300px;
    border-radius: 0 0 0 0;
    position: absolute;
    top: 300px;
    left: 0;
    width: 100%;
    z-index: 2;
}

/* Line graph canvas - absolutely positioned within spectrum-display-container */
#spectrum-line-graph-canvas {
    width: 100%;
    height: 300px;
    background: #000;
    border-radius: 6px 6px 0 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    pointer-events: auto;
}

/* Line graph canvas in split mode - 300px height, overlays top of waterfall */
#spectrum-line-graph-canvas.split-mode {
    display: block !important;
    height: 300px;
}

/* Line graph canvas in graph-only mode - 600px height, covers entire waterfall */
#spectrum-line-graph-canvas.graph-only-mode {
    display: block !important;
    height: 600px;
}

.spectrum-display-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    gap: 10px; /* Reduced gap */
    padding: 5px 10px; /* Reduced padding for less height */
    background: rgba(44, 62, 80, var(--waterfall-controls-opacity));
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    z-index: 10;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.3);
    font-size: 0.65em; /* Scale down text */
}

.spectrum-control-group {
    display: flex;
    align-items: center;
    gap: 3px; /* Reduced for tighter spacing */
}

.spectrum-control-group button {
    padding: 4px 8px; /* Scaled down from default */
    font-size: 0.85em;
    min-width: 30px;
    touch-action: manipulation; /* Prevent double-tap browser zoom on mobile */
}

/* Waterfall pause badge — small floating resume pill near the top of the spectrum */
.waterfall-pause-overlay {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: none;
    z-index: 9999;
    pointer-events: none; /* the button inside handles clicks */
    transform: translateX(-50%);
}

.waterfall-pause-overlay-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    background: rgba(30, 40, 55, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 20px;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 8px 18px 8px 14px;
    cursor: pointer;
    pointer-events: all;
    transition: background 0.15s, border-color 0.15s;
    text-shadow: 0 1px 3px rgba(0,0,0,0.7);
    box-shadow: 0 2px 10px rgba(0,0,0,0.5);
    white-space: nowrap;
}

.waterfall-pause-overlay-btn:hover {
    background: rgba(60, 80, 110, 0.95);
    border-color: rgba(255, 255, 255, 0.6);
}

.waterfall-pause-overlay-hint {
    margin: 6px 0 0;
    font-size: 0.78rem;
    color: #fff;
    text-align: center;
    background: rgba(0, 0, 0, 0.55);
    border-radius: 6px;
    padding: 2px 8px;
    white-space: nowrap;
    pointer-events: none;
}

/* Waterfall pause/play toggle button */
.waterfall-pause-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 7px;
    background: transparent;
    border: 1px solid var(--accent, #667eea);
    border-radius: 4px;
    color: var(--text-light, #ccc);
    cursor: pointer;
    line-height: 1;
    transition: background 0.15s, color 0.15s;
}

.waterfall-pause-btn:hover {
    background: var(--accent, #667eea);
    color: #fff;
}

.waterfall-pause-btn[aria-pressed="true"] {
    background: var(--accent, #667eea);
    color: #fff;
}

#spectrum-btn-center {
    margin-right: 8px;
}

/* ── Zoom buttons ─────────────────────────────────────────────────────────── */
#spectrum-zoom-slider-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-right: 8px;
}


.spectrum-control-group select {
    padding: 3px 6px; /* Scaled down */
    font-size: 0.85em;
}

.spectrum-control-group input[type="range"] {
    width: 100px; /* Scaled down from 150px */
    height: 4px; /* Scaled down from 6px */
}

.spectrum-control-group input[type="range"]::-webkit-slider-thumb {
    width: 12px; /* Scaled down from 18px */
    height: 12px;
}

.spectrum-control-group input[type="range"]::-moz-range-thumb {
    width: 12px; /* Scaled down from 18px */
    height: 12px;
}

.spectrum-control-group label {
    color: var(--text-light);
    font-weight: bold;
    font-size: 0.9em;
    margin: 0;
    white-space: nowrap;
}

.spectrum-control-group select {
    padding: 6px 10px;
    border: 2px solid var(--panel-mid);
    border-radius: 4px;
    background: var(--text-light);
    color: var(--panel-dark);
    font-size: 0.9em;
    cursor: pointer;
    transition: all 0.3s;
}

.spectrum-control-group select:hover {
    border-color: var(--accent);
    background: #fff;
}

.spectrum-control-group select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

.spectrum-control-group input[type="range"] {
    width: 100px; /* Scaled down to match other sliders */
    height: 4px; /* Scaled down */
    border-radius: 2px;
    background: var(--panel-mid);
    outline: none;
    -webkit-appearance: none;
}

.spectrum-control-group input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px; /* Scaled down to match other sliders */
    height: 12px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.spectrum-control-group input[type="range"]::-moz-range-thumb {
    width: 12px; /* Scaled down to match other sliders */
    height: 12px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.spectrum-control-group span {
    color: var(--text-light);
    font-weight: bold;
    font-size: 0.9em;
    min-width: unset;
    text-align: left;
}

.spectrum-status {
    padding: 6px 12px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 0.9em;
    background: var(--panel-mid);
    color: #f44336;
}

.spectrum-status.connected {
    color: #4CAF50;
}

/* Signal Meter in Spectrum Controls */
.signal-meter {
    position: relative;
    width: 120px;
    height: 16px;
    background: #1a252f;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid var(--panel-mid);
}

/* S-Meter with Needle */
.s-meter-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    line-height: 0;
    font-size: 0;
}

.s-meter-container canvas {
    display: block;
}

/* S-meter control group: side-by-side layout (S-meter left, mini charts right) */
.smeter-control-group {
    flex-direction: row !important;
    align-items: center;
    gap: 8px;
}

/* When charts panel is hidden, centre the lone S-meter */
.smeter-control-group.smeter-charts-hidden {
    justify-content: center;
}

.smeter-left {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

/* Position the toggle button absolutely inside .s-meter-container */
.s-meter-container {
    position: relative;
}

.smeter-charts-toggle-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 10;
    width: 20px;
    height: 20px;
    padding: 0;
    font-size: 10px;
    line-height: 1;
    background: rgba(0, 0, 0, 0.45);
    color: #ecf0f1;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.smeter-charts-toggle-btn:hover {
    background: rgba(52, 73, 94, 0.85);
}

.smeter-charts-panel {
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-content: center;
    flex: none; /* fixed size — no grow, no shrink */
}

.smeter-mini-chart-wrap {
    display: flex;
    flex-direction: column;
    gap: 1px;
    border-radius: 6px;
    overflow: hidden;
}

.smeter-mini-chart-title {
    font-size: 10px;
    color: #ecf0f1;
    text-align: center;
    font-weight: bold;
    line-height: 1.2;
    letter-spacing: 0.02em;
}

.smeter-mini-chart-wrap canvas {
    display: block;
    background: rgba(15, 25, 40, 0.75);
}

#s-meter-canvas {
    background: var(--panel-dark);
    border-radius: 6px 6px 0 0;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
    display: block;
}

.signal-meter-bar {
    position: absolute;
    height: 100%;
    width: 0%;
    background: linear-gradient(to right, #28a745 0%, #ffc107 50%, #dc3545 100%);
    transition: width 0.1s ease-out, background 0.3s ease-out;
    border-radius: 6px;
}

#signal-meter-value {
    min-width: 95px;
    text-align: left;
    transition: color 0.3s ease-out;
    font-family: 'Courier New', monospace;
    display: inline-block;
}

#signal-meter-value.flashing {
    animation: signal-flash 0.5s ease-in-out infinite;
}

/* Signal Meter LED mode */
.signal-meter-leds {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 16px;
    cursor: pointer;
}

.signal-meter-led {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #1a252f;
    border: 1px solid var(--panel-mid);
    transition: background 0.1s ease-out, box-shadow 0.1s ease-out;
    flex-shrink: 0;
}

@keyframes signal-flash {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.3;
    }
}

/* S-Meter Overload Flashing */
.s-meter-overload {
    animation: s-meter-overload-flash 0.5s ease-in-out infinite;
}

@keyframes s-meter-overload-flash {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.3;
    }
}


/* Audio Recorder Modal */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    backdrop-filter: blur(5px);
}

.modal-content {
    background: var(--panel-dark);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
}

.recorder-modal-content {
    max-width: 600px;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    border-bottom: 2px solid var(--panel-mid);
}

.modal-header h2 {
    margin: 0;
    color: var(--text-light);
    font-size: 1.5em;
}

.modal-close {
    background: transparent;
    border: none;
    color: var(--text-light);
    font-size: 2em;
    cursor: pointer;
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s;
}

.modal-close:hover {
    background: #e74c3c;
    transform: rotate(90deg);
}

.modal-body {
    padding: 25px;
}

/* Recorder Status */
.recorder-status {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: var(--panel-mid);
    border-radius: 8px;
    margin-bottom: 20px;
}

.recorder-status-indicator {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #95a5a6;
    transition: all 0.3s;
}

.recorder-status-indicator.recording {
    background: #e74c3c;
    animation: pulse-recording 1.5s ease-in-out infinite;
}

.recorder-status-indicator.stopped {
    background: #95a5a6;
}

@keyframes pulse-recording {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7);
    }
    50% {
        opacity: 0.7;
        box-shadow: 0 0 0 10px rgba(231, 76, 60, 0);
    }
}

#recorder-status-text {
    font-size: 1.1em;
    font-weight: bold;
    color: var(--text-light);
}

/* Recorder Time Display */
.recorder-time {
    text-align: center;
    padding: 20px;
    background: #1a252f;
    border-radius: 8px;
    margin-bottom: 20px;
}

#recording-time {
    font-size: 3em;
    font-weight: bold;
    color: #3498db;
    font-family: 'Courier New', monospace;
    letter-spacing: 0.1em;
}

/* Recorder Controls */
.recorder-controls {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.recorder-btn {
    flex: 1;
    padding: 15px 20px;
    border: none;
    border-radius: 8px;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.recorder-btn span {
    font-size: 1.2em;
}

.recorder-start-btn {
    background: #28a745;
    color: white;
}

.recorder-start-btn:hover:not(:disabled) {
    background: #218838;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4);
}

.recorder-stop-btn {
    background: #dc3545;
    color: white;
}

.recorder-stop-btn:hover:not(:disabled) {
    background: #c82333;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
}

.recorder-btn:disabled {
    background: #6c757d;
    color: #adb5bd;
    cursor: not-allowed;
    transform: none;
}

/* Recorder Actions */
.recorder-actions {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.recorder-download-btn {
    background: #007bff;
    color: white;
}

.recorder-download-btn:hover:not(:disabled) {
    background: #0056b3;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4);
}

.recorder-clear-btn {
    background: #ffc107;
    color: #333;
}

.recorder-clear-btn:hover:not(:disabled) {
    background: #e0a800;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.4);
}

/* Recorder Info */
.recorder-info {
    padding: 15px;
    background: var(--panel-mid);
    border-radius: 8px;
    border-left: 4px solid #3498db;
}

.recorder-info p {
    margin: 8px 0;
    color: var(--text-light);
    font-size: 0.9em;
    line-height: 1.5;
}

.recorder-info p:first-child {
    margin-top: 0;
}

.recorder-info p:last-child {
    margin-bottom: 0;
}

.recorder-info strong {
    color: #3498db;
}

/* Rec Button Styling */
#rec-btn {
    background-color: #dc3545;
    color: white;
    transition: all 0.3s;
}

#rec-btn:hover {
    background-color: #c82333;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
}

#rec-btn:active {
    transform: translateY(0);
}

/* Active Channels Panel */
.active-channels-panel {
    padding: 10px 30px 30px 30px;
    background: var(--page-bg);
    border-top: none;
    transform: scale(0.75);
    transform-origin: top center;
    margin-top: -20px;
    margin-bottom: -40px;
}

.active-channels-container {
    padding: 20px;
    background: var(--panel-mid);
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.active-channels-container h3 {
    margin: 0 0 20px 0;
    color: var(--text-light);
    font-size: 1.2em;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 10px;
}

.active-channels-container h3::before {
    content: "";
    font-size: 1.3em;
}

#active-channels-list {
    color: var(--text-light);
    background: var(--panel-dark);
    border-radius: 6px;
    padding: 15px;
    min-height: 100px;
    max-height: 280px;
    overflow-y: auto;
}

/* Custom scrollbar for active channels list */
#active-channels-list::-webkit-scrollbar {
    width: 10px;
}

#active-channels-list::-webkit-scrollbar-track {
    background: #1a252f;
    border-radius: 5px;
}

#active-channels-list::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-end) 100%);
    border-radius: 5px;
}

#active-channels-list::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, var(--accent-end) 0%, var(--accent) 100%);
}

#active-channels-list table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

#active-channels-list thead {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-end) 100%);
}

#active-channels-list th {
    text-align: left;
    padding: 12px 15px;
    color: white;
    font-weight: bold;
    font-size: 0.95em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#active-channels-list th:first-child {
    border-radius: 6px 0 0 0;
}

#active-channels-list th:last-child {
    border-radius: 0 6px 0 0;
}

#active-channels-list tbody tr {
    transition: all 0.3s ease;
}

#active-channels-list td {
    padding: 12px 15px;
    border-bottom: 1px solid var(--panel-mid);
    color: var(--text-light);
    font-size: 0.95em;
}

#active-channels-list tbody tr:last-child td {
    border-bottom: none;
}

#active-channels-list tbody tr:hover {
    background-color: rgba(102, 126, 234, 0.15);
}

/* Highlight current user row */
#active-channels-list tbody tr:first-child {
    background-color: rgba(40, 167, 69, 0.2);
    border-left: 4px solid #28a745;
}

#active-channels-list tbody tr:first-child td {
    font-weight: bold;
    color: #a8e6cf;
}


/* Empty state styling */
#active-channels-list p {
    text-align: center;
    padding: 30px;
    color: #95a5a6;
    font-style: italic;
    font-size: 1em;
}

/* Error state styling */
#active-channels-list p[style*="color: #dc3545"] {
    color: #e74c3c !important;
    font-weight: bold;
    font-style: normal;
}

/* Decoder Extension Panels */
.decoder-extension-panel {
    padding: 0;
    background: var(--page-bg);
    border-top: none;
    transform: scale(0.75);
    transform-origin: top center;
    margin-top: 20px;
    margin-bottom: -100px;
}

.decoder-extension-container {
    padding: 15px 20px;
    background: var(--panel-dark);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    min-height: 400px;
}

.decoder-extension-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--panel-mid);
}

.decoder-extension-header h3 {
    margin: 0;
    color: var(--text-light);
    font-size: 1.2em;
    font-weight: bold;
}

.decoder-header-buttons {
    display: flex;
    gap: 8px;
    align-items: center;
}

.decoder-close-btn {
    background: #e74c3c;
    color: white;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 1.5em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    padding: 0;
    line-height: 1;
}

.decoder-close-btn:hover {
    background: #c0392b;
    transform: rotate(90deg);
}

.decoder-extension-content {
    color: var(--text-light);
    background: var(--panel-mid);
    border-radius: 6px 6px 0 0;
    padding: 15px;
    min-height: 400px;
    max-height: 400px;
    overflow-y: auto;
    transition: max-height 0.1s ease-out;
}

/* Resize Handle for Extension Panel */
.decoder-extension-resize-handle {
    height: 18px;
    background: var(--panel-dark);
    border-radius: 0 0 6px 6px;
    cursor: ns-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.2s ease;
    user-select: none;
    position: relative;
}

.decoder-extension-resize-handle:hover {
    background: var(--panel-mid);
}

.decoder-extension-resize-handle:active {
    background: #3d566e;
}

.resize-handle-bar {
    width: 40px;
    height: 3px;
    background: #7f8c8d;
    border-radius: 2px;
    pointer-events: none;
    transition: background 0.2s ease, width 0.2s ease;
}

.decoder-extension-resize-handle:hover .resize-handle-bar {
    width: 80px;
    background: #95a5a6;
}

.decoder-extension-resize-handle:active .resize-handle-bar {
    background: var(--accent);
}

.resize-handle-hint {
    position: absolute;
    right: 12px;
    font-size: 9px;
    color: transparent;
    letter-spacing: 0.05em;
    pointer-events: none;
    transition: color 0.2s ease;
    user-select: none;
    white-space: nowrap;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.decoder-extension-resize-handle:hover .resize-handle-hint {
    color: #95a5a6;
}

/* When resizing, add a class to show visual feedback */
.decoder-extension-container.resizing {
    user-select: none;
}

.decoder-extension-container.resizing .decoder-extension-content {
    transition: none;
}

/* Custom scrollbar for decoder extension content */
.decoder-extension-content::-webkit-scrollbar {
    width: 8px;
}

.decoder-extension-content::-webkit-scrollbar-track {
    background: var(--panel-dark);
    border-radius: 4px;
}

.decoder-extension-content::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: 4px;
}

.decoder-extension-content::-webkit-scrollbar-thumb:hover {
    background: #5568d3;
}


/* Decoder Extension Modal Button */
.decoder-modal-btn {
    background: #3498db;
    color: white;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 1.3em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    padding: 0;
    line-height: 1;
}

.decoder-modal-btn:hover {
    background: #2980b9;
    transform: scale(1.1);
}

/* Decoder Extension Modal Overlay */
.decoder-extension-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(5px);
}

.decoder-extension-modal.show {
    display: flex;
}

.decoder-extension-modal-content {
    background: var(--panel-dark);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    width: 90%;
    height: 90%;
    max-width: 1400px;
    max-height: 900px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.decoder-extension-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    border-bottom: 2px solid var(--panel-mid);
    background: var(--panel-mid);
}

.decoder-extension-modal-header h2 {
    margin: 0;
    color: var(--text-light);
    font-size: 1.5em;
}

.decoder-extension-modal-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.decoder-extension-modal-zoom {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--panel-dark);
    border-radius: 6px;
}

.decoder-extension-modal-zoom-btn {
    background: #3498db;
    border: none;
    color: white;
    font-size: 1.2em;
    font-weight: bold;
    cursor: pointer;
    padding: 4px 10px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.3s;
    line-height: 1;
}

.decoder-extension-modal-zoom-btn:hover {
    background: #2980b9;
    transform: scale(1.1);
}

.decoder-extension-modal-zoom-btn:active {
    transform: scale(0.95);
}

.decoder-extension-modal-zoom-display {
    color: var(--text-light);
    font-weight: bold;
    font-size: 0.95em;
    min-width: 45px;
    text-align: center;
}

.decoder-extension-modal-close {
    background: #e74c3c;
    border: none;
    color: white;
    font-size: 2em;
    cursor: pointer;
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s;
}

.decoder-extension-modal-close:hover {
    background: #c0392b;
    transform: rotate(90deg);
}

.decoder-extension-modal-body {
    flex: 1;
    padding: 25px;
    overflow-y: auto;
    background: var(--panel-mid);
}

/* Modal content wrapper for zoom transform */
.modal-content-wrapper {
    transform-origin: top center;
    transition: transform 0.3s ease;
}

/* Custom scrollbar for modal body */
.decoder-extension-modal-body::-webkit-scrollbar {
    width: 10px;
}

.decoder-extension-modal-body::-webkit-scrollbar-track {
    background: var(--panel-dark);
    border-radius: 5px;
}

.decoder-extension-modal-body::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: 5px;
}

.decoder-extension-modal-body::-webkit-scrollbar-thumb:hover {
    background: #5568d3;
}

/* Leaflet Tooltip Line Height Fix */
.leaflet-tooltip {
    line-height: 1.2 !important;
}

.leaflet-tooltip br {
    line-height: 1.2 !important;
}

/* Buffer Configuration Modal Button Styles */
.buffer-preset-btn.active {
    background: #28a745 !important;
    border-color: #28a745 !important;
    color: white !important;
    box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
}

.buffer-preset-btn:hover {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
}

/* VFO A/B Toggle Switch */
.vfo-toggle {
    position: relative;
    width: 70px;
    height: 32px;
    background: var(--panel-mid);
    border-radius: 16px;
    cursor: pointer;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    border: 2px solid var(--panel-dark);
    flex-shrink: 0;
}

.vfo-toggle:hover {
    border-color: var(--accent);
    box-shadow: 0 0 8px rgba(102, 126, 234, 0.4), inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.vfo-toggle-slider {
    position: relative;
    width: 100%;
    height: 100%;
}

.vfo-toggle-slider::before {
    content: '';
    position: absolute;
    width: 32px;
    height: 26px;
    background: linear-gradient(135deg, #28a745 0%, #218838 100%);
    border-radius: 13px;
    left: 2px;
    top: 2px;
    transition: transform 0.3s ease, background 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    z-index: 1;
}

.vfo-toggle.vfo-b .vfo-toggle-slider::before {
    transform: translateX(34px);
    background: linear-gradient(135deg, #FF9800 0%, #F57C00 100%);
}

.vfo-label {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    font-weight: bold;
    font-size: 0.9em;
    color: #95a5a6;
    transition: all 0.3s ease;
    user-select: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    width: 32px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vfo-label-a {
    left: 2px;
}

.vfo-label-b {
    left: 36px;
}

.vfo-label.active {
    color: white;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
}

/* ── RMNoise button group (RMN + cog) ───────────────────────────────────────── */

.rmn-btn-group {
    display: inline-flex;
    gap: 0;
    vertical-align: middle;
}

.rmn-btn-group button {
    border: none;
    border-radius: 0;
    margin: 0;
    cursor: pointer;
    color: #fff;
    font-weight: 600;
    transition: filter 0.15s;
}

.rmn-btn-group button:first-child {
    border-radius: 4px 0 0 4px;
}

.rmn-btn-group button:last-child {
    border-radius: 0 4px 4px 0;
}

.rmn-btn-group button:hover {
    filter: brightness(1.2);
}

#rmn-cog-btn {
    opacity: 0.75;
}

#rmn-cog-btn:hover {
    opacity: 1;
}

/* ── RMNoise AI Denoising Modal ─────────────────────────────────────────────── */

.rmnoise-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rmnoise-modal-panel {
    background: #1e2530;
    border: 1px solid #3a4555;
    border-radius: 8px;
    width: 560px;
    max-width: 95vw;
    max-height: 95vh;
    overflow-x: hidden;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    color: #cdd6e0;
    font-size: 13px;
}

.rmnoise-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #252d3a;
    border-bottom: 1px solid #3a4555;
    border-radius: 8px 8px 0 0;
    font-size: 14px;
    font-weight: 600;
    color: #e0e8f0;
}

.rmnoise-modal-close {
    background: none;
    border: none;
    color: #888;
    font-size: 16px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    line-height: 1;
}

.rmnoise-modal-close:hover {
    background: #3a4555;
    color: #e0e8f0;
}

.rmnoise-section {
    padding: 12px 16px;
    border-bottom: 1px solid #2a3340;
}

.rmnoise-section:last-child {
    border-bottom: none;
}

.rmnoise-section-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #7a8fa8;
    margin-bottom: 8px;
}

.rmnoise-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.rmnoise-row:last-child {
    margin-bottom: 0;
}

.rmnoise-row-enable {
    gap: 16px;
}

.rmnoise-label {
    width: 52px;
    flex-shrink: 0;
    color: #8a9ab0;
    font-size: 12px;
}

.rmnoise-input {
    flex: 1;
    background: #141a22;
    border: 1px solid #3a4555;
    border-radius: 4px;
    color: #cdd6e0;
    padding: 5px 8px;
    font-size: 12px;
    outline: none;
}

.rmnoise-input:focus {
    border-color: #6f42c1;
}

.rmnoise-select {
    flex: 1;
    background: #141a22;
    border: 1px solid #3a4555;
    border-radius: 4px;
    color: #cdd6e0;
    padding: 5px 8px;
    font-size: 12px;
    outline: none;
}

.rmnoise-select:focus {
    border-color: #6f42c1;
}

.rmnoise-btn {
    background: #2a3340;
    border: 1px solid #3a4555;
    border-radius: 4px;
    color: #cdd6e0;
    padding: 5px 12px;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
}

.rmnoise-btn:hover {
    background: #3a4555;
}

.rmnoise-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.rmnoise-btn-save {
    background: #1a3a5c;
    border-color: #2a5a8c;
    color: #7ab8f5;
}

.rmnoise-btn-save:hover {
    background: #2a4a6c;
}

.rmnoise-btn-original {
    background: #2a2a3a;
    border-color: #4a4a6a;
    color: #aaa;
    min-width: 72px;
}

.rmnoise-btn-original:not(:disabled):hover {
    background: #3a3a4a;
}

.rmnoise-register-note {
    font-size: 11px;
    color: #7a8fa8;
}

.rmnoise-register-note a {
    color: #6aabf7;
    text-decoration: none;
}

.rmnoise-register-note a:hover {
    text-decoration: underline;
}

.rmnoise-checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
}

.rmnoise-status-text {
    font-size: 12px;
    font-weight: 500;
}

.rmnoise-status-label {
    font-size: 11px;
    color: #28a745;
}

.rmnoise-stats-row {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 8px;
    font-size: 12px;
}

.rmnoise-stat-label {
    color: #7a8fa8;
}

.rmnoise-stat-value {
    color: #cdd6e0;
    min-width: 60px;
}

.rmnoise-jitter-bar-track {
    height: 8px;
    background: #141a22;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #2a3340;
}

.rmnoise-jitter-bar-fill {
    height: 100%;
    width: 0%;
    background: #28a745;
    border-radius: 4px;
    transition: width 0.3s ease, background-color 0.3s ease;
}

.rmnoise-section-log {
    padding-bottom: 8px;
}

.rmnoise-log {
    background: #141a22;
    border: 1px solid #2a3340;
    border-radius: 4px;
    padding: 6px 8px;
    max-height: 80px;
    overflow-x: hidden;
    overflow-y: auto;
    font-family: monospace;
    font-size: 11px;
    color: #7a9ab8;
    line-height: 1.5;
    word-break: break-all;
    overflow-wrap: break-word;
}

/* =============================================================================
   Controls Dock Feature
   When docked, .controls and .audio-controls are wrapped in a
   #dock-overlay-wrapper div that is moved inside .spectrum-display-container
   as an absolute overlay at the top of the waterfall canvas.
   ============================================================================= */

/* Dock button active (docked) state */
#dock-controls-button.active {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.35) 0%, rgba(118, 75, 162, 0.35) 100%);
    border-color: #667eea;
    color: #fff;
}

/* Wrapper that holds .band-status-bar, .controls and .audio-controls when docked.
   Uses position:fixed so it is positioned relative to the viewport,
   not the waterfall container — this avoids all issues with transform:scale()
   on the children affecting layout calculations.
   top/left/width are set via inline style by JS (_dockPositionWrapper).
   The wrapper is appended to <body> so it is never clipped by any ancestor.
   Background is fully transparent so the waterfall is completely visible.
   pointer-events:none on the wrapper means clicks pass through the transparent
   gaps to the waterfall canvas; pointer-events:auto is restored on the actual
   interactive child elements so buttons/inputs/selects still work. */
#dock-overlay-wrapper {
    position: fixed;
    z-index: 800; /* below chat-panel and rotator-panel (z-index:900) so they render on top */
    /* More transparent than .spectrum-display-controls (rgba(44,62,80,0.65)) so the
       waterfall is visible behind the controls, but not fully transparent. */
    background: rgba(44, 62, 80, var(--controls-opacity));
    overflow: hidden;
    max-height: 80vh;
    overflow-y: auto;
    pointer-events: none;
}

/* Restore pointer events on all interactive children */
#dock-overlay-wrapper button,
#dock-overlay-wrapper input,
#dock-overlay-wrapper select,
#dock-overlay-wrapper label,
#dock-overlay-wrapper .band-status-badge,
#dock-overlay-wrapper .voice-activity-button,
#dock-overlay-wrapper .tts-announce-button,
#dock-overlay-wrapper .freq-readout-display,
#dock-overlay-wrapper .freq-digit,
#dock-overlay-wrapper .tuning-wheel,
#dock-overlay-wrapper .s-meter-container,
#dock-overlay-wrapper .smeter-charts-panel,
#dock-overlay-wrapper canvas,
#dock-overlay-wrapper #snr-squelch-value,
#dock-overlay-wrapper #squelch-value {
    pointer-events: auto;
}

/* Inside the overlay wrapper, reset the margins that were tuned for the
   normal page-flow position below the waterfall, and make all backgrounds
   transparent so the waterfall is fully visible behind the overlay.
   NOTE: .controls and .audio-controls already have transform:scale(0.75) from
   their main CSS rules — do NOT re-apply it here or it will double-scale. */
#dock-overlay-wrapper .controls {
    margin-top: 0;
    margin-bottom: -60px; /* compensate for scale(0.75) height shrinkage */
    padding-top: 0;
    background: transparent;
}

#dock-overlay-wrapper .audio-controls {
    margin-top: -70px; /* close gap after scaled .controls */
    margin-bottom: -10px;
    padding-bottom: 4px;
    background: transparent;
}

/* Band status bar inside the overlay — minimal padding to reduce gap */
#dock-overlay-wrapper .band-status-bar {
    background: transparent;
    padding: 2px 30px 0;
}

#dock-overlay-wrapper .band-status-container {
    padding: 2px 15px 0;
}

/* All text inside the overlay: force white with a dark shadow so it's
   readable against any waterfall colour.
   Exclude .freq-digit and .freq-separator (green LED readout) and
   .freq-unit-label which have their own intentional colours. */
#dock-overlay-wrapper label,
#dock-overlay-wrapper p,
#dock-overlay-wrapper .control-group label,
#dock-overlay-wrapper span:not(.freq-digit):not(.freq-separator):not(.freq-unit-label):not(.frequency-unit) {
    color: #ecf0f1 !important;
    text-shadow:
        0 0 4px rgba(0, 0, 0, 0.95),
        0 1px 3px rgba(0, 0, 0, 0.85),
        0 -1px 3px rgba(0, 0, 0, 0.85);
}

/* S-meter: all 4 elements (needle canvas, readout bar, 2 history charts) — more transparent */
#dock-overlay-wrapper #s-meter-canvas {
    background: rgba(15, 25, 40, 0.45) !important;
}

/* S-meter readout bar below the canvas — id selector beats inline style */
#dock-overlay-wrapper #s-meter-readout-bar {
    background: rgba(15, 25, 40, 0.45) !important;
    border-radius: 0 0 4px 4px;
}

/* Mini history chart canvases — reduce from base 0.75 to match the needle */
#dock-overlay-wrapper .smeter-mini-chart-wrap canvas {
    background: rgba(15, 25, 40, 0.45) !important;
}

/* Compact VU meter bar (next to REC button) — semi-transparent when docked */
#dock-overlay-wrapper #vu-meter-compact .vu-meter {
    background: rgba(15, 25, 40, 0.45) !important;
}

/* VU meter coloured bar and peak marker — JS sets inline background gradient,
   so use opacity to make them semi-transparent without overriding the gradient */
#dock-overlay-wrapper #vu-meter-bar-compact,
#dock-overlay-wrapper #vu-meter-peak-compact,
#dock-overlay-wrapper #vu-meter-leds-compact {
    opacity: 0.55;
}