:root {
  color-scheme: light;
  font-family: "Segoe UI", sans-serif;
  background: #f4f1ea;
  color: #1c1915;
}
body { margin: 0; }
header, main { max-width: 1100px; margin: 0 auto; padding: 1rem 1.25rem; }
header { display: flex; justify-content: space-between; align-items: center; }
nav { display: flex; gap: 1rem; align-items: center; }
nav a { color: #1c1915; }
button, input, select, textarea { font: inherit; }
button { background: #1c1915; color: #f4f1ea; border: 0; padding: 0.4rem 0.8rem; cursor: pointer; }
table { width: 100%; border-collapse: collapse; background: #fff; }
th, td { text-align: left; padding: 0.35rem 0.5rem; border-bottom: 1px solid #e4ddd0; vertical-align: top; }
tr.hit { background: #fffdf8; }
.card { background: #fff; padding: 1rem; margin: 1rem 0; }
.narrow { max-width: 28rem; }
.numbers { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.5rem; }
.numbers div { background: #fff; padding: 0.6rem 0.8rem; }
.numbers span { display: block; font-size: 0.8rem; color: #5c564c; }
.lead, .note { color: #3d3832; }
.messages { list-style: none; padding: 0; }
.messages li { background: #e7f0e4; padding: 0.5rem 0.75rem; margin: 0.3rem 0; }
.messages .error { background: #f8e4e0; }
small { color: #6b645b; }
form.pay p { margin: 0.4rem 0; }
form.month { display: flex; gap: 0.5rem; align-items: end; }