design overhaul + expenses page

- Stripe-style theme: single indigo (#635BFF) brand, 6px radius,
  Inter scale; rewritten themePrimitives + MUI customizations
  (solid primary, near-black secondary, severity-aware Alert)
- Sticky Header (brand-left nav, theme toggle, mobile drawer),
  inline Footer, route fade-in, per-route document.title
- Home hero + feature cards (dead /dashboard,/reports links replaced)
- Split-panel AuthPage with validation and password visibility
- Data pages: PageHeader/EmptyState, breadcrumbed Fetch Request
  pages, admin table polish (numeric alignment, row-hover actions,
  skeletons, empty states), single-accent admin SideMenu
- Global ToastProvider wired into app shell
- New /expenses page: month-grouped feed, single-open accordion
  with inline detail (account, tags, amount, timestamps)

src/shared-theme/customizations/feedback.tsx

@@ -1,21 +1,14 @@
 import { Theme, alpha, Components } from '@mui/material/styles';
-import { gray, orange } from '../themePrimitives';
+import { gray } from '../themePrimitives';
 
 /* eslint-disable import/prefer-default-export */
 export const feedbackCustomizations: Components<Theme> = {
   MuiAlert: {
     styleOverrides: {
       root: ({ theme }) => ({
-        borderRadius: 10,
-        backgroundColor: orange[100],
-        color: (theme.vars || theme).palette.text.primary,
-        border: `1px solid ${alpha(orange[300], 0.5)}`,
-        '& .MuiAlert-icon': {
-          color: orange[500],
-        },
+        borderRadius: (theme.vars || theme).shape.borderRadius,
         ...theme.applyStyles('dark', {
-          backgroundColor: alpha(orange[900], 0.35),
-          border: `1px solid ${alpha(orange[800], 0.3)}`,
+          backgroundColor: alpha((theme.vars || theme).palette.background.paper, 0.6),
         }),
       }),
     },
@@ -24,7 +17,7 @@ export const feedbackCustomizations: Components<Theme> = {
     styleOverrides: {
       root: ({ theme }) => ({
         '& .MuiDialog-paper': {
-          borderRadius: '10px',
+          borderRadius: (theme.vars || theme).shape.borderRadius,
           border: '1px solid',
           borderColor: (theme.vars || theme).palette.divider,
         },

src/shared-theme/customizations/inputs.tsx

@@ -58,31 +58,26 @@ export const inputsCustomizations: Components<Theme> = {
             },
             style: {
               color: 'white',
-              backgroundColor: gray[900],
-              backgroundImage: `linear-gradient(to bottom, ${gray[700]}, ${gray[800]})`,
-              boxShadow: `inset 0 1px 0 ${gray[600]}, inset 0 -1px 0 1px hsl(220, 0%, 0%)`,
-              border: `1px solid ${gray[700]}`,
+              backgroundColor: brand[500],
+              border: `1px solid ${brand[600]}`,
+              boxShadow: 'none',
               '&:hover': {
-                backgroundImage: 'none',
-                backgroundColor: gray[700],
+                backgroundColor: brand[600],
                 boxShadow: 'none',
               },
               '&:active': {
-                backgroundColor: gray[800],
+                backgroundColor: brand[700],
               },
               ...theme.applyStyles('dark', {
-                color: 'black',
-                backgroundColor: gray[50],
-                backgroundImage: `linear-gradient(to bottom, ${gray[100]}, ${gray[50]})`,
-                boxShadow: 'inset 0 -1px 0  hsl(220, 30%, 80%)',
-                border: `1px solid ${gray[50]}`,
+                color: brand[50],
+                backgroundColor: brand[500],
+                border: `1px solid ${brand[600]}`,
                 '&:hover': {
-                  backgroundImage: 'none',
-                  backgroundColor: gray[300],
+                  backgroundColor: brand[400],
                   boxShadow: 'none',
                 },
                 '&:active': {
-                  backgroundColor: gray[400],
+                  backgroundColor: brand[300],
                 },
               }),
             },
@@ -94,18 +89,28 @@ export const inputsCustomizations: Components<Theme> = {
             },
             style: {
               color: 'white',
-              backgroundColor: brand[300],
-              backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
-              boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
-              border: `1px solid ${brand[500]}`,
+              backgroundColor: gray[900],
+              border: `1px solid ${gray[700]}`,
+              boxShadow: 'none',
               '&:hover': {
-                backgroundColor: brand[700],
+                backgroundColor: gray[800],
                 boxShadow: 'none',
               },
               '&:active': {
-                backgroundColor: brand[700],
-                backgroundImage: 'none',
+                backgroundColor: gray[700],
               },
+              ...theme.applyStyles('dark', {
+                color: 'black',
+                backgroundColor: gray[50],
+                border: `1px solid ${gray[300]}`,
+                '&:hover': {
+                  backgroundColor: gray[200],
+                  boxShadow: 'none',
+                },
+                '&:active': {
+                  backgroundColor: gray[300],
+                },
+              }),
             },
           },
           {

src/shared-theme/customizations/surfaces.ts

@@ -36,7 +36,7 @@ export const surfacesCustomizations: Components<Theme> = {
     styleOverrides: {
       root: ({ theme }) => ({
         border: 'none',
-        borderRadius: 8,
+        borderRadius: (theme.vars || theme).shape.borderRadius,
         '&:hover': { backgroundColor: gray[50] },
         '&:focus-visible': { backgroundColor: 'transparent' },
         ...theme.applyStyles('dark', {