From 762d5c0fc0f7591e983650ad3a673c64e6592cad Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sun, 30 Nov 2025 22:26:32 -0800
Subject: [PATCH] add auth layout with centered container

---
 src/routes/auth/+layout.svelte | 54 ++++++++++++++++++++++++++++++++++
 1 file changed, 54 insertions(+)
 create mode 100644 src/routes/auth/+layout.svelte

diff --git a/src/routes/auth/+layout.svelte b/src/routes/auth/+layout.svelte
new file mode 100644
index 00000000..ccc29449
--- /dev/null
+++ b/src/routes/auth/+layout.svelte
@@ -0,0 +1,54 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte'
+
+	interface Props {
+		children: Snippet
+	}
+
+	let { children }: Props = $props()
+</script>
+
+<div class="authContainer">
+	<div class="authBackground"></div>
+	<div class="authContent">
+		{@render children()}
+	</div>
+</div>
+
+<style lang="scss">
+	@use '$src/themes/spacing' as *;
+	@use '$src/themes/effects' as *;
+
+	.authContainer {
+		min-height: 100vh;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		position: relative;
+	}
+
+	.authBackground {
+		position: absolute;
+		inset: 0;
+		background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
+		background-size: cover;
+		background-position: center;
+		z-index: 0;
+
+		// Overlay for readability
+		&::after {
+			content: '';
+			position: absolute;
+			inset: 0;
+			background: rgba(0, 0, 0, 0.3);
+		}
+	}
+
+	.authContent {
+		position: relative;
+		z-index: 1;
+		width: 100%;
+		max-width: 420px;
+		margin: $unit-2x;
+	}
+</style>