.simulator-shell { max-width:1400px; margin:auto; padding:32px clamp(20px,4vw,48px) 60px; display:flex; flex-direction:column; gap:16px; }
.simulator-toolbar { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.simulator-toolbar h1 { font:400 22px "Merriweather",Georgia,serif; margin:0; flex:1; min-width:160px; }
.simulator-tabs { display:flex; gap:6px; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:4px; }
.simulator-tabs .tab { padding:8px 16px; border-radius:6px; border:0; background:transparent; color:var(--muted); font-size:12px; font-weight:600; cursor:pointer; }
.simulator-tabs .tab.active { background:var(--green); color:white; }
.simulator-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:12px 16px; }
.simulator-hint { color:var(--muted); font-size:12px; }
.simulator-spacer { flex:1; }
.simulator-canvas { overflow:auto; border:1px solid var(--line); border-radius:8px; max-height:75vh; background:var(--bg); }

.sim-stage { position:relative; }
.sim-stage.sim-schematic {
  background:
    linear-gradient(color-mix(in srgb, var(--ink) 6%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ink) 6%, transparent) 1px, transparent 1px),
    var(--bg);
  background-size:18px 18px;
}
.sim-stage.sim-protoboard {
  background:
    linear-gradient(#c9525f 0 6px, transparent 0) 0 10px/100% 6px no-repeat,
    linear-gradient(#5b8ac9 0 6px, transparent 0) 0 24px/100% 6px no-repeat,
    linear-gradient(#c9525f 0 6px, transparent 0) 0 calc(100% - 30px)/100% 6px no-repeat,
    linear-gradient(#5b8ac9 0 6px, transparent 0) 0 calc(100% - 16px)/100% 6px no-repeat,
    radial-gradient(circle,#00000030 1.6px,transparent 1.8px) 10px 50px/20px 20px repeat,
    #e8ded0;
}

.circuit-element.sim-selected { outline:2px dashed #63e6be; outline-offset:4px; border-radius:6px; }

/* The simulator uses its own neutral/green palette instead of the reference red schematic style. */
.sim-stage .circuit-wire { background:#7a90a3; pointer-events:auto; cursor:pointer; }
.sim-stage .circuit-wire { touch-action:none; }
.sim-stage .circuit-wire::before { content:""; position:absolute; left:0; right:0; top:-9px; bottom:-9px; background:transparent; }
.sim-stage .circuit-wire:hover { background:var(--green); box-shadow:0 0 0 2px #63e6be44; }
.sim-stage .circuit-wire.sim-selected { background:#63e6be; height:3px; }
.sim-stage .circuit-wire.sim-wire-draft { background:#ffcc66; pointer-events:none; }
.sim-running .circuit-wire:not(.sim-wire-draft)::after { content:""; position:absolute; inset:-1px 0; border-radius:4px; pointer-events:none; background:repeating-linear-gradient(90deg,transparent 0 10px,#63e6be 10px 17px,transparent 17px 24px); background-size:48px 100%; animation:sim-wire-flow .8s linear infinite; filter:drop-shadow(0 0 3px #63e6be); }
.sim-paused .circuit-wire::after { animation-play-state:paused; }
@keyframes sim-wire-flow { to { background-position:48px 0; } }
.sim-stage .circuit-node-marker { pointer-events:none; }
.sim-stage .circuit-node-marker.sim-junction { pointer-events:auto; cursor:crosshair; background:var(--green); border-radius:50%; clip-path:none; }
.sim-stage .sim-junction:hover, .sim-stage .sim-junction:focus { box-shadow:0 0 0 5px #63e6be66; outline:2px solid var(--ink); }
.theory-stage .circuit-wire { pointer-events:none; }
.theory-stage .circuit-terminal { cursor:default; }
.theory-svg { display:block; width:100%; min-width:0; height:auto; }
.theory-svg .wire { stroke:#7a90a3; stroke-width:2; }
.theory-svg .label, .theory-svg .small { fill:var(--ink); stroke:var(--bg); }
.theory-svg .value { fill:var(--green-dark); stroke:var(--bg); font-size:20px; }
.theory-svg .node { fill:var(--green); stroke:var(--bg); }
.theory-svg .current-label { fill:var(--ink); stroke:var(--bg); }

/* Terminals are positioned inline exactly at the artwork's own lead tip (no connecting stub),
   sized generously for an easy click/tap. The visible mark is the same rhombus used for lead
   endings in the practice diagrams, and it spins together with the component. */
.sim-stage .circuit-terminal {
  box-sizing:border-box; cursor:crosshair; width:22px; height:22px; background:transparent;
  display:flex; align-items:center; justify-content:center;
}
.sim-stage .circuit-terminal::after {
  content:""; display:block; width:7px; height:7px; background:#7a90a3;
  clip-path:polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.sim-stage .circuit-terminal.sim-connected::after { background:#63e6be; }
.sim-stage .circuit-terminal.sim-pending::after { background:#ffcc66; }
.sim-stage .circuit-terminal.sim-pending::after { filter:drop-shadow(0 0 2px #ffcc66); }

.sim-nodes-layer { z-index:1; }
.sim-stage:not(.theory-stage) > .circuit-wires-layer { z-index:3; }
.sim-stage:not(.theory-stage) > .sim-nodes-layer { z-index:4; }
.sim-stage:not(.theory-stage) > .circuit-element { z-index:5; }
.circuit-node-marker {
  position:absolute; width:13px; height:13px; margin:-6.5px 0 0 -6.5px;
  background:#7a90a3; clip-path:polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

@media (max-width:700px) {
  .simulator-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .simulator-hint { order:99; }
}

.sim-playback { display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding:12px; background:var(--panel); border:1px solid var(--line); border-radius:8px; }
#sim-status { flex:1; min-width:200px; font-size:13px; }
.sim-palette { display:flex; gap:8px; flex-wrap:wrap; }
.sim-palette-note { color:var(--muted); font-size:12px; align-self:center; }
.sim-library-open { display:inline-flex; gap:8px; align-items:center; }
.sim-components-dialog { width:min(1040px,calc(100vw - 32px)); max-width:1040px; }
.sim-library-filters { display:grid; grid-template-columns:minmax(260px,1fr) minmax(180px,260px); gap:12px; margin:18px 0; }
.sim-library-filters input,.sim-library-filters select { margin-top:6px; }
.sim-component-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:10px; max-height:min(62vh,650px); overflow:auto; padding:2px 4px 8px 2px; }
.sim-component-card { display:grid; grid-template-columns:70px 1fr 28px; align-items:center; gap:12px; min-height:92px; padding:12px; color:var(--ink); text-align:left; background:var(--panel); border:1px solid var(--line); border-radius:10px; cursor:pointer; }
.sim-component-card:hover,.sim-component-card:focus-visible { border-color:var(--green); background:var(--green-soft); transform:translateY(-1px); }
.sim-component-card img { width:68px; height:54px; object-fit:contain; }
:root[data-theme="dark"] .sim-component-card img { filter:brightness(1.6); }
.sim-component-card span { min-width:0; display:flex; flex-direction:column; gap:5px; }
.sim-component-card strong { font-size:14px; }
.sim-component-card small { display:-webkit-box; overflow:hidden; color:var(--muted); font-size:11px; line-height:1.35; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.sim-component-card b { display:grid; place-items:center; width:26px; height:26px; color:white; background:var(--green); border-radius:50%; font-size:18px; }
.sim-palette select { width:auto; min-width:220px; max-width:310px; padding:9px 34px 9px 12px; }
.sim-example-picker { display:flex; align-items:center; gap:8px; padding-left:10px; border-left:1px solid var(--line); }
.sim-example-picker select { width:auto; min-width:220px; padding:9px 34px 9px 12px; }
.sim-time-settings { display:grid; grid-template-columns:repeat(2,minmax(160px,260px)); gap:12px; margin:16px 0 8px; }
.sim-time-settings input { margin-top:5px; }
#sim-trace select { width:auto; min-width:220px; margin:8px 0; }
#sim-trace svg { min-height:220px; }
.sim-scope-dialog { position:fixed; inset:12px 12px auto auto; width:min(1440px,calc(100vw - 24px)); height:min(850px,calc(100vh - 24px)); max-width:none; max-height:none; margin:0; padding:0; z-index:1000; resize:both; overflow:hidden; box-shadow:0 20px 70px #0009; }
.sim-scope-dialog::backdrop { display:none; }
.sim-scope-header { position:sticky; top:0; z-index:4; display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding:18px 20px 12px; background:var(--panel); border-bottom:1px solid var(--line); cursor:move; user-select:none; }
.sim-scope-header h2 { margin:5px 0 0; }
.sim-scope-header>div:last-child { display:flex; gap:6px; }
.sim-scope-header .dialog-close { position:static; }
#sim-scope-body { height:calc(100% - 78px); padding:0 20px 16px; overflow:hidden; }
.sim-scope-minimized { width:390px!important; height:auto!important; resize:none; }
.sim-scope-minimized #sim-scope-body { display:none; }
.sim-scope-workbench { display:grid; grid-template-columns:minmax(540px,1.45fr) minmax(500px,.9fr); gap:16px; align-items:start; }
.sim-scope-display { min-width:0; }
.sim-scope-control-panel { min-width:0; display:grid; grid-template-columns:1fr 1fr; gap:10px; align-content:start; padding:0; overflow:visible; }
.sim-scope-acquisition { display:grid; grid-template-columns:1fr 1fr; gap:8px; align-items:end; margin:0; padding:10px; background:var(--bg); border:1px solid var(--line); border-radius:8px; }
.sim-scope-acquisition input { margin-top:5px; }
.sim-scope-acquisition .form-hint { grid-column:1/-1; margin:0; }
.sim-scope-source { display:grid; grid-template-columns:minmax(100px,1fr) minmax(90px,.65fr); gap:8px; align-items:end; margin:0; padding:10px; background:var(--green-soft); border:1px solid var(--green); border-radius:8px; }
.sim-scope-source select,.sim-scope-source input { margin-top:5px; }
.sim-scope-source .form-hint { align-self:center; font-weight:700; }
.sim-scope-source .button { grid-column:1/-1; width:100%; }
.sim-scope-channels { grid-column:1/-1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:0; }
.sim-scope-channel { display:grid; grid-template-columns:42px minmax(0,1fr) minmax(0,1fr); align-items:center; gap:8px; padding:10px; border-left:5px solid var(--scope-color); border-radius:8px; background:var(--panel); }
.sim-scope-channel strong { grid-row:1/4; align-self:start; padding-top:9px; }
.sim-scope-channel select { width:100%; padding:8px 10px; }
.sim-scope-channel input[type="color"] { width:100%; height:38px; padding:3px; border-radius:6px; }
.sim-scope-channel input[type="number"] { width:100%; padding:8px; }
.sim-scope-channel .button { width:100%; }
.sim-scope-control-panel>.catalog-actions { grid-column:1/-1; margin:0; }
.sim-scope-graph { margin-top:0; }
.sim-scope-graph svg { display:block; width:100%; border:1px solid var(--line); border-radius:10px; }
.sim-scope-legend { display:flex; flex-wrap:wrap; gap:12px; margin-top:10px; }
.sim-scope-legend span { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); }
.sim-scope-legend span::before { content:""; width:20px; height:3px; background:var(--scope-color); border-radius:2px; }
.sim-scope-cursors { display:grid; grid-template-columns:1fr 1fr; gap:8px 10px; margin:0; padding:10px; border:1px solid var(--line); border-radius:8px; }
.sim-scope-cursors>div { grid-column:1/-1; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.sim-scope-cursors input { width:100%; }
.sim-scope-cursors>div span { max-width:100%; color:var(--muted); font:12px/1.5 monospace; }
.sim-scope-y-cursors { background:color-mix(in srgb,var(--panel) 92%,#77c9ff); }
.sim-scope-y-cursors select { margin-top:5px; }
.sim-scope-measurements { margin-top:14px; overflow:auto; border:1px solid var(--line); border-radius:8px; }
.sim-scope-measurements table { width:100%; border-collapse:collapse; font-size:11px; }
.sim-scope-measurements caption { padding:10px; text-align:left; color:var(--muted); }
.sim-scope-measurements th,.sim-scope-measurements td { padding:8px 10px; border-top:1px solid var(--line); text-align:left; white-space:nowrap; }
.sim-tool { width:58px; height:54px; padding:7px; background:var(--panel); }
.sim-tool img { width:42px; height:36px; object-fit:contain; pointer-events:none; }
.sim-tool:hover { background:var(--green-soft); border-color:var(--green); }
:root[data-theme="dark"] .sim-tool img { filter:brightness(1.6); }
.sim-stage .component-id { max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; background:var(--bg); padding:0 3px; border-radius:3px; }
@media(max-width:1100px) { #sim-scope-body{overflow:auto}.sim-scope-workbench{grid-template-columns:1fr}.sim-scope-control-panel{overflow:visible}.sim-scope-dialog{width:min(900px,calc(100vw - 32px))}.sim-scope-display{order:1}.sim-scope-control-panel{order:2} }
@media(max-width:700px) { .sim-palette,.simulator-hint,.sim-example-picker { grid-column:1/-1; } .sim-example-picker{border-left:0;padding-left:0;flex-wrap:wrap}.sim-time-settings,.sim-library-filters,.sim-scope-acquisition,.sim-scope-source{grid-template-columns:1fr}.sim-scope-source .button,.sim-scope-acquisition .form-hint{grid-column:1}.sim-scope-dialog{inset:8px;width:calc(100vw - 16px);height:calc(100vh - 16px);resize:none}.sim-scope-channel{grid-template-columns:42px 1fr}.sim-scope-channel strong{grid-row:1/7}.sim-scope-channel select,.sim-scope-channel input,.sim-scope-channel .button{grid-column:2}.sim-component-grid{grid-template-columns:1fr} }
.sim-polarity { position:absolute; font:700 15px monospace; color:var(--ink); background:var(--bg); border-radius:3px; pointer-events:none; }
.sim-stage .component-value { bottom:-40px; background:var(--panel); padding:2px 6px; border-radius:4px; }
.sim-stage .sim-meter-reading { color:var(--green-dark); font:700 17px monospace; border:1px solid var(--green); }
.sim-current-flow { position:absolute; left:18px; top:24px; width:80px; height:34px; pointer-events:none; transform-origin:40px 17px; }
.sim-current-flow>span { position:absolute; top:0; font:700 22px monospace; color:#c26d00; text-shadow:0 1px 2px var(--bg); animation:sim-flow 1.6s linear infinite; }
.sim-paused .sim-current-flow>span { animation-play-state:paused; }
@keyframes sim-flow { from { left:0; opacity:.5; } 50% { opacity:1; } to { left:60px; opacity:.5; } }
.sim-results { overflow:auto; background:var(--panel); border:1px solid var(--line); border-radius:8px; }
.sim-results table { width:100%; border-collapse:collapse; font-size:13px; }
.sim-results caption { text-align:left; padding:16px; color:var(--muted); }
.sim-results th,.sim-results td { padding:10px 16px; border-top:1px solid var(--line); text-align:left; white-space:nowrap; }
@media(prefers-reduced-motion:reduce) { .sim-current-flow>span { animation:none; left:30px; } }
.sim-stage.sim-protoboard { background:var(--bg); }
.breadboard-body { position:absolute; inset:0; pointer-events:none; }
.breadboard-body .board-hole { pointer-events:auto; }
.breadboard-body .board-hole-covered { pointer-events:none; }
.breadboard-body::before { content:''; position:absolute; left:64px; top:80px; width:1210px; height:428px; background:linear-gradient(100deg,#f4f2ec,#e1dfd8 60%,#f4f2ec); border:2px solid #cbc9c1; border-radius:7px; box-shadow:0 10px 0 #b4b3ab,0 14px 18px #0005,inset 0 2px 3px white; }
.breadboard-body::after { content:''; position:absolute; left:98px; top:288px; width:1144px; height:23px; border-radius:3px; background:#b4b2aa; box-shadow:inset 0 4px 5px #7777,inset 0 -2px 2px #fff8; pointer-events:none; }
.breadboard-legend { position:absolute; top:12px; left:65px; width:1180px; color:var(--ink); font:14px/1.5 sans-serif; }
.board-rail-line { position:absolute; left:96px; width:1148px; height:2px; background:#cf5555; pointer-events:none; }
.board-rail-line.negative { background:#5479b5; }
.board-row-label { position:absolute; left:78px; color:#3b464a; font:bold 16px monospace; }
.board-column-label { position:absolute; top:170px; font:11px monospace; color:#525951; }
.board-hole-covered { visibility:hidden; pointer-events:none; }
.board-hole { position:absolute; z-index:5; width:10px; height:10px; padding:0; border:2px solid #d1cfc7; border-radius:2px; background:#64645e; box-shadow:inset 0 1px 2px #252522; cursor:crosshair; }
.board-hole.board-group-active,.board-hole:focus { outline:2px solid #2e8b6f; background:#2e8b6f; }
.board-hole[data-group^="rail:"] { border-top-color:#c34949; }
.board-hole[data-group$="−"] { border-top-color:#3a6cb5; }
.sim-wire-tools { display:flex; align-items:center; flex-wrap:wrap; gap:10px; flex-basis:100%; padding:10px; border:1px solid var(--line); border-radius:8px; }
.sim-wire-tools label { font-size:13px; }
.sim-wire-tools select { width:auto; min-width:130px; padding:7px 12px; }
.sim-wire-tools span,.sim-wire-tools small { color:var(--muted); font-size:12px; }
.sim-wire-tools small { flex-basis:100%; }
.sim-protoboard .circuit-wire { height:6px; margin-top:-3px; border-radius:5px; background:var(--wire-color); box-shadow:inset 0 1px 1px #ffffff66,0 2px 2px #0006; }
.sim-protoboard .circuit-wire:hover,.sim-protoboard .circuit-wire.sim-selected { height:6px; background:var(--wire-color); outline:2px solid #00a5bc; outline-offset:2px; }
.sim-protoboard .circuit-wire.sim-wire-draft { background:var(--wire-color); opacity:.75; }
.sim-protoboard .sim-bend-handle { width:10px; height:10px; margin:-5px; border:2px solid white; background:#247987; box-shadow:0 0 0 1px #164653; cursor:move; }
.sim-stage.sim-protoboard > .circuit-wires-layer { z-index:6; }
.sim-stage.sim-protoboard:not(.theory-stage) > .sim-nodes-layer { z-index:7; }
.physical-leads { position:absolute; inset:0; width:116px; height:82px; overflow:visible; pointer-events:none; }
.physical-leads line { stroke:#a6adb5; stroke-width:3; }
.sim-protoboard .circuit-element { z-index:8; pointer-events:none; }
.sim-protoboard .circuit-element .component-symbol { pointer-events:auto; cursor:grab; }
.sim-protoboard .circuit-element .circuit-terminal { pointer-events:auto; }
.sim-protoboard .circuit-element.sim-dragging { z-index:12; }
.sim-pin-addresses { position:absolute; top:132px; left:-10px; white-space:nowrap; padding:3px 6px; border-radius:4px; color:#172b31; background:#fff9d9; font:12px monospace; }
.sim-protoboard .circuit-terminal.sim-pin-inserted::after { width:9px; height:9px; background:#218466; border:2px solid white; border-radius:50%; clip-path:none; box-shadow:0 0 0 1px #124c3c; }
.sim-protoboard .circuit-terminal.sim-pin-loose::after { background:#d97121; }
#sim-library-list { display:flex; flex-direction:column; gap:8px; max-height:50vh; overflow:auto; }
.sim-protoboard .component-id,.sim-protoboard .component-value { color:#172b31; background:#eee9df; }
.sim-power-badge { position:absolute; top:-40px; left:-12px; white-space:nowrap; padding:3px 6px; border-radius:4px; font:12px sans-serif; color:#322009; background:#ffd478; }
.sim-opamp-badge { position:absolute; top:-62px; left:-18px; white-space:nowrap; padding:4px 7px; border-radius:4px; color:white; background:#b83232; font:700 12px sans-serif; box-shadow:0 0 0 2px var(--bg); }
.sim-opamp-saturated .component-symbol { filter:drop-shadow(0 0 7px #d95757); }
.sim-power-overload .sim-power-badge { background:#b83232; color:white; }
.sim-power-warning { outline:2px solid #d6a132; border-radius:8px; }
.sim-heat { position:absolute; top:-6px; left:39px; color:#e85827; font:42px serif; pointer-events:none; text-shadow:0 0 8px #ffb33e; }
.sim-running .sim-power-overload .component-symbol { animation:sim-burn .7s infinite alternate; }
.sim-running .sim-heat { animation:sim-smoke 1.2s infinite; }
@keyframes sim-burn { to { filter:sepia(1) saturate(5) drop-shadow(0 0 10px #e95820); } }
@keyframes sim-smoke { from { transform:translateY(0); opacity:1; } to { transform:translateY(-30px) scale(1.25); opacity:.2; } }
@media(prefers-reduced-motion:reduce) { .sim-running .sim-power-overload .component-symbol,.sim-running .sim-heat { animation:none; } }

/* Simulator controls remain usable while the progress rail changes the viewport. */
.simulator-toolbar,.sim-playback,.simulator-actions { min-width:0; }
.simulator-toolbar { row-gap:12px; }
.sim-playback { position:sticky; top:calc(var(--header-height) + 8px); z-index:8; box-shadow:0 8px 24px #17212b0d; }
.simulator-actions { align-items:flex-start; }
.sim-palette { min-width:0; }
.simulator-canvas { overscroll-behavior:contain; scroll-behavior:smooth; }
@media(max-width:1180px) {
  .simulator-shell { padding-inline:24px; }
  .simulator-actions .button:not(.sim-tool) { flex:1 1 130px; }
  .simulator-hint { flex-basis:100%; }
}
@media(max-width:760px) {
  .simulator-shell { padding:24px 12px 48px; }
  .simulator-toolbar { align-items:flex-start; }
  .simulator-toolbar .back-button { flex-basis:100%; }
  .simulator-tabs { width:100%; }
  .simulator-tabs .tab { flex:1; }
  .sim-playback { top:calc(var(--header-height) + 6px); }
  .sim-playback .button { flex:1 1 86px; }
  #sim-status { flex-basis:100%; }
  .simulator-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); padding:10px; }
  .sim-palette,.simulator-hint,.sim-example-picker,.sim-wire-tools { grid-column:1/-1; }
  .sim-example-picker { border-left:0; padding-left:0; flex-wrap:wrap; }
  .sim-example-picker select { width:100%; min-width:0; }
  .simulator-actions>.button:not(.sim-tool) { width:100%; }
  .sim-palette { display:grid; grid-template-columns:repeat(5,1fr); width:100%; }
  .sim-tool { width:100%; min-width:0; }
}
@media(max-width:460px) { .sim-palette { grid-template-columns:repeat(4,1fr); } }