.retirement-journey { margin: 24px 0; padding: clamp(18px, 3vw, 30px); border: 1px solid var(--line, #dce5df); border-radius: 22px; background: var(--surface, #f2f7f3); }
.retirement-milestones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; list-style: none; padding: 0; margin: 24px 0; }
.retirement-milestones li { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 16px; border: 1px solid var(--line, #dce5df); }
.retirement-milestones .is-reached { border-color: #458a75; background: #e0f0e8; color: #174d3e; }
.retirement-milestones strong { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.ownership-hero { border-top: 4px solid #458a75; border-radius: 22px; }
.ownership-hero .mortgage-metric-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.mortgage-card > summary { padding: 8px; font-weight: 600; cursor: pointer; }
.retirement-journey p { max-width: 70ch; line-height: 1.6; }
@media (max-width: 540px) { .retirement-milestones { grid-template-columns: repeat(2, 1fr); } }
.budget-recurring-meta { display: inline; font-size: .78rem; font-weight: 400; color: var(--muted, #63786e); white-space: normal; }
.budget-category-name { overflow-wrap: anywhere; }
.home-bills { margin-top: 24px; }
.home-bills-toolbar { display: flex; gap: 16px; flex-wrap: wrap; align-items: end; margin: 20px 0; }
.home-bills-toolbar label { display: grid; gap: 6px; }
.home-bills-table { overflow-x: auto; margin: 24px 0; }
.home-bills-table th:first-child { min-width: 160px; }
.home-bills-table td { min-width: 100px; }
.home-bills-table small { display: block; font-weight: normal; }
.home-bills-table button { display: block; margin: 4px 0; min-height: 44px; width: 100%; }
.budget-category-toggle:focus-visible, .month-switcher button:focus-visible, .retirement-tabs button:focus-visible { outline: 3px solid #458a75; outline-offset: 3px; }
.budget-row { border-radius: 16px; margin-bottom: 10px; }
.budget-category-toggle { min-height: 64px; }
[data-theme="dark"] .retirement-journey { background: #192b24; border-color: #365246; }
[data-theme="dark"] .retirement-milestones .is-reached { background: #234b3c; color: #d5f4e5; }
@media (max-width: 540px) {
  .budget-recurring-meta { display: inline; }
  .page-actions { gap: 8px; flex-wrap: wrap; }
  .page-actions .btn { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .retirement-progress-track span, .progress-bar, .accordion-collapse { transition: none !important; }
}