.auth-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.auth-card {
    width: 100%;
    max-width: 500px;
    margin-inline: auto;
}
.auth-card--register {
    max-width: 800px;
}
.auth-card .card__header h2 {
    font-size: 1.5rem;
    font-weight: var(--fw-bold);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}
.auth-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}
.auth-form__group {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    position: relative;
}
.auth-form__label {
    font-weight: var(--fw-medium);
    color: var(--color-text);
}
.auth-form__control {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-bg-alt);
    color: var(--color-text);
    transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
    height: 44px;
}
.auth-form__control:focus,
.auth-form__control[aria-invalid="true"] {
    outline: none;
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px var(--color-primary-100);
}
.auth-form__control[readonly],
.auth-form__control:disabled {
    background-color: var(--color-bg-muted);
    color: var(--color-text-muted);
    cursor: not-allowed;
}
.password-wrapper {
    position: relative;
}
.password-wrapper .auth-form__control {
    padding-left: 44px; 
}
.password-wrapper__toggle {
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-end: 0; 
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: var(--radius-md);
}
.password-wrapper__toggle:hover {
    color: var(--color-text);
}
.password-wrapper__toggle svg {
    width: 20px;
    height: 20px;
}
.password-wrapper__toggle .icon-eye-slash {
    display: none;
}
.auth-form__text-muted {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    margin: 0;
}
.auth-form__indicator {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    min-height: 1.2em; 
}
.auth-form__indicator--danger { color: var(--color-error); }
.auth-form__indicator--warning { color: hsl(35, 85%, 50%); }
.auth-form__indicator--success { color: var(--color-success); }
.auth-form--grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}
.auth-form--grid .grid-col-span-2 {
    grid-column: 1 / -1;
}
.auth-links {
    text-align: center;
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border);
    margin-top: var(--space-md);
    font-size: var(--fs-sm);
}
.auth-links p {
    margin: 0;
}
.recovery-steps {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--space-lg);
    padding: var(--space-sm);
    background-color: var(--color-bg-muted);
    border-radius: var(--radius-md);
}
.recovery-step {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    flex-basis: 33.33%;
    flex-direction: column;
    text-align: center;
    color: var(--color-text-muted);
}
.recovery-step__number {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    background-color: var(--color-border);
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--fw-bold);
    transition: all var(--motion-fast);
}
.recovery-step__label {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
}
.recovery-step--active .recovery-step__number {
    background-color: var(--color-primary-500);
    color: #ffffff;
}
.recovery-step--active .recovery-step__label {
    color: var(--color-primary-500);
}
.recovery-step--completed .recovery-step__number {
    background-color: var(--color-success);
    color: #ffffff;
}
.recovery-step--completed .recovery-step__label {
    color: var(--color-text);
}
.auth-form__actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--fs-sm);
}
.auth-form__check {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}
.auth-form__check-input {
    width: 16px;
    height: 16px;
    accent-color: var(--color-primary-500);
}
.auth-form__captcha {
    display: flex;
    justify-content: center;
    padding: var(--space-sm) 0;
    align-items: center;
}
.dark-theme .cf-turnstile {
    filter: invert(1) hue-rotate(180deg);
}
.button--block {
    width: 250px;
    align-self: center;
    padding: var(--space-md); 
}
.alert-error {
    border-color: var(--color-error);
    background-color: hsl(350, 75%, 97%);
}
.alert-error .alert__icon { color: var(--color-error); }
.dark-theme .alert-error {
    background-color: hsl(350, 90%, 15%);
}
.alert-success {
    border-color: var(--color-success);
    background-color: hsl(140, 75%, 97%);
}
.alert-success .alert__icon { color: var(--color-success); }
.dark-theme .alert-success {
    background-color: hsl(140, 90%, 15%);
}
@media (max-width: 767px) {
    .auth-form--grid {
        grid-template-columns: 1fr;
    }
}