/* ===== Reset básico ===== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

/* ===== Corpo da página ===== */
body {
  min-height: 100vh;                  /* ocupa 100% da altura da tela */
  display: flex;                      /* vamos centralizar usando flex */
  align-items: center;                /* alinha vertical */
  justify-content: center;            /* alinha horizontal */
  background: linear-gradient(
    135deg,
    #0f172a 0%,
    #1e293b 100%
  );                                  /* fundo em degrade escuro elegante */
  color: #fff;                        /* cor padrão do texto */
  font-family: system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ===== Container principal ===== */
.container {
  width: 100%;
  max-width: 400px;                   /* limita largura no desktop */
  padding: 1rem;
}

/* ===== Card de login ===== */
.card {
  background-color: #1e2537;          /* fundo do card (mais claro que o fundo geral pra contraste) */
  border-radius: 1rem;                /* cantos arredondados */
  padding: 2rem;
  box-shadow: 0 30px 60px rgba(0,0,0,0.6); /* sombra pra dar efeito de "flutuando" */
  border: 1px solid rgba(255,255,255,0.07); /* borda leve */
}

/* Título e subtítulo */
.card__title {
  font-size: 1.25rem;                 /* ~20px */
  font-weight: 600;
  color: #fff;
  margin-bottom: 0.5rem;
  text-align: center;
}

.card__subtitle {
  font-size: 0.9rem;
  color: #cbd5e1;                     /* cinza claro */
  margin-bottom: 1.5rem;
  line-height: 1.4;
  text-align: center;
}

/* Formulário */
.form {
  display: grid;
  gap: 1rem;                          /* espaçamento vertical entre grupos */
}

.form__group {
  display: grid;
  gap: 0.5rem;
}

.form__label {
  font-size: 0.8rem;
  color: #cbd5e1;
  font-weight: 500;
}

.form__input {
  width: 100%;
  background-color: #0f172a;         /* campo mais escuro pra contraste */
  color: #fff;
  border: 1px solid #334155;         /* borda cinza-azulada */
  border-radius: 0.5rem;
  padding: 0.75rem 0.9rem;
  font-size: 0.9rem;
  line-height: 1.2;
  outline: none;
  transition: all 0.15s ease;
}

.form__input:focus {
  border-color: #38bdf8;             /* azul ciano no foco */
  box-shadow: 0 0 0 3px rgba(56,189,248,0.3);
}

/* Botão principal */
.btn {
  cursor: pointer;
  width: 100%;
  border: 0;
  border-radius: 0.5rem;
  padding: 0.8rem 1rem;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  transition: all 0.15s ease;
}

.btn--primary {
  background-color: #38bdf8; /* azul ciano */
  color: #0f172a;            /* texto escuro pra ter contraste */
}

.btn--primary:hover {
  background-color: #7dd3fc;
}

/* Mensagem de feedback (erro/sucesso) */
.form__message {
  min-height: 1.2em;                 /* reserva espaço mesmo vazia */
  font-size: 0.85rem;
  font-weight: 500;
  text-align: center;
  color: #f87171;                    /* vermelho suave padrão erro */
}

/* Rodapé do card */
.card__footer {
  margin-top: 1rem;
  text-align: center;
}

.link {
  font-size: 0.8rem;
  color: #38bdf8;
  text-decoration: none;
}

.link:hover {
  text-decoration: underline;
}

/* ===== Responsividade básica ===== */
@media (min-width: 480px) {
  .card__title {
    font-size: 1.4rem;
  }

  .card {
    padding: 2.5rem;
  }
}