@font-face{font-family:__Inter_e8ce0c;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/55c55f0601d81cf3-s.woff2) format("woff2");unicode-range:u+0460-052f,u+1c80-1c8a,u+20b4,u+2de0-2dff,u+a640-a69f,u+fe2e-fe2f}@font-face{font-family:__Inter_e8ce0c;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/26a46d62cd723877-s.woff2) format("woff2");unicode-range:u+0301,u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116}@font-face{font-family:__Inter_e8ce0c;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/97e0cb1ae144a2a9-s.woff2) format("woff2");unicode-range:u+1f??}@font-face{font-family:__Inter_e8ce0c;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/581909926a08bbc8-s.woff2) format("woff2");unicode-range:u+0370-0377,u+037a-037f,u+0384-038a,u+038c,u+038e-03a1,u+03a3-03ff}@font-face{font-family:__Inter_e8ce0c;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/df0a9ae256c0569c-s.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+0300-0301,u+0303-0304,u+0308-0309,u+0323,u+0329,u+1ea0-1ef9,u+20ab}@font-face{font-family:__Inter_e8ce0c;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/8e9860b6e62d6359-s.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:__Inter_e8ce0c;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/e4af272ccee01ff0-s.p.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-family:__Inter_Fallback_e8ce0c;src:local("Arial");ascent-override:90.49%;descent-override:22.56%;line-gap-override:0.00%;size-adjust:107.06%}.__className_e8ce0c{font-family:__Inter_e8ce0c,__Inter_Fallback_e8ce0c;font-style:normal}*{box-sizing:border-box;padding:0;margin:0}body,html{max-width:100vw;overflow-x:hidden;background:#000;min-height:100vh;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;color:#fff}body{align-items:center;justify-content:center}.app-container,body{display:flex;min-height:100vh}.app-container{width:100%;background:#000;position:relative}.sidebar{width:300px;padding:2rem;background:rgba(0,0,0,.8);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-right:1px solid rgba(255,69,0,.2);display:flex;flex-direction:column;gap:2rem}.logo{position:relative}.logo h1{font-size:2.5rem;font-weight:900;background:linear-gradient(45deg,#ff4500,red,#ff4500);background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradientShift 3s ease-in-out infinite;letter-spacing:-.02em}.logo-accent{width:60px;height:4px;background:linear-gradient(90deg,#ff4500,red);margin-top:.5rem;border-radius:2px;animation:pulse 2s ease-in-out infinite}@keyframes gradientShift{0%,to{background-position:0 50%}50%{background-position:100% 50%}}@keyframes pulse{0%,to{opacity:1;transform:scaleX(1)}50%{opacity:.7;transform:scaleX(1.1)}}.status-card{display:flex;align-items:center;gap:.75rem;padding:1rem;background:hsla(0,0%,100%,.05);border:1px solid rgba(255,69,0,.2);border-radius:12px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.status-indicator{width:8px;height:8px;background:#ff4500;border-radius:50%;animation:statusPulse 2s ease-in-out infinite}@keyframes statusPulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.2)}}.status-text{font-size:.9rem;color:hsla(0,0%,100%,.8);font-weight:500}.main-content{flex:1 1;padding:2rem;gap:2rem;overflow-y:auto}.controls-section,.main-content{display:flex;flex-direction:column}.controls-section{gap:1.5rem}.start-section{display:flex;justify-content:center;align-items:center;min-height:200px}.start-btn{position:relative;padding:1.5rem 3rem;background:linear-gradient(45deg,#ff4500,red);border:none;border-radius:16px;color:#fff;font-size:1.2rem;font-weight:700;cursor:pointer;overflow:hidden;transition:all .4s cubic-bezier(.175,.885,.32,1.275);text-transform:uppercase;letter-spacing:.05em;transform-style:preserve-3d}.start-btn:hover{transform:translateY(-8px) rotateX(15deg) rotateY(5deg) scale(1.05);box-shadow:0 25px 50px rgba(255,69,0,.4),0 0 30px rgba(255,69,0,.6);animation:startBtnSpin .6s ease-in-out}.start-btn:active{transform:translateY(-4px) rotateX(8deg) scale(.98);animation:startBtnBounce .3s ease-in-out}@keyframes startBtnSpin{0%{transform:translateY(-8px) rotateX(15deg) rotateY(5deg) scale(1.05)}25%{transform:translateY(-12px) rotateX(25deg) rotateY(15deg) scale(1.1)}50%{transform:translateY(-8px) rotateX(15deg) rotateY(-5deg) scale(1.05)}75%{transform:translateY(-12px) rotateX(5deg) rotateY(-15deg) scale(1.1)}to{transform:translateY(-8px) rotateX(15deg) rotateY(5deg) scale(1.05)}}@keyframes startBtnBounce{0%{transform:translateY(-4px) rotateX(8deg) scale(.98)}50%{transform:translateY(-2px) rotateX(4deg) scale(1.02)}to{transform:translateY(-4px) rotateX(8deg) scale(.98)}}.btn-glow{position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.3),transparent);transition:left .5s ease}.start-btn:hover .btn-glow{left:100%}.controls-grid{display:flex;flex-direction:column;gap:2rem}.room-section{background:hsla(0,0%,100%,.03);border:1px solid rgba(255,69,0,.1);border-radius:16px;padding:1.5rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.input-group{display:flex;gap:1rem;flex-wrap:wrap}.name-input,.room-input{flex:1 1;min-width:200px;padding:1rem;background:rgba(0,0,0,.5);border:1px solid rgba(255,69,0,.3);border-radius:12px;color:#fff;font-size:1rem;transition:all .3s ease}.name-input:focus,.room-input:focus{outline:none;border-color:#ff4500;box-shadow:0 0 20px rgba(255,69,0,.3);background:rgba(0,0,0,.7)}.name-input::placeholder,.room-input::placeholder{color:hsla(0,0%,100%,.5)}.join-btn{position:relative;padding:1rem 2rem;background:linear-gradient(45deg,#ff4500,red);border:none;border-radius:12px;color:#fff;font-weight:600;cursor:pointer;overflow:hidden;transition:all .4s cubic-bezier(.175,.885,.32,1.275);min-width:120px;transform-style:preserve-3d}.join-btn:hover:not(:disabled){transform:translateY(-6px) rotateX(15deg) rotateY(5deg) scale(1.05);box-shadow:0 15px 35px rgba(255,69,0,.4),0 0 20px rgba(255,69,0,.6);animation:joinBtnWiggle .6s ease-in-out}.join-btn:active:not(:disabled){transform:translateY(-3px) rotateX(8deg) scale(.98);animation:joinBtnSquash .2s ease-in-out}.join-btn:disabled{opacity:.5;cursor:not-allowed}.join-btn.active{background:linear-gradient(45deg,#0f0,#0c0);animation:activePulse 2s ease-in-out infinite}@keyframes joinBtnWiggle{0%{transform:translateY(-6px) rotateX(15deg) rotateY(5deg) scale(1.05)}25%{transform:translateY(-8px) rotateX(20deg) rotateY(10deg) scale(1.08) rotate(2deg)}50%{transform:translateY(-6px) rotateX(15deg) rotateY(-5deg) scale(1.05) rotate(-2deg)}75%{transform:translateY(-8px) rotateX(10deg) rotateY(-10deg) scale(1.08) rotate(1deg)}to{transform:translateY(-6px) rotateX(15deg) rotateY(5deg) scale(1.05)}}@keyframes joinBtnSquash{0%{transform:translateY(-3px) rotateX(8deg) scale(.98)}50%{transform:translateY(-1px) rotateX(4deg) scale(.95)}to{transform:translateY(-3px) rotateX(8deg) scale(.98)}}@keyframes activePulse{0%,to{box-shadow:0 15px 35px rgba(0,255,0,.4),0 0 20px rgba(0,255,0,.6)}50%{box-shadow:0 20px 45px rgba(0,255,0,.6),0 0 30px rgba(0,255,0,.8)}}.btn-particles{position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle,hsla(0,0%,100%,.1) 1px,transparent 0);background-size:20px 20px;opacity:0;transition:opacity .3s ease}.join-btn:hover .btn-particles{opacity:1;animation:particleFloat 2s ease-in-out infinite}@keyframes particleFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.action-buttons{display:flex;gap:1rem;flex-wrap:wrap}.action-btn{position:relative;width:60px;height:60px;border:none;border-radius:16px;cursor:pointer;overflow:hidden;transition:all .4s cubic-bezier(.175,.885,.32,1.275);display:flex;align-items:center;justify-content:center;font-size:1.5rem;transform-style:preserve-3d}.mute-btn{background:linear-gradient(45deg,#ff4500,red)}.mute-btn.muted{background:linear-gradient(45deg,red,#c00)}.share-btn{background:linear-gradient(45deg,#06f,#04c)}.share-btn.sharring{background:linear-gradient(45deg,#f60,#f40)}.leave-btn{background:linear-gradient(45deg,#666,#444)}.action-btn:hover{transform:translateY(-8px) rotateX(20deg) rotateY(10deg) scale(1.1);box-shadow:0 20px 40px rgba(0,0,0,.4),0 0 25px rgba(255,69,0,.5);animation:actionBtnFlip .8s ease-in-out}.mute-btn:hover{animation:muteBtnSpin .6s ease-in-out}.share-btn:hover{animation:shareBtnFlip .7s ease-in-out}.leave-btn:hover{animation:leaveBtnShake .5s ease-in-out}@keyframes actionBtnFlip{0%{transform:translateY(-8px) rotateX(20deg) rotateY(10deg) scale(1.1)}25%{transform:translateY(-12px) rotateX(40deg) rotateY(20deg) scale(1.15)}50%{transform:translateY(-8px) rotateX(20deg) rotateY(-10deg) scale(1.1)}75%{transform:translateY(-12px) rotateX(0deg) rotateY(-20deg) scale(1.15)}to{transform:translateY(-8px) rotateX(20deg) rotateY(10deg) scale(1.1)}}@keyframes muteBtnSpin{0%{transform:translateY(-8px) rotateX(20deg) rotateY(10deg) scale(1.1) rotate(0deg)}25%{transform:translateY(-12px) rotateX(40deg) rotateY(20deg) scale(1.15) rotate(90deg)}50%{transform:translateY(-8px) rotateX(20deg) rotateY(-10deg) scale(1.1) rotate(180deg)}75%{transform:translateY(-12px) rotateX(0deg) rotateY(-20deg) scale(1.15) rotate(270deg)}to{transform:translateY(-8px) rotateX(20deg) rotateY(10deg) scale(1.1) rotate(1turn)}}@keyframes shareBtnFlip{0%{transform:translateY(-8px) rotateX(20deg) rotateY(10deg) scale(1.1)}25%{transform:translateY(-12px) rotateX(180deg) rotateY(20deg) scale(1.15)}50%{transform:translateY(-8px) rotateX(1turn) rotateY(-10deg) scale(1.1)}75%{transform:translateY(-12px) rotateX(540deg) rotateY(-20deg) scale(1.15)}to{transform:translateY(-8px) rotateX(2turn) rotateY(10deg) scale(1.1)}}@keyframes leaveBtnShake{0%,to{transform:translateY(-8px) rotateX(20deg) rotateY(10deg) scale(1.1)}10%{transform:translateY(-8px) rotateX(25deg) rotateY(15deg) scale(1.1) translateX(-2px)}20%{transform:translateY(-8px) rotateX(15deg) rotateY(5deg) scale(1.1) translateX(2px)}30%{transform:translateY(-8px) rotateX(25deg) rotateY(15deg) scale(1.1) translateX(-2px)}40%{transform:translateY(-8px) rotateX(15deg) rotateY(5deg) scale(1.1) translateX(2px)}50%{transform:translateY(-8px) rotateX(20deg) rotateY(10deg) scale(1.1)}}.btn-ripple{position:absolute;top:50%;left:50%;width:0;height:0;background:hsla(0,0%,100%,.3);border-radius:50%;transform:translate(-50%,-50%);transition:all .6s ease}.action-btn:active .btn-ripple{width:100px;height:100px}.stop-section{display:flex;justify-content:center}.stop-btn{position:relative;padding:1rem 2rem;background:linear-gradient(45deg,red,#c00);border:none;border-radius:12px;color:#fff;font-weight:600;cursor:pointer;overflow:hidden;transition:all .4s cubic-bezier(.175,.885,.32,1.275);transform-style:preserve-3d}.stop-btn:hover{transform:translateY(-6px) rotateX(15deg) rotateY(5deg) scale(1.05);box-shadow:0 15px 35px rgba(255,0,0,.4),0 0 20px rgba(255,0,0,.6);animation:stopBtnDanger .8s ease-in-out}.stop-btn:active{transform:translateY(-3px) rotateX(8deg) scale(.98);animation:stopBtnCrush .3s ease-in-out}@keyframes stopBtnDanger{0%{transform:translateY(-6px) rotateX(15deg) rotateY(5deg) scale(1.05)}25%{transform:translateY(-8px) rotateX(30deg) rotateY(15deg) scale(1.1) rotate(5deg)}50%{transform:translateY(-6px) rotateX(15deg) rotateY(-5deg) scale(1.05) rotate(-5deg)}75%{transform:translateY(-8px) rotateX(0deg) rotateY(-15deg) scale(1.1) rotate(3deg)}to{transform:translateY(-6px) rotateX(15deg) rotateY(5deg) scale(1.05)}}@keyframes stopBtnCrush{0%{transform:translateY(-3px) rotateX(8deg) scale(.98)}50%{transform:translateY(-1px) rotateX(4deg) scale(.92)}to{transform:translateY(-3px) rotateX(8deg) scale(.98)}}.participants-section{background:hsla(0,0%,100%,.03);border:1px solid rgba(255,69,0,.1);border-radius:16px;padding:1.5rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.section-title{font-size:1.2rem;font-weight:700;margin-bottom:1rem;color:#ff4500;text-transform:uppercase;letter-spacing:.05em}.participants-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));grid-gap:1rem;gap:1rem}.participant-card{display:flex;align-items:center;gap:1rem;padding:1rem;background:rgba(0,0,0,.5);border:1px solid rgba(255,69,0,.2);border-radius:12px;transition:all .3s ease}.participant-card:hover{transform:translateY(-2px);border-color:#ff4500;box-shadow:0 10px 30px rgba(255,69,0,.2)}.participant-avatar{width:40px;height:40px;background:linear-gradient(45deg,#ff4500,red);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:1.2rem}.participant-info{display:flex;flex-direction:column;gap:.25rem}.participant-name{font-weight:600;color:#fff}.you-badge{font-size:.8rem;color:#ff4500;font-weight:700;text-transform:uppercase;letter-spacing:.05em}.video-section{background:hsla(0,0%,100%,.03);border:1px solid rgba(255,69,0,.1);border-radius:16px;padding:1.5rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.video-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));grid-gap:1.5rem;gap:1.5rem}.video-card{position:relative;background:rgba(0,0,0,.8);border-radius:12px;overflow:hidden;aspect-ratio:16/9;border:1px solid rgba(255,69,0,.2);transition:all .3s ease}.video-card:hover{transform:translateY(-5px);border-color:#ff4500;box-shadow:0 20px 40px rgba(255,69,0,.3)}.video-card video{width:100%;height:100%;object-fit:contain;background:#000}.video-overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,.8));padding:1rem}.video-label{color:#fff;font-weight:600;font-size:.9rem}@media (max-width:768px){.app-container{flex-direction:column}.sidebar{width:100%;border-right:none;border-bottom:1px solid rgba(255,69,0,.2)}.main-content,.sidebar{padding:1rem}.input-group{flex-direction:column}.name-input,.room-input{min-width:auto}.action-buttons{justify-content:center}.participants-grid,.video-grid{grid-template-columns:1fr}}@media (max-width:480px){.logo h1{font-size:2rem}.action-btn{width:50px;height:50px;font-size:1.2rem}.start-btn{padding:1rem 2rem;font-size:1rem}}