:root{--font-mono:"SF Mono", Menlo, Monaco, Consolas, "Fira Code", monospace;--bg-main:#09090b;--bg-card:#18181b;--bg-card-hover:#27272a;--border-color:#27272a;--border-color-glow:#3f3f46;--text-primary:#f4f4f5;--text-secondary:#a1a1aa;--text-muted:#71717a;--accent-primary:#fff;--accent-secondary:#e4e4e7;--danger-color:#ef4444;--shadow-lg:0 4px 20px #00000080}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-main);color:var(--text-primary);font-family:var(--font-mono);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;overflow-x:hidden}#root{flex-direction:column;min-height:100vh;display:flex}input,button,select,textarea{font-family:inherit}.app-container{background-color:var(--bg-main);flex-direction:column;min-height:100vh;display:flex}.app-header{border-bottom:1px solid var(--border-color);background:var(--bg-main);z-index:10;justify-content:space-between;align-items:center;padding:1.5rem 2rem;display:flex}.logo-section{align-items:center;gap:.5rem;display:flex}.logo-symbol{background:var(--text-primary);width:1.75rem;height:1.75rem;color:var(--bg-main);border-radius:2px;justify-content:center;align-items:center;font-size:1rem;font-weight:700;display:flex}.app-header h1{color:var(--text-primary);letter-spacing:-.04em;align-items:center;gap:.5rem;margin:0;font-size:1.15rem;font-weight:700;display:flex}.app-header h1 span{color:var(--text-secondary);border:1px solid var(--border-color);padding:1px 4px;font-size:.75rem;font-weight:400}.connection-status{color:var(--text-secondary);background:var(--bg-card);border:1px solid var(--border-color);border-radius:0;align-items:center;gap:.5rem;padding:.25rem .75rem;font-size:.8rem;display:flex}.status-dot{background-color:#4ade80;border-radius:50%;width:6px;height:6px}.status-dot.pulsing{animation:2s infinite pulse}@keyframes pulse{0%{opacity:.4}50%{opacity:1}to{opacity:.4}}.app-content{flex-direction:column;flex:1;width:100%;max-width:1200px;margin:0 auto;padding:2rem;display:flex}.error-banner{color:#fca5a5;background:#ef44441a;border:1px solid #ef44444d;align-items:center;gap:.75rem;margin-bottom:1.5rem;padding:.75rem 1.25rem;font-size:.85rem;display:flex}.error-icon{fill:currentColor;flex-shrink:0;width:1.25rem;height:1.25rem}.error-close{color:#fff;cursor:pointer;background:#27272a;border:1px solid #3f3f46;margin-left:auto;padding:.2rem .5rem;font-size:.75rem}.error-close:hover{background:#3f3f46}.lobby-container{flex:1;justify-content:center;align-items:center;display:flex}.lobby-card{background:var(--bg-card);border:1px solid var(--border-color);width:900px;max-width:100%;box-shadow:var(--shadow-lg);border-radius:4px;grid-template-columns:1.2fr 1fr;display:grid;overflow:hidden}@media (width<=768px){.lobby-card{grid-template-columns:1fr}}.lobby-preview-wrapper{border-right:1px solid var(--border-color);background:#09090b;justify-content:center;align-items:center;min-height:400px;display:flex;position:relative}@media (width<=768px){.lobby-preview-wrapper{border-right:none;border-bottom:1px solid var(--border-color);min-height:250px}}.lobby-preview{object-fit:cover;width:100%;height:100%}.lobby-preview-off{color:var(--text-muted);flex-direction:column;align-items:center;gap:.75rem;font-size:.85rem;display:flex}.preview-avatar{border:1px solid var(--border-color);width:4rem;height:4rem;color:var(--text-primary);background:#27272a;border-radius:50%;justify-content:center;align-items:center;font-size:1.75rem;font-weight:700;display:flex}.lobby-preview-controls{gap:.75rem;display:flex;position:absolute;bottom:1rem}.preview-control-btn{border:1px solid var(--border-color);color:#fff;cursor:pointer;background:#09090b;border-radius:4px;justify-content:center;align-items:center;width:2.75rem;height:2.75rem;font-size:1.1rem;transition:border-color .2s,background-color .2s;display:flex}.preview-control-btn:hover{border-color:#3f3f46}.preview-control-btn.active{background:var(--bg-card);color:var(--text-primary)}.preview-control-btn.inactive{border-color:var(--danger-color);color:var(--danger-color)}.lobby-form{flex-direction:column;justify-content:center;padding:2.5rem 2rem;display:flex}.lobby-form h2{color:var(--text-primary);margin-bottom:.35rem;font-size:1.35rem;font-weight:700}.lobby-subtitle{color:var(--text-secondary);margin-bottom:2rem;font-size:.8rem}.form-group{flex-direction:column;gap:.35rem;margin-bottom:1.25rem;display:flex}.form-group label{color:var(--text-secondary);font-size:.75rem;font-weight:600}.form-group input{background:var(--bg-main);border:1px solid var(--border-color);color:#fff;border-radius:2px;padding:.6rem .85rem;font-size:.85rem}.form-group input:focus{border-color:#3f3f46;outline:none}.btn-join{background:var(--text-primary);color:var(--bg-main);cursor:pointer;border:none;border-radius:2px;margin-top:1rem;padding:.75rem;font-size:.85rem;font-weight:700;transition:background .2s}.btn-join:hover{background:var(--text-secondary)}.btn-join:disabled{opacity:.5;cursor:not-allowed}.meeting-container{flex-direction:column;flex:1;gap:1.5rem;display:flex}.meeting-grid{flex:1;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1rem;min-height:400px;display:grid}.stream-card{border:1px solid var(--border-color);aspect-ratio:16/9;background:#09090b;border-radius:4px;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.video-player{object-fit:cover;width:100%;height:100%}.camera-off-placeholder{background:var(--bg-card);justify-content:center;align-items:center;width:100%;height:100%;display:flex}.avatar-circle{border:1px solid var(--border-color);width:3.5rem;height:3.5rem;color:var(--text-primary);background:#27272a;border-radius:50%;justify-content:center;align-items:center;font-size:1.5rem;font-weight:700;display:flex}.card-overlay{bottom:0;border-top:1px solid var(--border-color);pointer-events:none;background:#09090bd9;justify-content:space-between;align-items:center;padding:.5rem .75rem;display:flex;position:absolute;inset-inline:0}.participant-name{color:var(--text-primary);align-items:center;gap:.35rem;font-size:.8rem;display:flex}.mic-muted-badge{font-size:.75rem}.participant-role{background:var(--bg-main);color:var(--text-secondary);border:1px solid #3f3f46;padding:1px 4px;font-size:.65rem}.local-card{border-color:#3f3f46}.waiting-placeholder{background:var(--bg-card);border:1px dashed var(--border-color);text-align:center;border-radius:4px;flex-direction:column;grid-column:1/-1;justify-content:center;align-items:center;gap:.75rem;padding:2.5rem;display:flex}.pulsing-radar{border:1px solid var(--text-muted);background:0 0;border-radius:50%;width:2rem;height:2rem;margin-bottom:.5rem;animation:1.5s infinite radarPulse;position:relative}@keyframes radarPulse{0%{opacity:.2;transform:scale(.9)}50%{opacity:1;transform:scale(1.1)}to{opacity:.2;transform:scale(.9)}}.waiting-placeholder h3{font-size:1.05rem;font-weight:700}.waiting-placeholder p{color:var(--text-muted);font-size:.8rem}.controls-bar{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#18181bbf;border:1px solid #3f3f4666;border-radius:9999px;justify-content:center;align-items:center;gap:.75rem;width:fit-content;max-width:max-content;margin:0 auto;padding:.65rem 1.5rem;transition:all .3s cubic-bezier(.16,1,.3,1);display:flex;box-shadow:0 10px 25px -5px #00000080,0 8px 10px -6px #00000080}.control-btn{color:#fff;cursor:pointer;white-space:nowrap;background:#27272a;border:1px solid #3f3f46;border-radius:9999px;justify-content:center;align-items:center;gap:.5rem;padding:.5rem 1.25rem;font-size:.8rem;font-weight:700;transition:all .2s cubic-bezier(.16,1,.3,1);display:inline-flex}.control-btn:hover{background:#3f3f46;border-color:#52525b;transform:translateY(-1px)}.control-btn:active{transform:translateY(0)}.control-btn.active{color:#fff;background:#27272a;border-color:#3f3f46}.control-btn.inactive{color:#fca5a5;background:#ef44441f;border-color:#ef444466}.control-btn.inactive:hover{background:#ef444438;border-color:#ef444499}.btn-icon{justify-content:center;align-items:center;display:inline-flex}.btn-icon svg{display:block}.btn-label{font-size:.75rem;font-weight:700}.control-btn.leave-btn{background:var(--danger-color);border-color:var(--danger-color);color:#fff}.control-btn.leave-btn:hover{background:#dc2626;border-color:#dc2626;box-shadow:0 0 12px #ef444466}.app-dialog{background-color:var(--bg-card);border:1px solid var(--border-color-glow);color:var(--text-primary);border-radius:6px;outline:none;width:90%;max-width:440px;margin:0;padding:1.75rem;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 20px 25px -5px #000000b3,0 10px 10px -5px #000000b3}.app-dialog::backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:#09090bcc;animation:.2s ease-out forwards backdropFadeIn}.app-dialog[open]{animation:.25s cubic-bezier(.16,1,.3,1) forwards dialogFadeIn}@keyframes dialogFadeIn{0%{opacity:0;transform:translate(-50%,-48%)scale(.96)}to{opacity:1;transform:translate(-50%,-50%)scale(1)}}@keyframes backdropFadeIn{0%{opacity:0}to{opacity:1}}.dialog-content{flex-direction:column;gap:1.25rem;display:flex}.dialog-title{color:var(--text-primary);letter-spacing:-.02em;align-items:center;gap:.5rem;margin:0;font-size:1.1rem;font-weight:700;display:flex}.dialog-message{color:var(--text-secondary);margin:0;font-size:.85rem;line-height:1.5}.dialog-actions{justify-content:flex-end;gap:.75rem;margin-top:.5rem;display:flex}.dialog-btn{cursor:pointer;border:1px solid #0000;border-radius:4px;justify-content:center;align-items:center;padding:.5rem 1.25rem;font-size:.8rem;font-weight:700;transition:all .2s;display:inline-flex}.dialog-btn:focus-visible{outline:2px solid var(--text-primary);outline-offset:2px}.dialog-btn-cancel{border-color:var(--border-color);color:var(--text-secondary);background-color:#0000}.dialog-btn-cancel:hover{background-color:var(--border-color);color:var(--text-primary);border-color:var(--border-color-glow)}.dialog-btn-primary{background-color:var(--accent-primary);border-color:var(--accent-primary);color:var(--bg-main)}.dialog-btn-primary:hover{background-color:var(--accent-secondary);border-color:var(--accent-secondary)}.dialog-btn-danger{background-color:var(--danger-color);border-color:var(--danger-color);color:#fff}.dialog-btn-danger:hover{background-color:#dc2626;border-color:#dc2626}.app-container.in-meeting{height:100vh;overflow:hidden}.app-container.in-meeting .app-content{height:calc(100vh - 74px);padding:1rem 2rem 2rem;overflow:hidden}.app-container.in-meeting .meeting-container{flex-direction:column;justify-content:space-between;gap:1rem;height:100%;display:flex}.app-container.in-meeting .meeting-grid{flex:1;place-content:center;align-items:center;gap:1rem;min-height:0;display:grid;overflow-y:auto}.app-container.in-meeting .stream-card{aspect-ratio:16/9;width:100%;max-width:100%;max-height:100%;margin:0 auto}.meeting-grid.cols-1{grid-template-columns:1fr;width:100%;max-width:800px;margin:0 auto}.meeting-grid.cols-2,.meeting-grid.cols-3{grid-template-columns:repeat(2,1fr);width:100%;max-width:1000px;margin:0 auto}.meeting-grid.cols-4{grid-template-columns:repeat(3,1fr);width:100%}.meeting-grid.cols-auto{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));width:100%}@media (width<=600px){.app-header{padding:.75rem 1rem}.app-header h1{font-size:1rem}.app-header h1 span{display:none}.connection-status{padding:.2rem .5rem;font-size:.7rem}.connection-text{display:none}.app-container.in-meeting .app-content{padding:.5rem 1rem 1rem}.meeting-grid.cols-2{grid-template-columns:1fr;max-width:100%}.meeting-grid.cols-3{grid-template-columns:repeat(2,1fr);max-width:100%}.meeting-grid.cols-4{grid-template-columns:repeat(2,1fr)}.meeting-grid.cols-auto{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}.meeting-grid.cols-3 .stream-card,.meeting-grid.cols-4 .stream-card,.meeting-grid.cols-auto .stream-card{aspect-ratio:4/3!important}.meeting-grid.cols-3>.stream-card:last-child:nth-child(odd),.meeting-grid.cols-4>.stream-card:last-child:nth-child(odd),.meeting-grid.cols-auto>.stream-card:last-child:nth-child(odd){grid-column:1/span 2;max-width:80%!important;margin:0 auto!important}.controls-bar{gap:.5rem;width:auto;max-width:100%;padding:.75rem}.control-btn{padding:.5rem .75rem}.control-btn .btn-label{display:none}.control-btn .btn-icon{margin:0}.control-btn .btn-icon svg{width:20px;height:20px}}.meeting-main-content{flex-direction:column;flex:1;gap:1rem;min-height:0;display:flex}.meeting-main-content.with-screen-share{flex-direction:row}.main-screen-share-area{border:1px solid var(--border-color);background:#09090b;border-radius:6px;flex:4;justify-content:center;align-items:center;min-height:0;display:flex;position:relative;overflow:hidden}.screen-share-wrapper{width:100%;height:100%;position:relative}.screen-share-video{object-fit:contain!important;width:100%!important;height:100%!important}.screen-share-label{color:#fff;pointer-events:none;z-index:5;background:#000000b3;border-radius:4px;padding:4px 8px;font-size:.8rem;position:absolute;bottom:12px;left:12px}.side-camera-strip{flex-shrink:0;gap:1rem;height:120px;padding:.5rem 0;display:flex;overflow-x:auto}.side-camera-strip .stream-card{aspect-ratio:16/9;flex-shrink:0;width:200px;height:100%}.meeting-main-content.with-screen-share .side-camera-strip{flex-direction:column;flex-shrink:0;justify-content:center;gap:.75rem;width:200px;height:100%;padding:0 .25rem;display:flex;overflow:hidden auto}.meeting-main-content.with-screen-share .side-camera-strip .stream-card{aspect-ratio:16/9;flex-shrink:0;width:100%;height:auto}@media (width<=768px){.meeting-main-content.with-screen-share{flex-direction:column}.meeting-main-content.with-screen-share .side-camera-strip{flex-direction:row;justify-content:flex-start;gap:1rem;width:100%;height:120px;padding:.5rem 0;display:flex;overflow:auto hidden}.meeting-main-content.with-screen-share .side-camera-strip .stream-card{width:200px;height:100%}}