:root {
  --bg-primary: #0a0a0a;
  --bg-secondary: #111111;
  --bg-tertiary: #1a1a1a;
  --text-primary: #33ff33;
  --text-secondary: #22aa22;
  --text-dim: #117711;
  --border: #2a2a2a;
  --accent: #33ff33;
  --accent-dim: #116611;
  --error: #ff4444;
  --warning: #ffaa00;
  --highlight: #224422;
  --gutter-bg: #0d0d0d;
  --gutter-text: #336633;
  --keyword: #33ff33;
  --register: #44ddff;
  --number: #ffcc33;
  --comment: #557755;
  --label: #ff66ff;
  --directive: #ff8844;
  --string-color: #ffaa66;
}

[data-theme="amber"] {
  --bg-primary: #0a0800;
  --bg-secondary: #111008;
  --bg-tertiary: #1a1810;
  --text-primary: #ffaa33;
  --text-secondary: #aa7722;
  --text-dim: #775511;
  --border: #2a2518;
  --accent: #ffaa33;
  --accent-dim: #664411;
  --highlight: #221a08;
  --gutter-bg: #0d0b05;
  --gutter-text: #665522;
  --keyword: #ffaa33;
  --register: #ffcc66;
  --number: #ffdd88;
  --comment: #776633;
  --label: #ff8855;
  --directive: #ffcc44;
  --string-color: #ffbb55;
}

[data-theme="white"] {
  --bg-primary: #f5f0e8;
  --bg-secondary: #eae5dd;
  --bg-tertiary: #dfd8ce;
  --text-primary: #222222;
  --text-secondary: #555555;
  --text-dim: #888888;
  --border: #c8c0b4;
  --accent: #2255aa;
  --accent-dim: #bbc8dd;
  --error: #cc2222;
  --warning: #aa6600;
  --highlight: #dde8f5;
  --gutter-bg: #ece7df;
  --gutter-text: #999080;
  --keyword: #2255aa;
  --register: #aa2266;
  --number: #227744;
  --comment: #999080;
  --label: #884400;
  --directive: #6622aa;
  --string-color: #aa4400;
}

[data-theme="blue"] {
  --bg-primary: #000028;
  --bg-secondary: #000838;
  --bg-tertiary: #001048;
  --text-primary: #ccddff;
  --text-secondary: #8899cc;
  --text-dim: #556688;
  --border: #223366;
  --accent: #55aaff;
  --accent-dim: #223355;
  --highlight: #0a1a44;
  --gutter-bg: #000020;
  --gutter-text: #4466aa;
  --keyword: #66bbff;
  --register: #aaffaa;
  --number: #ffdd66;
  --comment: #445588;
  --label: #ff88cc;
  --directive: #ff9955;
  --string-color: #ffaa77;
}

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

body {
  font-family: 'IBM Plex Mono', monospace;
  background: var(--bg-primary);
  color: var(--text-primary);
  overflow: hidden;
  height: 100vh;
}

#root {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

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

@keyframes flicker {
  0% { opacity: 1; }
  92% { opacity: 1; }
  93% { opacity: 0.96; }
  94% { opacity: 1; }
  96% { opacity: 0.98; }
  97% { opacity: 1; }
}

.crt-flicker {
  animation: flicker 4s infinite;
}

.editor-container {
  position: relative;
  flex: 1;
  overflow: hidden;
}

.editor-gutter {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 50px;
  background: var(--gutter-bg);
  border-right: 1px solid var(--border);
  overflow: hidden;
  user-select: none;
  z-index: 2;
}

.editor-gutter-inner {
  padding: 8px 4px;
  font-size: 13px;
  line-height: 20px;
  color: var(--gutter-text);
  text-align: right;
}

.editor-textarea {
  position: absolute;
  left: 50px;
  top: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  color: var(--text-primary);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  line-height: 20px;
  padding: 8px 12px;
  border: none;
  outline: none;
  resize: none;
  overflow: auto;
  white-space: pre;
  tab-size: 8;
  -moz-tab-size: 8;
  z-index: 3;
  caret-color: var(--accent);
}

.editor-highlight {
  position: absolute;
  left: 50px;
  top: 0;
  right: 0;
  bottom: 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  line-height: 20px;
  padding: 8px 12px;
  white-space: pre;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
  color: transparent;
}

.editor-highlight .kw { color: var(--keyword); font-weight: 600; }
.editor-highlight .reg { color: var(--register); }
.editor-highlight .num { color: var(--number); }
.editor-highlight .cmt { color: var(--comment); font-style: italic; }
.editor-highlight .lbl { color: var(--label); font-weight: 700; }
.editor-highlight .dir { color: var(--directive); font-weight: 600; }
.editor-highlight .str { color: var(--string-color); }
.editor-highlight .err { text-decoration: wavy underline var(--error); }

.hex-dump {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  line-height: 20px;
}

.hex-addr { color: var(--text-dim); }
.hex-byte { color: var(--text-primary); }
.hex-ascii { color: var(--text-secondary); }

.btn-retro {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  padding: 4px 12px;
  border: 1px solid var(--border);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.1s;
  border-top-color: #444;
  border-left-color: #444;
  border-bottom-color: #111;
  border-right-color: #111;
  white-space: nowrap;
}

.btn-retro:hover {
  background: var(--highlight);
  color: var(--accent);
}

.btn-retro:active {
  border-top-color: #111;
  border-left-color: #111;
  border-bottom-color: #444;
  border-right-color: #444;
  transform: translateY(1px);
}

.btn-assemble {
  background: #0a2a0a;
  border-color: #33ff33;
  color: #33ff33;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

[data-theme="white"] .btn-retro {
  border-top-color: #e0d8cc;
  border-left-color: #e0d8cc;
  border-bottom-color: #a09888;
  border-right-color: #a09888;
}

[data-theme="white"] .btn-assemble {
  background: #ddeedd;
  border-color: #228822;
  color: #228822;
}

.tab-active {
  background: var(--bg-primary) !important;
  border-bottom-color: var(--bg-primary) !important;
  color: var(--accent) !important;
}

.listing-addr { color: var(--text-dim); }
.listing-bytes { color: var(--number); }
.listing-source { color: var(--text-primary); }

.symbol-name { color: var(--label); }
.symbol-value { color: var(--number); }

.error-line { color: var(--error); }
.error-msg { color: var(--error); opacity: 0.8; }

.resizer {
  width: 6px;
  cursor: col-resize;
  background: var(--border);
  transition: background 0.2s;
  flex-shrink: 0;
}

.resizer:hover, .resizer.active {
  background: var(--accent);
}

.select-retro {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  cursor: pointer;
  outline: none;
}

.select-retro option {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

@keyframes assembleFlash {
  0% { background: var(--accent); color: var(--bg-primary); }
  100% { background: #0a2a0a; color: var(--accent); }
}

.flash-assemble {
  animation: assembleFlash 0.3s ease-out;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--bg-primary);
}
::-webkit-scrollbar-thumb {
  background: var(--border);
  border: 1px solid var(--bg-primary);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-dim);
}

/* Mobile */
@media (max-width: 768px) {
  .editor-textarea, .editor-highlight {
    font-size: 12px;
    line-height: 18px;
  }
  .editor-gutter-inner {
    font-size: 11px;
    line-height: 18px;
  }
  .btn-retro {
    font-size: 11px;
    padding: 3px 8px;
  }
}