feat: isolate all four portals with route groups + polished design system

Fix blank /org/login (and /admin/login): the guarded portal layout was
wrapping its own login route, rendering null when unauthenticated. Move
each portal's authed pages into a (authed)/(chapter) route group so login
pages live outside the guard.

Structure:
- app/(chapter)/* — chapter admin pages + guarded layout (was root-level)
- app/org/(authed)/* — org pages + guarded layout; /org/login now free
- app/admin/(authed)/* — admin pages + guarded layout; /admin/login free
- Root layout slimmed to providers only (no shared sidebar)
- Convert moved files' relative imports to @/app alias

Design system:
- PortalShell: shared sidebar shell (brand mark, themed active nav with
  accent bar, avatar dropdown user menu, loading skeletons)
- portal-theme.ts: per-portal theme tokens (violet/slate/blue/emerald)
- PortalLoginShell redesigned: two-column with gradient branding panel,
  dotted pattern, value-prop highlights, built-in back link
- New shadcn components: Avatar, DropdownMenu, Skeleton
- Move shared DraftCard to _components/draft-card.tsx (used by 2 portals)
- Portal selector: remove Super Admin card, icon tiles, hover lift
- All 4 login pages use react-hook-form + Zod + themed shell
- Member nav restored to full 11-section list with icons

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

apps/web/app/page.tsx

@@ -1,71 +1,67 @@
 import Link from 'next/link';
-import { ArrowRight } from 'lucide-react';
+import { ArrowRight, Building2, Network, UserRound } from 'lucide-react';
 
 const PORTALS = [
   {
     href: '/org/login',
-    title: 'Organisation Portal',
-    description: 'Manage multiple chapters, org-wide routing rules and admin access.',
-    badge: 'Org Admin',
-    accent: 'border-l-4 border-l-violet-500',
-    badgeClass: 'bg-violet-100 text-violet-700',
-    hoverClass: 'hover:border-violet-300',
+    title: 'Organisation',
+    description: 'Manage chapters, org-wide rules and admin access.',
+    icon: Network,
+    iconWrap: 'bg-violet-100 text-violet-600',
+    ring: 'hover:ring-violet-200 hover:border-violet-300',
   },
   {
     href: '/login',
-    title: 'Chapter Portal',
-    description: 'Approve messages, manage groups, configure routing rules and AI drafts.',
-    badge: 'Chapter Admin',
-    accent: 'border-l-4 border-l-blue-500',
-    badgeClass: 'bg-blue-100 text-blue-700',
-    hoverClass: 'hover:border-blue-300',
+    title: 'Chapter',
+    description: 'Approve messages, manage groups and routing rules.',
+    icon: Building2,
+    iconWrap: 'bg-blue-100 text-blue-600',
+    ring: 'hover:ring-blue-200 hover:border-blue-300',
   },
   {
     href: '/member-login',
-    title: 'Member Portal',
-    description: 'View digests, manage your privacy settings and explore your community.',
-    badge: 'Member',
-    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',
+    title: 'Member',
+    description: 'View digests, manage privacy and explore your community.',
+    icon: UserRound,
+    iconWrap: 'bg-emerald-100 text-emerald-600',
+    ring: 'hover:ring-emerald-200 hover:border-emerald-300',
   },
 ];
 
 export default function Home() {
   return (
-    <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 className="min-h-screen flex items-center justify-center bg-gradient-to-b from-muted/40 to-background p-6">
+      <div className="w-full max-w-md space-y-10">
+        <div className="text-center space-y-3">
+          <div className="inline-flex size-12 rounded-2xl bg-gradient-to-br from-slate-700 to-slate-900 items-center justify-center text-white font-bold text-xl shadow-lg mx-auto">
+            T
+          </div>
+          <div className="space-y-1">
+            <h1 className="text-2xl font-bold tracking-tight">Welcome to TOWER</h1>
+            <p className="text-sm text-muted-foreground">Choose how you want to sign in</p>
+          </div>
         </div>
 
         <div className="space-y-3">
-          {PORTALS.map((p) => (
-            <Link
-              key={p.href}
-              href={p.href}
-              className={`group flex items-start gap-4 bg-card rounded-xl border p-5 transition-colors ${p.accent} ${p.hoverClass}`}
-            >
-              <div className="flex-1 min-w-0">
-                <div className="flex items-center gap-2 mb-1">
-                  <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>
+          {PORTALS.map((p) => {
+            const Icon = p.icon;
+            return (
+              <Link
+                key={p.href}
+                href={p.href}
+                className={`group flex items-center gap-4 bg-card rounded-2xl border p-4 shadow-sm ring-1 ring-transparent transition-all hover:shadow-md ${p.ring}`}
+              >
+                <div className={`size-11 rounded-xl flex items-center justify-center shrink-0 ${p.iconWrap}`}>
+                  <Icon className="size-5" />
                 </div>
-                <p className="text-xs text-muted-foreground leading-relaxed">{p.description}</p>
-              </div>
-              <ArrowRight className="size-4 text-muted-foreground shrink-0 mt-0.5 transition-transform group-hover:translate-x-0.5" />
-            </Link>
-          ))}
+                <div className="flex-1 min-w-0">
+                  <p className="font-semibold text-sm">{p.title} Portal</p>
+                  <p className="text-xs text-muted-foreground leading-relaxed mt-0.5">{p.description}</p>
+                </div>
+                <ArrowRight className="size-4 text-muted-foreground shrink-0 transition-transform group-hover:translate-x-0.5" />
+              </Link>
+            );
+          })}
         </div>
 
         <p className="text-center text-xs text-muted-foreground">