/* Trang /code — Online Code Runner (.topnav nằm trong style.css) */

.code-page {
  flex: 1; display: flex; flex-direction: column; overflow: hidden;
  padding: 12px 16px; gap: 10px;
}

.lang-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); }
.lang-tab {
  padding: 10px 20px; background: transparent; border: none; color: var(--muted);
  cursor: pointer; border-bottom: 2px solid transparent; font-weight: 600; font-size: 14px;
}
.lang-tab:hover { color: var(--text); }
.lang-tab.active { color: var(--text); border-bottom-color: var(--accent); }

.code-head { display: flex; align-items: center; justify-content: space-between; }
.code-head h1 { font-size: 18px; margin: 4px 0; }

.editor-host {
  border: 1px solid var(--border); border-radius: 6px; overflow: hidden;
  min-height: 220px; flex: 1 1 auto;
}
.editor-host .CodeMirror { height: 100%; min-height: 220px; font-size: 14px; }

.code-toolbar { display: flex; align-items: center; gap: 8px; }
.btn-send { padding: 8px 22px; }
.exec-status { margin-left: 8px; }

.output-head {
  color: var(--muted); font-size: 12px; text-transform: uppercase;
  letter-spacing: .05em; border-top: 1px solid var(--border); padding-top: 8px;
}
.output {
  flex: 0 1 35%; min-height: 120px; overflow: auto; margin: 0;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px;
  padding: 12px; font-family: monospace; white-space: pre-wrap; word-break: break-word;
}
.output .stderr { color: var(--red); }
.output .ok { color: var(--green); }