fix: UX Issues fixed

frontend/src/components/Layout.tsx

@@ -52,7 +52,7 @@ export const Layout: React.FC<LayoutProps> = ({ children, mobileMode = false })
   // Mobile layout
   if (mobileMode) {
     return (
-      <div className="w-full min-h-screen bg-gradient-to-br from-slate-50 via-white to-rose-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
+      <div className="w-full min-h-screen bg-gradient-to-br from-slate-50 via-white to-rose-50 dark:from-paper dark:via-nero dark:to-paper">
         <Container
           maxWidth={false}
           sx={{
@@ -95,7 +95,7 @@ export const Layout: React.FC<LayoutProps> = ({ children, mobileMode = false })
 
   // Desktop layout
   return (
-    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-rose-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-rose-50 dark:from-paper dark:via-nero dark:to-paper">
       {/* Sidebar */}
       <Paper
         elevation={2}

frontend/src/features/auth/pages/CallbackPage.tsx

@@ -48,7 +48,7 @@ export const CallbackPage: React.FC = () => {
   }, [userStatus, isLoading, error, navigate, returnTo]);
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-rose-50 flex items-center justify-center p-4">
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-rose-50 dark:from-paper dark:via-nero dark:to-paper flex items-center justify-center p-4">
       <div className="text-center">
         <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-primary-100 mb-4">
           <svg

frontend/src/features/auth/pages/VerifyEmailPage.tsx

@@ -64,7 +64,7 @@ export const VerifyEmailPage: React.FC = () => {
   // Show loading state when auto-login is in progress
   if (isAutoLoginTriggered || (verificationSuccessful && !isAuthLoading)) {
     return (
-      <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-rose-50 flex items-center justify-center p-4">
+      <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-rose-50 dark:from-paper dark:via-nero dark:to-paper flex items-center justify-center p-4">
         <div className="text-center">
           <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-green-100 mb-4">
             <svg
@@ -112,7 +112,7 @@ export const VerifyEmailPage: React.FC = () => {
   }
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-rose-50 flex items-center justify-center p-4">
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-rose-50 dark:from-paper dark:via-nero dark:to-paper flex items-center justify-center p-4">
       <div className="w-full max-w-md">
         <div className="bg-white rounded-lg shadow-lg p-8">
           <div className="text-center mb-8">

frontend/src/features/onboarding/pages/OnboardingPage.tsx

@@ -68,7 +68,7 @@ export const OnboardingPage: React.FC = () => {
   };
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-rose-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900 flex items-center justify-center p-4">
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-rose-50 dark:from-paper dark:via-nero dark:to-paper flex items-center justify-center p-4">
       <div className="w-full max-w-2xl">
         {/* Progress Indicator */}
         <div className="mb-8">

frontend/src/shared-minimal/components/mobile/MobileContainer.tsx

@@ -14,7 +14,7 @@ export const MobileContainer: React.FC<MobileContainerProps> = ({
   className = '' 
 }) => {
   return (
-    <div className="w-full min-h-screen bg-gradient-to-br from-slate-50 via-white to-rose-50 flex items-start justify-center p-4 md:py-6">
+    <div className="w-full min-h-screen bg-gradient-to-br from-slate-50 via-white to-rose-50 dark:from-paper dark:via-nero dark:to-paper flex items-start justify-center p-4 md:py-6">
       <div className={`w-full max-w-[380px] min-h-screen md:min-h-[600px] md:rounded-[32px] shadow-2xl flex flex-col border-0 md:border border-slate-200/70 bg-white/90 md:bg-white/70 backdrop-blur-xl ${className}`}>
         {children}
       </div>

frontend/src/shared-minimal/theme/md3Theme.ts

@@ -192,7 +192,6 @@ export const md3DarkTheme = createTheme({
         root: {
           borderRadius: 20,
           boxShadow: '0 1px 2px rgba(0,0,0,.2), 0 4px 16px rgba(0,0,0,.3)',
-          backgroundColor: 'rgba(255,255,255,0.05)',
           border: '1px solid rgba(255,255,255,0.1)',
         },
       },

frontend/tailwind.config.js

@@ -25,6 +25,7 @@ export default {
           850: '#18202f',
         },
         // Dark theme tokens (Ferrari-inspired palette)
+        paper: '#1D1A18',      // MUI background.paper - DARKEST brownish-black
         nero: '#231F1C',       // Nero Daytona - page base
         avus: '#F2F3F6',       // Bianco Avus - primary text on dark
         titanio: '#A8B8C0',    // Grigio Titanio - secondary text on dark