body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  background-color: #0f0f1a;
  color: #fafafa;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.calculator-app {
  width: 100%;
  max-width: 400px;
  padding: 20px;
  background: linear-gradient(145deg, #16171f, #0b0b12);
  border-radius: 20px;
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.8);
}

.toggle-container {
  text-align: center;
  margin-bottom: 10px;
}

#toggle-mode {
  padding: 10px 20px;
  font-size: 14px;
  cursor: pointer;
  color: #0f0f1a;
  background: #3498db;
  border: none;
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
  transition: all 0.3s;
}

#toggle-mode:hover {
  background: #2980b9;
}

.calculator {
  text-align: center;
}

.display {
  margin-bottom: 10px;
}

#calc-display {
  width: 100%;
  padding: 15px;
  font-size: 1.5rem;
  background: #11161e;
  border: none;
  border-radius: 10px;
  color: #fff;
  text-align: right;
  outline: none;
}

.keys {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(4, 1fr);
}

button.key {
  padding: 15px;
  font-size: 1.25rem;
  color: #fff;
  background: #1e2430;
  border: none;
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: all 0.3s;
}

button.key:hover {
  background: #3498db;
}

button.key.operator {
  background: #1e2430;
}

button.key.operator:hover {
  background: #d35400;
}

button.key.equals {
  background: #2ecc71;
  grid-column: span 4;
}

button.key.equals:hover {
  background: #1e2430;
}

.scientific-keys.hidden {
  display: none;
}

button.key.sci-key {
  background: #9b59b6;
}

button.key.sci-key:hover {
  background: #8e44ad;
}