:root { --ink: #161412; --paper: #f6f1e8; --red: #c8102e; --line: #e4d8c8; }
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; background: var(--paper); color: var(--ink); }
header, section { width: min(980px, calc(100% - 32px)); margin: 20px auto; }
header { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
form, .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
input, button { font: inherit; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); }
button { background: var(--red); color: #fff; border: 0; cursor: pointer; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.stat, .item { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.item { margin: 8px 0; }
.muted { color: #6d655c; }
@media (max-width: 700px) { .stats { grid-template-columns: 1fr 1fr; } }