.keypad-container{min-height:100vh;background-color:#f9fafb;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:2rem 1rem}.keypad-wrapper{width:100%;max-width:22rem}.keypad-header{text-align:center;margin-bottom:2rem}.keypad-title{color:#111827;font-size:1.25rem;font-weight:600;margin-bottom:.5rem}.digit-display{display:flex;justify-content:center;margin-bottom:2rem}.digit-slots{display:flex;gap:.75rem}.digit-slot{width:3.5rem;height:3.5rem;border:2px solid #4a4c50;border-radius:.5rem;display:flex;align-items:center;justify-content:center;background-color:white;box-shadow:0 1px 3px 0 rgba(0,0,0,.1);opacity:.4}.digit-slot.filled{box-shadow:0 2px 6px 0 rgba(0,0,0,.25);opacity:1}.digit-text{color:#6b7280;font-size:1.5rem;font-family:ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace}.keypad-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;width:19rem;margin:0 auto}.keypad-button{width:5.5rem;height:5.5rem;border-radius:50%;font-weight:600;transition:background-color .15s ease-out;border:2px solid #4a4c50;box-shadow:0 4px 6px -1px rgba(0,0,0,.1);touch-action:manipulation;cursor:pointer}.number-button{background-color:white;color:#4a4c50;font-size:2rem;font-family:var(--font-roboto-mono),ui-monospace,SFMono-Regular,"SF Mono",Consolas,"Liberation Mono",Menlo,monospace;font-weight:100}.number-button:hover{background-color:#f9fafb}.number-button:active{background-color:#f0f7fc}.number-button.disabled{opacity:.5;cursor:not-allowed}.clear-button,.number-button.disabled:active,.number-button.disabled:hover{background-color:white}.clear-button{font-weight:400;text-align:center;color:#4a4c50;font-size:2.075rem;opacity:.4;pointer-events:none}.clear-button.active{opacity:1;pointer-events:auto}.clear-button.active:hover{background-color:#f9fafb}.clear-button.active:active{background-color:#f0f7fc}.back-button{background-color:white;color:#6b7280;font-size:.875rem;display:flex;align-items:center;justify-content:center}.back-button:hover{background-color:#f9fafb}.back-button:active{background-color:#f0f7fc}.submit-container{margin-top:1.5rem}.submit-button{width:100%;height:4.2rem;border-radius:9999px;font-weight:600;transition:all .1s;border:none;cursor:pointer}.submit-enabled{background-color:#034877;color:white}.submit-enabled:hover{background-color:rgb(3,91,149)}.submit-disabled{background-color:#d1d5db;color:#6b7280;cursor:not-allowed}.error-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,.3);display:flex;justify-content:center;align-items:center;z-index:1000}.error-message{background:white;padding:1.5rem;border-radius:.5rem;box-shadow:0 20px 25px -5px rgba(0,0,0,.1);max-width:24rem;width:90%;text-align:center;border:1px solid #e5e7eb}.error-title{color:#dc2626;font-size:1.25rem;font-weight:600;margin-bottom:.75rem}.error-text{color:#6b7280;font-size:1rem;margin-bottom:1rem;line-height:1.5}.error-button{background-color:#034877;color:white;padding:.5rem 1.5rem;border-radius:9999px;border:none;font-weight:600;font-size:.875rem;cursor:pointer;transition:background-color .15s ease-out}.error-button:hover{background-color:rgb(3,91,149)}@media (min-width:640px){.keypad-button{width:5rem;height:5rem}.number-button{font-size:1.75rem}.digit-slot{width:3rem;height:3rem}.digit-text{font-size:1.25rem}.clear-button{font-size:2.075rem}.back-button{font-size:.875rem}}@media screen and (orientation:landscape) and (max-height:749px){.keypad-container{padding-top:.5rem;justify-content:center;align-items:center;min-height:100vh}.keypad-header{margin-bottom:.5rem}.keypad-title{margin-bottom:.125rem}.digit-display{margin-bottom:.5rem}.keypad-grid{grid-template-columns:repeat(6,1fr);width:auto;max-width:none;margin:0 auto;justify-content:center;gap:.75rem}.keypad-button{width:5rem;height:5rem}.number-button{font-size:1.5rem}.submit-container{margin-top:.5rem;margin-bottom:.5rem;display:flex;justify-content:center}.submit-button{width:60%;height:2.94rem}}