/* Circuit Builder */
.cb-tabs { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .8rem; }
.cb-tabs button { display: flex; align-items: center; gap: .4rem; border: 2px solid var(--pmcq-line, #d7e2e8); background: #fff; color: var(--bs-primary); border-radius: 12px; padding: .45rem .85rem; font-weight: 700; cursor: pointer; }
.cb-tabs button.on { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
#circuitLab { outline: none; }

.cb-bar { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: flex-end; margin-bottom: .4rem; }
.cb-pre { margin: 0; min-width: 16rem; }
.cb-pre > span { display: block; font-size: .8rem; font-weight: 700; color: #475569; margin-bottom: .15rem; }
.cb-btns { display: flex; gap: .4rem; flex-wrap: wrap; }

.cb-main { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1rem; align-items: start; }
.cb-left { min-width: 0; }
.cb-palette { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .5rem; align-items: center; }
.cb-part, .cb-mode { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--pmcq-line, #d7e2e8); background: #fff; color: #0b3d5c; border-radius: 10px; padding: .25rem .55rem; font-size: .84rem; font-weight: 600; cursor: pointer; }
.cb-part:hover, .cb-mode:hover { background: #eef5f8; }
.cb-mode.on { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
.cb-ico { display: inline-flex; }
.cb-sep { width: 1px; align-self: stretch; background: var(--pmcq-line, #d7e2e8); margin: 0 .2rem; }
.cb-stage { border: 1px solid var(--pmcq-line, #d7e2e8); border-radius: 14px; overflow: hidden; background: #fbfdff; }
.cb-svg { display: block; width: 100%; height: auto; touch-action: none; user-select: none; -webkit-user-select: none; }
.cb-lbl { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 15px; fill: #1e293b; paint-order: stroke; stroke: rgba(251, 253, 255, .95); stroke-width: 3px; pointer-events: none; }
.cb-lbl.b { font-weight: 800; font-size: 16px; }
.cb-lbl.s { font-size: 13px; fill: #475569; }
.cb-flow { stroke: #f59e0b; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 0.1 16; animation: cbflow 1s linear infinite; pointer-events: none; }
.cb-flow.el { stroke: #3b82f6; }
.cb-flow.rev { animation-direction: reverse; }
@keyframes cbflow { to { stroke-dashoffset: -16; } }
@media (prefers-reduced-motion: reduce) { .cb-flow { animation: none; stroke-dasharray: 2 14; } }
.cb-opts { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; align-items: center; margin-top: .5rem; font-size: .88rem; }

.cb-side { min-width: 0; display: flex; flex-direction: column; gap: .8rem; }
.cb-card { padding: .8rem; overflow-x: auto; }
.cb-h { font-size: 1.02rem; color: var(--bs-primary); margin: 0 0 .5rem; }
.cb-field { display: block; margin-bottom: .5rem; }
.cb-field > span { display: block; font-size: .8rem; font-weight: 700; color: #475569; margin-bottom: .15rem; }
.cb-table { margin-bottom: .4rem; }
.cb-table th, .cb-table td { padding-left: .25rem; padding-right: .25rem; }
.cb-table th { font-size: .74rem; color: #475569; }
.cb-table td { font-size: .86rem; }
.cb-ans { display: flex; align-items: center; gap: .6rem; max-width: 30rem; }
.cb-chal { max-width: 760px; }

@media (max-width: 991px) {
  .cb-main { grid-template-columns: minmax(0, 1fr); }
}