:root {
    --login-ink: #08265e;
    --login-blue: #1264ba;
    --login-muted: #526c91;
    --login-border: #8098b5;
    --login-card-radius: 30px;
    color-scheme: light;
    font-synthesis: none;
}
* { box-sizing: border-box; }
body.educare-login {
    margin: 0;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    position: relative;
    isolation: isolate;
    color: var(--login-ink);
    background: radial-gradient(ellipse at 14% 7%, #f7fbff 0, #eaf5ff 44%, #ddecfc 100%);
}
button, input { font: inherit; }
a { color: #0867b6; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
button, a, input { -webkit-tap-highlight-color: transparent; }
svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.login-symbols, .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.login-skip { position: fixed; top: -80px; left: 20px; z-index: 20; border-radius: 8px; padding: 12px 18px; background: #fff; color: var(--login-ink); }
.login-skip:focus { top: 16px; }
.login-backdrop { position: absolute; inset: 0 0 42px; z-index: -1; overflow: hidden; pointer-events: none; }
.login-ribbons { position: absolute; inset: 0; width: 100%; height: 100%; stroke: none; transform-origin: 80% 60%; animation: login-ribbon-settle 4.8s cubic-bezier(.2,.65,.3,1) both; }
.login-bubble { position: absolute; display: block; border-radius: 50%; }
.bubble-small { width: clamp(90px,9vw,140px); aspect-ratio: 1; top: 4.2%; left: 1.1%; background: linear-gradient(135deg,#aed8f8bd,#b9def899); }
.bubble-large { width: clamp(280px,33vw,510px); aspect-ratio: 1; top: 25%; left: 10.5%; background: linear-gradient(90deg,#ffffff80,#c1e1fa70); }
.bubble-small { animation: login-bubble-settle 4.4s ease-out both; }
.bubble-large { animation: login-bubble-settle 4.8s ease-out reverse both; }
.login-scene {
    width: 100%;
    max-width: 1680px;
    min-height: calc(100svh - 44px);
    flex: 1;
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(330px,1fr) minmax(440px,700px);
    column-gap: clamp(40px,5.4vw,88px);
    align-items: center;
    padding: clamp(36px,5.2vh,64px) clamp(32px,5vw,80px) clamp(28px,4vh,48px);
}
.login-story { align-self: stretch; min-width: 0; position: relative; display: flex; flex-direction: column; }
.login-brandmark { display: flex; align-items: center; gap: clamp(14px,1.7vw,25px); position: relative; z-index: 1; margin-top: clamp(6px,3.5vh,40px); animation: login-reveal .4s ease-out both; }
.brand-emblem { width: clamp(58px,5.5vw,84px); aspect-ratio: 46/55; flex: none; display: block; position: relative; overflow: hidden; mix-blend-mode: multiply; }
.brand-emblem img { position: absolute; inset: 0 auto auto 0; display: block; width: 500%; max-width: none; height: 100%; }
.brand-wordmark { min-width: 0; }
.brand-wordmark strong { display: block; font-size: clamp(30px,3.2vw,49px); font-weight: 760; letter-spacing: -1.8px; line-height: 1.15; color: #064d9d; white-space: nowrap; }
.brand-wordmark strong span { color: #f98b15; }
.brand-wordmark p { margin: 9px 0 0; color: #15549a; font-size: clamp(15px,1.5vw,23px); line-height: 1.35; letter-spacing: -.5px; white-space: nowrap; }
.login-illustration { position: absolute; left: -5%; bottom: -1.5%; width: 114%; max-width: 650px; pointer-events: none; animation: login-reveal .4s .08s ease-out both; }
.login-illustration img { display: block; width: 100%; height: auto; }
.login-card {
    position: relative;
    width: 100%;
    margin-top: clamp(24px,10vh,110px);
    padding: clamp(32px,4vw,56px) clamp(32px,3.7vw,56px) clamp(30px,3.5vw,48px);
    background: linear-gradient(145deg,#fff 58%,#fbfdff);
    border: 1px solid #ffffffde;
    border-radius: var(--login-card-radius);
    box-shadow: 0 26px 76px #1c65b728,0 3px 16px #125bac0a;
    animation: login-arrive .3s cubic-bezier(.2,.7,.3,1) both;
}
.login-card:focus-within { animation: none; }
.login-heading { margin-bottom: clamp(26px,3.4vh,40px); }
.login-heading h1 { margin: 0; font-size: clamp(35px,3.25vw,51px); line-height: 1.15; letter-spacing: -1.8px; font-weight: 760; color: var(--login-ink); }
.login-heading > p { margin: 10px 0 0; font-size: clamp(18px,1.75vw,27px); line-height: 1.4; letter-spacing: -.6px; color: var(--login-muted); }
.login-school { display: block; margin-top: 12px; font-size: 12px; color: #5c7190; line-height: 1.4; }
.login-school strong { margin-left: 4px; font-weight: 650; color: #345d8b; }
.login-form { display: grid; gap: clamp(16px,2.2vh,23px); }
.login-field { min-width: 0; }
.input-shell { display: flex; align-items: center; gap: 17px; min-height: clamp(58px,7vh,74px); padding: 0 18px; border: 1px solid var(--login-border); border-radius: 17px; background: #fff; transition: border-color .18s ease,box-shadow .18s ease; }
.input-shell > svg { flex: none; width: 28px; height: 28px; color: #1465b4; stroke-width: 1.9; }
.input-shell input { width: 100%; min-width: 0; padding: 15px 0; font-size: clamp(17px,1.55vw,23px); line-height: 1.35; color: #17385f; background: transparent; outline: none; border: 0; }
.input-shell input::placeholder { color: #617b9e; opacity: 1; }
.input-shell:focus-within { border-color: #0869ce; box-shadow: 0 0 0 4px #1269c217; }
.login-field:has(input[aria-invalid="true"]) .input-shell { border-color: #b03638; }
.login-field:has(input[aria-invalid="true"]) .input-shell:focus-within { box-shadow: 0 0 0 4px #b0363815; }
.login-field-error { margin: 8px 2px 0; color: #9c292b; font-size: 14px; line-height: 1.45; }
.login-field-error:not([hidden]) { animation: login-error-reveal .18s ease-out both; }
.login-field-error[hidden] { display: none; }
.input-shell input:autofill { box-shadow: 0 0 0 80px #fff inset; -webkit-text-fill-color: #17385f; }
.input-shell input:-webkit-autofill { box-shadow: 0 0 0 80px #fff inset; -webkit-text-fill-color: #17385f; }
.password-toggle { display: grid; place-items: center; flex: none; padding: 10px; margin-right: -9px; width: 44px; height: 44px; border: 0; border-radius: 9px; cursor: pointer; color: #5f7da5; background: transparent; }
.password-toggle:hover { color: #0e60af; background: #edf5ff; }
.password-toggle svg { width: 26px; height: 26px; }
.password-slash { display: none; }
.password-toggle[aria-pressed="true"] .password-slash { display: block; }
.login-recovery { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 4px 12px; min-height: 44px; font-size: clamp(12px,1.08vw,16px); line-height: 1.4; }
.remember-username { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--login-muted); cursor: pointer; }
.remember-username input { width: 21px; height: 21px; margin: 0; flex: none; accent-color: #1264ba; cursor: pointer; }
.login-recovery > a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }
.login-submit { display: flex; align-items: center; justify-content: center; gap: 15px; width: 100%; min-height: clamp(60px,7.2vh,78px); padding: 12px 20px; border: 0; border-radius: 17px; color: #092857; background: linear-gradient(105deg,#ff8619 5%,#ffc43c 100%); font-size: clamp(22px,2vw,30px); font-weight: 650; line-height: 1.3; cursor: pointer; box-shadow: 0 9px 20px #ed920b12; transition: transform .15s,box-shadow .15s,filter .15s; }
.login-submit svg { width: 30px; height: 30px; stroke-width: 1.8; }
.login-submit:hover:not(:disabled) { filter: saturate(1.08); transform: translateY(-2px); box-shadow: 0 12px 25px #df8b1d29; }
.login-submit:active:not(:disabled) { transform: translateY(0) scale(.99); box-shadow: 0 4px 12px #df8b1d1c; }
.login-submit:disabled { opacity: .75; cursor: wait; transform: none; }
.login-submit::before { content: ""; display: none; flex: none; width: 24px; height: 24px; border: 3px solid #09285733; border-top-color: currentColor; border-radius: 50%; }
.login-submit[aria-busy="true"]::before { display: block; animation: login-spin .75s linear infinite; }
.login-submit[aria-busy="true"] > svg { display: none; }
.login-assurance { display: flex; align-items: center; gap: 20px; margin-top: clamp(25px,4.6vh,46px); color: #526e94; }
.login-assurance > svg { flex: none; width: 42px; height: 46px; stroke-width: 1.8; color: #1264ba; }
.login-assurance p { margin: 0; font-size: clamp(14px,1.32vw,20px); line-height: 1.45; letter-spacing: -.3px; }
.login-errors { margin: 0 0 22px; border: 1px solid #d3a0a0; border-radius: 12px; padding: 13px 16px; color: #9c292b; background: #fff4f3; font-size: 14px; line-height: 1.5; animation: login-error-reveal .18s ease-out both; }
.login-errors ul { margin: 0; padding-left: 18px; }
.login-captcha { min-width: 0; max-width: 100%; overflow-x: auto; }
.login-footer { position: relative; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 4px 25px; min-height: 44px; padding: 11px 18px; font-size: 11px; line-height: 1.5; text-align: center; color: #426080; background: #edf6fe; border-top: 1px solid #d3e5f5; }
.login-footer strong { font-weight: 650; color: #224f7c; }
button:focus-visible,a:focus-visible,input[type="checkbox"]:focus-visible { outline: 3px solid #1264ba; outline-offset: 4px; }
@keyframes login-arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes login-reveal { from { opacity: 0; } to { opacity: 1; } }
@keyframes login-ribbon-settle { from { transform: translate(10px,6px) scale(1.015); } to { transform: translate(0,0) scale(1); } }
@keyframes login-bubble-settle { from { transform: translateY(8px); } to { transform: translateY(0); } }
@keyframes login-error-reveal { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: translateY(0); } }
@keyframes login-spin { to { transform: rotate(360deg); } }
@media (min-width: 901px) and (max-height: 820px) {
    .login-scene { padding-block: 27px; column-gap: 4.4vw; grid-template-columns: minmax(310px,1fr) minmax(420px,570px); }
    .login-card { margin-top: 14px; padding: 30px 35px; }
    .login-heading { margin-bottom: 24px; }
    .login-heading h1 { font-size: 39px; }
    .login-heading > p { font-size: 21px; margin-top: 8px; }
    .login-school { margin-top: 9px; }
    .login-form { gap: 16px; }
    .input-shell { min-height: 57px; }
    .input-shell input { font-size: 18px; padding-block: 13px; }
    .login-submit { min-height: 59px; font-size: 24px; }
    .login-assurance { margin-top: 26px; gap: 15px; }
    .login-assurance > svg { width: 35px; height: 39px; }
    .login-assurance p { font-size: 16px; }
    .login-brandmark { margin-top: 22px; }
}
@media (min-width: 901px) and (max-width: 1150px) {
    .login-scene { padding-inline: 30px; grid-template-columns: minmax(270px,1fr) minmax(410px,1.1fr); gap: 30px; }
    .brand-wordmark strong { font-size: 32px; letter-spacing: -1.2px; }
    .brand-wordmark p { font-size: 15px; }
    .brand-emblem { width: 58px; }
    .login-brandmark { gap: 12px; }
    .login-card { padding-inline: 28px; }
    .login-illustration { width: 124%; left: -12%; bottom: 4%; }
    .login-recovery { font-size: 12px; }
}
@media (max-width: 900px) {
    .login-backdrop { bottom: 44px; }
    .login-ribbons { width: 180%; left: -40%; opacity: .72; }
    .bubble-small { top: 2%; left: -5%; }
    .bubble-large { top: 18%; left: -30%; }
    .login-scene { display: flex; flex-direction: column; justify-content: center; gap: 27px; padding: 25px 20px 32px; min-height: calc(100svh - 44px); }
    .login-story { align-self: auto; }
    .login-brandmark { margin: 0; gap: 13px; }
    .brand-emblem { width: 56px; }
    .brand-wordmark strong { font-size: 32px; letter-spacing: -1.15px; }
    .brand-wordmark p { font-size: 15px; margin-top: 5px; }
    .login-illustration { display: none; }
    .login-card { max-width: 500px; padding: 30px 28px; margin: 0; border-radius: 25px; box-shadow: 0 20px 60px #1b579b26; }
    .login-heading { margin-bottom: 25px; }
    .login-heading h1 { font-size: 35px; letter-spacing: -1.2px; }
    .login-heading > p { font-size: 19px; margin-top: 8px; }
    .login-school { font-size: 12px; margin-top: 10px; }
    .login-form { gap: 17px; }
    .input-shell { min-height: 58px; padding-inline: 14px; gap: 12px; border-radius: 13px; }
    .input-shell > svg { width: 25px; height: 25px; }
    .input-shell input { font-size: 17px; }
    .login-recovery { font-size: 13px; gap: 1px 9px; }
    .remember-username { gap: 8px; }
    .remember-username input { width: 20px; height: 20px; }
    .login-submit { min-height: 58px; font-size: 24px; border-radius: 13px; }
    .login-assurance { margin-top: 25px; gap: 13px; }
    .login-assurance > svg { width: 34px; height: 38px; }
    .login-assurance p { font-size: 15px; }
    .login-footer { font-size: 10px; gap: 3px 16px; }
}
@media (max-width: 380px) {
    .login-scene { padding-inline: 13px; gap: 22px; }
    .login-card { padding: 27px 21px; }
    .brand-wordmark strong { font-size: 29px; }
    .brand-wordmark p { font-size: 14px; }
    .brand-emblem { width: 51px; }
    .login-heading h1 { font-size: 31px; }
    .login-heading > p { font-size: 18px; }
    .login-recovery { font-size: 12px; }
    .login-assurance { gap: 10px; }
    .login-assurance p { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    *,*::before,*::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}