/* Fonts embedded offline — no Google Fonts dependency */
@font-face {
  font-family: 'Share Tech Mono';
  font-style: normal;
  font-weight: 400;
  src: local('Courier New'), local('Lucida Console'), local('Consolas');
}
@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 400 700;
  src: local('Trebuchet MS'), local('Arial Narrow'), local('Arial');
}

:root {
  --bg:#0d1117; --panel:#161b27; --panel2:#1c2333;
  --border:#30364a; --accent:#58a6ff; --green:#3fb950;
  --red:#f85149; --yellow:#e3b341; --cyan:#39d0d8; --muted:#8b949e; --text:#c9d1d9;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{background:var(--bg);font-family:'Share Tech Mono',monospace;color:var(--text);min-height:100vh;overflow-x:hidden;}

/* HEADER */
header{background:var(--panel);border-bottom:1px solid var(--border);padding:10px 20px;
  display:flex;align-items:stretch;justify-content:space-between;position:sticky;top:0;z-index:50;}
.htitle{font-family:'Rajdhani',sans-serif;font-size:1.1rem;font-weight:700;color:var(--accent);letter-spacing:2px;}
.hsub{font-size:0.62rem;color:var(--muted);margin-top:2px;}
.controls{display:flex;gap:10px;align-items:center;}
button{background:transparent;border:1px solid var(--border);color:var(--text);padding:5px 12px;
  cursor:pointer;font-family:'Share Tech Mono',monospace;font-size:0.75rem;border-radius:4px;transition:all .15s;white-space:nowrap;}
button:hover{border-color:var(--accent);color:var(--accent);}
#checkBtn{border-color:var(--green);color:var(--green);}
#checkBtn:hover{background:var(--green);color:#000;}
.check-mode-wrap{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap;}
.mode-group{display:flex;flex-direction:column;gap:4px;}
.mode-label{font-size:.58rem;color:var(--muted);padding-left:2px;letter-spacing:.4px;text-transform:uppercase;}
.mode-select{
  background:rgba(13,17,23,.98);
  border:1px solid var(--border);
  color:var(--text);
  border-radius:8px;
  padding:8px 10px;
  font-family:'Share Tech Mono',monospace;
  font-size:.72rem;
  min-width:132px;
  outline:none;
}
.mode-select:hover{border-color:var(--accent);}
.mode-select:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(88,166,255,.18);}
#acCircuitSettings{display:none;align-items:flex-end;gap:6px;}
#acCircuitSettings.show{display:flex;}
#multivibratorSettings{display:none;align-items:flex-end;gap:6px;}
#multivibratorSettings.show{display:flex;}
#acCircuitGrid{display:flex;align-items:flex-end;gap:6px;}
#acCircuitSettings input,#acCircuitSettings select{background:rgba(13,17,23,.98);border:1px solid var(--border);color:var(--text);border-radius:6px;padding:6px 8px;font-family:'Share Tech Mono',monospace;font-size:.66rem;min-width:0;outline:none;}
#acCircuitSettings input:focus,#acCircuitSettings select:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(88,166,255,.16);}
#acCircuitSettings label{display:flex;flex-direction:column;gap:4px;font-size:.56rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;}
#acCircuitHiddenInputs{display:none!important;}

#resetBtn{border-color:var(--red);color:var(--red);}
#resetBtn:hover{background:var(--red);color:#fff;}
#saveCircuitBtn{border-color:var(--accent);color:var(--accent);}
#saveCircuitBtn:hover{background:rgba(88,166,255,.14);}

/* LAYOUT */
#lab{display:flex;align-items:flex-start;justify-content:flex-start;gap:20px;padding:20px 20px 20px 86px;flex-wrap:wrap;box-sizing:border-box;}

/* EQUIPMENT */
.equipment{background:var(--panel);border:1px solid var(--border);border-radius:8px;overflow:hidden;min-width:160px;}
.eq-header{background:var(--panel2);padding:7px 10px;border-bottom:1px solid var(--border);}
.eq-brand{font-size:0.58rem;color:var(--muted);letter-spacing:1px;}
.eq-title{font-size:0.85rem;font-weight:700;color:var(--accent);font-family:'Rajdhani',sans-serif;}
.terminals{padding:8px;display:flex;flex-direction:column;gap:6px;}
.terminal{display:flex;align-items:center;gap:8px;padding:4px 6px;border-radius:4px;
  cursor:pointer;transition:background .15s;position:relative;}
.terminal:hover{background:rgba(255,255,255,0.05);}
.terminal.selected-node{background:rgba(88,166,255,0.12);}
.node-dot{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;
  background:radial-gradient(circle at 35% 35%, #1f2633 0 18%, #05070c 19% 46%, rgba(255,255,255,.18) 47% 52%, #0d1117 53% 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), inset 0 2px 4px rgba(0,0,0,.65);
  transition:all .15s;flex-shrink:0;position:relative;z-index:5;}
.terminal.connected-node .node-dot{background:currentColor !important;box-shadow:0 0 6px currentColor;}
.terminal.selected-node .node-dot{background:currentColor !important;animation:blink .8s infinite;}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.4}}
.node-label{font-size:0.7rem;color:var(--muted);}

/* FG screen */
.fg-screen{background:#001020;border:1px solid #1e3040;border-radius:4px;margin:8px;
  padding:8px;font-size:0.6rem;line-height:1.65;}
.fg-val{color:#7ef;}
.fg-key{
  color:#578;
  display:inline-block;
  width:84px;
  text-align:left;
  vertical-align:middle;
}
.fg-edit{
  display:inline-block;
  min-width:100px;
  width:100px;
  padding:1px 4px;
  border:1px solid rgba(126,239,255,.18);
  border-radius:3px;
  background:rgba(2,18,30,.72);
  color:#7ef;
  font:inherit;
  line-height:1.3;
  outline:none;
  box-shadow:none;
  vertical-align:middle;
}
.fg-edit:focus{
  border-color:rgba(126,239,255,.7);
  box-shadow:0 0 0 1px rgba(126,239,255,.18);
}
.fg-edit.small-note{
  min-width:auto;
}
.fg-mode-wrap{
  display:flex;
  gap:4px;
  justify-content:center;
  margin:0 8px 6px;
}
.fg-mode-btn{
  border:1px solid #2a5168;
  background:#122331;
  color:#8fd6ff;
  border-radius:4px;
  padding:4px 9px;
  font-size:.62rem;
  font-weight:700;
  cursor:pointer;
  min-width:56px;
}
.fg-mode-btn.active{
  background:#12384c;
  border-color:#7ef;
  color:#d9f7ff;
  box-shadow:0 0 0 1px rgba(126,239,255,.18) inset;
}
.fg-dc-only{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:4px;
  min-height:52px;
}
.fg-screen-view{
  display:block;
}
.fg-screen-view.hidden{display:none;}

.dmm-mode-wrap{
  display:flex;
  gap:6px;
  justify-content:center;
  margin:0 8px 8px;
}
.dmm-mode-btn{
  border:1px solid #2a5168;
  background:#122331;
  color:#8fd6ff;
  border-radius:4px;
  padding:3px 7px;
  font-size:.58rem;
  font-weight:700;
  cursor:pointer;
  min-width:48px;
}
.dmm-mode-btn.active{
  background:#12384c;
  border-color:#7ef;
  color:#d9f7ff;
  box-shadow:0 0 0 1px rgba(126,239,255,.18) inset;
}
.wave-pulse{display:inline-block;animation:wavePulse 1.1s ease-in-out infinite;}
@keyframes wavePulse{0%,100%{opacity:.55;}50%{opacity:1;}}


/* OSC screen */
.osc-screen{background:#001a00;margin:8px;border-radius:4px;border:1px solid #1e3040;
  position:relative;padding-top:55%;overflow:hidden;}
.osc-screen canvas{position:absolute;top:0;left:0;width:100%;height:100%;}
.osc-grid{position:absolute;top:0;left:0;right:0;bottom:0;
  background-image:linear-gradient(rgba(0,255,0,.07)1px,transparent 1px),linear-gradient(90deg,rgba(0,255,0,.07)1px,transparent 1px);
  background-size:20% 25%;}

/* BREADBOARD */
#bb-wrap{display:flex;flex-direction:column;align-items:center;gap:8px;align-self:flex-start;margin-top:64px;position:relative;}
#bb-label{font-family:'Rajdhani',sans-serif;font-size:.75rem;color:var(--muted);letter-spacing:2px;}

#rail-controls{
  position:absolute;
  left:50%;
  top:-58px;
  transform:translateX(-50%);
  width:266px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:9px;
  padding:2px 8px 1px;
  box-shadow:0 4px 14px rgba(0,0,0,.34);
  display:flex;
  flex-direction:column;
  gap:6px;
  user-select:none;
  cursor:default;
  touch-action:auto;
  z-index:30;
}
#rail-controls.dragging{
  cursor:grabbing;
  box-shadow:0 8px 24px rgba(0,0,0,.45);
}
#rail-controls .rail-title{
  font-size:.56rem;
  color:var(--accent);
  font-weight:700;
  letter-spacing:.04em;
  text-align:center;
  margin-bottom:-1px;
}
.rail-controls-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.rail-card{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1px;
}
.rail-knob{
  width:24px;
  height:24px;
  border-radius:50%;
  border:1px solid #394860;
  background:radial-gradient(circle at 34% 30%, #4b5668 0%, #242c37 42%, #171d27 70%, #0f141b 100%);
  box-shadow:inset 0 2px 4px rgba(255,255,255,.08), 0 2px 6px rgba(0,0,0,.35);
  position:relative;
  flex:0 0 auto;
}
.rail-knob::after{
  content:'';
  position:absolute;
  left:50%;
  top:4px;
  width:2px;
  height:8px;
  border-radius:3px;
  transform:translateX(-50%);
  background:#ffd54f;
  box-shadow:0 0 6px rgba(255,213,79,.35);
}
.rail-card.plus .rail-knob::after{
  background:#ff8a65;
  box-shadow:0 0 6px rgba(255,138,101,.38);
}
.rail-card.minus .rail-knob::after{
  background:#64b5f6;
  box-shadow:0 0 6px rgba(100,181,246,.38);
}
.rail-name{
  font-size:.50rem;
  color:var(--muted);
  line-height:1;
}
.rail-value{
  font-size:.63rem;
  color:var(--text);
  font-weight:700;
  line-height:1.1;
  text-align:left;
}
.rail-hint{
  font-size:.39rem;
  color:var(--muted);
  line-height:1;
}
.rail-range{
  width:100%;
  margin-top:0;
  accent-color:var(--accent);
}
.rail-inline{
  display:flex;
  align-items:center;
  gap:8px;
}
.rail-inline .rail-knob{flex:0 0 auto;}
.rail-inline .rail-range{flex:1 1 auto;}

#breadboard{
  background:linear-gradient(135deg,#2a5a2a,#1e4a1e);
  border:2px solid #163816;border-radius:10px;
  padding:12px 14px;position:relative;
  width: fit-content;
  min-width: 0;
  box-shadow:0 4px 24px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.05);
  user-select:none;
}

/* Power rails */
.rail-row{display:flex;align-items:center;gap:5px;height:18px;padding:0 2px;}
.rail-sym{font-size:.64rem;font-weight:700;width:26px;text-align:left;flex-shrink:0;letter-spacing:.02em;}
.rail-4v .rail-sym{color:#ffb74d;}
.rail-5v .rail-sym{color:#e74c3c;}
.rail-plus .rail-sym{color:#ff8a65;}
.rail-minus .rail-sym{color:#3498db;}
.rail-gnd .rail-sym{color:#b0bec5;}
.rail-strip{display:flex;align-items:center;gap:0px;position:relative;width:max-content;flex:0 0 auto;}
.rail-strip::before{content:'';position:absolute;top:50%;left:0;right:0;height:2px;
  border-radius:1px;transform:translateY(-50%);}
.rail-4v .rail-strip::before{background:#ef9a30;}
.rail-5v .rail-strip::before{background:#c0392b;}
.rail-plus .rail-strip::before{background:#ff7043;}
.rail-minus .rail-strip::before{background:#1a6db5;}
.rail-gnd .rail-strip::before{background:#90a4ae;}

/* Individual rail hole */
.rail-hole{
  width:9px;height:9px;border-radius:50%;
  position:relative;z-index:2;flex-shrink:0;
  cursor:pointer;transition:all .15s;
  margin:0 1.5px;
}
.rail-hole.r4{background:#3c2409;border:1px solid #a85f18;}
.rail-hole.r5{background:#3d0e0e;border:1px solid #7a2020;}
.rail-hole.rp{background:#402015;border:1px solid #b85b35;}
.rail-hole.rn{background:#0e1540;border:1px solid #1e2a80;}
.rail-hole.rg{background:#1b252c;border:1px solid #5d707b;}
.rail-hole:hover{transform:scale(1.6);z-index:10;}
.rail-hole.selected-node{background:currentColor !important;animation:blink .8s infinite;transform:scale(1.5);}
.rail-hole.connected-node{background:currentColor !important;opacity:.9;}

/* Main hole grid */
#grid-area{display:flex;align-items:flex-start;margin:3px 0;gap:36px;}
.board-block{display:flex;align-items:stretch;gap:0;}
.row-nums{display:flex;flex-direction:column;justify-content:flex-start;padding-top:2px;margin-right:3px;min-width:10px;position:relative;z-index:20;flex-shrink:0;}
.second-board .row-nums{margin-left:8px;margin-right:3px;position:relative;z-index:60;background:rgba(30,74,30,0.85);padding-right:2px;border-radius:3px;}
.row-num{height:12px;font-size:.38rem;color:rgba(255,255,255,.32);text-align:right;line-height:12px;display:flex;align-items:center;justify-content:flex-end;}
.half{display:grid;gap:1.5px;}
.half-l{grid-template-columns:repeat(5,12px);}
.half-r{grid-template-columns:repeat(5,12px);}
.center-gap{
  width:28px;position:relative;display:flex;align-items:stretch;
  flex-shrink:0;
}
.center-gap::after{content:'';position:absolute;left:50%;top:0;bottom:0;
  width:3px;background:rgba(0,0,0,.4);transform:translateX(-50%);}

/* Breadboard hole */
.hole{
  width:12px;height:12px;border-radius:50%;
  background:#0a140a;border:1px solid #1a2e1a;
  cursor:pointer;transition:all .12s;position:relative;
  display:flex;align-items:center;justify-content:center;
}
.hole:hover{transform:scale(1.5);z-index:10;border-color:#4a8a4a;}
.hole.selected-node{background:currentColor !important;animation:blink .8s infinite;transform:scale(1.4);}
.hole.connected-node{background:currentColor !important;opacity:.85;}
.hole.ic-row{background:#0d1020;border-color:#2a2a5a;}
/* Tooltip on hover */
.hole[data-nodeid]:hover::after,
.rail-hole[data-nodeid]:hover::after{
  content:attr(data-label);
  position:absolute;bottom:120%;left:50%;transform:translateX(-50%);
  background:var(--panel2);border:1px solid var(--border);border-radius:3px;
  padding:2px 6px;font-size:.52rem;white-space:nowrap;pointer-events:none;z-index:100;
  color:var(--text);font-family:'Share Tech Mono',monospace;
}

/* IC CHIP — sits on board */
#ic-chip{
  position:absolute;
  background:linear-gradient(170deg,#252525,#0f0f0f);
  border:2px solid #3a3a4a;border-radius:5px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  box-shadow:0 3px 12px rgba(0,0,0,.9),0 0 0 1px rgba(80,80,160,.3);
  pointer-events:none;z-index:20;
}
.ic-notch{width:14px;height:8px;background:var(--bg);border-radius:0 0 10px 10px;
  border:1px solid #3a3a4a;border-top:none;position:absolute;top:-2px;left:50%;transform:translateX(-50%);}
.ic-dot{width:5px;height:5px;border-radius:50%;background:#3030a0;
  position:absolute;bottom:6px;left:8px;}
.ic-name{font-size:.6rem;color:#bbb;letter-spacing:2px;font-weight:bold;}
.ic-pkg{font-size:.45rem;color:#666;}
/* Pin legs going into holes */
.ic-leg{position:absolute;background:#888;width:2px;border-radius:0 0 1px 1px;}

/* CERAMIC CAPACITOR */
#capacitor{
  position:absolute;
  width:44px;height:36px;
  cursor:grab;
  z-index:100;
  user-select:none;
  transition:filter 0.15s, box-shadow 0.15s;
  filter:drop-shadow(2px 3px 4px rgba(0,0,0,0.5));
}
#capacitor:hover{filter:drop-shadow(2px 3px 8px rgba(70,130,220,0.6));}
#capacitor.dragging{cursor:grabbing;filter:drop-shadow(3px 5px 12px rgba(70,130,220,0.8));z-index:150;}
#capacitor.placed{cursor:pointer;}
.cap-body{
  fill:#4a6fa5;
  filter:url(#capGlow);
}
.cap-highlight{
  fill:rgba(120,160,220,0.5);
}
.cap-lead{
  fill:#707585;
  stroke:#555;
  stroke-width:0.5;
}
.cap-terminal{
  fill:rgba(100,200,255,0.3);
  stroke:#4fc3f7;
  stroke-width:1;
  cursor:pointer;
  pointer-events:all;
  transition:all 0.15s;
}
.cap-terminal:hover{
  fill:rgba(100,200,255,0.6);
  stroke:#fff;
  stroke-width:2;
  filter:drop-shadow(0 0 4px #4fc3f7);
}
.cap-terminal.selected{
  fill:rgba(76,175,80,0.6);
  stroke:#4caf50;
  stroke-width:2;
  filter:drop-shadow(0 0 6px #4caf50);
}
.cap-terminal.snapped{
  fill:rgba(76,175,80,0.7);
  stroke:#4caf50;
  stroke-width:2;
}
#resistor.connected,#capacitor.connected{
  filter:drop-shadow(2px 3px 4px rgba(0,0,0,0.5)) drop-shadow(0 0 8px rgba(76,175,80,0.6));
}
.hole.comp-connected{
  background:#1a4a1a !important;
  border-color:#4caf50 !important;
  box-shadow:0 0 5px rgba(76,175,80,0.7);
}
#cap-controls{
  position:static;
  width:204px !important;
  min-width:204px !important;
  max-width:204px !important;
  max-height:none;
  overflow-y:visible;
  overflow-x:hidden;
  box-sizing:border-box;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:8px;
  padding:10px 12px;
  display:flex;
  flex-direction:column;
  gap:8px;
  z-index:200;
  font-size:0.7rem;
  box-shadow:0 4px 20px rgba(0,0,0,0.4);
  align-self:flex-start;
  flex-shrink:0;
}
#cap-controls *{
  box-sizing:border-box;
}
#cap-controls button{
  width:100%;
  min-width:0;
  padding:6px 10px;
  font-size:0.62rem;
  white-space:normal;
  background:var(--bg);
  border:1px solid var(--border);
  color:var(--text);
  border-radius:4px;
  cursor:pointer;
  transition:all 0.15s;
  font-family:'Share Tech Mono',monospace;
}
#cap-controls button:hover{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}
#cap-controls .cap-info{
  color:var(--muted);
  font-size:0.52rem;
  text-align:center;
  line-height:1.35;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
}
#cap-controls select,
#cap-controls input{
  width:100%;
  min-width:0;
  font-size:0.56rem !important;
}
#cap-controls .value-row{
  display:grid;
  grid-template-columns: 40px minmax(0,1fr) 52px;
  gap:4px;
  align-items:center;
}
#cap-controls .value-row label{
  font-size:0.5rem;
  color:var(--muted);
}
#cap-controls button.mini-apply{
  width:auto;
  padding:4px 6px;
  font-size:0.54rem;
  line-height:1.1;
}
#cap-controls::-webkit-scrollbar{
  width:8px;
}
#cap-controls::-webkit-scrollbar-thumb{
  background:rgba(120,140,180,.45);
  border-radius:8px;
}
#cap-controls::-webkit-scrollbar-track{
  background:transparent;
}
.cap-node-indicator{
  position:absolute;
  width:8px;height:8px;
  border-radius:50%;
  background:rgba(76,175,80,0.8);
  border:1px solid #fff;
  pointer-events:none;
  opacity:0;
  transition:opacity 0.2s;
}
#capacitor.snapped .cap-node-indicator{opacity:1;}

/* WIRE SVG */
#wire-svg{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:40;}
.wire-path{fill:none;stroke-width:3;stroke-linecap:round;filter:drop-shadow(0 0 3px currentColor);opacity:.9;}
.wire-preview{fill:none;stroke-dasharray:8 4;stroke-width:2;stroke-linecap:round;opacity:.6;animation:dash .5s linear infinite;}
@keyframes dash{to{stroke-dashoffset:-12;}}

/* STATUS */
#status{position:fixed;bottom:56px;left:50%;transform:translateX(-50%);padding:9px 20px;
  border-radius:6px;font-size:.8rem;opacity:0;transition:opacity .3s;z-index:200;pointer-events:none;white-space:nowrap;}
#status.show{opacity:1;}
#status.success{background:rgba(63,185,80,.15);border:1px solid var(--green);color:var(--green);}
#status.error{background:rgba(248,81,73,.15);border:1px solid var(--red);color:var(--red);}
#status.info{background:rgba(88,166,255,.15);border:1px solid var(--accent);color:var(--accent);}

/* PROGRESS */
#prog-bar{position:fixed;bottom:0;left:0;right:0;background:var(--panel);
  border-top:1px solid var(--border);padding:7px 20px;display:flex;align-items:center;gap:12px;z-index:50;}
#prog-label{font-size:.7rem;color:var(--muted);min-width:140px;}
#prog-track{flex:1;height:4px;background:var(--border);border-radius:2px;overflow:hidden;}
#prog-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--green));border-radius:2px;transition:width .4s;width:0%;}
#prog-info{font-size:.7rem;color:var(--text);white-space:normal;line-height:1.25;max-width:620px;}
#check-feedback{position:fixed;right:20px;bottom:56px;max-width:430px;padding:10px 12px;border-radius:8px;
  background:rgba(10,16,28,.96);border:1px solid var(--border);color:var(--text);z-index:260;
  font-size:.68rem;line-height:1.35;display:none;box-shadow:0 8px 24px rgba(0,0,0,.35);}
#check-feedback.show{display:block;}
#check-feedback.success{border-color:var(--green);color:var(--green);}
#check-feedback.error{border-color:var(--red);color:#ffb4b0;}
#check-feedback.info{border-color:var(--accent);color:#9fd0ff;}

body.wiring-mode{cursor:crosshair!important;}

#osc-modal-overlay{display:none;position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.85);backdrop-filter:blur(6px);align-items:center;justify-content:center;}
#osc-modal-overlay.open{display:flex;}
#osc-modal-box{width:96vw;max-width:1400px;height:90vh;border-radius:12px;overflow:hidden;border:2px solid #ffc107;box-shadow:0 0 40px rgba(255,193,7,.3);display:flex;flex-direction:column;}
#osc-modal-bar{background:#1a1600;padding:8px 16px;display:flex;align-items:center;justify-content:space-between;font-family:'Share Tech Mono',monospace;font-size:.75rem;color:#ffc107;flex-shrink:0;}
#osc-modal-iframe{flex:1;border:none;}
#osc-close-btn{background:transparent;border:1px solid #ffc107;color:#ffc107;padding:4px 12px;border-radius:4px;cursor:pointer;font-size:.75rem;font-family:'Share Tech Mono',monospace;}
#osc-close-btn:hover{background:#ffc107;color:#000;}
#osc-save-btn{background:transparent;border:1px solid #67e8f9;color:#67e8f9;padding:4px 12px;border-radius:4px;cursor:pointer;font-size:.75rem;font-family:'Share Tech Mono',monospace;margin-left:auto;margin-right:8px;}
#osc-save-btn:hover{background:#67e8f9;color:#001018;}
#eq-osc{cursor:pointer!important;}
#eq-osc:hover{border-color:#ffc107!important;box-shadow:0 0 16px rgba(255,193,7,.4);}
#osc-xy-btn:hover{border-color:#ffc107!important;background:rgba(255,193,7,.18)!important;color:#fff!important;}
#osc-yt-btn:hover{border-color:#00e8a0!important;background:rgba(0,232,160,.18)!important;color:#fff!important;}

#eq-fg{position:relative;}
.fg-setup-row{
  display:flex;
  gap:6px;
  justify-content:center;
  align-items:center;
  margin:0 8px 8px;
}
.fg-mini-btn{
  background:rgba(88,166,255,.10);
  border:1px solid rgba(88,166,255,.28);
  color:#b9dcff;
  border-radius:8px;
  padding:2px 8px;
  font-family:'Share Tech Mono',monospace;
  font-size:.56rem;
  line-height:1.2;
  cursor:pointer;
}
.fg-mini-btn:hover{border-color:#58a6ff;background:rgba(88,166,255,.18);color:#ffffff;}
.fg-mini-btn.active{
  background:#12384c;
  border-color:#7ef;
  color:#d9f7ff;
  box-shadow:0 0 0 1px rgba(126,239,255,.18) inset;
}

#yt-modal-overlay{display:none;position:fixed;inset:0;z-index:1002;background:rgba(0,0,0,.88);backdrop-filter:blur(6px);align-items:center;justify-content:center;}
#yt-modal-overlay.open{display:flex;}
#yt-modal-box{width:96vw;max-width:1500px;height:92vh;border-radius:12px;overflow:hidden;border:2px solid #00e8a0;box-shadow:0 0 40px rgba(0,232,160,.32);display:flex;flex-direction:column;background:#070b0a;}
#yt-modal-bar{background:#050e08;padding:8px 16px;display:flex;align-items:center;justify-content:space-between;font-family:'Share Tech Mono',monospace;font-size:.75rem;color:#00e8a0;flex-shrink:0;gap:12px;}
#yt-modal-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#yt-modal-iframe{flex:1;border:none;background:#070b0a;}
#yt-close-btn,#yt-save-btn{background:transparent;border:1px solid #00e8a0;color:#00e8a0;padding:4px 12px;border-radius:4px;cursor:pointer;font-size:.75rem;font-family:'Share Tech Mono',monospace;}
#yt-close-btn:hover,#yt-save-btn:hover{background:#00e8a0;color:#070b0a;}

#fg-modal-overlay{display:none;position:fixed;inset:0;z-index:1001;background:rgba(0,0,0,.88);backdrop-filter:blur(6px);align-items:center;justify-content:center;}
#fg-modal-overlay.open{display:flex;}
#fg-modal-box{width:96vw;max-width:1500px;height:92vh;border-radius:12px;overflow:hidden;border:2px solid #58a6ff;box-shadow:0 0 40px rgba(88,166,255,.32);display:flex;flex-direction:column;background:#0b1220;}
#fg-modal-bar{background:#0a1626;padding:8px 16px;display:flex;align-items:center;justify-content:space-between;font-family:'Share Tech Mono',monospace;font-size:.75rem;color:#93c5fd;flex-shrink:0;gap:12px;}
#fg-modal-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#fg-modal-iframe{flex:1;border:none;background:#fff;}
#fg-close-btn{background:transparent;border:1px solid #58a6ff;color:#93c5fd;padding:4px 12px;border-radius:4px;cursor:pointer;font-size:.75rem;font-family:'Share Tech Mono',monospace;}
#fg-close-btn:hover{background:#58a6ff;color:#08111c;}


.multi-part{position:absolute;transform-origin:center center;}
.multi-part.selected-part{filter:drop-shadow(0 0 10px rgba(255,255,255,.55)) !important;}
.multi-part .part-label{font-family:'Share Tech Mono',monospace;font-size:7px;font-weight:700;pointer-events:none;user-select:none;}
.multi-part.capacitor-part .part-label{fill:#e8f4ff;}
.multi-part.resistor-part .part-label{fill:#24160a;}




  body.app-scale-95 { zoom: 0.95; }
  @supports not (zoom: 0.95) {
    body.app-scale-95 {
      transform: scale(0.95);
      transform-origin: top left;
      width: 105.2632%;
      min-height: 105.2632vh;
    }
  }

  /* ═══════════════════════════════════════════════════════
     RESPONSIVE / MOBILE VIEW
     ═══════════════════════════════════════════════════════ */

  /* ── Tablet & small laptops ── */
  @media (max-width: 1200px) {
    #lab {
      padding: 16px 20px 16px 20px !important;
    }
  }

  /* ── Mobile (portrait & landscape phones / small tablets) ── */
  @media (max-width: 860px) {
    /* --- Header --- */
    header {
      flex-direction: column;
      gap: 8px;
      padding: 8px 10px;
    }
    .htitle { font-size: 0.85rem; }
    .hsub { font-size: 0.55rem; }
    .controls {
      flex-wrap: wrap;
      gap: 6px;
      justify-content: flex-start;
    }
    .check-mode-wrap { flex-wrap: wrap; gap: 6px; }
    .mode-select { min-width: 100px; font-size: 0.65rem; }

    /* --- Main lab container: stack vertically --- */
    #lab {
      flex-direction: column !important;
      align-items: stretch !important;
      padding: 10px 8px 80px 8px !important;
      gap: 14px !important;
    }

    /* Equipment wrappers - full width, remove left margins */
    #lab > div {
      width: 100% !important;
      margin-left: 0 !important;
    }
    /* The two column wrappers (FG on left, OSC+DMM on right) */
    #lab > div[style*="flex-direction:column"] {
      flex-direction: row !important;
      flex-wrap: wrap !important;
      gap: 10px !important;
    }
    .equipment {
      min-width: 140px !important;
      flex: 1 1 200px !important;
      margin-left: 0 !important;
    }
    #eq-osc { margin-left: 0 !important; }

    /* --- Breadboard wrapper --- */
    #bb-wrap {
      margin-top: 10px !important;
      width: 100% !important;
      align-items: flex-start !important;
      overflow-x: auto !important;
      overflow-y: visible !important;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 12px;
    }
    /* Don't let breadboard shrink — let it scroll */
    #breadboard {
      flex-shrink: 0;
      min-width: max-content;
    }

    /* Rail controls: make them flow with the breadboard */
    #rail-controls {
      position: relative !important;
      left: auto !important;
      top: auto !important;
      transform: none !important;
      width: 240px !important;
      margin: 0 auto 6px auto;
    }

    /* --- Component controls panel --- */
    #cap-controls {
      width: 100% !important;
      min-width: 100% !important;
      max-width: 100% !important;
      font-size: 0.6rem !important;
      padding: 8px !important;
    }

    /* --- Bottom bar --- */
    #prog-bar {
      padding: 6px 10px;
      gap: 6px;
      flex-wrap: wrap;
    }
    #prog-label { font-size: 0.58rem; min-width: 100px; }
    #prog-info { font-size: 0.58rem; max-width: 100%; }

    /* Status & feedback */
    #status { font-size: 0.65rem; padding: 6px 12px; bottom: 48px; }
    #check-feedback {
      right: 6px !important;
      left: 6px;
      max-width: calc(100vw - 12px) !important;
      font-size: 0.6rem;
      bottom: 48px;
    }

    /* Reference panel */
    #ref-panel {
      right: 6px !important;
      left: 6px !important;
      width: auto !important;
      max-width: calc(100vw - 12px) !important;
    }
  }

  /* ── Very small phones ── */
  @media (max-width: 480px) {
    .htitle { font-size: 0.72rem; letter-spacing: 1px; }
    .hsub { font-size: 0.48rem; }
    button { padding: 4px 8px; font-size: 0.65rem; }

    #lab > div[style*="flex-direction:column"] {
      flex-direction: column !important;
    }
    .equipment {
      flex: 1 1 100% !important;
    }

    #cap-controls {
      font-size: 0.55rem !important;
    }
    #cap-controls button { font-size: 0.55rem !important; padding: 4px 6px !important; }
  }

/* Exam session UI */
#exam-banner{
  display:none;
  position:sticky;
  top:58px;
  z-index:55;
  margin:10px 20px 0;
  padding:8px 12px;
  background:rgba(16,22,34,.96);
  border:1px solid rgba(88,166,255,.32);
  border-radius:8px;
  box-shadow:0 6px 18px rgba(0,0,0,.22);
  font-size:.68rem;
  color:var(--text);
  gap:10px;
  align-items:center;
  justify-content:space-between;
}
#exam-banner.show{display:flex;}
#exam-banner .exam-meta{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}
#exam-banner .exam-chip{
  padding:2px 8px;
  border:1px solid rgba(88,166,255,.28);
  border-radius:999px;
  color:#9fd0ff;
  background:rgba(88,166,255,.08);
}
#exam-overlay{
  position:fixed;
  inset:0;
  z-index:1200;
  background:rgba(3,8,13,.82);
  backdrop-filter:blur(5px);
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
}
#exam-overlay.show{display:flex;}
#exam-card{
  width:min(430px, 100%);
  background:linear-gradient(180deg, rgba(22,27,39,.98), rgba(13,17,23,.98));
  border:1px solid var(--border);
  border-radius:14px;
  padding:18px 18px 16px;
  box-shadow:0 18px 48px rgba(0,0,0,.42);
}
#exam-card h3{
  font-family:'Rajdhani',sans-serif;
  font-size:1.05rem;
  letter-spacing:1px;
  color:var(--accent);
  margin-bottom:6px;
}
#exam-card p{
  font-size:.66rem;
  color:var(--muted);
  line-height:1.45;
  margin-bottom:14px;
}
.exam-form-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
.exam-form-grid label{
  font-size:.58rem;
  color:var(--muted);
  display:flex;
  flex-direction:column;
  gap:5px;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.exam-form-grid input{
  width:100%;
  background:#0d1117;
  border:1px solid var(--border);
  color:var(--text);
  border-radius:8px;
  padding:9px 10px;
  font-family:'Share Tech Mono',monospace;
  font-size:.73rem;
  outline:none;
}
.exam-form-grid input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(88,166,255,.12);
}
.exam-actions{
  display:flex;
  gap:10px;
  margin-top:14px;
  flex-wrap:wrap;
}
#startExamBtn{
  border-color:var(--green);
  color:var(--green);
}
#startExamBtn:hover{
  background:var(--green);
  color:#05110a;
}
#clearExamSessionBtn{
  border-color:var(--red);
  color:var(--red);
}
#clearExamSessionBtn:hover{
  background:rgba(248,81,73,.12);
}
#examMsg{
  min-height:18px;
  margin-top:10px;
  font-size:.63rem;
  line-height:1.35;
  color:#ffb4b0;
}
body.exam-locked #lab,
body.exam-locked #prog-bar,
body.exam-locked #check-feedback,
body.exam-locked #status,
body.exam-locked #ref-panel{
  pointer-events:none;
  opacity:.58;
}
body.exam-locked #exam-overlay,
body.exam-locked #exam-banner{
  pointer-events:auto;
  opacity:1;
}
@media (max-width: 860px){
  #exam-banner{top:auto; position:relative; margin:8px 8px 0; flex-direction:column; align-items:flex-start;}
}