Chart Prompts

Restyle my chart in the "Budget Envelopes" style described below. Keep my data, chart type, title meaning and units; change only the presentation. Use the charting library this project already uses (plain SVG if there is none). If the library can't express a detail, draw it in a custom layer instead of dropping it. Measurements assume a 960 x 600 chart; scale them proportionally.

Mood: a warm, friendly budgeting app. Cream paper, soft sage progress bars with rounded ends, one clear coral warning color for overspending, simple outline icons and rounded type. Calm, never alarming.

Colors (use these exact values):
- Background: #FBF6EC. Row dividers: #EDE4D3, 1px.
- Spent (within budget): #7FA886. Budget track: #E4EBDD. Overspent portion and over-budget figures: #E8765E.
- Text: #34302A (names, spent figures, budget tick), #8F877A (subtitle, budget figures, "left" figures, axis labels).
- Icon badges: #FFFFFF circles with a 1.5px #DCE6D6 ring, or #F3C3B6 for rows that are over budget.

Typography (Google Fonts): Quicksand throughout, tabular figures for numbers.
- Title 21px 700. Subtitle 13.5px 500. Legend 12.5px 600. Column headers 10.5px 700 uppercase, letter-spacing 1px. Category names 15px 600. Spent figure 15px 700, "/ budget" 15px 500. Left/over figure 13px 600. Axis labels 11px 600. Footnote 11.5px 500.

Layout:
- 48px side margins. Title states the finding (for example how many categories ran over and the net result), subtitle gives the measure, unit, month and "spent of budget" total.
- A legend row (Spent, Budget left, Over budget, Budget tick) under the subtitle, with the column headers "SPENT / BUDGET" and "LEFT" right-aligned on the same baseline.
- One row per category, 44px tall: a 32px icon badge at left, category name 28px after its center, bar starting at x=250, the spent/budget figure right-aligned at x=790 and the left/over figure right-aligned at x=912.

Axes and grid:
- No gridlines or axis line. A single row of dollar tick labels under the last row ($0 to the max) in #8F877A. All bars share one scale that starts at zero.

Marks:
- Bar chart: each row is a 14px fully rounded #E4EBDD track as long as the budget, with the spent amount drawn over it in #7FA886 (fully rounded). If spent exceeds budget, the bar continues past the budget in #E8765E with a straight seam at the budget point. A 2px #34302A budget tick 24px tall with round caps marks the budget on every row. Spent figures of over-budget rows turn #E8765E, and the right column says "$N over" in #E8765E instead of "$N left".
- Line chart: a 3px #7FA886 line of cumulative spending with round joins, a dashed 2px #34302A budget line, and the segment above the budget recolored #E8765E, over a #E4EBDD band showing the budget pace; label the end values directly.

Icons: simple 1.6px outline pictograms in #34302A, about 16px, centered in each badge (basket, cutlery, car, bolt, bag, cross, ticket, gift and so on), round caps and joins, no fills.

Avoid: red-green alarm palettes, gradients, drop shadows, bars that don't start at zero, filled or multicolor icons, and sharp bar ends.

When you're done, render the chart and check that "left" plus "spent" equals budget on every row, the title's counts and totals are arithmetically true, every budget tick lines up with the budget value, and the coral appears only where spending exceeds budget.