feat: implement dynamic scoring, webhooks, and resume download

src/components/CandidateDrawer.jsx

@@ -123,7 +123,7 @@ const CandidateDrawer = ({ isOpen, onClose, candidate }) => {
               <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start', marginBottom: '2rem' }}>
                 <div>
                   <h2 style={{ fontSize: '1.75rem', fontWeight: 'bold', color: 'white' }}>{candidate.name}</h2>
-                  <p style={{ color: '#94a3b8' }}>{candidate.jobTitle || candidate.role} • {candidate.experience} yrs</p>
+                  <p style={{ color: '#94a3b8' }}>{candidate.jobTitle || candidate.role} • {candidate.experience} </p>
                 </div>
                 <button onClick={onClose} style={{ background: 'none', border: 'none', color: '#94a3b8', cursor: 'pointer' }}>
                   <X size={24} />

src/pages/AdminLogin.jsx

@@ -3,20 +3,16 @@ import React, { useState } from 'react';
 import { motion } from 'framer-motion';
 
 // --- SVG Icon Components ---
-const UserIcon = () => ( <svg style={{ width: '20px', height: '20px', color: 'rgba(255, 255, 255, 0.7)' }} viewBox="0 0 20 20" fill="currentColor"><path fillRule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clipRule="evenodd" /></svg> );
-const LockIcon = () => ( <svg style={{ width: '20px', height: '20px', color: 'rgba(255, 255, 255, 0.7)' }} viewBox="0 0 20 20" fill="currentColor"><path fillRule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clipRule="evenodd" /></svg> );
-const SpinnerIcon = () => <motion.svg animate={{ rotate: 360 }} transition={{ duration: 1, repeat: Infinity, ease: "linear" }} style={{ width: '20px', height: '20px' }} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></motion.svg>;
-
+const UserIcon = () => (<svg style={{ width: '20px', height: '20px', color: 'rgba(255, 255, 255, 0.7)' }} viewBox="0 0 20 20" fill="currentColor"><path fillRule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clipRule="evenodd" /></svg>);
+const LockIcon = () => (<svg style={{ width: '20px', height: '20px', color: 'rgba(255, 255, 255, 0.7)' }} viewBox="0 0 20 20" fill="currentColor"><path fillRule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clipRule="evenodd" /></svg>);
+const SpinnerIcon = () => <motion.svg animate={{ rotate: 360 }} transition={{ duration: 1, repeat: Infinity, ease: "linear" }} style={{ width: '20px', height: '20px' }} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M21 12a9 9 0 1 1-6.219-8.56" /></motion.svg>;
 
 export default function AdminLogin({ onNavigate }) {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
-  
-  // --- STATE UPDATES ---
   const [loading, setLoading] = useState(false);
-  const [error, setError] = useState(''); // Changed to a single string for all errors
+  const [error, setError] = useState('');
 
- // --- UPDATED LOGIN HANDLER ---
   const handleAdminLogin = async (e) => {
     e.preventDefault();
     setError('');
@@ -29,40 +25,33 @@ export default function AdminLogin({ onNavigate }) {
     setLoading(true);
 
     try {
-      // 1. Authenticate with Supabase Auth
+      // 1. Authenticate
       const { data: { user }, error: authError } = await supabase.auth.signInWithPassword({
         email: email,
         password: password,
       });
 
       if (authError) throw authError;
-      if (!user) throw new Error("Login failed, please try again.");
+      if (!user) throw new Error("Login failed.");
 
-      // 2. ✅ CORRECTED: Check role in 'user_roles' using 'user_id'
+      // 2. Check Role
       const { data: roleData, error: roleError } = await supabase
-        .from('user_roles')      // Correct table name
+        .from('user_roles')
         .select('role')
-        .eq('user_id', user.id)  // ⚠️ CHANGED: was 'id', now 'user_id'
+        .eq('user_id', user.id)
         .single();
 
-      // Handle case where no role row exists
       if (roleError && roleError.code !== 'PGRST116') {
-          throw new Error("Could not verify user role.");
+        throw new Error("Could not verify user role.");
       }
 
-      // 3. Check role and grant access
-      // You mentioned checking for 'recruiter' here. 
-      // If this is the ADMIN login page, you should check for 'admin'.
-      // If this is a general login, checking for 'recruiter' is fine.
-      if (roleData && roleData.role === 'recruiter') {
-        
-        // ✅ Success
+      // 3. Admin Check
+      // Accepts 'admin' or 'recruiter' based on your previous logic
+      if (roleData && (roleData.role === 'admin' || roleData.role === 'recruiter')) {
         if (typeof onNavigate === 'function') {
-          onNavigate('admin-dashboard'); 
+          onNavigate('admin-dashboard');
         }
-
       } else {
-        // ❌ Access Denied
         await supabase.auth.signOut();
         throw new Error("Access Denied. Authorized personnel only.");
       }
@@ -80,7 +69,32 @@ export default function AdminLogin({ onNavigate }) {
       alignItems: 'center', justifyContent: 'center', overflow: 'hidden',
       backgroundColor: '#020617', color: 'white', fontFamily: "'Montserrat', sans-serif", padding: '1rem',
     }}>
-      <style>{`@import url('...'); input:-webkit-autofill...`}</style>
+      <style>{`@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap'); input:-webkit-autofill { -webkit-text-fill-color: #fff !important; -webkit-box-shadow: 0 0 0px 1000px rgba(239, 68, 68, 0.1) inset !important; }`}</style>
+
+      {/* --- 🔴 FIXED BACK BUTTON --- */}
+      <button
+        onClick={() => onNavigate('login')}
+        style={{
+          position: 'fixed', // Fixed to stay on top
+          top: '20px',
+          left: '20px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          gap: '8px',
+          padding: '12px 20px',
+          backgroundColor: '#510000', // Red for Admin
+          color: '#ffffffbe',
+          border: '2px solid #510000',
+          borderRadius: '10px',
+          fontWeight: '700',
+          cursor: 'pointer',
+          zIndex: 9999, // High z-index
+          boxShadow: '0 4px 10px rgba(0,0,0,0.3)'
+        }}
+      >
+        <span>⬅</span> Back
+      </button>
 
       {/* Background Shapes */}
       <>
@@ -88,14 +102,14 @@ export default function AdminLogin({ onNavigate }) {
         <div style={{ position: 'absolute', borderRadius: '50%', filter: 'blur(80px)', opacity: 0.4, width: '320px', height: '320px', backgroundColor: '#DC2626', bottom: '-80px', right: '-120px' }}></div>
       </>
 
-      <motion.div 
+      <motion.div
         initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5, ease: "easeOut" }}
         style={{
           width: '100%', maxWidth: '512px', borderRadius: '1rem', backgroundColor: 'rgba(239, 68, 68, 0.1)',
           backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)', border: '1px solid rgba(239, 68, 68, 0.3)',
           padding: '2rem', zIndex: 10,
         }}>
-        
+
         <div style={{ textAlign: 'center', marginBottom: '2rem' }}>
           <h2 style={{ fontSize: '1.875rem', fontWeight: 'bold' }}>Admin Portal</h2>
           <p style={{ color: '#d1d5db', marginTop: '0.25rem' }}>Manage CV submissions and applications</p>
@@ -114,12 +128,10 @@ export default function AdminLogin({ onNavigate }) {
               <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} disabled={loading} placeholder="Password" style={{ width: '100%', padding: '0.75rem 1rem 0.75rem 2.5rem', backgroundColor: 'rgba(255, 255, 255, 0.1)', border: `1px solid rgba(239, 68, 68, 0.3)`, borderRadius: '0.5rem', color: 'white', boxSizing: 'border-box' }} />
             </div>
           </div>
-          
-          {/* --- UI TO DISPLAY ANY ERROR --- */}
+
           {error && <p style={{ color: '#F87171', fontSize: '0.875rem', marginTop: '-0.5rem', marginBottom: '1.5rem', textAlign: 'center' }}>{error}</p>}
 
           <motion.button type="submit" disabled={loading} whileHover={{ scale: loading ? 1 : 1.03 }} whileTap={{ scale: loading ? 1 : 0.98 }} style={{ width: '100%', backgroundColor: '#EF4444', color: 'white', fontWeight: 'bold', padding: '0.75rem 0', borderRadius: '0.5rem', border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '8px', opacity: loading ? 0.7 : 1 }}>
-             {/* --- UI FEEDBACK FOR LOADING --- */}
             {loading && <SpinnerIcon />}
             {loading ? 'Verifying...' : 'Continue'}
           </motion.button>

src/pages/AppliLogin.jsx

@@ -2,9 +2,9 @@ import { supabase } from '../supabaseClient';
 import React, { useState } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 
-// --- SVG Icon Components (no changes) ---
-const EyeIcon = () => ( <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg> );
-const EyeOffIcon = () => ( <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path><line x1="1" y1="1" x2="23" y2="23"></line></svg> );
+// --- SVG Icon Components ---
+const EyeIcon = () => (<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>);
+const EyeOffIcon = () => (<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path><line x1="1" y1="1" x2="23" y2="23"></line></svg>);
 
 export default function AppliLogin({ onNavigate }) {
   const [mode, setMode] = useState('login');
@@ -14,15 +14,15 @@ export default function AppliLogin({ onNavigate }) {
   const [isPasswordVisible, setIsPasswordVisible] = useState(false);
   const [errors, setErrors] = useState({});
   const [loading, setLoading] = useState(false);
-  
-  // NEW: State for integrated notifications
-  const [notification, setNotification] = useState(null); // { type: 'success' | 'error', message: '...' }
+
+  // Notification State
+  const [notification, setNotification] = useState(null);
 
   const validate = () => {
     const newErrors = {};
     if (!email.trim()) newErrors.email = 'Email is required.';
     else if (!/\S+@\S+\.\S+/.test(email)) newErrors.email = 'Email is invalid.';
-    
+
     if (mode !== 'forgot') {
       if (!password) newErrors.password = 'Password is required.';
     }
@@ -33,7 +33,6 @@ export default function AppliLogin({ onNavigate }) {
     return newErrors;
   };
 
-  // --- FULLY MODIFIED handleSubmit Function ---
   const handleSubmit = async (e) => {
     e.preventDefault();
     const formErrors = validate();
@@ -41,61 +40,51 @@ export default function AppliLogin({ onNavigate }) {
       setErrors(formErrors);
       return;
     }
-    
+
     setErrors({});
     setLoading(true);
-    setNotification(null); // Clear previous notifications
+    setNotification(null);
 
     try {
       if (mode === 'login') {
-  const { data, error } = await supabase.auth.signInWithPassword({
-    email,
-    password,
-  });
-  if (error) throw error;
-
-  // ✅ Check user role from Supabase metadata
-  const role = data.user?.user_metadata?.role;
-
-    if (role === 'applicant') {
-    onNavigate('dashboard');
-  } else {
-    // If role is undefined or invalid
-    setNotification({ type: 'error', message: 'Unauthorized role detected.' });
-    await supabase.auth.signOut(); // Log out unauthorized users
-  }
-}
- else if (mode === 'register') {
-        // FIXED: Added options to pass the 'applicant' role to our trigger
+        const { data, error } = await supabase.auth.signInWithPassword({
+          email,
+          password,
+        });
+        if (error) throw error;
+
+        // Check role
+        const role = data.user?.user_metadata?.role;
+        if (role === 'applicant') {
+          onNavigate('dashboard');
+        } else {
+          setNotification({ type: 'error', message: 'Unauthorized role detected.' });
+          await supabase.auth.signOut();
+        }
+      } else if (mode === 'register') {
         const { error } = await supabase.auth.signUp({
           email,
           password,
-          options: {
-            data: {
-              role: 'applicant'
-            }
-          }
+          options: { data: { role: 'applicant' } }
         });
         if (error) throw error;
-        setNotification({ type: 'success', message: 'Registration successful! Please login to access your account.' });
+        setNotification({ type: 'success', message: 'Registration successful! Please login.' });
         setMode('login');
       } else if (mode === 'forgot') {
-        // NEW: Added password reset logic
         const { error } = await supabase.auth.resetPasswordForEmail(email, {
-          redirectTo: window.location.origin, // Or a specific password reset page
+          redirectTo: window.location.origin,
         });
         if (error) throw error;
         setNotification({ type: 'success', message: 'Password reset link sent! Check your email.' });
         setMode('login');
       }
     } catch (error) {
-      // FIXED: Using integrated notification instead of alert()
       setNotification({ type: 'error', message: error.message });
     } finally {
       setLoading(false);
     }
   };
-  
+
   const formVariants = {
     hidden: { opacity: 0, y: 20 },
     visible: { opacity: 1, y: 0 },
@@ -103,64 +92,71 @@ export default function AppliLogin({ onNavigate }) {
   };
 
   const notificationStyles = {
-    padding: '0.75rem 1rem',
-    marginBottom: '1rem',
-    borderRadius: '0.5rem',
-    fontSize: '0.875rem',
-    textAlign: 'center',
-    border: '1px solid',
-  };
-
-  const successStyles = {
-    ...notificationStyles,
-    backgroundColor: 'rgba(16, 185, 129, 0.1)',
-    borderColor: 'rgba(5, 150, 105, 0.3)',
-    color: '#34D399',
-  };
-
-  const errorStyles = {
-    ...notificationStyles,
-    backgroundColor: 'rgba(239, 68, 68, 0.1)',
-    borderColor: 'rgba(220, 38, 38, 0.3)',
-    color: '#F87171',
+    padding: '0.75rem 1rem', marginBottom: '1rem', borderRadius: '0.5rem',
+    fontSize: '0.875rem', textAlign: 'center', border: '1px solid',
   };
 
   return (
     <div style={{ position: 'relative', minHeight: '100vh', width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '1rem', overflow: 'hidden', backgroundColor: '#020617', color: 'white', fontFamily: "'Montserrat', sans-serif" }}>
-      <style>{`@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap'); input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-text-fill-color: #fff !important; -webkit-box-shadow: 0 0 0px 1000px rgba(251, 191, 36, 0.1) inset !important; box-shadow: 0 0 0px 1000px rgba(251, 191, 36, 0.1) inset !important; transition: background-color 5000s ease-in-out 0s; }`}</style>
+      <style>{`@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap'); input:-webkit-autofill { -webkit-text-fill-color: #fff !important; -webkit-box-shadow: 0 0 0px 1000px rgba(251, 191, 36, 0.1) inset !important; }`}</style>
+
+      {/* --- 🔴 FIXED BACK BUTTON (Z-INDEX 999) --- */}
+      <button
+        onClick={() => onNavigate('login')} // Ensure this matches your prop name
+        style={{
+          position: 'fixed', // Changed from absolute to fixed
+          top: '20px',
+          left: '20px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          gap: '8px',
+          padding: '12px 20px',
+          backgroundColor: '#3a2f04',
+          color: '#cebe65',
+          border: '2px solid #3a2f04',
+          borderRadius: '10px',
+          fontWeight: '700',
+          cursor: 'pointer',
+          zIndex: 9999, // Super high Z-Index
+          boxShadow: '0 4px 10px rgba(0,0,0,0.3)'
+        }}
+      >
+        <span>⬅</span> Back
+      </button>
+
+      {/* Background Orbs */}
       <>
         <div style={{ position: 'absolute', borderRadius: '50%', filter: 'blur(80px)', opacity: 0.4, width: '384px', height: '384px', backgroundColor: '#FBBF24', top: '-50px', left: '-100px' }}></div>
         <div style={{ position: 'absolute', borderRadius: '50%', filter: 'blur(80px)', opacity: 0.4, width: '320px', height: '320px', backgroundColor: '#F59E0B', bottom: '-80px', right: '-120px' }}></div>
       </>
-      <motion.div 
+
+      <motion.div
         initial={{ opacity: 0, scale: 0.95 }}
         animate={{ opacity: 1, scale: 1 }}
-        transition={{ duration: 0.4, ease: "easeOut" }}
-        style={{ width: '100%', maxWidth: '512px', borderRadius: '1rem', backgroundColor: 'rgba(251, 191, 36, 0.1)', backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)', border: '1px solid rgba(251, 191, 36, 0.3)', boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)', padding: '2rem', zIndex: 10 }}>
-        
-        {/* NEW: Render Notification */}
+        transition={{ duration: 0.4 }}
+        style={{ width: '100%', maxWidth: '512px', borderRadius: '1rem', backgroundColor: 'rgba(251, 191, 36, 0.1)', backdropFilter: 'blur(12px)', border: '1px solid rgba(251, 191, 36, 0.3)', padding: '2rem', zIndex: 10 }}>
+
+        {/* Notification */}
         <AnimatePresence>
           {notification && (
             <motion.div
-              initial={{ opacity: 0, y: -10 }}
-              animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0, y: -10 }}
-              style={notification.type === 'success' ? successStyles : errorStyles}
+              initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -10 }}
+              style={{
+                ...notificationStyles,
+                backgroundColor: notification.type === 'success' ? 'rgba(16, 185, 129, 0.1)' : 'rgba(239, 68, 68, 0.1)',
+                borderColor: notification.type === 'success' ? 'rgba(5, 150, 105, 0.3)' : 'rgba(220, 38, 38, 0.3)',
+                color: notification.type === 'success' ? '#34D399' : '#F87171'
+              }}
             >
               {notification.message}
             </motion.div>
           )}
         </AnimatePresence>
-        
+
         <AnimatePresence mode="wait">
-          <motion.div
-            key={mode}
-            variants={formVariants}
-            initial="hidden"
-            animate="visible"
-            exit="exit"
-            transition={{ duration: 0.3 }}
-          >
+          <motion.div key={mode} variants={formVariants} initial="hidden" animate="visible" exit="exit" transition={{ duration: 0.3 }}>
+
             {/* --- Login Form --- */}
             {mode === 'login' && (
               <div>
@@ -168,74 +164,59 @@ export default function AppliLogin({ onNavigate }) {
                 <h2 style={{ fontSize: '1.875rem', fontWeight: 'bold', marginBottom: '1.5rem', textAlign: 'center' }}>Applicant Portal</h2>
                 <form onSubmit={handleSubmit}>
                   <div style={{ marginBottom: '1rem' }}>
-                    <label htmlFor="email" style={{ display: 'block', fontSize: '0.875rem', fontWeight: '500', marginBottom: '0.5rem', color: '#d1d5db' }}>Email</label>
-                    <input type="email" id="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="lead@example.com" disabled={loading} style={{ width: '100%', padding: '0.75rem 1rem', backgroundColor: 'rgba(255, 255, 255, 0.1)', border: `1px solid ${errors.email ? '#EF4444' : 'rgba(251, 191, 36, 0.3)'}`, borderRadius: '0.5rem', color: 'white', transition: 'all 0.3s ease', boxSizing: 'border-box' }} />
-                    {errors.email && <p style={{ color: '#F87171', fontSize: '0.75rem', marginTop: '0.5rem', textAlign: 'left' }}>{errors.email}</p>}
+                    <label style={{ display: 'block', fontSize: '0.875rem', fontWeight: '500', marginBottom: '0.5rem', color: '#d1d5db' }}>Email</label>
+                    <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="lead@example.com" disabled={loading} style={{ width: '100%', padding: '0.75rem 1rem', backgroundColor: 'rgba(255, 255, 255, 0.1)', border: `1px solid ${errors.email ? '#EF4444' : 'rgba(251, 191, 36, 0.3)'}`, borderRadius: '0.5rem', color: 'white' }} />
+                    {errors.email && <p style={{ color: '#F87171', fontSize: '0.75rem', marginTop: '0.5rem' }}>{errors.email}</p>}
                   </div>
                   <div style={{ marginBottom: '1.5rem' }}>
-                    <label htmlFor="password" style={{ display: 'block', fontSize: '0.875rem', fontWeight: '500', marginBottom: '0.5rem', color: '#d1d5db' }}>Password</label>
-                    <div style={{ position: 'relative', display: 'flex', alignItems: 'center' }}>
-                      <input type={isPasswordVisible ? 'text' : 'password'} id="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="••••••••" disabled={loading} style={{ width: '100%', padding: '0.75rem 3rem 0.75rem 1rem', backgroundColor: 'rgba(255, 255, 255, 0.1)', border: `1px solid ${errors.password ? '#EF4444' : 'rgba(251, 191, 36, 0.3)'}`, borderRadius: '0.5rem', color: 'white', transition: 'all 0.3s ease', boxSizing: 'border-box' }} />
-                      <div style={{ position: 'absolute', right: '0.5rem' }}>
-                        <button type="button" onClick={() => setIsPasswordVisible(!isPasswordVisible)} title={isPasswordVisible ? 'Hide Password' : 'Show Password'} style={{ padding: '0.25rem', backgroundColor: 'transparent', border: 'none', cursor: 'pointer', color: '#FCD34D' }}>
-                          {isPasswordVisible ? <EyeOffIcon /> : <EyeIcon />}
-                        </button>
-                      </div>
+                    <label style={{ display: 'block', fontSize: '0.875rem', fontWeight: '500', marginBottom: '0.5rem', color: '#d1d5db' }}>Password</label>
+                    <div style={{ position: 'relative' }}>
+                      <input type={isPasswordVisible ? 'text' : 'password'} value={password} onChange={(e) => setPassword(e.target.value)} placeholder="••••••••" disabled={loading} style={{ width: '100%', padding: '0.75rem 3rem 0.75rem 1rem', backgroundColor: 'rgba(255, 255, 255, 0.1)', border: `1px solid ${errors.password ? '#EF4444' : 'rgba(251, 191, 36, 0.3)'}`, borderRadius: '0.5rem', color: 'white' }} />
+                      <button type="button" onClick={() => setIsPasswordVisible(!isPasswordVisible)} style={{ position: 'absolute', right: '0.5rem', top: '50%', transform: 'translateY(-50%)', background: 'none', border: 'none', color: '#FCD34D', cursor: 'pointer' }}>{isPasswordVisible ? <EyeOffIcon /> : <EyeIcon />}</button>
                     </div>
-                    {errors.password ? <p style={{ color: '#F87171', fontSize: '0.75rem', marginTop: '0.5rem', textAlign: 'left' }}>{errors.password}</p> : <button type="button" onClick={() => setMode('forgot')} style={{ fontSize: '0.75rem', color: '#FCD34D', textDecoration: 'none', marginTop: '0.5rem', display: 'block', textAlign: 'right', background: 'none', border: 'none', cursor: 'pointer', padding: 0 }}>Forgot Password?</button>}
+                    {errors.password ? <p style={{ color: '#F87171', fontSize: '0.75rem', marginTop: '0.5rem' }}>{errors.password}</p> : <button type="button" onClick={() => setMode('forgot')} style={{ fontSize: '0.75rem', color: '#FCD34D', background: 'none', border: 'none', cursor: 'pointer', float: 'right', marginTop: '0.5rem' }}>Forgot Password?</button>}
                   </div>
-                  <motion.button type="submit" whileHover={{ scale: 1.03 }} whileTap={{ scale: 0.98 }} disabled={loading} style={{ width: '100%', backgroundColor: '#FBBF24', color: '#1a202c', fontWeight: 'bold', padding: '0.75rem 0', borderRadius: '0.5rem', border: 'none', cursor: 'pointer', opacity: loading ? 0.7 : 1 }}>
-                    {loading ? 'Signing In...' : 'Sign In'}
-                  </motion.button>
+                  <motion.button type="submit" whileHover={{ scale: 1.03 }} whileTap={{ scale: 0.98 }} disabled={loading} style={{ width: '100%', backgroundColor: '#FBBF24', color: '#1a202c', fontWeight: 'bold', padding: '0.75rem 0', borderRadius: '0.5rem', border: 'none', cursor: 'pointer', marginTop: '1rem' }}>{loading ? 'Signing In...' : 'Sign In'}</motion.button>
                 </form>
-                <p style={{ fontSize: '0.75rem', textAlign: 'center', color: '#9ca3af', marginTop: '2rem' }}>Don't have an account? <button onClick={() => setMode('register')} style={{ color: '#FCD34D', fontWeight: '600', textDecoration: 'none', background: 'none', border: 'none', cursor: 'pointer', padding: 0 }}>Register for free</button></p>
+                <p style={{ fontSize: '0.75rem', textAlign: 'center', color: '#9ca3af', marginTop: '2rem' }}>Don't have an account? <button onClick={() => setMode('register')} style={{ color: '#FCD34D', fontWeight: '600', background: 'none', border: 'none', cursor: 'pointer' }}>Register For Free</button></p>
               </div>
             )}
-            
+
             {/* --- Register Form --- */}
             {mode === 'register' && (
               <div>
                 <h2 style={{ fontSize: '1.875rem', fontWeight: 'bold', marginBottom: '1.5rem', textAlign: 'center' }}>Create Account</h2>
                 <form onSubmit={handleSubmit}>
                   <div style={{ marginBottom: '1rem' }}>
-                    <label htmlFor="email" style={{ display: 'block', fontSize: '0.875rem', fontWeight: '500', marginBottom: '0.5rem', color: '#d1d5db' }}>Email</label>
-                    <input type="email" id="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="lead@example.com" disabled={loading} style={{ width: '100%', padding: '0.75rem 1rem', backgroundColor: 'rgba(255, 255, 255, 0.1)', border: `1px solid ${errors.email ? '#EF4444' : 'rgba(251, 191, 36, 0.3)'}`, borderRadius: '0.5rem', color: 'white', transition: 'all 0.3s ease', boxSizing: 'border-box' }} />
-                    {errors.email && <p style={{ color: '#F87171', fontSize: '0.75rem', marginTop: '0.5rem', textAlign: 'left' }}>{errors.email}</p>}
+                    <label style={{ display: 'block', fontSize: '0.875rem', fontWeight: '500', marginBottom: '0.5rem', color: '#d1d5db' }}>Email</label>
+                    <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} disabled={loading} style={{ width: '100%', padding: '0.75rem 1rem', backgroundColor: 'rgba(255, 255, 255, 0.1)', border: `1px solid ${errors.email ? '#EF4444' : 'rgba(251, 191, 36, 0.3)'}`, borderRadius: '0.5rem', color: 'white' }} />
                   </div>
                   <div style={{ marginBottom: '1rem' }}>
-                    <label htmlFor="password" style={{ display: 'block', fontSize: '0.875rem', fontWeight: '500', marginBottom: '0.5rem', color: '#d1d5db' }}>Password</label>
-                    <input type="password" id="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="••••••••" disabled={loading} style={{ width: '100%', padding: '0.75rem 1rem', backgroundColor: 'rgba(255, 255, 255, 0.1)', border: `1px solid ${errors.password ? '#EF4444' : 'rgba(251, 191, 36, 0.3)'}`, borderRadius: '0.5rem', color: 'white', transition: 'all 0.3s ease', boxSizing: 'border-box' }} />
-                    {errors.password && <p style={{ color: '#F87171', fontSize: '0.75rem', marginTop: '0.5rem', textAlign: 'left' }}>{errors.password}</p>}
+                    <label style={{ display: 'block', fontSize: '0.875rem', fontWeight: '500', marginBottom: '0.5rem', color: '#d1d5db' }}>Password</label>
+                    <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} disabled={loading} style={{ width: '100%', padding: '0.75rem 1rem', backgroundColor: 'rgba(255, 255, 255, 0.1)', border: `1px solid ${errors.password ? '#EF4444' : 'rgba(251, 191, 36, 0.3)'}`, borderRadius: '0.5rem', color: 'white' }} />
                   </div>
                   <div style={{ marginBottom: '1.5rem' }}>
-                    <label htmlFor="confirmPassword" style={{ display: 'block', fontSize: '0.875rem', fontWeight: '500', marginBottom: '0.5rem', color: '#d1d5db' }}>Confirm Password</label>
-                    <input type="password" id="confirmPassword" value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)} placeholder="••••••••" disabled={loading} style={{ width: '100%', padding: '0.75rem 1rem', backgroundColor: 'rgba(255, 255, 255, 0.1)', border: `1px solid ${errors.confirmPassword ? '#EF4444' : 'rgba(251, 191, 36, 0.3)'}`, borderRadius: '0.5rem', color: 'white', transition: 'all 0.3s ease', boxSizing: 'border-box' }} />
-                    {errors.confirmPassword && <p style={{ color: '#F87171', fontSize: '0.75rem', marginTop: '0.5rem', textAlign: 'left' }}>{errors.confirmPassword}</p>}
+                    <label style={{ display: 'block', fontSize: '0.875rem', fontWeight: '500', marginBottom: '0.5rem', color: '#d1d5db' }}>Confirm Password</label>
+                    <input type="password" value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)} disabled={loading} style={{ width: '100%', padding: '0.75rem 1rem', backgroundColor: 'rgba(255, 255, 255, 0.1)', border: `1px solid ${errors.confirmPassword ? '#EF4444' : 'rgba(251, 191, 36, 0.3)'}`, borderRadius: '0.5rem', color: 'white' }} />
                   </div>
-                  <motion.button type="submit" whileHover={{ scale: 1.03 }} whileTap={{ scale: 0.98 }} disabled={loading} style={{ width: '100%', backgroundColor: '#FBBF24', color: '#1a202c', fontWeight: 'bold', padding: '0.75rem 0', borderRadius: '0.5rem', border: 'none', cursor: 'pointer', opacity: loading ? 0.7 : 1 }}>
-                    {loading ? 'Registering...' : 'Register'}
-                  </motion.button>
+                  <motion.button type="submit" whileHover={{ scale: 1.03 }} whileTap={{ scale: 0.98 }} disabled={loading} style={{ width: '100%', backgroundColor: '#FBBF24', color: '#1a202c', fontWeight: 'bold', padding: '0.75rem 0', borderRadius: '0.5rem', border: 'none', cursor: 'pointer' }}>{loading ? 'Registering...' : 'Register'}</motion.button>
                 </form>
-                <p style={{ fontSize: '0.75rem', textAlign: 'center', color: '#9ca3af', marginTop: '2rem' }}>Already have an account? <button onClick={() => setMode('login')} style={{ color: '#FCD34D', fontWeight: '600', textDecoration: 'none', background: 'none', border: 'none', cursor: 'pointer', padding: 0 }}>Sign In</button></p>
+                <p style={{ fontSize: '0.75rem', textAlign: 'center', color: '#9ca3af', marginTop: '2rem' }}>Already have an account? <button onClick={() => setMode('login')} style={{ color: '#FCD34D', fontWeight: '600', background: 'none', border: 'none', cursor: 'pointer' }}>Sign In</button></p>
               </div>
             )}
 
-            {/* --- Forgot Password Form --- */}
+            {/* --- Forgot Password --- */}
             {mode === 'forgot' && (
               <div>
                 <h2 style={{ fontSize: '1.875rem', fontWeight: 'bold', marginBottom: '1.5rem', textAlign: 'center' }}>Forgot Password</h2>
-                <p style={{ color: '#d1d5db', marginBottom: '1.5rem', textAlign: 'center' }}>Enter your email and we'll send you a reset link.</p>
                 <form onSubmit={handleSubmit}>
                   <div style={{ marginBottom: '1.5rem' }}>
-                    <label htmlFor="email" style={{ display: 'block', fontSize: '0.875rem', fontWeight: '500', marginBottom: '0.5rem', color: '#d1d5db' }}>Email</label>
-                    <input type="email" id="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="your@email.com" disabled={loading} style={{ width: '100%', padding: '0.75rem 1rem', backgroundColor: 'rgba(255, 255, 255, 0.1)', border: `1px solid ${errors.email ? '#EF4444' : 'rgba(251, 191, 36, 0.3)'}`, borderRadius: '0.5rem', color: 'white', transition: 'all 0.3s ease', boxSizing: 'border-box' }} />
-                    {errors.email && <p style={{ color: '#F87171', fontSize: '0.75rem', marginTop: '0.5rem', textAlign: 'left' }}>{errors.email}</p>}
+                    <label style={{ display: 'block', fontSize: '0.875rem', fontWeight: '500', marginBottom: '0.5rem', color: '#d1d5db' }}>Email</label>
+                    <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} disabled={loading} style={{ width: '100%', padding: '0.75rem 1rem', backgroundColor: 'rgba(255, 255, 255, 0.1)', border: `1px solid ${errors.email ? '#EF4444' : 'rgba(251, 191, 36, 0.3)'}`, borderRadius: '0.5rem', color: 'white' }} />
                   </div>
-                  <motion.button type="submit" whileHover={{ scale: 1.03 }} whileTap={{ scale: 0.98 }} disabled={loading} style={{ width: '100%', backgroundColor: '#FBBF24', color: '#1a202c', fontWeight: 'bold', padding: '0.75rem 0', borderRadius: '0.5rem', border: 'none', cursor: 'pointer', opacity: loading ? 0.7 : 1 }}>
-                    {loading ? 'Sending...' : 'Send Reset Link'}
-                  </motion.button>
+                  <motion.button type="submit" whileHover={{ scale: 1.03 }} whileTap={{ scale: 0.98 }} disabled={loading} style={{ width: '100%', backgroundColor: '#FBBF24', color: '#1a202c', fontWeight: 'bold', padding: '0.75rem 0', borderRadius: '0.5rem', border: 'none', cursor: 'pointer' }}>{loading ? 'Sending...' : 'Send Reset Link'}</motion.button>
                 </form>
-                <p style={{ fontSize: '0.75rem', textAlign: 'center', color: '#9ca3af', marginTop: '2rem' }}><button onClick={() => setMode('login')} style={{ color: '#FCD34D', fontWeight: '600', textDecoration: 'none', background: 'none', border: 'none', cursor: 'pointer', padding: 0 }}>Back to Sign In</button></p>
+                <p style={{ fontSize: '0.75rem', textAlign: 'center', color: '#9ca3af', marginTop: '2rem' }}><button onClick={() => setMode('login')} style={{ color: '#FCD34D', fontWeight: '600', background: 'none', border: 'none', cursor: 'pointer' }}>Back to Sign In</button></p>
               </div>
             )}
           </motion.div>