:root {
  --ink: #262a35; --muted: #5b6270; --bg: #edeff3; --panel: #ffffff;
  --line: #d3d7df; --head: #5c1220; --accent: #a3182f; --warn: #fff4d6;
}
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.55 "Segoe UI", system-ui, sans-serif; color: var(--ink); background: var(--bg); }
header { background: var(--head); color: #fff; padding: 0.9rem 1.5rem; display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }
header h1 { font-size: 1.15rem; margin: 0; font-weight: 600; }
header nav { display: flex; gap: 1.25rem; flex: 1; }
header a { color: #f3d9dd; text-decoration: none; }
header a:hover { color: #fff; text-decoration: underline; }
main { max-width: 56rem; margin: 2rem auto; padding: 0 1.25rem; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 1.25rem 1.5rem; margin-bottom: 1.25rem; }
h2 { margin: 0 0 0.5rem; font-size: 1.2rem; }
.notice { background: var(--warn); border-left: 4px solid #d9a400; }
.muted { color: var(--muted); }
table { width: 100%; border-collapse: collapse; }
td, th { text-align: left; padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
.login { max-width: 22rem; margin: 6rem auto; }
label { display: block; margin-top: 0.9rem; font-weight: 600; }
input { width: 100%; padding: 0.55rem; margin-top: 0.3rem; border: 1px solid #9aa1ae; border-radius: 3px; font: inherit; }
button { margin-top: 1.2rem; padding: 0.6rem 1.2rem; background: var(--accent); color: #fff; border: 0; border-radius: 3px; font: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid #1a5fd0; outline-offset: 2px; }
.error { color: #9b1021; margin: 0.8rem 0 0; }
pre { background: #f6f7f9; border: 1px solid var(--line); padding: 0.75rem; white-space: pre-wrap; border-radius: 3px; }
select { padding: 0.5rem; font: inherit; }
.filters { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: flex-end; }
.filters label { margin-top: 0; }
.filters button { margin-top: 0; }
.add { background: #e3f5e6; } .del { background: #fbe4e4; } .ctx { color: var(--muted); }
.diff div { font-family: ui-monospace, Consolas, monospace; white-space: pre-wrap; padding: 0.15rem 0.5rem; }
.num { text-align: right; }
.scroll td, .scroll th { padding-right: 1rem; }
.scroll td:last-child, .scroll th:last-child { padding-right: 0; }
@media (max-width: 40rem) { .scroll { overflow-x: auto; } header nav { flex-wrap: wrap; } }