.auth-logo {
    width: var(--auth-logo-size-sm);
    height: var(--auth-logo-size-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-primary);
    border-radius: var(--rounded-2xl);
    color: var(--white);
    font-size: var(--text-3xl);
    box-shadow: 0 8px 24px var(--primary-shadow);
}

.auth-title {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
}

.auth-description {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.auth-footer {
    padding: var(--spacing-6);
    text-align: center;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    border-top: 1px solid var(--border-color);

    a {
        color: var(--primary);
        font-weight: var(--font-semibold);
        text-decoration: none;
        transition: opacity var(--transition-fast);

        &:hover {
            opacity: var(--opacity-80);
        }
    }
}

.auth-link {
    display: block;
    text-align: center;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    text-decoration: none;
    transition: color var(--transition-fast);

    &:hover {
        color: var(--primary);
    }
}

@media (max-width: 639px) {
    .auth-logo {
        width: var(--auth-logo-size);
        height: var(--auth-logo-size);
        font-size: var(--text-2xl);
        border-radius: var(--rounded-xl);
    }

    .auth-title {
        font-size: var(--text-xl);
    }

    .auth-footer {
        border-top: none;
    }
}