*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:       #0a0e0f;
  --surface:  #101617;
  --surface2: #171f21;
  --border:   #223032;
  --text:     #d7e6e4;
  --muted:    #5b7376;
  --accent:   #4dd0c4;
  --accent2:  #ffb454;
  --green:    #7ee787;
  --red:      #ff6b6b;
  --mono: 'Fira Code', 'Cascadia Code', 'JetBrains Mono', Menlo, Consolas, monospace;
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  overflow: hidden;
}

/* ── Header ──────────────────────────────────────────────────────────── */

header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 0 20px;
  height: 48px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}

.hd-logo {
  font-size: 17px;
  color: var(--accent);
  font-family: var(--mono);
  font-weight: 700;
  line-height: 1;
  user-select: none;
}

.hd-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.02em;
}

.hd-sub {
  font-size: 12px;
  color: var(--muted);
  flex: 1;
}

/* ── Layout ──────────────────────────────────────────────────────────── */

.layout {
  display: flex;
  height: calc(100vh - 48px - 36px);
}

/* ── Sidebar ─────────────────────────────────────────────────────────── */

aside {
  width: 210px;
  min-width: 210px;
  border-right: 1px solid var(--border);
  overflow-y: auto;
  background: var(--surface);
  padding-bottom: 16px;
  display: flex;
  flex-direction: column;
}

.sb-title {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 14px 14px 8px;
}

.sb-group-label {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 10px 14px 5px;
  border-top: 1px solid var(--border);
}

.sb-group:first-of-type .sb-group-label { border-top: none; }

.ex-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 14px;
  cursor: pointer;
  border: none;
  background: none;
  color: var(--text);
  font-size: 12.5px;
  transition: background 0.1s;
}

.ex-item:hover { background: var(--surface2); }
.ex-item:focus {
  outline: none;
  background: var(--surface2);
  box-shadow: inset 2px 0 0 var(--accent);
}

.isa-ref {
  margin-top: auto;
  border-top: 1px solid var(--border);
}

.isa-ref summary {
  padding: 12px 14px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}

.isa-ref summary:hover { color: var(--text); }

.isa-list {
  padding: 0 14px 12px;
  max-height: 260px;
  overflow-y: auto;
}

.isa-row {
  display: flex;
  gap: 8px;
  padding: 3px 0;
  font-size: 11px;
  align-items: baseline;
}

.isa-op {
  font-family: var(--mono);
  color: var(--accent2);
  min-width: 70px;
  flex-shrink: 0;
}

.isa-doc { color: var(--muted); }

/* ── Main ────────────────────────────────────────────────────────────── */

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

.input-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 20px 10px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.input-row textarea {
  flex: 1;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-family: var(--mono);
  font-size: 12.5px;
  padding: 7px 12px;
  resize: none;
  outline: none;
  transition: border-color 0.15s;
  line-height: 1.5;
}

.input-row textarea:focus { border-color: var(--accent); }
.input-row textarea.has-error { border-color: var(--red); }

.btn-assemble {
  background: var(--accent);
  color: #062421;
  border: none;
  border-radius: 6px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.12s;
  flex-shrink: 0;
  align-self: center;
}

.btn-assemble:hover { opacity: 0.82; }
.btn-assemble:active { opacity: 0.65; }

.assemble-error {
  padding: 0 20px 6px;
  font-size: 12px;
  color: var(--red);
  font-family: var(--mono);
  display: none;
  flex-shrink: 0;
}

/* Controls */
.controls {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.controls button {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 5px;
  padding: 5px 14px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
  white-space: nowrap;
}

.controls button:hover:not(:disabled) {
  background: var(--border);
  border-color: var(--accent);
}

.controls button:disabled { opacity: 0.3; cursor: not-allowed; }

.btn-run {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #062421 !important;
  font-weight: 700 !important;
}

.btn-run:hover:not(:disabled) {
  opacity: 0.82;
  background: var(--accent) !important;
}

.btn-run.running {
  background: transparent !important;
  border-color: var(--red) !important;
  color: var(--red) !important;
  font-weight: 700 !important;
}

.btn-run.running:hover:not(:disabled) {
  background: rgba(255, 107, 107, 0.1) !important;
}

.speed-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  margin-left: 4px;
}

.speed-wrap input[type=range] {
  width: 72px;
  accent-color: var(--accent);
  cursor: pointer;
}

.status-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 4px;
  font-family: var(--mono);
}

.status-run { color: var(--accent); background: rgba(77, 208, 196, 0.12); }
.status-halt { color: var(--muted); background: var(--surface2); }
.status-error { color: var(--red); background: rgba(255, 107, 107, 0.12); }

.step-count {
  font-size: 12px;
  color: var(--muted);
  margin-left: auto;
  font-family: var(--mono);
}

.kb-hint {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

kbd {
  display: inline-block;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0 4px;
  font-family: inherit;
  font-size: 10px;
  color: var(--muted);
}

/* ── VM body ─────────────────────────────────────────────────────────── */

.vm-body {
  flex: 1;
  display: flex;
  overflow: hidden;
  min-height: 0;
}

.listing-pane {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  background: var(--bg);
}

.listing-empty {
  padding: 24px 20px;
  color: var(--muted);
  font-size: 13px;
  max-width: 46ch;
}

.listing { display: none; padding: 10px 0 24px; }

.l-row {
  display: flex;
  align-items: baseline;
  transition: background 0.1s;
}

.l-row.l-current {
  background: rgba(255, 180, 84, 0.13);
  box-shadow: inset 3px 0 0 var(--accent2);
}

.l-gutter {
  width: 60px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding: 2px 10px 2px 0;
  user-select: none;
}

.l-gutter-live { cursor: pointer; }
.l-gutter-live:hover .l-addr { color: var(--text); }

.l-bp {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.l-gutter-live .l-bp {
  border: 1px solid var(--muted);
}

.l-gutter-live:hover .l-bp { border-color: var(--red); }

.l-bp-on .l-bp {
  background: var(--red);
  border-color: var(--red);
}

.l-addr {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
}

.l-code {
  flex: 1;
  min-width: 0;
  font-family: var(--mono);
  font-size: 12.5px;
  white-space: pre;
  padding: 2px 12px 2px 0;
  color: var(--text);
}

.l-row-noaddr .l-code { color: var(--muted); }

/* ── State pane ──────────────────────────────────────────────────────── */

.state-pane {
  width: 300px;
  min-width: 220px;
  flex-shrink: 0;
  border-left: 1px solid var(--border);
  overflow-y: auto;
  background: var(--surface);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.panel { flex-shrink: 0; }

.panel-console { flex: 1; display: flex; flex-direction: column; min-height: 90px; }

.panel-title {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 7px;
}

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

.reg-cell {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 6px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.reg-pc { border-color: rgba(77, 208, 196, 0.4); }

.reg-name {
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.reg-val {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--green);
}

.reg-pc .reg-val { color: var(--accent); }

.tower {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 30px;
}

.tower-block {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 5px 8px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text);
  text-align: center;
}

.tower-top {
  border-color: var(--accent);
  background: rgba(77, 208, 196, 0.1);
  color: var(--accent);
  font-weight: 700;
}

.tower-call .tower-block { color: var(--accent2); }
.tower-call .tower-top { border-color: var(--accent2); background: rgba(255, 180, 84, 0.1); color: var(--accent2); }

.tower-frames .tower-block { color: var(--green); text-align: left; font-size: 11.5px; }
.tower-frames .tower-top { border-color: var(--green); background: rgba(126, 231, 135, 0.1); color: var(--green); }

.tower-empty {
  color: var(--muted);
  font-size: 12px;
  font-family: var(--mono);
  padding: 4px 2px;
}

.console {
  flex: 1;
  overflow-y: auto;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 8px 10px;
  font-family: var(--mono);
  font-size: 12.5px;
  min-height: 60px;
}

.console-line { color: var(--green); line-height: 1.6; }
.console-empty { color: var(--muted); }

/* ── Footer ──────────────────────────────────────────────────────────── */

footer {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  font-size: 12px;
  color: var(--muted);
  flex-shrink: 0;
}

footer a { color: var(--muted); text-decoration: none; }
footer a:hover { color: var(--text); }

/* ── Scrollbars ──────────────────────────────────────────────────────── */

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ── Responsive ──────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  aside { display: none; }
  .kb-hint { display: none; }
}

@media (max-width: 700px) {
  .vm-body { flex-direction: column; }
  .listing-pane { flex: 1 1 auto; min-height: 160px; }
  .state-pane {
    width: 100%;
    min-width: 0;
    border-left: none;
    border-top: 1px solid var(--border);
    flex-direction: row;
    flex-wrap: wrap;
    max-height: 46vh;
  }
  .panel { flex: 1 1 140px; }
  .regs-grid { grid-template-columns: repeat(5, minmax(40px, 1fr)); }
}