Account Settings Panel

Create an account settings page for a SaaS web app. The layout should have:

1. **Page shell** — Same sticky top navbar as the rest of the app. Below the navbar, a full-width page header with the title "Settings" and a short breadcrumb (Home > Settings).

2. **Two-column layout** — A left sidebar (200px) listing the settings sections as navigation links: Profile, Password & Security, Notifications, Billing, and Danger Zone. The active section is highlighted in blue. On mobile, this becomes a horizontal scrollable tab strip.

3. **Profile section (default active)** — A card with:
   - "Profile picture" row: circular avatar preview + "Upload photo" button + "Remove" text link.
   - Form fields: Full Name (text), Display Name (text), Email (with "Verified ✓" badge), Bio (textarea), Timezone (select dropdown).
   - A "Save changes" primary button and a "Cancel" ghost button at the bottom right of the card.

4. **Password & Security section** — Separate card with fields: Current Password, New Password (with strength meter), Confirm New Password. Below, a section for Two-Factor Authentication: toggle to enable 2FA + instructions. "Update password" button.

5. **Notifications section** — List of toggle rows, each with a label and description: Email digest (weekly summary), Product updates, Security alerts (locked on), Marketing emails, Slack notifications (shows a "Connect Slack" button if not connected).

6. **Billing section** — Current plan chip (e.g., "Pro Plan"), next billing date, payment method card (last 4 digits, expires), "Change plan" and "Update payment" buttons, and a recent invoices mini table (Date, Amount, Status, Download PDF).

7. **Danger Zone section** — Red-bordered card. Two rows: "Export all data" (Export button), "Delete account" (Delete button with a modal confirmation requiring the user to type their email).

[NAVBAR — app-level, sticky]

[PAGE HEADER]
  Settings         Home > Settings

[TWO-COLUMN LAYOUT]

[LEFT NAV — 200px]
  ● Profile  (active)
  ○ Password & Security
  ○ Notifications
  ○ Billing
  ○ Danger Zone

[MAIN PANEL — scrollable]

  [PROFILE CARD]
  ┌─────────────────────────────────────────────────────────┐
  │ Profile Picture                                         │
  │  [○ Avatar]  [Upload photo]  Remove                     │
  │                                                         │
  │ Full Name       [________________________]              │
  │ Display Name    [________________________]              │
  │ Email           [john@example.com ✓ Verified]           │
  │ Bio             [________________________]              │
  │                 [________________________]              │
  │ Timezone        [UTC-5 Eastern Time      ▾]             │
  │                                                         │
  │                             [Cancel]  [Save changes]   │
  └─────────────────────────────────────────────────────────┘

  [PASSWORD CARD — (when that tab is active)]
  ┌─────────────────────────────────────────────────────────┐
  │ Current Password  [••••••••••••]                        │
  │ New Password      [••••••••••••]  [Strength: ████░░]    │
  │ Confirm Password  [••••••••••••]                        │
  │ ── Two-Factor Authentication ──                         │
  │ Enable 2FA  [toggle OFF→ON]                             │
  │                             [Update password]           │
  └─────────────────────────────────────────────────────────┘

  [NOTIFICATIONS CARD]
  ┌─────────────────────────────────────────────────────────┐
  │ Email digest           Weekly summary email  [●  ON]    │
  │ Product updates        New features & fixes  [●  ON]    │
  │ Security alerts        Always on             [🔒 ON]    │
  │ Marketing emails       Offers & news         [○ OFF]    │
  │ Slack notifications    Team channel pings [Connect Slack]│
  └─────────────────────────────────────────────────────────┘

  [BILLING CARD]
  ┌─────────────────────────────────────────────────────────┐
  │ Current Plan: [Pro]     Next billing: Mar 19, 2026      │
  │ Payment:  Visa •••• 4242   Exp 09/28                    │
  │ [Change plan]  [Update payment method]                  │
  │ ── Recent Invoices ──                                   │
  │ Feb 2026  $49.00  Paid  [Download PDF]                  │
  │ Jan 2026  $49.00  Paid  [Download PDF]                  │
  └─────────────────────────────────────────────────────────┘

  [DANGER ZONE — red border]
  ┌─────────────────────────────────────────────────────────┐ ← border: red
  │ Export all data   Download a copy of your data  [Export]│
  │ Delete account    Permanently delete   [Delete account] │
  └─────────────────────────────────────────────────────────┘