/* ── Image containment ──────────────────────────────────────────────────── */
.post-content img,
#pagePanelContent img,
.adm-content img,
.page-content img { max-width:100%; height:auto; object-fit:contain; }

/* ── App shell ──────────────────────────────────────────────────────────── */
.app {
    position:relative; z-index:1; height:100dvh;
    display:flex; flex-direction:column;
    padding-top:env(safe-area-inset-top,0px);
    padding-bottom:env(safe-area-inset-bottom,0px);
}

/* ── Preset Bar ─────────────────────────────────────────────────────────── */
.preset-bar {
    display:flex; height:52px;
    background:rgba(0,0,0,0.7);
    border-bottom:1px solid var(--border);
    align-items:stretch; padding:0;
    overflow-x:auto; scrollbar-width:none; z-index:1;
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.preset-bar::-webkit-scrollbar { display:none; }
.preset-slot {
    min-width:100px; height:100%;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:0 12px; border-right:1px solid var(--border);
    cursor:pointer; user-select:none; -webkit-user-select:none;
    position:relative; overflow:hidden; gap:1px; flex-shrink:0; touch-action:none;
    transition:background .15s;
}
.preset-slot:hover { background:rgba(0,200,255,0.06); }
.preset-slot-num  { font-size:.58rem; font-weight:700; letter-spacing:1.5px; color:var(--accent); }
.preset-slot-name { font-size:.84rem; color:#fff; font-weight:600; white-space:nowrap; max-width:88px; overflow:hidden; text-overflow:ellipsis; }
.preset-slot-song { font-size:.68rem; color:var(--subtext); white-space:nowrap; max-width:88px; overflow:hidden; text-overflow:ellipsis; }
.preset-slot.empty .preset-slot-name { color:rgba(255,255,255,0.2); font-style:italic; font-weight:400; }
.preset-slot.active { background:var(--accent-dim); }
.preset-slot.active::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:var(--accent); }
.slot-fill { position:absolute; bottom:0; left:0; width:100%; height:2px; background:var(--accent); transform:scaleX(0); transform-origin:left; }
.preset-slot.holding .slot-fill { transform:scaleX(1); transition:transform .7s linear; }

/* ── Main container ─────────────────────────────────────────────────────── */
.main-container { flex:1; display:flex; position:relative; z-index:1; overflow:hidden; }

/* ── Sidebar ────────────────────────────────────────────────────────────── */
.sidebar {
    width:var(--sidebar-w); border-right:1px solid var(--border);
    display:flex; flex-direction:column;
    padding:16px 0 12px; gap:4px; align-items:center;
    background:rgba(0,0,0,0.35); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    flex-shrink:0;
}
.side-btn {
    color:var(--subtext); text-decoration:none;
    font-size:.58rem; font-weight:600; letter-spacing:.5px; text-transform:uppercase;
    opacity:.85; cursor:pointer; text-align:center;
    width:56px; padding:10px 4px; border-radius:12px;
    transition:color .15s, background .15s, opacity .15s;
}
.side-btn:hover { color:var(--text); opacity:1; background:var(--surface-2); }
.side-btn i { display:block; font-size:1.2rem; margin-bottom:5px; color:var(--subtext); transition:color .15s; }
.side-btn:hover i { color:var(--accent); }

/* ── Player View ────────────────────────────────────────────────────────── */
.player-view {
    flex:1; padding:32px 28px 100px;
    display:grid; grid-template-columns:1fr 240px 140px;
    gap:18px; position:relative; overflow:hidden;
}

/* Blurred art background */
.player-art-bg {
    position:absolute; inset:-40px;
    background-size:cover; background-position:center;
    filter:blur(60px) brightness(0.18) saturate(1.8);
    transform:scale(1.1); z-index:0;
    transition:background-image 1.2s ease; pointer-events:none;
}
.player-view > *:not(.player-art-bg):not(.transport) { position:relative; z-index:1; }
.transport { z-index:50; }

/* Track info card */
.track-info {
    display:flex; flex-direction:column; justify-content:flex-start;
    background:rgba(255,255,255,0.025);
    backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    border:1px solid var(--border); border-radius:20px; padding:22px;
    min-width:0;
}
.ch-num {
    color:var(--accent); font-size:1rem; margin-bottom:16px;
    display:flex; align-items:center; gap:8px; opacity:.8;
}
.song-title {
    font-size:1.9rem; font-weight:700; margin-bottom:6px;
    display:flex; align-items:flex-start; gap:10px; line-height:1.2;
}
.artist-name { font-size:1.25rem; color:var(--subtext); margin-bottom:6px; font-weight:400; }
.track-update { animation:trackFadeSlide .38s cubic-bezier(.2,0,.3,1); }

/* Album art */
.album-art-wrap { text-align:right; position:relative; }
.album-art {
    width:200px; height:200px; border-radius:16px;
    object-fit:contain; border:1px solid var(--border);
    box-shadow:0 24px 64px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.03);
    background:rgba(0,0,0,.5);
}
.station-logo-overlay {
    width:48px; height:48px; position:absolute; bottom:-6px; right:-6px;
    background:rgba(0,0,0,.75); padding:4px; border:1px solid var(--border);
    border-radius:10px; object-fit:contain; backdrop-filter:blur(8px);
}

/* Right actions */
.right-actions { display:flex; flex-direction:column; gap:6px; }
.action-btn {
    background:var(--surface); border:1px solid var(--border); color:rgba(255,255,255,.75);
    padding:10px 12px; border-radius:10px; text-align:center;
    font-size:.8rem; cursor:pointer;
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    transition:background .14s, border-color .14s, color .14s, transform .1s;
    letter-spacing:.2px; white-space:nowrap;
}
.action-btn:hover  { background:var(--surface-2); border-color:rgba(0,200,255,.3); color:#fff; }
.action-btn:active { transform:scale(0.96); }

/* Transport */
.transport {
    position:absolute; bottom:32px; left:50%; transform:translateX(-50%);
    display:flex; gap:10px; align-items:center;
    background:rgba(6,10,18,0.65); backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
    border:1px solid var(--border-2); border-radius:60px; padding:10px 18px;
    box-shadow:0 8px 32px rgba(0,0,0,.55);
}
.trans-btn {
    width:58px; height:58px; border-radius:50%;
    border:1px solid var(--border); background:var(--surface);
    color:#fff; display:flex; align-items:center; justify-content:center;
    font-size:1.25rem; cursor:pointer;
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    transition:background .14s, border-color .14s, transform .1s, box-shadow .14s;
}
.trans-btn:hover  { background:var(--surface-2); border-color:rgba(0,200,255,.45); box-shadow:0 0 18px rgba(0,200,255,.12); }
.trans-btn:active { transform:scale(0.9); }
.trans-btn.large  {
    width:70px; height:70px; font-size:1.7rem;
    background:rgba(0,150,220,0.3); border-color:rgba(0,200,255,.55);
    box-shadow:0 0 22px rgba(0,200,255,.12);
}
.trans-btn.large:hover { background:rgba(0,150,220,0.55); box-shadow:0 0 36px rgba(0,200,255,.22); }
.trans-btn.channel { border-radius:40px; width:90px; font-size:.88rem; font-weight:700; letter-spacing:.3px; }

/* Volume HUD */
#volHud {
    position:absolute; top:16%; left:50%; transform:translateX(-50%);
    background:rgba(4,10,20,.92); border:1px solid var(--border-2); padding:12px 26px;
    border-radius:50px; display:flex; align-items:center; gap:16px;
    opacity:0; transition:opacity .25s; pointer-events:none; z-index:2000;
    backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
}
#volHud.visible { opacity:1; pointer-events:auto; }
.vol-bar-bg  { width:220px; height:6px; background:rgba(255,255,255,.12); border-radius:3px; overflow:hidden; position:relative; }
.vol-bar-fill{ height:100%; background:var(--accent); width:50%; transition:width .1s; border-radius:3px; }
.vol-text    { font-weight:700; font-size:1.1rem; min-width:40px; color:var(--accent); }

/* Progress bar */
#progressWrap { width:100%; height:4px; background:rgba(255,255,255,.08); border-radius:3px; overflow:hidden; margin-top:12px; }
#progressFill { height:100%; width:0%; background:linear-gradient(90deg,rgba(0,120,200,.7),var(--accent)); transition:width .25s linear; border-radius:3px; }

/* Vote + Share */
.vote-btn {
    background:var(--surface); border:1px solid var(--border); color:rgba(255,255,255,.65);
    padding:7px 14px; border-radius:20px; cursor:pointer;
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    transition:background .14s, border-color .14s, color .14s; font-size:.85rem;
}
.vote-btn:hover { background:var(--accent-dim); border-color:rgba(0,200,255,.4); color:#fff; }
.star-btn { cursor:pointer; font-size:1.3rem; color:rgba(255,255,255,.22); transition:color .2s; }
.star-btn.active { color:#ffd700; }

/* ── Browse View ────────────────────────────────────────────────────────── */
#browseView {
    display:none; position:absolute; inset:0;
    background:#060c15; z-index:10;
    padding:20px; overflow-y:auto; -webkit-overflow-scrolling:touch;
    animation:viewSlideUp .24s cubic-bezier(.25,0,.2,1);
}
.browse-header {
    display:flex; justify-content:space-between; align-items:center;
    border-bottom:1px solid var(--border); margin-bottom:18px;
    padding:8px 2px; font-size:1rem; font-weight:700; letter-spacing:.5px;
}
.station-grid {
    display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr));
    gap:10px; padding-bottom:140px;
}
.station-card {
    background:var(--surface); border:1px solid var(--border); border-radius:14px;
    padding:14px; cursor:pointer; text-align:center;
    position:relative; overflow:hidden; min-height:96px;
    display:flex; flex-direction:column; justify-content:flex-start; gap:6px;
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    transition:border-color .18s, background .18s, transform .18s, box-shadow .18s;
}
.station-card:hover  { background:rgba(0,200,255,0.05); border-color:rgba(0,200,255,.28); transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,200,255,.07); }
.station-card:active { transform:scale(0.97); }
.station-card.active { border-color:rgba(0,200,255,.5); background:rgba(0,200,255,0.06); box-shadow:0 0 20px rgba(0,200,255,.1); }
.station-card img           { width:80%; max-height:54px; object-fit:contain; margin:0 auto; }
.station-card .card-name    { font-weight:700; font-size:.85rem; color:#fff; margin-top:4px; }
.station-card .card-song    { font-size:.75rem; color:rgba(255,255,255,.35); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.station-card .card-listeners { font-size:.68rem; color:rgba(255,255,255,.2); margin-top:2px; display:flex; align-items:center; justify-content:center; gap:4px; }
.station-card .card-listeners i { font-size:.64rem; }
.on-air-badge { position:absolute; top:7px; left:7px; background:linear-gradient(90deg,#c22020,#e84c4c); color:#fff; padding:3px 7px; border-radius:10px; font-size:.7rem; font-weight:700; display:flex; gap:5px; align-items:center; }
.on-air-dot   { width:6px; height:6px; background:#fff; border-radius:50%; box-shadow:0 0 6px rgba(255,255,255,.7); }

/* Category filter */
.category-filter { display:flex; flex-wrap:wrap; gap:7px; padding:0 0 14px; }
.cat-pill {
    background:var(--surface); border:1px solid rgba(255,255,255,.1);
    color:rgba(255,255,255,.55); padding:5px 14px; border-radius:20px;
    font-size:.82rem; cursor:pointer;
    transition:background .14s, border-color .14s, color .14s; user-select:none;
}
.cat-pill:hover  { border-color:rgba(0,200,255,.4); color:#fff; }
.cat-pill.active { background:var(--accent-dim); border-color:rgba(0,200,255,.45); color:#fff; }

/* ── Status Bar ─────────────────────────────────────────────────────────── */
.status-bar {
    height:62px; background:rgba(0,0,0,0.88);
    border-top:1px solid var(--border);
    display:flex; align-items:center; justify-content:space-between;
    padding:0 16px; flex-shrink:0; z-index:1;
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
}

/* Bottom nav */
.bottom-nav { display:flex; gap:0; }
.nav-tab-btn {
    display:flex; flex-direction:column; align-items:center; gap:2px;
    background:none; border:none; color:rgba(255,255,255,.28);
    cursor:pointer; padding:5px 14px; border-radius:8px;
    transition:color .16s, transform .1s; font-size:.53rem; letter-spacing:.5px;
    text-transform:uppercase; font-family:inherit; line-height:1; will-change:transform;
}
.nav-tab-btn i       { font-size:1.25rem; margin-bottom:2px; }
.nav-tab-btn.active  { color:var(--accent); }
.nav-tab-btn:hover   { color:rgba(255,255,255,.6); }
.nav-tab-btn:active  { transform:scale(0.88); }
.sys-info { display:flex; align-items:center; }
#clock { font-size:.82rem; color:rgba(255,255,255,.3); font-weight:500; letter-spacing:.5px; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.site-footer {
    height:30px; background:rgba(0,0,0,0.92); border-top:1px solid rgba(255,255,255,.04);
    display:flex; align-items:center; justify-content:center; gap:18px;
    font-size:.68rem; color:rgba(255,255,255,.2); flex-shrink:0; z-index:1;
}
.site-footer a { color:rgba(255,255,255,.2); text-decoration:none; transition:color .2s; }
.site-footer a:hover { color:rgba(255,255,255,.55); }
.footer-discord { display:flex; align-items:center; gap:4px; }
.footer-discord i { font-size:.82rem; color:#7289da; }
.footer-careers { display:flex; align-items:center; gap:4px; }
.footer-careers i { font-size:.78rem; color:var(--accent); }
.footer-careers:hover { color:var(--accent) !important; }
.footer-staff a { color:rgba(255,255,255,.2); text-decoration:none; }


/* ── Modal ──────────────────────────────────────────────────────────────── */
.modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,.88); z-index:100; align-items:center; justify-content:center; }
.modal-body { background:#0d1623; padding:28px; border-radius:16px; border:1px solid var(--border-2); width:400px; color:#fff; max-width:92vw; }
input { width:100%; padding:10px 12px; margin:8px 0; background:rgba(255,255,255,.05); border:1px solid var(--border-2); color:#fff; border-radius:8px; outline:none; transition:border-color .2s; }
input:focus { border-color:var(--accent); }

/* ── DJ label ────────────────────────────────────────────────────────────── */
.dj-label { font-size:.82rem; color:var(--accent); margin-top:4px; }

/* ── Fav badge ───────────────────────────────────────────────────────────── */
.fav-badge { background:rgba(0,200,255,.1); padding:5px 10px; border-radius:6px; color:var(--accent); font-weight:600; font-size:.9rem; margin-top:6px; display:inline-block; border:1px solid rgba(0,200,255,.2); }

/* ── Station meta ────────────────────────────────────────────────────────── */
.station-slogan     { font-size:.92rem; color:rgba(255,255,255,.45); font-style:italic; margin-top:6px; }
.station-description{ font-size:.86rem; color:rgba(255,255,255,.35); margin-top:4px; max-width:480px; line-height:1.45; }

/* ── Fav modal ───────────────────────────────────────────────────────────── */
.fav-modal-list { max-height:300px; overflow:auto; border-top:1px solid var(--border); margin-top:10px; padding-top:8px; }
.fav-item { padding:8px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; gap:8px; align-items:center; }
.fav-playing-list { position:fixed; left:16px; bottom:90px; background:rgba(4,10,20,.94); color:#fff; padding:12px 16px; border-radius:10px; z-index:2500; display:none; max-width:270px; border:1px solid var(--border-2); font-size:.88rem; box-shadow:0 8px 32px rgba(0,0,0,.5); }

/* ── Toast ───────────────────────────────────────────────────────────────── */
.toast { position:fixed; right:18px; bottom:88px; background:rgba(4,10,20,.95); color:#fff; padding:11px 16px; border-radius:8px; z-index:3000; display:none; font-size:.88rem; border:1px solid var(--border-2); box-shadow:0 4px 20px rgba(0,0,0,.5); }

/* ── Progress bar helpers ────────────────────────────────────────────────── */
.tmg-meta { font-size:.8rem; color:rgba(255,255,255,.45); margin-top:6px; display:flex; flex-wrap:wrap; gap:7px; align-items:center; }
.tmg-meta a { color:#1db954; text-decoration:none; }
.tmg-meta a:hover { text-decoration:underline; }
.tmg-meta .tmg-pill { background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:2px 8px; font-size:.74rem; }

/* ── Art glow ─────────────────────────────────────────────────────────────── */
:root { --tmg-color:#0056b3; }
.art-glow { position:absolute; inset:-20px; border-radius:50%; background:radial-gradient(circle,var(--tmg-color) 0%,transparent 70%); opacity:0; pointer-events:none; transition:opacity 1.2s, background 1.2s; z-index:-1; filter:blur(18px); }
.art-glow.visible { opacity:.3; }

/* ── Page Panel ──────────────────────────────────────────────────────────── */
#pagePanel {
    position:fixed; inset:0; background:#070d17; z-index:200;
    display:none; flex-direction:column;
    animation:viewSlideUp .26s cubic-bezier(.25,0,.2,1);
}
.page-panel-header {
    display:flex; justify-content:space-between; align-items:center;
    padding:0 20px; background:rgba(0,0,0,.92);
    border-bottom:1px solid var(--border); height:48px; flex-shrink:0;
}
.page-panel-title { font-size:.92rem; font-weight:700; color:#fff; letter-spacing:.5px; text-transform:uppercase; }
.page-panel-close { background:none; border:none; color:rgba(255,255,255,.5); font-size:1.3rem; cursor:pointer; opacity:.7; line-height:1; padding:4px 8px; transition:opacity .2s; }
.page-panel-close:hover { opacity:1; }
#pagePanelFrame { flex:1; border:none; width:100%; height:100%; }

/* ── Banner Bar ──────────────────────────────────────────────────────────── */
#bannerBar {
    display:none; align-items:center; gap:10px;
    padding:0 16px; height:36px; flex-shrink:0;
    font-size:.82rem; position:relative; z-index:2;
    overflow:hidden;
}
#bannerBar.visible { display:flex; }
#bannerBar.type-info    { background:rgba(0,150,255,.12); border-bottom:1px solid rgba(0,150,255,.25); color:#88ccff; }
#bannerBar.type-promo   { background:rgba(255,170,0,.10); border-bottom:1px solid rgba(255,170,0,.22); color:#ffd060; }
#bannerBar.type-station { background:rgba(0,200,80,.10);  border-bottom:1px solid rgba(0,200,80,.22);  color:#60ffaa; }
#bannerBar.type-alert   { background:rgba(255,60,0,.12);  border-bottom:1px solid rgba(255,60,0,.28);  color:#ff8866; }
#bannerBar .banner-icon { flex-shrink:0; }
#bannerBar .banner-text { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#bannerBar .banner-action {
    flex-shrink:0; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
    color:inherit; border-radius:6px; padding:2px 10px; font-size:.76rem; cursor:pointer;
    font-family:inherit; font-weight:600; transition:.15s;
}
#bannerBar .banner-action:hover { background:rgba(255,255,255,.2); }
#bannerBar .banner-dismiss {
    flex-shrink:0; background:none; border:none; color:rgba(255,255,255,.3);
    cursor:pointer; font-size:1rem; line-height:1; padding:2px 4px; transition:.15s;
}
#bannerBar .banner-dismiss:hover { color:rgba(255,255,255,.7); }
#bannerBar .banner-dots { display:flex; gap:4px; flex-shrink:0; }
#bannerBar .banner-dot {
    width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.2); transition:.2s;
}
#bannerBar .banner-dot.active { background:rgba(255,255,255,.7); }


/* ── Mobile info button ──────────────────────────────────────────────────── */
.info-btn-mobile {
    display:none; width:22px; height:22px; border-radius:50%;
    border:1.5px solid rgba(0,200,255,.4); background:rgba(0,200,255,.1);
    color:var(--accent); font-size:.72rem; font-weight:700;
    cursor:pointer; align-items:center; justify-content:center;
    flex-shrink:0; margin-left:6px; line-height:1; padding:0;
}

/* ── Station info sheet ──────────────────────────────────────────────────── */
.station-info-sheet {
    position:fixed; bottom:-100%; left:0; right:0;
    background:#0d1623; border-top:1px solid var(--border);
    border-radius:20px 20px 0 0; padding:16px 20px 28px;
    z-index:600; transition:bottom .3s cubic-bezier(.4,0,.2,1);
    max-height:65vh; overflow-y:auto;
}
.station-info-sheet.open { bottom:0; }
.info-sheet-handle { width:40px; height:4px; background:rgba(255,255,255,.15); border-radius:2px; margin:0 auto 14px; }
.info-sheet-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:599; }
.info-sheet-station-name { font-size:1.15rem; font-weight:700; margin-bottom:6px; }
.info-sheet-slogan { font-size:.95rem; color:var(--accent); font-style:italic; margin-bottom:10px; opacity:.8; }
.info-sheet-desc { font-size:.88rem; color:rgba(255,255,255,.5); line-height:1.55; }

/* ── More Sheet ──────────────────────────────────────────────────────────── */
.more-sheet {
    position:fixed; bottom:0; left:0; right:0;
    background:rgba(7,13,23,0.97); border-top:1px solid var(--border);
    border-radius:22px 22px 0 0;
    padding:12px 16px calc(80px + env(safe-area-inset-bottom,0px));
    z-index:650; backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
    transform:translateY(100%); transition:transform .36s cubic-bezier(.32,0,.15,1); will-change:transform;
}
.more-sheet.open { transform:translateY(0); }
.more-sheet-handle { width:36px; height:4px; background:rgba(255,255,255,.15); border-radius:2px; margin:0 auto 10px; }
.more-sheet-title { font-size:.58rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.25); text-align:center; margin-bottom:14px; }
.more-sheet-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }
.more-sheet-btn {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:7px; background:var(--surface); border:1px solid var(--border);
    border-radius:14px; padding:14px 6px 12px; color:rgba(255,255,255,.8);
    font-size:.62rem; font-weight:600; cursor:pointer;
    font-family:'Inter','Roboto',system-ui,sans-serif; letter-spacing:.3px;
    transition:background .14s, border-color .14s, transform .1s; will-change:transform;
}
.more-sheet-btn i { font-size:1.2rem; color:rgba(255,255,255,.55); }
.more-sheet-btn:active { transform:scale(0.91); background:var(--accent-dim); border-color:rgba(0,200,255,.3); }
.more-sheet-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:649; backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); animation:viewFadeIn .2s ease; }

/* ── Vote modal ──────────────────────────────────────────────────────────── */
.vote-tabs { display:flex; gap:4px; margin:10px 0 14px; border-bottom:1px solid rgba(255,255,255,.08); }
.vote-tab { cursor:pointer; padding:8px 14px; border-radius:6px 6px 0 0; opacity:.5; font-size:.88rem; font-weight:500; border-bottom:2px solid transparent; transition:opacity .2s, border-color .2s; user-select:none; display:flex; align-items:center; gap:5px; }
.vote-tab.active { opacity:1; border-bottom-color:var(--accent); color:var(--accent); }
.vote-tab:hover { opacity:.8; }
.vote-target-wrap { min-height:36px; }
.vote-target-name { font-size:1rem; font-weight:600; color:#ddd; padding:4px 0; }
.vote-val-btns { display:flex; gap:9px; margin-top:14px; }
.vote-val-btn {
    flex:1; display:flex; align-items:center; justify-content:center; gap:7px;
    background:rgba(255,255,255,.04); border:1.5px solid var(--border);
    padding:12px; border-radius:10px; cursor:pointer; font-size:.95rem; color:#fff;
    transition:background .14s, border-color .14s;
}
.vote-val-btn:has(input:checked) { background:var(--accent-dim); border-color:rgba(0,200,255,.45); }
.vote-val-btn input[type="radio"] { display:none; }

/* ── Lyrics panel ────────────────────────────────────────────────────────── */
.lyrics-panel { position:absolute; inset:0; background:rgba(4,8,16,.95); z-index:20; display:flex; flex-direction:column; animation:viewSlideRight .22s cubic-bezier(.25,0,.2,1); }
.lyrics-header { display:flex; justify-content:space-between; align-items:center; padding:14px 20px; border-bottom:1px solid var(--border); font-size:.92rem; color:rgba(255,255,255,.55); flex-shrink:0; }
.lyrics-scroll  { flex:1; overflow-y:auto; display:flex; align-items:flex-start; padding:20px; }
.lyrics-content { width:100%; max-width:660px; margin:0 auto; }
.lyric-line {
    font-size:1.2rem; line-height:1.75; color:rgba(255,255,255,.28);
    transition:color .3s, font-size .3s; cursor:default; padding:3px 0; border-radius:6px;
}
.lyric-line.active { color:var(--tmg-color, #00c8ff); font-size:1.4rem; font-weight:600; text-shadow:0 0 24px var(--tmg-color, #00c8ff); }
.lyric-line.past   { color:rgba(255,255,255,.14); }

/* ── DJ Live badge (browse cards) ────────────────────────────────────────── */
.dj-live-badge { position:absolute; top:7px; right:7px; background:rgba(0,0,0,.75); border:1px solid rgba(0,200,255,.45); color:#00c8ff; padding:2px 7px; border-radius:9px; font-size:.65rem; font-weight:700; display:flex; align-items:center; gap:4px; backdrop-filter:blur(6px); max-width:86px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── Card blurred art bg ─────────────────────────────────────────────────── */
.card-art-bg { position:absolute; inset:0; background-size:cover; background-position:center; filter:blur(20px) brightness(.35) saturate(3); transform:scale(1.12); z-index:0; pointer-events:none; }
.station-card      > *:not(.card-art-bg),
.home-card         > *:not(.card-art-bg),
.home-discover-card> *:not(.card-art-bg) { position:relative; z-index:1; }

/* ── Home View ───────────────────────────────────────────────────────────── */
#homeView {