* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
*{ margin: 0; padding: 0; box-sizing: border-box; }
body.calc { padding: 0; margin: 0 !important; }
body { font-family: 'Outfit', sans-serif; font-weight: 400; font-size: 18px; line-height: normal; color: #4d4d4d; background: #ffffff; letter-spacing: 0; -webkit-font-smoothing: antialiased; max-width: 767px; width: 100%; margin: 0 auto; -webkit-text-size-adjust: 100%;}
.calc{max-width: 100%;}
.calculator-main{ display: flex; justify-content: center; align-items: center; min-height: 100vh; width: 100%; background: linear-gradient(45deg, #00b55a, #2572ce); font-family: 'Segoe UI', Tahoma, sans-serif; }
.calculator-main.ver-2{background: linear-gradient(45deg, #2572ce ,#00b55a); }
.calculator { background: #2a4056; border-radius: 20px; padding: 25px; box-shadow: 0 12px 24px rgba(0, 0, 0, .3); max-width: 360px; width: 90%;}
.calculator .calculator-display { margin-bottom: 20px; }
.calculator .calculatorResult { width: 100%; height: 80px; background: #4a637c; border: none; border-radius: 10px; color: white; font-size: 2.5rem; text-align: right; padding: 0 20px; outline: none; box-shadow: inset 0 4px 8px rgba(0, 0, 0, .2); }
.calculator .calculator-buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.calculator button { height: 60px; border: none; border-radius: 10px; background: #11a4c5; color: white; font-size: 1.5rem; font-weight: bold; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); display: flex; align-items: center; justify-content: center; line-height: 1; }
.calculator button:hover { background: #0a99b9; transform: translateY(-1px); }
.calculator button:active { transform: translateY(0); }
.calculator .equals { background: #ed5242; grid-column: span 2; }
.calculator .equals:hover { background: #d13929; }
.calculator button:nth-child(1), button:nth-child(2), button:nth-child(3), button:nth-child(4) { background: #9da5a7; }
.calculator button:nth-child(1):hover, button:nth-child(2):hover, button:nth-child(3):hover, button:nth-child(4):hover { background: #7c898b; }

@media (max-height:550px){
.calculator { max-width: 500px; padding: 20px;}
.calculator .calculator-buttons {gap: 5px; }
.calculator button{height: 35px; font-size: 1.2rem;}
.calculator .calculatorResult { height: 56px; font-size: 2rem;}
.calculator .calculator-display { margin-bottom: 10px; }
}
@media (max-width:479px){
.calculator { padding: 20px;}
.calculator .calculator-buttons {gap: 5px; }
}