feat(frontend): add core UI components and pages

- Add global CSS with mobile-first styling and CSS custom properties
- Create base UI components: Button, Input, Checkbox, Select
- Add BottomNav component with icons for Tasks, Projects, Tags, Settings
- Update app layout to include BottomNav and auth handling
- Create Settings page with API key input and sync controls
- Create auth pages: /auth/login (OAuth) and /auth/callback
- Add placeholder pages for Projects and Tags
- Implement manual API key authentication for MVP testing
- Add logout functionality and user info display
- Support for safe-area-inset (mobile notches)

opal-web/src/routes/+layout.svelte

@@ -1,11 +1,32 @@
 <script>
-	import favicon from '$lib/assets/favicon.svg';
-
-	let { children } = $props();
+	import '../app.css';
+	import BottomNav from '$lib/components/BottomNav.svelte';
+	import { authStore } from '$lib/stores/auth.js';
+	import { page } from '$app/stores';
+	
+	// Check if on auth pages (don't show nav)
+	$: isAuthPage = $page.url.pathname.startsWith('/auth');
 </script>
 
-<svelte:head>
-	<link rel="icon" href={favicon} />
-</svelte:head>
+<div class="app">
+	<main class="main">
+		<slot />
+	</main>
+	
+	{#if $authStore.isAuthenticated && !isAuthPage}
+		<BottomNav />
+	{/if}
+</div>
 
-{@render children()}
+<style>
+	.app {
+		min-height: 100vh;
+		display: flex;
+		flex-direction: column;
+	}
+	
+	.main {
+		flex: 1;
+		width: 100%;
+	}
+</style>