:root {
  --bg: #10151b;
  --bg-deep: #0b1015;
  --panel: #171e26;
  --panel-raised: #1c2530;
  --panel-soft: #202b37;
  --border: #2d3946;
  --border-strong: #42505e;
  --text: #e9edf2;
  --muted: #8d9bab;
  --faint: #5c6a78;
  --accent: #45c7a4;
  --accent-strong: #28a884;
  --blue: #4ca5ff;
  --orange: #f0a35b;
  --red: #ee6f73;
  --canvas: #121a22;
  --shadow: 0 14px 42px rgba(0, 0, 0, .28);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--bg-deep);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { min-width: 1050px; overflow: hidden; background: radial-gradient(circle at 50% -10%, #243141 0, var(--bg-deep) 42%); }
button, input { font: inherit; }
button { color: inherit; }
.app-shell { height: 100vh; display: grid; grid-template-rows: 58px 46px minmax(0, 1fr) 28px; }

.topbar { position: relative; display: flex; align-items: center; gap: 26px; padding: 0 18px; background: #0d1319; border-bottom: 1px solid #27323e; box-shadow: 0 1px 0 rgba(255,255,255,.03) inset; }
.brand-lockup { display: flex; align-items: center; gap: 10px; min-width: 210px; }
.brand-mark { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid #5ee1bd; border-radius: 8px; color: #07130f; background: linear-gradient(135deg, #68e0bd, #35a68f); font-size: 11px; font-weight: 900; letter-spacing: -.04em; box-shadow: 0 0 18px rgba(69,199,164,.23); }
.brand-name { font-size: 14px; font-weight: 800; letter-spacing: .03em; }
.brand-subtitle { margin-top: 2px; color: var(--muted); font-size: 10px; letter-spacing: .04em; }
.menubar { display: flex; align-items: stretch; gap: 5px; height: 100%; }
.menu-trigger { border: 0; background: none; padding: 0 9px; color: #a8b2be; font-size: 12px; cursor: pointer; }
.menu-trigger:hover, .menu-trigger:focus-visible { color: #fff; background: rgba(255,255,255,.06); outline: none; }
.menu-popup { position: absolute; z-index: 30; top: 53px; min-width: 208px; padding: 6px; border: 1px solid #3b4a57; border-radius: 6px; background: #18222c; box-shadow: 0 16px 34px rgba(0,0,0,.42); }
.menu-popup-title { padding: 5px 9px 7px; color: var(--accent); font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.menu-item { display: flex; align-items: center; justify-content: space-between; gap: 22px; width: 100%; padding: 8px 9px; border: 0; border-radius: 4px; color: #c9d3dc; background: transparent; text-align: left; font-size: 11px; cursor: pointer; }
.menu-item:hover, .menu-item:focus-visible { color: #f4fffb; background: rgba(69,199,164,.15); outline: none; }
.menu-item kbd { color: #8395a4; border-color: #3a4b58; background: #111a22; font-size: 9px; white-space: nowrap; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 9px; }
.icon-button, .account-button, .small-icon-button { border: 1px solid transparent; background: transparent; cursor: pointer; }
.icon-button { width: 30px; height: 30px; color: var(--muted); font-size: 18px; border-radius: 6px; }
.icon-button:hover, .small-icon-button:hover { color: #fff; border-color: var(--border-strong); background: var(--panel-soft); }
.account-button { display: flex; align-items: center; gap: 7px; color: #b9c4cf; border-color: var(--border); border-radius: 5px; padding: 7px 10px; font-size: 11px; }
.account-button:hover { border-color: var(--accent); }
.status-dot, .live-dot, .status-light { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px rgba(69,199,164,.65); }

.toolbar { display: flex; align-items: center; gap: 10px; padding: 0 14px; background: #19212a; border-bottom: 1px solid #2e3945; box-shadow: 0 1px 0 rgba(255,255,255,.025) inset; }
.tool-group { display: flex; align-items: center; gap: 2px; }
.tool-button { display: flex; align-items: center; gap: 6px; height: 31px; padding: 0 9px; border: 1px solid transparent; border-radius: 4px; color: #afbac6; background: transparent; font-size: 11px; cursor: pointer; }
.tool-button:hover, .tool-button:focus-visible { color: #f5f7fa; background: rgba(255,255,255,.07); outline: none; }
.tool-button.active { color: #dffaf2; border-color: rgba(69,199,164,.35); background: rgba(69,199,164,.13); }
.tool-button:disabled { opacity: .4; cursor: not-allowed; }
.tool-icon { display: grid; place-items: center; width: 16px; color: #a8bac8; font-size: 16px; line-height: 1; }
.toolbar-divider { width: 1px; height: 24px; background: #34414e; margin: 0 2px; }
.toolbar-spacer { flex: 1; }
.analysis-control { display: flex; align-items: center; gap: 6px; color: #8797a5; font-size: 10px; }
.analysis-control select { height: 30px; max-width: 148px; padding: 0 7px; border: 1px solid #3a4957; border-radius: 4px; outline: none; color: #dce5eb; background: #111a22; font-size: 10px; }
.analysis-control select:focus { border-color: var(--accent); }
.zoom-readout { color: var(--muted); min-width: 39px; text-align: center; font-size: 11px; }
.run-button { display: flex; align-items: center; gap: 7px; height: 31px; border: 1px solid #5ee1bd; border-radius: 4px; padding: 0 13px; color: #06150f; background: var(--accent); font-size: 11px; font-weight: 800; cursor: pointer; box-shadow: 0 0 18px rgba(69,199,164,.12); }
.run-button:hover { background: #5be0ba; transform: translateY(-1px); }
.play-icon { font-size: 10px; }

.workspace { min-height: 0; display: grid; grid-template-columns: 246px minmax(0, 1fr) 244px; }
.panel { min-width: 0; background: var(--panel); border-color: var(--border); }
.left-panel { display: flex; flex-direction: column; border-right: 1px solid var(--border); }
.right-panel { display: flex; flex-direction: column; border-left: 1px solid var(--border); }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; padding: 18px 16px 13px; }
.eyebrow { display: block; margin-bottom: 4px; color: var(--accent); font-size: 9px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
h2 { margin: 0; font-size: 15px; letter-spacing: -.01em; }
.small-icon-button { width: 24px; height: 24px; border: 1px solid var(--border); border-radius: 4px; color: var(--muted); font-size: 16px; line-height: 1; }
.search-field { display: flex; align-items: center; gap: 8px; height: 32px; margin: 0 12px 12px; padding: 0 8px; border: 1px solid var(--border); border-radius: 4px; background: #111820; }
.search-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(69,199,164,.1); }
.search-icon { color: var(--muted); font-size: 18px; transform: rotate(-15deg); }
.search-field input { min-width: 0; flex: 1; border: 0; outline: none; color: var(--text); background: transparent; font-size: 11px; }
.search-field input::placeholder { color: #687786; }
kbd, .keycap { padding: 2px 4px; color: #8d9baa; border: 1px solid #394653; border-radius: 3px; background: #1b2630; font-size: 9px; }
.library-workspace { display: grid; grid-template-columns: 43px minmax(0, 1fr); flex: 1; min-width: 0; min-height: 0; }
.library-tab-rail { display: flex; flex-direction: column; align-items: center; gap: 5px; min-height: 0; padding: 0 4px 10px; border-right: 1px solid var(--border); background: #131b22; }
.library-tab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 35px; min-height: 68px; padding: 7px 2px; border: 1px solid transparent; border-radius: 5px; color: #718392; background: transparent; cursor: pointer; }
.library-tab-icon { color: #8aa1b2; font-size: 16px; line-height: 1; }
.library-tab-label { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 8px; letter-spacing: .06em; text-transform: uppercase; }
.library-tab:hover, .library-tab:focus-visible { color: #dffaf2; border-color: rgba(69,199,164,.35); background: rgba(69,199,164,.08); outline: none; }
.library-tab.active { color: #dffaf2; border-color: rgba(69,199,164,.35); background: rgba(69,199,164,.12); }
.library-tab.active .library-tab-icon { color: var(--accent); }
.library-tab.active::after { content: ""; position: absolute; top: 8px; right: -5px; bottom: 8px; width: 2px; background: var(--accent); }
.library-results { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.component-list { flex: 1; min-width: 0; min-height: 0; overflow-x: hidden; overflow-y: auto; padding: 0 9px 12px; scrollbar-color: #3a5a61 #111820; scrollbar-width: thin; }
.component-list::-webkit-scrollbar { width: 8px; }
.component-list::-webkit-scrollbar-track { background: #111820; }
.component-list::-webkit-scrollbar-thumb { border: 2px solid #111820; border-radius: 8px; background: #3a5a61; }
.component-list::-webkit-scrollbar-thumb:hover { background: #537d7b; }
.component-card { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 8px; border: 1px solid transparent; border-radius: 5px; color: #d4dbe3; background: transparent; text-align: left; cursor: pointer; }
.placed-component-card { border-color: rgba(69,199,164,.18); background: rgba(69,199,164,.035); }
.placed-component-card:hover { border-color: rgba(69,199,164,.45); background: rgba(69,199,164,.1); }
.component-card:hover { border-color: #3a4b59; background: #202c37; }
.component-glyph { width: 38px; height: 32px; display: grid; place-items: center; color: var(--accent); border: 1px solid #344755; border-radius: 4px; background: #111a22; }
.component-glyph svg { width: 31px; height: 23px; overflow: visible; }
.component-card strong { display: block; font-size: 11px; font-weight: 700; }
.component-card small { display: block; margin-top: 2px; color: var(--muted); font-size: 9px; }
.library-tip { display: flex; gap: 9px; margin: 0 10px 14px; padding: 10px; border: 1px solid #2e4a4a; border-radius: 5px; color: #8eb9b0; background: rgba(69,199,164,.06); font-size: 9px; line-height: 1.45; }
.tip-icon { color: var(--accent); font-size: 14px; }
.library-tip strong { color: #c6eee3; }

.main-stage { min-width: 0; min-height: 0; display: grid; grid-template-rows: 45px minmax(0, 1fr) 142px; background: var(--bg); }
.main-stage:has(.firmware-view:not([hidden])) { grid-template-rows: 45px minmax(0, 1fr) 0; }
.mode-tabs { display: flex; align-items: stretch; gap: 3px; padding: 0 10px; border-bottom: 1px solid var(--border); background: #141b22; }
.mode-tab { position: relative; display: flex; align-items: center; gap: 8px; padding: 0 15px; border: 0; color: var(--muted); background: transparent; font-size: 11px; cursor: pointer; }
.mode-tab.active { color: #e8fbf7; }
.mode-tab.active::after { content: ""; position: absolute; right: 11px; bottom: -1px; left: 11px; height: 2px; background: var(--accent); }
.mode-icon { color: #8aa1b2; font-size: 16px; }
.stage-title { display: flex; align-items: center; gap: 8px; margin-left: auto; padding-right: 9px; color: #a3afbb; font-size: 11px; }
.dirty-marker { color: var(--orange); font-size: 16px; line-height: 0; }
.canvas-wrap { position: relative; min-height: 0; overflow: hidden; background: var(--canvas); }
.canvas-wrap.pan-mode { cursor: grab; }
.canvas-wrap.is-panning { cursor: grabbing; }
.schematic-canvas { position: absolute; top: 24px; right: 22px; bottom: 28px; left: 27px; width: calc(100% - 49px); height: calc(100% - 52px); border: 1px solid #273642; background: #121a22; cursor: grab; transform: translate(var(--workspace-pan-x, 0px), var(--workspace-pan-y, 0px)) scale(var(--workspace-zoom, 1)); transform-origin: center center; }
.canvas-wrap.is-panning .schematic-canvas { cursor: grabbing; }
.canvas-rulers { position: absolute; z-index: 2; display: flex; color: #596b7b; font-size: 9px; pointer-events: none; user-select: none; }
.ruler-x { top: 7px; right: 22px; left: 27px; justify-content: space-between; padding: 0 6px; }
.ruler-y { top: 27px; bottom: 28px; left: 7px; flex-direction: column; justify-content: space-between; padding: 5px 0; }
.canvas-status { position: absolute; bottom: 6px; left: 32px; display: flex; gap: 18px; color: #778897; font-size: 9px; }
.canvas-help { position: absolute; right: 28px; bottom: 6px; display: flex; gap: 7px; color: #617181; font-size: 9px; }
.firmware-view { min-width: 0; min-height: 0; overflow: hidden; background: #10171e; }
.firmware-shell { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.firmware-toolbar { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 7px 12px; border-bottom: 1px solid var(--border); background: #151e27; }
.firmware-toolbar label { display: flex; align-items: center; gap: 6px; color: #91a2b0; font-size: 10px; }
.firmware-toolbar select { min-width: 130px; padding: 6px 8px; border: 1px solid #3a4c5a; border-radius: 4px; color: var(--text); background: #101820; font: 10px ui-monospace, monospace; }
.firmware-view-tabs { display: flex; gap: 2px; margin-left: 8px; padding: 2px; border: 1px solid #33434f; border-radius: 5px; background: #101820; }
.firmware-tab, .firmware-action { border: 1px solid transparent; border-radius: 4px; color: #8fa1af; background: transparent; font-size: 10px; cursor: pointer; }
.firmware-tab { padding: 6px 12px; }
.firmware-tab.active, .firmware-tab:hover { color: #e5fff7; border-color: rgba(69,199,164,.45); background: rgba(69,199,164,.13); }
.firmware-spacer { flex: 1; }
.firmware-action { padding: 7px 10px; border-color: #39515d; color: #cbe8df; background: #19322f; }
.firmware-action:hover { border-color: var(--accent); background: #21473e; }
.firmware-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; min-height: 0; flex: 1; }
.firmware-editor-pane { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: #111a22; }
.blockly-workspace { position: relative; width: 100%; height: 100%; }
.blockly-workspace .blocklyMainBackground { fill: #111a22 !important; stroke: #2a3945 !important; }
.blockly-workspace .blocklyToolbox { z-index: 4; overflow: hidden; color: #d6e4ec; background: #151e27 !important; border-right: 1px solid #2c3c49; }
.blockly-workspace .blocklyToolboxCategoryContainer { margin: 2px 0; }
.blockly-workspace .blocklyToolboxCategory { min-height: 27px; color: #c8d6de; }
.blockly-workspace .blocklyToolboxCategoryLabel { color: #c8d6de !important; font: 700 10px/17px ui-monospace, SFMono-Regular, Consolas, monospace; }
.blockly-workspace .blocklyToolboxCategorySelected { background: rgba(69,199,164,.16) !important; }
.blockly-workspace .blocklyToolboxCategorySelected .blocklyToolboxCategoryLabel { color: #e8fff7 !important; }
.blockly-workspace .blocklyFlyoutBackground { fill: #192630 !important; fill-opacity: 1 !important; stroke: #35505f !important; }
.blockly-workspace .blocklyScrollbarHandle { fill: #4e6977 !important; }
.firmware-code-editor, .firmware-code-fallback { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; outline: 0; }
.firmware-code-fallback { resize: none; padding: 18px; color: #d6e4ec; background: #101820; font: 12px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; }
.firmware-inspector { min-width: 0; overflow: auto; padding: 12px; border-left: 1px solid var(--border); background: #151e27; }
.firmware-card { margin-bottom: 12px; padding: 12px; border: 1px solid #2c3c49; border-radius: 6px; background: #19232d; }
.firmware-card h3 { margin: 0 0 10px; font-size: 13px; }
.firmware-card p { margin: 7px 0 0; color: #91a3af; font-size: 10px; line-height: 1.5; }
.firmware-library-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid #293844; }
.firmware-library-row:first-child { border-top: 0; }
.firmware-library-row strong, .firmware-library-row small { display: block; }
.firmware-library-row strong { color: #d9ece8; font-size: 10px; }
.firmware-library-row small { margin-top: 2px; color: #7e929f; font-size: 9px; }
.firmware-pin-summary { display: block; max-width: 190px; margin-top: 3px; overflow: hidden; color: #83a4b0; font: 8px/1.35 ui-monospace, SFMono-Regular, Consolas, monospace; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.firmware-library-glyph { display: grid; place-items: center; width: 30px; height: 24px; border: 1px solid #376052; border-radius: 4px; color: var(--accent); background: #10231f; font: 700 8px ui-monospace, monospace; }
.firmware-diagnostic { padding: 7px 8px; border-radius: 4px; color: #a9bac4; background: #121b23; font-size: 9px; line-height: 1.4; }
.firmware-diagnostic + .firmware-diagnostic { margin-top: 5px; }
.firmware-diagnostic.warning { color: #ffd18d; border: 1px solid rgba(240,163,91,.35); background: rgba(240,163,91,.08); }
.firmware-diagnostic.ok { color: #9be4ce; border: 1px solid rgba(69,199,164,.25); background: rgba(69,199,164,.06); }
.firmware-note { border-color: rgba(76,165,255,.25); background: rgba(76,165,255,.06); }
.firmware-note strong { color: #a9d5ff; font-size: 10px; }
.firmware-view[hidden] { display: none; }
.circuit-component[data-component-id^="U"] .symbol-esp32-devkit, .circuit-component .symbol-arduino-uno, .circuit-component .symbol-lcd1602-i2c, .circuit-component .symbol-oled-ssd1306 { filter: drop-shadow(0 0 5px rgba(69,199,164,.3)); }
.circuit-component { cursor: grab; }
.circuit-component:active { cursor: grabbing; }
.component-hit { pointer-events: all; }
.component-lead { stroke: #8da1b2; stroke-width: 1.6; }
.pin-anchor { fill: #45c7a4; stroke: #0c171c; stroke-width: 1.2; opacity: .72; cursor: crosshair; pointer-events: all; }
.circuit-component:hover .pin-anchor, .circuit-component.selected .pin-anchor { opacity: 1; }
.pin-anchor.route-start { fill: #fff0a8; stroke: #f0a35b; stroke-width: 2; opacity: 1; filter: drop-shadow(0 0 4px rgba(255,224,106,.75)); }
.component-label, .component-value { font: 700 11px ui-monospace, SFMono-Regular, Consolas, monospace; pointer-events: none; }
.component-label { fill: #e7eef2; }
.component-value { fill: #7f92a3; font-size: 9px; font-weight: 500; }
.circuit-component.selected .component-hit { fill: rgba(69,199,164,.08); stroke: #45c7a4; stroke-width: 1.5; stroke-dasharray: 3 3; }
.circuit-component.selected .component-label { fill: #8ff1d2; }
.selection-marquee { fill: rgba(69,199,164,.1); stroke: #65e0bf; stroke-width: 1.5; stroke-dasharray: 6 4; pointer-events: none; }
.circuit-wire { fill: none; stroke: #9aacb9; stroke-width: 2; vector-effect: non-scaling-stroke; }
.circuit-wire.selected { stroke: #f0a35b; stroke-width: 3; filter: drop-shadow(0 0 3px rgba(240,163,91,.5)); }
.wire-hit { fill: none; stroke: transparent; stroke-width: 16; pointer-events: stroke; cursor: grab; }
.wire-hit:hover { stroke: rgba(69,199,164,.14); }
.schematic-net-label { cursor: grab; }
.label-chip { fill: #1b3d3c; stroke: #51c8a6; stroke-width: 1; opacity: .96; }
.label-stem { stroke: #51c8a6; stroke-width: 1.4; }
.label-text { fill: #c6f4e5; font: 700 10px ui-monospace, SFMono-Regular, Consolas, monospace; pointer-events: none; }
.schematic-net-label.selected .label-chip { fill: #345b4e; stroke: #fff0a8; stroke-width: 1.5; }
.schematic-net-label.selected .label-text { fill: #fff7cc; }
.wire-node { fill: #45c7a4; stroke: #0c171c; stroke-width: 1; }
.wire-preview { fill: none; stroke: #45c7a4; stroke-width: 2; stroke-dasharray: 5 4; opacity: .8; pointer-events: none; }
.canvas-wrap.pcb-view { background: #0e151c; }
.canvas-wrap.pcb-view .schematic-canvas { display: none; }
.pcb-board { position: absolute; z-index: 1; inset: 34px 60px 32px; display: grid; place-items: center; perspective: 1100px; transform: translate(var(--workspace-pan-x, 0px), var(--workspace-pan-y, 0px)) scale(var(--workspace-zoom, 1)) rotate(var(--pcb-view-rotation, 0deg)); transform-origin: center center; transform-style: preserve-3d; transition: transform .2s ease; }
.pcb-board.pcb-orbit-mode { cursor: grab; }
.pcb-board.pcb-orbit-mode:active { cursor: grabbing; }
.pcb-board.has-route-list { inset: 126px 100px 40px; }
.board-shape { --pcb-mask: #194f43; --pcb-mask-border: #76c8a7; --pcb-mask-glow: rgba(57,131,102,.4); --pcb-mask-grid: rgba(156,236,207,.08); --pcb-mask-text: rgba(190,245,217,.72); --pcb-mask-outline: rgba(160,236,207,.28); position: relative; width: min(520px, 70%); aspect-ratio: var(--board-aspect, 1.45); border: 1px solid var(--pcb-mask-border); border-radius: 15px; background: radial-gradient(circle at 30% 20%, var(--pcb-mask-glow), transparent 35%), var(--pcb-mask); box-shadow: 0 0 0 6px rgba(10,28,28,.7), 0 18px 50px rgba(0,0,0,.35); }
.board-shape.grid-visible { background-image: linear-gradient(var(--pcb-mask-grid) 1px, transparent 1px), linear-gradient(90deg, var(--pcb-mask-grid) 1px, transparent 1px), radial-gradient(circle at 30% 20%, var(--pcb-mask-glow), transparent 35%); background-size: 20px 20px, 20px 20px, auto; }
.board-shape.pcb-perspective { transform: rotateX(var(--pcb-orbit-pitch, 42deg)) rotateY(var(--pcb-orbit-yaw, 0deg)) rotateZ(var(--pcb-orbit-roll, 0deg)); transform-origin: center 58%; transform-style: preserve-3d; border-bottom-width: 3px; transition: transform .12s ease-out; }
.pcb-board-edge { display: none; position: absolute; z-index: 0; inset: 0; border: 1px solid rgba(4,20,16,.9); border-radius: inherit; background: linear-gradient(180deg, rgba(23,61,48,.96), rgba(4,20,16,.98)); box-shadow: 0 3px 0 rgba(1,10,8,.75), 0 7px 10px rgba(0,0,0,.34); pointer-events: none; }
.board-shape.pcb-perspective > .pcb-board-edge { display: block; transform: translate3d(0, 8px, -12px); transform-origin: center center; }
.board-shape::before { content: "PCB PREVIEW"; position: absolute; top: 20px; left: 25px; color: var(--pcb-mask-text); font: 700 11px ui-monospace, monospace; letter-spacing: .16em; }
.board-shape.pcb-side-bottom { box-shadow: 0 0 0 6px rgba(15,35,23,.72), 0 18px 50px rgba(0,0,0,.42); }
.board-shape.pcb-side-bottom.grid-visible { background-image: linear-gradient(var(--pcb-mask-grid) 1px, transparent 1px), linear-gradient(90deg, var(--pcb-mask-grid) 1px, transparent 1px), radial-gradient(circle at 72% 22%, var(--pcb-mask-glow), transparent 34%); }
.board-shape.pcb-side-bottom::before { content: "PCB BOTTOM · B.Cu"; color: var(--pcb-mask-text); text-shadow: 0 1px rgba(255,255,255,.4); }
.board-shape.pcb-side-bottom::after { border-color: var(--pcb-mask-outline); }
.board-shape.pcb-mode-top-board, .board-shape.pcb-mode-bottom-traces { border-radius: 10px; box-shadow: 0 0 0 6px rgba(10,28,18,.58), 0 18px 34px rgba(0,0,0,.42); }
.board-shape.pcb-mode-top-board::before { content: "TOP BOARD · F.SilkS + F.Mask"; }
.board-shape.pcb-mode-bottom-traces::before { content: "BOTTOM BOARD · B.Cu + B.Mask"; }
.board-shape.pcb-mode-bottom-mask::before { content: "BOTTOM SOLDER MASK · B.Mask"; }
.board-shape.pcb-mode-drill-plot { --pcb-mask: #fff; --pcb-mask-border: #111; --pcb-mask-glow: #fff; --pcb-mask-grid: transparent; --pcb-mask-text: #111; --pcb-mask-outline: rgba(0,0,0,.5); border-radius: 0; background: #fff; box-shadow: none; }
.board-shape.pcb-mode-drill-plot::before { content: "DRILL PLOT"; color: #111; }
.pcb-mode-top-board .pcb-body, .pcb-mode-top-board .pcb-lead, .pcb-mode-top-board .pcb-track, .pcb-mode-bottom-traces .pcb-body, .pcb-mode-bottom-traces .pcb-designator, .pcb-mode-bottom-traces .pcb-value, .pcb-mode-bottom-traces .pcb-lead, .pcb-mode-bottom-mask .pcb-body, .pcb-mode-bottom-mask .pcb-designator, .pcb-mode-bottom-mask .pcb-value, .pcb-mode-bottom-mask .pcb-lead { display: none; }
.pcb-mode-top-board .pcb-footprint { z-index: 5; border: 1px solid rgba(235,255,219,.72); border-radius: 3px; }
.pcb-mode-top-board .pcb-designator, .pcb-mode-top-board .pcb-value { color: #e7ffd7; text-shadow: 0 1px 2px #0d311b; }
.board-shape.pcb-mode-bottom-traces .pcb-track.back-copper { z-index: 4; height: 5px; margin-top: -2px; background: #b9a85a; border-radius: 999px; box-shadow: 0 1px 3px rgba(24,44,17,.55); opacity: 1; }
.board-shape.pcb-mode-bottom-traces .pcb-track.back-copper { display: block; }
.pcb-mode-top-board .pcb-pad, .pcb-mode-bottom-traces .pcb-pad, .pcb-mode-bottom-mask .pcb-pad { z-index: 6; }
.pcb-mode-drill-plot .pcb-track, .pcb-mode-drill-plot .pcb-lead, .pcb-mode-drill-plot .pcb-body, .pcb-mode-drill-plot .pcb-designator, .pcb-mode-drill-plot .pcb-value { display: none; }
.pcb-mode-drill-plot .pcb-pad { z-index: 6; width: 13px; height: 13px; border: 2px solid #111; background: #fff; box-shadow: none; }
.pcb-mode-drill-plot .pcb-pad::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #111; }
.pcb-mode-drill-plot .pcb-via { z-index: 6; width: 13px; height: 13px; border: 2px solid #111; background: #fff; box-shadow: none; }
.pcb-mode-drill-plot .pcb-via::after { background: #111; }
.pcb-side-bottom .pcb-footprint { opacity: 1; }
.pcb-side-bottom .pcb-designator { color: #194d2b; text-shadow: 0 1px rgba(239,255,231,.55); }
.pcb-side-bottom .pcb-value { color: #356445; text-shadow: 0 1px rgba(239,255,231,.55); }
.pcb-side-bottom .pcb-body { filter: saturate(.66) brightness(.94); box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 2px 4px rgba(29,73,39,.35); }
.pcb-side-bottom .pcb-lead { z-index: 2; height: 3px; background: linear-gradient(90deg, #d9e1d2, #4d6872 52%, #d9e1d2); box-shadow: 0 0 2px rgba(35,74,88,.55); }
.pcb-side-bottom .pcb-pad { z-index: 5; width: 13px; height: 13px; border: 2px solid #0b6cad; background: radial-gradient(circle, #e9f5e8 0 33%, #2e91c8 35% 68%, #124d7b 70%); box-shadow: 0 0 0 1px rgba(229,250,234,.65), 0 1px 2px rgba(10,49,68,.5); }
.pcb-side-bottom .pcb-pad:hover, .pcb-side-bottom .pcb-pad.route-start { border-color: #f9df73; background: radial-gradient(circle, #fff8c8 0 31%, #f2b536 34% 68%, #9d5a12 70%); box-shadow: 0 0 0 3px rgba(255,224,106,.35), 0 0 10px rgba(255,205,68,.62); }
.pcb-side-bottom .pcb-track.back-copper { z-index: 3; height: 5px; margin-top: -2px; background: #ee462c; border-radius: 999px; box-shadow: 0 0 0 1px rgba(126,35,24,.34), 0 1px 2px rgba(96,35,24,.42); opacity: 1; }
.pcb-side-bottom .pcb-track.back-copper:hover, .pcb-side-bottom .pcb-track.back-copper.selected { height: 8px; margin-top: -4px; background: #ffb347; box-shadow: 0 0 0 2px rgba(123,47,22,.28), 0 0 12px rgba(255,171,64,.72); }
.pcb-trace-label { position: absolute; z-index: 6; max-width: 180px; padding: 2px 5px; border: 1px solid rgba(94,189,157,.55); border-radius: 3px; color: #d8f8e9; background: rgba(11,31,35,.82); box-shadow: 0 1px 3px rgba(0,0,0,.35); font: 700 7px ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .01em; line-height: 1.2; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .12s ease; }
.pcb-track:hover ~ .pcb-trace-label, .pcb-track.selected ~ .pcb-trace-label, .pcb-trace-label:hover { opacity: 1; }
.pcb-side-bottom .pcb-trace-label { color: #194d2b; border-color: rgba(26,99,57,.48); background: rgba(235,253,228,.9); box-shadow: 0 1px 3px rgba(40,81,41,.35); opacity: 1; }
.pcb-side-bottom .pcb-trace-label::first-letter { color: #a62d1d; }
.pcb-side-bottom .pcb-bend { border-color: #126ca2; background: #eaf5e7; box-shadow: 0 0 0 2px rgba(231,251,228,.6), 0 2px 5px rgba(24,73,38,.4); }
.pcb-side-bottom .pcb-via { border-color: #0d6dab; background: #e9f5e8; box-shadow: 0 0 0 1px rgba(230,250,232,.8), 0 1px 4px rgba(11,56,77,.5); }
.pcb-side-bottom .pcb-via::after { background: #176eaa; }
.board-shape::after { content: ""; position: absolute; inset: 20px; border: 1px dashed var(--pcb-mask-outline); border-radius: 8px; }
.pcb-toolbar { position: absolute; z-index: 12; top: 9px; right: 27px; left: 27px; display: flex; align-items: flex-start; color: #7f919e; font-size: 9px; pointer-events: none; }
.pcb-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.pcb-board-setup { position: absolute; z-index: 4; top: 46px; right: 27px; display: flex; align-items: end; gap: 8px; padding: 10px; border: 1px solid #3d6e62; border-radius: 6px; color: #b9f0df; background: #132c27; box-shadow: 0 12px 24px rgba(0,0,0,.28); font-size: 9px; }
.pcb-board-setup strong { align-self: center; color: #9de6cb; letter-spacing: .12em; }
.pcb-board-setup label { display: grid; gap: 4px; color: #7faaa0; }
.pcb-board-setup input { width: 60px; padding: 5px; border: 1px solid #3d6e62; border-radius: 3px; color: #e1f5ec; background: #0f211f; font: 10px ui-monospace, monospace; }
.pcb-toolbar strong { color: #9de6cb; letter-spacing: .12em; }
.pcb-action { padding: 6px 10px; border: 1px solid #3d6e62; border-radius: 4px; color: #b9f0df; background: #17372f; font-size: 10px; cursor: pointer; }
.pcb-action.active { color: #16251f; border-color: #9de6cb; background: #8fe0c1; }
.pcb-action:hover { border-color: var(--accent); background: #1d4b40; }
.pcb-appearance { gap: 9px; }
.pcb-view-switcher { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.pcb-view-switcher-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pcb-view-option { min-height: 34px; padding: 5px 6px; font-size: 9px; }
.pcb-perspective-toggle { width: 100%; }
.pcb-view-rotate-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pcb-view-rotate-controls .pcb-action { min-width: 0; padding-inline: 5px; }
.pcb-orbit-toggle { width: 100%; }
.pcb-orbit-toggle.active { color: #16251f; border-color: #f1c879; background: #e6bc68; }
.pcb-print-section { gap: 8px; }
.pcb-print-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
.pcb-color-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pcb-color-option { display: grid; justify-items: center; gap: 4px; min-width: 0; padding: 6px 2px; border: 1px solid #334d53; border-radius: 4px; color: #91a9b0; background: #142027; cursor: pointer; }
.pcb-color-option small { overflow: hidden; max-width: 100%; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.pcb-color-option:hover, .pcb-color-option:focus-visible { border-color: #6caaa0; color: #d7f1e8; outline: none; }
.pcb-color-option.active { border-color: var(--accent); color: #e0fff4; background: rgba(69,199,164,.13); box-shadow: inset 0 0 0 1px rgba(69,199,164,.16); }
.pcb-color-swatch { width: 20px; height: 14px; border: 1px solid rgba(255,255,255,.45); border-radius: 3px; background: var(--pcb-swatch); box-shadow: inset 0 2px 4px rgba(255,255,255,.16), 0 1px 2px rgba(0,0,0,.3); }
.pcb-route-list { position: absolute; z-index: 11; top: 84px; right: 27px; left: 27px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 31px; padding: 6px 12px; border: 1px solid #29463f; border-radius: 4px; background: #10241f; pointer-events: auto; }
.pcb-route-list-label { margin-right: 3px; color: #79b9a6; font: 700 9px ui-monospace, monospace; letter-spacing: .12em; }
.pcb-route-entry { display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 7px; border: 1px solid #3d6e62; border-radius: 3px; color: #c7e9dc; background: #17372f; font: 10px ui-monospace, monospace; cursor: pointer; }
.pcb-route-entry small { color: #8eb9ac; font-size: 9px; }
.pcb-route-entry:hover, .pcb-route-entry.active { border-color: #fff0a8; color: #fff0a8; background: #294a3d; }
.pcb-footprint { position: absolute; z-index: 5; width: 92px; height: 54px; color: #dbe9e2; font-size: 9px; font-weight: 800; transform: translate(-50%, -50%) rotate(var(--pcb-rotation, 0deg)); cursor: grab; user-select: none; overflow: visible; }
.pcb-footprint:hover, .pcb-footprint.selected { border-color: #fff0a8; box-shadow: 0 0 0 2px rgba(255,226,124,.4), 0 0 14px rgba(228,189,97,.26); }
.pcb-footprint:active { cursor: grabbing; }
.pcb-footprint:hover .pcb-body, .pcb-footprint.selected .pcb-body { filter: brightness(1.18) drop-shadow(0 0 7px rgba(255,231,145,.32)); }
.pcb-designator, .pcb-value { position: absolute; z-index: 4; left: 50%; white-space: nowrap; transform: translateX(-50%); text-shadow: 0 1px 2px #07100d; pointer-events: none; }
.pcb-designator { top: -11px; color: #fff0a8; font: 800 9px ui-monospace, monospace; }
.pcb-value { bottom: -11px; color: #9fd2bd; font: 500 8px ui-monospace, monospace; }
.pcb-body { position: absolute; z-index: 2; top: 50%; left: 50%; display: block; border: 1px solid #b88d42; background: #b77f35; box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 3px 6px rgba(0,0,0,.32); transform: translate(-50%, -50%); }
.pcb-lead { position: absolute; z-index: 1; height: 2px; border-radius: 1px; background: linear-gradient(90deg, #e7c775, #8f6c2d); box-shadow: 0 0 2px rgba(255,220,120,.35); transform-origin: left center; pointer-events: none; }
.pcb-body-resistor { width: 48px; height: 15px; border-radius: 8px; background: linear-gradient(#d9b16a, #9a642c); }
.pcb-body-resistor i { display: inline-block; width: 4px; height: 15px; margin-left: 6px; background: #8f3227; } .pcb-body-resistor i:nth-child(2) { background: #2d4e8d; } .pcb-body-resistor i:nth-child(3) { background: #d5b32e; } .pcb-body-resistor i:nth-child(4) { background: #7e4e29; }
.pcb-body-capacitor { width: 22px; height: 31px; border-radius: 45% / 13%; background: linear-gradient(90deg, #426c78, #9bc2c4 48%, #31535e); }
.pcb-body-capacitor i { position: absolute; top: 3px; right: 4px; bottom: 3px; width: 2px; background: #dbe5d4; } .pcb-body-capacitor b { position: absolute; top: 2px; left: 4px; color: #fff0a8; font: 700 9px sans-serif; }
.pcb-body-inductor { width: 48px; height: 17px; border-radius: 9px; background: linear-gradient(#64717a, #2e3940); } .pcb-body-inductor i { display: inline-block; width: 9px; height: 13px; margin: 1px 1px; border: 2px solid #c58b42; border-radius: 50%; }
.pcb-body-diode { width: 39px; height: 13px; border-radius: 7px; background: linear-gradient(#d7d8cb, #686b63); } .pcb-body-diode i { position: absolute; right: 8px; top: 0; width: 3px; height: 11px; background: #4d3f31; }
.pcb-body-diode-photo { width: 64px; height: 32px; border: 0; background: transparent; box-shadow: none; overflow: visible; }
.pcb-body-diode-photo img { position: absolute; left: 50%; top: 50%; display: block; width: 76px; height: 42px; object-fit: contain; pointer-events: none; filter: drop-shadow(0 3px 3px rgba(0,0,0,.42)); transform: translate(-50%, -50%) rotate(32deg); transform-origin: center; }
.pcb-body-led { width: 22px; height: 22px; border-radius: 50% 50% 45% 45%; background: radial-gradient(circle at 35% 30%, #fff5bd 0 12%, #f46f61 30%, #8b2f38 75%); } .pcb-body-led i { position: absolute; right: 4px; top: -4px; width: 3px; height: 29px; background: #e9e5c6; transform: rotate(35deg); } .pcb-body-led b { position: absolute; top: -10px; left: 2px; width: 6px; height: 6px; border-top: 1px solid #fff0a8; border-right: 1px solid #fff0a8; transform: rotate(45deg); }
.pcb-body-battery { width: 34px; height: 27px; border-radius: 5px; background: linear-gradient(90deg, #385e49, #84a66a 50%, #274838); } .pcb-body-battery b { display: inline-block; width: 49%; color: #fff1a1; text-align: center; font: 800 13px sans-serif; }
.pcb-body-fuse { width: 39px; height: 13px; border-radius: 8px; background: #d9d2b9; } .pcb-body-fuse i { position: absolute; top: 5px; left: 6px; right: 6px; border-top: 2px solid #d28d43; }
.pcb-body-connector { width: 44px; height: 26px; border-radius: 3px; background: #27343c; } .pcb-body-connector i { display: inline-block; width: 7px; height: 7px; margin: 8px 2px; border: 1px solid #d8b65d; border-radius: 50%; background: #11191e; }
.pcb-body-switch, .pcb-body-pot { width: 26px; height: 26px; border-radius: 50%; background: #394b52; } .pcb-body-switch i, .pcb-body-pot i { position: absolute; top: 5px; left: 12px; width: 2px; height: 14px; background: #e9c56c; transform: rotate(38deg); transform-origin: bottom; }
.pcb-body-source { width: 27px; height: 27px; border-radius: 50%; background: #38485a; color: #91dcbe; text-align: center; } .pcb-body-source b { font-size: 18px; line-height: 25px; }
.pcb-body-to92 { width: 27px; height: 21px; border-radius: 14px 14px 5px 5px; background: #273a35; } .pcb-body-to92 i { position: absolute; top: 0; left: 12px; width: 2px; height: 21px; background: #6e9d85; }
.pcb-body-dip { width: 46px; height: 23px; border-radius: 4px; background: #263c3a; } .pcb-body-dip::before { content: ""; position: absolute; top: 2px; left: 20px; width: 7px; height: 3px; border-radius: 0 0 6px 6px; background: #7ca78f; } .pcb-body-dip i { display: inline-block; width: 3px; height: 3px; margin: 4px 3px; border-radius: 50%; background: #d8bd69; }
.pcb-body-test, .pcb-body-generic { min-width: 38px; height: 22px; padding: 0 4px; border-radius: 4px; color: #d4ecdf; background: #2b4d43; text-align: center; } .pcb-body-test b, .pcb-body-generic i { font: 700 8px ui-monospace, monospace; line-height: 21px; }
.pcb-pad { position: absolute; z-index: 3; width: 8px; height: 8px; border: 1px solid #4c3b16; border-radius: 50%; background: #6e5826; box-shadow: 0 0 0 1px rgba(255,244,170,.26); transform: translate(-50%, -50%); cursor: crosshair; }
.pcb-pad.pad-left { left: -10%; top: 50%; } .pcb-pad.pad-right { left: 110%; top: 50%; }
.pcb-pad.pad-single { left: 50%; top: 50%; }
.pcb-pad.pad-three-left-bottom { left: 25%; top: 76%; } .pcb-pad.pad-three-left-top { left: 25%; top: 24%; } .pcb-pad.pad-three-right { left: 75%; top: 50%; }
.pcb-pad:hover, .pcb-pad.route-start { border-color: #fff4aa; background: #cfe88c; box-shadow: 0 0 0 3px rgba(255,239,137,.3), 0 0 10px rgba(255,239,137,.5); }
.pcb-footprint.r1 { top: 42%; left: 17%; width: 88px; } .pcb-footprint.d1 { top: 26%; right: 16%; } .pcb-footprint.c1 { bottom: 25%; left: 44%; width: 54px; }
.pcb-track { position: absolute; z-index: 0; height: 2px; background: #d3a846; transform-origin: left center; opacity: .9; cursor: grab; pointer-events: auto; }
.board-shape:not(.route-mode) .pcb-track { z-index: 4; height: 3px; margin-top: -1px; }
.board-shape.route-mode .pcb-track { z-index: 4; pointer-events: auto; }
.board-shape.route-mode .pcb-footprint { z-index: 7; }
.board-shape.route-mode .pcb-pad { z-index: 8; }
.pcb-track:hover, .pcb-track.selected { height: 4px; margin-top: -1px; opacity: 1; box-shadow: 0 0 0 2px rgba(255,239,137,.22), 0 0 9px rgba(255,226,124,.55); }
.pcb-track.selected { z-index: 6; background: #fff0a8; }
.pcb-track.back-copper { background: #65a8dd; box-shadow: 0 0 4px rgba(101,168,221,.45); }
.pcb-track.t1 { top: 48%; left: 25%; width: 300px; transform: rotate(-12deg); } .pcb-track.t2 { top: 46%; left: 61%; width: 120px; transform: rotate(35deg); } .pcb-track.t3 { top: 55%; left: 49%; width: 140px; transform: rotate(84deg); }
.board-shape.pcb-side-bottom .pcb-track.back-copper { z-index: 3; height: 5px; margin-top: -2px; background: #ee462c; border-radius: 999px; box-shadow: 0 0 0 1px rgba(126,35,24,.34), 0 1px 2px rgba(96,35,24,.42); opacity: 1; }
.board-shape.pcb-side-bottom .pcb-track.back-copper:hover, .board-shape.pcb-side-bottom .pcb-track.back-copper.selected { height: 8px; margin-top: -4px; background: #ffb347; box-shadow: 0 0 0 2px rgba(123,47,22,.28), 0 0 12px rgba(255,171,64,.72); }
.pcb-bend { position: absolute; z-index: 7; width: 11px; height: 11px; border: 2px solid #fff0a8; border-radius: 2px; background: #17372f; box-shadow: 0 0 0 2px rgba(255,240,168,.18), 0 0 10px rgba(255,240,168,.42); transform: translate(-50%, -50%); cursor: grab; }
.pcb-bend:hover { background: #8fe0c1; cursor: grabbing; }
.pcb-via { position: absolute; z-index: 6; width: 9px; height: 9px; border: 2px solid #d5aa51; border-radius: 50%; background: #11392f; box-shadow: 0 0 0 1px rgba(4,16,13,.55), 0 0 7px rgba(213,170,81,.25); transform: translate(-50%, -50%); cursor: pointer; }
.pcb-via::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #071b17; }
.pcb-via:hover, .pcb-via.selected { border-color: #fff0a8; box-shadow: 0 0 0 2px rgba(255,240,168,.25), 0 0 10px rgba(255,240,168,.55); }
.simulation-view { position: absolute; inset: 24px 22px 28px 27px; overflow: auto; padding: 28px; border: 1px solid #273642; background: linear-gradient(180deg, #111a22, #10171e); }
.simulation-view h3 { margin: 0 0 8px; font-size: 16px; } .simulation-view p { margin: 0 0 18px; color: var(--muted); font-size: 11px; }
.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 720px; }
.metric-card { padding: 14px; border: 1px solid var(--border); border-radius: 6px; background: #18232d; }
.metric-card small { color: var(--muted); font-size: 10px; } .metric-card strong { display: block; margin-top: 7px; color: var(--accent); font: 700 21px ui-monospace, monospace; }
.waveform { max-width: 720px; margin-top: 18px; padding: 12px; border: 1px solid var(--border); border-radius: 6px; background: #10171e; }
.waveform svg { width: 100%; height: 155px; display: block; }
.simulation-view-live { padding: 20px; }
.simulation-view-live .simulation-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; max-width: 1040px; }
.simulation-view-live .simulation-head p { margin-bottom: 0; }
.simulation-head-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.sim-control { min-height: 28px; padding: 0 10px; border: 1px solid #3b5960; border-radius: 4px; color: #b7cbd1; background: #17252d; font-size: 10px; cursor: pointer; }
.sim-control:hover, .sim-control.active { border-color: #8fe0c1; color: #e8fff6; background: #1c443b; }
.sim-control.primary { border-color: #5ee1bd; color: #071711; background: var(--accent); font-weight: 800; }
.sim-control.primary:hover, .sim-control.primary.active { color: #071711; background: #7be6c8; }
.sim-speed { display: flex; align-items: center; gap: 5px; color: #7f919e; font-size: 9px; }
.sim-speed select, .simulation-probe-strip select { padding: 5px 6px; border: 1px solid #3a515d; border-radius: 3px; color: #dce5eb; background: #111a22; font: 10px ui-monospace, monospace; }
.sim-clock { min-width: 58px; color: #fff0a8; font: 10px ui-monospace, monospace; }
.simulation-layout { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 12px; max-width: 1040px; margin-top: 17px; }
.simulation-live-card, .simulation-side-card { min-width: 0; border: 1px solid #2c414b; border-radius: 6px; background: #121d25; }
.simulation-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-bottom: 1px solid #293a44; color: #cfe0e5; font-size: 10px; }
.simulation-card-heading > span { color: #75d9b8; font: 700 9px ui-monospace, monospace; letter-spacing: .08em; }
.simulation-schematic-wrap { height: min(410px, 42vh); min-height: 250px; padding: 10px; background: #0d151c; }
.simulation-schematic-canvas { display: block; width: 100%; height: 100%; border: 1px solid #283a45; background: #111a22; }
.simulation-schematic-canvas .circuit-wire { stroke: #556873; stroke-width: 2.4; }
.simulation-schematic-canvas .circuit-component { transition: filter .18s ease, opacity .18s ease; }
.simulation-schematic-canvas .simulation-energized .symbol { filter: drop-shadow(0 0 5px rgba(69,199,164,.9)); }
.simulation-schematic-canvas .simulation-output-on .symbol { filter: drop-shadow(0 0 7px rgba(255,204,91,1)); }
.simulation-schematic-canvas .simulation-output-on .component-label { fill: #fff0a8; }
.simulation-schematic-canvas .simulation-live-wire { stroke: #f0ca68; stroke-width: 3.2; stroke-dasharray: 8 6; filter: drop-shadow(0 0 4px rgba(240,202,104,.65)); animation: simulation-flow 1s linear infinite; }
@keyframes simulation-flow { to { stroke-dashoffset: -28; } }
.simulation-probe-strip { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 9px 12px; border-top: 1px solid #293a44; color: #7e909c; font-size: 9px; }
.simulation-probe-strip label { display: flex; align-items: center; gap: 6px; }
.simulation-probe-strip strong { color: #fff0a8; font: 700 13px ui-monospace, monospace; }
.simulation-probe-strip span { margin-left: auto; color: #6d7f8b; }
.simulation-side-card { overflow: hidden; }
.sim-activity-list { display: grid; gap: 2px; padding: 7px; }
.sim-activity { display: flex; align-items: center; gap: 8px; padding: 8px 7px; border: 1px solid transparent; border-radius: 4px; opacity: .72; }
.sim-input-control { width: 100%; color: inherit; text-align: left; cursor: pointer; }
.sim-input-control:hover { border-color: #46766a; background: rgba(69,199,164,.06); }
.sim-activity.active { border-color: #365b52; background: rgba(69,199,164,.09); opacity: 1; }
.sim-activity-light { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #42535b; box-shadow: inset 0 0 0 1px #26343b; }
.sim-activity.active .sim-activity-light { background: #6de6bd; box-shadow: 0 0 9px rgba(109,230,189,.9); }
.sim-activity span:nth-child(2) { min-width: 0; flex: 1; }
.sim-activity strong, .sim-activity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sim-activity strong { color: #d7e6e8; font: 700 10px ui-monospace, monospace; }
.sim-activity small { margin-top: 2px; color: #738692; font-size: 9px; }
.sim-activity em { color: #687b84; font: 700 8px ui-monospace, monospace; font-style: normal; }
.sim-activity.active em { color: #86e7c8; }
.sim-pot-slider { display: block; width: 100%; height: 4px; margin-top: 6px; accent-color: var(--accent); cursor: ew-resize; }
.simulation-metrics { grid-template-columns: repeat(4, 1fr); max-width: 1040px; margin-top: 12px; }
.simulation-metrics .metric-card { padding: 11px 12px; }
.simulation-metrics .metric-card strong { margin-top: 5px; font-size: 17px; }
.simulation-waveform { max-width: 1040px; margin-top: 12px; }
.simulation-waveform .simulation-card-heading { margin: -12px -12px 9px; }
.bottom-drawer { min-height: 0; border-top: 1px solid var(--border); background: #111820; }
.drawer-heading { display: flex; align-items: center; justify-content: space-between; height: 36px; padding: 0 10px 0 15px; border-bottom: 1px solid #283440; }
.drawer-tabs { display: flex; align-items: center; gap: 18px; height: 100%; }
.drawer-tab { position: relative; height: 100%; border: 0; color: var(--muted); background: transparent; font-size: 10px; cursor: pointer; }
.drawer-tab.active { color: var(--text); } .drawer-tab.active::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--accent); }
.drawer-content { height: 105px; overflow: auto; padding: 12px 15px; color: #aab7c3; font: 10px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; }
.console-muted { color: #627281; font-family: inherit; }
.erc-list { display: grid; gap: 6px; font-family: inherit; }
.erc-item { display: flex; align-items: flex-start; gap: 8px; }
.erc-icon { width: 16px; color: var(--accent); font-weight: 800; }
.erc-item.warning .erc-icon { color: var(--orange); }
.erc-item.error .erc-icon { color: var(--red); }

.inspector-content { flex: 1; overflow: auto; padding: 0 14px; }
.selection-card { display: flex; align-items: center; gap: 10px; padding: 11px; border: 1px solid #33504d; border-radius: 5px; background: rgba(69,199,164,.08); }
.selection-glyph { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 4px; color: var(--accent); background: #142c29; font-size: 16px; }
.selection-card strong { display: block; font-size: 11px; } .selection-card small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }
.property-section { margin-top: 21px; } .property-section h3 { margin: 0 0 9px; color: #8493a2; font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.property-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 31px; border-bottom: 1px solid #26313c; color: #9eabb7; font-size: 10px; }
.property-row input, .property-row select { width: 106px; padding: 5px 6px; border: 1px solid #354553; border-radius: 3px; outline: none; color: var(--text); background: #111a22; font: 10px ui-monospace, monospace; }
.property-row input:focus, .property-row select:focus { border-color: var(--accent); }
.property-apply { width: 100%; margin-top: 9px; padding: 6px 8px; border: 1px solid #3d6e62; border-radius: 4px; color: #b9f0df; background: #17372f; font-size: 10px; cursor: pointer; }
.property-apply:hover { border-color: var(--accent); background: #1d4b40; }
.property-apply.secondary { color: #d7e1e7; border-color: #40515e; background: #202b34; }
.selection-list { display: grid; gap: 2px; max-height: 126px; overflow: auto; }
.multi-selection .selection-glyph { color: #fff0a8; }
.bom-view { min-width: 620px; color: #bac8d1; font-size: 10px; }
.bom-summary { display: flex; align-items: center; justify-content: space-between; padding: 2px 0 8px; color: #8ff1d2; }
.bom-summary span { color: #7c8d9b; }
.bom-table { width: 100%; border-collapse: collapse; }
.bom-table th, .bom-table td { padding: 6px 8px; border-bottom: 1px solid #2b3741; text-align: left; white-space: nowrap; }
.bom-table th { color: #728594; font-size: 9px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.bom-table td { color: #c8d3da; }
.bom-table td strong { color: #8ff1d2; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.property-value { color: #dbe4eb; font-family: ui-monospace, monospace; }
.inspector-footer { padding: 12px 14px; border-top: 1px solid var(--border); color: #68798a; font-size: 9px; } .inspector-footer .keycap { margin-right: 4px; } .inspector-footer .keycap:nth-of-type(2) { margin-left: 13px; }
.empty-inspector { padding: 45px 20px; color: #657686; text-align: center; font-size: 11px; line-height: 1.6; }
.empty-inspector .empty-icon { display: block; margin-bottom: 12px; color: #405260; font-size: 32px; }
.collapsed { display: none; }

/* Space-saving workspace controls */
.app-shell.toolbar-collapsed { grid-template-rows: 58px 0 minmax(0, 1fr) 28px; }
.toolbar-collapsed .toolbar { height: 0; min-height: 0; overflow: hidden; padding-top: 0; padding-bottom: 0; border-bottom: 0; }
.toolbar-toggle { color: #8fa3b1; font-size: 16px; }
.workspace:has(.left-panel.collapsed) { grid-template-columns: 48px minmax(0, 1fr) 244px; }
.workspace:has(.right-panel.collapsed) { grid-template-columns: 246px minmax(0, 1fr) 48px; }
.workspace:has(.left-panel.collapsed):has(.right-panel.collapsed) { grid-template-columns: 48px minmax(0, 1fr) 48px; }
.left-panel.collapsed, .right-panel.collapsed { display: flex; }
.left-panel.collapsed > :not(.panel-heading), .right-panel.collapsed .right-panel-panes { display: none; }
.left-panel.collapsed .panel-heading { justify-content: center; padding: 15px 8px; }
.left-panel.collapsed .panel-heading > div { display: none; }

.right-panel-shell { display: flex; min-width: 0; min-height: 0; height: 100%; }
.panel-tabs { width: 50px; flex: 0 0 50px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border-right: 1px solid var(--border); background: #131b22; }
.panel-tab { width: 38px; min-height: 45px; display: grid; place-items: center; gap: 2px; padding: 5px 2px; border: 1px solid transparent; border-radius: 5px; color: #718392; background: transparent; cursor: pointer; }
.panel-tab span { font-size: 17px; line-height: 1; }
.panel-tab small { font-size: 8px; letter-spacing: .05em; }
.panel-tab:hover, .panel-tab.active { color: #dffaf2; border-color: rgba(69,199,164,.35); background: rgba(69,199,164,.12); }
.panel-collapse-button { margin-top: auto; width: 30px; flex: 0 0 24px; }
.right-panel-panes { min-width: 0; min-height: 0; flex: 1; }
.right-panel-pane { min-width: 0; min-height: 0; height: 100%; flex-direction: column; }
.right-panel-pane.active { display: flex; }
.right-panel-pane[hidden] { display: none; }
.side-tool-content { min-height: 0; overflow: auto; padding: 0 12px 15px; }
.side-tool-section { display: grid; gap: 7px; margin-bottom: 16px; padding-bottom: 13px; border-bottom: 1px solid #293640; }
.side-tool-section-title { color: #8493a2; font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.side-tool-note, .side-tool-empty { margin: 0 0 12px; color: #718392; font-size: 10px; line-height: 1.5; }
.compact-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pcb-action { min-height: 30px; padding: 5px 7px; border: 1px solid #3d6e62; border-radius: 4px; color: #b9f0df; background: #17372f; font-size: 9px; cursor: pointer; }
.pcb-action.active, .pcb-action:hover { color: #16251f; border-color: var(--accent); background: #8fe0c1; }
.pcb-setup-inline { grid-template-columns: 1fr 1fr; align-items: center; }
.pcb-setup-inline .side-tool-section-title, .pcb-setup-inline .pcb-action { grid-column: 1 / -1; }
.pcb-setup-inline label { display: grid; gap: 4px; color: #7faaa0; font-size: 9px; }
.pcb-setup-inline input { width: 100%; padding: 5px; border: 1px solid #3d6e62; border-radius: 3px; color: #e1f5ec; background: #0f211f; font: 10px ui-monospace, monospace; }
.pcb-route-entry { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; width: 100%; padding: 7px 8px; border: 1px solid #3d6e62; border-radius: 4px; color: #c7e9dc; background: #17372f; font: 10px ui-monospace, monospace; text-align: left; cursor: pointer; }
.pcb-route-entry small { color: #8eb9ac; font-size: 9px; }
.pcb-route-entry:hover, .pcb-route-entry.active { border-color: #fff0a8; color: #fff0a8; background: #294a3d; }
.schematic-tools .side-tool-button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 9px; border: 1px solid #33434f; border-radius: 4px; color: #b7c5cf; background: #1b2630; font-size: 10px; text-align: left; cursor: pointer; }
.schematic-tools .side-tool-button span { width: 16px; color: var(--accent); text-align: center; font-size: 15px; }
.schematic-tools .side-tool-button:hover, .schematic-tools .side-tool-button.active { border-color: var(--accent); color: #e6fbf5; background: rgba(69,199,164,.12); }

.statusbar { display: flex; align-items: center; justify-content: space-between; padding: 0 14px; color: #7c8b99; background: #0d1318; border-top: 1px solid #26323d; font-size: 9px; }
.status-message, .status-center, .status-right { display: flex; align-items: center; gap: 7px; } .status-center { margin-left: 100px; } .status-separator { color: #42515e; }

.light-theme { --bg: #edf2f4; --bg-deep: #dce5e9; --panel: #f4f7f8; --panel-raised: #fff; --panel-soft: #e7eef1; --border: #c8d3d9; --border-strong: #9eafb9; --text: #1c2b36; --muted: #60727e; --faint: #8797a1; --canvas: #e6eef1; }
.light-theme body { background: #dce5e9; } .light-theme .topbar, .light-theme .statusbar { background: #e3ebee; } .light-theme .toolbar, .light-theme .mode-tabs { background: #f2f6f7; } .light-theme .schematic-canvas { background: #e8f0f2; } .light-theme .search-field, .light-theme .drawer-content, .light-theme .waveform, .light-theme .simulation-view { background: #f6fafb; }

@media (max-width: 1180px) { .workspace { grid-template-columns: 218px minmax(0, 1fr) 218px; } .tool-button span:last-child { display: none; } .brand-lockup { min-width: 184px; } }
@media (max-width: 900px) { .simulation-layout { grid-template-columns: 1fr; } .simulation-side-card { min-height: 0; } .sim-activity-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .firmware-layout { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; } .firmware-inspector { max-height: 210px; border-top: 1px solid var(--border); border-left: 0; } }
@media (max-width: 680px) { .simulation-view-live .simulation-head { display: block; } .simulation-head-actions { justify-content: flex-start; } .simulation-metrics { grid-template-columns: repeat(2, 1fr); } .simulation-probe-strip span { width: 100%; margin-left: 0; } }

@media print {
  @page { size: landscape; margin: 10mm; }
  body.pcb-printing { background: #fff !important; color: #000 !important; }
  body.pcb-printing .topbar, body.pcb-printing .toolbar, body.pcb-printing .left-panel, body.pcb-printing .right-panel, body.pcb-printing .mode-tabs, body.pcb-printing .bottom-drawer { display: none !important; }
  body.pcb-printing, body.pcb-printing .app-shell, body.pcb-printing .workspace, body.pcb-printing .main-stage { width: 100% !important; min-width: 0 !important; height: 175mm !important; min-height: 0 !important; overflow: hidden !important; background: #fff !important; }
  body.pcb-printing .app-shell, body.pcb-printing .workspace, body.pcb-printing .main-stage { display: block !important; }
  body.pcb-printing .canvas-wrap.pcb-view { position: relative !important; display: block !important; width: 100% !important; height: 175mm !important; min-height: 0 !important; overflow: hidden !important; background: #fff !important; }
  body.pcb-printing .pcb-toolbar, body.pcb-printing .canvas-status, body.pcb-printing .canvas-help { display: none !important; }
  body.pcb-printing .pcb-board { position: relative !important; inset: auto !important; width: 100% !important; height: 175mm !important; display: grid !important; place-items: center !important; transform: none !important; page-break-inside: avoid !important; break-inside: avoid !important; }
  body.pcb-printing .pcb-board-edge, body.pcb-printing .board-shape .pcb-board-edge { display: none !important; }
  body.pcb-printing .board-shape { width: min(88vw, 240mm) !important; border: 2px solid #000 !important; border-radius: 0 !important; background: #fff !important; box-shadow: none !important; transform: none !important; }
  body.pcb-printing .board-shape::before { color: #000 !important; text-shadow: none !important; }
  body.pcb-printing .board-shape::after { border-color: #000 !important; }
  body.pcb-printing .pcb-track, body.pcb-printing .pcb-track.back-copper { background: #000 !important; box-shadow: none !important; opacity: 1 !important; }
  body.pcb-printing .board-shape.pcb-mode-bottom-traces .pcb-track.back-copper { display: block !important; }
  body.pcb-printing .pcb-lead { background: #fff !important; border: 1px solid #000; box-shadow: none !important; }
  body.pcb-printing .pcb-pad, body.pcb-printing .pcb-via { border: 2px solid #000 !important; background: #fff !important; box-shadow: none !important; }
  body.pcb-printing .pcb-pad::after, body.pcb-printing .pcb-via::after { background: #000 !important; }
  body.pcb-printing .pcb-designator, body.pcb-printing .pcb-value { color: #000 !important; text-shadow: none !important; }
  body.pcb-printing .pcb-body { background: #fff !important; border: 2px solid #000 !important; box-shadow: none !important; filter: none !important; }
  body.pcb-printing .pcb-body-diode-photo img { display: none !important; }
  body.pcb-printing .pcb-body-diode-photo::after { content: "D"; display: block; color: #000; font: 700 12px sans-serif; text-align: center; line-height: 28px; }
  body.pcb-printing.pcb-print-mirror .board-shape { transform: scaleX(-1) !important; }
}