:is(#surface-view,.surface-snapshot)[data-surface="spending"]{--page:#f4f0df;--surface:#fffdf3;--ink:#20382f;--muted:#587066;--line:#c9d2c6;--bar:#2f7d5f;max-width:720px;background:var(--page);color:var(--ink)}
:where(html[data-theme="dark"]) :is(#surface-view,.surface-snapshot)[data-surface="spending"]{--page:#17231f;--surface:#22312b;--ink:#eef6ef;--muted:#b8c9c0;--line:#4a5f56;--bar:#79cba9}
.spending{padding:4px;min-width:0;background:var(--page);color:var(--ink)}
.spending h1{font-size:18px;margin:0 0 12px}
.spending h2{font-size:13px;font-weight:600;margin:20px 0 8px;color:var(--muted)}
.spending [data-status],.spend-basis{color:var(--muted);font-size:13px}
.spend-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 8px}
.spend-tile{display:grid;gap:2px;min-width:0;color:var(--ink)}
.spend-tile span{font-size:12px;color:var(--muted)}
.spend-tile strong{font-size:15px;font-variant-numeric:tabular-nums;white-space:nowrap}
.spend-hero{grid-column:1/-1;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.spend-hero strong{font-size:34px;line-height:1.1}
.spend-readout{margin:18px 0 6px;font-size:13px;color:var(--ink);font-variant-numeric:tabular-nums}
.spend-bars{display:flex;align-items:stretch;gap:2px;height:120px;border-bottom:1px solid var(--line)}
.spend-bar{flex:1 1 0;min-width:0;padding:0;border:0;background:transparent;display:flex;align-items:flex-end;cursor:pointer}
.spend-bar span{display:block;width:100%;border-radius:4px 4px 0 0;background:var(--bar)}
.spend-bar[aria-pressed="true"] span{background:var(--ink)}
.spend-bar:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.spend-rank{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.spend-rank-head{display:flex;justify-content:space-between;gap:12px;font-size:14px}
.spend-rank-head :first-child{min-width:0;overflow-wrap:anywhere;color:var(--ink)}
.spend-rank-head strong{font-variant-numeric:tabular-nums;white-space:nowrap}
.spend-meter{height:4px;margin-top:4px;border-radius:2px;background:var(--line)}
.spend-meter span{display:block;height:100%;border-radius:2px;background:var(--bar)}
.spend-basis{margin:20px 0 0}