:root {
  --bg: #0c0f1a;
  --panel: #141927;
  --box: #1a2032;
  --border: #283049;
  --text: #d9def0;
  --muted: #7d86a6;
  --accent: #4fd1ff;
  --addr: #ffb84d;
  --data: #5be49b;
  --ctrl: #ff6fae;
  --alu: #b892ff;
  --fetch: #ffb84d;
  --decode: #4fd1ff;
  --execute: #5be49b;
  --bad: #ff6b6b;
  --code: #2b4c8c;
  --datac: #1f5e57;
  --stack: #7a4a1c;
  --io: #6b2a52;
  --screen: #4a2f7a;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}

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

button, select {
  background: var(--box);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 11px;
  font: inherit;
  cursor: pointer;
}
button:hover, select:hover { border-color: var(--accent); }
button.primary { background: #1d4f6b; border-color: #2c7aa3; }
button.run { background: #1b5a3a; border-color: #2a8a59; min-width: 104px; }
button.run.running { background: #6b4a12; border-color: #a5741f; }

button.info {
  width: 17px; height: 17px; padding: 0;
  border-radius: 50%;
  font: italic 600 11px/15px Georgia, serif;
  color: var(--muted);
  background: transparent;
  vertical-align: middle;
}
button.info:hover { color: var(--accent); }
.info-inline {
  display: inline-block; width: 15px; height: 15px; border: 1px solid var(--border); border-radius: 50%;
  font: italic 600 10px/13px Georgia, serif; text-align: center; color: var(--muted);
}

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

.topbar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  background: #10141f;
  position: sticky; top: 0; z-index: 5;
}
.brand { font-weight: 700; font-size: 16px; white-space: nowrap; }
.brand small { color: var(--muted); font-weight: 400; margin-left: 6px; }
.logo { color: var(--accent); }
.toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.divider { width: 1px; height: 24px; background: var(--border); }
.speed { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.speed input { width: 110px; accent-color: var(--accent); }
#speed-label { color: var(--text); font-family: var(--mono); min-width: 52px; }

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

.layout {
  display: grid;
  gap: 10px;
  padding: 10px;
  grid-template-columns: minmax(320px, 1fr) minmax(380px, 1.15fr) 150px 470px;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "code cpu  bus mem"
    "code expl bus io";
  min-height: calc(100vh - 56px);
}
.p-code { grid-area: code; }
.p-cpu { grid-area: cpu; }
.p-bus { grid-area: bus; }
.p-mem { grid-area: mem; }
.p-expl { grid-area: expl; }
.p-io { grid-area: io; }

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  min-width: 0;
  display: flex; flex-direction: column;
}
.panel-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 0; }
h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 0 0 8px; }
h4 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 0 0 6px; font-weight: 600; }

.badge {
  font-size: 11px; padding: 2px 8px; border-radius: 10px;
  border: 1px solid var(--border); color: var(--muted);
}
.badge.ok { color: var(--execute); border-color: var(--execute); }
.badge.done { color: var(--accent); border-color: var(--accent); }
.badge.bad { color: var(--bad); border-color: var(--bad); }
.badge.warn { color: var(--addr); border-color: var(--addr); }
.stats { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--muted); }

/* ---------- Code panel ---------- */

.tabs { display: flex; gap: 2px; margin-left: 8px; }
.tabs button { padding: 3px 10px; font-size: 12px; border-radius: 6px; }
.tabs button.active { background: #26314f; border-color: var(--accent); }

.editor {
  position: relative; flex: 1; min-height: 420px;
  display: flex;
  border: 1px solid var(--border); border-radius: 6px;
  background: #0f1320;
  overflow: hidden;
}
.editor, .listing, .console, .hl, #source, .gutter { font-family: var(--mono); font-size: 13px; line-height: 20px; }
.gutter {
  margin: 0; padding: 8px 8px 8px 6px; min-width: 38px;
  text-align: right; color: #4b5577; background: #0c1019;
  border-right: 1px solid var(--border);
  overflow: hidden; user-select: none;
}
.gutter .err { color: var(--bad); font-weight: 700; }
.editor-body { position: relative; flex: 1; min-width: 0; }
.hl, #source {
  position: absolute; inset: 0;
  margin: 0; padding: 8px 10px 48px;
  white-space: pre; tab-size: 8;
  overflow: auto;
  border: 0;
}
.hl { overflow: hidden; pointer-events: none; color: var(--text); }
#source {
  background: transparent; color: transparent; caret-color: #fff;
  resize: none; outline: none;
}
#source::selection { background: rgba(79, 209, 255, 0.28); color: transparent; }

.t-mn { color: #6cb6ff; font-weight: 600; }
.t-reg { color: #ffb86c; }
.t-num { color: #8ee08e; }
.t-str { color: #f1e48a; }
.t-label { color: #ff8fd1; }
.t-ident { color: #ff8fd1; }
.t-port { color: #c49bff; }
.t-dir { color: #4fd1ff; }
.t-com { color: #5d6788; font-style: italic; }
.t-br { color: #9aa3c2; }

.listing { flex: 1; min-height: 420px; overflow: auto; border: 1px solid var(--border); border-radius: 6px; background: #0f1320; }
.listing table { border-collapse: collapse; width: 100%; }
.listing th {
  position: sticky; top: 0; background: #151a2a; z-index: 1;
  text-align: left; font: 600 11px/1 -apple-system, sans-serif; color: var(--muted);
  padding: 7px 6px; text-transform: uppercase; letter-spacing: 0.05em;
}
.listing td { padding: 0 6px; white-space: pre; vertical-align: top; }
.listing td.bp { width: 18px; padding: 0 2px 0 6px; }
.listing td.addr { color: var(--addr); width: 28px; }
.listing td.bytes { color: #9aa3c2; width: 92px; }
.listing tr.data td.bytes { color: #63c7b8; }
.listing tr.has-code.code { cursor: pointer; }
.listing tr.has-code.code:hover td.bp::before { content: '●'; color: #5a3040; }
.listing tr.bp td.bp::before, .listing tr.bp:hover td.bp::before { content: '●' !important; color: var(--bad) !important; }
.listing tr.next { background: rgba(255, 214, 102, 0.10); box-shadow: inset 3px 0 0 #ffd666; }
.listing tr.cur { background: rgba(91, 228, 155, 0.14); box-shadow: inset 3px 0 0 var(--execute); }

.errors { margin-bottom: 8px; max-height: 140px; overflow: auto; }
.errors:empty { display: none; }
.error {
  background: rgba(255, 107, 107, 0.1); border-left: 3px solid var(--bad);
  padding: 5px 8px; margin-bottom: 4px; border-radius: 4px; cursor: pointer; font-size: 13px;
}

/* ---------- CPU ---------- */

.p-cpu { border-color: #34406a; }
.cpu-grid {
  display: grid; gap: 10px;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "control regs" "alu regs";
}
.box {
  background: var(--box); border: 1px solid var(--border); border-radius: 8px; padding: 10px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.control { grid-area: control; }
.registers { grid-area: regs; }
.alu { grid-area: alu; }

.phases { display: flex; gap: 4px; margin-bottom: 10px; }
.phases span {
  flex: 1; text-align: center; font-size: 11px; padding: 4px 2px; border-radius: 5px;
  border: 1px solid var(--border); color: var(--muted); white-space: nowrap;
}
.phases span.active[data-phase="fetch"] { background: rgba(255, 184, 77, 0.18); border-color: var(--fetch); color: var(--fetch); }
.phases span.active[data-phase="decode"] { background: rgba(79, 209, 255, 0.15); border-color: var(--decode); color: var(--decode); }
.phases span.active[data-phase="execute"] { background: rgba(91, 228, 155, 0.15); border-color: var(--execute); color: var(--execute); }

.lbl { color: var(--muted); font-size: 12px; font-weight: 600; }
.ir-row { display: flex; align-items: center; gap: 8px; }
.ir-bytes { display: flex; gap: 4px; font-family: var(--mono); }
.byte {
  padding: 2px 6px; border-radius: 4px; background: #0f1320; border: 1px solid var(--border);
  transition: background 0.2s, border-color 0.2s;
}
.byte.op { color: #6cb6ff; }
.byte.empty { color: #4b5577; }
.byte.hot { border-color: var(--data); background: rgba(91, 228, 155, 0.18); }
.decoded { font-family: var(--mono); font-size: 15px; margin: 8px 0; min-height: 44px; }
.decoded .desc { font-family: -apple-system, sans-serif; font-size: 12px; color: var(--muted); margin-top: 2px; }
.pcsp { display: flex; gap: 8px; }
.kv {
  flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 6px;
  background: #0f1320; border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px;
  transition: border-color 0.15s, background 0.15s;
}
.kv .val { font-family: var(--mono); font-size: 15px; }
.kv .val small, .reg small { color: var(--muted); font-size: 11px; }
.kv.hot { border-color: var(--accent); background: rgba(79, 209, 255, 0.1); }
.kv.jump { border-color: var(--ctrl); background: rgba(255, 111, 174, 0.12); }

.reg {
  display: grid; grid-template-columns: 22px 30px 34px 1fr; align-items: center; gap: 6px;
  font-family: var(--mono); padding: 5px 6px; margin-bottom: 4px;
  background: #0f1320; border: 1px solid var(--border); border-radius: 6px;
  transition: border-color 0.15s, background 0.15s;
}
.reg .name { color: #ffb86c; font-weight: 700; }
.reg .hex { font-size: 15px; }
.reg .dec { color: var(--muted); font-size: 12px; text-align: right; }
.reg.hot { border-color: var(--accent); background: rgba(79, 209, 255, 0.12); }
.bits { display: flex; gap: 2px; justify-content: flex-end; }
.bits i { width: 11px; height: 14px; border-radius: 2px; background: #232a40; }
.bits i.on { background: var(--accent); box-shadow: 0 0 5px rgba(79, 209, 255, 0.6); }

.flags { display: flex; gap: 6px; }
.flag {
  flex: 1; text-align: center; font-family: var(--mono); padding: 5px; border-radius: 6px;
  background: #0f1320; border: 1px solid var(--border); color: var(--muted);
}
.flag b { margin-right: 6px; }
.flag.on { color: #1a1300; background: #ffd666; border-color: #ffd666; }
.flag.hot { box-shadow: 0 0 0 2px rgba(184, 146, 255, 0.6); }
.flag.checked { box-shadow: 0 0 0 2px var(--ctrl); }

.alu.hot { border-color: var(--alu); box-shadow: 0 0 14px rgba(184, 146, 255, 0.25); }
.alu-body { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.alu-inputs { display: flex; gap: 30px; }
.alu-in, .alu-out { font-family: var(--mono); text-align: center; min-width: 70px; }
.alu-in b, .alu-out b { font-size: 15px; }
.alu-in small, .alu-out small { display: block; color: var(--muted); font-size: 11px; }
.alu-shape {
  width: 150px; height: 38px;
  background: linear-gradient(180deg, #3a2d63, #2a2148);
  clip-path: polygon(0 0, 42% 0, 50% 28%, 58% 0, 100% 0, 78% 100%, 22% 100%);
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 4px;
  font: 700 13px var(--mono); color: var(--alu);
}
.alu.hot .alu-shape { background: linear-gradient(180deg, #6a4fc0, #4a3790); color: #fff; }
.aluflags { display: block; color: var(--muted); font-size: 11px; }

/* ---------- Buses ---------- */

.buses { display: flex; flex-direction: column; gap: 18px; padding-top: 110px; }
.bus .wire { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--muted); }
.bus .end { font-weight: 700; }
.bus .line {
  position: relative; flex: 1; height: 26px; border-radius: 4px;
  background: repeating-linear-gradient(90deg, #2a3150 0 6px, transparent 6px 10px);
  background-size: 20px 3px; background-repeat: repeat-x; background-position: 0 50%;
  display: flex; align-items: center; justify-content: center;
}
.bus .val {
  position: relative; z-index: 1; font: 600 12px var(--mono);
  background: var(--panel); padding: 1px 5px; border-radius: 4px; color: var(--muted);
  border: 1px solid var(--border);
}
#bus-addr.active .line { background-image: repeating-linear-gradient(90deg, var(--addr) 0 6px, transparent 6px 10px); }
#bus-data.active .line { background-image: repeating-linear-gradient(90deg, var(--data) 0 6px, transparent 6px 10px); }
#bus-addr.active .val { color: var(--addr); border-color: var(--addr); }
#bus-data.active .val { color: var(--data); border-color: var(--data); }
.bus.active.to-mem .line { animation: flow-right 0.6s linear infinite; }
.bus.active.to-cpu .line { animation: flow-left 0.6s linear infinite; }
.bus.active.to-mem .line::after, .bus.active.to-cpu .line::after {
  position: absolute; font-size: 12px; top: 4px;
}
.bus.active.to-mem .line::after { content: '▶'; right: -2px; }
.bus.active.to-cpu .line::after { content: '◀'; left: -2px; }
#bus-addr.active .line::after { color: var(--addr); }
#bus-data.active .line::after { color: var(--data); }
@keyframes flow-right { from { background-position: 0 50%; } to { background-position: 20px 50%; } }
@keyframes flow-left { from { background-position: 20px 50%; } to { background-position: 0 50%; } }
.signals { display: flex; gap: 4px; }
.signals span {
  flex: 1; text-align: center; font: 600 10px var(--mono); padding: 4px 2px; border-radius: 4px;
  border: 1px solid var(--border); color: var(--muted);
}
.signals span.on { color: #fff; background: rgba(255, 111, 174, 0.3); border-color: var(--ctrl); }
.bus-note { font-size: 12px; color: var(--muted); margin: 0; min-height: 34px; }

/* ---------- Memory ---------- */

.legend { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.lg { font-size: 11px; padding: 1px 6px; border-radius: 4px; color: #e6e9f5; }
.lg[data-info] { cursor: pointer; }
.lg.code { background: var(--code); }
.lg.data { background: var(--datac); }
.lg.stack { background: var(--stack); }
.lg.io { background: var(--io); }
.lg.screen { background: var(--screen); }

.memgrid {
  display: grid; grid-template-columns: 32px repeat(16, 1fr); gap: 2px;
  font-family: var(--mono); font-size: 11.5px;
}
.memgrid .hdr { color: var(--muted); text-align: center; font-size: 10px; line-height: 20px; }
.memgrid .hdr.row { text-align: right; padding-right: 4px; color: var(--addr); opacity: 0.8; }
.cell {
  text-align: center; line-height: 22px; border-radius: 3px; background: #1a2032; cursor: default;
  border: 1px solid transparent; position: relative;
}
.cell.zero { color: #4a5272; }
.cell.code { background: var(--code); color: #e6ecff; }
.cell.data { background: var(--datac); color: #dffbf5; }
.cell.stack { background: var(--stack); color: #ffe9d1; }
.cell.io { background: #2c1a27; }
.cell.io:not(.zero) { background: var(--io); color: #ffe3f2; }
.cell.screen { background: #221a35; }
.cell.screen:not(.zero) { background: var(--screen); color: #efe6ff; }
.cell.next { border-color: #ffd666; }
.cell.cur { border-color: var(--execute); box-shadow: 0 0 0 1px var(--execute); }
.cell.sp { outline: 2px dashed #ff9f43; outline-offset: -2px; }
.cell.rd { background: var(--data) !important; color: #06210f !important; }
.cell.wr { background: var(--ctrl) !important; color: #2a0616 !important; }
.cell.rd::after, .cell.wr::after { position: absolute; top: -9px; right: -3px; font-size: 10px; z-index: 1; }
.cell.rd::after { content: '↑'; color: var(--data); }
.cell.wr::after { content: '↓'; color: var(--ctrl); }
.cell.hover { border-color: #fff; }
.meminfo { margin-top: 8px; font-size: 12.5px; min-height: 40px; font-family: var(--mono); }
.meminfo .muted { font-family: -apple-system, sans-serif; }

/* ---------- Narration ---------- */

.p-expl { min-height: 220px; }
.now {
  background: var(--box); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px;
  font-size: 14.5px; min-height: 96px;
}
.now p { margin: 6px 0 0; }
.now-head { font-size: 12px; }
.now code, .history code { color: #6cb6ff; }
.info-title { color: var(--accent); font-weight: 700; }
.phase-badge {
  display: inline-block; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 8px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.phase-badge.fetch { background: rgba(255, 184, 77, 0.18); color: var(--fetch); }
.phase-badge.decode { background: rgba(79, 209, 255, 0.15); color: var(--decode); }
.phase-badge.execute { background: rgba(91, 228, 155, 0.15); color: var(--execute); }
.history {
  list-style: none; margin: 8px 0 0; padding: 0;
  flex: 1; overflow: auto; max-height: 360px; font-size: 12.5px; color: #aab2cf;
}
.history li { padding: 5px 2px; border-bottom: 1px solid #1f2639; }

/* ---------- I/O ---------- */

.io-grid { display: grid; grid-template-columns: auto 1fr; gap: 10px; }
.dev {
  background: var(--box); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.dev.hot { border-color: var(--ctrl); box-shadow: 0 0 12px rgba(255, 111, 174, 0.25); }
#dev-leds, #dev-display { grid-column: span 1; }
#dev-screen { grid-row: span 2; }
#dev-console { grid-column: 1 / -1; }
.leds { display: flex; gap: 6px; }
.led { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.led i { width: 16px; height: 16px; border-radius: 50%; background: #3a1414; border: 1px solid #552020; }
.led.on i { background: #ff4d4d; border-color: #ff9b9b; box-shadow: 0 0 10px #ff4d4d; }
.led small { font: 10px var(--mono); color: var(--muted); }
#sevenseg { width: 112px; height: 58px; display: block; }
#sevenseg rect { fill: #2a1010; }
#sevenseg rect.on { fill: #ff5a3c; filter: drop-shadow(0 0 3px #ff5a3c); }
#screen { width: 161px; height: 161px; image-rendering: pixelated; display: block; border-radius: 4px; }
.io-grid { grid-template-columns: 1fr 183px; }
#dev-leds { grid-column: 1; grid-row: 1; }
#dev-display { grid-column: 1; grid-row: 2; }
#dev-screen { grid-column: 2; grid-row: 1 / span 2; }
.console {
  margin: 0 0 8px; height: 92px; overflow: auto; padding: 6px 8px;
  background: #05070d; color: #7dffb0; border-radius: 6px; border: 1px solid #1d2a22;
  white-space: pre-wrap; word-break: break-all;
}
.keyboard {
  width: 100%; background: #0f1320; color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; padding: 6px 8px; font: 13px var(--mono);
}
.keyboard:focus { outline: none; border-color: var(--accent); }
.keybuf { font-size: 12px; margin-top: 4px; min-height: 20px; }
.key { display: inline-block; font-family: var(--mono); padding: 0 5px; margin-left: 3px; border: 1px solid var(--border); border-radius: 4px; }

/* ---------- Reference dialog ---------- */

dialog {
  background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 10px;
  width: min(920px, 94vw); max-height: 88vh; padding: 0;
}
dialog::backdrop { background: rgba(4, 6, 12, 0.7); }
.ref-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel); }
.ref-body { padding: 4px 16px 16px; overflow: auto; }
.ref-body h3 { margin-top: 18px; }
.ref-body li { margin-bottom: 4px; }
.ref-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.ref-table th, .ref-table td { text-align: left; padding: 4px 8px; border-bottom: 1px solid #222a40; vertical-align: top; }
.ref-table th { color: var(--muted); font-size: 11px; text-transform: uppercase; }
.ref-table tr.group td { color: var(--accent); font-weight: 700; padding-top: 12px; }
.ref-table td:first-child { white-space: nowrap; }

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

@media (max-width: 1500px) {
  .layout {
    grid-template-columns: minmax(320px, 1fr) minmax(380px, 1fr);
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas:
      "code cpu"
      "code bus"
      "code expl"
      "mem  io";
  }
  .buses { flex-direction: row; flex-wrap: wrap; align-content: flex-start; gap: 10px 18px; padding-top: 0; }
  .buses .bus { flex: 1 1 0; min-width: 130px; }
  .bus-note { flex-basis: 100%; min-height: 0; }
  .p-code { max-height: 1100px; }
  .p-expl { max-height: 520px; }
}
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; grid-template-areas: "code" "cpu" "bus" "expl" "mem" "io"; }
  .cpu-grid { grid-template-columns: 1fr; grid-template-areas: "control" "regs" "alu"; }
  .p-bus .buses { flex-direction: row; flex-wrap: wrap; padding-top: 0; gap: 10px; }
  .p-bus .bus { flex: 1 1 140px; }
}