:root{--bg:#14101f;--card:#211b33;--card2:#2b2342;--text:#f4f1fb;--muted:#a79fbd;--accent:#ff4fa3;--up:#38d996;--down:#ff6b6b;color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.35 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 16px 4px;max-width:640px;margin:0 auto}
h1{margin:0;font-size:1.5rem;background:linear-gradient(90deg,#ff4fa3,#ffb347);-webkit-background-clip:text;background-clip:text;color:transparent}
h2{font-size:1rem;margin:18px 0 8px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
main{max-width:640px;margin:0 auto;padding:0 16px 40px}
.card{background:var(--card);border-radius:16px;padding:14px;margin-top:12px}
.card h2{margin-top:0}
#now{display:flex;gap:14px;align-items:center}
.cover{width:84px;height:84px;border-radius:10px;background:var(--card2) center/cover no-repeat;flex:none}
.meta{min-width:0;flex:1}
.label{font-size:.75rem;color:var(--accent);text-transform:uppercase;letter-spacing:.08em}
.title{font-size:1.15rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.artist{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar{height:5px;background:var(--card2);border-radius:3px;margin-top:10px;overflow:hidden}
.bar>div{height:100%;width:0;background:var(--accent);transition:width .9s linear}
input[type=search]{width:100%;padding:12px 14px;border-radius:12px;border:1px solid #3a3157;background:var(--card2);color:var(--text);font-size:1rem}
input:focus{outline:2px solid var(--accent)}
.row{display:flex;align-items:center;gap:10px;padding:8px;border-radius:12px;background:var(--card);margin-top:8px}
.row .cover{width:48px;height:48px;border-radius:8px}
.row .meta .title{font-size:.98rem}
.row.dim{opacity:.6}
#results .row{background:var(--card2)}
button{font:inherit;border:0;border-radius:10px;cursor:pointer;color:var(--text);background:var(--card2);min-width:44px;min-height:44px;padding:0 10px;touch-action:manipulation}
button:active{transform:scale(.96)}
button.add{background:var(--accent);font-weight:700}
button[disabled]{opacity:.45;cursor:default}
.votes{display:flex;align-items:center;gap:4px;flex:none}
.votes .score{min-width:2ch;text-align:center;font-weight:700}
.vote{display:flex;flex-direction:column;align-items:center;line-height:1.1;padding:4px 8px;min-width:46px}
.vote small{color:var(--muted);font-size:.7rem}
.vote.on.u{background:var(--up);color:#06281b}.vote.on.d{background:var(--down);color:#3a0909}
.vote.on small{color:inherit}
.badge{font-size:.72rem;background:#ffb34733;color:#ffcf8a;padding:3px 9px;border-radius:99px}
.tag{font-size:.68rem;padding:1px 7px;border-radius:99px;background:var(--accent);color:#fff;margin-left:6px;vertical-align:middle}
.tag.wait{background:#555}
.muted{color:var(--muted);font-weight:400;text-transform:none;letter-spacing:0}
.hidden{display:none!important}
#toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%);background:#fff;color:#111;padding:10px 16px;border-radius:12px;font-weight:600;max-width:90vw;box-shadow:0 6px 24px #0008;z-index:9}