*{box-sizing:border-box}html,body{margin:0;width:100%;max-width:100%;height:100%;overflow:hidden}:root{--bg: #0f1115;--panel-bg: #171a21;--panel-border: #262b35;--topbar-bg: #131620;--input-bg: #0f1115;--input-border: #2a303a;--hover-border: #3a4150;--text: #e6e8ec;--muted: #9aa0a8;--accent: #5b6bff;--accent-soft: rgba(91, 107, 255, .12);--danger: #c0392b;--danger-hover: #d44839;--success: #6ee7a0}.theme-midnight{--bg: #0b0e1a;--panel-bg: #12162b;--panel-border: #232a4d;--topbar-bg: #0d1122;--input-bg: #0a0d1c;--input-border: #232a4d;--hover-border: #2f3a66;--accent: #7c8cff;--accent-soft: rgba(124, 140, 255, .15);--muted: #8b93ad}.theme-forest{--bg: #0c1511;--panel-bg: #12201a;--panel-border: #24382c;--topbar-bg: #0d1713;--input-bg: #0a1310;--input-border: #24382c;--hover-border: #34523f;--accent: #4ade80;--accent-soft: rgba(74, 222, 128, .14);--muted: #8aa394}.theme-sunset{--bg: #1a120e;--panel-bg: #251a14;--panel-border: #3b2a20;--topbar-bg: #1c1410;--input-bg: #170f0b;--input-border: #3b2a20;--hover-border: #55382a;--accent: #f59e0b;--accent-soft: rgba(245, 158, 11, .14);--muted: #a89a8c}body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,PingFang SC,sans-serif}.about-page{height:100vh;height:100dvh;width:100vw;background:var(--bg);color:var(--text);position:relative;overflow-y:auto;display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s}.about-back-btn{position:absolute;top:16px;left:16px;display:flex;align-items:center;gap:6px;background:none;border:1px solid var(--input-border);color:var(--muted);padding:6px 12px;border-radius:8px;cursor:pointer;font-size:.9rem;font-family:inherit;transition:color .15s,border-color .15s}.about-back-btn:hover{color:var(--text);border-color:var(--hover-border)}.about-content{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100%;padding:80px 40px 40px;max-width:640px;margin:0 auto;text-align:center}.about-title{font-size:2.5rem;font-weight:500;margin:0 0 6px;letter-spacing:4px;font-family:Palatino,Palatino Linotype,Georgia,Times New Roman,serif}.about-subtitle{display:none}.about-body{font-size:1.05rem;line-height:1.9;color:var(--muted);text-align:justify;font-family:Palatino,Palatino Linotype,Garamond,Georgia,Times New Roman,serif}.about-body p{margin:0 0 16px}.about-body p:last-child{margin-bottom:0}.brand{display:inline-flex;align-items:center;font-size:1rem;font-weight:700;letter-spacing:.02em;flex-shrink:0;text-decoration:none;color:inherit}.brand:hover{color:var(--muted)}.about-brand-link{display:flex;flex-direction:column;align-items:center;text-decoration:none;color:inherit}.about-icon{width:210px;height:210px;margin-bottom:20px;object-fit:contain}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(1200px 600px at 50% -10%,var(--panel-bg) 0%,var(--bg) 60%)}.card{width:min(340px,calc(100vw - 32px));background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:12px;padding:32px;box-shadow:0 16px 48px #0006}.card h2{font-size:1.1rem;font-weight:600;margin:24px 0 4px}.room-name{margin:4px 0 0;font-weight:600}.card form{display:flex;flex-direction:column;gap:14px;margin-top:20px}.card label{display:flex;flex-direction:column;gap:6px;font-size:.85rem;color:var(--muted)}.card input{background:var(--input-bg);border:1px solid var(--input-border);border-radius:8px;color:var(--text);padding:10px 12px;font-size:.95rem}.card input:focus{outline:none;border-color:var(--accent)}.card button{background:var(--accent);border:none;border-radius:8px;color:#fff;padding:11px;font-size:.95rem;cursor:pointer}.card button:hover:not(:disabled){filter:brightness(1.1)}.card button:disabled{opacity:.6;cursor:default}.error{margin:0;color:#ff6b6b;font-size:.85rem}.shell{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;height:56px;padding:0 20px;background:var(--topbar-bg);border-bottom:1px solid var(--panel-border);flex-shrink:0}.topbar-left{display:flex;align-items:center;gap:12px;min-width:0;flex-wrap:wrap}.topbar-info{font-size:.9rem;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}.topbar-right{display:flex;align-items:center;gap:10px;flex-shrink:0}.topbar-tag{font-size:.78rem;color:var(--muted);border:1px solid var(--input-border);border-radius:999px;padding:3px 10px;max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.settings-btn,.logout-btn{background:none;border:1px solid var(--input-border);border-radius:999px;color:var(--muted);padding:6px 14px;font-size:.85rem;cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}.logout-btn:hover:not(:disabled){color:#ff6b6b;border-color:#ff6b6b80}.settings-btn:hover:not(:disabled){color:var(--text);border-color:var(--hover-border)}.logout-btn:disabled,.settings-btn:disabled{opacity:.6;cursor:default}.user-badge{display:inline-flex;align-items:center;background:var(--panel-bg);border:1px solid var(--input-border);border-radius:999px;padding:6px 14px;font-size:.85rem;max-width:160px;overflow:hidden;white-space:nowrap}.badge-name{overflow:hidden;text-overflow:ellipsis}.shell-body{flex:1 1 auto;min-height:0;display:flex;justify-content:center}.shell-body>*{width:100%}.shell-body>.panel{max-width:760px;align-self:flex-start;margin:24px;overflow-y:auto}.panel{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:12px;padding:28px 32px;box-shadow:0 16px 48px #00000059}.panel-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px}.panel-header h2{margin:0;font-size:1.15rem;font-weight:600}.panel-sub{margin:4px 0 20px;color:var(--muted);font-size:.85rem}.status-chip{font-size:.75rem;font-weight:600;border-radius:999px;padding:4px 12px;letter-spacing:.04em;white-space:nowrap}.status-chip.on{color:var(--success);background:#6ee7a01f;border:1px solid rgba(110,231,160,.4)}.status-chip.off{color:var(--muted);background:#9aa0a81a;border:1px solid rgba(154,160,168,.3)}.room-form{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}.room-form .field-full{grid-column:1 / -1}.room-form label{display:flex;flex-direction:column;gap:6px;font-size:.85rem;color:var(--muted)}.room-form input,.room-form select{background:var(--input-bg);border:1px solid var(--input-border);border-radius:8px;color:var(--text);padding:10px 12px;font-size:.95rem}.room-form select{cursor:pointer}.room-form input:focus,.room-form select:focus{outline:none;border-color:var(--accent)}.room-form button{grid-column:1 / -1;margin-top:6px;background:var(--accent);border:none;border-radius:8px;color:#fff;padding:12px;font-size:.95rem;font-weight:600;cursor:pointer}.room-form button:hover:not(:disabled){filter:brightness(1.1)}.room-form button:disabled{opacity:.6;cursor:default}.monitor{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:24px}.room-title-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:29px;margin-bottom:12px;flex-shrink:0}.room-title{margin:0;font-size:1.3rem;font-weight:600;word-break:break-word;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.room-meta{font-size:.9rem;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap;flex-shrink:0}.countdown{margin:8px 0 0;font-size:3rem;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.04em}.countdown-expired{font-size:1.3rem;color:var(--muted)}.invite-row{display:flex;gap:8px;width:100%;margin-top:16px}.invite-row input{flex:1;min-width:0;background:var(--input-bg);border:1px solid var(--input-border);border-radius:8px;color:var(--muted);padding:10px 12px;font-size:.8rem}.invite-row input:focus{outline:none;border-color:var(--accent)}.invite-row button{flex-shrink:0;background:var(--input-border);border:none;border-radius:8px;color:var(--text);padding:10px 16px;font-size:.85rem;cursor:pointer}.invite-row button:hover:not(:disabled){filter:brightness(1.15)}.danger-btn{width:100%;margin-top:8px;background:var(--danger);border:none;border-radius:8px;color:#fff;padding:12px;font-size:.95rem;font-weight:600;cursor:pointer}.danger-btn:hover:not(:disabled){background:var(--danger-hover)}.danger-btn:disabled{opacity:.6;cursor:default}.avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;color:#fff;font-weight:600;flex-shrink:0;-webkit-user-select:none;user-select:none}.room-layout{display:flex;gap:0;align-items:stretch;flex:1 1 auto;min-width:0;min-height:0}.room-layout>.panel{align-self:stretch;border-radius:0;box-shadow:none}.room-main{flex:1 1 0;min-width:0;display:flex;flex-direction:column;padding:20px 24px;border-right:none}.chat-panel{flex:2.5 1 0;min-width:0;display:flex;flex-direction:column;padding:20px 24px;border-left:none}.user-list{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;border:1px solid var(--panel-border);border-radius:10px;margin:8px 0}.user-row{display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid var(--panel-border);flex-shrink:0}.user-row:last-child{border-bottom:none}.user-row.me{background:var(--accent-soft)}.row-name{flex:1;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.row-main{flex:1;min-width:0;display:flex;flex-direction:column}.row-sub{font-size:.72rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.me-tag{margin-left:10px;font-size:.85rem;color:var(--accent);flex-shrink:0}.mic-icon{font-size:.85rem;display:inline-flex;align-items:center;flex-shrink:0}.status-icon{font-size:.85rem;color:var(--muted);display:inline-flex;align-items:center;flex-shrink:0}.status-icon svg{font-size:.9rem}.latency{font-size:.75rem;font-variant-numeric:tabular-nums;flex-shrink:0;min-width:44px;text-align:right}.latency.good{color:#6ee7a0}.latency.mid{color:#fbbf24}.latency.bad{color:#ff6b6b}.bars{display:inline-flex;align-items:flex-end;gap:3px;height:16px;flex-shrink:0}.bars i{width:4px;border-radius:2px;background:var(--success);box-shadow:0 0 6px #6ee7a0b3;animation:bar .45s ease-in-out infinite alternate}.bars i:nth-child(2){animation-delay:.12s}.bars i:nth-child(3){animation-delay:.24s}@keyframes bar{0%{height:5px}to{height:16px}}.list-empty{padding:24px 16px;text-align:center}.room-controls{display:flex;flex-direction:column;align-items:center;gap:10px;padding-top:10px;flex-shrink:0}.audio-controls{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.audio-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:14px;padding:9px 16px;font-size:.9rem;cursor:pointer;background:var(--input-border);color:var(--text);transition:filter .15s}.audio-btn svg{font-size:1rem}.audio-btn.on{background:#6ee7a038;color:var(--success)}.audio-btn.off{color:var(--text)}.audio-btn:hover:not(:disabled){filter:brightness(1.2)}.audio-btn:disabled{opacity:.6;cursor:default}.chat-switch-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;background:var(--accent);border:none;border-radius:14px;color:#fff;padding:14px;font-size:1rem;font-weight:600;cursor:pointer;transition:filter .15s}.chat-switch-btn:hover{filter:brightness(1.1)}.room-ended{margin:auto;color:var(--muted);font-size:1.2rem}.remote-audio{position:fixed;width:1px;height:1px;opacity:0;pointer-events:none}.reconnect-banner{position:fixed;top:56px;left:0;right:0;text-align:center;background:#f59e0b26;color:#fbbf24;font-size:.85rem;padding:6px;z-index:40}.chat-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px;min-height:0}.chat-title{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.95rem}.conn-dot{width:8px;height:8px;border-radius:50%}.conn-dot.on{background:var(--success);box-shadow:0 0 6px #6ee7a0b3}.conn-dot.off{background:var(--muted)}.icon-btn{background:none;border:1px solid var(--input-border);border-radius:6px;color:var(--muted);padding:4px 10px;font-size:.8rem;cursor:pointer;display:inline-flex;align-items:center;gap:6px}.icon-btn:hover{color:var(--text);border-color:var(--hover-border)}.chat-msgs{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:10px;border:1px solid var(--panel-border);border-radius:10px;padding:10px;margin:8px 0}.chat-msg{display:flex;gap:8px;align-items:flex-start}.chat-msg.own{flex-direction:row-reverse}.chat-bubble{background:var(--input-bg);border:1px solid var(--input-border);border-radius:10px;padding:7px 11px;max-width:60%}.chat-msg.own .chat-bubble{background:var(--accent-soft);border-color:var(--accent)}.chat-name{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:.72rem;color:var(--muted);margin-bottom:2px}.chat-text{font-size:.9rem;word-break:break-word;white-space:pre-wrap}.chat-empty{text-align:center;padding:24px 0}.chat-input{display:flex;gap:8px;margin-top:10px}.chat-input input{flex:1;min-width:0;background:var(--input-bg);border:1px solid var(--input-border);border-radius:8px;color:var(--text);padding:9px 12px;font-size:.9rem}.chat-input input:focus{outline:none;border-color:var(--accent)}.chat-input input:disabled{opacity:.6}.chat-input button{flex-shrink:0;background:var(--accent);border:none;border-radius:8px;color:#fff;padding:9px 14px;font-size:.85rem;cursor:pointer}.chat-input button:disabled{opacity:.6;cursor:default}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000008c;display:flex;align-items:center;justify-content:center;z-index:50}.modal{width:340px;max-width:calc(100vw - 32px);padding:24px}.modal h3{margin:0 0 16px;font-size:1rem}.modal label{display:flex;flex-direction:column;gap:6px;font-size:.85rem;color:var(--muted);margin-bottom:14px}.modal select{background:var(--input-bg);border:1px solid var(--input-border);border-radius:8px;color:var(--text);padding:9px 12px;font-size:.9rem;cursor:pointer}.modal select:focus{outline:none;border-color:var(--accent)}.meter-row{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}.meter-row-label{display:flex;justify-content:space-between;font-size:.85rem;color:var(--muted)}.meter{width:100%;height:8px;background:var(--input-bg);border:1px solid var(--input-border);border-radius:4px;overflow:hidden}.meter-fill{height:100%;background:var(--accent);transition:width 80ms linear}.settings-actions{display:flex;gap:8px;margin-top:4px}.settings-actions button{flex:1;background:var(--input-border);border:none;border-radius:8px;color:var(--text);padding:9px;font-size:.85rem;cursor:pointer}.settings-actions button:hover:not(:disabled){filter:brightness(1.15)}.settings-modal{display:flex;flex-direction:column}.settings-modal .setting-btn{width:100%;background:var(--input-border);border:none;border-radius:10px;color:var(--text);padding:10px;font-size:.9rem;cursor:pointer;margin-bottom:14px}.settings-modal .setting-btn:hover:not(:disabled){filter:brightness(1.15)}.settings-modal .setting-btn:disabled{opacity:.6;cursor:default}.settings-modal .setting-btn.primary{background:var(--accent);color:#fff;font-weight:600;margin-bottom:0}@media (max-width: 1024px){.shell-body>.panel{margin:12px;width:auto}.room-layout{flex-direction:column;width:100%}.room-main{flex:1 1 0;min-height:0;border-bottom:1px solid var(--panel-border);padding:14px 4vw}.chat-panel{display:none;flex:1 1 0;min-height:0;width:100%;padding:12px;border-top:none}.room-layout.show-chat .room-main{display:none}.room-layout.show-chat .chat-panel{display:flex;position:fixed;top:0;left:0;right:0;z-index:25;width:auto;padding-bottom:calc(8px + env(safe-area-inset-bottom))}.topbar{height:auto;min-height:64px;padding:2.4vw 3vw;gap:8px}.topbar-left{gap:8px}.topbar-info,.brand{font-size:4.5vw}.brand-dot{width:8px;height:8px}.status-chip{font-size:3.4vw;padding:1.4vw 3vw}.settings-btn,.logout-btn{padding:1.6vw 3.2vw;font-size:3.8vw}.user-badge{padding:1.6vw 3.2vw;font-size:3.8vw;max-width:38vw}.room-title{font-size:5.5vw}.room-meta{font-size:4vw}.room-title-row{margin-bottom:8px}.user-list{border-radius:8px;margin:6px 0}.user-row{gap:3vw;padding:2.6vw 3.4vw}.row-name{font-size:5.5vw}.me-tag{font-size:4.8vw;margin-left:2.5vw}.mic-icon,.status-icon{font-size:4.5vw}.status-icon svg{font-size:4.8vw}.latency{font-size:3.6vw;min-width:12vw}.bars{height:6vw;gap:.8vw}.bars i{width:1.4vw;border-radius:.5vw;box-shadow:0 0 2vw #6ee7a0b3;animation:bar-m .45s ease-in-out infinite alternate}@keyframes bar-m{0%{height:2vw}to{height:6vw}}.list-empty{padding:5vw 3vw;font-size:4.2vw}.room-controls{gap:8px;padding-top:8px}.audio-controls{gap:4vw;width:100%}.room-controls{gap:3vw;padding-top:3vw}.audio-btn{flex:1;justify-content:center;padding:2.4vw 3vw;font-size:3.9vw;gap:2vw;border-radius:3vw}.audio-btn svg{font-size:4.5vw}.chat-switch-btn{gap:2.5vw;padding:3vw;font-size:4.5vw;border-radius:3vw}.chat-title{font-size:4.5vw}.chat-header{min-height:8vw;margin-bottom:2vw}.icon-btn{padding:1.6vw 3vw;font-size:3.8vw;gap:1.5vw}.chat-msg{gap:2vw}.chat-bubble{max-width:78%;padding:2vw 3vw;border-radius:4.5vw}.chat-name{font-size:3.2vw;gap:3vw}.chat-text{font-size:4.5vw}.chat-empty{padding:6vw 0;font-size:4.2vw}.chat-input{gap:2vw;margin-top:8px}.chat-input input{padding:2.8vw 3vw;font-size:4.5vw}.chat-input button{padding:2.8vw 4vw;font-size:4vw}.reconnect-banner{top:56px;font-size:3.6vw;padding:1.5vw}.modal{width:100%}.settings-modal h3{font-size:5vw;margin-bottom:4vw}.settings-modal label{font-size:4vw;margin-bottom:3vw}.settings-modal select{font-size:4vw;padding:3vw}.settings-modal .setting-btn{font-size:4vw;padding:3vw;margin-bottom:3vw;border-radius:3vw}.settings-modal .meter-row-label{font-size:3.5vw}.settings-modal .meter{height:2.5vw}.settings-modal .error{font-size:3.5vw;margin-bottom:3vw}.room-ended{font-size:5.5vw}.card{width:88vw;padding:8vw 6vw;border-radius:4vw}.card .brand{font-size:4.5vw}.card h2{font-size:6vw;margin:5vw 0 1vw}.card .room-name{font-size:4.5vw}.card .muted{font-size:3.8vw}.card form{gap:4vw;margin-top:5vw}.card label{font-size:3.8vw;gap:1.5vw}.card input,.card button{font-size:4.5vw;padding:3vw;border-radius:3vw}.card .error{font-size:3.6vw}.about-content{padding:18vw 7vw 10vw}.about-icon{width:54vw;height:54vw;margin-bottom:5vw}.about-title{font-size:9vw;letter-spacing:2vw;margin-bottom:2vw}.about-body{font-size:4.4vw;line-height:1.9;text-align:left}.about-back-btn{position:fixed;top:calc(2vw + env(safe-area-inset-top));left:2vw;z-index:10;font-size:3.8vw;padding:2vw 4vw;border-radius:3vw;background:var(--panel-bg)}}