/* fix110b: Radio player styles. Single source of truth. */
:root {
    --rp-strip-h: 44px;
    --rp-bg: #0f1419;
    --rp-bg-2: #1a212a;
    --rp-fg: #e6edf3;
    --rp-fg-dim: #8b949e;
    --rp-accent: #00d4ff;
    --rp-accent-hot: #ff3366;
    --rp-border: #21262d;
    --rp-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
body { padding-top: var(--rp-strip-h); }
body.rp-expanded { overflow: hidden; }
.rp-strip {
    position: fixed; top: 0; left: 0; right: 0;
    height: var(--rp-strip-h);
    background: var(--rp-bg);
    color: var(--rp-fg);
    border-bottom: 1px solid var(--rp-border);
    z-index: 200;
    display: flex; align-items: center;
    padding: 0 12px; gap: 10px;
    font: 500 13px/1 system-ui, -apple-system, sans-serif;
    box-shadow: var(--rp-shadow);
    cursor: pointer;
    user-select: none;
}
.rp-strip:hover { background: var(--rp-bg-2); }
.rp-play-btn {
    width: 28px; height: 28px;
    border: 0; border-radius: 50%;
    background: var(--rp-accent); color: #000;
    font-size: 11px; font-weight: 700;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: transform 0.1s, background 0.2s;
}
.rp-play-btn:active { transform: scale(0.92); }
.rp-play-btn.rp-playing { background: var(--rp-accent-hot); color: #fff; }
.rp-play-btn.rp-loading {
    background: var(--rp-fg-dim); color: #000;
    animation: rp-pulse 1s ease-in-out infinite;
}
@keyframes rp-pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}
.rp-favicon {
    width: 24px; height: 24px;
    border-radius: 4px;
    background: var(--rp-bg-2);
    object-fit: cover;
    flex-shrink: 0;
}
.rp-meta {
    flex: 1; min-width: 0;
    display: flex; align-items: center; gap: 8px;
}
.rp-station-name {
    font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 40%;
}
.rp-now-playing {
    color: var(--rp-fg-dim);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    flex: 1;
    font-size: 12px;
}
.rp-now-playing::before { content: "·"; margin-right: 6px; opacity: 0.5; }
.rp-strip[data-state="idle"] .rp-now-playing::before { content: ""; }
.rp-caret {
    flex-shrink: 0;
    color: var(--rp-fg-dim);
    font-size: 18px; /* FIX109B-MULTISOURCE: bigger tap target */
    padding: 8px 10px;
    transition: transform 0.2s;
}
body.rp-expanded .rp-caret { transform: rotate(180deg); }
/* expanded panel */
.rp-panel {
    position: fixed;
    top: var(--rp-strip-h);
    left: 0; right: 0;
    height: 0;
    background: var(--rp-bg);
    color: var(--rp-fg);
    z-index: 199;
    overflow: hidden;
    transition: height 0.25s ease-out;
    box-shadow: var(--rp-shadow);
    display: flex; flex-direction: column;
}
body.rp-expanded .rp-panel {
    height: calc(100vh - var(--rp-strip-h));
}
@media (min-width: 768px) {
    body.rp-expanded .rp-panel { height: 480px; }
}
.rp-panel-inner {
    padding: 14px; flex: 1; overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.rp-tabs {
    display: flex; gap: 2px;
    border-bottom: 1px solid var(--rp-border);
    margin-bottom: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.rp-tab {
    background: transparent;
    border: 0;
    color: var(--rp-fg-dim);
    padding: 10px 14px;
    font: inherit; font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
}
.rp-tab.rp-active {
    color: var(--rp-fg);
    border-bottom-color: var(--rp-accent);
}
.rp-search {
    width: 100%;
    padding: 10px 12px;
    background: var(--rp-bg-2);
    border: 1px solid var(--rp-border);
    border-radius: 6px;
    color: var(--rp-fg);
    font: inherit;
    margin-bottom: 12px;
}
.rp-search:focus { outline: none; border-color: var(--rp-accent); }
.rp-genres {
    display: flex; gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.rp-genre-pill {
    background: var(--rp-bg-2);
    border: 1px solid var(--rp-border);
    color: var(--rp-fg);
    padding: 6px 12px;
    border-radius: 999px;
    font: inherit; font-size: 12px;
    cursor: pointer;
}
.rp-genre-pill.rp-active {
    background: var(--rp-accent);
    color: #000;
    border-color: var(--rp-accent);
}
.rp-station-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
}
@media (min-width: 600px) {
    .rp-station-list { grid-template-columns: 1fr 1fr; }
}
.rp-station-card {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    background: var(--rp-bg-2);
    border: 1px solid var(--rp-border);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.1s;
    min-width: 0;
}
.rp-station-card:hover { background: #232a35; }
.rp-station-card.rp-current {
    border-color: var(--rp-accent);
    background: #1a2530;
}
.rp-station-card-favicon {
    width: 32px; height: 32px;
    border-radius: 4px;
    background: var(--rp-bg);
    object-fit: cover;
    flex-shrink: 0;
}
.rp-station-card-text { flex: 1; min-width: 0; }
.rp-station-card-name {
    font-weight: 600; font-size: 13px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rp-station-card-tags {
    color: var(--rp-fg-dim); font-size: 11px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rp-fav-btn {
    background: transparent; border: 0;
    color: var(--rp-fg-dim);
    cursor: pointer;
    font-size: 16px;
    padding: 4px 6px;
}
.rp-fav-btn.rp-faved { color: #ffcc00; }
.rp-empty {
    text-align: center;
    color: var(--rp-fg-dim);
    padding: 40px 20px;
    font-size: 13px;
}
.rp-loading-msg { padding: 20px; text-align: center; color: var(--rp-fg-dim); }
.rp-volume-row {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 0;
    border-top: 1px solid var(--rp-border);
}
.rp-volume-icon { color: var(--rp-fg-dim); font-size: 14px; }
.rp-volume-slider {
    flex: 1;
    -webkit-appearance: none; appearance: none;
    height: 4px;
    background: var(--rp-border);
    border-radius: 2px;
    outline: none;
}
.rp-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--rp-accent);
    cursor: pointer;
}
.rp-volume-slider::-moz-range-thumb {
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--rp-accent);
    cursor: pointer; border: 0;
}
/* Mobile-specific narrow tweaks */
@media (max-width: 480px) {
    .rp-station-name { max-width: 50%; }
    .rp-now-playing { font-size: 11px; }
}

/* fix110c: SPA navigation loading indicator */
html.spa-loading body { cursor: progress; }
html.spa-loading main { opacity: 0.6; transition: opacity 0.15s; pointer-events: none; }
html.spa-loading main::before {
    content: '';
    position: fixed;
    top: var(--rp-strip-h, 44px);
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--rp-accent, #00d4ff), transparent);
    background-size: 200% 100%;
    animation: spa-loading-bar 1s linear infinite;
    z-index: 1000;
    pointer-events: none;
}
@keyframes spa-loading-bar {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* FIX108C-AUDIO-AD: free-tier ad slot in radio expanded panel */
.rp-adslot {
    position: relative;
    margin: 12px 16px 16px;
    padding: 28px 12px 14px;
    background: #fff;
    color: #111;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    min-height: 100px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.rp-adslot-label {
    position: absolute;
    top: 8px;
    right: 10px;
    padding: 3px 10px;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 10px;
    font-weight: 600;
    border-radius: 999px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    z-index: 2;
}

/* FIX109B-MULTISOURCE: source switcher styles */
.rp-source-btn {
    flex-shrink: 0;
    background: transparent;
    border: 0;
    color: #ffc043;
    font-size: 18px;
    padding: 8px 10px;
    cursor: pointer;
    line-height: 1;
    transition: transform 0.15s, color 0.2s;
}
.rp-source-btn:hover { color: #ffd166; }
.rp-source-btn:active { transform: scale(0.92); }
body.rp-source-menu-open .rp-source-btn { transform: rotate(180deg); }

.rp-source-menu {
    position: fixed;
    top: var(--rp-strip-h);
    right: 8px;
    background: var(--rp-bg);
    border: 1px solid var(--rp-border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
    z-index: 250;
    min-width: 220px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.rp-source-menu[hidden] { display: none; }
.rp-source-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: transparent;
    border: 0;
    color: var(--rp-fg);
    font: 500 13px/1.2 system-ui, -apple-system, sans-serif;
    cursor: pointer;
    border-radius: 6px;
    text-align: left;
}
.rp-source-item:hover:not([disabled]) { background: var(--rp-bg-2); }
.rp-source-item[disabled] { cursor: not-allowed; opacity: 0.55; }
.rp-source-emoji { font-size: 16px; flex-shrink: 0; }
.rp-source-name { flex: 1; }
.rp-source-check { color: var(--rp-accent); font-weight: 700; }
.rp-source-soon {
    font-size: 10px;
    color: var(--rp-fg-dim);
    background: var(--rp-bg-2);
    padding: 2px 6px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.rp-source-active .rp-source-name { color: var(--rp-accent); font-weight: 600; }

/* fix120-all-tab BEGIN */
.rp-all-wrap { display: flex; flex-direction: column; height: 100%; }
.rp-all-header {
    display: flex; gap: 8px; padding: 8px;
    position: sticky; top: 0;
    background: var(--rp-bg, #fff);
    z-index: 1;
    border-bottom: 1px solid var(--rp-border, #ddd);
}
.rp-all-search {
    flex: 1; min-width: 0;
    padding: 8px 12px;
    border: 1px solid var(--rp-border, #ccc);
    border-radius: 6px;
    background: var(--rp-bg-2, #f7f7f7);
    color: var(--rp-fg, #222);
    font-size: 14px; outline: none;
}
.rp-all-search:focus { border-color: var(--rp-accent, #4a90e2); }
.rp-all-filter-btn {
    flex-shrink: 0;
    padding: 0 12px;
    border: 1px solid var(--rp-border, #ccc);
    border-radius: 6px;
    background: var(--rp-bg-2, #f7f7f7);
    color: var(--rp-fg, #222);
    font-size: 13px; cursor: pointer; white-space: nowrap;
}
.rp-all-filter-btn:hover { background: var(--rp-accent, #4a90e2); color: #fff; }
.rp-all-active-filters {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--rp-border, #eee);
}
.rp-active-filter-chip {
    padding: 3px 8px; border-radius: 12px;
    background: var(--rp-accent, #4a90e2); color: #fff; border: 0;
    font-size: 12px; cursor: pointer;
}
.rp-active-filter-clear {
    padding: 3px 8px; border-radius: 12px;
    background: transparent;
    border: 1px solid var(--rp-border, #ccc);
    color: var(--rp-fg-dim, #888);
    font-size: 12px; cursor: pointer;
}
.rp-all-meta {
    padding: 6px 8px; font-size: 12px;
    color: var(--rp-fg-dim, #888);
    border-bottom: 1px solid var(--rp-border, #eee);
}
.rp-all-list { flex: 1; overflow-y: auto; }

/* Filter modal */
.rp-filter-modal {
    position: fixed; inset: 0; z-index: 9999;
    display: none; align-items: flex-end; justify-content: center;
}
.rp-filter-modal.rp-open { display: flex; }
.rp-filter-backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.5);
}
.rp-filter-panel {
    position: relative;
    background: var(--rp-bg, #fff); color: var(--rp-fg, #222);
    width: 100%; max-width: 500px; max-height: 85vh;
    display: flex; flex-direction: column;
    border-radius: 12px 12px 0 0; overflow: hidden;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.2);
}
.rp-filter-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--rp-border, #eee);
}
.rp-filter-close {
    background: transparent; border: 0;
    font-size: 22px; cursor: pointer;
    color: var(--rp-fg, #222); line-height: 1;
}
.rp-filter-body { flex: 1; overflow-y: auto; padding: 12px 16px; }
.rp-filter-body section { margin-bottom: 16px; }
.rp-filter-body h4 {
    margin: 0 0 8px;
    font-size: 13px; color: var(--rp-fg-dim, #888);
    text-transform: uppercase; letter-spacing: 0.5px;
}
.rp-filter-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rp-filter-chips button {
    padding: 5px 10px; border-radius: 14px;
    border: 1px solid var(--rp-border, #ccc);
    background: transparent;
    color: var(--rp-fg, #222);
    font-size: 12px; cursor: pointer; white-space: nowrap;
}
.rp-filter-chips button.rp-active {
    background: var(--rp-accent, #4a90e2); color: #fff;
    border-color: var(--rp-accent, #4a90e2);
}
.rp-filter-foot {
    display: flex; gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--rp-border, #eee);
}
.rp-filter-foot button {
    flex: 1; padding: 10px;
    border-radius: 8px;
    border: 1px solid var(--rp-border, #ccc);
    background: transparent;
    color: var(--rp-fg, #222);
    font-size: 14px; cursor: pointer;
}
.rp-filter-foot .rp-filter-apply {
    background: var(--rp-accent, #4a90e2); color: #fff;
    border-color: var(--rp-accent, #4a90e2);
}
/* fix120-all-tab END */

/* fix121-sticky-tabs BEGIN */
.rp-tabs {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    position: sticky;
    top: 0;
    background: var(--rp-bg, #181f29);
    z-index: 5;
    border-bottom: 1px solid var(--rp-border, #2a2f3a);
}
.rp-tab {
    flex-shrink: 0;
    white-space: nowrap;
}
.rp-tabs::-webkit-scrollbar { height: 3px; }
.rp-tabs::-webkit-scrollbar-thumb { background: var(--rp-fg-dim, #555); border-radius: 2px; }
/* fix121-sticky-tabs END */


/* __fix151L2: music iframe slot — high specificity to beat cascade conflicts */
body #rpMusicFrame.rp-music-frame {
    position: fixed !important;
    top: var(--rp-strip-h) !important;
    left: 0 !important;
    right: 0 !important;
    height: 80px !important;
    background: #000 !important;
    z-index: 199 !important;
    border-bottom: 1px solid var(--rp-border, #21262d) !important;
    display: flex !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
}
body #rpMusicFrame.rp-music-frame[hidden] {
    display: none !important;
}
body #rpMusicFrame .rp-music-frame-inner {
    flex: 1 !important;
    min-width: 0 !important;
    background: #000 !important;
    overflow: hidden !important;
    height: 80px !important;
}
body #rpMusicFrame .rp-music-frame-inner iframe {
    width: 100% !important;
    height: 80px !important;
    border: 0 !important;
    display: block !important;
}
body #rpMusicFrame .rp-music-close {
    width: 36px !important;
    height: 36px !important;
    margin: auto 8px !important;
    border: 0 !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: #e6edf3 !important;
    font-size: 20px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
}
body #rpMusicFrame .rp-music-close:hover {
    background: rgba(255, 255, 255, 0.18) !important;
}
body.rp-music-playing { padding-top: calc(var(--rp-strip-h) + 60px) !important; } /* __fix151P */
body.rp-music-playing .rp-panel { top: calc(var(--rp-strip-h) + 60px) !important; } /* __fix151P */

/* ============================================================
   __fix152c — Top stack: nav (z=1000) → radio strip (z=950)
                       → music iframe / panels (z=940-945)
   Overrides earlier conflicting rules (.nav-main sticky+fixed
   double-declaration, strip-on-strip top:0 collision).
   ============================================================ */

/* 1. NAV stays at very top, fixed, above everything except modals */
body .nav-main,
body .nav-main.nav-public {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    height: var(--nav-h, 56px) !important;
}

/* 2. RADIO STRIP: directly below nav */
body .rp-strip {
    position: fixed !important;
    top: var(--nav-h, 56px) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 950 !important;
}

/* 3. MUSIC IFRAME: directly below strip when shown */
body #rpMusicFrame.rp-music-frame {
    position: fixed !important;
    top: calc(var(--nav-h, 56px) + var(--rp-strip-h, 44px)) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 940 !important;
    height: 80px !important;
}
body #rpMusicFrame.rp-music-frame[hidden] { display: none !important; }

/* 4. RADIO EXPANDED PANEL: below strip (and below iframe when playing) */
body .rp-panel {
    top: calc(var(--nav-h, 56px) + var(--rp-strip-h, 44px)) !important;
    z-index: 945 !important;
}
body.rp-expanded .rp-panel {
    height: calc(100vh - var(--nav-h, 56px) - var(--rp-strip-h, 44px)) !important;
}
@media (min-width: 768px) {
    body.rp-expanded .rp-panel { height: 480px !important; }
}
body.rp-music-playing .rp-panel {
    top: calc(var(--nav-h, 56px) + var(--rp-strip-h, 44px) + 80px) !important;
}
body.rp-expanded.rp-music-playing .rp-panel {
    height: calc(100vh - var(--nav-h, 56px) - var(--rp-strip-h, 44px) - 80px) !important;
}

/* 5. SOURCE DROPDOWN re-anchored under strip */
body .rp-source-menu {
    top: calc(var(--nav-h, 56px) + var(--rp-strip-h, 44px)) !important;
}

/* 6. PAGE CONTENT padding so nothing hides under the stacked bars */
body .public-main,
body .app-main {
    padding-top: calc(var(--nav-h, 56px) + var(--rp-strip-h, 44px) + 12px) !important;
}
body.rp-music-playing .public-main,
body.rp-music-playing .app-main {
    padding-top: calc(var(--nav-h, 56px) + var(--rp-strip-h, 44px) + 80px + 12px) !important;
}

/* 7. SPA loading bar re-anchored below nav+strip */
html.spa-loading body main::before {
    top: calc(var(--nav-h, 56px) + var(--rp-strip-h, 44px)) !important;
}
/* __fix152c END */

/* ============================================================
   __fix152c2 — Flip stack order:
   RADIO STRIP (top, z=1000) → NAV (z=950) → MUSIC IFRAME (z=940)
   All position:fixed → one solid block locked at viewport top.
   Last-rule-wins overrides the __fix152c values above.
   ============================================================ */

/* 1. Radio strip permanently on top */
body .rp-strip {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
}

/* 2. Nav directly below strip */
body .nav-main,
body .nav-main.nav-public {
    position: fixed !important;
    top: var(--rp-strip-h, 44px) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 950 !important;
    height: var(--nav-h, 56px) !important;
}

/* 3. Music iframe below nav (only when active) */
body #rpMusicFrame.rp-music-frame {
    position: fixed !important;
    top: calc(var(--rp-strip-h, 44px) + var(--nav-h, 56px)) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 940 !important;
    height: 80px !important;
}
body #rpMusicFrame.rp-music-frame[hidden] { display: none !important; }

/* 4. Source dropdown anchored just below strip */
body .rp-source-menu {
    top: var(--rp-strip-h, 44px) !important;
}

/* 5. Expanded radio panel drops from under strip — covers nav (z above nav) */
body .rp-panel {
    top: var(--rp-strip-h, 44px) !important;
    z-index: 975 !important;
}
body.rp-expanded .rp-panel {
    height: calc(100vh - var(--rp-strip-h, 44px)) !important;
}
@media (min-width: 768px) {
    body.rp-expanded .rp-panel { height: 480px !important; }
}

/* 6. Body padding reserves space — same total as fix152c (just reordered) */
body .public-main,
body .app-main {
    padding-top: calc(var(--rp-strip-h, 44px) + var(--nav-h, 56px) + 12px) !important;
}
body.rp-music-playing .public-main,
body.rp-music-playing .app-main {
    padding-top: calc(var(--rp-strip-h, 44px) + var(--nav-h, 56px) + 80px + 12px) !important;
}

/* When music plays, expanded radio panel sits BELOW the iframe too */
body.rp-music-playing .rp-panel {
    top: calc(var(--rp-strip-h, 44px) + var(--nav-h, 56px) + 80px) !important;
}
body.rp-expanded.rp-music-playing .rp-panel {
    height: calc(100vh - var(--rp-strip-h, 44px) - var(--nav-h, 56px) - 80px) !important;
}

/* SPA loading bar re-anchored */
html.spa-loading body main::before {
    top: calc(var(--rp-strip-h, 44px) + var(--nav-h, 56px)) !important;
}
/* __fix152c2 END */

/* ============================================================
   __fix152d — Music slot lives INSIDE expanded panel.
   Kills the old #rpMusicFrame fixed-bar styling.
   ============================================================ */
body #rpMusicSlot.rp-music-slot {
    position: relative;
    background: #000;
    border: 1px solid var(--rp-border, #21262d);
    border-radius: 8px;
    display: flex;
    align-items: stretch;
    flex-shrink: 0;
    margin-bottom: 12px;
    overflow: hidden;
}
body #rpMusicSlot.rp-music-slot[hidden] { display: none !important; }
body #rpMusicSlot .rp-music-slot-inner {
    flex: 1;
    min-width: 0;
    background: #000;
    overflow: hidden;
    min-height: 80px;
}
body #rpMusicSlot .rp-music-slot-inner iframe {
    width: 100% !important;
    border: 0 !important;
    display: block !important;
    min-height: 80px;
}
body #rpMusicSlot .rp-music-close {
    width: 36px;
    height: 36px;
    margin: auto 8px;
    border: 0;
    background: rgba(255, 255, 255, 0.08);
    color: #e6edf3;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    flex-shrink: 0;
}
body #rpMusicSlot .rp-music-close:hover { background: rgba(255, 255, 255, 0.18); }

/* Iframe is no longer a fixed bar — kill old #rpMusicFrame styling */
body #rpMusicFrame.rp-music-frame { display: none !important; }

/* Undo padding-top bump from fix152c2 — iframe no longer needs space below the stack */
body.rp-music-playing { padding-top: 0 !important; }
body.rp-music-playing .public-main,
body.rp-music-playing .app-main {
    padding-top: calc(var(--rp-strip-h, 44px) + var(--nav-h, 56px) + 12px) !important;
}
body.rp-music-playing .rp-panel { top: var(--rp-strip-h, 44px) !important; }
body.rp-expanded.rp-music-playing .rp-panel {
    height: calc(100vh - var(--rp-strip-h, 44px)) !important;
}
body.rp-music-playing .mp-panel { top: var(--rp-strip-h, 44px) !important; }
/* __fix152d END */

/* __fix152e — slot styling inside .mp-panel */
body .mp-panel #rpMusicSlot.rp-music-slot {
    margin: 8px;
    border-radius: 10px;
}
body .mp-panel #rpMusicSlot.rp-music-slot[hidden] { display: none !important; }
/* __fix152e END */

/* __fix152f — clamp iframe slot to 80px */
body #rpMusicSlot.rp-music-slot {
    height: auto !important;
    max-height: 90px !important;
}
body #rpMusicSlot .rp-music-slot-inner {
    height: 80px !important;
    min-height: 80px !important;
}
body #rpMusicSlot .rp-music-slot-inner iframe {
    width: 100% !important;
    height: 80px !important;
    min-height: 0 !important;
    border: 0 !important;
    display: block !important;
}
/* __fix152f END */

/* ============================================================
   __fix152L — Panels sit below strip+nav (not just below strip).
   Last-rule-wins overrides earlier __fix152c2 / __fix152d values.
   ============================================================ */

/* Radio panel — drops from below the nav */
body .rp-panel {
    top: calc(var(--rp-strip-h, 44px) + var(--nav-h, 56px)) !important;
    z-index: 975 !important;
}
body.rp-expanded .rp-panel {
    height: calc(100vh - var(--rp-strip-h, 44px) - var(--nav-h, 56px)) !important;
}
@media (min-width: 768px) {
    body.rp-expanded .rp-panel { height: 480px !important; }
}

/* Source dropdown anchored just below the nav */
body .rp-source-menu {
    top: calc(var(--rp-strip-h, 44px) + var(--nav-h, 56px)) !important;
}

/* SPA loading bar */
html.spa-loading body main::before {
    top: calc(var(--rp-strip-h, 44px) + var(--nav-h, 56px)) !important;
}

/* Music-playing state — iframe is INSIDE panel, no extra space needed.
   Same padding as without music. */
body.rp-music-playing { padding-top: 0 !important; }
body.rp-music-playing .public-main,
body.rp-music-playing .app-main {
    padding-top: calc(var(--rp-strip-h, 44px) + var(--nav-h, 56px) + 12px) !important;
}
body.rp-music-playing .rp-panel {
    top: calc(var(--rp-strip-h, 44px) + var(--nav-h, 56px)) !important;
}
body.rp-expanded.rp-music-playing .rp-panel {
    height: calc(100vh - var(--rp-strip-h, 44px) - var(--nav-h, 56px)) !important;
}
/* __fix152L END */

/* __fix152m — body reserves the FULL stack (strip + nav), not just strip.
   This eliminates the empty band between nav bottom and page content top.
   Strip is fixed top:0, nav fixed top:44px, content begins at 104px. */
body { padding-top: calc(var(--rp-strip-h, 44px) + var(--nav-h, 60px)) !important; }
body.rp-music-playing { padding-top: calc(var(--rp-strip-h, 44px) + var(--nav-h, 60px)) !important; }

/* .public-main and .app-main no longer need their own padding — body handles it.
   Setting to 0 to override the fix152L rule that double-applied padding. */
body .public-main,
body .app-main {
    padding-top: 0 !important;
}
body.rp-music-playing .public-main,
body.rp-music-playing .app-main {
    padding-top: 0 !important;
}
/* __fix152m END */

/* __fix152m — body reserves ONLY the strip (44px). Music player lives
   inside the panel per fix152d/e, so no extra space needed when playing. */
body { padding-top: 44px !important; }
body.rp-music-playing { padding-top: 44px !important; }

/* Override fix152L's double-padding on main elements */
body .public-main,
body .app-main {
    padding-top: 0 !important;
}
body.rp-music-playing .public-main,
body.rp-music-playing .app-main {
    padding-top: 0 !important;
}
/* __fix152m END */

/* __fix67b14 — nuke leftover #rpMusicFrame fixed bar (music lives inside .mp-panel per fix152d).
   Also normalize body padding to ONLY the strip (44px). Nav is inside normal flow.
   Music-panel (.mp-panel) positions itself at top: var(--rp-strip-h) so it sits
   flush under the strip and covers the nav like rp-panel does. */
body #rpMusicFrame,
body #rpMusicFrame.rp-music-frame,
body.rp-music-playing #rpMusicFrame {
    display: none !important;
    height: 0 !important;
    visibility: hidden !important;
}
body { padding-top: var(--rp-strip-h, 44px) !important; }
body.rp-music-playing { padding-top: var(--rp-strip-h, 44px) !important; }
body .public-main,
body .app-main,
body.rp-music-playing .public-main,
body.rp-music-playing .app-main {
    padding-top: 0 !important;
}
/* __fix67b14 END */

/* __fix67b14b — body padding reserves FULL chrome (strip 44 + nav 56 = 100).
   fix67b14 used only 44px which left admin-page content hidden behind nav.
   Music plays inside .mp-panel (fix152d), so no extra space when playing. */
body,
body.rp-music-playing {
    padding-top: calc(var(--rp-strip-h, 44px) + var(--nav-h, 56px)) !important;
}
body .public-main,
body .app-main,
body.rp-music-playing .public-main,
body.rp-music-playing .app-main {
    padding-top: 0 !important;
}
/* __fix67b14b END */

/* __fix67b14c — rp-panel sits flush under radio strip and covers the nav,
   matching .mp-panel behavior from fix67b14. Both panels now open from
   immediately under the strip — symmetric UX. */
body .rp-panel,
body.rp-music-playing .rp-panel {
    top: var(--rp-strip-h, 44px) !important;
    z-index: 975 !important;
}
body.rp-expanded .rp-panel,
body.rp-expanded.rp-music-playing .rp-panel {
    height: calc(100vh - var(--rp-strip-h, 44px)) !important;
}
@media (min-width: 768px) {
    body.rp-expanded .rp-panel,
    body.rp-expanded.rp-music-playing .rp-panel { height: 480px !important; }
}
/* __fix67b14c END */

/* __fix67b14f — pull genre pills (and all rp-panel-inner content) up.
   Default was 14px all around; top reduced so pills sit closer to the tabs. */
body .rp-panel .rp-panel-inner {
    padding-top: 6px !important;
}
body .rp-panel .rp-genres {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
/* __fix67b14f END */

/* __fix67b14g — pull genre tab content up another 2px (was 6px from fix67b14f). */
body .rp-panel .rp-panel-inner { padding-top: 4px !important; }
/* __fix67b14g END */

/* __fix67b14j — Genres tab specifically: zero margin/padding above the pills.
   Override any earlier .rp-genres { margin-top: ... } and any rp-panel-inner
   padding for THIS tab content specifically. */
body .rp-panel .rp-panel-inner > .rp-genres {
    margin: 0 !important;
    padding: 0 !important;
}
body .rp-panel .rp-panel-inner > .rp-genres:first-child {
    margin-top: 0 !important;
}
/* When the genres tab is showing, kill the inner padding entirely on top */
body .rp-panel .rp-panel-inner:has(> .rp-genres) {
    padding-top: 0 !important;
}
/* __fix67b14j END */

/* __fix67b14L — kill the 12px margin-bottom under .rp-tabs.
   That's the actual source of the gap below the tab strip across
   all tab content (not just genres). The earlier fix67b14j rules
   targeted .rp-panel-inner > .rp-genres which doesn't exist — the
   DOM is .rp-panel-inner > .rp-tab-content > .rp-genres. */
body .rp-panel .rp-tabs {
    margin-bottom: 0 !important;
}
body .rp-panel .rp-tab-content {
    margin-top: 0 !important;
    padding-top: 6px !important;  /* small breathing room, replaces the 12 */
}

/* Belt-and-braces: ensure star button is always visible on every card */
body .rp-station-card {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}
body .rp-station-card .rp-fav-btn {
    flex-shrink: 0 !important;
    margin-left: auto !important;
}
/* __fix67b14L END */

/* __fix67b14p — 4px -> 2px, last-rule-wins over fix67b14g (4px) and fix67b14L (6px). */
body .rp-panel .rp-panel-inner { padding-top: 2px !important; }
body .rp-panel .rp-tab-content { padding-top: 2px !important; }
/* __fix67b14p END */

/* __fix67b14q — 2px -> 0px */
body .rp-panel .rp-panel-inner { padding-top: 0 !important; }
body .rp-panel .rp-tab-content { padding-top: 0 !important; }
/* __fix67b14q END */