[QA-Bug] Rating UI — replace number buttons and text stars with proper star icons

[realproject7]

Problem

The current rating UI has several design issues:

1. Input: Number buttons instead of star icons

• Currently shows [1] [2] [3] 4 5 as clickable number boxes
• Should show 5 clickable star icons (★) that fill on hover/click
• Selected stars should be filled (accent color), unselected should be empty outlines

2. Average rating: Text asterisks instead of star icons

• Currently displays ***** 3.0 (1) — tiny text asterisks that look like password dots
• Should show proper star icons like Amazon-style ratings (see reference image in comments)
• Must support fractional fills: e.g. 4.3 = 4 full stars + 1 star 30% filled
• Stars should be noticeably larger than current text — at least 16-20px

3. Recent ratings: Same asterisk problem

• 0x0175...4dbf ***** shows tiny text asterisks
• Should show small but recognizable filled star icons

Reference

Amazon-style star rating display:

• Full stars: solid filled (accent/gold color)
• Partial stars: percentage-based fill using CSS clip-path or gradient
• Empty stars: outline only
• 4.3 ★★★★☆ (1,534) format

Acceptance Criteria

• Rating INPUT uses 5 clickable star icons (not number buttons)
• Hover state: stars fill up to hovered position
• Selected state: stars fill up to selected rating
• Average rating display shows proper star icons with fractional fill support (e.g. 3.5 = 3 full + 1 half-filled + 1 empty)
• Average stars are sized ~20px, clearly visible
• Recent ratings list shows small filled star icons (not text asterisks)
• All star colors use the design system's accent color
• Mobile responsive — tap targets large enough on 375px width

Files likely affected

• src/components/RatingSection.tsx (or wherever the rating UI lives)
• Possibly a new StarRating shared component