:root{--bg:#0f1117;--surface:#16192a;--surface2:#1e2235;--border:#272b3d;--accent:#4f8ef7;--green:#2ecc71;--red:#e74c3c;--amber:#f39c12;--text:#dde2f0;--muted:#5c6480}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);margin:0}#root{background:var(--bg);color:var(--text);flex-direction:column;gap:1rem;max-width:1200px;min-height:100vh;margin:0 auto;padding:1.5rem;font-family:-apple-system,BlinkMacSystemFont,Inter,system-ui,sans-serif;display:flex}header{align-items:center;gap:.75rem;display:flex}header h1{letter-spacing:-.01em;font-size:1.25rem;font-weight:600}#status-badge{color:var(--muted);background:var(--surface);border:1px solid var(--border);border-radius:99px;align-items:center;gap:.5rem;margin-left:auto;padding:.3rem .75rem;font-size:.8rem;display:flex}.dot{background:var(--muted);border-radius:50%;flex-shrink:0;width:8px;height:8px;transition:background .3s,box-shadow .3s}.dot.connected{background:var(--green);box-shadow:0 0 6px var(--green)}.dot.connecting{background:var(--amber);animation:1s infinite pulse}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:1.25rem 1.5rem}.card-label{text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:1rem;font-size:.65rem;font-weight:700}.controls{flex-wrap:wrap;align-items:center;gap:.6rem;display:flex}.btn{cursor:pointer;white-space:nowrap;border:none;border-radius:7px;padding:.45rem 1.1rem;font-size:.85rem;font-weight:500;transition:opacity .15s,transform .1s}.btn:hover:not(:disabled){opacity:.88}.btn:active:not(:disabled){transform:scale(.96)}.btn:disabled{opacity:.3;cursor:not-allowed}.btn-primary{background:var(--accent);color:#fff}.btn-success{background:var(--green);color:#fff}.btn-danger{background:var(--red);color:#fff}.btn-outline{border:1px solid var(--border);color:var(--text);background:0 0}.divider{background:var(--border);width:1px;height:24px}.controls input[type=number]{background:var(--bg);border:1px solid var(--border);color:var(--text);border-radius:6px;padding:.4rem .6rem;font-family:Menlo,Monaco,monospace;font-size:.8rem}.log{color:var(--muted);max-height:120px;font-family:Menlo,Monaco,monospace;font-size:.72rem;overflow-y:auto}.log-entry{padding:.12rem 0;line-height:1.5}.log-entry.error{color:var(--red)}.log-entry.success{color:var(--green)}.log-entry.warn{color:var(--amber)}@media (width<=680px){#root{padding:1rem}}