Adapt + improve all public pages to the atom design system

Extended the same design-system treatment to the public site, faithful
to AtomCMS's "atom" theme. New src/components/public/ui.tsx provides the
signature atom building blocks + a scoped CSS layer:
- ContentCard: surface card with a primary-tinted header (icon circle +
  title + subtitle) and padded body — the atom content-card, used as
  every page's header and section wrapper.
- StatBlock / stat-grid, EmptyState, OnlineBadge (online/offline pill),
  RankBadge (medals for the top 3), and responsive .card-grid helpers.

Swept ~45 public pages (home/community/rankings hand-built as the
reference; the rest via parallel agents that read the schema and
preserved every query, server action, auth gate and field name):
heroes → ContentCard headers, lists → card-grids in ContentCards,
"no X" → EmptyState, status → OnlineBadge/RankBadge. The leaderboard
gained Credits/Diamonds/Duckets tabs (usersCurrency).

Behaviour unchanged. Verified on the prod server against amx_test: 15+
public pages render the content-cards/grids with real data, no errors;
computed styles confirm the tinted header, icon circle, medal + online
pills. Fixed an undefined --color-golden ref. tsc 0, vitest 49/49,
next build 0.

src/app/radio/leaderboard/page.tsx

@@ -1,4 +1,5 @@
 import Link from "next/link";
+import { ContentCard, EmptyState, RankBadge } from "@/components/public/ui";
 import { avatarImageUrl } from "@/lib/format";
 import { prisma } from "@/lib/prisma";
 import { siteSettings } from "@/lib/services/site-settings";
@@ -43,22 +44,21 @@ export default async function RadioLeaderboardPage() {
   ]);
 
   return (
-    <main>
-      <h1>Radio Listener Leaderboard</h1>
-      <p className="muted" style={{ marginTop: 0 }}>
-        Top 50 listeners by points earned tuning in to the radio.
-      </p>
+    <main style={{ display: "grid", gap: "1.5rem" }}>
+      <ContentCard
+        icon="🏆"
+        title="Radio Listener Leaderboard"
+        subtitle="Top 50 listeners by points earned tuning in to the radio"
+      />
 
-      <div className="card">
+      <ContentCard padded={rows.length === 0}>
         {rows.length === 0 ? (
-          <p className="muted" style={{ margin: 0 }}>
-            No listener points to show yet.
-          </p>
+          <EmptyState icon="🏆">No listener points to show yet.</EmptyState>
         ) : (
           <table>
             <thead>
               <tr>
-                <th style={{ width: "3rem" }}>#</th>
+                <th style={{ width: "3.5rem" }}>Rank</th>
                 <th style={{ width: "3.5rem" }}>Avatar</th>
                 <th>Listener</th>
                 <th style={{ textAlign: "right" }}>Points</th>
@@ -72,7 +72,9 @@ export default async function RadioLeaderboardPage() {
                 });
                 return (
                   <tr key={`${row.username}-${i}`}>
-                    <td style={{ fontWeight: 800 }}>{i + 1}</td>
+                    <td>
+                      <RankBadge position={i + 1} />
+                    </td>
                     <td>
                       {/* eslint-disable-next-line @next/next/no-img-element */}
                       <img
@@ -100,7 +102,7 @@ export default async function RadioLeaderboardPage() {
             </tbody>
           </table>
         )}
-      </div>
+      </ContentCard>
     </main>
   );
 }