html,body{height:100%}body{font-size:14px}.app{grid-template-rows:52px 1fr;grid-template-columns:220px 1fr 270px;height:100vh;display:grid}.topbar{background:var(--card);border-bottom:4px solid var(--border);z-index:10;grid-column:1/-1;align-items:center;gap:12px;padding:0 18px;display:flex}.sidebar{background:var(--card);border-right:4px solid var(--border);flex-direction:column;display:flex;overflow:hidden}.main{background:var(--background);flex-direction:column;display:flex;overflow:hidden}.right{background:var(--card);border-left:4px solid var(--border);flex-direction:column;display:flex;overflow:hidden}.logo{font-family:var(--font-display);font-size:13px}.logo span{color:var(--primary)}.badge-pill{color:var(--muted-foreground);background:var(--muted);border:1px solid var(--border);border-radius:20px;padding:3px 9px;font-size:11px}.conn-status{color:var(--muted-foreground);align-items:center;gap:6px;margin-left:auto;font-size:12px;display:flex}.dot{background:var(--muted-foreground);border-radius:50%;width:7px;height:7px;transition:background .3s}.dot.connected{background:var(--success);box-shadow:0 0 6px var(--success)}.dot.connecting{background:var(--warning);animation:1s infinite pulse}.dot.error{background:var(--error)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.3}}.section-label{font-family:var(--font-display);color:var(--muted-foreground);letter-spacing:.08em;text-transform:uppercase;padding:14px 14px 6px;font-size:9px}.channel-list{flex:1;overflow-y:auto}.channel{cursor:pointer;align-items:center;gap:9px;margin:1px 6px;padding:7px 14px;transition:background .15s;display:flex}.channel:hover{background:var(--muted)}.channel.active{background:color-mix(in srgb, var(--primary) 18%, transparent)}.channel.active .ch-name{color:var(--primary)}.ch-icon{opacity:.7;font-size:13px}.ch-name{flex:1;font-size:13px;font-weight:500}.ch-count{color:var(--muted-foreground);font-size:11px}.voice-stage{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:24px;padding:28px;display:flex}.stage-title{font-family:var(--font-display);font-size:16px}.stage-sub{color:var(--muted-foreground);text-align:center;max-width:320px;font-size:13px;line-height:1.6}.participants-grid{flex-wrap:wrap;justify-content:center;gap:14px;width:100%;max-width:640px;display:flex}.participant-tile{background:var(--card);border:2px solid var(--border);text-align:center;width:130px;padding:18px 14px;transition:border-color .15s,box-shadow .15s}.participant-tile.speaking{border-color:var(--success);box-shadow:0 0 0 3px color-mix(in srgb, var(--success) 25%, transparent)}.participant-tile.muted-tile{opacity:.5}.avatar{background:var(--muted);border-radius:50%;justify-content:center;align-items:center;width:52px;height:52px;margin:0 auto 10px;font-size:24px;transition:box-shadow .15s;display:flex;position:relative}.speaking .avatar{box-shadow:0 0 0 3px var(--success)}.avatar-ring{opacity:0;border:2px solid #0000;border-radius:50%;transition:border-color .15s,opacity .15s;position:absolute;inset:-4px}.speaking .avatar-ring{border-color:var(--success);opacity:1;animation:1.2s ease-in-out infinite ringPulse}@keyframes ringPulse{0%,to{opacity:.9;transform:scale(1)}50%{opacity:.5;transform:scale(1.08)}}.p-name{white-space:nowrap;text-overflow:ellipsis;font-size:12px;font-weight:600;overflow:hidden}.p-state{color:var(--muted-foreground);margin-top:3px;font-size:10px}.controls{background:var(--card);border-top:4px solid var(--border);justify-content:center;align-items:center;gap:10px;padding:16px;display:flex}.ctrl-btn{border:2px solid var(--border);cursor:pointer;background:var(--muted);width:46px;height:46px;color:var(--foreground);border-radius:50%;justify-content:center;align-items:center;font-size:17px;transition:transform .1s,background .15s;display:flex}.ctrl-btn:hover{transform:scale(1.08)}.ctrl-btn.active{background:var(--primary);color:var(--primary-foreground)}.ctrl-btn.off{background:color-mix(in srgb, var(--error) 20%, transparent);color:var(--error)}.join-btn{border:2px solid var(--border);cursor:pointer;height:46px;font-family:var(--font-display);background:var(--primary);color:var(--primary-foreground);padding:0 24px;font-size:11px;transition:opacity .15s,transform .1s}.join-btn:hover{opacity:.88;transform:scale(1.02)}.join-btn.leave{background:var(--error);color:var(--error-foreground)}.join-btn:disabled{opacity:.35;cursor:not-allowed;transform:none}.tabs{border-bottom:2px solid var(--border);display:flex}.tab{text-align:center;font-family:var(--font-display);color:var(--muted-foreground);cursor:pointer;letter-spacing:.04em;text-transform:uppercase;flex:1;padding:10px;font-size:9px;transition:color .15s}.tab.active{color:var(--primary);border-bottom:2px solid var(--primary)}.panel-section{border-bottom:2px solid var(--border);padding:12px 14px}.panel-section h3{font-family:var(--font-display);color:var(--muted-foreground);letter-spacing:.08em;text-transform:uppercase;margin-bottom:9px;font-size:9px}.stat-row{border-bottom:1px solid color-mix(in srgb, var(--border) 40%, transparent);justify-content:space-between;align-items:center;padding:4px 0;display:flex}.stat-row:last-child{border:none}.stat-label{color:var(--muted-foreground);font-size:11px}.stat-val{font-variant-numeric:tabular-nums;font-size:12px;font-weight:600}.stat-val.good{color:var(--success)}.stat-val.warn{color:var(--warning)}.stat-val.bad{color:var(--error)}.log-area{flex:1;padding:8px 14px;overflow-y:auto}.log-line{color:var(--muted-foreground);border-bottom:1px solid color-mix(in srgb, var(--border) 25%, transparent);padding:2px 0;font-size:11px;line-height:1.5}.log-line.info{color:var(--info)}.log-line.ok{color:var(--success)}.log-line.err{color:var(--error)}.log-line.warn{color:var(--warning)}.diag-row{border-bottom:1px solid color-mix(in srgb, var(--border) 30%, transparent);align-items:center;gap:8px;padding:5px 0;font-size:11px;display:flex}.diag-row:last-child{border:none}.diag-icon{text-align:center;width:18px;font-size:13px}.diag-label{color:var(--muted-foreground);flex:1}.diag-val{font-size:11px;font-weight:600}.diag-val.ok{color:var(--success)}.diag-val.warn{color:var(--warning)}.diag-val.fail{color:var(--error)}.chat-messages{flex-direction:column;flex:1;gap:6px;padding:10px 14px;display:flex;overflow-y:auto}.chat-msg{background:var(--muted);padding:7px 10px;font-size:12px;line-height:1.5}.chat-msg .chat-from{color:var(--primary);margin-bottom:2px;font-size:11px;font-weight:600}.chat-input-row{border-top:2px solid var(--border);gap:6px;padding:8px 10px;display:flex}.chat-input-row input{background:var(--input);border:2px solid var(--border);color:var(--foreground);outline:none;flex:1;padding:7px 10px;font-family:inherit;font-size:12px}.chat-input-row input:focus{border-color:var(--outline)}.chat-input-row button{background:var(--primary);border:2px solid var(--border);color:var(--primary-foreground);cursor:pointer;padding:0 12px;font-size:13px}.overlay{background:color-mix(in srgb, var(--background) 90%, black 10%);z-index:100;backdrop-filter:blur(5px);justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.field{margin-bottom:14px}.field label{font-family:var(--font-display);color:var(--muted-foreground);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;font-size:9px;display:block}.modal-actions{gap:9px;margin-top:22px;display:flex}.code-inputs{justify-content:center;gap:10px;margin:24px 0;display:flex}.code-digit{background:var(--input);border:2px solid var(--border);width:52px;height:64px;color:var(--foreground);text-align:center;caret-color:var(--primary);outline:none;font-family:inherit;font-size:28px;font-weight:700;transition:border-color .15s,box-shadow .15s}.code-digit:focus{border-color:var(--outline);box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent)}.code-digit.filled{border-color:var(--info)}.admin-code-display{background:var(--background);border:2px solid var(--border);text-align:center;margin:16px 0;padding:20px}.admin-code-number{letter-spacing:8px;color:var(--primary);font-variant-numeric:tabular-nums;font-size:38px;font-weight:700}.admin-code-meta{color:var(--muted-foreground);margin-top:8px;font-size:12px}.countdown{color:var(--warning);margin-top:4px;font-size:11px;font-weight:600}.code-list{flex-direction:column;gap:8px;max-height:200px;margin-top:12px;display:flex;overflow-y:auto}.code-item{background:var(--muted);border:2px solid var(--border);justify-content:space-between;align-items:center;padding:8px 12px;display:flex}.code-item-left .code-val{letter-spacing:4px;color:var(--info);font-size:16px;font-weight:700}.code-item-left .code-room{color:var(--muted-foreground);margin-top:2px;font-size:11px}.code-item-left .code-exp{color:var(--warning);font-size:10px}.revoke-btn{border:1px solid color-mix(in srgb, var(--error) 40%, transparent);color:var(--error);cursor:pointer;background:0 0;padding:4px 10px;font-size:11px;transition:background .15s}.revoke-btn:hover{background:color-mix(in srgb, var(--error) 15%, transparent)}.session-banner{background:color-mix(in srgb, var(--success) 10%, transparent);border:1px solid color-mix(in srgb, var(--success) 25%, transparent);color:var(--success);align-items:center;gap:8px;margin-bottom:16px;padding:10px 14px;font-size:12px;display:flex}.empty-stage{opacity:.4;flex-direction:column;align-items:center;gap:10px;display:flex}.empty-icon{font-size:44px}::-webkit-scrollbar{width:3px}::-webkit-scrollbar-thumb{background:var(--border)}@media (width<=720px){.app{grid-template-rows:52px 90px 1fr auto;grid-template-columns:1fr}.sidebar{border-right:none;border-bottom:4px solid var(--border);flex-direction:row;grid-row:2;max-height:90px}.right{display:none}.channel-list{flex-direction:row;display:flex;overflow-x:auto}.section-label{display:none}}