:root{--bg:#050c15;--panel:#0b1725;--panel2:#0e1e31;--line:#223b55;--text:#eaf5ff;--muted:#8da4bd;--cyan:#35d5ff;--green:#65e6ad;--amber:#ffc45c;--red:#ff6b75;--blue:#5ea7ff}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif}button,input{font:inherit}.sim-app{height:100vh;display:grid;grid-template-rows:64px 48px 1fr 28px}.sim-top{display:flex;align-items:center;gap:22px;padding:0 14px;border-bottom:1px solid var(--line);background:#07111d}.brand{display:flex;align-items:center;gap:10px;min-width:190px}.brand .mark{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,var(--cyan),var(--green));color:#03121c;font-weight:900;font-size:21px}.brand b{display:block;font-size:17px}.brand small{display:block;color:var(--cyan);font-size:9px;letter-spacing:.14em;font-weight:800}.mode-tabs{display:flex;gap:4px}.mode,.top-actions button,.top-actions a,.toolbar button{border:1px solid var(--line);background:#0d1b2b;color:var(--muted);padding:8px 11px;border-radius:8px;cursor:pointer;text-decoration:none;font-size:11px}.mode.active,.mode:hover,.top-actions button:hover,.top-actions a:hover{color:var(--text);border-color:#386080;background:#11263c}.top-actions{margin-left:auto;display:flex;gap:6px}.toolbar{display:flex;align-items:center;gap:6px;padding:7px 12px;background:#091522;border-bottom:1px solid var(--line)}.toolbar button{padding:7px 10px}.toolbar .primary{background:linear-gradient(135deg,var(--cyan),var(--green));color:#04131d;border:0;font-weight:900}.toolbar label{color:var(--muted);font-size:10px;margin-left:4px}.toolbar input{width:50px;background:#07111d;border:1px solid var(--line);color:var(--text);border-radius:6px;padding:5px}.sep{height:22px;width:1px;background:var(--line);margin:0 4px}.status{margin-left:auto;font:700 10px ui-monospace,monospace;color:var(--green);letter-spacing:.1em}.workspace{min-height:0;display:grid;grid-template-columns:260px 1fr 290px}.palette,.inspector{background:#081321;min-height:0;overflow:auto}.palette{border-right:1px solid var(--line);padding:12px}.inspector{border-left:1px solid var(--line);padding:12px}.panel-title{font:800 10px ui-monospace,monospace;color:var(--cyan);letter-spacing:.12em;margin:3px 0 10px;display:flex;justify-content:space-between}.palette>input{width:100%;background:#06101b;border:1px solid var(--line);color:var(--text);padding:9px;border-radius:8px;outline:0;margin-bottom:9px}.cat-tabs{display:flex;gap:4px;overflow:auto;margin-bottom:8px}.cat-tabs button{white-space:nowrap;border:1px solid var(--line);background:#0a1827;color:var(--muted);border-radius:7px;padding:6px 8px;font-size:9px;cursor:pointer}.cat-tabs button.active{color:var(--text);border-color:#3b698b}.palette-item{display:grid;grid-template-columns:34px 1fr;gap:8px;align-items:center;padding:9px;border:1px solid transparent;border-radius:9px;cursor:grab}.palette-item:hover{background:#0d2034;border-color:#244763}.palette-item .sym{height:30px;display:grid;place-items:center;background:#0e253a;border-radius:7px;color:var(--cyan);font-weight:900}.palette-item b{font-size:11px}.palette-item small{display:block;color:var(--muted);font-size:9px;margin-top:2px}.palette-note{margin-top:12px;padding:10px;border:1px dashed #2c4d69;border-radius:9px;color:var(--muted);font-size:9px;line-height:1.5}.canvas-wrap{position:relative;overflow:hidden;background:#06101b}.canvas-wrap svg{width:100%;height:100%;display:block;cursor:crosshair}.canvas-help{position:absolute;left:10px;bottom:10px;background:rgba(6,15,25,.8);border:1px solid var(--line);padding:6px 9px;border-radius:7px;color:var(--muted);font-size:9px;pointer-events:none}.zoom{position:absolute;right:10px;bottom:10px;display:flex;background:#091827;border:1px solid var(--line);border-radius:8px;overflow:hidden}.zoom button,.zoom span{border:0;background:transparent;color:var(--text);padding:7px 10px;font-size:11px}.zoom button{cursor:pointer}.component{cursor:move}.component rect.body{fill:#0d2033;stroke:#5b7892;stroke-width:1.3}.component.selected rect.body{stroke:var(--cyan);stroke-width:2;filter:url(#glow)}.component text{fill:#eaf5ff;font-size:9px;pointer-events:none}.component .value{fill:var(--muted);font-size:8px}.pin{fill:#35d5ff;stroke:#07111f;stroke-width:1.6;cursor:pointer;r:7;pointer-events:all}.pin:hover{r:9;stroke:#fff;stroke-width:2.2}.pin.selected{fill:var(--amber);r:9}.component .symbol,.component .lead{fill:none;stroke:var(--cyan);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}.component .symbol-label{fill:var(--cyan);stroke:none;font-size:12px;font-weight:800;pointer-events:none}.component rect.symbol{fill:#0d2033;stroke:var(--cyan);stroke-width:2}.wire{stroke:#6b8298;stroke-width:2.2;fill:none;pointer-events:stroke;cursor:pointer}.wire.live{stroke:var(--amber);filter:url(#glow)}.wire.fault{stroke:var(--red)}.ghost{opacity:.45}.inspector .empty{color:var(--muted);font-size:11px;line-height:1.6;padding:12px;border:1px dashed var(--line);border-radius:9px}.prop{display:grid;gap:5px;margin-bottom:10px}.prop label{color:var(--muted);font-size:9px}.prop input,.prop select{background:#06101b;color:var(--text);border:1px solid var(--line);border-radius:7px;padding:8px;outline:0}.prop-row{display:grid;grid-template-columns:1fr 1fr;gap:7px}.ins-btn{width:100%;border:1px solid var(--line);background:#102238;color:var(--text);padding:8px;border-radius:7px;cursor:pointer}.instrument-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.instrument-grid button{border:1px solid var(--line);background:#0b1b2c;color:var(--text);padding:8px 4px;border-radius:7px;cursor:pointer}.meter{margin:8px 0 14px;padding:13px;text-align:center;background:#050d16;border:1px solid #294258;border-radius:8px;color:var(--green);font:800 18px ui-monospace,monospace;min-height:48px}.console{white-space:pre-wrap;max-height:230px;overflow:auto;background:#040b12;border:1px solid var(--line);padding:10px;border-radius:8px;color:#9fecc7;font:10px/1.5 ui-monospace,monospace}.instruments-title{margin-top:18px}.sim-footer{display:flex;justify-content:space-between;align-items:center;padding:0 12px;border-top:1px solid var(--line);color:#718ba5;font-size:8px;background:#050d16}@media(max-width:1000px){.workspace{grid-template-columns:220px 1fr}.inspector{display:none}.brand{min-width:auto}.mode-tabs{display:none}}@media(max-width:650px){.workspace{grid-template-columns:1fr}.palette{position:absolute;z-index:10;left:0;top:112px;bottom:28px;width:230px;transform:translateX(-100%);transition:.2s}.palette.open{transform:none}.sim-top{gap:8px}.top-actions button:nth-child(-n+3){display:none}.toolbar{overflow:auto}.sim-footer span:nth-child(2){display:none}}.calc-panel{font:10px/1.55 ui-monospace,monospace;color:#a9eccc;background:#050d16;border:1px solid #294258;border-radius:8px;padding:10px;margin-bottom:14px}.calc-row{display:flex;justify-content:space-between;border-bottom:1px solid #172d41;padding:3px 0}.calc-row:last-child{border-bottom:0}@media(max-width:650px){#demoMotorBtn,#demoLogicBtn{display:none}}

/* WCAG 2.1 AA baseline */
:focus-visible{outline:3px solid currentColor;outline-offset:2px}
button,input,select,textarea{font:inherit}
button{min-height:36px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}
.vpHighContrast{filter:contrast(1.18)}
@media (max-width:768px){.toolbar{overflow-x:auto;white-space:nowrap}.workspace{grid-template-columns:1fr}.palette{max-height:34vh;overflow:auto}.inspector{max-height:42vh;overflow:auto}.canvas-wrap{min-height:48vh}}


/* Menu overflow fix: keep every control reachable instead of clipping the right side. */
.sim-top{
  min-width:0;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:thin;
  scrollbar-color:#31516d #07111d;
}
.sim-top::-webkit-scrollbar,.toolbar::-webkit-scrollbar{height:6px}
.sim-top::-webkit-scrollbar-track,.toolbar::-webkit-scrollbar-track{background:#07111d}
.sim-top::-webkit-scrollbar-thumb,.toolbar::-webkit-scrollbar-thumb{background:#31516d;border-radius:8px}
.brand,.mode-tabs,.top-actions{flex-shrink:0}
.top-actions{margin-left:auto}
.toolbar{
  min-width:0;
  overflow-x:auto;
  overflow-y:hidden;
  white-space:nowrap;
  scrollbar-width:thin;
  scrollbar-color:#31516d #091522;
}
.toolbar > *{flex-shrink:0}
@media(max-width:650px){
  .top-actions button:nth-child(-n+3){display:inline-flex}
  .top-actions,.mode-tabs{flex-shrink:0}
  .sim-top{padding-right:14px}
  .toolbar{padding-bottom:5px}
}

.palette-thumb{width:34px;height:30px;object-fit:contain;background:#0e253a;border-radius:7px;padding:3px}.palette-item img{display:block}

/* Responsive workspace hardening */
html,body{width:100%;max-width:100%;overflow:hidden}
.sim-app{min-width:0;min-height:100dvh}
.sim-top,.toolbar{min-width:0}
.workspace{min-width:0}
.palette,.inspector,.canvas-wrap{min-width:0}
.palette,.inspector{overflow-x:hidden;overflow-y:auto}
.palette-item b,.palette-item small{overflow-wrap:anywhere}
.toolbar label{flex-shrink:0}
@media (max-width:1100px){
  .sim-app{grid-template-rows:60px 46px minmax(0,1fr) 26px}
  .workspace{grid-template-columns:205px minmax(0,1fr) 250px}
  .inspector{display:block;padding:10px}
  .mode-tabs{display:none}
}
@media (max-width:900px){
  .workspace{grid-template-columns:minmax(0,1fr)}
  .inspector{display:none}
}
@media (max-width:800px){
  .sim-app{grid-template-rows:56px 44px minmax(0,1fr) 24px}
  .brand{min-width:150px}
  .top-actions{margin-left:0}
  .top-actions button,.top-actions a{padding:7px 9px}
  .workspace{grid-template-columns:minmax(0,1fr)}
  .palette{position:fixed;z-index:9100;left:0;top:100px;bottom:24px;width:min(300px,88vw);transform:translateX(-105%);transition:transform .2s ease;box-shadow:20px 0 50px #0009}
  .palette.open,.palette.collapsed{transform:none}
  .canvas-help{max-width:calc(100% - 80px);white-space:normal}
  .sim-footer{gap:8px;overflow:hidden;white-space:nowrap}
  .sim-footer span{overflow:hidden;text-overflow:ellipsis}
}
@media (max-width:520px){
  .sim-app{grid-template-rows:52px 42px minmax(0,1fr) 22px}
  .brand{min-width:125px;gap:7px}
  .brand .mark{width:32px;height:32px;font-size:18px}
  .brand b{font-size:14px}
  .brand small{font-size:7px}
  .top-actions{gap:4px}
  .top-actions button,.top-actions a{font-size:10px;padding:6px 8px}
  .toolbar{padding:5px 8px}
  .toolbar button{padding:6px 8px}
  .palette{top:94px;bottom:22px}
  .zoom{right:7px;bottom:7px}
  .canvas-help{left:7px;bottom:7px;font-size:8px}
}

/* Wiring workflow states; preserves the existing workspace and palette. */
.toolbar button.active{color:var(--text);border-color:var(--amber);background:#2b261b}.pin.selected{fill:var(--amber);stroke:#fff;stroke-width:2.4;filter:url(#glow)}.wire.selected{stroke:var(--amber);stroke-width:4;filter:url(#glow)}.wire-preview{stroke:var(--amber);stroke-width:2.5;stroke-dasharray:7 5;fill:none;pointer-events:none;opacity:.9}.wire-junction{fill:var(--cyan);stroke:#07111f;stroke-width:1.5;pointer-events:none}

/* Readability and responsive overflow safeguards for integrated workspaces. */
#vpWorkbench,#vpDemoLibrary,#vpPlatformPanel{box-sizing:border-box;max-width:calc(100vw - 12px);max-height:calc(100dvh - 80px)}
#vpWorkbench *,#vpDemoLibrary *,#vpPlatformPanel *{box-sizing:border-box}
#vpWorkbench .vpw-body{min-width:0;min-height:0;overflow:hidden}
#vpWorkbench .vpw-main,#vpWorkbench .vpw-side{min-width:0;overflow:auto;overflow-wrap:anywhere}
#vpWorkbench .vpw-ladder{white-space:pre-wrap;overflow-wrap:anywhere;word-break:normal;max-width:100%;font-size:clamp(10px,1vw,13px);line-height:1.8}
#vpWorkbench pre,#vpPlatformPanel pre{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;max-width:100%}
#vpWorkbench input,#vpWorkbench select,#vpWorkbench textarea,#vpPlatformPanel input,#vpPlatformPanel select,#vpPlatformPanel textarea{max-width:100%;min-width:0}
#vpWorkbench .vpw-panel,#vpWorkbench .vpw-plc{min-width:0;min-height:0}
#vpWorkbench .vpw-panel>*,#vpWorkbench .vpw-plc>*{min-width:0}
#vpWorkbench .vpw-card,#vpWorkbench .vpw-logic-card{overflow-wrap:anywhere}
#vpWorkbench button,#vpDemoLibrary button,#vpPlatformPanel button{line-height:1.35;white-space:normal}
@media(min-width:901px) and (max-width:1100px){.mode-tabs{display:flex!important;gap:4px;flex-shrink:0}.brand{min-width:145px}.top-actions{gap:4px}}
@media(max-width:900px){#vpWorkbench .vpw-body{grid-template-columns:minmax(0,1fr)}#vpWorkbench .vpw-side{max-height:32vh;border-right:0;border-bottom:1px solid #29475f}#vpWorkbench .vpw-main{min-height:0}#vpWorkbench .vpw-panel,#vpWorkbench .vpw-plc{grid-template-columns:minmax(0,1fr)}}
@media(max-width:900px){.mode-tabs{display:flex!important;gap:4px}.sim-top{overflow-x:auto}}@media(max-width:760px){.mode-tabs{display:flex;gap:4px}.sim-top{overflow-x:auto}.top-actions{flex-shrink:0}}

@media(min-width:801px){.workspace.palette-hidden{grid-template-columns:minmax(0,1fr) 290px}.workspace.palette-hidden .palette{display:none}}
body.simulator-page.light{--bg:#f2f6fb;--panel:#fff;--panel2:#eaf0f7;--line:#cbd7e5;--text:#15273a;--muted:#4e647a;background:#f2f6fb;color:#15273a}
body.simulator-page.light .sim-top,body.simulator-page.light .toolbar,body.simulator-page.light .palette,body.simulator-page.light .inspector,body.simulator-page.light .sim-footer{background:#f8fbff!important;color:#15273a!important;border-color:#cbd7e5!important}
body.simulator-page.light .mode,body.simulator-page.light .top-actions button,body.simulator-page.light .top-actions a,body.simulator-page.light .toolbar button,body.simulator-page.light .cat-tabs button,body.simulator-page.light .instrument-grid button{background:#eaf1f8!important;color:#233b52!important;border-color:#c1d0df!important}
body.simulator-page.light .mode.active,body.simulator-page.light .mode:hover,body.simulator-page.light .top-actions button:hover,body.simulator-page.light .top-actions a:hover{background:#dcecff!important;color:#10263a!important;border-color:#4b91c9!important}
body.simulator-page.light .canvas-wrap{background:#f8fbff!important;background-image:radial-gradient(#d4e1ed .8px,transparent .8px)!important;background-size:20px 20px!important}
body.simulator-page.light .component text{fill:#15273a!important}
body.simulator-page.light .component .symbol,body.simulator-page.light .component .lead{stroke:#087ea4!important}
body.simulator-page.light .component .symbol-label{fill:#087ea4!important}
body.simulator-page.light .pin{fill:#087ea4!important;stroke:#f8fbff!important}
body.simulator-page.light .prop input,body.simulator-page.light .prop select,body.simulator-page.light #componentSearch,body.simulator-page.light .toolbar input{background:#fff!important;color:#15273a!important;border-color:#c1d0df!important}
body.simulator-page.light .console,body.simulator-page.light .calc-panel,body.simulator-page.light .meter{background:#fff!important;color:#17543b!important;border-color:#c1d0df!important}

.wire-bend-handle{fill:var(--amber);stroke:#fff;stroke-width:1.5;cursor:move;pointer-events:all}.wire-bend-handle:hover{r:7;filter:url(#glow)}
/* Keep the active wire source visible without locking the component. */
.component.wire-source .body,.component.wire-source .symbol{filter:url(#glow);stroke:#ffbd69!important;stroke-width:2.8!important}
.component.wire-source .pin{fill:#ffbd69!important;stroke:#fff!important;stroke-width:2!important}
.component.wire-source{cursor:grab!important}
.component:active{cursor:grabbing}

/* Simulation state: unmistakable colours distinguish running from stopped. */
.toolbar #runBtn{background:#102238;color:var(--muted);border:1px solid #31516d;transition:background .16s,border-color .16s,box-shadow .16s,color .16s}
.toolbar #runBtn.is-running{background:#0b4a32;color:#eafff4;border:1px solid #3be28e;box-shadow:0 0 0 1px #3be28e55,0 0 14px #20c97745}
.toolbar #stopBtn{border-color:#633541;color:#ff9da5}
.toolbar #stopBtn.is-stopped{background:#541d29;color:#fff0f1;border-color:#ff6574;box-shadow:0 0 0 1px #ff657455}
.status{display:inline-flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid #294258;border-radius:999px;background:#0b1a29;min-width:116px;justify-content:center}
.status-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#ff6574;box-shadow:0 0 0 3px #ff657422;flex:0 0 auto}
.status[data-state="running"]{color:#8dffc1;border-color:#2e9d6c;background:#09291d}
.status[data-state="running"] .status-dot{background:#3be28e;box-shadow:0 0 0 3px #3be28e25,0 0 10px #3be28e99}
.status[data-state="error"]{color:#ff9da5;border-color:#a43c4c;background:#35141b}
.status[data-state="error"] .status-dot{background:#ff6574;box-shadow:0 0 0 3px #ff657425,0 0 10px #ff657499}
.status-label{white-space:nowrap}
body.simulator-page.light .status{background:#edf3f8;border-color:#b7c8d8;color:#9d2936}
body.simulator-page.light .status[data-state="running"]{background:#e1f8ec;border-color:#4aaf7c;color:#146c40}
body.simulator-page.light .status[data-state="error"]{background:#fff0f1;border-color:#d96a78;color:#9d2936}

/* Wire inspector engineering note: distinguish display thickness from electrical sizing. */
.wire-prop-note{display:block;color:var(--amber);font-size:9px;line-height:1.45;margin-top:2px}

.wire-tool{display:flex;align-items:center;position:relative;flex:0 0 auto}.wire-tool>#wireBtn{min-width:58px;border-top-right-radius:0;border-bottom-right-radius:0}.wire-tool>#wireMenuBtn{margin-left:-6px;padding-left:8px;padding-right:8px;border-top-left-radius:0;border-bottom-left-radius:0}.wire-tool>#wireMenuBtn[aria-expanded="true"]{color:var(--text);border-color:#386080;background:#11263c}
/* Toolbar Wire dropdown: configure connection defaults before drawing; wires are not palette components. */
.wire-tool{position:relative;flex:0 0 auto}.wire-tool>#wireBtn{min-width:72px}.wire-menu[hidden]{display:none!important}.wire-menu{position:fixed;z-index:9500;top:calc(100% + 8px);left:0;width:260px;max-height:min(72vh,560px);overflow-y:auto;display:grid;grid-template-columns:1fr;gap:6px;padding:14px;background:#091827;border:1px solid #31516d;border-radius:12px;box-shadow:0 18px 45px #000b;color:var(--text)}.wire-menu-title{font:800 10px ui-monospace,monospace;letter-spacing:.13em;color:var(--cyan);margin-bottom:3px}.wire-menu label{font-size:10px;color:var(--muted);margin-top:3px}.wire-menu input,.wire-menu select{width:100%;min-height:36px;padding:7px 9px;background:#06101b;color:var(--text);border:1px solid var(--line);border-radius:7px}.wire-menu input[type=color]{height:38px;padding:3px}.wire-menu small{font-size:9px;line-height:1.45;color:var(--muted);margin:4px 0}.wire-menu .wire-start-btn{width:100%;background:#0b4a32;color:#eafff4;border-color:#3be28e;font-weight:800}.wire-menu .wire-start-btn:hover{background:#126440}@media(max-width:520px){.wire-menu{position:fixed;top:140px;left:10px;width:min(300px,calc(100vw - 20px));max-height:calc(100dvh - 170px)}}

.inspector-warning{border:1px solid #bf665f;background:#351d24;border-radius:7px;padding:9px;color:#ffd7d7}.inspector-warning p{margin:6px 0;font-size:11px;line-height:1.45}.inspector-warning b{color:#ffaaa8}

/* Keep the large component catalogue responsive: the palette renders a bounded result window. */
.palette-results-note{padding:8px;margin:4px 0 8px;border:1px solid var(--line);border-radius:7px;color:var(--muted);font-size:10px;line-height:1.4}.vpw-panel-actions button:disabled{opacity:.42;cursor:not-allowed;filter:saturate(.5)}

/* Consolidated toolbar: functional controls grouped by task; the canvas remains the focus. */
.toolbar{min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:#31516d #091522}
.toolbar-group{display:flex;align-items:center;gap:6px;flex:0 0 auto;min-width:max-content;padding:0 8px 0 0;margin-right:2px;border-right:1px solid var(--line)}
.toolbar-group:last-child{border-right:0;margin-right:0;padding-right:0}
.toolbar-group[role="group"]::before{content:attr(aria-label);font-size:8px;letter-spacing:.08em;text-transform:uppercase;color:#718ba5;white-space:nowrap;margin-right:2px}
.toolbar-group .status{min-width:100px}
.toolbar-group .academy-toolbar-link{display:inline-flex;align-items:center;padding:7px 10px;border:1px solid #31516d;border-radius:8px;color:#9fe8ff;text-decoration:none;font-size:11px;white-space:nowrap;background:#0d1b2b}
.toolbar-group .academy-toolbar-link:hover{border-color:#46d9ff;background:#102b3d}
.toolbar-group label{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--muted);white-space:nowrap}
.toolbar-group label input[type="number"]{width:58px;min-width:58px}
.toolbar-group .symbol-style-control select{max-width:125px}
@media(max-width:800px){.toolbar-group[role="group"]::before{display:none}.toolbar{gap:6px;padding-left:8px;padding-right:8px}.toolbar-group{gap:5px}.toolbar-group button{padding:7px 9px}}
@media(max-width:520px){.toolbar{overflow-x:auto}.toolbar-group .academy-toolbar-link{font-size:10px}.toolbar-group .status{min-width:92px}.sim-app{grid-template-rows:64px 48px minmax(0,1fr) 28px}}

/* Physical prototyping-board connection points stay small enough to preserve the board layout. */
.component .breadboard-pin{r:2.7;fill:#27343b;stroke:#8b9aa0;stroke-width:1;}
.component .breadboard-pin:hover{r:5;fill:#35d5ff;stroke:#fff;stroke-width:1.5;}
.component .board-pin{r:3.5;fill:#d7e4e7;stroke:#263d43;stroke-width:1.2;}
.component .board-pin:hover{r:6;fill:#ffc45c;stroke:#fff;stroke-width:1.5;}

/* Live electrical state feedback from the MNA engine */
.component.energized .symbol{stroke:#16a34a;filter:drop-shadow(0 0 4px rgba(22,163,74,.55))}
.component.tripped .symbol{stroke:#dc2626;filter:drop-shadow(0 0 5px rgba(220,38,38,.65))}

/* Large, terminal-first product faces replace tiny schematic blocks for physical-device components. */
.component .physical-device-face{pointer-events:none}
.component .physical-device-photo,.component .physical-device-fallback{pointer-events:none}
.component .terminal-label{font-size:11px;font-weight:800;fill:#f4fbff;paint-order:stroke;stroke:#06101b;stroke-width:2.5px;stroke-linejoin:round}
.component .pin{r:6;stroke-width:2}
.component .pin:hover{r:9}
.component.selected .physical-device-photo,.component.selected .physical-device-fallback{filter:drop-shadow(0 0 3px rgba(53,213,255,.45))}

/* Named local projects and recovery controls; kept in the existing toolbar, not a new sidebar. */
.vp-project-name{width:min(190px,18vw);min-width:110px;background:var(--panel-bg,#0d1722);color:var(--text,#eef6ff);border:1px solid var(--line,#294253);border-radius:6px;padding:7px 9px;font:inherit;font-size:12px}.vp-project-name:focus{outline:2px solid #65d8ff;outline-offset:1px}.vp-project-dialog{width:min(680px,calc(100vw - 28px));max-height:min(78vh,760px);overflow:auto;background:#0b1420;color:#eaf5ff;border:1px solid #31506a;border-radius:14px;padding:20px;box-shadow:0 24px 90px #000a}.vp-project-dialog::backdrop{background:#020812bb;backdrop-filter:blur(3px)}.vp-project-dialog h2{margin:0 0 6px;font-size:20px}.vp-project-help{margin:0 0 16px;color:#9db4c7;font-size:12px}.vp-project-list{display:grid;gap:8px;margin:12px 0 18px}.vp-project-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px;border:1px solid #203b50;border-radius:9px;background:#101e2b}.vp-project-row strong{display:block;overflow-wrap:anywhere}.vp-project-row small{display:block;color:#9db4c7;margin-top:4px}.vp-project-actions{display:flex;flex-wrap:wrap;gap:6px}.vp-project-dialog button{border:1px solid #35536a;background:#172b3b;color:#edf7ff;border-radius:7px;padding:7px 10px;cursor:pointer}.vp-project-dialog button.primary{background:#087ba6;border-color:#20b7e6}.vp-project-dialog button.danger{border-color:#844b55;color:#ffd8de}.vp-project-empty{padding:18px;border:1px dashed #35536a;border-radius:9px;color:#a8bdcc;text-align:center}.vp-project-dialog-footer{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}


/* Independent desktop panel toggles; the canvas takes the released space. */
.workspace.palette-hidden{grid-template-columns:minmax(0,1fr) 290px}
.workspace.inspector-hidden{grid-template-columns:260px minmax(0,1fr)}
.workspace.palette-hidden.inspector-hidden{grid-template-columns:minmax(0,1fr)}
.workspace.palette-hidden #palette,.workspace.inspector-hidden #inspectorPanel{display:none!important}
#inspectorBtn[aria-expanded="false"],#paletteBtn[aria-expanded="false"]{border-color:var(--cyan);color:var(--text);background:#123047}
@media(max-width:800px){
 .workspace.palette-hidden,.workspace.inspector-hidden,.workspace.palette-hidden.inspector-hidden{grid-template-columns:minmax(0,1fr)}
 .workspace.palette-hidden #palette{display:block!important;transform:translateX(-105%)}
 .workspace.inspector-hidden #inspectorPanel{display:none!important}
}


@media(max-width:800px){
 .workspace:not(.inspector-hidden) #inspectorPanel{position:fixed;z-index:9200;right:0;top:100px;bottom:24px;width:min(330px,90vw);max-height:none;display:block!important;overflow:auto;background:#081321;border-left:1px solid var(--line);box-shadow:-18px 0 48px #0009}
}

/* Independent sidebar toggles with consistent responsive behavior. */
@media (min-width:1001px){
 .workspace{grid-template-columns:260px minmax(0,1fr) 290px}
 .workspace.palette-hidden{grid-template-columns:minmax(0,1fr) 290px}
 .workspace.inspector-hidden{grid-template-columns:260px minmax(0,1fr)}
 .workspace.palette-hidden.inspector-hidden{grid-template-columns:minmax(0,1fr)}
 .workspace.palette-hidden #palette,.workspace.inspector-hidden #inspectorPanel{display:none!important}
}
@media (max-width:1000px){
 .workspace{grid-template-columns:minmax(0,1fr)!important;position:relative}
 .workspace #palette{position:fixed!important;z-index:9300;left:0;top:108px;bottom:24px;width:min(290px,88vw);max-height:none;transform:translateX(-110%);transition:transform .18s ease;box-shadow:18px 0 42px #0009}
 .workspace #palette.open{transform:translateX(0)}
 .workspace #inspectorPanel{position:fixed!important;z-index:9301;right:0;top:108px;bottom:24px;width:min(330px,90vw);max-height:none;display:block!important;transform:translateX(0);box-shadow:-18px 0 42px #0009}
 .workspace.inspector-hidden #inspectorPanel{display:none!important}
 .workspace.palette-hidden #palette{display:block!important;transform:translateX(-110%)}
}

/* Arduino Uno header labels use compact vertical text so adjacent pin names remain legible. */
.component .arduino-terminal-label{font-size:7px;font-weight:900;letter-spacing:0;paint-order:stroke;stroke:#176b58;stroke-width:1.4px;stroke-linejoin:round}

/* Microcontroller runtime feedback for LEDs wired into the schematic topology. */
.component.mcu-led-lit{color:#ff435d;filter:drop-shadow(0 0 5px #ff435d);}