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

@@ -1,5 +1,6 @@
 import { redirect } from "next/navigation";
 import { createTicket } from "@/actions/help-tickets";
+import { ContentCard, EmptyState, StatBlock } from "@/components/public/ui";
 import { auth } from "@/lib/auth";
 import { prisma } from "@/lib/prisma";
 
@@ -26,51 +27,79 @@ export default async function HelpTicketsPage() {
     tickets = [];
   }
 
+  const openCount = tickets.filter((t) => t.open).length;
+  const closedCount = tickets.length - openCount;
+
   return (
-    <main>
-      <h1>Help Tickets</h1>
-      <p className="muted">Submit a ticket to staff and track your open requests.</p>
-
-      <form action={createTicket} className="card" style={{ marginBottom: "1.5rem" }}>
-        <h3 style={{ marginTop: 0 }}>New ticket</h3>
-        <div style={{ display: "flex", flexDirection: "column", gap: "0.6rem" }}>
-          <input name="title" placeholder="Subject" maxLength={255} required />
-          <textarea
-            name="content"
-            placeholder="Describe your issue…"
-            rows={5}
-            maxLength={5000}
-            required
-          />
-          <div>
-            <button type="submit" className="btn btn-primary">
-              Submit ticket
-            </button>
-          </div>
+    <main style={{ display: "grid", gap: "1.5rem" }}>
+      <ContentCard
+        icon="🎫"
+        title="Help Tickets"
+        subtitle="Submit a ticket to staff and track your open requests."
+      >
+        <div className="stat-grid">
+          <StatBlock icon="🎫" value={tickets.length} label="Total tickets" />
+          <StatBlock icon="📬" value={openCount} label="Open" />
+          <StatBlock icon="✅" value={closedCount} label="Closed" />
         </div>
-      </form>
+      </ContentCard>
 
-      <table>
-        <thead>
-          <tr>
-            <th>ID</th>
-            <th>Subject</th>
-            <th>Status</th>
-            <th>Created</th>
-          </tr>
-        </thead>
-        <tbody>
-          {tickets.map((t) => (
-            <tr key={String(t.id)}>
-              <td>{String(t.id)}</td>
-              <td>{t.title}</td>
-              <td>{t.open ? "Open" : "Closed"}</td>
-              <td className="muted">{formatDate(t.createdAt)}</td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-      {tickets.length === 0 ? <p className="muted">You have no tickets yet.</p> : null}
+      <ContentCard icon="✏️" title="New ticket" subtitle="Describe your issue and staff will follow up">
+        <form action={createTicket}>
+          <div style={{ display: "flex", flexDirection: "column", gap: "0.6rem" }}>
+            <input name="title" placeholder="Subject" maxLength={255} required />
+            <textarea
+              name="content"
+              placeholder="Describe your issue…"
+              rows={5}
+              maxLength={5000}
+              required
+            />
+            <div>
+              <button type="submit" className="btn btn-primary">
+                Submit ticket
+              </button>
+            </div>
+          </div>
+        </form>
+      </ContentCard>
+
+      <ContentCard
+        icon="📋"
+        title="Your tickets"
+        subtitle="Every request you have sent to staff"
+        padded={tickets.length === 0}
+      >
+        {tickets.length === 0 ? (
+          <EmptyState icon="🎫">You have no tickets yet.</EmptyState>
+        ) : (
+          <table>
+            <thead>
+              <tr>
+                <th>ID</th>
+                <th>Subject</th>
+                <th>Status</th>
+                <th>Created</th>
+              </tr>
+            </thead>
+            <tbody>
+              {tickets.map((t) => (
+                <tr key={String(t.id)}>
+                  <td>{String(t.id)}</td>
+                  <td>{t.title}</td>
+                  <td>
+                    <span className={`online-badge${t.open ? " online" : ""}`}>
+                      <span className="online-dot" aria-hidden />
+                      {t.open ? "Open" : "Closed"}
+                    </span>
+                  </td>
+                  <td className="muted">{formatDate(t.createdAt)}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        )}
+      </ContentCard>
     </main>
   );
 }