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/staff/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";
 
@@ -53,53 +54,61 @@ export default async function StaffPage() {
   }
 
   return (
-    <main>
-      <div className="hero">
-        <h1 style={{ margin: "0 0 0.35rem" }}>Staff</h1>
-        <p className="muted" style={{ margin: 0 }}>
-          The team behind the hotel.
-        </p>
-      </div>
+    <main style={{ display: "grid", gap: "1.5rem" }}>
+      <ContentCard icon="🛡️" title="Staff" subtitle="The team behind the hotel" />
 
       {teams.length > 0 ? (
-        <div className="grid cols-3" style={{ marginBottom: "1.5rem" }}>
-          {teams.map((t) => (
-            <div key={t.id} className="card">
-              <h3 style={{ margin: "0 0 0.25rem", color: t.staffColor }}>{t.rankName}</h3>
-              {t.jobDescription ? (
-                <p className="muted" style={{ margin: 0 }}>
-                  {t.jobDescription}
-                </p>
-              ) : null}
-            </div>
-          ))}
-        </div>
+        <ContentCard icon="⭐" title="Ranks" subtitle="What each part of the team takes care of">
+          <div className="card-grid sm-2 lg-3">
+            {teams.map((t) => (
+              <div key={t.id} className="card">
+                <h3 style={{ margin: "0 0 0.25rem", color: t.staffColor }}>{t.rankName}</h3>
+                {t.jobDescription ? (
+                  <p className="muted" style={{ margin: 0 }}>
+                    {t.jobDescription}
+                  </p>
+                ) : null}
+              </div>
+            ))}
+          </div>
+        </ContentCard>
       ) : null}
 
-      {staff.length === 0 ? (
-        <p className="muted">No staff members to show.</p>
-      ) : (
-        <table>
-          <thead>
-            <tr>
-              <th>Username</th>
-              <th>Rank</th>
-              <th>Motto</th>
-            </tr>
-          </thead>
-          <tbody>
-            {staff.map((u) => (
-              <tr key={u.username}>
-                <td>
-                  <Link href={`/u/${u.username}`}>{u.username}</Link>
-                </td>
-                <td>{u.rank}</td>
-                <td className="muted">{u.motto || "—"}</td>
+      <ContentCard
+        icon="👥"
+        title="Team members"
+        subtitle={
+          staff.length === 0
+            ? "Nobody to show right now"
+            : `${staff.length} member${staff.length === 1 ? "" : "s"} keeping things running`
+        }
+        padded={staff.length === 0}
+      >
+        {staff.length === 0 ? (
+          <EmptyState icon="🛡️">No staff members to show.</EmptyState>
+        ) : (
+          <table>
+            <thead>
+              <tr>
+                <th>Username</th>
+                <th>Rank</th>
+                <th>Motto</th>
               </tr>
-            ))}
-          </tbody>
-        </table>
-      )}
+            </thead>
+            <tbody>
+              {staff.map((u) => (
+                <tr key={u.username}>
+                  <td>
+                    <Link href={`/u/${u.username}`}>{u.username}</Link>
+                  </td>
+                  <td>{u.rank}</td>
+                  <td className="muted">{u.motto || "—"}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        )}
+      </ContentCard>
     </main>
   );
 }