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/components/admin/UserCard.tsx

@@ -2,6 +2,7 @@ import { UserOut } from "@/types/user";
 import { Card, CardContent } from "@/components/ui/card";
 import { Avatar, AvatarFallback } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
+import { Building2, Phone, AtSign, CheckCircle, XCircle } from "lucide-react";
 
 interface Props {
   user: UserOut;
@@ -11,47 +12,69 @@ interface Props {
 }
 
 const STATUS_DOT: Record<string, string> = {
-  pending: "bg-orange-400",
-  approved: "bg-green-500",
-  rejected: "bg-red-500",
+  pending: "bg-gold-accent",
+  approved: "bg-emerald-500",
+  rejected: "bg-destructive",
 };
 
 export function UserCard({ user, onApprove, onReject, isActing }: Props) {
   const initials = user.full_name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
 
   return (
-    <Card>
+    <Card className="border-border/40 bg-surface-elevated">
       <CardContent className="p-4 flex gap-4 items-start">
-        <Avatar className="h-10 w-10 shrink-0">
-          <AvatarFallback className="bg-violet-100 text-violet-700 text-sm font-semibold">
+        <Avatar className="h-10 w-10 shrink-0 border border-border/40">
+          <AvatarFallback className="bg-rose-accent/10 text-rose-accent text-sm font-semibold">
             {initials}
           </AvatarFallback>
         </Avatar>
 
         <div className="flex-1 min-w-0 space-y-1">
           <div className="flex items-center gap-2">
-            <p className="font-semibold text-gray-900">{user.full_name}</p>
-            <span className={`h-2 w-2 rounded-full shrink-0 ${STATUS_DOT[user.status] ?? "bg-gray-400"}`} />
+            <p className="font-semibold text-foreground">{user.full_name}</p>
+            <span className={`h-2 w-2 rounded-full shrink-0 ${STATUS_DOT[user.status] ?? "bg-dim"}`} />
           </div>
-          <p className="text-sm text-gray-500">{user.email}</p>
-          {user.organization_name && <p className="text-sm text-gray-500">🏢 {user.organization_name}</p>}
-          {user.phone && <p className="text-sm text-gray-500">📞 {user.phone}</p>}
-          {user.instagram_handle && <p className="text-sm text-gray-500">📸 {user.instagram_handle}</p>}
+          <p className="text-sm text-muted-foreground">{user.email}</p>
+          {user.organization_name && (
+            <p className="flex items-center gap-1.5 text-sm text-muted-foreground">
+              <Building2 size={12} className="text-dim" />
+              {user.organization_name}
+            </p>
+          )}
+          {user.phone && (
+            <p className="flex items-center gap-1.5 text-sm text-muted-foreground">
+              <Phone size={12} className="text-dim" />
+              {user.phone}
+            </p>
+          )}
+          {user.instagram_handle && (
+            <p className="flex items-center gap-1.5 text-sm text-muted-foreground">
+              <AtSign size={12} className="text-dim" />
+              {user.instagram_handle}
+            </p>
+          )}
         </div>
 
         {user.status === "pending" && onApprove && onReject && (
           <div className="flex gap-2 shrink-0">
-            <Button size="sm" className="bg-green-600 hover:bg-green-700" disabled={isActing} onClick={() => onApprove(user.id)}>
+            <Button
+              size="sm"
+              className="bg-emerald-600 hover:bg-emerald-500 text-white"
+              disabled={isActing}
+              onClick={() => onApprove(user.id)}
+            >
+              <CheckCircle size={14} />
               Approve
             </Button>
             <Button size="sm" variant="destructive" disabled={isActing} onClick={() => onReject(user.id)}>
+              <XCircle size={14} />
               Reject
             </Button>
           </div>
         )}
 
         {user.status !== "pending" && (
-          <span className="text-xs text-gray-400 capitalize shrink-0">{user.status}</span>
+          <span className="text-xs text-dim capitalize shrink-0">{user.status}</span>
         )}
       </CardContent>
     </Card>