:root{--bg-0: #04131f;--bg-1: #0f2736;--bg-2: #194156;--card: rgba(7, 22, 35, .86);--card-border: rgba(133, 196, 221, .24);--text-primary: #ecf8ff;--text-muted: #aac2ce;--accent: #37e2c3;--accent-strong: #13ba9a;--danger: #ff6f63;--shadow: 0 26px 48px rgba(2, 10, 16, .42)}*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:Avenir Next,Segoe UI Variable,Helvetica Neue,sans-serif;color:var(--text-primary);background:radial-gradient(circle at 12% 14%,rgba(55,226,195,.24),transparent 42%),radial-gradient(circle at 86% 2%,rgba(71,149,255,.2),transparent 34%),linear-gradient(145deg,var(--bg-0),var(--bg-1) 42%,var(--bg-2))}#root{width:100%}.app-shell{max-width:1040px;margin:0 auto;padding:1.2rem;display:grid;gap:1rem}.panel{background:var(--card);border:1px solid var(--card-border);border-radius:16px;box-shadow:var(--shadow);padding:1rem;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.hero-panel h1{margin:0;font-size:clamp(1.6rem,2.7vw,2.2rem);letter-spacing:.02em}.hero-panel p{margin:.55rem 0 0;color:var(--text-muted)}.status-row{margin-top:1rem;display:flex;flex-wrap:wrap;gap:.55rem}.pill{padding:.4rem .75rem;border-radius:999px;border:1px solid transparent;font-size:.85rem;font-weight:600}.status-connected{color:#9ef8d7;border-color:#35e4b96b;background:#14776157}.status-connecting{color:#c8e8ff;border-color:#60a8e76b;background:#17436e5c}.status-reconnecting{color:#ffd57a;border-color:#ffbc5073;background:#66421159}.status-error{color:#ffd0cb;border-color:#ff6f6373;background:#6e232361}.status-disconnected,.status-idle{color:#cadde8;border-color:#a0bccb59;background:#21364357}.neutral-pill{color:#d5ecf6;border-color:#aedbec54;background:#13324359}.quality-good{color:#9ef8d7;border-color:#35e4b96b;background:#14776157}.quality-fair{color:#ffe3a2;border-color:#ffd68673;background:#75561859}.quality-poor{color:#ffd0cb;border-color:#ff6f6373;background:#6e232361}.quality-unknown{color:#cadde8;border-color:#a0bccb59;background:#21364357}.join-panel,.room-panel{display:grid;gap:.9rem}h2,h3{margin:0;font-size:1.15rem}label{display:grid;gap:.4rem;color:var(--text-muted);font-size:.92rem}input,select{border:1px solid rgba(150,214,238,.3);background:#04121db3;color:var(--text-primary);border-radius:12px;padding:.66rem .85rem;font-size:1rem;outline:none}input[type=range]{padding:0;border:none;border-radius:0;background:transparent}input:focus,select:focus{border-color:#38ddc1b8;box-shadow:0 0 0 3px #38ddc133}.button-row{display:flex;flex-wrap:wrap;gap:.65rem}button{border:none;border-radius:12px;padding:.7rem 1.05rem;background:linear-gradient(135deg,var(--accent),var(--accent-strong));color:#062117;font-weight:700;cursor:pointer;transition:transform .11s ease,filter .11s ease}button:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.03)}button:disabled{opacity:.45;cursor:not-allowed}button.secondary{background:linear-gradient(135deg,#85b8d442,#5589a84d);color:var(--text-primary);border:1px solid rgba(147,190,214,.35)}button.danger{background:linear-gradient(135deg,#ff8c80,#eb5a4a);color:#2f0808}button.ghost{background:transparent;border:1px solid rgba(146,180,198,.35);color:var(--text-muted);padding:.4rem .7rem}.room-header{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}.room-header p{margin:.35rem 0 0;color:var(--text-muted);font-size:.9rem}.settings-panel{display:grid;gap:.9rem;border-color:#38ddc140}.settings-header{display:flex;justify-content:space-between;align-items:center;gap:1rem}.settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.7rem .85rem}.toggle{grid-auto-flow:column;justify-content:start;gap:.5rem;align-items:center}.inline-row{display:flex;align-items:center;gap:.5rem}.tiny-pill{border-radius:999px;padding:.2rem .5rem;font-size:.74rem;border:1px solid rgba(160,188,203,.35)}.tiny-pill.active{border-color:#35e4b96b;background:#14776157;color:#9ef8d7}.tiny-pill.idle{background:#21364357;color:#cadde8}.meter-wrap{display:grid;gap:.35rem;color:var(--text-muted)}.meter-track{width:100%;height:10px;border-radius:999px;background:#263e4bcc;overflow:hidden}.meter-fill{height:100%;background:linear-gradient(90deg,#3be4c6,#75f0d2)}.helper{margin:0;color:var(--text-muted);font-size:.84rem}.participants ul,.stats-panel ul,.debug-panel ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}.participants li{border:1px solid rgba(122,173,196,.28);background:#071722a8;border-radius:12px;padding:.7rem .85rem;display:grid;grid-template-columns:minmax(120px,1fr) auto auto auto auto;gap:.65rem;align-items:center}.participants li.speaking{border-color:#37e2c394;background:#072321b3}.name{font-weight:700}.meta{color:var(--text-muted);font-size:.86rem}.quality-chip{border-radius:999px;border:1px solid rgba(147,190,214,.35);padding:.2rem .55rem;font-size:.75rem;font-weight:700}.badge{justify-self:end;border-radius:999px;padding:.2rem .6rem;font-size:.75rem;font-weight:700;border:1px solid transparent}.badge.active{color:#0c2c20;background:#5ff4d7}.badge.idle{color:#c2d7e2;border-color:#83a8b966}.stats-panel li{border:1px solid rgba(122,173,196,.28);background:#071722a8;border-radius:10px;padding:.55rem .7rem;color:#cfe6f1;font-size:.85rem}.error-panel{border-color:#ff6f636b;background:#441010a6}.error-panel strong{color:#ffd4ce}.error-panel p{margin:.35rem 0 0}.debug-panel details{display:grid;gap:.55rem}.debug-panel summary{cursor:pointer;font-weight:700}.log-actions{display:flex;justify-content:flex-end}.debug-panel ul{max-height:240px;overflow:auto}.debug-panel li{color:#c1dce8;font-size:.82rem}.debug-panel code{color:#89d4ff}.hidden-audio{position:absolute;width:0;height:0;overflow:hidden}@media (max-width: 780px){.app-shell{padding:.8rem}.participants li{grid-template-columns:1fr;align-items:flex-start}.badge{justify-self:flex-start}.room-header,.settings-header{flex-direction:column;align-items:stretch}.settings-grid{grid-template-columns:1fr}}