:root{--bg:#0f1117;--surface:#16192a;--surface2:#1e2235;--border:#272b3d;--accent:#4f8ef7;--green:#2ecc71;--red:#e74c3c;--amber:#f39c12;--text:#dde2f0;--muted:#5c6480;--x-color:#ff6b6b;--y-color:#51cf66;--z-color:#4dabf7}*,: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}.config-grid{grid-template-columns:repeat(3,1fr);gap:.75rem;display:grid}.field label{color:var(--muted);margin-bottom:.3rem;font-size:.7rem;display:block}.field input{background:var(--bg);border:1px solid var(--border);width:100%;color:var(--text);border-radius:6px;outline:none;padding:.45rem .65rem;font-family:Menlo,Monaco,monospace;font-size:.78rem;transition:border-color .15s}.field input:focus{border-color:var(--accent)}.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}.btn-amber{background:var(--amber);color:#fff}.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}.chart-wrap{height:380px;position:relative}.stats{grid-template-columns:repeat(3,1fr);gap:.6rem;margin-top:1rem;display:grid}.stat{background:var(--surface2);border:1px solid var(--border);text-align:center;border-radius:8px;padding:.75rem}.stat-label{color:var(--muted);margin-bottom:.2rem;font-size:.65rem}.stat-value{font-family:Menlo,Monaco,monospace;font-size:1.3rem;font-weight:600}.stat-x .stat-value{color:var(--x-color)}.stat-y .stat-value{color:var(--y-color)}.stat-z .stat-value{color:var(--z-color)}.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)}#battery-badge{color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:99px;align-items:center;gap:.4rem;padding:.3rem .75rem;font-family:Menlo,Monaco,monospace;font-size:.8rem;display:none}.battery-icon{align-items:center;gap:2px;display:inline-flex}.battery-bar{border:1.5px solid;border-radius:2px;width:22px;height:10px;position:relative}.battery-bar:after{content:"";background:currentColor;border-radius:0 1px 1px 0;width:3px;height:5px;position:absolute;top:50%;right:-5px;transform:translateY(-50%)}.battery-fill{border-radius:1px;height:100%;transition:width .4s,background .4s}@media (width<=680px){#root{padding:1rem}.config-grid{grid-template-columns:1fr}}