*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif}
body{background:linear-gradient(135deg,#3b0d0d,#7a2412 45%,#180b08);color:#fff}.overlay{position:fixed;inset:0;background:radial-gradient(circle at top,rgba(255,180,70,.22),transparent 40%);pointer-events:none}
.container{width:min(1100px,92%);margin:auto;position:relative;padding:24px 0 20px}.hero{text-align:center;padding:32px 10px}.badge{display:inline-block;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);padding:8px 15px;border-radius:30px;font-size:14px}
h1{font-size:clamp(38px,7vw,68px);margin:15px 0 8px;text-shadow:0 4px 18px rgba(0,0,0,.35)}.hero p{color:#f7d9bd;font-size:17px}
.hero input{margin-top:18px;width:min(560px,100%);padding:14px 18px;border:0;border-radius:30px;font-size:16px;outline:none}
.now{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);border-radius:20px;padding:18px;margin:0 0 22px;backdrop-filter:blur(8px)}.nowTitle{color:#f7d9bd;font-size:13px;text-transform:uppercase;letter-spacing:1px}.now h2{margin:6px 0 14px;font-size:20px}
.playerWrap{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:14px;overflow:hidden}.playerWrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.playlist{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}.card{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);border-radius:18px;padding:18px;backdrop-filter:blur(8px);box-shadow:0 12px 30px rgba(0,0,0,.18)}
.card h3{margin:0 0 7px;font-size:19px}.card p{margin:0 0 15px;color:#e8cfc0;font-size:14px}.play{border:0;background:#fff;color:#631b0e;font-weight:bold;padding:10px 17px;border-radius:24px;cursor:pointer;font-size:14px}.play:hover{opacity:.9}.empty{text-align:center;padding:40px;color:#f0cdbb}footer{text-align:center;color:#d8b9a8;font-size:13px;padding:30px 0 5px}
@media(max-width:500px){.container{width:94%}.hero{padding-top:20px}.card{padding:16px}}