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)/leaderboard/page.tsx

@@ -142,7 +142,7 @@ export default async function LeaderboardPage({
 			: null;
 
 	return (
-		<main style={{ display: "grid", gap: "1.5rem" }}>
+		<main className="page-grid">
 			<ContentCard
 				icon="📊"
 				title={t("title")}
@@ -165,58 +165,60 @@ export default async function LeaderboardPage({
 				{rows.length === 0 ? (
 					<EmptyState icon="📊">{t("emptyState")}</EmptyState>
 				) : (
-					<table>
-						<thead>
-							<tr>
-								<th style={{ width: "3rem" }}>#</th>
-								<th style={{ width: "3.5rem" }}>{t("colAvatar")}</th>
-								<th>{t("colPlayer")}</th>
-								<th style={{ textAlign: "right" }}>{t(`tab_${active}`)}</th>
-							</tr>
-						</thead>
-						<tbody>
-							{rows.map((row, i) => {
-								return (
-									<tr key={row.username}>
-										<td>
-											<RankBadge position={i + 1} />
-										</td>
-										<td>
-											<UserAvatarThumbnail
-												figure={row.look}
-												alt={`${row.username} avatar`}
-											/>
-										</td>
-										<td>
-											<Link
-												href={`/u/${encodeURIComponent(row.username)}`}
-												style={{ fontWeight: 700 }}
-											>
-												{row.username}
-											</Link>
-										</td>
-										<td style={{ textAlign: "right" }}>
-											{activeCurrency ? (
-												<span
-													className="currency"
-													style={{ display: "inline-flex" }}
+					<div className="table-scroll">
+						<table>
+							<thead>
+								<tr>
+									<th style={{ width: "3rem" }}>#</th>
+									<th style={{ width: "3.5rem" }}>{t("colAvatar")}</th>
+									<th>{t("colPlayer")}</th>
+									<th style={{ textAlign: "right" }}>{t(`tab_${active}`)}</th>
+								</tr>
+							</thead>
+							<tbody>
+								{rows.map((row, i) => {
+									return (
+										<tr key={row.username}>
+											<td>
+												<RankBadge position={i + 1} />
+											</td>
+											<td>
+												<UserAvatarThumbnail
+													figure={row.look}
+													alt={`${row.username} avatar`}
+												/>
+											</td>
+											<td>
+												<Link
+													href={`/u/${encodeURIComponent(row.username)}`}
+													style={{ fontWeight: 700 }}
 												>
-													<CurrencyIcon
-														kind={activeCurrency}
-														size={22}
-														alt=""
-													/>
-													{row.value.toLocaleString()}
-												</span>
-											) : (
-												<strong>{formatValue(active, row.value)}</strong>
-											)}
-										</td>
-									</tr>
-								);
-							})}
-						</tbody>
-					</table>
+													{row.username}
+												</Link>
+											</td>
+											<td style={{ textAlign: "right" }}>
+												{activeCurrency ? (
+													<span
+														className="currency"
+														style={{ display: "inline-flex" }}
+													>
+														<CurrencyIcon
+															kind={activeCurrency}
+															size={22}
+															alt=""
+														/>
+														{row.value.toLocaleString()}
+													</span>
+												) : (
+													<strong>{formatValue(active, row.value)}</strong>
+												)}
+											</td>
+										</tr>
+									);
+								})}
+							</tbody>
+						</table>
+					</div>
 				)}
 			</ContentCard>
 		</main>