theme fix

src/pages/SettingsPage.tsx

@@ -5,6 +5,7 @@ import { clearDeviceKey, clearEncryptedSecretKey } from '../lib/crypto'
 import { useNavigate } from 'react-router-dom'
 import BottomNav from '../components/BottomNav'
 import { useOnboardingTour, hasPendingTourStep, clearPendingTourStep } from '../hooks/useOnboardingTour'
+import { PageLoader } from '../components/PageLoader'
 
 const MAX_PHOTO_SIZE = 200 // px — resize to 200x200
 
@@ -187,12 +188,7 @@ export default function SettingsPage() {
   }
 
   if (loading) {
-    return (
-      <div className="settings-page" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-        <p style={{ color: '#9ca3af' }}>Loading…</p>
-        <BottomNav />
-      </div>
-    )
+    return <PageLoader />
   }
 
   return (
@@ -211,7 +207,7 @@ export default function SettingsPage() {
             {photoURL ? (
               <img src={photoURL} alt={displayName} className="settings-avatar-img" />
             ) : (
-              <div className="settings-avatar-placeholder" style={{ fontSize: '1.75rem', background: 'linear-gradient(135deg, #86efac 0%, #22c55e 100%)' }}>
+              <div className="settings-avatar-placeholder" style={{ fontSize: '1.75rem' }}>
                 {displayName.charAt(0).toUpperCase()}
               </div>
             )}
@@ -345,15 +341,7 @@ export default function SettingsPage() {
         </section>
 
         {message && (
-          <div style={{
-            padding: '0.75rem',
-            marginBottom: '1rem',
-            borderRadius: '8px',
-            fontSize: '0.875rem',
-            backgroundColor: message.type === 'success' ? '#f0fdf4' : '#fef2f2',
-            color: message.type === 'success' ? '#15803d' : '#b91c1c',
-            textAlign: 'center',
-          }}>
+          <div className={`alert-msg alert-msg--${message.type}`} style={{ marginBottom: '1rem' }}>
             {message.text}
           </div>
         )}
@@ -481,9 +469,8 @@ export default function SettingsPage() {
               disabled={saving}
               maxLength={50}
               autoFocus
-              style={{ borderColor: '#d1d5db' }}
-              onFocus={(e) => (e.target.style.borderColor = '#22c55e')}
-              onBlur={(e) => (e.target.style.borderColor = '#d1d5db')}
+              onFocus={(e) => (e.target.style.borderColor = 'var(--color-primary)')}
+              onBlur={(e) => (e.target.style.borderColor = '')}
             />
 
             <div className="confirm-modal-actions" style={{ marginTop: '1rem' }}>