<div x-show="activeTab === 'pass'" x-transition:enter="transition ease-out duration-400 delay-100" x-transition:enter-start="opacity-0 translate-y-8" x-transition:enter-end="opacity-100 translate-y-0" class="absolute inset-0 flex flex-col pb-[5.5rem] bg-[#f8fafc] overflow-y-auto hide-scrollbar">
                
                <div class="px-6 py-6 pb-2 pt-safe shrink-0 text-center">
                    <h2 class="font-extrabold text-2xl text-slate-800 tracking-tight">Your Pass</h2>
                    <p class="text-[10px] uppercase tracking-[0.2em] font-bold text-slate-400 mt-1">Ready for scan</p>
                </div>
                
                <div class="flex-1 p-6 flex flex-col items-center">
                    <div class="w-full max-w-[320px] bg-gradient-to-b from-slate-800 to-slate-900 rounded-[36px] shadow-2xl relative overflow-hidden flex flex-col border border-slate-700/50 transform transition-transform duration-500 hover:scale-[1.02]">
                        
                        <div class="px-6 py-6 border-b border-white/10 relative z-10 flex items-center justify-between">
                            <div>
                                <p class="text-[10px] font-bold uppercase tracking-[0.2em] text-brand-300 mb-1">VIP Access</p>
                                <h3 class="text-xl font-extrabold text-white tracking-tight leading-none" x-text="event.name"></h3>
                            </div>
                            <template x-if="event.headerLogo">
                                <img :src="event.headerLogo" class="h-8 w-8 object-contain opacity-80" alt="Logo">
                            </template>
                        </div>
                        
                        <div class="relative h-6 flex items-center justify-between bg-slate-900 z-10">
                            <div class="w-6 h-6 rounded-full bg-[#f8fafc] -ml-3 absolute left-0 shadow-inner"></div>
                            <div class="border-t-2 border-dashed border-white/20 w-full mx-4"></div>
                            <div class="w-6 h-6 rounded-full bg-[#f8fafc] -mr-3 absolute right-0 shadow-inner"></div>
                        </div>

                        <div class="flex-1 bg-white flex flex-col items-center justify-center p-8 relative z-10">
                            <p class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-6" x-text="user.name"></p>
                            <div class="w-full aspect-square bg-white rounded-3xl flex items-center justify-center border border-slate-100 shadow-[0_0_40px_rgba(0,0,0,0.05)] p-2 transition-transform duration-500 hover:scale-105">
                                <img :src="passQrUrl()" alt="Event pass QR code" class="w-full h-full object-contain rounded-2xl pointer-events-none">
                            </div>
                            <p class="text-[11px] font-bold uppercase tracking-[0.2em] text-slate-300 mt-6">Scan at check-in</p>
                        </div>
                    </div>
                </div>
            </div>
