card: full UX rebuild — hero preview, 3-tab nav, single-column layout, inline award form

- Logged-out state: proper hero with value prop copy instead of bare login form
- Hero card preview: full-width dark stage with theme-matched glow behind card
- Card slightly larger (360x227) with depth shadow
- Top tab bar: My Card / Badges (with count) / Award — replaces buried sections
- Single-column max-w-2xl layout — no more awkward 2-col grid on mobile
- Primary CTA: one big Share button, Print/Save/Copy as secondary 3-col row
- Card type as prominent 2-up tile choice, not a buried dropdown-style control
- Theme picker: 6-up square grid with emoji + label, ring on active
- Rides For + Sponsors side by side (saves vertical space)
- Stats as interactive tiles showing the actual numbers
- Skills as pill grid with live counter (X/6 selected)
- Badges tab: shows ReceivedBadgesPanel (was previously never rendered)
- Award tab: inline form, no dialog — cleaner flow, redirects to Badges on success
- AwardBadgeDialog kept for backward compat but Award tab uses AwardBadgeInline

Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>

src/index.css

@@ -556,13 +556,14 @@ select {
 
 /* Credit-card aspect ratio: 85.6mm × 54mm = 1.586:1 */
 .rider-card {
-  width: 340px;
+  width: 360px;
-  height: 214px;
+  height: 227px;
-  border-radius: 12px;
+  border-radius: 14px;
   position: relative;
   overflow: hidden;
   flex-shrink: 0;
   font-family: 'Inter Variable', 'Inter', system-ui, sans-serif;
+  box-shadow: 0 8px 40px rgba(0,0,0,0.6), 0 2px 8px rgba(0,0,0,0.4);
 }
 
 /* Holographic shimmer overlay — appears on hover/focus for screen,