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/guilds/[id]/forum/page.tsx

@@ -1,5 +1,6 @@
 import Link from "next/link";
 import { notFound } from "next/navigation";
+import { ContentCard, EmptyState } from "@/components/public/ui";
 import { prisma } from "@/lib/prisma";
 
 export const dynamic = "force-dynamic";
@@ -89,22 +90,26 @@ export default async function GuildForumPage({
   const usernameById = new Map(users.map((u) => [u.id, u.username]));
 
   return (
-    <main>
-      <p style={{ marginTop: 0 }}>
+    <main style={{ display: "grid", gap: "1.5rem" }}>
+      <p style={{ margin: 0 }}>
         <Link href={`/guilds/${guild.id}`}>← Back to guild</Link>
       </p>
 
-      <h1 style={{ marginBottom: "0.25rem" }}>
-        {guild.name || "Unnamed guild"} — Forum
-      </h1>
-      <p className="muted" style={{ marginTop: 0 }}>
-        {threads.length} {threads.length === 1 ? "thread" : "threads"}
-      </p>
+      <ContentCard
+        icon="🗣️"
+        title={`${guild.name || "Unnamed guild"} — Forum`}
+        subtitle={`${threads.length} ${threads.length === 1 ? "thread" : "threads"}`}
+        action={
+          <Link href={`/guilds/${guild.id}/forum/new`} className="btn btn-primary">
+            + New thread
+          </Link>
+        }
+      />
 
-      {threads.length === 0 ? (
-        <p className="muted">No threads in this forum yet.</p>
-      ) : (
-        <div className="card" style={{ padding: 0 }}>
+      <ContentCard padded={threads.length === 0}>
+        {threads.length === 0 ? (
+          <EmptyState icon="🗣️">No threads in this forum yet.</EmptyState>
+        ) : (
           <table>
             <thead>
               <tr>
@@ -125,13 +130,13 @@ export default async function GuildForumPage({
                         {t.subject?.trim() || "(no subject)"}
                       </span>
                       {t.pinned ? (
-                        <span className="muted" style={{ marginLeft: "0.5rem" }}>
-                          · Pinned
+                        <span className="online-badge online" style={{ marginLeft: "0.5rem" }}>
+                          📌 Pinned
                         </span>
                       ) : null}
                       {t.locked ? (
-                        <span className="muted" style={{ marginLeft: "0.5rem" }}>
-                          · Locked
+                        <span className="online-badge" style={{ marginLeft: "0.5rem" }}>
+                          🔒 Locked
                         </span>
                       ) : null}
                     </td>
@@ -155,8 +160,8 @@ export default async function GuildForumPage({
               })}
             </tbody>
           </table>
-        </div>
-      )}
+        )}
+      </ContentCard>
     </main>
   );
 }