.calculator-input-wrapper{position:relative;width:100%;display:inline-block}.calculator-input-wrapper .calculator-input{width:100%;padding:.5rem 1rem;background-color:#334155;border:1px solid #475569;color:#fff;font-weight:700;border-radius:.5rem;text-align:left;cursor:pointer;font-size:.625rem;box-sizing:border-box;direction:ltr;white-space:nowrap;text-overflow:clip;unicode-bidi:bidi-override}.calculator-input-wrapper .calculator-input:focus{outline:none;border-color:#10b981;box-shadow:0 0 0 2px rgba(16,185,129,.2)}.calculator-input-wrapper .keypad-container{position:absolute;top:calc(100% + 2px);left:0;right:0;width:120px;background-color:#1f2937;border-radius:.5rem;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);padding:.5rem;z-index:1000;animation:fadeIn .15s ease-out;border:1px solid #475569;box-sizing:border-box}.calculator-input-wrapper .keypad-container .keypad-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.125rem}.calculator-input-wrapper .keypad-container .keypad-grid button{padding:.125rem;border-radius:.5rem;font-weight:700;font-size:.625rem;color:#fff;border:none;cursor:pointer;transition:all .1s ease-in-out}.calculator-input-wrapper .keypad-container .keypad-grid button:active{transform:scale(.95);box-shadow:0 2px 4px rgba(0,0,0,.2)}.calculator-input-wrapper .keypad-container .keypad-grid .btn-number{background-color:#4b5563}.calculator-input-wrapper .keypad-container .keypad-grid .btn-number:hover{background-color:#6b7280}.calculator-input-wrapper .keypad-container .keypad-grid .btn-operator{background-color:#f59e0b}.calculator-input-wrapper .keypad-container .keypad-grid .btn-operator:hover{background-color:#d97706}.calculator-input-wrapper .keypad-container .keypad-grid .btn-clear{background-color:#ef4444;grid-column:span 2}.calculator-input-wrapper .keypad-container .keypad-grid .btn-clear:hover{background-color:#dc2626}.calculator-input-wrapper .keypad-container .keypad-grid .btn-delete{background-color:#10b981;grid-column:span 2}.calculator-input-wrapper .keypad-container .keypad-grid .btn-delete:hover{background-color:#059669}.calculator-input-wrapper .keypad-container .keypad-grid .btn-equals{background-color:#f59e0b}.calculator-input-wrapper .keypad-container .keypad-grid .btn-equals:hover{background-color:#d97706}.calculator-input-wrapper .keypad-container .keypad-grid .btn-zero{grid-column:span 1}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@media(max-width:640px){.keypad-grid button{padding:.5rem;font-size:.875rem}}