:root {
  --bg: #1e1e1e; --bg-2: #252526; --bg-3: #2d2d30; --fg: #d4d4d4; --fg-muted: #8a9199; --border: #3a3d43;
  --accent: #2f81f7; --accent-soft: rgba(47,129,247,.22); --hover: rgba(255,255,255,.07); --active: rgba(255,255,255,.12);
  --inc: #8cc265; --dec: #e06c75; --right: #61afef; --left: #56b6c2; --bracket: #e5c07b; --out: #c678dd; --in: #d19a66; --comment: #6a737d; --disabled: #4f5560;
  --current: rgba(255,216,102,.5); --current-border: #ffd866; --target: rgba(97,175,239,.3); --error: #f14c4c; --annotation: #7a8491;
  --cell: #252527; --cell-nz: #2e3136; --cell-border: #3a3d43; --cell-value: #e6e6e6; --cell-zero: #6e7681; --cell-index: #7a8491; --cell-name: #56b6c2;
  --ptr: #0e639c; --changed: #4a3a1e; --changed-border: #d19a66; --grid: #1b1b1c;
  --green: #4ec26b; --yellow: #e5c07b; --blue: #61afef; --orange: #e8a33d;
  --mono: "Cascadia Mono", "Cascadia Code", Consolas, "JetBrains Mono", monospace;
}
:root[data-theme="light"] {
  --bg: #fff; --bg-2: #f6f8fa; --bg-3: #eaeef2; --fg: #1f2328; --fg-muted: #6e7781; --border: #d0d7de;
  --accent: #0969da; --accent-soft: rgba(9,105,218,.15); --hover: rgba(0,0,0,.06); --active: rgba(0,0,0,.1);
  --inc: #1a7f37; --dec: #cf222e; --right: #0969da; --left: #0a7a83; --bracket: #9a6700; --out: #8250df; --in: #bc4c00; --comment: #8c959f; --disabled: #a8b0b9;
  --current: rgba(255,224,102,.6); --current-border: #e0a800; --target: rgba(9,105,218,.25); --error: #cf222e; --annotation: #8c959f;
  --cell: #fff; --cell-nz: #eef3ff; --cell-border: #d0d7de; --cell-value: #1f2328; --cell-zero: #9aa3ad; --cell-index: #8c959f; --cell-name: #0a7a83;
  --ptr: #0969da; --changed: #fff1d6; --changed-border: #e8a33d; --grid: #f6f8fa;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { display: flex; flex-direction: column; background: var(--bg); color: var(--fg); font: 13px/1.4 "Segoe UI", system-ui, sans-serif; overflow: hidden; }
button, select, input, textarea { font: inherit; color: inherit; }
.mono { font-family: var(--mono); }
.muted { color: var(--fg-muted); }
.small { font-size: 12px; }
.grow { flex: 1; }
kbd { margin-left: auto; padding-left: 24px; color: var(--fg-muted); font: 11px var(--mono); }

/* Menu bar */
.menubar { display: flex; background: var(--bg); border-bottom: 1px solid var(--border); padding: 2px 6px; user-select: none; }
.menu { position: relative; }
.menu-title { background: none; border: 0; padding: 6px 10px; border-radius: 4px; cursor: default; }
.menu-title:hover, .menu.open .menu-title { background: var(--hover); }
.menu-items { display: none; position: absolute; left: 0; top: 100%; z-index: 50; min-width: 260px; background: var(--bg-3); border: 1px solid var(--border); border-radius: 6px; padding: 4px; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.menu.open .menu-items { display: flex; flex-direction: column; }
.menu-items button, .menu-items a { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: none; border: 0; padding: 6px 10px 6px 28px; border-radius: 4px; position: relative; color: var(--fg); text-decoration: none; white-space: nowrap; }
.menu-items button:hover, .menu-items a:hover { background: var(--hover); }
.menu-items hr { border: 0; border-top: 1px solid var(--border); margin: 4px 6px; }
.check { position: absolute; left: 9px; visibility: hidden; }
.check.on { visibility: visible; }
.settings-menu { min-width: 320px; padding: 8px; gap: 8px; }
.settings-menu label { display: flex; flex-direction: column; gap: 3px; padding: 2px 4px; }
.settings-menu label.row { flex-direction: row; align-items: center; gap: 8px; }
.settings-menu select, .settings-menu input[type=number] { background: var(--bg-2); border: 1px solid var(--border); border-radius: 4px; padding: 4px 6px; }

/* Toolbars */
.toolbar { display: flex; align-items: center; gap: 2px; padding: 3px 6px; background: var(--bg-2); border-bottom: 1px solid var(--border); overflow-x: auto; }
.toolbar.settings { background: var(--bg-3); }
.tool { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid transparent; border-radius: 4px; padding: 5px 9px; min-height: 30px; cursor: default; white-space: nowrap; }
.tool:hover { background: var(--hover); }
.tool:active { background: var(--active); }
.tool:disabled { opacity: .4; }
.tool.toggle.on { background: var(--accent-soft); border-color: var(--accent); }
.ico.green { color: var(--green); } .ico.red { color: var(--dec); }
.sep { width: 1px; height: 20px; background: var(--border); margin: 0 6px; }
.spacer { flex: 1; }
.tool-label { display: inline-flex; align-items: center; gap: 6px; margin: 0 6px; color: var(--fg-muted); }
.tool-label input[type=number], .tool-label select { width: 90px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 4px; padding: 4px 6px; color: var(--fg); }
.tool-label select { width: auto; }
.tool-label input[type=range] { width: 130px; accent-color: var(--accent); }

/* Main layout */
.main { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 420px; min-height: 0; }
.main.no-memory { grid-template-columns: 1fr 0; }
.main.no-memory .memory { display: none; }
.left { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.editor-wrap { flex: 1; position: relative; min-height: 120px; }
.left.no-io .io { display: none; }
.io { height: 190px; display: grid; grid-template-columns: 1fr 300px; gap: 8px; padding: 6px 8px 8px; background: var(--bg-3); border-top: 6px solid var(--bg-2); }
.io-col { display: flex; flex-direction: column; min-width: 0; }
.panel-head { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 12px; color: var(--fg-muted); margin-bottom: 4px; }
.panel-head select { background: var(--bg-2); border: 1px solid var(--border); border-radius: 4px; padding: 3px 6px; font-weight: normal; }
.io textarea { flex: 1; resize: none; background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: 4px; padding: 6px 8px; font: 13px var(--mono); }
.io textarea:focus { outline: none; border-color: var(--accent); }

/* Memory panel */
.memory { display: flex; flex-direction: column; padding: 8px 10px; background: var(--bg-3); border-left: 6px solid var(--bg-2); min-height: 0; }
.pointer-card { display: flex; gap: 18px; align-items: center; padding: 8px 12px; margin: 6px 0 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); }
.cap { font-size: 10px; color: var(--fg-muted); }
.big { font: 600 22px var(--mono); }
.big-row { display: flex; align-items: baseline; gap: 10px; }
.state { text-align: right; font-size: 12px; }
.cells-wrap { flex: 1; overflow: auto; border: 1px solid var(--border); border-radius: 6px; background: var(--grid); }
.cells { display: grid; grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); gap: 5px; padding: 8px; }
.cells .hint { grid-column: 1 / -1; text-align: center; color: var(--fg-muted); padding: 24px; }
.cell { position: relative; height: 48px; border: 1px solid var(--cell-border); border-radius: 6px; background: var(--cell); cursor: default; user-select: none; }
.cell.nz { background: var(--cell-nz); }
.cell.changed { background: var(--changed); border-color: var(--changed-border); }
.cell.ptr { background: var(--ptr); border-color: var(--ptr); color: #fff; }
.cell.sel { border: 2px solid var(--blue); }
.cell:hover { border-color: var(--fg-muted); }
.cell .idx { position: absolute; left: 5px; top: 3px; font-size: 9.5px; color: var(--cell-index); max-width: 56px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell .idx.name { color: var(--cell-name); }
.cell.ptr .idx, .cell.ptr .chr { color: rgba(255,255,255,.85); }
.cell .val { position: absolute; left: 0; right: 0; top: 16px; text-align: center; font: 600 15px var(--mono); color: var(--cell-value); }
.cell .val.zero { color: var(--cell-zero); }
.cell.ptr .val { color: #fff; }
.cell .val.long { font-size: 11px; top: 19px; }
.cell .chr { position: absolute; right: 5px; bottom: 2px; font-size: 9px; color: var(--cell-index); }
.timeline { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.timeline input { flex: 1; accent-color: var(--accent); }

/* Status bar */
.statusbar { display: flex; align-items: center; gap: 12px; height: 28px; padding: 0 10px; background: var(--bg-2); border-top: 1px solid var(--border); font-size: 12px; color: var(--fg-muted); }
.statusbar #statusText { color: var(--fg); }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); }
.dot.running { background: var(--yellow); } .dot.paused { background: var(--blue); } .dot.warning { background: var(--orange); } .dot.error { background: var(--dec); }

/* CodeMirror */
.CodeMirror { position: absolute; inset: 0; height: 100%; background: var(--bg); color: var(--fg); font: 14px/1.45 var(--mono); }
.CodeMirror-gutters { background: var(--bg); border-right: 1px solid var(--border); }
.CodeMirror-linenumber { color: var(--fg-muted); }
.CodeMirror-cursor { border-left: 1.5px solid var(--fg); }
.CodeMirror-selected { background: var(--accent-soft) !important; }
.CodeMirror-activeline-background { background: rgba(128,128,128,.12); }
.CodeMirror-matchingbracket { background: rgba(128,128,128,.35); color: inherit !important; border-radius: 2px; }
.cm-bf-inc { color: var(--inc); } .cm-bf-dec { color: var(--dec); } .cm-bf-right { color: var(--right); } .cm-bf-left { color: var(--left); }
.cm-bf-bracket { color: var(--bracket); font-weight: bold; } .cm-bf-out { color: var(--out); } .cm-bf-in { color: var(--in); }
.cm-bf-comment { color: var(--comment); } .cm-bf-disabled { color: var(--disabled); font-style: italic; }
.bf-disabled-line { background: rgba(128,128,128,.08); }
.bf-current { background: var(--current); outline: 1px solid var(--current-border); border-radius: 2px; }
.bf-target { background: var(--target); border-radius: 2px; }
.bf-error { border-bottom: 2px solid var(--error); }
.breakpoints { width: 18px; }
.bp { color: #e51400; font-size: 14px; line-height: 1; margin-left: 3px; cursor: pointer; }
.annotations { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.annotation { position: absolute; color: var(--annotation); font: italic 12.5px var(--mono); white-space: nowrap; }
.CodeMirror-dialog { background: var(--bg-3); color: var(--fg); border-bottom: 1px solid var(--border); padding: 6px 10px; }
.CodeMirror-dialog input { background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: 4px; padding: 3px 6px; font-family: var(--mono); }
.cm-searching { background: rgba(229,192,123,.35); }
.bf-inc { color: var(--inc); } .bf-dec { color: var(--dec); } .bf-right { color: var(--right); } .bf-left { color: var(--left); } .bf-bracket { color: var(--bracket); } .bf-out { color: var(--out); } .bf-in { color: var(--in); }

/* Dialogs */
.dlg { background: var(--bg-3); color: var(--fg); border: 1px solid var(--border); border-radius: 8px; padding: 18px 22px; max-width: 560px; }
.dlg::backdrop { background: rgba(0,0,0,.5); }
.dlg h2 { margin: 0 0 12px; font-size: 18px; }
.dlg .btn { margin-top: 12px; padding: 6px 16px; background: var(--accent); color: #fff; border: 0; border-radius: 4px; }
.ref td { padding: 4px 10px 4px 0; }
.ref td:first-child { font-size: 16px; font-weight: bold; width: 32px; }
#asciiTable { max-height: 60vh; overflow: auto; font-size: 12.5px; margin: 0; }

@media (max-width: 1000px) {
  .main { grid-template-columns: 1fr; grid-template-rows: 1fr 260px; }
  .memory { border-left: 0; border-top: 6px solid var(--bg-2); }
  .io { grid-template-columns: 1fr 1fr; }
}