/* A quieter surface, with stronger hierarchy for real ledger data. */
:root { --paper: #f2f6f5; --white: #fff; --line: #dce6e2; }
.ledger { background: radial-gradient(ellipse at 85% 0%, #dcefe8 0, transparent 44%), var(--paper); }
.panel, .budget-card { box-shadow: 0 3px 14px #143d3805; }
.balance-panel { background: radial-gradient(ellipse at 100% 0%, #1b8b77 0, transparent 70%), linear-gradient(125deg,#102e2b,#15594e); box-shadow: 0 12px 30px #0f554e1c; border: 1px solid #ffffff24; }
.balance-panel strong, .month-pulse strong, .available-amount strong { font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.month-shortcuts { display: flex; gap: 6px; justify-content: flex-end; margin: -8px 0 16px; }
.month-shortcuts button, .filter-tabs button { min-height: 44px; border: 1px solid transparent; border-radius: 10px; padding: 8px 12px; background: transparent; color: var(--deep); font-size: 14px; font-weight: 650; }
.month-shortcuts button:hover, .filter-tabs button:hover { background: #e1eee8; }
button:focus-visible, summary:focus-visible { outline: 2px solid #0f766e; outline-offset: 3px; }
.month-pulse { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.month-pulse article { display: grid; align-content: start; gap: 5px; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: #ffffffd9; min-width: 0; }
.month-pulse article.pulse-record { background: linear-gradient(130deg,#e4f4ed,#f8fffb); }
.month-pulse span { font-size: 14px; color: #475e55; }
.month-pulse strong { font-size: 26px; line-height: 1.3; overflow-wrap: anywhere; }
.month-pulse small { font-size: 12px; color: #52685f; }
.pulse-period { font-size: 12px; margin: 9px 2px 20px; }
.calendar-panel .panel-title { align-items: center; }
.calendar-panel .panel-title h2 { flex: 1 1 auto; }
.calendar-days { gap: 7px; }
.calendar-days .calendar-day { border: 1px solid transparent; border-radius: 12px; transition: background-color .15s, box-shadow .15s; }
.calendar-day[data-heat="0"] { background: #f3f7f5; }
.calendar-day[data-heat="1"] { background: #dcf0e6; color: #164537; }
.calendar-day[data-heat="2"] { background: #a8dbc8; color: #143b31; }
.calendar-day[data-heat="3"] { background: linear-gradient(135deg,#187c67,#0c584b); color: white; }
.calendar-days .calendar-day.today:not(.selected) { border-color: #0f766e; }
.calendar-days .calendar-day.selected { background: #143d38; color: white; box-shadow: 0 0 0 2px white,0 0 0 4px #27836d; }
.calendar-day[data-heat="3"] .recorded, .calendar-day.selected .recorded { background: #c1f7df; }
.heat-legend { display: inline-flex; gap: 3px; vertical-align: middle; }
.heat-legend i { width: 12px; height: 12px; border-radius: 3px; background: #dcf0e6; }
.heat-legend i:nth-child(2) { background: #a8dbc8; }
.heat-legend i:nth-child(3) { background: #187c67; }
#entry-scope { margin: 7px 0 0; font-size: 14px; }
.budget-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin: 20px 0 14px; }
.filter-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 14px; background: #e5eeea; }
.filter-tabs button[aria-pressed="true"] { background: white; border-color: #c6dcd2; box-shadow: 0 2px 5px #173e3010; }
#budget-results { color: var(--muted); font-size: 14px; }
.budget-card { min-width: 0; border-top: 3px solid #399e7b; }
.budget-card[data-tone="danger"] { border-top-color: #b94836; }
.budget-card[data-tone="warning"] { border-top-color: #b37d1b; }
.budget-card[data-tone="neutral"] { border-top-color: #9baaa4; }
.budget-card h3 { overflow-wrap: anywhere; margin-bottom: 9px; }
.budget-card-head > div { min-width: 0; }
.budget-card-head .danger-text { flex-shrink: 0; }
.budget-card-head .budget-status { display: table; width: fit-content; padding: 4px 9px; margin-bottom: 8px; border-radius: 8px; background: #e8f4ed; color: #1d6648; font-size: 12px; font-weight: 700; }
.budget-status[data-tone="danger"] { background: #ffebe6; color: #9b3526; }
.budget-status[data-tone="warning"] { background: #fff2d6; color: #825718; }
.budget-status[data-tone="neutral"] { background: #edf1ef; color: #55635d; }
.budget-planning { padding: 14px; background: linear-gradient(125deg,#f0f8f4,#e7f3ef); border-color: #d2e5da; border-radius: 14px; }
.available-amount { border-top: 1px solid #d2e5da; padding-top: 12px; }
.available-amount strong { font-size: 23px; color: #154f3d; overflow-wrap: anywhere; }
.budget-card[data-tone="danger"] .available-amount strong { color: #9b3526; }
.annual-panel { margin-top: 24px; }
.reserve-editor { margin-top: 20px; border: 1px solid var(--line); border-radius: 14px; padding: 0 14px; background: #f8fbf9; }
.reserve-editor > summary { min-height: 48px; padding: 12px 0; color: var(--deep); cursor: pointer; font-size: 16px; font-weight: 700; }
.reserve-editor[open] > summary { border-bottom: 1px solid var(--line); }
.annual-panel > details:not(.reserve-editor) > summary { min-height: 44px; padding: 10px 0; cursor: pointer; }
.account-card { grid-template-columns: 1fr; gap: 5px; background: #f0f6f3; }
.account-card strong { font-size: 20px; }
@media(min-width:721px) { .entry-row { grid-template-columns: 36px minmax(0,1fr) auto 44px 44px; gap: 10px; } .entry-row > [data-edit] { grid-column: 4; grid-row: 1; } .entry-row > [data-delete] { grid-column: 5; grid-row: 1; } }
@media(max-width:720px) {
  .page-heading { display: flex; flex-wrap: wrap; gap: 12px; }
  .page-heading > div { flex: 1; min-width: 150px; }
  .page-heading > .primary { flex-shrink: 0; align-self: flex-start; }
  .month-pulse { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
  .month-pulse article { padding: 13px; border-radius: 14px; }
  .month-pulse article:last-child { grid-column: 1 / -1; grid-template-columns: 1fr auto; align-items: center; }
  .month-pulse article:last-child small { grid-column: 1 / -1; }
  .month-pulse strong { font-size: 23px; }
  .month-shortcuts { margin: -3px 0 10px; justify-content: space-between; }
  .calendar-days { gap: 6px; }
  .calendar-panel .muted { font-size: 12px; }
  .budget-toolbar { margin-top: 16px; }
  .filter-tabs { width: 100%; }
  .filter-tabs button { flex: 1; padding-inline: 7px; }
  .annual-panel { margin-top: 18px; }
  .balance-panel { grid-template-columns: 1fr 1fr; }
  .balance-panel label { grid-column: 1 / -1; }
}
@media(prefers-reduced-motion:reduce) { .calendar-days .calendar-day { transition: none; } }