:root{color-scheme:dark;--bg:#0e0f12;--card:#17181c;--line:#2a2c32;--muted:#9b9ea6;--text:#f3f4f6;--green:#248046}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100dvh;min-width:0;display:flex;background:var(--bg);color:var(--text);font:14px/1.45 system-ui,-apple-system,sans-serif;overflow-x:clip}
button,input{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
button{border:0;cursor:pointer}
.rail{display:flex;align-items:center;flex-direction:column;gap:14px;width:76px;padding:18px 12px;background:#101114;border-right:1px solid var(--line)}
.rail img{width:46px;height:46px;object-fit:contain}
.rail a:not(:first-child){display:grid;place-items:center;width:46px;height:46px;border-radius:15px;font-size:23px}
.rail-active{background:#22242b}
.rail-line{height:1px;width:30px;background:#3c334d}
main{flex:1;min-width:0;max-width:1180px;padding:28px 28px 56px}
header strong{display:block;font-size:22px}
header span{color:var(--muted)}
.search{display:flex;align-items:stretch;max-width:680px;margin:20px 0 0;border:1px solid #3a3c44;border-radius:999px;background:#121316;overflow:hidden}
.search input{flex:1;min-width:0;border:0;background:transparent;padding:13px 18px;outline:none;font-size:16px}
.search button{border-radius:0;background:#22242b;color:#fff;padding:0 16px;font-weight:700;white-space:nowrap}
.search button:hover{background:#2c2e36}
#status{min-height:1.4em;margin:10px 2px 0;color:#f0c674}
.desk{display:grid;grid-template-columns:320px minmax(0,1fr);gap:28px;align-items:start;margin-top:8px}
.player{position:sticky;top:16px;padding:14px;border:1px solid var(--line);border-radius:18px;background:var(--card)}
.player > audio{position:absolute;width:0;height:0;overflow:hidden}
.art{aspect-ratio:1;border-radius:14px;background:#101114 center/42% no-repeat;overflow:hidden}
.art img{width:100%;height:100%;object-fit:cover;display:none}
.art img.ready{display:block}
.now{min-height:3.4em;margin:12px 2px 0}
.now strong,.now span{display:block}
.now strong{font-size:16px;line-height:1.3}
.now span{color:var(--muted);font-size:13px}
.time{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;margin-top:12px;color:var(--muted);font-variant-numeric:tabular-nums;font-size:12px}
.time input{width:100%;accent-color:var(--green)}
.transport{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.transport button{width:42px;height:42px;border-radius:50%;background:#22242b;font-size:16px}
.transport button:hover{background:#2c2e36}
.transport .play{width:52px;height:52px;background:var(--green);font-size:18px}
.transport .on{background:#1f6b4a;color:#fff}
.mix{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:12px;color:var(--muted);font-size:13px}
.mix label,.bass{display:flex;align-items:center;gap:8px}
.mix input[type=range]{width:110px;accent-color:var(--green)}
.bass button{width:26px;height:26px;border-radius:50%;background:#22242b}
.bass b{min-width:1ch;color:var(--text);text-align:center}
body.embedded main{max-width:none}
#stop{border-radius:999px;background:#3a2428;color:#f2d6d6;padding:7px 12px;font-weight:700}
#stop[hidden]{display:none}
.library{display:flex;flex-direction:column;gap:18px;margin-bottom:16px}
.library-lists{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.library-lists:not(:has(.chips button)){display:none}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips:empty{display:none}
.chips button{border-radius:999px;background:#22242b;padding:7px 12px;font-weight:650}
.chips button.on{background:#1f6b4a;color:#fff}
.import{display:flex;flex-wrap:wrap;gap:8px}
.import[hidden]{display:none}
.import input{flex:1;min-width:160px;border:1px solid #3a3c44;border-radius:999px;background:#121316;padding:10px 14px;font-size:16px;outline:none}
.import button{border-radius:999px;background:#22242b;padding:8px 12px;font-weight:700}
.import button:hover,.chips button:hover,.search button:hover{background:#2c2e36}
.chips button.on:hover{background:#1f6b4a}
.library-note{color:var(--muted);font-size:12px;margin:8px 0 0}
.results-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:36px;margin-bottom:8px}
.results-title{display:flex;align-items:center;gap:8px;min-width:0}
.results-head strong{font-size:16px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.saved-tools{display:flex;align-items:center;gap:6px;flex-shrink:0}
.saved-tools[hidden]{display:none}
.play-list{width:34px;height:34px;border-radius:50%;background:#3b82f6;color:#fff;font-size:14px;line-height:1}
.play-list:hover{background:#2563eb}
.more{position:relative}
.more > button{width:34px;height:34px;border-radius:50%;background:#22242b;font-size:18px;line-height:1;letter-spacing:0}
.more > button:hover,.more > button[aria-expanded=true]{background:#2c2e36}
.list-menu{position:absolute;top:40px;left:0;z-index:6;display:flex;flex-direction:column;min-width:168px;padding:6px;border:1px solid var(--line);border-radius:12px;background:#17181c;box-shadow:0 10px 28px rgb(0 0 0 / .4)}
.list-menu[hidden]{display:none}
.list-menu button{border-radius:8px;background:transparent;padding:9px 10px;text-align:left;font-weight:650;white-space:nowrap}
.list-menu button:hover{background:#22242b}
#dropSaved{color:#f2b8b8}
#shareLink{width:100%;border:1px solid #3a3c44;border-radius:12px;background:#121316;padding:10px 12px;font-size:16px;outline:none}
#clear{border-radius:999px;background:#22242b;padding:7px 12px;font-weight:650}
#clear[hidden]{display:none}
.pager{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 0 10px}
.pager[hidden]{display:none}
.pager button{width:36px;height:36px;border-radius:50%;background:#22242b;font-size:22px;line-height:1}
.pager button:hover{background:#2c2e36}
.pager button:disabled{opacity:.35;cursor:default}
.pager span{min-width:7ch;text-align:center;color:var(--muted);font-variant-numeric:tabular-nums}
ol{list-style:none;margin:0;padding:0;display:grid;gap:4px;touch-action:pan-y}
li{display:flex;align-items:center;gap:8px}
.row-actions{display:flex;flex-direction:column;gap:6px}
.queue{border-radius:999px;background:#22242b;color:#fff;padding:7px 10px;font-size:12px;font-weight:700;white-space:nowrap}
dialog{border:1px solid var(--line);border-radius:16px;background:#17181c;color:inherit;padding:16px;max-width:min(360px,calc(100vw - 32px))}
dialog::backdrop{background:rgb(0 0 0 / .6)}
.pick-choices{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.pick-choices button,#pickCancel{width:100%;border-radius:999px;background:#22242b;padding:10px 12px;font-weight:700}
.hit{display:flex;gap:12px;width:100%;padding:8px;border-radius:12px;background:transparent;text-align:left;font-weight:500}
.hit:hover{background:#1c1d22}
li.on .hit{background:#22242b}
.thumb{position:relative;flex:0 0 168px;width:168px;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#222}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.badge{position:absolute;right:4px;bottom:4px;padding:1px 5px;border-radius:4px;background:rgb(0 0 0 / .75);color:#fff;font-size:12px;font-weight:650}
.meta{min-width:0;display:flex;flex-direction:column;gap:4px;padding-top:2px}
.meta strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:15px;line-height:1.3}
.meta span{color:var(--muted);font-size:13px;font-weight:450}
.empty{color:var(--muted);margin:8px}
@media(max-width:860px){
  .desk{grid-template-columns:1fr}
  .player{position:static}
  .thumb{flex-basis:112px;width:112px}
}
@media(max-width:700px){
  .rail{display:none}
  main{width:100%;padding:14px 14px calc(24px + env(safe-area-inset-bottom))}
  header strong{font-size:20px}
  .search{max-width:none;margin-top:12px}
  .search button{padding:0 12px;font-size:14px}
  .import input{flex-basis:100%}
  .desk{gap:14px;margin-top:4px}
  .player{display:grid;grid-template-columns:104px minmax(0,1fr);column-gap:12px;row-gap:8px;align-items:center;padding:12px;border-radius:16px}
  .art{grid-column:1;grid-row:1 / span 2;border-radius:12px}
  .now{grid-column:2;grid-row:1;margin:0;min-height:0;align-self:end}
  .now strong{font-size:15px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .now span{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .time{grid-column:1 / -1;grid-row:3;margin-top:2px}
  .transport{grid-column:1 / -1;margin-top:0}
  .transport button{width:40px;height:40px}
  .transport .play{width:48px;height:48px}
  .mix{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-top:0}
  .mix label{display:grid;grid-template-columns:auto minmax(0,1fr);width:100%}
  .mix input[type=range]{width:100%}
  .bass{justify-content:flex-start}
  #stop{justify-self:start}
  li{min-width:0;align-items:stretch}
  .hit{flex:1;min-width:0;gap:10px;padding:6px}
  .thumb{flex-basis:96px;width:96px}
  .row-actions{flex-direction:column;justify-content:center;flex-shrink:0}
  .queue{padding:6px 8px;font-size:11px}
  .meta strong{font-size:14px}
  .meta span{font-size:12px}
  .results-head strong{font-size:15px}
}

header{display:flex;align-items:center;justify-content:space-between;gap:12px}
header a{color:var(--muted);font-weight:650}