POL-125: Frontend visual upgrade — dark luxury pole dance theme

- New dark theme with rose/purple/gold accent palette
- Premium typography: Cormorant Garamond (display) + Outfit (body)
- Glassmorphism cards, gradient mesh backgrounds, glow effects
- CSS split into theme.css, utilities.css, animations.css
- Staggered fade-in animations on list pages
- Redesigned all pages: auth, championships, registrations, profile, admin
- Lucide icons replace emoji throughout
- Responsive mobile nav with hamburger menu

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

web/src/app/(app)/profile/page.tsx

@@ -6,11 +6,12 @@ import { Avatar, AvatarFallback } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Separator } from "@/components/ui/separator";
+import { Phone, Building2, AtSign, CalendarDays, LogOut } from "lucide-react";
 
 const ROLE_COLORS: Record<string, string> = {
-  admin: "bg-red-100 text-red-700",
-  organizer: "bg-violet-100 text-violet-700",
-  member: "bg-green-100 text-green-700",
+  admin: "bg-destructive/15 text-destructive border-destructive/20",
+  organizer: "bg-purple-soft text-purple-accent border-purple-accent/20",
+  member: "bg-rose-soft text-rose-accent border-rose-accent/20",
 };
 
 export default function ProfilePage() {
@@ -29,52 +30,73 @@ export default function ProfilePage() {
   }
 
   return (
-    <div className="max-w-md mx-auto space-y-6">
-      <div className="flex flex-col items-center gap-3 pt-4">
-        <Avatar className="h-20 w-20">
-          <AvatarFallback className="bg-violet-100 text-violet-700 text-2xl font-bold">
-            {initials}
-          </AvatarFallback>
-        </Avatar>
-        <div className="text-center">
-          <p className="text-xl font-bold text-gray-900">{user.full_name}</p>
-          <p className="text-sm text-gray-500">{user.email}</p>
+    <div className="max-w-md mx-auto space-y-6 animate-fade-in">
+      <div className="flex flex-col items-center gap-4 pt-4">
+        {/* Avatar with gradient ring */}
+        <div className="relative">
+          <div className="absolute -inset-1 rounded-full bg-gradient-to-br from-rose-accent via-purple-accent to-gold-accent opacity-50 blur-sm" />
+          <Avatar className="relative h-20 w-20 border-2 border-background">
+            <AvatarFallback className="bg-surface-elevated text-rose-accent text-2xl font-bold">
+              {initials}
+            </AvatarFallback>
+          </Avatar>
         </div>
-        <Badge className={`${ROLE_COLORS[user.role] ?? "bg-gray-100"} border-0 capitalize`}>
+
+        <div className="text-center">
+          <p className="font-display text-2xl font-bold tracking-wide">{user.full_name}</p>
+          <p className="text-sm text-muted-foreground mt-1">{user.email}</p>
+        </div>
+
+        <Badge className={`${ROLE_COLORS[user.role] ?? "bg-surface-elevated text-muted-foreground"} border capitalize`}>
           {user.role}
         </Badge>
       </div>
 
-      <Separator />
+      <Separator className="bg-border/30" />
 
-      <div className="space-y-3 text-sm text-gray-700">
+      <div className="space-y-1 rounded-xl bg-surface-elevated border border-border/30 p-4">
         {user.phone && (
-          <div className="flex justify-between">
-            <span className="text-gray-400">Phone</span>
-            <span>{user.phone}</span>
+          <div className="flex items-center justify-between py-2">
+            <span className="flex items-center gap-2 text-sm text-dim">
+              <Phone size={14} />
+              Phone
+            </span>
+            <span className="text-sm text-foreground">{user.phone}</span>
           </div>
         )}
         {user.organization_name && (
-          <div className="flex justify-between">
-            <span className="text-gray-400">Organization</span>
-            <span>{user.organization_name}</span>
+          <div className="flex items-center justify-between py-2">
+            <span className="flex items-center gap-2 text-sm text-dim">
+              <Building2 size={14} />
+              Organization
+            </span>
+            <span className="text-sm text-foreground">{user.organization_name}</span>
           </div>
         )}
         {user.instagram_handle && (
-          <div className="flex justify-between">
-            <span className="text-gray-400">Instagram</span>
-            <span>{user.instagram_handle}</span>
+          <div className="flex items-center justify-between py-2">
+            <span className="flex items-center gap-2 text-sm text-dim">
+              <AtSign size={14} />
+              AtSign
+            </span>
+            <span className="text-sm text-foreground">{user.instagram_handle}</span>
           </div>
         )}
-        <div className="flex justify-between">
-          <span className="text-gray-400">Member since</span>
-          <span>{joinedDate}</span>
+        <div className="flex items-center justify-between py-2">
+          <span className="flex items-center gap-2 text-sm text-dim">
+            <CalendarDays size={14} />
+            Member since
+          </span>
+          <span className="text-sm text-foreground">{joinedDate}</span>
         </div>
       </div>
 
-      <Separator />
-
-      <Button variant="destructive" className="w-full" onClick={handleLogout}>
+      <Button
+        variant="outline"
+        className="w-full border-destructive/30 text-destructive hover:bg-destructive/10 hover:border-destructive/50"
+        onClick={handleLogout}
+      >
+        <LogOut size={16} />
         Sign out
       </Button>
     </div>