:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}:root{--primary-bg: #ffffff;--secondary-bg: #f8f9fa;--tertiary-bg: #f0f2f5;--accent-primary: #2563eb;--accent-secondary: #3b82f6;--accent-hover: #1d4ed8;--accent-light: #dbeafe;--accent-gradient: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);--text-primary: #1f2937;--text-secondary: #6b7280;--text-muted: #9ca3af;--text-inverse: #ffffff;--border-color: #e5e7eb;--divider-color: #d1d5db;--card-bg: #ffffff;--card-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px rgba(0, 0, 0, .06);--card-shadow-hover: 0 10px 25px rgba(37, 99, 235, .15);--input-bg: #ffffff;--input-border: #d1d5db;--input-focus: #3b82f6;--success: #10b981;--error: #ef4444;--warning: #f59e0b;--info: #3b82f6;--glass-bg: rgba(255, 255, 255, .8);--glass-border: rgba(37, 99, 235, .1);--glass-shadow: 0 8px 32px 0 rgba(37, 99, 235, .1);--overlay-bg: rgba(0, 0, 0, .5);--overlay-light: rgba(37, 99, 235, .05)}[data-theme=dark]{--primary-bg: #0a0a0f;--secondary-bg: #1a1a24;--tertiary-bg: #252530;--accent-primary: #3b82f6;--accent-secondary: #60a5fa;--accent-hover: #2563eb;--accent-light: #1e3a8a;--accent-gradient: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);--text-primary: #f9fafb;--text-secondary: #d1d5db;--text-muted: #9ca3af;--text-inverse: #1f2937;--border-color: #374151;--divider-color: #4b5563;--card-bg: #1a1a24;--card-shadow: 0 4px 6px rgba(0, 0, 0, .3);--card-shadow-hover: 0 10px 25px rgba(59, 130, 246, .3);--input-bg: #252530;--input-border: #374151;--input-focus: #60a5fa;--success: #34d399;--error: #f87171;--warning: #fbbf24;--info: #60a5fa;--glass-bg: rgba(26, 26, 36, .8);--glass-border: rgba(59, 130, 246, .2);--glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, .4);--overlay-bg: rgba(0, 0, 0, .7);--overlay-light: rgba(59, 130, 246, .1)}*{transition:background-color .3s ease,color .3s ease,border-color .3s ease}.theme-toggle{position:fixed;top:20px;right:20px;width:50px;height:50px;border-radius:50%;background:var(--card-bg);border:2px solid var(--border-color);cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:1000;box-shadow:var(--card-shadow);transition:all .3s ease}.theme-toggle:hover{transform:scale(1.1);box-shadow:var(--card-shadow-hover);border-color:var(--accent-primary)}.theme-toggle:active{transform:scale(.95)}.theme-icon{font-size:24px;display:flex;align-items:center;justify-content:center}.home{min-height:100vh;display:flex;background:var(--primary-bg);position:relative;overflow:hidden}.home>.theme-toggle{position:absolute;top:24px;right:24px;z-index:1000}.home:before{content:"";position:absolute;width:100%;height:100%;background:radial-gradient(circle at 20% 50%,var(--accent-light) 0%,transparent 50%),radial-gradient(circle at 80% 20%,var(--overlay-light) 0%,transparent 50%),radial-gradient(circle at 40% 80%,var(--overlay-light) 0%,transparent 50%);animation:gradientShift 20s ease-in-out infinite;opacity:.3}@keyframes gradientShift{0%,to{opacity:.3;transform:scale(1)}50%{opacity:.5;transform:scale(1.05)}}.home-left{flex:1.2;padding:60px 80px;display:flex;align-items:center;position:relative;z-index:1}.hero-content{max-width:700px}.logo-badge{display:inline-flex;align-items:center;justify-content:center;width:70px;height:70px;background:var(--accent-gradient);border-radius:20px;font-size:32px;margin-bottom:32px;box-shadow:0 10px 30px #2563eb4d;animation:floatBadge 3s ease-in-out infinite}@keyframes floatBadge{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.logo-icon{filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}.hero-title{font-size:64px;font-weight:800;line-height:1.1;margin-bottom:24px;color:var(--text-primary);letter-spacing:-.02em}.highlight{background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;position:relative;display:inline-block}.hero-description{font-size:20px;line-height:1.6;color:var(--text-secondary);margin-bottom:48px;max-width:600px}.features-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-bottom:48px}.feature-card{display:flex;gap:16px;padding:24px;background:var(--card-bg);border:1px solid var(--border-color);border-radius:16px;transition:all .3s ease}.feature-card:hover{transform:translateY(-4px);box-shadow:var(--card-shadow-hover);border-color:var(--accent-primary)}.feature-icon-wrapper{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:var(--accent-light);border-radius:12px;font-size:24px;flex-shrink:0}[data-theme=dark] .feature-icon-wrapper{background:#3b82f626}.feature-content h3{font-size:18px;font-weight:600;color:var(--text-primary);margin-bottom:4px}.feature-content p{font-size:14px;color:var(--text-secondary);line-height:1.4}.stats{display:flex;gap:48px;padding:32px 0;border-top:1px solid var(--border-color)}.stat-item{text-align:center}.stat-number{font-size:36px;font-weight:800;background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:8px}.stat-label{font-size:14px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;font-weight:600}.home-right{flex:.8;display:flex;align-items:center;justify-content:center;padding:60px 40px;background:var(--secondary-bg);border-left:1px solid var(--border-color);position:relative;z-index:1}.form-container{width:100%;max-width:480px;background:var(--glass-bg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);padding:48px;border-radius:24px;border:1px solid var(--glass-border);box-shadow:var(--glass-shadow)}.form-header{text-align:center;margin-bottom:40px}.form-title{font-size:32px;font-weight:700;color:var(--text-primary);margin-bottom:12px}.form-subtitle{font-size:16px;color:var(--text-secondary)}.home-form{display:flex;flex-direction:column;gap:24px}.form-group{display:flex;flex-direction:column;gap:12px}.form-group label{font-size:14px;font-weight:600;color:var(--text-primary);text-transform:uppercase;letter-spacing:.05em}.input-wrapper{position:relative;display:flex;align-items:center}.input-icon{position:absolute;left:18px;font-size:20px;pointer-events:none;z-index:1}.input-wrapper input{width:100%;padding:16px 20px 16px 54px;font-size:16px;background:var(--input-bg);border:2px solid var(--input-border);border-radius:12px;color:var(--text-primary);transition:all .3s ease;font-family:inherit}.input-wrapper input:focus{outline:none;border-color:var(--input-focus);box-shadow:0 0 0 4px #2563eb1a}.input-wrapper input::placeholder{color:var(--text-muted)}.create-room-btn,.join-btn{padding:16px 28px;font-size:16px;font-weight:600;border-radius:12px;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:all .3s ease;font-family:inherit}.create-room-btn{background:var(--card-bg);color:var(--accent-primary);border:2px solid var(--accent-primary)}.create-room-btn:hover{background:var(--accent-light);transform:translateY(-2px);box-shadow:0 4px 12px #2563eb33}.join-btn{background:var(--accent-gradient);color:var(--text-inverse);box-shadow:0 4px 16px #2563eb4d}.join-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px #2563eb66}.join-btn:active,.create-room-btn:active{transform:translateY(0)}.form-footer{text-align:center;margin-top:24px;padding-top:24px;border-top:1px solid var(--border-color)}.form-footer p{font-size:13px;color:var(--text-muted)}@media(max-width:1200px){.home-left{padding:40px 50px}.hero-title{font-size:52px}.features-grid{gap:16px}}@media(max-width:968px){.home{flex-direction:column}.home-left,.home-right{flex:1;padding:40px 30px}.home-right{border-left:none;border-top:1px solid var(--border-color)}.hero-title{font-size:48px}.features-grid{grid-template-columns:1fr}.stats{gap:32px}}@media(max-width:640px){.home-left,.home-right{padding:30px 20px}.hero-title{font-size:36px}.hero-description{font-size:16px}.form-container{padding:32px 24px}.stat-number{font-size:28px}.stats{flex-wrap:wrap;gap:24px}.stat-item{flex:1;min-width:100px}}.video-player{position:relative;width:100%;height:100%;background:var(--video-bg);border-radius:12px;overflow:hidden}.video{width:100%;height:100%;object-fit:cover;transition:opacity .3s ease;cursor:pointer}.video:hover{opacity:.95}.local-video{transform:scaleX(-1)}.play-overlay{position:absolute;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:10;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.play-button{display:flex;flex-direction:column;align-items:center;gap:12px;padding:32px;background:var(--surface-elevated);border-radius:16px;border:2px solid var(--accent-primary);transition:all .3s ease}.play-button:hover{transform:scale(1.1);box-shadow:0 12px 40px rgba(var(--accent-rgb),.3)}.play-icon{font-size:48px;color:var(--accent-primary);filter:drop-shadow(0 4px 8px rgba(0,0,0,.3))}.play-text{font-size:16px;font-weight:600;color:var(--text-primary);letter-spacing:.5px}.video-label{position:absolute;bottom:16px;left:16px;background:var(--video-label-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--text-primary);padding:8px 16px;border-radius:8px;font-size:13px;font-weight:600;letter-spacing:.3px;border:1px solid var(--border-color);box-shadow:var(--shadow-md);z-index:2}.controls{display:flex;gap:24px;justify-content:center;padding:0;background:transparent;border-radius:0}.control-btn{min-width:160px;height:64px;border:none;border-radius:16px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;gap:12px;position:relative;box-shadow:var(--shadow-md);padding:0 28px}.btn-icon{font-size:24px}.btn-text{font-size:15px;font-weight:600;letter-spacing:.3px}.control-btn:before{content:"";position:absolute;inset:-2px;border-radius:16px;padding:2px;background:linear-gradient(135deg,rgba(var(--accent-rgb),.2),rgba(var(--accent-rgb),.05));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;opacity:0;transition:opacity .3s ease}.control-btn:hover:before{opacity:1}.control-btn.screen-share-btn{background:var(--button-bg);color:var(--button-text);box-shadow:0 6px 20px rgba(var(--accent-rgb),.3)}.control-btn.screen-share-btn.active{background:linear-gradient(135deg,#4caf50,#45a049);color:#fff;box-shadow:0 6px 20px #4caf5066}.control-btn.leave-btn{background:linear-gradient(135deg,#d32f2f,#b71c1c);color:#fff;box-shadow:0 6px 20px #d32f2f80}.control-btn:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}.control-btn.screen-share-btn:hover{box-shadow:0 8px 28px rgba(var(--accent-rgb),.4)}.control-btn.screen-share-btn.active:hover{box-shadow:0 8px 28px #4caf5080}.control-btn.leave-btn:hover{box-shadow:0 8px 28px #d32f2f99}.control-btn:active{transform:translateY(-2px) scale(1)}.room{min-height:100vh;background:var(--gradient-primary);display:flex;flex-direction:column;color:var(--text-primary);position:relative}.room:before{content:"";position:absolute;inset:0;background:var(--gradient-overlay);pointer-events:none}.room-header{padding:24px 32px;background:var(--surface-elevated);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border-color);position:relative;z-index:10}.room-title{font-size:22px;font-weight:700;margin:0;letter-spacing:-.5px;color:var(--text-primary)}.participant-count{background:var(--accent-bg);padding:10px 20px;border-radius:24px;font-size:14px;font-weight:600;border:1px solid var(--accent-border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--text-primary)}.video-grid{flex:1;display:grid;gap:20px;padding:28px;overflow-y:auto;position:relative;z-index:1}.video-grid::-webkit-scrollbar{width:8px}.video-grid::-webkit-scrollbar-track{background:var(--scrollbar-track);border-radius:10px}.video-grid::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:10px}.video-grid::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}.video-grid:has(.video-wrapper:nth-child(1):last-child){grid-template-columns:1fr}.video-grid:has(.video-wrapper:nth-child(2):last-child){grid-template-columns:repeat(2,1fr)}.video-grid:has(.video-wrapper:nth-child(3):last-child),.video-grid:has(.video-wrapper:nth-child(4):last-child){grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr)}.video-grid:has(.video-wrapper:nth-child(5):last-child),.video-grid:has(.video-wrapper:nth-child(6):last-child){grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr)}.no-streams-message{grid-column:1 / -1;display:flex;align-items:center;justify-content:center;min-height:400px}.message-content{text-align:center;padding:48px;background:var(--surface-elevated);border-radius:24px;border:2px dashed var(--border-color);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);max-width:480px}.message-icon{font-size:80px;display:block;margin-bottom:24px;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.1);opacity:.8}}.message-content h3{font-size:24px;font-weight:700;margin:0 0 12px;color:var(--text-primary)}.message-content p{font-size:16px;color:var(--text-secondary);margin:0;line-height:1.6}.video-wrapper{background:var(--video-bg);border-radius:16px;overflow:hidden;position:relative;min-height:200px;box-shadow:var(--shadow-lg);transition:all .3s ease;border:1px solid var(--border-color)}.video-wrapper:hover{box-shadow:var(--shadow-xl);transform:translateY(-2px);border-color:var(--accent-color)}.video-wrapper.screen-share{grid-column:span 2;min-height:400px;border:2px solid var(--accent-color)}.video-wrapper.small-video{max-width:250px;max-height:180px;position:fixed;bottom:100px;right:30px;z-index:100;border-radius:12px;box-shadow:var(--shadow-xl)}.controls-container{padding:24px;display:flex;justify-content:center;background:var(--surface-elevated);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--border-color);position:relative;z-index:10}@media(max-width:768px){.room-header{flex-direction:column;gap:10px;text-align:center}.video-grid{grid-template-columns:1fr!important;gap:10px;padding:10px}.video-wrapper{min-height:250px}.video-wrapper.screen-share{grid-column:span 1;min-height:300px}.controls-container{padding:15px 10px}}@media(max-width:480px){.room-title{font-size:18px}.participant-count{font-size:12px;padding:6px 12px}}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{transform:none!important;direction:ltr!important}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;background:var(--primary-bg);color:var(--text-primary)}#root{min-height:100vh;background:var(--primary-bg)}#root{min-height:100vh}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:#0000000d;border-radius:10px}::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:10px;border:2px solid rgba(255,255,255,.1)}::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#5568d3,#6a3f8f)}button,input,a{transition:all .3s cubic-bezier(.4,0,.2,1)}button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid #667eea;outline-offset:2px}::selection{background:#667eea4d;color:inherit}