@font-face {
        font-family: 'Inter';
        font-style: normal;
        font-weight: 100 900;
        font-display: optional;
        src: url('../../fonts/inter-latin-ext.woff2') format('woff2');
        unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }

    @font-face {
        font-family: 'Inter';
        font-style: normal;
        font-weight: 100 900;
        font-display: optional;
        src: url('../../fonts/inter-latin.woff2') format('woff2');
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

    *, *::before, *::after { box-sizing: border-box; }

    body.login {
        font-family: 'Inter', system-ui, sans-serif;
        margin: 0; padding: 0;
        background: #fff;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }

    /* ── outer split ── */
    .cl-layout {
        flex: 1;
        display: grid;
        grid-template-columns: 1fr 480px;
        min-height: 100vh;
    }

    /* ── image panel ── */
    .cl-panel {
        position: relative;
        overflow: hidden;
        background-color: #1a2744;
        background-image:
            linear-gradient(180deg, rgba(10,20,50,.2) 0%, rgba(10,20,50,.55) 100%),
            var(--cl-hero);
        background-size: cover;
        background-position: center;
    }
    .cl-panel__overlay {
        position: absolute; inset: 0; pointer-events: none;
        background: linear-gradient(135deg, rgba(26,32,109,.22) 0%, transparent 55%);
    }
    .cl-panel__stripe {
        position: absolute; bottom: 0; left: 0; right: 0;
        height: 4px; z-index: 2;
        background: linear-gradient(90deg, transparent, #EA2839, #1A206D, #FFD500, #00A551, transparent);
    }

    /* ── form column ── */
    .cl-form-col {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        padding: 3rem 2.5rem;
        background: #fff;
        overflow: hidden;
    }

    /* ── #login reset ── */
    #login {
        width: 100%;
        max-width: 360px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* hide WP logo link — brand is in .cl-brand */
    .login .wp-login-logo,
    .login h1.wp-login-logo {
        position: absolute !important;
        width: 1px !important; height: 1px !important;
        overflow: hidden !important;
        clip: rect(0,0,0,0) !important;
        margin: -1px !important; padding: 0 !important;
        border: 0 !important; white-space: nowrap !important;
    }

    /* ── #login width fix — core sets width:320px which overrides max-width ── */
    #login {
        width: 100% !important;
        max-width: 360px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* ── brand ── */
    .cl-brand {
        /* !important beats core .login * { padding:0 } reset */
        padding-bottom: 3.5rem !important;
        margin-bottom: 0 !important;
    }
    .cl-brand__link {
        display: inline-flex; align-items: center; gap: .6rem;
        text-decoration: none !important;
    }
    .cl-brand__img {
        width: 44px; height: 44px; object-fit: contain; display: block;
    }
    .cl-brand__wordmark {
        font-size: 1.375rem; font-weight: 800;
        letter-spacing: -.025em; line-height: 1; color: #1A206D;
    }
    .cl-brand__w2 {
        background: linear-gradient(90deg, #EA2839 0%, #1A206D 55%, #ca8a04 100%);
        -webkit-background-clip: text; background-clip: text; color: transparent;
    }

    /* ── "Sign in" heading ── */
    /* !important needed on all spacing — core .login * { padding:0; margin:0 } resets everything */
    .cl-heading {
        font-size: 2rem !important; font-weight: 800 !important;
        letter-spacing: -.035em !important; line-height: 1.1 !important;
        color: #0f172a !important;
        margin: 0 !important;
        padding-top: 0.5rem !important;
        padding-bottom: 2.75rem !important;
    }

    /* ── form shell — core sets bg, border, padding, overflow:hidden ── */
    #loginform,
    .login form {
        background: transparent !important;
        border: none !important; border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0 !important; margin: 0 !important;
        /* override core overflow:hidden which clips floated button + register row */
        overflow: visible !important;
    }

    /* ── field spacing ── */
    #login form > p,
    .login form > p { margin: 0 0 1.25rem !important; }
    #login form .user-pass-wrap,
    .login form .user-pass-wrap { margin: 0 0 1.25rem !important; }
    #login form .user-pass-wrap > p,
    .login form .user-pass-wrap > p { margin: 0 !important; }
    #login form .forgetmenot,
    .login form .forgetmenot { margin: 0 0 .75rem !important; }

    /* core: #loginform p.submit { margin: -10px 0 20px } — ID beats class, so match it */
    #loginform p.submit,
    .login form p.submit {
        float: none !important; clear: both !important;
        width: 100% !important;
        margin: 1.5rem 0 0 !important;
        padding: 0 !important;
    }
    /* ensure the reCAPTCHA / any iframe inside form isn't clipped */
    .login form .g-recaptcha,
    .login form .recaptcha-container,
    #loginform > div,
    #loginform > .g-recaptcha {
        margin: 0 0 1.25rem !important;
        overflow: visible !important;
    }

    /* ── labels ── */
    .login label {
        display: block;
        font-size: .8125rem; font-weight: 600;
        color: #475569; margin: 0 0 .4rem;
    }
    .login .forgetmenot label {
        display: inline; font-weight: 500;
        color: #64748b; margin: 0;
    }

    /* ── inputs ── */
    .login input[type="text"].input,
    .login input[type="password"].input,
    .login input[type="text"],
    .login input[type="password"],
    .login form .input {
        display: block; width: 100%; max-width: none !important;
        background: #f8fafc;
        border: 1.5px solid #e2e8f0;
        border-radius: .625rem;
        padding: .75rem 1rem;
        font-size: 1rem; font-family: inherit;
        color: #0f172a; line-height: 1.4;
        transition: border-color .2s, box-shadow .2s;
        box-shadow: none;
    }
    .login input[type="text"]:focus,
    .login input[type="password"]:focus,
    .login form .input:focus {
        outline: none;
        border-color: #1A206D;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(26,32,109,.1);
    }

    /* show-password toggle */
    .login .wp-pwd { position: relative; }
    .login .wp-pwd .button.wp-hide-pw {
        position: absolute; top: 50%; right: .75rem;
        transform: translateY(-50%);
        background: none !important; border: none !important;
        box-shadow: none !important; padding: .25rem !important;
        color: #94a3b8; width: auto !important; min-width: 0 !important;
    }
    .login .wp-pwd input { padding-right: 2.75rem; }

    /* ── Log In button — core floats .button-primary right; kill it here ── */
    .login .button-primary,
    .wp-core-ui .button-primary.button-large,
    .wp-core-ui .button-primary,
    #wp-submit {
        float: none !important;
        display: block !important; width: 100% !important;
        background: #1A206D !important; border: none !important;
        border-radius: .625rem !important;
        padding: .8rem 1.25rem !important;
        height: auto !important; min-height: 0 !important;
        font-size: 1rem !important; font-weight: 700 !important;
        font-family: inherit !important; text-align: center !important;
        text-shadow: none !important; color: #fff !important;
        box-shadow: 0 4px 16px rgba(26,32,109,.25) !important;
        line-height: 1.4 !important; cursor: pointer;
        transition: background .15s, box-shadow .15s, transform .15s !important;
    }
    .login .button-primary:hover,
    .wp-core-ui .button-primary:hover,
    .wp-core-ui .button-primary:focus {
        background: #EA2839 !important;
        box-shadow: 0 6px 20px rgba(234,40,57,.28) !important;
        transform: translateY(-1px);
    }

    /* ── Create Free Account button ── */
    #loginform .cl-register-row,
    .cl-register-row {
        display: block !important;
        float: none !important;
        clear: both !important;
        margin: 1.25rem 0 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }
    .cl-btn-register {
        display: block !important; width: 100% !important;
        text-align: center !important; text-decoration: none !important;
        background: transparent !important;
        border: 1.5px solid #1A206D !important;
        border-radius: .625rem !important;
        padding: .8rem 1.25rem !important;
        font-size: 1rem !important; font-weight: 700 !important;
        font-family: inherit !important; color: #1A206D !important;
        box-shadow: none !important;
        height: auto !important; line-height: 1.4 !important;
        cursor: pointer;
        transition: background .15s, color .15s, transform .15s !important;
    }
    .cl-btn-register:hover {
        background: #1A206D !important;
        color: #fff !important; transform: translateY(-1px);
    }

    /* ── forgot password (#nav) ── */
    #login #nav {
        margin: 1.25rem 0 0 !important; padding: 0 !important;
        text-align: center;
    }
    #login #nav a[href*="action=register"],
    #login #nav a.wp-login-register { display: none !important; }
    #login #nav a[href*="lostpassword"],
    #login #nav a[href*="lost-password"] {
        font-size: .8125rem !important; font-weight: 500 !important;
        color: #64748b !important; text-decoration: none !important;
    }
    #login #nav a[href*="lostpassword"]:hover,
    #login #nav a[href*="lost-password"]:hover {
        color: #1A206D !important; text-decoration: underline !important;
    }

    /* ── notices / errors ── */
    .login .message, .login #login_error, .login .notice {
        border-radius: .625rem; box-shadow: none;
        margin: 0 0 1.25rem !important;
    }

    /* ── back to site ── */
    #backtoblog { margin: 2rem 0 0 !important; text-align: center; }
    #backtoblog a {
        font-size: .8125rem !important; font-weight: 500 !important;
        color: #94a3b8 !important; text-decoration: none !important;
    }
    #backtoblog a:hover { color: #1A206D !important; }
    .login .privacy-policy-page-link { text-align: center; margin-top: .75rem; }
    .login .privacy-policy-page-link a { font-size: .75rem; color: #cbd5e1; }
    .language-switcher { display: none !important; }

    /* ── register page ── */
    /* hide core "Registration confirmation will be emailed to you." */
    #reg_passmail { display: none !important; }

    /* asterisk on required field labels */
    .cl-required {
        color: #dc2626 !important;
        font-weight: 700 !important;
        margin-left: .1em !important;
    }

    /* ToS checkbox row */
    .cl-tos-row {
        margin: 1.5rem 0 0 !important;
        padding: 0 !important;
        float: none !important;
        clear: both !important;
    }
    .cl-tos-label {
        display: flex !important;
        align-items: flex-start !important;
        gap: .625rem !important;
        cursor: pointer;
        font-size: .875rem !important;
        font-weight: 500 !important;
        color: #475569 !important;
        line-height: 1.5 !important;
    }
    .cl-tos-label input[type="checkbox"] {
        flex-shrink: 0 !important;
        margin: .2rem 0 0 !important;
        width: 1rem !important; height: 1rem !important;
        accent-color: #1A206D;
        cursor: pointer;
    }
    .cl-tos-label a {
        color: #1A206D !important;
        text-decoration: underline !important;
        text-underline-offset: 2px !important;
        font-weight: 600 !important;
    }
    .cl-tos-label a:hover { color: #EA2839 !important; }

    /* ── mobile ── */
    @media screen and (max-width: 782px) {
        .cl-layout {
            grid-template-columns: 1fr;
            grid-template-rows: 220px auto;
            min-height: 100vh;
        }
        .cl-form-col {
            min-height: 0;
            justify-content: flex-start;
            /* generous side padding; enough bottom room for the register button */
            padding: 2.25rem 1.75rem 5rem !important;
            overflow-y: auto;
        }
        #login { max-width: 100% !important; }
        .cl-brand { padding-bottom: 2.5rem !important; }
        .cl-heading { padding-top: 0.5rem !important; padding-bottom: 2rem !important; }
    }