:root{--bg-deep: #0a0a0f;--bg-surface: #12121a;--bg-card: #1a1a2e;--bg-hover: #22223a;--border: #2a2a4a;--neon-cyan: #00f0ff;--neon-magenta: #ff00aa;--neon-purple: #aa00ff;--neon-gold: #ffcc00;--text-primary: #e0e0ff;--text-secondary: #8888aa;--text-muted: #555577;--success: #00ff88;--error: #ff3355;--warning: #ff8800;--font-display: "Orbitron", monospace;--font-body: "Inter", -apple-system, sans-serif;--font-mono: "JetBrains Mono", monospace;--glow-cyan: 0 0 10px rgba(0, 240, 255, .3), 0 0 20px rgba(0, 240, 255, .1);--glow-magenta: 0 0 10px rgba(255, 0, 170, .3), 0 0 20px rgba(255, 0, 170, .1)}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%;overflow:hidden}body{font-family:var(--font-body);background:var(--bg-deep);color:var(--text-primary);-webkit-font-smoothing:antialiased}.app{position:relative;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}.scanlines{position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:999;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.08) 2px,rgba(0,0,0,.08) 4px)}.vignette{position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:998;background:radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,.6) 100%)}.loading-screen{display:flex;flex-direction:column;align-items:center;gap:2rem}.cyber-logo{font-family:var(--font-display);font-size:3rem;font-weight:900;background:linear-gradient(135deg,var(--neon-cyan),var(--neon-magenta));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:.3em;text-shadow:var(--glow-cyan);animation:pulse-glow 2s ease-in-out infinite}@keyframes pulse-glow{0%,to{filter:brightness(1)}50%{filter:brightness(1.3)}}.loading-dots span{font-family:var(--font-display);font-size:3rem;color:var(--neon-cyan);animation:dot-bounce 1.4s infinite}.loading-dots span:nth-child(2){animation-delay:.2s}.loading-dots span:nth-child(3){animation-delay:.4s}@keyframes dot-bounce{0%,80%,to{opacity:.2}40%{opacity:1}}.home-screen{display:flex;flex-direction:column;align-items:center;gap:3rem;padding:2rem}.home-title{font-family:var(--font-display);font-size:2.5rem;font-weight:900;background:linear-gradient(135deg,var(--neon-cyan),var(--neon-magenta));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:.2em;text-align:center}.home-subtitle{color:var(--text-secondary);font-size:.9rem;letter-spacing:.1em;text-align:center;line-height:1.6}.home-actions{display:flex;flex-direction:column;gap:1rem;width:100%;max-width:360px}.cyber-btn{position:relative;padding:14px 32px;font-family:var(--font-display);font-size:.9rem;font-weight:600;letter-spacing:.15em;border:1px solid var(--neon-cyan);background:transparent;color:var(--neon-cyan);cursor:pointer;transition:all .3s ease;text-transform:uppercase;overflow:hidden}.cyber-btn:hover{background:#00f0ff1a;box-shadow:var(--glow-cyan);transform:translateY(-2px)}.cyber-btn:active{transform:translateY(0)}.cyber-btn.magenta{border-color:var(--neon-magenta);color:var(--neon-magenta)}.cyber-btn.magenta:hover{background:#ff00aa1a;box-shadow:var(--glow-magenta)}.cyber-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent);transition:left .5s}.cyber-btn:hover:before{left:100%}.join-input-group{display:flex;gap:.5rem}.cyber-input{flex:1;padding:12px 16px;background:var(--bg-card);border:1px solid var(--border);color:var(--text-primary);font-family:var(--font-mono);font-size:.9rem;outline:none;transition:border-color .3s,box-shadow .3s}.cyber-input:focus{border-color:var(--neon-cyan);box-shadow:var(--glow-cyan)}.cyber-input::placeholder{color:var(--text-muted)}.divider{display:flex;align-items:center;gap:1rem;color:var(--text-muted);font-size:.8rem;width:100%;max-width:360px}.divider:before,.divider:after{content:"";flex:1;height:1px;background:var(--border)}.nickname-screen{display:flex;flex-direction:column;align-items:center;gap:2rem;padding:2rem}.nickname-screen h2{font-family:var(--font-display);color:var(--neon-cyan);font-size:1.3rem;letter-spacing:.15em}.nickname-screen input{width:300px}.waiting-screen{display:flex;flex-direction:column;align-items:center;gap:2rem;padding:2rem;text-align:center}.cyber-loader{position:relative;width:80px;height:80px}.cyber-loader-ring{position:absolute;top:0;right:0;bottom:0;left:0;border:2px solid transparent;border-top-color:var(--neon-cyan);border-right-color:var(--neon-magenta);border-radius:50%;animation:spin 1.5s linear infinite}.cyber-loader-ring:nth-child(2){top:8px;right:8px;bottom:8px;left:8px;border-top-color:var(--neon-magenta);border-right-color:var(--neon-cyan);animation-direction:reverse;animation-duration:2s}.cyber-loader-ring:nth-child(3){top:16px;right:16px;bottom:16px;left:16px;border-top-color:var(--neon-purple);border-right-color:var(--neon-gold);animation-duration:1s}@keyframes spin{to{transform:rotate(360deg)}}.waiting-text{color:var(--text-secondary);font-size:.9rem;letter-spacing:.1em;animation:blink 2s ease-in-out infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:.4}}.rejected-screen,.dissolved-screen{display:flex;flex-direction:column;align-items:center;gap:1.5rem;padding:2rem;text-align:center}.rejected-icon{width:80px;height:80px;border:2px solid var(--error);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2.5rem;color:var(--error);box-shadow:0 0 20px #ff33554d}.dissolved-icon{width:80px;height:80px;border:2px solid var(--text-muted);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2.5rem;color:var(--text-muted)}.rejected-screen h2,.dissolved-screen h2{font-family:var(--font-display);font-size:1.2rem;letter-spacing:.15em}.rejected-screen p,.dissolved-screen p{color:var(--text-secondary);font-size:.9rem}.dissolved-screen .sub{color:var(--text-muted);font-style:italic}.chat-container{display:flex;flex-direction:column;height:100vh;width:100%;max-width:900px;margin:0 auto}.chat-header{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-bottom:1px solid var(--border);background:var(--bg-surface);flex-shrink:0}.chat-header-left{display:flex;align-items:center;gap:12px}.chat-header-logo{font-family:var(--font-display);font-size:.85rem;color:var(--neon-cyan);letter-spacing:.2em}.chat-room-id{font-family:var(--font-mono);font-size:.75rem;color:var(--text-muted);background:var(--bg-card);padding:4px 8px;border-radius:4px}.chat-header-right{display:flex;align-items:center;gap:8px}.member-count{font-family:var(--font-mono);font-size:.8rem;color:var(--text-secondary)}.icon-btn{background:none;border:1px solid var(--border);color:var(--text-secondary);cursor:pointer;font-size:1rem;transition:all .2s;display:flex;align-items:center;gap:4px}.icon-btn.copy-btn{padding:4px 10px}.copy-btn-icon{font-size:.85rem}.copy-btn-text{font-size:.75rem;font-family:var(--font-mono)}.icon-btn:hover{border-color:var(--neon-cyan);color:var(--neon-cyan);box-shadow:var(--glow-cyan)}.member-list-popup{position:absolute;top:100%;right:0;background:var(--bg-card);border:1px solid var(--border);min-width:160px;z-index:100;padding:8px 0}.member-list-item{padding:8px 16px;font-size:.85rem;color:var(--text-secondary);display:flex;align-items:center;gap:8px}.member-list-item:before{content:"●";color:var(--success);font-size:.5rem}.messages-area{flex:1;overflow-y:auto;padding:16px 20px;display:flex;flex-direction:column;gap:4px;scroll-behavior:smooth}.messages-area::-webkit-scrollbar{width:4px}.messages-area::-webkit-scrollbar-track{background:transparent}.messages-area::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.message{padding:8px 12px;max-width:80%;word-break:break-word;line-height:1.5;font-size:.9rem}.message.system{align-self:center;color:var(--text-muted);font-size:.8rem;font-style:italic;padding:4px 12px}.message.own{align-self:flex-end;background:#00f0ff14;border:1px solid rgba(0,240,255,.2);border-radius:12px 12px 4px}.message.other{align-self:flex-start;background:var(--bg-card);border:1px solid var(--border);border-radius:12px 12px 12px 4px}.message-sender{font-size:.75rem;color:var(--neon-cyan);font-weight:600;margin-bottom:2px;font-family:var(--font-mono)}.message-time{font-size:.65rem;color:var(--text-muted);margin-top:4px;text-align:right}.typing-indicator{padding:4px 20px 8px;font-size:.8rem;color:var(--text-muted);min-height:24px;display:flex;align-items:center;gap:4px;flex-shrink:0}.typing-dots{display:flex;gap:3px;align-items:center}.typing-dot{width:6px;height:6px;background:var(--neon-cyan);border-radius:50%;animation:typing-bounce 1.4s infinite}.typing-dot:nth-child(2){animation-delay:.2s}.typing-dot:nth-child(3){animation-delay:.4s}@keyframes typing-bounce{0%,60%,to{transform:translateY(0);opacity:.3}30%{transform:translateY(-6px);opacity:1}}.input-area{display:flex;gap:8px;padding:12px 20px;border-top:1px solid var(--border);background:var(--bg-surface);flex-shrink:0}.input-area input{flex:1}.send-btn{padding:12px 20px;background:transparent;border:1px solid var(--neon-cyan);color:var(--neon-cyan);font-family:var(--font-display);font-size:.75rem;letter-spacing:.15em;cursor:pointer;transition:all .3s}.send-btn:hover{background:#00f0ff1a;box-shadow:var(--glow-cyan)}.send-btn:disabled{opacity:.3;cursor:not-allowed}.toast-container{position:fixed;top:16px;right:16px;z-index:200;display:flex;flex-direction:column;gap:8px;max-width:320px}.toast-item{background:var(--bg-card);border:1px solid var(--border);padding:12px 16px;animation:slide-in .3s ease;display:flex;flex-direction:column;gap:8px}@keyframes slide-in{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.toast-item .toast-title{font-size:.85rem;color:var(--text-primary)}.toast-item .toast-nickname{color:var(--neon-magenta);font-weight:600}.toast-actions{display:flex;gap:8px}.toast-btn{padding:6px 16px;font-size:.75rem;font-family:var(--font-display);letter-spacing:.1em;cursor:pointer;border:1px solid;background:transparent;transition:all .2s;text-transform:uppercase}.toast-btn.approve{color:var(--success);border-color:var(--success)}.toast-btn.approve:hover{background:#00ff881a;box-shadow:0 0 10px #0f83}.toast-btn.reject{color:var(--error);border-color:var(--error)}.toast-btn.reject:hover{background:#ff33551a}.toast-notification{background:var(--bg-card);border:1px solid var(--border);padding:10px 16px;font-size:.8rem;color:var(--text-secondary);animation:slide-in .3s ease}.copy-tooltip{position:fixed;bottom:80px;left:50%;transform:translate(-50%);background:var(--bg-card);border:1px solid var(--neon-cyan);padding:8px 20px;font-size:.8rem;color:var(--neon-cyan);animation:fade-up .3s ease;z-index:300}@keyframes fade-up{0%{opacity:0;transform:translate(-50%) translateY(10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.invite-banner{flex-shrink:0;background:linear-gradient(135deg,#00f0ff0f,#ff00aa0f);border-bottom:1px solid var(--neon-cyan);padding:10px 20px;display:flex;flex-direction:column;gap:4px;animation:banner-slide .4s ease}@keyframes banner-slide{0%{max-height:0;opacity:0;padding:0 20px}to{max-height:100px;opacity:1;padding:10px 20px}}.invite-banner-content{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.invite-banner-label{font-size:.8rem;color:var(--neon-cyan);font-family:var(--font-display);letter-spacing:.1em;white-space:nowrap}.invite-banner-url{font-family:var(--font-mono);font-size:.75rem;color:var(--text-secondary);background:var(--bg-card);padding:4px 10px;border:1px solid var(--border);flex:1;min-width:200px;word-break:break-all;-webkit-user-select:all;user-select:all}.invite-banner-copy{font-family:var(--font-display);font-size:.7rem;letter-spacing:.1em;padding:5px 14px;border:1px solid var(--neon-cyan);background:transparent;color:var(--neon-cyan);cursor:pointer;transition:all .2s;white-space:nowrap}.invite-banner-copy:hover{background:#00f0ff1a;box-shadow:var(--glow-cyan)}.invite-banner-close{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:.9rem;padding:4px;line-height:1}.invite-banner-close:hover{color:var(--text-secondary)}.invite-banner-hint{font-size:.7rem;color:var(--text-muted)}.empty-chat{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;color:var(--text-muted);font-size:.9rem}.empty-chat-icon{font-size:3rem;opacity:.2;font-family:var(--font-display)}@media(max-width:600px){.home-title{font-size:1.8rem}.cyber-logo{font-size:2rem}.chat-header{padding:10px 12px}.messages-area{padding:12px}.input-area{padding:10px 12px}.toast-container{left:16px;right:16px;max-width:none}}