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/settings/connections/page.tsx

@@ -1,5 +1,6 @@
 import Link from "next/link";
 import { redirect } from "next/navigation";
+import { ContentCard } from "@/components/public/ui";
 import { auth } from "@/lib/auth";
 import { prisma } from "@/lib/prisma";
 import { env } from "@/env";
@@ -14,11 +15,13 @@ const PROVIDERS = [
   {
     key: "discord",
     label: "Discord",
+    icon: "🎮",
     available: Boolean(env.DISCORD_CLIENT_ID && env.DISCORD_CLIENT_SECRET),
   },
   {
     key: "google",
     label: "Google",
+    icon: "🔵",
     available: Boolean(env.GOOGLE_CLIENT_ID && env.GOOGLE_CLIENT_SECRET),
   },
 ] as const;
@@ -48,85 +51,82 @@ export default async function ConnectionsPage() {
   const callbackUrl = "/settings/connections";
 
   return (
-    <main style={{ maxWidth: 560 }}>
-      <p className="muted">
+    <main style={{ display: "grid", gap: "1.5rem", maxWidth: 620, margin: "0 auto" }}>
+      <p className="muted" style={{ margin: 0 }}>
         <Link href="/settings">← Settings</Link>
       </p>
-      <h1>Connected accounts</h1>
-      <p className="muted" style={{ marginTop: 0 }}>
-        Link a social account so you can sign in with one click. We match it to
-        your hotel account by e-mail, so use the address on file:{" "}
-        <strong>{session.user.name}</strong>.
-      </p>
 
-      {lookupFailed ? (
-        <div className="card" style={{ marginBottom: "1.5rem" }}>
-          <p className="muted" style={{ margin: 0 }}>
-            We couldn't read your linked accounts right now. You can still connect
-            below — your status will show once it's available.
+      <ContentCard
+        icon="🔗"
+        title="Connected accounts"
+        subtitle="Link a social account so you can sign in with one click"
+      >
+        <p className="muted" style={{ marginTop: 0 }}>
+          We match it to your hotel account by e-mail, so use the address on file:{" "}
+          <strong>{session.user.name}</strong>.
+        </p>
+
+        {lookupFailed ? (
+          <p className="muted" style={{ marginBottom: 0 }}>
+            We couldn't read your linked accounts right now. You can still connect below — your
+            status will show once it's available.
           </p>
-        </div>
-      ) : null}
+        ) : null}
+      </ContentCard>
 
-      <div className="grid" style={{ gap: "1rem" }}>
+      <div className="card-grid sm-2">
         {PROVIDERS.map((p) => {
           const isLinked = linked.has(p.key);
           return (
-            <div
+            <ContentCard
               key={p.key}
-              className="card"
-              style={{ display: "flex", alignItems: "center", gap: "1rem" }}
+              icon={p.icon}
+              title={p.label}
+              subtitle={
+                !p.available
+                  ? "Not available on this hotel."
+                  : isLinked
+                    ? "Connected — sign in with this account."
+                    : "Not connected."
+              }
             >
-              <div style={{ flex: 1 }}>
-                <h3 style={{ margin: "0 0 0.25rem" }}>{p.label}</h3>
-                <p className="muted" style={{ margin: 0 }}>
-                  {!p.available
-                    ? "Not available on this hotel."
-                    : isLinked
-                      ? "Connected — you can sign in with this account."
-                      : "Not connected."}
-                </p>
-              </div>
-              <div>
-                {isLinked ? (
-                  <span
-                    className="btn btn-outline"
-                    style={{ cursor: "default", pointerEvents: "none" }}
-                    aria-disabled="true"
-                  >
-                    Connected
-                  </span>
-                ) : p.available ? (
-                  // Plain link into NextAuth's built-in sign-in handler. Re-using
-                  // the same OAuth flow as /login binds the provider to the
-                  // matching hotel account (see auth.ts signIn callback).
-                  <a
-                    className="btn btn-primary"
-                    href={`/api/auth/signin/${p.key}?callbackUrl=${encodeURIComponent(
-                      callbackUrl,
-                    )}`}
-                  >
-                    Connect {p.label}
-                  </a>
-                ) : (
-                  <span
-                    className="btn"
-                    style={{ cursor: "not-allowed", opacity: 0.55, pointerEvents: "none" }}
-                    aria-disabled="true"
-                  >
-                    Unavailable
-                  </span>
-                )}
-              </div>
-            </div>
+              {isLinked ? (
+                <span
+                  className="btn btn-outline"
+                  style={{ cursor: "default", pointerEvents: "none" }}
+                  aria-disabled="true"
+                >
+                  Connected
+                </span>
+              ) : p.available ? (
+                // Plain link into NextAuth's built-in sign-in handler. Re-using
+                // the same OAuth flow as /login binds the provider to the
+                // matching hotel account (see auth.ts signIn callback).
+                <a
+                  className="btn btn-primary"
+                  href={`/api/auth/signin/${p.key}?callbackUrl=${encodeURIComponent(
+                    callbackUrl,
+                  )}`}
+                >
+                  Connect {p.label}
+                </a>
+              ) : (
+                <span
+                  className="btn"
+                  style={{ cursor: "not-allowed", opacity: 0.55, pointerEvents: "none" }}
+                  aria-disabled="true"
+                >
+                  Unavailable
+                </span>
+              )}
+            </ContentCard>
           );
         })}
       </div>
 
-      <p className="muted" style={{ marginTop: "1.5rem", marginBottom: 0 }}>
-        Connecting takes you to the provider to authorise, then back here. If your
-        social account's e-mail doesn't match a hotel account, you'll be returned
-        to the login screen with a note.
+      <p className="muted" style={{ margin: 0 }}>
+        Connecting takes you to the provider to authorise, then back here. If your social account's
+        e-mail doesn't match a hotel account, you'll be returned to the login screen with a note.
       </p>
     </main>
   );