:root{--bg-primary: #0a0a0a;--bg-secondary: #141414;--bg-elevated: #1e1e1e;--text-primary: #e4e4e7;--text-secondary: #a1a1aa;--accent: #3b82f6;--accent-hover: #2563eb;--danger: #ef4444;--danger-hover: #dc2626;--success: #22c55e;--border: #27272a;--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-full: 9999px;--controls-height: 80px;--bp-mobile: 480px;--bp-tablet: 768px;--bp-desktop: 1024px}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;background:var(--bg-primary);color:var(--text-primary);height:100dvh;overflow:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}button{font-family:inherit;cursor:pointer}input,select{font-family:inherit}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);border:none;border-radius:var(--radius-md);font-size:1rem;font-weight:500;padding:.75rem 1.5rem;transition:background .15s,opacity .15s}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover:not(:disabled){background:var(--accent-hover)}.btn-secondary{background:var(--bg-elevated);color:var(--text-primary);border:1px solid var(--border)}.btn-secondary:hover:not(:disabled){background:#2a2a2e}.btn-danger{background:var(--danger);color:#fff}.btn-danger:hover:not(:disabled){background:var(--danger-hover)}.btn-large{padding:1rem 2rem;font-size:1.1rem;border-radius:var(--radius-lg)}.btn-icon{width:48px;height:48px;padding:0;border-radius:var(--radius-full);border:none;display:inline-flex;align-items:center;justify-content:center}.btn-icon svg{width:22px;height:22px}.input{background:var(--bg-elevated);border:1px solid var(--border);color:var(--text-primary);padding:.75rem 1rem;border-radius:var(--radius-md);font-size:1rem;outline:none;transition:border-color .15s}.input:focus{border-color:var(--accent)}.input::placeholder{color:var(--text-secondary)}.input-code{background:var(--bg-elevated);border:1px solid var(--border);color:var(--text-primary);padding:.75rem 1rem;border-radius:var(--radius-md);font-size:1.25rem;font-family:monospace;letter-spacing:.15em;text-align:center;outline:none;width:100%;transition:border-color .15s}.input-code:focus{border-color:var(--accent)}.input-code::placeholder{color:var(--text-secondary);letter-spacing:.15em}.select{background:var(--bg-elevated);border:1px solid var(--border);color:var(--text-primary);padding:.5rem 2rem .5rem .75rem;border-radius:var(--radius-md);font-size:.875rem;outline:none;width:100%;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center}.select:focus{border-color:var(--accent)}.error-banner{background:var(--danger);color:#fff;padding:.75rem 1rem;text-align:center;font-size:.9rem;cursor:pointer;position:fixed;top:0;left:0;right:0;z-index:100;animation:slideDown .2s ease-out}@keyframes slideDown{0%{transform:translateY(-100%)}to{transform:translateY(0)}}.screen{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .2s ease}.screen.active{opacity:1;visibility:visible}.landing{display:grid;place-items:center;min-height:100dvh;padding:var(--space-lg)}.landing-content{display:flex;flex-direction:column;align-items:center;gap:var(--space-lg);width:100%;max-width:400px}.landing-title{font-size:clamp(2.5rem,8vw,4rem);font-weight:300;letter-spacing:.3em;color:var(--text-primary)}.landing-content .btn-primary{width:100%}.landing-divider{display:flex;align-items:center;gap:var(--space-md);width:100%;color:var(--text-secondary);font-size:.875rem}.landing-divider:before,.landing-divider:after{content:"";flex:1;height:1px;background:var(--border)}.landing-join{display:flex;flex-direction:column;gap:var(--space-md);width:100%}.landing-join .btn-secondary{width:100%}.lobby{display:flex;flex-direction:column;height:100dvh}.lobby-header{display:flex;align-items:center;padding:var(--space-md) var(--space-lg);border-bottom:1px solid var(--border);gap:var(--space-md)}.lobby-header .btn-back{background:none;border:none;color:var(--text-secondary);display:flex;align-items:center;gap:var(--space-xs);padding:var(--space-sm);border-radius:var(--radius-md);font-size:.875rem}.lobby-header .btn-back:hover{color:var(--text-primary);background:var(--bg-elevated)}.lobby-header .btn-back svg{width:18px;height:18px}.lobby-brand{font-size:1.1rem;font-weight:300;letter-spacing:.2em;color:var(--text-secondary);margin-left:auto}.lobby-body{flex:1;display:grid;grid-template-columns:1.2fr 1fr;gap:var(--space-xl);padding:var(--space-xl);overflow:auto;min-height:0}.lobby-preview{display:flex;flex-direction:column;gap:var(--space-md)}.lobby-video-wrap{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-secondary);aspect-ratio:16 / 9}.lobby-video-wrap video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.lobby-video-placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:var(--text-secondary);font-size:.9rem}.lobby-devices{display:flex;gap:var(--space-md)}.lobby-devices .select{flex:1}.lobby-info{display:flex;flex-direction:column;gap:var(--space-lg)}.lobby-section-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-secondary);margin-bottom:var(--space-xs)}.lobby-code{font-family:monospace;font-size:1.5rem;letter-spacing:.1em;color:var(--text-primary)}.lobby-copy-btn{background:none;border:1px solid var(--border);color:var(--text-secondary);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);font-size:.8rem;display:inline-flex;align-items:center;gap:var(--space-xs);margin-top:var(--space-sm);cursor:pointer;transition:color .15s,border-color .15s}.lobby-copy-btn:hover{color:var(--text-primary);border-color:var(--text-secondary)}.lobby-copy-btn svg{width:14px;height:14px}.lobby-join-btn{margin-top:auto;width:100%}@media(max-width:768px){.lobby-body{grid-template-columns:1fr;padding:var(--space-md);gap:var(--space-lg)}.lobby-video-wrap{max-height:40vh}}.meeting{display:grid;grid-template-rows:minmax(0,1fr) auto;grid-template-columns:1fr;height:100dvh;padding-bottom:env(safe-area-inset-bottom)}.video-grid{display:grid;gap:8px;padding:8px;min-height:0;overflow:hidden}.video-grid[data-count="1"]{grid-template-columns:1fr;max-width:960px;margin:0 auto;width:100%}.video-grid[data-count="2"]{grid-template-columns:repeat(2,1fr)}.video-grid[data-count="3"],.video-grid[data-count="4"]{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr)}.video-grid[data-count="5"],.video-grid[data-count="6"]{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr)}.video-grid[data-count="7"],.video-grid[data-count="8"]{grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr)}@media(max-width:500px)and (orientation:portrait){.video-grid[data-count="2"]{grid-template-columns:1fr;grid-template-rows:repeat(2,1fr)}}.video-tile{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-secondary);min-width:0;min-height:0}.video-tile video{width:100%;height:100%;object-fit:cover;display:block}.video-tile.local video{transform:scaleX(-1)}.video-tile.video-off video{display:none}.tile-avatar{position:absolute;inset:0;display:none;align-items:center;justify-content:center}.video-tile.video-off .tile-avatar{display:flex}.tile-avatar-circle{width:72px;height:72px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;font-size:1.75rem;font-weight:600;color:#fff;text-transform:uppercase}.tile-name-bar{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;gap:var(--space-xs);padding:var(--space-sm) var(--space-md);background:linear-gradient(transparent,#000000b3);font-size:.8rem;color:#fff}.tile-name-bar svg{width:14px;height:14px;flex-shrink:0}.tile-name-bar .mic-off-icon{color:var(--danger)}.tile-name-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.video-tile.speaking{outline:2px solid var(--accent);outline-offset:-2px}.controls-bar{display:flex;justify-content:center;align-items:center;gap:var(--space-md);height:var(--controls-height);background:var(--bg-secondary);border-top:1px solid var(--border);padding:0 var(--space-lg)}.controls-bar .btn-icon{background:var(--bg-elevated);color:var(--text-primary);transition:background .15s}.controls-bar .btn-icon:hover{background:#2a2a2e}.controls-bar .btn-icon.off{background:var(--danger);color:#fff}.controls-bar .btn-icon.off:hover{background:var(--danger-hover)}.controls-bar .btn-leave{background:var(--danger);color:#fff}.controls-bar .btn-leave:hover{background:var(--danger-hover)}.btn-participants{position:absolute;top:var(--space-md);right:var(--space-md);z-index:10}.participant-panel{position:absolute;top:0;right:0;bottom:var(--controls-height);width:300px;background:var(--bg-secondary);border-left:1px solid var(--border);z-index:20;display:flex;flex-direction:column;transform:translate(100%);transition:transform .2s ease}.participant-panel.open{transform:translate(0)}.panel-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-md) var(--space-lg);border-bottom:1px solid var(--border);font-weight:500}.panel-close{background:none;border:none;color:var(--text-secondary);cursor:pointer;padding:var(--space-xs);display:flex}.panel-close svg{width:18px;height:18px}.panel-close:hover{color:var(--text-primary)}.participant-list{flex:1;overflow-y:auto;padding:var(--space-sm) 0}.participant-item{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-lg);font-size:.9rem}.participant-item svg{width:16px;height:16px;flex-shrink:0;color:var(--text-secondary)}.participant-item .mic-off-icon{color:var(--danger)}.participant-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.meeting-status{position:absolute;bottom:calc(var(--controls-height) + var(--space-sm));left:var(--space-md);font-size:.75rem;font-family:monospace;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 2 * var(--space-md));pointer-events:none}@media(max-width:360px){.btn-share{display:none}.controls-bar .btn-icon{width:42px;height:42px}.controls-bar .btn-icon svg{width:18px;height:18px}}@media(max-width:768px){.participant-panel{width:100%}}