/* Sign-in composition follows the supplied pastel Futroo reference. */
html:has(.futroo-login-page) { min-height: 100%; }
.futroo-login-page {
    --auth-ink: #202153;
    --auth-muted: #777b9d;
    --auth-blue: #3c58ff;
    box-sizing: border-box;
    display: grid;
    place-items: center;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    padding: 32px 24px;
    color: var(--auth-ink);
    background: #b3c7ff url('../img/auth/login-background-v1.webp') center / cover no-repeat;
    font-family: Cairo, Rubik, Tahoma, sans-serif;
    -webkit-font-smoothing: antialiased;
}
.futroo-login-page *, .futroo-login-page *::before, .futroo-login-page *::after { box-sizing: border-box; }
.futroo-login-page button, .futroo-login-page input, .futroo-login-page select { font: inherit; }
.auth-card {
    display: grid;
    grid-template-columns: 53.5% 46.5%;
    direction: ltr;
    width: min(1124px, 100%);
    min-height: 698px;
    border: 2px solid rgb(255 255 255 / 90%);
    border-radius: 38px;
    background: rgb(255 255 255 / 94%);
    box-shadow: 0 25px 65px rgb(68 73 169 / 14%);
}
.auth-art-panel { position: relative; isolation: isolate; min-width: 0; overflow: hidden; border-radius: 36px; background: #dce5ff; }
.auth-illustration { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.auth-brand-copy { position: relative; padding: 42px 36px 0; text-align: center; }
.auth-logo { display: block; width: 250px; max-width: 100%; height: auto; margin: 0 auto; }
.auth-brand-copy h2 { margin: 8px 0 7px; font-size: 24px; font-weight: 800; line-height: 1.5; }
.auth-brand-copy p { max-width: 290px; margin: 0 auto; color: var(--auth-muted); font-size: 13px; font-weight: 600; line-height: 1.6; }
.auth-form-panel { min-width: 0; padding: 46px 46px 42px; text-align: start; }
.auth-language-form { width: 180px; max-width: 100%; margin: 0 0 29px; margin-inline-start: auto; }
.auth-form-panel[dir='rtl'] .auth-language-form { margin-inline-start: 0; margin-inline-end: auto; }
.auth-language-form .futroo-dropdown:not(.teachers-filter):not(.challenge-directory-select) { min-height: 55px; border: 1px solid #e5e6f4; border-radius: 29px; background: #f9f9fd; box-shadow: inset 0 1px 3px rgb(39 37 89 / 3%); }
.auth-language-form .futroo-dropdown-trigger { min-height: 53px; gap: 16px; padding-inline: 19px; color: var(--auth-ink); font: 700 15px Cairo, Rubik, Tahoma, sans-serif; }
.auth-language-form .futroo-dropdown-trigger > span { text-align: center; }
.auth-language-form .futroo-dropdown-trigger > i:first-child { order: 2; color: #545878; font-size: 18px; }
.auth-language-form .futroo-dropdown-trigger > i:last-child { order: -1; }
.auth-language-form .futroo-dropdown-menu { inset-inline: 0; }
.auth-language-form select:not([data-futroo-dropdown-ready]) { width: 100%; min-height: 55px; padding: 10px 16px; border: 1px solid #e5e6f4; border-radius: 29px; color: var(--auth-ink); background: #f9f9fd; }
.auth-welcome h1 { display: flex; align-items: center; gap: 14px; margin: 0 0 9px; font-size: 35px; font-weight: 800; line-height: 1.55; }
.auth-wave { font-size: 34px; line-height: 1; }
.auth-welcome p { margin: 0; }
.auth-welcome-title { font-size: 20px; font-weight: 700; line-height: 1.6; }
.auth-welcome-description { color: var(--auth-muted); font-size: 19px; font-weight: 500; line-height: 1.65; }
.auth-login-form { display: grid; gap: 22px; margin-top: 26px; }
.auth-field { position: relative; display: flex; align-items: center; min-width: 0; height: 63px; border: 1px solid #e4e4f2; border-radius: 34px; background: #f8f8fc; box-shadow: inset 0 1px 3px rgb(39 37 89 / 3%); }
.auth-field:focus-within { border-color: #7a75ed; box-shadow: 0 0 0 3px rgb(91 96 246 / 12%); }
.auth-field.is-invalid { border-color: #cf4160; }
.auth-field-icon { position: absolute; inset-inline-start: 23px; color: var(--auth-muted); font-size: 21px; pointer-events: none; }
.auth-field input { width: 100%; height: 100%; min-width: 0; padding: 12px 55px; border: 0; outline: none; border-radius: inherit; color: var(--auth-ink); background: transparent; font-size: 16px; font-weight: 600; text-align: start; }
.auth-field input::placeholder { color: var(--auth-muted); opacity: 1; }
.auth-field input[type='email']:not(:placeholder-shown) { direction: ltr; text-align: end; }
.auth-form-panel[dir='ltr'] .auth-field input[type='email']:not(:placeholder-shown) { text-align: start; }
.auth-password-toggle { position: absolute; inset-inline-end: 12px; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; color: var(--auth-muted); background: transparent; font-size: 19px !important; cursor: pointer; }
.auth-password-toggle:hover { color: var(--auth-blue); background: #eeedff; }
.auth-remember { display: flex; align-items: center; gap: 12px; width: fit-content; min-height: 28px; margin-top: -2px; color: #727798; font-size: 17px; font-weight: 600; cursor: pointer; }
.auth-remember input { position: relative; appearance: none; flex: 0 0 22px; width: 22px; height: 22px; margin: 0; border: 2px solid #9b9fbf; border-radius: 5px; background: #fff; cursor: pointer; }
.auth-remember input:checked { border-color: #6553f6; background: #6553f6; }
.auth-remember input:checked::after { content: ''; position: absolute; top: 2px; left: 6px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.auth-submit { position: relative; display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 65px; padding: 11px 55px; border: 1px solid #fff; border-radius: 35px; color: #fff; background: linear-gradient(105deg, #2683ff 0%, #4b45ff 48%, #a05fff 100%); box-shadow: 0 12px 23px rgb(76 86 248 / 23%), inset 0 2px 5px rgb(255 255 255 / 17%); font-size: 20px !important; font-weight: 700 !important; cursor: pointer; transition: box-shadow .18s, filter .18s; }
.auth-submit > i { position: absolute; inset-inline-end: 26px; font-size: 21px; }
.auth-submit:hover { filter: brightness(1.04); box-shadow: 0 14px 28px rgb(76 86 248 / 30%); }
.auth-form-footer { margin-top: 24px; padding-top: 17px; border-top: 1px solid #e5e5f6; text-align: center; }
.auth-form-footer a { color: #4056ff; font-size: 15px; font-weight: 700; text-decoration: none; }
.auth-form-footer a:hover { text-decoration: underline; }
.auth-errors { margin-top: 16px; padding: 10px 15px; border: 1px solid #f0c3ce; border-radius: 14px; color: #a82849; background: #fff1f4; font-size: 13px; }
.auth-errors p { margin: 0; }
.auth-otp-status { margin-top: 15px; padding: 9px 13px; border: 1px solid #bce9dd; border-radius: 12px; color: #087f66; background: #edf9f6; font-size: 13px; }
.auth-submit:disabled { cursor: not-allowed; opacity: .55; }
.auth-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.futroo-login-page :focus-visible { outline: 3px solid #4163e9; outline-offset: 4px; }
.auth-field input:focus-visible { outline: none; }

@media (min-width: 851px) and (max-height: 800px) {
    .futroo-login-page { padding-block: 24px; }
    .auth-card { min-height: 610px; width: min(1040px, 100%); }
    .auth-brand-copy { padding-top: 35px; }
    .auth-logo { width: 220px; }
    .auth-brand-copy h2 { margin-top: 8px; font-size: 22px; }
    .auth-form-panel { padding: 30px 38px; }
    .auth-language-form { margin-bottom: 19px; }
    .auth-welcome h1 { font-size: 30px; }
    .auth-welcome-title { font-size: 18px; }
    .auth-welcome-description { font-size: 16px; }
    .auth-login-form { gap: 17px; margin-top: 21px; }
    .auth-field { height: 56px; }
    .auth-submit { min-height: 58px; }
    .auth-form-footer { margin-top: 19px; padding-top: 13px; }
}
@media (max-width: 850px) {
    .futroo-login-page { background-image: url('../img/auth/login-background-960-v1.webp'); }
    .auth-card { grid-template-columns: minmax(0, 1fr); width: min(540px, 100%); min-height: 0; border-radius: 29px; }
    .auth-art-panel { display: none; }
    .auth-form-panel { padding: 30px 32px 35px; }
    .auth-language-form { margin-bottom: 23px; }
    .auth-welcome h1 { font-size: 30px; }
    .auth-welcome-title { font-size: 18px; }
    .auth-welcome-description { font-size: 16px; }
}
@media (max-width: 420px) {
    .futroo-login-page { padding: 20px 14px; }
    .auth-form-panel { padding: 24px 22px 29px; }
    .auth-language-form { width: 156px; }
    .auth-welcome h1 { gap: 9px; font-size: 27px; }
    .auth-wave { font-size: 28px; }
    .auth-welcome-title { font-size: 16px; }
    .auth-welcome-description { font-size: 14px; }
    .auth-field { height: 58px; }
    .auth-field input { font-size: 14px; }
    .auth-remember { font-size: 14px; }
    .auth-submit { min-height: 59px; font-size: 18px !important; }
}
@media (prefers-reduced-motion: reduce) { .auth-submit { transition: none; } }