Polish public error and 404 screens with brand atmosphere.

Shared ErrorScreen composition, i18n for en/nl/it, Sentry on route errors, and a self-contained global-error fallback that matches the hotel gold theme.

Co-authored-by: Cursor <[email protected]>

src/app/globals.css

@@ -1357,3 +1357,130 @@ details[open] > summary .details-open\:block {
 details[open] > summary .details-open\:rotate-180 {
 	transform: rotate(180deg);
 }
+
+/* ── Public error / 404 screen ───────────────────────────── */
+@keyframes error-screen-rise {
+	from {
+		opacity: 0;
+		transform: translateY(14px);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+.error-screen {
+	position: relative;
+	isolation: isolate;
+	display: grid;
+	place-items: center;
+	min-height: min(70vh, 36rem);
+	padding: 2rem 1rem 3rem;
+}
+
+.error-screen-glow {
+	pointer-events: none;
+	position: absolute;
+	inset: 10% 15% auto;
+	height: 12rem;
+	border-radius: 50%;
+	background: radial-gradient(
+		ellipse at center,
+		color-mix(in srgb, var(--color-primary) 35%, transparent),
+		transparent 70%
+	);
+	filter: blur(8px);
+	z-index: 0;
+	opacity: 0.85;
+}
+
+.error-screen-panel {
+	position: relative;
+	z-index: 1;
+	width: min(100%, 28rem);
+	text-align: center;
+	padding: 2.25rem 1.75rem 2rem;
+	border-radius: 1.25rem;
+	border: 1px solid color-mix(in srgb, var(--color-primary) 28%, var(--border-subtle));
+	background: linear-gradient(
+		165deg,
+		color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)),
+		var(--color-surface)
+	);
+	box-shadow:
+		0 20px 48px color-mix(in srgb, rgb(0, 0, 0) 18%, transparent),
+		inset 0 1px 0 color-mix(in srgb, var(--color-primary) 18%, transparent);
+	animation: error-screen-rise 0.45s ease-out both;
+}
+
+.error-screen-code {
+	margin: 0 0 0.65rem;
+	font-family: var(--font-pixel), "Courier New", monospace;
+	font-size: clamp(2.75rem, 9vw, 3.75rem);
+	font-weight: 700;
+	letter-spacing: 0.06em;
+	line-height: 1;
+	color: var(--color-primary-readable, var(--color-primary));
+	text-shadow: 0 0 36px color-mix(in srgb, var(--color-primary) 45%, transparent);
+}
+
+.error-screen-title {
+	margin: 0 0 0.4rem;
+	font-size: 1.4rem;
+	font-weight: 800;
+	letter-spacing: -0.02em;
+	color: var(--color-text);
+}
+
+.error-screen-subtitle {
+	margin: 0 0 0.85rem;
+	font-size: 1rem;
+	font-weight: 600;
+	color: var(--color-text);
+	opacity: 0.88;
+}
+
+.error-screen-body {
+	margin: 0 0 1.5rem;
+	font-size: 0.95rem;
+	line-height: 1.55;
+	color: var(--color-text-muted);
+}
+
+.error-screen-actions {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.65rem;
+	justify-content: center;
+}
+
+.error-screen-actions .btn {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.45rem;
+}
+
+.error-screen-btn-icon {
+	width: 1rem;
+	height: 1rem;
+	flex-shrink: 0;
+}
+
+.error-screen-footer {
+	margin-top: 1.25rem;
+}
+
+.error-screen-digest {
+	margin: 0;
+	font-size: 0.72rem;
+	color: var(--color-text-muted);
+	font-variant-numeric: tabular-nums;
+	word-break: break-all;
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.error-screen-panel {
+		animation: none;
+	}
+}