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

:root {
  --bg: #0d1117;
  --panel: #161b22;
  --border: #30363d;
  --text: #e6edf3;
  --text-muted: #8b949e;
  --accent: #00e5ff;
  --accent-glow: rgba(0, 229, 255, 0.15);
  --accent-glow-strong: rgba(0, 229, 255, 0.3);
  --success: #3fb950;
  --error: #f85149;
  --warning: #d29922;
  --editor-bg: #0d1117;
  --gutter-bg: #0d1117;
  --inset-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
  --trig-color: #c8e64a;
}

[data-theme="light"] {
  --bg: #f0f2f5;
  --panel: #ffffff;
  --border: #d0d7de;
  --text: #1f2328;
  --text-muted: #656d76;
  --accent: #0098b3;
  --accent-glow: rgba(0, 152, 179, 0.1);
  --accent-glow-strong: rgba(0, 152, 179, 0.2);
  --editor-bg: #f6f8fa;
  --gutter-bg: #eef1f5;
  --inset-shadow: inset 0 2px 4px rgba(0,0,0,0.06);
  --trig-color: #7a8c00;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  overflow: hidden;
  height: 100vh;
}

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

.code-font { font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace; }

.flow-editor {
  background: var(--editor-bg);
  color: var(--text);
  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 13px;
  line-height: 1.6;
  border: none;
  outline: none;
  resize: none;
  width: 100%;
  height: 100%;
  padding: 12px;
  tab-size: 4;
  box-shadow: var(--inset-shadow);
}

.flow-editor::placeholder { color: var(--text-muted); opacity: 0.5; }

.console-output {
  background: #000;
  color: #3fb950;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  line-height: 1.6;
  padding: 12px;
  min-height: 100px;
  white-space: pre-wrap;
  word-break: break-all;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

@keyframes pulse-green {
  0%, 100% { box-shadow: 0 0 0 0 rgba(63, 185, 80, 0.6); }
  50% { box-shadow: 0 0 0 4px rgba(63, 185, 80, 0); }
}
@keyframes pulse-red {
  0%, 100% { box-shadow: 0 0 0 0 rgba(248, 81, 73, 0.6); }
  50% { box-shadow: 0 0 0 4px rgba(248, 81, 73, 0); }
}
@keyframes pulse-cyan {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(0, 229, 255, 0); }
}
@keyframes badge-glow {
  0%, 100% { box-shadow: 0 0 6px rgba(0,229,255,0.3), 0 0 12px rgba(188,140,255,0.2); }
  50% { box-shadow: 0 0 10px rgba(0,229,255,0.5), 0 0 20px rgba(188,140,255,0.3); }
}
@keyframes trig-glow {
  0%, 100% { box-shadow: 0 0 6px rgba(0,229,255,0.3), 0 0 12px rgba(200,230,74,0.2); }
  50% { box-shadow: 0 0 10px rgba(0,229,255,0.5), 0 0 20px rgba(200,230,74,0.4); }
}

.pulse-success { animation: pulse-green 2s infinite; }
.pulse-error { animation: pulse-red 2s infinite; }
.pulse-compile { animation: pulse-cyan 1.5s infinite; }
.badge-glow { animation: badge-glow 2s infinite; }
.trig-badge-glow { animation: trig-glow 2.5s infinite; }

.glow-btn:hover { box-shadow: 0 0 15px var(--accent-glow-strong); }

.bf-plus { color: #3fb950; }
.bf-minus { color: #f85149; }
.bf-right { color: #58a6ff; }
.bf-left { color: #d29922; }
.bf-dot { color: #e3b341; }
.bf-comma { color: #bc8cff; }
.bf-open { color: #ffffff; font-weight: 600; }
.bf-close { color: #ffffff; font-weight: 600; }

.resize-handle {
  width: 5px;
  cursor: col-resize;
  background: var(--border);
  position: relative;
  flex-shrink: 0;
  transition: background 0.2s;
}
.resize-handle:hover, .resize-handle.active { background: var(--accent); }
.resize-handle::after {
  content: '⋮';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--text-muted);
  font-size: 10px;
}

.tape-cell {
  min-width: 42px;
  height: 42px;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  border-radius: 4px;
  transition: all 0.2s;
  flex-shrink: 0;
}
.tape-cell.active {
  border-color: var(--accent);
  background: var(--accent-glow);
  box-shadow: 0 0 8px var(--accent-glow-strong);
}

@keyframes toast-in { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes toast-out { from { opacity: 1; } to { opacity: 0; } }
.toast { animation: toast-in 0.3s ease-out; }
.toast.exiting { animation: toast-out 0.3s ease-in forwards; }

.modal-overlay { background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(4px); }

.line-numbers {
  background: var(--gutter-bg);
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  line-height: 1.6;
  padding: 12px 8px;
  text-align: right;
  user-select: none;
  min-width: 40px;
}

@media (max-width: 768px) { .resize-handle { display: none; } }

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

.bf-highlight { background: rgba(0, 229, 255, 0.3); border-radius: 2px; }

.mem-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--bg);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
}

@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.cursor-blink::after { content: '█'; animation: blink 1s step-end infinite; color: #3fb950; }

.cmd-ref-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 380px;
  max-width: 90vw;
  height: 100vh;
  background: var(--panel);
  border-left: 1px solid var(--border);
  z-index: 8000;
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 24px rgba(0,0,0,0.4);
  animation: slide-in 0.25s ease-out;
}
@keyframes slide-in {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

.extended-badge {
  background: linear-gradient(135deg, #00e5ff, #bc8cff);
  color: #000;
  font-weight: 700;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.trig-badge {
  background: linear-gradient(135deg, #00e5ff, #c8e64a);
  color: #000;
  font-weight: 700;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  letter-spacing: 0.5px;
  white-space: nowrap;
}