*,*:before,*:after{box-sizing:border-box}*{margin:0;padding:0}:root{--bg: #ffffff;--bg-secondary: #f6f8fa;--text: #1a1a1a;--text-secondary: #57606a;--editor-bg: #fafafa;--border: #d0d7de;--accent: #3b82f6;--accent-hover: #2563eb;--success: #22c55e;--warning: #f59e0b;--error: #ef4444;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1);--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-full: 9999px;--transition-fast: .15s ease;--transition-normal: .2s ease;--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", "SF Mono", Consolas, monospace}@media(prefers-color-scheme:dark){:root{--bg: #0d1117;--bg-secondary: #161b22;--text: #e6edf3;--text-secondary: #8b949e;--editor-bg: #0d1117;--border: #30363d;--accent: #58a6ff;--accent-hover: #79b8ff;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .4);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .5)}}html,body{height:100%;font-family:var(--font-sans);background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.3}h1{font-size:2.5rem}h2{font-size:2rem}h3{font-size:1.5rem}a{color:var(--accent);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--accent-hover)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.625rem 1.25rem;font-size:.9375rem;font-weight:500;font-family:inherit;border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);text-decoration:none}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:var(--shadow-md)}.btn-secondary{background:var(--bg-secondary);color:var(--text);border:1px solid var(--border)}.btn-secondary:hover{background:var(--border)}.btn-icon{padding:.5rem;border-radius:var(--radius-sm);background:transparent;color:var(--text-secondary)}.btn-icon:hover{background:var(--bg-secondary);color:var(--text)}.input{width:100%;padding:.625rem .875rem;font-size:.9375rem;font-family:inherit;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:var(--radius-md);transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #3b82f626}.input::placeholder{color:var(--text-secondary)}.card{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem}.status-dot{width:8px;height:8px;border-radius:var(--radius-full);display:inline-block}.status-dot.connected{background:var(--success)}.status-dot.connecting{background:var(--warning);animation:pulse 1.5s infinite}.status-dot.disconnected{background:var(--error)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.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-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.text-center{text-align:center}.text-secondary{color:var(--text-secondary)}.font-mono{font-family:var(--font-mono)}.full-height{min-height:100vh;display:flex;flex-direction:column}.full-height main{flex:1;display:flex;flex-direction:column}