:root{--neon-pink: #ff00ff;--neon-cyan: #00ffff;--neon-green: #00ff00;--neon-yellow: #ffff00;--neon-orange: #ff8800;--neon-red: #ff0044;--neon-blue: #0088ff;--neon-purple: #aa00ff;--bg-dark: #0a0a0f;--bg-darker: #050508;--bg-card: #12121a;--bg-card-hover: #1a1a25;--text-primary: #ffffff;--text-secondary: #888899;--text-muted: #555566;--success: #00ff88;--error: #ff4466;--warning: #ffaa00;--font-pixel: "Press Start 2P", cursive;--font-mono: "Courier New", monospace}*{margin:0;padding:0;box-sizing:border-box}html{font-size:18px}body{font-family:var(--font-mono);background-color:var(--bg-dark);color:var(--text-primary);min-height:100vh;overflow-x:hidden}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:repeating-linear-gradient(0deg,rgba(0,0,0,.1),rgba(0,0,0,.1) 1px,transparent 1px,transparent 2px);pointer-events:none;z-index:9999}#root{min-height:100vh;display:flex;flex-direction:column}h1,h2,h3,h4,h5,h6{font-family:var(--font-pixel);text-transform:uppercase;letter-spacing:2px}h1{font-size:2rem;text-shadow:0 0 10px var(--neon-cyan),0 0 20px var(--neon-cyan),0 0 40px var(--neon-cyan)}h2{font-size:1.25rem;color:var(--neon-pink);text-shadow:0 0 5px var(--neon-pink),0 0 10px var(--neon-pink)}button{font-family:var(--font-pixel);font-size:.9rem;padding:14px 28px;background:transparent;border:2px solid var(--neon-cyan);color:var(--neon-cyan);cursor:pointer;text-transform:uppercase;transition:all .2s ease;position:relative;overflow:hidden}button:hover{background:var(--neon-cyan);color:var(--bg-dark);box-shadow:0 0 10px var(--neon-cyan),0 0 20px var(--neon-cyan)}button:active{transform:scale(.95)}button:disabled{opacity:.5;cursor:not-allowed}button.primary{border-color:var(--neon-green);color:var(--neon-green)}button.primary:hover{background:var(--neon-green);color:var(--bg-dark);box-shadow:0 0 10px var(--neon-green),0 0 20px var(--neon-green)}button.danger{border-color:var(--neon-red);color:var(--neon-red)}button.danger:hover{background:var(--neon-red);color:var(--bg-dark);box-shadow:0 0 10px var(--neon-red),0 0 20px var(--neon-red)}input,textarea{font-family:var(--font-mono);font-size:1.1rem;padding:14px 18px;background:var(--bg-darker);border:2px solid var(--text-muted);color:var(--text-primary);outline:none;transition:border-color .2s ease}input:focus,textarea:focus{border-color:var(--neon-cyan);box-shadow:0 0 5px var(--neon-cyan),inset 0 0 5px #00ffff1a}input::placeholder,textarea::placeholder{color:var(--text-muted)}.card{background:var(--bg-card);border:1px solid var(--text-muted);padding:20px;position:relative}.card:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--neon-pink),var(--neon-cyan),var(--neon-green))}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes glow{0%,to{box-shadow:0 0 5px currentColor,0 0 10px currentColor}50%{box-shadow:0 0 10px currentColor,0 0 20px currentColor,0 0 30px currentColor}}@keyframes blink{0%,50%,to{opacity:1}25%,75%{opacity:0}}.pulse{animation:pulse 1s ease-in-out infinite}.glow{animation:glow 2s ease-in-out infinite}.blink{animation:blink 1s step-end infinite}.status-connected{color:var(--success)}.status-disconnected{color:var(--error)}.status-waiting{color:var(--warning)}.container{max-width:1200px;margin:0 auto;padding:20px}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:8px}.gap-4{gap:16px}.gap-6{gap:24px}