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

@@ -1,5 +1,6 @@
 import Link from "next/link";
 import { redirect } from "next/navigation";
+import { ContentCard, EmptyState, OnlineBadge } from "@/components/public/ui";
 import { auth } from "@/lib/auth";
 import { avatarImageUrl } from "@/lib/format";
 import { prisma } from "@/lib/prisma";
@@ -50,78 +51,67 @@ export default async function FriendsPage() {
   ]);
 
   return (
-    <main>
-      <h1>Friends</h1>
-      <p className="muted" style={{ marginTop: "-0.25rem" }}>
-        {friends.length === 0
-          ? "You have no friends added yet."
-          : `You have ${friends.length} friend${friends.length === 1 ? "" : "s"}.`}
-      </p>
+    <main style={{ display: "grid", gap: "1.5rem" }}>
+      <ContentCard
+        icon="🤝"
+        title="Friends"
+        subtitle={
+          friends.length === 0
+            ? "You have no friends added yet"
+            : `You have ${friends.length} friend${friends.length === 1 ? "" : "s"}`
+        }
+      />
 
-      {friends.length === 0 ? (
-        <div className="card">
-          <p className="muted" style={{ margin: 0 }}>
+      <ContentCard padded={friends.length === 0}>
+        {friends.length === 0 ? (
+          <EmptyState icon="🤝">
             Add friends in the hotel and they will show up here.
-          </p>
-        </div>
-      ) : (
-        <div className="grid cols-3">
-          {friends.map((friend) => {
-            const avatar = avatarImageUrl(imagerBase ?? "", friend.look, {
-              size: "s",
-              headOnly: true,
-            });
-            const isOnline = friend.online === "1";
-            return (
-              <div
-                key={friend.id}
-                className="card hover"
-                style={{ display: "flex", gap: "0.85rem", alignItems: "center" }}
-              >
-                {/* eslint-disable-next-line @next/next/no-img-element */}
-                <img
-                  className="avatar"
-                  src={avatar}
-                  alt={`${friend.username} avatar`}
-                  width={50}
-                  height={50}
-                />
-                <div style={{ minWidth: 0, flex: 1 }}>
-                  <p style={{ margin: "0 0 0.2rem", display: "flex", alignItems: "center", gap: "0.4rem" }}>
-                    <span
-                      aria-hidden
-                      title={isOnline ? "Online" : "Offline"}
+          </EmptyState>
+        ) : (
+          <div className="card-grid sm-2 lg-3" style={{ padding: "1rem" }}>
+            {friends.map((friend) => {
+              const avatar = avatarImageUrl(imagerBase ?? "", friend.look, {
+                size: "s",
+                headOnly: true,
+              });
+              const isOnline = friend.online === "1";
+              return (
+                <div
+                  key={friend.id}
+                  className="card hover"
+                  style={{ display: "flex", gap: "0.85rem", alignItems: "center" }}
+                >
+                  {/* eslint-disable-next-line @next/next/no-img-element */}
+                  <img
+                    className="avatar"
+                    src={avatar}
+                    alt={`${friend.username} avatar`}
+                    width={50}
+                    height={50}
+                  />
+                  <div style={{ minWidth: 0, flex: 1 }}>
+                    <h3 style={{ margin: "0 0 0.3rem", fontSize: "1rem" }}>
+                      <Link href={`/u/${friend.username}`}>{friend.username}</Link>
+                    </h3>
+                    <p
+                      className="muted"
                       style={{
-                        width: 9,
-                        height: 9,
-                        borderRadius: "999px",
-                        flexShrink: 0,
-                        background: isOnline
-                          ? "var(--color-accent)"
-                          : "var(--color-text-muted)",
+                        margin: "0 0 0.4rem",
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        whiteSpace: "nowrap",
                       }}
-                    />
-                    <Link href={`/u/${friend.username}`}>
-                      <strong>{friend.username}</strong>
-                    </Link>
-                  </p>
-                  <p
-                    className="muted"
-                    style={{
-                      margin: 0,
-                      overflow: "hidden",
-                      textOverflow: "ellipsis",
-                      whiteSpace: "nowrap",
-                    }}
-                  >
-                    {friend.motto || "No motto"}
-                  </p>
+                    >
+                      {friend.motto || "No motto"}
+                    </p>
+                    <OnlineBadge online={isOnline} />
+                  </div>
                 </div>
-              </div>
-            );
-          })}
-        </div>
-      )}
+              );
+            })}
+          </div>
+        )}
+      </ContentCard>
     </main>
   );
 }