/* FRONTEND — tela de login. Usa as cores e fontes do style.css. */
body.login-page{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}
.login-wrap{ width: 100%; max-width: 400px; }
.login-wrap .masthead{ justify-content: center; text-align: center; border-bottom: none; margin-bottom: 8px; padding-bottom: 0; }
.login-sub{
  text-align: center;
  font-size: 13px;
  color: var(--ink-dim);
  margin: 0 0 22px;
}
.login-card{ margin-bottom: 0; }
.login-card .field{ margin-bottom: 14px; }
.login-card input[type=email],
.login-card input[type=password]{
  width: 100%;
  background: var(--bg-2);
  border: 1.5px solid var(--card-line);
  color: var(--ink);
  border-radius: 8px;
  padding: 11px 12px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 500;
}
.login-card input:focus{ outline: none; border-color: var(--gold); }
.login-card button.generate{ width: 100%; margin-top: 4px; }
.login-link{
  display: block;
  width: 100%;
  margin-top: 14px;
  background: none;
  border: none;
  color: var(--ink-dim);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}
.login-link:hover{ color: var(--mint); }
.login-msg{ min-height: 20px; margin-top: 14px; font-size: 13px; line-height: 1.5; text-align: center; }
.login-msg.err{ color: var(--red); }
.login-msg.ok{ color: var(--mint); }