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

@@ -65,7 +65,7 @@ export default async function RadioApplyPage({
 		: null;
 
 	return (
-		<main style={{ display: "grid", gap: "1.5rem" }}>
+		<main className="page-grid">
 			{submitted === "1" ? (
 				<div role="status" style={feedbackStyle("success")}>
 					{t("success.submitted")}

src/app/(site)/radio/contests/[id]/page.tsx

@@ -33,7 +33,7 @@ export default async function RadioContestDetailPage({
 	const active = contest.isActive ? "Active" : "Ended";
 
 	return (
-		<main style={{ display: "grid", gap: "1.5rem" }}>
+		<main className="page-grid">
 			<p className="muted" style={{ margin: 0 }}>
 				<Link href="/radio/contests">← Back to contests</Link>
 			</p>

src/app/(site)/radio/contests/page.tsx

@@ -23,7 +23,7 @@ export default async function RadioContestsPage() {
 		.catch(() => []);
 
 	return (
-		<main style={{ display: "grid", gap: "1.5rem" }}>
+		<main className="page-grid">
 			<ContentCard icon="🎉" title={t("title")} subtitle={t("subtitle")} />
 
 			<ContentCard padded={contests.length === 0}>

src/app/(site)/radio/giveaways/[id]/page.tsx

@@ -38,7 +38,7 @@ export default async function RadioGiveawayDetailPage({
 			: null);
 
 	return (
-		<main style={{ display: "grid", gap: "1.5rem" }}>
+		<main className="page-grid">
 			<p className="muted" style={{ margin: 0 }}>
 				<Link href="/radio/giveaways">← Back to giveaways</Link>
 			</p>

src/app/(site)/radio/giveaways/page.tsx

@@ -25,7 +25,7 @@ export default async function RadioGiveawaysPage() {
 		.catch(() => []);
 
 	return (
-		<main style={{ display: "grid", gap: "1.5rem" }}>
+		<main className="page-grid">
 			<ContentCard icon="🎁" title={t("title")} subtitle={t("subtitle")} />
 
 			<ContentCard padded={giveaways.length === 0}>

src/app/(site)/radio/leaderboard/page.tsx

@@ -38,7 +38,7 @@ export default async function RadioLeaderboardPage() {
 	const rows = await loadRows();
 
 	return (
-		<main style={{ display: "grid", gap: "1.5rem" }}>
+		<main className="page-grid">
 			<ContentCard icon="🏆" title={t("title")} subtitle={t("subtitle")} />
 
 			<ContentCard padded={rows.length === 0}>

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

@@ -105,7 +105,7 @@ export default async function RadioPage() {
 	const isLive = Boolean(streamUrl);
 
 	return (
-		<main style={{ display: "grid", gap: "1.5rem" }}>
+		<main className="page-grid">
 			{/* ── Header: live stream + now playing ─────────────────────── */}
 			<ContentCard
 				icon="📻"

src/app/(site)/radio/schedule/page.tsx

@@ -74,7 +74,7 @@ export default async function RadioSchedulePage() {
 	const hasAny = schedules.length > 0;
 
 	return (
-		<main style={{ display: "grid", gap: "1.5rem" }}>
+		<main className="page-grid">
 			<ContentCard icon="🗓️" title={t("title")} subtitle={t("subtitle")} />
 
 			<ContentCard padded={!hasAny}>

src/app/(site)/radio/shouts/page.tsx

@@ -73,7 +73,7 @@ export default async function RadioShoutsPage({
 						: null;
 
 	return (
-		<main style={{ display: "grid", gap: "1.5rem" }}>
+		<main className="page-grid">
 			{posted === "1" ? (
 				<div role="status" style={feedbackStyle("success")}>
 					{t("success.posted")}