:root{font-family:Inter,system-ui,sans-serif;color:#eef2ff;background:#090d18;color-scheme:dark}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 20% 0,#172554 0,#090d18 40%);min-height:100vh}a{color:#a5b4fc;text-decoration:none}.top{height:70px;padding:0 24px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #25304a;background:#0b1020e8;position:sticky;top:0;z-index:2}.brand{display:flex;gap:16px;align-items:center;font-size:20px}.onair{font-size:12px;background:#7f1d1d;padding:6px 9px;border-radius:999px;color:#fecaca}.top nav{display:flex;align-items:center;gap:14px}.layout{display:grid;grid-template-columns:1fr 300px;gap:18px;max-width:1400px;margin:18px auto;padding:0 18px}.card{background:#111827e8;border:1px solid #26334f;border-radius:18px;box-shadow:0 18px 50px #0005}.radio{grid-column:1/3;padding:18px;display:flex;gap:18px;align-items:center}.cover{width:105px;height:105px;border-radius:16px;background:linear-gradient(135deg,#4f46e5,#9333ea);display:grid;place-items:center;font-size:45px}.radio h2{margin:4px 0}.radio p{margin:6px 0}.radio audio{width:min(520px,70vw)}.chat{height:calc(100vh - 245px);min-height:520px;display:flex;flex-direction:column;overflow:hidden}.section-title{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid #26334f}.section-title h2,.online h2{margin:0;font-size:18px}#connection{font-size:12px;color:#86efac}#messages{flex:1;overflow:auto;padding:15px}.msg{padding:10px 12px;margin:7px 0;background:#172033;border-radius:12px}.msg p{margin:6px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}.msg time{float:right;color:#7c8aa5;font-size:12px}.msg.system{text-align:center;background:transparent;color:#8fa0bf;font-size:13px}#sendForm{padding:12px;display:flex;gap:9px;border-top:1px solid #26334f}input{width:100%;background:#0b1220;border:1px solid #34415e;color:#fff;border-radius:10px;padding:12px;outline:none}input:focus{border-color:#818cf8}.primary{border:0;background:#6366f1;color:white;font-weight:700;padding:11px 18px;border-radius:10px;cursor:pointer}.online{padding:16px}.user{display:flex;gap:10px;padding:10px 4px;border-bottom:1px solid #202b42}.user small{display:block;color:#8290aa;margin-top:2px}.dot{width:9px;height:9px;border-radius:50%;background:#22c55e;margin-top:5px}.role{font-size:10px;font-weight:800;padding:3px 6px;border-radius:6px;background:#334155}.role.admin{background:#991b1b}.role.moderator{background:#166534}.role.dj{background:#6b21a8}.role.vip{background:#92400e}.auth{display:grid;place-items:center;padding:20px}.auth-card,.page{width:min(440px,100%);padding:30px}.brand-mark{width:70px;height:70px;margin:auto;border-radius:20px;background:linear-gradient(135deg,#4f46e5,#9333ea);display:grid;place-items:center;font-size:36px}.auth h1{text-align:center;margin-bottom:5px}.muted{color:#8b98b2}.auth .muted{text-align:center}.auth form,.page form{display:grid;gap:14px;margin-top:22px}label{display:grid;gap:7px;font-size:13px;color:#aab5ca}.auth-links{display:flex;justify-content:space-between;margin-top:18px}.alert{background:#451a1a;color:#fecaca;padding:10px;border-radius:9px}.success{background:#14532d;padding:10px;border-radius:9px}.page{margin:70px auto}@media(max-width:800px){.top{height:auto;padding:12px;align-items:flex-start}.top nav{font-size:12px;flex-wrap:wrap;justify-content:flex-end}.layout{display:block;padding:0 10px}.radio{margin-bottom:12px}.cover{width:72px;height:72px}.chat{height:65vh;min-height:450px;margin-bottom:12px}.online{margin-bottom:20px}}.replybar{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-top:1px solid #334155;background:#111827;font-size:.9rem}.replybar button,.msg-actions button,.user details button{background:transparent;border:0;color:#94a3b8;cursor:pointer}.msg-actions{opacity:.35;display:flex;gap:8px}.msg:hover .msg-actions{opacity:1}.msg.mention{outline:1px solid #7c3aed;background:rgba(124,58,237,.08)}.disconnected{color:#f59e0b}.connected{color:#22c55e}.user details{margin-left:auto;position:relative}.user details summary{cursor:pointer;list-style:none}.user details[open]{background:#111827;padding:5px;border-radius:8px}.user details button{display:block;padding:4px 8px;width:100%;text-align:left}