:root{--bg-void:#06060a;--bg-base:#0c0c14;--bg-elevated:#12121e;--bg-card:#181828;--bg-hover:#1f1f32;--bg-glass:#ffffff0a;--bg-glass-md:#ffffff12;--border-subtle:#ffffff0d;--border-default:#ffffff17;--border-strong:#ffffff29;--text-primary:#eeeef8;--text-secondary:#8888b0;--text-muted:#4a4a6a;--accent:#4ade80;--accent-dim:#4ade801f;--accent-glow:#4ade8040;--accent-dark:#22c55e;--danger:#f87171;--danger-dim:#f871711f;--warning:#fbbf24;--neutral:#ffffff1f;--neutral-hover:#ffffff2e;--r-sm:6px;--r-md:10px;--r-lg:16px;--r-xl:24px;--r-full:9999px;--shadow-sm:0 1px 6px #00000073;--shadow-md:0 4px 20px #0000008c;--shadow-lg:0 8px 40px #000000a6;--shadow-xl:0 16px 60px #000000bf;--t-fast:.12s cubic-bezier(.4, 0, .2, 1);--t-base:.22s cubic-bezier(.4, 0, .2, 1);--t-slow:.38s cubic-bezier(.4, 0, .2, 1);--t-spring:.3s cubic-bezier(.34, 1.56, .64, 1);--font-display:"Outfit", sans-serif;--font-body:"DM Sans", sans-serif}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{font-family:var(--font-body);background:var(--bg-base);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden}button{font-family:var(--font-body);cursor:pointer;color:inherit;background:0 0;border:none;outline:none}input{font-family:var(--font-body);color:inherit}input:focus{outline:none}a{color:inherit;text-decoration:none}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:var(--r-full)}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInScale{0%{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}@keyframes slideInRight{0%{opacity:0;transform:translate(24px)}to{opacity:1;transform:translate(0)}}@keyframes slideInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse-ring{0%{opacity:.6;transform:scale(1)}to{opacity:0;transform:scale(1.6)}}@keyframes shimmer{0%{background-position:-200%}to{background-position:200%}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes toastIn{0%{opacity:0;transform:translate(24px)}to{opacity:1;transform:translate(0)}}@keyframes toastOut{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(24px)}}@keyframes peerJoin{0%{opacity:0;transform:scale(.88)}to{opacity:1;transform:scale(1)}}.landing{justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:relative;overflow:hidden}.landing__bg{pointer-events:none;position:absolute;inset:0;overflow:hidden}.landing__orb{filter:blur(80px);opacity:.18;border-radius:50%;animation:12s ease-in-out infinite alternate floatOrb;position:absolute}.landing__orb--1{background:radial-gradient(circle,#4ade80,#0000 70%);width:500px;height:500px;animation-delay:0s;top:-150px;left:-100px}.landing__orb--2{background:radial-gradient(circle,#60a5fa,#0000 70%);width:400px;height:400px;animation-delay:-4s;bottom:-120px;right:-80px}.landing__orb--3{opacity:.1;background:radial-gradient(circle,#a78bfa,#0000 70%);width:300px;height:300px;animation-delay:-8s;top:40%;left:50%;transform:translate(-50%,-50%)}@keyframes floatOrb{0%{transform:translate(0)scale(1)}to{transform:translate(20px,30px)scale(1.08)}}.landing__orb--3 from{transform:translate(-50%,-50%)scale(1)}.landing__orb--3 to{transform:translate(calc(15px - 50%),calc(-50% - 20px))scale(1.05)}.landing__content{z-index:1;flex-direction:column;align-items:center;gap:32px;width:100%;max-width:420px;padding:24px;animation:.5s both fadeIn;display:flex;position:relative}.landing__brand{align-items:center;gap:10px;display:flex}.landing__logo{background:var(--accent-dim);border-radius:var(--r-md);width:36px;height:36px;color:var(--accent);border:1px solid #4ade8033;justify-content:center;align-items:center;display:flex}.landing__wordmark{font-family:var(--font-display);letter-spacing:-.04em;color:var(--text-primary);font-size:20px;font-weight:700}.landing__hero{text-align:center}.landing__greeting{font-family:var(--font-display);letter-spacing:-.03em;color:var(--text-primary);margin-bottom:10px;font-size:clamp(28px,5vw,40px);font-weight:700;line-height:1.1}.landing__sub{color:var(--text-secondary);font-size:15px;line-height:1.5}.landing__card{background:var(--bg-card);border:1px solid var(--border-default);border-radius:var(--r-xl);width:100%;box-shadow:var(--shadow-lg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);padding:28px}.landing__actions{flex-direction:column;gap:12px;animation:.3s both fadeInScale;display:flex}.landing__or{color:var(--text-muted);align-items:center;gap:12px;font-size:12px;display:flex}.landing__or:before,.landing__or:after{content:"";background:var(--border-subtle);flex:1;height:1px}.landing__btn{border-radius:var(--r-lg);transition:transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), opacity var(--t-fast);justify-content:center;align-items:center;gap:8px;width:100%;padding:13px 20px;font-size:15px;font-weight:600;display:flex}.landing__btn:active{transform:scale(.98)}.landing__btn:disabled{opacity:.5;pointer-events:none}.landing__btn--primary{background:var(--accent);color:var(--bg-void);box-shadow:0 0 0 0 var(--accent-glow)}.landing__btn--primary:hover{background:var(--accent-dark);box-shadow:0 4px 20px var(--accent-glow);transform:translateY(-1px)}.landing__btn--secondary{background:var(--bg-elevated);color:var(--text-primary);border:1px solid var(--border-default)}.landing__btn--secondary:hover{background:var(--bg-hover);border-color:var(--border-strong);transform:translateY(-1px)}.landing__btn--sm{width:auto;padding:10px 18px;font-size:14px}.landing__form{flex-direction:column;gap:16px;animation:.3s both fadeInScale;display:flex}.landing__form-label{color:var(--text-secondary);font-size:14px;font-weight:500}.landing__input{background:var(--bg-elevated);border:1px solid var(--border-default);border-radius:var(--r-lg);width:100%;color:var(--text-primary);transition:border-color var(--t-fast), box-shadow var(--t-fast);padding:12px 16px;font-size:15px}.landing__input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}.landing__input::placeholder{color:var(--text-muted)}.landing__otp{justify-content:center;gap:10px;display:flex}.landing__otp-box{text-align:center;background:var(--bg-elevated);border:1.5px solid var(--border-default);border-radius:var(--r-md);width:52px;height:58px;font-family:var(--font-display);letter-spacing:.05em;color:var(--text-primary);text-transform:uppercase;transition:border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-spring);font-size:22px;font-weight:700}.landing__otp-box:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim);outline:none;transform:scale(1.05)}.landing__otp-box:not(:placeholder-shown){border-color:var(--border-strong);color:var(--accent)}@media (width<=380px){.landing__otp-box{width:44px;height:50px;font-size:18px}}.landing__form-row{justify-content:space-between;align-items:center;display:flex}.landing__link{color:var(--text-secondary);transition:color var(--t-fast);font-size:13px}.landing__link:hover{color:var(--text-primary)}.landing__error{color:var(--danger);text-align:center;font-size:13px;animation:.2s both fadeIn}.landing__footer{color:var(--text-muted);align-items:center;gap:5px;font-size:11px;display:flex}.landing__spinner{border:2px solid #0003;border-top-color:var(--bg-void);border-radius:50%;width:16px;height:16px;animation:.7s linear infinite spin;display:inline-block}.control-bar{background:var(--bg-card);border:1px solid var(--border-default);border-radius:var(--r-full);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);width:min(760px,100vw - 32px);box-shadow:var(--shadow-lg);animation:slideInUp .4s var(--t-spring) both;z-index:50;justify-content:space-between;align-items:center;gap:12px;padding:10px 16px;display:flex;position:absolute;bottom:24px;left:50%;transform:translate(-50%)}.control-bar__room{flex-shrink:0;align-items:center;gap:8px;min-width:0;display:flex}.control-bar__room-code{font-family:var(--font-display);letter-spacing:.12em;color:var(--text-secondary);text-transform:uppercase;font-size:13px;font-weight:600}.control-bar__copy{background:var(--bg-glass);width:26px;height:26px;color:var(--text-secondary);transition:background var(--t-fast), color var(--t-fast);border-radius:50%;justify-content:center;align-items:center;display:flex}.control-bar__copy:hover{background:var(--bg-glass-md);color:var(--text-primary)}.control-bar__e2ee{color:var(--accent);background:var(--accent-dim);border-radius:var(--r-full);letter-spacing:.04em;align-items:center;gap:4px;padding:3px 8px;font-size:10px;font-weight:600;display:flex}.control-bar__center{flex-shrink:0;align-items:center;gap:6px;display:flex}.control-bar__divider{background:var(--border-default);width:1px;height:28px;margin:0 4px}.control-bar__spacer{flex:1;min-width:80px}.control-btn{border-radius:var(--r-lg);background:var(--bg-glass);border:1px solid var(--border-subtle);color:var(--text-primary);transition:background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);white-space:nowrap;flex-direction:column;align-items:center;gap:2px;min-width:60px;padding:8px 12px;display:flex;position:relative}.control-btn:hover{background:var(--bg-glass-md);border-color:var(--border-default);transform:translateY(-1px)}.control-btn:active{transform:translateY(0)scale(.97)}.control-btn--muted{background:var(--danger-dim);color:var(--danger);border-color:#f8717133}.control-btn--muted:hover{background:#f871712e}.control-btn__label{color:var(--text-secondary);font-size:10px;font-weight:500;line-height:1}.control-btn--muted .control-btn__label{color:var(--danger);opacity:.8}.control-btn--leave{color:var(--danger);border-radius:var(--r-lg);background:#ef444426;border:1px solid #ef444440;flex-direction:column;align-items:center;gap:2px;min-width:60px;padding:8px 14px}.control-btn--leave:hover{background:#ef444440;border-color:#ef444466;transform:translateY(-1px)}.control-btn--leave .control-btn__label{color:var(--danger);opacity:.8;font-size:10px;font-weight:500}.control-btn__badge{background:var(--accent);min-width:16px;height:16px;color:var(--bg-void);border-radius:var(--r-full);justify-content:center;align-items:center;padding:0 4px;font-size:9px;font-weight:700;line-height:1;display:flex;position:absolute;top:4px;right:4px}@media (width<=500px){.control-bar{padding:8px 12px;bottom:16px}.control-btn__label,.control-bar__room-code,.control-bar__e2ee{display:none}.control-btn,.control-btn--leave{min-width:44px;padding:8px}}.video-tile{background:var(--bg-elevated);border-radius:var(--r-lg);aspect-ratio:16/9;border:1px solid var(--border-subtle);transition:border-color var(--t-base);position:relative;overflow:hidden}.video-tile:hover{border-color:var(--border-default)}.video-tile--enter{animation:peerJoin .4s var(--t-spring) both}.video-tile__avatar{background:radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--avatar-color,#4ade80) 18%, transparent), var(--bg-elevated));z-index:1;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.video-tile__initials{font-family:var(--font-display);color:var(--avatar-color,#4ade80);letter-spacing:-.02em;-webkit-user-select:none;user-select:none;font-size:clamp(24px,5vw,48px);font-weight:600}.video-tile__video{object-fit:cover;width:100%;height:100%;transition:opacity var(--t-base);display:block}.video-tile__video--hidden{opacity:0;pointer-events:none}.video-tile__label{z-index:2;color:#fff;background:linear-gradient(#0000 0%,#000000b3 100%);align-items:center;gap:6px;padding:28px 12px 10px;font-size:13px;font-weight:500;display:flex;position:absolute;bottom:0;left:0;right:0}.video-tile__mute-icon{width:14px;height:14px;color:var(--danger);flex-shrink:0}.local-video{aspect-ratio:16/9;background:var(--bg-card);border-radius:var(--r-lg);width:200px;transition:border-color var(--t-base), box-shadow var(--t-base);box-shadow:var(--shadow-lg);cursor:default;--avatar-color:#4ade80;border:2px solid #0000;position:relative;overflow:hidden}@media (width<=600px){.local-video{width:120px}}.local-video--speaking{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-glow), var(--shadow-lg)}.local-video__ring{border-radius:calc(var(--r-lg) + 6px);border:2px solid var(--accent);opacity:0;pointer-events:none;z-index:10;animation:1s ease-out infinite pulse-ring;position:absolute;inset:-6px}.local-video__avatar{background:radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--avatar-color) 18%, transparent), var(--bg-card));z-index:1;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.local-video__initials{font-family:var(--font-display);color:var(--avatar-color);letter-spacing:-.02em;-webkit-user-select:none;user-select:none;font-size:22px;font-weight:600}.local-video__video{object-fit:cover;width:100%;height:100%;transition:opacity var(--t-base);display:block;transform:scaleX(-1)}.local-video__video--hidden{opacity:0;pointer-events:none}.local-video__bar{z-index:3;background:linear-gradient(#0000,#000000bf);align-items:center;gap:5px;padding:14px 8px 6px;display:flex;position:absolute;bottom:0;left:0;right:0}.local-video__name{color:#ffffffd9;font-size:11px;font-weight:500}.local-video__mic{justify-content:center;align-items:center;width:16px;height:14px;display:flex}.local-video__mic svg{width:100%;height:100%;color:var(--danger)}.audio-bars{width:100%;height:100%;overflow:visible}.audio-bars rect{fill:var(--accent);transition:height 60ms linear,y 60ms linear}.pp-overlay{z-index:60;position:fixed;inset:0}.pp-panel{background:var(--bg-card);border-left:1px solid var(--border-default);width:300px;animation:slideInRight var(--t-slow) both;box-shadow:var(--shadow-xl);flex-direction:column;display:flex;position:absolute;top:0;bottom:0;right:0}@media (width<=400px){.pp-panel{width:100vw}}.pp-header{border-bottom:1px solid var(--border-subtle);justify-content:space-between;align-items:center;padding:20px 20px 16px;display:flex}.pp-header__left{align-items:center;gap:10px;display:flex}.pp-title{font-family:var(--font-display);color:var(--text-primary);font-size:16px;font-weight:600}.pp-count{border-radius:var(--r-full);background:var(--bg-hover);color:var(--text-secondary);padding:2px 8px;font-size:12px;font-weight:600}.pp-close{background:var(--bg-glass);width:32px;height:32px;color:var(--text-secondary);transition:background var(--t-fast), color var(--t-fast);border-radius:50%;justify-content:center;align-items:center;display:flex}.pp-close:hover{background:var(--bg-hover);color:var(--text-primary)}.pp-e2ee{background:var(--accent-dim);border-radius:var(--r-md);color:var(--accent);border:1px solid #4ade8026;align-items:center;gap:7px;margin:12px 16px;padding:9px 12px;font-size:11px;font-weight:500;display:flex}.pp-list{flex-direction:column;flex:1;gap:2px;padding:8px 12px;display:flex;overflow-y:auto}.pp-item{border-radius:var(--r-md);transition:background var(--t-fast);align-items:center;gap:12px;padding:10px 8px;animation:.3s both fadeIn;display:flex}.pp-item:hover{background:var(--bg-hover)}.pp-avatar{background:color-mix(in srgb, var(--c,#4ade80) 20%, var(--bg-elevated));width:36px;height:36px;color:var(--c,#4ade80);font-family:var(--font-display);-webkit-user-select:none;user-select:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:13px;font-weight:600;display:flex}.pp-info{flex:1;min-width:0}.pp-name{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;align-items:center;gap:6px;font-size:14px;font-weight:500;display:flex;overflow:hidden}.pp-you{color:var(--accent);background:var(--accent-dim);border-radius:var(--r-full);letter-spacing:.02em;padding:1px 6px;font-size:10px;font-weight:600}.pp-icons{flex-shrink:0;align-items:center;gap:6px;display:flex}.pp-icon{opacity:.5}.pp-icon--on{color:var(--text-secondary)}.pp-icon--off{color:var(--danger);opacity:.7}.toast-container{z-index:1000;pointer-events:none;flex-direction:column;gap:8px;display:flex;position:fixed;top:20px;right:20px}.toast{border-radius:var(--r-full);background:var(--bg-card);border:1px solid var(--border-default);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:var(--shadow-md);color:var(--text-primary);animation:toastIn var(--t-base) both;white-space:nowrap;align-items:center;gap:10px;padding:10px 16px;font-size:13px;font-weight:500;display:flex}.toast--exit{animation:toastOut var(--t-base) both}.toast__dot{border-radius:50%;flex-shrink:0;width:7px;height:7px}.toast--join .toast__dot{background:var(--accent)}.toast--leave .toast__dot{background:var(--text-muted)}.toast--info .toast__dot{background:var(--warning)}.toast--error .toast__dot{background:var(--danger)}.lobby{background:var(--bg-base);justify-content:center;align-items:center;width:100%;height:100%;padding:24px;display:flex;overflow:auto}.lobby__inner{align-items:flex-start;gap:28px;width:100%;max-width:860px;animation:.4s both fadeIn;display:flex}@media (width<=640px){.lobby__inner{flex-direction:column;align-items:stretch}}.lobby__preview{flex:1;min-width:0}.lobby__cam-box{aspect-ratio:16/9;background:var(--bg-elevated);border-radius:var(--r-xl);border:1px solid var(--border-default);position:relative;overflow:hidden}.lobby__cam-box--off .lobby__video{opacity:0}.lobby__cam-off{color:var(--text-secondary);z-index:1;flex-direction:column;justify-content:center;align-items:center;gap:10px;font-size:14px;display:flex;position:absolute;inset:0}.lobby__cam-off-icon{opacity:.4}.lobby__video{object-fit:cover;width:100%;height:100%;transition:opacity var(--t-base);display:block;transform:scaleX(-1)}.lobby__preview-controls{z-index:2;gap:10px;display:flex;position:absolute;bottom:16px;left:50%;transform:translate(-50%)}.lobby__ctrl{width:44px;height:44px;color:var(--text-primary);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background var(--t-fast), border-color var(--t-fast), transform var(--t-spring);background:#0000008c;border:1px solid #ffffff1f;border-radius:50%;justify-content:center;align-items:center;display:flex}.lobby__ctrl:hover{background:#000000bf;transform:scale(1.06)}.lobby__ctrl--off{background:var(--danger-dim);color:var(--danger);border-color:#f871714d}.lobby__perm-error{background:var(--danger-dim);border-radius:var(--r-md);color:var(--danger);border:1px solid #f8717133;align-items:center;gap:8px;margin-top:12px;padding:10px 14px;font-size:13px;display:flex}.lobby__panel{flex-direction:column;flex-shrink:0;gap:20px;width:280px;display:flex}@media (width<=640px){.lobby__panel{width:100%}}.lobby__room-info{flex-direction:column;gap:6px;display:flex}.lobby__room-label{text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);font-size:11px;font-weight:600}.lobby__room-id{font-family:var(--font-display);letter-spacing:.1em;color:var(--text-primary);font-size:28px;font-weight:700}.lobby__e2ee-badge{background:var(--accent-dim);border-radius:var(--r-full);color:var(--accent);border:1px solid #4ade8026;align-items:center;gap:5px;width:fit-content;padding:3px 10px;font-size:11px;font-weight:600;display:inline-flex}.lobby__name-info{flex-direction:column;gap:4px;display:flex}.lobby__name-label{text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);font-size:11px;font-weight:600}.lobby__name-value{color:var(--text-primary);font-size:17px;font-weight:600}.lobby__join-btn{background:var(--accent);color:var(--bg-void);border-radius:var(--r-lg);transition:background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);box-shadow:0 0 0 0 var(--accent-glow);justify-content:center;align-items:center;gap:8px;padding:14px;font-size:15px;font-weight:700;display:flex}.lobby__join-btn:hover{background:var(--accent-dark);box-shadow:0 4px 20px var(--accent-glow);transform:translateY(-1px)}.lobby__join-btn:active{transform:scale(.98)}.lobby__join-btn:disabled{opacity:.45;pointer-events:none}.lobby__back-btn{text-align:center;color:var(--text-secondary);transition:color var(--t-fast);padding:6px;font-size:13px}.lobby__back-btn:hover{color:var(--text-primary)}.meeting-loader{background:var(--bg-base);flex-direction:column;justify-content:center;align-items:center;gap:16px;width:100%;height:100%;animation:.3s both fadeIn;display:flex}.meeting-loader__spinner{border:3px solid var(--border-default);border-top-color:var(--accent);border-radius:50%;width:40px;height:40px;animation:.8s linear infinite spin}.meeting-loader__msg{color:var(--text-secondary);font-size:15px;font-weight:500}.meeting-loader__msg--error{color:var(--danger)}.meeting{background:var(--bg-void);width:100%;height:100%;position:relative;overflow:hidden}.meeting__grid{place-content:center;gap:10px;padding:16px;display:grid;position:absolute;inset:0 0 100px}.meeting__grid--0,.meeting__grid--1{grid-template-columns:1fr;max-width:860px;margin:auto}.meeting__grid--2,.meeting__grid--3,.meeting__grid--4{grid-template-columns:repeat(2,1fr)}.meeting__grid--5,.meeting__grid--6{grid-template-columns:repeat(3,1fr)}@media (width<=600px){.meeting__grid--2,.meeting__grid--3,.meeting__grid--4,.meeting__grid--5,.meeting__grid--6{grid-template-columns:1fr}}.meeting__empty{text-align:center;flex-direction:column;grid-column:1/-1;justify-content:center;align-items:center;gap:12px;padding:60px 24px;animation:.5s both fadeIn;display:flex}.meeting__empty-icon{background:var(--accent-dim);width:56px;height:56px;color:var(--accent);border:1px solid #4ade8026;border-radius:50%;justify-content:center;align-items:center;margin-bottom:4px;display:flex}.meeting__empty-title{font-family:var(--font-display);color:var(--text-primary);font-size:20px;font-weight:600}.meeting__empty-sub{color:var(--text-secondary);font-size:14px;line-height:1.6}.meeting__empty-sub strong{color:var(--accent);font-family:var(--font-display);letter-spacing:.08em}.meeting__local{z-index:40;filter:drop-shadow(0 4px 20px #0009);transition:transform var(--t-base);position:absolute;bottom:96px;right:20px}.meeting__local:hover{transform:scale(1.03)}@media (width<=500px){.meeting__local{bottom:88px;right:12px}}