/* ============================================================
   BISU-Calape Digital Clearance System — authentication pages
   login.php · forgot_password.php · reset_password.php

   Loaded before saas.css, so every property that saas.css marks
   !important (body, input, label, letter-spacing, focus ring)
   has to be marked !important here as well.
   ============================================================ */

/* ------------------------------------------------------------
   1. Render stability
   ------------------------------------------------------------
   The auth composition must be complete at first paint. Three
   things used to break that and are neutralised here:

   a) transitions.js adds .page-entering on DOMContentLoaded,
      replaying an opacity:0 -> 1 keyframe over content the
      browser has already painted. Auth pages opt out.
   b) lucide replaces every <i data-lucide> with an <svg> after
      load. login.php now ships inline SVG, but the recovery
      pages still use placeholders, so the final box of each
      icon is reserved up front.
   c) The submit spinner is toggled with .d-none; its slot is a
      fixed square so entering the loading state cannot resize
      the button.
   ------------------------------------------------------------ */
body:has(.bisu-login-page).page-entering main.container,
body:has(.bisu-login-page).page-entering .bisu-login-shell {
    animation: none !important;
}

.bisu-login-page i[data-lucide] {
    display: inline-block;
    flex: 0 0 auto;
    vertical-align: middle;
}

.bisu-login-page i[data-lucide],
.bisu-login-page svg {
    width: 18px;
    height: 18px;
}

/* ------------------------------------------------------------
   2. Page frame
   ------------------------------------------------------------ */
body:has(.bisu-login-page) {
    min-height: 100vh;
    background: var(--auth-canvas, #071427) !important;
    color: #e7eef8 !important;
    overflow-x: hidden;
}

body:has(.bisu-login-page) .topbar,
body:has(.bisu-login-page) .site-footer {
    display: none !important;
}

html body:has(.bisu-login-page) main.container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

.bisu-login-page {
    /* Institutional palette. BISU navy carries the brand; gold is
       used as a single accent, never as a surface.

       The canvas is deep navy and the card is light, so the tokens
       come in two families: --auth-ink/muted/faint are read ON the
       card, --auth-on-dark-* are read on the canvas around it. */
    --auth-navy: #0b3a72;
    --auth-blue: #0f4b92;
    --auth-blue-deep: #082c58;
    --auth-gold: #bf8f22;
    --auth-gold-lit: #e3b64f;
    --auth-ink: #101d2c;
    --auth-ink-soft: #35485e;
    --auth-muted: #55647a;
    --auth-faint: #5f6e83;
    --auth-line: #dbe2eb;
    --auth-line-soft: #e9eef4;
    --auth-canvas: #071427;
    --auth-on-dark: #f3f7fd;
    --auth-on-dark-soft: #b9c9de;
    --auth-on-dark-faint: #8ba0bc;
    --auth-radius: 14px;

    position: relative;
    isolation: isolate;
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    /* `safe` keeps the top of the composition reachable when it is taller
       than the viewport; plain `center` would clip it out of scroll range. */
    place-items: safe center;
    padding: clamp(1.5rem, 4vh, 3.25rem) clamp(1rem, 4vw, 2rem);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Deep institutional navy. Two brand-coloured light sources (navy-blue
   from the upper left, gold from the lower right) keep it from reading
   as flat black, and a fine grid gives the depth its scale. */
.bisu-login-background {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(900px 520px at 14% -8%, rgba(24, 96, 178, 0.42), transparent 64%),
        radial-gradient(720px 460px at 92% 108%, rgba(191, 143, 34, 0.20), transparent 62%),
        radial-gradient(1100px 700px at 50% 42%, rgba(13, 58, 112, 0.32), transparent 70%),
        linear-gradient(168deg, #0a1e3b 0%, #071427 52%, #04101f 100%);
}

/* Grid + vignette, kept on a separate layer so the gradients above stay
   readable. Both are decorative and sit under the whole composition. */
.bisu-login-background::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(148, 184, 230, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 184, 230, 0.05) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 72%);
    mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 72%);
}

.bisu-login-background::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 90% at 50% 50%, transparent 42%, rgba(2, 8, 18, 0.55) 100%);
}

.bisu-login-background span {
    display: none;
}

/* Official top rule — the one place the brand colours meet. */
.bisu-login-page::before {
    content: '';
    position: fixed;
    inset: 0 0 auto 0;
    height: 3px;
    z-index: 3;
    background: linear-gradient(90deg, var(--auth-blue) 0 66%, var(--auth-gold-lit) 66% 100%);
}

/* ------------------------------------------------------------
   3. Centered column
   ------------------------------------------------------------ */
.bisu-login-shell {
    width: min(432px, 100%);
    display: grid;
    gap: 1.5rem;
    justify-items: stretch;
}

/* ------------------------------------------------------------
   4. Institutional masthead
   ------------------------------------------------------------ */
.bisu-auth-masthead {
    display: grid;
    justify-items: center;
    text-align: center;
    gap: 0.95rem;
}

/* The seal is a dark-outlined mark on a dark canvas, so it gets its own
   soft halo rather than being dropped straight onto the navy. */
.bisu-auth-seal {
    width: 76px;
    height: 76px;
    aspect-ratio: 1;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 0 18px rgba(120, 172, 235, 0.35)) drop-shadow(0 6px 14px rgba(2, 8, 18, 0.55));
}

.bisu-auth-identity {
    display: grid;
    gap: 0.32rem;
}

.bisu-auth-republic {
    margin: 0;
    color: var(--auth-on-dark-faint);
    font-size: 0.645rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.17em !important;
    text-transform: uppercase;
}

.bisu-auth-org {
    margin: 0;
    color: var(--auth-gold-lit);
    font-size: 0.755rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.075em !important;
    text-transform: uppercase;
    text-wrap: balance;
}

.bisu-auth-system {
    margin: 0.42rem 0 0;
    color: var(--auth-on-dark);
    font-size: clamp(1.35rem, 1.15rem + 1vw, 1.62rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.021em !important;
    text-wrap: balance;
    text-shadow: 0 1px 18px rgba(6, 20, 40, 0.65);
}

/* ------------------------------------------------------------
   5. Form card
   ------------------------------------------------------------ */
/* A light panel lifted off the navy: a hairline highlight along the top
   edge reads as a lit bevel, and the shadow is deep enough to separate
   the card from the canvas without smearing. */
.bisu-login-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: clamp(1.65rem, 4vw, 2.15rem);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--auth-radius);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(246, 249, 253, 0.94) 100%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    backdrop-filter: blur(22px) saturate(140%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 1px 2px rgba(2, 8, 18, 0.20),
        0 24px 48px -20px rgba(2, 10, 24, 0.55),
        0 48px 96px -48px rgba(2, 10, 24, 0.75);
}

/* Brand rule across the head of the card, inset so the rounded corners
   stay clean. Decorative only. */
.bisu-login-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 18%;
    right: 18%;
    height: 2px;
    border-radius: 0 0 2px 2px;
    background: linear-gradient(90deg, transparent, var(--auth-blue) 30%, var(--auth-gold) 70%, transparent);
    opacity: 0.75;
}

.bisu-login-card-head {
    margin-bottom: 1.35rem;
}

/* Only the recovery pages carry a logo inside the card. */
.bisu-mini-logo {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    margin-bottom: 1rem;
}

.bisu-mini-logo img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1;
    object-fit: contain;
}

.bisu-eyebrow {
    margin: 0 0 0.5rem;
    color: var(--auth-blue) !important;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.14em !important;
    text-transform: uppercase;
}

.bisu-login-card h2 {
    margin: 0;
    color: var(--auth-ink);
    font-size: 1.28rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.014em !important;
}

.bisu-login-card-head>p:not(.bisu-eyebrow) {
    margin: 0.45rem 0 0;
    color: var(--auth-muted);
    font-size: 0.885rem;
    line-height: 1.55;
    text-wrap: pretty;
}

/* ------------------------------------------------------------
   6. Google sign-in + divider
   ------------------------------------------------------------ */
.bisu-google-button {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0 1rem;
    border: 1px solid var(--auth-line);
    border-radius: 8px;
    background: #fff;
    color: var(--auth-ink-soft);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.bisu-google-button:hover {
    color: var(--auth-ink);
    border-color: #bccbdc;
    background: #fbfcfe;
    box-shadow: 0 1px 2px rgba(16, 32, 51, 0.06);
}

.bisu-google-logo {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px;
}

.bisu-login-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.1rem 0;
    color: var(--auth-faint);
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.11em !important;
}

.bisu-login-divider::before,
.bisu-login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--auth-line);
}

/* ------------------------------------------------------------
   7. Fields
   ------------------------------------------------------------ */
.bisu-login-form {
    display: grid;
    gap: 1.05rem;
}

.bisu-field {
    display: grid !important;
    gap: 0.42rem !important;
    margin: 0 !important;
    color: var(--auth-ink) !important;
    font-size: 0.815rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.005em !important;
}

.bisu-field-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

/* .bisu-field is used both as a wrapping <label> (recovery pages) and as a
   <div> holding its own <label> (login). saas.css styles bare `label` with
   !important, so the nested case has to be restated. */
.bisu-field>span,
.bisu-field-head>label {
    display: block;
    margin: 0 !important;
    color: var(--auth-ink) !important;
    font-size: 0.815rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.005em !important;
}

.bisu-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.bisu-input-wrap>svg,
.bisu-input-wrap>i[data-lucide] {
    position: absolute;
    left: 0.85rem;
    width: 17px;
    height: 17px;
    color: #7f8da0;
    pointer-events: none;
    transition: color 0.16s ease;
}

.bisu-input-wrap input {
    width: 100%;
    min-height: 46px !important;
    padding: 0.7rem 0.9rem 0.7rem 2.5rem !important;
    border: 1px solid #d5dde7 !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: var(--auth-ink) !important;
    font-size: 0.9rem !important;
    font-weight: 500;
    box-shadow: none !important;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.bisu-input-wrap input::placeholder {
    color: #78869a !important;
    font-weight: 400;
}

.bisu-input-wrap input:hover {
    border-color: #c2ceda !important;
}

.bisu-input-wrap input:focus {
    border-color: var(--auth-blue) !important;
    box-shadow: 0 0 0 3px rgba(15, 75, 146, 0.16) !important;
    outline: none !important;
}

.bisu-input-wrap:focus-within>svg,
.bisu-input-wrap:focus-within>i[data-lucide] {
    color: var(--auth-blue);
}

.bisu-input-wrap:has(.bisu-password-toggle) input {
    padding-right: 2.9rem !important;
}

.bisu-password-toggle {
    position: absolute;
    right: 0.4rem;
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #6f7d90;
    cursor: pointer;
    transition: color 0.16s ease, background 0.16s ease;
}

.bisu-password-toggle:hover {
    color: var(--auth-blue);
    background: #eef3f9;
}

.bisu-password-toggle svg,
.bisu-password-toggle i[data-lucide] {
    width: 17px;
    height: 17px;
}

/* Grouped so the label row and the recovery link share one block. */
.bisu-password-field {
    display: grid;
    gap: 0;
}

.bisu-forgot-link {
    color: var(--auth-blue);
    font-size: 0.775rem;
    font-weight: 600;
    letter-spacing: 0 !important;
    text-decoration: none;
    white-space: nowrap;
}

.bisu-forgot-link:hover {
    color: var(--auth-blue-deep);
    text-decoration: underline;
}

/* ------------------------------------------------------------
   8. Hint + submit
   ------------------------------------------------------------ */
.bisu-form-hint {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: -0.2rem 0 0;
    color: var(--auth-faint);
    font-size: 0.78rem;
    line-height: 1.5;
}

.bisu-form-hint svg,
.bisu-form-hint i[data-lucide] {
    width: 15px;
    height: 15px;
    margin-top: 0.15rem;
    flex: 0 0 15px;
    color: #a3b0bf;
}

.bisu-login-button {
    position: relative;
    width: 100%;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.1rem;
    padding: 0 1rem;
    border: 1px solid #0a3468;
    border-radius: 9px;
    background: linear-gradient(180deg, #14589f 0%, var(--auth-blue) 55%, #0b3a72 100%);
    color: #fff;
    font-size: 0.925rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.005em !important;
    text-decoration: none;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 1px 2px rgba(9, 32, 62, 0.22),
        0 8px 20px -10px rgba(11, 58, 114, 0.65);
    transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.bisu-login-button:hover:not(:disabled) {
    background: linear-gradient(180deg, #1a63af 0%, #10508f 55%, #0a3468 100%);
    border-color: #072a55;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.26),
        0 10px 24px -8px rgba(11, 58, 114, 0.75);
    color: #fff;
}

.bisu-login-button:active:not(:disabled) {
    background: linear-gradient(180deg, #0d417c 0%, #07264c 100%);
    transform: translateY(1px);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.28);
}

.bisu-login-button:disabled {
    cursor: progress;
    opacity: 0.78;
    box-shadow: none;
}

/* Fixed-size trailing slot: the arrow and the spinner occupy the
   same box, so toggling the loading state never reflows the button. */
.bisu-btn-slot {
    width: 18px;
    height: 18px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 18px;
}

.bisu-btn-slot>* {
    grid-area: 1 / 1;
}

.bisu-login-button .spinner-border {
    width: 15px !important;
    height: 15px !important;
    border-width: 2px;
}

/* ------------------------------------------------------------
   9. Card footnote
   ------------------------------------------------------------ */
.bisu-register-note {
    margin: 1.25rem 0 0;
    color: var(--auth-faint);
    text-align: center;
    font-size: 0.8rem;
    line-height: 1.55;
}

.bisu-register-note a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    color: var(--auth-blue);
    font-weight: 600;
    text-decoration: none;
}

.bisu-register-note a:hover {
    text-decoration: underline;
}

.bisu-register-note svg,
.bisu-register-note i[data-lucide] {
    width: 14px;
    height: 14px;
}

.bisu-policy-check {
    display: grid;
    grid-template-columns: 17px minmax(0, 1fr);
    align-items: start;
    gap: .65rem;
    color: var(--auth-faint);
    font-size: .72rem;
    font-weight: 400 !important;
    line-height: 1.55;
    cursor: pointer;
}

.bisu-policy-check input {
    width: 17px;
    height: 17px;
    margin: .12rem 0 0;
    accent-color: var(--auth-blue);
    cursor: pointer;
}

.bisu-policy-check a {
    color: var(--auth-blue);
    font-weight: 700;
    text-underline-offset: 2px;
}

.bisu-google-button.is-disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* ------------------------------------------------------------
   10. Flash / validation messages
   ------------------------------------------------------------
   set_flash() output is rendered by header.php as .bottom-toast
   above the section. On auth pages it reads as a banner pinned
   below the official rule, close to the form it refers to.
   ------------------------------------------------------------ */
body:has(.bisu-login-page) .bottom-toast {
    position: fixed;
    top: 3px !important;
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;
    z-index: 4 !important;
    width: min(432px, calc(100vw - 2rem)) !important;
    max-width: none !important;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    transform: translateX(-50%);
    padding: 0.7rem 0.95rem !important;
    border: 1px solid !important;
    border-top: 0 !important;
    border-radius: 0 0 8px 8px !important;
    font-size: 0.845rem;
    font-weight: 500;
    line-height: 1.45;
    text-align: left;
    box-shadow: 0 10px 24px -14px rgba(9, 32, 62, 0.45) !important;
}

body:has(.bisu-login-page) .bottom-toast::before {
    width: 8px;
    height: 8px;
    min-width: 8px;
    align-self: center;
}

body:has(.bisu-login-page) .bottom-toast.is-hiding {
    transform: translate(-50%, -8px);
}

body:has(.bisu-login-page) .bottom-toast-error,
body:has(.bisu-login-page) .bottom-toast-danger {
    background: #fef3f2 !important;
    color: #97231a !important;
    border-color: #f4c2bc !important;
}

body:has(.bisu-login-page) .bottom-toast-success {
    background: #ecfdf3 !important;
    color: #045c38 !important;
    border-color: #a3e5c0 !important;
}

body:has(.bisu-login-page) .bottom-toast-info {
    background: #eff6ff !important;
    color: #134c91 !important;
    border-color: #b7d5f6 !important;
}

body:has(.bisu-login-page) .bottom-toast-warning {
    background: #fffaeb !important;
    color: #965009 !important;
    border-color: #f3d47f !important;
}

/* ------------------------------------------------------------
   11. Focus visibility
   ------------------------------------------------------------
   saas.css sets `:focus-visible { outline: none !important }`
   globally, so the auth focus ring has to be !important too.
   ------------------------------------------------------------ */
.bisu-login-page a:focus-visible,
.bisu-login-page button:focus-visible {
    outline: 2px solid var(--auth-blue) !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
    border-radius: 6px;
}

.bisu-login-page input:focus-visible {
    outline: none !important;
}

/* ------------------------------------------------------------
   12. Recovery pages (forgot_password.php / reset_password.php)
   ------------------------------------------------------------ */
.bisu-login-shell.bisu-recovery-shell {
    width: min(432px, 100%);
}

/* ------------------------------------------------------------
   13. Responsive
   ------------------------------------------------------------ */
@media (max-width: 640px) {
    .bisu-login-page {
        display: block;
        padding: 2.25rem 1.15rem 2.5rem;
    }

    /* Phones drop the grid and the wide light sources — at this width they
       only cost paint time — but keep the navy so the brand holds. */
    .bisu-login-background {
        background:
            radial-gradient(620px 420px at 50% -10%, rgba(24, 96, 178, 0.38), transparent 66%),
            linear-gradient(180deg, #0a1e3b 0%, #071427 60%, #04101f 100%);
    }

    .bisu-login-background::before,
    .bisu-login-background::after {
        display: none;
    }

    .bisu-login-shell {
        width: 100%;
        max-width: 420px;
        margin: 0 auto;
        gap: 1.35rem;
    }

    .bisu-auth-seal {
        width: 66px;
        height: 66px;
    }

    .bisu-login-card {
        padding: 1.45rem 1.2rem 1.6rem;
        border-radius: var(--auth-radius);
        background: #fff;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        box-shadow:
            0 1px 2px rgba(2, 8, 18, 0.20),
            0 18px 40px -18px rgba(2, 10, 24, 0.65);
    }

    body:has(.bisu-login-page) .bottom-toast {
        width: calc(100vw - 1.6rem);
    }
}

@media (max-width: 380px) {
    .bisu-auth-org {
        letter-spacing: 0.05em !important;
    }
}

/* Short viewports (720p laptops, landscape phones): tighten the vertical
   rhythm so the whole composition still fits without scrolling. */
@media (max-height: 820px) and (min-width: 641px) {
    .bisu-login-page {
        padding-block: 1.25rem;
    }

    .bisu-auth-seal {
        width: 58px;
        height: 58px;
    }

    .bisu-google-button {
        min-height: 44px;
    }

    .bisu-input-wrap input {
        min-height: 44px !important;
    }

    .bisu-login-button {
        min-height: 46px;
    }

    .bisu-login-shell {
        gap: 1.15rem;
    }

    .bisu-auth-masthead {
        gap: 0.7rem;
    }

    .bisu-auth-system {
        margin-top: 0.3rem;
        font-size: 1.32rem;
    }

    .bisu-login-card {
        padding: 1.4rem 1.5rem 1.5rem;
    }

    .bisu-login-card-head {
        margin-bottom: 1.05rem;
    }

    .bisu-login-divider {
        margin: 0.85rem 0;
    }

    .bisu-login-form {
        gap: 0.85rem;
    }

    .bisu-register-note {
        margin-top: 1rem;
    }
}

/* ------------------------------------------------------------
   14. Graceful degradation
   ------------------------------------------------------------ */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .bisu-login-card {
        background: #ffffff;
    }
}

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

    .bisu-login-page *,
    .bisu-login-page *::before,
    .bisu-login-page *::after {
        animation: none !important;
        transition: none !important;
    }
}

@media (prefers-contrast: more) {
    .bisu-login-background {
        background: #04101f;
    }

    .bisu-login-background::before,
    .bisu-login-background::after {
        display: none;
    }

    .bisu-login-card {
        background: #ffffff;
        border-color: #ffffff;
    }

    .bisu-input-wrap input {
        border-color: #8f9fb2 !important;
    }

    .bisu-form-hint,
    .bisu-register-note {
        color: #4b5a6d;
    }

    .bisu-auth-republic {
        color: #dbe6f4;
    }
}/* Shared account pages: institutional branding and a focused form panel. */
.bisu-login-page { padding: clamp(2rem, 6vh, 4.5rem) clamp(1.25rem, 5vw, 5rem); }
.bisu-login-background {
    background: radial-gradient(ellipse at 10% 20%, #17497b 0, transparent 55%), linear-gradient(120deg, #0c2d50, #081a30 75%);
}
.bisu-login-background::before { background-size: 80px 80px; opacity: .45; }
.bisu-login-background::after { background: none; border: 1px solid #ffffff0c; border-radius: 50%; width: 800px; height: 800px; inset: auto auto -520px -200px; box-shadow: 0 0 0 85px #ffffff03, 0 0 0 86px #ffffff08; }
.bisu-login-shell, .bisu-login-shell.bisu-recovery-shell {
    width: min(1050px, 100%); max-width: none;
    grid-template-columns: minmax(0, 1fr) minmax(0, 450px);
    column-gap: clamp(3rem, 7vw, 7rem); row-gap: 1.5rem; align-items: center;
}
.bisu-login-shell > * { min-width: 0; }
.bisu-auth-masthead { text-align: left; justify-items: start; gap: 2.5rem; }
.bisu-auth-home { display: inline-flex; align-items: center; gap: .6rem; color: #c7d7e9; text-decoration: none; font-size: .8rem; }
.bisu-auth-home:hover { color: #fff; }
.bisu-auth-home svg { width: 16px; height: 16px; }
.bisu-auth-brand-row { display: flex; align-items: center; gap: 1rem; }
.bisu-auth-seal { width: 64px; height: 64px; flex: 0 0 64px; filter: drop-shadow(0 3px 8px #0003); }
.bisu-auth-identity { gap: .3rem; }
.bisu-auth-republic { font-size: .58rem; color: #adc3db; letter-spacing: .12em !important; }
.bisu-auth-org { font-size: .74rem; color: #f0f5fc; line-height: 1.6; letter-spacing: .02em !important; text-transform: none; }
.bisu-auth-campus { margin: 0; color: #c3d4e8; font-size: .72rem; }
.bisu-auth-kicker { color: #e8bf66; margin: 0 0 1rem; font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .15em !important; }
.bisu-auth-system { margin: 0; font-size: clamp(2.3rem, 3.8vw, 3.4rem); font-weight: 700; line-height: 1.14; text-wrap: initial; letter-spacing: -.045em !important; text-shadow: none; }
.bisu-auth-system span { color: #eac77e; }
.bisu-auth-description { color: #bed0e4; font-size: .92rem; line-height: 1.85; margin: 1.4rem 0 0; max-width: 360px; }
.bisu-auth-benefits { display: grid; gap: .9rem; padding-top: 1.5rem; border-top: 1px solid #ffffff20; width: 100%; }
.bisu-auth-benefits span { display: flex; align-items: center; gap: .7rem; font-size: .77rem; color: #dae5f2; }
.bisu-auth-benefits svg { color: #dfbd75; }
.bisu-login-card { background: #fff; padding: 2.25rem; border: 1px solid #e5ebf2; border-radius: 20px; backdrop-filter: none; box-shadow: 0 24px 75px -25px #0008; }
.bisu-login-card::before { left: 2.25rem; right: auto; width: 44px; height: 3px; opacity: 1; background: #dbb35b; }
.bisu-login-card-head { margin-bottom: 1.7rem; }
.bisu-login-card h2 { font-size: 1.65rem; font-weight: 700; letter-spacing: -.035em !important; line-height: 1.25; }
.bisu-login-card-head > p:not(.bisu-eyebrow) { font-size: .85rem; line-height: 1.7; margin-top: .7rem; }
.bisu-eyebrow { font-size: .62rem; margin-bottom: .65rem; }
.bisu-login-form { gap: 1.25rem; }
.bisu-input-wrap input { min-width: 0; min-height: 50px !important; border-radius: 10px !important; background: #f9fbfd !important; font-size: .9rem !important; }
.bisu-input-wrap input:focus { background: #fff !important; }
.bisu-input-wrap > svg, .bisu-input-wrap > i[data-lucide] { color: #667d96; }
.bisu-google-button { min-height: 48px; border-radius: 10px; font-size: .85rem; }
.bisu-login-divider { font-size: .6rem; letter-spacing: .07em !important; }
.bisu-login-button { min-height: 50px; border-radius: 10px; background: #124779; box-shadow: 0 6px 14px -6px #12477980; }
.bisu-login-button:hover:not(:disabled) { background: #0b355e; box-shadow: 0 8px 18px -6px #12477980; }
.bisu-form-hint { padding: .8rem .9rem; background: #f2f6fa; border: 1px solid #e6edf5; border-radius: 9px; font-size: .72rem; line-height: 1.65; margin: 0; }
.bisu-form-hint svg, .bisu-form-hint i[data-lucide] { color: #527599; }
.bisu-register-note { padding-top: 1.15rem; border-top: 1px solid #e6edf5; margin-top: 1.4rem; font-size: .73rem; }
.bisu-recovery-icon { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid #dce7f3; border-radius: 14px; background: #eef4fb; color: #184e80; margin-bottom: 1.4rem; }
.bisu-recovery-icon svg, .bisu-recovery-icon i[data-lucide] { width: 24px; height: 24px; }
.bisu-password-requirements { background: #f3f6fa; border: 1px solid #e3ebf3; border-radius: 10px; padding: .9rem 1rem; color: #51647c; font-size: .72rem; }
.bisu-password-requirements strong { color: #334b66; font-weight: 600; }
.bisu-password-requirements ul { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem .8rem; padding-left: 1rem; margin: .65rem 0 0; }
.bisu-password-requirements li::marker { color: #6884a4; }
.bisu-login-page [hidden] { display: none !important; }
.bisu-auth-home:focus-visible { outline-color: #f0cb78 !important; }
@media (max-width: 850px) {
    .bisu-login-shell, .bisu-login-shell.bisu-recovery-shell { width: min(450px, 100%); grid-template-columns: minmax(0, 1fr); gap: 1.6rem; margin-inline: auto; }
    .bisu-auth-masthead { gap: 1.5rem; }
    .bisu-auth-brand-row { justify-content: center; width: 100%; }
    .bisu-auth-welcome, .bisu-auth-benefits { display: none; }
    .bisu-login-page { padding: 2rem 1.25rem; }
}
@media (max-width: 480px) {
    .bisu-login-page { padding: 1.5rem 1rem; }
    .bisu-login-card { padding: 1.75rem 1.25rem; border-radius: 16px; }
    .bisu-login-card::before { left: 1.25rem; }
    .bisu-login-card h2 { font-size: 1.5rem; }
    .bisu-input-wrap input { font-size: 1rem !important; }
    .bisu-auth-seal { width: 54px; height: 54px; flex-basis: 54px; }
    .bisu-auth-brand-row { gap: .8rem; }
    .bisu-auth-org { font-size: .69rem; }
    .bisu-auth-republic { font-size: .51rem; }
    .bisu-field-head { gap: .5rem; flex-wrap: wrap; }
    .bisu-password-requirements ul { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .bisu-login-page *, .bisu-login-page *::before, .bisu-login-page *::after { transition: none !important; animation: none !important; }
}

/* Compact glass panels for sign-in and password recovery. */
.bisu-login-page--glass .bisu-login-shell {
    grid-template-columns: minmax(0, 1fr) minmax(0, 390px);
    column-gap: clamp(2rem, 6vw, 5rem);
}

.bisu-login-page--glass .bisu-login-background::after {
    display: block;
    inset: 0;
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background:
        radial-gradient(circle 230px at 69% 25%, rgba(89, 189, 207, .28), transparent 75%),
        radial-gradient(circle 260px at 91% 77%, rgba(225, 186, 112, .17), transparent 75%);
}

.bisu-login-page--glass .bisu-login-card {
    padding: 1.55rem 1.6rem 1.4rem;
    border: 1px solid rgba(255, 255, 255, .68);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .89), rgba(242, 250, 253, .78));
    -webkit-backdrop-filter: blur(24px) saturate(145%);
    backdrop-filter: blur(24px) saturate(145%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .92),
        0 24px 70px rgba(0, 15, 39, .28),
        0 3px 12px rgba(0, 15, 39, .12);
}

.bisu-login-page--glass .bisu-login-card::before { left: 1.6rem; }
.bisu-login-page--glass .bisu-login-card-head { margin-bottom: 1.1rem; }
.bisu-login-page--glass .bisu-login-card h2 { font-size: 1.45rem; }
.bisu-login-page--glass .bisu-login-card-head > p:not(.bisu-eyebrow) { margin-top: .4rem; }
.bisu-login-page--glass .bisu-eyebrow { margin-bottom: .45rem; }
.bisu-login-page--glass .bisu-google-button { min-height: 44px; }
.bisu-login-page--glass .bisu-login-divider { margin: .8rem 0; }
.bisu-login-page--glass .bisu-login-form { gap: .85rem; }
.bisu-login-page--glass .bisu-input-wrap input { min-height: 46px !important; }
.bisu-login-page--glass .bisu-login-button { min-height: 46px; }
.bisu-login-page--glass .bisu-form-hint {
    padding: .6rem .75rem;
    background: rgba(248, 241, 218, .72);
    border-color: rgba(205, 185, 127, .48);
}
.bisu-login-page--glass .bisu-register-note { margin-top: 1rem; padding-top: .8rem; }

@media (max-width: 850px) {
    .bisu-login-page--glass .bisu-login-shell {
        width: min(390px, 100%);
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .bisu-login-page--glass .bisu-login-background::after {
        background:
            radial-gradient(circle 200px at 84% 33%, rgba(89, 189, 207, .25), transparent 75%),
            radial-gradient(circle 220px at 12% 82%, rgba(225, 186, 112, .12), transparent 75%);
    }
}

@media (max-width: 480px) {
    .bisu-login-page--glass .bisu-login-card { padding: 1.35rem 1.15rem 1.25rem; }
    .bisu-login-page--glass .bisu-login-card::before { left: 1.15rem; }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .bisu-login-page--glass .bisu-login-card { background: #f8fbfd; }
}

@media (prefers-contrast: more) {
    .bisu-login-page--glass .bisu-login-card {
        background: #fff;
        border-color: #fff;
    }
}

/* Share the landing page's purple and blue canvas, with seal accents. */
html body:has(.bisu-login-page--glass) {
    background: #e9e9fa !important;
    color: #1b2b41 !important;
}

.bisu-login-page--glass {
    --auth-blue: #3c267f;
    --auth-blue-deep: #25145f;
    --auth-gold: #bd8b17;
    --auth-gold-lit: #e8ba2d;
}

.bisu-login-page--glass::before {
    background: linear-gradient(90deg, #3c267f 0 62%, #e8ba2d 62% 82%, #126b3c 82% 100%);
}

.bisu-login-page--glass .bisu-login-background {
    background:
        radial-gradient(ellipse 48% 64% at 88% 32%, rgba(87, 58, 155, .32), transparent 76%),
        radial-gradient(ellipse 42% 54% at 8% 78%, rgba(46, 98, 173, .17), transparent 76%),
        radial-gradient(ellipse 32% 42% at 7% 8%, rgba(232, 186, 45, .11), transparent 76%),
        linear-gradient(120deg, #eef0ff 0%, #e4eafa 55%, #e9e1f8 100%);
}

.bisu-login-page--glass .bisu-login-background::before {
    display: block;
    background-image: radial-gradient(#59418d 1px, transparent 1px);
    background-size: 26px 26px;
    opacity: .13;
    -webkit-mask-image: linear-gradient(90deg, transparent 40%, #000);
    mask-image: linear-gradient(90deg, transparent 40%, #000);
}
.bisu-login-page--glass .bisu-login-background::after {
    display: block;
    inset: auto;
    top: -390px;
    right: -210px;
    width: 720px;
    height: 720px;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 50%;
    background: none;
    box-shadow: 0 0 0 100px rgba(255, 255, 255, .24),
        0 0 0 101px rgba(255, 255, 255, .5),
        0 0 0 195px rgba(255, 255, 255, .12);
}

.bisu-login-page--glass .bisu-auth-home { color: #3c267f; font-size: .86rem; font-weight: 600; }
.bisu-login-page--glass .bisu-auth-home:hover { color: #25145f; }
.bisu-login-page--glass .bisu-auth-seal { filter: drop-shadow(0 8px 18px rgba(24, 31, 70, .28)); }
.bisu-login-page--glass .bisu-auth-republic { color: #5b4b79; font-size: .65rem; }
.bisu-login-page--glass .bisu-auth-org { color: #1b2b41; }
.bisu-login-page--glass .bisu-auth-campus { color: #536a7e; font-size: .78rem; }
.bisu-login-page--glass .bisu-auth-kicker { color: #126b3c; }
.bisu-login-page--glass .bisu-auth-system { color: #1b2b41 !important; }
.bisu-login-page--glass .bisu-auth-system span { color: var(--auth-blue); }
.bisu-login-page--glass .bisu-auth-description { color: #4d6379; font-size: 1rem; font-weight: 400; line-height: 1.75; }
.bisu-login-page--glass .bisu-auth-benefits { border-color: #d7c9a7; }
.bisu-login-page--glass .bisu-auth-benefits span { color: #405a70; font-size: .84rem; font-weight: 600; }
.bisu-login-page--glass .bisu-auth-benefits svg { color: #126b3c; }

.bisu-login-page--glass .bisu-login-card {
    border-color: rgba(255, 255, 255, .9);
    background: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(248, 247, 255, .96));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92),
        0 24px 70px rgba(60, 38, 127, .14),
        0 3px 12px rgba(60, 38, 127, .07);
}

.bisu-login-page--glass .bisu-input-wrap input:focus {
    box-shadow: 0 0 0 3px rgba(60, 38, 127, .16) !important;
}

.bisu-login-page--glass .bisu-login-button {
    background: #3c267f;
    border-color: #3c267f;
    box-shadow: 0 8px 18px rgba(60, 38, 127, .16);
}
.bisu-login-page--glass .bisu-login-button:hover:not(:disabled) {
    background: #25145f;
    border-color: #25145f;
    box-shadow: 0 10px 22px rgba(60, 38, 127, .22);
}
.bisu-login-page--glass .bisu-recovery-icon {
    border-color: #cde1c7;
    background: #e8f3e6;
    color: #126b3c;
}

@media (max-width: 960px) {
    .bisu-login-page--glass .bisu-login-background::before,
    .bisu-login-page--glass .bisu-login-background::after { display: none; }
}

@media (max-width: 640px) {
    .bisu-login-page--glass .bisu-login-background::before,
    .bisu-login-page--glass .bisu-login-background::after {
        display: none;
    }
}

@media (prefers-contrast: more) {
    .bisu-login-page--glass .bisu-login-background {
        background: #eeefff;
    }
    .bisu-login-page--glass .bisu-login-background::before,
    .bisu-login-page--glass .bisu-login-background::after {
        display: none;
    }
    .bisu-login-page--glass .bisu-login-card {
        background: #fff;
        border-color: #657388;
    }
}