/* Six 48px squares where space permits; narrow screens retain the same proportions. */
.pin-field{--pin-height:48px;--pin-gap:6px;position:relative;display:block;min-width:0;width:100%;max-width:calc(var(--pin-height)*6 + var(--pin-gap)*5)}
.pin-cells{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--pin-gap);width:100%;pointer-events:none}
.pin-cells>span{box-sizing:border-box;display:grid;place-items:center;min-width:0;width:100%;aspect-ratio:1;border:1px solid var(--line2,#bfb6a9);border-radius:12px;background:var(--well,#faf8f4);color:var(--ink,#262522);font:500 20px var(--f,system-ui);font-variant-numeric:tabular-nums;line-height:1}
.pin-cells .is-current{border-color:var(--accent,#8c2028);box-shadow:0 0 0 2px #8c20281a}
.pin-field>.pin-input.inp{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:transparent!important;-webkit-text-fill-color:transparent!important;caret-color:transparent!important;font-size:16px!important;opacity:1;cursor:text;z-index:1}
.pin-field>.pin-input::selection{background:transparent;color:transparent}
.pin-field>.pin-input:focus-visible{outline:0!important}
.pin-field>.password-toggle,.pin-field>.mata{display:none}
.pin-field.is-focused .pin-cells{outline:0}
.pin-field:has(>.pin-input:disabled){opacity:.55}
@media(max-width:480px){.pin-cells>span{font-size:18px}}
@media(max-width:350px){.pin-field{--pin-height:44px;--pin-gap:4px}}