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/u/[username]/page.tsx

@@ -1,4 +1,5 @@
 import { notFound } from "next/navigation";
+import { ContentCard, EmptyState, OnlineBadge, StatBlock } from "@/components/public/ui";
 import { auth } from "@/lib/auth";
 import { avatarImageUrl } from "@/lib/format";
 import { prisma } from "@/lib/prisma";
@@ -88,31 +89,43 @@ export default async function ProfilePage({
   const authorById = new Map(authors.map((a) => [a.id, a]));
 
   return (
-    <main>
-      <div className="card" style={{ display: "flex", gap: "1.5rem", alignItems: "center" }}>
-        {/* eslint-disable-next-line @next/next/no-img-element */}
-        <img src={avatar} alt={`${user.username} avatar`} width={100} height={150} />
-        <div>
-          <h1 style={{ margin: "0 0 0.25rem" }}>{user.username}</h1>
-          <p style={{ margin: "0 0 0.5rem" }}>
-            {user.motto || <span className="muted">No motto</span>}
-          </p>
-          <p className="muted" style={{ margin: 0 }}>
-            Rank {user.rank} · {user.credits} credits · {user.online === "1" ? "Online" : "Offline"} ·
-            Registered {registered}
-          </p>
+    <main style={{ display: "grid", gap: "1.5rem" }}>
+      {/* ── Profile header ───────────────────────────────────── */}
+      <ContentCard padded={false}>
+        <div
+          className="content-card-body"
+          style={{ display: "flex", gap: "1.5rem", alignItems: "center", flexWrap: "wrap" }}
+        >
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img src={avatar} alt={`${user.username} avatar`} width={100} height={150} />
+          <div style={{ minWidth: 0, flex: 1 }}>
+            <h1 style={{ margin: "0 0 0.25rem" }}>{user.username}</h1>
+            <p style={{ margin: "0 0 0.6rem" }}>
+              {user.motto || <span className="muted">No motto</span>}
+            </p>
+            <OnlineBadge online={user.online === "1"} />
+          </div>
         </div>
-      </div>
+        <div className="stat-grid" style={{ padding: "0 1.1rem 1.1rem" }}>
+          <StatBlock icon="🏅" value={user.rank} label="Rank" />
+          <StatBlock icon="💰" value={user.credits.toLocaleString()} label="Credits" />
+          <StatBlock icon="📅" value={registered} label="Registered" />
+        </div>
+      </ContentCard>
 
       {/* ── Badges ───────────────────────────────────────────── */}
-      <section style={{ marginTop: "1.5rem" }}>
-        <h2>Badges</h2>
+      <ContentCard icon="🏅" title="Badges" padded={badges.length === 0}>
         {badges.length === 0 ? (
-          <p className="muted">No badges yet.</p>
+          <EmptyState icon="🏅">No badges yet.</EmptyState>
         ) : (
           <div
-            className="card"
-            style={{ display: "flex", flexWrap: "wrap", gap: "0.75rem", alignItems: "center" }}
+            style={{
+              display: "flex",
+              flexWrap: "wrap",
+              gap: "0.75rem",
+              alignItems: "center",
+              padding: "1rem",
+            }}
           >
             {badges.map((b) => (
               /* eslint-disable-next-line @next/next/no-img-element */
@@ -127,15 +140,14 @@ export default async function ProfilePage({
             ))}
           </div>
         )}
-      </section>
+      </ContentCard>
 
       {/* ── Photos ───────────────────────────────────────────── */}
-      <section style={{ marginTop: "1.5rem" }}>
-        <h2>Photos</h2>
+      <ContentCard icon="📸" title="Photos" padded={photos.length === 0}>
         {photos.length === 0 ? (
-          <p className="muted">No photos yet.</p>
+          <EmptyState icon="📸">No photos yet.</EmptyState>
         ) : (
-          <div className="grid cols-3">
+          <div className="card-grid sm-2 lg-3" style={{ padding: "1rem" }}>
             {photos.map((p) => (
               <div key={p.id} className="card" style={{ padding: "0.5rem" }}>
                 {/* eslint-disable-next-line @next/next/no-img-element */}
@@ -151,12 +163,10 @@ export default async function ProfilePage({
             ))}
           </div>
         )}
-      </section>
+      </ContentCard>
 
       {/* ── Guestbook ────────────────────────────────────────── */}
-      <section style={{ marginTop: "1.5rem" }}>
-        <h2>Guestbook</h2>
-
+      <ContentCard icon="📝" title="Guestbook" subtitle={`Messages on ${user.username}'s wall`}>
         {isLoggedIn ? (
           <form action={postGuestbook} className="card" style={{ marginBottom: "1rem" }}>
             {/* Profile owner id drives the write target; the author is taken from
@@ -184,9 +194,9 @@ export default async function ProfilePage({
         )}
 
         {guestbook.length === 0 ? (
-          <p className="muted">No guestbook entries yet.</p>
+          <EmptyState icon="📝">No guestbook entries yet.</EmptyState>
         ) : (
-          <div className="grid">
+          <div className="grid" style={{ gap: "0.75rem" }}>
             {guestbook.map((g) => {
               const author = authorById.get(g.userId);
               const authorAvatar = author
@@ -220,7 +230,7 @@ export default async function ProfilePage({
             })}
           </div>
         )}
-      </section>
+      </ContentCard>
     </main>
   );
 }