/* ── RESET ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── VELVET (default) — navy/purple dark ───────────────────── */
:root {
  --bg:#1a1a2e; --surface:#16213e; --raised:#0f3460; --card:#1e2d4a;
  --hover:rgba(255,255,255,.08); --active:rgba(139,92,246,.18);
  --border:#2a3a5e; --border2:#3a4e72;
  --primary:#8b5cf6; --primary-h:#7c3aed;
  --primary-d:rgba(139,92,246,.15); --primary-g:rgba(139,92,246,.4);
  --accent:#60a5fa; --green:#34d399; --red:#f87171; --yellow:#fbbf24;
  --t1:#eeeeff; --t2:#8888b0; --t3:#7e8ec0; --t4:#2a3a5e;
  --sidebar:236px; --player:210px; --r:7px; --r2:12px; --qp-width:488px;
}

/* ── DARK — true near-black, Material/Apple dark guidelines ── */
:root.dark {
  --bg:#000000; --surface:#0d0d0d; --raised:#1c1c1e; --card:#141414;
  --hover:rgba(255,255,255,.055); --active:rgba(167,139,250,.14);
  --border:rgba(255,255,255,.09); --border2:rgba(255,255,255,.15);
  --primary:#a78bfa; --primary-h:#9061f9;
  --primary-d:rgba(167,139,250,.14); --primary-g:rgba(167,139,250,.38);
  --accent:#60a5fa; --green:#34d399; --red:#f87171; --yellow:#fbbf24;
  --t1:#f1f1f1; --t2:#8a8a9a; --t3:#707082; --t4:#252530;
  --sidebar:236px; --player:210px; --r:7px; --r2:12px; --qp-width:488px;
}

/* ── LIGHT THEME ────────────────────────────────────────────── */
:root.light {
  --bg:#e8e8f2;          /* main content area — medium lavender-gray */
  --surface:#f2f2fa;     /* panels (sidebar, player, queue) — soft off-white */
  --raised:#e4e4ef;      /* raised elements over surface */
  --card:#dcdcec;        /* cards over bg */
  --hover:rgba(0,0,0,.06); --active:rgba(109,60,230,.11);
  --border:rgba(0,0,0,.10); --border2:rgba(0,0,0,.17);
  --primary:#6d3ce6; --primary-h:#5b28d4;
  --primary-d:rgba(109,60,230,.12); --primary-g:rgba(109,60,230,.35);
  --accent:#2563eb; --green:#16a34a; --red:#dc2626; --yellow:#d97706;
  --t1:#0c0c1a; --t2:#42425e; --t3:#7878a0; --t4:#b8b8d0;
  --sidebar:236px; --player:210px; --r:7px; --r2:12px; --qp-width:488px;
}
html{height:100%;}
body{height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--t1);font-size:14px;line-height:1.5;}
.hidden{display:none!important;}
button{background:none;border:none;cursor:pointer;color:inherit;font-family:inherit;font-size:inherit;touch-action:manipulation;}
a{color:inherit;text-decoration:none;}
/* Eliminate 300 ms double-tap-zoom delay on all tappable elements.
   Browsers only add the synthetic click delay when double-tap-zoom is possible;
   'manipulation' keeps pan/pinch-zoom but disables double-tap-zoom on the element. */
button, a, .song-row, .artist-row, .album-card, .album-row,
.q-item, .fe-dir, .fe-file, .fe-crumb,
.nav-toggle, .player-left, .player-stars-row,
.sidebar-item, .playlist-item { touch-action:manipulation; }

/* ── SCROLLBAR ─────────────────────────────────────────────── */
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--t4);border-radius:99px;}
::-webkit-scrollbar-thumb:hover{background:var(--t3);}

/* ── LOGIN ─────────────────────────────────────────────────── */
#login-screen{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse 80% 50% at 50% -10%,rgba(139,92,246,.18),transparent),#1a1a2e;
  z-index:200;
  /* Scope remote-page solid colors so card/inputs are clearly visible */
  --surface:#16213e;--raised:#0f3460;--border:#2a3a5e;
  --t1:#e0e0f0;--t2:#a0a8c0;--t3:#7e8ec0;
}
:root.light #login-screen{
  background:radial-gradient(ellipse 80% 50% at 50% -10%,rgba(109,60,230,.10),transparent),#f0f2f7;
  --surface:#ffffff;--raised:#e4e8f0;--border:#d1d5db;
  --t1:#111827;--t2:#4b5563;--t3:#9ca3af;
}
:root.dark #login-screen{
  background:radial-gradient(ellipse 80% 50% at 50% -10%,rgba(167,139,250,.12),transparent),#000000;
  --surface:#0d0d0d;--raised:#1c1c1e;--border:rgba(255,255,255,.09);
  --t1:#f1f1f1;--t2:#8a8a9a;--t3:#707082;
}
.login-card{
  width:100%;max-width:375px;padding:36px 28px;
  background:var(--surface);border:1px solid var(--border);border-radius:22px;
  box-shadow:0 28px 70px rgba(0,0,0,.55),0 0 100px rgba(139,92,246,.08);
}
:root.light .login-card{box-shadow:0 12px 48px rgba(0,0,0,.13),0 0 60px rgba(109,60,230,.07);}

/* ── BOOT OVERLAY ───────────────────────────────────────────── */
#boot-overlay{
  position:fixed;inset:0;z-index:150;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse 80% 50% at 50% -10%,rgba(139,92,246,.18),transparent),var(--bg);
  transition:opacity .55s ease;
}
:root.light #boot-overlay{background:radial-gradient(ellipse 80% 50% at 50% -10%,rgba(109,60,230,.10),transparent),#f0f2f7;}
:root.dark  #boot-overlay{background:radial-gradient(ellipse 80% 50% at 50% -10%,rgba(167,139,250,.12),transparent),#000;}
#boot-overlay.boot-fade{opacity:0;pointer-events:none;}
.boot-card{display:flex;flex-direction:column;align-items:center;gap:18px;}
.boot-logo{animation:boot-pulse 2.2s ease-in-out infinite;}
@keyframes boot-pulse{0%,100%{opacity:.65;transform:scale(1)}50%{opacity:1;transform:scale(1.07)}}
.boot-title{font-size:22px;font-weight:400;letter-spacing:-.3px;color:var(--t1);}
.boot-m{font-weight:300;color:var(--t2);}
.boot-stream{font-weight:700;color:var(--t1);}
.boot-velvet-tag{display:inline-block;font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--primary);opacity:.85;margin-left:2px;vertical-align:middle;position:relative;top:-1px;}
.boot-status{font-size:13px;color:var(--t2);min-height:18px;letter-spacing:.01em;}
.boot-dots{display:flex;gap:9px;}
.boot-dots span{width:8px;height:8px;border-radius:50%;background:var(--primary-d);animation:boot-dot 1.5s ease-in-out infinite;}
.boot-dots span:nth-child(2){animation-delay:.25s;}
.boot-dots span:nth-child(3){animation-delay:.5s;}
@keyframes boot-dot{0%,80%,100%{background:var(--primary-d);transform:scale(.75)}40%{background:var(--primary);transform:scale(1.15)}}
.boot-skip{margin-top:6px;background:none;border:none;color:var(--t3);font-size:12px;cursor:pointer;padding:4px 8px;border-radius:var(--r);transition:color .14s;}
.boot-skip:hover{color:var(--t2);}
.login-brand{text-align:center;margin-bottom:28px;}
.login-brand svg{display:block;margin:0 auto 12px;}
.login-brand h1{font-size:20px;font-weight:400;letter-spacing:-.3px;margin-bottom:6px;}
.login-brand h1 .brand-m{font-weight:300;color:var(--t2);}
.login-brand h1 .brand-stream{font-weight:700;color:var(--t1);}
.login-velvet-tag{display:inline-block;font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--primary);opacity:.85;margin-left:2px;vertical-align:middle;position:relative;top:-1px;}
.login-brand p{color:var(--t2);font-size:13px;margin-top:2px;}
.field-label{font-size:12px;color:var(--t2);margin-bottom:5px;display:block;}
#login-form input{
  display:block;width:100%;padding:11px 14px;margin-bottom:14px;
  background:var(--raised);border:1px solid var(--border);border-radius:var(--r);
  color:var(--t1);font-size:15px;outline:none;transition:border-color .18s,box-shadow .18s;
}
#login-form input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-d);}
#login-form input::placeholder{color:var(--t3);}
#login-btn{
  width:100%;padding:11px;margin-top:2px;background:var(--primary);color:#fff;border:none;
  border-radius:var(--r);font-size:14px;font-weight:600;cursor:pointer;
  transition:background .18s,box-shadow .18s,transform .1s;
}
#login-btn:hover{background:var(--primary-h);box-shadow:0 4px 22px var(--primary-g);}
#login-btn:active{transform:scale(.97);}
#login-btn:disabled{opacity:.6;cursor:default;}
#login-error{color:var(--red);font-size:13px;text-align:center;margin-top:12px;min-height:18px;}


/* ── APP LAYOUT ────────────────────────────────────────────── */
#app{
  display:grid;
  grid-template-columns:var(--sidebar) minmax(320px,1fr) auto;
  grid-template-rows:1fr var(--player);
  grid-template-areas:"side main queue" "side player player";
  height:100vh;
  height:100dvh;
  max-height:100vh;
  max-height:100dvh;
  overflow:hidden; /* prevent content overflow pushing player off screen */
}

/* ── SIDEBAR ───────────────────────────────────────────────── */
.sidebar{
  grid-area:side;display:flex;flex-direction:column;
  width:var(--sidebar);min-width:0;max-width:var(--sidebar);overflow:hidden;
  background:var(--surface);border-right:1px solid var(--border);
  min-height:0;
}
.sidebar-brand{
  display:flex;align-items:center;gap:10px;padding:18px 16px 14px;flex-shrink:0;
}
.sidebar-clock{
  margin-left:auto;text-align:right;line-height:1.25;flex-shrink:0;
}
.sidebar-clock .sc-time{
  font-size:17px;font-weight:600;letter-spacing:.02em;color:var(--t1);font-variant-numeric:tabular-nums;
}
.sidebar-clock .sc-date{
  font-size:9px;font-weight:500;letter-spacing:.06em;color:var(--t2);text-transform:uppercase;margin-top:1px;
}
.brand-text{display:flex;flex-direction:column;gap:2px;line-height:1;}
.brand-name{font-size:15px;}
.brand-m{font-weight:300;color:var(--t2);}
.brand-stream{font-weight:700;color:var(--t1);letter-spacing:-.2px;}
.brand-velvet{font-size:9px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--primary);opacity:.8;align-self:flex-end;}
.sidebar-scroll{flex:1 1 0;overflow-y:auto;padding:4px 0 8px;min-height:0;}
.nav-label{
  padding:14px 16px 5px;font-size:10px;font-weight:700;letter-spacing:.9px;
  color:var(--t2);text-transform:uppercase;flex-shrink:0;
}
.nav-label-row{
  display:flex;align-items:center;justify-content:space-between;padding-right:10px;
}
.nav-toggle{cursor:pointer;user-select:none;display:flex;align-items:center;justify-content:space-between;padding-right:10px;}
.nav-toggle:hover{color:var(--t1);}
.nav-chevron{flex-shrink:0;opacity:.4;transition:transform .2s ease;margin-left:4px;}
.nav-toggle:hover .nav-chevron{opacity:.75;}
.nav-section.collapsed .nav-chevron{transform:rotate(-90deg);}
.nav-section.collapsed .sidenav{display:none;}
.nav-label-actions{display:flex;align-items:center;gap:2px;}
.sidenav{display:flex;flex-direction:column;padding:0 8px;}
.nav-btn{
  display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;
  border-radius:var(--r);font-size:13px;color:var(--t2);
  transition:background .15s,color .15s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.nav-btn:hover{background:var(--hover);color:var(--t1);}
.nav-btn.active{background:var(--active);color:var(--primary);}
.nav-btn svg{flex-shrink:0;opacity:.8;}
.nav-btn.active svg{opacity:1;}
.playlist-nav{gap:0;}
.pl-row{display:flex;align-items:center;width:100%;border-radius:var(--r);overflow:hidden;transition:background .15s;}
.pl-row:hover{background:var(--hover);}
.pl-row.active{background:var(--active);}
.pl-row-btn{
  flex:1;display:flex;align-items:center;gap:8px;
  padding:7px 4px 7px 10px;font-size:13px;color:var(--t2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pl-row:hover .pl-row-btn,.pl-row.active .pl-row-btn{color:var(--t1);}
.pl-row.active .pl-row-btn{color:var(--primary);}
.pl-row-del,.pl-row-edit{opacity:0;padding:6px 8px;color:var(--t3);font-size:16px;flex-shrink:0;transition:opacity .15s,color .15s;}
.pl-row-share{opacity:0;padding:6px 6px;color:var(--t3);font-size:14px;flex-shrink:0;transition:opacity .15s,color .15s;display:flex;align-items:center;}
.pl-row:hover .pl-row-del,.pl-row:hover .pl-row-edit{opacity:1;}
.pl-row:hover .pl-row-share{opacity:1;}
.pl-row-del:hover{color:var(--red);}
.pl-row-edit:hover{color:var(--primary);}
.pl-row-share:hover{color:var(--accent);}
.pl-fresh-icon{flex-shrink:0;opacity:.6;color:var(--primary);}
.icon-btn{
  width:22px;height:22px;display:flex;align-items:center;justify-content:center;
  border-radius:5px;color:var(--t3);transition:background .15s,color .15s;
}
.icon-btn:hover{background:var(--hover);color:var(--t1);}
.sidebar-footer{
  flex-shrink:0;padding:8px 10px 12px;border-top:1px solid var(--border);
  display:flex;flex-direction:column;gap:2px;
}
.footer-link,.footer-action{
  display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:var(--r);
  font-size:12px;color:var(--t2);transition:background .15s,color .15s;
}
.footer-link:hover,.footer-action:hover{background:var(--hover);color:var(--t1);}

/* ── THEME SEGMENTED PILL (3-step: Velvet / Dark / Light) ───── */
.theme-seg{display:flex;width:calc(100% - 1.5rem);box-sizing:border-box;padding:3px;gap:2px;background:var(--border);border-radius:calc(var(--r) + 4px);margin:0 .75rem .55rem;overflow:hidden;}
.theme-seg-btn{
  flex:1 1 0;width:0;display:flex;align-items:center;justify-content:center;gap:4px;
  padding:5px 4px;border-radius:var(--r);font-size:11px;font-weight:600;
  color:var(--t3);background:none;border:none;cursor:pointer;
  transition:background .15s,color .15s;font-family:inherit;white-space:nowrap;line-height:1;overflow:hidden;
}
.theme-seg-btn:hover{color:var(--t2);}
.theme-seg-btn.active{background:var(--surface);color:var(--primary);box-shadow:0 1px 4px rgba(0,0,0,.4);}
:root.light .theme-seg-btn.active{box-shadow:0 1px 3px rgba(0,0,0,.18);}
:root.dark  .theme-seg-btn.active{box-shadow:0 1px 5px rgba(0,0,0,.7);}

/* light-mode tweaks */
:root.light{color-scheme:light;}
:root.dark {color-scheme:dark;}
:root.light body{color-scheme:light;}
:root.dark  body{color-scheme:dark;}
:root.light .sidebar{
  background:linear-gradient(180deg,#eae8f8 0%,#e8e8f4 100%);
  border-right:1px solid rgba(100,80,200,.14);
  box-shadow:2px 0 16px rgba(80,60,160,.10);
}
:root.light .player{
  background:linear-gradient(180deg,#eceaf8 0%,#e4e2f0 100%);
  border-top:none;
  box-shadow:0 -1px 0 rgba(109,60,230,.24), 0 -16px 50px rgba(80,60,160,.16), inset 0 1px 0 rgba(109,60,230,.12);
}
:root.light .player::before{
  background:radial-gradient(ellipse 40% 80% at 50% 50%,rgba(109,60,230,.08) 0%,transparent 65%);
}

:root.light .vu-needle-wrap{
  background:none;
  border:none;
  box-shadow:none;
}
:root.light .vu-spec-row{
  border-left:1px solid rgba(109,60,230,.16);
}
:root.light .player-thumb{
  box-shadow:0 8px 24px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.10), 0 0 0 1px rgba(109,60,230,.12);
}
/* player-center has no glass card — transparent in both modes */
:root.light .vol-divider{
  background:linear-gradient(180deg,transparent,rgba(109,60,230,.22) 30%,rgba(109,60,230,.22) 70%,transparent);
}
:root.light .queue-panel{
  background:linear-gradient(180deg,#eae8f8 0%,#ececf6 100%);
  border-left:1px solid rgba(100,80,200,.14);
  box-shadow:-2px 0 16px rgba(80,60,160,.10);
}
:root.light .login-card{box-shadow:0 12px 48px rgba(0,0,0,.14),0 0 60px rgba(109,60,230,.07);}
:root.light .album-card:hover{box-shadow:0 10px 30px rgba(0,0,0,.14);}
:root.light .np-modal-box{box-shadow:0 24px 80px rgba(0,0,0,.2),0 0 60px rgba(109,60,230,.06);}
:root.light .np-left{background:#dddaf0;}
:root.light .np-art{box-shadow:0 12px 40px rgba(0,0,0,.18),0 4px 12px rgba(0,0,0,.1),0 0 0 1px rgba(0,0,0,.06);}
:root.light .qp-now-playing{background:linear-gradient(180deg,rgba(109,60,230,.14) 0%,rgba(109,60,230,.05) 60%,transparent 100%);}
:root.light .modal-overlay{background:rgba(0,0,0,.38);}
:root.light .ctx-menu{background:#f2f2fa;box-shadow:0 8px 32px rgba(0,0,0,.2);}
:root.light .toast{box-shadow:0 4px 20px rgba(0,0,0,.15);}
:root.light #login-screen{background:radial-gradient(ellipse 80% 50% at 50% -10%,rgba(109,60,230,.15),transparent),var(--bg);}
:root.light .play-main{box-shadow:0 2px 12px rgba(109,60,230,.35);}
:root.light .play-main:hover{box-shadow:0 0 0 8px var(--primary-d),0 4px 18px rgba(109,60,230,.4);}
:root.light .np-play-main:hover{box-shadow:0 0 0 10px var(--primary-d),0 6px 24px rgba(109,60,230,.45)!important;}
:root.light .prog-track{background:rgba(0,0,0,.18);}
:root.light .cue-tick::after{box-shadow:0 2px 10px rgba(0,0,0,.18);}
/* Song rows — slightly tinted on hover for readability */
:root.light .song-row:hover{background:rgba(109,60,230,.07);}
:root.light .song-row.playing{background:rgba(109,60,230,.10);}
/* Nav items */
:root.light .nav-item:hover{background:rgba(100,80,200,.09);}
:root.light .nav-item.active{background:rgba(109,60,230,.13);}
/* Nav buttons — stronger contrast in light mode */
:root.light .nav-btn{color:#2e2e50;}
:root.light .nav-btn:hover{background:rgba(100,80,200,.11);color:#0c0c1a;}
:root.light .nav-btn.active{background:rgba(109,60,230,.18);color:#4c1fc7;font-weight:600;}
:root.light .nav-label{color:#4a4a70;}
:root.light .pl-row-btn{color:#2e2e50;}
:root.light .pl-row:hover .pl-row-btn{color:#0c0c1a;}
:root.light .pl-row.active .pl-row-btn{color:#4c1fc7;font-weight:600;}
:root.light .footer-link,:root.light .footer-action{color:#2e2e50;}
:root.light .footer-link:hover,:root.light .footer-action:hover{color:#0c0c1a;}
/* Control buttons */
:root.light .ctrl-btn:hover{background:rgba(0,0,0,.09);}
:root.light .ctrl-btn.active{background:rgba(109,60,230,.14);color:var(--primary);}
/* Sliders — more visible track */
:root.light .bal-slider{background:rgba(0,0,0,.20);}
/* pright buttons */
:root.light .pright-btn:hover{background:rgba(0,0,0,.09);}
/* Content header — matches sidebar/player gradient language */
:root.light .content-header{
  background:linear-gradient(180deg,#dddaf0 0%,#e4e4f0 100%);
  border-bottom:1px solid rgba(100,80,200,.16);
  box-shadow:0 2px 14px rgba(80,60,160,.10),0 1px 0 rgba(109,60,230,.09);
}
/* Album/artist cards */
:root.light .album-card{box-shadow:0 2px 8px rgba(0,0,0,.10);}
/* Queue rows */
:root.light .queue-item:hover{background:rgba(100,80,200,.09);}
:root.light .queue-item.active{background:rgba(109,60,230,.13);}

/* ── CONTENT ───────────────────────────────────────────────── */
.content{grid-area:main;display:flex;flex-direction:column;overflow:hidden;min-width:0;min-height:0;}
.content-header{
  display:flex;align-items:center;gap:10px;padding:16px 20px 14px;
  border-bottom:1px solid var(--border);
  flex-shrink:0;
  background:linear-gradient(180deg,rgba(139,92,246,.07) 0%,transparent 100%),var(--bg);
  box-shadow:0 2px 14px rgba(0,0,0,.18),0 1px 0 rgba(139,92,246,.10);
  position:relative;z-index:1;
}
.content-header h2{font-size:18px;font-weight:700;letter-spacing:-.3px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.back-btn{
  display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;color:var(--t2);
  transition:background .15s,color .15s;flex-shrink:0;
}
/* ── NO-ART PLACEHOLDER ──────────────────────────────────────── */
.no-art{
  width:100%;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  background:var(--surface);position:relative;overflow:hidden;
  border-radius:inherit;
}
.no-art::before{
  content:'';position:absolute;
  width:60%;height:60%;max-width:120px;max-height:120px;
  background:var(--primary);filter:blur(40px);opacity:.18;
  pointer-events:none;
}
.no-art-wave{
  display:flex;align-items:flex-end;gap:13%;z-index:1;
  width:40%;height:40%;max-width:48px;max-height:48px;
}
.no-art-wave span{
  flex:1;background:var(--t2);border-radius:3px;
  animation:no-art-bounce 1.4s ease-in-out infinite;
  opacity:.5;
}
.no-art-wave span:nth-child(1){height:40%;animation-delay:.0s;}
.no-art-wave span:nth-child(2){height:100%;animation-delay:.15s;}
.no-art-wave span:nth-child(3){height:65%;animation-delay:.3s;}
.no-art-wave span:nth-child(4){height:85%;animation-delay:.45s;}
.no-art-wave span:nth-child(5){height:45%;animation-delay:.6s;}
@keyframes no-art-bounce{
  0%,100%{transform:scaleY(1);opacity:.45;}
  50%{transform:scaleY(.55);opacity:.8;}
}
.no-art-sm .no-art-wave{gap:12%;}
.no-art-sm .no-art-wave span{border-radius:2px;}

/* Album card variant — static bars + label, no animation */
.no-art-album .no-art-wave span{animation:none;opacity:.35;}
.no-art-album .no-art-wave span:nth-child(1){height:45%;}
.no-art-album .no-art-wave span:nth-child(2){height:90%;}
.no-art-album .no-art-wave span:nth-child(3){height:60%;}
.no-art-album .no-art-wave span:nth-child(4){height:80%;}
.no-art-album .no-art-wave span:nth-child(5){height:40%;}
.no-art-label{font-size:9px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--t3);margin-top:7px;z-index:1;opacity:.7;}

.back-btn:hover{background:var(--hover);color:var(--t1);}
.header-right{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.scan-badge{
  font-size:11px;color:var(--t2);background:var(--raised);border:1px solid var(--border);
  padding:3px 10px;border-radius:99px;display:none;
}
.scan-badge.show{display:inline;}

/* ── Compact scan progress (player header) ── */
.spc-wrap{display:flex;flex-direction:column;gap:4px;}
.spc-card{
  display:flex;align-items:center;gap:7px;
  background:var(--raised);border:1px solid var(--border);border-left:2px solid var(--green);
  border-radius:var(--r);padding:6px 12px;cursor:default;min-width:200px;max-width:320px;
}
.spc-dot{
  width:6px;height:6px;border-radius:50%;background:var(--green);flex-shrink:0;
  animation:spc-pulse 1.4s ease-in-out infinite;
}
@keyframes spc-pulse{0%,100%{opacity:1;}50%{opacity:.3;}}
.spc-vpath{font-size:12px;font-weight:700;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:0;max-width:70px;}
.spc-track{flex:1;position:relative;height:4px;background:var(--border);border-radius:99px;overflow:hidden;min-width:40px;}
.spc-fill{height:100%;background:var(--green);border-radius:99px;transition:width .8s ease-out;}
.spc-fill-ind{
  position:absolute;inset:0;width:40%;
  background:linear-gradient(90deg,transparent,var(--primary),transparent);
  animation:spc-shimmer 1.8s ease-in-out infinite;
}
@keyframes spc-shimmer{0%{transform:translateX(-250%);}100%{transform:translateX(350%);}}
.spc-pct{font-size:11px;font-weight:700;color:var(--green);white-space:nowrap;flex-shrink:0;}
.spc-count{font-size:10px;color:var(--t1);white-space:nowrap;flex-shrink:0;}
.btn-sm{
  display:flex;align-items:center;gap:5px;padding:6px 12px;border-radius:var(--r);
  font-size:12px;font-weight:600;color:var(--t2);background:var(--raised);
  border:1px solid var(--border);transition:background .15s,color .15s;
}
.btn-sm:hover{background:var(--card);color:var(--t1);}
.share-pl-desc{font-size:13px;color:var(--t2);margin-bottom:14px;line-height:1.5;}
.modal-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px;}
.modal-label{font-size:13px;color:var(--t2);flex-shrink:0;}
.modal-select{padding:8px 10px;background:var(--raised);border:1px solid var(--border);border-radius:var(--r);color:var(--t1);font-size:13px;outline:none;cursor:pointer;transition:border-color .15s;}
.modal-select:focus{border-color:var(--primary);}
.share-pl-result{margin-top:14px;}
.share-pl-url-row{display:flex;gap:8px;align-items:center;}
.share-pl-url-input{flex:1;min-width:0;padding:9px 11px;background:var(--raised);border:1px solid var(--border);border-radius:var(--r);color:var(--t1);font-size:12px;font-family:monospace;outline:none;}
.share-pl-copy-btn{display:inline-flex;align-items:center;gap:5px;flex-shrink:0;white-space:nowrap;}
.modal-input-sm{padding:8px 10px;background:var(--raised);border:1px solid var(--border);border-radius:var(--r);color:var(--t1);font-size:13px;outline:none;transition:border-color .15s;}
.modal-input-sm:focus{border-color:var(--primary);}
.shared-links-list{display:flex;flex-direction:column;gap:10px;}
.shared-link-row{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.shared-link-row.shared-expired{opacity:.55;}
.shared-link-info{flex:1;min-width:0;}
.shared-link-url{font-size:12px;font-family:monospace;color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.shared-link-meta{font-size:11px;color:var(--t3);margin-top:4px;}
.shared-link-actions{display:flex;gap:6px;flex-shrink:0;align-items:center;}
.shared-expired-tag{display:inline-block;background:rgba(248,113,113,.15);color:var(--red);font-size:10px;padding:1px 6px;border-radius:99px;margin-left:4px;vertical-align:middle;}
.modal-input-sm{padding:8px 10px;background:var(--raised);border:1px solid var(--border);border-radius:var(--r);color:var(--t1);font-size:13px;outline:none;transition:border-color .15s;}
.modal-input-sm:focus{border-color:var(--primary);}
.shared-links-list{display:flex;flex-direction:column;gap:10px;}
.shared-link-row{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.shared-link-row.shared-expired{opacity:.55;}
.shared-link-info{flex:1;min-width:0;}
.shared-link-url{font-size:12px;font-family:monospace;color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.shared-link-meta{font-size:11px;color:var(--t3);margin-top:4px;}
.shared-link-actions{display:flex;gap:6px;flex-shrink:0;}
.shared-expired-tag{display:inline-block;background:rgba(248,113,113,.15);color:var(--red);font-size:10px;padding:1px 6px;border-radius:99px;margin-left:4px;vertical-align:middle;}
.btn-primary-sm{background:var(--primary-d);color:var(--primary);border-color:rgba(139,92,246,.3);}
.btn-primary-sm:hover{background:var(--primary);color:#fff;}
.content-body{flex:1 1 0;overflow-y:auto;padding:16px 20px;min-height:0;contain:style layout;}

/* ── LOADING / EMPTY ───────────────────────────────────────── */
.loading-state{display:flex;align-items:center;justify-content:center;height:160px;color:var(--t3);}
.loading-state::after{
  content:'';width:32px;height:32px;border:2px solid var(--border2);
  border-top-color:var(--primary);border-radius:50%;
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}
.empty-state{display:flex;align-items:center;justify-content:center;height:140px;color:var(--t3);font-size:14px;}

/* ── SONG ROWS ─────────────────────────────────────────────── */
.song-list{display:flex;flex-direction:column;gap:1px;}
.song-row{
  display:grid;grid-template-columns:36px 48px 1fr auto auto;
  align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r);
  cursor:pointer;transition:background .14s;min-width:0;
  /* Eliminate the 300 ms tap-delay on touch screens (e.g. CleverShare/CleverTouch).
     'manipulation' = allow pan/pinch-zoom but not double-tap-zoom, so the browser
     fires click immediately on touchend instead of waiting to see a second tap. */
  touch-action:manipulation;
}
.song-row:hover{background:var(--hover);}
.song-row.playing{background:var(--active);}
.song-row.playing .song-title{color:var(--primary);}
.row-num{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;flex-shrink:0;position:relative;
}
.num-val{font-size:12px;color:var(--t3);}
.row-play-icon{position:absolute;opacity:0;transition:opacity .14s;color:var(--primary);}
.row-art{width:48px;height:48px;border-radius:6px;background:var(--raised);flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.row-art img{width:100%;height:100%;object-fit:cover;}
.song-row:hover .num-val{opacity:0;}
.song-row:hover .row-play-icon{opacity:1;}
.song-row.playing .num-val{opacity:0;}
.song-row.playing .row-play-icon{opacity:1;}
.song-info{min-width:0;}
.song-title{font-size:14px;font-weight:500;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.song-sub{font-size:12px;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;}
.song-path{font-size:11px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;font-family:monospace;letter-spacing:-.2px;}
.row-stars{display:flex;gap:1px;flex-shrink:0;font-size:12px;letter-spacing:-.5px;cursor:pointer;touch-action:manipulation;}
.row-stars .s-on{color:var(--yellow);}
.row-stars .s-off{color:var(--t4);}
/* Row action buttons: hidden on mouse, always visible on touch (hover never fires on touch) */
.row-actions{display:flex;align-items:center;gap:2px;flex-shrink:0;opacity:0;transition:opacity .14s;}
.song-row:hover .row-actions{opacity:1;}
@media(hover:none){
  /* Touch-primary devices — always show action buttons, no hover available */
  .row-actions{opacity:1;}
}
.row-act-btn{
  display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:5px;color:var(--t2);
  transition:background .14s,color .14s;
  touch-action:manipulation;
}
.row-act-btn:hover{background:var(--raised);color:var(--t1);}

/* ── SONG SELECTION MODE ────────────────────────────────── */
.row-check{display:none;width:16px;height:16px;border:2px solid var(--t3);border-radius:3px;flex-shrink:0;position:relative;transition:background .14s,border-color .14s;}
.song-list.select-mode .row-check{display:block;}
.song-list.select-mode .num-val{display:none;}
.song-list.select-mode .row-play-icon{display:none!important;}
.song-row.selected{background:var(--active);}
.song-row.selected .row-check{background:var(--primary);border-color:var(--primary);}
.song-row.selected .row-check::after{content:'';position:absolute;left:3px;top:0;width:5px;height:9px;border:2px solid #fff;border-top:none;border-left:none;transform:rotate(45deg);}
:root.light .song-row.selected{background:rgba(109,60,230,.10);}
#select-mode-btn.active{background:var(--primary);color:#fff;}

/* ── MOST PLAYED ─────────────────────────────────────────── */
.song-row.mp-row{grid-template-columns:36px 48px 1fr 108px auto auto;}
.mp-count-cell{display:flex;align-items:center;gap:7px;flex-shrink:0;width:108px;}
.mp-bar-track{flex:1;min-width:44px;height:3px;background:var(--raised);border-radius:2px;overflow:hidden;}
.mp-bar-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--primary-g),var(--primary));}
.mp-num{font-size:11px;color:var(--t3);white-space:nowrap;min-width:26px;text-align:right;}

/* ── ALBUM GRID ────────────────────────────────────────────── */
.album-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:20px;}
.album-card{cursor:pointer;border-radius:var(--r2);overflow:hidden;background:var(--surface);transition:transform .18s,box-shadow .18s;}
.album-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.5);}
.album-art{aspect-ratio:1;background:var(--raised);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;}
.album-art img{width:100%;height:100%;object-fit:cover;transition:transform .22s;}
.album-card:hover .album-art img{transform:scale(1.05);}
.play-ov{position:absolute;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .18s;}
.album-card:hover .play-ov{opacity:1;}
.album-meta{padding:11px 12px 13px;}
.album-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--t1);}
.album-year{font-size:12px;color:var(--t2);margin-top:3px;}

/* ── ARTIST LIST ───────────────────────────────────────────── */
.artist-list{display:flex;flex-direction:column;gap:1px;}
.artist-row{display:flex;align-items:center;gap:14px;padding:9px 10px;border-radius:var(--r);cursor:pointer;transition:background .14s;}
.artist-row:hover{background:var(--hover);}
.artist-av{width:46px;height:46px;border-radius:50%;background:var(--raised);display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:700;color:var(--t2);flex-shrink:0;overflow:hidden;}
.artist-name{font-size:14px;font-weight:600;}
.artist-var{font-size:11px;font-weight:500;color:var(--t3);margin-left:3px;}

/* A-Z index strip */
.az-strip{display:flex;flex-wrap:nowrap;gap:3px;padding:4px 0 12px;}
.az-strip.az-hidden{display:none;}
.az-btn{flex:1 1 0;min-width:0;height:28px;padding:0 2px;border-radius:6px;font-size:11px;font-weight:700;
  background:var(--raised);border:1px solid var(--border);color:var(--t2);
  cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .13s,color .13s;white-space:nowrap;overflow:hidden;}
.az-btn:hover:not(:disabled){background:var(--hover);color:var(--t1);}
.az-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}
.az-btn:disabled{opacity:.22;cursor:default;}
@media(max-width:480px){.az-strip{flex-wrap:wrap;}.az-btn{flex:0 1 calc(14.28% - 3px);min-width:24px;}}

/* ── SEARCH ────────────────────────────────────────────────── */
.search-wrap{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:10px 14px;margin-bottom:8px;}
.search-vpath-pills{display:flex;flex-wrap:wrap;gap:6px;padding:4px 2px 16px;}
.search-input{flex:1;background:none;border:none;outline:none;font-size:15px;color:var(--t1);}
.search-input::placeholder{color:var(--t3);}
.search-section{margin-bottom:24px;}
.search-section h3{font-size:11px;font-weight:700;letter-spacing:.8px;color:var(--t3);text-transform:uppercase;margin-bottom:10px;}
.search-overflow-note{font-size:12px;color:var(--t3);text-align:center;padding:10px 0 4px;}
/* Search result rows have no album-art column — saves 50 img fetches + reflows */
.song-row.search-row{grid-template-columns:36px 1fr auto;}

/* ── FILE EXPLORER ─────────────────────────────────────────── */
.fe-filter-row{display:flex;align-items:center;gap:8px;margin-bottom:12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:8px 12px;transition:border-color .18s,box-shadow .18s;}
.fe-filter-row:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-d);}
.fe-filter-row svg{flex-shrink:0;color:var(--t3);}
.fe-filter-input{flex:1;background:none;border:none;outline:none;font-size:13px;color:var(--t1);}
.fe-filter-input::placeholder{color:var(--t3);}
.fe-filter-clear{display:flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--border2);color:var(--t2);font-size:11px;flex-shrink:0;transition:background .14s,color .14s;}
.fe-filter-clear:hover{background:var(--t3);color:var(--t1);}
.fe-match-count{font-size:11px;color:var(--t3);flex-shrink:0;white-space:nowrap;}
.fe-hidden{display:none!important;}
.fe-breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:4px;padding:0 0 14px;font-size:12px;color:var(--t2);}
.fe-crumb{padding:3px 7px;border-radius:5px;cursor:pointer;transition:background .14s,color .14s;}
.fe-crumb:hover{background:var(--hover);color:var(--t1);}
.fe-crumb-sep{color:var(--t3);}
.fe-grid{display:flex;flex-direction:column;gap:1px;}
.fe-dir,.fe-file{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r);cursor:pointer;transition:background .14s;}
.fe-dir:hover,.fe-file:hover{background:var(--hover);}
.fe-icon{color:var(--t3);flex-shrink:0;}
.fe-thumb{width:36px;height:36px;border-radius:4px;object-fit:cover;flex-shrink:0;background:var(--raised);}
.fe-dir .fe-icon{color:var(--accent);}
.fe-name{font-size:14px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fe-sub{font-size:12px;color:var(--t2);flex-shrink:0;}
.fe-actions{opacity:0;display:flex;gap:3px;transition:opacity .14s;}
.fe-file:hover .fe-actions{opacity:1;}
.fe-act{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:5px;color:var(--t2);transition:background .14s,color .14s;}
.fe-act:hover{background:var(--raised);color:var(--t1);}

/* ── AUTO-DJ ───────────────────────────────────────────────── */
.autodj-panel{max-width:480px;margin:0 auto;display:flex;flex-direction:column;gap:20px;padding-top:8px;}
.autodj-hero{text-align:center;padding:32px 20px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r2);}
.autodj-hero h2{font-size:20px;font-weight:700;margin:14px 0 8px;}
.autodj-hero p{font-size:13px;color:var(--t2);line-height:1.6;}
.autodj-icon{width:64px;height:64px;border-radius:50%;background:var(--primary-d);display:flex;align-items:center;justify-content:center;margin:0 auto;font-size:28px;}
.autodj-toggle{
  width:100%;padding:13px;border-radius:var(--r);font-size:14px;font-weight:600;
  background:var(--primary-d);color:var(--t1);border:1px solid rgba(139,92,246,.3);
  transition:all .2s;cursor:pointer;
}
.autodj-toggle:hover,.autodj-toggle.on{background:var(--primary);color:#fff;}
.autodj-opts{background:var(--surface);border:1px solid var(--border);border-radius:var(--r2);padding:16px;}
.autodj-opts h4{font-size:12px;font-weight:700;letter-spacing:.5px;color:var(--t1);text-transform:uppercase;margin-bottom:14px;}
.autodj-opt-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border);font-size:13px;}
.autodj-opt-row:last-child{border-bottom:none;}
/* Stacking variant — label above, control below full-width (used for pills row) */
.autodj-opt-col{flex-direction:column;align-items:flex-start;gap:10px;}
.autodj-opt-col .dj-vpath-pills{justify-content:flex-start;width:100%;}
.dj-vpath-pills{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;}
.dj-vpath-pill{
  padding:5px 13px;border-radius:99px;font-size:12px;font-weight:600;
  border:2px solid var(--border2);color:var(--t3);background:transparent;
  transition:background .15s, border-color .15s, color .15s, box-shadow .15s;cursor:pointer;white-space:nowrap;
}
.dj-vpath-pill:hover{color:var(--t1);border-color:var(--primary);background:var(--primary-d);}
.dj-vpath-pill.on{background:var(--primary,#cba6f7);border-color:var(--primary,#cba6f7);color:#fff;box-shadow:0 0 0 2px var(--primary-d);}
.autodj-opt-label{font-size:13px;font-weight:500;color:var(--t1);margin-bottom:2px;}
.autodj-opt-hint{font-size:11px;color:var(--t3);}
.autodj-select{background:var(--raised);border:1px solid var(--border);border-radius:var(--r);color:var(--t1);font-size:12px;padding:5px 8px;outline:none;}
.autodj-status{background:var(--raised);border:1px solid var(--border);border-radius:var(--r);padding:10px 14px;font-size:13px;color:var(--t1);text-align:center;}
.autodj-status.on{border-color:rgba(139,92,246,.4);color:var(--t1);background:var(--active);}
/* ── DJ keyword filter ─────────────────────────────────────── */
.autodj-filter-header{display:flex;align-items:center;justify-content:space-between;width:100%;}
.dj-filter-tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center;width:100%;min-height:32px;background:var(--raised);border:1px solid var(--border);border-radius:var(--r);padding:5px 8px;}
.dj-filter-tag{display:inline-flex;align-items:center;gap:4px;padding:3px 8px 3px 10px;border-radius:99px;background:var(--primary-d);border:1px solid var(--primary);color:var(--t1);font-size:11px;font-weight:600;}
.dj-filter-tag-rm{background:none;border:none;color:inherit;font-size:13px;line-height:1;cursor:pointer;padding:0 2px;opacity:.7;transition:opacity .1s;}
.dj-filter-tag-rm:hover{opacity:1;}
.dj-filter-input{background:transparent;border:none;outline:none;color:var(--t1);font-size:12px;flex:1;min-width:100px;}
.dj-filter-input::placeholder{color:var(--t3);}
.dj-filter-input:disabled{opacity:.4;cursor:not-allowed;}

/* ── QUEUE PANEL (permanent right column) ──────────────────── */
.queue-panel{
  grid-area:queue;
  width:var(--qp-width);min-width:0;
  display:flex;flex-direction:column;
  background:var(--surface);border-left:1px solid var(--border);
  overflow:hidden;
  min-height:0;
  transition:width .28s cubic-bezier(.4,0,.2,1),border-color .28s;
}
.queue-panel.collapsed{width:0;border-left-color:transparent;}

/* Reopen tab — only visible when queue is collapsed */
#qp-reopen-tab{
  display:none;
  position:fixed;
  right:0; top:50%;
  transform:translateY(-50%);
  width:28px; height:52px;
  background:var(--surface);
  border:1px solid var(--border);
  border-right:none;
  border-radius:8px 0 0 8px;
  cursor:pointer;
  align-items:center;
  justify-content:center;
  color:var(--t2);
  transition:background .15s,color .15s;
  z-index:200;
  padding:0;
}
#qp-reopen-tab:hover{background:var(--hover);color:var(--t1);}
.queue-panel.collapsed #qp-reopen-tab{display:flex;}

/* Now Playing card */
.qp-now-playing{
  flex-shrink:0;padding:16px;
  background:linear-gradient(180deg,rgba(139,92,246,.17) 0%,rgba(139,92,246,.05) 60%,transparent 100%);
  border-bottom:1px solid var(--border);
}
.qp-np-label{
  display:flex;align-items:center;gap:6px;
  font-size:9px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;
  color:var(--primary);margin-bottom:12px;
}
.ql-sub-label{font-size:9px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;color:var(--accent);}
.qp-np-empty{font-size:12px;color:var(--t3);text-align:center;padding:6px 0 2px;line-height:1.8;}
.qp-np-track{display:flex;gap:12px;align-items:center;}
.qp-np-art{
  width:64px;height:64px;border-radius:10px;background:var(--raised);
  flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 24px rgba(0,0,0,.55);
}
.qp-np-art img{width:100%;height:100%;object-fit:cover;}
.qp-np-info{flex:1;min-width:0;}
.qp-np-title{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--t1);}
.qp-np-artist{font-size:12px;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px;}
.qp-np-stars .s-on{color:var(--yellow);font-size:11px;}
.qp-np-stars .s-off{color:var(--t4);font-size:11px;}

/* Up Next header */
.qp-header{display:flex;align-items:center;justify-content:space-between;padding:9px 12px 7px;border-bottom:1px solid var(--border);flex-shrink:0;}
.qp-title{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;color:var(--t2);text-transform:uppercase;letter-spacing:.5px;}
.qp-title span{font-size:10px;color:var(--t3);font-weight:400;letter-spacing:0;text-transform:none;}
.qp-btns{display:flex;gap:2px;}
.qp-btns button{width:27px;height:27px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--t3);transition:background .14s,color .14s;}
.qp-btns button:hover{background:var(--hover);color:var(--t1);}

/* Queue list */
.queue-list{flex:1;overflow-y:auto;padding:3px 0;}
.q-empty-state{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:36px 20px;color:var(--t3);text-align:center;
}
.q-empty-state svg{opacity:.18;}
.q-empty-state p{font-size:11px;line-height:1.75;max-width:155px;}
.q-empty-state strong{color:var(--t2);}
.q-item{display:flex;align-items:center;gap:9px;padding:7px 10px 7px 12px;cursor:pointer;transition:background .14s;}
.q-item:hover{background:var(--hover);}
.q-item.q-active{background:var(--active);}
.q-item.q-active .q-num{color:var(--primary);}
.q-num{width:20px;font-size:11px;color:var(--t3);text-align:center;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.q-art{width:44px;height:44px;border-radius:6px;background:var(--raised);flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.q-art img{width:100%;height:100%;object-fit:cover;}
.q-info{flex:1;min-width:0;}
.q-title{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.q-artist{font-size:12px;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.q-drag-handle{width:14px;display:flex;align-items:center;justify-content:center;color:var(--t3);opacity:0;cursor:grab;flex-shrink:0;transition:opacity .14s;touch-action:none;}
.q-item:hover .q-drag-handle{opacity:0.55;}
.q-item.q-dragging{opacity:.35;pointer-events:none;}
.q-item.q-drag-over{box-shadow:inset 0 2px 0 0 var(--primary);}
.q-remove{
  opacity:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;
  color:var(--t3);border-radius:4px;transition:opacity .14s,color .14s,background .14s;flex-shrink:0;
}
.q-item:hover .q-remove{opacity:1;}
.q-remove:hover{color:var(--red);background:rgba(248,113,113,.1);}

/* ── PLAYER BAR ────────────────────────────────────────────── */
.player{
  grid-area:player;
  display:grid;
  /*
   * col 1 : art + song info  (1fr, fills remaining space)
   * col 2 : play controls    (auto — icon btns + sep + shuffle/prev/play/next/repeat)
   * col 3 : VU / spectrum    (capped 468px, shrinks to 38% at narrow widths)
   * row 1 : 1fr  — art / controls
   * row 2 : auto — progress timeline (cols 1-2 only)
   * row 3 : auto — vol + balance strip (cols 1-2 only)
   */
  grid-template-columns: minmax(0,1fr) auto min(468px, 28%);
  grid-template-rows: 1fr auto auto;
  column-gap:20px; row-gap:0;
  padding:10px 16px 8px 20px;
  background:linear-gradient(180deg,var(--surface) 0%,var(--raised) 100%);
  box-shadow:
    0 -1px 0 rgba(139,92,246,.20),
    0 -24px 60px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(139,92,246,.14);
  position:relative;
}
/* Radial ambient halo centred on the play button */
.player::before{
  content:'';
  position:absolute;inset:0;
  background:radial-gradient(ellipse 45% 90% at 50% 38%,rgba(139,92,246,.14) 0%,transparent 65%);
  pointer-events:none;
  z-index:0;
}
.mini-spec{
  position:absolute;top:0;left:0;
  width:100%;height:100%;
  pointer-events:none;
  border-radius:2px;
}
/*
 * VU / spectrum column — col 3, spans all 3 rows.
 * align-self:end + margin-bottom:31px (= half of row-3 height ~62px)
 * pins the canvas BOTTOM to the center of row 3 = same y as vol/balance sliders.
 */
.vu-spec-row{
  grid-column:3;
  grid-row:1/4;
  cursor:pointer;
  position:relative;
  height:110px;
  align-self:end;
  margin-bottom:31px;
  width:100%;
}
.vu-needle-wrap{
  position:absolute;top:0;left:0;
  display:flex;gap:6px;width:100%;height:100%;align-items:stretch;
  background:none;
  border:none;border-radius:0;padding:4px;
  box-shadow:none;
}
/* Use visibility to hide inactive VU elements — keeps them in layout so height never shifts */
#mini-spec.hidden{display:block!important;visibility:hidden!important;pointer-events:none!important;}
#vu-needle-wrap.hidden{display:flex!important;visibility:hidden!important;pointer-events:none!important;}
.vu-dial{flex:1;min-width:0;height:100%;border-radius:6px;}
.vu-ppm-wrap{position:absolute;top:24px;left:0;width:100%;height:100%;}
.vu-ppm{display:block;width:100%;height:100%;}
.vu-center-logo{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  flex-shrink:0;width:68px;gap:4px;overflow:hidden;
}
.vu-ref-knob{
  width:34px;height:34px;flex-shrink:0;
  cursor:ew-resize;touch-action:none;
  border-radius:50%;display:block;
}
.vu-center-name{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  line-height:1;white-space:nowrap;
  transition:color .4s;
}
.vu-cn-main{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  font-size:11px;font-weight:300;letter-spacing:.5px;
  color:var(--t2);
}
.vu-cn-main strong{font-weight:700;color:var(--t1);}
.vu-cn-velvet{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  font-size:9px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--primary);opacity:.85;align-self:flex-end;
}
/* Flowing gradient on both name elements while audio is playing */
body.audio-playing .vu-cn-main,
body.audio-playing .vu-cn-main strong{
  background:linear-gradient(90deg,var(--primary),var(--accent),var(--primary));
  background-size:200% auto;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  animation:vu-name-flow 3s linear infinite;
}
body.audio-playing .vu-cn-velvet{
  background:linear-gradient(90deg,var(--accent),var(--primary),var(--accent));
  background-size:200% auto;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  animation:vu-name-flow 3s linear infinite reverse;
}
@keyframes vu-name-flow{
  0%  {background-position:0% center;}
  100%{background-position:200% center;}
}
.vu-brand-text{
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  font-size:8px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--t2);text-shadow:0 0 9px rgba(139,92,246,.5);
  white-space:nowrap;opacity:0.88;
}
body.vu-needle-mode .eq-panel{bottom:calc(var(--player) + 8px);}
:root.bar-top body.vu-needle-mode .eq-panel{bottom:auto;top:calc(var(--player) + 8px);}
/* Art-pulse mode: album art fills the VU row and pulses with audio level */
.vu-art-wrap{position:absolute;inset:0;overflow:hidden;}
.vu-art-wrap canvas{display:block;width:100%;height:100%;visibility:hidden;pointer-events:none;}
#vu-art-wrap.hidden{display:block!important;visibility:hidden!important;pointer-events:none!important;}
/* player-left: col 1, row 1 */
.player-left{grid-column:1;grid-row:1;display:flex;align-items:center;gap:14px;min-width:0;cursor:pointer;z-index:1;align-self:center;}
.player-left:hover .player-thumb{box-shadow:0 0 0 2px var(--primary);transition:box-shadow .18s;}
/* album art thumb — floating depth */
.player-thumb{position:relative;width:88px;height:88px;flex-shrink:0;border-radius:var(--r);overflow:hidden;background:var(--raised);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.32), 0 0 0 1px rgba(255,255,255,.07);
  transition:box-shadow .18s;
}
.player-thumb img{width:100%;height:100%;object-fit:cover;}
/* incoming-track art overlay used during audio crossfade */
.xf-art{position:absolute;inset:0;opacity:0;z-index:2;pointer-events:none;border-radius:inherit;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.xf-art img{width:100%;height:100%;object-fit:cover;display:block;}
/* outgoing text clone overlay — sits on top of incoming text while it fades out */
.xf-text-out{position:absolute;top:0;left:0;right:0;pointer-events:none;z-index:2;background:transparent;}
.player-info{position:relative;min-width:0;flex:1;overflow:hidden;}
.player-title{font-size:18px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.player-artist{font-size:15px;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.player-album{font-size:13px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;}
.player-radio-np{font-size:12px;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;display:flex;align-items:center;gap:4px;}
.player-radio-db-badge{display:inline-flex;align-items:center;line-height:1;color:var(--primary);opacity:.75;flex-shrink:0;cursor:default;vertical-align:middle;position:relative;top:2px;}
.player-radio-db-badge svg{display:block;}
.player-title-row{display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden;}
.player-title-row .player-title{flex:0 1 auto;min-width:0;}
.player-radio-kbps{display:inline-block;font-size:10px;font-family:monospace;color:var(--t2);background:var(--bg2);border:1px solid var(--border);border-radius:999px;padding:0 5px;font-variant-numeric:tabular-nums;white-space:nowrap;flex-shrink:0;}
@keyframes player-marquee{0%,15%{transform:translateX(0);}85%,100%{transform:translateX(var(--scroll-by,0px));}}
.marquee-scroll{animation:player-marquee 9s ease-in-out infinite alternate;display:inline-block;}
.player-stars-row{display:flex;gap:2px;margin-top:3px;font-size:12px;letter-spacing:-.5px;cursor:pointer;}
.player-stars-row .s-on{color:var(--yellow);}
.player-stars-row .s-off{color:var(--t4);}
.player-stars-row:hover .s-off{color:var(--t3);}
/* Controls — col 2, row 1 */
.player-center{
  grid-column:2;grid-row:1;
  display:flex;align-items:center;justify-content:center;
  align-self:center;
  z-index:1;
}
.player-controls{display:flex;align-items:center;gap:6px;}

/* base button */
.ctrl-btn{
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;color:var(--t1);
  transition:background .15s,color .15s,box-shadow .15s,transform .1s;
  flex-shrink:0;outline:none;
}
.ctrl-btn:hover{background:var(--hover);color:var(--t1);}
.ctrl-btn:active{transform:scale(.9);}
.ctrl-btn:focus{outline:none;}
.ctrl-btn.active{color:var(--primary);}
.ctrl-btn.active:hover{background:var(--primary-d);}

/* transport group — shift 20px left of the utility group */
.ctrl-transport{display:flex;align-items:center;gap:8px;margin-right:20px;}

/* prev/next skip buttons */
.ctrl-nav{width:46px;height:46px;color:var(--t1);opacity:1;border-radius:10px;}
.ctrl-nav:hover{background:var(--hover);}
.ctrl-nav:active{transform:scale(.88);}

/* shuffle / repeat — flat straight icon buttons, active = accent color + dot */
#shuffle-btn,#repeat-btn{
  position:relative;
  width:40px;height:40px;
  border-radius:8px;
  color:var(--t2);
  opacity:1;
  background:transparent;
  border:none;
  transition:color .15s,background .15s;
}
#shuffle-btn:hover,#repeat-btn:hover{color:var(--t1);background:var(--hover);}
#shuffle-btn.active,#repeat-btn.active{color:var(--primary);}
#shuffle-btn.active:hover,#repeat-btn.active:hover{background:var(--primary-d);}
#shuffle-btn.active::after,#repeat-btn.active::after{
  content:'';
  position:absolute;bottom:3px;left:50%;transform:translateX(-50%);
  width:4px;height:4px;border-radius:50%;
  background:var(--primary);
}
/* keep generic ctrl-sm for EQ/viz/queue utility buttons */
.ctrl-sm{width:40px;height:40px;opacity:1;}

/* main play/pause button */
.play-main{
  width:56px;height:56px;
  background:var(--primary);
  color:#fff!important;
  border-radius:50%;
  box-shadow:0 0 0 0 var(--primary-g);
  transition:background .15s,box-shadow .2s,transform .1s;
}
.play-main:hover{
  background:var(--primary-h);
  box-shadow:0 0 0 8px var(--primary-d),0 4px 18px rgba(139,92,246,.45);
}
.play-main:active{transform:scale(.9);box-shadow:0 0 0 4px var(--primary-d);}
/* Progress timeline — cols 1-2 (not VU col), row 2 */
.player-progress{
  grid-column:1/3;
  grid-row:2;
  display:flex;align-items:center;gap:10px;
  padding:6px 0 4px;
  z-index:1;
  position:relative;
  cursor:none;
}
.player-progress span{font-size:11px;color:var(--t2);flex-shrink:0;min-width:38px;font-variant-numeric:tabular-nums;cursor:pointer;user-select:none;}
.player-progress span:last-child{text-align:right;}
.prog-track{flex:1;height:5px;border-radius:99px;background:rgba(255,255,255,.08);position:relative;}
/* Gradient fill — purple to accent blue, feels alive across the full width */
.prog-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--primary) 0%,var(--accent) 100%);pointer-events:none;position:relative;overflow:visible;}
.prog-thumb{position:absolute;right:-6px;top:50%;width:12px;height:12px;border-radius:50%;background:var(--primary);border:2.5px solid rgba(255,255,255,.85);box-shadow:0 1px 6px rgba(0,0,0,.5);transform:translateY(-50%);transition:width .15s,height .15s,right .15s,box-shadow .15s;pointer-events:none;}
.prog-track:hover .prog-thumb{width:15px;height:15px;right:-7.5px;box-shadow:0 1px 10px var(--primary-g);}
:root.light .prog-thumb{border-color:var(--surface);}
/* Seek time preview bubble — fixed vertical position above the progress row */
.seek-preview{
  position:absolute;bottom:20px;
  transform:translateX(-50%);
  background:var(--raised);color:var(--t1);
  font-size:11px;font-variant-numeric:tabular-nums;
  padding:3px 8px;border-radius:5px;
  white-space:nowrap;pointer-events:none;
  border:1px solid var(--border2);
  box-shadow:0 2px 8px rgba(0,0,0,.45);
  opacity:0;transition:opacity .08s;z-index:20;
}
.seek-preview.sp-show{opacity:1;}
/* Seek arrow — DOM triangle, replaces the OS cursor; only left changes in JS, bottom is fixed */
.seek-arrow{
  position:absolute;
  bottom:13px;
  width:0;height:0;
  border-left:7px solid transparent;
  border-right:7px solid transparent;
  border-top:13px solid rgba(255,255,255,.92);
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.65));
  transform:translateX(-50%);
  pointer-events:none;
  opacity:0;
  transition:opacity .05s;
  z-index:25;
}
.seek-arrow.sa-show{opacity:1;}
.seek-arrow.sa-cue{border-top-color:#ffbe1e;}
:root.light .seek-arrow{border-top-color:rgba(80,40,180,.9);}
/* Cue ticks restore pointer since cursor:none is on the container */
.cue-tick{cursor:pointer;}
.cue-markers{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:3;}
/* Each tick: visible colored bar + tooltip. Hit zone wider than visual. */
.cue-tick{
  position:absolute;top:0;bottom:0;width:12px;
  display:block;transform:translateX(-50%);
  pointer-events:auto;
  background:transparent;
  border:none;padding:0;
}
/* The visible stem - full height of the hit zone */
.cue-tick::before{
  content:'';
  position:absolute;top:0;bottom:0;left:50%;margin-left:-2px;
  width:4px;
  background:rgba(255,190,30,.9);
  border-radius:2px;
  transition:background .1s;
}
.cue-tick:hover::before{background:var(--primary);}
/* Light mode: use dark purple stem so it's visible on white background */
:root.light .cue-tick::before{background:rgba(109,60,230,.8);}
:root.light .cue-tick:hover::before{background:var(--primary);}
/* Tooltip above the bar */
.cue-tick::after{
  content:attr(data-label);
  position:absolute;
  bottom:calc(100% + 8px);
  left:50%;transform:translateX(-50%);
  background:var(--raised);color:var(--t1);
  font-size:11px;line-height:1.4;padding:4px 9px;
  border-radius:6px;white-space:nowrap;
  opacity:0;pointer-events:none;
  transition:opacity .15s;
  border:1px solid var(--border2);
  box-shadow:0 2px 10px rgba(0,0,0,.5);
  z-index:100;
}
.cue-tick:hover::after{opacity:1;}
/* player-right: vol + balance — cols 1-2, row 3 */
.player-right{grid-column:1/3;grid-row:3;display:flex;align-items:center;justify-content:flex-end;min-width:0;z-index:1;padding:2px 13px 8px 0;}
/* ctrl-sep: thin vertical divider between utility icons and playback controls */
.ctrl-sep{width:1px;height:22px;background:rgba(139,92,246,.22);flex-shrink:0;margin:0 4px;}
.pright-icons{display:flex;align-items:center;justify-content:center;gap:2px;}
.pright-btn{width:38px;height:38px;border-radius:10px;opacity:.8;}
.pright-btn:hover{opacity:1;background:var(--hover);}
.pright-btn.active{opacity:1;color:var(--primary);}
.pright-btn.active:hover{background:var(--primary-d);}
/* ── Auto-DJ dice throw ──────────────────────────── */
#dj-dice{position:fixed;bottom:calc(var(--player) + 10px);right:76px;z-index:310;pointer-events:none;width:64px;height:64px;perspective:200px;opacity:0;}
.dj-dice-cube{width:64px;height:64px;position:relative;transform-style:preserve-3d;}
.dj-dice-face{position:absolute;inset:0;border-radius:10px;background:linear-gradient(145deg,var(--primary) 0%,#4c1d95 100%);display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);padding:9px;box-sizing:border-box;border:2px solid rgba(196,181,253,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 6px 24px rgba(0,0,0,.55);}
.dj-dice-face span{border-radius:50%;background:#e9d5ff;box-shadow:0 1px 4px rgba(0,0,0,.6);}
.dj-face-label{position:absolute;bottom:4px;left:0;right:0;text-align:center;font-size:6.5px;font-style:normal;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.92);pointer-events:none;line-height:1;}
:root.light .dj-face-label{color:rgba(12,12,26,.82);}
.dj-face-label-top{bottom:auto;top:4px;}
.dj-face-f{transform:rotateY(0deg)   translateZ(32px);}
.dj-face-b{transform:rotateY(180deg) translateZ(32px);}
.dj-face-r{transform:rotateY(90deg)  translateZ(32px);}
.dj-face-l{transform:rotateY(-90deg) translateZ(32px);}
.dj-face-t{transform:rotateX(90deg)  translateZ(32px);}
.dj-face-d{transform:rotateX(-90deg) translateZ(32px);}
/* ───────────────────────────────────────────────── */
.dj-light{position:relative;}
.dj-light.dj-inactive{color:var(--t1);}
.dj-light:not(.dj-inactive){color:var(--primary);}
.dj-light:not(.dj-inactive)::after{content:'';position:absolute;bottom:3px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:var(--primary);}
.q-count{position:absolute;top:1px;right:1px;font-size:9px;font-weight:700;min-width:15px;height:15px;line-height:15px;text-align:center;background:var(--primary);color:var(--badge-fg,#fff);border-radius:99px;padding:0 3px;box-shadow:0 0 0 2px var(--bg);display:none;}
.q-count.show{display:block;}
#queue-btn{position:relative;}
.vol-wrap{display:flex;flex-direction:row;align-items:center;gap:0;width:100%;max-width:340px;margin-right:30px;}
.vol-group{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;min-width:0;}
.vol-group-lbl{font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--t2);text-align:center;}
.bal-row{display:flex;align-items:center;gap:4px;width:100%;}
.vol-row{display:flex;align-items:center;gap:6px;width:100%;}
.vol-divider{width:1px;height:52px;background:linear-gradient(180deg,transparent,rgba(139,92,246,.25) 30%,rgba(139,92,246,.25) 70%,transparent);flex-shrink:0;margin:0 14px;}
.bal-center-btn{
  background:none;border:none;padding:0 0 0 3px;cursor:pointer;
  color:var(--t3);font-size:11px;line-height:1;vertical-align:middle;
  opacity:.6;transition:opacity .15s, color .15s;
}
.bal-center-btn:hover{opacity:1;color:var(--primary);}
.bal-lbl{font-size:11px;font-weight:700;color:var(--t2);flex-shrink:0;width:8px;text-align:center;letter-spacing:.5px;}
.bal-slider{flex:1;height:3px;cursor:pointer;-webkit-appearance:none;appearance:none;background:var(--border2);border-radius:99px;outline:none;accent-color:var(--primary);}
.bal-slider::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;border-radius:50%;background:var(--primary);cursor:ew-resize;box-shadow:0 1px 3px rgba(0,0,0,.4);}
.mute-btn{display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:.55;transition:opacity .15s,color .15s;color:var(--t1);}
.mute-btn:hover{opacity:1;}
.mute-btn.muted{opacity:1;color:var(--red);}
.vol-slider{
  flex:1;height:4px;cursor:pointer;
  -webkit-appearance:none;appearance:none;
  background:linear-gradient(to right,
    var(--primary) 0%,
    var(--primary) var(--vol-pct, 80%),
    var(--border2)  var(--vol-pct, 80%),
    var(--border2)  100%);
  border-radius:99px;outline:none;
}
.vol-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:14px;height:14px;border-radius:50%;
  background:var(--primary);cursor:pointer;
  box-shadow:0 1px 4px rgba(0,0,0,.4);
  transition:box-shadow .15s,transform .15s;
}
.vol-slider:hover::-webkit-slider-thumb,.vol-slider:focus::-webkit-slider-thumb{
  box-shadow:0 0 0 3px rgba(139,92,246,.18),0 1px 4px rgba(0,0,0,.4);
  transform:scale(1.15);
}
.vol-slider:active::-webkit-slider-thumb{
  box-shadow:0 0 0 5px rgba(139,92,246,.22),0 1px 4px rgba(0,0,0,.4);
  transform:scale(1.2);
}
.vol-slider::-moz-range-track{
  height:4px;border-radius:99px;
  background:linear-gradient(to right,
    var(--primary) 0%,
    var(--primary) var(--vol-pct, 80%),
    var(--border2)  var(--vol-pct, 80%),
    var(--border2)  100%);
}
.vol-slider::-moz-range-thumb{
  width:14px;height:14px;border-radius:50%;border:none;
  background:var(--primary);cursor:pointer;
  box-shadow:0 1px 4px rgba(0,0,0,.4);
  transition:box-shadow .15s,transform .15s;
}
.vol-pct{font-size:11px;color:var(--t2);min-width:34px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums;margin-left:4px;}

/* ── MODALS ────────────────────────────────────────────────── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:300;}
.modal-box{background:var(--surface);border:1px solid var(--border2);border-radius:var(--r2);padding:24px;min-width:300px;max-width:400px;width:90%;box-shadow:0 24px 60px rgba(0,0,0,.5);}
.modal-box h3{font-size:16px;font-weight:700;margin-bottom:16px;}
.modal-box input{width:100%;padding:10px 12px;background:var(--raised);border:1px solid var(--border);border-radius:var(--r);color:var(--t1);font-size:14px;outline:none;transition:border-color .18s;}
.modal-box input:focus{border-color:var(--primary);}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px;}
.modal-actions .btn-primary{padding:8px 18px;margin-top:0;display:inline-flex;}
.btn-ghost{padding:8px 16px;border-radius:var(--r);font-size:13px;font-weight:500;color:var(--t2);background:var(--raised);border:1px solid var(--border);transition:all .15s;cursor:pointer;}
.btn-ghost:hover{color:var(--t1);background:var(--card);}
.btn-primary{padding:8px 18px;border-radius:var(--r);font-size:13px;font-weight:600;color:#fff;background:var(--primary);border:none;transition:all .15s;cursor:pointer;}
.btn-primary:hover{background:var(--primary-h);}
.btn-danger{padding:8px 18px;border-radius:var(--r);font-size:13px;font-weight:600;color:#fff;background:var(--red);border:none;transition:all .15s;cursor:pointer;}
.btn-danger:hover{background:#ef4444;}
.pl-del-icon{display:flex;justify-content:center;margin-bottom:12px;color:var(--red);opacity:.85;}
.pl-del-msg{font-size:13px;color:var(--t2);margin-top:-6px;margin-bottom:4px;line-height:1.6;}
.modal-list{display:flex;flex-direction:column;gap:3px;max-height:260px;overflow-y:auto;margin-top:4px;}
.modal-pl-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--r);cursor:pointer;font-size:13px;transition:background .14s;}
.modal-pl-item:hover{background:var(--hover);}
.modal-pl-icon{color:var(--primary);}
.modal-empty{color:var(--t3);font-size:13px;padding:12px;text-align:center;}

/* ── INFO PANEL (empty / disabled state) ───────────────────── */
.info-panel{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:60px 24px;text-align:center;max-width:420px;margin:0 auto;}
.info-panel h2{font-size:20px;font-weight:700;color:var(--t1);margin:0;}
.info-panel .info-hint{font-size:13px;color:var(--t2);line-height:1.65;margin:0;}
.info-panel-icon{color:var(--t3);opacity:.65;}

/* ── SETTINGS PANEL (Transcode) ────────────────────────────── */
.settings-panel{max-width:520px;margin:0 auto;padding:4px 0 24px;display:flex;flex-direction:column;gap:4px;}
.settings-section-title{font-size:16px;font-weight:700;color:var(--t1);padding-bottom:4px;}
.settings-desc{font-size:13px;color:var(--t2);line-height:1.6;margin:0 0 12px;}
.settings-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--border);}
.settings-row:last-child{border-bottom:none;}
.settings-row-toggle{padding:14px 0;}
.settings-label{font-size:13px;color:var(--t1);font-weight:500;}
.settings-select{background:var(--raised);color:var(--t1);border:1px solid var(--border2);border-radius:var(--r);padding:6px 10px;font-size:13px;outline:none;cursor:pointer;min-width:160px;}
.settings-select:focus{border-color:var(--primary);}
.settings-opts{display:flex;flex-direction:column;transition:opacity .18s;}
.settings-opts.dimmed{opacity:.38;pointer-events:none;}
/* Toggle switch */
.toggle-sw{position:relative;display:inline-flex;cursor:pointer;}
.toggle-sw input{position:absolute;opacity:0;width:0;height:0;}
.toggle-sw-track{width:40px;height:22px;border-radius:11px;background:var(--border2);transition:background .18s;position:relative;}
.toggle-sw input:checked ~ .toggle-sw-track{background:var(--primary);}
.toggle-sw-thumb{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .18s;box-shadow:0 1px 4px rgba(0,0,0,.3);}
.toggle-sw input:checked ~ .toggle-sw-track .toggle-sw-thumb{transform:translateX(18px);}

/* ── JUKEBOX PANEL ──────────────────────────────────────────── */
.jukebox-panel{max-width:420px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:16px;padding:24px 16px;}
.jukebox-header{display:flex;align-items:center;gap:10px;}
.jukebox-header h2{font-size:20px;font-weight:700;color:var(--t1);margin:0;}
.jukebox-live-dot{width:10px;height:10px;border-radius:50%;background:#22c55e;box-shadow:0 0 8px #22c55e;animation:pulse-dot 1.8s infinite;}
@keyframes pulse-dot{0%,100%{box-shadow:0 0 4px #22c55e}50%{box-shadow:0 0 12px #22c55e}}
.jukebox-hint{font-size:13px;color:var(--t2);text-align:center;line-height:1.6;margin:0;}
.jukebox-code-row{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--t2);}
.jukebox-code-val{font-size:22px;font-weight:700;color:var(--t1);letter-spacing:2px;}
.jukebox-url{font-size:12px;color:var(--primary);word-break:break-all;text-align:center;}
.jukebox-disc{margin-top:8px;}

/* ── APPS PANEL ─────────────────────────────────────────────── */
.apps-panel{max-width:520px;margin:0 auto;display:flex;flex-direction:column;gap:20px;padding:4px 0 24px;}
.apps-panel h2{font-size:20px;font-weight:700;color:var(--t1);margin:0;}
.apps-desc{font-size:13px;color:var(--t2);line-height:1.65;margin:0;}
.apps-grid{display:flex;flex-direction:column;gap:10px;}
.app-card{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:var(--r2);background:var(--card);border:1px solid var(--border);text-decoration:none;color:var(--t1);transition:background .14s,border-color .14s;}
.app-card:hover{background:var(--hover);border-color:var(--border2);}
.app-card-icon{width:36px;height:36px;flex-shrink:0;color:var(--t2);}
.app-card-title{font-size:14px;font-weight:600;}
.app-card-sub{font-size:12px;color:var(--t2);margin-top:2px;}
.apps-qr-section{display:flex;flex-direction:column;gap:8px;padding:16px;border-radius:var(--r2);background:var(--raised);border:1px solid var(--border);}
.apps-qr-section h3{font-size:14px;font-weight:600;color:var(--t1);margin:0;}
.apps-qr-section p{font-size:13px;color:var(--t2);margin:0;line-height:1.6;}

/* ── PLAYBACK VIEW ─────────────────────────────────────────── */
.playback-panel{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;padding:8px 0 16px;}
.playback-section{background:var(--surface);border:1px solid var(--border);border-radius:var(--r2);overflow:hidden;}
.playback-section-hdr{display:flex;align-items:flex-start;gap:14px;padding:18px 18px 14px;}
.playback-section-icon{font-size:26px;line-height:1;flex-shrink:0;margin-top:2px;}
.playback-section-title{font-size:15px;font-weight:700;color:var(--t1);margin-bottom:4px;}
.playback-section-desc{font-size:12px;color:var(--t2);line-height:1.55;}
.playback-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 18px 16px;border-top:1px solid var(--border);}
.playback-row-name{font-size:13px;font-weight:500;color:var(--t1);margin-bottom:3px;}
.playback-row-hint{font-size:11px;color:var(--t3);}
:root:not(.light) .playback-row-hint{color:var(--t2);}
#radio-edit-form .playback-row{justify-content:flex-start;}
#radio-edit-form .playback-row-label{flex-shrink:0;width:160px;}
#radio-edit-form .settings-input{flex:1;max-width:none !important;}
.xf-ctrl{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.xf-slider{width:130px;accent-color:var(--primary);cursor:pointer;}
.xf-val{font-size:13px;font-weight:600;color:var(--primary);min-width:28px;text-align:right;}
/* Sleep presets */
.sleep-presets{display:flex;flex-wrap:wrap;gap:8px;padding:10px 18px 18px;border-top:1px solid var(--border);}
.sleep-preset{padding:7px 14px;border-radius:99px;font-size:12px;font-weight:600;border:1px solid var(--border2);color:var(--t2);background:var(--raised);cursor:pointer;transition:background .15s,color .15s,border-color .15s;}
.sleep-preset:hover{background:var(--primary-d);border-color:var(--primary);color:var(--primary);}
.playback-seg{display:flex;padding:2px;gap:2px;background:var(--border);border-radius:calc(var(--r) + 3px);flex-shrink:0;}
.playback-seg-btn{padding:5px 14px;border-radius:var(--r);font-size:12px;font-weight:600;color:var(--t3);background:none;border:none;cursor:pointer;transition:background .15s,color .15s;font-family:inherit;white-space:nowrap;}
.playback-seg-btn.active{background:var(--surface);color:var(--primary);box-shadow:0 1px 4px rgba(0,0,0,.35);}
.playback-seg-btn:hover:not(.active){color:var(--t2);}
/* Active sleep box */
.sleep-active-box{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 18px 12px;padding:12px 14px;background:var(--active);border:1px solid rgba(139,92,246,.35);border-radius:var(--r);}
.sleep-active-label{font-size:12px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--primary);margin-bottom:3px;}
.sleep-active-remaining{font-size:13px;color:var(--t1);}
.sleep-cancel-btn{flex-shrink:0;padding:6px 12px;border-radius:99px;font-size:12px;font-weight:600;border:1px solid var(--border2);color:var(--t2);background:var(--raised);cursor:pointer;}
.sleep-cancel-btn:hover{background:var(--hover);}
/* Sleep light in player bar */
.sleep-light{font-size:10px;font-weight:700;letter-spacing:.3px;padding:3px 8px;border-radius:99px;background:rgba(99,102,241,.18);border:1px solid rgba(99,102,241,.4);color:var(--primary);white-space:nowrap;}

/* Radio record button */
.radio-rec-btn{color:var(--err,#f38ba8);padding:2px 4px;line-height:1;}
.radio-rec-btn:hover{color:var(--err,#f38ba8);opacity:.8;}
.radio-rec-btn.recording{color:var(--err,#f38ba8);animation:rec-pulse .9s infinite;}
.rec-icon{width:22px;height:22px;display:block;}
@keyframes rec-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.radio-rec-elapsed{font-size:11px;font-weight:700;letter-spacing:.3px;padding:3px 8px;border-radius:99px;background:rgba(243,139,168,.18);border:1px solid rgba(243,139,168,.45);color:var(--err,#f38ba8);white-space:nowrap;font-variant-numeric:tabular-nums;}
.sched-rec-indicator{cursor:pointer;font-size:11px;font-weight:700;letter-spacing:.2px;padding:3px 9px;border-radius:99px;background:rgba(243,139,168,.18);border:1px solid rgba(243,139,168,.55);color:var(--err,#f38ba8);white-space:nowrap;font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:5px;max-width:180px;overflow:hidden;}
.sched-rec-indicator .sri-dot{width:7px;height:7px;border-radius:50%;background:var(--err,#f38ba8);flex-shrink:0;animation:rec-pulse 1.2s ease-in-out infinite;}
.sched-rec-indicator .sri-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* Recording modal */
.rec-modal-box{min-width:340px;max-width:560px;}
.rec-desc-input{width:100%;padding:8px 10px;background:var(--raised);border:1px solid var(--border);border-radius:var(--r);color:var(--t1);font-size:13px;outline:none;transition:border-color .18s;box-sizing:border-box;color-scheme:inherit;}
.rec-desc-input:focus{border-color:var(--primary);}
.modal-select{padding:8px 10px;background:var(--raised);border:1px solid var(--border);border-radius:var(--r);color:var(--t1);font-size:13px;outline:none;cursor:pointer;transition:border-color .15s;}
.rec-modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.6rem;}
.rec-modal-sysdt{font-size:.78rem;color:var(--t2);background:var(--raised);border:1px solid var(--border);border-radius:var(--r);padding:.3rem .7rem;margin-bottom:.75rem;font-variant-numeric:tabular-nums;}
.rec-tabs{display:flex;border-bottom:1px solid var(--border);margin-bottom:.75rem;}
.rec-tab{background:none;border:none;border-bottom:2px solid transparent;padding:.35rem .85rem;font-size:.85rem;color:var(--t2);cursor:pointer;margin-bottom:-1px;transition:color .15s;}
.rec-tab:hover{color:var(--t1);}
.rec-tab.rec-tab-active{color:var(--primary,#cba6f7);border-bottom-color:var(--primary,#cba6f7);font-weight:600;}
.rec-panel-hidden{display:none!important;}
.rec-field{margin-bottom:.6rem;}
.rec-field label{display:block;font-size:.8rem;color:var(--t2);margin-bottom:.2rem;}
.rec-day-btns{display:flex;gap:.3rem;flex-wrap:wrap;margin-top:.2rem;}
.rec-day-btn{display:flex;align-items:center;gap:.25rem;font-size:.78rem;cursor:pointer;padding:.15rem .45rem;border-radius:4px;border:1px solid var(--border);background:var(--raised);}
.rec-day-btn input{margin:0;width:auto;height:auto;}
.rec-sched-item{display:flex;align-items:flex-start;justify-content:space-between;padding:.35rem 0;border-bottom:1px solid var(--border);}
.rec-sched-item:last-child{border-bottom:none;}
.rec-sched-item-info{flex:1;min-width:0;}
.rec-sched-station{display:block;font-size:.82rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rec-sched-when{display:block;font-size:.73rem;color:var(--t3);}
.rec-sched-active-dot{color:var(--err,#f38ba8);animation:rec-pulse .9s infinite;}
.rec-sched-item-actions{display:flex;gap:.3rem;flex-shrink:0;margin-left:.5rem;margin-top:.1rem;}
.btn-xs{font-size:.72rem;padding:.12rem .45rem;border-radius:4px;border:1px solid var(--border);background:var(--raised);cursor:pointer;color:var(--t1);}
.btn-xs-on{background:var(--primary,#cba6f7);border-color:var(--primary,#cba6f7);color:#1e1e2e;}
.btn-xs-del{color:var(--err,#f38ba8);border-color:currentColor;}
.btn-xs-del:hover{background:var(--err,#f38ba8);color:#fff;}

/* ── CONTEXT MENU ──────────────────────────────────────────── */
.ctx-menu{position:fixed;background:var(--card);border:1px solid var(--border2);border-radius:var(--r2);padding:6px;min-width:170px;box-shadow:0 12px 40px rgba(0,0,0,.5);z-index:500;animation:ctx-in .12s ease;}
@keyframes ctx-in{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
.ctx-item{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;border-radius:6px;font-size:13px;color:var(--t1);transition:background .12s;}
.ctx-item:hover{background:var(--hover);}
.ctx-item svg{flex-shrink:0;color:var(--t2);}
.ctx-divider{height:1px;background:var(--border);margin:4px 0;}
.rate-panel{position:fixed;background:var(--card);border:1px solid var(--border2);border-radius:var(--r2);padding:12px 14px;box-shadow:0 12px 40px rgba(0,0,0,.5);z-index:501;display:flex;flex-direction:column;gap:8px;animation:ctx-in .12s ease;}
.rate-stars{display:flex;gap:4px;font-size:22px;cursor:pointer;}
.rate-stars span{color:var(--t4);transition:color .1s;}
.rate-stars span.lit{color:var(--yellow);}
#rate-clear{font-size:11px;color:var(--t3);padding:2px 0;transition:color .14s;}
#rate-clear:hover{color:var(--red);}

/* ── TOAST ─────────────────────────────────────────────────── */
.toast{position:fixed;bottom:calc(var(--player) + 14px);left:50%;transform:translateX(-50%);background:var(--card);border:1px solid var(--border2);padding:9px 18px;border-radius:99px;font-size:13px;font-weight:500;box-shadow:0 8px 28px rgba(0,0,0,.4);z-index:600;animation:toast-in .2s ease;pointer-events:none;}
.toast.toast-error{background:#c0392b;border-color:#e74c3c;color:#fff;}
@keyframes toast-in{from{opacity:0;transform:translateX(-50%) translateY(8px)}}

/* ── CUSTOM TOOLTIP ─────────────────────────────────────────── */
#tip-box{position:fixed;z-index:9999;pointer-events:none;padding:5px 10px;background:var(--raised);border:1px solid var(--border2);border-radius:6px;font-size:12px;font-weight:500;color:var(--t1);box-shadow:0 4px 16px rgba(0,0,0,.45);white-space:nowrap;opacity:0;transform:translateY(4px);transition:opacity .12s ease,transform .12s ease;}
#tip-box.tip-show{opacity:1;transform:translateY(0);}

/* ── DJ SIMILAR STRIP ───────────────────────────────────────── */
.dj-similar-strip{position:fixed;left:var(--sidebar);right:0;bottom:var(--player);height:34px;display:flex;align-items:center;padding:0 14px 0 17px;background:var(--card);border-top:2px solid var(--border);border-left:3px solid var(--primary);box-shadow:0 -4px 20px rgba(109,40,217,.12);z-index:198;pointer-events:none;transform:translateY(100%);opacity:0;transition:transform .3s cubic-bezier(.22,1,.36,1),opacity .35s ease;--strip-dur:30000ms;}
.dj-similar-strip::before{content:'';position:absolute;top:-2px;left:0;height:2px;width:0%;background:var(--primary);border-radius:0 2px 2px 0;}
.dj-similar-strip.dj-strip-in::before{animation:dj-strip-progress var(--strip-dur) linear forwards;}
@keyframes dj-strip-progress{from{width:0%}to{width:100%}}
.dj-similar-strip.dj-strip-in{transform:translateY(0);opacity:1;}
.dj-similar-strip.dj-strip-out{transform:translateY(100%);opacity:0;transition:transform .5s ease,opacity .5s ease;}
/* ── PLAYER BAR POSITION: TOP mode ────────────────────────── */
:root.bar-top #app{grid-template-rows:var(--player) 1fr;grid-template-areas:"side player player" "side main queue";}
:root.bar-top .player{background:linear-gradient(0deg,var(--surface) 0%,var(--raised) 100%);box-shadow:0 1px 0 rgba(139,92,246,.20),0 24px 60px rgba(0,0,0,.45),inset 0 -1px 0 rgba(139,92,246,.14);}
:root.bar-top .dj-similar-strip{top:var(--player);bottom:auto;transform:translateY(-100%);border-top:none;border-bottom:2px solid var(--border);box-shadow:0 4px 20px rgba(109,40,217,.12);}
:root.bar-top .dj-similar-strip::before{top:auto;bottom:-2px;}
:root.bar-top .dj-similar-strip.dj-strip-out{transform:translateY(-100%);}
:root.bar-top #dj-dice{bottom:auto;top:calc(var(--player) + 10px);}
:root.bar-top .toast{bottom:auto;top:calc(var(--player) + 14px);}
.dj-strip-badge{display:none;}
.dj-strip-content{flex:1;min-width:0;display:flex;align-items:center;gap:6px;overflow:hidden;}
.dj-strip-label{font-size:12px;color:var(--t2);white-space:nowrap;flex-shrink:0;}
.dj-strip-label strong{color:var(--t1);font-weight:700;}
.dj-strip-sep{color:var(--t3);font-size:11px;flex-shrink:0;padding:0 2px;}
.dj-strip-queued{color:var(--t1);font-weight:700;font-size:12px;flex-shrink:0;white-space:nowrap;}
.dj-strip-title{color:var(--t2);font-size:11px;font-style:normal;flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0;}
.dj-strip-pills{display:flex;gap:5px;flex-wrap:nowrap;overflow:hidden;min-width:0;flex-shrink:1;padding:2px 1px;}
.dj-strip-pill{font-size:10px;font-weight:500;padding:2px 8px;border-radius:99px;border:1px solid var(--border2);color:var(--t1);white-space:nowrap;flex-shrink:0;}
.dj-strip-note{font-size:11px;color:var(--t3);font-style:italic;white-space:nowrap;}
.dj-strip-center .dj-strip-badge{display:none;}
.dj-strip-center .dj-strip-content{justify-content:center;font-size:13px;}
/* ── DJ STRIP ART ROW ─────────────────────────────────────── */
.dj-strip-art-row{display:flex;align-items:center;gap:12px;padding:10px 0 12px;border-top:1px solid var(--border2);pointer-events:all;}
.dj-strip-art-row.hidden{display:none;}
.dj-art-label{font-size:11px;color:var(--t3);flex-shrink:0;white-space:nowrap;}
.dj-art-choices{display:flex;gap:10px;flex-shrink:0;}
.dj-art-choice{display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;border-radius:6px;padding:4px;border:2px solid transparent;transition:border-color .15s;}
.dj-art-choice:hover{border-color:var(--border2);}
.dj-art-choice.active{border-color:var(--primary);}
.dj-art-thumb{width:120px;height:120px;object-fit:cover;border-radius:4px;display:block;}
.dj-art-embed-btn{display:none;font-size:11px;font-weight:600;padding:4px 14px;border-radius:99px;background:var(--primary);color:#fff;border:none;cursor:pointer;white-space:nowrap;pointer-events:all;}
.dj-art-choice.active .dj-art-embed-btn{display:block;}
.dj-art-note{font-size:10px;color:var(--t3);margin-left:auto;align-self:flex-end;flex-shrink:0;padding-bottom:4px;}
.dj-art-countdown{font-size:11px;font-weight:700;color:var(--primary);padding:2px 8px;border-radius:99px;border:1.5px solid var(--primary);margin-left:10px;flex-shrink:0;min-width:36px;text-align:center;font-variant-numeric:tabular-nums;}

/* ── NOW PLAYING MODAL ─────────────────────────────────────── */
.np-modal-box{
  position:relative;
  display:flex;                  /* flex row: [art panel | info panel] */
  width:min(820px,96vw);max-height:94vh;
  border-radius:20px;overflow:hidden;
  background:var(--surface);border:1px solid var(--border2);
  box-shadow:0 40px 100px rgba(0,0,0,.75),0 0 80px rgba(139,92,246,.1);
}
.np-close{
  position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;z-index:20;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.5);backdrop-filter:blur(8px);
  color:rgba(255,255,255,.8);transition:background .15s,color .15s;
}
.np-close:hover{background:rgba(255,255,255,.2);color:#fff;}
/* Left panel: blurred glow bg + centred square art */
.np-left{
  position:relative;width:300px;flex-shrink:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;padding:28px 24px 20px;background:#0a0a12;overflow:hidden;
}
/* Full-bleed blurred version of the same art fills the panel */
.np-art-blur{
  position:absolute;inset:-12%;
  background-size:cover;background-position:center;
  filter:blur(44px) brightness(0.28) saturate(1.9);
  transform:scale(1.18);pointer-events:none;z-index:0;
}
/* The actual art: always a PERFECT SQUARE via aspect-ratio */
.np-art{
  position:relative;z-index:1;
  width:100%;aspect-ratio:1/1;
  border-radius:14px;overflow:hidden;
  background:var(--card);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  box-shadow:0 28px 70px rgba(0,0,0,.8),0 8px 24px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.06);
}
.np-art img{width:100%;height:100%;object-fit:cover;display:block;}
/* Discogs cover art picker inside NP modal */
.np-discogs-section{position:relative;z-index:1;width:100%;display:flex;flex-direction:column;align-items:center;gap:0;}
.np-discogs-section.hidden{display:none;}
.np-discogs-btn{background:transparent;border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.55);font-size:11px;font-weight:500;padding:7px 14px;border-radius:99px;cursor:pointer;width:100%;transition:border-color .15s,color .15s;display:flex;align-items:center;justify-content:center;gap:6px;pointer-events:all;}
.np-discogs-btn:hover{border-color:var(--primary);color:var(--primary);}
:root.light .np-discogs-btn{border-color:var(--border2);color:var(--t2);}
:root.light .np-discogs-btn:hover{border-color:var(--primary);color:var(--primary);}
/* ── picking state: art hidden, choices full-panel ── */
.np-left.np-left--picking{justify-content:flex-start;overflow-y:auto;padding-top:16px;}
.np-left.np-left--picking .np-art{display:none;}
.np-left.np-left--picking .np-art-blur{opacity:0;}
.np-left.np-left--picking .np-discogs-section{flex:1;gap:8px;}
.np-discogs-pick-header{display:flex;align-items:center;justify-content:space-between;width:100%;margin-bottom:4px;}
.np-discogs-pick-title{font-size:11px;color:rgba(255,255,255,.5);font-weight:600;letter-spacing:.04em;text-transform:uppercase;}
.np-discogs-cancel{font-size:11px;font-weight:500;color:rgba(255,255,255,.55);background:transparent;border:1px solid rgba(255,255,255,.2);cursor:pointer;padding:7px 14px;border-radius:99px;pointer-events:all;width:100%;display:flex;align-items:center;justify-content:center;transition:border-color .15s,color .15s;}
.np-discogs-cancel:hover{border-color:var(--primary);color:var(--primary);}
:root.light .np-discogs-cancel{border-color:var(--border2);color:var(--t2);}
:root.light .np-discogs-cancel:hover{border-color:var(--primary);color:var(--primary);}
.np-discogs-choices{display:flex;flex-direction:column;gap:10px;width:100%;}
.np-discogs-thumb{width:100%;aspect-ratio:1/1;height:auto;object-fit:cover;border-radius:10px;cursor:pointer;border:3px solid transparent;transition:border-color .15s,opacity .2s,transform .12s;pointer-events:all;display:block;}
.np-discogs-thumb:hover{border-color:var(--primary);transform:scale(1.02);}
.np-discogs-thumb.selected{border-color:var(--primary);opacity:0.5;}
.np-discogs-note{font-size:10px;color:rgba(255,255,255,.25);text-align:center;margins:4px 0 0;}
.np-discogs-status{font-size:11px;color:rgba(255,255,255,.4);text-align:center;display:block;padding:4px 0;}
/* embedding spinner overlay */
@keyframes np-spin{to{transform:rotate(360deg)}}
@keyframes np-pulse-txt{0%,100%{opacity:.6}50%{opacity:1}}
.np-left--embedding{pointer-events:none;}
.np-left--embedding .np-discogs-section{display:flex!important;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:14px;}
.np-embed-spinner{width:36px;height:36px;border:3px solid rgba(127,90,240,.25);border-top-color:var(--primary);border-radius:50%;animation:np-spin .8s linear infinite;}
.np-embed-label{font-size:12px;font-weight:500;color:rgba(255,255,255,.8);animation:np-pulse-txt 1.6s ease-in-out infinite;text-align:center;}
.np-id3-edit-btn{background:transparent;border:1px solid rgba(127,90,240,.35);color:var(--primary);font-size:11px;font-weight:500;padding:6px 14px;border-radius:99px;cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:border-color .15s,background .15s;margin-top:10px;}
.np-id3-edit-btn:hover{background:rgba(127,90,240,.12);border-color:var(--primary);}
:root.light .np-id3-edit-btn{border-color:var(--border2);}
/* URL paste input row */
.np-url-paste-row{display:flex;gap:6px;margin-top:4px;align-items:stretch;}
.np-url-paste-inp{flex:1;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:6px;color:var(--t1);font-size:11px;padding:5px 9px;outline:none;transition:border-color .15s;min-width:0;}
.np-url-paste-inp:focus{border-color:var(--primary);}
:root.light .np-url-paste-inp{background:rgba(0,0,0,.05);border-color:var(--border2);}
.np-url-paste-go{background:var(--primary);border:none;border-radius:6px;color:#fff;font-size:11px;font-weight:600;padding:5px 12px;cursor:pointer;white-space:nowrap;transition:opacity .15s;}
.np-url-paste-go:hover{opacity:.85;}
.np-url-paste-preview-wrap{display:block;margin-top:10px;text-align:center;}
.np-url-paste-preview-wrap.hidden{display:none;}
.np-url-paste-preview{max-width:100%;max-height:160px;border-radius:6px;object-fit:contain;border:1px solid rgba(255,255,255,.1);}
:root.light .np-url-paste-preview{border-color:var(--border2);}
.np-id3-form{display:flex;flex-direction:column;gap:6px;padding:10px 0 4px;}
.np-id3-row{display:grid;grid-template-columns:52px 1fr;align-items:center;gap:6px;}
.np-id3-lbl{font-size:10px;color:var(--t2);font-weight:600;letter-spacing:.03em;text-transform:uppercase;}
.np-id3-inp{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:5px;color:var(--t1);font-size:12px;padding:4px 8px;outline:none;transition:border-color .15s;width:100%;box-sizing:border-box;}
.np-id3-inp:focus{border-color:var(--primary);}
:root.light .np-id3-inp{background:rgba(0,0,0,.05);border-color:var(--border2);}
.np-id3-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px;}
/* Right panel: scrollable info */
.np-right{
  flex:1;min-width:0;
  display:flex;flex-direction:column;gap:18px;
  padding:42px 32px 28px;overflow-y:auto;max-height:94vh;
  scrollbar-width:thin;
}
.np-info{position:relative;width:100%;}
.np-title{
  font-size:24px;font-weight:800;line-height:1.25;letter-spacing:-.5px;
  color:var(--t1);margin-bottom:8px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.np-artist{font-size:15px;color:var(--t2);margin-bottom:3px;}
.np-album{font-size:13px;color:var(--t3);}
.np-rate-row{display:flex;align-items:center;gap:16px;}
.np-rate-row .rate-stars{font-size:28px;gap:8px;display:flex;}
#np-rate-clear{font-size:12px;color:var(--t3);padding:2px 4px;transition:color .14s;white-space:nowrap;}
#np-rate-clear:hover{color:var(--red);}
.np-rate-row .rate-stars span{color:rgba(255,255,255,.08);transition:color .12s;cursor:pointer;}
.np-rate-row .rate-stars span:hover{color:rgba(255,255,255,.35);}
.np-rate-row .rate-stars span.lit{color:var(--yellow);}
.np-scrobble-status{font-size:12.5px;padding:2px 0;min-height:1.5em;opacity:0;transition:opacity .8s ease;}
.np-scrobble-ok{opacity:1;color:#7ecb7e;}
.np-scrobble-err{opacity:1;color:var(--red,#e05a5a);}
.np-progress{display:flex;align-items:center;gap:10px;width:100%;position:relative;cursor:none;}
/* Time spans are clickable — restore cursor despite the cursor:none on the container */
#np-time-cur,#np-time-total{cursor:pointer;}
.np-progress span{font-size:12px;color:var(--t2);flex-shrink:0;min-width:40px;cursor:pointer;user-select:none;}
.np-progress span:last-child{text-align:right;}
.np-controls{display:flex;align-items:center;justify-content:center;gap:20px;}
.np-controls .ctrl-nav{width:54px;height:54px;opacity:.9;}
.np-play-main{width:68px!important;height:68px!important;box-shadow:0 0 0 0 var(--primary-g);}
.np-play-main:hover{box-shadow:0 0 0 10px var(--primary-d),0 6px 24px rgba(139,92,246,.5)!important;}
/* Metadata table */
.np-meta{
  width:100%;border-top:1px solid var(--border);padding-top:16px;
  display:grid;grid-template-columns:auto 1fr;gap:6px 16px;align-items:baseline;
}
.np-meta-k{
  font-size:10px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;
  color:var(--t3);white-space:nowrap;padding:2px 0;
}
.np-meta-v{
  font-size:12.5px;color:var(--t1);padding:2px 0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.np-meta-v.dim{color:var(--t3);font-size:11px;}
/* File path block — full width, monospace, wraps freely */
.np-filepath{
  border-top:1px solid var(--border);padding-top:14px;
  display:flex;flex-direction:column;gap:5px;
}
.np-fp-label{
  font-size:10px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;
  color:var(--t3);
}
.np-fp-path{
  font-size:11.5px;font-family:ui-monospace,'Cascadia Code','Fira Mono',monospace;
  line-height:1.65;word-break:break-all;
  background:var(--raised);border:1px solid var(--border);
  border-radius:var(--r);padding:9px 11px;
}
.np-fp-dir{color:var(--t3);}
.np-fp-sep{color:var(--t2);margin:0 1px;}
.np-fp-file{color:var(--t1);font-weight:600;}
.np-viz-btn{
  width:100%;padding:12px;border-radius:var(--r);font-size:13px;font-weight:600;
  display:flex;align-items:center;justify-content:center;gap:7px;margin-top:auto;
  background:rgba(139,92,246,.12);color:var(--primary);border:1px solid rgba(139,92,246,.3);
  transition:background .18s,color .18s;cursor:pointer;
}
.np-viz-btn:hover{background:var(--primary);color:#fff;}

/* ── EQUALIZER PANEL ───────────────────────────────────── */
.eq-panel{
  position:fixed;bottom:76px;
  /* default: center in main column when queue is collapsed */
  left:calc(var(--sidebar)/2 + 50vw);transform:translateX(-50%) translateY(14px);
  width:min(700px,96vw);background:var(--surface);border:1px solid var(--border);
  border-radius:16px;padding:16px 20px 20px;
  box-shadow:0 -2px 40px rgba(0,0,0,.55);z-index:500;
  opacity:0;transition:opacity .22s,transform .22s;pointer-events:none;
}
/* when queue panel is open, shift center left to exclude its width */
#queue-panel:not(.collapsed) ~ #eq-panel{
  left:calc(var(--sidebar)/2 + 50vw - var(--qp-width)/2);
}
.eq-panel.open{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:all;}
.eq-panel.hidden{display:none!important;}
.eq-header{
  display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap;
}
.eq-title{
  font-size:13px;font-weight:700;color:var(--t1);letter-spacing:.3px;white-space:nowrap;
}
.eq-presets{
  display:flex;gap:5px;flex-wrap:wrap;flex:1;
}
.eq-preset-btn{
  padding:4px 10px;border-radius:99px;font-size:11px;font-weight:600;
  background:var(--raised);color:var(--t2);border:1px solid var(--border);
  cursor:pointer;transition:background .14s,color .14s,border-color .14s;
  white-space:nowrap;
}
.eq-preset-btn:hover{background:var(--hover);color:var(--t1);}
.eq-preset-btn.active{background:var(--primary-d);color:var(--primary);border-color:var(--primary-g);}
.eq-bypass-wrap{
  display:flex;align-items:center;gap:6px;flex-shrink:0;cursor:pointer;margin-left:auto;
}
.eq-bypass-text{font-size:11px;color:var(--t3);white-space:nowrap;}
.eq-bypass-track{
  position:relative;width:30px;height:17px;border-radius:99px;flex-shrink:0;
  background:var(--border2);border:1px solid var(--border2);transition:background .22s;
}
.eq-bypass-track.lit{background:var(--primary);border-color:var(--primary);}
.eq-bypass-thumb{
  position:absolute;top:2px;left:2px;width:11px;height:11px;border-radius:50%;
  background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.3);transition:transform .22s cubic-bezier(.34,1.56,.64,1);
}
.eq-bypass-track.lit .eq-bypass-thumb{transform:translateX(13px);}
.eq-close-btn{
  width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;
  font-size:13px;color:var(--t3);background:transparent;transition:background .14s,color .14s;
  flex-shrink:0;
}
.eq-close-btn:hover{background:var(--raised);color:var(--t1);}
/* Sliders row */
.eq-sliders{
  display:flex;justify-content:space-between;gap:4px;
}
.eq-band{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  flex:1;min-width:0;
}
.eq-db{
  font-size:10px;font-weight:600;min-height:14px;white-space:nowrap;
}
.eq-slider-wrap{
  flex:1;display:flex;align-items:center;justify-content:center;
  height:92px;
}
.eq-slider{
  writing-mode:vertical-lr;direction:rtl;
  width:22px;height:88px;cursor:pointer;accent-color:var(--primary);
}
.eq-freq{
  font-size:10px;color:var(--t3);white-space:nowrap;
}
/* EQ button active state (non-flat settings applied) */
.ctrl-btn.eq-active{color:var(--primary);}
.ctrl-btn.eq-active svg{filter:drop-shadow(0 0 3px var(--primary-g));}

/* Tablet / Safari iPad desktop mode (landscape ~1366 px) */
@media(max-width:1366px){
  :root,:root.dark,:root.light{--qp-width:280px;--sidebar:200px;}
}
/* Responsive: shrink VU column on medium screens */
@media(max-width:1024px){
  :root,:root.dark,:root.light{--qp-width:280px;--sidebar:200px;}
  .player{padding:8px 12px 0 12px;column-gap:10px;}
  .player-thumb{width:64px;height:64px;}
  .player-controls{gap:3px;}
  .ctrl-sm{width:28px;height:28px;}
  .ctrl-nav{width:34px;height:34px;}
  #shuffle-btn,#repeat-btn{height:26px;padding:0 8px;}
  .ctrl-transport{margin-right:12px;gap:4px;}
  .play-main{width:42px;height:42px;}
  .vol-wrap{max-width:none;}
  .pright-btn{width:34px;height:34px;}
  .eq-panel{width:min(640px,98vw);}
}
@media(max-width:860px){
  /* Hide VU column on small screens */
  .vu-spec-row{display:none;}
  .player{grid-template-columns:minmax(0,1fr) auto;}
  .player-progress,.player-right{grid-column:1/-1;}
}
/* Large / TV screens — expand sidebar and increase base sizes for comfortable viewing */
@media(min-width:1600px){
  :root,:root.dark,:root.light{--sidebar:260px;}
  .player-title{font-size:20px;}
  .player-artist{font-size:16px;}
  .nav-btn{font-size:14px;padding:9px 12px;}
  .vu-spec-row{height:130px;}
}
@media(max-width:600px){
  .song-row.mp-row{grid-template-columns:36px 48px 1fr auto auto auto;}
  .mp-bar-track{display:none;}
  .mp-count-cell{width:auto;}
  .np-modal-box{flex-direction:column;border-radius:16px;max-height:95vh;overflow-y:auto;}
  .np-left{width:100%;padding:28px 28px 20px;}
  .np-art{width:min(220px,55vw);margin:0 auto;}
  .np-right{max-height:none;padding:20px 20px 16px;gap:14px;}
  .np-title{font-size:20px;}
}

/* ── VISUALIZER OVERLAY ──────────────────────────────────── */
.viz-overlay{
  position:fixed;inset:0;z-index:900;background:#000;
  display:flex;flex-direction:column;
}
.viz-canvas{flex:1;display:block;width:100%;min-height:0;}
.spec-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;background:#000;z-index:1;}
.am-container{position:absolute;inset:0;width:100%;height:100%;z-index:1;background:#000;cursor:pointer;}
.am-container canvas{width:100%!important;height:100%!important;}
/* When spec-canvas is active it overlays the butterchurn canvas */
.viz-bar{
  position:absolute;top:0;left:0;right:0;z-index:2;
  display:flex;align-items:center;gap:8px;padding:12px 16px;
  background:linear-gradient(180deg,rgba(0,0,0,.72) 0%,transparent 100%);
  opacity:0;transition:opacity .22s;
}
.viz-overlay:hover .viz-bar,.viz-overlay:focus-within .viz-bar{opacity:1;}
.viz-btn{display:flex;align-items:center;justify-content:center;padding:6px 10px;border-radius:6px;color:#fff;background:rgba(255,255,255,.1);transition:background .15s;flex-shrink:0;font-size:12px;outline:none;}
.viz-btn:hover{background:rgba(255,255,255,.24);}
.viz-btn:active{transform:none;}
.viz-mode-btn{border:1px solid rgba(255,255,255,.18);}
.viz-mode-btn:hover{background:rgba(109,60,230,.5);border-color:rgba(109,60,230,.8);}
#viz-mode-label{font-size:12px;font-weight:600;white-space:nowrap;}
.viz-preset-name{flex:1;font-size:11px;color:rgba(255,255,255,.7);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;cursor:default;}
.viz-song{
  position:absolute;bottom:0;left:0;right:0;z-index:2;
  padding:20px 20px 20px;
  background:linear-gradient(0deg,rgba(0,0,0,.7) 0%,transparent 100%);
  opacity:0;transition:opacity .22s;pointer-events:none;
}
.viz-overlay:hover .viz-song{opacity:1;}
.viz-song-title{font-size:18px;font-weight:700;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.6);}
.viz-song-artist{font-size:13px;color:rgba(255,255,255,.7);margin-top:3px;text-shadow:0 1px 6px rgba(0,0,0,.5);}

/* ── VIZ LYRIC MODE ─────────────────────────────────────────── */
.viz-lyric-mode{
  position:absolute;inset:0;z-index:1;
  display:flex;align-items:stretch;
  background:#000;
}
/* Left: blurred art */
.vlm-art-wrap{
  position:relative;
  flex:0 0 40%;max-width:460px;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.vlm-art-blur{
  position:absolute;inset:-20px;
  background-size:cover;background-position:center;
  filter:blur(28px) brightness(.45);
  transform:scale(1.05);
}
.vlm-art{
  position:relative;z-index:1;
  width:min(320px,80%);aspect-ratio:1/1;
  border-radius:10px;overflow:hidden;box-shadow:0 8px 40px rgba(0,0,0,.7);
}
.vlm-art img{width:100%;height:100%;object-fit:cover;display:block;}
/* Right: scrolling lines */
.vlm-lines{
  flex:1;min-width:0;
  overflow-y:auto;
  display:flex;flex-direction:column;
  padding:40vh 48px 40vh 40px;
  scrollbar-width:none;
}
.vlm-lines::-webkit-scrollbar{display:none;}
.vlm-line{
  font-size:26px;line-height:1.55;font-weight:600;
  color:rgba(255,255,255,.28);
  transition:font-size .25s,transform .25s;
  cursor:default;white-space:pre-wrap;padding:2px 0;
}
.vlm-line.vlm-active{
  font-size:72px;
  color:#fff;
  text-shadow:0 0 24px var(--primary,#6d3ce6);
  transform:translateX(6px);
}
.vlm-no-lyrics{
  color:rgba(255,255,255,.35);font-size:16px;font-style:italic;text-align:center;
  padding:40px 20px;
}
/* Mobile: stack art above lyrics */
@media(max-width:600px){
  .viz-lyric-mode{flex-direction:column;}
  .vlm-art-wrap{flex:0 0 38%;max-width:none;width:100%;}
  .vlm-art{width:min(200px,60%);}
  .vlm-lines{padding:24px 20px 60px;justify-content:flex-start;}
  .vlm-line{font-size:20px;}
  .vlm-line.vlm-active{font-size:48px;}
}



/* ── UPLOAD ─────────────────────────────────────────────────── */
.upload-modal-box{max-width:520px!important;}
.fe-upload-btn{display:flex;align-items:center;gap:5px;padding:5px 10px;border-radius:var(--r);background:var(--primary-d);color:var(--primary);border:1px solid rgba(139,92,246,.35);font-size:12px;font-weight:600;cursor:pointer;flex-shrink:0;transition:background .15s,color .15s;}
.fe-upload-btn:hover{background:var(--primary);color:#fff;}
.upload-drop-zone{border:2px dashed var(--border2);border-radius:var(--r);padding:28px 20px;text-align:center;font-size:13px;color:var(--t2);cursor:pointer;transition:border-color .18s,background .18s;margin-bottom:10px;}
.upload-drop-zone.drag-over{border-color:var(--primary);background:var(--primary-d);}
.upload-browse-lbl{color:var(--primary);cursor:pointer;text-decoration:underline;}
.upload-file-list{display:flex;flex-direction:column;gap:5px;max-height:220px;overflow-y:auto;margin-bottom:4px;}
.upload-file-item{display:flex;flex-direction:column;padding:7px 10px;background:var(--raised);border-radius:var(--r);font-size:12px;gap:4px;}
.upload-file-row{display:flex;align-items:center;gap:8px;}
.upload-file-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--t1);}
.upload-file-size{color:var(--t3);flex-shrink:0;}
.upload-file-remove{color:var(--t3);cursor:pointer;flex-shrink:0;line-height:1;}
.upload-file-remove:hover{color:var(--red);}
.upload-file-status{font-size:13px;flex-shrink:0;}
.upload-progress{height:3px;background:var(--border);border-radius:2px;overflow:hidden;}
.upload-progress-bar{height:100%;background:var(--primary);border-radius:2px;width:0%;transition:width .15s;}

/* ── WAVEFORM STATUS LINE ───────────────────────────────────── */
/* Lives as first child of .player-right; margin-right:auto pushes vol/balance right */
.wf-status{
  font-size:11px;
  font-weight:700;
  letter-spacing:.8px;
  text-transform:uppercase;
  color:var(--t2);
  white-space:nowrap;
  align-self:flex-start;  /* top of player-right = same row as BALANCE/VOLUME labels */
  margin-top:3px;         /* matches the 2px top padding + slight optical offset */
  margin-right:auto;      /* shoves vol/balance controls to the far right */
  padding-left:44px;      /* aligns with the start of the progress bar track */
  opacity:0;
  transition:opacity .3s;
  pointer-events:none;
}
.wf-status.visible{ opacity:1; }

/* ── WAVEFORM SCRUBBER ──────────────────────────────────────── */
/* Canvas overlays the prog-track, extends vertically beyond the 5px bar, sits ABOVE fill */
.waveform-canvas{
  position:absolute;
  left:0;
  top:50%;
  width:100%;                 /* canvas is a replaced element — must set width explicitly */
  height:48px;
  transform:translateY(-50%);
  pointer-events:none;
  z-index:2;                  /* above fill(z:1) so waves are always visible */
  border-radius:4px;
}
/* Fill stays below canvas; thumb (now a direct child of prog-track) must be above canvas */
#prog-fill{position:relative;z-index:1;}
/* Thumb is a sibling of prog-fill — JS sets left:pct%; transform centres it on that point */
#prog-thumb{
  position:absolute;
  left:0;right:auto;
  top:50%;
  transform:translateX(-50%) translateY(-50%);
  z-index:4;                  /* above canvas(z:2) and cue-markers(z:3) */
}
.prog-track:hover #prog-thumb{width:15px;height:15px;box-shadow:0 1px 10px var(--primary-g);}
/* When waveform data is loaded the canvas shows played/unplayed — hide the plain gradient bar */
.prog-track.wf-active #prog-fill{background:transparent;}

/* ── GENRE VIEW ─────────────────────────────────────────────── */
.genre-sections{padding:16px 16px 8px;display:flex;flex-direction:column;gap:8px;}
.genre-section{border:1px solid var(--border);border-radius:var(--r2);overflow:hidden;background:var(--surface);}
.genre-section-head{display:flex;align-items:center;gap:8px;width:100%;padding:10px 14px;background:var(--raised);border:none;cursor:pointer;text-align:left;color:var(--t1);transition:background .15s;}
.genre-section-head:hover{background:var(--hover);}
.genre-section-name{font-size:13px;font-weight:700;flex:1;}
.genre-section-count{font-size:11px;color:var(--t3);background:var(--surface);border-radius:99px;padding:1px 8px;border:1px solid var(--border);}
.genre-section-chevron{color:var(--t3);transition:transform .2s;flex-shrink:0;}
.genre-section:not(.collapsed) .genre-section-chevron{transform:rotate(180deg);}
.genre-section.collapsed .genre-grid{display:none;}
.genre-grid{display:flex;flex-wrap:wrap;gap:10px;padding:14px;}
.genre-chip{display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--surface);border:1px solid var(--border);border-radius:99px;font-size:13px;font-weight:500;color:var(--t1);cursor:pointer;transition:background .15s,border-color .15s;}
.genre-chip:hover{background:var(--primary-d);border-color:var(--primary);color:var(--primary);}
.genre-cnt{font-size:11px;color:var(--t3);background:var(--raised);border-radius:99px;padding:1px 7px;}

/* ── DECADE VIEW ────────────────────────────────────────────── */
.decade-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px;padding:20px;}
.decade-card{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:20px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r2);font-size:22px;font-weight:700;color:var(--t1);cursor:pointer;transition:background .15s,transform .15s,box-shadow .15s;}
.decade-card:hover{background:var(--primary-d);border-color:var(--primary);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.35);}
.decade-stat{font-size:11px;font-weight:400;color:var(--t3);}

/* ── Browse tabs (Decades / Genres detail view) ──────────────── */
.content-body.browse-mode{padding:0;display:flex;flex-direction:column;overflow:hidden;}
.browse-tabs{display:flex;gap:6px;padding:14px 20px 10px;flex-shrink:0;border-bottom:1px solid var(--border);}
.browse-tab{display:inline-flex;align-items:center;gap:6px;padding:6px 16px;border-radius:99px;font-size:12px;font-weight:600;cursor:pointer;border:1px solid var(--border);background:var(--raised);color:var(--t2);transition:background .14s,color .14s,border-color .14s;white-space:nowrap;}
.browse-tab.active{background:var(--primary-d);color:var(--primary);border-color:var(--primary-g);}
.browse-tab:hover:not(.active){background:var(--hover);color:var(--t1);}
.browse-cnt{font-size:10px;font-weight:500;opacity:.7;}
.browse-tab-group{display:flex;gap:6px;}
.browse-filter-wrap{margin-left:auto;display:flex;align-items:center;gap:4px;}
.browse-filter-input{background:var(--surface);border:1px solid var(--border2);border-radius:var(--r);padding:5px 10px;color:var(--t1);font-size:12px;font-family:inherit;width:150px;transition:border-color .14s,width .2s;}
.browse-filter-input:focus{outline:none;border-color:var(--primary);width:210px;}
.browse-filter-input::placeholder{color:var(--t2);}
.browse-filter-clear{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-size:14px;line-height:1;color:var(--t3);background:var(--raised);border:1px solid var(--border);cursor:pointer;transition:background .14s,color .14s;flex-shrink:0;}
.browse-filter-clear:hover{background:var(--hover);color:var(--t1);}
.browse-filter-clear.hidden{display:none;}
#browse-content{flex:1;overflow-y:auto;min-height:0;padding:16px 20px;}
#browse-content .album-grid{padding:0;}
#browse-content.tracks-mode{padding:0;display:flex;flex-direction:column;overflow:hidden;}
.sort-bar{display:flex;align-items:center;gap:6px;padding:10px 20px;flex-shrink:0;border-bottom:1px solid var(--border);flex-wrap:wrap;}
.sort-bar-label{font-size:11px;color:var(--t3);text-transform:uppercase;letter-spacing:.5px;margin-right:2px;}
.sort-pill{display:inline-flex;align-items:center;gap:3px;padding:4px 12px;border-radius:99px;font-size:12px;font-weight:500;cursor:pointer;border:1px solid var(--border);background:var(--raised);color:var(--t2);transition:background .14s,color .14s,border-color .14s;}
.sort-pill.active{background:var(--primary-d);color:var(--primary);border-color:var(--primary-g);}
.sort-pill:hover:not(.active){background:var(--hover);color:var(--t1);}
.sort-dir{font-size:10px;opacity:.8;}
.vslist-wrap{flex:1;min-height:0;overflow-y:auto;contain:strict;}
.vslist-wrap .song-list{padding:0 8px;}
.settings-input{background:var(--raised);border:1px solid var(--border2);border-radius:var(--r);padding:7px 10px;color:var(--t1);font-size:13px;width:100%;font-family:inherit;}
.settings-input:focus{outline:none;border-color:var(--primary);}
.btn-primary{display:inline-flex;align-items:center;gap:6px;padding:10px 22px;background:var(--primary);color:#fff;border:none;border-radius:var(--r);font-size:13px;font-weight:600;cursor:pointer;margin-top:8px;transition:background .15s;}
.btn-primary:hover{background:var(--primary-h);}
.btn-primary:disabled{opacity:.55;cursor:default;}
/* ── Radio Streams ─────────────────────────────────── */
.rs-full{grid-column:1/-1;}
.rs-filter-row{display:flex;align-items:center;gap:6px;padding:6px 18px 8px;flex-wrap:wrap;}
.rs-filter-label{font-size:11px;color:var(--t3);text-transform:uppercase;letter-spacing:.06em;margin-right:4px;}
.rs-pill{background:var(--raised);border:1px solid var(--border2);border-radius:20px;padding:3px 11px;font-size:12px;color:var(--t2);cursor:pointer;transition:background .14s,color .14s,border-color .14s;}
.rs-pill:hover{background:var(--hover);color:var(--t1);}
.rs-pill-active{background:var(--primary-d);color:var(--primary);border-color:rgba(139,92,246,.4);font-weight:600;}
.rs-pill-clear{background:transparent;border-color:transparent;color:var(--t3);}
.rs-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:10px;padding:12px 18px 18px;}
.rs-row{display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 10px 9px;border:1px solid var(--border);border-radius:var(--r);background:var(--raised);position:relative;transition:background .12s,box-shadow .12s;cursor:default;}
.rs-row:hover{background:var(--hover);box-shadow:0 0 0 1px var(--border2);}
.rs-card-art{width:72px;height:72px;flex-shrink:0;}
.rs-card-art img{width:72px!important;height:72px!important;border-radius:8px;object-fit:cover;display:block;}
.rs-card-art>div{width:72px!important;height:72px!important;border-radius:8px!important;}
.rs-drag-handle{position:absolute;top:5px;right:5px;display:none;align-items:center;justify-content:center;width:18px;height:18px;cursor:grab;color:var(--t3);opacity:.45;}
.rs-drag-handle:hover{opacity:1;}
.rs-list--sortable .rs-drag-handle{display:flex;}
.rs-row.rs-dragging{opacity:.3;}
.rs-row.rs-drag-over-left{box-shadow:-3px 0 0 0 var(--primary),0 0 0 1px var(--border2);}
.rs-row.rs-drag-over-right{box-shadow:3px 0 0 0 var(--primary),0 0 0 1px var(--border2);}
.rs-info{width:100%;text-align:center;min-width:0;}
.rs-name{font-size:13px;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rs-meta{font-size:11px;color:var(--t2);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rs-meta span{display:inline;}
.rs-actions{display:flex;align-items:center;justify-content:center;gap:4px;width:100%;}
.rs-queue-notice{margin:10px 18px 14px;padding:8px 12px;border-radius:var(--r);background:var(--raised);border:1px solid var(--border);font-size:12px;color:var(--t1);text-align:center;}
/* ── Smart Playlists ───────────────────────────────────────────── */
.spl-builder{padding:14px 18px 24px;max-width:720px;}
.spl-section{margin-bottom:18px;}
.spl-row-2{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
@media(max-width:520px){.spl-row-2{grid-template-columns:1fr;}}
.spl-section-title{font-size:.76rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--t3);margin-bottom:7px;}
.spl-hint{font-weight:400;text-transform:none;letter-spacing:0;margin-left:4px;}
.spl-genre-groups{display:flex;flex-direction:column;gap:5px;}
.spl-genre-group{border:1px solid var(--border);border-radius:var(--r2);overflow:hidden;}
.spl-genre-group-head{display:flex;align-items:stretch;background:var(--raised);}
.spl-genre-group-select{display:flex;align-items:center;gap:7px;flex:1;padding:7px 8px 7px 12px;background:none;border:none;cursor:pointer;text-align:left;color:var(--t1);transition:background .12s;}
.spl-genre-group-select:hover{background:var(--hover);}
.spl-genre-group-select.all-active{background:color-mix(in srgb,var(--primary) 12%,transparent);}
.spl-genre-group-select.all-active .spl-genre-group-name{color:var(--primary);}
.spl-genre-group-name{font-size:12px;font-weight:700;flex:1;}
.spl-genre-group-badge{font-size:10px;font-weight:700;background:var(--primary);color:#fff;border-radius:99px;padding:0 7px;line-height:18px;min-width:18px;text-align:center;}
.spl-genre-group-total{font-size:10px;color:var(--t3);}
.spl-genre-group-chevron-btn{display:flex;align-items:center;justify-content:center;padding:0 11px;background:none;border:none;border-left:1px solid var(--border);cursor:pointer;color:var(--t3);transition:background .12s;}
.spl-genre-group-chevron-btn:hover{background:var(--hover);}
.spl-genre-group-chevron-btn svg{transition:transform .2s;}
.spl-genre-group:not(.collapsed) .spl-genre-group-chevron-btn svg{transform:rotate(180deg);}
.spl-genre-group.collapsed .spl-genre-group-chips{display:none;}
.spl-genre-group-chips{display:flex;flex-wrap:wrap;gap:6px;padding:8px 12px 10px;background:var(--surface);}
.spl-genre-chip{padding:4px 10px;border-radius:20px;border:1px solid var(--border);background:var(--raised);color:var(--t2);font-size:.8rem;cursor:pointer;transition:background .12s,color .12s,border-color .12s;}
.spl-genre-chip:hover{background:var(--hover);color:var(--t1);}
.spl-genre-chip.active{background:var(--primary);border-color:var(--primary);color:#fff;}
.spl-year-row{display:flex;align-items:center;gap:8px;}
.spl-year-inp{width:90px;padding:5px 8px;border:1px solid var(--border);border-radius:var(--r);background:var(--raised);color:var(--t1);font-size:.85rem;}
.spl-year-inp:focus{outline:none;border-color:var(--primary);}
.spl-year-sep{color:var(--t3);}
.spl-rating-row{display:flex;gap:5px;}
.spl-rating-opt{padding:5px 9px;border-radius:var(--r);border:1px solid var(--border);background:var(--raised);color:var(--t2);font-size:.85rem;cursor:pointer;transition:background .12s,color .12s;}
.spl-rating-opt:first-child{font-size:.78rem;}
.spl-rating-opt:hover{background:var(--hover);}
.spl-rating-opt.active{background:var(--primary);border-color:var(--primary);color:#fff;}
.spl-status-pills{display:flex;flex-wrap:wrap;align-items:center;gap:6px;}
.spl-status-pill{padding:5px 12px;border-radius:20px;border:1px solid var(--border);background:var(--raised);color:var(--t2);font-size:.8rem;cursor:pointer;transition:background .12s,color .12s;}
.spl-status-pill:hover{background:var(--hover);}
.spl-status-pill.active{background:var(--primary);border-color:var(--primary);color:#fff;}
.spl-minpc-inp{width:70px;padding:5px 8px;border:1px solid var(--border);border-radius:var(--r);background:var(--raised);color:var(--t1);font-size:.85rem;}
.spl-minpc-inp:focus{outline:none;border-color:var(--primary);}
.spl-minpc-inp.hidden{display:none;}
.spl-text-inp{width:100%;padding:6px 9px;border:1px solid var(--border);border-radius:var(--r);background:var(--raised);color:var(--t1);font-size:.85rem;box-sizing:border-box;}
.spl-text-inp:focus{outline:none;border-color:var(--primary);}
.spl-starred-wrap{display:flex;align-items:flex-end;padding-bottom:6px;}
.spl-starred-label{display:flex;align-items:center;gap:7px;font-size:.85rem;color:var(--t1);cursor:pointer;user-select:none;}
.spl-select{width:100%;padding:6px 9px;border:1px solid var(--border);border-radius:var(--r);background:var(--raised);color:var(--t1);font-size:.85rem;}
.spl-select:focus{outline:none;border-color:var(--primary);}
.spl-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:4px;}
.spl-match-count{flex:1;font-size:.82rem;color:var(--t2);}
.spl-btn-run,.spl-btn-save{padding:7px 18px;border-radius:var(--r);border:none;font-size:.85rem;cursor:pointer;transition:opacity .15s;}
.spl-btn-run{background:var(--raised);border:1px solid var(--border);color:var(--t1);}
.spl-btn-run:hover{background:var(--hover);}
.spl-btn-save{background:var(--primary);color:#fff;}
.spl-btn-save:hover{opacity:.85;}
.spl-btn-run:disabled,.spl-btn-save:disabled{opacity:.5;cursor:default;}
.spl-result-header{display:flex;align-items:center;gap:8px;padding:0 0 10px 0;}
.spl-edit-btn{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:var(--r);border:1px solid var(--border);background:var(--raised);color:var(--t2);font-size:.8rem;cursor:pointer;}
.spl-edit-btn:hover{background:var(--hover);color:var(--t1);}
.spl-reshuffle-btn{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:var(--r);border:1px solid var(--border);background:var(--raised);color:var(--primary);font-size:.8rem;cursor:pointer;}
.spl-reshuffle-btn:hover{background:var(--hover);}
.spl-fresh-picks-section{padding-top:2px;}
.spl-fresh-picks-label{display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none;}
.spl-fresh-picks-text{display:flex;flex-direction:column;gap:1px;}
.spl-fresh-picks-name{font-size:.85rem;color:var(--t1);font-weight:500;}
.pl-empty-hint{padding:6px 8px;font-size:.78rem;color:var(--t3);}
/* ── Podcast Feed List ─────────────────────────────────────────── */
.pf-list{display:flex;flex-direction:column;gap:8px;}
.pf-item{border:1px solid var(--border);border-radius:var(--r);overflow:hidden;background:var(--raised);}
.pf-feed-row{display:flex;align-items:center;gap:12px;padding:10px 10px 10px 12px;cursor:pointer;transition:background .12s;}
.pf-feed-row:hover{background:var(--hover);}
.pf-art{width:88px;height:88px;border-radius:6px;overflow:hidden;flex-shrink:0;background:var(--bg2);display:flex;align-items:center;justify-content:center;}
.pf-art img{width:88px;height:88px;object-fit:cover;display:block;}
.pf-art svg{opacity:.35;}
.pf-info{flex:1;min-width:0;}
.pf-title{font-size:.92rem;font-weight:600;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pf-author{font-size:.78rem;color:var(--t2);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pf-stats{font-size:.78rem;color:var(--t2);margin-top:2px;}
.pf-latest-date{color:var(--primary);}
.pf-desc{font-size:.78rem;color:var(--t2);margin-top:3px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.pf-btns{display:flex;flex-direction:row;gap:3px;flex-shrink:0;align-items:center;}
.pf-handle{display:none;align-items:center;justify-content:center;width:22px;align-self:stretch;cursor:grab;color:var(--t3);opacity:.4;flex-shrink:0;}
.pf-handle:hover{opacity:1;}
.pf-list--sortable .pf-handle{display:flex;}
.pf-item.pf-dragging{opacity:.35;}
.pf-item.pf-drag-over-top{border-top:2px solid var(--primary);}
.pf-item.pf-drag-over-bottom{border-bottom:2px solid var(--primary);}
.pf-edit-panel{display:none;flex-wrap:wrap;align-items:center;gap:.5rem;padding:.5rem .75rem .75rem;border-top:1px solid var(--border);}
.ctrl-sm{width:30px;height:30px;font-size:14px;}

/* Episode save-to-library button */
.pf-ep-save-btn{color:var(--t2);}
.pf-ep-save-btn:hover{color:var(--primary);}
.pf-ep-save-btn.saving{color:var(--t3);pointer-events:none;}
.pf-ep-save-btn.saved{color:#22c55e;}
.pf-ep-save-btn.error{color:#ef4444;}

/* ── HOME VIEW ─────────────────────────────────────────────── */
.home-view{padding:20px 16px 60px;max-width:1400px;}
.home-shelf{margin-bottom:32px;min-width:0;}
.home-shelf-title{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--t2);}
.home-shelf-header{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.home-grip{display:flex;align-items:center;cursor:grab;color:var(--t2);opacity:.35;flex-shrink:0;user-select:none;padding:2px 1px;}
.home-grip svg{pointer-events:none;}
.home-grip:hover{opacity:.8;}
.home-grip:active{cursor:grabbing;}
.home-shelf.hs-dragging{opacity:.35;transition:opacity .1s;}
.home-shelf.hs-over{outline:2px dashed var(--primary);outline-offset:4px;border-radius:var(--r2);}
/* horizontal grid row — same auto-fill approach as radio station list */
.home-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;}
/* ── art card (radio, podcast, songs) ── */
.hc{width:100%;cursor:pointer;border-radius:var(--r);overflow:hidden;background:var(--raised);border:1px solid var(--border);position:relative;display:flex;flex-direction:column;transition:background .12s,box-shadow .12s;}
.hc:hover{background:var(--hover);box-shadow:0 0 0 1px var(--border2);}
.hc-art{width:100%;aspect-ratio:1;flex-shrink:0;background:var(--surface);display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--t2);}
.hc-art img{width:100%;height:100%;object-fit:cover;display:block;}
.hc-art>svg{display:block;width:100%;height:auto;}
.hc-info{padding:5px 8px 8px;min-width:0;}
.hc-title{font-size:.72rem;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3;}
.hc-sub{font-size:.65rem;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;}
/* ── icon card (playlists, folders) ── */
/* ── home: customize button ── */
.home-toolbar{display:flex;justify-content:flex-end;padding:0 2px 6px;}
.home-customize-btn{font-size:.7rem;font-weight:600;padding:4px 12px;border-radius:var(--r);background:transparent;border:1px solid var(--border2);color:var(--t2);cursor:pointer;transition:background .12s,color .12s,border-color .12s;}
.home-customize-btn:hover{background:var(--raised);color:var(--t1);}
.home-customize-btn.active{background:var(--primary-d);color:var(--primary);border-color:var(--primary);}
/* ── home: hidden items (favorites / compact mode) ── */
[data-hid].hc-hidden{display:none!important;}
.home-editing [data-hid].hc-hidden{display:flex!important;opacity:.3;box-shadow:none!important;}
/* selected items get a colored ring in edit mode */
.home-editing [data-hid]:not(.hc-hidden){box-shadow:0 0 0 2px var(--primary)!important;}
/* empty shelves hidden outside edit mode */
.home-shelf.hs-empty{display:none;}
.home-editing .home-shelf.hs-empty{display:block;}


/* ── Album Library ─────────────────────────────────────────────────────────── */
/* Series card: stacked cover effect */
.album-card--series .album-art{position:relative;}
.album-card--series .album-art::before,
.album-card--series .album-art::after{
  content:'';position:absolute;inset:0;background:var(--card);
  border-radius:var(--r2);z-index:-1;
}
.album-card--series .album-art::before{transform:rotate(-4deg) translateX(-6px);}
.album-card--series .album-art::after{transform:rotate(-8deg) translateX(-11px);opacity:.6;}

/* Art badges */
.alb-badges{position:absolute;top:7px;right:7px;display:flex;gap:4px;z-index:2;}
.alb-badge{font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px;
  background:rgba(0,0,0,.65);color:#fff;letter-spacing:.4px;}
.alb-badge--disc{background:var(--primary-d);color:var(--primary);}

/* Album detail header */
.alb-detail-header{display:flex;gap:24px;align-items:flex-start;
  padding:0 0 24px;border-bottom:1px solid var(--border);margin-bottom:8px;}
.alb-detail-art{width:180px;height:180px;flex-shrink:0;border-radius:var(--r2);
  object-fit:cover;background:var(--raised);}
.alb-detail-title{font-size:22px;font-weight:700;color:var(--t1);margin-bottom:4px;}
.alb-detail-sub{font-size:13px;color:var(--t2);margin-bottom:16px;}
.alb-detail-actions{display:flex;gap:10px;flex-wrap:wrap;}

/* Disc tab buttons */
.disc-tab-btn{
  padding:5px 14px;border-radius:var(--r);border:1px solid var(--border2);
  background:transparent;color:var(--t2);font-size:13px;font-weight:500;
  cursor:pointer;transition:background .12s,color .12s,border-color .12s;
  touch-action:manipulation;
}
.disc-tab-btn:hover{background:var(--raised);color:var(--t1);}
.disc-tab-btn.active{background:var(--primary-d);color:var(--primary);border-color:var(--primary);}

/* Album detail track list */
.alb-track-row{
  display:grid;grid-template-columns:36px 1fr auto auto;
  align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r);
  cursor:pointer;transition:background .14s;min-width:0;
  touch-action:manipulation;
}
.alb-track-row:hover{background:var(--hover);}
.alb-track-num{font-size:12px;color:var(--t3);text-align:right;width:20px;flex-shrink:0;}
.alb-track-title{font-size:14px;font-weight:500;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.alb-track-artist{font-size:12px;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.alb-track-dur{font-size:12px;color:var(--t3);white-space:nowrap;flex-shrink:0;}
/* Album detail — play hint */
.alb-play-hint{font-size:11.5px;color:var(--t3);padding:6px 0 10px;opacity:.75;}
/* Queue panel — disc separator */
.q-disc-sep{padding:10px 14px 4px;display:flex;align-items:center;gap:8px;}
.q-disc-sep span{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--t3);background:var(--raised);padding:2px 8px;border-radius:4px;}
.q-disc-sep:first-child{padding-top:4px;}

/* ── Your Stats (Wrapped) ──────────────────────────────────────────────────── */
.wrapped-view{padding:16px 0 32px;}
.wrapped-period-bar{display:flex;flex-direction:column;gap:10px;margin-bottom:20px;}
.wrapped-period-tabs{display:flex;gap:6px;flex-wrap:wrap;}
.wrapped-period-tab{padding:5px 14px;border-radius:var(--r);border:1px solid var(--border2);background:transparent;color:var(--t2);font-size:13px;font-weight:500;cursor:pointer;transition:background .12s,color .12s,border-color .12s;touch-action:manipulation;}
.wrapped-period-tab:hover{background:var(--raised);color:var(--t1);}
.wrapped-period-tab.active{background:var(--primary-d);color:var(--primary);border-color:var(--primary);}
.wrapped-nav-row{display:flex;align-items:center;gap:12px;}
.wrapped-nav-btn{padding:4px 12px;border-radius:var(--r);border:1px solid var(--border2);background:transparent;color:var(--t2);font-size:12px;cursor:pointer;transition:background .12s;}
.wrapped-nav-btn:hover:not([disabled]){background:var(--raised);color:var(--t1);}
.wrapped-nav-btn[disabled]{opacity:.35;cursor:default;}
.wrapped-period-label{font-size:14px;font-weight:600;color:var(--t1);}
/* Summary strip */
.wrapped-summary-strip{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px;}
.wrapped-stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r2);padding:12px 18px;display:flex;flex-direction:column;align-items:center;min-width:90px;}
.wrapped-stat-val{font-size:22px;font-weight:700;color:var(--primary);}
.wrapped-stat-val--sm{font-size:13px;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wrapped-stat-lbl{font-size:11px;color:var(--t3);text-transform:uppercase;letter-spacing:.05em;margin-top:2px;}
/* Cards grid */
.wrapped-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;}
.wrapped-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r2);padding:16px;min-width:0;}
.wrapped-card-wide{grid-column:1/-1;}
.wrapped-card-hdr{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--t2);margin-bottom:10px;}
/* Top lists */
.wrapped-top-list{display:flex;flex-direction:column;gap:4px;}
.wrapped-top-row{display:flex;align-items:center;gap:8px;padding:4px 0;min-width:0;}
.wrapped-rank{font-size:12px;color:var(--t3);width:16px;text-align:right;flex-shrink:0;}
.wrapped-thumb{width:32px;height:32px;object-fit:cover;border-radius:4px;flex-shrink:0;}
.wrapped-thumb-empty{width:32px;height:32px;border-radius:4px;background:var(--border);flex-shrink:0;}
.wrapped-top-info{flex:1;min-width:0;}
.wrapped-top-title{font-size:13px;font-weight:500;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.wrapped-top-sub{font-size:11px;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.wrapped-top-count{font-size:12px;color:var(--t3);white-space:nowrap;flex-shrink:0;}
.wrapped-empty-section{font-size:13px;color:var(--t3);padding:8px 0;}
/* Chart colour tokens — override per theme */
:root       { --chart-hi:var(--primary); --chart-lo:rgba(139,92,246,.28); --chart-zero:rgba(139,92,246,.09); }
:root.dark  { --chart-hi:#a78bfa;        --chart-lo:rgba(167,139,250,.26); --chart-zero:rgba(167,139,250,.08); }
:root.light { --chart-hi:#6d3ce6;        --chart-lo:rgba(109,60,230,.22); --chart-zero:rgba(109,60,230,.09); }
/* Hour chart — variable-height gradient bars */
.wrapped-hour-chart{display:flex;gap:2px;height:72px;align-items:flex-end;padding:0 1px;}
.hr-bar-cell{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%;}
.hr-bar-fill{width:100%;border-radius:2px 2px 0 0;transition:height .18s ease;}
.hr-bar-fill.bar-zero{height:3px;background:var(--chart-zero);border-radius:2px;}
.hr-bar-fill.bar-val{height:var(--bar-h,4%);min-height:4%;background:linear-gradient(to top,var(--chart-lo),var(--chart-hi));}
.wrapped-hour-labels{display:flex;justify-content:space-between;font-size:10px;color:var(--t3);margin-top:5px;padding:0 1px;}
/* Weekday chart — gradient bars */
.wrapped-wd-chart{display:flex;gap:6px;height:88px;align-items:flex-end;}
.hm-wd-cell{flex:1;display:flex;flex-direction:column;align-items:center;height:100%;}
.hm-wd-bar{width:100%;flex-shrink:0;border-radius:3px 3px 0 0;transition:height .18s ease;}
.hm-wd-bar.bar-zero{height:3px;background:var(--chart-zero);}
.hm-wd-bar.bar-val{height:var(--bar-h,0%);background:linear-gradient(to top,var(--chart-lo),var(--chart-hi));}
.hm-wd-label{font-size:11px;color:var(--t2);margin-top:5px;font-weight:500;}
/* Personality card */
.wrapped-personality{text-align:center;padding:12px 0 16px;}
.wrapped-personality-type{font-size:20px;font-weight:700;color:var(--t1);margin-bottom:6px;}
.wrapped-personality-desc{font-size:13px;color:var(--t2);}
.wrapped-completion-row{margin-top:12px;}
.wrapped-completion-label{font-size:12px;color:var(--t2);margin-bottom:4px;}
.wrapped-bar-track{height:6px;background:var(--border);border-radius:3px;overflow:hidden;}
.wrapped-bar-fill{height:100%;background:var(--primary);border-radius:3px;transition:width .4s;}
.wrapped-session-stat{font-size:12px;color:var(--t3);margin-top:8px;}
/* Fun facts */
.wrapped-facts-list{display:flex;flex-direction:column;gap:8px;}
.wrapped-fact-item{font-size:13px;color:var(--t2);line-height:1.4;}
.wrapped-fact-item b{color:var(--t1);}
/* Admin stat boxes */
.admin-stat-box{background:var(--bg);border:1px solid var(--border);border-radius:var(--r2);padding:12px 20px;min-width:120px;}
.admin-stat-value{font-size:26px;font-weight:700;color:var(--primary);}
.admin-stat-label{font-size:12px;color:var(--t3);margin-top:2px;}