Neomorphismus-Dashboard

Create a neomorphism (soft UI) styled dashboard application. The design should feel tactile and 3-dimensional, as if elements are extruding from or pressed into the background surface.

Design Requirements

Background: Flat matte background color (#e0e5ec) — the entire page shares this base

Elements: All cards, buttons, and inputs use dual box-shadows to create the raised/inset effect:

- Raised: box-shadow: 8px 8px 16px #a3b1c6, -8px -8px 16px #ffffff

- Inset/Pressed: box-shadow: inset 4px 4px 8px #a3b1c6, inset -4px -4px 8px #ffffff

Color Palette: Monochromatic base with accent color (#6c63ff) for active states and charts

Typography: DM Sans, medium weight, subtle color contrast against base

Icons: Soft, rounded icons that match the organic feel

Sections to Include

Sidebar Navigation — Vertical nav with neomorphic icons, active state shows inset shadow

Top Bar — Search input (inset), notifications bell, user avatar

Stats Cards Row — 4 raised cards showing KPIs with icons and trend arrows

Chart Section — Area chart with gradient fill, raised container

Recent Activity — List with alternating raised/flat rows

Quick Actions — Grid of circular neomorphic buttons

Technical Details

CSS custom properties for all shadow values (easy theming)

Smooth transitions between raised and pressed states on click

Responsive: sidebar collapses to bottom nav on mobile

Use CSS variables for the dual-shadow system