Align Chrome Extension UI design with Sphere web app

[KruGoL]

Summary

The Chrome extension (sphere-extension) should adopt the exact same visual design as the Sphere web app (sphere), creating a consistent brand experience across both platforms. This includes the planet/globe background, color scheme, typography, layout patterns, and all visual elements.

Current State

• Sphere web app has a polished design with a planet/globe background, specific color palette, gradients, animations, and modern UI patterns.
• Chrome extension has a functional but visually distinct/simplified design that doesn't match the web app.

Goal

Make the extension visually identical to the Sphere web app, adapted only for the smaller popup viewport (400×600px).

Scope

Visual Elements to Port

• Planet/globe background — the signature animated planet on the background (adapt scale/position for popup size)
• Color scheme — exact same palette, gradients, and dark theme from Sphere
• Typography — same fonts, sizes, weights (scaled appropriately for popup)
• Component styling — buttons, cards, inputs, modals, badges, lists matching Sphere exactly
• Animations & transitions — Framer Motion effects (page transitions, hover states, micro-interactions)
• Icons & assets — same icon set and visual assets

Screens to Align

• Onboarding / Welcome flow
• Main wallet view (balance, token list)
• Token detail view
• Send / Transfer flow
• Receive screen
• Settings
• Connected dApps management
• Transaction history