:root {
    --vsu-deep: #17321A;
    --vsu-green: #146939;
    --vsu-leaf: #00954F;
    --vsu-gold: #FDC530;
    --vsu-corn: #FCD83D;
    --ivory: #F7F3E8;
    --paper: #FFFDF8;
    --text-dark: #102619;
    --text-muted: #5F6E63;
    --border-soft: rgba(23, 50, 26, 0.14);
    --danger: #dc3545;
    --success: #0f8a52;
    --font-sans: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    min-height: 100%;
    background: var(--paper);
}

body {
    min-height: 100vh;
    color: var(--text-dark);
    background: #fff;
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
}

button,
input {
    font: inherit;
}

.skip-link {
    position: fixed;
    top: -5rem;
    left: 1rem;
    z-index: 10;
    padding: .8rem 1rem;
    color: #fff;
    background: var(--vsu-deep);
    border-radius: .75rem;
}

.skip-link:focus {
    top: 1rem;
}

.login-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(24rem, 44%) 1fr;
}

.brand-panel {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 100vh;
    padding: clamp(2rem, 5vw, 4.8rem);
    color: #fff;
    background:
        radial-gradient(circle at 10% 12%, rgba(253,197,48,.10), transparent 16rem),
        linear-gradient(180deg, #102619 0%, #0f2e18 46%, #0b2a17 100%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: clamp(5rem, 15vh, 13rem);
}

.brand-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(16, 38, 25, .08), rgba(16, 38, 25, .78)),
        radial-gradient(circle at 20% 84%, rgba(253, 197, 48, .16), transparent 18rem);
}

.login-pattern {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .24;
    mix-blend-mode: screen;
    pointer-events: none;
    transform: scale(1.04);
}

.brand-header,
.brand-copy,
.access-path {
    position: relative;
    z-index: 1;
}

.brand-lockup,
.footer-brand {
    display: inline-flex;
    align-items: center;
    gap: .9rem;
    text-decoration: none;
}

.brand-logo {
    width: 4.6rem;
    height: 4.6rem;
    object-fit: contain;
    filter: drop-shadow(0 .8rem 1.2rem rgba(0,0,0,.18));
}

.brand-lockup span,
.footer-brand span {
    display: grid;
    line-height: 1.1;
}

.brand-lockup strong,
.footer-brand strong {
    font-size: 1.45rem;
    letter-spacing: -.03em;
}

.brand-lockup small,
.footer-brand small {
    margin-top: .3rem;
    color: rgba(255,255,255,.68);
    font-size: .76rem;
}

.eyebrow {
    color: var(--vsu-gold);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.brand-copy {
    max-width: 37rem;
}

.brand-copy h1 {
    margin: 1.45rem 0 1rem;
    font-size: clamp(4.4rem, 8.4vw, 7.9rem);
    line-height: .9;
    letter-spacing: -.075em;
    font-weight: 820;
}

.brand-copy p:not(.eyebrow) {
    max-width: 31rem;
    color: rgba(255,255,255,.75);
    line-height: 1.75;
}

.access-path {
    list-style: none;
    max-width: 30rem;
    display: grid;
    gap: 1.05rem;
}

.access-path li {
    position: relative;
    display: grid;
    grid-template-columns: 3rem 1fr;
    gap: 1rem;
    align-items: start;
}

.access-path li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 1.48rem;
    top: 2.65rem;
    bottom: -1.2rem;
    width: 1px;
    background: linear-gradient(var(--vsu-gold), rgba(253,197,48,.15));
}

.access-path span {
    width: 3rem;
    height: 3rem;
    display: grid;
    place-items: center;
    border: 1px solid rgba(253,197,48,.42);
    border-radius: 999px;
    color: var(--vsu-gold);
    background: rgba(255,255,255,.04);
    font-weight: 900;
    font-size: .76rem;
}

.access-path strong {
    display: block;
    margin: .12rem 0 .28rem;
    color: #fff;
}

.access-path small {
    color: rgba(255,255,255,.63);
    line-height: 1.5;
}

.auth-panel {
    min-height: 100vh;
    padding: clamp(1.35rem, 4vw, 4.5rem);
    display: grid;
    align-items: center;
    background:
        linear-gradient(135deg, rgba(253, 197, 48, .06), transparent 18rem),
        #fff;
}

.auth-inner {
    width: min(100%, 43rem);
    margin-inline: auto;
    padding: clamp(1rem, 2vw, 1.4rem);
    background: rgba(255,255,255,.72);
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: 2.3rem;
    color: var(--vsu-green);
    text-decoration: none;
    font-weight: 750;
}

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

.auth-heading {
    max-width: 34rem;
    margin-bottom: 1.35rem;
}

.auth-heading h2 {
    margin: .55rem 0 .55rem;
    font-size: clamp(2.4rem, 5vw, 4.4rem);
    line-height: 1;
    letter-spacing: -.055em;
    font-weight: 760;
}

.auth-heading p {
    color: var(--text-muted);
    line-height: 1.7;
}

.message-stack {
    display: grid;
    gap: .7rem;
    margin-bottom: 1rem;
}

.alert-message {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    padding: .95rem 1rem;
    border: 1px solid var(--border-soft);
    border-radius: 1rem;
    line-height: 1.45;
    font-weight: 650;
}

.alert-message.success {
    color: #075f3a;
    background: #e9f8ef;
    border-color: rgba(0,149,79,.2);
}

.alert-message.error {
    color: #9f1d30;
    background: #fff0f2;
    border-color: rgba(220,53,69,.2);
}

.google-action,
.secondary-google-action,
.password-login-btn {
    width: 100%;
    min-height: 3.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    border: 0;
    position: relative;
    overflow: hidden;
    border-radius: .18rem;
    text-decoration: none;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.google-action::before,
.secondary-google-action::before,
.password-login-btn::before {
    content: "";
    position: absolute;
    inset: -40% auto -40% -35%;
    width: 26%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.58), transparent);
    transform: skewX(-18deg);
    opacity: 0;
    pointer-events: none;
}

.google-action {
    color: #fff;
    background: var(--vsu-green);
    box-shadow: 0 1rem 2rem rgba(20,105,57,.18);
    font-size: 1rem;
    font-weight: 850;
}

.secondary-google-action {
    color: var(--vsu-deep);
    background: var(--vsu-gold);
    font-weight: 850;
}

.google-action:hover,
.secondary-google-action:hover,
.password-login-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 1.1rem 2.2rem rgba(20, 105, 57, .16);
}

.google-action:hover::before,
.secondary-google-action:hover::before,
.password-login-btn:hover::before {
    opacity: 1;
    animation: button-sheen .72s ease forwards;
}

.claim-box,
.security-note,
.password-access,
.login-footer {
    margin-top: 1rem;
    border: 1px solid var(--border-soft);
    background: rgba(255,253,248,.78);
    border-radius: 1.25rem;
}

.login-divider {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin: 1.05rem 0;
    color: var(--text-muted);
    font-size: .78rem;
    font-weight: 750;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.login-divider::before,
.login-divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: rgba(23, 50, 26, .13);
}

.claim-box {
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.claim-box strong {
    display: block;
    margin-bottom: .25rem;
}

.claim-box p,
.claim-panel p,
.security-note p,
.login-footer p,
.password-access small {
    color: var(--text-muted);
    line-height: 1.55;
    font-size: .9rem;
}

.claim-toggle {
    flex: 0 0 auto;
    padding: .82rem 1rem;
    border: 1px solid rgba(20,105,57,.25);
    border-radius: .85rem;
    color: var(--vsu-green);
    background: #fff;
    cursor: pointer;
    font-weight: 800;
}

.claim-toggle[aria-expanded="true"] {
    color: var(--text-dark);
    background: var(--vsu-gold);
    border-color: var(--vsu-gold);
}

.claim-panel {
    margin-top: .75rem;
    padding: 1.15rem;
    border: 1px solid rgba(253,197,48,.45);
    border-radius: 1.25rem;
    background: #fff9df;
}

.claim-panel h3 {
    margin-bottom: .4rem;
    font-size: 1.35rem;
}

.claim-requirements {
    margin: 1rem 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .75rem;
}

.claim-requirements div {
    padding: .85rem;
    border: 1px solid rgba(23,50,26,.1);
    border-radius: .9rem;
    background: rgba(255,255,255,.62);
}

.claim-requirements dt {
    color: var(--text-muted);
    font-size: .75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.claim-requirements dd {
    margin-top: .3rem;
    font-weight: 850;
}

.security-note {
    padding: 1rem;
    display: grid;
    grid-template-columns: 2.25rem 1fr;
    gap: .8rem;
    align-items: start;
}

.security-note i {
    width: 2.25rem;
    height: 2.25rem;
    display: grid;
    place-items: center;
    color: var(--vsu-green);
    background: #e9f8ef;
    border-radius: 999px;
}

.password-access {
    padding: 0;
    overflow: hidden;
}

.password-access summary {
    padding: 1rem;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
}

.password-access summary::-webkit-details-marker {
    display: none;
}

.password-access summary span {
    display: block;
    font-weight: 850;
}

.password-access summary::after {
    content: "+";
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: var(--vsu-green);
    background: #e9f8ef;
    font-weight: 900;
}

.password-access[open] summary::after {
    content: "−";
}

.password-form {
    padding: 0 1rem 1rem;
    display: grid;
    gap: 1rem;
}

.compact-password-form {
    padding: 0;
}

.form-group {
    display: grid;
    gap: .45rem;
}

.form-group label,
.label-row label {
    color: var(--text-dark);
    font-weight: 800;
}

.label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.label-row a {
    color: var(--vsu-green);
    text-decoration: none;
    font-size: .86rem;
    font-weight: 750;
}

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

.input-with-icon {
    position: relative;
}

.input-with-icon > i {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    color: #146939;
    opacity: .95;
    text-shadow: 0 1px 0 rgba(255,255,255,.85);
}

.input-with-icon:focus-within > i {
    color: #17321a;
    opacity: 1;
}

.form-control {
    width: 100%;
    min-height: 3.25rem;
    padding: .9rem 3rem .9rem 2.85rem;
    border: 1px solid var(--border-soft);
    border-radius: .18rem;
    color: var(--text-dark);
    background: #fff;
    outline: 0;
}

.form-control:focus {
    border-color: var(--vsu-green);
    box-shadow: 0 0 0 .24rem rgba(20,105,57,.1);
}

.password-toggle {
    position: absolute;
    right: .6rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2.2rem;
    height: 2.2rem;
    border: 0;
    border-radius: .18rem;
    color: var(--text-muted);
    background: transparent;
    cursor: pointer;
}

.password-toggle:hover {
    color: var(--vsu-green);
    background: #edf5ef;
}

.login-otp-inputs {
    display: grid;
    grid-template-columns: repeat(6, minmax(2.6rem, 1fr));
    gap: .55rem;
}

.login-otp-inputs .otp-box {
    width: 100%;
    min-height: 3.12rem;
    border: 1px solid rgba(255, 255, 255, .92);
    border-radius: 4px;
    color: var(--text-dark);
    background:
        linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.72));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .92),
        inset 0 -1px 0 rgba(20,105,57,.05),
        0 0 0 1px rgba(20,105,57,.055),
        0 10px 26px rgba(16, 38, 25, .065);
    font-size: 1.1rem;
    font-weight: 800;
    text-align: center;
    outline: 0;
    backdrop-filter: blur(18px) saturate(1.12);
}

.login-otp-inputs .otp-box:focus {
    border-color: rgba(16, 38, 25, .48);
    box-shadow:
        inset 2px 0 0 rgba(16, 38, 25, .72),
        0 0 0 1px rgba(253,197,48,.26),
        0 0 18px rgba(253,197,48,.18),
        0 12px 30px rgba(16,38,25,.1);
}

.reset-code-note {
    color: var(--text-muted);
    font-size: .84rem;
}

.reset-code-note strong {
    color: var(--vsu-green);
}

.reset-code-note strong.is-ending {
    color: #b7791f;
}

.reset-code-note strong.is-expired {
    color: #9f1d30;
}

.password-match-note {
    min-height: 1.2rem;
    color: var(--text-muted);
    font-size: .84rem;
    font-weight: 700;
}

.password-match-note.is-match {
    color: #146939;
}

.password-match-note.is-mismatch {
    color: #9f1d30;
}

.password-login-btn {
    color: var(--text-dark);
    background: var(--vsu-gold);
    font-weight: 850;
}

@keyframes button-sheen {
    from {
        left: -35%;
    }
    to {
        left: 112%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .google-action::before,
    .secondary-google-action::before,
    .password-login-btn::before {
        animation: none !important;
        opacity: 0 !important;
    }

    .google-action,
    .secondary-google-action,
    .password-login-btn,
    .form-control {
        transition: none !important;
    }
}

.login-footer {
    padding: 1rem;
    text-align: center;
}

.login-footer .footer-brand {
    justify-content: center;
    margin-bottom: .85rem;
}

.login-footer img {
    width: 2.6rem;
    height: 2.6rem;
    object-fit: contain;
}

.login-footer strong {
    color: var(--text-dark);
}

.login-footer small {
    color: var(--text-muted);
}

.login-footer p {
    margin-bottom: .35rem;
}

.login-footer p:last-child {
    margin-bottom: 0;
}

.login-footer a {
    color: var(--vsu-green);
    font-weight: 800;
    text-decoration: none;
}

.login-footer a:hover {
    text-decoration: underline;
}

:focus-visible {
    outline: 2px solid rgba(20,105,57,.55);
    outline-offset: 2px;
}

.form-control:focus-visible {
    outline: none;
}

.is-loading {
    pointer-events: none;
    opacity: .78;
}

@media (max-width: 980px) {
    .login-shell {
        grid-template-columns: 1fr;
    }

    .brand-panel {
        min-height: auto;
        padding: 1.4rem;
        gap: 1.6rem;
    }

    .brand-copy h1 {
        font-size: clamp(2.7rem, 13vw, 4.2rem);
    }

    .access-path {
        max-width: none;
        grid-template-columns: repeat(4, 1fr);
        gap: .75rem;
    }

    .access-path li {
        grid-template-columns: 1fr;
        gap: .55rem;
    }

    .access-path li:not(:last-child)::after {
        display: none;
    }

    .access-path small {
        display: none;
    }

    .auth-panel {
        min-height: auto;
        padding: 1.4rem;
    }
}

@media (max-width: 640px) {
    .brand-lockup strong {
        font-size: 1.05rem;
    }

    .brand-logo {
        width: 3.1rem;
        height: 3.1rem;
    }

    .brand-copy p:not(.eyebrow) {
        font-size: .94rem;
    }

    .access-path {
        grid-template-columns: repeat(2, 1fr);
    }

    .claim-box,
    .password-access summary,
    .label-row {
        align-items: stretch;
        flex-direction: column;
    }

    .claim-toggle {
        width: 100%;
    }

    .claim-requirements {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .001ms !important;
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Rectangular VSU-inspired authentication redesign */
body {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: clamp(.75rem, 2vw, 1.5rem);
    position: relative;
    overflow-x: hidden;
    background:
        url("../images/vsu-alangalang-login-bg-wide.jpg") center / cover fixed no-repeat;
}

body::before {
    display: none;
}

.login-shell {
    position: relative;
    z-index: 1;
    width: min(100%, 1240px);
    min-height: min(720px, calc(100vh - 3rem));
    display: grid;
    grid-template-columns: minmax(22rem, 42%) 1fr;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 4px;
    overflow: hidden;
    background: rgba(255, 255, 255, .34);
    border-color: rgba(255, 255, 255, .48);
    box-shadow: 0 22px 64px rgba(16, 38, 25, .28);
    backdrop-filter: blur(18px) saturate(1.08);
}

.photo-credit {
    position: fixed;
    left: 1rem;
    bottom: .75rem;
    z-index: 2;
    margin: 0;
    padding: .35rem .55rem;
    color: rgba(255,255,255,.92);
    background: rgba(16, 38, 25, .46);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 3px;
    backdrop-filter: blur(8px);
    font-size: .72rem;
    font-weight: 650;
}

.brand-panel {
    min-height: auto;
    padding: clamp(2rem, 3.5vw, 3.7rem);
    border-radius: 0;
    background:
        radial-gradient(circle at 18% 12%, rgba(253, 197, 48, .12), transparent 15rem),
        linear-gradient(180deg, rgba(23, 50, 26, .78) 0%, rgba(16, 38, 25, .84) 100%);
    justify-content: flex-start;
    gap: clamp(5rem, 12vh, 8.5rem);
}

.brand-panel::after {
    background:
        linear-gradient(180deg, rgba(16, 38, 25, .05), rgba(16, 38, 25, .5)),
        radial-gradient(circle at 16% 82%, rgba(253, 197, 48, .13), transparent 18rem);
}

.login-pattern {
    opacity: .2;
}

.brand-copy {
    max-width: min(100%, 38rem);
    margin-top: 0;
}

.brand-copy h1 {
    max-width: 8.6ch;
    margin-top: clamp(1rem, 2.2vh, 1.5rem);
    font-size: clamp(3.25rem, 4.7vw, 4.85rem);
    letter-spacing: -.058em;
    line-height: .98;
    overflow-wrap: normal;
}

.auth-panel {
    min-height: auto;
    padding: clamp(2rem, 4.2vw, 4rem);
    align-items: center;
    background:
        linear-gradient(135deg, rgba(20, 105, 57, .025), transparent 18rem),
        rgba(255, 255, 255, .66);
    backdrop-filter: blur(18px) saturate(1.12);
}

.auth-inner {
    width: min(100%, 34rem);
    padding: 0;
    background: transparent;
}

.back-link {
    margin-bottom: clamp(1.3rem, 3.2vh, 2.35rem);
    color: var(--vsu-green);
    font-size: .92rem;
    text-decoration: none;
}

.back-link:hover {
    color: var(--vsu-deep);
    text-decoration: none;
}

.auth-heading {
    margin-bottom: 1.35rem;
}

.auth-heading h2 {
    font-size: clamp(2.15rem, 3.5vw, 3.25rem);
    font-weight: 760;
    letter-spacing: -.045em;
}

.google-action {
    min-height: 3.15rem;
    color: var(--text-dark);
    background:
        linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.72));
    border: 1px solid rgba(255, 255, 255, .92);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9),
        0 0 0 1px rgba(20,105,57,.06),
        0 10px 28px rgba(16,38,25,.07);
    border-radius: 4px;
    box-shadow: none;
    font-weight: 760;
}

.google-g {
    width: 1.18rem;
    height: 1.18rem;
    flex: 0 0 auto;
}

.google-action:hover {
    border-color: rgba(253, 197, 48, .78);
    background:
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.82));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.95),
        0 0 0 1px rgba(253,197,48,.28),
        0 12px 32px rgba(16,38,25,.1);
}

.login-divider {
    margin: 1.25rem 0;
}

.compact-password-form {
    display: grid;
    gap: 1rem;
}

.form-group {
    gap: .45rem;
}

.form-group label,
.label-row label {
    font-size: .88rem;
    font-weight: 760;
}

.label-row a {
    color: var(--vsu-green);
    font-size: .84rem;
}

.form-control {
    min-height: 3.12rem;
    border-radius: 4px;
    color: var(--text-dark);
    background:
        linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.72));
    border: 1px solid rgba(255, 255, 255, .92);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .92),
        inset 0 -1px 0 rgba(20,105,57,.05),
        0 0 0 1px rgba(20,105,57,.055),
        0 10px 26px rgba(16, 38, 25, .065);
    backdrop-filter: blur(18px) saturate(1.12);
}

.form-control:focus {
    border-color: rgba(16, 38, 25, .48);
    background:
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.84));
    box-shadow:
        inset 2px 0 0 rgba(16, 38, 25, .72),
        0 0 0 1px rgba(253,197,48,.26),
        0 0 18px rgba(253,197,48,.18),
        0 12px 30px rgba(16,38,25,.1);
}

.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text-dark);
    caret-color: var(--text-dark);
    border-color: rgba(23, 50, 26, .24);
    box-shadow:
        inset 0 0 0 1000px rgba(255, 255, 255, .88),
        inset 2px 0 0 rgba(16, 38, 25, .46),
        0 0 0 1px rgba(20,105,57,.08);
    transition: background-color 9999s ease-in-out 0s;
}

.password-toggle {
    border-radius: 4px;
}

.password-login-btn {
    min-height: 3.15rem;
    color: #fff;
    background:
        linear-gradient(180deg, rgba(255,255,255,.08), transparent),
        var(--vsu-green);
    border: 1px solid rgba(23, 50, 26, .16);
    border-radius: 4px;
    font-weight: 800;
    box-shadow: 0 .85rem 1.8rem rgba(20, 105, 57, .2);
}

.password-login-btn:hover {
    border-color: rgba(253, 197, 48, .9);
    background:
        linear-gradient(180deg, rgba(253, 197, 48, .16), transparent),
        #115c32;
}

.google-action::before,
.password-login-btn::before {
    width: 18%;
    background: linear-gradient(90deg, transparent, rgba(253, 197, 48, .24), rgba(255,255,255,.48), transparent);
}

.alert-message {
    border-radius: 4px;
}

.claim-shell .brand-copy h1 {
    max-width: 9ch;
}

@media (max-width: 980px) {
    body {
        display: block;
        padding: 0;
        background: url("../images/vsu-alangalang-login-bg-wide.jpg") center / cover fixed no-repeat;
    }

    body::before {
        display: none;
    }

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

    .brand-panel {
        padding: 1.35rem;
    }

    .brand-copy {
        margin-top: 3rem;
    }

    .brand-copy h1 {
        max-width: 11ch;
        font-size: clamp(3rem, 13vw, 4.6rem);
    }

    .auth-panel {
        padding: 1.35rem;
    }

    .auth-inner {
        width: 100%;
    }

    .photo-credit {
        position: static;
        margin: .75rem 1rem 1rem;
        display: inline-block;
    }
}

@media (max-width: 560px) {
    .brand-copy {
        margin-top: 2rem;
    }

    .auth-heading h2 {
        font-size: 2.45rem;
    }

    .label-row {
        align-items: flex-start;
    }
}

/* ============================================================
   EduSchedX Login v9 - Bigger/brighter floating logo + bright
   two-node circuit + centered yellow security note + mild
   whole-page blur. Scoped under `.login-v9` / body.login-page
   so the shared login.css keeps reset-password, forgot-password,
   and faculty claim pages intact. Form untouched.
   ============================================================ */
body.login-page {
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Full-page treatment of the one continuous VSU photo.
   Mild blur only; no left rectangle, no card between logo/form. */
body.login-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: rgba(8, 39, 24, .05);
    -webkit-backdrop-filter:
        blur(2.2px)
        saturate(123%)
        contrast(104%)
        brightness(92%);
    backdrop-filter:
        blur(2.2px)
        saturate(123%)
        contrast(104%)
        brightness(92%);
}

/* STAGE: vertical column so the security text sits CENTERED
   BELOW both the logo and the form (not fixed, not right). */
.login-page .login-stage {
    position: relative;
    z-index: 1;
    min-height: calc(100svh - 3rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 0 18px;
}

/* Main logo + form composition ~90% viewport, no zoom/scale. */
.login-v9.login-shell {
    position: relative;
    width: min(90vw, 1460px);
    min-height: min(82svh, 800px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(min(360px, 30vw), .92fr) minmax(min(500px, 46vw), 560px);
    align-items: center;
    justify-content: center;
    gap: clamp(76px, 8vw, 145px);
    padding: clamp(24px, 3vw, 46px);
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Keep the approved form visually unchanged; only placement. */
.login-v9 .auth-panel {
    position: relative;
    z-index: 7;
    justify-self: end;
    width: min(100%, 540px);
    margin: 0;
}

/* LEFT BRAND AREA: no card/panel behind the logo. */
.login-v9 .brand-panel {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 520px;
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    overflow: visible;
    gap: 0;
}

.login-v9 .brand-panel::after {
    display: none;
}

.login-v9 .login-pattern {
    display: none;
}

.login-v9 .brand-copy {
    display: none;
}

.login-v9 .brand-header {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 370px;
    overflow: visible;
}

.login-v9 .brand-lockup {
    position: relative;
    z-index: 6;
    display: grid;
    place-items: center;
    width: 330px;
    height: 330px;
    background: transparent;
    border: 0;
    box-shadow: none;
    text-decoration: none;
    overflow: visible;
}

/* Logo only: hide the old small text beside it. */
.login-v9 .brand-lockup > span {
    display: none;
}

/* ~272px logo, visibly highlighted even before hover. */
.login-v9 .brand-logo {
    position: relative;
    z-index: 8;
    width: 272px;
    height: 272px;
    object-fit: contain;
    filter:
        saturate(122%)
        drop-shadow(0 20px 40px rgba(8, 39, 24, .46))
        drop-shadow(0 0 16px rgba(253, 197, 48, .52))
        drop-shadow(0 0 34px rgba(253, 197, 48, .28));
    transition:
        transform .22s ease,
        filter .22s ease;
}

/* Bright static light field behind the logo - not a card. */
.login-v9 .brand-lockup::before {
    content: "";
    position: absolute;
    z-index: 4;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(255, 216, 74, .30) 0%,
            rgba(253, 197, 48, .18) 34%,
            rgba(253, 197, 48, .075) 55%,
            transparent 75%
        );
    box-shadow:
        0 0 34px rgba(255, 216, 74, .26),
        0 0 72px rgba(253, 197, 48, .24),
        0 0 115px rgba(43, 148, 88, .10);
    pointer-events: none;
}

.login-v9 .brand-lockup:hover .brand-logo,
.login-v9 .brand-lockup:focus-visible .brand-logo {
    transform: translateY(-4px) scale(1.025);
    filter:
        saturate(128%)
        drop-shadow(0 23px 44px rgba(8, 39, 24, .50))
        drop-shadow(0 0 22px rgba(255, 216, 74, .66))
        drop-shadow(0 0 42px rgba(253, 197, 48, .34));
}

/* BRIGHT CURVED IT/CIRCUIT LINK - TWO NODES ONLY, behind logo/form. */
.login-v9 .login-circuit-link {
    position: absolute;
    z-index: 6;
    left: 20%;
    top: 34%;
    width: 53%;
    height: 31%;
    overflow: visible;
    pointer-events: none;
}

.login-v9 .circuit-shadow {
    fill: none;
    stroke: rgba(8, 39, 24, .30);
    stroke-width: 7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.login-v9 .circuit-main {
    fill: none;
    stroke: #2FAA67;
    stroke-width: 3.1;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter:
        drop-shadow(0 0 4px rgba(43, 148, 88, .34))
        drop-shadow(0 1px 2px rgba(8, 39, 24, .18));
}

/* yellow electrical trace beside the green current */
.login-v9 .circuit-electric {
    fill: none;
    stroke: #FFD84A;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 10 11;
    filter:
        drop-shadow(0 0 5px rgba(255, 216, 74, .52));
}

/* outer electrical rings + bright yellow nodes with dark-green
   centers - exactly two nodes */
.login-v9 .node-halo {
    fill: rgba(253, 197, 48, .13);
    stroke: rgba(255, 216, 74, .30);
    stroke-width: 2;
    filter: drop-shadow(0 0 10px rgba(255, 216, 74, .44));
}

.login-v9 .circuit-node {
    fill: #FFD84A;
    stroke: rgba(255, 255, 255, .98);
    stroke-width: 3.2;
    filter:
        drop-shadow(0 0 7px rgba(255, 216, 74, .72))
        drop-shadow(0 0 16px rgba(253, 197, 48, .36));
}

.login-v9 .circuit-node-inner {
    fill: #082718;
}

/* SECURITY NOTE: centered BELOW both logo and form.
   Yellow text, tiny 13px shield only. */
.login-page .login-security-note {
    position: relative;
    z-index: 8;
    margin: -4px auto 0;
    padding: 6px 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #FFD84A;
    background: rgba(8, 39, 24, .24);
    border: 1px solid rgba(255, 216, 74, .18);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    font-size: .78rem;
    font-weight: 650;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, .34),
        0 0 7px rgba(253, 197, 48, .18);
}

/* Tiny icon only - never oversized. */
.login-page .login-security-note .security-icon {
    width: 13px;
    height: 13px;
    flex: 0 0 13px;
    display: block;
    color: #FFD84A;
}

.login-page .login-security-note .brand-x {
    color: #FFE377;
    font-weight: 850;
}

/* MOBILE */
@media (max-width: 900px) {
    body.login-page::before {
        background: rgba(8, 39, 24, .055);
        -webkit-backdrop-filter:
            blur(1.6px)
            saturate(118%)
            contrast(103%)
            brightness(93%);
        backdrop-filter:
            blur(1.6px)
            saturate(118%)
            contrast(103%)
            brightness(93%);
    }

    .login-page .login-stage {
        min-height: 100svh;
        justify-content: center;
        padding: 18px 0 14px;
    }

    .login-v9.login-shell {
        width: min(94vw, 620px);
        min-height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 16px 18px 14px;
    }

    .login-v9 .brand-panel {
        width: 100%;
        min-height: 205px;
    }

    .login-v9 .brand-header {
        min-height: 194px;
    }

    .login-v9 .brand-lockup {
        width: 196px;
        height: 196px;
    }

    .login-v9 .brand-logo {
        width: 164px;
        height: 164px;
    }

    .login-v9 .brand-lockup::before {
        width: 154px;
        height: 154px;
        box-shadow:
            0 0 28px rgba(255, 216, 74, .22),
            0 0 50px rgba(253, 197, 48, .18),
            0 0 70px rgba(43, 148, 88, .07);
    }

    /* compact curved vertical electrical connector */
    .login-v9 .login-circuit-link {
        left: 50%;
        top: 188px;
        width: 100px;
        height: 84px;
        transform: translateX(-50%);
    }

    .login-v9 .auth-panel {
        width: min(100%, 440px);
        margin: 0 auto;
    }

    .login-page .login-security-note {
        width: min(calc(100% - 32px), 440px);
        margin-top: 8px;
        white-space: normal;
        font-size: .70rem;
        padding: 6px 9px;
    }
}

@media (max-width: 480px) {
    .login-v9 .brand-panel {
        min-height: 184px;
    }

    .login-v9 .brand-header {
        min-height: 174px;
    }

    .login-v9 .brand-lockup {
        width: 176px;
        height: 176px;
    }

    .login-v9 .brand-logo {
        width: 146px;
        height: 146px;
    }

    .login-v9 .brand-lockup::before {
        width: 138px;
        height: 138px;
    }

    .login-v9 .login-circuit-link {
        top: 168px;
        width: 92px;
        height: 76px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .login-v9 .brand-logo {
        transition: none !important;
    }
}



/* ============================================================
   EDUSCHEDX OLD LOGIN - MOBILE RESTORE / OVERFLOW FIX
   Keeps the existing desktop login layout intact.
   Only hardens the login page for phones/tablets and in-app browsers.
   ============================================================ */

.login-page,
.login-page * {
    box-sizing: border-box;
}

.login-page {
    max-width: 100%;
    overflow-x: hidden;
}

.alert-message {
    transition: opacity 300ms ease, transform 300ms ease;
}

.alert-message.is-dismissing {
    opacity: 0;
    transform: translateY(-4px);
}

@media (max-width: 900px) {
    html,
    body.login-page {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: hidden !important;
    }

    body.login-page {
        min-height: 100svh;
        display: block !important;
        padding: 0 !important;
        background-position: center;
        background-size: cover;
        background-attachment: scroll !important;
    }

    .login-page .login-stage {
        width: 100%;
        max-width: 100%;
        min-height: 100svh;
        padding: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow-x: hidden;
    }

    /* Never carry desktop compact scaling into a phone viewport. */
    .login-page .edx-login-compact-target,
    .login-page .login-shell,
    .login-page .login-v9.login-shell {
        transform: none !important;
        transform-origin: center !important;
    }

    /* Restore the original compact login as one centered mobile card. */
    .login-page .login-v9.login-shell {
        width: min(calc(100% - 8px), 520px) !important;
        max-width: 520px !important;
        min-width: 0 !important;
        min-height: auto !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        overflow: hidden !important;

        border: 1px solid rgba(255,255,255,.55) !important;
        border-radius: 16px !important;
        background: rgba(248,248,244,.88) !important;
        box-shadow: 0 18px 48px rgba(16,38,25,.22) !important;
        -webkit-backdrop-filter: blur(14px) saturate(1.06) !important;
        backdrop-filter: blur(14px) saturate(1.06) !important;
    }

    /* Compact logo header above the old login form instead of the huge desktop brand area. */
    .login-page .login-v9 .brand-panel {
        width: 100% !important;
        min-height: auto !important;
        padding: 16px 18px 8px !important;
        display: block !important;
        overflow: visible !important;
        background: transparent !important;
    }

    .login-page .login-v9 .brand-header {
        width: 100% !important;
        min-height: 0 !important;
        display: block !important;
    }

    .login-page .login-v9 .brand-lockup {
        width: auto !important;
        height: auto !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
    }

    .login-page .login-v9 .brand-lockup::before {
        display: none !important;
    }

    .login-page .login-v9 .brand-lockup > span {
        display: grid !important;
        color: var(--vsu-deep) !important;
    }

    .login-page .login-v9 .brand-lockup strong {
        color: var(--vsu-deep) !important;
        font-size: 1.08rem !important;
        line-height: 1.1 !important;
    }

    .login-page .login-v9 .brand-lockup small {
        margin-top: 2px !important;
        color: var(--text-muted) !important;
        font-size: .72rem !important;
    }

    .login-page .login-v9 .brand-logo {
        width: 54px !important;
        height: 54px !important;
        flex: 0 0 54px !important;
        filter: drop-shadow(0 5px 12px rgba(16,38,25,.16)) !important;
        transform: none !important;
    }

    .login-page .login-v9 .brand-copy,
    .login-page .login-v9 .login-circuit-link {
        display: none !important;
    }

    /* Original login form, now fluid instead of desktop-width/scaled. */
    .login-page .login-v9 .auth-panel {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 10px 18px 20px !important;
        display: block !important;
        background: transparent !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    .login-page .auth-inner {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .login-page .back-link {
        margin-bottom: 16px !important;
        font-size: .78rem !important;
    }

    .login-page .auth-heading {
        margin-bottom: 14px !important;
    }

    .login-page .auth-heading .eyebrow {
        font-size: .66rem !important;
    }

    .login-page .auth-heading h2 {
        margin: 5px 0 0 !important;
        font-size: clamp(1.9rem, 9vw, 2.45rem) !important;
        line-height: 1.02 !important;
        letter-spacing: -.04em !important;
    }

    .login-page .message-stack,
    .login-page .google-action,
    .login-page .password-form,
    .login-page .form-group,
    .login-page .input-with-icon,
    .login-page .form-control,
    .login-page .password-login-btn {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .login-page .google-action,
    .login-page .form-control,
    .login-page .password-login-btn {
        min-height: 50px !important;
    }

    .login-page .label-row {
        width: 100%;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
    }

    .login-page .label-row a {
        flex: 0 0 auto;
        white-space: nowrap;
        font-size: .78rem !important;
    }

    .login-page .form-control {
        padding-right: 44px !important;
    }

    .login-page .password-toggle {
        right: 7px !important;
    }

    .login-page .login-divider {
        margin: 14px 0 !important;
    }

    /* Keep ancillary text inside the viewport. */
    .login-page .login-security-note {
        position: static !important;
        width: min(calc(100% - 24px), 520px) !important;
        max-width: 520px !important;
        margin: 8px auto 12px !important;
        white-space: normal !important;
        font-size: .69rem !important;
    }

    .login-page .photo-credit {
        position: static !important;
        max-width: calc(100% - 24px);
        margin: 0 12px 12px !important;
        font-size: .62rem !important;
    }

    /* Forgot-password face must also become fluid on mobile. */
    .login-page .edx-forgot-face {
        width: 100% !important;
        max-width: 100% !important;
        padding: 22px 18px !important;
    }

    .login-page .edx-forgot-inner {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .login-page .edx-forgot-title {
        font-size: clamp(1.8rem, 8vw, 2.25rem) !important;
    }
}

@media (max-width: 480px) {
    .login-page .login-stage {
        padding: 8px !important;
    }

    .login-page .login-v9.login-shell {
        width: 100% !important;
        border-radius: 14px !important;
    }

    .login-page .login-v9 .brand-panel {
        padding: 13px 14px 6px !important;
    }

    .login-page .login-v9 .brand-logo {
        width: 48px !important;
        height: 48px !important;
        flex-basis: 48px !important;
    }

    .login-page .login-v9 .brand-lockup strong {
        font-size: 1rem !important;
    }

    .login-page .login-v9 .auth-panel {
        padding: 8px 14px 17px !important;
    }

    .login-page .auth-heading h2 {
        font-size: 1.95rem !important;
    }

    .login-page .google-action,
    .login-page .form-control,
    .login-page .password-login-btn {
        min-height: 48px !important;
    }

    .login-page .label-row {
        gap: 8px !important;
    }

    .login-page .label-row label,
    .login-page .label-row a,
    .login-page .form-group label {
        font-size: .76rem !important;
    }
}


/* ============================================================
   EDUSCHEDX LOGIN / FORGOT PASSWORD - GLASS FORM REFINEMENT
   Design-only. Authentication fields/routes/logic are unchanged.
   ============================================================ */

:root {
    --edx-glass-green: #146939;
    --edx-glass-dark: #17321A;
    --edx-glass-yellow: #FDC530;
    --edx-glass-ivory: #F7F3E8;
    --edx-glass-white: #FFFFFF;
}

/* Full-page Aaron Marañon campus background. */
.login-page.login-glass-page,
.login-body.login-glass-page {
    min-height: 100svh;
    width: 100%;
    margin: 0;
    color: var(--edx-glass-white);
    background:
        linear-gradient(
            rgba(8, 33, 24, .34),
            rgba(8, 33, 24, .46)
        ),
        url("../images/vsu-alangalang-login-bg-wide.jpg") center / cover no-repeat fixed !important;
    overflow-x: hidden;
}

/* Keep campus visible; let the form be the strong foreground object. */
.login-glass-page .login-stage {
    min-height: 100svh;
    background: transparent !important;
}

/* Main glass surface used by Login + Forgot Password. */
.login-glass-page .auth-panel,
.login-glass-page .auth-reset-shell .auth-panel {
    color: #F8FAF8;
    background:
        linear-gradient(
            145deg,
            rgba(24, 36, 32, .58) 0%,
            rgba(44, 48, 46, .44) 48%,
            rgba(27, 38, 33, .55) 100%
        ) !important;
    border: 1px solid rgba(255, 255, 255, .25) !important;
    border-radius: 22px !important;
    box-shadow:
        0 24px 60px rgba(0, 0, 0, .24),
        inset 0 1px 0 rgba(255, 255, 255, .12) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.08);
    backdrop-filter: blur(18px) saturate(1.08);
    overflow: hidden;
}

/* Preserve exact form structure, only update visual contrast. */
.login-glass-page .auth-inner {
    color: #F8FAF8;
}

.login-glass-page .auth-heading h2,
.login-glass-page .auth-heading .eyebrow,
.login-glass-page .auth-panel label,
.login-glass-page .back-link {
    color: #F8FAF8 !important;
}

.login-glass-page .auth-heading .eyebrow {
    color: #FDC530 !important;
}

.login-glass-page .back-link:hover,
.login-glass-page .back-link:focus-visible,
.login-glass-page .label-row a {
    color: #FDC530 !important;
}

/* Inputs stay in the same order/behavior, but become subtle glass fields. */
.login-glass-page .form-control,
.login-glass-page .google-action {
    color: #17231C !important;
    background: rgba(255, 255, 255, .82) !important;
    border: 1px solid rgba(255, 255, 255, .54) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.42) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.login-glass-page .form-control::placeholder {
    color: rgba(29, 42, 34, .60) !important;
}

.login-glass-page .input-with-icon > i,
.login-glass-page .password-toggle {
    color: #29483A !important;
}

.login-glass-page .form-control:focus {
    border-color: rgba(253, 197, 48, .88) !important;
    box-shadow:
        0 0 0 3px rgba(253, 197, 48, .14),
        inset 0 1px 0 rgba(255,255,255,.52) !important;
}

/* Primary form action stays academic/minimal. */
.login-glass-page .password-login-btn {
    color: #FFFFFF !important;
    background: #146939 !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 9px !important;
    box-shadow: 0 10px 22px rgba(8, 62, 35, .22) !important;
}

.login-glass-page .password-login-btn:hover,
.login-glass-page .password-login-btn:focus-visible {
    background: #1C7B48 !important;
    transform: translateY(-1px);
}

/* Divider still reads clearly through the glass. */
.login-glass-page .login-divider {
    color: rgba(255,255,255,.76) !important;
}
.login-glass-page .login-divider::before,
.login-glass-page .login-divider::after {
    border-color: rgba(255,255,255,.28) !important;
}
.login-glass-page .login-divider span {
    color: rgba(255,255,255,.84) !important;
    background: transparent !important;
}

/*
 * Security note:
 * plain static text only - no icon, box, border, ticker, animation.
 */
.login-glass-page .login-security-note {
    position: static !important;
    display: block !important;
    width: auto !important;
    max-width: 560px;
    margin: 10px auto 0 !important;
    padding: 0 !important;
    color: rgba(255,255,255,.94) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-size: .76rem !important;
    font-weight: 650 !important;
    line-height: 1.45;
    text-align: center;
    white-space: normal !important;
    overflow: visible !important;
    animation: none !important;
    transform: none !important;
}

.login-glass-page .login-security-note .security-icon {
    display: none !important;
}

.login-glass-page .login-security-note .brand-x {
    color: #FDC530 !important;
    font-weight: 850;
}

/* Aaron Marañon credit remains subtle and outside the form. */
.login-glass-page .photo-credit {
    color: rgba(255,255,255,.82) !important;
    background: rgba(7, 31, 23, .28) !important;
    border: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

/* Forgot Password separate page uses the same glass form language. */
.forgot-password-page .auth-reset-shell {
    min-height: 100svh;
    width: min(940px, calc(100% - 32px));
    margin: 0 auto;
    display: grid;
    align-items: center;
    gap: 24px;
    background: transparent !important;
    box-shadow: none !important;
}

.forgot-password-page .auth-reset-shell .auth-panel {
    width: min(100%, 500px);
    justify-self: end;
    padding: 28px !important;
}

.forgot-password-page .brand-panel {
    background: rgba(7, 37, 26, .26) !important;
    border-radius: 22px;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* ============================================================
   MOBILE: ONLY THE GLASS FORM + CAMPUS BACKGROUND
   ============================================================ */
@media (max-width: 767.98px) {
    .login-page.login-glass-page,
    .login-body.login-glass-page {
        min-height: 100svh;
        background:
            linear-gradient(
                rgba(7, 31, 23, .34),
                rgba(7, 31, 23, .50)
            ),
            url("../images/vsu-alangalang-login-bg-wide.jpg") center / cover no-repeat scroll !important;
    }

    .login-glass-page .login-stage {
        min-height: 100svh !important;
        width: 100% !important;
        padding: 16px !important;
        display: grid !important;
        place-items: center !important;
    }

    /*
     * User requested mobile to show ONLY the form over the background.
     * Hide branding/visual side panels and circuit decoration.
     */
    .login-page.login-glass-page .brand-panel,
    .login-page.login-glass-page .login-circuit-link,
    .forgot-password-page .brand-panel {
        display: none !important;
    }

    .login-page.login-glass-page .login-shell,
    .login-page.login-glass-page .login-v9.login-shell,
    .forgot-password-page .auth-reset-shell {
        width: min(100%, 440px) !important;
        max-width: 440px !important;
        min-width: 0 !important;
        min-height: auto !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: block !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        overflow: visible !important;
        transform: none !important;
    }

    .login-page.login-glass-page .auth-panel,
    .forgot-password-page .auth-reset-shell .auth-panel {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 22px 18px !important;
        border-radius: 18px !important;
        background:
            linear-gradient(
                145deg,
                rgba(24, 33, 29, .60),
                rgba(45, 47, 45, .48)
            ) !important;
        -webkit-backdrop-filter: blur(16px) saturate(1.06);
        backdrop-filter: blur(16px) saturate(1.06);
    }

    .login-glass-page .auth-inner {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .login-glass-page .auth-heading h2 {
        font-size: clamp(1.75rem, 8vw, 2.15rem) !important;
    }

    .login-glass-page .google-action,
    .login-glass-page .form-control,
    .login-glass-page .password-login-btn {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 50px !important;
    }

    .login-glass-page .login-security-note {
        width: min(calc(100vw - 40px), 420px) !important;
        margin: 10px auto 0 !important;
        color: #FFFFFF !important;
        font-size: .72rem !important;
    }

    .login-glass-page .photo-credit {
        position: static !important;
        width: fit-content !important;
        max-width: calc(100vw - 32px) !important;
        margin: 8px auto 12px !important;
    }
}

@media (max-width: 390px) {
    .login-glass-page .login-stage {
        padding: 10px !important;
    }

    .login-page.login-glass-page .auth-panel,
    .forgot-password-page .auth-reset-shell .auth-panel {
        padding: 19px 14px !important;
        border-radius: 16px !important;
    }

    .login-glass-page .auth-heading h2 {
        font-size: 1.8rem !important;
    }

    .login-glass-page .google-action,
    .login-glass-page .form-control,
    .login-glass-page .password-login-btn {
        min-height: 48px !important;
    }
}


/* ============================================================
   FINAL LOGIN / FORGOT GLASS UI CONSISTENCY
   UI ONLY - no route/form/auth logic changes.
   ============================================================ */

:root {
    --edx-glass-panel-a: rgba(24, 36, 32, .44);
    --edx-glass-panel-b: rgba(42, 47, 44, .32);
    --edx-glass-panel-c: rgba(25, 37, 32, .42);

    --edx-glass-field: rgba(247, 250, 247, .62);
    --edx-glass-field-border: rgba(255,255,255,.42);
}

/* Make the current Login glass a little clearer without moving anything. */
.login-glass-page .auth-panel,
.forgot-password-page .auth-panel {
    background:
        linear-gradient(
            145deg,
            var(--edx-glass-panel-a) 0%,
            var(--edx-glass-panel-b) 50%,
            var(--edx-glass-panel-c) 100%
        ) !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    -webkit-backdrop-filter: blur(17px) saturate(1.05) !important;
    backdrop-filter: blur(17px) saturate(1.05) !important;
    box-shadow:
        0 22px 56px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.10) !important;
}

/* Fields are glass/translucent instead of solid white. */
.login-glass-page .form-control,
.login-glass-page .google-action,
.forgot-password-page .form-control {
    background: var(--edx-glass-field) !important;
    border-color: var(--edx-glass-field-border) !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.02) !important;
    backdrop-filter: blur(10px) saturate(1.02) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.32),
        0 3px 12px rgba(0,0,0,.035) !important;
}

/* Direct Forgot Password page: same centered form width and spacing as Login. */
.forgot-password-page .auth-reset-shell {
    min-height: 100svh !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 24px !important;
    display: grid !important;
    place-items: center !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* No separate brand-side panel on Forgot Password. */
.forgot-password-page .brand-panel {
    display: none !important;
}

.forgot-password-page .auth-reset-shell .auth-panel {
    width: min(100%, 570px) !important;
    max-width: 570px !important;
    min-width: 0 !important;
    min-height: auto !important;
    margin: 0 auto !important;
    padding: 34px 38px !important;
    justify-self: center !important;
    align-self: center !important;
    border-radius: 22px !important;
    overflow: visible !important;
}

.forgot-password-page .auth-inner {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Back to Login sits where Back to Welcome sits on Login. */
.forgot-password-page .back-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: .55rem !important;
    margin: 0 0 1.45rem !important;
    padding: 0 !important;
    color: #F8FAF8 !important;
    font-size: .88rem !important;
    font-weight: 760 !important;
    text-decoration: none !important;
}

.forgot-password-page .back-link i {
    color: #FDC530 !important;
}

/* Same left-aligned heading rhythm as Login. */
.forgot-password-page .auth-heading {
    margin: 0 0 1.35rem !important;
    padding: 0 !important;
    text-align: left !important;
}

.forgot-password-page .auth-heading .eyebrow {
    margin: 0 0 .62rem !important;
    color: #FDC530 !important;
    font-size: .78rem !important;
    font-weight: 850 !important;
    letter-spacing: .10em !important;
    text-transform: uppercase !important;
}

.forgot-password-page .auth-heading h2 {
    margin: 0 0 .72rem !important;
    color: #FFFFFF !important;
    font-size: clamp(2.15rem, 4.2vw, 3.35rem) !important;
    line-height: .98 !important;
    letter-spacing: -.045em !important;
}

.forgot-password-page .forgot-auth-copy {
    max-width: 31rem !important;
    margin: 0 !important;
    color: rgba(255,255,255,.86) !important;
    font-size: .93rem !important;
    line-height: 1.5 !important;
}

.forgot-password-page .forgot-password-form {
    width: 100% !important;
    margin: 0 !important;
}

.forgot-password-page .forgot-password-form .form-group {
    margin-bottom: .95rem !important;
}

.forgot-password-page .forgot-password-form .password-login-btn {
    width: 100% !important;
    min-height: 52px !important;
    margin: .4rem 0 0 !important;
    position: static !important;
    transform: none !important;
}

/* Mobile: same card width/placement as Login, button fully visible. */
@media (max-width: 767.98px) {
    html,
    body.forgot-password-page {
        width: 100% !important;
        min-height: 100svh !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    .forgot-password-page .auth-reset-shell {
        width: 100% !important;
        min-height: 100svh !important;
        padding: 16px !important;
        display: grid !important;
        place-items: center !important;
    }

    .forgot-password-page .auth-reset-shell .auth-panel {
        width: min(100%, 440px) !important;
        max-width: 440px !important;
        min-width: 0 !important;
        min-height: auto !important;
        margin: 0 auto !important;
        padding: 22px 18px 26px !important;
        border-radius: 18px !important;
        overflow: visible !important;
    }

    .forgot-password-page .auth-heading h2 {
        font-size: clamp(1.95rem, 9.5vw, 2.45rem) !important;
    }

    .forgot-password-page .forgot-auth-copy {
        font-size: .88rem !important;
        line-height: 1.46 !important;
    }

    .forgot-password-page .forgot-password-form .password-login-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 50px !important;
        height: auto !important;
        margin: .55rem 0 0 !important;
        padding: 0 16px !important;
        bottom: auto !important;
        overflow: visible !important;
        flex-shrink: 0 !important;
    }
}

@media (max-width: 390px) {
    .forgot-password-page .auth-reset-shell {
        padding: 10px !important;
    }

    .forgot-password-page .auth-reset-shell .auth-panel {
        width: 100% !important;
        padding: 19px 14px 24px !important;
        border-radius: 16px !important;
    }

    .forgot-password-page .auth-heading h2 {
        font-size: 1.95rem !important;
    }
}

/* ============================================================
   LOGIN - CENTERED ACCOUNT ACCESS + OFFICIAL LOGO + TRUE GLASS FIELDS
   UI ONLY. Login fields/routes/behavior remain unchanged.
   ============================================================ */

.login-glass-page .auth-heading-login {
    width: 100%;
    max-width: 100%;
    margin: 0 0 1.4rem;
    display: grid;
    justify-items: center;
    text-align: center;
}

.login-glass-page .auth-heading-login .eyebrow {
    margin: 0 0 .9rem !important;
    color: #FDC530 !important;
    font-size: .80rem !important;
    font-weight: 850 !important;
    letter-spacing: .13em !important;
    text-align: center !important;
    text-transform: uppercase !important;
}

.login-glass-page .auth-login-logo {
    width: 100%;
    display: grid;
    place-items: center;
}

.login-glass-page .auth-login-logo img {
    display: block;
    width: 88px;
    height: 88px;
    object-fit: contain;
    object-position: center;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.10));
}

/* Slightly clearer form glass so more of the campus is visible. */
.login-page.login-glass-page .auth-panel {
    background:
        linear-gradient(
            145deg,
            rgba(20, 35, 29, .42) 0%,
            rgba(43, 48, 45, .28) 50%,
            rgba(25, 38, 32, .38) 100%
        ) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    -webkit-backdrop-filter: blur(15px) saturate(1.03) !important;
    backdrop-filter: blur(15px) saturate(1.03) !important;
}

/*
 * TRUE GLASS FIELDS:
 * no thick white blocks; campus/background remains visible through them.
 */
.login-glass-page .form-control,
.login-glass-page .google-action {
    color: #F7FAF7 !important;
    background: rgba(255,255,255,.12) !important;
    border: 1px solid rgba(255,255,255,.32) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 5px 16px rgba(0,0,0,.04) !important;
    -webkit-backdrop-filter: blur(8px) saturate(1.04) !important;
    backdrop-filter: blur(8px) saturate(1.04) !important;
}

.login-glass-page .form-control::placeholder {
    color: rgba(247,250,247,.64) !important;
}

.login-glass-page .input-with-icon > i,
.login-glass-page .password-toggle {
    color: rgba(247,250,247,.86) !important;
}

.login-glass-page .google-action {
    color: #F8FAF8 !important;
}

.login-glass-page .google-action:hover,
.login-glass-page .google-action:focus-visible,
.login-glass-page .form-control:focus {
    background: rgba(255,255,255,.18) !important;
    border-color: rgba(253,197,48,.72) !important;
    box-shadow:
        0 0 0 3px rgba(253,197,48,.10),
        inset 0 1px 0 rgba(255,255,255,.10) !important;
}

/* Labels stay readable against the clearer glass. */
.login-glass-page .form-group label,
.login-glass-page .label-row label {
    color: #FFFFFF !important;
}

/* Security line: text only, no box, no icon, no animated/ticker treatment. */
.login-glass-page .login-security-note {
    position: static !important;
    display: block !important;
    width: fit-content !important;
    max-width: calc(100vw - 32px) !important;
    margin: 12px auto 0 !important;
    padding: 0 !important;
    color: #FFFFFF !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    animation: none !important;
    transform: none !important;
    white-space: normal !important;
    text-align: center !important;
}

.login-glass-page .login-security-note::before,
.login-glass-page .login-security-note::after,
.login-glass-page .login-security-note .security-icon {
    display: none !important;
    content: none !important;
}

.login-glass-page .login-security-note .brand-x {
    color: #FDC530 !important;
    font-weight: 850 !important;
}

/* ============================================================
   MOBILE - LOWER THE FORM SLIGHTLY TO REVEAL THE BUILDING TOP
   ============================================================ */
@media (max-width: 767.98px) {
    .login-page.login-glass-page .login-stage {
        min-height: 100svh !important;
        display: block !important;
        padding: 0 12px 30px !important;
        overflow: visible !important;
    }

    .login-page.login-glass-page .login-shell,
    .login-page.login-glass-page .login-v9.login-shell {
        width: min(100%, 440px) !important;
        max-width: 440px !important;
        margin: 112px auto 0 !important;
        overflow: visible !important;
    }

    .login-page.login-glass-page .auth-panel {
        width: 100% !important;
        margin: 0 !important;
        padding: 22px 18px 24px !important;
        border-radius: 18px !important;
        overflow: visible !important;
    }

    .login-glass-page .auth-heading-login {
        margin-bottom: 1.2rem !important;
    }

    .login-glass-page .auth-heading-login .eyebrow {
        margin-bottom: .75rem !important;
        font-size: .75rem !important;
    }

    .login-glass-page .auth-login-logo img {
        width: 72px !important;
        height: 72px !important;
    }

    .login-glass-page .form-control,
    .login-glass-page .google-action {
        background: rgba(255,255,255,.10) !important;
        border-color: rgba(255,255,255,.30) !important;
    }

    .login-glass-page .login-security-note {
        margin-top: 12px !important;
        font-size: .72rem !important;
    }
}

@media (max-width: 390px) {
    .login-page.login-glass-page .login-stage {
        padding-inline: 9px !important;
    }

    .login-page.login-glass-page .login-shell,
    .login-page.login-glass-page .login-v9.login-shell {
        margin-top: 96px !important;
    }

    .login-page.login-glass-page .auth-panel {
        padding: 19px 14px 22px !important;
        border-radius: 16px !important;
    }

    .login-glass-page .auth-login-logo img {
        width: 66px !important;
        height: 66px !important;
    }
}

/* ============================================================
   LOGIN - UNDERLINE-ONLY GLASS FIELDS + OUTLINE GOOGLE + REMEMBER
   UI ONLY. Authentication/controller behavior is unchanged.
   ============================================================ */

/*
 * Faculty ID + Password:
 * remove the rectangular field surface and keep a clean bottom line.
 */
.login-glass-page .compact-password-form .input-with-icon {
    position: relative;
    width: 100%;
    min-height: 52px;
    display: flex;
    align-items: center;

    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.42) !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.login-glass-page .compact-password-form .input-with-icon:focus-within {
    border-bottom-color: #FDC530 !important;
    box-shadow: 0 1px 0 rgba(253,197,48,.52) !important;
}

.login-glass-page .compact-password-form .form-control {
    width: 100% !important;
    min-height: 52px !important;
    padding: 0 42px 0 36px !important;

    color: #FFFFFF !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    outline: none !important;
}

.login-glass-page .compact-password-form .form-control:focus {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

.login-glass-page .compact-password-form .form-control::placeholder {
    color: rgba(255,255,255,.58) !important;
}

.login-glass-page .compact-password-form .input-with-icon > i {
    position: absolute !important;
    left: 4px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: rgba(255,255,255,.84) !important;
    z-index: 2;
}

.login-glass-page .compact-password-form .password-toggle {
    right: 2px !important;
    color: rgba(255,255,255,.84) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Labels stay quiet and academic. */
.login-glass-page .compact-password-form .form-group > label,
.login-glass-page .compact-password-form .label-row label {
    color: rgba(255,255,255,.94) !important;
}

/*
 * Google Sign-In:
 * transparent inside, line around the edge only.
 */
.login-glass-page .google-action {
    min-height: 50px !important;
    color: #FFFFFF !important;
    background: transparent !important;
    border: 1px solid rgba(255,255,255,.42) !important;
    border-radius: 9px !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.login-glass-page .google-action:hover,
.login-glass-page .google-action:focus-visible {
    color: #FFFFFF !important;
    background: rgba(255,255,255,.06) !important;
    border-color: #FDC530 !important;
    box-shadow: 0 0 0 3px rgba(253,197,48,.08) !important;
}

/* Remember me UI */
.login-remember {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin: .15rem 0 1rem;
    color: rgba(255,255,255,.88);
    font-size: .82rem;
    font-weight: 650;
    cursor: pointer;
    user-select: none;
}

.login-remember input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.login-remember__box {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.46);
    border-radius: 4px;
    background: transparent;
    color: #17321A;
    transition:
        background .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.login-remember__box i {
    font-size: .62rem;
    opacity: 0;
    transform: scale(.8);
    transition: opacity .16s ease, transform .16s ease;
}

.login-remember input:checked + .login-remember__box {
    background: #FDC530;
    border-color: #FDC530;
}

.login-remember input:checked + .login-remember__box i {
    opacity: 1;
    transform: scale(1);
}

.login-remember input:focus-visible + .login-remember__box {
    box-shadow: 0 0 0 3px rgba(253,197,48,.13);
    border-color: #FDC530;
}

/* Mobile keeps the same line-only field pattern. */
@media (max-width: 767.98px) {
    .login-glass-page .compact-password-form .input-with-icon {
        min-height: 48px !important;
    }

    .login-glass-page .compact-password-form .form-control {
        min-height: 48px !important;
    }

    .login-glass-page .google-action {
        min-height: 48px !important;
    }

    .login-remember {
        margin-top: .1rem;
        margin-bottom: .9rem;
        font-size: .80rem;
    }
}

/* Lighten and clarify the glass form */
.login-page.login-glass-page .auth-panel {
    position: relative !important;
    background: linear-gradient(145deg, rgba(248,251,248,.22) 0%, rgba(255,255,255,.12) 52%, rgba(242,247,242,.18) 100%) !important;
    border: 1px solid rgba(255,255,255,.24) !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.02) !important;
    backdrop-filter: blur(10px) saturate(1.02) !important;
    box-shadow: 0 22px 52px rgba(10, 28, 20, .14) !important;
}

.login-page.login-glass-page .auth-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
}

.login-page.login-glass-page .auth-panel > * {
    position: relative;
    z-index: 1;
}

@media (max-width: 767.98px) {
    .login-page.login-glass-page .auth-panel {
    position: relative !important;
        background: linear-gradient(145deg, rgba(249,252,249,.19) 0%, rgba(255,255,255,.10) 54%, rgba(244,248,244,.15) 100%) !important;
        -webkit-backdrop-filter: blur(9px) saturate(1.02) !important;
        backdrop-filter: blur(9px) saturate(1.02) !important;
        box-shadow: 0 18px 42px rgba(10, 28, 20, .12) !important;
    }
}

/* ============================================================
   MOBILE LOGIN - SECURITY TEXT GAP ONLY
   Desktop/web remains unchanged.
   ============================================================ */
@media (max-width: 767.98px) {
    .login-glass-page .login-security-note {
        margin-top: 22px !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }
}

@media (max-width: 390px) {
    .login-glass-page .login-security-note {
        margin-top: 20px !important;
    }
}

/* ============================================================
   LOGIN DESKTOP LEFT VISUAL - FLOATING SCHEDULING CONSTRAINT NETWORK
   No card/form. Login form and authentication flow are untouched.
   ============================================================ */

@media (min-width: 768px) {
    .login-page.login-glass-page .login-constraint-panel {
        position: relative !important;
        isolation: isolate;
        min-height: 100svh !important;
        padding: clamp(2rem, 4.2vw, 4.6rem) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: clamp(2rem, 4vh, 3.1rem) !important;
        overflow: hidden !important;

        /* No card / no box - the campus photo remains the surface. */
        color: #fff !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .login-page.login-glass-page .login-constraint-panel::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -2;
        pointer-events: none;
        background:
            radial-gradient(circle at 48% 42%, rgba(20,105,57,.10), transparent 31%),
            linear-gradient(90deg, rgba(7,31,23,.14), rgba(7,31,23,.05) 56%, transparent 100%);
    }

    .login-page.login-glass-page .login-constraint-panel::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 0;
        width: min(86%, 560px);
        height: 1px;
        transform: translateX(-50%);
        background: linear-gradient(
            90deg,
            transparent 0%,
            rgba(20,105,57,.72) 25%,
            #FDC530 50%,
            rgba(20,105,57,.72) 75%,
            transparent 100%
        );
        opacity: .72;
    }

    .constraint-visual {
        position: relative;
        width: min(36vw, 520px);
        aspect-ratio: 1 / .82;
        min-width: 390px;
        max-width: 520px;
    }

    .constraint-orbit {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        border-radius: 999px;
        pointer-events: none;
    }

    .constraint-orbit--outer {
        width: 88%;
        height: 88%;
        border: 1px solid rgba(253,197,48,.48);
        box-shadow: 0 0 0 1px rgba(255,255,255,.025);
    }

    .constraint-orbit--inner {
        width: 60%;
        height: 60%;
        border: 1px dashed rgba(255,255,255,.25);
    }

    .constraint-center {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 112px;
        height: 112px;
        transform: translate(-50%, -50%);
        display: grid;
        place-items: center;
        align-content: center;
        gap: .35rem;
        color: #17321A;
        background: rgba(253,197,48,.94);
        border: 1px solid rgba(255,255,255,.44);
        border-radius: 999px;
        box-shadow:
            0 18px 38px rgba(4,32,19,.19),
            0 0 0 10px rgba(253,197,48,.065);
        z-index: 5;
    }

    .constraint-center i {
        font-size: 1.7rem;
    }

    .constraint-center span {
        font-size: .70rem;
        font-weight: 850;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    .constraint-node {
        position: absolute;
        z-index: 4;
        min-width: 104px;
        display: grid;
        justify-items: center;
        gap: .38rem;
        color: rgba(255,255,255,.94);
        font-size: .73rem;
        font-weight: 760;
        letter-spacing: .02em;
        text-shadow: 0 2px 12px rgba(0,0,0,.16);
        animation: edxConstraintFloat 5.5s ease-in-out infinite;
    }

    .constraint-node__icon {
        width: 54px;
        height: 54px;
        display: inline-grid;
        place-items: center;
        border: 1px solid rgba(255,255,255,.33);
        border-radius: 999px;
        color: #FDC530;
        background: rgba(8,47,29,.24);
        box-shadow:
            0 10px 24px rgba(3,30,17,.15),
            inset 0 1px 0 rgba(255,255,255,.08);
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
    }

    .constraint-node__icon i {
        font-size: 1.05rem;
    }

    .constraint-node--faculty {
        left: 50%;
        top: 0;
        transform: translateX(-50%);
        animation-delay: 0s;
    }

    .constraint-node--subjects {
        right: 0;
        top: 25%;
        animation-delay: -.9s;
    }

    .constraint-node--sections {
        right: 9%;
        bottom: 4%;
        animation-delay: -1.8s;
    }

    .constraint-node--rooms {
        left: 3%;
        top: 45%;
        animation-delay: -2.7s;
    }

    .constraint-node--time {
        left: 18%;
        bottom: 0;
        animation-delay: -3.6s;
    }

    .constraint-link {
        position: absolute;
        left: 50%;
        top: 50%;
        height: 1px;
        transform-origin: left center;
        z-index: 2;
        background: linear-gradient(90deg, rgba(253,197,48,.68), rgba(20,105,57,.24));
        pointer-events: none;
    }

    .constraint-link--faculty {
        width: 34%;
        transform: rotate(-90deg);
    }

    .constraint-link--subjects {
        width: 40%;
        transform: rotate(-27deg);
    }

    .constraint-link--sections {
        width: 39%;
        transform: rotate(33deg);
    }

    .constraint-link--rooms {
        width: 39%;
        transform: rotate(184deg);
    }

    .constraint-link--time {
        width: 37%;
        transform: rotate(132deg);
    }

    .constraint-copy {
        width: min(100%, 520px);
        display: grid;
        justify-items: center;
        text-align: center;
        color: #fff;
        text-shadow: 0 2px 16px rgba(0,0,0,.16);
    }

    .constraint-kicker {
        margin: 0 0 .55rem;
        color: #FDC530;
        font-size: .68rem;
        font-weight: 850;
        letter-spacing: .13em;
        text-transform: uppercase;
    }

    .constraint-copy h1 {
        max-width: 470px;
        margin: 0;
        color: #F8FAF8;
        font-size: clamp(1.7rem, 3vw, 2.45rem);
        font-weight: 820;
        line-height: 1.03;
        letter-spacing: -.045em;
    }

    .constraint-accent-line {
        width: 148px;
        height: 2px;
        margin-top: 1rem;
        overflow: hidden;
        border-radius: 999px;
        background: rgba(255,255,255,.12);
    }

    .constraint-accent-line span {
        display: block;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, #146939 0%, #FDC530 60%, rgba(253,197,48,.20) 100%);
    }

    @keyframes edxConstraintFloat {
        0%, 100% { margin-top: 0; }
        50% { margin-top: -7px; }
    }
}

/* Existing mobile rule still hides .brand-panel. This is explicit for safety. */
@media (max-width: 767.98px) {
    .login-page.login-glass-page .login-constraint-panel {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .constraint-node {
        animation: none !important;
    }
}

/* ============================================================
   LEFT VISUAL EMPHASIS - Slightly darker local backdrop + glow highlights
   Keeps the network floating (not in a card) while emphasizing the nodes.
   ============================================================ */
@media (min-width: 768px) {
    .login-page.login-glass-page .login-constraint-panel::before {
        background:
            radial-gradient(circle at 50% 44%, rgba(253,197,48,.08) 0%, rgba(253,197,48,.03) 18%, transparent 34%),
            radial-gradient(circle at 49% 50%, rgba(7,31,23,.24) 0%, rgba(7,31,23,.15) 36%, rgba(7,31,23,.05) 58%, transparent 78%),
            linear-gradient(90deg, rgba(6,24,18,.34) 0%, rgba(6,24,18,.22) 34%, rgba(6,24,18,.12) 62%, transparent 100%) !important;
    }

    .constraint-visual {
        filter: drop-shadow(0 16px 34px rgba(0,0,0,.16));
    }

    .constraint-orbit--outer {
        border-color: rgba(253,197,48,.56);
        box-shadow:
            0 0 0 1px rgba(255,255,255,.03),
            0 0 24px rgba(253,197,48,.10);
    }

    .constraint-orbit--inner {
        border-color: rgba(255,255,255,.28);
        box-shadow: 0 0 18px rgba(255,255,255,.04);
    }

    .constraint-center {
        box-shadow:
            0 22px 42px rgba(4,32,19,.24),
            0 0 0 10px rgba(253,197,48,.08),
            0 0 28px rgba(253,197,48,.26),
            0 0 56px rgba(253,197,48,.14) !important;
    }

    .constraint-center::after {
        content: "";
        position: absolute;
        inset: -12px;
        border-radius: 999px;
        pointer-events: none;
        background: radial-gradient(circle, rgba(253,197,48,.18) 0%, rgba(253,197,48,.08) 42%, transparent 72%);
        z-index: -1;
        filter: blur(10px);
    }

    .constraint-node {
        text-shadow:
            0 2px 12px rgba(0,0,0,.18),
            0 0 14px rgba(255,255,255,.07);
    }

    .constraint-node__icon {
        background: rgba(10,42,29,.34);
        border-color: rgba(255,255,255,.42);
        box-shadow:
            0 14px 28px rgba(3,30,17,.18),
            inset 0 1px 0 rgba(255,255,255,.10),
            0 0 18px rgba(255,255,255,.08),
            0 0 24px rgba(253,197,48,.16);
    }

    .constraint-node__icon::before {
        content: "";
        position: absolute;
        inset: -5px;
        border-radius: 999px;
        pointer-events: none;
        background: radial-gradient(circle, rgba(253,197,48,.14) 0%, rgba(253,197,48,.06) 40%, transparent 74%);
        filter: blur(6px);
        z-index: -1;
    }

    .constraint-link {
        height: 1.5px;
        background: linear-gradient(90deg, rgba(253,197,48,.84), rgba(20,105,57,.34));
        box-shadow: 0 0 12px rgba(253,197,48,.10);
    }

    .constraint-copy h1 {
        text-shadow:
            0 3px 18px rgba(0,0,0,.18),
            0 0 20px rgba(255,255,255,.05);
    }
}

/* ============================================================
   FINAL LOGIN LEFT SIDE - CAMPUS ONLY, NO FLOATING NETWORK
   ============================================================ */
@media (min-width: 768px) {
    .login-page.login-glass-page .login-empty-panel {
        position: relative !important;
        min-height: 100svh !important;
        padding: 0 !important;
        display: block !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: hidden !important;
    }

    .login-page.login-glass-page .login-empty-panel::before,
    .login-page.login-glass-page .login-empty-panel::after {
        content: none !important;
        display: none !important;
        background: none !important;
    }

    /* Safety: if older network markup remains after a merge, do not show it. */
    .login-page.login-glass-page .constraint-visual,
    .login-page.login-glass-page .constraint-copy,
    .login-page.login-glass-page .constraint-orbit,
    .login-page.login-glass-page .constraint-node,
    .login-page.login-glass-page .constraint-link,
    .login-page.login-glass-page .constraint-center {
        display: none !important;
    }
}

/* Standalone Forgot Password: ACCOUNT RECOVERY uses Account Access typography,
   but is intentionally left-aligned as requested. */
.forgot-password-page .auth-heading .eyebrow,
.forgot-password-page .forgot-auth-heading .eyebrow {
    width: 100% !important;
    margin: 0 0 .9rem !important;
    color: #FDC530 !important;
    font-size: .80rem !important;
    font-weight: 850 !important;
    letter-spacing: .13em !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
    text-align: left !important;
    justify-self: start !important;
}

@media (max-width: 767.98px) {
    .forgot-password-page .auth-heading .eyebrow,
    .forgot-password-page .forgot-auth-heading .eyebrow {
        margin-bottom: .75rem !important;
        font-size: .75rem !important;
        text-align: left !important;
        justify-self: start !important;
    }
}

/* ============================================================
   FINAL LOGIN LEFT MESSAGE + OUTER FORM EDGE GLOW
   UI-only: no field glow and no authentication changes.
   ============================================================ */

@media (min-width: 768px) {
    /* Keep the campus as the surface; only add a subtle readability veil. */
    .login-page.login-glass-page .login-empty-panel {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: clamp(2rem, 5vw, 5.75rem) !important;
        color: #fff !important;
        background: transparent !important;
        overflow: hidden !important;
    }

    .login-page.login-glass-page .login-empty-panel::before {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        inset: 0 !important;
        z-index: 0 !important;
        pointer-events: none !important;
        background:
            linear-gradient(90deg,
                rgba(5, 25, 17, .42) 0%,
                rgba(5, 25, 17, .30) 38%,
                rgba(5, 25, 17, .13) 72%,
                transparent 100%) !important;
    }

    .login-page.login-glass-page .login-empty-panel::after {
        content: none !important;
        display: none !important;
    }

    .login-left-copy {
        position: relative;
        z-index: 1;
        width: min(100%, 520px);
        margin-top: 2vh;
        text-align: left;
        text-shadow: 0 3px 18px rgba(0,0,0,.20);
    }

    .login-left-kicker {
        margin: 0 0 1.1rem;
        color: #FDC530;
        font-size: .78rem;
        font-weight: 850;
        letter-spacing: .18em;
        text-transform: uppercase;
    }

    .login-left-copy h1 {
        max-width: 510px;
        margin: 0;
        color: #FFFFFF;
        font-size: clamp(2.5rem, 4.4vw, 4.65rem);
        font-weight: 830;
        line-height: .98;
        letter-spacing: -.055em;
    }

    .login-left-support {
        max-width: 470px;
        margin: 1.35rem 0 0;
        color: rgba(255,255,255,.78);
        font-size: clamp(.96rem, 1.35vw, 1.17rem);
        font-weight: 520;
        line-height: 1.55;
    }

    .login-left-accent {
        width: 180px;
        height: 3px;
        margin-top: 1.45rem;
        overflow: hidden;
        border-radius: 999px;
        background: rgba(255,255,255,.10);
    }

    .login-left-accent span {
        display: block;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, #146939 0%, #FDC530 72%, rgba(253,197,48,.28) 100%);
    }

    /* Glow belongs ONLY to the outer login form edge. */
    .login-page.login-glass-page .auth-panel {
        position: relative !important;
        isolation: isolate;
        border: 1px solid rgba(255,255,255,.28) !important;
        box-shadow:
            0 24px 60px rgba(0,0,0,.18),
            0 0 0 1px rgba(20,105,57,.14),
            -8px 0 28px rgba(20,105,57,.14),
            8px 0 30px rgba(253,197,48,.12),
            0 0 38px rgba(255,255,255,.06) !important;
    }

    .login-page.login-glass-page .auth-panel::after {
        content: "";
        position: absolute;
        inset: -1px;
        z-index: -1;
        pointer-events: none;
        border-radius: inherit;
        padding: 1px;
        background: linear-gradient(145deg,
            rgba(255,255,255,.26) 0%,
            rgba(20,105,57,.30) 38%,
            rgba(253,197,48,.36) 72%,
            rgba(255,255,255,.14) 100%);
        -webkit-mask:
            linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        opacity: .82;
    }

    /* Explicitly prevent glow/light effects on fields and buttons. */
    .login-page.login-glass-page .compact-password-form .input-with-icon,
    .login-page.login-glass-page .compact-password-form .form-control,
    .login-page.login-glass-page .google-action {
        filter: none !important;
        text-shadow: none !important;
    }

    .login-page.login-glass-page .compact-password-form .input-with-icon,
    .login-page.login-glass-page .compact-password-form .form-control {
        box-shadow: none !important;
    }

    .login-page.login-glass-page .google-action {
        box-shadow: none !important;
    }

    /* Focus remains simple: only the existing line/border changes color. */
    .login-page.login-glass-page .compact-password-form .input-with-icon:focus-within {
        box-shadow: 0 1px 0 rgba(253,197,48,.42) !important;
    }

    .login-page.login-glass-page .google-action:hover,
    .login-page.login-glass-page .google-action:focus-visible {
        box-shadow: none !important;
    }
}

/* Mobile remains form-only; left promotional copy stays hidden. */
@media (max-width: 767.98px) {
    .login-page.login-glass-page .login-left-copy {
        display: none !important;
    }

    /* Keep mobile form readable without adding field glow. */
    .login-page.login-glass-page .auth-panel {
        box-shadow:
            0 18px 42px rgba(0,0,0,.13),
            0 0 0 1px rgba(255,255,255,.10) !important;
    }
}

/* ============================================================
   PATCH: LEFT TEXT WITHOUT BOX + DARKER BACKGROUND EMPHASIS
   ============================================================ */
@media (min-width: 768px) {
    /* Slightly darken the whole login scene so both the floating text and glass form stand out. */
    .login-page.login-glass-page .login-stage {
        position: relative !important;
        isolation: isolate;
    }

    .login-page.login-glass-page .login-stage::before {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        z-index: 0 !important;
        pointer-events: none !important;
        background: rgba(6, 20, 13, .18) !important;
    }

    .login-page.login-glass-page .login-v9,
    .login-page.login-glass-page .auth-panel,
    .login-page.login-glass-page .login-empty-panel {
        position: relative !important;
        z-index: 1 !important;
    }

    /* Keep the left copy as text-only: no card, no blur box, no shadow box. */
    .login-page.login-glass-page .login-left-copy {
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
    }

    /* Stronger, cleaner left-side readability veil without creating a visible box. */
    .login-page.login-glass-page .login-empty-panel::before {
        background:
            linear-gradient(90deg,
                rgba(4, 17, 11, .56) 0%,
                rgba(4, 17, 11, .42) 34%,
                rgba(4, 17, 11, .24) 66%,
                rgba(4, 17, 11, .08) 88%,
                transparent 100%) !important;
    }

    .login-page.login-glass-page .login-left-copy h1,
    .login-page.login-glass-page .login-left-support,
    .login-page.login-glass-page .login-left-kicker {
        position: relative;
        z-index: 1;
    }
}

/* ============================================================
   FINAL DESKTOP LOGIN EMPHASIS
   - One darker overlay on the campus image
   - No panel/card behind the left message
   - Left message vertically centered
   - Light only around the OUTER login-card edge
   - No field glow
   UI only; authentication is untouched.
   ============================================================ */
@media (min-width: 768px) {
    /* The campus photo itself is the visual surface. */
    .login-page.login-glass-page,
    .login-page.login-glass-page .login-stage {
        position: relative !important;
        isolation: isolate !important;
        background-color: transparent !important;
    }

    /* ONE continuous dark veil over the whole photo - not a form/panel. */
    .login-page.login-glass-page .login-stage::before {
        content: "" !important;
        position: fixed !important;
        inset: 0 !important;
        z-index: 0 !important;
        pointer-events: none !important;
        background:
            linear-gradient(
                90deg,
                rgba(4, 17, 11, .44) 0%,
                rgba(4, 17, 11, .38) 44%,
                rgba(4, 17, 11, .33) 100%
            ) !important;
    }

    .login-page.login-glass-page .login-shell,
    .login-page.login-glass-page .login-v9,
    .login-page.login-glass-page .login-empty-panel,
    .login-page.login-glass-page .auth-panel {
        position: relative !important;
        z-index: 1 !important;
    }

    /* LEFT SIDE: absolutely no local box/background behind the text. */
    .login-page.login-glass-page .login-empty-panel {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 100svh !important;
        padding: clamp(2rem, 5vw, 5.5rem) !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        overflow: visible !important;
    }

    /* Remove previous side-only overlays that looked like a background form. */
    .login-page.login-glass-page .login-empty-panel::before,
    .login-page.login-glass-page .login-empty-panel::after {
        content: none !important;
        display: none !important;
        background: none !important;
        border: 0 !important;
        box-shadow: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    .login-page.login-glass-page .login-left-copy {
        width: min(100%, 520px) !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        text-align: left !important;
        transform: none !important;
    }

    .login-page.login-glass-page .login-left-kicker {
        margin: 0 0 1rem !important;
        color: #FDC530 !important;
        font-size: .78rem !important;
        font-weight: 850 !important;
        letter-spacing: .18em !important;
        text-transform: uppercase !important;
        text-shadow: 0 2px 10px rgba(0,0,0,.28) !important;
    }

    .login-page.login-glass-page .login-left-copy h1 {
        max-width: 500px !important;
        margin: 0 !important;
        color: #FFFFFF !important;
        font-size: clamp(2.35rem, 4vw, 4rem) !important;
        font-weight: 830 !important;
        line-height: 1.02 !important;
        letter-spacing: -.045em !important;
        text-shadow: 0 4px 18px rgba(0,0,0,.32) !important;
    }

    .login-page.login-glass-page .login-left-support {
        max-width: 465px !important;
        margin: 1.25rem 0 0 !important;
        color: rgba(255,255,255,.82) !important;
        font-size: clamp(.94rem, 1.2vw, 1.08rem) !important;
        line-height: 1.55 !important;
        text-shadow: 0 2px 12px rgba(0,0,0,.26) !important;
    }

    /* Keep the small accent line only - it is not a container/background. */
    .login-page.login-glass-page .login-left-accent {
        width: 160px !important;
        height: 2px !important;
        margin-top: 1.35rem !important;
        background: transparent !important;
        border-radius: 999px !important;
        overflow: hidden !important;
        box-shadow: none !important;
    }

    .login-page.login-glass-page .login-left-accent span {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        background: linear-gradient(90deg, #146939 0%, #FDC530 72%, rgba(253,197,48,.18) 100%) !important;
    }

    /* LOGIN FORM: keep glass, but emphasize ONLY the OUTER edge. */
    .login-page.login-glass-page .auth-panel {
        isolation: isolate !important;
        border: 1px solid rgba(255,255,255,.30) !important;
        box-shadow:
            0 24px 58px rgba(0,0,0,.22),
            0 0 0 1px rgba(255,255,255,.05),
            -7px 0 28px rgba(20,105,57,.16),
            8px 0 30px rgba(253,197,48,.13),
            0 0 34px rgba(255,255,255,.05) !important;
    }

    .login-page.login-glass-page .auth-panel::after {
        content: "" !important;
        position: absolute !important;
        inset: -1px !important;
        z-index: -1 !important;
        pointer-events: none !important;
        border-radius: inherit !important;
        padding: 1px !important;
        background: linear-gradient(
            145deg,
            rgba(255,255,255,.30) 0%,
            rgba(20,105,57,.34) 34%,
            rgba(253,197,48,.42) 72%,
            rgba(255,255,255,.18) 100%
        ) !important;
        -webkit-mask:
            linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0) !important;
        -webkit-mask-composite: xor !important;
        mask-composite: exclude !important;
        opacity: .86 !important;
    }

    /* Explicitly prevent light/glow from leaking into the fields/buttons. */
    .login-page.login-glass-page .compact-password-form .input-with-icon,
    .login-page.login-glass-page .compact-password-form .form-control,
    .login-page.login-glass-page .google-action,
    .login-page.login-glass-page .login-remember,
    .login-page.login-glass-page .password-login-btn {
        filter: none !important;
        text-shadow: none !important;
    }

    .login-page.login-glass-page .compact-password-form .input-with-icon,
    .login-page.login-glass-page .compact-password-form .form-control,
    .login-page.login-glass-page .google-action {
        box-shadow: none !important;
    }
}

/* Mobile remains form-only. Do not add desktop left copy or extra dark panel. */
@media (max-width: 767.98px) {
    .login-page.login-glass-page .login-left-copy,
    .login-page.login-glass-page .login-empty-panel {
        display: none !important;
    }
}

/* ============================================================
   FINAL FORM EDGE LIGHT + ACCOUNT RECOVERY TYPOGRAPHY MATCH
   UI only. No authentication/reset logic changes.
   ============================================================ */

/* ACCOUNT RECOVERY must visually match ACCOUNT ACCESS exactly. */
.forgot-password-page .auth-heading .eyebrow,
.forgot-password-page .forgot-auth-heading .eyebrow,
.login-glass-page .edx-forgot-eyebrow,
.login-glass-page [data-forgot-password] .eyebrow,
.login-glass-page .forgot-auth-heading .eyebrow {
    width: 100% !important;
    margin: 0 0 .9rem !important;
    color: #FDC530 !important;
    font-family: inherit !important;
    font-size: .80rem !important;
    font-style: normal !important;
    font-weight: 850 !important;
    letter-spacing: .13em !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    text-align: left !important;
}

/* Safety for markup that renders the text without the eyebrow class. */
.login-glass-page .edx-forgot-eyebrow,
.login-glass-page .forgot-recovery-label,
.login-glass-page [data-recovery-eyebrow] {
    color: #FDC530 !important;
    font-size: .80rem !important;
    font-style: normal !important;
    font-weight: 850 !important;
    letter-spacing: .13em !important;
    text-transform: uppercase !important;
}

/* Stronger but restrained LIGHT only around the OUTER glass-card edge. */
.login-page.login-glass-page .auth-panel,
.forgot-password-page .auth-panel {
    position: relative !important;
    isolation: isolate !important;
    border: 1px solid rgba(255,255,255,.34) !important;
    box-shadow:
        0 24px 62px rgba(0,0,0,.22),
        0 0 0 1px rgba(255,255,255,.06),
        -10px 4px 34px rgba(20,105,57,.18),
        10px -4px 34px rgba(253,197,48,.17),
        0 14px 42px rgba(20,105,57,.12),
        0 -10px 38px rgba(253,197,48,.10) !important;
}

/* Thin reflective edge: green on lower/left, yellow on upper/right. */
.login-page.login-glass-page .auth-panel::after,
.forgot-password-page .auth-panel::after {
    content: "" !important;
    position: absolute !important;
    inset: -1px !important;
    z-index: -1 !important;
    pointer-events: none !important;
    border-radius: inherit !important;
    padding: 1px !important;
    background: linear-gradient(
        145deg,
        rgba(253,197,48,.54) 0%,
        rgba(255,255,255,.27) 25%,
        rgba(255,255,255,.10) 48%,
        rgba(20,105,57,.46) 74%,
        rgba(20,105,57,.23) 100%
    ) !important;
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask-composite: exclude !important;
    opacity: .94 !important;
}

/* Soft outer halo only. This pseudo-element does not cover the card content. */
.login-page.login-glass-page .auth-panel::before,
.forgot-password-page .auth-panel::before {
    content: "" !important;
    position: absolute !important;
    inset: -12px !important;
    z-index: -2 !important;
    pointer-events: none !important;
    border-radius: calc(22px + 12px) !important;
    background:
        radial-gradient(circle at 82% 6%, rgba(253,197,48,.22), transparent 34%),
        radial-gradient(circle at 18% 94%, rgba(20,105,57,.22), transparent 36%) !important;
    filter: blur(12px) !important;
    opacity: .86 !important;
}

/* Keep controls clean: no lighting/glow in the field/button surfaces. */
.login-page.login-glass-page .compact-password-form .input-with-icon,
.login-page.login-glass-page .compact-password-form .form-control,
.login-page.login-glass-page .google-action,
.login-page.login-glass-page .login-remember,
.login-page.login-glass-page .password-login-btn,
.login-glass-page .edx-forgot-input,
.login-glass-page .edx-forgot-submit {
    filter: none !important;
    text-shadow: none !important;
}

.login-page.login-glass-page .compact-password-form .input-with-icon,
.login-page.login-glass-page .compact-password-form .form-control,
.login-glass-page .edx-forgot-input {
    box-shadow: none !important;
}

/* Mobile: same visual language, reduced halo so it stays clean and performant. */
@media (max-width: 767.98px) {
    .forgot-password-page .auth-heading .eyebrow,
    .forgot-password-page .forgot-auth-heading .eyebrow,
    .login-glass-page .edx-forgot-eyebrow,
    .login-glass-page [data-forgot-password] .eyebrow,
    .login-glass-page .forgot-auth-heading .eyebrow,
    .login-glass-page .forgot-recovery-label,
    .login-glass-page [data-recovery-eyebrow] {
        margin-bottom: .75rem !important;
        color: #FDC530 !important;
        font-size: .75rem !important;
        font-style: normal !important;
        font-weight: 850 !important;
        letter-spacing: .13em !important;
        line-height: 1.2 !important;
        text-transform: uppercase !important;
        text-align: left !important;
    }

    .login-page.login-glass-page .auth-panel,
    .forgot-password-page .auth-panel {
        box-shadow:
            0 18px 44px rgba(0,0,0,.16),
            -6px 5px 22px rgba(20,105,57,.15),
            6px -5px 24px rgba(253,197,48,.14) !important;
    }

    .login-page.login-glass-page .auth-panel::before,
    .forgot-password-page .auth-panel::before {
        inset: -8px !important;
        border-radius: calc(18px + 8px) !important;
        filter: blur(9px) !important;
        opacity: .72 !important;
    }
}

/* ============================================================
   FINAL EDGE EMPHASIS - STRONGER YELLOW LIGHT
   Yellow is now the dominant outer highlight; green stays secondary.
   ============================================================ */
.login-page.login-glass-page .auth-panel,
.forgot-password-page .auth-panel {
    box-shadow:
        0 24px 62px rgba(0,0,0,.22),
        0 0 0 1px rgba(255,255,255,.08),
        -8px 7px 28px rgba(20,105,57,.14),
        12px -6px 42px rgba(253,197,48,.30),
        0 -12px 46px rgba(253,197,48,.22),
        14px 6px 48px rgba(253,197,48,.18),
        0 14px 32px rgba(20,105,57,.08) !important;
}

.login-page.login-glass-page .auth-panel::after,
.forgot-password-page .auth-panel::after {
    background: linear-gradient(
        145deg,
        rgba(253,197,48,.88) 0%,
        rgba(253,197,48,.64) 18%,
        rgba(255,255,255,.24) 38%,
        rgba(255,255,255,.08) 55%,
        rgba(20,105,57,.34) 78%,
        rgba(20,105,57,.16) 100%
    ) !important;
    opacity: 1 !important;
}

.login-page.login-glass-page .auth-panel::before,
.forgot-password-page .auth-panel::before {
    inset: -15px !important;
    background:
        radial-gradient(circle at 86% 3%, rgba(253,197,48,.42), transparent 34%),
        radial-gradient(circle at 58% -4%, rgba(253,197,48,.22), transparent 30%),
        radial-gradient(circle at 101% 35%, rgba(253,197,48,.20), transparent 31%),
        radial-gradient(circle at 14% 94%, rgba(20,105,57,.16), transparent 35%) !important;
    filter: blur(14px) !important;
    opacity: .98 !important;
}

@media (max-width: 767.98px) {
    .login-page.login-glass-page .auth-panel,
    .forgot-password-page .auth-panel {
        box-shadow:
            0 18px 44px rgba(0,0,0,.16),
            -5px 5px 18px rgba(20,105,57,.10),
            7px -5px 30px rgba(253,197,48,.24),
            0 -7px 26px rgba(253,197,48,.17) !important;
    }

    .login-page.login-glass-page .auth-panel::before,
    .forgot-password-page .auth-panel::before {
        inset: -10px !important;
        background:
            radial-gradient(circle at 84% 4%, rgba(253,197,48,.34), transparent 34%),
            radial-gradient(circle at 16% 94%, rgba(20,105,57,.12), transparent 36%) !important;
        filter: blur(10px) !important;
        opacity: .88 !important;
    }
}

/* ============================================================
   FINAL STATIC LOGIN COMPOSITION - NO PAGE SCROLL
   - Darkened campus image, no text card
   - Yellow light ONLY around the outer login-card edge
   - Stable viewport composition using dynamic viewport units
   - Browser zoom remains enabled for accessibility
   ============================================================ */

/* Normal login screen uses the dynamic viewport and does not page-scroll. */
html:has(body.login-page.login-glass-page),
body.login-page.login-glass-page {
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    max-height: 100dvh;
    overflow: hidden !important;
    overscroll-behavior: none;
}

/* Darken the ACTUAL campus background continuously - no local boxes behind text. */
body.login-page.login-glass-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: rgba(4, 17, 11, .36);
}

/* Full-screen stage: fixed viewport composition. */
.login-page.login-glass-page .login-stage {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    padding: 0 !important;
}

/* Desktop/static two-column arrangement. */
@media (min-width: 768px) {
    .login-page.login-glass-page .login-shell,
    .login-page.login-glass-page .login-v9.login-shell {
        width: min(1500px, 100%) !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        margin: 0 auto !important;
        padding:
            clamp(18px, 2.4vh, 30px)
            clamp(28px, 4vw, 68px) !important;

        display: grid !important;
        grid-template-columns:
            minmax(390px, 1fr)
            minmax(390px, 470px) !important;
        align-items: center !important;
        justify-content: center !important;
        gap: clamp(34px, 5vw, 94px) !important;

        overflow: hidden !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    /* LEFT: text only, vertically centered. Absolutely no local panel/card. */
    .login-page.login-glass-page .login-empty-panel {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        align-self: center !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 0 !important;

        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        overflow: visible !important;
    }

    .login-page.login-glass-page .login-empty-panel::before,
    .login-page.login-glass-page .login-empty-panel::after {
        content: none !important;
        display: none !important;
        background: none !important;
    }

    .login-page.login-glass-page .login-left-copy {
        width: min(100%, 540px) !important;
        max-width: 540px !important;
        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;

        text-align: left !important;
        transform: none !important;
    }

    .login-page.login-glass-page .login-left-kicker {
        margin: 0 0 clamp(.55rem, 1.2vh, .9rem) !important;
        font-size: clamp(.65rem, .72vw, .78rem) !important;
    }

    .login-page.login-glass-page .login-left-copy h1 {
        max-width: 520px !important;
        margin: 0 !important;
        font-size: clamp(2.1rem, 3.35vw, 3.85rem) !important;
        line-height: 1.01 !important;
        letter-spacing: -.05em !important;
    }

    .login-page.login-glass-page .login-left-support {
        max-width: 470px !important;
        margin: clamp(.7rem, 1.6vh, 1.15rem) 0 0 !important;
        font-size: clamp(.82rem, 1vw, 1rem) !important;
        line-height: 1.48 !important;
    }

    .login-page.login-glass-page .login-left-accent {
        margin-top: clamp(.7rem, 1.6vh, 1.15rem) !important;
    }

    /* RIGHT: keep the login form centered and fully inside the viewport. */
    .login-page.login-glass-page .auth-panel {
        width: 100% !important;
        max-width: 470px !important;
        max-height: calc(100dvh - clamp(36px, 5vh, 66px)) !important;
        min-height: 0 !important;
        align-self: center !important;
        justify-self: center !important;

        padding:
            clamp(18px, 2.6vh, 30px)
            clamp(22px, 2.2vw, 34px) !important;

        overflow: hidden !important;

        /* Keep the neutral/clear glass itself - NO yellow wash inside. */
        background:
            linear-gradient(
                145deg,
                rgba(240,246,241,.22) 0%,
                rgba(255,255,255,.12) 50%,
                rgba(234,241,235,.18) 100%
            ) !important;
        -webkit-backdrop-filter: blur(11px) saturate(1.03) !important;
        backdrop-filter: blur(11px) saturate(1.03) !important;

        border: 1px solid rgba(255,255,255,.34) !important;
        border-radius: 22px !important;

        /* Yellow is visible ONLY as an external edge halo. */
        box-shadow:
            0 20px 46px rgba(0,0,0,.18),
            0 -4px 16px rgba(253,197,48,.26),
            4px 0 18px rgba(253,197,48,.22),
            0 0 26px rgba(253,197,48,.16),
            -3px 0 14px rgba(20,105,57,.10),
            0 4px 18px rgba(20,105,57,.10) !important;
    }

    /* Thin external yellow rim, not a yellow fill. */
    .login-page.login-glass-page .auth-panel::after {
        content: "";
        position: absolute;
        inset: -1px;
        z-index: 5;
        pointer-events: none;
        border-radius: inherit;
        border:
            1px solid rgba(253,197,48,.48);
        background: transparent !important;
        box-shadow:
            inset 0 0 0 1px rgba(255,255,255,.06),
            0 -2px 8px rgba(253,197,48,.15),
            2px 0 10px rgba(253,197,48,.12);
        -webkit-mask: none !important;
        mask: none !important;
        opacity: 1 !important;
    }

    /* Compact the internal vertical rhythm enough to fit any common desktop browser height. */
    .login-page.login-glass-page .auth-inner {
        height: auto !important;
        max-height: 100% !important;
        overflow: hidden !important;
    }

    .login-page.login-glass-page .back-link {
        margin-bottom: clamp(.55rem, 1.3vh, 1rem) !important;
    }

    .login-page.login-glass-page .auth-heading-login {
        margin-bottom: clamp(.7rem, 1.5vh, 1.15rem) !important;
    }

    .login-page.login-glass-page .auth-heading-login .eyebrow {
        margin-bottom: clamp(.4rem, .8vh, .7rem) !important;
    }

    .login-page.login-glass-page .auth-login-logo img {
        width: clamp(58px, 7vh, 78px) !important;
        height: clamp(58px, 7vh, 78px) !important;
    }

    .login-page.login-glass-page .google-action {
        min-height: clamp(42px, 5.2vh, 50px) !important;
    }

    .login-page.login-glass-page .login-divider {
        margin-block: clamp(.45rem, 1vh, .75rem) !important;
    }

    .login-page.login-glass-page .compact-password-form .form-group {
        margin-bottom: clamp(.45rem, 1vh, .75rem) !important;
    }

    .login-page.login-glass-page .compact-password-form .input-with-icon,
    .login-page.login-glass-page .compact-password-form .form-control {
        min-height: clamp(42px, 5.1vh, 50px) !important;
    }

    .login-page.login-glass-page .login-remember {
        margin:
            clamp(.05rem, .4vh, .25rem)
            0
            clamp(.45rem, 1vh, .8rem) !important;
    }

    .login-page.login-glass-page .password-login-btn {
        min-height: clamp(44px, 5.3vh, 52px) !important;
    }

    /* Explicitly keep yellow light OUT of all controls. */
    .login-page.login-glass-page .google-action,
    .login-page.login-glass-page .compact-password-form .input-with-icon,
    .login-page.login-glass-page .compact-password-form .form-control,
    .login-page.login-glass-page .password-login-btn,
    .login-page.login-glass-page .login-remember {
        filter: none !important;
        text-shadow: none !important;
    }

    .login-page.login-glass-page .compact-password-form .input-with-icon,
    .login-page.login-glass-page .compact-password-form .form-control {
        box-shadow: none !important;
    }
}

/*
 * Mobile: still one-screen/static where practical.
 * Left promotional copy remains hidden.
 * Dynamic viewport avoids the browser chrome causing unnecessary overflow.
 */
@media (max-width: 767.98px) {
    html:has(body.login-page.login-glass-page),
    body.login-page.login-glass-page,
    .login-page.login-glass-page .login-stage {
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
    }

    .login-page.login-glass-page .login-left-copy,
    .login-page.login-glass-page .login-empty-panel {
        display: none !important;
    }

    .login-page.login-glass-page .login-stage {
        display: grid !important;
        place-items: center !important;
        padding: clamp(8px, 1.6vh, 14px) !important;
    }

    .login-page.login-glass-page .login-shell,
    .login-page.login-glass-page .login-v9.login-shell {
        width: min(100%, 430px) !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 16px) !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: block !important;
        overflow: hidden !important;
    }

    .login-page.login-glass-page .auth-panel {
        width: 100% !important;
        max-width: 430px !important;
        max-height: calc(100dvh - 16px) !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding:
            clamp(14px, 2.3vh, 20px)
            clamp(14px, 4vw, 18px) !important;

        overflow: hidden !important;

        background:
            linear-gradient(
                145deg,
                rgba(240,246,241,.20),
                rgba(255,255,255,.11),
                rgba(234,241,235,.17)
            ) !important;

        border: 1px solid rgba(255,255,255,.32) !important;
        box-shadow:
            0 16px 34px rgba(0,0,0,.16),
            0 -3px 12px rgba(253,197,48,.20),
            3px 0 14px rgba(253,197,48,.16),
            0 0 20px rgba(253,197,48,.11),
            0 4px 12px rgba(20,105,57,.08) !important;
    }

    .login-page.login-glass-page .auth-panel::after {
        border-color: rgba(253,197,48,.38) !important;
        box-shadow:
            0 -2px 7px rgba(253,197,48,.12),
            2px 0 8px rgba(253,197,48,.10) !important;
    }

    .login-page.login-glass-page .auth-login-logo img {
        width: clamp(52px, 7.5vh, 66px) !important;
        height: clamp(52px, 7.5vh, 66px) !important;
    }

    .login-page.login-glass-page .back-link {
        margin-bottom: clamp(.4rem, 1vh, .75rem) !important;
    }

    .login-page.login-glass-page .auth-heading-login {
        margin-bottom: clamp(.55rem, 1.2vh, .9rem) !important;
    }

    .login-page.login-glass-page .google-action,
    .login-page.login-glass-page .compact-password-form .input-with-icon,
    .login-page.login-glass-page .compact-password-form .form-control,
    .login-page.login-glass-page .password-login-btn {
        min-height: clamp(42px, 5.6vh, 48px) !important;
    }

    .login-page.login-glass-page .compact-password-form .form-group {
        margin-bottom: clamp(.35rem, .8vh, .6rem) !important;
    }

    .login-page.login-glass-page .login-divider {
        margin-block: clamp(.35rem, .8vh, .6rem) !important;
    }

    .login-page.login-glass-page .login-remember {
        margin:
            0
            0
            clamp(.4rem, .9vh, .65rem) !important;
    }
}

/* Keep browser zoom enabled. Do not use user-scalable=no. */


/* Single .36 veil per spec: neutralize the older stacked stage veil. */
.login-page.login-glass-page .login-stage::before {
    content: none !important;
    display: none !important;
    background: none !important;
}

/* ============================================================
   FINAL DESKTOP BALANCE - TALLER CARD + LARGER LEFT HEADLINE
   + VISIBLE YELLOW SECURITY TEXT
   ============================================================ */

@media (min-width: 768px) {
    /*
     * Reserve a small strip beneath the card for the security statement
     * while keeping the entire composition inside one non-scrollable viewport.
     */
    .login-page.login-glass-page .login-shell,
    .login-page.login-glass-page .login-v9.login-shell {
        padding-top: clamp(18px, 2.2vh, 28px) !important;
        padding-bottom: clamp(54px, 7.2vh, 72px) !important;
    }

    /* Make the Login glass card longer/taller without causing page scroll. */
    .login-page.login-glass-page .auth-panel {
        height: min(760px, calc(100dvh - 104px)) !important;
        max-height: min(760px, calc(100dvh - 104px)) !important;
        min-height: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .login-page.login-glass-page .auth-inner {
        width: 100% !important;
        max-height: 100% !important;
    }

    /*
     * Larger left message to visually balance the taller form.
     * It stays text-only directly on the darkened campus image.
     */
    .login-page.login-glass-page .login-left-copy {
        width: min(100%, 620px) !important;
        max-width: 620px !important;
    }

    .login-page.login-glass-page .login-left-copy h1 {
        max-width: 610px !important;
        font-size: clamp(2.75rem, 4.1vw, 4.85rem) !important;
        line-height: .98 !important;
        letter-spacing: -.055em !important;
    }

    .login-page.login-glass-page .login-left-support {
        max-width: 520px !important;
        font-size: clamp(.9rem, 1.08vw, 1.08rem) !important;
        line-height: 1.5 !important;
    }

    /*
     * Desktop security statement:
     * visible below the form, yellow, text-only, no box or icon.
     */
    .login-page.login-glass-page .login-security-note {
        position: absolute !important;
        z-index: 4 !important;
        right: max(
            clamp(28px, 4vw, 68px),
            calc((100vw - 1500px) / 2 + clamp(28px, 4vw, 68px))
        ) !important;
        bottom: clamp(14px, 2vh, 22px) !important;

        width: min(470px, 36vw) !important;
        max-width: 470px !important;
        margin: 0 !important;
        padding: 0 !important;

        color: #FDC530 !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;

        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;

        font-size: clamp(.72rem, .78vw, .84rem) !important;
        font-weight: 700 !important;
        line-height: 1.35 !important;
        text-align: center !important;
        white-space: normal !important;

        animation: none !important;
        transform: none !important;
        overflow: visible !important;
    }

    .login-page.login-glass-page .login-security-note .brand-x {
        color: #FDC530 !important;
        font-weight: 900 !important;
    }

    .login-page.login-glass-page .login-security-note::before,
    .login-page.login-glass-page .login-security-note::after,
    .login-page.login-glass-page .login-security-note .security-icon {
        content: none !important;
        display: none !important;
    }
}

/*
 * Shorter desktop windows:
 * automatically scale the tall card and heading down instead of scrolling.
 */
@media (min-width: 768px) and (max-height: 760px) {
    .login-page.login-glass-page .auth-panel {
        height: calc(100dvh - 90px) !important;
        max-height: calc(100dvh - 90px) !important;
    }

    .login-page.login-glass-page .login-left-copy h1 {
        font-size: clamp(2.25rem, 3.55vw, 3.75rem) !important;
    }

    .login-page.login-glass-page .login-security-note {
        bottom: 9px !important;
        font-size: .7rem !important;
    }
}

/* Mobile keeps the existing security text behavior and layout. */

/* ============================================================
   CENTERED SECURITY NOTE + WHITE TEXT / YELLOW X
   GREEN-TINTED GLASS WITH YELLOW EDGE ONLY
   ============================================================ */

@media (min-width: 768px) {
    /* Keep the glass itself neutral-green, not yellow-filled. */
    .login-page.login-glass-page .auth-panel {
        background:
            radial-gradient(circle at 18% 22%, rgba(255,255,255,.12), transparent 34%),
            radial-gradient(circle at 84% 16%, rgba(253,197,48,.10), transparent 28%),
            radial-gradient(circle at 12% 88%, rgba(19,116,74,.12), transparent 26%),
            linear-gradient(145deg,
                rgba(255,255,255,.12) 0%,
                rgba(227,238,231,.10) 24%,
                rgba(18,92,59,.17) 58%,
                rgba(253,197,48,.08) 100%) !important;
        border: 1px solid rgba(255,255,255,.30) !important;
        box-shadow:
            0 0 0 1px rgba(255,255,255,.08) inset,
            0 0 0 2px rgba(253,197,48,.14),
            0 0 30px rgba(14,77,49,.24),
            0 0 54px rgba(253,197,48,.20),
            0 22px 56px rgba(0,0,0,.18) !important;
    }

    /* Security note centered below the login card. */
    .login-page.login-glass-page .login-security-note {
        left: auto !important;
        right: max(
            clamp(28px, 4vw, 68px),
            calc((100vw - 1500px) / 2 + clamp(28px, 4vw, 68px))
        ) !important;
        bottom: clamp(14px, 2vh, 22px) !important;
        width: min(470px, 36vw) !important;
        max-width: 470px !important;
        color: rgba(255,255,255,.98) !important;
        text-align: center !important;
        letter-spacing: .01em !important;
        font-weight: 700 !important;
        text-shadow: 0 1px 10px rgba(0,0,0,.18) !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .login-page.login-glass-page .login-security-note .brand-x,
    .login-page.login-glass-page .login-security-note strong,
    .login-page.login-glass-page .login-security-note .brand-accent {
        color: #FDC530 !important;
    }
}

@media (min-width: 768px) and (max-height: 760px) {
    .login-page.login-glass-page .login-security-note {
        bottom: 9px !important;
    }
}

/* ============================================================
   FINAL BACKGROUND EMPHASIS - DARKER CAMPUS IMAGE ONLY
   Keeps form/text/layout/authentication untouched.
   ============================================================ */

/* Darken the actual VSU campus image continuously across the whole page. */
body.login-page.login-glass-page::before {
    background:
        radial-gradient(
            circle at 67% 46%,
            rgba(4, 14, 10, .34) 0%,
            rgba(4, 14, 10, .46) 42%,
            rgba(4, 14, 10, .56) 100%
        ),
        rgba(4, 14, 10, .52) !important;
}

/* Desktop: slightly stronger darkening for clearer left text + form emphasis. */
@media (min-width: 768px) {
    body.login-page.login-glass-page::before {
        background:
            radial-gradient(
                circle at 66% 47%,
                rgba(3, 13, 9, .30) 0%,
                rgba(3, 13, 9, .46) 46%,
                rgba(3, 13, 9, .60) 100%
            ),
            rgba(3, 13, 9, .54) !important;
    }
}

/* Mobile: keep the campus visible but darker than before. */
@media (max-width: 767.98px) {
    body.login-page.login-glass-page::before {
        background:
            linear-gradient(
                rgba(4, 14, 10, .50),
                rgba(4, 14, 10, .58)
            ) !important;
    }
}

/* ============================================================
   FINAL PAGE-CENTER SECURITY TEXT + STRONGER ACCENT LINE
   ============================================================ */

@media (min-width: 768px) {
    /*
     * Security statement is centered to the WHOLE PAGE,
     * not aligned under the right login card.
     */
    .login-page.login-glass-page .login-security-note {
        position: fixed !important;
        z-index: 20 !important;

        left: 50% !important;
        right: auto !important;
        bottom: clamp(12px, 1.8vh, 20px) !important;
        transform: translateX(-50%) !important;

        width: auto !important;
        max-width: min(92vw, 760px) !important;
        margin: 0 !important;
        padding: 0 !important;

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

        color: #FFFFFF !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;

        font-size: clamp(.74rem, .82vw, .88rem) !important;
        font-weight: 700 !important;
        line-height: 1.35 !important;
        text-align: center !important;
        white-space: nowrap !important;

        animation: none !important;
        overflow: visible !important;
    }

    .login-page.login-glass-page .login-security-note .brand-x {
        color: #FDC530 !important;
        font-weight: 900 !important;
    }

    .login-page.login-glass-page .login-security-note::before,
    .login-page.login-glass-page .login-security-note::after,
    .login-page.login-glass-page .login-security-note .security-icon {
        content: none !important;
        display: none !important;
    }

    /*
     * Make the green-to-yellow line under the left text longer
     * and more visible without turning it into a heavy bar.
     */
    .login-page.login-glass-page .login-left-accent {
        width: clamp(240px, 23vw, 340px) !important;
        height: 4px !important;
        margin-top: clamp(1rem, 1.8vh, 1.35rem) !important;
        border-radius: 999px !important;
        overflow: hidden !important;
        background: rgba(255,255,255,.08) !important;
    }

    .login-page.login-glass-page .login-left-accent span {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        border-radius: inherit !important;

        background:
            linear-gradient(
                90deg,
                #146939 0%,
                #1D7A48 34%,
                #FDC530 74%,
                #FFD95A 100%
            ) !important;

        box-shadow:
            0 0 8px rgba(20,105,57,.18),
            0 0 10px rgba(253,197,48,.18) !important;
    }
}

/* Short desktop windows: keep it centered and compact. */
@media (min-width: 768px) and (max-height: 760px) {
    .login-page.login-glass-page .login-security-note {
        bottom: 7px !important;
        font-size: .70rem !important;
    }

    .login-page.login-glass-page .login-left-accent {
        width: clamp(210px, 21vw, 300px) !important;
        height: 3px !important;
    }
}

/* Mobile: keep security text centered and text-only. */
@media (max-width: 767.98px) {
    .login-page.login-glass-page .login-security-note {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        width: min(calc(100vw - 28px), 430px) !important;
        text-align: center !important;
        color: #FFFFFF !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .login-page.login-glass-page .login-security-note .brand-x {
        color: #FDC530 !important;
    }
}

/* ============================================================
   STRICT DARK REFERENCE MATCH
   Goal: darken the CAMPUS IMAGE itself so text/form gain contrast.
   No local panel behind text. No extra yellow wash inside the glass.
   ============================================================ */

/*
 * Use ONE stronger global backdrop treatment instead of stacking
 * multiple uneven overlays. This is intentionally darker than the
 * previous pass and closer to the supplied reference.
 */
body.login-page.login-glass-page::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;

    background:
        radial-gradient(
            ellipse at 68% 45%,
            rgba(2, 10, 7, .34) 0%,
            rgba(2, 10, 7, .48) 42%,
            rgba(2, 10, 7, .64) 78%,
            rgba(2, 10, 7, .70) 100%
        ),
        linear-gradient(
            90deg,
            rgba(2, 10, 7, .64) 0%,
            rgba(2, 10, 7, .58) 42%,
            rgba(2, 10, 7, .54) 67%,
            rgba(2, 10, 7, .61) 100%
        ) !important;
}

/* Remove any secondary full-screen dimmer so the darkness is predictable. */
.login-page.login-glass-page .login-stage::before {
    content: none !important;
    display: none !important;
    background: none !important;
}

/*
 * Left area remains text-only.
 * Never introduce a local rectangle or blur layer behind the copy.
 */
@media (min-width: 768px) {
    .login-page.login-glass-page .login-empty-panel,
    .login-page.login-glass-page .login-left-copy {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    .login-page.login-glass-page .login-empty-panel::before,
    .login-page.login-glass-page .login-empty-panel::after {
        content: none !important;
        display: none !important;
        background: none !important;
    }

    /*
     * Improve copy clarity through contrast only.
     * Keep shadows extremely restrained so the design stays institutional.
     */
    .login-page.login-glass-page .login-left-copy h1 {
        color: #FFFFFF !important;
        text-shadow: 0 3px 18px rgba(0,0,0,.24) !important;
    }

    .login-page.login-glass-page .login-left-support {
        color: rgba(255,255,255,.84) !important;
        text-shadow: 0 2px 12px rgba(0,0,0,.22) !important;
    }

    .login-page.login-glass-page .login-left-kicker {
        color: #FDC530 !important;
        text-shadow: 0 2px 10px rgba(0,0,0,.20) !important;
    }

    /*
     * Keep the glass neutral/green, not yellow.
     * The darker background now supplies the visual separation.
     */
    .login-page.login-glass-page .auth-panel {
        background:
            linear-gradient(
                145deg,
                rgba(19, 82, 48, .18) 0%,
                rgba(232, 239, 233, .13) 48%,
                rgba(20, 62, 39, .20) 100%
            ) !important;

        -webkit-backdrop-filter: blur(10px) saturate(1.02) !important;
        backdrop-filter: blur(10px) saturate(1.02) !important;

        border: 1px solid rgba(255,255,255,.30) !important;

        box-shadow:
            0 22px 48px rgba(0,0,0,.30),
            0 -3px 12px rgba(253,197,48,.18),
            3px 0 13px rgba(253,197,48,.14),
            -3px 0 12px rgba(20,105,57,.12),
            0 4px 14px rgba(20,105,57,.10) !important;
    }

    /*
     * Yellow stays a thin external accent only.
     * No yellow fill inside the glass.
     */
    .login-page.login-glass-page .auth-panel::after {
        background: transparent !important;
        border: 1px solid rgba(253,197,48,.38) !important;
        box-shadow:
            0 -2px 7px rgba(253,197,48,.11),
            2px 0 8px rgba(253,197,48,.08) !important;
    }

    /* Never glow the controls themselves. */
    .login-page.login-glass-page .google-action,
    .login-page.login-glass-page .compact-password-form .input-with-icon,
    .login-page.login-glass-page .compact-password-form .form-control,
    .login-page.login-glass-page .password-login-btn,
    .login-page.login-glass-page .login-remember {
        filter: none !important;
        text-shadow: none !important;
    }

    .login-page.login-glass-page .compact-password-form .input-with-icon,
    .login-page.login-glass-page .compact-password-form .form-control {
        box-shadow: none !important;
    }
}

/* Mobile gets the same darker-image philosophy, slightly softer than desktop. */
@media (max-width: 767.98px) {
    body.login-page.login-glass-page::before {
        background:
            linear-gradient(
                rgba(2, 10, 7, .58),
                rgba(2, 10, 7, .66)
            ) !important;
    }

    .login-page.login-glass-page .auth-panel {
        background:
            linear-gradient(
                145deg,
                rgba(19,82,48,.17),
                rgba(232,239,233,.12),
                rgba(20,62,39,.18)
            ) !important;
    }
}


/* ================================================================
   MERGED PATCH: login-viewport-fit.css (viewport-fit / zoom-resilient)
   Appended per EduSchedX_Login_ViewportFit_ZoomResponsive_Static.zip
   ================================================================ */

/* ==========================================================================
   EDUSCHEDX LOGIN — VIEWPORT-FIT / ZOOM-RESILIENT RESPONSIVE OVERRIDES
   --------------------------------------------------------------------------
   Goals:
   - Normal desktop: full two-column composition.
   - Browser zoom / shorter viewport: compact automatically.
   - Login button and all auth controls remain visible.
   - Very high zoom / narrow desktop: prioritize the auth form and hide the
     decorative left marketing copy instead of clipping the Login button.
   - Mobile: form-only layout, viewport-fit.
   - Browser zoom remains enabled. Do NOT add user-scalable=no.
   ========================================================================== */

:root {
    --edx-login-max-card: 470px;
    --edx-login-page-pad-x: clamp(22px, 4vw, 64px);
    --edx-login-page-pad-y: clamp(12px, 2.1dvh, 24px);
}

/* --------------------------------------------------------------------------
   1. ONE VIEWPORT / NO NORMAL PAGE SCROLL
   -------------------------------------------------------------------------- */

html:has(body.login-page.login-glass-page),
body.login-page.login-glass-page {
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    max-height: 100dvh;
    overflow: hidden !important;
    overscroll-behavior: none;
}

.login-page.login-glass-page .login-stage {
    width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
}

/* --------------------------------------------------------------------------
   2. NORMAL DESKTOP: STABLE TWO-COLUMN COMPOSITION
   -------------------------------------------------------------------------- */

@media (min-width: 1101px) {
    .login-page.login-glass-page .login-shell,
    .login-page.login-glass-page .login-v9.login-shell {
        width: min(1500px, 100%) !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;

        margin: 0 auto !important;
        padding:
            var(--edx-login-page-pad-y)
            var(--edx-login-page-pad-x)
            clamp(36px, 5.5dvh, 58px) !important;

        display: grid !important;
        grid-template-columns:
            minmax(0, 1fr)
            minmax(390px, var(--edx-login-max-card)) !important;
        align-items: center !important;
        justify-content: center !important;
        gap: clamp(30px, 4.7vw, 84px) !important;

        overflow: hidden !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    /* LEFT copy stays vertically centered and never determines page height. */
    .login-page.login-glass-page .login-empty-panel {
        min-height: 0 !important;
        height: auto !important;
        align-self: center !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .login-page.login-glass-page .login-left-copy {
        width: min(100%, 620px) !important;
        max-width: 620px !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
    }

    .login-page.login-glass-page .login-left-copy h1 {
        max-width: 610px !important;
        margin: 0 !important;
        font-size: clamp(2.65rem, 3.85vw, 4.55rem) !important;
        line-height: .98 !important;
        letter-spacing: -.052em !important;
    }

    .login-page.login-glass-page .login-left-support {
        max-width: 520px !important;
        margin-top: clamp(.65rem, 1.3dvh, 1rem) !important;
        font-size: clamp(.86rem, .95vw, 1.02rem) !important;
        line-height: 1.46 !important;
    }

    /* CARD: auto-height, not a forced tall box. */
    .login-page.login-glass-page .auth-panel {
        width: 100% !important;
        max-width: var(--edx-login-max-card) !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 74px) !important;

        justify-self: center !important;
        align-self: center !important;

        padding:
            clamp(17px, 2.15dvh, 27px)
            clamp(22px, 2.1vw, 32px) !important;

        overflow: visible !important;
        transform-origin: center center !important;
    }

    .login-page.login-glass-page .auth-inner {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* Compact vertical rhythm so 100% browser zoom fits without clipping. */
    .login-page.login-glass-page .back-link {
        margin-bottom: clamp(.45rem, .9dvh, .75rem) !important;
    }

    .login-page.login-glass-page .auth-heading-login {
        margin-bottom: clamp(.55rem, 1.05dvh, .85rem) !important;
    }

    .login-page.login-glass-page .auth-heading-login .eyebrow {
        margin-bottom: clamp(.3rem, .65dvh, .55rem) !important;
    }

    .login-page.login-glass-page .auth-login-logo img {
        width: clamp(52px, 6.5dvh, 72px) !important;
        height: clamp(52px, 6.5dvh, 72px) !important;
    }

    .login-page.login-glass-page .google-action {
        min-height: clamp(42px, 5.0dvh, 48px) !important;
    }

    .login-page.login-glass-page .login-divider {
        margin-block: clamp(.32rem, .75dvh, .58rem) !important;
    }

    .login-page.login-glass-page .compact-password-form .form-group {
        margin-bottom: clamp(.36rem, .8dvh, .62rem) !important;
    }

    .login-page.login-glass-page .compact-password-form .input-with-icon,
    .login-page.login-glass-page .compact-password-form .form-control {
        min-height: clamp(42px, 5.0dvh, 49px) !important;
    }

    .login-page.login-glass-page .login-remember {
        margin:
            clamp(.02rem, .25dvh, .15rem)
            0
            clamp(.42rem, .8dvh, .68rem) !important;
    }

    .login-page.login-glass-page .password-login-btn {
        min-height: clamp(43px, 5.1dvh, 50px) !important;
    }
}

/* --------------------------------------------------------------------------
   3. SHORT DESKTOP / COMMON BROWSER ZOOM LEVELS
   These rules are triggered because browser zoom reduces the CSS viewport.
   -------------------------------------------------------------------------- */

/* Roughly equivalent to common 110–125% zoom / short laptop windows. */
@media (min-width: 1101px) and (max-height: 820px) {
    .login-page.login-glass-page .login-shell,
    .login-page.login-glass-page .login-v9.login-shell {
        padding-top: 10px !important;
        padding-bottom: 34px !important;
        gap: clamp(24px, 4vw, 62px) !important;
    }

    .login-page.login-glass-page .auth-panel {
        padding: 14px 26px !important;
    }

    .login-page.login-glass-page .auth-login-logo img {
        width: 54px !important;
        height: 54px !important;
    }

    .login-page.login-glass-page .back-link {
        margin-bottom: .4rem !important;
        font-size: .80rem !important;
    }

    .login-page.login-glass-page .auth-heading-login {
        margin-bottom: .5rem !important;
    }

    .login-page.login-glass-page .google-action {
        min-height: 41px !important;
    }

    .login-page.login-glass-page .login-divider {
        margin-block: .28rem !important;
    }

    .login-page.login-glass-page .compact-password-form .form-group {
        margin-bottom: .32rem !important;
    }

    .login-page.login-glass-page .compact-password-form .input-with-icon,
    .login-page.login-glass-page .compact-password-form .form-control {
        min-height: 41px !important;
    }

    .login-page.login-glass-page .login-remember {
        margin-bottom: .42rem !important;
    }

    .login-page.login-glass-page .password-login-btn {
        min-height: 43px !important;
    }

    .login-page.login-glass-page .login-left-copy h1 {
        font-size: clamp(2.35rem, 3.55vw, 3.75rem) !important;
    }
}

/* Stronger zoom / very short desktop. Scale the decorative composition down. */
@media (min-width: 1101px) and (max-height: 700px) {
    .login-page.login-glass-page .auth-panel {
        scale: .88;
    }

    .login-page.login-glass-page .login-left-copy {
        scale: .90;
        transform-origin: left center !important;
    }

    .login-page.login-glass-page .login-security-note {
        font-size: .68rem !important;
        bottom: 5px !important;
    }
}

@media (min-width: 1101px) and (max-height: 620px) {
    .login-page.login-glass-page .auth-panel {
        scale: .79;
    }

    .login-page.login-glass-page .login-left-copy {
        scale: .80;
        transform-origin: left center !important;
    }
}

/* --------------------------------------------------------------------------
   4. HIGH BROWSER ZOOM / NARROW DESKTOP
   UX priority: login functionality over decorative content.
   -------------------------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 1100px) {
    .login-page.login-glass-page .login-shell,
    .login-page.login-glass-page .login-v9.login-shell {
        width: 100% !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;

        margin: 0 !important;
        padding: 12px 22px 38px !important;

        display: grid !important;
        grid-template-columns: 1fr !important;
        place-items: center !important;
        overflow: hidden !important;
    }

    /* Decorative copy is removed at high zoom to keep all form controls visible. */
    .login-page.login-glass-page .login-empty-panel,
    .login-page.login-glass-page .login-left-copy {
        display: none !important;
    }

    .login-page.login-glass-page .auth-panel {
        width: min(100%, 455px) !important;
        max-width: 455px !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 54px) !important;
        margin: 0 !important;
        padding:
            clamp(14px, 2dvh, 22px)
            clamp(20px, 3vw, 28px) !important;
        overflow: visible !important;
        scale: 1 !important;
    }

    .login-page.login-glass-page .auth-login-logo img {
        width: clamp(50px, 6dvh, 62px) !important;
        height: clamp(50px, 6dvh, 62px) !important;
    }

    .login-page.login-glass-page .back-link {
        margin-bottom: .45rem !important;
    }

    .login-page.login-glass-page .auth-heading-login {
        margin-bottom: .55rem !important;
    }

    .login-page.login-glass-page .google-action,
    .login-page.login-glass-page .compact-password-form .input-with-icon,
    .login-page.login-glass-page .compact-password-form .form-control,
    .login-page.login-glass-page .password-login-btn {
        min-height: 42px !important;
    }

    .login-page.login-glass-page .login-divider {
        margin-block: .3rem !important;
    }

    .login-page.login-glass-page .compact-password-form .form-group {
        margin-bottom: .34rem !important;
    }

    .login-page.login-glass-page .login-remember {
        margin-bottom: .45rem !important;
    }
}

/* Very short + zoomed desktop: proportional fit without page scrolling. */
@media (min-width: 768px) and (max-width: 1100px) and (max-height: 650px) {
    .login-page.login-glass-page .auth-panel {
        scale: .84;
    }
}

/* --------------------------------------------------------------------------
   5. MOBILE: FORM-FIRST, VIEWPORT-FIT
   -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
    html:has(body.login-page.login-glass-page),
    body.login-page.login-glass-page,
    .login-page.login-glass-page .login-stage {
        width: 100% !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
    }

    .login-page.login-glass-page .login-empty-panel,
    .login-page.login-glass-page .login-left-copy {
        display: none !important;
    }

    .login-page.login-glass-page .login-stage {
        display: grid !important;
        place-items: center !important;
        padding: 8px !important;
    }

    .login-page.login-glass-page .login-shell,
    .login-page.login-glass-page .login-v9.login-shell {
        width: min(100%, 430px) !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 12px) !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        overflow: visible !important;
    }

    .login-page.login-glass-page .auth-panel {
        width: 100% !important;
        max-width: 430px !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 14px) !important;
        margin: 0 !important;

        padding:
            clamp(12px, 1.8dvh, 18px)
            clamp(14px, 4vw, 18px) !important;

        overflow: visible !important;
        scale: 1 !important;
    }

    .login-page.login-glass-page .back-link {
        margin-bottom: .45rem !important;
        font-size: .80rem !important;
    }

    .login-page.login-glass-page .auth-heading-login {
        margin-bottom: .5rem !important;
    }

    .login-page.login-glass-page .auth-heading-login .eyebrow {
        margin-bottom: .34rem !important;
        font-size: .72rem !important;
    }

    .login-page.login-glass-page .auth-login-logo img {
        width: clamp(48px, 6.5dvh, 60px) !important;
        height: clamp(48px, 6.5dvh, 60px) !important;
    }

    .login-page.login-glass-page .google-action,
    .login-page.login-glass-page .compact-password-form .input-with-icon,
    .login-page.login-glass-page .compact-password-form .form-control,
    .login-page.login-glass-page .password-login-btn {
        min-height: clamp(40px, 5.2dvh, 46px) !important;
    }

    .login-page.login-glass-page .login-divider {
        margin-block: .28rem !important;
    }

    .login-page.login-glass-page .compact-password-form .form-group {
        margin-bottom: .30rem !important;
    }

    .login-page.login-glass-page .login-remember {
        margin: 0 0 .42rem !important;
        font-size: .78rem !important;
    }

    .login-page.login-glass-page .login-security-note {
        bottom: 4px !important;
        font-size: .66rem !important;
        max-width: calc(100vw - 20px) !important;
    }
}

/* Short mobile viewports: compact rather than clip the Login button. */
@media (max-width: 767.98px) and (max-height: 700px) {
    .login-page.login-glass-page .auth-panel {
        scale: .90;
    }
}

@media (max-width: 767.98px) and (max-height: 610px) {
    .login-page.login-glass-page .auth-panel {
        scale: .80;
    }

    .login-page.login-glass-page .login-security-note {
        display: none !important;
    }
}

/* --------------------------------------------------------------------------
   6. SAFETY
   --------------------------------------------------------------------------
   Do not add user-scalable=no to viewport meta.
   Browser zoom remains available for accessibility.
   -------------------------------------------------------------------------- */


/* ================================================================
   MERGED PATCH: login-static-larger-balance.css (static larger form/headline)
   Appended per EduSchedX_Login_Static_LargerForm_LargerHeadline.zip
   ================================================================ */

/* ==========================================================================
   EDUSCHEDX LOGIN — STATIC LARGER BALANCED DESKTOP COMPOSITION
   --------------------------------------------------------------------------
   Goals:
   - Keep the same clean two-column static view.
   - Larger right-side Login form.
   - Larger left "Generate clear, conflict-free class schedules." heading.
   - No normal desktop page scroll.
   - Login button remains fully visible.
   - Mobile remains responsive and usable.
   ========================================================================== */

:root {
    --edx-static-card-width: 540px;
    --edx-static-shell-width: 1540px;
}

/* One stable viewport. */
html:has(body.login-page.login-glass-page),
body.login-page.login-glass-page {
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    max-height: 100dvh;
    overflow: hidden !important;
}

.login-page.login-glass-page .login-stage {
    width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
}

/* ============================================================
   LARGE DESKTOP / NORMAL VIEW
   ============================================================ */
@media (min-width: 1181px) {

    .login-page.login-glass-page .login-shell,
    .login-page.login-glass-page .login-v9.login-shell {
        width: min(var(--edx-static-shell-width), 100%) !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;

        margin: 0 auto !important;
        padding:
            clamp(18px, 2.2dvh, 30px)
            clamp(34px, 4.2vw, 72px)
            clamp(42px, 5dvh, 58px) !important;

        display: grid !important;
        grid-template-columns:
            minmax(0, 1fr)
            minmax(470px, var(--edx-static-card-width)) !important;
        align-items: center !important;
        justify-content: center !important;
        gap: clamp(42px, 5vw, 92px) !important;

        overflow: hidden !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    /* LEFT SIDE — larger typography, still text-only. */
    .login-page.login-glass-page .login-empty-panel {
        min-height: 0 !important;
        height: auto !important;
        align-self: center !important;
        padding: 0 !important;
        overflow: visible !important;

        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    .login-page.login-glass-page .login-left-copy {
        width: min(100%, 690px) !important;
        max-width: 690px !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
    }

    .login-page.login-glass-page .login-left-kicker {
        margin: 0 0 clamp(.7rem, 1.2dvh, .95rem) !important;
        font-size: clamp(.72rem, .78vw, .88rem) !important;
        letter-spacing: .16em !important;
    }

    .login-page.login-glass-page .login-left-copy h1 {
        max-width: 680px !important;
        margin: 0 !important;

        font-size: clamp(3.1rem, 4.25vw, 5.15rem) !important;
        line-height: .97 !important;
        letter-spacing: -.055em !important;

        color: #FFFFFF !important;
    }

    .login-page.login-glass-page .login-left-support {
        max-width: 575px !important;
        margin-top: clamp(.8rem, 1.45dvh, 1.2rem) !important;

        font-size: clamp(.95rem, 1.06vw, 1.12rem) !important;
        line-height: 1.48 !important;
    }

    .login-page.login-glass-page .login-left-accent {
        width: clamp(280px, 25vw, 380px) !important;
        margin-top: clamp(.9rem, 1.5dvh, 1.25rem) !important;
    }

    /* RIGHT SIDE — larger form, but still viewport-safe. */
    .login-page.login-glass-page .auth-panel {
        width: 100% !important;
        max-width: var(--edx-static-card-width) !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 78px) !important;

        justify-self: center !important;
        align-self: center !important;

        padding:
            clamp(22px, 2.6dvh, 32px)
            clamp(30px, 2.7vw, 40px) !important;

        overflow: visible !important;
        transform: none !important;
        scale: 1 !important;
    }

    .login-page.login-glass-page .auth-inner {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* Slightly enlarge form typography / controls proportionally. */
    .login-page.login-glass-page .back-link {
        font-size: clamp(.84rem, .86vw, .94rem) !important;
        margin-bottom: clamp(.55rem, 1dvh, .85rem) !important;
    }

    .login-page.login-glass-page .auth-heading-login .eyebrow {
        font-size: clamp(.78rem, .82vw, .88rem) !important;
        margin-bottom: clamp(.35rem, .7dvh, .6rem) !important;
    }

    .login-page.login-glass-page .auth-heading-login {
        margin-bottom: clamp(.65rem, 1.15dvh, .95rem) !important;
    }

    .login-page.login-glass-page .auth-login-logo img {
        width: clamp(66px, 7.3dvh, 82px) !important;
        height: clamp(66px, 7.3dvh, 82px) !important;
    }

    .login-page.login-glass-page .google-action {
        min-height: clamp(48px, 5.6dvh, 56px) !important;
        font-size: clamp(.9rem, .92vw, 1rem) !important;
    }

    .login-page.login-glass-page .login-divider {
        margin-block: clamp(.42rem, .82dvh, .68rem) !important;
    }

    .login-page.login-glass-page .compact-password-form .form-group {
        margin-bottom: clamp(.44rem, .88dvh, .68rem) !important;
    }

    .login-page.login-glass-page .compact-password-form .form-group > label,
    .login-page.login-glass-page .compact-password-form .label-row label,
    .login-page.login-glass-page .compact-password-form .label-row a {
        font-size: clamp(.84rem, .86vw, .94rem) !important;
    }

    .login-page.login-glass-page .compact-password-form .input-with-icon,
    .login-page.login-glass-page .compact-password-form .form-control {
        min-height: clamp(47px, 5.5dvh, 55px) !important;
        font-size: clamp(.9rem, .94vw, 1rem) !important;
    }

    .login-page.login-glass-page .login-remember {
        margin:
            clamp(.04rem, .3dvh, .18rem)
            0
            clamp(.52rem, 1dvh, .78rem) !important;

        font-size: clamp(.8rem, .84vw, .9rem) !important;
    }

    .login-page.login-glass-page .password-login-btn {
        min-height: clamp(48px, 5.6dvh, 56px) !important;
        font-size: clamp(.92rem, .95vw, 1rem) !important;
    }
}

/* ============================================================
   SHORTER DESKTOP — keep same composition, compact enough to fit
   ============================================================ */
@media (min-width: 1181px) and (max-height: 820px) {
    .login-page.login-glass-page .login-shell,
    .login-page.login-glass-page .login-v9.login-shell {
        padding-top: 10px !important;
        padding-bottom: 30px !important;
    }

    .login-page.login-glass-page .auth-panel {
        max-width: 520px !important;
        padding: 16px 30px !important;
    }

    .login-page.login-glass-page .auth-login-logo img {
        width: 58px !important;
        height: 58px !important;
    }

    .login-page.login-glass-page .google-action,
    .login-page.login-glass-page .compact-password-form .input-with-icon,
    .login-page.login-glass-page .compact-password-form .form-control,
    .login-page.login-glass-page .password-login-btn {
        min-height: 43px !important;
    }

    .login-page.login-glass-page .login-divider {
        margin-block: .3rem !important;
    }

    .login-page.login-glass-page .compact-password-form .form-group {
        margin-bottom: .34rem !important;
    }

    .login-page.login-glass-page .login-remember {
        margin-bottom: .42rem !important;
    }

    .login-page.login-glass-page .login-left-copy h1 {
        font-size: clamp(2.75rem, 3.75vw, 4.15rem) !important;
    }

    .login-page.login-glass-page .login-left-support {
        font-size: .92rem !important;
    }
}

/* Very short desktop: same static visual, proportional reduction only. */
@media (min-width: 1181px) and (max-height: 690px) {
    .login-page.login-glass-page .auth-panel {
        scale: .88 !important;
    }

    .login-page.login-glass-page .login-left-copy {
        scale: .90 !important;
        transform-origin: left center !important;
    }
}

/* ============================================================
   TABLET / HIGH ZOOM DESKTOP
   Keep auth visible; decorative text can collapse when needed.
   ============================================================ */
@media (min-width: 768px) and (max-width: 1180px) {
    .login-page.login-glass-page .login-shell,
    .login-page.login-glass-page .login-v9.login-shell {
        width: 100% !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;

        margin: 0 !important;
        padding: 12px 22px 36px !important;

        display: grid !important;
        grid-template-columns: 1fr !important;
        place-items: center !important;
        overflow: hidden !important;
    }

    .login-page.login-glass-page .login-empty-panel,
    .login-page.login-glass-page .login-left-copy {
        display: none !important;
    }

    .login-page.login-glass-page .auth-panel {
        width: min(100%, 520px) !important;
        max-width: 520px !important;
        height: auto !important;
        max-height: calc(100dvh - 54px) !important;
        margin: 0 !important;
        padding:
            clamp(16px, 2dvh, 24px)
            clamp(24px, 3vw, 32px) !important;
        overflow: visible !important;
        scale: 1 !important;
    }

    .login-page.login-glass-page .google-action,
    .login-page.login-glass-page .compact-password-form .input-with-icon,
    .login-page.login-glass-page .compact-password-form .form-control,
    .login-page.login-glass-page .password-login-btn {
        min-height: 44px !important;
    }
}

@media (min-width: 768px) and (max-width: 1180px) and (max-height: 650px) {
    .login-page.login-glass-page .auth-panel {
        scale: .84 !important;
    }
}

/* ============================================================
   MOBILE — adapt cleanly, form-first
   ============================================================ */
@media (max-width: 767.98px) {
    html:has(body.login-page.login-glass-page),
    body.login-page.login-glass-page,
    .login-page.login-glass-page .login-stage {
        width: 100% !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
    }

    .login-page.login-glass-page .login-empty-panel,
    .login-page.login-glass-page .login-left-copy {
        display: none !important;
    }

    .login-page.login-glass-page .login-stage {
        display: grid !important;
        place-items: center !important;
        padding: 8px !important;
    }

    .login-page.login-glass-page .login-shell,
    .login-page.login-glass-page .login-v9.login-shell {
        width: min(100%, 440px) !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 12px) !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        overflow: visible !important;
    }

    .login-page.login-glass-page .auth-panel {
        width: 100% !important;
        max-width: 440px !important;
        height: auto !important;
        max-height: calc(100dvh - 14px) !important;
        margin: 0 !important;

        padding:
            clamp(13px, 1.9dvh, 19px)
            clamp(15px, 4vw, 20px) !important;

        overflow: visible !important;
        scale: 1 !important;
    }

    .login-page.login-glass-page .auth-login-logo img {
        width: clamp(52px, 6.8dvh, 64px) !important;
        height: clamp(52px, 6.8dvh, 64px) !important;
    }

    .login-page.login-glass-page .google-action,
    .login-page.login-glass-page .compact-password-form .input-with-icon,
    .login-page.login-glass-page .compact-password-form .form-control,
    .login-page.login-glass-page .password-login-btn {
        min-height: clamp(41px, 5.3dvh, 47px) !important;
    }
}

@media (max-width: 767.98px) and (max-height: 700px) {
    .login-page.login-glass-page .auth-panel {
        scale: .90 !important;
    }
}

@media (max-width: 767.98px) and (max-height: 610px) {
    .login-page.login-glass-page .auth-panel {
        scale: .81 !important;
    }

    .login-page.login-glass-page .login-security-note {
        display: none !important;
    }
}

/* Browser zoom must remain enabled for accessibility. */


/* ================================================================
   MERGED PATCH: login-taller-form-same-width.css (taller form, same width)
   Appended per EduSchedX_Login_TallerForm_SameWidth.zip
   ================================================================ */

/* ==========================================================================
   EDUSCHEDX LOGIN — TALLER FORM, SAME WIDTH
   --------------------------------------------------------------------------
   Purpose:
   - Make the right Login glass card longer/taller vertically.
   - DO NOT increase card width.
   - Keep all controls visible.
   - Keep the current static two-column desktop composition.
   - Automatically reduce height only when the viewport is too short.
   ========================================================================== */

/* --------------------------------------------------------------------------
   DESKTOP — make the card taller without widening it
   -------------------------------------------------------------------------- */
@media (min-width: 1181px) {

    .login-page.login-glass-page .auth-panel {
        /* Keep the current width. */
        width: 100% !important;
        max-width: 540px !important;

        /*
         * Add vertical length.
         * The card grows to about 72–78% of viewport height,
         * but never exceeds the usable browser height.
         */
        height: clamp(660px, 77dvh, 760px) !important;
        min-height: clamp(660px, 77dvh, 760px) !important;
        max-height: calc(100dvh - 66px) !important;

        /* Do not change horizontal size. */
        justify-self: center !important;
        align-self: center !important;

        /*
         * Keep internal content comfortably distributed through
         * the taller card instead of stretching the fields.
         */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        padding:
            clamp(28px, 3.2dvh, 38px)
            clamp(30px, 2.7vw, 40px) !important;

        overflow: visible !important;
    }

    .login-page.login-glass-page .auth-inner {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: 100% !important;

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

        overflow: visible !important;
    }

    /*
     * Slightly increase the vertical breathing room so the taller card
     * looks intentional, without making the form controls larger.
     */
    .login-page.login-glass-page .back-link {
        margin-bottom: clamp(.65rem, 1.25dvh, 1rem) !important;
    }

    .login-page.login-glass-page .auth-heading-login {
        margin-bottom: clamp(.8rem, 1.4dvh, 1.15rem) !important;
    }

    .login-page.login-glass-page .login-divider {
        margin-block: clamp(.5rem, 1dvh, .8rem) !important;
    }

    .login-page.login-glass-page .compact-password-form .form-group {
        margin-bottom: clamp(.55rem, 1.05dvh, .85rem) !important;
    }

    .login-page.login-glass-page .login-remember {
        margin:
            clamp(.10rem, .35dvh, .22rem)
            0
            clamp(.65rem, 1.2dvh, .95rem) !important;
    }
}

/* --------------------------------------------------------------------------
   STANDARD LAPTOP HEIGHTS
   Keep the form visibly taller but guarantee the Login button remains visible.
   -------------------------------------------------------------------------- */
@media (min-width: 1181px) and (max-height: 860px) {
    .login-page.login-glass-page .auth-panel {
        height: calc(100dvh - 72px) !important;
        min-height: calc(100dvh - 72px) !important;
        max-height: calc(100dvh - 72px) !important;

        padding:
            clamp(19px, 2.3dvh, 28px)
            32px !important;
    }

    .login-page.login-glass-page .back-link {
        margin-bottom: .5rem !important;
    }

    .login-page.login-glass-page .auth-heading-login {
        margin-bottom: .65rem !important;
    }

    .login-page.login-glass-page .login-divider {
        margin-block: .4rem !important;
    }

    .login-page.login-glass-page .compact-password-form .form-group {
        margin-bottom: .42rem !important;
    }

    .login-page.login-glass-page .login-remember {
        margin-bottom: .55rem !important;
    }
}

/* --------------------------------------------------------------------------
   SHORT DESKTOP
   Do not force excessive height when the available viewport is too short.
   -------------------------------------------------------------------------- */
@media (min-width: 1181px) and (max-height: 720px) {
    .login-page.login-glass-page .auth-panel {
        height: calc(100dvh - 54px) !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 54px) !important;

        padding: 13px 28px !important;
    }

    .login-page.login-glass-page .auth-login-logo img {
        width: 52px !important;
        height: 52px !important;
    }

    .login-page.login-glass-page .google-action,
    .login-page.login-glass-page .compact-password-form .input-with-icon,
    .login-page.login-glass-page .compact-password-form .form-control,
    .login-page.login-glass-page .password-login-btn {
        min-height: 41px !important;
    }

    .login-page.login-glass-page .back-link,
    .login-page.login-glass-page .auth-heading-login,
    .login-page.login-glass-page .login-divider,
    .login-page.login-glass-page .compact-password-form .form-group,
    .login-page.login-glass-page .login-remember {
        margin-top: 0 !important;
        margin-bottom: .30rem !important;
    }
}

/* --------------------------------------------------------------------------
   TABLET / HIGH ZOOM DESKTOP
   Preserve current responsive behavior; do not force the tall desktop card.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1180px) {
    .login-page.login-glass-page .auth-panel {
        width: min(100%, 520px) !important;
        max-width: 520px !important;

        height: auto !important;
        min-height: min(650px, calc(100dvh - 42px)) !important;
        max-height: calc(100dvh - 42px) !important;

        padding:
            clamp(18px, 2.2dvh, 26px)
            clamp(24px, 3vw, 32px) !important;
    }
}

/* --------------------------------------------------------------------------
   MOBILE
   Do not force the desktop tall-card height. Keep the current responsive fit.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .login-page.login-glass-page .auth-panel {
        width: 100% !important;
        max-width: 440px !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 14px) !important;
    }
}

/* Browser zoom remains enabled for accessibility. */


/* ================================================================
   MERGED PATCH: login-narrower-form-wider-text.css (narrower form, wider left text)
   Appended per EduSchedX_Login_NarrowerForm_WiderLeftText.zip
   ================================================================ */

/* ==========================================================================
   EDUSCHEDX LOGIN — NARROWER FORM / WIDER LEFT TEXT
   UI ONLY
   --------------------------------------------------------------------------
   Goal:
   - Reduce desktop Login card width slightly.
   - Give the left message more horizontal room.
   - Make the main heading wrap into longer, cleaner lines.
   - Keep height, glass styling, lighting, fields, and auth behavior unchanged.
   ========================================================================== */

@media (min-width: 1181px) {

    /* Give more space to the left content by narrowing only the right column. */
    .login-page.login-glass-page .login-shell,
    .login-page.login-glass-page .login-v9.login-shell {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(440px, 500px) !important;

        gap: clamp(34px, 4.2vw, 74px) !important;
    }

    /* Login card becomes slightly narrower, NOT shorter. */
    .login-page.login-glass-page .auth-panel {
        width: 100% !important;
        max-width: 500px !important;

        /* Preserve current vertical sizing/length from the existing project. */
        justify-self: center !important;
        align-self: center !important;
    }

    /* Let the left content use the newly available horizontal space. */
    .login-page.login-glass-page .login-left-copy {
        width: min(100%, 760px) !important;
        max-width: 760px !important;
    }

    .login-page.login-glass-page .login-left-copy h1 {
        width: 100% !important;
        max-width: 760px !important;

        /*
         * Preserve the strong heading size while allowing longer lines.
         * This should reduce unnecessary line breaks.
         */
        font-size: clamp(3rem, 4vw, 4.85rem) !important;
        line-height: .98 !important;
        letter-spacing: -.055em !important;
    }

    .login-page.login-glass-page .login-left-support {
        max-width: 650px !important;
    }

    .login-page.login-glass-page .login-left-accent {
        width: clamp(300px, 27vw, 410px) !important;
    }
}

/* Standard laptop widths: keep the same visual priority. */
@media (min-width: 1181px) and (max-width: 1450px) {
    .login-page.login-glass-page .auth-panel {
        max-width: 485px !important;
    }

    .login-page.login-glass-page .login-shell,
    .login-page.login-glass-page .login-v9.login-shell {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(430px, 485px) !important;
        gap: clamp(30px, 3.8vw, 58px) !important;
    }

    .login-page.login-glass-page .login-left-copy {
        max-width: 720px !important;
    }

    .login-page.login-glass-page .login-left-copy h1 {
        max-width: 720px !important;
        font-size: clamp(2.75rem, 3.8vw, 4.25rem) !important;
    }
}

/* Tablet/high zoom/mobile keep the project's existing responsive behavior. */
@media (max-width: 1180px) {
    .login-page.login-glass-page .auth-panel {
        /* Do not force the desktop narrower-width behavior here. */
        width: min(100%, 520px) !important;
    }
}


/* ================================================================
   MERGED PATCH: login-white-edge-optimized-text.css (white edge, neutral glass, centered security)
   Appended per EduSchedX_Login_WhiteEdge_OptimizedHeadline_SecurityCenter.zip
   ================================================================ */

/* ==========================================================================
   EDUSCHEDX LOGIN — MINIMAL WHITE EDGE + NEUTRAL GREEN GLASS
   + CENTERED SECURITY NOTICE
   UI ONLY — no authentication/backend changes
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. REMOVE YELLOW FROM GLASS INTERIOR AND CARD EDGE
   -------------------------------------------------------------------------- */

.login-page.login-glass-page .auth-panel {
    /* Green-neutral translucent glass; no yellow tint. */
    background:
        linear-gradient(
            145deg,
            rgba(18, 72, 47, .30) 0%,
            rgba(228, 237, 231, .18) 48%,
            rgba(22, 58, 41, .27) 100%
        ) !important;

    /*
     * Slightly reduce saturation so yellow elements in the campus photo
     * do not strongly bleed through the glass.
     */
    -webkit-backdrop-filter: blur(10px) saturate(.82) !important;
    backdrop-filter: blur(10px) saturate(.82) !important;

    border: 1px solid rgba(255,255,255,.46) !important;

    /* Minimal white outer light only. */
    box-shadow:
        0 20px 44px rgba(0,0,0,.24),
        0 0 0 1px rgba(255,255,255,.08),
        0 0 14px rgba(255,255,255,.18),
        0 0 28px rgba(255,255,255,.08) !important;
}

/* Remove all yellow/green edge lighting and replace with a thin white rim. */
.login-page.login-glass-page .auth-panel::after {
    content: "" !important;
    position: absolute !important;
    inset: -1px !important;
    pointer-events: none !important;
    border-radius: inherit !important;

    background: transparent !important;
    border: 1px solid rgba(255,255,255,.55) !important;

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.04),
        0 -2px 7px rgba(255,255,255,.10),
        2px 0 8px rgba(255,255,255,.08),
        0 2px 7px rgba(255,255,255,.06) !important;

    opacity: 1 !important;
}

/* Explicitly remove colored light from form controls. */
.login-page.login-glass-page .google-action,
.login-page.login-glass-page .compact-password-form .input-with-icon,
.login-page.login-glass-page .compact-password-form .form-control,
.login-page.login-glass-page .password-login-btn,
.login-page.login-glass-page .login-remember {
    filter: none !important;
    text-shadow: none !important;
}

.login-page.login-glass-page .compact-password-form .input-with-icon,
.login-page.login-glass-page .compact-password-form .form-control {
    box-shadow: none !important;
}

/* Keep focus accessible but minimal. */
.login-page.login-glass-page .compact-password-form .input-with-icon:focus-within,
.login-page.login-glass-page .edx-forgot-field:focus-within {
    border-bottom-color: rgba(255,255,255,.90) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.22) !important;
}

/* --------------------------------------------------------------------------
   2. SECURITY NOTICE — CENTERED TO WHOLE PAGE
   "EduSchedX" remains one word; only the X is yellow.
   -------------------------------------------------------------------------- */

.login-page.login-glass-page .login-security-note {
    position: fixed !important;
    z-index: 30 !important;

    left: 50% !important;
    right: auto !important;
    bottom: clamp(7px, 1.25dvh, 14px) !important;
    transform: translateX(-50%) !important;

    width: min(92vw, 760px) !important;
    max-width: 760px !important;

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

    /*
     * Use normal inline text flow instead of flex so no visual gap
     * can appear between EduSched and X.
     */
    display: block !important;

    color: #FFFFFF !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;

    font-size: clamp(.70rem, .78vw, .84rem) !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
    text-align: center !important;
    white-space: normal !important;

    animation: none !important;
    overflow: visible !important;
}

.login-page.login-glass-page .login-security-note .brand-x {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;

    color: #FDC530 !important;
    font-weight: 900 !important;

    letter-spacing: 0 !important;
    word-spacing: 0 !important;
}

.login-page.login-glass-page .login-security-note::before,
.login-page.login-glass-page .login-security-note::after,
.login-page.login-glass-page .login-security-note .security-icon {
    content: none !important;
    display: none !important;
}

/* --------------------------------------------------------------------------
   3. MOBILE SECURITY NOTICE
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .login-page.login-glass-page .auth-panel {
        background:
            linear-gradient(
                145deg,
                rgba(18,72,47,.28),
                rgba(228,237,231,.17),
                rgba(22,58,41,.25)
            ) !important;

        -webkit-backdrop-filter: blur(9px) saturate(.82) !important;
        backdrop-filter: blur(9px) saturate(.82) !important;

        border-color: rgba(255,255,255,.46) !important;

        box-shadow:
            0 15px 32px rgba(0,0,0,.22),
            0 0 12px rgba(255,255,255,.14),
            0 0 22px rgba(255,255,255,.06) !important;
    }

    .login-page.login-glass-page .auth-panel::after {
        border-color: rgba(255,255,255,.50) !important;
        box-shadow:
            0 -2px 6px rgba(255,255,255,.08),
            2px 0 7px rgba(255,255,255,.06) !important;
    }

    .login-page.login-glass-page .login-security-note {
        left: 50% !important;
        right: auto !important;
        bottom: max(5px, env(safe-area-inset-bottom)) !important;
        transform: translateX(-50%) !important;

        width: calc(100vw - 24px) !important;
        max-width: 430px !important;

        font-size: clamp(.64rem, 2.6vw, .72rem) !important;
        line-height: 1.28 !important;
        text-align: center !important;
        white-space: normal !important;
    }

    .login-page.login-glass-page .login-security-note .brand-x {
        display: inline !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}


/* ================================================================
   MERGED PATCH: login-form-stability-fix.css (keyboard focus + single glass + eye fix)
   Appended per EduSchedX_Login_FormStability_Keyboard_DuplicateEyeFix.zip
   ================================================================ */

/* ==========================================================================
   EDUSCHEDX LOGIN — STABILITY FIX ONLY
   --------------------------------------------------------------------------
   Fixes ONLY:
   1) Mobile keyboard/focus breaking or overlapping the form
   2) Duplicate password-eye icon in desktop browsers
   3) Nested/extra inner glass panel when resized/minimized

   Does NOT redesign colors, layout, text, buttons, auth, routes, or backend.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ONE GLASS CARD ONLY
   Neutralize the old/base auth-inner panel so the Login page has one
   visual form container only: .auth-panel
   -------------------------------------------------------------------------- */

.login-page.login-glass-page .auth-inner {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

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

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;

    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;

    overflow: visible !important;
}

/* Make sure the actual outer Login panel remains the single rounded card. */
.login-page.login-glass-page .auth-panel {
    border-radius: 24px !important;
    overflow: visible !important;
}

/* --------------------------------------------------------------------------
   2. REMOVE BROWSER-NATIVE PASSWORD REVEAL ICON
   Keep ONLY the existing EduSchedX custom eye button.
   This does not change password logic or toggle JavaScript.
   -------------------------------------------------------------------------- */

.login-page.login-glass-page input[type="password"]::-ms-reveal,
.login-page.login-glass-page input[type="password"]::-ms-clear {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Preserve the existing custom password-toggle button as the only visible eye. */
.login-page.login-glass-page .password-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 3 !important;
}

/* --------------------------------------------------------------------------
   3. MOBILE: KEEP INPUT TEXT LARGE ENOUGH TO AVOID BROWSER AUTO-ZOOM
   -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
    .login-page.login-glass-page input,
    .login-page.login-glass-page .form-control {
        font-size: 16px !important;
    }
}

/* --------------------------------------------------------------------------
   4. MOBILE NORMAL STATE — KEEP CURRENT APPROVED FORM
   -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
    .login-page.login-glass-page .auth-panel {
        transform: none !important;
        scale: 1 !important;
        transform-origin: center center !important;
    }

    .login-page.login-glass-page .auth-inner {
        transform: none !important;
        scale: 1 !important;
    }
}

/* --------------------------------------------------------------------------
   5. MOBILE KEYBOARD / INPUT-FOCUS STATE
   When an input is focused and the virtual keyboard opens:
   - do NOT scale/shrink the card
   - do NOT overlap the security notice
   - temporarily allow vertical movement/scroll so the active input and
     Login button remain reachable
   - restore normal static behavior as soon as focus leaves the input
   -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
    body.login-page.login-glass-page:has(
        .auth-panel input:focus
    ) {
        height: auto !important;
        min-height: 100dvh !important;
        max-height: none !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        overscroll-behavior-y: contain;
        scroll-padding-top: 12px;
        scroll-padding-bottom: 45dvh;
    }

    body.login-page.login-glass-page:has(
        .auth-panel input:focus
    ) .login-stage {
        height: auto !important;
        min-height: 100dvh !important;
        max-height: none !important;

        overflow: visible !important;

        display: grid !important;
        place-items: start center !important;

        padding:
            max(10px, env(safe-area-inset-top))
            8px
            max(26px, env(safe-area-inset-bottom)) !important;
    }

    body.login-page.login-glass-page:has(
        .auth-panel input:focus
    ) .login-shell,
    body.login-page.login-glass-page:has(
        .auth-panel input:focus
    ) .login-v9.login-shell {
        width: min(100%, 440px) !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 0 auto !important;
        overflow: visible !important;
    }

    body.login-page.login-glass-page:has(
        .auth-panel input:focus
    ) .auth-panel {
        width: 100% !important;
        max-width: 440px !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 0 auto !important;

        transform: none !important;
        scale: 1 !important;

        overflow: visible !important;
    }

    body.login-page.login-glass-page:has(
        .auth-panel input:focus
    ) .auth-inner {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;

        transform: none !important;
        scale: 1 !important;
    }

    /* Hide only while keyboard/input focus is active to prevent overlap. */
    body.login-page.login-glass-page:has(
        .auth-panel input:focus
    ) .login-security-note {
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* --------------------------------------------------------------------------
   6. MOBILE: PREVENT OLD SHORT-HEIGHT SCALE RULES FROM BREAKING FORM
   The keyboard already reduces the visual viewport; do not stack scaling.
   -------------------------------------------------------------------------- */

@media (max-width: 767.98px) and (max-height: 700px) {
    body.login-page.login-glass-page:has(
        .auth-panel input:focus
    ) .auth-panel {
        scale: 1 !important;
        transform: none !important;
    }
}

@media (max-width: 767.98px) and (max-height: 610px) {
    body.login-page.login-glass-page:has(
        .auth-panel input:focus
    ) .auth-panel {
        scale: 1 !important;
        transform: none !important;
    }
}

/* --------------------------------------------------------------------------
   7. TABLET / RESIZED DESKTOP — PREVENT NESTED PANEL REAPPEARING
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
    .login-page.login-glass-page .auth-inner {
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
}

/* Browser zoom and password-manager functionality remain enabled. */


/* ================================================================
   MERGED PATCH: login-focus-stable-remember.css (focus-stable mobile + remember-me safety)
   Appended per EduSchedX_Login_FocusStable_RememberMe_Verify.zip
   ================================================================ */

/* ==========================================================================
   EDUSCHEDX LOGIN — FOCUS-STABLE MOBILE + REMEMBER-ME INTERACTION
   --------------------------------------------------------------------------
   Fixes ONLY:
   1) Mobile form jumping upward when Faculty ID / Password is focused.
   2) Keeps the form in the same top-anchored visual position.
   3) Keeps Remember me checkbox/label clickable.
   4) Preserves current design, colors, sizing, authentication UI.
   ========================================================================== */

/* --------------------------------------------------------------------------
   MOBILE NORMAL STATE
   Anchor the card from a stable top position instead of vertically centering
   it against a viewport whose height changes when the keyboard opens.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    html:has(body.login-page.login-glass-page),
    body.login-page.login-glass-page {
        width: 100% !important;
        min-height: 100svh !important;
        height: 100svh !important;
        max-height: 100svh !important;

        overflow-x: hidden !important;
        overflow-y: hidden !important;
    }

    .login-page.login-glass-page .login-stage {
        width: 100% !important;
        min-height: 100svh !important;
        height: 100svh !important;
        max-height: 100svh !important;

        display: block !important;
        place-items: unset !important;
        align-items: unset !important;
        justify-items: unset !important;

        padding:
            clamp(16px, 4svh, 34px)
            8px
            max(28px, env(safe-area-inset-bottom)) !important;

        overflow: hidden !important;
    }

    .login-page.login-glass-page .login-shell,
    .login-page.login-glass-page .login-v9.login-shell {
        width: min(100%, 440px) !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

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

        display: block !important;
        overflow: visible !important;
    }

    .login-page.login-glass-page .auth-panel {
        width: 100% !important;
        max-width: 440px !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 0 auto !important;

        transform: none !important;
        scale: 1 !important;
        transform-origin: top center !important;

        overflow: visible !important;
    }

    .login-page.login-glass-page .auth-inner {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        transform: none !important;
        scale: 1 !important;

        overflow: visible !important;
    }
}

/* --------------------------------------------------------------------------
   MOBILE INPUT FOCUS / KEYBOARD STATE
   Keep the EXACT SAME top anchor.
   Only allow temporary vertical scrolling; do not re-center or scale.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    body.login-page.login-glass-page:has(.auth-panel input:focus) {
        width: 100% !important;

        height: auto !important;
        min-height: 100svh !important;
        max-height: none !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        scroll-padding-top: clamp(16px, 4svh, 34px);
        scroll-padding-bottom: 48vh;
        overscroll-behavior-y: contain;
    }

    body.login-page.login-glass-page:has(.auth-panel input:focus) .login-stage {
        width: 100% !important;

        height: auto !important;
        min-height: 100svh !important;
        max-height: none !important;

        display: block !important;
        place-items: unset !important;
        align-items: unset !important;
        justify-items: unset !important;

        /* SAME top position as the normal mobile state. */
        padding:
            clamp(16px, 4svh, 34px)
            8px
            max(42vh, env(safe-area-inset-bottom)) !important;

        overflow: visible !important;
    }

    body.login-page.login-glass-page:has(.auth-panel input:focus) .login-shell,
    body.login-page.login-glass-page:has(.auth-panel input:focus) .login-v9.login-shell,
    body.login-page.login-glass-page:has(.auth-panel input:focus) .auth-panel,
    body.login-page.login-glass-page:has(.auth-panel input:focus) .auth-inner {
        transform: none !important;
        scale: 1 !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        margin-top: 0 !important;
    }

    /*
     * Keep the security notice out of the keyboard area only while an input
     * is focused. It returns automatically when focus leaves.
     */
    body.login-page.login-glass-page:has(.auth-panel input:focus) .login-security-note {
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Helps browser scrolling keep the active input in a comfortable area. */
    .login-page.login-glass-page .auth-panel input,
    .login-page.login-glass-page .auth-panel .form-control {
        scroll-margin-top: 22px !important;
        scroll-margin-bottom: 46vh !important;

        /* Prevent iOS/mobile browser auto-zoom. */
        font-size: 16px !important;
    }
}

/* --------------------------------------------------------------------------
   OVERRIDE OLD SHORT-HEIGHT MOBILE SCALE RULES
   They must not activate simply because the keyboard reduced viewport height.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) and (max-height: 700px) {
    .login-page.login-glass-page .auth-panel,
    .login-page.login-glass-page .auth-inner {
        scale: 1 !important;
        transform: none !important;
    }
}

@media (max-width: 767.98px) and (max-height: 610px) {
    .login-page.login-glass-page .auth-panel,
    .login-page.login-glass-page .auth-inner {
        scale: 1 !important;
        transform: none !important;
    }
}

/* --------------------------------------------------------------------------
   TABLET / MINIMIZED WEB
   Clicking a field must not cause a layout shift.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1180px) {
    .login-page.login-glass-page .login-stage,
    .login-page.login-glass-page .login-shell,
    .login-page.login-glass-page .login-v9.login-shell,
    .login-page.login-glass-page .auth-panel,
    .login-page.login-glass-page .auth-inner {
        transform-origin: center center !important;
    }

    .login-page.login-glass-page .auth-panel:focus-within,
    .login-page.login-glass-page .auth-inner:focus-within {
        transform: none !important;
    }
}

/* --------------------------------------------------------------------------
   REMEMBER ME — INTERACTION SAFETY
   Keep the existing styling but ensure no overlay blocks the checkbox/label.
   -------------------------------------------------------------------------- */
.login-page.login-glass-page .login-remember {
    position: relative !important;
    z-index: 4 !important;
    pointer-events: auto !important;
}

.login-page.login-glass-page .login-remember input[type="checkbox"] {
    position: relative !important;
    z-index: 5 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

.login-page.login-glass-page .login-remember label {
    position: relative !important;
    z-index: 5 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    user-select: none;
}

/* Browser zoom remains enabled. */


/* ================================================================
   MERGED PATCH: login-mobile-nojump-remember-align.css (lower card, no jump, remember alignment)
   Appended per EduSchedX_Login_MobileNoJump_LowerCard_RememberAligned.zip
   ================================================================ */

/* ==========================================================================
   EDUSCHEDX LOGIN — MOBILE NO-JUMP + LOWER CARD + REMEMBER-ME ALIGNMENT
   UI ONLY
   --------------------------------------------------------------------------
   Fix ONLY:
   1) Mobile Login card is too high.
   2) Card jumps upward when Faculty ID / Password receives focus.
   3) Remember me checkbox + label are no longer aligned.
   Everything else stays unchanged.
   ========================================================================== */

/* --------------------------------------------------------------------------
   MOBILE NORMAL STATE — KEEP THE FORM LOWER
   Use the stable small viewport so keyboard opening does not recalculate
   the card's vertical anchor.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {

    html:has(body.login-page.login-glass-page),
    body.login-page.login-glass-page {
        width: 100% !important;

        height: 100svh !important;
        min-height: 100svh !important;
        max-height: 100svh !important;

        overflow-x: hidden !important;
        overflow-y: hidden !important;
    }

    .login-page.login-glass-page .login-stage {
        width: 100% !important;

        height: 100svh !important;
        min-height: 100svh !important;
        max-height: 100svh !important;

        /*
         * Keep the card LOWER than the previous patch.
         * The top gap remains stable even when the keyboard appears.
         */
        padding:
            clamp(64px, 8svh, 104px)
            10px
            max(24px, env(safe-area-inset-bottom)) !important;

        display: block !important;
        place-items: unset !important;
        align-items: unset !important;
        justify-items: unset !important;

        overflow: hidden !important;
    }

    .login-page.login-glass-page .login-shell,
    .login-page.login-glass-page .login-v9.login-shell {
        width: min(100%, 440px) !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

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

        display: block !important;
        overflow: visible !important;
    }

    .login-page.login-glass-page .auth-panel {
        width: 100% !important;
        max-width: 440px !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 0 auto !important;

        /*
         * Never scale/recenter this card on mobile.
         * This prevents the "jump up" effect.
         */
        transform: none !important;
        scale: 1 !important;
        transform-origin: top center !important;

        overflow: visible !important;
    }

    .login-page.login-glass-page .auth-inner {
        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        transform: none !important;
        scale: 1 !important;

        overflow: visible !important;
    }
}

/* --------------------------------------------------------------------------
   MOBILE INPUT FOCUS — EXACT SAME POSITION
   Override earlier :has(input:focus) rules that moved the form upward.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {

    body.login-page.login-glass-page:has(.auth-panel input:focus) {
        height: 100svh !important;
        min-height: 100svh !important;
        max-height: 100svh !important;

        overflow-x: hidden !important;
        overflow-y: hidden !important;
    }

    body.login-page.login-glass-page:has(.auth-panel input:focus) .login-stage {
        height: 100svh !important;
        min-height: 100svh !important;
        max-height: 100svh !important;

        /*
         * SAME values as the normal state.
         * Do not move the card when the keyboard appears.
         */
        padding:
            clamp(64px, 8svh, 104px)
            10px
            max(24px, env(safe-area-inset-bottom)) !important;

        display: block !important;
        place-items: unset !important;
        align-items: unset !important;
        justify-items: unset !important;

        overflow: hidden !important;
    }

    body.login-page.login-glass-page:has(.auth-panel input:focus) .login-shell,
    body.login-page.login-glass-page:has(.auth-panel input:focus) .login-v9.login-shell,
    body.login-page.login-glass-page:has(.auth-panel input:focus) .auth-panel,
    body.login-page.login-glass-page:has(.auth-panel input:focus) .auth-inner {
        margin-top: 0 !important;

        transform: none !important;
        scale: 1 !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    /*
     * Keep input text at 16px so mobile browsers do not zoom the page
     * when a field is tapped.
     */
    .login-page.login-glass-page .auth-panel input,
    .login-page.login-glass-page .auth-panel .form-control {
        font-size: 16px !important;
    }
}

/* --------------------------------------------------------------------------
   OVERRIDE ALL OLD SHORT-HEIGHT MOBILE SCALING
   A keyboard must not trigger an old max-height rule.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) and (max-height: 760px) {
    .login-page.login-glass-page .auth-panel,
    .login-page.login-glass-page .auth-inner {
        transform: none !important;
        scale: 1 !important;
    }
}

@media (max-width: 767.98px) and (max-height: 700px) {
    .login-page.login-glass-page .auth-panel,
    .login-page.login-glass-page .auth-inner {
        transform: none !important;
        scale: 1 !important;
    }
}

@media (max-width: 767.98px) and (max-height: 610px) {
    .login-page.login-glass-page .auth-panel,
    .login-page.login-glass-page .auth-inner {
        transform: none !important;
        scale: 1 !important;
    }
}

/* --------------------------------------------------------------------------
   REMEMBER ME — RESTORE ONE CLEAN ALIGNED ROW
   -------------------------------------------------------------------------- */
.login-page.login-glass-page .login-remember {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;

    gap: 10px !important;

    width: 100% !important;
    min-height: 26px !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;

    position: relative !important;
    z-index: 5 !important;

    line-height: 1 !important;
}

.login-page.login-glass-page .login-remember input[type="checkbox"] {
    flex: 0 0 22px !important;

    width: 22px !important;
    height: 22px !important;

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

    position: relative !important;
    top: 0 !important;

    cursor: pointer !important;
    pointer-events: auto !important;
}

.login-page.login-glass-page .login-remember label {
    display: inline-flex !important;
    align-items: center !important;

    min-height: 22px !important;

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

    position: relative !important;
    top: 0 !important;

    line-height: 1.2 !important;

    cursor: pointer !important;
    pointer-events: auto !important;
    user-select: none !important;
}

/* Mobile row uses the same clean alignment. */
@media (max-width: 767.98px) {
    .login-page.login-glass-page .login-remember {
        gap: 10px !important;
        min-height: 28px !important;
    }

    .login-page.login-glass-page .login-remember input[type="checkbox"] {
        width: 22px !important;
        height: 22px !important;
        flex-basis: 22px !important;
    }

    .login-page.login-glass-page .login-remember label {
        min-height: 22px !important;
        line-height: 22px !important;
    }
}

/* --------------------------------------------------------------------------
   MINIMIZED / NARROW WEB
   Clicking fields must not apply focus transforms.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
    .login-page.login-glass-page .auth-panel:focus-within,
    .login-page.login-glass-page .auth-inner:focus-within {
        transform: none !important;
    }
}

/* No authentication/backend behavior is changed by this patch. */


/* ================================================================
   MERGED PATCH: login-mobile-align-lower-card.css (mobile align, lower card, hide photo credit)
   Appended per EduSchedX_Login_MobileAlign_LowerCard_NoPhotoCredit.zip
   ================================================================ */

/* ==========================================================================
   EDUSCHEDX LOGIN — MOBILE ALIGNMENT + LOWER CARD + HIDE PHOTO CREDIT
   UI ONLY
   --------------------------------------------------------------------------
   Fix ONLY:
   1) Align Remember me with Faculty ID / Password icon column
   2) Hide Photo by credit on mobile
   3) Keep only centered security notice at the bottom on mobile
   4) Move the mobile Login card slightly lower to reveal more campus image
   ========================================================================== */

@media (max-width: 767.98px) {

    /* ----------------------------------------------------------------------
       1. MOVE THE MOBILE CARD LOWER
       ---------------------------------------------------------------------- */

    .login-page.login-glass-page .login-stage {
        /*
         * Slightly larger stable top gap so more campus background
         * is visible above the card.
         */
        padding:
            clamp(82px, 10svh, 126px)
            10px
            max(34px, env(safe-area-inset-bottom)) !important;
    }

    /* Keep the exact same lower position while an input is focused. */
    body.login-page.login-glass-page:has(.auth-panel input:focus) .login-stage {
        padding:
            clamp(82px, 10svh, 126px)
            10px
            max(34px, env(safe-area-inset-bottom)) !important;
    }

    .login-page.login-glass-page .auth-panel,
    body.login-page.login-glass-page:has(.auth-panel input:focus) .auth-panel {
        margin-top: 0 !important;
        transform: none !important;
        scale: 1 !important;
        transform-origin: top center !important;
    }

    /* ----------------------------------------------------------------------
       2. ALIGN REMEMBER ME WITH THE ICON COLUMN
       Faculty/Password icons use an approximately 44px leading slot.
       Match that same left structure here.
       ---------------------------------------------------------------------- */

    .login-page.login-glass-page .login-remember {
        display: grid !important;
        grid-template-columns: 44px 1fr !important;
        align-items: center !important;

        column-gap: 10px !important;

        width: 100% !important;
        min-height: 28px !important;

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

        position: relative !important;
        z-index: 5 !important;
    }

    .login-page.login-glass-page .login-remember input[type="checkbox"] {
        grid-column: 1 !important;

        justify-self: center !important;
        align-self: center !important;

        width: 22px !important;
        height: 22px !important;

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

        position: static !important;
        top: auto !important;
        left: auto !important;

        cursor: pointer !important;
        pointer-events: auto !important;
    }

    .login-page.login-glass-page .login-remember label {
        grid-column: 2 !important;

        justify-self: start !important;
        align-self: center !important;

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

        position: static !important;
        top: auto !important;
        left: auto !important;

        min-height: 22px !important;

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

        line-height: 1.2 !important;

        cursor: pointer !important;
        pointer-events: auto !important;
        user-select: none !important;
    }

    /* ----------------------------------------------------------------------
       3. HIDE PHOTO CREDIT ON MOBILE ONLY
       ---------------------------------------------------------------------- */

    .login-page.login-glass-page .photo-credit,
    .login-page.login-glass-page .login-photo-credit,
    .login-page.login-glass-page [class*="photo-credit"],
    .login-page.login-glass-page [class*="photoCredit"] {
        display: none !important;
        visibility: hidden !important;
    }

    /* ----------------------------------------------------------------------
       4. SECURITY NOTICE — KEEP IT CENTERED AT THE BOTTOM
       ---------------------------------------------------------------------- */

    .login-page.login-glass-page .login-security-note {
        position: fixed !important;
        left: 50% !important;
        right: auto !important;
        bottom: max(7px, env(safe-area-inset-bottom)) !important;

        transform: translateX(-50%) !important;

        width: calc(100vw - 28px) !important;
        max-width: 430px !important;

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

        display: block !important;

        color: #FFFFFF !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;

        text-align: center !important;
        white-space: normal !important;
        line-height: 1.25 !important;

        z-index: 30 !important;
    }

    .login-page.login-glass-page .login-security-note .brand-x {
        display: inline !important;
        margin: 0 !important;
        padding: 0 !important;
        letter-spacing: 0 !important;
        word-spacing: 0 !important;
    }

    /*
     * During keyboard/input focus, preserve previous overlap protection:
     * hide only the security notice temporarily.
     */
    body.login-page.login-glass-page:has(.auth-panel input:focus) .login-security-note {
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* Desktop remains unchanged by this patch. */


/* ================================================================
   REVIEW COMPATIBILITY FIX (part of mobile-align patch):
   The patch's .login-remember label selector targets a nested <label>
   that does not exist in this project. Real markup is a single label
   element .login-remember wrapping: input, .login-remember__box
   (visible 17px custom checkbox) and .login-remember__label (text).
   Map the real children into the patch's 44px / 1fr grid so the
   checkbox centers in the icon column and the text starts in column 2.
   ================================================================ */
.login-page.login-glass-page .login-remember .login-remember__box {
    grid-column: 1 !important;
    grid-row: 1 !important;

    justify-self: center !important;
    align-self: center !important;

    width: 22px !important;
    height: 22px !important;
    flex: 0 0 22px !important;

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

    cursor: pointer !important;
    pointer-events: auto !important;
}

.login-page.login-glass-page .login-remember .login-remember__label {
    grid-column: 2 !important;
    grid-row: 1 !important;

    justify-self: start !important;
    align-self: center !important;

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

    min-height: 22px !important;

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

    line-height: 1.2 !important;

    cursor: pointer !important;
    pointer-events: auto !important;
    user-select: none !important;
}

.login-page.login-glass-page .login-remember input[type="checkbox"] {
    grid-column: 1 !important;
    grid-row: 1 !important;
}

/* ================================================================
   MERGED PATCH: login-remember-exact-icon-align.css (exact remember-me icon alignment)
   Appended per EduSchedX_Login_RememberMe_ExactIconAlignment.zip
   ================================================================ */

/* ==========================================================================
   EDUSCHEDX LOGIN — EXACT REMEMBER-ME ICON COLUMN ALIGNMENT
   UI ONLY
   --------------------------------------------------------------------------
   Align:
   - checkbox center with Faculty ID / Password icon center
   - "Remember me" text start with Faculty ID / Password input text start
   Do not change any other Login UI or logic.
   ========================================================================== */

.login-page.login-glass-page {
    --edx-login-leading-slot: 44px;
    --edx-login-leading-gap: 10px;
}

/*
 * Match the same two-column structure used visually by the fields:
 *
 * [ 44px icon slot ] [ field text ]
 *
 * Remember me becomes:
 *
 * [ checkbox       ] [ Remember me ]
 */
.login-page.login-glass-page .compact-password-form .login-remember,
.login-page.login-glass-page .login-remember {
    display: grid !important;
    grid-template-columns:
        var(--edx-login-leading-slot)
        minmax(0, 1fr) !important;
    column-gap: var(--edx-login-leading-gap) !important;

    align-items: center !important;
    justify-items: stretch !important;

    width: 100% !important;
    min-height: 28px !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;

    position: relative !important;
    left: 0 !important;
    transform: none !important;
}

/* Checkbox sits exactly in the icon column. */
.login-page.login-glass-page .compact-password-form .login-remember input[type="checkbox"],
.login-page.login-glass-page .login-remember input[type="checkbox"] {
    grid-column: 1 !important;

    width: 22px !important;
    height: 22px !important;

    justify-self: center !important;
    align-self: center !important;

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

    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    transform: none !important;

    cursor: pointer !important;
    pointer-events: auto !important;
}

/* Text begins exactly where Faculty ID / Password input text begins. */
.login-page.login-glass-page .compact-password-form .login-remember label,
.login-page.login-glass-page .login-remember label {
    grid-column: 2 !important;

    justify-self: start !important;
    align-self: center !important;

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

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

    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;

    transform: none !important;

    min-height: 22px !important;
    line-height: 1.2 !important;

    cursor: pointer !important;
    pointer-events: auto !important;
    user-select: none !important;
}

/* Keep the exact same alignment on mobile. */
@media (max-width: 767.98px) {
    .login-page.login-glass-page .compact-password-form .login-remember,
    .login-page.login-glass-page .login-remember {
        grid-template-columns:
            var(--edx-login-leading-slot)
            minmax(0, 1fr) !important;
        column-gap: var(--edx-login-leading-gap) !important;
    }
}

/* No authentication, Remember-me behavior, or other UI is changed here. */


/* ================================================================
   REVIEW GEOMETRY ADJUSTMENT (part of exact-icon-align patch):
   The patch's 44px slot / 10px gap does not match the ACTUAL field
   geometry in this project. Measured from the current CSS:

   - Field icon:  position:absolute; left:4px; FA glyph ~14px wide
     (16px font) -> icon center ~ 11px from the field left edge.
   - Field text:  .form-control padding-left: 36px (login.css:2687)
     -> input text starts at 36px.

   With the patch's 44px/10px the checkbox center would land at 22px
   (11px right of the icon center) and the text at 54px (18px right
   of the input text). So the slot is corrected to 22px and the gap
   to 14px: checkbox (22x22) centered in the 22px slot has its center
   at 11px = icon center, and the text starts at 22+14 = 36px = the
   exact start of VA-XXXXX / Enter password.
   ================================================================ */
.login-page.login-glass-page {
    --edx-login-leading-slot: 22px;
    --edx-login-leading-gap: 14px;
}

/* ================================================================
   MERGED PATCH: auth-mobile-focus-visible-security.css (keep security visible, mobile focus up-shift, forgot email focus)
   Appended per EduSchedX_Auth_MobileFocus_KeepSecurity_ForgotEmailVisible.zip
   ================================================================ */

/* ==========================================================================
   EDUSCHEDX AUTH — MOBILE FOCUS VISIBILITY + PERSISTENT SECURITY NOTICE
   UI ONLY
   --------------------------------------------------------------------------
   Fix ONLY:
   1) Keep "Secure access to EduSchedX..." visible while typing.
   2) On mobile input focus, move the auth card upward only enough to keep the
      active input visible above the keyboard.
   3) Apply the same behavior to Forgot Password email input.
   4) Restore the normal lower card position when focus leaves.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. KEEP SECURITY NOTICE VISIBLE DURING INPUT FOCUS
   Override previous rules that hid it.
   -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {

    body.login-page.login-glass-page:has(.auth-panel input:focus)
    .login-security-note,
    body.forgot-password-page:has(input:focus)
    .login-security-note,
    body.password-recovery-page:has(input:focus)
    .login-security-note,
    body.auth-recovery-page:has(input:focus)
    .login-security-note {
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: none !important;
        display: block !important;
    }

    .login-page.login-glass-page .login-security-note,
    .forgot-password-page .login-security-note,
    .password-recovery-page .login-security-note,
    .auth-recovery-page .login-security-note {
        position: fixed !important;
        left: 50% !important;
        right: auto !important;
        bottom: max(6px, env(safe-area-inset-bottom)) !important;
        transform: translateX(-50%) !important;

        width: calc(100vw - 24px) !important;
        max-width: 430px !important;

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

        text-align: center !important;
        white-space: normal !important;
        line-height: 1.22 !important;

        z-index: 50 !important;
    }
}

/* --------------------------------------------------------------------------
   2. LOGIN PAGE — CONTROLLED UPWARD ADJUSTMENT WHILE TYPING
   Normal state stays at the current lower approved position.
   -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {

    /* Normal lower position remains unchanged. */
    .login-page.login-glass-page .login-stage {
        padding-top: clamp(82px, 10svh, 126px) !important;
    }

    /*
     * When a Login field is focused:
     * move the card upward a controlled amount instead of fully recentering.
     */
    body.login-page.login-glass-page:has(
        .auth-panel input:focus
    ) .login-stage {
        padding-top: clamp(20px, 3svh, 38px) !important;
        padding-bottom: max(58px, env(safe-area-inset-bottom)) !important;

        overflow: visible !important;
    }

    body.login-page.login-glass-page:has(
        .auth-panel input:focus
    ) {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        min-height: 100svh !important;
        height: auto !important;
        max-height: none !important;
        scroll-padding-bottom: 48vh;
    }

    body.login-page.login-glass-page:has(
        .auth-panel input:focus
    ) .login-shell,
    body.login-page.login-glass-page:has(
        .auth-panel input:focus
    ) .login-v9.login-shell,
    body.login-page.login-glass-page:has(
        .auth-panel input:focus
    ) .auth-panel,
    body.login-page.login-glass-page:has(
        .auth-panel input:focus
    ) .auth-inner {
        transform: none !important;
        scale: 1 !important;
        margin-top: 0 !important;
    }

    /* Active Login inputs should remain comfortably visible. */
    .login-page.login-glass-page .auth-panel input:focus,
    .login-page.login-glass-page .auth-panel .form-control:focus {
        scroll-margin-top: 18px !important;
        scroll-margin-bottom: 42vh !important;
        font-size: 16px !important;
    }
}

/* --------------------------------------------------------------------------
   3. FORGOT PASSWORD / ACCOUNT RECOVERY
   Apply the same controlled upward adjustment to the email field.
   The selectors below intentionally cover the common current body/page names.
   -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {

    .forgot-password-page .auth-panel,
    .password-recovery-page .auth-panel,
    .auth-recovery-page .auth-panel {
        transform: none !important;
        scale: 1 !important;
        transform-origin: top center !important;
    }

    .forgot-password-page .login-stage,
    .password-recovery-page .login-stage,
    .auth-recovery-page .login-stage {
        padding-top: clamp(82px, 10svh, 126px) !important;
    }

    body.forgot-password-page:has(input:focus),
    body.password-recovery-page:has(input:focus),
    body.auth-recovery-page:has(input:focus) {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        min-height: 100svh !important;
        height: auto !important;
        max-height: none !important;
        scroll-padding-bottom: 48vh;
    }

    body.forgot-password-page:has(input:focus) .login-stage,
    body.password-recovery-page:has(input:focus) .login-stage,
    body.auth-recovery-page:has(input:focus) .login-stage {
        padding-top: clamp(20px, 3svh, 38px) !important;
        padding-bottom: max(58px, env(safe-area-inset-bottom)) !important;
        overflow: visible !important;
    }

    body.forgot-password-page:has(input:focus) .auth-panel,
    body.password-recovery-page:has(input:focus) .auth-panel,
    body.auth-recovery-page:has(input:focus) .auth-panel {
        transform: none !important;
        scale: 1 !important;
        margin-top: 0 !important;
    }

    .forgot-password-page input:focus,
    .password-recovery-page input:focus,
    .auth-recovery-page input:focus {
        scroll-margin-top: 18px !important;
        scroll-margin-bottom: 42vh !important;
        font-size: 16px !important;
    }
}

/* --------------------------------------------------------------------------
   4. OVERRIDE PREVIOUS "HIDE SECURITY NOTICE ON FOCUS" RULES
   -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {

    body.login-page.login-glass-page:has(.auth-panel input:focus)
    .login-security-note,
    body.forgot-password-page:has(input:focus)
    .login-security-note,
    body.password-recovery-page:has(input:focus)
    .login-security-note,
    body.auth-recovery-page:has(input:focus)
    .login-security-note {
        visibility: visible !important;
        opacity: 1 !important;
        display: block !important;
    }
}

/* --------------------------------------------------------------------------
   5. EDUSCHEDX REMAINS ONE WORD
   -------------------------------------------------------------------------- */

.login-security-note .brand-x {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
}

/* No authentication/backend behavior is changed by this CSS. */


/* ================================================================
   REVIEW STRUCTURE ADAPTATION (part of auth-mobile-focus patch):
   The Forgot Password blade (auth/forgot-password.blade.php) uses
   body class 'forgot-password-page' (matches the patch), but its layout
   has NO '.login-stage' wrapper - it uses main.login-shell.auth-reset-shell
   (display:grid; place-items:center). The patch's
   '.forgot-password-page .login-stage' padding rules therefore cannot
   move the card. Map the same controlled upward behavior to the CURRENT
   structure below. The normal (unfocused) position keeps the approved
   centered layout already defined in the base forgot-page rules.
   ================================================================ */
@media (max-width: 767.98px) {
    body.forgot-password-page:has(input:focus) .auth-reset-shell {
        place-items: start center !important;
        padding-top: clamp(20px, 3svh, 38px) !important;
        padding-bottom: max(58px, env(safe-area-inset-bottom)) !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* ================================================================
   MERGED PATCH: auth-security-bottom-static.css (security notice fixed to page bottom, hidden on keyboard)
   Appended per EduSchedX_Auth_SecurityBottomStatic_HideOnKeyboard.zip
   ================================================================ */

/* ==========================================================================
   EDUSCHEDX AUTH — SECURITY NOTICE FIXED TO PAGE BOTTOM
   UI ONLY
   --------------------------------------------------------------------------
   Fix ONLY:
   1) Security notice always belongs to the bottom of the page.
   2) It must NOT move above the mobile keyboard.
   3) While an auth input is focused / keyboard is open, hide the notice.
   4) When focus ends / keyboard closes, restore it to the same bottom position.
   5) Do not change Login/Forgot Password form movement or any auth logic.
   ========================================================================== */

/* --------------------------------------------------------------------------
   NORMAL MOBILE STATE — SECURITY NOTICE STAYS AT TRUE PAGE BOTTOM
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {

    .login-page.login-glass-page .login-security-note,
    .forgot-password-page .login-security-note,
    .password-recovery-page .login-security-note,
    .auth-recovery-page .login-security-note {
        position: fixed !important;

        left: 50% !important;
        right: auto !important;

        bottom: max(7px, env(safe-area-inset-bottom)) !important;

        transform: translateX(-50%) !important;

        width: calc(100vw - 28px) !important;
        max-width: 430px !important;

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

        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

        color: #FFFFFF !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;

        text-align: center !important;
        white-space: normal !important;
        line-height: 1.25 !important;

        z-index: 30 !important;

        pointer-events: none !important;

        /* Never animate or transition upward. */
        animation: none !important;
        transition: none !important;
    }

    .login-page.login-glass-page .login-security-note .brand-x,
    .forgot-password-page .login-security-note .brand-x,
    .password-recovery-page .login-security-note .brand-x,
    .auth-recovery-page .login-security-note .brand-x {
        display: inline !important;
        margin: 0 !important;
        padding: 0 !important;
        letter-spacing: 0 !important;
        word-spacing: 0 !important;
    }
}

/* --------------------------------------------------------------------------
   MOBILE KEYBOARD / INPUT FOCUS
   Do NOT reposition the notice above the keyboard.
   Simply hide it while typing.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {

    body.login-page.login-glass-page:has(.auth-panel input:focus)
    .login-security-note,

    body.forgot-password-page:has(input:focus)
    .login-security-note,

    body.password-recovery-page:has(input:focus)
    .login-security-note,

    body.auth-recovery-page:has(input:focus)
    .login-security-note {
        position: fixed !important;

        left: 50% !important;
        right: auto !important;
        bottom: max(7px, env(safe-area-inset-bottom)) !important;

        transform: translateX(-50%) !important;

        /* Hide instead of moving it above the keyboard. */
        visibility: hidden !important;
        opacity: 0 !important;
        display: block !important;

        pointer-events: none !important;

        animation: none !important;
        transition: none !important;
    }
}

/* --------------------------------------------------------------------------
   IMPORTANT:
   This patch does not alter focused form positioning.
   Existing Login / Forgot Password upward adjustment remains untouched.
   -------------------------------------------------------------------------- */