* { margin:0; padding:0; box-sizing:border-box; }
body { background:#0C0C1D; color:#c0c0c0; font-family:'IBM Plex Mono',monospace; overflow-x:hidden; }

:root {
  --phosphor: #00FF41;
  --phosphor-dim: #00aa2a;
  --phosphor-glow: rgba(0,255,65,0.3);
  --bg-dark: #0C0C1D;
  --bg-panel: #111128;
  --bg-cell: #1a1a3e;
  --border: #333366;
  --accent: #64FFDA;
  --amber: #FFB000;
  --amber-dim: #aa7500;
  --amber-glow: rgba(255,176,0,0.3);
}

body.amber-theme {
  --phosphor: #FFB000;
  --phosphor-dim: #aa7500;
  --phosphor-glow: rgba(255,176,0,0.3);
}

.scanlines::after {
  content:'';
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.08) 2px,
    rgba(0,0,0,0.08) 4px
  );
  pointer-events:none;
  z-index:9999;
}

.retro-btn {
  background: linear-gradient(180deg, #d0d0d0 0%, #a0a0a0 45%, #909090 55%, #808080 100%);
  color:#000;
  border:2px outset #c0c0c0;
  padding:4px 12px;
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  cursor:pointer;
  text-transform:uppercase;
  letter-spacing:1px;
}
.retro-btn:active { border-style:inset; }
.retro-btn:hover { background: linear-gradient(180deg, #e0e0e0 0%, #b0b0b0 45%, #a0a0a0 55%, #909090 100%); }
.retro-btn.primary { background: linear-gradient(180deg, #6688ff 0%, #3355cc 100%); color:#fff; border-color:#7799ff; }

.glow { text-shadow: 0 0 8px var(--phosphor-glow), 0 0 2px var(--phosphor-glow); }

.opcode-cell {
  font-size:9px;
  line-height:1.1;
  transition: transform 0.15s;
  cursor:pointer;
  border:1px solid rgba(255,255,255,0.1);
  border-radius:3px;
}
.opcode-cell:hover { transform:scale(1.08); z-index:10; filter:brightness(1.3); }

.cat-misc { background:#7B68EE33; border-color:#7B68EE55 !important; }
.cat-jump { background:#FFD70033; border-color:#FFD70055 !important; }
.cat-move { background:#00CED133; border-color:#00CED155 !important; }
.cat-string { background:#FF69B433; border-color:#FF69B455 !important; }
.cat-alu { background:#32CD3233; border-color:#32CD3255 !important; }
.cat-group { background:#FF8C0033; border-color:#FF8C0055 !important; }
.cat-prefix { background:#FF444433; border-color:#FF444455 !important; }
.cat-empty { background:#22223a; border-color:#33335555 !important; }
.cat-undefined { background: repeating-linear-gradient(45deg,#1a1a2e,#1a1a2e 3px,#22224400 3px,#22224400 6px); }

.cat-misc-text { color:#7B68EE; }
.cat-jump-text { color:#FFD700; }
.cat-move-text { color:#00CED1; }
.cat-string-text { color:#FF69B4; }
.cat-alu-text { color:#32CD32; }
.cat-group-text { color:#FF8C00; }
.cat-prefix-text { color:#FF4444; }

.code-editor {
  background:#0a0a20;
  color:var(--phosphor);
  border:1px solid var(--border);
  font-family:'IBM Plex Mono',monospace;
  font-size:13px;
  resize:none;
  outline:none;
  caret-color:var(--phosphor);
  tab-size:4;
  line-height:1.5;
}

.blink { animation: blink 1s step-end infinite; }
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0;} }

.flash { animation: regflash 0.6s ease-out; }
@keyframes regflash { 0%{background:#FFD70066;} 100%{background:transparent;} }

.highlight-row { background: rgba(100,255,218,0.1) !important; }

::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-track { background:#0C0C1D; }
::-webkit-scrollbar-thumb { background:#333366; border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:#4444aa; }

.tooltip-content {
  background:#1a1a3e;
  border:1px solid #4444aa;
  border-radius:4px;
  padding:8px;
  font-size:11px;
  box-shadow:0 4px 20px rgba(0,0,0,0.5);
  z-index:1000;
  max-width:300px;
}

.tab-btn { border-bottom:2px solid transparent; padding:6px 16px; cursor:pointer; font-size:12px; }
.tab-btn.active { border-bottom-color:var(--phosphor); color:var(--phosphor); }
.tab-btn:not(.active) { color:#666; }
.tab-btn:hover { color:var(--phosphor); }

.boot-screen {
  position:fixed;
  inset:0;
  background:#000;
  z-index:99999;
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  padding:40px;
  font-family:'IBM Plex Mono',monospace;
  color:#aaa;
  font-size:14px;
}

.search-highlight { outline:2px solid #FFD700; outline-offset:-1px; }

.modal-overlay {
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.7);
  z-index:5000;
  display:flex;
  align-items:center;
  justify-content:center;
}
.modal-content {
  background:#111128;
  border:2px solid #4444aa;
  border-radius:6px;
  padding:20px;
  max-width:600px;
  width:90%;
  max-height:80vh;
  overflow-y:auto;
  box-shadow:0 0 40px rgba(100,100,255,0.2);
}

@media (max-width:768px) {
  .opcode-cell { font-size:7px; padding:2px !important; min-width:40px; min-height:40px; }
}