:root, :root.light, :root .light {
    /* uses existing brand vars */
    --auth-primary: var(--primary, #006699);
    --auth-alternate: var(--alternate, #fe860e);
    /* page surfaces */
    --auth-bg: var(--hero-bg-solid, #ffffff);
    --auth-left-bg: rgba(255, 255, 255, 0.75);
    --auth-right-bg: #F7F7F7;
    /* “glow” tints  */
    --auth-grad-1: var(--grad-1, rgba(0, 102, 153, 0.15));
    --auth-grad-2: var(--grad-2, rgba(254, 134, 14, 0.18));
    --auth-glow-opacity: var(--glow-opacity, 0.6);
    /* text */
    --auth-text: var(--text-h1, #0f172a);
    --auth-muted: var(--text-p, #384248);
    /* cards / borders */
    --auth-border: rgba(15, 23, 42, 0.12);
    --auth-card-bg: rgba(255, 255, 255, 0.78);
    --auth-card-shadow: 0 18px 60px rgba(15, 23, 42, 0.14);
    /* pills / accents */
    --auth-pill-bg: rgba(15, 23, 42, 0.06);
    --auth-pill-border: rgba(15, 23, 42, 0.10);
    /* check dot */
    --auth-check-bg: rgba(0, 102, 153, 0.14);
    --auth-check-border: rgba(0, 102, 153, 0.28);
    /* illustration panel */
    --auth-illustration-bg: rgba(255, 255, 255, 0.55);
    --auth-illustration-border: rgba(15, 23, 42, 0.10);
    /* subtle section background */
    --auth-subtle-bg: var(--subtle-primary-bg, #F0F7FA);
    /* Neon glow colors (light mode = softer) */
    --auth-glow-1: rgba(0, 179, 255, 0.16); /* cyan/blue */
    --auth-glow-2: rgba(124, 58, 237, 0.14); /* purple */
}

/* Dark mode override (Bootstrap toggle) */
[data-bs-theme="dark"],
[data-theme="dark"] {
    --auth-bg: var(--hero-bg-solid, #0b1727);
    --auth-left-bg: rgba(11, 23, 39, 0.70);
    --auth-right-bg: var(--hero-bg-solid, #0b1727);
    --auth-grad-1: var(--grad-1, rgba(0, 102, 153, 0.20));
    --auth-grad-2: var(--grad-2, rgba(254, 134, 14, 0.15));
    --auth-glow-opacity: var(--glow-opacity, 1);
    --auth-text: var(--text-h1, #ffffff);
    --auth-muted: var(--text-p, #94a3b8);
    --auth-border: rgba(255, 255, 255, 0.10);
    --auth-card-bg: rgba(255, 255, 255, 0.06);
    --auth-card-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
    --auth-pill-bg: rgba(255, 255, 255, 0.06);
    --auth-pill-border: rgba(255, 255, 255, 0.10);
    --auth-check-bg: rgba(0, 102, 153, 0.22);
    --auth-check-border: rgba(0, 102, 153, 0.40);
    --auth-illustration-bg: rgba(0, 0, 0, 0.18);
    --auth-illustration-border: rgba(255, 255, 255, 0.10);
    --auth-subtle-bg: var(--subtle-primary-bg, #121e2d);
    /* Neon glow colors (dark mode = stronger) */
    --auth-glow-1: rgba(0, 179, 255, 0.22);
    --auth-glow-2: rgba(124, 58, 237, 0.18);
}

@media (prefers-color-scheme: dark) {
    :root {
        --auth-bg: var(--hero-bg-solid, #0b1727);
        --auth-left-bg: rgba(11, 23, 39, 0.70);
        --auth-right-bg: var(--hero-bg-solid, #0b1727);
        --auth-grad-1: var(--grad-1, rgba(0, 102, 153, 0.20));
        --auth-grad-2: var(--grad-2, rgba(254, 134, 14, 0.15));
        --auth-glow-opacity: var(--glow-opacity, 1);
        --auth-text: var(--text-h1, #ffffff);
        --auth-muted: var(--text-p, #94a3b8);
        --auth-border: rgba(255, 255, 255, 0.10);
        --auth-card-bg: rgba(255, 255, 255, 0.06);
        --auth-card-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
        --auth-pill-bg: rgba(255, 255, 255, 0.06);
        --auth-pill-border: rgba(255, 255, 255, 0.10);
        --auth-check-bg: rgba(0, 102, 153, 0.22);
        --auth-check-border: rgba(0, 102, 153, 0.40);
        --auth-illustration-bg: rgba(0, 0, 0, 0.18);
        --auth-illustration-border: rgba(255, 255, 255, 0.10);
        --auth-subtle-bg: var(--subtle-primary-bg, #121e2d);
    }
}

/* ---------------------------------------
   Auth layout using the tokens
----------------------------------------*/

.auth-shell {
    color: var(--auth-text);
    transition: background 0.4s ease, color 0.3s ease;
}

.auth-right {
    background: var(--auth-right-bg);
    color: var(--auth-text);
    border-right: 1px solid var(--auth-border);
    display: flex;
    align-items: center;
    border-left: 1px solid var(--auth-border);
}

.auth-right-inner {
    max-width: 560px;
    width: 100%;
    margin: 0 auto;
    padding: 2rem 1.25rem;
}

.auth-card {
    background: var(--auth-card-bg);
    border: 1px solid var(--auth-border);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--auth-card-shadow);
    backdrop-filter: blur(12px);
}

.auth-card-body {
    padding: 1rem;
    max-height: calc(100vh - 220px);
    overflow: auto;
}

/* right side */
.auth-left {
    background: var(--auth-left-bg);
    color: var(--auth-text);
    transition: background 0.4s ease, color 0.3s ease;
    display: flex;
    align-items: center;
}


.auth-left-inner {
    height: 100%;
    display: grid;
    place-items: center;
    padding: 2rem 1.25rem;
}

.auth-hero-card {
    width: min(980px, 100%);
    padding: 1.5rem;
}

.auth-muted {
    color: var(--auth-muted);
}

/* theme-friendly badge */
.auth-badge {
    background: var(--auth-pill-bg);
    border: 1px solid var(--auth-pill-border);
    color: var(--auth-text);
}

.auth-illustration {
    padding: 1rem;
}

    .auth-illustration svg {
        width: 100%;
        height: auto;
        display: block;
    }

.auth-points .check-dot {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
}

.mini-pill {
    font-size: 0.85rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: var(--auth-pill-bg);
    border: 1px solid var(--auth-pill-border);
    color: var(--auth-text);
}

@media (max-width: 991.98px) {
    .auth-card-body {
        max-height: none;
        overflow: visible;
    }

    .auth-left {
        border-right: 0;
        border-bottom: 1px solid var(--auth-border);
    }
}

.info-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 4px 0;
    border-bottom: 1px solid rgba(0,0,0,0.03);
    gap: 15px; /* Minimum space between label and value */
}

    .info-row:last-child {
        border-bottom: none;
    }

    .info-row .label {
        color: #6c757d; /* text-muted */
        font-size: 0.8rem;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .info-row .value {
        font-size: 0.85rem;
        color: #212529;
        text-align: right;
        word-break: break-word; /* Prevents overflow */
    }

/* Tablet/Mobile optimization */
@@media (max-width: 576px) {
    .info-row {
        flex-direction: column; /* Stacks label on top of value only when really tight */
        gap: 0;
    }

        .info-row .value {
            text-align: left;
            width: 100%;
        }
}