html:has(.auth-page) {
    display: flex;
}

.auth-page {
    display: block;
    width: 100%;
    max-width: var(--auth-container-width);
    height: fit-content;
    min-height: 0;
    margin: auto;
    overflow: visible;
}

.auth-container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    background: rgba(var(--white-rgb), var(--opacity-80));
    backdrop-filter: blur(var(--blur-xl));
    border-radius: var(--rounded-2xl);
    box-shadow:
        0 0 0 1px rgba(var(--white-rgb), var(--opacity-50)),
        var(--shadow-2xl);
}

.auth-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-8) var(--spacing-8) var(--spacing-4);
    text-align: center;
}

.auth-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: var(--spacing-4) var(--spacing-8) var(--spacing-8);

    form {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-5);
    }

    p {
        text-align: center;
    }

    button[type="submit"],
    .btn-full {
        width: 100%;
    }
}

@media (max-width: 639px) {
    .auth-container {
        background: transparent;
        backdrop-filter: none;
        border-radius: var(--rounded-none);
        box-shadow: none;
    }

    .auth-header {
        padding: var(--spacing-8) var(--spacing-6) var(--spacing-6);
    }

    .auth-body {
        padding: var(--spacing-4) var(--spacing-6) var(--spacing-6);
    }
}