*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--bg-primary: #0a0a0f;--bg-secondary: #12121a;--bg-card: rgba(22, 22, 35, .8);--bg-glass: rgba(30, 30, 50, .6);--border-color: rgba(99, 102, 241, .15);--border-hover: rgba(99, 102, 241, .35);--text-primary: #e8e8f0;--text-secondary: #9595b0;--text-muted: #65657a;--accent: #6366f1;--accent-hover: #818cf8;--accent-glow: rgba(99, 102, 241, .25);--accent-gradient: linear-gradient(135deg, #6366f1, #8b5cf6);--success: #22c55e;--error: #ef4444;--error-text: #fca5a5;--warning: #f59e0b;--output-bg: #0d0d12;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 20px;--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono: "Geist Mono", monospace}html[data-theme=light]{--bg-primary: #ffffff;--bg-secondary: #f5f5f7;--bg-card: rgba(245, 245, 247, .9);--bg-glass: rgba(240, 240, 245, .7);--border-color: rgba(99, 102, 241, .2);--border-hover: rgba(99, 102, 241, .4);--text-primary: #1a1a2e;--text-secondary: #5a5a7a;--text-muted: #9595b0;--error-text: #dc2626;--output-bg: #f0f0f5}html,body{height:100%;font-family:var(--font-sans);background:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#app{min-height:100vh}a{color:var(--accent);text-decoration:none;transition:color .2s}a:hover{color:var(--accent-hover)}code{font-family:var(--font-mono);font-size:.9em;background:#6366f11a;padding:2px 8px;border-radius:6px;color:var(--accent-hover)}.btn-icon{font-size:1.2em;font-weight:400;background:none;border:none;cursor:pointer;color:var(--text-secondary)}.btn-icon:hover{color:var(--text-primary)}.error-message{background:#ef44441a;border:1px solid rgba(239,68,68,.25);color:var(--error-text);padding:10px 16px;border-radius:var(--radius-sm);font-size:.9rem;animation:shake .3s ease-in-out}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-6px)}75%{transform:translate(6px)}}.home-page{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;gap:60px}.hero{position:relative;text-align:center;max-width:480px;width:100%}.hero-glow{position:absolute;top:-100px;left:50%;transform:translate(-50%);width:400px;height:400px;background:radial-gradient(circle,var(--accent-glow) 0%,transparent 70%);border-radius:50%;pointer-events:none;animation:pulse-glow 4s ease-in-out infinite}@keyframes pulse-glow{0%,to{opacity:.5;transform:translate(-50%) scale(1)}50%{opacity:.8;transform:translate(-50%) scale(1.1)}}.hero-content{position:relative;z-index:1}.logo{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:16px}.logo h1{font-size:2.2rem;font-weight:700;background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.subtitle{color:var(--text-secondary);font-size:1.05rem;line-height:1.7;margin-bottom:36px}.create-room-card{width:100%;background:var(--bg-card)}.features{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:700px;width:100%}.feature-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:24px;text-align:center;backdrop-filter:blur(12px);transition:all .3s cubic-bezier(.4,0,.2,1)}.feature-card:hover{border-color:var(--border-hover);transform:translateY(-4px);box-shadow:0 8px 30px #6366f11a}.feature-icon{font-size:2rem;margin-bottom:12px}.feature-card h3{font-size:1rem;font-weight:600;margin-bottom:6px}.feature-card p{font-size:.85rem;color:var(--text-secondary);line-height:1.5}.join-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px 20px}.join-card-box{background:var(--bg-card);max-width:420px;width:100%}.join-header{margin-bottom:28px}.join-header h2{font-size:1.5rem;font-weight:700;margin:12px 0 8px}.room-id-display{color:var(--text-secondary);font-size:.9rem}.join-form{display:flex;flex-direction:column;gap:16px}.back-link{font-size:.85rem;color:var(--text-secondary);transition:color .2s;cursor:pointer}.back-link:hover{color:var(--accent)}.room-page{height:100vh;display:flex;flex-direction:column;background:var(--bg-primary)}.room-header{display:flex;align-items:center;justify-content:space-between;padding:16px;background:var(--bg-secondary);border-bottom:1px solid var(--border-color);flex-shrink:0;gap:20px;backdrop-filter:blur(20px);box-shadow:0 4px 30px #0000001a;z-index:10;position:relative}.room-header-center{position:absolute;left:50%;transform:translate(-50%);display:flex;align-items:center;justify-content:center}.room-header-left,.room-header-right{display:flex;align-items:center;gap:16px}.room-info{display:flex;align-items:center;background:var(--bg-glass);padding:4px;border-radius:var(--radius-lg);border:1px solid var(--border-color)}.room-badge{background:var(--accent-gradient);color:#fff;padding:4px 12px;border-radius:var(--radius-md);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;box-shadow:0 2px 10px var(--accent-glow)}.room-id{font-size:.9rem;padding:4px 12px;background:transparent;color:var(--text-primary);font-weight:600}.lang-select{padding:10px 40px 10px 16px!important;font-size:.9rem!important;border-radius:var(--radius-md)!important;background-color:var(--bg-glass)!important;border:1px solid var(--border-color)!important;color:var(--text-primary)!important;cursor:pointer;transition:all .2s ease}.lang-select:hover{border-color:var(--accent);background-color:var(--bg-secondary)!important}.user-count{display:flex;align-items:center;gap:8px;font-size:.9rem;font-weight:500;color:var(--text-secondary);background:var(--bg-glass);padding:4px 8px;border-radius:var(--radius-md);border:1px solid var(--border-color)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;border:none;border-radius:var(--radius-md);font-family:var(--font-sans);font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.btn-sm{padding:8px 16px;font-size:.85rem}.btn-primary{background:var(--accent-gradient);color:#fff;box-shadow:0 4px 15px var(--accent-glow);border:1px solid rgba(255,255,255,.1)}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 25px var(--accent-glow);filter:brightness(1.1)}.btn-secondary{background:transparent;color:var(--text-secondary);border:1px solid transparent}.btn-secondary:hover{background:var(--bg-glass);color:var(--text-primary);border-color:var(--border-color)}.back-link{display:flex;align-items:center;gap:8px;font-weight:600;padding:8px 12px;border-radius:var(--radius-md);transition:all .2s;color:var(--text-secondary)}.back-link:hover{background:var(--bg-glass);color:var(--text-primary)}.editor-area{flex:1;display:flex;overflow:hidden}.editor-pane{display:flex;flex-direction:column;overflow:hidden}.editor-pane-header{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;background:var(--bg-secondary);border-bottom:1px solid var(--border-color);font-size:.75rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;flex-shrink:0}.editor-mount{flex:1;overflow:hidden}.split-divider{width:4px;background:var(--border-color);cursor:col-resize;flex-shrink:0;transition:background .2s}.split-divider:hover,.split-divider.dragging{background:var(--accent)}.output-panel{height:200px;background:var(--output-bg);border-top:1px solid var(--border-color);display:flex;flex-direction:column;flex-shrink:0}.output-header{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;background:var(--bg-secondary);border-bottom:1px solid var(--border-color);font-size:.8rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em}.output-content{flex:1;padding:12px 16px;overflow:auto;font-family:var(--font-mono);font-size:.85rem;color:var(--text-primary);white-space:pre-wrap;line-height:1.5}.output-content.error{color:var(--error-text);background:#ef44440d}.connection-status{padding:6px 16px;font-size:.8rem;font-weight:500;text-align:center;transition:all .3s}.connection-status.connected{background:#22c55e1a;color:var(--success);border-top:1px solid rgba(34,197,94,.2)}.connection-status.disconnected{background:#ef44441a;color:var(--error);border-top:1px solid rgba(239,68,68,.2);animation:pulse-status 1.5s ease-in-out infinite}@keyframes pulse-status{0%,to{opacity:1}50%{opacity:.6}}.error-page{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center}.error-page h1{font-size:6rem;font-weight:700;background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.error-page p{font-size:1.2rem;color:var(--text-secondary);margin-bottom:16px}.spinner{display:inline-block;width:12px;height:12px;border:2px solid var(--text-muted);border-radius:50%;border-top-color:var(--text-primary);animation:spin 1s ease-in-out infinite}@keyframes spin{to{transform:rotate(360deg)}}.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-glass);color:var(--text-secondary);font-size:1.1rem;cursor:pointer;transition:all .25s;backdrop-filter:blur(12px);line-height:1}.theme-toggle:hover{border-color:var(--border-hover);color:var(--text-primary)}@media(max-width:640px){.features{grid-template-columns:1fr;max-width:360px}.logo h1{font-size:1.8rem}.room-header{flex-wrap:wrap;gap:8px;padding:10px 12px}.room-header-left,.room-header-right{gap:8px}.room-info .room-id{font-size:.75rem}}