:root { --bg:#0f0f12; --card:#18191f; --txt:#f3f3f3; --muted:#9aa0a6; --brand:#22e3a6; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--txt); background:linear-gradient(180deg,#101217,#0b0c10);}
.site { text-align:center; padding:32px 16px; }
.logo { width:80px; height:auto; display:block; margin:0 auto 8px; }
h1 { margin:4px 0 6px; font-weight:800; letter-spacing:.5px; }
.tag { color:var(--muted); margin:0; }
.player-card { max-width:560px; margin:20px auto; background:var(--card); border-radius:16px; padding:20px; box-shadow:0 10px 30px rgba(0,0,0,.3);}
.now { font-size:14px; color:var(--muted); margin-bottom:10px; }
audio { width:100%; display:block; background:#000; border-radius:10px; }
.quality { display:flex; gap:8px; align-items:center; margin-top:12px; }
.q { background:#222430; color:#fff; border:1px solid #2c2f3a; padding:8px 12px; border-radius:999px; cursor:pointer; }
.q.active { border-color:var(--brand); box-shadow:0 0 0 2px rgba(34,227,166,.2) inset; }
.small { color:var(--muted); font-size:12px; margin-top:8px; }
.contact { max-width:560px; margin:28px auto; padding:0 16px; }
.contact a { color:var(--brand); text-decoration:none; }
.foot { text-align:center; color:var(--muted); font-size:12px; padding:24px; }