Prompt 03: Profile & Settings Tab (Me)

Goal

Build the Profile (Me) screen for the MysticX Expo mobile app. This is the central hub for account management, credit balance, active setup (reader/skin), subscription status, and AI memory control.

Design Constraints (From Master Guide)

• Visuals: "OLED Noir" (#000000 base). Premium, exclusive club feel.
• Typography: Dual-typography system. Use Playfair Display for the username and tier status. Use Inter for settings menus and utility text.
• Privacy First: Clearly signify secure sections (like AI Memory and Account Deletion) with appropriate iconography (lock/shield) and distinct visual weighting.

Requirements

1. Component: ProfileTabView.
2. Top Section (Identity & Tier):
   • Large Avatar centered.
   • Username (Serif, Gold #c5a059).
   • Subscription Tier Badge (e.g., "FREE TIER", "GOLD", "DIAMOND"). The badge should have a subtle glowing border based on the tier color.
3. Middle Section (Quick Stats & Setup):
   • Horizontal layout showing available Credits and total Readings.
   • "My Setup" cards: Active Reader (Avatar + Name) and Active Card Skin (Miniature card back + Name).
4. List Section (Navigation Menu):
   • A vertical list of touchable rows: Account, Settings, Subscription, Credits, AI Memory.
   • Each row needs a right-facing chevron (›).
   • Implement a 1px separator line (#121212 or very low-opacity white) between rows.
5. Danger Zone / Footer:
   • "Sign Out" or "Delete Account" option at the very bottom, styled distinctly (e.g., muted red text, no background).

Implementation Guidance

• Haptics: Trigger expo-haptics selectionAsync() when tapping any navigation row.
• Animations: When tapping a row, use react-native-reanimated to gently scale down the row (0.98) on press-in, and scale back up on release, simulating a soft, tactile button press.
• Credit Balance Highlight: Ensure the "Credits" stat or row stands out slightly (e.g., Antique Gold text) as it is a core monetization driver.