Polish content pages: share AuthTopBar, page-grid helper and responsive tables

- Extract shared AuthTopBar frosted top bar; reuse in login & register
- Add .page-grid class replacing 48 inline grid styles
- Add .table-scroll + .table-cell-truncate helpers; wrap leaderboard/staff tables
- Constrain settings page width (max-w-5xl) and stack profile card on mobile
- Use theme background var for shop category icon (dark-mode safe)

src/app/(site)/staff/page.tsx

@@ -57,7 +57,7 @@ export default async function StaffPage() {
 	]);
 
 	return (
-		<main style={{ display: "grid", gap: "1.5rem" }}>
+		<main className="page-grid">
 			<ContentCard icon="🛡️" title={t("title")} subtitle={t("subtitle")} />
 
 			{teams.length > 0 ? (
@@ -96,26 +96,30 @@ export default async function StaffPage() {
 				{staff.length === 0 ? (
 					<EmptyState icon="🛡️">{t("emptyState")}</EmptyState>
 				) : (
-					<table>
-						<thead>
-							<tr>
-								<th>{t("colUsername")}</th>
-								<th>{t("colRank")}</th>
-								<th>{t("colMotto")}</th>
-							</tr>
-						</thead>
-						<tbody>
-							{staff.map((u) => (
-								<tr key={u.username}>
-									<td>
-										<Link href={`/u/${u.username}`}>{u.username}</Link>
-									</td>
-									<td>{u.rank}</td>
-									<td className="muted">{u.motto || "—"}</td>
+					<div className="table-scroll">
+						<table>
+							<thead>
+								<tr>
+									<th>{t("colUsername")}</th>
+									<th>{t("colRank")}</th>
+									<th>{t("colMotto")}</th>
 								</tr>
-							))}
-						</tbody>
-					</table>
+							</thead>
+							<tbody>
+								{staff.map((u) => (
+									<tr key={u.username}>
+										<td>
+											<Link href={`/u/${u.username}`}>{u.username}</Link>
+										</td>
+										<td>{u.rank}</td>
+										<td className="muted table-cell-truncate">
+											{u.motto || "—"}
+										</td>
+									</tr>
+								))}
+							</tbody>
+						</table>
+					</div>
 				)}
 			</ContentCard>
 		</main>