:root { --ink:#18251e; --muted:#64736a; --paper:#f6f7f2; --panel:#ffffff; --line:#dce3da; --green:#217a4d; --green-soft:#dcefe3; --orange:#d67531; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.4 Arial, sans-serif; }
.shell { max-width:1180px; margin:0 auto; padding:32px 24px 48px; }
.topbar { display:flex; justify-content:space-between; gap:24px; align-items:end; border-bottom:1px solid var(--line); padding-bottom:24px; }
.eyebrow { margin:0 0 6px; color:var(--green); font-size:12px; font-weight:700; letter-spacing:0; }
h1,h2,p { margin-top:0; } h1 { margin-bottom:6px; font-size:36px; letter-spacing:0; } h2 { margin-bottom:0; font-size:18px; }
.subtle,.section-heading span { color:var(--muted); font-size:13px; }
.summary small { color:var(--muted); font-size:12px; }
.summary { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin:24px 0; }
.summary article,.panel { background:var(--panel); border:1px solid var(--line); border-radius:7px; }
.summary article { padding:18px; min-height:106px; display:flex; flex-direction:column; justify-content:space-between; }
.summary span { color:var(--muted); font-size:13px; } .summary strong { font-size:23px; letter-spacing:0; }
.layout { margin-bottom:16px; }
.panel { padding:20px; }
.section-heading { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:18px; }
.bar-list { display:grid; gap:15px; }
.bar-row { display:grid; grid-template-columns:minmax(100px, 32%) 1fr auto; align-items:center; gap:10px; font-size:14px; }
.bar-label { display:grid; gap:1px; }.bar-label small { color:var(--muted); font-size:12px; }
.bar-track { height:10px; background:#eef2ed; border-radius:4px; overflow:hidden; }.bar-fill { height:100%; background:var(--green); border-radius:4px; }
.bar-value { font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.expense-list { list-style:none; padding:0; margin:0; display:grid; gap:0; }
.expense-list li { display:grid; grid-template-columns:28px 1fr auto; gap:9px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line); }.expense-list li:last-child { border-bottom:0; }
.rank { color:var(--green); font-weight:700; }.expense-name { font-size:14px; }.expense-meta { color:var(--muted); font-size:12px; }.expense-amount { font-weight:700; white-space:nowrap; font-size:14px; }
.all-expenses { margin-top:16px; }.expense-table { width:100%; border-collapse:collapse; font-size:14px; }.expense-table th { color:var(--muted); font-size:12px; font-weight:400; text-align:left; }.expense-table th,.expense-table td { padding:10px 8px; border-bottom:1px solid var(--line); vertical-align:top; }.expense-table th:first-child,.expense-table td:first-child { padding-left:0; white-space:nowrap; }.expense-table th:last-child,.expense-table td:last-child { padding-right:0; text-align:right; white-space:nowrap; font-weight:700; }
@media (max-width:760px) { .shell { padding:20px 14px 32px; }.topbar { align-items:stretch; flex-direction:column; } h1 { font-size:30px; }.summary { grid-template-columns:1fr 1fr; }.panel { padding:16px; }.expense-table th:nth-child(3),.expense-table td:nth-child(3) { display:none; }.expense-table th,.expense-table td { padding:10px 5px; } }
@media (max-width:460px) { .summary { grid-template-columns:1fr; }.layout { grid-template-columns:1fr; }.layout .panel:last-child { grid-column:auto; } }