:root {
    --csl-primary: #164b68;
    --csl-primary-dark: #0e354b;
    --csl-secondary: #BCE153;
    --csl-text: #173043;
    --csl-muted: #6f7f8a;
    --csl-line: #dce6eb;
    --csl-soft: #f3f7f8;
}
body.csl-standalone-login-page {
    margin: 0;
    min-height: 100vh;
    background: #eaf3f5;
    color: var(--csl-text);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body.csl-standalone-login-page #wpadminbar { display: none !important; }
body.csl-standalone-login-page * { box-sizing: border-box; }
body.csl-standalone-login-page svg { width: 1em; height: 1em; display: block; fill: currentColor; }
body.csl-standalone-login-page a { color: inherit; }

.csl-auth-shell { min-height: 100vh; display: grid; place-items: center; padding: 38px; }
.csl-auth-frame {
    width: min(1480px, 100%);
    min-height: min(880px, calc(100vh - 76px));
    display: grid;
    grid-template-columns: minmax(430px, .93fr) minmax(560px, 1.07fr);
    overflow: hidden;
    background: #fff;
    border-radius: 30px;
    box-shadow: 0 35px 100px rgba(14,53,75,.17);
}
.csl-auth-brand-panel {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 48px 54px 38px;
    color: #fff;
    background: linear-gradient(145deg, #123f5a 0%, #1f6689 100%);
}
.csl-auth-brand-panel::before,
.csl-auth-brand-panel::after {
    content: "";
    position: absolute;
    border: 42px solid rgba(188,225,83,.11);
    border-radius: 50%;
    pointer-events: none;
}
.csl-auth-brand-panel::before { width: 310px; height: 310px; right: -78px; top: -118px; }
.csl-auth-brand-panel::after { width: 200px; height: 200px; left: -90px; bottom: -105px; }
.csl-auth-brand-row { position: relative; z-index: 1; display: flex; align-items: center; gap: 16px; }
.csl-auth-brand-mark { position: relative; width: 42px; height: 52px; border: 2px solid #fff; border-radius: 13px; }
.csl-auth-brand-mark::before { content: ""; position: absolute; left: 10px; top: 8px; width: 3px; height: 31px; background: var(--csl-secondary); border-radius: 5px; }
.csl-auth-brand-mark span { position: absolute; left: 16px; top: 7px; width: 14px; height: 2px; background: #fff; }
.csl-auth-brand-mark i { position: absolute; left: 16px; bottom: 7px; width: 14px; height: 2px; background: #fff; }
.csl-auth-brand-row strong, .csl-auth-brand-row small { display: block; }
.csl-auth-brand-row strong { font-size: 15px; letter-spacing: .18em; }
.csl-auth-brand-row small { margin-top: 7px; color: rgba(255,255,255,.62); font-size: 10px; font-weight: 800; letter-spacing: .2em; }
.csl-secure-pill { position: absolute; top: 50px; right: 52px; z-index: 1; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; color: rgba(255,255,255,.82); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; font-size: 11px; }
.csl-secure-pill svg { color: var(--csl-secondary); font-size: 17px; }
.csl-secure-pill b { font-weight: 650; }
.csl-auth-brand-copy { position: relative; z-index: 1; margin-top: 115px; }
.csl-auth-brand-copy > span { display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,.76); font-size: 13px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.csl-auth-brand-copy > span::before { content: ""; width: 25px; height: 2px; background: var(--csl-secondary); }
.csl-auth-brand-copy h1 { max-width: 590px; margin: 18px 0 25px; color: #fff; font-size: clamp(45px, 5vw, 72px); line-height: .98; letter-spacing: -.045em; }
.csl-auth-brand-copy h1 em { color: var(--csl-secondary); font-style: normal; }
.csl-auth-brand-copy p { max-width: 620px; margin: 0; color: rgba(255,255,255,.68); font-size: 15px; line-height: 1.75; }
.csl-auth-feature-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 38px; }
.csl-auth-feature-grid article { min-width: 0; padding: 19px 17px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.11); border-radius: 17px; }
.csl-auth-feature-grid svg { margin-bottom: 18px; color: var(--csl-secondary); font-size: 22px;width:40px; fill: var(--csl-secondary); }
.csl-auth-feature-grid strong, .csl-auth-feature-grid small { display: block; }
.csl-auth-feature-grid strong { font-size: 12px; }
.csl-auth-feature-grid small { margin-top: 6px; color: rgba(255,255,255,.55); font-size: 10px; line-height: 1.5; }
.csl-auth-brand-footer { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 35px; color: rgba(255,255,255,.5); font-size: 10px; }
.csl-auth-brand-footer a { color: rgba(255,255,255,.82); text-decoration: none; font-weight: 700; }

.csl-auth-form-panel { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 48px clamp(50px, 6vw, 110px); background: #fff; }
.csl-auth-form-panel::after { content: ""; position: absolute; right: 45px; bottom: 40px; width: 105px; height: 105px; border: 19px solid rgba(188,225,83,.18); border-radius: 50%; pointer-events: none; }
.csl-auth-tabs { align-self: flex-start; display: flex; align-items: center; gap: 4px; margin-bottom: 35px; padding: 5px; background: #eef3f5; border: 1px solid #e1eaee; border-radius: 999px; }
.csl-auth-tabs a { min-width: 91px; padding: 12px 19px; color: #6d7d87; border-radius: 999px; text-align: center; text-decoration: none; font-size: 12px; font-weight: 750; }
.csl-auth-tabs a.is-active { color: var(--csl-primary); background: #fff; box-shadow: 0 8px 18px rgba(22,75,104,.1); }
.csl-auth-heading { margin-bottom: 30px; }
.csl-auth-heading > span { display: block; margin-bottom: 12px; color: #17668f; font-size: 11px; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
.csl-auth-heading h2 { margin: 0 0 10px; color: var(--csl-text); font-size: clamp(38px, 4vw, 56px); line-height: 1; letter-spacing: -.045em; }
.csl-auth-heading p { max-width: 650px; margin: 0; color: var(--csl-muted); font-size: 14px; line-height: 1.65; }
.csl-password-form, .csl-register-form { display: grid; gap: 18px; }
.csl-password-form > label,
.csl-register-form label,
.csl-auth-form-grid label { position: relative; display: grid; gap: 8px; }
.csl-password-form label > span,
.csl-auth-form-grid label > span { color: var(--csl-text); font-size: 11px; font-weight: 800; }
.csl-password-form input,
.csl-register-form input,
.csl-sso-panel input {
    width: 100%;
    min-height: 58px;
    padding: 0 17px;
    color: var(--csl-text);
    background: #fff;
    border: 1px solid var(--csl-line);
    border-radius: 13px;
    outline: none;
    font: inherit;
    font-size: 13px;
    transition: .2s ease;
}
.csl-password-form input:focus,
.csl-register-form input:focus,
.csl-sso-panel input:focus { border-color: var(--csl-primary); box-shadow: 0 0 0 4px rgba(22,75,104,.08); }
.csl-auth-password-wrap input { padding-right: 54px; }
.csl-password-toggle { position: absolute; right: 14px; top: 37px; width: 30px; height: 30px; display: grid; place-items: center; padding: 0; color: #7e909c; background: transparent; border: 0; cursor: pointer; }
.csl-password-toggle svg { font-size: 20px; }
.csl-password-toggle.is-showing { color: var(--csl-primary); }
.csl-auth-password-wrap small { color: var(--csl-muted); font-size: 10px; }
.csl-auth-form-meta { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 1px; }
.csl-auth-form-meta label { display: flex; align-items: center; gap: 9px; color: var(--csl-muted); font-size: 12px; }
.csl-auth-form-meta input, .csl-auth-consent input { flex: 0 0 18px; width: 18px; min-height: 18px; margin: 0; accent-color: var(--csl-primary); }
.csl-auth-form-meta a { color: var(--csl-primary); text-decoration: none; font-size: 12px; font-weight: 800; }
.csl-auth-primary-button { min-height: 58px; display: flex !important; align-items: center; justify-content: center; gap: 18px; padding: 0 24px; color: #fff !important; background: linear-gradient(90deg, var(--csl-primary), #28769b); border: 0; border-radius: 13px; font: inherit; font-size: 14px; font-weight: 850; cursor: pointer; box-shadow: 0 16px 28px rgba(22,75,104,.17); transition: .2s ease;; border:0 !important; }
.csl-auth-primary-button:hover { transform: translateY(-1px); box-shadow: 0 20px 35px rgba(22,75,104,.21); }
.csl-auth-primary-button svg { font-size: 19px; width:20px !important;fill:var(--csl-secondary); }button.csl-password-toggle:hover, button.csl-password-toggle:focus{background-color:transparent;}
.csl-auth-divider { display: flex; align-items: center; gap: 15px; margin: 27px 0 19px; color: #8b9aa3; font-size: 11px; }
.csl-auth-divider::before, .csl-auth-divider::after { content: ""; flex: 1; height: 1px; background: #e7edef; }
.csl-sso-tile { width: 100%; min-height: 58px; display: flex; align-items: center; justify-content: center; gap: 13px; padding: 0 18px; color: var(--csl-text); background: #fff; border: 1px solid var(--csl-line); border-radius: 13px; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
button.csl-sso-tile:hover{background-color: #1a5371;}
.csl-key-icon { width: 36px; height: 36px; display: grid; place-items: center; color: var(--csl-primary); background: rgba(188,225,83,.24); border: 1px solid var(--csl-secondary); border-radius: 11px; }
.csl-key-icon svg { font-size: 18px; }
.csl-sso-panel { margin-top: 14px; padding: 17px; background: var(--csl-soft); border: 1px solid #e5edef; border-radius: 14px; }
.csl-sso-panel form { display: grid; gap: 10px; }
.csl-sso-panel label { color: var(--csl-text); font-size: 11px; font-weight: 800; }
.csl-sso-panel button { min-height: 48px; color: #fff; background: var(--csl-primary); border: 0; border-radius: 11px; font-weight: 800; cursor: pointer; }
.csl-auth-legal { margin: 22px 0 0; color: #87959d; text-align: center; font-size: 10px; }
.csl-auth-legal a, .csl-auth-consent a { color: var(--csl-primary); font-weight: 750; }
.csl-auth-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.csl-auth-form-full { grid-column: 1 / -1; }
.csl-auth-consent { display: flex !important; grid-template-columns: 18px 1fr; flex-direction: row; align-items: center; gap: 9px !important; color: var(--csl-muted); font-size: 11px; }
.csl-message { margin: 0 0 18px; padding: 13px 15px; border-radius: 10px; font-size: 12px; line-height: 1.5; }
.csl-message-error { color: #9c2525; background: #fff1f1; border: 1px solid #f4d3d3; }
.csl-message-success { color: #315d00; background: #eff8d7; border: 1px solid #dceba9; }
.csl-message a { color: inherit; font-weight: 800; }

@media (max-width: 1120px) {
    .csl-auth-shell { padding: 22px; }
    .csl-auth-frame { grid-template-columns: 390px minmax(0,1fr); min-height: calc(100vh - 44px); }
    .csl-auth-brand-panel { padding: 38px 35px 32px; }
    .csl-secure-pill { right: 34px; top: 40px; }
    .csl-auth-brand-copy { margin-top: 95px; }
    .csl-auth-brand-copy h1 { font-size: 50px; }
    .csl-auth-feature-grid { grid-template-columns: 1fr; }
    .csl-auth-feature-grid article { display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 8px 11px; }
    .csl-auth-feature-grid svg { grid-row: 1 / 3; margin: 0; }
    .csl-auth-feature-grid small { margin: 0; }
    .csl-auth-form-panel { padding: 45px 50px; }
}
@media (max-width: 820px) {
    .csl-auth-shell { padding: 0; }
    .csl-auth-frame { min-height: 100vh; grid-template-columns: 1fr; border-radius: 0; }
    .csl-auth-brand-panel { min-height: 360px; padding: 30px 28px; }
    .csl-auth-brand-copy { margin-top: 65px; }
    .csl-auth-brand-copy h1 { max-width: 500px; font-size: 46px; }
    .csl-auth-feature-grid, .csl-auth-brand-footer { display: none; }
    .csl-auth-form-panel { padding: 45px 28px 60px; }
}
@media (max-width: 560px) {
    .csl-auth-brand-panel { min-height: 300px; }
    .csl-secure-pill { display: none; }
    .csl-auth-brand-copy { margin-top: 52px; }
    .csl-auth-brand-copy > span { font-size: 10px; }
    .csl-auth-brand-copy h1 { font-size: 38px; }
    .csl-auth-brand-copy p { font-size: 13px; }
    .csl-auth-form-panel { padding: 35px 20px 50px; }
    .csl-auth-tabs { margin-bottom: 28px; }
    .csl-auth-heading h2 { font-size: 39px; }
    .csl-auth-form-grid { grid-template-columns: 1fr; }
    .csl-auth-form-full { grid-column: auto; }
    .csl-auth-form-meta { align-items: flex-start; flex-direction: column; gap: 11px; }
}