:root {
    color-scheme: dark;
    --bg: #060a08;
    --panel: rgba(10, 18, 14, 0.88);
    --panel-border: rgba(57, 255, 136, 0.18);
    --accent: #39ff88;
    --accent-dim: rgba(57, 255, 136, 0.35);
    --accent2: #ffb454;
    --text: #d6f5e3;
    --muted: #6f9684;
    --offline: #45524c;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

body {
    font-family: 'Share Tech Mono', 'Consolas', monospace;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
}

/* Waterfall canvas background */
#waterfall {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    z-index: -2;
    opacity: 0.55;
}

#waterfall-shade {
    position: fixed;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(6,10,8,0.55) 0%, rgba(6,10,8,0.85) 60%, rgba(6,10,8,0.97) 100%);
}

/* Layout */
header.site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 32px;
    background: rgba(6, 10, 8, 0.75);
    border-bottom: 1px solid var(--panel-border);
    backdrop-filter: blur(6px);
    flex-wrap: wrap;
    gap: 12px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.3em;
    letter-spacing: 3px;
    color: var(--accent);
    text-shadow: 0 0 12px var(--accent-dim);
}

.brand .snake {
    font-size: 1.4em;
}

.utc-clock {
    color: var(--muted);
    font-size: 0.95em;
    letter-spacing: 1px;
    white-space: nowrap;
}

nav a {
    color: var(--text);
    text-decoration: none;
    margin-left: 24px;
    letter-spacing: 1px;
    font-size: 0.95em;
    transition: color 0.2s, text-shadow 0.2s;
}

nav a:hover {
    color: var(--accent);
    text-shadow: 0 0 8px var(--accent-dim);
}

nav a.active {
    color: var(--accent);
    text-shadow: 0 0 8px var(--accent-dim);
    border-bottom: 1px solid var(--accent);
}

.nav-popout-btn {
    background: rgba(57,255,136,0.06);
    border: 1px solid rgba(57,255,136,0.22);
    color: var(--muted);
    font-family: inherit;
    font-size: 0.78rem;
    cursor: pointer;
    margin-left: 10px;
    padding: 4px 11px;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: 0.03em;
}
.nav-popout-btn:hover {
    color: var(--accent);
    background: rgba(57,255,136,0.13);
    border-color: rgba(57,255,136,0.42);
}

/* FT8 SNR colour coding: amber = hot (>+10 dB), dim = very weak (<-24 dB) */
.snr-strong { color: var(--amber); }
.snr-weak   { color: var(--muted); }

main {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px 80px;
}

/* Hero */
.hero {
    text-align: center;
    padding: 90px 20px 60px;
}

.hero h1 {
    font-size: 3.4em;
    margin: 0;
    letter-spacing: 8px;
    text-transform: uppercase;
    color: #ffffff;
    animation: glow 2.4s ease-in-out infinite alternate;
}

@keyframes glow {
    from { text-shadow: 0 0 10px var(--accent-dim), 0 0 24px rgba(57,255,136,0.15); }
    to   { text-shadow: 0 0 22px var(--accent), 0 0 46px rgba(57,255,136,0.35); }
}

.hero .subtitle {
    margin-top: 14px;
    font-size: 1.15em;
    color: var(--accent2);
    letter-spacing: 2px;
}

.hero .tagline {
    max-width: 640px;
    margin: 26px auto 0;
    color: var(--muted);
    font-size: 1em;
}

.hero .cta {
    margin-top: 38px;
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 12px 28px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 1px;
    border: 1px solid var(--accent);
    color: var(--accent);
    background: rgba(57, 255, 136, 0.06);
    transition: all 0.2s;
}

/* `.btn { display: inline-block }` overrides the UA `[hidden]` rule, so the
   hidden attribute is ignored on buttons — restore it explicitly. */
.btn[hidden] {
    display: none;
}

.btn:hover {
    background: var(--accent);
    color: #06120a;
    box-shadow: 0 0 18px var(--accent-dim);
}

/* Red-triangle EMERGENCY STOP — kills all TX immediately. Deliberately loud. */
.estop-btn {
    padding: 8px 16px;
    border-radius: 4px;
    font-weight: 800;
    letter-spacing: 1px;
    font-family: inherit;
    cursor: pointer;
    border: 2px solid #ff3b3b;
    color: #ff5a5a;
    background: rgba(255, 59, 59, 0.10);
    text-transform: uppercase;
    transition: all 0.15s;
}
.estop-btn:hover {
    background: #ff3b3b;
    color: #160606;
    box-shadow: 0 0 22px rgba(255, 59, 59, 0.8);
}
.estop-btn.firing {
    background: #ff3b3b;
    color: #160606;
    animation: estop-flash 0.4s steps(2) infinite;
}
@keyframes estop-flash { 50% { opacity: 0.45; } }

.btn-wee {
    padding: 4px 10px;
    font-size: 0.8em;
    cursor: pointer;
    letter-spacing: 0.5px;
}

.btn-wee.active {
    background: var(--accent);
    color: #06120a;
}

/* Voice QSO announcer toggle (🔈/🔇) — see js/voice-announcer.js */
.voice-toggle {
    line-height: 1;
    font-size: 1em;
}
.voice-toggle:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Neon "running" states - sweeping/decoding in progress */
.btn-wee.neon-orange {
    background: rgba(255, 180, 84, 0.12);
    border-color: var(--accent2);
    color: var(--accent2);
    animation: neon-pulse 1.2s ease-in-out infinite;
}

.btn-wee.neon-cyan {
    background: rgba(57, 197, 255, 0.12);
    border-color: #39c5ff;
    color: #39c5ff;
    animation: neon-pulse 1.2s ease-in-out infinite;
}

@keyframes neon-pulse {
    0%, 100% { box-shadow: 0 0 6px currentColor, 0 0 14px currentColor; }
    50% { box-shadow: 0 0 14px currentColor, 0 0 30px currentColor; }
}

.btn.disabled {
    border-color: var(--offline);
    color: var(--muted);
    background: transparent;
    cursor: not-allowed;
    pointer-events: none;
}

/* Login panel (main page) */
.login-panel {
    max-width: 340px;
    margin: 24px auto 0;
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    padding: 22px;
    text-align: left;
}

.login-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.login-row:last-child {
    margin-bottom: 0;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.login-row label {
    color: var(--muted);
    font-size: 0.9em;
}

.login-row input {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    color: var(--text);
    font-family: inherit;
    font-size: 1em;
    padding: 8px 10px;
}

.login-row input:focus {
    outline: none;
    border-color: var(--accent);
}

.login-row button.btn {
    cursor: pointer;
    background: rgba(57, 255, 136, 0.06);
}

.login-welcome {
    max-width: 340px;
    margin: 24px auto 0;
    text-align: center;
}

.login-welcome p {
    color: var(--text);
    margin-bottom: 14px;
}

/* Sections */
section {
    margin-top: 70px;
}

section h2 {
    font-size: 1.6em;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--accent);
    border-bottom: 1px solid var(--panel-border);
    padding-bottom: 10px;
    margin-bottom: 28px;
    text-shadow: 0 0 10px var(--accent-dim);
}

section .lead {
    color: var(--muted);
    margin-bottom: 30px;
    max-width: 760px;
}

/* Station cards */
.stations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.station-card {
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    padding: 22px;
    transition: transform 0.25s, box-shadow 0.25s;
}

.station-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(57, 255, 136, 0.12);
}

.station-card h3 {
    margin: 0 0 6px;
    color: #fff;
    font-size: 1.2em;
}

.station-meta {
    color: var(--muted);
    font-size: 0.9em;
    margin-bottom: 14px;
}

.status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85em;
    letter-spacing: 1px;
    color: var(--muted);
    text-transform: uppercase;
}

.status .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--offline);
    box-shadow: 0 0 0 rgba(57,255,136,0);
}

.status.online .dot {
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent);
    animation: pulse 1.6s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

/* Logbook panel */
.panel {
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    padding: 28px;
}

.panel p { color: var(--text); }
.panel .note { color: var(--muted); font-size: 0.9em; margin-top: 14px; }

/* Tune control */
.tune-control {
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.tune-control label {
    color: var(--muted);
    font-size: 0.9em;
}

.tune-control input[type="number"] {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    color: var(--text);
    font-family: inherit;
    font-size: 1em;
    padding: 8px 10px;
    width: 130px;
}

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

.tune-control select {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    color: var(--text);
    font-family: inherit;
    font-size: 1em;
    padding: 8px 10px;
}

.tune-control select:focus {
    outline: none;
    border-color: var(--accent);
}

.tune-control .btn {
    padding: 8px 20px;
    cursor: pointer;
    background: rgba(57, 255, 136, 0.06);
}

.tune-control #tune-result {
    color: var(--accent2);
    font-size: 0.9em;
}

/* Waterfall toolbar (zoom) */
.waterfall-toolbar {
    margin-top: 20px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;       /* let buttons flow to a second row instead of overflowing off-screen */
    gap: 10px;
}

.waterfall-toolbar label {
    color: var(--muted);
    font-size: 0.9em;
}

.waterfall-toolbar select {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    color: var(--text);
    font-family: inherit;
    font-size: 1em;
    padding: 8px 10px;
}

.waterfall-toolbar select:focus {
    outline: none;
    border-color: var(--accent);
}

.waterfall-toolbar .btn {
    padding: 7px 12px;
    cursor: pointer;
    background: rgba(57, 255, 136, 0.06);
}

/* Pack everything left and let it wrap into tidy rows. (The old margin-left:auto
   "push-right" spacers fought flex-wrap and shoved Reset/Display off the edge,
   especially in the narrower digimode receiver view.) */
.waterfall-toolbar .toolbar-right {
    margin-left: 0;
}

/* Panadapter display-settings popover (SmartSDR-style ⚙ Display) */
.wf-display-wrap {
    position: relative;
}

/* "⋯ More" overflow menu — secondary toolbar controls, stacked vertically */
.wf-more-wrap { position: relative; }
.wf-more-popover { width: 200px; padding: 8px; }
.wf-more-popover .btn { display: block; width: 100%; margin: 0 0 6px; text-align: left; }
.wf-more-popover .club-callsign-label { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.wf-more-popover .callsign-input { width: 100%; margin-top: 6px; }
.wf-display-popover {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 40;
    width: 230px;
    background: #0c1118;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.6);
    padding: 10px 12px 12px;
}
.wf-display-popover[hidden] { display: none; }
.wf-disp-title {
    color: var(--accent);
    font-size: 0.78em;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 6px;
}
.wf-disp-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 7px 0;
    color: var(--text) !important;
    font-size: 0.82em !important;
}
.wf-disp-row > span:first-child {
    flex: 0 0 64px;
    color: var(--muted);
}
.wf-disp-row input[type="range"] {
    flex: 1 1 auto;
    accent-color: var(--accent);
    min-width: 0;
}
.wf-disp-row input[type="range"]:disabled { opacity: 0.4; }
.wf-disp-val {
    flex: 0 0 30px;
    text-align: right;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}
.wf-disp-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    color: var(--muted);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.92em;
    padding: 3px 12px;
}
.wf-disp-btn.on {
    background: rgba(57, 255, 136, 0.16);
    border-color: var(--accent);
    color: var(--accent);
}
.wf-disp-toggle { justify-content: space-between; }

/* Spectrum (panadapter) line graph above the waterfall */
.spectrum-wrap {
    position: relative;
    margin-top: 4px;
}

.spectrum-panel {
    display: block;
    width: 100%;
    height: 70px;
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    background: #000;
}

.spectrum-cursor {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;
    pointer-events: none;
}

/* S-meter (signal strength) gauge */
.smeter-wrap {
    margin-top: 14px;
}

.smeter-bar-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.smeter-gauge {
    display: block;
    flex: 1;
    width: 100%;
    height: 22px;
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    background: #000;
}

.smeter-readout {
    flex-shrink: 0;
    min-width: 130px;
    text-align: right;
    color: var(--accent2);
    font-size: 0.85em;
    letter-spacing: 1px;
}

.smeter-scale {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    padding: 0 2px;
    color: var(--muted);
    font-size: 0.7em;
    letter-spacing: 1px;
}

/* TX meters (power/SWR/ALC/mic) */
.tx-meter-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 10px;
}

.tx-meter-item {
    flex: 1;
    min-width: 110px;
}

.tx-meter-label {
    color: var(--muted);
    font-size: 0.7em;
    letter-spacing: 1px;
    margin-bottom: 2px;
}

.tx-meter-gauge {
    display: block;
    width: 100%;
    height: 14px;
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    background: #000;
}

.tx-meter-readout {
    margin-top: 2px;
    color: var(--accent2);
    font-size: 0.8em;
    letter-spacing: 1px;
}

/* Frequency axis above the waterfall */
.waterfall-freq-axis {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    padding: 0 2px;
    color: var(--accent);
    font-size: 0.82em;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 6px rgba(57, 255, 136, 0.35);
    cursor: grab;
    user-select: none;
}
.waterfall-freq-axis span::after { content: ' MHz'; opacity: 0.4; font-size: 0.8em; }
.waterfall-freq-axis span:not(:first-child)::after { content: ''; }

/* Dedicated live waterfall panel */
.waterfall-wrap {
    position: relative;
    margin-top: 4px;
}

.waterfall-panel {
    display: block;
    width: 100%;
    height: 180px;
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    background: #000;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    cursor: crosshair;
}

.waterfall-cursor {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 180px;
    pointer-events: none;
}

/* Below-waterfall controls: QSO auto-record + circular PTT */
.below-waterfall {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px;
    margin-top: 16px;
}

/* Auto bot log drops onto its own line below the record control (down) and
   sits left-aligned (user 2026-06-20: "move it down and to the left a bit"). */
.below-waterfall .ft8-bot-log {
    flex: 1 1 100%;
    min-width: 280px;
    margin: 10px 0 0 0;
    max-height: 190px;
}

.qso-record-control {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.qso-record-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 0.9em;
    cursor: pointer;
}

.qso-record-label input[type="checkbox"] {
    accent-color: var(--accent);
}

.recording-indicator {
    color: #ff4d4d;
    font-size: 0.85em;
    letter-spacing: 1px;
    animation: tx-pulse 1s ease-in-out infinite;
}

.ptt-stack {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.ptt-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    background: rgba(57, 255, 136, 0.06);
    border: 1px solid var(--panel-border);
    flex-shrink: 0;
}

.ptt-circle .mic-icon {
    width: 22px;
    height: 22px;
    fill: var(--text);
}

.ptt-circle.rx-active {
    background: rgba(57, 255, 136, 0.15);
    border-color: var(--accent);
    box-shadow: 0 0 14px rgba(57, 255, 136, 0.6);
}

.ptt-circle.rx-active .mic-icon {
    fill: var(--accent);
}

.ptt-circle.on-air {
    background: #ff4632;
    border-color: #ff4632;
    box-shadow: 0 0 18px rgba(255, 70, 50, 0.6);
    animation: tx-pulse 1s ease-in-out infinite;
}

.ptt-circle.on-air .mic-icon {
    fill: #06120a;
}

.ptt-circle.disabled,
.ptt-circle:disabled {
    border-color: var(--offline);
    background: transparent;
    cursor: not-allowed;
    animation: none;
}

.ptt-circle.disabled .mic-icon,
.ptt-circle:disabled .mic-icon {
    fill: var(--muted);
}

.name-input {
    width: 110px;
    font-family: inherit;
    font-size: .82em;
    padding: 6px 8px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    color: var(--text);
}
.name-input:focus { outline: none; border-color: var(--accent); }
.name-input::placeholder { color: var(--muted); font-style: italic; }

.callsign-input {
    width: 140px;
    text-align: center;
    text-transform: uppercase;
    font-family: inherit;
    font-size: 1.1em;
    letter-spacing: 1px;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    color: var(--text);
}

.callsign-input:focus {
    outline: none;
    border-color: var(--accent);
}

.callsign-input::placeholder {
    color: var(--muted);
}

.signal-report-control {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-size: 0.85em;
}

.signal-report-control select {
    font-family: inherit;
    font-size: 1em;
    padding: 6px 4px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    color: var(--text);
}

.club-callsign-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 0.85em;
    cursor: pointer;
    text-align: center;
}

.club-callsign-label input[type="checkbox"] {
    accent-color: var(--accent);
}

.swl-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 0.85em;
    cursor: pointer;
}

.swl-label input[type="checkbox"] {
    accent-color: var(--accent);
}

.gain-control .swl-label {
    flex-basis: 100%;
}

/* Floating CW/RTTY decode window */
.decode-window {
    position: fixed;
    right: 16px;
    bottom: 16px;
    width: 320px;
    max-width: calc(100vw - 32px);
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
    z-index: 50;
    overflow: hidden;
}

.decode-window-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--panel-border);
    font-size: 0.85em;
    color: var(--text);
}

.decode-window-header #decode-window-title {
    font-weight: 600;
    letter-spacing: 1px;
}

.decode-window-wpm {
    color: var(--muted);
    font-size: 0.85em;
}

.decode-window-actions {
    margin-left: auto;
    display: flex;
    gap: 4px;
}

.decode-save-status {
    padding: 0 10px;
    font-size: 0.8em;
    color: var(--accent);
    min-height: 0;
}

.decode-save-status:empty {
    display: none;
}

.decode-window-text {
    margin: 0;
    padding: 10px;
    max-height: 200px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.95em;
    color: var(--accent);
}

.decode-window-history {
    max-height: 240px;
    overflow-y: auto;
    padding: 4px 10px 10px;
    font-size: 0.8em;
    color: var(--text);
}

.decode-window-history-item {
    padding: 6px 0;
    border-bottom: 1px solid var(--panel-border);
}

.decode-window-history-item:last-child {
    border-bottom: none;
}

.decode-window-history-meta {
    color: var(--muted);
    font-size: 0.85em;
    margin-bottom: 2px;
}

.decode-window-history-text {
    font-family: 'Share Tech Mono', monospace;
    word-break: break-word;
}

/* ── Receiver-page four-column layout ─────────────────────────────────────
   [ Roster | Activity | Receiver+Waterfall (centre) | FT8 TX ]
   Side panels are fixed full-height docks sized in vw so all four fit on one
   screen; the centre #live content gets margins (via :has()) matching whichever
   docks are open, so the receiver/waterfall is never hidden behind a panel. */
:root {
    --ft8-side: 17vw;   /* Roster / Activity column width */
    --ft8-tx:   21vw;   /* FT8 TX column width */
}

/* FT8 activity panel — second column */
.ft8-window {
    position: fixed;
    left: 0;
    top: var(--header-h, 72px);
    bottom: 0;
    width: var(--ft8-side);
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-left: none;
    border-radius: 0 8px 8px 0;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.6);
    z-index: 50;
    overflow: hidden;
}

.ft8-window:not([hidden]) {
    display: flex;
    flex-direction: column;
}

/* Roster = LEFTMOST column; Activity sits to its right (swapped per operator),
   so the left dock reads: aggregated roster | raw message stream. */
/* Left edge of the docks sits just right of the nav sidebar (position:fixed
   escapes the body's nav margin, so offset by --cobras-nav-w explicitly; it
   tracks the collapsed/expanded sidebar automatically). */
#ft8-roster-window {
    left: var(--cobras-nav-w, 0);
    width: var(--ft8-side);
    border-left: none;
    border-radius: 0 8px 8px 0;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.6);
    z-index: 50;
}
#ft8-window {
    left: calc(var(--cobras-nav-w, 0) + var(--ft8-side));
    width: var(--ft8-side);
    border-radius: 0;
    z-index: 49;
}
/* If the roster is closed, Activity slides to the nav edge (no empty gap). */
main:not(:has(#ft8-roster-window:not([hidden]))) #ft8-window { left: var(--cobras-nav-w, 0); }

.ft8-spots {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.ft8-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.82em;
    color: var(--text);
}

.ft8-table th {
    padding: 4px 8px;
    text-align: left;
    color: var(--muted);
    font-size: 0.85em;
    border-bottom: 1px solid var(--panel-border);
    position: sticky;
    top: 0;
    background: var(--panel);
}

.ft8-table td {
    padding: 3px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.ft8-table td:last-child {
    color: var(--accent);
}

.ft8-table tr.ft8-cq td,
.ft8-table tr.ft8-cq td:last-child {
    color: #ff9a3c;
}

.ft8-table tr.ft8-calling-us td,
.ft8-table tr.ft8-calling-us td:last-child {
    color: #ffe34d;
    font-weight: bold;
}

.ft8-table tr.ft8-worked td,
.ft8-table tr.ft8-worked td:last-child {
    color: #5599ff;
    opacity: 0.7;
}

.ft8-spots.cq-only tr:not(.ft8-cq) {
    display: none;
}

/* FT8 TX panel — rightmost column, mirror of .ft8-window */
.ft8-tx-window {
    position: fixed;
    right: 0;
    top: var(--header-h, 72px);
    bottom: 0;
    width: var(--ft8-tx);
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-right: none;
    border-radius: 8px 0 0 8px;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.6);
    z-index: 50;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.ft8-tx-window[hidden] {
    display: none;
}

/* ── Centre column: shift #live clear of whichever docks are open ──────────
   So the receiver + waterfall is never hidden behind a fixed panel. :has() is
   supported in the operator's Chrome; degrades to no margin when a panel closes. */
#live { transition: margin 0.15s ease; }
/* Receiver cockpit mode: the global `main { max-width:1100px; margin:0 auto }`
   traps #live in a narrow centred column, so it can't fill the viewport gap
   between the fixed docks. When ANY FT8 dock is open, let main span full width
   so #live's margins land it exactly in the centre column. */
main:has(.ft8-window:not([hidden])),
main:has(.ft8-tx-window:not([hidden])) {
    max-width: none;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
}
main:has(#ft8-roster-window:not([hidden])):has(#ft8-window:not([hidden])) #live {
    margin-left: calc(var(--ft8-side) * 2);
}
main:has(#ft8-roster-window:not([hidden])):not(:has(#ft8-window:not([hidden]))) #live,
main:not(:has(#ft8-roster-window:not([hidden]))):has(#ft8-window:not([hidden])) #live {
    margin-left: var(--ft8-side);
}
main:has(#ft8-tx-window:not([hidden])) #live {
    margin-right: var(--ft8-tx);
}

/* FT8 audio spectrum canvas */
.ft8-spectrum-canvas {
    width: 100%;
    height: 110px;
    display: block;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    flex-shrink: 0;
    background: #000a06;
}

/* Frequency axis below the spectrum */
.ft8-spectrum-axis {
    position: relative;
    height: 16px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--panel-border);
}

.ft8-spec-tick {
    position: absolute;
    transform: translateX(-50%);
    font-size: 0.65em;
    color: var(--muted);
    white-space: nowrap;
}

/* TX Drive row */
.ft8-drive-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-bottom: 1px solid var(--panel-border);
    flex-shrink: 0;
}

.ft8-drive-slider {
    flex: 1;
    accent-color: var(--accent);
    cursor: pointer;
}

.ft8-auto-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75em;
    color: var(--muted);
    cursor: pointer;
    white-space: nowrap;
}
.ft8-auto-label input[type="checkbox"] { accent-color: var(--accent); cursor: pointer; }
.ft8-auto-label:has(input:checked) { color: var(--accent); }

.ft8-drive-val {
    font-size: 0.75em;
    color: var(--accent);
    min-width: 32px;
    text-align: right;
}

/* RX input level meter (auto-gain) */
.ft8-rxlvl-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-bottom: 1px solid var(--panel-border);
    flex-shrink: 0;
}
.ft8-rxlvl-bar {
    flex: 1;
    height: 8px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--panel-border);
    border-radius: 3px;
    overflow: hidden;
}
.ft8-rxlvl-fill {
    height: 100%;
    width: 0%;
    background: var(--accent);
    transition: width 0.5s ease, background 0.3s;
}
.ft8-rxlvl-fill.hot  { background: var(--amber); }
.ft8-rxlvl-fill.clip { background: #ff5566; }
.ft8-rxlvl-gain-val { color: var(--muted); opacity: 0.7; min-width: 52px; }

/* Live ALC / FWDPWR meter in the FT8 TX panel */
.ft8-tx-meters {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-bottom: 1px solid var(--panel-border);
    flex-shrink: 0;
}
.ft8-alc-bar {
    flex: 1;
    height: 10px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--panel-border);
    border-radius: 3px;
    overflow: hidden;
}
.ft8-alc-fill {
    height: 100%;
    width: 0%;
    background: #39ff88;
    transition: width 0.1s linear, background 0.1s linear;
}
.ft8-meter-val {
    font-size: 0.72em;
    color: var(--muted);
    min-width: 64px;
    text-align: right;
    font-family: 'Share Tech Mono', monospace;
}
.ft8-pwr-val {
    color: var(--accent);
    min-width: 44px;
}

/* FT8 work queue */
.ft8-queue-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    padding: 4px 8px 2px;
    font-size: 0.8em;
    color: var(--accent);
    letter-spacing: 0.5px;
}
.ft8-queue-hint {
    font-size: 0.82em;
    color: var(--muted);
    letter-spacing: 0;
}
.ft8-queue-retries-label {
    font-size: 0.82em;
    color: var(--muted);
    white-space: nowrap;
}
.ft8-retries-input {
    width: 42px;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 4px;
    font-size: 0.9em;
    text-align: center;
}
.ft8-queue-list {
    list-style: none;
    margin: 0;
    padding: 0 8px 4px;
    border-bottom: 1px solid var(--panel-border);
}
.ft8-queue-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 2px 6px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.82em;
    color: var(--text);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.ft8-queue-item.ft8-queue-active {
    background: rgba(57, 255, 136, 0.12);
    color: var(--accent);
}
.ft8-queue-item.ft8-queue-active .ft8-queue-call::after {
    content: ' ▸ calling';
    font-size: 0.85em;
    color: var(--accent2);
}
.ft8-queue-rm {
    background: transparent;
    border: none;
    color: var(--muted);
    cursor: pointer;
    font-size: 0.9em;
    padding: 0 4px;
    line-height: 1;
}
.ft8-queue-rm:hover {
    color: #ff4632;
}

/* Station / DX fields */
.ft8-tx-station {
    padding: 6px 8px;
    border-bottom: 1px solid var(--panel-border);
    flex-shrink: 0;
}

.ft8-tx-field-row {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
}

.ft8-tx-label {
    font-size: 0.75em;
    color: var(--muted);
    white-space: nowrap;
    min-width: 46px;
}

.ft8-tx-input {
    flex: 1;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    color: var(--text);
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.85em;
    padding: 2px 6px;
    text-transform: uppercase;
    min-width: 0;
}

.ft8-tx-input-sm {
    flex: 0 0 52px;
    max-width: 52px;
}

.ft8-tx-input:focus {
    outline: none;
    border-color: var(--accent-dim);
}

/* Tx1–Tx6 message slots */
.ft8-tx-slots {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    padding: 4px 0;
}

.ft8-tx-slot {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
}

.ft8-tx-slot:has(input[type=radio]:checked) {
    background: rgba(57, 255, 136, 0.06);
}

.ft8-slot-label {
    font-size: 0.75em;
    color: var(--muted);
    min-width: 26px;
    cursor: pointer;
}

.ft8-tx-msg {
    flex: 1;
    display: block;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--text);
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.82em;
    padding: 1px 4px;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
    line-height: 1.6;
}

.ft8-tx-slot:has(input[type=radio]:checked) .ft8-tx-msg {
    color: var(--accent);
    border-bottom-color: var(--accent-dim);
}

.ft8-tx-msg.ft8-tx-msg-placeholder {
    color: var(--muted);
    opacity: 0.5;
    font-style: italic;
}

.ft8-tx-input.ft8-field-error {
    border-color: #ff4444 !important;
    outline: 1px solid rgba(255, 68, 68, 0.25);
}

/* QSO message log */
.ft8-qso-log-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3px 8px;
    border-top: 1px solid var(--panel-border);
    font-size: 0.72em;
    color: var(--muted);
    flex-shrink: 0;
}

.ft8-qso-log {
    overflow-y: auto;
    max-height: 160px;
    min-height: 80px;
    padding: 3px 8px;
    flex-shrink: 0;
    border-top: 1px solid var(--panel-border);
}

.ft8-qso-entry {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.75em;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ft8-qso-rx { color: var(--text); }
.ft8-qso-rx[title]:hover { background: rgba(0,255,200,0.07); border-radius: 2px; }
.ft8-qso-tx { color: var(--accent); }

/* TX controls row */
.ft8-tx-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-top: 1px solid var(--panel-border);
    flex-shrink: 0;
    flex-wrap: wrap;
}

.ft8-tx-select {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    color: var(--text);
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.78em;
    padding: 2px 4px;
}

.ft8-tx-autoseq-label {
    font-size: 0.78em;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

/* TX status line */
.ft8-tx-statusline {
    padding: 3px 8px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.78em;
    color: var(--muted);
    flex-shrink: 0;
    border-top: 1px solid var(--panel-border);
    min-height: 22px;
}

.ft8-tx-statusline.queued      { color: var(--accent2); }
.ft8-tx-statusline.tx          { color: #ff4444; }
.ft8-tx-statusline.error       { color: #ff4444; }

/* Auto bot controls + live log */
.ft8-bot-group {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.ft8-bot-log {
    margin: 4px 8px 0;
    max-height: 150px;
    overflow-y: auto;
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(255,180,84,0.22);
    border-radius: 4px;
    padding: 5px 7px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.68rem;
    line-height: 1.35;
    color: #b8c0b0;
    white-space: pre-wrap;
    word-break: break-word;
}
.ft8-bot-log-tx  { color: #00ffcc; }
.ft8-bot-log-hit { color: #ffdd00; font-weight: bold; }

/* Log QSO section */
.ft8-tx-log-section {
    padding: 6px 8px;
    border-top: 1px solid var(--panel-border);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ft8-tx-log-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Mobile: bottom sheet, same as decode panel */
@media (max-width: 760px) {
    .ft8-tx-window {
        width: 100vw;
        max-width: 100vw;
        right: 0;
        left: 0;
        top: auto;
        bottom: 0;
        height: 55vh;
        border-radius: 12px 12px 0 0;
        border-left: 1px solid var(--panel-border);
        border-right: 1px solid var(--panel-border);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.6);
    }
}

/* Receiver claim status + controls */
.receiver-info {
    color: var(--muted);
    font-size: 0.9em;
    margin: 10px 0 0;
}

.receiver-open-row {
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.receiver-open-row .btn,
.receiver-active .btn {
    padding: 8px 20px;
    cursor: pointer;
    background: rgba(57, 255, 136, 0.06);
}
.receiver-active .btn-wee.active {
    background: var(--accent);
    color: #06120a;
}

.error-text {
    color: var(--accent2);
    font-size: 0.9em;
}

.btn:disabled {
    border-color: var(--offline);
    color: var(--muted);
    background: transparent;
    cursor: not-allowed;
}

/* Mode control */
.mode-control {
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.mode-control label {
    color: var(--muted);
    font-size: 0.9em;
}

.mode-control select {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    color: var(--text);
    font-family: inherit;
    font-size: 1em;
    padding: 8px 10px;
}

.mode-control select:focus {
    outline: none;
    border-color: var(--accent);
}

/* Gain / antenna control */
.gain-control {
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.gain-control label {
    color: var(--muted);
    font-size: 0.9em;
}

.gain-control input[type="range"] {
    accent-color: var(--accent);
}

.gain-control #gain-value {
    color: var(--accent2);
    font-size: 0.9em;
    min-width: 48px;
}

.gain-control select {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    color: var(--text);
    font-family: inherit;
    font-size: 1em;
    padding: 8px 10px;
}

.gain-control select:focus {
    outline: none;
    border-color: var(--accent);
}

/* AGC control */
.agc-control {
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.agc-control .ptt-stack {
    margin-left: auto;
}

.agc-control .ptt-stack .callsign-input {
    width: 110px;
}

.agc-control label {
    color: var(--muted);
    font-size: 0.9em;
}

.agc-control select {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    color: var(--text);
    font-family: inherit;
    font-size: 1em;
    padding: 8px 10px;
}

.agc-control select:focus {
    outline: none;
    border-color: var(--accent);
}

/* TX-by-operator warning */
.tx-indicator {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-size: 0.85em;
    color: var(--accent2);
}

.tx-indicator .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent2);
    box-shadow: 0 0 8px var(--accent2);
    animation: tx-pulse 1s ease-in-out infinite;
}

@keyframes tx-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* PTT control */
.tx-control {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.mic-gain-control {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mic-gain-control label {
    color: var(--muted);
    font-size: 0.9em;
}

.mic-gain-control input[type="range"] {
    accent-color: var(--accent2);
}

.mic-gain-control #mic-gain-value {
    color: var(--accent2);
    font-size: 0.9em;
    min-width: 36px;
}

.ptt-btn {
    min-width: 110px;
    text-align: center;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

.ptt-btn.on-air {
    background: #ff4632;
    border-color: #ff4632;
    color: #06120a;
    box-shadow: 0 0 18px rgba(255, 70, 50, 0.6);
    animation: tx-pulse 1s ease-in-out infinite;
}

.ptt-btn.disabled,
.ptt-btn:disabled {
    border-color: var(--offline);
    color: var(--muted);
    background: transparent;
    cursor: not-allowed;
    animation: none;
}

.tx-status {
    font-size: 0.8em;
    color: var(--accent2);
    letter-spacing: 1px;
}

/* Audio control */
.audio-control {
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.audio-control label {
    color: var(--muted);
    font-size: 0.9em;
}

.audio-control input[type="range"] {
    accent-color: var(--accent);
}

.audio-scope {
    display: block;
    width: 320px;
    height: 70px;
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    background: #000;
}

/* Outgoing TX audio is shown while PTT is held. */
.audio-scope.tx-active {
    border-color: var(--accent2);
    box-shadow: 0 0 6px rgba(255, 180, 84, 0.4);
}

.scope-zoom-label {
    color: var(--muted);
    font-size: 0.85em;
    min-width: 3.5em;
    text-align: right;
}

#record-btn.recording {
    border-color: #ff4d4d;
    color: #ff4d4d;
    background: rgba(255, 77, 77, 0.08);
    animation: tx-pulse 1s ease-in-out infinite;
}

#record-btn.recording:hover {
    background: #ff4d4d;
    color: #06120a;
}

/* Speech processor + 8-band graphic EQ */
.audio-processing {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.proc-control {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.proc-control label {
    color: var(--muted);
    font-size: 0.9em;
}

.proc-control input[type="range"] {
    accent-color: var(--accent);
}

.proc-control #proc-level-value {
    color: var(--accent2);
    font-size: 0.9em;
    min-width: 28px;
}

.eq-control {
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    padding: 10px 12px;
}

.eq-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    color: var(--muted);
    font-size: 0.9em;
}

/* Higher-contrast OFF state for the processor/EQ toggles */
#proc-toggle,
.eq-toggle {
    min-width: 38px;
    text-align: center;
    background: rgba(0, 0, 0, 0.35);
    color: var(--text);
    border-color: var(--muted);
}

/* ON state needs to win over .receiver-active .btn's dim background */
#proc-toggle.active,
.eq-toggle.active {
    background: var(--accent);
    color: #06120a;
    border-color: var(--accent);
}

.eq-bands {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

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

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

.eq-led {
    border-radius: 2px;
    display: block;
}

.eq-slider {
    writing-mode: vertical-lr;
    direction: rtl;
    width: 20px;
    height: 100px;
    accent-color: var(--accent);
    opacity: 0.55;          /* LED canvas is the visual; slider is the handle */
    cursor: ns-resize;
}
.eq-slider:hover, .eq-slider:focus { opacity: 0.85; }

.eq-band-value {
    font-size: 0.78em;
    font-family: 'Share Tech Mono', monospace;
    min-width: 2.8em;
    text-align: center;
    font-weight: 600;
}
.eq-val-pos  { color: #00cc60; }
.eq-val-neg  { color: #ff8800; }
.eq-val-zero { color: var(--muted); }

.eq-band-label {
    color: var(--muted);
    font-size: 0.75em;
}

/* Frequency response curve below the bands */
.eq-curve {
    display: block;
    width: 100%;
    height: 36px;
    margin-top: 4px;
    border-top: 1px solid rgba(255,255,255,0.06);
    border-radius: 0 0 3px 3px;
}

/* Side-by-side RX/TX EQ panels */
.eq-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.eq-row .eq-control {
    flex: 1 1 200px;
}

.eq-row .eq-bands {
    gap: 4px;
}

.eq-row .eq-slider {
    width: 16px;
    height: 72px;
}

.eq-row .eq-led {
    height: 72px;
}

.eq-row .eq-band-value,
.eq-row .eq-band-label {
    font-size: 0.72em;
}

/* User bar (members area + admin portal) */
.user-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 0;
    color: var(--muted);
    font-size: 0.9em;
    border-bottom: 1px solid var(--panel-border);
}

.user-bar strong {
    color: var(--text);
}

.user-bar .btn {
    padding: 6px 16px;
    font-size: 0.85em;
    cursor: pointer;
}

/* Admin portal: users table + add-member form */
.users-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 14px;
}

.users-table th,
.users-table td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--panel-border);
}

.users-table th {
    color: var(--muted);
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.users-table select {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    color: var(--text);
    font-family: inherit;
    font-size: 0.95em;
    padding: 6px 8px;
}

.users-table select:focus {
    outline: none;
    border-color: var(--accent);
}

.users-table button.btn {
    padding: 6px 16px;
    font-size: 0.85em;
    cursor: pointer;
    background: rgba(57, 255, 136, 0.06);
}

/* QSO Logbook tables (recent panel + logbook/clublogbook pages) */
.logbook-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 14px;
    font-size: 0.92em;
}

.logbook-table th,
.logbook-table td {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--panel-border);
    white-space: nowrap;
}

.logbook-table th {
    color: var(--muted);
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.logbook-table .logbook-empty {
    color: var(--muted);
    white-space: normal;
    padding: 16px 10px;
    text-align: center;
}

.logbook-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.logbook-toolbar-sep {
    flex: 1 1 0;
}
.qrz-key-label {
    font-size: 0.82em;
    color: var(--muted);
    white-space: nowrap;
}
.qrz-key-input {
    background: rgba(0,0,0,0.35);
    border: 1px solid var(--muted);
    color: var(--text);
    padding: 3px 8px;
    font-family: inherit;
    font-size: 0.82em;
    border-radius: 3px;
    width: 180px;
}
.qrz-key-status {
    font-size: 0.78em;
    color: var(--muted);
}
.qrz-badge {
    font-size: 0.78em;
    padding: 2px 5px;
    border-radius: 3px;
    white-space: nowrap;
}
.qrz-ok {
    background: rgba(57,255,136,0.15);
    color: var(--accent);
    border: 1px solid var(--accent);
}

.logbook-table audio {
    height: 28px;
    max-width: 200px;
    vertical-align: middle;
}

.logbook-table button.btn {
    padding: 5px 12px;
    font-size: 0.8em;
    cursor: pointer;
    background: rgba(255, 70, 50, 0.08);
    border-color: rgba(255, 70, 50, 0.4);
}

.logbook-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}

.logbook-tabs .btn.active {
    background: var(--accent);
    color: #06120a;
}

/* QSO logbook review popup */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.modal-overlay[hidden] {
    display: none;
}

.logbook-popup {
    width: 360px;
    max-width: calc(100vw - 32px);
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
    overflow: hidden;
}

.logbook-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--panel-border);
    font-weight: 600;
    letter-spacing: 1px;
}

.logbook-popup-body {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.logbook-popup-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.logbook-popup-row label {
    color: var(--muted);
    font-size: 0.9em;
}

.logbook-popup-row .callsign-input {
    width: 120px;
}

.logbook-popup-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid var(--panel-border);
}

.logbook-popup-actions .error-text {
    flex: 1;
}

.logbook-popup-actions .btn {
    padding: 8px 16px;
    font-size: 0.9em;
    cursor: pointer;
    background: rgba(57, 255, 136, 0.06);
}

.admin-form {
    max-width: 400px;
}

.generated-password {
    margin-bottom: 14px;
    padding: 10px 12px;
    border: 1px solid var(--accent-dim);
    border-radius: 4px;
    background: rgba(57, 255, 136, 0.06);
    color: var(--accent2);
    font-size: 0.95em;
}

/* Suggestions & Bug Reports form */
.feedback-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
}

.feedback-form select {
    font-family: inherit;
    font-size: 1em;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    color: var(--text);
}

.feedback-form textarea {
    flex: 1 1 280px;
    min-width: 200px;
    min-height: 70px;
    font-family: inherit;
    font-size: 1em;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    color: var(--text);
    resize: vertical;
}

.feedback-form textarea:focus,
.feedback-form select:focus {
    outline: none;
    border-color: var(--accent);
}

.feedback-form .btn {
    padding: 8px 16px;
    cursor: pointer;
}

.feedback-done td {
    color: var(--muted);
    text-decoration: line-through;
}

.feedback-done td:first-child,
.feedback-done td:nth-child(2),
.feedback-done td:last-child {
    text-decoration: none;
}

#feedback-tbody input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
}

/* Roadmap */
.roadmap {
    list-style: none;
    padding: 0;
    margin: 0;
    border-left: 2px solid var(--panel-border);
}

.roadmap li {
    position: relative;
    padding: 4px 0 22px 28px;
}

.roadmap li::before {
    content: '';
    position: absolute;
    left: -7px;
    top: 6px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--bg);
    border: 2px solid var(--accent);
}

.roadmap li.done::before {
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent);
}

.roadmap li.in-progress::before {
    background: var(--accent2);
    border-color: var(--accent2);
    box-shadow: 0 0 8px var(--accent2);
    animation: pulse 2s infinite;
}

.roadmap .phase-title {
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.roadmap .phase-desc {
    color: var(--muted);
    font-size: 0.92em;
    margin-top: 4px;
}

/* Footer */
footer {
    text-align: center;
    padding: 30px 0 50px;
    color: var(--muted);
    font-size: 0.85em;
    letter-spacing: 1px;
}

footer .callsign {
    color: var(--accent2);
}

/* ============================================================
   Mobile / small-screen layout (phones incl. landscape)
   ============================================================ */
@media (max-width: 760px) {
    main {
        padding: 0 14px 60px;
    }

    /* Header / nav: stack brand, nav links, clock */
    header.site-header {
        padding: 12px 16px;
    }

    .brand {
        font-size: 1.05em;
        letter-spacing: 2px;
    }

    nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px 16px;
        flex: 1 1 100%;
        order: 2;
    }

    nav a {
        margin-left: 0;
        font-size: 0.85em;
    }

    .utc-clock {
        order: 3;
        flex: 1 1 100%;
        text-align: center;
        font-size: 0.8em;
    }

    /* Hero */
    .hero {
        padding: 50px 10px 36px;
    }

    .hero h1 {
        font-size: 2em;
        letter-spacing: 4px;
    }

    .hero .subtitle {
        font-size: 0.95em;
        letter-spacing: 1px;
    }

    .hero .tagline {
        font-size: 0.9em;
    }

    /* Sections */
    section {
        margin-top: 44px;
    }

    section h2 {
        font-size: 1.25em;
        letter-spacing: 2px;
    }

    .panel {
        padding: 16px;
        overflow-x: auto;
    }

    /* Fixed-width canvas would overflow narrow viewports */
    .audio-scope {
        width: 100%;
        max-width: 320px;
    }

    /* Let sliders shrink/grow instead of forcing wide rows */
    .tune-control input[type="range"],
    .gain-control input[type="range"],
    .agc-control input[type="range"],
    .mic-gain-control input[type="range"],
    .proc-control input[type="range"],
    .audio-control input[type="range"] {
        flex: 1 1 120px;
    }

    /* Drop the auto push-right so the PTT stack wraps cleanly */
    .agc-control .ptt-stack {
        margin-left: 0;
        flex: 1 1 100%;
        justify-content: center;
    }

    .smeter-readout {
        min-width: 100px;
        font-size: 0.8em;
    }

    /* Shrink logbook tables so they fit without horizontal scrolling */
    .logbook-table {
        font-size: 0.78em;
    }

    .logbook-table th,
    .logbook-table td {
        padding: 6px 5px;
    }

    .logbook-table audio {
        max-width: 130px;
    }

    /* Recent QSOs widget: drop the least-essential columns to fit the width */
    #recent-qsos-table th:nth-child(1),
    #recent-qsos-table td:nth-child(1),
    #recent-qsos-table th:nth-child(7),
    #recent-qsos-table td:nth-child(7),
    #recent-qsos-table th:nth-child(8),
    #recent-qsos-table td:nth-child(8),
    #recent-qsos-table th:nth-child(9),
    #recent-qsos-table td:nth-child(9) {
        display: none;
    }
}

/* Hidden on mouse/trackpad devices - the scroll-wheel does this job there */
.jog-wheel-wrap {
    display: none;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    margin: 12px 0;
}

.jog-side-btn {
    justify-self: center;
}

.jog-wheel-wrap .btn-wee:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.jog-wheel.locked {
    opacity: 0.5;
    pointer-events: none;
}

/* Bigger touch targets on touchscreens */
@media (pointer: coarse) {
    .btn-wee {
        padding: 7px 13px;
        font-size: 0.85em;
    }

    .ptt-circle {
        width: 54px;
        height: 54px;
    }

    /* Circular jog wheel for fine-tuning - touch devices only, mouse wheel
       already covers this on desktop */
    .jog-wheel-wrap {
        display: grid;
    }
}

.jog-wheel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.jog-wheel-dial {
    position: relative;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 42%, rgba(57, 255, 136, 0.14), rgba(10, 18, 14, 0.92));
    border: 2px solid var(--panel-border);
    box-shadow: 0 0 16px rgba(57, 255, 136, 0.08) inset;
}

.jog-wheel.active .jog-wheel-dial {
    border-color: var(--accent);
}

.jog-wheel-marker {
    position: absolute;
    top: 6px;
    left: 50%;
    width: 4px;
    height: 18px;
    margin-left: -2px;
    border-radius: 2px;
    background: var(--accent);
    box-shadow: 0 0 6px var(--accent-dim);
    transform-origin: 50% 40px;
}

.jog-wheel-label {
    font-size: 0.75em;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muted);
}

/* Landscape phones - claw back vertical space for the waterfall */
@media (max-height: 480px) and (orientation: landscape) {
    .hero {
        padding: 22px 10px 16px;
    }

    .hero h1 {
        font-size: 1.6em;
        letter-spacing: 3px;
    }

    .hero .tagline {
        margin-top: 10px;
        font-size: 0.85em;
    }

    section {
        margin-top: 28px;
    }

    .waterfall-panel,
    .waterfall-cursor {
        height: 110px;
    }

    .spectrum-panel,
    .spectrum-cursor {
        height: 44px;
    }

    .decode-window-text {
        max-height: 90px;
    }

    .decode-window-history {
        max-height: 100px;
    }

    /* FT8 panel: bottom sheet on mobile */
    .ft8-window {
        width: 100vw;
        max-width: 100vw;
        left: 0;
        right: 0;
        top: auto;
        bottom: 0;
        height: 55vh;
        border-radius: 12px 12px 0 0;
        border-left: 1px solid var(--panel-border);
        border-right: 1px solid var(--panel-border);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.6);
    }
}

/* ── Public activity feed ── */
#public-feed {
    padding: 0 20px 10px;
}
#public-feed .feed-header {
    display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px;
}
#public-feed h2 {
    font-size: 1em; color: var(--accent); letter-spacing: 1px;
    margin: 0;
}
.feed-live-dot {
    color: var(--accent); font-size: .6em;
    animation: tx-pulse 1.8s ease-in-out infinite;
    vertical-align: middle;
}
.feed-sub {
    font-size: .72em; color: var(--muted);
}
.feed-ticker {
    display: flex; flex-wrap: wrap; gap: 6px;
}
.feed-loading {
    font-size: .78em; color: var(--muted);
}
.feed-card {
    background: rgba(57,255,136,0.05);
    border: 1px solid rgba(57,255,136,0.12);
    border-radius: 5px;
    padding: 6px 10px;
    font-size: .78em;
    transition: background .15s, border-color .15s;
    cursor: default;
    min-width: 130px;
}
.feed-card:hover {
    background: rgba(57,255,136,0.1);
    border-color: rgba(57,255,136,0.3);
}
.feed-call {
    color: var(--accent); font-size: .98em;
    display: flex; align-items: center; gap: 5px;
}
.feed-band {
    font-size: .72em; font-weight: bold;
    padding: 1px 5px; border-radius: 3px;
}
.feed-meta {
    color: var(--muted); margin-top: 3px; font-size: .88em;
    white-space: nowrap;
}
.feed-op {
    color: rgba(74,122,90,0.7); font-size: .82em; margin-top: 1px;
}

/* ============================================================
   Multi-band FT8 watch  (web/members/multift8.html)
   ============================================================ */
body.mft8-body {
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
/* header.site-header sets flex-wrap:wrap; override for mft8 (need higher specificity) */
header.mft8-header { flex: 0 0 auto; flex-wrap: nowrap; overflow: hidden; padding: 8px 18px; }
/* brand + STOP TX grouped as one left-side flex item so STOP TX stays beside the title */
.mft8-header-left { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
/* nav has many links — let it shrink+scroll so pop-out button stays visible */
header.mft8-header nav { overflow-x: auto; min-width: 0; flex-shrink: 1; }
header.mft8-header .nav-popout-btn { flex-shrink: 0; }
/* TX banner: pinned absolutely to centre of header so width changes never shift nav/buttons */
header.mft8-header { position: relative; }
.mft8-txbanner {
    position: absolute !important;
    left: 50%; transform: translateX(-50%);
    white-space: nowrap; max-width: 480px; overflow: hidden;
}
.mft8-main {
    flex: 1;
    min-height: 0;
    /* override the global `main { max-width: 1100px; margin: 0 auto }` — the
       multi-FT8 cockpit is a full-width dashboard (roster + 4 panels + minimap),
       not a reading-width page; the cap squished the middle panels (2026-06-20). */
    max-width: none;
    display: flex;
    flex-direction: column;
    padding: 4px 10px 6px;
    gap: 4px;
}

/* TX banner in the header — one TX line, so this is global state */
.mft8-txbanner {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 3px 12px;
    border: 1px solid var(--panel-border);
    border-radius: 14px;
    font-size: 0.8rem;
    color: var(--muted);
    background: rgba(0,0,0,0.3);
}
.mft8-txbanner .mft8-txdot {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--offline);
}
.mft8-txbanner.active { color: var(--accent2); border-color: var(--accent2); }
.mft8-txbanner.active .mft8-txdot {
    background: var(--accent2);
    box-shadow: 0 0 10px var(--accent2);
    animation: mft8-blink 1s steps(2) infinite;
}
/* Power meter badge inside the TX banner */
#mft8-pwr-readout {
    background: rgba(251,191,36,0.14);
    border: 1px solid rgba(251,191,36,0.4);
    padding: 1px 7px;
    border-radius: 4px;
    color: #fbbf24;
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
    margin-left: 4px;
}

/* RX: green beacon — bot is running and listening */
.mft8-txbanner.rxing { color: #22c55e; border-color: #22c55e; }
.mft8-txbanner.rxing .mft8-txdot {
    background: #22c55e;
    box-shadow: 0 0 8px #22c55e;
    animation: none;
}
/* TX: red beacon — radio is actually keying */
.mft8-txbanner.txing { color: #ef4444; border-color: #ef4444; }
.mft8-txbanner.txing .mft8-txdot {
    background: #ef4444;
    box-shadow: 0 0 12px #ef4444;
    animation: mft8-blink 0.5s steps(2) infinite;
}
@keyframes mft8-blink { 50% { opacity: 0.25; } }

.mft8-login { margin: 40px auto; text-align: center; color: var(--muted); }

.mft8-toolbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.mft8-tool-label { color: var(--muted); font-size: 0.85rem; }
.mft8-tool-label select {
    background: rgba(0,0,0,0.35);
    border: 1px solid var(--panel-border);
    color: var(--text);
    border-radius: 4px;
    padding: 3px 6px;
    font-family: inherit;
}
.mft8-tool-hint { color: var(--muted); font-size: 0.75rem; }
.mft8-cb-label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
/* ── Targeting filter bar ── */
.mft8-filters {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 6px 0 8px;
    border-top: 1px solid var(--panel-border);
}
.mft8-filter-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.mft8-filter-group {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    color: var(--muted);
    white-space: nowrap;
}
.mft8-filter-group select,
.mft8-filt-input {
    background: rgba(0,0,0,0.35);
    border: 1px solid var(--panel-border);
    color: var(--text);
    border-radius: 4px;
    padding: 3px 6px;
    font-family: inherit;
    font-size: 0.78rem;
}
.mft8-filt-input { width: 120px; }
.mft8-filter-strict { gap: 4px; }
.mft8-filt-hint { color: var(--muted); font-size: 0.7rem; opacity: 0.7; }
.mft8-filt-active {
    margin-left: auto;
    font-size: 0.72rem;
    color: #39c464;
    font-family: 'Share Tech Mono', monospace;
}
.mft8-sep { color: var(--panel-border); }
/* QSO All / CQ All toolbar buttons — active (running) state */
#mft8-qso-all.active {
    border-color: var(--accent2);
    color: var(--accent2);
    background: rgba(255,180,84,0.18);
    box-shadow: 0 0 8px rgba(255,180,84,0.35);
}
#mft8-cq-all.active {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(0,255,170,0.12);
    box-shadow: 0 0 8px rgba(0,255,170,0.3);
}
.mft8-globalstat {
    margin-left: auto;
    color: var(--accent);
    font-size: 0.8rem;
    text-shadow: 0 0 8px var(--accent-dim);
}

/* The grid fills all remaining height */
.mft8-grid {
    flex: 1;
    min-height: 0;
    display: grid;
    gap: 8px;
}
.mft8-grid.cols-2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
.mft8-grid.cols-3 { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr; }
.mft8-grid.cols-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }

/* ---- a single band panel ---- */
.mft8-panel {
    position: relative;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.25)),
        var(--panel);
    border: 1px solid color-mix(in srgb, var(--band) 45%, transparent);
    border-radius: 8px;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.4),
                0 0 22px -8px var(--band);
    overflow: hidden;
}
.mft8-panel.txfocus {
    border-color: var(--accent2);
    box-shadow: 0 0 0 1px var(--accent2), 0 0 26px -6px var(--accent2);
}

/* decode pulse bar across the top */
.mft8-pulse {
    height: 3px;
    background: var(--band);
    opacity: 0;
}
.mft8-pulse.hit { animation: mft8-pulse 1.1s ease-out; }
@keyframes mft8-pulse {
    0% { opacity: 0.95; filter: brightness(1.6); }
    100% { opacity: 0; }
}

.mft8-phead {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    flex-wrap: wrap;   /* controls wrap to a 2nd line in narrow panels, never clip */
}
.mft8-band {
    background: rgba(0,0,0,0.4);
    border: 1px solid color-mix(in srgb, var(--band) 50%, transparent);
    color: var(--band);
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: bold;
    border-radius: 5px;
    padding: 2px 8px;
    text-shadow: 0 0 10px color-mix(in srgb, var(--band) 60%, transparent);
}
.mft8-freq { color: var(--muted); font-size: 0.82rem; }
.mft8-state { font-size: 0.72rem; color: var(--muted); }
.mft8-state.live { color: var(--band); text-shadow: 0 0 8px var(--band); }
.mft8-state.warn { color: var(--accent2); }
.mft8-state.err  { color: #ff5d6c; }
/* TX badge — shows on whichever slice currently holds the TX flag (hops bands in
   roam mode); solid + pulsing while actually keying. */
.mft8-tx {
    flex: 0 0 auto; font-family: 'Orbitron', monospace; font-weight: bold;
    font-size: 0.62rem; letter-spacing: 1px; line-height: 1;
    padding: 3px 5px; border-radius: 4px; color: #ff5d6c;
    border: 1px solid #ff5d6c; background: rgba(255, 93, 108, 0.10);
}
.mft8-tx[hidden] { display: none; }
.mft8-tx.active {
    color: #160606; background: #ff3b3b; border-color: #ff3b3b;
    box-shadow: 0 0 10px rgba(255, 59, 59, 0.8);
    animation: mft8-tx-flash 0.6s steps(2) infinite;
}
@keyframes mft8-tx-flash { 50% { opacity: 0.5; } }
.mft8-abcd {
    flex: 0 0 auto; font-family: 'Orbitron', monospace; font-weight: bold;
    font-size: 0.95rem; color: var(--band); width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid color-mix(in srgb, var(--band) 55%, transparent);
    border-radius: 5px; text-shadow: 0 0 8px var(--band); margin-right: 2px;
}
.mft8-spacer { flex: 1; }
.mft8-focus { white-space: nowrap; }

.mft8-meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    padding: 3px 8px;
    font-size: 0.72rem;
    color: var(--muted);
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.mft8-meta b { color: var(--text); }

.mft8-feedhead, .mft8-row {
    display: grid;
    grid-template-columns: 62px 38px 48px 1fr;
    gap: 6px;
    padding: 2px 10px;
    font-size: 0.74rem;
}
.mft8-feedhead {
    color: var(--muted);
    text-transform: uppercase;
    font-size: 0.62rem;
    letter-spacing: 0.05em;
    padding-top: 5px; padding-bottom: 5px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.mft8-feed {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    font-family: 'Share Tech Mono', monospace;
}
.mft8-row { color: var(--text); border-bottom: 1px solid rgba(255,255,255,0.03); }
.mft8-row:nth-child(even) { background: rgba(255,255,255,0.012); }
.mft8-row .c-s { color: var(--muted); text-align: right; }
.mft8-row .c-f { color: var(--muted); text-align: right; }
.mft8-row .c-m { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mft8-row.cq .c-m { color: var(--accent2); text-shadow: 0 0 8px rgba(255,180,84,0.25); }
.mft8-row.callingus {
    background: rgba(57,255,136,0.12);
}
.mft8-row.callingus .c-m {
    color: var(--accent);
    font-weight: bold;
    text-shadow: 0 0 10px var(--accent-dim);
}

/* thin neon scrollbars */
.mft8-feed::-webkit-scrollbar { width: 7px; }
.mft8-feed::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--band) 40%, transparent);
    border-radius: 4px;
}

@media (max-width: 900px) {
    .mft8-grid.cols-3, .mft8-grid.cols-4 {
        grid-template-columns: 1fr;
        grid-template-rows: none;
    }
    body.mft8-body { overflow: auto; }
    .mft8-panel { min-height: 280px; }
}

/* multi-ft8 Auto QSO / Auto CQ button states */
.mft8-botbtn.working {
    border-color: var(--accent2);
    color: var(--accent2);
    background: rgba(255,180,84,0.12);
    animation: mft8-blink 1.2s steps(2) infinite;
}
.mft8-botbtn:disabled { opacity: 0.4; cursor: not-allowed; }
.mft8-cqbtn.working {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(0,255,170,0.10);
    animation: mft8-blink 1.2s steps(2) infinite;
}
.mft8-cqbtn:disabled { opacity: 0.4; cursor: not-allowed; }

/* FT8 mode: the S-meter + ALC bars are meaningless (DAX TX bypasses ALC; the
   S-meter swings across the wide FT8 passband). Dim the BARS only — the numeric
   readouts stay fully visible (user 2026-06-20: "just the numbers do"). */
body.ft8-mode #smeter-gauge,
body.ft8-mode #alc-gauge {
    opacity: 0.18;
    filter: grayscale(1);
}
body.ft8-mode .smeter-scale { opacity: 0.3; }
body.ft8-mode #smeter-readout::after { content: " · n/a in FT8"; color: var(--muted); font-size: .85em; }
body.ft8-mode #alc-gauge { pointer-events: none; }

/* per-panel include/exclude-from-auto toggle (the "highlight" of slices used) */
/* All panels have the band-colour border/glow; closed slices dim via .slice-closed */
.mft8-panel {
    border-color: color-mix(in srgb, var(--band) 70%, transparent);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.4), 0 0 26px -8px var(--band);
}

/* per-panel close/re-open one slice (free it on the radio) */
.mft8-closebtn { color: var(--muted); padding-left: 7px; padding-right: 7px; }
.mft8-closebtn:hover { color: var(--red, #ff5566); border-color: var(--red, #ff5566); }
.mft8-panel.slice-closed { opacity: .5; }
.mft8-panel.slice-closed .mft8-feed,
.mft8-panel.slice-closed .mft8-meta { filter: grayscale(1); pointer-events: none; }
.mft8-panel.slice-closed .mft8-closebtn { color: var(--accent); border-color: var(--accent); }

/* clickable CQ rows (click to work that station) */
.mft8-row.cq[data-call] { cursor: pointer; }
.mft8-row.cq[data-call]:hover { background: rgba(255,180,84,0.14); }
.mft8-row.cq[data-call]:hover .c-m { text-shadow: 0 0 12px rgba(255,180,84,0.5); }
/* Decode addressed to us → click to fire the correct one-shot reply. */
.mft8-row.clickable-reply { cursor: pointer; }
.mft8-row.clickable-reply:hover { background: rgba(57,255,136,0.14); }
.mft8-row.clickable-reply:hover .c-m { text-shadow: 0 0 12px rgba(57,255,136,0.55); }

/* panel whose QSO is currently running */
.mft8-panel.working { box-shadow: 0 0 0 2px var(--accent), 0 0 22px rgba(57,255,136,0.35); }

/* floating QSO console (bot log while a QSO runs) */
.mft8-qsolog {
    position: fixed; right: 14px; bottom: 14px; width: 380px; max-width: 90vw;
    max-height: 46vh; display: none; flex-direction: column; z-index: 1200;
    background: rgba(4,12,7,0.96); border: 1px solid var(--accent-dim);
    border-radius: 10px; box-shadow: 0 10px 36px rgba(0,0,0,0.6); overflow: hidden;
}
.mft8-qsolog.show { display: flex; }
.mft8-qsolog header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 7px 11px; font-size: .72em; letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--accent); border-bottom: 1px solid var(--border);
}
.mft8-qsolog-x { background: none; border: none; color: var(--muted); font-size: 1.2em; cursor: pointer; line-height: 1; }
.mft8-qsolog-x:hover { color: var(--text); }
.mft8-qsolog-body { overflow-y: auto; padding: 8px 11px; font-size: .74em; line-height: 1.5; }
.mft8-qsolog-line { color: var(--muted); white-space: pre-wrap; word-break: break-word; }
.mft8-qsolog-line.tx  { color: var(--accent2); }
.mft8-qsolog-line.hit { color: var(--accent); font-weight: bold; }

/* ---- Multi-FT8 content layout: roster (left) + grid (right) ---- */
.mft8-content { flex: 1; min-height: 0; min-width: 0; display: flex; gap: 8px; }
/* min-width:0 lets the grid shrink below its content width instead of pushing
   the panels past the viewport (was clipping the panel-header buttons). */
.mft8-content .mft8-grid { flex: 1; min-width: 0; }

/* Right panel: Working-now mini-map + permanent QSO console below it. */
.mft8-minimap {
    flex: 0 0 255px; min-height: 0; display: flex; flex-direction: column; gap: 6px;
    background: var(--panel); border: 1px solid var(--panel-border);
    border-radius: 10px; padding: 10px;
}
.mft8-minimap-head {
    font-size: .72rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent);
    display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-shrink: 0;
}
.mft8-minimap-style {
    font-size: .72rem; background: var(--panel); color: var(--text);
    border: 1px solid var(--panel-border); border-radius: 6px; padding: 2px 4px;
    text-transform: none; letter-spacing: normal;
}
.mft8-minimap-imgwrap {
    position: relative; width: 100%; aspect-ratio: 5 / 4; border-radius: 8px; flex-shrink: 0;
    overflow: hidden; background: #0b1118; border: 1px solid var(--panel-border);
}
.mft8-minimap-imgwrap img {
    width: 100%; height: 100%; object-fit: cover; display: none;
}
.mft8-minimap-imgwrap.has-map img { display: block; }
.mft8-minimap-empty {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: #5b6b78; font-size: .8rem;
}
.mft8-minimap-imgwrap.has-map .mft8-minimap-empty { display: none; }
.mft8-minimap-cap { font-size: .82rem; color: var(--text); line-height: 1.45; min-height: 1.2em; flex-shrink: 0; }
.mft8-minimap-cap b { color: var(--accent); }
@media (max-width: 1200px) { .mft8-minimap { display: none; } }

/* Inline QSO console — lives below the mini-map, fills remaining panel height */
.mft8-console {
    flex: 1; min-height: 0; display: flex; flex-direction: column;
    border-top: 1px solid var(--panel-border); padding-top: 6px; gap: 4px;
}
.mft8-console-head {
    font-size: .68rem; letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--accent); flex-shrink: 0;
}
.mft8-console-body {
    flex: 1; min-height: 0; overflow-y: auto; font-size: .72em; line-height: 1.55;
}
.mft8-console-body::-webkit-scrollbar { width: 3px; }
.mft8-console-body::-webkit-scrollbar-thumb { background: var(--panel-border); border-radius: 2px; }

.mft8-roster {
    flex: 0 0 390px; min-height: 0; display: flex; flex-direction: column;
    background: var(--panel); border: 1px solid var(--panel-border);
    border-radius: 8px; overflow: hidden;
}
.mft8-roster-head {
    flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 8px 10px;
    border-bottom: 1px solid var(--panel-border);
}
.mft8-roster-title { font-size: .72rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent); }
.mft8-roster-filter {
    margin-left: auto; width: 130px; background: rgba(0,0,0,0.35);
    border: 1px solid var(--panel-border); color: var(--text); border-radius: 4px;
    padding: 3px 7px; font-family: inherit; font-size: .76rem;
}
.mft8-roster-tablewrap { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.mft8-roster-table { width: 100%; border-collapse: collapse; font-size: .76rem; }
.mft8-roster-table thead th {
    position: sticky; top: 0; background: rgba(4,12,7,0.96); z-index: 1;
    text-align: left; color: var(--muted); font-weight: normal; padding: 5px 7px;
    cursor: pointer; user-select: none; letter-spacing: .5px; border-bottom: 1px solid var(--panel-border);
}
.mft8-roster-table thead th:hover { color: var(--text); }
.mft8-rr { cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.03); }
.mft8-rr:hover { background: rgba(57,255,136,0.08); }
.mft8-rr td { padding: 4px 7px; white-space: nowrap; }
.mft8-rr .rr-call { font-weight: bold; color: var(--text); }
.mft8-rr.cq .rr-call { color: var(--accent2); }
.mft8-rr .rr-ctry { color: var(--muted); overflow: hidden; text-overflow: ellipsis; max-width: 170px; }
.mft8-rr .rr-flag, .mft8-qitem .rr-flag {
    display: inline-block; width: 20px; height: 15px; margin-right: 5px;
    vertical-align: -2px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,0.4);
    object-fit: cover; background: rgba(255,255,255,0.05);
}
.rr-flag-none { box-shadow: none; background: none; }
.mft8-rr .rr-snr, .mft8-rr .rr-dist { text-align: right; color: var(--muted); }
.mft8-rr .rr-age { color: var(--muted); font-size: .92em; }
.mft8-rr .rr-now { color: rgba(255,180,84,0.3); font-size: .85em; padding: 0 4px; cursor: pointer; }
.mft8-rr:hover .rr-now { color: #ffb454; }
.mft8-rr .rr-now:hover { color: #ff8c00; text-shadow: 0 0 6px rgba(255,140,0,0.6); }
/* worked-before — same blue the normal FT8 panel uses (.ft8-worked) */
.mft8-rr.worked .rr-call { color: #5599ff; }
.mft8-rr.worked .rr-ctry, .mft8-rr.worked .rr-age { opacity: 0.7; }
/* Worked-before stations in the decode feed → blue (roster hides them; feed flags them). */
.mft8-row.worked .c-m { color: #5599ff; }
.mft8-row.worked { opacity: 0.85; }
.mft8-rr.queued { background: rgba(255,180,84,0.10); }
.mft8-rr.queued .rr-call { color: var(--accent2); }
.mft8-rr.working { background: rgba(57,255,136,0.16); }
.mft8-rr.working .rr-call { color: var(--accent); text-shadow: 0 0 8px var(--accent-dim); }
.mft8-roster-foot { flex: 0 0 auto; padding: 6px 10px; font-size: .66rem; color: var(--muted); border-top: 1px solid var(--panel-border); }

/* work queue */
.mft8-queue { flex: 0 0 auto; border-bottom: 1px solid var(--panel-border); padding: 6px 8px; max-height: 30%; overflow-y: auto; }
.mft8-queue-head { display: flex; justify-content: space-between; font-size: .66rem; text-transform: uppercase; letter-spacing: 1px; color: var(--accent2); margin-bottom: 5px; }
.mft8-q-x { background: none; border: none; color: var(--muted); cursor: pointer; font-size: .9em; }
.mft8-q-x:hover { color: var(--text); }
.mft8-qitem { display: flex; align-items: center; gap: 6px; font-size: .76rem; padding: 3px 4px; border-radius: 4px; }
.mft8-qitem.next { background: rgba(255,180,84,0.12); }
.mft8-qitem .qi-pos { width: 14px; color: var(--accent2); text-align: center; }
.mft8-qitem .qi-call { font-weight: bold; cursor: pointer; }
.mft8-qitem .qi-call:hover { color: var(--accent); }
.mft8-qitem .qi-band { color: var(--muted); margin-left: auto; font-size: .92em; }
.mft8-qitem .qi-x { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 1em; }
.mft8-qitem .qi-x:hover { color: var(--red, #ff5566); }

@media (max-width: 900px) {
    .mft8-content { flex-direction: column; }
    .mft8-roster { flex: 0 0 auto; max-height: 38vh; }
}

/* editable per-slice freq box on multi-ft8 */
input.mft8-freq {
    width: 78px;
    background: rgba(0,0,0,0.4);
    border: 1px solid var(--panel-border);
    color: var(--muted);
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.8rem;
    padding: 1px 5px;
}
input.mft8-freq:focus { outline: none; border-color: var(--band); color: var(--text); }

/* ══════════════════════════════════════════════════════════════════════════
   Canonical tab bar — used everywhere in-page tabs are needed.
   Classes: .cobras-tab-bar > .cobras-tab-btn (+ .active), .cobras-tab-pane
   ══════════════════════════════════════════════════════════════════════════ */
.cobras-tab-bar {
    display: flex;
    gap: 3px;
    padding: 10px 0 0;
    border-bottom: 1px solid var(--panel-border);
    flex-shrink: 0;
}

.cobras-tab-btn {
    background: transparent;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 5px 5px 0 0;
    color: var(--muted);
    font-family: inherit;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    padding: 6px 18px;
    cursor: pointer;
    position: relative;
    bottom: -1px;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.cobras-tab-btn:hover {
    color: var(--text);
    background: rgba(57,255,136,0.06);
    border-color: var(--panel-border);
}

.cobras-tab-btn.active {
    color: var(--accent);
    background: var(--bg);
    border-color: var(--panel-border);
    border-bottom-color: var(--bg);
    text-shadow: 0 0 8px var(--accent-dim);
}

/* ── CW keyboard + macro console (inside the decode window, CW mode) ── */
#cw-console {
    border-top: 1px solid rgba(57,255,136,0.2);
    padding: 8px; display: flex; flex-direction: column; gap: 6px;
}
.cwc-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cwc-row label { font-size: .72rem; color: #9fe9c0; display: flex; gap: 4px; align-items: center; }
.cwc-row input, .cwc-send input {
    background: #07100a; border: 1px solid rgba(57,255,136,0.25); color: #eafff3;
    border-radius: 5px; padding: 4px 7px; font-family: inherit; font-size: .8rem;
}
#cwc-wpm { width: 46px; }
#cwc-call { width: 92px; text-transform: uppercase; }
.cwc-macros { display: flex; flex-wrap: wrap; gap: 5px; }
.cwc-macro { font-size: .72rem; }
.cwc-send { display: flex; gap: 6px; }
.cwc-send input { flex: 1; text-transform: uppercase; }
.cwc-hint { font-size: .68rem; color: #6fbf95; min-height: 1em; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; }