Chart Prompts

Restyle my chart in the "Subscription Audit" 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 tidy dark app screen that ranks what you pay for. Deep ink green, soft mint bars, playful pastel letter avatars, and unused services quietly dimmed with an outlined tag so the savings jump out.

Colors (use these exact values):
- Background: #0F1F1A. Vertical gridlines: #1B2E28.
- Active bars and the big total: #8FE3BE. Unused bars: #3E524B. Unused tag outline and text: #C9A86A.
- Avatars, one per row in this order: #F6B8B8, #F9D69A, #BFE3A4, #9FD8E8, #B9C2F5, #E0B8F0, #F5C0DA, #A8E6CF, #FFD1A9, #C7D3F9, #E8E29A, letter in #0F1F1A. Unused rows flip it: #2A3B35 circle with the letter in the row's pastel.
- Text: #ECF5F0 (title, names, active figures), #86A095 (subtitle, unused names and figures, labels), #5F7870 (categories, axis labels, footnote).

Typography (Google Fonts): Wix Madefor Display only, tabular figures for numbers.
- Title 24px 700, letter-spacing -0.3px. Subtitle 13.5px 400. "TOTAL PER YEAR" 11px 600 uppercase, letter-spacing 1.4px. Total 42px 800, letter-spacing -1px, in #8FE3BE. Total sub-line 12.5px 500. Names 13.5px 600, categories 10.5px 400. Tip figures 13px 700. Tag 11px 600. Axis labels 11.5px 500. Footnote 11.5px 400.

Layout:
- 48px margins. Title states the finding (for example how many unused services and what they cost a year); subtitle names the measure and sort. The total per year sits top right, right-aligned, with a label above and "per month · N services" below.
- Legend (In use, Not opened in 60 days) under the subtitle. Rows 34px tall: 13px-radius avatar at x=64, name and category stacked at x=88, bars starting at x=300.

Axes and grid:
- Vertical 1px gridlines at round dollar values with labels below the last row. No horizontal lines, no axis line. Bars start at zero.

Marks:
- Bar chart: 16px horizontal bars with a 4px radius on the right end only, sorted by value descending. Value at each tip 8px after the bar. Unused rows get a #3E524B bar, muted figure and a 20px fully rounded outlined tag (1.2px #C9A86A stroke, no fill) reading "Unused 60d" 10px after the figure.
- Line chart: 2.5px #8FE3BE lines per item with the pastel avatars at the line ends as labels; unused items drawn in #3E524B dashed with the same outlined tag at the end.

Avoid: bright reds, gradients, heavy shadows, cluttered row separators, and letting tags overlap the gridline labels or the total block.

When you're done, render the chart and check that bars are sorted, the total equals the sum of the rows, the unused total in the title is correct, and every tag sits clear of its figure.