:root {
  --bg: #f6f6f4;
  --panel: #ffffff;
  --panel-alt: #f0f0ec;
  --fg: #111111;
  --muted: #575753;
  --border: #1f1f1d;
  --border-soft: #d4d4ce;
  --hl: #e6e5dc;
  --hl-strong: #d5d3c5;
  --pill-bg: #ededeb;
  --drop-fg: #787872;
}
html.dark-mode {
  --bg: #0d0d0c;
  --panel: #121211;
  --panel-alt: #191917;
  --fg: #e8e8e3;
  --muted: #96968e;
  --border: #383834;
  --border-soft: #262623;
  --hl: #22221e;
  --hl-strong: #2e2e28;
  --pill-bg: #1e1e1b;
  --drop-fg: #707068;
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
}
.mono {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-variant-ligatures: none;
}
.tui-border { border-color: var(--border); }
.tui-border-soft { border-color: var(--border-soft); }
.tui-panel { background: var(--panel); color: var(--fg); }
.tui-panel-alt { background: var(--panel-alt); color: var(--fg); }
.tui-muted { color: var(--muted); }
.tui-select, .tui-btn, .tui-input {
  background: var(--panel);
  color: var(--fg);
  border: 1px solid var(--border);
  font-size: 12px;
  line-height: 1.2;
  height: 28px;
  padding: 0 8px;
  outline: none;
  border-radius: 0;
}
.tui-select:focus, .tui-input:focus {
  background: var(--hl);
}
.tui-btn {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: background-color 80ms linear, color 80ms linear;
}
.tui-btn:hover {
  background: var(--hl);
}
.tui-btn.active {
  background: var(--fg);
  color: var(--panel);
}
#scriptPane .cm-editor, #codeView .cm-editor { height: 100%; }
.seg-pill {
  display: inline-block;
  border: 1px solid var(--border-soft);
  background: var(--pill-bg);
  padding: 0 5px;
  margin: 1px 3px 1px 0;
  font-size: 11px;
  line-height: 17px;
}
.seg-var {
  border-color: var(--border);
  font-weight: 500;
}
.row-dropped {
  color: var(--drop-fg);
}
.dot-grid {
  background-image: radial-gradient(var(--border-soft) 1px, transparent 1px);
  background-size: 14px 14px;
}
table.tui-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
table.tui-table th {
  text-align: left;
  font-weight: 600;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  background: var(--panel-alt);
  position: sticky;
  top: 0;
  z-index: 2;
}
table.tui-table td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: top;
}
table.tui-table tr.trace-row {
  cursor: pointer;
}
table.tui-table tr.trace-row:hover {
  background: var(--hl);
}
table.tui-table tr.trace-row.selected {
  background: var(--hl-strong);
}