:root { color-scheme: light dark; font-family: system-ui, sans-serif; }
body { margin: 0; }
main, header nav { max-width: 60rem; margin: 0 auto; padding: 1rem; }
header { border-bottom: 1px solid currentColor; }
nav { display: flex; gap: 1rem; align-items: center; }
nav form { margin: 0; }
.spacer { flex: 1; }
.brand { font-weight: bold; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .5rem; border-bottom: 1px solid color-mix(in srgb, currentColor 25%, transparent); }
.actions { display: flex; gap: .75rem; align-items: center; }
.actions form { margin: 0; }
.field { margin-bottom: 1rem; }
.field label, .field input { display: block; }
.field input { width: 100%; max-width: 24rem; padding: .4rem; box-sizing: border-box; }
.filters { display: flex; gap: .5rem; margin-bottom: 1rem; }
.flash { padding: .5rem 1rem; border: 1px solid currentColor; }
.errors { color: #b00020; }
.pagination { display: flex; gap: 1rem; margin-top: 1rem; }
details > div { padding: .25rem 0; }
.entry-buttons { max-width: 60rem; margin: 0 auto; padding: 1rem; flex-wrap: wrap; }
.positive { color: #1b7f3b; }
.negative { color: #b00020; }
.numeric { text-align: right; }
tfoot th, tfoot td { font-weight: bold; }