Bring the codebase in line with CLAUDE.md conventions

- Convert getRouter, OrderingPage, and OrderStatusRoute from function
  declarations to arrow functions
- Migrate header-user.tsx off raw Tailwind classes onto a co-located
  SCSS module, and remove Tailwind entirely (deps, Vite plugin,
  styles.css) since it was the only consumer and duplicated the
  documented SCSS Modules system
- Fix CLAUDE.md's stale ~/ alias example and structure diagram to
  match the project's actual #/ and @/ aliases and directories

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

src/integrations/better-auth/header-user.module.scss

@@ -0,0 +1,52 @@
+@use '../../styles/variables' as *;
+
+.avatar {
+  height: 2rem;
+  width: 2rem;
+  background: $color-surface;
+}
+
+.avatarPulse {
+  animation: pulse 1.5s ease-in-out infinite;
+}
+
+.avatarInitial {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: $color-text-muted;
+}
+
+.session {
+  display: flex;
+  align-items: center;
+  gap: $space-2;
+}
+
+.signOut {
+  flex: 1;
+  height: 2.25rem;
+  padding: 0 $space-3;
+  font-size: 0.875rem;
+  font-weight: 500;
+  background: $color-background;
+  color: $color-text;
+  border: 1px solid $color-border;
+  transition: background-color 0.15s ease;
+
+  &:hover {
+    background: $color-surface;
+  }
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}

src/integrations/better-auth/header-user.tsx

@@ -1,31 +1,29 @@
 import { authClient } from '#/lib/auth-client'
 
+import styles from './header-user.module.scss'
+
 const BetterAuthHeader = () => {
   const { data: session, isPending } = authClient.useSession()
 
   if (isPending) {
-    return (
-      <div className="h-8 w-8 bg-neutral-100 dark:bg-neutral-800 animate-pulse" />
-    )
+    return <div className={`${styles.avatar} ${styles.avatarPulse}`} />
   }
 
   if (session?.user) {
     return (
-      <div className="flex items-center gap-2">
+      <div className={styles.session}>
         {session.user.image ? (
-          <img src={session.user.image} alt="" className="h-8 w-8" />
+          <img src={session.user.image} alt="" className={styles.avatar} />
         ) : (
-          <div className="h-8 w-8 bg-neutral-100 dark:bg-neutral-800 flex items-center justify-center">
-            <span className="text-xs font-medium text-neutral-600 dark:text-neutral-400">
-              {session.user.name.charAt(0).toUpperCase() || 'U'}
-            </span>
+          <div className={`${styles.avatar} ${styles.avatarInitial}`}>
+            <span>{session.user.name.charAt(0).toUpperCase() || 'U'}</span>
           </div>
         )}
         <button
           onClick={() => {
             void authClient.signOut()
           }}
-          className="flex-1 h-9 px-4 text-sm font-medium bg-white dark:bg-neutral-900 text-neutral-900 dark:text-neutral-50 border border-neutral-300 dark:border-neutral-700 hover:bg-neutral-50 dark:hover:bg-neutral-800 transition-colors"
+          className={styles.signOut}
         >
           Sign out
         </button>