:root{--color-bg: #050a0e;--color-bg-elevated: #0a1118;--color-surface: #0f1a24;--color-surface-hover: #152231;--color-border: #1e3040;--color-primary: #00d4ff;--color-primary-hover: #00b8e6;--color-primary-glow: rgba(0, 212, 255, .15);--color-primary-dim: rgba(0, 212, 255, .08);--color-secondary: #64748b;--color-secondary-hover: #7c8fa6;--color-danger: #ff4757;--color-danger-hover: #ff6b7a;--color-success: #00e676;--color-warning: #ffab00;--color-text: #f0f6fc;--color-text-muted: #8b9eb3;--color-text-dim: #5a6d80;--font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 20px;--radius-xl: 28px;--radius-full: 9999px;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .3);--shadow-md: 0 8px 24px rgba(0, 0, 0, .4);--shadow-lg: 0 16px 48px rgba(0, 0, 0, .5);--shadow-glow: 0 0 30px var(--color-primary-glow);--transition-fast: .12s ease;--transition-normal: .2s ease;--transition-slow: .4s cubic-bezier(.16, 1, .3, 1)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{height:100%;-webkit-text-size-adjust:100%}body{height:100%;font-family:var(--font-family);font-weight:400;background:var(--color-bg);color:var(--color-text);line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}#root{height:100%}.app{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden;background:radial-gradient(ellipse at 20% 0%,rgba(0,212,255,.05) 0%,transparent 50%),radial-gradient(ellipse at 80% 100%,rgba(0,212,255,.03) 0%,transparent 40%),var(--color-bg)}.loading-screen{display:flex;align-items:center;justify-content:center}.loader{width:48px;height:48px;border:3px solid var(--color-surface);border-top-color:var(--color-primary);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.screen{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}.logo{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:24px}.logo svg{color:var(--color-primary)}.logo h1{font-size:3rem;font-weight:700;letter-spacing:-.04em;background:linear-gradient(135deg,var(--color-primary) 0%,#80e5ff 50%,var(--color-primary) 100%);background-size:200% 200%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shimmer 8s ease infinite}@keyframes shimmer{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.tagline{font-size:1.1rem;color:var(--color-text-muted);margin-top:4px;font-weight:300}.logo-section{text-align:center;margin-bottom:40px}.login-screen{align-items:center;justify-content:center;padding:24px}.login-container{width:100%;max-width:400px;display:flex;flex-direction:column;align-items:center}.login-card{width:100%;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:32px;text-align:center;box-shadow:var(--shadow-md)}.login-prompt{color:var(--color-text-muted);margin-bottom:24px;font-size:.95rem}.btn-google{width:100%;display:flex;align-items:center;justify-content:center;gap:12px;padding:14px 24px;background:#fff;color:#1f1f1f;font-size:1rem;font-weight:500;border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-normal)}.btn-google:hover{background:#f0f0f0;transform:translateY(-2px);box-shadow:var(--shadow-md)}.legal-text{margin-top:20px;font-size:.75rem;color:var(--color-text-dim);line-height:1.6}.legal-text a{color:var(--color-primary);text-decoration:none}.legal-text a:hover{text-decoration:underline}.features-preview{display:flex;gap:24px;margin-top:48px;flex-wrap:wrap;justify-content:center}.feature{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:.85rem;color:var(--color-text-muted)}.feature-icon{font-size:1.5rem}.join-prompt{text-align:center;margin-bottom:32px}.join-prompt p{color:var(--color-text-muted);margin-bottom:8px}.room-id-display{font-family:SF Mono,Monaco,monospace;font-size:.9rem;color:var(--color-primary);background:var(--color-surface);padding:8px 16px;border-radius:var(--radius-md);display:inline-block}.btn-large{display:flex;align-items:center;justify-content:center;gap:12px;min-width:200px;font-size:1.1rem;padding:18px 36px}.loader-small{width:20px;height:20px;border:2px solid var(--color-bg);border-top-color:transparent;border-radius:50%;animation:spin 1s linear infinite}.permission-hint{margin-top:24px;font-size:.85rem;color:var(--color-text-dim);text-align:center}.home-screen{position:relative}.user-header{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:16px 24px;z-index:10}.user-info{display:flex;align-items:center;gap:12px}.avatar{width:36px;height:36px;border-radius:var(--radius-full);object-fit:cover;border:2px solid var(--color-border)}.user-name{font-size:.95rem;font-weight:500;color:var(--color-text)}.btn-ghost{background:transparent;border:none;color:var(--color-text-muted);font-size:.9rem;padding:8px 16px;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast)}.btn-ghost:hover{color:var(--color-text);background:var(--color-surface)}.home-container{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;max-width:480px;margin:0 auto;width:100%}.call-options{width:100%;display:flex;flex-direction:column;gap:24px}.call-type-selector{display:grid;grid-template-columns:1fr 1fr;gap:16px}.btn-call-type{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:28px 20px;font-size:1rem;font-weight:500;border:none;border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-normal)}.btn-video{background:linear-gradient(135deg,var(--color-primary) 0%,#00a8cc 100%);color:var(--color-bg);box-shadow:0 4px 20px #00d4ff40}.btn-video:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 8px 30px #00d4ff59}.btn-audio{background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border)}.btn-audio:hover:not(:disabled){background:var(--color-surface-hover);border-color:var(--color-primary)}.btn-call-type:disabled{opacity:.5;cursor:not-allowed}.divider{display:flex;align-items:center;gap:16px;color:var(--color-text-dim);font-size:.85rem}.divider:before,.divider:after{content:"";flex:1;height:1px;background:var(--color-border)}.join-section{display:flex;gap:12px}.input{flex:1;padding:14px 18px;font-size:1rem;font-family:inherit;background:var(--color-surface);border:2px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);transition:all var(--transition-fast)}.input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-glow)}.input::placeholder{color:var(--color-text-dim)}.btn-join{padding:14px 24px;background:var(--color-surface);border:2px solid var(--color-border);color:var(--color-text);font-size:1rem;font-weight:500;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap}.btn-join:hover:not(:disabled){border-color:var(--color-primary);color:var(--color-primary)}.btn-join:disabled{opacity:.5;cursor:not-allowed}.error-message{padding:14px 18px;background:#ff47571a;border:1px solid var(--color-danger);border-radius:var(--radius-md);color:var(--color-danger);font-size:.9rem;text-align:center}.site-footer{position:fixed;bottom:0;left:0;right:0;padding:16px;text-align:center;font-size:.8rem;color:var(--color-text-dim);background:linear-gradient(transparent,var(--color-bg))}.site-footer a{color:var(--color-text-dim);text-decoration:none;transition:color var(--transition-fast)}.site-footer a:hover{color:var(--color-primary)}.site-footer .divider{display:inline;margin:0 8px;color:var(--color-text-dim)}.site-footer .divider:before,.site-footer .divider:after{display:none}.waiting-screen{align-items:center;justify-content:center;padding:24px}.waiting-container{width:100%;max-width:400px;display:flex;flex-direction:column;align-items:center;gap:28px}.waiting-title{font-size:1.5rem;font-weight:600;color:var(--color-text)}.room-info{width:100%;text-align:center}.room-info>p{color:var(--color-text-muted);margin-bottom:12px;font-size:.9rem}.room-link-box{display:flex;flex-direction:column;align-items:center;gap:16px;padding:20px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg)}.room-link{font-family:SF Mono,Monaco,monospace;font-size:.85rem;color:var(--color-primary);word-break:break-all;text-align:center;line-height:1.6}.room-actions{display:flex;gap:8px}.btn-icon{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--color-surface-hover);border:none;border-radius:var(--radius-md);color:var(--color-text);cursor:pointer;transition:all var(--transition-fast)}.btn-icon:hover{background:var(--color-primary);color:var(--color-bg)}.copy-feedback{font-size:.85rem;color:var(--color-success);animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.video-preview{width:100%;max-width:320px;aspect-ratio:4/3;position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--color-surface);box-shadow:var(--shadow-md)}.preview-video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.video-label{position:absolute;bottom:12px;left:50%;transform:translate(-50%);padding:6px 14px;background:#000000b3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:var(--radius-full);font-size:.8rem;color:var(--color-text)}.audio-preview{width:100%;max-width:320px;aspect-ratio:4/3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}.audio-avatar{width:100px;height:100px;display:flex;align-items:center;justify-content:center;background:var(--color-primary-dim);border-radius:var(--radius-full);color:var(--color-primary)}.audio-label{font-size:.95rem;color:var(--color-text-muted)}.status-message{padding:12px 24px;background:var(--color-surface);border-radius:var(--radius-full);font-size:.9rem;color:var(--color-text-muted);animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}.btn-cancel{padding:14px 32px;background:transparent;border:2px solid var(--color-danger);color:var(--color-danger);font-size:1rem;font-weight:500;border-radius:var(--radius-full);cursor:pointer;transition:all var(--transition-normal)}.btn-cancel:hover{background:var(--color-danger);color:#fff}.call-screen{padding:0}.call-container{width:100%;height:100%;display:flex;flex-direction:column;background:#000}.videos{flex:1;position:relative;min-height:0;overflow:hidden}.remote-video{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:contain;background:#000}.remote-video.active+.video-placeholder{display:none}.video-placeholder{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;background:var(--color-surface);color:var(--color-text-muted)}.video-placeholder p{font-size:1rem}.local-video-wrapper{position:absolute;right:20px;bottom:20px;width:160px;aspect-ratio:4/3;border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-lg);border:3px solid var(--color-bg)}.local-video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1);background:var(--color-surface)}.local-audio-indicator{position:absolute;right:20px;bottom:20px;width:60px;height:60px;display:flex;align-items:center;justify-content:center;background:var(--color-surface);border-radius:var(--radius-full);color:var(--color-primary);box-shadow:var(--shadow-lg);border:3px solid var(--color-bg)}.audio-call-placeholder{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;background:var(--color-surface)}.audio-call-avatar{width:140px;height:140px;display:flex;align-items:center;justify-content:center;background:var(--color-primary-dim);border-radius:var(--radius-full);color:var(--color-primary);animation:audioPulse 2s ease-in-out infinite}@keyframes audioPulse{0%,to{transform:scale(1);box-shadow:0 0 0 0 var(--color-primary-glow)}50%{transform:scale(1.03);box-shadow:0 0 0 20px transparent}}.audio-call-label{font-size:1.25rem;color:var(--color-text-muted)}.quality-indicator{position:absolute;top:20px;right:20px;background:#0f1a24e6;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:var(--radius-md);font-size:.8rem;z-index:10;cursor:pointer;transition:all var(--transition-fast);overflow:hidden;border:1px solid var(--color-border)}.quality-indicator:hover{background:#152231f2}.quality-header{display:flex;align-items:center;gap:8px;padding:10px 14px}.quality-dot{width:8px;height:8px;border-radius:var(--radius-full);background:var(--color-text-muted)}.quality-indicator.excellent .quality-dot{background:var(--color-success);box-shadow:0 0 8px var(--color-success)}.quality-indicator.good .quality-dot{background:var(--color-primary);box-shadow:0 0 8px var(--color-primary)}.quality-indicator.fair .quality-dot{background:var(--color-warning);box-shadow:0 0 8px var(--color-warning)}.quality-indicator.poor .quality-dot{background:var(--color-danger);box-shadow:0 0 8px var(--color-danger)}.quality-level{font-weight:500;color:var(--color-text)}.quality-details{padding:12px 14px;border-top:1px solid var(--color-border)}.quality-row{display:flex;justify-content:space-between;gap:24px;padding:4px 0;color:var(--color-text-muted);font-size:.75rem}.quality-row span:last-child{color:var(--color-text);font-weight:500;font-family:SF Mono,Monaco,monospace}.call-status{position:absolute;top:20px;left:50%;transform:translate(-50%);padding:10px 24px;border-radius:var(--radius-full);font-size:.9rem;font-weight:500;z-index:10;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.call-status.info{background:#0f1a24e6;color:var(--color-text);border:1px solid var(--color-border)}.call-status.error{background:#ff4757e6;color:#fff}.peer-left-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#000000f2;z-index:20}.peer-left-content{display:flex;flex-direction:column;align-items:center;gap:28px;padding:32px;max-width:400px;width:100%}.peer-left-video-container{width:100%;max-width:320px;aspect-ratio:4/3;border-radius:var(--radius-lg);overflow:hidden;background:var(--color-surface);box-shadow:var(--shadow-lg)}.peer-left-video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.peer-left-message{text-align:center}.peer-left-message p{font-size:1.25rem;color:var(--color-text)}.peer-left-message strong{color:var(--color-primary)}.call-controls{display:flex;align-items:center;justify-content:center;gap:16px;padding:24px;background:var(--color-bg)}.btn-control{width:56px;height:56px;display:flex;align-items:center;justify-content:center;background:var(--color-surface);border:none;border-radius:var(--radius-full);color:var(--color-text);cursor:pointer;transition:all var(--transition-normal)}.btn-control:hover{background:var(--color-surface-hover);transform:scale(1.08)}.btn-control.active,.btn-control.btn-hangup{background:var(--color-danger);color:#fff}.btn-control.btn-hangup:hover{background:var(--color-danger-hover)}.btn-control svg{width:24px;height:24px}.btn-primary{padding:16px 32px;background:var(--color-primary);border:none;color:var(--color-bg);font-size:1rem;font-weight:600;border-radius:var(--radius-full);cursor:pointer;transition:all var(--transition-normal)}.btn-primary:hover{background:var(--color-primary-hover);transform:translateY(-2px);box-shadow:var(--shadow-glow)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000c;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:24px;animation:fadeIn .2s ease}.modal-content{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:32px;max-width:440px;width:100%;text-align:center;box-shadow:var(--shadow-lg);animation:slideUp .3s cubic-bezier(.16,1,.3,1)}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.modal-icon{width:80px;height:80px;margin:0 auto 20px;display:flex;align-items:center;justify-content:center;background:#ff475726;border-radius:var(--radius-full);color:var(--color-danger)}.modal-content h2{font-size:1.5rem;font-weight:600;color:var(--color-text);margin-bottom:12px}.modal-message{color:var(--color-text-muted);font-size:.95rem;margin-bottom:24px;line-height:1.6}.modal-instructions{background:var(--color-bg);border-radius:var(--radius-md);padding:20px;text-align:left;margin-bottom:24px}.modal-instructions h3{font-size:.9rem;font-weight:600;color:var(--color-text);margin-bottom:12px}.modal-instructions ol{list-style:decimal;padding-left:20px;color:var(--color-text-muted);font-size:.875rem;line-height:1.8}.modal-instructions li{margin-bottom:4px}.modal-instructions strong{color:var(--color-text)}.modal-actions{display:flex;gap:12px;justify-content:center}.modal-actions .btn{flex:1;max-width:160px}.btn-secondary{padding:14px 24px;background:var(--color-surface-hover);border:1px solid var(--color-border);color:var(--color-text);font-size:.95rem;font-weight:500;border-radius:var(--radius-full);cursor:pointer;transition:all var(--transition-normal)}.btn-secondary:hover{background:var(--color-border)}.cookie-banner{position:fixed;bottom:0;left:0;right:0;background:var(--color-surface);border-top:1px solid var(--color-border);padding:16px 24px;z-index:1000;box-shadow:0 -8px 32px #0006}.cookie-content{max-width:800px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.cookie-content p{font-size:.875rem;color:var(--color-text-muted);flex:1;min-width:200px}.cookie-content a{color:var(--color-primary);text-decoration:none}.btn-cookie{padding:10px 24px;background:var(--color-primary);border:none;color:var(--color-bg);font-size:.875rem;font-weight:600;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast)}.btn-cookie:hover{background:var(--color-primary-hover)}@media(max-width:480px){.logo{font-size:2.75rem}.login-card{padding:24px}.features-preview{flex-direction:column;gap:16px}.feature{flex-direction:row;gap:12px}.call-type-selector{grid-template-columns:1fr}.btn-call-type{flex-direction:row;padding:20px}.join-section{flex-direction:column}.local-video-wrapper{width:120px;right:12px;bottom:12px}.call-controls{gap:12px;padding:16px}.btn-control{width:48px;height:48px}.cookie-content{flex-direction:column;text-align:center}.btn-cookie{width:100%}}