:root {
  color-scheme: dark;
  --bg:#08090c;
  --card:#11131a;
  --line:#292d38;
  --text:#f4f6fb;
  --muted:#9ca3b1;
  --green:#b7ff4a;
}

*{box-sizing:border-box}
body{
  margin:0;
  background:radial-gradient(circle at 50% -10%,#222832,#08090c 45%);
  color:var(--text);
  font:14px system-ui,-apple-system,Segoe UI,sans-serif
}
.wrap{width:min(1100px,calc(100% - 28px));margin:auto;padding:28px 0 70px}
.site-nav{display:flex;justify-content:center;gap:8px;margin-bottom:28px;flex-wrap:wrap}
.site-nav a{
  color:var(--muted);text-decoration:none;border:1px solid var(--line);
  padding:9px 14px;border-radius:999px
}
.site-nav a.active,.site-nav a:hover{
  color:var(--text);background:#171a22;border-color:#555c6c
}
header{text-align:center;margin-bottom:25px}
.logo{font-weight:850;margin-bottom:18px}
h1{
  font-size:clamp(32px,5vw,55px);line-height:1.03;
  letter-spacing:-.04em;margin:0 auto 14px
}
header p{color:var(--muted)}
.card{
  background:#11131add;border:1px solid var(--line);border-radius:18px;
  padding:18px;margin-bottom:14px;box-shadow:0 18px 60px #0005
}
.upload-card{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.upload-card>div:first-child{flex:1;min-width:250px}
.upload-card p{margin:6px 0 0}
.upload-button{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--green);color:#090c06;font-weight:850;
  border-radius:10px;padding:11px 15px;cursor:pointer
}
.upload-button input{display:none}
.status{width:100%;color:var(--green);min-height:20px}
.controls{display:grid;grid-template-columns:1fr 180px;gap:12px}
.controls>div{display:flex;flex-direction:column;gap:7px}
label{font-size:11px;text-transform:uppercase;font-weight:800;color:var(--muted)}
input,select{
  width:100%;background:#090b0f;color:var(--text);
  border:1px solid var(--line);border-radius:10px;padding:11px;font:inherit
}
.letters{display:flex;gap:6px;flex-wrap:wrap}
.letter{
  min-width:34px;padding:8px 9px;border:1px solid var(--line);
  border-radius:9px;background:#191c24;color:var(--muted);
  cursor:pointer;text-align:center;font-weight:800
}
.letter:hover,.letter.active{background:var(--green);color:#090c06;border-color:var(--green)}
.library{display:grid;gap:12px}
.song{
  background:#11131add;border:1px solid var(--line);border-radius:16px;
  padding:17px;display:grid;grid-template-columns:1fr auto;gap:14px;
  align-items:center
}
.song-title{font-size:18px;font-weight:800;overflow-wrap:anywhere}
.song-date{font-size:12px;color:var(--muted);margin-top:4px}
.song-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end}
button{
  border:0;border-radius:10px;padding:10px 13px;
  background:var(--green);color:#090c06;font-weight:850;cursor:pointer
}
button.secondary{background:#191c24;color:var(--text);border:1px solid var(--line)}
button.voted{border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}
.vote-count{font-variant-numeric:tabular-nums;min-width:30px}
.muted{color:var(--muted)}
.status.error,.error{color:#ff9c9c}
.empty{text-align:center}
.hidden{display:none!important}
@media(max-width:700px){
  .controls{grid-template-columns:1fr}
  .song{grid-template-columns:1fr}
  .song-actions{justify-content:flex-start}
}