.modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 2000;
  align-items: center; justify-content: center;
}
.modal-overlay.active { display: flex; }

.modal {
  background: white;
  border-radius: 16px;
  padding: 40px;
  width: 100%; max-width: 420px;
  position: relative;
  animation: modalIn 0.3s ease;
}
@keyframes modalIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.modal-close {
  position: absolute; top: 16px; right: 16px;
  background: none; border: none;
  font-size: 1.1rem; cursor: pointer; color: #aaa;
}
.modal-close:hover { color: #e63946; }

.modal h2 { font-size: 1.7rem; font-weight: 800; color: #1d3557; margin-bottom: 6px; }
.modal-sub { color: #888; font-size: 0.9rem; margin-bottom: 26px; }

.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-size: 0.85rem; font-weight: 600; color: #444; margin-bottom: 7px; }
.form-group input {
  width: 100%; padding: 11px 14px;
  border: 2px solid #e8e8e8; border-radius: 8px;
  font-size: 0.95rem; outline: none; transition: border 0.2s;
  font-family: 'Poppins', sans-serif;
}
.form-group input:focus { border-color: #e63946; }

.auth-error { color: #e63946; font-size: 0.82rem; margin-bottom: 12px; min-height: 18px; }

.auth-switch { text-align: center; margin-top: 16px; font-size: 0.88rem; color: #666; }
.auth-switch a { color: #e63946; font-weight: 600; cursor: pointer; }
.auth-switch a:hover { text-decoration: underline; }