/* GLOBAL-PREMIUM-REDESIGN-007
 * Zavrsni zajednicki vizualni sloj. Namjerno ne mijenja administraciju,
 * strukturu dokumenata ni JavaScript selektore.
 */

html body.robo-arena-page {
    --premium-navy: #071f74;
    --premium-blue: #075ef2;
    --premium-cyan: #11b9f4;
    --premium-ink: #0b2678;
    --premium-muted: #58709f;
    --premium-line: #d7e7fb;
    --premium-surface: rgba(255, 255, 255, .96);
    --premium-shadow: 0 16px 38px rgba(16, 70, 145, .12), 0 3px 9px rgba(16, 70, 145, .07);
    color: var(--premium-ink);
    background-color: #f4faff;
    background-image:
        radial-gradient(circle at 12% 8%, rgba(17, 185, 244, .12), transparent 28rem),
        radial-gradient(circle at 92% 30%, rgba(103, 76, 255, .08), transparent 30rem),
        linear-gradient(180deg, #eef8ff 0, #fbfdff 36rem, #f5faff 100%);
}

html body.robo-arena-page :where(h1, h2, h3, h4, strong) {
    color: var(--premium-ink);
}

html body.robo-arena-page :where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid #ffd34f;
    outline-offset: 3px;
}

html body.robo-arena-page :where(button, .btn, [role="button"]) {
    min-height: 44px;
}

/* Kanonski identitet: svaki slikovni gumb Natrag koristi isti krug i asset. */
html body.robo-arena-page :where(.arena-back-button, .context-back-button, .child-profile-topbar-button) {
    display: grid;
    width: 58px;
    height: 58px;
    min-width: 58px;
    min-height: 58px;
    padding: 0;
    place-items: center;
    border: 2px solid rgba(255, 255, 255, .72);
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(180deg, #1aa8f5 0%, #075de8 58%, #0847bf 100%);
    box-shadow: 0 9px 19px rgba(0, 42, 137, .28), inset 0 1px 0 rgba(255, 255, 255, .45);
}

html body.robo-arena-page :where(.arena-back-button, .context-back-button, .child-profile-topbar-button) > img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
}

html body.robo-arena-page :where(.arena-back-button, .context-back-button, .child-profile-topbar-button):hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

/* Sve logotipske pozicije koriste isti produkcijski grb bez rastezanja. */
html body.robo-arena-page :where(
    .flow-logo,
    .parent-signin-logo,
    .parent-register-logo,
    .parent-forgot-logo,
    .parent-verify-logo,
    .parent-onboarding-logo,
    .parent-child-id-logo,
    .parent-reward-gate__logo,
    .parent-edit-hero__logo,
    .parent-brand-logo,
    .ra-secondary-logo,
    .teacher-app-header__logo
) {
    object-fit: contain;
    object-position: center;
    filter: drop-shadow(0 8px 9px rgba(0, 31, 105, .3));
}

html body.robo-arena-page :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) {
    border-color: #c7dcf7;
    border-radius: 14px;
    background: rgba(255, 255, 255, .98);
    box-shadow: inset 0 1px 2px rgba(14, 53, 118, .04), 0 5px 13px rgba(20, 87, 166, .05);
}

html body.robo-arena-page :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea):focus {
    border-color: var(--premium-blue);
    box-shadow: 0 0 0 4px rgba(7, 94, 242, .12), 0 8px 18px rgba(20, 87, 166, .08);
}

/* Zajednicka dubina kartica bez promjene njihovih rasporeda. */
html body.robo-arena-page:not(.teacher-reference-page) :where(
    .panel,
    .reward-card,
    .mission-card,
    .dashboard-card,
    .auth-card,
    .install-card,
    .parent-action-grid > a,
    .parent-claims-preview,
    .ra-switch-card
) {
    border-color: var(--premium-line);
    box-shadow: var(--premium-shadow);
}

/* Roditeljsko zaglavlje prati premium arenu iz dostavljenih referenci. */
html body.parent-premium-page .parent-topbar {
    position: relative;
    isolation: isolate;
    min-height: 138px;
    padding: 18px clamp(20px, 4vw, 56px) 42px;
    border: 0;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 12% 36%, rgba(34, 211, 238, .35) 0 3px, transparent 4px),
        radial-gradient(circle at 82% 20%, rgba(255, 213, 79, .38) 0 3px, transparent 4px),
        linear-gradient(135deg, #04165e 0%, #063aa8 52%, #015ccc 100%);
    box-shadow: 0 18px 36px rgba(5, 39, 123, .22);
}

html body.parent-premium-page .parent-topbar::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -4%;
    bottom: -31px;
    left: -4%;
    height: 62px;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    background: #f5fbff;
}

html body.parent-premium-page .parent-topbar .brand {
    position: absolute;
    top: 10px;
    left: 50%;
    margin: 0;
    color: #fff;
    transform: translateX(-50%);
}

html body.parent-premium-page .parent-topbar .parent-brand-logo {
    width: clamp(150px, 19vw, 220px);
    max-height: 104px;
    object-fit: contain;
    filter: drop-shadow(0 8px 8px rgba(0, 24, 92, .42));
}

/* GLOBAL-CANONICAL-BRAND-031: kanonski logo i Robo Mentor na roditeljskim ekranima. */
html body.parent-premium-page .parent-topbar .parent-header-mentor {
    position: absolute;
    z-index: 1;
    top: 56px;
    left: calc(50% + 78px);
    width: 52px;
    height: 76px;
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 7px 8px rgba(0, 24, 92, .32));
    pointer-events: none;
}

html body.parent-premium-page .parent-topbar .brand > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

html body.parent-premium-page .parent-topbar .parent-pill {
    margin-left: auto;
    color: #fff;
    background: rgba(0, 42, 139, .42);
    border: 1px solid rgba(255, 255, 255, .24);
    box-shadow: 0 10px 22px rgba(0, 23, 86, .2);
    backdrop-filter: blur(10px);
}

html body.parent-premium-page .parent-topbar .parent-pill span,
html body.parent-premium-page .parent-topbar .nav-actions a {
    color: #fff;
}

html body.parent-premium-page .parent-topbar .nav-actions {
    align-self: flex-end;
    margin-left: auto;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    background: rgba(0, 34, 118, .32);
    backdrop-filter: blur(10px);
}

html body.parent-premium-page .parent-topbar .nav-actions a {
    min-height: 44px;
    border-radius: 999px;
}

html body.parent-premium-page .parent-topbar .nav-actions a:hover {
    background: rgba(255, 255, 255, .16);
}

/* PARENT-PROFILE-HEADER-008: jedan referentni vrh bez starog duplog heroa. */
html body.parent-profile-reference-page .parent-topbar {
    min-height: 150px;
    padding-bottom: 46px;
}

html body.parent-profile-reference-page .parent-topbar .brand {
    width: 180px;
    height: 106px;
}

html body.parent-profile-reference-page .parent-topbar .parent-brand-logo {
    width: 180px;
    height: 106px;
    max-height: none;
}

html body.parent-profile-reference-page .parent-topbar .context-back-button {
    position: absolute;
    z-index: 2;
    top: 28px;
    left: clamp(18px, 4vw, 54px);
}

html body.parent-profile-reference-page .parent-topbar .parent-pill {
    position: absolute;
    z-index: 2;
    top: 27px;
    right: clamp(82px, 10vw, 142px);
    min-height: 58px;
    padding: 5px 14px 5px 5px;
}

html body.parent-profile-reference-page .parent-topbar .parent-pill .topbar-profile-photo {
    width: 48px;
    height: 48px;
    border: 2px solid #fff;
    border-radius: 50%;
}

html body.parent-profile-reference-page .parent-topbar .nav-actions {
    position: absolute;
    z-index: 2;
    top: 28px;
    right: clamp(18px, 4vw, 54px);
    display: block;
    width: 58px;
    height: 58px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    backdrop-filter: none;
}

html body.parent-profile-reference-page .parent-topbar .nav-actions a {
    display: none;
}

html body.parent-profile-reference-page .parent-topbar .nav-actions a[data-notification-nav] {
    display: grid;
    width: 58px;
    height: 58px;
    min-height: 58px;
    padding: 0;
    place-items: center;
    border: 2px solid rgba(255, 255, 255, .72);
    border-radius: 50%;
    overflow: hidden;
    color: transparent;
    background: #0871ee url('../images/teacher/ikona-obavijesti.png') center / 31px 31px no-repeat;
    box-shadow: 0 9px 19px rgba(0, 42, 137, .28), inset 0 1px 0 rgba(255, 255, 255, .45);
    font-size: 0;
}

/* START PARENT-PREMIUM-ASSETS-024 */
html body.parent-profile-reference-page .parent-topbar .parent-premium-notification { position: relative; display: grid; width: 58px; min-width: 58px; height: 58px; padding: 0; place-items: center; overflow: visible; border: 0; background: transparent; font-size: 0; }
html body.parent-profile-reference-page .parent-premium-notification img { width: 58px; height: 58px; object-fit: contain; }
html body.parent-profile-reference-page .parent-premium-notification b { position: absolute; top: -2px; right: -2px; z-index: 2; min-width: 21px; height: 21px; padding: 0 5px; border: 2px solid #fff; border-radius: 999px; background: #ff4136; color: #fff; font-size: 11px; line-height: 17px; text-align: center; }
html body.parent-profile-reference-page .parent-topbar .parent-brand-logo { object-fit: contain; }
html body.parent-profile-reference-page .parent-premium-section-title { display: flex; align-items: center; gap: 10px; }
html body.parent-profile-reference-page .parent-premium-section-title img { width: 34px; height: 34px; flex: 0 0 34px; object-fit: contain; }
html body.parent-profile-reference-page .parent-edit-mistakes [hidden] { display: none; }
html body.parent-profile-reference-page .parent-mistakes-more { margin-top: 14px; }
html body.parent-profile-reference-page .parent-premium-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 18px auto; }
html body.parent-profile-reference-page .parent-premium-kpis article { display: flex; align-items: center; min-width: 0; min-height: 142px; padding: 18px; border: 1px solid #d8e7f8; border-radius: 22px; background: #fff; box-shadow: 0 12px 28px rgba(16, 70, 145, .11); }
html body.parent-profile-reference-page .parent-premium-kpis img { width: 62px; height: 62px; flex: 0 0 62px; object-fit: contain; }
html body.parent-profile-reference-page .parent-premium-kpis div { min-width: 0; }
html body.parent-profile-reference-page .parent-premium-kpis span, html body.parent-profile-reference-page .parent-premium-kpis small { display: block; overflow-wrap: anywhere; color: #315286; }
html body.parent-profile-reference-page .parent-premium-kpis strong { display: block; margin: 3px 0; color: #082879; font-size: clamp(1.55rem, 3vw, 2.2rem); line-height: 1; }
@media (max-width: 900px) { html body.parent-profile-reference-page .parent-premium-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { html body.parent-profile-reference-page .parent-topbar .parent-premium-notification, html body.parent-profile-reference-page .parent-premium-notification img { width: 48px; min-width: 48px; height: 48px; } }
@media (max-width: 520px) { html body.parent-profile-reference-page .parent-premium-kpis { grid-template-columns: 1fr; gap: 10px; } html body.parent-profile-reference-page .parent-premium-kpis article { min-height: 104px; padding: 14px; } html body.parent-profile-reference-page .parent-premium-kpis img { width: 54px; height: 54px; flex-basis: 54px; } }
/* END PARENT-PREMIUM-ASSETS-024 */

/* START PARENT-DASHBOARD-PREMIUM-025 */
html body.parent-profile-reference-page .parent-premium:not(.parent-onboarding) { width: min(1180px, calc(100% - 32px)); margin: -22px auto 0; }
html body.parent-profile-reference-page .parent-dashboard-intro { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 32px 34px; border: 1px solid #d8e7f8; border-radius: 28px; background: rgba(255,255,255,.98); box-shadow: 0 18px 38px rgba(16,70,145,.14); }
html body.parent-profile-reference-page .parent-dashboard-intro h1 { margin: 2px 0 5px; color: #082879; font-size: clamp(2rem, 5vw, 3.25rem); }
html body.parent-profile-reference-page .parent-dashboard-intro p { color: #315286; }
html body.parent-profile-reference-page .parent-children-heading { display: flex; align-items: center; gap: 10px; margin: 28px 4px 14px; color: #082879; }
html body.parent-profile-reference-page .parent-children-heading span { display: grid; min-width: 30px; height: 30px; padding: 0 8px; place-items: center; border-radius: 999px; background: #e9f3ff; color: #0869e9; font-weight: 800; }
html body.parent-profile-reference-page .parent-children-primary { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; overflow: visible; }
html body.parent-profile-reference-page .parent-children-primary .parent-featured-child { min-width: 0; padding: 24px; border: 1px solid #d8e7f8; border-radius: 26px; background: #fff; box-shadow: 0 14px 32px rgba(16,70,145,.12); }
html body.parent-profile-reference-page .parent-children-primary .child-card-photo { width: 92px; height: 92px; flex: 0 0 92px; object-fit: cover; border: 4px solid #62cff5; border-radius: 50%; }
html body.parent-profile-reference-page .parent-children-primary .summary-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
html body.parent-profile-reference-page .parent-action-grid img { width: 62px; height: 62px; object-fit: contain; }
@media (max-width: 720px) { html body.parent-profile-reference-page .parent-children-primary { grid-template-columns: 1fr; } html body.parent-profile-reference-page .parent-dashboard-intro { padding: 24px; align-items: flex-start; flex-direction: column; } }
@media (max-width: 420px) { html body.parent-profile-reference-page .parent-premium:not(.parent-onboarding) { width: min(100% - 16px,1180px); } html body.parent-profile-reference-page .parent-dashboard-intro { padding: 20px 16px; border-radius: 22px; } html body.parent-profile-reference-page .parent-children-primary .parent-featured-child { padding: 18px 14px; } html body.parent-profile-reference-page .parent-children-primary .child-card-photo { width: 72px; height: 72px; flex-basis: 72px; } }
/* END PARENT-DASHBOARD-PREMIUM-025 */

/* START PARENT-LAPTOP-LAYOUT-026 */
html body.parent-profile-reference-page .parent-edit-child-page {
    display: block;
    width: min(1040px, calc(100% - 32px));
    min-width: 0;
    margin: -22px auto 0;
    padding: 0 0 40px;
    color: #082879;
    background: transparent;
}
html body.parent-profile-reference-page .parent-edit-child-page > * { width: 100%; min-width: 0; box-sizing: border-box; }
html body.parent-profile-reference-page .parent-edit-child-page > section,
html body.parent-profile-reference-page .parent-edit-child-page > nav,
html body.parent-profile-reference-page .parent-edit-child-page > .form-message { margin-bottom: 18px; }
html body.parent-profile-reference-page .parent-premium-kpis { grid-column: 1 / -1; width: 100%; grid-template-columns: repeat(4, minmax(190px, 1fr)); }
html body.parent-profile-reference-page .parent-premium-kpis article { gap: 12px; overflow: hidden; }
html body.parent-profile-reference-page .parent-premium-kpis div { flex: 1 1 auto; width: auto; min-width: 0; }
html body.parent-profile-reference-page .parent-premium-kpis span,
html body.parent-profile-reference-page .parent-premium-kpis small { overflow-wrap: normal; word-break: normal; hyphens: auto; }
html body.parent-profile-reference-page .parent-edit-panel { width: 100%; min-width: 0; margin: 0 0 18px; }
@media (max-width: 900px) { html body.parent-profile-reference-page .parent-premium-kpis { grid-template-columns: repeat(2, minmax(220px,1fr)); } }
@media (max-width: 540px) { html body.parent-profile-reference-page .parent-edit-child-page { width: min(100% - 16px,1040px); } html body.parent-profile-reference-page .parent-premium-kpis { grid-template-columns: 1fr; } }
/* END PARENT-LAPTOP-LAYOUT-026 */

/* START FULL-RESPONSIVE-QA-027 */
html,
body.robo-arena-page { min-width: 0 !important; }
body.robo-arena-page { max-width: 100%; overflow-x: clip; }
/* END FULL-RESPONSIVE-QA-027 */

html body.parent-profile-reference-page .app-page.parent-page:not(.parent-onboarding) {
    width: min(1180px, calc(100% - 32px));
    margin: -22px auto 0;
    padding-top: 0;
}

html body.parent-profile-reference-page .app-page.parent-page:not(.parent-onboarding) > :first-child {
    position: relative;
    z-index: 3;
}

html body.parent-profile-reference-page .profile-hero.compact,
html body.parent-profile-reference-page .parent-reward-summary-grid,
html body.parent-profile-reference-page .reward-level-guide,
html body.parent-profile-reference-page .parent-claims-preview,
html body.parent-profile-reference-page .panel {
    border-color: #d7e7fb;
    box-shadow: 0 18px 38px rgba(16, 70, 145, .14);
}

html body.parent-profile-reference-page .profile-hero.compact {
    border: 1px solid #cfdef5;
    border-radius: 26px;
    background: rgba(255, 255, 255, .98);
}

html body.parent-profile-reference-page .profile-hero.compact .eyebrow,
html body.parent-profile-reference-page .section-heading .eyebrow {
    color: #0c67e8;
}

html body.parent-profile-reference-page .parent-edit-child-page {
    width: min(1180px, calc(100% - 32px));
    margin: -22px auto 0;
    padding-top: 0;
}

html body.parent-profile-reference-page .parent-edit-identity {
    position: relative;
    z-index: 3;
    margin-top: 0;
    border: 1px solid #cfdef5;
    border-radius: 24px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 18px 38px rgba(16, 70, 145, .14);
}

html body.parent-profile-reference-page .parent-edit-identity__copy .eyebrow {
    color: #0c67e8;
}

html body.parent-profile-reference-page .parent-edit-tabs {
    border: 1px solid #d7e7fb;
    border-radius: 18px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 10px 24px rgba(16, 70, 145, .08);
}

/* Djece sekundarne stranice dobivaju isti prepoznatljivi gornji pojas. */
html body.robo-arena-page .ra-secondary-topbar {
    border-bottom: 0;
    color: #fff;
    background:
        radial-gradient(circle at 20% 32%, rgba(34, 211, 238, .32) 0 3px, transparent 4px),
        linear-gradient(135deg, #04165e, #0647bb 62%, #0377db);
    box-shadow: 0 14px 30px rgba(7, 54, 137, .2);
}

html body.robo-arena-page .ra-secondary-logo {
    filter: drop-shadow(0 7px 8px rgba(0, 24, 92, .38));
}

html body.robo-arena-page .ra-secondary-player {
    color: #fff;
    border-color: rgba(255, 255, 255, .25);
    background: rgba(0, 39, 132, .36);
    backdrop-filter: blur(10px);
}

/* Ujednacena premium akcija: sjaj ostaje suptilan i ne remeti citljivost. */
html body.robo-arena-page :where(.btn.primary, .parent-main-cta, .teacher-button) {
    border: 1px solid rgba(255, 255, 255, .34);
    background-image: linear-gradient(180deg, #16bff5 0%, #0877f4 48%, #0755df 100%);
    box-shadow: 0 10px 20px rgba(7, 94, 242, .24), inset 0 1px 0 rgba(255, 255, 255, .35);
}

html body.robo-arena-page :where(.btn.primary, .parent-main-cta, .teacher-button):hover {
    filter: saturate(1.08) brightness(1.03);
    transform: translateY(-1px);
}

@media (max-width: 760px) {
    html body.robo-arena-page :where(.arena-back-button, .context-back-button, .child-profile-topbar-button) {
        width: 52px;
        height: 52px;
        min-width: 52px;
        min-height: 52px;
    }

    html body.parent-premium-page .parent-topbar {
        min-height: 116px;
        padding: 12px 14px 32px;
    }

    html body.parent-premium-page .parent-topbar .brand {
        top: 8px;
    }

    html body.parent-premium-page .parent-topbar .parent-brand-logo {
        width: 128px;
        max-height: 76px;
    }

    html body.parent-premium-page .parent-topbar .parent-pill {
        position: absolute;
        top: 18px;
        right: 14px;
        max-width: 112px;
    }

    html body.parent-premium-page .parent-topbar .parent-pill span {
        max-width: 58px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    html body.parent-premium-page .parent-topbar .nav-actions {
        display: none;
    }

    html body.parent-profile-reference-page .parent-topbar {
        min-height: 126px;
        padding-bottom: 32px;
    }

    html body.parent-profile-reference-page .parent-topbar .brand {
        top: 3px;
        width: 150px;
        height: 88px;
    }

    html body.parent-profile-reference-page .parent-topbar .parent-brand-logo {
        width: 150px;
        height: 88px;
        max-height: none;
    }

    html body.parent-profile-reference-page .parent-topbar .context-back-button {
        top: 17px;
        left: 12px;
    }

    html body.parent-profile-reference-page .parent-topbar .parent-pill {
        display: none;
    }

    html body.parent-profile-reference-page .parent-topbar .parent-pill .topbar-profile-photo {
        width: 42px;
        height: 42px;
    }

    html body.parent-profile-reference-page .parent-topbar .parent-pill span {
        display: none;
    }

    html body.parent-profile-reference-page .parent-topbar .nav-actions {
        top: 17px;
        right: 12px;
        display: block;
        width: 52px;
        height: 52px;
    }

    html body.parent-profile-reference-page .parent-topbar .nav-actions a[data-notification-nav] {
        width: 52px;
        height: 52px;
        min-height: 52px;
        background-size: 27px 27px;
    }

    html body.parent-profile-reference-page .app-page.parent-page:not(.parent-onboarding) {
        width: min(100% - 20px, 720px);
        margin-top: -14px;
    }

    html body.parent-profile-reference-page .parent-edit-child-page {
        width: min(100% - 20px, 720px);
        margin-top: -14px;
    }

    html body.parent-profile-reference-page .parent-edit-identity {
        border-radius: 20px;
    }
}

@media (max-width: 420px) {
    html body.parent-premium-page .parent-topbar .parent-brand-logo {
        width: 112px;
    }

    html body.parent-profile-reference-page .parent-topbar .parent-brand-logo {
        width: 150px;
        height: 88px;
        max-height: none;
    }

    html body.parent-premium-page .parent-topbar .parent-pill {
        max-width: 96px;
    }

    html body.parent-premium-page .parent-topbar .parent-header-mentor {
        top: 61px;
        left: calc(50% + 55px);
        width: 40px;
        height: 58px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html body.robo-arena-page *,
    html body.robo-arena-page *::before,
    html body.robo-arena-page *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* PREMIUM-RESPONSIVE-SCREENS-033
 * Zavrsni responsive sloj za roditeljski pregled te nastavnicki dashboard,
 * razred i detalj ucenika. Sadrzaj se prelomi umjesto da se sabija ili reze.
 */
html body.teacher-reference-page {
    --teacher-safe-width: 1180px;
    overflow-x: clip;
    background: linear-gradient(180deg, #edf8ff 0, #fff 280px, #f7fbff 100%) !important;
}

html body.teacher-reference-page .teacher-shell {
    width: min(var(--teacher-safe-width), 100%);
    overflow: visible;
    border-radius: 0 0 34px 34px;
}

html body.teacher-reference-page .teacher-app-header {
    height: 184px;
    margin-bottom: 22px;
    overflow: hidden;
}

html body.teacher-reference-page .teacher-app-header__logo {
    top: 5px;
    width: 208px;
    height: 164px;
    object-fit: contain;
}

/* Robo Mentor ostaje na stranici u savjetu; uklanja se samo duplikat iz zaglavlja. */
html body.teacher-reference-page .teacher-header-robot { display: none !important; }

html body.teacher-reference-page .teacher-content {
    display: flex;
    width: 100%;
    min-width: 0;
    flex-direction: column;
    padding: 0 clamp(18px, 3.2vw, 38px) 40px;
}

html body.teacher-reference-page .teacher-content > * { min-width: 0; }
html body.teacher-reference-page .teacher-class-switcher,
html body.teacher-reference-page .teacher-class-context { order: 90; }
html body.teacher-reference-page .teacher-class-management { order: 91; }
html body.teacher-reference-page .teacher-flash { order: -1; }

html body.teacher-reference-page :where(
    .teacher-panel,
    .teacher-summary-card,
    .teacher-kpi-card,
    .teacher-class-card,
    .teacher-focus-card,
    .teacher-topic-card,
    .teacher-coach-card
) { min-width: 0; overflow: hidden; }

html body.teacher-reference-page :where(
    .teacher-ui-icon,
    .teacher-math-icon,
    .teacher-stat-dot,
    .teacher-school-mark,
    .teacher-avatar
) {
    flex: 0 0 auto;
    align-self: center;
    object-fit: contain;
    object-position: center;
}

html body.teacher-reference-page :where(.teacher-ui-icon, .teacher-math-icon) img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

html body.teacher-reference-page :where(h1, h2, h3, p, span, small, strong, b, a, button, label) {
    overflow-wrap: break-word;
    word-break: normal;
}

html body.teacher-reference-page .teacher-summary-strip,
html body.teacher-reference-page .teacher-class-kpis {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

html body.teacher-reference-page .teacher-summary-card,
html body.teacher-reference-page .teacher-kpi-card {
    min-height: 132px;
    align-items: center;
    gap: 12px;
    padding: 18px;
}

html body.teacher-reference-page .teacher-summary-card > :first-child,
html body.teacher-reference-page .teacher-kpi-card > :first-child {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
}

html body.teacher-reference-page .teacher-summary-card > div,
html body.teacher-reference-page .teacher-kpi-card > div { min-width: 0; }

html body.teacher-reference-page .teacher-summary-card span,
html body.teacher-reference-page .teacher-kpi-card span {
    min-height: 0;
    font-size: 13px;
    line-height: 1.35;
}

html body.teacher-reference-page .teacher-class-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html body.teacher-reference-page .teacher-focus-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
html body.teacher-reference-page .teacher-focus-card > :first-child { flex: 0 0 54px; width: 54px; height: 54px; }
html body.teacher-reference-page .teacher-focus-card > div { min-width: 0; }
html body.teacher-reference-page .teacher-dashboard-footer-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }

html body.teacher-reference-page .teacher-analysis-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(330px, .85fr);
}
html body.teacher-reference-page .teacher-analysis-grid--middle { grid-template-columns: minmax(330px, .85fr) minmax(0, 1.15fr); }
html body.teacher-reference-page .teacher-analysis-grid--bottom { grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); }
html body.teacher-reference-page .teacher-analysis-grid > * { min-width: 0; }

html body.teacher-reference-page .teacher-topic-row {
    grid-template-columns: 46px minmax(88px, auto) minmax(80px, 1fr) 48px;
}
html body.teacher-reference-page .teacher-topic-row > :first-child { width: 42px; height: 42px; }

html body.teacher-reference-page :where(.teacher-matrix-scroll, .teacher-error-history-scroll, .teacher-activity-week-scroll) {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-gutter: stable;
}

html body.teacher-reference-page :where(.teacher-heatmap, .teacher-error-history, .teacher-activity-week) { min-width: 680px; }

html body.teacher-reference-page .teacher-student-hero {
    grid-template-columns: 118px minmax(0, 1fr) auto;
    align-items: center;
}
html body.teacher-reference-page .teacher-student-hero__content { min-width: 0; }
html body.teacher-reference-page .teacher-avatar--large { object-fit: contain; }
html body.teacher-reference-page .teacher-student-overview { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html body.teacher-reference-page .teacher-topic-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html body.teacher-reference-page .teacher-recommendation-row { grid-template-columns: 48px minmax(0, 1fr) 180px 152px; }

html body.teacher-reference-page .teacher-chart,
html body.teacher-reference-page .teacher-chart svg { max-width: 100%; }

html body.teacher-reference-page .teacher-chart svg {
    object-fit: fill;
    overflow: visible;
}

html body.teacher-reference-page .teacher-progress-heading {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px 14px;
}

html body.teacher-reference-page .teacher-progress-heading [data-trend-period-label] {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 6px 12px;
    border: 1px solid rgba(36, 116, 238, .2);
    border-radius: 999px;
    color: #0d3e91;
    background: #eef7ff;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

html body.teacher-reference-page .teacher-trend-controls {
    display: grid;
    grid-template-columns: auto minmax(150px, 1fr) auto;
    align-items: center;
    gap: 6px 12px;
    margin: -2px 0 8px;
    color: #183d86;
}

html body.teacher-reference-page .teacher-trend-controls label,
html body.teacher-reference-page .teacher-trend-controls output {
    font-size: 12px;
    font-weight: 900;
}

html body.teacher-reference-page .teacher-trend-controls output {
    min-width: 74px;
    text-align: right;
    color: #0d6efd;
}

html body.teacher-reference-page .teacher-trend-controls input[type="range"] {
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    accent-color: #1d64ff;
    cursor: pointer;
}

html body.teacher-reference-page .teacher-trend-controls input[type="range"]::-webkit-slider-runnable-track {
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg, #1d64ff, #22c7ff);
}

html body.teacher-reference-page .teacher-trend-controls input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    width: 28px;
    height: 28px;
    margin-top: 0;
    border: 4px solid #fff;
    border-radius: 50%;
    background: #0b57dc;
    box-shadow: 0 4px 12px rgba(13, 74, 176, .24);
    transform: translateY(-50%);
}

html body.teacher-reference-page .teacher-trend-controls input[type="range"]::-moz-range-thumb {
    box-sizing: border-box;
    width: 28px;
    height: 28px;
    border: 4px solid #fff;
    border-radius: 50%;
    background: #0b57dc;
    box-shadow: 0 4px 12px rgba(13, 74, 176, .24);
    transform: translateY(-50%);
}

html body.teacher-reference-page .teacher-trend-controls input[type="range"]::-moz-range-track {
    height: 8px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #1d64ff, #22c7ff);
}

html body.teacher-reference-page .teacher-trend-controls > div {
    grid-column: 2 / 3;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 4px;
    color: #6f86b2;
    font-size: 10px;
    font-weight: 900;
    text-align: center;
}

html body.teacher-reference-page .teacher-trend-empty {
    margin: 8px 0 0;
    padding: 10px 12px;
    border-radius: 12px;
    color: #526b99;
    background: #eef7ff;
    font-size: 13px;
    font-weight: 800;
}

html body.parent-profile-reference-page .parent-edit-child-page {
    width: min(1180px, calc(100% - 32px));
    min-width: 0;
}

html body.parent-profile-reference-page :where(
    .parent-edit-identity,
    .parent-premium-kpis,
    .parent-edit-panel,
    .parent-edit-tabs
) { min-width: 0; }

html body.parent-profile-reference-page .parent-edit-identity {
    display: grid;
    grid-template-columns: 132px minmax(190px, .8fr) minmax(0, 1.7fr);
    align-items: center;
    gap: 22px;
    padding: 24px;
}

html body.parent-profile-reference-page .parent-edit-identity__avatar,
html body.parent-profile-reference-page .parent-edit-identity__avatar img {
    width: 122px;
    height: 122px;
    max-width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    object-position: center;
}

html body.parent-profile-reference-page .parent-edit-identity__copy { min-width: 0; }
html body.parent-profile-reference-page .parent-edit-identity__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); min-width: 0; }
html body.parent-profile-reference-page .parent-edit-identity__stats > span { min-width: 0; }
html body.parent-profile-reference-page .parent-premium-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
html body.parent-profile-reference-page .parent-premium-kpis article { min-width: 0; }

html body.parent-profile-reference-page :where(.parent-edit-table-grid, .parent-edit-device-list) { min-width: 0; }
html body.parent-profile-reference-page .parent-edit-table-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

/* Roditeljski profil vise ne nasljeduje stari tamni uredjivacki izgled. */
html body.parent-profile-reference-page :where(.parent-edit-identity, .parent-edit-panel) {
    border: 1px solid #d5e5f8;
    color: #0b2678;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 14px 32px rgba(16, 70, 145, .11);
}

html body.parent-profile-reference-page .parent-edit-identity p:not(.eyebrow),
html body.parent-profile-reference-page :where(.parent-edit-section-heading p, .parent-edit-danger p, .parent-edit-empty) {
    color: #526b99;
}

html body.parent-profile-reference-page :where(.parent-edit-section-heading h2, .parent-edit-danger h2) { color: #0b2678; }

html body.parent-profile-reference-page .parent-edit-identity__stats span,
html body.parent-profile-reference-page .parent-edit-metrics article {
    border: 1px solid #d7e7fb;
    background: linear-gradient(180deg, #f7fbff, #edf6ff);
}

html body.parent-profile-reference-page .parent-edit-identity__stats strong,
html body.parent-profile-reference-page .parent-edit-metrics strong { color: #0b2678; }

html body.parent-profile-reference-page .parent-edit-identity__stats small,
html body.parent-profile-reference-page .parent-edit-metrics span { color: #58709f; }

html body.parent-profile-reference-page .parent-edit-tabs {
    border-color: #d5e5f8;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 9px 22px rgba(16, 70, 145, .09);
}

html body.parent-profile-reference-page .parent-edit-tabs a {
    color: #0b2678;
    background: #edf5ff;
}

html body.parent-profile-reference-page .parent-edit-tabs a:hover,
html body.parent-profile-reference-page .parent-edit-tabs a:focus-visible { color: #fff; background: #0869e9; }

html body.parent-profile-reference-page :where(.parent-edit-field, .parent-edit-field span, .parent-edit-avatar-picker legend) { color: #173878; }

html body.parent-profile-reference-page .parent-edit-field input:not([type="range"]),
html body.parent-profile-reference-page .parent-edit-field select {
    border-color: #c7dcf7;
    color: #0b2678;
    background: #fff;
}

html body.parent-profile-reference-page .parent-edit-readonly-metric {
    border-color: #bcead0;
    background: #effcf5;
}

html body.parent-profile-reference-page .parent-edit-readonly-metric span,
html body.parent-profile-reference-page .parent-edit-readonly-metric small { color: #40745a; }
html body.parent-profile-reference-page .parent-edit-readonly-metric strong { color: #15934b; }

html body.parent-profile-reference-page :where(.parent-edit-avatar-option, .parent-edit-photo-upload, .parent-edit-toggle, .parent-edit-id-card, .parent-edit-device) {
    border-color: #d2e4f8;
    background: #f7fbff;
}

html body.parent-profile-reference-page .parent-edit-avatar-option span,
html body.parent-profile-reference-page .parent-edit-toggle strong,
html body.parent-profile-reference-page .parent-edit-id-card strong,
html body.parent-profile-reference-page .parent-edit-device strong { color: #0b2678; }

html body.parent-profile-reference-page .parent-edit-toggle small,
html body.parent-profile-reference-page .parent-edit-id-card > span,
html body.parent-profile-reference-page .parent-edit-id-card small,
html body.parent-profile-reference-page .parent-edit-device span,
html body.parent-profile-reference-page .parent-edit-device small { color: #58709f; }

html body.parent-profile-reference-page .parent-edit-secondary-button,
html body.parent-profile-reference-page .parent-edit-link-button {
    border-color: #bad8fb;
    color: #0869e9;
    background: #eef7ff;
}

html body.parent-profile-reference-page .parent-edit-primary-button {
    background: linear-gradient(180deg, #13bdf5, #0869ef 52%, #0755df);
    box-shadow: 0 12px 26px rgba(7, 94, 242, .24);
}

html body.parent-profile-reference-page .parent-edit-id-card strong { font-size: clamp(1.7rem, 7vw, 3rem); }
html body.parent-profile-reference-page .parent-edit-mistakes { color: #315286; }
html body.parent-profile-reference-page .parent-edit-danger { background: #fff8f8; }

html body.parent-profile-reference-page .parent-edit-panel {
    border-color: #d5e5f8 !important;
    color: #0b2678 !important;
    background: #fff !important;
    box-shadow: 0 14px 32px rgba(16, 70, 145, .11) !important;
}
html body.parent-profile-reference-page .parent-edit-panel .eyebrow { color: #0869e9; }
html body.parent-profile-reference-page .parent-edit-panel :where(h2, h3, strong, label, legend) { color: #0b2678; }
html body.parent-profile-reference-page .parent-edit-panel :where(p, small, span) { color: #526b99; }
html body.parent-profile-reference-page .parent-edit-danger { background: #fff8f8 !important; }

@media (max-width: 920px) {
    html body.teacher-reference-page .teacher-app-header__profile { right: 24px; }
    html body.teacher-reference-page .teacher-summary-strip,
    html body.teacher-reference-page .teacher-class-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html body.teacher-reference-page .teacher-focus-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    html body.teacher-reference-page .teacher-dashboard-footer-grid,
    html body.teacher-reference-page .teacher-analysis-grid,
    html body.teacher-reference-page .teacher-analysis-grid--middle,
    html body.teacher-reference-page .teacher-analysis-grid--bottom { grid-template-columns: 1fr; }
    html body.teacher-reference-page .teacher-student-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html body.teacher-reference-page .teacher-student-overview > article:last-child { grid-column: 1 / -1; }
    html body.parent-profile-reference-page .parent-edit-identity { grid-template-columns: 110px minmax(0, 1fr); }
    html body.parent-profile-reference-page .parent-edit-identity__avatar,
    html body.parent-profile-reference-page .parent-edit-identity__avatar img { width: 100px; height: 100px; }
    html body.parent-profile-reference-page .parent-edit-identity__stats { grid-column: 1 / -1; }
    html body.parent-profile-reference-page .parent-premium-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    html body.teacher-reference-page .teacher-app-header { height: 138px; margin-bottom: 14px; }
    html body.teacher-reference-page .teacher-app-header__logo { top: 5px; width: 144px; height: 116px; }
    html body.teacher-reference-page .teacher-app-header__profile {
        top: 22px;
        right: 10px;
        display: flex !important;
        visibility: visible;
        gap: 6px;
        pointer-events: auto;
    }
    html body.teacher-reference-page .teacher-app-header__profile .teacher-avatar { width: 42px; height: 42px; }
    html body.teacher-reference-page .teacher-app-header__profile div { display: none; }
    html body.teacher-reference-page .arena-back-button {
        top: 22px !important;
        left: 10px !important;
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
    }
    html body.teacher-reference-page .teacher-content { padding-inline: 12px; }
    html body.teacher-reference-page .teacher-page-heading { gap: 12px; }
    html body.teacher-reference-page .teacher-page-heading h1,
    html body.teacher-reference-page .teacher-student-hero h1 { font-size: clamp(28px, 9vw, 38px); line-height: 1.08; }
    html body.teacher-reference-page .teacher-filter-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html body.teacher-reference-page .teacher-filter { width: 100%; min-width: 0; padding-inline: 12px; }
    html body.teacher-reference-page .teacher-summary-strip,
    html body.teacher-reference-page .teacher-class-kpis { grid-template-columns: 1fr; gap: 10px; }
    html body.teacher-reference-page .teacher-summary-card,
    html body.teacher-reference-page .teacher-kpi-card { min-height: 96px; padding: 14px 16px; }
    html body.teacher-reference-page .teacher-summary-card > :first-child,
    html body.teacher-reference-page .teacher-kpi-card > :first-child { width: 54px; height: 54px; flex-basis: 54px; }
    html body.teacher-reference-page .teacher-summary-card span,
    html body.teacher-reference-page .teacher-kpi-card span { font-size: 12px; }
    html body.teacher-reference-page .teacher-summary-card strong,
    html body.teacher-reference-page .teacher-kpi-card strong { font-size: 27px; line-height: 1.1; }
    html body.teacher-reference-dashboard .teacher-class-grid { grid-template-columns: 1fr; gap: 12px; }
    html body.teacher-reference-dashboard .teacher-class-card { min-height: 225px; padding: 14px; }
    html body.teacher-reference-dashboard .teacher-class-card__header { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 9px; min-height: 68px; }
    html body.teacher-reference-dashboard .teacher-school-mark { width: 54px; height: 54px; }
    html body.teacher-reference-dashboard .teacher-class-card__header h3 { font-size: 28px; }
    html body.teacher-reference-dashboard .teacher-status-img { grid-column: auto; height: 34px; margin: 0; }
    html body.teacher-reference-dashboard .teacher-class-card__stats { min-height: 66px; }
    html body.teacher-reference-dashboard .teacher-class-card__stats > div { display: grid; grid-template-columns: auto auto; }
    html body.teacher-reference-dashboard .teacher-class-card__stats img { width: 24px; height: 24px; }
    html body.teacher-reference-dashboard .teacher-class-card__stats strong { font-size: 19px; }
    html body.teacher-reference-dashboard .teacher-class-card__stats span { font-size: 10px; }
    html body.teacher-reference-dashboard .teacher-mini-line { height: 70px; }
    html body.teacher-reference-dashboard .teacher-mini-line > span { font-size: 11px; }
    html body.teacher-reference-dashboard .teacher-mini-line svg { height: 52px; }
    html body.teacher-reference-dashboard .teacher-mini-line b { font-size: 18px; }
    html body.teacher-reference-page .teacher-focus-grid { grid-template-columns: 1fr; gap: 9px; }
    html body.teacher-reference-page .teacher-focus-card { min-height: 82px; flex-direction: row; justify-content: flex-start; gap: 14px; padding: 11px 14px; text-align: left; }
    html body.teacher-reference-page .teacher-focus-card > :first-child { width: 52px; height: 52px; }
    html body.teacher-reference-page .teacher-focus-card strong { overflow: visible; font-size: 13px; white-space: normal; }
    html body.teacher-reference-page .teacher-focus-card b { font-size: 24px; }
    html body.teacher-reference-page .teacher-focus-card small { display: inline-block; font-size: 10px; }
    html body.teacher-reference-page .teacher-dashboard-footer-grid { grid-template-columns: 1fr; }
    html body.teacher-reference-page .teacher-quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    html body.teacher-reference-page .teacher-quick-actions a { min-height: 104px; font-size: 12px; }
    html body.teacher-reference-page .teacher-quick-actions img { width: 48px; height: 48px; }
    html body.teacher-reference-page .teacher-coach-card { min-height: 180px; }
    html body.teacher-reference-page .teacher-coach-card h2 { font-size: 18px; }
    html body.teacher-reference-page .teacher-coach-card p { font-size: 12px; }
    html body.teacher-reference-page .teacher-coach-card > img { right: -6px; bottom: -60px; width: 145px; }
    html body.teacher-reference-page .teacher-student-hero { grid-template-columns: 82px minmax(0, 1fr); gap: 12px; }
    html body.teacher-reference-page .teacher-avatar--large { width: 76px; height: 76px; padding: 3px; }
    html body.teacher-reference-page .teacher-student-hero .teacher-button { grid-column: 1 / -1; width: 100%; }
    html body.teacher-reference-page .teacher-student-overview { grid-template-columns: 1fr; }
    html body.teacher-reference-page .teacher-student-overview > article,
    html body.teacher-reference-page .teacher-student-overview > article:nth-child(2),
    html body.teacher-reference-page .teacher-student-overview > article:last-child {
        grid-column: auto;
        margin: 0;
        padding: 14px 0;
        border-right: 0;
        border-top: 1px solid var(--teacher-border);
    }
    html body.teacher-reference-page .teacher-student-overview > article:first-child { padding-top: 0; border-top: 0; }
    html body.teacher-reference-page .teacher-topic-cards { grid-template-columns: 1fr; }
    html body.teacher-reference-page .teacher-topic-card { min-height: 126px; grid-template-columns: 62px minmax(0, 1fr); }
    html body.teacher-reference-page .teacher-topic-card > :first-child { width: 54px; height: 54px; }
    html body.teacher-reference-page .teacher-recommendation-row {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 10px;
        padding: 12px 0;
    }
    html body.teacher-reference-page .teacher-recommendation-row .teacher-recommendation-badge { grid-column: 2; justify-self: start; }
    html body.teacher-reference-page .teacher-recommendation-row form { grid-column: 1 / -1; }
    html body.teacher-reference-page .teacher-recommendation-row button { width: 100%; }
    html body.teacher-reference-page .teacher-coach-card--student { min-height: 190px; justify-content: flex-end; }
    html body.teacher-reference-page .teacher-coach-card--student > img { bottom: -72px; left: -8px; width: 150px; height: 230px; }
    html body.teacher-reference-page .teacher-coach-card--student > div { width: calc(100% - 105px); margin-left: 105px; }
    html body.teacher-reference-page .teacher-coach-card--student h2 { font-size: 19px; }
    html body.teacher-reference-page .teacher-coach-card--student p { font-size: 12px; }

    html body.parent-profile-reference-page .parent-edit-child-page { width: min(100% - 16px, 600px); }
    html body.parent-profile-reference-page .parent-edit-identity { grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding: 16px; }
    html body.parent-profile-reference-page .parent-edit-identity__avatar,
    html body.parent-profile-reference-page .parent-edit-identity__avatar img { width: 72px; height: 72px; }
    html body.parent-profile-reference-page .parent-edit-identity__copy h1 { font-size: clamp(28px, 9vw, 38px); }
    html body.parent-profile-reference-page .parent-edit-identity__stats { grid-template-columns: 1fr; gap: 8px; }
    html body.parent-profile-reference-page .parent-edit-identity__stats > span { min-height: 74px; }
    html body.parent-profile-reference-page .parent-premium-kpis { grid-template-columns: 1fr; gap: 10px; }
    html body.parent-profile-reference-page .parent-premium-kpis article { min-height: 100px; }
    html body.parent-profile-reference-page .parent-edit-tabs { overflow-x: auto; justify-content: flex-start; }
    html body.parent-profile-reference-page .parent-edit-tabs a { flex: 0 0 auto; }
    html body.parent-profile-reference-page .parent-edit-panel { padding: 18px 14px; }
    html body.parent-profile-reference-page .parent-edit-device { grid-template-columns: minmax(0, 1fr); }
}

/* VF-T03: detalj učenika, kompaktni referentni raspored uz punu evidenciju u detalju. */
html body.teacher-reference-student .teacher-app-header { height: 148px; margin-bottom: 8px; }
html body.teacher-reference-student .teacher-app-header__logo { width: 178px; height: 140px; }
html body.teacher-reference-student .teacher-student-switcher { order: 90; margin-top: 18px; padding: 16px 20px; }
html body.teacher-reference-student .teacher-student-switcher summary { cursor: pointer; color: var(--teacher-text); font-weight: 800; }
html body.teacher-reference-student .teacher-student-switcher .teacher-class-context { margin: 18px 0 0; }
html body.teacher-reference-student .teacher-student-hero { min-height: 138px; margin-bottom: 16px; padding: 16px 20px; }
html body.teacher-reference-student .teacher-student-overview { min-height: 164px; margin-bottom: 16px; padding: 20px; }
html body.teacher-reference-student .teacher-improvement-panel,
html body.teacher-reference-student .teacher-student-progress-panel,
html body.teacher-reference-student .teacher-errors-panel,
html body.teacher-reference-student .teacher-recommendations-panel,
html body.teacher-reference-student .teacher-notes-panel { margin-bottom: 16px; padding: 18px 20px; }
html body.teacher-reference-student .teacher-topic-card { min-height: 154px; }
html body.teacher-reference-student .teacher-student-progress-panel { min-height: 218px; }
html body.teacher-reference-student .teacher-errors-panel { min-height: 210px; }
html body.teacher-reference-student .teacher-common-errors-scroll { width: 100%; overflow-x: auto; }
html body.teacher-reference-student .teacher-common-errors { width: 100%; min-width: 620px; border-collapse: collapse; }
html body.teacher-reference-student .teacher-common-errors th,
html body.teacher-reference-student .teacher-common-errors td { height: 40px; padding: 6px 14px; border: 1px solid var(--teacher-border); text-align: center; }
html body.teacher-reference-student .teacher-common-errors th { color: var(--teacher-body); font-size: 12px; }
html body.teacher-reference-student .teacher-common-errors td:first-child,
html body.teacher-reference-student .teacher-common-errors th:first-child { text-align: left; }
html body.teacher-reference-student .teacher-error-history-details { margin-top: 12px; }
html body.teacher-reference-student .teacher-error-history-details summary { cursor: pointer; color: var(--teacher-blue); font-size: 13px; font-weight: 800; }
html body.teacher-reference-student .teacher-error-history-details > p { color: var(--teacher-muted); font-size: 12px; }
html body.teacher-reference-student .teacher-coach-card--student { min-height: 150px; }

@media (max-width: 640px) {
    html body.teacher-reference-student .teacher-student-hero { grid-template-columns: 82px minmax(0, 1fr); }
    html body.teacher-reference-student .teacher-student-overview { grid-template-columns: 1fr; }
    html body.teacher-reference-student .teacher-common-errors { min-width: 560px; }
    html body.teacher-reference-student .teacher-coach-card--student { min-height: 190px; }
}

@media (max-width: 360px) {
    html body.teacher-reference-page .teacher-app-header__logo { width: 126px; }
    html body.teacher-reference-page .teacher-filter-group { grid-template-columns: 1fr; }
    html body.teacher-reference-dashboard .teacher-class-card__header { grid-template-columns: 48px minmax(0, 1fr); }
    html body.teacher-reference-dashboard .teacher-status-img { grid-column: 1 / -1; justify-self: start; height: 30px; }
    html body.teacher-reference-page .teacher-class-card__stats { grid-template-columns: 1fr; padding-block: 6px; }
    html body.teacher-reference-page .teacher-class-card__stats > div { min-height: 38px; border-right: 0; border-bottom: 1px solid var(--teacher-border); }
    html body.teacher-reference-page .teacher-class-card__stats > div:last-child { border-bottom: 0; }
}

/* VISUAL-FIDELITY-039 / Parent reference screen */
html body.parent-profile-reference-page {
    overflow-x: hidden;
    background: linear-gradient(180deg, #eef8ff 0, #fff 310px);
    color: #092670;
}
html body.parent-profile-reference-page .parent-topbar {
    position: relative; width: min(100%, 941px); height: 148px; min-height: 148px; margin: 0 auto 16px;
    padding: 0; overflow: visible; border: 0; border-radius: 0 0 38px 38px;
    background:
        radial-gradient(circle at 17% 45%, rgba(29, 187, 255, .55) 0 4px, transparent 5px),
        radial-gradient(circle at 78% 42%, rgba(166, 92, 255, .48) 0 6px, transparent 7px),
        linear-gradient(135deg, #061d78, #0053d3 58%, #0735a8);
    box-shadow: 0 12px 28px rgba(5, 56, 141, .16);
}
html body.parent-profile-reference-page .parent-topbar::after {
    content: ""; position: absolute; z-index: 0; right: 0; bottom: -1px; left: 0; height: 28px;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0; background: #f6fbff;
    transform: translateY(16px) scaleX(1.04);
}
html body.parent-profile-reference-page .parent-topbar .parent-header-mentor { display: none !important; }
html body.parent-profile-reference-page .parent-topbar .brand {
    position: absolute; z-index: 2; top: 2px; left: 50%; display: block; width: 220px; height: 138px;
    margin: 0; padding: 0; transform: translateX(-50%); background: transparent;
}
html body.parent-profile-reference-page .parent-topbar .brand > span { display: none; }
html body.parent-profile-reference-page .parent-topbar .parent-brand-logo {
    display: block; width: 100%; height: 100%; object-fit: contain; object-position: center;
}
html body.parent-profile-reference-page .parent-topbar .context-back-button {
    position: absolute; z-index: 3; top: 28px; left: 20px; display: grid; width: 66px; height: 66px;
    padding: 0; place-items: center; border: 0; background: transparent; box-shadow: none;
}
html body.parent-profile-reference-page .parent-topbar .context-back-button img {
    display: block; width: 66px; height: 66px; object-fit: contain;
}
html body.parent-profile-reference-page .parent-topbar .parent-pill {
    position: absolute; z-index: 3; top: 24px; right: 86px; display: flex; width: auto; max-width: 230px;
    height: 66px; margin: 0; padding: 5px 14px 5px 5px; align-items: center; gap: 10px;
    border: 1px solid rgba(255,255,255,.34); border-radius: 34px; background: rgba(8, 45, 139, .42);
    color: #fff;
}
html body.parent-profile-reference-page .parent-topbar .parent-pill .topbar-profile-photo {
    width: 54px; height: 54px; min-width: 54px; object-fit: cover; object-position: center; border: 3px solid #fff; border-radius: 50%;
}
html body.parent-profile-reference-page .parent-topbar .parent-pill > span {
    display: grid; min-width: 0; color: #fff; line-height: 1.15;
}
html body.parent-profile-reference-page .parent-topbar .parent-pill strong,
html body.parent-profile-reference-page .parent-topbar .parent-pill small { overflow: hidden; color: #fff; text-overflow: ellipsis; white-space: nowrap; }
html body.parent-profile-reference-page .parent-topbar .parent-pill strong { font-size: 16px; }
html body.parent-profile-reference-page .parent-topbar .parent-pill small { margin-top: 4px; font-size: 12px; font-weight: 600; }
html body.parent-profile-reference-page .parent-topbar .nav-actions {
    position: absolute; z-index: 4; top: 28px; right: 18px; display: block; width: 58px; height: 58px; margin: 0; overflow: hidden;
}
html body.parent-profile-reference-page .parent-topbar .nav-actions a:not([data-notification-nav]) { display: none !important; }
html body.parent-profile-reference-page .parent-topbar .parent-premium-notification,
html body.parent-profile-reference-page .parent-topbar .parent-premium-notification img {
    display: block; width: 58px; height: 58px; min-width: 58px; object-fit: contain;
}

html body.parent-profile-reference-page .parent-edit-child-page {
    display: flex; width: min(calc(100% - 32px), 885px); max-width: 885px; margin: 0 auto; padding: 0 0 96px;
    flex-direction: column; gap: 14px;
}
html body.parent-profile-reference-page .app-page.parent-page.parent-edit-child-page {
    width: min(calc(100% - 32px), 885px); margin: 18px auto 0 !important; padding-top: 0;
}
html body.parent-profile-reference-page .parent-edit-child-page > :where(section, nav, details, aside, .form-message) { margin: 0; }
html body.parent-profile-reference-page .parent-reference-heading {
    display: flex; min-height: 84px; padding: 0 14px; align-items: center; justify-content: space-between; gap: 18px;
}
html body.parent-profile-reference-page .parent-reference-heading h1 { margin: 0; color: #0a2474; font-size: 40px; line-height: 1; }
html body.parent-profile-reference-page .parent-reference-heading p { margin: 8px 0 0; color: #35589a; font-size: 18px; }
html body.parent-profile-reference-page .parent-reference-heading form { min-width: 250px; }
html body.parent-profile-reference-page .parent-child-picker {
    display: grid; min-height: 58px; padding: 5px 16px 5px 6px; grid-template-columns: 44px minmax(0, 1fr);
    align-items: center; gap: 10px; border: 1px solid #c8ddf7; border-radius: 30px; background: #fff;
    box-shadow: 0 5px 12px rgba(23, 83, 157, .12);
}
html body.parent-profile-reference-page .parent-child-picker__avatar { width: 44px; height: 44px; object-fit: cover; border-radius: 50%; }
html body.parent-profile-reference-page .parent-child-picker select {
    width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: #092670; font: inherit; font-weight: 800;
}

html body.parent-profile-reference-page .parent-reference-hero,
html body.parent-profile-reference-page .parent-reference-panel,
html body.parent-profile-reference-page .parent-reference-coach,
html body.parent-profile-reference-page .parent-management-details {
    min-width: 0; border: 1px solid #d6e7f8; border-radius: 22px; background: rgba(255,255,255,.97);
    box-shadow: 0 5px 16px rgba(17, 77, 146, .10);
}
html body.parent-profile-reference-page .parent-reference-hero { display: grid; min-height: 224px; padding: 20px; grid-template-columns: 270px minmax(0, 1fr); gap: 16px; }
html body.parent-profile-reference-page .parent-reference-hero__identity {
    display: grid; min-width: 0; grid-template-columns: 128px minmax(0, 1fr); align-items: center; gap: 14px;
}
html body.parent-profile-reference-page .parent-reference-avatar {
    display: block; width: 128px; height: 128px; object-fit: cover; object-position: center; border: 4px solid #64d4f4;
    border-radius: 50%; box-shadow: 0 5px 14px rgba(13, 89, 163, .17);
}
html body.parent-profile-reference-page .parent-reference-hero__identity h2 { margin: 0 0 7px; color: #0b2777; font-size: 28px; line-height: 1.05; overflow-wrap: anywhere; }
html body.parent-profile-reference-page .parent-reference-hero__identity p { margin: 0; color: #1f5cbd; font-weight: 800; }
html body.parent-profile-reference-page .parent-reference-hero__metrics {
    display: grid; min-width: 0; grid-template-columns: repeat(3, minmax(0, 1fr)) 164px; align-items: stretch;
    border-left: 1px solid #dce9f7;
}
html body.parent-profile-reference-page .parent-reference-hero__metrics > article { min-width: 0; padding: 12px 14px; border-right: 1px solid #dce9f7; }
html body.parent-profile-reference-page .parent-reference-hero__metrics span { display: block; color: #153a85; font-size: 12px; font-weight: 800; }
html body.parent-profile-reference-page .parent-reference-hero__metrics article > div { display: flex; min-height: 58px; align-items: center; gap: 8px; }
html body.parent-profile-reference-page .parent-reference-hero__metrics article img { width: 42px; height: 42px; object-fit: contain; }
html body.parent-profile-reference-page .parent-reference-hero__metrics article strong { color: #092670; font-size: 32px; line-height: 1; }
html body.parent-profile-reference-page .parent-reference-hero__metrics article small { display: block; color: #15934b; font-size: 10px; line-height: 1.35; }
html body.parent-profile-reference-page .parent-reference-ring {
    display: block; width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%;
    background: conic-gradient(#27ba62 calc(var(--value) * 1%), #e9eef5 0); position: relative;
}
html body.parent-profile-reference-page .parent-reference-ring::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #fff; }
html body.parent-profile-reference-page .parent-reference-weekly svg { display: block; width: 100%; height: 52px; margin-top: 4px; overflow: visible; }
html body.parent-profile-reference-page :where(.parent-reference-weekly, .parent-reference-chart) svg polyline { fill: none; stroke: #13a548; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
html body.parent-profile-reference-page :where(.parent-reference-weekly, .parent-reference-chart) svg circle { fill: #fff; stroke: #13a548; stroke-width: 4; vector-effect: non-scaling-stroke; }
html body.parent-profile-reference-page .parent-reference-hero__metrics aside { min-width: 0; margin: 8px; padding: 14px; align-self: stretch; border: 1px solid #ccebd8; border-radius: 14px; background: #effbf4; }
html body.parent-profile-reference-page .parent-reference-hero__metrics aside strong { color: #15934b; font-size: 13px; }
html body.parent-profile-reference-page .parent-reference-hero__metrics aside p { margin: 12px 0 0; color: #17428b; font-size: 11px; line-height: 1.5; }

html body.parent-profile-reference-page .parent-premium-kpis { display: grid; margin: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
html body.parent-profile-reference-page .parent-premium-kpis article { min-height: 138px; padding: 15px 12px; gap: 10px; border: 1px solid #d6e7f8; border-radius: 20px; background: #fff; }
html body.parent-profile-reference-page .parent-premium-kpis article img { width: 58px; height: 58px; flex: 0 0 58px; object-fit: contain; }
html body.parent-profile-reference-page .parent-premium-kpis article > div { min-width: 0; }
html body.parent-profile-reference-page .parent-premium-kpis article span { color: #183d86; font-size: 12px; }
html body.parent-profile-reference-page .parent-premium-kpis article strong { color: #092670; font-size: 32px; }
html body.parent-profile-reference-page .parent-premium-kpis article small { color: #3159a0; font-size: 10px; }

html body.parent-profile-reference-page .parent-reference-panel { padding: 16px; }
html body.parent-profile-reference-page .parent-reference-panel > header { display: flex; min-width: 0; margin-bottom: 12px; align-items: center; justify-content: space-between; gap: 12px; }
html body.parent-profile-reference-page .parent-reference-panel h2 { margin: 0; color: #0a287a; font-size: 22px; }
html body.parent-profile-reference-page .parent-reference-panel > header > span { padding: 8px 14px; border: 1px solid #d3e4f7; border-radius: 12px; color: #0b66d9; font-size: 12px; }
html body.parent-profile-reference-page .parent-reference-chart { position: relative; min-width: 0; height: 178px; padding: 0 0 24px 46px; }
html body.parent-profile-reference-page .parent-reference-chart svg { display: block; width: 100%; height: 150px; overflow: visible; }
html body.parent-profile-reference-page .parent-reference-chart svg polyline { stroke: #1277ee; }
html body.parent-profile-reference-page .parent-reference-chart svg circle { stroke: #1277ee; fill: #1277ee; }
html body.parent-profile-reference-page .parent-reference-axis { position: absolute; top: 0; bottom: 28px; left: 0; display: flex; flex-direction: column; justify-content: space-between; color: #45649b; font-size: 10px; }
html body.parent-profile-reference-page .parent-reference-chart__labels { display: grid; grid-template-columns: repeat(8, minmax(0,1fr)); color: #32589b; font-size: 10px; text-align: center; }

html body.parent-profile-reference-page .parent-reference-focus__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
html body.parent-profile-reference-page .parent-reference-focus article { min-width: 0; padding: 12px 10px; border: 1px solid #e0ebf7; border-radius: 16px; text-align: center; }
html body.parent-profile-reference-page .parent-focus-icon { display: grid; width: 48px; height: 48px; margin: 0 auto 8px; place-items: center; border-radius: 50%; background: #12b85d; color: #fff; font-size: 18px; font-style: normal; font-weight: 900; }
html body.parent-profile-reference-page .parent-focus-icon--2 { background: #ff8a16; } html body.parent-profile-reference-page .parent-focus-icon--3 { background: #9342df; } html body.parent-profile-reference-page .parent-focus-icon--4 { background: #ffb013; } html body.parent-profile-reference-page .parent-focus-icon--5 { background: #11bfc2; }
html body.parent-profile-reference-page .parent-reference-focus article span,
html body.parent-profile-reference-page .parent-reference-focus article strong,
html body.parent-profile-reference-page .parent-reference-focus article small { display: block; }
html body.parent-profile-reference-page .parent-reference-focus article span { min-height: 30px; color: #183d86; font-size: 11px; font-weight: 800; }
html body.parent-profile-reference-page .parent-reference-focus article strong { margin: 2px 0 8px; font-size: 26px; }
html body.parent-profile-reference-page .parent-reference-focus article b { display: block; height: 7px; overflow: hidden; border-radius: 5px; background: #e9eef5; }
html body.parent-profile-reference-page .parent-reference-focus article em { display: block; height: 100%; border-radius: inherit; background: #12b85d; }
html body.parent-profile-reference-page .parent-reference-focus article small { margin-top: 8px; color: #5170a5; font-size: 10px; }

html body.parent-profile-reference-page .parent-reference-table-scroll { max-width: 100%; overflow-x: auto; border: 1px solid #dce9f7; border-radius: 14px; }
html body.parent-profile-reference-page .parent-reference-errors table { width: 100%; min-width: 600px; border-collapse: collapse; }
html body.parent-profile-reference-page .parent-reference-errors th,
html body.parent-profile-reference-page .parent-reference-errors td { padding: 9px 14px; border-bottom: 1px solid #e2edf8; color: #12377d; text-align: center; }
html body.parent-profile-reference-page .parent-reference-errors th:first-child,
html body.parent-profile-reference-page .parent-reference-errors td:first-child { text-align: left; }
html body.parent-profile-reference-page .parent-reference-errors tr:last-child td { border-bottom: 0; }
html body.parent-profile-reference-page .parent-reference-errors .is-wrong,
html body.parent-profile-reference-page .parent-reference-errors .is-correct { display: inline-block; min-width: 48px; padding: 4px 8px; border-radius: 8px; }
html body.parent-profile-reference-page .parent-reference-errors .is-wrong { background: #ffebed; color: #ef3340; }
html body.parent-profile-reference-page .parent-reference-errors .is-correct { background: #e9f8eb; color: #15934b; }
html body.parent-profile-reference-page .parent-reference-empty { margin: 8px 0; color: #58709f; }

html body.parent-profile-reference-page .parent-reference-recommendations > div { display: grid; gap: 6px; }
html body.parent-profile-reference-page .parent-reference-recommendations article { display: grid; min-width: 0; min-height: 64px; padding: 8px; grid-template-columns: 48px minmax(0,1fr) auto 128px; align-items: center; gap: 10px; border-bottom: 1px solid #e5edf6; }
html body.parent-profile-reference-page .parent-reference-recommendations article:last-child { border-bottom: 0; }
html body.parent-profile-reference-page .parent-reference-recommendations article > i { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 50%; background: #9342df; color: #fff; font-style: normal; font-weight: 900; }
html body.parent-profile-reference-page .parent-reference-recommendations article > span { min-width: 0; }
html body.parent-profile-reference-page .parent-reference-recommendations strong,
html body.parent-profile-reference-page .parent-reference-recommendations small { display: block; overflow-wrap: anywhere; }
html body.parent-profile-reference-page .parent-reference-recommendations strong { color: #153a85; }
html body.parent-profile-reference-page .parent-reference-recommendations small { color: #56709d; }
html body.parent-profile-reference-page .parent-reference-recommendations article > b { padding: 6px 10px; border-radius: 15px; background: #fff0f1; color: #ee3b45; font-size: 11px; white-space: nowrap; }
html body.parent-profile-reference-page .parent-reference-recommendations article > a { padding: 10px 14px; border-radius: 10px; background: linear-gradient(180deg,#19a4ff,#095ce4); color: #fff; font-weight: 800; text-align: center; text-decoration: none; }

html body.parent-profile-reference-page .parent-reference-coach { position: relative; display: flex; min-height: 170px; padding: 24px 24px 20px 250px; align-items: center; background: linear-gradient(135deg,#e8f7ff,#f5fbff); overflow: hidden; }
html body.parent-profile-reference-page .parent-reference-coach img { position: absolute; bottom: -45px; left: 54px; width: 170px; height: 245px; object-fit: contain; object-position: center bottom; }
html body.parent-profile-reference-page .parent-reference-coach h2 { margin: 0 0 8px; color: #0b2878; }
html body.parent-profile-reference-page .parent-reference-coach p { margin: 0; color: #234b91; line-height: 1.55; }

html body.parent-profile-reference-page .parent-management-details { padding: 14px; }
html body.parent-profile-reference-page .parent-management-details > summary { padding: 12px 14px; cursor: pointer; color: #0b62d5; font-weight: 900; }
html body.parent-profile-reference-page .parent-management-details:not([open]) > :not(summary) { display: none !important; }
html body.parent-profile-reference-page .parent-management-details[open] > summary { margin-bottom: 12px; border-bottom: 1px solid #dce9f7; }
html body.parent-profile-reference-page .parent-edit-tabs { margin: 0 0 12px; }
html body.parent-profile-reference-page .parent-edit-avatar-option { position: relative; overflow: hidden; }
html body.parent-profile-reference-page .parent-edit-avatar-option > input[type="radio"] {
    position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer;
}
html body.parent-profile-reference-page .parent-edit-bottom-nav,
html body.parent-profile-reference-page .parent-bottom-nav { border: 1px solid #d4e8fb; background: rgba(255,255,255,.96); box-shadow: 0 -6px 22px rgba(22, 80, 145, .12); }
html body.parent-profile-reference-page .parent-edit-bottom-nav a,
html body.parent-profile-reference-page .parent-bottom-nav a { color: #1d58ac; }

html body.parent-profile-reference-page .app-page.parent-page.parent-premium:not(.parent-onboarding) {
    display: flex; width: min(calc(100% - 32px), 885px); margin: 18px auto 0 !important; padding: 0 0 96px;
    flex-direction: column; gap: 18px;
}
html body.parent-profile-reference-page .parent-premium:not(.parent-onboarding) > :where(section, nav, details, aside, .form-message) { margin: 0; }
html body.parent-profile-reference-page .parent-dashboard-intro { order: 10; min-height: 138px; padding: 26px 28px; border-radius: 22px; }
html body.parent-profile-reference-page .parent-dashboard-intro h1 { font-size: 40px; }
html body.parent-profile-reference-page .parent-dashboard-intro .eyebrow { color: #0869e9; text-shadow: none; }
html body.parent-profile-reference-page .parent-children-heading { order: 20; }
html body.parent-profile-reference-page .parent-children-primary { order: 30; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
html body.parent-profile-reference-page .parent-children-primary .parent-featured-child { min-width: 0; min-height: 260px; padding: 18px; border-radius: 22px; }
html body.parent-profile-reference-page .parent-children-primary .child-card-heading { min-width: 0; }
html body.parent-profile-reference-page .parent-children-primary .child-card-heading > div { min-width: 0; }
html body.parent-profile-reference-page .parent-children-primary .child-card-heading h2 { overflow-wrap: anywhere; }
html body.parent-profile-reference-page .parent-children-primary .child-card-photo { width: 78px; height: 78px; flex: 0 0 78px; object-fit: cover; object-position: center; border-radius: 50%; }
html body.parent-profile-reference-page .parent-action-grid { order: 40; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
html body.parent-profile-reference-page .parent-action-grid a { min-width: 0; min-height: 154px; padding: 16px 10px; overflow: hidden; }
html body.parent-profile-reference-page .parent-action-grid img { display: block; width: 58px; height: 58px; object-fit: contain; }
html body.parent-profile-reference-page .parent-action-grid :where(strong,span) { overflow-wrap: anywhere; }
html body.parent-profile-reference-page .parent-claims-preview { order: 50; }
html body.parent-profile-reference-page .parent-dashboard-coach {
    position: relative; order: 60; min-height: 190px; padding: 28px 260px 26px 28px; overflow: hidden;
    border: 1px solid #cde5fb; border-radius: 22px; background: linear-gradient(135deg,#effaff,#e0f4ff); box-shadow: 0 8px 22px rgba(20,78,145,.12);
}
html body.parent-profile-reference-page .parent-dashboard-coach img { position: absolute; right: 30px; bottom: -60px; width: 200px; height: 288px; object-fit: contain; object-position: center bottom; }
html body.parent-profile-reference-page .parent-dashboard-coach h2 { margin: 0 0 10px; color: #0a287a; }
html body.parent-profile-reference-page .parent-dashboard-coach p { margin: 0; color: #294e8f; line-height: 1.55; }
html body.parent-profile-reference-page .parent-dashboard-profile-settings { order: 70; padding: 14px; border: 1px solid #d5e6f8; border-radius: 18px; background: #fff; }
html body.parent-profile-reference-page .parent-dashboard-profile-settings > summary { padding: 10px 12px; cursor: pointer; color: #1767cd; font-weight: 900; }
html body.parent-profile-reference-page .parent-dashboard-profile-settings .parent-photo-panel { display: flex; padding: 14px; align-items: center; gap: 16px; flex-wrap: wrap; }
html body.parent-profile-reference-page .parent-dashboard-profile-settings .hero-profile-photo { width: 76px; height: 76px; object-fit: cover; border-radius: 50%; }
html body.parent-profile-reference-page .parent-bottom-nav { order: 80; }

/* Roditeljske nagrade ostaju funkcionalne, ali više ne koriste stari tamni panel. */
html body.parent-profile-reference-page .parent-rewards-management:not(.parent-onboarding) {
    display: block; width: min(calc(100% - 32px),885px); margin: 18px auto 0 !important; padding: 0 0 70px;
    color: #173878; background: transparent;
}
html body.parent-profile-reference-page .parent-rewards-management :where(.profile-hero.compact,.panel,.reward-level-card,.parent-reward-summary-card,.parent-reward-card) {
    color: #173878; border: 1px solid #d5e6f8; background: #fff !important; box-shadow: 0 7px 20px rgba(20,78,145,.10);
}
html body.parent-profile-reference-page .parent-rewards-management .profile-hero.compact {
    position: relative; display: grid; min-height: 214px; margin: 0 0 16px; padding: 26px 230px 26px 28px;
    align-items: center; border-radius: 22px; overflow: hidden;
}
html body.parent-profile-reference-page .parent-rewards-management .profile-hero.compact::before,
html body.parent-profile-reference-page .parent-rewards-management .profile-hero.compact::after { display: none !important; content: none !important; }
html body.parent-profile-reference-page .parent-rewards-management .profile-hero.compact :where(h1,h2,strong) { color: #0a287a; }
html body.parent-profile-reference-page .parent-rewards-management .profile-hero.compact h1 { margin: 5px 0 10px; font-size: 38px; line-height: 1.05; }
html body.parent-profile-reference-page .parent-rewards-management .profile-hero.compact p { margin: 6px 0; color: #365b98; line-height: 1.45; }
html body.parent-profile-reference-page .parent-rewards-management .profile-hero.compact .eyebrow { color: #0869e9; text-shadow: none; }
html body.parent-profile-reference-page .parent-rewards-management .parent-rewards-hero-chest {
    position: absolute; right: 34px; bottom: 18px; display: block; width: 170px; height: 150px; object-fit: contain;
}
html body.parent-profile-reference-page .parent-reward-summary-grid { display: grid; margin: 0 0 16px; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
html body.parent-profile-reference-page .parent-reward-summary-card { min-width: 0; min-height: 132px; padding: 14px 10px; border-radius: 18px; text-align: center; text-decoration: none; }
html body.parent-profile-reference-page .parent-reward-summary-card img { display: block; width: 48px; height: 48px; margin: 0 auto 6px; object-fit: contain; }
html body.parent-profile-reference-page .parent-reward-summary-card :where(strong,span) { display: block; color: #173878; }
html body.parent-profile-reference-page .parent-reward-summary-card strong { font-size: 28px; }
html body.parent-profile-reference-page .reward-level-guide { display: grid; margin: 0 0 16px; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
html body.parent-profile-reference-page .reward-level-card { min-width: 0; min-height: 230px; padding: 18px; border-radius: 20px; }
html body.parent-profile-reference-page .reward-level-card :where(h2,strong,span) { color: #173878; }
html body.parent-profile-reference-page .reward-level-card :where(p,small) { color: #58709f; }
html body.parent-profile-reference-page .parent-rewards-management .two-column { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
html body.parent-profile-reference-page .parent-rewards-management .two-column > * { min-width: 0; }
html body.parent-profile-reference-page .parent-rewards-management :where(.parent-custom-reward,.parent-owned-rewards,.two-column > .panel) { padding: 20px; border-radius: 20px; }
html body.parent-profile-reference-page .parent-rewards-management :where(h1,h2,h3,summary,label,legend,dt,dd,strong) { color: #173878; }
html body.parent-profile-reference-page .parent-rewards-management :where(p,small,span,.muted) { color: #58709f; }
html body.parent-profile-reference-page .parent-rewards-management :where(input,select,textarea) {
    max-width: 100%; color: #173878; border-color: #ccdef2; background: #fff;
}
html body.parent-profile-reference-page .parent-owned-rewards { margin-top: 16px; }
html body.parent-profile-reference-page .parent-reward-filter-bar { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
html body.parent-profile-reference-page .parent-reward-card-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
html body.parent-profile-reference-page .parent-reward-card { min-width: 0; overflow: hidden; border-radius: 18px; }

@media (min-width: 641px) {
    html body.parent-profile-reference-page .parent-edit-bottom-nav,
    html body.parent-profile-reference-page .parent-bottom-nav { display: none; }
}

@media (max-width: 820px) {
    html body.parent-profile-reference-page .parent-reference-hero { grid-template-columns: 1fr; }
    html body.parent-profile-reference-page .parent-reference-hero__identity { grid-template-columns: 104px minmax(0, 1fr); }
    html body.parent-profile-reference-page .parent-reference-avatar { width: 104px; height: 104px; }
    html body.parent-profile-reference-page .parent-reference-hero__metrics { border-top: 1px solid #dce9f7; border-left: 0; }
    html body.parent-profile-reference-page .parent-reference-focus__grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

@media (max-width: 640px) {
    html body.parent-profile-reference-page .parent-topbar { height: 132px; min-height: 132px; margin-bottom: 14px; }
    html body.parent-profile-reference-page .parent-topbar .brand { top: 6px; width: 150px; height: 116px; }
    html body.parent-profile-reference-page .parent-topbar .context-back-button,
    html body.parent-profile-reference-page .parent-topbar .context-back-button img { width: 54px; height: 54px; }
    html body.parent-profile-reference-page .parent-topbar .context-back-button { top: 24px; left: 10px; }
    html body.parent-profile-reference-page .parent-topbar .parent-pill { top: 24px; right: 68px; width: 48px; height: 48px; padding: 2px; border: 0; background: transparent; }
    html body.parent-profile-reference-page .parent-topbar .parent-pill .topbar-profile-photo { width: 46px; height: 46px; min-width: 46px; }
    html body.parent-profile-reference-page .parent-topbar .parent-pill > span { display: none; }
    html body.parent-profile-reference-page .parent-topbar .nav-actions { top: 24px; right: 7px; width: 52px; height: 52px; overflow: hidden; }
    html body.parent-profile-reference-page .parent-topbar .parent-premium-notification,
    html body.parent-profile-reference-page .parent-topbar .parent-premium-notification img { width: 52px; height: 52px; min-width: 52px; }
    html body.parent-profile-reference-page .parent-edit-child-page { width: min(calc(100% - 16px), 600px); padding-bottom: 104px; gap: 10px; }
    html body.parent-profile-reference-page .parent-reference-heading { min-height: 126px; padding: 8px; align-items: stretch; flex-direction: column; justify-content: center; gap: 12px; }
    html body.parent-profile-reference-page .parent-reference-heading h1 { font-size: clamp(30px, 9vw, 38px); }
    html body.parent-profile-reference-page .parent-reference-heading p { font-size: 15px; }
    html body.parent-profile-reference-page .parent-reference-heading form { width: 100%; min-width: 0; }
    html body.parent-profile-reference-page .parent-reference-hero { padding: 14px; }
    html body.parent-profile-reference-page .parent-reference-hero__identity { grid-template-columns: 78px minmax(0, 1fr); }
    html body.parent-profile-reference-page .parent-reference-avatar { width: 78px; height: 78px; border-width: 3px; }
    html body.parent-profile-reference-page .parent-reference-hero__identity h2 { font-size: 24px; }
    html body.parent-profile-reference-page .parent-reference-hero__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html body.parent-profile-reference-page .parent-reference-hero__metrics > article { min-height: 125px; border-bottom: 1px solid #dce9f7; }
    html body.parent-profile-reference-page .parent-reference-hero__metrics > article:nth-child(2n) { border-right: 0; }
    html body.parent-profile-reference-page .parent-reference-hero__metrics aside { grid-column: 1 / -1; min-height: 90px; }
    html body.parent-profile-reference-page .parent-premium-kpis { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
    html body.parent-profile-reference-page .parent-premium-kpis article { min-height: 132px; padding: 10px 8px; align-items: center; flex-direction: column; justify-content: center; text-align: center; }
    html body.parent-profile-reference-page .parent-premium-kpis article img { width: 48px; height: 48px; flex-basis: 48px; }
    html body.parent-profile-reference-page .parent-premium-kpis article span { font-size: 10px; }
    html body.parent-profile-reference-page .parent-premium-kpis article strong { font-size: 26px; }
    html body.parent-profile-reference-page .parent-reference-panel { padding: 14px 10px; }
    html body.parent-profile-reference-page .parent-reference-panel h2 { font-size: 20px; }
    html body.parent-profile-reference-page .parent-reference-progress > header { align-items: flex-start; flex-direction: column; }
    html body.parent-profile-reference-page .parent-reference-chart { height: 190px; padding-left: 38px; overflow-x: auto; }
    html body.parent-profile-reference-page .parent-reference-chart svg,
    html body.parent-profile-reference-page .parent-reference-chart__labels { width: 560px; min-width: 560px; }
    html body.parent-profile-reference-page .parent-reference-focus__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    html body.parent-profile-reference-page .parent-reference-recommendations article { grid-template-columns: 44px minmax(0,1fr); }
    html body.parent-profile-reference-page .parent-reference-recommendations article > b,
    html body.parent-profile-reference-page .parent-reference-recommendations article > a { grid-column: 2; justify-self: stretch; white-space: normal; }
    html body.parent-profile-reference-page .parent-reference-coach { min-height: 210px; padding: 20px 16px 20px 142px; }
    html body.parent-profile-reference-page .parent-reference-coach img { bottom: -28px; left: 2px; width: 136px; height: 196px; }
    html body.parent-profile-reference-page .parent-reference-coach h2 { font-size: 20px; }
    html body.parent-profile-reference-page .parent-reference-coach p { font-size: 13px; }
    html body.parent-profile-reference-page .app-page.parent-page.parent-premium:not(.parent-onboarding) { width: min(calc(100% - 16px),600px); padding-bottom: 104px; gap: 12px; }
    html body.parent-profile-reference-page .parent-dashboard-intro { min-height: 170px; padding: 20px 16px; align-items: flex-start; flex-direction: column; }
    html body.parent-profile-reference-page .parent-dashboard-intro h1 { font-size: clamp(32px,10vw,40px); }
    html body.parent-profile-reference-page .parent-children-primary { grid-template-columns: 1fr; }
    html body.parent-profile-reference-page .parent-action-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
    html body.parent-profile-reference-page .parent-action-grid a { min-height: 130px; }
    html body.parent-profile-reference-page .parent-dashboard-coach { min-height: 210px; padding: 22px 132px 20px 16px; }
    html body.parent-profile-reference-page .parent-dashboard-coach img { right: -8px; bottom: -44px; width: 140px; height: 205px; }
    html body.parent-profile-reference-page .parent-dashboard-coach h2 { font-size: 20px; }
    html body.parent-profile-reference-page .parent-dashboard-coach p { font-size: 13px; }
    html body.parent-profile-reference-page .parent-rewards-management:not(.parent-onboarding) { width: min(calc(100% - 16px),600px); padding-bottom: 90px; }
    html body.parent-profile-reference-page .parent-rewards-management .profile-hero.compact { min-height: 250px; padding: 22px 120px 22px 16px; }
    html body.parent-profile-reference-page .parent-rewards-management .profile-hero.compact h1 { font-size: 30px; }
    html body.parent-profile-reference-page .parent-rewards-management .profile-hero.compact p { font-size: 13px; }
    html body.parent-profile-reference-page .parent-rewards-management .parent-rewards-hero-chest { right: 4px; bottom: 30px; width: 112px; height: 100px; }
    html body.parent-profile-reference-page .parent-reward-summary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
    html body.parent-profile-reference-page .reward-level-guide,
    html body.parent-profile-reference-page .parent-rewards-management .two-column,
    html body.parent-profile-reference-page .parent-reward-card-grid { grid-template-columns: 1fr; }
    html body.parent-profile-reference-page .parent-reward-filter-bar { grid-template-columns: 1fr; }
}

@media (max-width: 360px) {
    html body.parent-profile-reference-page .parent-topbar .brand { width: 130px; }
    html body.parent-profile-reference-page .parent-reference-hero__metrics article { padding: 10px 8px; }
    html body.parent-profile-reference-page .parent-reference-hero__metrics article strong { font-size: 27px; }
    html body.parent-profile-reference-page .parent-reference-focus__grid { gap: 6px; }
    html body.parent-profile-reference-page .parent-reference-coach { padding-left: 124px; }
    html body.parent-profile-reference-page .parent-reference-coach img { width: 120px; }
}

@media (max-width: 300px) {
    html body.parent-profile-reference-page .parent-topbar .brand { width: 112px; }
    html body.parent-profile-reference-page .parent-topbar .parent-pill { display: none; }
    html body.parent-profile-reference-page .parent-child-picker { grid-template-columns: minmax(0,1fr); padding-left: 14px; }
    html body.parent-profile-reference-page .parent-child-picker__avatar { display: none; }
    html body.teacher-reference-page .teacher-app-header__logo { width: 118px; height: 112px; }
    html body.teacher-reference-page .teacher-app-header__profile img { width: 42px; height: 42px; }
}

/* VISUAL-FIDELITY-039 / VF-T01: kanonski nastavnicki pregled. */
html body.teacher-reference-page { --teacher-safe-width: 941px; }
html body.teacher-reference-page .teacher-shell { width: min(var(--teacher-safe-width), 100%); border-radius: 0 0 34px 34px; }
html body.teacher-reference-page .teacher-app-header { position: relative; height: 174px; margin: 0 0 10px; overflow: hidden; }
html body.teacher-reference-page .teacher-app-header__logo { top: 4px; width: 196px; height: 162px; }
html body.teacher-reference-page .teacher-content { padding: 0 26px 36px; }

html body.teacher-reference-dashboard .teacher-page-heading { min-height: 118px; margin-bottom: 12px; }
html body.teacher-reference-dashboard .teacher-page-heading h1 { font-size: 46px; line-height: 1.05; }
html body.teacher-reference-dashboard .teacher-page-heading p { font-size: 18px; }
html body.teacher-reference-dashboard .teacher-filter { min-width: 226px; height: 62px; }

html body.teacher-reference-dashboard .teacher-summary-strip {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
    margin-bottom: 24px; padding: 22px 14px; overflow: hidden;
    border: 1px solid var(--teacher-border); border-radius: 24px; background: #fff;
    box-shadow: 0 12px 32px rgba(12, 53, 126, .1);
}
html body.teacher-reference-dashboard .teacher-summary-card {
    min-height: 112px; gap: 12px; padding: 10px 14px; border: 0;
    border-right: 1px solid var(--teacher-border); border-radius: 0; box-shadow: none;
}
html body.teacher-reference-dashboard .teacher-summary-card:last-child { border-right: 0; }
html body.teacher-reference-dashboard .teacher-summary-card > :first-child { width: 58px; height: 58px; flex-basis: 58px; }
html body.teacher-reference-dashboard .teacher-summary-card span { min-height: 0; font-size: 12px; line-height: 1.35; }
html body.teacher-reference-dashboard .teacher-summary-card strong { font-size: 30px; line-height: 1; }
html body.teacher-reference-dashboard .teacher-summary-card small { font-size: 13px; }

html body.teacher-reference-dashboard .teacher-classes-panel { min-height: 0; padding: 20px; }
html body.teacher-reference-dashboard .teacher-class-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
html body.teacher-reference-dashboard .teacher-class-card { min-height: 262px; padding: 14px 16px; border-radius: 22px; }
html body.teacher-reference-dashboard .teacher-class-card__header { grid-template-columns: 62px minmax(0, 1fr) auto; gap: 10px; min-height: 75px; }
html body.teacher-reference-dashboard .teacher-school-mark { width: 60px; height: 60px; }
html body.teacher-reference-dashboard .teacher-class-card__header h3 { font-size: 32px; }
html body.teacher-reference-dashboard .teacher-status-img { max-width: 130px; height: 38px; }
html body.teacher-reference-dashboard .teacher-class-card__stats { min-height: 70px; }
html body.teacher-reference-dashboard .teacher-class-card__stats img { width: 26px; height: 26px; }
html body.teacher-reference-dashboard .teacher-class-card__stats strong { font-size: 22px; }
html body.teacher-reference-dashboard .teacher-mini-line { height: 78px; }

html body.teacher-reference-dashboard .teacher-focus-panel { min-height: 214px; padding: 20px; }
html body.teacher-reference-dashboard .teacher-focus-grid { gap: 12px; }
html body.teacher-reference-dashboard .teacher-focus-card {
    min-height: 105px; flex-direction: column; justify-content: center; gap: 4px;
    padding: 10px 8px; text-align: center;
}
html body.teacher-reference-dashboard .teacher-focus-card > :first-child { width: 48px; height: 48px; flex-basis: 48px; }
html body.teacher-reference-dashboard .teacher-focus-card b { font-size: 26px; }

html body.teacher-reference-dashboard .teacher-dashboard-footer-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 18px; }
html body.teacher-reference-dashboard .teacher-quick-panel,
html body.teacher-reference-dashboard .teacher-coach-card { min-height: 220px; }
html body.teacher-reference-dashboard .teacher-quick-panel { padding: 20px; }
html body.teacher-reference-dashboard .teacher-quick-actions { gap: 8px; }
html body.teacher-reference-dashboard .teacher-quick-actions a { min-height: 142px; padding: 8px 4px; }
html body.teacher-reference-dashboard .teacher-quick-actions img { width: 68px; height: 68px; }
html body.teacher-reference-dashboard .teacher-coach-card { padding: 22px; }
html body.teacher-reference-dashboard .teacher-coach-card > div { width: 58%; }
html body.teacher-reference-dashboard .teacher-coach-card > img {
    right: 8px; bottom: 0; width: 185px; height: 210px; max-height: calc(100% - 6px);
    object-fit: contain; object-position: center bottom;
}
html body.teacher-reference-dashboard .teacher-dashboard-management:not([open]) {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
html body.teacher-reference-dashboard .teacher-dashboard-management[open] {
    position: fixed; z-index: 1000; top: 50%; left: 50%; width: min(760px, calc(100% - 32px));
    z-index: 1002; max-height: calc(100dvh - 32px); margin: 0; padding: 24px 20px 20px;
    overflow: auto; transform: translate(-50%, -50%); box-shadow: 0 24px 80px rgba(6, 32, 104, .34);
}
html body.teacher-reference-dashboard .teacher-dashboard-management summary { outline-offset: 5px; }
html body.teacher-reference-dashboard .teacher-dashboard-management .teacher-class-context { margin: 18px 0 0; }

html body.teacher-reference-class .teacher-class-tools:not([open]) {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
html body.teacher-reference-class .teacher-class-tools[open] {
    position: fixed; z-index: 1002; top: 50%; left: 50%; width: min(800px, calc(100% - 32px));
    max-height: calc(100dvh - 32px); margin: 0; padding: 24px 20px 20px;
    overflow: auto; transform: translate(-50%, -50%); box-shadow: 0 24px 80px rgba(6, 32, 104, .34);
}
html body.teacher-reference-page .teacher-class-management[open] .teacher-management-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    display: grid;
    width: 44px;
    height: 44px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: #0b4fc7;
    background: #e8f3ff;
    box-shadow: 0 8px 20px rgba(6, 41, 112, .16);
    font: 900 30px/1 Nunito, Inter, sans-serif;
    cursor: pointer;
}
html body.teacher-reference-page .teacher-class-management:not([open]) .teacher-management-close {
    display: none !important;
}
html body.teacher-reference-page .teacher-class-management[open] summary {
    max-width: calc(100% - 58px);
    padding-right: 52px;
}
html body.teacher-reference-class .teacher-class-tools .teacher-class-context { margin: 18px 0; }
html body.teacher-reference-class .teacher-filter--management { min-width: 58px; width: 58px; padding: 0; flex: 0 0 58px; }
html body.teacher-reference-class .teacher-daily-activity { order: 80; }
html body.teacher-reference-class .teacher-class-tools { order: 90; }

html body.teacher-reference-class .teacher-app-header { height: 148px; margin-bottom: 8px; }
html body.teacher-reference-class .teacher-app-header__logo { width: 178px; height: 140px; }
html body.teacher-reference-class .teacher-app-header__profile { top: 20px; }
html body.teacher-reference-class .teacher-page-heading { min-height: 106px; margin-bottom: 14px; }
html body.teacher-reference-class .teacher-page-heading h1 { font-size: 44px; line-height: 1.05; }
html body.teacher-reference-class .teacher-filter-group { gap: 12px; }
html body.teacher-reference-class .teacher-filter { min-width: 178px; height: 52px; font-size: 15px; }
html body.teacher-reference-class .teacher-filter--management { min-width: 52px; width: 52px; }
html body.teacher-reference-class .teacher-class-kpis { gap: 14px; margin-bottom: 20px; }
html body.teacher-reference-class .teacher-kpi-card { min-height: 150px; padding: 16px; }
html body.teacher-reference-class .teacher-analysis-grid { gap: 16px; margin-bottom: 20px; }
html body.teacher-reference-class .teacher-progress-panel,
html body.teacher-reference-class .teacher-mastery-panel { height: 346px; }
html body.teacher-reference-class .teacher-progress-panel { min-height: 386px; height: auto; }
html body.teacher-reference-class .teacher-help-panel,
html body.teacher-reference-class .teacher-matrix-panel { min-height: 360px; }
html body.teacher-reference-class .teacher-assignments-panel,
html body.teacher-reference-class .teacher-quick-overview { min-height: 300px; }

@media (max-width: 640px) {
    html body.teacher-reference-class .teacher-page-heading { min-height: 190px; }
    html body.teacher-reference-class .teacher-filter-group { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)) auto; }
    html body.teacher-reference-class .teacher-filter { min-width: 0; height: 50px; font-size: 12px; gap: 7px; }
    html body.teacher-reference-class .teacher-filter--management { width: 50px; }
    html body.teacher-reference-class .teacher-class-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    html body.teacher-reference-class .teacher-kpi-card {
        min-height: 150px; align-items: center; flex-direction: column; justify-content: center;
        gap: 7px; padding: 12px 8px; text-align: center;
    }
    html body.teacher-reference-class .teacher-kpi-card > :first-child { width: 50px; height: 50px; flex-basis: 50px; }
    html body.teacher-reference-class .teacher-kpi-card span { min-height: 0; font-size: 10px; }
    html body.teacher-reference-class .teacher-kpi-card strong { font-size: 25px; }
    html body.teacher-reference-class .teacher-progress-panel,
    html body.teacher-reference-class .teacher-mastery-panel { height: auto; min-height: 330px; }
    html body.teacher-reference-page .teacher-trend-controls {
        grid-template-columns: 1fr auto;
        gap: 7px 10px;
    }
    html body.teacher-reference-page .teacher-trend-controls label,
    html body.teacher-reference-page .teacher-trend-controls input[type="range"],
    html body.teacher-reference-page .teacher-trend-controls > div {
        grid-column: 1 / -1;
    }
    html body.teacher-reference-page .teacher-trend-controls output {
        justify-self: end;
        text-align: right;
    }
    html body.teacher-reference-page .teacher-trend-controls > div {
        grid-template-columns: repeat(6, minmax(30px, 1fr));
        font-size: 9px;
    }
}

@media (max-width: 920px) {
    html body.teacher-reference-dashboard .teacher-summary-card { padding-inline: 10px; }
    html body.teacher-reference-dashboard .teacher-class-card__header { grid-template-columns: 56px minmax(0, 1fr); }
    html body.teacher-reference-dashboard .teacher-status-img { grid-column: 1 / -1; justify-self: start; }
}

@media (max-width: 640px) {
    html body.teacher-reference-page .teacher-app-header { height: 148px; margin-bottom: 8px; }
    html body.teacher-reference-page .teacher-app-header__logo { top: 4px; width: 148px; height: 128px; }
    html body.teacher-reference-page .teacher-content { padding: 0 14px 28px; }
    html body.teacher-reference-dashboard .teacher-page-heading {
        min-height: 154px; align-items: flex-start; flex-direction: column;
        justify-content: center; gap: 14px;
    }
    html body.teacher-reference-dashboard .teacher-page-heading h1 { font-size: clamp(34px, 10vw, 42px); }
    html body.teacher-reference-dashboard .teacher-page-heading p { font-size: 15px; line-height: 1.4; }
    html body.teacher-reference-dashboard .teacher-filter { width: auto; min-width: 190px; height: 52px; }
    html body.teacher-reference-dashboard .teacher-summary-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; padding: 0; }
    html body.teacher-reference-dashboard .teacher-summary-card {
        min-height: 126px; align-items: center; flex-direction: column; justify-content: center;
        gap: 6px; padding: 12px 8px; border-right: 1px solid var(--teacher-border);
        border-bottom: 1px solid var(--teacher-border); text-align: center;
    }
    html body.teacher-reference-dashboard .teacher-summary-card:nth-child(2n) { border-right: 0; }
    html body.teacher-reference-dashboard .teacher-summary-card:nth-last-child(-n+2) { border-bottom: 0; }
    html body.teacher-reference-dashboard .teacher-summary-card > :first-child { width: 48px; height: 48px; flex-basis: 48px; }
    html body.teacher-reference-dashboard .teacher-summary-card span { font-size: 10px; }
    html body.teacher-reference-dashboard .teacher-summary-card strong { font-size: 26px; }
    html body.teacher-reference-dashboard .teacher-summary-card small { font-size: 11px; }
    html body.teacher-reference-dashboard .teacher-classes-panel,
    html body.teacher-reference-dashboard .teacher-focus-panel,
    html body.teacher-reference-dashboard .teacher-quick-panel { padding: 16px 14px; }
    html body.teacher-reference-dashboard .teacher-section-heading h2 { font-size: 22px; }
    html body.teacher-reference-dashboard .teacher-text-action { font-size: 13px; }
    html body.teacher-reference-dashboard .teacher-class-grid { grid-template-columns: 1fr; gap: 14px; }
    html body.teacher-reference-dashboard .teacher-class-card { min-height: 238px; padding: 12px; }
    html body.teacher-reference-dashboard .teacher-focus-grid { grid-template-columns: 1fr; }
    html body.teacher-reference-dashboard .teacher-focus-card {
        min-height: 82px; align-items: center; flex-direction: row; justify-content: flex-start;
        gap: 12px; padding: 10px 14px; text-align: left;
    }
    html body.teacher-reference-dashboard .teacher-focus-card > :first-child { width: 50px; height: 50px; flex-basis: 50px; }
    html body.teacher-reference-dashboard .teacher-dashboard-footer-grid { grid-template-columns: 1fr; }
    html body.teacher-reference-dashboard .teacher-quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html body.teacher-reference-dashboard .teacher-quick-actions a { min-height: 112px; }
    html body.teacher-reference-dashboard .teacher-quick-actions img { width: 52px; height: 52px; }
    html body.teacher-reference-dashboard .teacher-coach-card { min-height: 210px; }
    html body.teacher-reference-dashboard .teacher-coach-card > img { right: 0; bottom: 0; width: 150px; height: 190px; }
    html body.teacher-reference-dashboard .teacher-coach-card > div { width: calc(100% - 120px); }
}

@media (max-width: 360px) {
    html body.teacher-reference-dashboard .teacher-summary-card { min-height: 118px; }
    html body.teacher-reference-dashboard .teacher-coach-card > img { width: 132px; }
    html body.teacher-reference-dashboard .teacher-coach-card > div { width: calc(100% - 100px); }
}

@media (max-width: 300px) {
    html body.teacher-reference-page .teacher-app-header__logo { width: 118px; height: 112px; }
    html body.teacher-reference-page .teacher-app-header__profile img { width: 42px; height: 42px; }
}

/* INSTALL-PREMIUM-RESPONSIVE-040 */
html body.install-premium-page {
    --install-ink: #0b2474;
    --install-blue: #1260f3;
    --install-green: #15cd76;
    min-width: 0;
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    color: var(--install-ink);
    background:
        radial-gradient(circle at 92% 3%, rgba(131, 210, 255, .28), transparent 24rem),
        radial-gradient(circle at 5% 33%, rgba(191, 166, 255, .17), transparent 20rem),
        linear-gradient(180deg, #f8faff 0%, #f5f9ff 62%, #fbfdff 100%);
    font-family: "Fredoka", "Inter", system-ui, sans-serif;
}

html body.install-premium-page::before,
html body.install-premium-page::after { display: none !important; }

html body.install-premium-page *,
html body.install-premium-page *::before,
html body.install-premium-page *::after { box-sizing: border-box; }

html body.install-premium-page img {
    display: block;
    max-width: 100%;
}

html body.install-premium-page .install-premium-shell {
    width: min(100% - 32px, 560px);
    margin: 0 auto;
    padding: max(16px, env(safe-area-inset-top)) 0 max(32px, env(safe-area-inset-bottom));
}

html body.install-premium-page .install-premium-back {
    display: block;
    width: 58px;
    height: 58px;
    margin: 0 0 14px;
    border: 0;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(26, 45, 128, .14);
    transition: transform .2s ease, box-shadow .2s ease;
}

html body.install-premium-page .install-premium-back:hover {
    transform: translateY(-2px);
    box-shadow: 0 13px 28px rgba(26, 45, 128, .19);
}

html body.install-premium-page .install-premium-back:focus-visible,
html body.install-premium-page .install-premium-cta:focus-visible {
    outline: 4px solid rgba(18, 96, 243, .28);
    outline-offset: 3px;
}

html body.install-premium-page .install-premium-back img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

html body.install-premium-page .install-premium-hero,
html body.install-premium-page .install-platform-card,
html body.install-premium-page .install-premium-tip {
    min-width: 0;
    border: 1px solid rgba(121, 168, 230, .24);
    background: rgba(255, 255, 255, .93);
    box-shadow: 0 15px 36px rgba(59, 81, 150, .11);
}

html body.install-premium-page .install-premium-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(118px, 38%);
    align-items: center;
    gap: 8px 14px;
    padding: clamp(22px, 6vw, 34px);
    overflow: hidden;
    border-radius: 30px;
    background:
        radial-gradient(circle at 82% 3%, rgba(128, 211, 255, .46), transparent 46%),
        radial-gradient(circle at 48% 54%, rgba(197, 178, 255, .21), transparent 28%),
        rgba(255, 255, 255, .94);
}

html body.install-premium-page .install-premium-hero::before {
    content: "—";
    position: absolute;
    top: 21px;
    left: 55%;
    color: #48d6a7;
    font-size: 42px;
    font-weight: 700;
    line-height: 1;
    transform: rotate(-8deg);
    opacity: .8;
}

html body.install-premium-page .install-premium-hero__copy {
    position: relative;
    z-index: 1;
    min-width: 0;
}

html body.install-premium-page .install-premium-hero h1 {
    margin: 0 0 14px;
    color: var(--install-blue);
    font-size: clamp(38px, 10.5vw, 64px);
    font-weight: 700;
    letter-spacing: -.045em;
    line-height: .91;
    overflow-wrap: anywhere;
}

html body.install-premium-page .install-premium-hero h1 span {
    display: block;
    color: var(--install-ink);
}

html body.install-premium-page .install-premium-hero h2 {
    margin: 0 0 10px;
    color: #101f63;
    font-size: clamp(17px, 4.6vw, 23px);
    line-height: 1.2;
}

html body.install-premium-page .install-premium-hero p {
    max-width: 30ch;
    margin: 0;
    color: #40558d;
    font-size: clamp(14px, 3.8vw, 18px);
    line-height: 1.45;
    overflow-wrap: anywhere;
}

html body.install-premium-page .install-premium-hero__visual {
    position: relative;
    z-index: 1;
    align-self: stretch;
    min-width: 0;
    min-height: 220px;
    margin: -12px -18px -18px 0;
}

html body.install-premium-page .install-premium-hero__visual img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
}

html body.install-premium-page .install-premium-cta {
    position: relative;
    z-index: 2;
    grid-column: 1 / -1;
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 66px;
    align-items: center;
    justify-content: center;
    gap: 13px;
    margin: 8px 0 0;
    padding: 11px 18px;
    border: 0;
    border-bottom: 5px solid #0e74d9;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(100deg, #12cf75 0%, #0fcaa3 48%, #149af4 100%);
    box-shadow: 0 13px 24px rgba(13, 177, 163, .28);
    font: inherit;
    font-size: clamp(18px, 5.1vw, 25px);
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    cursor: pointer;
}

html body.install-premium-page .install-premium-cta:hover:not(:disabled) { filter: saturate(1.08) brightness(1.03); }
html body.install-premium-page .install-premium-cta:active:not(:disabled) { transform: translateY(2px); border-bottom-width: 3px; }
html body.install-premium-page .install-premium-cta:disabled { cursor: default; filter: grayscale(.18); opacity: .76; }

html body.install-premium-page .install-premium-cta__icon {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    border-radius: 50%;
    color: #13bb89;
    background: #fff;
    font-size: 27px;
    line-height: 1;
    box-shadow: 0 5px 11px rgba(11, 89, 117, .14);
}

html body.install-premium-page .install-premium-guides {
    display: grid;
    gap: 16px;
    margin-top: 16px;
}

html body.install-premium-page .install-platform-card {
    padding: clamp(19px, 5vw, 28px);
    overflow: hidden;
    border-radius: 27px;
}

html body.install-premium-page .install-platform-card--android {
    border-color: rgba(59, 205, 110, .28);
    box-shadow: 0 15px 34px rgba(58, 174, 102, .1);
}

html body.install-premium-page .install-platform-card--ios {
    border-color: rgba(64, 139, 255, .3);
    box-shadow: 0 15px 34px rgba(56, 115, 212, .1);
}

html body.install-premium-page .install-platform-card.active {
    border-width: 2px;
    box-shadow: 0 17px 38px rgba(35, 170, 107, .18);
}

html body.install-premium-page .install-platform-card__header {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: 13px;
}

html body.install-premium-page .install-platform-card__header > div { min-width: 0; }

html body.install-premium-page .install-platform-card__badge {
    display: grid;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(145deg, #49df78, #13aa45);
    box-shadow: 0 8px 16px rgba(32, 178, 80, .2);
    font-size: 29px;
    position: relative;
}

html body.install-premium-page .install-platform-card__badge--android::before {
    content: "";
    width: 25px;
    height: 18px;
    border-radius: 14px 14px 7px 7px;
    background:
        radial-gradient(circle at 29% 50%, #fff 0 2px, transparent 2.5px),
        radial-gradient(circle at 71% 50%, #fff 0 2px, transparent 2.5px),
        #19a944;
    border: 2px solid rgba(255, 255, 255, .86);
}

html body.install-premium-page .install-platform-card__badge--android::after {
    content: "";
    position: absolute;
    top: 11px;
    width: 18px;
    height: 10px;
    border-top: 2px solid #fff;
    transform: rotate(23deg);
}

html body.install-premium-page .install-platform-card__badge--ios {
    color: #0871ed;
    background: #fff;
    border: 2px solid #e7f1ff;
    box-shadow: 0 8px 16px rgba(27, 103, 210, .16);
}

html body.install-premium-page .install-platform-card__badge--ios::before {
    content: "";
    width: 25px;
    height: 25px;
    border: 2px solid #1597f2;
    border-radius: 50%;
    background: linear-gradient(145deg, #e1f7ff, #fff);
}

html body.install-premium-page .install-platform-card__badge--ios::after {
    content: "";
    position: absolute;
    width: 3px;
    height: 20px;
    border-radius: 999px;
    background: linear-gradient(#f04b5f 0 50%, #147cf0 50%);
    transform: rotate(45deg);
}

html body.install-premium-page .install-platform-card__header h2 {
    margin: 0 0 4px;
    color: #101f63;
    font-size: clamp(25px, 7vw, 34px);
    line-height: 1.05;
}

html body.install-premium-page .install-platform-card__header p {
    margin: 0;
    color: #40558d;
    font-size: clamp(13px, 3.55vw, 16px);
    line-height: 1.38;
    overflow-wrap: anywhere;
}

html body.install-premium-page .install-platform-card__body {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr) 105px;
    align-items: end;
    gap: 10px;
    min-width: 0;
    margin-top: 17px;
}

html body.install-premium-page .install-android-mascot {
    position: relative;
    align-self: start;
    width: 78px;
    height: 118px;
    margin: 0;
    overflow: visible;
    filter: drop-shadow(0 9px 9px rgba(30, 170, 77, .18));
}

html body.install-premium-page .install-android-mascot__head,
html body.install-premium-page .install-android-mascot__body {
    position: absolute;
    left: 50%;
    display: block;
    background: linear-gradient(145deg, #73f28f, #24c953);
    transform: translateX(-50%);
}

html body.install-premium-page .install-android-mascot__head {
    top: 19px;
    width: 70px;
    height: 57px;
    border-radius: 36px 36px 20px 20px;
    border: 2px solid rgba(255, 255, 255, .68);
}

html body.install-premium-page .install-android-mascot__head i {
    position: absolute;
    top: 23px;
    width: 8px;
    height: 11px;
    border-radius: 50%;
    background: #fff;
}

html body.install-premium-page .install-android-mascot__head i:first-child { left: 17px; }
html body.install-premium-page .install-android-mascot__head i:nth-child(2) { right: 17px; }
html body.install-premium-page .install-android-mascot__head b {
    position: absolute;
    left: 50%;
    bottom: 8px;
    width: 20px;
    height: 8px;
    border-radius: 0 0 12px 12px;
    background: #095534;
    transform: translateX(-50%);
}

html body.install-premium-page .install-android-mascot__body {
    top: 70px;
    width: 59px;
    height: 42px;
    border-radius: 10px 10px 21px 21px;
}

html body.install-premium-page .install-android-mascot__antenna {
    position: absolute;
    top: 7px;
    left: 50%;
    width: 3px;
    height: 21px;
    border-radius: 999px;
    background: #24c953;
    transform-origin: bottom;
}

html body.install-premium-page .install-android-mascot__antenna--left { transform: translateX(-19px) rotate(-26deg); }
html body.install-premium-page .install-android-mascot__antenna--right { transform: translateX(16px) rotate(26deg); }

html body.install-premium-page .install-android-popup {
    width: 105px;
    margin: 0;
}

html body.install-premium-page .install-android-popup img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

html body.install-premium-page .install-premium-steps {
    display: grid;
    min-width: 0;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

html body.install-premium-page .install-premium-steps li {
    display: grid;
    grid-template-columns: 31px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 8px 0;
    border-bottom: 1px dashed #d9e2f4;
}

html body.install-premium-page .install-premium-steps li:last-child { border-bottom: 0; }

html body.install-premium-page .install-premium-steps li > span {
    display: grid;
    width: 31px;
    height: 31px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(145deg, #55de6c, #18b33c);
    box-shadow: 0 5px 10px rgba(22, 168, 64, .22);
    font-size: 16px;
    font-weight: 700;
}

html body.install-premium-page .install-premium-steps strong {
    min-width: 0;
    color: #152867;
    font-size: clamp(13px, 3.35vw, 15px);
    line-height: 1.35;
    overflow-wrap: anywhere;
}

html body.install-premium-page .install-platform-card__body--ios {
    grid-template-columns: minmax(0, 1fr) 118px;
    align-items: center;
}

html body.install-premium-page .install-premium-steps--ios li > span {
    background: linear-gradient(145deg, #2ba9ff, #0759e8);
    box-shadow: 0 5px 10px rgba(16, 99, 225, .23);
}

html body.install-premium-page .install-ios-visual {
    position: relative;
    width: 112px;
    height: 148px;
    margin: 0 auto -29px;
    overflow: hidden;
    border: 7px solid #17215c;
    border-bottom: 0;
    border-radius: 29px 29px 0 0;
    background: linear-gradient(160deg, #dff2ff 0%, #f8fbff 50%, #d5defa 100%);
    box-shadow: 0 9px 19px rgba(28, 48, 109, .19);
}

html body.install-premium-page .install-ios-visual__notch {
    position: absolute;
    top: 7px;
    left: 50%;
    width: 41px;
    height: 9px;
    border-radius: 0 0 8px 8px;
    background: #17215c;
    transform: translateX(-50%);
}

html body.install-premium-page .install-ios-visual__speaker {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 75% 42%, rgba(128, 181, 255, .36), transparent 35%);
}

html body.install-premium-page .install-ios-visual__share {
    position: absolute;
    top: 49px;
    left: 50%;
    display: grid;
    width: 68px;
    height: 68px;
    place-items: center;
    border-radius: 17px;
    color: #0b75ed;
    background: #fff;
    box-shadow: 0 8px 18px rgba(29, 89, 181, .2);
    font-size: 51px;
    font-weight: 500;
    line-height: .7;
    transform: translateX(-50%);
}

html body.install-premium-page .install-premium-tip {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr) 60px;
    align-items: center;
    gap: 14px;
    margin-top: 16px;
    padding: 15px 18px;
    border-color: rgba(244, 185, 55, .42);
    border-radius: 25px;
    background: linear-gradient(100deg, #fffdf4, #fffaf0);
    box-shadow: 0 13px 30px rgba(207, 148, 29, .11);
}

html body.install-premium-page .install-premium-tip__icon,
html body.install-premium-page .install-premium-tip__refresh {
    display: grid;
    width: 60px;
    height: 60px;
    place-items: center;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 8px 17px rgba(183, 124, 17, .13);
    font-size: 36px;
}

html body.install-premium-page .install-premium-tip__refresh {
    color: #1db96c;
    font-size: 48px;
    font-weight: 700;
    transform: rotate(-8deg);
}

html body.install-premium-page .install-premium-tip h2 {
    margin: 0 0 2px;
    color: #ae6507;
    font-size: clamp(23px, 6vw, 31px);
    line-height: 1.05;
}

html body.install-premium-page .install-premium-tip p {
    margin: 0;
    color: #40558d;
    font-size: clamp(13px, 3.45vw, 16px);
    line-height: 1.35;
    overflow-wrap: anywhere;
}

@media (max-width: 480px) {
    html body.install-premium-page .install-premium-shell { width: min(100% - 28px, 560px); }
    html body.install-premium-page .install-premium-back { width: 54px; height: 54px; }
    html body.install-premium-page .install-premium-hero { grid-template-columns: minmax(0, 1fr) minmax(105px, 36%); }
    html body.install-premium-page .install-premium-hero__visual { min-height: 190px; margin-right: -14px; }
    html body.install-premium-page .install-platform-card__body { grid-template-columns: 66px minmax(0, 1fr); }
    html body.install-premium-page .install-android-mascot { width: 66px; height: 105px; }
    html body.install-premium-page .install-android-popup { grid-column: 1 / -1; width: 142px; justify-self: end; margin: -36px 0 -15px; }
    html body.install-premium-page .install-platform-card__body--ios { grid-template-columns: minmax(0, 1fr) 101px; }
    html body.install-premium-page .install-ios-visual { width: 96px; height: 137px; }
    html body.install-premium-page .install-ios-visual__share { width: 59px; height: 59px; font-size: 45px; }
    html body.install-premium-page .install-premium-tip { grid-template-columns: 51px minmax(0, 1fr) 48px; gap: 10px; padding: 14px; }
    html body.install-premium-page .install-premium-tip__icon,
    html body.install-premium-page .install-premium-tip__refresh { width: 48px; height: 48px; border-radius: 16px; font-size: 29px; }
    html body.install-premium-page .install-premium-tip__refresh { font-size: 40px; }
}

@media (max-width: 359px) {
    html body.install-premium-page .install-premium-shell { width: min(100% - 24px, 560px); }
    html body.install-premium-page .install-premium-hero { grid-template-columns: 1fr; text-align: center; }
    html body.install-premium-page .install-premium-hero::before { left: auto; right: 22px; }
    html body.install-premium-page .install-premium-hero h1 { font-size: clamp(39px, 14vw, 50px); }
    html body.install-premium-page .install-premium-hero p { margin-inline: auto; }
    html body.install-premium-page .install-premium-hero__visual { width: min(78%, 210px); min-height: 170px; margin: -4px auto -16px; }
    html body.install-premium-page .install-premium-cta { min-height: 61px; padding-inline: 13px; font-size: 18px; }
    html body.install-premium-page .install-premium-cta__icon { width: 34px; height: 34px; flex-basis: 34px; font-size: 24px; }
    html body.install-premium-page .install-platform-card__header { gap: 10px; }
    html body.install-premium-page .install-platform-card__badge { width: 42px; height: 42px; flex-basis: 42px; }
    html body.install-premium-page .install-platform-card__body,
    html body.install-premium-page .install-platform-card__body--ios { grid-template-columns: 1fr; }
    html body.install-premium-page .install-android-mascot { width: 78px; height: 96px; justify-self: center; }
    html body.install-premium-page .install-android-popup { width: 130px; margin: 0 auto -14px; justify-self: center; }
    html body.install-premium-page .install-ios-visual { width: 108px; margin-top: 4px; justify-self: center; }
    html body.install-premium-page .install-premium-tip { grid-template-columns: 44px minmax(0, 1fr); }
    html body.install-premium-page .install-premium-tip__icon { width: 44px; height: 44px; }
    html body.install-premium-page .install-premium-tip__refresh { display: none; }
}

@media (min-width: 760px) {
    html body.install-premium-page .install-premium-shell { width: min(100% - 48px, 620px); padding-top: 24px; }
    html body.install-premium-page .install-premium-hero { grid-template-columns: minmax(0, 1fr) 210px; }
    html body.install-premium-page .install-premium-hero__visual { min-height: 275px; }
    html body.install-premium-page .install-platform-card__body { grid-template-columns: 94px minmax(0, 1fr) 128px; gap: 15px; }
    html body.install-premium-page .install-android-mascot { width: 94px; height: 132px; }
    html body.install-premium-page .install-android-popup { width: 128px; }
    html body.install-premium-page .install-platform-card__body--ios { grid-template-columns: minmax(0, 1fr) 138px; }
    html body.install-premium-page .install-ios-visual { width: 126px; height: 162px; }
}

@media (prefers-reduced-motion: reduce) {
    html body.install-premium-page .install-premium-back,
    html body.install-premium-page .install-premium-cta { transition: none; }
}

/* INSTALL-REFERENCE-EXACT-041 */
/* INSTALL-BUTTON-REFERENCE-044 */
/* INSTALL-BUTTON-ORBIT-GLOW-045 */
/* INSTALL-BUTTON-CLEAN-BACKDROP-047 */
@property --install-orbit-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

@keyframes install-button-orbit-glow-045 {
    to { --install-orbit-angle: 360deg; }
}
html body.install-reference-image-page {
    min-width: 0;
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    color: #0b2474;
    background: #f7faff;
}

html body.install-reference-image-page::before,
html body.install-reference-image-page::after { display: none !important; }

html body.install-reference-image-page *,
html body.install-reference-image-page *::before,
html body.install-reference-image-page *::after { box-sizing: border-box; }

html body.install-reference-image-page .install-reference-shell {
    position: relative;
    width: min(100%, 941px);
    aspect-ratio: 941 / 1672;
    margin: 0 auto;
    container-type: inline-size;
    overflow: hidden;
    background: #f7faff;
}

html body.install-reference-image-page .install-reference-art {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
    object-position: center top;
    user-select: none;
    pointer-events: none;
}

html body.install-reference-image-page .install-reference-back {
    position: absolute;
    z-index: 3;
    top: 1.35%;
    left: 2.2%;
    width: 10.3%;
    aspect-ratio: 1;
    border-radius: 50%;
}

html body.install-reference-image-page .install-reference-back:focus-visible {
    outline: max(2px, .4cqi) solid rgba(18, 96, 243, .48);
    outline-offset: max(2px, .35cqi);
}

html body.install-reference-image-page .install-reference-button-backdrop {
    position: absolute;
    z-index: 3;
    top: 28.25%;
    left: 8.1%;
    display: block;
    width: 83.8%;
    height: 8.85%;
    border-radius: 999px;
    background: linear-gradient(100deg, rgba(248,252,255,.99), rgba(242,250,255,.99));
    box-shadow: 0 0 1.8cqi 1.1cqi rgba(247,251,255,.96);
    pointer-events: none;
}

html body.install-reference-image-page .install-reference-button {
    position: absolute;
    z-index: 4;
    top: 28.55%;
    left: 8.6%;
    display: flex;
    width: 82.8%;
    height: 8.25%;
    min-width: 0;
    min-height: 0;
    align-items: center;
    justify-content: center;
    gap: 3.2cqi;
    margin: 0;
    padding: 0 4.4cqi;
    border: clamp(1px, .28cqi, 3px) solid rgba(255,255,255,.66);
    border-bottom: clamp(3px, .75cqi, 7px) solid #0874dd;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(100deg, #08df6a 0%, #00cdb1 48%, #0788ff 100%);
    box-shadow:
        inset 0 clamp(1px, .36cqi, 4px) clamp(1px, .55cqi, 6px) rgba(255,255,255,.7),
        inset 0 clamp(-4px, -.65cqi, -2px) clamp(8px, 1.25cqi, 13px) rgba(0,70,215,.25),
        0 0 clamp(8px, 1.7cqi, 18px) rgba(106, 255, 216, .86),
        0 0 clamp(16px, 3.2cqi, 34px) rgba(0, 226, 183, .7),
        0 0 clamp(16px, 3.4cqi, 36px) rgba(0, 142, 255, .62),
        0 clamp(7px, 1.5cqi, 16px) clamp(18px, 4cqi, 40px) rgba(0,119,231,.42);
    font-family: "Fredoka", "Inter", system-ui, sans-serif;
    font-size: clamp(12px, 4.05cqi, 38px);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    isolation: isolate;
    text-shadow: 0 .28cqi .55cqi rgba(0,54,123,.18);
    transition: filter .16s ease, transform .16s ease, box-shadow .16s ease;
}

html body.install-reference-image-page .install-reference-button::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: -1.25cqi;
    padding: .82cqi;
    border-radius: inherit;
    background: conic-gradient(
        from var(--install-orbit-angle),
        transparent 0deg,
        rgba(55, 255, 199, .18) 28deg,
        #55ffd0 54deg,
        #d8fff8 78deg,
        #18dfff 104deg,
        rgba(0, 126, 255, .34) 138deg,
        transparent 170deg 255deg,
        rgba(34, 255, 207, .22) 285deg,
        #008cff 315deg,
        transparent 360deg
    );
    filter:
        drop-shadow(0 0 .95cqi rgba(97, 255, 214, .94))
        drop-shadow(0 0 1.6cqi rgba(0, 174, 255, .82));
    pointer-events: none;
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
    animation: install-button-orbit-glow-045 2.8s linear infinite;
}

html body.install-reference-image-page .install-reference-button > * {
    position: relative;
    z-index: 1;
}

/* INSTALL-BUTTON-AQUA-ORBIT-GLOW-102: zeleni/plavi premium glow kruzi oko cijelog ruba gumba. */
@property --install-aqua-orbit-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

@keyframes install-button-aqua-orbit-102 {
    to { --install-aqua-orbit-angle: 360deg; }
}

html body.install-reference-image-page .install-reference-button::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset: -1.16cqi;
    padding: .86cqi;
    border-radius: inherit;
    background: conic-gradient(
        from var(--install-aqua-orbit-angle),
        rgba(52, 255, 204, .92) 0deg 32deg,
        rgba(220, 255, 249, .98) 48deg,
        #00f0d4 70deg,
        #00a7ff 104deg,
        rgba(0, 109, 255, .72) 132deg,
        transparent 162deg 212deg,
        rgba(68, 255, 211, .62) 236deg,
        #04dcff 270deg,
        rgba(15, 113, 255, .85) 304deg,
        transparent 338deg 360deg
    );
    box-shadow:
        inset 0 0 .85cqi rgba(255,255,255,.72),
        0 0 1.25cqi rgba(128, 255, 225, .98),
        0 0 2.7cqi rgba(0, 229, 192, .9),
        0 0 4.4cqi rgba(0, 140, 255, .68),
        0 0 6.4cqi rgba(0, 91, 255, .38);
    filter:
        drop-shadow(0 0 1.6cqi rgba(214, 255, 247, 1))
        drop-shadow(0 0 3.1cqi rgba(0, 221, 203, .98))
        drop-shadow(0 0 4.6cqi rgba(0, 136, 255, .82));
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
    animation: install-button-aqua-orbit-102 1.55s linear infinite;
}

html body.install-reference-image-page .install-reference-button:hover:not(:disabled),
html body.install-reference-image-page .install-reference-button:focus-visible {
    filter: saturate(1.13) brightness(1.035);
    box-shadow:
        inset 0 clamp(1px, .36cqi, 4px) clamp(1px, .55cqi, 6px) rgba(255,255,255,.76),
        inset 0 clamp(-4px, -.65cqi, -2px) clamp(8px, 1.25cqi, 13px) rgba(0,70,215,.23),
        0 0 clamp(12px, 2.3cqi, 24px) rgba(126, 255, 226, .98),
        0 0 clamp(24px, 4.8cqi, 50px) rgba(0, 225, 190, .84),
        0 0 clamp(26px, 5.5cqi, 58px) rgba(0, 135, 255, .72),
        0 clamp(8px, 1.7cqi, 18px) clamp(22px, 4.8cqi, 48px) rgba(0,119,231,.46);
}

html body.install-reference-image-page .install-reference-button.is-label-updated {
    color: #fff;
    background: linear-gradient(100deg, #07d86a 0%, #08c9b1 48%, #1183ef 100%);
}

html body.install-reference-image-page .install-reference-button.is-label-updated:hover:not(:disabled) {
    filter: saturate(1.08) brightness(1.025);
}

html body.install-reference-image-page .install-reference-button:active:not(:disabled) {
    transform: translateY(max(1px, .18cqi));
    box-shadow:
        inset 0 clamp(2px, .55cqi, 6px) clamp(8px, 1.4cqi, 14px) rgba(0,65,166,.24),
        0 0 clamp(10px, 2.2cqi, 23px) rgba(0,219,158,.48),
        0 clamp(4px, 1cqi, 10px) clamp(12px, 3cqi, 31px) rgba(0,119,231,.32);
}

html body.install-reference-image-page .install-reference-button:focus-visible {
    outline: max(2px, .45cqi) solid rgba(9, 76, 205, .44);
    outline-offset: max(2px, .35cqi);
}

html body.install-reference-image-page .install-reference-button:disabled {
    cursor: default;
    filter: grayscale(.12);
}

html body.install-reference-image-page .install-reference-button__icon {
    position: relative;
    display: block;
    width: clamp(20px, calc(9.1cqi - 10px), 76px);
    height: clamp(20px, calc(9.1cqi - 10px), 76px);
    flex: 0 0 clamp(20px, calc(9.1cqi - 10px), 76px);
    place-items: center;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 .65cqi 1.35cqi rgba(0,88,126,.26);
}

html body.install-reference-image-page .install-reference-button__icon::before {
    content: "";
    position: absolute;
    top: 22%;
    left: 50%;
    width: 50%;
    height: 50%;
    transform: translateX(-50%);
    background: #0abd83;
    clip-path: polygon(40% 0, 60% 0, 60% 52%, 79% 34%, 100% 56%, 50% 100%, 0 56%, 21% 34%, 40% 52%);
}

html body.install-reference-image-page .install-reference-button__icon::after {
    content: "";
    position: absolute;
    right: 23%;
    bottom: 20%;
    left: 23%;
    height: 17%;
    border: .48cqi solid #0abd83;
    border-top: 0;
    border-radius: 0 0 .7cqi .7cqi;
}

html body.install-reference-image-page .install-reference-accessible-copy {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

html body.install-reference-image-page .install-reference-manual-anchor {
    position: absolute !important;
    top: 37%;
    left: 0;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
    html body.install-reference-image-page .install-reference-button { transition: none; }
    html body.install-reference-image-page .install-reference-button::before {
        animation-duration: 8s;
        filter:
            drop-shadow(0 0 .55cqi rgba(255, 224, 88, .72))
            drop-shadow(0 0 .9cqi rgba(255, 145, 0, .58));
    }
}

/* TEACHER-REGISTER-REFERENCE-042 */
html:has(body.teacher-register-reference-page),
html body.teacher-register-reference-page {
    min-width: 0;
    margin: 0;
    overflow-x: clip;
    background: #eaf4ff;
}

html body.teacher-register-reference-page {
    color: #09266f;
    font-family: "Nunito", "Trebuchet MS", Arial, sans-serif;
}

html body.teacher-register-reference-page *,
html body.teacher-register-reference-page *::before,
html body.teacher-register-reference-page *::after {
    box-sizing: border-box;
}

html body.teacher-register-reference-page .teacher-register-reference-shell {
    width: 100%;
    min-height: 100vh;
    padding: 0;
}

html body.teacher-register-reference-page .teacher-register-reference-card {
    position: relative;
    width: min(100%, 941px);
    min-height: 100vh;
    margin: 0 auto;
    overflow: hidden;
    background:
        radial-gradient(circle at 16% 8%, rgba(255,255,255,.88) 0 1px, transparent 2px),
        linear-gradient(180deg, #eef7ff 0, #fff 32%, #fff 92%, #eef5ff 100%);
    box-shadow: 0 0 46px rgba(21, 67, 142, .16);
}

html body.teacher-register-reference-page .teacher-register-reference-card::after {
    content: "";
    position: absolute;
    z-index: 0;
    right: -8%;
    bottom: -45px;
    left: -8%;
    height: 105px;
    border-radius: 50% 50% 0 0 / 55% 55% 0 0;
    background:
        radial-gradient(circle at 78% 35%, rgba(141, 103, 255, .78) 0 20px, transparent 21px),
        linear-gradient(103deg, #075ee9, #3a3cf4 58%, #8236f7);
}

html body.teacher-register-reference-page .teacher-register-reference-hero {
    position: relative;
    z-index: 1;
    min-height: 474px;
    overflow: hidden;
    background:
        radial-gradient(circle at 4% 34%, rgba(134, 93, 255, .82) 0 33px, transparent 34px),
        radial-gradient(circle at 95% 29%, rgba(44, 197, 187, .78) 0 20px, transparent 21px),
        linear-gradient(127deg, #f8fbff 8%, #eaf5ff 55%, #d9ebff 100%);
}

html body.teacher-register-reference-page .teacher-register-reference-hero::before {
    content: "";
    position: absolute;
    top: -148px;
    left: -115px;
    width: 440px;
    height: 275px;
    border-radius: 0 0 74% 46%;
    transform: rotate(-9deg);
    background: linear-gradient(135deg, #063bbf, #236af3 65%, #7447ec);
}

html body.teacher-register-reference-page .teacher-register-reference-hero::after {
    content: "";
    position: absolute;
    z-index: 1;
    right: -8%;
    bottom: -72px;
    width: 57%;
    height: 176px;
    border-radius: 50% 0 0 0;
    transform: rotate(-7deg);
    background: linear-gradient(105deg, rgba(118, 67, 246, .82), #9946f7);
}

html body.teacher-register-reference-page .teacher-register-reference-back {
    position: absolute;
    z-index: 7;
    top: 28px;
    left: 28px;
    display: grid;
    width: 70px;
    height: 70px;
    padding: 0;
    place-items: center;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,.88);
    border-radius: 50%;
    background: rgba(11, 75, 211, .88);
    box-shadow: 0 9px 22px rgba(7, 50, 150, .25);
}

html body.teacher-register-reference-page .teacher-register-reference-back img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
}

html body.teacher-register-reference-page .teacher-register-reference-logo {
    position: absolute;
    z-index: 4;
    top: 24px;
    left: 182px;
    display: block;
    width: 356px;
    height: auto;
    max-height: none;
    object-fit: contain;
}

html body.teacher-register-reference-page .teacher-register-reference-robot {
    position: absolute;
    z-index: 4;
    top: 66px;
    right: 57px;
    display: block;
    width: auto;
    height: 326px;
    object-fit: contain;
    object-position: center;
    filter: drop-shadow(0 12px 12px rgba(11, 63, 135, .18));
}

html body.teacher-register-reference-page .teacher-register-reference-heading {
    position: absolute;
    z-index: 5;
    top: 314px;
    left: 120px;
    width: 475px;
    text-align: center;
}

html body.teacher-register-reference-page .teacher-register-reference-heading h1 {
    margin: 0 0 10px;
    color: #082d78;
    font-size: 44px;
    font-weight: 900;
    letter-spacing: -.035em;
    line-height: 1.05;
}

html body.teacher-register-reference-page .teacher-register-reference-heading p {
    margin: 0;
    color: #4e6398;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.32;
}

html body.teacher-register-reference-page .teacher-register-decoration {
    position: absolute;
    z-index: 2;
    color: rgba(74, 131, 238, .46);
    font-size: 27px;
    font-weight: 800;
    transform: rotate(-10deg);
}

html body.teacher-register-reference-page .teacher-register-decoration--sum { top: 143px; left: 58px; }
html body.teacher-register-reference-page .teacher-register-decoration--root { top: 87px; right: 48px; transform: rotate(8deg); }
html body.teacher-register-reference-page .teacher-register-decoration--formula { bottom: 56px; left: 38px; }

html body.teacher-register-reference-page .teacher-register-reference-content {
    position: relative;
    z-index: 3;
    padding: 0 45px 98px;
}

html body.teacher-register-reference-page .teacher-register-reference-panel {
    margin-top: -2px;
    padding: 26px 54px 22px;
    border: 1px solid #c8dafa;
    border-radius: 32px;
    background: rgba(255,255,255,.97);
    box-shadow: 0 16px 38px rgba(29, 75, 143, .16);
}

html body.teacher-register-reference-page .teacher-register-reference-form {
    display: grid;
    min-width: 0;
    gap: 18px;
    margin: 0;
}

html body.teacher-register-reference-page .teacher-register-reference-form h2 {
    display: flex;
    align-items: center;
    gap: 22px;
    margin: 0 0 2px;
    color: #092b73;
    font-size: 31px;
    font-weight: 900;
    line-height: 1.15;
}

html body.teacher-register-reference-page .teacher-register-title-icon {
    display: grid;
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(145deg, #1ba7ee, #4331f2 70%, #a23ff5);
    box-shadow: 0 7px 13px rgba(50, 63, 210, .25);
}

html body.teacher-register-reference-page .teacher-register-title-icon img {
    width: 27px;
    height: 27px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

html body.teacher-register-reference-page .teacher-register-reference-grid {
    display: grid;
    min-width: 0;
    gap: 22px;
}

html body.teacher-register-reference-page .teacher-register-reference-grid--two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

html body.teacher-register-reference-page .teacher-register-reference-field {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 68px;
    align-items: center;
    gap: 15px;
    margin: 0;
    padding: 0 58px 0 20px;
    border: 2px solid #d4def1;
    border-radius: 18px;
    color: #5c70a5;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}

html body.teacher-register-reference-page .teacher-register-reference-field:focus-within {
    border-color: #2684ee;
    box-shadow: 0 0 0 4px rgba(38,132,238,.12);
}

html body.teacher-register-reference-page .teacher-register-reference-field > img {
    display: block;
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(39%) sepia(27%) saturate(1203%) hue-rotate(187deg) brightness(90%);
}

html body.teacher-register-reference-page .teacher-register-reference-field > span:not(.teacher-register-reference-symbol) {
    position: absolute;
    z-index: 1;
    left: 61px;
    max-width: calc(100% - 112px);
    overflow: hidden;
    color: #6578aa;
    font-size: 17px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
}

html body.teacher-register-reference-page .teacher-register-reference-field input {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 21px 56px 7px 61px;
    border: 0;
    outline: 0;
    color: #0a2b70;
    background: transparent;
    font: inherit;
    font-size: 17px;
    font-weight: 700;
}

html body.teacher-register-reference-page .teacher-register-reference-field:has(input:not(:placeholder-shown)) > span,
html body.teacher-register-reference-page .teacher-register-reference-field:focus-within > span {
    top: 7px;
    font-size: 11px;
}

html body.teacher-register-reference-page .teacher-register-reference-symbol {
    display: grid;
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    place-items: center;
    color: #5c70a5;
    font-size: 27px;
    line-height: 1;
}

html body.teacher-register-reference-page .teacher-register-password-toggle {
    position: absolute;
    z-index: 4;
    top: 50%;
    right: 14px;
    display: grid;
    width: 38px;
    height: 38px;
    padding: 0;
    place-items: center;
    transform: translateY(-50%);
    border: 0;
    border-radius: 50%;
    color: #5c70a5;
    background: transparent;
    cursor: pointer;
}

html body.teacher-register-reference-page .teacher-school-picker { position: relative; min-width: 0; }

html body.teacher-register-reference-page .teacher-school-picker .teacher-register-reference-field { width: 100%; }

html body.teacher-register-reference-page .teacher-school-suggestions {
    position: absolute;
    z-index: 20;
    top: calc(100% + 7px);
    right: 0;
    left: 0;
    max-height: 240px;
    overflow-y: auto;
    padding: 7px;
    border: 1px solid #c8dafa;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 14px 30px rgba(16,58,124,.2);
}

html body.teacher-register-reference-page .teacher-school-option {
    display: grid;
    width: 100%;
    gap: 2px;
    padding: 10px 12px;
    border: 0;
    border-radius: 10px;
    color: #123477;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

html body.teacher-register-reference-page .teacher-school-option:hover,
html body.teacher-register-reference-page .teacher-school-option:focus-visible { background: #edf6ff; }
html body.teacher-register-reference-page .teacher-school-option span { color: #6c7ea6; font-size: 12px; }

html body.teacher-register-reference-page .teacher-field-note {
    margin: -10px 4px 0;
    color: #6b7ea7;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
}

html body.teacher-register-reference-page .teacher-register-reference-field--display {
    padding-right: 20px;
}

html body.teacher-register-reference-page .teacher-register-reference-field--display > span:not(.teacher-register-reference-symbol) {
    position: static;
    max-width: calc(100% - 42px);
    font-size: 17px;
}

html body.teacher-register-reference-page .teacher-register-reference-field--role {
    padding-right: 60px;
}

html body.teacher-register-reference-page .teacher-register-reference-field--role > span:not(.teacher-register-reference-symbol) {
    position: static;
    display: grid;
    max-width: none;
    overflow: visible;
    color: #102f70;
    font-size: 17px;
    text-overflow: clip;
    white-space: normal;
}

html body.teacher-register-reference-page .teacher-register-reference-field--role small {
    color: #6578aa;
    font-size: 12px;
    font-weight: 700;
}

html body.teacher-register-reference-page .teacher-register-reference-field--role b {
    position: absolute;
    right: 22px;
    color: #5270ae;
    font-size: 27px;
}

html body.teacher-register-reference-page .teacher-register-reference-grades {
    min-width: 0;
    margin: 0;
    padding: 16px 20px 18px;
    border: 1px solid #a8e2e7;
    border-radius: 18px;
    background: linear-gradient(120deg, #effcfc, #f2faff);
}

html body.teacher-register-reference-page .teacher-register-reference-grades legend {
    padding: 0 5px;
    color: #103174;
    font-size: 16px;
    font-weight: 900;
}

html body.teacher-register-reference-page .teacher-register-reference-grades legend span {
    display: inline-grid;
    width: 26px;
    height: 26px;
    margin-right: 6px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: #11ad9f;
}

html body.teacher-register-reference-page .teacher-register-reference-grades > p {
    margin: 0 0 12px;
    color: #6578a2;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
}

html body.teacher-register-reference-page .teacher-grade-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

html body.teacher-register-reference-page .teacher-grade-chip { min-width: 0; margin: 0; cursor: pointer; }
html body.teacher-register-reference-page .teacher-grade-chip input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}
html body.teacher-register-reference-page .teacher-grade-chip span {
    display: grid;
    min-height: 38px;
    padding: 5px 7px;
    place-items: center;
    border: 1px solid #c7d7ef;
    border-radius: 11px;
    color: #4f6597;
    background: #fff;
    font-size: 13px;
    font-weight: 800;
    text-align: center;
}
html body.teacher-register-reference-page .teacher-grade-chip input:checked + span {
    border-color: #11a99d;
    color: #08756f;
    background: #dff9f5;
    box-shadow: inset 0 0 0 1px #11a99d;
}
html body.teacher-register-reference-page .teacher-grade-chip input:focus-visible + span { outline: 3px solid rgba(25,115,235,.24); }

html body.teacher-register-reference-page .teacher-register-reference-check {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: 11px;
    margin: -4px 0;
    color: #3e588d;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}

html body.teacher-register-reference-page .teacher-register-reference-check input {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    margin: 0;
    accent-color: #156df1;
}

html body.teacher-register-reference-page .teacher-register-reference-check strong { color: #0767df; font-weight: 700; }

html body.teacher-register-reference-page .teacher-register-reference-submit {
    display: flex;
    width: 100%;
    min-height: 66px;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-top: 5px;
    padding: 12px 22px;
    border: 0;
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(105deg, #0a59ee 0%, #293cf3 48%, #8133f2 100%);
    box-shadow: 0 10px 20px rgba(54, 56, 222, .25);
    font: inherit;
    font-size: 23px;
    font-weight: 900;
    cursor: pointer;
}

html body.teacher-register-reference-page .teacher-register-reference-submit:hover { filter: brightness(1.04) saturate(1.08); }
html body.teacher-register-reference-page .teacher-register-reference-submit:focus-visible { outline: 4px solid rgba(29,111,235,.3); outline-offset: 3px; }

html body.teacher-register-reference-page .teacher-register-reference-login {
    margin: -6px 0 0;
    color: #526a9d;
    font-size: 17px;
    font-weight: 700;
    text-align: center;
}
html body.teacher-register-reference-page .teacher-register-reference-login a { color: #105ee7; font-weight: 900; }

html body.teacher-register-reference-page .teacher-register-reference-error {
    margin: 0 0 14px;
    padding: 14px 18px;
    border: 1px solid #ffbcbc;
    border-radius: 14px;
    color: #a40f26;
    background: #fff0f2;
    font-weight: 800;
}

html body.teacher-register-reference-page .teacher-register-reference-benefits { padding: 22px 0 4px; }
html body.teacher-register-reference-page .teacher-register-reference-benefits > h2 {
    margin: 0 0 13px;
    color: #092b70;
    font-size: 19px;
    font-weight: 900;
    text-align: center;
}
html body.teacher-register-reference-page .teacher-register-reference-benefits > h2 span { color: #8265f8; }

html body.teacher-register-reference-page .teacher-register-benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

html body.teacher-register-reference-page .teacher-register-benefits-grid article {
    display: flex;
    min-width: 0;
    min-height: 122px;
    align-items: center;
    gap: 13px;
    padding: 15px;
    border: 1px solid #b8d5f8;
    border-radius: 19px;
    background: rgba(247,251,255,.92);
}
html body.teacher-register-reference-page .teacher-register-benefits-grid article:nth-child(2) { border-color: #d5c6fa; background: #fbf9ff; }
html body.teacher-register-reference-page .teacher-register-benefits-grid article:nth-child(3) { border-color: #a9e2dc; background: #f1fcfb; }
html body.teacher-register-reference-page .teacher-register-benefits-grid img {
    display: block;
    width: 62px;
    height: 62px;
    flex: 0 0 62px;
    object-fit: contain;
}
html body.teacher-register-reference-page .teacher-register-benefits-grid div { min-width: 0; }
html body.teacher-register-reference-page .teacher-register-benefits-grid h3 {
    margin: 0 0 5px;
    color: #0b5fd9;
    font-size: 16px;
    font-weight: 900;
    line-height: 1.2;
}
html body.teacher-register-reference-page .teacher-register-benefits-grid article:nth-child(2) h3 { color: #6c36d9; }
html body.teacher-register-reference-page .teacher-register-benefits-grid article:nth-child(3) h3 { color: #078f88; }
html body.teacher-register-reference-page .teacher-register-benefits-grid p {
    margin: 0;
    overflow-wrap: anywhere;
    color: #183a78;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
}

@media (max-width: 720px) {
    html body.teacher-register-reference-page .teacher-register-reference-hero { min-height: 390px; }
    html body.teacher-register-reference-page .teacher-register-reference-hero::before { top: -115px; left: -125px; width: 330px; height: 220px; }
    html body.teacher-register-reference-page .teacher-register-reference-hero::after { right: -18%; bottom: -70px; width: 78%; height: 145px; }
    html body.teacher-register-reference-page .teacher-register-reference-back { top: 18px; left: 18px; width: 56px; height: 56px; }
    html body.teacher-register-reference-page .teacher-register-reference-logo { top: 28px; left: 50%; width: min(62vw, 278px); transform: translateX(-50%); }
    html body.teacher-register-reference-page .teacher-register-reference-robot { top: 132px; right: -4px; width: auto; height: min(49vw, 190px); }
    html body.teacher-register-reference-page .teacher-register-reference-heading { top: 245px; left: 18px; width: calc(100% - 36px); padding-right: 65px; text-align: left; }
    html body.teacher-register-reference-page .teacher-register-reference-heading h1 { margin-bottom: 7px; font-size: clamp(27px, 8.1vw, 38px); }
    html body.teacher-register-reference-page .teacher-register-reference-heading p { font-size: clamp(14px, 4vw, 18px); }
    html body.teacher-register-reference-page .teacher-register-reference-heading br { display: none; }
    html body.teacher-register-reference-page .teacher-register-decoration--sum { top: 112px; left: 16px; font-size: 18px; }
    html body.teacher-register-reference-page .teacher-register-decoration--root { top: 99px; right: 11px; font-size: 19px; }
    html body.teacher-register-reference-page .teacher-register-decoration--formula { display: none; }
    html body.teacher-register-reference-page .teacher-register-reference-content { padding: 0 14px 80px; }
    html body.teacher-register-reference-page .teacher-register-reference-panel { padding: 21px 17px 18px; border-radius: 24px; }
    html body.teacher-register-reference-page .teacher-register-reference-form { gap: 14px; }
    html body.teacher-register-reference-page .teacher-register-reference-form h2 { gap: 13px; font-size: 24px; }
    html body.teacher-register-reference-page .teacher-register-title-icon { width: 46px; height: 46px; flex-basis: 46px; }
    html body.teacher-register-reference-page .teacher-register-reference-grid--two { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    html body.teacher-register-reference-page .teacher-register-reference-school-row { grid-template-columns: minmax(0, 1fr); }
    html body.teacher-register-reference-page .teacher-register-reference-field { min-height: 62px; border-radius: 15px; }
    html body.teacher-register-reference-page .teacher-grade-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html body.teacher-register-reference-page .teacher-register-reference-submit { min-height: 60px; font-size: 20px; }
    html body.teacher-register-reference-page .teacher-register-benefits-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    html body.teacher-register-reference-page .teacher-register-benefits-grid article { min-height: 91px; }
}

@media (max-width: 420px) {
    html body.teacher-register-reference-page .teacher-register-reference-school-row { grid-template-columns: minmax(0, 1fr); }
    html body.teacher-register-reference-page .teacher-register-reference-field--display { min-height: 54px; }
    html body.teacher-register-reference-page .teacher-register-reference-check { font-size: 14px; }
}

@media (max-width: 340px) {
    html body.teacher-register-reference-page .teacher-register-reference-content { padding-inline: 8px; }
    html body.teacher-register-reference-page .teacher-register-reference-panel { padding-inline: 12px; }
    html body.teacher-register-reference-page .teacher-register-reference-heading { left: 12px; width: calc(100% - 24px); }
    html body.teacher-register-reference-page .teacher-register-reference-heading h1 { font-size: 26px; }
    html body.teacher-register-reference-page .teacher-register-reference-heading p { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
    html body.teacher-register-reference-page * { scroll-behavior: auto !important; transition: none !important; }
}

/* TEACHER-SIGNIN-REFERENCE-043 */
html:has(body.teacher-signin-reference-page),
html body.teacher-signin-reference-page {
    min-width: 0;
    margin: 0;
    overflow-x: clip;
    background: #e9f4ff;
}

html body.teacher-signin-reference-page {
    color: #0a2b73;
    font-family: "Nunito", "Trebuchet MS", Arial, sans-serif;
}

html body.teacher-signin-reference-page *,
html body.teacher-signin-reference-page *::before,
html body.teacher-signin-reference-page *::after { box-sizing: border-box; }

html body.teacher-signin-reference-page .teacher-signin-reference-shell {
    width: 100%;
    min-height: 100vh;
}

html body.teacher-signin-reference-page .teacher-signin-reference-card {
    position: relative;
    width: min(100%, 941px);
    min-height: 100vh;
    margin: 0 auto;
    overflow: hidden;
    background:
        radial-gradient(circle at 8% 11%, rgba(35,112,236,.72) 0 5px, transparent 6px),
        radial-gradient(circle at 87% 17%, rgba(35,112,236,.65) 0 5px, transparent 6px),
        linear-gradient(180deg, #e5f2ff 0, #f7fbff 35%, #fff 78%, #e9f4ff 100%);
    box-shadow: none;
}

html body.teacher-signin-reference-page .teacher-signin-reference-card::before,
html body.teacher-signin-reference-page .teacher-signin-reference-card::after {
    content: "";
    position: absolute;
    z-index: 0;
    bottom: -90px;
    width: 68%;
    height: 270px;
    border-radius: 50% 50% 0 0;
    background: rgba(208,227,255,.72);
}

html body.teacher-signin-reference-page .teacher-signin-reference-card::before { left: -19%; transform: rotate(13deg); }
html body.teacher-signin-reference-page .teacher-signin-reference-card::after { right: -22%; transform: rotate(-17deg); }

html body.teacher-signin-reference-page .teacher-signin-reference-hero {
    position: relative;
    z-index: 2;
    min-height: 704px;
    overflow: hidden;
    background:
        radial-gradient(circle at 20% 24%, rgba(255,255,255,.75) 0 2px, transparent 3px),
        radial-gradient(circle at 73% 8%, rgba(255,255,255,.48) 0 34px, transparent 36px),
        linear-gradient(125deg, #eef7ff 0%, #deedff 53%, #f3f8ff 100%);
}

html body.teacher-signin-reference-page .teacher-signin-reference-back {
    position: absolute;
    z-index: 8;
    top: 24px;
    left: 25px;
    display: grid;
    width: 82px;
    height: 82px;
    padding: 0;
    place-items: center;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,.95);
    border-radius: 50%;
    background: rgba(10,92,220,.94);
    box-shadow: 0 10px 22px rgba(7,50,150,.24);
}

html body.teacher-signin-reference-page .teacher-signin-reference-back img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
}

html body.teacher-signin-reference-page .teacher-signin-reference-brand {
    position: absolute;
    z-index: 4;
    top: 86px;
    left: 145px;
    display: grid;
    width: 720px;
    grid-template-columns: 390px 300px;
    align-items: center;
    gap: 14px;
}

html body.teacher-signin-reference-page .teacher-signin-reference-logo,
html body.teacher-signin-reference-page .teacher-signin-reference-robot {
    display: block;
    object-fit: contain;
    object-position: center;
}

html body.teacher-signin-reference-page .teacher-signin-reference-logo {
    width: 390px;
    height: auto;
}

html body.teacher-signin-reference-page .teacher-signin-reference-robot {
    width: auto;
    height: 390px;
    filter: drop-shadow(0 13px 13px rgba(14,74,142,.16));
}

html body.teacher-signin-reference-page .teacher-signin-reference-heading {
    position: absolute;
    z-index: 5;
    top: 528px;
    right: 80px;
    left: 80px;
    text-align: center;
}

html body.teacher-signin-reference-page .teacher-signin-reference-heading h1 {
    margin: 0 0 12px;
    color: #0a2f7c;
    font-size: 54px;
    font-weight: 900;
    letter-spacing: -.035em;
    line-height: 1.05;
}

html body.teacher-signin-reference-page .teacher-signin-reference-heading p {
    margin: 0;
    color: #52699a;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.35;
}

html body.teacher-signin-reference-page .teacher-signin-decoration {
    position: absolute;
    z-index: 3;
    color: #f8b91d;
    font-weight: 900;
    line-height: 1;
    text-shadow: 0 4px 8px rgba(220,142,0,.15);
}

html body.teacher-signin-reference-page .teacher-signin-decoration--spark-one { top: 48px; left: 214px; font-size: 52px; }
html body.teacher-signin-reference-page .teacher-signin-decoration--spark-two { top: 56px; right: 88px; font-size: 44px; }
html body.teacher-signin-reference-page .teacher-signin-decoration--plus { top: 136px; left: 126px; color: #3994eb; font-size: 67px; transform: rotate(-10deg); }
html body.teacher-signin-reference-page .teacher-signin-decoration--pi { top: 428px; right: 45px; color: rgba(81,132,221,.2); font-size: 76px; font-family: Georgia, serif; }
html body.teacher-signin-reference-page .teacher-signin-decoration--planet {
    top: 34px;
    left: 558px;
    width: 116px;
    height: 58px;
    border: 17px solid rgba(255,255,255,.36);
    border-radius: 50%;
    transform: rotate(-18deg);
}
html body.teacher-signin-reference-page .teacher-signin-decoration--planet::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 53px;
    height: 53px;
    transform: translate(-50%,-50%);
    border-radius: 50%;
    background: rgba(255,255,255,.27);
}

html body.teacher-signin-reference-page .teacher-signin-reference-content {
    position: relative;
    z-index: 3;
    padding: 0 82px 112px;
}

html body.teacher-signin-reference-page .teacher-signin-reference-panel {
    padding: 36px 38px 28px;
    border: 0;
    border-radius: 31px;
    background: rgba(255,255,255,.97);
    box-shadow: none;
}

html body.teacher-signin-reference-page .teacher-signin-reference-form {
    display: grid;
    min-width: 0;
    gap: 22px;
    margin: 0;
}

html body.teacher-signin-reference-page .teacher-signin-reference-field {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 88px;
    align-items: center;
    gap: 18px;
    margin: 0;
    padding: 0 66px 0 27px;
    border: 2px solid #cad9f3;
    border-radius: 19px;
    color: #536c9f;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}

html body.teacher-signin-reference-page .teacher-signin-reference-field:focus-within {
    border-color: #2584ed;
    box-shadow: 0 0 0 4px rgba(37,132,237,.12);
}

html body.teacher-signin-reference-page .teacher-signin-reference-field > img,
html body.teacher-signin-reference-page .teacher-signin-reference-symbol {
    display: grid;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    place-items: center;
    object-fit: contain;
    color: #0c77eb;
    font-size: 35px;
    line-height: 1;
    filter: brightness(0) saturate(100%) invert(39%) sepia(96%) saturate(2351%) hue-rotate(196deg) brightness(96%);
}

html body.teacher-signin-reference-page .teacher-signin-reference-field > span:not(.teacher-signin-reference-symbol) {
    position: absolute;
    z-index: 1;
    left: 95px;
    max-width: calc(100% - 160px);
    overflow: hidden;
    color: #6578a7;
    font-size: 23px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
}

html body.teacher-signin-reference-page .teacher-signin-reference-field input {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 82px;
    z-index: 2;
    width: calc(100% - 82px);
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 30px 66px 9px 13px;
    border: 0;
    outline: 0;
    color: #0b2f78;
    background: transparent;
    font: inherit;
    font-size: 21px;
    font-weight: 700;
}

html body.teacher-signin-reference-page .teacher-signin-reference-field:has(input:not(:placeholder-shown)) > span,
html body.teacher-signin-reference-page .teacher-signin-reference-field:focus-within > span {
    top: 9px;
    font-size: 12px;
}

html body.teacher-signin-reference-page .teacher-signin-password-toggle {
    position: absolute;
    z-index: 5;
    top: 50%;
    right: 20px;
    display: grid;
    width: 44px;
    height: 44px;
    padding: 0;
    place-items: center;
    transform: translateY(-50%);
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

html body.teacher-signin-reference-page .teacher-signin-password-toggle img {
    display: block;
    width: 34px;
    height: 34px;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(40%) sepia(28%) saturate(1271%) hue-rotate(187deg) brightness(90%);
}

html body.teacher-signin-reference-page .teacher-signin-reference-row {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    color: #425f96;
    font-size: 18px;
    font-weight: 700;
}

html body.teacher-signin-reference-page .teacher-signin-reference-row > a {
    color: #0872ec;
    text-decoration: none;
}

html body.teacher-signin-reference-page .teacher-signin-reference-remember {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 0;
    cursor: pointer;
}

html body.teacher-signin-reference-page .teacher-signin-reference-remember input {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    margin: 0;
    accent-color: #1276ee;
}

html body.teacher-signin-reference-page .teacher-signin-reference-submit {
    display: flex;
    width: 100%;
    min-height: 96px;
    align-items: center;
    justify-content: center;
    gap: 19px;
    padding: 14px 24px;
    border: 0;
    border-bottom: 5px solid #063bc9;
    border-radius: 19px;
    color: #fff;
    background: linear-gradient(105deg, #08bce7 0%, #175eef 46%, #8b29ed 100%);
    box-shadow: 0 12px 22px rgba(38,74,207,.24);
    font: inherit;
    font-size: 32px;
    font-weight: 900;
    cursor: pointer;
}

html body.teacher-signin-reference-page .teacher-signin-reference-submit img {
    display: block;
    width: 38px;
    height: 38px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}
html body.teacher-signin-reference-page .teacher-signin-reference-submit:hover { filter: brightness(1.04) saturate(1.08); }
html body.teacher-signin-reference-page .teacher-signin-reference-submit:focus-visible { outline: 4px solid rgba(29,111,235,.3); outline-offset: 3px; }

html body.teacher-signin-reference-page .teacher-signin-reference-register {
    margin: -4px 0 0;
    color: #536a9c;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
}

html body.teacher-signin-reference-page .teacher-signin-reference-register a {
    color: #096feb;
    font-weight: 900;
    text-decoration: none;
}

html body.teacher-signin-reference-page .teacher-signin-reference-message {
    margin: 0 0 18px;
    padding: 14px 18px;
    border-radius: 14px;
    font-weight: 800;
}

html body.teacher-signin-reference-page .teacher-signin-reference-benefits {
    position: relative;
    z-index: 2;
    padding: 35px 0 14px;
}

html body.teacher-signin-reference-page .teacher-signin-reference-benefits > h2 {
    margin: 0 0 20px;
    color: #092c73;
    font-size: 23px;
    font-weight: 900;
    text-align: center;
}

html body.teacher-signin-reference-page .teacher-signin-reference-benefits > h2 span { color: #f5b51c; }

html body.teacher-signin-reference-page .teacher-signin-benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

html body.teacher-signin-reference-page .teacher-signin-benefits-grid article {
    display: flex;
    min-width: 0;
    min-height: 284px;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 23px 17px 20px;
    border: 1px solid #c9dafa;
    border-radius: 22px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 12px 26px rgba(40,83,149,.13);
    text-align: center;
}

html body.teacher-signin-reference-page .teacher-signin-benefits-grid img {
    display: block;
    width: 112px;
    height: 112px;
    flex: 0 0 112px;
    margin-bottom: 12px;
    object-fit: contain;
}

html body.teacher-signin-reference-page .teacher-signin-benefits-grid h3 {
    margin: 0 0 9px;
    color: #092b72;
    font-size: 21px;
    font-weight: 900;
    line-height: 1.15;
}

html body.teacher-signin-reference-page .teacher-signin-benefits-grid p {
    margin: 0;
    overflow-wrap: anywhere;
    color: #52699a;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
}

@media (max-width: 720px) {
    html body.teacher-signin-reference-page .teacher-signin-reference-hero { min-height: 495px; }
    html body.teacher-signin-reference-page .teacher-signin-reference-back { top: 17px; left: 17px; width: 58px; height: 58px; }
    html body.teacher-signin-reference-page .teacher-signin-reference-brand {
        top: 58px;
        left: 50%;
        width: min(94vw, 500px);
        grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
        gap: 0;
        transform: translateX(-50%);
    }
    html body.teacher-signin-reference-page .teacher-signin-reference-logo { width: 100%; height: auto; }
    html body.teacher-signin-reference-page .teacher-signin-reference-robot { width: 100%; height: auto; }
    html body.teacher-signin-reference-page .teacher-signin-reference-heading { top: 327px; right: 18px; left: 18px; }
    html body.teacher-signin-reference-page .teacher-signin-reference-heading h1 { margin-bottom: 8px; font-size: clamp(31px, 9.2vw, 42px); }
    html body.teacher-signin-reference-page .teacher-signin-reference-heading p { font-size: clamp(14px, 4.1vw, 18px); }
    html body.teacher-signin-reference-page .teacher-signin-reference-heading br { display: none; }
    html body.teacher-signin-reference-page .teacher-signin-decoration--spark-one { top: 30px; left: 88px; font-size: 30px; }
    html body.teacher-signin-reference-page .teacher-signin-decoration--spark-two { top: 43px; right: 20px; font-size: 27px; }
    html body.teacher-signin-reference-page .teacher-signin-decoration--plus { top: 111px; left: 28px; font-size: 38px; }
    html body.teacher-signin-reference-page .teacher-signin-decoration--pi { top: 283px; right: 16px; font-size: 45px; }
    html body.teacher-signin-reference-page .teacher-signin-decoration--planet { top: 20px; left: 56%; width: 73px; height: 38px; border-width: 11px; }
    html body.teacher-signin-reference-page .teacher-signin-reference-content { padding: 0 14px 88px; }
    html body.teacher-signin-reference-page .teacher-signin-reference-panel { padding: 21px 17px 20px; border-radius: 24px; }
    html body.teacher-signin-reference-page .teacher-signin-reference-form { gap: 16px; }
    html body.teacher-signin-reference-page .teacher-signin-reference-field { min-height: 68px; padding-left: 19px; border-radius: 16px; }
    html body.teacher-signin-reference-page .teacher-signin-reference-field > img,
    html body.teacher-signin-reference-page .teacher-signin-reference-symbol { width: 28px; height: 28px; flex-basis: 28px; font-size: 27px; }
    html body.teacher-signin-reference-page .teacher-signin-reference-field > span:not(.teacher-signin-reference-symbol) { left: 62px; max-width: calc(100% - 118px); font-size: 17px; }
    html body.teacher-signin-reference-page .teacher-signin-reference-field input {
        left: 49px;
        width: calc(100% - 49px);
        padding: 24px 56px 7px 13px;
        font-size: 17px;
    }
    html body.teacher-signin-reference-page .teacher-signin-password-toggle { right: 9px; }
    html body.teacher-signin-reference-page .teacher-signin-password-toggle img { width: 27px; height: 27px; }
    html body.teacher-signin-reference-page .teacher-signin-reference-row { gap: 10px; font-size: 14px; }
    html body.teacher-signin-reference-page .teacher-signin-reference-remember { gap: 8px; }
    html body.teacher-signin-reference-page .teacher-signin-reference-remember input { width: 25px; height: 25px; flex-basis: 25px; }
    html body.teacher-signin-reference-page .teacher-signin-reference-submit { min-height: 65px; border-bottom-width: 4px; border-radius: 16px; font-size: 23px; }
    html body.teacher-signin-reference-page .teacher-signin-reference-submit img { width: 29px; height: 29px; }
    html body.teacher-signin-reference-page .teacher-signin-reference-register { font-size: 16px; }
    html body.teacher-signin-reference-page .teacher-signin-reference-benefits { padding-top: 28px; }
    html body.teacher-signin-reference-page .teacher-signin-reference-benefits > h2 { font-size: 19px; line-height: 1.25; }
    html body.teacher-signin-reference-page .teacher-signin-benefits-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    html body.teacher-signin-reference-page .teacher-signin-benefits-grid article {
        min-height: 116px;
        display: grid;
        grid-template-columns: 82px minmax(0, 1fr);
        grid-template-rows: auto auto;
        column-gap: 15px;
        align-items: center;
        padding: 15px;
        text-align: left;
    }
    html body.teacher-signin-reference-page .teacher-signin-benefits-grid img { grid-row: 1 / 3; width: 82px; height: 82px; margin: 0; }
    html body.teacher-signin-reference-page .teacher-signin-benefits-grid h3 { align-self: end; margin-bottom: 4px; font-size: 18px; }
    html body.teacher-signin-reference-page .teacher-signin-benefits-grid p { align-self: start; font-size: 14px; }
}

@media (max-width: 350px) {
    html body.teacher-signin-reference-page .teacher-signin-reference-content { padding-inline: 8px; }
    html body.teacher-signin-reference-page .teacher-signin-reference-panel { padding-inline: 12px; }
    html body.teacher-signin-reference-page .teacher-signin-reference-row { align-items: flex-start; flex-direction: column; }
    html body.teacher-signin-reference-page .teacher-signin-benefits-grid article { grid-template-columns: 67px minmax(0, 1fr); column-gap: 10px; }
    html body.teacher-signin-reference-page .teacher-signin-benefits-grid img { width: 67px; height: 67px; }
}

@media (prefers-reduced-motion: reduce) {
    html body.teacher-signin-reference-page * { scroll-behavior: auto !important; transition: none !important; }
}

/* PARENT-SIGNIN-REFERENCE-046 */
html:has(body.parent-login-v2-page),
html body.parent-login-v2-page {
    min-width: 0;
    min-height: 100%;
    margin: 0;
    overflow-x: hidden;
    color: #0a2673;
    background: #eef8ff;
}

html body.parent-login-v2-page::before,
html body.parent-login-v2-page::after { display: none !important; }

html body.parent-login-v2-page *,
html body.parent-login-v2-page *::before,
html body.parent-login-v2-page *::after { box-sizing: border-box; }

html body.parent-login-v2-page .parent-login-v2-shell {
    position: relative;
    width: min(100%, 941px);
    min-height: 100vh;
    margin: 0 auto;
    padding: 0 6.8cqi 5cqi;
    overflow: hidden;
    container-type: inline-size;
    background-color: #eff9ff;
    background-image: url('../images/parent/sign-in-v2/background.png');
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% auto;
    box-shadow: 0 0 42px rgba(64, 112, 194, .13);
}

html body.parent-login-v2-page .parent-login-v2-back {
    position: absolute;
    z-index: 10;
    top: 2.1cqi;
    left: 2.8cqi;
    display: grid;
    width: clamp(54px, 8.9cqi, 84px);
    height: clamp(54px, 8.9cqi, 84px);
    padding: 0;
    place-items: center;
    border-radius: 50%;
    filter: drop-shadow(0 8px 12px rgba(21, 73, 170, .2));
}

html body.parent-login-v2-page .parent-login-v2-back img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

html body.parent-login-v2-page .parent-login-v2-back:focus-visible,
html body.parent-login-v2-page :where(input,button,a):focus-visible {
    outline: 3px solid rgba(20, 108, 247, .54);
    outline-offset: 3px;
}

html body.parent-login-v2-page .parent-login-v2-hero {
    position: relative;
    height: clamp(330px, 62.8cqi, 590px);
    margin: 0 -6.8cqi;
    overflow: hidden;
}

html body.parent-login-v2-page .parent-login-v2-logo {
    position: absolute;
    z-index: 2;
    top: 4.5cqi;
    left: 50%;
    display: block;
    width: min(52cqi, 489px);
    height: min(27cqi, 254px);
    transform: translateX(-50%);
    object-fit: cover;
    object-position: center;
    filter: drop-shadow(0 8px 8px rgba(15, 63, 150, .19));
}

html body.parent-login-v2-page .parent-login-v2-characters {
    position: absolute;
    z-index: 1;
    right: 5.5cqi;
    bottom: -1.4cqi;
    display: block;
    width: min(75cqi, 706px);
    height: auto;
    max-width: none;
    object-fit: contain;
    filter: drop-shadow(0 12px 15px rgba(34, 76, 143, .15));
}

html body.parent-login-v2-page .parent-login-v2-panel {
    position: relative;
    z-index: 3;
    width: 100%;
    margin: -1.8cqi auto 2.5cqi;
    padding: clamp(25px, 3.5cqi, 34px) clamp(18px, 6cqi, 57px) clamp(24px, 3.8cqi, 36px);
    border: 1px solid rgba(213, 225, 243, .88);
    border-radius: clamp(28px, 5cqi, 48px);
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 20px 40px rgba(31, 70, 137, .18), inset 0 1px 0 #fff;
}

html body.parent-login-v2-page .parent-login-v2-heading {
    margin: 0 auto clamp(20px, 3cqi, 30px);
    text-align: center;
}

html body.parent-login-v2-page .parent-login-v2-heading h1 {
    margin: 0 0 clamp(8px, 1.1cqi, 12px);
    color: #09246f;
    font-family: "Fredoka", "Inter", system-ui, sans-serif;
    font-size: clamp(31px, 5.2cqi, 49px);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -.02em;
}

html body.parent-login-v2-page .parent-login-v2-heading p {
    width: min(100%, 610px);
    margin: 0 auto;
    color: #546fa6;
    font-size: clamp(15px, 2.55cqi, 24px);
    line-height: 1.38;
}

html body.parent-login-v2-page .parent-login-v2-panel .form-message {
    width: 100%;
    margin: 0 0 12px;
    padding: 11px 14px;
    border-radius: 14px;
    font-size: clamp(13px, 1.7cqi, 16px);
}

html body.parent-login-v2-page .parent-login-v2-form { display: grid; gap: clamp(12px, 1.55cqi, 16px); }

html body.parent-login-v2-page .parent-login-v2-field {
    position: relative;
    display: grid;
    width: 100%;
    min-width: 0;
    height: clamp(60px, 9.8cqi, 92px);
    grid-template-columns: clamp(48px, 7.6cqi, 72px) minmax(0, 1fr) clamp(46px, 6.7cqi, 64px);
    align-items: center;
    padding: 0 clamp(8px, 1.6cqi, 16px);
    border: clamp(1px, .22cqi, 2px) solid #d0d9e8;
    border-radius: clamp(16px, 2.4cqi, 23px);
    background: rgba(255, 255, 255, .94);
    transition: border-color .18s ease, box-shadow .18s ease;
}

html body.parent-login-v2-page .parent-login-v2-field:focus-within {
    border-color: #2187f5;
    box-shadow: 0 0 0 4px rgba(33, 135, 245, .12);
}

html body.parent-login-v2-page .parent-login-v2-field__icon {
    display: grid;
    width: clamp(42px, 6.3cqi, 59px);
    height: clamp(42px, 6.3cqi, 59px);
    place-items: center;
    border-radius: clamp(13px, 1.8cqi, 18px);
    background: linear-gradient(145deg, #f4f8ff, #eaf1ff);
}

html body.parent-login-v2-page .parent-login-v2-field__icon img {
    display: block;
    width: 48%;
    height: 48%;
    object-fit: contain;
}

html body.parent-login-v2-page .parent-login-v2-field:first-of-type .parent-login-v2-field__icon img {
    filter: brightness(0) saturate(100%) invert(35%) sepia(98%) saturate(1592%) hue-rotate(201deg) brightness(96%);
}

html body.parent-login-v2-page .parent-login-v2-field input {
    width: 100%;
    min-width: 0;
    height: 100%;
    padding: 0 clamp(8px, 1.5cqi, 15px);
    border: 0;
    outline: 0;
    color: #102b72;
    background: transparent;
    font: inherit;
    font-size: clamp(16px, 2.7cqi, 26px);
}

html body.parent-login-v2-page .parent-login-v2-field input::placeholder { color: #7689ae; opacity: 1; }

html body.parent-login-v2-page .parent-login-v2-password-toggle {
    display: grid;
    width: clamp(44px, 5.8cqi, 55px);
    height: clamp(44px, 5.8cqi, 55px);
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

html body.parent-login-v2-page .parent-login-v2-password-toggle img {
    width: 55%;
    height: 55%;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(48%) sepia(20%) saturate(997%) hue-rotate(182deg) brightness(90%);
}

html body.parent-login-v2-page .parent-login-v2-info {
    display: flex;
    min-height: clamp(46px, 5.9cqi, 56px);
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0;
    padding: 8px 14px;
    border: 1px solid #a8cef8;
    border-radius: 16px;
    color: #173b82;
    background: linear-gradient(90deg, #eef7ff, #f4f8ff);
    font-size: clamp(12px, 1.8cqi, 17px);
    line-height: 1.25;
    text-align: center;
}

html body.parent-login-v2-page .parent-login-v2-info span {
    display: grid;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(#51a9ff, #1468e9);
    box-shadow: 0 3px 8px rgba(24, 101, 222, .27);
    font-weight: 800;
}

html body.parent-login-v2-page .parent-login-v2-row {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

html body.parent-login-v2-page .parent-login-v2-row a {
    color: #0874ed;
    font-size: clamp(13px, 1.9cqi, 18px);
    text-decoration: none;
}

html body.parent-login-v2-page .parent-login-v2-remember {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
    color: #0a2469;
    font-size: clamp(13px, 1.9cqi, 18px);
}

html body.parent-login-v2-page .parent-login-v2-remember input {
    width: clamp(24px, 3.1cqi, 30px);
    height: clamp(24px, 3.1cqi, 30px);
    flex: 0 0 auto;
    margin: 0;
    accent-color: #176fe7;
}

html body.parent-login-v2-page .parent-login-v2-submit {
    display: flex;
    width: 100%;
    min-height: clamp(58px, 8.7cqi, 82px);
    align-items: center;
    justify-content: center;
    gap: clamp(10px, 1.7cqi, 16px);
    margin-top: 1px;
    padding: 10px 20px;
    border: 2px solid rgba(255, 255, 255, .8);
    border-bottom-color: #5220d8;
    border-radius: clamp(18px, 2.8cqi, 27px);
    color: #fff;
    background: linear-gradient(100deg, #08b7ed 0%, #176cf1 30%, #6a43f2 67%, #d52fd3 100%);
    box-shadow: 0 9px 18px rgba(56, 52, 216, .26), inset 0 1px 0 rgba(255,255,255,.54);
    font-family: "Fredoka", "Inter", system-ui, sans-serif;
    font-size: clamp(22px, 3.5cqi, 33px);
    font-weight: 700;
    cursor: pointer;
}

html body.parent-login-v2-page .parent-login-v2-submit img {
    width: clamp(26px, 3.6cqi, 34px);
    height: clamp(26px, 3.6cqi, 34px);
    object-fit: contain;
    filter: brightness(0) invert(1);
}

html body.parent-login-v2-page .parent-login-v2-submit:hover { filter: saturate(1.08) brightness(1.03); }
html body.parent-login-v2-page .parent-login-v2-submit:active { transform: translateY(1px); }

html body.parent-login-v2-page .parent-login-v2-register {
    margin: clamp(17px, 2.5cqi, 24px) 0 0;
    color: #091f61;
    font-size: clamp(16px, 2.4cqi, 23px);
    text-align: center;
}

html body.parent-login-v2-page .parent-login-v2-register a {
    color: #7048ef;
    font-weight: 700;
    text-decoration: none;
}

html body.parent-login-v2-page .parent-login-v2-google {
    display: flex;
    width: fit-content;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin: 13px auto 0;
    padding: 8px 16px;
    border: 1px solid #d8e2f0;
    border-radius: 999px;
    color: #4e638d;
    background: #fff;
    box-shadow: 0 4px 10px rgba(47, 79, 135, .08);
    font-size: clamp(12px, 1.6cqi, 15px);
    text-decoration: none;
}

html body.parent-login-v2-page .parent-login-v2-google img { width: 20px; height: 20px; object-fit: contain; }

html body.parent-login-v2-page .parent-login-v2-benefits {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(8px, 1.5cqi, 14px);
    margin: 0 auto;
}

html body.parent-login-v2-page .parent-login-v2-benefit {
    display: flex;
    min-width: 0;
    min-height: clamp(205px, 31cqi, 292px);
    align-items: center;
    flex-direction: column;
    padding: clamp(10px, 1.5cqi, 15px) clamp(7px, 1.3cqi, 12px) clamp(12px, 1.7cqi, 16px);
    overflow: hidden;
    border: 2px solid rgba(255,255,255,.94);
    border-radius: clamp(20px, 3.1cqi, 30px);
    background: rgba(247, 253, 255, .91);
    box-shadow: 0 11px 24px rgba(37, 78, 145, .13), inset 0 0 0 1px rgba(177, 220, 245, .7);
    text-align: center;
}

html body.parent-login-v2-page .parent-login-v2-benefit--rewards { background: rgba(250, 244, 255, .94); }

html body.parent-login-v2-page .parent-login-v2-benefit__art {
    position: relative;
    width: clamp(72px, 15cqi, 141px);
    height: clamp(72px, 15cqi, 141px);
    flex: 0 0 auto;
    overflow: hidden;
    border: 4px solid rgba(255,255,255,.9);
    border-radius: 50%;
    background: #eaf6ff;
    box-shadow: 0 6px 12px rgba(30, 91, 176, .18);
}

html body.parent-login-v2-page .parent-login-v2-benefit__art img {
    position: absolute;
    display: block;
    max-width: none;
}

html body.parent-login-v2-page .parent-login-v2-benefit--children .parent-login-v2-benefit__art img {
    top: 0;
    left: -25%;
    width: 150%;
    height: 100%;
    object-fit: cover;
}

html body.parent-login-v2-page .parent-login-v2-benefit--rewards .parent-login-v2-benefit__art img,
html body.parent-login-v2-page .parent-login-v2-benefit--activity .parent-login-v2-benefit__art img {
    top: -20%;
    left: -45%;
    width: 190%;
    height: auto;
}

html body.parent-login-v2-page .parent-login-v2-benefit h2 {
    margin: clamp(7px, 1.1cqi, 11px) 0 4px;
    color: #08236c;
    font-family: "Fredoka", "Inter", system-ui, sans-serif;
    font-size: clamp(14px, 2.35cqi, 22px);
    line-height: 1.05;
}

html body.parent-login-v2-page .parent-login-v2-benefit p {
    margin: 0;
    color: #425f96;
    font-size: clamp(10px, 1.65cqi, 15.5px);
    line-height: 1.28;
    overflow-wrap: anywhere;
}

html body.parent-login-v2-page .parent-login-v2-benefit > a {
    display: grid;
    width: clamp(44px, 5.8cqi, 55px);
    height: clamp(44px, 5.8cqi, 55px);
    flex: 0 0 auto;
    margin: auto auto 0;
    place-items: center;
    border: 3px solid rgba(255,255,255,.9);
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(#28bfff, #0870e8);
    box-shadow: 0 6px 10px rgba(24, 103, 219, .24);
    font-size: clamp(24px, 3.5cqi, 33px);
    line-height: 1;
    text-decoration: none;
}

html body.parent-login-v2-page .parent-login-v2-benefit--children > a { background: linear-gradient(#31cec2, #04a9b0); }
html body.parent-login-v2-page .parent-login-v2-benefit--rewards > a { background: linear-gradient(#9b61ff, #6635e9); }

@media (max-width: 560px) {
    html body.parent-login-v2-page .parent-login-v2-shell { padding-right: 12px; padding-left: 12px; background-size: auto 100%; }
    html body.parent-login-v2-page .parent-login-v2-hero { height: 300px; margin-right: -12px; margin-left: -12px; }
    html body.parent-login-v2-page .parent-login-v2-logo { top: 22px; width: min(57cqi, 222px); height: min(30cqi, 117px); }
    html body.parent-login-v2-page .parent-login-v2-characters { right: 4cqi; bottom: 0; width: min(82cqi, 320px); }
    html body.parent-login-v2-page .parent-login-v2-panel { margin-top: -24px; padding: 24px 14px; }
    html body.parent-login-v2-page .parent-login-v2-heading p { width: 95%; }
    html body.parent-login-v2-page .parent-login-v2-row { align-items: flex-start; }
    html body.parent-login-v2-page .parent-login-v2-row a { max-width: 48%; text-align: right; }
    html body.parent-login-v2-page .parent-login-v2-benefits { gap: 7px; }
    html body.parent-login-v2-page .parent-login-v2-benefit { min-height: 210px; padding: 9px 5px 11px; }
}

@media (max-width: 350px) {
    html body.parent-login-v2-page .parent-login-v2-characters { right: 1cqi; width: 86cqi; }
    html body.parent-login-v2-page .parent-login-v2-panel { padding-right: 10px; padding-left: 10px; }
    html body.parent-login-v2-page .parent-login-v2-info { align-items: flex-start; text-align: left; }
    html body.parent-login-v2-page .parent-login-v2-benefit { min-height: 220px; }
    html body.parent-login-v2-page .parent-login-v2-benefit h2 { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
    html body.parent-login-v2-page * { scroll-behavior: auto !important; transition: none !important; }
}

/* HOME-REFERENCE-048: functional reconstruction of the supplied start-screen reference. */
html body.home-reference-page {
    min-width: 0;
    min-height: 100dvh;
    margin: 0;
    overflow-x: hidden;
    color: #092b74;
    background:
        radial-gradient(circle at 15% 8%, rgba(255,255,255,.94), transparent 24%),
        linear-gradient(180deg, #a9e7ff 0%, #dff7ff 46%, #b9edff 100%);
}

html body.home-reference-page .home-reference {
    position: relative;
    display: grid;
    width: min(100%, 941px);
    min-width: 0;
    margin: 0 auto;
    padding: clamp(8px, 2.1vw, 20px) clamp(7px, 1.7vw, 16px) clamp(12px, 3vw, 28px);
    gap: clamp(6px, 1.5cqi, 14px);
    overflow: hidden;
    box-sizing: border-box;
    container-type: inline-size;
    background:
        radial-gradient(circle at 5% 31%, rgba(255,255,255,.9), transparent 19%),
        radial-gradient(circle at 96% 72%, rgba(157,225,255,.58), transparent 23%),
        linear-gradient(180deg, rgba(228,249,255,.9), rgba(184,237,255,.88));
}

html body.home-reference-page .home-reference *,
html body.home-reference-page .home-reference *::before,
html body.home-reference-page .home-reference *::after {
    box-sizing: border-box;
}

html body.home-reference-page .home-reference__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

html body.home-reference-page .home-reference-install,
html body.home-reference-page .home-reference-child,
html body.home-reference-page .home-reference-row {
    color: inherit;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

html body.home-reference-page .home-reference-install {
    position: relative;
    isolation: isolate;
    display: grid;
    width: 100%;
    min-width: 0;
    aspect-ratio: 3.04 / 1;
    padding: 2.4cqi 2.7cqi;
    margin-bottom: clamp(10px, 2.5cqi, 24px);
    grid-template-columns: 29% minmax(0, 1fr) 31%;
    align-items: center;
    gap: 1.5cqi;
    overflow: hidden;
    border: clamp(2px, .55cqi, 5px) solid rgba(255,255,255,.97);
    border-radius: clamp(15px, 4.1cqi, 39px);
    background:
        radial-gradient(circle at 38% 78%, rgba(255,255,255,.72), transparent 2%),
        repeating-conic-gradient(from 260deg at 44% 72%, rgba(255,255,255,.17) 0 9deg, transparent 9deg 21deg),
        linear-gradient(115deg, #fff5a7 0%, #fff3a4 43%, #ffe785 100%);
    box-shadow: 0 1.4cqi 2.5cqi rgba(78,126,169,.2), inset 0 0 0 1px rgba(255,218,81,.34);
}

html body.home-reference-page .home-reference-install::after {
    position: absolute;
    right: -2%;
    bottom: -14%;
    z-index: -1;
    width: 20%;
    height: 38%;
    border-radius: 50% 50% 0 0;
    background: rgba(255,255,255,.94);
    box-shadow: -5cqi 1cqi 0 rgba(255,255,255,.9), -9cqi 2cqi 0 rgba(255,255,255,.88);
    content: "";
}

html body.home-reference-page .home-reference-install__art {
    display: block;
    width: 100%;
    height: 25cqi;
    align-self: end;
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 1cqi 1.2cqi rgba(20,71,154,.18));
}

html body.home-reference-page .home-reference-install__copy,
html body.home-reference-page .home-reference-install__copy strong,
html body.home-reference-page .home-reference-install__copy small {
    display: block;
    min-width: 0;
}

html body.home-reference-page .home-reference-install__copy strong {
    color: #0b3d9f;
    font-size: clamp(17px, 4.25cqi, 40px);
    font-weight: 950;
    line-height: .95;
    letter-spacing: -.04em;
    text-shadow: 0 .3cqi 0 #fff, 0 .55cqi .65cqi rgba(14,55,135,.17);
}

html body.home-reference-page .home-reference-install__copy small {
    margin-top: 1.4cqi;
    color: #0c2f75;
    font-size: clamp(10px, 2.15cqi, 20px);
    font-weight: 750;
    line-height: 1.28;
}

html body.home-reference-page .home-reference-install__button {
    position: relative;
    display: flex;
    width: 100%;
    height: 12.2cqi;
    min-height: 44px;
    padding: 0 8%;
    align-items: center;
    justify-content: center;
    gap: 9%;
    overflow: hidden;
    border: clamp(2px, .42cqi, 4px) solid rgba(255,255,255,.72);
    border-radius: 4cqi;
    color: #fff;
    background: linear-gradient(180deg, #ffb20d 0%, #ff7b00 50%, #f24700 100%);
    box-shadow: 0 1.2cqi 0 #d13b00, 0 1.7cqi 2.1cqi rgba(220,76,0,.28), inset 0 .5cqi .55cqi rgba(255,255,255,.35);
    font-size: clamp(12px, 3.25cqi, 31px);
    font-weight: 950;
    line-height: 1;
    white-space: nowrap;
    text-shadow: 0 .25cqi .35cqi rgba(115,44,0,.25);
}

html body.home-reference-page .home-reference-install__button b {
    transform: translateY(-.15em);
    font-size: 1.5em;
    font-weight: 600;
}

html body.home-reference-page .home-reference-install__sparkle {
    position: absolute;
    z-index: 2;
    color: #ff8d00;
    font-size: 3cqi;
    text-shadow: 0 .25cqi .3cqi rgba(187,69,0,.25);
}

html body.home-reference-page .home-reference-install__sparkle--one { top: 4%; left: 4%; }
html body.home-reference-page .home-reference-install__sparkle--two { top: 7%; right: 29%; }

html body.home-reference-page .home-reference-group {
    position: relative;
    display: grid;
    min-width: 0;
    padding: 0;
    align-content: start;
    gap: 1.5cqi;
    overflow: visible;
    border: 0;
    border-radius: clamp(17px, 4.3cqi, 40px);
    box-shadow: none;
}

html body.home-reference-page .home-reference-group--teacher {
    min-height: 60.3cqi;
    margin-bottom: clamp(10px, 2.5cqi, 24px);
    background: transparent;
}

html body.home-reference-page .home-reference-group--parent {
    min-height: 46.8cqi;
    background: transparent;
}

html body.home-reference-page .home-reference-group__header {
    position: absolute;
    top: 1.1cqi;
    left: 7%;
    z-index: 3;
    display: grid;
    width: 86%;
    height: 7.4cqi;
    min-height: 32px;
    padding: 0 3.5%;
    grid-template-columns: 10% minmax(0, 1fr) 7%;
    align-items: center;
    gap: 1%;
    border: clamp(1px, .3cqi, 3px) solid rgba(255,255,255,.48);
    border-radius: 1.3cqi;
    box-shadow: 0 .9cqi 0 rgba(1,54,176,.56), 0 1.4cqi 1.6cqi rgba(10,72,166,.2), inset 0 .55cqi .55cqi rgba(255,255,255,.24);
}

html body.home-reference-page .home-reference-group__header::before,
html body.home-reference-page .home-reference-group__header::after {
    position: absolute;
    bottom: -.7cqi;
    z-index: -1;
    width: 7.5cqi;
    height: 6.4cqi;
    border-radius: 1.2cqi;
    background: inherit;
    content: "";
}

html body.home-reference-page .home-reference-group__header::before { left: -3.5cqi; transform: rotate(-3deg); }
html body.home-reference-page .home-reference-group__header::after { right: -3.5cqi; transform: rotate(3deg); }

html body.home-reference-page .home-reference-group__header--teacher {
    color: #fff;
    background: linear-gradient(180deg, #168cff, #0551db);
}

html body.home-reference-page .home-reference-group__header--parent {
    color: #fff;
    background: linear-gradient(180deg, #4ad926, #109f17);
    box-shadow: 0 .9cqi 0 #087e16, 0 1.4cqi 1.6cqi rgba(13,118,23,.2), inset 0 .55cqi .55cqi rgba(255,255,255,.24);
}

html body.home-reference-page .home-reference-group__header img,
html body.home-reference-page .home-reference-group__people {
    display: block;
    width: 5.8cqi;
    height: 5.8cqi;
    min-width: 24px;
    min-height: 24px;
    justify-self: center;
    object-fit: contain;
}

html body.home-reference-page .home-reference-group__header h2 {
    min-width: 0;
    margin: 0;
    color: inherit;
    font-size: clamp(16px, 4.3cqi, 40px);
    font-weight: 950;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    text-shadow: 0 .35cqi .25cqi rgba(0,35,112,.32);
}

html body.home-reference-page .home-reference-group__header > span:last-child {
    color: #ffc319;
    font-size: 3.7cqi;
    text-shadow: 0 .3cqi .35cqi rgba(129,80,0,.28);
}

html body.home-reference-page .home-reference-group__people {
    position: relative;
}

html body.home-reference-page .home-reference-group__people i {
    position: absolute;
    bottom: 8%;
    width: 54%;
    height: 46%;
    border-radius: 50% 50% 27% 27%;
    background: linear-gradient(#39c2ff, #0870e8);
    box-shadow: inset 0 .3cqi .3cqi rgba(255,255,255,.28);
}

html body.home-reference-page .home-reference-group__people i::before {
    position: absolute;
    top: -60%;
    left: 20%;
    width: 60%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: inherit;
    content: "";
}

html body.home-reference-page .home-reference-group__people i:first-child { left: 3%; }
html body.home-reference-page .home-reference-group__people i:last-child { right: 3%; }

html body.home-reference-page .home-reference-group__lead {
    min-width: 0;
    margin: 0;
    color: #0d3479;
    font-size: clamp(10px, 2.45cqi, 23px);
    font-weight: 750;
    line-height: 1.2;
    text-align: center;
}

html body.home-reference-page .home-reference-group--parent .home-reference-group__lead { color: #126427; }

html body.home-reference-page .home-reference-group__rows {
    display: grid;
    min-width: 0;
    gap: 1.7cqi;
}

html body.home-reference-page .home-reference-row {
    position: relative;
    display: grid;
    width: 100%;
    min-width: 0;
    min-height: 0;
    padding: 0;
    grid-template-columns: 17% minmax(0, 1fr) 35%;
    align-items: center;
    gap: 1.7cqi;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transition: transform .16s ease, box-shadow .16s ease;
}

html body.home-reference-page .home-reference-group--parent .home-reference-row {
    min-height: 14.7cqi;
    border-color: #dff1d9;
}

html body.home-reference-page .home-reference-row__icon {
    display: grid;
    width: 13.5cqi;
    height: 13.5cqi;
    max-width: 126px;
    max-height: 126px;
    place-self: center;
    place-items: center;
    flex: 0 0 auto;
}

html body.home-reference-page .home-reference-group--parent .home-reference-row__icon {
    width: 11.5cqi;
    height: 11.5cqi;
}

html body.home-reference-page .home-reference-row__icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

html body.home-reference-page .home-reference-row__copy,
html body.home-reference-page .home-reference-row__copy strong,
html body.home-reference-page .home-reference-row__copy small {
    display: block;
    min-width: 0;
}

html body.home-reference-page .home-reference-row__copy strong {
    margin-bottom: .8cqi;
    color: #0b3789;
    font-size: clamp(14px, 3.5cqi, 33px);
    font-weight: 950;
    line-height: 1;
}

html body.home-reference-page .home-reference-row--register .home-reference-row__copy strong { color: #5b18c5; }
html body.home-reference-page .home-reference-group--parent .home-reference-row--login .home-reference-row__copy strong { color: #0c6d2c; }

html body.home-reference-page .home-reference-row__copy small {
    color: #123674;
    font-size: clamp(10px, 2.2cqi, 20px);
    font-weight: 650;
    line-height: 1.28;
}

html body.home-reference-page .home-reference-group--parent .home-reference-row__copy small { color: #165c2b; }

html body.home-reference-page .home-reference-row__button {
    position: relative;
    display: flex;
    width: 100%;
    height: 10.8cqi;
    min-height: 42px;
    padding: 0 5%;
    align-items: center;
    justify-content: center;
    gap: 6%;
    overflow: hidden;
    border: clamp(1px, .3cqi, 3px) solid rgba(255,255,255,.7);
    border-radius: clamp(9px, 2.7cqi, 25px);
    color: #fff;
    background: linear-gradient(180deg, #20b9ff, #0566e8 65%, #044ac9);
    box-shadow: 0 .85cqi 0 #063fb4, 0 1.25cqi 1.5cqi rgba(7,75,183,.23), inset 0 .45cqi .45cqi rgba(255,255,255,.28);
    font-size: clamp(11px, 2.75cqi, 26px);
    font-weight: 950;
    line-height: 1;
    white-space: nowrap;
    text-shadow: 0 .2cqi .25cqi rgba(0,47,130,.3);
}

html body.home-reference-page .home-reference-row--register .home-reference-row__button {
    background: linear-gradient(180deg, #bd59ff, #7b25e5 63%, #5514c0);
    box-shadow: 0 .85cqi 0 #4610a9, 0 1.25cqi 1.5cqi rgba(81,28,169,.22), inset 0 .45cqi .45cqi rgba(255,255,255,.3);
}

html body.home-reference-page .home-reference-row__button b {
    font-size: 1.55em;
    line-height: .7;
}

html body.home-reference-page .home-reference-child {
    position: relative;
    isolation: isolate;
    display: block;
    width: 100%;
    min-width: 0;
    aspect-ratio: 2.78 / 1;
    overflow: hidden;
    border: clamp(1px, .25cqi, 2px) solid rgba(255,255,255,.96);
    border-radius: clamp(15px, 4cqi, 38px);
    background:
        radial-gradient(ellipse at 15% 105%, #99dc3e 0 23%, transparent 24%),
        radial-gradient(ellipse at 45% 108%, #58c82f 0 35%, transparent 36%),
        radial-gradient(circle at 82% 12%, rgba(255,255,255,.75), transparent 18%),
        linear-gradient(180deg, #9de3ff 0 55%, #59cb39 56% 100%);
    box-shadow: 0 1.2cqi 2.4cqi rgba(39,113,135,.2);
    transition: transform .16s ease, box-shadow .16s ease;
}

html body.home-reference-page .home-reference-child::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle at 4% 28%, #7d28df 0 1.5%, transparent 1.7%),
        radial-gradient(circle at 11% 40%, #1578ec 0 1.4%, transparent 1.6%),
        radial-gradient(circle at 46% 18%, #ffbd18 0 1.4%, transparent 1.6%),
        radial-gradient(circle at 94% 30%, #137bed 0 1.4%, transparent 1.6%),
        radial-gradient(circle at 88% 75%, #ffbd18 0 1.5%, transparent 1.7%);
    content: "";
}

html body.home-reference-page .home-reference-child__landscape {
    position: absolute;
    left: -4%;
    bottom: -21%;
    z-index: 0;
    width: 62%;
    height: 62%;
    border-radius: 50% 55% 0 0;
    background: linear-gradient(180deg, #9be64a, #34ad27);
    transform: rotate(-3deg);
    box-shadow: 11cqi 2cqi 0 #7ad73c;
}

html body.home-reference-page .home-reference-child__children {
    position: absolute;
    left: 3%;
    bottom: -1%;
    z-index: 2;
    display: block;
    width: 43%;
    height: 94%;
    object-fit: contain;
    object-position: left bottom;
    filter: drop-shadow(0 .9cqi 1cqi rgba(24,83,45,.18));
}

html body.home-reference-page .home-reference-child__panel {
    position: absolute;
    top: 7%;
    right: 7.5%;
    z-index: 2;
    display: flex;
    width: 51%;
    height: 86%;
    padding: 3.2cqi 7.5cqi 2.5cqi 5.5cqi;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 42% 38% 43% 37% / 30% 36% 32% 38%;
    color: #0a6a25;
    background: rgba(255,255,255,.97);
    box-shadow: 0 .7cqi 1.7cqi rgba(20,109,42,.16);
}

html body.home-reference-page .home-reference-child__panel strong,
html body.home-reference-page .home-reference-child__panel small {
    display: block;
    width: 100%;
    text-align: center;
}

html body.home-reference-page .home-reference-child__panel strong {
    font-size: clamp(15px, 3.65cqi, 34px);
    font-weight: 950;
    line-height: 1;
    white-space: nowrap;
    text-shadow: 0 .25cqi .3cqi rgba(20,98,32,.16);
}

html body.home-reference-page .home-reference-child__panel strong b { color: #5bc821; }

html body.home-reference-page .home-reference-child__panel small {
    margin-top: 1.2cqi;
    color: #14592a;
    font-size: clamp(10px, 2.35cqi, 22px);
    font-weight: 750;
    line-height: 1.28;
}

html body.home-reference-page .home-reference-child__button {
    display: flex;
    width: 90%;
    height: 9cqi;
    min-height: 39px;
    margin-top: 1.6cqi;
    padding: 0 8%;
    align-items: center;
    justify-content: center;
    gap: 8%;
    border: clamp(1px, .32cqi, 3px) solid rgba(255,255,255,.68);
    border-radius: 3.2cqi;
    color: #fff;
    background: linear-gradient(180deg, #4bd923, #12a51d 62%, #087e16);
    box-shadow: 0 .75cqi 0 #087517, 0 1.1cqi 1.3cqi rgba(15,112,24,.22), inset 0 .4cqi .4cqi rgba(255,255,255,.27);
    font-size: clamp(11px, 2.7cqi, 25px);
    font-weight: 950;
    line-height: 1;
    white-space: nowrap;
}

html body.home-reference-page .home-reference-child__button b { font-size: 1.5em; line-height: .7; }

html body.home-reference-page .home-reference-child__trophy {
    position: absolute;
    right: 1.2%;
    bottom: 1.5%;
    z-index: 3;
    display: block;
    width: 9%;
    height: 44%;
    object-fit: contain;
    filter: drop-shadow(0 .6cqi .5cqi rgba(96,63,0,.25));
}

html body.home-reference-page .home-reference-child__math {
    position: absolute;
    z-index: 1;
    font-weight: 950;
    line-height: 1;
    text-shadow: 0 .5cqi .4cqi rgba(21,58,125,.18);
}

html body.home-reference-page .home-reference-child__math--one { top: 12%; left: 3%; color: #7d28df; font-size: 7cqi; transform: rotate(-12deg); }
html body.home-reference-page .home-reference-child__math--two { top: 32%; left: 45%; color: #1c75e7; font-size: 6cqi; transform: rotate(8deg); }

html body.home-reference-page .home-reference-install:hover,
html body.home-reference-page .home-reference-row:hover,
html body.home-reference-page .home-reference-child:hover {
    z-index: 5;
    transform: translateY(-2px);
    box-shadow: 0 1.5cqi 2.8cqi rgba(25,93,148,.25);
}

html body.home-reference-page .home-reference-install:active,
html body.home-reference-page .home-reference-row:active,
html body.home-reference-page .home-reference-child:active { transform: translateY(1px) scale(.995); }

html body.home-reference-page .home-reference-install:focus-visible,
html body.home-reference-page .home-reference-row:focus-visible,
html body.home-reference-page .home-reference-child:focus-visible {
    outline: clamp(3px, .55cqi, 5px) solid #ffca22;
    outline-offset: -4px;
}

@media (max-width: 480px) {
    html body.home-reference-page .home-reference { padding-right: 6px; padding-left: 6px; }
    html body.home-reference-page .home-reference-install { grid-template-columns: 28% minmax(0, 1fr) 32%; }
    html body.home-reference-page .home-reference-install__button { min-height: 38px; }
    html body.home-reference-page .home-reference-group__header { min-height: 28px; }
    html body.home-reference-page .home-reference-row { grid-template-columns: 16% minmax(0, 1fr) 37%; }
    html body.home-reference-page .home-reference-row__button { min-height: 38px; }
    html body.home-reference-page .home-reference-child__button { min-height: 34px; }
}

@media (max-width: 340px) {
    html body.home-reference-page .home-reference-install { aspect-ratio: 2.9 / 1; }
    html body.home-reference-page .home-reference-install__button { gap: 5%; font-size: 10px; }
    html body.home-reference-page .home-reference-group { padding-top: 10px; }
    html body.home-reference-page .home-reference-row__button { font-size: 10px; }
}

@media (min-width: 942px) {
    html body.home-reference-page .home-reference {
        margin-top: 18px;
        margin-bottom: 18px;
        border: 1px solid rgba(255,255,255,.75);
        border-radius: 28px;
        box-shadow: 0 24px 54px rgba(34,115,163,.2);
    }
}

/* HOME-ACCESS-BALANCE-055: equal login controls, slightly stronger register controls, larger teacher ribbon. */
html body.home-reference-page .home-reference-row {
    position: relative;
    isolation: isolate;
}

html body.home-reference-page .home-reference-row::after {
    position: absolute;
    z-index: 1;
    display: block;
    content: "";
    pointer-events: none;
}

html body.home-reference-page .home-reference-row::after {
    top: 10%;
    right: 1%;
    bottom: 10%;
    width: 38%;
    border-radius: 24% / 44%;
    background: rgba(255,255,255,.97);
}

html body.home-reference-page .home-reference-group--parent .home-reference-row::after {
    background: rgba(253,255,252,.98);
}

html body.home-reference-page .home-reference-group--teacher > .home-reference-supplied--ribbon {
    width: 96%;
    max-width: none;
    margin-right: auto;
    margin-left: auto;
}

/* HOME-SINGLE-SKY-HERO-054: one continuous sky; transparent logo and robot sit directly on it. */
html body.home-reference-page .home-reference-hero {
    position: relative;
    isolation: isolate;
    aspect-ratio: 941 / 930;
    overflow: hidden;
    background: transparent;
}

html body.home-reference-page .home-reference-hero > .home-reference-hero__logo,
html body.home-reference-page .home-reference-hero > .home-reference-hero__robot {
    position: absolute;
    z-index: 1;
    display: block;
    max-width: none;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 .7cqi 1cqi rgba(4, 63, 153, .2));
}

html body.home-reference-page .home-reference-hero > .home-reference-hero__logo {
    top: 40px;
    left: 50%;
    width: 58%;
    transform: translateX(-50%);
}

html body.home-reference-page .home-reference-hero > .home-reference-hero__robot {
    top: 40px;
    right: 0;
    width: 31.5%;
    z-index: 0;
}

html body.home-reference-page .home-reference-hero__copy {
    position: absolute;
    bottom: calc(5% + 15px);
    left: 21%;
    z-index: 2;
    display: grid;
    width: 58%;
    justify-items: center;
    color: #092b74;
    text-align: center;
    text-shadow: 0 .2cqi .45cqi rgba(255,255,255,.86);
}

html body.home-reference-page .home-reference-hero__copy strong,
html body.home-reference-page .home-reference-hero__copy b,
html body.home-reference-page .home-reference-hero__copy span {
    display: block;
    max-width: 100%;
    line-height: 1.08;
}

html body.home-reference-page .home-reference-hero__copy strong {
    font-size: clamp(23px, 6cqi, 54px);
    font-weight: 950;
}

html body.home-reference-page .home-reference-hero__copy b {
    color: #0862e7;
    font-size: clamp(25px, 6.6cqi, 60px);
    font-weight: 950;
}

html body.home-reference-page .home-reference-hero__copy span {
    margin-top: .8cqi;
    font-size: clamp(17px, 4.2cqi, 38px);
    font-weight: 800;
}

@media (prefers-reduced-motion: reduce) {
    html body.home-reference-page .home-reference-install,
    html body.home-reference-page .home-reference-row,
    html body.home-reference-page .home-reference-child { transition: none; }
}

/* HOME-CROPS-049: exact user-supplied hero and child banner crops. */
html body.home-reference-page .home-reference-hero {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
    aspect-ratio: 941 / 930;
    overflow: hidden;
    border: clamp(1px, .35cqi, 3px) solid rgba(255,255,255,.9);
    border-radius: clamp(10px, 2.5cqi, 24px);
    background: #20b6f5;
    box-shadow: 0 1.1cqi 2.3cqi rgba(28,102,165,.2);
}

html body.home-reference-page .home-reference-hero img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

html body.home-reference-page .home-reference-group__header {
    left: 4%;
    width: 92%;
    border-radius: clamp(10px, 2.5cqi, 24px);
}

html body.home-reference-page .home-reference-group__header::before,
html body.home-reference-page .home-reference-group__header::after {
    display: none;
    content: none;
}

html body.home-reference-page .home-reference-child {
    display: block;
    aspect-ratio: 1562 / 535;
    overflow: hidden;
    border: 0;
    border-radius: clamp(14px, 3.5cqi, 33px);
    background: #fff;
    box-shadow: 0 1.2cqi 2.4cqi rgba(39,113,135,.2);
}

html body.home-reference-page .home-reference-child::before {
    display: none;
    content: none;
}

html body.home-reference-page .home-reference-child__complete {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* HOME-BACKGROUND-050: keep the hero crop intact and continue its original screen background below it. */
html body.home-reference-page {
    background-color: #c9efff;
    background-image: url("../images/robo-arena/user-start-reference/start-screen-section-bg.png");
    background-position: top center;
    background-repeat: repeat-x;
    background-size: min(100%, 941px) 100%;
}

html body.home-reference-page .home-reference {
    background-color: #d9f4ff;
    background-image: url("../images/robo-arena/user-start-reference/start-screen-section-bg.png");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

html body.home-reference-page .home-reference-hero {
    background-image: none;
}

/* HOME-HERO-FULLBLEED-051: borderless sky hero; every following block is 10px narrower per side. */
html body.home-reference-page .home-reference {
    --home-shell-inline: clamp(7px, 1.7vw, 16px);
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

html body.home-reference-page .home-reference-hero {
    width: calc(100% + var(--home-shell-inline) + var(--home-shell-inline));
    margin-right: calc(-1 * var(--home-shell-inline));
    margin-left: calc(-1 * var(--home-shell-inline));
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

html body.home-reference-page .home-reference > .home-reference-install,
html body.home-reference-page .home-reference > .home-reference-group,
html body.home-reference-page .home-reference > .home-reference-child {
    width: auto;
    margin-right: 10px;
    margin-left: 10px;
}

@media (max-width: 480px) {
    html body.home-reference-page .home-reference { --home-shell-inline: 6px; }
}

/* HOME-SKY-ISLANDS-052: restore the original cloud sky and floating side islands behind the whole screen. */
html body.home-reference-page {
    background-color: #c9efff;
    background-image: url("../images/robo-arena/child-light/arena-sky-no-rainbow.png");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
}

html body.home-reference-page .home-reference {
    background-color: transparent;
    background-image: none;
}

/* HOME-USER-ELEMENTS-053: use only the exact user-supplied start-screen elements. */
html body.home-reference-page .home-reference-install,
html body.home-reference-page .home-reference-child {
    min-width: 0;
    min-height: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

html body.home-reference-page .home-reference-install,
html body.home-reference-page .home-reference-row,
html body.home-reference-page .home-reference-child {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: auto;
}

html body.home-reference-page .home-reference-install::after,
html body.home-reference-page .home-reference-child::before {
    display: none;
    content: none;
}

html body.home-reference-page .home-reference-group {
    display: grid;
    align-content: start;
    gap: clamp(1px, .3cqi, 3px);
}

html body.home-reference-page .home-reference-group--teacher,
html body.home-reference-page .home-reference-group--parent {
    min-height: 0;
}

html body.home-reference-page .home-reference-group__rows {
    gap: clamp(1px, .3cqi, 3px);
}

html body.home-reference-page .home-reference-supplied {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

html body.home-reference-page .home-reference-supplied--ribbon {
    width: 96%;
    margin-right: auto;
    margin-left: auto;
}

html body.home-reference-page .home-reference-install:hover,
html body.home-reference-page .home-reference-row:hover,
html body.home-reference-page .home-reference-child:hover {
    z-index: 5;
    box-shadow: none;
}

@media (max-width: 480px) {
    html body.home-reference-page .home-reference-install,
    html body.home-reference-page .home-reference-row {
        grid-template-columns: none;
    }
}

@media (max-width: 340px) {
    html body.home-reference-page .home-reference-install {
        aspect-ratio: auto;
    }

    html body.home-reference-page .home-reference-group {
        padding-top: 0;
    }
}

/* HOME-INSTALL-GOLD-ORBIT-056: continuously trace the supplied install button with a gold edge glow. */
@property --home-install-orbit-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

@keyframes home-install-gold-orbit-056 {
    to { --home-install-orbit-angle: 360deg; }
}

@keyframes home-install-gold-breathe-056 {
    0%, 100% {
        filter:
            drop-shadow(0 0 clamp(4px, .9cqi, 9px) rgba(255, 210, 64, .82))
            drop-shadow(0 0 clamp(10px, 1.8cqi, 17px) rgba(255, 153, 0, .5));
    }
    50% {
        filter:
            drop-shadow(0 0 clamp(8px, 1.45cqi, 14px) rgba(255, 247, 176, 1))
            drop-shadow(0 0 clamp(16px, 2.8cqi, 28px) rgba(255, 176, 28, .86));
    }
}

@keyframes home-install-ambient-pulse-068 {
    0%, 100% {
        opacity: .62;
        transform: scale(.985);
    }
    50% {
        opacity: .96;
        transform: scale(1.03);
    }
}

html body.home-reference-page .home-reference-install::before,
html body.home-reference-page .home-reference-install::after {
    content: none;
    display: none;
}

html body.home-reference-page .home-reference-install {
    aspect-ratio: 3.04 / 1;
    overflow: hidden;
    border-radius: clamp(14px, 4cqi, 39px);
}

html body.home-reference-page .home-reference-supplied--install {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 100%;
    height: 100%;
    margin: 0;
    clip-path: none;
    object-fit: cover;
    object-position: center;
}


/* HOME-PARENT-EXACT-ROWS-073: parent access rows use the exact supplied raster images only. */
html body.home-reference-page .home-reference-group--parent .home-reference-row--exact-parent {
    display: block;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

html body.home-reference-page .home-reference-group--parent .home-reference-row--exact-parent::after {
    display: none;
    content: none;
}

html body.home-reference-page .home-reference-group--parent .home-reference-row--exact-parent > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* HOME-CTA-COLOR-RESTORE-079: supplied login/register row images must stay fully visible; no legacy white CTA mask. */
html body.home-reference-page .home-reference-group--teacher .home-reference-row::after,
html body.home-reference-page .home-reference-group--parent .home-reference-row::after {
    display: none !important;
    content: none !important;
}

html body.home-reference-page .home-reference-group--teacher .home-reference-row > .home-reference-supplied--row,
html body.home-reference-page .home-reference-group--parent .home-reference-row > .home-reference-supplied--row {
    position: relative !important;
    z-index: 2 !important;
    opacity: 1 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
}

/* HOME-ACCESS-ROW-PARITY-080: teacher and parent login/register rows share one visual frame and size. */
html body.home-reference-page .home-reference-group--teacher .home-reference-row,
html body.home-reference-page .home-reference-group--parent .home-reference-row {
    display: block !important;
    width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body.home-reference-page .home-reference-group--teacher .home-reference-row > .home-reference-supplied--row,
html body.home-reference-page .home-reference-group--parent .home-reference-row > .home-reference-supplied--row {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}

/* CHILD-ENTRY-BUTTON-SIZE-060: keep the supplied banner intact and enlarge its real entry control. */
html body.home-reference-page .home-reference-child {
    position: relative;
    isolation: isolate;
}

html body.home-reference-page .home-reference > .home-reference-child {
    margin-top: clamp(5px, 1.2cqi, 10px);
}

html body.home-reference-page .home-reference-child__cta-art {
    position: absolute;
    right: 8.5%;
    bottom: calc(3.5% + 5px);
    z-index: 2;
    display: block;
    width: 41%;
    max-width: none;
    height: auto;
    object-fit: contain;
    object-position: center;
    filter: drop-shadow(0 .55cqi .65cqi rgba(16, 112, 24, .2));
    pointer-events: none;
}

/* CANONICAL-LOGO-INSTALL-BG-057: one supplied logo on every user-facing screen. */
html img[src*="canonical-v057/logo-arena.png"] {
    object-fit: contain !important;
    object-position: center !important;
}

/* PARENT-SIGNIN-REFERENCE-058: proportional reconstruction of the supplied parent sign-in. */
html body.parent-login-v2-page .parent-login-v2-shell {
    padding-right: clamp(24px, 6.8vw, 64px);
    padding-left: clamp(24px, 6.8vw, 64px);
}

html body.parent-login-v2-page .parent-login-v2-back {
    top: 2.6cqi;
    left: 3.3cqi;
    width: clamp(44px, 10.33cqi, 84px);
    height: clamp(44px, 10.33cqi, 84px);
}

html body.parent-login-v2-page .parent-login-v2-hero {
    height: 75cqi;
    min-height: 0;
    max-height: none;
    margin-right: calc(clamp(24px, 6.8vw, 64px) * -1);
    margin-left: calc(clamp(24px, 6.8vw, 64px) * -1);
}

html body.parent-login-v2-page .parent-login-v2-logo {
    top: 9.23cqi;
    width: 64cqi;
    height: 31.37cqi;
    object-fit: fill;
    filter: none;
}

html body.parent-login-v2-page .parent-login-v2-characters {
    top: 12.92cqi;
    right: 11.2cqi;
    bottom: auto;
    width: 101.23cqi;
    filter: none;
}

html body.parent-login-v2-page .parent-login-v2-panel {
    margin-top: -1.8cqi;
    padding: clamp(22px, 4.2cqi, 34px) clamp(18px, 7cqi, 57px) clamp(24px, 5.6cqi, 46px);
}

html body.parent-login-v2-page .parent-login-v2-heading {
    margin-bottom: clamp(20px, 3.7cqi, 30px);
}

html body.parent-login-v2-page .parent-login-v2-heading h1 {
    font-size: clamp(22px, 6cqi, 49px);
}

html body.parent-login-v2-page .parent-login-v2-heading p {
    font-size: clamp(13px, 2.9cqi, 24px);
}

html body.parent-login-v2-page .parent-login-v2-form {
    gap: clamp(10px, 1.8cqi, 17px);
}

html body.parent-login-v2-page .parent-login-v2-field {
    height: clamp(52px, 11.3cqi, 92px);
}

html body.parent-login-v2-page .parent-login-v2-field__icon img {
    width: 56%;
    height: 56%;
}

html body.parent-login-v2-page .parent-login-v2-field input:-webkit-autofill,
html body.parent-login-v2-page .parent-login-v2-field input:-webkit-autofill:hover,
html body.parent-login-v2-page .parent-login-v2-field input:-webkit-autofill:focus {
    -webkit-text-fill-color: #102b72;
    caret-color: #102b72;
    background-color: #fff !important;
    -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
    box-shadow: 0 0 0 1000px #fff inset !important;
    transition: background-color 9999s ease-out 0s;
}

html body.parent-login-v2-page .parent-login-v2-password-toggle img {
    width: 62%;
    height: 62%;
    filter: none;
}

html body.parent-login-v2-page .parent-login-v2-info {
    min-height: clamp(44px, 6.9cqi, 56px);
}

html body.parent-login-v2-page .parent-login-v2-submit {
    min-height: clamp(50px, 10.1cqi, 82px);
}

html body.parent-login-v2-page .parent-login-v2-benefit {
    min-height: clamp(220px, 36.5cqi, 297px);
}

html body.parent-login-v2-page .parent-login-v2-benefit__art {
    width: clamp(64px, 16.7cqi, 136px);
    height: clamp(64px, 16.7cqi, 136px);
    border: 0;
    background: transparent;
    box-shadow: none;
}

html body.parent-login-v2-page .parent-login-v2-benefit__art img,
html body.parent-login-v2-page .parent-login-v2-benefit--children .parent-login-v2-benefit__art img,
html body.parent-login-v2-page .parent-login-v2-benefit--rewards .parent-login-v2-benefit__art img,
html body.parent-login-v2-page .parent-login-v2-benefit--activity .parent-login-v2-benefit__art img {
    position: static;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
}

html body.parent-login-v2-page .parent-login-v2-benefit h2 {
    font-size: clamp(14px, 2.7cqi, 22px);
}

html body.parent-login-v2-page .parent-login-v2-google-wrap {
    width: 100%;
    margin: clamp(16px, 2.4cqi, 23px) auto 0;
    text-align: center;
}

html body.parent-login-v2-page .parent-login-v2-google-wrap .form-message {
    margin: 12px auto 0;
}

@media (max-width: 560px) {
    html body.parent-login-v2-page .parent-login-v2-panel {
        border-radius: 22px;
    }

    html body.parent-login-v2-page .parent-login-v2-heading p {
        width: 100%;
    }

    html body.parent-login-v2-page .parent-login-v2-benefit {
        padding-right: 4px;
        padding-left: 4px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html body.home-reference-page .home-reference-install::before {
        animation: home-install-gold-orbit-056 7s linear infinite;
        filter:
            drop-shadow(0 0 clamp(4px, .85cqi, 8px) rgba(255, 223, 77, .9))
            drop-shadow(0 0 clamp(8px, 1.5cqi, 15px) rgba(255, 151, 0, .5));
    }
}

/* TEACHER-REGISTER-REFERENCE-059: faithful supplied registration composition. */
html body.teacher-register-reference-page .teacher-register-reference-content {
    padding-bottom: 82px;
}

html body.teacher-register-reference-page .teacher-field-note--reference-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

html body.teacher-register-reference-page .teacher-register-reference-check input {
    min-height: 22px !important;
}

html body.teacher-register-reference-page .teacher-register-reference-symbol img {
    display: block;
    width: 27px;
    height: 27px;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(39%) sepia(27%) saturate(1203%) hue-rotate(187deg) brightness(90%);
}

html body.teacher-register-reference-page .teacher-register-password-toggle img {
    display: block;
    width: 24px;
    height: 24px;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(39%) sepia(27%) saturate(1203%) hue-rotate(187deg) brightness(90%);
}

html body.teacher-register-reference-page .teacher-register-password-toggle .teacher-register-eye--visible,
html body.teacher-register-reference-page .teacher-register-password-toggle.is-visible .teacher-register-eye--hidden {
    display: none;
}

html body.teacher-register-reference-page .teacher-register-password-toggle.is-visible .teacher-register-eye--visible {
    display: block;
}

html body.teacher-register-reference-page .teacher-register-reference-back.arena-back-button > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

html body.teacher-register-reference-page .teacher-register-reference-back.arena-back-button {
    position: absolute !important;
}

html body.teacher-register-reference-page .teacher-register-reference-submit {
    margin-top: 5px;
}

html body.teacher-register-reference-page .teacher-register-reference-submit img {
    display: block;
    width: 29px;
    height: 29px;
    object-fit: contain;
}

html body.teacher-register-reference-page .teacher-register-reference-login {
    margin-top: -5px;
}

@media (min-width: 721px) {
    html body.teacher-register-reference-page .teacher-register-reference-back {
        top: 28px !important;
        left: 28px !important;
        width: 70px !important;
        height: 70px !important;
    }

    html body.teacher-register-reference-page .teacher-register-reference-logo {
        top: 18px;
        left: 190px;
        width: 335px;
        height: auto;
    }

    html body.teacher-register-reference-page .teacher-register-reference-robot {
        top: 70px;
        right: 55px;
        height: 374px;
    }

    html body.teacher-register-reference-page .teacher-register-reference-heading {
        top: 323px;
    }
}

@media (max-width: 720px) {
    html body.teacher-register-reference-page .teacher-register-reference-back.arena-back-button {
        top: 18px !important;
        left: 18px !important;
        width: 56px !important;
        height: 56px !important;
    }

    html body.teacher-register-reference-page .teacher-register-reference-hero {
        min-height: 440px;
    }

    html body.teacher-register-reference-page .teacher-register-reference-logo {
        top: 24px;
        width: min(56vw, 235px);
    }

    html body.teacher-register-reference-page .teacher-register-reference-robot {
        top: 105px;
        right: 10px;
        height: min(47vw, 170px);
    }

    html body.teacher-register-reference-page .teacher-register-reference-heading {
        top: 285px;
        padding-right: 0;
    }

    html body.teacher-register-reference-page .teacher-register-reference-hero::after {
        bottom: -105px;
    }

    html body.teacher-register-reference-page .teacher-register-reference-content {
        padding-bottom: 70px;
    }

    html body.teacher-register-reference-page .teacher-register-reference-submit {
        margin-top: 5px;
    }

    html body.teacher-register-reference-page .teacher-register-reference-login {
        margin-top: -2px;
    }
}

/* TEACHER-REGISTER-FIDELITY-061: supplied teacher-registration reference, functional compact grade picker. */
html body.teacher-register-reference-page,
html body.teacher-register-reference-page button,
html body.teacher-register-reference-page input,
html body.teacher-register-reference-page select,
html body.teacher-register-reference-page textarea {
    font-family: "Teacher Inter", "Segoe UI", Arial, sans-serif !important;
    letter-spacing: 0 !important;
}

html body.teacher-register-reference-page .teacher-register-reference-form {
    gap: 17px;
}

html body.teacher-register-reference-page .teacher-register-reference-heading,
html body.teacher-register-reference-page .teacher-register-reference-form h2,
html body.teacher-register-reference-page .teacher-register-reference-submit,
html body.teacher-register-reference-page .teacher-register-reference-benefits h2,
html body.teacher-register-reference-page .teacher-register-reference-benefits h3 {
    font-family: "Robo Arena Premium", "Arial Rounded MT Bold", "Trebuchet MS", Arial, sans-serif !important;
}

html body.teacher-register-reference-page .teacher-register-decoration--formula {
    left: 38px;
    font-family: "Robo Arena Premium", "Arial Rounded MT Bold", "Trebuchet MS", Arial, sans-serif !important;
    font-size: 23px;
}

html body.teacher-register-reference-page .teacher-register-reference-grades {
    position: relative;
    display: grid;
    min-height: 171px;
    padding: 12px 20px 13px;
    align-content: start;
    gap: 8px;
    overflow: visible;
}

html body.teacher-register-reference-page .teacher-register-reference-grades > legend.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}

html body.teacher-register-reference-page .teacher-register-first-class-heading {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 13px;
    color: #0b2d72;
    font-size: 16px;
    line-height: 1.25;
}

html body.teacher-register-reference-page .teacher-register-first-class-heading strong {
    min-width: 0;
    overflow-wrap: anywhere;
    font-weight: 700;
}

html body.teacher-register-reference-page .teacher-register-switch {
    position: relative;
    display: block;
    width: 52px;
    height: 30px;
    flex: 0 0 52px;
    border-radius: 999px;
    background: linear-gradient(90deg, #0eaa9e, #22c7c1);
    box-shadow: inset 0 1px 2px rgba(5, 98, 93, .24);
}

html body.teacher-register-reference-page .teacher-register-switch i {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(9, 84, 103, .24);
}

html body.teacher-register-reference-page .teacher-register-grade-toggle {
    position: relative;
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 60px;
    align-items: center;
    gap: 15px;
    padding: 10px 50px 10px 18px;
    border: 2px solid #d4def1;
    border-radius: 15px;
    color: #5f72a4;
    background: #fff;
    font-size: 17px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}

html body.teacher-register-reference-page .teacher-register-grade-toggle:hover,
html body.teacher-register-reference-page .teacher-register-grade-toggle:focus-visible {
    border-color: #31a4ee;
    outline: 0;
    box-shadow: 0 0 0 4px rgba(49, 164, 238, .12);
}

html body.teacher-register-reference-page .teacher-register-grade-toggle img {
    display: block;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(39%) sepia(27%) saturate(1203%) hue-rotate(187deg) brightness(90%);
}

html body.teacher-register-reference-page .teacher-register-grade-toggle span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html body.teacher-register-reference-page .teacher-register-grade-toggle b {
    position: absolute;
    top: 50%;
    right: 19px;
    color: #6078ad;
    font-size: 25px;
    line-height: 1;
    transform: translateY(-54%);
    transition: transform .18s ease;
}

html body.teacher-register-reference-page .teacher-register-reference-grades.is-open .teacher-register-grade-toggle b {
    transform: translateY(-42%) rotate(180deg);
}

html body.teacher-register-reference-page .teacher-register-grade-note {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 9px;
    margin: 0;
    color: #6578a2;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.25;
}

html body.teacher-register-reference-page .teacher-register-grade-note > span {
    display: grid;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    place-items: center;
    border: 2px solid #6d82b3;
    border-radius: 50%;
    color: #5a72a8;
    font-size: 12px;
    font-weight: 700;
}

html body.teacher-register-reference-page .teacher-register-reference-grades .teacher-grade-grid {
    position: absolute;
    z-index: 40;
    top: 103px;
    right: 20px;
    left: 20px;
    max-height: 216px;
    overflow-y: auto;
    padding: 10px;
    border: 1px solid #b9cceb;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 15px 30px rgba(16, 58, 124, .22);
}

html body.teacher-register-reference-page .teacher-register-reference-grades .teacher-grade-grid[hidden] {
    display: none !important;
}

html body.teacher-register-reference-page .teacher-register-reference-grades > .teacher-grade-error {
    position: absolute;
    z-index: 41;
    right: 20px;
    bottom: -8px;
    margin: 0;
    padding: 4px 9px;
    border-radius: 8px;
    background: #fff0f2;
    font-size: 12px;
}

html body.teacher-register-reference-page .teacher-register-reference-check {
    font-weight: 500;
}

html body.teacher-register-reference-page .teacher-register-reference-check strong,
html body.teacher-register-reference-page .teacher-register-reference-login a {
    font-weight: 700;
}

@media (min-width: 721px) {
    html body.teacher-register-reference-page .teacher-register-reference-panel {
        padding-top: 27px;
    }

    html body.teacher-register-reference-page .teacher-register-reference-form h2,
    html body.teacher-register-reference-page .teacher-register-reference-heading h1,
    html body.teacher-register-reference-page .teacher-register-reference-submit {
        font-weight: 700;
    }

    html body.teacher-register-reference-page .teacher-register-reference-heading h1 { font-size: 44px; }
}

@media (max-width: 720px) {
    html body.teacher-register-reference-page .teacher-register-reference-form {
        gap: 14px;
    }

    html body.teacher-register-reference-page .teacher-register-reference-grades {
        min-height: 176px;
        padding-inline: 14px;
    }

    html body.teacher-register-reference-page .teacher-register-first-class-heading {
        gap: 9px;
        font-size: 14px;
    }

    html body.teacher-register-reference-page .teacher-register-switch {
        width: 46px;
        height: 27px;
        flex-basis: 46px;
    }

    html body.teacher-register-reference-page .teacher-register-switch i {
        width: 21px;
        height: 21px;
    }

    html body.teacher-register-reference-page .teacher-register-grade-toggle {
        min-height: 56px;
        padding-left: 15px;
        font-size: 15px;
    }

    html body.teacher-register-reference-page .teacher-register-grade-note {
        align-items: flex-start;
        font-size: 12px;
    }

    html body.teacher-register-reference-page .teacher-register-reference-grades .teacher-grade-grid {
        top: 98px;
        right: 14px;
        left: 14px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* CANONICAL-TRANSPARENT-BACK-RULE-20260811 */
html body .arena-back-button,
html body .context-back-button,
html body .install-reference-back,
html body .teacher-register-reference-back,
html body .teacher-signin-reference-back,
html body .child-profile-topbar-button[aria-label*="Natrag"] {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    color: inherit !important;
}

html body .arena-back-button:hover,
html body .context-back-button:hover,
html body .install-reference-back:hover,
html body .teacher-register-reference-back:hover,
html body .teacher-signin-reference-back:hover,
html body .child-profile-topbar-button[aria-label*="Natrag"]:hover,
html body .arena-back-button:active,
html body .context-back-button:active,
html body .install-reference-back:active,
html body .teacher-register-reference-back:active,
html body .teacher-signin-reference-back:active,
html body .child-profile-topbar-button[aria-label*="Natrag"]:active {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

html body .arena-back-button > img,
html body .context-back-button > img,
html body .install-reference-back > img,
html body .teacher-register-reference-back > img,
html body .teacher-signin-reference-back > img,
html body .child-profile-topbar-button[aria-label*="Natrag"] > img {
    display: block !important;
    max-width: none !important;
    object-fit: contain !important;
    background: transparent !important;
    filter: none !important;
}

/* PARENT-REGISTER-REFERENCE-069 */
html:has(body.parent-register-v2-page),
html body.parent-register-v2-page {
    min-width: 0;
    min-height: 100%;
    margin: 0;
    overflow-x: hidden;
    color: #0a2673;
    background: #eef8ff;
}

html body.parent-register-v2-page::before,
html body.parent-register-v2-page::after { display: none !important; }

html body.parent-register-v2-page *,
html body.parent-register-v2-page *::before,
html body.parent-register-v2-page *::after { box-sizing: border-box; }

html body.parent-register-v2-page .parent-register-v2-shell {
    position: relative;
    width: min(100%, 941px);
    min-height: 100vh;
    margin: 0 auto;
    padding: 0 clamp(24px, 6.8vw, 64px) clamp(28px, 4.8cqi, 46px);
    overflow: hidden;
    container-type: inline-size;
    background-color: #eff9ff;
    background-image: url('../images/parent/sign-in-v2/background.png');
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% auto;
    box-shadow: 0 0 42px rgba(64, 112, 194, .13);
}

html body.parent-register-v2-page .parent-register-v2-back {
    position: absolute;
    z-index: 10;
    top: 2.6cqi;
    left: 3.3cqi;
    display: grid;
    width: clamp(44px, 10.33cqi, 84px);
    height: clamp(44px, 10.33cqi, 84px);
    padding: 0;
    place-items: center;
    filter: drop-shadow(0 8px 12px rgba(21, 73, 170, .2));
}

html body.parent-register-v2-page .parent-register-v2-back img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

html body.parent-register-v2-page .parent-register-v2-back:focus-visible,
html body.parent-register-v2-page :where(input,button,a):focus-visible {
    outline: 3px solid rgba(20, 108, 247, .54);
    outline-offset: 3px;
}

html body.parent-register-v2-page .parent-register-v2-hero {
    position: relative;
    height: clamp(380px, 78cqi, 720px);
    margin-right: calc(clamp(24px, 6.8vw, 64px) * -1);
    margin-left: calc(clamp(24px, 6.8vw, 64px) * -1);
    overflow: hidden;
}

html body.parent-register-v2-page .parent-register-v2-logo {
    position: absolute;
    z-index: 3;
    top: 3.2cqi;
    left: 50%;
    display: block;
    width: min(47cqi, 440px);
    height: auto;
    transform: translateX(-50%);
    object-fit: contain;
    filter: drop-shadow(0 8px 8px rgba(15, 63, 150, .18));
}

html body.parent-register-v2-page .parent-register-v2-characters {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: 0;
    display: block;
    width: min(93cqi, 874px);
    height: auto;
    max-width: none;
    transform: translateX(-49%);
    object-fit: contain;
}

html body.parent-register-v2-page .parent-register-v2-decoration {
    position: absolute;
    z-index: 1;
    color: #7c60e9;
    font-family: 'Fredoka', 'Inter', system-ui, sans-serif;
    font-weight: 700;
    line-height: 1;
    opacity: .95;
    user-select: none;
}

html body.parent-register-v2-page .parent-register-v2-decoration--sum { top: 14cqi; left: 8cqi; font-size: clamp(28px, 4.9cqi, 48px); transform: rotate(-13deg); }
html body.parent-register-v2-page .parent-register-v2-decoration--root { top: 17cqi; right: 10cqi; font-size: clamp(28px, 4.6cqi, 44px); color: #40c4ef; transform: rotate(-6deg); }
html body.parent-register-v2-page .parent-register-v2-decoration--eight { top: 27cqi; right: 8.5cqi; font-size: clamp(34px, 5.6cqi, 54px); color: #8d69f5; }
html body.parent-register-v2-page .parent-register-v2-decoration--divide { top: 35cqi; right: 7cqi; font-size: clamp(34px, 5.2cqi, 50px); color: #58c8f0; }

html body.parent-register-v2-page .parent-register-v2-panel {
    position: relative;
    z-index: 3;
    width: 100%;
    margin: -3.5cqi auto clamp(18px, 2.6cqi, 26px);
    padding: clamp(24px, 4.1cqi, 38px) clamp(16px, 5.2cqi, 48px) clamp(22px, 3.8cqi, 34px);
    border: 1px solid rgba(213, 225, 243, .88);
    border-radius: clamp(30px, 4.8cqi, 44px);
    background: rgba(255, 255, 255, .975);
    box-shadow: 0 20px 40px rgba(31, 70, 137, .18), inset 0 1px 0 #fff;
}

html body.parent-register-v2-page .parent-register-v2-heading {
    margin: 0 auto clamp(20px, 3.2cqi, 30px);
    text-align: center;
}

html body.parent-register-v2-page .parent-register-v2-heading h1 {
    margin: 0 0 clamp(8px, 1.2cqi, 14px);
    color: #09246f;
    font-family: 'Fredoka', 'Inter', system-ui, sans-serif;
    font-size: clamp(24px, 6.1cqi, 52px);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -.02em;
}

html body.parent-register-v2-page .parent-register-v2-heading p {
    width: min(100%, 650px);
    margin: 0 auto;
    color: #546fa6;
    font-size: clamp(15px, 2.8cqi, 24px);
    line-height: 1.38;
}

html body.parent-register-v2-page .parent-register-v2-panel .form-message {
    width: 100%;
    margin: 0 0 12px;
    padding: 11px 14px;
    border-radius: 14px;
    font-size: clamp(13px, 1.7cqi, 16px);
}

html body.parent-register-v2-page .parent-register-v2-form {
    display: grid;
    gap: clamp(12px, 1.6cqi, 16px);
}

html body.parent-register-v2-page .parent-register-v2-grid {
    display: grid;
    gap: clamp(12px, 1.6cqi, 16px);
}

html body.parent-register-v2-page .parent-register-v2-grid--two {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

html body.parent-register-v2-page .parent-register-v2-field {
    position: relative;
    display: grid;
    width: 100%;
    min-width: 0;
    height: clamp(60px, 9.8cqi, 88px);
    grid-template-columns: clamp(48px, 7.4cqi, 72px) minmax(0, 1fr) clamp(46px, 6.7cqi, 64px);
    align-items: center;
    padding: 0 clamp(8px, 1.6cqi, 16px);
    border: clamp(1px, .22cqi, 2px) solid #d0d9e8;
    border-radius: clamp(16px, 2.4cqi, 23px);
    background: rgba(255, 255, 255, .94);
    transition: border-color .18s ease, box-shadow .18s ease;
}

html body.parent-register-v2-page .parent-register-v2-field:focus-within {
    border-color: #2187f5;
    box-shadow: 0 0 0 4px rgba(33, 135, 245, .12);
}

html body.parent-register-v2-page .parent-register-v2-field__icon {
    display: grid;
    width: clamp(42px, 6.3cqi, 59px);
    height: clamp(42px, 6.3cqi, 59px);
    place-items: center;
    border-radius: clamp(13px, 1.8cqi, 18px);
    background: linear-gradient(145deg, #f4f8ff, #eaf1ff);
}

html body.parent-register-v2-page .parent-register-v2-field__icon img {
    display: block;
    width: 52%;
    height: 52%;
    object-fit: contain;
}

html body.parent-register-v2-page .parent-register-v2-field input {
    width: 100%;
    min-width: 0;
    height: 100%;
    padding: 0 clamp(8px, 1.5cqi, 15px);
    border: 0;
    outline: 0;
    color: #102b72;
    background: transparent;
    font: inherit;
    font-size: clamp(16px, 2.7cqi, 24px);
}

html body.parent-register-v2-page .parent-register-v2-field input::placeholder { color: #7387ae; opacity: 1; }

html body.parent-register-v2-page .parent-register-v2-field input:-webkit-autofill,
html body.parent-register-v2-page .parent-register-v2-field input:-webkit-autofill:hover,
html body.parent-register-v2-page .parent-register-v2-field input:-webkit-autofill:focus {
    -webkit-text-fill-color: #102b72;
    caret-color: #102b72;
    background-color: #fff !important;
    -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
    box-shadow: 0 0 0 1000px #fff inset !important;
    transition: background-color 9999s ease-out 0s;
}

html body.parent-register-v2-page .parent-register-v2-password-toggle {
    position: relative;
    display: grid;
    width: clamp(44px, 5.8cqi, 55px);
    height: clamp(44px, 5.8cqi, 55px);
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

html body.parent-register-v2-page .parent-register-v2-password-toggle img {
    position: absolute;
    inset: 0;
    width: 62%;
    height: 62%;
    margin: auto;
    object-fit: contain;
    filter: none;
}

html body.parent-register-v2-page .parent-register-v2-password-toggle .parent-register-v2-eye--visible,
html body.parent-register-v2-page .parent-register-v2-password-toggle.is-visible .parent-register-v2-eye--hidden {
    opacity: 0;
}

html body.parent-register-v2-page .parent-register-v2-password-toggle.is-visible .parent-register-v2-eye--visible {
    opacity: 1;
}

html body.parent-register-v2-page .parent-register-v2-info {
    display: flex;
    min-height: clamp(46px, 5.9cqi, 56px);
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 2px 0 0;
    padding: 8px 14px;
    border: 1px solid #cfe0fb;
    border-radius: 16px;
    color: #173b82;
    background: linear-gradient(90deg, #eef7ff, #f4f8ff);
    font-size: clamp(12px, 1.8cqi, 17px);
    line-height: 1.25;
    text-align: center;
}

html body.parent-register-v2-page .parent-register-v2-info span {
    display: grid;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(#51a9ff, #1468e9);
    box-shadow: 0 3px 8px rgba(24, 101, 222, .27);
    font-weight: 800;
}

html body.parent-register-v2-page .parent-register-v2-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #0b2c6c;
    font-size: clamp(13px, 2cqi, 18px);
    line-height: 1.35;
}

html body.parent-register-v2-page .parent-register-v2-check input {
    width: clamp(22px, 3cqi, 28px);
    height: clamp(22px, 3cqi, 28px);
    flex: 0 0 auto;
    margin: 2px 0 0;
    accent-color: #176fe7;
}

html body.parent-register-v2-page .parent-register-v2-check strong {
    color: #1760de;
    font-weight: 700;
}

html body.parent-register-v2-page .parent-register-v2-submit {
    display: flex;
    width: 100%;
    min-height: clamp(58px, 8.7cqi, 82px);
    align-items: center;
    justify-content: center;
    gap: clamp(10px, 1.7cqi, 16px);
    margin-top: 4px;
    padding: 10px 20px;
    border: 2px solid rgba(255, 255, 255, .8);
    border-bottom-color: #5220d8;
    border-radius: clamp(18px, 2.8cqi, 27px);
    color: #fff;
    background: linear-gradient(100deg, #08b7ed 0%, #176cf1 30%, #6a43f2 67%, #d52fd3 100%);
    box-shadow: 0 9px 18px rgba(56, 52, 216, .26), inset 0 1px 0 rgba(255,255,255,.54);
    font-family: 'Fredoka', 'Inter', system-ui, sans-serif;
    font-size: clamp(22px, 3.5cqi, 33px);
    font-weight: 700;
    cursor: pointer;
}

html body.parent-register-v2-page .parent-register-v2-submit img {
    width: clamp(26px, 3.6cqi, 34px);
    height: clamp(26px, 3.6cqi, 34px);
    object-fit: contain;
    filter: brightness(0) invert(1);
}

html body.parent-register-v2-page .parent-register-v2-submit:hover { filter: saturate(1.08) brightness(1.03); }
html body.parent-register-v2-page .parent-register-v2-submit:active { transform: translateY(1px); }

html body.parent-register-v2-page .parent-register-v2-login {
    margin: clamp(17px, 2.5cqi, 24px) 0 0;
    color: #091f61;
    font-size: clamp(16px, 2.4cqi, 23px);
    text-align: center;
}

html body.parent-register-v2-page .parent-register-v2-login a {
    color: #1760de;
    font-weight: 700;
    text-decoration: none;
}

html body.parent-register-v2-page .parent-register-v2-benefits {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(10px, 1.55cqi, 14px);
    margin: 0 auto;
}

html body.parent-register-v2-page .parent-register-v2-benefit {
    display: flex;
    min-width: 0;
    min-height: clamp(218px, 35cqi, 300px);
    align-items: center;
    flex-direction: column;
    padding: clamp(10px, 1.5cqi, 15px) clamp(7px, 1.3cqi, 12px) clamp(12px, 1.7cqi, 16px);
    overflow: hidden;
    border: 2px solid rgba(255,255,255,.94);
    border-radius: clamp(20px, 3.1cqi, 30px);
    background: rgba(247, 253, 255, .91);
    box-shadow: 0 11px 24px rgba(37, 78, 145, .13), inset 0 0 0 1px rgba(177, 220, 245, .7);
    text-align: center;
}

html body.parent-register-v2-page .parent-register-v2-benefit--rewards { background: rgba(250, 244, 255, .94); }

html body.parent-register-v2-page .parent-register-v2-benefit__art {
    width: clamp(64px, 16.7cqi, 136px);
    height: clamp(64px, 16.7cqi, 136px);
    flex: 0 0 auto;
    overflow: hidden;
    background: transparent;
}

html body.parent-register-v2-page .parent-register-v2-benefit__art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

html body.parent-register-v2-page .parent-register-v2-benefit h2 {
    margin: clamp(7px, 1.1cqi, 11px) 0 4px;
    color: #08236c;
    font-family: 'Fredoka', 'Inter', system-ui, sans-serif;
    font-size: clamp(14px, 2.7cqi, 22px);
    line-height: 1.05;
}

html body.parent-register-v2-page .parent-register-v2-benefit p {
    margin: 0;
    color: #425f96;
    font-size: clamp(10px, 1.65cqi, 15.5px);
    line-height: 1.28;
    overflow-wrap: anywhere;
}

html body.parent-register-v2-page .parent-register-v2-benefit > a {
    display: grid;
    width: clamp(44px, 5.8cqi, 55px);
    height: clamp(44px, 5.8cqi, 55px);
    flex: 0 0 auto;
    margin: auto auto 0;
    place-items: center;
    border: 3px solid rgba(255,255,255,.9);
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(#28bfff, #0870e8);
    box-shadow: 0 6px 10px rgba(24, 103, 219, .24);
    font-size: clamp(24px, 3.5cqi, 33px);
    line-height: 1;
    text-decoration: none;
}

html body.parent-register-v2-page .parent-register-v2-benefit--children > a { background: linear-gradient(#31cec2, #04a9b0); }
html body.parent-register-v2-page .parent-register-v2-benefit--rewards > a { background: linear-gradient(#9b61ff, #6635e9); }

html body.parent-register-v2-page .parent-register-v2-google-wrap {
    width: 100%;
    margin: clamp(14px, 2.3cqi, 22px) auto 0;
    text-align: center;
}

html body.parent-register-v2-page .parent-register-v2-google {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 8px 16px;
    border: 1px solid #d8e2f0;
    border-radius: 999px;
    color: #4e638d;
    background: #fff;
    box-shadow: 0 4px 10px rgba(47, 79, 135, .08);
    font-size: clamp(12px, 1.6cqi, 15px);
    text-decoration: none;
}

html body.parent-register-v2-page .parent-register-v2-google img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

html body.parent-register-v2-page .parent-register-v2-google-wrap .form-message {
    margin: 12px auto 0;
}

@media (max-width: 560px) {
    html body.parent-register-v2-page .parent-register-v2-shell {
        padding-right: 12px;
        padding-left: 12px;
        background-size: auto 100%;
    }

    html body.parent-register-v2-page .parent-register-v2-hero {
        height: 330px;
        margin-right: -12px;
        margin-left: -12px;
    }

    html body.parent-register-v2-page .parent-register-v2-logo {
        top: 24px;
        width: min(61cqi, 246px);
    }

    html body.parent-register-v2-page .parent-register-v2-characters {
        width: min(100cqi, 390px);
        transform: translateX(-49%);
    }

    html body.parent-register-v2-page .parent-register-v2-panel {
        margin-top: -22px;
        padding: 24px 14px;
        border-radius: 24px;
    }

    html body.parent-register-v2-page .parent-register-v2-heading p {
        width: 100%;
    }

    html body.parent-register-v2-page .parent-register-v2-grid--two {
        grid-template-columns: minmax(0, 1fr);
    }

    html body.parent-register-v2-page .parent-register-v2-benefits {
        gap: 8px;
    }

    html body.parent-register-v2-page .parent-register-v2-benefit {
        min-height: 210px;
        padding-right: 4px;
        padding-left: 4px;
    }
}

@media (max-width: 350px) {
    html body.parent-register-v2-page .parent-register-v2-panel {
        padding-right: 10px;
        padding-left: 10px;
    }

    html body.parent-register-v2-page .parent-register-v2-info {
        align-items: flex-start;
        text-align: left;
    }

    html body.parent-register-v2-page .parent-register-v2-benefit {
        min-height: 220px;
    }

    html body.parent-register-v2-page .parent-register-v2-benefit h2 {
        font-size: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html body.parent-register-v2-page * { scroll-behavior: auto !important; transition: none !important; }
}
/* GLOBAL-AUTH-ICON-ALIGN-070: canonical premium mail/password icons across parent and teacher auth forms. */
html body.teacher-signin-reference-page .teacher-signin-reference-field > img[src*="premium-auth/"],
html body.teacher-signin-reference-page .teacher-signin-reference-symbol img[src*="premium-auth/"],
html body.teacher-register-reference-page .teacher-register-reference-field > img[src*="premium-auth/"],
html body.teacher-register-reference-page .teacher-register-reference-symbol img[src*="premium-auth/"],
html body.parent-login-v2-page .parent-login-v2-field__icon img[src*="premium-auth/"],
html body.parent-register-v2-page .parent-register-v2-field__icon img[src*="premium-auth/"] {
    display: block !important;
    object-fit: contain !important;
    object-position: center !important;
    background: transparent !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    box-shadow: none !important;
}

html body.teacher-signin-reference-page .teacher-signin-reference-field > img[src*="premium-auth/"],
html body.teacher-signin-reference-page .teacher-signin-reference-symbol {
    width: 30px !important;
    height: 30px !important;
    flex-basis: 30px !important;
    filter: none !important;
}

html body.teacher-signin-reference-page .teacher-signin-reference-symbol img {
    width: 100% !important;
    height: 100% !important;
}

html body.teacher-register-reference-page .teacher-register-reference-field > img[src*="premium-auth/"],
html body.teacher-register-reference-page .teacher-register-reference-symbol {
    width: 24px !important;
    height: 24px !important;
    flex-basis: 24px !important;
    filter: none !important;
}

html body.teacher-register-reference-page .teacher-register-reference-symbol img {
    width: 100% !important;
    height: 100% !important;
}

html body.parent-login-v2-page .parent-login-v2-field__icon img[src*="premium-auth/"],
html body.parent-register-v2-page .parent-register-v2-field__icon img[src*="premium-auth/"] {
    width: min(70%, 28px) !important;
    height: min(70%, 28px) !important;
}

@media (max-width: 560px) {
    html body.teacher-signin-reference-page .teacher-signin-reference-field > img[src*="premium-auth/"],
    html body.teacher-signin-reference-page .teacher-signin-reference-symbol {
        width: 24px !important;
        height: 24px !important;
        flex-basis: 24px !important;
    }
}
/* GLOBAL-BACK-BUTTON-CANONICAL-071 */
html body :where(.arena-back-button, .context-back-button, .child-profile-topbar-button, .parent-login-v2-back, .parent-register-v2-back, .teacher-signin-reference-back, .teacher-register-reference-back, .install-reference-back) {
    display: grid !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    overflow: visible !important;
}

html body :where(.arena-back-button, .context-back-button, .child-profile-topbar-button, .parent-login-v2-back, .parent-register-v2-back, .teacher-signin-reference-back, .teacher-register-reference-back, .install-reference-back) > img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: contain !important;
    background: transparent !important;
}

html body :where(.arena-back-button, .context-back-button, .child-profile-topbar-button, .parent-login-v2-back, .parent-register-v2-back, .teacher-signin-reference-back, .teacher-register-reference-back, .install-reference-back):hover,
html body :where(.arena-back-button, .context-back-button, .child-profile-topbar-button, .parent-login-v2-back, .parent-register-v2-back, .teacher-signin-reference-back, .teacher-register-reference-back, .install-reference-back):active,
html body :where(.arena-back-button, .context-back-button, .child-profile-topbar-button, .parent-login-v2-back, .parent-register-v2-back, .teacher-signin-reference-back, .teacher-register-reference-back, .install-reference-back):focus-visible {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

@media (max-width: 768px) {
    html body :where(.arena-back-button, .context-back-button, .child-profile-topbar-button, .parent-login-v2-back, .parent-register-v2-back, .teacher-signin-reference-back, .teacher-register-reference-back, .install-reference-back) {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        min-height: 52px !important;
    }
}

/* INSTALL-BACK-HOTSPOT-099: referentna slika vec sadrzi vidljivi back gumb; HTML ostaje samo klikabilno podrucje. */
html body.install-reference-image-page .install-reference-back {
    width: 10.3% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    aspect-ratio: 1 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body.install-reference-image-page .install-reference-back > img {
    display: none !important;
}

/* HOME-HERO-LAYOUT-089: logo na vrhu centriran, robot desno iznad install gumba. */
html body.home-reference-page .home-reference-hero > .home-reference-hero__logo {
    top: 45px !important;
}

html body.home-reference-page .home-reference-hero > .home-reference-hero__robot {
    top: auto !important;
    bottom: 0 !important;
    right: 0 !important;
}

/* HOME-CLEAN-BUTTONS-077: use supplied row images only and make all start-page tap targets larger. */
html body.home-reference-page .home-reference-row__balanced-button {
    display: none !important;
}

html body.home-reference-page .home-reference-group__rows {
    gap: clamp(1px, .3cqi, 3px) !important;
}

html body.home-reference-page .home-reference-row {
    transform-origin: center;
}

html body.home-reference-page .home-reference-group--teacher .home-reference-row {
    width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

html body.home-reference-page .home-reference-group--teacher .home-reference-row > .home-reference-supplied--row {
    width: 100% !important;
}

html body.home-reference-page .home-reference-group--parent .home-reference-row--exact-parent {
    width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;

}

html body.home-reference-page .home-reference-child {
    width: calc(100% + 12px) !important;
    margin-right: -6px !important;
    margin-left: -6px !important;
}

/* GLOBAL-BACK-BUTTON-CANONICAL-078: strongest transparent rule, replacing legacy body[class] blue buttons. */
html body[class] .arena-back-button,
html body[class] .context-back-button,
html body[class] .child-profile-topbar-button,
html body[class] .parent-login-v2-back,
html body[class] .parent-register-v2-back,
html body[class] .teacher-signin-reference-back,
html body[class] .teacher-register-reference-back,
html body[class] .install-reference-back,
html body[class] .robo-arena .ra-profile-reference__back {
    display: grid !important;
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;
    padding: 0 !important;
    place-items: center !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: inherit !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    filter: none !important;
}

html body[class] .arena-back-button:hover,
html body[class] .context-back-button:hover,
html body[class] .child-profile-topbar-button:hover,
html body[class] .parent-login-v2-back:hover,
html body[class] .parent-register-v2-back:hover,
html body[class] .teacher-signin-reference-back:hover,
html body[class] .teacher-register-reference-back:hover,
html body[class] .install-reference-back:hover,
html body[class] .robo-arena .ra-profile-reference__back:hover,
html body[class] .arena-back-button:active,
html body[class] .context-back-button:active,
html body[class] .child-profile-topbar-button:active,
html body[class] .parent-login-v2-back:active,
html body[class] .parent-register-v2-back:active,
html body[class] .teacher-signin-reference-back:active,
html body[class] .teacher-register-reference-back:active,
html body[class] .install-reference-back:active,
html body[class] .robo-arena .ra-profile-reference__back:active,
html body[class] .arena-back-button:focus-visible,
html body[class] .context-back-button:focus-visible,
html body[class] .child-profile-topbar-button:focus-visible,
html body[class] .parent-login-v2-back:focus-visible,
html body[class] .parent-register-v2-back:focus-visible,
html body[class] .teacher-signin-reference-back:focus-visible,
html body[class] .teacher-register-reference-back:focus-visible,
html body[class] .install-reference-back:focus-visible,
html body[class] .robo-arena .ra-profile-reference__back:focus-visible {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    filter: none !important;
}

html body[class] .arena-back-button > img,
html body[class] .context-back-button > img,
html body[class] .child-profile-topbar-button > img,
html body[class] .parent-login-v2-back > img,
html body[class] .parent-register-v2-back > img,
html body[class] .teacher-signin-reference-back > img,
html body[class] .teacher-register-reference-back > img,
html body[class] .install-reference-back > img,
html body[class] .robo-arena .ra-profile-reference__back > img {
    display: block !important;
    width: 64px !important;
    height: 64px !important;
    max-width: none !important;
    object-fit: contain !important;
    background: transparent !important;
    filter: none !important;
}

@media (max-width: 768px) {
    html body[class] .arena-back-button,
    html body[class] .context-back-button,
    html body[class] .child-profile-topbar-button,
    html body[class] .parent-login-v2-back,
    html body[class] .parent-register-v2-back,
    html body[class] .teacher-signin-reference-back,
    html body[class] .teacher-register-reference-back,
    html body[class] .install-reference-back,
    html body[class] .robo-arena .ra-profile-reference__back,
    html body[class] .arena-back-button > img,
    html body[class] .context-back-button > img,
    html body[class] .child-profile-topbar-button > img,
    html body[class] .parent-login-v2-back > img,
    html body[class] .parent-register-v2-back > img,
    html body[class] .teacher-signin-reference-back > img,
    html body[class] .teacher-register-reference-back > img,
    html body[class] .install-reference-back > img,
    html body[class] .robo-arena .ra-profile-reference__back > img {
        width: 60px !important;
        height: 60px !important;
        min-width: 60px !important;
        min-height: 60px !important;
    }
}

/* HOME-ACCESS-TIMBERLINE-PARITY-083 */
html body.teacher-reference-page .teacher-signin-reference-shell {
    width: min(100%, var(--safe-width, 768px));
    margin-left: auto;
    margin-right: auto;
}

html body.teacher-reference-page .teacher-register-reference-card {
    position: relative;
    width: min(100%, var(--safe-width, 768px));
    min-height: 100vh;
    padding-bottom: clamp(24px, 5vw, 36px);
}

html body.teacher-reference-page .teacher-signin-reference-card {
    position: relative;
    width: min(100%, var(--safe-width, 768px));
    margin-left: auto;
    margin-right: auto;
}

/* GLOBAL-BACK-BUTTON-LARGER-103: strelica za natrag veca za 20% (64->110px desktop, 60->103px mobile). */
html body[class] .arena-back-button,
html body[class] .context-back-button,
html body[class] .child-profile-topbar-button,
html body[class] .parent-login-v2-back,
html body[class] .parent-register-v2-back,
html body[class] .teacher-signin-reference-back,
html body[class] .teacher-register-reference-back,
html body[class] .install-reference-back,
html body[class] .robo-arena .ra-profile-reference__back {
    width: 110px !important;
    height: 110px !important;
    min-width: 110px !important;
    min-height: 110px !important;
}

html body[class] .arena-back-button > img,
html body[class] .context-back-button > img,
html body[class] .child-profile-topbar-button > img,
html body[class] .parent-login-v2-back > img,
html body[class] .parent-register-v2-back > img,
html body[class] .teacher-signin-reference-back > img,
html body[class] .teacher-register-reference-back > img,
html body[class] .install-reference-back > img,
html body[class] .robo-arena .ra-profile-reference__back > img {
    width: 110px !important;
    height: 110px !important;
    max-width: none !important;
}

@media (max-width: 768px) {
    html body[class] .arena-back-button,
    html body[class] .context-back-button,
    html body[class] .child-profile-topbar-button,
    html body[class] .parent-login-v2-back,
    html body[class] .parent-register-v2-back,
    html body[class] .teacher-signin-reference-back,
    html body[class] .teacher-register-reference-back,
    html body[class] .install-reference-back,
    html body[class] .robo-arena .ra-profile-reference__back,
    html body[class] .arena-back-button > img,
    html body[class] .context-back-button > img,
    html body[class] .child-profile-topbar-button > img,
    html body[class] .parent-login-v2-back > img,
    html body[class] .parent-register-v2-back > img,
    html body[class] .teacher-signin-reference-back > img,
    html body[class] .teacher-register-reference-back > img,
    html body[class] .install-reference-back > img,
    html body[class] .robo-arena .ra-profile-reference__back > img {
        width: 103px !important;
        height: 103px !important;
        min-width: 103px !important;
        min-height: 103px !important;
    }
}
/* AUTH-LOGO-UNIFORM-104: logo Matematicke arene iste sirine na svim formama za prijavu/registraciju i bez istezanja (object-fit: contain umjesto fill). */
/* CHILD-LOGIN-BACK-WIDE-153: keep the child login back control inside its centered stage. */
html body.flow-child-id-page .child-id-stage > .child-id-back.arena-back-button {
    position: absolute !important;
    top: 22px !important;
    left: 24px !important;
}

html body.teacher-signin-reference-page .teacher-signin-reference-logo,
html body.teacher-register-reference-page .teacher-register-reference-logo,
html body.parent-login-v2-page .parent-login-v2-logo,
html body.parent-register-v2-page .parent-register-v2-logo {
    width: 390px !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    filter: none !important;
}

@media (max-width: 768px) {
    html body.teacher-signin-reference-page .teacher-signin-reference-logo,
    html body.teacher-register-reference-page .teacher-register-reference-logo,
    html body.parent-login-v2-page .parent-login-v2-logo,
    html body.parent-register-v2-page .parent-register-v2-logo {
        width: 220px !important;
        min-width: 220px !important;
        height: auto !important;
        max-width: 100% !important;
        object-fit: contain !important;
        filter: none !important;
    }
}

/* TEACHER-HOMEWORK-157 */
.teacher-homework-builder{display:grid!important;gap:18px!important;padding:22px!important;border:1px solid #cfe1ff!important;border-radius:22px!important;background:linear-gradient(145deg,#f8fbff,#eef8ff)!important}.teacher-homework-intro{display:grid;gap:4px}.teacher-homework-intro strong{font-size:1.25rem;color:#08246f}.teacher-homework-intro small{color:#59719f}.teacher-homework-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.teacher-homework-fields label{display:grid;gap:7px;font-weight:800;color:#173575}.teacher-homework-fields select{width:100%;min-height:48px;border:1px solid #bed5fa;border-radius:14px;background:#fff;padding:0 14px;color:#0b2873;font:inherit}.teacher-table-picker{margin:0;padding:16px;border:1px solid #c5dafb;border-radius:18px;background:#fff}.teacher-table-picker legend{padding:0 7px;font-weight:900;color:#0b2873}.teacher-table-picker p{margin:0 0 12px;color:#6077a3}.teacher-table-picker>div{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}.teacher-table-picker label{cursor:pointer}.teacher-table-picker input{position:absolute;opacity:0}.teacher-table-picker span{display:grid;place-items:center;min-height:48px;border:2px solid #d6e4fb;border-radius:13px;color:#17449b;font-weight:900;background:#f8fbff}.teacher-table-picker input:checked+span{border-color:#1768ff;background:#1768ff;color:#fff;box-shadow:0 7px 16px #1768ff30}.teacher-table-all{margin-top:12px;border:0;background:transparent;color:#1261dd;font-weight:900;cursor:pointer}.teacher-homework-summary{padding:13px 16px;border-radius:14px;background:#e3f7ef;color:#176645}.teacher-homework-builder .teacher-button--assign{justify-self:stretch;min-height:52px}.ra-school-homework{margin:0 0 22px;padding:20px;border:1px solid #bcd8ff;border-radius:24px;background:linear-gradient(135deg,#fff9df,#eef8ff);box-shadow:0 12px 28px #183d8020}.ra-school-homework header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.ra-school-homework header span{font-size:.72rem;font-weight:1000;letter-spacing:.12em;color:#e17600}.ra-school-homework h2{margin:2px 0 0;color:#092772;font-size:1.35rem}.ra-school-homework header>b{padding:7px 11px;border-radius:999px;background:#fff;color:#155cd6}.ra-school-homework-list{display:grid;gap:10px}.ra-school-homework-list article{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:13px;border:1px solid #d2e2fb;border-radius:17px;background:#fff}.ra-school-homework-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:#ffec9e;color:#985900;font-size:1.4rem}.ra-school-homework-list strong,.ra-school-homework-list small{display:block}.ra-school-homework-list strong{color:#092772;font-size:1.05rem}.ra-school-homework-list small{margin-top:3px;color:#58709b;line-height:1.35}.ra-school-homework-list a{padding:11px 14px;border-radius:13px;background:#1265ea;color:#fff;font-weight:900;text-decoration:none;white-space:nowrap}
@media(max-width:700px){.teacher-homework-fields{grid-template-columns:1fr}.teacher-table-picker>div{grid-template-columns:repeat(5,1fr)}.teacher-homework-builder{padding:16px!important}.ra-school-homework{padding:15px}.ra-school-homework header{align-items:flex-start}.ra-school-homework h2{font-size:1.12rem}.ra-school-homework-list article{grid-template-columns:auto 1fr}.ra-school-homework-list a{grid-column:1/-1;text-align:center}.ra-school-homework-list small{font-size:.78rem}}

/* RESPONSIVE-HOMEWORK-158 */
html body .teacher-homework-builder{grid-template-columns:minmax(0,1fr)!important}
html body .teacher-homework-builder .teacher-homework-fields{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%!important;gap:14px!important}
html body .teacher-homework-builder .teacher-table-picker{display:block!important;min-width:0!important;width:100%!important}
html body .teacher-homework-builder .teacher-table-picker label{display:block!important;min-width:0!important}
html body .teacher-homework-builder .teacher-table-picker input[type="checkbox"]{position:absolute!important;width:1px!important;height:1px!important;min-width:0!important;min-height:0!important;margin:0!important;padding:0!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;overflow:hidden!important}
html body.parent-profile-reference-page .adult-stat-detail-hint{display:none!important}
html body.teacher-reference-class .teacher-filter--management{width:auto!important;min-width:112px!important;flex:0 0 auto!important;padding:0 20px!important;gap:9px!important;font-weight:900!important}
html body.teacher-reference-class .teacher-filter--management b{font-size:17px;line-height:1}
html body.teacher-reference-class .teacher-profile-edit{display:inline-flex;align-items:center;gap:6px;margin-top:3px;padding:2px 0;border:0;color:#fff;background:transparent;font:800 12px/1.2 Inter,sans-serif;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
html body.teacher-reference-class .teacher-profile-edit span{font-size:13px}
@media(max-width:900px){html body .teacher-homework-builder .teacher-homework-fields{grid-template-columns:1fr!important}html body .teacher-homework-builder .teacher-table-picker>div{grid-template-columns:repeat(5,minmax(0,1fr))!important}}
@media(max-width:560px){html body.teacher-reference-class .teacher-filter--management{min-width:96px!important;min-height:44px!important;padding:0 15px!important}html body.parent-profile-reference-page .parent-reference-chart{height:180px!important;padding-left:34px!important;overflow:hidden!important}html body.parent-profile-reference-page .parent-reference-chart svg,html body.parent-profile-reference-page .parent-reference-chart__labels{width:100%!important;min-width:0!important}html body.parent-profile-reference-page .parent-reference-chart__labels{font-size:8px!important;gap:0!important}html body.parent-profile-reference-page .parent-reference-chart__labels span{min-width:0!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:clip!important}.teacher-homework-intro strong{font-size:1.1rem}.teacher-homework-intro small,.teacher-table-picker p{line-height:1.45}.teacher-homework-summary{font-size:.88rem;line-height:1.4}}

/* TEACHER-HOMEWORK-LAYOUT-162: keep the assignment builder as one calm, readable card. */
html body.teacher-reference-class .teacher-homework-builder {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

html body.teacher-reference-class .teacher-homework-builder > * {
    min-width: 0 !important;
    max-width: 100% !important;
    grid-column: 1 / -1 !important;
}

html body.teacher-reference-class .teacher-homework-intro {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 5px !important;
}

html body.teacher-reference-class .teacher-homework-intro strong {
    font-size: clamp(18px, 2.1vw, 23px) !important;
    line-height: 1.1 !important;
}

html body.teacher-reference-class .teacher-homework-intro small {
    max-width: 58ch !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
}

html body.teacher-reference-class .teacher-homework-fields {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

html body.teacher-reference-class .teacher-homework-fields label,
html body.teacher-reference-class .teacher-table-picker label {
    min-width: 0 !important;
    max-width: 100% !important;
    line-height: 1.25 !important;
}

html body.teacher-reference-class .teacher-homework-fields select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 46px !important;
    white-space: normal !important;
}

html body.teacher-reference-class .teacher-table-picker {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 16px !important;
    box-sizing: border-box !important;
}

html body.teacher-reference-class .teacher-table-picker legend {
    float: none !important;
    width: auto !important;
    max-width: 100% !important;
    padding: 0 6px !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
}

html body.teacher-reference-class .teacher-table-picker p {
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
}

html body.teacher-reference-class .teacher-table-picker > div {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(42px, 1fr)) !important;
    gap: 8px !important;
}

html body.teacher-reference-class .teacher-table-picker span {
    min-height: 42px !important;
    padding: 7px 4px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

html body.teacher-reference-class .teacher-table-all {
    justify-self: start !important;
    margin-top: 0 !important;
    min-height: 36px !important;
}

html body.teacher-reference-class .teacher-homework-summary {
    justify-self: start !important;
    max-width: 100% !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
}

html body.teacher-reference-class .teacher-homework-builder .teacher-button--assign {
    width: 100% !important;
    min-width: 0 !important;
}

html body.teacher-reference-page .teacher-target-icon--image {
    display: inline-grid !important;
    place-items: center !important;
    flex: 0 0 34px !important;
    width: 34px !important;
    height: 34px !important;
    font-size: 0 !important;
    line-height: 0 !important;
}

html body.teacher-reference-page .teacher-target-icon--image > img {
    display: block !important;
    width: 38px !important;
    height: 38px !important;
    object-fit: contain !important;
}

@media (min-width: 1120px) {
    html body.teacher-reference-class .teacher-assignments-panel:only-child .teacher-homework-fields {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    html body.teacher-reference-class .teacher-homework-builder {
        padding: 16px !important;
        gap: 14px !important;
    }

    html body.teacher-reference-class .teacher-homework-fields {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body.teacher-reference-class .teacher-table-picker > div {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }
}

@media (max-width: 380px) {
    html body.teacher-reference-class .teacher-table-picker {
        padding: 13px !important;
    }

    html body.teacher-reference-class .teacher-table-picker > div {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* TEACHER-MOBILE-POLISH-164: keep profile controls and filters readable on narrow screens. */
html body.teacher-reference-page .teacher-period-filter__label {
    display: block;
    margin: 0 0 7px;
    color: #092772;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.2;
}

@media (max-width: 640px) {
    html body.teacher-reference-page .teacher-app-header__profile {
        top: 20px !important;
        right: 12px !important;
        display: inline-flex !important;
        max-width: 118px !important;
        min-height: 54px !important;
        padding: 6px 8px 6px 6px !important;
        align-items: center !important;
        gap: 7px !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    html body.teacher-reference-page .teacher-app-header__profile .teacher-avatar,
    html body.teacher-reference-page .teacher-app-header__profile > img {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        flex: 0 0 42px !important;
    }

    html body.teacher-reference-page .teacher-app-header__profile div {
        display: grid !important;
        min-width: 0 !important;
        gap: 2px !important;
    }

    html body.teacher-reference-page .teacher-app-header__profile strong {
        max-width: 58px !important;
        overflow: hidden !important;
        color: #fff !important;
        font-size: 12px !important;
        line-height: 1.1 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html body.teacher-reference-page .teacher-profile-edit {
        display: inline-flex !important;
        width: max-content !important;
        max-width: 64px !important;
        min-height: 18px !important;
        margin: 0 !important;
        padding: 0 !important;
        align-items: center !important;
        gap: 3px !important;
        color: #fff !important;
        font-size: 10px !important;
        line-height: 1.1 !important;
        text-decoration: none !important;
        opacity: .98 !important;
    }

    html body.teacher-reference-page .teacher-profile-edit span {
        font-size: 11px !important;
        line-height: 1 !important;
    }

    html body.teacher-reference-dashboard .teacher-page-heading {
        gap: 18px !important;
        padding: 20px 16px 16px !important;
    }

    html body.teacher-reference-dashboard .teacher-period-filter {
        display: block !important;
        width: min(100%, 282px) !important;
        min-width: 0 !important;
        margin-top: 0 !important;
    }

    html body.teacher-reference-dashboard .teacher-period-filter__label {
        margin-bottom: 8px !important;
    }

    html body.teacher-reference-dashboard .teacher-period-filter .teacher-calendar-icon {
        top: calc(50% + 13px) !important;
        left: 17px !important;
    }

    html body.teacher-reference-dashboard .teacher-period-filter select.teacher-filter {
        width: 100% !important;
        min-width: 0 !important;
        height: 56px !important;
        padding-left: 48px !important;
        padding-right: 38px !important;
        border-radius: 18px !important;
        font-size: 16px !important;
    }
}
/* COACH-ASPECT-165: keep the trainer robot natural and compact in the advice card. */
html body.teacher-reference-dashboard .teacher-dashboard-footer-grid > .teacher-coach-card {
    position: relative !important;
    overflow: hidden !important;
    align-self: start !important;
}

html body.teacher-reference-dashboard .teacher-coach-card > img[src*="robo-mentor-dashboard"] {
    position: absolute !important;
    right: clamp(8px, 1.6vw, 16px) !important;
    bottom: 8px !important;
    width: auto !important;
    height: clamp(118px, 16vw, 142px) !important;
    max-width: 34% !important;
    max-height: calc(100% - 16px) !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center bottom !important;
    transform: none !important;
}

html body.teacher-reference-dashboard .teacher-coach-card > div {
    position: relative !important;
    z-index: 2 !important;
}

@media (max-width: 720px) {
    html body.teacher-reference-dashboard .teacher-dashboard-footer-grid > .teacher-coach-card {
        min-height: 158px !important;
    }

    html body.teacher-reference-dashboard .teacher-coach-card > div {
        width: calc(100% - 108px) !important;
    }

    html body.teacher-reference-dashboard .teacher-coach-card > img[src*="robo-mentor-dashboard"] {
        right: 8px !important;
        bottom: 8px !important;
        width: auto !important;
        height: 126px !important;
        max-width: 32% !important;
        max-height: 126px !important;
    }
}

@media (max-width: 380px) {
    html body.teacher-reference-dashboard .teacher-coach-card > div {
        width: calc(100% - 92px) !important;
    }

    html body.teacher-reference-dashboard .teacher-coach-card > img[src*="robo-mentor-dashboard"] {
        height: 112px !important;
        max-width: 30% !important;
        max-height: 112px !important;
    }
}
/* TEACHER-GEAR-POPUP-168: profile edit is a compact gear and management opens as a modal. */
html body.teacher-reference-page .teacher-app-header__profile .teacher-profile-edit {
    display: inline-grid !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    max-width: 30px !important;
    margin: 3px 0 0 !important;
    padding: 0 !important;
    place-items: center !important;
    border: 1px solid rgba(255,255,255,.46) !important;
    border-radius: 999px !important;
    color: #ffffff !important;
    background: rgba(255,255,255,.16) !important;
    box-shadow: 0 10px 22px rgba(0,42,140,.18), inset 0 1px 0 rgba(255,255,255,.28) !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

html body.teacher-reference-page .teacher-app-header__profile .teacher-profile-edit span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    font-size: 15px !important;
    line-height: 1 !important;
}

html body.teacher-reference-page .teacher-app-header__profile .teacher-profile-edit:hover,
html body.teacher-reference-page .teacher-app-header__profile .teacher-profile-edit:focus-visible {
    background: rgba(255,255,255,.24) !important;
    transform: translateY(-1px) !important;
    outline: none !important;
}

html body.teacher-management-modal-open {
    overflow: hidden !important;
}

html body.teacher-management-modal-open .teacher-management-backdrop {
    opacity: 1 !important;
    pointer-events: auto !important;
}

html body .teacher-management-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1001 !important;
    background: rgba(3, 24, 77, .56) !important;
    -webkit-backdrop-filter: blur(2px) !important;
    backdrop-filter: blur(2px) !important;
    opacity: 0 !important;
    transition: opacity .2s ease !important;
    pointer-events: none !important;
}

/* POPUP-STANDARD-171: jedinstveni efekat, centriranje i responzivna veličina svih popup prozora u igri. */
html body.ma-popup-open {
    overflow: hidden !important;
}

html body:where(.parent-premium-page, .parent-profile-reference-page, .teacher-reference-page, .teacher-shell, .robo-arena-page, .ra-game-page) :is(
    dialog.parent-child-id-dialog,
    dialog.parent-edit-dialog,
    dialog.ra-trophy-dialog
) {
    position: fixed !important;
    inset: 0 !important;
    margin: 0 !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    max-height: min(92dvh, calc(100dvh - 18px)) !important;
    padding: 0 !important;
    border-radius: 24px !important;
    box-shadow: 0 22px 70px rgba(2, 32, 98, .38) !important;
    z-index: 6000 !important;
}

html body:where(.parent-premium-page, .parent-profile-reference-page, .teacher-reference-page, .teacher-shell, .robo-arena-page, .ra-game-page) dialog.parent-child-id-dialog {
    width: min(100% - 18px, 460px) !important;
}

html body:where(.parent-premium-page, .parent-profile-reference-page, .teacher-reference-page, .teacher-shell, .robo-arena-page, .ra-game-page) dialog.parent-edit-dialog {
    width: min(100% - 18px, 470px) !important;
}

html body:where(.parent-premium-page, .parent-profile-reference-page, .teacher-reference-page, .teacher-shell, .robo-arena-page, .ra-game-page) dialog.ra-trophy-dialog {
    width: min(100vw - 18px, 680px) !important;
}

html body:where(.parent-premium-page, .parent-profile-reference-page, .teacher-reference-page, .teacher-shell, .robo-arena-page, .ra-game-page) :is(
    dialog.parent-child-id-dialog,
    dialog.parent-edit-dialog,
    dialog.ra-trophy-dialog
)::backdrop,
html body:where(.parent-premium-page, .parent-profile-reference-page, .teacher-reference-page, .teacher-shell, .robo-arena-page, .ra-game-page) .adult-stat-modal__backdrop {
    background: rgba(3, 20, 58, .58) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

@media (max-width: 720px) {
    html body:where(.parent-premium-page, .parent-profile-reference-page, .teacher-reference-page, .teacher-shell, .robo-arena-page, .ra-game-page) :is(
        dialog.parent-child-id-dialog,
        dialog.parent-edit-dialog,
        dialog.ra-trophy-dialog
    ) {
        width: calc(100vw - 16px) !important;
        max-height: calc(100dvh - 16px) !important;
        border-radius: 24px !important;
        transform: translate(-50%, -50%) !important;
    }
}

html body.teacher-reference-page .teacher-class-management[open] {
    border-radius: 28px !important;
    border: 1px solid rgba(129,190,255,.48) !important;
    background: linear-gradient(145deg,#ffffff,#eef8ff) !important;
}

@media (max-width: 720px) {
    html body.teacher-reference-page .teacher-app-header__profile .teacher-profile-edit {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        max-width: 28px !important;
        margin-top: 2px !important;
    }

    html body.teacher-reference-page .teacher-app-header__profile .teacher-profile-edit span {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
        font-size: 14px !important;
        line-height: 1 !important;
    }

    html body.teacher-reference-dashboard .teacher-dashboard-management[open],
    html body.teacher-reference-class .teacher-class-tools[open] {
        top: auto !important;
        bottom: 10px !important;
        width: calc(100% - 20px) !important;
        max-height: min(82dvh, 760px) !important;
        transform: translateX(-50%) !important;
        border-radius: 24px !important;
    }
}


/* INTERACTION-172 */
body .teacher-management-backdrop, body .adult-stat-modal__backdrop { background:rgba(3,20,58,.58)!important;backdrop-filter:blur(8px)!important; }
body .adult-stat-modal {align-items:center;padding:12px;}
body .teacher-reference-dashboard .teacher-dashboard-management[open], body .teacher-reference-class .teacher-class-tools[open] {top:50%!important;bottom:auto!important;transform:translate(-50%,-50%)!important;max-height:calc(100dvh - 24px)!important;overflow-y:auto!important;}
body dialog.parent-child-id-dialog > form, body dialog.parent-edit-dialog > form {padding:clamp(18px,4vw,28px);}

/* PARENT-ONBOARDING-REDESIGN-246: light reference flow from the onboarding pack. */
html body.parent-onboarding-page {
    --po-blue: #075bdc;
    --po-blue-deep: #082a8f;
    --po-sky: #dff5ff;
    --po-card: #ffffff;
    --po-text: #0b2878;
    --po-muted: #486596;
    --po-yellow: #ffd447;
    --po-border: #cbe3f8;
    background: linear-gradient(180deg, #dff5ff 0, #f7fcff 52%, #ffffff 100%) !important;
    color: var(--po-text);
}

html body.parent-onboarding-page .parent-topbar {
    width: min(100%, 430px);
    min-height: 118px;
    margin: 0 auto;
    border: 0;
    box-shadow: none;
    background: transparent;
}

html body.parent-onboarding-page .parent-topbar .brand {
    position: absolute;
    top: 8px;
    left: 50%;
    width: 166px;
    height: 78px;
    transform: translateX(-50%);
}

html body.parent-onboarding-page .parent-topbar .parent-brand-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

html body.parent-onboarding-page .parent-topbar .brand > span,
html body.parent-onboarding-page .parent-topbar .parent-pill,
html body.parent-onboarding-page .parent-topbar .nav-actions { display: none !important; }

html body.parent-onboarding-page .parent-topbar .context-back-button {
    position: absolute;
    top: 22px;
    left: 12px;
    z-index: 4;
    width: 54px;
    height: 54px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

html body.parent-onboarding-page .parent-topbar .context-back-button img {
    width: 54px;
    height: 54px;
    object-fit: contain;
}

html body.parent-onboarding-page .app-page.parent-onboarding {
    width: min(100% - 20px, 430px);
    margin: -18px auto 0;
    padding: 0 0 104px;
}

html body.parent-onboarding-page .parent-onboarding-hero {
    position: relative;
    min-height: 238px;
    margin: 0 -10px 12px;
    padding: 94px 22px 28px;
    overflow: hidden;
    border-radius: 0 0 32px 32px;
    background:
        radial-gradient(circle at 20% 28%, rgba(255,255,255,.92) 0 4px, transparent 5px),
        radial-gradient(circle at 82% 34%, rgba(255,212,71,.65) 0 5px, transparent 6px),
        linear-gradient(155deg, #eafaff 0%, #cff1ff 52%, #ffffff 100%);
}

html body.parent-onboarding-page .parent-onboarding-hero .parent-add-child-back {
    display: none !important;
}

html body.parent-onboarding-page .parent-onboarding-hero::after {
    content: "";
    position: absolute;
    right: -36px;
    bottom: -28px;
    width: 172px;
    height: 172px;
    border-radius: 50%;
    background: rgba(255, 212, 71, .2);
}

html body.parent-onboarding-page .parent-onboarding-hero > div {
    position: relative;
    z-index: 2;
    max-width: 235px;
}

html body.parent-onboarding-page .parent-onboarding-hero .eyebrow,
html body.parent-onboarding-page .parent-child-setup > .eyebrow,
html body.parent-onboarding-page .profile-hero .eyebrow,
html body.parent-onboarding-page .parent-child-id-heading .eyebrow {
    color: #1167d8;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0;
}

html body.parent-onboarding-page .parent-onboarding-hero h1,
html body.parent-onboarding-page .parent-child-setup h2,
html body.parent-onboarding-page .profile-hero h1,
html body.parent-onboarding-page .parent-child-id-heading h2 {
    margin: 4px 0 8px;
    color: var(--po-text);
    font-size: clamp(2rem, 9vw, 2.6rem);
    line-height: 1.02;
    letter-spacing: 0;
}

html body.parent-onboarding-page .parent-onboarding-hero p,
html body.parent-onboarding-page .parent-child-setup > p,
html body.parent-onboarding-page .profile-hero p,
html body.parent-onboarding-page .parent-child-id-heading p {
    color: var(--po-muted);
    line-height: 1.45;
}

html body.parent-onboarding-page .parent-onboarding-logo {
    position: absolute;
    top: 4px;
    left: 50%;
    z-index: 1;
    width: 172px;
    height: 96px;
    object-fit: contain;
    transform: translateX(-50%);
}

html body.parent-onboarding-page .parent-onboarding-mentor,
html body.parent-onboarding-page .setup-mentor {
    position: absolute;
    right: 8px;
    bottom: 0;
    z-index: 1;
    width: 142px;
    max-height: 205px;
    object-fit: contain;
    object-position: bottom center;
}

html body.parent-onboarding-page .parent-add-step-counter {
    position: absolute;
    top: 102px;
    right: 18px;
    z-index: 3;
    display: grid;
    min-width: 58px;
    height: 34px;
    place-items: center;
    border: 1px solid rgba(7, 91, 220, .16);
    border-radius: 999px;
    background: rgba(255,255,255,.92);
    color: var(--po-blue);
    font-weight: 900;
}

html body.parent-onboarding-page :where(.onboarding-progress-panel, .parent-child-setup, .parent-child-id-card, .parent-reward-gate, .profile-hero.compact, .parent-custom-reward, .parent-owned-rewards) {
    border: 1px solid var(--po-border);
    border-radius: 24px;
    background: var(--po-card);
    box-shadow: 0 16px 36px rgba(8, 63, 145, .12);
}

html body.parent-onboarding-page .onboarding-progress-panel {
    padding: 14px;
}

html body.parent-onboarding-page .onboarding-progress-panel > h2 {
    margin: 0 0 12px;
    color: var(--po-text);
    font-size: 1.05rem;
}

html body.parent-onboarding-page .onboarding-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

html body.parent-onboarding-page .onboarding-steps :where(article, div, span) {
    min-width: 0;
}

html body.parent-onboarding-page .onboarding-steps article,
html body.parent-onboarding-page .onboarding-steps > div {
    min-height: 74px;
    padding: 10px 8px;
    border: 1px solid #d9e9f8;
    border-radius: 16px;
    background: #f8fcff;
    text-align: center;
}

html body.parent-onboarding-page .onboarding-steps :where(article, div).is-current,
html body.parent-onboarding-page .onboarding-steps :where(article, div).is-complete {
    border-color: #84d3f5;
    background: #eefaff;
}

html body.parent-onboarding-page .onboarding-steps :where(article, div) > span:first-child,
html body.parent-onboarding-page .onboarding-steps strong:first-child {
    display: grid;
    width: 28px;
    height: 28px;
    margin: 0 auto 6px;
    place-items: center;
    border-radius: 50%;
    background: var(--po-blue);
    color: #fff;
    font-size: 13px;
}

html body.parent-onboarding-page .onboarding-steps strong:not(:first-child),
html body.parent-onboarding-page .onboarding-steps span:not(:first-child) {
    display: block;
    color: var(--po-text);
    font-size: 12px;
    line-height: 1.2;
}

html body.parent-onboarding-page .onboarding-steps small {
    display: block;
    margin-top: 3px;
    color: var(--po-muted);
    font-size: 10px;
    line-height: 1.2;
}

html body.parent-onboarding-page .parent-child-setup {
    position: relative;
    padding: 24px 18px 20px;
    overflow: hidden;
}

html body.parent-onboarding-page .parent-child-setup .setup-mentor {
    top: 10px;
    right: 0;
    bottom: auto;
    width: 96px;
    max-height: 126px;
    opacity: .96;
}

html body.parent-onboarding-page .parent-add-child-form {
    display: grid;
    gap: 16px;
}

html body.parent-onboarding-page :where(.parent-add-input-shell, .parent-photo-upload, .parent-range-field, .parent-add-info, .parent-child-id-summary, .parent-child-id-display, .parent-child-id-note) {
    border: 1px solid #d9e9f8;
    border-radius: 18px;
    background: #f8fcff;
}

html body.parent-onboarding-page .parent-add-input-shell {
    min-height: 56px;
    padding: 0 14px;
}

html body.parent-onboarding-page .parent-add-input-shell input,
html body.parent-onboarding-page .parent-custom-reward input,
html body.parent-onboarding-page .parent-custom-reward textarea,
html body.parent-onboarding-page .parent-custom-reward select {
    color: var(--po-text);
    font-weight: 800;
}

html body.parent-onboarding-page .parent-grade-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

html body.parent-onboarding-page .parent-choice-chip span {
    min-height: 44px;
    border-radius: 14px;
    background: #f8fcff;
    color: var(--po-text);
}

html body.parent-onboarding-page .parent-choice-chip input:checked + span {
    background: var(--po-blue);
    color: #fff;
}

html body.parent-onboarding-page .parent-avatar-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

html body.parent-onboarding-page .parent-avatar-option {
    min-height: 132px;
    border: 1px solid #d9e9f8;
    border-radius: 18px;
    background: #fff;
}

html body.parent-onboarding-page .parent-avatar-visual {
    width: 72px;
    height: 72px;
    margin-inline: auto;
}

html body.parent-onboarding-page .parent-range-field {
    padding: 16px;
}

html body.parent-onboarding-page .parent-range-field input[type="range"] {
    accent-color: var(--po-blue);
}

html body.parent-onboarding-page .parent-add-info {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    padding: 13px;
    background: #eefaff;
}

html body.parent-onboarding-page .parent-add-info h3 {
    margin: 0 0 3px;
    color: var(--po-text);
    font-size: 1rem;
}

html body.parent-onboarding-page .parent-add-info p {
    margin: 0;
    color: var(--po-muted);
}

html body.parent-onboarding-page .btn.primary,
html body.parent-onboarding-page .parent-main-cta,
html body.parent-onboarding-page .parent-onboarding-sticky .btn.primary {
    border: 0;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffe071, var(--po-yellow));
    color: #643a00;
    box-shadow: 0 10px 20px rgba(197, 136, 0, .22);
}

html body.parent-onboarding-page .btn.secondary {
    border-color: #bfdbf7;
    border-radius: 16px;
    background: #fff;
    color: var(--po-blue);
}

html body.parent-onboarding-page .parent-child-id-card {
    padding: 0 18px 20px;
    overflow: hidden;
}

html body.parent-onboarding-page .parent-child-id-hero {
    position: relative;
    min-height: 168px;
    margin: 0 -18px 12px;
    background: linear-gradient(155deg, #eafaff 0%, #cff1ff 62%, #ffffff 100%);
}

html body.parent-onboarding-page .parent-child-id-logo {
    position: absolute;
    top: 0;
    left: 50%;
    width: 170px;
    height: 96px;
    object-fit: contain;
    transform: translateX(-50%);
}

html body.parent-onboarding-page .parent-child-id-robot {
    position: absolute;
    right: 24px;
    bottom: -10px;
    width: 132px;
    max-height: 176px;
    object-fit: contain;
}

html body.parent-onboarding-page .parent-child-id-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 18px;
}

html body.parent-onboarding-page .parent-child-id-steps span {
    padding: 9px 6px;
    border: 1px solid #d9e9f8;
    border-radius: 14px;
    background: #f8fcff;
    color: var(--po-muted);
    font-size: 12px;
    text-align: center;
}

html body.parent-onboarding-page .parent-child-id-steps .is-active,
html body.parent-onboarding-page .parent-child-id-steps .is-complete {
    border-color: #84d3f5;
    color: var(--po-blue);
    background: #eefaff;
}

html body.parent-onboarding-page .parent-child-id-summary {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
}

html body.parent-onboarding-page .parent-child-id-saved {
    grid-column: 1 / -1;
    color: #16834a;
    font-size: 12px;
    font-weight: 900;
}

html body.parent-onboarding-page .parent-child-id-display {
    padding: 18px 14px;
    text-align: center;
    background: linear-gradient(180deg, #fff, #f4fbff);
}

html body.parent-onboarding-page .parent-child-id-value {
    color: var(--po-blue-deep);
    font-size: clamp(2.2rem, 12vw, 3.2rem);
    letter-spacing: 0;
}

html body.parent-onboarding-page .parent-child-id-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

html body.parent-onboarding-page .parent-child-id-note {
    padding: 13px 14px;
}

html body.parent-onboarding-page .parent-child-id-note--warning {
    border-color: #ffd59b;
    background: #fff8e8;
}

html body.parent-onboarding-page .parent-rewards-management.parent-onboarding {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

html body.parent-onboarding-page .parent-rewards-management.parent-onboarding .profile-hero.compact { order: 1; }
html body.parent-onboarding-page .parent-rewards-management.parent-onboarding > .onboarding-steps { order: 2; }
html body.parent-onboarding-page .parent-rewards-management.parent-onboarding > .onboarding-reward-count { order: 3; }
html body.parent-onboarding-page .parent-rewards-management.parent-onboarding > .onboarding-reward-presets { order: 4; }
html body.parent-onboarding-page .parent-rewards-management.parent-onboarding > .two-column { order: 5; }
html body.parent-onboarding-page .parent-rewards-management.parent-onboarding > .parent-owned-rewards { display: none; }

html body.parent-onboarding-page .parent-rewards-management.parent-onboarding .profile-hero.compact {
    min-height: 174px;
    padding: 22px 18px 20px;
}

html body.parent-onboarding-page .parent-rewards-hero-chest {
    width: 96px;
    height: 96px;
    object-fit: contain;
}

html body.parent-onboarding-page .onboarding-reward-count {
    margin: 0;
    padding: 12px 16px;
    border: 1px solid var(--po-border);
    border-radius: 18px;
    background: #fff;
    color: var(--po-muted);
    box-shadow: 0 10px 24px rgba(8, 63, 145, .08);
}

html body.parent-onboarding-page .onboarding-reward-count strong {
    color: var(--po-blue);
}

html body.parent-onboarding-page .onboarding-reward-presets {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

html body.parent-onboarding-page .parent-rewards-management.parent-onboarding > .onboarding-steps > div span {
    display: block;
    color: var(--po-text);
    font-size: 12px;
    font-weight: 900;
    line-height: 1.2;
}

html body.parent-onboarding-page .onboarding-reward-presets button {
    min-height: 150px;
    padding: 14px 10px;
    border: 1px solid #d9e9f8;
    border-radius: 18px;
    background: #fff;
    color: var(--po-text);
    box-shadow: 0 10px 24px rgba(8, 63, 145, .08);
}

html body.parent-onboarding-page .onboarding-reward-presets button.is-selected {
    border-color: #ffd447;
    background: #fff9e7;
}

html body.parent-onboarding-page .onboarding-reward-presets img {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

html body.parent-onboarding-page .onboarding-reward-presets strong {
    color: var(--po-text);
    line-height: 1.15;
}

html body.parent-onboarding-page .onboarding-reward-presets b {
    border-radius: 999px;
    background: #eefaff;
    color: var(--po-blue);
}

html body.parent-onboarding-page .parent-custom-reward {
    padding: 16px;
}

html body.parent-onboarding-page .parent-custom-reward summary {
    color: var(--po-blue);
    font-weight: 900;
}

html body.parent-onboarding-page .parent-owned-rewards {
    padding: 16px;
}

html body.parent-onboarding-page .parent-onboarding-sticky {
    right: 10px;
    bottom: 10px;
    left: 10px;
    width: min(410px, calc(100% - 20px));
    margin-inline: auto;
    border: 1px solid rgba(203, 227, 248, .9);
    border-radius: 22px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 12px 32px rgba(8, 63, 145, .18);
}

@media (max-width: 380px) {
    html body.parent-onboarding-page .parent-onboarding-mentor { width: 118px; }
    html body.parent-onboarding-page .parent-onboarding-hero > div { max-width: 210px; }
    html body.parent-onboarding-page .parent-avatar-grid,
    html body.parent-onboarding-page .onboarding-reward-presets { grid-template-columns: 1fr; }
    html body.parent-onboarding-page .parent-child-id-actions { grid-template-columns: 1fr; }
}

/* PARENT-ONBOARDING-REDESIGN-247: replaces the previous dark/mobile arena styling with the supplied light poster reference. */
html body.parent-onboarding-page {
    --por-blue: #1384f5;
    --por-blue-dark: #071d60;
    --por-text: #071853;
    --por-muted: #5c73a4;
    --por-line: #d3e3f6;
    --por-sky: #dff6ff;
    --por-yellow: #ffd927;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 9% 8%, rgba(255, 220, 44, .72) 0 13px, transparent 14px),
        radial-gradient(circle at 43% 2%, rgba(255, 255, 255, .88) 0 26px, transparent 27px),
        linear-gradient(180deg, #cbf1ff 0, #eafaff 48%, #f7fdff 100%) !important;
    color: var(--por-text);
}

html body.parent-onboarding-page::before,
html body.parent-onboarding-page::after {
    content: "";
    position: fixed;
    z-index: 0;
    pointer-events: none;
    opacity: .5;
}

html body.parent-onboarding-page::before {
    top: 32px;
    left: 28px;
    width: 76px;
    height: 54px;
    border-radius: 18px;
    background: #68c6ff;
    transform: rotate(-18deg);
}

html body.parent-onboarding-page::after {
    top: 108px;
    right: -28px;
    width: 112px;
    height: 86px;
    border-radius: 24px;
    background: #87d4ff;
    transform: rotate(26deg);
}

html body.parent-onboarding-page .parent-topbar {
    position: relative;
    z-index: 1;
    width: min(100%, 430px);
    height: 198px;
    min-height: 198px;
    margin: 0 auto -8px;
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent !important;
    box-shadow: none;
}

html body.parent-onboarding-page .parent-topbar::after {
    content: "";
    position: absolute;
    right: -22px;
    bottom: -8px;
    z-index: 1;
    width: 220px;
    height: 202px;
    background: url("../images/parent/onboarding-reference/robo-mentor-superhero.png") right bottom / contain no-repeat;
}

html body.parent-onboarding-page .parent-topbar .brand {
    position: absolute;
    top: 20px;
    left: 22px;
    z-index: 2;
    width: 202px;
    height: 132px;
    transform: none;
}

html body.parent-onboarding-page .parent-topbar .parent-brand-logo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

html body.parent-onboarding-page .parent-topbar .context-back-button {
    top: 14px;
    left: 12px;
    z-index: 5;
    width: 52px;
    height: 52px;
    opacity: 0;
    pointer-events: none;
}

html body.parent-onboarding-page .parent-topbar .brand > span,
html body.parent-onboarding-page .parent-topbar .parent-pill,
html body.parent-onboarding-page .parent-topbar .nav-actions,
html body.parent-onboarding-page .parent-onboarding-hero,
html body.parent-onboarding-page .setup-mentor,
html body.parent-onboarding-page .parent-onboarding-sticky {
    display: none !important;
}

html body.parent-onboarding-page .app-page.parent-onboarding,
html body.parent-onboarding-page .app-page.parent-rewards-management.parent-onboarding {
    position: relative;
    z-index: 2;
    width: min(calc(100% - 28px), 402px);
    margin: 0 auto;
    padding: 0 0 34px;
    color: var(--por-text);
}

html body.parent-onboarding-page .app-page.parent-onboarding > :where(.form-message, .onboarding-progress-panel, .parent-child-setup, .parent-child-id-card, .parent-reward-gate, .profile-hero.compact, .onboarding-reward-count, .parent-custom-reward),
html body.parent-onboarding-page .parent-rewards-management.parent-onboarding > :where(.profile-hero.compact, .onboarding-reward-count, .parent-custom-reward) {
    margin: 0 0 14px;
}

html body.parent-onboarding-page .onboarding-progress-panel,
html body.parent-onboarding-page .parent-child-setup,
html body.parent-onboarding-page .parent-child-id-card,
html body.parent-onboarding-page .parent-reward-gate,
html body.parent-onboarding-page .profile-hero.compact,
html body.parent-onboarding-page .parent-custom-reward,
html body.parent-onboarding-page .parent-owned-rewards {
    border: 0;
    border-radius: 24px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 18px 42px rgba(39, 115, 184, .16);
}

html body.parent-onboarding-page .parent-child-setup,
html body.parent-onboarding-page .parent-child-id-card,
html body.parent-onboarding-page .profile-hero.compact {
    padding: 22px 18px 18px;
}

html body.parent-onboarding-page .parent-child-setup > .eyebrow,
html body.parent-onboarding-page .parent-child-id-heading .eyebrow,
html body.parent-onboarding-page .profile-hero.compact .eyebrow {
    margin: 0 0 6px;
    color: #62adff;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0;
}

html body.parent-onboarding-page .parent-child-setup h2,
html body.parent-onboarding-page .parent-child-id-heading h2,
html body.parent-onboarding-page .profile-hero.compact h1 {
    margin: 0 56px 8px 0;
    color: var(--por-text);
    font-size: clamp(2.25rem, 11vw, 3.25rem);
    line-height: .98;
    letter-spacing: 0;
}

html body.parent-onboarding-page .parent-child-setup > p,
html body.parent-onboarding-page .parent-child-id-heading p,
html body.parent-onboarding-page .profile-hero.compact p {
    margin: 0 0 16px;
    color: var(--por-muted);
    font-size: 1.08rem;
    line-height: 1.35;
}

html body.parent-onboarding-page .parent-child-setup::before,
html body.parent-onboarding-page .parent-child-id-card::before,
html body.parent-onboarding-page .profile-hero.compact::before {
    content: "1 / 3";
    position: absolute;
    top: 44px;
    right: 20px;
    color: var(--por-blue);
    font-size: 1.85rem;
    font-weight: 900;
}

html body.parent-onboarding-page .parent-child-id-card::before { content: "2 / 3"; }
html body.parent-onboarding-page .profile-hero.compact::before { content: "3 / 3"; }

html body.parent-onboarding-page .onboarding-progress-panel {
    display: none;
}

html body.parent-onboarding-page .parent-child-id-steps,
html body.parent-onboarding-page .onboarding-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 18px 6px 22px;
    align-items: start;
}

html body.parent-onboarding-page .parent-child-id-steps span,
html body.parent-onboarding-page .onboarding-steps > div,
html body.parent-onboarding-page .onboarding-steps article {
    position: relative;
    min-height: 70px;
    padding: 44px 0 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--por-muted);
    font-size: 13px;
    font-weight: 900;
    text-align: center;
}

html body.parent-onboarding-page .parent-child-id-steps span::before,
html body.parent-onboarding-page .onboarding-steps > div::before,
html body.parent-onboarding-page .onboarding-steps article::before {
    content: "";
    position: absolute;
    top: 20px;
    left: -50%;
    right: 50%;
    height: 4px;
    background: #deebf8;
}

html body.parent-onboarding-page .parent-child-id-steps span:first-child::before,
html body.parent-onboarding-page .onboarding-steps > div:first-child::before,
html body.parent-onboarding-page .onboarding-steps article:first-child::before { display: none; }

html body.parent-onboarding-page .parent-child-id-steps strong,
html body.parent-onboarding-page .onboarding-steps strong:first-child,
html body.parent-onboarding-page .onboarding-steps article > span:first-child {
    position: absolute;
    top: 0;
    left: 50%;
    display: grid;
    width: 44px;
    height: 44px;
    margin: 0;
    place-items: center;
    border: 4px solid #e2effb;
    border-radius: 50%;
    background: #f6fbff;
    color: var(--por-muted);
    font-size: 18px;
    transform: translateX(-50%);
}

html body.parent-onboarding-page .parent-child-id-steps .is-active strong,
html body.parent-onboarding-page .parent-child-id-steps .is-complete strong,
html body.parent-onboarding-page .onboarding-steps .is-current strong:first-child,
html body.parent-onboarding-page .onboarding-steps .is-complete strong:first-child,
html body.parent-onboarding-page .onboarding-steps article.is-current > span:first-child,
html body.parent-onboarding-page .onboarding-steps article.is-complete > span:first-child {
    border-color: #95ceff;
    background: linear-gradient(180deg, #2aa1ff, #0c7bf0);
    color: #fff;
    box-shadow: 0 5px 12px rgba(22, 128, 243, .25);
}

html body.parent-onboarding-page .parent-child-id-steps .is-active,
html body.parent-onboarding-page .parent-child-id-steps .is-complete,
html body.parent-onboarding-page .onboarding-steps .is-current,
html body.parent-onboarding-page .onboarding-steps .is-complete {
    color: var(--por-blue);
}

html body.parent-onboarding-page .parent-add-child-form,
html body.parent-onboarding-page .stack-form {
    display: grid;
    gap: 16px;
}

html body.parent-onboarding-page :where(.parent-add-field label, .parent-add-choice legend, .parent-range-heading label, .parent-custom-reward label) {
    color: var(--por-text);
    font-size: 1rem;
    font-weight: 900;
}

html body.parent-onboarding-page .parent-add-input-shell,
html body.parent-onboarding-page .parent-child-id-display,
html body.parent-onboarding-page .parent-child-id-summary,
html body.parent-onboarding-page .parent-child-id-note,
html body.parent-onboarding-page .parent-custom-reward :where(input, textarea, select) {
    border: 1px solid var(--por-line);
    border-radius: 17px;
    background: rgba(255, 255, 255, .94);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.45);
}

html body.parent-onboarding-page .parent-add-input-shell {
    min-height: 58px;
    padding: 0 16px;
}

html body.parent-onboarding-page .parent-add-input-shell img {
    display: none;
}

html body.parent-onboarding-page .parent-add-input-shell input {
    padding: 0;
    color: var(--por-text);
    font-size: 1.28rem;
    font-weight: 800;
}

html body.parent-onboarding-page .parent-add-help,
html body.parent-onboarding-page .next-step-hint {
    display: none;
}

html body.parent-onboarding-page .parent-grade-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

html body.parent-onboarding-page .parent-choice-chip span {
    min-height: 48px;
    border: 1px solid var(--por-line);
    border-radius: 15px;
    background: #f8fcff;
    color: var(--por-text);
    font-size: 1.25rem;
    font-weight: 800;
}

html body.parent-onboarding-page .parent-choice-chip input:checked + span {
    border-color: var(--por-blue);
    background: linear-gradient(180deg, #2aa1ff, #0879ed);
    color: #fff;
}

html body.parent-onboarding-page .parent-avatar-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

html body.parent-onboarding-page .parent-avatar-option {
    min-height: 128px;
    padding: 10px 8px;
    border: 1px solid var(--por-line);
    border-radius: 17px;
    background: #f9fdff;
    color: var(--por-text);
    font-weight: 800;
}

html body.parent-onboarding-page .parent-avatar-option:has(input:checked) {
    border: 2px solid var(--por-blue);
    background: #eef8ff;
}

html body.parent-onboarding-page .parent-avatar-visual {
    width: 78px;
    height: 78px;
}

html body.parent-onboarding-page .parent-range-field {
    padding: 0;
    border: 0;
    background: transparent;
}

html body.parent-onboarding-page .parent-range-heading output {
    color: var(--por-blue);
    font-size: 1.35rem;
    font-weight: 900;
}

html body.parent-onboarding-page .parent-range-field input[type="range"] {
    width: 100%;
    accent-color: var(--por-blue);
}

html body.parent-onboarding-page .parent-add-info {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
    border: 1px solid #bfe2ff;
    border-radius: 17px;
    background: #eef9ff;
}

html body.parent-onboarding-page .parent-add-info span {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 50%;
    background: var(--por-blue);
    color: #fff;
    font-weight: 900;
}

html body.parent-onboarding-page .parent-add-info h3 {
    display: none;
}

html body.parent-onboarding-page .parent-add-info p {
    margin: 0;
    color: var(--por-text);
    font-size: .98rem;
    font-weight: 800;
}

html body.parent-onboarding-page .btn.primary,
html body.parent-onboarding-page .parent-main-cta,
html body.parent-onboarding-page .parent-register-v2-submit,
html body.parent-onboarding-page .parent-onboarding-finish-reference {
    min-height: 64px;
    border: 2px solid #f3bc00;
    border-radius: 22px;
    background: linear-gradient(180deg, #ffe95a, #ffd314);
    color: var(--por-text);
    box-shadow: 0 8px 0 #efa900, 0 16px 22px rgba(236, 158, 0, .2);
    font-size: 1.25rem;
    font-weight: 900;
    text-transform: none;
}

html body.parent-onboarding-page .parent-child-id-hero {
    display: none;
}

html body.parent-onboarding-page .parent-child-id-card {
    position: relative;
}

html body.parent-onboarding-page .parent-child-id-summary {
    grid-template-columns: 92px minmax(0, 1fr);
    min-height: 106px;
    padding: 12px;
    align-items: center;
}

html body.parent-onboarding-page .parent-child-id-summary .child-card-photo {
    width: 78px;
    height: 78px;
    border-radius: 18px;
}

html body.parent-onboarding-page .parent-child-id-summary strong {
    color: var(--por-text);
    font-size: 1.55rem;
}

html body.parent-onboarding-page .parent-child-id-saved,
html body.parent-onboarding-page .parent-child-id-safe,
html body.parent-onboarding-page .parent-child-id-profile-hint,
html body.parent-onboarding-page .parent-child-id-note:not(.parent-child-id-note--warning),
html body.parent-onboarding-page .parent-child-id-help-button {
    display: none !important;
}

html body.parent-onboarding-page .parent-child-id-display {
    padding: 16px 12px;
    text-align: center;
}

html body.parent-onboarding-page .parent-child-id-value {
    color: var(--por-text);
    font-size: clamp(2.7rem, 14vw, 4rem);
    font-weight: 900;
    letter-spacing: 0;
}

html body.parent-onboarding-page .parent-child-id-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

html body.parent-onboarding-page .parent-child-id-action {
    min-height: 70px;
    border: 1px solid var(--por-line);
    border-radius: 17px;
    background: #fff;
    color: #3f5790;
    box-shadow: none;
}

html body.parent-onboarding-page .parent-child-id-note--warning {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 12px;
    padding: 16px;
    border: 1px solid #ffd166;
    border-radius: 17px;
    background: #fff8de;
}

html body.parent-onboarding-page .parent-child-id-note--warning::before {
    content: "!";
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border-radius: 12px;
    background: #ffc928;
    color: var(--por-text);
    font-size: 1.8rem;
    font-weight: 900;
}

html body.parent-onboarding-page .parent-child-id-primary-row {
    display: block;
}

html body.parent-onboarding-page .parent-rewards-management.parent-onboarding .profile-hero.compact {
    position: relative;
    display: block;
    order: 1;
    min-height: 0;
}

html body.parent-onboarding-page .parent-rewards-management.parent-onboarding .profile-hero.compact > div {
    max-width: none;
}

html body.parent-onboarding-page .parent-rewards-hero-chest {
    display: none;
}

html body.parent-onboarding-page .parent-rewards-management.parent-onboarding > .onboarding-steps {
    order: 2;
    margin: -4px 18px 14px;
}

html body.parent-onboarding-page .parent-rewards-management.parent-onboarding > .onboarding-reward-count {
    order: 3;
    width: fit-content;
    margin: 0 auto 16px;
    padding: 12px 24px;
    border: 0;
    border-radius: 999px;
    background: #dff8e9;
    color: #126939;
    box-shadow: none;
    font-size: 1.1rem;
    font-weight: 900;
}

html body.parent-onboarding-page .parent-rewards-management.parent-onboarding > .onboarding-reward-presets {
    order: 4;
}

html body.parent-onboarding-page .onboarding-reward-presets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

html body.parent-onboarding-page .onboarding-reward-presets button {
    min-height: 176px;
    padding: 12px 8px;
    border: 1px solid var(--por-line);
    border-radius: 16px;
    background: #f9fdff;
    color: var(--por-text);
    box-shadow: none;
}

html body.parent-onboarding-page .onboarding-reward-presets button:nth-child(-n+3) {
    border: 2px solid var(--por-blue);
    background: #eef8ff;
}

html body.parent-onboarding-page .onboarding-reward-presets img {
    width: 58px;
    height: 58px;
    margin-bottom: 8px;
}

html body.parent-onboarding-page .onboarding-reward-presets strong {
    min-height: 34px;
    color: var(--por-text);
    font-size: .95rem;
    line-height: 1.15;
}

html body.parent-onboarding-page .onboarding-reward-presets span {
    color: #466194;
}

html body.parent-onboarding-page .onboarding-reward-presets b {
    display: none;
}

html body.parent-onboarding-page .parent-rewards-management.parent-onboarding > .two-column {
    order: 5;
    display: block;
}

html body.parent-onboarding-page .parent-custom-reward {
    padding: 0;
    border: 1px dashed #9dd6ff;
    border-radius: 16px;
    background: rgba(255,255,255,.72);
    box-shadow: none;
}

html body.parent-onboarding-page .parent-custom-reward summary {
    display: grid;
    min-height: 78px;
    place-items: center;
    color: var(--por-blue);
    font-size: 1.1rem;
    font-weight: 900;
}

html body.parent-onboarding-page .parent-custom-reward h2,
html body.parent-onboarding-page .parent-custom-reward form {
    padding: 0 16px 16px;
}

html body.parent-onboarding-page .parent-onboarding-finish-reference {
    order: 6;
    display: flex;
    width: 100%;
    margin-top: 14px;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

html body.parent-onboarding-page .parent-owned-rewards,
html body.parent-onboarding-page .parent-reward-summary-grid,
html body.parent-onboarding-page .reward-level-guide {
    display: none !important;
}

@media (min-width: 760px) {
    html body.parent-onboarding-page .parent-topbar,
    html body.parent-onboarding-page .app-page.parent-onboarding,
    html body.parent-onboarding-page .app-page.parent-rewards-management.parent-onboarding {
        width: min(92vw, 920px);
    }

    html body.parent-onboarding-page .parent-topbar {
        height: 310px;
        min-height: 310px;
    }

    html body.parent-onboarding-page .parent-topbar .brand {
        top: 30px;
        left: 120px;
        width: 330px;
        height: 220px;
    }

    html body.parent-onboarding-page .parent-topbar::after {
        right: 78px;
        width: 390px;
        height: 330px;
    }

    html body.parent-onboarding-page .parent-child-setup,
    html body.parent-onboarding-page .parent-child-id-card,
    html body.parent-onboarding-page .profile-hero.compact {
        padding: 38px;
        border-radius: 34px;
    }

    html body.parent-onboarding-page .parent-child-setup h2,
    html body.parent-onboarding-page .parent-child-id-heading h2,
    html body.parent-onboarding-page .profile-hero.compact h1 {
        font-size: 4.2rem;
    }

    html body.parent-onboarding-page .parent-avatar-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    html body.parent-onboarding-page .parent-grade-grid {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }

    html body.parent-onboarding-page .onboarding-reward-presets {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* PARENT-ONBOARDING-REDESIGN-247 final override: remove legacy dark parent/rewards surfaces. */
html body.robo-arena-page.parent-onboarding-page,
html body.parent-premium-page.parent-onboarding-page {
    background:
        radial-gradient(circle at 9% 8%, rgba(255, 220, 44, .72) 0 13px, transparent 14px),
        radial-gradient(circle at 43% 2%, rgba(255, 255, 255, .88) 0 26px, transparent 27px),
        linear-gradient(180deg, #cbf1ff 0, #eafaff 48%, #f7fdff 100%) !important;
}

html body.parent-onboarding-page .parent-topbar,
html body.parent-onboarding-page .parent-topbar.topbar {
    display: block !important;
    height: 214px !important;
    min-height: 214px !important;
    overflow: visible !important;
    background: transparent !important;
}

html body.parent-onboarding-page .parent-topbar .brand {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

html body.parent-onboarding-page .parent-topbar .parent-brand-logo {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
}

html body.parent-onboarding-page .app-page.parent-page.parent-premium.parent-onboarding,
html body.parent-onboarding-page main.parent-onboarding,
html body.parent-onboarding-page main.parent-rewards-management.parent-onboarding {
    background: transparent !important;
    box-shadow: none !important;
}

html body.parent-onboarding-page .parent-child-setup,
html body.parent-onboarding-page .parent-child-id-card,
html body.parent-onboarding-page .parent-rewards-management.parent-onboarding .profile-hero.compact {
    position: relative !important;
    overflow: visible !important;
    background: rgba(255, 255, 255, .97) !important;
    color: var(--por-text) !important;
}

html body.parent-onboarding-page .parent-rewards-management.parent-onboarding .profile-hero.compact::after,
html body.parent-onboarding-page .parent-rewards-management.parent-onboarding .profile-hero.compact > div::before,
html body.parent-onboarding-page .parent-rewards-management.parent-onboarding .profile-hero.compact > div::after {
    display: none !important;
}

html body.parent-onboarding-page .parent-child-setup::before,
html body.parent-onboarding-page .parent-child-id-card::before,
html body.parent-onboarding-page .profile-hero.compact::before {
    top: 42px !important;
    right: 22px !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    color: var(--por-blue) !important;
    background: transparent !important;
    font-size: 1.8rem !important;
    line-height: 1 !important;
    transform: none !important;
}

html body.parent-onboarding-page .parent-add-input-shell input {
    width: 100% !important;
    margin: 0 !important;
    text-indent: 0 !important;
}

html body.parent-onboarding-page :where(.btn.primary, .parent-main-cta, .parent-add-submit, .parent-onboarding-finish-reference) {
    border: 2px solid #f3bc00 !important;
    background: linear-gradient(180deg, #ffe95a, #ffd314) !important;
    color: var(--por-text) !important;
    box-shadow: 0 8px 0 #efa900, 0 16px 22px rgba(236, 158, 0, .2) !important;
}

html body.parent-onboarding-page .parent-rewards-management.parent-onboarding .profile-hero.compact,
html body.parent-onboarding-page .parent-rewards-management.parent-onboarding .profile-hero.compact * {
    text-shadow: none !important;
}

html body.parent-onboarding-page .parent-rewards-management.parent-onboarding .profile-hero.compact h1,
html body.parent-onboarding-page .parent-rewards-management.parent-onboarding .profile-hero.compact p {
    color: var(--por-text) !important;
}

html body.parent-onboarding-page .parent-rewards-management.parent-onboarding .profile-hero.compact p:not(.eyebrow) {
    color: var(--por-muted) !important;
}

html body.parent-onboarding-page .parent-rewards-management.parent-onboarding > .onboarding-steps {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

html body.parent-onboarding-page .onboarding-reward-presets button {
    background: #f9fdff !important;
}

html body.parent-onboarding-page .parent-onboarding-finish-reference {
    background: linear-gradient(180deg, #ffe95a, #ffd314) !important;
}

html body.parent-onboarding-page .parent-onboarding-reference-hero {
    background:
        radial-gradient(circle at 10% 40%, rgba(255, 220, 44, .74) 0 12px, transparent 13px),
        radial-gradient(circle at 48% 5%, rgba(255, 255, 255, .78) 0 24px, transparent 25px),
        linear-gradient(180deg, #c9f1ff, #e9fbff) !important;
}

html body.parent-onboarding-page .parent-onboarding-hero,
html body.parent-onboarding-page .parent-rewards-management.parent-onboarding .parent-onboarding-hero {
    position: relative !important;
    display: block !important;
    order: 0 !important;
    width: min(calc(100% + 28px), 430px) !important;
    min-height: 174px !important;
    margin: 0 -14px -20px !important;
    padding: 0 !important;
    overflow: visible !important;
    border-radius: 0 !important;
    background:
        radial-gradient(circle at 10% 40%, rgba(255, 220, 44, .74) 0 12px, transparent 13px),
        radial-gradient(circle at 48% 5%, rgba(255, 255, 255, .78) 0 24px, transparent 25px),
        linear-gradient(180deg, #c9f1ff, #e9fbff) !important;
    box-shadow: none !important;
}

html body.parent-onboarding-page .parent-onboarding-hero::after {
    display: none !important;
}

html body.parent-onboarding-page .parent-onboarding-hero > div,
html body.parent-onboarding-page .parent-onboarding-hero .parent-add-child-back,
html body.parent-onboarding-page .parent-onboarding-hero .parent-add-step-counter {
    display: none !important;
}

html body.parent-onboarding-page .parent-onboarding-logo {
    position: absolute !important;
    top: 12px !important;
    left: 24px !important;
    z-index: 2 !important;
    display: block !important;
    width: 205px !important;
    height: 132px !important;
    object-fit: contain !important;
    transform: none !important;
}

html body.parent-onboarding-page .parent-onboarding-mentor {
    position: absolute !important;
    right: -8px !important;
    bottom: -10px !important;
    z-index: 2 !important;
    display: block !important;
    width: 190px !important;
    height: 178px !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: right bottom !important;
}

html body.parent-onboarding-page .parent-child-setup,
html body.parent-onboarding-page .parent-child-id-card,
html body.parent-onboarding-page .parent-rewards-management.parent-onboarding .profile-hero.compact {
    border-radius: 24px !important;
}

@media (min-width: 760px) {
    html body.parent-onboarding-page .parent-onboarding-hero,
    html body.parent-onboarding-page .parent-rewards-management.parent-onboarding .parent-onboarding-hero {
        width: min(92vw, 920px) !important;
        min-height: 310px !important;
        margin: 0 auto -36px !important;
    }

    html body.parent-onboarding-page .parent-onboarding-logo {
        top: 22px !important;
        left: 90px !important;
        width: 340px !important;
        height: 220px !important;
    }

    html body.parent-onboarding-page .parent-onboarding-mentor {
        right: 70px !important;
        width: 390px !important;
        height: 330px !important;
    }
}
html body.robo-arena-page #child-arena-master .ra-trophy-dialog::backdrop {background:rgba(3,20,58,.58)!important;backdrop-filter:blur(8px)!important;}
.arena-period-slider {display:grid;gap:6px;width:min(100%,360px);min-width:0;}
.arena-period-slider input {width:100%;min-width:0;accent-color:#2463eb;}
.arena-period-slider output {font-size:.85rem;font-weight:700;white-space:normal;}
.teacher-period-filter {flex-wrap:wrap;}
.teacher-period-filter select[hidden], #teacher-activity-period[hidden] {display:none!important;}

body .teacher-reference-dashboard .teacher-dashboard-management[open], body .teacher-reference-class .teacher-class-tools[open] {position:fixed!important;left:50%!important;width:min(800px,calc(100vw - 24px))!important;box-sizing:border-box;z-index:1002;}

/* COACH-ROBOT-174: use the canonical illustration at its intrinsic ratio. */
html body.teacher-reference-dashboard .teacher-coach-card > img.teacher-coach-robot {
 width: clamp(78px, 9vw, 100px) !important;
 height: auto !important;
 min-width: 0 !important;
 min-height: 0 !important;
 max-width: 30% !important;
 max-height: none !important;
 aspect-ratio: auto !important;
 object-fit: contain !important;
 right: 12px !important;
 bottom: 10px !important;
 transform: none !important;
}

/* PERIOD-CONTROL-175: compact, aligned dashboard period control. */
html body.teacher-reference-dashboard .teacher-period-filter {
 display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:8px!important;
 width:min(100%,360px)!important;max-width:100%!important;margin:16px 0 0!important;padding:14px 16px!important;
 box-sizing:border-box;border:1px solid #d9e7ff;border-radius:16px;background:rgba(255,255,255,.8);
}
html body.teacher-reference-dashboard .teacher-period-filter .teacher-calendar-icon {display:none!important;}
html body.teacher-reference-dashboard .teacher-period-filter__label {margin:0!important;font-size:12px!important;line-height:1.4!important;color:#52678d!important;font-weight:600!important;}
html body.teacher-reference-dashboard .teacher-period-filter .arena-period-slider {width:100%;gap:4px;}
html body.teacher-reference-dashboard .teacher-period-filter output {grid-row:1;font-size:15px;line-height:1.4;font-weight:700;color:#12377c;}
html body.teacher-reference-dashboard .teacher-period-filter input[type=range] {
 appearance:none;-webkit-appearance:none;width:100%;height:32px;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;background:transparent;cursor:pointer;
}
html body.teacher-reference-dashboard .teacher-period-filter input[type=range]::-webkit-slider-runnable-track {height:6px;border-radius:8px;background:#dce8fa;}
html body.teacher-reference-dashboard .teacher-period-filter input[type=range]::-webkit-slider-thumb {appearance:none;-webkit-appearance:none;width:20px;height:20px;margin-top:-7px;border:3px solid white;border-radius:50%;background:#2463eb;box-shadow:0 1px 5px #174da54d;}
html body.teacher-reference-dashboard .teacher-period-filter input[type=range]::-moz-range-track {height:6px;border-radius:8px;background:#dce8fa;}
html body.teacher-reference-dashboard .teacher-period-filter input[type=range]::-moz-range-thumb {width:14px;height:14px;border:3px solid white;border-radius:50%;background:#2463eb;box-shadow:0 1px 5px #174da54d;}
html body.teacher-reference-dashboard .teacher-period-filter input[type=range]:focus-visible {outline:2px solid #2463eb;outline-offset:3px;border-radius:8px;}

/* LOCKED-HOMEWORK-178 */
#table-picker[hidden], .trainer-control-heading[hidden], .form-grid[hidden] {display:none!important;}
.assignment-locked-level {margin:16px 0;padding:20px;border:1px solid #c9dcff;border-radius:20px;background:#f0f7ff;color:#12377c;}
.assignment-locked-level>strong {font-size:20px;}
.assignment-locked-level dl {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0;}
.assignment-locked-level dl>div {padding:12px;background:white;border-radius:12px;}
.assignment-locked-level dt {font-size:12px;line-height:1.5;color:#52678d;}
.assignment-locked-level dd {margin:4px 0 0;font-weight:700;font-size:18px;}
.assignment-locked-level p {margin:0;line-height:1.5;}
[data-assignment-id]:not([data-assignment-id="0"]) .learning-plan-card,
[data-assignment-id]:not([data-assignment-id="0"]) .speed-rule-card,
[data-assignment-id]:not([data-assignment-id="0"]) .daily-limit-card {display:none!important;}

/* HOMEWORK-RESULT-180: a task report rather than the game trophy screen. */
html body #game-finish.assignment-finish {background:#f3f8ff!important;background-image:none!important;min-height:0!important;height:auto!important;width:min(100%,520px)!important;max-width:100%!important;margin:20px auto!important;padding:24px!important;border:1px solid #c9dcff!important;border-radius:24px!important;color:#12377c!important;aspect-ratio:auto!important;box-sizing:border-box;}
html body #game-finish.assignment-finish::before,html body #game-finish.assignment-finish::after {display:none!important;}
html body .assignment-finish .ra-finish-banner,html body .assignment-finish .ra-finish-content,html body .assignment-finish .ra-finish-actions {position:static!important;inset:auto!important;transform:none!important;width:100%!important;height:auto!important;margin:0!important;padding:0!important;background:none!important;}
html body .assignment-finish .ra-finish-banner h1 {font-size:clamp(24px,6vw,32px)!important;color:#12377c!important;line-height:1.2!important;margin:10px 0!important;}
html body .assignment-finish .ra-finish-summary {color:#52678d!important;font-size:14px!important;line-height:1.5!important;}
html body .assignment-finish .ra-finish-mentor,html body .assignment-finish .badge-animation {display:none!important;}
html body .assignment-finish .finish-grid {display:grid!important;position:static!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;width:100%!important;margin:20px 0!important;}
html body .assignment-finish .finish-grid article {position:static!important;background:white!important;border:1px solid #dbe6fa!important;border-radius:14px!important;padding:16px 8px!important;min-height:0!important;height:auto!important;transform:none!important;}
html body .assignment-finish .finish-grid span {color:#12377c!important;font-size:24px!important;}
html body .assignment-finish .finish-grid small {color:#52678d!important;font-size:11px!important;line-height:1.5!important;}
html body .assignment-finish .ra-finish-actions {display:grid!important;gap:10px!important;}
html body .assignment-finish .ra-finish-actions .btn {position:static!important;transform:none!important;margin:0!important;width:100%!important;box-sizing:border-box;}
html body .assignment-finish [hidden] {display:none!important;}

html body #game-finish.assignment-finish .ra-finish-content {display:block!important;}
html body #game-finish.assignment-finish .ra-finish-banner {box-shadow:none!important;border:0!important;}
html body #game-finish.assignment-finish .ra-finish-banner>span {color:#2463eb!important;font-weight:700;}

/* TEACHER-STUDENT-183: logical student status, progress topics and unclipped chart. */
html body.teacher-reference-student .teacher-support-status--good {
    border-color:#bfeccc!important;
}
html body.teacher-reference-student .teacher-support-status--good i {
    background:#22b85a!important;
}
html body.teacher-reference-student .teacher-support-status--info i {
    background:#1d64ff!important;
}
html body.teacher-reference-student .teacher-section-icon--progress,
html body.teacher-reference-student .teacher-line-icon--chart {
    display:inline-grid;
    width:34px;
    height:34px;
    place-items:center;
    border-radius:12px;
    color:#1765e8!important;
    background:#eaf4ff;
    font-size:20px!important;
    line-height:1;
}
html body.teacher-reference-student .teacher-topic-empty {
    padding:20px;
    border:1px solid #cce7d6;
    border-radius:18px;
    color:#176645;
    background:linear-gradient(145deg,#f2fff7,#ffffff);
}
html body.teacher-reference-student .teacher-topic-empty strong {
    display:block;
    color:#0b6a3a;
    font-size:18px;
}
html body.teacher-reference-student .teacher-topic-empty p {
    margin:6px 0 0;
    color:#466b5a;
    line-height:1.45;
}
html body.teacher-reference-student .teacher-chart--student {
    box-sizing:border-box;
    height:220px!important;
    padding:8px 12px 34px 44px!important;
    overflow:visible!important;
}
html body.teacher-reference-student .teacher-chart--student svg {
    display:block;
    width:100%!important;
    height:160px!important;
    overflow:visible!important;
}
html body.teacher-reference-student .teacher-chart--student .teacher-chart__axis {
    top:8px!important;
    bottom:34px!important;
    left:2px!important;
}
html body.teacher-reference-student .teacher-chart--student .teacher-chart__labels {
    right:12px!important;
    bottom:4px!important;
    left:44px!important;
}
@media(max-width:560px){
    html body.teacher-reference-student .teacher-section-heading {
        align-items:flex-start;
    }
    html body.teacher-reference-student .teacher-chart--student {
        height:230px!important;
        padding:10px 16px 36px 46px!important;
    }
    html body.teacher-reference-student .teacher-chart--student svg {
        height:166px!important;
    }
}

/* HOMEWORK-COACH-184: homework icons and compact Mateo mentor cards. */
html body.teacher-reference-page .teacher-homework-icon {
    width: 46px;
    height: 46px;
    min-width: 46px;
    border-radius: 16px;
    display: inline-grid;
    place-items: center;
    color: #0b5dff;
    font-size: 24px;
    font-weight: 900;
    line-height: 1;
    background: linear-gradient(145deg, #eff8ff, #ffffff);
    border: 1px solid rgba(67, 137, 255, 0.24);
    box-shadow: 0 12px 24px rgba(30, 112, 255, 0.14), inset 0 -10px 18px rgba(105, 199, 255, 0.16);
}

html body.teacher-reference-page .teacher-active-assignment {
    align-items: center;
}

html body.teacher-reference-page .teacher-coach-card--student {
    min-height: 134px;
    padding: 20px 24px 18px 150px;
    align-items: center;
    overflow: hidden;
}

html body.teacher-reference-page .teacher-coach-card--student > img {
    left: 18px;
    bottom: -22px;
    width: 108px;
    height: 132px;
    object-fit: contain;
    object-position: center bottom;
}

html body.teacher-reference-page .teacher-coach-card--student > div {
    width: auto;
    max-width: 720px;
    margin-left: 0;
}

html body.teacher-reference-page .teacher-coach-card--student h2,
html body.parent-profile-reference-page .parent-reference-coach h2,
html body.parent-profile-reference-page .parent-dashboard-coach h2 {
    margin-bottom: 6px;
}

html body.teacher-reference-page .teacher-coach-card--student p,
html body.parent-profile-reference-page .parent-reference-coach p,
html body.parent-profile-reference-page .parent-dashboard-coach p {
    max-width: 620px;
}

html body.parent-profile-reference-page .parent-reference-coach {
    min-height: 138px;
    padding: 20px 24px 18px 150px;
    align-items: center;
    overflow: hidden;
}

html body.parent-profile-reference-page .parent-reference-coach img {
    left: 18px;
    bottom: -22px;
    width: 108px;
    height: 132px;
    object-fit: contain;
    object-position: center bottom;
}

html body.parent-profile-reference-page .parent-dashboard-coach {
    min-height: 150px;
    padding: 22px 158px 20px 24px;
    overflow: hidden;
}

html body.parent-profile-reference-page .parent-dashboard-coach img {
    right: 18px;
    bottom: -24px;
    width: 122px;
    height: 150px;
    object-fit: contain;
    object-position: center bottom;
}

@media (max-width: 560px) {
    html body.teacher-reference-page .teacher-homework-icon {
        width: 42px;
        height: 42px;
        min-width: 42px;
        border-radius: 14px;
        font-size: 22px;
    }

    html body.teacher-reference-page .teacher-coach-card--student {
        min-height: 128px;
        padding: 18px 16px 16px 118px;
    }

    html body.teacher-reference-page .teacher-coach-card--student > img {
        left: 10px;
        bottom: -18px;
        width: 88px;
        height: 112px;
    }

    html body.teacher-reference-page .teacher-coach-card--student > div {
        width: auto;
        margin-left: 0;
    }

    html body.parent-profile-reference-page .parent-reference-coach {
        min-height: 128px;
        padding: 18px 16px 16px 118px;
    }

    html body.parent-profile-reference-page .parent-reference-coach img {
        left: 10px;
        bottom: -18px;
        width: 88px;
        height: 112px;
    }

    html body.parent-profile-reference-page .parent-dashboard-coach {
        min-height: 136px;
        padding: 18px 112px 16px 16px;
    }

    html body.parent-profile-reference-page .parent-dashboard-coach img {
        right: -2px;
        bottom: -18px;
        width: 96px;
        height: 120px;
    }
}
/* CLASS-META-ICONS-186: clear school and grade labels instead of raw symbols. */
html body.teacher-reference-page .teacher-class-meta-line,
html body.teacher-reference-page .teacher-class-heading-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

html body.teacher-reference-page .teacher-class-meta-chip,
html body.teacher-reference-page .teacher-class-title-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

html body.teacher-reference-page .teacher-class-meta-chip .teacher-ui-icon,
html body.teacher-reference-page .teacher-class-title-chip .teacher-ui-icon {
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 8px;
    box-shadow: 0 8px 16px rgba(17, 95, 220, 0.12);
}

html body.teacher-reference-page .teacher-class-meta-chip .teacher-ui-icon img,
html body.teacher-reference-page .teacher-class-title-chip .teacher-ui-icon img {
    width: 15px;
    height: 15px;
    object-fit: contain;
}

html body.teacher-reference-page .teacher-class-card__identity .teacher-class-school.teacher-class-meta-chip {
    width: fit-content;
    max-width: 100%;
    margin: 0 0 2px;
    color: #31558f;
    font-size: 12px;
    line-height: 1.2;
}

html body.teacher-reference-page .teacher-class-card__identity .teacher-class-title-chip {
    margin: 0;
    color: #092a79;
    line-height: 1.08;
}

html body.teacher-reference-page .teacher-class-title-chip span,
html body.teacher-reference-page .teacher-class-meta-chip span {
    min-width: 0;
    overflow-wrap: anywhere;
}

html body.teacher-reference-page .teacher-student-hero__content .teacher-class-meta-line {
    margin-top: 8px;
}

html body.teacher-reference-page .teacher-student-hero__content .teacher-class-meta-chip {
    min-height: 34px;
    gap: 8px;
    padding: 4px 10px 4px 6px;
    border: 1px solid #d5e5ff;
    border-radius: 999px;
    color: #264b91;
    background: linear-gradient(180deg, #ffffff, #f6fbff);
    font-weight: 800;
    line-height: 1.15;
    box-shadow: 0 8px 18px rgba(16, 86, 210, 0.08);
}

html body.teacher-reference-page .teacher-student-hero__content .teacher-class-meta-chip .teacher-ui-icon {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    min-width: 24px;
    overflow: hidden;
    border-radius: 50%;
    background: #eef8ff;
}

html body.teacher-reference-page .teacher-student-hero__content .teacher-class-meta-chip .teacher-ui-icon img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    object-position: center;
    border-radius: 0;
}

html body.teacher-reference-page .teacher-student-hero__content .teacher-class-meta-chip + .teacher-class-meta-chip::before {
    content: none;
}

@media (max-width: 560px) {
    html body.teacher-reference-page .teacher-class-meta-line,
    html body.teacher-reference-page .teacher-class-heading-meta {
        gap: 7px 10px;
    }

    html body.teacher-reference-page .teacher-class-meta-chip .teacher-ui-icon,
    html body.teacher-reference-page .teacher-class-title-chip .teacher-ui-icon {
        width: 22px;
        height: 22px;
        min-width: 22px;
        border-radius: 7px;
    }
}
/* TEACHER-STATUS-MATRIX-187: correct positive student and heatmap states. */
html body.teacher-reference-page .teacher-student-row .teacher-student-status--good {
    color: #0f8f4d;
    background: #e8fff1;
}

html body.teacher-reference-page .teacher-student-row .teacher-student-status--watch {
    color: #995800;
    background: #fff4dd;
}

html body.teacher-reference-page .teacher-student-row .teacher-student-status--priority {
    color: #d93434;
    background: #ffe8e4;
}

html body.teacher-reference-page .teacher-heatmap td.teacher-heatmap--lowest.teacher-heatmap--good {
    color: #046c3c;
    background: #ddfae8;
}

html body.teacher-reference-page .teacher-heatmap td.teacher-heatmap--lowest.teacher-heatmap--medium {
    color: #8a5b00;
    background: #fff4d5;
}

html body.teacher-reference-page .teacher-heatmap td.teacher-heatmap--lowest.teacher-heatmap--bad {
    color: #e43d3d;
    background: #ffe2e2;
}
/* STUDENT-ROW-ACCURACY-188: correct class icon and accuracy colors. */
html body.teacher-reference-page .teacher-help-panel .teacher-section-heading h2 .teacher-ui-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 10px;
    margin-right: 8px;
    vertical-align: middle;
}

html body.teacher-reference-page .teacher-student-row .teacher-student-accuracy {
    justify-self: end;
    font-weight: 900;
    line-height: 1.05;
}

html body.teacher-reference-page .teacher-student-row .teacher-student-accuracy--good {
    color: #0d9b50;
}

html body.teacher-reference-page .teacher-student-row .teacher-student-accuracy--watch {
    color: #b56a00;
}

html body.teacher-reference-page .teacher-student-row .teacher-student-accuracy--priority {
    color: #e43d3d;
}

html body.teacher-reference-page .teacher-student-row:has(.teacher-student-accuracy--good) {
    border-color: rgba(16, 185, 129, 0.18);
}

html body.teacher-reference-page .teacher-student-row:has(.teacher-student-accuracy--priority) {
    border-color: rgba(239, 68, 68, 0.2);
}
/* MULTI-STUDENT-HOMEWORK-189: assign one homework to class or several selected students. */
html body.teacher-reference-class .teacher-student-picker {
    margin: 0;
    padding: 12px;
    border: 1px solid #bed5fa;
    border-radius: 16px;
    background: #fff;
    display: grid;
    gap: 10px;
}

html body.teacher-reference-class .teacher-student-picker legend {
    padding: 0 6px;
    color: #173575;
    font-weight: 900;
}

html body.teacher-reference-class .teacher-student-picker > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    max-height: 180px;
    overflow: auto;
    padding-right: 2px;
}

html body.teacher-reference-class .teacher-student-picker label {
    display: block;
    cursor: pointer;
}

html body.teacher-reference-class .teacher-student-picker input {
    position: absolute;
    opacity: 0;
}

html body.teacher-reference-class .teacher-student-picker span {
    display: block;
    padding: 10px 12px;
    border: 2px solid #d6e4fb;
    border-radius: 12px;
    color: #17449b;
    background: #f8fbff;
    font-weight: 900;
    line-height: 1.2;
}

html body.teacher-reference-class .teacher-student-picker input:checked + span {
    border-color: #1768ff;
    background: #1768ff;
    color: #fff;
    box-shadow: 0 7px 16px rgba(23, 104, 255, .18);
}

html body.teacher-reference-class .teacher-student-picker small {
    color: #5571a2;
    font-weight: 800;
}

@media(max-width:700px){
    html body.teacher-reference-class .teacher-student-picker > div { grid-template-columns: 1fr; }
}
/* HEATMAP-PRIORITY-190: show actionable priority count instead of confusing lowest 100%. */
html body.teacher-reference-page .teacher-heatmap th small {
    display: block;
    margin-top: 2px;
    color: #617696;
    font-size: 11px;
    line-height: 1.1;
}

html body.teacher-reference-page .teacher-heatmap td.teacher-heatmap--priority-count {
    font-weight: 950;
}

html body.teacher-reference-page .teacher-heatmap td.teacher-heatmap--priority-count.teacher-heatmap--empty {
    color: #31558f;
    background: #eef4fb;
}

html body.teacher-reference-page .teacher-heatmap td.teacher-heatmap--priority-count.teacher-heatmap--bad {
    color: #e43d3d;
    background: #ffe2e2;
}

/* TEACHER-DASHBOARD-CLEAN-192: remove period clutter and keep expanded summary cards responsive. */
html body.teacher-reference-dashboard .teacher-page-heading {
    min-height: 0;
}

html body.teacher-reference-dashboard .teacher-page-heading > div {
    max-width: 100%;
}

html body.teacher-reference-dashboard .teacher-summary-strip {
    align-items: start;
    overflow: visible;
}

html body.teacher-reference-dashboard details.teacher-summary-card {
    min-width: 0;
    overflow: hidden;
    border-radius: 20px;
    background: linear-gradient(145deg, #fff, #f8fcff);
}

html body.teacher-reference-dashboard details.teacher-summary-card[open] {
    z-index: 2;
    box-shadow: 0 18px 36px rgba(13, 72, 160, .16);
}

html body.teacher-reference-dashboard details.teacher-summary-card > summary {
    min-width: 0;
}

html body.teacher-reference-dashboard details.teacher-summary-card > summary > div {
    min-width: 0;
}

html body.teacher-reference-dashboard details.teacher-summary-card > summary > div span,
html body.teacher-reference-dashboard details.teacher-summary-card > summary > div small {
    overflow-wrap: anywhere;
}

html body.teacher-reference-dashboard .teacher-summary-details {
    max-height: min(320px, 48vh);
    overflow: auto;
    overscroll-behavior: contain;
}

html body.teacher-reference-dashboard .teacher-summary-details a {
    border-radius: 12px;
}

html body.teacher-reference-dashboard .teacher-summary-details a span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html body.teacher-reference-dashboard .teacher-summary-details a strong {
    white-space: nowrap;
}

html body.teacher-reference-dashboard .teacher-class-card__identity {
    min-width: 0;
}

html body.teacher-reference-dashboard .teacher-class-meta-chip,
html body.teacher-reference-dashboard .teacher-class-title-chip {
    display: inline-flex;
    max-width: 100%;
    min-width: 0;
    align-items: center;
    gap: 8px;
}

html body.teacher-reference-dashboard .teacher-class-meta-chip .teacher-ui-icon,
html body.teacher-reference-dashboard .teacher-class-title-chip .teacher-ui-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 10px;
    box-shadow: 0 6px 14px rgba(10, 124, 255, .13);
}

html body.teacher-reference-dashboard .teacher-class-meta-chip span,
html body.teacher-reference-dashboard .teacher-class-title-chip span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html body.teacher-reference-dashboard .teacher-dashboard-footer-grid:empty {
    display: none !important;
}

@media (max-width: 900px) {
    html body.teacher-reference-dashboard .teacher-summary-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        padding: 12px;
    }

    html body.teacher-reference-dashboard .teacher-summary-card {
        border: 1px solid var(--teacher-border) !important;
    }

    html body.teacher-reference-dashboard .teacher-summary-card:nth-child(n) {
        border-right: 1px solid var(--teacher-border) !important;
        border-bottom: 1px solid var(--teacher-border) !important;
    }
}

@media (max-width: 640px) {
    html body.teacher-reference-dashboard .teacher-page-heading {
        min-height: 0 !important;
        padding: 18px 16px !important;
    }

    html body.teacher-reference-dashboard .teacher-summary-strip {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        padding: 10px !important;
        border-radius: 22px !important;
    }

    html body.teacher-reference-dashboard details.teacher-summary-card {
        min-height: 0 !important;
        text-align: left !important;
    }

    html body.teacher-reference-dashboard details.teacher-summary-card > summary {
        min-height: 92px !important;
        display: grid !important;
        grid-template-columns: 52px minmax(0, 1fr) 24px !important;
        gap: 12px !important;
        padding: 14px !important;
        text-align: left !important;
    }

    html body.teacher-reference-dashboard details.teacher-summary-card > summary > :first-child {
        width: 52px !important;
        height: 52px !important;
        flex-basis: 52px !important;
    }

    html body.teacher-reference-dashboard details.teacher-summary-card > summary span {
        font-size: 12px !important;
    }

    html body.teacher-reference-dashboard details.teacher-summary-card > summary strong {
        font-size: 31px !important;
    }

    html body.teacher-reference-dashboard details.teacher-summary-card > summary small {
        font-size: 13px !important;
    }

    html body.teacher-reference-dashboard .teacher-summary-details {
        padding: 8px 10px 10px !important;
    }

    html body.teacher-reference-dashboard .teacher-summary-details a {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        min-height: 48px !important;
        padding: 9px 10px !important;
        text-align: left !important;
    }

    html body.teacher-reference-dashboard .teacher-class-card__header {
        grid-template-columns: 54px minmax(0, 1fr) !important;
    }

    html body.teacher-reference-dashboard .teacher-class-card__header .teacher-status-img {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

/* TEACHER-DASHBOARD-CLEAN-192B: desktop summary expands as dropdown, mobile expands inline. */
@media (min-width: 901px) {
    html body.teacher-reference-dashboard .teacher-summary-strip {
        overflow: visible !important;
    }

    html body.teacher-reference-dashboard details.teacher-summary-card {
        position: relative !important;
        overflow: visible !important;
    }

    html body.teacher-reference-dashboard details.teacher-summary-card[open] .teacher-summary-details {
        position: absolute !important;
        top: calc(100% + 8px) !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 20 !important;
        padding: 8px !important;
        border: 1px solid rgba(86, 151, 225, .22) !important;
        border-radius: 16px !important;
        background: #f3f9ff !important;
        box-shadow: 0 18px 36px rgba(13, 72, 160, .18) !important;
    }
}

/* TEACHER-DASHBOARD-CLEAN-192C: keep expanded details in page flow so they never cover class cards. */
@media (min-width: 901px) {
    html body.teacher-reference-dashboard details.teacher-summary-card[open] .teacher-summary-details {
        position: static !important;
        padding: 8px 10px 10px !important;
        border: 0 !important;
        border-top: 1px solid rgba(86, 151, 225, .18) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
}

/* TEACHER-CLASS-ICONS-193: use supplied school/class artwork and remove extra crossed markers. */
html body.teacher-reference-dashboard .teacher-classes-panel .teacher-section-heading h2 .teacher-section-icon {
    display: none !important;
}

html body.teacher-reference-dashboard .teacher-school-mark {
    display: grid !important;
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    place-items: center !important;
    overflow: visible !important;
    border-radius: 18px !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body.teacher-reference-dashboard .teacher-school-mark img {
    width: 70px !important;
    height: 70px !important;
    max-width: none !important;
    object-fit: contain !important;
}

html body.teacher-reference-dashboard .teacher-class-meta-chip .teacher-ui-icon--school {
    display: none !important;
}

html body.teacher-reference-dashboard .teacher-class-title-chip .teacher-ui-icon--class-label {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 14px !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body.teacher-reference-dashboard .teacher-class-title-chip .teacher-ui-icon--class-label img {
    width: 52px !important;
    height: 52px !important;
    max-width: none !important;
    object-fit: contain !important;
}

html body.teacher-reference-dashboard .teacher-class-card__header {
    border-bottom: 1px solid rgba(127, 167, 230, .25) !important;
    padding-bottom: 10px !important;
}

html body.teacher-reference-dashboard .teacher-mini-line svg:empty,
html body.teacher-reference-dashboard .teacher-mini-line polyline[points=""] {
    display: none !important;
}

@media (max-width: 640px) {
    html body.teacher-reference-dashboard .teacher-school-mark {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
    }

    html body.teacher-reference-dashboard .teacher-school-mark img {
        width: 62px !important;
        height: 62px !important;
    }

    html body.teacher-reference-dashboard .teacher-class-title-chip .teacher-ui-icon--class-label {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
    }

    html body.teacher-reference-dashboard .teacher-class-title-chip .teacher-ui-icon--class-label img {
        width: 46px !important;
        height: 46px !important;
    }
}

/* TEACHER-CLASS-ICONS-193B: remove crossed status streaks from dashboard class cards. */
html body.teacher-reference-dashboard .teacher-class-card .teacher-status-img {
    display: none !important;
}

/* TEACHER-CLASS-ALIGN-194: align supplied school/class artwork with text in class cards. */
html body.teacher-reference-dashboard .teacher-class-card__header {
    display: grid !important;
    grid-template-columns: 70px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 14px !important;
    min-height: 84px !important;
}

html body.teacher-reference-dashboard .teacher-school-mark {
    align-self: center !important;
    justify-self: center !important;
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    overflow: visible !important;
}

html body.teacher-reference-dashboard .teacher-school-mark img {
    width: 76px !important;
    height: 76px !important;
    transform: translateX(-1px) !important;
}

html body.teacher-reference-dashboard .teacher-class-card__identity {
    display: grid !important;
    align-content: center !important;
    justify-items: start !important;
    gap: 5px !important;
    min-width: 0 !important;
}

html body.teacher-reference-dashboard .teacher-class-card__identity .teacher-class-school.teacher-class-meta-chip,
html body.teacher-reference-dashboard .teacher-class-card__identity .teacher-class-title-chip {
    display: grid !important;
    grid-template-columns: 34px minmax(0, max-content) !important;
    align-items: center !important;
    justify-content: start !important;
    gap: 8px !important;
    width: min(100%, max-content) !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.05 !important;
}

html body.teacher-reference-dashboard .teacher-class-card__identity .teacher-class-school.teacher-class-meta-chip {
    grid-template-columns: minmax(0, 1fr) !important;
    padding-left: 42px !important;
    min-height: 18px !important;
    color: #31558f !important;
    font-size: clamp(.72rem, 1vw, .82rem) !important;
    font-weight: 800 !important;
}

html body.teacher-reference-dashboard .teacher-class-card__identity .teacher-class-title-chip {
    min-height: 38px !important;
    color: #082a78 !important;
    font-size: clamp(1.22rem, 2.8vw, 1.58rem) !important;
    font-weight: 950 !important;
    letter-spacing: -.02em !important;
}

html body.teacher-reference-dashboard .teacher-class-title-chip .teacher-ui-icon--class-label {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 11px !important;
    display: grid !important;
    place-items: center !important;
    overflow: visible !important;
    align-self: center !important;
}

html body.teacher-reference-dashboard .teacher-class-title-chip .teacher-ui-icon--class-label img {
    width: 42px !important;
    height: 42px !important;
    transform: translate(-1px, 0) !important;
}

html body.teacher-reference-dashboard .teacher-class-title-chip span,
html body.teacher-reference-dashboard .teacher-class-meta-chip span {
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

@media (max-width: 640px) {
    html body.teacher-reference-dashboard .teacher-class-card__header {
        grid-template-columns: 60px minmax(0, 1fr) !important;
        gap: 12px !important;
        min-height: 76px !important;
    }

    html body.teacher-reference-dashboard .teacher-school-mark {
        width: 56px !important;
        height: 56px !important;
        min-width: 56px !important;
    }

    html body.teacher-reference-dashboard .teacher-school-mark img {
        width: 68px !important;
        height: 68px !important;
    }

    html body.teacher-reference-dashboard .teacher-class-card__identity .teacher-class-school.teacher-class-meta-chip {
        padding-left: 38px !important;
    }

    html body.teacher-reference-dashboard .teacher-class-card__identity .teacher-class-title-chip {
        grid-template-columns: 30px minmax(0, 1fr) !important;
        min-height: 34px !important;
    }

    html body.teacher-reference-dashboard .teacher-class-title-chip .teacher-ui-icon--class-label {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
    }

    html body.teacher-reference-dashboard .teacher-class-title-chip .teacher-ui-icon--class-label img {
        width: 38px !important;
        height: 38px !important;
    }
}


/* TEACHER-CLASS-INLINE-195: school icon + school name, then class icon + class name. */
html body.teacher-reference-dashboard .teacher-class-card__header {
    display: block !important;
    min-height: auto !important;
    padding-bottom: 12px !important;
}

html body.teacher-reference-dashboard .teacher-class-card__header > .teacher-school-mark {
    display: none !important;
}

html body.teacher-reference-dashboard .teacher-class-card__identity {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: start !important;
    justify-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
}

html body.teacher-reference-dashboard .teacher-class-card__identity .teacher-class-school.teacher-class-meta-chip,
html body.teacher-reference-dashboard .teacher-class-card__identity .teacher-class-title-chip {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    align-items: center !important;
    justify-content: start !important;
    column-gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.08 !important;
}

html body.teacher-reference-dashboard .teacher-class-card__identity .teacher-class-school.teacher-class-meta-chip {
    color: #31558f !important;
    font-size: clamp(.78rem, 1vw, .9rem) !important;
    font-weight: 850 !important;
}

html body.teacher-reference-dashboard .teacher-class-card__identity .teacher-class-title-chip {
    color: #082a78 !important;
    font-size: clamp(1.25rem, 2.5vw, 1.62rem) !important;
    font-weight: 950 !important;
    letter-spacing: -.02em !important;
}

html body.teacher-reference-dashboard .teacher-class-meta-chip .teacher-ui-icon--school,
html body.teacher-reference-dashboard .teacher-class-title-chip .teacher-ui-icon--class-label {
    display: grid !important;
    place-items: center !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 13px !important;
    overflow: visible !important;
    background: transparent !important;
    box-shadow: none !important;
    align-self: center !important;
}

html body.teacher-reference-dashboard .teacher-class-meta-chip .teacher-ui-icon--school img,
html body.teacher-reference-dashboard .teacher-class-title-chip .teacher-ui-icon--class-label img {
    width: 48px !important;
    height: 48px !important;
    max-width: none !important;
    object-fit: contain !important;
    display: block !important;
}

html body.teacher-reference-dashboard .teacher-class-meta-chip .teacher-ui-icon--school img {
    transform: translateY(1px) !important;
}

html body.teacher-reference-dashboard .teacher-class-title-chip .teacher-ui-icon--class-label img {
    transform: translateY(0) !important;
}

html body.teacher-reference-dashboard .teacher-class-title-chip span,
html body.teacher-reference-dashboard .teacher-class-meta-chip span {
    display: block !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

@media (max-width: 640px) {
    html body.teacher-reference-dashboard .teacher-class-card__identity {
        gap: 7px !important;
    }

    html body.teacher-reference-dashboard .teacher-class-card__identity .teacher-class-school.teacher-class-meta-chip,
    html body.teacher-reference-dashboard .teacher-class-card__identity .teacher-class-title-chip {
        grid-template-columns: 38px minmax(0, 1fr) !important;
        column-gap: 9px !important;
        min-height: 38px !important;
    }

    html body.teacher-reference-dashboard .teacher-class-meta-chip .teacher-ui-icon--school,
    html body.teacher-reference-dashboard .teacher-class-title-chip .teacher-ui-icon--class-label {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
    }

    html body.teacher-reference-dashboard .teacher-class-meta-chip .teacher-ui-icon--school img,
    html body.teacher-reference-dashboard .teacher-class-title-chip .teacher-ui-icon--class-label img {
        width: 44px !important;
        height: 44px !important;
    }
}

/* TEACHER-STUDENT-PICKER-MODAL-197: choose whole class or multiple students in a popup. */
html.teacher-modal-open,
html.teacher-modal-open body {
    overflow: hidden !important;
}

html body.teacher-reference-class .teacher-student-picker-shell {
    display: grid !important;
    gap: 7px !important;
    min-width: 0 !important;
}

html body.teacher-reference-class .teacher-student-picker-shell > span {
    color: #173575 !important;
    font-weight: 900 !important;
}

html body.teacher-reference-class .teacher-student-picker-open {
    display: grid !important;
    gap: 3px !important;
    width: 100% !important;
    min-height: 52px !important;
    padding: 10px 14px !important;
    border: 1px solid #bed5fa !important;
    border-radius: 14px !important;
    background: #fff !important;
    color: #0b2873 !important;
    text-align: left !important;
    font: inherit !important;
    cursor: pointer !important;
    box-shadow: 0 8px 18px rgba(23, 104, 255, .08) !important;
}

html body.teacher-reference-class .teacher-student-picker-open strong {
    color: #0b2873 !important;
    font-weight: 950 !important;
}

html body.teacher-reference-class .teacher-student-picker-open small {
    color: #6077a3 !important;
    font-size: .82rem !important;
    line-height: 1.25 !important;
}

html body.teacher-reference-class .teacher-student-picker-open:focus-visible {
    outline: 3px solid rgba(23, 104, 255, .24) !important;
    border-color: #1768ff !important;
}

html body.teacher-reference-class .teacher-student-picker {
    position: fixed !important;
    inset: 0 !important;
    z-index: 10000 !important;
    display: none !important;
    place-items: center !important;
    margin: 0 !important;
    padding: 18px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: rgba(3, 12, 38, .62) !important;
    backdrop-filter: blur(6px) !important;
}

html body.teacher-reference-class .teacher-student-picker.is-open {
    display: grid !important;
}

html body.teacher-reference-class .teacher-student-picker__dialog {
    display: grid !important;
    gap: 12px !important;
    width: min(520px, 100%) !important;
    max-height: min(78vh, 680px) !important;
    overflow: auto !important;
    padding: 20px !important;
    border: 1px solid rgba(190, 213, 250, .95) !important;
    border-radius: 24px !important;
    background: linear-gradient(145deg, #ffffff, #eef8ff) !important;
    box-shadow: 0 30px 80px rgba(4, 20, 65, .34) !important;
}

html body.teacher-reference-class .teacher-student-picker__head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
}

html body.teacher-reference-class .teacher-student-picker legend {
    padding: 0 !important;
    color: #08246f !important;
    font-size: 1.25rem !important;
    font-weight: 950 !important;
}

html body.teacher-reference-class .teacher-student-picker__close {
    display: grid !important;
    place-items: center !important;
    width: 40px !important;
    height: 40px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #eaf2ff !important;
    color: #0b2873 !important;
    font-size: 1.55rem !important;
    font-weight: 900 !important;
    cursor: pointer !important;
}

html body.teacher-reference-class .teacher-student-picker p {
    margin: 0 !important;
    color: #58709b !important;
    line-height: 1.4 !important;
}

html body.teacher-reference-class .teacher-student-picker > div > div {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    max-height: 260px !important;
    overflow: auto !important;
    padding-right: 2px !important;
}

html body.teacher-reference-class .teacher-student-picker__apply {
    width: 100% !important;
    min-height: 50px !important;
}

@media(max-width:640px) {
    html body.teacher-reference-class .teacher-student-picker {
        align-items: end !important;
        padding: 12px !important;
    }

    html body.teacher-reference-class .teacher-student-picker__dialog {
        max-height: 86vh !important;
        padding: 16px !important;
        border-radius: 22px !important;
    }

    html body.teacher-reference-class .teacher-student-picker > div > div {
        grid-template-columns: 1fr !important;
        max-height: 42vh !important;
    }
}

/* TEACHER-CLASS-HERO-COMPACT-199: compact and align class detail heading. */
html body.teacher-reference-class .teacher-page-heading.teacher-page-heading--class {
    display: block !important;
    min-height: 0 !important;
    margin: 0 0 12px !important;
    padding: clamp(14px, 3vw, 20px) !important;
    border-radius: 24px !important;
}

html body.teacher-reference-class .teacher-class-heading-meta {
    display: grid !important;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
}

html body.teacher-reference-class .teacher-page-heading--class .teacher-class-school,
html body.teacher-reference-class .teacher-page-heading--class .teacher-class-title-chip {
    display: inline-grid !important;
    grid-template-columns: 34px minmax(0, auto) !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.05 !important;
}

html body.teacher-reference-class .teacher-page-heading--class .teacher-class-school {
    max-width: 150px !important;
    color: #31558f !important;
    font-size: clamp(.78rem, 1.7vw, .9rem) !important;
    font-weight: 900 !important;
}

html body.teacher-reference-class .teacher-page-heading--class .teacher-class-title-chip {
    grid-template-columns: 42px minmax(0, auto) !important;
    color: #08246f !important;
    font-size: clamp(1.75rem, 7vw, 2.7rem) !important;
    font-weight: 950 !important;
    letter-spacing: -.03em !important;
    white-space: nowrap !important;
}

html body.teacher-reference-class .teacher-page-heading--class p {
    justify-self: end !important;
    margin: 0 !important;
    color: #0d2b75 !important;
    font-size: clamp(.9rem, 2.4vw, 1.05rem) !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}

html body.teacher-reference-class .teacher-page-heading--class .teacher-ui-icon {
    display: grid !important;
    place-items: center !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 11px !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

html body.teacher-reference-class .teacher-page-heading--class .teacher-class-title-chip .teacher-ui-icon {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
}

html body.teacher-reference-class .teacher-page-heading--class .teacher-ui-icon img {
    width: 42px !important;
    height: 42px !important;
    max-width: none !important;
    object-fit: contain !important;
}

html body.teacher-reference-class .teacher-page-heading--class .teacher-class-title-chip .teacher-ui-icon img {
    width: 50px !important;
    height: 50px !important;
}

html body.teacher-reference-class .teacher-page-heading--class .teacher-class-school span,
html body.teacher-reference-class .teacher-page-heading--class .teacher-class-title-chip span {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

@media (max-width: 640px) {
    html body.teacher-reference-class .teacher-page-heading.teacher-page-heading--class {
        margin-top: -2px !important;
        padding: 14px 14px 16px !important;
        border-radius: 22px !important;
    }

    html body.teacher-reference-class .teacher-class-heading-meta {
        grid-template-columns: minmax(0, .9fr) minmax(0, 1.15fr) auto !important;
        gap: 8px !important;
    }

    html body.teacher-reference-class .teacher-page-heading--class .teacher-class-school {
        max-width: none !important;
        font-size: .78rem !important;
    }

    html body.teacher-reference-class .teacher-page-heading--class .teacher-class-school,
    html body.teacher-reference-class .teacher-page-heading--class .teacher-class-title-chip {
        gap: 7px !important;
    }

    html body.teacher-reference-class .teacher-page-heading--class .teacher-class-title-chip {
        font-size: clamp(1.75rem, 7.8vw, 2.15rem) !important;
    }

    html body.teacher-reference-class .teacher-page-heading--class p {
        font-size: .92rem !important;
    }
}

@media (max-width: 430px) {
    html body.teacher-reference-class .teacher-class-heading-meta {
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas: "school students" "class class" !important;
        row-gap: 6px !important;
    }

    html body.teacher-reference-class .teacher-page-heading--class .teacher-class-school {
        grid-area: school !important;
    }

    html body.teacher-reference-class .teacher-page-heading--class .teacher-class-title-chip {
        grid-area: class !important;
    }

    html body.teacher-reference-class .teacher-page-heading--class p {
        grid-area: students !important;
    }
}

/* TEACHER-ACTIVE-ASSIGNMENTS-SCROLL-200: let assigned exercises scroll with the page on mobile. */
html body.teacher-reference-page .teacher-active-assignments,
html body.teacher-reference-class .teacher-active-assignments {
    max-height: none !important;
    overflow: visible !important;
    overscroll-behavior: auto !important;
    scrollbar-gutter: auto !important;
    -webkit-overflow-scrolling: auto !important;
    touch-action: pan-y !important;
}

html body.teacher-reference-page .teacher-active-assignment,
html body.teacher-reference-class .teacher-active-assignment {
    touch-action: pan-y !important;
}

/* TEACHER-STUDENT-PICKER-VISIBLE-201: ensure modal content renders above the dark backdrop. */
html body.teacher-reference-class .teacher-student-picker.is-open {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

html body.teacher-reference-class .teacher-student-picker.is-open .teacher-student-picker__dialog {
    display: grid !important;
    grid-template-columns: 1fr !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    z-index: 10001 !important;
}

html body.teacher-reference-class .teacher-student-picker__head h3 {
    margin: 0 !important;
    color: #08246f !important;
    font-size: 1.25rem !important;
    font-weight: 950 !important;
    line-height: 1.1 !important;
}

html body.teacher-reference-class .teacher-student-picker__list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    max-height: 260px !important;
    overflow: auto !important;
    padding-right: 2px !important;
    -webkit-overflow-scrolling: touch !important;
}

html body.teacher-reference-class .teacher-student-picker__dialog > .teacher-student-picker__list {
    width: 100% !important;
}

@media(max-width:640px) {
    html body.teacher-reference-class .teacher-student-picker.is-open .teacher-student-picker__dialog {
        width: 100% !important;
    }

    html body.teacher-reference-class .teacher-student-picker__list {
        grid-template-columns: 1fr !important;
        max-height: 42vh !important;
    }
}

/* TEACHER-STUDENT-PICKER-FIXED-MODAL-202: force visible dialog above backdrop on mobile browsers. */
html body.teacher-reference-class .teacher-student-picker {
    background: transparent !important;
    backdrop-filter: none !important;
    pointer-events: none !important;
}

html body.teacher-reference-class .teacher-student-picker.is-open {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    z-index: 2147483000 !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

html body.teacher-reference-class .teacher-student-picker.is-open::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483001 !important;
    display: block !important;
    background: rgba(3, 12, 38, .66) !important;
    backdrop-filter: blur(6px) !important;
}

html body.teacher-reference-class .teacher-student-picker.is-open .teacher-student-picker__dialog {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    z-index: 2147483002 !important;
    display: grid !important;
    width: min(520px, calc(100vw - 24px)) !important;
    max-height: calc(100dvh - 32px) !important;
    overflow: auto !important;
    transform: translate(-50%, -50%) !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    padding: 20px !important;
    gap: 12px !important;
    border: 1px solid rgba(190, 213, 250, .95) !important;
    border-radius: 24px !important;
    background: linear-gradient(145deg, #ffffff, #eef8ff) !important;
    box-shadow: 0 30px 90px rgba(4, 20, 65, .42) !important;
    color: #08246f !important;
}

html body.teacher-reference-class .teacher-student-picker.is-open .teacher-student-picker__head,
html body.teacher-reference-class .teacher-student-picker.is-open .teacher-student-picker__list,
html body.teacher-reference-class .teacher-student-picker.is-open .teacher-student-picker__all,
html body.teacher-reference-class .teacher-student-picker.is-open .teacher-student-picker__apply,
html body.teacher-reference-class .teacher-student-picker.is-open p {
    visibility: visible !important;
    opacity: 1 !important;
}

html body.teacher-reference-class .teacher-student-picker.is-open .teacher-student-picker__list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    max-height: min(280px, 40dvh) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
}

@media(max-width:640px) {
    html body.teacher-reference-class .teacher-student-picker.is-open .teacher-student-picker__dialog {
        top: auto !important;
        left: 12px !important;
        right: 12px !important;
        bottom: 12px !important;
        width: auto !important;
        max-height: calc(100dvh - 24px) !important;
        transform: none !important;
        padding: 16px !important;
        border-radius: 22px !important;
    }

    html body.teacher-reference-class .teacher-student-picker.is-open .teacher-student-picker__list {
        grid-template-columns: 1fr !important;
        max-height: 42dvh !important;
    }
}

/* TEACHER-STUDENT-PICKER-INLINE-203: reliable in-form student picker fallback for mobile. */
html body.teacher-reference-class .teacher-student-picker,
html body.teacher-reference-class .teacher-student-picker.is-open {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: -4px 0 4px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

html body.teacher-reference-class .teacher-student-picker {
    display: none !important;
}

html body.teacher-reference-class .teacher-student-picker.is-open {
    display: block !important;
}

html body.teacher-reference-class .teacher-student-picker::before,
html body.teacher-reference-class .teacher-student-picker.is-open::before {
    display: none !important;
    content: none !important;
}

html body.teacher-reference-class .teacher-student-picker.is-open .teacher-student-picker__dialog {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    display: grid !important;
    width: 100% !important;
    max-width: none !important;
    max-height: none !important;
    overflow: visible !important;
    transform: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    padding: 14px !important;
    gap: 11px !important;
    border: 1px solid #bed5fa !important;
    border-radius: 18px !important;
    background: linear-gradient(145deg, #ffffff, #f1f8ff) !important;
    box-shadow: 0 12px 26px rgba(23, 104, 255, .12) !important;
    color: #08246f !important;
}

html body.teacher-reference-class .teacher-student-picker.is-open .teacher-student-picker__head,
html body.teacher-reference-class .teacher-student-picker.is-open .teacher-student-picker__list,
html body.teacher-reference-class .teacher-student-picker.is-open .teacher-student-picker__all,
html body.teacher-reference-class .teacher-student-picker.is-open .teacher-student-picker__apply,
html body.teacher-reference-class .teacher-student-picker.is-open p {
    display: revert !important;
    visibility: visible !important;
    opacity: 1 !important;
}

html body.teacher-reference-class .teacher-student-picker.is-open .teacher-student-picker__head {
    display: flex !important;
}

html body.teacher-reference-class .teacher-student-picker.is-open .teacher-student-picker__list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    max-height: none !important;
    overflow: visible !important;
}

html body.teacher-reference-class .teacher-student-picker.is-open .teacher-student-picker__close {
    display: grid !important;
}

html body.teacher-reference-class .teacher-student-picker.is-open .teacher-student-picker__apply {
    width: 100% !important;
}

html.teacher-modal-open,
html.teacher-modal-open body {
    overflow: auto !important;
}

@media(max-width:640px) {
    html body.teacher-reference-class .teacher-student-picker.is-open .teacher-student-picker__dialog {
        width: 100% !important;
        padding: 12px !important;
        border-radius: 16px !important;
    }

    html body.teacher-reference-class .teacher-student-picker.is-open .teacher-student-picker__list {
        grid-template-columns: 1fr !important;
    }
}

/* TEACHER-STUDENT-PICKER-INLINE-VISIBLE-204: keep the student selector readable on every screen, including one-student classes. */
html body.teacher-reference-class .teacher-student-picker,
html body.teacher-reference-class .teacher-student-picker.is-open {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    z-index: auto !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 8px 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

html body.teacher-reference-class .teacher-student-picker {
    display: none !important;
}

html body.teacher-reference-class .teacher-student-picker.is-open {
    display: block !important;
}

html body.teacher-reference-class .teacher-student-picker::before,
html body.teacher-reference-class .teacher-student-picker.is-open::before {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

html body.teacher-reference-class .teacher-student-picker.is-open .teacher-student-picker__dialog {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    z-index: auto !important;
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 190px !important;
    max-height: none !important;
    margin: 0 !important;
    padding: clamp(14px, 3vw, 22px) !important;
    gap: 12px !important;
    overflow: visible !important;
    color: #0b2873 !important;
    background: linear-gradient(180deg, #ffffff 0%, #eef7ff 100%) !important;
    border: 1px solid #bed8ff !important;
    border-radius: 22px !important;
    box-shadow: 0 18px 34px rgba(18, 73, 148, .13) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

html body.teacher-reference-class .teacher-student-picker.is-open .teacher-student-picker__head,
html body.teacher-reference-class .teacher-student-picker.is-open .teacher-student-picker__all,
html body.teacher-reference-class .teacher-student-picker.is-open .teacher-student-picker__list,
html body.teacher-reference-class .teacher-student-picker.is-open .teacher-student-picker__apply,
html body.teacher-reference-class .teacher-student-picker.is-open p {
    opacity: 1 !important;
    visibility: visible !important;
}

html body.teacher-reference-class .teacher-student-picker.is-open .teacher-student-picker__head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
}

html body.teacher-reference-class .teacher-student-picker.is-open .teacher-student-picker__head h3 {
    margin: 0 !important;
    color: #061f63 !important;
    font-size: clamp(1.15rem, 2.4vw, 1.45rem) !important;
    line-height: 1.1 !important;
}

html body.teacher-reference-class .teacher-student-picker.is-open p {
    display: block !important;
    margin: 0 !important;
    color: #48669d !important;
    font-weight: 750 !important;
    line-height: 1.35 !important;
}

html body.teacher-reference-class .teacher-student-picker.is-open .teacher-student-picker__all,
html body.teacher-reference-class .teacher-student-picker.is-open .teacher-student-picker__list label {
    display: flex !important;
    align-items: center !important;
    min-height: 54px !important;
    width: 100% !important;
    margin: 0 !important;
    cursor: pointer !important;
}

html body.teacher-reference-class .teacher-student-picker.is-open .teacher-student-picker__all span,
html body.teacher-reference-class .teacher-student-picker.is-open .teacher-student-picker__list span {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 54px !important;
    padding: 14px 16px !important;
    border: 2px solid #d4e4ff !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    color: #0d2d77 !important;
    font-size: 1rem !important;
    font-weight: 950 !important;
    line-height: 1.2 !important;
    box-shadow: 0 10px 20px rgba(20, 82, 164, .08) !important;
}

html body.teacher-reference-class .teacher-student-picker.is-open input:checked + span {
    border-color: #1768ff !important;
    background: linear-gradient(135deg, #1768ff 0%, #2a7dff 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 12px 24px rgba(23, 104, 255, .22) !important;
}

html body.teacher-reference-class .teacher-student-picker.is-open .teacher-student-picker__list {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    gap: 10px !important;
    min-height: 64px !important;
    max-height: none !important;
    overflow: visible !important;
}

html body.teacher-reference-class .teacher-student-picker.is-open .teacher-student-picker__close {
    display: grid !important;
    place-items: center !important;
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 auto !important;
    border: 1px solid #d4e4ff !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    color: #0d2d77 !important;
    font-size: 1.35rem !important;
    font-weight: 950 !important;
}

html body.teacher-reference-class .teacher-student-picker.is-open .teacher-student-picker__apply {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 52px !important;
    margin-top: 2px !important;
}

html.teacher-modal-open,
html.teacher-modal-open body {
    overflow: auto !important;
}

@media(max-width:640px) {
    html body.teacher-reference-class .teacher-student-picker.is-open .teacher-student-picker__dialog {
        min-height: 210px !important;
        padding: 14px !important;
        border-radius: 18px !important;
    }

    html body.teacher-reference-class .teacher-student-picker.is-open .teacher-student-picker__list {
        grid-template-columns: 1fr !important;
    }
}

/* TEACHER-STUDENT-PICKER-DESKTOP-GRID-205: opened student selector spans the whole homework form row on laptop/desktop. */
html body.teacher-reference-class .teacher-homework-fields {
    align-items: start !important;
}

html body.teacher-reference-class .teacher-homework-fields > label,
html body.teacher-reference-class .teacher-homework-fields > .teacher-student-picker-shell {
    align-self: start !important;
    min-width: 0 !important;
}

html body.teacher-reference-class .teacher-homework-fields > .teacher-student-picker {
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;
    min-width: 0 !important;
    width: 100% !important;
}

html body.teacher-reference-class .teacher-student-picker.is-open .teacher-student-picker__dialog {
    width: 100% !important;
    min-width: 0 !important;
}

@media (min-width: 901px) {
    html body.teacher-reference-class .teacher-homework-fields > .teacher-student-picker.is-open {
        margin-top: 2px !important;
    }

    html body.teacher-reference-class .teacher-student-picker.is-open .teacher-student-picker__dialog {
        grid-template-columns: minmax(220px, .75fr) minmax(0, 1.25fr) !important;
        align-items: start !important;
        gap: 14px !important;
        min-height: 0 !important;
        padding: 16px !important;
    }

    html body.teacher-reference-class .teacher-student-picker.is-open .teacher-student-picker__head,
    html body.teacher-reference-class .teacher-student-picker.is-open p,
    html body.teacher-reference-class .teacher-student-picker.is-open .teacher-student-picker__apply {
        grid-column: 1 / -1 !important;
    }

    html body.teacher-reference-class .teacher-student-picker.is-open .teacher-student-picker__all {
        grid-column: 1 !important;
    }

    html body.teacher-reference-class .teacher-student-picker.is-open .teacher-student-picker__list {
        grid-column: 2 !important;
        grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
        min-height: 58px !important;
    }
}

@media (max-width: 900px) {
    html body.teacher-reference-class .teacher-homework-fields > .teacher-student-picker {
        grid-column: 1 / -1 !important;
    }
}

/* TEACHER-HOMEWORK-ELEGANT-GRID-206: calmer assignment form spacing on laptop/desktop and tablet. */
html body.teacher-reference-class .teacher-homework-builder {
    gap: 18px !important;
}

html body.teacher-reference-class .teacher-homework-fields {
    display: grid !important;
    grid-template-columns: minmax(150px, .9fr) minmax(220px, 1.35fr) minmax(160px, .95fr) minmax(180px, 1fr) !important;
    gap: 14px !important;
    align-items: end !important;
}

html body.teacher-reference-class .teacher-homework-fields > label,
html body.teacher-reference-class .teacher-homework-fields > .teacher-student-picker-shell {
    display: grid !important;
    gap: 8px !important;
    align-self: stretch !important;
}

html body.teacher-reference-class .teacher-homework-fields > label {
    align-content: start !important;
}

html body.teacher-reference-class .teacher-homework-fields select,
html body.teacher-reference-class .teacher-student-picker-open {
    min-height: 54px !important;
    border-radius: 16px !important;
}

html body.teacher-reference-class .teacher-student-picker-open {
    align-content: center !important;
    padding: 10px 14px !important;
}

html body.teacher-reference-class .teacher-student-picker-open strong {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

html body.teacher-reference-class .teacher-student-picker-open small {
    display: block !important;
    max-width: 100% !important;
    white-space: normal !important;
    line-height: 1.25 !important;
}

html body.teacher-reference-class .teacher-table-picker {
    padding: 18px !important;
    border-radius: 20px !important;
}

html body.teacher-reference-class .teacher-table-picker > div {
    grid-template-columns: repeat(5, minmax(58px, 1fr)) !important;
    gap: 10px !important;
}

html body.teacher-reference-class .teacher-table-picker span {
    min-height: 46px !important;
    border-radius: 14px !important;
}

html body.teacher-reference-class .teacher-homework-summary {
    border-radius: 16px !important;
    line-height: 1.45 !important;
}

@media (max-width: 1080px) and (min-width: 701px) {
    html body.teacher-reference-class .teacher-homework-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    html body.teacher-reference-class .teacher-homework-fields > .teacher-student-picker-shell {
        grid-column: span 1 !important;
    }

    html body.teacher-reference-class .teacher-student-picker-open small {
        max-width: 28ch !important;
    }
}

@media (max-width: 700px) {
    html body.teacher-reference-class .teacher-homework-fields {
        grid-template-columns: 1fr !important;
        gap: 13px !important;
    }

    html body.teacher-reference-class .teacher-student-picker-open small {
        max-width: 100% !important;
    }
}

/* TEACHER-HOMEWORK-READABLE-GRID-207: keep assignment controls readable on wider screens and browser zoom. */
html body.teacher-reference-class .teacher-homework-builder {
    overflow: visible !important;
}

html body.teacher-reference-class .teacher-homework-fields {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    align-items: start !important;
    width: 100% !important;
}

html body.teacher-reference-class .teacher-homework-fields > label,
html body.teacher-reference-class .teacher-homework-fields > .teacher-student-picker-shell {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    align-self: stretch !important;
}

html body.teacher-reference-class .teacher-homework-fields > .teacher-student-picker-shell {
    grid-column: 1 / -1 !important;
}

html body.teacher-reference-class .teacher-homework-fields > .teacher-student-picker {
    grid-column: 1 / -1 !important;
}

html body.teacher-reference-class .teacher-homework-fields select,
html body.teacher-reference-class .teacher-student-picker-open {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 56px !important;
    padding: 0 16px !important;
    font-size: clamp(.95rem, 1.5vw, 1.05rem) !important;
    line-height: 1.2 !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

html body.teacher-reference-class .teacher-student-picker-open {
    display: grid !important;
    grid-template-columns: minmax(160px, max-content) minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 14px !important;
    row-gap: 4px !important;
    text-align: left !important;
    padding: 12px 16px !important;
}

html body.teacher-reference-class .teacher-student-picker-open strong,
html body.teacher-reference-class .teacher-student-picker-open small {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
}

html body.teacher-reference-class .teacher-student-picker-open strong {
    font-size: 1.02rem !important;
    line-height: 1.15 !important;
}

html body.teacher-reference-class .teacher-student-picker-open small {
    font-size: .86rem !important;
    line-height: 1.25 !important;
}

html body.teacher-reference-class .teacher-table-picker {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

html body.teacher-reference-class .teacher-table-picker > div {
    grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)) !important;
}

@media (min-width: 980px) {
    html body.teacher-reference-class .teacher-homework-builder {
        max-width: 760px !important;
    }
}

@media (max-width: 700px) {
    html body.teacher-reference-class .teacher-homework-fields {
        grid-template-columns: 1fr !important;
    }

    html body.teacher-reference-class .teacher-student-picker-open {
        grid-template-columns: 1fr !important;
    }
}

/* TEACHER-HOMEWORK-FULLWIDTH-CONTROLS-208: stop native selects from being squeezed in the narrow teacher homework card. */
html body.teacher-reference-class .teacher-homework-builder {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

html body.teacher-reference-class .teacher-homework-fields {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: stretch !important;
}

html body.teacher-reference-class .teacher-homework-fields > label,
html body.teacher-reference-class .teacher-homework-fields > .teacher-student-picker-shell,
html body.teacher-reference-class .teacher-homework-fields > .teacher-student-picker {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

html body.teacher-reference-class .teacher-homework-fields select,
html body.teacher-reference-class .teacher-student-picker-open {
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    min-height: 56px !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: 1rem !important;
    line-height: 1.25 !important;
}

html body.teacher-reference-class .teacher-homework-fields select {
    padding: 0 44px 0 16px !important;
}

html body.teacher-reference-class .teacher-homework-fields label {
    font-size: .98rem !important;
    line-height: 1.2 !important;
}

html body.teacher-reference-class .teacher-student-picker-open {
    grid-template-columns: minmax(150px, .55fr) minmax(0, 1fr) !important;
}

html body.teacher-reference-class .teacher-table-picker {
    margin-top: 4px !important;
}

@media (min-width: 900px) {
    html body.teacher-reference-class .teacher-homework-builder {
        padding: 24px !important;
    }

    html body.teacher-reference-class .teacher-table-picker > div {
        grid-template-columns: repeat(5, minmax(64px, 1fr)) !important;
    }
}

@media (max-width: 520px) {
    html body.teacher-reference-class .teacher-student-picker-open {
        grid-template-columns: 1fr !important;
    }
}

/* TEACHER-STUDENT-PICKER-STACKED-209: stack class and student choices in every viewport width. */
html body.teacher-reference-class .teacher-student-picker.is-open .teacher-student-picker__dialog {
    grid-template-columns: minmax(0, 1fr) !important;
}

html body.teacher-reference-class .teacher-student-picker.is-open .teacher-student-picker__head,
html body.teacher-reference-class .teacher-student-picker.is-open p,
html body.teacher-reference-class .teacher-student-picker.is-open .teacher-student-picker__all,
html body.teacher-reference-class .teacher-student-picker.is-open .teacher-student-picker__list,
html body.teacher-reference-class .teacher-student-picker.is-open .teacher-student-picker__apply {
    grid-column: 1 / -1 !important;
}

html body.teacher-reference-class .teacher-student-picker.is-open .teacher-student-picker__list {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
}

html body.teacher-reference-class .teacher-student-picker.is-open .teacher-student-picker__all,
html body.teacher-reference-class .teacher-student-picker.is-open .teacher-student-picker__list label {
    width: 100% !important;
}

html body.teacher-reference-class .teacher-student-picker.is-open .teacher-student-picker__all span,
html body.teacher-reference-class .teacher-student-picker.is-open .teacher-student-picker__list span {
    justify-content: flex-start !important;
    text-align: left !important;
    width: 100% !important;
}
/* TEACHER-STUDENT-SECTION-ICON-211: keep the students panel title icon visible and aligned on every viewport. */
html body.teacher-reference-page .teacher-help-panel .teacher-section-heading,
html body.teacher-reference-class .teacher-help-panel .teacher-section-heading {
    align-items: flex-start !important;
    gap: 12px !important;
    overflow: visible !important;
}

html body.teacher-reference-page .teacher-help-panel .teacher-section-heading h2,
html body.teacher-reference-class .teacher-help-panel .teacher-section-heading h2 {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
    overflow: visible !important;
    line-height: 1.12 !important;
}

html body.teacher-reference-page .teacher-help-panel .teacher-section-heading h2 .teacher-ui-icon,
html body.teacher-reference-class .teacher-help-panel .teacher-section-heading h2 .teacher-ui-icon {
    display: inline-grid !important;
    place-items: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    flex: 0 0 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    line-height: 1 !important;
    transform: none !important;
    vertical-align: middle !important;
}

html body.teacher-reference-page .teacher-help-panel .teacher-section-heading h2 .teacher-ui-icon img,
html body.teacher-reference-class .teacher-help-panel .teacher-section-heading h2 .teacher-ui-icon img {
    display: block !important;
    width: 44px !important;
    height: 44px !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
    clip-path: none !important;
}

@media (max-width: 640px) {
    html body.teacher-reference-page .teacher-help-panel .teacher-section-heading h2 .teacher-ui-icon,
    html body.teacher-reference-class .teacher-help-panel .teacher-section-heading h2 .teacher-ui-icon,
    html body.teacher-reference-page .teacher-help-panel .teacher-section-heading h2 .teacher-ui-icon img,
    html body.teacher-reference-class .teacher-help-panel .teacher-section-heading h2 .teacher-ui-icon img {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        flex-basis: 38px !important;
    }
}
/* TEACHER-MANAGEMENT-DESKTOP-LAYOUT-216: keep class-management popup readable on laptop/desktop without horizontal scroll. */
@media (min-width: 721px) {
    html body.teacher-reference-dashboard .teacher-dashboard-management[open],
    html body.teacher-reference-class .teacher-class-tools[open] {
        width: min(760px, calc(100vw - 48px)) !important;
        max-width: calc(100vw - 48px) !important;
        overflow-x: hidden !important;
    }

    html body.teacher-reference-page .teacher-class-management[open] > .teacher-class-context {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    html body.teacher-reference-page .teacher-class-management[open] .teacher-class-context__main {
        display: grid !important;
        grid-template-columns: minmax(140px, .9fr) auto minmax(190px, 1fr) auto auto !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    html body.teacher-reference-page .teacher-class-management[open] .teacher-class-context__main label,
    html body.teacher-reference-page .teacher-class-management[open] .teacher-class-context__main form,
    html body.teacher-reference-page .teacher-class-management[open] .teacher-class-context__main div {
        min-width: 0 !important;
    }

    html body.teacher-reference-page .teacher-class-management[open] .teacher-class-context__main label {
        display: grid !important;
        gap: 6px !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        line-height: 1.15 !important;
    }

    html body.teacher-reference-page .teacher-class-management[open] .teacher-class-context__main label > span,
    html body.teacher-reference-page .teacher-class-management[open] .teacher-class-context__main label > small {
        white-space: nowrap !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    html body.teacher-reference-page .teacher-class-management[open] .teacher-class-context__main select {
        min-width: 0 !important;
        width: 100% !important;
    }

    html body.teacher-reference-page .teacher-class-management[open] .teacher-class-context__main .teacher-button,
    html body.teacher-reference-page .teacher-class-management[open] .teacher-class-context__icon-button {
        flex: 0 0 auto !important;
        justify-self: end !important;
    }

    html body.teacher-reference-dashboard .teacher-dashboard-management[open] > .teacher-class-management__form,
    html body.teacher-reference-class .teacher-class-tools[open] > .teacher-class-management__grid .teacher-class-management__form,
    html body.teacher-reference-class .teacher-class-tools[open] > .teacher-class-management__form {
        grid-template-columns: minmax(220px, 1fr) minmax(140px, .42fr) auto !important;
        align-items: end !important;
        gap: 12px !important;
        width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
    }

    html body.teacher-reference-page .teacher-class-management[open] .teacher-class-management__form label,
    html body.teacher-reference-page .teacher-class-management[open] .teacher-class-management__form input,
    html body.teacher-reference-page .teacher-class-management[open] .teacher-class-management__form select {
        min-width: 0 !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }
}
/* TEACHER-KPI-PERCENT-INLINE-217 */
html body.teacher-reference-dashboard .teacher-summary-strip details.teacher-summary-card > summary > div,
html body.teacher-reference-page .teacher-kpi-card > div {
    min-width: 0 !important;
}

html body.teacher-reference-dashboard .teacher-summary-strip details.teacher-summary-card strong,
html body.teacher-reference-page .teacher-kpi-card strong {
    display: inline-block !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
    font-size: clamp(26px, 2.65vw, 32px) !important;
    line-height: .98 !important;
    letter-spacing: -.045em !important;
}

html body.teacher-reference-dashboard .teacher-summary-strip details.teacher-summary-card small,
html body.teacher-reference-page .teacher-kpi-card small {
    display: block;
    max-width: 100%;
}

@media (min-width: 721px) {
    html body.teacher-reference-dashboard .teacher-summary-card > summary {
        gap: 10px !important;
        padding-inline: 12px !important;
    }

    html body.teacher-reference-dashboard .teacher-summary-card > summary > :first-child {
        width: 52px !important;
        height: 52px !important;
        flex-basis: 52px !important;
    }

    html body.teacher-reference-dashboard .teacher-summary-card span {
        font-size: 11px !important;
        line-height: 1.22 !important;
    }

    html body.teacher-reference-dashboard .teacher-summary-card small {
        font-size: 12px !important;
        line-height: 1.2 !important;
    }
}
/* TEACHER-MANAGEMENT-LABEL-LAYOUT-218 */
html body.teacher-reference-page .teacher-class-management[open] .teacher-class-context {
    display: grid !important;
    gap: 14px !important;
}

html body.teacher-reference-page .teacher-class-management[open] .teacher-class-context__selector,
html body.teacher-reference-page .teacher-class-management[open] .teacher-class-context__code {
    min-width: 0 !important;
}

html body.teacher-reference-page .teacher-class-management[open] .teacher-class-context__selector {
    display: grid !important;
    grid-template-columns: minmax(128px, 160px) minmax(180px, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
}

html body.teacher-reference-page .teacher-class-management[open] .teacher-class-context__selector label {
    display: block !important;
    min-width: 128px !important;
    width: auto !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
    line-height: 1.25 !important;
}

html body.teacher-reference-page .teacher-class-management[open] .teacher-class-context__select-wrap {
    min-width: 180px !important;
    width: 100% !important;
}

html body.teacher-reference-page .teacher-class-management[open] .teacher-class-context__show {
    min-width: 92px !important;
    white-space: nowrap !important;
}

html body.teacher-reference-page .teacher-class-management[open] .teacher-class-context__code {
    display: grid !important;
    grid-template-columns: minmax(180px, 1fr) auto auto !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
}

@media (max-width: 720px) {
    html body.teacher-reference-page .teacher-class-management[open] .teacher-class-context__selector,
    html body.teacher-reference-page .teacher-class-management[open] .teacher-class-context__code {
        grid-template-columns: 1fr !important;
        align-items: stretch !important;
    }

    html body.teacher-reference-page .teacher-class-management[open] .teacher-class-context__selector label,
    html body.teacher-reference-page .teacher-class-management[open] .teacher-class-context__select-wrap,
    html body.teacher-reference-page .teacher-class-management[open] .teacher-class-context__show {
        min-width: 0 !important;
        width: 100% !important;
    }
}

/* TEACHER-TARGET-IMAGE-ICON-230 */
html body.teacher-reference-student .teacher-button--student-target,
html body.teacher-reference-student .teacher-button--student-assign {
    min-height: clamp(76px, 8.6vw, 90px) !important;
    gap: clamp(12px, 1.8vw, 18px) !important;
    padding-block: 9px !important;
    white-space: normal !important;
}

html body.teacher-reference-student .teacher-button--student-target {
    min-width: min(100%, 312px) !important;
    padding-inline: clamp(16px, 3.2vw, 30px) !important;
}

html body.teacher-reference-student .teacher-button--student-assign {
    padding-inline: clamp(16px, 3.2vw, 30px) !important;
}

html body.teacher-reference-student .teacher-button--student-recommend {
    min-width: min(100%, 306px) !important;
    min-height: 68px !important;
    gap: 12px !important;
    padding: 8px 18px !important;
    white-space: normal !important;
}

html body.teacher-reference-student .teacher-button--student-target > span:last-child,
html body.teacher-reference-student .teacher-button--student-assign > span:last-child,
html body.teacher-reference-student .teacher-button--student-recommend > span:last-child {
    min-width: 0 !important;
    overflow: visible !important;
    text-align: left !important;
    text-overflow: clip !important;
    white-space: normal !important;
    line-height: 1.08 !important;
}

html body.teacher-reference-student .teacher-button--student-target .teacher-target-icon--image,
html body.teacher-reference-student .teacher-button--student-assign .teacher-target-icon--image {
    flex: 0 0 clamp(66px, 7.4vw, 78px) !important;
    width: clamp(66px, 7.4vw, 78px) !important;
    height: clamp(66px, 7.4vw, 78px) !important;
    min-width: clamp(66px, 7.4vw, 78px) !important;
    padding: 5px !important;
    border: 3px solid rgba(255, 255, 255, .96) !important;
    border-radius: 999px !important;
    background: #fff !important;
    box-shadow: inset 0 2px 0 rgba(255,255,255,.92), 0 8px 18px rgba(4, 38, 135, .2) !important;
}

html body.teacher-reference-student .teacher-button--student-recommend .teacher-target-icon--image {
    flex: 0 0 58px !important;
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    padding: 5px !important;
    border: 3px solid rgba(255, 255, 255, .96) !important;
    border-radius: 999px !important;
    background: #fff !important;
    box-shadow: inset 0 2px 0 rgba(255,255,255,.92), 0 7px 16px rgba(4, 38, 135, .18) !important;
}

html body.teacher-reference-student .teacher-target-icon--image > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    transform: scale(1.12) !important;
    transform-origin: center !important;
}

html body.teacher-reference-student .teacher-target-icon--image::before,
html body.teacher-reference-student .teacher-target-icon--image::after {
    content: none !important;
    display: none !important;
}

@media (max-width: 720px) {
    html body.teacher-reference-student .teacher-button--student-target,
    html body.teacher-reference-student .teacher-button--student-assign {
        min-height: 74px !important;
        padding-inline: 14px !important;
        gap: 10px !important;
    }

    html body.teacher-reference-student .teacher-button--student-target .teacher-target-icon--image,
    html body.teacher-reference-student .teacher-button--student-assign .teacher-target-icon--image {
        flex-basis: 62px !important;
        width: 62px !important;
        height: 62px !important;
        min-width: 62px !important;
    }

    html body.teacher-reference-student .teacher-button--student-recommend {
        min-width: 0 !important;
        min-height: 66px !important;
        padding-inline: 12px !important;
    }

    html body.teacher-reference-student .teacher-button--student-recommend .teacher-target-icon--image {
        flex-basis: 54px !important;
        width: 54px !important;
        height: 54px !important;
        min-width: 54px !important;
    }
}
/* TEACHER-MANAGEMENT-CODE-LAYOUT-219 */
@media (min-width: 721px) {
    html body.teacher-reference-page .teacher-class-management[open] .teacher-class-context {
        gap: 14px !important;
    }

    html body.teacher-reference-page .teacher-class-management[open] .teacher-class-context__main {
        display: grid !important;
        grid-template-columns: minmax(285px, .95fr) minmax(260px, 1fr) auto !important;
        align-items: center !important;
        gap: 16px !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    html body.teacher-reference-page .teacher-class-management[open] .teacher-class-context__selector {
        display: grid !important;
        grid-template-columns: minmax(112px, 128px) minmax(150px, 1fr) !important;
        align-items: center !important;
        gap: 10px !important;
        min-width: 0 !important;
    }

    html body.teacher-reference-page .teacher-class-management[open] .teacher-class-context__selector .teacher-class-context__show {
        grid-column: 2 !important;
        justify-self: start !important;
        min-width: 92px !important;
        margin-top: 8px !important;
    }

    html body.teacher-reference-page .teacher-class-management[open] .teacher-class-context__code {
        display: grid !important;
        grid-template-columns: minmax(145px, 1fr) auto auto !important;
        align-items: center !important;
        gap: 12px !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    html body.teacher-reference-page .teacher-class-management[open] .teacher-class-context__code > div {
        min-width: 0 !important;
        overflow: hidden !important;
    }

    html body.teacher-reference-page .teacher-class-management[open] .teacher-class-context__code span,
    html body.teacher-reference-page .teacher-class-management[open] .teacher-class-context__code small {
        display: block !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    html body.teacher-reference-page .teacher-class-management[open] .teacher-class-context__code strong {
        display: block !important;
        max-width: 100% !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: clamp(20px, 2.6vw, 28px) !important;
        line-height: 1.05 !important;
        letter-spacing: -.035em !important;
    }

    html body.teacher-reference-page .teacher-class-management[open] .teacher-class-context__icon-button {
        width: 46px !important;
        height: 46px !important;
        flex: 0 0 46px !important;
    }
}

@media (min-width: 721px) and (max-width: 820px) {
    html body.teacher-reference-page .teacher-class-management[open] .teacher-class-context__main {
        grid-template-columns: 1fr !important;
        align-items: stretch !important;
    }

    html body.teacher-reference-page .teacher-class-management[open] .teacher-class-context__selector {
        grid-template-columns: minmax(120px, 150px) minmax(0, 1fr) auto !important;
    }

    html body.teacher-reference-page .teacher-class-management[open] .teacher-class-context__selector .teacher-class-context__show {
        grid-column: auto !important;
        margin-top: 0 !important;
        justify-self: stretch !important;
    }
}
/* TEACHER-MANAGEMENT-CODE-SHIFT-220 */
@media (min-width: 821px) {
    html body.teacher-reference-page .teacher-class-management[open] .teacher-class-context__main {
        grid-template-columns: minmax(300px, 1.05fr) minmax(240px, .9fr) auto !important;
        column-gap: 22px !important;
    }

    html body.teacher-reference-page .teacher-class-management[open] .teacher-class-context__code {
        padding-left: 90px !important;
        border-left: 1px solid rgba(86, 151, 225, .22) !important;
    }

    html body.teacher-reference-page .teacher-class-management[open] .teacher-class-context__code strong {
        font-size: clamp(19px, 2.35vw, 25px) !important;
        letter-spacing: -.04em !important;
    }
}
/* TEACHER-STUDENT-TARGET-ASSIGNMENT-221 */
html body.teacher-reference-student .teacher-button--student-target,
html body.teacher-reference-student .teacher-button--student-assign {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(12px, 2vw, 24px) !important;
    border: 0 !important;
    border-radius: 999px !important;
    color: #fff !important;
    font-weight: 1000 !important;
    letter-spacing: -.02em !important;
    text-decoration: none !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,0) 34%),
        linear-gradient(110deg, #13c9ea 0%, #126dff 53%, #5232f4 100%) !important;
    box-shadow: 0 16px 30px rgba(18, 105, 255, .26), inset 0 2px 0 rgba(255,255,255,.34), inset 0 -3px 0 rgba(6, 39, 172, .18) !important;
}

html body.teacher-reference-student .teacher-button--student-target {
    min-height: 62px !important;
    padding: 0 clamp(22px, 4vw, 38px) !important;
    font-size: clamp(17px, 2.2vw, 24px) !important;
    white-space: nowrap !important;
}

html body.teacher-reference-student .teacher-button--student-assign {
    width: 100% !important;
    min-height: 60px !important;
    font-size: clamp(18px, 2.3vw, 26px) !important;
}

html body.teacher-reference-student .teacher-button--student-target .teacher-target-icon,
html body.teacher-reference-student .teacher-button--student-assign .teacher-target-icon {
    display: grid !important;
    place-items: center !important;
    width: clamp(34px, 5vw, 48px) !important;
    height: clamp(34px, 5vw, 48px) !important;
    flex: 0 0 auto !important;
    border: 4px solid rgba(255,255,255,.88) !important;
    border-radius: 50% !important;
    color: #fff !important;
    font-size: 0 !important;
    position: relative !important;
}

html body.teacher-reference-student .teacher-button--student-target .teacher-target-icon::before,
html body.teacher-reference-student .teacher-button--student-assign .teacher-target-icon::before,
html body.teacher-reference-student .teacher-button--student-target .teacher-target-icon::after,
html body.teacher-reference-student .teacher-button--student-assign .teacher-target-icon::after {
    content: "" !important;
    position: absolute !important;
    border-radius: 50% !important;
}

html body.teacher-reference-student .teacher-button--student-target .teacher-target-icon::before,
html body.teacher-reference-student .teacher-button--student-assign .teacher-target-icon::before {
    inset: 8px !important;
    border: 4px solid rgba(255,255,255,.9) !important;
}

html body.teacher-reference-student .teacher-button--student-target .teacher-target-icon::after,
html body.teacher-reference-student .teacher-button--student-assign .teacher-target-icon::after {
    inset: 18px !important;
    background: #fff !important;
}

html body.teacher-reference-student .teacher-student-fixed-target {
    display: grid !important;
    gap: 7px !important;
    min-width: 0 !important;
    padding: 12px 14px !important;
    border: 1px solid #bed5fa !important;
    border-radius: 14px !important;
    background: #fff !important;
    color: #173575 !important;
}

html body.teacher-reference-student .teacher-student-fixed-target > span {
    font-size: 14px !important;
    font-weight: 900 !important;
}

html body.teacher-reference-student .teacher-student-fixed-target > strong {
    min-width: 0 !important;
    overflow: hidden !important;
    color: #08246f !important;
    font-size: 17px !important;
    font-weight: 1000 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html body.teacher-reference-student .teacher-student-fixed-target > small {
    color: #5570a1 !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
}

@media (max-width: 720px) {
    html body.teacher-reference-student .teacher-button--student-target {
        width: 100% !important;
        min-height: 58px !important;
        padding-inline: 18px !important;
        font-size: 18px !important;
    }
}
/* TEACHER-STUDENT-TARGET-BUTTONS-222 */
html body.teacher-reference-student .teacher-recommendation-row {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
}

html body.teacher-reference-student .teacher-recommendation-row .teacher-recommendation-badge {
    grid-column: 2 !important;
    justify-self: start !important;
}

html body.teacher-reference-student .teacher-button--student-recommend {
    grid-column: 3 !important;
    grid-row: 1 / span 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    min-width: min(100%, 260px) !important;
    min-height: 54px !important;
    padding: 0 20px !important;
    border: 0 !important;
    border-radius: 999px !important;
    color: #fff !important;
    font-size: clamp(15px, 1.7vw, 18px) !important;
    font-weight: 1000 !important;
    letter-spacing: -.02em !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,0) 34%),
        linear-gradient(110deg, #13c9ea 0%, #126dff 53%, #5232f4 100%) !important;
    box-shadow: 0 14px 26px rgba(18, 105, 255, .24), inset 0 2px 0 rgba(255,255,255,.34), inset 0 -3px 0 rgba(6, 39, 172, .18) !important;
}

html body.teacher-reference-student .teacher-button--student-recommend .teacher-target-icon {
    display: grid !important;
    place-items: center !important;
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
    border: 3px solid rgba(255,255,255,.9) !important;
    border-radius: 50% !important;
    color: #fff !important;
    font-size: 0 !important;
    position: relative !important;
}

html body.teacher-reference-student .teacher-button--student-recommend .teacher-target-icon::before,
html body.teacher-reference-student .teacher-button--student-recommend .teacher-target-icon::after {
    content: "" !important;
    position: absolute !important;
    border-radius: 50% !important;
}

html body.teacher-reference-student .teacher-button--student-recommend .teacher-target-icon::before {
    inset: 7px !important;
    border: 3px solid rgba(255,255,255,.9) !important;
}

html body.teacher-reference-student .teacher-button--student-recommend .teacher-target-icon::after {
    inset: 15px !important;
    background: #fff !important;
}

html body.teacher-reference-student .teacher-homework-builder--student .teacher-homework-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

html body.teacher-reference-student .teacher-homework-builder--student .teacher-student-picker,
html body.teacher-reference-student .teacher-homework-builder--student .teacher-student-picker-shell {
    display: none !important;
}

@media (max-width: 760px) {
    html body.teacher-reference-student .teacher-recommendation-row {
        grid-template-columns: auto minmax(0, 1fr) !important;
    }

    html body.teacher-reference-student .teacher-recommendation-row .teacher-recommendation-badge,
    html body.teacher-reference-student .teacher-button--student-recommend {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
    }

    html body.teacher-reference-student .teacher-button--student-recommend {
        width: 100% !important;
        min-width: 0 !important;
    }

    html body.teacher-reference-student .teacher-homework-builder--student .teacher-homework-fields {
        grid-template-columns: 1fr !important;
    }
}
/* TEACHER-CLASS-MANAGEMENT-LAPTOP-223 */
@media (min-width: 721px) {
    html body.teacher-reference-class .teacher-class-tools[open] {
        width: min(760px, calc(100vw - 24px)) !important;
        padding: 24px 18px 18px !important;
        overflow-x: hidden !important;
    }

    html body.teacher-reference-class .teacher-class-tools[open] > .teacher-class-context {
        display: grid !important;
        grid-template-columns: minmax(250px, .92fr) minmax(300px, 1.08fr) !important;
        align-items: center !important;
        gap: 20px !important;
        width: 100% !important;
        margin: 18px 0 16px !important;
        padding: 22px 20px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    html body.teacher-reference-class .teacher-class-tools[open] .teacher-class-context__selector {
        display: grid !important;
        grid-template-columns: 112px minmax(150px, 1fr) !important;
        align-items: center !important;
        gap: 10px 12px !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    html body.teacher-reference-class .teacher-class-tools[open] .teacher-class-context__selector label {
        grid-column: 1 !important;
        align-self: center !important;
        min-width: 0 !important;
        margin: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    html body.teacher-reference-class .teacher-class-tools[open] .teacher-class-context__select-wrap {
        grid-column: 2 !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    html body.teacher-reference-class .teacher-class-tools[open] .teacher-class-context__selector select {
        min-width: 0 !important;
        width: 100% !important;
        height: 42px !important;
    }

    html body.teacher-reference-class .teacher-class-tools[open] .teacher-class-context__show {
        grid-column: 2 !important;
        justify-self: start !important;
        min-width: 84px !important;
        height: 42px !important;
        margin-top: 6px !important;
        padding: 0 18px !important;
    }

    html body.teacher-reference-class .teacher-class-tools[open] .teacher-class-context__code {
        display: grid !important;
        grid-template-columns: minmax(150px, 1fr) 44px 44px !important;
        align-items: center !important;
        gap: 10px !important;
        min-width: 0 !important;
        width: 100% !important;
        padding-left: 14px !important;
        border-left: 1px solid rgba(86, 151, 225, .24) !important;
        box-sizing: border-box !important;
    }

    html body.teacher-reference-class .teacher-class-tools[open] .teacher-class-context__code > div {
        min-width: 0 !important;
        overflow: hidden !important;
    }

    html body.teacher-reference-class .teacher-class-tools[open] .teacher-class-context__code span,
    html body.teacher-reference-class .teacher-class-tools[open] .teacher-class-context__code small {
        display: block !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    html body.teacher-reference-class .teacher-class-tools[open] .teacher-class-context__code strong {
        display: block !important;
        max-width: 100% !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: clamp(20px, 2.55vw, 25px) !important;
        line-height: 1.05 !important;
        letter-spacing: -.035em !important;
    }

    html body.teacher-reference-class .teacher-class-tools[open] .teacher-class-context__icon-button {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        flex: 0 0 44px !important;
    }

    html body.teacher-reference-class .teacher-class-tools[open] > .teacher-class-management__grid {
        display: grid !important;
        grid-template-columns: minmax(0, .92fr) minmax(270px, 1.08fr) !important;
        align-items: stretch !important;
        gap: 14px !important;
        margin-top: 12px !important;
    }

    html body.teacher-reference-class .teacher-class-tools[open] .teacher-class-management__form {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        align-content: start !important;
        gap: 10px !important;
        width: 100% !important;
        padding: 0 !important;
    }

    html body.teacher-reference-class .teacher-class-tools[open] .teacher-class-management__form label,
    html body.teacher-reference-class .teacher-class-tools[open] .teacher-class-management__form input {
        width: 100% !important;
        min-width: 0 !important;
    }

    html body.teacher-reference-class .teacher-class-tools[open] .teacher-class-management__form .teacher-button {
        width: 100% !important;
        min-height: 48px !important;
        margin: 0 !important;
    }

    html body.teacher-reference-class .teacher-class-tools[open] .teacher-class-management__danger {
        display: grid !important;
        align-content: start !important;
        gap: 7px !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 14px !important;
    }

    html body.teacher-reference-class .teacher-class-tools[open] .teacher-class-management__danger p {
        margin: 0 !important;
        line-height: 1.28 !important;
    }

    html body.teacher-reference-class .teacher-class-tools[open] .teacher-class-management__danger .teacher-button {
        min-height: 48px !important;
        padding-inline: 20px !important;
    }

    html body.teacher-reference-class .teacher-class-tools[open] > .teacher-class-management__note {
        margin-top: 10px !important;
        line-height: 1.35 !important;
    }
}

@media (min-width: 721px) and (max-width: 760px) {
    html body.teacher-reference-class .teacher-class-tools[open] > .teacher-class-context {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    html body.teacher-reference-class .teacher-class-tools[open] .teacher-class-context__code {
        padding-left: 0 !important;
        border-left: 0 !important;
    }

    html body.teacher-reference-class .teacher-class-tools[open] > .teacher-class-management__grid {
        grid-template-columns: 1fr !important;
    }
}
/* TEACHER-CLASS-ARCHIVE-BELOW-224 */
@media (min-width: 721px) {
    html body.teacher-reference-class .teacher-class-tools[open] > .teacher-class-management__grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        margin-top: 12px !important;
    }

    html body.teacher-reference-class .teacher-class-tools[open] .teacher-class-management__form {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(150px, 180px) !important;
        align-items: end !important;
        gap: 12px !important;
        max-width: 470px !important;
    }

    html body.teacher-reference-class .teacher-class-tools[open] .teacher-class-management__danger {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 16px 18px !important;
        border-radius: 16px !important;
    }

    html body.teacher-reference-class .teacher-class-tools[open] .teacher-class-management__danger form {
        margin-top: 4px !important;
    }

    html body.teacher-reference-class .teacher-class-tools[open] .teacher-class-management__danger .teacher-button {
        width: auto !important;
        min-width: 210px !important;
    }
}

@media (min-width: 721px) and (max-width: 760px) {
    html body.teacher-reference-class .teacher-class-tools[open] .teacher-class-management__form {
        grid-template-columns: 1fr !important;
        max-width: none !important;
    }
}

/* TEACHER-CLASS-MANAGEMENT-PARITY-225 */
html body.teacher-reference-page .teacher-class-management[open] > .teacher-class-management__grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin-top: 14px !important;
}

html body.teacher-reference-page .teacher-class-management[open] .teacher-class-management__form--rename {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(150px, 190px) !important;
    align-items: end !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 520px !important;
    margin: 0 !important;
    padding: 0 !important;
}

html body.teacher-reference-page .teacher-class-management[open] .teacher-class-management__form--rename label,
html body.teacher-reference-page .teacher-class-management[open] .teacher-class-management__form--rename input,
html body.teacher-reference-page .teacher-class-management[open] .teacher-class-management__form--rename .teacher-button,
html body.teacher-reference-page .teacher-class-management[open] .teacher-class-management__form--create label,
html body.teacher-reference-page .teacher-class-management[open] .teacher-class-management__form--create input,
html body.teacher-reference-page .teacher-class-management[open] .teacher-class-management__form--create select,
html body.teacher-reference-page .teacher-class-management[open] .teacher-class-management__form--create .teacher-button {
    min-width: 0 !important;
}

html body.teacher-reference-page .teacher-class-management[open] .teacher-class-management__danger,
html body.teacher-reference-page .teacher-class-management[open] .teacher-class-management__create {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border-radius: 16px !important;
}

html body.teacher-reference-page .teacher-class-management[open] .teacher-class-management__create {
    display: grid !important;
    gap: 10px !important;
    margin-top: 14px !important;
    padding: 16px 18px !important;
    border: 1px solid var(--teacher-border, #bfd7ff) !important;
    background: rgba(255, 255, 255, .72) !important;
}

html body.teacher-reference-page .teacher-class-management[open] .teacher-class-management__create > strong {
    color: var(--teacher-text, #071f6f) !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
}

html body.teacher-reference-page .teacher-class-management[open] .teacher-class-management__form--create {
    display: grid !important;
    grid-template-columns: minmax(0, 1.25fr) minmax(140px, .55fr) minmax(150px, auto) !important;
    align-items: end !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

html body.teacher-reference-page .teacher-class-management[open] .teacher-class-management__danger form {
    margin-top: 4px !important;
}

html body.teacher-reference-page .teacher-class-management[open] .teacher-class-management__danger .teacher-button {
    width: auto !important;
    min-width: 210px !important;
}

@media (max-width: 760px) {
    html body.teacher-reference-page .teacher-class-management[open] .teacher-class-management__form--rename,
    html body.teacher-reference-page .teacher-class-management[open] .teacher-class-management__form--create {
        grid-template-columns: 1fr !important;
        max-width: none !important;
    }

    html body.teacher-reference-page .teacher-class-management[open] .teacher-class-management__form--rename .teacher-button,
    html body.teacher-reference-page .teacher-class-management[open] .teacher-class-management__form--create .teacher-button,
    html body.teacher-reference-page .teacher-class-management[open] .teacher-class-management__danger .teacher-button {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* TEACHER-CLASS-CONTEXT-BG-228 */
html body.teacher-reference-page .teacher-class-management[open] > .teacher-class-context {
    background-color: transparent !important;
    background-image: url('../images/teacher/premium-v4/class-management-panel-bg.png') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 100% 100% !important;
    border-color: rgba(168, 205, 255, .8) !important;
    box-shadow: 0 16px 34px rgba(32, 118, 255, .12) !important;
}

/* TEACHER-TARGET-IMAGE-ICON-229 */
html body.teacher-reference-student .teacher-button--student-target,
html body.teacher-reference-student .teacher-button--student-assign,
html body.teacher-reference-student .teacher-button--student-recommend {
    overflow: visible !important;
}

html body.teacher-reference-student .teacher-button--student-target,
html body.teacher-reference-student .teacher-button--student-assign {
    gap: clamp(12px, 2vw, 18px) !important;
    min-height: clamp(68px, 8vw, 82px) !important;
    padding-block: 8px !important;
}

html body.teacher-reference-student .teacher-button--student-target {
    padding-inline: clamp(18px, 4vw, 34px) !important;
}

html body.teacher-reference-student .teacher-button--student-assign {
    padding-inline: clamp(18px, 4vw, 32px) !important;
}

html body.teacher-reference-student .teacher-button--student-recommend {
    gap: 10px !important;
    min-width: min(100%, 292px) !important;
    min-height: 62px !important;
    padding: 7px 18px !important;
}

html body.teacher-reference-student .teacher-target-icon--image {
    display: inline-grid !important;
    place-items: center !important;
    flex: 0 0 clamp(54px, 6.8vw, 72px) !important;
    width: clamp(54px, 6.8vw, 72px) !important;
    height: clamp(54px, 6.8vw, 72px) !important;
    min-width: clamp(54px, 6.8vw, 72px) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    overflow: visible !important;
    position: relative !important;
}

html body.teacher-reference-student .teacher-button--student-recommend .teacher-target-icon--image {
    flex-basis: 50px !important;
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
}

html body.teacher-reference-student .teacher-target-icon--image::before,
html body.teacher-reference-student .teacher-target-icon--image::after {
    content: none !important;
    display: none !important;
}

html body.teacher-reference-student .teacher-target-icon--image > img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    filter: none !important;
}

@media (max-width: 720px) {
    html body.teacher-reference-student .teacher-button--student-target,
    html body.teacher-reference-student .teacher-button--student-assign {
        min-height: 66px !important;
        padding-inline: 14px !important;
        gap: 10px !important;
        white-space: normal !important;
    }

    html body.teacher-reference-student .teacher-button--student-target > span:last-child,
    html body.teacher-reference-student .teacher-button--student-assign > span:last-child {
        min-width: 0 !important;
        line-height: 1.08 !important;
        text-align: left !important;
    }

    html body.teacher-reference-student .teacher-target-icon--image {
        flex-basis: 54px !important;
        width: 54px !important;
        height: 54px !important;
        min-width: 54px !important;
    }

    html body.teacher-reference-student .teacher-button--student-recommend {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 60px !important;
        padding-inline: 14px !important;
        white-space: normal !important;
    }

    html body.teacher-reference-student .teacher-button--student-recommend .teacher-target-icon--image {
        flex-basis: 46px !important;
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
    }
}

/* TEACHER-TARGET-IMAGE-ICON-230-FINAL */
html body.teacher-reference-student .teacher-button--student-target,
html body.teacher-reference-student .teacher-button--student-assign {
    min-height: clamp(76px, 8.6vw, 90px) !important;
    gap: clamp(12px, 1.8vw, 18px) !important;
    padding-block: 9px !important;
    white-space: normal !important;
}

html body.teacher-reference-student .teacher-button--student-target {
    min-width: min(100%, 312px) !important;
    padding-inline: clamp(16px, 3.2vw, 30px) !important;
}

html body.teacher-reference-student .teacher-button--student-assign {
    padding-inline: clamp(16px, 3.2vw, 30px) !important;
}

html body.teacher-reference-student .teacher-button--student-recommend {
    min-width: min(100%, 306px) !important;
    min-height: 68px !important;
    gap: 12px !important;
    padding: 8px 18px !important;
    white-space: normal !important;
}

html body.teacher-reference-student .teacher-button--student-target > span:last-child,
html body.teacher-reference-student .teacher-button--student-assign > span:last-child,
html body.teacher-reference-student .teacher-button--student-recommend > span:last-child {
    min-width: 0 !important;
    overflow: visible !important;
    text-align: left !important;
    text-overflow: clip !important;
    white-space: normal !important;
    line-height: 1.08 !important;
}

html body.teacher-reference-student .teacher-button--student-target .teacher-target-icon--image,
html body.teacher-reference-student .teacher-button--student-assign .teacher-target-icon--image {
    flex: 0 0 clamp(66px, 7.4vw, 78px) !important;
    width: clamp(66px, 7.4vw, 78px) !important;
    height: clamp(66px, 7.4vw, 78px) !important;
    min-width: clamp(66px, 7.4vw, 78px) !important;
    padding: 5px !important;
    border: 3px solid rgba(255, 255, 255, .96) !important;
    border-radius: 999px !important;
    background: #fff !important;
    box-shadow: inset 0 2px 0 rgba(255,255,255,.92), 0 8px 18px rgba(4, 38, 135, .2) !important;
}

html body.teacher-reference-student .teacher-button--student-recommend .teacher-target-icon--image {
    flex: 0 0 58px !important;
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    padding: 5px !important;
    border: 3px solid rgba(255, 255, 255, .96) !important;
    border-radius: 999px !important;
    background: #fff !important;
    box-shadow: inset 0 2px 0 rgba(255,255,255,.92), 0 7px 16px rgba(4, 38, 135, .18) !important;
}

html body.teacher-reference-student .teacher-target-icon--image > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    transform: scale(1.12) !important;
    transform-origin: center !important;
}

html body.teacher-reference-student .teacher-target-icon--image::before,
html body.teacher-reference-student .teacher-target-icon--image::after {
    content: none !important;
    display: none !important;
}

@media (max-width: 720px) {
    html body.teacher-reference-student .teacher-button--student-target,
    html body.teacher-reference-student .teacher-button--student-assign {
        min-height: 74px !important;
        padding-inline: 14px !important;
        gap: 10px !important;
    }

    html body.teacher-reference-student .teacher-button--student-target .teacher-target-icon--image,
    html body.teacher-reference-student .teacher-button--student-assign .teacher-target-icon--image {
        flex-basis: 62px !important;
        width: 62px !important;
        height: 62px !important;
        min-width: 62px !important;
    }

    html body.teacher-reference-student .teacher-button--student-recommend {
        min-width: 0 !important;
        min-height: 66px !important;
        padding-inline: 12px !important;
    }

    html body.teacher-reference-student .teacher-button--student-recommend .teacher-target-icon--image {
        flex-basis: 54px !important;
        width: 54px !important;
        height: 54px !important;
        min-width: 54px !important;
    }
}

/* TEACHER-CLASS-CONTEXT-MOBILE-BG-231 */
@media (max-width: 720px) {
    html body.teacher-reference-page .teacher-class-management[open] > .teacher-class-context {
        background-color: #fff !important;
        background-size: cover !important;
        background-position: center top !important;
        min-height: 0 !important;
        padding: 16px !important;
        border-radius: 22px !important;
        overflow: hidden !important;
    }
}

/* TEACHER-CLASS-CONTEXT-MOBILE-COMPACT-232 */
@media (max-width: 720px) {
    html body.teacher-reference-page .teacher-class-management[open] > .teacher-class-context {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 14px 16px !important;
        background-size: 100% 100% !important;
        background-position: center !important;
    }

    html body.teacher-reference-page .teacher-class-management[open] .teacher-class-context__selector {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        padding: 0 !important;
        border-bottom: 1px solid rgba(86, 151, 225, .18) !important;
        padding-bottom: 12px !important;
    }

    html body.teacher-reference-page .teacher-class-management[open] .teacher-class-context__selector label {
        width: 100% !important;
        min-width: 0 !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
    }

    html body.teacher-reference-page .teacher-class-management[open] .teacher-class-context__select-wrap,
    html body.teacher-reference-page .teacher-class-management[open] .teacher-class-context__show {
        width: 100% !important;
        min-width: 0 !important;
    }

    html body.teacher-reference-page .teacher-class-management[open] .teacher-class-context__show {
        min-height: 40px !important;
        height: 40px !important;
        margin: 0 !important;
    }

    html body.teacher-reference-page .teacher-class-management[open] .teacher-class-context__code {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 46px 46px !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
        padding: 0 !important;
        border-left: 0 !important;
    }

    html body.teacher-reference-page .teacher-class-management[open] .teacher-class-context__code > div {
        min-width: 0 !important;
        overflow: hidden !important;
    }

    html body.teacher-reference-page .teacher-class-management[open] .teacher-class-context__code strong {
        display: block !important;
        max-width: 100% !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: 22px !important;
        line-height: 1.05 !important;
        letter-spacing: -.04em !important;
    }

    html body.teacher-reference-page .teacher-class-management[open] .teacher-class-context__code small,
    html body.teacher-reference-page .teacher-class-management[open] .teacher-class-context__code span {
        display: block !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    html body.teacher-reference-page .teacher-class-management[open] .teacher-class-context__icon-button {
        position: static !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        margin: 0 !important;
        justify-self: end !important;
        align-self: center !important;
    }
}

/* TEACHER-CLASS-CONTEXT-NO-BG-233 */
html body.teacher-reference-page .teacher-class-management[open] > .teacher-class-context {
    background-image: none !important;
    background-color: rgba(255, 255, 255, .82) !important;
    border-color: rgba(168, 205, 255, .72) !important;
    box-shadow: 0 14px 32px rgba(32, 118, 255, .10) !important;
}

@media (max-width: 720px) {
    html body.teacher-reference-page .teacher-class-management[open] > .teacher-class-context {
        background-image: none !important;
        background-color: rgba(255, 255, 255, .9) !important;
    }
}

/* TEACHER-PROFILE-VISIBLE-235: final server-side override for mobile account controls. */
html body.teacher-reference-page .teacher-profile-management[open] {
    position: fixed !important;
    z-index: 1002 !important;
    top: 50% !important;
    left: 50% !important;
    width: min(800px, calc(100vw - 24px)) !important;
    max-height: calc(100dvh - 24px) !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    transform: translate(-50%, -50%) !important;
}

html body.teacher-reference-page .teacher-profile-management[open] .teacher-profile-form {
    display: grid !important;
}

/* TEACHER-PROFILE-SCHOOL-238: keep profile school picker and modal controls readable on production. */
html body.teacher-reference-page .teacher-profile-school-picker {
    position: relative !important;
    min-width: 0 !important;
}

html body.teacher-reference-page .teacher-profile-school-picker > label {
    display: grid !important;
}

html body.teacher-reference-page .teacher-profile-school-picker .teacher-school-suggestions {
    position: absolute !important;
    z-index: 8 !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: 0 !important;
    max-height: min(260px, 44dvh) !important;
    overflow-y: auto !important;
    padding: 8px !important;
    border: 1px solid #b9d4ff !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 18px 38px rgba(9, 46, 118, .2) !important;
}

html body.teacher-reference-page .teacher-profile-school-picker .teacher-school-option {
    display: grid !important;
    width: 100% !important;
    gap: 3px !important;
    padding: 11px 12px !important;
    border: 0 !important;
    border-radius: 12px !important;
    color: #102e72 !important;
    background: transparent !important;
    text-align: left !important;
    cursor: pointer !important;
}

html body.teacher-reference-page .teacher-profile-school-picker .teacher-school-option:hover,
html body.teacher-reference-page .teacher-profile-school-picker .teacher-school-option:focus-visible {
    background: #edf6ff !important;
}

html body.teacher-reference-page .teacher-profile-school-picker .teacher-school-option strong {
    font-size: 14px !important;
    line-height: 1.25 !important;
}

html body.teacher-reference-page .teacher-profile-school-picker .teacher-school-option span {
    color: #5f72a3 !important;
    font-size: 12px !important;
}

html body.teacher-reference-page .teacher-profile-actions .teacher-profile-manage-button,
html body.teacher-reference-page .teacher-management-back {
    min-height: 52px !important;
    padding: 0 20px !important;
    border-radius: 16px !important;
    font-size: 16px !important;
    font-weight: 950 !important;
}

html body.teacher-reference-page .teacher-profile-actions .teacher-profile-manage-button {
    color: #fff !important;
    background: linear-gradient(135deg, #1768ff 0%, #26c3f2 100%) !important;
    box-shadow: 0 12px 26px rgba(23, 104, 255, .22) !important;
}

html body.teacher-reference-page .teacher-management-back {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 0 14px !important;
    border: 1px solid #b9d4ff !important;
    color: #0d3c91 !important;
    background: #eef7ff !important;
    cursor: pointer !important;
}

@media (max-width: 640px) {
    html body.teacher-reference-page.teacher-reference-class .teacher-app-header__profile,
    html body.teacher-reference-page.teacher-reference-dashboard .teacher-app-header__profile {
        top: 18px !important;
        right: 14px !important;
        display: inline-flex !important;
        max-width: 132px !important;
        min-height: 48px !important;
        padding: 5px 8px 5px 5px !important;
        align-items: center !important;
        gap: 7px !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    html body.teacher-reference-page.teacher-reference-class .teacher-app-header__profile div,
    html body.teacher-reference-page.teacher-reference-dashboard .teacher-app-header__profile div {
        display: grid !important;
        min-width: 0 !important;
    }

    html body.teacher-reference-page.teacher-reference-class .teacher-app-header__profile strong,
    html body.teacher-reference-page.teacher-reference-dashboard .teacher-app-header__profile strong {
        max-width: 70px !important;
        overflow: hidden !important;
        font-size: 11px !important;
        line-height: 1.1 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html body.teacher-reference-page.teacher-reference-class .teacher-app-header__profile .teacher-profile-edit,
    html body.teacher-reference-page.teacher-reference-dashboard .teacher-app-header__profile .teacher-profile-edit {
        display: inline-flex !important;
        max-width: 78px !important;
        min-height: 18px !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #fff !important;
        font-size: 10px !important;
        line-height: 1.1 !important;
        text-decoration: none !important;
    }

    html body.teacher-reference-page .teacher-profile-form__grid,
    html body.teacher-reference-page .teacher-profile-password > div,
    html body.teacher-reference-page .teacher-profile-grades > div {
        grid-template-columns: 1fr !important;
    }

    html body.teacher-reference-page .teacher-profile-actions .teacher-button,
    html body.teacher-reference-page .teacher-profile-actions .teacher-profile-manage-button,
    html body.teacher-reference-page .teacher-management-back {
        width: 100% !important;
    }
}