[hidden]{display:none!important}
:root{
  --bg:#08080b; --panel:#15151b; --panel2:#1e1e26; --line:#2b2b35; --text:#f4f4f7; --muted:#9b9baa;
  --acc1:#c13cff; --acc2:#ff3c93; --acc:#c23cff; --acctext:#fff;
  --grad:linear-gradient(120deg,var(--acc1),var(--acc2));
  --shadow:0 18px 50px -18px rgba(0,0,0,.65);
  font-synthesis:none;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);
  font-family:-apple-system,"SF Pro Display",system-ui,"Segoe UI",Roboto,sans-serif;overscroll-behavior:none;
  letter-spacing:-.01em;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
input{font:inherit}
.error{color:#ff6b6b;font-size:13px;min-height:16px;margin:6px 0 0}
.muted{color:var(--muted)}
.empty{color:var(--muted);text-align:center;padding:70px 20px}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:#2e2e38;border-radius:8px}

/* ---- logo ---- */
.logo{font-weight:800;font-size:38px;letter-spacing:-1.5px;display:inline-flex;align-items:center}
.logo::before{content:"";width:1.25em;height:1.25em;flex:none;margin-right:.28em;background:url(/logo-mark.png) center/contain no-repeat}
.logo span{color:inherit}
.logo.sm{font-size:22px;letter-spacing:-1px}

/* ---- auth ---- */
.auth{position:fixed;inset:0;display:grid;place-items:center;padding:24px;
  background:radial-gradient(1000px 520px at 75% -8%,rgba(193,60,255,.22),transparent 60%),
             radial-gradient(800px 460px at 10% 110%,rgba(255,60,147,.14),transparent 60%),var(--bg)}
.auth-card{width:100%;max-width:360px;text-align:center}
.tagline{color:var(--muted);margin:6px 0 30px;font-size:15px}
#auth-form{display:flex;flex-direction:column;gap:11px}
#auth-form input{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:13px;padding:15px 16px;color:var(--text)}
#auth-form input::placeholder{color:#6f6f7d}
#auth-form input:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px rgba(194,60,255,.18)}
#au-submit{background:var(--grad);color:#fff;font-weight:700;border-radius:999px;padding:15px;margin-top:6px;box-shadow:0 10px 30px -10px rgba(194,60,255,.6)}
#au-submit:active{transform:scale(.985)}
.switch{color:var(--muted);margin-top:20px;font-size:14px}
.switch button{color:var(--acc);font-weight:700}

/* ---- app shell ---- */
.app{display:flex;flex-direction:column;height:100%}
.top{display:flex;align-items:center;gap:12px;padding:14px 18px;position:sticky;top:0;z-index:5;
  background:linear-gradient(var(--bg) 60%,rgba(8,8,11,.7));backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.search{flex:1;max-width:560px}
.search input{width:100%;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:999px;padding:12px 20px;color:var(--text)}
.search input::placeholder{color:#6f6f7d}
.search input:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px rgba(194,60,255,.15)}
.acct{width:36px;height:36px;border-radius:50%;background:var(--panel2);border:1px solid var(--line);color:var(--text);font-size:19px;flex:none;display:grid;place-items:center}
.view{flex:1;overflow-y:auto;padding:6px 18px 190px;
  background:radial-gradient(900px 500px at 100% -5%,rgba(193,60,255,.08),transparent 55%) no-repeat}

/* ---- sections / cards ---- */
h2.sec{font-size:22px;font-weight:800;margin:26px 2px 14px;letter-spacing:-.5px}
.row{display:grid;grid-auto-flow:column;grid-auto-columns:160px;gap:16px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x proximity}
.row::-webkit-scrollbar{display:none}
.card{background:var(--panel);border-radius:16px;padding:12px;cursor:pointer;scroll-snap-align:start;
  transition:transform .18s ease,background .18s ease,box-shadow .18s ease;border:1px solid transparent}
.card:hover{background:var(--panel2);transform:translateY(-5px);box-shadow:var(--shadow);border-color:rgba(255,255,255,.05)}
.card .art,.card .gen{width:100%;aspect-ratio:1;border-radius:12px;overflow:hidden;box-shadow:0 10px 26px -12px rgba(0,0,0,.7)}
.card.round .art,.card.round .gen{border-radius:50%}
.card .ct{font-weight:700;margin-top:11px;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card .cs{color:var(--muted);font-size:12.5px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chips{display:flex;gap:9px;flex-wrap:wrap}
.chip{background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:9px 18px;font-size:14px;font-weight:600;cursor:pointer;transition:transform .12s}
.chip:hover{border-color:var(--acc)}
.chip:active{transform:scale(.96)}
.chip.on{background:var(--grad);color:#fff;border-color:transparent}

/* ---- generated cover art (no uploaded image) ---- */
.gen{position:relative;display:grid;place-items:center;isolation:isolate}
.gen::after{content:"";position:absolute;inset:0;background:
  radial-gradient(60% 50% at 78% 12%,rgba(255,255,255,.28),transparent 60%),
  linear-gradient(180deg,transparent 45%,rgba(0,0,0,.45));mix-blend-mode:screen;z-index:1}
.gen .gi{font-weight:800;font-size:46%;color:rgba(255,255,255,.95);z-index:2;text-shadow:0 2px 12px rgba(0,0,0,.4)}
.gen .gnote{position:absolute;top:8%;left:9%;font-size:16%;opacity:.5;z-index:2}
.gen .gt{position:absolute;left:9%;right:9%;bottom:9%;z-index:2;font-weight:800;line-height:1.1;
  font-size:15%;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.5);overflow:hidden;display:-webkit-box;
  -webkit-line-clamp:3;-webkit-box-orient:vertical}

/* ---- track list ---- */
.tracks{display:flex;flex-direction:column;gap:2px;margin-top:8px}
.trk{display:flex;align-items:center;gap:13px;padding:9px 10px;border-radius:12px;cursor:pointer;transition:background .15s}
.trk:hover{background:var(--panel)}
.trk.playing{background:linear-gradient(90deg,rgba(194,60,255,.14),rgba(255,60,147,.06))}
.trk.playing .tt{color:#fff}
.trk .tart,.trk .gen{width:48px;height:48px;border-radius:9px;flex:none;overflow:hidden;box-shadow:0 6px 14px -8px rgba(0,0,0,.8)}
.trk .tm{min-width:0;flex:1}
.trk .tt{font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trk .ts{color:var(--muted);font-size:13px;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trk .td{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}

/* ---- hero (artist/album) ---- */
.hero{display:flex;gap:22px;align-items:flex-end;padding:26px 2px 14px}
.hero .hart,.hero .gen{width:148px;height:148px;border-radius:18px;flex:none;overflow:hidden;box-shadow:var(--shadow)}
.hero.round .hart,.hero.round .gen{border-radius:50%}
.hero h1{margin:0;font-size:38px;font-weight:800;letter-spacing:-1px}
.hero .hs{color:var(--muted);margin-top:8px;font-size:14px}

/* ---- player bar ---- */
.player{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;align-items:center;gap:14px;
  padding:11px 16px calc(11px + env(safe-area-inset-bottom));
  background:rgba(18,18,23,.86);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border-top:1px solid rgba(255,255,255,.06)}
.pl-info{display:flex;align-items:center;gap:11px;min-width:0;flex:1}
.pl-cover{width:50px;height:50px;border-radius:9px;flex:none;background-size:cover;background-position:center;box-shadow:0 8px 18px -8px rgba(0,0,0,.8)}
.pl-meta{min-width:0}
.pl-title{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-artist{color:var(--muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-like{font-size:22px;color:var(--muted);flex:none;width:38px;height:38px;display:grid;place-items:center;transition:transform .12s}
.pl-like:active{transform:scale(1.2)}
.pl-like.on{color:var(--acc2)}
.pl-ctr{flex:2;display:none;flex-direction:column;gap:6px;max-width:540px}
.pl-buttons{display:flex;gap:20px;justify-content:center;align-items:center}
.pl-buttons button{font-size:20px;color:var(--text);opacity:.85;width:36px;height:36px;display:grid;place-items:center}
.pl-buttons button:hover{opacity:1}
.pl-buttons .main{width:40px;height:40px;border-radius:50%;background:#fff;color:#000;font-size:18px;opacity:1;box-shadow:0 6px 16px -6px rgba(255,255,255,.4)}
.pl-bar,.np-bar{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.pl-track,.np-track{flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,.14);position:relative;cursor:pointer}
.pl-track i,.np-track i{position:absolute;inset:0 auto 0 0;width:0;border-radius:3px;background:var(--grad)}
.pl-expand{font-size:22px;color:var(--muted);flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center}
.pl-expand:hover{background:rgba(255,255,255,.08);color:var(--text)}
@media(min-width:760px){.pl-ctr{display:flex}.pl-info{flex:1}}

/* ---- now playing ---- */
.np{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;align-items:center;gap:18px;
  padding:22px 22px calc(22px + env(safe-area-inset-bottom));
  background:var(--npbg,linear-gradient(180deg,#241033,#08080b))}
.np-close{align-self:flex-start;font-size:28px;color:var(--text);width:44px;height:44px;border-radius:50%;display:grid;place-items:center}
.np-art{width:min(76vw,360px,40vh);aspect-ratio:1;border-radius:22px;background-size:cover;background-position:center;
  box-shadow:0 40px 90px -25px #000;display:grid;place-items:center;font-size:96px}
.np-meta{text-align:center;display:flex;flex-direction:column;align-items:center}
.np-title{font-size:26px;font-weight:800;letter-spacing:-.6px}
.np-artist{color:var(--muted);margin-top:3px;font-size:15px}
.np-bar{width:min(92vw,440px)}
.np-buttons{display:flex;gap:30px;align-items:center}
.np-buttons button{font-size:30px;opacity:.9;width:52px;height:52px;display:grid;place-items:center}
.np-buttons .main{width:68px;height:68px;border-radius:50%;background:#fff;color:#000;font-size:28px;opacity:1;box-shadow:0 14px 34px -12px rgba(255,255,255,.5)}
.np-offline{margin-top:4px;background:rgba(255,255,255,.08);border:1px solid var(--line);border-radius:999px;padding:9px 18px;font-size:13px;font-weight:650;color:var(--text)}
.np-offline.on{background:var(--grad);color:#fff;border-color:transparent}
.np-lyrics{width:min(92vw,560px);flex:1;overflow-y:auto;text-align:center;line-height:2;color:var(--muted);
  white-space:pre-wrap;padding:6px 0 24px;font-size:17px;mask-image:linear-gradient(transparent,#000 12%,#000 85%,transparent)}
.np-lyrics .ly{transition:color .25s,opacity .25s,transform .25s;opacity:.45}
.np-lyrics .ly.cur{color:#fff;opacity:1;font-weight:800;transform:scale(1.04)}

/* ---- featured banner ---- */
.feat{display:flex;gap:18px;align-items:center;margin:14px 0 6px;padding:18px;border-radius:20px;
  background:var(--fg,var(--grad));box-shadow:var(--shadow);position:relative;overflow:hidden}
.feat::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(0,0,0,.25));z-index:0}
.feat-art,.feat .gen{width:116px;height:116px;border-radius:14px;flex:none;overflow:hidden;z-index:1;box-shadow:0 16px 36px -14px rgba(0,0,0,.8)}
.feat-info{z-index:1;min-width:0}
.feat-label{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.feat-title{font-size:30px;font-weight:800;letter-spacing:-.6px;margin:4px 0 2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.feat-artist{color:rgba(255,255,255,.82);font-size:14px}
.feat-play{margin-top:14px;background:#fff;color:#000;font-weight:800;border-radius:999px;padding:11px 24px;font-size:15px;box-shadow:0 10px 26px -10px rgba(0,0,0,.6)}
.feat-play:active{transform:scale(.97)}
@media(max-width:560px){.feat-title{font-size:24px}.feat-art,.feat .gen{width:92px;height:92px}}

/* ---- bottom nav (Spotify-style) ---- */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:25;display:flex;justify-content:space-around;align-items:center;
  height:calc(60px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);
  background:rgba(12,12,16,.94);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid rgba(255,255,255,.06)}
.nav-b{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;font-weight:650;color:var(--muted);flex:1;padding:8px 0}
.nav-b .ic{font-size:25px;line-height:0}
.nav-b.on{color:var(--text)}
.nav-b.on .ic{color:var(--text)}
.nav-b.on .i-home path,.nav-b.on .i-library rect{fill:currentColor}
/* player sits just above the nav */
.player{bottom:calc(60px + env(safe-area-inset-bottom))!important}
.view{padding-bottom:230px}

/* ---- settings / profile sheet ---- */
.sheet{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(0,0,0,.5);backdrop-filter:blur(3px);animation:fade .18s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet-card{width:100%;max-width:460px;background:var(--panel);border-radius:22px 22px 0 0;padding:10px 10px calc(16px + env(safe-area-inset-bottom));
  border:1px solid var(--line);border-bottom:0;animation:up .24s cubic-bezier(.2,.8,.2,1)}
@keyframes up{from{transform:translateY(100%)}to{transform:none}}
.sheet-top{padding:16px;border-bottom:1px solid var(--line);margin-bottom:6px}
.sheet-name{font-size:18px;font-weight:800}
.sheet-sub{color:var(--muted);font-size:13px;margin-top:3px}
.sheet-tier{display:inline-block;margin-top:8px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:var(--grad);color:#fff;border-radius:999px;padding:4px 12px}
.sheet-row{display:block;width:100%;text-align:left;padding:15px 16px;border-radius:12px;font-size:15px;font-weight:600}
.sheet-row:hover{background:var(--panel2)}
.sheet-row.danger{color:#ff6b6b}

/* ---- verify email ---- */
.vf-icon{width:76px;height:76px;margin:28px auto 18px;border-radius:50%;display:grid;place-items:center;font-size:34px;
  background:var(--grad);box-shadow:0 10px 40px rgba(194,60,255,.35)}
.vf-title{font-size:24px;font-weight:800;letter-spacing:-.5px;margin:0 0 10px}
.vf-text{color:var(--text);font-size:15px;line-height:1.55;margin:0 0 12px}
.vf-text.muted{color:var(--muted);font-size:14px}
.vf-text b{word-break:break-all}
.vf-btn{width:100%;margin-top:14px;padding:15px;border-radius:999px;border:1px solid var(--line);
  background:rgba(255,255,255,.05);color:var(--text);font-weight:700}
.vf-btn:disabled{opacity:.5}
.vf-msg{font-size:13px;min-height:16px;margin:10px 0 0;color:var(--muted)}
.vf-msg.ok{color:#5be3a0}.vf-msg.err{color:#ff6b6b}
.toast{position:fixed;left:50%;top:18px;transform:translateX(-50%);z-index:999;padding:12px 18px;border-radius:12px;
  background:#1d1d24;border:1px solid var(--line);color:var(--text);font-size:14px;box-shadow:0 10px 30px rgba(0,0,0,.5)}

/* ---- install app ---- */
.inst-link{margin-top:18px;color:var(--muted);font-size:14px;font-weight:600;padding:8px 14px;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,255,255,.03)}
.inst-banner{display:flex;align-items:center;gap:14px;margin:0 0 22px;padding:14px 16px;border-radius:18px;
  background:linear-gradient(120deg,rgba(177,60,255,.18),rgba(255,60,160,.12));border:1px solid rgba(194,60,255,.3)}
.inst-banner img{width:48px;height:48px;border-radius:12px;flex:none}
.inst-banner .ib-t{font-weight:800;font-size:15px}
.inst-banner .ib-s{color:var(--muted);font-size:13px;margin-top:2px}
.inst-banner .ib-txt{flex:1;min-width:0}
.inst-banner .ib-go{background:var(--grad);color:#fff;font-weight:800;padding:10px 16px;border-radius:999px;flex:none}
.inst-banner .ib-x{color:var(--muted);font-size:20px;width:34px;height:34px;display:grid;place-items:center;flex:none}
.inst-card{text-align:center}
.inst-icon{width:72px;height:72px;border-radius:18px;margin:6px auto 10px;display:block}
.inst-title{margin:0 0 14px;font-size:20px;font-weight:800}
.inst-steps{text-align:left;margin:0 0 16px;padding-left:22px;line-height:1.7;color:var(--text);font-size:15px}
.inst-steps b{color:#fff}

/* ---- draft / scheduled badge (owner only) ---- */
.badge{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;font-size:10.5px;font-weight:800;
  letter-spacing:.3px;text-transform:uppercase;vertical-align:2px}
.badge.draft{background:rgba(255,196,60,.16);color:#ffc43c;border:1px solid rgba(255,196,60,.35)}
.badge.scheduled{background:rgba(60,190,255,.14);color:#5cc8ff;border:1px solid rgba(60,190,255,.35)}

/* ---- forgot / reset / guest ---- */
.forgot{margin:14px 0 0;font-size:13px}.forgot button{color:var(--muted)}
.forgot button:hover{color:var(--text)}
.guest-link{margin:10px 0 0;font-size:14px}.guest-link button{color:var(--text);font-weight:700}
.error.ok{color:#5be3a0}
#reset-form{display:flex;flex-direction:column;gap:11px;margin-top:18px}
#reset-form input{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:13px;padding:15px 16px;color:var(--text)}
#reset-form input:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px rgba(194,60,255,.18)}
#reset-form button{background:var(--grad);color:#fff;font-weight:800;padding:15px;border-radius:999px}
.join-card{text-align:center}
.join-text{color:var(--muted);font-size:15px;line-height:1.55;margin:0 0 18px}
.join-go{width:100%;background:var(--grad);color:#fff;font-weight:800;padding:15px;border-radius:999px;margin-bottom:6px}
.acct.guest{width:auto;padding:0 14px;border-radius:999px;font-size:13px;font-weight:800;background:var(--grad);color:#fff}
.preview-note{color:var(--muted);text-align:center;padding:20px 10px;line-height:1.6}
.preview-note button{color:var(--acc);font-weight:800}

/* ---- motion (ux.js): page transitions, sheets, swipes, press feedback ---- */
#view{view-transition-name:gblview}
::view-transition-old(root),::view-transition-new(root){animation:none}
::view-transition-old(gblview),::view-transition-new(gblview){animation-duration:.3s;
  animation-timing-function:cubic-bezier(.2,.8,.2,1);animation-fill-mode:both}
html[data-nav="fwd"]::view-transition-old(gblview){animation-name:gbl-out-l}
html[data-nav="fwd"]::view-transition-new(gblview){animation-name:gbl-in-r}
html[data-nav="back"]::view-transition-old(gblview){animation-name:gbl-out-r}
html[data-nav="back"]::view-transition-new(gblview){animation-name:gbl-in-l}
html[data-nav="tab"]::view-transition-old(gblview){animation-name:gbl-fade-out;animation-duration:.16s}
html[data-nav="tab"]::view-transition-new(gblview){animation-name:gbl-fade-in;animation-duration:.24s}
html[data-nav="none"]::view-transition-old(gblview),html[data-nav="none"]::view-transition-new(gblview){animation:none}
@keyframes gbl-in-r{from{transform:translateX(32%);opacity:0}}
@keyframes gbl-out-l{to{transform:translateX(-14%);opacity:0}}
@keyframes gbl-in-l{from{transform:translateX(-14%);opacity:0}}
@keyframes gbl-out-r{to{transform:translateX(32%);opacity:0}}
@keyframes gbl-fade-in{from{opacity:0;transform:translateY(8px)}}
@keyframes gbl-fade-out{to{opacity:0}}

.top{transition:background .25s,box-shadow .25s}
.top.scrolled{background:rgba(10,10,12,.94);box-shadow:0 10px 26px -14px rgba(0,0,0,.9)}
.hero{will-change:transform,opacity;transform-origin:center bottom}

.np{touch-action:none;will-change:clip-path;isolation:isolate}
.np-lyrics{touch-action:pan-y}
.np::before{content:"";position:absolute;top:9px;left:50%;width:40px;height:5px;margin-left:-20px;border-radius:9px;
  background:rgba(255,255,255,.28)}
.np-art{transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s}
.np.paused .np-art{transform:scale(.86);box-shadow:0 16px 34px -20px #000}
.swap-l{animation:gbl-swap-l .4s cubic-bezier(.2,.8,.2,1)}
.swap-r{animation:gbl-swap-r .4s cubic-bezier(.2,.8,.2,1)}
@keyframes gbl-swap-l{from{transform:translateX(46px) scale(.93);opacity:0}}
@keyframes gbl-swap-r{from{transform:translateX(-46px) scale(.93);opacity:0}}
.pl-info{transition:transform .22s cubic-bezier(.2,.8,.2,1),opacity .22s;touch-action:pan-y;cursor:pointer}
.player{animation:gbl-rise .35s cubic-bezier(.2,.8,.2,1)}
@keyframes gbl-rise{from{transform:translateY(110%)}}

.card,.trk,.chip,.feat-play,.nav-b,.pl-buttons button,.np-buttons button,.pl-like,.ib-go{
  transition:transform .14s ease,background .15s ease,box-shadow .2s ease;-webkit-tap-highlight-color:transparent}
.card:active,.trk:active,.chip:active{transform:scale(.97)}
.feat-play:active,.nav-b:active,.pl-buttons button:active,.np-buttons button:active,.ib-go:active{transform:scale(.9)}
.pl-like.pop{animation:gbl-pop .38s cubic-bezier(.2,.8,.2,1.4)}
@keyframes gbl-pop{45%{transform:scale(1.38)}}
.nav-b.on .ic{animation:gbl-pop .3s ease}

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

.back-btn{position:sticky;top:6px;z-index:4;width:38px;height:38px;border-radius:50%;margin:4px 0 -42px;
  background:rgba(10,10,12,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;
  font-size:24px;display:grid;place-items:center;transition:transform .14s ease}
.back-btn:active{transform:scale(.88)}

/* ---- unified icon + button system ---- */
.i{width:1em;height:1em;display:block;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.i .f{fill:currentColor;stroke:none}
.i .cut{stroke:var(--bg)}
.pl-like.on{color:var(--acc2)}.pl-like.on .i path{fill:currentColor}
.feat-play,.np-offline,.inst-link,.sheet-row[data-ic]{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.feat-play .i{font-size:16px}.np-offline .i{font-size:17px}.inst-link .i{font-size:17px}
.sheet-row[data-ic]{display:flex;justify-content:flex-start;gap:12px}.sheet-row .i{font-size:20px}
.vf-icon .i{width:30px;height:30px;stroke:#fff}
.vf-icon{display:grid;place-items:center}
.np-close:hover,.pl-expand:hover,.ib-x:hover{background:rgba(255,255,255,.08);color:var(--text)}
.np-offline.on .i .cut{stroke:var(--acc1)}
.pl-mplay{flex:none;width:40px;height:40px;border-radius:50%;background:#fff;color:#000;font-size:18px;display:grid;place-items:center;transition:transform .12s}
.pl-mplay:active{transform:scale(.9)}
@media(max-width:759px){.pl-expand{display:none}}
@media(min-width:760px){.pl-mplay{display:none}}
@media(max-width:759px){.pl-info .pl-meta{flex:1}}

/* mini player: thin progress line (mobile) + drag up follows the finger */
.pl-mbar{display:none;position:absolute;left:16px;right:16px;bottom:calc(3px + env(safe-area-inset-bottom));height:2px;border-radius:2px;background:rgba(255,255,255,.16);overflow:hidden;pointer-events:none}
.pl-mbar i{display:block;height:100%;width:0;background:#fff;border-radius:2px;transition:width .25s linear}
@media(max-width:759px){.pl-mbar{display:block}.player{touch-action:none}}
.sheet-card{position:relative;touch-action:none;padding-top:22px}
.sheet-card::before{content:"";position:absolute;top:8px;left:50%;width:38px;height:4px;margin-left:-19px;border-radius:2px;background:rgba(255,255,255,.22)}

/* =================================================================== responsive: every screen size ============ */
.nav-logo{display:none}
/* small phones: header = logo + account; the search field lives on the Sök tab (like Spotify) */
@media(max-width:599px){
  .top .search{display:none}
  .app.tab-search .top .search{display:block}
  .app.tab-search .top > .logo{display:none}
  .top{justify-content:space-between}
}
@media(max-width:360px){
  .top{padding:12px 14px}.view{padding-left:14px;padding-right:14px}
  .feat{gap:14px;padding:14px}.feat-art,.feat .gen{width:78px;height:78px}.feat-title{font-size:21px}
  .feat-label{font-size:10.5px}.row{grid-auto-columns:138px;gap:12px}
  .np-title{font-size:22px}.np{gap:14px}
}
/* phone on its side / short screens: now playing goes side by side */
@media(orientation:landscape) and (max-height:560px){
  .np{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto auto auto minmax(0,1fr);
      column-gap:clamp(20px,5vw,56px);row-gap:12px;align-content:center;justify-items:center;
      padding:18px max(28px,env(safe-area-inset-right)) 14px max(28px,env(safe-area-inset-left))}
  .np-close{position:absolute;top:8px;left:max(10px,env(safe-area-inset-left))}
  .np .np-art{grid-column:1;grid-row:1 / span 5;align-self:center;width:min(76vh,42vw)}
  .np-meta,.np-bar,.np-buttons,.np-lyrics{grid-column:2}
  .np-bar{width:min(100%,440px)}.np-title{font-size:22px}
  .np-buttons .main{width:58px;height:58px}.np-lyrics{width:100%;max-height:100%;line-height:1.7;font-size:14px}
  .top{padding-top:8px;padding-bottom:8px}
}
/* tablets and up: player bar = info | controls centred | extras */
@media(min-width:760px){
  .player{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) minmax(0,1fr);gap:20px}
  .pl-ctr{max-width:640px;width:100%;justify-self:center}
  .pl-expand{justify-self:end}
  .row{grid-auto-flow:row;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));overflow:visible}
  .feat-art,.feat .gen{width:150px;height:150px}.feat-title{font-size:38px}.feat{padding:22px;gap:24px}
  .hero .hart,.hero .gen{width:200px;height:200px}.hero h1{font-size:52px}
  .np-art{width:min(70vw,440px,46vh)}
}
/* desktop: Spotify-style left sidebar, player across the bottom */
@media(min-width:1024px){
  :root{--side:236px;--pbar:84px}
  .app{padding-left:var(--side)}
  .nav{top:0;bottom:var(--pbar);right:auto;width:var(--side);height:auto;flex-direction:column;justify-content:flex-start;
       align-items:stretch;gap:4px;padding:18px 12px;border-top:0;border-right:1px solid rgba(255,255,255,.06);background:#0b0b0f}
  .nav-logo{display:inline-flex;margin:2px 10px 22px}
  .top > .logo{display:none}
  .nav-b{flex:none;flex-direction:row;gap:16px;font-size:15px;font-weight:700;padding:11px 14px;border-radius:10px;justify-content:flex-start}
  .nav-b:hover{color:var(--text);background:rgba(255,255,255,.04)}
  .nav-b.on{background:rgba(255,255,255,.07)}
  .nav-b .ic{font-size:24px}
  .player{bottom:0!important;height:var(--pbar);padding-top:0;padding-bottom:0;z-index:30}
  .view{padding:6px 32px 140px}
  .top{padding:14px 32px}
  .search{margin-right:auto;max-width:480px}
  .row{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:20px}
  .np-art{width:min(60vw,560px,52vh)}
  .np-title{font-size:34px}
}
@media(min-width:1600px){
  :root{--side:280px}
  .row{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
  .feat-art,.feat .gen{width:190px;height:190px}.feat-title{font-size:48px}
}

/* Report a problem */
.report-card{text-align:center}
#report-form{display:flex;flex-direction:column;gap:10px;text-align:left}
#report-form textarea,#report-form input{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:13px;
  padding:14px 16px;color:var(--text);font:inherit;resize:vertical;min-height:52px}
#report-form textarea{min-height:120px}
#report-form textarea:focus,#report-form input:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px rgba(194,60,255,.18)}
#report-form textarea::placeholder,#report-form input::placeholder{color:#6f6f7d}
.rp-note{color:var(--muted);font-size:12px;line-height:1.5;margin:0 2px}
#report-form .join-go{margin:4px 0 0}
#report-form .join-go:disabled{opacity:.6}
#report-form .vf-msg{text-align:center;min-height:0;margin:0}

/* ---- playlists (2026-10-29) ---- */
#pn-form{display:flex;flex-direction:column;gap:10px;text-align:left}
#pn-form textarea,#pn-form input[type=text]{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:13px;
  color:var(--text);padding:13px 14px;font:inherit;font-size:15px;resize:none}
#pn-form textarea:focus,#pn-form input[type=text]:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px rgba(194,60,255,.18)}
#pn-form .join-go{margin:4px 0 0}#pn-form .vf-msg{text-align:center;min-height:0;margin:0}
.pn-pub{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted);padding:2px 4px}
.pn-pub input{width:18px;height:18px;accent-color:var(--acc)}
.trk .tmore{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--muted);margin-right:-6px}
.trk .tmore:hover{background:var(--panel2);color:var(--text)}.trk .tmore .i{font-size:20px}
.acts-top{display:flex;align-items:center;gap:13px;padding:8px 12px 14px;border-bottom:1px solid var(--line);margin-bottom:6px;text-align:left}
.acts-top .tart,.acts-top .gen,.acts-top .plart{width:52px;height:52px;border-radius:10px;flex:none;overflow:hidden}
.acts-top .at{font-weight:750;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acts-top .as{color:var(--muted);font-size:13px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acts-top>div:last-child{min-width:0}
.acts-list{max-height:min(52vh,420px);overflow-y:auto;overscroll-behavior:contain}
.acts-list .sheet-row{display:flex;align-items:center;gap:12px}
.acts-list .sheet-row .i{font-size:20px;flex:none}
.acts-list .sheet-row .plart{width:40px;height:40px;border-radius:8px;flex:none}
.acts-list .sheet-row .sr-sub{color:var(--muted);font-weight:500;font-size:12.5px;margin-left:auto;flex:none}
/* playlist cover: one picture, or a 2x2 mosaic, or a gradient with a note */
.plart{display:grid;overflow:hidden;background:var(--panel2)}
.plart.m4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.plart img{width:100%;height:100%;object-fit:cover;display:block}
.plart.gen{place-items:center}.plart .gnote{font-size:2.2em;opacity:.9}
.card .plart{width:100%;aspect-ratio:1;border-radius:12px;box-shadow:0 10px 26px -12px rgba(0,0,0,.7)}
.hero .plart{width:148px;height:148px;border-radius:18px;flex:none;box-shadow:var(--shadow);font-size:28px}
.hero .hk{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.hero .hdesc{color:var(--muted);font-size:14px;margin-top:6px;max-width:560px}
.pl-acts{display:flex;align-items:center;gap:12px;margin:6px 2px 10px}
.pl-acts .feat-play{position:static;margin-top:0}
.pl-acts .roundb{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);color:var(--text)}
.pl-acts .roundb .i{font-size:22px}
.card.newpl .plart{background:rgba(255,255,255,.04);border:1.5px dashed var(--line);box-shadow:none;place-items:center}
.card.newpl .plart .i{font-size:40px;color:var(--muted)}
.np-tools{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
@media (min-width:760px){.hero .plart{width:200px;height:200px}}
.acts-list{touch-action:pan-y}

/* ===================================================================================================== */
/* ---- listening experience pass (2026-10-29): skeletons, fades, queue, modes, volume, dynamic colour ---- */
@property --dyn{syntax:"<color>";inherits:true;initial-value:#2a1440}
@property --p{syntax:"<number>";inherits:true;initial-value:0}
:root{transition:--dyn .9s ease}
.view{position:relative;isolation:isolate}

/* skeleton loading: soft shimmer, same shapes as the real page */
.skel{animation:gbl-fade-in .25s ease both}
.sk{background:linear-gradient(90deg,rgba(255,255,255,.055) 0%,rgba(255,255,255,.11) 40%,rgba(255,255,255,.055) 80%);
  background-size:300% 100%;animation:gbl-shimmer 1.3s ease-in-out infinite;border-radius:10px}
@keyframes gbl-shimmer{from{background-position:100% 0}to{background-position:-50% 0}}
.sk-feat{height:190px;border-radius:22px;margin-top:10px}
.sk-line{height:13px;margin:7px 0}.sk-line.thin{height:10px;opacity:.7}.sk-h{height:20px;margin:28px 2px 16px}
.w30{width:30%}.w40{width:40%}.w45{width:45%}.w50{width:50%}.w55{width:55%}.w60{width:60%}.w65{width:65%}.w70{width:70%}.w80{width:80%}
.sk-row{display:grid;grid-auto-flow:column;grid-auto-columns:160px;gap:16px;overflow:hidden}
.sk-card{padding:12px;background:var(--panel);border-radius:16px}.sk-sq{aspect-ratio:1;border-radius:12px;margin-bottom:10px}
.sk-trk{display:flex;align-items:center;gap:13px;padding:9px 10px}.sk-tart{width:48px;height:48px;border-radius:9px;flex:none}.sk-tm{flex:1}
.sk-hero{display:flex;gap:22px;align-items:flex-end;padding:26px 2px 14px}.sk-hart{width:148px;height:148px;border-radius:18px;flex:none}.sk-hl{flex:1}
.sk-hl .sk-line:first-child{height:34px}

/* real content arriving after a skeleton rises in, a little staggered */
.vin>*{animation:gbl-fade-in .38s cubic-bezier(.2,.8,.2,1) both}
.vin>*:nth-child(2){animation-delay:.03s}.vin>*:nth-child(3){animation-delay:.06s}.vin>*:nth-child(4){animation-delay:.09s}
.vin>*:nth-child(5){animation-delay:.12s}.vin>*:nth-child(6){animation-delay:.15s}.vin>*:nth-child(n+7){animation-delay:.18s}

/* images fade in once decoded */
img.fi{opacity:0;transition:opacity .4s ease}img.fi.ld{opacity:1}

/* page colour wash behind artist / playlist / genre headers */
.ptint{position:absolute;left:0;right:0;top:0;height:340px;pointer-events:none;z-index:-1;
  background:linear-gradient(180deg,color-mix(in srgb,var(--pc) 70%,transparent),transparent);opacity:.9}
h2.sec.big{font-size:34px;letter-spacing:-1px;margin-top:22px}
.hero .hk{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.75);margin-bottom:4px}

/* "now playing" bars on the song's cover in lists */
.tart{position:relative}
.eq{position:absolute;inset:0;display:none;align-items:flex-end;justify-content:center;gap:3px;padding-bottom:13px;background:rgba(0,0,0,.45)}
.eq i{width:3.5px;height:16px;border-radius:2px;background:#fff;transform-origin:bottom;animation:gbl-eq .9s ease-in-out infinite}
.eq i:nth-child(2){animation-delay:-.35s;animation-duration:.75s}.eq i:nth-child(3){animation-delay:-.6s;animation-duration:1.05s}
@keyframes gbl-eq{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
.trk.playing .eq,.q-row.now .eq{display:flex}
.is-paused .eq i{animation-play-state:paused}
.trk.playing .tt{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.trk.unavail{opacity:.35;filter:grayscale(1)}

/* toasts slide in and out */
.toast{animation:gbl-toast-in .3s cubic-bezier(.2,.8,.2,1.2);max-width:calc(100vw - 32px);text-align:center}
.toast.out{animation:gbl-toast-out .25s ease forwards}
@keyframes gbl-toast-in{from{opacity:0;transform:translate(-50%,-14px) scale(.96)}}
@keyframes gbl-toast-out{to{opacity:0;transform:translate(-50%,-10px) scale(.97)}}

/* play/pause icon morphs instead of snapping */
.main .i,.pl-mplay .i{animation:gbl-icin .24s cubic-bezier(.2,.8,.2,1.3)}
@keyframes gbl-icin{from{transform:scale(.4) rotate(-20deg);opacity:0}}

/* loading ring around play while a song is fetched (fills with the download) */
.pl-buttons .main,.np-buttons .main,.pl-mplay{position:relative}
.loading .pl-buttons .main::after,.loading .np-buttons .main::after,.loading .pl-mplay::after{content:"";position:absolute;inset:-5px;border-radius:50%;
  border:2.5px solid rgba(255,255,255,.18);border-top-color:#fff;animation:gbl-spin .8s linear infinite}
@keyframes gbl-spin{to{transform:rotate(360deg)}}
.loading .pl-buttons .main .i,.loading .np-buttons .main .i,.loading .pl-mplay .i{opacity:.55}

/* progress: one variable (--p) drives fill + knob, painted every frame; bigger touch target; drag to seek */
.pl-track i,.np-track i{width:calc(var(--p) * 100%)!important;transition:none}
.pl-track,.np-track{touch-action:none;transition:height .15s ease}
.pl-track::before,.np-track::before{content:"";position:absolute;inset:-12px 0}
.pl-track::after,.np-track::after{content:"";position:absolute;top:50%;left:calc(var(--p) * 100%);width:14px;height:14px;margin:-7px 0 0 -7px;
  border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.5);transform:scale(0);transition:transform .15s ease}
.pl-track:hover::after,.np-track::after,.pl-track.drag::after{transform:scale(1)}
.np-track:not(.drag)::after{transform:scale(.75)}
.pl-track.drag,.np-track.drag{height:8px}
.pl-track:hover i,.pl-track.drag i{background:var(--grad)}
.pl-mbar i{width:calc(var(--p) * 100%)!important;transition:none}

/* shuffle / repeat: lit + a dot when on */
.mode-b{position:relative;color:var(--muted)!important;opacity:1!important}
.mode-b.on{color:var(--acc2)!important}
.mode-b.on::after{content:"";position:absolute;bottom:2px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:currentColor}
.pl-buttons .mode-b{font-size:17px}
.np-buttons{gap:clamp(6px,4.5vw,26px)}
.np-buttons .mode-b{width:42px;height:42px;font-size:22px}

/* now playing: title row with the heart, extra row (sleep / volume / queue) */
.np-head{display:flex;align-items:center;gap:12px;width:min(92vw,440px);text-align:left}
.np-ttl{flex:1;min-width:0}
.np-ttl .np-title,.np-ttl .np-artist{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.np-like{flex:none;width:44px;height:44px;display:grid;place-items:center;font-size:26px;color:var(--muted);transition:transform .14s}
.np-like.on{color:var(--acc2)}.np-like.on .i path{fill:currentColor}
.np-like.pop{animation:gbl-pop .38s cubic-bezier(.2,.8,.2,1.4)}
.np-meta{width:min(92vw,440px)}
.np-meta .np-tools{margin-top:10px;flex-wrap:nowrap}
.np-meta .np-offline{padding:8px 14px;font-size:12.5px;white-space:nowrap}
.np-extra{display:flex;align-items:center;justify-content:space-between;gap:14px;width:min(92vw,440px);margin-top:-4px}
.side-b{position:relative;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:20px;color:var(--muted);transition:color .15s,background .15s,transform .14s}
.side-b:hover{color:var(--text);background:rgba(255,255,255,.08)}.side-b:active{transform:scale(.9)}
.side-b.on{color:var(--acc2)}
.sleep-left{position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);font-size:9.5px;font-weight:800;color:var(--acc2);white-space:nowrap}
.np-extra .np-vol{flex:1;max-width:220px}

/* volume */
.vol{display:flex;align-items:center;gap:6px}
.vol-track{position:relative;flex:1;min-width:80px;height:5px;border-radius:3px;background:rgba(255,255,255,.16);cursor:pointer;touch-action:none}
.vol-track::before{content:"";position:absolute;inset:-10px 0}
.vol-track i{position:absolute;inset:0 auto 0 0;width:calc(var(--v,1) * 100%);border-radius:3px;background:#fff}
.vol-track:hover i,.vol-track.drag i{background:var(--grad)}
.vol-track::after{content:"";position:absolute;top:50%;left:calc(var(--v,1) * 100%);width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#fff;transform:scale(0);transition:transform .15s}
.vol-track:hover::after,.vol-track.drag::after{transform:scale(1)}
.no-vol .vol{display:none!important}
@media (pointer:coarse){.np-vol{display:none!important}}

/* desktop player bar: right side = queue, volume, expand */
.pl-side{display:flex;align-items:center;gap:6px;justify-content:flex-end;flex:none}
.pl-side .vol{width:130px}
@media(max-width:759px){.pl-side{display:none}}
@media(min-width:760px) and (max-width:1023px){.pl-side .vol{display:none}}
@media(min-width:1024px){.player{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) minmax(0,1fr)}.pl-side{justify-self:end}}

/* the cover in flight between mini player and now playing */
.flyer{position:fixed;z-index:45;background-size:cover!important;background-position:center!important;transform-origin:0 0;pointer-events:none;
  display:grid;place-items:center;font-size:96px;box-shadow:0 30px 70px -25px #000;will-change:transform}

/* dynamic colour: now playing and the phone mini player take the cover's colour */
.np{background:linear-gradient(180deg,var(--dyn) 0%,color-mix(in srgb,var(--dyn) 35%,#0a0a0c) 45%,#0a0a0c 92%)!important}
@media(max-width:759px){
  .player{background:var(--minibg)!important;border-radius:12px;left:8px!important;right:8px!important;
    border:0;box-shadow:0 10px 30px -10px rgba(0,0,0,.8);padding:8px 10px 8px 8px!important}
  .pl-mbar{left:10px;right:10px;bottom:0!important}
  .pl-cover{width:42px;height:42px;border-radius:7px}
}

/* queue sheet */
.queue-card{max-height:86vh;display:flex;flex-direction:column}
.q-head{display:flex;align-items:center;justify-content:space-between;padding:8px 10px 4px}
.q-head .inst-title{margin:0}
.q-clear{font-size:13px;font-weight:700;color:var(--muted);padding:8px 12px;border-radius:999px;border:1px solid var(--line)}
.q-clear:hover{color:var(--text)}
.q-list{overflow-y:auto;flex:1;min-height:120px;padding:0 4px 8px;overscroll-behavior:contain}
.q-sec{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:16px 8px 6px}
.q-row{display:flex;align-items:center;gap:12px;padding:7px 8px;border-radius:12px;cursor:pointer;background:var(--panel);touch-action:pan-y;overflow:hidden}
.q-row:hover{background:var(--panel2)}
.q-row .tart{width:44px;height:44px;border-radius:8px;flex:none;overflow:hidden}
.q-row .tm{flex:1;min-width:0}
.q-row .tt{font-weight:700;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.q-row .ts{color:var(--muted);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.q-row.now .tt{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.q-row.past{opacity:.55}
.q-x,.q-grip{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--muted);font-size:18px}
.q-x:hover{color:var(--text);background:rgba(255,255,255,.08)}
.q-grip{cursor:grab;touch-action:none;font-size:20px}
.q-row.dragging{position:relative;z-index:3;background:var(--panel2);box-shadow:0 14px 30px -10px rgba(0,0,0,.8);transition:none!important}
.q-row.dragging .q-grip{cursor:grabbing;color:var(--text)}
.q-row.del{background:linear-gradient(90deg,var(--panel),#5a1622)}
.q-empty{color:var(--muted);font-size:13px;padding:6px 10px}
@media(pointer:coarse){.q-x{display:none}}
.icon-art{display:grid;place-items:center;background:var(--grad);font-size:22px;color:#fff}

@media (prefers-reduced-motion:reduce){:root{transition:none}.sk{animation:none}}


/* "spelas nu" grows out of the mini player (ux.js morph, --mp 0..1): the big controls fade/rise in, and a layer in
   the mini player's own colour fades into the big background so the two read as one surface */
:root{--minibg:rgb(18,18,23)}
@media(max-width:759px){:root{--minibg:color-mix(in srgb,var(--dyn) 58%,#0d0d11)}}
.np>*:not(.np-art):not(.np-meta):not(.np-canvas):not(.np-shade):not(.np-vis),.np-meta .np-like,.np-meta .np-tools{opacity:clamp(0,calc((var(--mp,1) - .5) / .42),1);translate:0 calc((1 - var(--mp,1)) * 90px)}
#np-title,#np-artist{transform-origin:0 0}
/* while it grows, the mini player's own cover + text are hidden: the big ones start exactly on top of them */
.player.morphing .pl-cover,.player.morphing .pl-meta{visibility:hidden}
/* the growing box already has the mini player's colour, so the mini player itself is just its buttons now */
.player.morphing{background:transparent!important;box-shadow:none!important;border-color:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.player.morphing .pl-mbar{visibility:hidden}
.np::before{opacity:clamp(0,calc((var(--mp,1) - .5) * 2),1)}
.np::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--minibg);opacity:var(--mo,0)}

/* card picture <-> page picture (ux.js names both "gblhero" for one navigation) */
::view-transition-group(gblhero){animation-duration:.42s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
::view-transition-old(gblhero),::view-transition-new(gblhero){animation-duration:.42s;height:100%;width:100%;object-fit:cover}
.nav{transition:none}
.lander img{width:100%;height:100%;object-fit:cover;opacity:1}

/* generated covers: the initial / title scale with the picture itself */
.gen{container-type:inline-size}
.gen .gi{font-size:44cqi}

/* Header, tab bar and mini player stay ON TOP while pages slide: page transitions draw the page in a layer above
   everything, so these get their own (unchanging) layers, painted after the page. */
.top{view-transition-name:gbltop}
.nav{view-transition-name:gblnav}
.player{view-transition-name:gblplayer}
::view-transition-group(gbltop),::view-transition-group(gblnav),::view-transition-group(gblplayer){animation:none}
::view-transition-old(gbltop),::view-transition-old(gblnav),::view-transition-old(gblplayer){display:none}
::view-transition-new(gbltop),::view-transition-new(gblnav),::view-transition-new(gblplayer){animation:none}
/* phones: a solid floor behind the floating mini player (down to the tab bar), so the page never shows through
   around or under it. It lives INSIDE the player, so it stays in the player's layer during page slides too. */
@media(max-width:759px){
  .player{background:transparent!important;box-shadow:none!important}
  .player::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--minibg);z-index:-1;
    box-shadow:0 10px 30px -10px rgba(0,0,0,.8)}
  .player::before{content:"";position:absolute;left:-8px;right:-8px;top:-22px;bottom:calc(-60px - env(safe-area-inset-bottom));
    background:linear-gradient(180deg,transparent,var(--bg) 16px);z-index:-2;pointer-events:none}
  .player.morphing::before,.player.morphing::after{display:none}
}

/* ---- SuperColors (same palette + meaning as the Super app): "GBL" is the neutral name, "Play" carries the colour
   of what the app is really doing. A colour may never lie. Working states breathe. ---- */
:root{--sc-white:#ffffff;--sc-green:#4ade80;--sc-red:#f87171;--sc-blue:#60a5fa;--sc-amber:#fbbf24;--sc-purple:#c084fc;--sc-cyan:#22d3ee;--sc:var(--sc-white)}
html[data-sc="audio"]{--sc:var(--sc-purple)}
html[data-sc="interaction"]{--sc:var(--sc-cyan)}
html[data-sc="building"]{--sc:var(--sc-blue)}
html[data-sc="success"]{--sc:var(--sc-green)}
html[data-sc="recovery"]{--sc:var(--sc-amber)}
html[data-sc="failure"]{--sc:var(--sc-red)}
.logo .lg-gbl{color:var(--text)}
.logo .lg-play{color:var(--sc);transition:color .4s ease}
html[data-sc-move="breath"] .lg-play{animation:gbl-breath 2s ease-in-out infinite}
html[data-sc-move="call"] .lg-play{animation:gbl-call 1.4s ease-in-out infinite}
.lg-play.ack{animation:gbl-ack .6s cubic-bezier(.2,.8,.2,1.4)}
@keyframes gbl-ack{40%{text-shadow:0 0 18px var(--sc);transform:scale(1.08)}}
.lg-play{display:inline-block}
@keyframes gbl-breath{50%{opacity:.45}}
@keyframes gbl-call{50%{opacity:.3}}
.sc-logo{cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:10px;transition:transform .14s ease}
.sc-logo:active{transform:scale(.94)}
.sc-logo:focus-visible{outline:2px solid var(--sc);outline-offset:4px}

/* about sheet */
.about-card{max-height:88vh;display:flex;flex-direction:column}
.about-scroll{overflow-y:auto;flex:1;padding:6px 8px 8px;overscroll-behavior:contain}
.about-head{display:flex;flex-direction:column;align-items:center;text-align:center;padding:18px 8px 6px}
.about-mark{width:84px;height:84px;background:url(/logo-mark.png) center/contain no-repeat;filter:drop-shadow(0 0 22px color-mix(in srgb,var(--sc) 55%,transparent));
  transition:filter .4s ease}
#about:not([hidden]) .about-mark{animation:gbl-mark-in .7s cubic-bezier(.2,.8,.2,1.2)}
@keyframes gbl-mark-in{from{transform:scale(.4) rotate(-120deg);opacity:0}}
.sc-logo-big{font-size:34px;margin-top:10px}
.sc-logo-big::before{display:none}
.about-tag{margin:4px 0 0;color:var(--muted)}
.about-state{display:inline-flex;align-items:center;gap:8px;margin:14px 0 0;padding:7px 14px;border-radius:999px;font-size:13px;font-weight:700;
  background:color-mix(in srgb,var(--sc) 12%,transparent);color:var(--sc);transition:color .4s,background .4s}
.about-state i{width:8px;height:8px;border-radius:50%;background:currentColor}
html[data-sc-move="breath"] .about-state i{animation:gbl-breath 2s ease-in-out infinite}
html[data-sc-move="call"] .about-state i{animation:gbl-call 1.4s ease-in-out infinite}
.about-sec{margin:14px 6px 0;padding:14px 14px;border-radius:16px;background:var(--panel2)}
.about-sec h4{margin:0 0 8px;font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.about-new{margin:0;padding-left:18px;line-height:1.75;font-size:14px}
.about-muted{margin:0;color:var(--muted);font-size:14px}
.about-btn{margin-top:10px;padding:9px 16px;border-radius:999px;border:1px solid var(--line);font-weight:700;font-size:13px}
.about-btn.danger{color:#ff6b6b}
.about-keys dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0;font-size:13.5px}
.about-keys dt{font-weight:800;color:var(--text);white-space:nowrap}
.about-keys dd{margin:0;color:var(--muted)}
@media(pointer:coarse){.about-keys{display:none}}
.about-links{padding:4px}
.about-ver{text-align:center;color:var(--muted);font-size:12px;margin:16px 0 6px}

/* toasts sit at the bottom, just above the player / tab bar, so they never cover the logo's SuperColor */
.toast{top:auto!important;bottom:calc(var(--toastb,24px) + env(safe-area-inset-bottom))}
@media(max-width:759px){:root{--toastb:76px}.app:has(#player:not([hidden])) ~ .toast,body:has(#player:not([hidden])) .toast{--toastb:150px}}
@media(min-width:760px){body:has(#player:not([hidden])) .toast{--toastb:100px}}
@keyframes gbl-toast-in{from{opacity:0;transform:translate(-50%,14px) scale(.96)}}
@keyframes gbl-toast-out{to{opacity:0;transform:translate(-50%,10px) scale(.97)}}

/* ---- admin edit sheet ---- */
.edit-card{max-height:92vh;display:flex;flex-direction:column}
.edit-card .inst-title{margin:10px 8px 6px}
.edit-scroll{overflow-y:auto;flex:1;padding:4px 8px 6px;overscroll-behavior:contain}
.ed-pic{position:relative;width:150px;aspect-ratio:1;margin:6px auto 10px;border-radius:16px;background-size:cover!important;background-position:center!important;
  cursor:pointer;box-shadow:var(--shadow);overflow:hidden}
.ed-pic.round{border-radius:50%}
.ed-pic-tag{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;gap:6px;padding:9px 6px;
  background:linear-gradient(transparent,rgba(0,0,0,.75));font-size:12.5px;color:#fff}
.ed-pic-tag .i{font-size:15px}
.ed-pic.changed{outline:2px solid var(--sc-green);outline-offset:3px}
.ed-row{display:flex;flex-direction:column;gap:5px;margin:10px 0}
.ed-lab{font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.ed-in{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:11px 13px;color:var(--text);font:inherit;font-size:15px;resize:vertical}
.ed-in:focus{outline:none;border-color:var(--acc1)}
.ed-hint{font-size:12px;color:var(--muted)}
.ed-two{display:grid;grid-template-columns:1fr 92px;gap:10px}
.ed-two .ed-row{min-width:0}
.ed-check{display:flex;align-items:center;gap:8px;justify-content:center;font-size:13.5px;color:var(--muted);margin:0 0 6px}
.ed-pub{justify-content:flex-start;margin:12px 0 4px;color:var(--text);font-weight:600}
.ed-check input{width:18px;height:18px;accent-color:var(--acc1)}
.edit-actions{display:grid;grid-template-columns:1fr 1.4fr;gap:10px;padding:8px 8px 0}
.ed-cancel{padding:13px;border-radius:999px;border:1px solid var(--line);font-weight:700}
.ed-save{margin:0}
.hbio{margin:10px 0 0;color:rgba(255,255,255,.8);font-size:14px;line-height:1.5;max-width:560px;white-space:pre-line;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}

/* song change crossfade: the frozen old cover/title sits exactly over the new one while they swap */
.pl-info,.np-head{position:relative}
.swap-ghost{position:absolute!important;margin:0!important;pointer-events:none;z-index:1}
.np-ttl.swap-ghost{flex:none}

/* generated covers are ONE picture at every size: the ♪ and the title scale with the cover (container units),
   so a 42 px mini cover, a list tile, a card and the big "spelas nu" cover are the same image */
.gen::after{border-radius:inherit}
.gen .gnote{font-size:14cqi}
.gen .gt{font-size:9.5cqi}
.plart.gen .gnote{font-size:34cqi;position:static}
.np-art.gen,.pl-cover.gen{overflow:hidden}
.np-art.gen{font-size:inherit}

/* big cover shadow: three soft layers instead of one 90 px blur (that one was cut off in a faint rectangle) */
.np-art{box-shadow:0 30px 50px -16px rgba(0,0,0,.6),0 18px 30px -10px rgba(0,0,0,.4),0 6px 12px -4px rgba(0,0,0,.35)}
.np.paused .np-art{box-shadow:0 16px 30px -18px rgba(0,0,0,.7)}

/* ===================================================================================================== */
/* ---- artist page v2, album pages, upcoming, share, stats (2026-10-29) ---- */
.ahead{position:relative;margin:-6px -18px 0;height:clamp(260px,42vh,420px);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.ahead-bg{position:absolute;inset:0;background-size:cover;background-position:center 30%;z-index:-2;will-change:transform}
.ahead::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.15) 45%,color-mix(in srgb,var(--pc,#222) 30%,var(--bg)) 100%)}
.ahead.gen-head .ahead-bg{filter:saturate(1.1)}
.ahead-meta{padding:0 22px 20px;min-width:0}
.ahead-name{margin:2px 0 0;font-size:clamp(40px,11vw,92px);font-weight:900;letter-spacing:-2.5px;line-height:.95;text-shadow:0 4px 30px rgba(0,0,0,.35);
  overflow-wrap:anywhere}
.ahead-ml{margin-top:10px;font-size:14px;color:rgba(255,255,255,.85);font-weight:600}
.ahead .hk{color:rgba(255,255,255,.8)}
.astick{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;margin:0 -18px;padding:10px 18px;height:56px;margin-bottom:-56px;
  background:color-mix(in srgb,var(--pc,#222) 55%,var(--bg));opacity:0;pointer-events:none;transform:translateY(-6px);transition:opacity .2s,transform .2s}
.astick.on{opacity:1;pointer-events:auto;transform:none}
.astick-name{font-weight:800;font-size:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.astick-play{width:38px;height:38px;border-radius:50%;background:#fff;color:#000;display:grid;place-items:center;font-size:16px;flex:none}
.a-acts{margin-top:16px}
.bigplay{width:56px;height:56px;border-radius:50%;background:#fff;color:#000;display:grid;place-items:center;font-size:22px;flex:none;
  box-shadow:0 10px 26px -10px rgba(255,255,255,.45);transition:transform .14s}
.bigplay:active{transform:scale(.92)}
.pill-b{display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.35);
  font-weight:800;font-size:13.5px;color:var(--text);white-space:nowrap;transition:transform .14s,background .2s,border-color .2s}
.pill-b:active{transform:scale(.94)}
.pill-b .i{font-size:16px}
.pill-b.on{border-color:var(--sc-green);color:var(--sc-green)}
.follow-b.on{border-color:rgba(255,255,255,.2);color:var(--muted)}
.roundb.sm{width:38px;height:38px}
.rank{width:22px;flex:none;text-align:center;color:var(--muted);font-weight:700;font-variant-numeric:tabular-nums;font-size:14px}
.more-b{margin:6px 0 4px 8px;padding:8px 0;font-weight:800;font-size:13.5px;color:var(--muted)}
.more-b:hover{color:var(--text)}
.more-b.inline{margin:6px 0 0}
.hero-artist{font-weight:800;font-size:15px;margin-top:6px;padding:0;color:var(--text)}
.hero-artist:hover{text-decoration:underline}
.linkish{cursor:pointer}.linkish:hover{text-decoration:underline}

/* artist's pick + upcoming + latest */
.apick,.upc,.latest{display:flex;gap:14px;align-items:center;padding:12px;border-radius:16px;background:var(--panel);margin:14px 0;cursor:pointer;
  transition:background .2s,transform .14s}
.apick:hover,.latest:hover{background:var(--panel2)}
.apick:active,.latest:active{transform:scale(.985)}
.apick-art,.latest-art{width:72px;height:72px;border-radius:12px;flex:none;overflow:hidden;box-shadow:0 10px 22px -12px #000}
.latest-art{width:104px;height:104px}
.apick-m,.latest-m,.upc-m{min-width:0;flex:1}
.upc-k{font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.apick-note{font-size:14px;margin-top:4px;color:var(--text);font-style:italic}
.apick-t,.latest-t,.upc-t{font-weight:800;font-size:17px;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.latest-t{font-size:20px}
.latest-s,.upc-a{color:var(--muted);font-size:13px;margin-top:2px}
.upc{cursor:default;align-items:flex-start;background:linear-gradient(135deg,color-mix(in srgb,var(--sc-blue) 14%,var(--panel)),var(--panel))}
.upc-art{width:96px;height:96px;border-radius:12px;flex:none;overflow:hidden;box-shadow:0 10px 22px -12px #000}
.upc-cd{font-size:22px;font-weight:900;letter-spacing:-.5px;margin:8px 0 10px;font-variant-numeric:tabular-nums}
.upc-acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.upc-home{margin-top:6px}

/* about */
.aabout-box{border-radius:18px;background:var(--panel);overflow:hidden;padding-bottom:16px}
.aabout-img{height:200px;background-size:cover;background-position:center 30%}
.aabout-stats{display:flex;gap:14px;flex-wrap:wrap;align-items:baseline;padding:14px 16px 0;font-size:14px;color:var(--muted)}
.aabout-stats b{color:var(--text);font-size:16px}
.aabout-bio{padding:0 16px;margin:10px 0 0;line-height:1.6;white-space:pre-line;color:rgba(255,255,255,.88)}
.aabout-bio.clamp{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.aabout-box .more-b{margin-left:16px}
.alinks{display:flex;flex-wrap:wrap;gap:8px;padding:14px 16px 0}
.link-b{text-decoration:none;border-color:var(--line);background:var(--panel2)}
.link-b:hover{border-color:rgba(255,255,255,.4)}
.tart.big{width:64px;height:64px}

/* stats */
.chip.on{background:#fff;color:#000;border-color:#fff}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:14px}
.tile{background:var(--panel);border-radius:16px;padding:14px 16px}
.tile-l{font-size:12.5px;color:var(--muted);font-weight:700}
.tile-v{font-size:28px;font-weight:700;margin-top:6px;letter-spacing:-.5px}
.tile-s{font-size:12px;color:var(--muted);margin-top:4px}
.chart-wrap{position:relative;background:var(--panel);border-radius:16px;padding:14px 10px 10px}
.chart{width:100%;height:auto;display:block;overflow:visible}
.chart .grid{stroke:#2b2b35;stroke-width:1}
.chart .tick{fill:var(--muted);font-size:11px;font-variant-numeric:tabular-nums}
.chart .bar{fill:#a855f7}
.chart .hit{fill:transparent;cursor:pointer;outline:none}
.chart .hit.on{fill:rgba(255,255,255,.05)}
.ctip{position:absolute;transform:translate(-50%,-100%);margin-top:6px;background:#26262f;border:1px solid var(--line);border-radius:10px;padding:8px 11px;
  pointer-events:none;display:flex;flex-direction:column;gap:2px;white-space:nowrap;font-size:12.5px;color:var(--muted);box-shadow:0 10px 24px -10px #000;z-index:3}
.ctip b{color:var(--text);font-size:14px}
.chart-table{margin-top:8px;font-size:13px}
.chart-table summary{cursor:pointer;color:var(--muted);font-weight:700;padding:4px 6px}
.chart-table table{width:100%;border-collapse:collapse;margin-top:6px}
.chart-table th,.chart-table td{text-align:right;padding:6px 8px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.chart-table th:first-child,.chart-table td:first-child{text-align:left}
.stop{display:flex;flex-direction:column;gap:4px}
.stop-r{display:flex;align-items:center;gap:12px;padding:10px;border-radius:12px;background:var(--panel);cursor:pointer}
.stop-r:hover{background:var(--panel2)}
.stop-m{flex:1;min-width:0}
.stop-m .tt{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stop-m .ts{color:var(--muted);font-size:12.5px;margin-top:2px}
.stop-bar{height:4px;border-radius:2px;background:#24242c;margin-top:7px;overflow:hidden}
.stop-bar i{display:block;height:100%;background:#a855f7;border-radius:2px}
.stop-n{font-variant-numeric:tabular-nums;font-size:15px}

/* editors: artist pictures, links, sync, new song */
.ed-pics{display:flex;gap:14px;align-items:center;justify-content:center}
.ed-pics .ed-pic{margin:6px 0 4px;width:120px}
.ed-pic.wide{width:auto!important;flex:1;aspect-ratio:16/9;border-radius:14px}
.ed-hint.center{text-align:center;display:block;margin:2px 0 6px}
.ed-links{display:flex;flex-direction:column;gap:7px;margin:12px 0}
select.ed-in{appearance:auto}
.ed-sync{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:11px;border-radius:12px;border:1px dashed var(--line);
  color:var(--text);font-weight:700;font-size:13.5px;margin:2px 0 6px}
.ed-sync .i{font-size:17px}
.sync{padding:4px 10px 6px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
.sync-h{display:flex;justify-content:space-between;width:100%;color:var(--muted);font-size:13px}
.sync-h b{color:var(--text)}
.sync-prev,.sync-next{color:var(--muted);font-size:15px;min-height:1.4em}
.sync-cur{font-size:24px;font-weight:900;min-height:1.3em;line-height:1.25}
.sync-go{width:100%;margin:6px 0 0}
.sync-ctl{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.ed-drop{display:flex;flex-direction:column;align-items:center;gap:4px;padding:22px 12px;border-radius:16px;border:1.5px dashed var(--line);cursor:pointer;
  text-align:center;margin:6px 0 10px}
.ed-drop .i{font-size:28px;color:var(--muted)}
.ed-drop span{font-size:12.5px;color:var(--muted)}
.ed-drop.changed{border-color:var(--sc-green)}
.ed-when{display:flex;flex-direction:column;gap:2px;margin:12px 0}
.ed-when .ed-pub{margin:6px 0 0}
.ed-prog{height:6px;border-radius:3px;background:var(--panel2);overflow:hidden;margin:10px 0 2px}
.ed-prog i{display:block;height:100%;width:0;background:var(--sc-blue);transition:width .3s ease}
.consent{font-size:12px;color:var(--muted);line-height:1.5;margin:8px 0 0;text-align:center}
.consent a{color:var(--text)}
.danger-go{background:#e5484d!important}
@media(min-width:1024px){.ahead{margin:-6px -32px 0}.astick{margin:0 -32px -56px;padding:10px 32px}.ahead-meta{padding:0 32px 26px}}
@media(max-width:360px){.ahead{margin:-6px -14px 0}.astick{margin:0 -14px -56px;padding:10px 14px}}
@media(prefers-reduced-motion:reduce){.astick{transition:none}}
/* pages with a full-bleed header start flush under the top bar (the back button's negative margin swallows the
   header's own -6px, which left a thin strip of the page colour above it) */
.view:has(> .ahead){padding-top:0}
.view > .ahead{margin-top:0}
/* deep pages that start with a big heading: leave room for the round back button */
.back-btn ~ h2.sec.big{margin-top:54px}
.chips{flex-wrap:wrap}
/* the readable copy for search engines / no-JS visitors; the app shows the real page instead */
.js #seo{display:none}
#seo{max-width:680px;margin:40px auto;padding:0 22px;line-height:1.6}
#seo a{color:#c084fc}


/* ---- Canvas: a looping video fills "spelas nu"; the big cover steps aside (it grows in, then fades out) ---- */
.np-canvas,.np-shade,.np-vis{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1}
.np-canvas{object-fit:cover;opacity:0;transition:opacity .5s ease}
.np.has-canvas .np-canvas{opacity:var(--mp,1)}
.np-shade{opacity:0;background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 45%,rgba(0,0,0,.72) 72%,rgba(0,0,0,.9) 100%)}
.np.has-canvas .np-shade{opacity:var(--mp,1)}
.np.has-canvas .np-art{opacity:calc(1 - var(--mp,1));box-shadow:none}

/* visualizer canvas (drawn only while it plays) */
.np-vis{opacity:0;transition:opacity .6s ease}
.np-vis.on{opacity:calc(var(--mp,1) * .9)}

/* admin: canvas row in the song editor */
.ed-canvas{margin:12px 0}
.ed-canvas-box{display:flex;gap:12px;align-items:center;margin-top:6px}
.ed-canvas-pv{width:72px;height:128px;border-radius:10px;object-fit:cover;background:var(--panel2);flex:none}
.ed-canvas-s{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.ed-canvas-i{font-size:12.5px;color:var(--muted)}
.ed-canvas-b{display:flex;gap:8px;flex-wrap:wrap}

/* ---- Wrapped: full-screen story slides ---- */
.wrapped{position:fixed;inset:0;z-index:80;color:#fff;display:flex;flex-direction:column;overflow:hidden;
  background:var(--wbg);transition:background .6s ease;animation:gbl-fade-in .3s ease both;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.wrapped.w-out{animation:w-out .26s ease forwards}
@keyframes w-out{to{opacity:0;transform:scale(.98)}}
.w-a{--wbg:radial-gradient(120% 90% at 20% 10%,#a855f7,#4c1d95 55%,#120b1e)}
.w-b{--wbg:radial-gradient(120% 90% at 80% 0%,#ec4899,#831843 55%,#18070f)}
.w-c{--wbg:radial-gradient(120% 90% at 50% 0%,#22d3ee,#155e75 55%,#06141a)}
.w-d{--wbg:radial-gradient(120% 90% at 0% 20%,#f59e0b,#9a3412 55%,#1c0d05)}
.w-e{--wbg:radial-gradient(120% 90% at 100% 30%,#4ade80,#166534 55%,#06140b)}
.w-f{--wbg:radial-gradient(120% 90% at 30% 0%,#60a5fa,#1e3a8a 55%,#070b18)}
.w-g{--wbg:radial-gradient(120% 90% at 70% 10%,#f472b6,#6d28d9 55%,#100a1c)}
.w-h{--wbg:linear-gradient(160deg,#7c3aed,#db2777 60%,#111018)}
.w-bars{position:absolute;top:calc(12px + env(safe-area-inset-top));left:12px;right:56px;display:flex;gap:4px;z-index:2}
.w-bar{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.3);overflow:hidden}
.w-bar i{display:block;height:100%;width:0;background:#fff}
.w-x{position:absolute;top:calc(2px + env(safe-area-inset-top));right:8px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:22px;color:#fff;z-index:3}
.w-stage{flex:1;display:flex;align-items:center;justify-content:center;padding:70px 26px 40px}
.w-slide{width:100%;max-width:520px;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.w-slide>*{animation:w-in .7s cubic-bezier(.2,.8,.2,1) both}
.w-slide>*:nth-child(2){animation-delay:.12s}.w-slide>*:nth-child(3){animation-delay:.24s}.w-slide>*:nth-child(4){animation-delay:.36s}
.w-slide>*:nth-child(n+5){animation-delay:.48s}
@keyframes w-in{from{opacity:0;transform:translateY(24px)}}
.w-k{font-size:15px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;opacity:.85}
.w-huge{font-size:clamp(96px,30vw,180px);font-weight:900;letter-spacing:-6px;line-height:.9;margin:6px 0}
.w-big{font-size:clamp(40px,11vw,64px);font-weight:900;letter-spacing:-2px;line-height:1;margin:6px 0}
.w-num{font-size:clamp(72px,24vw,140px);font-weight:900;letter-spacing:-4px;line-height:1;font-variant-numeric:tabular-nums}
.w-unit{font-size:28px;font-weight:800;margin-top:-4px}
.w-p{font-size:17px;line-height:1.5;opacity:.9;margin:14px 0 0}
.w-title{font-size:clamp(34px,10vw,58px);font-weight:900;letter-spacing:-1.5px;line-height:1.02;margin:10px 0 0;overflow-wrap:anywhere}
.w-title.sm{font-size:clamp(28px,8vw,44px)}
.w-sub{font-size:18px;opacity:.85;margin-top:4px}
.w-fact{font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;opacity:.7;margin-top:22px}
.w-cover,.w-artist{width:min(68vw,300px);aspect-ratio:1;border-radius:18px;overflow:hidden;margin:16px 0 6px;box-shadow:0 30px 60px -20px rgba(0,0,0,.7)}
.w-artist{border-radius:50%}
.w-list{list-style:none;padding:0;margin:14px 0 0;width:100%;display:flex;flex-direction:column;gap:12px}
.w-list li{display:flex;align-items:center;gap:14px;animation:w-in .6s cubic-bezier(.2,.8,.2,1) both}
.w-rank{font-size:28px;font-weight:900;width:28px}
.w-mini{width:56px;height:56px;border-radius:10px;overflow:hidden;flex:none}
.w-lt{font-weight:800;font-size:19px}.w-la{opacity:.8;font-size:14px}
.w-card{width:100%;border-radius:22px;padding:22px;background:rgba(0,0,0,.28);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.w-card-k{font-weight:900;font-size:24px;letter-spacing:-.5px;margin-bottom:16px}
.w-card-g{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.w-card-l{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;opacity:.75;margin-bottom:6px}
.w-card-v{font-weight:700;font-size:14.5px;line-height:1.55;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.w-card-f{display:flex;gap:18px;margin-top:18px;font-weight:900;font-size:22px}
.w-card-brand{margin-top:14px;opacity:.7;font-weight:700;font-size:13px}
.w-share{margin-top:18px;display:inline-flex;align-items:center;gap:8px;background:#fff;color:#000;font-weight:800;padding:13px 24px;border-radius:999px;font-size:15px}
.w-banner{margin:10px 0 4px;padding:18px 20px;border-radius:20px;cursor:pointer;color:#fff;
  background:linear-gradient(120deg,#7c3aed,#db2777);box-shadow:0 18px 40px -18px rgba(219,39,119,.6);animation:gbl-fade-in .4s ease both}
.w-banner .w-k{font-size:12px}.w-bt{font-size:24px;font-weight:900;letter-spacing:-.5px;margin-top:4px}.w-bs{opacity:.85;font-size:14px}
@media(prefers-reduced-motion:reduce){.w-slide>*,.w-list li{animation:none}}

/* ---- EQ on the back of the cover ---- */
.np-art{-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
.eqback{position:absolute;z-index:3;border-radius:22px;padding:12px 12px 10px;display:flex;flex-direction:column;gap:8px;
  background:linear-gradient(160deg,color-mix(in srgb,var(--dyn) 55%,#14141a),#0f0f14);box-shadow:0 30px 60px -25px #000;
  border:1px solid rgba(255,255,255,.08);touch-action:none;opacity:1!important;translate:none!important}
.eq-head{display:flex;align-items:center;gap:8px}
.eq-title{font-size:17px;letter-spacing:.04em;cursor:pointer}
.eq-sw{padding:5px 11px;border-radius:999px;font-weight:800;font-size:12px;background:rgba(255,255,255,.12);color:var(--muted)}
.eq-sw.on{background:var(--sc-green);color:#062a14}
.eq-sel{flex:1;min-width:0;background:rgba(0,0,0,.3);color:var(--text);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:6px 8px;font:inherit;font-size:13px;font-weight:700}
.eq-done{width:34px;height:34px;border-radius:50%;background:#fff;color:#000;display:grid;place-items:center;font-size:18px;flex:none}
.eq-plot{position:relative;flex:1;min-height:110px;border-radius:12px;background:rgba(0,0,0,.25);overflow:hidden}
.eq-spec,.eq-svg{position:absolute;inset:0;width:100%;height:100%}
.eq-svg{touch-action:none;cursor:ns-resize}
.eq-grid{stroke:rgba(255,255,255,.07);stroke-width:1}
.eq-zero{stroke:rgba(255,255,255,.22);stroke-width:1}
.eq-line{fill:none;stroke:#fff;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.eq-fill{fill:rgba(255,255,255,.08)}
.eq-dot{fill:#fff;stroke:rgba(0,0,0,.45);stroke-width:2}
.eq-dot.on{fill:var(--sc-green)}
.eqback.off .eq-line{stroke:rgba(255,255,255,.35)}.eqback.off .eq-dot{fill:rgba(255,255,255,.4)}
.eq-labels{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums;padding:0 2px}
.eq-foot{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.eq-foot .pill-b{padding:6px 12px;font-size:12px}
.eq-ab.on{background:#fff;color:#000;border-color:#fff}
.eq-status{font-size:11.5px;color:var(--muted);margin-left:auto}
.eq-badge{position:absolute;z-index:2;font-size:10px;font-weight:900;letter-spacing:.05em;padding:3px 7px;border-radius:999px;
  background:rgba(0,0,0,.55);color:#fff;pointer-events:none;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.eq-labels{position:relative;height:14px;display:block}
.eq-labels span{position:absolute;top:0;transform:translateX(-50%)}

/* ---- EQ v2: a big card (cover top -> just above the progress bar), chip presets, value bubble ---- */
.eqback{padding:16px 16px 14px;gap:12px;border-radius:24px;
  background:linear-gradient(165deg,color-mix(in srgb,var(--dyn) 60%,#16161c) 0%,#111116 70%);box-shadow:0 40px 80px -30px #000}
.eq-head{gap:10px}
.eq-title{font-size:20px;font-weight:900;letter-spacing:-.4px;flex:1}
.eq-sw{padding:7px 14px;font-size:13px}
.eq-done{width:40px;height:40px;font-size:20px}
.eq-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:2px 16px;scroll-snap-type:x proximity;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 16px),transparent);mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 16px),transparent)}
.eq-chips::-webkit-scrollbar{display:none}
.eq-chip{flex:none;scroll-snap-align:center;padding:8px 15px;border-radius:999px;font-weight:800;font-size:13.5px;white-space:nowrap;
  background:rgba(255,255,255,.08);color:rgba(255,255,255,.85);border:1px solid rgba(255,255,255,.08);transition:background .2s,color .2s,transform .12s}
.eq-chip:active{transform:scale(.94)}
.eq-chip.on{background:#fff;color:#000;border-color:#fff}
.eq-chip.mine::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--sc-green);margin-right:7px;vertical-align:middle}
.eq-chip.add{background:transparent;border:1px dashed rgba(255,255,255,.35)}
.eq-namebox{flex:none;display:inline-flex;align-items:center;gap:6px}
.eq-name{width:130px;padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.4);background:rgba(0,0,0,.3);color:#fff;font:inherit;font-size:13.5px;font-weight:700}
.eq-name:focus{outline:none;border-color:#fff}
.eq-ok{width:34px;height:34px;border-radius:50%;background:#fff;color:#000;display:grid;place-items:center;font-size:16px}
.eq-plot{min-height:200px;border-radius:16px;background:rgba(0,0,0,.28)}
.eq-scale{position:absolute;left:8px;top:0;bottom:0;pointer-events:none}
.eq-scale span{position:absolute;left:0;transform:translateY(-50%);font-size:10px;color:rgba(255,255,255,.4);font-variant-numeric:tabular-nums}
.eq-line{stroke-width:3}
.eq-dot{stroke-width:2.5;transition:r .12s}
.eq-bubble{position:absolute;transform:translate(-50%,calc(-100% - 16px));background:#fff;color:#000;font-weight:800;font-size:13px;
  padding:6px 10px;border-radius:10px;white-space:nowrap;pointer-events:none;box-shadow:0 8px 20px -8px rgba(0,0,0,.6)}
.eq-bubble.below{transform:translate(-50%,16px)}
.eq-labels{height:16px;font-size:11.5px;color:rgba(255,255,255,.6)}
.eq-foot{gap:10px}
.eq-ab{padding:9px 16px;font-size:13px}
.eq-status{font-size:12px}

/* ---- stems: the "Mixa" side of the card ---- */
.eq-tabs{display:none;flex:1;gap:4px;background:rgba(0,0,0,.3);border-radius:999px;padding:4px}
.eqback.has-mix .eq-tabs{display:flex}
.eqback.has-mix .eq-title{display:none}
.eq-tab{flex:1;padding:8px 10px;border-radius:999px;font-weight:900;font-size:14px;color:rgba(255,255,255,.7);transition:background .2s,color .2s}
.eq-tab.on{background:#fff;color:#000}
.mixp{display:none;flex:1;min-height:0;flex-direction:column;gap:12px}
.eqback.mixtab .mixp{display:flex}
.eqback.mixtab .eq-sw,.eqback.mixtab > .eq-chips,.eqback.mixtab .eq-plot,.eqback.mixtab .eq-labels,.eqback.mixtab .eq-foot{display:none}
.mixp .eq-chips{margin:0 -16px}
.mix-rows{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding-right:2px}
.mix-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(90px,1.4fr) auto;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:rgba(0,0,0,.25)}
.mix-lab{min-width:0}
.mix-lab b{display:block;font-size:15px}
.mix-lab span{display:block;font-size:11.5px;color:rgba(255,255,255,.55);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mix-sl{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;touch-action:none}
.mix-sl::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,#fff var(--v),rgba(255,255,255,.18) var(--v))}
.mix-sl::-moz-range-track{height:6px;border-radius:3px;background:linear-gradient(90deg,#fff var(--v),rgba(255,255,255,.18) var(--v))}
.mix-sl::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;margin-top:-8px;box-shadow:0 2px 8px rgba(0,0,0,.5)}
.mix-sl::-moz-range-thumb{width:22px;height:22px;border:0;border-radius:50%;background:#fff}
.mix-solo{padding:7px 12px;border-radius:999px;font-weight:800;font-size:12px;border:1px solid rgba(255,255,255,.25);color:rgba(255,255,255,.8)}
.mix-solo.on{background:var(--sc-green);border-color:var(--sc-green);color:#062a14}
.mix-note{font-size:12px;color:rgba(255,255,255,.6);line-height:1.45}
/* karaoke: the synced lyrics take the stage */
.np-lyrics.karaoke{line-height:1.5;font-size:20px}
.np-lyrics.karaoke .ly{opacity:.35;margin:10px 0}
.np-lyrics.karaoke .ly.cur{font-size:30px;opacity:1;transform:none;text-shadow:0 0 24px color-mix(in srgb,var(--dyn) 70%,#fff)}
/* songs that can be mixed */
.badge.mix{background:linear-gradient(120deg,#22d3ee,#a855f7);color:#fff;letter-spacing:.06em}
.ed-stems{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.ed-stem{padding:5px 10px;border-radius:999px;background:var(--panel2);font-size:12.5px;font-weight:700}

/* ---- responsive fixes (2026-10-30 sweep: 320-1920 px, portrait/landscape) ---- */
/* song rows: the title shortens with "…" and its MIX/draft badge always stays visible */
.trk .tt{display:flex;align-items:center;gap:6px;min-width:0}
.trk .ttx{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.trk .tt .badge{flex:none;margin-left:0}
/* "spelas nu": the two pills fit small phones */
@media(max-width:380px){.np-meta .np-offline{padding:7px 11px;font-size:12px;gap:6px}.np-meta .np-offline .i{font-size:15px}}
@media(max-width:340px){.np-meta .np-tools{flex-wrap:wrap}}
/* mixer rows: on narrow screens the slider gets its own line under the name */
@media(max-width:420px){
  .mix-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"lab solo" "sl sl";row-gap:4px}
  .mix-lab{grid-area:lab}.mix-solo{grid-area:solo}.mix-sl{grid-area:sl}
}
/* short screens (landscape phones): a more compact EQ/mix card */
@media(max-height:520px){
  .eqback{gap:8px;padding:12px 14px 10px}
  .eq-plot{min-height:110px}
  .eq-done{width:34px;height:34px}.eq-tab{padding:6px 10px}
  .mix-row{padding:6px 10px}
}
/* the big cover is always square: it never gets squeezed by the flex column; on short screens it's a bit smaller */
.np-art{flex-shrink:0}
@media(max-height:640px) and (orientation:portrait){.np-art{width:min(70vw,34vh)}}

/* ---- QA pass 2026-10-30 ---- */
/* back button always on top of the sticky artist bar, which leaves room for it */
.back-btn{z-index:7}
.astick{padding-left:64px!important}
/* the little EQ/MIX/KARAOKE badge goes with the cover: hidden while it's swiped or the player is growing/shrinking */
.np.art-drag .eq-badge{opacity:0}
.eq-badge{transition:opacity .15s;opacity:clamp(0,calc((var(--mp,1) - .9) * 10),1)}
/* closing "spelas nu" by dragging: the rest fades out early, so the travelling title never sits on the buttons */
.np>*:not(.np-art):not(.np-meta):not(.np-canvas):not(.np-shade):not(.np-vis),.np-meta .np-like,.np-meta .np-tools{
  opacity:clamp(0,calc((var(--mp,1) - .62) / .3),1)}
/* lyrics scroll without a visible bar; karaoke grows the current line without moving the others */
.np-lyrics{scrollbar-width:none}.np-lyrics::-webkit-scrollbar{display:none}
.np-lyrics.karaoke .ly{margin:16px 0}.np-lyrics.karaoke .ly.cur{font-size:inherit;transform:scale(1.4);transform-origin:center}
/* search field: our own clear button look */
#q::-webkit-search-cancel-button{-webkit-appearance:none;width:18px;height:18px;cursor:pointer;opacity:.6;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center/contain no-repeat}
#q::-webkit-search-cancel-button:hover{opacity:1}
/* empty lists: a short helpful line, not a big hole */
.empty.sm{padding:14px 6px 6px;font-size:14px;text-align:left;color:var(--muted)}

/* ---- UI fix pass 2026-10-30 ---- */
@media(max-width:759px){
  /* the floor behind the mini player starts at its middle: no dark band over the page above it */
  .player::before{top:50%;background:var(--bg)}
  .player::after{box-shadow:0 4px 14px -8px rgba(0,0,0,.55)}
  /* the mini player is solid: blurring what's behind it cost a lot on phones and showed nothing */
  .player{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
}
/* progress: the fill and knob move on the GPU (transform), no layout every frame while a song plays */
.pl-track i,.np-track i,.pl-mbar i{width:100%!important;transform:scaleX(var(--p,0));transform-origin:0 50%;will-change:transform}
.pl-track,.np-track{container-type:inline-size}
.pl-track::after,.np-track::after{left:0!important;translate:calc(var(--p,0) * 100cqw) 0}
/* install banner on phones: picture + text + ✕ on top, the button full width under them (nothing overlaps) */
@media(max-width:420px){
  .inst-banner{display:grid;grid-template-columns:44px minmax(0,1fr) 34px;column-gap:12px;row-gap:12px;padding:14px}
  .inst-banner img{width:44px;height:44px;grid-row:1;grid-column:1}
  .inst-banner .ib-txt{grid-row:1;grid-column:2}
  .inst-banner .ib-x{grid-row:1;grid-column:3}
  .inst-banner .ib-go{grid-row:2;grid-column:1/-1;text-align:center}
}
/* EQ/Mixa card: the fixed parts never get squeezed; only the curve/mixer list shrinks on small screens */
.eqback>.eq-head,.eqback>.eq-tabs,.eqback>.eq-chips,.mixp>.eq-chips,.eqback>.eq-labels,.eqback>.eq-foot,.eqback .eq-note,.mix-note{flex-shrink:0}
.eq-plot{min-height:90px!important}
/* tablets: the song title gets more room in the player bar, the extras only what they need */
@media(min-width:760px) and (max-width:1023px){.player{grid-template-columns:minmax(0,1.25fr) minmax(0,1.5fr) auto}}