fix(ui): trend chart gradient area renders solid black (rant 2026-08-24T12:32:18)

[argszero]

Summary

Fix the point-trend chart gradient area rendering as a solid black block on the transactions page (rant 2026-08-24T12:32:18).

Root cause: the <linearGradient><stop> elements used CSS classes (.tg-0/.tg-1) to set stop-color/stop-opacity. These are SVG presentation attributes and Chrome's support for styling <stop> via external CSS classes is unreliable — the stops rendered colorless, so fill=url(#...) fell back to the default solid black. This existed since v0.7.13 (PR #133); PR #136 only changed colors, not the mechanism.

Fix (mirrors the dashboard sparkline, which renders correctly):

• Gradient <stop>s now carry inlinestop-color/stop-opacity attributes (0.35 → 0), per-metric dynamic color: spend=var(--accent), income=var(--ok), net=var(--accent-text), tokens=var(--warn)
• Unique gradient id per render (spark-grad-N, shared _sparkId counter) — prevents stale-id residue on metric switch / multi-chart
• Area path gets inline fill="url(#<gid>)", line path gets inline stroke (curve color == area color for every metric)
• Removed the dead .tg-0/.tg-1/.m-* CSS rules from style.css

Cache-bust 20260824-5 → 20260824-6.

Tests

• cargo test 146/146, cargo fmt --check, cargo clippy all green
• node --check + JS smoke test: all 4 metrics produce unique gid, inline stops, inline fill/stroke