:root{
  --bg:#0b0b10; --fg:#e8e8f3; --muted:#9aa0ac;
  --card:#12121a; --border:#26263f; --acc:#5b86ff; --acc-700:#2a4fff;
}
:root.light{
  --bg:#f8f9fe; --fg:#12131a; --muted:#616b78;
  --card:#ffffff; --border:#e2e6ef; --acc:#3a6cff; --acc-700:#284bd6;
}
:root.neon{
  --bg:#05060a; --fg:#eaf2ff; --muted:#95a2c3;
  --card:#0a0b11; --border:#1a1f3a; --acc:#00f7ff; --acc-700:#00b3bd;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font:15px/1.5 system-ui,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--fg);
}
header{
  display:flex; align-items:center; gap:16px; padding:14px 16px; border-bottom:1px solid var(--border);
  position:sticky; top:0; background:linear-gradient(180deg,var(--bg),color-mix(in oklab, var(--bg) 70%, transparent));
  z-index:2;
}
.brand{ font-weight:700; letter-spacing:.3px }
main{ max-width:900px; margin:20px auto; padding:0 16px; display:grid; gap:18px; grid-template-columns:1fr }
.controls .btn{
  border:1px solid var(--border); padding:10px 14px; border-radius:10px; background:var(--card); color:var(--fg); cursor:pointer;
}
.controls input{
  width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:12px; background:var(--card); color:var(--fg);
}
.controls form{ display:flex; gap:10px }
.card{
  border:1px solid var(--border); border-radius:14px; background:var(--card); padding:14px 16px;
}
.muted{ color:var(--muted) }
h3{ margin:10px 0 }
.queue ul, .queueList{ list-style:none; margin:0; padding:0 }
.queue li{
  display:flex; align-items:center; gap:10px; margin:8px 0; padding:10px 12px; border:1px solid var(--border); border-radius:12px; background:var(--card);
}
.queue .name{ flex:1 1 auto; min-width:0; text-overflow:ellipsis; white-space:nowrap; overflow:hidden }
.queue .btn{ border:1px solid var(--border); padding:6px 10px; border-radius:10px; background:#0f0f19; color:var(--fg); cursor:pointer }
audio{ width:100%; margin-top:8px }
/* Busy overlay */
.hidden { display:none; }

.busy {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: color-mix(in oklab, var(--bg) 65%, transparent);
  backdrop-filter: blur(2px);
  z-index: 9999;
}
.busy .spinner {
  width: 48px; height: 48px;
  border: 4px solid var(--border);
  border-top-color: var(--acc);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
  margin: 0 auto 12px;
}
.busy .msg { color: var(--fg); opacity: 0.9; font-weight: 600; }

@keyframes spin { to { transform: rotate(360deg); } }

/* Button inline spinner state */
.btn.loading {
  position: relative;
  pointer-events: none;
  opacity: 0.8;
}
.btn.loading::after {
  content: "";
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px;
  border: 2px solid var(--border);
  border-top-color: var(--acc);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.hidden { display: none !important; }