/* ═══════════════════════════════════════════════════════════════
   SPARKYLAB — game modules
   1. TEST LAB (ported framework: fault lab · consumer unit · 3-phase)
   2. QUIZ engine (quick-fire rounds)
   Selector names for part 1 are kept in sync with the ported JS —
   restyle freely, rename carefully.
   ═══════════════════════════════════════════════════════════════ */

/* ── accordion section menu ── */
.cx-menu { max-width: 1280px; display: flex; flex-direction: column; gap: 14px; }
.cx-sec {
  border: 1px solid var(--line); background: var(--glass);
  border-radius: var(--r-lg);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: border-color .3s, box-shadow .3s;
  overflow: hidden;
}
.cx-sec.open { border-color: rgba(163, 91, 255, .45); box-shadow: 0 14px 44px rgba(111, 0, 255, .14); }
.cx-head {
  width: 100%; display: flex; align-items: center; gap: 16px;
  padding: 18px 22px; text-align: left;
  transition: background .2s;
}
.cx-head:hover { background: var(--glass-brt); }
.cx-glyph {
  font-style: normal; font-size: 1.25rem; width: 44px; height: 44px; flex: 0 0 44px;
  display: grid; place-items: center; border-radius: 14px;
  background: linear-gradient(150deg, rgba(111,0,255,.3), rgba(111,0,255,.06));
  border: 1px solid rgba(163,91,255,.35);
  color: var(--dim); transition: color .25s, transform .35s var(--spring), box-shadow .25s;
}
.cx-sec.open .cx-glyph { color: var(--pink); transform: scale(1.1) rotate(-4deg); box-shadow: 0 0 18px rgba(111,0,255,.35); }
.cx-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cx-titles b { font: 700 .95rem/1.2 var(--font-d); letter-spacing: .1em; color: var(--ink); transition: color .25s; }
.cx-titles span { font: 500 .64rem/1.4 var(--font-m); letter-spacing: .04em; color: var(--dim); text-transform: lowercase; }
.cx-sec.open .cx-titles b { color: var(--pink); }
.cx-chev { color: var(--faint); transition: transform .4s var(--spring); }
.cx-sec.open .cx-chev { transform: rotate(180deg); color: var(--pink); }
.cx-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.cx-sec.open .cx-body { grid-template-rows: 1fr; }
.cx-inner { overflow: hidden; min-height: 0; }
.cx-sec.open .cx-inner { padding: 6px 18px 20px; }

/* ── fault lab ── */
.fl-top { display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; margin-bottom: 12px; }
.fl-sympt { flex: 1; min-width: 240px; font: 500 .76rem/1.6 var(--font-m); color: var(--silver); }
.fl-sympt .id-pre { color: var(--yellow); margin-right: 8px; font: 700 .62rem/1 var(--font-d); letter-spacing: .18em; }
.fl-stats { display: flex; gap: 14px; font: 700 .64rem/1 var(--font-m); letter-spacing: .1em; }
#fl-score { color: var(--yellow); }
#fl-solved { color: var(--faint); }
#fl-cv {
  display: block; width: 100%; aspect-ratio: 940 / 470; touch-action: none;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: rgba(2, 0, 10, .45);
}
.fl-strip { display: flex; align-items: flex-start; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.fl-strip .btn-y, .fl-strip .btn-ghost { padding: 10px 18px; font-size: .68rem; }
.fl-log { list-style: none; flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 3px; }
.fl-log li { font: 500 .62rem/1.5 var(--font-m); color: var(--dim); letter-spacing: .03em; animation: log-in .3s var(--spring) both; }
@keyframes log-in { from { opacity: 0; transform: translateX(-8px); } }
.fl-log li.bad { color: var(--pink); }
.fl-log li:first-child { color: var(--ink); }
.fl-log li:first-child.bad { color: var(--pink); }

/* difficulty pills */
.fl-diff {
  display: flex; gap: 4px; padding: 4px;
  border: 1px solid var(--line-brt); border-radius: 999px; margin-left: auto;
  background: rgba(0,0,0,.25);
}
.fl-diff button {
  font: 700 .55rem/1 var(--font-d); letter-spacing: .14em; color: var(--dim);
  background: none; border: 0; border-radius: 999px; padding: 7px 13px; cursor: pointer;
  transition: all .25s var(--spring);
}
.fl-diff button:hover { color: var(--ink); }
.fl-diff button.on {
  color: #fff; background: linear-gradient(120deg, var(--brand), #9b3bff);
  box-shadow: 0 2px 14px rgba(111,0,255,.5);
}

/* diagnosis picker modal */
.fl-picker {
  position: fixed; z-index: 230; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(470px, calc(100vw - 32px)); max-height: 80vh; overflow-y: auto;
  background: rgba(14, 8, 30, .96);
  border: 1px solid rgba(163,91,255,.4); border-radius: var(--r-lg); padding: 18px 20px;
  box-shadow: 0 30px 90px rgba(0,0,0,.7), 0 0 40px rgba(111,0,255,.15);
  backdrop-filter: blur(18px);
  animation: fl-db-in .3s var(--spring);
}
.fl-picker h3 { display: flex; justify-content: space-between; font: 700 .8rem/1 var(--font-d); letter-spacing: .18em; color: var(--pink); margin-bottom: 8px; }
#fl-picker-close { color: var(--dim); padding: 2px 8px; border-radius: 8px; }
#fl-picker-close:hover { color: var(--pink); }
.fl-picker-sub { font: 500 .62rem/1.6 var(--font-m); color: var(--dim); margin-bottom: 12px; }
#fl-opts { display: flex; flex-direction: column; gap: 6px; }
#fl-opts button {
  text-align: left; padding: 11px 14px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  font: 600 .68rem/1.4 var(--font-m); letter-spacing: .04em; color: var(--silver);
  transition: all .18s var(--spring);
}
#fl-opts button:hover { border-color: var(--pink); color: var(--ink); transform: translateX(4px); background: rgba(163,91,255,.08); }
#fl-opts button.wrong { border-color: var(--pink); color: var(--pink); animation: fl-shake .4s; }
@keyframes fl-shake { 25% { transform: translateX(-6px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }

/* field debrief modal */
.fl-debrief {
  position: fixed; z-index: 230; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(540px, calc(100vw - 32px)); max-height: 86vh; overflow-y: auto;
  background: rgba(14, 8, 30, .96);
  border: 1px solid rgba(163,91,255,.4); border-radius: var(--r-lg); padding: 20px 22px;
  box-shadow: 0 30px 90px rgba(0,0,0,.7), 0 0 40px rgba(111,0,255,.15);
  backdrop-filter: blur(18px);
  animation: fl-db-in .3s var(--spring);
}
@keyframes fl-db-in { from { opacity: 0; transform: translate(-50%, -46%) scale(.95); } }
.fl-debrief h3 { display: flex; justify-content: space-between; align-items: center; font: 700 .8rem/1 var(--font-d); letter-spacing: .18em; color: var(--pink); margin-bottom: 10px; }
#fl-db-close { color: var(--dim); padding: 2px 8px; border-radius: 8px; }
#fl-db-close:hover { color: var(--pink); }
.fl-db-verdict { font: 700 .76rem/1.3 var(--font-d); letter-spacing: .08em; color: var(--pink); }
.fl-db-verdict.win { color: var(--green); text-shadow: 0 0 14px rgba(0,255,2,.4); }
.fl-db-fault { font: 700 .95rem/1.3 var(--font-d); letter-spacing: .04em; color: var(--ink); margin: 4px 0 15px; }
.fl-db-sect { margin-bottom: 15px; }
.fl-db-lbl { display: block; font: 700 .57rem/1 var(--font-d); letter-spacing: .22em; color: var(--yellow); margin-bottom: 8px; }
.fl-db-sect ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.fl-db-sect ol li { font: 400 .72rem/1.6 var(--font-m); color: var(--silver); padding-left: 4px; }
.fl-db-sect ol li::marker { color: var(--pink); font-weight: 700; }
#fl-db-rules { font: 400 .72rem/1.65 var(--font-m); color: var(--dim); border-left: 2px solid rgba(163,91,255,.4); padding-left: 12px; }
.fl-db-actions { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; }

/* training — GN3 tick sheet */
#fl-train.on { color: var(--yellow); border-color: var(--yellow); }
#fl-train.signed-off::after { content: " ✓"; color: var(--green); }
.fl-sched {
  margin-top: 14px; border: 1px solid var(--line-brt); border-radius: var(--r-md);
  padding: 16px 18px; background: rgba(2, 0, 10, .35);
}
.fl-sched h3 {
  display: flex; justify-content: space-between; align-items: center;
  font: 700 .62rem/1.4 var(--font-d); letter-spacing: .2em; color: var(--yellow); margin-bottom: 8px;
}
.fl-sched-gn { color: var(--dim); letter-spacing: .3em; }
.fl-sched ol { list-style: none; margin: 0; padding: 0; }
.fl-si { border-top: 1px dashed var(--line); }
.fl-si-head {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 9px 2px; font: 600 .68rem/1.3 var(--font-m); color: var(--silver);
  background: none; border: 0; cursor: pointer; letter-spacing: .04em;
}
.fl-si-head:hover { color: var(--ink); }
.fl-si-box { width: 15px; height: 15px; border: 1.5px solid var(--dim); border-radius: 4px; flex: 0 0 15px; position: relative; }
.fl-si.done .fl-si-box::after {
  content: "✓"; position: absolute; left: 0; top: -7px;
  font: 700 21px/1 'Segoe Print', 'Bradley Hand', cursive;
  color: var(--green); transform: rotate(-8deg);
  text-shadow: 0 0 10px rgba(0,255,2,.5);
  animation: fl-tick .35s var(--spring);
}
@keyframes fl-tick { from { transform: rotate(-8deg) scale(2.2); opacity: 0; } }
.fl-si.done .fl-si-head > span:nth-child(2) { color: var(--dim); text-decoration: line-through; text-decoration-color: rgba(0,255,2,.5); }
.fl-si-prog { margin-left: auto; font: 500 .58rem/1 var(--font-m); color: var(--yellow); white-space: nowrap; }
.fl-si-why { display: none; font: 400 .66rem/1.65 var(--font-m); color: var(--dim); padding: 0 2px 10px 27px; }
.fl-si.open .fl-si-why { display: block; }
.fl-sched-stamp {
  width: max-content; max-width: 100%; margin: 14px auto 2px; padding: 8px 16px;
  font: 700 .72rem/1.3 var(--font-d); letter-spacing: .14em; color: var(--green);
  border: 2px solid var(--green); border-radius: var(--r-sm); transform: rotate(-2.5deg);
  text-shadow: 0 0 12px rgba(0,255,2,.5); box-shadow: 0 0 24px rgba(0,255,2,.2);
  animation: fl-tick .4s var(--spring);
}

/* field guide crib sheet */
.fl-cheat {
  margin-top: 14px; border: 1px solid var(--line-brt); border-radius: var(--r-md);
  padding: 16px 18px; background: rgba(2, 0, 10, .35);
}
.fl-cheat h3 { font: 700 .62rem/1.4 var(--font-d); letter-spacing: .2em; color: var(--yellow); margin-bottom: 10px; }
.fl-cheat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px 22px; }
.fl-cheat-grid h4 { font: 700 .58rem/1.4 var(--font-d); letter-spacing: .16em; color: var(--pink); margin-bottom: 6px; }
.fl-cheat-grid ul, .fl-cheat-grid ol { margin: 0; padding-left: 16px; display: flex; flex-direction: column; gap: 4px; }
.fl-cheat-grid li { font: 400 .68rem/1.55 var(--font-m); color: var(--silver); }
.fl-cheat-grid li b { color: var(--ink); }
.fl-cheat-grid ul li::marker { color: var(--pink); }
.fl-cheat-grid ol li::marker { color: var(--yellow); font-weight: 700; }
.fl-gloss-card { grid-column: 1 / -1; }
.fl-gloss-card ul { columns: 2; column-gap: 26px; }
.fl-gloss-card li { break-inside: avoid; margin-bottom: 3px; }
@media (max-width: 560px) { .fl-gloss-card ul { columns: 1; } }

/* ── consumer unit ── */
.circuit-wrap { max-width: 1280px; }
.circuit-grid {
  display: grid; gap: 16px;
  grid-template-columns: minmax(340px, 430px) 1fr;
  grid-template-areas: "cu house" "cu readout";
}
.cu-panel { grid-area: cu; }
.house-panel { grid-area: house; }
.cu-readout { grid-area: readout; display: flex; gap: 26px; align-items: center; flex-wrap: wrap; }
.cu-spec { color: var(--faint); font: 500 .6rem/1.5 var(--font-m); letter-spacing: .1em; }

.cu-board {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  padding: 14px; border-radius: var(--r-md);
  background: rgba(2, 0, 10, .5);
  border: 1px solid var(--line-brt);
  box-shadow: inset 0 0 34px rgba(0,0,0,.6);
}
.cu-dev {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 4px 8px; border-radius: var(--r-sm);
  background: #100a20; border: 1px solid #251a40;
  transition: border-color .25s, box-shadow .25s, transform .2s var(--spring);
}
.cu-dev.is-live-dev { border-color: rgba(163,91,255,.55); box-shadow: 0 0 14px rgba(111,0,255,.2); }
.cu-dev.is-tripped { border-color: var(--yellow); animation: trip-flash .5s steps(2) 3; }
@keyframes trip-flash { 50% { box-shadow: 0 0 20px rgba(255,201,61,.6); } }
.cu-dev.is-warning { border-color: var(--yellow); }
.cu-dev.is-warning .cu-amp { color: var(--yellow); animation: warn-blink .35s steps(2) infinite; }
@keyframes warn-blink { 50% { opacity: .3; } }
.cu-amp { font: 700 .72rem/1 var(--font-d); color: var(--silver); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.cu-amp em { font: 500 .52rem/1 var(--font-m); color: var(--faint); font-style: normal; }
.cu-lbl { font: 600 .5rem/1.45 var(--font-d); letter-spacing: .08em; color: var(--dim); text-align: center; min-height: 2.2em; }
.cu-sw {
  width: 26px; height: 44px; border-radius: 6px;
  background: #170e2e; border: 1px solid #2e2052;
  position: relative;
}
.cu-sw i {
  position: absolute; left: 3px; right: 3px; height: 17px; top: 22px;
  background: linear-gradient(#4a3f70, #2c2450); border-radius: 4px;
  transition: top .14s var(--spring), background .2s, box-shadow .2s;
}
.cu-sw.on i { top: 4px; background: linear-gradient(#b47aff, #7a17ff); box-shadow: 0 0 12px rgba(140,60,255,.65); }
.cu-sw.tripped i { top: 13px; background: linear-gradient(#ffe08a, #d9a400); }
.cu-test {
  position: absolute; top: 6px; right: 5px; width: 16px; height: 16px;
  background: var(--yellow); color: #140b00; border-radius: 50%;
  font: 700 .55rem/1 var(--font-d);
  box-shadow: 0 0 0 1px rgba(0,0,0,.6) inset;
  transition: transform .15s var(--spring);
}
.cu-test:active { transform: scale(.8); }
.cu-legend { display: flex; gap: 16px; margin-top: 12px; font: 500 .58rem/1.5 var(--font-m); color: var(--dim); letter-spacing: .08em; flex-wrap: wrap; }
.cu-legend i { display: inline-block; width: 16px; height: 5px; margin-right: 5px; vertical-align: middle; border-radius: 3px; }
.wire-l { background: #7a4a21; } .wire-n { background: #2b5fbf; }
.wire-e { background: repeating-linear-gradient(90deg, #3f9b46 0 4px, #ffd60a 4px 8px); }
.cu-info {
  margin-top: 12px; min-height: 3.6em; padding: 11px 14px;
  border: 1px dashed var(--line-brt); border-radius: var(--r-sm);
  font: 400 .68rem/1.65 var(--font-m); color: var(--silver);
}
.cu-info b { color: var(--yellow); }

#house-svg-wrap svg { width: 100%; height: auto; display: block; }
.h-room { fill: rgba(255,255,255,.02); stroke: var(--faint); stroke-width: 1; rx: 6; }
.h-room-lbl { fill: var(--faint); font: 600 8px var(--font-d); letter-spacing: .14em; }
.h-wire { fill: none; stroke: #241a42; stroke-width: 1.6; }
.h-wire.live {
  stroke: var(--pink); stroke-dasharray: 6 5;
  animation: wire-flow .5s linear infinite;
  filter: drop-shadow(0 0 3px rgba(163,91,255,.8));
}
@keyframes wire-flow { to { stroke-dashoffset: -11; } }
.lamp circle.bulb { fill: #171030; stroke: var(--faint); stroke-width: 1; transition: fill .2s; }
.lamp .halo { fill: #ffd60a; opacity: 0; transition: opacity .25s; }
.lamp.on circle.bulb { fill: #ffe97a; stroke: #ffd60a; }
.lamp.on .halo { opacity: .18; }
.lamp { cursor: pointer; }
.appl { cursor: pointer; }
.appl-bg { fill: #100a20; stroke: none; }
.appl rect { fill: #130c26; stroke: #2e2052; transition: fill .2s, stroke .2s; }
.appl .appl-bg { fill: #100a20; }
.appl text { fill: var(--dim); font: 600 7px var(--font-d); letter-spacing: .01em; }
.appl.on rect:not(.appl-bg) { fill: rgba(163,91,255,.2); stroke: var(--pink); }
.appl.on text { fill: var(--ink); }
.appl.no-power rect:not(.appl-bg) { stroke-dasharray: 3 2; }
.h-cu-box { fill: #100a20; stroke: var(--silver); stroke-width: 1; }
.h-cu-lbl { fill: var(--silver); font: 700 8px var(--font-d); }

.ro-item span { display: block; color: var(--faint); font: 600 .58rem/1.6 var(--font-m); letter-spacing: .18em; }
.ro-item b { font: 700 1.25rem/1.3 var(--font-d); color: var(--ink); }
.ro-item b.hot { color: var(--yellow); }
.ro-meter { flex: 1 1 160px; height: 10px; border-radius: 999px; background: rgba(255,255,255,.06); position: relative; overflow: hidden; }
.ro-meter i {
  position: absolute; inset: 0 auto 0 0; width: 0%; border-radius: 999px;
  background: linear-gradient(90deg, var(--green), var(--yellow) 70%, var(--pink));
  transition: width .4s var(--spring);
}
.ro-tip { flex-basis: 100%; color: var(--dim); font: 400 .68rem/1.7 var(--font-m); border-top: 1px dashed var(--line); padding-top: 10px; }
.ro-tip b { color: var(--green); }

/* ── three-phase ── */
.tp-panel { margin-top: 2px; max-width: 1280px; border: 0; background: none; backdrop-filter: none; padding: 0; }
.tp-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; }
#tp-canvas {
  width: 100%; height: 260px; display: block;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: rgba(2, 0, 10, .45);
}
.tp-side { display: flex; flex-direction: column; gap: 14px; }
.tp-lbl { display: block; font: 700 .58rem/1 var(--font-d); letter-spacing: .22em; color: var(--faint); margin-bottom: 8px; }
.tp-measure { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.tp-btn {
  padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px;
  font: 600 .62rem/1.4 var(--font-d); letter-spacing: .1em; color: var(--dim);
  transition: all .2s var(--spring);
}
.tp-btn b { color: var(--ink); margin-left: 6px; }
.tp-btn:hover { border-color: var(--line-brt); color: var(--ink); transform: translateY(-1px); }
.tp-btn.is-active { border-color: var(--pink); color: var(--pink); background: rgba(163,91,255,.1); box-shadow: 0 0 16px rgba(111,0,255,.2); }
.tp-slider { display: grid; grid-template-columns: 14px 26px 1fr 44px; gap: 8px; align-items: center; margin-bottom: 6px; }
.tp-slider i { width: 14px; height: 5px; border-radius: 3px; }
.tp-slider span { font: 700 .66rem/1 var(--font-d); color: var(--silver); }
.tp-slider input { accent-color: var(--pink); min-width: 0; }
.tp-slider b { font: 600 .68rem/1 var(--font-m); color: var(--ink); text-align: right; }
.tp-neutral {
  margin-top: 8px; padding: 12px 14px; border: 1px dashed var(--line-brt); border-radius: var(--r-sm);
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.tp-neutral span { font: 700 .56rem/1 var(--font-d); letter-spacing: .18em; color: var(--faint); }
.tp-neutral b { font: 700 1.1rem/1 var(--font-d); color: var(--ink); }
.tp-neutral em { font: italic 400 .66rem/1.4 var(--font-m); }

/* ═══ QUIZ — quick-fire rounds ═══════════════════════════════ */
.quiz-wrap { max-width: 720px; margin: 0 auto; }

.qz-intro { text-align: center; padding: 40px 24px 44px; }
.qz-intro .qz-emoji { font-size: 3rem; display: block; animation: qz-bob 2.6s ease-in-out infinite; }
@keyframes qz-bob { 50% { transform: translateY(-8px); } }
.qz-intro h3 { font: 700 1.5rem/1.2 var(--font-d); margin: 16px 0 8px; letter-spacing: .02em; }
.qz-intro p { color: var(--dim); font: 500 .74rem/1.7 var(--font-m); max-width: 420px; margin: 0 auto 20px; }
.qz-best { display: inline-block; margin-bottom: 22px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line-brt); color: var(--green); font: 700 .62rem/1 var(--font-m); letter-spacing: .14em; }

.qz-hud { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.qz-prog { flex: 1; height: 8px; border-radius: 999px; background: rgba(255,255,255,.07); overflow: hidden; }
.qz-prog i {
  display: block; height: 100%; width: 0%; border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), var(--pink));
  box-shadow: 0 0 12px rgba(111,0,255,.7);
  transition: width .5s var(--spring);
}
.qz-count { font: 700 .68rem/1 var(--font-m); color: var(--dim); letter-spacing: .1em; }
.qz-streak { font: 700 .68rem/1 var(--font-m); color: var(--faint); letter-spacing: .08em; transition: transform .3s var(--spring), color .3s; }
.qz-streak.hot { color: var(--yellow); text-shadow: 0 0 12px rgba(255,201,61,.6); }
.qz-streak.pop { animation: streak-pop .4s var(--spring); }
@keyframes streak-pop { 40% { transform: scale(1.5) rotate(-6deg); } }

.qz-card {
  padding: 28px 26px;
  animation: q-in .45s var(--spring) both;
}
@keyframes q-in { from { opacity: 0; transform: translateX(40px) scale(.97); } }
.qz-card.out { animation: q-out .3s ease-in both; }
@keyframes q-out { to { opacity: 0; transform: translateX(-40px) scale(.97); } }
.qz-q { font: 700 clamp(1rem, 2.6vw, 1.25rem)/1.45 var(--font-d); margin-bottom: 22px; }
.qz-opts { display: flex; flex-direction: column; gap: 10px; }
.qz-opt {
  position: relative; text-align: left; padding: 14px 18px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--glass);
  font: 600 .8rem/1.5 var(--font-d); color: var(--silver);
  transition: all .2s var(--spring);
}
.qz-opt:not(:disabled):hover { border-color: var(--pink); color: var(--ink); transform: translateX(6px); background: rgba(163,91,255,.07); }
.qz-opt:not(:disabled):active { transform: scale(.98); }
.qz-opt.right {
  border-color: var(--green); color: var(--green);
  background: rgba(0, 255, 2, .07);
  box-shadow: 0 0 22px rgba(0, 255, 2, .18);
  animation: opt-right .5s var(--spring);
}
@keyframes opt-right { 35% { transform: scale(1.03); } }
.qz-opt.wrong {
  border-color: #ff4d6a; color: #ff8095;
  background: rgba(255, 45, 85, .07);
  animation: fl-shake .4s;
}
.qz-opt:disabled { cursor: default; opacity: .85; }
.qz-why {
  margin-top: 18px; padding: 13px 16px;
  border-left: 3px solid var(--pink); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: rgba(163, 91, 255, .06);
  color: var(--silver); font: 400 .7rem/1.7 var(--font-m);
  animation: view-in .35s var(--spring) both;
}
.qz-why b { color: var(--pink); }
.qz-next { margin-top: 18px; text-align: right; }

.qz-result { text-align: center; padding: 44px 24px; }
.qz-result .qz-ring {
  width: 130px; height: 130px; margin: 0 auto 18px; border-radius: 50%;
  display: grid; place-items: center; position: relative;
  background:
    radial-gradient(closest-side, var(--bg-2) 82%, transparent 83% 100%),
    conic-gradient(var(--green) calc(var(--pct) * 1%), rgba(255,255,255,.08) 0);
  animation: ring-in .8s var(--spring) both;
}
@keyframes ring-in { from { transform: scale(.4) rotate(-30deg); opacity: 0; } }
.qz-ring b { font: 700 2rem/1 var(--font-d); }
.qz-ring span { display: block; font: 600 .55rem/1.6 var(--font-m); color: var(--dim); letter-spacing: .14em; }
.qz-result h3 { font: 700 1.4rem/1.2 var(--font-d); margin-bottom: 6px; }
.qz-result p { color: var(--dim); font: 500 .72rem/1.7 var(--font-m); margin-bottom: 6px; }
.qz-result .qz-xp { color: var(--green); font: 700 .9rem/1 var(--font-m); margin: 10px 0 24px; text-shadow: 0 0 14px rgba(0,255,2,.5); }
.qz-result .qz-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ── AM2 arena ── */
.am2-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.am2-card { display: flex; flex-direction: column; gap: 8px; }
.am2-card h4 { font: 700 .85rem/1.3 var(--font-d); letter-spacing: .06em; }
.am2-card h4 i { font-style: normal; margin-right: 8px; }
.am2-card p { color: var(--dim); font: 400 .68rem/1.65 var(--font-m); flex: 1; }
.am2-card .btn-ghost { align-self: flex-start; padding: 9px 16px; font-size: .64rem; }
.am2-note { margin-top: 16px; color: var(--faint); font: 500 .64rem/1.7 var(--font-m); }
.am2-note b { color: var(--yellow); }

/* ── responsive ── */
@media (max-width: 1080px) {
  .circuit-grid { grid-template-columns: 1fr; grid-template-areas: "cu" "house" "readout"; }
  .tp-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .cx-head { padding: 14px 14px; gap: 10px; }
  .cx-titles span { display: none; }
  #fl-cv { min-height: 240px; }
  .cu-board { gap: 5px; }
  .cu-readout { gap: 14px; }
}

/* ═══════════════════════════════════════════════════════════════
   THE DESIGN BENCH (design.js) — cable-sizing game
   ═══════════════════════════════════════════════════════════════ */
.db-wrap { display: grid; gap: 16px; max-width: 840px; margin: 0 auto; }

.db-brief { position: relative; }
.db-tag {
  display: inline-block; font: 700 11px var(--font-m, monospace); letter-spacing: .12em;
  color: var(--brand, #6f00ff); background: color-mix(in srgb, var(--brand, #6f00ff) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand, #6f00ff) 40%, transparent);
  padding: 3px 10px; border-radius: 999px; margin-bottom: 10px;
}
.db-brief h3 { font-size: 22px; margin: 0 0 14px; letter-spacing: .01em; }
.db-specs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.db-specs span {
  display: flex; flex-direction: column; gap: 2px; min-width: 92px; flex: 1;
  padding: 10px 12px; border-radius: 12px;
  background: var(--glass, rgba(255,255,255,.04)); border: 1px solid var(--line, rgba(255,255,255,.08));
}
.db-specs b { font: 700 20px var(--font-m, monospace); color: var(--ink, #f5f3ff); line-height: 1; }
.db-specs em { font-style: normal; font-size: 10.5px; color: var(--faint, #6f6894); letter-spacing: .04em; }
.db-specs span:last-child b { font-size: 15px; color: var(--yellow, #ffc93d); }
.db-hint { font-size: 13px; color: var(--dim, #9d95c2); line-height: 1.5; }
.db-hint b { color: var(--ink, #f5f3ff); }

.db-pickers { display: grid; gap: 14px; }
.db-row { display: grid; gap: 8px; }
.db-lbl { font: 700 11px var(--font-m, monospace); letter-spacing: .1em; color: var(--dim, #9d95c2); }
.db-lbl em { font-style: normal; color: var(--faint, #6f6894); margin-left: 6px; }
.db-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.db-pill {
  font: 700 14px var(--font-m, monospace); color: var(--ink, #f5f3ff);
  background: var(--glass, rgba(255,255,255,.04)); border: 1px solid var(--line, rgba(255,255,255,.10));
  padding: 9px 15px; border-radius: 11px; cursor: pointer;
  transition: transform .22s var(--spring, cubic-bezier(.34,1.56,.64,1)), background .15s, border-color .15s;
}
.db-pill:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--brand, #6f00ff) 55%, transparent); }
.db-pill.on {
  background: linear-gradient(135deg, var(--brand, #6f00ff), var(--pink, #a35bff));
  border-color: transparent; color: #fff; transform: translateY(-2px);
  box-shadow: 0 6px 20px -6px color-mix(in srgb, var(--brand, #6f00ff) 70%, transparent);
}

.db-checks { display: grid; gap: 9px; }
.db-check {
  display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: 12px;
  background: var(--glass, rgba(255,255,255,.03)); border: 1px solid var(--line, rgba(255,255,255,.07));
  transition: border-color .2s, background .2s;
}
.db-mark { font-size: 17px; text-align: center; }
.db-cl { font: 600 13.5px var(--font-d, sans-serif); color: var(--ink, #f5f3ff); }
.db-cd { font: 500 12px var(--font-m, monospace); color: var(--dim, #9d95c2); text-align: right; }
.db-cd b { color: var(--ink, #f5f3ff); }
.db-check.ok  { border-color: color-mix(in srgb, var(--green, #00ff02) 45%, transparent); background: color-mix(in srgb, var(--green, #00ff02) 8%, transparent); }
.db-check.ok  .db-mark { color: var(--green, #00ff02); }
.db-check.bad { border-color: color-mix(in srgb, var(--pink, #ff5a6a) 55%, transparent); background: color-mix(in srgb, #ff5a6a 9%, transparent); }
.db-check.bad .db-mark { color: #ff5a6a; }
.db-check.pending { opacity: .62; }
.db-check.pending .db-mark { color: var(--faint, #6f6894); }

.db-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.db-checks .db-actions { grid-column: 1 / -1; }
.btn-y:disabled { opacity: .4; cursor: not-allowed; filter: grayscale(.3); box-shadow: none; }

.db-result { text-align: center; }
.db-emoji { font-size: 46px; display: block; margin-bottom: 6px; animation: qz-bob 2.4s ease-in-out infinite; }
.db-result h3 { font-size: 22px; margin: 4px 0 12px; letter-spacing: .02em; }
.db-sol { font-size: 15px; color: var(--ink, #f5f3ff); margin-bottom: 8px; }
.db-sol b { color: var(--green, #00ff02); }
.db-note { font-size: 13px; color: var(--dim, #9d95c2); line-height: 1.55; max-width: 520px; margin: 0 auto 14px; }
.db-note b { color: var(--ink, #f5f3ff); }
.db-xp { font: 700 12px var(--font-m, monospace); letter-spacing: .1em; color: var(--green, #00ff02); margin-bottom: 14px; }
.db-result .db-actions { justify-content: center; }

/* ═══════════════════════════════════════════════════════════════
   CU DESIGNER (cudesigner.js)
   ═══════════════════════════════════════════════════════════════ */
.cud-circuits { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; margin-bottom: 12px; }
.cud-circ {
  display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border-radius: 11px;
  background: var(--glass, rgba(255,255,255,.04)); border: 1px solid var(--line, rgba(255,255,255,.08));
}
.cud-circ b { font: 700 12px var(--font-m, monospace); letter-spacing: .04em; color: var(--ink, #f5f3ff); }
.cud-circ em { font-style: normal; font-size: 11px; color: var(--faint, #6f6894); }

.cud-board-panel { padding-bottom: 14px; }
.cud-rail {
  display: grid; grid-template-columns: repeat(9, 1fr); gap: 6px;
  padding: 14px 10px 10px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid var(--line-brt, rgba(255,255,255,.14));
  position: relative;
}
.cud-rail::after {   /* the DIN rail itself */
  content: ""; position: absolute; left: 8px; right: 8px; top: 50%;
  height: 10px; transform: translateY(-50%); border-radius: 3px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.10) 0 5px, rgba(255,255,255,.04) 5px 10px);
  pointer-events: none;
}
.cud-slot {
  position: relative; z-index: 1; min-height: 86px; border-radius: 10px;
  border: 1.5px dashed var(--line, rgba(255,255,255,.14));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  transition: border-color .15s, background .15s, transform .2s var(--spring, cubic-bezier(.34,1.56,.64,1));
  cursor: pointer;
}
.cud-slot.filled { border-style: solid; border-color: transparent; }
.cud-slot.s-main { background: color-mix(in srgb, var(--yellow, #ffc93d) 5%, transparent); }
.cud-slot.s-rcd  { background: color-mix(in srgb, var(--brand, #6f00ff) 7%, transparent); }
.cud-slot.target { border-color: var(--green, #00ff02); background: color-mix(in srgb, var(--green, #00ff02) 9%, transparent); transform: scale(1.06); }
.cud-slot-lbl { font: 700 8px var(--font-m, monospace); letter-spacing: .1em; color: var(--faint, #6f6894); }
.cud-empty { font-size: 18px; color: var(--faint, #6f6894); opacity: .55; }

.cud-dev {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  width: 100%; max-width: 74px; padding: 8px 4px 10px; border-radius: 8px; cursor: grab;
  background: linear-gradient(180deg, #221c3a, #17122b);
  border: 1px solid var(--line-brt, rgba(255,255,255,.16));
  color: var(--ink, #f5f3ff); position: relative; touch-action: none;
  transition: transform .2s var(--spring, cubic-bezier(.34,1.56,.64,1)), box-shadow .2s;
}
.cud-dev b { font: 700 13px var(--font-m, monospace); }
.cud-dev em { font-style: normal; font-size: 8.5px; color: var(--dim, #9d95c2); letter-spacing: .04em; }
.cud-dev i {   /* the switch dolly */
  width: 12px; height: 16px; margin-top: 4px; border-radius: 3px;
  background: var(--dim, #9d95c2); box-shadow: inset 0 -6px 0 rgba(0,0,0,.35);
}
.cud-dev.main i { background: var(--yellow, #ffc93d); }
.cud-dev.rcd  i { background: var(--pink, #a35bff); }
.cud-dev.mcb  i { background: var(--green, #00ff02); }
.cud-dev.bin:hover { transform: translateY(-3px); box-shadow: 0 8px 18px -8px rgba(0,0,0,.6); }
.cud-dev.armed {
  border-color: var(--green, #00ff02); transform: translateY(-3px) scale(1.05);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--green, #00ff02) 45%, transparent), 0 10px 22px -8px rgba(0,0,0,.6);
}
.cud-dev.drop-in { animation: cud-drop .38s var(--spring, cubic-bezier(.34,1.56,.64,1)); }
@keyframes cud-drop { 0% { transform: scale(1.25) translateY(-8px); } 100% { transform: scale(1) translateY(0); } }
.cud-dev.ghost {
  position: fixed; left: 0; top: 0; z-index: 999; width: 68px; pointer-events: none;
  opacity: .92; box-shadow: 0 18px 34px -10px rgba(0,0,0,.7); transform: translate(-200px,-200px);
}

.cud-banks {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  margin-top: 10px; font: 600 11px var(--font-m, monospace); color: var(--dim, #9d95c2); letter-spacing: .06em;
}
.cud-banks b { color: var(--ink, #f5f3ff); }
.cud-bal { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line, rgba(255,255,255,.12)); color: var(--faint, #6f6894); }
.cud-bal.ok { color: var(--green, #00ff02); border-color: color-mix(in srgb, var(--green, #00ff02) 45%, transparent); }

.cud-bin-panel { display: grid; gap: 10px; }
.cud-bin { display: flex; flex-wrap: wrap; gap: 8px; }
.cud-bin .cud-dev { width: 66px; }

@media (max-width: 760px) {
  .cud-rail { grid-template-columns: repeat(3, 1fr); }
  .cud-rail::after { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   LOAD BALANCER (loadbalancer.js)
   ═══════════════════════════════════════════════════════════════ */
.lb-meter-panel { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px; }
.lb-meter { width: 220px; max-width: 70%; }
.lb-needle { transform-origin: 100px 105px; transition: transform .6s var(--spring, cubic-bezier(.34,1.56,.64,1)); }
.lb-read { font: 700 17px var(--font-m, monospace); fill: var(--ink, #f5f3ff); }
.lb-verdict { font: 600 12px var(--font-m, monospace); letter-spacing: .06em; color: var(--faint, #6f6894); }
.lb-verdict.ok { color: var(--green, #00ff02); }
.lb-verdict.bad { color: #ff5a6a; }

.lb-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.lb-col { padding: 12px; cursor: pointer; transition: border-color .15s; }
.lb-col:hover { border-color: color-mix(in srgb, var(--brand, #6f00ff) 45%, transparent); }
.lb-col-head { display: flex; align-items: center; gap: 8px; font: 700 13px var(--font-m, monospace); color: var(--ink, #f5f3ff); }
.lb-col-head i { width: 12px; height: 12px; border-radius: 4px; background: var(--ph); }
.lb-col-head b { margin-left: auto; color: var(--dim, #9d95c2); }
.lb-col-bar { height: 5px; border-radius: 3px; background: rgba(128,128,128,.15); margin: 8px 0 10px; overflow: hidden; }
.lb-col-bar i { display: block; height: 100%; border-radius: 3px; transition: width .5s var(--spring, cubic-bezier(.34,1.56,.64,1)); }
.lb-col-body { display: flex; flex-direction: column; gap: 6px; min-height: 40px; }

.lb-tray-panel { display: grid; gap: 10px; }
.lb-tray { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lb-empty { font: 500 12px var(--font-m, monospace); color: var(--faint, #6f6894); }
.lb-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 8px 12px; border-radius: 10px; cursor: pointer; text-align: left;
  background: var(--glass, rgba(255,255,255,.05)); border: 1px solid var(--line-brt, rgba(255,255,255,.14));
  color: var(--ink, #f5f3ff);
  transition: transform .2s var(--spring, cubic-bezier(.34,1.56,.64,1)), border-color .15s, box-shadow .2s;
}
.lb-card b { font: 700 11.5px var(--font-m, monospace); letter-spacing: .03em; }
.lb-card em { font-style: normal; font-size: 11px; color: var(--dim, #9d95c2); }
.lb-card:hover { transform: translateY(-2px); }
.lb-card.armed {
  border-color: var(--green, #00ff02); transform: translateY(-2px) scale(1.04);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--green, #00ff02) 40%, transparent);
}
.lb-card.placed { width: 100%; animation: cud-drop .32s var(--spring, cubic-bezier(.34,1.56,.64,1)); }

@media (max-width: 640px) { .lb-cols { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════
   VOLT DROP HIGHWAY (volthighway.js)
   ═══════════════════════════════════════════════════════════════ */
.vh-plan-panel { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.vh-plan { width: 100%; max-width: 440px; }
.vh-cell { fill: rgba(255,255,255,.03); stroke: var(--line, rgba(255,255,255,.08)); stroke-width: 1; cursor: pointer; transition: fill .15s; }
.vh-cell:hover { fill: rgba(255,255,255,.07); }
.vh-cell.reach { fill: color-mix(in srgb, var(--brand, #6f00ff) 14%, transparent); stroke: color-mix(in srgb, var(--brand, #6f00ff) 50%, transparent); animation: vh-pulse 1.4s ease-in-out infinite; }
@keyframes vh-pulse { 0%,100% { opacity: .6; } 50% { opacity: 1; } }
.vh-board rect { fill: var(--yellow, #ffc93d); opacity: .85; }
.vh-board text { font: 700 10px var(--font-m, monospace); fill: #111; }
.vh-lamp circle { transition: opacity .4s, fill .3s; }
.vh-lamp.over { animation: vh-flick .5s steps(2) infinite; }
@keyframes vh-flick { 0%,100% { opacity: 1; } 50% { opacity: .5; } }

.vh-gauge { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; width: 100%; max-width: 440px; }
.vh-volt { display: flex; flex-direction: column; gap: 1px; }
.vh-volt span { font: 700 9px var(--font-m, monospace); letter-spacing: .1em; color: var(--faint, #6f6894); }
.vh-volt b { font: 700 15px var(--font-m, monospace); color: var(--ink, #f5f3ff); }
.vh-volt b.bad { color: #ff5a6a; }
.vh-bar { height: 8px; border-radius: 4px; background: rgba(128,128,128,.18); overflow: hidden; }
.vh-bar i { display: block; height: 100%; border-radius: 4px; transition: width .5s var(--spring, cubic-bezier(.34,1.56,.64,1)), background .3s; }

/* ═══════════════════════════════════════════════════════════════
   ZONE PAINTER (zonepainter.js)
   ═══════════════════════════════════════════════════════════════ */
.zp-room-panel { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.zp-room { width: 100%; max-width: 460px; }
.zp-zone { cursor: pointer; }
.zp-zone rect { transition: fill-opacity .15s, stroke-opacity .15s; }
.zp-zone.live rect { fill-opacity: 0.18; }
.zp-zone.live:hover rect { fill-opacity: 0.30; }
.zp-zone.wrong rect { animation: zp-buzz .45s; }
@keyframes zp-buzz { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
.zp-zlbl { font: 700 10px var(--font-m, monospace); letter-spacing: .06em; }
.zp-zsub { font: 500 8px var(--font-m, monospace); fill: var(--faint, #6f6894); }
.zp-pin { animation: cud-drop .34s var(--spring, cubic-bezier(.34,1.56,.64,1)); }
.zp-pinlbl { font: 700 8.5px var(--font-m, monospace); fill: var(--ink, #f5f3ff); }
.zp-bath { font: 700 9px var(--font-m, monospace); fill: var(--faint, #6f6894); letter-spacing: .1em; }
.zp-msg { font: 500 12px var(--font-d, sans-serif); color: var(--dim, #9d95c2); line-height: 1.5; text-align: center; max-width: 460px; min-height: 34px; }

.zp-tray { display: flex; flex-wrap: wrap; gap: 8px; }
.zp-acc {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 8px 12px; border-radius: 10px; cursor: pointer; text-align: left;
  background: var(--glass, rgba(255,255,255,.05)); border: 1px solid var(--line-brt, rgba(255,255,255,.14));
  color: var(--ink, #f5f3ff); transition: transform .2s var(--spring, cubic-bezier(.34,1.56,.64,1)), box-shadow .2s, border-color .15s;
}
.zp-acc b { font: 700 12px var(--font-m, monospace); }
.zp-acc em { font-style: normal; font-size: 10.5px; color: var(--dim, #9d95c2); }
.zp-acc:hover { transform: translateY(-2px); }
.zp-acc.armed { border-color: var(--green, #00ff02); transform: translateY(-2px) scale(1.04); box-shadow: 0 0 0 2px color-mix(in srgb, var(--green, #00ff02) 40%, transparent); }

/* ═══════════════════════════════════════════════════════════════
   TWO-WAY WIRE-UP (twoway.js)
   ═══════════════════════════════════════════════════════════════ */
.tw-board-panel { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.tw-board { width: 100%; max-width: 480px; }
.tw-sw { fill: rgba(255,255,255,.04); stroke: var(--line-brt, rgba(255,255,255,.16)); stroke-width: 1.5; cursor: pointer; transition: fill .15s; }
.tw-sw:hover { fill: rgba(255,255,255,.09); }
.tw-swlbl { font: 700 9px var(--font-m, monospace); fill: var(--faint, #6f6894); letter-spacing: .08em; }
.tw-term { fill: #1a1530; stroke: var(--ink, #f5f3ff); stroke-width: 1.6; cursor: pointer; transition: fill .12s, r .12s; }
.tw-term:hover { fill: var(--brand, #6f00ff); }
.tw-term.armed { fill: var(--green, #00ff02); r: 10; }
.tw-tlbl { font: 700 8.5px var(--font-m, monospace); fill: var(--dim, #9d95c2); }
.tw-wire { stroke: var(--pink, #a35bff); stroke-width: 3.5; stroke-linecap: round; }
.tw-inner { stroke: var(--yellow, #ffc93d); stroke-width: 2.5; stroke-dasharray: 3 3; opacity: .8; }
.tw-bulb { fill: rgba(128,128,128,.2); stroke: rgba(255,255,255,.3); stroke-width: 1.5; transition: fill .2s; }
.tw-bulb.on { fill: var(--yellow, #ffc93d); filter: drop-shadow(0 0 10px var(--yellow, #ffc93d)); }
.tw-bulblbl { font-size: 15px; }
.tw-bang { animation: tw-flash .4s; }
@keyframes tw-flash { 0% { box-shadow: inset 0 0 0 3px #ff5a6a; } 40% { box-shadow: inset 0 0 60px 4px rgba(255,90,106,.6); } 100% { box-shadow: none; } }
.tw-rockers { display: flex; gap: 12px; }
.tw-rock {
  display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 11px; cursor: pointer;
  font: 700 13px var(--font-m, monospace); color: var(--ink, #f5f3ff);
  background: var(--glass, rgba(255,255,255,.05)); border: 1px solid var(--line-brt, rgba(255,255,255,.14));
}
.tw-rock i { width: 16px; height: 22px; border-radius: 4px; background: var(--dim, #9d95c2); position: relative; transition: background .15s; }
.tw-rock i::after { content: ""; position: absolute; left: 2px; right: 2px; height: 9px; border-radius: 2px; background: #0d0a1c; bottom: 2px; transition: bottom .2s var(--spring, cubic-bezier(.34,1.56,.64,1)); }
.tw-rock.up i { background: var(--green, #00ff02); }
.tw-rock.up i::after { bottom: 11px; }

/* ═══════════════════════════════════════════════════════════════
   OHM'S PLAYGROUND (ohms.js)
   ═══════════════════════════════════════════════════════════════ */
.ohm-rig { display: grid; grid-template-columns: 180px 1fr; gap: 16px; align-items: center; }
.ohm-meter { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ohm-meter .lb-meter { width: 160px; }
.ohm-src { font: 700 13px var(--font-m, monospace); color: var(--yellow, #ffc93d); }
.ohm-branches { display: grid; gap: 10px; }
.ohm-branch {
  display: grid; grid-template-columns: 6px 1fr 6px auto; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 12px; cursor: pointer; position: relative;
  background: var(--glass, rgba(255,255,255,.04)); border: 1px solid var(--line, rgba(255,255,255,.08));
  transition: border-color .15s;
}
.ohm-branch:hover { border-color: color-mix(in srgb, var(--brand, #6f00ff) 45%, transparent); }
.ohm-branch.open { opacity: .6; }
.ohm-rail { width: 6px; height: 30px; border-radius: 3px; background: var(--dim, #9d95c2); }
.ohm-comps { display: flex; flex-wrap: wrap; gap: 6px; min-height: 30px; align-items: center; }
.ohm-empty { font: 500 11px var(--font-m, monospace); color: var(--faint, #6f6894); }
.ohm-comp {
  font: 700 12px var(--font-m, monospace); color: var(--ink, #f5f3ff); cursor: pointer;
  background: #221c3a; border: 1px solid var(--line-brt, rgba(255,255,255,.16)); border-radius: 7px; padding: 6px 10px;
}
.ohm-comp.lamp { border-color: var(--yellow, #ffc93d); box-shadow: 0 0 calc(14px * var(--glow, 0)) color-mix(in srgb, var(--yellow, #ffc93d) 80%, transparent); color: var(--yellow, #ffc93d); }
.ohm-flow { position: absolute; left: 22px; right: 44px; top: 50%; height: 3px; pointer-events: none; overflow: hidden; }
.ohm-flow i { position: absolute; top: -2px; width: 6px; height: 6px; border-radius: 50%; background: var(--brand, #a35bff); animation: ohm-flow var(--dur, 1s) linear infinite; }
.ohm-flow i:nth-child(2) { animation-delay: calc(var(--dur, 1s) * -0.33); }
.ohm-flow i:nth-child(3) { animation-delay: calc(var(--dur, 1s) * -0.66); }
@keyframes ohm-flow { from { left: -6px; } to { left: 100%; } }
.ohm-bi { font: 700 12px var(--font-m, monospace); color: var(--dim, #9d95c2); min-width: 46px; text-align: right; }
.ohm-chip {
  font: 700 13px var(--font-m, monospace); color: var(--ink, #f5f3ff); cursor: pointer;
  background: var(--glass, rgba(255,255,255,.05)); border: 1px solid var(--line-brt, rgba(255,255,255,.14));
  border-radius: 9px; padding: 8px 13px; transition: transform .2s var(--spring, cubic-bezier(.34,1.56,.64,1)), box-shadow .2s, border-color .15s;
}
.ohm-chip.lamp { border-color: color-mix(in srgb, var(--yellow, #ffc93d) 55%, transparent); color: var(--yellow, #ffc93d); }
.ohm-chip:hover { transform: translateY(-2px); }
.ohm-chip.armed { border-color: var(--green, #00ff02); transform: translateY(-2px) scale(1.05); box-shadow: 0 0 0 2px color-mix(in srgb, var(--green, #00ff02) 40%, transparent); }
@media (max-width: 640px) { .ohm-rig { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════
   PROVE-DEAD GAUNTLET (provedead.js)
   ═══════════════════════════════════════════════════════════════ */
.pd-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pd-seq, .pd-tray { display: grid; gap: 8px; align-content: start; }
.pd-slot {
  display: grid; grid-template-columns: 26px 1fr; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 10px; min-height: 38px;
  background: var(--glass, rgba(255,255,255,.03)); border: 1px solid var(--line, rgba(255,255,255,.07));
  transition: border-color .2s, background .2s;
}
.pd-slot.done { border-color: color-mix(in srgb, var(--green, #00ff02) 45%, transparent); background: color-mix(in srgb, var(--green, #00ff02) 8%, transparent); }
.pd-slot.nextup { border-color: color-mix(in srgb, var(--brand, #6f00ff) 55%, transparent); animation: vh-pulse 1.4s ease-in-out infinite; }
.pd-num { font: 700 12px var(--font-m, monospace); color: var(--faint, #6f6894); text-align: center; }
.pd-slot.done .pd-num { color: var(--green, #00ff02); }
.pd-txt { font: 600 12px var(--font-d, sans-serif); color: var(--ink, #f5f3ff); }
.pd-tiles { display: grid; gap: 8px; }
.pd-tile {
  text-align: left; padding: 11px 13px; border-radius: 10px; cursor: pointer;
  font: 600 12.5px var(--font-d, sans-serif); color: var(--ink, #f5f3ff);
  background: var(--glass, rgba(255,255,255,.05)); border: 1px solid var(--line-brt, rgba(255,255,255,.14));
  transition: transform .18s var(--spring, cubic-bezier(.34,1.56,.64,1)), border-color .15s, opacity .2s;
}
.pd-tile:hover:not(:disabled) { transform: translateX(3px); border-color: color-mix(in srgb, var(--brand, #6f00ff) 50%, transparent); }
.pd-tile.used { opacity: .28; text-decoration: line-through; cursor: default; }
.pd-tray.shake { animation: zp-buzz .45s; }
@media (max-width: 640px) { .pd-cols { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════
   METER MASTER (metermaster.js) — reuses db-pill / lb-meter / tw-bang
   ═══════════════════════════════════════════════════════════════ */
.mm-meter-panel { display: flex; justify-content: center; padding: 14px; }
.mm-meter-panel .lb-meter { width: 220px; max-width: 70%; }
.mm-pick { display: grid; gap: 14px; }

/* CU Designer exam-mode clock */
.cud-clock { font: 700 13px var(--font-m, monospace); color: var(--yellow, #ffc93d); margin-left: 8px; }
.cud-clock b { color: var(--yellow, #ffc93d); }

/* ═══════════════════════════════════════════════════════════════
   STRIP & TERMINATE (stripterm.js)
   ═══════════════════════════════════════════════════════════════ */
.st-stage-panel { display: flex; flex-direction: column; align-items: center; }
.st-cable { width: 100%; max-width: 420px; }
.st-pills { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-top: 6px; }
.st-pill { font: 700 10.5px var(--font-m, monospace); padding: 4px 10px; border-radius: 999px; color: var(--faint, #6f6894); border: 1px solid var(--line, rgba(255,255,255,.12)); }
.st-pill.ok { color: var(--green, #00ff02); border-color: color-mix(in srgb, var(--green, #00ff02) 45%, transparent); }
.st-pill.bad { color: #ff5a6a; border-color: color-mix(in srgb, #ff5a6a 50%, transparent); }
.st-controls { display: grid; gap: 12px; }
.st-slider { display: grid; grid-template-columns: 130px 1fr 52px; align-items: center; gap: 10px; }
.st-slider output { font: 700 12px var(--font-m, monospace); color: var(--ink, #f5f3ff); text-align: right; }
.st-slider input[type=range] { width: 100%; accent-color: var(--brand, #6f00ff); }
.st-sleeve-row { display: grid; grid-template-columns: 130px 1fr; align-items: center; gap: 10px; }
.st-sleeve-row .db-pill.on { background: linear-gradient(135deg, #3f9e46, #ffd21f); color: #111; border-color: transparent; }

/* ═══════════════════════════════════════════════════════════════
   COMPOSITE INSTALL MISSION (composite.js)
   ═══════════════════════════════════════════════════════════════ */
.co-rail { display: flex; align-items: center; gap: 6px; margin: 6px 0 10px; }
.co-rail i { flex: 1; height: 2px; background: var(--line, rgba(255,255,255,.12)); }
.co-dot { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 700 11px var(--font-m, monospace);
  color: var(--faint, #6f6894); background: var(--glass, rgba(255,255,255,.05)); border: 1px solid var(--line, rgba(255,255,255,.12)); }
.co-dot.done { color: var(--green, #00ff02); border-color: color-mix(in srgb, var(--green, #00ff02) 50%, transparent); }
.co-dot.now { color: #fff; background: linear-gradient(135deg, var(--brand, #6f00ff), var(--pink, #a35bff)); border-color: transparent; }
.co-stage { display: grid; gap: 14px; }
.co-matchrow { display: grid; gap: 6px; }
.co-mlbl { font: 700 12px var(--font-m, monospace); color: var(--ink, #f5f3ff); letter-spacing: .03em; }
.co-q { font: 600 15px var(--font-d, sans-serif); color: var(--ink, #f5f3ff); }
.co-choices { display: grid; gap: 8px; }
.co-choice { text-align: left; padding: 12px 14px; border-radius: 11px; cursor: pointer;
  font: 500 13px var(--font-d, sans-serif); color: var(--ink, #f5f3ff);
  background: var(--glass, rgba(255,255,255,.05)); border: 1px solid var(--line-brt, rgba(255,255,255,.14));
  transition: transform .18s var(--spring, cubic-bezier(.34,1.56,.64,1)), border-color .15s; }
.co-choice:hover { transform: translateX(3px); border-color: color-mix(in srgb, var(--brand, #6f00ff) 50%, transparent); }
.co-choice.on { border-color: var(--green, #00ff02); background: color-mix(in srgb, var(--green, #00ff02) 10%, transparent); }

/* ═══════════════════════════════════════════════════════════════
   CONSISTENT SPACING (site-wide rhythm) + misc quick-win styles
   ═══════════════════════════════════════════════════════════════ */
:root { --sp: 22px; }
.view.is-active { display: flex; flex-direction: column; gap: var(--sp); }
.view-head { margin-bottom: 0; }
.db-wrap, .quiz-wrap { gap: var(--sp); }
.cx-menu { gap: var(--sp); }
.am2-grid { gap: var(--sp) !important; }
.road { gap: var(--sp); }
.db-wrap > .panel + .panel, .quiz-wrap > .panel + .panel { margin-top: 0; }

/* Ohm's live formula */
.ohm-formula { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline; margin: 4px 0 10px; }
.ohm-f-sym { font: 700 17px var(--font-m, monospace); color: var(--brand, #a35bff); }
.ohm-f-val { font: 700 15px var(--font-m, monospace); color: var(--green, #00ff02); }
.ohm-formula sup, .ohm-formula sub { font-size: 65%; }

/* Meter Master target diagram */
.mm-dia-wrap { display: flex; flex-direction: column; align-items: center; margin: 8px 0 4px; }
.mm-dia { width: 100%; max-width: 300px; }
.mm-dia-cap { font: 500 11px var(--font-m, monospace); color: var(--dim, #9d95c2); margin-top: 2px; text-align: center; }
.mm-d-lbl { font: 700 8px var(--font-m, monospace); fill: var(--faint, #6f6894); }
.mm-d-q { font: 700 11px var(--font-m, monospace); fill: var(--yellow, #ffc93d); }

/* CU Designer — placeable circuit labels */
.cud-labels { display: grid; gap: 10px; }
.cud-lbl-strip { display: flex; flex-wrap: wrap; gap: 8px; }
.cud-lbl-chip {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left;
  padding: 7px 11px; border-radius: 9px; cursor: pointer; color: var(--ink, #f5f3ff);
  background: var(--glass, rgba(255,255,255,.05)); border: 1px solid var(--line-brt, rgba(255,255,255,.14));
  transition: transform .18s var(--spring, cubic-bezier(.34,1.56,.64,1)), box-shadow .2s, border-color .15s, opacity .2s;
}
.cud-lbl-chip b { font: 700 10.5px var(--font-m, monospace); letter-spacing: .03em; }
.cud-lbl-chip em { font-style: normal; font-size: 9.5px; color: var(--faint, #6f6894); }
.cud-lbl-chip:hover:not(:disabled) { transform: translateY(-2px); }
.cud-lbl-chip.armed { border-color: var(--yellow, #ffc93d); transform: translateY(-2px) scale(1.04); box-shadow: 0 0 0 2px color-mix(in srgb, var(--yellow, #ffc93d) 45%, transparent); }
.cud-lbl-chip.used { opacity: .3; cursor: default; }
.cud-tag { font: 700 7px var(--font-m, monospace); color: var(--yellow, #ffc93d); letter-spacing: .02em; margin-top: 3px; text-align: center; line-height: 1.1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* Volt Drop Highway — obstacles */
.vh-cell.blocked { fill: rgba(255,90,106,.14); stroke: rgba(255,90,106,.4); cursor: not-allowed; }
.vh-block-x { fill: #ff5a6a; font: 700 15px var(--font-d, sans-serif); pointer-events: none; }

/* Two-Way — legend, controls, diagram button, diagram wires */
.tw-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; }
.tw-legend span { display: inline-flex; align-items: center; gap: 6px; font: 600 10px var(--font-m, monospace); color: var(--dim, #9d95c2); }
.tw-legend i { width: 14px; height: 4px; border-radius: 2px; }
.tw-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; }
.tw-diabtn { font: 700 11px var(--font-m, monospace); letter-spacing: .06em; padding: 8px 14px; border-radius: 999px; cursor: pointer;
  color: var(--ink, #f5f3ff); background: var(--glass, rgba(255,255,255,.05)); border: 1px solid var(--line-brt, rgba(255,255,255,.16)); }
.tw-diabtn.on { background: linear-gradient(135deg, var(--brand, #6f00ff), var(--pink, #a35bff)); border-color: transparent; color: #fff; }
.tw-wire.dia { stroke-dasharray: 6 5; opacity: .9; }

/* Clickable score-sheet review (Composite + Timed Board Build) */
.db-check.rev { cursor: pointer; }
.db-check.rev:hover { filter: brightness(1.15); }
.co-review { padding: 9px 14px; margin: 2px 0 8px; border-left: 2px solid var(--brand, #6f00ff);
  background: var(--glass, rgba(255,255,255,.03)); border-radius: 0 8px 8px 0;
  font: 500 12px/1.55 var(--font-d, sans-serif); color: var(--dim, #9d95c2); }
.co-review b.ok { color: var(--green, #00ff02); }
.co-review b.no { color: #ff5a6a; }
.co-review .co-why { margin-top: 4px; color: var(--faint, #6f6894); }
.co-rev-ol { margin: 4px 0 0 18px; }
.co-hint { font-size: 11px !important; color: var(--faint, #6f6894); font-style: italic; }

/* Fault Lab — wiring-complexity toggle (left), mirrors .fl-diff but green */
.fl-cx {
  display: flex; align-items: center; gap: 3px; padding: 4px;
  border: 1px solid var(--line-brt); border-radius: 999px; background: rgba(0,0,0,.25);
}
.fl-cx-lbl { font: 700 .5rem/1 var(--font-d); letter-spacing: .14em; color: var(--faint); padding: 0 3px 0 7px; }
.fl-cx button {
  font: 700 .55rem/1 var(--font-d); letter-spacing: .12em; color: var(--dim);
  background: none; border: 0; border-radius: 999px; padding: 7px 12px; cursor: pointer;
  transition: all .25s var(--spring);
}
.fl-cx button:hover { color: var(--ink); }
.fl-cx button.on { color: #06210a; background: linear-gradient(120deg, var(--green), #7be000); box-shadow: 0 2px 14px rgba(0,255,2,.35); }

/* Shared Trainee/Guided/Realistic toggle (difficulty.js) reused outside the
   Fault Lab header row — drop the flex margin-left:auto, add breathing room */
.diff-toggle { margin: 14px 0 6px; margin-left: 0; display: inline-flex; flex-wrap: wrap; row-gap: 6px; }

/* Zone Painter trainee hint — glow the correct zone while armed */
.zp-zone.hint rect { fill-opacity: 0.32 !important; stroke-width: 3 !important; animation: vh-pulse 1s ease-in-out infinite; }

/* Zone Painter — room wall/door labels */
.zp-walllbl { font: 600 8px var(--font-m, monospace); fill: var(--faint, #6f6894); letter-spacing: .08em; }

/* ═══════════════════════════════════════════════════════════════
   EICR CODING (eicr.js)
   ═══════════════════════════════════════════════════════════════ */
.eicr-ref { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 10px 0 4px; }
.eicr-ref span { font: 600 10.5px var(--font-m, monospace); color: var(--dim, #9d95c2); }
.eicr-ref b { color: var(--yellow, #ffc93d); margin-right: 4px; }
.eicr-card { display: grid; gap: 14px; }
.eicr-defect { font: 500 15px/1.55 var(--font-d, sans-serif); color: var(--ink, #f5f3ff); }
.eicr-codes { display: flex; flex-wrap: wrap; gap: 8px; }
.eicr-codes .db-pill { min-width: 56px; text-align: center; font: 700 14px var(--font-m, monospace); }
.eicr-codes .db-pill.correct { border-color: var(--green, #00ff02); background: color-mix(in srgb, var(--green, #00ff02) 16%, transparent); color: var(--green, #00ff02); }
.eicr-codes .db-pill.wrong { border-color: #ff5a6a; background: color-mix(in srgb, #ff5a6a 16%, transparent); color: #ff5a6a; }
.eicr-why { font: 500 13px/1.55 var(--font-d, sans-serif); color: var(--dim, #9d95c2); padding: 10px 14px; border-left: 2px solid var(--brand, #6f00ff); background: var(--glass, rgba(255,255,255,.03)); border-radius: 0 8px 8px 0; }
.eicr-why b { color: var(--ink, #f5f3ff); }

/* ── lighting wire-up: rose outline, terminal blocks, bonded links ── */
.tw-group { fill: none; stroke: rgba(255, 255, 255, .14); stroke-width: 1.5; }
.tw-group.rose { stroke: rgba(163, 91, 255, .45); stroke-dasharray: 5 4; }
.tw-group.block { fill: rgba(255, 255, 255, .04); stroke: rgba(255, 255, 255, .22); }
.tw-grouplbl {
  font: 700 7px var(--font-m, monospace); letter-spacing: .12em;
  fill: var(--faint, #6f6894); text-transform: uppercase;
}
.tw-grouplbl.rose { font-size: 8.5px; fill: var(--pink, #a35bff); }
/* the brass strip inside a connector block — terminals here are common */
.tw-bond { stroke: #c9a227; stroke-width: 5; stroke-linecap: round; opacity: .55; }