:root {
  color-scheme: dark;
  --bg: #10141c;
  --panel: #1c232e;
  --panel-2: #151b24;
  --panel-3: #0e131b;
  --line: rgba(255, 255, 255, 0.08);
  --text: #e7edf8;
  --muted: #8d98aa;
  --ok: #4aa86a;
  --bad: #b34b4b;
  --blue: #6b88b6;
  --messages-height: 64px;
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
}

html,
body {
  margin: 0;
  height: 100%;
  background: #0b0f14;
  color: var(--text);
}

body {
  overflow: hidden;
}

* {
  box-sizing: border-box;
}

button,
select,
textarea,
input {
  font: inherit;
}

#app {
  height: 100vh;
  padding: 0;
}

.minimalShell {
  height: 100%;
  position: relative;
}

.windowCard {
  height: 100%;
  background: linear-gradient(180deg, #20262f, #141920);
  border: 0;
  border-radius: 0;
  display: grid;
  grid-template-rows: 48px minmax(0, 1fr) 14px var(--messages-height);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  min-height: 0;
}

.windowCard:fullscreen {
  width: 100vw;
  height: 100vh;
  position: relative;
  background: linear-gradient(180deg, #20262f, #141920);
}

.windowChrome {
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
}

.trafficLights {
  display: flex;
  gap: 8px;
}

.trafficLights span {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  display: block;
}

.trafficLights .red { background: #fb5f57; }
.trafficLights .yellow { background: #f8bd2d; }
.trafficLights .green { background: #2ac840; }

.toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: #1a2028;
  overflow: visible;
}

.topBtn,
.samplePicker {
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: #252c36;
  color: var(--text);
  height: 30px;
  padding: 0 12px;
  cursor: pointer;
}

.samplePicker option {
  color: #101722;
  background: #f4f6f9;
}

.toolbar > .topBtn:first-child {
  width: 76px;
  min-width: 76px;
  padding: 0;
}

.topBtn.green { background: #3e7c4d; }
.topBtn.red { background: #a74a47; }
.topBtn:hover { filter: brightness(1.08); }

.speedGroup {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border-radius: 8px;
  background: #101722;
  border: 1px solid rgba(255,255,255,0.08);
}

.topBtn.speed {
  min-width: 42px;
  height: 24px;
  padding: 0 7px;
  font-size: 12px;
  color: #9fb2cb;
  background: transparent;
  border-color: transparent;
}

.topBtn.speed.active {
  color: #f2f7ff;
  background: #2e4c78;
  border-color: rgba(255,255,255,0.18);
}

.topBtn.fullscreenBtn {
  width: 34px;
  min-width: 34px;
  height: 30px;
  padding: 0;
  margin-left: 2px;
  font-size: 16px;
  line-height: 1;
  color: #d8e7fb;
  background: #162031;
  border-color: rgba(255,255,255,0.11);
}

.topBtn.themeBtn {
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 10px;
  font-size: 17px;
  line-height: 1;
  color: #ffd477;
  background: #111b29;
}

.topBtn.themeBtn.active {
  color: #25354b;
  background: #e8eef6;
  border-color: rgba(37, 53, 75, 0.2);
}

.topBtn.languageBtn {
  width: 50px;
  min-width: 50px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 9px;
  color: #d8e7fb;
  background: #162031;
  font: 700 12px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  text-align: center;
  cursor: pointer;
}

.topBtn.languageBtn:focus-visible {
  outline: 2px solid #55a8ff;
  outline-offset: 1px;
}

.topBtn.fullscreenBtn.active {
  color: #fff;
  background: #2e4c78;
  border-color: rgba(255,255,255,0.2);
}

.mainRow {
  min-height: 0;
  display: grid;
  grid-template-columns: 30% 70%;
  overflow: hidden;
}

.boardPane,
.editorPane {
  min-width: 0;
  min-height: 0;
  padding: 10px;
}

.boardPane {
  border-right: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
}

.boardSurfaceMini {
  --board-scale: 1.1;
  position: relative;
  width: 100%;
  max-width: 462px;
  aspect-ratio: 0.78;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: #11382f;
  user-select: none;
  -webkit-user-select: none;
}

.boardCanvasMini {
  width: 100%;
  height: 100%;
  display: block;
}

.boardOverlayMini {
  position: absolute;
  inset: 0;
  width: calc(100% / var(--board-scale));
  height: calc(100% / var(--board-scale));
  pointer-events: none;
  transform: scale(var(--board-scale));
  transform-origin: top left;
  user-select: none;
  -webkit-user-select: none;
}

.boardBox {
  position: absolute;
  pointer-events: auto;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(0,0,0,0.68), rgba(0,0,0,0.62));
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 10px 20px rgba(0,0,0,0.22);
  padding: 8px;
  user-select: none;
  -webkit-user-select: none;
}

.toolbar,
.toolbar * {
  user-select: none;
  -webkit-user-select: none;
}

.keypadBox {
  right: 10px;
  bottom: 10px;
  width: 148px;
}

.joystickBox {
  left: 10px;
  bottom: 10px;
  width: 138px;
}

.motorBox {
  right: 14px;
  top: 112px;
  width: 166px;
  text-align: left;
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.motorBox:hover {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.24);
}

.motorBox.active,
.audioBox.active {
  border-color: rgba(131, 226, 165, 0.42);
  box-shadow: 0 0 0 1px rgba(131, 226, 165, 0.16), 0 12px 24px rgba(0,0,0,0.24);
}

.audioBox {
  left: 26px;
  top: 18px;
  width: 102px;
  min-height: 96px;
  padding: 8px 7px 7px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 5px;
  text-align: center;
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 28%, rgba(76, 104, 98, 0.22), transparent 46%),
    linear-gradient(180deg, rgba(6, 24, 21, 0.96), rgba(8, 27, 24, 0.92));
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.audioBox:hover {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.24);
}

.motorPreview {
  font-size: 11px;
  color: #eff6ff;
  margin-bottom: 6px;
}

.audioPreview {
  display: none;
}

.motorHint {
  font-size: 10px;
  line-height: 1.35;
  color: #9fb1c8;
}

.audioHint {
  font-size: 9px;
  line-height: 1.15;
  color: #9fb1c8;
}

.audioSpeaker {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 45% 40%, #3a4650 0%, #1c252d 42%, #111921 68%, #0a1117 100%);
  border: 1px solid rgba(162, 184, 205, 0.18);
  box-shadow:
    inset 0 2px 6px rgba(255,255,255,0.08),
    inset 0 -10px 18px rgba(0,0,0,0.36);
  overflow: hidden;
}

.audioSpeakerCone {
  position: absolute;
  inset: 7px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 48% 42%, rgba(111, 125, 138, 0.36), rgba(34, 42, 50, 0.12) 35%, rgba(12, 18, 24, 0.06) 58%, rgba(0,0,0,0) 59%),
    radial-gradient(circle at 50% 50%, #27323b 0%, #171f27 60%, #0c1319 100%);
  border: 2px solid rgba(76, 88, 100, 0.72);
  transform-origin: center;
  transition: transform 0.18s ease;
}

.audioSpeakerCap {
  position: absolute;
  left: 21px;
  top: 21px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 38% 35%, rgba(120, 132, 145, 0.9), rgba(58, 69, 80, 0.94) 45%, rgba(20, 27, 34, 0.98) 100%);
  border: 1px solid rgba(96, 108, 121, 0.78);
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.08),
    0 0 8px rgba(0,0,0,0.18);
  transform-origin: center;
  transition: transform 0.18s ease;
}

.audioSpeakerRing {
  position: absolute;
  inset: 4px;
  border-radius: 999px;
  border: 2px solid rgba(70, 82, 94, 0.76);
  opacity: 0.95;
}

.audioSpeakerRing.ring1 {
  inset: 5px;
}

.audioSpeakerRing.ring2 {
  inset: 10px;
  border-color: rgba(88, 102, 116, 0.66);
}

.audioBox.active .audioSpeakerRing {
  border-color: rgba(137, 239, 177, 0.34);
}

.audioBox.active .audioSpeakerCone,
.audioBox.active .audioSpeakerCap {
  animation: speakerPulse 0.42s ease-in-out infinite alternate;
}

@keyframes speakerPulse {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.1);
  }
}

.boardCaption {
  font-size: 10px;
  color: #d9e5d8;
  margin-bottom: 6px;
}

.miniKeypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.miniKey {
  height: 28px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.18);
  background: linear-gradient(180deg, #efe8db, #cfc7b8);
  color: #2d3540;
  font-weight: 700;
  transition: transform 0.05s ease, filter 0.08s ease, box-shadow 0.08s ease;
}

.miniKey.active {
  transform: translateY(1px) scale(0.98);
  filter: brightness(0.82);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.35);
}

.joystickFaceMini {
  height: 110px;
  border-radius: 999px;
  margin-bottom: 0;
  position: relative;
  background: radial-gradient(circle at 40% 35%, #394251 0%, #111722 58%, #070a10 100%);
  border: 1px solid rgba(255,255,255,0.16);
  overflow: hidden;
}

.joystickKnobMini {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 35% 35%, #ffffff, #92a0b2 48%, #1a2430 100%);
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 6px 12px rgba(0,0,0,0.4);
}

/* Minimal instrument-style virtual stand. The device layout and hit areas stay unchanged. */
.boardPane {
  background: #0c121a;
}

.boardSurfaceMini {
  border-radius: 10px;
  border: 1px solid #344253;
  background: #0b1118;
  box-shadow: none;
}

.boardBox {
  border-radius: 7px;
  border: 1px solid #364454;
  background: #111923;
  box-shadow: none;
  color: #dce4ed;
  padding: 7px;
}

.motorBox,
.audioBox {
  transition: border-color 0.12s ease, background-color 0.12s ease;
}

.motorBox:hover,
.audioBox:hover {
  transform: none;
  border-color: #536377;
  background: #151f2b;
}

.motorBox.active,
.audioBox.active {
  border-color: #6b7d91;
  background: #18232f;
  box-shadow: none;
}

.audioBox {
  border-radius: 7px;
  background: #111923;
}

.boardCaption {
  color: #dce4ed;
  font-weight: 700;
  letter-spacing: 0.035em;
}

.motorPreview {
  color: #eef3f8;
}

.motorHint,
.audioHint {
  color: #99a8ba;
}

.miniKey {
  border-radius: 4px;
  border-color: #465568;
  background: #273241;
  color: #edf2f7;
  box-shadow: none;
}

.miniKey:hover {
  background: #303c4c;
}

.miniKey.active {
  filter: none;
  background: #3b495b;
  box-shadow: inset 0 0 0 1px #63758a;
}

.joystickFaceMini {
  background: #0c121a;
  border-color: #3a4859;
}

.joystickKnobMini {
  background: #98a6b5;
  border-color: #c2ccd6;
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.28);
}

.audioSpeaker {
  background: #0c1219;
  border-color: #3c4a59;
  box-shadow: none;
}

.audioSpeakerCone {
  background: #202a35;
  border-color: #4a5868;
}

.audioSpeakerCap {
  background: #657384;
  border-color: #8794a2;
  box-shadow: none;
}

.audioSpeakerRing,
.audioSpeakerRing.ring2 {
  border-color: #465464;
}

.audioBox.active .audioSpeakerRing {
  border-color: #7e8fa2;
}

.minimalShell[data-theme="light"] .boardPane {
  background: #c7d1dc;
}

.minimalShell[data-theme="light"] .boardSurfaceMini {
  border-color: #8f9eae;
  background: #c3ced9;
  box-shadow: none;
}

.minimalShell[data-theme="light"] .boardBox {
  color: #263649;
  border-color: #9eacbb;
  background: #e8edf2;
  box-shadow: none;
}

.minimalShell[data-theme="light"] .motorBox:hover,
.minimalShell[data-theme="light"] .audioBox:hover {
  border-color: #75879a;
  background: #f0f3f6;
}

.minimalShell[data-theme="light"] .motorBox.active,
.minimalShell[data-theme="light"] .audioBox.active {
  border-color: #657b92;
  background: #e2e9f0;
}

.minimalShell[data-theme="light"] .boardCaption,
.minimalShell[data-theme="light"] .motorPreview {
  color: #263649;
}

.minimalShell[data-theme="light"] .motorHint,
.minimalShell[data-theme="light"] .audioHint {
  color: #627386;
}

.minimalShell[data-theme="light"] .miniKey {
  color: #273649;
  border-color: #9caaba;
  background: #d4dde6;
}

.minimalShell[data-theme="light"] .miniKey:hover {
  background: #c8d3de;
}

.minimalShell[data-theme="light"] .miniKey.active {
  background: #b9c6d3;
  box-shadow: inset 0 0 0 1px #8091a4;
}

.minimalShell[data-theme="light"] .joystickFaceMini {
  border-color: #97a6b6;
  background: #c8d2dc;
}

.minimalShell[data-theme="light"] .joystickKnobMini {
  border-color: #77889a;
  background: #f1f4f7;
  box-shadow: 0 3px 7px rgba(42, 56, 74, 0.18);
}

.minimalShell[data-theme="light"] .audioSpeaker {
  border-color: #8999aa;
  background: #b9c5d0;
}

.minimalShell[data-theme="light"] .audioSpeakerCone {
  border-color: #738497;
  background: #8f9ead;
}

.minimalShell[data-theme="light"] .audioSpeakerCap {
  border-color: #56697e;
  background: #65768a;
}

.editorBox {
  height: 100%;
  display: grid;
  grid-template-rows: 28px minmax(0, 1fr) 16px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  overflow: hidden;
}

.editorTopMini {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  background: #272d38;
  border-bottom: 1px solid var(--line);
}

.editorTag,
.runtimeBar,
.statusStrip,
.messagesMeta {
  font-size: 11px;
  color: var(--muted);
}

.runtimeBar {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  user-select: none;
  -webkit-user-select: none;
}

.editorShell {
  position: relative;
  display: grid;
  grid-template-columns: 34px 12px minmax(0, 1fr);
  min-height: 0;
  background: #11161e;
  overflow: hidden;
}

.lineNumbers,
.editorText {
  margin: 0;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 13px;
  line-height: 1.55;
}

.lineNumbers {
  padding: 10px 6px 10px 0;
  text-align: right;
  color: #667387;
  background: #141a23;
  border-right: 1px solid rgba(255,255,255,0.05);
  user-select: none;
  overflow: hidden;
}

.execMarker {
  --marker-top: 10px;
  --marker-opacity: 0;
  position: relative;
  background: #141a23;
  border-right: 1px solid rgba(255,255,255,0.05);
}

.execMarker::before {
  content: "";
  position: absolute;
  top: var(--marker-top);
  left: 2px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #ff4b55;
  box-shadow: 0 0 8px rgba(255, 75, 85, 0.8);
  opacity: var(--marker-opacity);
}

.editorText {
  width: 100%;
  height: 100%;
  resize: none;
  border: 0;
  outline: none;
  background: transparent;
  color: transparent;
  -webkit-text-fill-color: transparent;
  caret-color: #ffffff;
  position: absolute;
  inset: 0;
  padding: 10px 12px;
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior: contain;
  z-index: 2;
  white-space: pre;
  overflow-wrap: normal;
  max-width: 100%;
}

.editorText::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.messagesBody::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

.messagesBody::-webkit-scrollbar-track {
  background: #101824;
  border-radius: 10px;
}

.messagesBody::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #3d5577, #24344b);
  border-radius: 10px;
  border: 2px solid #101824;
}

.messagesBody::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #4f6b93, #2e4260);
}

.editorScrollSlider {
  margin: 0;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 18px;
  min-width: 18px;
  background: #101824;
  border-left: 1px solid rgba(255,255,255,0.08);
  cursor: ns-resize;
  z-index: 5;
}

.editorStack {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
}

.codeHighlight {
  display: block;
  margin: 0;
  position: absolute;
  inset: 0;
  padding: 10px 12px;
  overflow: visible;
  font-size: 13px;
  line-height: 1.55;
  color: #dbe6f5;
  white-space: pre;
  width: max-content;
  min-width: 100%;
  max-width: none;
  z-index: 1;
  pointer-events: none;
  opacity: 1;
}

.tok-key { color: #8bb3ff; font-weight: 700; }
.tok-reg { color: #82d8b3; font-weight: 650; }
.tok-num { color: #e7c87a; }
.tok-comment { color: #6f7f93; font-style: italic; }
.tok-str { color: #d6a7ff; }
.tok-type { color: #4fd1c5; font-weight: 650; }
.tok-ident { color: #dbe6f5; }
.tok-char { color: #f0c674; }
.tok-macro { color: #f0a66a; }
.tok-pre { color: #f0a66a; font-weight: 650; }
.tok-fn { color: #6dd6ff; }
.tok-label { color: #f1d574; font-weight: 700; }
.tok-op { color: #94a3b8; }
.diag-line {
  display: inline-block;
  min-width: 100%;
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-underline-offset: 3px;
  border-radius: 3px;
}
.diag-error {
  text-decoration-color: #ff5c6c;
  background: rgba(255, 92, 108, 0.085);
}
.diag-warning {
  text-decoration-color: transparent;
  background: transparent;
}
.editorText::selection { background: rgba(80, 140, 255, 0.35); }

.autocompleteMenu {
  position: absolute;
  left: auto;
  right: 16px;
  bottom: 16px;
  width: min(760px, 62%);
  max-height: min(380px, 46vh);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  z-index: 20;
  padding: 5px;
  border-radius: 9px;
  background: rgba(12, 18, 28, 0.98);
  border: 1px solid rgba(122, 160, 215, 0.28);
  box-shadow: 0 14px 34px rgba(0,0,0,0.45);
  scrollbar-width: thin;
}

.autocompleteMenu.hidden,
.autocompleteGhost.hidden,
.fileMenu.hidden,
.hiddenFileInput {
  display: none !important;
}

.autocompleteItem {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(130px, 0.8fr) minmax(0, 1.25fr) minmax(84px, 0.55fr) 42px;
  align-items: start;
  gap: 7px;
  min-height: 24px;
  padding: 3px 6px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #d9e6f7;
  text-align: left;
  cursor: pointer;
}

.autocompleteItem:hover,
.autocompleteItem.active {
  background: rgba(101, 145, 230, 0.16);
}

.autocompleteLabel {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 11px;
  font-weight: 800;
  color: #f0f6ff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.autocompleteDesc {
  font-size: 10px;
  color: #92a7c2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.autocompleteKind {
  font-size: 9px;
  color: #7f95b2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.autocompletePreview {
  grid-column: 1 / -1;
  overflow: hidden;
  padding: 1px 0 2px;
  color: #6f849f;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 9px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: pre;
}

.autocompleteKey {
  justify-self: end;
  min-width: 38px;
  padding: 1px 4px;
  border-radius: 6px;
  background: rgba(255,255,255,0.08);
  color: #f1d574;
  font-size: 9px;
  font-weight: 800;
  text-align: center;
}

.autocompleteMenu::-webkit-scrollbar {
  width: 10px;
}

.autocompleteMenu::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.04);
  border-radius: 10px;
}

.autocompleteMenu::-webkit-scrollbar-thumb {
  background: rgba(120, 156, 210, 0.62);
  border-radius: 10px;
  border: 2px solid rgba(12, 18, 28, 0.98);
}

.autocompleteGhost {
  margin: 0;
  position: absolute;
  inset: 0;
  padding: 10px 12px;
  overflow: hidden;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 13px;
  line-height: 1.55;
  white-space: pre;
  color: transparent;
  width: max-content;
  min-width: 100%;
  max-width: none;
  z-index: 3;
  pointer-events: none;
}

.autocompleteGhostInsert {
  color: rgba(255, 210, 126, 0.78);
  background: rgba(255, 210, 126, 0.10);
  border-left: 2px solid rgba(255, 210, 126, 0.55);
  box-shadow: 0 0 0 1px rgba(255, 210, 126, 0.06);
}

.fileNameInput {
  width: 92px;
  height: 30px;
  padding: 0 9px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.09);
  background: #202733;
  color: var(--text);
  outline: none;
}

.fileNameInput:focus {
  border-color: rgba(126, 166, 255, 0.45);
  box-shadow: 0 0 0 2px rgba(126, 166, 255, 0.10);
}

.fileMenuWrap {
  position: relative;
  flex: 0 0 auto;
  z-index: 20;
}

.fileMenuBtn {
  min-width: 74px;
}

.fileMenu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 190px;
  z-index: 1000;
  padding: 6px;
  border-radius: 10px;
  background: #111821;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 18px 40px rgba(0,0,0,0.45);
}

.fileMenuItem {
  width: 100%;
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  text-align: left;
  padding: 0 10px;
  cursor: pointer;
}

.fileMenuItem:hover {
  background: rgba(255,255,255,0.08);
}

.autosaveMenuItem {
  color: #e7edf7;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.autosaveMenuItem.saved,
.autosaveMenuItem.dirty,
.autosaveMenuItem.disabled {
  color: #e7edf7;
}

.autosaveIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.autosaveIcon.on {
  color: #08130c;
  background: #52f27c;
}

.autosaveIcon.off {
  color: #fff;
  background: #e33b48;
}

.editorScrollSlider::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 9px;
  bottom: 9px;
  width: 6px;
  border-radius: 8px;
  background: linear-gradient(180deg, #122035, #0d1625);
}

.editorScrollThumb {
  position: absolute;
  left: 3px;
  top: 0;
  width: 12px;
  height: 34px;
  border-radius: 8px;
  background: linear-gradient(180deg, #5f7ea9, #314865);
  border: 1px solid rgba(255,255,255,0.25);
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  pointer-events: none;
}

.statusStrip {
  display: flex;
  align-items: center;
  padding: 0 7px;
  border-top: 1px solid var(--line);
  background: #181f29;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: none;
  -webkit-user-select: none;
}

.statusErrorLabel {
  color: #ff5f68;
  font-weight: 800;
}

.splitHandle {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: ns-resize;
  background: #141a22;
  border-top: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  z-index: 3;
}

.splitDot {
  width: 44px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.16);
}

.messagesPane {
  min-height: 0;
  display: grid;
  grid-template-rows: 28px minmax(0, 1fr);
  border-top: 1px solid var(--line);
  background: #151b23;
  overflow: hidden;
}

.messagesHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  background: #1c232e;
  user-select: none;
  -webkit-user-select: none;
}

.messagesTitle {
  font-size: 12px;
  color: #dce5f3;
}

.messagesBody {
  overflow: auto;
  padding: 4px 10px 8px;
  user-select: none;
  -webkit-user-select: none;
}

.traceBody {
  margin: 0;
  padding: 8px 10px;
  overflow: auto;
  font-size: 11px;
  line-height: 1.4;
  color: #adc2de;
  border-top: 1px solid rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  background: #121a26;
}

.messageRow {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  font-size: 12px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  user-select: none;
  -webkit-user-select: none;
}

.messageRow.error span:last-child { color: #ff9ea9; }
.messageRow.warning span:last-child { color: #ffd38a; }
.messageRow.hint span:last-child { color: #b8cadf; }

.mono {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
}

.debugModal {
  position: absolute;
  inset: 0;
  background: transparent;
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
  z-index: 40;
  pointer-events: none;
}

.debugModal.hidden {
  display: none;
}

.debugCard {
  width: min(40vw, 640px);
  min-width: 420px;
  height: 100%;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
  overflow: hidden;
  background: #0f1622;
  display: grid;
  grid-template-rows: 46px minmax(0, 1fr);
  box-shadow: -24px 0 40px rgba(0,0,0,0.45);
  pointer-events: auto;
}

.debugHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  background: #1a2230;
}

.debugTitle {
  font-size: 14px;
  color: #dfe9fb;
}

.debugClose {
  height: 30px;
}

.debugBody {
  margin: 0;
  padding: 12px;
  overflow: auto;
  white-space: pre;
  font-size: 11px;
  line-height: 1.32;
  color: #b9cbe1;
}

.motorModal {
  position: absolute;
  inset: 0;
  z-index: 45;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
  background: transparent;
  user-select: text;
  -webkit-user-select: text;
}

.motorModal.hidden {
  display: none;
}

.motorModal.scope-only-mode {
  pointer-events: none;
  background: transparent;
}

.motorModal.scope-only-mode .scopeDrawer {
  pointer-events: auto;
  box-shadow: -14px 0 28px rgba(0, 0, 0, 0.28);
}

.motorShell {
  height: 100%;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  --motor-card-width: min(38vw, 610px);
  --scope-drawer-width: min(46vw, 680px);
  --scope-only-width: min(62vw, 860px);
}

.motorCard {
  width: var(--motor-card-width);
  min-width: 460px;
  height: 100%;
  display: grid;
  grid-template-rows: 52px minmax(0, 1fr);
  background: linear-gradient(180deg, #222b36, #141b24);
  border-left: 1px solid rgba(255,255,255,0.18);
  box-shadow: -18px 0 38px rgba(0,0,0,0.42);
  pointer-events: auto;
}

.scopeDrawer {
  width: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  background: #dcdcdc;
  border-left: 1px solid #9f9f9f;
  transition: width 0.18s ease, opacity 0.18s ease;
}

.motorShell.scope-open .scopeDrawer {
  width: var(--scope-drawer-width);
  opacity: 1;
  pointer-events: auto;
  padding: 0;
}

.motorShell.scope-only .motorCard {
  display: none;
}

.motorShell.scope-only .scopeDrawer {
  width: var(--scope-only-width);
  opacity: 1;
  pointer-events: auto;
}

.motorShell.scope-only .motorInfoCard {
  display: none;
}

.panelResizeHandle {
  width: 0;
  opacity: 0;
  pointer-events: none;
  flex: 0 0 0;
  position: relative;
  transition: opacity 0.18s ease;
}

.panelResizeHandle.visible {
  width: 12px;
  flex-basis: 12px;
  opacity: 1;
  pointer-events: auto;
  cursor: ew-resize;
}

.panelResizeGrip {
  position: absolute;
  inset: 0;
  display: block;
}

.panelResizeGrip::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 64px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.06)) left center / 1px 100% no-repeat,
    linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.22)) center center / 1px 100% no-repeat,
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.06)) right center / 1px 100% no-repeat;
}

.motorModal.scope-only-mode .panelResizeHandle.visible {
  pointer-events: auto;
}

.motorHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 14px;
  background: linear-gradient(180deg, #313b48, #1f2732);
  border-bottom: 1px solid rgba(255,255,255,0.14);
}

.motorTitle {
  font-size: 15px;
  color: #f6f6f6;
  font-weight: 700;
}

.motorHeadActions {
  display: flex;
  gap: 8px;
}

.motorAction {
  height: 32px;
}

.motorAction.scope-active {
  background: #445872;
  color: #ffffff;
}

.motorBody {
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 14px;
}

.motorViewportCard,
.audioViewportCard,
.motorInfoCard {
  border-radius: 14px;
  background: linear-gradient(180deg, #2b3440, #1b222c);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 12px 28px rgba(0,0,0,0.18);
}

.motorViewportCard {
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  padding: 12px;
}

.audioViewportCard {
  display: none;
  min-height: 0;
  padding: 14px;
  grid-template-rows: auto auto auto auto auto;
  gap: 10px;
}

.motorViewportTop {
  font-size: 16px;
  font-weight: 800;
  color: #f2f2f2;
}

.audioViewportTop {
  font-size: 16px;
  font-weight: 800;
  color: #f2f2f2;
}

.motorViewportHint {
  margin-top: 4px;
  font-size: 11px;
  color: #aebed3;
}

.audioViewportHint {
  font-size: 11px;
  color: #aebed3;
}

.motorViewButtons {
  margin-top: 8px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.audioDemoButtons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.motorViewBtn {
  height: 24px;
  min-width: 52px;
  padding: 0 8px;
  font-size: 11px;
}

.motorViewport {
  min-height: 320px;
  margin-top: 10px;
  border-radius: 12px;
  overflow: hidden;
  background: radial-gradient(circle at 30% 20%, #354150, #11161d 72%);
  border: 1px solid rgba(255,255,255,0.1);
}

.audioMeters {
  display: grid;
  gap: 10px;
}

.audioMeterTitle {
  margin-bottom: 4px;
  font-size: 11px;
  color: #cdd7e4;
}

.audioMeterTrack {
  height: 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
}

.audioMeterFill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #52c18f, #ebcb58, #ff7748);
  transition: width 0.12s linear;
}

.audioMicControl {
  display: grid;
  gap: 6px;
}

.audioMicLabel {
  font-size: 11px;
  color: #cdd7e4;
}

.audioMicSlider {
  width: 100%;
}

.audioRoute {
  font-size: 11px;
  color: #d6dde8;
}

.motorCanvas {
  width: 100%;
  height: 100%;
  display: block;
}

.motorShell.audio-mode .motorViewportCard {
  display: none;
}

.motorShell.audio-mode .audioViewportCard {
  display: grid;
}

.motorSide {
  display: none;
}

.motorInfoCard {
  padding: 12px;
}

.motorInfoCard h3 {
  margin: 0 0 10px;
  color: #f0f0f0;
  font-size: 13px;
}

.motorStats {
  display: grid;
  gap: 4px;
}

.motorStatTiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.motorStatTile {
  padding: 10px 11px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(167,188,216,0.12);
  display: grid;
  gap: 6px;
}

.motorStatTile span {
  color: #adc0d8;
  font-size: 11px;
  line-height: 1.2;
}

.motorStatTile b {
  color: #ffffff;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 18px;
  line-height: 1.15;
}

.motorMetaRow {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: grid;
  gap: 6px;
  color: #bfd0e5;
  font-size: 11px;
  line-height: 1.35;
}

.motorMetaRow b {
  color: #fff;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
}

.multisimScopeDrawer {
  color: #000;
  font-family: Arial, sans-serif;
  user-select: none;
  -webkit-user-select: none;
}

.multisimScopeDrawer * {
  user-select: none;
  -webkit-user-select: none;
}

.scopeWindowCaption {
  height: 28px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #595454;
  color: #fff;
  border-bottom: 1px solid #a4a4a4;
}

.scopeWindowTitle {
  font-size: 10px;
}

.scopeCaptionLeft {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.scopeSourcePicker {
  height: 20px;
  max-width: 190px;
  border: 1px solid #9b9b9b;
  border-radius: 3px;
  background: #f3f3f3;
  color: #111;
  font-size: 10px;
}

.scopeCaptionActions {
  display: flex;
  align-items: center;
  gap: 5px;
}

.scopeRunBtn {
  min-width: 44px;
  height: 18px;
  padding: 0 7px;
  font-size: 9px;
}

.scopeCaptionClose {
  width: 20px;
  height: 20px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.multisimScopeScreen {
  width: calc(100% - 12px);
  margin: 6px;
  display: block;
  border: 2px inset #bdbdbd;
  border-radius: 0;
  background: #000;
}

.scopeInfoRowMain {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr) 126px;
  gap: 6px;
  padding: 0 6px 6px;
}

.scopeCursorPad,
.scopeReadoutPanel,
.scopeUtilityPanel,
.multisimControlGroup {
  background: #efefef;
  border: 1px solid #c6c6c6;
}

.scopeCursorPad {
  padding: 4px;
  overflow: hidden;
}

.scopeCursorRow {
  display: grid;
  grid-template-columns: 42px 28px 28px;
  gap: 4px;
  align-items: center;
  min-height: 28px;
  font-size: 11px;
}

.scopeCursorRow > span:first-child {
  line-height: 1.1;
  white-space: normal;
  word-break: break-word;
}

.scopeReadoutPanel {
  min-height: 92px;
  padding: 0;
  overflow: hidden;
}

.multisimReadoutTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 10px;
}

.multisimReadoutTable th,
.multisimReadoutTable td {
  padding: 4px 7px;
  text-align: left;
  border-bottom: 1px solid #dedede;
}

.multisimReadoutTable thead th {
  font-weight: 400;
  background: #fff;
}

.scopeUtilityPanel {
  padding: 6px;
  display: grid;
  gap: 6px;
  align-content: start;
}

.scopeExtTriggerRow {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  font-size: 10px;
}

.scopeRadioDot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 1px solid #b5b5b5;
  background: #fff;
}

.scopeRadioDot.active {
  background: #4f94d4;
  box-shadow: inset 0 0 0 3px #fff;
}

.scopeExtTriggerRow {
  cursor: pointer;
}

.multisimControlStrip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 0 6px 6px;
}

.multisimScopeDrawer .motorInfoCard {
  margin: 0 6px 6px;
  border-radius: 0;
  background: #efefef;
  border: 1px solid #c6c6c6;
  box-shadow: none;
}

.multisimScopeDrawer .motorInfoCard h3 {
  color: #000;
  font-size: 11px;
  margin-bottom: 6px;
}

.multisimScopeDrawer .motorStatTile {
  background: #fff;
  border: 1px solid #d5d5d5;
  border-radius: 0;
  padding: 6px 7px;
}

.multisimScopeDrawer .motorStatTile span {
  color: #3a3a3a;
  font-size: 10px;
}

.multisimScopeDrawer .motorStatTile b {
  color: #000;
  font-size: 13px;
}

.multisimControlGroup {
  padding: 6px;
}

.scopeControlGroupTitle {
  font-size: 10px;
  margin-bottom: 6px;
}

.scopeControlLine {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 22px;
  margin-bottom: 4px;
  font-size: 10px;
}

.scopeControlLabel {
  width: 56px;
  flex: 0 0 56px;
}

.scopeSpinner {
  display: inline-flex;
  align-items: stretch;
  min-width: 86px;
}

.scopeSpinner.small {
  min-width: 62px;
}

.scopeSpinnerValue {
  width: 72px;
  min-width: 72px;
  min-height: 20px;
  padding: 2px 5px;
  border: 1px solid #d5d5d5;
  background: #fff;
  color: #000;
  font-size: 10px;
}

.scopeSpinner.small .scopeSpinnerValue {
  width: 44px;
  min-width: 44px;
}

.scopeSpinnerButtons {
  display: grid;
  grid-template-rows: 1fr 1fr;
  width: 16px;
  min-width: 16px;
  margin-left: 2px;
}

.scopeSpinnerBtn {
  width: 16px;
  min-width: 16px;
  height: 10px;
  padding: 0;
  font-size: 7px;
  line-height: 1;
  border-radius: 0;
}

.scopeButtonRow,
.scopeTinyRow {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.scopeLevelRow {
  display: flex;
  align-items: center;
  gap: 6px;
}

.scopeLevelUnit {
  min-width: 12px;
  font-size: 10px;
}

.scopePushBtn,
.scopeActionBtn {
  height: 20px;
  min-width: 20px;
  padding: 0 7px;
  border: 1px solid #89a8c8;
  background: #fff;
  color: #000;
  border-radius: 3px;
  cursor: pointer;
  font-size: 10px;
}

.scopePushBtn.active,
.scopeActionBtn.active {
  background: #d9ebff;
  border-color: #5d8fc8;
}

.scopeActionBtn {
  min-width: 100%;
}

body.panel-resizing {
  cursor: ew-resize;
  user-select: none;
}

.motorScopeNote,
.motorNotes {
  font-size: 12px;
  line-height: 1.45;
  color: #e0e0e0;
}

.motorNotes p {
  margin: 0 0 8px;
}

@media (max-width: 900px) {
  body {
    overflow: auto;
  }

  #app {
    height: auto;
    min-height: 100vh;
  }

  .windowCard {
    height: auto;
    min-height: 100vh;
    grid-template-rows: 48px auto 14px 140px;
  }

  .mainRow {
    grid-template-columns: 1fr;
  }

  .boardPane {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    min-height: 340px;
  }

  .boardSurfaceMini {
    max-width: 100%;
  }

  .motorCard {
    width: 100%;
    min-width: 0;
  }

  .motorBody {
    grid-template-columns: 1fr;
  }

  .motorShell {
    width: 100%;
  }

  .motorShell.scope-open .scopeDrawer {
    width: 100%;
    max-width: 100%;
  }

  .scopeHead {
    align-items: flex-start;
    flex-direction: column;
  }

  .scopeControls {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

/* Improved Runner panel */
.debugCard {
  width: min(56vw, 860px);
  min-width: 560px;
}

.debugBody {
  margin: 0;
  padding: 12px;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #4a607c #101827;
  white-space: normal;
  font-size: 12px;
  line-height: 1.35;
  color: #c7d7ec;
  background: #0c121d;
}

.debugBody::-webkit-scrollbar,
.runnerSourceLine::-webkit-scrollbar,
.runnerPre::-webkit-scrollbar,
.runnerTraceCard::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

.debugBody::-webkit-scrollbar-track,
.runnerSourceLine::-webkit-scrollbar-track,
.runnerPre::-webkit-scrollbar-track,
.runnerTraceCard::-webkit-scrollbar-track {
  background: #0c1422;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035);
}

.debugBody::-webkit-scrollbar-thumb,
.runnerSourceLine::-webkit-scrollbar-thumb,
.runnerPre::-webkit-scrollbar-thumb,
.runnerTraceCard::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #587091, #2d3f59);
  border: 3px solid #0c1422;
  border-radius: 999px;
}

.debugBody::-webkit-scrollbar-thumb:hover,
.runnerSourceLine::-webkit-scrollbar-thumb:hover,
.runnerPre::-webkit-scrollbar-thumb:hover,
.runnerTraceCard::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #6f8ab0, #3a5578);
}

.debugBody::-webkit-scrollbar-corner,
.runnerSourceLine::-webkit-scrollbar-corner,
.runnerPre::-webkit-scrollbar-corner,
.runnerTraceCard::-webkit-scrollbar-corner {
  background: #0c1422;
}

.runnerPanel {
  display: grid;
  gap: 12px;
}

.runnerHero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  gap: 12px;
  padding: 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, #172338, #101827);
  border: 1px solid rgba(136, 172, 224, 0.22);
  box-shadow: 0 12px 26px rgba(0,0,0,0.25);
}

.runnerLabel {
  color: #8ea6c8;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}

.runnerInstruction {
  color: #eaf2ff;
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 8px;
}

.runnerSourceLine {
  margin: 0;
  padding: 9px 10px;
  border-radius: 10px;
  background: rgba(255, 207, 92, 0.12);
  border: 1px solid rgba(255, 207, 92, 0.28);
  color: #ffe3a1;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #4a607c #101827;
}

.runnerStatusBox {
  display: grid;
  gap: 6px;
  align-content: start;
  color: #b7c8e0;
}

.runnerPill {
  display: inline-flex;
  width: fit-content;
  padding: 4px 9px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.runnerPill.run {
  background: rgba(72, 178, 104, 0.18);
  color: #75e49b;
  border: 1px solid rgba(117, 228, 155, 0.35);
}

.runnerPill.stop {
  background: rgba(255, 181, 73, 0.14);
  color: #ffd081;
  border: 1px solid rgba(255, 208, 129, 0.3);
}

.runnerGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.runnerCard {
  border-radius: 14px;
  background: #111a29;
  border: 1px solid rgba(255,255,255,0.08);
  padding: 12px;
  min-width: 0;
}

.runnerCard.wide,
.runnerTraceCard {
  grid-column: 1 / -1;
}

.runnerCard h3 {
  margin: 0 0 10px;
  color: #e3edf9;
  font-size: 13px;
  font-weight: 800;
}

.runnerKv {
  display: grid;
  grid-template-columns: minmax(100px, 1fr) minmax(90px, auto);
  gap: 12px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.055);
}

.runnerKv:last-child {
  border-bottom: 0;
}

.runnerKv span {
  color: #8fa4c1;
}

.runnerKv b {
  color: #eff6ff;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  text-align: right;
  font-weight: 700;
}

.runnerKv.ok b { color: #78e49d; }
.runnerKv.warn b { color: #ffd081; }

.runnerSub {
  margin-top: 10px;
  color: #7f94b0;
}

.runnerHr {
  border: 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  margin: 10px 0;
}

.runnerPre {
  margin: 0;
  padding: 10px;
  max-height: 190px;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #4a607c #101827;
  border-radius: 10px;
  background: #0b121e;
  border: 1px solid rgba(255,255,255,0.06);
  color: #cfe0f8;
}

.runnerTable,
.runnerTrace {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.runnerTable th,
.runnerTable td,
.runnerTrace th,
.runnerTrace td {
  padding: 6px 7px;
  border-bottom: 1px solid rgba(255,255,255,0.055);
  text-align: left;
  white-space: nowrap;
}

.runnerTable th,
.runnerTrace th {
  color: #91a7c5;
  font-weight: 700;
  background: rgba(255,255,255,0.035);
}

.runnerCurrentRow td {
  background: rgba(255, 207, 92, 0.16);
  color: #ffe3a1;
  font-weight: 800;
}

.runnerTraceCard {
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #4a607c #101827;
}

.runnerLcdCard .runnerPre {
  max-height: none;
  overflow: visible;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 11px;
  line-height: 1.35;
}

@media (max-width: 900px) {
  .debugCard {
    width: 100%;
    min-width: 0;
  }

  .runnerHero,
  .runnerGrid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Logic schematic editor
   -------------------------------------------------------------------------- */
.logicEditorModal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(5, 8, 12, 0.72);
  display: grid;
  place-items: stretch;
  color: #18202a;
}

.logicEditorModal.hidden,
.logicDialogLayer.hidden,
.logicDropdown.hidden,
.logicWireColorPopover.hidden,
.logicLibraryPanel.hidden,
.logicPropertiesPanel.hidden,
.logicEmptyHint.hidden {
  display: none !important;
}

.logicEditorShell {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: 28px 30px 58px 58px minmax(0, 1fr);
  background: #d9dde3;
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: 0 26px 80px rgba(0,0,0,.48);
  overflow: hidden;
}

.logicTitlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px 0 14px;
  background: linear-gradient(#f1f3f6, #cfd4db);
  border-bottom: 1px solid #a9afb8;
  color: #232a32;
  user-select: none;
}

.logicWindowTitle {
  display: none;
}

.logicWindowActions {
  display: flex;
  align-items: center;
}

.logicWindowClose,
.logicDialogClose {
  border: 0;
  background: transparent;
  color: #39414b;
  width: 30px;
  height: 26px;
  border-radius: 4px;
  cursor: pointer;
}

.logicWindowClose:hover,
.logicDialogClose:hover {
  background: #d94a4a;
  color: white;
}

.logicMenuBar {
  display: flex;
  align-items: stretch;
  gap: 2px;
  padding: 0 8px;
  background: #eef0f3;
  border-bottom: 1px solid #bbc0c8;
  user-select: none;
}

.logicMenuButton {
  border: 0;
  background: transparent;
  color: #28303a;
  padding: 0 10px;
  cursor: pointer;
  font-size: 13px;
}

.logicMenuButton:hover {
  background: #d9e5f7;
}

.logicMainToolbar,
.logicSecondaryToolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  background: linear-gradient(#f3f5f7, #d8dde3);
  border-bottom: 1px solid #aeb4bd;
  overflow-x: auto;
  overflow-y: hidden;
  user-select: none;
}

.logicSecondaryToolbar {
  background: linear-gradient(#eceff2, #d3d8de);
}

.logicToolbarSpacer {
  flex: 1 1 auto;
}

.logicToolbarButton {
  flex: 0 0 auto;
  min-width: 48px;
  height: 48px;
  padding: 2px 4px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: #202832;
  display: grid;
  grid-template-rows: 27px 13px;
  align-items: center;
  justify-items: center;
  cursor: pointer;
}

.logicToolbarButton.compact {
  min-width: 62px;
}

.logicToolbarButton:hover {
  background: rgba(255,255,255,.55);
  border-color: #aeb7c2;
}

.logicToolbarButton.active {
  background: #d6e7ff;
  border-color: #6d99d4;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7);
}

.logicToolIcon {
  min-width: 27px;
  min-height: 24px;
  padding: 0 3px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 17px;
  line-height: 1;
  border: 1px solid #8f98a4;
  border-radius: 4px;
  background: #fafbfc;
  color: #182330;
}

.logicToolLabel {
  max-width: 82px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
}

.logicBreadcrumb {
  display: none;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: #edf0f4;
  border-bottom: 1px solid #b8bec6;
  overflow-x: auto;
}

.logicBreadcrumb button {
  border: 0;
  background: transparent;
  color: #3b5d87;
  cursor: pointer;
  padding: 3px 6px;
  border-radius: 4px;
}

.logicBreadcrumb button:hover,
.logicBreadcrumb button.active {
  background: #dbe6f4;
  color: #1a3d68;
}

.logicEditorBody {
  min-height: 0;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: #c8cdd4;
}

.logicCanvasArea {
  position: relative;
  min-width: 0;
  min-height: 0;
  margin: 6px;
  border: 1px solid #9fa7b1;
  background: #f7f8fa;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.12);
}

.logicCanvas {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: default;
  outline: none;
}

.logicCanvas.wireMode {
  cursor: crosshair;
}

.logicCanvas.deleteMode {
  cursor: not-allowed;
}

.logicEmptyHint {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(430px, 80%);
  padding: 22px 26px;
  border: 1px dashed #a9b1bc;
  border-radius: 10px;
  color: #66717f;
  text-align: center;
  pointer-events: none;
  background: rgba(255,255,255,.76);
}

.logicEmptyHint strong,
.logicEmptyHint span {
  display: block;
}

.logicEmptyHint strong {
  color: #34404e;
  margin-bottom: 7px;
  font-size: 17px;
}

.logicSidebar {
  display: none;
  min-width: 0;
  min-height: 0;
  margin: 6px;
  border: 1px solid #9fa7b1;
  background: #eef0f3;
  grid-template-rows: 34px minmax(0, 1fr);
  overflow: hidden;
}

.logicSidebarTabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid #acb3bd;
}

.logicSidebarTab {
  border: 0;
  border-right: 1px solid #c1c6cd;
  background: #dce0e5;
  color: #35404b;
  cursor: pointer;
  font-size: 12px;
}

.logicSidebarTab.active {
  background: #f6f7f9;
  color: #1f2d3b;
  font-weight: 700;
}

.logicLibraryPanel,
.logicPropertiesPanel {
  min-height: 0;
  overflow: auto;
  padding: 7px;
}

.logicLibrarySection {
  margin-bottom: 9px;
}

.logicLibraryHeading {
  color: #2b3744;
  font-weight: 800;
  font-size: 12px;
  padding: 5px 4px;
  border-bottom: 1px solid #cbd0d7;
}

.logicLibraryList {
  display: grid;
  gap: 2px;
  padding-top: 3px;
}

.logicLibraryItem {
  width: 100%;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: #27313c;
  padding: 5px;
  text-align: left;
  cursor: pointer;
}

.logicLibraryItem:hover {
  background: #dce9f8;
  border-color: #a8c4e5;
}

.logicLibraryItem strong,
.logicLibraryItem small {
  display: block;
}

.logicLibraryItem strong {
  font-size: 12px;
}

.logicLibraryItem small {
  color: #6d7782;
  font-size: 10px;
  margin-top: 2px;
}

.logicLibrarySymbol {
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid #a9b0ba;
  border-radius: 4px;
  background: #fbfcfd;
  font-weight: 800;
}

.logicLibraryCreateChip {
  width: 100%;
  margin-top: 5px;
  border: 1px dashed #8392a2;
  background: #f7f9fb;
  color: #395d85;
  padding: 8px;
  border-radius: 5px;
  cursor: pointer;
}

.logicLibraryCreateChip:hover {
  background: #e5f0fd;
}

.logicPropertyTitle {
  font-weight: 800;
  color: #263443;
  font-size: 15px;
  padding: 4px 2px 9px;
  border-bottom: 1px solid #c4cad1;
  margin-bottom: 7px;
}

.logicPropertyRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 2px;
  border-bottom: 1px solid #d5d9de;
  font-size: 12px;
}

.logicPropertyRow code {
  color: #315a84;
  font-size: 11px;
}

.logicPropertyField {
  display: grid;
  gap: 4px;
  margin: 8px 0;
}

.logicPropertyField label,
.logicPromptField label {
  font-size: 11px;
  color: #5b6672;
  font-weight: 700;
}

.logicPropertyField input,
.logicPropertyField select,
.logicPromptField input {
  width: 100%;
  border: 1px solid #aeb6c1;
  border-radius: 4px;
  background: white;
  color: #1f2832;
  padding: 7px 8px;
}

.logicPropertyColor input[type="color"] {
  height: 34px;
  padding: 3px;
}

.logicPropertyNote {
  margin: 8px 0;
  padding: 8px;
  border-left: 3px solid #6c9bd1;
  background: #e6eef8;
  color: #4d5967;
  font-size: 11px;
  line-height: 1.45;
}

.logicPropertyActions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 10px;
}

.logicPropertiesEmpty {
  color: #737d88;
  font-size: 12px;
  text-align: center;
  padding: 26px 8px;
}

.logicPrimaryButton,
.logicSecondaryButton,
.logicDangerButton {
  border: 1px solid #8291a0;
  border-radius: 5px;
  padding: 7px 10px;
  cursor: pointer;
}

.logicPrimaryButton {
  background: #3f78b9;
  color: white;
  border-color: #32679f;
}

.logicSecondaryButton {
  background: #eef1f4;
  color: #2f3a45;
}

.logicDangerButton {
  background: #fff0f0;
  color: #a33b3b;
  border-color: #d7a1a1;
}

.logicStatusbar {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 10px;
  border-top: 1px solid #aab1ba;
  background: #e5e8ec;
  color: #4f5b68;
  font-size: 11px;
  user-select: none;
}

.logicDropdown {
  position: fixed;
  z-index: 1230;
  min-width: 190px;
  padding: 4px;
  border: 1px solid #9aa2ad;
  border-radius: 4px;
  background: #fafbfc;
  box-shadow: 0 8px 24px rgba(0,0,0,.24);
}

.logicDropdown button {
  width: 100%;
  border: 0;
  background: transparent;
  color: #27313c;
  text-align: left;
  padding: 7px 10px;
  border-radius: 3px;
  cursor: pointer;
}

.logicDropdown button:hover {
  background: #dce9f8;
}

.logicWireColorPopover {
  position: fixed;
  z-index: 1240;
  width: 210px;
  padding: 10px;
  border: 1px solid #8f98a4;
  border-radius: 6px;
  background: #fafbfc;
  box-shadow: 0 10px 28px rgba(0,0,0,.26);
}

.logicWireColorTitle {
  margin-bottom: 8px;
  color: #26313d;
  font-size: 12px;
  font-weight: 800;
}

.logicWireColorPopover input[type="color"] {
  width: 100%;
  height: 42px;
  padding: 3px;
  border: 1px solid #aeb6c1;
  border-radius: 5px;
  background: white;
}

.logicWireColorActions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 8px;
}

.logicDialogLayer {
  position: fixed;
  inset: 0;
  z-index: 1240;
  background: rgba(20, 26, 34, .45);
  display: grid;
  place-items: center;
  padding: 24px;
}

.logicDialogCard {
  width: min(480px, 95vw);
  max-height: 88vh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  border: 1px solid #939ca8;
  border-radius: 7px;
  background: #f7f8fa;
  box-shadow: 0 22px 70px rgba(0,0,0,.36);
  overflow: hidden;
}

.logicDialogCard.wide {
  width: min(980px, 95vw);
}

.logicDialogHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px 8px 14px;
  background: #e2e6eb;
  border-bottom: 1px solid #b7bec7;
}

.logicDialogHead h2 {
  margin: 0;
  color: #25313e;
  font-size: 16px;
}

.logicDialogBody {
  min-height: 0;
  overflow: auto;
  padding: 14px;
  color: #303b47;
}

.logicDialogFooter {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 9px 12px;
  background: #e9ecf0;
  border-top: 1px solid #c0c6cd;
}

.logicDialogMessage {
  white-space: pre-wrap;
  line-height: 1.55;
}

.logicPromptForm {
  display: grid;
  gap: 10px;
}

.logicPromptField {
  display: grid;
  gap: 4px;
}

.logicTruthWrap {
  overflow: auto;
  max-height: 65vh;
}

.logicTruthTable {
  width: 100%;
  border-collapse: collapse;
  color: #26313d;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}

.logicTruthTable th,
.logicTruthTable td {
  border: 1px solid #aeb6c0;
  padding: 5px 8px;
  text-align: center;
}

.logicTruthTable th {
  position: sticky;
  top: 0;
  background: #dce3eb;
  z-index: 1;
}

.logicTruthTable tbody tr:nth-child(even) {
  background: #edf1f5;
}

.logicSelectionBox {
  fill: rgba(87, 149, 223, .08);
  stroke: #4b91df;
  stroke-width: 2;
  stroke-dasharray: 6 4;
  pointer-events: none;
}

.logicGateBody,
.logicBlockBody {
  fill: #fbfcfd;
  stroke: #3e4853;
  stroke-width: 2;
}

.logicComponent.selected .logicGateBody,
.logicComponent.selected .logicBlockBody {
  stroke: #2c7fd4;
}

.logicGateAccent {
  fill: none;
  stroke: #3e4853;
  stroke-width: 2;
  pointer-events: none;
}

.logicComponent.selected .logicGateAccent {
  stroke: #2c7fd4;
}

.logicPinLeg {
  fill: none;
  stroke: #3e4853;
  stroke-width: 2;
  stroke-linecap: round;
  pointer-events: none;
}

.logicComponent.selected .logicPinLeg {
  stroke: #2c7fd4;
}

.logicGateSymbol,
.logicBlockSymbol {
  fill: #182330;
  font-weight: 800;
  font-size: 21px;
  pointer-events: none;
}

.logicGateSymbol.subtle {
  font-size: 9px;
  font-weight: 700;
  fill: #667381;
}

.logicComponentLabel {
  fill: #273443;
  font-size: 12px;
  font-weight: 700;
  pointer-events: none;
}

.logicPinLabel,
.logicPinName {
  fill: #465565;
  font-size: 10px;
  pointer-events: none;
}

.logicPin {
  stroke: #29333e;
  stroke-width: 1.5;
  cursor: crosshair;
}

.logicPin.value-0 {
  fill: #395b85;
  stroke: #395b85;
}

.logicPin.value-1 {
  fill: #20a55b;
  stroke: #20a55b;
}

.logicPin.value-X {
  fill: #d74242;
  stroke: #d74242;
}

.logicPin.value-Z {
  fill: #8c949e;
  stroke: #8c949e;
}

.logicWire {
  fill: none;
  stroke: #1f2832;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

/* A wire is an open SVG path, never a filled polygon. The value colour
   classes intentionally colour its stroke only; a filled path creates the
   large triangular artefacts seen on bends. */
.logicWire,
.logicWireHit,
.logicWirePreview {
  fill: none !important;
}

.logicWireHit {
  fill: none;
  stroke: transparent;
  stroke-width: 14;
  cursor: pointer;
}

.logicWireGroup.selected .logicWire {
  stroke-width: 5;
  filter: drop-shadow(0 0 2px rgba(38,113,201,.65));
}

.logicInversionBubble {
  fill: white;
  stroke: #3e4853;
  stroke-width: 2;
}

.logicSwitchTrack {
  fill: #aab2bc;
  stroke: #76818e;
}

.logicSwitchTrack.active {
  fill: #56b978;
}

.logicSwitchKnob {
  fill: white;
  stroke: #697480;
  stroke-width: 1.5;
}

.logicLed {
  fill: #aab2bc;
  stroke: #4b5560;
  stroke-width: 2;
}

.logicLed.value-1 {
  fill: #45dd74;
  filter: drop-shadow(0 0 8px rgba(40, 220, 100, .9));
}

.logicLed.value-X {
  fill: #ec5f5f;
  filter: drop-shadow(0 0 5px rgba(220, 50, 50, .7));
}

.logicProbeValue {
  font-size: 26px;
  font-weight: 900;
}

.logicProbeValue.value-0 { fill: #395b85; }
.logicProbeValue.value-1 { fill: #139b4d; }
.logicProbeValue.value-X { fill: #d13a3a; }
.logicProbeValue.value-Z { fill: #8b939d; }

.logicSevenBody {
  fill: #20242a;
  stroke: #434b55;
  stroke-width: 2;
}

.logicSegment {
  fill: #4b2222;
  stroke: #7d3434;
  stroke-width: 1;
}

.logicSegment.active {
  fill: #ff453f;
  filter: drop-shadow(0 0 5px rgba(255, 65, 55, .85));
}

@media (max-width: 900px) {
  .logicEditorShell {
    grid-template-rows: 34px 28px 66px 66px minmax(0, 1fr);
  }
  .logicEditorBody {
    grid-template-columns: minmax(0, 1fr);
  }
  .logicToolbarButton {
    min-width: 52px;
    height: 54px;
    grid-template-rows: 28px 15px;
  }
  .logicToolIcon {
    min-height: 26px;
    font-size: 17px;
  }
}

/* Logic editor v7 refinements */
.logicLibrarySearch {
  position: sticky;
  top: -7px;
  z-index: 3;
  margin: -7px -7px 7px;
  padding: 7px;
  background: #eef0f3;
  border-bottom: 1px solid #c4cad1;
}

.logicLibrarySearch input {
  width: 100%;
  border: 1px solid #aab3be;
  border-radius: 5px;
  background: #fff;
  color: #26313d;
  padding: 7px 9px;
  outline: none;
}

.logicLibrarySearch input:focus {
  border-color: #4f8ccd;
  box-shadow: 0 0 0 2px rgba(79, 140, 205, .18);
}

.logicPromptField textarea {
  width: 100%;
  min-height: 180px;
  resize: vertical;
  border: 1px solid #aeb6c1;
  border-radius: 4px;
  background: white;
  color: #1f2832;
  padding: 9px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  line-height: 1.5;
}

.logicWirePreview {
  fill: none;
  stroke: #1f2832;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.logicDipBit {
  cursor: pointer;
}

.logicDipWell {
  fill: #252b32;
  stroke: #59636e;
  stroke-width: 1.3;
}

.logicDipToggle {
  fill: #e4e7eb;
  stroke: #848e99;
  stroke-width: 1;
}

.logicDipToggle.active {
  fill: #e75b4f;
  stroke: #a9362e;
}

.logicDipLabel {
  fill: #4c5966;
  font-size: 10px;
  font-weight: 700;
  pointer-events: none;
}

.logicHexBody {
  fill: #1f252b;
  stroke: #46515c;
  stroke-width: 2;
}

.logicHexValue {
  fill: #ff4c45;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 58px;
  font-weight: 800;
  filter: drop-shadow(0 0 5px rgba(255, 73, 65, .75));
}

.logicHexValue.invalid {
  fill: #d2a64b;
  filter: none;
}

.logicStatusLeft.hasIssues {
  color: #a33b3b;
  font-weight: 800;
}

/* 2026 workstation refresh: compact laboratory UI without changing behavior. */
:root {
  --bg: #080c12;
  --panel: #151c27;
  --panel-2: #101722;
  --panel-3: #0a1018;
  --line: rgba(150, 174, 207, 0.13);
  --text: #edf4ff;
  --muted: #8998ad;
  --ok: #4fc77c;
  --bad: #e05a62;
  --blue: #62a4ff;
  --messages-height: 32px;
}

html,
body {
  background:
    radial-gradient(circle at 15% -20%, rgba(47, 91, 143, 0.16), transparent 38%),
    #080c12;
}

.windowCard,
.windowCard:fullscreen {
  background: linear-gradient(180deg, #121924, #0b1119);
}

.windowCard {
  grid-template-rows: 58px minmax(0, 1fr) 12px var(--messages-height);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.46);
}

.toolbar {
  gap: 9px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(111, 151, 204, 0.2);
  background: linear-gradient(180deg, rgba(28, 38, 52, 0.98), rgba(17, 24, 34, 0.98));
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  z-index: 30;
}

.toolbarGroup {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px;
  border: 1px solid rgba(144, 169, 202, 0.1);
  border-radius: 11px;
  background: rgba(7, 12, 19, 0.36);
}

.topBtn,
.samplePicker {
  height: 32px;
  padding: 0 11px;
  border-color: rgba(148, 174, 208, 0.14);
  background: linear-gradient(180deg, #253143, #1b2533);
  transition: transform 100ms ease, border-color 100ms ease, background 100ms ease, box-shadow 100ms ease;
}

.toolbar > .topBtn:first-child {
  width: auto;
  min-width: 0;
  padding: 0;
}

.runGroup .runControl {
  width: 72px;
  min-width: 72px;
  padding: 0;
  font-weight: 750;
}

.topBtn.green {
  color: #07140c;
  background: linear-gradient(180deg, #66d990, #42ae6c);
  border-color: rgba(125, 238, 164, 0.58);
  box-shadow: 0 5px 16px rgba(49, 171, 99, 0.18);
}

.topBtn.red {
  color: #fff;
  background: linear-gradient(180deg, #e2676c, #b6424a);
  border-color: rgba(255, 140, 145, 0.5);
}

.topBtn:hover {
  filter: brightness(1.08);
  border-color: rgba(159, 194, 237, 0.3);
  transform: translateY(-1px);
}

.topBtn:active {
  transform: translateY(0);
}

.speedGroup {
  padding: 4px;
  border-radius: 11px;
  background: rgba(7, 12, 19, 0.48);
  border-color: rgba(144, 169, 202, 0.12);
}

.speedLabel {
  padding: 0 7px 0 5px;
  color: #71839b;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.topBtn.speed.active {
  background: linear-gradient(180deg, #3971b3, #294f7e);
  border-color: rgba(126, 181, 255, 0.36);
  box-shadow: 0 0 0 1px rgba(70, 146, 238, 0.1), 0 4px 12px rgba(20, 82, 151, 0.2);
}

.topBtn.fullscreenBtn {
  height: 34px;
  border-radius: 10px;
  background: #111b29;
}

.mainRow {
  grid-template-columns: minmax(288px, 29%) minmax(0, 1fr);
  background:
    radial-gradient(circle at 11% 22%, rgba(42, 104, 83, 0.1), transparent 25%),
    #0a1018;
}

.boardPane,
.editorPane {
  padding: 4px;
}

.editorPane {
  padding: 0;
}

.boardPane {
  background: #0c121a;
}

.boardSurfaceMini {
  border-radius: 10px;
  border-color: #344253;
  box-shadow: none;
}

.boardBox {
  background: #111923;
  border-color: #364454;
  box-shadow: none;
}

.editorBox {
  grid-template-rows: 34px minmax(0, 1fr) 16px;
  border-color: rgba(124, 154, 194, 0.16);
  border-radius: 0;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.24);
}

.editorTopMini {
  padding: 0 12px;
  background: linear-gradient(180deg, #1d2735, #17202c);
  border-bottom-color: rgba(120, 151, 192, 0.16);
}

.editorTag {
  display: inline-flex;
  align-items: center;
  min-height: 21px;
  padding: 0 8px;
  border: 1px solid rgba(104, 165, 241, 0.16);
  border-radius: 6px;
  color: #bcd8ff;
  background: rgba(72, 135, 215, 0.14);
  font-weight: 700;
  letter-spacing: 0.05em;
}

.editorShell {
  background: #0b1119;
}

.lineNumbers {
  color: #60718a;
  background: #0e1621;
}

.fileNameInput {
  background: #111a27;
}

.statusStrip {
  color: #8091a8;
  background: linear-gradient(180deg, #151e2a, #111923);
}

.splitHandle {
  background: #0c131c;
}

.splitDot {
  background: rgba(99, 144, 200, 0.32);
}

.messagesPane {
  background: #0d141e;
  grid-template-rows: 30px minmax(0, 1fr);
}

.messagesHead {
  background: linear-gradient(180deg, #172130, #121b27);
}

.messagesTitle {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 650;
}

.messagesTitle::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #54d4da;
  box-shadow: 0 0 10px rgba(84, 212, 218, 0.55);
}

@media (max-width: 1450px) {
  .toolbar {
    gap: 6px;
    padding-inline: 9px;
  }

  .speedLabel {
    display: none;
  }

  .toolsGroup .topBtn {
    padding-inline: 8px;
  }

  .runGroup .topBtn:not(.runControl),
  .projectGroup .topBtn {
    padding-inline: 8px;
  }

  .fileNameInput {
    width: 82px;
  }

  .topBtn.speed {
    min-width: 36px;
    padding-inline: 5px;
  }
}

/* Light workstation theme. The virtual hardware itself keeps its real dark PCB colors. */
.minimalShell[data-theme="light"] {
  --bg: #c7d2df;
  --panel: #d8e1eb;
  --panel-2: #ccd7e3;
  --panel-3: #e0e7ef;
  --line: rgba(50, 70, 96, 0.17);
  --text: #1b293a;
  --muted: #64758b;
  color: var(--text);
  background: #c7d2df;
}

.minimalShell[data-theme="light"] .windowCard,
.minimalShell[data-theme="light"] .windowCard:fullscreen {
  background: #c8d3df;
  box-shadow: none;
}

.minimalShell[data-theme="light"] .toolbar {
  border-bottom-color: rgba(53, 77, 108, 0.2);
  background: linear-gradient(180deg, #dde5ee, #c9d4e0);
  box-shadow: 0 5px 18px rgba(47, 66, 91, 0.12);
}

.minimalShell[data-theme="light"] .toolbarGroup,
.minimalShell[data-theme="light"] .speedGroup {
  border-color: rgba(53, 77, 108, 0.16);
  background: rgba(225, 233, 242, 0.78);
}

.minimalShell[data-theme="light"] .topBtn,
.minimalShell[data-theme="light"] .samplePicker,
.minimalShell[data-theme="light"] .fileNameInput {
  color: #243348;
  border-color: rgba(56, 78, 107, 0.2);
  background: linear-gradient(180deg, #e7edf4, #d3dde8);
  box-shadow: 0 2px 5px rgba(45, 63, 88, 0.08);
}

.minimalShell[data-theme="light"] .topBtn.green {
  color: #092414;
  background: linear-gradient(180deg, #72dda0, #50bd7b);
  border-color: rgba(38, 135, 78, 0.34);
}

.minimalShell[data-theme="light"] .topBtn.red {
  color: #fff;
  background: linear-gradient(180deg, #e66f75, #bd474f);
}

.minimalShell[data-theme="light"] .topBtn.speed {
  color: #52647b;
  background: transparent;
  box-shadow: none;
}

.minimalShell[data-theme="light"] .topBtn.speed.active {
  color: #fff;
  background: linear-gradient(180deg, #4d83c5, #37669f);
}

.minimalShell[data-theme="light"] .speedLabel {
  color: #61738a;
}

.minimalShell[data-theme="light"] .mainRow {
  background: #c4cfdb;
}

.minimalShell[data-theme="light"] .boardPane {
  border-right-color: rgba(57, 79, 106, 0.18);
  background: #c7d1dc;
}

.minimalShell[data-theme="light"] .editorBox {
  border-color: rgba(55, 76, 103, 0.2);
  box-shadow: 0 12px 30px rgba(56, 73, 96, 0.12);
}

.minimalShell[data-theme="light"] .editorTopMini {
  color: #314258;
  border-bottom-color: rgba(55, 76, 103, 0.17);
  background: linear-gradient(180deg, #dce5ee, #ccd7e2);
}

.minimalShell[data-theme="light"] .editorTag {
  color: #245b9d;
  border-color: rgba(50, 112, 184, 0.2);
  background: rgba(65, 132, 210, 0.1);
}

.minimalShell[data-theme="light"] .editorShell,
.minimalShell[data-theme="light"] .editorStack {
  background: #d8e2ec;
}

.minimalShell[data-theme="light"] .lineNumbers,
.minimalShell[data-theme="light"] .execMarker {
  color: #77869a;
  border-color: rgba(55, 76, 103, 0.1);
  background: #cbd6e1;
}

.minimalShell[data-theme="light"] .editorText {
  caret-color: #172235;
}

.minimalShell[data-theme="light"] .codeHighlight,
.minimalShell[data-theme="light"] .tok-ident {
  color: #26384d;
}

.minimalShell[data-theme="light"] .tok-key { color: #155eb2; }
.minimalShell[data-theme="light"] .tok-reg,
.minimalShell[data-theme="light"] .tok-type { color: #087f6d; }
.minimalShell[data-theme="light"] .tok-num,
.minimalShell[data-theme="light"] .tok-char,
.minimalShell[data-theme="light"] .tok-label { color: #95620a; }
.minimalShell[data-theme="light"] .tok-comment { color: #748297; }
.minimalShell[data-theme="light"] .tok-str { color: #814ca3; }
.minimalShell[data-theme="light"] .tok-macro,
.minimalShell[data-theme="light"] .tok-pre { color: #a04d19; }
.minimalShell[data-theme="light"] .tok-fn { color: #08759b; }
.minimalShell[data-theme="light"] .tok-op { color: #586a80; }

.minimalShell[data-theme="light"] .editorScrollSlider {
  border-left-color: rgba(55, 76, 103, 0.14);
  background: #c4cfdb;
}

.minimalShell[data-theme="light"] .statusStrip,
.minimalShell[data-theme="light"] .messagesPane {
  color: #62748a;
  background: #d2dce7;
}

.minimalShell[data-theme="light"] .splitHandle {
  background: #b9c6d4;
}

.minimalShell[data-theme="light"] .messagesHead {
  color: #243348;
  background: linear-gradient(180deg, #dae3ec, #c8d3df);
}

.minimalShell[data-theme="light"] .messagesTitle,
.minimalShell[data-theme="light"] .messagesMeta {
  color: #34475e;
}

.minimalShell[data-theme="light"] .messagesBody,
.minimalShell[data-theme="light"] .fileMenu {
  color: #26384d;
  border-color: rgba(55, 76, 103, 0.18);
  background: #d8e2ec;
}

.minimalShell[data-theme="light"] .fileMenuItem,
.minimalShell[data-theme="light"] .autosaveMenuItem,
.minimalShell[data-theme="light"] .autosaveMenuItem.saved,
.minimalShell[data-theme="light"] .autosaveMenuItem.dirty,
.minimalShell[data-theme="light"] .autosaveMenuItem.disabled {
  color: #243348;
}

.minimalShell[data-theme="light"] .fileMenuItem:hover {
  background: rgba(48, 91, 143, 0.1);
}

.minimalShell[data-theme="light"] .debugCard,
.minimalShell[data-theme="light"] .debugBody {
  color: #293b50;
  border-color: rgba(55, 76, 103, 0.18);
  background: #d1dce7;
}

.minimalShell[data-theme="light"] .debugHead {
  border-bottom-color: rgba(55, 76, 103, 0.16);
  background: #dae3ec;
}

.minimalShell[data-theme="light"] .debugTitle {
  color: #26384d;
}

.minimalShell[data-theme="light"] .runnerHero,
.minimalShell[data-theme="light"] .runnerCard {
  color: #293b50;
  border-color: rgba(55, 76, 103, 0.15);
  background: #dbe4ed;
}

.minimalShell[data-theme="light"] .runnerCard h3,
.minimalShell[data-theme="light"] .runnerInstruction {
  color: #1f3146;
}

.minimalShell[data-theme="light"] .runnerLabel,
.minimalShell[data-theme="light"] .runnerKv span,
.minimalShell[data-theme="light"] .runnerSub {
  color: #405a77;
}

.minimalShell[data-theme="light"] .runnerKv b,
.minimalShell[data-theme="light"] .runnerStatusBox,
.minimalShell[data-theme="light"] .runnerTable td,
.minimalShell[data-theme="light"] .runnerTrace td {
  color: #142a43;
}

.minimalShell[data-theme="light"] .runnerKv.ok b {
  color: #126b3a;
}

.minimalShell[data-theme="light"] .runnerKv.warn b {
  color: #8a4d00;
}

.minimalShell[data-theme="light"] .runnerTable th,
.minimalShell[data-theme="light"] .runnerTrace th {
  color: #34536f;
  background: rgba(73, 104, 137, 0.09);
}

.minimalShell[data-theme="light"] .runnerSourceLine {
  color: #644400;
  border-color: rgba(157, 111, 14, 0.3);
  background: rgba(255, 216, 116, 0.28);
}

.minimalShell[data-theme="light"] .runnerPill.run {
  color: #0f6737;
  border-color: rgba(15, 103, 55, 0.3);
  background: rgba(52, 171, 103, 0.16);
}

.minimalShell[data-theme="light"] .runnerPill.stop {
  color: #815000;
  border-color: rgba(129, 80, 0, 0.28);
  background: rgba(223, 159, 43, 0.18);
}

.minimalShell[data-theme="light"] .runnerHr {
  border-top-color: rgba(55, 76, 103, 0.16);
}

.minimalShell[data-theme="light"] .runnerPre {
  color: #17314d;
  border-color: rgba(47, 72, 101, 0.24);
  background: #c5d2df;
}

.minimalShell[data-theme="light"] .runnerKv,
.minimalShell[data-theme="light"] .runnerTable td,
.minimalShell[data-theme="light"] .runnerTable th,
.minimalShell[data-theme="light"] .runnerTrace td,
.minimalShell[data-theme="light"] .runnerTrace th {
  border-color: rgba(55, 76, 103, 0.12);
}

/* Keep the physical stand readable in the light palette after the shared dark rules. */
.minimalShell[data-theme="light"] .boardSurfaceMini {
  border-color: #8f9eae;
  background: #c3ced9;
  box-shadow: none;
}

.minimalShell[data-theme="light"] .boardBox,
.minimalShell[data-theme="light"] .audioBox {
  color: #263649;
  border-color: #9eacbb;
  background: #e8edf2;
  box-shadow: none;
}

.minimalShell[data-theme="light"] .motorBox:hover,
.minimalShell[data-theme="light"] .audioBox:hover {
  border-color: #75879a;
  background: #f0f3f6;
}

.minimalShell[data-theme="light"] .motorBox.active,
.minimalShell[data-theme="light"] .audioBox.active {
  border-color: #657b92;
  background: #e2e9f0;
  box-shadow: none;
}

.minimalShell[data-theme="light"] .boardCaption,
.minimalShell[data-theme="light"] .motorPreview {
  color: #263649;
}

.minimalShell[data-theme="light"] .motorHint,
.minimalShell[data-theme="light"] .audioHint {
  color: #627386;
}

.minimalShell[data-theme="light"] .miniKey {
  color: #273649;
  border-color: #9caaba;
  background: #d4dde6;
  box-shadow: none;
}

.minimalShell[data-theme="light"] .miniKey:hover {
  background: #c8d3de;
}

.minimalShell[data-theme="light"] .miniKey.active {
  background: #b9c6d3;
  box-shadow: inset 0 0 0 1px #8091a4;
}

.minimalShell[data-theme="light"] .joystickFaceMini {
  border-color: #97a6b6;
  background: #c8d2dc;
}

.minimalShell[data-theme="light"] .joystickKnobMini {
  border-color: #77889a;
  background: #f1f4f7;
  box-shadow: 0 3px 7px rgba(42, 56, 74, 0.18);
}

.minimalShell[data-theme="light"] .audioSpeaker {
  border-color: #8999aa;
  background: #b9c5d0;
  box-shadow: none;
}

.minimalShell[data-theme="light"] .audioSpeakerCone {
  border-color: #738497;
  background: #8f9ead;
}

.minimalShell[data-theme="light"] .audioSpeakerCap {
  border-color: #56697e;
  background: #65768a;
  box-shadow: none;
}