.pin-display{justify-content:center;gap:12px;margin-bottom:30px;display:flex}.pin-dot{border:2px solid var(--border-color);width:16px;height:16px;transition:all var(--transition-fast);border-radius:50%}.pin-dot.filled{background:var(--primary-color);border-color:var(--primary-color)}.pin-dot.error{animation:.5s ease-in-out pinShake;border-color:var(--danger-color)!important;background:#ef444433!important}@keyframes pinShake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-4px)}20%,40%,60%,80%{transform:translate(4px)}}.pin-keypad{grid-template-columns:repeat(3,1fr);gap:16px;max-width:380px;margin:0 auto;display:grid}.pin-key{background:var(--bg-light);height:80px;color:var(--text-dark);cursor:pointer;transition:all var(--transition-fast);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;border:none;border-radius:20px;justify-content:center;align-items:center;font-family:inherit;font-size:32px;font-weight:700;display:flex}.pin-key:hover{background:var(--border-color)}.pin-key:active{background:var(--primary-color);color:#fff;transform:scale(.95)}.pin-key.back{color:var(--text-muted);background:0 0;font-size:28px}.pin-key.back:hover{color:var(--danger-color);background:#ef44441a}.pin-key.delete{color:var(--text-muted);background:0 0;font-size:28px}.pin-key.delete:hover{background:var(--bg-light);color:var(--text-dark)}@media (max-width:480px){.pin-key{height:70px;font-size:28px}.pin-keypad{gap:12px;max-width:340px}}