:root {
  --bg: #f5f6f4; --surface: #fff; --ink: #16191a; --ink-2: #5a6163;
  --rule: #dce0da; --accent: #a8352a; --good: #2e6a4e;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101312; --surface: #181c1b; --ink: #eceeec; --ink-2: #a2aba8;
    --rule: #2a302f; --accent: #e8796a; --good: #71be94;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0; padding: 0 20px 64px;
  background: var(--bg); color: var(--ink);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.mast { max-width: 1000px; margin: 0 auto; padding: 40px 0 20px; }
h1 { margin: 0; font-size: clamp(1.8rem, 4vw, 2.6rem); letter-spacing: -.02em; }
.sub { margin: 10px 0 0; color: var(--ink-2); max-width: 62ch; }

.stats {
  max-width: 1000px; margin: 0 auto 20px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px;
}
.stat {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 7px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 3px;
}
.stat .k { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-2); }
.stat .v { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.stat.bad .v { color: var(--accent); }

.err { max-width: 1000px; margin: 0 auto 16px; color: var(--accent); }
.empty { max-width: 1000px; margin: 0 auto; color: var(--ink-2); }
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 4px; padding: .1em .4em;
}

.messages {
  max-width: 1000px; margin: 0 auto; width: 100%;
  border-collapse: collapse; background: var(--surface);
  border: 1px solid var(--rule); border-radius: 8px; overflow: hidden;
}
.messages th, .messages td {
  padding: 9px 14px; text-align: left; border-bottom: 1px solid var(--rule); vertical-align: top;
}
.messages thead th {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-2); font-weight: 600;
}
.messages tbody tr:last-child td { border-bottom: none; }
.c-id, .c-time, .c-src {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .84rem; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink-2);
}
.c-id { width: 1%; }
.body { word-break: break-word; }

footer {
  max-width: 1000px; margin: 28px auto 0; padding-top: 16px;
  border-top: 1px solid var(--rule); color: var(--ink-2); font-size: .85rem;
}