.keypad{display:grid;grid-template-columns:repeat(3,88px);gap:12px;justify-content:center}.kp-key{width:88px;height:72px;border-radius:var(--r-lg);border:1.5px solid var(--line-300);background:var(--surface-0);font:500 1.75rem/1 var(--font-display);color:var(--ink-900);box-shadow:var(--shadow-1);transition:transform var(--dur-1),background var(--dur-1)}.kp-key:active{transform:scale(.96);background:var(--surface-sunk);box-shadow:var(--shadow-press)}.kp-key:disabled{opacity:.45}.kp-del{display:grid;place-items:center;color:var(--ink-700)}@media(hover:hover){.kp-key:hover{background:var(--surface-sunk)}}.kp-dots{display:flex;gap:14px;justify-content:center;align-items:center;height:40px;position:relative}.kp-dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--line-300);transition:background var(--dur-2),border-color var(--dur-2)}.kp-dot.on{background:var(--linden-600);border-color:var(--linden-600)}.kp-dot.ok{background:var(--leaf-600);border-color:var(--leaf-600)}.kp-dots.checking .kp-dot.on{animation:pulseDot .9s ease-in-out infinite}.kp-check{position:absolute;right:-40px;color:var(--leaf-600);animation:pop var(--dur-4) var(--ease-spring)}@keyframes pop{0%{transform:scale(.2);opacity:0}}.lock{display:grid;grid-template-columns:1fr 1fr;min-height:100dvh}.lock-brand{position:relative;overflow:hidden;background:var(--grad-brand);color:#fff;display:grid;place-items:center}.lock-arch{position:absolute;width:620px;max-width:90%;opacity:.08;left:50%;top:50%;transform:translate(-50%,-50%);animation:archSway 20s ease-in-out infinite}@keyframes archSway{0%,to{transform:translate(-50%,-50%) rotate(-2deg)}50%{transform:translate(-50%,-50%) rotate(2deg)}}.lock-brand-inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;padding:24px}.lock-brand-inner svg{box-shadow:0 10px 30px #0000002e;border-radius:20px}.lock-brand h1{font:500 64px/1 var(--font-display)}.lock-brand p{font:500 20px/1.3 var(--font-ui);opacity:.85}.lock-pad{background:var(--surface-porcelain);display:grid;place-items:center;position:relative;padding:24px}.lock-col{width:360px;max-width:100%;display:flex;flex-direction:column;align-items:center;gap:24px}.lock-col h2{font:var(--text-h2);text-align:center}.lock-status{min-height:48px;text-align:center;font:var(--text-body-strong);color:var(--ink-500)}.lock-status.bad{color:var(--rose-600)}.lock-marker{position:absolute;left:12px;bottom:12px}@media(orientation:portrait)and (max-width:1023px){.lock{grid-template-columns:1fr;grid-template-rows:38dvh 1fr}}@media(max-width:699px){.lock{grid-template-columns:1fr;grid-template-rows:30dvh 1fr}.lock-brand h1{font-size:44px}.keypad{grid-template-columns:repeat(3,76px)}.kp-key{width:76px;height:64px}}
