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

@@ -1,5 +1,6 @@
 import Link from "next/link";
 import { redirect } from "next/navigation";
+import { ContentCard, EmptyState } from "@/components/public/ui";
 import { auth } from "@/lib/auth";
 import { avatarImageUrl } from "@/lib/format";
 import { prisma } from "@/lib/prisma";
@@ -79,23 +80,28 @@ export default async function MessagesPage() {
   }
 
   return (
-    <main>
-      <h1>Messages</h1>
-      <p className="muted" style={{ marginTop: "-0.25rem" }}>
-        Friend requests and offline messages waiting for you.
-      </p>
+    <main style={{ display: "grid", gap: "1.5rem" }}>
+      <ContentCard
+        icon="✉️"
+        title="Messages"
+        subtitle="Friend requests and offline messages waiting for you"
+      />
 
       {/* ── Pending friend requests ───────────────────────────── */}
-      <section style={{ marginTop: "1.5rem" }}>
-        <h2>Friend requests</h2>
+      <ContentCard
+        icon="🙋"
+        title="Friend requests"
+        subtitle={
+          requests.length === 0
+            ? "Nobody's asked to be your friend yet"
+            : `${requests.length} pending request${requests.length === 1 ? "" : "s"}`
+        }
+        padded={requests.length === 0}
+      >
         {requests.length === 0 ? (
-          <div className="card">
-            <p className="muted" style={{ margin: 0 }}>
-              No pending friend requests.
-            </p>
-          </div>
+          <EmptyState icon="🙋">No pending friend requests.</EmptyState>
         ) : (
-          <div className="grid">
+          <div className="grid" style={{ padding: "1rem", gap: "0.75rem" }}>
             {requests.map((req) => {
               const from = userById.get(req.userFromId);
               const avatar = avatarImageUrl(imagerBase, from?.look ?? "", {
@@ -141,19 +147,23 @@ export default async function MessagesPage() {
             })}
           </div>
         )}
-      </section>
+      </ContentCard>
 
       {/* ── Offline messages ──────────────────────────────────── */}
-      <section style={{ marginTop: "2rem" }}>
-        <h2>Offline messages</h2>
+      <ContentCard
+        icon="💬"
+        title="Offline messages"
+        subtitle={
+          messages.length === 0
+            ? "Your inbox is empty"
+            : `${messages.length} message${messages.length === 1 ? "" : "s"} received`
+        }
+        padded={messages.length === 0}
+      >
         {messages.length === 0 ? (
-          <div className="card">
-            <p className="muted" style={{ margin: 0 }}>
-              You have no offline messages.
-            </p>
-          </div>
+          <EmptyState icon="💬">You have no offline messages.</EmptyState>
         ) : (
-          <div className="grid">
+          <div className="grid" style={{ padding: "1rem", gap: "0.75rem" }}>
             {messages.map((msg) => {
               const from = userById.get(msg.userFromId);
               const avatar = avatarImageUrl(imagerBase, from?.look ?? "", {
@@ -194,7 +204,7 @@ export default async function MessagesPage() {
             })}
           </div>
         )}
-      </section>
+      </ContentCard>
     </main>
   );
 }