.props { flex: 1; overflow: auto; }
.props-body { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.props-body h3 { font-size: 14px; }
.field { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 8px; }
.field-label { color: var(--muted); }
.field-control { display: flex; align-items: center; gap: 6px; }
.unit { color: var(--muted); font-family: var(--mono); min-width: 14px; }
.field-group { display: flex; flex-direction: column; gap: 4px; }
.pin-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.pin-list li { display: flex; align-items: center; gap: 8px; }
.pin-list .muted { margin-left: auto; font-size: 11px; }
.dot { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--pin); }
.dot.on { background: var(--wire); border-color: var(--wire); }
.btn-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.summary { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; }
.summary dt { color: var(--muted); }
.summary dd { margin: 0; }

.live-badge{display:inline-flex;align-items:center;margin-inline-start:8px;padding:2px 7px;border-radius:999px;font:600 10px var(--mono);background:var(--accent-soft);color:var(--accent);animation:livePulse 1.2s ease-in-out infinite alternate}
@keyframes livePulse{from{opacity:.55}to{opacity:1}}

/* Quick-access wire colors */
.wire-palette{display:grid;grid-template-columns:repeat(7,minmax(24px,1fr));gap:7px;padding:4px 0 8px}
.wire-swatch{appearance:none;display:block;width:100%;height:28px;min-width:0;padding:0;border:2px solid #718096;border-radius:6px;background:var(--swatch);cursor:pointer;box-shadow:inset 0 0 0 1px #0002;transition:transform .12s,border-color .12s}
.wire-swatch:hover{transform:scale(1.08);border-color:var(--accent,#4aa3df)}
.wire-swatch:focus-visible{outline:2px solid var(--accent,#4aa3df);outline-offset:2px}