.wiring-jump { display: flex; justify-content: space-between; padding: 15px 22px; border-bottom: 1px solid var(--line); background: var(--panel-2); font-size: 13px; color: var(--accent); text-decoration: none; }
.wiring-jump:hover { background: var(--panel-3); }

.wiring-section { margin-top: 28px; overflow: hidden; }
.wiring-section .section-bar { gap: 20px; padding: 22px 24px; }
.wiring-section .eyebrow { margin-bottom: 7px; font-size: 9px; letter-spacing: 1.4px; }
.wiring-section h2 { font-size: 21px; }
.wiring-section .tag { padding: 6px 9px; font-size: 10px; }
.wiring-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 22px; border-bottom: 1px solid var(--line); }
.wiring-filters, .wiring-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.wiring-filters { padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); }
.wiring-toolbar button { padding: 6px 12px; border: 1px solid transparent; border-radius: 7px; background: transparent; font-size: 12px; line-height: 1.5; color: var(--muted); }
.wiring-filters button:hover { color: var(--text); }
.wiring-filters button[aria-pressed=true] { background: var(--panel-3); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.wiring-actions button { border-color: var(--line-2); background: var(--panel-2); color: var(--text); }
.wiring-actions button:hover { border-color: var(--accent); }
.wiring-actions #wiring-practice { border-color: transparent; background: var(--grad); color: #fff; box-shadow: var(--glow); }
.wiring-actions #wiring-reset { color: var(--muted); }

.wiring-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; }
.wiring-canvas-wrap { min-width: 0; background: var(--bg-2); }
.wiring-canvas-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.wiring-canvas-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.wiring-canvas-scroll svg { display: block; width: 100%; min-width: 700px; height: auto; user-select: none; }
.component-card { fill: var(--panel); stroke: var(--line-2); stroke-width: 1.5; }
.component-title { fill: var(--text); font: 600 16px var(--font); }
.component-subtitle { fill: var(--muted); font: 11px var(--font); }
.pin-hit { fill: transparent; stroke: transparent; stroke-width: 1.5; }
.graph-pin { cursor: pointer; touch-action: none; outline: none; }
.pin-dot { fill: none; stroke: var(--wire-color); stroke-width: 2.5; }
.silk { fill: #eef2ec; font-family: var(--mono); }
.pin-label { fill: var(--muted); font: 12px var(--mono); }
.graph-pin:hover .pin-hit, .graph-pin:focus-visible .pin-hit, .graph-pin.is-selected .pin-hit { fill: var(--accent-soft); stroke: var(--accent); }
.graph-pin.is-selected .pin-dot { fill: var(--wire-color); stroke: #fff; stroke-width: 2; }
.graph-pin.is-target .pin-hit { fill: #34d39922; stroke: var(--ok); stroke-dasharray: 3 3; }
.graph-pin.is-target .pin-dot { fill: var(--ok); stroke: #0b0d12; }
.backlight-port { fill: none; stroke: var(--faint); stroke-width: 1.5; stroke-dasharray: 2 2; }
.backlight-label { fill: var(--muted); font: 11px var(--mono); }
.graph-wire { cursor: pointer; outline: none; }
.wire-underlay { fill: none; stroke: var(--bg-2); stroke-width: 5; opacity: .8; }
.wire-line { fill: none; stroke: var(--wire-color); stroke-width: 2.2; opacity: .9; }
.wire-hit { fill: none; stroke: transparent; stroke-width: 16; pointer-events: stroke; }
.graph-wire.is-dimmed { opacity: .12; }
.graph-wire.is-selected .wire-line, .graph-wire:hover .wire-line, .graph-wire:focus-visible .wire-line { stroke-width: 4; opacity: 1; filter: drop-shadow(0 0 4px var(--wire-color)); }
.graph-wire:focus-visible .wire-underlay { stroke: var(--accent); stroke-width: 9; }
.wire-ghost { fill: none; stroke-width: 3; stroke-dasharray: 6 5; pointer-events: none; }
.wire-legend { display: flex; flex-wrap: wrap; gap: 16px; padding: 0 22px; font: 11px var(--mono); color: var(--muted); }
.wire-legend span { display: flex; align-items: center; gap: 6px; }
.wire-legend i { width: 15px; height: 3px; border-radius: 3px; }
.wiring-help { min-height: 44px; padding: 10px 22px 18px; font-size: 12px; color: var(--muted); }

.wiring-sidebar { min-width: 0; padding: 20px 14px; border-left: 1px solid var(--line); background: var(--panel); }
.wiring-list-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 3px 14px; }
.wiring-list-title h3 { font-size: 13px; font-weight: 600; }
.wiring-list-title > span { font: 11px var(--mono); color: var(--accent); white-space: nowrap; }
.wiring-connections { display: flex; flex-direction: column; gap: 4px; }
.connection-row { display: grid; grid-template-columns: 1fr auto 13px; align-items: center; gap: 7px; min-height: 36px; padding: 8px 8px; border: 1px solid var(--line); border-left: 3px solid var(--wire-color); border-radius: 7px; background: var(--panel-2); font-size: 12px; line-height: 1.4; text-align: left; }
.connection-row strong { font: 500 12px var(--mono); color: var(--text); }
.connection-mark { font: 12px var(--mono); color: var(--faint); }
.connection-row:hover, .connection-row[aria-pressed=true] { border-color: var(--line-2); border-left-color: var(--wire-color); background: var(--panel-3); }
.wiring-feedback { min-height: 49px; padding: 13px 22px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #34d39914; font-size: 12px; color: var(--ok); }
.wiring-feedback[data-state=error] { background: #f2626f14; color: var(--danger); }
.wiring-notes { padding: 17px 22px 20px; font-size: 12px; line-height: 1.9; color: var(--muted); }
.wiring-notes p + p { margin-top: 5px; }
.wiring-notes #wiring-bus-note { color: var(--accent); }
.wiring-notes #wiring-backlight-note { color: var(--warn); }
.wiring-notes a { display: inline-block; margin-top: 9px; color: var(--accent); text-underline-offset: 3px; }

@media (max-width: 1100px) {
  .wiring-layout { grid-template-columns: minmax(0, 1fr) 250px; }
  .wiring-sidebar { padding-left: 10px; padding-right: 10px; }
  .connection-row, .connection-row strong { font-size: 11px; }
  .connection-row { gap: 5px; }
}
@media (max-width: 900px) {
  .wiring-layout { grid-template-columns: 1fr; }
  .wiring-sidebar { padding: 20px 22px; border-left: 0; border-top: 1px solid var(--line); }
  .wiring-connections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .connection-row { padding: 9px 10px; }
  .connection-row, .connection-row strong { font-size: 12px; }
  .wiring-canvas-scroll svg { min-width: 720px; }
  .wiring-list-title h3 { font-size: 14px; }
}
@media (max-width: 680px) {
  .wiring-section { margin-top: 22px; }
  .wiring-section .section-bar { align-items: flex-start; padding: 20px 18px; }
  .wiring-section .eyebrow { font-size: 8px; letter-spacing: 1px; }
  .wiring-section h2 { max-width: 220px; font-size: 17px; }
  .wiring-section .tag { margin-top: 4px; padding: 5px; font-size: 9px; }
  .wiring-toolbar { flex-wrap: wrap; gap: 10px; padding: 12px 14px; }
  .wiring-toolbar button { padding: 6px 10px; font-size: 11px; }
  .wiring-actions { margin-left: auto; }
  .wiring-sidebar { padding: 18px 16px; }
  .wiring-connections { grid-template-columns: 1fr; }
  .connection-row { min-height: 40px; }
  .wiring-feedback { min-height: 64px; padding: 13px 18px; }
  .wiring-notes { padding: 17px 18px; }
  .wire-legend { gap: 12px; padding: 12px 18px 0; }
  .wiring-help { padding: 10px 18px 15px; }
  .wiring-jump { padding: 15px 18px; }
}