@import"https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&display=swap";@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap";@import"https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap";.chat-component{display:flex;flex-direction:column;height:400px;overflow:hidden;padding:0}.chat-title{font-size:var(--text-lg);display:flex;align-items:center;gap:var(--space-sm);margin:0}.chat-title svg{color:var(--neon-cyan)}.chat-clear-btn{background:transparent;border:1px solid var(--steel-gray);border-radius:var(--radius-sm);color:var(--text-muted);padding:var(--space-xs);cursor:pointer;transition:all var(--duration-fast) var(--ease-smooth)}.chat-clear-btn:hover{border-color:var(--neon-orange);color:var(--neon-orange)}.chat-message.system-message{justify-content:center;padding:var(--space-xs)}.chat-message.system-message .chat-message-content{text-align:center}.chat-message.system-message .chat-text{font-style:italic;color:var(--text-muted);font-size:var(--text-xs)}.chat-message-content{flex:1;min-width:0}.chat-message-header{display:flex;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-xs);flex-wrap:wrap}.chat-sender{font-weight:var(--font-medium);color:var(--neon-cyan);display:flex;align-items:center;gap:var(--space-xs)}.chat-sender.system{color:var(--text-muted);font-style:italic}.host-badge{font-size:var(--text-xs);padding:1px 4px;background:#f0f3;border-radius:var(--radius-xs);color:var(--neon-magenta);font-weight:var(--font-bold)}.chat-text{font-size:var(--text-sm);color:var(--text-primary);word-break:break-word;line-height:1.4;margin:0}.chat-input{flex:1;padding:var(--space-sm) var(--space-md);background:var(--slate-gray);border:1px solid var(--steel-gray);border-radius:var(--radius-md);color:var(--text-primary);font-size:var(--text-sm);font-family:inherit;transition:all var(--duration-fast) var(--ease-smooth)}.chat-input:focus{outline:none;border-color:var(--neon-cyan);box-shadow:0 0 0 2px #00ffff1a}.chat-input::placeholder{color:var(--text-muted)}.chat-send-btn{display:flex;align-items:center;justify-content:center;padding:var(--space-sm) var(--space-md);background:var(--neon-cyan);color:var(--deep-space);border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--duration-fast) var(--ease-smooth)}.chat-send-btn:hover:not(:disabled){background:var(--electric-blue);transform:scale(1.05)}.chat-send-btn:active:not(:disabled){transform:scale(.95)}.no-messages{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--text-muted);text-align:center}.no-messages svg{width:32px;height:32px;margin-bottom:var(--space-sm);opacity:.5}.no-messages p{margin:0;font-size:var(--text-sm)}.no-messages p:last-child{font-size:var(--text-xs);margin-top:var(--space-xs)}.chat-messages::-webkit-scrollbar{width:6px}.chat-messages::-webkit-scrollbar-track{background:var(--slate-gray);border-radius:3px}.chat-messages::-webkit-scrollbar-thumb{background:var(--steel-gray);border-radius:3px}.chat-messages::-webkit-scrollbar-thumb:hover{background:var(--neon-cyan)}.navbar{position:fixed;top:0;left:0;right:0;height:var(--navbar-height);background:#0a0a0ff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(0,255,255,.1);z-index:var(--z-sticky)}.navbar-transparent{background:transparent;border-bottom:none}.navbar-container{display:flex;align-items:center;justify-content:space-between;height:100%}.navbar-logo{display:flex;align-items:center;text-decoration:none}.navbar-links{display:flex;align-items:center;gap:var(--space-xl)}.navbar-link{font-family:var(--font-display);font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--text-secondary);text-transform:uppercase;letter-spacing:1px;transition:all var(--duration-normal) var(--ease-smooth)}.navbar-link:hover{color:var(--neon-cyan);text-shadow:0 0 8px var(--glow-cyan)}.navbar-actions{display:flex;align-items:center;gap:var(--space-md)}.navbar-user{display:flex;align-items:center;gap:var(--space-sm);text-decoration:none;padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-md);transition:all var(--duration-fast) var(--ease-smooth)}.navbar-user:hover{background:#00ffff1a}.navbar-username{font-family:var(--font-display);font-size:var(--text-sm);color:var(--text-primary);max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.navbar-mobile-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;background:transparent;border:1px solid transparent;border-radius:var(--radius-md);color:var(--text-primary);cursor:pointer;transition:all var(--duration-fast) var(--ease-smooth)}.navbar-mobile-toggle:hover{background:#00ffff1a;border-color:#0ff3}.navbar-mobile-toggle.active{color:var(--neon-cyan)}.mobile-menu-overlay{position:fixed;top:0;right:0;bottom:0;left:0;top:var(--navbar-height);background:#000c;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:calc(var(--z-sticky) - 1);animation:fadeIn .2s ease-out}.mobile-menu{background:linear-gradient(180deg,var(--carbon-gray) 0%,var(--deep-space) 100%);border-bottom:1px solid rgba(0,255,255,.2);padding:var(--space-lg);display:flex;flex-direction:column;gap:var(--space-lg);animation:slideDown .3s ease-out;max-height:calc(100vh - var(--navbar-height));overflow-y:auto}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.mobile-menu-user{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md);background:#00ffff0d;border-radius:var(--radius-lg);border:1px solid rgba(0,255,255,.1)}.mobile-menu-user-info{display:flex;flex-direction:column;gap:var(--space-xs)}.mobile-menu-displayname{font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--font-semibold);color:var(--text-primary)}.mobile-menu-username{font-size:var(--text-sm);color:var(--text-muted)}.mobile-menu-links{display:flex;flex-direction:column;gap:var(--space-xs)}.mobile-menu-link{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md) var(--space-lg);font-family:var(--font-display);font-size:var(--text-md);font-weight:var(--font-medium);color:var(--text-secondary);text-decoration:none;border-radius:var(--radius-md);transition:all var(--duration-fast) var(--ease-smooth)}.mobile-menu-link:hover,.mobile-menu-link:active{background:#00ffff1a;color:var(--neon-cyan)}.mobile-menu-link.active{background:#00ffff26;color:var(--neon-cyan);border-left:3px solid var(--neon-cyan)}.mobile-menu-link svg{flex-shrink:0}.mobile-menu-actions{display:flex;flex-direction:column;gap:var(--space-sm);padding-top:var(--space-md);border-top:1px solid var(--steel-gray)}@media (max-width: 1024px){.navbar-links{display:none}}@media (max-width: 768px){.navbar-actions{display:none}.navbar-mobile-toggle{display:flex}}.landing{position:relative;min-height:100vh}.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;padding-top:var(--navbar-height);position:relative;z-index:1}.hero-content{text-align:center;max-width:900px;margin:0 auto}.hero-badge{display:inline-flex;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-lg)}.hero-badge-text{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--text-secondary)}.hero-title{font-size:clamp(2.5rem,8vw,var(--text-6xl));line-height:1.1;margin-bottom:var(--space-lg)}.hero-highlight{display:block;color:var(--neon-cyan);margin-top:var(--space-sm)}.hero-subtitle{font-size:var(--text-xl);color:var(--text-secondary);max-width:700px;margin:0 auto var(--space-xl);line-height:1.6}.hero-actions{display:flex;gap:var(--space-md);justify-content:center;flex-wrap:wrap;margin-bottom:var(--space-3xl)}.hero-stats{display:flex;align-items:center;justify-content:center;gap:var(--space-xl);flex-wrap:wrap}.hero-stat{text-align:center}.hero-stat-value{display:block;font-family:var(--font-display);font-size:var(--text-3xl);font-weight:var(--font-bold)}.hero-stat-label{font-size:var(--text-sm);color:var(--text-muted);text-transform:uppercase;letter-spacing:1px}.hero-stat-divider{width:1px;height:40px;background:linear-gradient(to bottom,transparent,var(--steel-gray),transparent)}.section-header{text-align:center;margin-bottom:var(--space-3xl)}.section-title{font-size:var(--text-4xl);margin-bottom:var(--space-md)}.section-subtitle{font-size:var(--text-lg);color:var(--text-secondary);max-width:600px;margin:0 auto}.features{position:relative;z-index:1;background:linear-gradient(to bottom,transparent,rgba(0,0,0,.3),transparent)}.features-grid{margin-top:var(--space-2xl)}.feature-icon{width:56px;height:56px;display:flex;align-items:center;justify-content:center;background:#00ffff1a;border:1px solid var(--neon-cyan);border-radius:var(--radius-lg);margin-bottom:var(--space-lg)}.feature-icon svg{width:28px;height:28px}.feature-icon-magenta{background:#ff00ff1a;border-color:var(--neon-magenta)}.feature-icon-green{background:#39ff141a;border-color:var(--neon-green)}.feature-icon-orange{background:#ff4d001a;border-color:var(--neon-orange)}.feature-title{font-size:var(--text-xl);margin-bottom:var(--space-sm)}.feature-description{font-size:var(--text-base);color:var(--text-secondary);line-height:1.6}.how-it-works{position:relative;z-index:1}.steps{display:flex;align-items:flex-start;justify-content:center;gap:var(--space-lg);flex-wrap:wrap}.step{flex:1;min-width:280px;max-width:350px;text-align:center;padding:var(--space-xl);background:var(--carbon-gray);border:1px solid var(--steel-gray);border-radius:var(--radius-lg);transition:all var(--duration-normal) var(--ease-smooth)}.step:hover{border-color:var(--neon-cyan);box-shadow:0 0 30px #0ff3;transform:translateY(-4px)}.step-number{font-family:var(--font-display);font-size:var(--text-5xl);font-weight:var(--font-black);background:var(--gradient-cta);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:var(--space-md)}.step-title{font-size:var(--text-xl);margin-bottom:var(--space-sm)}.step-description{font-size:var(--text-base);color:var(--text-secondary);line-height:1.6}.step-connector{display:none}@media (min-width: 1024px){.step-connector{display:block;width:60px;height:2px;background:linear-gradient(90deg,var(--neon-cyan),var(--neon-magenta));margin-top:80px;flex-shrink:0}}.tech-stack{position:relative;z-index:1;background:linear-gradient(to bottom,transparent,rgba(0,0,0,.3),transparent)}.tech-logos{display:flex;align-items:center;justify-content:center;gap:var(--space-xl);flex-wrap:wrap}.tech-logo{display:flex;flex-direction:column;align-items:center;padding:var(--space-xl);background:var(--carbon-gray);border:1px solid var(--steel-gray);border-radius:var(--radius-lg);text-decoration:none;color:var(--text-primary);transition:all var(--duration-normal) var(--ease-smooth);min-width:150px}.tech-logo:hover{border-color:var(--neon-cyan);box-shadow:0 0 30px #0ff3;transform:translateY(-4px)}.tech-logo-icon{width:64px;height:64px;display:flex;align-items:center;justify-content:center;background:var(--slate-gray);border-radius:var(--radius-lg);margin-bottom:var(--space-md)}.tech-logo-name{font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--font-bold);margin-bottom:var(--space-xs)}.tech-logo-desc{font-size:var(--text-sm);color:var(--text-muted)}.tech-plus{font-family:var(--font-display);font-size:var(--text-3xl);color:var(--neon-cyan);text-shadow:0 0 10px var(--glow-cyan)}.cta{position:relative;z-index:1}.cta-content{text-align:center;padding:var(--space-4xl) var(--space-xl);background:var(--carbon-gray);border:1px solid rgba(0,255,255,.3);border-radius:var(--radius-xl);position:relative;overflow:hidden}.cta-content:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--gradient-cta)}.cta-title{font-size:var(--text-4xl);margin-bottom:var(--space-md)}.cta-subtitle{font-size:var(--text-xl);color:var(--text-secondary);margin-bottom:var(--space-xl)}.footer{position:relative;z-index:1;padding:var(--space-3xl) 0;border-top:1px solid var(--steel-gray)}.footer-content{text-align:center}.footer-brand{margin-bottom:var(--space-lg)}.footer-tagline{color:var(--text-muted);margin-top:var(--space-xs)}.footer-links{display:flex;gap:var(--space-xl);justify-content:center;margin-bottom:var(--space-lg)}.footer-links a{color:var(--text-secondary);font-size:var(--text-sm)}.footer-links a:hover{color:var(--neon-cyan)}.footer-copyright{font-size:var(--text-sm);color:var(--text-muted)}@media (max-width: 768px){.hero-stats{gap:var(--space-lg)}.hero-stat-divider{display:none}.tech-logos{flex-direction:column}.tech-plus{transform:rotate(90deg)}.cta-content{padding:var(--space-2xl) var(--space-md)}}.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--space-xl);position:relative;z-index:1}.auth-container{width:100%;max-width:440px;margin:0 auto;text-align:center}.auth-logo{display:inline-block;margin-bottom:var(--space-2xl);text-decoration:none}.auth-card{background:var(--carbon-gray);border:1px solid rgba(0,255,255,.3);border-radius:var(--radius-lg);padding:var(--space-xl);position:relative;overflow:hidden}.auth-card:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--gradient-cta)}.auth-footer{margin-top:var(--space-lg);color:var(--text-secondary);font-size:var(--text-sm)}.cl-rootBox{width:100%}.cl-card{background:transparent!important;box-shadow:none!important}.cl-headerTitle{font-family:var(--font-display)!important;text-transform:uppercase!important;letter-spacing:2px!important;color:var(--text-primary)!important}.cl-headerSubtitle{color:var(--text-secondary)!important}.cl-formButtonPrimary{background:var(--gradient-cta)!important;font-family:var(--font-display)!important;text-transform:uppercase!important;letter-spacing:1px!important}.cl-formButtonPrimary:hover{background:var(--gradient-hover)!important}.cl-formFieldInput{background:var(--void-black)!important;border:1px solid rgba(0,255,255,.3)!important;color:var(--text-primary)!important}.cl-formFieldInput:focus{border-color:var(--neon-cyan)!important;box-shadow:0 0 10px var(--glow-cyan)!important}.cl-footerActionLink{color:var(--neon-cyan)!important}.cl-footerActionLink:hover{color:var(--neon-magenta)!important}.cl-socialButtonsBlockButton{background:var(--slate-gray)!important;border:1px solid rgba(0,255,255,.2)!important}.cl-socialButtonsBlockButton:hover{background:var(--steel-gray)!important;border-color:var(--neon-cyan)!important}.invite-links-modal{width:90%;max-width:600px;max-height:80vh;overflow-y:auto}.invite-description{margin-bottom:var(--space-lg);color:var(--slate-gray)}.invite-description p{margin-bottom:var(--space-sm)}.invite-description .subtle{font-size:.875rem;color:var(--carbon-gray)}.generate-btn{width:100%;margin-bottom:var(--space-xl)}.invites-list{display:flex;flex-direction:column;gap:var(--space-md)}.empty-state{text-align:center;padding:var(--space-2xl);color:var(--slate-gray)}.invite-card{padding:var(--space-lg)}.invite-info{margin-bottom:var(--space-md)}.invite-code{display:flex;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-md);padding:var(--space-md);background:#00ffff0d;border:1px solid rgba(0,255,255,.2);border-radius:8px}.code-label{font-size:.875rem;color:var(--slate-gray)}.code-value{font-family:var(--font-mono);font-size:1.125rem;color:var(--neon-cyan);letter-spacing:.1em;font-weight:600}.invite-stats{display:flex;gap:var(--space-xl)}.stat{display:flex;flex-direction:column;gap:var(--space-xs)}.stat-label{font-size:.75rem;color:var(--carbon-gray);text-transform:uppercase;letter-spacing:.05em}.stat-value{font-size:.875rem;color:var(--slate-gray);font-weight:500}.invite-actions{display:flex;gap:var(--space-sm);justify-content:flex-end}.revoke-btn{color:var(--neon-orange)}.revoke-btn:hover{border-color:var(--neon-orange);background:#ff4d001a}@media (max-width: 768px){.invite-links-modal{width:95%;max-height:90vh}.invite-stats{flex-direction:column;gap:var(--space-md)}.invite-actions{flex-direction:column}.invite-actions button{width:100%}}.manage-groups-modal{width:90%;max-width:700px;max-height:85vh;overflow-y:auto}.group-form{margin-bottom:var(--space-xl);overflow:hidden}.group-form h3{font-size:1.125rem;margin-bottom:var(--space-lg);color:var(--neon-cyan)}.form-section{margin-top:var(--space-lg)}.form-label{display:block;font-size:.875rem;font-weight:500;color:var(--slate-gray);margin-bottom:var(--space-sm);text-transform:uppercase;letter-spacing:.05em}.color-picker{display:flex;gap:var(--space-sm);flex-wrap:wrap}.color-option{width:48px;height:48px;border-radius:8px;border:2px solid transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.25rem;color:var(--deep-space);font-weight:700;transition:all .2s;position:relative}.color-option:hover{transform:scale(1.1);box-shadow:0 0 20px currentColor}.color-option.selected{border-color:#fff;box-shadow:0 0 20px currentColor}.icon-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(48px,1fr));gap:var(--space-sm)}.icon-option{width:48px;height:48px;border-radius:8px;border:1px solid rgba(0,255,255,.2);background:#2a2a3a80;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.5rem;transition:all .2s}.icon-option:hover{background:#2a2a3acc;border-color:var(--neon-cyan);transform:scale(1.1)}.icon-option.selected{background:#00ffff1a;border-color:var(--neon-cyan);box-shadow:0 0 15px #00ffff4d}.form-actions{display:flex;gap:var(--space-sm);justify-content:flex-end;margin-top:var(--space-xl)}.create-group-btn{width:100%;margin-bottom:var(--space-xl)}.groups-list{display:flex;flex-direction:column;gap:var(--space-md)}.group-item{padding:var(--space-lg)}.group-item-header{display:flex;justify-content:space-between;align-items:center;gap:var(--space-md)}.group-item-info{display:flex;align-items:center;gap:var(--space-md);flex:1;min-width:0}.group-item-icon{font-size:2rem;flex-shrink:0}.group-item-name{font-size:1rem;font-weight:600;color:var(--text-primary);margin:0 0 var(--space-xs) 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.group-item-count{font-size:.875rem;color:var(--carbon-gray);margin:0}.group-item-actions{display:flex;gap:var(--space-sm);flex-shrink:0}.delete-btn{color:var(--neon-orange)}.delete-btn:hover{border-color:var(--neon-orange);background:#ff4d001a}.empty-state{text-align:center;padding:var(--space-4xl) var(--space-xl);color:var(--slate-gray)}.empty-state .subtle{font-size:.875rem;color:var(--carbon-gray);margin-top:var(--space-sm)}@media (max-width: 768px){.manage-groups-modal{width:95%;max-height:90vh}.group-item-header{flex-direction:column;align-items:flex-start}.group-item-actions{width:100%;justify-content:stretch}.group-item-actions button{flex:1}.color-picker{justify-content:center}.icon-picker{grid-template-columns:repeat(5,1fr)}}.friend-group{margin-bottom:var(--space-lg);border-left:3px solid var(--neon-cyan);background:#0a0a0f80;border-radius:8px;overflow:hidden}.group-header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-md) var(--space-lg);cursor:pointer;transition:background .2s}.group-header:hover{background:#00ffff0d}.group-title{display:flex;align-items:center;gap:var(--space-md)}.group-icon{font-size:1.5rem}.group-title h3{font-size:1.125rem;font-weight:600;color:var(--text-primary);margin:0}.group-count{font-size:.875rem;color:var(--carbon-gray);font-weight:400}.group-actions{display:flex;align-items:center;gap:var(--space-md)}.collapse-icon{color:var(--neon-cyan);font-size:.875rem;transition:transform .3s}.group-content{overflow:hidden}.friends-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--space-md);padding:var(--space-lg);padding-top:var(--space-md)}.friend-card{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md);background:#2a2a3a80;border:1px solid rgba(0,255,255,.1);border-radius:8px;transition:all .2s;text-decoration:none;color:inherit}.friend-card:hover{background:#2a2a3acc;border-color:var(--neon-cyan);transform:translateY(-2px);box-shadow:0 4px 12px #0ff3}.friend-card-info{display:flex;flex-direction:column;gap:var(--space-xs);flex:1;min-width:0}.friend-card-name{font-size:.9375rem;font-weight:500;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.group-empty{padding:var(--space-xl);text-align:center;color:var(--carbon-gray);font-size:.875rem}@media (max-width: 768px){.friends-grid{grid-template-columns:1fr}.group-header{padding:var(--space-sm) var(--space-md)}.group-title h3{font-size:1rem}.group-icon{font-size:1.25rem}.group-actions button{font-size:.75rem;padding:var(--space-xs) var(--space-sm)}}.lobby{min-height:100vh;position:relative;padding-top:var(--navbar-height)}.lobby-loading{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-lg);position:relative;z-index:1;text-align:center}.lobby-loading h2{font-size:var(--text-3xl);color:var(--neon-cyan);text-shadow:0 0 20px var(--glow-cyan)}.lobby-loading p{color:var(--text-secondary);font-size:var(--text-lg)}.lobby-header{position:relative;z-index:1;padding:var(--space-xl) 0;border-bottom:1px solid rgba(0,255,255,.1);background:#0a0a0fcc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.lobby-header-content{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-lg)}.lobby-welcome h1{font-size:var(--text-2xl);margin-bottom:var(--space-xs)}.lobby-actions{display:flex;gap:var(--space-md)}.lobby-main{position:relative;z-index:1;padding:var(--space-2xl) 0}.lobby-section{margin-bottom:var(--space-3xl)}.lobby-section-title{display:flex;align-items:center;gap:var(--space-md);font-size:var(--text-xl);margin-bottom:var(--space-lg)}.lobby-empty{text-align:center;padding:var(--space-3xl);background:var(--carbon-gray);border:1px dashed var(--steel-gray);border-radius:var(--radius-lg)}.lobby-empty p{margin-bottom:var(--space-lg)}.streams-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--space-lg)}.stream-card-link{text-decoration:none;color:inherit}.stream-card-header{display:flex;align-items:center;gap:var(--space-md);margin-bottom:var(--space-md)}.stream-card-host{display:flex;flex-direction:column;gap:var(--space-xs)}.stream-card-host-name{font-weight:var(--font-semibold)}.stream-card-title{font-size:var(--text-lg);font-family:var(--font-body);text-transform:none;margin-bottom:var(--space-sm)}.stream-card-meta{display:flex;justify-content:space-between;font-size:var(--text-sm)}.friends-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:var(--space-lg)}.friends-grid-offline{opacity:.6}.friend-card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--space-lg);gap:var(--space-sm);position:relative}.friend-card-name{font-weight:var(--font-semibold)}.friend-card-username{font-size:var(--text-sm)}.friend-card-badge{position:absolute;top:var(--space-md);right:var(--space-md)}.friend-card-offline{background:transparent;border:1px dashed var(--steel-gray)}.friend-requests-list{display:flex;flex-direction:column;gap:var(--space-md)}.friend-request-card{display:flex;align-items:center;gap:var(--space-md)}.friend-request-info{flex:1;display:flex;flex-direction:column}.friend-request-name{font-weight:var(--font-semibold)}.friend-request-username{font-size:var(--text-sm)}.friend-request-actions{display:flex;gap:var(--space-sm)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:var(--z-modal);padding:var(--space-md)}.modal{background:var(--carbon-gray);border:1px solid rgba(0,255,255,.3);border-radius:var(--radius-lg);padding:var(--space-xl);width:100%;max-width:400px;position:relative}.modal:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--gradient-cta)}.modal-title{font-size:var(--text-2xl);margin-bottom:var(--space-sm)}.modal-subtitle{margin-bottom:var(--space-lg)}.modal-actions{display:flex;justify-content:flex-end;gap:var(--space-md);margin-top:var(--space-xl)}@media (max-width: 768px){.lobby-header-content{flex-direction:column;align-items:flex-start}.lobby-actions{width:100%}.lobby-actions .btn{flex:1}.friends-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}.friend-request-card{flex-wrap:wrap}.friend-request-actions{width:100%;margin-top:var(--space-sm)}}.host-stream-page{min-height:100vh;padding-top:var(--navbar-height);position:relative}.host-stream-container{padding:var(--space-xl) var(--space-md);max-width:1200px;margin:0 auto}.host-stream-header{text-align:center;margin-bottom:var(--space-2xl)}.host-stream-title{font-size:var(--text-3xl);margin-bottom:var(--space-sm)}.host-stream-subtitle{color:var(--text-secondary);font-size:var(--text-lg)}.host-stream-grid{display:grid;grid-template-columns:1fr;gap:var(--space-xl)}@media (min-width: 1024px){.host-stream-grid{grid-template-columns:1fr 350px}}.host-stream-main,.host-stream-sidebar{display:flex;flex-direction:column;gap:var(--space-lg)}.setup-status{padding:var(--space-xl)}.setup-status-title{font-size:var(--text-xl);margin-bottom:var(--space-lg);display:flex;align-items:center;gap:var(--space-sm)}.setup-status-items{display:flex;flex-direction:column;gap:var(--space-md)}.setup-status-item{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md);background:var(--slate-gray);border-radius:var(--radius-md);transition:all var(--duration-normal) var(--ease-smooth)}.setup-status-item:hover{background:var(--steel-gray)}.status-indicator{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-full);flex-shrink:0}.status-indicator.ready{background:#39ff1433;color:var(--neon-green)}.status-indicator.not-ready{background:#ff4d0033;color:var(--neon-orange)}.status-indicator.checking{background:#0ff3;color:var(--neon-cyan);animation:pulse 1s infinite}.status-info{flex:1}.status-name{font-weight:var(--font-medium);margin-bottom:var(--space-xs)}.status-description{font-size:var(--text-sm);color:var(--text-muted)}.status-action{flex-shrink:0}.setup-status-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-lg)}.setup-status-header .setup-status-title{margin-bottom:0}.recheck-btn{display:flex;align-items:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-sm);background:transparent;border:1px solid var(--steel-gray);border-radius:var(--radius-md);color:var(--text-muted);font-size:var(--text-xs);cursor:pointer;transition:all var(--duration-fast) var(--ease-smooth)}.recheck-btn:hover{border-color:var(--neon-cyan);color:var(--neon-cyan)}.recheck-btn svg{transition:transform var(--duration-normal) var(--ease-smooth)}.recheck-btn:hover svg{transform:rotate(180deg)}.setup-status-item.has-error{border:1px solid rgba(255,77,0,.3);background:#ff4d000d}.status-action-link{flex-shrink:0;padding:var(--space-xs) var(--space-md);background:transparent;border:1px solid var(--neon-cyan);border-radius:var(--radius-md);color:var(--neon-cyan);font-size:var(--text-xs);font-weight:var(--font-medium);text-decoration:none;transition:all var(--duration-fast) var(--ease-smooth)}.status-action-link:hover{background:#00ffff1a}.tailscale-ip{display:inline-block;margin-left:var(--space-sm);padding:2px var(--space-xs);background:var(--deep-space);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:var(--text-xs);color:var(--neon-cyan)}.spin{animation:spin 1s linear infinite}.setup-warning{display:flex;align-items:flex-start;gap:var(--space-sm);margin-top:var(--space-lg);padding:var(--space-md);background:#ffa5001a;border:1px solid rgba(255,165,0,.3);border-radius:var(--radius-md);color:var(--neon-orange);font-size:var(--text-sm)}.setup-warning svg{flex-shrink:0;margin-top:2px}.setup-warning a{color:var(--neon-cyan);text-decoration:underline}.setup-warning a:hover{color:var(--electric-blue)}.stream-settings{padding:var(--space-xl)}.stream-settings-title{font-size:var(--text-xl);margin-bottom:var(--space-lg)}.stream-form{display:flex;flex-direction:column;gap:var(--space-lg)}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md)}@media (max-width: 768px){.form-row{grid-template-columns:1fr}}.form-group{display:flex;flex-direction:column;gap:var(--space-xs)}.form-label{font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--text-secondary)}.form-select{padding:var(--space-sm) var(--space-md);background:var(--slate-gray);border:1px solid var(--steel-gray);border-radius:var(--radius-md);color:var(--text-primary);font-size:var(--text-base);cursor:pointer;transition:all var(--duration-fast) var(--ease-smooth)}.form-select:hover{border-color:var(--neon-cyan)}.form-select:focus{outline:none;border-color:var(--neon-cyan);box-shadow:0 0 0 2px #0ff3}.privacy-options{display:flex;flex-direction:column;gap:var(--space-sm)}.privacy-option{display:flex;align-items:flex-start;gap:var(--space-md);padding:var(--space-md);background:var(--slate-gray);border:1px solid var(--steel-gray);border-radius:var(--radius-md);cursor:pointer;transition:all var(--duration-fast) var(--ease-smooth)}.privacy-option:hover{border-color:var(--neon-cyan)}.privacy-option.selected{border-color:var(--neon-cyan);background:#00ffff1a}.privacy-radio{position:relative;width:20px;height:20px;border:2px solid var(--steel-gray);border-radius:var(--radius-full);flex-shrink:0;margin-top:2px}.privacy-option.selected .privacy-radio{border-color:var(--neon-cyan)}.privacy-option.selected .privacy-radio:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:10px;height:10px;background:var(--neon-cyan);border-radius:var(--radius-full)}.privacy-info h4{font-size:var(--text-base);margin-bottom:var(--space-xs)}.privacy-info p{font-size:var(--text-sm);color:var(--text-muted)}.form-actions{display:flex;gap:var(--space-md);margin-top:var(--space-md)}.live-stream-panel{padding:var(--space-xl);border:2px solid var(--neon-green);box-shadow:0 0 30px #39ff144d}.live-stream-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-xl)}.live-stream-title{font-size:var(--text-xl);display:flex;align-items:center;gap:var(--space-sm)}.live-indicator{display:flex;align-items:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-sm);background:#39ff1433;border-radius:var(--radius-full);font-size:var(--text-sm);color:var(--neon-green)}.live-dot{width:8px;height:8px;background:var(--neon-green);border-radius:var(--radius-full);animation:pulse 1s infinite}.live-stream-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-md);margin-bottom:var(--space-xl)}.live-stat{text-align:center;padding:var(--space-md);background:var(--slate-gray);border-radius:var(--radius-md)}.live-stat-value{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:var(--font-bold);color:var(--neon-cyan)}.live-stat-label{font-size:var(--text-sm);color:var(--text-muted)}.stream-info-grid{display:flex;flex-direction:column;gap:var(--space-sm);margin-bottom:var(--space-xl);padding:var(--space-md);background:var(--slate-gray);border-radius:var(--radius-md)}.stream-info-item{display:flex;justify-content:space-between;font-size:var(--text-sm)}.stream-info-item span:first-child{color:var(--text-muted)}.stream-info-item span:last-child{color:var(--text-primary);font-family:var(--font-mono)}.invite-code-display{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md);background:var(--slate-gray);border:1px dashed var(--neon-magenta);border-radius:var(--radius-md);margin-bottom:var(--space-xl)}.invite-code-label{font-size:var(--text-sm);color:var(--text-muted)}.invite-code-value{font-family:var(--font-mono);font-size:var(--text-xl);font-weight:var(--font-bold);color:var(--neon-magenta);letter-spacing:.2em}.copy-invite-btn{margin-left:auto;padding:var(--space-xs) var(--space-sm);background:transparent;border:1px solid var(--neon-magenta);border-radius:var(--radius-sm);color:var(--neon-magenta);font-size:var(--text-sm);cursor:pointer;transition:all var(--duration-fast) var(--ease-smooth)}.copy-invite-btn:hover{background:#f0f3}.live-stream-actions{display:flex;gap:var(--space-md)}.viewers-list{display:flex;flex-direction:column;gap:var(--space-sm);max-height:300px;overflow-y:auto}.viewer-name{font-weight:var(--font-medium)}.viewer-joined{font-size:var(--text-xs);color:var(--text-muted)}.no-viewers{text-align:center;padding:var(--space-xl);color:var(--text-muted)}.no-viewers svg{width:48px;height:48px;margin-bottom:var(--space-md);opacity:.5}.quick-tips{padding:var(--space-lg)}.quick-tips-title{font-size:var(--text-lg);margin-bottom:var(--space-md);display:flex;align-items:center;gap:var(--space-sm)}.tips-list{display:flex;flex-direction:column;gap:var(--space-sm)}.tip-item{display:flex;align-items:flex-start;gap:var(--space-sm);font-size:var(--text-sm);color:var(--text-secondary)}.tip-item svg{width:16px;height:16px;color:var(--neon-cyan);flex-shrink:0;margin-top:2px}.stream-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-4xl);text-align:center}.elapsed-time{font-family:var(--font-mono);font-size:var(--text-2xl);color:var(--neon-green)}.stream-type-selector{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-md);margin-top:var(--space-sm)}.stream-type-option{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md);background:var(--slate-gray);border:2px solid var(--steel-gray);border-radius:var(--radius-md);cursor:pointer;transition:all var(--duration-fast) var(--ease-smooth)}.stream-type-option:hover{border-color:var(--neon-cyan);transform:translateY(-2px)}.stream-type-option.selected{border-color:var(--neon-cyan);background:#00ffff1a;box-shadow:0 0 20px #00ffff4d}.stream-type-icon{font-size:2rem;flex-shrink:0}.stream-type-info h4{font-size:var(--text-base);font-weight:600;color:var(--text-primary);margin:0 0 var(--space-xs) 0}.stream-type-info p{font-size:var(--text-sm);color:var(--text-secondary);margin:0}.obs-setup-card{margin-top:var(--space-lg)}.obs-setup-title{font-size:var(--text-xl);font-weight:600;color:var(--neon-magenta);margin:0 0 var(--space-sm) 0}.obs-setup-intro{color:var(--text-secondary);margin-bottom:var(--space-lg)}.obs-setup-steps{display:flex;flex-direction:column;gap:var(--space-lg)}.obs-setup-step{display:flex;gap:var(--space-md);align-items:flex-start}.obs-setup-step .step-number{flex-shrink:0;width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--neon-magenta),var(--neon-purple));display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--text-base);color:var(--text-primary);box-shadow:0 0 15px #f0f6}.obs-setup-step .step-content{flex:1}.obs-setup-step h4{font-size:var(--text-base);font-weight:600;color:var(--text-primary);margin:0 0 var(--space-xs) 0}.obs-setup-step p{color:var(--text-secondary);margin:var(--space-xs) 0;font-size:var(--text-sm)}.obs-setup-step ul{margin:var(--space-sm) 0;padding-left:var(--space-lg);color:var(--text-secondary);font-size:var(--text-sm)}.obs-setup-step ul li{margin:var(--space-xs) 0}.obs-download-link{display:inline-flex;align-items:center;gap:var(--space-xs);padding:var(--space-sm) var(--space-md);margin-top:var(--space-sm);background:#ff00ff1a;border:1px solid var(--neon-magenta);border-radius:var(--radius-md);color:var(--neon-magenta);text-decoration:none;font-size:var(--text-sm);font-weight:500;transition:all var(--duration-fast) var(--ease-smooth)}.obs-download-link:hover{background:#f0f3;box-shadow:0 0 15px #ff00ff4d;transform:translate(4px)}.obs-note{font-style:italic;color:var(--carbon-gray);font-size:var(--text-xs)}@media (max-width: 768px){.obs-setup-step{flex-direction:column;gap:var(--space-sm)}.obs-setup-step .step-number{width:28px;height:28px;font-size:var(--text-sm)}}.watch-stream-page{min-height:100vh;padding-top:var(--navbar-height);position:relative}.watch-stream-container{padding:var(--space-lg) var(--space-md);max-width:1400px;margin:0 auto}.watch-stream-grid{display:grid;grid-template-columns:1fr;gap:var(--space-lg)}@media (min-width: 1024px){.watch-stream-grid{grid-template-columns:1fr 350px}}.watch-stream-main,.watch-stream-sidebar{display:flex;flex-direction:column;gap:var(--space-lg)}.stream-player-card{padding:0;overflow:hidden}.stream-player-area{min-height:280px;background:linear-gradient(135deg,rgba(0,255,255,.08) 0%,var(--carbon-gray) 50%,rgba(157,0,255,.05) 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;padding:var(--space-lg)}@media (min-width: 768px){.stream-player-area{aspect-ratio:16 / 9;min-height:auto}}.stream-player-area:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,transparent 49%,rgba(0,255,255,.05) 50%,transparent 51%),linear-gradient(0deg,transparent 49%,rgba(0,255,255,.05) 50%,transparent 51%);background-size:30px 30px;pointer-events:none;opacity:.7}.stream-connected-view{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-md);z-index:1;width:100%;text-align:center}.connected-status{display:flex;flex-direction:column;align-items:center;gap:var(--space-md);margin-bottom:var(--space-lg)}@media (min-width: 640px){.connected-status{flex-direction:row;gap:var(--space-lg);text-align:left}}.connected-icon{width:56px;height:56px;color:var(--neon-cyan);filter:drop-shadow(0 0 20px rgba(0,255,255,.6));animation:pulse-glow 2s ease-in-out infinite;flex-shrink:0}@keyframes pulse-glow{0%,to{filter:drop-shadow(0 0 20px rgba(0,255,255,.6))}50%{filter:drop-shadow(0 0 35px rgba(0,255,255,.9))}}.connected-info h3{font-size:var(--text-lg);margin-bottom:var(--space-xs);color:var(--text-primary)}@media (min-width: 640px){.connected-info h3{font-size:var(--text-xl)}}.connected-info p{font-size:var(--text-sm);color:var(--text-secondary)}.quick-connect-bar{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-sm);padding:var(--space-md);background:#00000080;border-radius:var(--radius-lg);border:1px solid rgba(0,255,255,.3);width:100%;max-width:400px}@media (min-width: 640px){.quick-connect-bar{flex-direction:row;align-items:center;width:auto;max-width:none}}.ip-display{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-md);background:var(--slate-gray);border-radius:var(--radius-md);cursor:pointer;transition:all var(--duration-fast) var(--ease-smooth);border:1px solid transparent}.ip-display:hover{background:var(--steel-gray);border-color:var(--neon-cyan)}.ip-display:active{transform:scale(.98)}.ip-label{font-size:var(--text-xs);color:var(--text-muted);text-transform:uppercase}.ip-value{font-family:var(--font-mono);font-size:var(--text-lg);color:var(--neon-cyan);text-shadow:0 0 10px rgba(0,255,255,.5)}.ip-display svg{color:var(--text-muted);opacity:.6}.quick-connect-btn{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-md) var(--space-lg);background:linear-gradient(135deg,var(--neon-cyan),var(--electric-blue));color:var(--deep-space);border:none;border-radius:var(--radius-md);font-family:var(--font-display);font-size:var(--text-md);font-weight:var(--font-bold);cursor:pointer;transition:all var(--duration-fast) var(--ease-smooth);box-shadow:0 0 15px #00ffff4d}.quick-connect-btn:hover{transform:scale(1.02);box-shadow:0 0 25px #00ffff80}.quick-connect-btn:active{transform:scale(.98)}.help-btn{display:flex;align-items:center;justify-content:center;width:100%;height:44px;background:transparent;border:1px solid var(--steel-gray);border-radius:var(--radius-md);color:var(--text-muted);cursor:pointer;transition:all var(--duration-fast) var(--ease-smooth);font-size:var(--text-sm);gap:var(--space-sm)}.help-btn:after{content:"Need help connecting?"}@media (min-width: 640px){.help-btn{width:44px;height:44px}.help-btn:after{content:none}}.help-btn:hover{border-color:var(--neon-cyan);color:var(--neon-cyan)}.connection-guide-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#000000d9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:10;animation:fadeIn .2s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.connection-guide-modal{background:linear-gradient(180deg,var(--carbon-gray) 0%,var(--deep-space) 100%);border:1px solid rgba(0,255,255,.3);border-radius:var(--radius-xl);padding:var(--space-xl);max-width:480px;width:95%;position:relative;box-shadow:0 0 40px #00ffff26,0 20px 60px #00000080;animation:slideUp .3s ease-out}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.guide-close-btn{position:absolute;top:var(--space-md);right:var(--space-md);width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:var(--text-muted);cursor:pointer;border-radius:var(--radius-md);transition:all var(--duration-fast) var(--ease-smooth)}.guide-close-btn:hover{background:var(--slate-gray);color:var(--text-primary)}.guide-header{text-align:center;margin-bottom:var(--space-xl)}.guide-icon{width:56px;height:56px;color:var(--neon-cyan);filter:drop-shadow(0 0 20px rgba(0,255,255,.5));margin-bottom:var(--space-md)}.guide-header h2{font-size:var(--text-xl);margin-bottom:var(--space-sm)}.guide-header p{font-size:var(--text-sm);color:var(--text-secondary);max-width:320px;margin:0 auto}.guide-steps{display:flex;flex-direction:column;gap:var(--space-md);margin-bottom:var(--space-xl)}.guide-step{display:flex;align-items:flex-start;gap:var(--space-md);padding:var(--space-md);background:#00ffff0d;border-radius:var(--radius-md);border:1px solid rgba(0,255,255,.1)}.guide-step .step-number{width:28px;height:28px;min-width:28px;display:flex;align-items:center;justify-content:center;background:var(--neon-cyan);color:var(--deep-space);border-radius:var(--radius-full);font-weight:var(--font-bold);font-size:var(--text-sm)}.step-content h4{font-size:var(--text-sm);font-weight:var(--font-semibold);margin-bottom:var(--space-xs)}.step-content p{font-size:var(--text-xs);color:var(--text-muted);margin:0}.step-content a{color:var(--neon-cyan);text-decoration:none}.step-content a:hover{text-decoration:underline}.guide-ip-box{display:inline-flex;align-items:center;gap:var(--space-sm);margin-top:var(--space-xs);padding:var(--space-xs) var(--space-sm);background:var(--slate-gray);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--duration-fast) var(--ease-smooth)}.guide-ip-box:hover{background:var(--steel-gray)}.guide-ip-box code{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--neon-cyan)}.guide-ip-box svg{color:var(--text-muted);opacity:.6}.guide-actions{display:flex;flex-direction:column;gap:var(--space-sm);margin-bottom:var(--space-md)}.guide-connect-btn{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-md) var(--space-xl);background:linear-gradient(135deg,var(--neon-cyan),var(--electric-blue));color:var(--deep-space);border:none;border-radius:var(--radius-md);font-family:var(--font-display);font-size:var(--text-md);font-weight:var(--font-bold);cursor:pointer;transition:all var(--duration-fast) var(--ease-smooth)}.guide-connect-btn:hover{transform:scale(1.02);box-shadow:0 0 25px #0ff6}.guide-dismiss-btn{padding:var(--space-sm) var(--space-xl);background:transparent;color:var(--text-secondary);border:1px solid var(--steel-gray);border-radius:var(--radius-md);font-family:var(--font-display);font-size:var(--text-sm);cursor:pointer;transition:all var(--duration-fast) var(--ease-smooth)}.guide-dismiss-btn:hover{border-color:var(--text-muted);color:var(--text-primary)}.guide-remember{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);font-size:var(--text-xs);color:var(--text-muted);cursor:pointer}.guide-remember input{width:16px;height:16px;accent-color:var(--neon-cyan);cursor:pointer}.guide-remember span{-webkit-user-select:none;user-select:none}.guide-tabs{display:flex;gap:var(--space-xs);margin-bottom:var(--space-lg);padding:var(--space-xs);background:var(--slate-gray);border-radius:var(--radius-md)}.guide-tab{flex:1;padding:var(--space-sm) var(--space-md);background:transparent;border:none;border-radius:var(--radius-sm);color:var(--text-muted);font-size:var(--text-xs);font-weight:var(--font-medium);cursor:pointer;transition:all var(--duration-fast) var(--ease-smooth)}.guide-tab:hover{color:var(--text-primary);background:#00ffff1a}.guide-tab.active{background:var(--neon-cyan);color:var(--deep-space)}.ip-warning{margin-top:var(--space-sm);padding:var(--space-sm);background:#ffa50026;border:1px solid rgba(255,165,0,.3);border-radius:var(--radius-sm);color:var(--neon-orange);font-size:var(--text-xs)}.guide-details{margin-top:var(--space-md);border:1px solid var(--steel-gray);border-radius:var(--radius-md);overflow:hidden}.guide-details-summary{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-md);background:var(--slate-gray);cursor:pointer;font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--text-secondary);transition:all var(--duration-fast) var(--ease-smooth);list-style:none}.guide-details-summary::-webkit-details-marker{display:none}.guide-details-summary:after{content:"+";margin-left:auto;font-size:var(--text-lg);color:var(--neon-cyan);font-weight:var(--font-bold)}.guide-details[open] .guide-details-summary:after{content:"−"}.guide-details-summary:hover{background:var(--steel-gray);color:var(--text-primary)}.guide-details-summary svg{color:var(--neon-cyan)}.guide-details-content{padding:var(--space-lg);background:#0000004d}.guide-details-content h4{font-size:var(--text-md);margin-bottom:var(--space-sm);color:var(--neon-cyan)}.guide-details-content>p{font-size:var(--text-sm);color:var(--text-secondary);margin-bottom:var(--space-lg);line-height:1.6}.setup-section{margin-bottom:var(--space-lg);padding-bottom:var(--space-lg);border-bottom:1px solid var(--steel-gray)}.setup-section:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}.setup-section h5{font-size:var(--text-sm);font-weight:var(--font-semibold);margin-bottom:var(--space-sm);color:var(--text-primary)}.setup-section p{font-size:var(--text-sm);color:var(--text-secondary);margin-bottom:var(--space-sm);line-height:1.5}.setup-section ol,.setup-section ul{margin:var(--space-sm) 0;padding-left:var(--space-lg)}.setup-section li{font-size:var(--text-sm);color:var(--text-secondary);margin-bottom:var(--space-xs);line-height:1.5}.setup-section a{color:var(--neon-cyan);text-decoration:none}.setup-section a:hover{text-decoration:underline}.setup-section code{padding:var(--space-xs) var(--space-sm);background:var(--slate-gray);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:var(--text-sm);color:var(--neon-cyan)}.clickable-code{cursor:pointer;transition:all var(--duration-fast) var(--ease-smooth)}.clickable-code:hover{background:var(--steel-gray);box-shadow:0 0 10px #00ffff4d}.important-note{padding:var(--space-md);background:#00ffff1a;border:1px solid rgba(0,255,255,.3);border-radius:var(--radius-md);margin-top:var(--space-sm)}.important-note strong{color:var(--neon-cyan)}.download-links{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-sm);margin-top:var(--space-md)}.download-link{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-md);background:var(--slate-gray);border:1px solid var(--steel-gray);border-radius:var(--radius-md);color:var(--text-primary);font-size:var(--text-sm);font-weight:var(--font-medium);text-decoration:none;transition:all var(--duration-fast) var(--ease-smooth)}.download-link:hover{background:var(--steel-gray);border-color:var(--neon-cyan);color:var(--neon-cyan);transform:translateY(-2px)}.download-link svg{flex-shrink:0}.sharing-section{background:#9d00ff1a;border:1px solid rgba(157,0,255,.3);border-radius:var(--radius-md);padding:var(--space-md);margin-top:var(--space-md)}.sharing-section h5{color:var(--neon-magenta)}.troubleshoot-section{background:#ffa5001a;border:1px solid rgba(255,165,0,.3);border-radius:var(--radius-md);padding:var(--space-md)}.troubleshoot-section h5{color:var(--neon-orange)}.troubleshoot-section ul{list-style:none;padding-left:0}.troubleshoot-section li{padding-left:var(--space-lg);position:relative}.troubleshoot-section li:before{content:"•";position:absolute;left:var(--space-sm);color:var(--neon-orange)}.troubleshoot-section strong{color:var(--text-primary)}@media (max-width: 640px){.connection-guide-modal{padding:var(--space-lg);max-height:90vh;overflow-y:auto}.guide-step{flex-direction:column;align-items:flex-start;gap:var(--space-sm)}.guide-header h2{font-size:var(--text-lg)}.guide-actions{gap:var(--space-md)}}.stream-info-bar{display:flex;align-items:center;justify-content:space-between;padding:var(--space-md);background:var(--slate-gray);flex-wrap:wrap;gap:var(--space-md)}.stream-host-info{display:flex;align-items:center;gap:var(--space-md)}.host-details h3{font-size:var(--text-lg);margin-bottom:var(--space-xs)}.host-username{font-size:var(--text-sm);color:var(--text-muted)}.stream-meta{display:flex;align-items:center;gap:var(--space-lg)}.meta-item{display:flex;align-items:center;gap:var(--space-xs);font-size:var(--text-sm);color:var(--text-secondary)}.meta-item svg{width:16px;height:16px;color:var(--neon-cyan)}.stream-actions{display:flex;gap:var(--space-sm)}.stream-details-card{padding:var(--space-lg)}.stream-title{font-size:var(--text-xl);margin-bottom:var(--space-sm);display:flex;align-items:center;gap:var(--space-sm)}.stream-category{display:inline-block;padding:var(--space-xs) var(--space-sm);background:#f0f3;border-radius:var(--radius-sm);font-size:var(--text-sm);color:var(--neon-magenta);margin-bottom:var(--space-md)}.stream-description{color:var(--text-secondary);font-size:var(--text-sm);line-height:1.6}.tech-specs{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-top:var(--space-md);padding-top:var(--space-md);border-top:1px solid var(--steel-gray)}.tech-spec{display:flex;align-items:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-sm);background:var(--slate-gray);border-radius:var(--radius-sm);font-size:var(--text-xs);font-family:var(--font-mono);color:var(--text-muted)}.chat-panel{display:flex;flex-direction:column;height:400px;overflow:hidden}.chat-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-md);border-bottom:1px solid var(--steel-gray)}.chat-title{font-size:var(--text-lg);display:flex;align-items:center;gap:var(--space-sm)}.chat-messages{flex:1;overflow-y:auto;padding:var(--space-md);display:flex;flex-direction:column;gap:var(--space-sm)}.chat-message{display:flex;gap:var(--space-sm);padding:var(--space-sm);border-radius:var(--radius-sm);transition:background var(--duration-fast) var(--ease-smooth)}.chat-message:hover{background:var(--slate-gray)}.chat-message-content{flex:1}.chat-message-header{display:flex;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-xs)}.chat-sender{font-weight:var(--font-medium);color:var(--neon-cyan)}.chat-sender.host{color:var(--neon-magenta)}.chat-time{font-size:var(--text-xs);color:var(--text-muted)}.chat-text{font-size:var(--text-sm);color:var(--text-primary);word-break:break-word}.chat-input-area{display:flex;gap:var(--space-sm);padding:var(--space-md);border-top:1px solid var(--steel-gray)}.chat-input{flex:1;padding:var(--space-sm) var(--space-md);background:var(--slate-gray);border:1px solid var(--steel-gray);border-radius:var(--radius-md);color:var(--text-primary);font-size:var(--text-sm);resize:none}.chat-input:focus{outline:none;border-color:var(--neon-cyan)}.chat-send-btn{padding:var(--space-sm) var(--space-md);background:var(--neon-cyan);color:var(--deep-space);border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--duration-fast) var(--ease-smooth)}.chat-send-btn:hover{background:var(--electric-blue)}.chat-send-btn:disabled{opacity:.5;cursor:not-allowed}.no-messages{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--text-muted);font-size:var(--text-sm)}.viewers-panel{padding:var(--space-lg)}.viewers-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-md)}.viewers-title{font-size:var(--text-lg);display:flex;align-items:center;gap:var(--space-sm)}.viewer-count{padding:var(--space-xs) var(--space-sm);background:#0ff3;border-radius:var(--radius-full);font-size:var(--text-sm);color:var(--neon-cyan)}.viewers-list{display:flex;flex-direction:column;gap:var(--space-sm);max-height:200px;overflow-y:auto}.viewer-item{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-sm);background:var(--slate-gray);border-radius:var(--radius-md)}.viewer-item.host{border:1px solid var(--neon-magenta);background:#ff00ff1a}.viewer-info{flex:1}.viewer-name{font-weight:var(--font-medium);font-size:var(--text-sm)}.viewer-role{font-size:var(--text-xs);color:var(--neon-magenta)}.stream-not-found{min-height:calc(100vh - var(--navbar-height));display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--space-xl)}.stream-not-found svg{width:80px;height:80px;color:var(--neon-orange);margin-bottom:var(--space-lg);opacity:.7}.stream-not-found h2{font-size:var(--text-2xl);margin-bottom:var(--space-sm)}.stream-not-found p{color:var(--text-muted);margin-bottom:var(--space-xl)}.stream-loading{min-height:calc(100vh - var(--navbar-height));display:flex;flex-direction:column;align-items:center;justify-content:center}.stream-loading svg{width:48px;height:48px;color:var(--neon-cyan);animation:spin 1s linear infinite;margin-bottom:var(--space-md)}.join-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000c;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000}.join-modal{background:var(--deep-space);border:1px solid var(--neon-cyan);border-radius:var(--radius-lg);padding:var(--space-2xl);max-width:400px;width:90%;text-align:center;box-shadow:0 0 40px #0ff3}.join-modal h2{font-size:var(--text-2xl);margin-bottom:var(--space-md)}.join-modal p{color:var(--text-secondary);margin-bottom:var(--space-xl)}.join-modal-actions{display:flex;gap:var(--space-md);justify-content:center}.settings-page{min-height:100vh;padding-top:var(--navbar-height);position:relative}.settings-container{padding:var(--space-xl) var(--space-md);max-width:1000px}.settings-header{text-align:center;margin-bottom:var(--space-2xl)}.settings-title{font-size:var(--text-3xl);margin-bottom:var(--space-sm);background:linear-gradient(135deg,var(--neon-cyan),var(--electric-blue));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.settings-subtitle{font-size:var(--text-lg);color:var(--text-secondary)}.settings-grid{display:flex;flex-direction:column;gap:var(--space-xl)}.settings-card{padding:0;overflow:hidden}.card-header{display:flex;align-items:center;gap:var(--space-lg);padding:var(--space-lg);background:linear-gradient(135deg,rgba(0,255,255,.1) 0%,transparent 100%);border-bottom:1px solid var(--steel-gray)}.card-icon{width:48px;height:48px;min-width:48px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);background:var(--slate-gray)}.card-icon svg{width:24px;height:24px}.card-icon.tailscale{background:linear-gradient(135deg,#0ff3,#00ffff1a);color:var(--neon-cyan)}.card-icon.sunshine{background:linear-gradient(135deg,#ffc80033,#ffa5001a);color:var(--neon-orange)}.card-icon.flow{background:linear-gradient(135deg,#9d00ff33,#9d00ff1a);color:var(--neon-magenta)}.card-header h2{font-size:var(--text-xl);margin-bottom:var(--space-xs)}.card-header p{font-size:var(--text-sm);color:var(--text-muted)}.card-content{padding:var(--space-lg)}.info-box{padding:var(--space-md);background:#00ffff0d;border:1px solid rgba(0,255,255,.2);border-radius:var(--radius-md);margin-bottom:var(--space-lg)}.info-box h4{font-size:var(--text-sm);color:var(--neon-cyan);margin-bottom:var(--space-sm)}.info-box ol{margin:0;padding-left:var(--space-lg)}.info-box li{font-size:var(--text-sm);color:var(--text-secondary);margin-bottom:var(--space-xs);line-height:1.5}.info-box code{padding:2px 6px;background:var(--slate-gray);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:var(--text-xs);color:var(--neon-cyan)}.form-section{display:flex;flex-direction:column;gap:var(--space-md)}.save-message{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-md);border-radius:var(--radius-md);font-size:var(--text-sm)}.save-message.success{background:#00ff001a;border:1px solid rgba(0,255,0,.3);color:#0f0}.save-message.error{background:#ff64641a;border:1px solid rgba(255,100,100,.3);color:#ff6464}.devices-section{margin-top:var(--space-xl);padding-top:var(--space-lg);border-top:1px solid var(--steel-gray)}.devices-section h4{font-size:var(--text-sm);color:var(--text-muted);margin-bottom:var(--space-md)}.device-item{display:flex;align-items:center;justify-content:space-between;padding:var(--space-md);background:var(--slate-gray);border-radius:var(--radius-md);border:1px solid var(--steel-gray)}.device-info{display:flex;flex-direction:column;gap:var(--space-xs)}.device-name{font-weight:var(--font-medium);font-size:var(--text-md)}.device-ip{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--neon-cyan);padding:2px 6px;background:var(--deep-space);border-radius:var(--radius-sm);display:inline-block}.device-last-seen{font-size:var(--text-xs);color:var(--text-muted)}.device-remove{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--steel-gray);border-radius:var(--radius-md);color:var(--text-muted);cursor:pointer;transition:all var(--duration-fast) var(--ease-smooth)}.device-remove:hover{background:#ff64641a;border-color:#ff6464;color:#ff6464}.setup-steps{display:flex;flex-direction:column;gap:var(--space-md)}.setup-step{display:flex;align-items:flex-start;gap:var(--space-md);padding:var(--space-md);background:var(--slate-gray);border-radius:var(--radius-md);transition:all var(--duration-fast) var(--ease-smooth)}.setup-step:hover{background:var(--steel-gray)}.step-num{width:28px;height:28px;min-width:28px;display:flex;align-items:center;justify-content:center;background:var(--neon-orange);color:var(--deep-space);border-radius:var(--radius-full);font-weight:var(--font-bold);font-size:var(--text-sm)}.step-info h4{font-size:var(--text-sm);font-weight:var(--font-semibold);margin-bottom:var(--space-xs)}.step-info p{font-size:var(--text-sm);color:var(--text-muted);margin:0}.step-info a{color:var(--neon-cyan);text-decoration:none}.step-info a:hover{text-decoration:underline}.sunshine-note{display:flex;align-items:flex-start;gap:var(--space-sm);margin-top:var(--space-lg);padding:var(--space-md);background:#ffa5001a;border:1px solid rgba(255,165,0,.3);border-radius:var(--radius-md)}.sunshine-note svg{color:var(--neon-orange);flex-shrink:0;margin-top:2px}.sunshine-note p{font-size:var(--text-sm);color:var(--text-secondary);margin:0;line-height:1.5}.sunshine-note strong{color:var(--neon-orange)}.flow-diagram{display:flex;flex-direction:column;align-items:center;gap:var(--space-md);padding:var(--space-xl);background:var(--slate-gray);border-radius:var(--radius-lg);margin-bottom:var(--space-lg)}@media (min-width: 640px){.flow-diagram{flex-direction:row;justify-content:center}}.flow-item{display:flex;flex-direction:column;align-items:center;gap:var(--space-sm);text-align:center}.flow-icon{width:64px;height:64px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-lg)}.flow-icon svg{width:32px;height:32px}.flow-icon.host{background:linear-gradient(135deg,#0ff3,#00ffff1a);color:var(--neon-cyan);border:2px solid var(--neon-cyan)}.flow-icon.viewer{background:linear-gradient(135deg,#9d00ff33,#9d00ff1a);color:var(--neon-magenta);border:2px solid var(--neon-magenta)}.flow-label strong{display:block;font-size:var(--text-sm);margin-bottom:var(--space-xs)}.flow-label span{font-size:var(--text-xs);color:var(--text-muted)}.flow-arrow{display:flex;flex-direction:column;align-items:center;gap:var(--space-xs);color:var(--neon-cyan);transform:rotate(90deg)}@media (min-width: 640px){.flow-arrow{transform:rotate(0);padding:0 var(--space-lg)}}.flow-arrow svg{width:32px;height:32px}.flow-arrow span{font-size:var(--text-xs);color:var(--text-muted);white-space:nowrap}.flow-explanation{padding:var(--space-md);background:#0000004d;border-radius:var(--radius-md)}.flow-explanation p{font-size:var(--text-sm);color:var(--text-secondary);margin:0;line-height:1.6}.flow-explanation p+p{margin-top:var(--space-sm)}.flow-explanation strong{color:var(--neon-cyan)}.settings-actions{display:flex;flex-direction:column;gap:var(--space-md);margin-top:var(--space-2xl);padding-top:var(--space-xl);border-top:1px solid var(--steel-gray)}@media (min-width: 480px){.settings-actions{flex-direction:row;justify-content:center}}.settings-loading{min-height:calc(100vh - var(--navbar-height));display:flex;flex-direction:column;align-items:center;justify-content:center}.settings-loading svg{width:48px;height:48px;color:var(--neon-cyan);animation:spin 1s linear infinite;margin-bottom:var(--space-md)}.import-platforms{display:flex;flex-direction:column;gap:var(--space-lg);margin-bottom:var(--space-xl)}.platform-connect{display:flex;justify-content:space-between;align-items:center;padding:var(--space-lg);background:#2a2a3a80;border:1px solid rgba(255,0,255,.2);border-radius:var(--radius-md);transition:all var(--duration-fast) var(--ease-smooth)}.platform-connect:hover{border-color:var(--neon-magenta);background:#2a2a3acc}.platform-info{display:flex;align-items:center;gap:var(--space-md)}.platform-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md)}.platform-icon.discord{background:#5865f233;color:#5865f2}.platform-icon.steam{background:#171a2180;color:#171a21}.platform-icon svg{width:32px;height:32px}.platform-text h3{font-size:var(--text-lg);font-weight:600;color:var(--text-primary);margin:0 0 var(--space-xs) 0}.platform-text p{font-size:var(--text-sm);color:var(--text-secondary);margin:0}.platform-text .connected{color:var(--neon-green)}.import-note{padding:var(--space-md);background:#00ffff0d;border:1px solid rgba(0,255,255,.2);border-radius:var(--radius-md)}.import-note p{font-size:var(--text-sm);color:var(--text-secondary);margin:0;line-height:1.6}@media (max-width: 768px){.platform-connect{flex-direction:column;gap:var(--space-md);align-items:flex-start}.platform-connect button{width:100%}}.privacy-page{min-height:100vh;padding-top:var(--navbar-height);position:relative}.privacy-container{padding:var(--space-2xl) var(--space-md);max-width:900px}.privacy-header{text-align:center;margin-bottom:var(--space-3xl)}.privacy-title{font-size:var(--text-4xl);margin-bottom:var(--space-md);background:linear-gradient(135deg,var(--neon-cyan),var(--electric-blue));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.privacy-subtitle{font-size:var(--text-lg);color:var(--text-secondary);margin-bottom:var(--space-lg)}.privacy-meta{display:flex;align-items:center;justify-content:center;gap:var(--space-lg);flex-wrap:wrap;font-size:var(--text-sm);color:var(--text-muted)}.privacy-badge{display:flex;align-items:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-sm);background:#00ffff1a;border:1px solid rgba(0,255,255,.3);border-radius:var(--radius-full);color:var(--neon-cyan);font-weight:var(--font-medium)}.privacy-content{display:flex;flex-direction:column;gap:var(--space-xl)}.privacy-section{background:linear-gradient(180deg,var(--carbon-gray) 0%,rgba(10,10,20,.8) 100%);border:1px solid var(--steel-gray);border-radius:var(--radius-lg);padding:var(--space-xl)}.privacy-section h2{font-size:var(--text-xl);margin-bottom:var(--space-lg);color:var(--text-primary);display:flex;align-items:center;gap:var(--space-sm)}.privacy-section h3{font-size:var(--text-md);color:var(--neon-cyan);margin-bottom:var(--space-sm);margin-top:var(--space-lg)}.privacy-section h3:first-of-type{margin-top:0}.privacy-section p{color:var(--text-secondary);line-height:1.7;margin-bottom:var(--space-md)}.privacy-section ul{margin:var(--space-md) 0;padding-left:var(--space-xl)}.privacy-section li{color:var(--text-secondary);line-height:1.6;margin-bottom:var(--space-sm)}.privacy-section li strong{color:var(--text-primary)}.subsection{margin-bottom:var(--space-lg);padding-bottom:var(--space-lg);border-bottom:1px solid var(--steel-gray)}.subsection:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}.emphasis{padding:var(--space-md);background:#00ffff0d;border-left:3px solid var(--neon-cyan);border-radius:0 var(--radius-md) var(--radius-md) 0}.highlight-section{background:linear-gradient(135deg,#00ffff1a,#9d00ff0d);border-color:#00ffff4d}.section-icon{width:64px;height:64px;margin:0 auto var(--space-lg);display:flex;align-items:center;justify-content:center;background:#00ffff1a;border:2px solid var(--neon-cyan);border-radius:var(--radius-lg)}.section-icon svg{width:32px;height:32px;color:var(--neon-cyan)}.highlight-section h2{text-align:center;justify-content:center}.highlight-section>p{text-align:center;max-width:600px;margin-left:auto;margin-right:auto}.commitment-list{list-style:none;padding:0;max-width:600px;margin:var(--space-lg) auto}.commitment-list li{display:flex;align-items:flex-start;gap:var(--space-sm);margin-bottom:var(--space-md)}.commitment-list li svg{width:20px;height:20px;color:var(--neon-green);flex-shrink:0;margin-top:2px}.source-link{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);margin:var(--space-lg) auto 0;padding:var(--space-sm) var(--space-lg);background:transparent;border:1px solid var(--text-muted);border-radius:var(--radius-md);color:var(--text-primary);font-size:var(--text-sm);font-weight:var(--font-medium);text-decoration:none;transition:all var(--duration-fast) var(--ease-smooth)}.source-link:hover{border-color:var(--neon-cyan);color:var(--neon-cyan)}.source-link svg{width:18px;height:18px}.data-notice{display:flex;align-items:flex-start;gap:var(--space-md);padding:var(--space-md);background:#00ffff1a;border:1px solid rgba(0,255,255,.3);border-radius:var(--radius-md);margin-top:var(--space-lg)}.data-notice svg{width:24px;height:24px;color:var(--neon-cyan);flex-shrink:0}.data-notice p{margin:0;font-size:var(--text-sm)}.rights-section .rights-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-md);margin:var(--space-lg) 0}.right-card{padding:var(--space-lg);background:var(--slate-gray);border:1px solid var(--steel-gray);border-radius:var(--radius-md);text-align:center;transition:all var(--duration-fast) var(--ease-smooth)}.right-card:hover{border-color:var(--neon-cyan);transform:translateY(-2px)}.right-icon{width:48px;height:48px;margin:0 auto var(--space-md);display:flex;align-items:center;justify-content:center;background:#00ffff1a;border-radius:var(--radius-md)}.right-icon svg{width:24px;height:24px;color:var(--neon-cyan)}.right-card h4{font-size:var(--text-md);margin-bottom:var(--space-xs);color:var(--text-primary)}.right-card p{font-size:var(--text-sm);color:var(--text-muted);margin:0}.rights-contact{text-align:center;margin-top:var(--space-lg)}.rights-contact a{color:var(--neon-cyan);text-decoration:none}.rights-contact a:hover{text-decoration:underline}.third-party-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-md);margin:var(--space-lg) 0}.third-party-item{padding:var(--space-md);background:var(--slate-gray);border-radius:var(--radius-md)}.third-party-item h4{font-size:var(--text-md);color:var(--text-primary);margin-bottom:var(--space-xs)}.third-party-item p{font-size:var(--text-sm);color:var(--text-muted);margin-bottom:var(--space-sm)}.third-party-item a{font-size:var(--text-xs);color:var(--neon-cyan);text-decoration:none}.third-party-item a:hover{text-decoration:underline}.third-party-note{font-size:var(--text-sm);font-style:italic;color:var(--text-muted);padding:var(--space-md);background:var(--slate-gray);border-radius:var(--radius-md)}.contact-section .contact-options{display:flex;flex-wrap:wrap;gap:var(--space-md);margin-top:var(--space-lg)}.contact-option{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-md) var(--space-lg);background:var(--slate-gray);border:1px solid var(--steel-gray);border-radius:var(--radius-md);color:var(--text-primary);text-decoration:none;transition:all var(--duration-fast) var(--ease-smooth)}.contact-option:hover{border-color:var(--neon-cyan);color:var(--neon-cyan)}.contact-option svg{width:20px;height:20px}.privacy-footer{display:flex;flex-direction:column;align-items:center;gap:var(--space-lg);margin-top:var(--space-3xl);padding-top:var(--space-xl);border-top:1px solid var(--steel-gray);text-align:center}.back-link{display:flex;align-items:center;gap:var(--space-sm);color:var(--neon-cyan);text-decoration:none;font-weight:var(--font-medium);transition:all var(--duration-fast) var(--ease-smooth)}.back-link:hover{gap:var(--space-md)}.back-link svg{width:20px;height:20px}.license-note{font-size:var(--text-sm);color:var(--text-muted)}.license-note a{color:var(--neon-cyan);text-decoration:none}.license-note a:hover{text-decoration:underline}@media (max-width: 640px){.privacy-container{padding:var(--space-xl) var(--space-sm)}.privacy-title{font-size:var(--text-3xl)}.privacy-section{padding:var(--space-lg)}.privacy-meta{flex-direction:column;gap:var(--space-sm)}.rights-grid{grid-template-columns:1fr}.contact-options{flex-direction:column}.contact-option{justify-content:center}}.accept-invite{min-height:100vh;position:relative}.accept-invite-content{padding-top:calc(var(--navbar-height) + var(--space-4xl));display:flex;justify-content:center;align-items:flex-start;min-height:calc(100vh - var(--navbar-height))}.status-card,.invite-preview-card{max-width:500px;width:100%;padding:var(--space-2xl);text-align:center}.status-card.loading{display:flex;flex-direction:column;align-items:center;gap:var(--space-lg)}.spinner{width:48px;height:48px;border:4px solid rgba(0,255,255,.1);border-top-color:var(--neon-cyan);border-radius:50%;animation:spin 1s linear infinite}.status-card.success{border-color:var(--neon-green)}.success-icon{width:80px;height:80px;margin:0 auto var(--space-lg);background:#39ff141a;border:2px solid var(--neon-green);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:48px;color:var(--neon-green);animation:successPulse 2s ease-in-out infinite}@keyframes successPulse{0%,to{box-shadow:0 0 20px #39ff144d}50%{box-shadow:0 0 40px #39ff1480}}.status-card.success h2{color:var(--neon-green);margin-bottom:var(--space-md)}.redirect-notice{margin-top:var(--space-lg);font-size:.875rem;color:var(--carbon-gray)}.status-card.error{border-color:var(--neon-orange)}.error-icon{width:80px;height:80px;margin:0 auto var(--space-lg);background:#ff4d001a;border:2px solid var(--neon-orange);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:48px;color:var(--neon-orange)}.status-card.error h2{color:var(--neon-orange);margin-bottom:var(--space-md)}.status-card.error p{color:var(--slate-gray);margin-bottom:var(--space-xl)}.invite-from{display:flex;flex-direction:column;align-items:center;gap:var(--space-md);margin-bottom:var(--space-xl);padding-bottom:var(--space-xl);border-bottom:1px solid rgba(0,255,255,.2)}.invite-from-text{text-align:center}.invite-from-text .label{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--carbon-gray);margin-bottom:var(--space-xs)}.invite-from-text h3{font-size:1.5rem;color:var(--neon-cyan);margin-bottom:var(--space-xs)}.invite-from-text .username{font-size:.875rem;color:var(--slate-gray)}.invite-message{margin-bottom:var(--space-xl);color:var(--slate-gray);line-height:1.6}.auth-actions{display:flex;flex-direction:column;gap:var(--space-md)}.auth-actions a,.auth-actions button{width:100%}.invite-error{padding:var(--space-xl)}.invite-error h3{color:var(--neon-orange);margin-bottom:var(--space-md)}.invite-error p{color:var(--slate-gray);margin-bottom:var(--space-xl)}@media (max-width: 768px){.accept-invite-content{padding-top:calc(var(--navbar-height) + var(--space-xl))}.status-card,.invite-preview-card{padding:var(--space-xl)}.success-icon,.error-icon{width:64px;height:64px;font-size:36px}}.auth-callback-page{min-height:100vh;padding-top:var(--navbar-height);display:flex;align-items:center;justify-content:center}.auth-callback-card{max-width:500px;margin:0 auto;text-align:center;padding:var(--space-2xl)}.callback-status{display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-xl)}.callback-status svg{width:64px;height:64px}.loading-spinner{color:var(--neon-cyan)}.loading-spinner svg{animation:spin 1s linear infinite}.success-icon{color:var(--neon-green)}.error-icon{color:var(--neon-orange)}.callback-title{font-size:var(--text-2xl);font-weight:600;color:var(--text-primary);margin-bottom:var(--space-lg)}.import-stats{margin-top:var(--space-xl);padding:var(--space-lg);background:#00ffff0d;border:1px solid rgba(0,255,255,.2);border-radius:var(--radius-md)}.import-stats p{color:var(--text-secondary);margin:var(--space-sm) 0}.matched-count{font-size:var(--text-xl);font-weight:600;color:var(--neon-cyan)}.callback-actions{margin-top:var(--space-xl)}.btn-secondary{padding:var(--space-md) var(--space-xl);background:#2a2a3acc;border:1px solid var(--neon-cyan);border-radius:var(--radius-md);color:var(--neon-cyan);font-size:var(--text-base);font-weight:500;cursor:pointer;transition:all var(--duration-fast) var(--ease-smooth)}.btn-secondary:hover{background:#00ffff1a;box-shadow:0 0 15px #00ffff4d}.import-friends-page{min-height:100vh;padding-top:var(--navbar-height)}.import-header{text-align:center;margin-bottom:var(--space-2xl);padding:var(--space-xl) 0}.import-title{font-size:var(--text-3xl);font-weight:600;color:var(--text-primary);margin-bottom:var(--space-sm)}.import-subtitle{font-size:var(--text-lg);color:var(--text-secondary)}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-lg);padding-bottom:var(--space-md);border-bottom:1px solid rgba(0,255,255,.2)}.section-header h2{font-size:var(--text-xl);font-weight:600;color:var(--neon-cyan);margin:0}.selection-actions{display:flex;gap:var(--space-sm)}.action-btn{padding:var(--space-xs) var(--space-md);background:#00ffff1a;border:1px solid var(--neon-cyan);border-radius:var(--radius-sm);color:var(--neon-cyan);font-size:var(--text-sm);cursor:pointer;transition:all var(--duration-fast) var(--ease-smooth)}.action-btn:hover{background:#0ff3;box-shadow:0 0 10px #00ffff4d}.friends-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--space-md);margin-bottom:var(--space-xl)}.friend-item{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md);background:#2a2a3a80;border:2px solid rgba(0,255,255,.1);border-radius:var(--radius-md);cursor:pointer;transition:all var(--duration-fast) var(--ease-smooth)}.friend-item:hover:not(.already-sent){border-color:var(--neon-cyan);background:#2a2a3acc}.friend-item.selected{border-color:var(--neon-cyan);background:#00ffff1a;box-shadow:0 0 15px #0ff3}.friend-item.already-sent{opacity:.6;cursor:not-allowed;border-color:var(--carbon-gray)}.friend-checkbox{flex-shrink:0}.friend-checkbox input[type=checkbox]{width:20px;height:20px;cursor:pointer}.checkmark-sent{color:var(--neon-green);font-size:1.25rem}.friend-info{display:flex;flex-direction:column;gap:var(--space-xs);flex:1;min-width:0}.friend-name{font-size:var(--text-base);font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.external-name{font-size:var(--text-sm);color:var(--carbon-gray)}.already-sent-label{font-size:var(--text-xs);color:var(--neon-green);font-weight:500}.send-requests-section{margin-top:var(--space-xl);padding-top:var(--space-lg);border-top:1px solid rgba(0,255,255,.2)}.matched-friends-card,.unmatched-friends-card{margin-bottom:var(--space-xl)}.unmatched-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--space-sm);margin-bottom:var(--space-lg)}.unmatched-item{padding:var(--space-sm) var(--space-md);background:#2a2a3a4d;border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-sm);color:var(--text-secondary);font-size:var(--text-sm)}.unmatched-note{color:var(--text-secondary);font-size:var(--text-sm);text-align:center;margin-top:var(--space-lg)}.unmatched-note a{color:var(--neon-cyan);text-decoration:none}.unmatched-note a:hover{text-decoration:underline}.loading-state,.empty-state{text-align:center;padding:var(--space-2xl);color:var(--text-secondary)}.loading-state svg{width:48px;height:48px;color:var(--neon-cyan);animation:spin 1s linear infinite;margin-bottom:var(--space-md)}.empty-state p{margin-bottom:var(--space-lg)}.empty-state a{color:var(--neon-cyan);text-decoration:none}.empty-state a:hover{text-decoration:underline}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width: 768px){.friends-grid{grid-template-columns:1fr}.section-header{flex-direction:column;align-items:flex-start;gap:var(--space-md)}.unmatched-grid{grid-template-columns:1fr}}:root{--neon-cyan: #00FFFF;--neon-magenta: #FF00FF;--neon-orange: #FF4D00;--electric-purple: #9D00FF;--neon-green: #39FF14;--deep-space: #0A0A0F;--void-black: #000000;--carbon-gray: #1A1A24;--slate-gray: #2A2A3A;--steel-gray: #3A3A4A;--grid-line: rgba(0, 255, 255, .15);--glow-cyan: rgba(0, 255, 255, .5);--glow-magenta: rgba(255, 0, 255, .5);--glow-orange: rgba(255, 77, 0, .5);--warning-amber: #FFA500;--error-red: #FF3366;--success-green: #39FF14;--text-primary: #FFFFFF;--text-secondary: rgba(255, 255, 255, .7);--text-muted: rgba(255, 255, 255, .5);--text-disabled: rgba(255, 255, 255, .3);--font-display: "Orbitron", sans-serif;--font-body: "Inter", sans-serif;--font-mono: "JetBrains Mono", monospace;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 1.875rem;--text-4xl: 2.25rem;--text-5xl: 3rem;--text-6xl: 3.75rem;--font-light: 300;--font-normal: 400;--font-medium: 500;--font-semibold: 600;--font-bold: 700;--font-black: 900;--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--space-2xl: 48px;--space-3xl: 64px;--space-4xl: 96px;--radius-sm: 4px;--radius-md: 6px;--radius-lg: 12px;--radius-xl: 16px;--radius-full: 9999px;--shadow-sm: 0 2px 4px rgba(0, 0, 0, .3);--shadow-md: 0 4px 8px rgba(0, 0, 0, .4);--shadow-lg: 0 8px 16px rgba(0, 0, 0, .5);--shadow-xl: 0 16px 32px rgba(0, 0, 0, .6);--ease-smooth: cubic-bezier(.4, 0, .2, 1);--ease-bounce: cubic-bezier(.68, -.55, .265, 1.55);--ease-enter: cubic-bezier(0, 0, .2, 1);--ease-exit: cubic-bezier(.4, 0, 1, 1);--duration-fast: .15s;--duration-normal: .3s;--duration-slow: .5s;--gradient-hero: linear-gradient(135deg, rgba(0, 255, 255, .2) 0%, rgba(157, 0, 255, .2) 100%);--gradient-cta: linear-gradient(90deg, #FF4D00 0%, #FF00FF 100%);--gradient-hover: linear-gradient(90deg, #00FFFF 0%, #9D00FF 100%);--gradient-ambient: radial-gradient(ellipse at top left, rgba(0, 255, 255, .1) 0%, transparent 50%), radial-gradient(ellipse at bottom right, rgba(255, 0, 255, .1) 0%, transparent 50%);--container-max: 1440px;--container-padding: 32px;--navbar-height: 72px;--z-base: 0;--z-dropdown: 100;--z-sticky: 200;--z-modal: 300;--z-toast: 400;--z-tooltip: 500;--z-overlay: 1000}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-body);font-size:var(--text-base);font-weight:var(--font-normal);line-height:1.6;color:var(--text-primary);background:var(--deep-space);min-height:100vh;overflow-x:hidden}h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:var(--font-bold);line-height:1.2;letter-spacing:.02em;text-transform:uppercase}h1{font-size:var(--text-5xl)}h2{font-size:var(--text-4xl)}h3{font-size:var(--text-3xl)}h4{font-size:var(--text-2xl)}h5{font-size:var(--text-xl)}h6{font-size:var(--text-lg)}p{margin-bottom:var(--space-md);color:var(--text-secondary)}a{color:var(--neon-cyan);text-decoration:none;transition:all var(--duration-normal) var(--ease-smooth)}a:hover{color:var(--neon-magenta);text-shadow:0 0 8px var(--glow-cyan)}::selection{background:var(--neon-cyan);color:var(--void-black)}::-moz-selection{background:var(--neon-cyan);color:var(--void-black)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--carbon-gray)}::-webkit-scrollbar-thumb{background:var(--slate-gray);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--neon-cyan)}:focus{outline:none}:focus-visible{outline:2px solid var(--neon-cyan);outline-offset:2px}img{max-width:100%;height:auto;display:block}ul,ol{list-style:none}button{font-family:inherit;cursor:pointer;border:none;background:none}button:disabled{cursor:not-allowed;opacity:.5}input,textarea,select{font-family:inherit;font-size:inherit}#root{min-height:100vh;display:flex;flex-direction:column}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.font-display{font-family:var(--font-display)}.font-body{font-family:var(--font-body)}.font-mono{font-family:var(--font-mono)}.text-cyan{color:var(--neon-cyan)}.text-magenta{color:var(--neon-magenta)}.text-orange{color:var(--neon-orange)}.text-purple{color:var(--electric-purple)}.text-green{color:var(--neon-green)}.text-muted{color:var(--text-muted)}.tron-grid{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:var(--z-base);background-image:repeating-linear-gradient(0deg,transparent,transparent 2px,var(--grid-line) 2px,var(--grid-line) 4px),repeating-linear-gradient(90deg,transparent,transparent 40px,var(--grid-line) 40px,var(--grid-line) 41px)}.perspective-grid{position:absolute;bottom:0;left:0;width:100%;height:40%;background:linear-gradient(90deg,var(--grid-line) 1px,transparent 1px),linear-gradient(0deg,var(--grid-line) 1px,transparent 1px);background-size:50px 50px;transform:perspective(500px) rotateX(60deg);transform-origin:center bottom;animation:gridScroll 20s linear infinite;mask-image:linear-gradient(to top,rgba(0,0,0,1) 0%,transparent 100%);-webkit-mask-image:linear-gradient(to top,rgba(0,0,0,1) 0%,transparent 100%)}@keyframes gridScroll{0%{background-position:0 0}to{background-position:0 50px}}.scanline-overlay:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:repeating-linear-gradient(0deg,rgba(0,0,0,.15),rgba(0,0,0,.15) 1px,transparent 1px,transparent 2px);pointer-events:none;animation:scanlineMove 8s linear infinite;z-index:var(--z-overlay);opacity:.5}@keyframes scanlineMove{0%{transform:translateY(0)}to{transform:translateY(4px)}}.ambient-glow{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:var(--z-base);background:var(--gradient-ambient)}.neon-glow{text-shadow:0 0 5px var(--neon-cyan),0 0 10px var(--neon-cyan),0 0 20px var(--neon-cyan),0 0 40px var(--neon-cyan)}.neon-glow-magenta{text-shadow:0 0 5px var(--neon-magenta),0 0 10px var(--neon-magenta),0 0 20px var(--neon-magenta),0 0 40px var(--neon-magenta)}.neon-glow-orange{text-shadow:0 0 5px var(--neon-orange),0 0 10px var(--neon-orange),0 0 20px var(--neon-orange),0 0 40px var(--neon-orange)}.box-glow-cyan{box-shadow:0 0 10px #00ffff4d,0 0 20px #0ff3,0 0 30px #00ffff1a,inset 0 0 10px #00ffff1a;border:1px solid var(--neon-cyan)}.box-glow-magenta{box-shadow:0 0 10px #ff00ff4d,0 0 20px #f0f3,0 0 30px #ff00ff1a,inset 0 0 10px #ff00ff1a;border:1px solid var(--neon-magenta)}.box-glow-orange{box-shadow:0 0 10px #ff4d004d,0 0 20px #ff4d0033,0 0 30px #ff4d001a,inset 0 0 10px #ff4d001a;border:1px solid var(--neon-orange)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.pulse{animation:pulse 2s ease-in-out infinite}@keyframes glowPulse{0%,to{box-shadow:0 0 5px var(--neon-cyan),0 0 10px var(--neon-cyan)}50%{box-shadow:0 0 15px var(--neon-cyan),0 0 30px var(--neon-cyan),0 0 45px var(--neon-cyan)}}.glow-pulse{animation:glowPulse 2s ease-in-out infinite}@keyframes flicker{0%,to{opacity:1}41%{opacity:1}42%{opacity:.8}43%{opacity:1}45%{opacity:.9}46%{opacity:1}}.flicker{animation:flicker 3s linear infinite}@keyframes glitch{0%{transform:translate(0)}20%{transform:translate(-2px,2px)}40%{transform:translate(-2px,-2px)}60%{transform:translate(2px,2px)}80%{transform:translate(2px,-2px)}to{transform:translate(0)}}.glitch:hover{animation:glitch .3s linear infinite}.cyber-spinner{width:40px;height:40px;border:3px solid var(--carbon-gray);border-top-color:var(--neon-cyan);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn .5s var(--ease-enter) forwards}@keyframes slideInLeft{0%{opacity:0;transform:translate(-30px)}to{opacity:1;transform:translate(0)}}@keyframes slideInRight{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}.slide-in-left{animation:slideInLeft .5s var(--ease-enter) forwards}.slide-in-right{animation:slideInRight .5s var(--ease-enter) forwards}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.scale-in{animation:scaleIn .3s var(--ease-bounce) forwards}.typing-cursor:after{content:"|";color:var(--neon-cyan);animation:blink 1s step-end infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}.gradient-border{position:relative;background:var(--carbon-gray);border-radius:var(--radius-lg)}.gradient-border:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--gradient-cta);border-radius:var(--radius-lg) var(--radius-lg) 0 0}.hover-lift{transition:transform var(--duration-normal) var(--ease-smooth),box-shadow var(--duration-normal) var(--ease-smooth)}.hover-lift:hover{transform:translateY(-4px);box-shadow:var(--shadow-xl)}.stagger-1{animation-delay:.1s}.stagger-2{animation-delay:.2s}.stagger-3{animation-delay:.3s}.stagger-4{animation-delay:.4s}.stagger-5{animation-delay:.5s}.stagger-6{animation-delay:.6s}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);font-family:var(--font-display);font-weight:var(--font-bold);text-transform:uppercase;letter-spacing:1px;padding:12px 32px;border-radius:var(--radius-md);cursor:pointer;border:none;position:relative;overflow:hidden;transition:all var(--duration-normal) var(--ease-smooth)}.btn-primary{background:var(--gradient-cta);color:var(--text-primary)}.btn-primary:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:var(--gradient-hover);transition:left var(--duration-normal) var(--ease-smooth);z-index:0}.btn-primary:hover:before{left:0}.btn-primary:hover{box-shadow:0 0 20px var(--glow-orange);transform:translateY(-2px)}.btn-primary span{position:relative;z-index:1}.btn-ghost{background:transparent;color:var(--neon-cyan);border:2px solid var(--neon-cyan);padding:10px 28px}.btn-ghost:hover{background:#00ffff1a;box-shadow:0 0 15px var(--glow-cyan)}.btn-danger{background:var(--error-red);color:var(--text-primary)}.btn-danger:hover{background:#ff4d6d;box-shadow:0 0 15px #ff336680;transform:translateY(-2px)}.btn-sm{font-size:var(--text-xs);padding:8px 16px}.btn-lg{font-size:var(--text-lg);padding:16px 40px}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important;box-shadow:none!important}.btn-full-width{width:100%}.btn-icon{padding:var(--space-sm);border-radius:var(--radius-md);background:var(--carbon-gray);color:var(--text-secondary);border:1px solid var(--steel-gray)}.btn-icon:hover{background:var(--slate-gray);color:var(--neon-cyan);border-color:var(--neon-cyan)}.card{background:var(--carbon-gray);border:1px solid rgba(0,255,255,.2);border-radius:var(--radius-lg);padding:var(--space-lg);position:relative;overflow:hidden;transition:all var(--duration-normal) var(--ease-smooth)}.card:before{content:"";position:absolute;top:0;left:0;width:100%;height:2px;background:var(--gradient-cta)}.card:hover{transform:translateY(-4px);box-shadow:0 8px 32px #00000080,0 0 20px #00ffff4d;border-color:var(--neon-cyan)}.card-clickable{cursor:pointer}.card-glow-cyan:hover{box-shadow:0 8px 32px #00000080,0 0 30px var(--glow-cyan)}.card-glow-magenta:hover{box-shadow:0 8px 32px #00000080,0 0 30px var(--glow-magenta)}.card-glow-orange:hover{box-shadow:0 8px 32px #00000080,0 0 30px var(--glow-orange)}.input-wrapper{display:flex;flex-direction:column;gap:var(--space-xs)}.input-label{font-family:var(--font-display);font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}.input-container{position:relative;display:flex;align-items:center}.input{width:100%;background:var(--void-black);border:1px solid rgba(0,255,255,.3);color:var(--text-primary);padding:12px 16px;border-radius:var(--radius-md);font-family:var(--font-body);font-size:var(--text-base);transition:all var(--duration-normal) var(--ease-smooth)}.input::placeholder{color:var(--text-muted)}.input:focus{border-color:var(--neon-cyan);box-shadow:0 0 10px var(--glow-cyan)}.input-error{border-color:var(--error-red)!important;box-shadow:0 0 10px #ff33664d!important}.input-error-text{font-size:var(--text-sm);color:var(--error-red)}.input-helper-text{font-size:var(--text-xs);color:var(--text-muted);margin-top:var(--space-xs)}.input-icon-left{position:absolute;left:12px;color:var(--text-muted)}.input-icon-right{position:absolute;right:12px;color:var(--text-muted)}.input.has-icon-left{padding-left:40px}.input.has-icon-right{padding-right:40px}.badge{display:inline-flex;align-items:center;gap:var(--space-xs);font-family:var(--font-mono);font-size:var(--text-xs);font-weight:var(--font-bold);text-transform:uppercase;padding:6px 12px;border-radius:var(--radius-sm)}.badge-live{background:var(--neon-green);color:var(--void-black);animation:pulse 2s ease-in-out infinite}.badge-live:before{content:"";width:8px;height:8px;background:var(--void-black);border-radius:50%}.badge-online{background:#39ff1433;color:var(--neon-green);border:1px solid var(--neon-green)}.badge-offline{background:#ffffff1a;color:var(--text-muted);border:1px solid var(--steel-gray)}.badge-away{background:#ffa50033;color:var(--warning-amber);border:1px solid var(--warning-amber)}.badge-new{background:var(--gradient-cta);color:var(--text-primary)}.badge-beta{background:#9d00ff33;color:var(--electric-purple);border:1px solid var(--electric-purple)}.avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;overflow:hidden;background:var(--slate-gray);border:2px solid var(--steel-gray)}.avatar img{width:100%;height:100%;object-fit:cover}.avatar-placeholder{font-family:var(--font-display);font-weight:var(--font-bold);color:var(--neon-cyan);text-transform:uppercase}.avatar-sm{width:32px;height:32px;font-size:var(--text-sm)}.avatar-md{width:48px;height:48px;font-size:var(--text-lg)}.avatar-lg{width:64px;height:64px;font-size:var(--text-2xl)}.avatar-xl{width:96px;height:96px;font-size:var(--text-4xl)}.avatar-status{position:absolute;bottom:2px;right:2px;width:12px;height:12px;border-radius:50%;border:2px solid var(--carbon-gray)}.avatar-status.online{background:var(--neon-green)}.avatar-status.streaming{background:var(--neon-green);animation:pulse 2s ease-in-out infinite}.avatar-status.offline{background:var(--steel-gray)}.avatar-status.away{background:var(--warning-amber)}.divider{height:1px;background:linear-gradient(90deg,transparent,var(--steel-gray) 20%,var(--steel-gray) 80%,transparent);margin:var(--space-xl) 0}.divider-glow{background:linear-gradient(90deg,transparent,var(--neon-cyan) 50%,transparent);box-shadow:0 0 10px var(--glow-cyan)}.tooltip{position:relative}.tooltip:after{content:attr(data-tooltip);position:absolute;bottom:100%;left:50%;transform:translate(-50%);padding:var(--space-xs) var(--space-sm);background:var(--void-black);color:var(--text-primary);font-size:var(--text-xs);border-radius:var(--radius-sm);border:1px solid var(--neon-cyan);white-space:nowrap;opacity:0;visibility:hidden;transition:all var(--duration-fast) var(--ease-smooth);z-index:var(--z-tooltip)}.tooltip:hover:after{opacity:1;visibility:visible;transform:translate(-50%) translateY(-4px)}@media (max-width: 768px){:root{--text-5xl: 2.25rem;--text-6xl: 3rem;--container-padding: 16px}h1{font-size:var(--text-4xl)}h2{font-size:var(--text-3xl)}h3{font-size:var(--text-2xl)}}@media (max-width: 480px){:root{--text-4xl: 1.875rem;--text-5xl: 2rem;--text-6xl: 2.5rem}}.container{width:100%;max-width:var(--container-max);margin:0 auto;padding:0 var(--container-padding)}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-xs{gap:var(--space-xs)}.gap-sm{gap:var(--space-sm)}.gap-md{gap:var(--space-md)}.gap-lg{gap:var(--space-lg)}.gap-xl{gap:var(--space-xl)}.grid{display:grid}.grid-cols-2{grid-template-columns:repeat(2,1fr)}.grid-cols-3{grid-template-columns:repeat(3,1fr)}.grid-cols-4{grid-template-columns:repeat(4,1fr)}@media (max-width: 1024px){.grid-cols-4,.grid-cols-3{grid-template-columns:repeat(2,1fr)}}@media (max-width: 768px){.grid-cols-4,.grid-cols-3,.grid-cols-2{grid-template-columns:1fr}}.mt-xs{margin-top:var(--space-xs)}.mt-sm{margin-top:var(--space-sm)}.mt-md{margin-top:var(--space-md)}.mt-lg{margin-top:var(--space-lg)}.mt-xl{margin-top:var(--space-xl)}.mt-2xl{margin-top:var(--space-2xl)}.mt-3xl{margin-top:var(--space-3xl)}.mb-xs{margin-bottom:var(--space-xs)}.mb-sm{margin-bottom:var(--space-sm)}.mb-md{margin-bottom:var(--space-md)}.mb-lg{margin-bottom:var(--space-lg)}.mb-xl{margin-bottom:var(--space-xl)}.mb-2xl{margin-bottom:var(--space-2xl)}.mb-3xl{margin-bottom:var(--space-3xl)}.py-md{padding-top:var(--space-md);padding-bottom:var(--space-md)}.py-lg{padding-top:var(--space-lg);padding-bottom:var(--space-lg)}.py-xl{padding-top:var(--space-xl);padding-bottom:var(--space-xl)}.py-2xl{padding-top:var(--space-2xl);padding-bottom:var(--space-2xl)}.py-3xl{padding-top:var(--space-3xl);padding-bottom:var(--space-3xl)}.py-4xl{padding-top:var(--space-4xl);padding-bottom:var(--space-4xl)}