:root{--bg: #0d0f1a;--surface: #141825;--surface-2: #1a1f30;--border: #242942;--text: #e0e7ff;--text-muted: #94a3b8;--accent: #8b5cf6;--accent-hover: #a78bfa;--accent-glow: #c4b5fd44;--success: #10b981;--danger: #ef4444;--warning: #f59e0b;--wave-active: #a78bfa;--wave-inactive: #475569}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,SF Pro Display,-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg);color:var(--text);line-height:1.5;-webkit-font-smoothing:antialiased}.container{min-height:100vh;display:flex;flex-direction:column;background:linear-gradient(135deg,#0d0f1a,#1a1a2e);position:relative;overflow:hidden}.container:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,rgba(139,92,246,.15),transparent 50%),radial-gradient(circle at 70% 80%,rgba(99,102,241,.1),transparent 50%);pointer-events:none;z-index:0}header{text-align:center;padding:2rem 1rem 1.5rem;position:relative;z-index:10}h1{font-size:2.2rem;font-weight:800;background:linear-gradient(90deg,#c4b5fd,#e0e7ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.5px;margin-bottom:.5rem}.room-id{display:inline-flex;align-items:center;gap:8px;background:var(--surface-2);color:var(--accent);font-family:JetBrains Mono,Fira Code,monospace;font-size:.95rem;font-weight:600;padding:10px 18px;border-radius:16px;border:1px solid var(--border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 4px 15px #0000004d}.admin-badge{position:absolute;top:1rem;right:1rem;background:linear-gradient(135deg,#f59e0b,#f97316);color:#fff;font-size:.7rem;font-weight:700;padding:6px 12px;border-radius:50px;box-shadow:0 0 20px #fb9e0b66}.participants{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;padding:1rem;flex:1;z-index:10}.participant{background:var(--surface);border:1px solid var(--border);border-radius:24px;padding:1.8rem;text-align:center;transition:all .4s cubic-bezier(.4,0,.2,1);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);position:relative;overflow:hidden;box-shadow:0 8px 32px #0006}.participant:before{content:"";position:absolute;inset:0;border-radius:24px;padding:2px;background:linear-gradient(45deg,transparent,var(--accent-glow),transparent);mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .4s}.participant.speaking:before{opacity:1}.participant.offline{opacity:.6;filter:grayscale(.7)}.participant.speaking{transform:translateY(-4px);box-shadow:0 20px 40px #8b5cf64d;border-color:var(--accent)}.avatar{width:96px;height:96px;border-radius:50%;background:var(--surface-2);margin:0 auto 1rem;display:flex;align-items:center;justify-content:center;border:4px solid var(--border);transition:all .3s;position:relative}.participant.speaking .avatar{border-color:var(--accent);box-shadow:0 0 30px var(--accent-glow)}.avatar svg{width:48px;height:48px;stroke:var(--text-muted);transition:stroke .3s}.participant.speaking .avatar svg{stroke:var(--accent)}.mute-icon{position:absolute;bottom:-6px;right:-6px;background:var(--danger);color:#fff;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;box-shadow:0 4px 12px #0006;animation:pulse 2s infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.name{font-size:1.3rem;font-weight:700;margin-bottom:.5rem;color:var(--text)}.status{font-size:.95rem;color:var(--text-muted);margin-bottom:1rem}.status.mic-on{color:var(--success)}.status.mic-off{color:var(--danger)}.quality-indicator{position:absolute;top:12px;right:12px;font-size:.75rem;padding:6px 10px;border-radius:12px;background:#00000080;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-weight:600}.quality-good{color:var(--success)}.quality-fair{color:var(--warning)}.quality-poor{color:var(--danger)}.wave-container{height:60px;display:flex;align-items:center;justify-content:center;gap:6px;margin:1rem 0}.wave-bar{width:5px;height:10px;background:var(--wave-inactive);border-radius:4px;transition:all .1s ease}.participant.speaking .wave-bar{background:var(--wave-active);box-shadow:0 0 15px #a78bfa99}.room-input-card{background:var(--surface);border:1px solid var(--border);border-radius:24px;padding:2.5rem 2rem;max-width:420px;margin:2rem auto;text-align:center;box-shadow:0 16px 40px #00000080;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);z-index:10}input#room-input{width:100%;padding:16px 20px;background:var(--surface-2);border:1px solid var(--border);border-radius:16px;color:var(--text);font-size:1.1rem;margin-bottom:1rem;transition:all .3s}input#room-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accen t-glow)}button{padding:14px 28px;border:none;border-radius:16px;font-weight:600;font-size:1rem;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}button#join-btn,button.mute-btn{background:var(--accent);color:#fff;box-shadow:0 8px 20px #8b5cf666}button#join-btn:hover,button.mute-btn:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 12px 30px #8b5cf680}button.stop{background:transparent;color:var(--danger);border:2px solid var(--danger)}button.stop:hover{background:var(--danger);color:#fff;transform:translateY(-2px)}.controls{display:flex;gap:1rem;padding:1.5rem;background:var(--surface);border-top:1px solid var(--border);z-index:10;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.mic-warning{background:linear-gradient(90deg,#fb9e0b26,#ef44441a);color:#fcd34d;padding:1rem;border-radius:16px;border:1px solid rgba(251,158,11,.3);text-align:center;margin:1rem;font-weight:500;z-index:10}footer{text-align:center;padding:1.5rem;color:var(--text-muted);font-size:.9rem;font-weight:500;z-index:10}@media(max-width:640px){h1{font-size:1.8rem}.participants{grid-template-columns:1fr;padding:.5rem}.controls{flex-direction:column;padding:1rem}.room-input-card{margin:1rem;padding:2rem 1.5rem}}.room-input-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:20px;text-align:center;animation:fadeIn .3s ease}.room-input-card input{width:100%;padding:12px 16px;border:1px solid var(--border);background:#ffffff0d;color:var(--text);border-radius:12px;font-size:1rem;margin-bottom:12px;outline:none;transition:all .2s ease}.room-input-card input:focus{border-color:var(--accent);box-shadow:0 0 10px #6e56cf66}.room-input-card button{width:100%;background:var(--accent);color:#fff;border:none;padding:12px 20px;border-radius:12px;font-weight:600;font-size:1rem;cursor:pointer;transition:all .2s ease}.room-input-card button:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 4px 14px #6e56cf59}.controls{display:flex;gap:12px;justify-content:center;padding:14px;background:var(--card);border:1px solid var(--border);border-radius:14px;margin-top:12px;animation:fadeIn .3s ease}.controls button{flex:1;background:var(--danger);color:#fff;padding:12px 20px;border-radius:12px;border:none;font-weight:600;cursor:pointer;transition:all .2s ease;font-size:.95rem}.controls button:hover{transform:translateY(-2px);box-shadow:0 4px 14px #f8717159}.controls .stop{background:transparent;border:1px solid var(--danger);color:var(--danger)}.controls .stop:hover{background:#f8717126;box-shadow:none}.mic-warning{background:#fbbf2426;color:#fbbf24;padding:14px;border-radius:12px;border:1px solid rgba(251,191,36,.3);font-size:.85rem;text-align:center;margin-top:16px;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}