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/rares/[category]/page.tsx

@@ -1,5 +1,6 @@
 import Link from "next/link";
 import { notFound } from "next/navigation";
+import { ContentCard, EmptyState } from "@/components/public/ui";
 import { prisma } from "@/lib/prisma";
 import { siteSettings } from "@/lib/services/site-settings";
 
@@ -85,87 +86,87 @@ export default async function RareCategoryPage({
   const badgeSrc = badgeBase && cat.badge ? `${badgeBase}/${cat.badge}.gif` : "";
 
   return (
-    <main>
-      <p style={{ margin: "0 0 0.75rem" }}>
-        <Link href="/rares">← All rares</Link>
-      </p>
-
-      <div
-        className="hero"
-        style={{ display: "flex", alignItems: "center", gap: "1rem" }}
+    <main style={{ display: "grid", gap: "1.5rem" }}>
+      <ContentCard
+        icon={badgeSrc ? undefined : "💎"}
+        title={
+          <span style={{ display: "inline-flex", alignItems: "center", gap: "0.6rem" }}>
+            {badgeSrc ? (
+              // eslint-disable-next-line @next/next/no-img-element
+              <img src={badgeSrc} alt={`${cat.name} badge`} width={32} height={32} />
+            ) : null}
+            {cat.name}
+          </span>
+        }
+        subtitle={`${rares.length} ${rares.length === 1 ? "rare" : "rares"} in this category`}
+        action={
+          <Link className="btn btn-outline" href="/rares">
+            ← All rares
+          </Link>
+        }
+        padded={rares.length === 0}
       >
-        {badgeSrc ? (
-          // eslint-disable-next-line @next/next/no-img-element
-          <img src={badgeSrc} alt={`${cat.name} badge`} width={48} height={48} />
-        ) : null}
-        <div>
-          <h1 style={{ margin: 0 }}>{cat.name}</h1>
-          <p className="muted" style={{ marginBottom: 0 }}>
-            {rares.length} {rares.length === 1 ? "rare" : "rares"} in this category
-          </p>
-        </div>
-      </div>
-
-      {rares.length === 0 ? (
-        <p className="muted">No rares listed in this category yet.</p>
-      ) : (
-        <div className="card" style={{ padding: 0, overflowX: "auto" }}>
-          <table>
-            <thead>
-              <tr>
-                <th style={{ width: 56 }}></th>
-                <th>Rare</th>
-                <th>Credits</th>
-                <th>Currency</th>
-              </tr>
-            </thead>
-            <tbody>
-              {rares.map((r) => {
-                const iconSrc =
-                  iconBase && r.furnitureIcon ? `${iconBase}/${r.furnitureIcon}` : "";
-                return (
-                  <tr key={String(r.id)}>
-                    <td>
-                      {iconSrc ? (
-                        // eslint-disable-next-line @next/next/no-img-element
-                        <img
-                          src={iconSrc}
-                          alt=""
-                          width={40}
-                          height={40}
-                          style={{ objectFit: "contain" }}
-                        />
-                      ) : (
-                        <span
-                          className="avatar"
-                          style={{ display: "inline-block", width: 40, height: 40 }}
-                        />
-                      )}
-                    </td>
-                    <td>
-                      <strong>{r.name}</strong>
-                    </td>
-                    <td>
-                      {r.creditValue && r.creditValue !== "" ? (
-                        `${r.creditValue} credits`
-                      ) : (
-                        <span className="muted">—</span>
-                      )}
-                    </td>
-                    <td>
-                      {r.currencyValue && r.currencyValue !== "" ? (
-                        `${r.currencyValue} ${prettyCurrency(r.currencyType)}`
-                      ) : (
-                        <span className="muted">—</span>
-                      )}
-                    </td>
-                  </tr>
-                );
-              })}
-            </tbody>
-          </table>
-        </div>
-      )}
+        {rares.length === 0 ? (
+          <EmptyState icon="💎">No rares listed in this category yet.</EmptyState>
+        ) : (
+          <div style={{ padding: "0.25rem 1rem 0.75rem", overflowX: "auto" }}>
+            <table>
+              <thead>
+                <tr>
+                  <th style={{ width: 56 }}></th>
+                  <th>Rare</th>
+                  <th>Credits</th>
+                  <th>Currency</th>
+                </tr>
+              </thead>
+              <tbody>
+                {rares.map((r) => {
+                  const iconSrc =
+                    iconBase && r.furnitureIcon ? `${iconBase}/${r.furnitureIcon}` : "";
+                  return (
+                    <tr key={String(r.id)}>
+                      <td>
+                        {iconSrc ? (
+                          // eslint-disable-next-line @next/next/no-img-element
+                          <img
+                            src={iconSrc}
+                            alt=""
+                            width={40}
+                            height={40}
+                            style={{ objectFit: "contain" }}
+                          />
+                        ) : (
+                          <span
+                            className="avatar"
+                            style={{ display: "inline-block", width: 40, height: 40 }}
+                          />
+                        )}
+                      </td>
+                      <td>
+                        <strong>{r.name}</strong>
+                      </td>
+                      <td>
+                        {r.creditValue && r.creditValue !== "" ? (
+                          `${r.creditValue} credits`
+                        ) : (
+                          <span className="muted">—</span>
+                        )}
+                      </td>
+                      <td>
+                        {r.currencyValue && r.currencyValue !== "" ? (
+                          `${r.currencyValue} ${prettyCurrency(r.currencyType)}`
+                        ) : (
+                          <span className="muted">—</span>
+                        )}
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </ContentCard>
     </main>
   );
 }