:root {
  --bg: #f6f7f8; --panel: #fff; --text: #1c2024; --muted: #5f6b76; --line: #d9dee3;
  --error: #b42318; --warn: #a15c00;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #15181b; --panel: #1e2226; --text: #e7eaee; --muted: #9aa5b1; --line: #333a41; --error: #ff8a80; --warn: #ffc06a; }
}
* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.45 system-ui, sans-serif; background: var(--bg); color: var(--text); }
header { display: flex; gap: .75rem; align-items: baseline; padding: .75rem 1rem; background: var(--panel); border-bottom: 1px solid var(--line); }
header span:last-child { margin-left: auto; color: var(--muted); }
main { padding: 1rem; max-width: 1400px; margin: auto; }
form { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; margin-bottom: .75rem; }
label { display: grid; gap: .2rem; color: var(--muted); font-size: 12px; }
input, select, button { font: inherit; padding: .35rem .5rem; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 4px; }
button { cursor: pointer; }
.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: var(--panel); }
th, td { text-align: left; padding: .35rem .5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-size: 12px; white-space: nowrap; }
td.message { white-space: pre-wrap; overflow-wrap: anywhere; font-family: ui-monospace, monospace; font-size: 12px; }
td.time { white-space: nowrap; }
.level-error, .level-fatal { color: var(--error); font-weight: 600; }
.level-warn { color: var(--warn); }
.hint, #consent { color: var(--muted); }
section { margin-top: 2rem; }
h2 { font-size: 16px; }