/* ── Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Tokens ── */
:root {
  --blue:    #5b7faa;
  --blue-dk: #3a5a80;
  --blue-lt: #dce6f0;
  --red:     #c2635e;
  --red-dk:  #9b4a46;
  --red-lt:  #f2dcd9;

  --fg:      #232329;
  --fg-dim:  #71717a;
  --bg:      #f6f5f2;
  --bg-card: #ffffff;
  --border:  #ddd9d0;
  --border-lt: #eeebe5;

  --ok:      #3d8c5c;
  --ok-bg:   #e4f3ea;
  --warn:    #b68a2e;
  --warn-bg: #fdf3dc;
  --err:     var(--red-dk);
  --err-bg:  var(--red-lt);

  --topbar-bg: #1e2736;

  --font-display: 'Outfit', system-ui, sans-serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, Menlo, monospace;

  --radius:  8px;
  --radius-sm: 5px;
  --shadow:  0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font: 400 14px/1.6 var(--font-body); color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { color: var(--blue-dk); }
a:hover { color: var(--red); }

/* ── Top bar ── */
.topbar {
  background: var(--topbar-bg);
  display: flex;
  align-items: center;
  padding: 0 24px;
  height: 50px;
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar-brand {
  font: 600 17px var(--font-display);
  color: #fff;
  text-decoration: none;
  margin-right: 32px;
  letter-spacing: -.01em;
}
.topbar-brand:hover { color: #fff; }
.topbar-nav {
  display: flex;
  gap: 4px;
}
.topbar-nav a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  color: rgba(255,255,255,.65);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: background .15s, color .15s;
}
.topbar-nav a:hover {
  background: rgba(255,255,255,.08);
  color: #fff;
}
.topbar-nav a.active {
  background: var(--blue);
  color: #fff;
}
.topbar-nav .nav-icon {
  width: 16px;
  height: 16px;
  opacity: .7;
  flex-shrink: 0;
}
.topbar-nav a.active .nav-icon { opacity: 1; }

/* ── Main area ── */
.main-area { padding: 28px 36px 48px; min-width: 0; }

/* ── Breadcrumbs ── */
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--fg-dim);
  margin-bottom: 6px;
}
.breadcrumbs a { color: var(--fg-dim); text-decoration: none; }
.breadcrumbs a:hover { color: var(--blue-dk); text-decoration: underline; }
.breadcrumbs .sep { opacity: .4; font-size: 10px; }

/* ── Page header ── */
h1 {
  font: 600 26px/1.2 var(--font-display);
  color: var(--fg);
  margin: 0 0 20px;
  letter-spacing: -.02em;
}
h1 .label-badge {
  font: 500 11px var(--font-body);
  background: var(--blue-lt);
  color: var(--blue-dk);
  padding: 3px 10px;
  border-radius: 99px;
  vertical-align: middle;
  margin-left: 10px;
}
h2 {
  font: 600 19px/1.3 var(--font-display);
  color: var(--fg);
  margin: 28px 0 12px;
  letter-spacing: -.01em;
}
h3 {
  font: 600 15px/1.4 var(--font-body);
  margin: 20px 0 8px;
}
h4 {
  font: 600 13px/1.4 var(--font-body);
  margin: 16px 0 6px;
}

/* ── Buttons ── */
button, .btn {
  font: 500 13px var(--font-body);
  padding: 8px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--fg);
  cursor: pointer;
  transition: all .15s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
button:hover, .btn:hover { border-color: var(--blue); color: var(--blue-dk); }
.btn-primary {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}
.btn-primary:hover { background: var(--blue-dk); border-color: var(--blue-dk); color: #fff; }
.btn-dl {
  padding: 4px 8px;
  border-color: transparent;
  background: transparent;
  color: var(--blue);
}
.btn-dl:hover { background: var(--blue-lt); border-color: var(--blue-lt); color: var(--blue-dk); }
.btn-danger {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}
.btn-danger:hover { background: var(--red-dk); border-color: var(--red-dk); color: #fff; }

/* ── Top bar (for actions like New Run) ── */
.page-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

/* ── Tables ── */
table.data {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: 13px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
table.data th {
  background: #f0ede6;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--fg-dim);
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
table.data td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border-lt);
  vertical-align: top;
}
table.data tbody tr:last-child td { border-bottom: none; }
table.data tbody tr:hover { background: rgba(91,127,170,.04); }
table.data th.r, table.data td.r { text-align: right; }
tr.clickable-row { cursor: pointer; }
tr.clickable-row:hover { background: rgba(91,127,170,.10); }
.trunc { max-width: 480px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Status badges ── */
.status { font-weight: 600; font-size: 12px; }
.status-pending  { color: var(--fg-dim); }
.status-running  { color: var(--warn); }
.status-done     { color: var(--ok); }
.status-failed   { color: var(--err); }
.status-cancelled { color: var(--fg-dim); }

/* Status pills (inline badge form) */
.status-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
}
.status-pill.status-pending   { background: #ededec; color: var(--fg-dim); }
.status-pill.status-running   { background: var(--warn-bg); color: var(--warn); }
.status-pill.status-done      { background: var(--ok-bg); color: var(--ok); }
.status-pill.status-failed    { background: var(--err-bg); color: var(--err); }
.status-pill.status-cancelled { background: #ededec; color: var(--fg-dim); }

/* ── Retrospective callout ── */
.retro {
  margin: 12px 0 18px;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-card);
  border-left-width: 4px;
}
.retro-model_error { border-left-color: var(--blue-dk); background: var(--blue-lt); }
.retro-task_error  { border-left-color: var(--warn);   background: var(--warn-bg); }
.retro-infra_error { border-left-color: var(--err);    background: var(--err-bg); }
.retro-unknown     { border-left-color: var(--fg-dim); background: #ededec; }
.retro-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.retro-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  color: #fff;
}
.retro-badge-model_error { background: var(--blue-dk); }
.retro-badge-task_error  { background: var(--warn); }
.retro-badge-infra_error { background: var(--err); }
.retro-badge-unknown     { background: var(--fg-dim); }
.retro-title { font-weight: 600; font-size: 13px; color: var(--fg); }
.retro-ts    { font-size: 11px; color: var(--fg-dim); margin-left: auto; }
.retro-body  { font-size: 14px; line-height: 1.5; color: var(--fg); }
.retro-body p:first-child { margin-top: 0; }
.retro-body p:last-child  { margin-bottom: 0; }
.retro-body code { font-family: var(--font-mono); font-size: 12px; background: rgba(0,0,0,.05); padding: 1px 5px; border-radius: 3px; }

/* ── Cards ── */
.card-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-card);
  text-decoration: none;
  color: var(--fg);
  transition: box-shadow .2s, transform .2s;
}
.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  color: var(--fg);
}
.card-l1 { border-left: 3px solid #a0a8b0; }
.card-l2 { border-left: 3px solid var(--warn); }
.card-l3 { border-left: 3px solid var(--red); }
.card-body { padding: 12px 14px; }
.card-title { font-weight: 600; font-size: 13px; margin-bottom: 8px; }
.card-tags { display: flex; flex-wrap: wrap; gap: 5px; }

/* ── Pills / tags ── */
.pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 99px;
  background: #efece5;
  color: var(--fg-dim);
  white-space: nowrap;
}
.pill-scale          { background: var(--blue-lt); color: var(--blue-dk); }
.pill-operations     { background: var(--ok-bg);   color: var(--ok); }
.pill-formats        { background: var(--warn-bg);  color: var(--warn); }
.pill-region         { background: #f0e4f3;        color: #7b2d8b; }
.pill-geometry_type  { background: #e3eaf2;        color: #3a5a7c; }

/* ── Instruction bubble ── */
.instruction { background: var(--bg-card); border: 1px solid var(--border); padding: 14px; border-radius: var(--radius); white-space: pre-wrap; }

/* ── Prompt row (avatar + speech bubble) ── */
.prompt-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 16px 0 24px;
  max-width: 960px;
}
.prompt-avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.prompt-avatar svg { width: 22px; height: 22px; }
.prompt-bubble {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px 12px 12px 12px;
  padding: 14px 18px;
  font-size: 14px;
  line-height: 1.65;
  box-shadow: var(--shadow);
  flex: 1;
  min-width: 0;
}
.prompt-bubble::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 12px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 8px solid var(--border);
}
.prompt-bubble::after {
  content: '';
  position: absolute;
  left: -6px;
  top: 13px;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 7px solid var(--bg-card);
}
.prompt-bubble.md { white-space: normal; }
.prompt-bubble.md p { margin: 0 0 8px; }
.prompt-bubble.md p:last-child { margin-bottom: 0; }
.prompt-bubble.md pre { background: #fafaf2; padding: 10px; overflow-x: auto; font: 13px/1.5 var(--font-mono); border-radius: var(--radius-sm); }
.prompt-bubble.md code { background: #fafaf2; padding: 1px 5px; font: 13px var(--font-mono); border-radius: 3px; }
.prompt-bubble.md pre code { padding: 0; background: transparent; }
.prompt-bubble.md ul, .prompt-bubble.md ol { margin: 4px 0 8px 20px; }
.prompt-bubble.md h1, .prompt-bubble.md h2, .prompt-bubble.md h3, .prompt-bubble.md h4 { margin: 8px 0 4px; }
.prompt-bubble.md table { border-collapse: collapse; }
.prompt-bubble.md table th, .prompt-bubble.md table td { border: 1px solid var(--border); padding: 2px 6px; }

/* ── I/O grid (inputs + outputs side by side) ── */
.io-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 8px;
}
.io-grid h3 { margin-top: 0; }
/* ── Layer row toggle ── */
.layer-row { cursor: pointer; user-select: none; }
.layer-row:hover { background: rgba(91,127,170,.06); }
.layer-row.layer-hidden { opacity: .45; }
.row-actions { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.btn-eye {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  color: var(--blue);
  transition: color .15s;
}
.btn-eye:hover { color: var(--blue-dk); }
.btn-eye .eye-closed { display: none; }
.layer-hidden .btn-eye .eye-open { display: none; }
.layer-hidden .btn-eye .eye-closed { display: inline; color: var(--fg-dim); }
@media (max-width: 900px) { .io-grid { grid-template-columns: 1fr; } }

/* ── Task prev/next navigation ── */
.task-nav-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.task-nav-header h1 { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.task-nav-buttons { display: flex; gap: .35rem; flex-shrink: 0; }
.btn-nav {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .82rem; padding: .3rem .7rem;
  text-decoration: none;
}
.btn-nav.disabled { opacity: .35; pointer-events: none; }

/* ── Task hero image (legacy, kept for other uses) ── */
.task-hero {
  width: 100%;
  max-width: 900px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin: 12px 0;
}

/* ── Maps ── */
.map { height: 480px; border: 1px solid var(--border); border-radius: var(--radius); margin: 12px 0; overflow: hidden; }
.compare-container { position: relative; }
.compare-map { position: absolute; top: 0; bottom: 0; width: 100%; }
#layer-toggle:not(:empty) { margin: 8px 0; padding: 8px 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); }

/* ── Split layout (run-task detail) ── */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 14px; }

/* ── Side pane ── */
.side-pane {
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  position: sticky;
  top: 16px;
  align-self: start;
  max-height: 100vh;
}
.tabs {
  background: #f0ede6;
  padding: 6px 10px;
  position: sticky;
  top: 0;
  z-index: 2;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 2px;
}
.tab-btn {
  background: transparent;
  border: none;
  padding: 6px 12px;
  font: 500 13px var(--font-body);
  color: var(--fg-dim);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  cursor: pointer;
  transition: color .15s, background .15s;
}
.tab-btn:hover { color: var(--fg); background: rgba(255,255,255,.5); }
.tab-btn.active { color: var(--blue-dk); border-bottom: 2px solid var(--blue); background: var(--bg-card); }
.tab { padding: 14px; }

/* ── Output file list ── */
.output-list { list-style: none; margin: 0; padding: 0; }
.output-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
}
.output-name-static { color: var(--fg-dim); }
.output-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  color: var(--fg-dim);
  text-decoration: none;
}
.output-download:hover { color: var(--blue-dk); background: var(--bg-card); }

/* ── Transcript events ── */
.event { padding: 10px 0; border-bottom: 1px solid var(--border-lt); position: relative; }
.event:last-child { border-bottom: none; }
.evt-ts { font-family: var(--font-mono); font-size: 10px; color: var(--fg-dim); position: absolute; top: 10px; right: 0; }
.evt-system { color: var(--fg-dim); font-style: italic; }
.json-viewer { margin: 0; }
.json-viewer summary { cursor: pointer; }
.json-viewer pre { margin: 6px 0 0 0; max-height: 400px; overflow: auto; font-size: 11px; background: var(--bg-card); padding: 8px; border-radius: 4px; border: 1px solid var(--border-lt); }

/* ── Collapsible preview with fade ── */
.preview-fade {
  position: relative;
  max-height: calc(1.6em * 3 + 16px); /* 3 lines + padding */
  overflow: hidden;
  cursor: pointer;
}
.preview-fade::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2em;
  background: linear-gradient(transparent, #fafaf2);
  pointer-events: none;
}
.preview-fade.expanded {
  max-height: none;
}
.preview-fade.expanded::after {
  display: none;
}
.preview-text { margin: 0; }

/* ── Chat bubbles ── */
.bubble { padding: 10px 14px; border-radius: var(--radius); margin-top: 6px; white-space: pre-wrap; font-size: 13px; line-height: 1.6; }
.bubble-user { background: var(--blue-lt); }
.bubble-assistant { background: #f2f0e8; }
.bubble.md { white-space: normal; }
.bubble.md p { margin: 0 0 8px; }
.bubble.md p:last-child { margin-bottom: 0; }
.bubble.md pre { background: #fafaf2; padding: 10px; overflow-x: auto; font: 13px/1.5 var(--font-mono); border-radius: var(--radius-sm); }
.bubble.md code { background: #fafaf2; padding: 1px 5px; font: 13px var(--font-mono); border-radius: 3px; }
.bubble.md pre code { padding: 0; background: transparent; }
.bubble.md ul, .bubble.md ol { margin: 4px 0 8px 20px; }
.bubble.md h1, .bubble.md h2, .bubble.md h3, .bubble.md h4 { margin: 8px 0 4px; }
.bubble.md table { border-collapse: collapse; }
.bubble.md table th, .bubble.md table td { border: 1px solid var(--border); padding: 2px 6px; }

/* ── Merged tool calls ── */
.tool-line {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 13px;
}
.tool-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.tool-dot-ok { background: var(--ok); }
.tool-dot-err { background: var(--err); }
.tool-dot-pending { background: #ccc; }
.tool-name {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 12px;
}
.tool-summary {
  color: var(--fg-dim);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tool-detail {
  margin: 4px 0 2px 14px;
  font-size: 12px;
}
.tool-detail summary {
  cursor: pointer;
  color: var(--fg-dim);
  font-size: 11px;
  user-select: none;
}
.tool-detail summary:hover { color: var(--fg); }
.tool-detail pre.mono {
  margin-top: 4px;
  max-height: 300px;
  overflow-y: auto;
}
.tool-write pre.mono { padding: 0; }
.tool-write pre.mono code.hljs {
  background: transparent;
  padding: 8px;
  display: block;
}
.tool-preview, .tool-preview-inline {
  margin: 4px 0 2px 14px;
  font-size: 12px;
}
.tool-preview-inline {
  margin-top: 4px;
  max-height: 300px;
  overflow-y: auto;
}
.tool-empty-result {
  font-size: 11px;
  color: var(--fg-dim);
  margin-left: 14px;
}

/* ── Mono blocks ── */
.mono {
  font: 12px/1.6 var(--font-mono);
  background: #fafaf2;
  padding: 8px;
  overflow-x: auto;
  white-space: pre-wrap;
  border-radius: var(--radius-sm);
}
.tool-err { border-left: 3px solid var(--err); }

/* ── Bash command + output get a darker backdrop to set terminal work apart ── */
pre.mono.tool-bash { background: #e8e4d8; }
.preview-fade.tool-bash::after { background: linear-gradient(transparent, #e8e4d8); }
.scroll-x { overflow-x: auto; }
small { color: var(--fg-dim); }

/* ── Matrix table ── */
table.matrix td, table.matrix th { text-align: center; white-space: nowrap; }
table.matrix td:first-child, table.matrix th:first-child { text-align: left; position: sticky; left: 0; background: var(--bg); z-index: 1; }
table.matrix th { background: #f0ede6; }
table.matrix td, table.matrix th { padding: 5px 8px; }
/* Rotated column headers (90°) so score columns stay narrow. */
table.matrix th.col-run {
  padding: 8px 3px;
  vertical-align: bottom;
  text-transform: none;
  letter-spacing: 0;
}
table.matrix th.col-run .vlabel {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  line-height: 1.35;
  margin: 0 auto;
}
/* Score cells: background interpolated red(0)→green(1) via inline hsl(). */
.cell-score, .score-cell { color: #1a1a1a; font-weight: 600; font-variant-numeric: tabular-nums; }
.cell-score a { color: #1a1a1a; }
.cell-err { background: var(--err-bg); color: var(--err); font-weight: 600; }
.cell-skip { color: var(--fg-dim); }

/* ── Outdated (task version drifted past the recorded run version) ── */
/* Rows: dim the cells via colour so the version-bump badge stays readable. */
tr.row-outdated > td,
tr.row-outdated > td a,
tr.row-outdated > td em,
tr.row-outdated > td span:not(.outdated-badge) { color: var(--fg-dim); }
tr.row-outdated > td { background: rgba(0,0,0,.015); }
tr.row-outdated:hover > td { background: rgba(91,127,170,.06); }
.outdated-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 99px;
  background: var(--warn-bg);
  color: var(--warn);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .02em;
  vertical-align: middle;
  white-space: nowrap;
}
/* Matrix cells: opacity works here because cells have no badge children.    */
td.cell-outdated { opacity: 0.4; }
td.cell-outdated:hover { opacity: 0.75; }
.task-version-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--fg-dim);
  margin-left: 8px;
  vertical-align: middle;
}

/* ── Forms ── */
form p { margin: 10px 0; }
label { font-weight: 500; font-size: 13px; }
input[type=text], input[type=url], input[type=number], select {
  font: 400 14px var(--font-body);
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  transition: border-color .15s;
}
input:focus, select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(91,127,170,.15); }

/* ── View toggle (runs page) ── */
.view-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-left: auto;
}
.view-toggle .tab-btn {
  padding: 6px 14px;
  border: none;
  border-radius: 0;
  font-size: 12px;
  font-weight: 600;
  background: var(--bg-card);
  color: var(--fg-dim);
}
.view-toggle .tab-btn + .tab-btn { border-left: 1px solid var(--border); }
.view-toggle .tab-btn.active { background: var(--blue); color: #fff; }
.view-toggle .tab-btn:hover:not(.active) { background: var(--blue-lt); color: var(--blue-dk); }

/* ── Meta row (run detail) ── */
.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 18px;
  font-size: 13px;
  color: var(--fg-dim);
}
.meta-row strong { color: var(--fg); font-weight: 600; }

/* ── Animations ── */
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.main-area > * { animation: fadeIn .25s ease-out both; }
.main-area > :nth-child(1) { animation-delay: 0s; }
.main-area > :nth-child(2) { animation-delay: .04s; }
.main-area > :nth-child(3) { animation-delay: .08s; }
.main-area > :nth-child(4) { animation-delay: .12s; }
.main-area > :nth-child(5) { animation-delay: .16s; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .main-area { padding: 20px 16px 40px; }
  .split { grid-template-columns: 1fr; }
  .topbar { padding: 0 12px; }
}