:root{--bg: #0f0f12;--surface: #18181c;--border: #2a2a30;--text: #e4e4e7;--text-muted: #a1a1aa;--accent: #22c55e;--accent-hover: #16a34a;--accent-glow: rgba(34, 197, 94, .35);--danger: #ef4444;--radius: 14px;--radius-sm: 10px}*{box-sizing:border-box}body{margin:0;font-family:Outfit,system-ui,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;min-height:100dvh;-webkit-font-smoothing:antialiased}#root{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px}input{font-family:inherit;font-size:1rem}button{font-family:inherit;cursor:pointer;border:none}button:disabled{cursor:not-allowed;opacity:.6}.app{width:100%;max-width:420px}.card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:32px;box-shadow:0 4px 24px #0006}.device-selects-join,.device-selects-in-room{position:absolute;top:12px;right:12px;margin:0;z-index:2}.device-selects-join .device-selects,.device-selects-in-room .device-selects{margin-bottom:0;gap:6px}.device-selects-join .select--compact,.device-selects-in-room .select--compact{padding:6px 8px 6px 28px;font-size:.8rem;min-height:32px}.device-selects-join .device-select__icon,.device-selects-in-room .device-select__icon{font-size:.75rem;left:6px}.audio-settings-dropdown{position:relative}.audio-settings-dropdown__summary{display:inline-flex;align-items:center;gap:4px;padding:6px 10px;font-size:.8rem;color:var(--text-muted);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;list-style:none;-webkit-user-select:none;user-select:none}.audio-settings-dropdown__summary::-webkit-details-marker,.audio-settings-dropdown__summary::marker{display:none}.audio-settings-dropdown__summary:hover{color:var(--text);border-color:var(--text-muted)}.audio-settings-dropdown[open] .audio-settings-dropdown__summary{border-bottom-left-radius:0;border-bottom-right-radius:0}.audio-settings-dropdown__summary:after{content:"▼";font-size:.6rem;opacity:.7;transition:transform .15s ease}.audio-settings-dropdown[open] .audio-settings-dropdown__summary:after{transform:rotate(-180deg)}.audio-settings-dropdown__content{position:absolute;top:100%;right:0;margin-top:-1px;padding:10px 12px;min-width:220px;background:var(--surface);border:1px solid var(--border);border-radius:0 var(--radius) var(--radius) var(--radius);box-shadow:0 4px 12px #00000040;z-index:10}.audio-settings-dropdown__content .device-selects{flex-direction:column;align-items:stretch;margin-bottom:12px;gap:6px}.audio-settings-dropdown__content .debug-toggles{margin-top:0;padding-top:10px;border-top:1px solid var(--border);align-items:flex-start}.logo{display:block;max-width:180px;height:auto;margin:0 auto 20px}.title{margin:0 0 4px;font-size:1.75rem;font-weight:700;letter-spacing:-.02em;text-align:center}.subtitle{margin:0 0 24px;color:var(--text-muted);font-size:.95rem;text-align:center}.form{display:flex;flex-direction:column;gap:16px;margin-bottom:20px}.label{display:flex;flex-direction:column;gap:6px;font-size:.9rem;font-weight:500;color:var(--text-muted)}.input{padding:12px 14px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);transition:border-color .15s}.input:focus{outline:none;border-color:var(--accent)}select.input{cursor:pointer;-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}.select--compact{padding:4px 8px 4px 26px;font-size:.7rem;min-height:auto;width:38px;max-width:200px;overflow:hidden;text-overflow:ellipsis;color:var(--text);transition:width .2s ease}.select--compact:focus{width:180px;outline:none}.device-selects{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:16px}.device-select{display:inline-flex;align-items:center;gap:0;font-size:0;cursor:pointer;position:relative;user-select:none;-webkit-user-select:none}.device-select__icon{position:absolute;left:6px;top:50%;transform:translateY(-50%);font-size:.85rem;line-height:1;pointer-events:none;z-index:1}.device-select .select--compact{padding-left:26px}.output-select{margin-bottom:16px}.output-select .form{margin-bottom:0}.error{margin:0 0 12px;color:var(--danger);font-size:.9rem}.btn{padding:12px 20px;border-radius:var(--radius-sm);font-size:1rem;font-weight:600;transition:background .15s,transform .1s}.btn:active{transform:scale(.98)}.btn-primary{width:100%;background:var(--accent);color:#0a0a0a}.btn-primary:hover:not(:disabled){background:var(--accent-hover)}.form-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}.form-actions .btn-primary{flex:1;min-width:140px}.btn-secondary{background:var(--bg);border:1px solid var(--border);color:var(--text)}.btn-secondary:hover{border-color:var(--text-muted);background:var(--bg-hover, rgba(255, 255, 255, .04))}.btn-inline{padding:4px 8px;font-size:.85rem;font-weight:500;background:none;border:none;color:var(--text-muted)}.btn-inline:hover{color:var(--accent)}.disconnected-msg{margin:0 0 12px;font-size:.9rem;color:var(--text-muted)}.ptt-disabled{opacity:.7;cursor:not-allowed}.btn-room-action{padding:6px 12px;font-size:.8rem;font-weight:500;background:transparent;border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-muted)}.btn-room-action:hover:not(:disabled){border-color:var(--text-muted);color:var(--text)}.btn-room-action.btn-leave:hover{border-color:var(--danger);color:var(--danger)}.ptt-section{padding:12px 0 0}.ptt{width:100%;padding:36px 28px;background:var(--bg);border:3px solid var(--border);border-radius:var(--radius);color:var(--text);display:flex;flex-direction:column;align-items:center;gap:12px;transition:border-color .15s,background .15s,box-shadow .15s;user-select:none;-webkit-user-select:none;touch-action:none;box-shadow:0 2px 12px #0003}.ptt:hover{border-color:var(--text-muted)}.ptt:active{transform:scale(.98)}.ptt-active{border-color:var(--accent);border-width:3px;background:#22c55e1f;box-shadow:0 0 0 2px var(--accent),0 0 28px var(--accent-glow)}.ptt-icon{font-size:3rem;line-height:1}.ptt-label{font-size:1.25rem;font-weight:700}.ptt-hint{font-size:.85rem;color:var(--text-muted)}.room-actions{display:flex;gap:8px;margin-top:20px;justify-content:center;flex-wrap:wrap}.debug-toggles{margin-top:16px;display:flex;flex-direction:column;gap:6px;align-items:center}.debug-toggle{display:flex;align-items:center;justify-content:center;gap:8px;padding:6px 0;font-size:.75rem;color:var(--text-muted);cursor:pointer;-webkit-user-select:none;user-select:none}.debug-toggle input{width:14px;height:14px;accent-color:var(--accent)}.debug-toggle__label{font-size:.75rem}.participants{margin-bottom:20px;padding:12px 16px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm)}.participants-header{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:8px}.participants-label{display:block;font-size:.85rem;font-weight:600;color:var(--text-muted);margin-bottom:8px}.participants-header .participants-label{margin-bottom:0}.participants-list{margin:0;padding:0;list-style:none}.participant{font-size:.95rem;padding:6px 0;color:var(--text);display:flex;align-items:center;justify-content:space-between;gap:8px}.participant-name{flex:1;min-width:0}.participant.local{color:var(--accent);font-weight:500}.participant.speaking{background:#22c55e1f;margin:0 -8px;padding:6px 8px;border-radius:6px}.participant-speaking{font-size:.8rem;color:var(--accent);font-weight:500;white-space:nowrap}.remote-audio-container{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}@media (max-width: 480px){#root{padding:16px;padding-top:max(16px,env(safe-area-inset-top));padding-bottom:max(16px,env(safe-area-inset-bottom))}.app{min-height:0;display:flex;align-items:center;padding:16px;padding-top:max(16px,env(safe-area-inset-top));padding-bottom:max(16px,env(safe-area-inset-bottom))}.app{min-height:0;display:flex;align-items:center}.card{width:100%;max-width:none;padding:48px 20px 20px}.device-selects-join .device-selects,.device-selects-in-room .device-selects{gap:4px;padding:48px 20px 20px}.device-selects-join .device-selects,.device-selects-in-room .device-selects{gap:4px}.ptt{padding:28px 20px}.ptt-icon{font-size:2.75rem}.ptt-label{font-size:1.1rem}.room-actions{margin-top:16px}}