:root {
  --green: #00ff41;
  --green-dim: #004400;
  --green-mid: #00aa2a;
  --amber: #ffb000;
  --red: #ff3333;
  --bg: #0a0a0a;
  --panel: #111511;
  --panel-border: #0a2a0a;
  --text-dim: #338833;
  --yellow: #ffff00;
}

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

body {
  background: var(--bg);
  color: var(--green);
  font-family: 'Fira Code', 'Share Tech Mono', monospace;
  font-size: 12px;
  overflow-x: hidden;
  min-height: 100vh;
}

/* CRT Scanline Overlay */
body::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;
}

/* Glow effects */
.glow-text {
  text-shadow: 0 0 6px rgba(0,255,65,0.5), 0 0 12px rgba(0,255,65,0.2);
}

.glow-amber {
  text-shadow: 0 0 6px rgba(255,176,0,0.5), 0 0 12px rgba(255,176,0,0.2);
}

.panel {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 4px;
}

/* Custom scrollbars */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--green-dim); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--green-mid); }

textarea, input[type="text"], input[type="number"], select {
  background: #080808;
  color: var(--green);
  border: 1px solid var(--green-dim);
  font-family: 'Fira Code', monospace;
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 3px;
  outline: none;
  width: 100%;
}

textarea:focus, input:focus, select:focus {
  border-color: var(--green-mid);
  box-shadow: 0 0 4px rgba(0,255,65,0.2);
}

button {
  font-family: 'Fira Code', monospace;
  font-size: 11px;
  padding: 6px 14px;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s;
  border: 1px solid;
}

.btn-green {
  background: #001a00;
  color: var(--green);
  border-color: var(--green-dim);
}
.btn-green:hover {
  background: #002200;
  border-color: var(--green);
  box-shadow: 0 0 8px rgba(0,255,65,0.3);
}

.btn-red {
  background: #1a0000;
  color: var(--red);
  border-color: #440000;
}
.btn-red:hover {
  background: #220000;
  border-color: var(--red);
  box-shadow: 0 0 8px rgba(255,51,51,0.3);
}

.btn-amber {
  background: #1a1200;
  color: var(--amber);
  border-color: #443300;
}
.btn-amber:hover {
  background: #221800;
  border-color: var(--amber);
  box-shadow: 0 0 8px rgba(255,176,0,0.3);
}

/* Flag badges */
.flag-set {
  background: var(--green);
  color: #000;
  font-weight: 700;
}

.flag-clear {
  background: #1a1a1a;
  color: #444;
}

/* Highlight animation */
@keyframes flashGreen {
  0% { background: rgba(0,255,65,0.4); }
  100% { background: transparent; }
}
@keyframes flashYellow {
  0% { background: rgba(255,255,0,0.4); }
  100% { background: transparent; }
}
.flash-green { animation: flashGreen 0.6s ease-out; }
.flash-yellow { animation: flashYellow 0.6s ease-out; }

/* Register value that changed */
@keyframes pulseGreen {
  0%,100% { color: var(--green); }
  50% { color: #88ffaa; text-shadow: 0 0 8px rgba(0,255,65,0.8); }
}
.reg-changed { animation: pulseGreen 0.4s ease-out; }

select option {
  background: #111;
  color: var(--green);
}

.hex-byte {
  display: inline-block;
  width: 22px;
  text-align: center;
}

.hex-byte-highlight {
  color: var(--yellow);
}

.breakpoint {
  color: var(--red) !important;
  text-shadow: 0 0 4px rgba(255,0,0,0.5);
}

.memory-write-flash {
  animation: flashYellow 0.5s ease-out;
}