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/page.tsx

@@ -1,4 +1,5 @@
 import Link from "next/link";
+import { ContentCard, EmptyState } from "@/components/public/ui";
 import { prisma } from "@/lib/prisma";
 import { siteSettings } from "@/lib/services/site-settings";
 
@@ -39,18 +40,19 @@ export default async function RareValuesPage() {
   const badgesBase = (await siteSettings.get("badges_path", "")) ?? "";
 
   return (
-    <main>
-      <div className="hero">
-        <h1 style={{ margin: 0 }}>Rare values</h1>
-        <p className="muted" style={{ marginBottom: 0 }}>
-          Get an overview of all of the rares on the hotel, grouped by category.
-        </p>
-      </div>
+    <main style={{ display: "grid", gap: "1.5rem" }}>
+      <ContentCard
+        icon="💎"
+        title="Rare values"
+        subtitle="Get an overview of all of the rares on the hotel, grouped by category."
+      />
 
       {categories.length === 0 ? (
-        <p className="muted">We currently have no rares listed here.</p>
+        <ContentCard padded={false}>
+          <EmptyState icon="💎">We currently have no rares listed here.</EmptyState>
+        </ContentCard>
       ) : (
-        <div className="grid cols-3">
+        <div className="card-grid sm-2 lg-3">
           {categories.map((c) => {
             const id = String(c.id);
             const count = counts.get(id) ?? 0;
@@ -59,33 +61,34 @@ export default async function RareValuesPage() {
               <Link
                 key={id}
                 href={`/rares/${id}`}
-                className="card hover"
-                style={{
-                  display: "flex",
-                  alignItems: "center",
-                  gap: "0.85rem",
-                  textDecoration: "none",
-                  color: "inherit",
-                }}
+                className="content-card hover-lift"
+                style={{ color: "inherit", textDecoration: "none" }}
               >
-                {badgeSrc ? (
-                  // eslint-disable-next-line @next/next/no-img-element
-                  <img
-                    src={badgeSrc}
-                    alt={`${c.name} badge`}
-                    width={40}
-                    height={40}
-                    style={{ flexShrink: 0 }}
-                  />
-                ) : (
-                  <span className="avatar" style={{ width: 40, height: 40, flexShrink: 0 }} />
-                )}
-                <span style={{ display: "flex", flexDirection: "column" }}>
-                  <strong>{c.name}</strong>
-                  <span className="muted">
-                    {count} {count === 1 ? "rare" : "rares"}
-                  </span>
-                </span>
+                <div className="content-card-head">
+                  {badgeSrc ? (
+                    // eslint-disable-next-line @next/next/no-img-element
+                    <img
+                      src={badgeSrc}
+                      alt={`${c.name} badge`}
+                      width={36}
+                      height={36}
+                      style={{ flexShrink: 0 }}
+                    />
+                  ) : (
+                    <span className="content-card-icon" aria-hidden>
+                      💎
+                    </span>
+                  )}
+                  <div className="content-card-head-text">
+                    <p className="content-card-title">{c.name}</p>
+                    <p className="content-card-subtitle">
+                      {count} {count === 1 ? "rare" : "rares"}
+                    </p>
+                  </div>
+                </div>
+                <div className="content-card-body">
+                  <span className="btn btn-outline">View rares →</span>
+                </div>
               </Link>
             );
           })}