Chart Prompts

Restyle my chart in the "Shot Status" 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 dashboard of a production tracking app used by an animation studio. Dark navy, rounded panels, filter pills with counts, crisp status colors that everyone on the team already knows.

Colors (use these exact values):
- Background: #0F172A. Panel: #152036 with a 1px #23304A border. Active pill: #1E2A44 with a #3A4A6B border.
- Status colors in pipeline order: #64748B (slate, earliest stage), #3B82F6 (blue), #F59E0B (amber), #34D399 (green, done). Labels on slate and blue are #F1F5F9; on amber and green they are #0F172A.
- Text: primary #F1F5F9, secondary #94A3B8. Empty ring track: #23304A.

Typography (Google Fonts):
- Figtree throughout. Title 700, 26px #F1F5F9, stating the finding. Subtitle 500, 14px #94A3B8 with measure and total.
- Pill labels 600, 13px; pill counts 700, 11.5px in the status color on a 16px tall count badge of that color at 22% opacity.
- Table headers 700, 11px uppercase, 1.1px letter-spacing, #94A3B8. Row IDs 700, 14px; row descriptions 500, 12px #94A3B8. Totals 600, 14px #94A3B8. Segment counts 700, 12px. Percent complete 800, 16px green (secondary gray at 0%).

Layout:
- Title at y 52, subtitle at y 78 (x 40). A row of filter pills at y 100 (28px tall, fully rounded): an active "All" pill first, then one per status with a 4.5px status dot, the label and its count badge; 10px gaps.
- A rounded (14px) table panel from x 32 to 928 starting at y 146: a 36px header row with a divider, then 44px rows separated by 1px dividers at 60% opacity, inset 16px from the panel edges.
- Columns: ID and description (x 56), total right aligned at x 236, the stacked bar from x 264 (scale so the largest total reaches about x 812), a small completion ring at x 848 and the percent right aligned at x 904.
- Footer at y 576: "Source: ..." left, a one-line reading key right, 12px #94A3B8.

Axes and grid:
- No axes or gridlines: bar length is honest from zero and each segment is labeled with its count. The pills act as the legend.

Marks:
- Bar chart: stacked horizontal bars 22px tall; each segment a 4px-radius rounded rect in its status color, separated by 2px gaps of the panel color. Counts centered inside segments at least 22px wide. At the right, a completion ring (radius 8, 3px track in #23304A, green arc from 12 o'clock with round caps) and the percent complete.
- Line chart: one 2.5px line per status in the status colors over the same panel, with 4px dots at each point, direct labels at the line ends in the status color, the pills still acting as the legend; zero-based y axis with 3 faint #23304A gridlines.

Avoid: gradients, glows, a light background, a separate legend box, and segment labels on slivers too thin to hold them.

When you're done, render the chart and check that the pill counts sum to the "All" count, each row's segments sum to its total, the percent complete equals the green segment over the total, and nothing collides at thumbnail size.