feat: Introduce mobile simulator UI with new routes, screens, shared application chrome, and updated dependencies.

WebApp/src/routes/+layout.svelte

@@ -1,9 +1,34 @@
 <script lang="ts">
 	import './layout.css';
+	import { onMount } from 'svelte';
 	import favicon from '$lib/assets/favicon.svg';
 
 	let { children } = $props();
+
+	onMount(() => {
+		const bodyClasses = ['h-screen', 'bg-[#0a0a0c]', 'text-gray-200', 'overflow-hidden', 'flex'];
+		document.body.classList.add(...bodyClasses);
+		document.documentElement.dataset.theme = 'black';
+		const simWindow = window as Window & { __mobileSimLoaded?: boolean };
+		if (!simWindow.__mobileSimLoaded) {
+			simWindow.__mobileSimLoaded = true;
+			void import('$lib/sim/mobile-sim.js');
+		}
+
+		return () => {
+			document.body.classList.remove(...bodyClasses);
+		};
+	});
 </script>
 
-<svelte:head><link rel="icon" href={favicon} /></svelte:head>
+<svelte:head>
+	<title>SecureCam Web Dashboard</title>
+	<link rel="icon" href={favicon} />
+	<link rel="preconnect" href="https://fonts.googleapis.com" />
+	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
+	<link
+		href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
+		rel="stylesheet"
+	/>
+</svelte:head>
 {@render children()}