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

@@ -1,8 +1,9 @@
 import { redirect } from "next/navigation";
+import { applyTeam } from "@/actions/applications";
+import { ContentCard, EmptyState } from "@/components/public/ui";
 import { auth } from "@/lib/auth";
 import { prisma } from "@/lib/prisma";
 import { siteSettings } from "@/lib/services/site-settings";
-import { applyTeam } from "@/actions/applications";
 
 export const dynamic = "force-dynamic";
 
@@ -35,38 +36,28 @@ export default async function ApplyTeamPage() {
   const appliedTeamIds = new Set(myApps.map((a) => a.rankId));
 
   return (
-    <main>
-      <div className="hero">
-        <h1 style={{ margin: "0 0 0.5rem" }}>Apply for the {hotelName} team</h1>
-        <p className="muted" style={{ margin: 0 }}>
-          We open team applications periodically. If you see a team you fit, do not hesitate to
-          apply!
-        </p>
-      </div>
+    <main style={{ display: "grid", gap: "1.5rem" }}>
+      <ContentCard
+        icon="🤝"
+        title={`Apply for the ${hotelName} team`}
+        subtitle="We open team applications periodically. If you see a team you fit, do not hesitate to apply!"
+      />
 
       {teams.length === 0 ? (
-        <div className="card">
-          <h3 style={{ marginTop: 0 }}>No team positions open</h3>
-          <p className="muted" style={{ margin: 0 }}>
+        <ContentCard icon="🤝" title="No team positions open">
+          <EmptyState icon="🤝">
             There are currently no open team positions. Please come back later to check for new
             openings. Thank you!
-          </p>
-        </div>
+          </EmptyState>
+        </ContentCard>
       ) : (
-        <div className="grid cols-2">
+        <div className="card-grid sm-2">
           {teams.map((team) => {
             const teamId = Number(team.id);
             const alreadyApplied = appliedTeamIds.has(teamId);
             return (
-              <article key={String(team.id)} className="card">
-                <div
-                  style={{
-                    display: "flex",
-                    gap: "0.75rem",
-                    alignItems: "center",
-                    marginBottom: "0.5rem",
-                  }}
-                >
+              <article key={String(team.id)} className="content-card">
+                <div className="content-card-head">
                   {team.badge ? (
                     /* eslint-disable-next-line @next/next/no-img-element */
                     <img
@@ -75,45 +66,54 @@ export default async function ApplyTeamPage() {
                       width={40}
                       height={40}
                     />
-                  ) : null}
-                  <div>
-                    <h3 style={{ margin: 0, color: team.staffColor || undefined }}>
+                  ) : (
+                    <span className="content-card-icon" aria-hidden>
+                      🤝
+                    </span>
+                  )}
+                  <div className="content-card-head-text">
+                    <p className="content-card-title" style={{ color: team.staffColor || undefined }}>
                       {team.rankName}
-                    </h3>
+                    </p>
                     {team.jobDescription ? (
-                      <p className="muted" style={{ margin: 0 }}>
-                        {team.jobDescription}
-                      </p>
+                      <p className="content-card-subtitle">{team.jobDescription}</p>
                     ) : null}
                   </div>
                 </div>
 
-                {alreadyApplied ? (
-                  <button type="button" className="btn btn-danger" disabled style={{ width: "100%" }}>
-                    Your application is pending
-                  </button>
-                ) : (
-                  <form action={applyTeam}>
-                    {/* The team id is the application's rank flag; the applicant
-                        is re-read from the session inside the action. */}
-                    <input type="hidden" name="teamId" value={String(team.id)} />
-                    <label htmlFor={`content-${team.id}`} className="muted">
-                      About you
-                    </label>
-                    <textarea
-                      id={`content-${team.id}`}
-                      name="content"
-                      required
-                      minLength={10}
-                      rows={5}
-                      placeholder={`Tell us why you'd be a great fit for ${team.rankName}…`}
-                      style={{ width: "100%", margin: "0.4rem 0 0.75rem", resize: "vertical" }}
-                    />
-                    <button type="submit" className="btn btn-primary" style={{ width: "100%" }}>
-                      Apply for {team.rankName}
+                <div className="content-card-body">
+                  {alreadyApplied ? (
+                    <button
+                      type="button"
+                      className="btn btn-danger"
+                      disabled
+                      style={{ width: "100%" }}
+                    >
+                      Your application is pending
                     </button>
-                  </form>
-                )}
+                  ) : (
+                    <form action={applyTeam}>
+                      {/* The team id is the application's rank flag; the applicant
+                          is re-read from the session inside the action. */}
+                      <input type="hidden" name="teamId" value={String(team.id)} />
+                      <label htmlFor={`content-${team.id}`} className="muted">
+                        About you
+                      </label>
+                      <textarea
+                        id={`content-${team.id}`}
+                        name="content"
+                        required
+                        minLength={10}
+                        rows={5}
+                        placeholder={`Tell us why you'd be a great fit for ${team.rankName}…`}
+                        style={{ width: "100%", margin: "0.4rem 0 0.75rem", resize: "vertical" }}
+                      />
+                      <button type="submit" className="btn btn-primary" style={{ width: "100%" }}>
+                        Apply for {team.rankName}
+                      </button>
+                    </form>
+                  )}
+                </div>
               </article>
             );
           })}