/* =========================================================
   LOGIN PAGE — REFERENCE CARD DESIGN
   File: /Login/LoginPage.css

   Matches the purple/white login-card style from the reference image.
   Accent + dark/light mode are linked to the website theme.
========================================================= */

:root {
    --login-accent: var(--primary, var(--theme-accent, #7c3aed));
    --login-accent-2: var(--primary-soft, var(--theme-accent-2, #5b21ff));
    --login-accent-3: var(--primary-soft2, #a855f7);

    --login-page-bg: #eef3fb;
    --login-card-bg: #ffffff;
    --login-field-bg: #ffffff;
    --login-text: #22222a;
    --login-muted: #72758a;
    --login-border: rgba(101, 80, 255, .14);
    --login-shadow: 0 30px 70px rgba(72, 60, 135, .18);
    --login-soft-shadow: 0 18px 40px color-mix(in srgb, var(--login-accent) 18%, transparent);

    --login-header-offset: var(--public-header-h, 74px);
    --login-footer-offset: var(--public-footer-h, 44px);
}

html[data-mode="dark"],
body[data-mode="dark"],
body.dark {
    --login-page-bg: #07101f;
    --login-card-bg: #0f172a;
    --login-field-bg: rgba(255, 255, 255, .96);
    --login-text: #f8fafc;
    --login-muted: #aeb7c8;
    --login-border: rgba(255, 255, 255, .12);
    --login-shadow: 0 34px 90px rgba(0, 0, 0, .48);
}

* {
    box-sizing: border-box;
}

body.login-page-body {
    overflow-x: hidden;
    color: var(--login-text);
    background:
        radial-gradient(circle at 4% 10%, rgba(255,255,255,.48) 0 22px, transparent 23px),
        radial-gradient(circle at 42% 2%, rgba(255,255,255,.38) 0 22px, transparent 23px),
        radial-gradient(circle at 80% 7%, rgba(255,255,255,.34) 0 25px, transparent 26px),
        radial-gradient(circle at 98% 48%, rgba(255,255,255,.36) 0 27px, transparent 28px),
        linear-gradient(180deg, var(--login-page-bg), color-mix(in srgb, var(--login-page-bg) 88%, #ffffff 12%)) !important;
}

body.login-page-body .public-page-content {
    min-height: calc(100vh - var(--login-header-offset) - var(--login-footer-offset));
}

body.login-page-body .theme-fab {
    bottom: calc(var(--login-footer-offset) + 18px);
}

/* Main shell: one centered rounded card like the reference */
.container {
    width: min(1060px, calc(100vw - 36px));
    min-height: calc(100vh - var(--login-header-offset) - var(--login-footer-offset));
    margin: 0 auto;
    padding: clamp(26px, 5vh, 72px) 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
}

/* The actual form is on the left */
.right {
    order: 1;
    min-height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(30px, 4vw, 58px);
    border-radius: 28px 0 0 28px;
    background: var(--login-card-bg);
    border: 1px solid var(--login-border);
    border-right: 0;
    box-shadow: var(--login-shadow);
    overflow: hidden;
}

/* Decorative welcome side */
.left {
    order: 2;
    position: relative;
    min-height: 520px;
    overflow: hidden;
    border-radius: 0 28px 28px 0;
    border: 1px solid color-mix(in srgb, var(--login-accent) 26%, transparent);
    border-left: 0;
    box-shadow: var(--login-shadow);
    isolation: isolate;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--login-accent) 92%, #ffffff 8%), var(--login-accent-2));
}

/* Subtle tile lines on the accent panel */
.left::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: .22;
    background-image:
        linear-gradient(45deg, rgba(255,255,255,.18) 1px, transparent 1px),
        linear-gradient(-45deg, rgba(255,255,255,.14) 1px, transparent 1px);
    background-size: 58px 58px;
    pointer-events: none;
}

/* Cloud shape around the welcome copy */
.left::after {
    content: "";
    position: absolute;
    z-index: 1;
    left: -145px;
    top: 68px;
    width: 575px;
    height: 360px;
    background:
        radial-gradient(circle at 12% 38%, #fff 0 86px, transparent 87px),
        radial-gradient(circle at 32% 22%, #fff 0 100px, transparent 101px),
        radial-gradient(circle at 55% 30%, #fff 0 82px, transparent 83px),
        radial-gradient(circle at 76% 46%, #fff 0 92px, transparent 93px),
        radial-gradient(circle at 42% 72%, #fff 0 118px, transparent 119px);
    filter: drop-shadow(0 24px 34px rgba(38, 20, 102, .13));
    pointer-events: none;
}

/* Bottom cloud */
.left .login-bright-wash {
    display: block !important;
    position: absolute;
    z-index: 1;
    left: -70px;
    right: -50px;
    bottom: -88px;
    height: 210px;
    pointer-events: none;
    background:
        radial-gradient(circle at 5% 54%, #fff 0 70px, transparent 71px),
        radial-gradient(circle at 22% 26%, #fff 0 82px, transparent 83px),
        radial-gradient(circle at 43% 44%, #fff 0 72px, transparent 73px),
        radial-gradient(circle at 62% 28%, #fff 0 85px, transparent 86px),
        radial-gradient(circle at 84% 42%, #fff 0 96px, transparent 97px),
        radial-gradient(circle at 100% 20%, #fff 0 90px, transparent 91px);
    filter: drop-shadow(0 -18px 22px rgba(38, 20, 102, .09));
}

/* Hide slideshow image panels in this reference design */
.slide,
.left-overlay {
    display: none !important;
}

#particles {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    opacity: .12;
    pointer-events: none;
    mix-blend-mode: screen;
}

/* Welcome text on the accent side */
.login-left-content {
    position: absolute;
    z-index: 4;
    top: 50%;
    left: 64px;
    right: 54px;
    transform: translateY(-50%);
    max-width: 390px;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
    color: #22222a;
    text-align: center;
    animation: welcomeIn .52s cubic-bezier(.22,1,.36,1) both;
}

.login-eyebrow {
    display: none;
}

.login-left-content h1 {
    margin: 0;
    color: #22222a;
    font-size: clamp(30px, 3vw, 42px);
    line-height: 1.08;
    letter-spacing: -.04em;
    font-weight: 900;
}

.login-left-content p {
    max-width: 32ch;
    margin: 22px auto 0;
    color: #4b4b5c;
    font-size: 15px;
    line-height: 1.8;
    font-weight: 500;
}

.login-mini-stats {
    display: none;
}

@keyframes welcomeIn {
    from {
        opacity: 0;
        transform: translateY(calc(-50% + 14px));
    }

    to {
        opacity: 1;
        transform: translateY(-50%);
    }
}

/* Form card becomes simple and flat inside left side */
.card {
    width: min(100%, 390px);
    max-width: 390px;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    overflow: visible;
    animation: formIn .46s cubic-bezier(.22,1,.36,1) both;
}

.card::before {
    display: none;
}

@keyframes formIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

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

.login-card-brand {
    display: none;
}

.card-title {
    color: var(--login-text);
    font-size: clamp(30px, 3vw, 42px);
    line-height: 1.05;
    letter-spacing: -.04em;
    font-weight: 900;
    text-align: center;
}

.card-sub {
    margin: 8px 0 42px;
    color: var(--login-muted);
    font-size: 15px;
    line-height: 1.4;
    font-weight: 500;
    text-align: center;
}

/* Panel transitions */
.panel {
    display: none !important;
    animation-duration: .28s;
    animation-fill-mode: both;
}

.panel.active {
    display: block !important;
}

.slide-in-right { animation-name: slideInRight; }
.slide-in-left { animation-name: slideInLeft; }
.slide-out-left,
.slide-out-right { display: none !important; }

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(12px); }
    to { opacity: 1; transform: none; }
}

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-12px); }
    to { opacity: 1; transform: none; }
}

/* Inputs like the reference: pill, soft shadow, accent icon area */
.input {
    width: 100%;
    min-height: 58px;
    margin: 0 0 20px;
    padding: 0 18px 0 64px;
    border: 0;
    border-radius: 999px;
    outline: none;
    background-color: var(--login-field-bg);
    color: #1f2937;
    font-size: 15px;
    font-weight: 600;
    box-shadow:
        0 18px 34px rgba(90, 89, 170, .14),
        inset 0 1px 0 rgba(255,255,255,.88);
    transition: box-shadow .16s ease, transform .16s ease, background .16s ease;
}

.input::placeholder {
    color: #a0a4b8;
    font-weight: 600;
}

.input:focus {
    transform: translateY(-1px);
    box-shadow:
        0 20px 38px color-mix(in srgb, var(--login-accent) 18%, transparent),
        0 0 0 4px color-mix(in srgb, var(--login-accent) 12%, transparent),
        inset 0 1px 0 rgba(255,255,255,.95);
}

.input.invalid {
    box-shadow:
        0 16px 34px rgba(239, 68, 68, .16),
        0 0 0 4px rgba(239, 68, 68, .12) !important;
}

/* Email/password icons */
#EmailAddress,
#RetrieveEmail,
#NewAccountEmail,
#email {
    background-image:
        linear-gradient(135deg, var(--login-accent), var(--login-accent-2)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat, no-repeat;
    background-size: 34px 34px, 18px 18px;
    background-position: 15px center, 23px center;
}

#TextPassword,
#password,
#repeatPassword {
    background-image:
        linear-gradient(135deg, var(--login-accent), var(--login-accent-2)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E");
    background-repeat: no-repeat, no-repeat;
    background-size: 34px 34px, 18px 18px;
    background-position: 15px center, 23px center;
}

#verificationcode {
    background-image:
        linear-gradient(135deg, var(--login-accent), var(--login-accent-2)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat, no-repeat;
    background-size: 34px 34px, 18px 18px;
    background-position: 15px center, 23px center;
}

/* Keep non-login registration fields cleaner */
#businessName,
#yourName,
#address,
#city,
#stateZip,
#phone {
    padding-left: 20px;
}

#panelRegister {
    max-height: min(53vh, 460px);
    overflow: auto;
    padding: 2px 6px 2px 0;
}

#panelRegister .input {
    min-height: 48px;
    margin-bottom: 10px;
    border-radius: 18px;
}

/* Remember + forgot row */
#panelLoginPassword label {
    color: var(--login-muted);
    font-size: 13px;
    font-weight: 600;
}

#panelLoginPassword input[type="checkbox"],
input[type="checkbox"] {
    accent-color: var(--login-accent);
}

.login-panel-note {
    margin-top: 18px;
    text-align: center;
}

.small-link {
    color: color-mix(in srgb, var(--login-accent) 76%, var(--login-text));
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
}

.small-link:hover {
    text-decoration: underline;
}

/* Buttons */
.btn {
    width: 100%;
    min-height: 48px;
    margin: 12px 0 0;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .02em;
    transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn-primary {
    width: min(100%, 220px);
    display: block;
    margin: 22px auto 0;
    color: #fff;
    text-transform: uppercase;
    background: linear-gradient(135deg, var(--login-accent), var(--login-accent-2));
    box-shadow: 0 18px 34px color-mix(in srgb, var(--login-accent) 26%, transparent);
}

.btn-primary:hover {
    filter: brightness(1.03);
}

.btn-secondary {
    color: color-mix(in srgb, var(--login-accent) 74%, var(--login-text));
    background: transparent;
    box-shadow: none;
    min-height: 38px;
    margin-top: 8px;
    font-size: 13px;
    text-transform: none;
    letter-spacing: 0;
}

.btn-secondary:hover {
    background: color-mix(in srgb, var(--login-accent) 8%, transparent);
}

/* Make Create/Forgot look like text links under the first email step */
#panelLoginEmail .btn-secondary {
    width: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
}

#panelLoginEmail {
    text-align: center;
}

#panelLoginEmail .input {
    text-align: left;
}

#panelLoginEmail #BtnShowNewAccount,
#panelLoginEmail #BtnShowRetrieve {
    margin-top: 24px;
}

#panelLoginEmail #BtnShowNewAccount::before {
    content: "Don’t have an account? ";
    color: var(--login-muted);
    font-weight: 600;
}

#panelLoginEmail #BtnShowRetrieve::before {
    content: "";
}

/* Messages */
.error-message {
    display: none;
    margin: 0 0 18px;
    padding: 11px 13px;
    border-radius: 16px;
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, .22);
    background: rgba(239, 68, 68, .08);
    font-size: 13px;
    line-height: 1.45;
    font-weight: 700;
}

.error-message.show,
.error-message:not(:empty) {
    display: block;
}

.password-sent-message {
    padding: 16px;
    border-radius: 18px;
    background: color-mix(in srgb, var(--login-accent) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--login-accent) 16%, var(--login-border));
    color: var(--login-text);
    font-size: 14px;
    line-height: 1.55;
    font-weight: 600;
    text-align: center;
}

.terms-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0 8px;
    color: var(--login-muted);
    font-size: 12px;
    font-weight: 600;
}

.terms-row a {
    color: color-mix(in srgb, var(--login-accent) 76%, var(--login-text));
    font-weight: 800;
    text-decoration: none;
}

.terms-row a:hover {
    text-decoration: underline;
}

/* Success panel */
.success-wrapper {
    text-align: center;
}

.success-check {
    width: 76px;
    height: 76px;
    margin: 0 auto 16px;
    border-radius: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--login-accent) 12%, transparent);
}

.success-checkmark {
    width: 54px;
    height: 54px;
    border-radius: 19px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 30px;
    font-weight: 900;
    background: linear-gradient(135deg, var(--login-accent), var(--login-accent-2));
}

.success-title {
    color: var(--login-text);
    font-size: 25px;
    font-weight: 900;
    letter-spacing: -.03em;
    margin-bottom: 7px;
}

.success-sub {
    color: var(--login-muted);
    font-size: 13px;
    line-height: 1.55;
    font-weight: 600;
    margin-bottom: 14px;
}

.success-user {
    display: grid;
    gap: 7px;
    padding: 12px;
    margin-bottom: 14px;
    border-radius: 16px;
    text-align: left;
    color: var(--login-text);
    background: color-mix(in srgb, var(--login-accent) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--login-accent) 14%, var(--login-border));
    font-size: 12px;
    line-height: 1.45;
}

.success-slideshow {
    display: none;
}

.confetti-canvas,
#confettiCanvas {
    position: fixed;
    inset: 0;
    z-index: 20000;
    width: 100%;
    height: 100%;
    pointer-events: none;
    display: none;
}

.shake {
    animation: loginShake .38s ease;
}

@keyframes loginShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-7px); }
    40% { transform: translateX(7px); }
    60% { transform: translateX(-5px); }
    80% { transform: translateX(5px); }
}

/* Dark mode adjustment: keep the reference style but readable */
html[data-mode="dark"] .right,
body.dark .right {
    background: color-mix(in srgb, var(--login-card-bg) 96%, #ffffff 4%);
}

html[data-mode="dark"] .left::after,
body.dark .left::after,
html[data-mode="dark"] .left .login-bright-wash,
body.dark .left .login-bright-wash {
    opacity: .96;
}

html[data-mode="dark"] .card-sub,
body.dark .card-sub {
    color: #b8c2d6;
}

/* Tablet */
@media (max-width: 980px) {
    .container {
        width: min(720px, calc(100vw - 24px));
        grid-template-columns: 1fr;
        padding: 22px 0 88px;
    }

    .right {
        order: 1;
        min-height: auto;
        border-radius: 28px 28px 0 0;
        border: 1px solid var(--login-border);
        border-bottom: 0;
        padding: 34px 22px;
    }

    .left {
        order: 2;
        min-height: 260px;
        border-radius: 0 0 28px 28px;
        border: 1px solid color-mix(in srgb, var(--login-accent) 26%, transparent);
        border-top: 0;
    }

    .left::after {
        left: -96px;
        top: 28px;
        width: 500px;
        height: 260px;
        transform: scale(.82);
        transform-origin: left center;
    }

    .login-left-content {
        left: 32px;
        right: 32px;
        max-width: 420px;
    }

    .login-left-content h1 {
        font-size: 32px;
    }

    .login-left-content p {
        font-size: 13px;
        margin-top: 12px;
    }
}

/* Mobile */
@media (max-width: 640px) {
    body.login-page-body {
        background:
            radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--login-accent) 18%, transparent), transparent 18rem),
            linear-gradient(180deg, var(--login-page-bg), color-mix(in srgb, var(--login-page-bg) 90%, #ffffff 10%)) !important;
    }

    .container {
        width: min(100%, calc(100vw - 16px));
        padding: 14px 0 82px;
    }

    .right {
        padding: 28px 16px;
        border-radius: 24px 24px 0 0;
    }

    .left {
        min-height: 210px;
        border-radius: 0 0 24px 24px;
    }

    .card {
        max-width: 100%;
    }

    .card-title {
        font-size: 31px;
    }

    .card-sub {
        margin-bottom: 28px;
    }

    .input {
        min-height: 54px;
        margin-bottom: 15px;
    }

    .left::after {
        left: -145px;
        top: 18px;
        transform: scale(.72);
    }

    .left .login-bright-wash {
        height: 150px;
        bottom: -70px;
    }

    .login-left-content {
        left: 24px;
        right: 24px;
    }

    .login-left-content h1 {
        font-size: 27px;
    }

    .login-left-content p {
        display: none;
    }

    #panelRegister {
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }

    #panelLoginEmail #BtnShowNewAccount,
    #panelLoginEmail #BtnShowRetrieve {
        display: flex;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .slide,
    .panel,
    .btn,
    .input,
    .card,
    .login-left-content {
        animation: none !important;
        transition: none !important;
    }
}


/* =========================================================
   FINAL FIX: SLIDES ON LEFT + TEXT UNDER EMAIL
   This block intentionally stays at the bottom so it overrides
   the reference welcome-panel design without breaking form styles.
========================================================= */

/* Desktop: slideshow left, form right */
@media (min-width: 981px) {
    .container {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    }

    .left {
        order: 1 !important;
        border-radius: 28px 0 0 28px !important;
        border: 1px solid color-mix(in srgb, var(--login-accent) 18%, transparent) !important;
        border-right: 0 !important;
        background: #ffffff !important;
        overflow: hidden !important;
    }

    .right {
        order: 2 !important;
        border-radius: 0 28px 28px 0 !important;
        border: 1px solid var(--login-border) !important;
        border-left: 0 !important;
    }
}

/* Restore real slideshow images */
.left .slide {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    opacity: 0;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    filter: none !important;
    -webkit-filter: none !important;
    transform: scale(1.04);
    animation: loginSlideShowLeft 24s infinite ease-in-out !important;
}

.left .slide:first-of-type {
    opacity: 1;
}

@keyframes loginSlideShowLeft {
    0% {
        opacity: 0;
        transform: scale(1.06);
    }

    7% {
        opacity: 1;
    }

    28% {
        opacity: 1;
        transform: scale(1.015);
    }

    36% {
        opacity: 0;
        transform: scale(1.02);
    }

    100% {
        opacity: 0;
        transform: scale(1.06);
    }
}

/* Keep the image clean, no black/dark filter */
.left-overlay {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    opacity: 1 !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.00), rgba(255,255,255,.08)) !important;
    filter: none !important;
    -webkit-filter: none !important;
}

.left::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    pointer-events: none !important;
    opacity: 1 !important;
    background:
        radial-gradient(circle at 12% 10%, rgba(255,255,255,.18), transparent 26rem),
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.12)) !important;
    filter: none !important;
}

.left::after,
.left .login-bright-wash,
.login-left-content,
.login-eyebrow,
.login-mini-stats,
#particles {
    display: none !important;
}

/* The note now belongs under the email step */
.email-step-note {
    margin: 18px auto 0 !important;
    max-width: 310px !important;
    color: var(--login-muted) !important;
    font-size: 13px !important;
    line-height: 1.65 !important;
    font-weight: 650 !important;
    text-align: center !important;
}

/* Mobile/tablet: image on top, form under it */
@media (max-width: 980px) {
    .left {
        order: 1 !important;
        min-height: 250px !important;
        border-radius: 28px 28px 0 0 !important;
        border: 1px solid color-mix(in srgb, var(--login-accent) 18%, transparent) !important;
        border-bottom: 0 !important;
    }

    .right {
        order: 2 !important;
        border-radius: 0 0 28px 28px !important;
        border: 1px solid var(--login-border) !important;
        border-top: 0 !important;
    }
}

@media (max-width: 640px) {
    .left {
        min-height: 190px !important;
        border-radius: 24px 24px 0 0 !important;
    }

    .right {
        border-radius: 0 0 24px 24px !important;
    }
}


/* =========================================================
   FINAL FIX: GLOW ON REAL LOGIN BOARD ONLY
   Added 2026-06-14

   This matches the Logout page glow/background, but the glow is attached to
   .login-board-shell, not .container. The container is only the page centering area.
========================================================= */

:root {
    --login-accent: var(--primary, var(--theme-accent, #3b82f6));
    --login-accent-2: var(--primary-soft, var(--theme-accent-2, #2563eb));
    --login-bg-match: #eef3fb;
    --login-board-bg: var(--login-card-bg, #ffffff);
    --login-board-shadow: 0 34px 90px rgba(31, 41, 72, .18);
}

html[data-mode="dark"],
body[data-mode="dark"],
body.dark {
    --login-bg-match: #07101f;
    --login-board-bg: var(--login-card-bg, #101a2e);
    --login-board-shadow: 0 36px 96px rgba(0, 0, 0, .48);
}

/* Same background feel as LogoutPage */
body.login-page-body {
    overflow-x: hidden;
    background:
        radial-gradient(circle at 8% 10%, color-mix(in srgb, var(--login-accent) 17%, transparent), transparent 23rem),
        radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--login-accent-2) 14%, transparent), transparent 25rem),
        radial-gradient(circle at 50% 100%, rgba(255,255,255,.22), transparent 27rem),
        linear-gradient(180deg, var(--login-bg-match), color-mix(in srgb, var(--login-bg-match) 88%, #ffffff 12%)) !important;
}

/* Page centering only - no glow here */
.container {
    width: min(1060px, calc(100vw - 36px)) !important;
    min-height: calc(100vh - var(--login-header-offset) - var(--login-footer-offset)) !important;
    margin: 0 auto !important;
    padding: clamp(26px, 5vh, 72px) 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: center !important;
    justify-items: center !important;
    gap: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    box-shadow: none !important;
    isolation: isolate !important;
}

.container::before,
.container::after {
    display: none !important;
    content: none !important;
}

/* Actual login board. This is the same idea as .logout-split-card */
.login-board-shell {
    position: relative;
    width: min(100%, 980px);
    min-height: 520px;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
    align-items: stretch;
    gap: 0;
    border-radius: 30px;
    overflow: hidden;
    background: var(--login-board-bg);
    box-shadow: var(--login-board-shadow);
    isolation: isolate;
}

/* Same glowing border as the logout board */
.login-board-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    border-radius: inherit;
    padding: 1px;
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--login-accent) 78%, #ffffff 22%),
            rgba(255,255,255,.18),
            color-mix(in srgb, var(--login-accent-2) 70%, transparent)
        );
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
}

/* Same subtle outside glow as logout, but now the glow size follows the real board */
.login-board-shell::after {
    content: "";
    position: absolute;
    inset: -2px;
    z-index: -1;
    border-radius: 34px;
    background:
        radial-gradient(circle at 0% 12%, color-mix(in srgb, var(--login-accent) 45%, transparent), transparent 28rem),
        radial-gradient(circle at 100% 82%, color-mix(in srgb, var(--login-accent-2) 38%, transparent), transparent 24rem);
    filter: blur(22px);
    opacity: .72;
    pointer-events: none;
}

/* Left/right are now inside the exact glowing board */
.login-board-shell .left,
.login-board-shell .right {
    position: relative !important;
    z-index: 1 !important;
    min-height: 520px !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.login-board-shell .left {
    order: 1 !important;
    overflow: hidden !important;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--login-accent) 92%, #ffffff 8%), var(--login-accent-2)) !important;
}

.login-board-shell .right {
    order: 2 !important;
    z-index: 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: clamp(28px, 4vw, 58px) !important;
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--login-accent) 10%, transparent), transparent 16rem),
        var(--login-board-bg) !important;
}

/* Keep slideshow clean */
.login-board-shell .left .slide {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    filter: none !important;
    -webkit-filter: none !important;
}

.login-board-shell .left-overlay {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    opacity: 1 !important;
    background:
        radial-gradient(circle at 18% 16%, rgba(255,255,255,.28), transparent 24rem),
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.16)) !important;
    filter: none !important;
}

/* Remove old decorative overlay content from login reference design */
.login-board-shell .left::before,
.login-board-shell .left::after,
.login-board-shell .left .login-bright-wash,
.login-board-shell .login-left-content,
.login-board-shell .login-eyebrow,
.login-board-shell .login-mini-stats,
.login-board-shell #particles {
    display: none !important;
    content: none !important;
}

@media (max-width: 980px) {
    .container {
        width: min(720px, calc(100vw - 24px)) !important;
        padding: 22px 0 88px !important;
    }

    .login-board-shell {
        width: 100%;
        min-height: 0;
        grid-template-columns: 1fr;
        border-radius: 28px;
    }

    .login-board-shell::after {
        border-radius: 32px;
    }

    .login-board-shell .left {
        min-height: 265px !important;
    }

    .login-board-shell .right {
        min-height: auto !important;
        padding: 34px 22px !important;
    }
}

@media (max-width: 640px) {
    .container {
        width: min(100%, calc(100vw - 16px)) !important;
        padding: 14px 0 82px !important;
    }

    .login-board-shell {
        border-radius: 24px;
    }

    .login-board-shell::after {
        border-radius: 28px;
    }

    .login-board-shell .left {
        min-height: 205px !important;
    }

    .login-board-shell .right {
        padding: 28px 16px !important;
    }
}