/* Same tokens as the proposal deck: dark ground, green = BIST/done, amber = "me"/my choice. */
:root{
  --bg:#0a0c11; --panel:#11141b; --panel-2:#171b24; --line:#252b39; --line-2:#343b4d;
  --ink:#f5f7fb; --muted:#9aa2b5; --dim:#5f677a;
  --up:#2bff88; --down:#ff3d5e; --amber:#ffd23f;
  --display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --r:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);color-scheme:dark}
body{min-height:100dvh;background:var(--bg);color:var(--ink);font-family:var(--display);font-size:17px;line-height:1.45;-webkit-font-smoothing:antialiased}
button,input{font:inherit;color:inherit}
[hidden]{display:none!important}
.mono{font-family:var(--mono)} .small{font-size:13px} .muted{color:var(--muted)} .ink{color:var(--ink)} .c-up{color:var(--up)}

.wrap{max-width:560px;margin:0 auto;padding:28px 16px calc(28px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:22px;min-height:100dvh}
.top{display:flex;flex-direction:column;gap:10px}
.spark{width:120px;height:32px}
.spark path{fill:none;stroke:var(--up);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:200;stroke-dashoffset:200;animation:draw 1.4s ease-out .1s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.kicker{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
h1{font-size:clamp(34px,9vw,48px);line-height:1;font-weight:800;letter-spacing:-.03em}
.lead{font-size:16px}

section{display:flex;flex-direction:column;gap:14px;animation:in .25s ease-out}
@keyframes in{from{opacity:0;transform:translateY(6px)}}
.field{display:flex;flex-direction:column;gap:6px}
input{width:100%;background:var(--panel);border:1px solid var(--line-2);border-radius:12px;padding:14px 16px;font-size:17px;outline:none;transition:border-color .15s}
input:focus{border-color:var(--amber)}
input::placeholder{color:var(--dim)}

.results{list-style:none;display:flex;flex-direction:column;gap:8px}
.results button{width:100%;display:flex;align-items:center;gap:12px;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px;cursor:pointer;transition:border-color .15s,transform .1s}
.results button:hover,.results button:focus-visible{border-color:var(--amber);outline:none}
.results button:active{transform:scale(.99)}
.cover{width:44px;height:44px;border-radius:8px;background:var(--panel-2);flex:none;object-fit:cover}
.cover.blank{display:grid;place-items:center;color:var(--dim);font-family:var(--mono);font-size:18px}
.meta{min-width:0;display:flex;flex-direction:column}
.meta b{font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meta span{color:var(--muted);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.song{display:flex;align-items:center;gap:14px}
.song .cover{width:64px;height:64px;border-radius:10px}
.song .meta b{font-size:20px;white-space:normal}
.song .meta span{font-size:15px;white-space:normal}
#confirm .song{border-color:var(--amber)}
#done .song{border-color:var(--up)}

.row{display:flex;gap:10px}
.btn{flex:1;border:1.5px solid var(--amber);background:var(--amber);color:#0a0c11;font-weight:750;font-size:17px;border-radius:999px;padding:14px 20px;cursor:pointer;transition:transform .1s,opacity .15s}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.5;cursor:wait}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-2);flex:0 0 auto}
.manual .btn.ghost{flex:1}
.link{align-self:flex-start;background:none;border:0;color:var(--muted);cursor:pointer;padding:4px 0;text-decoration:underline;text-underline-offset:3px}
.manual{display:flex;flex-direction:column;gap:10px}
.badge{align-self:flex-start;color:var(--up);border:1px solid color-mix(in srgb,var(--up) 40%,transparent);background:color-mix(in srgb,var(--up) 10%,transparent);border-radius:999px;padding:5px 12px;font-size:13px;font-weight:700}
.badge.off{color:var(--muted);border-color:var(--line-2);background:var(--panel)}
.err{color:var(--down)}

.foot{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--dim)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.spark path{stroke-dashoffset:0}}