/* ═══════════════════════════════════════════════════════════════════════════════
   ATLAS BEATS — v16 "Studio" skin: the Spotify-grade layout
   Three panes on black (library · main · now playing), a full-width player bar, shelves of square cover cards with a hover play
   button, playlist pages with a big header + track table, and on phones: bottom tabs, a floating mini player and a full-screen
   Now Playing view. Everything below is scoped to body.sp so the engine, ids and tests keep working.
   ═══════════════════════════════════════════════════════════════════════════════ */
body.sp {
  --sp-base: #121212; --sp-card: #181818; --sp-card-h: #282828; --sp-press: #333; --sp-sub: #b3b3b3; --sp-dim: #727272;
  --sp-acc: var(--c1, #7c3aed); --sp-acc-h: color-mix(in srgb, var(--c1, #7c3aed) 82%, #fff);
  --bg: #000; --bg-2: #121212; --glass: #181818; --glass-2: #242424; --glass-3: #2a2a2a; --line: rgba(255, 255, 255, .08); --line-2: rgba(255, 255, 255, .16);
  --text: #fff; --ink: #fff; --muted: #b3b3b3; --dim: #727272; --r-xl: 8px; --r-lg: 8px; --r-md: 6px; --r-sm: 4px; --shadow: 0 16px 48px rgba(0, 0, 0, .5);
  --player-h: 88px; --topbar-h: 64px; --sidebar-w: 300px;
  background: #000; color: #fff;
}
body.sp, body.sp .main, body.sp .sidebar { background-image: none; }
body.sp .bg-fx, body.sp .aurora, body.sp #bgFx, body.sp .orbs, body.sp .noise { display: none !important; }
body.sp ::selection { background: color-mix(in srgb, var(--sp-acc) 60%, #fff); color: #000; }
body.sp .ticker-wrap { display: none !important; }
body.sp.radio-site .sp-home, body.sp.radio-site .sp-browse, body.sp.radio-site .sp-greet { display: none !important; }
body.sp .sp-tr { display: flex; align-items: center; justify-content: center; gap: 18px; }
body.sp .num, body.sp .sp-li small, body.sp .pd-d, body.sp .pd-n { font-variant-numeric: tabular-nums; }

/* ── scrollbars ── */
body.sp ::-webkit-scrollbar { width: 12px; height: 12px; }
body.sp ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .22); border: 3px solid transparent; background-clip: padding-box; border-radius: 8px; }
body.sp ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .4); background-clip: padding-box; }

/* ═══ Desktop: three panes ═══ */
@media (min-width: 1024px) {
  body.sp .app { gap: 8px; padding: 8px 8px 0; align-items: start; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
  body.sp.sp-npv .app { --sidebar-w: 280px; grid-template-columns: var(--sidebar-w) minmax(0, 1fr) 340px; }
  body.sp.sp-npv.radio-site .app { --sidebar-w: 300px; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
  body.sp.radio-site .sp-npv { display: none; }
  body.sp .sidebar { top: 8px; height: calc(100dvh - var(--player-h) - 16px); background: var(--sp-base); border: 0; border-radius: 8px; padding: 8px 8px 0; gap: 0; overflow: hidden; }
  body.sp .main { position: relative; isolation: isolate; min-height: calc(100dvh - var(--player-h) - 16px); background: var(--sp-base); border-radius: 8px; padding: 0 24px calc(var(--player-h) + 40px); overflow: clip; }
  body.sp .main::before { content: ''; position: absolute; inset: 0 0 auto; height: 360px; z-index: -1; pointer-events: none; background: linear-gradient(180deg, color-mix(in srgb, var(--c1, #7c3aed) 34%, var(--sp-base)) 0%, var(--sp-base) 100%); transition: background 1.2s; }
  body.sp .topbar { position: sticky; top: 0; z-index: 40; height: var(--topbar-h); margin-inline: -24px; padding-inline: 16px 24px; gap: 8px; background: transparent; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; transition: background .25s; }
  body.sp .topbar.scrolled { background: rgba(18, 18, 18, .92); }
  body.sp .topbar #brandHomeM, body.sp .topbar .brand-m, body.sp #tbNow, body.sp .ticker-wrap { display: none !important; }
  body.sp .topbar .search { max-width: 474px; margin-inline: 4px auto; }
  body.sp .topbar .search input { height: 48px; border-radius: 500px; background: #242424; border: 1px solid transparent; padding-inline: 48px 40px; font-size: 14px; }
  body.sp .topbar .search input:hover { background: #2a2a2a; border-color: #3e3e3e; }
  body.sp .topbar .search input:focus { background: #2a2a2a; border-color: #fff; box-shadow: none; }
  body.sp .topbar .search .ic { inset-inline-start: 16px; color: #b3b3b3; }
  body.sp .topbar .search .kbd-hint { display: none; }
  body.sp .top-actions { gap: 8px; }
  body.sp .top-actions .icon-btn { width: 40px; height: 40px; border-radius: 50%; background: transparent; border: 0; color: #b3b3b3; }
  body.sp .top-actions .icon-btn:hover { color: #fff; transform: scale(1.04); background: rgba(255, 255, 255, .06); }
  body.sp .top-actions #statsBtn, body.sp .top-actions #keysBtn { display: none; }
  body.sp .top-actions .dj-top { width: auto; height: 36px; padding: 0 14px 0 10px; border-radius: 500px; background: rgba(255, 255, 255, .08); color: #fff; font-weight: 800; font-size: 12.5px; letter-spacing: .4px; gap: 7px; box-shadow: none; }
  body.sp .top-actions .dj-top:hover { background: rgba(255, 255, 255, .14); }
  body.sp .top-actions .dj-top .i { width: 16px; height: 16px; }
  body.sp .top-actions .lang-btn { border-radius: 500px; width: auto; padding-inline: 10px; }
  body.sp .top-actions .acc-btn { width: 40px; height: 40px; background: #282828; border-radius: 50%; }
  body.sp .top-actions .acc-btn:hover { background: #333; }
  body.sp .sp-arrows { display: inline-flex; gap: 8px; margin-inline-end: 4px; }
  body.sp .sp-prem { display: inline-flex; align-items: center; height: 32px; padding: 0 16px; border-radius: 500px; border: 0; background: #fff; color: #000; font: inherit; font-weight: 800; font-size: 13px; cursor: pointer; white-space: nowrap; }
  body.sp .sp-prem:hover { transform: scale(1.04); background: #f0f0f0; }
  body.sp .sp-more-btn { position: relative; }
}
@media (max-width: 1023px) { body.sp .sp-arrows { display: none; } }
body.sp .sp-arrow { width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .55); color: #fff; display: inline-grid; place-items: center; cursor: pointer; }
body.sp .sp-arrow:disabled { opacity: .35; cursor: default; }
body.sp .sp-arrow .i { width: 16px; height: 16px; }
html[dir="rtl"] body.sp .sp-arrow .i { transform: scaleX(-1); }
@media (max-width: 1023px) { body.sp .sp-prem { display: none; } }
body.sp .sp-menu { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; min-width: 220px; background: #282828; border-radius: 6px; padding: 4px; box-shadow: 0 16px 24px rgba(0, 0, 0, .3), 0 6px 8px rgba(0, 0, 0, .2); z-index: 80; }
body.sp .sp-menu[hidden] { display: none; }
body.sp .sp-menu button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: 3px; background: none; color: #fff; font: inherit; font-size: 14px; cursor: pointer; text-align: start; }
body.sp .sp-menu button:hover { background: rgba(255, 255, 255, .1); }
body.sp .sp-menu button .i { width: 18px; height: 18px; color: #b3b3b3; }
body.sp .sp-menu hr { border: 0; border-top: 1px solid rgba(255, 255, 255, .1); margin: 4px 0; }

/* ═══ Sidebar = Your Library ═══ */
body.sp .sidebar .brand { padding: 8px 12px 6px; }
body.sp .sidebar .brand img { width: 36px; height: 36px; border-radius: 10px; box-shadow: none; }
body.sp .sidebar .brand .wordmark { font-size: 16px; }
body.sp .sidebar .brand small { display: none; }
body.sp .side-pages { display: none !important; }
body.sp .sp-nav { display: flex; flex-direction: column; gap: 2px; padding: 2px 4px 10px; }
body.sp .sp-nav button { display: flex; align-items: center; gap: 16px; height: 44px; padding: 0 12px; border: 0; border-radius: 6px; background: none; color: #b3b3b3; font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; text-align: start; transition: color .2s, background .2s; }
body.sp .sp-nav button:hover, body.sp .sp-nav button.on { color: #fff; }
body.sp .sp-nav button .i { width: 24px; height: 24px; flex: none; }
body.sp .sp-nav button .live { margin-inline-start: auto; font-size: 10px; font-weight: 900; letter-spacing: .6px; color: #fff; background: #e0245e; padding: 2px 7px; border-radius: 999px; }
body.sp .sp-lib-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px 4px; color: #b3b3b3; font-weight: 800; font-size: 15px; }
body.sp .sp-lib-head .t { display: inline-flex; align-items: center; gap: 12px; }
body.sp .sp-lib-head .t .i { width: 24px; height: 24px; }
body.sp .sp-lib-head .b { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 0; background: none; color: #b3b3b3; cursor: pointer; }
body.sp .sp-lib-head .b:hover { color: #fff; background: rgba(255, 255, 255, .08); }
body.sp .sp-lib-head .b .i { width: 18px; height: 18px; }
body.sp .sidebar #nav { display: flex; flex-direction: row; gap: 8px; padding: 6px 12px 10px; overflow-x: auto; scrollbar-width: none; flex: none; }
body.sp .sidebar #nav::-webkit-scrollbar { display: none; }
body.sp .sidebar #nav .nav-item { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 500px; background: rgba(255, 255, 255, .07); color: #fff; font-size: 13px; font-weight: 600; border: 0; margin: 0; width: auto; }
body.sp .sidebar #nav .nav-item:hover { background: rgba(255, 255, 255, .12); }
body.sp .sidebar #nav .nav-item.active { background: #fff; color: #000; }
body.sp .sidebar #nav .nav-item .i { display: none; }
body.sp .sidebar #nav .nav-item .cnt { display: none; }
body.sp .side-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 0 4px 12px; }
body.sp #sideRecent { display: none; }
body.sp .sp-list { display: flex; flex-direction: column; gap: 0; }
body.sp .sp-li { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 6px 8px; border: 0; border-radius: 6px; background: none; color: #fff; font: inherit; cursor: pointer; text-align: start; min-height: 64px; }
body.sp .sp-li:hover { background: rgba(255, 255, 255, .08); }
body.sp .sp-li.on { background: rgba(255, 255, 255, .06); }
body.sp .sp-li img { width: 48px; height: 48px; border-radius: 4px; object-fit: cover; background: #282828; display: block; }
body.sp .sp-li.artist img { border-radius: 50%; }
body.sp .sp-li b { display: block; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.sp .sp-li.on b { color: var(--sp-acc-h); }
body.sp .sp-li small { display: block; color: #b3b3b3; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
body.sp .sp-li .eqv { display: none; width: 14px; height: 14px; align-items: flex-end; gap: 2px; }
body.sp .sp-li.on.playing .eqv { display: inline-flex; }
body.sp .sp-li .eqv i { flex: 1; background: var(--sp-acc-h); border-radius: 1px; animation: spEq 1s ease-in-out infinite; height: 40%; }
body.sp .sp-li .eqv i:nth-child(2) { animation-delay: .2s; } body.sp .sp-li .eqv i:nth-child(3) { animation-delay: .4s; }
@keyframes spEq { 0%, 100% { height: 30%; } 50% { height: 100%; } }
body.sp .side-foot { border-top: 1px solid rgba(255, 255, 255, .08); padding: 8px 10px 10px; display: flex; gap: 12px; }
body.sp .side-stat { background: none; border: 0; padding: 4px 6px; border-radius: 6px; }
body.sp .side-stat:hover { background: rgba(255, 255, 255, .06); }
body.sp .side-stat .v { font-size: 14px; } body.sp .side-stat .k { font-size: 11px; color: #727272; }

/* ═══ Home ═══ */
body.sp .sp-home { padding-top: 4px; }
body.sp .sp-greet { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 8px 0 14px; }
body.sp .sp-greet h1 { margin: 0; font-size: 30px; font-weight: 900; letter-spacing: -.4px; }
body.sp .sp-greet h1 small { display: block; font-size: 14px; font-weight: 500; color: #b3b3b3; margin-top: 2px; }
body.sp .sp-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 26px; }
@media (max-width: 1400px) { body.sp .sp-quick { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1150px) { body.sp .sp-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
body.sp .sp-qt { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 0 12px; height: 64px; padding: 0; padding-inline-end: 8px; border: 0; border-radius: 4px; overflow: hidden; background: rgba(255, 255, 255, .1); color: #fff; font: inherit; cursor: pointer; text-align: start; transition: background .25s; }
body.sp .sp-qt:hover { background: rgba(255, 255, 255, .2); }
body.sp .sp-qt img { width: 64px; height: 64px; object-fit: cover; display: block; background: #333; }
body.sp .sp-qt b { font-size: 14.5px; font-weight: 800; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body.sp .sp-qt .pb { width: 44px; height: 44px; border-radius: 50%; background: var(--sp-acc); color: #fff; display: grid; place-items: center; opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .2s; box-shadow: 0 8px 16px rgba(0, 0, 0, .35); }
body.sp .sp-qt:hover .pb, body.sp .sp-qt.playing .pb { opacity: 1; transform: none; }
body.sp .sp-qt .pb .i { width: 20px; height: 20px; }
html[dir="rtl"] body.sp .sp-qt .pb .i { transform: scaleX(-1); }
body.sp .sp-qt.playing .pb { background: #fff; color: #000; }

/* apps row → compact shortcut chips under the greeting */
body.sp .apps-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
body.sp .app-tile { display: inline-flex; align-items: center; gap: 8px; height: 36px; white-space: nowrap; padding: 0 14px 0 8px; border-radius: 500px; border: 0; background: rgba(255, 255, 255, .08); color: #fff; min-height: 0; flex: none; width: auto; }
body.sp .app-tile:hover { background: rgba(255, 255, 255, .14); transform: none; }
body.sp .app-tile .app-ic { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: none; box-shadow: none; }
body.sp .app-tile .app-ic .i { width: 16px; height: 16px; }
body.sp .app-tile .app-tx { display: flex; flex-direction: row; align-items: baseline; gap: 6px; }
body.sp .app-tile .app-tx b { font-size: 13px; font-weight: 700; }
body.sp .app-tile .app-tx small { display: none; }
body.sp .app-tile .app-new, body.sp .app-tile .app-live { position: static; font-size: 9px; padding: 1px 6px; border-radius: 999px; }

/* shelves */
body.sp .pl-shelf .section-head { display: none; }
body.sp .pl-grid.grouped { gap: 34px; }
body.sp .pl-row-head { margin-bottom: 14px; padding-inline: 0; }
body.sp .pl-row-head h3 { font-size: 24px; font-weight: 900; letter-spacing: -.3px; color: #fff; }
body.sp .pl-row-head h3:hover { text-decoration: underline; cursor: pointer; }
body.sp .pl-row-head h3 .i { display: none; }
body.sp .pl-row-head h3 em { display: none; }
body.sp .pl-row-nav { display: inline-flex; align-items: center; gap: 10px; }
body.sp .pl-arrow { width: 32px; height: 32px; border-radius: 50%; background: rgba(0, 0, 0, .5); border: 0; color: #b3b3b3; opacity: 0; transition: opacity .2s; }
body.sp .pl-row:hover .pl-arrow { opacity: 1; }
body.sp .pl-arrow:hover { color: #fff; }
body.sp .sp-showall { border: 0; background: none; color: #b3b3b3; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; padding: 4px 2px; white-space: nowrap; }
body.sp .sp-showall:hover { text-decoration: underline; color: #fff; }
body.sp .pl-strip { grid-auto-columns: minmax(170px, 196px); gap: 12px; padding: 0 0 6px; margin: 0; }
body.sp .pl-grid:not(.grouped) { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 12px; }
body.sp .card.pl-card { background: var(--sp-card); border: 0; border-radius: 6px; padding: 14px; box-shadow: none; transition: background .3s; animation: none; }
body.sp .card.pl-card:hover { background: var(--sp-card-h); transform: none; }
body.sp .card.pl-card .art { aspect-ratio: 1; border-radius: 4px; box-shadow: 0 8px 24px rgba(0, 0, 0, .5); background: linear-gradient(135deg, var(--s1), var(--s2)); overflow: visible; }
body.sp .card.pl-card .art img { border-radius: 4px; }
body.sp .card.pl-card .art .em { font-size: 48px; }
body.sp .card.pl-card .art .pill, body.sp .card.pl-card .art .ir-pill, body.sp .card.pl-card .art .eqb { display: none; }
body.sp .card.pl-card .art .pick { top: 8px; inset-inline-start: 8px; font-size: 9.5px; padding: 3px 8px; border-radius: 4px; background: rgba(0, 0, 0, .6); backdrop-filter: blur(6px); }
body.sp .card.pl-card .fav-btn { top: 8px; inset-inline-end: 8px; width: 30px; height: 30px; opacity: 0; background: rgba(0, 0, 0, .55); transition: opacity .2s; }
body.sp .card.pl-card:hover .fav-btn, body.sp .card.pl-card .fav-btn.on { opacity: 1; }
body.sp .card.pl-card .go { position: absolute; inset-inline-end: 8px; bottom: 8px; top: auto; inset-inline-start: auto; width: 48px; height: 48px; border-radius: 50%; background: var(--sp-acc); color: #fff; display: grid; place-items: center; opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s, background .2s; box-shadow: 0 8px 16px rgba(0, 0, 0, .3); border: 0; }
body.sp .card.pl-card:hover .go, body.sp .card.pl-card.playing .go, body.sp .card.pl-card.active .go { opacity: 1; transform: none; }
body.sp .card.pl-card .go:hover { transform: scale(1.06); background: var(--sp-acc-h); }
body.sp .card.pl-card .go .i { width: 22px; height: 22px; }
body.sp .card.pl-card .body { padding: 14px 2px 2px; }
body.sp .card.pl-card .name .n { font-size: 15.5px; font-weight: 700; color: #fff; }
body.sp .card.pl-card .pl-sub { display: none; }
body.sp .card.pl-card .pl-now { color: #b3b3b3; font-size: 13.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 4px; }
body.sp .card.pl-card .pl-cnt { color: #727272; font-size: 12.5px; margin-top: 4px; }
body.sp .card.pl-card .pl-now:empty { display: none; }
body.sp .pick-hero { border-radius: 8px; }

/* ATLAS RADIO strip / For you / Artists on the home */
body.sp .rd-home-head h2, body.sp .fy-h b, body.sp .artists-home h2, body.sp .lib-sec h2, body.sp .section-head h2 { font-size: 24px; font-weight: 900; letter-spacing: -.3px; }
body.sp .fy-h .fy-hic { display: none; }
body.sp .fy-card, body.sp .rd-card, body.sp .ar-card { border-radius: 6px; background: var(--sp-card); border: 0; }
body.sp .fy-card:hover, body.sp .rd-card:hover, body.sp .ar-card:hover { background: var(--sp-card-h); }
body.sp .footer { border-top: 1px solid rgba(255, 255, 255, .08); margin-top: 48px; color: #727272; }

/* ═══ Search: browse tiles ═══ */
body.sp .sp-browse { margin: 6px 0 28px; }
body.sp .sp-browse h2 { font-size: 24px; font-weight: 900; margin: 0 0 14px; }
body.sp .sp-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
body.sp .sp-tile { position: relative; aspect-ratio: 1.8; border-radius: 8px; overflow: hidden; border: 0; padding: 16px; background: var(--tc, #503750); color: #fff; font: inherit; font-size: 20px; font-weight: 900; text-align: start; cursor: pointer; display: flex; align-items: flex-start; transition: transform .2s; }
body.sp .sp-tile:hover { transform: scale(1.02); }
body.sp .sp-tile .i { position: absolute; inset-inline-end: -12px; bottom: -10px; width: 86px; height: 86px; opacity: .55; transform: rotate(22deg); color: #fff; }
body.sp .sp-tile small { position: absolute; left: 16px; right: 16px; bottom: 14px; font-size: 12px; font-weight: 600; opacity: .85; }
body.sp.sp-searching .sp-greet, body.sp.sp-searching .sp-quick, body.sp.sp-searching .apps-row, body.sp.sp-searching .rd-home, body.sp.sp-searching #forYouHome, body.sp.sp-searching .artists-home, body.sp.sp-searching .shop-sec, body.sp.sp-searching .pick-hero { display: none !important; }
body.sp .sp-browse[hidden] { display: none; }

/* ═══ Playlist page (#plDetail) ═══ */
body.sp .pl-detail { background: transparent; border: 0; box-shadow: none; border-radius: 0; margin: 0 -24px 30px; padding: 0; }
body.sp .pl-detail:not(.mini) .pd-head { position: relative; display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 24px; align-items: end; padding: 84px 24px 24px; min-height: 340px; border-radius: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--s1) 70%, #222) 0%, color-mix(in srgb, var(--s1) 36%, #121212) 100%); overflow: hidden; }
body.sp .pl-detail:not(.mini) .pd-bg { display: none; }
body.sp .pl-detail:not(.mini) .pd-cover { width: 232px; height: 232px; border-radius: 4px; box-shadow: 0 4px 60px rgba(0, 0, 0, .5); overflow: hidden; flex: none; }
body.sp .pl-detail:not(.mini) .pd-cover img { width: 100%; height: 100%; object-fit: cover; }
body.sp .pl-detail:not(.mini) .pd-em { display: none; }
body.sp .pl-detail:not(.mini) .pd-kicker { font-size: 13px; font-weight: 800; color: #fff; text-transform: uppercase; letter-spacing: .3px; }
body.sp .pl-detail:not(.mini) .pd-kicker .i { display: none; }
body.sp .pl-detail:not(.mini) .pd-title { font-size: clamp(40px, 6vw, 88px); font-weight: 900; letter-spacing: -2px; line-height: 1.02; margin: 8px 0 14px; color: #fff; }
body.sp .pl-detail:not(.mini) .pd-title.fa { letter-spacing: 0; font-size: clamp(34px, 5vw, 72px); }
body.sp .pl-detail:not(.mini) .pd-sub { color: rgba(255, 255, 255, .78); font-size: 14px; margin: 0 0 8px; }
body.sp .pl-detail:not(.mini) .pd-meta { color: #fff; font-size: 14px; font-weight: 600; }
body.sp .pl-detail:not(.mini) .pd-meta span + span::before { content: '•'; margin: 0 6px; color: rgba(255, 255, 255, .7); }
body.sp .pl-detail:not(.mini) .pd-meta .pd-here { font-weight: 500; color: rgba(255, 255, 255, .8); }
body.sp .pl-detail:not(.mini) .pd-win { position: absolute; top: 16px; inset-inline-end: 16px; display: flex; gap: 6px; z-index: 2; }
body.sp .pd-win button { width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .35); color: #fff; }
body.sp .pd-win button:hover { background: rgba(0, 0, 0, .6); }
body.sp .pl-detail:not(.mini) .pd-actions { display: flex; align-items: center; gap: 22px; padding: 20px 0 0; margin: 0; background: none; }
body.sp .pl-detail:not(.mini) .pd-actions .pd-btn { border: 0; background: none; color: #b3b3b3; padding: 0; height: auto; font-weight: 700; }
body.sp .pl-detail:not(.mini) .pd-actions .pd-btn:hover { color: #fff; transform: scale(1.04); }
body.sp .pl-detail:not(.mini) .pd-actions .pd-btn.primary { width: 56px; height: 56px; border-radius: 50%; background: var(--sp-acc); color: #fff; display: grid; place-items: center; box-shadow: 0 8px 16px rgba(0, 0, 0, .3); }
body.sp .pl-detail:not(.mini) .pd-actions .pd-btn.primary:hover { background: var(--sp-acc-h); transform: scale(1.05); }
body.sp .pl-detail:not(.mini) .pd-actions .pd-btn.primary .i { width: 26px; height: 26px; }
body.sp .pl-detail:not(.mini) .pd-actions .pd-btn.primary span { display: none; }
body.sp .pl-detail:not(.mini) .pd-actions .pd-btn .i { width: 28px; height: 28px; }
body.sp .pl-detail:not(.mini) .pd-actions .pd-btn span { display: none; }
body.sp .pl-detail:not(.mini) .pd-actions .pd-btn.icon.on { color: var(--sp-acc-h); }
body.sp .pl-detail:not(.mini) .pd-tabs { padding: 0 24px; gap: 8px; margin: 0 0 8px; }
body.sp .pd-tab { height: 32px; padding: 0 14px; border-radius: 500px; background: rgba(255, 255, 255, .07); border: 0; color: #fff; font-size: 13px; font-weight: 600; }
body.sp .pd-tab.on { background: #fff; color: #000; }
body.sp .pl-detail:not(.mini) .pd-filter { margin: 0 24px 10px; }
body.sp .pl-detail:not(.mini) .pd-filter input { background: #242424; border-radius: 4px; border: 0; height: 36px; }
body.sp .pl-detail:not(.mini) .pd-list { padding: 0 24px; }
body.sp .pl-detail:not(.mini) .pd-list::before { content: '#'; display: block; padding: 0 16px 8px; margin: 0 0 12px; color: #b3b3b3; font-size: 13px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
body.sp .pd-row { display: grid; grid-template-columns: 24px 40px minmax(0, 1fr) auto auto auto auto; align-items: center; gap: 14px; height: 56px; padding: 0 16px; border-radius: 4px; border: 0; background: none; margin: 0; }
body.sp .pd-row:hover { background: rgba(255, 255, 255, .1); }
body.sp .pd-row.on { background: rgba(255, 255, 255, .08); }
body.sp .pd-row .pd-n { color: #b3b3b3; font-size: 15px; text-align: center; }
body.sp .pd-row.on .pd-n { color: var(--sp-acc-h); }
body.sp .pd-row .pd-thumb { width: 40px; height: 40px; border-radius: 3px; }
body.sp .pd-row .pd-rtx b { font-size: 15.5px; font-weight: 600; color: #fff; }
body.sp .pd-row.on .pd-rtx b { color: var(--sp-acc-h); }
body.sp .pd-row .pd-rtx small { color: #b3b3b3; font-size: 13.5px; }
body.sp .pd-row:hover .pd-rtx small { color: #fff; }
body.sp .pd-row .pd-d { color: #b3b3b3; font-size: 14px; min-width: 40px; text-align: end; }
body.sp .pd-row .pd-dl, body.sp .pd-row .pd-add { width: 32px; height: 32px; border-radius: 50%; border: 0; background: none; color: #b3b3b3; opacity: 0; transition: opacity .15s; }
body.sp .pd-row:hover .pd-dl, body.sp .pd-row:hover .pd-add { opacity: 1; }
body.sp .pd-row .pd-dl:hover, body.sp .pd-row .pd-add:hover { color: #fff; }
body.sp .pd-row .pd-eq { display: none; }
body.sp .pd-row.on .pd-eq { display: inline-flex; }
body.sp .pd-row.on .pd-n { display: none; }
body.sp .pl-detail:not(.mini) .pd-about, body.sp .pl-detail:not(.mini) .pd-facts { padding: 0 24px; }
/* while a playlist page is open the home shelves step aside (Spotify navigates to the playlist) */
body.sp.detail-open:not(.detail-mini) .sp-home, body.sp.detail-open:not(.detail-mini) .apps-row, body.sp.detail-open:not(.detail-mini) .rd-home, body.sp.detail-open:not(.detail-mini) #forYouHome, body.sp.detail-open:not(.detail-mini) .artists-home, body.sp.detail-open:not(.detail-mini) .pl-shelf, body.sp.detail-open:not(.detail-mini) .shop-sec, body.sp.detail-open:not(.detail-mini) .song-results { display: none !important; }
body.sp .pl-detail.mini { margin: 0 0 16px; }

/* ═══ Player bar (desktop) ═══ */
@media (min-width: 768px) {
  body.sp .player { padding: 0 8px calc(env(safe-area-inset-bottom, 0px)); background: #000; z-index: 60; }
  body.sp .player-in { height: var(--player-h); border: 0; border-radius: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; grid-template-columns: minmax(180px, 30%) minmax(0, 40%) minmax(180px, 30%); gap: 16px; padding: 0 8px; overflow: visible; }
  body.sp .player-in::before, body.sp .player-in::after { display: none; }
  body.sp .pl-prog { display: none; }
  body.sp .pl-left { gap: 14px; min-width: 0; cursor: default; }
  body.sp .pl-cover { width: 56px; height: 56px; border-radius: 4px; box-shadow: 0 2px 12px rgba(0, 0, 0, .4); flex: none; cursor: pointer; }
  body.sp .pl-cover img { border-radius: 4px; }
  body.sp .pl-station { display: none; }
  body.sp .pl-title { font-size: 14px; font-weight: 600; color: #fff; }
  body.sp .pl-title:hover { text-decoration: underline; cursor: pointer; }
  body.sp .pl-artist { font-size: 12px; color: #b3b3b3; }
  body.sp .pl-left #plFav { width: 32px; height: 32px; border-radius: 50%; background: none; border: 0; color: #b3b3b3; margin-inline-start: 4px; flex: none; }
  body.sp .pl-left #plFav:hover { color: #fff; transform: scale(1.06); }
  body.sp .pl-left #plFav.on { color: var(--sp-acc-h); }
  body.sp .pl-center { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 0; }
  body.sp .sp-tr { display: flex; align-items: center; justify-content: center; gap: 18px; }
  body.sp .sp-tr .ctl { width: 32px; height: 32px; border-radius: 50%; border: 0; background: none; color: #b3b3b3; box-shadow: none; }
  body.sp .sp-tr .ctl:hover { color: #fff; transform: scale(1.06); }
  body.sp .sp-tr .ctl .i { width: 18px; height: 18px; }
  body.sp .sp-tr .ctl.big { width: 36px; height: 36px; background: #fff; color: #000; }
  body.sp .sp-tr .ctl.big:hover { transform: scale(1.06); background: #fff; }
  body.sp .sp-tr .ctl.big .i { width: 18px; height: 18px; }
  body.sp .sp-tr .ctl.big.loading { background: #fff; }
  body.sp .sp-tr .pl-fav-m, body.sp .sp-tr .pl-like-m { display: none; }
  body.sp .sp-tgl { position: relative; }
  body.sp .sp-tgl.on { color: var(--sp-acc-h) !important; }
  body.sp .sp-tgl.on::after { content: ''; position: absolute; left: 50%; bottom: -2px; width: 4px; height: 4px; border-radius: 50%; background: var(--sp-acc-h); transform: translateX(-50%); }
  body.sp .sp-tgl b { position: absolute; top: 3px; inset-inline-end: 3px; font-size: 8px; font-weight: 900; line-height: 1; }
  body.sp .pl-center #progress { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; align-items: center; gap: 8px; width: 100%; max-width: 620px; margin: 0; }
  body.sp .pl-center #progress .times { display: contents; }
  body.sp .pl-center #progress .times span { font-size: 11.5px; color: #b3b3b3; }
  body.sp .pl-center #progress #tElapsed { order: 1; text-align: end; }
  body.sp .pl-center #progress .bar { order: 2; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .3); cursor: pointer; position: relative; }
  body.sp .pl-center #progress .bar .fill { background: #fff; border-radius: 2px; box-shadow: none; }
  body.sp .pl-center #progress .bar:hover .fill { background: var(--sp-acc-h); }
  body.sp .pl-center #progress .bar:hover::after { content: ''; position: absolute; top: 50%; inset-inline-start: calc(var(--p, 0) * 1%); width: 12px; height: 12px; border-radius: 50%; background: #fff; transform: translate(-50%, -50%); box-shadow: 0 2px 4px rgba(0, 0, 0, .5); }
  body.sp .pl-center #progress #tTotal { order: 3; }
  body.sp .pl-center #progress[hidden] { display: grid; visibility: hidden; }
  body.sp .pl-right { gap: 2px; justify-content: flex-end; }
  body.sp .pl-right .icon-btn { width: 32px; height: 32px; border-radius: 50%; border: 0; background: none; color: #b3b3b3; }
  body.sp .pl-right .icon-btn:hover { color: #fff; transform: scale(1.04); }
  body.sp .pl-right .icon-btn.on { color: var(--sp-acc-h); }
  body.sp .pl-right .icon-btn .i { width: 17px; height: 17px; }
  body.sp .pl-right .vol { gap: 4px; }
  body.sp .pl-right .vol input { width: 93px; accent-color: #fff; }
  body.sp .pl-right .vol input::-webkit-slider-runnable-track { height: 4px; background: rgba(255, 255, 255, .3); border-radius: 2px; }
  body.sp .pl-right .vol input::-webkit-slider-thumb { width: 12px; height: 12px; margin-top: -4px; opacity: 0; }
  body.sp .pl-right .vol:hover input::-webkit-slider-thumb { opacity: 1; }
  body.sp .pl-right .vol input::-moz-range-track { height: 4px; background: rgba(255, 255, 255, .3); border-radius: 2px; }
  body.sp .pl-right .vol input::-moz-range-thumb { width: 12px; height: 12px; opacity: 0; }
  body.sp .pl-right .vol:hover input::-moz-range-thumb { opacity: 1; }
  body.sp #spNpvBtn.on, body.sp #spLyr.on { color: var(--sp-acc-h); }
}
@media (min-width: 768px) and (max-width: 1023px) { body.sp .player-in { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); } }
@media (min-width: 1024px) and (max-width: 1179px) { body.sp #spNpvBtn { display: none; } }

/* ═══ Now Playing pane (desktop ≥1280) ═══ */
body.sp .sp-npv { display: none; }
@media (min-width: 1180px) {
  body.sp.sp-npv .sp-npv { display: block; position: sticky; top: 8px; height: calc(100dvh - var(--player-h) - 16px); overflow-y: auto; background: var(--sp-base); border-radius: 8px; scrollbar-width: thin; }
  body.sp .sp-npv #stage { margin: 0; border: 0; border-radius: 8px; box-shadow: none; background: linear-gradient(180deg, color-mix(in srgb, var(--c1, #7c3aed) 42%, #121212), #121212 48%); min-height: 100%; }
  body.sp .sp-npv .stage-bg, body.sp .sp-npv .stage-tint, body.sp .sp-npv .stage-blob { display: none; }
  body.sp .sp-npv .stage-in { display: block; padding: 60px 16px 16px; }
  body.sp .sp-npv .sp-npv-head { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; z-index: 3; }
  body.sp .sp-npv .sp-npv-head b { font-size: 16px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.sp .sp-npv .sp-npv-head small { display: none; }
  body.sp .sp-npv .sp-npv-head .x .i { transform: none; }
  body.sp .sp-npv .disc-wrap { width: 100%; max-width: none; aspect-ratio: 1; margin: 0 0 16px; }
  body.sp .sp-npv .disc { width: 100%; height: 100%; border-radius: 8px; box-shadow: 0 12px 40px rgba(0, 0, 0, .5); }
  body.sp .sp-npv .disc img, body.sp .sp-npv .disc .ph img { border-radius: 8px; }
  body.sp .sp-npv .disc .rim, body.sp .sp-npv .disc .shine, body.sp .sp-npv #viz, body.sp .sp-npv .disc-glow { display: none; }
  body.sp .sp-npv .disc-state { border-radius: 8px; }
  body.sp .sp-npv .stage-meta { text-align: start; padding: 0; }
  body.sp .sp-npv .badges { margin-bottom: 8px; }
  body.sp .sp-npv .st-title { font-size: 24px; margin: 0; line-height: 1.2; }
  body.sp .sp-npv .st-artist { font-size: 15px; color: #b3b3b3; margin: 4px 0 0; }
  body.sp .sp-npv .st-album { display: none; }
  body.sp .sp-npv .controls { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; justify-content: flex-start; }
  body.sp .sp-npv .controls .ctl { width: 36px; height: 36px; background: none; border: 0; box-shadow: none; color: #b3b3b3; }
  body.sp .sp-npv .controls .ctl:hover { color: #fff; }
  body.sp .sp-npv .controls .ctl.on { color: var(--sp-acc-h); }
  body.sp .sp-npv .controls #btnPrev, body.sp .sp-npv .controls #btnPlay, body.sp .sp-npv .controls #btnNext, body.sp .sp-npv .controls .ctl-sep, body.sp .sp-npv .controls .sp-sh, body.sp .sp-npv .controls .sp-rp, body.sp .sp-npv .controls #btnShuffle { display: none; }
  body.sp .sp-npv .status-line { margin-top: 8px; font-size: 12px; color: #b3b3b3; }
  body.sp .sp-npv .lyrics { margin: 18px 0 0; border-radius: 8px; background: color-mix(in srgb, var(--c1, #7c3aed) 55%, #1a1a1a); border: 0; padding: 14px; }
  body.sp .sp-npv .ly-body { max-height: 320px; }
  body.sp .sp-npv .stage-side { display: grid; gap: 10px; margin-top: 14px; }
  body.sp .sp-npv .stage-side .mini { background: #1f1f1f; border-radius: 8px; border: 0; }
}

/* ═══ Pick (ATLAS PICK) modal ═══ */
body.sp .pk-sheet, body.sp .pick-sheet { background: #121212; border-radius: 8px; }

/* ═══ Panels / toasts / misc ═══ */
body.sp .panel { background: #282828; border-radius: 8px; border: 0; }
body.sp .toast { background: var(--sp-acc); color: #fff; border: 0; border-radius: 8px; font-weight: 600; }
body.sp .chip-sleep { background: rgba(255, 255, 255, .1); }

/* ═══ Phone ═══ */
@media (max-width: 767px) {
  body.sp { --player-h: 64px; }
  body.sp .main { padding-inline: 16px; padding-bottom: calc(var(--player-h) + var(--apptabs-h, 64px) + 24px); }
  body.sp .main::before { content: ''; position: absolute; inset: 0 0 auto; height: 260px; z-index: -1; pointer-events: none; background: linear-gradient(180deg, color-mix(in srgb, var(--c1, #7c3aed) 36%, #121212), #121212); }
  body.sp .main { position: relative; isolation: isolate; }
  body.sp .topbar { background: transparent; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; height: 56px; }
  body.sp .topbar.scrolled { background: rgba(18, 18, 18, .96); }
  body.sp .topbar .search input { background: #fff; color: #000; border-radius: 6px; border: 0; height: 40px; font-weight: 600; }
  body.sp .topbar .search input::placeholder { color: #555; font-weight: 500; }
  body.sp .topbar .search .ic { color: #000; }
  body.sp .topbar .voice-btn { color: #333; }
  body.sp .topbar .icon-btn { background: transparent; border: 0; color: #fff; }
  body.sp .topbar #djTopBtn, body.sp:not(.radio-site) .topbar #radioTopBtn { display: none !important; }
  body.sp .topbar .search { flex: 1 1 auto; min-width: 140px; }
  body.sp .top-actions .dj-top { background: rgba(255, 255, 255, .1); color: #fff; box-shadow: none; }
  body.sp .sp-greet { margin: 4px 0 12px; }
  body.sp .sp-greet h1 { font-size: 24px; }
  body.sp .sp-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 18px; }
  body.sp .sp-qt { height: 56px; grid-template-columns: 56px minmax(0, 1fr); border-radius: 4px; background: rgba(255, 255, 255, .12); }
  body.sp .sp-qt img { width: 56px; height: 56px; }
  body.sp .sp-qt b { font-size: 12.5px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; }
  body.sp .sp-qt .pb { display: none; }
  body.sp .apps-row { gap: 8px; margin-bottom: 18px; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; padding-bottom: 2px; }
  body.sp .apps-row::-webkit-scrollbar { display: none; }
  body.sp .app-tile { height: 34px; }
  body.sp .pl-grid.grouped { gap: 26px; }
  body.sp .pl-row-head h3 { font-size: 20px; }
  body.sp .pl-row-nav .pl-arrow { display: none; }
  body.sp .pl-strip { grid-auto-columns: 148px; gap: 10px; margin-inline: -16px; padding-inline: 16px; }
  body.sp .card.pl-card { padding: 0; background: transparent; }
  body.sp .card.pl-card:hover { background: transparent; }
  body.sp .card.pl-card .body { padding: 8px 2px 0; }
  body.sp .card.pl-card .name .n { font-size: 14px; }
  body.sp .card.pl-card .pl-now { font-size: 12.5px; -webkit-line-clamp: 1; }
  body.sp .card.pl-card .pl-cnt { display: none; }
  body.sp .card.pl-card .go { display: none; }
  body.sp .card.pl-card .fav-btn { display: none; }
  body.sp .sp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  body.sp .sp-tile { font-size: 16px; padding: 12px; aspect-ratio: 1.75; }
  body.sp .sp-tile .i { width: 64px; height: 64px; }
  /* playlist page */
  body.sp .pl-detail { margin-inline: -16px; }
  body.sp .pl-detail:not(.mini) .pd-head { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 64px 16px 16px; min-height: 0; gap: 14px; }
  body.sp .pl-detail:not(.mini) .pd-cover { width: 200px; height: 200px; }
  body.sp .pl-detail:not(.mini) .pd-title { font-size: 26px; letter-spacing: -.5px; margin: 4px 0 6px; }
  body.sp .pl-detail:not(.mini) .pd-title.fa { font-size: 24px; }
  body.sp .pl-detail:not(.mini) .pd-tx { width: 100%; text-align: start; justify-items: start; }
  body.sp .pl-detail:not(.mini) .pd-actions { padding: 12px 16px; gap: 18px; }
  body.sp .pl-detail:not(.mini) .pd-actions .pd-btn.primary { margin-inline-start: auto; width: 52px; height: 52px; order: 9; }
  body.sp .pl-detail:not(.mini) .pd-tabs, body.sp .pl-detail:not(.mini) .pd-filter, body.sp .pl-detail:not(.mini) .pd-list { padding-inline: 8px; }
  body.sp .pl-detail:not(.mini) .pd-list::before { display: none; }
  body.sp .pd-row { grid-template-columns: 44px minmax(0, 1fr) auto; height: 60px; padding: 0 8px; gap: 12px; }
  body.sp .pd-row .pd-n, body.sp .pd-row .pd-d, body.sp .pd-row .pd-dl, body.sp .pd-row .pd-live { display: none; }
  body.sp .pd-row .pd-thumb { width: 44px; height: 44px; }
  body.sp .pd-row .pd-add { opacity: 1; }
  /* floating mini player */
  body.sp.has-apptabs .player { padding: 0 8px calc(var(--apptabs-h, 64px) + 6px + env(safe-area-inset-bottom, 0px)); background: transparent; }
  body.sp.has-apptabs .player-in { height: 58px; border-radius: 8px; border: 0; background: color-mix(in srgb, var(--c1, #7c3aed) 38%, #262626); box-shadow: 0 8px 24px rgba(0, 0, 0, .45); grid-template-columns: minmax(0, 1fr) auto; gap: 6px; padding: 0 8px 0 8px; backdrop-filter: none; -webkit-backdrop-filter: none; }
  body.sp.has-apptabs .player-in::before, body.sp.has-apptabs .player-in::after { display: none; }
  body.sp.has-apptabs .pl-prog { position: absolute; left: 8px; right: 8px; bottom: 0; top: auto; height: 2px; background: rgba(255, 255, 255, .25); border-radius: 2px; }
  body.sp.has-apptabs .pl-prog i { background: #fff; }
  body.sp.has-apptabs .pl-left { gap: 10px; min-width: 0; cursor: pointer; }
  body.sp.has-apptabs .pl-cover { width: 40px; height: 40px; border-radius: 4px; flex: none; }
  body.sp.has-apptabs .pl-cover img { border-radius: 4px; }
  body.sp.has-apptabs .pl-station { display: none; }
  body.sp.has-apptabs .pl-title { font-size: 13.5px; font-weight: 700; color: #fff; }
  body.sp.has-apptabs .pl-artist { font-size: 12px; color: rgba(255, 255, 255, .72); }
  body.sp.has-apptabs .pl-center { display: flex; gap: 2px; align-self: center; }
  body.sp.has-apptabs .sp-tr { gap: 0; }
  body.sp.has-apptabs .pl-center #plNext { display: none; }
  body.sp.has-apptabs .pl-center .ctl { width: 40px; height: 40px; background: none; border: 0; box-shadow: none; color: #fff; }
  body.sp.has-apptabs .pl-center .ctl.big { width: 44px; height: 44px; background: none; color: #fff; }
  body.sp.has-apptabs .pl-center .ctl.big .i { width: 26px; height: 26px; }
  body.sp.has-apptabs .pl-center #plPrev, body.sp.has-apptabs .pl-center .pl-like-m, body.sp.has-apptabs .pl-center .sp-sh, body.sp.has-apptabs .pl-center .sp-rp { display: none; }
  body.sp.has-apptabs .pl-center .pl-fav-m { display: inline-grid; }
  body.sp.has-apptabs .pl-center .pl-fav-m.on { color: var(--sp-acc-h); }
  body.sp.has-apptabs .pl-right, body.sp.has-apptabs .pl-left #plFav { display: none !important; }
  /* bottom tabs */
  body.sp .app-tabs { background-color: rgba(5, 5, 5, .98); background-image: linear-gradient(180deg, rgba(0, 0, 0, .55), #000 55%); border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; padding-top: 6px; }
  body.sp .app-tab { color: #b3b3b3; gap: 3px; }
  body.sp .app-tab.on { color: #fff; }
  body.sp .app-tab .app-tab-ic { background: none; border: 0; box-shadow: none; width: auto; height: auto; }
  body.sp .app-tab .app-tab-ic .i { width: 24px; height: 24px; }
  body.sp .app-tab.on .app-tab-ic { background: none; }
  body.sp .app-tab span:last-child { font-size: 10.5px; font-weight: 600; }
  /* full-screen Now Playing view */
  body.sp.has-apptabs #stage { position: fixed; inset: 0; z-index: 75; margin: 0; border: 0; border-radius: 0; box-shadow: none; overflow-y: auto; overscroll-behavior: contain; transform: translateY(102%); transition: transform .42s var(--ease); background: linear-gradient(180deg, color-mix(in srgb, var(--c1, #7c3aed) 62%, #121212) 0%, #121212 58%); padding: 0 20px calc(28px + env(safe-area-inset-bottom, 0px)); visibility: hidden; }
  body.sp.sp-npv-open #stage { transform: none; visibility: visible; }
  body.sp.has-apptabs .stage-bg, body.sp.has-apptabs .stage-tint, body.sp.has-apptabs .stage-blob { display: none; }
  body.sp.has-apptabs .sp-npv-head { position: sticky; top: 0; z-index: 3; display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; align-items: center; gap: 8px; padding: calc(10px + env(safe-area-inset-top, 0px)) 0 8px; margin: 0 -20px 6px; padding-inline: 12px; text-align: center; background: linear-gradient(180deg, color-mix(in srgb, var(--c1, #7c3aed) 62%, #121212) 70%, transparent); }
  body.sp.has-apptabs .sp-npv-head small { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .8px; color: rgba(255, 255, 255, .8); text-transform: uppercase; }
  body.sp.has-apptabs .sp-npv-head b { display: block; font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.sp .sp-npv-head .x, body.sp .sp-npv-head .m { width: 40px; height: 40px; border: 0; background: none; color: #fff; display: grid; place-items: center; border-radius: 50%; }
  body.sp .sp-npv-head .x .i, body.sp .sp-npv-head .m .i { width: 22px; height: 22px; }
  body.sp.has-apptabs .stage-in { display: block; padding: 0; }
  body.sp.has-apptabs .disc-wrap { width: min(84vw, 380px); aspect-ratio: 1; margin: 14px auto 26px; }
  body.sp.has-apptabs .disc { width: 100%; height: 100%; border-radius: 8px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
  body.sp.has-apptabs .disc img, body.sp.has-apptabs .disc .ph img { border-radius: 8px; }
  body.sp.has-apptabs .disc .rim, body.sp.has-apptabs .disc .shine, body.sp.has-apptabs #viz, body.sp.has-apptabs .disc-glow { display: none; }
  body.sp.has-apptabs .stage-meta { text-align: start; padding: 0; }
  body.sp.has-apptabs .badges { margin-bottom: 6px; }
  body.sp.has-apptabs .st-title { font-size: 22px; margin: 0; line-height: 1.25; }
  body.sp.has-apptabs .st-artist { font-size: 15px; color: rgba(255, 255, 255, .72); margin: 2px 0 0; }
  body.sp.has-apptabs .st-album { display: none; }
  body.sp.has-apptabs #progress { margin: 18px 0 6px; }
  body.sp.has-apptabs #progress .bar { height: 4px; background: rgba(255, 255, 255, .3); border-radius: 2px; }
  body.sp.has-apptabs #progress .bar .fill { background: #fff; box-shadow: none; }
  body.sp.has-apptabs #progress .times span { font-size: 11.5px; color: rgba(255, 255, 255, .72); }
  body.sp.has-apptabs .controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px; margin: 4px 0 0; }
  body.sp.has-apptabs .controls::after { content: ''; flex-basis: 100%; order: 1; height: 10px; }
  body.sp.has-apptabs .controls > .ctl:not(.sp-tgl):not(#btnPrev):not(#btnPlay):not(#btnNext) { order: 5 !important; }
  body.sp.has-apptabs .controls .ctl { order: 2; width: 44px; height: 44px; background: none; border: 0; box-shadow: none; color: rgba(255, 255, 255, .78); }
  body.sp.has-apptabs .controls .ctl.on { color: var(--sp-acc-h); }
  body.sp.has-apptabs .controls .sp-sh, body.sp.has-apptabs .controls #btnPrev, body.sp.has-apptabs .controls #btnPlay, body.sp.has-apptabs .controls #btnNext, body.sp.has-apptabs .controls .sp-rp { order: 0; width: 52px; height: 52px; color: #fff; }
  body.sp.has-apptabs .controls .sp-sh .i, body.sp.has-apptabs .controls .sp-rp .i { width: 22px; height: 22px; }
  body.sp.has-apptabs .controls #btnPrev .i, body.sp.has-apptabs .controls #btnNext .i { width: 30px; height: 30px; }
  body.sp.has-apptabs .controls #btnPlay { width: 68px; height: 68px; border-radius: 50%; background: #fff; color: #000; }
  body.sp.has-apptabs .controls #btnPlay .i { width: 30px; height: 30px; }
  body.sp.has-apptabs .controls .ctl-sep, body.sp.has-apptabs .controls #btnShuffle, body.sp.has-apptabs .controls #btnPip { display: none; }
  body.sp.has-apptabs .controls .sp-tgl.on { color: var(--sp-acc-h); }
  body.sp.has-apptabs .controls .sp-tgl b { position: absolute; top: 8px; inset-inline-end: 10px; font-size: 9px; font-weight: 900; }
  body.sp.has-apptabs .status-line { margin-top: 6px; font-size: 12px; color: rgba(255, 255, 255, .7); }
  body.sp.has-apptabs .lyrics { margin: 22px 0 0; border-radius: 8px; background: color-mix(in srgb, var(--c1, #7c3aed) 58%, #1a1a1a); border: 0; padding: 14px; }
  body.sp.has-apptabs .ly-body { max-height: 300px; }
  body.sp.has-apptabs .stage-side { display: grid; gap: 10px; margin-top: 14px; }
  body.sp.has-apptabs .stage-side .mini { background: #1f1f1f; border-radius: 8px; border: 0; }
  body.sp.sp-npv-open .app-tabs, body.sp.sp-npv-open .player { visibility: hidden; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  body.sp .main { padding-inline: 20px; }
  body.sp .main::before { content: ''; position: absolute; inset: 0 0 auto; height: 300px; z-index: -1; pointer-events: none; background: linear-gradient(180deg, color-mix(in srgb, var(--c1, #7c3aed) 34%, #121212), #121212); }
  body.sp .main { position: relative; isolation: isolate; }
  body.sp .sp-quick { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.sp #stage { display: none; }
}
@media (min-width: 1024px) and (max-width: 1179px) { body.sp #stage { display: none; } }
/* the NPV pane holds the stage on wide desktops; elsewhere the engine keeps running without a visible stage */
@media (min-width: 1180px) { body.sp:not(.sp-npv) #stage { display: none; } }

/* feedback FAB: on the Spotify layout it lives in the More menu (desktop) / drawer (phone) */
@media (min-width: 768px) { body.sp .fbw-btn { display: none; } body.sp .fbw-pop { inset-inline-end: 16px; bottom: calc(var(--player-h) + 16px); } }
body.sp #uqSrc { display: none !important; }
body.sp.has-apptabs .controls .ctl:not(#btnPlay), body.sp .sp-npv .controls .ctl:not(#btnPlay) { background: none !important; border: 0 !important; box-shadow: none !important; }

/* ---- tablet / small desktop density ---- */
@media (min-width: 1024px) {
  body.sp .topbar .search { flex: 1 1 320px; min-width: 200px; max-width: 474px; margin-inline-end: 0; }
  body.sp .top-actions { flex: none; }
  body.sp #settingsBtn { display: none; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  body.sp .top-actions .dj-top span { display: none; }
  body.sp .top-actions .dj-top { width: 40px; padding: 0; justify-content: center; }
  body.sp .top-actions .lang-btn #langLabel, body.sp .top-actions .lang-btn .chev { display: none; }
  body.sp .top-actions .lang-btn { width: 40px; padding: 0; justify-content: center; }
}
@media (min-width: 768px) and (max-width: 1439px) { body.sp #plSleep, body.sp #plJam { display: none; } }
@media (min-width: 768px) and (max-width: 1099px) { body.sp #plPip, body.sp #plEq { display: none; } }