/* Budget: paper envelopes. Each category is an envelope whose bar fills as the month's money is spent,
   and turns red when it is overspent. Calm green-grey page, one deep green for actions. */
:root { --page: #f2f4f1; --card: #ffffff; --ink: #18211c; --soft: #58645d; --line: #d5dcd6; --field: #eef1ee; --act: #17694a; --on-act: #ffffff; --stop: #b3261e; --wide: 620px; color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --page: #121512; --card: #1b201c; --ink: #edf2ee; --soft: #a2aea6; --line: #2e3731; --field: #121512; --act: #6fd0a6; --on-act: #0b1f16; --stop: #ff8a80; color-scheme: dark; }
}
.top { justify-content: space-between; align-items: center; }
.month { display: flex; align-items: center; gap: 10px; }
.month b { min-width: 9.5em; text-align: center; }
.envelopes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.envelopes li { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: grid; gap: 8px; }
.env-head, .env-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.env-head b { font-size: 18px; overflow-wrap: anywhere; }
.env-head span { font-weight: 700; white-space: nowrap; }
.bar { height: 12px; border-radius: 6px; background: var(--field); border: 1px solid var(--line); overflow: hidden; }
.fill { display: block; height: 100%; background: var(--act); border-radius: 6px 0 0 6px; }
.over .fill { background: var(--stop); } .over .env-head span { color: var(--stop); }
.list small { color: var(--soft); font-size: 14px; }
form.card > button { justify-self: start; }
@media (max-width: 480px) { .top { align-items: flex-start; flex-direction: column; } form.card > button, #cat-form button { width: 100%; } }