:root {
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
  --text: #111;
  --muted: #6b6b6b;
  --line: #e6e6e6;
  --bg: #fff;
  --soft: #f6f6f6;
  --error: #a33a3a;
  --red: #d64541;
  --amber: #e0a020;
  --green: #3a9a5b;
  --grey: #b5b5b5;
  --banner: #e9e9e9;
  --gap: 16px;
  --radius: 3px;
}

* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.5 var(--font); color: var(--text); background: var(--bg); }
a { color: inherit; }
h1 { font-size: 20px; font-weight: 600; margin: 0 0 calc(var(--gap) * 1.5); }
h2 { font-size: 15px; font-weight: 600; margin: calc(var(--gap) * 2) 0 var(--gap); }

.banner { padding: 2px calc(var(--gap) * 2); font-size: 12px; line-height: 18px; background: var(--banner); color: var(--text); }

.bar { display: flex; align-items: center; gap: calc(var(--gap) * 2); padding: 0 calc(var(--gap) * 2); height: 48px; border-bottom: 1px solid var(--line); }
.bar .title { font-weight: 600; }
.bar nav { display: flex; gap: calc(var(--gap) * 1.5); }
.bar nav a { text-decoration: none; color: var(--muted); padding: 13px 0; border-bottom: 2px solid transparent; }
.bar nav a.active { color: var(--text); border-bottom-color: var(--text); }
.bar .user { margin-left: auto; display: flex; gap: var(--gap); color: var(--muted); }
.bar .user a { color: var(--muted); }
.bar [hidden] { display: none; }

.head { margin-bottom: calc(var(--gap) * 1.5); }
.head h1 { margin: 0; }

main { padding: calc(var(--gap) * 2); max-width: 1200px; }

input, select, button { font: inherit; color: inherit; }
input, select { padding: 5px 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
input:not([type=checkbox]):not([type=file]), select { height: 32px; }
input[type=checkbox] { padding: 0; }
button { padding: 5px 12px; border: 1px solid var(--text); border-radius: var(--radius); background: var(--bg); cursor: pointer; }
button:disabled { opacity: .4; cursor: default; }
button.link { border: 0; padding: 0; text-decoration: underline; background: none; }

.form { display: grid; gap: var(--gap); max-width: 480px; }
.form label, .filters label { display: grid; gap: 4px; color: var(--muted); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap); }
.filters { display: flex; flex-wrap: wrap; align-items: end; gap: var(--gap); margin-bottom: var(--gap); }
.switch, .form .switch, .filters .switch { display: flex; align-items: center; gap: 8px; color: var(--text); }
.switch small { color: var(--muted); }

table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 500; color: var(--muted); }
tr.click { cursor: pointer; }
tr.click:hover td, tr.current td { background: var(--soft); }
td.num, th.num { text-align: right; }

.muted { color: var(--muted); }
.error { color: var(--error); }
.mono { font-family: var(--mono); font-size: 13px; }
pre { font: 12px/1.45 var(--mono); background: var(--soft); padding: 12px; margin: 8px 0; overflow: auto; max-height: 480px; white-space: pre-wrap; word-break: break-word; }
ul.plain { margin: 0; padding-left: 18px; }
.pager { margin-top: var(--gap); }

.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--grey); vertical-align: middle; }
.dot.red { background: var(--red); }
.dot.yellow { background: var(--amber); }
.dot.green { background: var(--green); }
.counts { display: inline-flex; gap: 10px; }

dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 24px; margin: 0; }
dl.kv dt { color: var(--muted); }
dl.kv dd { margin: 0; word-break: break-word; }