/* ===== Dracula syntax theme (inlined fallback — always loaded with the page,
   so the editor renders correctly even if the vendored CSS isn't reachable.
   !important on bg/color to win over any cascade race with codemirror.css). ===== */
.cm-s-dracula.CodeMirror { background: #282a36 !important; color: #f8f8f2 !important; }
.cm-s-dracula .CodeMirror-gutters { background: #282a36 !important; border-right: 1px solid #3d3f4e; }
.cm-s-dracula .CodeMirror-linenumber { color: #6272a4 !important; }
.cm-s-dracula .CodeMirror-cursor { border-left: 2px solid #f8f8f2 !important; }
.cm-s-dracula .CodeMirror-selected { background: #44475a !important; }
.cm-s-dracula .CodeMirror-line::selection,
.cm-s-dracula .CodeMirror-line > span::selection,
.cm-s-dracula .CodeMirror-line > span > span::selection { background: #44475a; }
.cm-s-dracula span.cm-keyword    { color: #ff79c6 !important; font-weight: bold; }
.cm-s-dracula span.cm-atom       { color: #bd93f9 !important; }
.cm-s-dracula span.cm-number     { color: #bd93f9 !important; }
.cm-s-dracula span.cm-def        { color: #50fa7b !important; }
.cm-s-dracula span.cm-variable   { color: #f8f8f2 !important; }
.cm-s-dracula span.cm-variable-2 { color: #8be9fd !important; font-style: italic; }
.cm-s-dracula span.cm-variable-3,
.cm-s-dracula span.cm-type       { color: #ffb86c !important; }
.cm-s-dracula span.cm-property   { color: #66d9e8 !important; }
.cm-s-dracula span.cm-operator   { color: #ff79c6 !important; }
.cm-s-dracula span.cm-string     { color: #f1fa8c !important; }
.cm-s-dracula span.cm-string-2   { color: #f1fa8c !important; }
.cm-s-dracula span.cm-comment    { color: #6272a4 !important; font-style: italic; }
.cm-s-dracula span.cm-builtin    { color: #8be9fd !important; }
.cm-s-dracula span.cm-meta       { color: #f8f8f2 !important; }
.cm-s-dracula span.cm-tag        { color: #ff79c6 !important; }
.cm-s-dracula span.cm-attribute  { color: #50fa7b !important; }
.cm-s-dracula span.cm-error      { color: #ff5555 !important; text-decoration: underline; }
.cm-s-dracula .CodeMirror-activeline-background { background: #44475a40; }
.cm-s-dracula .CodeMirror-matchingbracket { background: #44475a; color: #f8f8f2 !important; font-weight: bold; }

/* ===== Runner Panel Container ===== */
.code-runner-panel {
  border: 1px solid var(--border-color);
  border-top: none;
  border-radius: 0 0 var(--border-radius) var(--border-radius);
  margin-top: 0;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

/* ===== Header ===== */
.code-runner-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  background: #282a36;
  border-bottom: 1px solid var(--border-color);
}

.code-runner-panel__title {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6272a4;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.code-runner-panel__actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-sm);
}

.code-runner-panel__status {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  font-style: italic;
}

/* ===== Panel buttons ===== */
.code-runner-panel__reset {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
}

.code-runner-panel__reset:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

/* ===== CodeMirror editor wrapper ===== */
.code-runner-panel__editor-wrap .CodeMirror {
  height: 320px;
  font-size: 13px;
  font-family: var(--font-mono);
  line-height: 1.6;
}

/* ===== Output section ===== */
.code-runner-panel__output-wrap {
  border-top: 1px solid var(--border-color);
}

.code-runner-panel__output-label {
  padding: var(--space-xs) var(--space-md);
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-color);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.code-runner-panel__output {
  background: #1e1e2e;
  color: #cdd6f4;
  font-family: var(--font-mono);
  font-size: 13px;
  min-height: 80px;
  max-height: 300px;
  overflow-y: auto;
  white-space: pre-wrap;
  padding: var(--space-md);
  margin: 0;
  line-height: 1.6;
}

.code-runner-panel__output--error {
  color: #f38ba8;
}