:root{
  --bg:#080808;
  --s1:#0f0f0f;
  --s2:#161616;
  --s3:#1c1c1c;
  --border:#252525;
  --border2:#303030;
  --g:#b8ff57;
  --g2:#57d4ff;
  --g3:#ff5757;
  --g4:#ffc857;
  --text:#efefef;
  --muted:#505050;
  --muted2:#808080;
  --r:3px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:'Space Grotesk',sans-serif;min-height:100vh;display:flex;flex-direction:column;align-items:center;overflow-x:hidden}
.mono{font-family:'Azeret Mono',monospace}

/* ── HEADER ── */
header{
  width:100%;padding:1.4rem 2.5rem;border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:1.2rem;
  position:sticky;top:0;z-index:100;
  background:rgba(8,8,8,0.9);backdrop-filter:blur(12px);
}
.logo{font-size:1.5rem;font-weight:700;letter-spacing:-1px;color:var(--g);line-height:1}
.logo span{color:var(--text);opacity:0.3}
.version{font-family:'Azeret Mono',monospace;font-size:0.6rem;color:var(--g2);border:1px solid var(--g2);padding:0.15rem 0.5rem;letter-spacing:1px;opacity:0.7;margin-left:0.3rem}
.source-pills{margin-left:auto;display:flex;gap:0.5rem}
.spill{font-size:0.6rem;font-family:'Azeret Mono',monospace;padding:0.2rem 0.6rem;border-radius:20px;letter-spacing:0.5px}
.spill.spotify{background:rgba(30,215,96,0.12);color:#1ed760;border:1px solid rgba(30,215,96,0.3)}
.spill.cyanite{background:rgba(88,100,255,0.12);color:#7c87ff;border:1px solid rgba(88,100,255,0.3)}
.spill.lastfm{background:rgba(210,0,0,0.12);color:#ff6b6b;border:1px solid rgba(210,0,0,0.3)}

/* ── CONTAINER ── */
.wrap{width:100%;max-width:960px;padding:2.5rem 1.5rem 6rem}

/* ── STEPS NAV ── */
.steps-nav{display:flex;gap:0;margin-bottom:3rem;border:1px solid var(--border);overflow:hidden}
.step-dot{flex:1;padding:0.8rem 0.5rem;text-align:center;font-size:0.65rem;font-family:'Azeret Mono',monospace;letter-spacing:1px;color:var(--muted);border-right:1px solid var(--border);text-transform:uppercase;transition:background 0.2s,color 0.2s;cursor:default}
.step-dot:last-child{border-right:none}
.step-dot.active{background:var(--s2);color:var(--g)}
.step-dot.done{background:rgba(184,255,87,0.05);color:var(--g);opacity:0.5}

/* ── CARDS & SECTIONS ── */
.card{background:var(--s1);border:1px solid var(--border);padding:2rem;margin-bottom:1.5rem}
.card-title{font-size:0.65rem;font-family:'Azeret Mono',monospace;letter-spacing:2px;text-transform:uppercase;color:var(--muted2);margin-bottom:1.2rem;display:flex;align-items:center;gap:0.8rem}
.card-title::after{content:'';flex:1;height:1px;background:var(--border)}
.card-title .src-tag{font-size:0.55rem;padding:0.15rem 0.5rem;border-radius:20px}
.src-spotify{background:rgba(30,215,96,0.15);color:#1ed760;border:1px solid rgba(30,215,96,0.25)}
.src-cyanite{background:rgba(124,135,255,0.15);color:#7c87ff;border:1px solid rgba(124,135,255,0.25)}
.src-lastfm{background:rgba(255,107,107,0.15);color:#ff6b6b;border:1px solid rgba(255,107,107,0.25)}
.src-all{background:rgba(255,200,87,0.15);color:var(--g4);border:1px solid rgba(255,200,87,0.25)}

/* ── FORM ── */
.field{margin-bottom:1.5rem}
.field label{display:block;font-size:0.65rem;font-family:'Azeret Mono',monospace;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted2);margin-bottom:0.5rem}
.field label .hint{font-size:0.6rem;color:var(--muted);text-transform:none;letter-spacing:0;margin-left:0.5rem;font-family:'Space Grotesk',sans-serif}
.field input,.field select{
  width:100%;background:var(--s2);border:1px solid var(--border2);color:var(--text);
  padding:0.75rem 1rem;font-family:'Azeret Mono',monospace;font-size:0.82rem;outline:none;
  transition:border-color 0.2s;border-radius:var(--r)
}
.field input:focus,.field select:focus{border-color:var(--g)}
.field input::placeholder{color:var(--muted)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}

/* ── INSTRUCTIONS ── */
.instr{
  background:var(--s1);border:1px solid var(--border);border-left:2px solid var(--g);
  padding:1.2rem 1.5rem;font-size:0.75rem;line-height:2;color:var(--muted2);margin-bottom:2rem;border-radius:var(--r)
}
.instr strong{color:var(--text)}
.instr a{color:var(--g);text-decoration:none}
.instr a:hover{text-decoration:underline}
.instr code{background:rgba(184,255,87,0.08);padding:0.1rem 0.4rem;color:var(--g);font-family:'Azeret Mono',monospace;font-size:0.75rem}
.instr-block{background:var(--s2);border:1px solid var(--border);border-left:2px solid var(--g2);padding:1rem 1.5rem;font-size:0.73rem;line-height:1.9;color:var(--muted2);margin-bottom:1.2rem;border-radius:var(--r)}
.instr-block strong{color:var(--g2)}

/* ── BUTTONS ── */
.btn{
  background:var(--g);color:#000;border:none;padding:0.85rem 2rem;
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:0.85rem;
  cursor:pointer;letter-spacing:0.3px;transition:opacity 0.15s,transform 0.1s;border-radius:var(--r)
}
.btn:hover{opacity:0.88}
.btn:active{transform:scale(0.98)}
.btn:disabled{opacity:0.3;cursor:not-allowed}
.btn-secondary{background:transparent;color:var(--text);border:1px solid var(--border2)}
.btn-secondary:hover{border-color:var(--muted2)}
.btn-sm{padding:0.5rem 1rem;font-size:0.75rem}
.btn-row{display:flex;gap:0.8rem;flex-wrap:wrap;margin-top:2rem}

/* ── PLAYLIST PICKER ── */
.pl-grid{
  display:flex;flex-direction:column;gap:0.4rem;
  max-height:380px;overflow-y:auto;border:1px solid var(--border);background:var(--s2);padding:0.4rem
}
.pl-item{
  display:flex;align-items:center;gap:0.8rem;padding:0.6rem 0.8rem;
  cursor:pointer;border:1px solid transparent;border-radius:var(--r);transition:all 0.12s;user-select:none
}
.pl-item:hover{background:var(--s3)}
.pl-item.sel{border-color:var(--g);background:rgba(184,255,87,0.04)}
.pl-img{width:38px;height:38px;object-fit:cover;flex-shrink:0;background:var(--border);border-radius:2px}
.pl-name{font-weight:600;font-size:0.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-meta{font-size:0.65rem;color:var(--muted2);margin-top:0.1rem;font-family:'Azeret Mono',monospace}
.pl-check{width:16px;height:16px;border:1px solid var(--border2);flex-shrink:0;margin-left:auto;border-radius:2px;display:flex;align-items:center;justify-content:center;font-size:0.65rem;color:var(--g)}
.pl-item.sel .pl-check{background:rgba(184,255,87,0.15);border-color:var(--g)}

.pick-bar{display:flex;align-items:center;gap:0.8rem;margin-bottom:0.8rem;flex-wrap:wrap}
.pick-bar span{margin-left:auto;font-size:0.7rem;color:var(--muted2);font-family:'Azeret Mono',monospace}

/* ── SLIDER ── */
.slider-wrap{display:flex;align-items:center;gap:1rem;margin-top:0.5rem}
.slider-wrap input[type=range]{flex:1;accent-color:var(--g)}
.slider-label{font-size:0.7rem;color:var(--muted2)}
.slider-val{font-family:'Azeret Mono',monospace;color:var(--g);font-size:0.85rem;min-width:2.5rem;text-align:right}
.slider-desc{font-size:0.72rem;color:var(--muted2);line-height:1.7;margin-top:0.5rem}

/* ── TOGGLE ── */
.toggle-row{display:flex;align-items:center;gap:0.8rem;margin-top:0.8rem;cursor:pointer}
.toggle-row input{accent-color:var(--g);width:14px;height:14px}
.toggle-row span{font-size:0.78rem;color:var(--muted2)}

/* ── PROGRESS ── */
.progress-card{background:var(--s1);border:1px solid var(--border);padding:2rem;margin-bottom:1.2rem;border-radius:var(--r)}
.prog-bar-bg{background:var(--s2);border:1px solid var(--border);height:4px;overflow:hidden;border-radius:2px;margin:1rem 0}
.prog-bar-fill{height:100%;background:var(--g);transition:width 0.5s ease;width:0%}
.prog-label{font-size:0.68rem;color:var(--muted2);font-family:'Azeret Mono',monospace}

/* ── LOG ── */
.log{
  background:var(--bg);border:1px solid var(--border);
  padding:1rem;height:220px;overflow-y:auto;
  font-size:0.7rem;line-height:1.9;border-radius:var(--r)
}
.l{color:var(--muted2)}
.l.ok{color:var(--g)}
.l.info{color:var(--g2)}
.l.warn{color:var(--g4)}
.l.err{color:var(--g3)}
.l.src-c{color:#7c87ff}
.l.src-l{color:#ff6b6b}

/* ── RESULTS ── */
.results-list{display:flex;flex-direction:column;gap:0.8rem}
.res-row{
  background:var(--s1);border:1px solid var(--border);
  display:grid;grid-template-columns:52px 1fr auto auto;
  align-items:center;gap:1rem;padding:1rem 1.2rem;border-radius:var(--r);
}
.res-img{width:52px;height:52px;object-fit:cover;background:var(--border);border-radius:2px}
.res-name{font-weight:700;font-size:0.9rem;margin-bottom:0.15rem}
.res-meta{font-size:0.65rem;color:var(--muted2);font-family:'Azeret Mono',monospace}

/* ── CENTROID PILLS ── */
.cpills{display:flex;flex-wrap:wrap;gap:0.3rem;margin-top:0.4rem}
.cp{font-size:0.58rem;padding:0.12rem 0.45rem;border-radius:20px;border:1px solid var(--border2);color:var(--muted2);font-family:'Azeret Mono',monospace}
.cp.hi{border-color:var(--g);color:var(--g)}
.cp.mood{border-color:var(--g2);color:var(--g2)}

/* ── RESULTS COUNT ── */
.res-count{font-weight:700;font-size:1.4rem;color:var(--g);text-align:right;white-space:nowrap}
.res-count small{font-size:0.6rem;color:var(--muted2);display:block;text-align:right;font-family:'Azeret Mono',monospace;font-weight:400}
.res-open{font-size:0.68rem;color:var(--g2);text-decoration:none;white-space:nowrap}
.res-open:hover{text-decoration:underline}

/* ── STAT BOXES ── */
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:0.8rem;margin-bottom:1.5rem}
.stat-box{background:var(--s2);border:1px solid var(--border);padding:1rem 1.2rem;border-radius:var(--r)}
.stat-num{font-family:'Azeret Mono',monospace;font-size:1.6rem;font-weight:500;color:var(--g)}
.stat-label{font-size:0.65rem;color:var(--muted2);margin-top:0.2rem;text-transform:uppercase;letter-spacing:1px}

/* ── SKIPPED NOTICE ── */
.skipped-notice{background:rgba(255,200,87,0.05);border:1px solid rgba(255,200,87,0.2);padding:1rem 1.2rem;font-size:0.73rem;color:var(--g4);border-radius:var(--r);margin-top:0.8rem;line-height:1.7}

/* ── SKELETONS ── */
.skel{
  background:linear-gradient(90deg,var(--s1) 25%,var(--s2) 50%,var(--s1) 75%);
  background-size:200% 100%;animation:skel 1.4s infinite;
  height:54px;border:1px solid var(--border);border-radius:var(--r)
}
@keyframes skel{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── MISC ── */
.hidden{display:none!important}
.sep{height:1px;background:var(--border);margin:2rem 0}
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-track{background:var(--s1)}
::-webkit-scrollbar-thumb{background:var(--border2)}