/* Body background only */
body.light {
    background: #ffffff !important;
    color: #0e1626 !important;
}

    /* Panel switches to white in light mode */
    body.light .panel {
        background: #ffffff !important;
        color: #0e1626 !important;
        /* softened, subtle shadows */
        box-shadow: inset 0 -4px 12px rgba(0,0,0,.10), inset 0 4px 10px rgba(0,0,0,.06), 0 6px 14px rgba(0,0,0,.10);
    }

    /* Inputs: white bg, black text, runner-blue border */
    body.light .input {
        background: #ffffff !important;
        color: #111 !important;
        border-color: #5ab3ff !important;
    }

        body.light .input:focus {
            background: #ffffff !important;
            border-color: #5ab3ff !important;
            box-shadow: 0 0 0 4px rgba(90,179,255,.35) !important;
        }

    /* Cancel button = runner blue */
    body.light #cancelBtn {
        background: #5ab3ff !important;
        border-color: #5ab3ff !important;
        color: #fff !important;
    }

        body.light #cancelBtn:hover {
            filter: brightness(1.05);
        }

        body.light #cancelBtn:active {
            transform: translateY(1px);
        }

    /* ===== Faint outer glow additions (light mode) ===== */

    /* Very subtle outer glow for the collapsed Login button */
    body.light .cta {
        /* keep existing animated gradient from dark CSS; just add a faint glow */
        box-shadow: 0 6px 14px rgba(90,179,255,.14), /* faint blue outer glow */
        inset 0 -2px 0 rgba(0,0,0,.10); /* gentle inset edge */
    }

    /* Whisper of depth on the outer block */
    body.light .login-block {
        /* mirror the dark file’s outer shadows, but keep them very light */
        box-shadow: 0 10px 28px rgba(0,0,0,.12), /* faint bottom */
        0 -10px 28px rgba(0,0,0,.08), /* faint top */
        inset 0 0 0 2px rgba(0,0,0,.75), inset 0 18px 36px rgba(255,255,255,.20), inset 0 -18px 36px rgba(0,0,0,.85), inset 34px 0 48px rgba(0,0,0,.62), inset -34px 0 48px rgba(0,0,0,.62);
    }

    /* === Faint outer glow (light) === */

    /* outer block */
    body.light .login-block {
        box-shadow: 0 14px 32px rgba(0,0,0,.14), 0 -14px 32px rgba(0,0,0,.10), inset 0 0 0 2px rgba(0,0,0,.75), inset 0 18px 36px rgba(255,255,255,.20), inset 0 -18px 36px rgba(0,0,0,.85), inset 34px 0 48px rgba(0,0,0,.62), inset -34px 0 48px rgba(0,0,0,.62) !important;
    }

    /* collapsed “Login” button */
    body.light .cta {
        box-shadow: 0 6px 14px rgba(90,179,255,.16), inset 0 -2px 0 rgba(0,0,0,.10) !important;
    }

    /* -------------------------------------------
   Light theme: subtle BLACK outer glow on .frame
   (snug to the edge; no 10px gap; very faint)
   ------------------------------------------- */
    body.light .frame {
        position: relative;
        z-index: 0;
        isolation: isolate; /* keeps the glow behind without weird stacking */
    }

        body.light .frame::after {
            content: "";
            position: absolute;
            inset: 0; /* <-- no offset = no gap between frame and glow */
            border-radius: calc(var(--radius) + 24px); /* follows your rounded look */
            pointer-events: none;
            background: transparent;
            /* very faint black halo, not blue */
            box-shadow: 0 0 36px rgba(0, 0, 0, 1), 0 0 12px rgba(0, 0, 0, 1) !important;
            opacity: 1;
            transition: box-shadow .25s ease, opacity .25s ease, filter .25s ease;
            z-index: -1; /* sit behind the frame content */
        }

        /* Slightly stronger when expanded/focused */
        body.light .frame.open::after,
        body.light .frame:focus-within::after {
            box-shadow: 0 0 42px rgba(0, 0, 0, 1), 0 0 16px rgba(0, 0, 0, 1) !important;
        }


.password-field .eye-wrap {
    position: relative;
}

    .password-field .eye-wrap .input {
        padding-right: 44px;
    }

.eye-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    padding: 6px;
    cursor: pointer;
    display: grid;
    place-items: center;
    border-radius: 8px;
}

    .eye-btn svg {
        opacity: .8;
    }

    .eye-btn:active {
        transform: translateY(-50%) scale(.98);
    }