/* CAPTA component theme. Shared semantic surfaces and compact type scale. */
:root {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", sans-serif;
  --surface: #fff; --canvas: #fafafa; --subtle: #f5f5f5; --hover: #eee;
  --ink: #171717; --muted: #626262; --line: #e4e4e4; --border-hover: #b5b5b5;
  --accent: #5145bd; --accent-hover: #4035a3; --accent-soft: #f2f0fc;
  --radius: 10px; --gutter: 24px; --page-width: 1728px;
  color: var(--ink); background: var(--canvas);
}
.site-header { height: 64px; padding: 0 max(4vw, calc((100% - var(--page-width)) / 2 + 4vw)); gap: 40px; background: var(--surface); border-color: var(--line); }
.brand { gap: 8px; }
.brand strong { font-size: 20px; letter-spacing: -.6px; }
.brand-mark img { width: 24px; height: 24px; }
.site-header nav { gap: 26px; }
.nav-tab { font-size: 13px; color: var(--muted); border-bottom-width: 2px; }
.nav-tab:hover, .nav-tab.active { color: var(--ink); }
.nav-tab.active { border-bottom-color: var(--ink); }
main { max-width: var(--page-width); padding: 24px 4vw 28px; }
.summary-strip { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 24px; padding: 0 calc(var(--gutter) + 1px); margin: 0 0 20px; }
.selection-counts { gap: 20px; font-size: 14px; color: var(--muted); }
.selection-counts b { color: var(--ink); font-weight: 600; margin-right: 2px; }
.summary-item { gap: 9px; border-left-color: var(--line); padding-left: 24px; font-size: 13px; }
.summary-item strong { font-size: 25px; letter-spacing: -.7px; color: var(--ink); }
.summary-item>span:first-child, .status-note { color: var(--muted); }
.status-note, .summary-item .text-button, .eval-settings>summary { font-size: 13px; }
.summary-action { margin-left: auto; gap: 16px; }
.eval-settings>div { border-color: var(--line); border-radius: 12px; box-shadow: 0 8px 24px #00000012; }
.eval-settings p { font-size: 12px; }
.workspace { gap: 20px; }
.workspace.has-inspector { grid-template-columns: minmax(0,1fr) 340px; }
.matrix-panel, .detail-panel, .lab-config, .lab-output { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; }
.matrix-toolbar { padding: 18px var(--gutter) 10px; border: 0; }
.matrix-toolbar>strong { font-size: 16px; letter-spacing: -.2px; }
.matrix-toolbar>strong, .form-section h3, .output-header>strong, .dialog-head h2 { display: flex; align-items: center; gap: 8px; }
.matrix-toolbar>strong>svg, .form-section h3>svg, .output-header>strong>svg, .dialog-head h2>svg { color: var(--muted); width: 16px; height: 16px; }
.toolbar-actions { gap: 7px; }
.probe-budget { padding: 4px var(--gutter) 16px; gap: 18px; background: var(--surface); border-color: var(--line); }
.probe-budget .range-control { width: 210px; font-size: 13px; }
.probe-budget .muted, .form-section .probe-budget .muted { font-size: 12px; color: var(--muted); line-height: 1.5; }
.probe-presets { padding: 3px; gap: 2px; background: var(--subtle); border: 1px solid var(--line); border-radius: 7px; }
.probe-presets button { font-size: 12px; min-width: 30px; min-height: 25px; border: 0; border-radius: 4px; color: var(--muted); }
.probe-presets button:hover { background: var(--hover); color: var(--ink); }
.probe-presets button.active { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px #00000014; }
.range-control output { color: var(--ink); font-size: 13px; }
.range-control input[type=range] { accent-color: var(--ink); }
.matrix-scroll { max-height: min(850px,calc(100dvh - 265px)); min-height: 280px; scrollbar-color: #c8c8c8 transparent; }
.matrix th, .matrix td { border-right-color: #f2f2f2; border-bottom-color: #ededed; }
.matrix thead th, .matrix thead .model-column { height: 40px; background: var(--subtle); color: var(--muted); }
.matrix .add-column { background: var(--subtle); }
.matrix-scroll.overview .probe-heading .mono { font-size: 12px; color: #505050; font-weight: 500; }
.matrix-scroll.overview .model-heading strong { font-size: 12px; font-weight: 400; }
.matrix-scroll.overview .model-heading { padding: 8px 0; }
.matrix-scroll.overview .matrix td, .matrix-scroll.overview .matrix-cell { height: 34px; }
.matrix tbody tr:hover>.model-column, .matrix tbody tr:hover>td { background: #fafafa; }
.matrix tbody tr>.model-column.axis-selected, .matrix thead th.axis-selected { background: var(--accent-soft); }
.matrix-cell:hover { background: #f5f3fd; }
.matrix-cell.selected, .matrix-cell.selected:hover { background: var(--accent-soft); border-color: #b8afe7; box-shadow: inset 0 0 0 1px #b8afe7; }
.matrix-bottom { padding: 14px var(--gutter); gap: 10px 18px; background: var(--canvas); border-color: var(--line); }
.color-note, .matrix-notes, .matrix-bottom>button { font-size: 12px; line-height: 1.6; color: var(--muted); }
.button { min-height: 36px; padding: 7px 13px; border-radius: 6px; font-size: 13px; font-weight: 500; }
.button.small { min-height: 30px; padding: 5px 10px; border-radius: 6px; font-size: 12px; }
.button:not(.primary) { color: #404040; border-color: #d8d8d8; background: var(--surface); box-shadow: 0 1px 2px #00000004; }
.button:not(.primary):hover { background: var(--subtle); border-color: var(--border-hover); color: var(--ink); }
.button.primary { background: var(--ink); border-color: var(--ink); color: #fff; box-shadow: 0 1px 2px #00000012; }
.button.primary:hover { background: #333; border-color: #333; }
.button:active:not(:disabled) { box-shadow: inset 0 1px 3px #00000020; }
.button[data-action="reset-live"], .button[data-action="cancel-live"] { background: transparent; border-color: transparent; box-shadow: none; }
.icon-button { color: var(--muted); border-radius: 6px; }
.icon-button:hover { background: var(--hover); color: var(--ink); }
.text-button, .detail-links button { font-size: 12px; color: var(--accent); }
input, textarea, select { border-color: #d5d5d5; background: var(--surface); border-radius: 6px; color: var(--ink); font-size: 13px; }
input::placeholder { color: #707070; }
input:hover, textarea:hover, select:hover { border-color: var(--border-hover); }
input:not([type=checkbox]):not([type=range]), select { min-height: 36px; }
input:not([type=checkbox]):not([type=range]):focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid #5145bd20; outline-offset: 1px; border-color: #9186d6; }
input[type=checkbox] { accent-color: var(--ink); }
.lab-layout { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 24px; align-items: start; }
.lab-config { overflow: hidden; }
.lab-modes { display: flex; margin: 0; padding: 0 var(--gutter); gap: 22px; border: 0; border-bottom: 1px solid var(--line); background: var(--canvas); border-radius: 0; }
.lab-modes button { flex: 0 1 auto; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 16px 0; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--muted); }
.lab-modes strong { font-size: 13px; font-weight: 500; }
.lab-modes button.active { color: var(--ink); background: transparent; border-bottom-color: var(--ink); box-shadow: none; }
.lab-modes button>svg { width: 16px; height: 16px; }
.form-section { margin: 0; padding: 16px var(--gutter); border-bottom: 1px solid var(--line); }
.form-section h3 { font-size: 14px; letter-spacing: 0; margin-bottom: 12px; }
.form-section .section-top { margin-bottom: 10px; }
.form-section label:not(.checkbox-label) { font-size: 13px; color: #454545; gap: 6px; }
.form-section input:not([type=range]):not([type=checkbox]), .candidate-button { min-height: 36px; padding: 7px 10px; font-size: 13px; }
.form-section .form-grid { gap: 14px; margin-top: 12px; }
.api-notes { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 16px; margin-top: 10px; }
.api-notes .connection-notes, .api-notes .request-settings { margin-top: 0; }
.api-notes details[open] { flex-basis: 100%; margin-bottom: 8px; }
.connection-notes, .request-settings, .ranking-notes { font-size: 12px; color: var(--muted); }
.connection-notes p, .ranking-notes p, .rejection-controls p { font-size: 12px; line-height: 1.65; }
.form-section .probe-budget { background: transparent; gap: 5px 12px; margin-bottom: 10px; padding: 0; border: 0; }
.probe-chips { gap: 5px; }
.probe-chips>button { border-radius: 5px; font-size: 12px; padding: 4px 7px; color: #505050; background: var(--canvas); border-color: var(--line); }
.probe-chips>button:hover { background: var(--hover); border-color: var(--border-hover); color: var(--ink); }
.form-section>.checkbox-label { margin-top: 12px; font-size: 12px; color: var(--muted); }
.live-tuning { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 16px; align-items: center; margin-top: 14px; }
.live-tuning label.range-control { display: grid; grid-template-columns: auto 26px; gap: 4px 10px; }
.live-tuning label.range-control input { grid-column: 1 / -1; }
.live-tuning .request-budget { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; padding: 0; margin: 0; border: 0; font-size: 12px; color: var(--muted); }
.live-tuning .request-budget strong { color: var(--ink); font-size: 16px; }
.lab-submit { padding: 14px var(--gutter); background: var(--canvas); gap: 10px; }
.lab-submit>span { font-size: 12px; line-height: 1.5; color: var(--muted); }
.output-header { padding: 16px var(--gutter); min-height: 55px; font-size: 16px; border-bottom: 1px solid var(--line); background: var(--canvas); }
.output-header>span { font-size: 12px; color: var(--accent); }
.rejection-controls { margin: 0; padding: 12px var(--gutter); gap: 10px 16px; background: var(--surface); border-bottom-color: var(--line); }
.rejection-controls .checkbox-label, .rejection-controls>label:nth-child(2), .rejection-controls details { color: var(--muted); font-size: 12px; }
.rejection-controls select { min-height: 28px; }
.lab-empty { min-height: 275px; padding: 32px var(--gutter); align-items: center; text-align: center; }
.lab-empty p { font-size: 18px; color: var(--muted); letter-spacing: -.3px; margin-bottom: 16px; }
.lab-empty .text-button { font-size: 13px; padding: 8px 12px; border: 1px solid #d8d8d8; background: var(--surface); border-radius: 6px; color: var(--ink); }
.lab-empty .text-button:hover { background: var(--subtle); border-color: var(--border-hover); text-decoration: none; }
.session-progress { padding: 20px var(--gutter) 16px; }
.session-progress strong { font-size: 28px; letter-spacing: -.8px; }
.session-progress strong>span { font-size: 14px; color: var(--muted); letter-spacing: 0; }
.session-progress small { font-size: 12px; line-height: 1.6; color: var(--muted); }
.progress-track, .accuracy-track, .option-track { background: #eee; }
.progress-track { height: 4px; }
.progress-track i, .eval-progress span { background: var(--accent); }
.decision-note { margin: 0 var(--gutter) 20px; padding: 10px 12px; background: var(--canvas); border: 1px solid var(--line); border-radius: 6px; font-size: 12px; color: var(--muted); }
.decision-note.rejected { background: #fff8eb; color: #805b1c; border-color: #eedbb4; }
.ranking { padding: 0 var(--gutter) 20px; }
.ranking h2 { font-size: 16px; letter-spacing: -.2px; margin-bottom: 10px; }
.ranking-caption { font-size: 12px; color: var(--muted); }
.ranking-notes { margin-bottom: 14px; }
.ranking-row { grid-template-columns: 20px 22px minmax(0,1fr) 76px; gap: 10px; padding: 14px 10px; border-left-width: 1px; border-bottom-color: var(--line); }
.ranking-row>div>strong { font-size: 13px; font-weight: 500; }
.ranking-row>strong { font-size: 14px; color: #444; }
.ranking-row.winner { padding-top: 18px; padding-bottom: 18px; margin-bottom: 4px; border: 1px solid #dfd9f1; border-radius: 8px; background: var(--accent-soft); }
.ranking-row.winner>div>strong { font-size: 14px; }
.ranking-row.winner>strong { font-size: 18px; color: var(--accent); }
.accuracy-track i { background: #b0aebc; }
.ranking-row.winner .accuracy-track i { background: var(--accent); }
.session-distributions, .session-actions { padding-left: var(--gutter); padding-right: var(--gutter); }
.session-distributions summary, .ranking-history, .evidence { font-size: 12px; color: #505050; }
.request-log { padding: 14px var(--gutter); background: var(--canvas); color: var(--muted); font-size: 12px; border-color: var(--line); }
.trace-toolbar, .trace-entry>summary, .trace-label, .trace-meta, .trace-parsed { font-size: 12px; color: var(--muted); }
.trace-entry { border-color: var(--line); }
.trace-body pre { background: var(--subtle); border-color: var(--line); font-size: 12px; }
.output-title { padding-left: var(--gutter); font-size: 16px; }
.detail-panel { padding: 20px; max-height: calc(100dvh - 120px); scrollbar-color: #c8c8c8 transparent; }
.inspector-heading { margin: -20px -20px 16px; padding: 16px 20px; border-bottom: 1px solid var(--line); background: var(--canvas); }
.inspector-heading h2 { font-size: 16px; letter-spacing: -.2px; }
.inspector-heading img { width: 20px; height: 20px; }
.inspector-heading .mono, .inspector-meta { font-size: 12px; color: var(--muted); }
.question-full { font-size: 13px; line-height: 1.65; color: #404040; }
.detail-links { padding-bottom: 12px; border-color: var(--line); gap: 18px; }
.sort-control, .sort-control select { font-size: 12px; color: var(--muted); }
.profile-row { border-color: var(--line); min-height: 38px; padding: 9px 2px; }
.profile-row:hover { background: var(--subtle); }
.profile-row>.mono, .profile-name { font-size: 12px; color: #454545; }
.profile-name { flex-basis: 160px; overflow-wrap: anywhere; }
.parameter-details, .all-options { font-size: 12px; color: var(--muted); }
.option-row>div:first-child, .option-row strong, .option-tag { font-size: 12px; line-height: 1.5; }
.option-row>div:first-child>span:nth-child(2) { color: #454545; overflow-wrap: anywhere; }
.option-row strong { color: #454545; white-space: nowrap; }
.option-row { padding: 8px 0; }
.option-tag { color: var(--ink); background: var(--subtle); padding: 1px 4px; border-radius: 3px; border-left: 3px solid var(--option-color); }
dialog { color: var(--ink); background: var(--surface); border: 1px solid #d8d8d8; border-radius: 12px; box-shadow: 0 16px 48px #00000026,0 2px 6px #00000008; }
dialog::backdrop { background: #17171738; backdrop-filter: blur(2px); }
.selection-dialog { width: 640px; }
.dialog-head { padding: 20px; gap: 12px; }
.dialog-head h2 { font-size: 18px; letter-spacing: -.3px; }
.search-input { margin: 0 20px; width: calc(100% - 40px); min-height: 36px; font-size: 13px; background: var(--canvas); }
.selection-tools { padding: 12px 20px; font-size: 12px; color: #444; border-color: var(--line); }
.selection-tools button:hover { color: var(--accent); }
#selection-list { padding: 6px 12px; max-height: 48dvh; }
.selection-row { padding: 10px 8px; gap: 10px; border: 0; border-radius: 6px; margin-bottom: 2px; }
.selection-row:hover { background: var(--subtle); }
.selection-row:has(input:checked) { background: #f2f2f2; }
.selection-row:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
.selection-row strong { font-size: 13px; line-height: 1.55; font-weight: 500; color: var(--ink); }
.selection-row small { font-size: 12px; color: var(--muted); margin-top: 2px; }
.selection-row img { width: 20px; height: 20px; }
.selection-row .pill { font-size: 12px; background: var(--surface); border-color: #dadada; color: #505050; }
.dialog-footer { padding: 14px 20px; background: var(--canvas); border-top: 1px solid var(--line); }
.question-dialog { padding: 0 20px 20px; }
.question-dialog .dialog-head { padding-left: 0; padding-right: 0; }
.question-dialog p, .question-dialog ol { font-size: 13px; color: #454545; line-height: 1.65; }
.question-dialog li { padding: 3px 0; }
.distribution-preview { border: 1px solid #d8d8d8; border-radius: 8px; box-shadow: 0 6px 24px #00000016; padding: 16px; font-size: 12px; }
.distribution-preview p, .distribution-preview>.mono, .distribution-preview>small, .preview-option>b { font-size: 12px; color: var(--muted); }
.site-footer { max-width: var(--page-width); padding: 0 4vw 24px; font-size: 12px; color: var(--muted); }
.data-note>div, .data-note code { font-size: 12px; }
@media(max-width:1050px) {
  .workspace.has-inspector { grid-template-columns: minmax(0,1fr) 310px; }
  .summary-strip { gap: 12px 18px; }
  .lab-layout { gap: 18px; }
  .ranking-row { grid-template-columns: 16px 20px minmax(0,1fr) 66px; gap: 7px; padding-left: 7px; padding-right: 7px; }
  .ranking-row.winner>strong { font-size: 16px; }
}
@media(max-width:900px) {
  .workspace.has-inspector { grid-template-columns: minmax(0,1fr); }
  .detail-panel { max-height: none; }
  .matrix-scroll { max-height: 560px; }
}
@media(max-width:800px) {
  :root { --gutter: 20px; }
  .lab-layout { grid-template-columns: minmax(0,1fr); gap: 20px; }
  .probe-budget { flex-wrap: wrap; gap: 10px; }
  .probe-budget .range-control { width: 100%; }
  .matrix-toolbar { flex-wrap: wrap; }
  .summary-item { border: 0; padding-left: 0; }
}
@media(max-width:550px) {
  :root { --gutter: 16px; }
  .site-header { padding: 0 16px; gap: 22px; height: 60px; }
  .brand strong { font-size: 18px; }
  .brand-mark img { width: 22px; height: 22px; }
  .site-header nav { gap: 14px; }
  .nav-tab { font-size: 12px; }
  main { padding: 20px 12px; }
  .summary-strip { gap: 10px 16px; }
  .selection-counts { width: 100%; }
  .summary-item { flex: 1 1 100%; gap: 7px; }
  .summary-action { width: 100%; justify-content: space-between; margin-left: 0; }
  .toolbar-actions { gap: 5px; }
  .matrix-toolbar>strong { font-size: 16px; }
  .matrix-scroll.overview .matrix { --model-width: 168px; }
  .matrix-scroll.overview .matrix .model-column { min-width: 168px; max-width: 168px; width: 168px; }
  .matrix-scroll.overview .model-heading strong { font-size: 12px; }
  .lab-modes { gap: 16px; }
  .lab-modes strong { font-size: 12px; }
  .lab-modes button { gap: 6px; padding: 14px 0; }
  .form-section .probe-budget { grid-template-columns: minmax(0,1fr); }
  .form-section .probe-presets { width: fit-content; }
  .live-tuning { grid-template-columns: minmax(0,1fr); gap: 10px; }
  .live-tuning .request-budget { flex-direction: row; justify-content: space-between; }
  .ranking-row.winner>div>strong { font-size: 13px; }
  .site-footer { padding: 0 16px 24px; }
}