/* RESET BÁSICO + FONTE */
* {
  box-sizing: border-box; 
  font-family: fantasy, Arial, Helvetica, sans-serif; 
}

/* CENTRALIZA A CALCULADORA NA TELA */
body {
  background-color: rgb(207, 206, 206); 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  min-height: 100vh; 
  margin: 0; 
}

/* CONTAINER PRINCIPAL */
.calculator {
  background: #111827; 
  padding: 15px; 
  border-radius: 16px; 
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35); 
  width: 320px; 
}

/* VISOR DA CALCULADORA */
.display {
  width: 100%; 
  height: 70px; 
  margin-bottom: 15px; 
  border-radius: 10px;
  border: none;
  padding: 10px 15px;
  font-size: 1.5rem; 
  text-align: right; 
  background: #0f172a; 
  color: #f9fafb; 
  outline: none; 
}

/* GRID DOS BOTÕES */
.keys {
  display: grid; 
  grid-template-columns: repeat(4, 1fr);
  gap: 10px; 
}

/* BOTÕES GERAIS */
button {
  border: none;
  border-radius: 15px;
  padding: 12px;
  font-size: 1rem;
  cursor: pointer; 
}

/* EFEITO AO CLICAR */
button:active {
  transform: translateY(1px); 
  box-shadow: none;
}

/* BOTÕES DE NÚMEROS */
.btn-num {
  background: #1f2937;
  color: #e5e7eb;
}

/* BOTÃO 0 (MAIOR) */
.btn-numz {
  background: #1f2937;
  color: #e5e7eb;
  grid-column: span 2; 
}

/* HOVER DOS NÚMEROS */
.btn-num:hover {
  background: #374151;
}

/* BOTÕES DE OPERAÇÃO */
.btn-op {
  background: #4b5563;
  color: #f9fafb;
}

/* HOVER OPERAÇÕES */
.btn-op:hover {
  background: #6b7280;
}

/* BOTÃO IGUAL (=) */
.btn-eq {
  background: #f97316; 
  color: white;
  grid-column: span 2; 
  width: 100%; 
}

/* HOVER DO IGUAL */
.btn-eq:hover {
  background: #ea580c;
}

/* BOTÃO AC (LIMPAR) */
.btn-ac {
  background: #ef4444; 
  color: white;
}

/* HOVER AC */
.btn-ac:hover {
  background: #dc2626;
}

/* BOTÃO DELETAR */
.btn-del {
  background: #6b7280;
  color: #f9fafb;
}

/* HOVER DELETE */
.btn-del:hover {
  background: #4b5563;
}