frontend: add login page and auth guard

Add authentication flow to the frontend:
- authStore with token management (localStorage persistence)
- Login page with username/password form at /login
- Layout-level auth guard that redirects to /login when no valid
  session exists, validates token on load via GET /api/auth/me
- Top navigation bar showing username and admin link when applicable

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/routes/login/+page.svelte

@@ -0,0 +1,166 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { setToken, isAuthenticated } from '../stores/authStore.svelte';
+	import { onMount } from 'svelte';
+
+	let username = $state('');
+	let password = $state('');
+	let error = $state('');
+	let loading = $state(false);
+
+	onMount(() => {
+		if (isAuthenticated()) {
+			goto('/');
+		}
+	});
+
+	async function handleLogin(event: Event) {
+		event.preventDefault();
+		error = '';
+		loading = true;
+
+		try {
+			const response = await fetch('/api/auth/login', {
+				method: 'POST',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({ username, password })
+			});
+
+			if (!response.ok) {
+				const data = await response.json().catch(() => null);
+				error = data?.description || 'Invalid username or password';
+				return;
+			}
+
+			const data = await response.json();
+			setToken(data.token);
+			await goto('/');
+		} catch (e) {
+			error = 'Connection error. Please try again.';
+		} finally {
+			loading = false;
+		}
+	}
+</script>
+
+<svelte:head>
+	<title>Login</title>
+</svelte:head>
+
+<div class="login-container">
+	<div class="login-box">
+		<h1>GameStream</h1>
+		<form onsubmit={handleLogin}>
+			<div class="field">
+				<label for="username">Username</label>
+				<input
+					id="username"
+					type="text"
+					bind:value={username}
+					autocomplete="username"
+					required
+					disabled={loading}
+				/>
+			</div>
+			<div class="field">
+				<label for="password">Password</label>
+				<input
+					id="password"
+					type="password"
+					bind:value={password}
+					autocomplete="current-password"
+					required
+					disabled={loading}
+				/>
+			</div>
+			{#if error}
+				<div class="error">{error}</div>
+			{/if}
+			<button type="submit" disabled={loading}>
+				{loading ? 'Signing in...' : 'Sign in'}
+			</button>
+		</form>
+	</div>
+</div>
+
+<style>
+	.login-container {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		min-height: 100vh;
+	}
+
+	.login-box {
+		background-color: #1a1a2e;
+		border: 1px solid #333;
+		border-radius: 12px;
+		padding: 2.5rem;
+		width: 100%;
+		max-width: 380px;
+	}
+
+	h1 {
+		color: #e0e0e0;
+		margin: 0 0 1.5rem 0;
+		font-size: 1.5rem;
+	}
+
+	.field {
+		margin-bottom: 1rem;
+	}
+
+	label {
+		display: block;
+		color: #aaa;
+		font-size: 0.85rem;
+		margin-bottom: 0.3rem;
+	}
+
+	input {
+		width: 100%;
+		padding: 0.6rem 0.8rem;
+		border: 1px solid #444;
+		border-radius: 6px;
+		background-color: #0f0f23;
+		color: #e0e0e0;
+		font-size: 1rem;
+		box-sizing: border-box;
+	}
+
+	input:focus {
+		outline: none;
+		border-color: #00aaff;
+	}
+
+	input:disabled {
+		opacity: 0.6;
+	}
+
+	.error {
+		color: #ff4444;
+		font-size: 0.85rem;
+		margin-bottom: 1rem;
+	}
+
+	button {
+		width: 100%;
+		padding: 0.7rem;
+		border: none;
+		border-radius: 6px;
+		background-color: #00aaff;
+		color: white;
+		font-size: 1rem;
+		cursor: pointer;
+		transition: background-color 0.2s;
+	}
+
+	button:hover:not(:disabled) {
+		background-color: #0088cc;
+	}
+
+	button:disabled {
+		opacity: 0.6;
+		cursor: not-allowed;
+	}
+</style>