:root {
    --primary-color: hsl(196, 78%, 61%);
}

.login-background {
    position: relative;
    z-index: 1;
    height: 100vh;
    align-items: center;
    justify-content: center;
}

.login {
    display: grid;
    align-items: center;
    justify-content: center;
}

.login-forms-panel {
    display: none;
}

    .login-forms-panel.visible {
        display: block;
    }

.forgot-password-panel {
    display: none;
}

    .forgot-password-panel.visible {
        display: block;
    }

.proven-login-header {
    margin-top: auto !important;
    text-align: center;
}

    .proven-login-header img {
        max-height: 8rem;
    }

.login-panel {
    box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2);
    border-radius: 0.5rem;
    background-color: rgba(255, 255, 255, .15);
    backdrop-filter: blur(5px) brightness(95%);
    padding: 2rem;
    text-align: center;
    /*height: 565px;*/   
    transition: height 0.5s;
    opacity: 0;
    animation: fade-in-left 1s forwards;
    margin-top: -3rem;
}

.login-panel.enablesms {
    width: 40rem;
    color: whitesmoke;
}
    .login-panel.twofa {
        width: 20rem;
        color: whitesmoke;
    }

.login-panel.login {
    width: 20rem;
}

.form-disabled {
    pointer-events: none;
    opacity: 0.4;
}
.form-invisible {
    display: none;
}
.enablesms-error {
    text-align: left;
    padding: 0.5rem;
}
    .enablesms-error .text-danger {
        /*font-weight: 400 !important;*/
        color: white !important;
        border-bottom: 2px solid red !important;
    }

.enablesms-body {
}
.enablesms-intro {
    text-align: left;
    padding: 0.5rem;
}
.enablesms-form {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0.5rem;
}


@keyframes fade-in-left {
    0% {
        margin-top: 3rem;
        opacity: 0;
    }

    100% {
        margin-top: 0;
        opacity: 1;
    }
}

.login-panel-image {
    object-fit: contain;
    object-position: center;
    overflow: hidden;
    max-width: 80%;
    height: auto;
    max-height: 3rem;
    filter: drop-shadow(0 0 10px rgba(38, 217, 255, 0.15));
}

.login-panel-username {
    font-size: 2rem;
    color: whitesmoke;
    padding: 1rem;
}

.login-panel-form {
    text-align: left;
    color: whitesmoke;
}

    .login-panel-form button {
        justify-content: center;
    }

.fixed-bottom {
    position: fixed;
    text-align: center;
    bottom: 0;
    padding: 1.5rem 0;
}

.proven-login-proven-logo {
    height: 2rem;
}

.login-panel-user-image {
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
    overflow: hidden;
    max-width: 100%;
    height: auto;
    max-height: 10rem;
    filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.6));
    background-color: white;
    aspect-ratio: 1 / 1;
}

.login-panel-user-text {
    overflow-wrap: break-word;
    word-break: break-word;
    max-height: 10rem;
    overflow: hidden;
}

.proven-signin-form-check-input:checked {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}


.proven-login-known-wrapper {
    display: none;
}

    .proven-login-known-wrapper.visible {
        display: block;
    }

.proven-login-unknown-wrapper {
    display: none;
}

    .proven-login-unknown-wrapper.visible {
        display: block;
    }

.login-form {
    color: white;
    font-size: 16px;
    border-radius: 8px;
}

    .login-form .btn {
        width: 100%;
        margin: 18px 0 9px 0;
        padding: 8px 20px;
        position: relative;
        border-radius: 0;
    }

    .login-form a {
        color: whitesmoke;
    }

        .login-form a:hover {
            color: whitesmoke;
            filter: brightness(80%);
        }

    .login-form input  {
        color: white;
    }

    .login-form button,
    .login-form input {
        font: inherit;
        outline: none;
    }

.form-input-material {
    --input-border-bottom-color: white;
    position: relative;
    border-bottom: 1px solid var(--input-border-bottom-color);
}

    .form-input-material::before {
        position: absolute;
        content: "";
        left: 0;
        bottom: -1px;
        width: 100%;
        height: 2px;
        background: linear-gradient(90deg, var(--primary-color), #69DEA3);
        transform: scaleX(0);
        transform-origin: center;
        transition: 0.5s;
    }

    .form-input-material:focus-within::before {
        transform: scaleX(1);
    }

    .form-input-material .form-control-material {
        padding: 0.5rem 0;
        background: none;
        border: none;
        width: 100%;
    }

        .form-input-material .form-control-material::placeholder {
            color: whitesmoke;
        }

        .form-input-material .form-control-material:autofill {
            background-color: black !important;
        }
        .form-input-material .form-control-material:-webkit-autofill {
            background-color: black !important;
            color: black;
            
        }


    .form-input-material label {
        position: absolute;
        top: 0.5rem;
        left: 0;
        transition: 0.3s;
        transform-origin: left;
    }

.btn-ghost {
    --btn-color: var(--primary-color);
    --btn-border-color: var(--primary-color);
    background: none;
    transition: 0.3s;
    overflow: hidden;
    color: var(--btn-color) !important;
    border: 1px solid var(--btn-border-color) !important;
}

    .btn-ghost::before {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(120deg, transparent, var(--primary-color), #69DEA3, transparent);
        transform: translateX(-100%);
        transition: 0.6s;
    }

    .btn-ghost:hover {
        box-shadow: 0 0 20px 5px rgba(105, 222, 163, 0.35), 0 0 40px 8px rgba(38, 217, 255, 0.2);
    }

        .btn-ghost:hover::before {
            transform: translateX(100%);
        }


/*#region Night Sky Background (replaces old photo) */

.proven-night-sky-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    /* Default background as fallback — overridden by login-bg-* classes */
    background: linear-gradient(160deg, #050E2A 0%, #081845 30%, #0A1540 55%, #0D0B35 80%, #060820 100%);
}

/* Night sky canvas — hidden by default, toggled on via JS class */
.proven-night-sky-container .proven-night-sky-canvas {
    display: none;
    z-index: 2;
}

.proven-night-sky-container.login-nightsky-on .proven-night-sky-canvas {
    display: block !important;
}

/* Crosshatch: faint at center, prominent + dark navy at edges */
.proven-night-sky-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 18px,
            rgba(5, 14, 42, 0.3) 18px,
            rgba(5, 14, 42, 0.3) 19px
        ),
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 18px,
            rgba(5, 14, 42, 0.25) 18px,
            rgba(5, 14, 42, 0.25) 19px
        ),
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 9px,
            rgba(160, 140, 220, 0.08) 9px,
            rgba(160, 140, 220, 0.08) 10px
        ),
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 9px,
            rgba(160, 140, 220, 0.06) 9px,
            rgba(160, 140, 220, 0.06) 10px
        );
    -webkit-mask-image: radial-gradient(ellipse 55% 50% at 50% 50%, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.3) 30%, rgba(0,0,0,0.7) 60%, black 85%);
    mask-image: radial-gradient(ellipse 55% 50% at 50% 50%, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.3) 30%, rgba(0,0,0,0.7) 60%, black 85%);
    pointer-events: none;
    z-index: 1;
}

/* Hide crosshatch when toggled off */
.proven-night-sky-container.login-no-crosshatch::after {
    display: none !important;
}

/* ---------- Login Star Overlays ---------- */
.proven-login-stars {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: none; /* hidden by default, toggled on via JS button */
    pointer-events: none;
    overflow: hidden;
}

.login-star {
    position: absolute;
    opacity: 0.25;
    filter: drop-shadow(0 0 8px rgba(38, 217, 255, 0.3));
}

.login-star.star-1 {
    width: 14vw;
    top: 5vh;
    right: 5vw;
    opacity: 0.28;
    animation: login-star-drift-1 22s ease-in-out infinite;
}

.login-star.star-2 {
    width: 18vw;
    bottom: 8vh;
    left: -2vw;
    opacity: 0.20;
    animation: login-star-drift-2 28s ease-in-out infinite;
}

.login-star.star-3 {
    width: 8vw;
    top: 35vh;
    right: 12vw;
    opacity: 0.22;
    animation: login-star-drift-3 18s ease-in-out infinite;
}

.login-star.star-4 {
    width: 12vw;
    bottom: 3vh;
    right: 30vw;
    opacity: 0.30;
    animation: login-star-drift-4 25s ease-in-out infinite;
}

.login-star.star-5 {
    width: 6vw;
    top: 18vh;
    left: 8vw;
    opacity: 0.24;
    animation: login-star-drift-5 20s ease-in-out infinite;
}

@keyframes login-star-drift-1 {
    0%, 100% { transform: rotate(0deg) translate(0, 0); }
    50% { transform: rotate(8deg) translate(-2vw, 2vh); }
}
@keyframes login-star-drift-2 {
    0%, 100% { transform: rotate(0deg) translate(0, 0); }
    50% { transform: rotate(-6deg) translate(3vw, -1.5vh); }
}
@keyframes login-star-drift-3 {
    0%, 100% { transform: rotate(0deg) translate(0, 0); }
    50% { transform: rotate(10deg) translate(-1.5vw, 2.5vh); }
}
@keyframes login-star-drift-4 {
    0%, 100% { transform: rotate(0deg) translate(0, 0); }
    50% { transform: rotate(-5deg) translate(2vw, -2vh); }
}
@keyframes login-star-drift-5 {
    0%, 100% { transform: rotate(0deg) translate(0, 0); }
    50% { transform: rotate(12deg) translate(2.5vw, 1.5vh); }
}

/* ---------- Background Variants ---------- */

/* BG 1: Dark (existing/default) */
.proven-night-sky-container.login-bg-dark {
    background:
        radial-gradient(ellipse 60% 50% at 12% 18%, rgba(90, 60, 180, 0.35), transparent 70%),
        radial-gradient(ellipse 55% 55% at 88% 78%, rgba(75, 50, 160, 0.28), transparent 70%),
        radial-gradient(ellipse 50% 45% at 72% 12%, rgba(20, 80, 180, 0.22), transparent 65%),
        radial-gradient(ellipse 55% 50% at 25% 82%, rgba(15, 60, 150, 0.25), transparent 65%),
        radial-gradient(ellipse 45% 40% at 50% 50%, rgba(100, 70, 200, 0.12), transparent 60%),
        radial-gradient(ellipse 50% 45% at 18% 88%, rgba(20, 100, 60, 0.20), transparent 65%),
        radial-gradient(ellipse 40% 35% at 80% 85%, rgba(15, 80, 50, 0.15), transparent 60%),
        radial-gradient(ellipse 55% 50% at 92% 92%, rgba(2, 6, 20, 0.95), transparent 60%),
        linear-gradient(160deg, #050E2A 0%, #081845 30%, #0A1540 55%, #0D0B35 80%, #060820 100%) !important;
}

/* BG 2: Glow — lighter with mid-green and mid-purple glow around center */
.proven-night-sky-container.login-bg-glow {
    background:
        radial-gradient(ellipse 50% 45% at 50% 50%, rgba(133, 124, 233, 0.35), transparent 60%),
        radial-gradient(ellipse 55% 50% at 50% 55%, rgba(105, 222, 163, 0.20), transparent 65%),
        radial-gradient(ellipse 60% 55% at 30% 30%, rgba(120, 90, 200, 0.25), transparent 65%),
        radial-gradient(ellipse 55% 50% at 70% 70%, rgba(80, 180, 140, 0.18), transparent 60%),
        radial-gradient(ellipse 70% 60% at 50% 50%, rgba(39, 144, 255, 0.12), transparent 65%),
        linear-gradient(160deg, #0D1535 0%, #162050 30%, #1A2860 55%, #151840 80%, #0A1230 100%) !important;
}

/* BG 3: Ocean — teal/blue gradient */
.proven-night-sky-container.login-bg-ocean {
    background:
        radial-gradient(ellipse 55% 50% at 25% 25%, rgba(38, 217, 255, 0.25), transparent 65%),
        radial-gradient(ellipse 50% 45% at 75% 75%, rgba(39, 144, 255, 0.30), transparent 65%),
        radial-gradient(ellipse 60% 55% at 50% 50%, rgba(15, 60, 120, 0.20), transparent 60%),
        radial-gradient(ellipse 45% 40% at 80% 20%, rgba(38, 217, 255, 0.15), transparent 55%),
        linear-gradient(160deg, #041525 0%, #082840 30%, #0A3555 55%, #062840 80%, #031520 100%) !important;
}

/* BG 4: Forest — deep greens with blue undertones */
.proven-night-sky-container.login-bg-forest {
    background:
        radial-gradient(ellipse 55% 50% at 35% 40%, rgba(105, 222, 163, 0.25), transparent 65%),
        radial-gradient(ellipse 50% 45% at 65% 60%, rgba(46, 155, 107, 0.30), transparent 60%),
        radial-gradient(ellipse 60% 55% at 50% 50%, rgba(20, 80, 60, 0.20), transparent 60%),
        radial-gradient(ellipse 45% 40% at 20% 80%, rgba(48, 245, 154, 0.12), transparent 55%),
        radial-gradient(ellipse 50% 45% at 80% 20%, rgba(39, 144, 255, 0.15), transparent 60%),
        linear-gradient(160deg, #051A15 0%, #0A2E20 30%, #0D3528 55%, #082A1E 80%, #041510 100%) !important;
}

/* BG 5: Dusk — warm purple/rose undertones */
.proven-night-sky-container.login-bg-dusk {
    background:
        radial-gradient(ellipse 55% 50% at 40% 35%, rgba(166, 61, 84, 0.25), transparent 65%),
        radial-gradient(ellipse 50% 45% at 60% 65%, rgba(133, 124, 233, 0.30), transparent 60%),
        radial-gradient(ellipse 60% 55% at 50% 50%, rgba(90, 40, 100, 0.18), transparent 60%),
        radial-gradient(ellipse 45% 40% at 25% 75%, rgba(196, 151, 59, 0.12), transparent 55%),
        radial-gradient(ellipse 50% 45% at 75% 25%, rgba(39, 144, 255, 0.15), transparent 60%),
        linear-gradient(160deg, #150A20 0%, #1E1035 30%, #251545 55%, #1A0D30 80%, #100818 100%) !important;
}

/* BG 6: Emerald Bloom — lime-green center (tall oval) → purple mid → deep blue far edges */
.proven-night-sky-container.login-bg-emerald {
    background:
        radial-gradient(ellipse 25% 55% at 50% 50%, rgba(50, 160, 80, 0.55), transparent 50%),
        radial-gradient(ellipse 35% 68% at 50% 50%, rgba(40, 140, 70, 0.40), transparent 60%),
        radial-gradient(ellipse 45% 78% at 50% 50%, rgba(30, 120, 60, 0.30), transparent 65%),
        radial-gradient(ellipse 60% 72% at 50% 50%, rgba(133, 124, 233, 0.35), transparent 70%),
        radial-gradient(ellipse 72% 80% at 50% 50%, rgba(120, 100, 220, 0.30), transparent 78%),
        radial-gradient(ellipse 82% 88% at 50% 50%, rgba(100, 80, 200, 0.25), transparent 85%),
        radial-gradient(ellipse 95% 95% at 50% 50%, rgba(10, 20, 60, 0.7), transparent 97%),
        linear-gradient(160deg, #030818 0%, #050E2A 30%, #0A1540 60%, #050E2A 85%, #020510 100%) !important;
}

/* BG 7: Deep Bloom — very deep blue center → purple → green edges */
.proven-night-sky-container.login-bg-deep-bloom {
    background:
        radial-gradient(ellipse 30% 30% at 50% 50%, rgba(5, 14, 42, 0.9), transparent 50%),
        radial-gradient(ellipse 50% 45% at 50% 50%, rgba(10, 20, 60, 0.7), transparent 60%),
        radial-gradient(ellipse 65% 55% at 50% 50%, rgba(133, 124, 233, 0.35), transparent 65%),
        radial-gradient(ellipse 80% 70% at 50% 50%, rgba(90, 60, 180, 0.20), transparent 75%),
        radial-gradient(ellipse 95% 85% at 50% 50%, rgba(105, 222, 163, 0.25), transparent 90%),
        linear-gradient(160deg, #0A2818 0%, #0D3520 25%, #0A2E1E 50%, #082515 75%, #051A0E 100%) !important;
}

/* BG 8: Aqua Dawn — dark center → light aqua/cyan edges (tall ovals) */
.proven-night-sky-container.login-bg-aqua-dawn {
    background:
        radial-gradient(ellipse 30% 75% at 50% 50%, rgba(50, 160, 80, 0.50), transparent 55%),
        radial-gradient(ellipse 42% 88% at 50% 50%, rgba(40, 140, 70, 0.35), transparent 65%),
        radial-gradient(ellipse 58% 88% at 50% 50%, rgba(133, 124, 233, 0.30), transparent 72%),
        radial-gradient(ellipse 68% 92% at 50% 50%, rgba(80, 60, 160, 0.20), transparent 80%),
        radial-gradient(ellipse 80% 96% at 50% 50%, rgba(38, 217, 255, 0.25), transparent 88%),
        radial-gradient(ellipse 95% 100% at 50% 50%, rgba(100, 230, 255, 0.30), transparent 100%),
        linear-gradient(160deg, #0A3540 0%, #15506A 25%, #2A8AAA 50%, #40B5D0 75%, #6DD8F0 100%) !important;
}

/* Aqua Dawn crosshatch — teal/cyan multi-layer */
.proven-night-sky-container.login-bg-aqua-dawn::after {
    background:
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 16px,
            rgba(8, 60, 80, 0.28) 16px,
            rgba(8, 60, 80, 0.28) 17px
        ),
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 16px,
            rgba(8, 60, 80, 0.22) 16px,
            rgba(8, 60, 80, 0.22) 17px
        ),
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 8px,
            rgba(38, 180, 200, 0.10) 8px,
            rgba(38, 180, 200, 0.10) 9px
        ),
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 8px,
            rgba(30, 160, 180, 0.08) 8px,
            rgba(30, 160, 180, 0.08) 9px
        ),
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 32px,
            rgba(100, 220, 240, 0.06) 32px,
            rgba(100, 220, 240, 0.06) 34px
        ),
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 32px,
            rgba(60, 200, 220, 0.05) 32px,
            rgba(60, 200, 220, 0.05) 34px
        ) !important;
    -webkit-mask-image: radial-gradient(ellipse 55% 50% at 50% 50%, rgba(0,0,0,0.06) 0%, rgba(0,0,0,0.25) 30%, rgba(0,0,0,0.65) 60%, black 85%);
    mask-image: radial-gradient(ellipse 55% 50% at 50% 50%, rgba(0,0,0,0.06) 0%, rgba(0,0,0,0.25) 30%, rgba(0,0,0,0.65) 60%, black 85%);
}

/* BG 9: Lime Mist — dark center → light teal-green/green edges (tall ovals) */
.proven-night-sky-container.login-bg-lime-mist {
    background:
        radial-gradient(ellipse 35% 65% at 50% 50%, rgba(30, 130, 120, 0.50), transparent 55%),
        radial-gradient(ellipse 48% 78% at 50% 50%, rgba(25, 115, 100, 0.35), transparent 65%),
        radial-gradient(ellipse 58% 88% at 50% 50%, rgba(133, 124, 233, 0.28), transparent 72%),
        radial-gradient(ellipse 68% 92% at 50% 50%, rgba(80, 60, 160, 0.18), transparent 80%),
        radial-gradient(ellipse 80% 96% at 50% 50%, rgba(130, 240, 140, 0.22), transparent 88%),
        radial-gradient(ellipse 95% 100% at 50% 50%, rgba(180, 255, 180, 0.25), transparent 100%),
        linear-gradient(160deg, #0A2A15 0%, #1A4A28 25%, #358A48 50%, #60C070 75%, #90E898 100%) !important;
}

/* Lime Mist crosshatch — green/emerald multi-layer */
.proven-night-sky-container.login-bg-lime-mist::after {
    background:
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 16px,
            rgba(10, 50, 25, 0.28) 16px,
            rgba(10, 50, 25, 0.28) 17px
        ),
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 16px,
            rgba(10, 50, 25, 0.22) 16px,
            rgba(10, 50, 25, 0.22) 17px
        ),
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 8px,
            rgba(50, 180, 80, 0.10) 8px,
            rgba(50, 180, 80, 0.10) 9px
        ),
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 8px,
            rgba(40, 160, 70, 0.08) 8px,
            rgba(40, 160, 70, 0.08) 9px
        ),
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 32px,
            rgba(130, 230, 140, 0.06) 32px,
            rgba(130, 230, 140, 0.06) 34px
        ),
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 32px,
            rgba(100, 210, 110, 0.05) 32px,
            rgba(100, 210, 110, 0.05) 34px
        ) !important;
    -webkit-mask-image: radial-gradient(ellipse 55% 50% at 50% 50%, rgba(0,0,0,0.06) 0%, rgba(0,0,0,0.25) 30%, rgba(0,0,0,0.65) 60%, black 85%);
    mask-image: radial-gradient(ellipse 55% 50% at 50% 50%, rgba(0,0,0,0.06) 0%, rgba(0,0,0,0.25) 30%, rgba(0,0,0,0.65) 60%, black 85%);
}

/* BG 10: Lavender Haze — dark center → light lavender/purple edges (tall ovals) */
.proven-night-sky-container.login-bg-lavender {
    background:
        radial-gradient(ellipse 42% 80% at 50% 50%, rgba(50, 160, 80, 0.45), transparent 55%),
        radial-gradient(ellipse 55% 90% at 50% 50%, rgba(40, 140, 70, 0.30), transparent 65%),
        radial-gradient(ellipse 58% 88% at 50% 50%, rgba(133, 124, 233, 0.35), transparent 72%),
        radial-gradient(ellipse 68% 92% at 50% 50%, rgba(100, 80, 200, 0.25), transparent 80%),
        radial-gradient(ellipse 80% 96% at 50% 50%, rgba(180, 160, 255, 0.25), transparent 88%),
        radial-gradient(ellipse 95% 100% at 50% 50%, rgba(210, 195, 255, 0.30), transparent 100%),
        linear-gradient(160deg, #1A1035 0%, #2E1A55 25%, #5A3A9A 50%, #8A6ACC 75%, #B8A0E8 100%) !important;
}

/* Lavender Haze crosshatch — purple/violet multi-layer */
.proven-night-sky-container.login-bg-lavender::after {
    background:
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 16px,
            rgba(30, 15, 60, 0.30) 16px,
            rgba(30, 15, 60, 0.30) 17px
        ),
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 16px,
            rgba(30, 15, 60, 0.24) 16px,
            rgba(30, 15, 60, 0.24) 17px
        ),
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 8px,
            rgba(140, 100, 220, 0.12) 8px,
            rgba(140, 100, 220, 0.12) 9px
        ),
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 8px,
            rgba(120, 80, 200, 0.09) 8px,
            rgba(120, 80, 200, 0.09) 9px
        ),
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 32px,
            rgba(180, 160, 240, 0.07) 32px,
            rgba(180, 160, 240, 0.07) 34px
        ),
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 32px,
            rgba(160, 140, 230, 0.06) 32px,
            rgba(160, 140, 230, 0.06) 34px
        ) !important;
    -webkit-mask-image: radial-gradient(ellipse 55% 50% at 50% 50%, rgba(0,0,0,0.06) 0%, rgba(0,0,0,0.25) 30%, rgba(0,0,0,0.65) 60%, black 85%);
    mask-image: radial-gradient(ellipse 55% 50% at 50% 50%, rgba(0,0,0,0.06) 0%, rgba(0,0,0,0.25) 30%, rgba(0,0,0,0.65) 60%, black 85%);
}

/* BG 11: Cornflower Sky — dark center → light cornflower blue edges (tall ovals) */
.proven-night-sky-container.login-bg-cornflower {
    background:
        radial-gradient(ellipse 35% 65% at 50% 50%, rgba(50, 160, 80, 0.45), transparent 55%),
        radial-gradient(ellipse 48% 78% at 50% 50%, rgba(40, 140, 70, 0.30), transparent 65%),
        radial-gradient(ellipse 58% 88% at 50% 50%, rgba(133, 124, 233, 0.30), transparent 72%),
        radial-gradient(ellipse 68% 92% at 50% 50%, rgba(80, 60, 160, 0.20), transparent 80%),
        radial-gradient(ellipse 80% 96% at 50% 50%, rgba(100, 149, 237, 0.25), transparent 88%),
        radial-gradient(ellipse 95% 100% at 50% 50%, rgba(150, 190, 255, 0.30), transparent 100%),
        linear-gradient(160deg, #0A1535 0%, #152A5A 25%, #3060A0 50%, #5090D0 75%, #80B8F0 100%) !important;
}

/* Cornflower Sky crosshatch — blue/cornflower multi-layer */
.proven-night-sky-container.login-bg-cornflower::after {
    background:
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 16px,
            rgba(10, 20, 55, 0.28) 16px,
            rgba(10, 20, 55, 0.28) 17px
        ),
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 16px,
            rgba(10, 20, 55, 0.22) 16px,
            rgba(10, 20, 55, 0.22) 17px
        ),
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 8px,
            rgba(80, 130, 220, 0.10) 8px,
            rgba(80, 130, 220, 0.10) 9px
        ),
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 8px,
            rgba(60, 110, 200, 0.08) 8px,
            rgba(60, 110, 200, 0.08) 9px
        ),
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 32px,
            rgba(130, 170, 245, 0.06) 32px,
            rgba(130, 170, 245, 0.06) 34px
        ),
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 32px,
            rgba(100, 150, 235, 0.05) 32px,
            rgba(100, 150, 235, 0.05) 34px
        ) !important;
    -webkit-mask-image: radial-gradient(ellipse 55% 50% at 50% 50%, rgba(0,0,0,0.06) 0%, rgba(0,0,0,0.25) 30%, rgba(0,0,0,0.65) 60%, black 85%);
    mask-image: radial-gradient(ellipse 55% 50% at 50% 50%, rgba(0,0,0,0.06) 0%, rgba(0,0,0,0.25) 30%, rgba(0,0,0,0.65) 60%, black 85%);
}

/* ==========================================================================
   BG 12–21: CREATIVE / EXPERIMENTAL BACKGROUNDS
   ========================================================================== */

/* BG 12: Circuit Board — dark PCB green with etched copper traces */
.proven-night-sky-container.login-bg-circuit {
    background:
        /* Horizontal traces */
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 38px,
            rgba(38, 217, 255, 0.12) 38px,
            rgba(38, 217, 255, 0.12) 40px
        ),
        /* Vertical traces */
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 52px,
            rgba(105, 222, 163, 0.10) 52px,
            rgba(105, 222, 163, 0.10) 54px
        ),
        /* Diagonal data bus */
        repeating-linear-gradient(
            35deg,
            transparent,
            transparent 80px,
            rgba(39, 144, 255, 0.08) 80px,
            rgba(39, 144, 255, 0.08) 82px
        ),
        /* Solder pad nodes */
        radial-gradient(circle 3px at 40px 40px, rgba(38, 217, 255, 0.35) 0%, transparent 100%),
        radial-gradient(circle 3px at 92px 40px, rgba(105, 222, 163, 0.30) 0%, transparent 100%),
        radial-gradient(circle 2px at 40px 92px, rgba(133, 124, 233, 0.25) 0%, transparent 100%),
        radial-gradient(circle 4px at 92px 92px, rgba(39, 144, 255, 0.35) 0%, transparent 100%),
        /* CPU glow at center */
        radial-gradient(ellipse 30% 35% at 50% 50%, rgba(38, 217, 255, 0.15), transparent 70%),
        /* Board base */
        linear-gradient(175deg, #021a0a 0%, #04290f 30%, #052e12 50%, #031f0b 80%, #011508 100%) !important;
}

/* BG 13: Stained Glass — cathedral window mosaic of conic sections */
.proven-night-sky-container.login-bg-stained-glass {
    background:
        /* Central rose window */
        conic-gradient(
            from 0deg at 50% 50%,
            rgba(39, 144, 255, 0.5) 0deg,
            rgba(133, 124, 233, 0.5) 36deg,
            rgba(38, 217, 255, 0.4) 72deg,
            rgba(105, 222, 163, 0.5) 108deg,
            rgba(39, 144, 255, 0.4) 144deg,
            rgba(133, 124, 233, 0.5) 180deg,
            rgba(38, 217, 255, 0.5) 216deg,
            rgba(105, 222, 163, 0.4) 252deg,
            rgba(39, 144, 255, 0.5) 288deg,
            rgba(133, 124, 233, 0.4) 324deg,
            rgba(39, 144, 255, 0.5) 360deg
        ),
        /* Lead lines (grid) */
        repeating-linear-gradient(
            60deg,
            transparent,
            transparent 44px,
            rgba(15, 10, 30, 0.6) 44px,
            rgba(15, 10, 30, 0.6) 46px
        ),
        repeating-linear-gradient(
            -60deg,
            transparent,
            transparent 44px,
            rgba(15, 10, 30, 0.6) 44px,
            rgba(15, 10, 30, 0.6) 46px
        ),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 50px,
            rgba(15, 10, 30, 0.5) 50px,
            rgba(15, 10, 30, 0.5) 52px
        ),
        /* Warm backlight glow */
        radial-gradient(ellipse 60% 60% at 50% 45%, rgba(255, 200, 100, 0.12), transparent 80%),
        linear-gradient(180deg, #0a0520 0%, #120830 50%, #0a0520 100%) !important;
}

/* BG 14: Topographic — contour map lines with elevation colors */
.proven-night-sky-container.login-bg-topo {
    background:
        /* Contour rings — concentric ellipses */
        radial-gradient(ellipse 85% 80% at 55% 48%, transparent 19%, rgba(38, 217, 255, 0.15) 20%, transparent 21%),
        radial-gradient(ellipse 70% 65% at 55% 48%, transparent 24%, rgba(105, 222, 163, 0.15) 25%, transparent 26%),
        radial-gradient(ellipse 55% 52% at 55% 48%, transparent 29%, rgba(39, 144, 255, 0.18) 30%, transparent 31%),
        radial-gradient(ellipse 42% 40% at 55% 48%, transparent 34%, rgba(133, 124, 233, 0.15) 35%, transparent 36%),
        radial-gradient(ellipse 30% 28% at 55% 48%, transparent 39%, rgba(38, 217, 255, 0.18) 40%, transparent 41%),
        radial-gradient(ellipse 18% 17% at 55% 48%, transparent 44%, rgba(105, 222, 163, 0.20) 45%, transparent 46%),
        /* Second peak */
        radial-gradient(ellipse 40% 50% at 25% 65%, transparent 24%, rgba(39, 144, 255, 0.12) 25%, transparent 26%),
        radial-gradient(ellipse 28% 35% at 25% 65%, transparent 29%, rgba(133, 124, 233, 0.12) 30%, transparent 31%),
        radial-gradient(ellipse 15% 20% at 25% 65%, transparent 34%, rgba(38, 217, 255, 0.15) 35%, transparent 36%),
        /* Third peak */
        radial-gradient(ellipse 35% 30% at 80% 30%, transparent 24%, rgba(105, 222, 163, 0.10) 25%, transparent 26%),
        radial-gradient(ellipse 20% 18% at 80% 30%, transparent 34%, rgba(39, 144, 255, 0.12) 35%, transparent 36%),
        /* Grid lines */
        repeating-linear-gradient(0deg, transparent, transparent 58px, rgba(38, 217, 255, 0.04) 58px, rgba(38, 217, 255, 0.04) 59px),
        repeating-linear-gradient(90deg, transparent, transparent 58px, rgba(38, 217, 255, 0.04) 58px, rgba(38, 217, 255, 0.04) 59px),
        /* Parchment base */
        linear-gradient(160deg, #0d1f1a 0%, #0a2818 30%, #0f2a1c 60%, #081e14 100%) !important;
}

/* BG 15: Blueprint — white-on-blue technical drawing grid */
.proven-night-sky-container.login-bg-blueprint {
    background:
        /* Major grid */
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 99px,
            rgba(255, 255, 255, 0.15) 99px,
            rgba(255, 255, 255, 0.15) 100px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 99px,
            rgba(255, 255, 255, 0.15) 99px,
            rgba(255, 255, 255, 0.15) 100px
        ),
        /* Minor grid */
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 19px,
            rgba(255, 255, 255, 0.05) 19px,
            rgba(255, 255, 255, 0.05) 20px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 19px,
            rgba(255, 255, 255, 0.05) 19px,
            rgba(255, 255, 255, 0.05) 20px
        ),
        /* Center highlight */
        radial-gradient(ellipse 50% 50% at 50% 50%, rgba(100, 180, 255, 0.08), transparent 70%),
        /* Blueprint blue */
        linear-gradient(160deg, #0a2a5c 0%, #0d3470 25%, #0f3d82 50%, #0d3470 75%, #0a2a5c 100%) !important;
}

/* BG 16: Honeycomb — hex grid pattern in brand amber/gold */
.proven-night-sky-container.login-bg-honeycomb {
    background:
        /* Large hex pattern using overlapping triangular repeats */
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 24px,
            rgba(255, 190, 50, 0.08) 24px,
            rgba(255, 190, 50, 0.08) 25px
        ),
        repeating-linear-gradient(
            60deg,
            transparent,
            transparent 24px,
            rgba(255, 190, 50, 0.08) 24px,
            rgba(255, 190, 50, 0.08) 25px
        ),
        repeating-linear-gradient(
            -60deg,
            transparent,
            transparent 24px,
            rgba(255, 190, 50, 0.08) 24px,
            rgba(255, 190, 50, 0.08) 25px
        ),
        /* Finer inner hex weave */
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 47px,
            rgba(255, 220, 100, 0.06) 47px,
            rgba(255, 220, 100, 0.06) 49px
        ),
        repeating-linear-gradient(
            60deg,
            transparent,
            transparent 47px,
            rgba(255, 220, 100, 0.06) 47px,
            rgba(255, 220, 100, 0.06) 49px
        ),
        repeating-linear-gradient(
            -60deg,
            transparent,
            transparent 47px,
            rgba(255, 220, 100, 0.06) 47px,
            rgba(255, 220, 100, 0.06) 49px
        ),
        /* Warm honey glow center */
        radial-gradient(ellipse 45% 55% at 50% 50%, rgba(255, 180, 40, 0.15), transparent 70%),
        radial-gradient(ellipse 80% 80% at 50% 50%, rgba(200, 130, 20, 0.08), transparent 85%),
        /* Dark amber base */
        linear-gradient(160deg, #1a0e02 0%, #2a1a06 25%, #3a2208 40%, #2a1a06 65%, #140c02 100%) !important;
}

/* BG 17: Warp Speed — radial streaking lines from center */
.proven-night-sky-container.login-bg-warp {
    background:
        /* Central burst of rays */
        repeating-conic-gradient(
            from 0deg at 50% 50%,
            transparent 0deg,
            transparent 4deg,
            rgba(38, 217, 255, 0.08) 4.5deg,
            transparent 5deg
        ),
        /* Secondary burst offset */
        repeating-conic-gradient(
            from 2.5deg at 50% 50%,
            transparent 0deg,
            transparent 8deg,
            rgba(133, 124, 233, 0.06) 8.5deg,
            transparent 9deg
        ),
        /* Outer ring glow */
        radial-gradient(circle at 50% 50%, transparent 15%, rgba(39, 144, 255, 0.10) 40%, rgba(133, 124, 233, 0.06) 60%, transparent 80%),
        /* Bright core */
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.15) 0%, rgba(38, 217, 255, 0.20) 5%, transparent 25%),
        /* Deep space */
        linear-gradient(160deg, #02050f 0%, #050a1a 40%, #080e25 60%, #030812 100%) !important;
}

/* BG 18: Heartbeat Monitor — dark screen with ECG-style horizontal bands */
.proven-night-sky-container.login-bg-heartbeat {
    background:
        /* Monitor scanlines */
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(0, 0, 0, 0.15) 2px,
            rgba(0, 0, 0, 0.15) 4px
        ),
        /* Horizontal baseline bands — simulating ECG leads */
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 78px,
            rgba(38, 217, 255, 0.12) 78px,
            rgba(38, 217, 255, 0.12) 80px,
            transparent 80px,
            transparent 82px,
            rgba(38, 217, 255, 0.06) 82px,
            rgba(38, 217, 255, 0.06) 83px,
            transparent 83px
        ),
        /* Vertical time marks */
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 38px,
            rgba(38, 217, 255, 0.04) 38px,
            rgba(38, 217, 255, 0.04) 40px
        ),
        /* Finer subdivision */
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 8px,
            rgba(38, 217, 255, 0.02) 8px,
            rgba(38, 217, 255, 0.02) 9px
        ),
        /* Green phosphor glow — like an old CRT monitor */
        radial-gradient(ellipse 70% 60% at 50% 50%, rgba(50, 255, 120, 0.06), transparent 80%),
        /* Monitor bezel vignette */
        radial-gradient(ellipse 80% 80% at 50% 50%, transparent 60%, rgba(0, 0, 0, 0.5) 100%),
        /* Dark monitor screen */
        linear-gradient(175deg, #020808 0%, #041210 30%, #051510 50%, #030e0c 80%, #010808 100%) !important;
}

/* BG 19: Northern Lights — aurora borealis bands across the sky */
.proven-night-sky-container.login-bg-aurora {
    background:
        /* Aurora curtain 1 — wide green band */
        radial-gradient(ellipse 120% 25% at 40% 30%, rgba(80, 255, 140, 0.20), transparent 60%),
        radial-gradient(ellipse 100% 15% at 45% 28%, rgba(50, 255, 120, 0.25), transparent 50%),
        /* Aurora curtain 2 — purple/pink swirl */
        radial-gradient(ellipse 90% 20% at 60% 40%, rgba(180, 100, 255, 0.18), transparent 55%),
        radial-gradient(ellipse 70% 12% at 55% 38%, rgba(200, 120, 255, 0.20), transparent 45%),
        /* Aurora curtain 3 — cyan accent */
        radial-gradient(ellipse 60% 18% at 30% 50%, rgba(38, 217, 255, 0.15), transparent 50%),
        /* Aurora curtain 4 — high green wisp */
        radial-gradient(ellipse 80% 10% at 70% 20%, rgba(100, 255, 180, 0.12), transparent 55%),
        /* Star shimmer points */
        radial-gradient(circle 1px at 15% 12%, rgba(255,255,255,0.6) 0%, transparent 100%),
        radial-gradient(circle 1px at 82% 8%, rgba(255,255,255,0.5) 0%, transparent 100%),
        radial-gradient(circle 1px at 45% 5%, rgba(255,255,255,0.4) 0%, transparent 100%),
        radial-gradient(circle 1px at 68% 15%, rgba(255,255,255,0.5) 0%, transparent 100%),
        radial-gradient(circle 1px at 25% 22%, rgba(255,255,255,0.3) 0%, transparent 100%),
        radial-gradient(circle 1px at 90% 25%, rgba(255,255,255,0.4) 0%, transparent 100%),
        /* Horizon glow */
        linear-gradient(0deg, rgba(10, 20, 40, 1) 0%, rgba(8, 15, 35, 0.95) 40%, rgba(5, 10, 25, 1) 70%, rgba(2, 5, 15, 1) 100%) !important;
}

/* BG 20: Caduceus Watermark — large faded medical symbol behind subtle texture */
.proven-night-sky-container.login-bg-caduceus {
    background:
        /* Fabric-like texture */
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 1px,
            rgba(255, 255, 255, 0.015) 1px,
            rgba(255, 255, 255, 0.015) 2px
        ),
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 1px,
            rgba(255, 255, 255, 0.015) 1px,
            rgba(255, 255, 255, 0.015) 2px
        ),
        /* Central staff (vertical line) */
        linear-gradient(90deg, transparent 49.5%, rgba(133, 124, 233, 0.12) 49.5%, rgba(133, 124, 233, 0.12) 50.5%, transparent 50.5%),
        /* Left snake coil marks */
        radial-gradient(ellipse 18% 5% at 44% 30%, transparent 40%, rgba(38, 217, 255, 0.10) 50%, transparent 60%),
        radial-gradient(ellipse 18% 5% at 56% 40%, transparent 40%, rgba(38, 217, 255, 0.10) 50%, transparent 60%),
        radial-gradient(ellipse 18% 5% at 44% 50%, transparent 40%, rgba(38, 217, 255, 0.10) 50%, transparent 60%),
        radial-gradient(ellipse 18% 5% at 56% 60%, transparent 40%, rgba(38, 217, 255, 0.10) 50%, transparent 60%),
        /* Right snake coil marks */
        radial-gradient(ellipse 18% 5% at 56% 30%, transparent 40%, rgba(105, 222, 163, 0.08) 50%, transparent 60%),
        radial-gradient(ellipse 18% 5% at 44% 40%, transparent 40%, rgba(105, 222, 163, 0.08) 50%, transparent 60%),
        radial-gradient(ellipse 18% 5% at 56% 50%, transparent 40%, rgba(105, 222, 163, 0.08) 50%, transparent 60%),
        radial-gradient(ellipse 18% 5% at 44% 60%, transparent 40%, rgba(105, 222, 163, 0.08) 50%, transparent 60%),
        /* Wings at top */
        radial-gradient(ellipse 25% 8% at 38% 22%, rgba(39, 144, 255, 0.08), transparent 70%),
        radial-gradient(ellipse 25% 8% at 62% 22%, rgba(39, 144, 255, 0.08), transparent 70%),
        /* Warm vignette */
        radial-gradient(ellipse 60% 60% at 50% 50%, rgba(133, 124, 233, 0.06), transparent 80%),
        /* Rich dark base */
        linear-gradient(170deg, #0a0a20 0%, #101035 30%, #0e0e2a 60%, #080818 100%) !important;
}

/* BG 21: Diamond Facets — angular geometric cuts like a gemstone */
.proven-night-sky-container.login-bg-diamond {
    background:
        /* Facet lines — multiple angles creating diamond cuts */
        repeating-linear-gradient(
            30deg,
            transparent,
            transparent 40px,
            rgba(38, 217, 255, 0.10) 40px,
            rgba(38, 217, 255, 0.10) 41px
        ),
        repeating-linear-gradient(
            -30deg,
            transparent,
            transparent 40px,
            rgba(133, 124, 233, 0.08) 40px,
            rgba(133, 124, 233, 0.08) 41px
        ),
        repeating-linear-gradient(
            75deg,
            transparent,
            transparent 55px,
            rgba(105, 222, 163, 0.07) 55px,
            rgba(105, 222, 163, 0.07) 56px
        ),
        repeating-linear-gradient(
            -75deg,
            transparent,
            transparent 55px,
            rgba(39, 144, 255, 0.07) 55px,
            rgba(39, 144, 255, 0.07) 56px
        ),
        /* Horizontal girdle */
        linear-gradient(0deg, transparent 48%, rgba(255, 255, 255, 0.06) 49.5%, rgba(255, 255, 255, 0.10) 50%, rgba(255, 255, 255, 0.06) 50.5%, transparent 52%),
        /* Crown brilliance — top half lighter */
        linear-gradient(180deg, rgba(180, 220, 255, 0.06) 0%, transparent 50%, rgba(80, 60, 140, 0.04) 100%),
        /* Fire refractions */
        conic-gradient(from 180deg at 50% 50%, rgba(38, 217, 255, 0.04), rgba(133, 124, 233, 0.06), rgba(255, 180, 100, 0.04), rgba(105, 222, 163, 0.06), rgba(39, 144, 255, 0.04), rgba(38, 217, 255, 0.04)),
        /* Deep gem base */
        linear-gradient(160deg, #080818 0%, #10102a 25%, #161640 50%, #10102a 75%, #080818 100%) !important;
}

/* ==========================================================================
   BG 22–26: PHOTO-BLENDED BACKGROUNDS (5 medical stock images)
   Each uses ::before for the photo layer so ::after crosshatch still works
   ========================================================================== */

/* Shared: photo layer via ::before — NOT full screen, constrained regions */
.proven-night-sky-container.login-bg-photo-1::before,
.proven-night-sky-container.login-bg-photo-2::before,
.proven-night-sky-container.login-bg-photo-3::before,
.proven-night-sky-container.login-bg-photo-4::before,
.proven-night-sky-container.login-bg-photo-5::before {
    content: '';
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 0;
}

/* BG 22: "Clinical Glow" — workspace photo tucked in bottom-right corner */
.proven-night-sky-container.login-bg-photo-1 {
    background:
        linear-gradient(160deg, rgba(10, 33, 91, 0.95) 0%, rgba(15, 40, 100, 0.88) 50%, rgba(10, 33, 91, 0.80) 100%) !important;
}

/* Photo 1: top-right corner — fade left edge and bottom edge */
.proven-night-sky-container.login-bg-photo-1::before {
    background-image: url('/images/loaders/clinical-workspace.jpg');
    right: 0;
    top: 0;
    width: 50%;
    height: 55%;
    background-position: center;
    background-size: cover;
    opacity: 0.22;
    filter: blur(1.5px) saturate(0.5);
    -webkit-mask-image:
        linear-gradient(to right, transparent 0%, black 40%, black 100%),
        linear-gradient(to bottom, black 0%, black 55%, transparent 100%);
    -webkit-mask-composite: destination-in;
    mask-image:
        linear-gradient(to right, transparent 0%, black 40%, black 100%),
        linear-gradient(to bottom, black 0%, black 55%, transparent 100%);
    mask-composite: intersect;
}

/* BG 23: "Caregiver" — healthcare team photo, upper-left accent */
.proven-night-sky-container.login-bg-photo-2 {
    background:
        radial-gradient(ellipse 50% 60% at 25% 40%, rgba(50, 160, 80, 0.15), transparent 70%),
        radial-gradient(ellipse 60% 70% at 70% 60%, rgba(133, 124, 233, 0.12), transparent 70%),
        linear-gradient(160deg, rgba(8, 30, 20, 0.95) 0%, rgba(10, 40, 30, 0.90) 40%, rgba(15, 20, 50, 0.95) 100%) !important;
}

/* Photo 2: top-left corner — fade right edge and bottom edge */
.proven-night-sky-container.login-bg-photo-2::before {
    background-image: url('/images/loaders/healthcare-team.jpg');
    left: 0;
    top: 0;
    width: 45%;
    height: 55%;
    background-position: center top;
    background-size: cover;
    opacity: 0.20;
    filter: blur(1px) saturate(0.4) brightness(0.9);
    -webkit-mask-image:
        linear-gradient(to left, transparent 0%, black 40%, black 100%),
        linear-gradient(to bottom, black 0%, black 55%, transparent 100%);
    -webkit-mask-composite: destination-in;
    mask-image:
        linear-gradient(to left, transparent 0%, black 40%, black 100%),
        linear-gradient(to bottom, black 0%, black 55%, transparent 100%);
    mask-composite: intersect;
}

/* BG 24: "Vitals" — patient care photo, small center window */
.proven-night-sky-container.login-bg-photo-3 {
    background:
        radial-gradient(ellipse 35% 40% at 50% 48%, transparent 20%, rgba(10, 15, 40, 0.80) 60%, rgba(5, 8, 25, 0.98) 100%),
        radial-gradient(circle at 20% 30%, rgba(38, 217, 255, 0.08), transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(105, 222, 163, 0.06), transparent 40%),
        linear-gradient(160deg, #060e28 0%, #0a1838 50%, #060e28 100%) !important;
}

/* Photo 3: bottom-right corner — fade left edge and top edge */
.proven-night-sky-container.login-bg-photo-3::before {
    background-image: url('/images/loaders/patient-care.jpg');
    right: 0;
    bottom: 0;
    width: 45%;
    height: 55%;
    background-position: center 30%;
    background-size: cover;
    opacity: 0.18;
    filter: blur(1px) saturate(0.35);
    -webkit-mask-image:
        linear-gradient(to right, transparent 0%, black 40%, black 100%),
        linear-gradient(to top, black 0%, black 55%, transparent 100%);
    -webkit-mask-composite: destination-in;
    mask-image:
        linear-gradient(to right, transparent 0%, black 40%, black 100%),
        linear-gradient(to top, black 0%, black 55%, transparent 100%);
    mask-composite: intersect;
}

/* BG 25: "Digital Health" — tech photo, lower-right diagonal accent */
.proven-night-sky-container.login-bg-photo-4 {
    background:
        linear-gradient(135deg, rgba(10, 20, 55, 0.97) 0%, rgba(10, 20, 55, 0.93) 45%, rgba(15, 30, 65, 0.88) 100%),
        repeating-linear-gradient(135deg, transparent, transparent 60px, rgba(39, 144, 255, 0.04) 60px, rgba(39, 144, 255, 0.04) 62px),
        repeating-linear-gradient(135deg, transparent, transparent 30px, rgba(133, 124, 233, 0.03) 30px, rgba(133, 124, 233, 0.03) 31px),
        linear-gradient(160deg, #0a1535 0%, #0d2050 50%, #0a1535 100%) !important;
}

/* Photo 4: bottom-left corner — fade right edge and top edge */
.proven-night-sky-container.login-bg-photo-4::before {
    background-image: url('/images/loaders/medical-technology.jpg');
    left: 0;
    bottom: 0;
    width: 48%;
    height: 50%;
    background-position: center;
    background-size: cover;
    opacity: 0.16;
    filter: saturate(0.4) brightness(0.8);
    -webkit-mask-image:
        linear-gradient(to left, transparent 0%, black 40%, black 100%),
        linear-gradient(to top, black 0%, black 55%, transparent 100%);
    -webkit-mask-composite: destination-in;
    mask-image:
        linear-gradient(to left, transparent 0%, black 40%, black 100%),
        linear-gradient(to top, black 0%, black 55%, transparent 100%);
    mask-composite: intersect;
}

/* BG 26: "Still Life" — stethoscope photo, bottom-center strip */
.proven-night-sky-container.login-bg-photo-5 {
    background:
        linear-gradient(180deg, rgba(10, 33, 91, 0.97) 0%, rgba(10, 33, 91, 0.93) 40%, rgba(20, 45, 100, 0.85) 60%, rgba(15, 35, 80, 0.90) 100%),
        radial-gradient(ellipse 80% 30% at 50% 70%, rgba(133, 124, 233, 0.10), transparent 70%),
        linear-gradient(175deg, #0a1a40 0%, #0e2555 50%, #0a1a40 100%) !important;
}

/* Photo 5: top-right corner — fade left edge and bottom edge */
.proven-night-sky-container.login-bg-photo-5::before {
    background-image: url('/images/loaders/stethoscope-desk.jpg');
    right: 0;
    top: 0;
    width: 50%;
    height: 50%;
    background-position: center;
    background-size: cover;
    opacity: 0.22;
    filter: blur(0.5px) saturate(0.35) brightness(0.8);
    -webkit-mask-image:
        linear-gradient(to right, transparent 0%, black 40%, black 100%),
        linear-gradient(to bottom, black 0%, black 55%, transparent 100%);
    -webkit-mask-composite: destination-in;
    mask-image:
        linear-gradient(to right, transparent 0%, black 40%, black 100%),
        linear-gradient(to bottom, black 0%, black 55%, transparent 100%);
    mask-composite: intersect;
}

/* ==========================================================================
   END CREATIVE BACKGROUNDS
   ========================================================================== */

/* ---------- Toggle Controls ---------- */
/* Proven wordmark — lower-right on non-login identity pages */
.login-layout-wordmark {
    position: fixed;
    bottom: 1.5rem;
    right: 2rem;
    height: 28px;
    opacity: 0.7;
    z-index: 10;
    pointer-events: none;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
}

/* Hide layout wordmark only when the unknown-user login shows its own wordmark */
body:has(.proven-login-unknown-wrapper.visible) .login-layout-wordmark {
    display: none;
}

.login-toggles-panel {
    position: fixed;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    padding: 0.35rem 0.75rem 0.4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
}

.login-toggles-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.3);
    font-family: sans-serif;
}

.login-toggles {
    display: flex;
    gap: 0.4rem;
}

.login-toggle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    padding: 0;
    backdrop-filter: blur(4px);
}

.login-toggle:hover {
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.7);
    border-color: rgba(255, 255, 255, 0.4);
}

.login-toggle.active {
    background: rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.85);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 8px rgba(133, 124, 233, 0.3);
}

/* ---------- Fireflies ---------- */
.login-fireflies {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.login-firefly {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    animation: login-firefly-float ease-in-out infinite;
}

@keyframes login-firefly-float {
    0%, 100% {
        opacity: 0;
        transform: translate(0, 0) scale(0.5);
    }
    15% {
        opacity: 0.7;
    }
    50% {
        opacity: 0.5;
        transform: translate(30px, -20px) scale(1.2);
    }
    85% {
        opacity: 0.6;
    }
}

/* ---------- Icon Tetris Rain ---------- */
.login-tetris-icon {
    position: absolute;
    pointer-events: none;
    z-index: 2;
    will-change: transform, top;
    transition: opacity 0.3s ease;
}

.login-tetris-icon.login-tetris-landed {
    transition: opacity 0.5s ease;
}

/* ---------- Shooting Logo Stars ---------- */
.login-shooting-star {
    position: absolute;
    pointer-events: none;
    z-index: 10;
    animation: login-shooting-move var(--shoot-dur, 1.5s) linear forwards;
}

.login-shooting-trail-line {
    position: absolute;
    pointer-events: none;
    border-radius: 1px;
    animation: login-shooting-trail-fade var(--shoot-dur, 1.5s) linear forwards;
    animation-delay: var(--trail-delay, 0s);
}

@keyframes login-shooting-move {
    0% {
        transform: translate(0, 0);
        opacity: 0;
    }
    4% {
        opacity: 1;
    }
    80% {
        opacity: 0.9;
    }
    100% {
        transform: translate(var(--shoot-x, 300px), var(--shoot-y, 800px));
        opacity: 0;
    }
}

@keyframes login-shooting-trail-fade {
    0% {
        opacity: 0;
    }
    8% {
        opacity: 0.8;
    }
    60% {
        opacity: 0.5;
    }
    100% {
        opacity: 0;
    }
}

/* ---------- Movement Toggle ---------- */
.login-no-movement .proven-login-triangles .login-tri,
.login-no-movement .proven-login-stars .login-star,
.login-no-movement .login-firefly,
.login-no-movement .login-tetris-icon,
.login-no-movement .login-shooting-star,
.login-no-movement .login-shooting-trail-line {
    animation-play-state: paused !important;
}

/*#endregion */

/* This is to cheat the browsers default background color and prevent it from showing on autofill */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-transition-delay: 9999s;
    transition-delay: 9999s;
}


img {
    user-select: none;
}

.hidden {
    display: none !important;
}

.login-base-panel {
    max-width: 350px;
    box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2);
    border-radius: 0.5rem;
    background-color: rgba(255, 255, 255, .15);
    backdrop-filter: blur(5px) brightness(95%);
    padding: 2rem;
    text-align: center;
    transition: height 0.5s;
    opacity: 0;
    animation: fade-in-left 1s forwards;
    margin-top: -3rem;
}