/* BNV Flight Radar — Premium UI layer (v1) */

:root {
    --bnv-bg: #070d18;
    --bnv-bg-elevated: #0c1524;
    --bnv-panel: rgba(10, 18, 32, 0.88);
    --bnv-panel-hover: rgba(16, 28, 48, 0.92);
    --bnv-glass: rgba(10, 18, 32, 0.82);
    --bnv-border: rgba(255, 255, 255, 0.08);
    --bnv-border-strong: rgba(255, 255, 255, 0.14);
    --bnv-primary: #1a6fe8;
    --bnv-primary-dim: rgba(26, 111, 232, 0.18);
    --bnv-text: rgba(255, 255, 255, 0.94);
    --bnv-text-secondary: rgba(255, 255, 255, 0.72);
    --bnv-muted: rgba(255, 255, 255, 0.48);
    --bnv-success: #22c55e;
    --bnv-warning: #f59e0b;
    --bnv-danger: #ef4444;
    --bnv-accent: #f5c518;
    --bnv-radius: 10px;
    --bnv-radius-lg: 14px;
    --bnv-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
    --bnv-blur: blur(14px);
    --bnv-topbar-h: 52px;
    --bnv-statusbar-h: 28px;
    --bnv-transition: 0.22s ease-out;
    --bnr-topbar-h: var(--bnv-topbar-h);
    --bnr-yellow: var(--bnv-accent);
    --bnr-blue: var(--bnv-primary);
    --bnr-above-toolbar: calc(var(--bnr-toolbar-h) + var(--bnv-statusbar-h) + var(--bnr-safe-b) + 10px);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

html.bn-radar-root,
html.bn-radar-root body.bn-radar {
    background: var(--bnv-bg);
}

/* ─── Top navigation ─── */
.bnv-topbar {
    position: absolute;
    top: max(8px, var(--bnr-safe-t));
    left: 12px;
    right: 12px;
    z-index: 45;
    pointer-events: none;
}

.bnv-topbar__inner {
    display: grid;
    grid-template-columns: 1fr minmax(0, 560px) 1fr;
    align-items: center;
    gap: 10px 16px;
    min-height: var(--bnv-topbar-h);
    padding: 6px 10px;
    border-radius: var(--bnv-radius-lg);
    background: var(--bnv-glass);
    backdrop-filter: var(--bnv-blur);
    -webkit-backdrop-filter: var(--bnv-blur);
    border: 1px solid var(--bnv-border);
    box-shadow: var(--bnv-shadow);
    pointer-events: auto;
}

.bnv-topbar__left,
.bnv-topbar__right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    min-width: 0;
}

.bnv-topbar__left { justify-self: start; }

.bnv-topbar__center {
    display: flex;
    justify-content: center;
    justify-self: center;
    min-width: 0;
    width: 100%;
    max-width: none;
    margin: 0;
}

.bnv-topbar__right {
    justify-content: flex-end;
    justify-self: end;
}

.bnv-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    min-width: 0;
}

.bnv-brand__logo {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    object-fit: cover;
}

.bnv-brand__text {
    display: none;
    flex-direction: column;
    line-height: 1.15;
}

.bnv-brand__title {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--bnv-text);
}

.bnv-brand__sub {
    font-size: 10px;
    font-weight: 500;
    color: var(--bnv-muted);
}

.bnv-topbar__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border: 1px solid var(--bnv-border);
    border-radius: var(--bnv-radius);
    background: rgba(255, 255, 255, 0.04);
    color: var(--bnv-text-secondary);
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--bnv-transition), color var(--bnv-transition), border-color var(--bnv-transition);
}

.bnv-topbar__icon:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--bnv-text);
    border-color: var(--bnv-border-strong);
}

.bnv-topbar__icon--install {
    color: var(--bnv-accent);
    border-color: rgba(245, 197, 24, 0.25);
    background: rgba(245, 197, 24, 0.08);
}

.bnv-search-trigger {
    width: 100%;
    max-width: 520px;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--bnv-border);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.32);
    color: var(--bnv-muted);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: border-color var(--bnv-transition), background var(--bnv-transition), box-shadow var(--bnv-transition);
}

.bnv-search-trigger:hover {
    border-color: var(--bnv-primary);
    background: rgba(0, 0, 0, 0.42);
    color: var(--bnv-text-secondary);
    box-shadow: 0 0 0 1px rgba(26, 111, 232, 0.25);
}

.bnv-search-trigger i { font-size: 13px; flex-shrink: 0; }
.bnv-search-trigger span {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bnv-kbd {
    display: none;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--bnv-border);
    font-size: 10px;
    font-family: inherit;
    color: var(--bnv-muted);
}

/* Live indicator */
.bnv-live {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 4px 12px;
    flex-shrink: 0;
}

.bnv-live__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--bnv-success);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5);
    animation: bnv-live-pulse 2s ease-out infinite;
}

.bnv-live.is-offline .bnv-live__dot {
    background: var(--bnv-danger);
    animation: none;
}

.bnv-live.is-delayed .bnv-live__dot {
    background: var(--bnv-warning);
}

@keyframes bnv-live-pulse {
    0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
    70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.bnv-live__text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.bnv-live__label {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--bnv-success);
}

.bnv-live.is-offline .bnv-live__label { color: var(--bnv-danger); }
.bnv-live.is-delayed .bnv-live__label { color: var(--bnv-warning); }

.bnv-live__sub {
    font-size: 11px;
    color: var(--bnv-muted);
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bnv-clock {
    display: none;
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--bnv-text-secondary);
    letter-spacing: 0.03em;
    flex-shrink: 0;
    padding: 4px 0;
}

/* Hide legacy topbar pieces */
.bn-radar-topbar__row,
.bn-radar-topbar__search,
.bn-radar-topbar__icon { display: none !important; }

/* ─── Map controls ─── */
.bnv-mapctl {
    position: fixed;
    left: auto !important;
    right: max(12px, var(--bnr-safe-r, 0px)) !important;
    bottom: calc(var(--bnr-above-toolbar) + 8px);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: visible;
    pointer-events: none;
}

.bnv-mapctl__group {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    border-radius: var(--bnv-radius-lg);
    background: var(--bnv-glass);
    backdrop-filter: var(--bnv-blur);
    -webkit-backdrop-filter: var(--bnv-blur);
    border: 1px solid var(--bnv-border);
    box-shadow: var(--bnv-shadow);
    overflow: hidden;
    pointer-events: auto;
}

.bnv-mapctl__btn {
    width: 46px;
    height: 46px;
    border: 0;
    background: transparent;
    color: var(--bnv-text-secondary);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--bnv-transition), color var(--bnv-transition);
}

.bnv-mapctl__btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--bnv-text);
}

.bnv-mapctl__btn:active { background: rgba(255, 255, 255, 0.12); }

.bnv-mapctl__btn.is-active {
    background: var(--bnv-primary-dim);
    color: var(--bnv-primary);
}

.bnv-mapctl__divider {
    height: 1px;
    background: var(--bnv-border);
    margin: 0 8px;
}

.bn-radar-mapctl--locate { display: none !important; }

.bn-radar .leaflet-control-zoom { display: none !important; }

/* ─── Bottom status bar ─── */
.bnv-statusbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 48;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: var(--bnv-statusbar-h);
    padding: 4px 14px calc(4px + var(--bnr-safe-b));
    background: rgba(7, 13, 24, 0.92);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--bnv-border);
    font-size: 10px;
    font-weight: 600;
    color: var(--bnv-muted);
    pointer-events: none;
}

.bnv-statusbar__left,
.bnv-statusbar__center,
.bnv-statusbar__right {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.bnv-statusbar__center {
    flex: 1;
    justify-content: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bnv-statusbar__live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--bnv-success);
    animation: bnv-live-pulse 2s ease-out infinite;
}

.bnv-statusbar.is-offline .bnv-statusbar__live-dot {
    background: var(--bnv-danger);
    animation: none;
}

.bnv-statusbar__live-label {
    color: var(--bnv-success);
    font-weight: 800;
    letter-spacing: 0.05em;
    font-size: 9px;
}

.bnv-statusbar__count {
    color: var(--bnv-text-secondary);
}

.bnv-statusbar__count strong {
    color: var(--bnv-text);
    font-weight: 700;
}

/* Adjust toolbar above status bar */
.bnv-dock.bn-radar-toolbar {
    bottom: calc(var(--bnv-statusbar-h) + var(--bnr-safe-b) + 6px);
    background: var(--bnv-glass);
    border: 1px solid var(--bnv-border);
    border-radius: var(--bnv-radius-lg);
}

.bnv-dock.bn-radar-toolbar button {
    color: var(--bnv-muted);
    font-size: 9px;
}

.bnv-dock.bn-radar-toolbar button.is-active {
    color: var(--bnv-accent);
    background: rgba(245, 197, 24, 0.12);
}

.bnv-dock.bn-radar-toolbar button i { font-size: 17px; }

/* ─── Aircraft icons ─── */
.bn-radar-plane .bn-radar-plane-body {
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
    transition: transform 0.15s ease-out;
}

.bn-radar-plane.is-group-event svg {
    fill: #22d3ee !important;
    filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.85));
}

.bn-radar-plane.is-group-event .bn-radar-plane-tag span {
    background: rgba(8, 47, 73, 0.92);
    color: #a5f3fc;
    border-color: rgba(34, 211, 238, 0.55);
}

.bnv-group-banner {
    position: absolute;
    left: 50%;
    top: calc(100% + 8px);
    transform: translateX(-50%);
    z-index: 25;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
    justify-content: center;
    max-width: min(92vw, 520px);
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(8, 24, 42, 0.88);
    border: 1px solid rgba(34, 211, 238, 0.45);
    color: #e0f2fe;
    font-size: 12px;
    backdrop-filter: blur(10px);
    pointer-events: none;
}

.bnv-group-banner strong {
    font-weight: 700;
    color: #67e8f9;
}

.bnv-group-banner em {
    font-style: normal;
    opacity: 0.75;
    font-size: 11px;
}

.bnv-topbar {
    position: relative;
}
.bn-radar-plane.is-vatsim svg { fill: var(--bnr-yellow, #f5c518); }
.bn-radar-plane.is-squawk-emergency svg,
.bn-radar-plane.is-squawk-hijack svg { fill: #ef4444 !important; }
.bn-radar-plane.is-squawk-lostcomm svg { fill: #f97316 !important; }
.bn-radar-plane.is-phase-ground:not([class*="is-squawk-"]) svg { fill: #94a3b8; }
.bn-radar-plane.is-phase-taxi:not([class*="is-squawk-"]) svg { fill: #a78bfa; }
.bn-radar-plane.is-phase-climb:not([class*="is-squawk-"]) svg { fill: #38bdf8; }
.bn-radar-plane.is-phase-cruise:not([class*="is-squawk-"]) svg { fill: #1a6fe8; }
.bn-radar-plane.is-phase-descent:not([class*="is-squawk-"]) svg { fill: #f59e0b; }
.bn-radar-plane.is-phase-approach:not([class*="is-squawk-"]) svg { fill: #10b981; }
.bn-radar-plane.is-selected.is-squawk-emergency svg,
.bn-radar-plane.is-selected.is-squawk-hijack svg { fill: #ff2d2d !important; }
.bn-radar-plane.is-smartcars svg { fill: #f97316; }
.bn-radar-plane.is-selected .bn-radar-plane-body {
    filter: drop-shadow(0 0 8px rgba(255, 140, 0, 0.65)) drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

.bn-radar-plane.is-selected svg { fill: #ff8c00; }

/* ─── Flight panel (premium dark) ─── */
.bn-radar-sheet {
    background: var(--bnv-bg-elevated);
    border: 1px solid var(--bnv-border);
    border-bottom: 0;
    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.55);
    color: var(--bnv-text);
}

.bn-radar-sheet__handle span {
    background: rgba(255, 255, 255, 0.2);
}

.bnv-flight {
    padding: 0 0 16px;
}

.bnv-flight__toolbar {
    display: flex;
    gap: 6px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--bnv-border);
    background: rgba(0, 0, 0, 0.2);
}

.bnv-flight__toolbar button {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 4px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--bnv-muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: background var(--bnv-transition), color var(--bnv-transition), border-color var(--bnv-transition);
}

.bnv-flight__toolbar button i { font-size: 14px; color: var(--bnv-primary); }
.bnv-flight__toolbar button:hover { background: rgba(255,255,255,0.06); color: var(--bnv-text-secondary); }
.bnv-flight__toolbar button.is-active {
    background: var(--bnv-primary-dim);
    border-color: rgba(26, 111, 232, 0.35);
    color: var(--bnv-text);
}

.bnv-flight__header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 16px 12px;
}

.bnv-flight__header-main { flex: 1; min-width: 0; }

.bnv-flight__callsign {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--bnv-text);
    line-height: 1.1;
}

.bnv-flight__operator {
    margin: 0 0 6px;
    font-size: 13px;
    color: var(--bnv-text-secondary);
}

.bnv-flight__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.bnv-flight__badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.bnv-flight__badge--live {
    background: rgba(34, 197, 94, 0.15);
    color: var(--bnv-success);
}

.bnv-flight__badge--live::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
}

.bnv-flight__badge--ac {
    background: rgba(26, 111, 232, 0.15);
    color: #93c5fd;
}

.bnv-flight__badge--cs {
    background: rgba(255, 255, 255, 0.08);
    color: var(--bnv-text-secondary);
}

.bnv-flight__close {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border: 1px solid var(--bnv-border);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--bnv-muted);
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
    transition: background var(--bnv-transition), color var(--bnv-transition);
}

.bnv-flight__close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--bnv-text);
}

.bnv-flight__route {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
    align-items: center;
    padding: 0 16px 14px;
}

.bnv-flight__ap { min-width: 0; }
.bnv-flight__ap--dest { text-align: right; }

.bnv-flight__icao {
    font-size: 20px;
    font-weight: 800;
    color: var(--bnv-text);
    letter-spacing: 0.02em;
}

.bnv-flight__city {
    font-size: 12px;
    color: var(--bnv-muted);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bnv-flight__route-arrow {
    color: var(--bnv-accent);
    font-size: 16px;
    opacity: 0.9;
}

.bnv-flight__status {
    margin: 0 16px 12px;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.2);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--bnv-success);
    text-align: center;
}

.bnv-flight__progress {
    padding: 0 16px 16px;
}

.bnv-flight__progress-bar {
    position: relative;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    overflow: visible;
}

.bnv-flight__progress-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--bnv-primary), var(--bnv-accent));
    transition: width 0.4s ease-out;
}

.bnv-flight__progress-plane {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    color: var(--bnv-accent);
    font-size: 12px;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6));
}

.bnv-flight__progress-meta {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 10px;
    color: var(--bnv-muted);
}

.bnv-flight__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    margin: 0 16px 16px;
    border-radius: var(--bnv-radius);
    overflow: hidden;
    border: 1px solid var(--bnv-border);
    background: var(--bnv-border);
}

.bnv-flight__stat {
    padding: 12px 8px;
    background: rgba(0, 0, 0, 0.25);
    text-align: center;
}

.bnv-flight__stat-label {
    display: block;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--bnv-muted);
    margin-bottom: 4px;
}

.bnv-flight__stat-value {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--bnv-text);
    font-variant-numeric: tabular-nums;
}

.bnv-flight__section {
    margin: 0 16px 12px;
    border: 1px solid var(--bnv-border);
    border-radius: var(--bnv-radius);
    overflow: hidden;
    background: rgba(0, 0, 0, 0.18);
}

.bnv-flight__section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 14px;
    border: 0;
    background: transparent;
    color: var(--bnv-text-secondary);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    text-align: left;
}

.bnv-flight__section-head i:first-child {
    margin-right: 8px;
    color: var(--bnv-primary);
    width: 16px;
}

.bnv-flight__section-head .bnv-flight__chev {
    margin-left: auto;
    font-size: 10px;
    color: var(--bnv-muted);
    transition: transform var(--bnv-transition);
}

.bnv-flight__section.is-open .bnv-flight__chev { transform: rotate(180deg); }

.bnv-flight__section-body {
    display: none;
    padding: 0 14px 14px;
    border-top: 1px solid var(--bnv-border);
}

.bnv-flight__section.is-open .bnv-flight__section-body { display: block; }

.bnv-flight__kv {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
    padding-top: 12px;
}

.bnv-flight__kv-item span:first-child {
    display: block;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--bnv-muted);
    margin-bottom: 2px;
}

.bnv-flight__kv-item span:last-child {
    font-size: 13px;
    font-weight: 600;
    color: var(--bnv-text);
    font-variant-numeric: tabular-nums;
}

.bnv-flight__chart {
    padding: 8px 0 4px;
}

.bnv-flight__chart canvas {
    width: 100% !important;
    border-radius: 6px;
}

/* Legacy flight classes inside premium sheet */
.bn-radar-sheet .bn-radar-flight-head,
.bn-radar-sheet .bn-radar-flight-actions,
.bn-radar-sheet .bn-radar-route,
.bn-radar-sheet .bn-radar-stats,
.bn-radar-sheet .bn-radar-progress,
.bn-radar-sheet .bn-radar-acc {
    display: none;
}

/* ─── Search overlay (dark) ─── */
.bn-radar-search {
    background: var(--bnv-bg);
}

.bn-radar-search__head {
    background: var(--bnv-bg-elevated);
    border-bottom: 1px solid var(--bnv-border);
}

.bn-radar-search__input-wrap {
    margin: 12px 16px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--bnv-border);
    border-radius: var(--bnv-radius);
    box-shadow: none;
}

.bn-radar-search__input-wrap input {
    color: var(--bnv-text);
    font-size: 15px;
}

.bn-radar-search__input-wrap i { color: var(--bnv-muted); }

.bn-radar-search__results,
.bn-radar-search__history {
    background: var(--bnv-bg);
}

.bn-radar-search__section-head {
    background: rgba(255, 255, 255, 0.04);
    color: var(--bnv-muted);
}

.bn-fr24-flight {
    background: var(--bnv-bg-elevated) !important;
    border-bottom: 1px solid var(--bnv-border) !important;
}

.bn-fr24-flight__top strong { color: var(--bnv-text) !important; }
.bn-fr24-flight__route { color: var(--bnv-muted) !important; }
.bn-fr24-flight__code { background: rgba(255,255,255,0.08) !important; color: var(--bnv-text-secondary) !important; }

.bn-fr24-airport {
    background: var(--bnv-bg-elevated) !important;
    border-bottom: 1px solid var(--bnv-border) !important;
    color: var(--bnv-text) !important;
}

/* ─── FR24 panels (dark drawer) ─── */
.bn-radar-fr24__sheet {
    background: var(--bnv-bg-elevated) !important;
    color: var(--bnv-text);
    border: 1px solid var(--bnv-border);
}

.bn-radar-fr24__head {
    background: transparent !important;
    border-bottom: 1px solid var(--bnv-border);
    color: var(--bnv-text) !important;
}

.bn-radar-fr24__head h2 {
    color: var(--bnv-text) !important;
    font-size: 15px !important;
}

.bn-radar-fr24__close {
    color: var(--bnv-muted) !important;
}

.bn-radar-fr24__tabs {
    background: rgba(0, 0, 0, 0.2) !important;
    border-bottom: 1px solid var(--bnv-border);
}

.bn-radar-fr24__tabs button {
    color: var(--bnv-muted) !important;
}

.bn-radar-fr24__tabs button.is-active {
    color: var(--bnv-accent) !important;
    border-bottom-color: var(--bnv-accent) !important;
}

.bn-radar-fr24__body {
    background: var(--bnv-bg-elevated) !important;
}

.bn-radar-mapcard,
.bn-radar-wx-card,
.bn-radar-widgetcard {
    background: rgba(0, 0, 0, 0.2) !important;
    border-bottom-color: var(--bnv-border) !important;
}

.bn-radar-mapcard__label,
.bn-radar-wx-card__label {
    color: var(--bnv-muted) !important;
}

.bn-radar-mapcard__desc,
.bn-radar-wx-card__desc {
    color: var(--bnv-text-secondary) !important;
}

.bn-radar-fr24-row {
    border-bottom-color: var(--bnv-border) !important;
    color: var(--bnv-text) !important;
}

.bn-radar-fr24-row span { color: var(--bnv-text-secondary) !important; }

.bn-radar-unit-label,
.bn-radar-fr24-section,
.bn-radar-fr24-hint {
    color: var(--bnv-muted) !important;
}

.bn-radar-seg,
.bn-radar-wx-seg,
.bn-radar-grid4 {
    background: rgba(255, 255, 255, 0.06) !important;
}

.bn-radar-seg button,
.bn-radar-wx-seg button,
.bn-radar-grid4 button {
    color: var(--bnv-text-secondary) !important;
}

.bn-radar-seg button.is-active,
.bn-radar-wx-seg button.is-active,
.bn-radar-grid4 button.is-active {
    background: var(--bnv-accent) !important;
    color: #111 !important;
}

.bn-radar-cat-btn {
    background: rgba(0, 0, 0, 0.25) !important;
    border-color: var(--bnv-border) !important;
    color: var(--bnv-text) !important;
}

/* ─── Install modal ─── */
.bn-radar-install-modal__card {
    background: var(--bnv-bg-elevated);
    border: 1px solid var(--bnv-border);
    color: var(--bnv-text);
}

.bn-radar-install-modal__lead { color: var(--bnv-muted); }

/* ─── Desktop layout ─── */
@media (min-width: 768px) {
    .bnv-brand__text { display: flex; }
    .bnv-live { display: flex; }
    .bnv-clock { display: block; }
    .bnv-kbd { display: inline; }

    .bnv-topbar {
        left: 16px;
        right: 16px;
        top: max(10px, var(--bnr-safe-t));
    }

    .bnv-topbar__inner {
        max-width: 1400px;
        margin: 0 auto;
        padding: 6px 14px;
        grid-template-columns: 1fr minmax(280px, 560px) 1fr;
    }

    .bnv-search-trigger { max-width: none; }

    .bnv-mapctl {
        right: 16px;
        bottom: calc(var(--bnr-above-toolbar) + 10px);
    }

    .bn-radar .leaflet-control-zoom {
        margin-bottom: calc(var(--bnv-statusbar-h) + var(--bnr-safe-b) + 16px) !important;
    }

    .bnv-dock.bn-radar-toolbar {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: auto;
        min-width: 420px;
        max-width: 560px;
        bottom: calc(var(--bnv-statusbar-h) + var(--bnr-safe-b) + 10px);
    }

    .bn-radar-sheet {
        top: calc(max(8px, var(--bnr-safe-t)) + var(--bnv-topbar-h) + var(--bnv-left-panel-inset-top));
        left: var(--bnv-left-panel-inset-left);
        right: auto;
        bottom: calc(var(--bnv-statusbar-h) + var(--bnr-safe-b) + var(--bnv-left-panel-inset-bottom));
        width: var(--bnv-left-panel-w);
        max-width: var(--bnv-left-panel-max-w);
        max-height: none;
        border-radius: 10px;
        border: 1px solid var(--bnv-border);
        transform: translateX(calc(-110% - var(--bnv-left-panel-inset-left)));
        transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
        box-shadow: 8px 0 32px rgba(0, 0, 0, 0.55);
    }

    .bn-radar-sheet[data-state="peek"],
    .bn-radar-sheet[data-state="full"] {
        transform: translateX(0);
        max-height: none;
        width: var(--bnv-left-panel-w);
        max-width: var(--bnv-left-panel-max-w);
    }

    .bn-radar-sheet[data-state="peek"] {
        width: var(--bnv-left-panel-w);
    }

    .bn-radar-sheet[data-state="full"] {
        width: var(--bnv-left-panel-w);
        max-width: var(--bnv-left-panel-max-w);
    }

    .bn-radar-sheet__handle { display: none; }

    body.bn-radar-flight-open .bn-radar-sheet {
        box-shadow: 8px 0 40px rgba(0, 0, 0, 0.65);
    }

    body.bn-radar-flight-open .bnv-drawers__backdrop {
        opacity: 0;
        pointer-events: none;
    }

    .bn-radar-fr24__sheet:not(.bnv-drawer--wide):not(.bnv-drawer--settings) {
        max-width: var(--bnv-left-panel-max-w);
    }

    .bn-radar-fr24__sheet.bnv-drawer--wide {
        max-width: var(--bnv-left-panel-max-w);
    }

    .bn-radar-fr24__sheet.bnv-drawer--settings {
        max-width: var(--bnv-left-panel-max-w);
    }
}

@media (max-width: 767px) {
    .bnv-statusbar__center { display: none; }

    .bn-radar-sheet {
        bottom: var(--bnv-mobile-stack-h, var(--bnr-above-toolbar));
    }
}