/* ==========================================================
   ABOTRIX UNIVERSAL LOGIN V6
   Premium Abstract 3D Login
   ========================================================== */

/* ----------------------------------------------------------
   LOGIN PAGE RESET
   ---------------------------------------------------------- */

body:not(.abotrix-authenticated) {
    margin: 0 !important;
    overflow: hidden !important;
    background: #03182b !important;
}

body:not(.abotrix-authenticated) #loginView {
    position: relative !important;
    isolation: isolate !important;

    width: 100vw !important;
    height: 100vh !important;
    min-height: 100dvh !important;

    display: grid !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(390px, .85fr) !important;
    align-items: center !important;
    gap: clamp(45px, 7vw, 120px) !important;

    padding:
        clamp(36px, 5vh, 70px)
        clamp(45px, 7vw, 125px) !important;

    box-sizing: border-box !important;
    overflow: hidden !important;

    background:
        radial-gradient(circle at 17% 18%,
            rgba(0, 199, 235, .18),
            transparent 27%),

        radial-gradient(circle at 76% 78%,
            rgba(86, 69, 238, .24),
            transparent 32%),

        radial-gradient(circle at 53% 47%,
            rgba(0, 126, 190, .13),
            transparent 27%),

        linear-gradient(
            135deg,
            #021526 0%,
            #04253c 42%,
            #073b58 72%,
            #092d55 100%
        ) !important;
}

/* ----------------------------------------------------------
   ABSTRACT 3D BACKGROUND
   ---------------------------------------------------------- */

body:not(.abotrix-authenticated) #loginView::before {
    content: "" !important;

    position: absolute !important;
    width: 720px !important;
    height: 720px !important;

    left: 31% !important;
    top: 50% !important;

    transform: translate(-50%, -50%) rotate(-12deg) !important;

    border-radius:
        42% 58% 65% 35% /
        38% 42% 58% 62% !important;

    background:
        radial-gradient(
            circle at 30% 25%,
            rgba(113, 245, 255, .75),
            transparent 12%
        ),

        radial-gradient(
            circle at 68% 65%,
            rgba(94, 61, 246, .62),
            transparent 25%
        ),

        linear-gradient(
            135deg,
            rgba(0, 205, 239, .36),
            rgba(14, 113, 194, .12) 43%,
            rgba(111, 65, 241, .32)
        ) !important;

    box-shadow:
        inset 35px 25px 80px rgba(93, 237, 255, .13),
        inset -45px -35px 90px rgba(70, 39, 225, .20),
        0 0 90px rgba(0, 193, 238, .16) !important;

    filter: blur(.2px) !important;

    opacity: .68 !important;

    animation:
        abxV6Blob 13s ease-in-out infinite alternate,
        abxV6Float 9s ease-in-out infinite !important;

    pointer-events: none !important;
    z-index: -3 !important;
}

/* second abstract glass shape */

body:not(.abotrix-authenticated) #loginView::after {
    content: "" !important;

    position: absolute !important;

    width: 520px !important;
    height: 250px !important;

    left: 20% !important;
    bottom: -70px !important;

    border-radius: 48% 52% 34% 66% / 60% 35% 65% 40% !important;

    background:
        linear-gradient(
            120deg,
            rgba(0, 220, 244, .22),
            rgba(41, 120, 205, .06) 46%,
            rgba(106, 65, 239, .27)
        ) !important;

    border: 1px solid rgba(98, 226, 255, .14) !important;

    box-shadow:
        inset 0 0 60px rgba(61, 224, 255, .08),
        0 0 90px rgba(45, 70, 235, .12) !important;

    transform: rotate(-13deg) !important;

    animation: abxV6Ribbon 12s ease-in-out infinite alternate !important;

    pointer-events: none !important;
    z-index: -2 !important;
}

/* ----------------------------------------------------------
   LEFT BRAND AREA
   ---------------------------------------------------------- */

body:not(.abotrix-authenticated) #loginView .login-brand {
    position: relative !important;
    z-index: 5 !important;

    width: min(100%, 700px) !important;
    min-width: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;

    margin: 0 !important;
    padding: 0 !important;
}

/* Hide old industry/orbit visual elements from V5 */

body:not(.abotrix-authenticated) #loginView .industry-orbit,
body:not(.abotrix-authenticated) #loginView .industry-card,
body:not(.abotrix-authenticated) #loginView .industry-hub,
body:not(.abotrix-authenticated) #loginView .orbit-ring,
body:not(.abotrix-authenticated) #loginView .login-industries,
body:not(.abotrix-authenticated) #loginView .business-orbit,
body:not(.abotrix-authenticated) #loginView .business-hub {
    display: none !important;
}

/* Logo */

body:not(.abotrix-authenticated) #loginView .login-brand img {
    display: block !important;

    width: clamp(220px, 23vw, 340px) !important;
    max-width: 100% !important;
    height: auto !important;

    object-fit: contain !important;

    margin: 0 0 34px !important;

    filter:
        drop-shadow(0 15px 30px rgba(0, 0, 0, .22))
        drop-shadow(0 0 18px rgba(0, 194, 235, .10)) !important;
}

/* Commercial SaaS eyebrow */

body:not(.abotrix-authenticated) #loginView .login-eyebrow {
    display: inline-flex !important;
    align-items: center !important;

    min-height: 34px !important;

    padding: 0 15px !important;
    margin: 0 0 22px !important;

    border: 1px solid rgba(79, 221, 246, .30) !important;
    border-radius: 999px !important;

    background: rgba(3, 40, 64, .30) !important;

    color: #59e4fa !important;

    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .17em !important;
    text-transform: uppercase !important;

    backdrop-filter: blur(10px) !important;
}

/* Main heading */

body:not(.abotrix-authenticated) #loginView .login-brand h1 {
    width: min(100%, 650px) !important;

    margin: 0 0 22px !important;

    color: #ffffff !important;

    font-size: clamp(44px, 5.1vw, 78px) !important;
    line-height: .98 !important;
    letter-spacing: -.045em !important;
    font-weight: 850 !important;

    text-shadow: 0 12px 35px rgba(0, 0, 0, .20) !important;
}

/* Supporting text */

body:not(.abotrix-authenticated) #loginView .login-brand p {
    width: min(100%, 580px) !important;

    margin: 0 !important;

    color: rgba(224, 241, 249, .86) !important;

    font-size: clamp(15px, 1.2vw, 19px) !important;
    line-height: 1.65 !important;
    font-weight: 400 !important;
}

/* ----------------------------------------------------------
   LOGIN CARD
   ---------------------------------------------------------- */

body:not(.abotrix-authenticated) #loginView .login-card {
    position: relative !important;
    z-index: 10 !important;

    justify-self: end !important;

    width: min(100%, 470px) !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: clamp(34px, 4vw, 52px) !important;

    box-sizing: border-box !important;

    border-radius: 30px !important;

    border: 1px solid rgba(70, 211, 246, .34) !important;

    background:
        linear-gradient(
            145deg,
            rgba(4, 31, 57, .92),
            rgba(7, 25, 58, .91)
        ) !important;

    box-shadow:
        0 30px 80px rgba(0, 0, 0, .30),
        inset 0 1px 0 rgba(255, 255, 255, .05),
        0 0 50px rgba(47, 89, 235, .09) !important;

    backdrop-filter: blur(24px) saturate(130%) !important;
}

/* small accent glow */

body:not(.abotrix-authenticated) #loginView .login-card::before {
    content: "" !important;

    position: absolute !important;

    width: 160px !important;
    height: 160px !important;

    right: -55px !important;
    top: -55px !important;

    border-radius: 50% !important;

    background: rgba(88, 66, 240, .16) !important;
    filter: blur(40px) !important;

    pointer-events: none !important;
}

/* Sign in heading */

body:not(.abotrix-authenticated) #loginView .login-card h2 {
    position: relative !important;

    margin: 0 0 30px !important;

    color: #ffffff !important;

    font-size: clamp(30px, 2.5vw, 40px) !important;
    line-height: 1.1 !important;
    letter-spacing: -.035em !important;
    font-weight: 800 !important;
}

/* ----------------------------------------------------------
   FORM
   ---------------------------------------------------------- */

body:not(.abotrix-authenticated) #loginView .login-card input {
    width: 100% !important;
    height: 58px !important;

    box-sizing: border-box !important;

    margin: 0 0 17px !important;
    padding: 0 18px !important;

    border-radius: 15px !important;

    border: 1px solid rgba(154, 195, 219, .31) !important;

    background: rgba(3, 23, 46, .58) !important;

    color: #ffffff !important;

    font-size: 15px !important;

    outline: none !important;

    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025) !important;

    transition:
        border-color .22s ease,
        box-shadow .22s ease,
        background .22s ease !important;
}

body:not(.abotrix-authenticated) #loginView .login-card input::placeholder {
    color: rgba(205, 222, 235, .68) !important;
}

body:not(.abotrix-authenticated) #loginView .login-card input:focus {
    border-color: #27d6f2 !important;

    background: rgba(5, 31, 58, .78) !important;

    box-shadow:
        0 0 0 4px rgba(23, 205, 239, .10),
        0 0 22px rgba(16, 187, 235, .08) !important;
}

/* Main login button */

body:not(.abotrix-authenticated) #loginView .login-card button[type="submit"] {
    width: 100% !important;
    min-height: 58px !important;

    margin-top: 5px !important;

    border: 0 !important;
    border-radius: 15px !important;

    background:
        linear-gradient(
            100deg,
            #09b9d5 0%,
            #168cd9 48%,
            #6250ef 100%
        ) !important;

    color: #ffffff !important;

    font-size: 15px !important;
    font-weight: 800 !important;

    cursor: pointer !important;

    box-shadow:
        0 13px 28px rgba(19, 137, 218, .20) !important;

    transition:
        transform .20s ease,
        box-shadow .20s ease,
        filter .20s ease !important;
}

body:not(.abotrix-authenticated) #loginView .login-card button[type="submit"]:hover {
    transform: translateY(-2px) !important;

    filter: brightness(1.06) !important;

    box-shadow:
        0 17px 35px rgba(23, 143, 226, .28) !important;
}

/* ----------------------------------------------------------
   LINKS / FOOTER
   ---------------------------------------------------------- */

body:not(.abotrix-authenticated) #loginView .login-card a {
    color: #28d6ee !important;
}

body:not(.abotrix-authenticated) #loginView .login-card a:hover {
    color: #80efff !important;
}

/* ----------------------------------------------------------
   BACKGROUND FLOATING LIGHTS
   ---------------------------------------------------------- */

@keyframes abxV6Blob {
    0% {
        border-radius:
            42% 58% 65% 35% /
            38% 42% 58% 62%;

        transform:
            translate(-50%, -50%)
            rotate(-12deg)
            scale(.94);
    }

    50% {
        border-radius:
            60% 40% 38% 62% /
            50% 63% 37% 50%;

        transform:
            translate(-47%, -52%)
            rotate(8deg)
            scale(1.04);
    }

    100% {
        border-radius:
            35% 65% 54% 46% /
            62% 42% 58% 38%;

        transform:
            translate(-52%, -47%)
            rotate(22deg)
            scale(.98);
    }
}

@keyframes abxV6Float {
    0%, 100% {
        margin-top: 0;
    }

    50% {
        margin-top: -22px;
    }
}

@keyframes abxV6Ribbon {
    0% {
        transform:
            translate3d(-20px, 12px, 0)
            rotate(-13deg)
            scale(.96);
    }

    50% {
        transform:
            translate3d(30px, -22px, 0)
            rotate(-6deg)
            scale(1.05);
    }

    100% {
        transform:
            translate3d(70px, 8px, 0)
            rotate(-17deg)
            scale(1);
    }
}

/* ----------------------------------------------------------
   TABLET
   ---------------------------------------------------------- */

@media (max-width: 1050px) {

    body:not(.abotrix-authenticated) #loginView {
        grid-template-columns: 1fr 420px !important;
        gap: 35px !important;
        padding: 40px !important;
    }

    body:not(.abotrix-authenticated) #loginView .login-brand h1 {
        font-size: clamp(40px, 5vw, 58px) !important;
    }

    body:not(.abotrix-authenticated) #loginView::before {
        width: 560px !important;
        height: 560px !important;
    }
}

/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 780px) {

    body:not(.abotrix-authenticated) {
        overflow-y: auto !important;
    }

    body:not(.abotrix-authenticated) #loginView {
        min-height: 100dvh !important;
        height: auto !important;

        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;

        gap: 28px !important;

        padding: 32px 20px !important;

        overflow: hidden !important;
    }

    body:not(.abotrix-authenticated) #loginView .login-brand {
        width: 100% !important;
        align-items: center !important;
        text-align: center !important;
    }

    body:not(.abotrix-authenticated) #loginView .login-brand img {
        width: min(250px, 70vw) !important;
        margin-bottom: 20px !important;
    }

    body:not(.abotrix-authenticated) #loginView .login-brand h1 {
        width: 100% !important;

        font-size: clamp(38px, 11vw, 54px) !important;

        margin-bottom: 15px !important;
    }

    body:not(.abotrix-authenticated) #loginView .login-brand p {
        font-size: 14px !important;
        line-height: 1.55 !important;
    }

    body:not(.abotrix-authenticated) #loginView .login-card {
        justify-self: auto !important;

        width: min(100%, 460px) !important;

        padding: 30px 24px !important;

        border-radius: 24px !important;
    }

    body:not(.abotrix-authenticated) #loginView::before {
        width: 480px !important;
        height: 480px !important;

        left: 50% !important;
        top: 35% !important;

        opacity: .42 !important;
    }

    body:not(.abotrix-authenticated) #loginView::after {
        left: 20% !important;
        bottom: -100px !important;
        opacity: .55 !important;
    }
}

/* ----------------------------------------------------------
   ACCESSIBILITY
   ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    body:not(.abotrix-authenticated) #loginView::before,
    body:not(.abotrix-authenticated) #loginView::after {
        animation: none !important;
    }
}


/* ==========================================================
   ABOTRIX LOGIN V6.1
   ACTUAL DOM / SIMPLE ABSTRACT LOGIN CORRECTION
   ========================================================== */

/* Remove the entire old industry ecosystem */
body:not(.abotrix-authenticated) #loginView .abx-login-scene,
body:not(.abotrix-authenticated) #loginView .abx-universal-scene,
body:not(.abotrix-authenticated) #loginView .abx-orbit,
body:not(.abotrix-authenticated) #loginView .abx-industry-hub,
body:not(.abotrix-authenticated) #loginView .abx-industry-node {
    display: none !important;
}

/* Actual left-side HTML */
body:not(.abotrix-authenticated) #loginView .hero {
    position: relative !important;
    z-index: 5 !important;

    width: min(100%, 690px) !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    text-align: left !important;
}

body:not(.abotrix-authenticated) #loginView .login-brand-logo {
    position: static !important;

    display: block !important;

    width: clamp(240px, 25vw, 390px) !important;
    max-width: 100% !important;
    height: auto !important;

    margin: 0 0 35px !important;

    object-fit: contain !important;

    filter:
        drop-shadow(0 18px 35px rgba(0,0,0,.26))
        drop-shadow(0 0 25px rgba(0,205,240,.10)) !important;

    animation: abxV6LogoFloat 7s ease-in-out infinite !important;
}

body:not(.abotrix-authenticated) #loginView .hero .eyebrow {
    position: static !important;

    display: inline-flex !important;
    align-items: center !important;

    min-height: 34px !important;

    margin: 0 0 22px !important;
    padding: 0 15px !important;

    border: 1px solid rgba(86,225,248,.28) !important;
    border-radius: 999px !important;

    background: rgba(5,41,66,.34) !important;

    color: #5ce8fb !important;

    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: .18em !important;

    backdrop-filter: blur(10px) !important;
}

body:not(.abotrix-authenticated) #loginView .hero h1 {
    position: static !important;

    width: min(100%, 650px) !important;
    max-width: none !important;

    margin: 0 0 24px !important;
    padding: 0 !important;

    color: #ffffff !important;

    font-size: clamp(48px, 5.1vw, 78px) !important;
    line-height: .98 !important;
    letter-spacing: -.045em !important;
    font-weight: 900 !important;

    text-shadow: 0 16px 40px rgba(0,0,0,.22) !important;
}

body:not(.abotrix-authenticated) #loginView .hero > p {
    position: static !important;

    width: min(100%, 580px) !important;
    max-width: none !important;

    margin: 0 !important;

    color: rgba(226,242,250,.84) !important;

    font-size: clamp(15px,1.15vw,18px) !important;
    line-height: 1.65 !important;
}

/* Actual sign-in panel */
body:not(.abotrix-authenticated) #signInPanel {
    position: relative !important;

    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}

body:not(.abotrix-authenticated) #signInPanel h2 {
    display: block !important;

    margin: 0 0 30px !important;

    color: #ffffff !important;

    font-size: 36px !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;

    opacity: 1 !important;
    visibility: visible !important;
}

/* Actual Open Abotrix button */
body:not(.abotrix-authenticated) #loginButton {
    width: 100% !important;
    min-height: 58px !important;

    margin: 5px 0 18px !important;

    border: 0 !important;
    border-radius: 15px !important;

    background:
        linear-gradient(
            100deg,
            #08bfd8 0%,
            #168cdd 50%,
            #6250ef 100%
        ) !important;

    color: #ffffff !important;

    font-size: 15px !important;
    font-weight: 900 !important;

    cursor: pointer !important;

    box-shadow:
        0 15px 32px rgba(18,131,218,.22) !important;

    transition:
        transform .2s ease,
        filter .2s ease,
        box-shadow .2s ease !important;
}

body:not(.abotrix-authenticated) #loginButton:hover {
    transform: translateY(-2px) !important;
    filter: brightness(1.07) !important;

    box-shadow:
        0 20px 38px rgba(18,145,226,.30) !important;
}

body:not(.abotrix-authenticated) #forgotPasswordButton {
    align-self: center !important;

    width: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 10px 15px !important;

    border: 0 !important;

    background: transparent !important;
    box-shadow: none !important;

    color: #28ddf4 !important;

    font-size: 13px !important;
    font-weight: 800 !important;

    cursor: pointer !important;
}

@keyframes abxV6LogoFloat {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

/* Tablet/mobile actual DOM */
@media (max-width: 780px) {

    body:not(.abotrix-authenticated) #loginView .hero {
        align-items: center !important;
        text-align: center !important;
    }

    body:not(.abotrix-authenticated) #loginView .login-brand-logo {
        width: min(280px,75vw) !important;
    }

    body:not(.abotrix-authenticated) #loginView .hero h1 {
        font-size: clamp(40px,11vw,56px) !important;
    }

    body:not(.abotrix-authenticated) #loginView .hero > p {
        max-width: 500px !important;
    }
}