feat: portal redesign — shadcn/ui, React Query, Zod, isolated portals

Foundation:
- CLAUDE.md with full coding rules (tech stack, patterns, redirect rules)
- Install @tanstack/react-query, zod, react-hook-form, shadcn/ui deps
- CSS variables design system (Tailwind v4 + tw-animate-css)
- Shared components: Button, Input, Label, Card, Badge, Separator, Form
- PortalLoginShell: two-column login layout (branding left, form right)
- PortalNav: shared sidebar nav used by all portals
- ReactQueryProvider in root layout
- api-client.ts: typed fetch wrapper (no raw fetch in components)

Portal isolation:
- Sidebar now returns null for all non-chapter routes; portals own their layout
- Admin layout: auth guard + PortalNav (slate accent)
- Org layout: auth guard + PortalNav (violet accent)
- Member layout: server-side cookie check → MemberNav client component
- Chapter admin sidebar: PortalNav (blue accent)

Login pages (all use react-hook-form + Zod + PortalLoginShell):
- /login → defaults next to /search (was /) — fixes redirect bug
- /admin/login → replaces /admin
- /org/login → replaces /org
- /member-login → two-step phone+OTP with proper form validation

Portal selector (/) redesigned with accent border-left cards

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

apps/web/app/page.tsx

@@ -1,62 +1,75 @@
 import Link from 'next/link';
+import { ArrowRight } from 'lucide-react';
 
 const PORTALS = [
   {
     href: '/org/login',
     title: 'Organisation Portal',
-    description: 'For org-level admins managing multiple chapters and org-wide rules.',
+    description: 'Manage multiple chapters, org-wide routing rules and admin access.',
     badge: 'Org Admin',
-    color: 'hover:border-violet-400',
-    badgeColor: 'bg-violet-100 text-violet-700',
+    accent: 'border-l-4 border-l-violet-500',
+    badgeClass: 'bg-violet-100 text-violet-700',
+    hoverClass: 'hover:border-violet-300',
   },
   {
     href: '/login',
     title: 'Chapter Portal',
-    description: 'For chapter admins approving messages, managing groups and routing rules.',
+    description: 'Approve messages, manage groups, configure routing rules and AI drafts.',
     badge: 'Chapter Admin',
-    color: 'hover:border-blue-400',
-    badgeColor: 'bg-blue-100 text-blue-700',
+    accent: 'border-l-4 border-l-blue-500',
+    badgeClass: 'bg-blue-100 text-blue-700',
+    hoverClass: 'hover:border-blue-300',
   },
   {
     href: '/member-login',
     title: 'Member Portal',
-    description: 'For community members to view digests, manage privacy and explore the directory.',
+    description: 'View digests, manage your privacy settings and explore your community.',
     badge: 'Member',
-    color: 'hover:border-emerald-400',
-    badgeColor: 'bg-emerald-100 text-emerald-700',
+    accent: 'border-l-4 border-l-emerald-500',
+    badgeClass: 'bg-emerald-100 text-emerald-700',
+    hoverClass: 'hover:border-emerald-300',
+  },
+  {
+    href: '/admin/login',
+    title: 'Super Admin',
+    description: 'Platform-wide administration — orgs, chapters, bots and system settings.',
+    badge: 'Platform',
+    accent: 'border-l-4 border-l-slate-500',
+    badgeClass: 'bg-slate-100 text-slate-700',
+    hoverClass: 'hover:border-slate-300',
   },
 ];
 
 export default function Home() {
   return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-50 p-6">
-      <div className="w-full max-w-lg">
-        <div className="mb-10 text-center">
-          <h1 className="text-3xl font-bold tracking-tight text-gray-900">TOWER</h1>
-          <p className="text-gray-500 mt-2 text-sm">Community Knowledge Infrastructure Platform</p>
+    <div className="min-h-screen flex items-center justify-center bg-muted/30 p-6">
+      <div className="w-full max-w-md space-y-8">
+        <div className="text-center space-y-2">
+          <h1 className="text-3xl font-bold tracking-tight">TOWER</h1>
+          <p className="text-muted-foreground text-sm">Community Knowledge Infrastructure Platform</p>
         </div>
 
-        <div className="flex flex-col gap-4">
+        <div className="space-y-3">
           {PORTALS.map((p) => (
             <Link
               key={p.href}
               href={p.href}
-              className={`bg-white rounded-2xl border border-gray-200 p-6 flex items-start gap-5 transition-colors ${p.color}`}
+              className={`group flex items-start gap-4 bg-card rounded-xl border p-5 transition-colors ${p.accent} ${p.hoverClass}`}
             >
-              <div className="flex-1">
+              <div className="flex-1 min-w-0">
                 <div className="flex items-center gap-2 mb-1">
-                  <h2 className="font-semibold text-gray-900">{p.title}</h2>
-                  <span className={`text-xs font-medium px-2 py-0.5 rounded-full ${p.badgeColor}`}>{p.badge}</span>
+                  <span className="font-semibold text-sm">{p.title}</span>
+                  <span className={`text-xs font-medium px-2 py-0.5 rounded-full ${p.badgeClass}`}>{p.badge}</span>
                 </div>
-                <p className="text-sm text-gray-500">{p.description}</p>
+                <p className="text-xs text-muted-foreground leading-relaxed">{p.description}</p>
               </div>
-              <span className="text-gray-300 text-xl mt-0.5">›</span>
+              <ArrowRight className="size-4 text-muted-foreground shrink-0 mt-0.5 transition-transform group-hover:translate-x-0.5" />
             </Link>
           ))}
         </div>
 
-        <p className="text-center text-xs text-gray-400 mt-8">
-          Administrators are provisioned by your organisation — contact your org admin if you need access.
+        <p className="text-center text-xs text-muted-foreground">
+          Access is provisioned by your organisation admin
         </p>
       </div>
     </div>