.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 3000; opacity: 0; pointer-events: none;
    transition: opacity 0.25s;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
}
.modal-overlay.open { opacity: 1; pointer-events: all; }

.modal {
    background: var(--white); border-radius: 20px;
    width: 100%; max-width: 420px;
    padding: 40px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.2);
    transform: scale(0.96) translateY(10px);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.modal-overlay.open .modal { transform: scale(1) translateY(0); }

.modal-title { font-family: 'Bebas Neue', sans-serif; font-size: 32px; letter-spacing: 2px; margin-bottom: 8px; }
.modal-sub   { font-size: 13px; color: var(--gray-600); margin-bottom: 28px; }

.form-group  { margin-bottom: 16px; }
.form-label  {
    display: block; font-size: 12px; font-weight: 600;
    color: var(--gray-600); letter-spacing: 0.5px; margin-bottom: 6px; text-transform: uppercase;
}
.form-input {
    width: 100%; height: 44px;
    border: 1.5px solid var(--gray-200); border-radius: 10px;
    padding: 0 14px;
    font-family: 'Manrope', sans-serif; font-size: 14px;
    color: var(--black); background: var(--white);
    outline: none; transition: border-color var(--transition);
}
.form-input:focus { border-color: var(--red); }
.form-error { font-size: 12px; color: var(--red); margin-top: 4px; display: none; }

.auth-switch     { text-align: center; margin-top: 20px; font-size: 13px; color: var(--gray-600); }
.auth-switch a   { color: var(--red); font-weight: 600; cursor: pointer; }