:root { color-scheme: light dark; }
:root, [data-theme="light"] {
  --canvas:#f2f4f8; --sheet:#fff; --nested:#f2f4f8; --line:#dde1e6; --line-2:#c1c7cd;
  --muted:#8a8f98; --comment:#525252; --text:#393939; --fg:#161616;
  --green:#24a148; --green-ink:#198038; --green-tint:rgba(36,161,72,.09);
  --red:#da1e28; --yellow:#8e6a00; --blue:#0f62fe; --magenta:#8a3ffc; --cyan:#007d79;
  --btn-text:#fff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas:#161616; --sheet:#1c1c1c; --nested:#262626; --line:#262626; --line-2:#393939;
    --muted:#525252; --comment:#8a8f98; --text:#dde1e6; --fg:#f2f4f8;
    --green:#42be65; --green-ink:#6fdc8c; --green-tint:rgba(66,190,101,.12);
    --red:#ff9cac; --yellow:#f2cc60; --blue:#78a9ff; --magenta:#be95ff; --cyan:#08bdba;
    --btn-text:#161616;
  }
}
[data-theme="dark"] {
  --canvas:#161616; --sheet:#1c1c1c; --nested:#262626; --line:#262626; --line-2:#393939;
  --muted:#525252; --comment:#8a8f98; --text:#dde1e6; --fg:#f2f4f8;
  --green:#42be65; --green-ink:#6fdc8c; --green-tint:rgba(66,190,101,.12);
  --red:#ff9cac; --yellow:#f2cc60; --blue:#78a9ff; --magenta:#be95ff; --cyan:#08bdba;
  --btn-text:#161616;
}
:root {
  --fs-title:24px; --fs-heading:18px; --fs-body:15px; --fs-small:13px; --fs-label:12px;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
* { box-sizing: border-box; }
body { margin:0; background:var(--canvas); color:var(--text); font:400 var(--fs-body)/1.5 var(--sans); }
h1 { font-size:var(--fs-title); font-weight:600; letter-spacing:-.01em; color:var(--fg); margin:0; }
h2 { font-size:var(--fs-heading); font-weight:600; color:var(--fg); margin:0 0 12px; }
a { color:var(--green-ink); text-decoration:none; } a:hover { text-decoration:underline; }
.label { font:500 var(--fs-label)/1.4 var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--comment); }
.hint { font-size:var(--fs-small); color:var(--comment); }
.mono { font-family:var(--mono); font-size:13px; }
.error { color:var(--red); min-height:1.5em; margin:0; font-size:var(--fs-small); }

/* Login */
.login { min-height:100vh; display:grid; place-items:center; padding:24px; }
.login .card { width:100%; max-width:420px; background:var(--sheet); border:1px solid var(--line); border-radius:8px; padding:32px; display:grid; gap:16px; }

/* Buttons and controls */
button, select, input { font:inherit; font-size:var(--fs-small); }
.btn-primary { background:var(--green-ink); color:var(--btn-text); border:0; border-radius:6px; padding:8px 14px; font-weight:600; cursor:pointer; }
.btn-primary:hover { filter:brightness(1.12); }
.btn-primary:disabled { opacity:.45; cursor:progress; }
.btn-secondary { background:var(--sheet); color:var(--text); border:1px solid var(--line-2); border-radius:6px; padding:6px 12px; cursor:pointer; }
.btn-secondary:hover { background:var(--nested); }
select, input[type="search"] { background:var(--sheet); color:var(--text); border:1px solid var(--line-2); border-radius:6px; padding:6px 10px; }
select:focus, input:focus, button:focus-visible { outline:none; border-color:var(--green); box-shadow:0 0 0 2px var(--green-tint); }
.seg { display:inline-flex; border:1px solid var(--line-2); border-radius:6px; overflow:hidden; }
.seg button { background:var(--sheet); color:var(--text); border:0; border-right:1px solid var(--line-2); padding:6px 12px; cursor:pointer; }
.seg button:last-child { border-right:0; }
.seg button[aria-pressed="true"] { background:var(--green-tint); color:var(--green-ink); font-weight:600; }
label.toggle { display:inline-flex; gap:6px; align-items:center; font-size:var(--fs-small); color:var(--text); }

/* Layout */
header.top { position:sticky; top:0; z-index:5; background:var(--canvas); border-bottom:1px solid var(--line); }
header.top .row { max-width:1600px; margin:0 auto; padding:12px 24px; display:flex; gap:16px; align-items:center; flex-wrap:wrap; min-height:64px; }
header.top .spacer { flex:1; }
main { max-width:1600px; margin:0 auto; padding:24px; display:grid; gap:24px; }
.kpis { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:12px; }
.kpi { background:var(--sheet); border:1px solid var(--line); border-radius:8px; padding:14px 16px; }
.kpi .value { font:500 24px/1.2 var(--mono); color:var(--fg); margin-top:4px; }
.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(380px, 1fr)); gap:16px; }
.panel { background:var(--sheet); border:1px solid var(--line); border-radius:8px; padding:16px; min-width:0; }
.panel.wide { grid-column:1 / -1; }
.chart { position:relative; height:260px; }
.panel.wide .chart { height:300px; }
.bars { display:grid; gap:6px; }
.bars .bar { display:grid; grid-template-columns:minmax(0, 1fr) 64px; gap:8px; align-items:center; font-size:var(--fs-small); }
.bars .bar .name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bars .bar .track { grid-column:1 / -1; height:4px; background:var(--nested); border-radius:2px; }
.bars .bar .fill { height:4px; background:var(--blue); border-radius:2px; }
.bars .bar .n { font-family:var(--mono); text-align:right; color:var(--fg); }

/* Table */
.table-tools { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
.table-tools input[type="search"] { min-width:280px; flex:1; }
.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:4px; max-height:75vh; }
table { border-collapse:collapse; width:100%; font-size:var(--fs-small); }
th { position:sticky; top:0; background:var(--nested); text-align:left; font:500 var(--fs-label)/1.4 var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--comment); padding:8px 10px; border-bottom:1px solid var(--line-2); cursor:pointer; white-space:nowrap; user-select:none; }
th[aria-sort="ascending"]::after { content:" ▲"; } th[aria-sort="descending"]::after { content:" ▼"; }
td { padding:7px 10px; border-bottom:1px solid var(--line); vertical-align:top; max-width:360px; overflow:hidden; text-overflow:ellipsis; }
tr.row { cursor:pointer; } tr.row:hover td { background:var(--nested); }
tr.row.noise td { color:var(--comment); }
tr.detail td { background:var(--nested); white-space:normal; max-width:none; }
.status-err { color:var(--red); font-weight:600; } .status-ok { color:var(--text); } .status-pending { color:var(--yellow); }
.cls { font-family:var(--mono); font-size:12px; }
dl.kv { display:grid; grid-template-columns:180px 1fr; gap:4px 16px; margin:0; }
dl.kv dt { font:500 var(--fs-label)/1.6 var(--mono); text-transform:uppercase; color:var(--comment); }
dl.kv dd { margin:0; word-break:break-word; font-family:var(--mono); font-size:12.5px; color:var(--fg); }
.pager { display:flex; gap:8px; align-items:center; justify-content:flex-end; margin-top:10px; font-size:var(--fs-small); }
footer { max-width:1600px; margin:0 auto; padding:8px 24px 32px; }
h2.sub { margin-top:16px; }

/* Experiments */
body.view-experiments .responses-only { display:none; }
.exp-site { margin-bottom:16px; }
.exp-site .meta { display:flex; flex-wrap:wrap; gap:8px 16px; margin-bottom:12px; }
.exp-site .flag { font:600 var(--fs-label)/1.4 var(--mono); text-transform:uppercase; letter-spacing:.06em; padding:2px 8px; border-radius:4px; background:var(--nested); color:var(--comment); }
.exp-site .flag.wait { color:var(--yellow); }
.exp-site .flag.go { color:var(--green-ink); background:var(--green-tint); }
.exp-site .reasons { margin:0 0 12px; padding-left:18px; font-size:var(--fs-small); color:var(--comment); }
.exp-site .chart { height:220px; }
.exp-site td.num, .exp-site th.num { text-align:right; font-variant-numeric:tabular-nums; }
.exp-site .arm-text { font-size:var(--fs-small); color:var(--comment); max-width:420px; }
pre.journal { white-space:pre-wrap; word-break:break-word; font:400 13px/1.55 var(--mono); background:var(--nested); border:1px solid var(--line); border-radius:6px; padding:12px; max-height:640px; overflow:auto; }