/* static/main_app/css/signup_form.css */

.signup-card { 
    margin: 0 auto; /* Центрируем карточку */
    max-width: 800px; /* Увеличим максимальную ширину карточки */
    transition: all 0.2s ease-in-out; 
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    background: #FFFFFF;
    border: none;
    border-radius: 16px;
}

.signup-card:hover { 
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.signup-card .card-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #e3e6f0;
}

/* 
  Хак для отслеживания автозаполнения.
  Браузеры применяют свои стили к автозаполненным полям.
  Мы добавляем к этому свою анимацию, чтобы отловить ее начало в JS.
*/
@keyframes onAutoFillStart {
  from { /* ... */ }
  to { /* ... */ }
}

input:-webkit-autofill {
  animation-name: onAutoFillStart;
  animation-fill-mode: both;
}