Interactive Vault Lock Card with Utility Icons

<div class="relative flex justify-center">
          <!-- subtle backdrop layer -->
          <div class="absolute -inset-6 md:-inset-8 rounded-3xl bg-gradient-to-br from-white/5 to-transparent blur-2xl opacity-70"></div>

          <div class="relative w-full max-w-[440px] overflow-hidden bg-white/5 border-white/10 border rounded-3xl shadow-2xl">
            <!-- outer glow edges -->
            <div class="absolute inset-0 rounded-3xl ring-1 ring-white/10 pointer-events-none"></div>

            <!-- card body -->
            <div class="relative md:p-8 pt-6 pr-6 pb-6 pl-6">
              <!-- layered panel like the reference -->
              <div class="relative aspect-square rounded-2xl bg-slate-900/40 border border-white/10 shadow-[inset_0_1px_0_rgba(255,255,255,0.06)] overflow-hidden">
                <!-- vignette and gradient -->
                <div class="absolute inset-0 bg-[radial-gradient(60%_60%_at_50%_35%,rgba(99,102,241,0.35),transparent_60%),radial-gradient(50%_50%_at_50%_70%,rgba(56,189,248,0.2),transparent_70%)]"></div>
                <div class="absolute inset-0 bg-gradient-to-b from-white/5 to-transparent"></div>

                <!-- concentric rings -->
                <div class="absolute inset-0 grid place-items-center opacity-60 transition" id="rings">
                  <div class="w-[78%] h-[78%] rounded-full border border-white/10"></div>
                  <div class="absolute w-[58%] h-[58%] rounded-full border border-white/10"></div>
                  <div class="absolute w-[36%] h-[36%] rounded-full border border-white/10"></div>
                </div>

                <!-- central lock -->
                <button id="lockToggle" class="group absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 active:scale-[0.98] transition">
                  <div class="relative grid place-items-center w-28 h-28 md:w-32 md:h-32 shadow-[0_20px_60px_rgba(67,56,202,0.55)] ring-1 ring-white/20 bg-gradient-to-b from-indigo-500 to-indigo-700 rounded-full">
                    <div class="absolute -inset-[2px] opacity-60 bg-gradient-to-b from-white/20 to-transparent rounded-full"></div>
                    <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="lock" class="lucide lucide-lock w-10 h-10 text-white drop-shadow" id="lockIcon"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
                    <div class="absolute -bottom-3 right-3 w-8 h-8 rounded-full bg-white/20 backdrop-blur border border-white/30 grid place-items-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="user" class="lucide lucide-user w-4.5 h-4.5 text-white"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
                    </div>
                  </div>
                </button>

                <!-- frosted utility icons -->
                <div class="absolute bottom-5 left-0 right-0 flex items-center justify-center gap-4 px-5">
                  <div class="w-14 h-14 rounded-full bg-white/10 backdrop-blur border border-white/20 grid place-items-center hover:bg-white/15 transition cursor-pointer">
                    <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-white/90"><path d="M7 7h10v10"></path><path d="M7 17 17 7"></path></svg>
                  </div>
                  <div class="w-14 h-14 rounded-full bg-white/10 backdrop-blur border border-white/20 grid place-items-center hover:bg-white/15 transition cursor-pointer">
                    <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="sparkles" class="lucide lucide-sparkles w-5 h-5 text-white/90"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"></path><path d="M20 2v4"></path><path d="M22 4h-4"></path><circle cx="4" cy="20" r="2"></circle></svg>
                  </div>
                  <div class="w-14 h-14 rounded-full bg-white/10 backdrop-blur border border-white/20 grid place-items-center hover:bg-white/15 transition cursor-pointer">
                    <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="image" class="lucide lucide-image w-5 h-5 text-white/90"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"></rect><circle cx="9" cy="9" r="2"></circle><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"></path></svg>
                  </div>
                  <div class="w-14 h-14 rounded-full bg-white/10 backdrop-blur border border-white/20 grid place-items-center hover:bg-white/15 transition cursor-pointer">
                    <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="shield" class="lucide lucide-shield w-5 h-5 text-white/90"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path></svg>
                  </div>
                </div>
              </div>

              <!-- caption -->
              <div class="mt-5 flex items-start justify-between gap-4">
                <div>
                  <h3 class="text-lg tracking-tight font-semibold">Session Locker</h3>
                  <p class="text-slate-400 text-sm">Rotate, revoke, and recover in real-time.</p>
                </div>
                <div class="text-right">
                  <p class="text-slate-300 text-sm">Vault ID</p>
                  <p class="text-slate-400 text-xs font-medium select-all">vk_7c9a2f8e-214b-4b10-9b11</p>
                </div>
              </div>
            </div>
          </div>
        </div>