theme fix

src/components/PageLoader.tsx

@@ -0,0 +1,26 @@
+export function PageLoader() {
+  return (
+    <div className="page-loader" role="status" aria-label="Loading">
+      <svg
+        className="page-loader__tree"
+        viewBox="0 0 60 90"
+        width="72"
+        height="72"
+        xmlns="http://www.w3.org/2000/svg"
+        aria-hidden="true"
+      >
+        {/* Trunk */}
+        <rect x="26" y="58" width="8" height="28" rx="4" fill="#A0722A" />
+        {/* Side canopy depth */}
+        <circle cx="14" cy="52" r="14" fill="#16a34a" />
+        <circle cx="46" cy="52" r="14" fill="#16a34a" />
+        {/* Main canopy */}
+        <circle cx="30" cy="37" r="22" fill="#22c55e" />
+        {/* Light highlight */}
+        <circle cx="20" cy="27" r="10" fill="#4ade80" opacity="0.6" />
+        {/* Top tip */}
+        <circle cx="30" cy="17" r="10" fill="#4ade80" />
+      </svg>
+    </div>
+  )
+}

src/components/ProtectedRoute.tsx

@@ -1,6 +1,7 @@
 import { type ReactNode } from 'react'
 import { Navigate, useLocation } from 'react-router-dom'
 import { useAuth } from '../contexts/AuthContext'
+import { PageLoader } from './PageLoader'
 
 type Props = {
   children: ReactNode
@@ -11,12 +12,7 @@ export function ProtectedRoute({ children }: Props) {
   const location = useLocation()
 
   if (loading) {
-    return (
-      <div className="protected-route__loading" aria-live="polite">
-        <span className="protected-route__spinner" aria-hidden />
-        <p>Loading…</p>
-      </div>
-    )
+    return <PageLoader />
   }
 
   if (!user) {