:root {
  color-scheme: dark;
  --navy: #0b1220;
  --navy-2: #101b2e;
  --navy-3: #15243b;
  --blue: #2563eb;
  --gold: #d4af37;
  --cyan: #22d3ee;
  --ivory: #f8fafc;
  --muted: #9fb0c5;
  --border: #2d4662;
  --good: #34d399;
  --danger: #fb7185;
  --shadow: 0 16px 38px rgb(0 0 0 / 28%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--navy); }
body { margin: 0; min-width: 320px; min-height: 100vh; background: radial-gradient(circle at 50% -20%, #1a4369 0, var(--navy) 42rem); color: var(--ivory); }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, .placed-component:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.schematic .placed-component { box-sizing:border-box; width:56px; min-width:56px; height:58px; min-height:58px; padding:0; gap:0; overflow:visible; }
.schematic .placed-component .part-reference { position:absolute; left:50%; top:-12px; transform:translateX(-50%); }
.schematic .placed-component .part-value { position:absolute; left:50%; top:59px; transform:translateX(-50%); max-width:8rem; }
.schematic-symbol { display:block; width:56px; height:58px; overflow:visible; pointer-events:none; }
.schematic-symbol .symbol-stroke { fill:none; stroke:#d8e8f5; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.schematic-symbol .symbol-fill { fill:#d8e8f5; stroke:#d8e8f5; stroke-width:1.2; stroke-linejoin:round; }
.schematic-symbol .symbol-text { fill:#f8fafc; font:700 8px system-ui,sans-serif; text-anchor:middle; dominant-baseline:middle; }
button:disabled { cursor: not-allowed; opacity: .54; }
a { color: var(--cyan); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 50; left: 1rem; top: -5rem; padding: .6rem .8rem; border-radius: .35rem; background: var(--gold); color: #1a1607; font-weight: 800; }
.skip-link:focus { top: 1rem; }

.identity-header { min-height: 5.65rem; display: flex; align-items: center; gap: 1rem; justify-content: space-between; padding: .7rem 1.4rem; border-bottom: 1px solid var(--border); background: rgb(7 18 33 / 92%); }
.identity, .header-actions, .command-bar, .menu-buttons, .project-actions, .view-tabs, .canvas-toolbar, .output-tabs, .inspector-tabs, footer { display: flex; align-items: center; }
.identity { gap: .8rem; min-width: 0; }
.corporate-logo { display: block; flex: 0 1 auto; width: clamp(9rem, 16vw, 13rem); height: auto; aspect-ratio: 3.2 / 1; object-fit: contain; }
.product-brand { min-width: 0; }
.identity-divider { height: 3.2rem; width: 1px; background: var(--gold); opacity: .75; margin: 0 .65rem; }
h1 { margin: 0; font-size: clamp(1.3rem, 2.3vw, 2rem); line-height: 1; letter-spacing: -.04em; white-space: nowrap; }
h1 span { color: var(--cyan); }
.identity p { margin: .36rem 0 0; color: var(--cyan); font-size: .67rem; letter-spacing: .12em; }
.identity p small { margin-left: 1rem; color: var(--ivory); letter-spacing: 0; }
.header-actions { justify-content: flex-end; gap: .65rem; }
.global-search { width: min(22vw, 21rem); display: flex; align-items: center; gap: .5rem; padding: .56rem .7rem; border: 1px solid #426486; border-radius: .45rem; color: var(--muted); }
.global-search input, .search-box input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ivory); min-width: 0; }
.select-wrap select { min-width: 6.9rem; padding: .55rem .65rem; border: 1px solid var(--border); border-radius: .4rem; background: var(--navy-2); color: var(--ivory); }
.icon-button, .panel-close, .mini-heading button, #bot-collapse { display: grid; place-items: center; border: 0; background: transparent; color: var(--ivory); }
.icon-button { width: 2.25rem; height: 2.25rem; border-left: 1px solid var(--border); font-size: 1.35rem; }

.command-bar { min-height: 3.65rem; gap: 1rem; justify-content: space-between; padding: .5rem 1.4rem; border-bottom: 1px solid var(--border); background: rgb(10 25 44 / 96%); }
.menu-buttons, .project-actions { gap: .3rem; flex-wrap: wrap; }
.menu-button, .secondary-button, .outline-button, .toolbar-button, .view-tab, .output-tab, .inspector-tab { border: 1px solid transparent; border-radius: .35rem; padding: .52rem .7rem; background: transparent; color: var(--ivory); }
.menu-button:hover:not(:disabled), .secondary-button:hover, .outline-button:hover, .toolbar-button:hover, .view-tab:hover, .output-tab:hover, .inspector-tab:hover { border-color: var(--border); background: #193250; }
.disabled-command { color: var(--muted); }
.gold-button { padding: .62rem .95rem; border: 0; border-radius: .35rem; color: #211a06; background: linear-gradient(135deg, #f5cf65, var(--gold)); font-weight: 800; }
.secondary-button { border-color: var(--border); background: #14253c; }

.workspace { display: grid; grid-template-columns: minmax(13rem, 18rem) minmax(30rem, 1fr) minmax(15rem, 19rem); gap: .65rem; min-height: calc(100vh - 13.5rem); padding: .65rem; }
.panel { border: 1px solid var(--border); border-radius: .45rem; background: linear-gradient(150deg, rgb(20 38 62 / 98%), rgb(10 22 38 / 98%)); box-shadow: var(--shadow); }
.panel-heading { display: flex; align-items: center; justify-content: space-between; min-height: 2.5rem; padding: 0 .8rem; border-bottom: 1px solid var(--border); }
.panel-heading h2 { margin: 0; font-size: .95rem; }
.panel-close { font-size: 1.4rem; }
.library-panel, .inspector-panel { overflow: hidden; min-width: 0; }
.library-panel.collapsed, .inspector-panel.collapsed { display: none; }
.search-box { display: flex; align-items: center; gap: .45rem; margin: .72rem; padding: .52rem .6rem; border: 1px solid var(--border); border-radius: .35rem; color: var(--muted); }
.library-note { margin: 0 .72rem .55rem; padding: .5rem .55rem; border-left: 3px solid var(--gold); color: #f3d990; font-size: .69rem; line-height: 1.4; background: rgb(212 175 55 / 8%); }
.category-filters { display: grid; gap: .2rem; margin: 0 .55rem .4rem; }.category-filter { display: flex; align-items: center; width: 100%; padding: .4rem .55rem; border: 1px solid transparent; border-radius: .28rem; background: transparent; color: var(--muted); text-align: left; font-size: .7rem; }.category-filter:hover { border-color: var(--border); background: #173555; }.category-filter.active { color: var(--ivory); border-color: #2879b7; background: #1d5688; font-weight: 700; }
.component-list { list-style: none; display: grid; gap: .15rem; max-height: calc(100vh - 25rem); margin: 0; padding: .25rem .4rem; overflow: auto; }
.component-item { display: flex; width: 100%; gap: .55rem; align-items: center; padding: .55rem .5rem; border: 1px solid transparent; border-radius: .35rem; text-align: left; background: transparent; color: var(--ivory); }
.component-item:hover, .component-item.selected { border-color: #2e6da3; background: #16416d; }
.component-icon { color: var(--cyan); font-size: 1.1rem; }
.component-item strong, .component-item small { display: block; }
.component-item strong { font-size: .77rem; }
.component-item small { margin-top: .14rem; color: var(--muted); font-size: .64rem; }
.empty-list { padding: 1rem .6rem; color: var(--muted); font-size: .8rem; }
.selected-library-part { display: grid; gap: .34rem; margin: .65rem; padding: .7rem; border: 1px solid var(--border); border-radius: .4rem; background: #101f33; }
.selected-library-part p, .selected-library-part span { margin: 0; color: var(--muted); font-size: .72rem; }
.selected-library-part strong { font-size: .84rem; overflow-wrap: anywhere; }
.outline-button { border-color: #2f77ac; background: #122943; font-weight: 700; }

.canvas-area { display: grid; grid-template-rows: auto auto minmax(20rem, 1fr) minmax(9rem, .42fr) auto; gap: .5rem; min-width: 0; }
.view-tabs { gap: .35rem; overflow: auto hidden; }
.view-tab { flex: 0 0 auto; border-color: var(--border); background: #10253e; }
.view-tab.active { color: #082037; border-color: #58c8ff; background: linear-gradient(130deg, #8bd4ff, #45a8e8); font-weight: 800; }
.save-state { margin-left: auto; padding-right: .25rem; color: #f7cf62; font-size: .76rem; white-space: nowrap; }
.save-state.saved { color: var(--good); }
.canvas-toolbar { gap: .28rem; min-height: 2.65rem; padding: .3rem .5rem; border: 1px solid var(--border); border-radius: .45rem; background: #10253e; }
.toolbar-button { display: inline-flex; align-items: center; gap: .3rem; padding: .38rem .5rem; color: var(--muted); }
.toolbar-button.active { background: #23669a; color: var(--ivory); }
.canvas-toolbar > strong { color: var(--ivory); font-size: .75rem; min-width: 3rem; text-align: center; }
.canvas-toolbar label { padding: 0 .25rem; color: var(--muted); font-size: .75rem; white-space: nowrap; }
.canvas-toolbar input { accent-color: var(--cyan); }
.toolbar-spacer { flex: 1; }
.design-canvas, .mini-canvas { position: relative; overflow: hidden; isolation: isolate; border: 1px solid var(--border); border-radius: .45rem; background: #061624; min-height: 0; }
.design-canvas { min-height: 20rem; transform: translateZ(0); touch-action: none; }
.canvas-scene { position: absolute; inset: 0; transform: translate(var(--pan-x, 0), var(--pan-y, 0)); }
.grid-enabled { background-color: #071a2b; background-image: linear-gradient(#1a425c 1px, transparent 1px), linear-gradient(90deg, #1a425c 1px, transparent 1px); background-size: 20px 20px; }
.canvas-label { position: absolute; z-index: 4; left: .7rem; top: .55rem; padding: .28rem .45rem; border-radius: .3rem; background: rgb(2 12 22 / 80%); color: var(--muted); font-size: .68rem; }
.reconciliation-notice { position: absolute; z-index: 5; right: .7rem; top: .55rem; display: grid; gap: .18rem; max-width: min(25rem, 54%); padding: .45rem .55rem; border: 1px solid #c88f36; border-radius: .35rem; background: rgb(74 45 7 / 94%); color: #ffe4a8; font-size: .68rem; line-height: 1.35; }.reconciliation-notice span { color: #f7d990; }

.breadboard-art { position:absolute; z-index:0; inset:0; width:100%; height:100%; pointer-events:none; }
.board-hole-target { pointer-events:none; }
.board-hole-hit { fill:transparent; stroke:transparent; pointer-events:none; }
.design-canvas.is-placement-mode .board-hole-target { pointer-events:all; cursor:crosshair; }
.design-canvas.is-placement-mode .board-hole-target:hover .board-hole-hit,
.design-canvas.is-placement-mode .board-hole-target:focus .board-hole-hit { fill:rgb(40 200 232 / 35%); stroke:#28c8e8; stroke-width:1.3; }
.board-plate { fill:#ddd4c1; stroke:#ad9a78; stroke-width:1.2; filter:drop-shadow(0 3px 7px rgb(0 0 0 / 35%)); }
.board-trench { stroke:#aaa18f; stroke-width:9; opacity:.85; }
.board-rail-positive,.board-rail-negative { fill:none; stroke-width:2.5; }
.board-rail-positive { stroke:#d74242; }.board-rail-negative { stroke:#407cd0; }
.board-rail-break { stroke:#8b806d; stroke-width:1; stroke-dasharray:2 3; }
.board-hole { fill:#5c574d; stroke:#847a68; stroke-width:.55; }.board-hole.rail-hole { fill:#efe3ca; stroke:#9f8a65; stroke-width:1; }
.board-markings { fill:#554a39; font:700 7px system-ui,sans-serif; text-anchor:middle; }.board-markings text:first-child,.board-markings text:nth-child(3) { fill:#bc3434; font-size:11px; }.board-markings text:nth-child(2),.board-markings text:nth-child(4) { fill:#3269b5; font-size:11px; }
.breadboard-wire-layer { z-index:1; }.wire-layer .jumper-wire { stroke-width:4; stroke-linecap:round; filter:drop-shadow(0 2px 1px rgb(0 0 0 / 35%)); }
.breadboard-pin { position:absolute; z-index:3; left:var(--pin-x); top:var(--pin-y); width:13px; height:13px; transform:translate(-50%,-50%); border:2px solid #eef9ff; border-radius:50%; padding:0; background:#28c8e8; box-shadow:0 0 0 2px #061624,0 1px 5px rgb(0 0 0 / 45%); }
.breadboard-pin.net-power { background:#ed514f; }.breadboard-pin.net-ground { background:#1c2631; border-color:#f3f6fa; }.breadboard-pin.selected { width:18px; height:18px; box-shadow:0 0 0 3px #f5c84b,0 1px 7px rgb(0 0 0 / 55%); }
.breadboard-pin:focus-visible { outline:3px solid #f5c84b; outline-offset:3px; }.breadboard-pin.is-net-highlight { box-shadow:0 0 0 4px #f5c84b; }.physical-pin-name { position:absolute; left:10px; top:-17px; white-space:nowrap; padding:1px 3px; border-radius:3px; background:#092238; color:#f5d774; font:600 9px system-ui,sans-serif; }
.breadboard-controls { display:grid; gap:.5rem; padding:.75rem; border-top:1px solid var(--border); }
.breadboard-controls h3,.breadboard-controls p { margin:.1rem 0; }.breadboard-controls p { color:var(--muted); font-size:.7rem; }
.breadboard-controls input,.breadboard-controls select { min-width:0; width:100%; padding:.45rem; border:1px solid var(--border); border-radius:.3rem; background:#091928; color:var(--ivory); }
.breadboard-list { display:grid; gap:.25rem; max-height:7rem; overflow:auto; list-style:none; margin:0; padding:0; font-size:.7rem; color:var(--muted); }
.breadboard-list li { display:flex; align-items:center; justify-content:space-between; gap:.4rem; }.breadboard-list li span { overflow-wrap:anywhere; }.breadboard-list button { color:#ffc5c5; }
.wire-layer { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.wire-layer path { fill: none; stroke: #e7f5ff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 1px rgb(0 0 0 / 35%)); }
.wire-layer .net-power { stroke: #e94f4f; stroke-width: 4; }.wire-layer .net-ground { stroke: #111827; stroke-width: 4; }.wire-layer .net-signal { stroke: #3fc2e8; stroke-width: 3; }
.schematic .wire-layer path { stroke: #cfe8ff; stroke-width: 2; }
.schematic .schematic-pin-terminal circle { fill: #cfe8ff; stroke: #0b1220; stroke-width: 1; }
.schematic .schematic-pin-terminal.net-power circle { fill: #ed514f; }
.schematic .schematic-pin-terminal.net-ground circle { fill: #94a3b8; }
.schematic .schematic-pin-terminal text { fill: #d8e8f5; font: 600 8px system-ui, sans-serif; paint-order: stroke; stroke: #0b1220; stroke-width: 2px; stroke-linejoin: round; }
.schematic-wire-layer { pointer-events:none; }
.schematic-pin-hit { fill:transparent; stroke:transparent; pointer-events:none; }
.design-canvas.schematic.is-wire-mode .schematic-wire-layer .schematic-pin-target { pointer-events:all; cursor:crosshair; }
.design-canvas.schematic.is-wire-mode .schematic-pin-hit { pointer-events:all; }
.schematic-pin-target.is-wire-origin .schematic-pin-dot { fill:#f5c84b; stroke:#fff3c4; stroke-width:1; }
#schematic-wire-status { color:var(--cyan); font-size:.72rem; }.pcb { background: #06251c; }.pcb .canvas-label { color: #cfffe6; }
.pcb-preview-svg { position:absolute; z-index:0; inset:0; width:100%; height:100%; pointer-events:none; }
.pcb-board-outline { fill:#08784f; stroke:#e3c85d; stroke-width:2; filter:drop-shadow(0 3px 6px rgb(0 0 0 / 35%)); }
.pcb-board-caption { fill:#e0f5ea; font:600 8px system-ui,sans-serif; }
.pcb-empty-note { fill:#ddf7e8; font:600 10px system-ui,sans-serif; text-anchor:middle; }
.pcb-footprint-outline { fill:rgb(11 18 32 / 22%); stroke:#d5c575; stroke-width:1; stroke-dasharray:3 2; }
.pcb-footprint-hit { pointer-events:all; cursor:grab; touch-action:none; }
.pcb-footprint-hit:active { cursor:grabbing; }
.pcb-footprint-hit:focus-visible { outline:2px solid #22d3ee; outline-offset:2px; }
.pcb-footprint-hit:hover .pcb-footprint-outline { stroke:#22d3ee; stroke-width:1.7; }
.pcb-footprint-label { fill:#f1f6e7; font:700 7px system-ui,sans-serif; text-anchor:middle; paint-order:stroke; stroke:#123227; stroke-width:2px; stroke-linejoin:round; }
.pcb-route { fill:none; stroke:#e44646; stroke-linecap:round; stroke-linejoin:round; }
.pcb-route.net-ground { stroke:#111923; }
.pcb-route.net-signal { stroke:#42b8e8; }
.pcb-pad-smd { fill:#d6b45a; stroke:#f7df92; stroke-width:.8; }
.pcb-pad-through-hole { fill:#e0bf5f; stroke:#fff0a6; stroke-width:.8; }
.pcb-pad-drill { fill:#06251c; stroke:#627a6c; stroke-width:.45; }
.pcb-pad-label { fill:#f4f3d9; font:600 4px system-ui,sans-serif; text-anchor:middle; dominant-baseline:middle; }
.pcb-airwire-layer { z-index:1; pointer-events:none; }
.pcb-airwire-layer .pcb-airwire { fill:none; stroke-width:1.4; stroke-dasharray:4 4; opacity:.8; }
.placed-component { position: absolute; z-index: 2; left: var(--x); top: var(--y); display: grid; justify-items: center; gap: .16rem; min-width: 3.7rem; padding: .18rem .35rem; transform: scale(var(--canvas-scale, 1)); transform-origin: center; border: 1px solid transparent; border-radius: .35rem; color: var(--ivory); background: transparent; text-shadow: 0 1px 2px #000; }
.placed-component:hover, .placed-component.is-selected { z-index: 3; border-color: var(--gold); background: rgb(212 175 55 / 14%); }
.part-reference { color: var(--ivory); font-weight: 800; font-size: .7rem; }.part-body { display: grid; place-items: center; min-width: 2.6rem; min-height: 1.5rem; padding: .1rem .3rem; border: 1px solid #d7bd78; border-radius: .3rem; background: #283a4e; color: var(--gold); font-size: 1rem; font-weight: 800; }.part-value { max-width: 5.5rem; overflow: hidden; color: var(--muted); font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
.diode-led-red .part-body { border-color: #fa6161; color: #ff4f58; font-size: 1.4rem; }.power-dc-source .part-body { border-color: #f0c66d; color: #f7d485; }.ground-signal .part-body { background: transparent; border: 0; color: #bde0ff; font-size: 1.55rem; }.passive-resistor .part-body { color: #e5a869; }
.overview-row { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; min-height: 9rem; }.mini-view { display: grid; grid-template-rows: auto 1fr; min-width: 0; border: 1px solid var(--border); border-radius: .4rem; overflow: hidden; background: #0c1c30; }.mini-heading { display: flex; align-items: center; justify-content: space-between; min-height: 2.1rem; padding: 0 .6rem; border-bottom: 1px solid var(--border); font-size: .72rem; }.mini-heading button { font-size: 1rem; }.mini-canvas { border: 0; border-radius: 0; min-height: 6.5rem; }.mini-canvas .placed-component { transform: scale(.57); transform-origin: top left; }.mini-canvas .breadboard-board { display: none; }
.output-panel { overflow: hidden; }.output-tabs { gap: .2rem; padding: .15rem .35rem; border-bottom: 1px solid var(--border); }.output-tab { border-radius: .2rem; color: var(--muted); font-size: .72rem; }.output-tab.active { color: var(--ivory); background: #1f5b91; }.output-panel pre { min-height: 5rem; max-height: 9rem; margin: 0; padding: .7rem; overflow: auto; color: #87d6ff; white-space: pre-wrap; font: .72rem/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; }.output-panel #issue-list { color: #f7d990; }

.inspector-tabs { gap: .1rem; padding: .32rem .42rem; border-bottom: 1px solid var(--border); }.inspector-tab { border-radius: .25rem; color: var(--muted); font-size: .72rem; }.inspector-tab.active { color: var(--ivory); background: #285e95; }.property-form, .simulation-control { display: grid; gap: .65rem; padding: .8rem; }.property-form label { display: grid; gap: .25rem; color: var(--muted); font-size: .72rem; }.property-form input { min-width: 0; padding: .48rem .55rem; border: 1px solid var(--border); border-radius: .32rem; background: #091928; color: var(--ivory); }.property-form input[readonly] { color: #aabed4; }.hidden { display: none !important; }.simulation-control { border-top: 1px solid var(--border); }.simulation-control h3 { margin: 0; font-size: .88rem; }.simulation-control p { margin: 0; color: var(--muted); font-size: .72rem; line-height: 1.4; }.run-button { min-height: 2.55rem; border: 0; border-radius: .35rem; background: linear-gradient(135deg, #42e7a0, #13aa6a); color: #042918; font-weight: 800; }.limit-note { color: #f3d990 !important; }
.connection-form { display: grid; gap: .4rem; }.connection-form label, .example-control label { color: var(--muted); font-size: .72rem; }.connection-form select, .example-control select { min-width: 0; width: 100%; padding: .45rem; border: 1px solid var(--border); border-radius: .3rem; background: #091928; color: var(--ivory); }.net-list, .net-list ul { display: grid; gap: .25rem; margin: 0; padding-left: 1rem; color: var(--muted); font-size: .7rem; }.net-list { max-height: 12rem; overflow: auto; }.net-list li { overflow-wrap: anywhere; }.net-list button { margin-left: .3rem; padding: 0 .3rem; color: #ffc5c5; }
.net-list .net-select { margin: 0; padding: .1rem .3rem; color: var(--cyan); }.net-list .net-select.active { border-color: var(--gold); background: rgb(212 175 55 / 14%); color: var(--gold); }.placed-component.is-net-highlight { border-color: var(--cyan); background: rgb(34 211 238 / 20%); box-shadow: 0 0 0 2px rgb(34 211 238 / 26%); }.wire-layer .is-net-highlight { stroke: #f2c94c; stroke-width: 7; filter: drop-shadow(0 0 5px #f2c94c); }

.bot-panel { position: fixed; z-index: 10; right: 1rem; bottom: 1rem; width: min(21rem, calc(100vw - 2rem)); border: 1px solid #315c80; border-radius: 1.4rem; overflow: hidden; background: linear-gradient(150deg, #112b47, #081627); box-shadow: var(--shadow); }.bot-panel header { display: flex; gap: .55rem; align-items: center; padding: .7rem .8rem; border-bottom: 1px solid var(--border); }.bot-orb { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border: 1px solid var(--cyan); border-radius: 50%; color: var(--cyan); }.bot-panel header div { display: grid; flex: 1; }.bot-panel header small { color: var(--muted); font-size: .65rem; }.bot-panel header button { font-size: 1.25rem; }.bot-panel > div { padding: .8rem; }.bot-panel p { margin: 0 0 .7rem; color: #d1e6fa; font-size: .76rem; line-height: 1.45; }.bot-input { display: flex; overflow: hidden; border: 1px solid #426486; border-radius: .5rem; }.bot-input input { flex: 1; min-width: 0; padding: .58rem; border: 0; outline: 0; background: #10233a; color: var(--ivory); }.bot-input button { border: 0; width: 2.8rem; background: #285e95; color: var(--ivory); }.bot-panel.minimized > div { display: none; }

dialog { width: min(32rem, calc(100vw - 2rem)); border: 1px solid var(--border); border-radius: .6rem; color: var(--ivory); background: var(--navy-2); box-shadow: var(--shadow); }.dialog::backdrop, dialog::backdrop { background: rgb(0 0 0 / 65%); }dialog h2 { margin-top: 0; }dialog p { color: var(--muted); line-height: 1.5; }dialog div { display: grid; justify-items: start; padding: 1rem; }
.site-footer { justify-content: space-between; gap: .7rem 1rem; min-height: 3.7rem; padding: .7rem 1.2rem; border-top: 1px solid var(--border); background: #081321; color: var(--muted); font-size: .72rem; }
.footer-identity { display: grid; gap: .2rem; color: var(--ivory); }
.footer-identity span, .site-footer > small { color: var(--muted); }
.footer-links { display: flex; flex-wrap: wrap; gap: .5rem .85rem; }
.footer-links a { color: var(--cyan); text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.footer-links small { color: var(--muted); }

body.light { color-scheme: light; --navy: #f4f7fb; --navy-2: #ffffff; --navy-3: #eaf1f8; --ivory: #0d2138; --muted: #50677f; --border: #b5c9dc; background: #e9f2fb; }.light .identity-header, .light .command-bar { background: #fff; }.light .panel, .light .mini-view { background: #fff; }.light .design-canvas { background-color: #e8f2fb; }.light .grid-enabled { background-image: linear-gradient(#b3cce1 1px, transparent 1px), linear-gradient(90deg, #b3cce1 1px, transparent 1px); }.light .canvas-toolbar, .light .view-tab, .light .secondary-button, .light .outline-button { background: #edf5fd; }.light .property-form input, .light .selected-library-part, .light .bot-input input { background: #f5faff; }.light .bot-panel { background: #f7fbff; }.light footer { background: #fff; }

@media (max-width: 1120px) { .workspace { grid-template-columns: minmax(11rem, 14rem) minmax(30rem, 1fr); }.inspector-panel { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }.inspector-panel .panel-heading, .inspector-tabs { grid-column: 1 / -1; }.inspector-panel .simulation-control { border-left: 1px solid var(--border); }.bot-panel { bottom: 4.2rem; } }
@media (max-width: 800px) { .identity-header { align-items: flex-start; flex-wrap: wrap; }.identity { flex: 1 1 100%; }.corporate-logo { width: clamp(8.5rem, 30vw, 12rem); }.identity-divider, .identity p small { display: none; }.header-actions { width: 100%; justify-content: space-between; flex-wrap: wrap; }.global-search { width: 13rem; }.command-bar { align-items: flex-start; flex-direction: column; }.project-actions { width: 100%; }.workspace { grid-template-columns: 1fr; min-height: auto; }.library-panel { max-height: 21rem; }.component-list { max-height: 10rem; }.canvas-area { grid-template-rows: auto auto minmax(22rem, 28rem) 11rem auto; }.inspector-panel { grid-column: auto; display: block; }.inspector-panel .simulation-control { border-left: 0; }.design-canvas { min-height: 22rem; }.canvas-toolbar { overflow: auto hidden; }.toolbar-button span { display: none; }.overview-row { min-height: 10rem; }.bot-panel { position: static; width: auto; margin: .65rem; }.workspace + .bot-panel { margin-top: 0; }.site-footer { align-items: flex-start; flex-direction: column; }.footer-links { gap: .65rem; } }
@media (max-width: 520px) { .identity-header { padding: .65rem .8rem; }.identity h1 { font-size: 1.25rem; }.header-actions { width: 100%; }.global-search { flex: 1; width: auto; }.command-bar { padding: .5rem .7rem; }.menu-buttons { overflow-x: auto; flex-wrap: nowrap; width: 100%; }.project-actions { display: grid; grid-template-columns: repeat(2, 1fr); }.project-actions button { width: 100%; }.workspace { padding: .45rem; }.view-tabs { margin: 0 -.05rem; }.view-tab { font-size: .72rem; }.view-tab span { display: none; }.save-state { font-size: .65rem; }.overview-row { grid-template-columns: 1fr; min-height: 16rem; }.placed-component { transform: scale(.75); transform-origin: top left; }.design-canvas .placed-component { left: calc(var(--x) * .78); top: calc(var(--y) * .86); } }



/* Workspace layout aligned with the approved AdigunSimulator visual references. */
.command-bar { min-height: 3.35rem; gap: .55rem; padding: .35rem .8rem; }
.menu-buttons { gap: .12rem; flex-wrap: nowrap; }
.app-menu { position: relative; }
.app-menu > summary { list-style: none; cursor: pointer; padding: .48rem .68rem; border: 1px solid transparent; border-radius: .32rem; color: var(--ivory); font-size: .82rem; }
.app-menu > summary::-webkit-details-marker { display: none; }
.app-menu[open] > summary, .app-menu > summary:hover { border-color: var(--border); background: #193250; color: var(--cyan); }
.app-menu-popover { position: absolute; z-index: 30; top: calc(100% + .25rem); left: 0; display: none; min-width: 12rem; padding: .35rem; border: 1px solid var(--border); border-radius: .4rem; background: #0b1c30; box-shadow: var(--shadow); }
.app-menu[open] .app-menu-popover { display: grid; gap: .15rem; }
.app-menu-popover button { padding: .5rem .6rem; border: 0; border-radius: .25rem; background: transparent; color: var(--ivory); text-align: left; font-size: .76rem; }
.app-menu-popover button:hover { background: #173b5d; color: var(--cyan); }
.project-actions { flex: 1 1 auto; gap: .35rem; flex-wrap: nowrap; justify-content: flex-end; min-width: 0; }
.project-actions > button { white-space: nowrap; }
.toolbar-run { min-height: 2.25rem; padding: .45rem .8rem; }
.example-top-control { display: flex; align-items: center; gap: .45rem; margin-left: .3rem; color: var(--muted); font-size: .72rem; white-space: nowrap; }
.example-top-control select { width: clamp(13rem, 20vw, 23rem); min-width: 0; padding: .48rem .55rem; border: 1px solid var(--border); border-radius: .32rem; background: #091928; color: var(--ivory); }
.load-example-top { padding: .48rem .6rem; white-space: nowrap; }
.canvas-area:not(.has-overview) { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(25rem, 1fr) auto; }
.canvas-area:not(.has-overview) .overview-row { display: none; }
.canvas-area.has-overview { grid-template-columns: minmax(0, 1.65fr) minmax(15rem, .85fr); grid-template-rows: auto auto minmax(25rem, 1fr) auto; }
.canvas-area.has-overview > .view-tabs, .canvas-area.has-overview > .canvas-toolbar, .canvas-area.has-overview > .output-panel { grid-column: 1 / -1; }
.canvas-area.has-overview > .design-canvas { grid-column: 1; grid-row: 3; min-height: 25rem; }
.canvas-area.has-overview > .overview-row { grid-column: 2; grid-row: 3; grid-template-columns: 1fr; min-height: 0; }
.canvas-area.has-overview [data-mini-view="schematic"] { display: grid; min-height: 0; }
.canvas-area.has-overview [data-mini-view="pcb"] { display: none; }
.canvas-area.has-overview .mini-canvas { min-height: 0; }
.canvas-area:not(.has-overview) > .design-canvas { min-height: 29rem; }
.schematic .placed-component { min-width: 4.2rem; }
.schematic .part-body { border-radius: .18rem; background: #10263b; }
.schematic .passive-resistor .part-body { color: #f0bd77; background: transparent; border-color: #e0ad70; }
.schematic .diode-led-red .part-body { color: #ff7272; background: #371923; }
.pcb { background-color: #06251c; }
.pcb::before { content: "PCB placement preview · unrouted · no DRC"; inset: 12% 4%; padding: .65rem; border: 2px solid #46c987; border-radius: .8rem; color: #97e8bc; background: radial-gradient(#18714b 1px, transparent 1.5px) 0 0 / 14px 14px, linear-gradient(145deg, #06452e, #0a2b21); place-items: end center; }
.pcb .placed-component { min-width: 4rem; padding: .3rem; border: 1px solid #70dba5; border-radius: .35rem; background: #0a3c2b; box-shadow: 0 0 0 2px rgb(4 22 16 / 55%); }
.pcb .part-body { min-width: 2.9rem; min-height: 1.7rem; border-color: #dfc36d; background: #1c2c30; color: #e8d58c; }
.pcb .wire-layer .net-signal { stroke: #64d79a; stroke-width: 2; stroke-dasharray: 5 5; opacity: .88; }
.pcb .wire-layer .net-power { stroke: #e96b62; stroke-width: 2.5; stroke-dasharray: 5 5; }
.workspace-notes { margin-top: .1rem; }
.result-dashboard { display: grid; gap: .55rem; max-height: 23rem; padding: .65rem; overflow: auto; background: #081827; }
.result-dashboard-heading { display: flex; align-items: center; justify-content: space-between; gap: .6rem; color: var(--ivory); }
.result-dashboard-heading > strong { display: flex; align-items: center; gap: .45rem; color: #55e0a0; font-size: .9rem; }
.result-dashboard-heading small { color: var(--muted); text-align: right; }
.result-status-dot { width: .65rem; height: .65rem; border-radius: 50%; background: #54e49f; box-shadow: 0 0 .7rem #54e49f; }
.result-dashboard-body { display: grid; grid-template-columns: minmax(15rem, .9fr) minmax(18rem, 1.1fr); gap: .55rem; }
.result-metric-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .42rem; }
.result-metric { display: grid; align-content: center; gap: .3rem; min-height: 3.3rem; padding: .48rem .58rem; border: 1px solid #24415b; border-radius: .35rem; background: #0c2034; }
.result-metric span { color: var(--muted); font-size: .68rem; }
.result-metric strong { color: var(--ivory); font-size: 1rem; }
.result-waveform { display: grid; gap: .25rem; margin: 0; padding: .45rem .55rem; border: 1px solid #24415b; border-radius: .35rem; background: #091b2b; }
.result-waveform figcaption { color: var(--cyan); font-size: .72rem; }
.result-waveform svg { display: block; width: 100%; min-height: 5.5rem; }
.result-waveform .wave-axis { fill: none; stroke: #7790a8; stroke-width: 1; }
.result-waveform .wave-trace { fill: none; stroke: #35d6ed; stroke-width: 3; stroke-linecap: square; stroke-linejoin: miter; }
.result-waveform text { fill: #91a8be; font: 10px sans-serif; }
.result-limit { margin: 0; padding: .38rem .5rem; border-left: 2px solid var(--cyan); color: var(--muted); font-size: .68rem; line-height: 1.35; }
.output-panel:has(.result-dashboard:not(.hidden)) #output-log { display: none; }
@media (max-width: 1120px) {
  .project-actions { flex-wrap: wrap; }
  .canvas-area.has-overview { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(24rem, 1fr) 13rem auto; }
  .canvas-area.has-overview > .design-canvas { grid-column: 1; grid-row: 3; }
  .canvas-area.has-overview > .overview-row { grid-column: 1; grid-row: 4; grid-template-columns: 1fr; }
  .canvas-area.has-overview > .output-panel { grid-row: 5; }
}
@media (max-width: 800px) {
  .command-bar { align-items: stretch; flex-direction: column; }
  .menu-buttons { width: 100%; overflow-x: auto; }
  .project-actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .example-top-control { flex: 1 1 100%; margin-left: 0; }
  .example-top-control select { flex: 1; width: 100%; }
  .canvas-area.has-overview { grid-template-rows: auto auto minmax(22rem, 1fr) 12rem auto; }
  .result-dashboard-body { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .menu-buttons { gap: 0; }
  .app-menu > summary { padding: .45rem .5rem; font-size: .72rem; }
  .project-actions { display: flex; }
  .project-actions > button { flex: 1 1 auto; }
  .result-metric-grid { grid-template-columns: 1fr 1fr; }
  .result-dashboard-heading { align-items: flex-start; flex-direction: column; }
}
.breadboard-package { pointer-events:none; }
.package-leads { fill:none; stroke:#b48a4b; stroke-width:2.1; stroke-linecap:round; }
.resistor-body { fill:#d7a45d; stroke:#70502d; stroke-width:1.4; filter:drop-shadow(0 1px 1px rgb(0 0 0 / 35%)); }
.resistor-band { fill:none; stroke:#4d3020; stroke-width:3; }
.led-body { fill:#ee514d; stroke:#fbe5e4; stroke-width:2; filter:drop-shadow(0 0 5px rgb(239 74 70 / 65%)); }
.led-lens { fill:none; stroke:#ffc1bb; stroke-width:2; stroke-linecap:round; opacity:.9; }
.breadboard-controls .package-note { color:var(--muted); font-size:.68rem; line-height:1.4; }

.axial-diode-body { fill:#343943; stroke:#111820; stroke-width:1.5; filter:drop-shadow(0 1px 1px rgb(0 0 0 / 35%)); }
.diode-cathode-band { stroke:#e6e9ee; stroke-width:3; }
.capacitor-body { fill:#28739d; stroke:#172b3a; stroke-width:1.8; filter:drop-shadow(0 2px 2px rgb(0 0 0 / 35%)); }
.capacitor-top { fill:none; stroke:#b8e8f5; stroke-width:1.7; opacity:.75; }
.transistor-package .package-leads { stroke:#a5aeb5; stroke-width:2.4; }
.to92-body { fill:#222830; stroke:#080c11; stroke-width:1.7; filter:drop-shadow(0 2px 2px rgb(0 0 0 / 40%)); }
.to92-face { fill:none; stroke:#515965; stroke-width:1.2; }

.breadboard-sync-net-list { display:grid; gap:.25rem; max-height:7rem; overflow:auto; list-style:none; margin:0; padding:0; font-size:.68rem; color:var(--muted); }.breadboard-sync-net-list li { display:grid; gap:.1rem; padding:.3rem; border:1px solid var(--border); border-radius:.25rem; }.breadboard-sync-net-list strong { color:var(--cyan); }.breadboard-sync-net-list span { overflow-wrap:anywhere; }