/* ── APRS PropView — Dark Theme Stylesheet ─────────────────────── */

:root {
    color-scheme: dark;
    --bg-primary: #0d1117;
    --bg-secondary: #161b22;
    --bg-tertiary: #21262d;
    --bg-card: #1c2128;
    --border: #30363d;
    --text-primary: #e6edf3;
    --text-secondary: #8b949e;
    --text-muted: #6e7681;
    --accent-blue: #58a6ff;
    --accent-green: #3fb950;
    --accent-red: #f85149;
    --accent-orange: #d29922;
    --accent-purple: #bc8cff;
    --accent-cyan: #39d5ff;
    --rf-color: #f85149;
    --is-color: #58a6ff;
    --line-rf: rgba(248, 81, 73, 0.6);
    --line-heard: rgba(63, 185, 80, 0.6);
    --prop-none: #6e7681;
    --prop-poor: #f85149;
    --prop-fair: #d29922;
    --prop-good: #3fb950;
    --prop-excellent: #58a6ff;
    --scrollbar-bg: #161b22;
    --scrollbar-thumb: #30363d;
    --header-bg:
        radial-gradient(circle at top left, rgba(57, 213, 255, 0.08), transparent 34%),
        linear-gradient(180deg, rgba(28, 33, 40, 0.96), rgba(22, 27, 34, 0.96));
    --panel-bg: linear-gradient(180deg, rgba(22, 27, 34, 0.98), rgba(17, 21, 27, 0.98));
    --map-panel-bg:
        radial-gradient(circle at top left, rgba(88, 166, 255, 0.06), transparent 25%),
        linear-gradient(180deg, rgba(13, 17, 23, 0.98), rgba(13, 17, 23, 1));
    --map-controls-bg: linear-gradient(180deg, rgba(17, 21, 27, 0.9), rgba(13, 17, 23, 0.98));
    --tabbar-bg: rgba(13, 17, 23, 0.4);
    --sticky-panel-bg: linear-gradient(180deg, rgba(22, 27, 34, 0.98), rgba(22, 27, 34, 0.88) 82%, rgba(22, 27, 34, 0));
    --field-bg-muted: rgba(13, 17, 23, 0.7);
    --button-bg-muted: rgba(28, 33, 40, 0.72);
    --button-bg-hover: rgba(33, 38, 45, 0.95);
    --chip-bg: rgba(13, 17, 23, 0.78);
    --shadow-color: rgba(0, 0, 0, 0.22);
}

:root.ui-theme-light {
    color-scheme: light;
    --bg-primary: #f5f7fa;
    --bg-secondary: #ffffff;
    --bg-tertiary: #e8edf3;
    --bg-card: #ffffff;
    --border: #c9d3df;
    --text-primary: #17202a;
    --text-secondary: #4d5b6b;
    --text-muted: #6f7d8d;
    --accent-blue: #0969da;
    --accent-green: #1a7f37;
    --accent-red: #cf222e;
    --accent-orange: #9a6700;
    --accent-purple: #8250df;
    --accent-cyan: #087ea4;
    --rf-color: #cf222e;
    --is-color: #0969da;
    --line-rf: rgba(207, 34, 46, 0.6);
    --line-heard: rgba(26, 127, 55, 0.6);
    --prop-none: #8c959f;
    --prop-poor: #cf222e;
    --prop-fair: #bf8700;
    --prop-good: #1a7f37;
    --prop-excellent: #0969da;
    --scrollbar-bg: #e8edf3;
    --scrollbar-thumb: #b8c3cf;
    --header-bg:
        radial-gradient(circle at top left, rgba(9, 105, 218, 0.12), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(238, 243, 248, 0.98));
    --panel-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 245, 249, 0.98));
    --map-panel-bg:
        radial-gradient(circle at top left, rgba(9, 105, 218, 0.08), transparent 25%),
        linear-gradient(180deg, rgba(245, 247, 250, 0.98), rgba(245, 247, 250, 1));
    --map-controls-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(241, 245, 249, 0.98));
    --tabbar-bg: rgba(232, 237, 243, 0.65);
    --sticky-panel-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.88) 82%, rgba(255, 255, 255, 0));
    --field-bg-muted: rgba(255, 255, 255, 0.82);
    --button-bg-muted: rgba(232, 237, 243, 0.9);
    --button-bg-hover: rgba(214, 222, 232, 0.95);
    --chip-bg: rgba(255, 255, 255, 0.82);
    --shadow-color: rgba(31, 41, 55, 0.14);
}

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

body {
    font-family: var(--font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
    background: var(--bg-primary);
    color: var(--text-primary);
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ── Scrollbar ──────────────────────────────────────────────────── */

::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--scrollbar-bg);
}
::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #484f58;
}

/* ── Header ─────────────────────────────────────────────────────── */

#header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px 9px;
    background: var(--header-bg);
    border-bottom: 1px solid var(--border);
    min-height: 64px;
    gap: 16px;
    flex-shrink: 0;
    position: relative;
    z-index: 10;
    box-shadow: 0 10px 24px var(--shadow-color);
}

.header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.header-left h1 {
    font-size: 18px;
    font-weight: 600;
    white-space: nowrap;
}

.header-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.header-logo {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    object-fit: contain;
    border-radius: 12px;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.28));
}

.header-brand-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.05;
}

.header-brand-title {
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
}

.header-brand-title strong {
    color: var(--accent-cyan);
    font-weight: 800;
}

.header-brand-version {
    margin-top: 4px;
    color: var(--text-muted);
    font-family: "Consolas", "Courier New", monospace;
    font-size: 10px;
    letter-spacing: .04em;
}

.station-identity {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.station-identity-label {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
    text-transform: uppercase;
}

.station-badge {
    background: var(--chip-bg);
    color: var(--accent-cyan);
    font-family: "Consolas", "Courier New", monospace;
    font-size: 14px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(57, 213, 255, 0.2);
    box-shadow: inset 0 0 0 1px rgba(57, 213, 255, 0.06);
}

.header-center {
    flex: 1;
    max-width: 430px;
}

.prop-gauges-row {
    display: flex;
    gap: 12px;
}

.prop-gauge {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 7px 10px;
    background: rgba(13, 17, 23, 0.42);
    border: 1px solid rgba(48, 54, 61, 0.8);
    border-radius: 12px;
    backdrop-filter: blur(4px);
    transition: border-color 0.8s ease, box-shadow 0.8s ease, background 0.8s ease;
}

html.visual-condition-backdrop .prop-gauge.ambient-poor {
    border-color: rgba(239, 106, 112, 0.3);
    box-shadow: inset 0 0 22px rgba(239, 106, 112, 0.055);
}

html.visual-condition-backdrop .prop-gauge.ambient-fair {
    border-color: rgba(217, 166, 46, 0.32);
    box-shadow: inset 0 0 24px rgba(217, 166, 46, 0.065);
}

html.visual-condition-backdrop .prop-gauge.ambient-good {
    border-color: rgba(88, 166, 255, 0.32);
    box-shadow: inset 0 0 25px rgba(88, 166, 255, 0.07);
}

html.visual-condition-backdrop .prop-gauge.ambient-excellent {
    border-color: rgba(69, 212, 131, 0.38);
    box-shadow: inset 0 0 28px rgba(69, 212, 131, 0.085), 0 0 18px rgba(69, 212, 131, 0.045);
}

.prop-label {
    font-size: 10px;
    color: var(--text-secondary);
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    white-space: normal;
    line-height: 1.25;
}

.prop-bar-container {
    height: 10px;
    background: var(--bg-tertiary);
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.prop-bar {
    height: 100%;
    border-radius: 5px;
    transition: width 0.8s ease, background-color 0.8s ease;
    background: var(--prop-none);
}

.prop-bar.none { background: var(--prop-none); }
.prop-bar.poor { background: var(--prop-poor); }
.prop-bar.fair { background: var(--prop-fair); }
.prop-bar.good { background: var(--prop-good); }
.prop-bar.excellent { background: linear-gradient(90deg, var(--prop-good), var(--prop-excellent)); }

.prop-stats {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    gap: 8px;
}

.prop-level {
    color: var(--text-secondary);
    text-transform: uppercase;
    font-weight: 600;
}

.prop-score {
    color: var(--text-muted);
}

.prop-event-card {
    margin: 0 0 16px;
    padding: 14px;
    border: 1px solid var(--border);
    border-left: 4px solid var(--text-muted);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(88, 166, 255, .06), transparent 58%), var(--bg-secondary);
}
.prop-event-card.developing { border-left-color: var(--accent-orange); }
.prop-event-card.confirmed { border-left-color: var(--accent-green); }
.prop-event-card.peak { border-left-color: #39d5ff; box-shadow: 0 0 18px rgba(57, 213, 255, .12); }
.prop-event-card.fading { border-left-color: #bc8cff; }
.prop-event-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.prop-event-heading > div { display: flex; align-items: baseline; gap: 10px; }
.prop-event-kicker { color: var(--text-muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.prop-event-heading strong { color: var(--text-primary); font: 800 15px Consolas, monospace; }
.prop-event-heading > span { color: var(--text-muted); font-size: 10px; }
.prop-event-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.prop-event-summary > div { padding: 8px 10px; border-radius: 7px; background: rgba(255,255,255,.035); }
.prop-event-summary small { display: block; color: var(--text-muted); font-size: 9px; text-transform: uppercase; }
.prop-event-summary b { display: block; margin-top: 4px; color: var(--text-primary); font: 700 13px Consolas, monospace; }
.prop-event-timeline { display: flex; gap: 6px; margin-top: 11px; overflow-x: auto; }
.prop-event-timeline span { flex: 0 0 auto; padding: 5px 7px; border: 1px solid var(--border); border-radius: 6px; color: var(--text-secondary); font-size: 9px; }
.prop-event-timeline span.confirmed,
.prop-event-timeline span.peak { border-color: rgba(63,185,80,.45); }
.prop-event-card > p { margin: 10px 0 0; color: var(--text-muted); font-size: 10px; }
@media (max-width: 700px) { .prop-event-summary { grid-template-columns: repeat(2, 1fr); } }

.local-scope-label {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(57, 213, 255, .75);
    border-radius: 999px;
    background: rgba(7, 20, 29, .88);
    color: #b9f3ff;
    font: 800 9px Consolas, monospace;
    letter-spacing: .05em;
    white-space: nowrap;
    box-shadow: 0 0 12px rgba(57, 213, 255, .22);
}

.watched-path-scope { margin-top: 8px; }

.header-right {
    display: flex;
    align-items: stretch;
    gap: 8px;
    flex-wrap: nowrap;
    justify-content: flex-end;
}

.ui-theme-control {
    display: inline-flex;
    align-items: center;
    align-self: center;
    gap: 7px;
    padding: 5px 7px 5px 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--chip-bg);
}

.header-utility-stack {
    display: inline-grid;
    grid-template-areas:
        "theme theme"
        "health bell";
    justify-items: end;
    align-content: center;
    gap: 5px;
    align-self: center;
}

.ui-theme-control-label {
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: none;
    white-space: nowrap;
}

.ui-theme-toggle {
    width: 30px;
    min-width: 30px;
    height: 30px;
    align-self: center;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
}

.ui-theme-toggle:hover {
    background: var(--bg-tertiary);
    border-color: rgba(88, 166, 255, 0.35);
    transform: translateY(-1px);
}

.header-action {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-width: 154px;
}

.header-action-controls {
    display: flex;
    gap: 6px;
    align-items: center;
}

.btn-header-action {
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.1;
    white-space: nowrap;
    flex: 1;
}

.header-action-select {
    min-width: 90px;
    padding: 7px 8px;
    border-radius: 8px;
    border: 1px solid rgba(48, 54, 61, 0.85);
    background: var(--chip-bg);
    color: var(--text-primary);
    font-size: 11px;
}

.header-action-status {
    min-height: 14px;
    font-size: 10px;
    color: var(--text-muted);
    text-align: center;
}

.header-action-status.ready {
    color: var(--accent-green);
}

.header-action-status.blocked {
    color: var(--accent-orange);
}

.header-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    font-size: 11px;
    color: var(--text-secondary);
}

.connection-chip {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 164px;
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--chip-bg);
    color: var(--text-primary);
    font-size: 11px;
    line-height: 1;
}

.connection-stack {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    align-self: center;
}

.connection-chip .chip-label {
    color: var(--text-secondary);
    text-transform: none;
    letter-spacing: 0.04em;
    font-size: 11px;
}

.connection-chip .chip-value {
    font-weight: 700;
}

.connection-chip.online {
    border-color: rgba(63, 185, 80, 0.45);
    box-shadow: 0 0 0 1px rgba(63, 185, 80, 0.18) inset;
}

.connection-chip.online .chip-value {
    color: var(--accent-green);
}

.connection-chip.read-only,
.connection-chip.partial,
.connection-chip.reconnecting {
    border-color: rgba(210, 153, 34, 0.45);
    box-shadow: 0 0 0 1px rgba(210, 153, 34, 0.18) inset;
}

.connection-chip.read-only .chip-value,
.connection-chip.partial .chip-value,
.connection-chip.reconnecting .chip-value {
    color: var(--accent-orange);
}

.connection-chip.reconnecting {
    animation: connection-reconnect-pulse 1.15s ease-in-out infinite;
}

.connection-chip.offline {
    border-color: rgba(248, 81, 73, 0.45);
    box-shadow: 0 0 0 1px rgba(248, 81, 73, 0.18) inset;
}

.connection-chip.offline .chip-value {
    color: var(--accent-red);
}

@keyframes connection-reconnect-pulse {
    0%, 100% {
        border-color: rgba(210, 153, 34, 0.5);
        box-shadow: 0 0 0 1px rgba(210, 153, 34, 0.2) inset;
    }
    50% {
        border-color: rgba(63, 185, 80, 0.78);
        box-shadow:
            0 0 0 1px rgba(63, 185, 80, 0.3) inset,
            0 0 10px rgba(63, 185, 80, 0.22);
    }
}

.header-notifications {
    grid-area: bell;
    position: relative;
    align-self: flex-end;
}

.source-health-control {
    grid-area: health;
    position: relative;
    align-self: flex-end;
}

.source-health-button {
    min-width: 68px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--chip-bg);
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 800;
}

.source-health-dot,
.source-health-state-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
    box-shadow: 0 0 0 2px rgba(139, 148, 158, .14);
}

.source-health-button[data-state="healthy"] .source-health-dot { background: var(--accent-green); }
.source-health-button[data-state="delayed"] .source-health-dot { background: var(--accent-orange); }
.source-health-button[data-state="attention"] .source-health-dot { background: var(--accent-red); }

.source-health-button b {
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--accent-red);
    color: #fff;
    font-size: 9px;
    line-height: 16px;
}

.source-health-panel {
    position: fixed;
    width: min(390px, calc(100vw - 24px));
    max-height: min(540px, calc(100vh - 24px));
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-secondary);
    box-shadow: 0 14px 38px rgba(0, 0, 0, .48);
    z-index: 30000;
    overflow: hidden;
}

.source-health-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 12px;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.source-health-header small { color: var(--text-muted); font-size: 9px; font-weight: 500; }
.source-health-list { max-height: 390px; overflow-y: auto; }
.source-health-item { display: grid; grid-template-columns: 10px 1fr; gap: 9px; padding: 9px 12px; border-bottom: 1px solid rgba(48, 54, 61, .65); }
.source-health-item.live .source-health-state-dot { background: var(--accent-green); }
.source-health-item.delayed .source-health-state-dot,
.source-health-item.waiting .source-health-state-dot,
.source-health-item.configured .source-health-state-dot { background: var(--accent-orange); }
.source-health-item.offline .source-health-state-dot,
.source-health-item.stale .source-health-state-dot { background: var(--accent-red); }
.source-health-item.disabled .source-health-state-dot { background: var(--text-muted); }
.source-health-state-dot { margin-top: 4px; }
.source-health-copy > div { display: flex; justify-content: space-between; gap: 10px; }
.source-health-copy strong { color: var(--text-primary); font-size: 11px; }
.source-health-copy span { color: var(--text-secondary); font: 800 9px Consolas, monospace; }
.source-health-copy small,
.source-health-copy em { display: block; margin-top: 3px; color: var(--text-muted); font-size: 10px; line-height: 1.3; }
.source-health-copy em { color: var(--accent-red); font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 330px; }
.source-health-note,
.source-health-empty { padding: 10px 12px; color: var(--text-muted); font-size: 10px; line-height: 1.35; }
.source-health-note { border-top: 1px solid var(--border); }

.header-utility-stack .ui-theme-control {
    grid-area: theme;
    align-self: flex-end;
}

.notification-button {
    position: relative;
    width: 32px;
    min-width: 32px;
    height: 32px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--chip-bg);
    color: var(--text-primary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.notification-button.has-unread {
    border-color: rgba(210, 153, 34, 0.7);
    box-shadow: 0 0 0 1px rgba(210, 153, 34, 0.25) inset;
}

.notification-count {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--accent-red);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
}

.notification-panel {
    position: fixed;
    width: min(360px, calc(100vw - 24px));
    max-height: 420px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-secondary);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    z-index: 30000;
    overflow: hidden;
}

.notification-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(88, 166, 255, 0.18);
    color: var(--text-primary);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.notification-panel-header button {
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 11px;
    padding: 4px 8px;
}

.notification-list {
    max-height: 360px;
    overflow-y: auto;
}

.notification-item {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(48, 54, 61, 0.7);
}

.notification-item:last-child {
    border-bottom: 0;
}

.notification-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary);
    font-size: 11px;
    font-weight: 800;
}

.notification-item.warning .notification-title {
    color: var(--accent-orange);
}

.notification-item.error .notification-title {
    color: var(--accent-red);
}

.notification-body {
    margin-top: 4px;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.35;
}

.notification-time,
.notification-empty {
    margin-top: 5px;
    color: var(--text-muted);
    font-size: 11px;
}

.notification-empty {
    padding: 16px 12px;
    margin: 0;
}

.header-stats span {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 58px;
    padding: 7px 8px;
    background: var(--chip-bg);
    border: 1px solid rgba(48, 54, 61, 0.8);
    border-radius: 10px;
}

.header-stats b {
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.1;
}

/* ── Main Content ───────────────────────────────────────────────── */

#main-content {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* ── Map Panel ──────────────────────────────────────────────────── */

#map-panel {
    flex: 1;
    position: relative;
    z-index: 1;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--map-panel-bg);
}

#map-panel.visual-map-harmony #map::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 600;
    pointer-events: none;
    box-shadow:
        inset 0 0 42px rgba(9, 18, 28, 0.24),
        inset 0 -28px 42px rgba(9, 18, 28, 0.18);
    background: linear-gradient(90deg, rgba(25, 67, 91, 0.035), transparent 18%, transparent 82%, rgba(25, 67, 91, 0.045));
}

.propagation-aura {
    filter: drop-shadow(0 0 10px currentColor);
    animation: propagationAuraBreathe 8s ease-in-out infinite;
}

@keyframes propagationAuraBreathe {
    0%, 100% { fill-opacity: 0.045; stroke-opacity: 0.22; }
    50% { fill-opacity: 0.075; stroke-opacity: 0.34; }
}

.my-station-visual {
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
}

.my-station-ring {
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 32px;
    height: 32px;
    margin: -16px 0 0 -16px;
    border: 1px solid rgba(57, 213, 255, 0.56);
    border-radius: 50%;
    pointer-events: none;
    box-shadow: 0 0 12px rgba(57, 213, 255, 0.22);
}

.visual-home-marker .my-station-ring {
    display: block;
}

.visual-home-marker .my-station-ring.ring-two {
    animation: homeStationRing 5.5s ease-out infinite;
}

.visual-home-marker .my-station-ring.ring-one {
    width: 25px;
    height: 25px;
    margin: -12.5px 0 0 -12.5px;
    opacity: 0.7;
}

@keyframes homeStationRing {
    0% { transform: scale(0.72); opacity: 0.5; }
    70%, 100% { transform: scale(1.55); opacity: 0; }
}

.rf-path-reveal {
    stroke-dasharray: 8 14 !important;
    animation: rfPathReveal 2.5s ease-out both;
    filter: drop-shadow(0 0 4px currentColor);
}

@keyframes rfPathReveal {
    0% { stroke-dashoffset: 140; opacity: 0; }
    25% { opacity: 1; }
    100% { stroke-dashoffset: 0; }
}

.watched-path-flow {
    animation: watchedPathFlow 5s linear infinite;
    filter: drop-shadow(0 0 3px rgba(231, 251, 255, 0.55));
}

.packet-animation-canvas {
    position: absolute;
    inset: 0;
    z-index: 450;
    pointer-events: none;
    background: transparent;
    border: 0;
    border-radius: 0;
    margin: 0;
}

.aprs-emoji-marker {
    position: relative;
}

.aprs-emoji-marker.packet-origin-burst::before,
.aprs-emoji-marker.packet-origin-burst::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 100%;
    border: 2px solid var(--packet-burst-color, #f85149);
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.7);
    opacity: 0;
    animation: packetOriginBurst 1.05s ease-out both;
    filter: drop-shadow(0 0 4px var(--packet-burst-color, #f85149));
}

.aprs-emoji-marker.packet-origin-burst::after {
    animation-delay: 0.18s;
}

.aprs-emoji-marker.packet-origin-burst-enhanced::before,
.aprs-emoji-marker.packet-origin-burst-enhanced::after {
    animation-duration: 1.4s;
    border-width: 2.5px;
}

@keyframes packetOriginBurst {
    0% { transform: translate(-50%, -50%) scale(0.65); opacity: 0.95; }
    70% { opacity: 0.42; }
    100% { transform: translate(-50%, -50%) scale(3.1); opacity: 0; }
}

@keyframes watchedPathFlow {
    to { stroke-dashoffset: -64; }
}

.map-activity-moment {
    position: absolute;
    left: 50%;
    bottom: 76px;
    z-index: 1050;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 220px;
    padding: 10px 14px;
    transform: translateX(-50%);
    border: 1px solid rgba(94, 181, 220, 0.34);
    border-radius: 14px;
    color: var(--text-primary);
    background: rgba(13, 22, 31, 0.84);
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28), inset 0 1px rgba(255, 255, 255, 0.035);
    animation: activityMomentIn 0.55s ease-out both;
    pointer-events: none;
}

.map-activity-moment.leaving {
    animation: activityMomentOut 0.8s ease-in both;
}

.map-activity-moment strong,
.map-activity-moment small {
    display: block;
}

.map-activity-moment strong {
    font-size: 12px;
    font-weight: 600;
}

.map-activity-moment small {
    margin-top: 2px;
    color: var(--text-secondary);
    font-size: 10px;
}

.activity-moment-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: #45d483;
    box-shadow: 0 0 10px rgba(69, 212, 131, 0.75);
}

@keyframes activityMomentIn {
    from { opacity: 0; transform: translate(-50%, 12px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes activityMomentOut {
    to { opacity: 0; transform: translate(-50%, -8px); }
}

#map {
    flex: 1;
    min-height: 0;
    background: var(--bg-primary);
}

.map-search {
    position: absolute;
    top: var(--map-overlay-top, 12px);
    left: 56px;
    z-index: 650;
    display: flex;
    gap: 6px;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: rgba(13, 17, 23, 0.88);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.map-search.collapsed {
    gap: 0;
    padding: 0;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.map-search input {
    width: 126px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    padding: 6px 8px;
    font-size: 12px;
    text-transform: uppercase;
}

.map-search.collapsed input,
.map-search.collapsed #btn-map-search-collapse {
    display: none;
}

.map-search button {
    border: 1px solid var(--accent-blue);
    border-radius: 4px;
    background: rgba(88, 166, 255, 0.16);
    color: var(--accent-blue);
    font-size: 12px;
    font-weight: 700;
    padding: 6px 10px;
    cursor: pointer;
}

#btn-map-search-collapse {
    min-width: 30px;
    padding: 6px 8px;
    border-color: var(--border);
    color: var(--text-secondary);
    background: var(--bg-secondary);
}

#map-panel.has-expanded-weather-alert .map-search {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

#symbol-size-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

#symbol-size-popover {
    min-width: 170px;
}

#station-symbol-size-value {
    margin-top: 6px;
    color: var(--text-secondary);
    font-size: 12px;
    text-align: right;
}

/* Leaflet overrides for dark theme — only when .dark-tiles is on the map */
.dark-tiles .leaflet-tile-pane {
    filter: invert(1) hue-rotate(180deg) brightness(0.95) contrast(1.1);
}

.leaflet-control-zoom a {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border) !important;
}

.leaflet-control-attribution {
    background: rgba(13, 17, 23, 0.8) !important;
    color: var(--text-muted) !important;
    font-size: 10px !important;
}

.leaflet-control-attribution a {
    color: var(--text-secondary) !important;
}

.leaflet-popup-content-wrapper {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
}

.leaflet-popup-tip {
    background: var(--bg-secondary) !important;
}

.leaflet-popup-content {
    margin: 10px 14px !important;
    font-size: 13px;
    line-height: 1.5;
}

.leaflet-popup-content .popup-call {
    font-family: "Consolas", monospace;
    font-weight: 700;
    font-size: 15px;
}

.leaflet-popup-content .popup-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-color);
}

.leaflet-popup-content .popup-source-tag {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: auto;
}
.popup-tag-rf { background: rgba(248,81,73,0.2); color: var(--rf-color); }
.popup-tag-aprs_is { background: rgba(88,166,255,0.2); color: var(--is-color); }

.leaflet-popup-content .popup-rf { color: var(--rf-color); }
.leaflet-popup-content .popup-is { color: var(--is-color); }

.leaflet-popup-content .popup-table {
    border-collapse: collapse;
    font-size: 12px;
    width: 100%;
}
.leaflet-popup-content .popup-table td {
    padding: 2px 0;
    vertical-align: top;
}
.leaflet-popup-content .popup-lbl {
    color: var(--text-muted);
    white-space: nowrap;
    padding-right: 8px;
    font-weight: 500;
    width: 1%;
}
.leaflet-popup-content .popup-path {
    font-family: "Consolas", monospace;
    font-size: 11px;
    word-break: break-all;
}
.leaflet-popup-content .popup-weather-row td:last-child {
    font-family: "Consolas", "Courier New", monospace;
    color: var(--text-primary);
}
.leaflet-popup-content .popup-detail {
    color: var(--text-secondary);
    font-size: 12px;
}

.popup-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}

.popup-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(63, 185, 80, 0.45);
    background: rgba(63, 185, 80, 0.14);
    color: var(--text-primary);
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 9px;
    line-height: 1.2;
    text-decoration: none;
}

.popup-action-btn:hover {
    background: rgba(63, 185, 80, 0.22);
    border-color: rgba(63, 185, 80, 0.75);
}

.object-create-popup {
    display: flex;
    flex-direction: column;
    height: min(var(--object-popup-max-height, 520px), calc(100vh - 190px));
    max-height: min(var(--object-popup-max-height, 520px), calc(100vh - 190px));
    min-width: min(320px, calc(100vw - 64px));
    overflow: hidden;
}

.object-create-leaflet-popup .leaflet-popup-content {
    max-height: min(var(--object-popup-max-height, 520px), calc(100vh - 170px));
    margin: 8px 10px !important;
    overflow: hidden;
}

.object-popup-header {
    flex: 0 0 auto;
    margin-bottom: 7px;
}

.object-popup-scroll {
    display: grid;
    flex: 1 1 auto;
    gap: 7px;
    min-height: 0;
    overflow: auto;
    padding-right: 4px;
    scrollbar-width: thin;
}

.object-create-popup input,
.object-create-popup select {
    border: 1px solid var(--border);
    background: var(--bg-primary);
    color: var(--text-primary);
    border-radius: 6px;
    font-size: 12px;
    padding: 6px 8px;
    width: 100%;
    min-width: 0;
}

.object-popup-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.object-popup-grid label {
    color: var(--text-secondary);
    display: grid;
    font-size: 11px;
    gap: 3px;
}

.object-popup-grid .object-popup-check {
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 6px;
    display: flex;
    gap: 6px;
    padding: 6px 8px;
}

.object-popup-grid .object-popup-check input {
    flex: 0 0 auto;
    width: auto;
}

.object-symbol-preview {
    align-items: center;
    background: rgba(88, 166, 255, 0.08);
    border: 1px solid rgba(88, 166, 255, 0.25);
    border-radius: 6px;
    color: var(--text-primary);
    display: flex;
    font-size: 12px;
    gap: 8px;
    padding: 6px 8px;
}

.object-popup-actions {
    background: var(--bg-secondary);
    box-shadow: 0 -8px 16px rgba(0, 0, 0, 0.22);
    flex: 0 0 auto;
    margin-top: 7px;
}

.object-popup-actions .popup-action-btn {
    min-height: 34px;
    width: 100%;
}

#map-controls {
    position: relative;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 7px;
    padding: 7px 12px 8px;
    border-top: 1px solid rgba(48, 54, 61, 0.85);
    background: var(--map-controls-bg);
    box-shadow: 0 -10px 24px var(--shadow-color);
}

#map-controls button {
    width: 34px;
    height: 30px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-radius: 7px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
}

#map-controls button:hover {
    background: var(--bg-tertiary);
    border-color: rgba(88, 166, 255, 0.35);
    transform: translateY(-1px);
}

#map-controls button.active {
    background: var(--bg-tertiary);
    border-color: var(--accent-blue);
}

#map-controls .map-wide-control {
    width: auto;
    min-width: 68px;
    padding: 4px 9px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.map-control-divider {
    width: 1px;
    height: 24px;
    margin: 0 3px;
    background: rgba(139, 148, 158, 0.28);
}

#line-style-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.line-style-popover {
    position: absolute;
    left: 0;
    bottom: calc(100% + 8px);
    width: 220px;
    display: none;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel-bg);
    box-shadow: 0 12px 30px var(--shadow-color);
    z-index: 1200;
}

.line-style-popover.open {
    display: grid;
}

.line-style-popover label {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
}

.line-style-popover select,
.line-style-popover input[type="range"],
.line-style-popover input[type="color"] {
    width: 100%;
    min-width: 0;
}

.line-style-popover input[type="color"] {
    height: 28px;
    padding: 2px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-card);
}

.line-style-popover .line-style-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent-blue);
    justify-self: start;
}

/* ── Side Panel ─────────────────────────────────────────────────── */

#side-panel {
    width: 400px;
    min-width: 400px;
    flex-shrink: 0;
    background: var(--panel-bg);
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    z-index: 5;
    transition: width 0.25s ease, min-width 0.25s ease;
    box-shadow: -14px 0 30px var(--shadow-color);
}

#side-panel.collapsed {
    width: 0;
    min-width: 0;
    border-left: none;
    overflow: hidden;
}

#side-panel.collapsed .tab-bar,
#side-panel.collapsed .tab-content {
    display: none;
}

/* Sidebar toggle button — inside #map-panel, right edge */
#sidebar-toggle {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 48px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-right: none;
    border-radius: 6px 0 0 6px;
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    transition: color 0.15s, background 0.15s;
    padding: 0;
}

#sidebar-toggle:hover {
    color: var(--accent-blue);
    background: var(--bg-tertiary);
}

.tab-bar {
    display: flex;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    flex-wrap: wrap;
    padding: 8px 8px 6px;
    gap: 6px;
    background: var(--tabbar-bg);
}

.tab-btn {
    flex: 1 1 calc(25% - 6px);
    padding: 7px 8px;
    border: 1px solid transparent;
    background: var(--button-bg-muted);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 10px;
    transition: all 0.15s;
    white-space: nowrap;
    min-width: 0;
    text-align: center;
    letter-spacing: 0.3px;
}

.tab-btn:hover {
    color: var(--text-primary);
    background: var(--button-bg-hover);
    border-color: var(--border);
}

.tab-btn.active {
    color: #fff;
    background: linear-gradient(180deg, rgba(88, 166, 255, 0.92), rgba(43, 123, 212, 0.92));
    border-color: rgba(88, 166, 255, 0.95);
    box-shadow: 0 10px 20px rgba(31, 111, 235, 0.2);
}

.tab-content {
    display: none;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    flex-direction: column;
    min-height: 0;
}

.tab-content.active {
    display: flex;
    border-top: 2px solid rgba(88, 166, 255, 0.28);
}

#tab-settings.active {
    position: fixed;
    inset: 178px 0 20px;
    z-index: 2200;
    display: flex;
    background: var(--bg-primary);
    border-top: 1px solid var(--border);
    box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.24);
    overflow: hidden;
}

html.ui-theme-light #tab-settings.active {
    background: var(--bg-primary);
}

#tab-messages.active {
    position: fixed;
    top: 178px;
    right: 24px;
    bottom: 24px;
    z-index: 2190;
    width: min(50vw, 760px);
    min-width: min(460px, calc(100vw - 48px));
    display: flex;
    background: var(--panel-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.42);
    overflow: hidden;
}

html.ui-theme-light #tab-messages.active {
    background: var(--panel-bg);
    box-shadow: 0 18px 50px rgba(31, 35, 40, 0.2);
}

/* ── Filter Bar ─────────────────────────────────────────────────── */

.filter-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    flex-wrap: wrap;
}

.filter-bar label {
    font-size: 12px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
}

.filter-bar select {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 3px 6px;
    font-size: 12px;
}

.filter-count {
    margin-left: auto;
    font-size: 11px;
    color: var(--text-muted);
}

.btn-small {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 11px;
    cursor: pointer;
}

.btn-small:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

/* ── Station List ───────────────────────────────────────────────── */

.station-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.station-call-filter {
    width: 124px;
    min-width: 104px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-radius: 6px;
    font-size: 12px;
    padding: 6px 8px;
}

.empty-state {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 16px;
    border: 1px dashed rgba(88, 166, 255, 0.18);
    border-radius: 12px;
    background: var(--bg-card);
    color: var(--text-secondary);
}

.empty-state-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}

.empty-state-copy {
    font-size: 12px;
    line-height: 1.45;
}

.empty-state.loading {
    border-style: solid;
    border-color: rgba(88, 166, 255, 0.24);
    background: var(--bg-card);
}

.station-item {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    margin-bottom: 8px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-card);
    cursor: pointer;
    transition: background 0.1s, transform 0.1s, border-color 0.1s;
    gap: 10px;
}

.station-item:hover {
    background: var(--bg-tertiary);
    border-color: rgba(88, 166, 255, 0.28);
    transform: translateY(-1px);
}

.station-item.rf {
    border-left: 3px solid var(--rf-color);
}

.station-item.aprs_is {
    border-left: 3px solid var(--is-color);
}

.station-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.station-info {
    flex: 1;
    min-width: 0;
}

.station-call {
    font-family: "Consolas", monospace;
    font-weight: 700;
    font-size: 13px;
    color: var(--text-primary);
}

/* Direct / Via Digi badges */
.heard-badge {
    font-size: 0.65em;
    padding: 1px 5px;
    border-radius: 3px;
    font-weight: 600;
    vertical-align: middle;
    margin-left: 4px;
    letter-spacing: 0.5px;
}
.heard-badge.direct {
    background: rgba(63, 185, 80, 0.2);
    color: #3fb950;
    border: 1px solid rgba(63, 185, 80, 0.4);
}
.heard-badge.via-digi {
    background: rgba(210, 153, 34, 0.2);
    color: #d29922;
    border: 1px solid rgba(210, 153, 34, 0.4);
}
.heard-badge.port {
    background: rgba(88, 166, 255, 0.16);
    color: #8bcbff;
    border: 1px solid rgba(88, 166, 255, 0.32);
}

/* Arrow markers on map lines */
.arrow-icon {
    background: none !important;
    border: none !important;
}

.station-detail {
    font-size: 11px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.station-meta {
    text-align: right;
    flex-shrink: 0;
}

.station-delete {
    width: 28px;
    height: 28px;
    border: 1px solid rgba(248, 81, 73, 0.32);
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
    font-size: 18px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.station-delete:hover {
    background: rgba(248, 81, 73, 0.16);
    border-color: rgba(248, 81, 73, 0.62);
    color: #ff7b72;
}

.station-distance {
    font-size: 12px;
    font-weight: 700;
    color: var(--accent-cyan);
}

.station-time {
    font-size: 10px;
    color: var(--text-muted);
}

/* ── Packet List ────────────────────────────────────────────────── */

.packet-list {
    flex: 1;
    overflow-y: auto;
    font-family: "Consolas", monospace;
    font-size: 11px;
    padding: 4px;
}

.packet-item {
    padding: 4px 8px;
    border-bottom: 1px solid rgba(48, 54, 61, 0.5);
    word-break: break-all;
    line-height: 1.4;
}

.packet-item .pkt-time {
    color: var(--text-muted);
    margin-right: 6px;
}

.packet-item .pkt-source {
    font-weight: 700;
    margin-right: 4px;
}

.packet-item .pkt-source.rf { color: var(--rf-color); }
.packet-item .pkt-source.aprs_is { color: var(--is-color); }
.packet-item .pkt-source.tx { color: var(--accent-color); }
.packet-item .pkt-source.rf {
    max-width: 150px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
    white-space: nowrap;
}

.packet-item.digipeated-by-me {
    background: rgba(210, 153, 34, 0.08);
}

.packet-item .pkt-badge {
    display: inline-flex;
    align-items: center;
    margin-right: 5px;
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.4px;
    vertical-align: middle;
}

.packet-item .pkt-badge.digi {
    color: #f0c36a;
    background: rgba(210, 153, 34, 0.18);
    border: 1px solid rgba(210, 153, 34, 0.36);
}

.packet-item .pkt-raw {
    color: var(--text-secondary);
}

/* ── Propagation Detail ─────────────────────────────────────────── */

.prop-detail {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}

.prop-detail h3 {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.prop-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 20px;
}

.prop-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
    text-align: center;
}

.prop-card-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--accent-cyan);
}

.prop-card-label {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 4px;
    text-transform: uppercase;
}

.watched-paths-panel {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 14px;
}

.watched-path-card {
    border: 1px solid var(--border);
    border-left: 4px solid var(--text-muted);
    background: var(--bg-card);
    border-radius: 6px;
    padding: 10px;
}

.watched-path-high { border-left-color: var(--accent-green); }
.watched-path-medium { border-left-color: var(--accent-orange); }
.watched-path-low { border-left-color: var(--accent-blue); }
.watched-path-none { border-left-color: var(--text-muted); opacity: 0.82; }

.watched-path-top {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 5px;
}

.watched-path-top strong {
    color: var(--text-primary);
    font-size: 14px;
}

.watched-path-top span {
    color: var(--accent-cyan);
    font-family: "Consolas", "Courier New", monospace;
    font-size: 12px;
}

.watched-path-meta,
.watched-path-probes {
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.35;
}

.watched-path-probes {
    margin-top: 6px;
}

canvas {
    width: 100% !important;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 16px;
}

.dxview-link-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 16px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-tertiary);
}

.dxview-link-panel a {
    color: var(--accent-cyan);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.dxview-link-panel a:hover {
    text-decoration: underline;
}

.dxview-link-panel a.disabled {
    color: var(--text-muted);
}

.dxview-link-panel span {
    color: var(--text-muted);
    font-size: 11px;
    text-align: right;
}

/* Solar widget */
.solar-widget {
    text-align: center;
    margin-bottom: 16px;
}

.solar-widget a {
    display: inline-block;
}

.solar-widget img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: #1a1a2e;
}

/* ── Footer ─────────────────────────────────────────────────────── */

#footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 16px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
    font-size: 11px;
    color: var(--text-muted);
    flex-shrink: 0;
}

#footer b {
    color: var(--text-secondary);
}

.footer-right {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.footer-update {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid rgba(88, 166, 255, 0.28);
    background: rgba(88, 166, 255, 0.08);
    color: var(--accent-blue);
    font-weight: 600;
}

.footer-update.is-available {
    border-color: rgba(227, 179, 65, 0.34);
    background: rgba(227, 179, 65, 0.1);
    color: #e3b341;
}

/* ── Responsive ─────────────────────────────────────────────────── */

@media (max-width: 1300px) {
    .header-stats {
        display: none;
    }
    .header-center {
        max-width: 360px;
    }
}

@media (min-width: 1500px) {
    .connection-stack {
        flex-direction: row;
        align-items: center;
        gap: 6px;
    }

    .connection-chip {
        width: 152px;
    }
}

@media (max-width: 700px) {
    #header {
        padding: 10px 12px;
        gap: 12px;
    }
    #main-content {
        flex-direction: column;
    }
    #side-panel {
        width: 100%;
        height: 45vh;
    }
    #map-panel {
        height: 55vh;
    }
    #map-controls {
        justify-content: flex-start;
        padding: 9px 10px 11px;
        gap: 6px;
    }
    .header-center {
        display: none;
    }
    .connection-chip,
    .aprs-is-chip {
        font-size: 11px;
        padding: 5px 9px;
    }
    .analytics-subtabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .settings-toolbar {
        grid-template-columns: 1fr;
    }
    .settings-toolbar-actions {
        justify-content: flex-start;
    }
    .settings-quicknav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    #tab-settings.active {
        inset: 10px;
    }
    #tab-messages.active {
        inset: 10px;
        width: auto;
        min-width: 0;
    }
}

@media (max-width: 900px) and (min-width: 769px) {
    .prop-gauges-row {
        flex-direction: column;
        gap: 4px;
    }
    .header-center {
        max-width: 280px;
    }
}

@media (max-width: 600px) {
    #header {
        min-height: 60px;
    }
    .header-action {
        display: none;
    }
    .ui-theme-control-label {
        display: none;
    }
    .ui-theme-control {
        padding: 4px;
    }
    .station-badge {
        padding: 5px 10px;
        font-size: 13px;
    }
    .header-stats {
        display: none;
    }
    .connection-chip {
        align-self: flex-start;
    }
    .notification-panel {
        width: calc(100vw - 16px);
    }
    #map-controls {
        padding: 8px;
    }
    #map-controls button {
        width: 36px;
        height: 32px;
    }
    #map-controls select,
    #map-type-filter-btn {
        min-width: 84px;
        height: 32px;
    }
    .map-control-divider {
        display: none;
    }
    .tab-btn {
        flex-basis: calc(33.333% - 6px);
        font-size: 10px;
    }
    .analytics-subtabs {
        grid-template-columns: 1fr;
    }
    .settings-toolbar-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .settings-quicknav {
        grid-template-columns: 1fr;
    }
    .settings-panel {
        padding: 12px;
    }
    .settings-pane-header {
        align-items: flex-start;
    }
    .settings-section-header {
        flex-direction: column;
        align-items: stretch;
    }
    .settings-section-toggle {
        align-self: flex-start;
    }
    .settings-row,
    .settings-row.full-width,
    .watched-builder-search,
    .rf-port-fields .settings-row {
        grid-template-columns: 1fr;
    }
    .settings-action-row {
        display: flex;
    }
    .settings-action-row > .btn-small,
    .settings-action-row > .btn-primary,
    .watched-builder-search-controls .btn-small {
        width: 100%;
    }
    .prop-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── Map Legend ──────────────────────────────────────────────────── */

.map-legend {
    position: absolute;
    bottom: 24px;
    left: 12px;
    z-index: 1000;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 12px;
    color: var(--text-primary);
    box-shadow: 0 10px 24px var(--shadow-color);
}

/* Compatibility for sessions that created the legend before it moved into #map. */
#map-panel > .map-legend {
    bottom: 104px;
}

#map > .map-legend {
    bottom: 24px;
}

.legend-title {
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 800;
}

.legend-body {
    display: none;
    margin-top: 8px;
}

.map-legend:hover .legend-body,
.map-legend:focus-within .legend-body {
    display: block;
}

@media (max-width: 480px) {
    .connection-chip,
    .aprs-is-chip {
        width: 104px;
        gap: 6px;
        padding: 4px 8px;
    }
    .header-logo {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
    }
    .header-brand-title {
        font-size: 13px;
    }
    .station-identity-label {
        display: none;
    }
}

#map-panel.has-expanded-weather-alert .map-legend {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.legend-item:last-child {
    margin-bottom: 0;
}

.legend-swatch {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
}

.legend-emoji {
    width: 22px;
    height: 22px;
    font-size: 14px;
    line-height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 6px;
    border: 2px solid;
    background: var(--bg-secondary);
    flex-shrink: 0;
}

.legend-my-station {
    border-color: #3fb950;
    background: rgba(13, 17, 23, 0.92);
    box-shadow: none;
}

.legend-my-station .aprs-sprite {
    transform: translateY(-1px);
}

.legend-line {
    width: 20px;
    height: 3px;
    border-radius: 2px;
    flex-shrink: 0;
}

/* Mi/Km toggle inside map legend */
.legend-unit-toggle {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
}

.legend-unit-toggle button {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    padding: 2px 10px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.legend-unit-toggle button:hover {
    background: var(--accent-blue);
    color: #fff;
}

/* ── Animations ─────────────────────────────────────────────────── */

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

.station-item.new-arrival {
    animation: pulse 0.5s ease-in-out 3;
    background: rgba(88, 166, 255, 0.1);
}

/* ── APRS Emoji Map Markers ──────────────────────────────────────── */

.aprs-icon-wrapper {
    background: transparent !important;
    border: none !important;
}

.aprs-emoji-marker {
    width: 22px;
    height: 22px;
    font-size: 14px;
    line-height: 22px;
    text-align: center;
    border-radius: 6px;
    border: 2px solid;
    background: rgba(22, 27, 34, 0.85);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    transition: transform 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Sprite icon helpers ─────────────────────────────────────── */

.aprs-sprite {
    display: inline-block;
    image-rendering: pixelated;      /* keep 16×16 art crisp when scaled */
    image-rendering: -moz-crisp-edges;
    vertical-align: middle;
    flex-shrink: 0;
}

.aprs-emoji-fallback {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
}

.popup-sym-inline {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin-right: 4px;
}

.aprs-emoji-marker:hover {
    transform: scale(1.5);
    z-index: 9999 !important;
}

.spider-station-marker .aprs-emoji-marker {
    transform: scale(1.08);
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.85),
        0 3px 10px rgba(0, 0, 0, 0.55);
}

.spider-callsign-label {
    z-index: 2501 !important;
}

.aprs-emoji-rf {
    border-color: #f85149;
    box-shadow: 0 0 8px rgba(248, 81, 73, 0.35);
}

.aprs-emoji-aprs_is {
    border-color: #58a6ff;
    box-shadow: 0 0 8px rgba(88, 166, 255, 0.35);
}

.aprs-emoji-my {
    width: 26px;
    height: 26px;
    line-height: 26px;
    border-color: #3fb950;
    background: rgba(13, 17, 23, 0.92);
    box-shadow:
        0 0 0 2px rgba(63, 185, 80, 0.95),
        0 0 14px rgba(63, 185, 80, 0.9),
        0 0 30px rgba(63, 185, 80, 0.5);
}

/* Ghosted station markers (stale / not heard recently) */
.aprs-emoji-marker.ghosted {
    opacity: 0.35;
    filter: grayscale(80%);
    border-style: dashed !important;
    animation: ghost-pulse 3s ease-in-out infinite;
}

@keyframes ghost-pulse {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 0.2; }
}

/* Callsign labels */
.callsign-label {
    background: rgba(13, 17, 23, 0.85) !important;
    border: 1px solid var(--border) !important;
    color: #e6edf3 !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    padding: 1px 4px !important;
    border-radius: 3px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4) !important;
    white-space: nowrap !important;
}
.callsign-label::before {
    border-top-color: rgba(13, 17, 23, 0.85) !important;
}

/* Propagation line styling */
.prop-line {
    /* Static dashed lines — CSS animation removed for performance */
}

/* ── Help Modal ──────────────────────────────────────────────────── */
body.quick-start-open {
    overflow: hidden;
}

.quick-start-overlay {
    z-index: 10020;
    padding: 18px;
}

.modal-content.quick-start-modal {
    width: min(940px, 96vw);
    max-width: 940px;
    max-height: min(92vh, 760px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(88, 166, 255, 0.42);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.58), 0 0 40px rgba(88, 166, 255, 0.12);
}

.quick-start-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 22px 12px;
    border-bottom: 1px solid var(--border);
}

.quick-start-header h2 {
    margin: 2px 0 0;
    color: var(--text-primary);
    font-size: clamp(20px, 3vw, 28px);
}

.quick-start-kicker {
    color: var(--accent-blue);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.13em;
}

.quick-start-progress {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 22px;
    color: var(--text-muted);
    font-size: 12px;
    background: rgba(88, 166, 255, 0.045);
}

.quick-start-dots {
    display: flex;
    gap: 7px;
}

.quick-start-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border);
}

.quick-start-dot.active {
    width: 22px;
    border-radius: 6px;
    background: var(--accent-blue);
}

.quick-start-pages {
    min-height: 0;
    overflow-y: auto;
    padding: 22px;
}

.quick-start-page {
    display: grid;
    grid-template-columns: minmax(320px, 1.15fr) minmax(260px, 0.85fr);
    align-items: center;
    gap: 26px;
    animation: quick-start-enter 180ms ease-out;
}

.quick-start-page[hidden] {
    display: none;
}

@keyframes quick-start-enter {
    from { opacity: 0; transform: translateX(8px); }
    to { opacity: 1; transform: translateX(0); }
}

.quick-start-illustration {
    padding: 8px;
    border: 1px solid rgba(88, 166, 255, 0.20);
    border-radius: 13px;
    background:
        radial-gradient(circle at 75% 20%, rgba(88, 166, 255, 0.14), transparent 35%),
        linear-gradient(145deg, rgba(22, 27, 34, 0.95), rgba(13, 17, 23, 0.82));
}

.quick-start-illustration svg {
    display: block;
    width: 100%;
    height: auto;
    max-height: 285px;
}

.quick-start-copy h3 {
    margin: 0 0 10px;
    color: var(--accent-green);
    font-size: 20px;
}

.quick-start-copy p,
.quick-start-copy li {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.55;
}

.quick-start-copy ul {
    margin: 8px 0;
    padding-left: 20px;
}

.quick-start-callout {
    margin-top: 14px;
    padding: 10px 12px;
    border-left: 3px solid var(--accent-blue);
    border-radius: 5px;
    color: var(--text-muted);
    background: rgba(88, 166, 255, 0.08);
    font-size: 13px;
    line-height: 1.45;
}

.quick-start-callout.warning {
    border-left-color: var(--accent-orange);
    background: rgba(210, 153, 34, 0.09);
}

.quick-start-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 22px;
    border-top: 1px solid var(--border);
    background: var(--bg-secondary);
}

.quick-start-nav {
    display: flex;
    gap: 10px;
}

.quick-start-footer button {
    min-width: 105px;
}

.quick-start-footer .btn-primary {
    width: auto;
    margin: 0;
}

/* Inline guide illustration palette. */
.qs-screen, .qs-card, .qs-device, .qs-app { fill: #161b22; stroke: #3d4857; stroke-width: 2; }
.qs-map { fill: #101923; stroke: #29445f; stroke-width: 2; }
.qs-panel, .qs-input { fill: #212833; stroke: #3b4655; stroke-width: 1.5; }
.qs-road { fill: none; stroke: #303a47; stroke-width: 10; opacity: .65; }
.qs-path { fill: none; stroke-width: 4; stroke-linecap: round; }
.qs-direct { stroke: #3fb950; }
.qs-relay { stroke: #d29922; stroke-dasharray: 8 6; }
.qs-home { fill: #58a6ff; stroke: #dbeafe; stroke-width: 2; }
.qs-station { fill: #f85149; stroke: #ffd6d2; stroke-width: 2; }
.qs-hop { fill: #d29922; stroke: #fff3c4; stroke-width: 2; }
.qs-network { fill: #58a6ff; stroke: #b8dcff; stroke-width: 2; }
.qs-label { fill: #8b949e; font: 700 10px sans-serif; letter-spacing: .08em; }
.qs-value, .qs-heading { fill: #e6edf3; font: 700 15px sans-serif; }
.qs-small, .qs-copy, .qs-input-text { fill: #b7c1cd; font: 12px sans-serif; }
.qs-pin { fill: #f85149; stroke: #ffd6d2; stroke-width: 2; }
.qs-pin-center { fill: #161b22; }
.qs-arrow, .qs-arrow-short { fill: none; stroke: #58a6ff; stroke-width: 5; stroke-linecap: round; }
.qs-status-ok { fill: #17652a; stroke: #3fb950; }
.qs-status-info { fill: #164773; stroke: #58a6ff; }
.qs-pill-text { fill: #ffffff; font: 700 11px sans-serif; }
.qs-gauge { fill: none; stroke: #30363d; stroke-width: 18; stroke-linecap: round; }
.qs-needle { stroke: #f85149; stroke-width: 5; stroke-linecap: round; }
.qs-grid { fill: none; stroke: #58a6ff; stroke-width: 1.5; opacity: .55; }
.qs-grid-selected { fill: rgba(63, 185, 80, .28); stroke: #3fb950; stroke-width: 3; }
.qs-check { fill: #17652a; stroke: #3fb950; stroke-width: 2; }
.qs-checkmark { fill: none; stroke: white; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 760px) {
    .quick-start-overlay { padding: 6px; }
    .modal-content.quick-start-modal { width: 100%; max-height: 96vh; }
    .quick-start-page { grid-template-columns: 1fr; gap: 14px; }
    .quick-start-illustration svg { max-height: 210px; }
    .quick-start-pages { padding: 14px; }
    .quick-start-header, .quick-start-footer { padding-left: 14px; padding-right: 14px; }
    .quick-start-footer { align-items: stretch; }
    .quick-start-nav { flex: 1; }
    .quick-start-nav button { flex: 1; min-width: 0; }
}

.help-modal {
    max-width: 700px;
    width: 92vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}
.help-body {
    overflow-y: auto;
    padding: 16px 20px;
    -webkit-overflow-scrolling: touch;
}
.help-section {
    margin-bottom: 18px;
}
.help-section h3 {
    color: var(--accent-blue);
    font-size: 15px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 4px;
}
.help-section h4 {
    color: var(--accent-green);
    font-size: 13px;
    margin: 10px 0 4px;
}
.help-section p {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.help-section ul {
    padding-left: 20px;
    margin: 4px 0 8px;
}
.help-section li {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-muted);
    margin-bottom: 2px;
}
.help-section code {
    background: var(--bg-input);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 12px;
    color: var(--accent-orange);
}
.help-table {
    width: 100%;
    border-collapse: collapse;
    margin: 6px 0 10px;
}
.help-table td {
    padding: 4px 8px;
    font-size: 13px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}
.help-table td:first-child {
    width: 36px;
    text-align: center;
    font-size: 16px;
}

/* ── Map Control Divider & Line Time Filter ─────────────────────── */

.map-control-divider {
    width: 1px;
    height: 24px;
    background: var(--border);
    margin: 0 2px;
}

/* Pick-location mode */
#map.pick-mode {
    cursor: crosshair !important;
}

.pick-mode .leaflet-container {
    cursor: crosshair !important;
}

.leaflet-container.pick-mode {
    cursor: crosshair !important;
}

#pick-mode-banner {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1001;
    background: rgba(240, 136, 62, 0.92);
    color: #0d1117;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.4);
}

#pick-mode-banner button {
    background: rgba(0,0,0,0.2);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 4px;
    padding: 2px 10px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
}

#pick-mode-banner button:hover {
    background: rgba(0,0,0,0.4);
}

.btn-pick {
    background: var(--bg-secondary) !important;
    color: var(--accent-orange) !important;
    border: 1px solid var(--accent-orange) !important;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-pick:hover {
    background: var(--bg-tertiary) !important;
}

#map-controls select {
    width: auto;
    min-width: 92px;
    height: 34px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-radius: 8px;
    cursor: pointer;
    font-size: 11px;
    padding: 4px 8px;
    text-align: center;
}

#map-controls select:hover {
    background: var(--bg-tertiary);
}

/* ── Map Type Filter Checkbox Dropdown ──────────────────────────── */

#map-controls .line-style-popover select {
    width: 100%;
    min-width: 0;
    text-align: left;
}

#map-type-filter-wrap {
    position: relative;
}

#map-type-filter-btn {
    width: auto !important;
    min-width: 100px;
    height: 34px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-radius: 8px;
    cursor: pointer;
    font-size: 11px;
    padding: 4px 10px;
    text-align: center;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
}

#map-type-filter-btn:hover {
    background: var(--bg-tertiary);
    border-color: rgba(88, 166, 255, 0.35);
    transform: translateY(-1px);
}

.map-type-dropdown {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    right: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 0;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
    z-index: 1001;
    min-width: 200px;
    max-height: 350px;
    overflow-y: auto;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    z-index: 1100;
}

.map-type-dropdown.open {
    display: block;
}

.map-type-cb {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    font-size: 12px;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.1s;
    user-select: none;
}

.map-type-cb:hover {
    background: var(--bg-tertiary);
}

.map-type-cb input[type="checkbox"] {
    accent-color: var(--accent-blue);
    width: 14px;
    height: 14px;
    cursor: pointer;
    flex-shrink: 0;
}

.map-type-cb span {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.map-type-cb-all {
    font-weight: 600;
}

.map-type-divider {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
}

/* ── Settings Panel ─────────────────────────────────────────────── */

.settings-panel {
    display: flex;
    flex: 1;
    flex-direction: column;
    overflow: hidden;
    width: min(1600px, calc(100% - 32px));
    margin: 0 auto;
    padding: 16px 18px 0;
}

.settings-pane-header {
    display: flex;
    z-index: 6;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
    padding: 2px 2px 14px;
    background: var(--sticky-panel-bg);
    border-bottom: 1px solid var(--border);
}

.settings-pane-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.settings-pane-header h2 {
    margin: 0 0 4px;
    font-size: 20px;
    color: var(--text-primary);
}

.settings-pane-header p {
    margin: 0;
    color: var(--text-muted);
    font-size: 12px;
}

.settings-pane-close {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--button-bg-muted);
    color: var(--text-secondary);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.settings-pane-close:hover {
    color: var(--text-primary);
    background: var(--button-bg-hover);
}

.settings-toolbar {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) auto;
    gap: 10px;
    margin-bottom: 10px;
    z-index: 4;
    padding: 0 0 10px;
    background: var(--sticky-panel-bg);
}

.settings-toolbar-search {
    min-width: 0;
}

.settings-search-input {
    width: 100%;
    background: var(--field-bg-muted);
    color: var(--text-primary);
    border: 1px solid rgba(48, 54, 61, 0.92);
    border-radius: 12px;
    padding: 11px 12px;
    font-size: 12px;
}

.settings-search-input:focus {
    outline: none;
    border-color: rgba(88, 166, 255, 0.55);
    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.12);
}

.settings-toolbar-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.settings-toolbar-btn {
    background: var(--button-bg-muted);
    color: var(--text-secondary);
    border: 1px solid rgba(48, 54, 61, 0.85);
    border-radius: 999px;
    padding: 8px 11px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

.settings-toolbar-btn:hover {
    color: var(--text-primary);
    border-color: rgba(88, 166, 255, 0.35);
    background: var(--button-bg-hover);
}

.settings-quicknav {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 2px 10px 10px 0;
    overflow-y: auto;
    border-right: 1px solid var(--border);
}

.settings-workspace {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr) 280px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    border-top: 1px solid var(--border);
}

.settings-category-content {
    min-width: 0;
    overflow-y: auto;
    padding: 0 20px 28px;
    scrollbar-gutter: stable;
    border-right: 1px solid var(--border);
}

.settings-category-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 0 15px;
    border-bottom: 1px solid var(--border);
}

.settings-category-heading {
    margin: 0;
    color: var(--text-primary);
    font-size: 20px;
    line-height: 1.2;
}

.settings-category-summary {
    margin: 5px 0 0;
    color: var(--text-muted);
    font-size: 12px;
}

.settings-context-panel {
    min-width: 0;
    overflow-y: auto;
    padding: 18px 0 24px 18px;
    color: var(--text-secondary);
}

.settings-context-panel section + section {
    margin-top: 22px;
}

.settings-context-panel h3 {
    margin: 0 0 9px;
    color: var(--text-primary);
    font-size: 11px;
    text-transform: uppercase;
}

.settings-context-panel p {
    margin: 0;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.45;
}

.settings-context-list {
    display: grid;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.settings-context-list > li {
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1.35;
}

.settings-context-list button {
    width: 100%;
    padding: 7px 8px;
    text-align: left;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
}

.settings-context-list button:hover {
    border-color: var(--border);
    background: var(--button-bg-hover);
    color: var(--text-primary);
}

.settings-context-list button strong,
.settings-context-list button span {
    display: block;
}

.settings-context-list button span {
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 10px;
}

.settings-context-modified button {
    border-left: 2px solid #e3b341;
    color: #f0c36a;
}

.settings-context-empty {
    padding: 7px 8px;
    border-left: 2px solid var(--accent-green);
}

.settings-context-tip {
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.settings-quicknav-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 40px;
    padding: 9px 10px;
    text-align: left;
    border: 1px solid rgba(48, 54, 61, 0.85);
    border-radius: 10px;
    background: var(--button-bg-muted);
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.1s;
}

.settings-quicknav-btn:hover {
    background: var(--button-bg-hover);
    border-color: rgba(88, 166, 255, 0.35);
    transform: translateY(-1px);
}

.settings-quicknav-btn.active {
    border-color: rgba(88, 166, 255, 0.62);
    background: rgba(88, 166, 255, 0.14);
    color: var(--accent-blue);
}

.settings-quicknav-btn.settings-hidden,
.settings-section.settings-hidden,
.settings-section.settings-category-inactive,
.settings-utility-grid.settings-category-inactive {
    display: none;
}

.settings-quicknav-title {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2px;
    line-height: 1.15;
}

.settings-quicknav-copy {
    min-width: 0;
}

.settings-quicknav-desc {
    display: block;
    margin-top: 3px;
    font-size: 10px;
    line-height: 1.3;
    color: var(--text-secondary);
}

.settings-status {
    padding: 8px 12px;
    border-radius: 6px;
    margin-bottom: 12px;
    font-size: 12px;
    font-weight: 600;
}

.settings-status.success {
    background: rgba(63, 185, 80, 0.15);
    color: var(--accent-green);
    border: 1px solid rgba(63, 185, 80, 0.3);
}

.settings-status.error {
    background: rgba(248, 81, 73, 0.15);
    color: var(--accent-red);
    border: 1px solid rgba(248, 81, 73, 0.3);
}

.settings-status.warning {
    background: rgba(227, 179, 65, 0.15);
    color: #e3b341;
    border: 1px solid rgba(227, 179, 65, 0.3);
}

.btn-save-settings.dirty {
    box-shadow: 0 0 0 2px rgba(227, 179, 65, 0.35);
}

.settings-category-select {
    display: none;
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--field-bg-muted);
    color: var(--text-primary);
}

@keyframes settingsDirtyPulse {
    0%, 100% {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.02),
            0 0 0 1px rgba(227, 179, 65, 0.5),
            0 0 0 0 rgba(227, 179, 65, 0.0);
    }
    50% {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.02),
            0 0 0 2px rgba(227, 179, 65, 0.85),
            0 0 18px 2px rgba(227, 179, 65, 0.25);
    }
}

.settings-section {
    margin: 0;
    padding: 18px 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    box-shadow: none;
}

.settings-section.settings-section-dirty {
    outline: 1px solid rgba(227, 179, 65, 0.78);
    outline-offset: -1px;
    background: rgba(227, 179, 65, 0.035);
    animation: settingsDirtyPulse 1.7s ease-in-out infinite;
}

.settings-quicknav-btn.settings-section-dirty {
    border-color: rgba(227, 179, 65, 0.78);
    animation: settingsDirtyPulse 1.7s ease-in-out infinite;
}

.settings-category-dirty-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: transparent;
}

.settings-quicknav-btn.settings-section-dirty .settings-category-dirty-dot {
    background: #e3b341;
    box-shadow: 0 0 8px rgba(227, 179, 65, 0.7);
}

.settings-section h3 {
    font-size: 13px;
    color: var(--accent-blue);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 8px;
}

.visualization-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.visualization-setting {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(88, 166, 255, 0.025);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.visualization-setting:hover {
    border-color: rgba(88, 166, 255, 0.38);
    background: rgba(88, 166, 255, 0.055);
}

.visualization-setting input {
    margin-top: 2px;
    accent-color: var(--accent-blue);
}

.visualization-setting-select select {
    width: 92px;
    margin-top: 1px;
    flex: 0 0 auto;
}

.visualization-setting span,
.visualization-setting strong,
.visualization-setting small {
    display: block;
}

.visualization-setting strong {
    color: var(--text-primary);
    font-size: 12px;
}

.visualization-setting small {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.35;
}

@media (max-width: 760px) {
    .visualization-settings-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .propagation-aura,
    .visual-home-marker .my-station-ring.ring-two,
    .rf-path-reveal,
    .watched-path-flow,
    .aprs-emoji-marker.packet-origin-burst::before,
    .aprs-emoji-marker.packet-origin-burst::after,
    .map-activity-moment,
    .map-activity-moment.leaving {
        animation: none !important;
    }

    .packet-animation-canvas {
        display: none !important;
    }
}

.settings-unsaved-reminder {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translate(-50%, 24px);
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: min(520px, calc(100vw - 32px));
    padding: 10px 12px;
    border: 1px solid rgba(227, 179, 65, 0.55);
    border-radius: 8px;
    background: rgba(28, 33, 40, 0.96);
    color: #f0c36a;
    box-shadow: 0 14px 42px rgba(0, 0, 0, 0.36);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease;
    z-index: 5000;
    font-size: 13px;
    font-weight: 700;
}

.settings-unsaved-reminder.visible {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
}

.settings-unsaved-reminder button {
    border: 1px solid rgba(227, 179, 65, 0.48);
    border-radius: 6px;
    padding: 6px 12px;
    background: rgba(227, 179, 65, 0.18);
    color: #ffe08a;
    cursor: pointer;
    font-weight: 800;
}

.settings-unsaved-reminder button:hover {
    background: rgba(227, 179, 65, 0.26);
}

.settings-saved-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.96);
    min-width: 220px;
    padding: 18px 24px;
    border: 1px solid rgba(63, 185, 80, 0.45);
    border-radius: 6px;
    background: rgba(22, 27, 34, 0.96);
    color: #7ee787;
    text-align: center;
    font-size: 22px;
    font-weight: 800;
    box-shadow: 0 20px 70px rgba(0, 0, 0, 0.42);
    opacity: 0;
    pointer-events: none;
    transition: opacity 240ms ease, transform 240ms ease;
    z-index: 6000;
}

.settings-saved-popup.visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.settings-section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.settings-section-header h3 {
    margin: 0;
    border-bottom: none;
    padding-bottom: 0;
}

.settings-section-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.settings-section-reset,
.settings-section-toggle {
    background: var(--field-bg-muted);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.settings-section-reset:hover,
.settings-section-toggle:hover {
    background: var(--button-bg-hover);
    color: var(--text-primary);
    border-color: rgba(88, 166, 255, 0.35);
}

.settings-no-results {
    display: none;
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 1px dashed rgba(88, 166, 255, 0.2);
    border-radius: 12px;
    background: rgba(28, 33, 40, 0.46);
    color: var(--text-secondary);
    font-size: 12px;
}

.settings-no-results.visible {
    display: block;
}

.settings-section-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(280px, 1fr));
    column-gap: 28px;
}

.settings-section.collapsed .settings-section-body {
    display: none;
}

.settings-section-body > h4,
.settings-section-body > p,
.settings-section-body > details,
.settings-section-body > .full-width,
.settings-section-body > .settings-row-stacked,
.settings-section-body > .settings-action-row,
.settings-section-body > .settings-actions,
.settings-section-body > .watched-builder,
.settings-section-body > .rf-ports-list,
.settings-section-body > .alert-audio-slots,
.settings-section-body > .status-preview {
    grid-column: 1 / -1;
}

.settings-section.collapsed {
    padding-bottom: 12px;
}

.settings-section.collapsed .settings-section-header {
    margin-bottom: 0;
}

.settings-row {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    align-items: center;
    margin-bottom: 8px;
    gap: 8px;
    min-width: 0;
}

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

.settings-row label {
    font-size: 12px;
    color: var(--text-secondary);
    flex-shrink: 0;
    min-width: 120px;
}

.setting-description {
    grid-column: 1 / -1;
    margin-left: 0;
    margin-top: -4px;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.35;
}

.settings-row input[type="text"],
.settings-row input[type="password"],
.settings-row input[type="time"],
.settings-row input[type="number"],
.settings-row select,
.settings-row textarea {
    width: 100%;
    min-width: 0;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 5px 8px;
    font-size: 12px;
    font-family: "Consolas", "Courier New", monospace;
    max-width: none;
}

.settings-row.full-width {
    grid-template-columns: 160px minmax(0, 1fr);
}

.settings-action-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 2px;
}

.settings-action-row > .btn-small,
.settings-action-row > .btn-primary {
    min-width: min(220px, 100%);
}

.settings-row input[type="text"]:focus,
.settings-row input[type="password"]:focus,
.settings-row input[type="time"]:focus,
.settings-row input[type="number"]:focus,
.settings-row select:focus,
.settings-row textarea:focus {
    border-color: var(--accent-blue);
    outline: none;
}

.settings-row-stacked {
    display: flex;
    align-items: stretch;
    flex-direction: column;
}

.settings-row-stacked label {
    min-width: 0;
}

.settings-row textarea {
    min-height: 80px;
    max-width: none;
    resize: vertical;
}

.settings-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent-blue);
    cursor: pointer;
}

.settings-section.settings-section-invalid {
    border-color: rgba(248, 81, 73, 0.9);
    box-shadow: 0 0 0 2px rgba(248, 81, 73, 0.16);
}

.watched-builder {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 10px 0 12px;
    padding: 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.watched-builder-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
}

.watched-builder-grid .settings-row,
.watched-builder-search {
    margin-bottom: 0;
}

.watched-builder .settings-row input,
.watched-builder .settings-row select {
    max-width: none;
}

.watched-builder-search input {
    min-width: 150px;
}

.watched-builder-search {
    grid-template-columns: 160px minmax(0, 1fr);
    align-items: start;
}

.watched-builder-search-controls {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.watched-builder-search-controls small {
    color: var(--text-muted);
    line-height: 1.35;
}

.watched-builder-target {
    padding: 10px;
    border: 1px solid rgba(88, 166, 255, 0.28);
    border-radius: 7px;
    background: rgba(88, 166, 255, 0.05);
}

.watched-builder-target.needs-label {
    border-color: #7ee787;
    box-shadow: 0 0 0 2px rgba(63, 185, 80, 0.16);
    background: rgba(63, 185, 80, 0.08);
}

.watched-builder-target.needs-label label {
    color: #7ee787;
    font-weight: 700;
}

.watched-builder-search-controls .btn-small {
    justify-self: center;
    min-width: 180px;
}

.watched-builder-result {
    min-height: 36px;
    padding: 8px 10px;
    border: 1px dashed rgba(88, 166, 255, 0.24);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.35;
    background: rgba(88, 166, 255, 0.06);
}

.watched-builder-result.success {
    color: #7ee787;
    border-color: rgba(63, 185, 80, 0.36);
    background: rgba(63, 185, 80, 0.08);
}

.watched-builder-result.error {
    color: #ff7b72;
    border-color: rgba(248, 81, 73, 0.36);
    background: rgba(248, 81, 73, 0.08);
}

@media (max-width: 760px) {
    .watched-builder-grid {
        grid-template-columns: 1fr;
    }
}

.rf-ports-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
}

.rf-ports-empty {
    color: var(--text-secondary);
    font-size: 12px;
    padding: 8px 0;
}

.rf-port-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px;
}

.rf-port-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.rf-port-enabled {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 600;
}

.rf-port-enabled span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rf-port-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 10px;
}

.rf-port-fields .settings-row {
    grid-template-columns: 110px minmax(0, 1fr);
    margin-bottom: 0;
}

.rf-port-fields .settings-row label {
    min-width: 92px;
}

.rf-port-check-row {
    grid-column: 1 / -1;
}

.rf-port-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: var(--text-secondary);
}

.rf-port-checkboxes label {
    min-width: 0;
    gap: 5px;
}

.rf-port-fields .settings-row input[type="text"],
.rf-port-fields .settings-row input[type="number"],
.rf-port-fields .settings-row select {
    max-width: none;
    min-width: 0;
}

.rf-port-init-row {
    grid-column: 1 / -1;
}

.rf-ports-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.coord-lock-row {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    max-width: 260px;
}

.coord-lock-row input[type="number"] {
    min-width: 0;
}

.settings-row .inline-check {
    flex: 1;
    min-width: 0;
    max-width: 180px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    color: var(--text-primary);
    font-size: 12px;
}

.file-picker-row {
    flex: 1;
    max-width: 260px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.file-picker-row input[type="text"] {
    max-width: none;
    min-width: 0;
}

.status-preview {
    width: 100%;
    min-height: 30px;
    padding: 7px 9px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-family: "Consolas", "Courier New", monospace;
    font-size: 12px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.alert-recommendations {
    font-family: inherit;
    display: grid;
    gap: 8px;
}

.alert-rec-summary {
    color: var(--text-secondary);
    font-size: 12px;
}

.alert-rec-row {
    border-top: 1px solid var(--border);
    padding-top: 7px;
}

.alert-rec-title {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 12px;
}

.alert-rec-values {
    color: var(--accent-cyan);
    font-family: "Consolas", "Courier New", monospace;
    font-size: 12px;
    margin-top: 2px;
}

.alert-rec-detail {
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.35;
    margin-top: 2px;
}

.settings-row .lock-check {
    flex: 0 0 auto;
    max-width: none;
    padding: 4px 6px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-secondary);
    font-weight: 700;
    letter-spacing: 0;
}

.settings-help {
    flex: 1;
    max-width: 180px;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.3;
    text-align: right;
}

.gps-source-setting {
    display: none;
}

.gps-source-setting.visible {
    display: flex;
}

.filter-preview {
    flex: 1;
    font-family: "Consolas", "Courier New", monospace;
    font-size: 11px;
    color: var(--accent-cyan);
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 4px 8px;
    max-width: 180px;
    word-break: break-all;
    line-height: 1.3;
    min-height: 22px;
}

.alert-audio-slots {
    display: grid;
    gap: 8px;
}

.alert-audio-row {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(180px, 1.4fr) minmax(160px, auto) auto auto;
    gap: 8px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

.alert-audio-name,
.alert-audio-file {
    min-width: 0;
}

.alert-audio-file {
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.alert-audio-row input[type="file"] {
    max-width: 230px;
}

.alert-audio-status {
    grid-column: 2 / -1;
    min-height: 16px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.35;
}

.alert-audio-status.ok {
    color: var(--accent-green);
}

.alert-audio-status.error {
    color: var(--accent-red);
}

@media (max-width: 760px) {
    .alert-audio-row {
        grid-template-columns: 1fr;
    }

    .alert-audio-status {
        grid-column: 1;
    }
}

.settings-actions {
    margin-top: 16px;
    text-align: center;
}

.settings-panel > .settings-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin: 0 -18px;
    padding: 10px 18px;
    text-align: center;
    border-top: 1px solid var(--border);
    background: var(--sticky-panel-bg);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.16);
    z-index: 5;
}

.settings-panel > .settings-actions .settings-note {
    margin: 0;
}

.settings-panel > .settings-actions .btn-save-settings {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 210px;
}

.settings-unsaved-count {
    min-width: 22px;
    padding: 2px 6px;
    border-radius: 10px;
    background: #7a4f00;
    color: #fff3c4;
    font-size: 11px;
    line-height: 1.4;
}

.settings-unsaved-count[hidden] {
    display: none;
}

@media (max-width: 1500px) {
    .settings-workspace {
        grid-template-columns: 220px minmax(0, 1fr);
    }

    .settings-context-panel {
        display: none;
    }

    .settings-category-content {
        border-right: 0;
    }
}

@media (max-width: 1000px) {
    .settings-section-body {
        grid-template-columns: 1fr;
    }

    .settings-section-body > * {
        grid-column: 1;
    }
}

.btn-primary {
    background: var(--accent-blue);
    color: #0d1117;
    border: none;
    border-radius: 6px;
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}

.btn-primary:hover {
    background: #79c0ff;
}

.btn-primary:active {
    transform: scale(0.98);
}

.btn-primary:disabled {
    background: var(--bg-tertiary);
    color: var(--text-muted);
    cursor: not-allowed;
}

.settings-note {
    margin-top: 8px;
    font-size: 11px;
    color: var(--text-muted);
    font-style: italic;
}

.settings-warning {
    color: var(--accent-orange);
}

.settings-utility-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 12px 0 16px;
}

.settings-utility-panel {
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-tertiary);
    padding: 10px;
    min-width: 0;
}

.settings-utility-title {
    margin-bottom: 8px;
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 700;
}

.settings-button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.settings-backup-protect { display: flex; align-items: flex-start; gap: 7px; margin-top: 10px; color: var(--text); cursor: pointer; }
.settings-backup-protect input { margin-top: 2px; }
.settings-backup-protect span { display: grid; gap: 2px; }
.settings-backup-protect small { color: var(--text-muted); font-weight: 400; line-height: 1.35; }

.first-run-checklist {
    display: grid;
    gap: 5px;
    font-size: 11px;
    color: var(--text-secondary);
}

.first-run-item {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.first-run-item::before {
    content: "X";
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 14px;
    text-align: center;
}

.first-run-item.done::before {
    content: "✓";
    color: var(--accent-green);
}

.transmit-history-list {
    display: grid;
    gap: 6px;
    max-height: 150px;
    overflow-y: auto;
    font-size: 11px;
    color: var(--text-secondary);
}

.transmit-history-item {
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}

.transmit-history-item:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.transmit-history-meta {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.transmit-history-info {
    font-family: "Consolas", "Courier New", monospace;
    color: var(--accent-cyan);
    overflow-wrap: anywhere;
}

@media (max-width: 980px) {
    .settings-utility-grid {
        grid-template-columns: 1fr;
    }
}

.settings-hint {
    margin: 4px 0 8px 0;
    padding: 6px 10px;
    font-size: 11px;
    color: var(--text-muted);
    background: rgba(100, 149, 237, 0.08);
    border-left: 3px solid rgba(100, 149, 237, 0.4);
    border-radius: 2px;
    line-height: 1.4;
}

/* ── Modal Overlay ──────────────────────────────────────────────── */

.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    max-width: 560px;
    width: 90%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
}

.modal-header h3 {
    font-size: 15px;
    color: var(--text-primary);
    margin: 0;
}

.modal-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 22px;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
}

.modal-close:hover {
    color: var(--accent-red);
}

.modal-footer {
    padding: 10px 18px;
    border-top: 1px solid var(--border);
    font-size: 12px;
    color: var(--text-secondary);
}

/* ── Icon Picker ────────────────────────────────────────────────── */

.inline-field-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    width: 100%;
}

.inline-field-actions input,
.inline-field-actions select {
    flex: 1 1 auto;
    min-width: 0;
}

.phg-calculator-modal {
    max-width: 520px;
}

.phg-calculator-grid {
    padding: 16px 18px;
    display: grid;
    gap: 10px;
}

.phg-result {
    margin: 0 18px 12px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-primary);
}

.phg-result strong {
    font-size: 24px;
    letter-spacing: 0;
    color: var(--accent-green);
    font-family: Consolas, "Courier New", monospace;
}

.wx-radar-custom {
    display: none;
}

.wx-radar-custom.visible {
    display: flex;
}

.icon-picker-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    max-width: 200px;
}

.icon-preview {
    font-size: 20px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 6px;
}

.icon-picker-name {
    font-size: 11px;
    color: var(--text-secondary);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.icon-picker-tabs {
    display: flex;
    padding: 8px 18px 0;
    gap: 4px;
}

.icon-tab {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid var(--border);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 6px 6px 0 0;
    border-bottom: none;
}

.icon-tab.active {
    background: var(--bg-secondary);
    color: var(--accent-blue);
    border-bottom: 2px solid var(--accent-blue);
}

.icon-picker-search {
    padding: 8px 18px;
}

.icon-picker-search input {
    width: 100%;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 13px;
}

.icon-picker-search input:focus {
    border-color: var(--accent-blue);
    outline: none;
}

.icon-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
    gap: 4px;
    padding: 8px 18px;
    overflow-y: auto;
    max-height: 45vh;
}

.icon-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 2px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.1s;
    border: 2px solid transparent;
    text-align: center;
}

.icon-cell:hover {
    background: var(--bg-tertiary);
    border-color: var(--border);
}

.icon-cell.selected {
    background: rgba(88, 166, 255, 0.15);
    border-color: var(--accent-blue);
}

.icon-cell-emoji {
    font-size: 22px;
    line-height: 1.2;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
}

.icon-cell-name {
    font-size: 9px;
    color: var(--text-muted);
    margin-top: 2px;
    line-height: 1.1;
    max-width: 64px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.icon-cell-code {
    font-family: "Consolas", monospace;
    font-size: 8px;
    color: var(--text-muted);
    opacity: 0.6;
}

.icon-selection-info {
    font-family: "Consolas", monospace;
    color: var(--accent-cyan);
}

/* ── Analytics Tab ──────────────────────────────────────────────── */

.analytics-panel {
    padding: 12px;
    overflow-y: auto;
    height: 100%;
    background: var(--bg-primary);
}

.settings-warning {
    color: var(--accent-orange);
}

.analytics-subtabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 14px;
    padding: 4px 2px 10px;
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--sticky-panel-bg);
}

.analytics-subtab {
    background: var(--button-bg-muted);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 8px 10px;
    font-size: 11px;
    cursor: pointer;
    white-space: normal;
    transition: all 0.2s;
    min-height: 42px;
    line-height: 1.2;
    text-align: center;
}

.analytics-subtab:hover {
    background: var(--button-bg-hover);
    color: var(--text-primary);
}

.analytics-subtab.active {
    background: linear-gradient(180deg, rgba(88, 166, 255, 0.94), rgba(43, 123, 212, 0.94));
    color: #fff;
    border-color: rgba(88, 166, 255, 0.95);
    box-shadow: 0 10px 20px rgba(31, 111, 235, 0.22);
}

.analytics-section {
    display: none;
}

.analytics-section.active {
    display: block;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

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

.analytics-header h3 {
    font-size: 15px;
    margin: 0;
    color: var(--text-primary);
}

.analytics-header select {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 3px 6px;
    font-size: 11px;
}

.analytics-action-btn {
    border: 1px solid var(--accent-blue);
    border-radius: 4px;
    background: rgba(88, 166, 255, 0.14);
    color: var(--accent-blue);
    font-size: 11px;
    font-weight: 700;
    padding: 4px 8px;
    cursor: pointer;
}

.analytics-empty {
    color: var(--text-muted);
    font-style: italic;
    text-align: center;
    padding: 20px 10px;
    font-size: 12px;
}

.analytics-desc {
    color: var(--text-secondary);
    font-size: 11px;
    margin-bottom: 8px;
    line-height: 1.4;
}

.weather-analytics-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.weather-analytics-grid canvas {
    width: 100%;
    height: 160px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: zoom-in;
}

.weather-analytics-grid canvas:hover {
    border-color: rgba(88, 166, 255, 0.7);
    box-shadow: 0 0 0 1px rgba(88, 166, 255, 0.16), 0 12px 26px rgba(0, 0, 0, 0.28);
}

.weather-mesh-header { margin-top: 18px; }
.weather-mesh-header .analytics-desc { margin: 3px 0 0; }
.weather-mesh-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 10px; margin-top: 10px; }
.weather-mesh-card { padding: 11px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg-secondary); }
.weather-mesh-card.stale { opacity: .68; border-style: dashed; }
.weather-mesh-title,
.weather-mesh-quality { display: flex; justify-content: space-between; gap: 10px; }
.weather-mesh-title strong { color: var(--text-primary); font: 800 13px Consolas, monospace; }
.weather-mesh-title span,
.weather-mesh-quality { color: var(--text-muted); font-size: 9px; }
.weather-mesh-values { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-top: 9px; }
.weather-mesh-values > span { padding: 7px; border-radius: 6px; background: rgba(255,255,255,.035); }
.weather-mesh-values small,
.weather-mesh-values b,
.weather-mesh-values em { display: block; }
.weather-mesh-values small { color: var(--text-muted); font-size: 8px; text-transform: uppercase; }
.weather-mesh-values b { margin-top: 3px; color: var(--text-primary); font: 700 12px Consolas, monospace; }
.weather-mesh-values em { margin-top: 2px; color: var(--text-secondary); font-size: 9px; font-style: normal; }
.weather-mesh-quality { margin-top: 8px; padding-top: 7px; border-top: 1px solid rgba(48,54,61,.7); }
.weather-mesh-quality span:last-child { max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.space-weather-card { padding: 13px; border: 1px solid var(--border); border-left: 4px solid var(--text-muted); border-radius: 9px; background: var(--bg-secondary); }
.space-weather-card.elevated { border-left-color: var(--accent-orange); }
.space-weather-card.high { border-left-color: #bc8cff; box-shadow: 0 0 16px rgba(188,140,255,.12); }
.space-weather-card.stale { opacity: .7; border-style: dashed; }
.space-weather-heading { display: flex; justify-content: space-between; gap: 12px; }
.space-weather-heading strong { color: var(--text-primary); }
.space-weather-heading span { color: var(--text-muted); font-size: 10px; }
.space-weather-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-top: 10px; }
.space-weather-metrics span { padding: 8px; border-radius: 6px; background: rgba(255,255,255,.035); }
.space-weather-metrics small,
.space-weather-metrics b { display: block; }
.space-weather-metrics small { color: var(--text-muted); font-size: 8px; text-transform: uppercase; }
.space-weather-metrics b { margin-top: 4px; color: var(--text-primary); font: 800 14px Consolas, monospace; }
.space-weather-card p { margin: 10px 0 0; color: var(--text-secondary); font-size: 10px; line-height: 1.4; }
.external-propagation-card { padding: 13px; border: 1px solid rgba(57,213,255,.34); border-left: 4px solid var(--accent-cyan); border-radius: 9px; background: linear-gradient(135deg, rgba(57,213,255,.08), var(--bg-secondary)); }
.external-propagation-card.stale { opacity: .7; border-style: dashed; }
.external-propagation-card p { margin: 10px 0 0; color: var(--text-secondary); font-size: 10px; line-height: 1.4; }

/* ── Rotating club display ─────────────────────────────────────── */
body.kiosk-mode {
    cursor: default;
    background:
        linear-gradient(rgba(57, 213, 255, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(57, 213, 255, .025) 1px, transparent 1px),
        var(--bg-primary);
    background-size: 28px 28px;
}
body.kiosk-mode #btn-manual-beacon,
body.kiosk-mode #manual-beacon-mode,
body.kiosk-mode #manual-beacon-status,
body.kiosk-mode #sidebar-toggle,
body.kiosk-mode #map-controls,
body.kiosk-mode .station-delete,
body.kiosk-mode #side-panel > .tab-bar { display: none !important; }
body.kiosk-mode #main-content { min-height: 0; }
body.kiosk-mode #side-panel {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}
body.kiosk-mode[data-kiosk-scene="map"] #side-panel { display: none; }
body.kiosk-mode[data-kiosk-scene]:not([data-kiosk-scene="map"]) #map-panel { display: none; }
body.kiosk-mode[data-kiosk-scene="map"] #map-panel { width: 100%; }
body.kiosk-mode .tab-content.active {
    width: 100%;
    border-top: 0;
    padding-bottom: 72px;
    background: transparent;
}

/* Full-width Node-RED-style propagation dashboard. */
body.kiosk-mode[data-kiosk-scene="propagation"] .prop-detail {
    padding: clamp(16px, 2vw, 30px);
    scroll-behavior: auto;
}
body.kiosk-mode[data-kiosk-scene="propagation"] .prop-event-card,
body.kiosk-mode[data-kiosk-scene="propagation"] .prop-card,
body.kiosk-mode[data-kiosk-scene="propagation"] .watched-path-card,
body.kiosk-mode[data-kiosk-scene="propagation"] .space-weather-card,
body.kiosk-mode[data-kiosk-scene="propagation"] .external-propagation-card,
body.kiosk-mode[data-kiosk-scene="propagation"] .solar-widget {
    background: linear-gradient(145deg, rgba(28, 33, 40, .98), rgba(13, 17, 23, .94));
    border-color: rgba(57, 213, 255, .22);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .2), inset 0 1px rgba(255, 255, 255, .025);
}
body.kiosk-mode[data-kiosk-scene="propagation"] .prop-grid {
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    gap: 12px;
}
body.kiosk-mode[data-kiosk-scene="propagation"] .prop-card { min-height: 104px; display: grid; place-content: center; }
body.kiosk-mode[data-kiosk-scene="propagation"] .prop-card-value { font-size: clamp(27px, 3vw, 42px); }
body.kiosk-mode[data-kiosk-scene="propagation"] .watched-paths-panel { grid-template-columns: repeat(3, minmax(240px, 1fr)); }
body.kiosk-mode[data-kiosk-scene="propagation"] .prop-detail > canvas {
    display: block;
    width: min(100%, 960px) !important;
    height: auto !important;
    max-height: none;
    margin-inline: auto;
    padding: 12px;
    border: 1px solid rgba(57, 213, 255, .2);
    border-radius: 12px;
    background: rgba(13, 17, 23, .8);
}

/* Weather becomes its own wallboard, without the map or analytics navigation. */
body.kiosk-mode[data-kiosk-kind="analytics"] .analytics-panel,
body.kiosk-mode[data-kiosk-scene="weather"] .analytics-panel { padding: clamp(16px, 2vw, 30px); scroll-behavior: auto; }
body.kiosk-mode[data-kiosk-kind="analytics"] .analytics-subtabs,
body.kiosk-mode[data-kiosk-scene="weather"] .analytics-subtabs { display: none; }
body.kiosk-mode[data-kiosk-kind="analytics"] .analytics-section.active,
body.kiosk-mode[data-kiosk-scene="weather"] #sec-weather.active {
    padding: clamp(16px, 2vw, 26px);
    border-color: rgba(57, 213, 255, .24);
    background: linear-gradient(145deg, rgba(28, 33, 40, .98), rgba(13, 17, 23, .94));
    box-shadow: 0 16px 38px rgba(0, 0, 0, .24);
}
body.kiosk-mode[data-kiosk-kind="analytics"] .analytics-section.active canvas,
body.kiosk-mode[data-kiosk-scene="weather"] #sec-weather.active canvas {
    display: block;
    width: min(100%, 960px) !important;
    height: auto !important;
    max-height: none;
    margin-inline: auto;
}
body.kiosk-mode[data-kiosk-kind="analytics"] #bearing-radar-chart { width: min(100%, 620px) !important; }
body.kiosk-mode[data-kiosk-scene="weather"] .weather-analytics-grid {
    grid-template-columns: repeat(2, minmax(300px, 1fr));
    gap: 16px;
}
body.kiosk-mode[data-kiosk-scene="weather"] .weather-analytics-grid canvas { width: 100% !important; height: auto !important; }
body.kiosk-mode[data-kiosk-scene="weather"] .weather-mesh-list { grid-template-columns: repeat(3, minmax(260px, 1fr)); gap: 14px; }
body.kiosk-mode[data-kiosk-scene="weather"] .weather-mesh-card {
    min-height: 150px;
    border-color: rgba(57, 213, 255, .2);
    background: rgba(13, 17, 23, .72);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
}

/* RF activity is a full-width station wall rather than a narrow sidebar list. */
body.kiosk-mode[data-kiosk-kind="stations"] .tab-content.active { padding-bottom: 72px; }
body.kiosk-mode[data-kiosk-kind="stations"] .tab-content.active .filter-bar { padding: 12px 22px; background: rgba(13, 17, 23, .82); }
body.kiosk-mode[data-kiosk-kind="stations"] .station-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(280px, 1fr));
    align-content: start;
    gap: 10px;
    padding: 18px 22px;
    scroll-behavior: auto;
}
body.kiosk-mode[data-kiosk-kind="stations"] .station-item {
    min-height: 76px;
    margin: 0;
    background: linear-gradient(145deg, rgba(28, 33, 40, .98), rgba(13, 17, 23, .92));
    border-color: rgba(57, 213, 255, .18);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .16);
}
body.kiosk-mode[data-kiosk-kind="packets"] #tab-packets { padding-bottom: 72px; }
body.kiosk-mode[data-kiosk-kind="packets"] #packet-list { padding: 14px 22px; font-size: clamp(11px, 1vw, 15px); }
body.kiosk-mode[data-kiosk-kind="packets"] .packet-item { padding: 8px 10px; background: rgba(13, 17, 23, .56); }

.club-display-extra-panels { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 8px; }
.club-display-extra-panels summary { color: var(--accent-cyan); cursor: pointer; font-size: 11px; font-weight: 700; }
.club-display-extra-panels .weather-alert-groups-grid { margin-top: 9px; }

#kiosk-toolbar {
    position: fixed;
    right: 14px;
    bottom: 42px;
    z-index: 5000;
    min-width: 330px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 16px;
    padding: 10px 12px 8px;
    overflow: hidden;
    border: 1px solid rgba(57, 213, 255, .4);
    border-radius: 11px;
    background: rgba(13, 17, 23, .92);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .36);
    backdrop-filter: blur(10px);
}
.kiosk-scene-copy { display: flex; flex-direction: column; gap: 2px; }
.kiosk-scene-copy span { color: var(--accent-cyan); font: 700 9px Consolas, monospace; letter-spacing: .14em; }
.kiosk-scene-copy strong { color: var(--text-primary); font-size: 13px; }
.kiosk-scene-copy small { color: var(--text-muted); font: 10px Consolas, monospace; }
#kiosk-scene-detail { color: var(--accent-cyan); }
.kiosk-actions { display: flex; align-items: center; gap: 5px; }
.kiosk-actions button, .kiosk-actions a {
    width: 30px; height: 30px; display: grid; place-items: center; padding: 0;
    border: 1px solid var(--border); border-radius: 7px; background: var(--button-bg-muted);
    color: var(--text-primary); text-decoration: none; cursor: pointer;
}
.kiosk-actions button:hover, .kiosk-actions a:hover { border-color: var(--accent-cyan); color: var(--accent-cyan); }
.kiosk-progress { grid-column: 1 / -1; height: 2px; width: 0; background: var(--accent-cyan); box-shadow: 0 0 8px var(--accent-cyan); }
body.kiosk-paused .kiosk-progress { width: 100%; opacity: .25; }
@keyframes kioskProgress { from { width: 0; } to { width: 100%; } }

@media (max-width: 800px) {
    body.kiosk-mode[data-kiosk-scene="propagation"] .prop-grid { grid-template-columns: repeat(2, minmax(130px, 1fr)); }
    body.kiosk-mode[data-kiosk-scene="propagation"] .watched-paths-panel,
    body.kiosk-mode[data-kiosk-scene="weather"] .weather-mesh-list,
    body.kiosk-mode[data-kiosk-kind="stations"] .station-list { grid-template-columns: 1fr; }
    body.kiosk-mode[data-kiosk-scene="weather"] .weather-analytics-grid { grid-template-columns: 1fr; }
    #kiosk-toolbar { left: 8px; right: 8px; bottom: 36px; min-width: 0; }
}
@media (max-width: 650px) { .space-weather-metrics { grid-template-columns: repeat(2, 1fr); } }

.graph-popout-backdrop {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(1, 4, 9, 0.76);
}

.graph-popout {
    width: min(980px, 94vw);
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}

.graph-popout-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
}

.graph-popout-title {
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 700;
}

.graph-popout-close {
    width: 30px;
    height: 28px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-radius: 6px;
    cursor: pointer;
}

.graph-popout canvas {
    display: block;
    width: 100%;
    height: min(62vh, 520px);
}

.weather-dashboard-backdrop {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    justify-content: center;
    align-items: stretch;
    padding: 18px;
    background: rgba(1, 4, 9, 0.78);
}

.weather-dashboard-pane {
    width: min(1180px, 96vw);
    max-height: calc(100vh - 36px);
    overflow: auto;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
}

.weather-dashboard-header {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: rgba(13, 17, 23, 0.96);
    border-bottom: 1px solid var(--border);
}

.weather-dashboard-title {
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 800;
}

.weather-dashboard-subtitle {
    margin-top: 2px;
    color: var(--text-secondary);
    font-size: 12px;
}

.weather-dashboard-close {
    width: 34px;
    height: 32px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
}

.weather-dashboard-body {
    padding: 16px;
}

.weather-dashboard-status {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.weather-status-tile,
.weather-gauge,
.weather-dashboard-map-card,
.weather-dashboard-records,
.weather-dashboard-forecast,
.weather-dashboard-chart,
.weather-dashboard-summary {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.weather-status-tile {
    padding: 10px 12px;
}

.weather-status-label,
.weather-gauge-label {
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
}

.weather-status-value {
    margin-top: 4px;
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 800;
}

.weather-card-title {
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 10px;
}

.weather-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.weather-dashboard-map-card {
    grid-column: span 2;
    grid-row: span 2;
    padding: 12px;
}

#weather-dashboard-map {
    height: 344px;
    min-height: 260px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-primary);
}

.weather-map-caption {
    margin-top: 8px;
    color: var(--text-secondary);
    font-size: 12px;
}

.weather-gauge {
    padding: 14px;
    min-height: 210px;
}

.weather-gauge-ring {
    --pct: 0deg;
    width: 132px;
    aspect-ratio: 1;
    margin: 12px auto 8px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: conic-gradient(var(--gauge-color, #58a6ff) var(--pct), rgba(139, 148, 158, 0.18) 0);
    position: relative;
}

.weather-gauge-ring::after {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: 50%;
    background: var(--bg-primary);
    border: 1px solid rgba(139, 148, 158, 0.2);
}

.weather-gauge-value {
    position: relative;
    z-index: 1;
    color: var(--text-primary);
    font-size: 24px;
    font-weight: 900;
}

.weather-gauge-caption {
    color: var(--text-secondary);
    font-size: 12px;
    text-align: center;
    min-height: 32px;
}

.weather-dashboard-records {
    grid-column: span 2;
    padding: 12px;
}

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

.weather-record-tile {
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: rgba(13, 17, 23, 0.38);
}

.weather-record-tile span {
    display: block;
    color: var(--text-muted);
    font-size: 10px;
    text-transform: uppercase;
}

.weather-record-tile strong {
    display: block;
    margin-top: 4px;
    color: var(--text-primary);
    font-size: 18px;
}

.weather-record-tile em {
    display: block;
    margin-top: 3px;
    color: var(--text-secondary);
    font-size: 11px;
    font-style: normal;
}

.weather-dashboard-chart {
    grid-column: span 2;
    padding: 12px;
}

.weather-dashboard-chart canvas {
    width: 100%;
    height: 230px;
    display: block;
}

.weather-dashboard-summary {
    grid-column: span 2;
    padding: 14px;
}

.weather-dashboard-summary h4 {
    margin-top: 0;
}

.weather-summary-list {
    display: grid;
    gap: 8px;
}

.weather-summary-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 12px;
}

.weather-summary-row strong {
    color: var(--text-primary);
}

.weather-dashboard-forecast {
    grid-column: 1 / -1;
    padding: 12px;
}

.weather-forecast-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.weather-forecast-tile {
    min-height: 142px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(13, 17, 23, 0.42);
    text-align: center;
}

.weather-forecast-day {
    color: var(--text-primary);
    font-weight: 800;
    font-size: 12px;
}

.weather-forecast-icon {
    margin: 8px 0 4px;
    font-size: 26px;
    line-height: 1;
}

.weather-forecast-desc {
    min-height: 32px;
    color: var(--text-secondary);
    font-size: 11px;
}

.weather-forecast-temp {
    margin-top: 8px;
    color: var(--text-primary);
    font-weight: 800;
}

.weather-forecast-meta {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 10px;
}

@media (max-width: 900px) {
    .weather-dashboard-status,
    .weather-dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .weather-dashboard-chart,
    .weather-dashboard-map-card,
    .weather-dashboard-records,
    .weather-dashboard-summary {
        grid-column: span 2;
    }

    .weather-forecast-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .weather-dashboard-status,
    .weather-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .weather-dashboard-chart,
    .weather-dashboard-map-card,
    .weather-dashboard-records,
    .weather-dashboard-summary {
        grid-column: span 1;
    }

    .weather-record-grid,
    .weather-forecast-grid {
        grid-template-columns: 1fr;
    }
}

.analytics-section h4 {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 12px 0 6px;
}

/* ── Leaderboard ────────────────────────────────────────────────── */

.leaderboard-table {
    font-size: 12px;
}

.leaderboard-quality-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin: 0 0 9px;
    color: var(--text-muted);
    font-size: 10px;
}

.leaderboard-quality-controls .analytics-toggle {
    margin: 0;
}

.lb-row.lb-suspect {
    opacity: 0.78;
    background: rgba(210, 153, 34, 0.08);
}

.lb-call small {
    color: var(--accent-orange);
    font-family: inherit;
    font-size: 8px;
    text-transform: uppercase;
}

.lb-header,
.lb-row {
    display: grid;
    grid-template-columns: 36px 1fr 80px 65px;
    padding: 5px 6px;
    align-items: center;
    gap: 4px;
}

.lb-header {
    color: var(--text-muted);
    font-size: 10px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: var(--bg-secondary);
}

.lb-row {
    border-bottom: 1px solid var(--border);
    transition: background 0.15s;
}

.lb-row:hover {
    background: var(--bg-tertiary);
}

.lb-row.lb-top {
    background: rgba(88, 166, 255, 0.05);
}

.lb-rank {
    text-align: center;
    font-weight: bold;
}

.lb-call {
    font-family: "Consolas", "Courier New", monospace;
    color: var(--accent-cyan);
    overflow: hidden;
    text-overflow: ellipsis;
}

.lb-dist {
    text-align: right;
    font-weight: bold;
    color: var(--accent-green);
}

.lb-time {
    text-align: right;
    color: var(--text-muted);
    font-size: 11px;
}

/* ── Heatmap ────────────────────────────────────────────────────── */

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

.heatmap-label {
    font-size: 10px;
    color: var(--text-muted);
}

.heatmap-gradient {
    flex: 1;
    height: 8px;
    border-radius: 3px;
    background: linear-gradient(to right, #1a1e2e, #1e3a5f, #0d7377, #3fb950, #d29922, #f85149);
}

/* ── Reliability ────────────────────────────────────────────────── */

.reliability-table {
    font-size: 12px;
}

.rel-header,
.rel-row {
    display: grid;
    grid-template-columns: 40px 1fr 50px 50px 70px;
    padding: 5px 6px;
    align-items: center;
    gap: 4px;
}

.rel-header {
    color: var(--text-muted);
    font-size: 10px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: var(--bg-secondary);
}

.rel-row {
    border-bottom: 1px solid var(--border);
    transition: background 0.15s;
}

.rel-row:hover {
    background: var(--bg-tertiary);
}

.rel-grade {
    text-align: center;
    font-weight: bold;
    font-size: 14px;
    border-radius: 4px;
    padding: 1px 4px;
}

.grade-a { color: #3fb950; }
.grade-b { color: #58a6ff; }
.grade-c { color: #d29922; }
.grade-d { color: #f85149; }
.grade-f { color: #6e7681; }

.rel-call {
    font-family: "Consolas", "Courier New", monospace;
    color: var(--accent-cyan);
    overflow: hidden;
    text-overflow: ellipsis;
}

.rel-dist {
    display: block;
    font-size: 10px;
    color: var(--text-muted);
    font-family: inherit;
}

.rel-score {
    text-align: center;
    font-weight: bold;
}

.rel-pkts {
    text-align: center;
    color: var(--text-secondary);
}

.rel-int {
    text-align: right;
    color: var(--text-muted);
    font-size: 11px;
}

/* ── Best Time of Day ───────────────────────────────────────────── */

.best-hours-cards {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.best-hour-card {
    flex: 1;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px;
    text-align: center;
}

.best-hour-medal {
    font-size: 20px;
}

.best-hour-time {
    font-size: 16px;
    font-weight: bold;
    color: var(--accent-blue);
    margin: 2px 0;
}

.best-hour-score {
    font-size: 11px;
    color: var(--accent-green);
}

.best-hour-detail {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 2px;
}

.dow-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-top: 6px;
}

.dow-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 6px 4px;
    text-align: center;
}

.dow-name {
    font-size: 11px;
    font-weight: bold;
    color: var(--accent-blue);
    margin-bottom: 2px;
}

.dow-val {
    font-size: 10px;
    color: var(--text-secondary);
}

/* ── Alerts ─────────────────────────────────────────────────────── */

.alert-badge {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: bold;
}

.alert-badge.off {
    background: var(--bg-tertiary);
    color: var(--text-muted);
}

.alert-badge.on {
    background: rgba(63, 185, 80, 0.15);
    color: var(--accent-green);
}

.alert-badge.open {
    background: rgba(248, 81, 73, 0.15);
    color: var(--accent-red);
    animation: pulse-alert 1.5s infinite;
}

@keyframes pulse-alert {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.alert-history {
    max-height: 300px;
    overflow-y: auto;
}

.alert-item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent-orange);
    border-radius: 4px;
    padding: 8px;
    margin-bottom: 6px;
}

.alert-time {
    font-size: 10px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.alert-msg {
    font-size: 12px;
    color: var(--text-primary);
    line-height: 1.4;
}

/* ── Anomaly Card ───────────────────────────────────────────────── */

.anomaly-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 12px 14px;
    margin-bottom: 8px;
}

.anomaly-level {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 4px;
}

.anomaly-score {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.anomaly-details {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: var(--text-secondary);
}

.anomaly-details b {
    color: var(--text-primary);
}

/* ── Bearing Sectors ────────────────────────────────────────────── */

#bearing-radar-chart {
    display: block;
    margin: 0 auto 10px;
}

.bearing-sector-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bearing-sector-item {
    display: grid;
    grid-template-columns: 40px 60px 90px 1fr;
    gap: 6px;
    align-items: center;
    padding: 5px 8px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 12px;
}

.bearing-sector-item.dominant {
    border-left: 3px solid var(--accent-blue);
    background: rgba(88, 166, 255, 0.06);
}

.sector-name {
    font-weight: bold;
    color: var(--accent-blue);
}

.sector-count {
    color: var(--text-secondary);
}

.sector-dist {
    color: var(--text-secondary);
    font-size: 11px;
}

.sector-calls {
    font-family: "Consolas", "Courier New", monospace;
    font-size: 10px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Sporadic-E ─────────────────────────────────────────────────── */

.es-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 12px 14px;
    margin-bottom: 8px;
}

.es-level {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 4px;
}

.es-score {
    font-size: 12px;
    color: var(--text-secondary);
}

.es-detail {
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-muted);
}

.es-candidate-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.es-candidate-item {
    display: grid;
    grid-template-columns: 1fr 80px 60px;
    gap: 6px;
    padding: 4px 8px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 12px;
}

.es-c-call {
    font-family: "Consolas", "Courier New", monospace;
    color: var(--text-primary);
}

.es-c-dist {
    color: var(--text-secondary);
    text-align: right;
}

.es-c-score {
    color: var(--text-muted);
    text-align: right;
    font-size: 11px;
}

/* ── First Heard ────────────────────────────────────────────────── */

.first-heard-table {
    font-size: 12px;
}

.fh-header,
.fh-row {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) 80px minmax(92px, 1.1fr);
    padding: 5px 6px;
    align-items: center;
    gap: 4px;
}

.fh-header {
    color: var(--text-muted);
    font-size: 10px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border);
}

.fh-row {
    border-bottom: 1px solid var(--border);
    transition: background 0.15s;
}

.fh-row:hover {
    background: var(--bg-tertiary);
}

.fh-call {
    font-family: "Consolas", "Courier New", monospace;
    color: var(--accent-green);
}

.fh-time {
    color: var(--text-secondary);
    font-size: 11px;
}

.fh-dist {
    color: var(--text-secondary);
    text-align: right;
}

.fh-path {
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
}

.fh-path.direct {
    color: var(--accent-green);
    font-weight: 700;
}

.analytics-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
}

.analytics-toggle input {
    accent-color: var(--accent-blue);
}

/* ── Export ──────────────────────────────────────────────────────── */

.export-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.export-group {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 4px;
}

.export-group span {
    flex: 1;
    font-size: 12px;
    color: var(--text-primary);
}

.btn-small {
    padding: 3px 10px;
    font-size: 11px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-small:hover {
    background: var(--accent-blue);
    color: #fff;
    border-color: var(--accent-blue);
}

/* ── Ducting Indicator ──────────────────────────────────────────── */

.wx-ducting {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    white-space: nowrap;
    color: inherit;
    font-family: inherit;
    cursor: pointer;
}

.wx-ducting-label {
    color: var(--text-secondary);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

#wx-ducting-value {
    font-family: "Consolas", "Courier New", monospace;
    font-weight: 700;
}

.wx-ducting:hover,
.wx-ducting:focus-visible {
    border-color: var(--accent-blue);
    background: rgba(88, 166, 255, 0.16);
    outline: none;
}

.ducting-modal {
    width: min(760px, calc(100vw - 32px));
}

.ducting-modal-body {
    display: grid;
    gap: 14px;
}

.ducting-summary {
    display: grid;
    grid-template-columns: minmax(120px, auto) 1fr;
    gap: 16px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-secondary);
}

.ducting-score {
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
}

.ducting-level {
    margin-top: 6px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.ducting-level-minimal,
.ducting-level-low {
    color: var(--text-muted);
}

.ducting-level-moderate {
    color: var(--accent-orange);
}

.ducting-level-high,
.ducting-level-extreme {
    color: var(--accent-red);
}

.ducting-summary-text,
.ducting-note {
    color: var(--text-muted);
    line-height: 1.45;
}

.ducting-measurements {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
}

.ducting-metric {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-primary);
}

.ducting-metric span {
    color: var(--text-muted);
}

.ducting-factor-list {
    display: grid;
    gap: 8px;
}

.ducting-factor-row {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto minmax(110px, 0.35fr);
    gap: 10px;
    align-items: center;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-primary);
}

.ducting-factor-name {
    font-weight: 700;
}

.ducting-factor-detail {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 13px;
}

.ducting-factor-points {
    font-weight: 800;
    white-space: nowrap;
}

.ducting-factor-bar {
    height: 8px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
}

.ducting-factor-bar span {
    display: block;
    height: 100%;
    background: var(--accent-blue);
}

@media (max-width: 720px) {
    .ducting-summary,
    .ducting-factor-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .settings-workspace {
        grid-template-columns: 1fr;
    }

    .settings-quicknav {
        display: none;
    }

    .settings-category-select {
        display: block;
    }

    .settings-category-content {
        padding-left: 0;
    }

    .settings-row,
    .settings-row.full-width,
    .watched-builder-search,
    .rf-port-fields .settings-row {
        grid-template-columns: 1fr;
    }

    .settings-action-row {
        display: flex;
    }

    .settings-action-row > .btn-small,
    .settings-action-row > .btn-primary,
    .watched-builder-search-controls .btn-small {
        width: 100%;
        max-width: none;
    }
}

/* ── Alert notif banner ─────────────────────────────────────────── */

.alert-notification {
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #7c2d12, #9a3412);
    color: #fef3c7;
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 13px;
    z-index: 10000;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
    animation: slide-down 0.4s ease;
    transition: opacity 0.5s;
}

.alert-notification.system-notification {
    background: linear-gradient(135deg, #0f3d2e, #166534);
    color: #eafff2;
}

.alert-notification.system-notification.error {
    background: linear-gradient(135deg, #7f1d1d, #b91c1c);
    color: #fee2e2;
}

.alert-notification.system-notification.warning {
    background: linear-gradient(135deg, #7c2d12, #b45309);
    color: #fff7ed;
}

.alert-notification.fade-out {
    opacity: 0;
}

.alert-notif-icon {
    font-size: 16px;
}

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

/* ── Message Alert Banner ───────────────────────────────────────── */

.msg-alert-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #1a365d, #2563eb);
    color: #e0f2fe;
    padding: 6px 16px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s;
    z-index: 100;
}

.msg-alert-banner:hover {
    background: linear-gradient(135deg, #1e40af, #3b82f6);
}

.msg-alert-icon {
    font-size: 16px;
    flex-shrink: 0;
}

.msg-alert-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.msg-alert-text b {
    color: #93c5fd;
}

.msg-alert-close {
    background: none;
    border: none;
    color: #93c5fd;
    font-size: 18px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    flex-shrink: 0;
}

.msg-alert-close:hover {
    color: #fff;
}

.update-alert-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #5f370e, #8a4f12);
    color: #fff4cf;
    padding: 7px 16px;
    font-size: 13px;
    border-bottom: 1px solid rgba(255, 209, 64, 0.22);
    z-index: 101;
}

.update-alert-icon {
    font-size: 15px;
    flex-shrink: 0;
}

.update-alert-text {
    flex: 1;
    min-width: 0;
}

.update-alert-link {
    color: #ffe08a;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.update-alert-link:hover {
    text-decoration: underline;
}

.update-alert-close {
    background: none;
    border: none;
    color: #ffe08a;
    font-size: 20px;
    cursor: pointer;
    padding: 0 0 2px;
    line-height: 1;
    flex-shrink: 0;
}

.update-alert-close:hover {
    color: #fff7dc;
}

.msg-alert-flash {
    animation: msg-flash 0.6s ease;
}

@keyframes msg-flash {
    0%, 100% { background: linear-gradient(135deg, #1a365d, #2563eb); }
    50% { background: linear-gradient(135deg, #1e40af, #60a5fa); }
}

/* ── Messages Tab ───────────────────────────────────────────────── */

.msg-compose-bar {
    display: flex;
    gap: 6px;
    padding: 8px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
}

.msg-input-call {
    width: 90px;
    padding: 6px 8px;
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-family: 'Consolas', monospace;
    font-size: 12px;
    text-transform: uppercase;
}

.msg-input-text {
    flex: 1;
    padding: 6px 8px;
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 12px;
}

.msg-source-select {
    width: 86px;
    padding: 6px 8px;
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 12px;
}

.msg-input-call:focus,
.msg-input-text:focus,
.msg-source-select:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.15);
}

.btn-send-msg {
    padding: 6px 14px;
    font-size: 12px;
    white-space: nowrap;
}

.message-panel {
    display: flex;
    flex: 1;
    min-height: 0;
    flex-direction: column;
    background: var(--panel-bg);
    color: var(--text-primary);
}

.message-pane-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    background: var(--sticky-panel-bg);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.message-pane-header h2 {
    margin: 0 0 3px;
    font-size: 18px;
    color: var(--text-primary);
}

.message-pane-header p {
    margin: 0;
    font-size: 12px;
    color: var(--text-muted);
}

.msg-filter-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border);
    font-size: 12px;
}

.msg-filter-bar label {
    color: var(--text-secondary);
}

.msg-filter-bar select {
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 2px 4px;
    font-size: 11px;
}

.msg-list {
    overflow-y: auto;
    flex: 1;
    padding: 4px;
}

.msg-workspace {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    min-height: 0;
    flex: 1;
}

.msg-contacts-panel {
    border-right: 1px solid var(--border);
    background: var(--bg-secondary);
    min-width: 0;
    overflow-y: auto;
}

.msg-contacts-title {
    padding: 8px 10px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0;
}

.msg-contact-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 28px;
    gap: 4px;
    align-items: center;
    padding: 3px 6px;
}

.msg-contact-call,
.msg-contact-delete {
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    min-width: 0;
}

.msg-contact-call {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    text-align: left;
    font-family: 'Consolas', monospace;
    font-size: 12px;
    padding: 4px 5px;
    width: 100%;
    border-radius: 4px;
}

.msg-contact-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.msg-contact-delete {
    color: var(--text-muted);
    border-radius: 4px;
    height: 24px;
}

.msg-contact-item:hover .msg-contact-call,
.msg-contact-delete:hover {
    background: var(--bg-tertiary);
}

.msg-contact-item.active .msg-contact-call {
    background: rgba(88, 166, 255, 0.16);
    border-color: rgba(88, 166, 255, 0.45);
    color: var(--text-primary);
}

.msg-unread-badge {
    flex: 0 0 auto;
    padding: 1px 5px;
    border-radius: 999px;
    background: var(--accent-red);
    color: #fff;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
}

.msg-contact-empty {
    padding: 10px;
    color: var(--text-muted);
    font-size: 12px;
}

.msg-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 40px 20px;
    font-size: 13px;
}

.msg-item {
    width: fit-content;
    max-width: min(76%, 560px);
    padding: 8px 10px;
    margin: 6px 8px;
    border-radius: 8px;
    border-left: 0;
    transition: background 0.15s;
    cursor: pointer;
}

.msg-item:hover {
    background: var(--bg-secondary);
}

.msg-item.msg-tx {
    margin-left: auto;
    background: rgba(88, 166, 255, 0.04);
    border: 1px solid rgba(88, 166, 255, 0.26);
}

.msg-item.msg-rx-mine {
    background: rgba(63, 185, 80, 0.04);
    border: 1px solid rgba(63, 185, 80, 0.24);
}

.msg-item.msg-rx {
    border: 1px solid var(--border);
}

.msg-header {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    margin-bottom: 2px;
}

.msg-dir {
    font-size: 12px;
}

.msg-from {
    font-weight: 600;
    color: var(--accent-blue);
    font-family: 'Consolas', monospace;
    font-size: 11px;
}

.msg-arrow {
    color: var(--text-muted);
    font-size: 10px;
}

.msg-to {
    font-weight: 600;
    color: var(--accent-purple);
    font-family: 'Consolas', monospace;
    font-size: 11px;
}

.msg-source-tag {
    font-size: 9px;
    padding: 1px 4px;
    border-radius: 3px;
    font-weight: 600;
    text-transform: uppercase;
}

.msg-source-tag.rf {
    background: rgba(248, 81, 73, 0.2);
    color: #f85149;
}

.msg-source-tag.is {
    background: rgba(88, 166, 255, 0.2);
    color: #58a6ff;
}

.msg-source-tag.tx {
    background: rgba(63, 185, 80, 0.2);
    color: #3fb950;
}

.msg-time {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 10px;
    font-family: 'Consolas', monospace;
}

.msg-status {
    font-size: 12px;
    margin-left: 2px;
}

.msg-status.acked {
    color: var(--accent-green);
}

.msg-status.rejected {
    color: #f85149;
}

.msg-status.pending {
    color: var(--text-muted);
    font-size: 10px;
}

.msg-body {
    font-size: 13px;
    color: var(--text-primary);
    padding: 4px 0 0 0;
    word-break: break-word;
    line-height: 1.4;
}

@media (max-width: 720px) {
    .msg-workspace {
        grid-template-columns: 1fr;
    }

    .msg-contacts-panel {
        max-height: 96px;
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .msg-contact-list {
        display: flex;
        overflow-x: auto;
        padding: 0 6px 6px;
    }

    .msg-contact-item {
        min-width: 120px;
    }

    .msg-item {
        max-width: 88%;
    }
}

/* ── Weather Banner ─────────────────────────────────────────── */

#wx-banner {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    font-size: 13px;
    color: var(--text-primary);
    z-index: 800;
    flex-shrink: 0;
    min-height: 30px;
}

.wx-current {
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
}

#wx-icon {
    font-size: 18px;
    line-height: 1;
}

#wx-temp {
    font-size: 17px;
    font-weight: 700;
    font-family: 'Consolas', monospace;
    white-space: nowrap;
}

#wx-desc {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wx-details {
    display: flex;
    gap: 9px;
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    flex-wrap: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wx-details span {
    display: flex;
    align-items: center;
    gap: 3px;
}

.wx-details .wx-label {
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 0.5px;
}

.wx-details .wx-value {
    font-family: 'Consolas', monospace;
}

#wx-location {
    margin-left: auto;
    font-size: 10px;
    color: var(--text-muted);
    white-space: nowrap;
}

#wx-refresh-btn {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1;
    transition: color 0.15s, border-color 0.15s;
}

#wx-refresh-btn:hover {
    color: var(--accent-blue);
    border-color: var(--accent-blue);
}

/* ── Severe Weather Alerts ──────────────────────────────────── */

#wx-alerts-container {
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 801;
    flex-shrink: 0;
}

#wx-alerts-container.has-expanded-alert {
    z-index: 1400;
    max-height: min(58vh, 520px);
    overflow-y: auto;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.42);
}

/* v1.10 guided setup and navigation */
.watched-callbook-advanced {
    margin: 0 0 14px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--control-radius, 8px);
    background: color-mix(in srgb, var(--bg-input) 78%, transparent);
}
.watched-callbook-advanced summary { cursor: pointer; color: var(--text); font-weight: 700; }
.watched-callbook-advanced summary span { margin-left: 8px; color: var(--text-muted); font-size: 12px; font-weight: 400; }
.watched-callbook-advanced[open] summary { margin-bottom: 12px; }

.first-run-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 0;
    background: transparent;
    color: var(--text);
    text-align: left;
    cursor: pointer;
    padding: 6px 4px;
}
.first-run-item:hover { color: var(--accent-blue); }
.first-run-item::before,
.first-run-item.done::before { content: none; }
.first-run-item .first-run-state {
    width: 20px; height: 20px; display: inline-grid; place-items: center;
    border-radius: 50%; border: 1px solid var(--border); color: var(--accent-blue);
}
.first-run-item.done .first-run-state { color: var(--accent-green); border-color: var(--accent-green); }

.setup-mode-panel select { width: 100%; margin-bottom: 8px; }
.setup-mode-preview { display: grid; gap: 4px; margin: 8px 0; padding: 9px; border-left: 3px solid var(--accent-green); background: rgba(63,185,80,.08); }
.setup-mode-preview.caution { border-color: var(--accent-orange); background: rgba(210,153,34,.08); }
.setup-mode-preview.transmit { border-color: var(--accent-red); background: rgba(248,81,73,.08); }
.setup-mode-preview span, #setup-mode-result { color: var(--text-muted); font-size: 12px; line-height: 1.4; }
.setup-mode-panel .btn-small { margin: 2px 0 6px; }
.setup-guidance-panel { grid-column: 1 / -1; }
.setup-configuration-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 10px; padding: 9px 11px; border-left: 3px solid var(--accent-blue); background: color-mix(in srgb, var(--accent-blue) 8%, transparent); line-height: 1.4; }
.setup-configuration-summary span { color: var(--text-muted); font-size: 12px; }
.setup-configuration-summary .setup-config-state { padding: 2px 6px; border: 1px solid var(--accent-blue); border-radius: 999px; color: var(--accent-blue); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.setup-context-checklist ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 0; padding: 0; list-style: none; }
.setup-context-checklist li button { width: 100%; min-height: 52px; display: flex; align-items: flex-start; gap: 9px; padding: 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-input); color: var(--text); text-align: left; cursor: pointer; }
.setup-context-checklist li button:hover { border-color: var(--accent-blue); }
.setup-context-checklist li button > span:last-child { min-width: 0; display: grid; gap: 3px; }
.setup-context-checklist small { color: var(--text-muted); line-height: 1.35; overflow-wrap: anywhere; }
.setup-guide-state { min-width: 48px; padding: 2px 5px; border: 1px solid var(--accent-green); border-radius: 999px; color: var(--accent-green); font-size: 10px; font-weight: 800; text-align: center; }
.setup-context-checklist li.review .setup-guide-state { border-color: var(--accent-orange); color: var(--accent-orange); }
.setup-context-checklist li.needed .setup-guide-state { border-color: var(--accent-red); color: var(--accent-red); }
.setup-context-checklist > p { margin: 0; color: var(--text-muted); font-size: 12px; }
.setup-safety-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 11px; }
.setup-safety-actions span { flex: 1 1 240px; }
@media (max-width: 700px) { .setup-context-checklist ul { grid-template-columns: 1fr; } }

.transmit-save-guard-modal { width: min(680px, calc(100vw - 28px)); max-height: min(760px, calc(100vh - 28px)); overflow-y: auto; }
.transmit-save-guard-modal > p { color: var(--text-muted); }
#transmit-save-change-list { display: grid; gap: 7px; margin: 10px 0 14px 20px; }
#transmit-save-change-list button { border: 0; padding: 0; background: none; color: var(--accent-orange); text-align: left; cursor: pointer; }
#transmit-save-change-list button:hover { color: var(--accent-blue); text-decoration: underline; }
.transmit-backup-callout { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; margin: 12px 0; padding: 11px; border: 1px solid color-mix(in srgb, var(--accent-blue) 45%, var(--border)); border-radius: 7px; background: color-mix(in srgb, var(--accent-blue) 7%, var(--bg-input)); }
.transmit-backup-callout strong, .transmit-backup-callout span, .transmit-backup-callout small { grid-column: 1; }
.transmit-backup-callout span, .transmit-backup-callout small { color: var(--text-muted); font-size: 11px; }
.transmit-backup-callout .btn-small { grid-column: 2; grid-row: 1 / span 2; }
.transmit-protection-message { margin: 10px 0; padding: 9px 11px; border-left: 3px solid var(--accent-orange); background: rgba(210,153,34,.08); color: var(--text-muted); }
.transmit-protection-message.locked { border-color: var(--accent-red); background: rgba(248,81,73,.08); color: var(--accent-red); font-weight: 700; }
.transmit-guard-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.transmit-confirm { background: var(--accent-red) !important; border-color: var(--accent-red) !important; }
.transmit-confirm:disabled { opacity: .45; cursor: not-allowed; }

.object-map-editor-callout { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 18px; align-items: center; margin: 8px 0 14px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--accent-blue) 65%, var(--border)); border-left: 4px solid var(--accent-blue); border-radius: 8px; background: color-mix(in srgb, var(--accent-blue) 11%, var(--bg-input)); }
.object-map-editor-callout strong { display: block; color: var(--text-primary); font-size: 14px; }
.object-map-editor-callout p { margin: 4px 0 0; color: var(--text-secondary); font-size: 12px; line-height: 1.45; }
.object-map-editor-callout .btn-primary { white-space: nowrap; }
.object-records-help { grid-column: 2; margin: -2px 0 4px; color: var(--text-muted); font-size: 11px; line-height: 1.45; }
.object-records-help strong { color: var(--text-secondary); }
@media (max-width: 700px) {
    .object-map-editor-callout { grid-template-columns: 1fr; }
    .object-map-editor-callout .btn-primary { width: 100%; }
    .object-records-help { grid-column: 1 / -1; }
}

#configuration-readiness .readiness-summary { font-weight: 800; margin-bottom: 8px; }
#configuration-readiness .readiness-summary.ready { color: var(--accent-green); }
#configuration-readiness .readiness-summary.review { color: var(--accent-orange); }
#configuration-readiness .readiness-summary.needs-attention { color: var(--accent-red); }
#configuration-readiness ul { list-style: none; display: grid; gap: 6px; margin: 0 0 9px; }
#configuration-readiness li button { border: 0; padding: 0; background: none; color: var(--text-muted); text-align: left; cursor: pointer; line-height: 1.35; }
#configuration-readiness li button:hover { color: var(--accent-blue); text-decoration: underline; }
#configuration-readiness li.blocker button::before { content: 'Fix: '; color: var(--accent-red); font-weight: 800; }
#configuration-readiness li.warning button::before { content: 'Review: '; color: var(--accent-orange); font-weight: 800; }

.settings-basic-mode .settings-section[data-usability-level="advanced"],
.settings-quicknav-btn.complexity-hidden { display: none !important; }
.settings-category-select option[hidden] { display: none; }
.settings-complexity-btn { border-color: var(--accent-blue) !important; color: var(--accent-blue) !important; }
.settings-section.usability-focus { animation: usabilityFocus 1.8s ease; }
@keyframes usabilityFocus { 0%, 100% { box-shadow: none; } 25%, 70% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-blue) 42%, transparent); } }

.alert-setup-assistant { margin-bottom: 15px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--accent-blue) 55%, var(--border)); border-radius: var(--control-radius, 8px); background: color-mix(in srgb, var(--accent-blue) 7%, var(--bg-card)); }
.alert-setup-assistant > strong { color: var(--accent-blue); }
.alert-setup-assistant ol { margin: 8px 0 7px 20px; color: var(--text-muted); line-height: 1.55; }
.alert-setup-assistant button { border: 0; padding: 0; background: none; color: var(--accent-blue); cursor: pointer; text-decoration: underline; }
.alert-setup-assistant p { color: var(--text-muted); font-size: 12px; }

.connection-chip[role="button"] { cursor: pointer; }
.connection-chip[role="button"]:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; }
.connection-diagnostics-modal { width: min(680px, calc(100vw - 28px)); max-height: min(720px, calc(100vh - 28px)); }
.connection-diagnostics-body { display: grid; gap: 10px; overflow: auto; }
.diagnostic-card { padding: 12px; border: 1px solid var(--border); border-radius: var(--control-radius, 8px); background: var(--bg-input); }
.diagnostic-card > div { display: flex; justify-content: space-between; gap: 12px; }
.diagnostic-card.ok > div span { color: var(--accent-green); }
.diagnostic-card.attention > div span { color: var(--accent-orange); }
.diagnostic-card p { margin: 7px 0; color: var(--text-muted); line-height: 1.45; }
.diagnostic-card button, .empty-state-action { border: 0; padding: 0; background: none; color: var(--accent-blue); cursor: pointer; text-decoration: underline; }
.diagnostics-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.diagnostics-error { color: var(--accent-red); padding: 16px; }

.terminology-modal { width: min(720px, calc(100vw - 28px)); max-height: min(760px, calc(100vh - 28px)); overflow: auto; }
.terminology-modal dl { display: grid; gap: 10px; }
.terminology-modal dl > div { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--control-radius, 8px); background: var(--bg-input); }
.terminology-modal dt { color: var(--accent-blue); font-weight: 800; }
.terminology-modal dd { margin: 4px 0 0; color: var(--text-muted); line-height: 1.45; }
.term-help { display: inline-grid; place-items: center; width: 20px; height: 20px; border: 1px solid var(--border); border-radius: 50%; background: var(--bg-input); color: var(--accent-blue); font: 700 12px/1 inherit; cursor: pointer; vertical-align: middle; }
.empty-state-action { margin-top: 8px; font-size: 12px; }

@media (max-width: 760px) {
    .watched-callbook-advanced summary span { display: block; margin: 4px 0 0 18px; }
    .connection-diagnostics-modal, .terminology-modal { width: calc(100vw - 16px); max-height: calc(100vh - 16px); }
}

.wx-alert {
    position: relative;
    border-bottom: 1px solid transparent;
}

.wx-alert-warning {
    background: rgba(248, 81, 73, 0.15);
    color: #ff6b6b;
    border-bottom-color: rgba(248, 81, 73, 0.3);
}

.wx-alert-watch {
    background: rgba(255, 166, 0, 0.15);
    color: #ffa600;
    border-bottom-color: rgba(255, 166, 0, 0.3);
}

#wx-alerts-container.has-unacknowledged-alerts .wx-alert-warning {
    animation: wxAlertSubtlePulse 5s ease-in-out infinite;
}

#wx-alerts-container.has-unacknowledged-alerts .wx-alert-warning {
    --wx-alert-pulse-shadow: rgba(248, 81, 73, 0.36);
}

.wx-alert-summary {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 42px 7px 14px;
    font-size: 12px;
    font-weight: 600;
    color: inherit;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
}

.wx-alert-summary:hover {
    background: rgba(255, 255, 255, 0.03);
}

.wx-alert-summary:focus-visible {
    outline: 1px solid rgba(255, 255, 255, 0.35);
    outline-offset: -1px;
}

.wx-alert-dismiss {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 4px;
    background: rgba(13, 17, 23, 0.45);
    color: currentColor;
    font-size: 15px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}

.wx-alert-dismiss:hover,
.wx-alert-dismiss:focus-visible {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.5);
    outline: none;
}

.wx-alert-icon {
    font-size: 14px;
    flex-shrink: 0;
}

.wx-alert-event {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wx-alert-severity {
    font-size: 9px;
    text-transform: uppercase;
    padding: 1px 5px;
    border-radius: 3px;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.wx-alert-warning .wx-alert-severity {
    background: rgba(248, 81, 73, 0.25);
}

.wx-alert-watch .wx-alert-severity {
    background: rgba(255, 166, 0, 0.25);
}

.wx-alert-expand {
    font-size: 11px;
    opacity: 0.78;
    flex-shrink: 0;
}

.wx-alert-detail {
    padding: 0 42px 12px 14px;
    font-weight: 400;
    font-size: 11px;
    line-height: 1.55;
    color: var(--text-primary);
    max-height: min(46vh, 420px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.wx-alert.is-expanded .wx-alert-summary {
    padding-bottom: 5px;
}

.wx-alert-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 10px;
}

.wx-alert-meta-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    font-size: 10px;
    line-height: 1.3;
}

.wx-alert-section + .wx-alert-section {
    margin-top: 10px;
}

.wx-alert-section-label {
    margin-bottom: 5px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.wx-alert-detail p {
    margin: 0;
}

.wx-alert-desc,
.wx-alert-instruction {
    color: var(--text-primary);
}

.wx-alert-desc p,
.wx-alert-instruction p {
    margin: 0;
}

.wx-alert-desc p + p,
.wx-alert-instruction p + p {
    margin-top: 8px;
}

.wx-alert-list {
    margin: 0;
    padding-left: 18px;
}

.wx-alert-list li + li {
    margin-top: 4px;
}

@keyframes wxAlertSubtlePulse {
    0%, 70%, 100% {
        filter: brightness(1);
        box-shadow: none;
    }
    78% {
        filter: brightness(1.18);
        box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.025);
    }
    86% {
        filter: brightness(1.04);
        box-shadow: inset 0 0 0 1px var(--wx-alert-pulse-shadow, rgba(255, 255, 255, 0.18));
    }
}

/* ── Weather Settings ───────────────────────────────────────── */

.wx-location-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.wx-location-row input {
    flex: 1;
}

#btn-wx-resolve {
    padding: 4px 10px;
    font-size: 11px;
    white-space: nowrap;
}

#cfg-wx-resolved {
    font-size: 11px;
    color: var(--text-muted);
    padding: 2px 0;
    min-height: 16px;
}

.weather-overlay-card {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
}

.weather-overlay-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.weather-overlay-subtitle {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.lightning-card {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) minmax(230px, 2fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 10px;
    flex: 0 1 445px;
    width: min(445px, 48vw);
    min-width: 350px;
    margin-left: 8px;
    padding: 5px 8px;
    border: 1px solid rgba(57, 213, 255, .65);
    border-radius: 7px;
    background: rgba(8, 15, 28, .72);
    color: #dce7f5;
    pointer-events: auto;
    box-sizing: border-box;
}

.lightning-card-title {
    grid-column: 1;
    grid-row: 1;
    color: #39d5ff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.lightning-card-title span { display: block; margin-top: 2px; color: #8b9bb0; font-size: 8px; }
.lightning-card-metrics { grid-column: 2; grid-row: 1 / 3; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin: 0; }
.lightning-card-metrics span { padding: 4px 6px; border-radius: 5px; background: rgba(255,255,255,.045); }
.lightning-card-metrics b { display: block; color: #ffd33d; font: 700 13px Consolas, monospace; }
.lightning-card-metrics small { display: block; margin-top: 2px; color: #718096; font-size: 8px; letter-spacing: .08em; }
.lightning-card-status { grid-column: 1; grid-row: 2; display: flex; align-items: center; gap: 5px; margin-top: 2px; color: #8b9bb0; font-size: 8px; white-space: nowrap; min-width: 0; }
.lightning-card-status span { overflow: hidden; text-overflow: ellipsis; }
.lightning-card-status button { flex: 0 0 auto; padding: 2px 5px; border: 1px solid rgba(57, 213, 255, .5); border-radius: 4px; background: rgba(57, 213, 255, .08); color: #39d5ff; font: 700 7px Consolas, monospace; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; }
.lightning-card-status button:hover { background: rgba(57, 213, 255, .18); border-color: #39d5ff; }
.lightning-flash-icon { color: #ffd33d; font-size: 17px; line-height: 18px; text-align: center; filter: drop-shadow(0 0 2px #111) drop-shadow(0 0 4px rgba(255, 211, 61, .9)); }
.lightning-card.stale { border-color: rgba(139, 155, 176, .5); }
.lightning-card.stale .lightning-card-title { color: #8b9bb0; }

@media (max-width: 900px) {
    #wx-banner { flex-wrap: wrap; }
    .lightning-card { flex-basis: 100%; width: 100%; min-width: 0; margin-left: 0; }
}

@media (max-width: 520px) {
    .lightning-card { grid-template-columns: 1fr; }
    .lightning-card-title { grid-column: 1; }
    .lightning-card-title span { display: inline; margin-left: 5px; }
    .lightning-card-status { display: none; }
    .lightning-card-metrics { grid-column: 1; grid-row: 2; margin-top: 4px; }
}

.weather-range-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.weather-range-wrap input[type="range"] {
    flex: 1;
}

.weather-alert-groups {
    margin-top: 6px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
}

.weather-alert-groups summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    list-style: none;
    padding: 10px 12px;
    font-size: 12px;
    color: var(--text-primary);
}

.weather-alert-groups summary::-webkit-details-marker {
    display: none;
}

.weather-alert-groups-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 14px;
    padding: 0 12px 12px;
    font-size: 12px;
    color: var(--text-secondary);
}

.weather-alert-groups-grid label {
    display: flex;
    align-items: center;
    gap: 8px;
}

.weather-overlay-note {
    margin: 10px 0 0;
    font-size: 11px;
    line-height: 1.45;
    color: var(--text-muted);
}

.wx-provider-key {
    display: none;
}

.weather-radar-tile-layer {
    transition: opacity 220ms linear;
}

/* ── About Tab ───────────────────────────────────────────────── */

.about-panel {
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.about-header {
    display: flex;
    align-items: baseline;
    gap: 12px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 14px;
}

.about-header h2 {
    margin: 0;
    font-size: 20px;
    color: var(--text-primary);
}

.about-version {
    font-size: 13px;
    color: var(--accent-blue);
    font-weight: 600;
    background: rgba(88, 166, 255, 0.1);
    padding: 2px 8px;
    border-radius: 4px;
}

.about-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.about-section h3 {
    margin: 0 0 4px 0;
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.about-section p {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.about-update-detail {
    font-size: 12px !important;
    color: var(--text-muted) !important;
}

.about-company {
    font-weight: 600;
    color: var(--text-primary) !important;
}

.about-link {
    color: var(--accent-blue);
    text-decoration: none;
}

.about-link:hover {
    text-decoration: underline;
}

.about-update-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.about-update-btn {
    padding: 8px 16px;
    font-size: 12px;
}

.about-doc-actions {
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 12px;
    text-align: center;
}

.about-doc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 10px 18px;
    border: 0;
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
}

.about-doc-btn:hover {
    text-decoration: none;
}

.about-donate {
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 16px;
    border: 1px solid rgba(255, 209, 64, 0.24);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255, 209, 64, 0.08), rgba(255, 209, 64, 0.03));
}

.about-donate-form {
    display: inline-grid;
    justify-items: center;
    align-content: start;
    gap: 8px;
}

.about-donate-divider {
    display: flex;
    align-items: center;
    width: min(100%, 320px);
    gap: 10px;
    color: var(--text-muted);
    font-size: 0.78rem;
    text-transform: uppercase;
}

.about-donate-divider::before,
.about-donate-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border-color);
}

.about-coffee {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
}

.about-donate-btn {
    text-align: center;
    border: none;
    border-radius: 0.25rem;
    min-width: 11.625rem;
    padding: 0 2rem;
    height: 2.625rem;
    font-weight: 700;
    background-color: #ffd140;
    color: #000000;
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.25rem;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.about-donate-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(255, 209, 64, 0.25);
}

.about-donate-cards {
    max-width: 180px;
    height: auto;
}

.about-donate-powered {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.about-donate-paypal {
    height: 0.875rem;
    vertical-align: middle;
}

/* UI density pass */
.prop-detail {
    padding: 10px 12px 12px;
}

.prop-detail h3 {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 6px 0 7px;
    background: var(--bg-secondary);
    font-size: 12px;
    margin-bottom: 8px;
    text-transform: none;
    letter-spacing: 0;
}

.prop-grid {
    gap: 7px;
    margin-bottom: 14px;
}

.prop-card {
    padding: 8px;
}

.prop-card-value {
    font-size: 18px;
}

.prop-card-label {
    font-size: 9px;
}

.prop-detail canvas {
    max-height: 156px;
    margin-bottom: 12px;
}

.prop-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 2px 0 4px;
}

.prop-section-heading h3 {
    flex: 1;
    margin: 0;
}

.prop-section-heading a {
    color: var(--accent-cyan);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.prop-section-heading a:hover {
    text-decoration: underline;
}

.prop-section-heading a.disabled {
    color: var(--text-muted);
}

.dxview-map-coords {
    color: var(--text-muted);
    font-size: 11px;
    margin: 0 0 12px;
    text-align: right;
}


/* Compact history filters remain usable in the narrow analytics sidebar. */
.rf-history-filters { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:8px; align-items:center; margin:12px 0; font-size:12px; }
.rf-history-filters input, .rf-history-filters select { width:100%; min-width:0; box-sizing:border-box; padding:6px; color:var(--text-primary); background:var(--bg-input,var(--bg-panel)); border:1px solid var(--border-color); border-radius:4px; }

.maidenhead-grid-line { stroke: #7ee7ff; stroke-width: 1; stroke-opacity: .42; }
.maidenhead-grid-label { color: #d9f8ff; font: 700 11px/1.1 ui-monospace, SFMono-Regular, Consolas, monospace; text-align: center; text-shadow: 0 1px 3px #000, 0 0 5px #000; white-space: nowrap; transform: translate(-50%, -50%); }
.maidenhead-selecting { cursor: crosshair; }

.external-context, .external-low-confidence { display: inline-block; margin: 3px 5px 0 0; padding: 1px 5px; border: 1px solid #b66ee8; border-radius: 3px; color: #dba6ff !important; }

/* ── Cross-theme layout polish ────────────────────────────────────
   Structural rules live here so skins can change materials and color
   without changing alignment, responsive behavior, or readable sizing. */

#tab-settings.active {
    inset: 0;
    border: 0;
}

body.settings-pane-open #side-panel { z-index: 2300; }

.settings-panel {
    width: min(1680px, 100%);
    padding: clamp(12px, 1.5vw, 24px) clamp(12px, 2vw, 30px) 0;
}

.settings-pane-header {
    min-height: 58px;
    margin-bottom: 12px;
}

.settings-toolbar-btn,
.settings-section-reset,
.settings-section-toggle,
.settings-pane-close,
.analytics-action-btn {
    min-height: 34px;
}

.settings-section {
    margin: 0 0 14px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--theme-radius-panel, 10px);
    background: var(--bg-card);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}

.settings-section:last-child { margin-bottom: 24px; }
.settings-section-header { align-items: center; margin-bottom: 14px; }
.settings-section-body { gap: 4px 24px; }
.settings-row { min-height: 36px; margin-bottom: 5px; }
.settings-row label { line-height: 1.35; }

.weather-overlay-card,
.watched-builder,
.rf-port-card,
.prop-event-card,
.space-weather-card,
.external-propagation-card,
.weather-mesh-card,
.analytics-section.active {
    height: fit-content;
}

.filter-bar > label,
.filter-bar > input,
.filter-bar > button,
.filter-bar > .filter-count {
    min-height: 30px;
}

.filter-bar > label { flex: 1 1 132px; }
.filter-bar select { min-height: 30px; min-width: 0; }
.filter-bar .station-call-filter { flex: 1 1 150px; }
.filter-count { display: inline-flex; align-items: center; justify-content: flex-end; }

.analytics-header { flex-wrap: wrap; }
.analytics-header h3 { flex: 1 1 220px; }

.help-modal {
    width: min(880px, calc(100vw - 32px));
    max-width: 880px;
    max-height: min(90vh, 920px);
}

.help-body {
    padding: clamp(16px, 2vw, 26px);
    scrollbar-gutter: stable;
}

.help-section {
    max-width: 76ch;
    margin: 0 auto 24px;
}

.help-section h3 { margin-top: 4px; padding-bottom: 7px; }
.help-table { display: block; overflow-x: auto; scrollbar-width: thin; }

@media (max-width: 1000px) {
    .settings-workspace { grid-template-columns: 210px minmax(0, 1fr); }
    .settings-category-content { padding-inline: 16px; }
    .settings-section { padding: 14px; }
}

@media (max-width: 900px) {
    #main-content { flex-direction: column; }
    #map-panel { flex: 1 1 55%; width: 100%; min-height: 220px; }
    #side-panel {
        flex: 1 1 45%;
        width: 100%;
        min-width: 0;
        height: auto;
        min-height: 220px;
        border-left: 0;
        border-top: 1px solid var(--border);
        box-shadow: 0 -10px 24px var(--shadow-color);
    }
    #side-panel.collapsed { width: 100%; min-width: 0; height: 0; min-height: 0; border-top: 0; }
    #sidebar-toggle { top: auto; right: 12px; bottom: 0; transform: none rotate(90deg); }
    .tab-bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .tab-btn { min-height: 34px; }
    #tab-settings.active { inset: 0; }
}

@media (max-width: 768px) {
    .settings-panel { padding: 10px 12px 0; }
    .settings-workspace { grid-template-columns: minmax(0, 1fr); }
    .settings-pane-header { align-items: flex-start; }
    .settings-pane-header-actions { gap: 6px; }
    .settings-pane-header-actions .btn-small { padding-inline: 8px; }
    .settings-toolbar { grid-template-columns: 1fr; }
    .settings-toolbar-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .settings-toolbar-btn { padding-inline: 6px; }
    .settings-category-content { padding: 0 0 24px; border-right: 0; }
    .settings-category-header { align-items: flex-start; flex-direction: column; padding: 14px 2px 12px; }
    .settings-section { padding: 13px 12px; }
    .settings-section-header { align-items: flex-start; }
    .settings-section-header-actions { flex-wrap: wrap; justify-content: flex-end; }
    .visualization-settings-grid,
    .weather-alert-groups-grid { grid-template-columns: 1fr; }
    .help-modal { width: calc(100vw - 12px); max-height: calc(100vh - 12px); }
}

@media (max-width: 520px) {
    .settings-pane-header h2 { font-size: 18px; }
    .settings-pane-header p { font-size: 11px; }
    .settings-toolbar-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .settings-panel > .settings-actions { margin-inline: -12px; padding-inline: 12px; }
    .settings-panel > .settings-actions .btn-save-settings { width: 100%; min-width: 0; }
    .settings-panel > .settings-actions .settings-note { display: none; }
    .settings-section-header { flex-direction: column; }
    .settings-section-header-actions { width: 100%; justify-content: flex-start; }
    .help-body { padding: 14px; }
    .help-section p,
    .help-section li,
    .help-table td { font-size: 12px; }
}