.auth-login-marketing-pane {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: transparent;
}

.auth-login-potential-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    isolation: isolate;
    overflow: hidden;
    background: transparent;
}

.auth-login-potential-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url('/asset/flag.webp');
    background-size: cover;
    background-position: center;
    opacity: 0.3;
}

.auth-login-potential-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.54) 0%,
        rgba(248, 250, 252, 0.6) 55%,
        rgba(241, 245, 249, 0.66) 100%
    );
    pointer-events: none;
}

.dark .auth-login-potential-bg::before {
    opacity: 0.34;
}

.dark .auth-login-potential-bg::after {
    background: linear-gradient(
        180deg,
        rgba(2, 6, 23, 0.46) 0%,
        rgba(2, 6, 23, 0.58) 100%
    );
}

.auth-login-potential-bg--hero::before {
    opacity: 0.42;
}

.auth-login-potential-bg--hero::after {
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.08) 0%,
        rgba(248, 250, 252, 0.05) 55%,
        rgba(241, 245, 249, 0.04) 100%
    );
}

.dark .auth-login-potential-bg--hero::before {
    opacity: 0.38;
}

.dark .auth-login-potential-bg--hero::after {
    background: linear-gradient(
        180deg,
        rgba(2, 6, 23, 0.12) 0%,
        rgba(2, 6, 23, 0.18) 100%
    );
}

@media (max-width: 1023px) {

    .auth-login-potential-bg--hero::before {
        opacity: 0.55;
    }

    .dark .auth-login-potential-bg--hero::before {
        opacity: 0.48;
    }

    .auth-login-potential-bg--hero::after {
        background: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.04) 0%,
            rgba(248, 250, 252, 0.02) 100%
        );
    }

    .dark .auth-login-potential-bg--hero::after {
        background: linear-gradient(
            180deg,
            rgba(2, 6, 23, 0.08) 0%,
            rgba(2, 6, 23, 0.12) 100%
        );
    }

    .auth-hero-panel .auth-hero-bg-layer.auth-hero-bg {
        background:
            radial-gradient(600px 300px at 100% 0%, rgba(255, 255, 255, 0.18), transparent 40%),
            linear-gradient(
                180deg,
                color-mix(in srgb, var(--tenant-primary) 76%, transparent) 0%,
                color-mix(in srgb, var(--tenant-primary) 52%, var(--tenant-secondary) 24%, transparent) 50%,
                color-mix(in srgb, var(--tenant-tertiary) 80%, transparent) 100%
            );
    }

    .dark .auth-hero-panel .auth-hero-bg-layer.auth-hero-bg {
        background:
            radial-gradient(600px 300px at 100% 0%, rgba(255, 255, 255, 0.1), transparent 40%),
            linear-gradient(
                180deg,
                color-mix(in srgb, var(--tenant-primary) 44%, transparent) 0%,
                color-mix(in srgb, var(--tenant-primary) 32%, var(--tenant-secondary) 10%, transparent) 50%,
                color-mix(in srgb, var(--tenant-tertiary) 50%, transparent) 100%
            );
    }

    .auth-hero-panel .auth-hero-dots {
        opacity: 0.16;
    }
}

.auth-login-page #theme-toggle {

    color: #ffffff;
}

.auth-login-page #theme-toggle:hover {

    background-color: rgba(255, 255, 255, 0.12);
}

.auth-login-page #theme-toggle:focus-visible {

    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4);
}

.auth-login-page .i18n-trigger {

    color: #ffffff;
    background: none;
}

.auth-login-page .i18n-trigger:hover {

    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.12);
}

.auth-login-page .i18n-trigger:focus-visible {

    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4);
}

.auth-login-page .i18n-trigger span,
.auth-login-page .i18n-trigger svg {

    color: inherit;
}

@media (min-width: 1024px) {

    .auth-login-page #theme-toggle {

        color: #6b7280;
    }

    .dark .auth-login-page #theme-toggle {

        color: #9ca3af;
    }

    .auth-login-page #theme-toggle:hover {

        background-color: rgba(243, 244, 246, 0.8);
    }

    .dark .auth-login-page #theme-toggle:hover {

        background-color: rgba(31, 41, 55, 0.8);
    }

    .auth-login-page #theme-toggle:focus-visible {

        box-shadow: 0 0 0 2px rgba(229, 231, 235, 0.8);
    }

    .dark .auth-login-page #theme-toggle:focus-visible {

        box-shadow: 0 0 0 2px rgba(55, 65, 81, 0.9);
    }
}

@media (min-width: 1024px) {

    .auth-login-page .i18n-trigger {

        color: #111827;
        background-color: rgba(255, 255, 255, 0.9);
    }

    .auth-login-page .i18n-trigger:hover {

        color: #111827;
        background-color: rgba(249, 250, 251, 1);
    }

    .dark .auth-login-page .i18n-trigger {

        color: #e5e7eb;
        background-color: rgba(31, 41, 55, 0.9);
    }

    .dark .auth-login-page .i18n-trigger:hover {

        color: #f9fafb;
        background-color: rgba(17, 24, 39, 1);
    }
}



@keyframes fadeInUp {

    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.auth-text-animate-1 {

    animation: fadeInUp 0.8s ease-out 0.2s both;
}

.auth-text-animate-2 {

    animation: fadeInUp 0.8s ease-out 0.5s both;
    color: var(--tenant-primary);
}

.auth-text-animate-3 {

    animation: fadeInUp 0.8s ease-out 0.8s both;
}

.auth-text-animate-2:hover {

    transform: scale(1.05);
    transition: transform 0.3s ease;
}

.auth-welcome-mobile {

    animation: fadeInUp 0.8s ease-out 0.3s both;
}

@keyframes gradientShift {

    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.auth-field:focus-visible {

    border-color: var(--tenant-secondary) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tenant-secondary) 16%, transparent) !important;
}

.auth-field--error {

    --tw-ring-color: hsl(var(--destructive));
}

.auth-flash-status {

    background-color: color-mix(in srgb, var(--tenant-primary) 22%, transparent);
    border: 1px solid color-mix(in srgb, var(--tenant-primary) 42%, transparent);
}

.auth-password-toggle {

    background-color: var(--tenant-secondary);
}

.auth-password-toggle:hover {

    background-color: color-mix(in srgb, var(--tenant-secondary) 88%, #000000 12%);
}

.auth-password-toggle:focus-visible {

    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--tenant-secondary) 45%, transparent);
}

.auth-text {

    background: linear-gradient(
        90deg,
        #ffffff 0%,
        #ffffff 20%,
        var(--tenant-secondary) 35%,
        var(--tenant-tertiary) 50%,
        var(--tenant-secondary) 65%,
        #ffffff 80%,
        #ffffff 100%
    );

    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShift 3s ease-in-out infinite;
    letter-spacing: 0.05em;
    text-shadow: 0 2px 8px rgba(255, 255, 255, 0.2);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.auth-text.auth-wordmark-style {

    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.14);
    filter: none;
}

.auth-logo {

    filter: grayscale(1) brightness(1.4) contrast(1.1);
}

.auth-tenant-marquee__viewport {
    overflow: hidden;
    width: 100%;
    mask-image: linear-gradient(
        90deg,
        transparent 0%,
        #000 8%,
        #000 92%,
        transparent 100%
    );
}

.auth-tenant-marquee__track {
    display: flex;
    width: max-content;
    align-items: center;
    gap: 0.5rem;
}

.auth-tenant-marquee__track--animate {
    animation: auth-tenant-marquee-scroll 36s linear infinite;
}

.auth-tenant-marquee__track--animate:hover {
    animation-play-state: paused;
}

.auth-tenant-marquee__item {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.92);
    padding: 0.2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    transition: transform 150ms ease-out, box-shadow 150ms ease-out;
}

.auth-login-marketing-pane .auth-tenant-marquee__item {
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.1);
}

.auth-tenant-marquee__item:hover {
    transform: scale(1.06);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.auth-tenant-marquee__item:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55);
}

.auth-tenant-marquee__icon {
    display: block;
    height: 1.5rem;
    width: 1.5rem;
    object-fit: contain;
}

@keyframes auth-tenant-marquee-scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

@media (min-width: 1024px) {
    .auth-tenant-marquee__icon {
        height: 1.75rem;
        width: 1.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-tenant-marquee__track--animate {
        animation: none;
    }
}