body {
  font-family: system-ui, sans-serif;
  max-width: 560px;
  margin: 4rem auto;
  padding: 0 1rem;
  color: #1a1a1a;
}

h1 {
  font-size: 1.5rem;
}

p.sub {
  color: #52525b;
}

form {
  display: flex;
  gap: .5rem;
  margin-top: 1.5rem;
}

input {
  flex: 1;
  padding: .7rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 6px;
}

button {
  padding: .7rem 1.2rem;
  font-size: 1rem;
  border: none;
  border-radius: 6px;
  background: #16a34a;
  color: white;
  cursor: pointer;
}

button:disabled {
  opacity: .6;
  cursor: default;
}

#resultado {
  margin-top: 1.5rem;
  padding: 1rem;
  border-radius: 8px;
  background: #f4f4f5;
  display: none;
  line-height: 1.5;
}

#resultado.erro {
  background: #fee2e2;
  color: #991b1b;
}

#resultado.carregando {
  background: #eff6ff;
  color: #1e40af;
}

.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid #bfdbfe;
  border-top-color: #1e40af;
  border-radius: 50%;
  animation: girar .7s linear infinite;
  margin-right: .5rem;
  vertical-align: middle;
}

@keyframes girar {
  to { transform: rotate(360deg); }
}