.spending-card,.spending-report { container-type:inline-size; container-name:spending; }
.spending-card .cardtop { margin-bottom:16px; }
.spending-amount { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.spending-amount>strong { font-size:var(--type-total); font-weight:var(--weight-bold); line-height:1.4; font-variant-numeric:tabular-nums; }
.spending-amount>span,.spending-period { color:var(--text-sub); font-size:var(--type-caption); }
.spending-comparison { color:var(--text-sub); margin:8px 0 0; font-size:var(--type-note); line-height:1.6; }
.spending-card .spending-link { margin-top:16px; width:100%; justify-content:space-between; display:flex; align-items:center; text-align:left; gap:10px; border:0; border-top:1px solid var(--border); padding:14px 0 0; min-height:44px; background:transparent; color:var(--text); font:inherit; }
.budget-track { height:7px; border-radius:8px; overflow:hidden; background:var(--neutral-soft); margin:12px 0; }
.budget-track>span { display:block; height:100%; background:var(--income-bar); border-radius:inherit; }
.budget-track.is-over>span { background:var(--spend-bar); }
.budget-line { display:flex; justify-content:space-between; gap:12px; align-items:baseline; font-size:var(--type-note); line-height:1.6; }
.budget-line>span { color:var(--text-sub); }
.budget-line>strong { text-align:right; font-weight:600; font-variant-numeric:tabular-nums; }
.budget-onboarding { display:flex; justify-content:space-between; align-items:center; gap:12px; background:var(--neutral-soft); border-radius:12px; padding:14px; margin-top:16px; }
.budget-onboarding p { margin:0; font-size:var(--type-note); line-height:1.6; color:var(--text-sub); }
.budget-onboarding button { flex-shrink:0; }
.spending-planned { display:flex; flex-wrap:wrap; gap:6px 16px; color:var(--text-sub); font-size:var(--type-caption); padding:12px 0 0; line-height:1.6; }
.spending-report { display:grid; gap:24px; }
.spending-report h3 { font-size:var(--type-body); margin:0 0 12px; font-weight:600; }
.spending-report p { line-height:1.65; }
.report-flow { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:20px; }
.report-flow>div { padding:14px; border-radius:12px; background:var(--neutral-soft); min-width:0; }
.report-flow>div>span { display:block; font-size:var(--type-caption); color:var(--text-sub); margin-bottom:6px; }
.report-flow strong { font-size:var(--type-body); font-variant-numeric:tabular-nums; }
.report-list { list-style:none; padding:0; margin:0; }
.report-category { display:block; width:100%; padding:14px 0; background:transparent; border:0; border-bottom:1px solid var(--border); text-align:left; font:inherit; color:var(--text); }
.report-category>span { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.report-category strong { text-align:right; font-size:var(--type-label); font-variant-numeric:tabular-nums; }
.report-category small { display:block; color:var(--text-sub); font-size:var(--type-caption); margin-top:6px; line-height:1.6; }
.report-category .budget-track { margin:10px 0 4px; }
.report-category em { font-style:normal; color:var(--text-sub); font-size:var(--type-caption); font-weight:400; margin-left:5px; }
.report-bill { width:100%; display:flex; justify-content:space-between; align-items:center; gap:12px; border:0; border-bottom:1px solid var(--border); background:transparent; font:inherit; text-align:left; color:var(--text); padding:14px 0; }
.report-bill>span { min-width:0; }
.report-bill small { display:block; color:var(--text-sub); font-size:var(--type-caption); line-height:1.6; margin-top:5px; }
.report-bill strong { white-space:normal; text-align:right; font-size:var(--type-label); }
.report-bill.is-held small { color:var(--danger); }
.report-bill-overdue { display:block; font-weight:700; margin-bottom:3px; }
.report-note { color:var(--text-sub); font-size:var(--type-caption); margin:10px 0 0; }
.budget-editor .budget-total { font-size:1.5rem; font-weight:600; font-variant-numeric:tabular-nums; }
.budget-editor .budget-categories { border-top:1px solid var(--border); padding-top:16px; margin-top:8px; }
.budget-categories summary { cursor:pointer; min-height:44px; line-height:1.6; font-weight:600; }
.budget-category-field { display:grid; grid-template-columns:minmax(90px,1fr) minmax(0,1.35fr); align-items:center; gap:12px; margin:12px 0; }
.budget-category-field input { margin:0; width:100%; text-align:right; font-size:1rem; }
.budget-category-field>span { font-size:var(--type-label); font-weight:500; }
.budget-allocation { padding:12px 0; font-size:var(--type-note); color:var(--text-sub); line-height:1.6; }
.budget-allocation.is-invalid { color:var(--danger); }
.budget-tools { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; margin:12px 0; }
@container spending (max-width:17rem) {
 .spending-amount { flex-direction:column; gap:4px; }
 .report-flow { grid-template-columns:1fr; }
 .budget-line { flex-wrap:wrap; }
 .report-category>span { flex-wrap:wrap; }
}
@media (max-width:350px) { .budget-onboarding { align-items:flex-start; flex-direction:column; } .report-flow { gap:8px; } .report-flow>div { padding:12px; } }