feat(stats): status donut, meters and fixed chart colors

Pie and donut charts use one fixed color-blind safe palette in every
skin and accent. The overview and the profile status tile show a status
donut with the total in the middle. Habits and achievements get meter
bars, top games get share bars, the pile of shame bar uses the palette.

src/components/AchievementsCard.jsx

@@ -6,6 +6,7 @@ import {Card} from '@/components/ui/card';
 import GameCover from './GameCover.jsx';
 import FitText from './FitText.jsx';
 import {StatCount} from './stats/StatDrill.jsx';
+import StatMeter from './stats/StatMeter.jsx';
 
 /**
  * @param summary the answer of GET /api/library/achievements/summary
@@ -20,12 +21,13 @@ export default function AchievementsCard({summary}) {
     // A private profile keeps games pending; the privacy hint explains that better than the pending count.
     const steamHidesAll = hidden > 0 && started === 0;
 
+    const average = summary.averageCompletion != null ? `${summary.averageCompletion.toLocaleString(i18n.language)} %` : '–';
     const stats = [
         [(summary.unlocked ?? 0).toLocaleString(i18n.language), t('DASHBOARD.ACHIEVEMENTS.UNLOCKED')],
         [perfect.toLocaleString(i18n.language), t('DASHBOARD.ACHIEVEMENTS.PERFECT'),
             {params: {key: 'PERFECT'}, count: perfect}],
-        [summary.averageCompletion != null ? `${summary.averageCompletion.toLocaleString(i18n.language)} %` : '–',
-            t('DASHBOARD.ACHIEVEMENTS.AVERAGE')],
+        [average, t('DASHBOARD.ACHIEVEMENTS.AVERAGE'), undefined,
+            summary.averageCompletion != null ? {percent: summary.averageCompletion, valueText: average} : null],
     ];
 
     return (
@@ -36,11 +38,12 @@ export default function AchievementsCard({summary}) {
             </h2>
 
             <div className="grid grid-cols-3 gap-3">
-                {stats.map(([value, label, drill]) => (
+                {stats.map(([value, label, drill, meter]) => (
                     <div key={label} className="rounded-lg bg-muted/50 p-3 text-center">
                         <div className="text-xl md:text-2xl font-bold tabular-nums">
                             <StatCount {...drill} title={label} label={`${label}: ${value}`}>{value}</StatCount>
                         </div>
+                        {meter && <StatMeter {...meter} label={label}/>}
                         <div className="text-xs text-muted-foreground">{label}</div>
                     </div>
                 ))}