:root { color-scheme: dark; --bg:#090b10; --panel:#121620; --line:#252b38; --text:#f5f7fb; --muted:#9aa4b5; --accent:#8b5cf6; --accent2:#6d3fe0; }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 20% 0,#21173b 0,transparent 34rem),var(--bg); color:var(--text); font:16px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif; }
header, main, footer { width:min(920px,calc(100% - 32px)); margin:auto; }
header { padding:64px 0 32px; display:flex; justify-content:space-between; gap:24px; align-items:start; }
h1 { font-size:clamp(2rem,6vw,4rem); line-height:1; margin:.15em 0; }
h2 { margin:0 0 8px; }
p { margin:.3em 0; }
.eyebrow { color:#b9a2ff; letter-spacing:.16em; font-size:.75rem; font-weight:700; }
.muted { color:var(--muted); }
main { display:grid; gap:18px; }
.card, .auth-card { background:#121620f0; border:1px solid var(--line); border-radius:18px; padding:24px; box-shadow:0 18px 60px #0005; }
.compact { padding:18px 24px; }
.auth-card { width:min(430px,calc(100% - 32px)); margin:14vh auto; }
form { display:grid; gap:12px; }
label { font-weight:650; }
input[type=url], input[type=password], input[type=file] { width:100%; margin-top:7px; padding:13px 15px; border:1px solid var(--line); border-radius:11px; background:#0b0e15; color:var(--text); font:inherit; }
.row { display:flex; gap:10px; }
.row input { flex:1; margin:0; }
button, .download { border:0; border-radius:11px; background:var(--accent); color:white; font:inherit; font-weight:750; padding:12px 18px; cursor:pointer; text-decoration:none; }
button:hover, .download:hover { background:var(--accent2); }
button.ghost { background:transparent; border:1px solid var(--line); }
.section-title { display:flex; justify-content:space-between; gap:16px; align-items:center; }
.check-all { white-space:nowrap; font-weight:500; }
.playlist { max-height:440px; overflow:auto; border-block:1px solid var(--line); }
.track { display:flex; gap:12px; padding:12px 4px; border-bottom:1px solid #202633; font-weight:450; }
.track:last-child { border:0; }
.alert { padding:12px 15px; border-radius:10px; margin-top:14px; }
.alert.error { background:#4a1722; color:#fecdd3; }
.alert.success { background:#103c30; color:#a7f3d0; }
.hidden { display:none; }
.progress { height:9px; background:#272c38; border-radius:9px; overflow:hidden; margin:16px 0; }
.progress span { display:block; height:100%; width:0; background:linear-gradient(90deg,var(--accent),#22d3ee); transition:width .3s; }
.results { display:grid; gap:9px; margin-top:16px; }
.download { display:block; }
.item-error { padding:11px 13px; border:1px solid #5b2631; border-radius:10px; color:#fecdd3; background:#32141b; }
summary { cursor:pointer; font-weight:700; }
footer { padding:30px 0 60px; color:var(--muted); font-size:.85rem; }
@media (max-width:600px) { header { padding-top:34px; } .row, .section-title { align-items:stretch; flex-direction:column; } .row button { width:100%; } }