<!-- Tactile Numeric PIN Keypad -->
<app-keypad target="#pin-display" digits="4" valid-pin="1234" class="flex flex-col items-center gap-6">
  <div id="pin-display" class="flex items-center gap-3"></div>
  <div class="grid grid-cols-3 gap-3">
    <button data-key="1" class="w-14 h-14 rounded-full bg-slate-900 hover:bg-slate-800 border border-slate-800 text-base font-bold text-white flex items-center justify-center active:scale-90 transition-all">1</button>
    <button data-key="2" class="w-14 h-14 rounded-full bg-slate-900 hover:bg-slate-800 border border-slate-800 text-base font-bold text-white flex items-center justify-center active:scale-90 transition-all">2</button>
    <button data-key="3" class="w-14 h-14 rounded-full bg-slate-900 hover:bg-slate-800 border border-slate-800 text-base font-bold text-white flex items-center justify-center active:scale-90 transition-all">3</button>
    <button data-key="4" class="w-14 h-14 rounded-full bg-slate-900 hover:bg-slate-800 border border-slate-800 text-base font-bold text-white flex items-center justify-center active:scale-90 transition-all">4</button>
    <button data-key="5" class="w-14 h-14 rounded-full bg-slate-900 hover:bg-slate-800 border border-slate-800 text-base font-bold text-white flex items-center justify-center active:scale-90 transition-all">5</button>
    <button data-key="6" class="w-14 h-14 rounded-full bg-slate-900 hover:bg-slate-800 border border-slate-800 text-base font-bold text-white flex items-center justify-center active:scale-90 transition-all">6</button>
    <button data-key="7" class="w-14 h-14 rounded-full bg-slate-900 hover:bg-slate-800 border border-slate-800 text-base font-bold text-white flex items-center justify-center active:scale-90 transition-all">7</button>
    <button data-key="8" class="w-14 h-14 rounded-full bg-slate-900 hover:bg-slate-800 border border-slate-800 text-base font-bold text-white flex items-center justify-center active:scale-90 transition-all">8</button>
    <button data-key="9" class="w-14 h-14 rounded-full bg-slate-900 hover:bg-slate-800 border border-slate-800 text-base font-bold text-white flex items-center justify-center active:scale-90 transition-all">9</button>
    <button data-key="clear" class="w-14 h-14 rounded-full bg-slate-900 hover:bg-slate-800 border border-slate-800 text-xs font-bold text-slate-400 flex items-center justify-center active:scale-90 transition-all">C</button>
    <button data-key="0" class="w-14 h-14 rounded-full bg-slate-900 hover:bg-slate-800 border border-slate-800 text-base font-bold text-white flex items-center justify-center active:scale-90 transition-all">0</button>
    <button data-key="backspace" class="w-14 h-14 rounded-full bg-slate-900 hover:bg-slate-800 border border-slate-800 text-xs font-bold text-slate-400 flex items-center justify-center active:scale-90 transition-all">⌫</button>
  </div>
</app-keypad>