:root { --bg:#fafafa; --fg:#1c1c1e; --muted:#6b6b70; --card:#fff; --line:#e2e2e6; --accent:#2557d6; --err:#b3261e; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#161618; --fg:#ececee; --muted:#9a9aa0; --card:#1f1f22; --line:#2e2e33; --accent:#6c93f5; --err:#f2837b; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.5 system-ui, sans-serif; }
header { display:flex; gap:1.5rem; align-items:center; padding:.75rem 1.5rem; border-bottom:1px solid var(--line); background:var(--card); }
header form { margin-left:auto; }
.brand { font-weight:700; text-decoration:none; color:var(--fg); }
main { max-width:56rem; margin:2rem auto; padding:0 1.5rem; }
a { color:var(--accent); }
h1 { font-size:1.5rem; margin:0 0 1rem; }
.row { display:flex; justify-content:space-between; align-items:center; }
table { width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--line); }
th, td { text-align:left; padding:.6rem .8rem; border-bottom:1px solid var(--line); }
.card { background:var(--card); border:1px solid var(--line); padding:1.25rem; border-radius:8px; display:grid; gap:1rem; }
.narrow { max-width:22rem; margin:4rem auto; }
label { display:grid; gap:.3rem; font-size:.9rem; color:var(--muted); }
input, textarea { font:inherit; padding:.5rem .6rem; border:1px solid var(--line); border-radius:6px; background:var(--bg); color:var(--fg); }
button, .button { font:inherit; padding:.5rem 1rem; border:0; border-radius:6px; background:var(--accent); color:#fff; cursor:pointer; text-decoration:none; }
button.link { background:none; color:var(--accent); padding:0; }
.error { color:var(--err); margin:0; }
.muted { color:var(--muted); }
dt { color:var(--muted); font-size:.85rem; margin-top:.75rem; }
dd { margin:0; }
code { background:var(--line); padding:.1rem .3rem; border-radius:4px; }
.ok { color:#1e7a3c; }
.warn { color:#9a6700; }
.fail { color:var(--err); }
@media (prefers-color-scheme: dark) { .ok { color:#6fd08c; } .warn { color:#e3b341; } }
.small { font-size:.85rem; }
.pill { font-size:.75rem; text-transform:uppercase; letter-spacing:.04em; border:1px solid currentColor; border-radius:999px; padding:.05rem .5rem; vertical-align:middle; }
h2 { font-size:1.15rem; margin:1.75rem 0 .5rem; }
h3 { font-size:1rem; margin:1.25rem 0 .5rem; }
.filters { grid-template-columns:repeat(auto-fit, minmax(12rem, 1fr)); margin-bottom:1rem; }
.filters .row { grid-column:1 / -1; justify-content:flex-start; gap:1rem; }
details summary { cursor:pointer; color:var(--accent); }
pre { margin:.5rem 0; padding:.6rem; background:var(--bg); border:1px solid var(--line); border-radius:6px; overflow:auto; max-height:24rem; font-size:.8rem; }
.beforeafter { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.diff-add { color:#1e7a3c; } .diff-del { color:var(--err); } .diff-hunk { color:var(--muted); }
@media (prefers-color-scheme: dark) { .diff-add { color:#6fd08c; } }
.pager { display:flex; gap:1rem; }
