: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{--bg-color: #050505;--glass-bg: rgba(255, 255, 255, .03);--glass-border: rgba(255, 255, 255, .1);--primary-gradient: linear-gradient(135deg, #FF2E93, #6B3DFA);--text-primary: #ffffff;--text-secondary: #a1a1aa;--neon-glow: 0 0 20px rgba(107, 61, 250, .5)}html,body{width:100%;overflow-x:hidden;margin:0;padding:0}body{margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;background-color:var(--bg-color);color:var(--text-primary);overflow-x:hidden;display:flex;justify-content:center;min-height:100vh}.landing-container{min-height:100vh;width:100vw;display:flex;justify-content:center;align-items:center;position:relative;overflow:hidden}.blob{position:absolute;border-radius:50%;filter:blur(80px);z-index:0;opacity:.6;animation:float 10s infinite ease-in-out}.blob-1{width:400px;height:400px;background:#6b3dfa;top:-100px;left:-100px}.blob-2{width:300px;height:300px;background:#ff2e93;bottom:-50px;right:-50px;animation-delay:-5s}@keyframes float{0%,to{transform:translate(0)}50%{transform:translate(30px,50px)}}.content-wrapper{z-index:10;display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:100%;max-width:1100px;padding:40px;gap:60px}.hero-text{flex:1;text-align:left}.hero-title{font-size:4.5rem;font-weight:800;line-height:1.1;margin-bottom:1.5rem;background:linear-gradient(to right,#fff,#a5a5a5);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.hero-subtitle{font-size:1.2rem;color:var(--text-secondary);margin-bottom:2rem;line-height:1.6;max-width:500px}.equalizer{display:flex;gap:6px;height:40px;align-items:flex-end;margin-bottom:20px}.bar{width:8px;background:var(--primary-gradient);animation:bounce 1s infinite ease-in-out;border-radius:4px}.bar:nth-child(1){height:20px;animation-delay:.1s}.bar:nth-child(2){height:40px;animation-delay:.2s}.bar:nth-child(3){height:30px;animation-delay:.3s}.bar:nth-child(4){height:50px;animation-delay:.1s}.bar:nth-child(5){height:25px;animation-delay:.4s}@keyframes bounce{0%,to{transform:scaleY(1)}50%{transform:scaleY(1.5)}}.join-card{flex:0 0 400px;background:var(--glass-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--glass-border);padding:40px;border-radius:24px;box-shadow:0 25px 50px -12px #00000080;transition:transform .3s ease}.join-card:hover{transform:translateY(-5px);border-color:#fff3}.card-header{font-size:1.5rem;font-weight:700;margin-bottom:30px;text-align:center}.cta-button{width:100%;padding:16px;border:none;border-radius:12px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden}.btn-gradient{background:var(--primary-gradient);color:#fff;box-shadow:0 4px 15px #ff2e934d}.btn-gradient:hover{box-shadow:0 0 25px #ff2e9399;transform:scale(1.02)}.divider{display:flex;align-items:center;margin:25px 0;color:var(--text-secondary);font-size:.85rem;text-transform:uppercase;letter-spacing:1px}.divider:before,.divider:after{content:"";flex:1;height:1px;background:var(--glass-border)}.divider span{padding:0 15px}.input-code{width:100%;padding:16px;background:#0000004d;border:1px solid var(--glass-border);border-radius:12px;color:#fff;font-size:1rem;text-align:center;letter-spacing:2px;margin-bottom:15px;outline:none;transition:all .3s;text-transform:uppercase}.input-code:focus{border-color:#6b3dfa;box-shadow:0 0 0 2px #6b3dfa4d}.btn-outline{background:transparent;border:1px solid rgba(255,255,255,.2);color:#fff}.btn-outline:hover{background:#ffffff1a;border-color:#fff}@media(max-width:900px){.content-wrapper{flex-direction:column;text-align:center;padding:20px}.hero-text{margin-bottom:40px;display:flex;flex-direction:column;align-items:center}.hero-title{font-size:3rem}.join-card{width:100%;max-width:100%}}.loading-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#050505f2;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);z-index:1000;display:flex;justify-content:center;align-items:center;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.loading-content{text-align:center;animation:slideUp .5s ease}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.loading-spinner{position:relative;width:120px;height:120px;margin:0 auto 30px}.spinner-ring{position:absolute;width:100%;height:100%;border-radius:50%;border:3px solid transparent;border-top-color:#ff2e93;border-right-color:#6b3dfa;animation:spin 1.5s cubic-bezier(.68,-.55,.265,1.55) infinite}.spinner-ring:nth-child(2){width:85%;height:85%;top:7.5%;left:7.5%;border-top-color:#6b3dfa;border-right-color:#ff2e93;animation-delay:-.4s;animation-duration:2s}.spinner-ring:nth-child(3){width:70%;height:70%;top:15%;left:15%;border-top-color:#00d9ff;border-right-color:#ff2e93;animation-delay:-.8s;animation-duration:2.5s}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-title{font-size:2rem;font-weight:700;margin-bottom:12px;background:var(--primary-gradient);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:pulse 2s ease-in-out infinite}.loading-subtitle{font-size:1.1rem;color:var(--text-secondary);animation:pulse 2s ease-in-out infinite;animation-delay:.5s}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}.room-container{width:100%;max-height:auto;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:20px 50px;margin-top:20px;margin-bottom:20px;border-radius:5%;background:linear-gradient(135deg,#4f46e514,#00d9ff0f)}.room-header{width:100%;max-width:1100px;display:flex;justify-content:space-between;align-items:center;padding:15px 25px;margin-bottom:25px;background:#4f46e514;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(0,217,255,.25);border-radius:16px;transition:all .3s ease;box-shadow:0 8px 32px #00d9ff26}.room-header:hover{background:#4f46e51f;border-color:#00d9ff66;box-shadow:0 12px 48px #00d9ff40}.room-title{font-size:1.2rem;font-weight:700;color:#fff;display:flex;align-items:center;gap:10px}.badge{background:#4f46e533;color:#00d9ff;padding:4px 12px;border-radius:6px;font-family:monospace;font-size:.9rem;border:1px solid rgba(0,217,255,.4);box-shadow:0 0 12px #00d9ff40;transition:all .3s ease}.badge:hover{background:#4f46e54d;box-shadow:0 0 20px #00d9ff66}.status-dot{font-size:.8rem;margin-left:10px}.btn-leave{background:#ff3b3b1a;color:#ff6b6b;border:1px solid rgba(255,59,59,.2);padding:8px 16px;border-radius:8px;cursor:pointer;font-weight:600;transition:all .2s}.btn-leave:hover{background:#ff3b3b33;transform:translateY(-1px)}.player-wrapper{width:100%;max-width:87.5rem;aspect-ratio:16 / 9;background:#000;border-radius:16px;overflow:hidden;box-shadow:0 20px 50px #4f46e540,0 0 40px #00d9ff26;border:1px solid rgba(0,217,255,.3);margin-bottom:30px;position:relative;transition:all .3s ease}.player-wrapper>div,.player-wrapper>div>div{width:100%!important;height:100%!important}.player-wrapper iframe{width:100%!important;height:100%!important;border:none!important;display:block!important}.player-wrapper:hover{box-shadow:0 25px 60px #4f46e559,0 0 50px #00d9ff40;border-color:#00d9ff80}.search-container{width:100%;max-width:900px;background:#4f46e50f;border:1px solid rgba(0,217,255,.25);border-radius:16px;padding:20px;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);transition:all .3s ease;box-shadow:0 8px 32px #00d9ff1f}.search-container:hover{background:#4f46e51a;border-color:#00d9ff66;box-shadow:0 12px 48px #00d9ff33}.input-group{display:flex;gap:10px;width:100%}.search-input-wrapper{position:relative;flex:1;max-width:22rem}.search-input{width:100%;background:#0000004d;border:1px solid rgba(0,217,255,.2);color:#fff;padding:12px 12px 12px 45px;border-radius:10px;font-size:1rem;outline:none;transition:all .3s ease}.search-input:focus{border-color:#00d9ff;background:#00d9ff14;box-shadow:0 0 15px #00d9ff66}.btn-search{background:linear-gradient(135deg,#4f46e5,#00d9ff);color:#fff;border:none;padding:0 25px;border-radius:10px;font-weight:600;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden;margin-left:15%}.btn-search:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:#fff3;transition:left .5s ease}.btn-search:hover:before{left:100%}.btn-search:hover{box-shadow:0 0 25px #4f46e599,0 0 45px #00d9ff66;transform:translateY(-2px)}.btn-search:disabled{background:#333;cursor:not-allowed;box-shadow:none}.results-list{margin-top:20px;display:flex;flex-direction:column;gap:12px}.result-item{display:flex;gap:15px;padding:12px;background:#4f46e514;border-radius:10px;cursor:pointer;transition:all .3s ease;border:1px solid rgba(0,217,255,.15)}.result-item:hover{background:#4f46e526;border-color:#00d9ff59;transform:translate(5px);box-shadow:0 8px 20px #00d9ff40}.thumb-img{width:120px;height:68px;border-radius:6px;object-fit:cover;transition:all .3s ease;box-shadow:0 4px 12px #0000004d}.result-item:hover .thumb-img{transform:scale(1.05);box-shadow:0 6px 16px #00d9ff4d}.result-info{display:flex;flex-direction:column;justify-content:center;text-align:left}.result-title{font-size:1rem;font-weight:600;color:#fff;margin:0 0 5px}.result-meta{font-size:.85rem;color:#888;margin:0}
