Chart Prompts

Restyle my chart in the "Spend Cube" 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 sourcing analytics workspace inside a procurement tool. Clean, white and product-like: filter chips across the top, calm teal data, one warm orange signal for the problem that needs action.

Colors (use these exact values):
- Canvas: #FFFFFF. Chips: #F8FAFC fill with a 1px #E2E8F0 border; the active chip #F0FDFA fill with a 1px #0F766E border.
- Primary measure: #0F766E (deep teal). Secondary measure (share covered, a part of the primary): #99F6E4 (pale teal), its small percent label #0D9488.
- Alert badges: #EA580C (orange) border and text on #FFF1E7; badges over the alert threshold are solid #EA580C with white text. The row they flag gets a #FFF7F0 highlight band.
- Ink #0F172A, secondary text #475569, muted labels #94A3B8, dividers and dotted gridlines #E2E8F0.

Typography (Google Fonts):
- Sora 700 for the title: 26px, -0.4px letter-spacing, #0F172A, stating the finding.
- Mulish for everything else: eyebrow 11.5px 800 uppercase with 1.6px letter-spacing in #475569; subtitle 15px #475569 with measure, unit, period and total; chip text 12px (#94A3B8 field name, 700 value in ink); category labels 14px 600 right-aligned (800 for the flagged row); value labels 13px 700 teal; badge text 12.5px 800; axis ticks 12px #94A3B8; source 12px.

Layout:
- 40px side margins. A 22px rounded (5px) teal app tile with a tiny white bar-chart glyph, then the eyebrow ("SPEND CUBE / ORGANIZATION"). A compact legend sits right-aligned on the eyebrow line.
- Title at y 96, subtitle at y 122, then a row of filter chips at y 142: pill-shaped (28px tall, 14px radius), each "Field: Value" plus a small chevron, 8px apart, one of them active in teal.
- A 1px #E2E8F0 divider at y 190, then the chart. A second divider above the footer with the source at left and a one-line note on the badge rule at right.

Axes and grid:
- Horizontal layout: category labels right-aligned at x 200, bars start at x 214 from a 1.2px #475569 baseline.
- Vertical dotted gridlines (1px #E2E8F0, 2 on 3 off) at each tick; tick labels ("$0", "$10M"...) 20px below the last row. An "OFF-CONTRACT" 10px 800 caption with 1.2px letter-spacing heads the badge column.

Marks:
- Bar chart: one row per category on a 38px pitch. The main bar is 17px tall, solid #0F766E with 3px rounded right corners, value label 8px past its end. Directly under it (5px gap) a 6px #99F6E4 bar, fully rounded, whose length is the covered share of the main bar, labeled with its percent 6px past its end. At the far right (x 848 to 904) a 56 x 22 px pill badge shows the uncovered percent; filled orange when it crosses the threshold (40%).
- Line chart: one 2.5px #0F766E line per series with 5px dots, the covered share as a 2px #99F6E4 line under it, and orange pill badges at each line's right end showing the gap. Keep the chip bar and highlight band the same.

Labels and annotation:
- Highlight the row with the largest uncovered amount with a full-width #FFF7F0 band (6px radius) and bold its label; the title should name it with the computed amount.

Avoid: gradients, shadows, dark backgrounds, more than one warm color, heavy axis lines, and legends that repeat what direct labels already say.

When you're done, render the chart and check that the chips do not collide with the legend, every pale bar is exactly the covered share of its teal bar, badge percentages equal 100 minus coverage, and the title's amount is spend times uncovered share for the highlighted row.