:root {
  --bg: #080b12;
  --panel: #101725;
  --panel2: #141c2d;
  --cell: #0c1320;
  --line: #1e2940;
  --line2: #2a3754;
  --text: #e8edf7;
  --dim: #8d99b3;
  --faint: #56627c;
  --rsp: #ffb020;
  --rbp: #3fd2ff;
  --ret: #b98cff;
  --oldrbp: #4fe0c0;
  --lbl: #ffd166;
  --ok: #3ee08f;
  --bad: #ff4d6d;
  --sel: #7aa2ff;
  --t-op: #d49bff;
  --t-reg: #82aaff;
  --t-imm: #c3e88d;
  --t-num: #f7976c;
  --t-label: #ffcb6b;
  --mono: 'JetBrains Mono', 'Cascadia Code', Consolas, ui-monospace, monospace;
  --sans: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --row-h: 38px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background:
    radial-gradient(1100px 520px at 12% -12%, rgba(63, 110, 255, 0.16), transparent 60%),
    radial-gradient(900px 520px at 105% 110%, rgba(185, 140, 255, 0.12), transparent 60%),
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px) 0 0 / 100% 28px,
    var(--bg);
  color: var(--text);
  font-family: var(--sans);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; cursor: pointer; }
code, kbd, .asm { font-family: var(--mono); }
kbd {
  display: inline-block; padding: 1px 6px; border-radius: 5px; font-size: 0.78em;
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line2); border-bottom-width: 2px; color: var(--dim);
}
body.dragging, body.dragging * { cursor: grabbing !important; user-select: none; }

.app { display: grid; grid-template-rows: auto 1fr; height: 100vh; }

/* ───────────── header ───────────── */
.top {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  padding: 10px 22px; border-bottom: 1px solid var(--line);
  background: rgba(8, 11, 18, 0.72); backdrop-filter: blur(10px);
}
.top-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.top-right { display: flex; align-items: center; justify-content: flex-end; gap: 18px; }
.brand { font-family: var(--mono); font-weight: 800; font-size: 28px; letter-spacing: -1px; user-select: none; }
.brand .g { color: var(--rsp); text-shadow: 0 0 18px rgba(255, 176, 32, 0.55); }
.brand .asm { background: linear-gradient(90deg, #e8edf7, #9fb8ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand .cursor { display: inline-block; width: 12px; height: 24px; margin-left: 4px; vertical-align: -3px; background: var(--rsp); animation: blink 1.1s steps(1) infinite; border-radius: 2px; }
@keyframes blink { 50% { opacity: 0; } }

.modes { display: inline-flex; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 3px; }
.modes button { background: none; border: 0; padding: 7px 13px; border-radius: 9px; color: var(--dim); font-weight: 600; font-size: 14px; }
.modes button:hover { color: var(--text); }
.modes button.on { background: var(--panel2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line2); }
.subsel { display: flex; align-items: center; gap: 8px; color: var(--dim); font-size: 13px; }
.subsel select {
  background: var(--panel); color: var(--text); border: 1px solid var(--line2); border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 13px;
}

.stats { display: flex; gap: 16px; align-items: flex-end; }
.stat { display: flex; flex-direction: column; align-items: flex-end; line-height: 1; }
.stat small { font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--faint); margin-bottom: 4px; }
.stat b { font-family: var(--mono); font-size: 24px; font-weight: 800; }
.stat b.gold { color: var(--lbl); text-shadow: 0 0 16px rgba(255, 209, 102, 0.5); }
.stat .score.bump { animation: bump 0.45s ease; color: var(--ok); }
@keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.35); } 100% { transform: scale(1); } }
.stat.tier { flex-direction: row; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); }
.stat.tier small { margin: 0; }
.stat.tier b { font-size: 18px; color: var(--rbp); }
.stat.tier span { font-size: 12px; color: var(--dim); }
.stat.streak b { color: var(--rsp); }
.tools { display: flex; gap: 6px; }
.tools button {
  background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: 6px 10px; font-size: 13px; font-weight: 600; color: var(--dim);
}
.tools button:hover { color: var(--text); border-color: var(--line2); }
.tools button.on { color: var(--rbp); }
.tools .refbtn { color: var(--text); }

/* ───────────── layout ───────────── */
.main {
  display: grid; grid-template-columns: minmax(420px, 1fr) minmax(620px, 800px);
  gap: 22px; padding: 18px 22px; min-height: 0;
}

/* ───────────── stage (left) ───────────── */
.stage { display: flex; flex-direction: column; gap: 14px; min-height: 0; overflow-y: auto; padding: 4px 6px 24px 2px; scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }
.stage > * { flex-shrink: 0; }
.app.phase-play .tape, .app.phase-ok .tape { margin-top: auto; }
.app.phase-wrong .tape, .app.phase-dead .tape { min-height: 0; }
.routine { padding: 4px 2px 0; }
.kicker { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--faint); font-weight: 600; }
.kicker .dot { color: var(--line2); }
.sig { font-family: var(--mono); font-size: 21px; margin-top: 4px; line-height: 1.35; }
.sig .fn { color: var(--t-label); font-weight: 700; }
.sig .args { color: var(--dim); }
.question { margin-top: 8px; color: var(--dim); font-size: 14px; line-height: 1.45; max-width: 64ch; }
.notes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.notes span { font-size: 12.5px; color: var(--lbl); background: rgba(255, 209, 102, 0.08); border: 1px solid rgba(255, 209, 102, 0.22); padding: 4px 9px; border-radius: 999px; }

.tape {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 250px; padding: 18px 22px 22px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(16, 23, 37, 0.35), rgba(16, 23, 37, 0.9));
  border: 1px solid var(--line);
}
.history { display: flex; flex-direction: column; gap: 3px; margin-bottom: 14px; }
.hist { opacity: calc(1 - var(--age) * 0.12); font-size: 16px; }
.hlabel { font-family: var(--mono); color: var(--t-label); font-size: 14px; margin: 4px 0 1px 34px; opacity: 0.85; }
.hline { display: flex; align-items: center; gap: 10px; }
.hline .ok { color: var(--ok); font-size: 12px; opacity: 0.8; }
.hline .tag { font-size: 11px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line2); color: var(--dim); }
.lineno { font-family: var(--mono); color: var(--faint); font-size: 12px; min-width: 24px; text-align: right; }
.skipped { margin: 2px 0 2px 58px; font-size: 14px; }
.skipped div { display: flex; align-items: baseline; gap: 8px; opacity: 0.5; }
.skip-code { text-decoration: line-through; text-decoration-color: rgba(255, 77, 109, 0.7); }
.skip-tag { font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--bad); }

.current { animation: slideIn 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.2); }
@keyframes slideIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.crumb { font-size: 13px; color: var(--dim); margin-bottom: 6px; margin-left: 34px; }
.crumb code { color: var(--t-label); }
.crumb span { color: var(--faint); }
.clabel { font-family: var(--mono); font-size: 22px; color: var(--t-label); margin-left: 34px; margin-bottom: 2px; }
.cline { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cline .lineno { font-size: 14px; }
.caret { color: var(--rsp); font-size: 22px; text-shadow: 0 0 14px rgba(255, 176, 32, 0.7); }
.tape { container-type: inline-size; }
.bigwrap { display: inline-block; font-size: calc(clamp(22px, 7.4cqi, 56px) * 17 / max(17, var(--len))); }
.asm.big { font-size: 1em; font-weight: 700; letter-spacing: -0.5px; white-space: nowrap; }
.current.ok .asm.big { color: var(--ok); }
.new {
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #0b0f18;
  background: var(--lbl); padding: 3px 8px; border-radius: 6px; box-shadow: 0 0 18px rgba(255, 209, 102, 0.35);
}
.io { margin: 10px 0 0 34px; font-family: var(--mono); font-size: 14px; color: var(--t-imm); background: rgba(195, 232, 141, 0.07); border: 1px dashed rgba(195, 232, 141, 0.3); padding: 7px 12px; border-radius: 10px; display: inline-block; }

.asm .t-op { color: var(--t-op); }
.asm .t-reg, .t-reg { color: var(--t-reg); }
.asm .t-imm, .t-imm { color: var(--t-imm); }
.asm .t-num { color: var(--t-num); }
.asm .t-label { color: var(--t-label); }
.asm .t-punct { color: var(--dim); }

.checkpoint {
  font-size: 14px; line-height: 1.5; padding: 12px 16px; border-radius: 12px;
  background: rgba(63, 210, 255, 0.07); border: 1px solid rgba(63, 210, 255, 0.28); color: #cfefff;
}
.checkpoint::before { content: '📝 '; }

/* actions */
.actions { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 6px 0; }
.actions .minor { display: flex; flex-direction: column; gap: 6px; }
.actions .minor button { background: none; border: 1px solid var(--line); color: var(--dim); border-radius: 9px; padding: 5px 12px; font-size: 13px; }
.actions .minor button:hover:not(:disabled) { color: var(--text); border-color: var(--line2); }
.actions .minor button:disabled { opacity: 0.35; cursor: default; }
.big-btn {
  border: 0; border-radius: 14px; padding: 15px 34px; font-size: 19px; font-weight: 700; letter-spacing: 0.3px;
  display: inline-flex; align-items: center; gap: 12px; transition: transform 0.08s ease, box-shadow 0.2s ease, background 0.2s;
}
.big-btn:active { transform: translateY(1px) scale(0.99); }
.big-btn kbd { background: rgba(0, 0, 0, 0.18); border-color: rgba(0, 0, 0, 0.25); color: inherit; }
.big-btn.check, .big-btn.primary {
  color: #1a1204; background: linear-gradient(180deg, #ffc54d, #ff9f1a);
  box-shadow: 0 8px 30px rgba(255, 166, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  min-width: 220px; justify-content: center;
}
.big-btn.check:hover, .big-btn.primary:hover { box-shadow: 0 10px 38px rgba(255, 166, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.big-btn.check.ok { background: linear-gradient(180deg, #62f0a8, #26c776); color: #03220f; box-shadow: 0 8px 34px rgba(62, 224, 143, 0.45); }
.big-btn.ghost { background: var(--panel); color: var(--text); border: 1px solid var(--line2); }
.big-btn.taken { background: linear-gradient(180deg, #6fdcff, #22b3ea); color: #041a24; box-shadow: 0 8px 30px rgba(63, 210, 255, 0.25); }
.big-btn.nottaken { background: var(--panel2); color: var(--text); border: 1px solid var(--line2); }
.actions.branch { gap: 14px; }

.legend { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: center; font-size: 12.5px; color: var(--faint); margin-top: auto; padding-top: 8px; }
.actions + .legend, .checkpoint + .actions + .legend { margin-top: auto; }
.legend b { font-family: var(--mono); font-weight: 600; }
.c-rsp { color: var(--rsp); }
.c-rbp { color: var(--rbp); }

/* feedback */
.feedback {
  border-radius: 18px; padding: 18px 20px; background: var(--panel); border: 1px solid rgba(255, 77, 109, 0.35);
  box-shadow: 0 0 0 1px rgba(255, 77, 109, 0.08), 0 20px 60px rgba(0, 0, 0, 0.35); animation: slideIn 0.3s ease;
}
.feedback.dead { border-color: rgba(255, 77, 109, 0.6); background: linear-gradient(180deg, rgba(255, 77, 109, 0.09), var(--panel) 120px); }
.fb-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.fb-title { font-size: 24px; font-weight: 700; }
.fb-title .sig { font-family: var(--mono); color: var(--bad); font-weight: 800; margin-right: 6px; text-shadow: 0 0 22px rgba(255, 77, 109, 0.5); font-size: 26px; }
.fb-score { color: var(--dim); font-size: 15px; }
.fb-score b { color: var(--text); font-family: var(--mono); font-size: 18px; }
.gold { color: var(--lbl); font-weight: 700; }
.fb-sec { margin-top: 14px; }
.fb-sec h4 { margin: 0 0 8px; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--faint); display: flex; align-items: center; gap: 8px; }
.fb-sec h4 .asm { text-transform: none; letter-spacing: 0; font-size: 14px; }
.fb-sec.why p {
  margin: 0 0 8px; padding: 10px 14px; border-radius: 10px; line-height: 1.5; font-size: 15px;
  background: rgba(255, 176, 32, 0.08); border-left: 3px solid var(--rsp);
}
.steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; line-height: 1.5; }
.steps li::marker { color: var(--faint); font-family: var(--mono); }
.rich code { background: rgba(255, 255, 255, 0.05); padding: 1px 5px; border-radius: 5px; font-size: 0.92em; }
.rich b { color: #fff; font-family: var(--mono); font-weight: 700; }
.rich .dim { color: var(--dim); font-size: 0.93em; }
.rich .dim b { color: var(--text); }
.diffs { border-collapse: collapse; font-size: 14px; width: 100%; }
.diffs th { text-align: left; font-size: 11px; font-weight: 600; color: var(--faint); letter-spacing: 1px; text-transform: uppercase; padding: 0 10px 6px 0; }
.diffs td { padding: 6px 10px 6px 0; border-top: 1px solid var(--line); vertical-align: top; }
.diffs .loc code { font-size: 13px; }
.diffs .bad { color: var(--bad); font-family: var(--mono); text-decoration: line-through; text-decoration-color: rgba(255, 77, 109, 0.5); white-space: nowrap; }
.diffs .good { color: var(--ok); font-family: var(--mono); font-weight: 700; white-space: nowrap; }
.diffs .note { color: var(--dim); font-size: 12.5px; }
.fb-actions { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; }

.done { text-align: center; padding: 28px 20px; border-radius: 18px; background: var(--panel); border: 1px solid rgba(62, 224, 143, 0.35); animation: slideIn 0.3s ease; }
.done-title { font-size: 26px; font-weight: 700; color: var(--ok); }
.done-title code { color: var(--t-label); }
.done-sub { color: var(--dim); margin: 6px 0 16px; }
.done .bar { height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; margin: 0 auto 18px; max-width: 320px; }
.done .bar i { display: block; height: 100%; background: var(--ok); animation: fill 1.8s linear forwards; }
@keyframes fill { from { width: 0; } to { width: 100%; } }
.done.paper { text-align: left; }
.done .outro { color: var(--text); line-height: 1.55; font-size: 15px; }
.done.paper .fb-actions { justify-content: flex-start; }

/* ───────────── machine (right) ───────────── */
.machine { display: grid; grid-template-columns: 236px 1fr; gap: 16px; min-height: 0; }
.panel-title { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--faint); font-weight: 700; margin: 2px 2px 8px; display: flex; justify-content: space-between; align-items: baseline; }
.panel-title small { letter-spacing: 0; text-transform: none; font-weight: 500; font-size: 11px; color: var(--faint); opacity: 0.8; }
.regs-col { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; padding-right: 2px; }
.regs { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.reg {
  position: relative; display: grid; grid-template-columns: 52px 1fr; align-items: center;
  min-height: 40px; padding: 0 10px; border-radius: 11px; background: var(--panel); border: 1px solid var(--line);
  cursor: text; transition: border-color 0.15s, background 0.15s;
}
.reg:hover { border-color: var(--line2); }
.reg .rn { font-family: var(--mono); font-size: 14px; color: var(--t-reg); font-weight: 600; }
.reg.r-rsp { border-color: rgba(255, 176, 32, 0.35); }
.reg.r-rsp .rn { color: var(--rsp); }
.reg.r-rbp { border-color: rgba(63, 210, 255, 0.35); }
.reg.r-rbp .rn { color: var(--rbp); }
.reg .rv { text-align: right; font-family: var(--mono); font-size: 16px; overflow: hidden; }
.reg.changed { background: #16203a; box-shadow: inset 3px 0 0 var(--sel); }
.reg.sel { outline: 2px solid var(--sel); outline-offset: 1px; }
.reg.wrong { border-color: var(--bad); background: rgba(255, 77, 109, 0.08); }
.reg.fixed { border-color: var(--ok); background: rgba(62, 224, 143, 0.07); }
.reg .expect { position: absolute; right: 8px; bottom: -9px; }

.palette { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; font-family: var(--mono); font-size: 13px;
  background: var(--panel); border: 1px solid var(--line2); cursor: grab; user-select: none; touch-action: none;
}
.chip:hover { border-color: var(--dim); }
.chip i { font-style: normal; opacity: 0.8; }
.chip.k-unk { color: var(--dim); }
.chip.k-ret { color: var(--ret); border-color: rgba(185, 140, 255, 0.4); }
.chip.k-rbp { color: var(--oldrbp); border-color: rgba(79, 224, 192, 0.4); }
.chip.k-label { color: var(--t-label); border-color: rgba(255, 203, 107, 0.4); }
.viewtoggle { display: flex; background: var(--panel); border: 1px solid var(--line); border-radius: 11px; padding: 3px; }
.viewtoggle button { flex: 1; background: none; border: 0; padding: 7px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--dim); }
.viewtoggle button.on { background: var(--panel2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line2); }

.stack-col {
  position: relative; display: flex; flex-direction: column; min-height: 0;
  background: rgba(16, 23, 37, 0.82); border: 1px solid var(--line); border-radius: 18px; padding: 14px 14px 10px;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.machine.ok .stack-col { border-color: rgba(62, 224, 143, 0.6); box-shadow: 0 0 0 1px rgba(62, 224, 143, 0.3), 0 0 50px rgba(62, 224, 143, 0.14); }
.machine.wrong .stack-col, .machine.dead .stack-col { border-color: rgba(255, 77, 109, 0.5); animation: shake 0.38s ease; }
@keyframes shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.stack-head { display: grid; grid-template-columns: 64px 1fr 150px; gap: 10px; font-size: 10.5px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--faint); padding: 0 0 6px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.stack-head span:first-child { text-align: right; }
.rows { overflow-y: auto; flex: 1; min-height: 0; padding: 2px 0; scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }
.row { display: grid; grid-template-columns: 64px 1fr 150px; align-items: center; gap: 10px; height: var(--row-h); position: relative; }
.row .addr { font-family: var(--mono); font-size: 13px; color: var(--dim); text-align: right; padding-right: 8px; border-right: 2px solid transparent; height: 100%; display: flex; align-items: center; justify-content: flex-end; }
.row.frame .addr { border-right-color: rgba(63, 210, 255, 0.35); }
.row.is-top .addr { color: var(--rsp); font-weight: 700; }
.row.caller .addr { color: var(--faint); }
.row.free .addr { color: var(--faint); }
.row.drop-hover { background: rgba(255, 176, 32, 0.07); border-radius: 8px; }
.row.free + .row.free::before { content: none; }

.cell {
  position: relative; height: 31px; border-radius: 8px; background: var(--cell); border: 1px solid var(--line2);
  display: flex; align-items: center; padding: 0 34px 0 12px; cursor: text; font-family: var(--mono); font-size: 16px;
  transition: border-color 0.12s, background 0.12s, opacity 0.12s; touch-action: none; min-width: 0;
}
.cell:hover { border-color: #3a4a6d; }
.row.free .cell { opacity: 0.62; background-image: repeating-linear-gradient(135deg, transparent 0 7px, rgba(255, 255, 255, 0.025) 7px 14px); }
.row.free .cell:hover, .row.free .cell.sel, .row.free .cell.changed, .row.free .cell.wrong, .row.free .cell.fixed { opacity: 1; }
.row.caller .cell { background: rgba(12, 19, 32, 0.55); border-style: dashed; }
.row.is-top .cell { border-color: rgba(255, 176, 32, 0.55); box-shadow: 0 0 0 1px rgba(255, 176, 32, 0.12), 0 0 22px rgba(255, 176, 32, 0.06); }
.cell.changed { box-shadow: inset 3px 0 0 var(--sel); background-color: #111b31; }
.row.is-top .cell.changed { box-shadow: inset 3px 0 0 var(--sel), 0 0 0 1px rgba(255, 176, 32, 0.12); }
.cell.sel { outline: 2px solid var(--sel); outline-offset: 1px; }
.cell.wrong { border-color: var(--bad) !important; background-color: rgba(255, 77, 109, 0.09); }
.cell.fixed { border-color: var(--ok) !important; background-color: rgba(62, 224, 143, 0.07); }
.cell.drop-hover, .reg.drop-hover, .byte.drop-hover { outline: 2px dashed var(--rsp); outline-offset: 1px; }
.cell.expanded { padding-right: 34px; padding-left: 6px; }

.v { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v.num { color: var(--text); font-weight: 600; }
.v.num.long { font-size: 14px; }
.v.num.xlong { font-size: 12px; }
.v.unk { color: var(--faint); font-weight: 700; }
.v.sym { display: inline-flex; align-items: center; gap: 6px; padding: 1px 9px; border-radius: 999px; font-size: 14px; font-weight: 600; }
.v.sym i { font-style: normal; opacity: 0.85; }
.v.sym.k-ret { color: var(--ret); background: rgba(185, 140, 255, 0.12); box-shadow: inset 0 0 0 1px rgba(185, 140, 255, 0.35); }
.v.sym.k-rbp { color: var(--oldrbp); background: rgba(79, 224, 192, 0.1); box-shadow: inset 0 0 0 1px rgba(79, 224, 192, 0.35); }
.v.sym.k-label { color: var(--t-label); background: rgba(255, 203, 107, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 203, 107, 0.35); }
.v.mixed { color: var(--text); font-size: 14px; }
.reg .v.sym { font-size: 13px; padding: 1px 7px; }

.edit {
  width: 100%; height: 25px; background: #050910; border: 1px solid var(--sel); border-radius: 6px; color: #fff;
  font-family: var(--mono); font-size: 15px; padding: 0 8px; outline: none; box-shadow: 0 0 0 3px rgba(122, 162, 255, 0.18);
}
.reg .edit { text-align: right; }
.edit.edit-byte { height: 20px; font-size: 12px; padding: 0 2px; text-align: center; }

.bytes { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; width: 100%; }
.byte {
  position: relative; height: 25px; border-radius: 5px; background: rgba(255, 255, 255, 0.035); border: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 12.5px; line-height: 1; cursor: text;
}
.byte:hover { border-color: #3a4a6d; }
.byte span { font-weight: 600; }
.byte small { font-size: 8.5px; color: var(--faint); margin-top: 1px; }
.byte.unk span { color: var(--faint); }
.byte.symb span { color: var(--ret); }
.byte.wrong { border-color: var(--bad); background: rgba(255, 77, 109, 0.12); }
.byte:last-child { border-color: rgba(130, 170, 255, 0.35); }

.bytes-toggle {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 24px; height: 22px; border-radius: 6px;
  background: transparent; border: 1px solid transparent; color: var(--faint); font-size: 13px; line-height: 1; opacity: 0.35; padding: 0;
}
.cell:hover .bytes-toggle, .bytes-toggle.on { opacity: 1; }
.bytes-toggle:hover { border-color: var(--line2); color: var(--text); }
.bytes-toggle.on { color: var(--sel); }
.expect {
  position: absolute; right: 34px; top: 50%; transform: translateY(-50%); font-family: var(--mono); font-size: 12px; font-weight: 700;
  color: #05230f; background: var(--ok); padding: 2px 7px; border-radius: 999px; white-space: nowrap; pointer-events: none;
  box-shadow: 0 4px 14px rgba(62, 224, 143, 0.3);
}
.reg .expect { top: auto; transform: none; right: 8px; bottom: -8px; font-size: 11px; padding: 1px 6px; }

.ptrs { display: flex; gap: 5px; align-items: center; height: 100%; }
.pill {
  position: relative; display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 9px 0 6px; border-radius: 8px;
  font-family: var(--mono); font-size: 13px; font-weight: 800; cursor: grab; user-select: none; touch-action: none; white-space: nowrap;
  transition: box-shadow 0.15s, transform 0.1s;
}
.pill .arr { font-size: 10px; }
.pill.p-rsp { color: #1b1100; background: linear-gradient(180deg, #ffc54d, #ff9f1a); box-shadow: 0 4px 16px rgba(255, 166, 0, 0.3); }
.pill.p-rbp { color: #02161d; background: linear-gradient(180deg, #7fe2ff, #22b3ea); box-shadow: 0 4px 16px rgba(63, 210, 255, 0.3); }
.pill:hover { transform: translateX(-2px); }
.pill.sel { outline: 2px solid #fff; outline-offset: 2px; }
.pill.ghost { background: transparent; color: var(--ok); border: 2px dashed var(--ok); box-shadow: none; cursor: default; }
.pill.preview { opacity: 0.55; }
.nudge { display: inline-flex; flex-direction: column; margin-left: 4px; }
.nudge button { border: 0; background: rgba(0, 0, 0, 0.18); color: inherit; font-size: 8px; line-height: 1; padding: 1px 4px; border-radius: 3px; }
.nudge button + button { margin-top: 1px; }
.parked { display: flex; flex-direction: column; gap: 6px; padding: 6px 0 8px; margin-bottom: 4px; border-bottom: 1px dashed var(--line); }
.park { display: flex; align-items: center; gap: 10px; padding-left: 74px; }
.park-v { font-family: var(--mono); font-size: 13px; color: var(--dim); }
.park-v small { color: var(--faint); font-family: var(--sans); }
.stack-foot { font-size: 11px; color: var(--faint); text-align: center; padding-top: 8px; border-top: 1px solid var(--line); margin-top: 6px; letter-spacing: 0.5px; }

.branch-veil {
  position: absolute; inset: 0; border-radius: 18px; display: flex; align-items: center; justify-content: center; text-align: center;
  background: rgba(8, 11, 18, 0.55); backdrop-filter: blur(1.5px); color: var(--dim); font-size: 15px; line-height: 1.6;
}
.branch-veil b { color: var(--rbp); font-size: 18px; }
.branch-veil > div { padding: 18px 24px; border-radius: 14px; background: rgba(16, 23, 37, 0.9); border: 1px solid var(--line2); }

/* drag ghost */
.drag-ghost {
  position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none; font-family: var(--mono); font-size: 13px; font-weight: 700;
  padding: 5px 10px; border-radius: 8px; background: #1c2742; color: #fff; border: 1px solid var(--sel); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.drag-ghost.ptr.p-rsp { background: var(--rsp); color: #1b1100; border-color: transparent; }
.drag-ghost.ptr.p-rbp { background: var(--rbp); color: #02161d; border-color: transparent; }

/* toast */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 900; max-width: min(640px, calc(100vw - 32px));
  padding: 11px 18px; border-radius: 12px; background: #182238; border: 1px solid var(--line2); color: var(--text); font-size: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); animation: toastIn 0.25s ease;
}
.toast.warn { border-color: rgba(255, 176, 32, 0.6); }
.toast.tier { border-color: rgba(63, 210, 255, 0.6); background: linear-gradient(90deg, #10304a, #182238); font-weight: 600; }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ───────────── cheat sheet ───────────── */
.ref-overlay { position: fixed; inset: 0; z-index: 800; background: rgba(4, 6, 10, 0.72); backdrop-filter: blur(6px); display: flex; justify-content: center; padding: 28px 16px; overflow-y: auto; }
.ref { position: relative; width: min(1180px, 100%); height: max-content; background: var(--panel); border: 1px solid var(--line2); border-radius: 20px; padding: 24px 28px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); animation: slideIn 0.25s ease; }
.ref h2 { margin: 0 0 18px; font-size: 26px; }
.ref h2 small { font-size: 13px; color: var(--faint); font-weight: 500; margin-left: 10px; }
.ref-close { position: absolute; right: 18px; top: 16px; width: 36px; height: 36px; border-radius: 10px; background: var(--panel2); border: 1px solid var(--line2); color: var(--dim); }
.ref-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; grid-auto-flow: dense; align-items: start; }
.ref-grid section { background: rgba(8, 11, 18, 0.45); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; font-size: 14px; line-height: 1.5; }
.ref-grid section.wide { grid-column: span 2; grid-row: span 2; }
.ref-grid h3 { margin: 0 0 10px; font-size: 13px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--rbp); }
.ref-grid ul { margin: 0; padding-left: 18px; }
.ref-grid li { margin-bottom: 4px; }
.ref-grid code { background: rgba(255, 255, 255, 0.05); padding: 1px 5px; border-radius: 5px; font-size: 0.9em; }
.ref-note { color: var(--dim); font-size: 13px; margin: 10px 0 0; }
.ops { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.ops td { padding: 4px 8px 4px 0; border-top: 1px solid var(--line); }
.ops td:first-child { font-family: var(--mono); white-space: nowrap; }
.instr { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.instr td { padding: 5px 10px 5px 0; border-top: 1px solid var(--line); }
.instr td:first-child { white-space: nowrap; }
.instr td.dim { color: var(--dim); font-size: 12.5px; }
.mini-stack { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; font-family: var(--mono); font-size: 12.5px; }
.ms-row { display: grid; grid-template-columns: 38px 1fr 72px; gap: 8px; align-items: center; }
.ms-row span { color: var(--dim); text-align: right; }
.ms-row div { background: var(--cell); border: 1px solid var(--line2); border-radius: 6px; padding: 3px 8px; }
.ms-row div.sym { color: var(--ret); }
.ms-row div.sym.b { color: var(--oldrbp); }
.ms-row em { font-style: normal; font-weight: 700; }
.ms-row.free div { opacity: 0.55; border-style: dashed; }
.endian { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; font-family: var(--mono); font-size: 13px; text-align: center; margin: 8px 0; }
.endian .eb { background: var(--cell); border: 1px solid var(--line2); border-radius: 5px; padding: 4px 0; color: var(--faint); }
.endian .eb.hot { color: var(--text); border-color: var(--sel); font-weight: 700; }
.endian .el { font-size: 10px; color: var(--faint); }
.code-block { font-size: 13.5px; background: var(--cell); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; }
.code-block .dim { color: var(--faint); font-family: var(--mono); font-size: 12px; }
.traps li::marker { content: '⚠ '; color: var(--rsp); }
.ref-foot { color: var(--faint); font-size: 13px; text-align: center; margin: 16px 0 0; }

/* ───────────── responsive ───────────── */
@media (max-width: 1440px) {
  .stat.tier span { display: none; }
  .reftxt { display: none; }
  .main { grid-template-columns: minmax(400px, 1fr) minmax(560px, 760px); gap: 18px; }
  .machine { grid-template-columns: 210px 1fr; gap: 12px; }
  .row, .stack-head { grid-template-columns: 58px 1fr 124px; gap: 8px; }
  .park { padding-left: 66px; }
}
@media (max-width: 1220px) {
  body { overflow: auto; }
  .app { height: auto; min-height: 100vh; }
  .main { grid-template-columns: 1fr; }
  .stage { overflow: visible; }
  .rows { max-height: none; overflow: visible; }
  .ref-grid { grid-template-columns: 1fr 1fr; }
  .ref-grid section.wide { grid-column: span 2; grid-row: auto; }
}
@media (max-width: 760px) {
  .top { grid-template-columns: 1fr; justify-items: center; }
  .top-right { justify-content: center; flex-wrap: wrap; }
  .main { padding: 12px; }
  .machine { grid-template-columns: 1fr; }
  .row, .stack-head { grid-template-columns: 48px 1fr 110px; }
  .ref-grid { grid-template-columns: 1fr; }
  .ref-grid section.wide { grid-column: auto; }
  .asm.big { white-space: normal; }
}