/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.5.15,
* Autoprefixer: v10.5.0
* Browsers: last 4 version
*/

@font-face {
    font-family: "eKidz";
    src: url("./assets/ekids-webfont.ttf") format("truetype");
    font-style: normal;
    font-weight: 100 900;
    font-display: block;
}

.reset-email:focus-within,
.reset-field input:focus,
.reset-field input:focus-visible,
.confirmation-field input:focus,
.confirmation-field input:focus-visible,
.add-school-field input:focus,
.add-school-field input:focus-visible,
.add-school-field select:focus,
.add-school-field select:focus-visible,
.school-country select:focus,
.school-country select:focus-visible,
.school-search input:focus,
.school-search input:focus-visible,
.teacher-login-password input:focus,
.teacher-login-password input:focus-visible,
.login-field input:focus,
.login-field input:focus-visible,
.recovery-entry input:focus,
.recovery-entry input:focus-visible,
.code-entry input:focus,
.code-entry input:focus-visible {
    border-color: #dde4f0 !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.register-select-wrap select:focus,
.register-select-wrap select:focus-visible,
.register-field > input:focus,
.register-field > input:focus-visible,
.register-field .reset-input-wrap > input:focus,
.register-field .reset-input-wrap > input:focus-visible {
    border-color: #d9deea !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    outline: none !important;
}

:root {
    --font-ekidz: "eKidz", sans-serif;
    --navy: #071b55;
    --navy-soft: #182a62;
    --coral: #ff4a22;
    --red: #ff2424;
    --red2: #ef3f0b;
    --red3: #ff1f00;
    --cyan: #67cbed;
    --blue: #087cff;
    --ink-muted: #6f7890;
    --line: #e9e6e4;
    --canvas: #ffffff;
    --white: #ffffff;
    --auth-window-width: 420px;
    --shadow:
        0 22px 48px rgba(26, 32, 69, 0.11), 0 3px 10px rgba(26, 32, 69, 0.07);
    --font-44: clamp(34px, 3.06vw, 44px);
    --font-32: clamp(28px, 3.06vw, 32px);
    --font-28: clamp(22px, 1.94vw, 28px);
    --font-24: clamp(18px, 1.67vw, 24px);
    --font-20: clamp(18px, 1.39vw, 20px);
    --font-18: clamp(16px, 1.39vw, 18px);
    --font-16: clamp(14px, 1.11vw, 16px);
    --font-14: 14px;
    --font-12: 12px;

    --b-radius-round: 999px;
    --b-radius-28: 28px;
    --shadow-navy: 0 10px 22px rgba(7, 27, 85, 0.2);
    --shadow-navy-hover: 0 13px 26px rgba(7, 27, 85, 0.26);
    --btn-navy-hover: #10286f;
    --button-h: clamp(54px, 4vw, 64px);
    --button-w: min(100%, clamp(480px, 4vw, 570px));

    --input-h: clamp(48px, 4vw, 52px);

    --scanner-1: 24px;
    --scanner-2: 32px;
}

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-family: var(--font-ekidz) !important;
}

html,
body {
    min-height: 100dvh;
}

body {
    margin: 0;
    color: var(--navy);
    background: var(--canvas);
    font-family: var(--font-ekidz);
    -webkit-font-smoothing: antialiased;
}

h1 {
    font-size: var(--font-32);
}
h2 {
    font-size: var(--font-28);
}
h3 {
    font-size: var(--font-24);
}
h4 {
    font-size: var(--font-20);
}

button,
a {
    font: inherit;
}
.ekz-button {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: var(--button-h);
    border-radius: var(--b-radius-round);
    font-size: var(--font-20);
    border: none;
    position: relative;
    -webkit-box-shadow: 0 10px 22px rgba(7, 27, 85, 0.2);
    box-shadow: 0 10px 22px rgba(7, 27, 85, 0.2);
    -webkit-transition:
        background 180ms ease,
        -webkit-transform 180ms ease,
        -webkit-box-shadow 180ms ease;
    transition:
        background 180ms ease,
        -webkit-transform 180ms ease,
        -webkit-box-shadow 180ms ease;
    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        background 180ms ease;
    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        background 180ms ease,
        -webkit-transform 180ms ease,
        -webkit-box-shadow 180ms ease;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding-bottom: 2px;
}
.ekz-button:hover,
.home-registration a:hover {
    -webkit-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    transform: translateY(-2px);
    -webkit-box-shadow: var(--shadow-navy-hover);
    box-shadow: var(--shadow-navy-hover);
}

.btn-primary {
    background-color: var(--navy);
    color: var(--white);
}
.btn-primary:hover,
.home-registration a:hover {
    background-color: var(--btn-navy-hover);
}

.btn-secondary {
    background-color: var(--red2);
    color: var(--white);
}
.btn-secondary:hover {
    background-color: var(--coral);
}

.btn-outline {
    background-color: var(--white);
    border: 2px solid var(--navy);
}
.btn-outline:hover {
    border: 2px solid var(--btn-navy-hover);
    color: var(--btn-navy-hover);
}

.footer-legal,
.footer-legal a,
.privacy-note,
.privacy-note a,
.register-consents,
.register-consents a,
.register-login,
.register-login a {
    font-family: var(--font-ekidz) !important;
    font-style: normal;
}

button {
    color: inherit;
}

.page-shell {
    height: 100dvh;
    display: -ms-grid;
    display: grid;
    -ms-grid-rows: 74px minmax(0, 1fr) 54px;
    grid-template-rows: 74px minmax(0, 1fr) 54px;
    overflow: hidden;
}

.topbar {
    position: relative;
    z-index: 10;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 0 clamp(20px, 3vw, 52px);
    background: rgba(255, 255, 255, 0.88);
    border-bottom: 1px solid rgba(7, 27, 85, 0.08);
    backdrop-filter: blur(16px);
    display: flex;
    width: 100%;
    max-width: 100vw;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    gap: 24px;
}

.brand {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 12px;
    color: var(--navy);
    text-decoration: none;
}

.brand__mark {
    width: 52px;
    height: 52px;
    -webkit-filter: drop-shadow(0 5px 8px rgba(255, 36, 36, 0.18));
    filter: drop-shadow(0 5px 8px rgba(255, 36, 36, 0.18));
}

.logout {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 0 18px;
    border: 1.5px solid #dbe2f1;
    border-radius: 999px;
    color: var(--navy);
    background: #fff;
    font-size: 15px;
    cursor: pointer;
    -webkit-transition:
        border-color 180ms ease,
        -webkit-transform 180ms ease,
        -webkit-box-shadow 180ms ease;
    transition:
        border-color 180ms ease,
        -webkit-transform 180ms ease,
        -webkit-box-shadow 180ms ease;
    transition:
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
    transition:
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease,
        -webkit-transform 180ms ease,
        -webkit-box-shadow 180ms ease;
}

.logout svg {
    width: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.logout:hover {
    -webkit-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    transform: translateY(-2px);
    border-color: #b9c4dc;
    -webkit-box-shadow: 0 8px 20px rgba(7, 27, 85, 0.08);
    box-shadow: 0 8px 20px rgba(7, 27, 85, 0.08);
}

.main {
    position: relative;
    display: -ms-grid;
    display: grid;
    place-items: center;
    padding: 16px 24px;
    isolation: isolate;
    overflow-y: scroll;
}

.page-shell:not(.school-page):not(.add-school-page):not(.school-code-page):not(
        .teacher-login-page
    ):not(.school-select-page)
    .main {
    background-color: #fff;
    background-image: url("../images/assets/background-logged-out.svg");
    background-position-x: left;
    background-position-y: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.page-shell:not(.school-page):not(.add-school-page) .decor {
    display: none;
}

.school-main,
.add-school-main,
.teacher-login-page .login-main {
    overflow-y: scroll;
    background-color: rgb(0, 122, 255);
    background-image: url("../images/assets/background-logged-in.svg");
    background-position-x: left;
    background-position-y: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.school-main::before,
.add-school-main::before,
.school-main::after,
.add-school-main::after {
    content: none;
}

.school-page .background-ekidz,
.add-school-page .background-ekidz {
    display: none;
}

.school-page .decor,
.add-school-page .decor {
    display: none;
}

.background-ekidz {
    position: absolute;
    z-index: -1;
    bottom: 3%;
    left: -24px;
    width: 235px;
    height: 235px;
    -webkit-filter: drop-shadow(0 8px 18px rgba(0, 70, 145, 0.12));
    filter: drop-shadow(0 8px 18px rgba(0, 70, 145, 0.12));
}

.background-ekidz svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.ekidz-mark__top {
    fill: rgb(109, 207, 246);
}

.ekidz-mark__lower {
    fill: rgb(0, 133, 230);
}

.ekidz-mark__core {
    fill: var(--navy);
}

.ekidz-mark__dot {
    fill: #fff;
    -webkit-filter: drop-shadow(0 3px 6px rgba(7, 27, 85, 0.14));
    filter: drop-shadow(0 3px 6px rgba(7, 27, 85, 0.14));
}

.page-shell:not(.school-page):not(.add-school-page) .background-ekidz {
    display: none;
}

.school-page .intro h1,
.add-school-page .intro h1,
.school-code-page .intro h1,
.school-select-page .intro h1 {
    color: #fff;
}

.school-page .intro p,
.add-school-page .intro p {
    color: var(--navy);
}

.school-page .eyebrow,
.add-school-page .eyebrow {
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
}

.school-page .footer__dot,
.add-school-page .footer__dot {
    background: rgba(7, 27, 85, 0.48);
}

.switcher {
    position: relative;
    z-index: 2;
    width: min(100%, 780px);
}

.intro {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    text-align: center;
    gap: 12px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.eyebrow {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    min-height: 30px;
    padding: 0 13px;
    margin-bottom: 12px;
    color: #d8431f;
    background: #fff0e8;
    border-radius: 999px;
    font-size: 14px;
    letter-spacing: 0.01em;
}

.intro h1 {
    color: var(--navy);
    font-size: var(--font-32);

    margin: 0;
    text-align: center;
}

.intro p {
    margin: 0;
    font-size: var(--font-18);
}

.role-grid {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-grid-columns: minmax(0, 1fr) 24px minmax(0, 1fr);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.home-switcher {
    width: min(100%, 680px);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 32px;
}
.switch-user-page .home-switcher,
.switch-user-stud-page .home-switcher {
    gap: 44px;
}

.home-switcher .mascot {
    display: block;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    -webkit-filter: drop-shadow(0 10px 8px rgba(11, 28, 80, 0.08));
    filter: drop-shadow(0 10px 8px rgba(11, 28, 80, 0.08));
    width: auto;
    max-width: 100%;
}

.home-switcher .role-card__label {
    min-height: 44px;
    font-size: 22px;
}

.home-registration {
    display: -ms-grid;
    display: grid;
    justify-items: center;
    gap: 12px;
    text-align: center;
}

.home-registration p {
    margin: 0;
    color: var(--navy);
    font-size: 16px;
}

.home-registration a {
    display: -ms-grid;
    display: grid;
    width: min(100%, 320px);
    min-height: 48px;
    place-items: center;
    border-radius: 999px;
    color: #fff;
    background: var(--navy);
    -webkit-box-shadow: 0 10px 22px rgba(7, 27, 85, 0.2);
    box-shadow: 0 10px 22px rgba(7, 27, 85, 0.2);
    font-size: 16px;
    text-decoration: none;
    -webkit-transition:
        background 180ms ease,
        -webkit-transform 180ms ease,
        -webkit-box-shadow 180ms ease;
    transition:
        background 180ms ease,
        -webkit-transform 180ms ease,
        -webkit-box-shadow 180ms ease;
    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        background 180ms ease;
    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        background 180ms ease,
        -webkit-transform 180ms ease,
        -webkit-box-shadow 180ms ease;
    padding-bottom: 2px;
}

.home-registration a:focus-visible {
    outline: 4px solid rgba(8, 124, 255, 0.32);
    outline-offset: 4px;
}

.role-card {
    overflow: hidden;
    cursor: pointer;
    -webkit-transition:
        border-color 220ms ease,
        -webkit-transform 220ms ease,
        -webkit-box-shadow 220ms ease;
    transition:
        border-color 220ms ease,
        -webkit-transform 220ms ease,
        -webkit-box-shadow 220ms ease;
    transition:
        transform 220ms ease,
        box-shadow 220ms ease,
        border-color 220ms ease;
    transition:
        transform 220ms ease,
        box-shadow 220ms ease,
        border-color 220ms ease,
        -webkit-transform 220ms ease,
        -webkit-box-shadow 220ms ease;
}

.role-card::before {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0) 42%,
        rgba(103, 203, 237, 0.08)
    );
    content: "";
    opacity: 0;
    -webkit-transition: opacity 220ms ease;
    transition: opacity 220ms ease;
}

.role-card:hover {
    -webkit-transform: translateY(-8px);
    -ms-transform: translateY(-8px);
    transform: translateY(-8px);
    border-color: rgba(8, 124, 255, 0.18);
    -webkit-box-shadow:
        0 30px 60px rgba(26, 32, 69, 0.15),
        0 5px 14px rgba(26, 32, 69, 0.07);
    box-shadow:
        0 30px 60px rgba(26, 32, 69, 0.15),
        0 5px 14px rgba(26, 32, 69, 0.07);
}

.role-card:hover::before {
    opacity: 1;
}

.role-card:focus-visible,
.logout:focus-visible,
.brand:focus-visible {
    outline: 4px solid rgba(8, 124, 255, 0.32);
    outline-offset: 4px;
}

.role-card__art {
    position: relative;
    display: block;
    aspect-ratio: auto;
    height: 164px;
    place-items: center;
}

.mascot {
    width: min(100%, 255px);
    overflow: visible;
    -webkit-filter: drop-shadow(0 10px 8px rgba(11, 28, 80, 0.08));
    filter: drop-shadow(0 10px 8px rgba(11, 28, 80, 0.08));
    -webkit-transition: -webkit-transform 240ms ease;
    transition: -webkit-transform 240ms ease;
    transition: transform 240ms ease;
    transition:
        transform 240ms ease,
        -webkit-transform 240ms ease;
}

.role-card:hover .mascot {
    -webkit-transform: scale(1.035) rotate(-1deg);
    -ms-transform: scale(1.035) rotate(-1deg);
    transform: scale(1.035) rotate(-1deg);
}

.role-card__label {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    min-height: 52px;
    padding: 0 10px 0 14px;
    font-size: 24px;
    letter-spacing: -0.035em;
}

.role-card__label svg {
    width: 38px;
    height: 38px;
    padding: 9px;
    border-radius: 50%;
    fill: none;
    stroke: var(--navy);
    stroke-width: 2.3;
    stroke-linecap: round;
    stroke-linejoin: round;
    background: #f0f5ff;
}

.qr-badge {
    position: absolute;
    border-radius: var(--b-radius-round);
    background: #a9e6fa url(../images/assets/qr-code.svg) center / 34px 34px no-repeat;
    border: none;
}

.qr-badge svg {
    width: 34px;
    fill: none;
    stroke: var(--navy);
    stroke-width: 2.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.decor {
    position: absolute;
    z-index: -1;
    pointer-events: none;
}

.decor--coral {
    top: -220px;
    right: -120px;
    width: 520px;
    height: 520px;
    border-radius: 46% 54% 64% 36% / 48% 40% 60% 52%;
    background: #fff0e9;
    -webkit-transform: rotate(24deg);
    -ms-transform: rotate(24deg);
    transform: rotate(24deg);
}

.decor--blue {
    bottom: -240px;
    left: -170px;
    width: 500px;
    height: 500px;
    border-radius: 48%;
    background: #e4f7fd;
}

.decor--ring {
    bottom: -85px;
    left: 4vw;
    width: 230px;
    height: 230px;
    border: 64px solid rgba(103, 203, 237, 0.38);
    border-radius: 50%;
    background: transparent;
}

.footer {
    position: relative;
    z-index: 4;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 clamp(20px, 3vw, 52px);
    color: var(--navy);
    border-top: 1px solid rgba(7, 27, 85, 0.07);
    background: #fff;
    font-family: var(--font-ekidz);
    font-size: var(--font-14);
}

.footer__dot {
    width: 4px;
    height: 4px;
    margin: 0 9px;
    border-radius: 50%;
    background: rgba(7, 27, 85, 0.48);
}

.footer-legal {
    position: absolute;
    left: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 8px;
    color: var(--navy);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

.footer-legal a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.footer-legal a:hover {
    color: var(--blue);
}

.footer-legal a:focus-visible {
    outline: 3px solid rgba(8, 124, 255, 0.28);
    outline-offset: 3px;
    border-radius: 3px;
}

.toast {
    position: fixed;
    z-index: 20;
    left: 50%;
    bottom: 60px;
    max-width: calc(100vw - 32px);
    padding: 13px 19px;
    border-radius: 999px;
    color: #fff;
    background: var(--navy);
    -webkit-box-shadow: 0 12px 30px rgba(7, 27, 85, 0.22);
    box-shadow: 0 12px 30px rgba(7, 27, 85, 0.22);
    font-size: 14px;
    opacity: 0;
    pointer-events: none;
    -webkit-transform: translate(-50%, 18px);
    -ms-transform: translate(-50%, 18px);
    transform: translate(-50%, 18px);
    -webkit-transition:
        opacity 180ms ease,
        -webkit-transform 180ms ease;
    transition:
        opacity 180ms ease,
        -webkit-transform 180ms ease;
    transition:
        opacity 180ms ease,
        transform 180ms ease;
    transition:
        opacity 180ms ease,
        transform 180ms ease,
        -webkit-transform 180ms ease;
}

.toast.is-visible {
    opacity: 1;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}

.reset-main {
    padding-top: 24px;
    padding-bottom: 26px;
}

.reset-panel {
    position: relative;
    z-index: 2;
    width: min(100%, var(--auth-window-width));
}

.reset-intro p {
    max-width: 640px;
    margin-inline: auto;
}

.reset-form {
    padding: 20px 24px 16px;
    border: 1px solid rgba(7, 27, 85, 0.08);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.97);
    -webkit-box-shadow:
        0 14px 34px rgba(26, 32, 69, 0.08),
        0 2px 7px rgba(26, 32, 69, 0.04);
    box-shadow:
        0 14px 34px rgba(26, 32, 69, 0.08),
        0 2px 7px rgba(26, 32, 69, 0.04);
}

.reset-email {
    display: block;
    padding: 0;
    color: var(--navy);
    background: #fff;
    -webkit-transition:
        border-color 180ms ease,
        -webkit-box-shadow 180ms ease;
    transition:
        border-color 180ms ease,
        -webkit-box-shadow 180ms ease;
    transition:
        border-color 180ms ease,
        box-shadow 180ms ease;
    transition:
        border-color 180ms ease,
        box-shadow 180ms ease,
        -webkit-box-shadow 180ms ease;
}

.reset-email input {
    width: 100%;
    height: 56px;
    padding: 0 18px;
    border: 0;
    border-radius: inherit;
    color: var(--navy);
    background: transparent;
    font: 800 16px/1 var(--font-ekidz);
    outline: none;
}

.reset-email input::-webkit-input-placeholder {
    color: #a1a8b8;
}

.reset-email input::-moz-placeholder {
    color: #a1a8b8;
}

.reset-email input:-ms-input-placeholder {
    color: #a1a8b8;
}

.reset-email input::-ms-input-placeholder {
    color: #a1a8b8;
}

.reset-email input::placeholder {
    color: #a1a8b8;
}

.reset-email:focus-within {
    border-color: var(--blue);
    -webkit-box-shadow: 0 0 0 5px rgba(8, 124, 255, 0.09);
    box-shadow: 0 0 0 5px rgba(8, 124, 255, 0.09);
}

.reset-fields {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 17px;
}

.reset-field,
.confirmation-field {
    display: block;
    color: var(--navy);
    font-size: var(--font-20);
}

.reset-input-wrap {
    position: relative;
    display: block;
}

.reset-field input,
.confirmation-field input {
    width: 100%;
    height: 60px;
    padding: 0 54px 0 18px;
    border: 2px solid #dde4f0;
    border-radius: 17px;
    color: var(--navy);
    background: #fff;
    font: 800 16px/1 var(--font-ekidz);
    -webkit-transition:
        border-color 180ms ease,
        -webkit-box-shadow 180ms ease;
    transition:
        border-color 180ms ease,
        -webkit-box-shadow 180ms ease;
    transition:
        border-color 180ms ease,
        box-shadow 180ms ease;
    transition:
        border-color 180ms ease,
        box-shadow 180ms ease,
        -webkit-box-shadow 180ms ease;
}

.confirmation-field input {
    padding-right: 18px;
}

.reset-field input::-webkit-input-placeholder,
.confirmation-field input::-webkit-input-placeholder {
    color: #a1a8b8;
}

.reset-field input::-moz-placeholder,
.confirmation-field input::-moz-placeholder {
    color: #a1a8b8;
}

.reset-field input:-ms-input-placeholder,
.confirmation-field input:-ms-input-placeholder {
    color: #a1a8b8;
}

.reset-field input::-ms-input-placeholder,
.confirmation-field input::-ms-input-placeholder {
    color: #a1a8b8;
}

.reset-field input::placeholder,
.confirmation-field input::placeholder {
    color: #a1a8b8;
}

.reset-field input:focus,
.confirmation-field input:focus {
    border-color: var(--blue);
    -webkit-box-shadow: 0 0 0 5px rgba(8, 124, 255, 0.09);
    box-shadow: 0 0 0 5px rgba(8, 124, 255, 0.09);
    outline: none;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 9px;
    display: -ms-grid;
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 0;
    border-radius: 12px;
    color: var(--ink-muted);
    background: transparent;
    cursor: pointer;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.password-toggle:hover,
.password-toggle.is-visible {
    color: var(--red2);
    background: #fff2ed;
}

.password-toggle svg {
    width: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.reset-field .password-toggle,
.reset-field .password-toggle:hover,
.reset-field .password-toggle.is-visible {
    color: var(--navy);
    background: transparent;
}

.reset-field .password-toggle svg {
    width: 24px;
    stroke-width: 2.4;
}

.reset-field .password-toggle.is-visible .password-eye-slash {
    display: none;
}

.confirmation-row {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: minmax(0, 1fr) 14px auto;
    grid-template-columns: minmax(0, 1fr) auto;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: end;
    gap: 14px;
}

.resend-button {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 8px;
    height: var(--input-h);
    padding: 0 17px;
    border: 2px solid #dde4f0;
    border-radius: 17px;
    color: var(--navy);
    background: #fff;
    font-size: var(--font-16);
    cursor: pointer;
    -webkit-transition:
        border-color 180ms ease,
        background 180ms ease;
    transition:
        border-color 180ms ease,
        background 180ms ease;
}

.resend-button:hover {
    border-color: #c7d0e0;
    background: #f7f9fc;
}

.resend-button svg {
    width: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.reset-primary {
    border: 0;
    border-radius: var(--b-radius-round);
    color: var(--white);
    background: var(--navy);
    -webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    font-size: var(--font-24);
    cursor: pointer;
    -webkit-transition:
        -webkit-transform 180ms ease,
        -webkit-box-shadow 180ms ease;
    transition:
        -webkit-transform 180ms ease,
        -webkit-box-shadow 180ms ease;
    transition:
        transform 180ms ease,
        box-shadow 180ms ease;
    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        -webkit-transform 180ms ease,
        -webkit-box-shadow 180ms ease;
}

.reset-primary:hover {
    -webkit-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    transform: translateY(-2px);
    -webkit-box-shadow: var(--shadow-navy-hover);
    box-shadow: var(--shadow-navy-hover);
}

.password-toggle:focus-visible,
.resend-button:focus-visible,
.reset-primary:focus-visible,
.reset-field input:focus-visible,
.confirmation-field input:focus-visible {
    outline: 4px solid rgba(8, 124, 255, 0.32);
    outline-offset: 3px;
}

.reset-decor--coral {
    top: -250px;
    right: -140px;
    width: 520px;
    height: 520px;
    border-radius: 46% 54% 64% 36% / 48% 40% 60% 52%;
    background: #fff0e9;
    opacity: 0.58;
    -webkit-transform: rotate(24deg);
    -ms-transform: rotate(24deg);
    transform: rotate(24deg);
}

.reset-decor--blue {
    bottom: -300px;
    left: -190px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: #e4f7fd;
    opacity: 0.62;
}

.school-confirm-dialog,
.teacher-login-form,
.loose-data-dialog {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: min(92vw, 540px);
    padding: 34px 34px 30px;
    overflow: auto;
    border-radius: 1px solid rgba(7, 27, 85, 0.08);
    border-radius: 30px;
    color: var(--navy);
    background: #fff;
    -webkit-box-shadow: 0 28px 80px rgba(7, 27, 85, 0.22);
    box-shadow: 0 28px 80px rgba(7, 27, 85, 0.22);
    text-align: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 10px;
}

.school-confirm-dialog[open],
.loose-data-dialog[open] {
    -webkit-animation: scanner-in 180ms ease-out both;
    animation: scanner-in 180ms ease-out both;
}
dialog.school-confirm-dialog:not([open]),
dialog.loose-data-dialog:not([open]) {
    display: none;
}

.school-confirm-dialog::-ms-backdrop,
.loose-data-dialog::-ms-backdrop {
    background: rgba(7, 18, 48, 0.56);
    backdrop-filter: blur(4px);
}

.school-confirm-dialog::backdrop,
.loose-data-dialog::backdrop {
    background: rgba(7, 18, 48, 0.56);
    backdrop-filter: blur(4px);
}

.school-confirm-icon {
    display: -ms-grid;
    display: grid;
    place-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-radius: 20px;
    color: var(--navy);
    background: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.school-confirm-icon svg {
    width: 39px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.school-confirm-eyebrow {
    display: block;
    margin-bottom: 5px;
    color: #d8431f;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.school-confirm-dialog h2,
.loose-data-dialog h2 {
    margin: 0;
    font-size: var(--font-28);
}

.school-confirm-actions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 40px;
    margin-top: 24px;
}

.school-confirm-actions button {
    min-height: 50px;
    border-radius: 16px;
    cursor: pointer;
    -webkit-transition:
        background 180ms ease,
        -webkit-transform 180ms ease,
        -webkit-box-shadow 180ms ease;
    transition:
        background 180ms ease,
        -webkit-transform 180ms ease,
        -webkit-box-shadow 180ms ease;
    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        background 180ms ease;
    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        background 180ms ease,
        -webkit-transform 180ms ease,
        -webkit-box-shadow 180ms ease;
}

.school-confirm-actions button:hover {
    -webkit-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    transform: translateY(-2px);
}

.school-confirm-cancel {
    border: 1.5px solid #dbe2ee;
    color: var(--navy);
    background: #f7f9fc;
}

.school-confirm-cancel:hover {
    background: #eef2f8;
}

.school-confirm-accept {
    border: 0;
    color: #fff;
    background: var(--red2);
    -webkit-box-shadow: 0 8px 17px rgba(239, 63, 11, 0.18);
    box-shadow: 0 8px 17px rgba(239, 63, 11, 0.18);
}

.school-confirm-accept:hover {
    -webkit-box-shadow: 0 11px 22px rgba(239, 63, 11, 0.22);
    box-shadow: 0 11px 22px rgba(239, 63, 11, 0.22);
}

.school-confirm-actions button:focus-visible {
    outline: 4px solid rgba(8, 124, 255, 0.32);
    outline-offset: 3px;
}

.school-result--new {
    border-color: rgba(239, 63, 11, 0.35);
    background: #fffaf7;
}

.school-result--new .school-result__icon {
    color: #d83b12;
    background: #fff0e9;
}

.add-school-main {
    padding-top: 27px;
    padding-bottom: 32px;
}

.add-school-panel {
    position: relative;
    z-index: 2;
    width: min(100%, var(--auth-window-width));
    gap: 16px !important;
}

.add-school-form {
    position: relative;
    padding: 24px 26px 20px;
    border: 1px solid rgba(7, 27, 85, 0.08);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.97);
    -webkit-box-shadow:
        0 14px 34px rgba(26, 32, 69, 0.08),
        0 2px 7px rgba(26, 32, 69, 0.04);
    box-shadow:
        0 14px 34px rgba(26, 32, 69, 0.08),
        0 2px 7px rgba(26, 32, 69, 0.04);
}

.add-school-grid {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: minmax(0, 1fr) 14px minmax(0, 1fr);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 14px;
}

.add-school-field {
    display: block;
    color: var(--navy);
    font-size: 13px;
}

.add-school-field--wide {
    grid-column: 1 / -1;
}

.add-school-field > span:first-child {
    display: block;
    margin: 0;
}

.add-school-field input,
.add-school-field select {
    width: 100%;
    height: 54px;
    border: 2px solid #dde4f0;
    border-radius: 17px;
    color: var(--navy);
    background: #fff;
    font: 800 15px/1 var(--font-ekidz);
    -webkit-transition:
        border-color 180ms ease,
        -webkit-box-shadow 180ms ease;
    transition:
        border-color 180ms ease,
        -webkit-box-shadow 180ms ease;
    transition:
        border-color 180ms ease,
        box-shadow 180ms ease;
    transition:
        border-color 180ms ease,
        box-shadow 180ms ease,
        -webkit-box-shadow 180ms ease;
}

.add-school-field input {
    padding: 0 18px;
}

.add-school-field select {
    padding: 0 45px 0 17px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.add-school-field input::-webkit-input-placeholder {
    color: #a1a8b8;
}

.add-school-field input::-moz-placeholder {
    color: #a1a8b8;
}

.add-school-field input:-ms-input-placeholder {
    color: #a1a8b8;
}

.add-school-field input::-ms-input-placeholder {
    color: #a1a8b8;
}

.add-school-field input::placeholder {
    color: #a1a8b8;
}

.add-school-field select:invalid {
    color: #a1a8b8;
}

.add-school-field input:focus,
.add-school-field select:focus {
    border-color: var(--blue);
    -webkit-box-shadow: 0 0 0 5px rgba(8, 124, 255, 0.09);
    box-shadow: 0 0 0 5px rgba(8, 124, 255, 0.09);
    outline: none;
}

.add-school-field input:focus-visible,
.add-school-field select:focus-visible,
.add-school-primary:focus-visible {
    outline: 4px solid rgba(8, 124, 255, 0.32);
    outline-offset: 3px;
}

.add-school-primary {
    border: 0;
    border-radius: 17px;
    color: #fff;
    background: var(--navy);
    -webkit-box-shadow: var(--shadow-navy);
    box-shadow: var(--shadow-navy);
    font-size: var(--font--24);
    cursor: pointer;
    -webkit-transition:
        -webkit-transform 180ms ease,
        -webkit-box-shadow 180ms ease;
    transition:
        -webkit-transform 180ms ease,
        -webkit-box-shadow 180ms ease;
    transition:
        transform 180ms ease,
        box-shadow 180ms ease;
    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        -webkit-transform 180ms ease,
        -webkit-box-shadow 180ms ease;
}

.add-school-primary:hover {
    -webkit-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    transform: translateY(-2px);
    -webkit-box-shadow: 0 11px 22px rgba(239, 63, 11, 0.22);
    box-shadow: 0 11px 22px rgba(239, 63, 11, 0.22);
}

.add-school-decor--coral {
    top: auto;
    right: auto;
    bottom: -135px;
    left: -120px;
    width: 470px;
    height: 470px;
    border-radius: 50%;
    background: rgb(109, 207, 246);
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
}

.add-school-decor--blue {
    right: -190px;
    bottom: -330px;
    left: auto;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    background: rgb(0, 133, 230);
    opacity: 1;
}

.teacher-account {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 11px;
    font-size: var(--font-16);
    min-width: 0;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

.teacher-account__greeting {
    color: var(--navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.teacher-avatar {
    display: -ms-grid;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    overflow: hidden;
}

.teacher-avatar svg {
    width: 34px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.teacher-logout {
    color: var(--navy);
    text-decoration: none;
    text-wrap: nowrap;
}

.teacher-logout:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
    color: var(--btn-navy-hover);
}

.teacher-logout:focus-visible,
.school-country select:focus-visible,
.school-search input:focus-visible,
.school-result:focus-visible,
.school-add button:focus-visible {
    outline: 4px solid rgba(8, 124, 255, 0.32);
    outline-offset: 3px;
}

.school-panel {
    position: relative;
    z-index: 2;
    width: min(100%, 620px);
}

.school-intro {
    margin-bottom: 16px;
}

.school-country,
.school-search {
    display: block;
    color: var(--navy);
    font-size: 13px;
}

.school-country > span:first-child,
.school-search > span:first-child {
    display: block;
}

.select-wrap,
.search-wrap {
    position: relative;
    display: block;
}

.search-wrap:has(input:not(:placeholder-shown)) .search-icon {
    display: none;
}

.school-country select {
    padding: 0 45px 0 17px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.school-search input::-webkit-input-placeholder {
    color: #a6adbd;
}

.school-search input::-moz-placeholder {
    color: #a6adbd;
}

.school-search input:-ms-input-placeholder {
    color: #a6adbd;
}

.school-search input::-ms-input-placeholder {
    color: #a6adbd;
}

.school-country select:invalid,
.school-search input::placeholder {
    color: #a6adbd;
}

.select-wrap > svg {
    position: absolute;
    top: 50%;
    right: 16px;
    width: 19px;
    fill: none;
    stroke: var(--navy);
    stroke-width: 2.2;
    pointer-events: none;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.search-wrap > svg {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 16px;
    width: 21px;
    fill: none;
    stroke: var(--red2);
    stroke-width: 2;
    stroke-linecap: round;
    pointer-events: none;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.school-country select:focus,
.school-search input:focus {
    border-color: var(--blue);
    -webkit-box-shadow: 0 0 0 5px rgba(8, 124, 255, 0.09);
    box-shadow: 0 0 0 5px rgba(8, 124, 255, 0.09);
    outline: none;
}

.school-list:not(:has(.school-result)) {
    display: none;
}

.school-result {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 48px 13px minmax(0, 1fr) 13px 28px;
    grid-template-columns: 48px minmax(0, 1fr) 28px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 13px;
    min-height: 62px;
    padding: 8px 12px;
    color: var(--navy);
    background: #fff;
    text-align: left;
    cursor: pointer;
    -webkit-transition:
        border-color 180ms ease,
        background 180ms ease,
        -webkit-transform 180ms ease;
    transition:
        border-color 180ms ease,
        background 180ms ease,
        -webkit-transform 180ms ease;
    transition:
        border-color 180ms ease,
        background 180ms ease,
        transform 180ms ease;
    transition:
        border-color 180ms ease,
        background 180ms ease,
        transform 180ms ease,
        -webkit-transform 180ms ease;
}

.school-result:hover {
    border-color: #c7d0e0;
    background: #f8faff;
    -webkit-transform: translateX(3px);
    -ms-transform: translateX(3px);
    transform: translateX(3px);
}

.school-result.is-selected {
    border-color: var(--red2);
    background: #fff5f0;
}

.school-result__icon {
    display: -ms-grid;
    display: grid;
    width: 45px;
    height: 45px;
    place-items: center;
    border-radius: 14px;
    color: var(--navy);
    background: #eef4ff;
}

.school-result__copy {
    min-width: 0;
}

.school-result__copy strong,
.school-result__copy small {
    display: block;
}

.school-result__copy strong,
.teacher-choice__name {
    overflow: hidden;
    font-size: var(--font-18);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.school-result__copy small {
    margin-top: 4px;
    overflow: hidden;
    color: var(--ink-muted);
    font-family: var(--font-ekidz);
    font-size: var(--font-14);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.school-result__arrow,
.teacher-choice__arrow {
    width: 20px;
    height: 100%;
    background: #fff url(../images/assets/arrow-forward.svg) center / 20px 20px
        no-repeat;
}

.school-empty,
.teacher-empty {
    margin: 26px 0;
    color: var(--ink-muted);
    font-family: var(--font-ekidz);
    text-align: center;
}

.school-add {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: start;
    gap: 8px;
    color: var(--white);
    text-shadow: none;
    font-size: var(--font-16);
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.school-add button:hover {
    -webkit-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    transform: translateY(-2px);
    -webkit-box-shadow: 0 9px 18px rgba(239, 63, 11, 0.21);
    box-shadow: 0 9px 18px rgba(239, 63, 11, 0.21);
}

.school-decor--coral {
    top: auto;
    right: auto;
    bottom: -135px;
    left: -120px;
    width: 470px;
    height: 470px;
    border-radius: 50%;
    background: rgb(109, 207, 246);
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
}

.school-decor--blue {
    right: -190px;
    bottom: -330px;
    left: auto;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    background: rgb(0, 133, 230);
    opacity: 1;
}

.school-workspace-main {
    padding: 0;
}

.teacher-account-logout-button {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 9px;
    min-height: 42px;
    padding: 0 17px;
    border: 1.5px solid #dbe2f1;
    border-radius: 999px;
    color: var(--navy);
    background: #fff;
    -webkit-box-shadow: 0 7px 18px rgba(7, 27, 85, 0.08);
    box-shadow: 0 7px 18px rgba(7, 27, 85, 0.08);
    font-size: 15px;
    text-decoration: none;
    -webkit-transition:
        border-color 180ms ease,
        -webkit-transform 180ms ease,
        -webkit-box-shadow 180ms ease;
    transition:
        border-color 180ms ease,
        -webkit-transform 180ms ease,
        -webkit-box-shadow 180ms ease;
    transition:
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
    transition:
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease,
        -webkit-transform 180ms ease,
        -webkit-box-shadow 180ms ease;
}

.teacher-account-logout-button svg {
    width: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.teacher-account-logout-button:hover {
    border-color: rgba(0, 122, 255, 0.5);
    -webkit-box-shadow: 0 10px 22px rgba(7, 27, 85, 0.12);
    box-shadow: 0 10px 22px rgba(7, 27, 85, 0.12);
    -webkit-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    transform: translateY(-2px);
}

.teacher-account-logout-button:focus-visible,
.teacher-choice:focus-visible {
    outline: 4px solid rgba(255, 255, 255, 0.7);
    outline-offset: 3px;
}

.teacher-list-header-school {
    max-width: min(48vw, 420px);
    overflow: hidden;
    color: var(--navy);
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.teacher-list-main {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 28px 24px 32px;
}

.teacher-list-panel {
    display: -ms-grid;
    display: grid;
    -ms-grid-rows: auto 12px minmax(-webkit-min-content, auto);
    -ms-grid-rows: auto 12px minmax(min-content, auto);
    grid-template-rows: auto minmax(-webkit-min-content, auto);
    grid-template-rows: auto minmax(min-content, auto);
    gap: 12px;
    width: min(100%, 720px);
}

.teacher-list-school {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 8px;
    overflow: hidden;
    color: rgb(0, 122, 255);
    font-size: 14px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.teacher-list {
    display: -ms-grid;
    display: grid;
    -ms-flex-line-pack: start;
    align-content: start;
    min-height: 0;
    max-height: none;
    overflow-y: scroll;
    -ms-scroll-chaining: none;
    overscroll-behavior: contain;
    scrollbar-color: rgba(7, 27, 85, 0.34) transparent;
    scrollbar-width: thin;
    border-top: 1px solid var(--line);
}

.teacher-choice {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 38px 12px minmax(0, 1fr) 12px 22px;
    grid-template-columns: 38px minmax(0, 1fr) 22px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 12px;
    min-height: 54px;
    padding: 7px 12px;
    border: none;
    border-top: 1px solid #dfe5f0;
    background: #fff;
    cursor: pointer;
    -webkit-transition:
        border-color 180ms ease,
        -webkit-transform 180ms ease,
        -webkit-box-shadow 180ms ease;
    transition:
        border-color 180ms ease,
        -webkit-transform 180ms ease,
        -webkit-box-shadow 180ms ease;
    transition:
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
    transition:
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease,
        -webkit-transform 180ms ease,
        -webkit-box-shadow 180ms ease;
}
.teacher-choice img {
    height: 100%;
    width: 100%;
}

.teacher-choice__avatar {
    height: 100%;
    background: transparent url(../images/assets/teacher.svg) center no-repeat;
}
.teacher-choice__admin {
    background: transparent url(../images/assets/teacher-admin.svg) center no-repeat;
}

.teacher-choice__copy {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.teacher-choice__label {
    font-size: var(--font-14);
    padding: 5px 20px;
    border-radius: 20px;
}

.teacher-choice__label-invited {
    background-color: #e5e7ed;
}

.teacher-choice__label-pending {
    background-color: #ffd7d1;
}

.loose-data-dialog {
    width: min(92vw, 480px);
}
.teacher-login-dialog {
    width: min(92vw, 480px);
    padding: 0;
    overflow: visible;
    border: 1px solid rgba(7, 27, 85, 0.08);
    border-radius: 28px;
    color: var(--navy);
    background: #fff;
    -webkit-box-shadow: 0 28px 80px rgba(7, 27, 85, 0.24);
    box-shadow: 0 28px 80px rgba(7, 27, 85, 0.24);
}

.teacher-login-dialog[open] {
    -webkit-animation: scanner-in 360ms ease-out both;
    animation: scanner-in 360ms ease-out both;
    position: relative;
    background: transparent;
    display: -ms-grid;
    display: grid;
    justify-items: center;
    gap: 10px;
    align-content: center;
}

.teacher-login-dialog::-ms-backdrop {
    background: rgba(7, 18, 48, 0.7);
    backdrop-filter: blur(4px);
}

.teacher-login-dialog::backdrop {
    background: rgba(7, 18, 48, 0.7);
    backdrop-filter: blur(4px);
}

.teacher-login-form {
    padding: 25px 27px 23px;
}

.teacher-login-school {
    margin: 0 0 7px;
    color: rgb(0, 122, 255);
    font-size: 13px;
    text-align: center;
}

.teacher-login-form h2 {
    margin: 0 0 20px;
    font-size: 27px;
    line-height: 1.15;
    text-align: center;
}

.teacher-login-password {
    display: block;
}

.teacher-login-password input {
    width: 100%;
    height: var(--input-h);
    padding: 0 54px 0 20px;
    border: 1px solid #dde4f0;
    border-radius: var(--b-radius-round);
    color: var(--navy);
    background: #fff;
    font-size: var(--font-18);
    outline: none;
    -webkit-transition:
        border-color 180ms ease,
        -webkit-box-shadow 180ms ease;
    transition:
        border-color 180ms ease,
        -webkit-box-shadow 180ms ease;
    transition:
        border-color 180ms ease,
        box-shadow 180ms ease;
    transition:
        border-color 180ms ease,
        box-shadow 180ms ease,
        -webkit-box-shadow 180ms ease;
}

.teacher-login-password input::-webkit-input-placeholder {
    color: #a6adbd;
}

.teacher-login-password input::-moz-placeholder {
    color: #a6adbd;
}

.teacher-login-password input:-ms-input-placeholder {
    color: #a6adbd;
}

.teacher-login-password input::-ms-input-placeholder {
    color: #a6adbd;
}

.teacher-login-password input::placeholder {
    color: #a6adbd;
}

.teacher-login-password input:focus {
    border-color: rgb(0, 122, 255);
    -webkit-box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.12);
    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.12);
}

.teacher-login-password .password-toggle,
.teacher-login-password .password-toggle:hover,
.teacher-login-password .password-toggle.is-visible {
    color: var(--navy);
    background: transparent;
}

.teacher-login-password .password-toggle svg {
    width: 24px;
    stroke-width: 2.4;
}

.teacher-login-password .password-toggle.is-visible .password-eye-slash {
    display: none;
}

.teacher-login-error {
    -ms-flex-item-align: start;
    align-self: flex-start;
}

.teacher-login-actions {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: minmax(0, 1fr) 11px minmax(0, 1fr);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
}

.teacher-login-actions button {
    min-height: var(--button-h);
    border-radius: 16px;
    cursor: pointer;
    -webkit-transition:
        background 180ms ease,
        -webkit-transform 180ms ease,
        -webkit-box-shadow 180ms ease;
    transition:
        background 180ms ease,
        -webkit-transform 180ms ease,
        -webkit-box-shadow 180ms ease;
    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        background 180ms ease;
    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        background 180ms ease,
        -webkit-transform 180ms ease,
        -webkit-box-shadow 180ms ease;
}

.teacher-login-actions button:hover {
    -webkit-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    transform: translateY(-2px);
}

.teacher-login-cancel {
    border: 1.5px solid #dbe2ee;
    color: var(--navy);
    background: #f7f9fc;
}

.teacher-login-submit {
    border: 0;
    color: #fff;
    background: var(--red2);
    -webkit-box-shadow: 0 8px 17px rgba(239, 63, 11, 0.18);
    box-shadow: 0 8px 17px rgba(239, 63, 11, 0.18);
}

.teacher-login-actions button:focus-visible,
.teacher-login-password input:focus-visible,
.teacher-login-password .password-toggle:focus-visible {
    outline: 4px solid rgba(8, 124, 255, 0.3);
    outline-offset: 3px;
}

.login-nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 6px;
    font-size: var(--font-14);
}

.login-nav a,
.language-button {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 13px;
    border: 0;
    border-radius: 999px;
    color: var(--navy);
    background: transparent;
    font-size: var(--font-14);
    text-decoration: none;
    cursor: pointer;
    -webkit-transition:
        background 180ms ease,
        -webkit-transform 180ms ease;
    transition:
        background 180ms ease,
        -webkit-transform 180ms ease;
    transition:
        transform 180ms ease,
        background 180ms ease;
    transition:
        transform 180ms ease,
        background 180ms ease,
        -webkit-transform 180ms ease;
}

.login-nav a:hover,
.language-select:hover {
    background: var(--navy);
    color: var(--white);
    -webkit-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    transform: translateY(-2px);
}

.language-select:hover .language-button {
    color: var(--white);
}

.login-nav .login-nav__active {
    color: #d83b12;
}
.login-nav .login-nav__active:hover {
    color: var(--white);
    background: var(--red2);
}

.language-button {
    gap: 4px;
}

.language-button svg {
    width: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.login-nav a:focus-visible,
.language-button:focus-visible,
.login-field input:focus-visible,
.login-primary:focus-visible,
.code-login-button:focus-visible,
.login-scan-button:focus-visible,
.forgot-link:focus-visible,
.partner-buttons button:focus-visible {
    outline: 4px solid rgba(8, 124, 255, 0.32);
    outline-offset: 3px;
}

.login-main {
    padding-top: 27px;
    padding-bottom: 32px;
}

.login-panel {
    position: relative;
    z-index: 2;
    width: min(100%, var(--auth-window-width));
}

.login-form {
    padding: 24px 26px 20px;
    border: 1px solid rgba(7, 27, 85, 0.08);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.97);
    -webkit-box-shadow:
        0 14px 34px rgba(26, 32, 69, 0.08),
        0 2px 7px rgba(26, 32, 69, 0.04);
    box-shadow:
        0 14px 34px rgba(26, 32, 69, 0.08),
        0 2px 7px rgba(26, 32, 69, 0.04);
}

.login-field {
    display: block;
    color: var(--navy);
    font-size: var(--font-20);
}

.login-field input {
    -webkit-transition:
        border-color 180ms ease,
        -webkit-box-shadow 180ms ease;
    transition:
        border-color 180ms ease,
        -webkit-box-shadow 180ms ease;
    transition:
        border-color 180ms ease,
        box-shadow 180ms ease;
    transition:
        border-color 180ms ease,
        box-shadow 180ms ease,
        -webkit-box-shadow 180ms ease;
}

.login-field input::-webkit-input-placeholder {
    color: #a6adbd;
}

.login-field input::-moz-placeholder {
    color: #a6adbd;
}

.login-field input:-ms-input-placeholder {
    color: #a6adbd;
}

.login-field input::-ms-input-placeholder {
    color: #a6adbd;
}

.login-field input::placeholder {
    color: #a6adbd;
}

.login-field .password-toggle,
.login-field .password-toggle:hover,
.login-field .password-toggle.is-visible {
    color: var(--navy);
    background: transparent;
}

.login-field .password-toggle svg {
    width: 24px;
    stroke-width: 2.4;
}

.login-field .password-toggle.is-visible .password-eye-slash {
    display: none;
}

.login-field input:focus {
    border-color: var(--blue);
    -webkit-box-shadow: 0 0 0 5px rgba(8, 124, 255, 0.09);
    box-shadow: 0 0 0 5px rgba(8, 124, 255, 0.09);
    outline: none;
}

.login-error,
.register-error,
.recovery-error,
.reset-error,
.add-school-error,
.teacher-login-error,
.code-login-error {
    margin: 0;
    color: #d9360b;
    padding: 0 12px;
    font-size: var(--font-14);
}

.login-primary {
    width: 100%;
    min-height: 56px;
    margin-top: 16px;
    border: 0;
    border-radius: 17px;
    color: #fff;
    background: var(--red2);
    -webkit-box-shadow: 0 8px 17px rgba(239, 63, 11, 0.18);
    box-shadow: 0 8px 17px rgba(239, 63, 11, 0.18);
    font-size: 16px;
    cursor: pointer;
    -webkit-transition:
        -webkit-transform 180ms ease,
        -webkit-box-shadow 180ms ease;
    transition:
        -webkit-transform 180ms ease,
        -webkit-box-shadow 180ms ease;
    transition:
        transform 180ms ease,
        box-shadow 180ms ease;
    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        -webkit-transform 180ms ease,
        -webkit-box-shadow 180ms ease;
}

.login-primary:hover {
    -webkit-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    transform: translateY(-2px);
    -webkit-box-shadow: 0 11px 22px rgba(239, 63, 11, 0.22);
    box-shadow: 0 11px 22px rgba(239, 63, 11, 0.22);
}

.code-login-row {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: minmax(0, 1fr) 10px 56px;
    grid-template-columns: minmax(0, 1fr) 56px;
    gap: 10px;
    margin-top: 12px;
}

.code-login-button {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 7px;
    min-height: 52px;
    border: 1.5px solid #ed6038;
    border-radius: 17px;
    color: #d83b12;
    background: #fff;
    font-size: 15px;
    text-decoration: none;
    -webkit-transition:
        background 180ms ease,
        -webkit-transform 180ms ease;
    transition:
        background 180ms ease,
        -webkit-transform 180ms ease;
    transition:
        background 180ms ease,
        transform 180ms ease;
    transition:
        background 180ms ease,
        transform 180ms ease,
        -webkit-transform 180ms ease;
}

.code-login-button:hover {
    background: #fff7f3;
    -webkit-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    transform: translateY(-2px);
}

.code-login-button svg {
    width: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.login-scan-button {
    display: -ms-grid;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 17px;
    color: var(--navy);
    background: #dff5fc;
    cursor: pointer;
    -webkit-transition:
        background 180ms ease,
        -webkit-transform 180ms ease;
    transition:
        background 180ms ease,
        -webkit-transform 180ms ease;
    transition:
        transform 180ms ease,
        background 180ms ease;
    transition:
        transform 180ms ease,
        background 180ms ease,
        -webkit-transform 180ms ease;
}

.login-scan-button:hover {
    background: #cceff9;
    -webkit-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    transform: translateY(-2px);
}

.login-scan-button svg {
    width: 31px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.forgot-link {
    text-underline-offset: 3px;
    text-align: center;
    margin-top: 8px;
    cursor: pointer;
}

.login-divider {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 12px;
    margin: 19px 0 13px;
    color: var(--ink-muted);
    font: 700 12px/1 var(--font-ekidz);
}

.login-divider::before,
.login-divider::after {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    height: 1px;
    background: #e1e5ed;
    content: "";
}

.partner-buttons {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: minmax(0, 1fr) 10px minmax(0, 1fr);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.partner-buttons button {
    min-height: 47px;
    border: 1.5px solid #dde4f0;
    border-radius: 15px;
    color: var(--navy);
    background: #fff;
    font-size: 14px;
    cursor: pointer;
    -webkit-transition:
        border-color 180ms ease,
        background 180ms ease,
        -webkit-transform 180ms ease;
    transition:
        border-color 180ms ease,
        background 180ms ease,
        -webkit-transform 180ms ease;
    transition:
        border-color 180ms ease,
        background 180ms ease,
        transform 180ms ease;
    transition:
        border-color 180ms ease,
        background 180ms ease,
        transform 180ms ease,
        -webkit-transform 180ms ease;
}

.partner-buttons button:hover {
    border-color: #c7d0e0;
    background: #f7f9fc;
    -webkit-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    transform: translateY(-2px);
}

.login-decor--coral {
    top: -255px;
    right: -150px;
    width: 510px;
    height: 510px;
    border-radius: 46% 54% 64% 36% / 48% 40% 60% 52%;
    background: #fff0e9;
    opacity: 0.58;
    -webkit-transform: rotate(24deg);
    -ms-transform: rotate(24deg);
    transform: rotate(24deg);
}

.login-decor--blue {
    bottom: -310px;
    left: -190px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: #e4f7fd;
    opacity: 0.62;
}

.auth-nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 10px;
}

.auth-nav a {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 16px;
    border-radius: 999px;
    font-size: 15px;
    text-decoration: none;
    -webkit-transition:
        background 180ms ease,
        -webkit-transform 180ms ease,
        -webkit-box-shadow 180ms ease;
    transition:
        background 180ms ease,
        -webkit-transform 180ms ease,
        -webkit-box-shadow 180ms ease;
    transition:
        transform 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease;
    transition:
        transform 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease,
        -webkit-transform 180ms ease,
        -webkit-box-shadow 180ms ease;
}

.auth-nav__login {
    color: var(--navy);
}

.auth-nav__login:hover {
    background: #f1f5fb;
}

.auth-nav__register {
    color: #fff;
    background: var(--navy);
    -webkit-box-shadow: 0 7px 16px rgba(7, 27, 85, 0.14);
    box-shadow: 0 7px 16px rgba(7, 27, 85, 0.14);
}

.auth-nav a:hover {
    -webkit-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    transform: translateY(-2px);
}

.auth-nav a:focus-visible {
    outline: 4px solid rgba(8, 124, 255, 0.32);
    outline-offset: 3px;
}

.recovery-main {
    padding-top: 54px;
    padding-bottom: 58px;
}

.recovery-panel {
    position: relative;
    z-index: 2;
    width: min(100%, var(--auth-window-width));
}

.recovery-form {
    padding: 24px 26px 20px;
    border: 1px solid rgba(7, 27, 85, 0.08);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.97);
    -webkit-box-shadow:
        0 14px 34px rgba(26, 32, 69, 0.08),
        0 2px 7px rgba(26, 32, 69, 0.04);
    box-shadow:
        0 14px 34px rgba(26, 32, 69, 0.08),
        0 2px 7px rgba(26, 32, 69, 0.04);
}

.recovery-entry {
    position: relative;
}

.recovery-entry input {
    width: 100%;
    height: 68px;
    padding: 0 22px;
    border: 2px solid #dde4f0;
    border-radius: 20px;
    color: var(--navy);
    background: #fff;
    font: 800 18px/1 var(--font-ekidz);
    -webkit-transition:
        border-color 180ms ease,
        -webkit-box-shadow 180ms ease;
    transition:
        border-color 180ms ease,
        -webkit-box-shadow 180ms ease;
    transition:
        border-color 180ms ease,
        box-shadow 180ms ease;
    transition:
        border-color 180ms ease,
        box-shadow 180ms ease,
        -webkit-box-shadow 180ms ease;
}

.recovery-entry input::-webkit-input-placeholder {
    color: #a1a8b8;
}

.recovery-entry input::-moz-placeholder {
    color: #a1a8b8;
}

.recovery-entry input:-ms-input-placeholder {
    color: #a1a8b8;
}

.recovery-entry input::-ms-input-placeholder {
    color: #a1a8b8;
}

.recovery-entry input::placeholder {
    color: #a1a8b8;
}

.recovery-entry input:focus {
    border-color: var(--blue);
    -webkit-box-shadow: 0 0 0 5px rgba(8, 124, 255, 0.09);
    box-shadow: 0 0 0 5px rgba(8, 124, 255, 0.09);
    outline: none;
}

.recovery-entry input[aria-invalid="true"] {
    border-color: var(--red2);
}

.recovery-primary:focus-visible,
.recovery-entry input:focus-visible {
    outline: 4px solid rgba(8, 124, 255, 0.32);
    outline-offset: 3px;
}

.recovery-primary {
    width: 100%;
    min-height: 58px;
    padding: 0 24px;
    border: 0;
    border-radius: 18px;
    color: #fff;
    background: var(--red2);
    -webkit-box-shadow: 0 8px 17px rgba(239, 63, 11, 0.18);
    box-shadow: 0 8px 17px rgba(239, 63, 11, 0.18);
    font-size: 16px;
    cursor: pointer;
    -webkit-transition:
        -webkit-transform 180ms ease,
        -webkit-box-shadow 180ms ease;
    transition:
        -webkit-transform 180ms ease,
        -webkit-box-shadow 180ms ease;
    transition:
        transform 180ms ease,
        box-shadow 180ms ease;
    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        -webkit-transform 180ms ease,
        -webkit-box-shadow 180ms ease;
}

.recovery-primary:hover {
    -webkit-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    transform: translateY(-2px);
    -webkit-box-shadow: 0 11px 22px rgba(239, 63, 11, 0.22);
    box-shadow: 0 11px 22px rgba(239, 63, 11, 0.22);
}

.recovery-decor--coral {
    top: -230px;
    right: -150px;
    width: 510px;
    height: 510px;
    border-radius: 46% 54% 64% 36% / 48% 40% 60% 52%;
    background: #fff0e9;
    opacity: 0.62;
    -webkit-transform: rotate(24deg);
    -ms-transform: rotate(24deg);
    transform: rotate(24deg);
}

.recovery-decor--blue {
    bottom: -280px;
    left: -180px;
    width: 490px;
    height: 490px;
    border-radius: 50%;
    background: #e4f7fd;
    opacity: 0.66;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        -webkit-transition-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

.code-main {
    padding-top: 52px;
    padding-bottom: 58px;
}

.back-button {
    position: absolute;
    z-index: 4;
    top: 30px;
    left: clamp(24px, 7vw, 132px);
    display: -ms-grid;
    display: grid;
    width: 50px;
    height: 50px;
    place-items: center;
    border: 1.5px solid #dbe2f1;
    border-radius: 50%;
    color: var(--navy);
    background: rgba(255, 255, 255, 0.94);
    -webkit-box-shadow: 0 8px 20px rgba(7, 27, 85, 0.07);
    box-shadow: 0 8px 20px rgba(7, 27, 85, 0.07);
    -webkit-transition:
        border-color 180ms ease,
        -webkit-transform 180ms ease,
        -webkit-box-shadow 180ms ease;
    transition:
        border-color 180ms ease,
        -webkit-transform 180ms ease,
        -webkit-box-shadow 180ms ease;
    transition:
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
    transition:
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease,
        -webkit-transform 180ms ease,
        -webkit-box-shadow 180ms ease;
    background-position-x: 9px;
}

.school-result[hidden],
.teacher-choice[hidden] {
    display: none;
}

.back-button svg {
    width: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.back-button:hover {
    -webkit-transform: translateX(-4px);
    -ms-transform: translateX(-4px);
    transform: translateX(-4px);
    border-color: #b9c4dc;
    -webkit-box-shadow: 0 10px 24px rgba(7, 27, 85, 0.11);
    box-shadow: 0 10px 24px rgba(7, 27, 85, 0.11);
}

.back-button:focus-visible,
.primary-button:focus-visible,
.scan-button:focus-visible,
.code-entry input:focus-visible,
.privacy-note a:focus-visible {
    outline: 4px solid rgba(8, 124, 255, 0.32);
    outline-offset: 4px;
}

.code-panel {
    position: relative;
    z-index: 2;
    width: min(100%, var(--auth-window-width));
}

.code-form {
    padding: 24px 26px 20px;
    border: 1px solid rgba(7, 27, 85, 0.08);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.97);
    -webkit-box-shadow:
        0 14px 34px rgba(26, 32, 69, 0.08),
        0 2px 7px rgba(26, 32, 69, 0.04);
    box-shadow:
        0 14px 34px rgba(26, 32, 69, 0.08),
        0 2px 7px rgba(26, 32, 69, 0.04);
}

.field-label {
    display: block;
    margin: 0 0 10px 5px;
    color: var(--navy);
    font-size: 15px;
}

.code-entry {
    position: relative;
}

.code-entry input {
    width: 100%;
    height: 70px;
    padding: 0 24px;
    border: 2px solid #dde4f0;
    border-radius: 20px;
    color: var(--navy);
    background: #fff;
    -webkit-transition:
        border-color 180ms ease,
        -webkit-box-shadow 180ms ease;
    transition:
        border-color 180ms ease,
        -webkit-box-shadow 180ms ease;
    transition:
        border-color 180ms ease,
        box-shadow 180ms ease;
    transition:
        border-color 180ms ease,
        box-shadow 180ms ease,
        -webkit-box-shadow 180ms ease;
}

.code-entry input:focus {
    border-color: var(--blue);
    -webkit-box-shadow: 0 0 0 5px rgba(8, 124, 255, 0.09);
    box-shadow: 0 0 0 5px rgba(8, 124, 255, 0.09);
    outline: none;
}

.stay-signed-in {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 11px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin: 15px 0 0 4px;
    color: var(--navy);
    font-size: 15px;
    cursor: pointer;
}

.stay-signed-in input {
    position: relative;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 23px;
    height: 23px;
    margin: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 3.5px solid var(--navy);
    border-radius: 3px 1px 3px 2px;
    background: #fff;
    cursor: pointer;
    -webkit-transform: rotate(-2deg);
    -ms-transform: rotate(-2deg);
    transform: rotate(-2deg);
}

.stay-signed-in input:checked::after {
    position: absolute;
    top: -7px;
    left: 7px;
    width: 8px;
    height: 18px;
    border: solid var(--navy);
    border-width: 0 4.5px 4.5px 0;
    content: "";
    -webkit-transform: rotate(42deg);
    -ms-transform: rotate(42deg);
    transform: rotate(42deg);
}

.stay-signed-in input:focus-visible {
    outline: 4px solid rgba(8, 124, 255, 0.3);
    outline-offset: 3px;
}

.code-actions {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: minmax(0, 1fr) 14px 70px;
    grid-template-columns: minmax(0, 1fr) 70px;
    gap: 14px;
    margin-top: 16px;
}

.primary-button,
.scan-button {
    border: 0;
    cursor: pointer;
    -webkit-transition:
        -webkit-transform 180ms ease,
        -webkit-box-shadow 180ms ease;
    transition:
        -webkit-transform 180ms ease,
        -webkit-box-shadow 180ms ease;
    transition:
        transform 180ms ease,
        box-shadow 180ms ease;
    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        -webkit-transform 180ms ease,
        -webkit-box-shadow 180ms ease;
}

.primary-button {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 10px;
    min-height: 62px;
    padding: 0 28px;
    border-radius: 20px;
    color: #fff;
    background: var(--red2);
    -webkit-box-shadow: 0 8px 17px rgba(239, 63, 11, 0.18);
    box-shadow: 0 8px 17px rgba(239, 63, 11, 0.18);
    font-size: 18px;
}

.primary-button svg {
    width: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.scan-button {
    display: -ms-grid;
    display: grid;
    min-height: 62px;
    place-items: center;
    border-radius: 20px;
    color: var(--navy);

    background: rgba(171, 228, 251, 1);
    -webkit-box-shadow: 0 6px 14px rgba(54, 172, 218, 0.12);
    box-shadow: 0 6px 14px rgba(54, 172, 218, 0.12);
}

.scan-button svg {
    width: 36px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    position: absolute;
    left: 20px;
}

.primary-button:hover,
.scan-button:hover {
    -webkit-transform: translateY(-3px);
    -ms-transform: translateY(-3px);
    transform: translateY(-3px);
}

.primary-button:hover {
    -webkit-box-shadow: 0 11px 22px rgba(239, 63, 11, 0.22);
    box-shadow: 0 11px 22px rgba(239, 63, 11, 0.22);
}

.privacy-note {
    margin: 8px 0 0;
    color: var(--navy);
    font-family: var(--font-ekidz);
    font-size: var(--font-14);
    text-align: center;
}

.privacy-note a {
    color: var(--navy);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
}

.code-decor--coral {
    top: -260px;
    right: -80px;
    width: 550px;
    height: 550px;
    opacity: 0.66;
}

.code-decor--blue {
    bottom: -300px;
    left: -200px;
    width: 520px;
    height: 520px;
    opacity: 0.68;
}

.code-decor--dots {
    right: 8vw;
    bottom: 10%;
    width: 86px;
    height: 86px;
    opacity: 0.16;
    background-image: radial-gradient(
        circle,
        var(--coral) 3px,
        transparent 3.5px
    );
    background-size: 17px 17px;
}

.scanner-dialog {
    width: min(92vw, 640px);
    max-height: 92vh;
    padding: 0;
    overflow: hidden;
    color: var(--navy);
}

.scanner-dialog[open] {
    -webkit-animation: scanner-in 180ms ease-out both;
    animation: scanner-in 180ms ease-out both;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 20px;
    padding: 20px 25px;
}

.scanner-dialog::-ms-backdrop {
    background: rgba(7, 18, 48, 0.56);
    backdrop-filter: blur(4px);
}

.scanner-dialog::backdrop {
    background: rgba(7, 18, 48, 0.56);
    backdrop-filter: blur(4px);
}

.scanner-dialog__header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.scanner-dialog__eyebrow {
    display: none;
    margin-bottom: 4px;
    color: #d8431f;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.scanner-dialog h2 {
    margin: 0;
}

.scanner-close {
    display: -ms-grid;
    display: grid;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid #e0e5ef;
    border-radius: 50%;
    color: var(--navy);
    background: #f8f9fc;
    cursor: pointer;
    -webkit-transition:
        background 180ms ease,
        -webkit-transform 180ms ease;
    transition:
        background 180ms ease,
        -webkit-transform 180ms ease;
    transition:
        transform 180ms ease,
        background 180ms ease;
    transition:
        transform 180ms ease,
        background 180ms ease,
        -webkit-transform 180ms ease;
}

.scanner-close:hover {
    background: #eef2f9;
    -webkit-transform: rotate(4deg);
    -ms-transform: rotate(4deg);
    transform: rotate(4deg);
}

.scanner-close:focus-visible {
    outline: none;
    outline-offset: 3px;
}

.scanner-close svg {
    width: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
}

.scanner-view {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 28px;
    background:
        radial-gradient(
            circle at 53% 44%,
            rgba(60, 64, 72, 0.38),
            transparent 35%
        ),
        linear-gradient(145deg, #1d1f24, #08090b 72%);
    -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.scanner-view::after {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle,
        transparent 31%,
        rgba(0, 0, 0, 0.35) 78%
    );
    content: "";
}

.scanner-view__hint {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    color: rgba(255, 255, 255, 0.1);
    font-size: 70px;
    letter-spacing: -0.08em;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.scanner-corner {
    position: absolute;
    z-index: 2;
    width: 40px;
    height: 40px;
    border-color: #fff;
    border-style: solid;
    -webkit-filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.22));
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.22));
}

.scanner-corner--tl {
    top: 38px;
    left: 52px;
    border-width: 7px 0 0 7px;
    border-radius: 5px 0 0;
}

.scanner-corner--tr {
    top: 38px;
    right: 52px;
    border-width: 7px 7px 0 0;
    border-radius: 0 5px 0 0;
}

.scanner-corner--bl {
    bottom: 38px;
    left: 52px;
    border-width: 0 0 7px 7px;
    border-radius: 0 0 0 5px;
}

.scanner-corner--br {
    right: 52px;
    bottom: 38px;
    border-width: 0 7px 7px 0;
    border-radius: 0 0 5px;
}

.scanner-line {
    position: absolute;
    z-index: 3;
    top: 50%;
    right: 64px;
    left: 64px;
    height: 2px;
    border-radius: 999px;
    background: var(--red2);
    -webkit-box-shadow: 0 0 12px rgba(239, 63, 11, 0.85);
    box-shadow: 0 0 12px rgba(239, 63, 11, 0.85);
    -webkit-animation: scan-line 2.4s ease-in-out infinite;
    animation: scan-line 2.4s ease-in-out infinite;
}

.scanner-instruction {
    margin: 0;

    color: var(--ink-muted);
    font-family: var(--font-ekidz);
    font-size: var(--font-16);

    text-align: center;
}

@-webkit-keyframes scanner-in {
    from {
        opacity: 0;
        -webkit-transform: translateY(12px) scale(0.985);
        transform: translateY(12px) scale(0.985);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0) scale(1);
        transform: translateY(0) scale(1);
    }
}

@keyframes scanner-in {
    from {
        opacity: 0;
        -webkit-transform: translateY(12px) scale(0.985);
        transform: translateY(12px) scale(0.985);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0) scale(1);
        transform: translateY(0) scale(1);
    }
}

@-webkit-keyframes scan-line {
    0%,
    100% {
        -webkit-transform: translateY(-110px);
        transform: translateY(-110px);
    }
    50% {
        -webkit-transform: translateY(110px);
        transform: translateY(110px);
    }
}

@keyframes scan-line {
    0%,
    100% {
        -webkit-transform: translateY(-110px);
        transform: translateY(-110px);
    }
    50% {
        -webkit-transform: translateY(110px);
        transform: translateY(110px);
    }
}

.teacher-access__back-link {
    color: var(--navy);
    font-size: 16px;
    text-decoration: none;
}

.teacher-access__back-link:hover {
    text-decoration: underline;
    text-underline-offset: 5px;
}

.teacher-access-main {
    padding-top: 34px;
    padding-bottom: 38px;
}

.teacher-access-panel {
    width: min(760px, 100%);
    text-align: center;
}

.teacher-access-panel h1 {
    margin: 9px 0 9px;
    color: var(--navy);
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.teacher-access-panel > p {
    max-width: 570px;
    margin: 0 auto 28px;
    color: var(--navy);
    font-size: 17px;
    line-height: 1.5;
}

.teacher-access-options {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: minmax(0, 1fr) 22px minmax(0, 1fr);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.teacher-access-option {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    min-height: 210px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 8px;
    padding: 28px;
    border: 2px solid rgba(7, 27, 85, 0.11);
    border-radius: 30px;
    color: var(--navy);
    background: rgba(255, 255, 255, 0.96);
    -webkit-box-shadow: var(--shadow);
    box-shadow: var(--shadow);
    text-decoration: none;
    -webkit-transition:
        border-color 180ms ease,
        -webkit-transform 180ms ease,
        -webkit-box-shadow 180ms ease;
    transition:
        border-color 180ms ease,
        -webkit-transform 180ms ease,
        -webkit-box-shadow 180ms ease;
    transition:
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
    transition:
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease,
        -webkit-transform 180ms ease,
        -webkit-box-shadow 180ms ease;
}

.teacher-access-option:hover {
    border-color: rgba(0, 122, 255, 0.4);
    -webkit-box-shadow: 0 24px 48px rgba(7, 27, 85, 0.14);
    box-shadow: 0 24px 48px rgba(7, 27, 85, 0.14);
    -webkit-transform: translateY(-4px);
    -ms-transform: translateY(-4px);
    transform: translateY(-4px);
}

.teacher-access-option:focus-visible {
    outline: 4px solid rgba(0, 122, 255, 0.3);
    outline-offset: 4px;
}

.teacher-access-option--register {
    border-color: rgba(239, 63, 11, 0.3);
}

.teacher-access-option--register:hover {
    border-color: var(--red2);
}

.teacher-access-option__icon {
    display: -ms-grid;
    display: grid;
    width: 62px;
    height: 62px;
    margin-bottom: 7px;
    place-items: center;
    border-radius: 50%;
    color: rgb(0, 122, 255);
    background: rgba(109, 207, 246, 0.24);
}

.teacher-access-option--register .teacher-access-option__icon {
    color: var(--red2);
    background: rgba(239, 63, 11, 0.1);
}

.teacher-access-option__icon svg {
    width: 32px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.teacher-access-option strong {
    font-size: 25px;
}

.teacher-access-option > span:last-child {
    color: var(--ink-muted);
    font-size: 14px;
}

.register-back,
.login-back,
.recovery-back {
    position: absolute;
    z-index: 3;
    top: 30px;
    left: clamp(24px, 7vw, 132px);
    display: -ms-grid;
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid rgba(7, 27, 85, 0.12);
    border-radius: 50%;
    color: var(--navy);
    background: #fff;
    -webkit-box-shadow: 0 8px 22px rgba(7, 27, 85, 0.08);
    box-shadow: 0 8px 22px rgba(7, 27, 85, 0.08);
    -webkit-transition:
        border-color 180ms ease,
        -webkit-transform 180ms ease;
    transition:
        border-color 180ms ease,
        -webkit-transform 180ms ease;
    transition:
        transform 180ms ease,
        border-color 180ms ease;
    transition:
        transform 180ms ease,
        border-color 180ms ease,
        -webkit-transform 180ms ease;
}

.register-back:hover,
.login-back:hover,
.recovery-back:hover {
    border-color: rgba(0, 122, 255, 0.5);
    -webkit-transform: translateX(-3px);
    -ms-transform: translateX(-3px);
    transform: translateX(-3px);
}

.register-back svg,
.login-back svg,
.recovery-back svg {
    width: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.register-layout {
    width: 100vw;
    z-index: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: min(var(--auth-window-width), 100%);
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;

    gap: 12px;
}

.login-page .login-primary {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: var(--button-h);
    margin: 0;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 0 30px;
    border: 0;
    border-radius: 60px;
    color: #fff;
    background: var(--red2);
    -webkit-box-shadow: 0 8px 17px rgba(239, 63, 11, 0.18);
    box-shadow: 0 8px 17px rgba(239, 63, 11, 0.18);
    font-family: var(--font-ekidz);
    font-size: var(--font-24);
    font-style: normal;

    text-align: center;
}

.login-page .login-primary:hover {
    background: var(--red2);
    -webkit-box-shadow: 0 10px 20px rgba(239, 63, 11, 0.22);
    box-shadow: 0 10px 20px rgba(239, 63, 11, 0.22);
}

.login-page .login-panel {
    width: min(100%, 620px);
}

.login-page .login-form,
.teacher-login-page .login-form {
    padding: 20px 25px;
    border: 1px solid rgba(7, 27, 85, 0.08);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.97);
    -webkit-box-shadow: 0 14px 34px rgba(26, 32, 69, 0.08);
    box-shadow: 0 14px 34px rgba(26, 32, 69, 0.08);
}

.login-page .login-field .reset-input-wrap {
    display: block;
    width: 100%;
}

body .login-page .login-field .reset-input-wrap input {
    padding-right: 58px;
}

.login-page .password-toggle {
    top: 50%;
    right: 17px;
    width: 24px;
    height: 24px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.login-page .forgot-link,
.teacher-login-page .forgot-link,
.teacher-login-dialog .forgot-link {
    color: #00114a;
    font-size: var(--font-14);
    text-decoration: underline;
}

.page-shell.login-page .login-panel,
.page-shell.teacher-login-page .login-panel,
.page-shell.register-page .register-layout,
.page-shell.code-page .code-panel,
.page-shell.school-code-page .code-panel,
.page-shell.recovery-page .recovery-panel,
.page-shell.reset-page .reset-panel,
.page-shell.confirmation-page .confirmation-panel,
.page-shell.add-school-page .add-school-panel {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 32px;
}

.page-shell.login-page .login-form,
.page-shell.teacher-login-page .login-form {
    width: min(100%, 540px);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: auto;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 12px;
    -ms-flex-line-pack: center;
    align-content: center;
}

.page-shell.login-page .login-panel,
.page-shell.teacher-login-page .login-panel {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 32px;
}

.page-shell.login-page .password-toggle,
.page-shell.teacher-login-page .password-toggle {
    right: 14px;
    background-size: 19px 19px;
}

.page-shell.register-page .register-form,
.page-shell.code-page .code-form,
.page-shell.school-code-page .code-form,
.page-shell.recovery-page .recovery-form,
.page-shell.reset-page .reset-form,
.page-shell.confirmation-page .registration-confirmation-form,
.page-shell.add-school-page .add-school-form,
.teacher-login-form {
    width: min(100%, 540px);
    max-width: none;
    height: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 24px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 12px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

/* Match the password-reset action to the current authentication button dimensions. */
.page-shell.recovery-page .recovery-form {
    padding: 20px;
}

.page-shell.recovery-page .recovery-primary {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: var(--button-h);

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;

    padding: 0 24px;
    border: 0;
    border-radius: 60px;
    color: #fff;
    background: var(--navy);

    -webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);

    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    font-size: 19px;
    line-height: 26px;
}

.language-select {
    position: relative;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 999px;
    padding: 0 13px;
    min-height: 40px;
}

.language-select .language-button {
    min-width: 43px;
    min-height: 32px;
    padding: 0 4px;
    gap: 7px;
    border-radius: 0;
    color: var(--navy);
    background: transparent;

    line-height: 1;
}

.language-select .language-button:hover {
    color: var(--white);
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
}

.language-select .language-button svg {
    width: 10px;
    height: 8px;
    stroke-width: 1.8;
    -webkit-transition: -webkit-transform 160ms ease;
    transition: -webkit-transform 160ms ease;
    transition: transform 160ms ease;
    transition:
        transform 160ms ease,
        -webkit-transform 160ms ease;
}

.language-select.is-open .language-button svg {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

.language-select__menu {
    position: absolute;
    z-index: 120;
    top: calc(100% + 8px);
    right: 0;
    width: auto;
    padding: 6px;
    border: 1px solid rgba(0, 17, 71, 0.1);
    border-radius: 14px;
    background: #fff;
    -webkit-box-shadow: 0 10px 28px rgba(0, 17, 71, 0.16);
    box-shadow: 0 10px 28px rgba(0, 17, 71, 0.16);
}

.language-select__menu[hidden] {
    display: none;
}

.language-select__menu button {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    min-height: 35px;
    padding: 0 11px;
    border: 0;
    border-radius: 9px;
    color: var(--navy);
    background: transparent;
    font: inherit;
    font-size: var(--font-14);
    text-align: left;
    cursor: pointer;
}

.language-select__menu button:hover,
.language-select__menu button:focus-visible,
.language-select__menu button[aria-selected="true"] {
    outline: none;
    background: #edf8ff;
}

.teacher-account .language-select,
.auth-nav .language-select,
.login-nav .language-select {
    margin-left: 2px;
}

.register-intro h1 {
    margin: 0;

    text-align: center;
    padding: 0 44px;
}

.register-intro p {
    margin: 0;
    color: var(--navy);
    font-size: 17px;
    line-height: 1.5;
}

.register-form {
    display: -ms-grid;
    display: grid;
    width: 100%;
    max-width: var(--auth-window-width);
    -ms-grid-column-align: stretch;
    justify-self: stretch;
    gap: 10px;
    padding: 18px 20px 16px;
    border: 1px solid rgba(7, 27, 85, 0.09);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.97);
    -webkit-box-shadow: var(--shadow);
    box-shadow: var(--shadow);
}

.register-name-row {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: minmax(0, 1fr) 12px minmax(0, 1fr);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.register-select-wrap {
    position: relative;
    display: block;
    width: 100%;
}

.register-select-wrap select {
    width: 100%;
    min-height: 47px;
    padding: 0 52px 0 16px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 2px solid #d9deea;
    border-radius: 999px;
    color: #a6adbd;
    background: #fff;
    font-size: 15px;
    outline: none;
    cursor: pointer;
    -webkit-transition:
        border-color 160ms ease,
        -webkit-box-shadow 160ms ease;
    transition:
        border-color 160ms ease,
        -webkit-box-shadow 160ms ease;
    transition:
        border-color 160ms ease,
        box-shadow 160ms ease;
    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        -webkit-box-shadow 160ms ease;
}

.register-select-wrap select:valid {
    color: var(--navy);
}

.register-select-wrap select:focus {
    border-color: rgb(0, 122, 255);
    -webkit-box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.12);
    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.12);
}

.register-select-wrap svg {
    position: absolute;
    top: 50%;
    right: 17px;
    width: 20px;
    fill: none;
    stroke: var(--navy);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.register-field {
    color: var(--navy);
}

.register-field > input,
.register-field .reset-input-wrap {
    width: 100%;
}

.register-field > input,
.register-field .reset-input-wrap > input {
    min-height: 47px;
    padding: 0 16px;
    border: 1.5px solid #d9deea;
    border-radius: 999px;
    color: var(--navy);
    background: #fff;
    font-size: 15px;
    outline: none;
    -webkit-transition:
        border-color 160ms ease,
        -webkit-box-shadow 160ms ease;
    transition:
        border-color 160ms ease,
        -webkit-box-shadow 160ms ease;
    transition:
        border-color 160ms ease,
        box-shadow 160ms ease;
    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        -webkit-box-shadow 160ms ease;
}

.register-field .reset-input-wrap > input {
    width: 100%;
    padding-right: 54px;
}

.register-field .password-toggle,
.register-field .password-toggle:hover,
.register-field .password-toggle.is-visible {
    color: var(--navy);
    background: transparent;
}

.register-field .password-toggle svg {
    width: 24px;
    stroke-width: 2.4;
}

.register-field .password-toggle.is-visible .password-eye-slash {
    display: none;
}

.register-field > input:focus,
.register-field .reset-input-wrap > input:focus {
    border-color: rgb(0, 122, 255);
    -webkit-box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.12);
    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.12);
}

.register-field input::-webkit-input-placeholder {
    color: #a6adbd;
}

.register-field input::-moz-placeholder {
    color: #a6adbd;
}

.register-field input:-ms-input-placeholder {
    color: #a6adbd;
}

.register-field input::-ms-input-placeholder {
    color: #a6adbd;
}

.register-field input::placeholder {
    color: #a6adbd;
}

.register-consents {
    display: -ms-grid;
    display: grid;
    gap: 12px;
    padding: 2px 2px 0;
}

.register-consents label {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 31px 11px 1fr;
    grid-template-columns: 31px 1fr;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 11px;
    color: var(--navy);
    cursor: pointer;
}

.register-consents input {
    position: relative;
    width: 27px;
    height: 28px;
    margin: 1px 0 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 4.5px solid var(--navy);
    border-radius: 2px 0 3px 1px;
    background: #fff;
    -webkit-box-shadow: 1.5px 1.5px 0 rgba(7, 27, 85, 0.24);
    box-shadow: 1.5px 1.5px 0 rgba(7, 27, 85, 0.24);
    cursor: pointer;
    -webkit-transform: rotate(-3deg) skew(-0.5deg);
    -ms-transform: rotate(-3deg) skew(-0.5deg);
    transform: rotate(-3deg) skew(-0.5deg);
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
}

.register-consents input:checked::after {
    position: absolute;
    top: -8px;
    left: 8px;
    width: 9px;
    height: 22px;
    border: solid var(--navy);
    border-width: 0 5.5px 5.5px 0;
    content: "";
    -webkit-filter: drop-shadow(1px 1px 0 rgba(7, 27, 85, 0.18));
    filter: drop-shadow(1px 1px 0 rgba(7, 27, 85, 0.18));
    -webkit-transform: rotate(42deg) skewY(-5deg);
    -ms-transform: rotate(42deg) skewY(-5deg);
    transform: rotate(42deg) skewY(-5deg);
}

.register-consents input:focus-visible {
    outline: 4px solid rgba(8, 124, 255, 0.3);
    outline-offset: 3px;
}

.register-consents a,
.register-login a {
    color: var(--navy);
    text-underline-offset: 3px;
}
.register-consents a:hover,
.register-login a:hover {
    color: var(--blue);
}

.register-submit {
    min-height: 48px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: var(--red2);
    -webkit-box-shadow: 0 9px 20px rgba(239, 63, 11, 0.22);
    box-shadow: 0 9px 20px rgba(239, 63, 11, 0.22);
    font-size: 16px;
    cursor: pointer;
    -webkit-transition:
        background 180ms ease,
        -webkit-transform 180ms ease,
        -webkit-box-shadow 180ms ease;
    transition:
        background 180ms ease,
        -webkit-transform 180ms ease,
        -webkit-box-shadow 180ms ease;
    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        background 180ms ease;
    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        background 180ms ease,
        -webkit-transform 180ms ease,
        -webkit-box-shadow 180ms ease;
}

.register-submit:hover {
    background: #db3510;
    -webkit-box-shadow: 0 12px 24px rgba(239, 63, 11, 0.3);
    box-shadow: 0 12px 24px rgba(239, 63, 11, 0.3);
    -webkit-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    transform: translateY(-2px);
}

.register-submit:focus-visible {
    outline: 4px solid rgba(239, 63, 11, 0.24);
    outline-offset: 3px;
}

.school-country select,
.school-search input {
    -webkit-transition: none;
    transition: none;
}

.school-country select:focus,
.school-country select:focus-visible,
.school-search input:focus,
.school-search input:focus-visible {
    border-color: #e4e7ee !important;
    -webkit-box-shadow: 0 3px 8px rgba(7, 27, 85, 0.12) !important;
    box-shadow: 0 3px 8px rgba(7, 27, 85, 0.12) !important;
    outline: none !important;
}

.school-country select {
    padding: 0 46px 0 18px;
}

.school-search .search-wrap > svg {
    right: 16px;
    left: auto;
    stroke: var(--navy);
}

.school-list {
    border-top: 1px solid var(--line);
}

.school-add button {
    min-width: 180px;
    min-height: 44px;
    padding: 0 24px;
    font-size: var(--font-16);
    border: 2px solid rgba(255, 255, 255, 0.96);
    border-radius: 999px;
    color: var(--white);
    background: transparent;
    -webkit-box-shadow: 0 4px 10px rgba(7, 27, 85, 0.16);
    box-shadow: 0 4px 10px rgba(7, 27, 85, 0.16);
    cursor: pointer;
    -webkit-transition:
        -webkit-transform 180ms ease,
        -webkit-box-shadow 180ms ease;
    transition:
        -webkit-transform 180ms ease,
        -webkit-box-shadow 180ms ease;
    transition:
        transform 180ms ease,
        box-shadow 180ms ease;
    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        -webkit-transform 180ms ease,
        -webkit-box-shadow 180ms ease;
}

.school-add button:hover {
    background: rgba(255, 255, 255, 0.12);
    -webkit-box-shadow: 0 7px 14px rgba(7, 27, 85, 0.2);
    box-shadow: 0 7px 14px rgba(7, 27, 85, 0.2);
}

.school-result {
    -ms-grid-columns: 60px 15px minmax(0, 1fr) 15px 28px;
    grid-template-columns: 60px minmax(0, 1fr) 28px;
    gap: 15px;
    min-height: 88px;
    padding: 12px 18px 12px 16px;
    border: none;
    border-top: 1px solid #e8e9ec;
}

.school-result:first-child,
.teacher-choice:first-child {
    border-top: none;
}

.school-result:hover,
.teacher-choice:hover {
    border-color: #d3d5da;
    background: #fff;
    -webkit-transform: translateY(-1px);
    -ms-transform: translateY(-1px);
    transform: translateY(-1px);
}

.school-result__icon,
.school-result--new .school-result__icon {
    width: 58px;
    height: 58px;
    border: 3px solid #c7c9cc;
    border-radius: 50%;
    color: var(--navy);
    background: #fff;
    overflow: hidden;
}

.school-result__icon svg {
    width: 44px;
    height: 44px;
    fill: none;
    display: none;
}

.school-result__icon img {
    display: block;
    width: 43px;
    height: 46px;
    border-radius: 50%;
    clip-path: circle(50% at 50% 50%);
    -o-object-fit: contain;
    object-fit: contain;
}

.school-icon__building {
    fill: var(--navy);
}

.school-icon__person {
    fill: #fff;
}

.login-primary,
.code-login-button,
.login-scan-button,
.partner-buttons button,
.recovery-primary,
.reset-primary,
.resend-button,
.primary-button,
.scan-button,
.add-school-primary,
.school-confirm-actions button,
.teacher-login-actions button,
.register-submit {
    border-radius: 999px;
}

select {
    border-radius: 999px !important;
}

.school-list,
.school-list:not(:has(.school-result)) {
    display: -ms-grid;
    display: grid;
    -ms-flex-line-pack: start;
    align-content: start;
    min-height: 0;
    max-height: none;

    overflow-y: scroll;
    -ms-scroll-chaining: none;
    overscroll-behavior: contain;
    scrollbar-color: rgba(7, 27, 85, 0.34) transparent;
    scrollbar-width: thin;
}
.school-list:has(p.school-empty:not([hidden])),
.teacher-list:has(p.teacher-empty:not([hidden])) {
    align-content: center;
}

.school-list::-webkit-scrollbar {
    width: 6px;
}

.school-list::-webkit-scrollbar-track {
    background: transparent;
}

.school-list::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(7, 27, 85, 0.34);
}

.school-list::-webkit-scrollbar-button,
.school-list::-webkit-scrollbar-button:single-button {
    display: none;
    width: 0;
    height: 0;
}

.teacher-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    -o-object-fit: cover;
    object-fit: cover;
}

.school-page .school-main {
    place-items: center;
    overflow-y: scroll;
    padding: 44px 24px;
}

.school-page .school-panel,
.school-select-page .school-panel {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: min(100%, 920px);
    gap: 32px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.school-page .school-intro {
    margin: 0;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: end;
}

.school-page .school-result,
.school-select-page .school-result {
    -ms-grid-columns: 46px 10px minmax(0, 1fr) 10px 22px;
    grid-template-columns: 46px minmax(0, 1fr) 22px;
    gap: 10px;
    min-height: 64px;
    padding: 7px 12px;
}

.school-page .school-result__icon,
.school-page .school-result--new .school-result__icon,
.school-select-page .school-result__icon,
.school-select-page .school-result--new .school-result__icon {
    width: 44px;
    height: 44px;
    border-width: 2px;
}

.school-page .school-result__icon img,
.school-select-page .school-result__icon img {
    width: 33px;
    height: 36px;
}

.back-button,
.register-back,
.login-back,
.recovery-back {
    left: calc(clamp(20px, 3vw, 52px) + 4px);
    width: 44px;
    height: 44px;
    background: #fff url(../images/assets/back-btn.svg) center / 20px 20px no-repeat;
    background-position-x: 9px;
}

.password-toggle {
    background: transparent url("../images/assets/eye-hidden.svg") center / 24px 24px
        no-repeat !important;
}

.password-toggle.is-visible,
.password-toggle.is-visible:hover {
    background: transparent url("../images/assets/eye-visible.svg") center / 24px 24px
        no-repeat !important;
}

.password-toggle > svg {
    display: none !important;
}

body .page-shell .register-consents input[type="checkbox"],
body .page-shell .stay-signed-in input[type="checkbox"] {
    width: 25px;
    height: 25px;
    margin: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 0;
    border-radius: 0;
    background: transparent url("../images/assets/checkbox-unchecked.svg") center / 25px
        25px no-repeat;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    cursor: pointer;
}

body .page-shell .register-consents input[type="checkbox"]:checked,
body .page-shell .stay-signed-in input[type="checkbox"]:checked {
    background-image: url("../images/assets/checkbox-checked.svg");
}

body .page-shell .register-consents input[type="checkbox"]::after,
body .page-shell .stay-signed-in input[type="checkbox"]::after {
    display: none;
}

.register-page .register-layout {
    width: min(100%, 434px);
    -ms-grid-column-align: center;
    justify-self: center;
    gap: 12px;
}

.register-page .register-form {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    width: 434px;
    max-width: 100%;
    height: 447px;
    padding: 20px 25px;
    border: 1px solid rgba(7, 27, 85, 0.08);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.97);
    -webkit-box-shadow: 0 14px 34px rgba(26, 32, 69, 0.08);
    box-shadow: 0 14px 34px rgba(26, 32, 69, 0.08);
}

.register-page .register-name-row {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    margin-top: 8px;
}

.register-page .register-name-row + .register-field,
.register-page .register-form > .register-field + .register-field {
    display: block;
}

.register-page .register-field,
.register-page .register-select-wrap,
.register-page .register-field .reset-input-wrap {
    width: 100%;
}

body .register-page .register-field > input,
body .register-page .register-field .reset-input-wrap > input,
body .register-page .register-select-wrap .select-selected {
    width: 100%;
    max-width: none;

    padding: 0 14px;
    border: 2px solid #dde4f0;
    border-radius: 42px;
    color: var(--navy);
    background: #fff;
    font-size: var(--font-18);

    -webkit-box-shadow: none;

    box-shadow: none;
}

body .register-page .register-field .reset-input-wrap > input {
    padding-right: 41px;
}

.register-page .register-consents {
    display: -ms-grid;
    display: grid;
    row-gap: 8px;
    margin: 10px 0;
    padding: 0 14px;
}

.register-page .register-consents label {
    -ms-grid-columns: 22px 10px 1fr;
    grid-template-columns: 22px 1fr;
    gap: 10px;

    font-size: var(--font-16);
}

.register-page .register-consents input {
    width: 17px;
    height: 17px;
    border-width: 3px;
}

.register-page .register-consents input:checked::after {
    top: -6px;
    left: 5px;
    width: 7px;
    height: 15px;
    border-width: 0 4px 4px 0;
}

.register-page .register-field .password-toggle {
    right: 12px;
    width: 31px;
    height: 31px;
}

.register-page .register-field .password-toggle svg {
    width: 17px;
}

.register-page .register-submit {
    width: 100%;

    padding: 8px 21px;
    border: 0;
    border-radius: 42px;
    color: #fff;
    background: var(--red2);
    -webkit-box-shadow: 0 8px 17px rgba(239, 63, 11, 0.18);
    box-shadow: 0 8px 17px rgba(239, 63, 11, 0.18);
}

.register-page .register-submit:hover {
    background: var(--red2);
    -webkit-box-shadow: 0 10px 20px rgba(239, 63, 11, 0.22);
    box-shadow: 0 10px 20px rgba(239, 63, 11, 0.22);
}

.register-page .register-login {
    margin: 0;
    margin-top: 8px;
    color: var(--navy);
    font-size: var(--font-14);
    text-align: center;
}

body
    .page-shell:not(.register-page)
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(
        [type="submit"]
    ):not([type="button"]),
body .page-shell:not(.register-page) select,
body .page-shell:not(.register-page) textarea,
body .page-shell:not(.register-page) .select-selected {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    width: 100%;
    height: var(--input-h);
    padding: 0 20px;
    border: 1px solid #dde4f0;
    border-radius: var(--b-radius-round);
    color: var(--navy);
    background: #fff;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-family: var(--font-ekidz);
    font-size: var(--font-18);
    text-overflow: ellipsis;
}

body .page-shell:not(.register-page) input::-webkit-input-placeholder,
body .page-shell:not(.register-page) textarea::-webkit-input-placeholder {
    color: #a6adbd;
    opacity: 1;
    font: inherit;
}

body .page-shell:not(.register-page) input::-moz-placeholder,
body .page-shell:not(.register-page) textarea::-moz-placeholder {
    color: #a6adbd;
    opacity: 1;
    font: inherit;
}

body .page-shell:not(.register-page) input:-ms-input-placeholder,
body .page-shell:not(.register-page) textarea:-ms-input-placeholder {
    color: #a6adbd;
    opacity: 1;
    font: inherit;
}

body .page-shell:not(.register-page) input::-ms-input-placeholder,
body .page-shell:not(.register-page) textarea::-ms-input-placeholder {
    color: #a6adbd;
    opacity: 1;
    font: inherit;
}

body .page-shell:not(.register-page) input::placeholder,
body .page-shell:not(.register-page) textarea::placeholder {
    color: #a6adbd;
    opacity: 1;
    font: inherit;
}

body .page-shell:not(.register-page) textarea {
    min-height: 112px;
    padding-top: 14px;
    padding-bottom: 14px;
    border-radius: 28px;
    resize: vertical;
}

.home-page .topbar {
    padding-inline: clamp(20px, 3vw, 52px);
}

.home-page .main {
    padding: 16px 20px;
}

.home-page .role-card,
.switch-user-page .role-card,
.switch-user-stud-page .role-card {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 280px;
    max-width: min(100%, 320px);
    padding: 24px 32px;
    border: 1px solid rgba(7, 27, 85, 0.06);
    border-radius: var(--b-radius-28);
    background: rgba(255, 255, 255, 0.96);
    -webkit-box-shadow: 0 11px 27px rgba(26, 32, 69, 0.08);
    box-shadow: 0 11px 27px rgba(26, 32, 69, 0.08);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 12px;
}

body .home-page .home-switcher .role-card::before,
.switch-user-page .role-card::before {
    inset: 1px;
    border-radius: 27px;
    background: linear-gradient(
        140.91deg,
        rgba(103, 203, 237, 0) 42%,
        rgba(103, 203, 237, 0.08) 100%
    );
}

body .home-page .home-switcher .role-card__label,
.switch-user-page .role-card__label,
.switch-user-stud-page .role-card__label {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: var(--font-24);
    letter-spacing: 0;
}

body .home-page .home-switcher .role-card__label svg {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 38px;
    height: 38px;
    padding: 7px;
    border-radius: 50%;
    background: #f0f5ff;
}

body .home-page .home-switcher .qr-badge,
.switch-user-page .qr-badge,
.switch-user-stud-page .qr-badge {
    top: 14px;
    right: 14px;
    width: 58px;
    height: 58px;
    z-index: 20;
}

body .home-page .home-switcher .qr-badge:hover {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}

body .home-page .home-switcher .qr-badge svg {
    width: 34px;
}

.home-page .home-switcher .role-card__label {
    min-height: 34px;
    padding-inline: 9px 6px;
    font-size: 17px;
}

.home-page .home-switcher .role-card__label svg {
    width: 28px;
    height: 28px;
    padding: 7px;
}

.home-page .home-switcher .qr-badge svg {
    width: 26.4px;
}

.home-page .home-registration p {
    font-size: var(--font-18);
}

.home-page .home-registration a {
    min-width: var(--button-w);
    min-height: var(--button-h);
    font-size: var(--font-20);
}

.confirmation-main {
    padding-top: 24px;
    padding-bottom: 26px;
}

.confirmation-panel {
    position: relative;
    z-index: 2;
    width: min(100%, var(--auth-window-width));
}

.registration-confirmation-form {
    display: -ms-grid;
    display: grid;
    gap: 9px;
    padding: 16px 18px 14px;
    border: 1px solid rgba(7, 27, 85, 0.08);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.97);
    -webkit-box-shadow:
        0 14px 34px rgba(26, 32, 69, 0.08),
        0 2px 7px rgba(26, 32, 69, 0.04);
    box-shadow:
        0 14px 34px rgba(26, 32, 69, 0.08),
        0 2px 7px rgba(26, 32, 69, 0.04);
}

.registration-confirmation-field input {
    width: 100%;
    height: 44px;
    padding: 0 16px;
    border: 1.5px solid #d9deea;
    border-radius: 999px;
    color: var(--navy);
    background: #fff;
    font-size: 14px;
    outline: none;
}

.registration-confirmation-field input::-webkit-input-placeholder {
    color: #a6adbd;
}

.registration-confirmation-field input::-moz-placeholder {
    color: #a6adbd;
}

.registration-confirmation-field input:-ms-input-placeholder {
    color: #a6adbd;
}

.registration-confirmation-field input::-ms-input-placeholder {
    color: #a6adbd;
}

.registration-confirmation-field input::placeholder {
    color: #a6adbd;
}

.registration-confirmation-primary {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    min-height: 64px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 11px 30px;
    border: 0;
    border-radius: 80px;
    color: #fff;
    background: #001147;
    -webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    font-size: var(--font-24);
    cursor: pointer;
}

.registration-confirmation-resend {
    -ms-grid-column-align: center;
    justify-self: center;
    padding: 0;
    border: 0;
    color: var(--navy);
    background: transparent;
    font-size: var(--font-14);

    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    margin-top: 8px;
}

.registration-confirmation-error {
    margin: 0;
    color: #c52f12;
    font-size: var(--font-14);
    padding: 0 12px;
}

.code-form {
    padding: 30px 30px 26px;
}

.stay-signed-in {
    margin-top: 22px;
}

.code-actions {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 24px;
}

.scan-button {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
}

.scan-button svg {
    width: 34px;
}

.login-form,
.reset-form,
.recovery-form,
.code-form,
.add-school-form,
.register-form {
    padding: 20px 25px;
    border-radius: 24px;
}

.login-field input,
.reset-email,
.reset-email input,
.reset-field input,
.confirmation-field input,
.recovery-entry input,
.code-entry input,
.add-school-field input,
.add-school-field select,
.register-select-wrap select,
.register-field > input,
.register-field .reset-input-wrap > input {
    height: var(--input-h);
}

.reset-fields,
.add-school-grid,
.register-form {
    gap: 9px;
}

.login-primary,
.recovery-primary,
.reset-primary,
.primary-button,
.scan-button,
.add-school-primary,
.register-submit {
    min-height: var(--button-h);
    font-size: var(--font-20);
}

.register-submit {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: min(456px, 100%);
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-grid-column-align: center;
    justify-self: center;
    gap: 10px;
    padding: 11px 30px;
    border: 0;
    border-radius: 80px;
    color: #fff;
    background: #001147;
    -webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

.register-submit:hover {
    background: #001147;
    -webkit-box-shadow: 0 6px 8px rgba(0, 0, 0, 0.28);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.28);
}

.qr-reference-icon {
    color: var(--navy);
    position: absolute;
    left: 20px;
    width: 34px;
    height: 100%;
    background: transparent url(../images/assets/qr-code.svg) center / 34px 34px
        no-repeat;
}

.qr-reference-icon path,
.qr-reference-icon rect:not([fill]) {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.reset-fields,
.add-school-grid,
.register-form,
.registration-confirmation-form {
    row-gap: 9.9px;
}

.add-school-grid {
    margin-top: 15.4px;
}

.register-consents {
    row-gap: 13.2px;
}

.code-actions {
    row-gap: 17.6px;
    margin-top: 26.4px;
}

.stay-signed-in {
    margin-top: 24.2px;
}

.teacher-access-options {
    row-gap: 24.2px;
}

.custom-select {
    position: relative;
    display: block;
    z-index: 5;
    background: none;
    font-family: var(--font-ekidz);
    font-size: var(--font-20);
}

.school-page .school-card,
.school-page .teachers-card,
.school-select-page .school-list {
    display: -ms-grid;
    display: grid;
    -ms-grid-rows: auto 20px auto;
    grid-template-rows: min-content auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    min-height: min(100%, 500px);
    padding: 20px 25px;
    row-gap: 20px;
    border: 2px solid rgba(7, 27, 85, 0.08);
    border-radius: 28px;
    background: var(--white);
    -webkit-box-shadow: 0 12px 28px rgba(7, 27, 85, 0.16);
    box-shadow: 0 12px 28px rgba(7, 27, 85, 0.16);
    -ms-grid-row-align: center;
    align-self: center;
    height: clamp(350px, calc(100svh - 391px), 600px);
}

.school-select-page .school-list {
    gap: 0;
}

.school-page .school-filters {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 12px 1fr;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.school-page .school-search input,
.school-page .school-country select,
.school-page .school-country .select-selected {
    -webkit-box-shadow: 0 3px 8px rgba(7, 27, 85, 0.12) !important;
    box-shadow: 0 3px 8px rgba(7, 27, 85, 0.12) !important;
}

.school-page .search-wrap > svg {
    right: 16px;
    left: auto;
    width: 20px;
    stroke: #00114a;
    stroke-width: 1.75;
}

.role-card,
.login-form,
.register-form,
.code-form,
.recovery-form,
.reset-form,
.registration-confirmation-form,
.add-school-form,
.school-card,
.teacher-access-panel,
.school-confirm-dialog,
.teacher-login-dialog,
.scanner-dialog,
.loose-data-dialog {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid rgba(7, 27, 85, 0.08);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.97);
    -webkit-box-shadow: 0 12px 28px rgba(7, 27, 85, 0.16);
    box-shadow: 0 12px 28px rgba(7, 27, 85, 0.16);
}

.custom-select > select,
.custom-select > svg {
    display: none !important;
}

.select-selected {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: var(--input-h);
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 8px 42px 8px 21px;
    border: 1px solid #e4e7ee;
    border-radius: 30px;
    color: #eb3d00;
    background: #fff;
    -webkit-box-shadow: 0 3px 8px rgba(7, 27, 85, 0.12);
    box-shadow: 0 3px 8px rgba(7, 27, 85, 0.12);
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.select-selected::after {
    position: absolute;

    right: 15px;
    width: 20px;
    height: 20px;

    content: "";

    background: transparent url(../images/assets/arrow-down.svg) center / 20px 20px
        no-repeat;
}

.select-selected.select-arrow-active::after {
    border-top-color: transparent;
    border-bottom-color: var(--navy);
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

.select-selected:focus-visible {
    outline: none;
    -webkit-box-shadow:
        0 0 0 2px lightgray,
        0 3px 8px rgba(7, 27, 85, 0.12);
    box-shadow:
        0 0 0 2px lightgray,
        0 3px 8px rgba(7, 27, 85, 0.12);
}

.select-items {
    position: absolute;
    right: 0;
    left: 0;
    z-index: 102;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid #dde4f0;
    background: #fff;

    -webkit-box-shadow: var(--shadow);

    box-shadow: var(--shadow);
    max-height: clamp(364px, 30vw, 400px);
}

.add-school-main .select-items {
    max-height: clamp(314px, 30vw, 326px);
}

.select-items-down {
    overflow-y: scroll;
}

.select-items-up {
    bottom: calc(100% + 4px);
}

.select-items button {
    display: block;
    width: 100%;
    height: 40px;
    padding: 6px 21px;
    border: 0;
    color: var(--navy);
    background: #fff;
    font-size: var(--font-18);
    text-align: left;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.select-items button:hover,
.select-items button:focus-visible,
.select-items .same-as-selected {
    outline: none;
    background: rgba(0, 0, 0, 0.1);
}

.select-hide {
    display: none;
}

.school-page .school-result__icon,
.school-page .school-result--new .school-result__icon,
.school-select-page .school-result__icon,
.school-select-page .school-result--new .school-result__icon {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 0;
    background: #fff url(../images/assets/house-icon.svg) center / 44px 44px no-repeat;
    overflow: visible;
}

.school-page .school-result__icon img {
    width: 44px;
    height: 44px;
    border-radius: 0;
    clip-path: none;
    -o-object-fit: contain;
    object-fit: contain;
}

.add-school-icon {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 72px;
}

.school-confirm-icon img {
    display: block;
    /* width: 44px; */
    height: 94px;
}

.page-shell .footer-legal,
.home-page .footer-legal {
    gap: 6.4px;
}

.page-shell .footer__dot {
    margin-inline: 7.2px;
}

.search-icon {
    position: absolute;
    right: 15px;
    width: 20px;
    height: 100%;
    z-index: 1;
    background: transparent url(../images/assets/search.svg) center / 20px 20px
        no-repeat;
    -webkit-transition:
        opacity 0.2s ease,
        visibility 0.2s ease;
    transition:
        opacity 0.2s ease,
        visibility 0.2s ease;
}

.search-wrap:has(#school-search:focus) .search-icon {
    opacity: 0;
    visibility: hidden;
}

.dialog-controls {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 40px;
    margin-top: 24px;
}

.school-confirm-dialog .school-name,
.school-confirm-name,
.loose-data-dialog .main-text {
    font-size: var(--font-20);
}
.school-confirm-dialog .school-address,
.school-confirm-address,
.loose-data-dialog .secondary-text {
    font-size: var(--font-14);
    color: #676d80;
    margin: 0;
}

.role-card_arrow {
    width: 38px;
    height: 38px;
    background: #f0f5ff url(../images/assets/arrow-forward.svg) center / 20px 20px
        no-repeat;
    border-radius: var(--b-radius-round);
}

.dialog-icon {
    display: block;
    height: 72px;
    margin-top: 24px;
}
.dialog-icon img {
    height: 100%;
}

.school-info,
.dialog-body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 8px;
}

.dialog-header {
    font-size: var(--font-32);
    color: var(--navy);
}

.teacher-list-page .intro h1 {
    margin: 0;
}
.teacher-list-page .intro p {
    color: var(--white);
}

img.dialog-avatar {
    position: absolute;
    height: 94px;
    top: -170px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

form input {
    font-size: var(--font-18) !important;
}

.teacher-login-dialog .dialog-header {
    margin: 0;
    color: white;
    position: absolute;
    top: -60px;
}

.switch-user-stud-page button.role-card[data-role="switch-teacher"] {
    display: none;
}

.switch-user-stud-page .teacher-login {
    position: relative;
    width: min(100%, 320px);
    -ms-grid-row-align: center;
    align-self: center;
    border-radius: var(--b-radius-round);
    border: none;
    height: var(--button-h);
    background-color: #abe4fb;
    display: -ms-grid;
    display: grid;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    justify-items: center;
    text-decoration: none;
    color: var(--navy);
    -webkit-box-shadow: 0 11px 27px rgba(26, 32, 69, 0.08);
    box-shadow: 0 11px 27px rgba(26, 32, 69, 0.08);
    -webkit-transition:
        border-color 220ms ease,
        -webkit-transform 220ms ease,
        -webkit-box-shadow 220ms ease;
    transition:
        border-color 220ms ease,
        -webkit-transform 220ms ease,
        -webkit-box-shadow 220ms ease;
    transition:
        transform 220ms ease,
        box-shadow 220ms ease,
        border-color 220ms ease;
    transition:
        transform 220ms ease,
        box-shadow 220ms ease,
        border-color 220ms ease,
        -webkit-transform 220ms ease,
        -webkit-box-shadow 220ms ease;
}
.switch-user-stud-page .teacher-login:hover {
    -webkit-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    transform: translateY(-2px);
    -webkit-box-shadow: var(--shadow-navy-hover);
    box-shadow: var(--shadow-navy-hover);
}

.switch-user-stud-page .teacher-login-icon {
    width: 44px;
    position: absolute;
    height: 100%;
    left: 20px;
    background: transparent url(../images/assets/teacher-icon-login.svg) center / 44px
        44px no-repeat;
}

.teacher-login-page h1 {
    color: white;
}

.home-roles {
    display: -ms-grid;
    display: grid;
    place-items: center;
    width: 100%;
    gap: 12px;
}

.home-roles > p {
    margin: 0;
    font-size: var(--font-18);
}
.home-page h1 {
    font-size: var(--font-44);
}

.teacher-icon {
    height: 92px;

    display: grid;
    align-items: center;
    position: absolute;
    top: -120px;
}

    .teacher-icon img {
        _height: 100%;
        width: 87px;
        height: 88px;
    }

.teacher-icon-simple {
    border-radius: 50px;
    border: 3px solid lightgrey;
}

.teacher-icon-admin {
    border-radius: 50px;
    border: 3px solid rgb(235, 61, 0) !important;
}


.partner-logins p {
    margin: 0;
    font-size: var(--font-18);
}

.login-variants {
    display: flex;
    width: 100%;
    gap: 32px;
}

.partner-logins {
    width: min(100%, 480px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

@media (max-width: 1024) {
    .school-page .school-card,
    .school-page .teachers-card {
        height: clamp(270px, calc(100svh - 290px), 410px);
    }
}

@media (max-width: 768px) {
    .page-shell {
        -ms-grid-rows: 56px minmax(0, 1fr) auto;
        grid-template-rows: 56px minmax(0, 1fr) auto;
    }

    .brand__mark {
        width: 44px;
        height: 44px;
    }

    .page-shell .footer {
        min-height: 44px;
        padding: 4px 14px;

        gap: 4px;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }

    .page-shell .footer-legal {
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
        position: unset;
    }

    .register-page .topbar {
        height: 56px;
    }

    .school-page .school-filters {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
    }

    .school-page .school-card {
        padding: 10px 12px;
        row-gap: 10px;
        min-height: min(100%, 600px);
    }
}

@media (max-width: 480px) {
    .home-page .main {
        padding: 20px 28px;
    }
    .home-switcher .role-grid {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 12px !important;
    }
    .home-switcher .role-card {
        width: min(100%, 320px);
        max-width: 100%;
        height: 240px;
        min-height: 150px !important;
        gap: 12px !important;
        padding: 12px 16px !important;
        display: -ms-grid;
        display: grid;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .role-card__art {
        height: 100px !important;
    }
    .role-card__label {
        position: absolute;
        bottom: 16px;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
    .role-card__label .role-card_arrow {
        display: none;
    }

    .school-page .main {
        padding: 24px 18px;
    }

    .school-page .school-card {
        min-height: min(100%, 520px);
    }

    .page-shell .footer {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
    }

    .back-button {
        left: calc(clamp(20px, 3vw, 52px) + 0px);
    }

    .school-confirm-actions,
    .dialog-controls {
        gap: 18px;
    }
}

@media (max-width: 380px) {
    .school-page .school-panel {
        gap: 12px;
    }
    .school-page .school-card {
        min-height: min(100%, 350px);
    }

    form input,
    .select-selected {
        font-size: 14px !important;
        height: 44px !important;
    }
    .select-selected::after {
        position: absolute;
        right: 12px;
        width: 16px;
        height: 16px;
        background: transparent url(../images/assets/arrow-down.svg) center / 16px 16px
            no-repeat;
    }

    .page-shell.add-school-page .add-school-panel {
        gap: 8px;
    }

    .add-school-icon {
        height: 60px;
    }
    .school-confirm-dialog,
    .teacher-login-form,
    .loose-data-dialog {
        padding: 24px;
    }
    .login-primary,
    .recovery-primary,
    .reset-primary,
    .primary-button,
    .scan-button,
    .add-school-primary,
    .register-submit,
    .ekz-button {
        height: 44px;
        min-height: 44px;
        font-size: var(--font-18);
    }

    .scanner-corner--tl {
        top: var(--scanner-1);
        left: var(--scanner-2);
    }
    .scanner-corner--tr {
        top: var(--scanner-1);
        right: var(--scanner-2);
    }
    .scanner-corner--bl {
        bottom: var(--scanner-1);
        left: var(--scanner-2);
    }
    .scanner-corner--br {
        bottom: var(--scanner-1);
        right: var(--scanner-2);
    }
}

@media (max-height: 700px) {
    img.dialog-avatar {
        display: none !important;
    }

/*    .teacher-icon {
        display: none;
    }*/
}



/*loading image by center of window*/
.loading {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: fixed;
    display: block;
    opacity: 0.7;
    background-color: #fff;
    z-index: 9999;
    text-align: center;
}

.loading-image {
    position: absolute;
    top: calc(40%);
    left: calc(50%);
    z-index: 9000;
}