*{margin:0;padding:0;box-sizing:border-box}:root{--primary: #6366f1;--primary-dark: #4f46e5;--primary-light: #818cf8;--success: #10b981;--success-dark: #059669;--danger: #ef4444;--danger-dark: #dc2626;--warning: #f59e0b;--bg-primary: #0f172a;--bg-secondary: #1e293b;--bg-tertiary: #334155;--text-primary: #f1f5f9;--text-secondary: #cbd5e1;--text-muted: #94a3b8;--border-color: #334155;--gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);--gradient-danger: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .3);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .4);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .5);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .6);--spacing-xs: .5rem;--spacing-sm: .75rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 3rem;--radius-sm: .375rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--radius-full: 9999px;--transition-fast: .15s ease-in-out;--transition-base: .25s ease-in-out;--transition-slow: .4s ease-in-out;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html,body{width:100%;height:100%;overflow-x:hidden}body{background:var(--bg-primary);color:var(--text-primary);position:relative;min-height:100vh;min-height:-webkit-fill-available}.background-canvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;opacity:.7;pointer-events:none;filter:blur(1px) saturate(120%)}.background-canvas:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at center,transparent 0%,rgba(15,23,42,.3) 100%);pointer-events:none}.background-canvas canvas{width:100%;height:100%;display:block}@keyframes rotate-circular-text{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.circular-text-container{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;pointer-events:none;width:100%;max-width:600px;height:100%;display:flex;align-items:center;justify-content:center;margin:0 auto}.circular-text{position:relative;width:1200px;height:1200px;pointer-events:auto;cursor:pointer;will-change:transform;animation:rotate-circular-text 40s linear infinite}.circular-text span{position:absolute;left:50%;top:0;transform-origin:0 600px;font-size:40px;font-weight:1600;letter-spacing:.15em;color:#fff;text-transform:uppercase;-webkit-user-select:none;user-select:none;text-shadow:0 0 30px rgba(99,102,241,.8),0 0 60px rgba(99,102,241,.5),0 2px 4px rgba(0,0,0,.8);-webkit-text-stroke:.5px rgba(255,255,255,.3)}.circular-text:hover span{color:#ffffffa6;text-shadow:0 0 40px rgba(99,102,241,1),0 0 80px rgba(99,102,241,.7),0 2px 6px rgba(0,0,0,.9)}@media(max-width:768px){.circular-text{width:700px;height:700px}.circular-text span{transform-origin:0 350px;font-size:30px;font-weight:900}}@media(max-width:480px){.circular-text{width:550px;height:550px}.circular-text span{transform-origin:0 275px;font-size:24px;font-weight:900}}.pixel-card-container{position:relative;overflow:hidden}.pixel-canvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:.6}.pixel-card-container>*:not(.pixel-canvas){position:relative;z-index:1}.app-container{display:flex;flex-direction:column;min-height:100vh;min-height:-webkit-fill-available;max-width:100%;margin:0 auto;position:relative;z-index:2}.app-header{background:transparent;border-bottom:none;padding:var(--spacing-2xl) var(--spacing-lg) var(--spacing-lg);position:absolute;top:0;left:0;right:0;z-index:100;backdrop-filter:blur(0px);-webkit-backdrop-filter:blur(0px);box-shadow:none;pointer-events:none}.header-content{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;margin:0 auto;gap:var(--spacing-md);pointer-events:auto}.logo-container{display:flex;align-items:center;gap:var(--spacing-lg);cursor:pointer;transition:transform .3s ease;width:auto}.logo-container:hover{transform:scale(1.05)}.logo-icon{display:none}.app-title{font-size:4.5rem;font-weight:900;background:linear-gradient(135deg,#f1f5f9,#818cf8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:.05em;display:inline-block;white-space:pre-wrap;text-shadow:0 0 40px rgba(129,140,248,.5)}.app-title .encrypted-char{opacity:.4;background:linear-gradient(135deg,#818cf8,#c084fc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;transition:opacity .3s ease}.connection-status{display:flex;align-items:center;gap:var(--spacing-xs);padding:6px var(--spacing-md);background:#3341554d;border-radius:var(--radius-full);font-size:.75rem;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);border:1px solid rgba(129,140,248,.2);box-shadow:0 0 15px #818cf81a;transition:all .3s ease}.connection-status:hover{background:#33415580;border-color:#818cf866;box-shadow:0 0 20px #818cf833}.status-dot{width:8px;height:8px;border-radius:50%;background:var(--warning);animation:pulse 2s infinite}.status-dot.connected{background:var(--success);animation:none}.status-text{color:var(--text-secondary);font-weight:500;white-space:nowrap}.app-footer{display:flex;align-items:center;justify-content:center;padding:var(--spacing-lg);background:transparent;width:100%}.main-content{flex:1;padding:var(--spacing-lg);display:flex;flex-direction:column;align-items:center;justify-content:center;max-width:600px;width:100%;margin:0 auto}.card{background:transparent;border-radius:var(--radius-xl);border:1px solid rgba(51,65,85,.5);box-shadow:var(--shadow-lg),0 0 40px #0000004d;overflow:hidden;width:100%;animation:slideUp .4s ease-out;backdrop-filter:blur(10px) saturate(150%);-webkit-backdrop-filter:blur(10px) saturate(150%)}.card-header{padding:var(--spacing-xl) var(--spacing-xl) var(--spacing-lg);text-align:center;border-bottom:1px solid rgba(51,65,85,.3);background:#0f172a33;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px)}.card-title{font-size:1.75rem;font-weight:700;color:var(--text-primary);margin-bottom:var(--spacing-xs);text-shadow:0 2px 10px rgba(0,0,0,.3)}.card-subtitle{font-size:.95rem;color:var(--text-secondary);font-weight:400}.card-body{padding:var(--spacing-xl);background:#1e293b40;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.user-info{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-lg);background:#33415599;border-radius:var(--radius-lg);margin:var(--spacing-lg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.user-avatar{width:50px;height:50px;border-radius:var(--radius-full);background:var(--gradient-primary);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:var(--shadow-md),0 0 20px #6366f14d;border:2px solid rgba(255,255,255,.2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.user-avatar svg{width:28px;height:28px;color:#fff}.user-details{display:flex;flex-direction:column;min-width:0}.user-label{font-size:.8rem;color:var(--text-muted);font-weight:500;text-transform:uppercase;letter-spacing:.05em}.user-id{font-size:1.1rem;color:var(--text-primary);font-weight:600;word-break:break-all}.input-group{margin-bottom:var(--spacing-lg)}.input-label{display:block;font-size:.9rem;font-weight:600;color:var(--text-secondary);margin-bottom:var(--spacing-xs);letter-spacing:.01em}.input-field{width:100%;padding:var(--spacing-md) var(--spacing-lg);background:#33415580;border:2px solid transparent;border-radius:var(--radius-lg);color:var(--text-primary);font-size:1rem;font-family:inherit;transition:all var(--transition-base);outline:none;-webkit-appearance:none;appearance:none;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.input-field::placeholder{color:var(--text-muted)}.input-field:focus{border-color:var(--primary);background:#0f172ab3;box-shadow:0 0 0 4px #6366f11a}.input-hint{display:block;font-size:.8rem;color:var(--text-muted);margin-top:var(--spacing-xs);font-style:italic}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-sm);padding:var(--spacing-md) var(--spacing-xl);font-size:1rem;font-weight:600;font-family:inherit;border:none;border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-base);outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-user-select:none;user-select:none;text-decoration:none;position:relative;overflow:hidden}.btn:active{transform:scale(.96)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}.btn-icon{width:20px;height:20px;flex-shrink:0}.btn-large{width:100%;padding:var(--spacing-lg) var(--spacing-xl);font-size:1.05rem;min-height:56px}.btn-primary{background:var(--gradient-primary);color:#fff;box-shadow:var(--shadow-md),0 0 30px #6366f166;border:1px solid rgba(255,255,255,.2);position:relative;overflow:hidden}.btn-primary:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}.btn-primary:hover:not(:disabled):before{left:100%}.btn-primary:hover:not(:disabled){box-shadow:var(--shadow-lg),0 0 40px #6366f199;transform:translateY(-2px)}.btn-success{background:var(--gradient-success);color:#fff;box-shadow:var(--shadow-md),0 0 30px #10b98166;border:1px solid rgba(255,255,255,.2)}.btn-success:hover:not(:disabled){box-shadow:var(--shadow-lg),0 0 40px #10b98199;transform:translateY(-2px)}.btn-danger{background:var(--gradient-danger);color:#fff;box-shadow:var(--shadow-md),0 0 30px #ef444466;border:1px solid rgba(255,255,255,.2)}.btn-danger:hover:not(:disabled){box-shadow:var(--shadow-lg),0 0 40px #ef444499}.btn-control{width:56px;height:56px;border-radius:var(--radius-full);background:#334155b3;color:var(--text-primary);padding:0;box-shadow:var(--shadow-md);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.btn-control svg{width:24px;height:24px}.btn-control:hover:not(:disabled){background:#0f172acc;transform:scale(1.05)}.btn-control.active{background:var(--primary);color:#fff;box-shadow:var(--shadow-md),0 0 20px #6366f180}.btn-circle{width:64px;height:64px;border-radius:var(--radius-full);padding:0;box-shadow:var(--shadow-lg);border:2px solid rgba(255,255,255,.2);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px)}.btn-circle.btn-success{box-shadow:var(--shadow-lg),0 0 35px #10b98180}.btn-circle.btn-danger{box-shadow:var(--shadow-lg),0 0 35px #ef444480}.btn-circle svg{width:28px;height:28px}.btn-circle-large{width:72px;height:72px;border-radius:var(--radius-full);padding:0;box-shadow:var(--shadow-xl),0 0 40px #ef444499;border:3px solid rgba(255,255,255,.25);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px)}.btn-circle-large svg{width:32px;height:32px}.call-state{padding:var(--spacing-lg) var(--spacing-md);display:none;flex-direction:column;align-items:center;justify-content:center;width:100%}.call-state.active{display:flex}.incoming-call-animation{position:relative;width:140px;height:140px;margin:0 auto var(--spacing-xl);display:flex;align-items:center;justify-content:center}.pulse-ring{position:absolute;width:100%;height:100%;border:3px solid var(--success);border-radius:50%;animation:pulse-ring 2s cubic-bezier(.215,.61,.355,1) infinite;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}.pulse-ring.delay-1{animation-delay:.5s}.pulse-ring.delay-2{animation-delay:1s}.caller-avatar{width:80px;height:80px;border-radius:50%;background:var(--gradient-success);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-xl),0 0 40px #10b98166;z-index:1;border:3px solid rgba(255,255,255,.2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.caller-avatar svg{width:40px;height:40px;color:#fff}.incoming-call-info{text-align:center;margin-bottom:var(--spacing-xl)}.incoming-call-label{font-size:.95rem;color:var(--text-secondary);margin-bottom:var(--spacing-xs);text-transform:uppercase;letter-spacing:.1em;font-weight:600;text-shadow:0 2px 10px rgba(0,0,0,.3)}.incoming-caller-id{font-size:1.5rem;color:var(--text-primary);font-weight:700;word-break:break-all;text-shadow:0 2px 15px rgba(0,0,0,.4)}.incoming-call-actions{display:flex;justify-content:center;gap:var(--spacing-2xl)}.active-call-info{text-align:center;margin-bottom:var(--spacing-lg);width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}.call-avatar{width:100px;height:100px;margin:0 auto var(--spacing-md);border-radius:50%;background:var(--gradient-primary);display:flex;align-items:center;justify-content:center;position:relative;box-shadow:var(--shadow-xl),0 0 50px #6366f180;border:3px solid rgba(255,255,255,.2);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px)}.sound-wave{display:flex;align-items:center;justify-content:center;gap:4px;height:40px}.sound-wave .bar{width:4px;background:#fff;border-radius:2px;animation:sound-wave 1s ease-in-out infinite;box-shadow:0 0 10px #ffffff80}.sound-wave .bar:nth-child(1){animation-delay:0s;height:15px}.sound-wave .bar:nth-child(2){animation-delay:.1s;height:25px}.sound-wave .bar:nth-child(3){animation-delay:.2s;height:35px}.sound-wave .bar:nth-child(4){animation-delay:.3s;height:25px}.sound-wave .bar:nth-child(5){animation-delay:.4s;height:15px}.active-call-label{font-size:.9rem;color:var(--text-secondary);margin-bottom:var(--spacing-xs);text-transform:uppercase;letter-spacing:.1em;font-weight:600;text-shadow:0 2px 10px rgba(0,0,0,.3)}.active-caller-id{font-size:1.5rem;color:var(--text-primary);font-weight:700;margin-bottom:var(--spacing-sm);word-break:break-all;text-shadow:0 2px 15px rgba(0,0,0,.4)}.call-duration{font-size:1.1rem;color:var(--text-secondary);font-weight:500;font-variant-numeric:tabular-nums;text-shadow:0 1px 5px rgba(0,0,0,.3)}.call-controls{display:flex;justify-content:center;align-items:center;gap:var(--spacing-lg);width:100%;flex-wrap:wrap}.toast-container{position:fixed;bottom:var(--spacing-lg);left:50%;transform:translate(-50%);z-index:1000;display:flex;flex-direction:column;gap:var(--spacing-sm);max-width:calc(100% - 2rem);width:400px;pointer-events:none}.toast{background:#1e293bd9;border:1px solid rgba(51,65,85,.5);border-radius:var(--radius-lg);padding:var(--spacing-md) var(--spacing-lg);box-shadow:var(--shadow-xl),0 0 30px #0000004d;display:flex;align-items:center;gap:var(--spacing-md);animation:slideUpFade .3s ease-out;pointer-events:auto;backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%)}.toast.success{border-left:4px solid var(--success);background:#10b98126}.toast.error{border-left:4px solid var(--danger);background:#ef444426}.toast.info{border-left:4px solid var(--primary);background:#6366f126}.toast-icon{width:24px;height:24px;flex-shrink:0}.toast.success .toast-icon{color:var(--success)}.toast.error .toast-icon{color:var(--danger)}.toast.info .toast-icon{color:var(--primary)}.toast-message{flex:1;color:var(--text-primary);font-size:.95rem;font-weight:500}.hidden{display:none!important}.icon-muted,.icon-speaker-on,.icon-video-on{display:none}.icon-unmuted,.icon-speaker-off,.icon-video-off,.btn-control.active .icon-muted{display:block}.btn-control.active .icon-unmuted{display:none}.btn-control.active .icon-speaker-on{display:block}.btn-control.active .icon-speaker-off{display:none}.btn-control.active .icon-video-on{display:block}.btn-control.active .icon-video-off{display:none}.video-container{position:relative;width:100%;max-width:600px;margin:0 auto var(--spacing-lg);border-radius:var(--radius-xl);overflow:hidden;background:#000c;box-shadow:var(--shadow-xl)}.remote-video{width:100%;height:auto;display:block;background:#000000e6;border-radius:var(--radius-xl)}.local-video{position:absolute;bottom:var(--spacing-md);right:var(--spacing-md);width:120px;height:auto;border-radius:var(--radius-lg);border:2px solid rgba(255,255,255,.3);box-shadow:var(--shadow-lg);background:#000c;z-index:10}@media(max-width:480px){.local-video{width:80px;bottom:var(--spacing-sm);right:var(--spacing-sm)}}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUpFade{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes pulse-ring{0%{transform:scale(.5);opacity:1}to{transform:scale(1.2);opacity:0}}@keyframes sound-wave{0%,to{height:15px}50%{height:35px}}@media(max-width:480px){:root{font-size:14px}.app-header{padding:var(--spacing-sm) var(--spacing-md)}.app-title{font-size:3rem}.app-footer{padding:var(--spacing-sm) var(--spacing-md)}.logo-icon{width:24px;height:24px}.main-content{padding:var(--spacing-md)}.card-header{padding:var(--spacing-lg)}.card-title{font-size:1.5rem}.card-body{padding:var(--spacing-lg)}.call-state{padding:var(--spacing-md)}.user-info{margin:var(--spacing-md)}.incoming-call-animation{width:120px;height:120px}.caller-avatar{width:70px;height:70px}.call-avatar{width:100px;height:100px}.incoming-call-actions{gap:var(--spacing-xl)}.call-controls{gap:var(--spacing-md)}.btn-circle{width:56px;height:56px}.btn-circle-large{width:64px;height:64px}.btn-control{width:50px;height:50px}}@media(min-width:768px){.app-container{max-width:600px}}@media(prefers-color-scheme:dark){body{background:var(--bg-primary)}}@media(hover:none)and (pointer:coarse){.btn{min-height:48px}.input-field{min-height:48px;font-size:16px}.btn:active{transform:scale(.94)}}@supports (padding: max(0px)){.app-header{padding-left:max(var(--spacing-lg),env(safe-area-inset-left));padding-right:max(var(--spacing-lg),env(safe-area-inset-right));padding-top:max(var(--spacing-md),env(safe-area-inset-top))}.main-content{padding-left:max(var(--spacing-lg),env(safe-area-inset-left));padding-right:max(var(--spacing-lg),env(safe-area-inset-right));padding-bottom:max(var(--spacing-lg),env(safe-area-inset-bottom))}.toast-container{bottom:max(var(--spacing-lg),env(safe-area-inset-bottom))}}