refactor(ui): DRY the settings-card CSS tokens + fix unstyled headers (#161)

- Promote .fc-section-h to a global token (app.css). It was copied identically
  into 4 cards, and TranslationCard used the class with NO local def — so its
  section headers rendered unstyled. Now fixed everywhere.
- Promote .fc-good / .fc-weak status colours to globals; delete the local copies
  in the GPU/heads cards. (.fc-ok stays local — divergent: on-surface in
  HeadsCard vs success in QueuesTable. .fc-bad stays — different name.)
- Delete 10 identical local .fc-muted redefinitions that crept back after the
  2026-06-09 sweep; the global utility already covers them.
- DbMaintenanceCard: opacity:0.6 muted text → the .fc-muted token (the exact
  anti-pattern that token's comment forbids).
- HeadsCard: collapse byte-identical ratePct() into pct().

CSS-only + one template class swap; no logic change.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NsmJSQxnNxGgtM5Yz4GAqi

frontend/src/components/settings/HeadsCard.vue

@@ -256,7 +256,7 @@
               <td class="fc-r fc-mono">{{ c.n_auto_applied }}</td>
               <td class="fc-r fc-mono">{{ c.n_misfires }}</td>
               <td class="fc-r fc-mono" :class="rateClass(c.misfire_rate)">
-                {{ ratePct(c.misfire_rate) }}
+                {{ pct(c.misfire_rate) }}
               </td>
               <td class="fc-r fc-mono">{{ c.n_underfires }}</td>
             </tr>
@@ -495,7 +495,6 @@ function sweepConcepts(run) {
     .sort((a, b) => b.applied - a.applied)
 }
 function sweepTotal(run) { return run?.n_applied ?? 0 }
-function ratePct(x) { return x == null ? '—' : `${Math.round(x * 100)}%` }
 function rateClass(x) {
   if (x == null) return ''
   if (x <= 0.03) return 'fc-good'
@@ -526,12 +525,6 @@ function relTime(iso) {
 </script>
 
 <style scoped>
-.fc-muted { color: rgb(var(--v-theme-on-surface-variant)); }
-
-.fc-section-h {
-  font-size: 13px; font-weight: 700; letter-spacing: 0.03em;
-  text-transform: uppercase; color: rgb(var(--v-theme-on-surface));
-}
 .fc-auto {
   border-top: 1px solid rgb(var(--v-theme-surface-light)); padding-top: 16px;
 }
@@ -588,7 +581,5 @@ function relTime(iso) {
   background: rgb(var(--v-theme-surface-light));
   padding: 1px 6px; border-radius: 999px;
 }
-.fc-good { color: rgb(var(--v-theme-success)); }
 .fc-ok { color: rgb(var(--v-theme-on-surface)); }
-.fc-weak { color: rgb(var(--v-theme-error)); }
 </style>