body {

font-family: Arial, sans-serif;

background: #f2f2f2;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

}

.login-box,
.calculator {

background: white;

padding: 20px;

border-radius: 10px;

box-shadow: 0 0 15px rgba(0,0,0,0.2);

width: 260px;

text-align: center;

}

h2 {

margin-bottom: 10px;

}

input {

width: 100%;

padding: 10px;

margin-bottom: 10px;

font-size: 16px;

text-align: right;

}

.buttons {

display: grid;

grid-template-columns: repeat(4, 1fr);

gap: 5px;

}

button {

padding: 12px;

font-size: 16px;

border: none;

background: #3498db;

color: white;

border-radius: 5px;

cursor: pointer;

}

button:hover {

background: #2980b9;

}

.clear {

grid-column: span 4;

background: #e74c3c;

}

.clear:hover {

background: #c0392b;

}

.error {

color: red;

font-size: 14px;

}