brand identity overhaul: match BRAND-IDENTITY.md across all pages

Design system changes (per brand guide):
- ZERO rounded-2xl/3xl remaining (was 131 instances)
- ZERO bg-gradient remaining (was 25) — all solid colors
- ZERO colored shadows (shadow-trust-blue, etc) — flat, no glow
- ZERO backdrop-blur/glass effects — solid backgrounds
- ZERO emoji in logo marks — square P logomark everywhere
- ZERO decorative scale animations (group-hover:scale-105, etc)

Tailwind config:
- Added brand color names: midnight, promise-blue, generosity-gold, fulfilled-green, alert-red, paper
- Kept legacy aliases (trust-blue, etc) for backwards compat
- --radius: 0.75rem → 0.5rem (tighter corners)

CSS:
- Removed glass, glass-dark, card-hover, pulse-ring, bounce-gentle, confetti-fall, scale-in animations
- Kept only purposeful animations: fadeUp, fadeIn, slideDown, shimmer, counter-roll
- --primary tuned to match Promise Blue exactly

Components:
- Button: removed all colored shadows, added 'blue' variant, removed rounded from sizes
- All UI components: rounded-xl/2xl → rounded-lg

Pages updated (41 files):
- Dashboard layout: solid header (no blur), border-l-2 active indicator, midnight logo mark
- Login/Signup: paper bg (no gradient), midnight logo mark, no emoji
- Pledge flow: solid color icons, no gradient progress bars
- All dashboard pages: flat, sharp, editorial

pledge-now-pay-later/src/app/dashboard/admin/page.tsx

@@ -93,7 +93,7 @@ export default function AdminPage() {
         <CardContent>
           <div className="flex gap-3 overflow-x-auto">
             {Object.entries(data.byStatus).map(([status, { count, amount }]) => (
-              <div key={status} className="flex-shrink-0 rounded-xl bg-muted/50 px-4 py-2 text-center min-w-[100px]">
+              <div key={status} className="flex-shrink-0 rounded-lg bg-muted/50 px-4 py-2 text-center min-w-[100px]">
                 <Badge variant={status === "paid" ? "success" : status === "overdue" ? "destructive" : "secondary"} className="text-[10px]">{status}</Badge>
                 <p className="text-lg font-bold mt-1">{count}</p>
                 <p className="text-[10px] text-muted-foreground">{fmt(amount)}</p>

pledge-now-pay-later/src/app/dashboard/events/[id]/page.tsx

@@ -141,7 +141,7 @@ export default function CampaignLinksPage() {
             <Card key={src.id} className="hover:shadow-md transition-shadow">
               <CardContent className="pt-6 space-y-4">
                 {/* QR Code — compact */}
-                <div className="max-w-[140px] mx-auto bg-white rounded-xl flex items-center justify-center p-1.5">
+                <div className="max-w-[140px] mx-auto bg-white rounded-lg flex items-center justify-center p-1.5">
                   <QRCodeCanvas url={`${baseUrl}/p/${src.code}`} size={128} />
                 </div>
 

pledge-now-pay-later/src/app/dashboard/events/page.tsx

@@ -250,7 +250,7 @@ export default function EventsPage() {
               <button
                 type="button"
                 onClick={() => setForm(f => ({ ...f, paymentMode: "self" }))}
-                className={`rounded-xl border p-3 text-left text-xs transition-all ${form.paymentMode === "self" ? "border-trust-blue bg-trust-blue/5" : "border-gray-200"}`}
+                className={`rounded-lg border p-3 text-left text-xs transition-all ${form.paymentMode === "self" ? "border-trust-blue bg-trust-blue/5" : "border-gray-200"}`}
               >
                 <span className="font-bold block">🏦 Bank transfer</span>
                 <span className="text-muted-foreground">We show our bank details</span>
@@ -258,7 +258,7 @@ export default function EventsPage() {
               <button
                 type="button"
                 onClick={() => setForm(f => ({ ...f, paymentMode: "external" }))}
-                className={`rounded-xl border p-3 text-left text-xs transition-all ${form.paymentMode === "external" ? "border-warm-amber bg-warm-amber/5" : "border-gray-200"}`}
+                className={`rounded-lg border p-3 text-left text-xs transition-all ${form.paymentMode === "external" ? "border-warm-amber bg-warm-amber/5" : "border-gray-200"}`}
               >
                 <span className="font-bold block">🔗 External page</span>
                 <span className="text-muted-foreground">LaunchGood, Enthuse, etc.</span>
@@ -267,7 +267,7 @@ export default function EventsPage() {
           </div>
 
           {form.paymentMode === "external" && (
-            <div className="space-y-3 rounded-xl border border-warm-amber/20 bg-warm-amber/5 p-3">
+            <div className="space-y-3 rounded-lg border border-warm-amber/20 bg-warm-amber/5 p-3">
               <div className="space-y-2">
                 <Label>Fundraising page URL *</Label>
                 <div className="relative">
@@ -285,7 +285,7 @@ export default function EventsPage() {
                 <select
                   value={form.externalPlatform}
                   onChange={(e) => setForm(f => ({ ...f, externalPlatform: e.target.value }))}
-                  className="w-full rounded-xl border border-gray-200 px-3 py-2 text-sm"
+                  className="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm"
                 >
                   <option value="">Select platform...</option>
                   <option value="launchgood">🌙 LaunchGood</option>
@@ -302,7 +302,7 @@ export default function EventsPage() {
           <button
             type="button"
             onClick={() => setForm(f => ({ ...f, zakatEligible: !f.zakatEligible }))}
-            className={`w-full flex items-center justify-between rounded-xl border-2 p-3 text-left transition-all ${
+            className={`w-full flex items-center justify-between rounded-lg border-2 p-3 text-left transition-all ${
               form.zakatEligible ? "border-trust-blue bg-trust-blue/5" : "border-gray-200"
             }`}
           >

pledge-now-pay-later/src/app/dashboard/exports/page.tsx

@@ -73,7 +73,7 @@ export default function ExportsPage() {
                 <li>Event and reference for audit trail</li>
               </ul>
             </div>
-            <div className="rounded-xl bg-success-green/5 border border-success-green/20 p-3">
+            <div className="rounded-lg bg-success-green/5 border border-success-green/20 p-3">
               <p className="text-xs text-success-green font-medium">
                 💷 Claim 25p for every £1 donated by a UK taxpayer
               </p>
@@ -101,7 +101,7 @@ export default function ExportsPage() {
               </code>
               <p className="text-xs">Returns pending reminders with donor contact info for external email/SMS.</p>
             </div>
-            <div className="rounded-xl bg-trust-blue/5 border border-trust-blue/20 p-3">
+            <div className="rounded-lg bg-trust-blue/5 border border-trust-blue/20 p-3">
               <p className="text-xs text-trust-blue font-medium">
                 💡 Connect to Zapier or n8n to send automatic reminder emails and SMS
               </p>

pledge-now-pay-later/src/app/dashboard/layout.tsx

@@ -24,31 +24,31 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
   const user = session?.user as any
 
   return (
-    <div className="min-h-screen bg-gray-50/50">
-      {/* Top bar */}
-      <header className="sticky top-0 z-40 border-b bg-white/80 backdrop-blur-xl">
+    <div className="min-h-screen bg-paper">
+      {/* Top bar — sharp, no blur */}
+      <header className="sticky top-0 z-40 border-b border-gray-200 bg-white">
         <div className="flex h-14 items-center gap-4 px-4 md:px-6">
           <Link href="/dashboard" className="flex items-center gap-2.5">
-            <div className="h-8 w-8 rounded-xl bg-gradient-to-br from-trust-blue to-blue-600 flex items-center justify-center shadow-lg shadow-trust-blue/20">
-              <span className="text-white font-bold text-sm">P</span>
+            <div className="h-7 w-7 bg-midnight flex items-center justify-center">
+              <span className="text-white text-xs font-black">P</span>
             </div>
             <div className="hidden sm:block">
-              <span className="font-black text-sm text-gray-900">{user?.orgName || "Pledge Now, Pay Later"}</span>
+              <span className="font-black text-sm text-midnight">{user?.orgName || "Pledge Now, Pay Later"}</span>
             </div>
           </Link>
           <div className="flex-1" />
           <Link href="/dashboard/events" className="hidden md:block">
-            <button className="inline-flex items-center gap-1.5 rounded-lg bg-trust-blue px-3 py-1.5 text-xs font-semibold text-white hover:bg-trust-blue/90 transition-colors">
+            <button className="inline-flex items-center gap-1.5 bg-midnight px-3 py-1.5 text-xs font-semibold text-white hover:bg-gray-800 transition-colors">
               <Plus className="h-3 w-3" /> New Campaign
             </button>
           </Link>
-          <Link href="/" className="text-xs text-muted-foreground hover:text-foreground transition-colors flex items-center gap-1">
+          <Link href="/" className="text-xs text-gray-400 hover:text-midnight transition-colors flex items-center gap-1">
             <ExternalLink className="h-3 w-3" />
           </Link>
           {session && (
             <button
               onClick={() => signOut({ callbackUrl: "/login" })}
-              className="text-xs text-muted-foreground hover:text-foreground transition-colors flex items-center gap-1"
+              className="text-xs text-gray-400 hover:text-midnight transition-colors flex items-center gap-1"
             >
               <LogOut className="h-3 w-3" />
             </button>
@@ -57,8 +57,8 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
       </header>
 
       <div className="flex">
-        {/* Desktop sidebar */}
-        <aside className="hidden md:flex w-56 flex-col border-r bg-white min-h-[calc(100vh-3.5rem)] py-3 px-2">
+        {/* Desktop sidebar — clean, no decorative elements */}
+        <aside className="hidden md:flex w-52 flex-col border-r border-gray-200 bg-white min-h-[calc(100vh-3.5rem)] py-3 px-2">
           <nav className="space-y-0.5">
             {navItems.map((item) => {
               const isActive = pathname === item.href || (item.href !== "/dashboard" && pathname.startsWith(item.href))
@@ -67,10 +67,10 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
                   key={item.href}
                   href={item.href}
                   className={cn(
-                    "flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm font-medium transition-colors",
+                    "flex items-center gap-2.5 px-3 py-2 text-sm font-medium transition-colors",
                     isActive
-                      ? "bg-trust-blue/5 text-trust-blue"
-                      : "text-muted-foreground hover:bg-gray-100 hover:text-foreground"
+                      ? "bg-promise-blue/5 text-promise-blue border-l-2 border-promise-blue -ml-0.5"
+                      : "text-gray-500 hover:bg-gray-50 hover:text-midnight"
                   )}
                 >
                   <item.icon className="h-4 w-4" />
@@ -80,14 +80,14 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
             })}
             {user?.role === "super_admin" && (
               <>
-                <div className="my-2 border-t" />
+                <div className="my-2 border-t border-gray-100" />
                 <Link
                   href={adminNav.href}
                   className={cn(
-                    "flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm font-medium transition-colors",
+                    "flex items-center gap-2.5 px-3 py-2 text-sm font-medium transition-colors",
                     pathname === adminNav.href
-                      ? "bg-trust-blue/5 text-trust-blue"
-                      : "text-muted-foreground hover:bg-gray-100 hover:text-foreground"
+                      ? "bg-promise-blue/5 text-promise-blue border-l-2 border-promise-blue -ml-0.5"
+                      : "text-gray-500 hover:bg-gray-50 hover:text-midnight"
                   )}
                 >
                   <adminNav.icon className="h-4 w-4" />
@@ -98,12 +98,12 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
           </nav>
 
           <div className="mt-auto px-2 pt-4">
-            <div className="rounded-xl bg-gradient-to-br from-trust-blue/5 to-warm-amber/5 border p-3 space-y-1.5">
-              <p className="text-xs font-semibold">Need help?</p>
-              <p className="text-[10px] text-muted-foreground leading-relaxed">
+            <div className="border border-gray-200 p-3 space-y-1.5">
+              <p className="text-xs font-bold text-midnight">Need help?</p>
+              <p className="text-[10px] text-gray-500 leading-relaxed">
                 Get a fractional Head of Technology to optimise your charity&apos;s digital stack.
               </p>
-              <Link href="/dashboard/apply" className="inline-block text-[10px] font-semibold text-trust-blue hover:underline">
+              <Link href="/dashboard/apply" className="inline-block text-[10px] font-semibold text-promise-blue hover:underline">
                 Learn more →
               </Link>
             </div>
@@ -111,7 +111,7 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
         </aside>
 
         {/* Mobile bottom nav */}
-        <nav className="md:hidden fixed bottom-0 left-0 right-0 z-40 border-t bg-white/95 backdrop-blur-xl flex justify-around py-1.5 px-1">
+        <nav className="md:hidden fixed bottom-0 left-0 right-0 z-40 border-t border-gray-200 bg-white flex justify-around py-1.5 px-1">
           {navItems.slice(0, 5).map((item) => {
             const isActive = pathname === item.href || (item.href !== "/dashboard" && pathname.startsWith(item.href))
             return (
@@ -119,8 +119,8 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
                 key={item.href}
                 href={item.href}
                 className={cn(
-                  "flex flex-col items-center gap-0.5 py-1 px-2 rounded-lg transition-colors",
-                  isActive ? "text-trust-blue" : "text-muted-foreground"
+                  "flex flex-col items-center gap-0.5 py-1 px-2 transition-colors",
+                  isActive ? "text-promise-blue" : "text-gray-400"
                 )}
               >
                 <item.icon className="h-5 w-5" />

pledge-now-pay-later/src/app/dashboard/loading.tsx

@@ -9,15 +9,15 @@ export default function DashboardLoading() {
       </div>
       <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
         {[...Array(4)].map((_, i) => (
-          <Skeleton key={i} className="h-24 rounded-2xl" />
+          <Skeleton key={i} className="h-24 rounded-lg" />
         ))}
       </div>
-      <Skeleton className="h-16 rounded-2xl" />
+      <Skeleton className="h-16 rounded-lg" />
       <div className="grid md:grid-cols-2 gap-4">
-        <Skeleton className="h-64 rounded-2xl" />
-        <Skeleton className="h-64 rounded-2xl" />
+        <Skeleton className="h-64 rounded-lg" />
+        <Skeleton className="h-64 rounded-lg" />
       </div>
-      <Skeleton className="h-96 rounded-2xl" />
+      <Skeleton className="h-96 rounded-lg" />
     </div>
   )
 }

pledge-now-pay-later/src/app/dashboard/page.tsx

@@ -43,9 +43,9 @@ function RolePicker({ onSelect }: { onSelect: (role: string) => void }) {
     <div className="grid grid-cols-2 gap-3">
       <button
         onClick={() => onSelect("charity")}
-        className="rounded-2xl border-2 border-gray-100 hover:border-trust-blue bg-white p-5 text-center space-y-2 transition-all hover:shadow-md group"
+        className="rounded-lg border-2 border-gray-100 hover:border-trust-blue bg-white p-5 text-center space-y-2 transition-all hover:shadow-md group"
       >
-        <div className="mx-auto w-12 h-12 rounded-xl bg-trust-blue/10 flex items-center justify-center group-hover:scale-110 transition-transform">
+        <div className="mx-auto w-12 h-12 rounded-lg bg-trust-blue/10 flex items-center justify-center group-hover:scale-110 transition-transform">
           <Building2 className="h-6 w-6 text-trust-blue" />
         </div>
         <p className="text-sm font-bold text-gray-900">Charity / Mosque</p>
@@ -53,9 +53,9 @@ function RolePicker({ onSelect }: { onSelect: (role: string) => void }) {
       </button>
       <button
         onClick={() => onSelect("fundraiser")}
-        className="rounded-2xl border-2 border-gray-100 hover:border-warm-amber bg-white p-5 text-center space-y-2 transition-all hover:shadow-md group"
+        className="rounded-lg border-2 border-gray-100 hover:border-warm-amber bg-white p-5 text-center space-y-2 transition-all hover:shadow-md group"
       >
-        <div className="mx-auto w-12 h-12 rounded-xl bg-warm-amber/10 flex items-center justify-center group-hover:scale-110 transition-transform">
+        <div className="mx-auto w-12 h-12 rounded-lg bg-warm-amber/10 flex items-center justify-center group-hover:scale-110 transition-transform">
           <Heart className="h-6 w-6 text-warm-amber" />
         </div>
         <p className="text-sm font-bold text-gray-900">Personal Fundraiser</p>
@@ -85,14 +85,14 @@ function GettingStartedBanner({
   const isFirstTime = ob.completed === 0 && (!ob.orgType || ob.orgType === "charity")
 
   return (
-    <div className="rounded-2xl border border-trust-blue/20 bg-gradient-to-r from-trust-blue/5 via-white to-warm-amber/5 p-5 space-y-4 relative">
+    <div className="rounded-lg border border-trust-blue/20 bg-paper p-5 space-y-4 relative">
       {/* Dismiss X */}
       <button onClick={onDismiss} className="absolute top-3 right-3 text-muted-foreground hover:text-foreground p-1">
         <X className="h-4 w-4" />
       </button>
 
       <div className="flex items-center gap-3">
-        <div className="h-10 w-10 rounded-xl bg-gradient-to-br from-trust-blue to-blue-600 flex items-center justify-center flex-shrink-0">
+        <div className="h-10 w-10 rounded-lg bg-midnight flex items-center justify-center flex-shrink-0">
           <span className="text-white text-lg">🤲</span>
         </div>
         <div>
@@ -100,7 +100,7 @@ function GettingStartedBanner({
             {isFirstTime ? "Welcome! What best describes you?" : `Getting started · ${ob.completed}/${ob.total}`}
           </h2>
           {!isFirstTime && (
-            <Progress value={(ob.completed / ob.total) * 100} className="h-1.5 mt-1.5 w-32" indicatorClassName="bg-gradient-to-r from-trust-blue to-success-green" />
+            <Progress value={(ob.completed / ob.total) * 100} className="h-1.5 mt-1.5 w-32" indicatorClassName="bg-promise-blue" />
           )}
         </div>
       </div>
@@ -113,7 +113,7 @@ function GettingStartedBanner({
             const isNext = !step.done && ob.steps.slice(0, i).every(s => s.done)
             return (
               <Link key={step.id} href={step.href}>
-                <div className={`flex items-center gap-2.5 rounded-xl border px-3 py-2.5 transition-all ${
+                <div className={`flex items-center gap-2.5 rounded-lg border px-3 py-2.5 transition-all ${
                   step.done ? "bg-success-green/5 border-success-green/20" :
                   isNext ? "bg-trust-blue/5 border-trust-blue/20 shadow-sm" :
                   "bg-white border-gray-100"
@@ -233,7 +233,7 @@ export default function DashboardPage() {
         <Card className={isEmpty ? "opacity-60" : ""}>
           <CardContent className="pt-5 pb-4">
             <div className="flex items-center gap-3">
-              <div className="rounded-xl bg-trust-blue/10 p-2.5"><Users className="h-5 w-5 text-trust-blue" /></div>
+              <div className="rounded-lg bg-trust-blue/10 p-2.5"><Users className="h-5 w-5 text-trust-blue" /></div>
               <div>
                 <p className="text-2xl font-black">{s.totalPledges}</p>
                 <p className="text-xs text-muted-foreground">Total Pledges</p>
@@ -244,7 +244,7 @@ export default function DashboardPage() {
         <Card className={isEmpty ? "opacity-60" : ""}>
           <CardContent className="pt-5 pb-4">
             <div className="flex items-center gap-3">
-              <div className="rounded-xl bg-warm-amber/10 p-2.5"><Banknote className="h-5 w-5 text-warm-amber" /></div>
+              <div className="rounded-lg bg-warm-amber/10 p-2.5"><Banknote className="h-5 w-5 text-warm-amber" /></div>
               <div>
                 <p className="text-2xl font-black">{formatPence(s.totalPledgedPence)}</p>
                 <p className="text-xs text-muted-foreground">Total Pledged</p>
@@ -255,7 +255,7 @@ export default function DashboardPage() {
         <Card className={isEmpty ? "opacity-60" : ""}>
           <CardContent className="pt-5 pb-4">
             <div className="flex items-center gap-3">
-              <div className="rounded-xl bg-success-green/10 p-2.5"><TrendingUp className="h-5 w-5 text-success-green" /></div>
+              <div className="rounded-lg bg-success-green/10 p-2.5"><TrendingUp className="h-5 w-5 text-success-green" /></div>
               <div>
                 <p className="text-2xl font-black">{formatPence(s.totalCollectedPence)}</p>
                 <p className="text-xs text-muted-foreground">Collected ({s.collectionRate}%)</p>
@@ -266,7 +266,7 @@ export default function DashboardPage() {
         <Card className={isEmpty ? "opacity-60" : s.overdueRate > 10 ? "border-danger-red/30" : ""}>
           <CardContent className="pt-5 pb-4">
             <div className="flex items-center gap-3">
-              <div className="rounded-xl bg-danger-red/10 p-2.5"><AlertTriangle className="h-5 w-5 text-danger-red" /></div>
+              <div className="rounded-lg bg-danger-red/10 p-2.5"><AlertTriangle className="h-5 w-5 text-danger-red" /></div>
               <div>
                 <p className="text-2xl font-black">{byStatus.overdue || 0}</p>
                 <p className="text-xs text-muted-foreground">Overdue</p>
@@ -283,7 +283,7 @@ export default function DashboardPage() {
             <span className="text-sm font-medium">Pledged → Collected</span>
             <span className="text-sm font-bold text-muted-foreground">{s.collectionRate}%</span>
           </div>
-          <Progress value={s.collectionRate} indicatorClassName="bg-gradient-to-r from-trust-blue to-success-green" />
+          <Progress value={s.collectionRate} indicatorClassName="bg-promise-blue" />
           <div className="flex justify-between mt-2 text-xs text-muted-foreground">
             <span>{formatPence(s.totalCollectedPence)} collected</span>
             <span>{formatPence(s.totalPledgedPence - s.totalCollectedPence)} outstanding</span>

pledge-now-pay-later/src/app/dashboard/pledges/page.tsx

@@ -251,7 +251,7 @@ export default function PledgesPage() {
 
       {/* Collection progress */}
       <div className="flex items-center gap-4">
-        <Progress value={collectionRate} className="flex-1 h-2" indicatorClassName="bg-gradient-to-r from-trust-blue to-success-green" />
+        <Progress value={collectionRate} className="flex-1 h-2" indicatorClassName="bg-promise-blue" />
         <span className="text-sm font-medium text-muted-foreground whitespace-nowrap">
           {formatPence(stats.totalCollected)} / {formatPence(stats.totalPledged)}
         </span>

pledge-now-pay-later/src/app/dashboard/reconcile/page.tsx

@@ -130,7 +130,7 @@ export default function ReconcilePage() {
           </div>
 
           {/* File upload */}
-          <div className="border-2 border-dashed border-gray-200 rounded-2xl p-8 text-center hover:border-trust-blue/50 transition-colors">
+          <div className="border-2 border-dashed border-gray-200 rounded-lg p-8 text-center hover:border-trust-blue/50 transition-colors">
             <Upload className="h-10 w-10 text-muted-foreground mx-auto mb-3" />
             <input
               type="file"

pledge-now-pay-later/src/app/dashboard/settings/page.tsx

@@ -66,7 +66,7 @@ export default function SettingsPage() {
         <p className="text-sm text-muted-foreground mt-0.5">Configure your organisation&apos;s payment details and integrations</p>
       </div>
 
-      {error && <div className="rounded-xl bg-danger-red/10 border border-danger-red/20 p-3 text-sm text-danger-red">{error}</div>}
+      {error && <div className="rounded-lg bg-danger-red/10 border border-danger-red/20 p-3 text-sm text-danger-red">{error}</div>}
 
       {/* WhatsApp — MOST IMPORTANT, first */}
       <WhatsAppPanel />
@@ -194,7 +194,7 @@ function WhatsAppPanel() {
         </CardHeader>
         <CardContent>
           <div className="flex items-center gap-4">
-            <div className="w-12 h-12 rounded-full bg-[#25D366]/10 flex items-center justify-center">
+            <div className="w-12 h-12 rounded-lg bg-[#25D366]/10 flex items-center justify-center">
               <Smartphone className="h-6 w-6 text-[#25D366]" />
             </div>
             <div>
@@ -240,7 +240,7 @@ function WhatsAppPanel() {
               <div className="relative">
                 {/* Crop to QR area: the screenshot shows full WhatsApp web page. 
                     QR code is roughly in center. We use overflow hidden + object positioning. */}
-                <div className="w-72 h-72 rounded-xl border-2 border-[#25D366]/20 overflow-hidden bg-white">
+                <div className="w-72 h-72 rounded-lg border-2 border-[#25D366]/20 overflow-hidden bg-white">
                   {/* eslint-disable-next-line @next/next/no-img-element */}
                   <img
                     src={qrImage}
@@ -254,7 +254,7 @@ function WhatsAppPanel() {
                 </div>
               </div>
             ) : (
-              <div className="w-72 h-72 rounded-xl border-2 border-dashed border-muted flex items-center justify-center">
+              <div className="w-72 h-72 rounded-lg border-2 border-dashed border-muted flex items-center justify-center">
                 <Loader2 className="h-8 w-8 text-muted-foreground animate-spin" />
               </div>
             )}
@@ -285,9 +285,9 @@ function WhatsAppPanel() {
         </CardDescription>
       </CardHeader>
       <CardContent>
-        <div className="rounded-xl bg-muted/50 p-4 space-y-3">
+        <div className="rounded-lg bg-muted/50 p-4 space-y-3">
           <div className="flex items-start gap-3">
-            <div className="w-10 h-10 rounded-full bg-[#25D366]/10 flex items-center justify-center flex-shrink-0">
+            <div className="w-10 h-10 rounded-lg bg-[#25D366]/10 flex items-center justify-center flex-shrink-0">
               <Smartphone className="h-5 w-5 text-[#25D366]" />
             </div>
             <div>

pledge-now-pay-later/src/app/dashboard/setup/page.tsx

@@ -125,7 +125,7 @@ export default function SetupPage() {
       <div className="flex items-center justify-between">
         {steps.map((s, i) => (
           <div key={s.num} className="flex items-center">
-            <div className={`w-10 h-10 rounded-full flex items-center justify-center text-sm font-bold transition-all ${
+            <div className={`w-10 h-10 rounded-lg flex items-center justify-center text-sm font-bold transition-all ${
               step >= s.num ? "bg-trust-blue text-white" : "bg-gray-100 text-gray-400"
             }`}>
               {step > s.num ? <CheckCircle2 className="h-5 w-5" /> : <s.icon className="h-5 w-5" />}
@@ -231,14 +231,14 @@ export default function SetupPage() {
       {step === 4 && (
         <Card className="border-success-green/30">
           <CardHeader className="text-center pb-2">
-            <div className="mx-auto w-16 h-16 rounded-full bg-success-green/10 flex items-center justify-center mb-3">
+            <div className="mx-auto w-14 h-14 bg-success-green/10 flex items-center justify-center mb-3">
               <Sparkles className="h-8 w-8 text-success-green" />
             </div>
             <CardTitle>You&apos;re All Set! 🎉</CardTitle>
             <p className="text-sm text-muted-foreground">Your charity is ready to collect pledges.</p>
           </CardHeader>
           <CardContent className="space-y-4">
-            <div className="bg-gray-50 rounded-xl p-4 space-y-2">
+            <div className="bg-gray-50 rounded-lg p-4 space-y-2">
               <div className="flex items-center justify-between">
                 <span className="text-sm text-muted-foreground">Charity</span>
                 <span className="text-sm font-medium">{orgName}</span>
@@ -254,7 +254,7 @@ export default function SetupPage() {
             </div>
 
             {setupResult?.qrToken && (
-              <div className="bg-trust-blue/5 rounded-xl p-4 text-center space-y-2">
+              <div className="bg-trust-blue/5 rounded-lg p-4 text-center space-y-2">
                 <QrCode className="h-8 w-8 text-trust-blue mx-auto" />
                 <p className="text-sm font-medium">Your pledge link is ready</p>
                 <code className="text-xs bg-white px-3 py-1.5 rounded-lg border block overflow-x-auto">
@@ -278,7 +278,7 @@ export default function SetupPage() {
 
       {/* Tips */}
       {step < 4 && (
-        <div className="bg-warm-amber/5 rounded-xl border border-warm-amber/20 p-4">
+        <div className="bg-warm-amber/5 rounded-lg border border-warm-amber/20 p-4">
           <p className="text-xs font-semibold text-warm-amber mb-1">💡 Tip</p>
           {step === 1 && <p className="text-xs text-muted-foreground">Your charity name appears on the donor pledge page and WhatsApp receipts.</p>}
           {step === 2 && <p className="text-xs text-muted-foreground">Bank details are shown to donors who choose &quot;Bank Transfer&quot;. Each pledge gets a unique reference number for easy reconciliation.</p>}