feat: React app shell with global styles and state-based routing (Task 8)

- index.css: brand CSS custom properties, .btn, input styles, .app-shell layout
- App.tsx: session token extraction from URL, /api/auth/me validation, 4-route shell
- main.tsx: renders App with StrictMode

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

client/src/index.css

@@ -0,0 +1,63 @@
+/* CSS custom properties */
+:root {
+  --color-gold: #D4AF37;
+  --color-blue: #4169E1;
+  --color-parchment: #F5E6D3;
+  --color-forest: #3C2415;
+  --color-brown: #654321;
+  --font-header: 'Cinzel', serif;
+  --font-body: 'Open Sans', sans-serif;
+  --font-mono: 'Source Code Pro', monospace;
+}
+
+/* Reset + base */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+body {
+  font-family: var(--font-body);
+  background: var(--color-parchment);
+  color: var(--color-forest);
+  min-height: 100vh;
+}
+
+/* Typography */
+h1, h2, h3 { font-family: var(--font-header); color: var(--color-forest); }
+code, .mono { font-family: var(--font-mono); }
+
+/* Shared button style */
+.btn {
+  display: inline-block;
+  padding: 0.7rem 1.6rem;
+  background: var(--color-gold);
+  color: var(--color-forest);
+  border: 2px solid var(--color-forest);
+  font-family: var(--font-header);
+  font-size: 1rem;
+  font-weight: 600;
+  cursor: pointer;
+  text-decoration: none;
+}
+.btn:hover { background: var(--color-forest); color: var(--color-parchment); }
+.btn-ghost {
+  background: transparent;
+  border-color: var(--color-gold);
+  color: var(--color-forest);
+}
+
+/* Input */
+input[type="text"], input[type="email"] {
+  width: 100%;
+  padding: 0.6rem 0.8rem;
+  border: 2px solid var(--color-brown);
+  background: white;
+  font-family: var(--font-body);
+  font-size: 1rem;
+  color: var(--color-forest);
+}
+input:focus { outline: 2px solid var(--color-gold); outline-offset: 1px; }
+
+/* Layout shell */
+.app-shell {
+  max-width: 680px;
+  margin: 0 auto;
+  padding: 1rem;
+}