*{box-sizing:border-box}:root{color-scheme:dark;--bg:#070a12;--panel:#101727;--panel2:#172137;--text:#f7f8fb;--muted:#aeb8cc;--gold:#f1b733;--gold2:#ffd978;--line:rgba(255,255,255,.1)}body{margin:0;min-height:100vh;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;background:radial-gradient(circle at 15% 0,rgba(57,88,160,.28),transparent 32rem),linear-gradient(#0a0f1c,var(--bg));color:var(--text)}button,input,select{font:inherit}button{cursor:pointer}header,main,footer{width:min(980px,calc(100% - 32px));margin:auto}header{display:flex;justify-content:space-between;align-items:center;padding:28px 0 18px}.brand{display:flex;align-items:center}h1,h2,h3,p{margin:0}h1{line-height:1;font-size:clamp(1.7rem,4vw,2.3rem)}header small{display:block;margin-bottom:5px;color:var(--gold2);font-weight:800;letter-spacing:.18em}.search-panel{padding:clamp(22px,5vw,40px);background:linear-gradient(145deg,rgba(22,32,53,.97),rgba(12,18,31,.97));border:1px solid var(--line);border-radius:26px;box-shadow:0 18px 50px rgba(0,0,0,.28)}.search-panel h2{font-size:clamp(1.75rem,5vw,3rem)}.search-panel>p{margin-top:8px;color:var(--muted)}.search{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;margin-top:24px;padding:8px 12px 8px 16px;background:#fff;color:#111;border:3px solid transparent;border-radius:18px}.search:focus-within{border-color:var(--gold);box-shadow:0 0 0 5px rgba(241,183,51,.15)}.search>span{font-size:1.8rem;transform:rotate(-20deg)}.search input{width:100%;min-width:0;padding:12px 4px;border:0;outline:0;background:transparent;color:#111;font-size:clamp(1rem,3vw,1.2rem)}.search button{width:38px;height:38px;border:0;border-radius:50%;background:#e9ecf2;color:#313747;font-size:1.5rem}.filters{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}.filters label{display:flex;flex-direction:column;gap:7px;color:var(--muted);font-size:.84rem;font-weight:700}select{padding:12px 14px;color:var(--text);background:var(--panel2);border:1px solid var(--line);border-radius:12px}.status{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 4px 12px;color:var(--muted)}.outline{padding:9px 13px;border:1px solid var(--line);border-radius:999px;color:var(--gold2);background:transparent;font-weight:800}.results{display:grid;gap:10px}.results article{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;padding:17px 18px;background:rgba(16,23,39,.92);border:1px solid var(--line);border-radius:17px}.results article:hover{border-color:rgba(241,183,51,.5)}h3{font-size:clamp(1rem,3vw,1.18rem)}.artist{margin-top:5px;color:var(--gold2);font-weight:700}.meta{display:flex;flex-direction:column;align-items:flex-end;gap:6px}.disc{color:var(--muted);font-size:.82rem}.num{padding:5px 9px;border-radius:8px;background:rgba(241,183,51,.14);color:var(--gold2);font-size:.9rem}.empty{padding:40px 22px;text-align:center;background:var(--panel);border:1px dashed var(--line);border-radius:18px;color:var(--muted)}nav{display:flex;justify-content:center;align-items:center;gap:16px;padding:22px 0}nav button{padding:10px 15px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text)}nav button:disabled{opacity:.35;cursor:default}footer{padding:16px 0 40px;color:var(--muted);text-align:center}footer small{font-size:.8rem}@media(max-width:640px){header,main,footer{width:calc(100% - 20px)}header{padding-top:18px}.filters{grid-template-columns:1fr}.results article{grid-template-columns:1fr;gap:12px}.meta{flex-direction:row;justify-content:space-between;align-items:center}.status{align-items:flex-start}}
.brand img{
  display:block;
  width:min(430px,72vw);
  height:auto;
  border-radius:18px;
  background:#fff;
  box-shadow:0 12px 36px rgba(0,0,0,.28);
}
.brand-subtitle{
  width:min(980px,calc(100% - 32px));
  margin:-8px auto 16px;
  color:var(--gold2);
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:.78rem;
}
.filters{
  grid-template-columns:minmax(0,320px);
}
@media(max-width:640px){
  .brand img{width:min(100%,420px)}
  .brand-subtitle{width:calc(100% - 20px);margin-top:-6px}
}

.scroll-sentinel{
  height:1px;
  width:100%;
}

header{justify-content:center}
.brand{justify-content:center;width:100%}
.search-panel{margin-top:8px}
.num{font-size:1.35rem;padding:8px 14px;font-weight:900}

.surprise-button{
  position:relative;
  overflow:hidden;
  padding:11px 18px;
  border:0;
  border-radius:999px;
  color:#fff;
  font-weight:900;
  letter-spacing:.01em;
  background:linear-gradient(135deg,#ffb000 0%,#ff5f6d 48%,#7b5cff 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.14),0 8px 22px rgba(123,92,255,.28),0 0 24px rgba(255,176,0,.22);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
.surprise-button::after{
  content:"";
  position:absolute;
  inset:-40% auto -40% -35%;
  width:32%;
  transform:rotate(18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  animation:surpriseShine 3.8s ease-in-out infinite;
}
.surprise-button:hover{
  transform:translateY(-2px) scale(1.03);
  filter:saturate(1.12);
  box-shadow:0 10px 30px rgba(123,92,255,.36),0 0 30px rgba(255,176,0,.32);
}
.surprise-button:active{
  transform:scale(.97);
}
.surprise-button span{
  display:inline-block;
  margin-right:5px;
  animation:surpriseTwinkle 1.8s ease-in-out infinite;
}
.song-card-flash{
  animation:songFlash 1.2s ease-out;
}
@keyframes surpriseShine{
  0%,55%{left:-40%}
  78%,100%{left:130%}
}
@keyframes surpriseTwinkle{
  0%,100%{transform:scale(1) rotate(0deg)}
  50%{transform:scale(1.22) rotate(12deg)}
}
@keyframes songFlash{
  0%{box-shadow:0 0 0 0 rgba(241,183,51,.8);border-color:#ffd978;background:rgba(72,52,14,.96)}
  100%{box-shadow:0 0 0 18px rgba(241,183,51,0)}
}
@media (prefers-reduced-motion:reduce){
  .surprise-button::after,.surprise-button span,.song-card-flash{animation:none}
  .surprise-button{transition:none}
}