:root { color-scheme: light; font: 16px/1.5 Inter, ui-sans-serif, system-ui, sans-serif; color: #18251f; background: #f4f6f2; }
* { box-sizing: border-box; }
body { margin: 0; }
main { width: min(1120px, calc(100% - 32px)); margin: 0 auto; padding: 48px 0; }
header, .toolbar, .panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
h1 { margin: 0; font-size: clamp(2rem, 5vw, 4rem); letter-spacing: -.05em; }
h2 { margin: 0; }
.eyebrow { margin: 0 0 8px; color: #2f6b4f; font-weight: 750; text-transform: uppercase; letter-spacing: .12em; font-size: .75rem; }
.muted { color: #68736d; }
.actions { display: flex; align-items: center; gap: 12px; }
button, select, input, textarea { font: inherit; border: 1px solid #c9d1cc; border-radius: 10px; padding: 10px 14px; background: white; }
textarea { resize: vertical; }
button { cursor: pointer; border-color: #174b36; background: #174b36; color: white; font-weight: 700; }
button.secondary { color: #174b36; background: white; }
.toolbar { margin: 40px 0 20px; justify-content: flex-start; flex-wrap: wrap; }
.toolbar label { display: grid; gap: 5px; color: #68736d; font-size: .85rem; }
.toolbar #export { margin-left: auto; align-self: end; }
.month-control { display: flex; gap: 6px; }
.month-control input { min-width: 170px; }
.icon-button { padding-inline: 12px; }
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.cards article, .panel, .empty { background: white; border: 1px solid #dfe5e0; border-radius: 16px; padding: 22px; box-shadow: 0 6px 24px rgb(24 37 31 / 5%); }
.cards span { display: block; color: #68736d; font-size: .85rem; }
.cards strong { display: block; margin-top: 8px; font-size: 2rem; }
.panel { margin-top: 14px; overflow: auto; }
.badge { background: #e6f3eb; color: #174b36; border-radius: 999px; padding: 5px 10px; font-size: .8rem; font-weight: 700; white-space: nowrap; }
table { width: 100%; border-collapse: collapse; margin-top: 20px; }
th, td { text-align: left; padding: 12px 8px; border-bottom: 1px solid #e8ece9; }
th { color: #68736d; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
td:last-child { font-family: ui-monospace, monospace; font-size: .8rem; }
.error { margin-top: 20px; padding: 14px; border-radius: 10px; color: #8b1e1e; background: #fdecec; }
.admin-form { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(280px, 2fr) auto; gap: 14px; align-items: end; margin-top: 20px; }
.admin-form label { display: grid; gap: 5px; color: #68736d; font-size: .85rem; }
.admin-form button { align-self: end; }
.form-note { margin-bottom: 0; }
.notice { margin: 14px 0 0; padding: 12px 14px; border-radius: 10px; background: #e6f3eb; color: #174b36; }
@media (max-width: 760px) { header { align-items: flex-start; flex-direction: column; } .cards { grid-template-columns: 1fr 1fr; } .actions { flex-wrap: wrap; } }
@media (max-width: 760px) { .admin-form { grid-template-columns: 1fr; } }
@media (max-width: 440px) { .cards { grid-template-columns: 1fr; } .toolbar #export { margin-left: 0; } }