Fix modal overlays — replace deprecated Tailwind v4 bg-opacity syntax

All 11 modal backdrop divs used `bg-black bg-opacity-50` which Tailwind v4
dropped, causing solid-black overlays. Replaced with `bg-black/50` across
AuthModal, AccountManagement, EnvelopeCreate, EnvelopeEdit, GetPaid,
SetupWizard, TransactionEdit, and page.tsx.

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

src/app/page.tsx

@@ -1153,7 +1153,7 @@ export default function BudgetDashboard() {
       {showAuthModal && <AuthModal isOpen={showAuthModal} onClose={() => setShowAuthModal(false)} onAuthSuccess={handleAuthSuccess} />}
       {showSetupWizard && <SetupWizard onComplete={handleSetupComplete} onSkip={() => setShowSetupWizard(false)} userId={user?.userId || ''} />}
       {showGetPaidModal && (
-        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
           <div onClick={(e) => e.stopPropagation()} className="w-full">
             <GetPaid
               accounts={accounts}

src/components/AccountManagement.tsx

@@ -218,7 +218,7 @@ export default function AccountManagement({ accounts, onAccountAdd, onAccountUpd
 
       {/* Add/Edit Account Modal */}
       {showAddForm && (
-        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
           <div className="bg-white rounded-lg p-6 max-w-md w-full">
             <h3 className="text-xl font-bold text-gray-900 mb-4">
               {editingAccount ? 'Edit Account' : 'Add New Account'}

src/components/AuthModal.tsx

@@ -53,7 +53,7 @@ export default function AuthModal({ isOpen, onClose, onAuthSuccess }: AuthModalP
   if (!isOpen) return null;
 
   return (
-    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
       <div className="bg-white rounded-lg p-8 max-w-md w-full shadow-xl">
         <div className="flex justify-between items-center mb-6">
           <h2 className="text-2xl font-bold text-gray-900">

src/components/EnvelopeCreate.tsx

@@ -81,7 +81,7 @@ export default function EnvelopeCreate({ onEnvelopeCreated, onCancel, accounts }
   };
 
   return (
-    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
       <div className="bg-white rounded-lg p-6 w-full max-w-md mx-4">
         <h3 className="text-lg font-semibold text-gray-900 mb-4">Create New Envelope</h3>
 

src/components/EnvelopeEdit.tsx

@@ -102,7 +102,7 @@ export default function EnvelopeEdit({ envelope, onEnvelopeUpdated, onEnvelopeDe
   };
 
   return (
-    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
       <div className="bg-white rounded-lg p-6 w-full max-w-md mx-4">
         <h3 className="text-lg font-semibold text-gray-900 mb-4">Edit Envelope</h3>
 

src/components/GetPaid.tsx

@@ -267,7 +267,7 @@ export default function GetPaid({
       )}
 
       {isOpen && (
-        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
           <div className="bg-white rounded-lg p-6 max-w-2xl w-full max-h-[90vh] overflow-y-auto">
             <h3 className="text-xl font-bold text-gray-900 mb-4">Record Paycheck</h3>
 
@@ -524,7 +524,7 @@ export default function GetPaid({
       )}
 
       {showPreview && (
-        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
           <div className="bg-white rounded-lg p-6 max-w-2xl w-full max-h-[90vh] overflow-y-auto">
             <h3 className="text-xl font-bold text-gray-900 mb-4">Confirm Paycheck Allocation</h3>
 

src/components/SetupWizard.tsx

@@ -456,7 +456,7 @@ export default function SetupWizard({ onComplete, onSkip, userId }: SetupWizardP
 
       {/* Add Account Modal */}
       {showAddAccount && (
-        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
           <div className="bg-white rounded-lg p-6 max-w-md w-full">
             <h3 className="text-xl font-bold text-gray-900 mb-4">Add Account</h3>
 
@@ -674,7 +674,7 @@ export default function SetupWizard({ onComplete, onSkip, userId }: SetupWizardP
 
       {/* Add Envelope Modal */}
       {showAddEnvelope && (
-        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
           <div className="bg-white rounded-lg p-6 max-w-md w-full">
             <h3 className="text-xl font-bold text-gray-900 mb-4">Add Envelope</h3>
 
@@ -1031,7 +1031,7 @@ export default function SetupWizard({ onComplete, onSkip, userId }: SetupWizardP
   );
 
   return (
-    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4" onClick={handleBackdropClick}>
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4" onClick={handleBackdropClick}>
       <div className="bg-white rounded-lg shadow-xl p-8 max-w-2xl w-full max-h-[90vh] overflow-y-auto" onClick={(e) => e.stopPropagation()}>
         {/* Close button - only on welcome step, or if closing from welcome, create demo data */}
         {currentStep === 'welcome' && (

src/components/TransactionEdit.tsx

@@ -49,7 +49,7 @@ export default function TransactionEdit({ transaction, envelopes, accounts, onSa
   };
 
   return (
-    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
       <div className="bg-white rounded-lg p-6 w-full max-w-md mx-4">
         <h3 className="text-lg font-semibold text-gray-900 mb-4">Edit Transaction</h3>