Role: Act as a World-Class UI/UX Designer and Senior Frontend Engineer.

The Goal: Build a working prototype for "Waypointer", an AI-powered severance agent for laid-off tech workers.

Tech Stack:

• React (via CDN)
• Tailwind CSS (via CDN)
• Lucide React (Icons)
• Recharts (Data visualization)
• Google GenAI SDK (for AI features)

Design System & Aesthetic (Critical):

The design must be strictly Light Mode, hyper-clean, and "airy." Do not use dark backgrounds for main containers.

• Palette: Use a base of slate-50 for the app background and white for content cards. Use slate-900 for primary text and slate-500 for secondary text.
• Primary Color: Use brand-600 (a bright Sky/Blue) for primary actions and active states. Use brand-50 for subtle tints behind icons or active navigation items.
• Surfaces: Cards should have white backgrounds, rounded-2xl corners, and extremely subtle borders (border-slate-100). Use soft shadows (shadow-sm or shadow-slate-200/50) to create depth without harshness.
• Inputs/Controls: Inputs should use bg-slate-50 with border-slate-200. They should feel tactile but soft.
• Typography: Use "Inter". Font weights should be deliberate—bold headings (font-bold), medium labels (font-medium).

Application Structure:

1. Sidebar Layout:
   • A clean white sidebar on the left (w-72).
   • Navigation items should use a "Tint" active state: when active, the background becomes bg-brand-50 and text text-brand-700. Inactive items are text-slate-500.
   • Include a "Credits" card at the bottom of the sidebar with a progress bar.
2. Dashboard View:
   • Header: Title "Overview" with a date indicator.
   • Stats Grid: 4 cards (Jobs Applied, Interviews, Response Rate, Resume Score). Each card should have a colored icon container (e.g., bg-emerald-50 text-emerald-600) and a small "trend" badge.
   • Velocity Chart: An Area Chart using Recharts showing "Applications over time." Use a gradient fill.
   • Priority Actions: A list of to-do items. Mark high-priority items with a glowing red dot (shadow-[0_0_8px_...]).
3. Resume Builder View (Split Screen):
   • Left Column (Input): A card with a text area to paste the old resume and a text input for "Target Role." Include a "Generate" button that shows a loader when active.
   • Right Column (Output): A container that looks like a piece of paper (White background, good padding).
   • Output Content: Display the AI-generated name, professional summary, skills (as pill badges), and experience list.
   • Actions: Floating "Copy" and "Download PDF" buttons in the top right.
4. Job Hunter View:
   • Search Bar: A large, floating white card at the top with inputs for "Role" and "Industry" and a "Find Jobs" button.
   • Content Area: Split into two columns.
     • Left: A scrollable list of Job Cards. Selected state should look "pressed" or have a colored border.
     • Right: A detail view. Shows the job description and an "AI Email Drafter" section.
     • Email Drafter: A specialized text area where the AI writes a cold email.