:root {
  --bg: #0c0f1a;
  --panel: #141927;
  --box: #1a2032;
  --border: #283049;
  --text: #d9def0;
  --muted: #7d86a6;
  --accent: #4fd1ff;
  --hi: #5be49b;
  --lo: #3a4466;
  --sel: #ffd666;
  --bad: #ff6b6b;
  --v1: #ff6b6b;
  --v0: #4f9dff;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); color: var(--text);
  font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  display: flex; flex-direction: column;
}
code { font-family: var(--mono); font-size: 0.92em; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.bad, .error-text { color: var(--bad); }

button, select {
  background: var(--box); color: var(--text); border: 1px solid var(--border); border-radius: 6px;
  padding: 6px 11px; font: inherit; cursor: pointer;
}
button:hover, select:hover { border-color: var(--accent); }
button.primary { background: #1d4f6b; border-color: #2c7aa3; }
button.danger { border-color: #7a3030; color: #ffb3b3; }
button.danger:hover { border-color: var(--bad); }

/* ---------- Top bar ---------- */

.topbar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 8px 14px; border-bottom: 1px solid var(--border); background: #10141f;
}
.brand { font-weight: 700; font-size: 16px; white-space: nowrap; }
.brand small { color: var(--muted); font-weight: 400; margin-left: 6px; }
.logo { color: var(--hi); }
.toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.divider { width: 1px; height: 24px; background: var(--border); }
.toggle, .speed { display: flex; align-items: center; gap: 6px; color: var(--muted); cursor: pointer; }
.toggle input { accent-color: var(--hi); width: 16px; height: 16px; }
.speed input { width: 90px; accent-color: var(--accent); }
#clock-label { color: var(--text); font-family: var(--mono); min-width: 52px; }
.link { color: var(--accent); text-decoration: none; font-size: 13px; }
.link:hover { text-decoration: underline; }

/* ---------- Layout ---------- */

.layout {
  flex: 1; min-height: 0;
  display: grid; gap: 10px; padding: 10px;
  grid-template-columns: 200px minmax(400px, 1fr) 380px;
}
.panel {
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; min-width: 0;
}
.panel-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 0; }
h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 12px 0 6px; }

/* ---------- Palette ---------- */

.palette { overflow-y: auto; padding-top: 2px; }
.pal-group { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pal-group.chips { grid-template-columns: 1fr; }
.pal-item {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 4px; border: 1px solid var(--border); border-radius: 8px; background: var(--box);
  cursor: grab; user-select: none; touch-action: none; font-size: 11.5px; text-align: center;
}
.pal-item:hover { border-color: var(--accent); }
.pal-item .icon { width: 100%; max-width: 70px; height: 34px; pointer-events: none; }
.pal-group.chips .pal-item { flex-direction: row; justify-content: flex-start; gap: 8px; padding: 6px 8px; }
.pal-group.chips .icon { width: 54px; height: 30px; flex: none; }
.pal-del {
  position: absolute; right: 4px; top: 4px; padding: 0 5px; font-size: 11px; line-height: 16px;
  border-color: transparent; background: transparent; color: var(--muted);
}
.pal-del:hover { color: var(--bad); }
.ghost { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 20; opacity: 0.85; transform-origin: center; }
.ghost svg { width: 90px; height: 70px; overflow: visible; }

/* ---------- Board ---------- */

.board-wrap { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.board-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 12px; border-bottom: 1px solid var(--border);
}
.crumbs { display: flex; align-items: center; gap: 4px; font-weight: 600; }
.crumb { padding: 2px 8px; font-size: 13px; }
.crumb.current { padding: 2px 4px; }
.crumbs .sep { color: var(--muted); }
.status { margin-left: auto; font-size: 12px; color: var(--muted); }
.status .warn { color: var(--sel); font-weight: 600; }
.status .prop { color: var(--hi); font-weight: 600; }
.board-area { position: relative; flex: 1; min-height: 300px; }
.board { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: default; background: #0f1320; }
.grid-dot { fill: #252c44; }
.zoom { position: absolute; right: 10px; bottom: 10px; display: flex; gap: 4px; }
.zoom button { width: 32px; height: 32px; padding: 0; font-size: 16px; }
.readonly {
  position: absolute; left: 10px; right: 10px; top: 10px; padding: 8px 12px; border-radius: 8px;
  background: rgba(30, 38, 62, 0.95); border: 1px solid var(--accent); font-size: 13px;
}
.readonly button { padding: 3px 9px; margin-left: 4px; font-size: 12px; }

/* Components */
.comp { cursor: move; }
.board.readonly .comp { cursor: default; }
.hitbox { fill: transparent; stroke: none; }
.comp.selected .hitbox { stroke: var(--sel); stroke-width: 1.5; stroke-dasharray: 4 3; }
.body { fill: #1c2338; stroke: #8e9bc7; stroke-width: 1.6; }
.body.chip { fill: #1f2a48; stroke: #6c8be0; }
.gate-extra { fill: none; stroke: #8e9bc7; stroke-width: 1.6; }
.gate-name { font: 600 8.5px var(--mono); fill: #8e9bc7; text-anchor: middle; pointer-events: none; }
.chip-name { font: 700 12px -apple-system, sans-serif; fill: #dfe6ff; text-anchor: middle; pointer-events: none; }
.pin-label { font: 9.5px var(--mono); fill: #a9b4d8; pointer-events: none; }
.pin-label.end { text-anchor: end; }
.label { font: 600 11px -apple-system, sans-serif; fill: var(--text); text-anchor: middle; pointer-events: none; }
.lead { stroke: var(--lo); stroke-width: 2.5; fill: none; }
.lead.hi { stroke: var(--hi); }
.track { fill: #2a3150; stroke: #4a5680; }
.track.hi { fill: #1f6a45; stroke: var(--hi); }
.knob { fill: #e8ecf8; transition: cx 0.12s; }
.push { fill: #3a2430; stroke: #8a4a62; stroke-width: 2; }
.push.hi { fill: #ff6fae; stroke: #ffc0dc; }
.wave { fill: none; stroke: #8e9bc7; stroke-width: 1.8; }
.t-CLOCK .body.hi { stroke: var(--hi); }
.t-CLOCK .body.hi + .wave { stroke: var(--hi); }
.led { fill: #3a1414; stroke: #5a2222; stroke-width: 1.5; }
.led.hi { fill: #ff4d4d; stroke: #ffb3b3; filter: drop-shadow(0 0 6px #ff4d4d); }
.seg { fill: #2a1010; }
.seg.hi { fill: #ff5a3c; filter: drop-shadow(0 0 2px #ff5a3c); }
.pin { fill: #0f1320; stroke: #6f7ba3; stroke-width: 1.2; cursor: crosshair; }
.pin:hover, .pin.target { fill: var(--accent); stroke: var(--accent); r: 6; }
.board.readonly .pin { cursor: default; pointer-events: none; }
.comp.pulse .body { stroke: var(--sel); stroke-width: 2.4; }

/* Wires */
.wire { fill: none; stroke: var(--lo); stroke-width: 2.5; pointer-events: none; }
.wire.hi { stroke: var(--hi); }
.wire.selected { stroke: var(--sel) !important; stroke-dasharray: 6 4; }
.wire.pulse { stroke-width: 4.5; filter: drop-shadow(0 0 4px var(--sel)); }
.wire.temp { stroke: var(--accent); stroke-dasharray: 5 4; }
.wire-hit { fill: none; stroke: transparent; stroke-width: 12; cursor: pointer; }

/* ---------- Side panels ---------- */

.side { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow-y: auto; }
.explain p { margin: 0 0 8px; }
.ex-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; font-size: 15px; }
.ex-head .icon { width: 64px; height: 40px; }
.help { margin: 6px 0 0; padding-left: 18px; color: #aab2cf; font-size: 13px; }
.help li { margin-bottom: 3px; }
.field { display: flex; align-items: center; gap: 8px; margin: 8px 0; color: var(--muted); }
.field input {
  flex: 1; background: #0f1320; color: var(--text); border: 1px solid var(--border); border-radius: 6px;
  padding: 6px 8px; font: 13px var(--mono);
}
.field input:focus { outline: none; border-color: var(--accent); }

.truth { max-height: 320px; overflow: auto; }
.tt { border-collapse: collapse; font-family: var(--mono); font-size: 12.5px; margin-bottom: 6px; }
.tt th, .tt td { padding: 2px 7px; text-align: center; border-bottom: 1px solid #222a40; }
.tt th { color: var(--muted); font-weight: 600; position: sticky; top: 0; background: var(--panel); white-space: nowrap; }
.tt th.out { color: #ff9b9b; }
.tt td.out { border-left: 1px solid #2c3552; }
.tt td.out.v1 { color: var(--hi); font-weight: 700; }
.tt td.out.v0 { color: #5d6788; }
.tt tbody tr { cursor: pointer; }
.tt tbody tr:hover { background: rgba(79, 209, 255, 0.06); }
.tt tr.current { background: rgba(255, 214, 102, 0.14); box-shadow: inset 3px 0 0 var(--sel); }
.tt.mini { margin: 6px 0 10px; }
.tt.mini tbody tr { cursor: default; }

.wave svg { width: 100%; display: block; }
.w-label { font: 11px var(--mono); fill: #a9b4d8; text-anchor: end; }
.w-label.out { fill: #ff9b9b; }
.w-base { stroke: #222a40; stroke-width: 1; }
.w-line { fill: none; stroke: var(--accent); stroke-width: 1.8; }
.w-line.out { stroke: var(--hi); }

/* ---------- Dialogs ---------- */

dialog {
  background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 12px;
  padding: 0; width: min(480px, 94vw);
}
dialog.wide { width: min(860px, 96vw); }
dialog::backdrop { background: rgba(4, 6, 12, 0.7); }
.dialog-body { padding: 16px 18px; }
.dialog-body h2 { margin-bottom: 8px; }
.dialog-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.chip-preview { font-size: 13px; display: grid; gap: 4px; margin: 6px 0; }
.chip-preview code { background: var(--box); padding: 1px 6px; border-radius: 4px; margin-right: 3px; }
.tabs { display: flex; gap: 4px; margin: 10px 0; }
.tabs button.active { border-color: var(--accent); background: #26314f; }

.vdd { color: var(--v1); font-weight: 600; }
.gnd { color: var(--v0); font-weight: 600; }
.transistor-view { display: grid; grid-template-columns: 1fr 260px; gap: 16px; align-items: start; }
#transistor-svg { width: 100%; background: #0f1320; border-radius: 8px; border: 1px solid var(--border); }
.transistor-inputs { display: flex; gap: 8px; margin-bottom: 10px; }
.transistor-inputs button { font: 600 14px var(--mono); min-width: 74px; }
.transistor-inputs button.on { border-color: var(--v1); color: var(--v1); }
#transistor-svg .rail { stroke-width: 4; }
#transistor-svg .rail.v1 { stroke: var(--v1); }
#transistor-svg .rail.v0 { stroke: var(--v0); }
#transistor-svg .rail-label { font: 12px var(--mono); fill: var(--muted); }
#transistor-svg .rail-label.v1 { fill: var(--v1); }
#transistor-svg .rail-label.v0 { fill: var(--v0); }
#transistor-svg .term, #transistor-svg .plate, #transistor-svg .gate-lead { stroke: #8e9bc7; stroke-width: 2; fill: none; }
#transistor-svg .bubble { fill: #0f1320; stroke: #8e9bc7; stroke-width: 2; }
#transistor-svg .channel { stroke: #3a4466; stroke-width: 4; stroke-dasharray: 5 5; }
#transistor-svg .channel.on { stroke: #cfd6ee; stroke-dasharray: none; }
#transistor-svg .channel.on.v1 { stroke: var(--v1); stroke-width: 6; }
#transistor-svg .channel.on.v0 { stroke: var(--v0); stroke-width: 6; }
#transistor-svg .kind { font: 700 12px var(--mono); fill: var(--muted); }
#transistor-svg .node { fill: none; stroke-width: 3; }
#transistor-svg .node.v1 { stroke: var(--v1); }
#transistor-svg .node.v0 { stroke: var(--v0); }
#transistor-svg .node.float { stroke: #4a5272; stroke-dasharray: 3 3; }
#transistor-svg .t-input { cursor: pointer; }
#transistor-svg .in-dot, #transistor-svg .out-dot { stroke-width: 2; }
#transistor-svg .v1.in-dot, #transistor-svg .v1.out-dot { fill: #4a1c1c; stroke: var(--v1); }
#transistor-svg .v0.in-dot, #transistor-svg .v0.out-dot { fill: #142a4a; stroke: var(--v0); }
#transistor-svg text { font: 600 11px var(--mono); fill: var(--text); }
#transistor-svg .out-text { font-size: 13px; }

#toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0;
  background: #1f2a48; border: 1px solid var(--accent); border-radius: 8px; padding: 10px 16px;
  transition: opacity 0.2s, transform 0.2s; pointer-events: none; z-index: 30; max-width: 90vw;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Responsive (kept last so it overrides the rules above) ---------- */

@media (max-width: 1200px) {
  .layout { grid-template-columns: 170px 1fr; grid-template-rows: minmax(480px, 1fr) auto; }
  .side { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); overflow: visible; }
}
@media (max-width: 760px) {
  body { display: block; }
  .layout { display: flex; flex-direction: column; }
  .palette { max-height: 210px; overflow-y: auto; }
  .pal-group { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
  .pal-group.chips { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .board-area { height: 62vh; flex: none; }
  .side { display: flex; }
  .transistor-view { grid-template-columns: 1fr; }
}