:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #0b0f14;
  color: #e6edf3;
  --bg: #0b0f14;
  --panel: #0d1117;
  --raised: #111820;
  --raised-2: #18212b;
  --border: #27303a;
  --border-strong: #34404d;
  --muted: #8b98a5;
  --faint: #64717e;
  --accent: #2ea043;
  --accent-bg: #238636;
  --danger: #f85149;
  --warning: #d29922;
  --info: #58a6ff;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; overflow: hidden; background: var(--bg); }
button, select, textarea { font: inherit; }
button, select { border: 1px solid var(--border-strong); background: var(--raised-2); color: #e6edf3; border-radius: 7px; }
button { cursor: pointer; }
button:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--info); outline-offset: -2px; }
button:disabled { opacity: .6; cursor: default; }
kbd { border: 1px solid var(--border-strong); background: #161e27; border-radius: 4px; padding: .05rem .28rem; font: 11px var(--mono); }

.app-header { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1.1rem; border-bottom: 1px solid var(--border); background: var(--raised); }
.brand { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.brand-mark { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; background: #1f6f35; font: 800 12px var(--mono); letter-spacing: -.04em; }
h1 { margin: 0; font-size: 1.2rem; line-height: 1.25; }
.brand p { margin: .2rem 0 0; color: var(--muted); font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.header-status { display: flex; align-items: center; gap: .45rem; color: var(--muted); font-size: .78rem; white-space: nowrap; }
.health-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warning); box-shadow: 0 0 0 3px rgba(210,153,34,.1); }
.header-status.online .health-dot { background: #3fb950; box-shadow: 0 0 0 3px rgba(63,185,80,.1); }
.header-status.offline .health-dot { background: var(--danger); box-shadow: 0 0 0 3px rgba(248,81,73,.1); }

.toolbar { min-height: 52px; padding: .55rem .75rem; display: flex; align-items: center; gap: .55rem; border-bottom: 1px solid var(--border); background: #0f151c; }
.toolbar-group { display: flex; align-items: center; gap: .35rem; }
.toolbar label { color: var(--faint); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.toolbar select { min-width: 150px; padding: .48rem .6rem; }
.toolbar-spacer, .tabs-spacer { flex: 1; }
.button { padding: .5rem .75rem; font-weight: 650; }
.button.secondary:hover, .icon-button:hover, .tab:hover { background: #202a35; }
.button.primary { background: var(--accent-bg); border-color: var(--accent); min-width: 82px; }
.button.primary:hover { background: #2b9142; }

.workspace { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
.editor-panel, .output-panel { min-height: 0; display: flex; flex-direction: column; background: var(--panel); }
.editor-panel { border-right: 1px solid var(--border); }
.panel-heading, .tabs { min-height: 43px; display: flex; align-items: center; padding: 0 .7rem; background: var(--raised); border-bottom: 1px solid var(--border); }
.panel-heading { justify-content: space-between; font-size: .76rem; letter-spacing: .025em; }
.panel-heading strong { font-family: var(--mono); font-weight: 700; }
.unsaved-indicator { color: var(--faint); margin-left: .65rem; font-size: .7rem; font-weight: 400; }
.editor-position { color: var(--muted); font: 11px var(--mono); }
.column-ruler { height: 23px; overflow: hidden; white-space: pre; padding: 4px 0 0 58px; color: #495563; background: #0b1016; border-bottom: 1px solid #192029; font: 11px/18px var(--mono); user-select: none; }
.editor-shell { flex: 1; min-height: 0; position: relative; display: grid; grid-template-columns: 50px minmax(0, 1fr); background: var(--panel); }
.line-numbers { margin: 0; padding: .9rem .65rem .9rem 0; overflow: hidden; text-align: right; user-select: none; color: #53606d; background: #0b1016; border-right: 1px solid #192029; font: 14px/1.55 var(--mono); white-space: pre; }
.code-layer { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
#source, #highlight { position: absolute; inset: 0; margin: 0; padding: .9rem 1rem; border: 0; tab-size: 8; white-space: pre; overflow: auto; font: 14px/1.55 var(--mono); letter-spacing: 0; }
#highlight { pointer-events: none; color: #d7dee6; background: var(--panel); }
#source { z-index: 2; resize: none; outline: 0; color: transparent; caret-color: #f0f6fc; background: transparent; -webkit-text-fill-color: transparent; }
#source::selection { background: rgba(56,139,253,.35); }
#source:focus { box-shadow: inset 0 0 0 1px rgba(88,166,255,.18); }
.tok-comment { color: #6a737d; }
.tok-string { color: #a5d6ff; }
.tok-opcode { color: #d2a8ff; font-weight: 650; }
.tok-register { color: #79c0ff; }
.editor-footer { min-height: 30px; display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: 0 .7rem; border-top: 1px solid var(--border); color: var(--faint); background: var(--raised); font-size: .68rem; }

.tabs { gap: .2rem; padding: .3rem .45rem; }
.tab, .icon-button { border-color: transparent; background: transparent; color: var(--muted); padding: .4rem .58rem; font-size: .76rem; }
.tab.active { background: #1f2933; border-color: var(--border-strong); color: #e6edf3; }
.count { display: inline-grid; place-items: center; min-width: 17px; height: 17px; margin-left: .3rem; border-radius: 999px; background: rgba(248,81,73,.16); color: #ff7b72; font-size: .65rem; }
.count:empty { display: none; }
.diagnostics { max-height: 34%; overflow: auto; padding: .5rem; background: #0c1117; border-bottom: 1px solid var(--border); }
.diagnostic { width: 100%; display: grid; grid-template-columns: 78px 1fr; gap: .45rem; text-align: left; padding: .5rem .6rem; margin-bottom: .35rem; border: 1px solid #3b2929; background: rgba(248,81,73,.055); border-radius: 6px; font: 12px/1.4 var(--mono); }
.diagnostic.warning { border-color: #4a3b21; background: rgba(210,153,34,.055); }
.diagnostic strong { color: #ff7b72; }
.diagnostic.warning strong { color: #e3b341; }
.diagnostic:disabled { opacity: 1; cursor: default; }
#output { margin: 0; flex: 1; overflow: auto; padding: .9rem 1rem; white-space: pre-wrap; word-break: break-word; font: 12.5px/1.55 var(--mono); background: var(--panel); color: #d7dee6; }
.run-status { min-height: 37px; padding: .45rem .7rem; border-top: 1px solid var(--border); display: flex; align-items: center; gap: .55rem; color: var(--muted); font-size: .73rem; background: var(--raised); }
.status-pill { display: inline-flex; align-items: center; min-height: 22px; padding: .15rem .48rem; border-radius: 999px; background: #202a35; color: #aab7c4; font-weight: 700; white-space: nowrap; }
.status-pill.success { background: rgba(46,160,67,.14); color: #56d364; }
.status-pill.failed { background: rgba(248,81,73,.14); color: #ff7b72; }
.status-pill.running { background: rgba(88,166,255,.14); color: #79c0ff; }

footer { min-height: 31px; padding: .45rem .8rem; display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--border); color: var(--faint); background: #0b1016; font-size: .67rem; }

@media (max-width: 900px) {
  body { overflow: auto; }
  .app-header { align-items: flex-start; }
  .brand p { white-space: normal; }
  .toolbar { flex-wrap: wrap; }
  .toolbar-spacer { display: none; }
  .workspace { grid-template-columns: 1fr; grid-template-rows: minmax(470px, 58vh) minmax(360px, 42vh); }
  .editor-panel { border-right: 0; border-bottom: 1px solid var(--border); }
  footer { flex-direction: column; gap: .2rem; }
}
@media (max-width: 620px) {
  .app-header { flex-direction: column; }
  .toolbar-group { width: calc(50% - .3rem); flex-direction: column; align-items: stretch; }
  .toolbar-group select { min-width: 0; width: 100%; }
  .toolbar .button { flex: 1; }
  .editor-footer span:first-child { display: none; }
  .column-ruler { padding-left: 52px; }
}

/* ---- Input data set panel (INFILE) ------------------------------------ */

.data-panel {
  border-top: 1px solid var(--border, #2a3038);
  padding: 0.5rem 0.75rem 0.75rem;
}

.data-panel > summary {
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.35rem 0;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.data-panel > summary::-webkit-details-marker { display: none; }

.data-panel > summary::before {
  content: "▸";
  display: inline-block;
  transition: transform 0.15s ease;
  opacity: 0.7;
}

.data-panel[open] > summary::before { transform: rotate(90deg); }

.data-panel .data-hint {
  font-weight: 400;
  font-size: 0.78rem;
  opacity: 0.65;
}

.data-panel textarea {
  width: 100%;
  min-height: 6.5rem;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
  line-height: 1.45;
  padding: 0.5rem 0.6rem;
  border-radius: 6px;
  border: 1px solid var(--border, #2a3038);
  background: var(--surface-2, #0f1318);
  color: inherit;
}

.data-panel .data-note {
  margin: 0.45rem 0 0;
  font-size: 0.75rem;
  opacity: 0.7;
  line-height: 1.5;
}

.data-panel code {
  font-size: 0.75rem;
  padding: 0.05rem 0.25rem;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.07);
}

.icon-button.active {
  background: rgba(255, 255, 255, 0.12);
  color: inherit;
}