html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
  }
  
  main {
    flex: 1;
  }
  
  footer {
    background-color: #212529;
    color: #fff;
    text-align: center;
    padding: 1rem 0;
  }
  
  /* Animate invalid input shake */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

input.is-invalid {
  animation: shake 0.4s ease;
}

/* Mobile tweak: Center form better */
@media (max-width: 576px) {
  .card {
    margin: 0 10px;
  }
}