Build an Avatar Creator panel in Next.js with a reusable ProfileAvatar component.
Requirements:
- Render a large circular avatar preview from top and bottom gradient colors.
- Include an optional dithered gradient mode made from CSS dot layers.
- Show a swatch palette of circular split-color avatar options.
- Selected swatch has a visible selection ring.
- Add a rounded Shuffle button that randomly selects a swatch.
- Include a dashed circular "+" slot that opens a custom-color popover.
- Popover includes "Top" and "Bottom" color pickers plus an "Add" button.
- On Add, append the new swatch to the palette and select it.
- Close popover on outside click or Escape, and keep keyboard focus states visible.
- Style should match a clean soft card aesthetic with subtle shadows and gray background.