major fixes

apps/web/src/lib/components/AccessRestrictedPanel.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { Lock } from "@lucide/svelte";
+	import { i18n } from "$lib/i18n";
+
+	let {
+		featureKey = undefined,
+		compact = false
+	}: {
+		/** The denied feature key — shown as a hint so an admin knows what to re-enable. */
+		featureKey?: string;
+		/** Tighter spacing when embedded under an existing page heading. */
+		compact?: boolean;
+	} = $props();
+</script>
+
+<div
+	class={compact ? "space-y-4" : "mx-auto max-w-2xl space-y-4 py-6"}
+	data-testid="access-restricted-panel"
+>
+	<div class="flex gap-4 rounded-lg border border-border bg-muted/30 px-5 py-5">
+		<div
+			class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground"
+			aria-hidden="true"
+		>
+			<Lock class="h-5 w-5" />
+		</div>
+		<div class="min-w-0 space-y-1.5">
+			<h2 class="text-base font-semibold text-foreground">
+				{i18n.t("access.restricted.title")}
+			</h2>
+			<p class="text-sm text-muted-foreground">
+				{i18n.t("access.restricted.message")}
+			</p>
+			{#if featureKey}
+				<p class="pt-1 text-xs text-muted-foreground">
+					{i18n.t("access.restricted.featureHint", { feature: featureKey })}
+				</p>
+			{/if}
+		</div>
+	</div>
+</div>