:root, body[data-theme="spotify"] {
  --bg: #101418; --panel: #171d23; --panel-2: #202832; --text: #f4f7fb; --muted: #a7b0bd;
  --accent: #1ed760; --accent-2: #17b852; --danger: #ff5c5c; --border: rgba(255,255,255,.1);
  --shadow: rgba(0,0,0,.28); --hero: radial-gradient(circle at top, #173321 0, var(--bg) 44%);
}

body[data-theme="amzl-spotify"] {
  --bg:#0f1111; --panel:#171a1f; --panel-2:#232f3e; --text:#f3f6f6; --muted:#aab7c4;
  --accent:#1ed760; --accent-2:#ff9900; --danger:#e95f5c; --border:rgba(255,153,0,.22);
  --shadow:rgba(0,0,0,.34); --hero:radial-gradient(circle at top left, rgba(30,215,96,.18), transparent 32%), radial-gradient(circle at top right, rgba(255,153,0,.20), transparent 36%), #0f1111;
}
body[data-theme="midnight"] { --bg:#080b14; --panel:#111827; --panel-2:#1f2937; --text:#f8fafc; --muted:#94a3b8; --accent:#60a5fa; --accent-2:#3b82f6; --danger:#fb7185; --border:rgba(148,163,184,.18); --shadow:rgba(0,0,0,.36); --hero:radial-gradient(circle at top, #172554 0, var(--bg) 48%); }
body[data-theme="light"] { --bg:#f5f7fb; --panel:#ffffff; --panel-2:#eef2f7; --text:#111827; --muted:#64748b; --accent:#16a34a; --accent-2:#15803d; --danger:#dc2626; --border:rgba(15,23,42,.13); --shadow:rgba(15,23,42,.12); --hero:radial-gradient(circle at top, #d8f8e1 0, var(--bg) 50%); }
body[data-theme="neon"] { --bg:#100414; --panel:#1b0b22; --panel-2:#2c1237; --text:#fff7ff; --muted:#c4a6cc; --accent:#f0abfc; --accent-2:#d946ef; --danger:#ff4d6d; --border:rgba(240,171,252,.2); --shadow:rgba(217,70,239,.15); --hero:radial-gradient(circle at top, #3b0764 0, var(--bg) 46%); }
* { box-sizing: border-box; }
body { margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; background:var(--hero); color:var(--text); min-height:100vh; }
.wrap { width:min(1160px, calc(100% - 28px)); margin:0 auto; padding:18px 0; }
.wrap.narrow { width:min(720px, calc(100% - 28px)); }
.hero { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-bottom:12px; }
.hero.center { justify-content:center; text-align:center; }
.hero-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
h1 { margin:0 0 4px; font-size:clamp(24px,4vw,38px); } h2 { margin:0 0 10px; font-size:18px; } p { color:var(--muted); margin:4px 0; }
a { color:var(--accent); } .grid { display:grid; grid-template-columns:1.2fr .8fr; gap:12px; }
.card { background:color-mix(in srgb, var(--panel) 94%, transparent); border:1px solid var(--border); border-radius:14px; padding:14px; box-shadow:0 14px 50px var(--shadow); backdrop-filter:blur(8px); }
.card + .card { margin-top:12px; } .sticky { position:sticky; top:16px; }
input, button, textarea, select { border-radius:12px; border:1px solid var(--border); padding:9px 10px; font:inherit; }
input, textarea, select { width:100%; background:color-mix(in srgb, var(--panel-2) 45%, black); color:var(--text); }
body[data-theme="light"] input, body[data-theme="light"] textarea, body[data-theme="light"] select { background:#fff; }
button, .button-link { background:var(--accent); color:#061007; font-weight:800; cursor:pointer; border:0; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; border-radius:10px; padding:9px 12px; }
button:hover:not(:disabled), .button-link:hover { filter:brightness(1.05); transform:translateY(-1px); }
button.secondary, .button-link.secondary { background:var(--panel-2); color:var(--text); border:1px solid var(--border); }
button.danger { background:var(--danger); color:white; } button.full { width:100%; margin-top:10px; }
button:disabled { opacity:.45; cursor:not-allowed; transform:none; filter:none; }
.row { display:flex; gap:10px; align-items:center; } .row > * { flex:1; }
.section-title { display:flex; justify-content:space-between; gap:10px; align-items:center; margin-bottom:10px; } .section-title h2 { margin:0; }
.track { display:grid; grid-template-columns:54px 1fr auto; gap:10px; align-items:center; padding:9px; border:1px solid var(--border); border-radius:14px; background:rgba(255,255,255,.035); }
.track + .track { margin-top:8px; } .track img { width:54px; height:54px; border-radius:10px; object-fit:cover; background:var(--panel-2); }
.title { font-weight:800; } .meta, .small { color:var(--muted); font-size:13px; } .status { min-height:22px; margin-top:10px; color:var(--muted); }
.badge { display:inline-flex; padding:5px 9px; border-radius:999px; background:color-mix(in srgb, var(--accent) 16%, transparent); color:var(--accent); font-weight:800; font-size:12px; white-space:nowrap; }
.badge.muted { background:var(--panel-2); color:var(--muted); } .badge.warn { background:rgba(255,184,77,.15); color:#ffcd75; }
.now { display:grid; grid-template-columns:74px 1fr; gap:12px; align-items:center; } .now img { width:74px; height:74px; border-radius:14px; object-fit:cover; background:var(--panel-2); }
.list { display:grid; gap:10px; } .admin-bar { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; } .hidden { display:none !important; }
.player-controls { margin:10px 0; } .player-controls button { min-width:92px; } .volume-row { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; margin:10px 0 6px; }
.volume-row input[type="range"] { padding:0; accent-color:var(--accent); }
.debug-box { white-space:pre-wrap; overflow:auto; max-height:360px; padding:12px; border-radius:12px; background:rgba(0,0,0,.25); font-size:12px; }
.progress-bar { width:100%; height:8px; border-radius:999px; overflow:hidden; background:rgba(255,255,255,.10); margin-top:7px; }
.progress-bar span { display:block; height:100%; width:0%; background:var(--accent); transition:width .25s linear; }
.vote { display:flex; align-items:center; gap:8px; } .vote button { padding:8px 10px; } .footer { text-align:center; color:var(--muted); padding:14px 0 4px; font-size:13px; }
.qr-card { text-align:center; } .qr-card img { width:min(420px, 100%); border-radius:18px; background:#fff; padding:12px; }
.pulse { animation:pulse .8s ease; } @keyframes pulse { 0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent);} 100%{ box-shadow:0 0 0 16px transparent;} }

.track-link { color:var(--text); text-decoration:none; }
.track-link:hover { color:var(--accent); text-decoration:underline; }
.request-groups { display:grid; gap:12px; }
.request-group { display:grid; gap:8px; }
.mini-heading { color:var(--accent); font-size:12px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; margin:2px 0; }

@media (max-width:850px) { .grid { grid-template-columns:1fr; } .hero { align-items:flex-start; flex-direction:column; } .sticky { position:static; } }
@media (max-width:650px) { .row, .volume-row { flex-direction:column; display:flex; align-items:stretch; } .track { grid-template-columns:56px 1fr; } .track > div:last-child { grid-column:1 / -1; } }

body[data-theme="amzl-spotify"] .card { border-top:1px solid color-mix(in srgb, var(--accent-2) 45%, transparent); }
body[data-theme="amzl-spotify"] button, body[data-theme="amzl-spotify"] .button-link { background:linear-gradient(135deg, var(--accent), #17b852); color:#061007; }
body[data-theme="amzl-spotify"] button.secondary, body[data-theme="amzl-spotify"] .button-link.secondary { background:linear-gradient(135deg, #232f3e, #17202b); color:var(--text); border:1px solid rgba(255,153,0,.28); }
body[data-theme="amzl-spotify"] .badge { background:rgba(30,215,96,.14); border:1px solid rgba(30,215,96,.22); }
body[data-theme="amzl-spotify"] .hero { border-bottom:1px solid rgba(255,153,0,.18); padding-bottom:10px; }
body[data-theme="amzl-spotify"] .title { letter-spacing:.1px; }

.compact-track { grid-template-columns:44px 1fr auto; padding:7px; }
.compact-track img { width:44px; height:44px; border-radius:9px; }

.warn-text { color: var(--warn, #ff9900); font-weight: 700; }
.announcement-box { margin-top:10px; padding-top:10px; border-top:1px solid var(--border); }
.compact-title { margin-bottom:8px; }
.compact-title h3 { margin:0; font-size:14px; }
.fade-grid { display:grid; grid-template-columns:repeat(5, minmax(70px, 1fr)); gap:7px; align-items:end; }
.fade-grid label { display:grid; gap:4px; color:var(--muted); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.fade-grid input { padding:7px 8px; border-radius:10px; }
@media (max-width:650px) { .fade-grid { grid-template-columns:repeat(2, 1fr); } }
.playlist-search-row { margin-top: 10px; }
.compact-list { margin-top: 10px; }
.playlist-result .playlist-actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.playlist-result .playlist-actions a { font-size: 12px; }