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

@@ -1,3 +1,4 @@
+import { ContentCard, EmptyState } from "@/components/public/ui";
 import { auth } from "@/lib/auth";
 import { avatarImageUrl } from "@/lib/format";
 import { prisma } from "@/lib/prisma";
@@ -40,76 +41,88 @@ export default async function RadioShoutsPage() {
   const authorById = new Map(authors.map((a) => [a.id, a]));
 
   return (
-    <main>
-      <h1>Radio Shouts</h1>
-      <p className="muted" style={{ marginTop: 0 }}>
-        Shout-outs and requests from the community.
-      </p>
+    <main style={{ display: "grid", gap: "1.5rem" }}>
+      <ContentCard
+        icon="📣"
+        title="Radio Shouts"
+        subtitle="Shout-outs and requests from the community"
+      />
 
       {isLoggedIn ? (
-        <form action={postShout} className="card" style={{ marginBottom: "1.5rem" }}>
+        <ContentCard icon="✍️" title="Post a shout" subtitle="Send a message to the DJ on air">
           {/* The author is taken from the session inside the action, never from
               this form — no user id is submitted. */}
-          <label htmlFor="shout-message" className="muted">
-            Post a shout
-          </label>
-          <textarea
-            id="shout-message"
-            name="message"
-            required
-            maxLength={255}
-            rows={3}
-            placeholder="Send a shout to the DJ…"
-            style={{ width: "100%", margin: "0.4rem 0 0.75rem", resize: "vertical" }}
-          />
-          <button type="submit" className="btn btn-primary">
-            Shout
-          </button>
-        </form>
+          <form action={postShout}>
+            <label htmlFor="shout-message" className="muted">
+              Your message
+            </label>
+            <textarea
+              id="shout-message"
+              name="message"
+              required
+              maxLength={255}
+              rows={3}
+              placeholder="Send a shout to the DJ…"
+              style={{ width: "100%", margin: "0.4rem 0 0.75rem", resize: "vertical" }}
+            />
+            <button type="submit" className="btn btn-primary">
+              Shout
+            </button>
+          </form>
+        </ContentCard>
       ) : (
-        <p className="muted">Log in to post a shout.</p>
+        <ContentCard padded>
+          <EmptyState icon="🔒">Log in to post a shout.</EmptyState>
+        </ContentCard>
       )}
 
-      {shouts.length === 0 ? (
-        <p className="muted">No shouts yet. Be the first!</p>
-      ) : (
-        <div className="grid">
-          {shouts.map((s) => {
-            const author = authorById.get(Number(s.userId));
-            const authorAvatar = author
-              ? avatarImageUrl(imagerBase ?? "", author.look, {
-                  size: "s",
-                  headOnly: true,
-                })
-              : null;
-            return (
-              <div
-                key={String(s.id)}
-                className="card"
-                style={{ display: "flex", gap: "0.75rem", alignItems: "flex-start" }}
-              >
-                {authorAvatar ? (
-                  /* eslint-disable-next-line @next/next/no-img-element */
-                  <img
-                    className="avatar"
-                    src={authorAvatar}
-                    alt={author?.username ?? "author"}
-                    width={40}
-                    height={40}
-                  />
-                ) : null}
-                <div style={{ flex: 1 }}>
-                  <p style={{ margin: "0 0 0.25rem" }}>
-                    <strong>{author?.username ?? `User #${s.userId}`}</strong>{" "}
-                    <span className="muted">{formatDate(s.createdAt)}</span>
-                  </p>
-                  <p style={{ margin: 0 }}>{s.message}</p>
+      <ContentCard
+        icon="💬"
+        title="Latest shouts"
+        subtitle="The most recent messages from listeners"
+        padded={shouts.length === 0}
+      >
+        {shouts.length === 0 ? (
+          <EmptyState icon="📣">No shouts yet. Be the first!</EmptyState>
+        ) : (
+          <div className="card-grid">
+            {shouts.map((s) => {
+              const author = authorById.get(Number(s.userId));
+              const authorAvatar = author
+                ? avatarImageUrl(imagerBase ?? "", author.look, {
+                    size: "s",
+                    headOnly: true,
+                  })
+                : null;
+              return (
+                <div
+                  key={String(s.id)}
+                  className="card"
+                  style={{ display: "flex", gap: "0.75rem", alignItems: "flex-start" }}
+                >
+                  {authorAvatar ? (
+                    /* eslint-disable-next-line @next/next/no-img-element */
+                    <img
+                      className="avatar"
+                      src={authorAvatar}
+                      alt={author?.username ?? "author"}
+                      width={40}
+                      height={40}
+                    />
+                  ) : null}
+                  <div style={{ flex: 1, minWidth: 0 }}>
+                    <p style={{ margin: "0 0 0.25rem" }}>
+                      <strong>{author?.username ?? `User #${s.userId}`}</strong>{" "}
+                      <span className="muted">{formatDate(s.createdAt)}</span>
+                    </p>
+                    <p style={{ margin: 0 }}>{s.message}</p>
+                  </div>
                 </div>
-              </div>
-            );
-          })}
-        </div>
-      )}
+              );
+            })}
+          </div>
+        )}
+      </ContentCard>
     </main>
   );
 }