.ledger-page { display: flex; flex-direction: column; gap: 12px; padding: 0; background: transparent; border-radius: 0; }
.ledger-page .page-header { margin-inline: 4px; }
.ledger-header-actions { display: flex; align-items: center; gap: 7px; }
.ledger-view-switch { display: flex; gap: 2px; padding: 3px; border-radius: 14px; background: #e9e9ed; }
.ledger-view-switch button { min-width: 36px; border: 0; border-radius: 11px; padding: 6px 8px; background: transparent; color: var(--color-muted); cursor: pointer; font-size: var(--fs-caption); transition: background .28s ease, color .28s ease, box-shadow .28s ease, transform .28s ease; }
.ledger-view-switch button.is-active { background: #fff; color: var(--color-text); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.ledger-header-action { border: 1px solid var(--color-border); border-radius: 14px; width: 38px; height: 32px; background: var(--color-surface); color: var(--color-muted); cursor: pointer; transition: background .28s ease, color .28s ease, border-color .28s ease, transform .28s ease, box-shadow .28s ease; }
.ledger-header-action:hover { border-color: var(--color-accent); background: var(--accent-bg); color: var(--color-accent); transform: translateY(-2px); box-shadow: 0 6px 12px rgba(35,35,42,.12); }
.ledger-year-toggle.is-current { border-color: var(--color-accent); background: var(--color-accent); color: #fff; box-shadow: 0 5px 12px rgba(35,35,42,.14); }
.ledger-year-focus { display: inline-block; margin-top: 7px; padding: 3px 8px; border-radius: 999px; color: var(--color-muted); font-size: var(--fs-caption); transition: background .2s ease, color .2s ease, transform .2s ease; }
.ledger-year-focus.is-current { background: var(--color-accent); color: #fff; transform: translateY(-1px); }
.ledger-year-page { min-height: calc(100vh - 104px); overflow: hidden; animation: ledger-view-in .34s cubic-bezier(.22,.61,.36,1) both; }
@keyframes ledger-view-in { from { opacity: .35; transform: translateX(28px); } to { opacity: 1; transform: translateX(0); } }
.ledger-year-grid { display: grid; gap: 8px; max-height: calc(100vh - 350px); overflow-y: auto; padding: 5px 2px 5px 0; scroll-behavior: smooth; }
.ledger-annual-card { display: flex; flex-direction: column; gap: 18px; padding: 18px; background: #fff; border-radius: 24px; }
.ledger-annual-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ledger-annual-card__head > div:first-child { display: flex; flex-direction: column; gap: 6px; }
.ledger-annual-card__head span, .ledger-annual-card__stats span { color: var(--color-muted); font-size: var(--fs-caption); }
.ledger-annual-card__head strong { color: var(--color-accent); font-size: var(--fs-display); font-weight: 750; letter-spacing: -.8px; line-height: 1; }
.ledger-annual-card__badge { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 58px; min-height: 58px; border-radius: 18px; background: var(--accent-bg); color: var(--color-accent); font-size: var(--fs-title); font-weight: 750; line-height: 1; }
.ledger-annual-card__badge small { margin-top: 5px; color: var(--color-muted); font-size: var(--fs-micro); font-weight: 500; white-space: nowrap; }
.ledger-annual-card__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ledger-annual-card__stats > div { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 10px; border-radius: 14px; background: #f7f7f8; }
.ledger-annual-card__stats b { overflow: hidden; color: var(--color-text); font-size: var(--fs-body); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.ledger-year-month { padding: 13px; border-radius: 24px; background: rgba(255,255,255,.82); cursor: pointer; transition: background .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease; }
.ledger-year-month:hover, .ledger-year-month:focus-visible { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(35,35,42,.11); }
.ledger-year-month.is-current-month { border-color: rgba(42,39,36,.1); background: #fff; box-shadow: 0 8px 20px rgba(35,35,42,.12); transform: translateY(-2px); }
.ledger-year-month.is-current-month:hover, .ledger-year-month.is-current-month:focus-visible { transform: translateY(-5px); box-shadow: 0 13px 27px rgba(35,35,42,.16); }
.ledger-year-month > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ledger-year-month strong { font-size: var(--fs-heading); font-weight: 500; }
.ledger-year-month.is-current-month strong { color: var(--color-accent); font-weight: 750; }
.ledger-year-month.is-current-month > div:first-child span { color: var(--color-accent); font-weight: 650; }
.ledger-year-month span { color: var(--color-muted); font-size: var(--fs-caption); }
.ledger-year-bar { height: 5px; margin-top: 11px; overflow: hidden; border-radius: 5px; background: var(--accent-bg); }
.ledger-year-bar i { display: block; height: 100%; border-radius: inherit; background: var(--color-accent); }
.ledger-overview { display: flex; flex-direction: column; gap: 14px; padding: 15px; background: #fff; }
.ledger-overview__figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.ledger-overview__figures > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ledger-overview__figures > div + div { padding-left: 18px; border-left: 1px solid #f0f0f2; }
.ledger-overview__figures span { color: var(--color-muted); font-size: var(--fs-caption); }
.ledger-overview__figures strong { color: var(--color-accent); font-size: var(--fs-title); font-weight: 700; line-height: 1.1; overflow-wrap: anywhere; }
.ledger-overview__figures > div + div strong { color: var(--color-text); }
.ledger-overview__figures small { color: var(--color-muted); font-size: var(--fs-caption); }
.ledger-overview__progress { padding-top: 12px; border-top: 1px solid #f0f0f2; }
.ledger-budget-panel__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--color-muted); font-size: var(--fs-caption); }
.ledger-budget-panel__head b { color: var(--color-accent); font-size: var(--fs-body); }
.budget-track { height: 8px; margin-top: 10px; overflow: hidden; border-radius: 99px; background: #f0e5e4; }
.budget-track__fill { height: 100%; min-width: 0; border-radius: inherit; background: var(--color-accent); transition: width .25s ease; }
.ledger-subline { display: flex; justify-content: space-between; align-items: center; color: var(--color-muted); font-size: var(--fs-caption); }
.ledger-button { width: 100%; border: 0; border-radius: 10px; padding: 12px; background: var(--color-accent); color: #fff; cursor: pointer; font-weight: 600; }
.ledger-section-title { display: flex; justify-content: space-between; align-items: center; margin: 4px 0 -3px; }
.ledger-section-title strong { font-size: var(--fs-heading); font-weight: 600; }
.ledger-section-title span { color: var(--color-muted); font-size: var(--fs-caption); }
.expense-ledger { display: flex; flex-direction: column; gap: 9px; }
.expense-week { overflow: hidden; padding: 0; background: #fff; }
.expense-week__summary { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px; cursor: pointer; list-style: none; }
.expense-week__summary::-webkit-details-marker, .expense-day summary::-webkit-details-marker { display: none; }
.expense-week__summary::before, .expense-day summary::before { content: '⌄'; color: var(--color-muted); font-size: var(--fs-body); transition: transform .2s ease; }
.expense-week:not([open]) .expense-week__summary::before, .expense-day:not([open]) summary::before { transform: rotate(-90deg); }
.expense-week__summary > span { display: flex; flex-direction: column; gap: 3px; margin-right: auto; }
.expense-week__summary strong { font-size: var(--fs-lead); }
.expense-week__summary small { color: var(--color-muted); font-size: var(--fs-caption); }
.expense-week__summary > b { color: var(--color-accent); font-size: var(--fs-lead); }
.expense-week__days { padding: 0 12px 10px; border-top: 1px solid #f0f0f2; }
.expense-day { border-bottom: 1px solid #f0f0f2; }
.expense-day:last-child { border-bottom: 0; }
.expense-day summary { display: flex; align-items: center; gap: 8px; padding: 11px 0 8px; cursor: pointer; list-style: none; font-size: var(--fs-caption); }
.expense-day summary span { margin-right: auto; font-weight: 650; }
.expense-day summary b { color: var(--color-muted); font-size: var(--fs-caption); font-weight: 600; }
.expense-day__rows { padding: 0 0 4px 20px; }
.expense-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f0f0f2; cursor: pointer; }
.expense-row:last-child { border-bottom: 0; }
.expense-row__name { font-size: var(--fs-body); }
.expense-row__meta { margin-top: 3px; color: var(--color-muted); font-size: var(--fs-caption); }
.expense-row__amount { color: var(--accent); font-size: var(--fs-body); font-weight: 600; white-space: nowrap; }
.ledger-stat { padding: 14px; background: #fff; }
.ledger-stat__title { display: flex; justify-content: space-between; align-items: center; color: var(--color-text); font-size: var(--fs-body); font-weight: 650; }
.ledger-stat__title small { color: var(--color-muted); font-size: var(--fs-caption); font-weight: 400; }
.ledger-category-list { display: flex; flex-direction: column; gap: 11px; padding-top: 13px; }
.ledger-category-row__head { display: flex; justify-content: space-between; color: var(--color-muted); font-size: var(--fs-caption); }
.ledger-category-row__head b { color: var(--color-text); font-size: var(--fs-caption); }
.ledger-category-track { height: 5px; margin-top: 5px; overflow: hidden; border-radius: 99px; background: #f1eded; }
.ledger-category-track i { display: block; height: 100%; border-radius: inherit; background: var(--accent-soft); }
.ledger-category-empty { padding: 10px 0 2px; color: var(--color-muted); font-size: var(--fs-caption); }

.modal-backdrop { position: fixed; z-index: 20; inset: 0; display: grid; place-items: end center; background: rgba(0,0,0,.25); }
.modal { width: min(100%, 420px); padding: 18px 16px 24px; background: var(--color-surface); border-radius: 22px 22px 0 0; }
.modal__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.modal__header strong { font-size: var(--fs-heading); }
.modal__close { border: 0; background: none; color: var(--color-muted); cursor: pointer; font-size: var(--fs-heading); }
.form-grid { display: grid; gap: 12px; }
.form-field { display: grid; gap: 6px; color: var(--color-muted); font-size: var(--fs-caption); }
.form-field input, .form-field select { width: 100%; border: 1px solid var(--color-border-strong); border-radius: 10px; padding: 11px; background: #fff; color: var(--color-text); font: inherit; }
.form-actions { display: flex; gap: 8px; margin-top: 4px; }
.form-actions button { flex: 1; border: 0; border-radius: 10px; padding: 11px; cursor: pointer; }
.form-actions .secondary { background: #f2f2f7; color: var(--color-text); }
.form-actions .primary { background: var(--color-accent); color: #fff; }
.empty-state { padding: 18px 10px; color: var(--color-muted); text-align: center; font-size: var(--fs-body); }