/* RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Segoe UI", sans-serif;
}

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #121212;
}

/* Calculator Card */
.calculator {
  width: 100%;
  max-width: 480px; /* increased from 360px */
  background: #1f1f2e;
  padding: 24px; /* increased padding */
  border-radius: 25px; /* slightly bigger radius */
}

/* Display */
.display input {
  width: 100%;
  height: 100px; /* increased from 80px */
  border-radius: 25px;
  border: none;
  background: #3c418b;
  color: #fff;
  font-size: 2.4rem; /* larger font */
  text-align: right;
  padding: 0 18px; /* increased padding */
  margin-bottom: 18px; /* more spacing */
}

/* Top controls */
.top-controls {
  display: flex;
  gap: 16px; /* increased gap */
  margin-bottom: 18px;
}

.control {
  flex: 1;
  background: #2e2e3f;
  color: #fff;
  height: 55px; /* increased from 45px */
  border-radius: 25px;
  font-size: 1.1rem; /* slightly larger font */
}

/* Buttons grid */
.buttons {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px; /* increased gap */
}

/* Base button */
.btn {
  border: none;
  height: 65px; /* increased from 55px */
  border-radius: 32px; /* slightly bigger radius */
  font-size: 1.3rem; /* larger font */
  cursor: pointer;
  transition: transform 0.1s ease;
}

.btn:active {
  transform: scale(0.95);
}

/* Numbers */
.number,
.backspace {
  background: #3a3f55;
  color: #fff;
}

/* Operators */
.operator {
  background: #f5a623;
  color: #fff;
  font-size: 1.4rem; /* larger operator symbols */
}

/* Equal */
.equal {
  background: #d6d6d6;
  color: #000;
  grid-column: span 2;
}

/* Responsive */
@media (max-width: 480px) {
  .calculator {
    max-width: 95%;
    padding: 20px;
  }

  .btn {
    height: 60px;
    font-size: 1.2rem;
  }

  .display input {
    font-size: 2rem;
    height: 90px;
  }

  .control {
    height: 50px;
    font-size: 1rem;
  }
}