.pin-panel{max-width:440px;margin-left:auto;margin-right:auto;text-align:center}
.pin-panel h2,.pin-panel p{text-align:center}
.pin-length{display:flex;background:#edf2f7;padding:4px;border-radius:14px;gap:4px}
.pin-length button{flex:1;border:0;background:transparent;padding:12px;color:#52657a;border-radius:10px;font-size:15px;font-weight:600}
.pin-length button[aria-pressed=true]{background:#fff;color:#0f2747;box-shadow:0 2px 8px #0f274712}
.pin-entry{display:block;padding:12px 0;color:#52657a;font-size:14px}
.pin-input-wrap{position:relative;height:54px;margin-top:8px;border-radius:12px}
.pin-input-wrap:focus-within{outline:2px solid #2f80ff;outline-offset:2px}
.pin-input-wrap input{position:absolute!important;inset:0;width:100%;height:100%;opacity:0;cursor:text;z-index:2;font-size:16px}
.pin-dots{height:100%;display:flex;align-items:center;justify-content:center;gap:17px;pointer-events:none;background:#f5f8fc;border-radius:12px}
.pin-dots i{width:13px;height:13px;border-radius:50%;border:1.5px solid #a8b7c9;background:transparent;transition:background .12s,transform .12s}
.pin-dots i.filled{background:#0f2747;border-color:#0f2747;transform:scale(1.06)}
.pin-keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:292px;width:100%;margin:10px auto 14px}
.pin-keypad button{width:74px;height:68px;justify-self:center;border:0;border-radius:24px;background:#edf2f7;color:#0f2747;font-size:29px;line-height:1;font-weight:500;font-variant-numeric:tabular-nums;touch-action:manipulation;transition:background .12s,transform .12s}
.pin-keypad button:active{background:#dce9fb;transform:scale(.94)}
.pin-keypad button:focus-visible{outline:2px solid #2f80ff;outline-offset:3px}
.pin-panel[data-busy] .pin-keypad{opacity:.55;pointer-events:none}
@media(max-width:360px){.pin-keypad{gap:9px}.pin-keypad button{width:65px;height:61px}.pin-dots{gap:13px}}
@media(prefers-reduced-motion:reduce){.pin-dots i,.pin-keypad button{transition:none}}