:root{
  /* Kept from the reverted design pass: the ramp used to be Tailwind's zinc,
     every surface at hue 240 exactly, under a 20-degree orange accent. Same
     lightness, one point of warmth, so the accent belongs to its family. */
  --bg:#0a0a09; --bg2:#0e0d0c; --card:#131211; --row:#1b1a18; --line:#262421;
  --txt:#fafaf9; --mut:#a3a09b; --dim:#757069;
  --acc:#e5602f; --acc-soft:rgba(229,96,47,.12);
  --cream:#f2ece0; --print:#cf4a17;
  --ok:#4ade80; --bad:#f87171;
}
@keyframes eq{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes sheen{to{background-position:200% 0}}
@keyframes bob{0%,100%{transform:translateY(0);opacity:.85}50%{transform:translateY(8px);opacity:.35}}
*{box-sizing:border-box;}
html,body{height:100%;}
body{margin:0;font:14px/1.5 "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--txt);
  -webkit-font-smoothing:antialiased;overflow:hidden;}
button{font:inherit;cursor:pointer;}
input,textarea{font:inherit;}
::selection{background:rgba(232,169,68,.3);}

.app{display:grid;grid-template-columns:232px minmax(0,1fr);grid-template-rows:100vh;height:100vh;}

/* ---------- sidebar ---------- */
.side{background:var(--bg2);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0;}
.brand{padding:20px 20px 16px;font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:14.5px;letter-spacing:.2px;display:flex;align-items:center;gap:10px;color:var(--txt);}
.brand .dot{display:flex;align-items:flex-end;gap:2px;width:16px;height:13px;}
.brand .dot i{display:block;width:3px;background:linear-gradient(180deg,#ff9d6b,#e5602f);border-radius:2px;height:100%;animation:eq 1.1s ease-in-out infinite;}
.brand .dot i:nth-child(2){animation-delay:.15s}.brand .dot i:nth-child(3){animation-delay:.3s}.brand .dot i:nth-child(4){animation-delay:.45s}
.nav{padding:6px 12px;display:flex;flex-direction:column;gap:2px;}
.nav-label{padding:16px 12px 6px;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--dim);font-weight:600;}
.nav button{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:transparent;border:0;
  color:var(--mut);padding:9px 12px;border-radius:8px;font-size:13.5px;font-weight:500;transition:background .12s,color .12s;}
.nav button svg{width:16px;height:16px;flex:none;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;}
/* A solid icon among stroked ones: it carries its shape in fill, not outline. */
.nav button svg.ico-record{fill:currentColor;stroke:none;}
.nav button:hover{color:var(--txt);background:var(--row);}
.nav button.active{color:var(--txt);background:var(--row);}
.nav button.active svg{color:var(--acc);}
.who{margin-top:auto;padding:14px 16px;border-top:1px solid var(--line);display:flex;align-items:center;gap:10px;}
.who .ava{width:28px;height:28px;border-radius:50%;background:var(--row);border:1px solid var(--line);display:grid;place-items:center;
  font-size:12px;font-weight:700;color:var(--acc);text-transform:uppercase;flex:none;}
.who b{font-size:13px;font-weight:600;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.who a{margin-left:auto;color:var(--dim);text-decoration:none;font-size:12px;transition:color .12s;}
.who a:hover{color:var(--bad);}

/* ---------- main ---------- */
.main{display:flex;flex-direction:column;min-width:0;min-height:0;}
.topbar{display:flex;align-items:center;gap:10px;padding:12px 24px;border-bottom:1px solid var(--line);min-height:53px;}
.back{width:30px;height:30px;border-radius:8px;background:transparent;border:1px solid var(--line);color:var(--mut);
  font-size:19px;line-height:1;display:grid;place-items:center;flex:none;transition:color .12s,border-color .12s;}
.back:hover{color:var(--txt);border-color:var(--mut);}
.menu-vinyl{display:flex;align-items:center;gap:8px;background:transparent;border:1px solid var(--line);color:var(--mut);
  border-radius:999px;padding:5px 12px 5px 6px;font-size:12.5px;font-weight:500;flex:none;transition:color .12s,border-color .12s;}
.menu-vinyl:hover{color:var(--txt);border-color:var(--mut);}
.mv-disc{width:18px;height:18px;border-radius:50%;flex:none;position:relative;animation:spin 2.8s linear infinite;
  background:conic-gradient(rgba(255,255,255,.14) 0 50deg,transparent 50deg),repeating-radial-gradient(circle,#0e0e11 0 1px,#1c1c22 1px 2.2px);}
.mv-disc::after{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--acc);}
.crumbs{display:flex;align-items:center;gap:4px;font-size:13.5px;flex-wrap:wrap;}
.crumbs a{color:var(--mut);text-decoration:none;font-weight:500;padding:4px 8px;border-radius:7px;transition:color .12s,background .12s;cursor:pointer;}
.crumbs a:hover{color:var(--txt);background:var(--row);}
.crumbs .sep{color:var(--dim);font-size:12px;}
.crumbs .here{color:var(--txt);font-weight:600;padding:4px 8px;}
.topbar .me{margin-left:auto;color:var(--dim);font-size:12.5px;}
.view{flex:1;overflow-y:auto;min-height:0;padding:32px 44px;}
.view::-webkit-scrollbar{width:10px;} .view::-webkit-scrollbar-thumb{background:#1c1c21;border-radius:5px;}

.status{color:var(--mut);font-size:13px;margin:2px 0 14px;min-height:18px;}
.spinner{display:inline-block;width:13px;height:13px;border-radius:50%;border:2px solid var(--row);
  border-top-color:var(--acc);animation:spin .7s linear infinite;vertical-align:-2px;margin-right:8px;}
.empty{color:var(--mut);font-size:13.5px;padding:10px 2px;}
.hidden{display:none!important;}

/* ---------- inputs & buttons ---------- */
.field{flex:1;padding:11px 14px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--txt);outline:none;
  transition:border-color .15s,box-shadow .15s;}
.field::placeholder{color:var(--dim);}
.field:focus{border-color:#3a3a42;box-shadow:0 0 0 3px rgba(250,250,250,.06);}
.btn{padding:11px 20px;border:0;border-radius:10px;background:var(--txt);color:#0a0a0a;font-weight:600;font-size:13.5px;
  transition:opacity .12s;}
.btn:hover{opacity:.88;}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--mut);border-radius:9px;padding:9px 14px;font-size:13px;font-weight:500;
  transition:color .12s,border-color .12s;}
.btn-ghost:hover{color:var(--txt);border-color:var(--mut);}
.btn-ghost.danger:hover{color:var(--bad);border-color:var(--bad);}

/* ---------- extract / import ---------- */
.stack{max-width:960px;margin:0 auto;}
.stack .row{display:flex;gap:10px;margin-bottom:14px;}
.blurb{color:var(--mut);font-size:13.5px;margin:16px 0;max-width:560px;}
.hintcard{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;color:var(--mut);
  font-size:13.5px;line-height:1.65;margin-bottom:16px;}
.hintcard b{color:var(--txt);font-weight:600;}
.pill{display:inline-block;background:var(--row);border:1px solid var(--line);border-radius:999px;padding:2px 11px;margin:0 3px;
  font-size:12px;color:var(--txt);}
.or{color:var(--dim);font-size:11.5px;margin:16px 0 10px;text-transform:uppercase;letter-spacing:1.2px;}
.paste-area{width:100%;background:var(--card);border:1px solid var(--line);border-radius:10px;color:var(--txt);
  padding:12px 14px;font:12.5px/1.55 ui-monospace,"SF Mono",monospace;outline:none;resize:vertical;transition:border-color .15s,box-shadow .15s;}
.paste-area::placeholder{color:var(--dim);}
.paste-area:focus{border-color:#3a3a42;box-shadow:0 0 0 3px rgba(250,250,250,.06);}

/* ---------- media card (mix results / import results) ---------- */
.stack.wide{max-width:1280px;}
.stack.wide .row{max-width:960px;margin-left:auto;margin-right:auto;}
.stack.wide .status{text-align:center;}
.mix-grid{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:26px;align-items:start;margin-top:8px;}
.mix-grid>*{min-width:0;}
@media (max-width:1100px){.mix-grid{grid-template-columns:minmax(0,1fr);}.mix-side{position:static!important;}}
.mix-side{position:sticky;top:4px;}
.mix-side-card{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;}
.mix-side-card .mix-head{padding:14px 20px 10px;}
.mix-meter{height:4px;border-radius:2px;background:var(--row);margin:6px 20px 18px;overflow:hidden;}
.mix-meter i{display:block;height:100%;width:0;background:var(--acc);border-radius:2px;transition:width .5s ease;}
.mix-yt{display:block;padding:12px 20px;border-top:1px solid var(--line);color:var(--mut);font-size:12.5px;
  text-decoration:none;transition:color .12s;}
.mix-yt:hover{color:var(--txt);}
.sel-chk{width:15px;height:15px;accent-color:var(--acc);flex:none;cursor:pointer;margin:0;}
.side-add{padding:14px 16px;border-top:1px solid var(--line);}
.side-add:empty{display:none;}
.sa-row{display:flex;gap:12px;align-items:center;font-size:12px;color:var(--mut);margin-bottom:10px;}
.sa-row a{color:var(--dim);text-decoration:none;font-weight:600;}
.sa-row a:hover{color:var(--txt);}
.sa-row span{flex:1;}
.side-add .btn{width:100%;font-size:13px;}
.mix-card{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;}
.mix-card.hidden{display:none;}
.mix-cover{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;}
.mix-head{padding:18px 20px 6px;}
.mix-title{font-weight:650;font-size:15px;letter-spacing:-.1px;}
.mix-sub{color:var(--dim);font-size:12.5px;margin-top:2px;}
.mix-tracks{padding:6px 8px 10px;}
.mix-track{display:flex;align-items:center;gap:12px;padding:12px;border-radius:0;}
.mix-track + .mix-track{border-top:1px solid var(--line);}
.mix-num{width:18px;text-align:center;color:var(--dim);font-size:12px;flex:none;font-variant-numeric:tabular-nums;}
.mix-thumb{width:40px;height:40px;border-radius:8px;object-fit:cover;flex:none;background:var(--row);}
.mix-info{flex:1;min-width:0;}
.mix-tt{font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mix-ta{color:var(--mut);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;}
.mix-add{flex:none;display:flex;align-items:center;gap:6px;background:transparent;border:1px solid var(--line);color:var(--mut);
  border-radius:999px;padding:6px 13px;font-size:12.5px;font-weight:500;transition:color .12s,border-color .12s;}
.mix-add:hover{color:var(--txt);border-color:var(--mut);}
.mix-play{flex:none;display:grid;place-items:center;width:30px;height:30px;background:transparent;border:1px solid var(--line);
  color:var(--mut);border-radius:50%;padding:0;transition:color .12s,border-color .12s;}
.mix-play svg{width:11px;height:11px;fill:currentColor;margin-left:1px;}
.mix-play:hover{color:var(--acc);border-color:var(--acc);}

/* ---------- playlists grid ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:22px;}
.pcard{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;cursor:pointer;
  transition:border-color .15s,transform .15s;}
.pcard:hover{border-color:#33333b;transform:translateY(-2px);}
.pcard .pc-cover{width:100%;aspect-ratio:1;object-fit:cover;background:var(--row);display:grid;place-items:center;color:var(--dim);font-size:30px;}
.pcard .pc-body{padding:12px 14px 14px;}
.pc-name{font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pc-count{color:var(--dim);font-size:12px;margin-top:2px;}
.pcard.new{display:grid;place-items:center;color:var(--dim);font-size:13px;min-height:100%;background:transparent;border-style:dashed;}
.pcard.new:hover{color:var(--txt);border-color:var(--mut);transform:none;}

/* ---------- playlist detail ---------- */
.pl-card{background:var(--card);border:1px solid var(--line);border-radius:16px;max-width:960px;overflow:hidden;margin:0 auto;}
.pl-top{display:flex;gap:18px;padding:20px;align-items:flex-end;}
.hero-cover{width:132px;height:132px;border-radius:12px;object-fit:cover;flex:none;background:var(--row);
  display:grid;place-items:center;color:var(--dim);font-size:40px;cursor:pointer;position:relative;overflow:hidden;}
.hero-cover .pen{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.55);opacity:0;transition:opacity .15s;font-size:12px;color:#fff;}
.hero-cover:hover .pen{opacity:1;}
.hero-meta{min-width:0;padding-bottom:2px;}
.hero-kind{font-size:11px;text-transform:uppercase;letter-spacing:1.4px;color:var(--dim);font-weight:600;}
.hero-name{font-size:24px;font-weight:700;letter-spacing:-.5px;margin:5px 0 4px;cursor:pointer;}
.hero-name:hover{color:var(--acc);}
.hero-sub{color:var(--dim);font-size:12.5px;}
.hero-actions{display:flex;gap:9px;align-items:center;margin-top:14px;}
.playall{display:flex;align-items:center;gap:8px;background:var(--txt);color:#0a0a0a;border:0;border-radius:999px;
  padding:9px 18px;font-weight:600;font-size:13px;transition:opacity .12s;}
.playall:hover{opacity:.88;}
.playall svg{width:13px;height:13px;fill:#0a0a0a;}
.src-tog{display:flex;gap:3px;background:var(--bg2);border:1px solid var(--line);border-radius:9px;padding:3px;flex:none;}
.src-tog button{border:0;background:transparent;color:var(--mut);font-size:12px;font-weight:600;padding:5px 11px;border-radius:6px;transition:background .12s,color .12s;}
.src-tog button.on{background:var(--row);color:var(--txt);}
.src-tog button:disabled{opacity:.4;cursor:not-allowed;}
.dl-bar{display:flex;align-items:center;gap:10px;padding:12px 20px;border-top:1px solid var(--line);color:var(--mut);font-size:12.5px;flex-wrap:wrap;}
.dl-bar .grow{flex:1;}
.dl-bar .btn{padding:8px 14px;font-size:12.5px;}
.dl-bar .btn-ghost{padding:7px 12px;font-size:12.5px;}
.dl-chk{width:15px;height:15px;accent-color:var(--acc);flex:none;cursor:pointer;margin:0 2px 0 0;}
.dup-pill{background:var(--acc-soft);color:var(--acc);border:1px solid rgba(229,96,47,.35);border-radius:999px;
  font-size:10px;font-weight:700;letter-spacing:1.2px;padding:2px 9px;flex:none;text-transform:uppercase;}
.tracks{padding:6px 10px 12px;border-top:1px solid var(--line);}
.trow{display:flex;align-items:center;gap:13px;padding:12px;}
.trow + .trow{border-top:1px solid var(--line);}
.tnum{width:18px;color:var(--dim);font-size:12px;text-align:center;flex:none;font-variant-numeric:tabular-nums;}
.tthumb{width:40px;height:40px;border-radius:8px;object-fit:cover;flex:none;background:var(--row);}
.yt-open{cursor:pointer;transition:filter .12s,transform .12s;}
.yt-open:hover{filter:brightness(1.25);transform:scale(1.06);}
.tmain{flex:1;min-width:0;}
.tt{font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ta{color:var(--mut);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;}
.tacts{display:flex;gap:4px;align-items:center;flex:none;}
.rowplay{display:flex;align-items:center;gap:6px;background:transparent;border:0;color:var(--mut);font-size:12.5px;font-weight:500;
  padding:6px 10px;border-radius:8px;transition:color .12s,background .12s;}
.rowplay:hover{color:var(--txt);background:var(--row);}
.rowplay svg{width:11px;height:11px;fill:currentColor;}
.rowdel{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:transparent;border:0;
  color:var(--dim);padding:0;opacity:0;flex:none;transition:opacity .12s,color .12s,background .12s;}
.rowdel svg{width:11px;height:11px;stroke:currentColor;stroke-width:2;stroke-linecap:round;fill:none;}
.trow:hover .rowdel{opacity:1;}
.rowdel:hover{color:var(--bad);background:var(--row);}
@media (max-width:760px){.rowdel{opacity:.55;}}

/* ---------- bottom player bar ---------- */
.pbar{position:fixed;left:232px;right:0;bottom:0;z-index:65;display:flex;align-items:center;gap:14px;
  padding:10px 18px;background:rgba(12,12,15,.97);border-top:1px solid var(--line);}
body.has-player .view{padding-bottom:100px;}
.pb-video{width:96px;height:54px;border-radius:8px;overflow:hidden;flex:none;background:#000;position:relative;}
.pb-video iframe{width:96px!important;height:54px!important;border:0;display:block;position:absolute;inset:0;transition:opacity .6s ease;}
#pb-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s ease;z-index:2;}
.pb-link{position:absolute;inset:0;z-index:3;cursor:pointer;display:grid;place-items:center;}
.pb-link::after{content:"↗";font-size:15px;font-weight:700;color:#fff;background:rgba(12,12,15,.72);
  width:24px;height:24px;border-radius:7px;display:grid;place-items:center;opacity:0;transition:opacity .15s;}
.pb-link:hover::after{opacity:1;}
.pbar.paused #pb-thumb{opacity:1;}
.pb-meta{min-width:140px;max-width:230px;flex:none;}
.pb-title{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pb-artist{font-size:11.5px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;}
.pb-ctrl{display:flex;align-items:center;gap:6px;flex:none;}
.pb-ctrl button{background:transparent;border:0;color:var(--mut);width:34px;height:34px;border-radius:9px;
  display:grid;place-items:center;padding:0;transition:color .12s,background .12s;}
.pb-ctrl button:hover{color:var(--txt);background:var(--row);}
.pb-ctrl button svg{width:15px;height:15px;fill:currentColor;}
.pb-ctrl .big{width:42px;height:38px;border-radius:11px;background:var(--cream);color:#141210;}
.pb-ctrl .big:hover{background:#fff;color:#000;}
.pb-ctrl .big svg{width:17px;height:17px;}
.pb-prog{flex:1;display:flex;align-items:center;gap:10px;min-width:120px;}
.pb-prog span{font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums;flex:none;}
.pb-track{flex:1;height:5px;border-radius:3px;background:var(--row);cursor:pointer;position:relative;}
.pb-track i{position:absolute;left:0;top:0;bottom:0;width:0%;border-radius:3px;background:var(--acc);pointer-events:none;}
.pb-vol{display:flex;align-items:center;gap:7px;flex:none;}
.pb-vol button{background:transparent;border:0;color:var(--mut);width:30px;height:30px;border-radius:8px;
  display:grid;place-items:center;padding:0;transition:color .12s,background .12s;}
.pb-vol button:hover{color:var(--txt);background:var(--row);}
.pb-vol button svg{width:17px;height:17px;}
.pb-vol input{width:88px;accent-color:var(--acc);cursor:pointer;}
.pb-q{font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums;flex:none;}
.pb-close{background:transparent;border:0;color:var(--dim);font-size:14px;padding:6px 8px;flex:none;transition:color .12s;}
.pb-close:hover{color:var(--txt);}

/* ---------- mobile ---------- */
@media (max-width:760px){
  /* sidebar becomes a slim top bar with horizontal nav */
  .app{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);}
  .view{overflow-x:hidden;}
  .side{flex-direction:row;align-items:center;border-right:0;border-bottom:1px solid var(--line);}
  .brand{padding:10px 8px 10px 14px;flex:none;font-size:13.5px;}
  .nav{flex-direction:row;padding:0 2px;gap:0;overflow-x:auto;flex:1;min-width:0;scrollbar-width:none;}
  .nav::-webkit-scrollbar{display:none;}
  .nav-label{display:none;}
  .nav button{width:auto;padding:9px 9px;font-size:12.5px;flex:none;gap:7px;}
  .nav button svg{width:15px;height:15px;}
  .who{margin-top:0;margin-left:auto;border-top:0;padding:6px 12px;flex:none;gap:0;}
  .who b,.who a{display:none;}   /* avatar only — logout lives on the profile page */
  .topbar{padding:9px 12px;gap:8px;min-height:0;}
  .topbar .me{display:none;}
  .view{padding:16px 14px;}
  /* player bar: full width, compact */
  .pbar{left:0;gap:9px;padding:8px 10px;}
  .pb-q,.pb-prog,.pb-vol{display:none;}
  .pb-meta{max-width:none;flex:1;min-width:0;}
  /* The 96px still frame left the title about four characters. It is a
     thumbnail here, not a screen. */
  .pb-video,.pb-video iframe{width:52px!important;height:36px!important;}
  .pb-video{border-radius:6px;}
  .pb-title{font-size:12.5px;}
  .pb-artist{font-size:11px;}
  body.has-player .view{padding-bottom:92px;}
  /* content */
  .stack .row{flex-wrap:wrap;}
  .pl-top{flex-direction:column;align-items:flex-start;gap:14px;padding:16px;}
  .hero-cover{width:104px;height:104px;font-size:30px;}
  .hero-name{font-size:20px;}
  .hero-actions{flex-wrap:wrap;}
  .mix-track{gap:8px;padding:9px 8px;}
  .mix-play{width:28px;height:28px;}
  .mix-add{padding:6px 10px;font-size:12px;}
  .trow{gap:8px;padding:9px 8px;}
  .prof-top{flex-direction:column;align-items:center;}
  .prof-fields{width:100%;}
  .modal-card{width:auto!important;max-width:calc(100vw - 28px);}
  .dl-bar{padding:10px 12px;gap:8px;}
  /* landing */
  .hero-disc{display:none;}
  .land-main{width:auto;padding:0 7vw;}
  .land-foot{display:none;}
  .feat{max-width:none;}
}

/* ---------- + picker popover ---------- */
.pop{position:fixed;z-index:50;width:280px;background:var(--card);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 20px 60px rgba(0,0,0,.6);padding:10px;display:none;}
.pop.show{display:block;}
.pop-head{display:flex;align-items:center;justify-content:space-between;padding:4px 6px 9px;color:var(--mut);font-size:12.5px;}
.pop-close{background:transparent;border:0;color:var(--dim);font-size:15px;}
.pop-close:hover{color:var(--txt);}
.pop-new{display:flex;gap:7px;padding:6px;margin-bottom:6px;}
.pop-new input{flex:1;min-width:0;padding:8px 11px;border-radius:8px;border:1px solid var(--line);background:var(--bg2);color:var(--txt);outline:none;}
.pop-new input:focus{border-color:#3a3a42;}
.pop-new button{flex:none;padding:8px 13px;border:0;border-radius:8px;background:var(--txt);color:#0a0a0a;font-weight:600;font-size:13px;}
.pop-list{max-height:240px;overflow-y:auto;}
.pop-item{display:flex;align-items:center;gap:10px;padding:8px 9px;border-radius:9px;cursor:pointer;transition:background .1s;}
.pop-item:hover{background:var(--row);}
.pop-cover{width:34px;height:34px;border-radius:7px;object-fit:cover;flex:none;background:var(--row);display:grid;place-items:center;color:var(--dim);font-size:14px;}
.pop-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pop-count{color:var(--dim);font-size:11.5px;}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.6);display:grid;place-items:center;}
.modal-card{width:340px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:0 24px 70px rgba(0,0,0,.6);}
.modal-title{font-size:17px;font-weight:650;margin-bottom:4px;}
.modal-sub{color:var(--mut);font-size:13px;margin-bottom:14px;}
.modal input{width:100%;padding:11px 14px;border-radius:10px;border:1px solid var(--line);background:var(--bg2);color:var(--txt);outline:none;margin-bottom:16px;}
.modal input:focus{border-color:#3a3a42;}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;}
.modal-ok{padding:10px 18px;border:0;border-radius:10px;background:var(--txt);color:#0a0a0a;font-weight:600;}
.modal-ok.danger{background:var(--bad);color:#fff;}

/* ---------- profile ---------- */
.prof{max-width:640px;margin:0 auto;}
.prof-top{display:flex;gap:22px;margin-bottom:10px;}
.prof-ava{width:110px;height:110px;border-radius:50%;background:var(--row);border:1px solid var(--line);flex:none;
  display:grid;place-items:center;font-size:34px;cursor:pointer;position:relative;overflow:hidden;color:var(--dim);}
.prof-ava img{width:100%;height:100%;object-fit:cover;}
.prof-ava .pen{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.55);opacity:0;transition:opacity .15s;font-size:12px;color:#fff;}
.prof-ava:hover .pen{opacity:1;}
.prof-fields{flex:1;display:flex;flex-direction:column;}
.prof-fields .field{width:100%;flex:none;}
.plab{font-family:"Space Mono",monospace;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--dim);margin:12px 0 6px;display:block;}
.prof-fields .plab:first-child{margin-top:0;}
.tagrow{display:flex;flex-wrap:wrap;gap:8px;}
.tagchip{background:var(--card);border:1px solid var(--line);color:var(--mut);border-radius:999px;padding:7px 15px;
  font-size:12.5px;font-weight:500;transition:border-color .12s,color .12s,background .12s;}
.tagchip:hover{border-color:var(--mut);color:var(--txt);}
.tagchip.on{background:var(--acc-soft);border-color:var(--acc);color:var(--acc);font-weight:600;}

/* clickable identity in the sidebar */
.who-btn{display:flex;align-items:center;gap:10px;background:transparent;border:0;padding:0;min-width:0;flex:1;text-align:left;}
.who-btn:hover b{color:var(--acc);}
.who .ava{overflow:hidden;}
.who .ava img{width:100%;height:100%;object-fit:cover;}

/* collab member stack + badges */
.mstack{display:inline-flex;align-items:center;margin-left:10px;vertical-align:middle;}
.mstack img,.mstack i{width:22px;height:22px;border-radius:50%;border:2px solid var(--card);margin-left:-7px;object-fit:cover;
  background:var(--row);display:inline-grid;place-items:center;font-size:10px;font-style:normal;color:var(--acc);font-weight:700;}
.mstack :first-child{margin-left:0;}
.cbadge{position:absolute;top:8px;left:8px;background:rgba(12,12,15,.85);border:1px solid rgba(229,96,47,.5);color:var(--acc);
  font-family:"Space Mono",monospace;font-size:8.5px;letter-spacing:1.5px;padding:3px 8px;border-radius:999px;font-weight:700;pointer-events:none;}

/* avatar cropper */
.crop-vp{position:relative;width:280px;height:280px;margin:8px auto 14px;overflow:hidden;border-radius:12px;
  background:#000;touch-action:none;cursor:grab;}
.crop-vp:active{cursor:grabbing;}
.crop-vp img{position:absolute;left:0;top:0;transform-origin:0 0;user-select:none;pointer-events:none;max-width:none;display:block;}
.crop-mask{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,transparent 139px,rgba(5,5,6,.6) 140px);}
.crop-range{width:100%;accent-color:var(--acc);margin:0 0 14px;cursor:pointer;}

/* hero icon buttons + overflow menu */
.icon-btn{width:38px;height:38px;border-radius:50%;background:transparent;border:1px solid var(--line);color:var(--mut);
  display:grid;place-items:center;padding:0;flex:none;transition:color .12s,border-color .12s;}
.icon-btn:hover{color:var(--txt);border-color:var(--mut);}
.icon-btn svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.menu-pop{position:fixed;z-index:70;min-width:185px;background:var(--card);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 16px 50px rgba(0,0,0,.55);padding:6px;display:none;}
.menu-pop.show{display:block;}
.menu-pop button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:transparent;border:0;color:var(--mut);
  padding:9px 12px;border-radius:8px;font-size:13px;font-weight:500;transition:background .1s,color .1s;}
.menu-pop button:hover{background:var(--row);color:var(--txt);}
.menu-pop button.danger:hover{color:var(--bad);}

/* intro tour (new accounts) */
.tut-hi{position:relative;z-index:96;border-radius:10px;animation:tutpulse 1.6s ease-in-out infinite;}
@keyframes tutpulse{
  0%,100%{box-shadow:0 0 0 3px var(--acc),0 0 14px rgba(229,96,47,.4);}
  50%{box-shadow:0 0 0 4px var(--acc),0 0 26px rgba(229,96,47,.75);}
}
.tour-card{position:fixed;z-index:97;width:290px;background:var(--card);border:1px solid var(--acc);
  border-radius:14px;padding:16px 18px;box-shadow:0 20px 60px rgba(0,0,0,.65);}
.tour-k{font-family:"Space Mono",monospace;font-size:9.5px;letter-spacing:2px;color:var(--acc);margin-bottom:6px;}
.tour-t{font-family:"Space Grotesk",sans-serif;font-size:16px;font-weight:700;margin-bottom:5px;}
.tour-d{font-size:12.5px;color:var(--mut);line-height:1.55;margin-bottom:13px;}
.tour-b{display:flex;gap:8px;justify-content:flex-end;align-items:center;}
.tour-b .skip{margin-right:auto;background:none;border:0;color:var(--dim);font-size:12px;padding:4px;}
.tour-b .skip:hover{color:var(--txt);}

/* discover grid */
.disc{max-width:1280px;margin:0 auto;}
.disc-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.disc-bar select.field{padding:11px 12px;cursor:pointer;}
.pc-play{position:absolute;right:10px;top:10px;width:34px;height:34px;border-radius:10px;border:0;
  background:rgba(12,12,15,.82);color:var(--txt);display:grid;place-items:center;opacity:0;transition:opacity .15s,background .15s;}
.pcard:hover .pc-play{opacity:1;}
.pc-play:hover{background:var(--acc);color:#141210;}
.pc-play svg{width:13px;height:13px;fill:currentColor;margin-left:1px;}
.pc-owner{color:var(--mut);cursor:pointer;text-decoration:none;}
.pc-owner:hover{color:var(--acc);}
.uhead{display:flex;gap:18px;align-items:center;}
.uava{width:84px;height:84px;border-radius:50%;overflow:hidden;background:var(--row);border:1px solid var(--line);
  display:grid;place-items:center;font-size:26px;color:var(--dim);flex:none;}
.uava img{width:100%;height:100%;object-fit:cover;}
.uname{font-family:"Space Grotesk",sans-serif;font-size:22px;font-weight:700;}
.ubio{color:var(--mut);font-size:13.5px;margin-top:4px;max-width:520px;}
.trow.dragging{opacity:.35;}
.trow.dropover{box-shadow:inset 0 2px 0 var(--acc);}
.trow,.sug-row,.mix-track{cursor:grab;}
.sug-row.dragging,.mix-track.dragging{opacity:.35;}
.trow:active{cursor:grabbing;}
/* The row being carried, drawn under the pointer so a finger can see what it
   picked up even when it covers the row itself. */
.drag-ghost{position:fixed;z-index:120;pointer-events:none;transform:translate(-50%,-140%);
  max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  background:var(--card);border:1px solid var(--acc);border-radius:9px;
  padding:8px 12px;font-size:12.5px;color:var(--txt);box-shadow:0 10px 30px rgba(0,0,0,.55);}
body.dragging-row{user-select:none;-webkit-user-select:none;}

/* playlist page: right rail (quick add + move targets) */
.pl-grid>div:first-child{min-width:0;}
.pl-grid .pl-card{margin:0;max-width:none;}
.pl-quick{display:flex;gap:8px;padding:0 16px 14px;}
.pl-quick .field{min-width:0;}
.pl-quick .btn{padding:10px 14px;font-size:12.5px;flex:none;}
.pl-targets{padding:4px 8px 10px;max-height:360px;overflow-y:auto;}
.pl-target{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;cursor:pointer;
  border:1px dashed transparent;transition:background .12s,border-color .12s;}
.pl-target:hover{background:var(--row);}
.pl-target.over{background:var(--acc-soft);border-color:var(--acc);}
.pl-target img,.pt-ph{width:32px;height:32px;border-radius:7px;object-fit:cover;flex:none;background:var(--row);
  display:grid;place-items:center;color:var(--dim);font-size:14px;}
.pt-name{flex:1;font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pt-n{font-size:11px;color:var(--dim);flex:none;}
.pl-target.new{border:1px dashed var(--line);color:var(--mut);}
.pl-sug{padding:4px 8px 12px;}
.sug-row{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;transition:background .12s;}
.sug-row:hover{background:var(--row);}
.sug-row img{width:34px;height:34px;border-radius:7px;object-fit:cover;flex:none;}
.sug-main{flex:1;min-width:0;}
.sug-t{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sug-a{font-size:11px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sug-row .mix-play{width:26px;height:26px;}
.pc-tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px;}
.pc-tags span{font-family:"Space Mono",monospace;font-size:8.5px;letter-spacing:1.2px;color:var(--acc);
  background:var(--acc-soft);border-radius:999px;padding:2px 8px;text-transform:uppercase;}
.mix-dl svg{fill:none!important;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.mix-dl .spinner{margin:0;}

/* share modal rows */
.share-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);}
.share-row:last-of-type{border-bottom:0;}
.share-row b{font-size:13.5px;display:block;}
.share-sub{color:var(--dim);font-size:12px;display:block;margin-top:2px;max-width:200px;}

/* ---------- landing: clean house hero ---------- */
.auth-wrap{position:relative;height:100vh;overflow:hidden;background:#070708;}
.land-bg{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(60vw 60vw at 88% 50%,rgba(229,96,47,.065),transparent 68%),
             radial-gradient(44vw 44vw at 4% 98%,rgba(186,58,88,.04),transparent 70%);}

.menu-top{position:absolute;top:0;left:0;right:0;z-index:8;display:flex;align-items:center;justify-content:space-between;padding:20px 32px;}
.land-login{background:transparent;border:1px solid #26262c;color:var(--mut);border-radius:10px;
  padding:9px 18px;font-weight:500;font-size:13px;letter-spacing:.1px;transition:border-color .18s,color .18s,background .18s;}
.land-login:hover{border-color:#3a3a42;color:var(--txt);background:rgba(255,255,255,.03);}

/* hero vinyl — one big, quiet, slowly rotating record */
.hero-disc{position:absolute;z-index:2;top:50%;right:max(-14vh,-170px);transform:translateY(-50%);
  width:min(88vh,54vw);aspect-ratio:1;pointer-events:none;}
.hero-disc svg{width:100%;height:100%;display:block;animation:spin 36s linear infinite;}
.hd-sheen{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 198deg,transparent 0deg,rgba(255,255,255,.05) 14deg,rgba(255,255,255,.02) 30deg,transparent 52deg,
             transparent 176deg,rgba(255,255,255,.045) 196deg,rgba(255,255,255,.015) 214deg,transparent 240deg),
             radial-gradient(circle at 38% 30%,rgba(255,255,255,.03),transparent 55%);}
.hd-shadow{position:absolute;inset:-5%;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,rgba(0,0,0,.5) 42%,transparent 70%);}
@media (prefers-reduced-motion:reduce){.hero-disc svg{animation:none;}}

/* content column */
.land-main{position:absolute;z-index:3;top:0;bottom:0;left:0;width:min(680px,62vw);
  display:flex;flex-direction:column;justify-content:center;padding-left:7vw;}
.land-eq{display:flex;align-items:flex-end;gap:3px;height:16px;margin:0 0 22px;}
.land-eq i{display:block;width:3px;background:linear-gradient(180deg,#ff9d6b,#e5602f);border-radius:2px;height:100%;animation:eq 1.05s ease-in-out infinite;}
.land-eq i:nth-child(2){animation-delay:.12s}.land-eq i:nth-child(3){animation-delay:.24s}
.land-eq i:nth-child(4){animation-delay:.36s}.land-eq i:nth-child(5){animation-delay:.48s}.land-eq i:nth-child(6){animation-delay:.6s}
.land-kicker{font-family:"Space Mono",monospace;font-size:10.5px;letter-spacing:2.8px;text-transform:uppercase;color:var(--acc);font-weight:700;margin-bottom:18px;}
.land-h{font-family:"Space Grotesk",sans-serif;font-size:clamp(38px,4.8vw,62px);font-weight:700;letter-spacing:-1.2px;line-height:1.03;margin:0 0 18px;color:var(--txt);}
.land-p{color:var(--mut);font-size:15.5px;line-height:1.75;max-width:460px;margin:0 0 32px;}
.cta-row{display:flex;align-items:center;gap:10px;}
.cta{display:inline-flex;align-items:center;gap:10px;background:var(--cream);color:#141210;border:0;border-radius:12px;
  padding:14px 26px;font-weight:600;font-size:14px;letter-spacing:.1px;font-family:inherit;
  transition:background .18s ease,transform .18s ease;}
.cta:hover{background:#fff;transform:translateY(-1px);}
.cta .arr{font-size:15px;line-height:1;transition:transform .18s ease;}
.cta:hover .arr{transform:translateX(3px);}
.cta-ghost{background:transparent;border:1px solid #26262c;color:var(--mut);border-radius:12px;
  padding:13px 22px;font-weight:500;font-size:13.5px;transition:color .18s,border-color .18s,background .18s;}
.cta-ghost:hover{color:var(--txt);border-color:#3a3a42;background:rgba(255,255,255,.03);}

/* feature list */
.feat{margin-top:52px;max-width:490px;border-top:1px solid #1a1a1f;}
.feat-row{display:flex;align-items:baseline;gap:18px;padding:15px 2px;border-bottom:1px solid #1a1a1f;}
.feat-num{font-family:"Space Mono",monospace;font-size:10.5px;color:var(--acc);font-weight:700;flex:none;width:24px;}
.feat-name{font-family:"Space Grotesk",sans-serif;font-size:14.5px;font-weight:600;color:var(--txt);flex:none;width:92px;letter-spacing:.2px;}
.feat-desc{font-size:13px;color:var(--dim);line-height:1.55;}

/* footer strip */
.land-foot{position:absolute;left:7vw;right:7vw;bottom:26px;z-index:3;display:flex;align-items:center;justify-content:space-between;
  color:var(--dim);font-family:"Space Mono",monospace;font-size:9.5px;letter-spacing:1.8px;text-transform:uppercase;}
.land-foot .dotsep{color:#2c2c33;margin:0 8px;}

.auth-wrap.to-page .land-main,.auth-wrap.to-page .hero-disc,.auth-wrap.to-page .menu-top,.auth-wrap.to-page .land-foot{
  opacity:0;transition:opacity .5s ease;}

@media (max-width:900px){
  .hero-disc{right:-46vw;opacity:.45;}
  .land-main{width:auto;padding-right:7vw;}
}
@media (max-width:760px){
  .hero-disc{display:none;}
  .land-foot{display:none;}
  .land-main{padding:0 7vw;}
}

/* ----- auth / account panel over the hero ----- */
.auth-panel{position:absolute;inset:0;z-index:9;display:grid;place-items:center;opacity:0;visibility:hidden;
  transition:opacity .45s ease,visibility 0s linear .45s;
  background:radial-gradient(60% 60% at 50% 45%,rgba(5,5,6,.6),rgba(5,5,6,.8));}
.auth-panel.show{opacity:1;visibility:visible;transition:opacity .45s ease,visibility 0s;}

/* ---------- auth card ---------- */
.auth{width:340px;background:rgba(17,17,20,.97);border:1px solid var(--line);border-radius:16px;padding:26px;
  box-shadow:0 20px 60px rgba(0,0,0,.55);margin:0;text-align:left;position:relative;}
.auth-x{position:absolute;top:12px;right:12px;background:transparent;border:0;color:var(--dim);font-size:14px;
  width:28px;height:28px;border-radius:8px;display:grid;place-items:center;transition:color .12s,background .12s;}
.auth-x:hover{color:var(--txt);background:var(--row);}
.auth .stay{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--mut);margin:-2px 0 14px;cursor:pointer;user-select:none;}
.auth .stay input{display:none;}
.auth .stay .sw{width:30px;height:17px;border-radius:999px;background:var(--row);border:1px solid var(--line);
  position:relative;flex:none;transition:background .15s,border-color .15s;}
.auth .stay .sw::after{content:"";position:absolute;top:2px;left:2px;width:11px;height:11px;border-radius:50%;
  background:var(--dim);transition:transform .15s,background .15s;}
.auth .stay input:checked+.sw{background:var(--acc-soft);border-color:var(--acc);}
.auth .stay input:checked+.sw::after{transform:translateX(13px);background:var(--acc);}
.auth h2{margin:0 0 4px;font-size:20px;font-weight:650;}
.auth p{color:var(--mut);font-size:13px;margin:0 0 18px;}
.auth .row{display:flex;flex-direction:column;gap:10px;margin-bottom:14px;}
.auth input{padding:11px 14px;border-radius:10px;border:1px solid var(--line);background:rgba(9,9,11,.8);color:var(--txt);outline:none;transition:border-color .15s;}
.auth input::placeholder{color:var(--dim);}
.auth input:focus{border-color:#3a3a42;}
.tabs{display:flex;gap:6px;margin-bottom:16px;background:rgba(9,9,11,.6);border:1px solid var(--line);border-radius:10px;padding:4px;}
.tabs button{flex:1;padding:8px;border-radius:7px;background:transparent;border:0;color:var(--mut);font-weight:550;font-size:13px;transition:background .15s,color .15s;}
.tabs button.on{background:var(--row);color:var(--txt);}
.auth .go{width:100%;padding:12px;border:0;border-radius:10px;background:var(--cream);color:#141210;font-weight:600;font-size:14px;transition:background .15s;}
.auth .go:hover{background:#fff;}
.auth .hint{color:var(--dim);font-size:12px;margin-top:12px;text-align:center;}

/* download progress, shown inside the selection toolbar */
.dl-prog{display:inline-flex;align-items:center;gap:10px;min-width:0;}
.dl-meter{display:inline-block;width:140px;height:4px;border-radius:2px;
  background:var(--line);overflow:hidden;flex:none;}
.dl-meter i{display:block;height:100%;background:var(--acc);border-radius:2px;
  transition:width .4s ease;}
.dl-txt{color:var(--mut);font-size:12px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;}
.dl-txt b{color:var(--txt);font-weight:600;}
.dl-prog a{color:var(--dim);font-size:12px;text-decoration:none;flex:none;}
.dl-prog a:hover{color:var(--txt);}

/* a match the server is not confident about, or none at all */
.mix-flag{display:inline-block;margin-left:8px;padding:1px 6px;border-radius:3px;
  font-family:"Space Mono",monospace;font-size:9.5px;letter-spacing:.06em;
  text-transform:uppercase;vertical-align:middle;cursor:help;
  background:var(--row);color:var(--dim);border:1px solid var(--line);}
.mix-flag.warn{color:var(--acc);border-color:color-mix(in srgb,var(--acc) 40%,transparent);}

/* shuffle: lit when on, like every other player that has one */
#pb-shuffle.on{color:var(--acc);}
#pb-shuffle.on::after{content:"";position:absolute;bottom:2px;left:50%;
  transform:translateX(-50%);width:3px;height:3px;border-radius:50%;
  background:var(--acc);}
#pb-shuffle{position:relative;}
.playall + .shuf{margin-left:-4px;}

/* Add appears only for a track the crate does not already hold. */
.pb-add{display:flex;align-items:center;gap:7px;flex:none;padding:0 13px;height:30px;
  background:transparent;border:1px solid var(--line);border-radius:999px;
  color:var(--mut);font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;
  transition:color .12s,border-color .12s;}
.pb-add svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;}
.pb-add:hover{color:var(--txt);border-color:var(--mut);}
.pb-add.ok{color:var(--ok);border-color:var(--ok);}
.pb-add.warn{color:var(--acc);border-color:var(--acc);}

/* The radio preference, written out on the profile page. */
.pref{display:flex;align-items:flex-start;gap:11px;padding:12px 14px;margin-top:8px;
  background:var(--card);border:1px solid var(--line);border-radius:12px;cursor:pointer;}
.pref input{margin-top:2px;accent-color:var(--acc);width:16px;height:16px;flex:none;cursor:pointer;}
.pref span{display:flex;flex-direction:column;gap:3px;}
.pref b{font-size:13.5px;color:var(--txt);font-weight:600;}
.pref i{font-style:normal;font-size:12px;color:var(--dim);line-height:1.5;}

@media (max-width:520px){ .pb-add span{display:none;} .pb-add{width:34px;padding:0;justify-content:center;} }

/* ---- now playing ------------------------------------------------------
   The bar says what is playing; the list should say where it is. The number
   gives way to the same equalizer the brand mark uses, so the row is readable
   at a glance without reading anything. */
.trow.playing .tt,.mix-track.playing .mix-tt,.sug-row.playing .sug-t{color:var(--acc);}
.trow.playing,.mix-track.playing,.sug-row.playing{background:var(--acc-soft);}

.trow.playing .tnum,.mix-track.playing .mix-num{font-size:0;position:relative;}
.trow.playing .tnum::after,.mix-track.playing .mix-num::after{
  content:"";position:absolute;inset:0;margin:auto;width:11px;height:11px;
  background:
    linear-gradient(var(--acc),var(--acc)) 0    50% / 2.5px 100% no-repeat,
    linear-gradient(var(--acc),var(--acc)) 50%  50% / 2.5px 100% no-repeat,
    linear-gradient(var(--acc),var(--acc)) 100% 50% / 2.5px 100% no-repeat;
  animation:nowbars .9s ease-in-out infinite;}

@keyframes nowbars{
  0%,100%{background-size:2.5px 35%,2.5px 100%,2.5px 55%;}
  50%    {background-size:2.5px 100%,2.5px 40%,2.5px 90%;}
}

/* A paused player should not keep dancing. */
.pbar.paused ~ * .trow.playing .tnum::after,
.pbar.paused ~ * .mix-track.playing .mix-num::after{animation-play-state:paused;}

@media (prefers-reduced-motion:reduce){
  .trow.playing .tnum::after,.mix-track.playing .mix-num::after{animation:none;}
}

/* Before anything has been pasted there are no results to frame, so the grid
   collapses to the single explanatory card instead of showing an empty one. */
.mix-grid.empty{grid-template-columns:minmax(0,1fr);max-width:560px;}

/* A set announces itself, and its button offers the right verb. */
.mix-flag.set{color:var(--acc);border-color:rgba(229,96,47,.3);background:var(--acc-soft);}
.mix-add.is-set{border-color:rgba(229,96,47,.35);color:var(--acc);}
.mix-add.is-set:hover{background:var(--acc-soft);border-color:var(--acc);}

/* Listening to a shared link without an account: the shell stays, everything
   that would need one goes. */
body.guest nav a[data-act="tab"],
body.guest #nav-find,body.guest #nav-playlists,body.guest #nav-discover,
body.guest .who,body.guest .menu-vinyl,body.guest .back{display:none;}

/* what you looked up last */
.find-hist{margin-top:18px;}
.fh-head{display:flex;align-items:baseline;justify-content:space-between;
  font-family:"Space Mono",monospace;font-size:9.5px;letter-spacing:2px;
  text-transform:uppercase;color:var(--dim);margin-bottom:8px;}
.fh-head a{color:var(--dim);text-decoration:none;letter-spacing:1px;}
.fh-head a:hover{color:var(--txt);}
.fh-row{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  padding:9px 12px;border:1px solid var(--line);border-radius:10px;
  background:none;color:var(--txt);font-size:13px;margin-bottom:6px;cursor:pointer;}
.fh-row:hover{background:var(--row);border-color:var(--acc);}
.fh-kind{font-family:"Space Mono",monospace;font-size:9px;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--acc);flex:none;width:58px;}
.fh-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ============ touch hardening ============
   Everything here is conditioned on a coarse pointer or a narrow screen, so a
   mouse keeps the sizes the design was drawn at. */

html{-webkit-text-size-adjust:100%;}
body{overscroll-behavior-y:contain;}

/* The bottom bar would sit under the home indicator on a notched phone. */
.pbar{padding-bottom:calc(10px + env(safe-area-inset-bottom));}
body.has-player .view{padding-bottom:calc(100px + env(safe-area-inset-bottom));}

@media (pointer:coarse){
  /* Safari zooms the page when a field under 16px takes focus, and never
     zooms back out. Every input in the app was 14px or less. */
  input,textarea,select,.field{font-size:16px;}
  .paste-area{font-size:15px;}

  /* Hit areas reach 44px without the drawn control changing size. */
  .icon-btn,.mix-play,.rowdel,.rowplay,.back,.who-btn,.mix-add,.fh-row,.tagchip{position:relative;}
  .icon-btn::after,.mix-play::after,.rowdel::after,.rowplay::after,
  .back::after,.who-btn::after,.mix-add::after{
    content:"";position:absolute;top:50%;left:50%;translate:-50% -50%;
    width:max(100%,44px);height:max(100%,44px);
  }
  /* Text buttons are wide enough already; they only lack height, and growing
     the box is honest there rather than hiding a larger target behind it. */
  .btn,.btn-ghost,.playall,.tagchip,.fh-row,.menu-vinyl,.nav button,.mix-add,.pl-target{
    min-height:44px;}
  .nav button{padding-top:0;padding-bottom:0;}

  /* Small round ones keep their drawn size and gain the reach. */
  .pc-play,.sug-refresh,.pc-owner,.fh-head a,.dl-prog a,.crumbs a{position:relative;}
  .pc-play::after,.pc-owner::after,.fh-head a::after,.dl-prog a::after,.crumbs a::after{
    content:"";position:absolute;top:50%;left:50%;translate:-50% -50%;
    width:max(100%,44px);height:max(100%,44px);}

  /* A pseudo-element does not render inside an input, so these grow for real. */
  .sel-chk,.dl-chk,#pf-radio{width:22px;height:22px;}
  .trow,.mix-track,.sug-row{padding-top:11px;padding-bottom:11px;}

  /* Removing the grey flash leaves taps feeling dead unless something answers. */
  *{-webkit-tap-highlight-color:transparent;}
  button:active,.pl-target:active,.pcard:active,.fh-row:active,.trow:active{opacity:.6;}
}

/* Landscape on a phone: the top bar and the player leave almost nothing. */
@media (max-height:460px) and (orientation:landscape){
  .pb-video{display:none;}
  .pbar{padding-top:6px;padding-bottom:calc(6px + env(safe-area-inset-bottom));}
  body.has-player .view{padding-bottom:calc(78px + env(safe-area-inset-bottom));}
}

/* ============ mobile: destinations at the bottom ============
   Where a thumb already is, and where every phone app puts them. The slim top
   bar keeps only the name and the avatar. */
@media (max-width:760px){
  .nav{
    position:fixed;left:0;right:0;bottom:0;z-index:70;
    flex-direction:row;justify-content:space-around;align-items:stretch;
    gap:0;padding:0 4px calc(env(safe-area-inset-bottom)) 4px;
    /* Fixed so the player can sit exactly on top of it rather than near it. */
    height:calc(57px + env(safe-area-inset-bottom));box-sizing:border-box;
    background:rgba(12,12,15,.98);border-top:1px solid var(--line);
    backdrop-filter:blur(12px);overflow:visible;
  }
  .nav button{
    flex:1;flex-direction:column;justify-content:center;gap:4px;
    padding:9px 2px 8px;min-height:56px;font-size:10.5px;letter-spacing:.2px;
    border-radius:0;background:transparent;
  }
  .nav button svg{width:20px;height:20px;}
  .nav button.active{background:transparent;color:var(--acc);}
  .nav button.active svg{color:var(--acc);}

  /* Room for the bar, and for the player when it is up. */
  .view{padding-bottom:calc(70px + env(safe-area-inset-bottom));}
  .pbar{bottom:calc(57px + env(safe-area-inset-bottom));padding-bottom:10px;}
  body.has-player .view{padding-bottom:calc(160px + env(safe-area-inset-bottom));}

  /* A guest listening to a shared link has no destinations, so the bar goes
     and the player returns to the floor. */
  body.guest .pbar{bottom:0;padding-bottom:calc(10px + env(safe-area-inset-bottom));}
  body.guest .view,body.guest.has-player .view{padding-bottom:calc(100px + env(safe-area-inset-bottom));}
}

@media (max-width:760px) and (max-height:460px) and (orientation:landscape){
  .nav button{min-height:44px;padding:5px 2px;font-size:10px;}
  .nav button svg{width:16px;height:16px;}
  .nav{height:calc(45px + env(safe-area-inset-bottom));}
  .pbar{bottom:calc(45px + env(safe-area-inset-bottom));}
}

/* On a phone the controls were taking 162px of 375 and the title was left with
   four characters. Shuffle already lives on the crate header, so it steps out
   here and the title takes the room. */
@media (max-width:480px){
  .pbar{gap:8px;padding:8px;}
  .pb-ctrl{gap:2px;}
  .pb-ctrl button[data-act="player:shuffle"]{display:none;}
  .pb-close{width:26px;height:26px;}
}

/* The word "Play" on every row cost the title about 40px, and the icon says
   the same thing. Phones only. */
@media (max-width:520px){
  .rowplay{font-size:0;gap:0;}
  .rowplay svg{width:15px;height:15px;}
}

/* Keeping the playing track on the server, which is what lets it play with
   the screen off. */
.pb-keep{display:flex;align-items:center;gap:6px;flex:none;padding:7px 12px;border-radius:9px;
  background:transparent;border:1px solid var(--line);color:var(--mut);font-size:12px;font-weight:500;
  cursor:pointer;transition:color .12s,border-color .12s,background .12s;}
.pb-keep svg{width:13px;height:13px;stroke:currentColor;stroke-width:1.9;fill:none;
  stroke-linecap:round;stroke-linejoin:round;}
.pb-keep:hover:not(:disabled){color:var(--txt);border-color:var(--acc);}
.pb-keep.held{color:var(--acc);border-color:transparent;background:var(--acc-soft);cursor:default;}
.pb-keep:disabled{opacity:.75;}
/* Playing from a file: the still frame has nothing to show, so the artwork does. */
body.file-audio #pb-thumb{opacity:1;}
@media (max-width:640px){ .pb-keep span{display:none;} .pb-keep{padding:7px 9px;} }
/* Quick add results, sitting under the box that produced them. */
.qa-results{padding:0 4px;}
.qa-results:not(:empty){margin-top:6px;}