fix: match import button style to export button (refs #26)

Desktop changes:
- Replace ImportButton component with MUI Button matching Export style
- Use hidden file input with validation
- Dark red/maroon button with consistent styling

Mobile changes:
- Update both Import and Export buttons to use primary-500 style
- Consistent dark primary button appearance
- Maintains 44px touch target requirement

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

frontend/src/features/settings/components/ImportButton.tsx

@@ -57,7 +57,7 @@ export const ImportButton: React.FC<ImportButtonProps> = ({
       <button
         onClick={handleButtonClick}
         disabled={disabled}
-        className="w-full text-left p-3 bg-primary-50 text-primary-700 rounded-lg font-medium hover:bg-primary-100 transition-colors disabled:opacity-50 dark:bg-primary-900/20 dark:text-primary-300 dark:hover:bg-primary-900/30"
+        className="w-full text-left p-3 bg-primary-500 text-white rounded-lg font-medium hover:bg-primary-600 transition-colors disabled:opacity-50 dark:bg-primary-600 dark:hover:bg-primary-700"
         style={{ minHeight: '44px' }}
       >
         Import My Data

frontend/src/features/settings/mobile/MobileSettingsScreen.tsx

@@ -459,7 +459,7 @@ export const MobileSettingsScreen: React.FC = () => {
               </p>
               <button
                 onClick={() => setShowDataExport(true)}
-                className="w-full text-left p-3 bg-primary-50 text-primary-700 rounded-lg font-medium hover:bg-primary-100 transition-colors dark:bg-primary-900/20 dark:text-primary-300 dark:hover:bg-primary-900/30"
+                className="w-full text-left p-3 bg-primary-500 text-white rounded-lg font-medium hover:bg-primary-600 transition-colors disabled:opacity-50 dark:bg-primary-600 dark:hover:bg-primary-700"
                 style={{ minHeight: '44px' }}
               >
                 Export My Data