iOS-style Crypto Wallet Dashboard Screen

<div class="relative">
          <div class="w-[393px] h-[854px] bg-black rounded-[39px] shadow-[0_8px_30px_rgba(0,0,0,0.8)] overflow-hidden relative">
            <!-- Dynamic Island -->
            <div class="absolute top-3 left-1/2 -translate-x-1/2 w-[126px] h-[37px] dynamic-island z-50"></div>
            
            <!-- Status Bar -->
            <div class="absolute top-2 left-6 text-white text-sm font-medium z-50 font-sans" style="">9:41</div>
            <div class="absolute top-2 right-6 flex items-center gap-1 z-50">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="signal" class="lucide lucide-signal w-4 h-4 text-white"><path d="M2 20h.01" class=""></path><path d="M7 20v-4" class=""></path><path d="M12 20v-8" class=""></path><path d="M17 20V8" class=""></path><path d="M22 4v16" class=""></path></svg>
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="wifi" class="lucide lucide-wifi w-4 h-4 text-white"><path d="M12 20h.01" class=""></path><path d="M2 8.82a15 15 0 0 1 20 0" class=""></path><path d="M5 12.859a10 10 0 0 1 14 0" class=""></path><path d="M8.5 16.429a5 5 0 0 1 7 0" class=""></path></svg>
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="battery" class="lucide lucide-battery w-4 h-4 text-white"><path d="M 22 14 L 22 10" class=""></path><rect x="2" y="6" width="16" height="12" rx="2" class=""></rect></svg>
            </div>

            <!-- Scrollable Content -->
            <div class="h-full scrollable-content pt-14 pb-32">
              <div class="px-4">
                <!-- Navigation -->
                <div class="flex mb-6 items-center justify-between">
                  <div class="flex items-center gap-3">
                    <div class="w-10 h-10 rounded-full overflow-hidden">
                      <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/80aff1f9-dccb-4b5d-8dc6-89e37c211930_320w.jpg" alt="Profile" class="w-full h-full object-cover">
                    </div>
                    <div class="">
                      <p class="text-xl font-light tracking-tight font-inter font-sans">Good morning,</p>
                      <p class="text-xl font-light text-gray-400 tracking-tight font-inter font-sans">Elena Rodriguez</p>
                    </div>
                  </div>
                  <div class="flex items-center gap-3">
                    <button class="w-10 h-10 ios-secondary-card rounded-xl flex items-center justify-center">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5 text-white"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" class=""></path><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" class=""></path></svg>
                    </button>
                  </div>
                </div>

                <!-- Balance Card -->
                <div class="border border-gray-800 bg-gray-900/50 backdrop-blur-xl rounded-xl mb-6 p-6">
                  <div class="flex items-center justify-between mb-4">
                    <div class="">
                      <p class="text-gray-400 text-sm font-medium font-inter font-sans" style="">Total Balance</p>
                      <p class="text-3xl mt-1 tracking-tight font-manrope font-medium" style="">$48,327.85</p>
                    </div>
                    <div class="flex items-center gap-1 bg-green-500/10 border border-green-500/20 px-2 py-1 rounded-lg">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="trending-up" class="lucide lucide-trending-up w-3 h-3 text-green-400"><path d="M16 7h6v6" class=""></path><path d="m22 7-8.5 8.5-5-5L2 17" class=""></path></svg>
                      <span class="text-green-400 text-xs font-medium font-inter font-sans" style="">+12.8%</span>
                    </div>
                  </div>
                  
                  <div class="flex gap-3">
                    <button class="flex-1 bg-white text-black rounded-lg py-3 flex items-center justify-center gap-2 font-medium transition-colors hover:bg-gray-100 font-inter">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-up" class="lucide lucide-arrow-up w-4 h-4"><path d="m5 12 7-7 7 7" class=""></path><path d="M12 19V5" class=""></path></svg>
                      <span style="" class="font-sans">Send</span>
                    </button>
                    <button class="flex-1 border border-gray-700 rounded-lg py-3 flex items-center justify-center gap-2 text-white font-medium transition-colors hover:bg-gray-800 font-inter">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-down" class="lucide lucide-arrow-down w-4 h-4"><path d="M12 5v14" class=""></path><path d="m19 12-7 7-7-7" class=""></path></svg>
                      <span style="" class="font-sans">Receive</span>
                    </button>
                  </div>
                </div>

                <!-- Holdings Header -->
                <div class="flex items-center justify-between mb-4">
                  <h3 class="text-lg font-semibold font-inter font-sans" style="">Holdings</h3>
                  <button class="text-gray-400 text-sm font-medium font-inter font-sans" style="">View All</button>
                </div>

                <!-- Assets List -->
                <div class="space-y-3 mb-8">
                  <!-- Bitcoin -->
                  <div class="border border-gray-800 bg-gray-900/30 backdrop-blur-sm flex gap-4 rounded-xl p-4 items-center">
                    <div class="w-10 h-10 bg-orange-500 rounded-lg flex items-center justify-center">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="bitcoin" class="lucide lucide-bitcoin w-5 h-5 text-white"><path d="M11.767 19.089c4.924.868 6.14-6.025 1.216-6.894m-1.216 6.894L5.86 18.047m5.908 1.042-.347 1.97m1.563-8.864c4.924.869 6.14-6.025 1.215-6.893m-1.215 6.893-3.94-.694m5.155-6.2L8.29 4.26m5.908 1.042.348-1.97M7.48 20.364l3.126-17.727" class=""></path></svg>
                    </div>
                    <div class="flex-1">
                      <p class="font-medium font-inter font-sans" style="">Bitcoin</p>
                      <p class="text-gray-400 text-sm font-inter font-sans" style="">0.724 BTC</p>
                    </div>
                    <div class="text-right">
                      <p class="font-medium font-inter font-sans" style="">$31,425.68</p>
                      <div class="flex items-center gap-1 justify-end">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="trending-up" class="lucide lucide-trending-up w-3 h-3 text-green-400"><path d="M16 7h6v6" class=""></path><path d="m22 7-8.5 8.5-5-5L2 17" class=""></path></svg>
                        <span class="text-green-400 text-sm font-inter font-sans" style="">+3.2%</span>
                      </div>
                    </div>
                  </div>

                  <!-- Ethereum -->
                  <div class="border border-gray-800 bg-gray-900/30 backdrop-blur-sm flex gap-4 rounded-xl p-4 items-center">
                    <div class="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="diamond" class="lucide lucide-diamond w-5 h-5 text-white"><path d="M2.7 10.3a2.41 2.41 0 0 0 0 3.41l7.59 7.59a2.41 2.41 0 0 0 3.41 0l7.59-7.59a2.41 2.41 0 0 0 0-3.41l-7.59-7.59a2.41 2.41 0 0 0-3.41 0Z" class=""></path></svg>
                    </div>
                    <div class="flex-1">
                      <p class="font-medium font-inter font-sans" style="">Ethereum</p>
                      <p class="text-gray-400 text-sm font-inter font-sans" style="">4.12 ETH</p>
                    </div>
                    <div class="text-right">
                      <p class="font-medium font-inter font-sans" style="">$11,730.24</p>
                      <div class="flex items-center gap-1 justify-end">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="trending-down" class="lucide lucide-trending-down w-3 h-3 text-red-400"><path d="M16 17h6v-6" class=""></path><path d="m22 17-8.5-8.5-5 5L2 7" class=""></path></svg>
                        <span class="text-red-400 text-sm font-inter font-sans" style="">-0.8%</span>
                      </div>
                    </div>
                  </div>

                  <!-- Cardano -->
                  <div class="border border-gray-800 bg-gray-900/30 backdrop-blur-sm flex gap-4 rounded-xl p-4 items-center">
                    <div class="w-10 h-10 bg-green-500 rounded-lg flex items-center justify-center">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="coins" class="lucide lucide-coins w-5 h-5 text-white"><circle cx="8" cy="8" r="6" class=""></circle><path d="M18.09 10.37A6 6 0 1 1 10.34 18" class=""></path><path d="M7 6h1v4" class=""></path><path d="m16.71 13.88.7.71-2.82 2.82" class=""></path></svg>
                    </div>
                    <div class="flex-1">
                      <p class="font-medium font-inter font-sans" style="">Cardano</p>
                      <p class="text-gray-400 text-sm font-inter font-sans" style="">1,250 ADA</p>
                    </div>
                    <div class="text-right">
                      <p class="font-medium font-inter font-sans" style="">$5,171.93</p>
                      <div class="flex items-center gap-1 justify-end">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="trending-up" class="lucide lucide-trending-up w-3 h-3 text-green-400"><path d="M16 7h6v6" class=""></path><path d="m22 7-8.5 8.5-5-5L2 17" class=""></path></svg>
                        <span class="text-green-400 text-sm font-inter font-sans" style="">+7.4%</span>
                      </div>
                    </div>
                  </div>

                  <!-- Solana -->
                  <div class="border border-gray-800 bg-gray-900/30 backdrop-blur-sm flex gap-4 rounded-xl p-4 items-center">
                    <div class="w-10 h-10 bg-purple-500 rounded-lg flex items-center justify-center">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="zap" class="lucide lucide-zap w-5 h-5 text-white"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z" class=""></path></svg>
                    </div>
                    <div class="flex-1">
                      <p class="font-medium font-inter font-sans" style="">Solana</p>
                      <p class="text-gray-400 text-sm font-inter font-sans" style="">45.6 SOL</p>
                    </div>
                    <div class="text-right">
                      <p class="font-medium font-inter font-sans" style="">$3,420.15</p>
                      <div class="flex items-center gap-1 justify-end">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="trending-up" class="lucide lucide-trending-up w-3 h-3 text-green-400"><path d="M16 7h6v6" class=""></path><path d="m22 7-8.5 8.5-5-5L2 17" class=""></path></svg>
                        <span class="text-green-400 text-sm font-inter font-sans" style="">+5.1%</span>
                      </div>
                    </div>
                  </div>

                  <!-- Polygon -->
                  <div class="border border-gray-800 bg-gray-900/30 backdrop-blur-sm flex gap-4 rounded-xl p-4 items-center">
                    <div class="w-10 h-10 bg-indigo-500 rounded-lg flex items-center justify-center">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="hexagon" class="lucide lucide-hexagon w-5 h-5 text-white"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" class=""></path></svg>
                    </div>
                    <div class="flex-1">
                      <p class="font-medium font-inter font-sans" style="">Polygon</p>
                      <p class="text-gray-400 text-sm font-inter font-sans" style="">2,850 MATIC</p>
                    </div>
                    <div class="text-right">
                      <p class="font-medium font-inter font-sans" style="">$2,562.30</p>
                      <div class="flex items-center gap-1 justify-end">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="trending-down" class="lucide lucide-trending-down w-3 h-3 text-red-400"><path d="M16 17h6v-6" class=""></path><path d="m22 17-8.5-8.5-5 5L2 7" class=""></path></svg>
                        <span class="text-red-400 text-sm font-inter font-sans" style="">-2.1%</span>
                      </div>
                    </div>
                  </div>

                  <!-- Chainlink -->
                  <div class="border border-gray-800 bg-gray-900/30 backdrop-blur-sm flex gap-4 rounded-xl p-4 items-center">
                    <div class="w-10 h-10 bg-blue-500 rounded-lg flex items-center justify-center">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="link" class="lucide lucide-link w-5 h-5 text-white"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" class=""></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" class=""></path></svg>
                    </div>
                    <div class="flex-1">
                      <p class="font-medium font-inter font-sans" style="">Chainlink</p>
                      <p class="text-gray-400 text-sm font-inter font-sans" style="">125 LINK</p>
                    </div>
                    <div class="text-right">
                      <p class="font-medium font-inter font-sans" style="">$1,875.00</p>
                      <div class="flex items-center gap-1 justify-end">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="trending-up" class="lucide lucide-trending-up w-3 h-3 text-green-400"><path d="M16 7h6v6" class=""></path><path d="m22 7-8.5 8.5-5-5L2 17" class=""></path></svg>
                        <span class="text-green-400 text-sm font-inter font-sans" style="">+1.8%</span>
                      </div>
                    </div>
                  </div>

                  <!-- Recent Activity Header -->
                  <div class="flex items-center justify-between mb-4 mt-8">
                    <h3 class="text-lg font-semibold font-inter font-sans" style="">Recent Activity</h3>
                    <button class="text-gray-400 text-sm font-medium font-inter font-sans" style="">View All</button>
                  </div>

                  <!-- Transaction 1 -->
                  <div class="border border-gray-800 bg-gray-900/30 backdrop-blur-sm rounded-xl p-4 flex items-center gap-4">
                    <div class="w-10 h-10 bg-green-500/20 rounded-lg flex items-center justify-center">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-down-left" class="lucide lucide-arrow-down-left w-5 h-5 text-green-400"><path d="M17 7 7 17" class=""></path><path d="M17 17H7V7" class=""></path></svg>
                    </div>
                    <div class="flex-1">
                      <p class="font-medium font-inter font-sans" style="">Received Bitcoin</p>
                      <p class="text-gray-400 text-sm font-inter font-sans" style="">Today, 2:15 PM</p>
                    </div>
                    <div class="text-right">
                      <p class="font-medium text-green-400 font-inter font-sans" style="">+0.125 BTC</p>
                      <p class="text-gray-400 text-sm font-inter font-sans" style="">$5,486.56</p>
                    </div>
                  </div>

                  <!-- Transaction 2 -->
                  <div class="border border-gray-800 bg-gray-900/30 backdrop-blur-sm rounded-xl p-4 flex items-center gap-4">
                    <div class="w-10 h-10 bg-red-500/20 rounded-lg flex items-center justify-center">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-up-right" class="lucide lucide-arrow-up-right w-5 h-5 text-red-400"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg>
                    </div>
                    <div class="flex-1">
                      <p class="font-medium font-inter font-sans" style="">Sent Ethereum</p>
                      <p class="text-gray-400 text-sm font-inter font-sans" style="">Yesterday, 6:30 PM</p>
                    </div>
                    <div class="text-right">
                      <p class="font-medium text-red-400 font-inter font-sans" style="">-0.5 ETH</p>
                      <p class="text-gray-400 text-sm font-inter font-sans" style="">$1,425.00</p>
                    </div>
                  </div>

                  <!-- Transaction 3 -->
                  <div class="border border-gray-800 bg-gray-900/30 backdrop-blur-sm rounded-xl p-4 flex items-center gap-4">
                    <div class="w-10 h-10 bg-blue-500/20 rounded-lg flex items-center justify-center">
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="repeat" class="lucide lucide-repeat w-5 h-5 text-blue-400"><path d="m17 2 4 4-4 4" class=""></path><path d="M3 11v-1a4 4 0 0 1 4-4h14" class=""></path><path d="m7 22-4-4 4-4" class=""></path><path d="M21 13v1a4 4 0 0 1-4 4H3" class=""></path></svg>
                    </div>
                    <div class="flex-1">
                      <p class="font-medium font-inter font-sans" style="">Swapped SOL → USDC</p>
                      <p class="text-gray-400 text-sm font-inter font-sans" style="">Dec 15, 11:45 AM</p>
                    </div>
                    <div class="text-right">
                      <p class="font-medium font-inter font-sans" style="">15 SOL</p>
                      <p class="text-gray-400 text-sm font-inter font-sans" style="">$1,125.00</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- Fixed Tab Bar -->
            <div class="absolute bottom-8 left-2 right-2 ios-blur rounded-xl p-2">
              <div class="flex items-center justify-around py-2">
                <div class="flex flex-col items-center gap-1">
                  <div class="w-8 h-8 bg-white rounded-lg flex items-center justify-center">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="home" class="lucide lucide-home w-4 h-4 text-black"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8" class=""></path><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" class=""></path></svg>
                  </div>
                  <span class="text-xs text-white font-medium font-inter font-sans" style="">Wallet</span>
                </div>
                <div class="flex flex-col items-center gap-1">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="trending-up" class="lucide lucide-trending-up w-6 h-6 text-gray-500"><path d="M16 7h6v6" class=""></path><path d="m22 7-8.5 8.5-5-5L2 17" class=""></path></svg>
                  <span class="text-xs text-gray-500 font-inter font-sans" style="">Markets</span>
                </div>
                <div class="flex flex-col items-center gap-1">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="repeat" class="lucide lucide-repeat w-6 h-6 text-gray-500"><path d="m17 2 4 4-4 4" class=""></path><path d="M3 11v-1a4 4 0 0 1 4-4h14" class=""></path><path d="m7 22-4-4 4-4" class=""></path><path d="M21 13v1a4 4 0 0 1-4 4H3" class=""></path></svg>
                  <span class="text-xs text-gray-500 font-inter font-sans" style="">Exchange</span>
                </div>
                <div class="flex flex-col items-center gap-1">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="clock" class="lucide lucide-clock w-6 h-6 text-gray-500"><path d="M12 6v6l4 2" class=""></path><circle cx="12" cy="12" r="10" class=""></circle></svg>
                  <span class="text-xs text-gray-500 font-inter font-sans" style="">History</span>
                </div>
              </div>
            </div>

            <!-- Fixed Home Indicator -->
            <div class="absolute bottom-2 left-1/2 -translate-x-1/2 w-32 h-1 bg-gray-600 rounded-full"></div>
          </div>
        </div>