:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;background-color:#0f0f0f}body{margin:0;padding:0;display:block;min-width:100vw;min-height:100vh}#root{width:100%;height:100vh;margin:0;padding:0;max-width:none;text-align:left}:root{--bg-dark: #0f0f0f;--bg-panel: #18181b;--bg-card: #1a1a1a;--bg-input: #2a2a2a;--bg-hover: #27272a;--bg-overlay: rgba(0, 0, 0, .85);--primary: #8b5cf6;--primary-hover: #7c3aed;--success: #22c55e;--danger: #ef4444;--warning: #eab308;--text-main: #ffffff;--text-secondary: #a1a1aa;--text-muted: #71717a;--border-color: #333333;--border-active: #8b5cf6;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px}.app-container{display:flex;flex-direction:column;height:100vh;width:100vw;background-color:var(--bg-dark);color:var(--text-main);overflow:hidden}.navbar{height:60px;background-color:var(--bg-panel);border-bottom:1px solid var(--border-color);display:flex;align-items:center;padding:0 24px;flex-shrink:0;justify-content:space-between}.nav-btn{background:transparent;border:1px solid var(--border-color);color:var(--text-secondary);padding:6px 12px;border-radius:var(--radius-sm);cursor:pointer;display:flex;align-items:center;gap:8px;font-size:.9rem;transition:all .2s;margin-right:10px}.nav-btn:hover{background:var(--bg-hover);color:var(--text-main);border-color:var(--text-secondary)}.logo{color:var(--primary);font-size:1.25rem;font-weight:700;display:flex;align-items:center;gap:10px}.nav-info{display:flex;align-items:center;gap:15px}.badge{background:var(--bg-hover);padding:5px 12px;border-radius:var(--radius-sm);font-size:.9rem;border:1px solid var(--border-color);display:flex;align-items:center;gap:6px}.host-badge{color:var(--warning);border-color:var(--warning)}.user-badge{cursor:pointer;transition:background .2s}.user-badge:hover{background:var(--bg-input)}.main-content{display:flex;flex:1;overflow:hidden}.video-stage{flex:1;display:flex;flex-direction:column;background-color:#000;position:relative}.sidebar{width:380px;background-color:var(--bg-panel);border-left:1px solid var(--border-color);display:flex;flex-direction:column;min-width:300px}.sidebar-header{padding:15px;font-weight:600;color:var(--text-main);border-bottom:1px solid var(--border-color);font-size:.9rem;text-transform:uppercase;letter-spacing:.05em}.login-page{height:100vh;width:100vw;background:var(--bg-dark);color:var(--text-main);display:flex;flex-direction:column;justify-content:center;align-items:center}.login-brand{margin-bottom:30px;font-size:3rem;display:flex;align-items:center;gap:15px;color:var(--primary)}.login-card{background:var(--bg-card);padding:3rem;border-radius:var(--radius-lg);border:1px solid var(--border-color);width:350px;max-width:90%;box-shadow:0 10px 40px #0009}.login-card h2{margin-top:0;text-align:center}.login-form{display:flex;flex-direction:column;gap:15px}.input-field{padding:12px;background:var(--bg-input);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-main);outline:none;transition:.2s}.input-field:focus{border-color:var(--primary);background:var(--bg-hover)}.btn-primary{padding:12px;border-radius:var(--radius-md);border:none;background:var(--primary);color:#fff;font-size:1rem;font-weight:700;cursor:pointer;transition:background .2s}.btn-primary:hover{background:var(--primary-hover)}.btn-primary:disabled{opacity:.7;cursor:not-allowed}.error-banner{background:#ef444433;color:var(--danger);padding:10px;border-radius:var(--radius-sm);margin-bottom:15px;font-size:.9rem;text-align:center}.divider{margin:20px 0;text-align:center;color:var(--text-muted);font-size:.9rem}.toggle-link{margin-top:25px;text-align:center;color:var(--text-secondary);cursor:pointer}.toggle-link:hover{color:var(--text-main)}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--bg-overlay);display:flex;justify-content:center;align-items:center;z-index:2000}.modal-content{background:var(--bg-card);padding:2rem;border-radius:var(--radius-md);border:1px solid var(--border-color);width:320px;text-align:center}.modal-title{margin-top:0}.modal-desc{color:var(--text-secondary);margin-bottom:20px}.user-list-section{padding:10px;border-bottom:1px solid var(--border-color);max-height:150px;overflow-y:auto}.user-item{display:flex;justify-content:space-between;align-items:center;margin:6px 0}.user-name{display:flex;align-items:center;gap:6px;color:var(--text-secondary)}.user-name.is-host{color:var(--warning);font-weight:700}.user-me{opacity:.6;font-size:.85em}.control-btn{background:transparent;border:1px solid var(--border-color);cursor:pointer;padding:4px 8px;border-radius:var(--radius-sm);font-size:.8rem;display:flex;align-items:center}.control-btn.promote{color:var(--success)}.control-btn.revoke{color:var(--danger)}.add-video-form{display:flex;gap:10px;padding:10px;border-bottom:1px solid var(--border-color)}.add-video-input{flex:1;padding:8px;border-radius:var(--radius-sm);border:1px solid var(--border-color);background:var(--bg-input);color:var(--text-main)}.add-video-btn{background:var(--success);border:none;color:#fff;padding:0 15px;border-radius:var(--radius-sm);cursor:pointer}.playlist-section{height:40%;border-bottom:1px solid var(--border-color);display:flex;flex-direction:column}.playlist-scroll{flex:1;overflow-y:auto;padding:10px}.playlist-item{padding:10px;border-radius:var(--radius-sm);cursor:pointer;transition:background .2s;color:var(--text-secondary)}.playlist-item:hover{background:var(--bg-hover);color:var(--text-main)}.chat-section{flex:1;display:flex;flex-direction:column;min-height:0}.chat-messages{flex:1;overflow-y:auto;padding:15px;display:flex;flex-direction:column;gap:8px}.chat-msg-system{color:var(--text-muted);font-size:.85em;font-style:italic}.chat-msg-user strong{color:var(--primary)}.chat-msg-user span{color:var(--text-secondary)}.chat-input-area{padding:10px;display:flex;gap:8px;background:var(--bg-panel);position:relative;align-items:center}.chat-input{flex:1;padding:10px;border-radius:var(--radius-sm);border:1px solid var(--border-color);background:var(--bg-input);color:#fff}.chat-send-btn{background:var(--primary);border:none;color:#fff;padding:10px 15px;border-radius:var(--radius-sm);cursor:pointer;display:flex;align-items:center;justify-content:center}.emoji-picker{position:absolute;bottom:60px;right:10px;background:var(--bg-card);border:1px solid var(--border-color);padding:8px;border-radius:var(--radius-md);display:flex;gap:5px;box-shadow:0 4px 12px #00000080;z-index:100}.emoji-btn{background:transparent;border:none;font-size:1.5rem;cursor:pointer;transition:transform .1s;padding:5px;border-radius:4px}.emoji-btn:hover{transform:scale(1.2);background:var(--bg-hover)}.icon-btn{background:transparent;border:none;color:var(--text-secondary);font-size:1.2rem;cursor:pointer;padding:0 8px;display:flex;align-items:center;transition:color .2s}.icon-btn:hover{color:var(--primary)}.player-container{flex:1;display:flex;align-items:center;justify-content:center;background:#000;width:100%;height:100%}.player-wrapper{position:relative;width:100%;height:100%}.blocker-overlay{position:absolute;inset:0 0 50px;z-index:10;cursor:not-allowed}.custom-controls{position:absolute;bottom:0;left:0;right:0;background:#000c;padding:10px 15px;display:flex;gap:15px;align-items:center;z-index:20}.controls-text{flex:1;color:var(--text-secondary);font-size:.9rem;font-style:italic}.controls-icon-btn{background:none;border:none;color:#fff;cursor:pointer;display:flex;align-items:center;font-size:1.1rem}.volume-slider{width:60px;cursor:pointer}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg-dark)}::-webkit-scrollbar-thumb{background:#333;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#444}.typing-indicator{position:absolute;top:-25px;left:15px;font-size:.8rem;color:#aaa;font-style:italic;pointer-events:none;white-space:nowrap}.reaction-overlay-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden;z-index:50}.floating-emoji{position:absolute;bottom:20px;font-size:2.5rem;animation:floatUp 2s ease-out forwards;display:flex;flex-direction:column;align-items:center}.reaction-username{font-size:.8rem;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8);opacity:.8;margin-top:-5px}@keyframes floatUp{0%{transform:translateY(0) scale(.5);opacity:0}10%{transform:translateY(-20px) scale(1.2);opacity:1}to{transform:translateY(-300px) scale(1);opacity:0}}@media(max-width:768px){.main-content{flex-direction:column}.sidebar{width:100%;min-width:0;flex:1;border-left:none;border-top:1px solid var(--border-color)}.video-stage{flex:0 0 auto;height:35vh}.playlist-section{height:auto;max-height:120px}.user-list-section{max-height:80px}.navbar{padding:0 10px}.logo{font-size:1.1rem}.badge{padding:4px 8px;font-size:.8rem}.volume-slider{display:none}.lobby-overlay{padding:16px 12px 32px}.lobby-panel--discover{padding:16px 14px 12px}.lobby-panel--create{padding:16px}.create-room-form{flex-direction:column}.create-btn{width:100%}}.lobby-overlay{position:fixed;inset:0;z-index:2000;overflow-y:auto;overflow-x:hidden;background:var(--bg-dark);display:flex;justify-content:center;align-items:flex-start;padding:24px 16px 48px}.lobby-backdrop{position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(ellipse 80% 50% at 50% -20%,rgba(139,92,246,.22),transparent 55%),radial-gradient(ellipse 60% 40% at 100% 50%,rgba(34,197,94,.06),transparent 45%),radial-gradient(ellipse 50% 35% at 0% 80%,rgba(139,92,246,.08),transparent 50%)}@media(prefers-reduced-motion:no-preference){.lobby-backdrop{animation:lobby-backdrop-shift 18s ease-in-out infinite alternate}}@keyframes lobby-backdrop-shift{0%{opacity:.85;filter:saturate(1)}to{opacity:1;filter:saturate(1.15)}}.lobby-container{position:relative;z-index:1;width:100%;max-width:920px;text-align:left}.lobby-top-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:28px}.lobby-user-pill{display:inline-flex;align-items:center;gap:10px;padding:8px 14px 8px 10px;border-radius:999px;background:#18181bd9;border:1px solid var(--border-color);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.lobby-user-dot{width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 10px #22c55e99}.lobby-user-label{color:var(--text-main);font-size:.9rem;font-weight:500}.lobby-logout-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:var(--radius-md);border:1px solid var(--border-color);background:#18181b99;color:var(--text-secondary);font-size:.9rem;cursor:pointer;transition:background .2s,color .2s,border-color .2s,box-shadow .2s}.lobby-logout-btn:hover{background:var(--bg-hover);color:var(--text-main);border-color:var(--text-muted);box-shadow:0 0 0 1px #8b5cf640}.lobby-hero{text-align:center;margin-bottom:40px;padding:8px 0 0}.lobby-eyebrow{margin:0 0 8px;font-size:.75rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--primary)}.lobby-title{margin:0 0 12px;font-size:clamp(2.25rem,6vw,3.25rem);font-weight:800;letter-spacing:-.03em;line-height:1.1;background:linear-gradient(135deg,#faf5ff,#c4b5fd 45%,#8b5cf6);-webkit-background-clip:text;background-clip:text;color:transparent}.lobby-subtitle{margin:0 auto;max-width:34rem;color:var(--text-secondary);font-size:1.05rem;line-height:1.55}.lobby-section{margin-bottom:36px}.lobby-section-head{margin-bottom:14px}.lobby-section-head--inline{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}.lobby-section-title{margin:0 0 6px;font-size:1.15rem;font-weight:700;color:var(--text-main);letter-spacing:-.02em}.lobby-section-desc{margin:0;font-size:.9rem;color:var(--text-muted);line-height:1.45;max-width:36rem}.lobby-live-count{font-size:.8rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em}.lobby-panel{border-radius:var(--radius-lg);border:1px solid rgba(255,255,255,.06);background:linear-gradient(165deg,#27272a8c,#18181beb);box-shadow:0 1px #ffffff0a inset,0 20px 50px -24px #000000a6;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.lobby-panel--discover{padding:20px 20px 16px}.lobby-panel--create{padding:20px}.create-room-form{display:flex;flex-wrap:wrap;gap:12px;width:100%;align-items:stretch}.create-input{flex:1;min-width:200px;padding:14px 16px;border-radius:var(--radius-md);border:1px solid var(--border-color);background:var(--bg-input);color:var(--text-main);font-size:1rem;transition:border-color .2s,box-shadow .2s}.create-input::placeholder{color:var(--text-muted)}.create-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #8b5cf633}.create-btn{padding:0 24px;min-height:48px;border-radius:var(--radius-md);border:none;background:linear-gradient(180deg,#4ade80 0%,var(--success) 100%);color:#052e16;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:1rem;box-shadow:0 4px 14px -4px #22c55e8c;transition:transform .15s,filter .15s,box-shadow .15s}.create-btn:hover{filter:brightness(1.06);transform:translateY(-1px);box-shadow:0 6px 20px -4px #22c55e99}.create-btn:active{transform:translateY(0)}.lobby-skeleton-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}.lobby-skeleton-card{height:188px;border-radius:var(--radius-lg);background:var(--bg-card);border:1px solid var(--border-color);overflow:hidden;position:relative}.lobby-skeleton-shimmer{position:absolute;inset:0;background:linear-gradient(110deg,transparent 0%,rgba(255,255,255,.04) 45%,transparent 90%);animation:lobby-shimmer 1.2s ease-in-out infinite}@keyframes lobby-shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}@media(prefers-reduced-motion:reduce){.lobby-skeleton-shimmer{animation:none}}.room-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}button.room-card{font:inherit;text-align:center;width:100%;box-sizing:border-box;appearance:none;-webkit-appearance:none}.room-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:20px 18px;cursor:pointer;transition:transform .2s,border-color .2s,background .2s,box-shadow .2s;display:flex;flex-direction:column;align-items:center;min-height:188px;color:inherit}.room-card:hover{transform:translateY(-4px);border-color:#8b5cf68c;background:var(--bg-hover);box-shadow:0 16px 40px -20px #8b5cf659}.room-card:focus-visible{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #8b5cf659}.room-card-icon{font-size:2.25rem;color:var(--text-muted);margin-bottom:12px;opacity:.9}.room-card-name{font-size:1.1rem;font-weight:700;color:var(--text-main);margin-bottom:6px;word-break:break-word;width:100%;line-height:1.25}.room-card-meta{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--text-secondary);width:100%;margin-bottom:14px;min-height:1.25em}.room-card-meta-icon{flex-shrink:0;opacity:.85}.meta-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;width:100%}.room-card-stats{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-size:.82rem;font-weight:600;padding:8px 12px;border-radius:999px;background:#8b5cf624;color:#ddd6fe;border:1px solid rgba(139,92,246,.28)}.no-rooms{grid-column:1 / -1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:48px 24px;text-align:center;color:var(--text-muted);font-size:.95rem;line-height:1.5;border-radius:var(--radius-lg);border:1px dashed rgba(255,255,255,.1);background:#18181b66}.no-rooms p{margin:0;max-width:22rem}.no-rooms-icon{font-size:2rem;color:var(--text-muted);opacity:.5}.playlist-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 10px;border-bottom:1px solid rgba(255,255,255,.05)}.item-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;font-size:.9rem}.delete-btn{background:transparent;border:none;color:var(--danger);opacity:.5;cursor:pointer;padding:5px;border-radius:4px;display:flex;align-items:center;justify-content:center;transition:all .2s}.delete-btn:hover{opacity:1;background:#ef444426;transform:scale(1.1)}.chat-input-area{border-top:1px solid var(--border-color);padding:15px}.chat-input{border-radius:20px;padding:10px 15px}.chat-send-btn{border-radius:50%;width:40px;height:40px;padding:0}.add-video-mode-tabs{display:flex;gap:8px;margin-bottom:10px}.mode-tab{flex:1;padding:8px 12px;border-radius:var(--radius-sm);border:1px solid var(--border-color);background:var(--bg-input);color:var(--text-secondary);cursor:pointer;font-size:.85rem}.mode-tab.active{border-color:var(--primary);color:var(--primary);background:#8b5cf61f}.search-results-dropdown{position:absolute;top:100%;width:100%;background:#1a1a1a;z-index:100;border-radius:4px;max-height:280px;overflow-y:auto}.search-result-row{padding:10px;border-bottom:1px solid #333;cursor:pointer;display:flex;gap:10px;align-items:center}.search-result-title{font-size:.85rem;color:#fff}.tmdb-type-badge{display:inline-block;font-size:.65rem;text-transform:uppercase;background:var(--primary);color:#fff;padding:2px 6px;border-radius:4px;margin-right:6px}.tmdb-tv-hint{color:var(--text-muted);font-size:.75rem}.tmdb-unavailable{color:var(--warning);font-size:.85rem;margin-bottom:8px}.tmdb-poster-placeholder{width:40px;height:54px;background:var(--bg-hover);border-radius:4px}.embed-player-wrapper{position:relative;width:100%;height:100%;min-height:360px}.embed-iframe{width:100%;height:100%;min-height:360px;border:none;border-radius:var(--radius-md)}.embed-fallback{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;min-height:360px;color:var(--text-secondary);padding:24px;text-align:center}.embed-fallback-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.provider-selector{display:flex;align-items:center;gap:8px;margin-right:8px}.provider-selector-label{font-size:.75rem;color:var(--text-muted);text-transform:uppercase}.provider-select{background:var(--bg-input);color:var(--text-main);border:1px solid var(--border-color);border-radius:var(--radius-sm);padding:6px 10px;font-size:.85rem}.recommendation-panel{position:relative;margin-bottom:12px}.recommendation-toggle{position:relative;background:var(--bg-input);border:1px solid var(--border-color);color:var(--text-secondary);padding:8px 14px;border-radius:var(--radius-sm);cursor:pointer;display:flex;align-items:center;gap:8px}.recommendation-badge{position:absolute;top:-6px;right:-6px;background:var(--danger);color:#fff;font-size:.7rem;min-width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center}.recommendation-list{position:absolute;z-index:50;left:0;right:0;top:100%;margin-top:6px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-md);max-height:320px;overflow-y:auto;padding:8px}.recommendation-card{display:flex;gap:10px;padding:10px;border-bottom:1px solid var(--border-color);position:relative}.recommendation-dismiss{position:absolute;top:6px;right:6px;background:transparent;border:none;color:var(--text-muted);cursor:pointer}.rec-poster{width:48px;height:72px;object-fit:cover;border-radius:4px}.rec-from{font-size:.75rem;color:var(--text-muted)}.rec-title{font-weight:600;font-size:.9rem;margin:4px 0}.rec-accept{display:inline-flex;align-items:center;gap:6px;background:var(--success);color:#fff;border:none;border-radius:var(--radius-sm);padding:6px 12px;cursor:pointer;font-size:.8rem}.trending-sections{width:100%;text-align:left}.trending-row{margin-bottom:22px}.trending-row:last-child{margin-bottom:0}.trending-row-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}.trending-heading{margin:0;font-size:.95rem;font-weight:700;color:var(--text-main);letter-spacing:-.02em}.trending-badge{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:#c4b5fd;padding:5px 10px;border-radius:999px;background:#8b5cf626;border:1px solid rgba(139,92,246,.28)}.trending-hint{font-size:.82rem;color:var(--text-muted);margin:0 0 10px;line-height:1.4}.trending-scroll{display:flex;gap:14px;overflow-x:auto;padding:4px 4px 12px 2px;margin:0 -4px;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:rgba(139,92,246,.45) transparent}.trending-scroll::-webkit-scrollbar{height:6px}.trending-scroll::-webkit-scrollbar-track{background:#ffffff08;border-radius:999px}.trending-scroll::-webkit-scrollbar-thumb{background:#8b5cf666;border-radius:999px}.trending-card{flex:0 0 128px;width:128px;background:#0f0f0fa6;border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-md);padding:0;cursor:pointer;overflow:hidden;text-align:left;scroll-snap-align:start;transition:border-color .2s,transform .2s,box-shadow .2s;box-shadow:0 8px 24px -12px #000c}.trending-card:hover{border-color:#8b5cf68c;transform:translateY(-3px);box-shadow:0 14px 32px -14px #8b5cf659}.trending-card:focus-visible{outline:none;border-color:var(--primary);box-shadow:0 0 0 2px #8b5cf673}.trending-card img{width:100%;aspect-ratio:2/3;object-fit:cover;display:block}.trending-card-placeholder{width:100%;aspect-ratio:2/3;background:linear-gradient(160deg,var(--bg-hover) 0%,#18181b 100%);display:flex;align-items:center;justify-content:center;font-size:.68rem;padding:8px;color:var(--text-muted);line-height:1.25;text-align:center}.trending-card-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.72rem;font-weight:600;padding:10px 8px;color:var(--text-main);line-height:1.3;min-height:2.8em;border-top:1px solid rgba(255,255,255,.05);background:#00000040}.no-video-placeholder{display:flex;flex-direction:column;align-items:center;color:#666;justify-content:center;min-height:200px}