/* Design tokens + base. Dark engineering look: slate surfaces, teal accent, copper wires. */
:root {
  color-scheme: dark;
  --bg-app: #0e1115;
  --bg-panel: #151a20;
  --bg-raised: #1c222a;
  --bg-input: #10141a;
  --line: #2a323d;
  --line-soft: #202730;
  --text: #d5dbe3;
  --muted: #8591a1;
  --accent: #38b6c6;
  --accent-soft: rgba(56, 182, 198, .16);
  --danger: #ef6a63;
  --warn: #e3a948;
  --ok: #55c28a;
  --sym: #cfd7e2;
  --wire: #d9a441;
  --pin: #7d8a9b;
  --ws-bg: #0f1318;
  --grid-minor: rgba(150, 170, 195, .07);
  --grid-major: rgba(150, 170, 195, .15);
  --font: "Lato", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-fa: "Vazirmatn", "Tahoma", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, Menlo, monospace;
  --radius: 5px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg-app);
  color: var(--text);
  font: 13px/1.45 var(--font);
  overflow: hidden;
}
html[lang="fa"] body,
html[dir="rtl"] body {
  font-family: var(--font-fa);
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
h1, h2, h3 { margin: 0; font-weight: 600; }
p { margin: 0 0 8px; }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); }
.pad { padding: 12px; }
.hidden { display: none !important; }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.btn {
  display: inline-flex; align-items: center; gap: 6px; justify-content: center;
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 5px 10px; line-height: 1.2;
}
.btn:hover:not(:disabled) { border-color: #3a4554; background: #232a34; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #07191c; font-weight: 600; }
.btn.primary:hover { background: #4ac4d3; }
.btn.danger { color: var(--danger); }
.btn.danger:hover:not(:disabled) { border-color: var(--danger); background: rgba(239, 106, 99, .1); }
.btn.small { padding: 3px 8px; }

input[type="text"], input[type="number"], input[type="search"], select {
  background: var(--bg-input); border: 1px solid var(--line); border-radius: 4px;
  padding: 4px 7px; min-width: 0; width: 100%;
}
input:hover, select:hover { border-color: #3a4554; }
input:focus, select:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 2px var(--accent-soft); }

.icon { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.icon.filled { fill: currentColor; stroke: none; }

.toasts { position: fixed; right: 14px; bottom: 200px; display: flex; flex-direction: column; gap: 6px; z-index: 60; pointer-events: none; }
.toast {
  background: var(--bg-raised); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  padding: 8px 12px; border-radius: var(--radius); max-width: 340px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .4); animation: toast-in .15s ease-out;
}
.toast.warn { border-left-color: var(--warn); }
.toast.error { border-left-color: var(--danger); }
.toast.success { border-left-color: var(--ok); }
.toast.leaving { opacity: 0; transition: opacity .3s; }
@keyframes toast-in { from { transform: translateY(6px); opacity: 0; } }

.fatal { position: fixed; inset: 0; background: var(--bg-app); display: grid; place-items: center; padding: 24px; z-index: 100; text-align: center; }
.fatal > div { max-width: 460px; }
.fatal h2 { margin-bottom: 8px; }

/* Non-blocking small-screen banner (dismissible). Not a full mobile app claim. */
.mobile-notice { display: none; }
.mobile-notice.dismissed { display: none !important; }
@media (max-width: 820px) {
  .mobile-notice {
    display: block;
    position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 90;
    background: var(--bg-panel, #121a22); border: 1px solid var(--line, #2a3a48);
    border-radius: 10px; padding: 12px 14px; text-align: start;
    box-shadow: 0 8px 28px rgba(0,0,0,.45); max-width: 420px; margin-inline: auto;
  }
  .mobile-notice h2 { margin: 0 0 4px; font-size: 14px; }
  .mobile-notice p { margin: 0 0 8px; font-size: 12px; color: var(--muted, #9eafb9); line-height: 1.4; }
  .mobile-notice .tb-btn { min-height: 36px; min-width: 44px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

.language-switcher{display:flex;align-items:center;gap:5px;color:var(--muted);font-size:11px;white-space:nowrap}.language-switcher select{width:auto;min-width:86px;padding:3px 6px}.mono,.comp-value,[data-technical],input[type=number]{direction:ltr;unicode-bidi:isolate}
html[dir=rtl] .sidebar.left{border-right:0;border-left:1px solid var(--line)}html[dir=rtl] .sidebar.right{border-left:0;border-right:1px solid var(--line)}html[dir=rtl] .ws-status span:last-child{margin-left:0;margin-right:auto}

:root { --wire-color: #4aa3df; }
.wire-line { stroke: var(--wire-color); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.wire-hit { stroke-width: 12; fill: none; stroke: transparent; pointer-events: stroke; }
.simulation-overlay { font: 11px system-ui, sans-serif; fill: var(--text); pointer-events:none; }
.simulation-overlay.node-voltage { font-weight: 600; }
.sim-led-on { font-weight: 700; }
.sim-led-off { opacity: .65; }
.sim-results { padding: 10px; }
.sim-results h3 { margin: 0 0 8px; }
.sim-row { display:flex; gap:14px; align-items:center; padding:6px 0; border-bottom:1px solid var(--border); font-size:12px; }
.sim-row strong { min-width:70px; }

/* Phase 4: measurement instruments */
.instruments-toolbar,.instrument-actions,.instrument-card-head,.instrument-fields{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.instruments-toolbar{justify-content:space-between;padding:14px;gap:14px;border-bottom:1px solid var(--border,#263744)}
.instruments-toolbar h2{font-size:15px;margin:0 0 4px}.instruments-toolbar p{margin:0;font-size:12px}
.instrument-card{margin:12px;padding:14px;border:1px solid var(--border,#263744);border-radius:12px;background:var(--panel,#101a24);min-width:0}
.instrument-card.active{border-color:var(--accent,#53c7a6);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent,#53c7a6) 22%,transparent)}
.instrument-card-head{justify-content:space-between;margin-bottom:10px}.instrument-card-head h3{font-size:14px;margin:0}.instrument-card-head code{font-size:10px;opacity:.65;direction:ltr;overflow-wrap:anywhere}
.instrument-btn{border:1px solid var(--border,#304453);border-radius:7px;background:var(--surface,#172632);color:var(--text,#e5edf1);padding:7px 10px;font:inherit;font-size:12px;cursor:pointer}.instrument-btn:hover,.instrument-btn:focus-visible{outline:2px solid var(--accent,#53c7a6);outline-offset:1px}.instrument-btn.primary{background:#1d5a51;border-color:#347e70}.instrument-btn.danger{color:#ffaaa0}
.instrument-fields{margin:10px 0}.instrument-field{display:flex;flex-direction:column;gap:5px;min-width:135px;flex:1;font-size:11px;color:var(--muted,#9eafb9)}.instrument-field select{min-width:0;width:100%;background:var(--surface,#172632);color:var(--text,#e5edf1);border:1px solid var(--border,#304453);border-radius:6px;padding:7px;font:inherit;font-size:12px;direction:ltr}
.multimeter-display{display:flex;flex-direction:column;gap:5px;align-items:flex-end;min-height:70px;justify-content:center;padding:12px 16px;border:5px solid #263c43;border-radius:8px;background:#c7dfbf;color:#17281c;font-family:ui-monospace,monospace}.multimeter-display strong{font-size:clamp(21px,3vw,30px);font-weight:650;overflow-wrap:anywhere}.multimeter-display span{font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.meter-inputs{display:flex;gap:10px;margin:10px 0 12px;justify-content:center}.meter-inputs span{min-width:58px;text-align:center;padding:8px;border-radius:7px;background:#26343c;color:#dce7ec;font:600 11px ui-monospace,monospace}.meter-inputs .com{border-bottom:3px solid #111}.meter-inputs .v-ohm{border-bottom:3px solid #c9443c}.meter-inputs .amp{border-bottom:3px solid #dba832}
.instrument-error,.instrument-warning,.scope-note{font-size:12px;line-height:1.5;overflow-wrap:anywhere}.instrument-error{color:#ff9c92}.instrument-warning,.scope-note{color:var(--muted,#9eafb9)}.scope-screen{width:100%;max-height:260px;display:block;background:#07151d;border-radius:8px;margin:8px 0}.instrument-card select:focus-visible{outline:2px solid var(--accent,#53c7a6);outline-offset:1px}

/* Phase 4 (final): instruments, probes, oscilloscope */
.ltr{direction:ltr;unicode-bidi:isolate}
.instrument-id{opacity:.65;font-size:10px}
.instruments-toolbar h2{margin:0 0 4px}
.instrument-count{margin:6px 0 0!important;font-weight:600;color:var(--text,#e5edf1)}
.instrument-hint{margin:0;padding:8px 14px;background:#3a3216;color:#ffe58a;font-size:12px;border-bottom:1px solid #6b5b1d}
.instrument-check,.instrument-power{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted,#9eafb9);cursor:pointer}
.instrument-card input[type=number]{width:100%;min-width:0;background:var(--surface,#172632);color:var(--text,#e5edf1);border:1px solid var(--border,#304453);border-radius:6px;padding:7px;font:inherit;font-size:12px;direction:ltr}
.instrument-card input:focus-visible,.instrument-card button:focus-visible,.instrument-card select:focus-visible,.instrument-card:focus-visible{outline:2px solid var(--accent,#53c7a6);outline-offset:1px}
.instrument-card-head{justify-content:space-between}
.multimeter-display{direction:ltr;align-items:stretch;gap:2px;transition:background .15s}
.multimeter-display[data-tone=off]{background:#9aa89a;color:#4a554a}
.multimeter-display[data-tone=error],.multimeter-display[data-tone=idle]{background:#b9cfb2}
.multimeter-display[data-tone=warn]{background:#d8d49b}
.mm-row{display:flex;align-items:baseline;justify-content:flex-end;gap:10px}
.mm-row.small{justify-content:space-between;min-height:14px}
.mm-flag{font-weight:700;font-size:18px}
.mm-mode{unicode-bidi:plaintext;font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.mm-sub{font-size:12px;opacity:.8}
.meter-inputs .jack{min-width:58px;text-align:center;padding:8px;border-radius:7px;background:#26343c;color:#dce7ec;font:600 11px ui-monospace,monospace;opacity:.55;border-bottom:3px solid #555}
.meter-inputs .jack.com{border-bottom-color:#111}.meter-inputs .jack.vo{border-bottom-color:#c9443c}.meter-inputs .jack.a{border-bottom-color:#dba832}
.meter-inputs .jack.active{opacity:1;box-shadow:0 0 0 2px var(--accent,#53c7a6)}
.probe-row{display:flex;align-items:flex-end;gap:8px;margin:8px 0;flex-wrap:wrap}
.probe-swatch{width:12px;height:30px;border-radius:4px;border:1px solid #6b7f8a;flex:none}
.probe-label{display:flex;flex-direction:column;gap:4px;flex:1;min-width:150px;font-size:11px;color:var(--muted,#9eafb9)}
.probe-label select{width:100%;background:var(--surface,#172632);color:var(--text,#e5edf1);border:1px solid var(--border,#304453);border-radius:6px;padding:7px;font:inherit;font-size:12px}
.instrument-btn.pick[aria-pressed=true]{background:#7a5d0f;border-color:#d1a52a;color:#fff}
.instrument-messages p{margin:6px 0}
.instrument-error code,.instrument-error .code{font-weight:700;margin-inline-end:4px}
.instrument-debug{display:grid;grid-template-columns:max-content 1fr;gap:2px 12px;margin:10px 0 0;padding:8px 10px;background:#0b141b;border:1px dashed #3d5663;border-radius:6px;font:11px ui-monospace,monospace;color:#b9ccd4;overflow-wrap:anywhere}
.instrument-debug dt{color:#7f98a2}.instrument-debug dd{margin:0}
.scope-screen{max-height:none}
.scope-status{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font-size:12px;margin:4px 0}
.badge-static,.badge-frozen{padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600}
.badge-static{background:#14414a;color:#8de9ff}.badge-frozen{background:#4a3a14;color:#ffe08a}
.scope-cursor-out{display:flex;flex-wrap:wrap;gap:8px 18px;font:12px ui-monospace,monospace;margin:6px 0}
/* workspace: probe markers must never block clicks; pick mode highlights targets */
.probe-layer{pointer-events:none}
.probe-marker text{paint-order:stroke;direction:ltr;unicode-bidi:isolate}
svg.probe-placing,svg.probe-placing .pin-hit,svg.probe-placing .wire-hit{cursor:crosshair}
.pin.probe-hover .pin-dot{fill:#ffd23f;stroke:#fff;stroke-width:2}
.wire.probe-hover .wire-line{stroke:#ffd23f!important;stroke-width:4}
@media (max-width:640px){.probe-row{align-items:stretch}.probe-label{min-width:100%}}
@media (prefers-reduced-motion:reduce){.multimeter-display{transition:none}}

/* Phase 4.1: resizable bottom panel */
.bottom{height:var(--bottom-h,190px);position:relative}
.bottom.collapsed{height:34px}
.toasts{bottom:calc(var(--bottom-h,190px) + 10px)}
.bottom-resizer{position:absolute;inset-inline:0;top:-4px;height:9px;cursor:ns-resize;z-index:30;touch-action:none}
.bottom-resizer::after{content:"";position:absolute;left:50%;top:3px;width:46px;height:3px;border-radius:3px;background:var(--line,#2a323d);transform:translateX(-50%);transition:background .15s}
.bottom-resizer:hover::after,.bottom-resizer.active::after,.bottom-resizer:focus-visible::after{background:var(--accent,#38b6c6)}
.bottom-resizer:focus-visible{outline:none}
body:has(.bottom-resizer.active){cursor:ns-resize;user-select:none}

/* Phase 4.1: instruments as tools on the workspace */
.lib-preview{display:flex;align-items:center;justify-content:center;height:48px}
.widget-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden;direction:ltr}
.lead-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.inst-widget{position:absolute;pointer-events:auto;direction:ltr;max-width:calc(100% - 8px);background:#121b22;border:1px solid #3a4f5b;border-radius:10px;box-shadow:0 10px 28px rgba(0,0,0,.5);overflow:hidden;font-size:12px}
html[dir=rtl] .inst-widget{direction:rtl}
.inst-widget.dragging{opacity:.92;box-shadow:0 14px 34px rgba(0,0,0,.65)}
.inst-widget.on-canvas{box-shadow:0 8px 22px rgba(0,0,0,.45),0 0 0 1px rgba(56,182,198,.25);border-radius:10px}
.inst-widget.on-canvas .inst-widget-head{background:linear-gradient(180deg,#243440,#1b2832)}
.scope-screen{background:#07151d;border-radius:4px}
.widget-layer{position:absolute;inset:0;pointer-events:none;z-index:4}
.widget-layer .inst-widget{pointer-events:auto}
.lead-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}

.inst-widget.powered-off{filter:grayscale(.6)}
.inst-widget-head{display:flex;align-items:center;gap:8px;padding:6px 8px;background:#1b2832;cursor:grab;user-select:none;touch-action:none;border-bottom:1px solid #2c3d48}
.inst-widget-head:active{cursor:grabbing}
.inst-widget-head:focus-visible{outline:2px solid var(--accent,#38b6c6);outline-offset:-2px}
.inst-widget-title{font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inst-widget-mini{display:none;font:700 13px ui-monospace,monospace;color:#b9f5c8;background:#0b141b;padding:2px 8px;border-radius:5px}
.inst-widget.collapsed .inst-widget-mini{display:inline-block}
.inst-widget.collapsed .inst-widget-body{display:none}
.inst-widget-btn{background:none;border:0;color:#c8d6dd;font-size:15px;line-height:1;width:24px;height:24px;border-radius:5px;cursor:pointer}
.inst-widget-btn:hover{background:#2a3b46}.inst-widget-btn:focus-visible{outline:2px solid var(--accent,#38b6c6)}
.inst-widget-body{max-height:min(70vh,640px);overflow:auto}
.inst-widget .instrument-card{margin:0;border:0;border-radius:0;padding:10px;background:transparent}
.inst-widget .instrument-card-head.compact{margin-bottom:6px}
.inst-widget .instrument-card-head.compact .instrument-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.inst-widget .instrument-fields{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
.inst-widget .probe-label{min-width:120px}
.inst-widget .mm-reading{font-size:30px}
.widget-more summary{cursor:pointer;color:var(--muted,#9eafb9);padding:4px 0}
.instrument-btn.hold[aria-pressed=true]{background:#14414a;border-color:#8de9ff;color:#fff}
.probe-banner{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:5;pointer-events:none;padding:8px 14px;background:#3a3216;color:#ffe58a;border:1px solid #d1a52a;border-radius:8px;font-size:12px;box-shadow:0 6px 18px rgba(0,0,0,.45)}
@media (prefers-reduced-motion:reduce){.bottom-resizer::after{transition:none}}
.inst-widget .probe-row{flex-wrap:nowrap;gap:6px}
.inst-widget .probe-label{min-width:0}
.inst-widget .probe-row .instrument-btn{white-space:nowrap;padding-inline:8px}

/* Safer small-screen layout (usable basics; not a full mobile app claim). */
@media (max-width: 900px) {
  .toolbar { flex-wrap: wrap; row-gap: 4px; min-height: 48px; padding-block: 4px; overflow: visible; }
  .tb-spacer { display: none; }
  .tb-group { flex-wrap: wrap; }
  .tb-btn { min-height: 36px; min-width: 36px; padding: 6px 10px; }
  .toolbar .project-field { max-width: 40vw; }
  .main { grid-template-columns: minmax(0, 1fr) !important; }
  .sidebar.left, .sidebar.right {
    position: fixed; z-index: 40; top: auto; bottom: 0; max-height: 42vh;
    width: min(100%, 360px); box-shadow: 0 -8px 24px rgba(0,0,0,.35);
  }
  .sidebar.left { left: 0; right: auto; }
  .sidebar.right { right: 0; left: auto; }
  html[dir="rtl"] .sidebar.left { right: 0; left: auto; }
  html[dir="rtl"] .sidebar.right { left: 0; right: auto; }
  .workspace-wrap { min-height: 50vh; }
  .bottom { max-height: 36vh; }
  .lib-list .lib-item, .examples-list button { min-height: 44px; }
}
@media (max-width: 520px) {
  .brand-word { display: none; }
  .tb-btn .lbl { display: none; }
  .tb-btn.run .lbl { display: inline; }
}

/* Oscilloscope (live, continuous) */
.scope-actions{gap:6px;margin:6px 0}
.scope-ch{padding-inline-start:8px;margin:6px 0}
.scope-meas{width:100%;border-collapse:collapse;font:11px ui-monospace,monospace;margin:6px 0}
.scope-meas th,.scope-meas td{padding:2px 6px;text-align:end;white-space:nowrap}
.scope-meas thead th{color:var(--muted,#9eafb9);font-weight:600}
.scope-meas tbody th{text-align:start}
.scope-screen{shape-rendering:geometricPrecision}

/* ---- Live oscilloscope + on-canvas instruments (EveryCircuit-style) ---- */
.scope-canvas{display:block;width:100%;height:190px;background:#05080d;border-radius:6px;touch-action:none;cursor:crosshair;direction:ltr}
.scope-canvas.large{height:260px}
.instrument-card.scope .live-only{display:none}
.instrument-card.scope.is-live .live-only{display:flex}
.instrument-card.scope.is-live .classic-only{display:none!important}
.instrument-card.scope:not(.is-live) .scope-canvas,.instrument-card.scope:not(.is-live) .scope-live-stats{display:none}
.instrument-card.scope.is-live .scope-meas{display:none}
.inst-widget .instrument-card.scope.is-live .scope-status{display:none}
.scope-live-stats{display:flex;flex-direction:column;gap:3px;margin:6px 0 2px;font:11px ui-monospace,Menlo,Consolas,monospace;color:#c8d6dd}
.live-stat-row{display:flex;flex-wrap:wrap;gap:2px 12px;align-items:center;padding:3px 6px;background:#0b1117;border-radius:5px}
.live-stat{display:inline-flex;gap:5px;white-space:nowrap}.live-stat i{font-style:normal;color:#7f98a2}
.ch-dot{width:9px;height:9px;border-radius:50%;background:var(--ch,#5cf2c2);box-shadow:0 0 6px var(--ch,#5cf2c2);display:inline-block}
.scope-livebar{align-items:center;gap:6px;flex-wrap:wrap;margin:6px 0}
.instrument-btn.icon{min-width:34px;padding:6px 8px;font-size:13px;line-height:1}
.instrument-btn.auto[aria-pressed=true]{background:#14414a;border-color:#8de9ff;color:#fff;box-shadow:0 0 0 1px #8de9ff55}
.probe-jacks{display:flex;gap:6px;margin-inline-start:auto;flex-wrap:wrap}
.probe-jack-wrap{display:inline-flex;align-items:stretch}
.probe-jack{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border:1px solid color-mix(in srgb,var(--ch) 60%,#000);border-radius:999px;background:#0b1117;color:#e5edf1;font:600 11px ui-monospace,monospace;cursor:grab;touch-action:none}
.probe-jack small{color:#9fb3be;font-weight:500;max-width:90px;overflow:hidden;text-overflow:ellipsis}
.probe-jack:hover,.probe-jack[aria-pressed=true]{background:color-mix(in srgb,var(--ch) 22%,#0b1117)}
.jack-clear{border:0;background:none;color:#9fb3be;cursor:pointer;padding:0 5px}
.mm-modebar{display:flex;gap:6px;margin:8px 0;flex-wrap:wrap}
.mm-modebar .instrument-btn.mode{min-width:38px;font-weight:700}
.mm-modebar .instrument-btn.mode[aria-pressed=true]{background:#1d5a51;border-color:#5cf2c2;color:#fff}
.meter-inputs .jack[data-drag-probe]{cursor:grab;touch-action:none}
.compact-tools{margin:4px 0 8px}
.lead-ghost{pointer-events:none}
.probe-hover{filter:drop-shadow(0 0 5px #5cf2c2)}
.inst-widget.oscilloscope .inst-widget-body{max-height:none;overflow:visible}
.inst-widget .widget-more{margin-top:6px;border-top:1px solid #2c3d48;padding-top:6px}
.inst-widget .widget-more[open]{max-height:min(46vh,380px);overflow:auto}