
.auth-modal-overlay {
    position: fixed; inset: 0; background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(24px); z-index: 10000;
    display: none; align-items: center; justify-content: center; padding: 20px;
}
.auth-modal-overlay.active { display: flex; }

.auth-modal {
    background: #fff; width: 100%; max-width: 520px; padding: 60px;
    position: relative; box-shadow: 0 50px 100px rgba(0,0,0,0.1);
    border: 2px solid #000; border-radius: 0; 
}


.auth-modal-close, .auth-back-btn {
    position: absolute; top: 32px; cursor: pointer; color: #86868b;
    transition: all 0.3s; background: none; border: none;
    display: flex; align-items: center; justify-content: center;
}
.auth-modal-close { right: 32px; }
.auth-back-btn { left: 32px; }
.auth-modal-close:hover, .auth-back-btn:hover { color: #000; transform: scale(1.1); }


.auth-modal-header { text-align: left; margin-bottom: 48px; }
.auth-modal-title {
    font-size: 32px; font-weight: 900; font-style: italic;
    text-transform: uppercase; letter-spacing: -0.02em; margin-bottom: 8px; color: #000;
}
.auth-modal-subtitle {
    font-size: 10px; font-weight: 900; color: #0066CC;
    text-transform: uppercase; letter-spacing: 0.3em;
}


.auth-form-group { margin-bottom: 24px; }
.auth-form-label {
    display: block; font-size: 10px; font-weight: 900; text-transform: uppercase;
    letter-spacing: 0.1em; margin-bottom: 12px; color: #86868b;
}
.auth-form-input {
    width: 100%; background: #F5F5F7; border: 1px solid transparent;
    border-radius: 0; padding: 18px 20px; font-size: 14px; font-weight: 700; color: #1D1D1F;
}
.auth-form-input:focus { outline: none; background: #fff; border-color: #000; }

.auth-btn-primary {
    width: 100%; background: #000; color: #00FF9D; padding: 20px;
    font-weight: 900; font-style: italic; text-transform: uppercase;
    letter-spacing: 0.1em; font-size: 12px; margin-top: 12px;
    display: flex; align-items: center; justify-content: center; border: none; cursor: pointer;
}
.auth-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 15px 30px rgba(0,0,0,0.15); }


.auth-error-message, .auth-success-message {
    padding: 16px; font-size: 11px; font-weight: 900; text-transform: uppercase;
    margin-bottom: 32px; display: none; text-align: center;
}
.auth-error-message { background: #FF3B30; color: white; }
.auth-success-message { background: #00FF9D; color: black; }
.auth-error-message.active, .auth-success-message.active { display: block; }


.auth-code-inputs { display: flex; gap: 8px; justify-content: space-between; margin-bottom: 32px; }
.auth-code-input {
    width: 100%; max-width: 54px; height: 64px; background: #F5F5F7;
    border: 1px solid transparent; text-align: center; font-size: 24px; font-weight: 900;
}
.auth-code-input:focus { outline: none; background: #fff; border-color: #00FF9D; }

.auth-btn-text {
    background: none; border: none; font-size: 10px; font-weight: 900;
    text-transform: uppercase; color: #86868b; cursor: pointer;
}
.auth-btn-text:hover { color: #000; }

.auth-countdown-text { font-size: 9px; font-weight: 900; color: #d2d2d7; display: block; margin-top: 12px; }
.auth-helper-text { font-size: 12px; font-weight: 700; color: #86868b; margin-bottom: 32px; line-height: 1.6; }
.auth-step-content { display: none; }
.auth-step-content.active { display: block; }
