Chart Prompts

Restyle my chart in the "Cost Explorer" 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: the cost explorer page of a cloud billing console. White, orderly and businesslike: a row of filter chips, four clear service colors, a dashed budget line and a totals column that answers "where did the money go".

Colors (use these exact values):
- Background: #FFFFFF.
- Categories, always in this order (bottom of the stack to top, and top to bottom in the legend): #3A6FD8 (blue, compute or the largest category), #2FA59A (teal, storage), #7D5BD0 (violet, database), #E0A53A (amber, network). A fifth category would be #8E96A4 gray labeled "Other".
- Budget line and its label: #1B2233. Over-budget dots and text: #C8402F.
- Ink #1B2233, secondary text #5D6677, faint labels #8E96A4, gridlines and rules #EDEFF3, baseline #C9CED8, chip fill #F3F5F9 with a #DCE0E7 border.

Typography (Google Fonts):
- DM Sans everywhere, tabular figures.
- Breadcrumb 13px ("Billing / Cost explorer", the current page 700 #1B2233, the rest 500 #8E96A4) with the account name 13px 600 #5D6677 at the right.
- Title 25px 700, -0.5px letter-spacing, stating the finding in numbers. Subtitle 14px #5D6677 with measure, currency, granularity and dates.
- Chips: key 12px 400 #5D6677 then value 12px 700 #1B2233. Axis labels 12px #8E96A4. Totals: eyebrow 11px 700 uppercase 1.2px letter-spacing, big total 30px 700 -0.6px letter-spacing, category names and amounts 13px 700, shares 12px #8E96A4.

Layout:
- 44px side margins. Breadcrumb row at the top above a 1px #EDEFF3 rule, then title and subtitle.
- Filter chip row under the subtitle: pills 28px tall with 14px radius, "Key: Value" text and a small 1.3px gray x at the right, 8px apart, ending in a blue "+ Add filter" text link (#3A6FD8, 12px 700). Use only as many chips as fit: the whole row, link included, must end inside the right margin.
- Plot on the left two thirds (about 610px wide). A right column after a 1px vertical #EDEFF3 rule: "30-DAY TOTAL" eyebrow, the big total, an average-per-day line, a 176px share bar (8px tall, the four colors in proportion with 2px gaps and 2px radius), then the legend as a list: 10px rounded swatch, category name, amount right-aligned, share of spend under it. Finish with a red dot and "Over budget: N days".
- Footer rule and "Source: ..." left, a short note right.

Axes and grid:
- Horizontal gridlines only, 1px #EDEFF3; y labels in compact currency ("$4k") right-aligned 12px left of the plot; baseline 1px #C9CED8.
- X labels every 7 days ("Aug 28"), each with a 5px tick, centered on its bar.

Marks:
- Bar chart: stacked vertical bars, one per period, about 50% of the band (13px at 30 bars), segments separated by a 1px white seam, only the top segment gets a 2.5px top radius. A 2.5px #C8402F dot 8px above any bar whose total exceeds the budget.
- Line chart: one 2px line per category in the same four colors (or stacked areas at 85% opacity with 1px white seams if the data is a composition), 3px end dots, with the budget as the same dashed line.
- Budget: 1.5px #1B2233 line dashed 6 on 4 across the plot, labeled "Daily budget $4,200" in 12px 700 at its left end on a white knockout rect.

Labels and annotation:
- One short gray (#5D6677, 12px 600) note next to a notable spike, such as "Quarter-end batch". No value labels on individual segments.

Avoid: 3D, gradients, shadows, more than five categories, rounded corners on inner segments, a secondary axis and category colors outside the list above.

When you're done, render the chart and check that the segment order matches the legend, the chip text fits inside each pill, the over-budget count in the title equals the number of red dots, and the totals column sums correctly.