:root{--bg-dark: hsl(222, 47%, 6%);--bg-card: hsla(222, 47%, 11%, .65);--bg-card-hover: hsla(222, 47%, 15%, .85);--border-glow: hsla(142, 70%, 45%, .15);--border-color: hsla(222, 47%, 20%, .45);--primary: hsl(142, 70%, 45%);--primary-glow: hsla(142, 70%, 45%, .4);--primary-hover: hsl(142, 75%, 50%);--secondary: hsl(47, 95%, 50%);--secondary-glow: hsla(47, 95%, 50%, .35);--danger: hsl(350, 80%, 55%);--danger-hover: hsl(350, 90%, 60%);--text-primary: hsl(210, 40%, 98%);--text-secondary: hsl(215, 20%, 65%);--text-muted: hsl(215, 12%, 45%);--font-sans: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--transition: all .3s cubic-bezier(.4, 0, .2, 1);--shadow: 0 12px 40px -10px rgba(0, 0, 0, .5);--glow-shadow: 0 0 25px var(--primary-glow)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-sans);background-color:var(--bg-dark);color:var(--text-primary);min-height:100vh;overflow-x:hidden;display:flex;flex-direction:column}#app{min-height:100vh;display:flex;flex-direction:column}.glass{background:var(--bg-card);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border-color);box-shadow:var(--shadow)}.screen{flex:1;display:flex;flex-direction:column;transition:opacity .4s ease-in-out}.hidden{display:none!important}#lobby-screen{justify-content:center;align-items:center;padding:2rem;background:radial-gradient(circle at center,hsla(142,70%,45%,.08) 0%,transparent 70%),radial-gradient(circle at 10% 20%,hsla(222,47%,12%,1) 0%,var(--bg-dark) 100%)}.lobby-card{width:100%;max-width:480px;border-radius:24px;padding:3rem 2.5rem;text-align:center;border:1px solid var(--border-glow);box-shadow:0 20px 50px #0009,0 0 40px #8e462d0d}.logo{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-bottom:.5rem}.logo-icon{font-size:2.5rem;color:var(--primary);filter:drop-shadow(0 0 10px var(--primary-glow))}.logo h1{font-size:2.25rem;font-weight:800;letter-spacing:-.5px}.logo h1 span{color:var(--primary);text-shadow:0 0 15px var(--primary-glow)}.lobby-header p{color:var(--text-secondary);font-size:.95rem;margin-bottom:2rem;line-height:1.5}.tab-container{display:flex;background:#05080f80;border-radius:12px;padding:4px;margin-bottom:2rem;border:1px solid var(--border-color)}.tab-btn{flex:1;background:transparent;border:none;color:var(--text-secondary);padding:.75rem 1rem;font-size:.95rem;font-weight:600;font-family:var(--font-sans);border-radius:9px;cursor:pointer;transition:var(--transition)}.tab-btn:hover{color:var(--text-primary)}.tab-btn.active{background:var(--primary);color:var(--bg-dark);box-shadow:0 4px 15px var(--primary-glow)}.lobby-form{display:none;flex-direction:column;gap:1.25rem}.lobby-form.active{display:flex}.input-group{position:relative;display:flex;align-items:center}.input-icon{position:absolute;left:1rem;color:var(--text-muted);font-size:1.25rem;pointer-events:none;transition:var(--transition)}.input-group input{width:100%;padding:1rem 1rem 1rem 3rem;background:#05080f66;border:1px solid var(--border-color);border-radius:12px;color:var(--text-primary);font-family:var(--font-sans);font-size:1rem;outline:none;transition:var(--transition)}.input-group input:focus{border-color:var(--primary);background:#05080f99;box-shadow:0 0 15px #8e462d26}.input-group input:focus+.input-icon{color:var(--primary)}.primary-btn{width:100%;padding:1rem;background:linear-gradient(135deg,var(--primary) 0%,hsl(142,75%,40%) 100%);border:none;border-radius:12px;color:var(--bg-dark);font-family:var(--font-sans);font-size:1rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.5rem;box-shadow:0 8px 25px #8e462d33;transition:var(--transition)}.primary-btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px #8e462d66;background:linear-gradient(135deg,var(--primary-hover) 0%,var(--primary) 100%)}.primary-btn:active{transform:translateY(0)}#theater-screen{height:100vh;overflow:hidden;background-color:var(--bg-dark)}.theater-header{height:70px;padding:0 2rem;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border-color);z-index:10}.header-left{display:flex;align-items:center;gap:1.5rem}.icon-btn{background:#1b294b4d;border:1px solid var(--border-color);color:var(--text-primary);width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition)}.icon-btn:hover{background:#1b294b99;color:var(--primary);border-color:var(--primary)}.room-title-wrapper{display:flex;align-items:center;gap:.75rem}.room-title-wrapper h2{font-size:1.25rem;font-weight:700}.badge-btn{background:#22c35d1a;border:1px dashed var(--primary);color:var(--primary);padding:4px 10px;font-family:var(--font-sans);font-weight:600;font-size:.8rem;border-radius:6px;cursor:pointer;display:flex;align-items:center;gap:4px;transition:var(--transition)}.badge-btn:hover{background:var(--primary);color:var(--bg-dark)}.badge-btn span{font-size:.95rem}.badge{display:flex;align-items:center;gap:8px;padding:6px 14px;border-radius:50px;font-size:.8rem;font-weight:700;letter-spacing:.5px;border:1px solid transparent}.badge.active{background:#22c35d26;border-color:var(--primary);color:var(--primary);box-shadow:0 0 15px #8e462d26}.badge.active .dot{background-color:var(--primary);box-shadow:0 0 10px var(--primary);animation:pulse 1.5s infinite}.badge.inactive{background:#2a222480;border-color:var(--text-muted);color:var(--text-muted)}.badge.inactive .dot{background-color:var(--text-muted)}.dot{width:8px;height:8px;border-radius:50%}@keyframes pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.3);opacity:.6}to{transform:scale(1);opacity:1}}.theater-layout{flex:1;display:flex;height:calc(100vh - 70px);overflow:hidden}.video-section{flex:1;padding:1.5rem;display:flex;flex-direction:column;gap:1.25rem;overflow:hidden}.video-container{flex:1;border-radius:20px;position:relative;overflow:hidden;background-color:#030407d9;display:flex;align-items:center;justify-content:center;border:1px solid var(--border-color)}#remote-video{width:100%;height:100%;object-fit:contain}.video-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:1rem}.spinner{position:relative;width:80px;height:80px;display:flex;align-items:center;justify-content:center}.spinner-ring{position:absolute;width:100%;height:100%;border:3px solid transparent;border-top-color:var(--primary);border-radius:50%;animation:spin 1.8s linear infinite}.placeholder-icon{font-size:2.25rem;color:var(--text-muted);animation:pulse-icon 2s infinite ease-in-out}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes pulse-icon{0%,to{opacity:.4}50%{opacity:.8;color:var(--primary)}}.video-placeholder h3{font-size:1.25rem;font-weight:600;color:var(--text-primary)}.video-placeholder p{color:var(--text-secondary);font-size:.9rem}.controls-bar{height:80px;border-radius:16px;padding:0 1.5rem;display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-shrink:0;border:1px solid var(--border-color)}.controls-group{display:flex;align-items:center;gap:1rem}.viewer-controls{flex:1;justify-content:flex-end;max-width:650px}.action-btn{padding:.75rem 1.25rem;border:none;font-family:var(--font-sans);font-size:.9rem;font-weight:700;border-radius:10px;cursor:pointer;display:flex;align-items:center;gap:8px;transition:var(--transition)}.action-btn span{font-size:1.2rem}.action-btn.positive{background:var(--primary);color:var(--bg-dark)}.action-btn.positive:hover{background:var(--primary-hover);box-shadow:0 0 15px var(--primary-glow)}.action-btn.negative{background:var(--danger);color:var(--text-primary)}.action-btn.negative:hover{background:var(--danger-hover);box-shadow:0 0 15px #ef444466}.action-btn.secondary{background:#1b294b66;color:var(--text-primary);border:1px solid var(--border-color)}.action-btn.secondary:hover:not(:disabled){background:#1b294bcc;border-color:var(--text-secondary)}.action-btn:disabled{opacity:.4;cursor:not-allowed}.volume-slider{display:flex;align-items:center;gap:12px;background:#03040766;border:1px solid var(--border-color);padding:8px 16px;border-radius:12px;flex:1}.volume-icon{font-size:1.35rem;color:var(--text-secondary)}.slider-wrapper{display:flex;flex-direction:column;flex:1}.slider-wrapper label{font-size:.75rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px}.slider-wrapper input[type=range]{-webkit-appearance:none;width:100%;height:6px;background:#1b294b99;border-radius:3px;outline:none}.slider-wrapper input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--primary);box-shadow:0 0 8px var(--primary-glow);cursor:pointer;transition:var(--transition)}.slider-wrapper input[type=range]::-webkit-slider-thumb:hover{background:var(--primary-hover);transform:scale(1.2)}.volume-percent{font-size:.8rem;font-weight:700;color:var(--text-primary);width:32px;text-align:right}.sidebar{width:280px;border-left:1px solid var(--border-color);display:flex;flex-direction:column;flex-shrink:0;background:#0b111e80}.sidebar-header{padding:1.5rem;border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between}.sidebar-header h3{font-size:1.05rem;font-weight:700}.count-badge{background:#22c35d26;color:var(--primary);border:1px solid var(--border-glow);padding:2px 8px;font-size:.8rem;font-weight:700;border-radius:20px}.sidebar-content{flex:1;overflow-y:auto;padding:1rem}.participants-list{list-style:none;display:flex;flex-direction:column;gap:8px}.participant-item{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:#05080f4d;border:1px solid var(--border-color);border-radius:10px;transition:var(--transition)}.participant-item:hover{background:#05080f99;border-color:var(--border-glow)}.participant-info{display:flex;align-items:center;gap:8px}.participant-avatar{width:24px;height:24px;border-radius:50%;background:#22c35d33;color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;border:1px solid var(--border-glow)}.participant-name{font-size:.9rem;font-weight:500}.role-badge{font-size:.65rem;font-weight:800;padding:2px 6px;border-radius:4px;text-transform:uppercase}.role-badge.host{background:#f9c40626;color:var(--secondary);border:1px solid var(--secondary-glow)}.role-badge.viewer{background:#1b294b66;color:var(--text-secondary);border:1px solid var(--border-color)}.role-badge.you{background:#22c35d26;color:var(--primary);border:1px solid var(--border-glow)}