@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root{
  color-scheme:dark;
  --bg:#09090b;
  --panel:#111113;
  --panel-2:#17171b;
  --line:#232328;
  --line-soft:#1b1b1f;
  --txt:#fafafa;
  --txt-2:#d4d4d8;
  --mut:#8e8e96;
  --acc:#1ed760;
  --radius:16px;
  --radius-s:10px;
}

*{box-sizing:border-box;min-width:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
button{font:inherit;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
body{
  margin:0;background:var(--bg);color:var(--txt);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px;line-height:1.5;letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;padding-bottom:56px;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(600px 280px at 50% -60px, rgba(255,255,255,.06), transparent 70%);
}
svg.lucide{width:16px;height:16px;flex:none;stroke-width:2}

/* nav */
.nav{position:sticky;top:0;z-index:30;background:rgba(9,9,11,.8);backdrop-filter:blur(12px);border-bottom:1px solid var(--line-soft)}
.nav-inner{max-width:760px;margin:0 auto;padding:10px 20px;display:flex;align-items:center}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--txt)}
.brand-mark{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--acc)}
.brand-mark svg.lucide{width:16px;height:16px;color:#04120a;stroke-width:2.4}
.brand-name{font-weight:700;font-size:1rem;letter-spacing:-.02em}
.nav-right{margin-left:auto}
.health{display:inline-flex;align-items:center;gap:7px;font-size:.76rem;font-weight:600;color:var(--mut);border:1px solid var(--line);background:var(--panel);padding:6px 11px;border-radius:999px}
.health .dot{width:7px;height:7px;border-radius:50%;background:#71717a}
.health.ok{color:var(--txt-2)}
.health.ok .dot{background:var(--acc)}
.health.err{color:#fda4af}
.health.err .dot{background:#f87171}

/* layout */
main{max-width:760px;margin:0 auto;padding:0 20px;display:grid;gap:12px}
@media(max-width:560px){main{padding:0 12px}}
.hero{text-align:center;padding:32px 16px 10px}
@media(max-width:560px){.hero{padding:28px 8px 4px}}
.hero h1{margin:0;font-size:clamp(1.9rem,5vw,2.5rem);font-weight:700;letter-spacing:-.035em;line-height:1.05}
.hero p{margin:8px auto 0;color:var(--mut);font-size:.9rem;max-width:44ch}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:12px}
@media(max-width:560px){.panel{padding:12px;border-radius:14px}}
.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px;flex-wrap:wrap}
.panel-head h2{margin:0;font-size:.92rem;font-weight:700;letter-spacing:-.02em}
.panel-head p{margin:3px 0 0;font-size:.8rem;color:var(--mut)}
#playlist{margin-top:2px}

/* search */
.search-row{display:flex;align-items:center;gap:8px;background:#0a0a0c;border:1px solid var(--line);border-radius:12px;padding:4px 4px 4px 12px;transition:border-color .15s;position:relative;z-index:1}
.search-row:focus-within{border-color:#3f3f46}
.search-icon{color:var(--mut);opacity:.9}
.search-icon svg.lucide, i.search-icon, svg.search-icon{width:16px;height:16px}
.search-row input{flex:1;width:0;min-width:0;background:none;border:none;outline:none;color:var(--txt);font-size:15px;font-weight:500;padding:8px 2px;font-family:inherit}
.search-row input::placeholder{color:#63636b;font-size:.88rem}
@media(max-width:560px){
  .search-row{padding:4px 4px 4px 11px}
  .search-row input{padding:8px 2px;font-size:16px}
}

.controls{display:flex;align-items:center;gap:10px;margin:10px 2px 0;flex-wrap:wrap}
.hint{font-size:.76rem;color:var(--mut);font-weight:500}
.hide-mobile{margin-left:auto}
@media(max-width:560px){.hide-mobile{display:none}}

.segmented{display:inline-flex;gap:2px;padding:3px;background:#0a0a0c;border:1px solid var(--line);border-radius:999px;position:relative;z-index:1;max-width:100%}
.segmented button{position:relative;z-index:1;background:transparent;border:none;color:var(--mut);padding:8px 14px;min-height:34px;font-size:.76rem;font-weight:600;border-radius:999px;cursor:pointer;font-family:inherit;letter-spacing:-.01em;line-height:1;white-space:nowrap}
.segmented button:hover{color:var(--txt)}
.segmented button.active{background:var(--txt);color:#09090b}
.segmented.small button{padding:7px 12px;min-height:30px;font-size:.74rem}
@media(max-width:560px){
  .segmented{width:100%;justify-content:stretch}
  .segmented button{flex:1;padding:10px 8px}
  .segmented.small{width:auto}
  .segmented.small button{flex:none}
}

.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:var(--txt);color:#09090b;border:1px solid var(--txt);border-radius:9px;padding:8px 14px;min-height:36px;font-size:.82rem;font-weight:700;cursor:pointer;font-family:inherit;letter-spacing:-.01em;white-space:nowrap;flex:none}
.btn-primary:hover:not(:disabled){background:#fff}
.btn-primary:disabled{opacity:.35;cursor:default}
.btn-primary:active:not(:disabled){transform:scale(.98)}
.btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:var(--panel-2);color:var(--txt);border:1px solid var(--line);border-radius:9px;padding:8px 14px;min-height:36px;font-size:.82rem;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap;flex:none}
.btn-secondary:hover{border-color:#3f3f46;background:#1d1d22}
.icon-btn{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:transparent;border:1px solid transparent;color:var(--mut);cursor:pointer;flex:none}
.icon-btn:hover{background:var(--panel-2);color:var(--txt);border-color:var(--line)}
@media(max-width:560px){
  .btn-primary,.btn-secondary{min-height:38px}
  .search-row .btn-primary,.search-row .btn-secondary{padding:8px 12px}
}
.icon-btn{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:transparent;border:1px solid transparent;color:var(--mut);cursor:pointer;flex:none}
.icon-btn:hover{background:var(--panel-2);color:var(--txt);border-color:var(--line)}

.status{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--mut);padding:12px 4px 2px}
.status svg.lucide{width:15px;height:15px}
.status .dots::after{content:'';animation:dots 1.2s steps(4) infinite}
@keyframes dots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}}

/* track rows */
.song{display:flex;align-items:center;gap:10px;padding:8px 6px;border-radius:10px;animation:pop .18s ease-out}
.song:hover{background:var(--panel-2)}
@keyframes pop{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.song img{width:44px;height:44px;flex:none;border-radius:7px;object-fit:cover;background:#1c1c21}
.song .noimg{width:44px;height:44px;flex:none;border-radius:7px;display:grid;place-items:center;font-weight:700;background:#232329;color:var(--txt-2)}
.song .sel-cb{width:17px;height:17px;accent-color:var(--acc);flex:none;cursor:pointer;margin:0}
.song.selected{background:rgba(30,215,96,.07)}
.song.selected:hover{background:rgba(30,215,96,.1)}
.song .t{flex:1;min-width:0}
.song .t b{display:block;font-size:.85rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.song .t span{display:block;font-size:.72rem;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.dur{font-size:.7rem;color:var(--mut);font-variant-numeric:tabular-nums;flex:none}
.rowbtns{display:flex;gap:6px;flex:none;align-items:center}
.rowbtns .btn-secondary,.rowbtns .btn-primary{padding:7px 10px;min-height:32px;font-size:.75rem;border-radius:8px}
.rowbtns .btn-secondary svg.lucide,.rowbtns .btn-primary svg.lucide{width:14px;height:14px}
@media(max-width:560px){
  .song{gap:8px;padding:7px 4px}
  .song img,.song .noimg{width:38px;height:38px}
  .rowbtns{gap:6px}
  .rowbtns .btn-secondary .lbl,.rowbtns .btn-primary .lbl{display:none}
  .rowbtns .btn-secondary,.rowbtns .btn-primary{padding:7px 8px;min-height:34px;min-width:34px}
  .song .dur{display:none}
}

.dl-progress{flex:1;min-width:120px;display:flex;gap:8px;align-items:center;font-size:.75rem;color:var(--mut)}
.dl-progress .bar{flex:1;height:4px;background:#26262c;border-radius:99px;overflow:hidden;min-width:40px}
.dl-progress .bar>div{height:100%;width:0;background:var(--acc);border-radius:99px;transition:width .15s}
.spin{width:15px;height:15px;border:2px solid #2c2c32;border-top-color:var(--txt);border-radius:50%;animation:rot .7s linear infinite;display:inline-block}
@keyframes rot{to{transform:rotate(360deg)}}

.skel-row{display:flex;gap:10px;align-items:center;padding:8px 6px}
.skel-row .c{width:44px;height:44px;flex:none;border-radius:7px;background:#1a1a1f}
.skel-row .lines{flex:1;display:grid;gap:7px}
.skel-row .l{height:11px;border-radius:6px;background:#1a1a1f}
.skel-row .c,.skel-row .l{animation:sh 1.3s ease-in-out infinite alternate}
@keyframes sh{from{opacity:.5}to{opacity:1}}

.empty{display:grid;place-items:center;text-align:center;padding:20px 14px;border:1px dashed var(--line);border-radius:12px;margin-top:10px;color:var(--mut)}
.empty svg.lucide{width:20px;height:20px;opacity:.5}
.empty p{font-size:.8rem;margin:6px 0 0;max-width:36ch}
.err-text{color:#fda4af;font-size:.85rem;padding:10px 4px;overflow-wrap:anywhere}

/* playlist */
textarea{width:100%;background:#0a0a0c;border:1px solid var(--line);border-radius:12px;color:var(--txt);padding:11px 13px;font-size:.86rem;resize:vertical;font-family:inherit;line-height:1.5}
textarea:focus{outline:none;border-color:#3f3f46}
textarea::placeholder{color:#63636b}
.pl-bar{display:flex;gap:10px;align-items:center;margin-top:10px;flex-wrap:wrap}
.spacer{flex:1}
@media(max-width:560px){
  .pl-bar .btn-primary{flex:1;width:100%}
  .pl-bar .hint{width:100%}
  .pl-bar .spacer{display:none}
}
#tab-link{margin-top:2px}
#tab-list{margin-top:2px}

.prow{display:flex;gap:8px;align-items:center;padding:6px;border-radius:10px}
.prow:hover{background:var(--panel-2)}
.prow img{width:36px;height:36px;flex:none;border-radius:7px;object-fit:cover;background:#1c1c21}
.prow .n{width:20px;flex:none;text-align:center;color:var(--mut);font-size:.72rem;font-variant-numeric:tabular-nums}
.prow input[type=checkbox]{width:16px;height:16px;accent-color:var(--acc);flex:none;cursor:pointer}
.prow .t{flex:1;min-width:0}
.prow .t b{display:block;font-size:.82rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prow .t span{display:block;font-size:.71rem;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* playlist search cards */
.pls-row{display:flex;gap:10px;align-items:center;padding:8px 6px;border-radius:10px;animation:pop .18s ease-out}
.pls-row:hover{background:var(--panel-2)}
.pls-row img{width:48px;height:48px;flex:none;border-radius:8px;object-fit:cover;background:#1c1c21}
.pls-row .noimg{width:48px;height:48px;flex:none;border-radius:8px;display:grid;place-items:center;font-weight:700;background:#232329;color:var(--txt-2)}
.pls-row .t{flex:1;min-width:0}
.pls-row .t b{display:block;font-size:.84rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.pls-row .t span{display:block;font-size:.72rem;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.pls-row .btn-secondary{padding:7px 11px;min-height:32px;font-size:.75rem;border-radius:8px;flex:none}
@media(max-width:560px){
  .pls-row{gap:8px;padding:7px 4px}
  .pls-row img,.pls-row .noimg{width:42px;height:42px}
}

.zip-progress{margin-top:10px;background:#0a0a0c;border:1px solid var(--line);border-radius:12px;padding:9px 12px}
.zip-top{display:flex;justify-content:space-between;gap:10px;font-size:.78rem;color:var(--txt-2);margin-bottom:8px}
.zip-top #zip-pct,.zip-top #sel-pct{font-variant-numeric:tabular-nums;color:var(--mut)}
.track{height:6px;background:#232329;border-radius:99px;overflow:hidden;position:relative}
.track #zip-fill,.track #sel-fill{height:100%;width:0;background:linear-gradient(90deg,var(--acc),#7C6BFF);border-radius:99px;transition:width .25s ease-out}
.track #zip-fill.indet,.track #sel-fill.indet{width:32%!important;animation:zipslide 1.1s ease-in-out infinite alternate}
@keyframes zipslide{from{margin-left:-8%}to{margin-left:76%}}

/* per-track build checklist */
.tracklist{max-height:190px;overflow-y:auto;margin-top:10px;display:grid;gap:2px;padding-right:2px}
.zt-row{display:flex;gap:9px;align-items:center;font-size:.78rem;padding:5px 6px;border-radius:8px;color:var(--txt-2)}
.zt-row .t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zt-row .st{flex:none;display:inline-flex;width:18px;justify-content:center}
.zt-row .st svg.lucide{width:14px;height:14px}
.zt-row[data-s=done] .st{color:var(--acc)}
.zt-row[data-s=failed]{color:#f87171}
.zt-row[data-s=failed] .t{color:var(--mut)}
.zt-row[data-s=queued]{color:var(--mut)}
.zt-row[data-s=active] .st svg{animation:rot .8s linear infinite}
.zt-row .err{display:block;font-size:.68rem;color:#f87171;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.show-all{width:100%;margin-top:8px;background:transparent;border:1px dashed var(--line);color:var(--mut);border-radius:10px;padding:10px;font-size:.8rem;font-weight:600;cursor:pointer;font-family:inherit;min-height:42px}
.show-all:hover{color:var(--txt);border-color:#3f3f46}

/* selection bar — floating sticky action bar */
#sel-bar{position:sticky;bottom:12px;display:flex;gap:8px;align-items:center;margin-top:10px;background:rgba(20,20,24,.92);border:1px solid var(--line);border-radius:12px;padding:7px 7px 7px 12px;box-shadow:0 12px 32px rgba(0,0,0,.5);backdrop-filter:blur(12px);z-index:5;flex-wrap:wrap}
#sel-bar .btn-primary{min-height:36px}
.sel-links{display:inline-flex;gap:4px}
.link-btn{background:none;border:none;color:var(--mut);font-size:.78rem;font-weight:600;cursor:pointer;padding:8px 6px;font-family:inherit;min-height:36px}
.link-btn:hover{color:var(--txt)}
@media(max-width:560px){
  #sel-bar{bottom:8px;padding:8px}
  #sel-bar .btn-primary{flex:1;width:100%}
  #sel-bar .hint{width:100%}
  #sel-bar .spacer{display:none}
}

/* toasts — container must not intercept taps when empty */
#toasts{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);display:grid;gap:8px;z-index:50;width:min(92vw,400px);pointer-events:none}
.toast{display:flex;gap:9px;align-items:center;background:#1a1a1f;border:1px solid var(--line);border-radius:12px;padding:10px 13px;font-size:.83rem;box-shadow:0 12px 32px rgba(0,0,0,.5);animation:toastIn .2s ease-out;pointer-events:auto}
.toast.err{border-color:rgba(248,113,113,.3)}
.toast svg.lucide{width:16px;height:16px;color:var(--acc)}
.toast.err svg.lucide{color:#f87171}
@keyframes toastIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* footer */
.footer{padding:14px 4px 0;color:var(--mut);font-size:.75rem;display:flex;gap:10px;flex-wrap:wrap;justify-content:space-between;align-items:center}
.footer a{color:var(--txt-2);text-decoration:none}
.footer a:hover{color:var(--txt)}
.footer kbd{font-family:inherit;font-size:.7rem;background:var(--panel-2);border:1px solid var(--line);padding:1px 6px;border-radius:6px}
.footer .sep{opacity:.4;margin:0 8px}

:focus-visible{outline:2px solid #52525b;outline-offset:2px}

/* ---------- compact mobile: tighter spacing, same touch targets ---------- */
@media(max-width:560px){
  main{gap:10px}
  .panel{padding:10px;border-radius:12px}
  .nav-inner{padding:8px 12px}
  .hero{padding:20px 8px 2px}
  .hero h1{font-size:1.55rem}
  .hero p{font-size:.84rem;margin-top:6px}
  .panel-head{margin-bottom:8px}
  .controls{margin:8px 2px 0;gap:8px}
  .status{padding:8px 4px 0;font-size:.76rem}
  .song{gap:8px;padding:6px 4px}
  .song img,.song .noimg{width:36px;height:36px;border-radius:6px}
  .song .t b{font-size:.82rem}
  .song .t span{font-size:.7rem}
  .skel-row{padding:7px 4px}
  .skel-row .c{width:36px;height:36px}
  .empty{padding:16px 12px}
  #sel-bar{padding:6px;bottom:8px}
  .zip-progress{margin-top:8px;padding:8px 10px}
  .tracklist{max-height:140px;margin-top:8px}
  .zt-row{padding:3px 4px;font-size:.73rem}
  .pl-bar{margin-top:8px}
  .prow{gap:8px;padding:6px 4px}
  .prow .n{display:none}
  .prow img{width:32px;height:32px;border-radius:6px}
  .prow .t b{font-size:.8rem}
  .pls-row{gap:8px;padding:7px 4px}
  .pls-row img,.pls-row .noimg{width:38px;height:38px}
  textarea{padding:8px 10px;font-size:16px}
  .footer{padding:8px 4px 0;font-size:.68rem}
  #toasts{bottom:16px}
}