*{margin:0;padding:0;box-sizing:border-box}:root{--bg-primary: #313338;--bg-secondary: #2b2d31;--bg-tertiary: #1e1f22;--bg-modifier-hover: rgba(79, 84, 92, .16);--bg-modifier-active: rgba(79, 84, 92, .24);--text-primary: #f2f3f5;--text-secondary: #b5bac1;--text-muted: #949ba4;--accent: #5865f2;--accent-hover: #4752c4;--success: #23a55a;--danger: #f23f43;--warning: #f0b232;--border: #3f4147;--channel-active: rgba(79, 84, 92, .32);--scrollbar-thin: #1a1b1e;--scrollbar-auto: #2b2d31}body{font-family:gg sans,Noto Sans,Helvetica Neue,Helvetica,Arial,sans-serif;background:var(--bg-tertiary);color:var(--text-primary);height:100vh;overflow:hidden;-webkit-font-smoothing:antialiased}#root{height:100%}.app{display:flex;height:100%}.sidebar{width:240px;background:var(--bg-secondary);display:flex;flex-direction:column;overflow:hidden}.sidebar-header{padding:12px 16px;height:48px;display:flex;align-items:center;box-shadow:0 1px #0003,0 1.5px #0000000d;font-weight:600}.sidebar-header h1{font-size:1rem;font-weight:600}.channel-list{flex:1;overflow-y:auto;padding:0 8px;margin-top:16px}.channel-section h3{padding:0 8px;margin-bottom:4px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.02em;color:var(--text-muted);cursor:default}.voice-channel{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:4px;cursor:pointer;color:var(--text-muted);transition:background .1s,color .1s;font-size:15px;font-weight:500}.voice-channel:hover{background:var(--bg-modifier-hover);color:var(--text-secondary)}.voice-channel.active{background:var(--bg-modifier-active);color:var(--text-primary)}.voice-channel .channel-icon{flex-shrink:0;color:var(--text-muted)}.voice-channel .user-count{margin-left:auto;font-size:12px;color:var(--text-muted);background:var(--bg-tertiary);padding:0 6px;border-radius:8px;min-width:20px;text-align:center}.participants{margin-left:8px;padding:2px 0 2px 16px;border-left:2px solid var(--border)}.participant{display:flex;align-items:center;gap:8px;padding:4px 8px;border-radius:4px;font-size:13px;color:var(--text-secondary);cursor:default}.participant:hover{background:var(--bg-modifier-hover)}.participant.self{color:var(--text-primary)}.participant-avatar{width:24px;height:24px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:#fff;flex-shrink:0}.participant-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sidebar-footer{display:flex;align-items:center;gap:8px;padding:0 8px;height:52px;background:var(--bg-tertiary);border-top:none}.leave-btn{margin-left:auto;width:32px;height:32px;border-radius:4px;border:none;background:transparent;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .1s,color .1s}.leave-btn:hover{background:#f23f4326;color:var(--danger)}.status-dot{width:8px;height:8px;border-radius:50%;background:var(--danger);flex-shrink:0}.status-dot.connected{background:var(--success)}.user-info{display:flex;flex-direction:column;overflow:hidden}.user-info-name{font-size:13px;font-weight:600;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-info-status{font-size:11px;color:var(--text-muted);line-height:1.2}.main-content{flex:1;display:flex;flex-direction:column;background:var(--bg-primary)}.video-grid{flex:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:8px;padding:16px;overflow-y:auto;align-content:start}.video-grid-empty{flex:1;display:flex;align-items:center;justify-content:center}.empty-state{text-align:center;color:var(--text-muted)}.empty-state svg{margin-bottom:16px}.empty-state p{font-size:16px;font-weight:600;margin-bottom:4px;color:var(--text-secondary)}.empty-state span{font-size:14px}.video-tile{position:relative;background:var(--bg-tertiary);border-radius:8px;overflow:hidden;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;cursor:pointer;border:2px solid transparent;transition:border-color .2s}.video-tile.speaking{border-color:var(--success);box-shadow:0 0 12px #23a55a66}.video-tile:fullscreen{border-radius:0;aspect-ratio:auto}.video-tile .fullscreen-hint{position:absolute;top:8px;right:8px;background:#0009;border-radius:4px;padding:4px;opacity:0;transition:opacity .15s;color:#fff}.video-tile:hover .fullscreen-hint{opacity:1}.video-tile video{width:100%;height:100%;object-fit:cover;border-radius:8px}.video-tile .label{position:absolute;bottom:8px;left:8px;background:#000000bf;padding:4px 8px;border-radius:4px;font-size:12px;font-weight:600;color:#fff}.video-tile .no-video{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.avatar-large{width:80px;height:80px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:600;color:#fff;border:3px solid transparent;transition:border-color .2s,box-shadow .2s}.avatar-large.speaking{border-color:var(--success);box-shadow:0 0 16px #23a55a80}.controls{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;background:var(--bg-secondary)}.controls-divider{width:1px;height:24px;background:var(--border);margin:0 4px}.controls button{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:none;cursor:pointer;transition:background-color .15s,color .15s;background:var(--bg-tertiary);color:var(--text-secondary)}.controls button:hover{background:var(--bg-modifier-hover);color:var(--text-primary)}.controls button.active{background:#23a55a26;color:var(--success)}.controls button.active:hover{background:#23a55a40}.controls button.muted{background:#f23f431a;color:var(--danger)}.controls button.muted:hover{background:#f23f4333}.controls button.danger{background:var(--danger);color:#fff}.controls button.danger:hover{background:#d83c3e}.username-modal{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:var(--bg-tertiary);z-index:100}.modal-content{background:var(--bg-primary);padding:32px;border-radius:8px;text-align:center;width:100%;max-width:400px;box-shadow:0 8px 16px #0000003d}.modal-logo{margin-bottom:16px;color:var(--accent)}.modal-content h2{font-size:24px;font-weight:700;margin-bottom:8px}.modal-subtitle{color:var(--text-muted);font-size:14px;margin-bottom:20px}.modal-error{color:var(--danger);font-size:13px;margin-bottom:12px;padding:8px;background:#f23f431a;border-radius:4px}.modal-content input{width:100%;padding:10px 12px;border-radius:4px;border:none;background:var(--bg-tertiary);color:var(--text-primary);font-size:15px;margin-bottom:16px;outline:none;transition:box-shadow .15s}.modal-content input:focus{box-shadow:0 0 0 2px var(--accent)}.modal-content input:disabled{opacity:.5}.modal-content button{width:100%;padding:10px 16px;border-radius:4px;border:none;background:var(--accent);color:#fff;font-size:15px;font-weight:600;cursor:pointer;transition:background .15s}.modal-content button:hover:not(:disabled){background:var(--accent-hover)}.modal-content button:disabled{opacity:.5;cursor:not-allowed}.lobby{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:var(--bg-tertiary)}.lobby-container{background:var(--bg-primary);padding:32px;border-radius:8px;width:100%;max-width:480px;box-shadow:0 8px 16px #0000003d}.lobby-header{text-align:center;margin-bottom:24px}.lobby-header h1{font-size:24px;font-weight:700;margin-bottom:4px}.lobby-username{color:var(--text-muted);font-size:14px}.lobby-container h2{font-size:16px;font-weight:600;margin-bottom:4px}.lobby-subtitle{color:var(--text-muted);font-size:13px;margin-bottom:16px}.lobby-error{color:var(--danger);font-size:13px;margin-bottom:12px;padding:8px 12px;background:#f23f431a;border-radius:4px}.lobby-rooms{display:flex;flex-direction:column;gap:4px;margin-bottom:16px}.lobby-room{display:flex;align-items:center;gap:12px;padding:12px;border-radius:6px;background:var(--bg-secondary);cursor:pointer;border:2px solid transparent;transition:border-color .15s,background .15s}.lobby-room:hover{background:var(--bg-modifier-hover)}.lobby-room.selected{border-color:var(--accent);background:#5865f214}.lobby-room-icon{width:40px;height:40px;border-radius:50%;background:var(--bg-tertiary);display:flex;align-items:center;justify-content:center;color:var(--text-muted);flex-shrink:0}.lobby-room-info{flex:1;display:flex;flex-direction:column;gap:2px}.lobby-room-name{font-size:15px;font-weight:600}.lobby-room-count{font-size:12px;color:var(--text-muted)}.lobby-room-lock{color:var(--text-muted)}.lobby-join-form{display:flex;gap:8px}.lobby-join-form input{flex:1;padding:10px 12px;border-radius:4px;border:none;background:var(--bg-tertiary);color:var(--text-primary);font-size:14px;outline:none}.lobby-join-form input:focus{box-shadow:0 0 0 2px var(--accent)}.lobby-join-form button{padding:10px 20px;border-radius:4px;border:none;background:var(--accent);color:#fff;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .15s}.lobby-join-form button:hover:not(:disabled){background:var(--accent-hover)}.lobby-join-form button:disabled{opacity:.5;cursor:not-allowed}.lobby-hint{margin-top:16px;text-align:center;font-size:12px;color:var(--text-muted)}.lobby-hint kbd{background:var(--bg-tertiary);border:1px solid var(--border);border-radius:3px;padding:1px 5px;font-size:11px;font-family:inherit}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--scrollbar-thin);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-auto)}