:root {
  --bg: #050506;
  --sidebar: #080809;
  --surface: #0d0d0f;
  --surface-2: #141416;
  --surface-3: #1b1b1e;
  --border: #29292d;
  --border-strong: #3a3a40;
  --text: #f4f4f5;
  --text-secondary: #b3b3ba;
  --text-muted: #77777f;
  --accent: #7c3aed;
  --accent-hover: #8b5cf6;
  --success: #22c55e;
  --success-bg: #082b18;
  --danger: #f87171;
  --danger-bg: #321012;
  --warning: #fbbf24;
  --warning-bg: #302309;
  --info: #60a5fa;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --sidebar-width: 240px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { color-scheme: dark; font-size: 16px; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 14px/1.5 var(--font); -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--accent-hover); outline-offset: 2px; }
.skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; transform: translateY(-160%); padding: 8px 12px; background: var(--text); color: var(--bg); text-decoration: none; }
.skip-link:focus { transform: none; }

/* Shell */
.app-shell { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); }
.sidebar {
  position: sticky; top: 0; z-index: 20; height: 100vh; display: flex; flex-direction: column;
  padding: 16px 8px; border-right: 1px solid var(--border); background: var(--sidebar);
}
.brand { display: flex; align-items: center; gap: 10px; min-height: 42px; margin: 0 6px 22px; color: var(--text); text-decoration: none; }
.brand-mark { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--border-strong); border-radius: 6px; color: #c4b5fd; font: 700 10px var(--font); }
.brand > b { font-size: 15px; letter-spacing: -.01em; }
.side-nav { display: flex; flex-direction: column; gap: 3px; }
.nav-section { margin: 18px 11px 7px; color: var(--text-muted); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.nav-link { min-height: 40px; display: flex; align-items: center; gap: 11px; padding: 8px 11px; border-radius: 5px; color: var(--text-secondary); text-decoration: none; }
.nav-link svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.nav-link:hover { background: var(--surface-2); color: var(--text); }
.nav-link[aria-current="page"] { background: var(--surface-3); color: var(--text); }
.sidebar-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border); }
.account-link { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 5px; color: var(--text-secondary); text-decoration: none; }
.account-link:hover { background: var(--surface-2); }
.account-link b { display: block; color: var(--text); font-size: 13px; font-weight: 500; }
.account-link small { display: block; color: var(--text-muted); font-size: 11px; }
.account-avatar { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--border-strong); border-radius: 50%; font-size: 11px; }
.mobile-header { display: none; }
.workspace { min-width: 0; }
main { width: 100%; max-width: 1520px; margin: 0 auto; padding: 22px 24px 72px; }

/* Type and page structure */
.page-header { min-height: 58px; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.page-header h1, h1 { margin: 0; color: var(--text); font-size: 23px; font-weight: 650; line-height: 1.2; letter-spacing: -.025em; }
.page-header p, .sub { max-width: 760px; margin: 4px 0 0; color: var(--text-secondary); font-size: 13px; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
h2 { margin: 28px 0 12px; color: var(--text); font-size: 16px; font-weight: 650; letter-spacing: -.01em; }
h3 { margin: 0; font-size: 14px; }
p { color: var(--text-secondary); }
code { font-family: var(--mono); font-size: .9em; }
.section-bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 24px 0 10px; }
.section-bar h2 { margin: 0; }
.section-bar p { margin: 0; color: var(--text-muted); font-size: 12px; }

/* Controls */
button, .btn {
  min-height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 13px; border: 1px solid var(--accent); border-radius: 5px; background: var(--accent);
  color: #fff; cursor: pointer; font-size: 13px; font-weight: 600; text-decoration: none;
  transition: background-color 120ms ease, border-color 120ms ease;
}
button:hover, .btn:hover { border-color: var(--accent-hover); background: var(--accent-hover); }
button.secondary, .btn.secondary { border-color: var(--border-strong); background: var(--surface-2); color: var(--text); }
button.secondary:hover, .btn.secondary:hover { border-color: #55555d; background: var(--surface-3); }
button.destructive { border-color: #7f3439; color: var(--danger); }
button.destructive:hover { border-color: var(--danger); background: var(--danger-bg); }
button.ghost, .btn.ghost { border-color: transparent; background: transparent; color: var(--text-secondary); }
button:disabled { cursor: not-allowed; opacity: .45; }
.btn.small { min-height: 30px; padding: 5px 10px; font-size: 12px; }
label { display: block; margin: 14px 0 6px; color: var(--text-secondary); font-size: 12px; font-weight: 600; }
input[type="text"], input[type="password"], input[type="email"], select, textarea {
  width: 100%; min-height: 40px; padding: 9px 11px; border: 1px solid var(--border-strong); border-radius: 5px;
  background: var(--surface); color: var(--text); outline: 0;
}
input::placeholder, textarea::placeholder { color: var(--text-muted); }
input:focus, select:focus, textarea:focus { border-color: var(--accent-hover); box-shadow: 0 0 0 2px rgba(124, 58, 237, .2); }
input[type="file"] { max-width: 100%; color: var(--text-secondary); }
input[type="checkbox"] { accent-color: var(--accent); }
form.panel, .panel { max-width: 700px; padding: 18px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); }
form > button { margin-top: 16px; }
.error-box { display: none; margin-top: 12px; padding: 10px 12px; border: 1px solid var(--danger); border-radius: 5px; background: var(--danger-bg); color: var(--danger); font-size: 12px; }

/* Status */
.chip { display: inline-flex; align-items: center; min-height: 23px; padding: 2px 8px; border: 0; border-radius: 4px; background: var(--surface-3); color: var(--text-secondary); font-size: 11px; font-weight: 600; white-space: nowrap; }
.chip.pass { background: var(--success-bg); color: var(--success); }
.chip.fail { background: var(--danger-bg); color: var(--danger); }
.chip.warn { background: var(--warning-bg); color: var(--warning); }
.chip.live, .chip.frontier { background: rgba(124, 58, 237, .18); color: #c4b5fd; }
.chip.muted, .chip.tie { background: var(--surface-3); color: var(--text-muted); }
.live-dot::before { content: ""; width: 7px; height: 7px; display: inline-block; margin-right: 8px; border-radius: 50%; background: var(--accent-hover); }

/* Tables and lists */
table.instrument, table.kv { width: 100%; border: 1px solid var(--border); border-radius: 6px; border-collapse: separate; border-spacing: 0; background: var(--surface); }
table.instrument { display: table; overflow: hidden; }
table.instrument th { height: 42px; padding: 10px 12px; border-bottom: 1px solid var(--border); color: var(--text-muted); font-size: 11px; font-weight: 600; text-align: left; }
table.instrument td { padding: 12px; border-bottom: 1px solid var(--border); color: var(--text-secondary); vertical-align: middle; }
table.instrument tbody tr:last-child td { border-bottom: 0; }
table.instrument tbody tr:hover td { background: var(--surface-2); }
td.num, th.num { text-align: right !important; font-variant-numeric: tabular-nums; }
.fingerprint { color: var(--text-muted); font: 11px var(--mono); }
table.kv { max-width: 720px; }
table.kv td { padding: 10px 12px; border-bottom: 1px solid var(--border); color: var(--text-secondary); }
table.kv tr:last-child td { border-bottom: 0; }
table.kv td:last-child { color: var(--text); font-family: var(--mono); text-align: right; }

/* Evaluations */
.stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 16px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); }
.stat-card { min-height: 112px; padding: 16px; border-right: 1px solid var(--border); }
.stat-card:last-child { border-right: 0; }
.stat-card span { color: var(--text-muted); font-size: 11px; font-weight: 600; text-transform: uppercase; }
.stat-card strong { display: block; margin-top: 12px; font-size: 26px; line-height: 1; }
.stat-card p { margin: 7px 0 0; font-size: 12px; }
.setup-alert { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 16px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); }
.setup-alert strong { display: block; font-size: 13px; }
.setup-alert p { margin: 2px 0 0; color: var(--text-secondary); font-size: 12px; }
.credential-card { margin-bottom: 16px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); }
.credential-card > summary { display: flex; align-items: center; justify-content: space-between; padding: 13px 15px; cursor: pointer; list-style: none; font-weight: 600; }
.credential-card > summary::-webkit-details-marker { display: none; }
.credential-body { padding: 0 15px 16px; border-top: 1px solid var(--border); }
.credential-body form { max-width: 620px; }
.environment-variable-list { max-width: 620px; margin: 12px 0 18px; border-top: 1px solid var(--border); }
.environment-variable-list > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.environment-variable-list form { margin: 0; }
.evaluation-toolbar { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.evaluation-toolbar input { flex: 1; }
.evaluation-list { border: 1px solid var(--border); border-radius: 6px; background: var(--surface); overflow: hidden; }
.evaluation-row { min-height: 52px; display: grid; grid-template-columns: 72px minmax(180px, 1.5fr) minmax(130px, 1fr) 160px 190px; align-items: center; border-bottom: 1px solid var(--border); }
.evaluation-row:last-child { border-bottom: 0; }
.evaluation-row > * { min-width: 0; padding: 10px 13px; }
.evaluation-header { min-height: 42px; color: var(--text-muted); font-size: 11px; font-weight: 600; }
.evaluation-row:not(.evaluation-header):hover { background: var(--surface-2); }
.evaluation-id a, .evaluation-name a { color: var(--text); font-weight: 600; text-decoration: none; }
.evaluation-name small { display: none; color: var(--text-muted); font-size: 11px; }
.evaluation-track, .evaluation-started { color: var(--text-muted); font-size: 12px; }
.evaluation-started { text-align: right; }

/* New evaluation: maintainer contract first, user agent second. */
.evaluation-wizard { max-width: 1080px; margin: 0 auto; }
.wizard-progress { display: grid; grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr); align-items: center; max-width: 700px; margin: 8px auto 26px; }
.wizard-step { min-height: 50px; justify-content: flex-start; padding: 0; border: 0; background: transparent; color: var(--text-muted); text-align: left; }
.wizard-step:hover { border: 0; background: transparent; color: var(--text-secondary); }
.wizard-step:disabled { cursor: default; opacity: 1; }
.wizard-step > span:last-child { display: grid; }
.wizard-step b { color: inherit; font-size: 13px; }
.wizard-step small { margin-top: 1px; color: var(--text-muted); font-size: 11px; font-weight: 400; }
.wizard-step.active, .wizard-step.complete { color: var(--text); }
.step-number { width: 28px; height: 28px; display: grid; flex: none; place-items: center; margin-right: 10px; border: 1px solid var(--border-strong); border-radius: 50%; background: var(--surface); color: inherit; font-size: 11px; }
.wizard-step.active .step-number { border-color: var(--accent); background: var(--accent); color: #fff; }
.wizard-step.complete .step-number { border-color: var(--accent); color: #c4b5fd; }
.step-connector { height: 1px; margin: 0 14px; background: var(--border); }
.wizard-panel { padding: 22px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); }
.wizard-heading { max-width: 720px; margin-bottom: 20px; }
.wizard-heading > span { color: var(--text-muted); font-size: 10px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.wizard-heading h2 { margin: 5px 0 3px; font-size: 18px; }
.wizard-heading p { margin: 0; font-size: 12px; }
.track-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 0; padding: 0; border: 0; }
.track-choices legend { margin-bottom: 7px; color: var(--text-secondary); font-size: 12px; font-weight: 600; }
.track-choice { position: relative; margin: 0; cursor: pointer; }
.track-choice > input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.track-choice-body { min-height: 102px; display: block; padding: 14px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); }
.track-choice:hover .track-choice-body { border-color: var(--border-strong); }
.track-choice > input:focus-visible + .track-choice-body { outline: 2px solid var(--accent-hover); outline-offset: 2px; }
.track-choice > input:checked + .track-choice-body { border-color: var(--accent); background: rgba(124, 58, 237, .07); }
.track-choice-title { display: flex; align-items: center; justify-content: space-between; color: var(--text); }
.track-choice-title b { font-size: 13px; }
.track-choice-title i { width: 14px; height: 14px; border: 1px solid var(--border-strong); border-radius: 50%; }
.track-choice > input:checked + .track-choice-body .track-choice-title i { border: 4px solid var(--accent); background: #fff; }
.track-choice-meta { display: grid; grid-template-columns: .8fr .8fr 1.5fr .7fr; gap: 10px; margin-top: 16px; color: var(--text-secondary); font-size: 11px; }
.track-choice-meta span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track-choice-meta small { display: block; margin-bottom: 2px; color: var(--text-muted); font-size: 9px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.gpu-allocation { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); }
.gpu-allocation > div { min-width: 0; }
.gpu-allocation-label { display: block; color: var(--text-muted); font-size: 9px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.gpu-allocation strong { display: block; margin-top: 2px; color: var(--text); font-size: 13px; }
.gpu-allocation small { display: block; margin-top: 2px; color: var(--text-muted); font-size: 10px; }
.gpu-switch { position: relative; display: flex; flex: none; align-items: center; gap: 8px; margin: 0; color: var(--text-secondary); cursor: pointer; }
.gpu-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.gpu-switch span { position: relative; width: 34px; height: 18px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface-2); transition: background .15s ease, border-color .15s ease; }
.gpu-switch span::after { position: absolute; top: 3px; left: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--text-muted); content: ""; transition: transform .15s ease, background .15s ease; }
.gpu-switch input:checked + span { border-color: var(--accent); background: var(--accent); }
.gpu-switch input:checked + span::after { transform: translateX(16px); background: #fff; }
.gpu-switch input:focus-visible + span { outline: 2px solid var(--accent-hover); outline-offset: 2px; }
.gpu-switch b { min-width: 68px; font-size: 11px; font-weight: 600; }
.gpu-allocation[data-state="unavailable"] { opacity: .68; }
.gpu-allocation[data-state="unavailable"] .gpu-switch { cursor: default; }
.parallel-evaluations { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 8px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); cursor: default; }
.parallel-evaluations > span:first-child { min-width: 0; }
.parallel-evaluations strong { display: block; margin-top: 2px; color: var(--text); font-size: 13px; }
.parallel-evaluations small { display: block; margin-top: 2px; color: var(--text-muted); font-size: 10px; }
.parallel-count { display: flex; flex: none; align-items: center; gap: 8px; }
.parallel-count input { width: 66px; height: 34px; margin: 0; padding: 0 8px; text-align: right; }
.parallel-count b { color: var(--text-secondary); font-size: 11px; font-weight: 600; }
.parallel-evaluations[data-state="unavailable"] { opacity: .68; }
.benchmark-choice { max-width: 600px; margin-top: 18px; }
.benchmark-choice p { margin: 6px 0 0; color: var(--text-muted); font-size: 11px; }
.placement-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.execution-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 0; padding: 0; border: 0; }
.execution-choices legend { grid-column: 1 / -1; margin-bottom: -2px; color: var(--text-secondary); font-size: 12px; font-weight: 600; }
.execution-choice { position: relative; margin: 0; cursor: pointer; }
.execution-choice > input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.execution-choice-body { display: block; min-height: 78px; padding: 12px 13px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); }
.execution-choice:hover .execution-choice-body { border-color: var(--border-strong); }
.execution-choice > input:focus-visible + .execution-choice-body { outline: 2px solid var(--accent-hover); outline-offset: 2px; }
.execution-choice > input:checked + .execution-choice-body { border-color: var(--accent); background: var(--surface); box-shadow: inset 3px 0 0 var(--accent); }
.execution-choice-heading { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; }
.execution-choice-heading b { color: var(--text); font-size: 13px; }
.execution-choice-heading span { width: max-content; padding: 2px 6px; border: 1px solid var(--border); border-radius: 10px; color: var(--text-muted); font-size: 9px; font-weight: 600; text-transform: uppercase; }
.execution-choice-heading i { width: 14px; height: 14px; border: 1px solid var(--border-strong); border-radius: 50%; }
.execution-choice > input:checked + .execution-choice-body .execution-choice-heading i { border: 4px solid var(--accent); background: var(--surface); }
.execution-choice-body small { display: block; margin-top: 9px; color: var(--text-muted); font-size: 10px; line-height: 1.4; }
.placement-status { min-height: 17px; margin: 8px 0 0; color: var(--text-muted); font-size: 11px; }
.placement-status[data-state="error"] { color: var(--danger); }
.placement-status[data-state="ready"] { color: var(--text-secondary); }
.wizard-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
.wizard-actions.end { justify-content: flex-end; }
.selected-contract { display: grid; grid-template-columns: .9fr 1.25fr .65fr .65fr .55fr .75fr .75fr .55fr auto; align-items: center; gap: 0; margin: -22px -22px 22px; padding: 13px 16px; border-bottom: 1px solid var(--border); background: var(--bg); }
.selected-contract > div { min-width: 0; padding: 0 14px; border-right: 1px solid var(--border); }
.selected-contract > div:first-child { padding-left: 0; }
.selected-contract span { display: block; color: var(--text-muted); font-size: 9px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.selected-contract strong { display: block; overflow: hidden; margin-top: 2px; color: var(--text-secondary); font-size: 11px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.selected-contract button { margin-left: 14px; }
.agent-source-tabs { display: flex; gap: 3px; margin-bottom: 14px; padding: 3px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); }
.agent-source-tabs button { min-height: 32px; flex: 1; border: 0; background: transparent; color: var(--text-muted); }
.agent-source-tabs button:hover { border: 0; background: var(--surface); color: var(--text-secondary); }
.agent-source-tabs button[aria-selected="true"] { background: var(--surface-3); color: var(--text); }
.template-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.template-card { min-height: 188px; display: flex; flex-direction: column; padding: 14px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); }
.template-card:has(input:checked) { border-color: var(--accent); background: rgba(124, 58, 237, .07); }
.template-card .tname { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--text); font-weight: 650; }
.template-card .tdesc { margin: 10px 0; color: var(--text-secondary); font-size: 12px; }
.template-card .tsub { color: var(--text-muted); font: 10px var(--mono); }
.template-card .tactions { display: flex; gap: 7px; margin-top: auto; padding-top: 14px; }
.template-select { min-height: 30px; display: inline-flex; flex: 1; align-items: center; justify-content: center; margin: 0; padding: 5px 10px; border: 1px solid var(--accent); border-radius: 5px; background: var(--accent); color: #fff; cursor: pointer; font-size: 12px; }
.template-select input { position: absolute; opacity: 0; }
.template-select:hover { background: var(--accent-hover); }
.inline-empty { padding: 28px 16px; border: 1px dashed var(--border-strong); border-radius: 6px; color: var(--text-muted); font-size: 12px; text-align: center; }
.upload-agent-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .8fr); align-items: center; gap: 24px; min-height: 118px; padding: 16px; border: 1px dashed var(--border-strong); border-radius: 6px; background: var(--bg); }
.upload-agent-panel h3 { margin: 0; }
.upload-agent-panel p { margin: 4px 0 0; font-size: 12px; }
.agent-name-field { max-width: 600px; margin-top: 18px; }
.environment-variables-panel { margin-top: 18px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); }
.environment-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 14px 15px; }
.environment-panel-heading h3 { margin: 0; }
.environment-panel-heading p { margin: 3px 0 0; color: var(--text-muted); font-size: 11px; }
.environment-scope { padding: 13px 15px 15px; border-top: 1px solid var(--border); }
.environment-scope-heading { min-height: 30px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.environment-scope-heading > span { color: var(--text-secondary); font-size: 12px; font-weight: 600; }
.environment-scope-heading > small { margin-left: auto; color: var(--text-muted); font-size: 10px; text-transform: uppercase; }
.saved-environment-list { display: flex; flex-wrap: wrap; gap: 7px; }
.saved-environment-list label { display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 7px 9px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface); cursor: pointer; }
.saved-environment-list label:has(input:checked) { border-color: var(--border-strong); background: var(--surface-2); color: var(--text); }
.evaluation-environment-list { display: grid; gap: 8px; }
.evaluation-environment-row { display: grid; grid-template-columns: minmax(170px, .8fr) minmax(220px, 1.2fr) auto; align-items: end; gap: 8px; }
.evaluation-environment-row label { margin: 0; }
.evaluation-environment-row label > span { display: block; margin-bottom: 5px; }
.environment-empty { margin: 0; color: var(--text-muted); font-size: 11px; }
.environment-precedence { margin: 0; padding: 10px 15px; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 10px; }

/* Run progress, tasks, artifacts, logs */
.stages { display: flex; overflow-x: auto; }
.stage { flex: none; padding: 7px 10px; border-right: 1px solid var(--border); color: var(--text-muted); font-size: 11px; font-weight: 600; text-transform: capitalize; }
.stage.done { color: var(--text-secondary); }
.stage.now { background: rgba(124, 58, 237, .2); color: #c4b5fd; }
.stage.terminal-ok { background: var(--success-bg); color: var(--success); }
.stage.terminal-bad { background: var(--danger-bg); color: var(--danger); }
.task-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.task-cell { padding: 14px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); }
.task-cell .tk { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.task-cell .st { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.task-cell .t { color: var(--text); font: 600 14px var(--mono); }
.task-cell[data-stage="running"] { border-color: var(--accent); }
.task-cell[data-stage="done"][data-passed="true"] { border-left: 3px solid var(--success); }
.task-cell[data-stage="done"][data-passed="false"], .task-cell[data-stage="failed"] { border-left: 3px solid var(--danger); }
.artifact-toolbar, .artifacts { display: flex; gap: 8px; flex-wrap: wrap; }
.execution-log-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 7px; margin-top: 10px; }
.execution-log-list > a { min-width: 0; padding: 10px 11px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface); text-decoration: none; }
.execution-log-list > a:hover { border-color: var(--border-strong); background: var(--surface-2); }
.execution-log-list span, .execution-log-list small { display: block; color: var(--text-muted); font-size: 9px; }
.execution-log-list span { margin-bottom: 3px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; }
.execution-log-list strong { display: block; overflow: hidden; color: var(--text-secondary); font: 600 11px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.execution-log-list small { margin-top: 4px; }
.log-links { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.log-link { padding: 6px 9px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); color: var(--text-secondary); font: 11px var(--mono); text-decoration: none; }
.log-link:hover { border-color: var(--border-strong); color: var(--text); }
.log { max-height: 420px; overflow: auto; padding: 13px; border: 1px solid var(--border); border-radius: 5px; background: #030303; color: #d4d4d8; font: 12px/1.55 var(--mono); white-space: pre-wrap; word-break: break-word; }
.log .k { color: #a78bfa; }

/* Trajectory */
ol.traj { margin: 12px 0 0; padding: 0; list-style: none; }
ol.traj li { margin-bottom: 8px; padding: 11px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface); }
.traj-n { margin-bottom: 8px; color: var(--text-muted); font-size: 11px; font-weight: 600; }
.traj-frame { display: block; max-width: min(420px, 100%); max-height: 620px; border: 1px solid var(--border); border-radius: 4px; }
.traj-arrow { margin-right: 8px; color: var(--text-muted); font-size: 12px; }
.traj-action { color: var(--text-secondary); font-size: 11px; overflow-wrap: anywhere; }
.traj-detail { margin-left: 8px; color: var(--text-secondary); }

.empty { margin: 0; padding: 40px 18px; color: var(--text-muted); text-align: center; }
.tie-note, .comparison-note { margin-top: 8px; color: var(--text-muted); font-size: 11px; }

/* Track explorer: maintainer contract, without mixing in agent choices. */
.track-explorer { display: grid; grid-template-columns: 240px minmax(0, 1fr); align-items: start; gap: 14px; }
.track-directory { position: sticky; top: 22px; overflow: hidden; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); }
.track-directory > header { display: flex; align-items: center; justify-content: space-between; min-height: 42px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.track-directory > header span { color: var(--text-muted); font-size: 10px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.track-directory > header strong { color: var(--text-secondary); font-size: 11px; font-weight: 600; }
.track-directory > a { display: block; min-height: 58px; padding: 11px 12px; border-bottom: 1px solid var(--border); color: var(--text-secondary); text-decoration: none; }
.track-directory > a:last-child { border-bottom: 0; }
.track-directory > a:hover { background: var(--surface-2); }
.track-directory > a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--accent); background: var(--surface-3); }
.track-directory > a strong { display: block; overflow: hidden; color: var(--text); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.track-directory > a span { display: block; overflow: hidden; margin-top: 3px; color: var(--text-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.track-profile { min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); }
.track-profile-header { min-height: 116px; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 22px; border-bottom: 1px solid var(--border); }
.track-kicker, .algorithm-panel > header span, .topology-panel > header span, .implementation-panel > header span { color: var(--text-muted); font-size: 9px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.track-profile-header h2 { margin: 5px 0 4px; font-size: 22px; }
.track-profile-header p { max-width: 660px; margin: 0; font-size: 12px; }
.track-profile-tags { display: flex; flex: none; gap: 6px; }
.track-ownership { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--border); background: var(--bg); }
.track-ownership > div { min-height: 78px; padding: 15px 22px; }
.track-ownership > div + div { border-left: 1px solid var(--border); }
.track-ownership span { color: var(--text); font-size: 11px; font-weight: 650; }
.track-ownership p { margin: 4px 0 0; color: var(--text-muted); font-size: 11px; }
.algorithm-panel { margin: 22px; padding: 18px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); }
.algorithm-panel > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.algorithm-panel > header h2 { margin: 3px 0 0; font-size: 17px; }
.algorithm-panel > header > code { padding: 5px 8px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); color: var(--text-secondary); font-size: 10px; }
.algorithm-flow { display: grid; grid-template-columns: minmax(130px, .8fr) 22px minmax(150px, 1fr) 22px minmax(230px, 1.4fr); align-items: stretch; margin-top: 18px; }
.algorithm-flow.isolated { max-width: 720px; grid-template-columns: minmax(150px, .8fr) 22px minmax(240px, 1.2fr); }
.flow-node { min-width: 0; min-height: 92px; display: flex; flex-direction: column; justify-content: center; padding: 13px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface); }
.flow-node.emphasized { border-color: var(--border-strong); background: var(--surface-2); }
.flow-node span { color: var(--text-muted); font-size: 9px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; }
.flow-node strong { margin: 4px 0 2px; color: var(--text); font: 650 22px var(--mono); }
.flow-node small { color: var(--text-muted); font-size: 9px; }
.flow-arrow { display: grid; place-items: center; color: var(--text-muted); }
.flow-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.algorithm-meta { display: grid; grid-template-columns: .75fr 1fr 1.25fr; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.algorithm-meta span { min-width: 0; padding: 0 12px; color: var(--text-secondary); font: 10px var(--mono); overflow-wrap: anywhere; }
.algorithm-meta span:first-child { padding-left: 0; }
.algorithm-meta span + span { border-left: 1px solid var(--border); }
.algorithm-meta b { display: block; margin-bottom: 3px; color: var(--text-muted); font: 600 9px var(--font); letter-spacing: .04em; text-transform: uppercase; }
.track-contract-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 22px 22px; border: 1px solid var(--border); border-radius: 6px; }
.contract-card { min-width: 0; padding: 16px; }
.contract-card + .contract-card { border-left: 1px solid var(--border); }
.contract-card > header { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.contract-card > header span { color: var(--text-muted); font: 9px var(--mono); }
.contract-card > header h3 { font-size: 12px; }
.contract-card dl { margin: 0; }
.contract-card dl > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(90px, 1fr); gap: 12px; padding: 8px 0; border-top: 1px solid var(--border); }
.contract-card dt { color: var(--text-muted); font-size: 10px; }
.contract-card dd { min-width: 0; margin: 0; color: var(--text-secondary); font: 10px var(--mono); text-align: right; overflow-wrap: anywhere; }
.track-lower-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 10px; margin: 0 22px 22px; }
.topology-panel, .implementation-panel { min-width: 0; padding: 16px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); }
.topology-panel > header h3, .implementation-panel > header h3 { margin-top: 3px; font-size: 12px; }
.topology-list { margin-top: 12px; border-top: 1px solid var(--border); }
.topology-list > div { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 9px; min-height: 38px; border-bottom: 1px solid var(--border); }
.topology-list > div:last-child { border-bottom: 0; }
.topology-mark { width: 6px; height: 6px; border-radius: 50%; background: var(--success); }
.topology-list strong { color: var(--text-secondary); font-size: 10px; font-weight: 550; }
.topology-list code { color: var(--text-muted); font-size: 9px; }
.implementation-panel .source-path { display: block; overflow: auto; margin-top: 13px; padding: 10px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); color: var(--text-secondary); font-size: 9px; white-space: nowrap; }
.implementation-panel p { margin: 9px 0 0; color: var(--text-muted); font-size: 10px; }
.source-details { margin: 0 22px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); }
.source-details > summary { min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 14px; color: var(--text-secondary); cursor: pointer; font-size: 11px; font-weight: 600; list-style: none; }
.source-details > summary::-webkit-details-marker { display: none; }
.source-details > summary::before { content: "+"; color: var(--text-muted); font: 14px var(--mono); }
.source-details[open] > summary::before { content: "−"; }
.source-details > summary span { margin-right: auto; }
.source-details > summary code { color: var(--text-muted); font-size: 9px; font-weight: 400; }
.source-details pre { max-height: 520px; overflow: auto; margin: 0; padding: 16px; border-top: 1px solid var(--border); background: #030303; color: #d4d4d8; font: 11px/1.55 var(--mono); tab-size: 4; }
.source-details pre code { font-size: inherit; }
.track-profile-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 22px; padding: 16px 22px; border-top: 1px solid var(--border); }
.track-profile-footer p { margin: 0; color: var(--text-muted); font-size: 10px; }

@media (max-width: 1050px) {
  .track-explorer { grid-template-columns: 210px minmax(0, 1fr); }
  .algorithm-flow { grid-template-columns: 1fr 18px 1fr; }
  .algorithm-flow > .flow-arrow:nth-of-type(2), .algorithm-flow > .flow-pair { grid-column: 1 / -1; }
  .algorithm-flow > .flow-arrow:nth-of-type(2) { height: 24px; transform: rotate(90deg); }
  .track-contract-grid { grid-template-columns: 1fr; }
  .contract-card + .contract-card { border-top: 1px solid var(--border); border-left: 0; }
  .template-grid { grid-template-columns: 1fr 1fr; }
  .track-choice-meta { grid-template-columns: 1fr 1fr; }
  .selected-contract { grid-template-columns: 1fr 1.3fr .7fr .7fr 1fr auto; }
  .selected-contract > div:nth-child(3), .selected-contract > div:nth-child(5), .selected-contract > div:nth-child(7), .selected-contract > div:nth-child(8) { display: none; }
}

@media (max-width: 800px) {
  .app-shell { display: block; }
  .sidebar { display: none; }
  .mobile-header { position: sticky; top: 0; z-index: 30; min-height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; border-bottom: 1px solid var(--border); background: rgba(8, 8, 9, .96); }
  .mobile-brand { color: var(--text); font-weight: 650; text-decoration: none; }
  .mobile-menu summary { color: var(--text-secondary); cursor: pointer; font-size: 12px; font-weight: 600; list-style: none; }
  .mobile-menu summary::-webkit-details-marker { display: none; }
  .mobile-menu > nav { position: absolute; top: 56px; right: 0; left: 0; display: flex; flex-direction: column; padding: 10px; border-bottom: 1px solid var(--border); background: var(--sidebar); }
  .mobile-account { display: block; padding: 11px; color: var(--text-secondary); text-decoration: none; }
  main { padding: 18px 16px 56px; }
  .track-explorer { display: block; }
  .track-directory { position: static; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; margin-bottom: 10px; }
  .track-directory > header { display: none; }
  .track-directory > a { min-width: 0; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  .track-directory > a:nth-of-type(2n) { border-right: 0; }
  .track-directory > a:nth-last-child(-n + 2) { border-bottom: 0; }
  .track-directory > a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--accent); }
  .track-profile-header { min-height: 0; }
  .track-ownership, .track-lower-grid { grid-template-columns: 1fr; }
  .track-ownership > div + div { border-top: 1px solid var(--border); border-left: 0; }
  .algorithm-meta { grid-template-columns: 1fr; }
  .algorithm-meta span { padding: 8px 0; }
  .algorithm-meta span + span { border-top: 1px solid var(--border); border-left: 0; }
  .track-lower-grid { margin-right: 16px; margin-left: 16px; }
  .algorithm-panel, .track-contract-grid { margin-right: 16px; margin-left: 16px; }
  .source-details { margin-right: 16px; margin-left: 16px; }
  .page-header { display: block; }
  .page-actions { margin-top: 14px; justify-content: flex-start; }
  .stats-grid { grid-template-columns: repeat(3, minmax(120px, 1fr)); overflow-x: auto; }
  .stat-card { min-width: 120px; }
  .evaluation-header { display: none; }
  .evaluation-row { grid-template-columns: 45px minmax(0, 1fr) auto; gap: 3px 8px; padding: 11px; }
  .evaluation-row > * { padding: 0; }
  .evaluation-id { grid-row: 1 / 3; }
  .evaluation-name { grid-column: 2; grid-row: 1 / 3; }
  .evaluation-name small { display: block; }
  .evaluation-track { display: none; }
  .evaluation-stage { grid-column: 3; grid-row: 1; }
  .evaluation-started { grid-column: 3; grid-row: 2; font-size: 10px; }
  .evaluation-wizard { margin: 0; }
  .wizard-progress { grid-template-columns: 1fr 34px 1fr; margin-bottom: 18px; }
  .wizard-step small { display: none; }
  .step-connector { margin: 0 8px; }
  .wizard-panel { padding: 16px; }
  .track-choices { grid-template-columns: 1fr; }
  .placement-grid { grid-template-columns: 1fr; }
  .execution-choices { grid-template-columns: 1fr; }
  .selected-contract { grid-template-columns: 1fr 1.4fr auto; margin: -16px -16px 18px; padding: 12px; }
  .selected-contract > div { padding: 0 9px; }
  .selected-contract > div:nth-child(3), .selected-contract > div:nth-child(4), .selected-contract > div:nth-child(5), .selected-contract > div:nth-child(6), .selected-contract > div:nth-child(7), .selected-contract > div:nth-child(8) { display: none; }
  .selected-contract button { margin-left: 9px; }
  .template-grid { grid-template-columns: 1fr; }
  .upload-agent-panel { grid-template-columns: 1fr; gap: 14px; }
  .evaluation-environment-row { grid-template-columns: 1fr; }
  .evaluation-environment-row button { justify-self: start; }
  table.instrument { display: block; overflow-x: auto; white-space: nowrap; }
}

@media (max-width: 480px) {
  .track-profile-header { display: block; padding: 17px; }
  .track-profile-tags { margin-top: 12px; }
  .algorithm-panel { padding: 14px; }
  .algorithm-panel > header { display: block; }
  .algorithm-panel > header > code { display: inline-block; margin-top: 10px; }
  .algorithm-flow { display: block; }
  .flow-arrow { height: 24px; transform: rotate(90deg); }
  .flow-pair { grid-template-columns: 1fr; }
  .track-profile-footer { align-items: stretch; flex-direction: column; }
  .track-profile-footer .btn { width: 100%; }
  .source-details > summary code { display: none; }
  .page-actions .btn, .page-actions button { flex: 1; }
  .setup-alert { align-items: flex-start; flex-direction: column; }
  .template-card .tactions { align-items: stretch; flex-direction: column; }
  .environment-panel-heading { align-items: stretch; flex-direction: column; }
  .environment-panel-heading .btn { align-self: flex-start; }
  .wizard-progress { grid-template-columns: 1fr 22px 1fr; }
  .wizard-step { min-width: 0; }
  .wizard-step > span:last-child { overflow: hidden; }
  .wizard-step b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wizard-actions button { flex: 1; }
}