:root {
  --bg: #0e1117;
  --panel: #151a23;
  --panel-2: #1b212c;
  --panel-3: #222a37;
  --border: #2a3240;
  --text: #d8dee9;
  --muted: #8a94a6;
  --accent: #30d158;
  --accent-2: #4ea1ff;
  --danger: #ff5b57;
  --warn: #ffd60a;
  --mono: "JetBrains Mono", "Cascadia Code", "Fira Code", Consolas, "SF Mono", Menlo, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, sans-serif;
  --stage-bg: #10141b;
  --grid-dot: #2a3242;
  --left: 42%;
  --bottom: 250px;
  /* theme-dependent details */
  --btn-hover: #2b3546;
  --btn-hover-border: #3a4558;
  --border-soft: #1e2530;
  --muted-2: #5f6a7d;
  --accent-text: #30d158;
  --orange-text: #ff9f0a;
  --danger-text: #ffb3b0;
  --danger-bg: #3a1d1e;
  --danger-border: #6b2f2e;
  --editor-bg: #11151c;
  --gutter-text: #4d5869;
  --gutter-border: #1d2430;
  --caret: #fff;
  --serial-bg: #0c0f14;
  --serial-text: #d5f5dc;
  --hint-bg: #23324a;
  --hint-text: #cfe3ff;
  --inspector-bg: rgba(27, 33, 44, .97);
  --toast-bg: #253044;
  --toast-border: #3a4a63;
  --shadow: rgba(0, 0, 0, .5);
  --tag-out-bg: #3b2a12; --tag-out: #ffb74d;
  --tag-in-bg: #1d2a3d; --tag-in: #8ab4f8;
  --lvl-hi-bg: #3d1614; --lvl-hi: #ff6b62;
  --lvl-lo-bg: #1b2230; --lvl-lo: #7c8798;
  /* breadboard: text and marks drawn straight on the canvas */
  --part-text: #9aa4b2;
  --part-label: #7f8a9c;
  --leg: #a9b0ba;
  --pol-a: #ff6b61;
  --pol-k: #6ea8ff;
  --keyhint: #ffd60a;
  --pending-wire: #ffd60a;
  --wire-sel: #fff;
  /* syntax highlighting */
  --t-cmt: #6b7a90;
  --t-label: #ffcb6b;
  --t-dir: #c792ea;
  --t-op: #82aaff;
  --t-opx: #ff8a80;
  --t-reg: #f78c6c;
  --t-num: #c3e88d;
  --t-str: #ecc48d;
  --t-fn: #89ddff;
  --t-sym: #d8dee9;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #eef1f5;
  --panel: #ffffff;
  --panel-2: #f5f7fa;
  --panel-3: #e9edf2;
  --border: #d3d9e2;
  --text: #1f2733;
  --muted: #5f6b7c;
  --accent: #1a9e45;
  --accent-2: #1a73e8;
  --danger: #d93025;
  --warn: #b78103;
  --stage-bg: #f4f6f9;
  --grid-dot: #c9d0da;
  --btn-hover: #dde3ea;
  --btn-hover-border: #b9c2ce;
  --border-soft: #e6eaf0;
  --muted-2: #8a94a6;
  --accent-text: #188a3e;
  --orange-text: #c25e00;
  --danger-text: #b3261e;
  --danger-bg: #fdecea;
  --danger-border: #f2b8b5;
  --editor-bg: #ffffff;
  --gutter-text: #a0a9b6;
  --gutter-border: #e3e7ed;
  --caret: #1f2733;
  --serial-bg: #fbfcfd;
  --serial-text: #1d4d2b;
  --hint-bg: #e8f0fe;
  --hint-text: #174ea6;
  --inspector-bg: rgba(255, 255, 255, .98);
  --toast-bg: #ffffff;
  --toast-border: #c9d1dc;
  --shadow: rgba(30, 40, 60, .18);
  --tag-out-bg: #fff1dc; --tag-out: #a75a00;
  --tag-in-bg: #e3edfd; --tag-in: #1f5fbf;
  --lvl-hi-bg: #fde3e1; --lvl-hi: #c5221f;
  --lvl-lo-bg: #eceff3; --lvl-lo: #5f6b7c;
  --part-text: #5f6b7c;
  --part-label: #5f6b7c;
  --leg: #8d959f;
  --pol-a: #d93025;
  --pol-k: #1a73e8;
  --keyhint: #a66f00;
  --pending-wire: #d39e00;
  --wire-sel: #1a73e8;
  --t-cmt: #8a94a6;
  --t-label: #a35f00;
  --t-dir: #8e44ad;
  --t-op: #1f5fbf;
  --t-opx: #d93025;
  --t-reg: #c2410c;
  --t-num: #2e7d32;
  --t-str: #9a4f1d;
  --t-fn: #0b7285;
  --t-sym: #1f2733;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 13px/1.4 var(--sans);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
button, select, input { font: inherit; color: inherit; }
button {
  background: var(--panel-3);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 11px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
button:hover:not(:disabled) { background: var(--btn-hover); border-color: var(--btn-hover-border); }
button:disabled { opacity: .4; cursor: default; }
button.toggle[aria-pressed="true"] { border-color: #258a44; }
button.toggle[aria-pressed="true"] b { color: var(--accent-text); }
button.toggle[aria-pressed="false"] b { color: var(--orange-text); }
button.icon { padding: 4px 9px; min-width: 30px; justify-content: center; }
button.danger { color: var(--danger-text); border-color: var(--danger-border); background: var(--danger-bg); }
button.danger:hover { filter: brightness(1.15); }
select, input {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 8px;
  outline: none;
}
select:focus, input:focus { border-color: var(--accent-2); }
code, kbd, .mono { font-family: var(--mono); font-size: 12px; }
code { background: var(--panel-3); padding: 1px 5px; border-radius: 4px; }
kbd { border: 1px solid var(--border); border-bottom-width: 2px; padding: 0 5px; border-radius: 4px; background: var(--panel-2); }
.dim { color: var(--muted); }
.spacer { flex: 1; }
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- top bar */
.topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 7px 12px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  flex-wrap: nowrap;              /* items shrink (ellipsis) instead of wrapping; see the 1080px rule */
  position: relative;
  z-index: 20;
}
.topbar > * { flex: none; }
.brand { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 0 1000 auto !important; }   /* gives way first */
.brand .name { font-weight: 600; font-size: 15px; letter-spacing: .2px; }
.brand .name b { color: var(--accent); }
.brand .tagline { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.brand .name { white-space: nowrap; }
.hw-controls { min-width: 0; flex: 0 1 auto !important; }
.tb-group { display: flex; align-items: center; gap: 6px; }
.sim-controls { padding-left: 10px; border-left: 1px solid var(--border); }
button.run { background: #1d6b35; border-color: #258a44; color: #fff; font-weight: 600; }
button.run:hover:not(:disabled) { background: #238040 !important; }
button.stop { color: var(--danger-text); }
.status {
  margin-left: auto;
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 12px;
  white-space: nowrap;
  justify-content: flex-end;
}
.st-run { color: var(--accent); }
.st-pause { color: var(--warn); }
.st-err { color: var(--danger); }
.st-stop { color: var(--muted); }

.menu { position: relative; }
.menu-list {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px;
  min-width: 220px;
  box-shadow: 0 12px 32px var(--shadow);
  z-index: 50;
}
.menu-list.wide { min-width: 330px; }
.menu.open .menu-list { display: block; }
.menu-list button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 7px 10px;
  text-align: left;
  white-space: normal;
}
.menu-list button:hover { background: var(--panel-3) !important; }
.menu-list button span { color: var(--muted); font-size: 12px; }

/* ---------------------------------------------------------------- layout */
.layout {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: var(--left) 5px 1fr;
}
.pane { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--panel); }
.right-pane {
  display: grid;
  grid-template-rows: 1fr 5px var(--bottom);
  background: var(--bg);
}
.splitter { background: var(--border); transition: background .15s; }
.splitter.v { cursor: col-resize; }
.splitter.h { cursor: row-resize; }
.splitter:hover, .splitter.dragging { background: var(--accent-2); }

/* ---------------------------------------------------------------- editor */
.pane-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 8px 5px 0;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}
.file-tab {
  padding: 6px 14px;
  border-right: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text);
  border-top: 2px solid var(--accent);
  margin: -5px 0;
  background: var(--panel-2);
}
.mod { color: var(--warn); font-size: 12px; }

.editor {
  flex: 1;
  min-height: 0;
  display: flex;
  background: var(--editor-bg);
  font: 13px/20px var(--mono);
}
.gutter {
  width: 54px;
  flex: none;
  overflow: hidden;
  padding: 8px 0;
  color: var(--gutter-text);
  text-align: right;
  user-select: none;
  background: var(--editor-bg);
  border-right: 1px solid var(--gutter-border);
}
.gutter .gl { height: 20px; padding-right: 10px; position: relative; cursor: pointer; }
.gutter .gl:hover { color: var(--muted); }
.gutter .gl:hover::before { content: ""; position: absolute; left: 7px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 91, 87, .3); }
.gutter .gl.bp::before { content: ""; position: absolute; left: 7px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--danger); }
.gutter .gl.bp-off::before { background: transparent; border: 2px solid var(--danger); width: 6px; height: 6px; }
.gutter .gl.cur { color: var(--warn); }
.gutter .gl.err { color: var(--danger); font-weight: 700; }
.ln-pad { height: 60px; }

.code-wrap { position: relative; flex: 1; min-width: 0; overflow: hidden; }
.code-hl, #code {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 8px 12px;
  font: inherit;
  tab-size: 8;
  -moz-tab-size: 8;
  white-space: pre;
  border: 0;
  letter-spacing: 0;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0;
}
.code-hl { overflow: hidden; pointer-events: none; color: var(--text); }
.hl-inner { min-width: 100%; width: max-content; padding-right: 40px; }
.code-hl .ln { height: 20px; }
.code-hl .ln.cur { background: rgba(255, 214, 10, .14); box-shadow: inset 3px 0 0 var(--warn); }
.code-hl .ln.err { background: rgba(255, 91, 87, .12); text-decoration: underline wavy rgba(255, 91, 87, .7); text-underline-offset: 4px; }
#code {
  width: 100%;
  height: 100%;
  background: transparent;
  color: transparent;
  caret-color: var(--caret);
  resize: none;
  outline: none;
  overflow: auto;
  z-index: 1;
}
#code::selection { background: rgba(78, 161, 255, .35); color: transparent; }

.t-cmt { color: var(--t-cmt); font-style: italic; }
.t-label { color: var(--t-label); }
.t-dir { color: var(--t-dir); }
.t-op { color: var(--t-op); font-weight: 600; }
.t-opx { color: var(--t-opx); text-decoration: underline dotted; }
.t-reg { color: var(--t-reg); }
.t-num { color: var(--t-num); }
.t-str { color: var(--t-str); }
.t-fn { color: var(--t-fn); }
.t-sym { color: var(--t-sym); }

.problems {
  max-height: 130px;
  overflow: auto;
  border-top: 1px solid var(--border);
  font-size: 12px;
  background: var(--panel);
}
.problems:empty { display: none; }
.problems .ok { color: var(--accent); padding: 6px 12px; }
.problems .perr { padding: 4px 12px; cursor: pointer; color: var(--danger-text); border-bottom: 1px solid var(--border-soft); }
.problems .perr:hover { background: var(--panel-2); }
.problems .pl { display: inline-block; min-width: 64px; color: var(--muted); font-family: var(--mono); }

/* ---------------------------------------------------------------- stage */
.stage-wrap { position: relative; min-height: 0; display: flex; flex-direction: column; background: var(--stage-bg); }
.stage-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  flex-wrap: wrap;
}
.stage-toolbar button { padding: 4px 9px; }
#stage { flex: 1; min-height: 0; width: 100%; display: block; touch-action: none; cursor: default; user-select: none; }
#stage.panning { cursor: grabbing; }
#stage.wiring { cursor: crosshair; }
.grid-dot { fill: var(--grid-dot); }
.stage-help {
  position: absolute;
  left: 10px;
  bottom: 8px;
  font-size: 11px;
  color: var(--muted-2);
  pointer-events: none;
}
.stage-hint {
  position: absolute;
  top: 48px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--hint-bg);
  border: 1px solid var(--accent-2);
  color: var(--hint-text);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  pointer-events: none;
}

/* board */
.chip-text { font: 700 12px var(--sans); fill: #3a4048; }
.chip-sub { font: 8px var(--sans); fill: #4b525c; }
.chip-sub.light, .tiny.light { fill: #a4adbb; }
.board-title { font: 700 13px var(--sans); fill: #e1e6ee; letter-spacing: 1px; }
.board-title.small { font-size: 11px; }
.hw-state { font-size: 12px; color: var(--muted); white-space: nowrap; max-width: 220px; min-width: 80px; overflow: hidden; text-overflow: ellipsis; }
.hw-state:empty { min-width: 0; }
.hw-state.ok { color: var(--accent-2); }
.hw-state.run { color: var(--accent-text); }
.hw-state.err { color: var(--danger-text); }
.menu-list button:disabled { opacity: .45; cursor: not-allowed; }
.menu-head { padding: 6px 10px 2px; font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); cursor: help; }
.menu-note { padding: 4px 10px 6px; font-size: 12px; color: var(--muted); }
.menu-sep { height: 1px; margin: 4px 6px; background: var(--border); }
.menu-list .port-item.cur b { color: var(--accent-2); }

/* hardware flashing progress */
.hw-progress {
  position: fixed; top: 52px; right: 16px; z-index: 60; width: 340px; max-width: calc(100vw - 32px);
  padding: 12px 14px; border-radius: 10px; border: 1px solid var(--toast-border); background: var(--toast-bg);
  box-shadow: 0 8px 28px var(--shadow); font-size: 13px;
}
.hw-progress.ok { border-color: #258a44; }
.hw-progress.err { border-color: var(--danger); }
.hp-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.hp-head .icon { padding: 0 7px; line-height: 20px; }
.hp-steps { list-style: none; margin: 0 0 10px; padding: 0; }
.hp-steps li { display: flex; align-items: center; gap: 8px; padding: 2px 0; color: var(--muted); }
.hp-steps li.active { color: var(--text); font-weight: 600; }
.hp-steps li.done { color: var(--text); }
.hp-steps li.failed { color: var(--danger-text); font-weight: 600; }
.hp-icon { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--border); box-sizing: border-box; }
.hp-steps li.active .hp-icon { border-color: var(--accent-2); border-right-color: transparent; animation: hp-spin .8s linear infinite; }
.hp-steps li.done .hp-icon { border: none; background: var(--accent); }
.hp-steps li.done .hp-icon::after { content: "✓"; display: block; color: #fff; font-size: 10px; line-height: 14px; text-align: center; }
.hp-steps li.failed .hp-icon { border: none; background: var(--danger); }
.hp-steps li.failed .hp-icon::after { content: "✕"; display: block; color: #fff; font-size: 9px; line-height: 14px; text-align: center; }
.hp-barrow { display: flex; align-items: center; gap: 8px; }
.hp-barrow .mono { min-width: 36px; text-align: right; font-size: 12px; color: var(--muted); }
.hp-bar { flex: 1; height: 8px; border-radius: 4px; background: var(--panel-3); overflow: hidden; position: relative; }
#hpFill { height: 100%; width: 0; background: var(--accent-2); border-radius: 4px; transition: width .15s; }
.hw-progress.ok #hpFill { background: var(--accent); }
.hp-bar.indet #hpFill { position: absolute; width: 35%; animation: hp-slide 1.1s ease-in-out infinite; }
.hp-detail { margin-top: 8px; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.hw-progress.ok .hp-detail { color: var(--accent-text); }
.hw-progress.err .hp-detail { color: var(--danger-text); }
@keyframes hp-spin { to { transform: rotate(360deg); } }
@keyframes hp-slide { 0% { left: -35%; } 100% { left: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .hp-steps li.active .hp-icon, .hp-bar.indet #hpFill { animation: none; }
}
.tiny { font: 7px var(--sans); fill: var(--part-text); }
.pin-label { font: 600 8px var(--mono); fill: #e8ecf2; pointer-events: none; }
.pin-label.pwr { fill: #8f99a8; }
.bpin { cursor: pointer; }
.bpin .pin-pad { fill: #b48f3a; stroke: #7d6020; stroke-width: 1; }
.bpin .pin-hole { fill: #14171c; transition: fill .08s; }
.bpin .pin-hit { fill: transparent; }
.bpin.gpio:hover .pin-pad, #stage.wiring .bpin.gpio .pin-pad { fill: #e3bc5c; }
#stage.wiring .bpin.gpio .pin-pad { stroke: #fff; stroke-width: 1.5; }
.bpin.power { cursor: help; }
#stage.manual-power .bpin.rail { cursor: pointer; }
#stage.manual-power .bpin.rail:hover .pin-pad, #stage.manual-power.wiring .bpin.rail .pin-pad { fill: #e3bc5c; }
#stage.manual-power.wiring .bpin.rail .pin-pad { stroke: #fff; stroke-width: 1.5; }
.bpin.out-hi .pin-hole { fill: #ff453a; }
.bpin.out-lo .pin-hole { fill: #2c5aa0; }
.bpin.in-hi .pin-hole { fill: #30d158; }
.board-btn { cursor: pointer; }
.tiny.lab-silk { fill: #e8eef7; }

/* parts */
.comp { cursor: grab; }
.comp .sel-box { fill: transparent; stroke: transparent; stroke-width: 1.5; stroke-dasharray: 4 3; }
.comp:hover .sel-box { stroke: var(--btn-hover-border); }
.comp.selected .sel-box { stroke: var(--accent-2); fill: rgba(78, 161, 255, .05); }
.comp-label { font: 600 10px var(--mono); fill: var(--part-label); pointer-events: none; }
.comp .leg { stroke: var(--leg); stroke-width: 2.4; fill: none; stroke-linecap: round; }
.comp .pol { font: 700 10px var(--sans); pointer-events: none; }
.comp .pol-a { fill: var(--pol-a); }
.comp .pol-k { fill: var(--pol-k); }
.comp .flat { stroke: #d9dee6; stroke-width: 1.2; opacity: .7; }
.comp .gnd-sym { stroke: var(--part-label); stroke-width: 1.4; fill: none; }
.comp .keyhint { font: 600 9px var(--mono); fill: var(--keyhint); }
.comp [data-press], .comp [data-toggle] { cursor: pointer; }
.cpin { cursor: crosshair; }
.cpin .pin-hit { fill: transparent; }
.cpin .dot { fill: #d9dee6; stroke: #4e5868; stroke-width: 1; }
.cpin:hover .dot { fill: var(--accent-2); }
.cpin:not(.connected) .dot { fill: #ff9f0a; animation: pulse 1.6s infinite; }
.cpin.pwr .dot { stroke: #ff453a; stroke-width: 1.4; }
@keyframes pulse { 50% { opacity: .45; } }

/* wires */
.wire { cursor: pointer; }
.wire-outline { fill: none; stroke: rgba(0, 0, 0, .5); stroke-width: 5.5; stroke-linecap: round; }
.wire-core { fill: none; stroke-width: 3; stroke-linecap: round; }
.wire-hit { fill: none; stroke: transparent; stroke-width: 12; pointer-events: stroke; }
.wire:hover .wire-core { stroke-width: 4; }
.wire.selected .wire-outline { stroke: var(--wire-sel); stroke-width: 7; }
#wireLayer { pointer-events: visiblePainted; }
.whandle { fill: var(--panel); stroke: var(--accent-2); stroke-width: 1.6; cursor: move; }
.whandle.seg { cursor: grab; }
.whandle:hover { fill: var(--accent-2); }
#pendingWire { fill: none; stroke: var(--pending-wire); stroke-width: 2.5; stroke-dasharray: 6 5; pointer-events: none; }

/* inspector */
.inspector {
  position: absolute;
  top: 46px;
  right: 10px;
  width: 270px;
  max-height: calc(100% - 60px);
  overflow: auto;
  background: var(--inspector-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px 12px;
  box-shadow: 0 12px 30px var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 5;
}
.insp-head { display: flex; align-items: center; gap: 8px; }
.insp-head b { font-size: 14px; }
.insp-head button { margin-left: auto; }
.inspector label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); }
.inspector select, .inspector input { width: 100%; color: var(--text); }
.insp-sub { font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: var(--accent-2); margin-top: 4px; border-top: 1px solid var(--border); padding-top: 8px; }
.insp-actions { display: flex; gap: 6px; }
.insp-info { margin: 0; }

/* ---------------------------------------------------------------- bottom panels */
.bottom { min-height: 0; display: flex; flex-direction: column; background: var(--panel); }
.tabs { display: flex; border-bottom: 1px solid var(--border); background: var(--panel); overflow-x: auto; flex: none; }
.tabs button {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 7px 14px;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  position: relative;
}
.tabs button:hover { background: var(--panel-2) !important; color: var(--text); }
.tabs button.active { color: var(--text); border-bottom-color: var(--accent-2); }
.tabs button.badge::after { content: ""; position: absolute; top: 7px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.tab-body { flex: 1; min-height: 0; position: relative; }
.tab-body > section { position: absolute; inset: 0; overflow: auto; }

.serial { display: flex; flex-direction: column; overflow: hidden !important; }
#serialOut {
  flex: 1;
  margin: 0;
  overflow: auto;
  padding: 8px 12px;
  font: 12.5px/1.45 var(--mono);
  white-space: pre-wrap;
  word-break: break-all;
  background: var(--serial-bg);
  color: var(--serial-text);
}
#serialForm { display: flex; gap: 6px; padding: 6px; border-top: 1px solid var(--border); }
#serialForm input { flex: 1; min-width: 0; font-family: var(--mono); }

.tabs .count {
  display: inline-block; min-width: 16px; margin-left: 6px; padding: 0 5px; border-radius: 8px;
  background: var(--danger); color: #fff; font-size: 11px; line-height: 16px; text-align: center;
}
.messages { display: flex; flex-direction: column; overflow: hidden !important; }
.msg-list { flex: 1; overflow: auto; font-size: 12.5px; }
.msg-empty { padding: 12px; color: var(--muted); }
.msg { display: flex; gap: 8px; align-items: baseline; padding: 5px 12px; border-bottom: 1px solid var(--border-soft); }
.msg .mi { flex: none; width: 14px; text-align: center; }
.msg .mt { flex: none; color: var(--muted); font-size: 11.5px; }
.msg .mx { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.msg.error .mi, .msg.error .mx { color: var(--danger-text); }
.msg.warn .mi { color: var(--orange-text); }
.msg.info .mi { color: var(--accent-2); }
.msg .ml { flex: none; padding: 1px 6px; font-size: 11.5px; }
.msg-foot { display: flex; gap: 6px; align-items: center; padding: 6px; border-top: 1px solid var(--border); }
.msg-foot .dim { padding-left: 6px; }

.panel-head { display: flex; gap: 8px; align-items: center; padding: 6px 10px; border-bottom: 1px solid var(--border); flex-wrap: wrap; position: sticky; top: 0; background: var(--panel); }
.regs { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 14px; padding: 6px 10px; }
.reg { display: flex; gap: 8px; font: 12px/22px var(--mono); padding: 0 6px; border-radius: 4px; }
.reg .rn { color: var(--muted); width: 28px; }
.reg .ra { color: var(--t-reg); width: 34px; }
.reg .rv { color: var(--text); }
.reg.changed { background: rgba(255, 214, 10, .16); }
.reg.changed .rv { color: var(--warn); }
.reg.pc .rn { color: var(--accent-2); }

.memdump { padding: 8px 12px; white-space: pre; line-height: 1.6; }
.maddr { color: var(--t-op); }
.masc { color: var(--t-num); }
.msym { color: var(--t-label); text-decoration: underline dotted; }
#memAddr { width: 170px; }

table.grid { border-collapse: collapse; width: 100%; font-size: 12px; }
table.grid th, table.grid td { text-align: left; padding: 4px 10px; border-bottom: 1px solid var(--border-soft); }
table.grid th { color: var(--muted); font-weight: 500; position: sticky; top: 0; background: var(--panel); }
.listing td { font-family: var(--mono); white-space: pre; }
.listing tr { cursor: pointer; }
.listing tr:hover td { background: var(--panel-2); }
.listing tr.cur td { background: rgba(255, 214, 10, .14); }
.listing .src { color: var(--text); }
.listing .basic { color: var(--muted); }
/* rows of one pseudo-instruction expansion stay visually grouped */
.listing tr:has(+ tr.cont) td { border-bottom-color: transparent; }
.symlist { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 10px; color: var(--muted); }
.symlist b { color: var(--t-label); font-weight: 500; }
.tag { padding: 1px 6px; border-radius: 4px; font-size: 11px; }
.tag.out { background: var(--tag-out-bg); color: var(--tag-out); }
.tag.in { background: var(--tag-in-bg); color: var(--tag-in); }
.lvl { font-family: var(--mono); font-size: 11px; padding: 1px 6px; border-radius: 4px; }
.lvl.hi { background: var(--lvl-hi-bg); color: var(--lvl-hi); }
.lvl.lo { background: var(--lvl-lo-bg); color: var(--lvl-lo); }
.lvl.float { background: transparent; color: var(--orange-text); border: 1px dashed currentColor; }

.docs { padding: 4px 18px 20px; line-height: 1.55; }
.docs h3 { margin: 16px 0 6px; font-size: 14px; color: var(--accent-2); }
.docs table.grid { max-width: 760px; margin: 6px 0; }
.docs p, .docs ol { max-width: 820px; }

/* ---------------------------------------------------------------- toast */
.toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translate(-50%, 20px);
  background: var(--toast-bg);
  border: 1px solid var(--toast-border);
  color: var(--text);
  padding: 9px 16px;
  border-radius: 8px;
  box-shadow: 0 10px 30px var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 100;
  max-width: min(640px, calc(100% - 32px));
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.error { border-color: var(--danger); background: var(--danger-bg); }
.toast.ok { border-color: #258a44; }

body[data-sim="running"] .file-tab { border-top-color: var(--warn); }

/* ---------------------------------------------------------------- small screens */
@media (max-width: 1400px) {
  .brand .tagline { display: none; }
}
@media (max-width: 1200px) {
  .status .mono.dim { display: none; }            /* instruction count */
}
@media (max-width: 1080px) {
  .topbar { flex-wrap: wrap; row-gap: 6px; }    /* one row no longer fits all controls */
}
@media (max-width: 900px) {
  body { overflow: auto; height: auto; }
  .layout { display: block; }
  .splitter { display: none; }
  .editor-pane { height: 55vh; }
  .right-pane { display: flex; flex-direction: column; }
  .stage-wrap { height: 60vh; }
  .bottom { height: 45vh; }
  .status { min-width: 0; margin-left: 0; width: 100%; justify-content: flex-start; }
  .brand .tagline { display: none; }
  .stage-help { display: none; }
  .inspector { width: min(270px, calc(100% - 20px)); }
}
.insp-warn { margin: 0; font-size: 12px; color: var(--orange-text); }

/* ---- settings dialog */
#btnSettings .badge {
  margin-left: 6px; padding: 0 6px; border-radius: 8px; font-size: 11px;
  border: 1px solid currentColor; color: var(--orange-text);
}
.dlg {
  width: 440px; max-width: calc(100vw - 32px); padding: 0;
  border: 1px solid var(--toast-border); border-radius: 12px;
  background: var(--panel); color: var(--text);
  box-shadow: 0 16px 48px var(--shadow);
}
.dlg::backdrop { background: rgba(0, 0, 0, .45); }
.dlg form { padding: 14px 16px; }
.dlg-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 14px; }
.dlg-head .icon { padding: 0 7px; line-height: 20px; }
.dlg fieldset { border: none; margin: 0; padding: 8px 0 4px; }
.dlg legend { padding: 0; margin-bottom: 6px; color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.dlg .opt {
  display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; margin-bottom: 6px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); cursor: pointer;
}
.dlg .opt:hover { border-color: var(--btn-hover-border); }
.dlg .opt:has(input:checked) { border-color: var(--accent-2); }
.dlg .opt input { margin: 3px 0 0; accent-color: var(--accent-2); }
.dlg .opt > span { display: flex; flex-direction: column; gap: 2px; }
.dlg .opt > span > span { color: var(--muted); font-size: 12px; line-height: 1.4; }
.dlg-note { margin: 2px 0 4px; padding: 6px 10px; border-radius: 6px; font-size: 12px; color: var(--orange-text); background: var(--panel-3); }
.dlg-foot { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 12px; }

/* ---- collapse buttons on the splitters: hide / show the code editor and the bottom panels */
.splitter { position: relative; }
.split-btn {
  position: absolute; left: 50%; top: 50%; z-index: 5; transform: translate(-50%, -50%);
  padding: 0; justify-content: center; border-radius: 7px;
  background: var(--panel-3); color: var(--muted); box-shadow: 0 1px 4px var(--shadow);
}
.split-btn:hover:not(:disabled) { color: var(--text); border-color: var(--accent-2); }
.splitter.v .split-btn { width: 14px; height: 44px; }
.splitter.h .split-btn { width: 44px; height: 14px; }
.splitter.h .split-btn svg { transform: rotate(-90deg); }                         /* points down: collapse */
.split-btn[aria-pressed="false"] svg { transform: rotate(180deg); }               /* points right: expand */
.splitter.h .split-btn[aria-pressed="false"] svg { transform: rotate(90deg); }    /* points up: expand */
.split-btn.badge::after { content: ""; position: absolute; top: -3px; right: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.layout.no-code { grid-template-columns: 0 5px 1fr; }
.layout.no-code .editor-pane { visibility: hidden; overflow: hidden; }
.layout.no-panels .right-pane { grid-template-rows: 1fr 5px 0; }
.layout.no-panels .bottom { visibility: hidden; overflow: hidden; }
.layout.no-code #splitV, .layout.no-panels #splitH { cursor: default; }
/* Collapsed, the splitter sits at the window edge: keep the whole button inside the window. */
.layout.no-code #splitV .split-btn { left: 0; transform: translate(0, -50%); border-radius: 0 7px 7px 0; }
.layout.no-panels #splitH .split-btn { top: auto; bottom: 0; transform: translate(-50%, 0); border-radius: 7px 7px 0 0; }
.layout.no-code #splitV:hover, .layout.no-panels #splitH:hover { background: var(--border); }
@media (max-width: 900px) {
  /* Panes are stacked: the splitters become thin strips that only hold the collapse buttons. */
  .splitter { display: block; height: 18px; cursor: default; }
  .splitter:hover { background: var(--border); }
  .splitter.v .split-btn { width: 44px; height: 14px; }
  .splitter.v .split-btn svg { transform: rotate(90deg); }                             /* points up: collapse */
  .splitter.v .split-btn[aria-pressed="false"] svg { transform: rotate(-90deg); }
  .layout.no-code .editor-pane, .layout.no-panels .bottom { display: none; }
  .layout.no-panels .stage-wrap { height: 80vh; }
}
@media (max-width: 900px) {
  .layout.no-code #splitV .split-btn, .layout.no-panels #splitH .split-btn { left: 50%; top: 50%; bottom: auto; transform: translate(-50%, -50%); border-radius: 7px; }
}