:root{--background: #0b0d10;--card: #14171c;--card-border: #232830;--foreground: #e6e8 eb;--foreground: #e6e8eb;--muted: #8b94a3;--primary: #4f8cff;--primary-fg: #0b0d10;--accent: #1c2128;--ring: #4f8cff;--radius: 8px;--row-h: 44px;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--background);color:var(--foreground);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:13px}#app{height:100%}.app-shell{display:flex;flex-direction:column;height:100vh}.toolbar{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--card-border);background:var(--card);flex:0 0 auto;flex-wrap:wrap}.toolbar .title{font-weight:600;margin-right:8px}.toolbar .stat{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}.toolbar .spacer{flex:1 1 auto}.btn{appearance:none;border:1px solid var(--card-border);background:var(--accent);color:var(--foreground);border-radius:var(--radius);padding:6px 12px;font-size:13px;cursor:pointer;line-height:1.2}.btn:hover{border-color:var(--ring)}.btn:focus-visible{outline:2px solid var(--ring);outline-offset:1px}.btn.primary{background:var(--primary);color:var(--primary-fg);border-color:var(--primary)}.scroll-area{flex:1 1 auto;overflow-y:auto;padding:8px 12px}.group-header{position:sticky;top:0;z-index:1;background:var(--background);color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.04em;padding:8px 4px 4px;border-bottom:1px solid var(--card-border)}.param-row{display:grid;grid-template-columns:220px 1fr auto;align-items:center;gap:12px;min-height:var(--row-h);padding:4px 8px;border-bottom:1px solid var(--card-border)}.param-row .label{color:var(--foreground);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.param-row .label .addr{display:block;color:var(--muted);font-size:10px;overflow:hidden;text-overflow:ellipsis}.param-row .value-readout{color:var(--muted);font-variant-numeric:tabular-nums;text-align:right;min-width:64px}.slider{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:999px;background:var(--accent);outline:none}.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--primary);cursor:pointer;border:2px solid var(--card)}.slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--primary);cursor:pointer;border:2px solid var(--card)}.switch{position:relative;width:38px;height:22px;border-radius:999px;background:var(--accent);border:1px solid var(--card-border);cursor:pointer;padding:0;transition:background .12s ease}.switch[data-on=true]{background:var(--primary);border-color:var(--primary)}.switch .knob{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .12s ease}.switch[data-on=true] .knob{transform:translate(16px)}.select,.input{width:100%;background:var(--accent);color:var(--foreground);border:1px solid var(--card-border);border-radius:var(--radius);padding:6px 8px;font-size:13px;height:30px}.select:focus,.input:focus{outline:2px solid var(--ring);outline-offset:0;border-color:var(--ring)}.swatch{width:22px;height:22px;border-radius:4px;border:1px solid var(--card-border);display:inline-block}.chips{display:flex;gap:6px;flex-wrap:wrap}.chip{background:var(--accent);border:1px solid var(--card-border);border-radius:999px;padding:2px 8px;font-size:11px;color:var(--muted)}.badge{display:inline-block;padding:1px 6px;border-radius:999px;font-size:10px;background:var(--accent);color:var(--muted);border:1px solid var(--card-border)}.badge.ok{color:#7ee787;border-color:#2ea04326}.badge.warn{color:#ffd866}