:root {
    --ra-blue: #0EA5E9;
    --ra-blue-dark: #087BC7;
    --ra-teal: #14B8A6;
    --ra-cyan: #22D3EE;
    --ra-yellow: #FFD54F;
    --ra-gold: #FFB000;
    --ra-coral: #FF6B6B;
    --ra-purple: #8B5CF6;
    --ra-bg: #F2FAFF;
    --ra-navy: #082A63;
    --ra-muted: #345779;
    --ra-line: #D7EAF5;
    --ra-shadow: 0 10px 24px rgba(22, 91, 132, .16);
    --ra-shadow-strong: 0 18px 38px rgba(11, 83, 130, .22);
}

.robo-arena,
.robo-arena *,
.robo-arena *::before,
.robo-arena *::after {
    box-sizing: border-box;
}

html {
    min-width: 0;
    scroll-behavior: smooth;
}

.robo-arena {
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    color: var(--ra-navy);
    background: #EAF8FD;
    font-family: "Arial Rounded MT Bold", "Trebuchet MS", Arial, sans-serif;
    letter-spacing: 0;
}

.robo-arena img {
    display: block;
    max-width: 100%;
}

.robo-arena button,
.robo-arena a {
    color: inherit;
    font: inherit;
}

.robo-arena button {
    cursor: pointer;
}

.robo-arena h1,
.robo-arena h2,
.robo-arena h3,
.robo-arena p {
    margin: 0;
}

.robo-arena button:focus-visible,
.robo-arena a:focus-visible,
.robo-arena [tabindex="0"]:focus-visible {
    outline: 3px solid var(--ra-yellow);
    outline-offset: 3px;
}

.ra-skip-link {
    position: fixed;
    z-index: 100;
    top: 10px;
    left: 10px;
    padding: 10px 14px;
    color: #fff;
    background: var(--ra-navy);
    border-radius: 6px;
    clip-path: inset(100%);
}

.ra-skip-link:focus {
    clip-path: none;
}

.ra-preview-header {
    width: 100%;
    padding: 34px max(24px, calc((100vw - 1280px) / 2));
    overflow: hidden;
    color: #fff;
    background: linear-gradient(110deg, #0758B8 0%, #0EA5E9 56%, #14B8A6 100%);
    border-bottom: 6px solid var(--ra-yellow);
}

.ra-preview-header p {
    margin-bottom: 8px;
    color: #DFF9FF;
    font-size: 13px;
    font-weight: 900;
}

.ra-preview-header h1 {
    max-width: 100%;
    font-size: 34px;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.ra-preview-main {
    width: min(100%, 1320px);
    margin: 0 auto;
    padding: 34px 20px 80px;
}

.ra-preview-section {
    padding: 34px 0 46px;
    border-bottom: 1px solid #CBE5F2;
}

.ra-section-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
}

.ra-section-heading > span {
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    color: #fff;
    background: #087BC7;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 900;
}

.ra-section-heading h2 {
    font-size: 23px;
    line-height: 1.15;
}

.ra-stage,
.ra-fixed-canvas {
    width: 100%;
    padding: 22px;
    overflow-x: auto;
    background:
        linear-gradient(120deg, rgba(255, 213, 79, .2), transparent 32%),
        linear-gradient(300deg, rgba(34, 211, 238, .22), transparent 38%),
        #F8FDFF;
    border-top: 1px solid #CDE6F2;
    border-bottom: 1px solid #CDE6F2;
}

.ra-stage {
    display: flex;
    justify-content: center;
}

.ra-comparison-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(570px, 1fr));
    gap: 28px;
    align-items: start;
}

.ra-comparison-panel {
    min-width: 0;
}

.ra-comparison-panel > h3,
.ra-catalog-group > h3 {
    margin-bottom: 14px;
    color: #0753B7;
    font-size: 14px;
    font-weight: 950;
}

.ra-fixed-canvas > * {
    margin-right: auto;
    margin-left: auto;
}

.ra-reference-window {
    position: relative;
    flex: 0 0 auto;
    overflow: hidden;
    background: #fff;
    box-shadow: var(--ra-shadow-strong);
}

.ra-reference-window--arena {
    width: 490px;
    height: 580px;
    border-radius: 40px;
}

.ra-reference-window--game {
    width: 558px;
    height: 354px;
    border: 6px solid #D9EDF6;
    border-radius: 34px;
}

.ra-reference-stack {
    position: absolute;
}

.ra-reference-stack img {
    display: block;
    width: auto;
    max-width: none;
    height: auto;
}

.ra-reference-stack--arena {
    top: -18px;
    left: -28px;
    width: 546px;
    height: 620px;
}

.ra-reference-stack--arena img {
    width: 546px;
}

.ra-reference-stack--game {
    top: -9px;
    left: 0;
    width: 546px;
    height: 372px;
}

.ra-reference-stack--game img {
    width: 546px;
}

.ra-start-screen {
    position: relative;
    flex: 0 0 auto;
    width: 390px;
    height: 844px;
    overflow: hidden;
    text-align: center;
    background:
        linear-gradient(180deg, rgba(255, 213, 79, .18), transparent 24%),
        linear-gradient(0deg, rgba(34, 211, 238, .22), transparent 38%),
        #F8FDFF;
    border: 8px solid #D8EEF8;
    border-radius: 34px;
    box-shadow: var(--ra-shadow-strong);
}

.ra-start-screen__logo {
    position: absolute;
    top: 42px;
    left: 57px;
    width: 260px;
    height: 260px;
    overflow: hidden;
}

.ra-start-screen__logo img {
    position: absolute;
    right: 5px;
    bottom: 0;
    width: 250px;
    height: 285px;
    max-width: none;
    object-fit: cover;
    object-position: center bottom;
}

.ra-start-screen__mentor {
    position: absolute;
    top: 326px;
    left: 82px;
    width: 210px;
    height: 300px;
    overflow: hidden;
}

.ra-start-screen__mentor img {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 210px;
    height: 315px;
    max-width: none;
    object-fit: cover;
    object-position: center bottom;
}

.ra-start-screen > strong {
    position: absolute;
    right: 24px;
    bottom: 126px;
    left: 24px;
    font-size: 22px;
    line-height: 1.1;
}

.ra-start-screen__actions {
    position: absolute;
    right: 20px;
    bottom: 25px;
    left: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px;
}

.ra-button {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border: 0;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 950;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 7px 14px rgba(8, 85, 142, .15);
}

.ra-button--primary {
    color: #fff;
    background: linear-gradient(180deg, #22C8F1, #078CDE);
}

.ra-button--secondary {
    color: #fff;
    background: linear-gradient(180deg, #32D3C6, #0FAE9D);
}

.ra-button--reward {
    color: var(--ra-navy);
    background: linear-gradient(180deg, #FFE270, #FFB000);
}

.ra-button--outline {
    color: #087BC7;
    background: #fff;
    border: 2px solid #21AEEB;
    box-shadow: none;
}

.ra-button:hover,
.ra-action-card:hover,
.ra-answer-grid button:hover,
.ra-keypad button:hover {
    filter: brightness(1.04);
}

.ra-button:active,
.ra-action-card:active,
.ra-answer-grid button:active,
.ra-keypad button:active {
    filter: brightness(.94);
}

.ra-arena-screen {
    width: 490px;
    height: 580px;
    padding: 8px;
    overflow: hidden;
    background: linear-gradient(145deg, #D7EFF9, #FFFFFF);
    border-radius: 40px;
    box-shadow: var(--ra-shadow-strong);
}

.ra-arena-screen__inner {
    display: grid;
    grid-template-rows: 70px 416px 78px;
    width: 474px;
    height: 564px;
    overflow: hidden;
    background: #F3FBFF;
    border-radius: 33px;
}

.ra-arena-header {
    display: grid;
    grid-template-columns: 58px 1fr 48px;
    align-items: center;
    padding: 7px 14px;
    color: #fff;
    background: linear-gradient(135deg, #18B7E8, #0789DE);
}

.ra-arena-header__mentor {
    position: relative;
    display: block;
    width: 48px;
    height: 48px;
    overflow: hidden;
    background: rgba(255, 255, 255, .94);
    border: 2px solid rgba(255, 255, 255, .75);
    border-radius: 50%;
}

.ra-arena-header__mentor img {
    position: absolute;
    top: -4px;
    left: 1px;
    width: 45px;
    height: 68px;
    max-width: none;
    object-fit: cover;
    object-position: center bottom;
}

.ra-arena-header h3 {
    color: #fff;
    font-size: 20px;
    text-align: center;
}

.ra-arena-header button,
.ra-game-hud button {
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
}

.ra-arena-header button {
    justify-self: end;
    width: 44px;
    height: 44px;
    background: #087DCB;
    border: 2px solid rgba(255, 255, 255, .52);
}

.ra-arena-header button img {
    width: 24px;
    height: 24px;
}

.ra-arena-content {
    display: grid;
    grid-template-rows: 105px 70px 117px 60px;
    gap: 12px;
    height: 416px;
    padding: 14px;
    overflow: hidden;
}

.ra-profile-card {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr) 82px;
    align-items: center;
    gap: 11px;
    padding: 9px 11px;
    background: #fff;
    border: 1px solid #CDEAF7;
    border-radius: 19px;
    box-shadow: 0 7px 16px rgba(15, 83, 126, .12);
}

.ra-profile-card__avatar {
    display: grid;
    place-items: center;
    width: 70px;
    height: 70px;
    background: #DFF9FF;
    border: 4px solid #18B7E8;
    border-radius: 50%;
}

.ra-profile-card__avatar img {
    width: 54px;
    height: 54px;
}

.ra-profile-card__data {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.ra-profile-card__data > strong {
    font-size: 16px;
}

.ra-profile-card__data small,
.ra-profile-card__energy small {
    font-family: Arial, sans-serif;
    font-size: 9px;
    font-weight: 800;
}

.ra-profile-card__energy {
    display: grid;
    grid-template-columns: 26px 1fr;
    align-items: center;
    gap: 1px 5px;
    padding: 8px;
    background: #F8FDFF;
    border: 1px solid #D4E8F2;
    border-radius: 15px;
}

.ra-profile-card__energy img {
    grid-row: 1 / 3;
    width: 25px;
    height: 34px;
}

.ra-profile-card__energy strong {
    font-size: 16px;
}

.ra-progress {
    height: 10px;
    overflow: hidden;
    background: #E6F0F5;
    border: 1px solid #B8D3DF;
    border-radius: 999px;
}

.ra-progress > span {
    display: block;
    height: 100%;
    color: #fff;
    background: linear-gradient(90deg, var(--ra-yellow), var(--ra-gold));
    border-radius: inherit;
    font-size: 10px;
    font-weight: 900;
    line-height: 22px;
    text-align: center;
}

.ra-progress--xp {
    height: 9px;
}

.ra-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
}

.ra-stat-grid article {
    display: grid;
    grid-template-columns: 32px 1fr;
    grid-template-rows: 1fr 1fr;
    align-items: center;
    column-gap: 6px;
    padding: 7px 9px;
    background: #fff;
    border: 1px solid #DBEAF1;
    border-radius: 16px;
    box-shadow: 0 6px 13px rgba(15, 83, 126, .1);
}

.ra-stat-grid article > span {
    grid-row: 1 / 3;
    display: grid;
    place-items: center;
    width: 31px;
    height: 31px;
    background: #FFF2B3;
    border-radius: 50%;
}

.ra-stat-grid img {
    width: 21px;
    height: 21px;
}

.ra-stat-grid strong {
    align-self: end;
    font-size: 16px;
}

.ra-stat-grid small {
    align-self: start;
    font-size: 8px;
    white-space: nowrap;
}

.ra-action-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
}

.ra-action-card {
    display: grid;
    grid-template-rows: 84px 31px;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    color: var(--ra-navy);
    background: #fff;
    border: 1px solid #D6EAF3;
    border-radius: 17px;
    box-shadow: 0 7px 15px rgba(15, 83, 126, .12);
    text-align: center;
    text-decoration: none;
}

.ra-action-card--play {
    color: #fff;
    background: linear-gradient(145deg, #18C7F2, #0797E5);
    border-color: #00AEEF;
}

.ra-action-card--reward {
    background: #E8FAFF;
}

.ra-action-card img {
    width: 100%;
    height: 84px;
    object-fit: contain;
}

.ra-action-card strong {
    align-self: center;
    font-size: 12px;
}

.ra-weekly-card {
    display: grid;
    grid-template-columns: 31px minmax(0, 1fr) 50px 54px;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid #D6EAF3;
    border-radius: 17px;
    box-shadow: 0 6px 13px rgba(15, 83, 126, .1);
}

.ra-weekly-card__star {
    width: 28px;
    height: 28px;
}

.ra-weekly-card > div {
    display: grid;
    gap: 5px;
}

.ra-weekly-card strong {
    font-size: 11px;
}

.ra-weekly-card small {
    font-size: 9px;
    font-weight: 900;
    white-space: nowrap;
}

.ra-weekly-card__chest {
    width: 54px;
    height: 44px;
    object-fit: contain;
}

.ra-bottom-nav {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: end;
    height: 78px;
    padding: 8px 9px 6px;
    background: rgba(255, 255, 255, .97);
    border-top: 1px solid #CFE5F0;
    box-shadow: 0 -5px 14px rgba(15, 83, 126, .08);
}

.ra-bottom-nav a {
    position: relative;
    display: grid;
    min-width: 0;
    justify-items: center;
    gap: 5px;
    color: #526D86;
    font-size: 8px;
    font-weight: 900;
    text-decoration: none;
}

.ra-bottom-nav > a > img {
    width: 25px;
    height: 25px;
}

.ra-bottom-nav a.is-active {
    color: #0787DC;
}

.ra-bottom-nav a.is-active::after {
    width: 23px;
    height: 3px;
    content: "";
    background: #0787DC;
    border-radius: 999px;
}

.ra-bottom-nav__play {
    margin-top: -28px;
    color: #0753B7 !important;
}

.ra-bottom-nav__play > span {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    overflow: hidden;
    background: #E9FAFF;
    border: 5px solid #fff;
    border-radius: 50%;
    box-shadow: 0 5px 14px rgba(8, 113, 178, .25);
}

.ra-bottom-nav__play img {
    width: 74px;
    height: 52px;
    max-width: none;
    object-fit: contain;
}

.ra-bottom-nav__play strong {
    font-size: 9px;
}

.ra-game-screen {
    width: 558px;
    height: 354px;
    padding: 6px;
    overflow: hidden;
    background: #D7ECF7;
    border-radius: 34px;
    box-shadow: var(--ra-shadow-strong);
}

.ra-game-screen__inner {
    position: relative;
    width: 546px;
    height: 342px;
    overflow: hidden;
    background:
        linear-gradient(rgba(4, 87, 185, .08), rgba(0, 100, 210, .2)),
        url("../images/robo-arena/game-arena-premium-background.png") center 64% / cover no-repeat;
    border-radius: 28px;
}

.ra-game-screen__inner::after {
    position: absolute;
    inset: 50px 0 0;
    z-index: 1;
    content: "";
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(7, 119, 213, .3), transparent 17%, transparent 83%, rgba(7, 119, 213, .3)),
        linear-gradient(180deg, rgba(29, 201, 244, .02), rgba(0, 78, 191, .18));
}

.ra-game-hud {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: 34px 88px minmax(0, 1fr) 66px 43px;
    align-items: center;
    gap: 5px;
    height: 50px;
    padding: 5px 8px;
    color: #fff;
    background: linear-gradient(180deg, rgba(12, 91, 196, .96), rgba(8, 128, 218, .9));
}

.ra-game-hud button {
    width: 34px;
    height: 34px;
    background: #0A7DD1;
    border: 1px solid rgba(255, 255, 255, .5);
}

.ra-game-hud button img {
    width: 19px;
    height: 19px;
}

.ra-game-level,
.ra-game-score,
.ra-game-lives {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    font-size: 11px;
}

.ra-game-level img {
    width: 24px;
    height: 28px;
}

.ra-game-score,
.ra-game-lives {
    height: 32px;
    color: var(--ra-navy);
    background: rgba(255, 255, 255, .96);
    border-radius: 15px;
}

.ra-game-score img,
.ra-game-lives img {
    width: 20px;
    height: 20px;
}

.ra-game-steps {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 2px;
    min-width: 0;
}

.ra-game-steps span {
    height: 13px;
    background: #1475B8;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 50%;
}

.ra-game-steps span.is-complete {
    background: #22D3C5;
    box-shadow: inset 0 0 0 2px #E6FFFF;
}

.ra-game-steps span.is-current {
    background: #FFD54F;
    box-shadow: inset 0 0 0 2px #FFF8C5;
}

.ra-game-mentor {
    position: absolute;
    z-index: 4;
    top: 74px;
    left: 15px;
    width: 118px;
    height: 178px;
    overflow: hidden;
}

.ra-game-mentor img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
    object-position: center center;
    filter: saturate(1.08) contrast(1.03) drop-shadow(0 8px 9px rgba(5, 47, 95, .25));
}

.ra-question-card {
    position: absolute;
    z-index: 3;
    top: 61px;
    left: 130px;
    display: grid;
    place-items: center;
    width: 398px;
    height: 108px;
    background: rgba(255, 255, 255, .98);
    border: 1px solid #D8EAF2;
    border-radius: 22px;
    box-shadow: 0 9px 18px rgba(3, 51, 109, .18);
}

.ra-question-card strong {
    font-size: 50px;
    line-height: 1;
}

.ra-answer-grid {
    position: absolute;
    z-index: 4;
    top: 182px;
    left: 128px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    width: 400px;
    height: 68px;
}

.ra-answer-grid button {
    min-width: 0;
    color: var(--ra-navy);
    background: #fff;
    border: 2px solid rgba(255, 255, 255, .75);
    border-radius: 15px;
    box-shadow: 0 7px 14px rgba(3, 51, 109, .22);
    font-size: 27px;
    font-weight: 950;
}

.ra-game-energy {
    position: absolute;
    z-index: 5;
    bottom: 14px;
    left: 20px;
    display: flex;
    align-items: center;
    gap: 3px;
    height: 31px;
    padding: 4px 9px 4px 5px;
    background: rgba(4, 75, 157, .84);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
}

.ra-game-energy img {
    width: 26px;
    height: 28px;
    margin-right: 2px;
}

.ra-game-energy span {
    width: 21px;
    height: 11px;
    background: #2588C4;
    border: 1px solid #0B5F9E;
    border-radius: 4px;
}

.ra-game-energy span.is-full {
    background: linear-gradient(180deg, #FFD94B, #FFB000);
    border-color: #FFCB22;
}

.ra-hint-button {
    position: absolute;
    z-index: 5;
    right: 19px;
    bottom: 10px;
    display: flex;
    width: 126px;
    height: 42px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #fff;
    background: linear-gradient(180deg, #B56AF6, #8250DE);
    border: 2px solid rgba(255, 255, 255, .42);
    border-radius: 13px;
    box-shadow: 0 7px 12px rgba(52, 29, 126, .3);
    font-size: 11px;
    font-weight: 950;
}

.ra-hint-button img {
    width: 22px;
    height: 22px;
}

.ra-catalog-group {
    margin-top: 28px;
}

.ra-badge-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(112px, 1fr));
    gap: 14px;
}

.ra-badge-grid article {
    display: grid;
    min-height: 164px;
    justify-items: center;
    align-content: center;
    gap: 8px;
    padding: 12px;
    background: #fff;
    border: 1px solid #D5EAF3;
    border-radius: 8px;
    box-shadow: 0 6px 14px rgba(15, 83, 126, .1);
}

.ra-badge-grid img {
    width: 88px;
    height: 108px;
    object-fit: contain;
}

.ra-badge-grid strong {
    font-size: 11px;
    text-align: center;
}

.ra-catalog-layout {
    display: grid;
    grid-template-columns: 240px minmax(420px, 1fr) 260px;
    gap: 24px;
    align-items: start;
}

.ra-button-stack {
    display: grid;
    gap: 12px;
}

.ra-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(120px, 1fr));
    gap: 12px;
}

.ra-demo-card {
    display: grid;
    min-height: 220px;
    justify-items: center;
    align-content: start;
    gap: 12px;
    padding: 20px 15px;
    background: #fff;
    border: 1px solid #D7E7EF;
    border-radius: 8px;
    box-shadow: 0 6px 14px rgba(15, 83, 126, .1);
    text-align: center;
}

.ra-demo-card.is-active {
    background: #EBFAFF;
    border: 2px solid #22B9EF;
}

.ra-demo-card.is-locked {
    color: #5D7386;
    background: #EEF3F6;
}

.ra-demo-card img {
    width: 62px;
    height: 62px;
}

.ra-demo-card strong {
    font-size: 12px;
}

.ra-demo-card p {
    color: var(--ra-muted);
    font-family: Arial, sans-serif;
    font-size: 12px;
    line-height: 1.45;
}

.ra-catalog-progress {
    display: grid;
    grid-template-columns: 1fr 42px;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.ra-catalog-progress > img {
    width: 38px;
    height: 38px;
}

.ra-progress--large {
    height: 25px;
}

.ra-keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    padding: 10px;
    background: #EFF8FC;
    border: 1px solid #D3E8F1;
    border-radius: 8px;
}

.ra-keypad button {
    min-height: 52px;
    color: var(--ra-navy);
    background: #fff;
    border: 1px solid #D2E2E9;
    border-radius: 7px;
    box-shadow: 0 4px 8px rgba(15, 83, 126, .11);
    font-size: 22px;
    font-weight: 950;
}

.ra-keypad button.is-delete {
    color: #fff;
    background: #159DDD;
}

.ra-keypad button.is-confirm {
    color: #fff;
    background: var(--ra-teal);
}

.ra-original-strip {
    display: flex;
    width: 100%;
    max-width: 100%;
    align-items: flex-start;
    gap: 16px;
    padding: 18px;
    overflow-x: auto;
    background: #fff;
    border-top: 1px solid #D7EAF5;
    border-bottom: 1px solid #D7EAF5;
}

.ra-original-strip img {
    flex: 0 0 auto;
    width: auto;
    height: auto;
    max-width: none;
}

@media (max-width: 1199px) {
    .ra-comparison-grid {
        grid-template-columns: 1fr;
    }

    .ra-catalog-layout {
        grid-template-columns: 1fr 1fr;
    }

    .ra-catalog-layout .ra-catalog-group:last-child {
        grid-column: 1 / -1;
        max-width: 420px;
    }

    .ra-badge-grid {
        grid-template-columns: repeat(3, minmax(112px, 1fr));
    }
}

@media (max-width: 700px) {
    .ra-preview-header {
        padding: 28px 18px;
    }

    .ra-preview-header h1 {
        font-size: 28px;
    }

    .ra-preview-main {
        padding: 18px 12px 56px;
    }

    .ra-preview-section {
        padding: 28px 0 38px;
    }

    .ra-section-heading {
        align-items: flex-start;
    }

    .ra-section-heading h2 {
        padding-top: 7px;
        font-size: 19px;
    }

    .ra-stage,
    .ra-fixed-canvas {
        padding: 14px 10px;
    }

    .ra-stage {
        justify-content: flex-start;
    }

    .ra-fixed-canvas > * {
        margin-left: 0;
    }

    .ra-start-screen {
        width: min(390px, calc(100vw - 44px));
    }

    .ra-catalog-layout,
    .ra-card-grid {
        grid-template-columns: 1fr;
    }

    .ra-catalog-layout .ra-catalog-group:last-child {
        grid-column: auto;
        max-width: none;
    }

    .ra-badge-grid {
        grid-template-columns: repeat(2, minmax(112px, 1fr));
    }

    .ra-arena-screen {
        width: min(490px, calc(100vw - 44px));
    }

    .ra-arena-screen__inner {
        width: 100%;
    }

    .ra-arena-header {
        grid-template-columns: 50px 1fr 44px;
        padding-inline: 9px;
    }

    .ra-arena-header h3 {
        font-size: 18px;
    }

    .ra-profile-card {
        grid-template-columns: 60px minmax(0, 1fr) 70px;
        gap: 6px;
        padding-inline: 7px;
    }

    .ra-profile-card__avatar {
        width: 56px;
        height: 56px;
    }

    .ra-profile-card__avatar img {
        width: 43px;
        height: 43px;
    }

    .ra-profile-card__energy {
        grid-template-columns: 20px 1fr;
        padding: 6px;
    }

    .ra-profile-card__energy img {
        width: 20px;
        height: 29px;
    }

    .ra-stat-grid {
        gap: 5px;
    }

    .ra-stat-grid article {
        grid-template-columns: 25px 1fr;
        column-gap: 4px;
        padding: 6px 4px;
    }

    .ra-stat-grid article > span {
        width: 24px;
        height: 24px;
    }

    .ra-stat-grid img {
        width: 17px;
        height: 17px;
    }

    .ra-stat-grid small {
        font-size: 7px;
    }

    .ra-action-grid {
        gap: 5px;
    }

    .ra-weekly-card {
        grid-template-columns: 25px minmax(0, 1fr) 43px 45px;
        gap: 5px;
        padding-inline: 7px;
    }

    .ra-weekly-card__chest {
        width: 45px;
    }

    .ra-bottom-nav {
        padding-inline: 4px;
    }

    .ra-bottom-nav__play > span {
        width: 56px;
        height: 56px;
    }

    .ra-game-screen {
        width: min(558px, calc(100vw - 44px));
        height: auto;
        aspect-ratio: 558 / 354;
        padding: 4px;
    }

    .ra-game-screen__inner {
        width: 100%;
        height: 100%;
    }

    .ra-game-hud {
        grid-template-columns: 30px 70px minmax(0, 1fr) 54px 37px;
        gap: 3px;
        height: 44px;
        padding: 4px;
    }

    .ra-game-hud button {
        width: 30px;
        height: 30px;
    }

    .ra-game-level,
    .ra-game-score,
    .ra-game-lives {
        font-size: 9px;
    }

    .ra-game-level img {
        width: 19px;
        height: 23px;
    }

    .ra-game-steps span {
        height: 10px;
    }

    .ra-game-mentor {
        top: 22%;
        left: 2.5%;
        width: 22%;
        height: 52%;
    }

    .ra-question-card {
        top: 18%;
        left: 24%;
        width: 72%;
        height: 31%;
    }

    .ra-question-card strong {
        font-size: 32px;
    }

    .ra-answer-grid {
        top: 54%;
        left: 24%;
        width: 72%;
        height: 20%;
        gap: 5px;
    }

    .ra-answer-grid button {
        font-size: 20px;
    }

    .ra-game-energy {
        bottom: 6px;
        left: 10px;
        height: 26px;
        padding-right: 6px;
    }

    .ra-game-energy img {
        width: 21px;
        height: 23px;
    }

    .ra-game-energy span {
        width: 14px;
        height: 8px;
    }

    .ra-hint-button {
        right: 9px;
        bottom: 6px;
        width: 112px;
        height: 33px;
        font-size: 9px;
    }

    .ra-hint-button img {
        width: 17px;
        height: 17px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* Phase 2 live page: core */
body.robo-arena-page {
    min-width: 0;
    margin: 0;
    overflow-x: hidden;
    background: linear-gradient(180deg, #f8fdff, #eaf8fc 52%, #f7fbff);
}
body.robo-arena-page .robo-arena {
    min-width: 0;
    min-height: 100vh;
    background: repeating-linear-gradient(90deg, rgba(34, 211, 238, .045) 0 1px, transparent 1px 72px);
}
body.robo-arena-page.premium-shell .ra-live-page::before { display: none; }
.robo-arena .ra-live-page {
    display: grid;
    width: min(100%, 1080px);
    min-width: 0;
    gap: 24px;
    margin: 0 auto;
    padding: 24px 20px 40px;
}
.robo-arena .ra-live-page > * { min-width: 0; }
.robo-arena .ra-live-page > .form-message { width: 100%; margin: 0; }
.robo-arena .ra-live-arena {
    width: 100%;
    min-width: 0;
    overflow: hidden;
    color: var(--ra-navy);
    background: #eaf8fd;
    border: 1px solid #b9dfe9;
    border-radius: 8px;
    box-shadow: 0 22px 48px rgba(12, 76, 121, .18);
}
.robo-arena .ra-live-header {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr) 48px;
    min-height: 78px;
    align-items: center;
    gap: 12px;
    padding: 7px 16px;
    color: #fff;
    background: linear-gradient(135deg, #0ea5e9, #148ba6 68%, #14b8a6);
}
.robo-arena .ra-live-header__mentor {
    display: grid;
    width: 68px;
    height: 68px;
    place-items: center;
    align-self: end;
    overflow: hidden;
}
.robo-arena .ra-live-header__mentor img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    object-position: center bottom;
}
.robo-arena .ra-live-header h1 {
    min-width: 0;
    color: #fff;
    font-size: 1.45rem;
    line-height: 1.1;
    text-align: center;
    overflow-wrap: anywhere;
}
.robo-arena .ra-live-icon-link {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    background: rgba(255, 255, 255, .18);
    border: 2px solid rgba(255, 255, 255, .82);
    border-radius: 50%;
}
.robo-arena .ra-live-icon-link img {
    width: 25px;
    height: 25px;
    filter: brightness(0) invert(1);
}
.robo-arena .ra-live-icon-link:hover,
.robo-arena .ra-live-icon-link:active { background: rgba(255, 213, 64, .32); }
.robo-arena .ra-live-content {
    display: grid;
    min-width: 0;
    gap: 12px;
    padding: 14px 16px 16px;
}
.robo-arena .ra-live-profile {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) 108px;
    min-width: 0;
    align-items: center;
    gap: 14px;
    min-height: 116px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #d3e8ef;
    border-radius: 8px;
    box-shadow: 0 8px 18px rgba(15, 83, 126, .1);
}
.robo-arena .ra-live-profile__avatar {
    display: grid;
    width: 84px;
    height: 84px;
    place-items: center;
    overflow: hidden;
    background: #dff8fd;
    border: 3px solid #15ace4;
    border-radius: 50%;
}
.robo-arena .ra-live-profile__avatar img {
    width: 78px;
    height: 78px;
    object-fit: contain;
}
.robo-arena .ra-live-profile__data {
    display: grid;
    min-width: 0;
    gap: 4px;
}
.robo-arena .ra-live-profile__data > strong {
    min-width: 0;
    font-size: 1.22rem;
    line-height: 1.15;
    overflow-wrap: anywhere;
}
.robo-arena .ra-live-profile__data > span,
.robo-arena .ra-live-profile__data > small,
.robo-arena .ra-live-profile__accuracy small {
    color: #476377;
    font-size: .72rem;
    font-weight: 900;
    line-height: 1.25;
}
.robo-arena .ra-live-profile__data > span,
.robo-arena .ra-live-profile__accuracy small { color: #083f77; }
.robo-arena .ra-live-progress {
    width: 100%;
    height: 13px;
    overflow: hidden;
    background: #e7eef2;
    border: 1px solid #c7d9e1;
    border-radius: 999px;
}
.robo-arena .ra-live-progress i {
    display: block;
    height: 100%;
    max-width: 100%;
    background: linear-gradient(180deg, #ffd94b, #ffb000);
    border-radius: inherit;
}
.robo-arena .ra-live-profile__accuracy {
    display: grid;
    min-width: 0;
    justify-items: center;
    align-content: center;
    gap: 1px;
    padding-left: 10px;
    border-left: 1px solid #d7e7ee;
    text-align: center;
}
.robo-arena .ra-live-profile__accuracy img {
    width: 54px;
    height: 54px;
    object-fit: contain;
}
.robo-arena .ra-live-profile__accuracy strong { font-size: 1.05rem; line-height: 1; }
.robo-arena .ra-live-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-width: 0;
    gap: 10px;
}
.robo-arena .ra-live-stats article {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    grid-template-rows: auto auto;
    min-width: 0;
    align-items: center;
    column-gap: 10px;
    min-height: 72px;
    padding: 9px 14px;
    background: #fff;
    border: 1px solid #d5e8ef;
    border-radius: 8px;
}
.robo-arena .ra-live-stats article > span {
    display: grid;
    grid-row: 1 / 3;
    width: 44px;
    height: 44px;
    place-items: center;
    background: #fff8d8;
    border: 1px solid #ffe16c;
    border-radius: 50%;
}
.robo-arena .ra-live-stats article:nth-child(2) > span {
    background: #e6f9ff;
    border-color: #90dcf3;
}
.robo-arena .ra-live-stats img { width: 30px; height: 30px; object-fit: contain; }
.robo-arena .ra-live-stats strong {
    min-width: 0;
    align-self: end;
    font-size: 1.35rem;
    line-height: 1;
    overflow-wrap: anywhere;
}
.robo-arena .ra-live-stats small {
    align-self: start;
    color: #163f69;
    font-size: .66rem;
    font-weight: 950;
}
.robo-arena .ra-live-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-width: 0;
    gap: 10px;
}
.robo-arena .ra-live-action {
    display: grid;
    min-width: 0;
    min-height: 158px;
    justify-items: center;
    align-content: center;
    gap: 6px;
    padding: 10px;
    color: var(--ra-navy);
    background: #fff;
    border: 1px solid #cee4ed;
    border-radius: 8px;
    box-shadow: 0 8px 17px rgba(15, 83, 126, .11);
    text-align: center;
}
.robo-arena .ra-live-action.is-primary {
    color: #fff;
    background: linear-gradient(180deg, #22c8f2, #0e8fd1);
    border-color: #087fbf;
}
.robo-arena .ra-live-action.is-reward {
    background: #eefcff;
    border-color: #93dff0;
}
.robo-arena .ra-live-action img { width: 104px; height: 104px; object-fit: contain; }
.robo-arena .ra-live-action strong {
    min-width: 0;
    font-size: .84rem;
    line-height: 1.1;
    overflow-wrap: anywhere;
}
.robo-arena .ra-live-action:hover,
.robo-arena .ra-live-action:active {
    border-color: #0ea5e9;
    box-shadow: 0 11px 24px rgba(14, 143, 209, .22);
}
.robo-arena .ra-live-goal {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto 72px;
    min-width: 0;
    align-items: center;
    gap: 10px;
    min-height: 76px;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid #d5e8ef;
    border-radius: 8px;
}
.robo-arena .ra-live-goal__star { width: 34px; height: 34px; }
.robo-arena .ra-live-goal > div { display: grid; min-width: 0; gap: 5px; }
.robo-arena .ra-live-goal > div > strong { font-size: .82rem; }
.robo-arena .ra-live-goal > small {
    color: #153e68;
    font-size: .74rem;
    font-weight: 950;
    white-space: nowrap;
}
.robo-arena .ra-live-goal__chest { width: 68px; height: 58px; object-fit: contain; }
/* Phase 2 live page: navigation and modules */
.robo-arena .ra-live-bottom-nav {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    min-width: 0;
    align-items: stretch;
    gap: 2px;
    min-height: 82px;
    padding: 5px 7px;
    background: #fff;
    border-top: 1px solid #d4e8f0;
}
.robo-arena .ra-live-bottom-nav a {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 64px;
    place-items: center;
    align-content: center;
    gap: 4px;
    padding: 4px 2px;
    color: #45667f;
    border-radius: 8px;
    text-align: center;
}
.robo-arena .ra-live-bottom-nav a > img { width: 27px; height: 27px; object-fit: contain; }
.robo-arena .ra-live-bottom-nav a strong {
    width: 100%;
    font-size: .61rem;
    line-height: 1.1;
    overflow-wrap: anywhere;
}
.robo-arena .ra-live-bottom-nav a.is-active {
    color: #087ac0;
    background: #e7f8ff;
}
.robo-arena .ra-live-bottom-nav a.is-active::after {
    content: "";
    position: absolute;
    right: 27%;
    bottom: 1px;
    left: 27%;
    height: 3px;
    background: #0ea5e9;
    border-radius: 999px;
}
.robo-arena .ra-live-bottom-nav a.is-play { color: #0879bb; }
.robo-arena .ra-live-bottom-nav a.is-play > span {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    margin-top: -20px;
    background: #fff;
    border: 3px solid #14b8e8;
    border-radius: 50%;
    box-shadow: 0 7px 15px rgba(12, 116, 174, .18);
}
.robo-arena .ra-live-bottom-nav a.is-play img { width: 31px; height: 31px; }
.robo-arena .ra-live-bottom-nav a:hover,
.robo-arena .ra-live-bottom-nav a:active {
    color: #075f99;
    background: #eefaff;
}
.robo-arena .arena-plan-strip {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
    min-width: 0;
    align-items: center;
    gap: 18px;
    padding: 18px;
    background: #fff;
    border: 1px solid #cfe4eb;
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(15, 83, 126, .1);
}
.robo-arena .arena-plan-strip h2,
.robo-arena .arena-plan-strip p { margin: 4px 0 0; }
.robo-arena .arena-plan-strip p {
    color: #476377;
    font-weight: 750;
    line-height: 1.5;
}
.robo-arena .arena-plan-strip .status-pill {
    color: #076b88;
    background: #ddf8f6;
    border-color: #74d4ca;
}
.robo-arena .plan-focus-chip {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    min-width: 0;
    align-items: center;
    gap: 12px;
    min-height: 92px;
    padding: 10px 14px;
    color: #0d3459;
    background: #eefaff;
    border: 1px solid #a9ddea;
    border-radius: 8px;
}
.robo-arena .plan-focus-chip .ra-plan-art { width: 68px; height: 68px; object-fit: contain; }
.robo-arena .plan-focus-chip span {
    min-width: 0;
    font-weight: 900;
    line-height: 1.4;
    overflow-wrap: anywhere;
}
.robo-arena .ra-live-section-heading {
    display: grid;
    gap: 3px;
    padding: 2px 4px 0;
}
.robo-arena .ra-live-section-heading > span {
    color: #087da4;
    font-size: .74rem;
    font-weight: 950;
}
.robo-arena .ra-live-section-heading h2 { margin: 0; font-size: 1.55rem; }
.robo-arena .game-hub-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
    gap: 16px;
}
.robo-arena .game-module-card {
    display: grid;
    min-width: 0;
    gap: 12px;
    padding: 16px;
    overflow: hidden;
    color: var(--ra-navy);
    background: #fff;
    border: 1px solid #d0e5ec;
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(15, 83, 126, .1);
}
.robo-arena .game-module-card::before,
.robo-arena .game-module-card::after { display: none; }
.robo-arena .game-module-card.active {
    grid-column: 1 / -1;
    border-color: #70d2ea;
}
.robo-arena .module-world-tag {
    justify-self: start;
    color: #096b8e;
    background: #e4faff;
    border: 1px solid #a3dfed;
    border-radius: 999px;
}
.robo-arena .game-module-head {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr) auto;
    min-width: 0;
    align-items: center;
    gap: 14px;
}
.robo-arena .game-module-head .ra-module-art { width: 96px; height: 96px; object-fit: contain; }
.robo-arena .game-module-head > div { min-width: 0; }
.robo-arena .game-module-head h2 {
    margin: 3px 0 0;
    font-size: 1.35rem;
    overflow-wrap: anywhere;
}
.robo-arena .game-module-card > p { color: #476377; line-height: 1.5; }
.robo-arena .module-mission-line,
.robo-arena .locked-world-note {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    min-width: 0;
    align-items: center;
    gap: 10px;
    border-radius: 8px;
}
.robo-arena .module-mission-line img,
.robo-arena .locked-world-note img { width: 28px; height: 28px; object-fit: contain; }
.robo-arena .module-reward-ribbon {
    color: #8a4e00;
    background: #fff5c7;
    border-color: #ffd452;
    border-radius: 8px;
}
.robo-arena .game-module-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-width: 0;
    gap: 8px;
}
.robo-arena .game-module-stats span { min-width: 0; border-radius: 8px; }
.robo-arena .game-module-stats strong,
.robo-arena .game-module-stats small { overflow-wrap: anywhere; }
.robo-arena .game-module-actions,
.robo-arena .module-link-strip {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    gap: 8px;
}
.robo-arena .game-module-actions .btn,
.robo-arena .module-link-strip a { min-height: 44px; border-radius: 8px; }
.robo-arena .module-link-strip a {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    color: #08678f;
    background: #eefaff;
    border: 1px solid #b9e2ec;
    font-weight: 850;
    text-decoration: none;
}
.robo-arena .locked-world-note {
    color: #526a7a;
    background: #f1f5f7;
    border: 1px solid #d5e0e5;
}
.robo-arena .ra-live-utility {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-width: 0;
    gap: 10px;
}
.robo-arena .ra-live-utility a {
    display: grid;
    min-width: 0;
    min-height: 48px;
    place-items: center;
    padding: 8px;
    color: #0b5f83;
    background: #fff;
    border: 1px solid #bcdde6;
    border-radius: 8px;
    font-weight: 900;
    text-align: center;
    text-decoration: none;
    overflow-wrap: anywhere;
}
.robo-arena .ra-live-utility a:hover,
.robo-arena .ra-live-utility a:active {
    color: #063e61;
    background: #eafaff;
    border-color: #33b6d7;
}
.robo-arena .ra-live-action:focus-visible,
.robo-arena .ra-live-bottom-nav a:focus-visible,
.robo-arena .ra-live-icon-link:focus-visible,
.robo-arena .ra-live-utility a:focus-visible,
.robo-arena .module-link-strip a:focus-visible {
    outline: 4px solid #ffca3a;
    outline-offset: 2px;
}
/* Phase 2 live page: responsive */
@media (max-width: 760px) {
    .robo-arena .ra-live-page {
        gap: 18px;
        padding: 14px 10px 28px;
    }
    .robo-arena .ra-live-header {
        grid-template-columns: 62px minmax(0, 1fr) 44px;
        min-height: 68px;
        gap: 7px;
        padding: 5px 9px;
    }
    .robo-arena .ra-live-header__mentor { width: 58px; height: 60px; }
    .robo-arena .ra-live-header__mentor img { width: 56px; height: 56px; }
    .robo-arena .ra-live-header h1 { font-size: 1.16rem; }
    .robo-arena .ra-live-icon-link { width: 44px; height: 44px; }
    .robo-arena .ra-live-content { gap: 9px; padding: 10px; }
    .robo-arena .ra-live-profile {
        grid-template-columns: 72px minmax(0, 1fr) 84px;
        gap: 9px;
        min-height: 100px;
        padding: 9px;
    }
    .robo-arena .ra-live-profile__avatar { width: 66px; height: 66px; }
    .robo-arena .ra-live-profile__avatar img { width: 62px; height: 62px; }
    .robo-arena .ra-live-profile__data > strong { font-size: 1rem; }
    .robo-arena .ra-live-profile__data > span,
    .robo-arena .ra-live-profile__data > small { font-size: .64rem; }
    .robo-arena .ra-live-profile__accuracy { padding-left: 7px; }
    .robo-arena .ra-live-profile__accuracy img { width: 44px; height: 44px; }
    .robo-arena .ra-live-stats { gap: 7px; }
    .robo-arena .ra-live-stats article {
        grid-template-columns: 38px minmax(0, 1fr);
        column-gap: 7px;
        min-height: 62px;
        padding: 7px 9px;
    }
    .robo-arena .ra-live-stats article > span { width: 36px; height: 36px; }
    .robo-arena .ra-live-stats img { width: 25px; height: 25px; }
    .robo-arena .ra-live-stats strong { font-size: 1.05rem; }
    .robo-arena .ra-live-actions { gap: 7px; }
    .robo-arena .ra-live-action {
        min-height: 130px;
        gap: 3px;
        padding: 7px 4px;
    }
    .robo-arena .ra-live-action img { width: 78px; height: 78px; }
    .robo-arena .ra-live-action strong { font-size: .7rem; }
    .robo-arena .ra-live-goal {
        grid-template-columns: 30px minmax(0, 1fr) auto 56px;
        gap: 7px;
        min-height: 64px;
        padding: 7px 8px;
    }
    .robo-arena .ra-live-goal__star { width: 27px; height: 27px; }
    .robo-arena .ra-live-goal__chest { width: 54px; height: 48px; }
    .robo-arena .ra-live-bottom-nav { min-height: 76px; padding-inline: 3px; }
    .robo-arena .ra-live-bottom-nav a { min-height: 60px; }
    .robo-arena .ra-live-bottom-nav a strong { font-size: .55rem; }
    .robo-arena .arena-plan-strip,
    .robo-arena .game-hub-grid { grid-template-columns: 1fr; }
    .robo-arena .game-module-card.active { grid-column: auto; }
    .robo-arena .game-module-head {
        grid-template-columns: 82px minmax(0, 1fr);
    }
    .robo-arena .game-module-head .status-pill {
        grid-column: 2;
        justify-self: start;
    }
    .robo-arena .game-module-head .ra-module-art {
        grid-row: 1 / 3;
        width: 78px;
        height: 78px;
    }
}
@media (max-width: 520px) {
    .robo-arena .ra-live-page { padding-inline: 7px; }
    .robo-arena .ra-live-profile {
        grid-template-columns: 62px minmax(0, 1fr) 72px;
        gap: 6px;
        padding-inline: 7px;
    }
    .robo-arena .ra-live-profile__avatar { width: 58px; height: 58px; }
    .robo-arena .ra-live-profile__avatar img { width: 54px; height: 54px; }
    .robo-arena .ra-live-profile__accuracy { padding-left: 4px; }
    .robo-arena .ra-live-profile__accuracy img { width: 38px; height: 38px; }
    .robo-arena .ra-live-profile__accuracy strong { font-size: .88rem; }
    .robo-arena .ra-live-profile__accuracy small { font-size: .56rem; }
    .robo-arena .ra-live-progress { height: 11px; }
    .robo-arena .ra-live-goal {
        grid-template-columns: 27px minmax(0, 1fr) 48px;
        grid-template-rows: auto auto;
    }
    .robo-arena .ra-live-goal > small {
        grid-column: 2;
        grid-row: 2;
        font-size: .64rem;
    }
    .robo-arena .ra-live-goal__chest {
        grid-column: 3;
        grid-row: 1 / 3;
        width: 46px;
        height: 44px;
    }
    .robo-arena .ra-live-bottom-nav a.is-play > span {
        width: 46px;
        height: 46px;
        margin-top: -17px;
    }
    .robo-arena .ra-live-bottom-nav a.is-play img { width: 27px; height: 27px; }
    .robo-arena .plan-focus-chip {
        grid-template-columns: 58px minmax(0, 1fr);
        padding: 9px;
    }
    .robo-arena .plan-focus-chip .ra-plan-art { width: 54px; height: 54px; }
    .robo-arena .game-module-head {
        grid-template-columns: 66px minmax(0, 1fr);
        gap: 10px;
    }
    .robo-arena .game-module-head .ra-module-art { width: 62px; height: 62px; }
    .robo-arena .game-module-stats { gap: 5px; }
    .robo-arena .game-module-stats span { padding-inline: 5px; }
    .robo-arena .ra-live-utility {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }
}
@media (max-width: 380px) {
    .robo-arena .ra-live-page { padding-inline: 4px; }
    .robo-arena .ra-live-header {
        grid-template-columns: 56px minmax(0, 1fr) 44px;
    }
    .robo-arena .ra-live-header h1 { font-size: 1rem; }
    .robo-arena .ra-live-content { padding-inline: 7px; }
    .robo-arena .ra-live-profile {
        grid-template-columns: 56px minmax(0, 1fr) 66px;
    }
    .robo-arena .ra-live-profile__avatar { width: 52px; height: 52px; }
    .robo-arena .ra-live-profile__avatar img { width: 48px; height: 48px; }
    .robo-arena .ra-live-profile__data > small { font-size: .58rem; }
    .robo-arena .ra-live-stats article {
        grid-template-columns: 32px minmax(0, 1fr);
        padding-inline: 6px;
    }
    .robo-arena .ra-live-stats article > span { width: 31px; height: 31px; }
    .robo-arena .ra-live-stats img { width: 22px; height: 22px; }
    .robo-arena .ra-live-action { min-height: 120px; }
    .robo-arena .ra-live-action img { width: 68px; height: 68px; }
    .robo-arena .ra-live-action strong { font-size: .64rem; }
    .robo-arena .ra-live-bottom-nav a strong { font-size: .5rem; }
}
/* Phase 2 image integrity */
.robo-arena .ra-live-arena img {
    object-fit: contain;
}
.robo-arena .ra-live-stats article:nth-child(3) > span {
    background: #fff1db;
    border-color: #ffbd62;
}
@media (max-width: 520px) {
    .robo-arena .ra-live-stats article {
        display: flex;
        min-height: 78px;
        padding: 7px 4px;
        flex-direction: column;
        justify-content: center;
        gap: 2px;
        text-align: center;
    }
    .robo-arena .ra-live-stats article > span {
        width: 33px;
        height: 33px;
    }
    .robo-arena .ra-live-stats strong { font-size: 1rem; }
    .robo-arena .ra-live-stats small { font-size: .52rem; }
}

/* Final flow: shared mobile authentication screens */
body.flow-auth-page {
    margin: 0;
    min-width: 320px;
    min-height: 100vh;
    min-height: 100dvh;
    background: #eaf8ff;
    color: #08285f;
}
.flow-phone-wrap {
    display: grid;
    min-height: 100vh;
    min-height: 100dvh;
    place-items: center;
    padding: 12px;
}
.robo-arena .flow-phone {
    position: relative;
    width: min(100%, 390px);
    min-height: min(820px, calc(100dvh - 24px));
    overflow: hidden;
    border: 6px solid #dcecf5;
    border-radius: 30px;
    background: #fff;
    box-shadow: 0 16px 38px rgba(4, 73, 125, .2);
}
.robo-arena .flow-hero {
    position: relative;
    display: grid;
    height: 390px;
    place-items: start center;
    overflow: hidden;
    background-color: #078be3;
    background-image: url('../images/robo-arena/game-arena-premium-background.png');
    background-position: center;
    background-size: cover;
}
.robo-arena .flow-hero::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 76px;
    background: rgba(255, 255, 255, .18);
    content: '';
}
.robo-arena .flow-logo {
    position: relative;
    z-index: 2;
    width: 205px;
    height: 146px;
    margin-top: 18px;
    object-fit: contain;
}
.robo-arena .flow-mentor {
    position: absolute;
    z-index: 1;
    bottom: -13px;
    width: 252px;
    height: 260px;
    object-fit: contain;
    object-position: center bottom;
}
.robo-arena .flow-mentor-video {
    display: block;
    border: 0;
    background: transparent;
    pointer-events: none;
}
.robo-arena .flow-sheet {
    position: relative;
    z-index: 3;
    min-height: 405px;
    margin-top: -22px;
    padding: 29px 22px 23px;
    border-radius: 25px 25px 0 0;
    background: #fff;
    text-align: center;
}
.robo-arena .flow-kicker {
    margin: 0 0 6px;
    color: #08a7df;
    font-size: .72rem;
    font-weight: 900;
}
.robo-arena .flow-sheet h1 {
    margin: 0;
    color: #07255a;
    font-size: 1.85rem;
    line-height: 1.1;
}
.robo-arena .flow-sheet > p:not(.flow-kicker):not(.flow-note) {
    max-width: 290px;
    margin: 10px auto 20px;
    color: #58708d;
    font-size: .9rem;
    line-height: 1.45;
}
.robo-arena .flow-button {
    display: grid;
    width: 100%;
    min-height: 59px;
    margin-top: 11px;
    padding: 8px 15px 8px 20px;
    grid-template-columns: minmax(0, 1fr) 35px;
    align-items: center;
    border: 0;
    border-radius: 8px;
    color: #fff;
    font: inherit;
    font-size: .83rem;
    font-weight: 900;
    text-decoration: none;
    box-shadow: 0 6px 12px rgba(4, 68, 117, .18);
    cursor: pointer;
}
.robo-arena .flow-button img { width: 31px; height: 31px; object-fit: contain; }
.robo-arena .flow-button--green { background: #14b8a6; }
.robo-arena .flow-button--blue { background: #0ea5e9; }
.robo-arena .flow-note {
    margin: 18px 0 0;
    color: #7b8fa6;
    font-size: .72rem;
    font-weight: 700;
}
.robo-arena .flow-back {
    position: absolute;
    z-index: 7;
    top: 15px;
    left: 15px;
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 4px 9px rgba(4, 50, 94, .18);
}
.robo-arena .flow-back img { width: 23px; height: 23px; }
.robo-arena .flow-button--google {
    border: 2px solid #d7e2ea;
    background: #fff;
    color: #173a67;
    box-shadow: 0 4px 10px rgba(4, 68, 117, .1);
}
.robo-arena .flow-google-mark {
    display: grid;
    width: 31px;
    height: 31px;
    place-items: center;
    border: 2px solid #4285f4;
    border-radius: 50%;
    color: #4285f4;
    font-size: 1rem;
    font-weight: 900;
}
.robo-arena .flow-inline-link { margin-top: 18px !important; font-size: .8rem !important; }
.robo-arena .flow-inline-link a { color: #078bdb; font-weight: 900; }
.robo-arena .flow-parent-login .flow-hero { height: 350px; }
.robo-arena .flow-parent-login .flow-logo { display: none; }
.robo-arena .flow-parent-login .flow-mentor { bottom: -8px; width: 260px; height: 330px; }
.robo-arena .flow-parent-login .flow-sheet { min-height: 448px; }
.robo-arena .flow-form { margin-top: 17px; text-align: left; }
.robo-arena .flow-form label {
    display: block;
    margin: 0 0 6px;
    color: #0b316c;
    font-size: .72rem;
    font-weight: 900;
    text-transform: uppercase;
}
.robo-arena .flow-form input {
    width: 100%;
    min-height: 55px;
    padding: 10px 14px;
    border: 2px solid #cce4f1;
    border-radius: 8px;
    background: #f8fdff;
    color: #07255a;
    font: inherit;
    font-size: 1rem;
    font-weight: 800;
}
.robo-arena .flow-form input:focus {
    border-color: #0ea5e9;
    outline: 3px solid rgba(14, 165, 233, .15);
}
.robo-arena .flow-form .flow-button { margin-top: 14px; }
.robo-arena .flow-form-message { min-height: 22px; margin-top: 8px; font-size: .78rem; }
.robo-arena .flow-info-strip {
    display: grid;
    margin-top: 17px;
    padding: 11px;
    grid-template-columns: 37px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    border: 1px solid #cdeaf7;
    border-radius: 8px;
    background: #effaff;
    color: #4c6783;
    font-size: .72rem;
    text-align: left;
}
.robo-arena .flow-info-strip img { width: 34px; height: 34px; }
.robo-arena .flow-legacy-login {
    margin: 0 18px 20px;
    padding: 13px;
    border: 1px solid #d6e8f1;
    border-radius: 8px;
    background: #f8fcfe;
}
.robo-arena .flow-legacy-login summary {
    color: #537089;
    font-size: .76rem;
    font-weight: 800;
    cursor: pointer;
}
.robo-arena .flow-legacy-login .stack-form { margin-top: 13px; }
@media (max-width: 420px) {
    .flow-phone-wrap { padding: 0; }
    .robo-arena .flow-phone {
        width: 100%;
        min-height: 100dvh;
        border-width: 0;
        border-radius: 0;
        box-shadow: none;
    }
    .robo-arena .flow-hero { height: 378px; }
    .robo-arena .flow-logo { width: 190px; height: 137px; margin-top: 12px; }
    .robo-arena .flow-mentor { width: 238px; height: 248px; }
    .robo-arena .flow-sheet { min-height: 422px; padding-inline: 18px; }
}
@media (max-height: 740px) {
    .robo-arena .flow-hero { height: 315px; }
    .robo-arena .flow-logo { width: 165px; height: 115px; margin-top: 7px; }
    .robo-arena .flow-mentor { width: 205px; height: 215px; }
    .robo-arena .flow-sheet { padding-top: 24px; }
}

/* Final flow: parent forms and direct child entry */
.robo-arena .flow-field {
    position: relative;
}
.robo-arena .flow-field > img {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 13px;
    width: 25px;
    height: 25px;
    object-fit: contain;
    transform: translateY(-50%);
    pointer-events: none;
}
.robo-arena .flow-form .flow-field input {
    padding-left: 48px;
}
.robo-arena .flow-form .flow-select {
    width: 100%;
    min-height: 55px;
    padding: 10px 14px;
    border: 2px solid #cce4f1;
    border-radius: 8px;
    background: #f8fdff;
    color: #07255a;
    font: inherit;
    font-size: .88rem;
    font-weight: 800;
}
.robo-arena .flow-form .field-hint {
    display: block;
    margin: 6px 2px 14px;
    color: #6a8199;
    font-size: .66rem;
    line-height: 1.35;
}
.robo-arena .flow-form .field-hint + label {
    margin-top: 18px;
}
.robo-arena .flow-field + label {
    margin-top: 11px;
}
.robo-arena .flow-link-row {
    display: flex;
    margin-top: 18px;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 18px;
    font-size: .76rem;
    font-weight: 900;
}
.robo-arena .flow-link-row a {
    color: #078bdb;
}
.robo-arena .flow-auth-form-phone .flow-hero {
    height: 220px;
}
.robo-arena .flow-auth-form-phone .flow-logo {
    width: 132px;
    height: 98px;
    margin-top: 10px;
}
.robo-arena .flow-auth-form-phone .flow-mentor {
    bottom: -20px;
    width: 150px;
    height: 158px;
}
.robo-arena .flow-auth-form-phone .flow-hero::after {
    height: 42px;
}
.robo-arena .flow-auth-form-phone .flow-sheet {
    min-height: 580px;
    margin-top: -17px;
    padding-top: 24px;
}
.robo-arena .flow-auth-form-phone .flow-sheet h1 {
    font-size: 1.62rem;
}
.robo-arena .flow-auth-form-phone .flow-sheet > p:not(.flow-kicker):not(.flow-note) {
    margin: 7px auto 14px;
}
.robo-arena .flow-auth-form-phone .flow-form {
    margin-top: 12px;
}
.robo-arena .flow-auth-form-phone .flow-button {
    min-height: 54px;
}
.robo-arena .flow-register-phone .flow-sheet {
    min-height: 715px;
}
.robo-arena .flow-status-phone .flow-sheet {
    min-height: 520px;
}
.robo-arena .flow-info-strip--debug {
    overflow-wrap: anywhere;
}
.robo-arena .flow-child-entry .flow-sheet {
    min-height: 470px;
}
.robo-arena .flow-child-entry .flow-form {
    margin-top: 0;
}
.robo-arena .flow-child-entry .flow-form-message:empty {
    display: none;
}
@media (max-width: 420px) {
    .robo-arena .flow-auth-form-phone .flow-hero {
        height: 205px;
    }
    .robo-arena .flow-auth-form-phone .flow-logo {
        width: 122px;
        height: 90px;
        margin-top: 7px;
    }
    .robo-arena .flow-auth-form-phone .flow-mentor {
        width: 140px;
        height: 148px;
    }
    .robo-arena .flow-auth-form-phone .flow-sheet {
        padding: 22px 18px 25px;
    }
}

/* Final flow: game and rewards */
body.ra-game-page,
body.ra-rewards-page { margin: 0; background: #eaf8ff; }
.robo-arena.ra-live-game-page,
.robo-arena.ra-live-rewards {
    width: min(100%, 820px);
    margin: 0 auto;
    padding: 14px;
}
.robo-arena .game-root { position: relative; }
.robo-arena .game-setup,
.robo-arena .finish-panel {
    border: 2px solid #cceaf5;
    border-radius: 8px;
    background: #fff;
}
.robo-arena .ra-live-game-screen {
    position: relative;
    min-height: 720px;
    overflow: hidden;
    padding: 18px;
    border: 6px solid #dcecf5;
    border-radius: 30px;
    background-color: #087eea;
    background-image: url('../images/robo-arena/game-arena-premium-background.png');
    background-position: center;
    background-size: cover;
    box-shadow: 0 16px 36px rgba(4, 73, 125, .22);
}
.robo-arena .ra-live-game-screen .game-character-strip {
    position: absolute;
    z-index: 1;
    bottom: 86px;
    left: 10px;
    width: 185px;
    padding: 0;
    border: 0;
    background: transparent;
}
.robo-arena .ra-live-game-screen .game-character-strip > div { display: none; }
.robo-arena .ra-game-mentor {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 180px;
    height: 270px;
    object-fit: contain;
    object-position: center bottom;
    transform: translateY(-100%);
}
.robo-arena .ra-live-game-screen .game-hud {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}
.robo-arena .ra-live-game-screen .game-hud span {
    padding: 9px 5px;
    border: 2px solid rgba(255, 255, 255, .8);
    border-radius: 8px;
    background: rgba(5, 70, 145, .78);
    color: #fff;
    text-align: center;
}
.robo-arena .ra-live-game-screen .task-card {
    position: relative;
    z-index: 3;
    margin: 34px auto 0;
    padding: 26px 15px 17px;
    border: 0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(3, 51, 108, .23);
}
.robo-arena .ra-live-game-screen .big-task { color: #062a62; font-size: clamp(2.7rem, 10vw, 4.7rem); }
.robo-arena .ra-live-game-screen .answer-input { max-width: 230px; border-color: #23c8d6; }
.robo-arena .ra-live-game-screen .keypad {
    position: relative;
    z-index: 4;
    width: min(100%, 390px);
    margin: 38px 0 0 auto;
}
.robo-arena .ra-live-game-screen .keypad button {
    min-height: 63px;
    border: 2px solid #d8e8f1;
    border-radius: 8px;
    background: #fff;
    color: #08285f;
    box-shadow: 0 4px 8px rgba(3, 51, 108, .15);
    font-weight: 900;
}
.robo-arena .ra-game-home {
    display: inline-flex;
    margin: 12px 0;
    align-items: center;
    gap: 7px;
    color: #0868b5;
    font-weight: 900;
    text-decoration: none;
}
.robo-arena .ra-game-home img { width: 25px; height: 25px; }
.robo-arena .ra-reward-hero {
    overflow: hidden;
    border-radius: 8px;
    background: #08a5e5;
    color: #fff;
}
.robo-arena .ra-reward-hero h1,
.robo-arena .ra-reward-hero p { color: #fff; }
.robo-arena .ra-reward-hero .stat-orbit {
    width: 132px;
    height: 112px;
    border: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, .93);
}
.robo-arena .ra-reward-hero .stat-orbit img { width: 104px; height: 72px; object-fit: contain; }
.robo-arena .ra-reward-hero .stat-orbit small { color: #08316b; font-weight: 900; }
.robo-arena .ra-live-rewards .reward-card { border-radius: 8px; }
.robo-arena .ra-live-rewards .reward-card-icon { width: 82px; height: 82px; }
.robo-arena .ra-reward-bottom-nav {
    position: sticky;
    z-index: 10;
    bottom: 8px;
    display: grid;
    margin-top: 18px;
    padding: 8px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 2px solid #d7ebf3;
    border-radius: 8px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 8px 20px rgba(4, 73, 125, .18);
}
.robo-arena .ra-reward-bottom-nav a {
    display: flex;
    min-width: 0;
    padding: 4px;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    color: #54708c;
    font-size: .58rem;
    text-decoration: none;
}
.robo-arena .ra-reward-bottom-nav img { width: 27px; height: 27px; }
.robo-arena .ra-reward-bottom-nav .is-active { color: #078be3; }
@media (max-width: 560px) {
    .robo-arena.ra-live-game-page,
    .robo-arena.ra-live-rewards { padding: 0; }
    .robo-arena .ra-live-game-screen { min-height: 100dvh; border: 0; border-radius: 0; }
    .robo-arena .ra-live-game-screen { padding: 10px; }
    .robo-arena .ra-live-game-screen .task-card { margin-top: 18px; padding: 15px 10px 10px; }
    .robo-arena .ra-live-game-screen .big-task { font-size: 2.7rem; }
    .robo-arena .ra-live-game-screen .answer-input { min-height: 66px; }
    .robo-arena .ra-live-game-screen .keypad { width: 66%; margin-top: 18px; gap: 6px; }
    .robo-arena .ra-live-game-screen .keypad button { min-height: 49px; }
    .robo-arena .ra-live-game-screen .game-character-strip { bottom: 28px; width: 135px; }
    .robo-arena .ra-game-mentor { width: 130px; height: 205px; }
    .robo-arena .ra-live-rewards { padding-bottom: 8px; }
    .robo-arena .ra-reward-hero { border-radius: 0; }
}

/* Parent onboarding keeps the account focused until a child and three rewards exist. */
.parent-onboarding {
    width: min(100% - 24px, 980px);
    margin-inline: auto;
}
.parent-onboarding-hero {
    position: relative;
    display: grid;
    min-height: 280px;
    padding: 32px clamp(20px, 5vw, 48px);
    grid-template-columns: minmax(0, 1fr) 200px 180px;
    align-items: center;
    gap: 20px;
    overflow: hidden;
    border: 2px solid var(--ra-line);
    border-radius: 20px;
    background: linear-gradient(135deg, var(--ra-blue) 0%, var(--ra-teal) 100%);
    color: #fff;
    box-shadow: var(--ra-shadow-strong);
}
.parent-onboarding-hero::after {
    position: absolute;
    inset: 0;
    content: '';
    background: linear-gradient(90deg, rgba(2, 40, 103, 0.88), rgba(2, 76, 151, 0.46) 58%, rgba(2, 76, 151, 0.08));
}
.parent-onboarding-hero > * { position: relative; z-index: 1; }
.parent-onboarding-hero .eyebrow {
    display: inline-block;
    margin-bottom: 8px;
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ra-yellow);
}
.parent-onboarding-hero h1 {
    margin: 4px 0 12px;
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    line-height: 1.15;
    font-weight: 900;
    color: #fff;
}
.parent-onboarding-hero p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
    max-width: 420px;
}
.parent-onboarding-logo {
    display: block;
    width: 100%;
    max-width: 180px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0, 35, 91, 0.3));
}
.parent-onboarding-mentor {
    display: block;
    width: 100%;
    max-width: 200px;
    height: auto;
    max-height: 240px;
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 12px 14px rgba(0, 35, 83, 0.3));
}
.parent-add-step-counter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    font-size: 0.75rem;
    font-weight: 900;
    color: #fff;
}
.arena-back-button {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: background 0.2s, transform 0.1s;
}
.arena-back-button:hover {
    background: rgba(255, 255, 255, 0.25);
}
.arena-back-button:active {
    transform: scale(0.96);
}
.arena-back-button img {
    width: 24px;
    height: 24px;
    filter: brightness(0) invert(1);
}
.onboarding-progress-panel {
    margin-top: 24px;
    padding: 20px;
    border: 1px solid var(--ra-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--ra-shadow);
}
.onboarding-progress-panel h2 {
    margin: 0 0 16px;
    font-size: 1.25rem;
    font-weight: 900;
    color: var(--ra-navy);
    text-align: center;
}
.onboarding-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.onboarding-steps article {
    display: grid;
    min-width: 0;
    min-height: 110px;
    padding: 16px 12px;
    align-content: center;
    justify-items: center;
    gap: 8px;
    border: 2px solid var(--ra-line);
    border-radius: 14px;
    background: #fff;
    text-align: center;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.onboarding-steps article > span {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 50%;
    background: var(--ra-bg-secondary);
    color: var(--ra-blue);
    font-weight: 900;
    font-size: 1rem;
    border: 2px solid var(--ra-line);
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.onboarding-steps article strong {
    font-size: 0.9rem;
    font-weight: 900;
    color: var(--ra-navy);
    line-height: 1.2;
}
.onboarding-steps article small {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--ra-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.onboarding-steps .is-complete {
    border-color: var(--ra-teal);
    background: #f0fdfa;
}
.onboarding-steps .is-complete > span {
    background: var(--ra-teal);
    color: #fff;
    border-color: var(--ra-teal);
}
.onboarding-steps .is-complete strong { color: var(--ra-teal); }
.onboarding-steps .is-complete small { color: var(--ra-teal); }
.onboarding-steps .is-current {
    border-color: var(--ra-blue);
    background: #eff9ff;
    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.12);
}
.onboarding-steps .is-current > span {
    background: var(--ra-blue);
    color: #fff;
    border-color: var(--ra-blue);
}
.onboarding-steps .is-current strong { color: var(--ra-blue); }
.onboarding-steps .is-current small { color: var(--ra-blue); }
.onboarding-id-card { text-align: center; }
.onboarding-child-id {
    margin: 14px auto;
    color: #08285f;
    font-size: clamp(2rem, 8vw, 3.2rem);
    letter-spacing: 0;
}
.onboarding-next-step { text-align: center; }
.onboarding-reward-count {
    margin: 14px 0;
    color: #08285f;
    text-align: center;
    font-size: 1.05rem;
}
.parent-onboarding .two-column {
    min-width: 0;
    grid-template-columns: minmax(0, 680px);
    justify-content: center;
}
.parent-onboarding .panel,
.parent-onboarding .stack-form { min-width: 0; }
.parent-onboarding .stack-form input,
.parent-onboarding .stack-form select,
.parent-onboarding .stack-form textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.parent-onboarding .table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
}

@media (max-width: 720px) {
    .parent-onboarding-page .parent-topbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        padding: 8px;
    }
    .parent-onboarding-page .parent-topbar .brand { display: none; }
    .parent-onboarding-page .parent-pill { justify-self: center; }
    .parent-onboarding-page .nav-actions {
        width: 100%;
        justify-content: center;
        gap: 5px;
        overflow: visible;
    }
    .parent-onboarding-page .nav-actions a {
        min-height: 40px;
        padding: 7px 9px;
        font-size: .72rem;
    }
    .parent-onboarding-hero {
        min-height: 230px;
        padding: 20px;
        grid-template-columns: minmax(0, 1fr) 110px;
    }
    .parent-onboarding-logo { display: none; }
    .parent-onboarding-mentor { height: 170px; }
}
@media (max-width: 420px) {
    .parent-onboarding { width: min(100% - 16px, 980px); }
    .parent-onboarding-hero { grid-template-columns: minmax(0, 1fr) 86px; gap: 8px; }
    .parent-onboarding-mentor { height: 142px; }
    .onboarding-steps { gap: 5px; }
    .onboarding-steps article,
    .onboarding-steps > div { min-height: 106px; padding: 8px 4px; font-size: .78rem; }
}

/* Premium parent onboarding and dashboard. */
body.parent-premium-page { min-width: 0; background: #eefaff; color: #08285f; }
.parent-premium-page .parent-topbar { position: sticky; z-index: 30; top: 0; min-height: 70px; border-bottom: 1px solid #cceaf5; background: rgba(255,255,255,.96); box-shadow: 0 6px 20px rgba(5,86,137,.08); }
.parent-premium-page .parent-topbar .brand { color: #07336d; }
.parent-brand-logo { width: 46px; height: 46px; object-fit: contain; }
.parent-premium { width: min(100% - 28px,1120px); margin: 0 auto; padding: 22px 0 104px; }
.parent-premium .panel,.parent-premium .reward-card,.parent-premium .profile-hero { border: 1px solid #cceaf5; border-radius: 8px; background: #fff; box-shadow: 0 8px 22px rgba(5,86,137,.11); }
.parent-premium .btn { min-height: 44px; border-radius: 8px; font-weight: 900; }
.parent-premium .btn.primary,.parent-main-cta { border: 0; background: #0ea5e9; color: #fff; box-shadow: 0 5px 0 #087db5; }
.parent-main-cta { width: 100%; min-height: 56px !important; }
.parent-child-setup {
    position: relative;
    overflow: hidden;
    max-width: 680px;
    margin: 24px auto;
    padding: 32px 28px;
    border: 1px solid var(--ra-line);
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--ra-shadow);
}
.parent-child-setup .setup-mentor {
    display: block;
    width: 180px;
    height: 200px;
    margin: -20px auto 8px;
    object-fit: contain;
    filter: drop-shadow(0 8px 12px rgba(0, 35, 91, 0.2));
}
.parent-child-setup .eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ra-blue);
}
.parent-child-setup h2 {
    margin: 0 0 8px;
    font-size: clamp(1.5rem, 3.5vw, 1.875rem);
    font-weight: 900;
    color: var(--ra-navy);
    text-align: center;
}
.parent-child-setup > p:not(.eyebrow) {
    margin: 0 0 24px;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--ra-muted);
    text-align: center;
}
.parent-add-validation {
    margin-bottom: 20px;
    padding: 14px 16px;
    border: 2px solid var(--ra-coral);
    border-radius: 12px;
    background: #fff5f5;
    color: var(--ra-coral);
}
.parent-add-validation strong {
    display: block;
    margin-bottom: 4px;
    font-size: 0.9rem;
}
.parent-add-validation p { margin: 0; font-size: 0.85rem; }

.stack-form { display: grid; gap: 20px; }
.parent-add-field { display: grid; gap: 8px; }
.parent-add-field label {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--ra-navy);
}
.parent-add-input-shell {
    position: relative;
    display: grid;
    grid-template-columns: 48px 1fr;
    align-items: center;
    min-height: 56px;
    padding: 0 16px;
    border: 2px solid var(--ra-line);
    border-radius: 12px;
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.parent-add-input-shell:focus-within {
    border-color: var(--ra-blue);
    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.12);
}
.parent-add-input-shell img {
    width: 22px;
    height: 22px;
    opacity: 0.6;
}
.parent-add-input-shell input {
    width: 100%;
    min-height: 48px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ra-navy);
    outline: none;
}
.parent-add-input-shell input::placeholder { color: var(--ra-muted); opacity: 0.5; }
.parent-add-field.is-invalid .parent-add-input-shell {
    border-color: var(--ra-coral);
    background: #fff5f5;
}
.parent-add-help {
    margin: 4px 0 0;
    font-size: 0.75rem;
    color: var(--ra-muted);
}
.parent-add-error {
    margin: 4px 0 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ra-coral);
}

.parent-add-choice { display: grid; gap: 10px; }
.parent-add-choice legend {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--ra-navy);
}
.parent-grade-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.parent-choice-chip {
    display: grid;
    place-items: center;
    min-height: 56px;
    padding: 8px;
    border: 2px solid var(--ra-line);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.parent-choice-chip:hover {
    border-color: var(--ra-blue);
    background: #eff9ff;
}
.parent-choice-chip input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.parent-choice-chip span {
    font-size: 1.25rem;
    font-weight: 900;
    color: var(--ra-navy);
}
.parent-choice-chip:has(input:checked) {
    border-color: var(--ra-blue);
    background: #eff9ff;
    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.12);
}
.parent-choice-chip:has(input:checked) span { color: var(--ra-blue); }
.parent-add-choice.is-invalid .parent-grade-grid { opacity: 0.8; }

.parent-avatar-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.parent-avatar-option {
    display: grid;
    place-items: center;
    gap: 8px;
    padding: 12px 8px;
    border: 2px solid var(--ra-line);
    border-radius: 16px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s, transform 0.1s;
}
.parent-avatar-option:hover {
    border-color: var(--ra-blue);
    background: #eff9ff;
    transform: translateY(-2px);
}
.parent-avatar-option input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.parent-avatar-visual {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--ra-bg-secondary);
    overflow: hidden;
}
.parent-avatar-visual img { width: 48px; height: 48px; object-fit: contain; }
.parent-avatar-option--photo .parent-avatar-visual {
    background: linear-gradient(135deg, var(--ra-cyan), var(--ra-purple));
}
.parent-avatar-option--photo .parent-avatar-visual strong {
    font-size: 2rem;
    font-weight: 900;
    color: #fff;
}
.parent-avatar-option span:last-child {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--ra-muted);
    text-align: center;
}
.parent-avatar-option:has(input:checked) {
    border-color: var(--ra-blue);
    background: #eff9ff;
    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.12);
}
.parent-avatar-option:has(input:checked) span:last-child { color: var(--ra-blue); }
.parent-add-choice.is-invalid .parent-avatar-grid { opacity: 0.8; }

.parent-photo-upload {
    display: grid;
    gap: 10px;
    margin-top: 8px;
    padding: 16px;
    border: 2px dashed var(--ra-line);
    border-radius: 12px;
    background: #fafbfc;
}
.parent-photo-upload label {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--ra-navy);
}
.parent-photo-upload input[type="file"] { display: none; }
.parent-photo-upload .btn { width: 100%; }

.parent-range-field { display: grid; gap: 10px; }
.parent-range-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.parent-range-heading label {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--ra-navy);
}
#initial-mastery-output {
    min-width: 64px;
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--ra-teal);
    text-align: right;
}
#initial-mastery {
    width: 100%;
    height: 28px;
    accent-color: var(--ra-teal);
    background: linear-gradient(90deg, var(--ra-teal) var(--mastery, 0%), var(--ra-line) var(--mastery, 0%));
    border-radius: 999px;
    cursor: pointer;
}
.mastery-scale {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    margin-top: -4px;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--ra-muted);
    text-align: center;
}

.parent-add-info {
    display: flex;
    gap: 10px;
    padding: 14px 16px;
    border: 1px solid var(--ra-line);
    border-radius: 12px;
    background: var(--ra-bg);
    color: var(--ra-muted);
}
.parent-add-info > span {
    flex: 0 0 24px;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--ra-blue);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 900;
}
.parent-add-info h3 {
    margin: 0 0 4px;
    font-size: 0.875rem;
    font-weight: 900;
    color: var(--ra-navy);
}
.parent-add-info p { margin: 0; font-size: 0.8rem; line-height: 1.4; }

.parent-main-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 56px;
    padding: 14px 24px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(180deg, var(--ra-blue), var(--ra-blue-dark));
    color: #fff;
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 0.02em;
    box-shadow: 0 6px 16px rgba(8, 123, 197, 0.3);
    transition: filter 0.2s, transform 0.1s;
}
.parent-main-cta:hover { filter: brightness(1.04); }
.parent-main-cta:active { transform: scale(0.98); }
.parent-main-cta:focus-visible {
    outline: 3px solid var(--ra-yellow);
    outline-offset: 3px;
}
.parent-main-cta .button__spinner {
    display: none;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.parent-main-cta[data-loading] .button__label { display: none; }
.parent-main-cta[data-loading] .button__spinner { display: block; }

.next-step-hint {
    margin: 12px 0 0;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ra-muted);
}
.onboarding-state-icon { width: 82px; height: 82px; object-fit: contain; }
.onboarding-id-card { max-width: 680px; margin: 18px auto; padding: 30px; }
.onboarding-id-card .onboarding-child-id { padding: 17px 10px; border: 2px dashed #0ea5e9; border-radius: 8px; background: #effaff; }
.parent-action-grid { display: grid; margin: 18px 0; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.parent-action-grid a { display: grid; min-width: 0; min-height: 148px; padding: 16px; justify-items: center; align-content: center; gap: 5px; border: 1px solid #cceaf5; border-radius: 8px; background: #fff; color: #08285f; text-align: center; text-decoration: none; box-shadow: 0 8px 22px rgba(5,86,137,.1); }
.parent-action-grid img { width: 62px; height: 62px; object-fit: contain; }
.parent-action-grid span { color: #66819a; font-size: .75rem; }
.parent-premium .parent-action-grid + .two-column { display: none; }
.parent-children-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.parent-bottom-nav { position: fixed; z-index: 40; right: 50%; bottom: 10px; display: grid; width: min(calc(100% - 24px),620px); min-height: 72px; padding: 6px; grid-template-columns: repeat(5,minmax(0,1fr)); border: 1px solid #cceaf5; border-radius: 8px; background: rgba(255,255,255,.98); box-shadow: 0 10px 30px rgba(5,86,137,.22); transform: translateX(50%); }
.parent-bottom-nav a { display: flex; min-width: 0; min-height: 58px; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #56738e; font-size: .63rem; font-weight: 900; text-decoration: none; }
.parent-bottom-nav img { width: 28px; height: 28px; object-fit: contain; }
.parent-bottom-nav a.is-active { color: #078bdb; background: #eaf8ff; }
.onboarding-complete-card { max-width: 620px; margin: 30px auto; padding: 32px; text-align: center; }
.onboarding-complete-card > img { width: 210px; height: 220px; object-fit: contain; }
.completion-summary { display: grid; margin: 20px 0; grid-template-columns: repeat(3,1fr); gap: 9px; }
.completion-summary span { padding: 13px 5px; border: 1px solid #cceaf5; border-radius: 8px; background: #effaff; color: #078bdb; font-size: 1.45rem; font-weight: 900; }
.completion-summary small { display: block; color: #57738d; font-size: .62rem; }
.parent-file-button { display: inline-flex !important; min-height: 44px; padding: 8px 13px; align-items: center; border: 2px solid #0ea5e9; border-radius: 8px; color: #087db5; font-weight: 900; cursor: pointer; }
.parent-file-button input[type="file"] { position: absolute !important; width: 1px !important; min-height: 1px !important; height: 1px !important; padding: 0 !important; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; pointer-events: none; }
.onboarding-reward-presets { display: grid; margin: 18px 0; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.onboarding-reward-presets button { display: grid; min-height: 150px; padding: 14px; justify-items: center; align-content: center; gap: 5px; border: 2px solid #cceaf5; border-radius: 8px; background: #fff; color: #08285f; font: inherit; cursor: pointer; }
.onboarding-reward-presets button:hover,.onboarding-reward-presets button:focus-visible { border-color: #0ea5e9; outline: 3px solid rgba(14,165,233,.13); }
.onboarding-reward-presets img { width: 65px; height: 65px; object-fit: contain; }
.onboarding-reward-presets span { color: #66819a; font-size: .72rem; }
@media (max-width: 720px) {
    .parent-premium-page .parent-topbar .brand span,.parent-premium-page .parent-pill span { display: none; }
    .parent-premium-page .parent-topbar { display: flex; padding: 7px 10px; }
    .parent-premium-page .nav-actions { gap: 3px; }
    .parent-premium-page .nav-actions a { min-height: 44px; padding: 7px; font-size: .68rem; }
    .parent-premium { width: min(100% - 16px,1120px); padding-top: 10px; }
    .parent-action-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
    .parent-action-grid a { min-height: 130px; padding: 10px; }
    .parent-children-grid { grid-template-columns: minmax(0,1fr); }
    .onboarding-reward-presets { gap: 6px; }
    .onboarding-reward-presets button { min-height: 125px; padding: 7px 3px; font-size: .72rem; }
    .onboarding-reward-presets img { width: 48px; height: 48px; }
}
@media (max-width: 390px) {
    .parent-premium-page .nav-actions a:nth-child(2) { display: none; }
    .parent-child-setup,.onboarding-id-card,.onboarding-complete-card { padding: 18px 14px; }
    .parent-child-setup .setup-mentor { width: 145px; height: 160px; }
    .onboarding-steps article,.onboarding-steps > div { min-height: 88px; }
    .completion-summary { gap: 5px; }
}

/* Parent premium UI 002: focused app screens and child-first dashboard. */
.parent-premium { width: min(100% - 28px,1200px); font-size: 15px; }
.parent-premium h1 { font-size: clamp(1.75rem,4vw,2.2rem); }
.parent-premium h2 { font-size: clamp(1.2rem,3vw,1.45rem); }
.parent-premium p,.parent-premium label,.parent-premium input,.parent-premium select,.parent-premium textarea { font-size: max(15px,1rem); }
.parent-premium input,.parent-premium select { min-height: 48px; }
.parent-premium .btn { min-height: 48px; font-size: 1rem; }
.avatar-choice { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); }
.avatar-choice button { display: grid; min-width: 0; min-height: 92px; padding: 7px 3px; place-items: center; gap: 3px; border: 3px solid #d7edf6; border-radius: 50%; background: #effaff; color: #496a86; font: inherit; font-weight: 900; cursor: pointer; }
.avatar-choice button.is-selected { border-color: #0ea5e9; background: #fff; color: #087db5; box-shadow: 0 0 0 5px rgba(14,165,233,.14); }
.avatar-choice button img { width: 40px; height: 40px; }
.avatar-choice button small { font-size: .68rem; }
.mastery-scale { display: grid; margin-top: -8px; grid-template-columns: repeat(4,1fr); gap: 4px; color: #54718c; font-size: .76rem; text-align: center; }
#initial-mastery-output { display: inline-block; min-width: 72px; color: #0a8fce; font-size: 1.75rem; }
#initial-mastery { height: 24px; accent-color: #14b8a6; background: linear-gradient(90deg,#14b8a6 var(--mastery,0%),#dceef5 var(--mastery,0%)); }
.onboarding-child-identity { display: flex; width: fit-content; margin: 0 auto 12px; align-items: center; gap: 11px; text-align: left; }
.onboarding-child-identity span { display: grid; }
.onboarding-child-identity small { color: #66819a; }
.onboarding-id-card { min-height: min(690px,calc(100dvh - 92px)); display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.onboarding-id-card > * { margin-block: 0; }
.onboarding-id-card .onboarding-child-id { width: 100%; font-size: clamp(2rem,10vw,3.4rem); }
.completion-rewards { display: grid; margin: 18px 0; gap: 8px; }
.completion-rewards span { display: flex; min-height: 48px; padding: 8px 12px; align-items: center; gap: 9px; border: 1px solid #cceaf5; border-radius: 8px; background: #f4fbff; font-weight: 900; text-align: left; }
.completion-rewards img { width: 30px; height: 30px; }
.parent-dashboard-intro { margin: 0 0 16px; }
.parent-dashboard-intro h1 { margin: 2px 0 5px; color: #08285f; }
.parent-children-primary { display: flex; padding-bottom: 4px; overflow-x: auto; scroll-snap-type: x mandatory; }
.parent-featured-child { min-width: min(100%,530px); scroll-snap-align: start; }
.parent-children-secondary { display: none; }
.parent-claims-preview { margin-top: 18px; }
.parent-claims-preview article { display: grid; padding: 12px 0; grid-template-columns: 54px minmax(0,1fr) auto; align-items: center; gap: 10px; border-top: 1px solid #dcecf4; }
.parent-claims-preview article img { width: 50px; height: 50px; object-fit: contain; }
.parent-claims-preview article div { display: grid; gap: 3px; }
.parent-empty-state { display: grid; min-height: 130px; place-items: center; align-content: center; color: #5d7891; text-align: center; }
.parent-empty-state img { width: 78px; height: 64px; object-fit: contain; }
.parent-premium:not(.parent-onboarding) { display: flex; flex-direction: column; }
.parent-premium:not(.parent-onboarding) > .parent-dashboard-intro { order: 1; }
.parent-premium:not(.parent-onboarding) > .parent-children-primary { order: 2; }
.parent-premium:not(.parent-onboarding) > .parent-action-grid { order: 3; }
.parent-premium:not(.parent-onboarding) > .parent-claims-preview { order: 4; }
.parent-premium:not(.parent-onboarding) > .profile-hero { order: 7; }
.parent-premium:not(.parent-onboarding) > .parent-child-setup { order: 8; }
.parent-premium:not(.parent-onboarding) > .parent-bottom-nav { order: 10; }
.parent-custom-reward > summary { display: flex; min-height: 58px; padding: 10px; align-items: center; justify-content: center; color: #078bdb; font-size: 1rem; font-weight: 900; cursor: pointer; }
.parent-custom-reward[open] > summary { margin-bottom: 12px; border-bottom: 1px solid #d7eaf3; }
.onboarding-reward-presets { grid-template-columns: repeat(2,minmax(0,1fr)); }
.onboarding-reward-presets button { position: relative; min-height: 174px; padding: 14px 8px; }
.onboarding-reward-presets button b { display: inline-flex; min-height: 36px; padding: 6px 12px; align-items: center; border-radius: 8px; background: #e8f7fd; color: #078bdb; font-size: .72rem; }
.onboarding-reward-presets button.is-selected { border-color: #14b8a6; background: #effdfa; box-shadow: 0 0 0 4px rgba(20,184,166,.13); }
.onboarding-reward-presets button.is-selected b { background: #14b8a6; color: #fff; }
.parent-onboarding-sticky { position: sticky; z-index: 25; bottom: 8px; display: grid; width: min(100%,680px); margin: 18px auto 0; padding: 10px; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 10px; border: 1px solid #bfe4f2; border-radius: 8px; background: rgba(255,255,255,.97); box-shadow: 0 10px 30px rgba(4,74,124,.2); }
.parent-onboarding-sticky span { display: grid; min-width: 72px; color: #58738d; font-size: .68rem; }
.parent-onboarding-sticky strong { color: #078bdb; font-size: 1.25rem; }
.parent-onboarding-sticky .btn { width: 100%; }
@media (max-width:720px) {
    .parent-premium-page .parent-topbar { min-height: 54px; }
    .parent-premium-page .parent-topbar .nav-actions a:not(:last-child),.parent-premium-page .parent-topbar .parent-pill { display: none; }
    .parent-premium-page .parent-topbar .nav-actions { width: auto; margin-left: auto; }
    .parent-premium-page .parent-topbar .nav-actions a:last-child { min-width: 48px; font-size: 0; }
    .parent-premium-page .parent-topbar .nav-actions a:last-child::before { content: 'Odjava'; font-size: .72rem; }
    .parent-onboarding { width: min(100% - 12px,680px); }
    .parent-onboarding-hero { min-height: 186px; padding: 15px; }
    .parent-onboarding-hero h1 { font-size: 1.75rem; }
    .parent-onboarding-hero p { margin-block: 5px; }
    .parent-onboarding-hero .parent-onboarding-mentor { height: 145px; }
    .onboarding-progress-panel { padding: 10px; }
    .onboarding-progress-panel > h2,.onboarding-progress-panel > p { display: none; }
    .onboarding-steps article,.onboarding-steps > div { min-height: 68px; padding: 5px 2px; font-size: .7rem; }
    .onboarding-steps article > span,.onboarding-steps > div > strong { width: 27px; height: 27px; }
    .parent-child-setup { margin-top: 10px; padding: 16px; }
    .parent-child-setup .setup-mentor { width: 118px; height: 120px; margin: -12px auto -15px; }
    .parent-child-setup > p:not(.eyebrow),.parent-child-setup .muted { font-size: 13px; }
    .parent-child-setup .stack-form { gap: 10px; }
    .avatar-choice { margin: 10px 0; gap: 7px; }
    .avatar-choice button { min-height: 76px; }
    .avatar-choice button img { width: 32px; height: 32px; }
    .profile-hero.compact { order: 8; padding: 12px; }
    .profile-hero.compact > div:first-child,.profile-hero.compact > a { display: none; }
    .parent-premium:not(.parent-onboarding) { display: flex; flex-direction: column; }
    .parent-dashboard-intro { order: 1; }
    .parent-children-primary { order: 2; }
    .parent-action-grid { order: 3; }
    .parent-claims-preview { order: 4; }
    .parent-child-setup { order: 7; }
    .parent-premium > .form-message { order: 0; }
    .parent-bottom-nav { order: 10; }
    .onboarding-reward-presets { margin-block: 12px; }
    .onboarding-reward-presets button { min-height: 154px; }
    .parent-onboarding .profile-hero.compact { display: block; padding: 16px; }
    .parent-onboarding .profile-hero.compact > div:first-child { display: block; }
    .parent-onboarding .two-column { display: block; }
    .parent-onboarding .table-wrap { display: none; }
}
@media (min-width:900px) {
    .parent-onboarding { display: grid; width: min(100% - 40px,1200px); grid-template-columns: minmax(320px,.8fr) minmax(520px,1.2fr); align-items: start; gap: 18px; }
    .parent-onboarding > .parent-onboarding-hero,.parent-onboarding > .onboarding-progress-panel { grid-column: 1; }
    .parent-onboarding > .parent-child-setup,.parent-onboarding > .onboarding-id-card,.parent-onboarding > .profile-hero,.parent-onboarding > .onboarding-reward-presets,.parent-onboarding > .two-column,.parent-onboarding > .parent-onboarding-sticky { grid-column: 2; grid-row: 1 / span 4; }
    .parent-onboarding > .onboarding-reward-presets { grid-row: 1; }
    .parent-onboarding > .two-column { grid-row: 2; }
    .parent-onboarding > .parent-onboarding-sticky { position: sticky; grid-row: 3; }
    .parent-child-setup { margin-top: 0; }
    .parent-action-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
    .parent-children-primary { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); overflow: visible; }
}

/* CHILD-ARENA-PREMIUM-001 */
.ra-auth-toast {
    position: fixed;
    z-index: 100;
    top: 82px;
    left: 50%;
    display: grid;
    width: min(calc(100% - 24px), 440px);
    min-height: 64px;
    padding: 8px 44px 8px 66px;
    align-items: center;
    color: #07553f;
    background: rgba(239, 255, 249, .98);
    border: 2px solid #55cf9f;
    border-radius: 8px;
    box-shadow: 0 14px 32px rgba(7, 72, 93, .24);
    font-size: .9rem;
    font-weight: 850;
    line-height: 1.3;
    opacity: 0;
    transform: translate(-50%, -14px);
    transition: opacity .18s ease, transform .18s ease;
}
.ra-auth-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.ra-auth-toast.is-error { color: #8a2532; background: #fff3f4; border-color: #ff8b98; }
.ra-auth-toast > img { position: absolute; bottom: 3px; left: 7px; width: 55px; height: 55px; object-fit: contain; }
.ra-auth-toast > button { position: absolute; top: 9px; right: 9px; width: 36px; height: 36px; padding: 0; color: #0b6680; background: #fff; border: 1px solid #a9dfe9; border-radius: 50%; font-size: 1.35rem; line-height: 1; cursor: pointer; }
.ra-auth-toast[hidden] { display: none; }

.robo-arena .child-arena-premium { width: min(100%, 1180px); align-items: start; }
.robo-arena .child-arena-premium .ra-live-arena { align-self: start; }
.robo-arena .ra-live-settings { position: relative; justify-self: end; }
.robo-arena .ra-live-settings > summary { list-style: none; cursor: pointer; }
.robo-arena .ra-live-settings > summary::-webkit-details-marker { display: none; }
.robo-arena .ra-live-settings__menu {
    position: absolute;
    z-index: 35;
    top: 55px;
    right: 0;
    display: grid;
    width: 210px;
    padding: 8px;
    gap: 7px;
    background: #fff;
    border: 1px solid #b8e1eb;
    border-radius: 8px;
    box-shadow: 0 14px 28px rgba(8, 55, 91, .24);
}
.robo-arena .ra-live-settings__menu a,
.robo-arena .ra-live-settings__menu button {
    display: grid;
    width: 100%;
    min-height: 46px;
    padding: 8px 10px;
    place-items: center;
    color: #075f88;
    background: #effaff;
    border: 1px solid #a8dce9;
    border-radius: 8px;
    font: inherit;
    font-size: .78rem;
    font-weight: 950;
    text-align: center;
    cursor: pointer;
}
.robo-arena .ra-live-settings__menu button { color: #8a3340; background: #fff5f6; border-color: #ffc2ca; }
.robo-arena .ra-live-profile__data > span { display: flex; min-width: 0; flex-wrap: wrap; gap: 4px; }
.robo-arena .ra-live-profile__data > span b { color: #087fa8; font-size: .68rem; }
.robo-arena .ra-live-goal { position: relative; padding-bottom: 22px; }
.robo-arena .ra-live-goal__message { position: absolute; right: 90px; bottom: 5px; left: 60px; color: #56758c; font-size: .68rem; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.robo-arena .ra-smart-trainer { align-items: stretch; }
.robo-arena .ra-smart-trainer > div:first-child { display: grid; align-content: center; gap: 5px; }
.robo-arena .ra-smart-trainer small { color: #476377; font-size: .78rem; font-weight: 850; }
.robo-arena .ra-trainer-progress { width: 100%; height: 12px; overflow: hidden; background: #dceef4; border: 1px solid #bedde7; border-radius: 999px; }
.robo-arena .ra-trainer-progress i { display: block; height: 100%; background: linear-gradient(90deg, #14b8a6, #22d3ee, #0ea5e9); border-radius: inherit; }
.robo-arena .ra-smart-trainer .plan-focus-chip { grid-template-columns: 72px minmax(0, 1fr); }
.robo-arena .ra-trainer-cta { grid-column: 1 / -1; display: grid; min-height: 48px; padding: 8px 14px; place-items: center; color: #fff; background: linear-gradient(135deg, #14b8a6, #0ea5e9); border-radius: 8px; font-size: .82rem; font-weight: 950; text-align: center; text-decoration: none; }

@media (min-width: 900px) {
    .robo-arena .child-arena-premium { grid-template-columns: minmax(0, 1.55fr) minmax(330px, .85fr); gap: 22px; }
    .robo-arena .child-arena-premium > .ra-live-arena { grid-column: 1; }
    .robo-arena .child-arena-premium > .ra-smart-trainer { grid-column: 2; grid-row: 1; grid-template-columns: 1fr; position: sticky; top: 20px; }
    .robo-arena .child-arena-premium > .ra-live-section-heading,
    .robo-arena .child-arena-premium > .game-hub-grid,
    .robo-arena .child-arena-premium > .ra-live-utility { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
    .robo-arena .child-arena-premium { gap: 16px; padding: 0 0 24px; }
    .robo-arena .child-arena-premium .ra-live-arena { border-width: 0 0 1px; border-radius: 0; box-shadow: none; }
    .robo-arena .child-arena-premium .ra-live-header { min-height: 66px; }
    .robo-arena .child-arena-premium .ra-live-content { gap: 7px; padding: 8px; }
    .robo-arena .child-arena-premium .ra-live-profile { min-height: 92px; }
    .robo-arena .child-arena-premium .ra-live-profile__data > strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .robo-arena .child-arena-premium .ra-live-profile__data > small { max-height: 2.5em; overflow: hidden; }
    .robo-arena .child-arena-premium .ra-live-stats article { min-height: 70px; }
    .robo-arena .child-arena-premium .ra-live-stats small { font-size: .62rem; line-height: 1.05; }
    .robo-arena .child-arena-premium .ra-live-actions { gap: 7px; }
    .robo-arena .child-arena-premium .ra-live-action { min-height: 112px; }
    .robo-arena .child-arena-premium .ra-live-action img { width: 67px; height: 67px; }
    .robo-arena .child-arena-premium .ra-live-action strong { font-size: .72rem; }
    .robo-arena .child-arena-premium .ra-live-goal { min-height: 62px; }
    .robo-arena .child-arena-premium .ra-live-bottom-nav { min-height: 72px; }
    .robo-arena .child-arena-premium .ra-live-bottom-nav a { min-height: 58px; }
    .robo-arena .child-arena-premium .ra-live-bottom-nav a strong { font-size: .58rem; }
    .robo-arena .child-arena-premium + .arena-plan-strip { margin-inline: 8px; }
    .robo-arena .ra-smart-trainer { margin-inline: 8px; padding: 15px; }
    .robo-arena .ra-smart-trainer .plan-focus-chip { grid-template-columns: 58px minmax(0, 1fr); }
}

@media (max-width: 370px) {
    .ra-auth-toast { top: 72px; font-size: .82rem; }
    .robo-arena .child-arena-premium .ra-live-header { grid-template-columns: 54px minmax(0, 1fr) 44px; }
    .robo-arena .child-arena-premium .ra-live-profile { grid-template-columns: 54px minmax(0, 1fr) 64px; }
    .robo-arena .child-arena-premium .ra-live-profile__avatar { width: 50px; height: 50px; }
    .robo-arena .child-arena-premium .ra-live-profile__avatar img { width: 46px; height: 46px; }
    .robo-arena .child-arena-premium .ra-live-stats article { min-height: 68px; }
    .robo-arena .child-arena-premium .ra-live-action { min-height: 104px; }
    .robo-arena .child-arena-premium .ra-live-action img { width: 60px; height: 60px; }
}

/* CHILD-ARENA-FIDELITY-002: geometry locked to final-flow/reference-moja-arena.png. */
.robo-arena .child-arena-premium {
    width: min(100%, 1180px);
    gap: 24px;
}
.robo-arena .child-arena-premium .ra-live-arena {
    display: flex;
    width: min(100%, 490px);
    min-width: 0;
    min-height: 830px;
    padding: 14px 4px 16px;
    flex-direction: column;
    overflow: hidden;
    background: linear-gradient(180deg, #f8fdff, #eaf8fd 62%, #f8fdff);
    border: 4px solid #fff;
    border-radius: 32px;
    box-shadow: 0 18px 42px rgba(8, 91, 143, .2), inset 0 0 0 2px #c9e9f4;
}
.robo-arena .child-arena-premium .ra-live-header {
    display: grid;
    height: 88px;
    min-height: 88px;
    padding: 7px 14px;
    grid-template-columns: 72px minmax(0, 1fr) 48px;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #087fe6 0%, #0ca9e8 58%, #16b9c8 100%);
    border-radius: 24px 24px 9px 9px;
    box-shadow: inset 0 -2px 0 rgba(0, 92, 165, .2), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.robo-arena .child-arena-premium .ra-live-header__mentor {
    width: 64px;
    height: 64px;
    align-self: center;
    overflow: hidden;
    background: radial-gradient(circle at 40% 30%, #f7ffff, #bff4fa 66%, #53cce8);
    border: 3px solid rgba(255, 255, 255, .92);
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0, 72, 128, .22);
}
.robo-arena .child-arena-premium .ra-live-header__mentor img {
    width: 60px;
    height: 60px;
    object-position: center 13%;
}
.robo-arena .child-arena-premium .ra-live-header h1 {
    font-size: 1.28rem;
    letter-spacing: 0;
    text-shadow: 0 2px 2px rgba(0, 71, 127, .2);
}
.robo-arena .child-arena-premium .ra-live-icon-link {
    width: 46px;
    height: 46px;
    background: rgba(4, 100, 185, .28);
    border: 2px solid rgba(255, 255, 255, .86);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
}
.robo-arena .child-arena-premium .ra-live-icon-link img {
    width: 35px;
    height: 35px;
    filter: none;
}
.robo-arena .child-arena-premium .ra-live-content {
    display: grid;
    min-height: 0;
    padding: 8px 9px 16px;
    flex: none;
    grid-template-rows: 132px 9px 112px 28px 150px 28px 114px;
    align-content: start;
    gap: 0;
}
.robo-arena .child-arena-premium .ra-live-profile { grid-row: 1; }
.robo-arena .child-arena-premium .ra-live-stats { grid-row: 3; }
.robo-arena .child-arena-premium .ra-live-actions { grid-row: 5; }
.robo-arena .child-arena-premium .ra-live-goal { grid-row: 7; }
.robo-arena .child-arena-premium .ra-live-profile,
.robo-arena .child-arena-premium .ra-live-stats article,
.robo-arena .child-arena-premium .ra-live-action,
.robo-arena .child-arena-premium .ra-live-goal {
    border: 2px solid rgba(255, 255, 255, .96);
    border-radius: 19px;
    box-shadow: 0 8px 18px rgba(33, 109, 150, .14), inset 0 0 0 1px #d8edf4, inset 0 1px 0 #fff;
}
.robo-arena .child-arena-premium .ra-live-profile {
    min-height: 0;
    height: 132px;
    padding: 12px;
    grid-template-columns: 92px minmax(0, 1fr) 78px;
    gap: 11px;
}
.robo-arena .child-arena-premium .ra-live-profile__avatar {
    width: 88px;
    height: 88px;
    background: radial-gradient(circle at 42% 32%, #f5ffff, #c8f7fa 64%, #4fc8e8);
    border: 4px solid #0daee5;
    box-shadow: inset 0 0 0 3px #fff, 0 5px 12px rgba(0, 116, 170, .16);
}
.robo-arena .child-arena-premium .ra-live-profile__avatar img {
    width: 80px;
    height: 80px;
}
.robo-arena .child-arena-premium .ra-live-profile__data {
    gap: 3px;
    align-content: center;
}
.robo-arena .child-arena-premium .ra-live-profile__data > strong {
    max-width: 100%;
    overflow: hidden;
    color: #071f5b;
    font-size: 1.18rem;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.robo-arena .child-arena-premium .ra-live-profile__data > span {
    display: flex;
    gap: 5px;
    color: #092c65;
    font-size: .72rem;
    font-weight: 950;
    white-space: nowrap;
}
.robo-arena .child-arena-premium .ra-live-profile__data > span b {
    color: #087fba;
    font-size: .66rem;
}
.robo-arena .child-arena-premium .ra-live-profile__data > small {
    overflow: hidden;
    color: #244d73;
    font-size: .66rem;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.robo-arena .child-arena-premium .ra-live-progress {
    height: 14px;
    background: linear-gradient(180deg, #eef3f5, #dce5e9);
    border: 1px solid #c6d6dd;
    box-shadow: inset 0 2px 3px rgba(23, 66, 91, .12), 0 1px 0 #fff;
}
.robo-arena .child-arena-premium .ra-live-progress i {
    background: linear-gradient(180deg, #ffe45f, #ffc20d 58%, #f3a600);
    box-shadow: inset 0 2px 1px rgba(255, 255, 255, .55), 0 0 5px rgba(255, 193, 12, .4);
}
.robo-arena .child-arena-premium .ra-live-profile__energy {
    display: grid;
    min-width: 0;
    min-height: 82px;
    padding: 7px 4px;
    grid-template-columns: 30px minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    place-items: center;
    align-content: center;
    gap: 1px;
    background: linear-gradient(180deg, #fff, #f8fcff);
    border: 1px solid #dce9ee;
    border-radius: 16px;
    box-shadow: 0 6px 13px rgba(24, 83, 120, .13), inset 0 1px 0 #fff;
    text-align: center;
}
.robo-arena .child-arena-premium .ra-live-profile__energy img {
    width: 30px;
    height: 38px;
    filter: drop-shadow(0 2px 2px rgba(243, 166, 0, .35));
}
.robo-arena .child-arena-premium .ra-live-profile__energy strong {
    min-width: 0;
    color: #09275d;
    font-size: 1.25rem;
    line-height: 1;
    overflow-wrap: anywhere;
}
.robo-arena .child-arena-premium .ra-live-profile__energy small {
    grid-column: 1 / -1;
    color: #345773;
    font-size: .52rem;
    font-weight: 950;
}
.robo-arena .child-arena-premium .ra-live-stats {
    height: 112px;
    gap: 9px;
}
.robo-arena .child-arena-premium .ra-live-stats article {
    display: flex;
    min-height: 0;
    height: 112px;
    padding: 9px 5px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: linear-gradient(180deg, #fff, #fbfdff);
    text-align: center;
}
.robo-arena .child-arena-premium .ra-live-stats article > span,
.robo-arena .child-arena-premium .ra-live-stats article:nth-child(2) > span,
.robo-arena .child-arena-premium .ra-live-stats article:nth-child(3) > span {
    width: 48px;
    height: 48px;
    background: transparent;
    border: 0;
}
.robo-arena .child-arena-premium .ra-live-stats img {
    width: 46px;
    height: 46px;
    filter: drop-shadow(0 3px 3px rgba(22, 79, 113, .16));
}
.robo-arena .child-arena-premium .ra-live-stats strong {
    max-width: 100%;
    color: #08255a;
    font-size: 1.42rem;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.robo-arena .child-arena-premium .ra-live-stats small {
    color: #173f69;
    font-size: .65rem;
    line-height: 1.05;
}
.robo-arena .child-arena-premium .ra-live-actions {
    height: 150px;
    gap: 9px;
}
.robo-arena .child-arena-premium .ra-live-action {
    min-height: 0;
    height: 150px;
    padding: 10px 5px 8px;
    gap: 4px;
    background: linear-gradient(180deg, #fff, #fafdff);
}
.robo-arena .child-arena-premium .ra-live-action.is-primary {
    color: #fff;
    background: linear-gradient(180deg, #20c7f2 0%, #0da8e6 58%, #087ed2 100%);
    border-color: #3bd6f6;
    box-shadow: 0 10px 22px rgba(3, 134, 207, .28), inset 0 0 0 1px rgba(255, 255, 255, .44), inset 0 2px 0 rgba(255, 255, 255, .3);
}
.robo-arena .child-arena-premium .ra-live-action.is-reward {
    background: linear-gradient(180deg, #ecfbff, #dff6fb);
    border-color: #a6e8f4;
}
.robo-arena .child-arena-premium .ra-live-action img {
    width: 96px;
    height: 96px;
    filter: drop-shadow(0 5px 5px rgba(17, 79, 117, .16));
}
.robo-arena .child-arena-premium .ra-live-action strong {
    color: #08285f;
    font-size: .88rem;
    line-height: 1;
}
.robo-arena .child-arena-premium .ra-live-action.is-primary strong {
    color: #fff;
    text-shadow: 0 2px 2px rgba(0, 69, 125, .28);
}
.robo-arena .child-arena-premium .ra-live-goal {
    position: static;
    min-height: 0;
    height: 114px;
    padding: 12px 14px;
    grid-template-columns: 44px minmax(0, 1fr) auto 68px;
    grid-template-rows: 1fr;
    gap: 8px;
    background: linear-gradient(180deg, #fff, #fbfdff);
}
.robo-arena .child-arena-premium .ra-live-goal > div {
    gap: 8px;
}
.robo-arena .child-arena-premium .ra-live-goal > div > strong {
    color: #08285f;
    font-size: .82rem;
    line-height: 1;
}
.robo-arena .child-arena-premium .ra-live-goal > small {
    color: #173f69;
    font-size: .66rem;
}
.robo-arena .child-arena-premium .ra-live-goal__star {
    width: 42px;
    height: 42px;
    filter: drop-shadow(0 3px 3px rgba(240, 166, 0, .28));
}
.robo-arena .child-arena-premium .ra-live-goal__chest {
    width: 66px;
    height: 62px;
}
.robo-arena .child-arena-premium .ra-live-bottom-nav {
    height: 106px;
    min-height: 106px;
    padding: 8px 7px 7px;
    align-items: stretch;
    background: rgba(255, 255, 255, .98);
    border: 0;
    border-radius: 9px 9px 24px 24px;
    box-shadow: 0 -5px 14px rgba(18, 94, 134, .09), inset 0 1px 0 #d8edf4;
}
.robo-arena .child-arena-premium .ra-live-bottom-nav a {
    min-height: 76px;
    padding: 6px 2px;
    align-content: center;
    gap: 5px;
    border-radius: 14px;
}
.robo-arena .child-arena-premium .ra-live-bottom-nav a > img {
    width: 32px;
    height: 32px;
}
.robo-arena .child-arena-premium .ra-live-bottom-nav a strong {
    font-size: .62rem;
}
.robo-arena .child-arena-premium .ra-live-bottom-nav a.is-play > span {
    width: 66px;
    height: 66px;
    margin-top: -30px;
    overflow: hidden;
    background: linear-gradient(180deg, #effcff, #dff8ff);
    border: 4px solid #fff;
    outline: 2px solid #36c9ec;
    box-shadow: 0 8px 18px rgba(10, 107, 162, .22);
}
.robo-arena .child-arena-premium .ra-live-bottom-nav a.is-play img {
    width: 58px;
    height: 58px;
}
.robo-arena .child-arena-premium .ra-live-bottom-nav a.is-active {
    background: transparent;
}
.robo-arena .child-arena-premium .ra-live-bottom-nav a.is-active::after {
    right: 31%;
    bottom: 3px;
    left: 31%;
    height: 4px;
}

@media (min-width: 900px) {
    .robo-arena .child-arena-premium {
        grid-template-columns: 490px minmax(0, 1fr);
        justify-content: center;
        align-items: start;
    }
    .robo-arena .child-arena-premium > .ra-live-arena {
        width: 490px;
        grid-column: 1;
    }
    .robo-arena .child-arena-premium > .ra-smart-trainer {
        grid-column: 2;
    }
}

/* FINAL-AUDIT-20260726: last-mile premium alignment after all older overrides. */
.robo-arena .arena-plan-strip .ra-trainer-cta {
    min-height: 46px !important;
    height: auto !important;
    padding: 9px 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    line-height: 1.05 !important;
}

.robo-arena .ra-world-arrow {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    display: inline-grid !important;
    place-items: center !important;
}

.robo-arena .mode-buttons .chip {
    min-height: 46px !important;
}

@media (min-width: 980px) {
    body.robo-arena-page.ra-profile-page .robo-arena.ra-child-profile {
        display: flex !important;
        justify-content: center !important;
        align-items: flex-start !important;
    }

    body.robo-arena-page.ra-profile-page .robo-arena.ra-child-profile .ra-profile-reference {
        width: min(100%, 1040px) !important;
        max-width: 1040px !important;
        margin-inline: auto !important;
        grid-template-columns: minmax(390px, 430px) minmax(420px, 1fr) !important;
        grid-template-areas:
            "top top"
            "hero mission"
            "stats list"
            "settings list" !important;
        justify-content: center !important;
        align-items: start !important;
        gap: 14px !important;
    }

    body.robo-arena-page.ra-profile-page .robo-arena.ra-child-profile .ra-profile-reference__top {
        grid-area: top !important;
        width: 430px !important;
    }

    body.robo-arena-page.ra-profile-page .robo-arena.ra-child-profile .ra-profile-reference__hero {
        grid-area: hero !important;
    }

    body.robo-arena-page.ra-profile-page .robo-arena.ra-child-profile .ra-profile-reference__stats {
        grid-area: stats !important;
    }

    body.robo-arena-page.ra-profile-page .robo-arena.ra-child-profile .ra-profile-reference__mission {
        grid-area: mission !important;
        min-height: 170px !important;
    }

    body.robo-arena-page.ra-profile-page .robo-arena.ra-child-profile .ra-profile-reference__list {
        grid-area: list !important;
        min-height: 372px !important;
    }

    body.robo-arena-page.ra-profile-page .robo-arena.ra-child-profile .ra-profile-reference__settings-panel {
        grid-area: settings !important;
    }
}

/* WORLD-CARD-ICON-NORMALIZE-20260728: identical world card frames, icon sizes, and gaps across all galaxies. */
.robo-arena .ra-world-carousel {
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) 46px !important;
    align-items: center !important;
    gap: 8px !important;
}

.robo-arena .ra-world-track {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: clamp(88px, 20vw, 126px) !important;
    gap: clamp(10px, 2.2vw, 14px) !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
}

.robo-arena .ra-world-track::-webkit-scrollbar {
    display: none !important;
}

.robo-arena .ra-world-card {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    grid-template-rows: clamp(72px, 16vw, 92px) minmax(32px, auto) 20px !important;
    align-items: start !important;
    justify-items: center !important;
    gap: 6px !important;
    padding: 10px 8px 8px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    scroll-snap-align: start !important;
}

.robo-arena .ra-world-art {
    position: relative !important;
    display: grid !important;
    width: clamp(68px, 15vw, 88px) !important;
    height: clamp(58px, 13vw, 76px) !important;
    min-width: clamp(68px, 15vw, 88px) !important;
    min-height: clamp(58px, 13vw, 76px) !important;
    margin: 0 auto !important;
    place-items: end center !important;
    overflow: visible !important;
}

.robo-arena .ra-world-art > img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center bottom !important;
    transform: none !important;
    filter: drop-shadow(0 6px 10px rgba(33, 96, 160, .22)) !important;
}

.robo-arena .ra-world-art > b {
    position: absolute !important;
    left: 50% !important;
    bottom: -2px !important;
    display: grid !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    place-items: center !important;
    transform: translateX(-50%) !important;
    border-radius: 999px !important;
    border: 2px solid rgba(255, 255, 255, .9) !important;
    background: linear-gradient(180deg, #35c9ff 0%, #127be8 100%) !important;
    box-shadow: 0 4px 10px rgba(23, 103, 196, .28) !important;
    color: #fff !important;
    font-size: .78rem !important;
    font-weight: 950 !important;
    line-height: 1 !important;
}

.robo-arena .ra-card-lock {
    position: absolute !important;
    top: 2px !important;
    right: 2px !important;
    display: grid !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    place-items: center !important;
    border-radius: 999px !important;
    background: radial-gradient(circle at 35% 28%, #fff8c7 0 20%, #ffd85c 42%, #d99b10 100%) !important;
    box-shadow: 0 4px 10px rgba(133, 92, 0, .24) !important;
}

.robo-arena .ra-card-lock > img {
    display: block !important;
    width: 72% !important;
    height: 72% !important;
    object-fit: contain !important;
}

.robo-arena .ra-world-card > strong {
    display: flex !important;
    min-height: 30px !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    color: #123a88 !important;
    font-size: clamp(.58rem, 1.9vw, .74rem) !important;
    font-weight: 950 !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
}

.robo-arena .ra-world-stars {
    display: grid !important;
    grid-template-columns: repeat(3, 13px) !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 2px !important;
    width: 43px !important;
    height: 16px !important;
    margin: 0 auto !important;
}

.robo-arena .ra-world-stars img {
    display: block !important;
    width: 13px !important;
    height: 13px !important;
    object-fit: contain !important;
}

.robo-arena .ra-world-stars img.is-empty {
    visibility: hidden !important;
    opacity: 0 !important;
}

@media (max-width: 430px) {
    .robo-arena .ra-world-carousel {
        grid-template-columns: 42px minmax(0, 1fr) 42px !important;
        gap: 6px !important;
    }

    .robo-arena .ra-world-track {
        grid-auto-columns: calc((100% - 30px) / 4) !important;
        gap: 10px !important;
    }

    .robo-arena .ra-world-card {
        grid-template-rows: 68px 30px 18px !important;
        gap: 5px !important;
        padding: 8px 6px 7px !important;
    }

    .robo-arena .ra-world-art {
        width: 64px !important;
        height: 58px !important;
        min-width: 64px !important;
        min-height: 58px !important;
    }

    .robo-arena .ra-world-card > strong {
        font-size: .56rem !important;
    }
}

@media (min-width: 720px) {
    .robo-arena .ra-world-track {
        grid-auto-columns: 128px !important;
        gap: 14px !important;
    }

    .robo-arena .ra-world-card {
        grid-template-rows: 94px 34px 20px !important;
    }

    .robo-arena .ra-world-art {
        width: 90px !important;
        height: 78px !important;
        min-width: 90px !important;
        min-height: 78px !important;
    }
}

/* PARENT-CHILDREN-RESPONSIVE-20260728 */
body.parent-premium-page .parent-premium:not(.parent-onboarding) .parent-dashboard-intro {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

body.parent-premium-page .parent-dashboard-intro__copy {
    min-width: 0;
}

body.parent-premium-page .parent-dashboard-intro__copy h1,
body.parent-premium-page .parent-dashboard-intro__copy p {
    overflow-wrap: anywhere;
}

body.parent-premium-page .parent-add-child-direct {
    display: inline-flex;
    width: auto !important;
    min-width: 188px;
    padding-inline: 20px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
}

body.parent-premium-page .parent-add-child-direct > span {
    font-size: 1.45rem;
    line-height: 1;
}

body.parent-premium-page .parent-children-heading {
    display: flex;
    margin: 2px 0 12px;
    align-items: center;
    gap: 10px;
    order: 2;
}

body.parent-premium-page .parent-children-heading h2 {
    margin: 0;
    color: #08285f;
}

body.parent-premium-page .parent-children-heading span {
    display: grid;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    place-items: center;
    border-radius: 999px;
    color: #fff;
    background: #0ea5e9;
    font-weight: 900;
}

body.parent-premium-page .parent-children-primary {
    display: grid !important;
    width: 100%;
    padding: 0 !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
    order: 3 !important;
}

body.parent-premium-page .parent-premium:not(.parent-onboarding) > .parent-action-grid {
    order: 4;
}

body.parent-premium-page .parent-premium:not(.parent-onboarding) > .parent-claims-preview {
    order: 5;
}

body.parent-premium-page .parent-children-primary .parent-featured-child {
    display: flex;
    width: 100%;
    min-width: 0 !important;
    margin: 0;
    flex-direction: column;
}

body.parent-premium-page .parent-children-primary .child-card-heading,
body.parent-premium-page .parent-children-primary .child-card-heading > div {
    min-width: 0;
}

body.parent-premium-page .parent-children-primary .child-card-heading h2,
body.parent-premium-page .parent-children-primary .child-card-heading p,
body.parent-premium-page .parent-children-primary .summary-grid strong,
body.parent-premium-page .parent-children-primary .summary-grid small {
    max-width: 100%;
    overflow-wrap: anywhere;
}

body.parent-premium-page .parent-children-primary .summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.parent-premium-page .parent-children-primary .summary-grid span {
    min-width: 0;
}

body.parent-premium-page .parent-children-primary .parent-main-cta {
    margin-top: auto;
}

@media (max-width: 960px) {
    body.parent-premium-page .parent-children-primary {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 620px) {
    body.parent-premium-page .parent-premium:not(.parent-onboarding) .parent-dashboard-intro {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
    }

    body.parent-premium-page .parent-add-child-direct {
        width: 100% !important;
        min-width: 0;
    }

    body.parent-premium-page .parent-children-primary {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
    }

    body.parent-premium-page .parent-children-primary .parent-featured-child {
        padding: 14px;
    }

    body.parent-premium-page .parent-children-primary .child-card-heading {
        display: grid;
        grid-template-columns: 68px minmax(0, 1fr);
        align-items: center;
        gap: 12px;
    }

    body.parent-premium-page .parent-children-primary .child-card-photo {
        width: 68px;
        height: 68px;
    }

    body.parent-premium-page .parent-children-primary .summary-grid {
        gap: 6px;
    }

    body.parent-premium-page .parent-children-primary .summary-grid span {
        padding-inline: 4px;
    }
}

@media (max-width: 360px) {
    body.parent-premium-page .parent-premium {
        width: min(100% - 12px, 1200px);
    }

    body.parent-premium-page .parent-children-primary .parent-featured-child {
        padding: 12px 10px;
    }

    body.parent-premium-page .parent-children-primary .child-card-heading {
        grid-template-columns: 58px minmax(0, 1fr);
        gap: 9px;
    }

    body.parent-premium-page .parent-children-primary .child-card-photo {
        width: 58px;
        height: 58px;
    }
}

/* Premium settings control: keep the generated gear optically centered at every breakpoint. */
html body.robo-arena-page .robo-arena .child-arena-premium details.ra-live-settings > summary.ra-live-icon-link {
    display: grid !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    place-items: center !important;
    line-height: 0 !important;
}

#child-arena-master #ra-live-settings-icon {
    display: block !important;
    width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    object-fit: contain !important;
    object-position: 50% 50% !important;
    transform: none !important;
}

/* Final shared child navigation contract: Pocetna, Arena, Dvoboj, Profil. */
.robo-arena .ra-live-bottom-nav,
.robo-arena .ra-reward-bottom-nav,
.robo-arena .ra-secondary-bottom-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

@media (max-width: 520px) {
    .robo-arena .child-arena-premium {
        padding: 0 0 24px;
        gap: 12px;
    }
    .robo-arena .child-arena-premium .ra-live-arena {
        width: 100%;
        height: min(calc(100dvh - 12px), 844px);
        min-height: 0;
        padding: 12px 14px 14px;
        border-width: 4px;
        border-radius: 30px;
        box-shadow: 0 14px 30px rgba(8, 91, 143, .18), inset 0 0 0 2px #c9e9f4;
    }
    .robo-arena .child-arena-premium .ra-live-header {
        height: clamp(78px, 22.3vw, 88px);
        min-height: clamp(78px, 22.3vw, 88px);
        grid-template-columns: 64px minmax(0, 1fr) 46px;
    }
    .robo-arena .child-arena-premium .ra-live-header__mentor {
        width: 58px;
        height: 58px;
    }
    .robo-arena .child-arena-premium .ra-live-header__mentor img {
        width: 54px;
        height: 54px;
    }
    .robo-arena .child-arena-premium .ra-live-header h1 {
        font-size: 1.2rem;
    }
    .robo-arena .child-arena-premium .ra-live-content {
        padding: 4px 7px 24px;
        grid-template-rows: clamp(118px, 33.2vw, 132px) 9px clamp(100px, 28vw, 112px) 26px clamp(136px, 38.2vw, 150px) 26px clamp(104px, 29vw, 114px);
    }
    .robo-arena .child-arena-premium .ra-live-profile {
        width: 100%;
        height: clamp(118px, 33.2vw, 132px);
        padding: 10px;
        grid-template-columns: clamp(76px, 23vw, 88px) minmax(0, 1fr) clamp(68px, 20vw, 78px);
        gap: 8px;
    }
    .robo-arena .child-arena-premium .ra-live-profile__avatar {
        width: clamp(72px, 22vw, 86px);
        height: clamp(72px, 22vw, 86px);
    }
    .robo-arena .child-arena-premium .ra-live-profile__avatar img {
        width: clamp(66px, 20vw, 78px);
        height: clamp(66px, 20vw, 78px);
    }
    .robo-arena .child-arena-premium .ra-live-profile__data > strong {
        font-size: 1.05rem;
    }
    .robo-arena .child-arena-premium .ra-live-profile__energy {
        min-height: 76px;
    }
    .robo-arena .child-arena-premium .ra-live-stats,
    .robo-arena .child-arena-premium .ra-live-stats article {
        height: clamp(100px, 28vw, 112px);
    }
    .robo-arena .child-arena-premium .ra-live-stats article > span,
    .robo-arena .child-arena-premium .ra-live-stats article:nth-child(2) > span,
    .robo-arena .child-arena-premium .ra-live-stats article:nth-child(3) > span {
        width: 43px;
        height: 43px;
    }
    .robo-arena .child-arena-premium .ra-live-stats img {
        width: 41px;
        height: 41px;
    }
    .robo-arena .child-arena-premium .ra-live-stats strong {
        font-size: 1.28rem;
    }
    .robo-arena .child-arena-premium .ra-live-actions,
    .robo-arena .child-arena-premium .ra-live-action {
        height: clamp(136px, 38.2vw, 150px);
    }
    .robo-arena .child-arena-premium .ra-live-action img {
        width: clamp(78px, 23vw, 92px);
        height: clamp(78px, 23vw, 92px);
    }
    .robo-arena .child-arena-premium .ra-live-action strong {
        font-size: .82rem;
    }
    .robo-arena .child-arena-premium .ra-live-goal {
        height: clamp(104px, 29vw, 114px);
        padding: 10px 9px;
        grid-template-columns: 38px minmax(0, 1fr) auto 56px;
        gap: 6px;
    }
    .robo-arena .child-arena-premium .ra-live-goal__star {
        width: 36px;
        height: 36px;
    }
    .robo-arena .child-arena-premium .ra-live-goal__chest {
        grid-column: auto;
        grid-row: auto;
        width: 54px;
        height: 52px;
    }
    .robo-arena .child-arena-premium .ra-live-goal > small {
        grid-column: auto;
        grid-row: auto;
        font-size: .58rem;
    }
    .robo-arena .child-arena-premium .ra-live-bottom-nav {
        height: clamp(96px, 27.2vw, 106px);
        min-height: clamp(96px, 27.2vw, 106px);
    }
    .robo-arena .child-arena-premium .ra-live-bottom-nav a {
        min-height: 72px;
    }
    .robo-arena .child-arena-premium .ra-live-bottom-nav a strong {
        font-size: .57rem;
    }
    .robo-arena .child-arena-premium + .arena-plan-strip {
        margin-inline: 8px;
    }
}

@media (max-width: 370px) {
    .robo-arena .child-arena-premium { gap: 25px; }
    .robo-arena .child-arena-premium .ra-live-arena { height: calc(100dvh - 25px); }
    .robo-arena .child-arena-premium .ra-live-header {
        grid-template-columns: 58px minmax(0, 1fr) 44px;
        padding-inline: 10px;
    }
    .robo-arena .child-arena-premium .ra-live-header h1 {
        font-size: 1.08rem;
    }
    .robo-arena .child-arena-premium .ra-live-profile {
        grid-template-columns: 74px minmax(0, 1fr) 66px;
        gap: 6px;
        padding: 8px;
    }
    .robo-arena .child-arena-premium .ra-live-profile__data > strong {
        font-size: .96rem;
    }
    .robo-arena .child-arena-premium .ra-live-profile__data > span,
    .robo-arena .child-arena-premium .ra-live-profile__data > small {
        font-size: .6rem;
    }
    .robo-arena .child-arena-premium .ra-live-stats {
        gap: 6px;
    }
    .robo-arena .child-arena-premium .ra-live-stats small {
        font-size: .56rem;
    }
    .robo-arena .child-arena-premium .ra-live-actions {
        gap: 6px;
    }
    .robo-arena .child-arena-premium .ra-live-action strong {
        font-size: .74rem;
    }
    .robo-arena .child-arena-premium .ra-live-goal {
        grid-template-columns: 34px minmax(0, 1fr) auto 52px;
        grid-template-rows: 1fr;
    }
    .robo-arena .child-arena-premium .ra-live-goal > small {
        grid-column: auto;
        grid-row: auto;
        font-size: .53rem;
    }
    .robo-arena .child-arena-premium .ra-live-goal__chest {
        grid-column: auto;
        grid-row: auto;
    }
    .robo-arena .child-arena-premium .ra-goal-scope { display: none; }
}

/* Compact-height QA frame requested for the 490 x 580 comparison viewport. */
@media (min-width: 440px) and (max-width: 520px) and (max-height: 650px) {
    .robo-arena .child-arena-premium .ra-live-arena {
        height: 580px;
        min-height: 580px;
        padding-block: 7px 8px;
        border-radius: 24px;
    }
    .robo-arena .child-arena-premium .ra-live-header {
        height: 60px;
        min-height: 60px;
        grid-template-columns: 54px minmax(0, 1fr) 44px;
        border-radius: 18px 18px 8px 8px;
    }
    .robo-arena .child-arena-premium .ra-live-header__mentor {
        width: 50px;
        height: 50px;
    }
    .robo-arena .child-arena-premium .ra-live-header__mentor img {
        width: 46px;
        height: 46px;
    }
    .robo-arena .child-arena-premium .ra-live-content {
        padding: 4px 7px 7px;
        grid-template-rows: 80px 68px 112px 67px;
        align-content: space-between;
        flex: 1;
    }
    .robo-arena .child-arena-premium .ra-live-content > .ra-live-profile,
    .robo-arena .child-arena-premium .ra-live-content > .ra-live-stats,
    .robo-arena .child-arena-premium .ra-live-content > .ra-live-actions,
    .robo-arena .child-arena-premium .ra-live-content > .ra-live-goal { grid-row: auto; }
    .robo-arena .child-arena-premium .ra-live-profile {
        height: 80px;
        padding: 6px 9px;
        grid-template-columns: 62px minmax(0, 1fr) 68px;
    }
    .robo-arena .child-arena-premium .ra-live-profile__avatar {
        width: 58px;
        height: 58px;
    }
    .robo-arena .child-arena-premium .ra-live-profile__avatar img {
        width: 52px;
        height: 52px;
    }
    .robo-arena .child-arena-premium .ra-live-profile__energy {
        min-height: 62px;
    }
    .robo-arena .child-arena-premium .ra-live-stats,
    .robo-arena .child-arena-premium .ra-live-stats article {
        height: 68px;
    }
    .robo-arena .child-arena-premium .ra-live-stats article {
        display: grid;
        padding: 5px;
        grid-template-columns: 34px minmax(0, 1fr);
        grid-template-rows: 1fr 1fr;
        column-gap: 4px;
    }
    .robo-arena .child-arena-premium .ra-live-stats article > span,
    .robo-arena .child-arena-premium .ra-live-stats article:nth-child(2) > span,
    .robo-arena .child-arena-premium .ra-live-stats article:nth-child(3) > span {
        width: 32px;
        height: 32px;
        grid-row: 1 / 3;
    }
    .robo-arena .child-arena-premium .ra-live-stats img {
        width: 31px;
        height: 31px;
    }
    .robo-arena .child-arena-premium .ra-live-stats strong {
        font-size: 1rem;
    }
    .robo-arena .child-arena-premium .ra-live-actions,
    .robo-arena .child-arena-premium .ra-live-action {
        height: 112px;
    }
    .robo-arena .child-arena-premium .ra-live-action img {
        width: 72px;
        height: 72px;
    }
    .robo-arena .child-arena-premium .ra-live-goal {
        height: 67px;
        padding-block: 5px;
    }
    .robo-arena .child-arena-premium .ra-live-bottom-nav {
        height: 72px;
        min-height: 72px;
        padding-block: 4px;
    }
    .robo-arena .child-arena-premium .ra-live-bottom-nav a {
        min-height: 58px;
    }
    .robo-arena .child-arena-premium .ra-live-bottom-nav a.is-play > span {
        width: 52px;
        height: 52px;
        margin-top: -20px;
    }
    .robo-arena .child-arena-premium .ra-live-bottom-nav a.is-play img {
        width: 46px;
        height: 46px;
    }
}

/* CHILD-ARENA-ASSET-EXTRACT-001: authentic isolated artwork from the approved reference. */
.robo-arena .child-arena-premium .ra-live-header__mentor img,
.robo-arena .child-arena-premium .ra-live-profile__avatar img,
.robo-arena .child-arena-premium .ra-live-profile__energy img,
.robo-arena .child-arena-premium .ra-live-stats img,
.robo-arena .child-arena-premium .ra-live-action img,
.robo-arena .child-arena-premium .ra-live-goal img,
.robo-arena .child-arena-premium .ra-live-bottom-nav img,
.robo-arena .child-arena-premium .ra-live-settings img {
    object-fit: contain;
    object-position: center;
}

.robo-arena .child-arena-premium .ra-live-header__mentor img {
    width: 56px;
    height: 62px;
}

.robo-arena .child-arena-premium .ra-live-profile__data > span {
    align-items: center;
}

.robo-arena .child-arena-premium .ra-live-profile__level-shield {
    width: 17px;
    height: 19px;
    flex: 0 0 auto;
    filter: drop-shadow(0 2px 2px rgba(0, 92, 181, .2));
}

.robo-arena .child-arena-premium .ra-live-profile__energy img {
    width: 25px;
    height: 36px;
}

.robo-arena .child-arena-premium .ra-live-action img {
    width: 70px;
    height: 72px;
}

.robo-arena .child-arena-premium .ra-live-goal__star {
    object-fit: contain;
}

.robo-arena .child-arena-premium .ra-live-goal__chest {
    object-fit: contain;
}

@media (max-width: 520px) {
    .robo-arena .child-arena-premium .ra-live-header__mentor img {
        width: 52px;
        height: 57px;
    }

    .robo-arena .child-arena-premium .ra-live-action img {
        width: clamp(58px, 17.5vw, 68px);
        height: clamp(60px, 18vw, 70px);
    }
}

@media (min-width: 440px) and (max-width: 520px) and (max-height: 650px) {
    .robo-arena .child-arena-premium .ra-live-action img {
        width: 60px;
        height: 62px;
    }
}

/* CHILD-ARENA-ASSET-COMPLETE-002: final-reference artwork and native raster sizing. */
.robo-arena .child-arena-premium .ra-live-stats img {
    width: 30px;
    height: 30px;
}

.robo-arena .child-arena-premium .ra-live-action img {
    width: 52px;
    height: 52px;
}

.robo-arena .child-arena-premium .ra-live-goal__star {
    width: 24px;
    height: 24px;
}

.robo-arena .child-arena-premium .ra-live-goal__chest {
    width: 38px;
    height: 38px;
}

.robo-arena .child-arena-premium .ra-live-bottom-nav a > img {
    width: 25px;
    height: 25px;
}

.robo-arena .child-arena-premium .ra-live-bottom-nav a.is-play img {
    width: 42px;
    height: 42px;
}

.robo-arena .ra-trainer-summary {
    display: grid;
    min-width: 0;
    grid-template-columns: 88px minmax(0, 1fr);
    align-items: end;
    gap: 12px;
}

.robo-arena .ra-trainer-mentor {
    width: 88px;
    height: 112px;
    align-self: end;
    object-fit: contain;
    filter: drop-shadow(0 7px 7px rgba(4, 94, 139, .16));
}

.robo-arena .ra-trainer-copy {
    display: grid;
    min-width: 0;
    align-content: center;
    gap: 5px;
}

.robo-arena .ra-smart-trainer .status-pill {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    gap: 7px;
    justify-self: start;
}

.robo-arena .ra-smart-trainer .status-pill img {
    width: 27px;
    height: 27px;
    object-fit: contain;
}

.robo-arena .ra-smart-trainer .ra-plan-art,
.robo-arena .game-module-head .ra-module-art {
    filter: drop-shadow(0 6px 6px rgba(8, 81, 126, .16));
}

.robo-arena .ra-trainer-cta {
    grid-template-columns: 30px minmax(0, auto);
    gap: 8px;
}

.robo-arena .ra-trainer-cta img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.robo-arena .module-reward-ribbon {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
}

.robo-arena .module-reward-ribbon img {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    object-fit: contain;
}

@media (max-width: 520px) {
    .robo-arena .child-arena-premium .ra-live-action img {
        width: 48px;
        height: 48px;
    }

    .robo-arena .ra-trainer-summary {
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 9px;
    }

    .robo-arena .ra-trainer-mentor {
        width: 72px;
        height: 96px;
    }
}

@media (min-width: 440px) and (max-width: 520px) and (max-height: 650px) {
    .robo-arena .child-arena-premium .ra-live-action img {
        width: 46px;
        height: 46px;
    }
}

/* Premium live game: CHILD-GAME-PREMIUM-002 */
body.ra-game-page {
    min-height: 100dvh;
    overflow-x: hidden;
    background: #0b8ee8;
}

.robo-arena.ra-live-game-page {
    width: 100%;
    max-width: 1360px;
    min-height: 100dvh;
    margin-inline: auto;
    padding: 16px;
}

.robo-arena .game-root {
    width: 100%;
}

.robo-arena.ra-live-game-page:has(.ra-live-game-screen:not([hidden])) {
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
}

.robo-arena .ra-live-game-screen {
    position: relative;
    display: grid;
    width: min(100%, 1280px);
    min-height: min(760px, calc(100dvh - 32px));
    margin-inline: auto;
    padding: 14px;
    grid-template-rows: auto auto 54px minmax(250px, 1fr) auto;
    gap: 10px;
    overflow: hidden;
    border: 6px solid rgba(224, 244, 255, .94);
    border-radius: 30px;
    background-color: #078be7;
    background-image:
        linear-gradient(180deg, rgba(0, 132, 226, .06), rgba(0, 68, 183, .28)),
        url("../images/robo-arena/game-arena-premium-background.png");
    background-position: center;
    background-size: cover;
    background-blend-mode: normal;
    box-shadow: 0 18px 44px rgba(3, 50, 109, .3);
    isolation: isolate;
}

.robo-arena .ra-live-game-screen::before,
.robo-arena .ra-live-game-screen::after {
    position: absolute;
    inset-inline: 0;
    z-index: -1;
    content: "";
    pointer-events: none;
}

.robo-arena .ra-live-game-screen::before {
    top: 0;
    height: 24%;
    background: linear-gradient(180deg, rgba(31, 192, 241, .18), rgba(16, 143, 230, 0));
}

.robo-arena .ra-live-game-screen::after {
    bottom: 0;
    height: 18%;
    background: linear-gradient(180deg, rgba(0, 92, 204, 0), rgba(0, 48, 148, .28));
}

.robo-arena .ra-premium-game-hud {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: 48px minmax(120px, auto) minmax(160px, 1fr) 92px 92px;
    grid-template-areas: "back mode progress score timer";
    align-items: center;
    gap: 8px;
    min-height: 68px;
    padding: 9px;
    color: #fff;
    background: linear-gradient(180deg, rgba(6, 93, 198, .96), rgba(3, 127, 219, .92));
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 19px;
    box-shadow: 0 7px 18px rgba(1, 52, 120, .25);
}

.robo-arena .ra-game-back {
    grid-area: back;
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    background: #087fd4;
    border: 1px solid rgba(255, 255, 255, .65);
    border-radius: 50%;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .36);
}

.robo-arena .ra-game-back img {
    width: 22px;
    height: 22px;
}

.robo-arena .ra-game-mode {
    grid-area: mode;
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 6px;
    color: #fff;
    font-size: 13px;
    font-weight: 950;
}

.robo-arena .ra-game-mode img {
    width: 30px;
    height: 34px;
    flex: 0 0 auto;
    object-fit: contain;
}

.robo-arena .ra-game-mode span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.robo-arena .ra-game-progress {
    grid-area: progress;
    display: grid;
    min-width: 0;
    gap: 3px;
}

.robo-arena .ra-game-progress-track {
    display: block;
    height: 16px;
    overflow: hidden;
    background: rgba(5, 69, 144, .82);
    border: 2px solid rgba(255, 255, 255, .52);
    border-radius: 999px;
}

.robo-arena .ra-game-progress-track i {
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(180deg, #45ead9, #13b7b1);
    border-radius: inherit;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
    transition: width .24s ease;
}

.robo-arena .ra-game-progress small {
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    text-align: center;
}

.robo-arena .ra-hud-stat {
    display: flex;
    min-width: 0;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 4px 8px;
    color: #08285f;
    background: rgba(255, 255, 255, .97);
    border: 1px solid rgba(215, 235, 245, .95);
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(3, 51, 109, .16);
}

.robo-arena .ra-hud-stat--score {
    grid-area: score;
}

.robo-arena .ra-hud-stat--timer {
    grid-area: timer;
}

.robo-arena .ra-hud-stat img {
    width: 25px;
    height: 25px;
    flex: 0 0 auto;
}

.robo-arena .ra-hud-stat > span {
    display: grid;
    min-width: 0;
    line-height: 1;
}

.robo-arena .ra-hud-stat small {
    color: #52708b;
    font-size: 8px;
    font-weight: 900;
}

.robo-arena .ra-hud-stat strong {
    margin-top: 3px;
    font-size: 18px;
}

.robo-arena .ra-timer-symbol {
    position: relative;
    width: 23px;
    height: 23px;
    flex: 0 0 auto;
    border: 3px solid #14b8a6;
    border-radius: 50%;
}

.robo-arena .ra-timer-symbol::before {
    position: absolute;
    top: -6px;
    left: 6px;
    width: 7px;
    height: 4px;
    content: "";
    background: #14b8a6;
    border-radius: 3px;
}

.robo-arena .ra-timer-symbol::after {
    position: absolute;
    top: 4px;
    left: 8px;
    width: 2px;
    height: 7px;
    content: "";
    background: #0b5e8e;
    transform: rotate(-28deg);
    transform-origin: bottom center;
}

.robo-arena .ra-hud-stat--timer.is-urgent {
    color: #9d1f2c;
    background: #fff2f2;
    outline: 3px solid rgba(255, 213, 79, .72);
}

.robo-arena .ra-hud-stat--timer.is-urgent::after {
    align-self: end;
    content: "USKORO";
    color: #9d1f2c;
    font-size: 7px;
    font-weight: 950;
}

.robo-arena .ra-premium-question-card {
    position: relative;
    z-index: 3;
    display: grid;
    width: min(100%, 650px);
    min-height: 180px;
    margin: 0 auto;
    padding: 12px 20px;
    place-items: center;
    align-content: center;
    gap: 10px;
    background: rgba(255, 255, 255, .98);
    border: 1px solid #d7eaf3;
    border-radius: 24px;
    box-shadow: 0 11px 24px rgba(3, 51, 109, .22);
}

.robo-arena .ra-question-kicker {
    color: #087cc6;
    font-size: 11px;
    font-weight: 950;
}

.robo-arena .ra-live-game-screen .big-task {
    width: auto;
    color: #062a62;
    font-size: 58px;
    font-weight: 950;
    line-height: 1;
    text-align: center;
}

.robo-arena .ra-equation-row {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

.robo-arena .ra-answer-field {
    display: grid;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: #52708b;
    font-size: 9px;
    font-weight: 950;
}

.robo-arena .ra-answer-field .answer-input {
    width: 138px;
    min-height: 62px;
    padding: 4px 10px;
    color: #08285f;
    background: #f7fcff;
    border: 3px solid #22c8cf;
    border-radius: 14px;
    box-shadow: inset 0 2px 5px rgba(7, 92, 139, .08), 0 0 0 4px rgba(34, 211, 238, .12);
    font-size: 34px;
    font-weight: 950;
    line-height: 1;
    text-align: center;
}

.robo-arena .ra-answer-field .answer-input:focus-visible {
    outline: 4px solid #ffd54f;
    outline-offset: 2px;
}

.robo-arena .ra-game-feedback {
    position: relative;
    z-index: 4;
    display: flex;
    width: min(100%, 650px);
    min-height: 54px;
    margin-inline: auto;
    padding: 7px 14px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #fff;
    background: rgba(4, 64, 143, .78);
    border: 1px solid rgba(255, 255, 255, .42);
    border-radius: 16px;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.25;
    text-align: center;
}

.robo-arena .ra-game-feedback:empty::before {
    content: "UPI\0160I ODGOVOR I POTVRDI";
    opacity: .8;
}

.robo-arena .ra-game-feedback.good {
    color: #06473f;
    background: #bcfff2;
    border-color: #15b9a8;
}

.robo-arena .ra-game-feedback.bad {
    color: #8d1e28;
    background: #fff0f1;
    border-color: #ff6b6b;
}

.robo-arena .ra-game-feedback.speed {
    color: #714900;
    background: #fff6c7;
    border-color: #ffd54f;
}

.robo-arena .ra-game-feedback.good::before {
    content: "\2713";
}

.robo-arena .ra-game-feedback.bad::before {
    content: "\00D7";
}

.robo-arena .ra-game-feedback.good::before,
.robo-arena .ra-game-feedback.bad::before {
    display: grid;
    width: 25px;
    height: 25px;
    flex: 0 0 auto;
    place-items: center;
    color: #fff;
    background: #14b8a6;
    border-radius: 50%;
    font-size: 17px;
    font-weight: 950;
}

.robo-arena .ra-game-feedback.bad::before {
    background: #ff6b6b;
}

.robo-arena .ra-game-workbench {
    position: relative;
    z-index: 3;
    display: grid;
    width: min(100%, 790px);
    margin-inline: auto;
    grid-template-columns: minmax(170px, 230px) minmax(280px, 360px);
    align-items: end;
    justify-content: center;
    gap: 22px;
}

.robo-arena .ra-live-game-screen .game-character-strip {
    position: relative;
    inset: auto;
    display: flex;
    width: 100%;
    margin: 0;
    padding: 0;
    flex-direction: column;
    justify-content: flex-end;
    justify-items: center;
    background: transparent;
    border: 0;
}

.robo-arena .ra-live-game-screen .game-character-strip figcaption {
    max-width: 100%;
    overflow: hidden;
    color: #fff;
    font-size: 10px;
    font-weight: 950;
    text-overflow: ellipsis;
    text-shadow: 0 2px 4px rgba(2, 35, 83, .75);
    white-space: nowrap;
}

.robo-arena .ra-live-game-screen .ra-game-mentor {
    position: relative;
    inset: auto;
    display: block;
    width: 100%;
    height: min(330px, 38dvh);
    object-fit: contain;
    object-position: center bottom;
    filter: saturate(1.04) contrast(1.02) drop-shadow(0 14px 12px rgba(3, 44, 96, .34));
    transform: none;
}

.robo-arena .ra-live-game-screen .keypad {
    display: grid;
    width: 100%;
    margin: 0;
    padding: 10px;
    grid-template-columns: repeat(3, minmax(56px, 1fr));
    gap: 8px;
    background: linear-gradient(180deg, rgba(245, 252, 255, .98), rgba(218, 241, 252, .97));
    border: 2px solid rgba(255, 255, 255, .88);
    border-radius: 20px;
    box-shadow: 0 14px 28px rgba(2, 45, 105, .28), inset 0 1px 0 #fff;
}

.robo-arena .ra-live-game-screen .keypad button {
    min-width: 56px;
    min-height: 56px;
    padding: 5px;
    color: #062a62;
    background: linear-gradient(180deg, #fff 0%, #f5fbff 72%, #e3f2fa 100%);
    border: 2px solid #c8e3ef;
    border-radius: 13px;
    box-shadow: 0 5px 0 #b8d8e8, 0 7px 12px rgba(3, 51, 109, .14), inset 0 1px 0 #fff;
    font-size: 23px;
    font-weight: 950;
}

.robo-arena .ra-live-game-screen .keypad button.is-delete {
    color: #fff;
    background: linear-gradient(180deg, #2cc9f0, #078bd4);
    border-color: #66d9f3;
    box-shadow: 0 5px 0 #0879bc, 0 7px 12px rgba(3, 51, 109, .18);
    font-size: 11px;
}

.robo-arena .ra-live-game-screen .keypad button.is-confirm {
    color: #fff;
    background: linear-gradient(180deg, #35dfcc, #10aa9b);
    border-color: #79eddf;
    box-shadow: 0 5px 0 #07877d, 0 7px 12px rgba(3, 51, 109, .18);
    font-size: 10px;
}

.robo-arena .ra-live-game-screen .keypad button:hover:not(:disabled) {
    border-color: #22d3ee;
    transform: translateY(-1px);
}

.robo-arena .ra-live-game-screen .keypad button:active:not(:disabled) {
    box-shadow: 0 2px 0 #9fc8da, 0 3px 7px rgba(3, 51, 109, .14);
    transform: translateY(3px);
}

.robo-arena .ra-live-game-screen .keypad button:focus-visible,
.robo-arena .ra-game-back:focus-visible,
.robo-arena .ra-game-exit:focus-visible {
    outline: 4px solid #ffd54f;
    outline-offset: 2px;
}

.robo-arena .ra-live-game-screen .keypad button:disabled {
    color: #6c8192;
    background: #dbe7ed;
    box-shadow: none;
    cursor: wait;
    opacity: .76;
}

.robo-arena .ra-gameplay-footer {
    position: relative;
    z-index: 5;
    display: flex;
    width: min(100%, 700px);
    min-height: 48px;
    margin-inline: auto;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.robo-arena .ra-game-streak,
.robo-arena .ra-game-exit {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid rgba(255, 255, 255, .55);
    box-shadow: 0 5px 12px rgba(3, 51, 109, .18);
}

.robo-arena .ra-game-streak {
    min-width: 104px;
    padding: 5px 12px;
    color: #08285f;
    background: rgba(255, 255, 255, .96);
    border-radius: 15px;
}

.robo-arena .ra-game-streak img {
    width: 25px;
    height: 25px;
}

.robo-arena .ra-game-streak span {
    display: grid;
    line-height: 1;
}

.robo-arena .ra-game-streak small {
    color: #62798d;
    font-size: 8px;
    font-weight: 900;
}

.robo-arena .ra-game-streak strong {
    margin-top: 3px;
    font-size: 17px;
}

.robo-arena .ra-game-exit {
    min-width: 138px;
    padding: 7px 14px;
    color: #fff;
    background: linear-gradient(180deg, #9d67ed, #7745d2);
    border-radius: 15px;
    font-size: 11px;
    font-weight: 950;
    text-decoration: none;
}

.robo-arena .ra-game-exit img {
    width: 21px;
    height: 21px;
}

.robo-arena .ra-premium-finish {
    position: relative;
    width: min(100%, 900px);
    min-height: min(720px, calc(100dvh - 32px));
    margin-inline: auto;
    padding: 22px;
    overflow: hidden;
    color: #fff;
    background:
        linear-gradient(180deg, rgba(4, 83, 191, .24), rgba(0, 54, 151, .74)),
        #067fd7 url("../images/robo-arena/game-arena-premium-background.png") center / cover no-repeat;
    border: 6px solid #dceef7;
    border-radius: 30px;
    box-shadow: 0 18px 44px rgba(3, 50, 109, .3);
}

.robo-arena .ra-finish-banner {
    width: min(100%, 560px);
    margin: 0 auto 16px;
    padding: 10px 20px;
    color: #fff;
    background: linear-gradient(180deg, #22b8f0, #0878dc);
    border: 2px solid rgba(255, 255, 255, .5);
    border-radius: 18px;
    box-shadow: 0 8px 18px rgba(2, 42, 100, .26);
    text-align: center;
}

.robo-arena .ra-finish-banner span {
    font-size: 11px;
    font-weight: 950;
}

.robo-arena .ra-finish-banner h1 {
    margin: 3px 0 0;
    color: #fff;
    font-size: 28px;
}

.robo-arena .ra-finish-content {
    display: grid;
    grid-template-columns: minmax(140px, 220px) minmax(0, 1fr);
    align-items: end;
    gap: 18px;
}

.robo-arena .ra-finish-mentor {
    width: 100%;
    height: 330px;
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 12px 13px rgba(2, 38, 88, .3));
}

.robo-arena .ra-premium-finish .finish-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.robo-arena .ra-premium-finish .finish-grid article {
    display: grid;
    min-width: 0;
    min-height: 76px;
    padding: 12px;
    place-items: center;
    align-content: center;
    color: #08285f;
    background: rgba(255, 255, 255, .97);
    border: 1px solid #d5e8f1;
    border-radius: 16px;
    box-shadow: 0 6px 14px rgba(3, 51, 109, .17);
    text-align: center;
}

.robo-arena .ra-premium-finish .finish-grid article.is-primary {
    color: #7d4e00;
    background: #fff7ce;
    border-color: #ffd54f;
}

.robo-arena .ra-premium-finish .finish-grid article.is-bonus {
    color: #064c37;
    background: linear-gradient(180deg, #dcfff3, #adffe5);
    border-color: #37e3b0;
    box-shadow: 0 8px 18px rgba(0, 167, 132, .2);
}

.robo-arena .ra-premium-finish .finish-grid article.is-wide {
    grid-column: 1 / -1;
}

.robo-arena .ra-premium-finish .finish-grid span {
    max-width: 100%;
    overflow-wrap: anywhere;
    font-size: 27px;
    font-weight: 950;
}

.robo-arena .ra-premium-finish .finish-grid small {
    margin-top: 4px;
    color: #526f88;
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
}

.robo-arena .ra-premium-finish .finish-loading {
    grid-column: 1 / -1;
    color: #fff;
    font-weight: 900;
    text-align: center;
}

.robo-arena .ra-premium-finish .badge-animation {
    width: min(100%, 600px);
    min-height: 84px;
    margin: 14px auto 0;
    padding: 10px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #6c4300;
    background: #fff5c3;
    border: 2px solid #ffd54f;
    border-radius: 16px;
}

.robo-arena .ra-premium-finish .badge-animation > img,
.robo-arena .ra-premium-finish .skin-card-avatar img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.robo-arena .ra-premium-finish .badge-animation:has(> img) {
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-rows: auto auto;
}

.robo-arena .ra-premium-finish .badge-animation > img {
    grid-column: 1;
    grid-row: 1 / 3;
}

.robo-arena .ra-premium-finish .badge-animation > strong,
.robo-arena .ra-premium-finish .badge-animation > span {
    grid-column: 2;
    text-align: left;
}

.robo-arena .ra-premium-finish .finish-grid .is-message span {
    font-size: 16px;
    line-height: 1.35;
}

.robo-arena .ra-finish-actions {
    display: flex;
    width: min(100%, 640px);
    margin: 18px auto 0;
    flex-wrap: wrap;
    justify-content: center;
    gap: 9px;
}

.robo-arena .ra-finish-actions .btn {
    min-height: 48px;
    min-width: 160px;
    border-radius: 14px;
}

.robo-arena .ra-finish-actions .btn.secondary {
    color: #08285f;
    background: #fff;
    border-color: #cde5ef;
}

.robo-arena .ra-finish-home {
    display: inline-flex;
    min-height: 44px;
    padding: 8px 14px;
    align-items: center;
    color: #fff;
    font-size: 11px;
    font-weight: 900;
}

.robo-arena .ra-live-game-screen.answer-good .ra-premium-question-card,
.robo-arena .ra-premium-question-card.answer-good {
    box-shadow: 0 0 0 5px rgba(20, 184, 166, .42), 0 11px 24px rgba(3, 51, 109, .22);
}

.robo-arena .ra-live-game-screen.answer-bad .ra-premium-question-card,
.robo-arena .ra-premium-question-card.answer-bad {
    box-shadow: 0 0 0 5px rgba(255, 107, 107, .4), 0 11px 24px rgba(3, 51, 109, .22);
}

@media (max-width: 620px) {
    .robo-arena.ra-live-game-page {
        padding: 0;
    }

    .robo-arena.ra-live-game-page:has(.ra-live-game-screen:not([hidden])) {
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
    }

    .robo-arena.ra-live-game-page:has(.ra-premium-finish:not([hidden])) {
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
    }

    .robo-arena .ra-live-game-screen {
        width: 100%;
        height: 100dvh;
        min-height: 0;
        padding: 8px;
        grid-template-rows: 78px 180px 50px minmax(0, 1fr) 48px;
        gap: 6px;
        border: 0;
        border-radius: 0;
        background-position: center bottom;
    }

    .robo-arena .ra-premium-game-hud {
        grid-template-columns: 44px minmax(0, 1fr) 70px 70px;
        grid-template-areas:
            "back mode score timer"
            "progress progress progress progress";
        gap: 6px;
        min-height: 78px;
        padding: 6px;
        border-radius: 16px;
    }

    .robo-arena .ra-game-progress {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 7px;
    }

    .robo-arena .ra-game-progress small {
        min-width: 64px;
        text-align: right;
    }

    .robo-arena .ra-game-mode {
        font-size: 10px;
    }

    .robo-arena .ra-game-mode img {
        width: 26px;
        height: 29px;
    }

    .robo-arena .ra-hud-stat {
        min-height: 42px;
        padding: 3px 5px;
    }

    .robo-arena .ra-hud-stat img,
    .robo-arena .ra-timer-symbol {
        width: 20px;
        height: 20px;
    }

    .robo-arena .ra-hud-stat small {
        font-size: 7px;
    }

    .robo-arena .ra-hud-stat strong {
        font-size: 16px;
    }

    .robo-arena .ra-premium-question-card {
        min-height: 180px;
        padding: 10px 12px;
        gap: 8px;
        border-radius: 20px;
    }

    .robo-arena .ra-equation-row {
        gap: 9px;
    }

    .robo-arena .ra-live-game-screen .big-task {
        font-size: 42px;
    }

    .robo-arena .ra-answer-field .answer-input {
        width: 104px;
        min-height: 58px;
        font-size: 30px;
    }

    .robo-arena .ra-game-feedback {
        min-height: 50px;
        padding: 6px 10px;
        border-radius: 13px;
        font-size: 11px;
    }

    .robo-arena .ra-game-workbench {
        grid-template-columns: minmax(96px, 112px) minmax(210px, 244px);
        align-items: center;
        align-self: start;
        gap: 7px;
    }

    .robo-arena .ra-live-game-screen .game-character-strip {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    .robo-arena .ra-live-game-screen .ra-game-mentor {
        width: 100%;
        height: 204px;
        flex: 0 0 auto;
    }

    .robo-arena .ra-live-game-screen .keypad {
        padding: 6px;
        gap: 5px;
        border-radius: 16px;
    }

    .robo-arena .ra-live-game-screen .keypad button {
        min-width: 56px;
        min-height: 56px;
        border-radius: 10px;
        font-size: 20px;
    }

    .robo-arena .ra-live-game-screen .keypad button.is-delete,
    .robo-arena .ra-live-game-screen .keypad button.is-confirm {
        font-size: 9px;
    }

    .robo-arena .ra-gameplay-footer {
        min-height: 45px;
    }

    .robo-arena .ra-game-streak,
    .robo-arena .ra-game-exit {
        min-height: 44px;
    }

    .robo-arena .ra-premium-finish {
        min-height: 100dvh;
        padding: 14px 10px;
        border: 0;
        border-radius: 0;
    }

    .robo-arena .ra-finish-banner {
        margin-bottom: 10px;
        padding: 8px 14px;
    }

    .robo-arena .ra-finish-banner h1 {
        font-size: 23px;
    }

    .robo-arena .ra-finish-content {
        grid-template-columns: 92px minmax(0, 1fr);
        gap: 7px;
    }

    .robo-arena .ra-finish-mentor {
        height: 180px;
    }

    .robo-arena .ra-premium-finish .finish-grid {
        gap: 7px;
    }

    .robo-arena .ra-premium-finish .finish-grid article {
        min-height: 60px;
        padding: 8px 5px;
        border-radius: 12px;
    }

    .robo-arena .ra-premium-finish .finish-grid span {
        font-size: 20px;
    }

    .robo-arena .ra-premium-finish .finish-grid .is-message span {
        font-size: 14px;
    }

    .robo-arena .ra-premium-finish .badge-animation {
        min-height: 84px;
        padding: 10px;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }

    .robo-arena .ra-finish-actions {
        margin-top: 12px;
        gap: 7px;
    }

    .robo-arena .ra-finish-actions .btn {
        min-width: 0;
        flex: 1 1 120px;
    }

    .robo-arena .ra-finish-actions .btn.secondary {
        color: #08285f;
        background: #fff;
        border-color: #cde5ef;
    }
}

@media (max-width: 370px) {
    .robo-arena .ra-live-game-screen {
        grid-template-rows: 76px 164px 48px minmax(0, 1fr) 46px;
    }

    .robo-arena .ra-live-game-screen .big-task {
        font-size: 37px;
    }

    .robo-arena .ra-answer-field .answer-input {
        width: 96px;
        min-height: 54px;
    }

    .robo-arena .ra-game-workbench {
        grid-template-columns: 90px minmax(204px, 244px);
    }

    .robo-arena .ra-live-game-screen .ra-game-mentor {
        height: 184px;
    }

    .robo-arena .ra-live-game-screen .keypad button {
        min-width: 56px;
        min-height: 56px;
    }

    .robo-arena .ra-game-exit {
        min-width: 128px;
    }

    .robo-arena .ra-premium-finish {
        padding: 6px 10px 8px;
    }

    .robo-arena .ra-finish-banner {
        min-height: 58px;
        margin-bottom: 8px;
        padding: 7px 12px;
    }

    .robo-arena .ra-finish-banner h1 {
        font-size: 21px;
    }

    .robo-arena .ra-finish-content {
        grid-template-columns: 84px minmax(0, 1fr);
        gap: 6px;
    }

    .robo-arena .ra-finish-mentor {
        height: 158px;
    }

    .robo-arena .ra-premium-finish .finish-grid {
        gap: 6px;
    }

    .robo-arena .ra-premium-finish .finish-grid article {
        min-height: 53px;
        padding: 6px 5px;
    }

    .robo-arena .ra-premium-finish .finish-grid span {
        font-size: 18px;
    }

    .robo-arena .ra-premium-finish .finish-grid small {
        font-size: 8px;
    }

    .robo-arena .ra-premium-finish .finish-grid .is-message span {
        font-size: 13px;
    }

    .robo-arena .ra-premium-finish .badge-animation {
        min-height: 74px;
        margin-top: 8px;
        padding: 7px;
        gap: 7px;
    }

    .robo-arena .ra-premium-finish .skin-unlock {
        gap: 8px;
    }

    .robo-arena .ra-premium-finish .badge-animation > img,
    .robo-arena .ra-premium-finish .skin-card-avatar img {
        width: 40px;
        height: 40px;
    }

    .robo-arena .ra-finish-actions {
        margin-top: 8px;
        gap: 6px;
    }

    .robo-arena .ra-finish-actions .btn,
    .robo-arena .ra-finish-home {
        min-height: 42px;
    }
}

@media (min-width: 900px) and (min-height: 600px) {
    .robo-arena .ra-live-game-screen {
        height: calc(100dvh - 32px);
        min-height: 720px;
        grid-template-columns: minmax(260px, .78fr) minmax(410px, 1.28fr) minmax(300px, .88fr);
        grid-template-rows: 70px minmax(0, 1fr) 56px;
        gap: 12px 24px;
    }

    .robo-arena .ra-premium-game-hud {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .robo-arena .ra-premium-question-card {
        grid-column: 2;
        grid-row: 2;
        width: 100%;
        min-height: 240px;
        align-self: center;
    }

    .robo-arena .ra-game-feedback {
        grid-column: 2;
        grid-row: 3;
        width: 100%;
    }

    .robo-arena .ra-game-workbench {
        display: contents;
    }

    .robo-arena .ra-live-game-screen .game-character-strip {
        grid-column: 1;
        grid-row: 2;
        align-self: center;
    }

    .robo-arena .ra-live-game-screen .ra-game-mentor {
        height: min(430px, 52dvh);
    }

    .robo-arena .ra-live-game-screen .keypad {
        grid-column: 3;
        grid-row: 2 / 4;
        align-self: center;
    }

    .robo-arena .ra-live-game-screen .keypad button {
        min-height: 68px;
        font-size: 26px;
    }

    .robo-arena .ra-gameplay-footer {
        grid-column: 1;
        grid-row: 3;
        width: 100%;
    }
}

@media (orientation: landscape) and (max-height: 500px) {
    .robo-arena.ra-live-game-page {
        max-width: none;
        padding: 0;
    }

    .robo-arena.ra-live-game-page:has(.ra-live-game-screen:not([hidden])) {
        width: 100vw;
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
    }

    .robo-arena .ra-live-game-screen {
        width: 100%;
        min-height: 100dvh;
        height: 100dvh;
        padding: 7px;
        grid-template-columns: 142px minmax(260px, 1fr) minmax(238px, 286px);
        grid-template-rows: 58px minmax(0, 1fr) 48px;
        gap: 7px 10px;
        border: 0;
        border-radius: 0;
    }

    .robo-arena .ra-premium-game-hud {
        grid-column: 1 / -1;
        grid-row: 1;
        grid-template-columns: 44px minmax(112px, auto) minmax(140px, 1fr) 82px 82px;
        grid-template-areas: "back mode progress score timer";
        min-height: 58px;
    }

    .robo-arena .ra-premium-question-card {
        grid-column: 2;
        grid-row: 2;
        align-self: center;
        min-height: 170px;
        padding: 8px 12px;
    }

    .robo-arena .ra-live-game-screen .big-task {
        font-size: 42px;
    }

    .robo-arena .ra-equation-row {
        gap: 10px;
    }

    .robo-arena .ra-answer-field .answer-input {
        width: 104px;
        min-height: 54px;
    }

    .robo-arena .ra-game-feedback {
        grid-column: 2;
        grid-row: 3;
        min-height: 44px;
        align-self: end;
    }

    .robo-arena .ra-game-workbench {
        display: contents;
    }

    .robo-arena .ra-live-game-screen .game-character-strip {
        grid-column: 1;
        grid-row: 2 / 4;
        display: flex;
        padding-bottom: 48px;
        flex-direction: column;
        justify-content: flex-end;
        align-self: end;
    }

    .robo-arena .ra-live-game-screen .ra-game-mentor {
        width: 100%;
        height: min(190px, 46dvh);
        flex: 0 0 auto;
    }

    .robo-arena .ra-live-game-screen .keypad {
        grid-column: 3;
        grid-row: 2 / 4;
        align-self: center;
        padding: 5px;
        gap: 4px;
    }

    .robo-arena .ra-live-game-screen .keypad button {
        min-height: 56px;
    }

    .robo-arena .ra-gameplay-footer {
        position: absolute;
        z-index: 7;
        bottom: 7px;
        left: 8px;
        width: 142px;
        pointer-events: none;
    }

    .robo-arena .ra-gameplay-footer > * {
        pointer-events: auto;
    }

    .robo-arena .ra-game-streak,
    .robo-arena .ra-game-exit {
        min-height: 42px;
    }

    .robo-arena .ra-game-exit {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .robo-arena .ra-game-progress-track i,
    .robo-arena .ra-live-game-screen .keypad button,
    .robo-arena .ra-premium-question-card {
        transition: none;
        animation: none;
    }
}

/* CORE-VISUAL-CONSISTENCY-001: shared canonical presentation for active flows. */
body.flow-auth-page,
body.parent-premium-page,
body.ra-results-page,
body.ra-rewards-page {
    min-width: 320px;
    color: #08285f;
    background: #eaf8fd;
}

.robo-arena .flow-phone {
    border: 4px solid rgba(255,255,255,.96);
    background: #f8fdff;
    box-shadow: 0 22px 54px rgba(4,66,113,.22), inset 0 0 0 2px #cdeaf4;
}

.robo-arena .flow-hero {
    background-color: #078be3;
    background-position: center 48%;
    box-shadow: inset 0 -42px 54px rgba(1,71,157,.28);
}

.robo-arena .flow-hero::after {
    height: 54px;
    background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.2));
}

.robo-arena .flow-start .flow-hero {
    height: min(374px, 44dvh);
    min-height: 338px;
    padding-top: 13px;
    background-position: center 55%;
}

.robo-arena .flow-logo {
    filter: drop-shadow(0 8px 12px rgba(0,41,96,.3));
}

.robo-arena .flow-start .flow-logo {
    z-index: 3;
    width: clamp(132px, 38vw, 166px);
    height: auto;
    margin-top: 0;
    filter: drop-shadow(0 10px 15px rgba(0,36,92,.36));
}

.robo-arena .flow-mentor {
    object-fit: contain;
    filter: drop-shadow(0 14px 16px rgba(0,38,91,.3));
}

.robo-arena .flow-start .flow-mentor {
    z-index: 2;
    width: auto;
    height: clamp(164px, 21dvh, 178px);
    bottom: 5px;
    object-fit: contain;
    filter: drop-shadow(0 16px 18px rgba(0,36,92,.34));
}

.robo-arena .flow-start .flow-sheet {
    margin-top: -14px;
}

.robo-arena .flow-sheet {
    border-radius: 26px 26px 0 0;
    box-shadow: 0 -12px 30px rgba(0,72,126,.12);
}

.robo-arena .flow-sheet h1 {
    color: #061f59;
    font-weight: 1000;
}

.robo-arena .flow-button {
    min-height: 62px;
    border: 2px solid rgba(255,255,255,.74);
    border-radius: 16px;
    box-shadow: 0 8px 16px rgba(5,74,123,.18), inset 0 -3px 0 rgba(0,52,104,.12), inset 0 1px 0 rgba(255,255,255,.28);
}

.robo-arena .flow-button--green {
    background: linear-gradient(135deg,#16c7b1,#0a9fbd);
}

.robo-arena .flow-button--blue {
    background: linear-gradient(135deg,#0a8fe8,#0eabe0);
}

.robo-arena .flow-button--install {
    color: #0b3d72;
    border-color: #f1c84f;
    background: #fff9df;
}

.robo-arena .flow-button--install img {
    filter: drop-shadow(0 3px 4px rgba(217,151,0,.24));
}

.robo-arena .flow-button--google {
    border-color: #cfe2ed;
    background: #fff;
    box-shadow: 0 7px 15px rgba(5,74,123,.1);
}

.robo-arena .flow-form input,
.robo-arena .flow-form .flow-select {
    border-radius: 12px;
    background: #fff;
    box-shadow: inset 0 2px 5px rgba(4,73,125,.05);
}

.robo-arena .flow-child-login #child-id {
    min-height: 68px;
    padding-inline: 18px;
    color: #052866;
    border: 3px solid #8bd8ed;
    background: repeating-linear-gradient(90deg,#fff 0,#fff calc(12.5% - 2px),#d8eef5 calc(12.5% - 2px),#d8eef5 12.5%);
    font-size: clamp(1.3rem,7vw,2rem);
    font-weight: 1000;
    letter-spacing: .16em;
    text-align: center;
}

.robo-arena .flow-info-strip {
    border-radius: 12px;
    background: #eefaff;
}

.parent-premium-page .parent-topbar {
    position: sticky;
    z-index: 70;
    top: 0;
    min-height: 70px;
    border-bottom: 1px solid #cce6f0;
    background: rgba(255,255,255,.97);
    box-shadow: 0 8px 22px rgba(4,74,124,.1);
}

.parent-premium-page .parent-topbar .brand {
    color: #08326b;
    font-weight: 950;
}

.parent-premium-page .parent-brand-logo {
    width: 58px;
    height: 50px;
    object-fit: contain;
}

.parent-premium-page .parent-topbar .nav-actions a {
    min-height: 44px;
    padding: 10px 13px;
    border-radius: 8px;
    color: #315a7a;
    font-weight: 900;
}

.parent-premium-page .parent-topbar .nav-actions a:hover,
.parent-premium-page .parent-topbar .nav-actions a:focus-visible {
    color: #007fc7;
    background: #ebf8fd;
}

.parent-premium-page .parent-page {
    width: min(calc(100% - 24px),1180px);
    margin-inline: auto;
    padding-bottom: 102px;
}

.parent-premium-page .parent-page > .panel,
.parent-premium-page .parent-page .reward-card,
.parent-premium-page .parent-page > .profile-hero,
.parent-premium-page .parent-page .claim-card,
.parent-premium-page .parent-page .reward-level-card {
    border: 1px solid #c8e6f1;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(5,74,122,.11), inset 0 1px 0 #fff;
}

.parent-premium-page .parent-onboarding-hero {
    position: relative;
    min-height: 260px;
    overflow: hidden;
    color: #fff;
    border: 4px solid #fff;
    border-radius: 20px;
    background: #087fdf url('../images/robo-arena/game-arena-premium-background.png') center 45% / cover no-repeat;
    box-shadow: 0 16px 35px rgba(4,65,122,.2);
}

.parent-premium-page .parent-onboarding-hero::after {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(90deg,rgba(2,40,103,.88),rgba(2,76,151,.46) 58%,rgba(2,76,151,.08));
    content: '';
}

.parent-premium-page .parent-onboarding-hero > * {
    position: relative;
    z-index: 1;
}

.parent-premium-page .parent-onboarding-hero h1,
.parent-premium-page .parent-onboarding-hero p,
.parent-premium-page .parent-onboarding-hero .eyebrow {
    color: #fff;
}

.parent-premium-page .parent-onboarding-mentor,
.parent-premium-page .setup-mentor,
.parent-premium-page .onboarding-complete-card > img {
    object-fit: contain;
    filter: drop-shadow(0 12px 14px rgba(0,35,83,.3));
}

.parent-premium-page .onboarding-steps article,
.parent-premium-page .onboarding-steps > div {
    border-radius: 12px;
    background: #f5fbfe;
}

.parent-premium-page .onboarding-steps .is-current {
    border-color: #0ea5e9;
    background: #edf9ff;
    box-shadow: 0 7px 16px rgba(14,165,233,.13);
}

.parent-premium-page .onboarding-steps .is-complete {
    border-color: #5ed2bd;
    background: #effcf8;
}

.parent-premium-page .parent-child-setup,
.parent-premium-page .onboarding-id-card,
.parent-premium-page .onboarding-complete-card {
    border-top: 5px solid #0ea5e9;
}

.parent-premium-page .onboarding-child-id {
    border: 2px dashed #0ea5e9;
    border-radius: 14px;
    background: #effaff;
    color: #06367c;
}

.parent-premium-page .avatar-choice button {
    border-radius: 50%;
    background: #f5fcff;
}

.parent-premium-page .parent-dashboard-intro {
    padding: 22px 24px;
    border-radius: 16px;
    background: #083879 url('../images/robo-arena/game-arena-premium-background.png') center 45% / cover no-repeat;
    box-shadow: 0 14px 30px rgba(4,63,113,.18);
}

.parent-premium-page .parent-dashboard-intro h1,
.parent-premium-page .parent-dashboard-intro p,
.parent-premium-page .parent-dashboard-intro .eyebrow {
    color: #fff;
    text-shadow: 0 2px 4px rgba(0,40,92,.28);
}

.parent-premium-page .parent-featured-child {
    border-top: 5px solid #14b8a6;
}

.parent-premium-page .parent-action-grid a {
    min-height: 130px;
    border: 1px solid #cbe7f2;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 9px 20px rgba(5,74,122,.1);
}

.parent-premium-page .parent-action-grid img {
    width: 52px;
    height: 52px;
    object-fit: contain;
}

.parent-premium-page .profile-hero.compact {
    overflow: hidden;
    border-top: 5px solid #0ea5e9;
}

.parent-premium-page .summary-grid .metric-card,
.parent-premium-page .summary-grid > span {
    min-height: 100px;
    border: 1px solid #cde7f1;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(5,74,122,.09);
}

.parent-premium-page .parent-bottom-nav {
    border: 1px solid #bde2ee;
    border-radius: 18px;
    background: rgba(255,255,255,.97);
    box-shadow: 0 14px 34px rgba(4,66,112,.2);
}

body.ra-results-page,
body.ra-rewards-page {
    padding-bottom: 86px;
}

.robo-arena.ra-live-results,
.robo-arena.ra-live-rewards {
    width: min(calc(100% - 24px),1180px);
    margin-inline: auto;
    padding-bottom: 98px;
}

.robo-arena.ra-live-results .profile-hero,
.robo-arena.ra-live-rewards .ra-reward-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    border: 4px solid #fff;
    border-radius: 20px;
    background: #087fdf url('../images/robo-arena/game-arena-premium-background.png') center 48% / cover no-repeat;
    box-shadow: 0 17px 36px rgba(4,66,113,.2);
}

.robo-arena.ra-live-results .profile-hero::before,
.robo-arena.ra-live-rewards .ra-reward-hero::before {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,rgba(2,39,101,.85),rgba(3,101,175,.3));
    content: '';
}

.robo-arena.ra-live-results .profile-hero > *,
.robo-arena.ra-live-rewards .ra-reward-hero > * {
    position: relative;
    z-index: 1;
}

.robo-arena.ra-live-results .profile-hero h1,
.robo-arena.ra-live-results .profile-hero h2,
.robo-arena.ra-live-results .profile-hero p,
.robo-arena.ra-live-results .profile-hero small,
.robo-arena.ra-live-results .profile-hero .eyebrow,
.robo-arena.ra-live-rewards .ra-reward-hero h1,
.robo-arena.ra-live-rewards .ra-reward-hero p,
.robo-arena.ra-live-rewards .ra-reward-hero .eyebrow {
    color: #fff;
}

.robo-arena.ra-live-results .summary-grid .metric-card,
.robo-arena.ra-live-rewards .summary-grid .metric-card {
    min-height: 104px;
    border: 1px solid #c9e6f1;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 10px 22px rgba(5,74,122,.1);
}

.robo-arena.ra-live-results .panel,
.robo-arena.ra-live-rewards .panel,
.robo-arena.ra-live-rewards .reward-card {
    border: 1px solid #c9e6f1;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 11px 24px rgba(5,74,122,.1);
}

.robo-arena.ra-live-results .badge-chip {
    display: inline-flex;
    min-height: 56px;
    padding: 7px 11px;
    align-items: center;
    gap: 8px;
    border: 1px solid #bfe3ef;
    border-radius: 12px;
    background: #f4fbfe;
}

.robo-arena.ra-live-results .badge-chip img {
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.robo-arena.ra-live-rewards .reward-card {
    border-top: 5px solid #ffca28;
}

.robo-arena.ra-live-rewards .reward-block {
    margin-top: 16px;
}

.robo-arena.ra-live-rewards .reward-section-head {
    margin: 0 0 8px;
}

.robo-arena.ra-live-rewards .reward-section-head h2,
.robo-arena.ra-live-rewards .reward-section-head small {
    margin: 0;
}

.robo-arena.ra-live-rewards .reward-section-head small {
    display: block;
    margin-top: 4px;
    color: #4f6b85;
}

.robo-arena.ra-live-rewards .reward-grid {
    margin: 0;
}

.robo-arena.ra-live-rewards .reward-state-locked {
    opacity: 0.93;
    border-left-color: #f7a93a;
}

.robo-arena.ra-live-rewards .reward-state-exhausted {
    border-left-color: #9aa8bb;
    opacity: 0.84;
}

.robo-arena.ra-live-rewards .reward-state-exhausted .status-chip,
.robo-arena.ra-live-rewards .reward-state-locked .status-chip {
    margin-top: auto;
}

.robo-arena.ra-live-rewards .claims-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}

.robo-arena.ra-live-rewards .claim-card {
    display: grid;
    padding: 12px;
    border: 1px solid #c9e6f1;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(5,74,122,.09);
    gap: 8px;
}

.robo-arena.ra-live-rewards .claim-card__header {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: space-between;
    align-items: baseline;
}

.robo-arena.ra-live-rewards .claim-card__header h3 {
    margin: 0;
    font-size: 1rem;
}

.robo-arena.ra-live-rewards .claim-card__meta {
    display: grid;
    gap: 4px;
    color: #234764;
}

.robo-arena.ra-live-rewards .claim-card__meta div {
    margin: 0;
}

.robo-arena.ra-live-rewards .claim-card ul {
    margin: 8px 0 0;
    padding-left: 20px;
    color: #244966;
}

.robo-arena.ra-live-rewards .claim-card details summary {
    cursor: pointer;
    color: #087fdf;
}

.robo-arena.ra-live-rewards .reward-card-visual {
    align-items: center;
}

.robo-arena.ra-live-results .ra-reward-bottom-nav,
.robo-arena.ra-live-rewards .ra-reward-bottom-nav {
    position: fixed;
    z-index: 70;
    right: 12px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    left: 12px;
    width: min(calc(100% - 24px),760px);
    margin-inline: auto;
    border: 1px solid #bfe1ec;
    border-radius: 18px;
    background: rgba(255,255,255,.97);
    box-shadow: 0 15px 34px rgba(4,66,112,.22);
}

@media (max-width:720px) {
    .flow-phone-wrap { padding: 0; }
    .robo-arena .flow-phone { border: 0; border-radius: 0; box-shadow: none; }
    .robo-arena .flow-start .flow-hero { height: min(374px,44dvh); min-height: 338px; padding-top: 12px; }
    .robo-arena .flow-start .flow-sheet { min-height: 0; padding-top: 22px; }
    .robo-arena .flow-start .flow-logo { width: clamp(132px,39vw,158px); height: auto; margin-top: 0; }
    .robo-arena .flow-start .flow-mentor { width: auto; height: clamp(164px,21dvh,178px); bottom: 5px; }
    .robo-arena .flow-button { min-height: 58px; border-radius: 14px; }
    .robo-arena .flow-auth-form-phone .flow-sheet { min-height: calc(100dvh - 188px); }

    .parent-premium-page .parent-topbar { min-height: 58px; }
    .parent-premium-page .parent-brand-logo { width: 47px; height: 42px; }
    .parent-premium-page .parent-topbar .brand span { font-size: .8rem; }
    .parent-premium-page .parent-page { width: min(100% - 12px,680px); padding-bottom: 92px; }
    .parent-premium-page .parent-onboarding-hero { min-height: 196px; border-radius: 16px; }
    .parent-premium-page .parent-onboarding-hero::after { background: linear-gradient(90deg,rgba(2,40,103,.9),rgba(2,76,151,.38)); }
    .parent-premium-page .parent-onboarding-hero .parent-onboarding-mentor { right: -12px; height: 176px; }
    .parent-premium-page .parent-onboarding-hero > div { max-width: 64%; }
    .parent-premium-page .parent-dashboard-intro { padding: 18px; border-radius: 14px; }
    .parent-premium-page .parent-action-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .parent-premium-page .parent-action-grid a { min-height: 112px; }
    .parent-premium-page .parent-page > .panel,
    .parent-premium-page .parent-page .reward-card,
    .parent-premium-page .parent-page > .profile-hero { border-radius: 14px; }

    .robo-arena.ra-live-results,
    .robo-arena.ra-live-rewards { width: 100%; padding: 8px 8px 98px; }
    .robo-arena.ra-live-results .profile-hero,
    .robo-arena.ra-live-rewards .ra-reward-hero { min-height: 190px; padding: 18px; border-width: 2px; border-radius: 16px; }
    .robo-arena.ra-live-results .summary-grid,
    .robo-arena.ra-live-rewards .summary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .robo-arena.ra-live-results .summary-grid .metric-card,
    .robo-arena.ra-live-rewards .summary-grid .metric-card { min-height: 90px; }
    .robo-arena.ra-live-results .panel,
    .robo-arena.ra-live-rewards .panel,
    .robo-arena.ra-live-rewards .reward-card { border-radius: 14px; }
    .robo-arena.ra-live-results .two-column { grid-template-columns: 1fr; }
}

@media (max-width:370px) {
    .robo-arena .flow-start .flow-hero { height: 344px; min-height: 344px; }
    .robo-arena .flow-start .flow-sheet { padding-inline: 14px; }
    .robo-arena .flow-start .flow-logo { width: 128px; }
    .robo-arena .flow-start .flow-mentor { height: 178px; bottom: 6px; }
    .robo-arena .flow-child-login #child-id { font-size: 1.25rem; letter-spacing: .12em; }
    .parent-premium-page .parent-action-grid a { min-height: 104px; }
    .robo-arena.ra-live-results .summary-grid .metric-card,
    .robo-arena.ra-live-rewards .summary-grid .metric-card { min-height: 84px; padding: 8px; }
}

/* RESULTS-CANONICAL-AVATAR-001: use the project Robo Mentor and badge artwork. */
.robo-arena.ra-live-results .ra-results-mentor-stage {
    display: grid;
    grid-template-columns: minmax(104px,142px) minmax(0,1fr);
    align-items: end;
    gap: 14px;
}

.robo-arena.ra-live-results .ra-results-mentor-stage > div {
    grid-column: auto;
    align-self: center;
}

.robo-arena.ra-live-results .ra-results-mentor {
    display: block;
    width: 100%;
    height: 174px;
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 12px 13px rgba(0,35,91,.32));
}

.robo-arena.ra-live-results .skin-token {
    min-height: 150px;
    border-color: #c5e6f1;
    background: linear-gradient(180deg,#fff,#f2fbfe);
    box-shadow: 0 8px 18px rgba(5,74,122,.09);
}

.robo-arena.ra-live-results .skin-token.unlocked {
    border-color: #2fc2e9;
    box-shadow: 0 10px 22px rgba(0,145,211,.15), inset 0 0 0 2px rgba(255,255,255,.9);
}

.robo-arena.ra-live-results .ra-skin-badge {
    display: block;
    width: 74px;
    height: 82px;
    object-fit: contain;
    filter: drop-shadow(0 7px 7px rgba(4,55,102,.18));
}

@media (max-width:720px) {
    .robo-arena.ra-live-results .ra-results-mentor-stage {
        grid-template-columns: 118px minmax(0,1fr);
    }

    .robo-arena.ra-live-results .ra-results-mentor {
        height: 154px;
    }

    .robo-arena.ra-live-results .skin-token {
        min-height: 138px;
        padding: 10px 7px;
    }

    .robo-arena.ra-live-results .ra-skin-badge {
        width: 62px;
        height: 70px;
    }
}

/* REWARDS-CANONICAL-HERO-001: keep the title visible and use the reference chest. */
.robo-arena.ra-live-rewards .ra-reward-hero {
    display: grid;
    grid-template-columns: minmax(0,1fr) 116px;
    align-items: center;
    gap: 16px;
}

.robo-arena.ra-live-rewards .ra-reward-hero > div:first-child {
    display: block;
}

.robo-arena.ra-live-rewards .ra-reward-hero .stat-orbit {
    width: 108px;
    min-height: 108px;
    padding: 10px;
    border: 3px solid rgba(255,255,255,.9);
    background: rgba(255,255,255,.94);
    box-shadow: 0 12px 24px rgba(0,42,96,.25);
}

.robo-arena.ra-live-rewards .ra-reward-hero .stat-orbit img {
    width: 72px;
    height: 66px;
    image-rendering: auto;
    filter: drop-shadow(0 7px 6px rgba(83,47,0,.22));
}

@media (max-width:720px) {
    .robo-arena.ra-live-rewards .ra-reward-hero {
        grid-template-columns: minmax(0,1fr) 88px;
        min-height: 176px;
        padding: 16px;
    }

    .robo-arena.ra-live-rewards .ra-reward-hero h1 {
        font-size: clamp(1.55rem,7.2vw,2.2rem);
    }

    .robo-arena.ra-live-rewards .ra-reward-hero p {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .robo-arena.ra-live-rewards .ra-reward-hero .stat-orbit {
        width: 84px;
        min-height: 90px;
        padding: 7px;
    }

    .robo-arena.ra-live-rewards .ra-reward-hero .stat-orbit img {
        width: 58px;
        height: 52px;
    }
}

/* CHILD-PROFILE-CANONICAL-001: replace the legacy shell and generated characters. */
body.ra-profile-page {
    min-width: 320px;
    padding-bottom: 88px;
    color: #08285f;
    background: #eaf8fd;
}

.robo-arena.ra-child-profile {
    width: min(calc(100% - 24px),1180px);
    margin-inline: auto;
    padding: 12px 0 104px;
}

.robo-arena.ra-child-profile .profile-hero {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(230px,340px);
    align-items: center;
    gap: 18px;
    min-height: 310px;
    padding: 24px;
    overflow: hidden;
    color: #fff;
    border: 4px solid #fff;
    border-radius: 20px;
    background: #087fdf url('../images/robo-arena/game-arena-premium-background.png') center 46% / cover no-repeat;
    box-shadow: 0 17px 36px rgba(4,66,113,.2);
}

.robo-arena.ra-child-profile .profile-hero::before {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,rgba(2,39,101,.9),rgba(3,101,175,.26));
    content: '';
}

.robo-arena.ra-child-profile .profile-hero > * {
    position: relative;
    z-index: 1;
}

.robo-arena.ra-child-profile .profile-hero h1,
.robo-arena.ra-child-profile .profile-hero h2,
.robo-arena.ra-child-profile .profile-hero p,
.robo-arena.ra-child-profile .profile-hero small,
.robo-arena.ra-child-profile .profile-hero .eyebrow {
    color: #fff;
}

.robo-arena.ra-child-profile .profile-hero .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.robo-arena.ra-child-profile .profile-hero .hero-actions .btn {
    min-height: 46px;
    margin: 0;
}

.robo-arena.ra-child-profile .profile-hero .hero-actions .btn.secondary {
    color: #0b4781;
    border-color: rgba(255,255,255,.96);
    background: #fff;
}

.robo-arena.ra-child-profile .ra-profile-mentor-stage {
    display: grid;
    grid-template-columns: minmax(120px,164px) minmax(0,1fr);
    align-items: end;
    gap: 14px;
}

.robo-arena.ra-child-profile .ra-profile-mentor-stage > div {
    grid-column: auto;
    align-self: center;
}

.robo-arena.ra-child-profile .ra-profile-mentor {
    display: block;
    width: 100%;
    height: 210px;
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 12px 13px rgba(0,35,91,.32));
}

.robo-arena.ra-child-profile .profile-photo-panel {
    grid-column: 1 / -1;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid rgba(255,255,255,.54);
    border-radius: 12px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 8px 18px rgba(0,47,100,.15);
}

.robo-arena.ra-child-profile .profile-photo-panel summary {
    display: grid;
    grid-template-columns: 48px minmax(0,1fr);
    align-items: center;
    gap: 10px;
    color: #08285f;
    cursor: pointer;
    list-style: none;
}

.robo-arena.ra-child-profile .profile-photo-panel summary::-webkit-details-marker {
    display: none;
}

.robo-arena.ra-child-profile .profile-photo-panel summary::after {
    position: absolute;
    right: 14px;
    color: #0796d9;
    content: '+';
    font-size: 1.45rem;
    font-weight: 1000;
}

.robo-arena.ra-child-profile .profile-photo-panel[open] summary::after {
    content: '-';
}

.robo-arena.ra-child-profile .profile-photo-panel summary span {
    display: grid;
    gap: 2px;
    padding-right: 28px;
}

.robo-arena.ra-child-profile .profile-photo-panel summary small {
    color: #0788c8;
    font-size: .66rem;
    font-weight: 950;
}

.robo-arena.ra-child-profile .profile-photo-panel summary strong {
    color: #08285f;
    font-size: .9rem;
}

.robo-arena.ra-child-profile .hero-profile-photo,
.profile-avatar-canonical-fallback {
    object-fit: contain;
    object-position: center;
    background: #e8f8fd;
}

.robo-arena.ra-child-profile .hero-profile-photo {
    width: 48px;
    height: 48px;
    border: 2px solid #83d9ec;
    border-radius: 50%;
}

.robo-arena.ra-child-profile .profile-upload-form {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 8px;
    margin-top: 10px;
}

.robo-arena.ra-child-profile .profile-file-picker {
    display: block;
}

.robo-arena.ra-child-profile .profile-file-picker input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

.robo-arena.ra-child-profile .profile-file-picker span {
    display: grid;
    min-height: 44px;
    padding: 8px 12px;
    place-items: center;
    color: #087fbd;
    border: 2px solid #77d4e9;
    border-radius: 10px;
    background: #fff;
    font-size: .78rem;
    font-weight: 950;
}

.robo-arena.ra-child-profile .level-banner,
.robo-arena.ra-child-profile .skin-locker,
.robo-arena.ra-child-profile .panel,
.robo-arena.ra-child-profile .settings-panel,
.robo-arena.ra-child-profile .daily-limit-card {
    border: 1px solid #c9e6f1;
    border-radius: 16px;
    box-shadow: 0 11px 24px rgba(5,74,122,.1);
}

.robo-arena.ra-child-profile .skin-grid {
    gap: 12px;
}

.robo-arena.ra-child-profile .skin-card {
    min-height: 164px;
    border-color: #c5e6f1;
    background: linear-gradient(180deg,#fff,#f2fbfe);
}

.robo-arena.ra-child-profile .skin-card.locked::after {
    width: 28px;
    height: 28px;
    background: url('../icons/robo-arena/lock.svg') center / contain no-repeat;
    content: '';
}

.robo-arena.ra-child-profile .ra-profile-skin-badge {
    display: block;
    width: 88px;
    height: 102px;
    object-fit: contain;
    filter: drop-shadow(0 7px 7px rgba(4,55,102,.18));
}

.robo-arena.ra-child-profile .premium-mode-grid .mode-tile {
    min-height: 132px;
    border-radius: 14px;
}

.robo-arena.ra-child-profile .ra-reward-bottom-nav {
    position: fixed;
    z-index: 70;
    right: 12px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    left: 12px;
    width: min(calc(100% - 24px),760px);
    margin-inline: auto;
    border: 1px solid #bfe1ec;
    border-radius: 18px;
    background: rgba(255,255,255,.97);
    box-shadow: 0 15px 34px rgba(4,66,112,.22);
}

@media (max-width:720px) {
    .robo-arena.ra-child-profile {
        width: 100%;
        padding: 8px 8px 98px;
    }

    .robo-arena.ra-child-profile .profile-hero {
        grid-template-columns: minmax(0,1fr) 118px;
        gap: 10px;
        min-height: 0;
        padding: 16px;
        border-width: 2px;
        border-radius: 16px;
    }

    .robo-arena.ra-child-profile .profile-hero h1 {
        font-size: clamp(2rem,10vw,2.7rem);
    }

    .robo-arena.ra-child-profile .profile-hero .hero-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .robo-arena.ra-child-profile .profile-hero .hero-actions .btn {
        min-height: 44px;
        padding: 8px 10px;
    }

    .robo-arena.ra-child-profile .ra-profile-mentor-stage {
        grid-template-columns: 1fr;
        align-self: stretch;
    }

    .robo-arena.ra-child-profile .ra-profile-mentor-stage > div {
        display: none;
    }

    .robo-arena.ra-child-profile .ra-profile-mentor {
        height: 184px;
    }

    .robo-arena.ra-child-profile .profile-photo-panel {
        padding: 6px 8px;
    }

    .robo-arena.ra-child-profile .profile-upload-form {
        grid-template-columns: 1fr;
    }

    .robo-arena.ra-child-profile .level-banner {
        border-radius: 14px;
    }

    .robo-arena.ra-child-profile .skin-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .robo-arena.ra-child-profile .skin-card {
        grid-template-columns: 1fr;
        min-height: 210px;
        padding: 12px 9px;
        text-align: center;
    }

    .robo-arena.ra-child-profile .ra-profile-skin-badge {
        width: 68px;
        height: 76px;
        margin-inline: auto;
    }

    .robo-arena.ra-child-profile .premium-mode-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .robo-arena.ra-child-profile .premium-mode-grid .mode-tile {
        min-height: 112px;
    }
}

/* PARENT-DASHBOARD-COMPACT-001: keep child metrics visible as one mobile row. */
.parent-premium-page .parent-featured-child .mini-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 8px;
}

.parent-premium-page .parent-featured-child .mini-grid > span {
    display: grid;
    min-width: 0;
    min-height: 82px;
    padding: 9px 6px;
    place-items: center;
    align-content: center;
    gap: 2px;
    border: 1px solid #c9e6f1;
    border-radius: 12px;
    background: #f7fcfe;
    text-align: center;
}

.parent-premium-page .parent-featured-child .mini-grid strong {
    max-width: 100%;
    overflow: hidden;
    font-size: clamp(1rem,5vw,1.35rem);
    text-overflow: ellipsis;
}

.parent-premium-page .parent-featured-child .mini-grid small {
    color: #58738d;
    font-size: .72rem;
}

@media (max-width:720px) {
    .parent-premium-page .parent-featured-child {
        padding: 14px;
    }

    .parent-premium-page .parent-featured-child .child-card-heading {
        margin-bottom: 10px;
    }

    .parent-premium-page .parent-featured-child .parent-main-cta {
        min-height: 48px;
        margin-top: 10px;
    }
}

/* PARENT-CHILD-DETAIL-CANONICAL-001: identity first, compact metrics, no native file control. */
.parent-premium-page .parent-child-details {
    display: flex;
    flex-direction: column;
}

.parent-premium-page .parent-child-details > * {
    order: 10;
}

.parent-premium-page .parent-child-details > .form-message {
    order: 0;
}

.parent-premium-page .parent-child-details > .parent-child-hero {
    order: 1;
}

.parent-premium-page .parent-child-details > .parent-learning-profile {
    order: 2;
}

.parent-premium-page .parent-child-details > .parent-child-metrics {
    order: 3;
}

.parent-premium-page .parent-child-hero {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(250px,360px) auto;
    align-items: center;
    gap: 16px;
    min-height: 250px;
    padding: 22px;
    overflow: hidden;
    color: #fff;
    border: 4px solid #fff;
    border-radius: 20px;
    background: #087fdf url('../images/robo-arena/game-arena-premium-background.png') center 46% / cover no-repeat;
    box-shadow: 0 17px 36px rgba(4,66,113,.2);
}

.parent-premium-page .parent-child-hero::before {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,rgba(2,39,101,.9),rgba(3,101,175,.3));
    content: '';
}

.parent-premium-page .parent-child-hero > * {
    position: relative;
    z-index: 1;
}

.parent-premium-page .parent-child-hero h1,
.parent-premium-page .parent-child-hero p,
.parent-premium-page .parent-child-hero .eyebrow {
    color: #fff;
}

.parent-premium-page .parent-child-hero .parent-photo-panel {
    background: rgba(255,255,255,.94);
}

.parent-premium-page .parent-child-hero .parent-photo-panel .hero-profile-photo {
    object-fit: contain;
    background: #e9f9fd;
}

.parent-premium-page .parent-profile-file-picker input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

.parent-premium-page .parent-profile-file-picker span {
    display: grid;
    min-height: 44px;
    padding: 8px 12px;
    place-items: center;
    color: #087fbd;
    border: 2px solid #77d4e9;
    border-radius: 10px;
    background: #fff;
    font-size: .78rem;
    font-weight: 950;
}

.parent-premium-page .parent-child-metrics {
    grid-template-columns: repeat(4,minmax(0,1fr));
}

.parent-premium-page .parent-child-metrics .metric-card {
    min-height: 96px;
}

@media (max-width:720px) {
    .parent-premium-page .parent-child-hero {
        display: grid;
        grid-template-columns: minmax(0,1fr) 104px;
        gap: 10px;
        min-height: 220px;
        padding: 16px;
        border-width: 2px;
        border-radius: 16px;
    }

    .parent-premium-page .parent-child-hero > div:first-child,
    .parent-premium-page .parent-child-hero > a {
        display: block;
    }

    .parent-premium-page .parent-child-hero h1 {
        font-size: clamp(1.8rem,9vw,2.5rem);
    }

    .parent-premium-page .parent-child-hero > a {
        grid-column: 1 / -1;
        width: 100%;
        min-height: 46px;
    }

    .parent-premium-page .parent-child-hero .parent-photo-panel {
        display: grid;
        grid-template-columns: 1fr;
        gap: 5px;
        padding: 7px;
    }

    .parent-premium-page .parent-child-hero .parent-photo-panel .hero-profile-photo {
        width: 72px;
        height: 72px;
        margin-inline: auto;
    }

    .parent-premium-page .parent-child-hero .profile-upload-form {
        gap: 5px;
    }

    .parent-premium-page .parent-child-hero .profile-upload-form .btn {
        min-height: 40px;
        padding: 6px;
    }

    .parent-premium-page .parent-profile-file-picker {
        font-size: 0;
    }

    .parent-premium-page .parent-profile-file-picker span {
        min-height: 40px;
        font-size: .67rem;
    }

    .parent-premium-page .parent-child-metrics {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 8px;
    }

    .parent-premium-page .parent-child-metrics .metric-card {
        min-height: 86px;
    }
}

/* PARENT-REWARDS-HIERARCHY-001: keep the page title before the reward scale. */
.parent-premium-page .parent-rewards-management:not(.parent-onboarding) > * {
    order: 10;
}

.parent-premium-page .parent-rewards-management:not(.parent-onboarding) > .profile-hero {
    order: 1;
    display: grid;
    min-height: 220px;
    padding: 22px;
    overflow: hidden;
    color: #fff;
    border: 4px solid #fff;
    border-radius: 20px;
    background: #087fdf url('../images/robo-arena/game-arena-premium-background.png') center 46% / cover no-repeat;
    box-shadow: 0 17px 36px rgba(4,66,113,.2);
}

.parent-premium-page .parent-rewards-management:not(.parent-onboarding) > .profile-hero::before {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,rgba(2,39,101,.9),rgba(3,101,175,.27));
    content: '';
}

.parent-premium-page .parent-rewards-management:not(.parent-onboarding) > .profile-hero > div:first-child {
    display: block;
    position: relative;
    z-index: 1;
    max-width: 740px;
}

.parent-premium-page .parent-rewards-management:not(.parent-onboarding) > .profile-hero h1,
.parent-premium-page .parent-rewards-management:not(.parent-onboarding) > .profile-hero p,
.parent-premium-page .parent-rewards-management:not(.parent-onboarding) > .profile-hero .eyebrow {
    color: #fff;
}

.parent-premium-page .parent-rewards-management:not(.parent-onboarding) > .reward-level-guide {
    order: 5;
}

.parent-premium-page .parent-rewards-management:not(.parent-onboarding) > .two-column {
    order: 4;
}

.parent-premium-page .parent-rewards-management:not(.parent-onboarding) > .form-message {
    order: 2;
}

.parent-premium-page .parent-rewards-management:not(.parent-onboarding) > .parent-owned-rewards {
    order: 3;
}

@media (max-width:720px) {
    .parent-premium-page .parent-rewards-management:not(.parent-onboarding) > .profile-hero {
        min-height: 190px;
        padding: 16px;
        border-width: 2px;
        border-radius: 16px;
    }

    .parent-premium-page .parent-rewards-management:not(.parent-onboarding) > .profile-hero h1 {
        font-size: clamp(1.8rem,9vw,2.45rem);
    }

    .parent-premium-page .parent-rewards-management:not(.parent-onboarding) > .reward-level-guide {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 8px;
    }

    .parent-premium-page .parent-rewards-management:not(.parent-onboarding) .reward-level-card {
        min-height: 188px;
        padding: 12px 10px;
    }

    .parent-premium-page .parent-rewards-management:not(.parent-onboarding) .reward-level-card p,
    .parent-premium-page .parent-rewards-management:not(.parent-onboarding) .reward-level-card small {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
}

.robo-arena .game-character-strip .ra-battle-mentor {
    display: block;
    width: 118px;
    height: 158px;
    object-fit: contain;
    filter: drop-shadow(0 10px 11px rgba(0,38,91,.25));
}

.duel-score-icon,
.stat-orbit > img {
    display: inline-block;
    width: 32px;
    height: 32px;
    object-fit: contain;
    vertical-align: middle;
}

.ra-secondary-topbar {
    position: sticky;
    z-index: 60;
    top: 0;
    display: flex;
    width: 100%;
    min-height: 66px;
    padding: 7px max(12px,calc((100% - 1180px) / 2));
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #c6e6f1;
    background: rgba(255,255,255,.97);
    box-shadow: 0 8px 22px rgba(4,74,124,.1);
}

.ra-secondary-logo {
    display: block;
    width: 68px;
    height: 52px;
    object-fit: contain;
}

body.friends-page .ra-secondary-logo-link {
    display: none;
}

body.friends-page .ra-secondary-player {
    margin-left: auto;
}

.ra-secondary-player {
    display: inline-flex;
    min-width: 0;
    max-width: min(56vw,320px);
    align-items: center;
    gap: 8px;
    color: #08285f;
    font-size: .82rem;
    font-weight: 900;
}

.ra-secondary-player > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ra-secondary-bottom-nav {
    position: fixed;
    z-index: 70;
    right: 12px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    left: 12px;
    display: grid;
    width: min(calc(100% - 24px),760px);
    min-height: 70px;
    margin-inline: auto;
    padding: 5px;
    grid-template-columns: repeat(4,minmax(0,1fr));
    align-items: end;
    border: 1px solid #bfe1ec;
    border-radius: 18px;
    background: rgba(255,255,255,.97);
    box-shadow: 0 15px 34px rgba(4,66,112,.22);
}

.ra-secondary-bottom-nav a {
    display: grid;
    min-width: 0;
    min-height: 56px;
    padding: 5px 2px;
    place-items: center;
    align-content: center;
    gap: 3px;
    color: #56758f;
    border-radius: 12px;
    text-decoration: none;
}

.ra-secondary-bottom-nav a.is-active {
    color: #078bd3;
    background: #e9f8fd;
}

.ra-secondary-bottom-nav img {
    width: 27px;
    height: 27px;
    object-fit: contain;
}

.ra-secondary-bottom-nav strong {
    max-width: 100%;
    overflow: hidden;
    font-size: .58rem;
    text-overflow: ellipsis;
}

@media (max-width:720px) {
    .ra-secondary-topbar {
        min-height: 58px;
        padding: 5px 12px;
    }

    .ra-secondary-logo {
        width: 55px;
        height: 46px;
    }
}

@media (max-width:720px) {
    .robo-arena .game-character-strip .ra-battle-mentor {
        width: 84px;
        height: 112px;
    }
}

/* CORE-DESIGN-ALIGNMENT-001: compact premium child profile screen. */
body.ra-profile-page {
    overflow-x: hidden;
    background:
        radial-gradient(circle at 50% 0%, rgba(0, 190, 255, .24), transparent 34%),
        linear-gradient(180deg, #03164a 0%, #04133c 100%);
}

.robo-arena.ra-child-profile {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: min(calc(100% - 24px), 1180px);
    padding: 12px 0 112px;
}

.robo-arena.ra-child-profile > #auth-flash,
.robo-arena.ra-child-profile > .form-message {
    order: 0;
}

.robo-arena.ra-child-profile .profile-hero {
    order: 1;
    min-height: 250px;
    border-radius: 22px;
    background:
        linear-gradient(90deg, rgba(3, 21, 83, .88), rgba(4, 133, 211, .18)),
        #087fdf url('../images/robo-arena/game-arena-premium-background.png') center 48% / cover no-repeat;
}

.robo-arena.ra-child-profile .level-banner {
    order: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 360px);
    align-items: center;
    gap: 14px;
    padding: 18px;
    color: #fff;
    border: 1px solid rgba(134, 229, 255, .62);
    background: linear-gradient(135deg, #0a7fa4, #2b86e8);
}

.robo-arena.ra-child-profile .level-banner h2,
.robo-arena.ra-child-profile .level-banner p,
.robo-arena.ra-child-profile .level-banner small,
.robo-arena.ra-child-profile .level-banner strong {
    color: #fff;
}

.robo-arena.ra-child-profile .level-banner .status-pill {
    color: #0b5e87;
    background: rgba(255, 255, 255, .82);
}

.robo-arena.ra-child-profile .xp-panel {
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, .34);
    border-radius: 16px;
    background: rgba(255, 255, 255, .16);
}

.robo-arena.ra-child-profile .xp-bar {
    height: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    background: rgba(2, 38, 86, .36);
}

.robo-arena.ra-child-profile .xp-bar i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #b9f638, #1fd3ff);
}

.robo-arena.ra-child-profile .premium-stats-grid {
    order: 3;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.robo-arena.ra-child-profile .profile-extra-stats-grid {
    order: 7;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.robo-arena.ra-child-profile .summary-grid .metric-card {
    display: grid;
    min-height: 112px;
    padding: 14px 10px;
    place-items: center;
    align-content: center;
    gap: 4px;
    color: #08285f;
    border: 1px solid #a7dff0;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(228, 248, 255, .96));
    box-shadow: 0 12px 26px rgba(3, 39, 91, .16);
    text-align: center;
}

.robo-arena.ra-child-profile .summary-grid .metric-card span {
    max-width: 100%;
    overflow: hidden;
    color: #08285f;
    font-size: clamp(1.2rem, 6vw, 2rem);
    font-weight: 1000;
    line-height: 1;
    text-overflow: ellipsis;
}

.robo-arena.ra-child-profile .summary-grid .metric-card small {
    color: #0b4d80;
    font-size: .68rem;
    font-weight: 950;
    text-transform: uppercase;
}

.robo-arena.ra-child-profile .premium-mode-grid {
    order: 4;
}

.robo-arena.ra-child-profile .learning-plan-card {
    order: 5;
}

.robo-arena.ra-child-profile .daily-limit-card {
    order: 6;
}

.robo-arena.ra-child-profile .skin-locker {
    order: 8;
}

.robo-arena.ra-child-profile .two-column {
    order: 9;
}

.robo-arena.ra-child-profile .profile-switch-child-form {
    margin-top: 14px;
}

.robo-arena.ra-child-profile .profile-switch-child-form .btn {
    width: 100%;
}

.robo-arena.ra-child-profile .ra-reward-bottom-nav {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: end;
    min-height: 78px;
    padding: 7px;
}

.robo-arena.ra-child-profile .ra-reward-bottom-nav a {
    display: grid;
    min-width: 0;
    min-height: 62px;
    padding: 5px 2px;
    place-items: center;
    align-content: center;
    gap: 3px;
    color: #56758f;
    border-radius: 14px;
    text-decoration: none;
}

.robo-arena.ra-child-profile .ra-reward-bottom-nav a.is-active {
    color: #078be3;
    background: #eaf8ff;
}

.robo-arena.ra-child-profile .ra-reward-bottom-nav img {
    width: 27px;
    height: 27px;
    object-fit: contain;
}

.robo-arena.ra-child-profile .ra-reward-bottom-nav strong {
    max-width: 100%;
    overflow: hidden;
    font-size: .58rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (min-width: 900px) {
    .robo-arena.ra-child-profile {
        display: grid;
        grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
        align-items: start;
        gap: 18px;
    }

    .robo-arena.ra-child-profile .profile-hero,
    .robo-arena.ra-child-profile .level-banner,
    .robo-arena.ra-child-profile .premium-stats-grid,
    .robo-arena.ra-child-profile .premium-mode-grid,
    .robo-arena.ra-child-profile .profile-extra-stats-grid {
        grid-column: 1;
    }

    .robo-arena.ra-child-profile .learning-plan-card,
    .robo-arena.ra-child-profile .daily-limit-card,
    .robo-arena.ra-child-profile .skin-locker,
    .robo-arena.ra-child-profile .two-column {
        grid-column: 2;
    }

    .robo-arena.ra-child-profile .profile-hero {
        grid-template-columns: minmax(0, 1fr) minmax(180px, 270px);
    }

    .robo-arena.ra-child-profile .profile-photo-panel {
        max-width: 540px;
    }
}

@media (max-width: 720px) {
    .robo-arena.ra-child-profile {
        width: 100%;
        gap: 10px;
        padding: 8px 8px 100px;
    }

    .robo-arena.ra-child-profile .profile-hero {
        grid-template-columns: minmax(0, 1fr) 104px;
        gap: 8px;
        padding: 12px;
        border-width: 2px;
        border-radius: 18px;
    }

    .robo-arena.ra-child-profile .profile-hero h1 {
        margin: 0 0 4px;
        font-size: clamp(1.7rem, 8vw, 2.15rem);
        line-height: .95;
    }

    .robo-arena.ra-child-profile .profile-hero p {
        margin: 0 0 8px;
        font-size: .86rem;
    }

    .robo-arena.ra-child-profile .profile-hero .eyebrow {
        margin-bottom: 3px;
        font-size: .65rem;
    }

    .robo-arena.ra-child-profile .profile-hero .hero-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 6px;
        max-width: 170px;
    }

    .robo-arena.ra-child-profile .profile-hero .hero-actions .btn {
        min-height: 38px;
        padding: 6px 8px;
        border-radius: 13px;
        font-size: .76rem;
    }

    .robo-arena.ra-child-profile .profile-hero .hero-actions .btn.secondary {
        display: none;
    }

    .robo-arena.ra-child-profile .profile-photo-panel {
        grid-column: 1 / -1;
        padding: 5px 7px;
        border-radius: 13px;
    }

    .robo-arena.ra-child-profile .profile-photo-panel summary {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 8px;
    }

    .robo-arena.ra-child-profile .hero-profile-photo {
        width: 42px;
        height: 42px;
    }

    .robo-arena.ra-child-profile .profile-photo-panel summary small {
        font-size: .58rem;
    }

    .robo-arena.ra-child-profile .profile-photo-panel summary strong {
        font-size: .78rem;
    }

    .robo-arena.ra-child-profile .ra-profile-mentor {
        height: 126px;
    }

    .robo-arena.ra-child-profile .level-banner {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        padding: 12px;
        border-radius: 16px;
    }

    .robo-arena.ra-child-profile .level-banner h2 {
        margin: 4px 0 2px;
        font-size: 1.25rem;
    }

    .robo-arena.ra-child-profile .level-banner p {
        margin: 0;
        font-size: .82rem;
    }

    .robo-arena.ra-child-profile .xp-panel {
        padding: 10px;
    }

    .robo-arena.ra-child-profile .premium-stats-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .robo-arena.ra-child-profile .profile-extra-stats-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .robo-arena.ra-child-profile .summary-grid .metric-card {
        min-height: 82px;
        padding: 9px 5px;
        border-radius: 14px;
    }

    .robo-arena.ra-child-profile .summary-grid .metric-card span {
        font-size: clamp(1rem, 5.5vw, 1.45rem);
    }

    .robo-arena.ra-child-profile .summary-grid .metric-card small {
        font-size: .52rem;
        line-height: 1.15;
    }

    .robo-arena.ra-child-profile .premium-mode-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-top: 118px;
    }

    .robo-arena.ra-child-profile .premium-mode-grid .mode-tile {
        min-height: 94px;
        padding: 10px 7px;
    }

    .robo-arena.ra-child-profile .premium-mode-grid .mode-tile svg {
        width: 34px;
        height: 34px;
    }

    .robo-arena.ra-child-profile .skin-card {
        min-height: 170px;
    }

    .robo-arena.ra-child-profile .ra-reward-bottom-nav {
        min-height: 78px;
        padding: 7px 5px;
    }

    .robo-arena.ra-child-profile .ra-reward-bottom-nav a {
        min-height: 60px;
    }

    .robo-arena.ra-child-profile .ra-reward-bottom-nav strong {
        font-size: .52rem;
    }
}

/* CORE-DESIGN-ALIGNMENT-001: premium switch-child screen. */
body.ra-switch-child-page {
    min-width: 320px;
    overflow-x: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 50% 0%, rgba(0, 190, 255, .24), transparent 34%),
        linear-gradient(180deg, #03164a 0%, #04133c 100%);
}

.robo-arena.ra-switch-child {
    display: flex;
    width: min(calc(100% - 24px), 960px);
    min-height: 100dvh;
    margin-inline: auto;
    padding: 12px 0 112px;
    flex-direction: column;
    gap: 14px;
}

.robo-arena.ra-switch-child .ra-switch-hero {
    position: relative;
    display: grid;
    order: 1;
    grid-template-columns: minmax(0, 1fr) minmax(120px, 210px);
    align-items: center;
    gap: 14px;
    min-height: 230px;
    padding: 22px;
    overflow: hidden;
    color: #fff;
    border: 4px solid #fff;
    border-radius: 22px;
    background:
        linear-gradient(90deg, rgba(3, 21, 83, .9), rgba(4, 133, 211, .16)),
        #087fdf url('../images/robo-arena/game-arena-premium-background.png') center 48% / cover no-repeat;
    box-shadow: 0 17px 36px rgba(0, 0, 0, .24);
}

.robo-arena.ra-switch-child .ra-switch-hero h1,
.robo-arena.ra-switch-child .ra-switch-hero p,
.robo-arena.ra-switch-child .ra-switch-hero .eyebrow {
    color: #fff;
}

.robo-arena.ra-switch-child .ra-switch-hero h1 {
    margin: 0 0 8px;
    font-size: clamp(2.05rem, 7vw, 3.5rem);
    line-height: .95;
}

.robo-arena.ra-switch-child .ra-switch-hero p {
    max-width: 56ch;
}

.robo-arena.ra-switch-child .ra-switch-hero .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.robo-arena.ra-switch-child .ra-switch-hero .hero-actions form {
    margin: 0;
}

.robo-arena.ra-switch-child .ra-switch-hero .hero-actions .btn.secondary {
    color: #0b4781;
    border-color: rgba(255, 255, 255, .96);
    background: #fff;
}

.robo-arena.ra-switch-child .ra-switch-mentor {
    display: block;
    width: 100%;
    max-height: 210px;
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 14px 14px rgba(0, 35, 91, .36));
}

.robo-arena.ra-switch-child .panel,
.robo-arena.ra-switch-child .reward-card {
    color: #08285f;
    border: 1px solid #a7dff0;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(228, 248, 255, .96));
    box-shadow: 0 12px 26px rgba(3, 39, 91, .16);
}

.robo-arena.ra-switch-child .ra-active-child-card {
    display: grid;
    order: 2;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 16px;
}

.robo-arena.ra-switch-child .child-card-heading {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.robo-arena.ra-switch-child .child-card-photo {
    width: 58px;
    height: 58px;
    border: 2px solid #83d9ec;
    border-radius: 50%;
    background: #e8f8fd;
    object-fit: contain;
}

.robo-arena.ra-switch-child .ra-remembered-child-grid {
    display: grid;
    order: 3;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.robo-arena.ra-switch-child .reward-card {
    display: grid;
    min-height: 132px;
    padding: 14px;
    align-content: space-between;
    gap: 12px;
}

.robo-arena.ra-switch-child .ra-switch-note {
    order: 4;
}

.robo-arena.ra-switch-child .reward-card h2,
.robo-arena.ra-switch-child .panel h2 {
    margin: 0 0 4px;
    color: #08285f;
}

.robo-arena.ra-switch-child .reward-card p,
.robo-arena.ra-switch-child .panel p {
    color: #0b4d80;
}

.robo-arena.ra-switch-child .button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.robo-arena.ra-switch-child .button-row form {
    margin: 0;
}

.robo-arena.ra-switch-child .ra-reward-bottom-nav {
    position: fixed;
    z-index: 70;
    right: 12px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    left: 12px;
    display: grid;
    width: min(calc(100% - 24px), 760px);
    min-height: 78px;
    margin-inline: auto;
    padding: 7px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: end;
    border: 1px solid #bfe1ec;
    border-radius: 18px;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 15px 34px rgba(4, 66, 112, .22);
}

.robo-arena.ra-switch-child .ra-reward-bottom-nav a {
    display: grid;
    min-width: 0;
    min-height: 62px;
    padding: 5px 2px;
    place-items: center;
    align-content: center;
    gap: 3px;
    color: #56758f;
    border-radius: 14px;
    text-decoration: none;
}

.robo-arena.ra-switch-child .ra-reward-bottom-nav a.is-active {
    color: #078be3;
    background: #eaf8ff;
}

.robo-arena.ra-switch-child .ra-reward-bottom-nav img {
    width: 27px;
    height: 27px;
    object-fit: contain;
}

.robo-arena.ra-switch-child .ra-reward-bottom-nav strong {
    max-width: 100%;
    overflow: hidden;
    font-size: .58rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 720px) {
    .robo-arena.ra-switch-child {
        width: 100%;
        padding: 8px 8px 100px;
        gap: 10px;
    }

    .robo-arena.ra-switch-child .ra-switch-hero {
        grid-template-columns: minmax(0, 1fr) 94px;
        min-height: 0;
        padding: 14px;
        border-width: 2px;
        border-radius: 18px;
    }

    .robo-arena.ra-switch-child .ra-switch-hero h1 {
        font-size: clamp(1.7rem, 8vw, 2.25rem);
    }

    .robo-arena.ra-switch-child .ra-switch-hero p {
        font-size: .84rem;
    }

    .robo-arena.ra-switch-child .ra-switch-hero .hero-actions {
        display: grid;
        grid-template-columns: 1fr;
        max-width: 190px;
        margin-top: 10px;
    }

    .robo-arena.ra-switch-child .ra-switch-hero .hero-actions .btn {
        min-height: 40px;
        padding: 7px 9px;
        font-size: .76rem;
    }

    .robo-arena.ra-switch-child .ra-switch-mentor {
        max-height: 126px;
    }

    .robo-arena.ra-switch-child .ra-active-child-card {
        grid-template-columns: 1fr;
        padding: 12px;
    }

    .robo-arena.ra-switch-child .ra-remembered-child-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .robo-arena.ra-switch-child .reward-card {
        min-height: 118px;
        padding: 12px;
    }

    .robo-arena.ra-switch-child .child-card-heading {
        grid-template-columns: 50px minmax(0, 1fr);
        gap: 10px;
    }

    .robo-arena.ra-switch-child .child-card-photo {
        width: 50px;
        height: 50px;
    }

    .robo-arena.ra-switch-child .button-row {
        display: grid;
        grid-template-columns: 1fr;
    }

    .robo-arena.ra-switch-child .button-row .btn,
    .robo-arena.ra-switch-child .button-row form {
        width: 100%;
    }

    .robo-arena.ra-switch-child .ra-reward-bottom-nav strong {
        font-size: .52rem;
    }
}

/* CORE-DESIGN-ALIGNMENT-001: child profile faithful to master visual pack profile screen. */
.robo-arena.ra-child-profile .ra-profile-reference {
    display: grid;
    width: min(100%, 430px);
    margin-inline: auto;
    gap: 10px;
    color: #eaf8ff;
}

.robo-arena.ra-child-profile .ra-profile-reference__top {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 8px;
    min-height: 50px;
    padding: 8px 2px 4px;
}

.robo-arena.ra-child-profile .ra-profile-reference__top h1 {
    margin: 0;
    color: #fff;
    font-size: 1.08rem;
    font-weight: 950;
}

.robo-arena.ra-child-profile .ra-profile-reference__back,
.robo-arena.ra-child-profile .ra-profile-reference__settings {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid rgba(116, 214, 255, .36);
    border-radius: 12px;
    background: rgba(8, 25, 70, .7);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}

.robo-arena.ra-child-profile .ra-profile-reference__back img,
.robo-arena.ra-child-profile .ra-profile-reference__settings img {
    width: 23px;
    height: 23px;
    object-fit: contain;
}

.robo-arena.ra-child-profile .ra-profile-reference__hero,
.robo-arena.ra-child-profile .ra-profile-reference__stats,
.robo-arena.ra-child-profile .ra-profile-reference__mission,
.robo-arena.ra-child-profile .ra-profile-reference__list,
.robo-arena.ra-child-profile .ra-profile-reference__settings-panel {
    border: 1px solid rgba(59, 181, 255, .46);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(5, 27, 80, .94), rgba(6, 18, 54, .96));
    box-shadow:
        0 14px 32px rgba(0, 0, 0, .26),
        inset 0 1px 0 rgba(255, 255, 255, .1);
}

.robo-arena.ra-child-profile .ra-profile-reference__hero {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 14px;
    padding: 14px;
}

.robo-arena.ra-child-profile .ra-profile-reference__photo {
    min-width: 0;
}

.robo-arena.ra-child-profile .ra-profile-reference__photo summary {
    position: relative;
    display: block;
    width: 96px;
    height: 96px;
    cursor: pointer;
    list-style: none;
}

.robo-arena.ra-child-profile .ra-profile-reference__photo summary::-webkit-details-marker {
    display: none;
}

.robo-arena.ra-child-profile .ra-profile-reference__avatar {
    width: 96px;
    height: 96px;
    border: 3px solid #1ecfff;
    border-radius: 50%;
    background: #e6f8ff;
    object-fit: contain;
    box-shadow: 0 0 0 4px rgba(0, 68, 165, .38), 0 0 24px rgba(30, 207, 255, .38);
}

.robo-arena.ra-child-profile .ra-profile-reference__photo summary span {
    position: absolute;
    right: -2px;
    bottom: 2px;
    display: grid;
    width: 31px;
    height: 31px;
    place-items: center;
    border: 2px solid #8eeaff;
    border-radius: 50%;
    background: linear-gradient(135deg, #129fff, #1b55e4);
}

.robo-arena.ra-child-profile .ra-profile-reference__photo summary span img {
    width: 16px;
    height: 16px;
    filter: brightness(0) invert(1);
}

.robo-arena.ra-child-profile .ra-profile-reference__identity {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-content: center;
    gap: 6px 8px;
}

.robo-arena.ra-child-profile .ra-profile-reference__identity h2 {
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    color: #fff;
    font-size: clamp(1.25rem, 6vw, 1.7rem);
    font-weight: 950;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.robo-arena.ra-child-profile .ra-profile-reference__identity small {
    color: #d8ecff;
    font-size: .75rem;
}

.robo-arena.ra-child-profile .ra-profile-reference__identity strong {
    color: #79e6ff;
    font-weight: 950;
}

.robo-arena.ra-child-profile .ra-profile-reference__bar {
    grid-column: 1 / -1;
    height: 9px;
    overflow: hidden;
    border: 1px solid rgba(82, 180, 255, .5);
    border-radius: 999px;
    background: rgba(8, 35, 88, .92);
}

.robo-arena.ra-child-profile .ra-profile-reference__bar i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #18e2d8, #26b7ff);
}

.robo-arena.ra-child-profile .ra-profile-reference__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 10px;
}

.robo-arena.ra-child-profile .ra-profile-reference__stats article {
    display: grid;
    min-height: 72px;
    place-items: center;
    align-content: center;
    gap: 3px;
    border: 1px solid rgba(58, 169, 255, .4);
    border-radius: 13px;
    background: linear-gradient(180deg, rgba(12, 56, 126, .78), rgba(5, 25, 72, .9));
    text-align: center;
}

.robo-arena.ra-child-profile .ra-profile-reference__stats strong {
    max-width: 100%;
    overflow: hidden;
    color: #fff;
    font-size: clamp(1rem, 5vw, 1.28rem);
    font-weight: 1000;
    text-overflow: ellipsis;
}

.robo-arena.ra-child-profile .ra-profile-reference__stats small {
    color: #bfe5ff;
    font-size: .6rem;
    font-weight: 900;
}

.robo-arena.ra-child-profile .ra-profile-reference__mission {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 78px;
    align-items: center;
    gap: 10px;
    padding: 12px;
}

.robo-arena.ra-child-profile .ra-profile-reference__mission span,
.robo-arena.ra-child-profile .ra-profile-reference__list h2,
.robo-arena.ra-child-profile .ra-profile-reference__settings-panel h2 {
    color: #5be8ff;
    font-weight: 950;
    text-transform: uppercase;
}

.robo-arena.ra-child-profile .ra-profile-reference__mission h2 {
    margin: 2px 0 4px;
    color: #fff;
    font-size: 1rem;
}

.robo-arena.ra-child-profile .ra-profile-reference__mission p {
    max-height: 2.6em;
    margin: 0 0 8px;
    overflow: hidden;
    color: #d8ecff;
    font-size: .76rem;
}

.robo-arena.ra-child-profile .ra-profile-reference__mission > a {
    display: grid;
    min-height: 86px;
    place-items: center;
    align-content: center;
    gap: 4px;
    color: #08285f;
    border-radius: 14px;
    background: linear-gradient(180deg, #fff6bb, #ffb21b);
    text-decoration: none;
    box-shadow: 0 0 18px rgba(255, 191, 31, .32);
}

.robo-arena.ra-child-profile .ra-profile-reference__mission > a img {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.robo-arena.ra-child-profile .ra-profile-reference__mission > a span {
    color: #08285f;
    font-size: .72rem;
}

.robo-arena.ra-child-profile .ra-profile-reference__list,
.robo-arena.ra-child-profile .ra-profile-reference__settings-panel {
    padding: 12px;
}

.robo-arena.ra-child-profile .ra-profile-reference__list h2,
.robo-arena.ra-child-profile .ra-profile-reference__settings-panel h2 {
    margin: 0 0 8px;
    font-size: .88rem;
}

.robo-arena.ra-child-profile .ra-profile-reference__list dl {
    display: grid;
    gap: 7px;
    margin: 0;
}

.robo-arena.ra-child-profile .ra-profile-reference__list dl > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 34px;
    padding: 7px 10px;
    border-radius: 10px;
    background: rgba(14, 56, 123, .58);
}

.robo-arena.ra-child-profile .ra-profile-reference__list dt {
    color: #d8ecff;
    font-size: .75rem;
}

.robo-arena.ra-child-profile .ra-profile-reference__list dd {
    margin: 0;
    color: #fff;
    font-weight: 950;
}

.robo-arena.ra-child-profile .ra-profile-reference__settings-panel {
    display: grid;
    gap: 8px;
}

.robo-arena.ra-child-profile .ra-profile-reference__settings-panel .toggle-row {
    color: #d8ecff;
}

.robo-arena.ra-child-profile .ra-profile-reference__settings-panel .profile-switch-child-form {
    margin-top: 4px;
}

.robo-arena.ra-child-profile .ra-profile-reference__settings-panel .profile-switch-child-form .btn {
    width: 100%;
}

@media (max-width: 720px) {
    .robo-arena.ra-child-profile .ra-profile-reference {
        width: 100%;
        gap: 9px;
    }

    .robo-arena.ra-child-profile .ra-profile-reference__hero {
        grid-template-columns: 82px minmax(0, 1fr);
        padding: 11px;
        gap: 11px;
    }

    .robo-arena.ra-child-profile .ra-profile-reference__photo summary,
    .robo-arena.ra-child-profile .ra-profile-reference__avatar {
        width: 82px;
        height: 82px;
    }

    .robo-arena.ra-child-profile .ra-profile-reference__mission {
        grid-template-columns: minmax(0, 1fr) 70px;
    }

    .robo-arena.ra-child-profile .ra-profile-reference__mission > a {
        min-height: 76px;
    }
}

@media (min-width: 900px) {
    .robo-arena.ra-child-profile .ra-profile-reference {
        width: min(430px, 100%);
    }
}

/* CHILD-PROFILE-GENERATED-002: premium profile pass with generated project background. */
body.robo-arena-page.ra-profile-page {
    background:
        linear-gradient(180deg, rgba(215, 249, 255, .24), rgba(232, 247, 255, .72)),
        url("../images/robo-arena/child-profile/profile-premium-bg.png") top center / cover repeat-y,
        #dff8ff !important;
}

.robo-arena.ra-child-profile {
    min-height: 100dvh !important;
    padding: max(10px, env(safe-area-inset-top)) 10px calc(96px + env(safe-area-inset-bottom)) !important;
    color: #093479 !important;
    background:
        linear-gradient(180deg, rgba(215, 249, 255, .24), rgba(232, 247, 255, .72)),
        url("../images/robo-arena/child-profile/profile-premium-bg.png") top center / cover no-repeat,
        #dff8ff !important;
}

.robo-arena.ra-child-profile .ra-profile-reference {
    position: relative !important;
    z-index: 1 !important;
    width: min(100%, 430px) !important;
    gap: 10px !important;
    color: #093479 !important;
}

.robo-arena.ra-child-profile .ra-profile-reference__top {
    min-height: 56px !important;
    padding: 8px 2px 2px !important;
}

.robo-arena.ra-child-profile .ra-profile-reference__top h1 {
    color: #123d91 !important;
    font-size: clamp(1.28rem, 6vw, 1.72rem) !important;
    font-weight: 1000 !important;
    text-shadow: 0 2px 0 #fff, 0 8px 18px rgba(40, 120, 215, .22) !important;
}

.robo-arena.ra-child-profile .ra-profile-reference__back,
.robo-arena.ra-child-profile .ra-profile-reference__settings {
    width: 44px !important;
    height: 44px !important;
    border: 2px solid rgba(255,255,255,.88) !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.92) !important;
    box-shadow: 0 10px 22px rgba(34, 117, 202, .18), inset 0 1px 0 rgba(255,255,255,1) !important;
}

.robo-arena.ra-child-profile .ra-profile-reference__back img,
.robo-arena.ra-child-profile .ra-profile-reference__settings img {
    width: 24px !important;
    height: 24px !important;
    object-fit: contain !important;
}

.robo-arena.ra-child-profile .ra-profile-reference__hero,
.robo-arena.ra-child-profile .ra-profile-reference__stats,
.robo-arena.ra-child-profile .ra-profile-reference__mission,
.robo-arena.ra-child-profile .ra-profile-reference__list,
.robo-arena.ra-child-profile .ra-profile-reference__settings-panel {
    border: 1px solid rgba(255,255,255,.88) !important;
    border-radius: 24px !important;
    background: linear-gradient(145deg, rgba(255,255,255,.92), rgba(245,252,255,.84)) !important;
    box-shadow:
        0 18px 34px rgba(62, 130, 198, .18),
        inset 0 1px 0 rgba(255,255,255,.98),
        inset 0 -1px 0 rgba(73, 143, 212, .1) !important;
    backdrop-filter: blur(10px) !important;
}

.robo-arena.ra-child-profile .ra-profile-reference__hero {
    grid-template-columns: 94px minmax(0, 1fr) !important;
    min-height: 132px !important;
    align-items: center !important;
    gap: 13px !important;
    padding: 14px !important;
}

.robo-arena.ra-child-profile .ra-profile-reference__photo summary,
.robo-arena.ra-child-profile .ra-profile-reference__avatar {
    width: 94px !important;
    height: 94px !important;
}

.robo-arena.ra-child-profile .ra-profile-reference__avatar {
    border: 4px solid #ffffff !important;
    background: linear-gradient(180deg, #ecfbff, #d9f7ff) !important;
    box-shadow: 0 0 0 4px rgba(39, 187, 255, .45), 0 16px 24px rgba(35, 107, 198, .22) !important;
}

.robo-arena.ra-child-profile .ra-profile-reference__photo summary span {
    right: -1px !important;
    bottom: 3px !important;
    width: 34px !important;
    height: 34px !important;
    border: 3px solid #ffffff !important;
    background: linear-gradient(180deg, #24d4ff, #0c78ec) !important;
    box-shadow: 0 8px 14px rgba(32, 114, 211, .25) !important;
}

.robo-arena.ra-child-profile .ra-profile-reference__identity h2 {
    color: #123d91 !important;
    font-size: clamp(1.36rem, 6.4vw, 1.9rem) !important;
    text-shadow: 0 2px 0 rgba(255,255,255,.9) !important;
}

.robo-arena.ra-child-profile .ra-profile-reference__identity small,
.robo-arena.ra-child-profile .ra-profile-reference__mission p,
.robo-arena.ra-child-profile .ra-profile-reference__list dt,
.robo-arena.ra-child-profile .ra-profile-reference__settings-panel .toggle-row {
    color: #244b91 !important;
}

.robo-arena.ra-child-profile .ra-profile-reference__identity strong,
.robo-arena.ra-child-profile .ra-profile-reference__mission span,
.robo-arena.ra-child-profile .ra-profile-reference__list h2,
.robo-arena.ra-child-profile .ra-profile-reference__settings-panel h2 {
    color: #0077d8 !important;
}

.robo-arena.ra-child-profile .ra-profile-reference__bar {
    height: 10px !important;
    border: 1px solid rgba(34, 159, 240, .42) !important;
    background: rgba(172, 221, 242, .72) !important;
    box-shadow: inset 0 2px 5px rgba(54, 112, 176, .18) !important;
}

.robo-arena.ra-child-profile .ra-profile-reference__bar i {
    background: linear-gradient(90deg, #1ddce8, #1684f5) !important;
    box-shadow: 0 0 12px rgba(25, 201, 245, .5) !important;
}

.robo-arena.ra-child-profile .ra-profile-reference__stats {
    gap: 9px !important;
    padding: 10px !important;
}

.robo-arena.ra-child-profile .ra-profile-reference__stats article {
    min-height: 92px !important;
    grid-template-rows: 34px 24px 16px !important;
    gap: 2px !important;
    border: 1px solid rgba(255,255,255,.86) !important;
    border-radius: 18px !important;
    background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(233,247,255,.9)) !important;
    box-shadow: 0 10px 18px rgba(43, 110, 183, .14), inset 0 1px 0 rgba(255,255,255,1) !important;
}

.robo-arena.ra-child-profile .ra-profile-reference__stats article img {
    width: 34px !important;
    height: 34px !important;
    object-fit: contain !important;
}

.robo-arena.ra-child-profile .ra-profile-reference__stats strong {
    color: #123d91 !important;
    font-size: clamp(1.06rem, 5.2vw, 1.38rem) !important;
}

.robo-arena.ra-child-profile .ra-profile-reference__stats small {
    color: #123d91 !important;
    font-size: .58rem !important;
}

.robo-arena.ra-child-profile .ra-profile-reference__mission {
    grid-template-columns: minmax(0, 1fr) 92px !important;
    gap: 10px !important;
    min-height: 150px !important;
    padding: 14px !important;
}

.robo-arena.ra-child-profile .ra-profile-reference__mission h2 {
    color: #123d91 !important;
    font-size: 1.08rem !important;
}

.robo-arena.ra-child-profile .ra-profile-reference__mission > a {
    min-height: 96px !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,.82) !important;
    border-radius: 22px !important;
    background: linear-gradient(180deg, #28caff 0%, #087eed 100%) !important;
    box-shadow: 0 16px 24px rgba(23, 114, 214, .25), 0 0 18px rgba(31, 210, 255, .38) !important;
}

.robo-arena.ra-child-profile .ra-profile-reference__mission > a img {
    width: 46px !important;
    height: 46px !important;
}

.robo-arena.ra-child-profile .ra-profile-reference__mission > a span {
    color: #ffffff !important;
    font-size: .64rem !important;
    text-align: center !important;
    text-shadow: 0 1px 3px rgba(5, 46, 110, .32) !important;
}

.robo-arena.ra-child-profile .ra-profile-reference__list,
.robo-arena.ra-child-profile .ra-profile-reference__settings-panel {
    padding: 14px !important;
}

.robo-arena.ra-child-profile .ra-profile-reference__list dl > div {
    min-height: 42px !important;
    border: 1px solid rgba(255,255,255,.8) !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,.68) !important;
}

.robo-arena.ra-child-profile .ra-profile-reference__list dd {
    color: #123d91 !important;
}

.robo-arena.ra-child-profile .profile-file-picker span,
.robo-arena.ra-child-profile .ra-profile-reference__settings-panel .btn {
    border: 1px solid rgba(255,255,255,.8) !important;
    border-radius: 18px !important;
    background: linear-gradient(180deg, #23caff, #0b7eea) !important;
    color: #ffffff !important;
    box-shadow: 0 12px 20px rgba(33, 119, 209, .2) !important;
}

.robo-arena.ra-child-profile .profile-account-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    margin: 12px 0 0 !important;
    gap: 10px !important;
}

.robo-arena.ra-child-profile .profile-account-actions .btn {
    display: grid !important;
    grid-template-columns: 34px minmax(0, auto) !important;
    min-height: 48px !important;
    padding: 7px 12px !important;
    gap: 7px !important;
    place-content: center !important;
    align-items: center !important;
    text-decoration: none !important;
}

.robo-arena.ra-child-profile .profile-account-actions .btn img {
    width: 34px !important;
    height: 34px !important;
    object-fit: contain !important;
}

.robo-arena.ra-child-profile .profile-account-actions .btn span {
    min-width: 0 !important;
    font-size: .82rem !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
}

.robo-arena.ra-child-profile .ra-reward-bottom-nav,
.robo-arena.ra-child-profile .ra-secondary-bottom-nav {
    background: rgba(255,255,255,.92) !important;
    border-color: rgba(255,255,255,.92) !important;
    box-shadow: 0 16px 28px rgba(45, 117, 198, .18), inset 0 1px 0 rgba(255,255,255,.98) !important;
}

.robo-arena.ra-child-profile .ra-reward-bottom-nav strong,
.robo-arena.ra-child-profile .ra-secondary-bottom-nav strong {
    color: #153d8c !important;
}

.robo-arena.ra-child-profile .ra-reward-bottom-nav a.is-active strong,
.robo-arena.ra-child-profile .ra-secondary-bottom-nav a.is-active strong {
    color: #ffffff !important;
}

@media (max-width: 720px) {
    .robo-arena.ra-child-profile {
        padding-inline: 8px !important;
    }

    .robo-arena.ra-child-profile .ra-profile-reference__hero {
        grid-template-columns: 82px minmax(0, 1fr) !important;
        min-height: 120px !important;
        gap: 11px !important;
        padding: 12px !important;
    }

    .robo-arena.ra-child-profile .ra-profile-reference__photo summary,
    .robo-arena.ra-child-profile .ra-profile-reference__avatar {
        width: 82px !important;
        height: 82px !important;
    }

    .robo-arena.ra-child-profile .ra-profile-reference__stats article {
        min-height: 84px !important;
    }

    .robo-arena.ra-child-profile .ra-profile-reference__mission {
        grid-template-columns: minmax(0, 1fr) 84px !important;
        min-height: 142px !important;
        padding: 12px !important;
    }

    .robo-arena.ra-child-profile .ra-profile-reference__mission > a {
        min-height: 88px !important;
    }
}

/* VISUAL-FUNCTIONAL-AUDIT-20260726: centering, touch targets and desktop polish. */
.robo-arena .arena-plan-strip .ra-trainer-cta {
    min-height: 44px !important;
    padding-block: 8px !important;
    border-radius: 18px !important;
}

.robo-arena .ra-world-arrow {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 50% !important;
}

.robo-arena .mode-buttons .chip {
    min-height: 46px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

@media (min-width: 980px) {
    .robo-arena.ra-child-profile .ra-profile-reference {
        width: min(100%, 1040px) !important;
        margin-inline: auto !important;
        grid-template-columns: minmax(390px, 430px) minmax(420px, 1fr) !important;
        grid-template-areas:
            "top top"
            "hero mission"
            "stats list"
            "settings list" !important;
        align-items: start !important;
        gap: 14px !important;
    }

    .robo-arena.ra-child-profile .ra-profile-reference__top {
        grid-area: top !important;
        width: 430px !important;
    }

    .robo-arena.ra-child-profile .ra-profile-reference__hero {
        grid-area: hero !important;
    }

    .robo-arena.ra-child-profile .ra-profile-reference__stats {
        grid-area: stats !important;
    }

    .robo-arena.ra-child-profile .ra-profile-reference__mission {
        grid-area: mission !important;
        min-height: 170px !important;
    }

    .robo-arena.ra-child-profile .ra-profile-reference__list {
        grid-area: list !important;
        min-height: 372px !important;
    }

    .robo-arena.ra-child-profile .ra-profile-reference__settings-panel {
        grid-area: settings !important;
    }
}

@media (max-width: 430px) {
    .robo-arena .ra-world-arrow {
        min-width: 46px !important;
        min-height: 46px !important;
    }

    .robo-arena .arena-plan-strip .ra-trainer-cta {
        min-height: 46px !important;
        font-size: .64rem !important;
    }
}

/* START-PREMIUM-REFERENCE-002: functional reconstruction of the supplied premium start screen. */
body.flow-start-page {
    min-width: 320px;
    color: #fff;
    background: #020d2c;
}

body.flow-start-page .flow-phone-wrap {
    width: 100%;
    min-height: 100dvh;
    padding: 24px;
    background:
        radial-gradient(circle at 50% 20%, rgba(0, 143, 255, .2), transparent 38%),
        #020d2c;
}

body.flow-start-page .flow-start {
    position: relative;
    display: grid;
    width: min(100%, 1180px);
    max-width: 1180px;
    min-height: min(820px, calc(100dvh - 48px));
    grid-template-columns: minmax(0, 1.16fr) minmax(360px, .84fr);
    overflow: hidden;
    border: 1px solid rgba(87, 193, 255, .74);
    border-radius: 32px;
    background: #03133b;
    box-shadow: 0 24px 70px rgba(0, 5, 28, .54), inset 0 0 0 1px rgba(255, 255, 255, .08);
}

body.flow-start-page .flow-start .flow-hero {
    position: relative;
    display: block;
    height: 100%;
    min-height: 760px;
    padding: 0;
    overflow: hidden;
    background: #05236a;
    box-shadow: inset -34px 0 48px rgba(0, 9, 45, .36);
}

body.flow-start-page .flow-start .flow-hero::after {
    display: none;
}

body.flow-start-page .flow-start .flow-hero-art {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
    object-position: center top;
}

body.flow-start-page .flow-start .flow-welcome-greeting {
    position: absolute;
    z-index: 3;
    right: auto;
    bottom: 18px;
    left: 50%;
    width: min(calc(100% - 32px), 320px);
    max-width: none;
    margin: 0;
    padding: 10px 14px;
    color: #fff;
    border: 1px solid rgba(64, 220, 239, .86);
    border-radius: 16px;
    background: rgba(2, 20, 61, .88);
    box-shadow: 0 10px 25px rgba(0, 9, 48, .3), 0 0 18px rgba(24, 226, 240, .22);
    font-size: .9rem;
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
    transform: translateX(-50%);
    backdrop-filter: blur(8px);
}

body.flow-start-page .flow-start .flow-welcome-greeting strong {
    display: inline;
    margin-right: 4px;
    color: #18e2f0;
    font-size: 1rem;
}
body.flow-start-page .flow-start .flow-sheet {
    position: relative;
    z-index: 4;
    align-self: center;
    min-height: 0;
    margin: 74px 30px 30px;
    padding: 36px 30px 30px;
    color: #fff;
    border: 2px solid rgba(66, 192, 255, .9);
    border-radius: 30px;
    background: linear-gradient(155deg, rgba(5, 25, 72, .97), rgba(0, 11, 46, .94));
    box-shadow:
        0 0 30px rgba(0, 149, 255, .28),
        inset 0 1px 0 rgba(255, 255, 255, .1),
        inset 0 0 42px rgba(0, 71, 174, .12);
    backdrop-filter: blur(14px);
}

body.flow-start-page .flow-start .flow-kicker {
    margin: 0 0 8px;
    color: #18e2f0;
    font-size: .9rem;
    letter-spacing: 0;
}

body.flow-start-page .flow-start .flow-sheet h1 {
    color: #fff;
    font-size: clamp(2rem, 3.4vw, 3rem);
    line-height: 1.08;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .24);
}

body.flow-start-page .flow-start .flow-sheet > p:not(.flow-kicker):not(.flow-note) {
    max-width: 420px;
    margin: 14px auto 24px;
    color: #cbd6eb;
    font-size: 1rem;
    line-height: 1.48;
}

body.flow-start-page .flow-start .flow-button {
    display: grid;
    min-height: 74px;
    margin-top: 14px;
    padding: 8px 14px;
    grid-template-columns: 58px minmax(0, 1fr) 42px;
    gap: 12px;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .52);
    border-radius: 22px;
    font-size: clamp(.9rem, 1.6vw, 1.16rem);
    box-shadow:
        0 0 20px rgba(0, 215, 255, .28),
        inset 0 1px 0 rgba(255, 255, 255, .32),
        inset 0 -4px 0 rgba(0, 23, 73, .22);
    transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}

body.flow-start-page .flow-start .flow-button:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
}

body.flow-start-page .flow-start .flow-button:active {
    transform: translateY(1px);
}

body.flow-start-page .flow-start .flow-button:focus-visible {
    outline: 4px solid #fff;
    outline-offset: 3px;
}

body.flow-start-page .flow-start .flow-button--green {
    background: linear-gradient(135deg, #12cfc9, #008cae);
}

body.flow-start-page .flow-start .flow-button--blue {
    background: linear-gradient(135deg, #078eff, #0752d8);
}

body.flow-start-page .flow-start .flow-button--install {
    color: #052557;
    border-color: #ffe071;
    background: linear-gradient(135deg, #ffd11e, #ee9700);
    box-shadow:
        0 0 22px rgba(255, 185, 0, .34),
        inset 0 1px 0 rgba(255, 255, 255, .45),
        inset 0 -4px 0 rgba(135, 77, 0, .2);
}

body.flow-start-page .flow-button__icon,
body.flow-start-page .flow-button__arrow {
    position: relative;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
}

body.flow-start-page .flow-button__icon {
    width: 50px;
    height: 50px;
}

body.flow-start-page .flow-button__arrow img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

body.flow-start-page .flow-button__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: none;
}


body.flow-start-page .flow-button__label {
    min-width: 0;
    overflow-wrap: anywhere;
    text-align: center;
}

body.flow-start-page .flow-button__arrow {
    width: 38px;
    height: 38px;
}

body.flow-start-page .flow-button__arrow::before {
    display: none;
}

body.flow-start-page .flow-locale {
    position: absolute;
    z-index: 8;
    top: 22px;
    right: 22px;
    color: #fff;
}

body.flow-start-page .flow-locale summary {
    display: grid;
    min-width: 112px;
    min-height: 54px;
    padding: 8px 14px;
    grid-template-columns: 34px 1fr 14px;
    gap: 10px;
    align-items: center;
    border: 1px solid rgba(91, 185, 255, .72);
    border-radius: 28px;
    background: rgba(3, 16, 57, .9);
    box-shadow: 0 0 22px rgba(0, 145, 255, .34), inset 0 1px 0 rgba(255, 255, 255, .12);
    cursor: pointer;
    list-style: none;
}

body.flow-start-page .flow-locale summary::-webkit-details-marker {
    display: none;
}

body.flow-start-page .flow-locale summary:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

body.flow-start-page .flow-locale__flag {
    display: block;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 4, 24, .42));
}

body.flow-start-page .flow-locale__flag::after {
    display: none;
}

body.flow-start-page .flow-locale__chevron {
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .16s ease;
}

body.flow-start-page .flow-locale[open] .flow-locale__chevron {
    transform: translateY(2px) rotate(225deg);
}

body.flow-start-page .flow-locale__menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 138px;
    padding: 10px 12px;
    border: 1px solid rgba(91, 185, 255, .6);
    border-radius: 14px;
    background: rgba(3, 16, 57, .97);
    box-shadow: 0 14px 30px rgba(0, 4, 24, .44);
}

body.flow-start-page .flow-locale__menu span {
    display: block;
    color: #fff;
    font-size: .84rem;
    font-weight: 800;
}

@media (max-width: 720px) {
    body.flow-start-page .flow-phone-wrap {
        padding: 0;
        background: #020d2c;
    }

    body.flow-start-page .flow-start {
        display: block;
        width: 100%;
        min-height: 100dvh;
        border: 0;
        border-radius: 0;
        background: #03133b;
        box-shadow: none;
    }

    body.flow-start-page .flow-start .flow-hero {
        height: 450px;
        min-height: 450px;
        background-position: center 38%;
        background-size: cover;
        box-shadow: inset 0 -36px 42px rgba(0, 11, 49, .24);
    }


    body.flow-start-page .flow-start .flow-sheet {
        width: calc(100% - 24px);
        margin: -12px 12px 12px;
        padding: 25px 18px 18px;
        border-radius: 26px;
    }

    body.flow-start-page .flow-start .flow-sheet h1 {
        font-size: clamp(1.85rem, 8vw, 2.25rem);
    }

    body.flow-start-page .flow-start .flow-sheet > p:not(.flow-kicker):not(.flow-note) {
        margin: 10px auto 18px;
        font-size: .94rem;
    }

    body.flow-start-page .flow-start .flow-button {
        min-height: 68px;
        margin-top: 10px;
        padding: 7px 11px;
        grid-template-columns: 52px minmax(0, 1fr) 38px;
        gap: 8px;
        border-radius: 19px;
        font-size: clamp(.86rem, 4vw, 1.05rem);
    }

    body.flow-start-page .flow-button__icon {
        width: 46px;
        height: 46px;
    }

    body.flow-start-page .flow-button__arrow {
        width: 36px;
        height: 36px;
    }

    body.flow-start-page .flow-locale {
        top: 13px;
        right: 13px;
    }

    body.flow-start-page .flow-locale summary {
        min-width: 96px;
        min-height: 46px;
        padding: 6px 11px;
        grid-template-columns: 30px 1fr 12px;
        gap: 7px;
    }

    body.flow-start-page .flow-locale__flag {
        width: 30px;
        height: 30px;
    }

}

@media (max-height: 820px) and (max-width: 720px) {
    body.flow-start-page .flow-start .flow-hero {
        height: 410px;
        min-height: 410px;
    }


    body.flow-start-page .flow-start .flow-sheet {
        padding-top: 21px;
    }
}

@media (max-width: 370px) {
    body.flow-start-page .flow-start .flow-hero {
        height: 402px;
        min-height: 402px;
    }

    body.flow-start-page .flow-start .flow-sheet {
        width: calc(100% - 16px);
        margin-right: 8px;
        margin-left: 8px;
        padding-inline: 14px;
    }

    body.flow-start-page .flow-start .flow-button {
        grid-template-columns: 48px minmax(0, 1fr) 34px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.flow-start-page .flow-start .flow-button,
    body.flow-start-page .flow-locale__chevron {
        transition: none;
    }
}

/* Welcome hero: editable greeting over the user-provided Arena composition. */
@media (max-width: 720px) {
    body.flow-start-page .flow-start .flow-welcome-greeting {
        bottom: 16px;
        width: min(calc(100% - 28px), 286px);
        padding: 8px 11px;
        font-size: .78rem;
    }

    body.flow-start-page .flow-start .flow-welcome-greeting strong {
        font-size: .86rem;
    }
}

@media (max-width: 370px) {
    body.flow-start-page .flow-start .flow-welcome-greeting {
        bottom: 14px;
        width: min(calc(100% - 24px), 270px);
        padding: 7px 9px;
        font-size: .72rem;
    }
}
/* WELCOME-REFERENCE-009: editable reconstruction of the supplied welcome overview. */
body.flow-start-page .flow-welcome-page {
    display: block;
    width: min(100%, 900px);
    max-width: 900px;
    min-height: 0;
    overflow: hidden;
}

body.flow-start-page .flow-welcome-page .flow-hero {
    width: 100%;
    height: 720px;
    min-height: 720px;
}

body.flow-start-page .flow-welcome-content {
    display: grid;
    gap: 18px;
    padding: 28px;
    color: #fff;
    background:
        radial-gradient(circle at 50% 0, rgba(0, 119, 255, .16), transparent 26rem),
        #03133b;
}

body.flow-start-page .flow-welcome-intro {
    max-width: 720px;
    margin: 0 auto 4px;
    text-align: center;
}

body.flow-start-page .flow-welcome-intro .flow-kicker {
    margin: 0 0 8px;
    color: #18e2f0;
    font-size: .84rem;
}

body.flow-start-page .flow-welcome-intro h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(2rem, 5vw, 3.3rem);
    line-height: 1.05;
}

body.flow-start-page .flow-welcome-intro > p:last-child {
    margin: 14px auto 0;
    color: #d4def0;
    font-size: 1rem;
    line-height: 1.55;
}

body.flow-start-page .flow-welcome-panel {
    padding: 24px;
    border: 1px solid rgba(70, 178, 255, .68);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(5, 31, 88, .96), rgba(2, 16, 58, .94));
    box-shadow: 0 14px 32px rgba(0, 6, 34, .32), inset 0 1px 0 rgba(255, 255, 255, .08);
}

body.flow-start-page .flow-welcome-panel h2 {
    margin: 0 0 16px;
    color: #22dcee;
    font-size: clamp(1.35rem, 3vw, 2rem);
    text-align: center;
}

body.flow-start-page .flow-welcome-feature-list {
    display: grid;
    max-width: 670px;
    margin: 0 auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 18px;
}

body.flow-start-page .flow-welcome-feature {
    display: grid;
    min-width: 0;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}

body.flow-start-page .flow-welcome-feature:last-child {
    grid-column: 1 / -1;
    width: min(100%, 326px);
    justify-self: center;
}

body.flow-start-page .flow-welcome-feature img,
body.flow-start-page .flow-welcome-parent-grid img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    filter: drop-shadow(0 5px 8px rgba(0, 0, 0, .3));
}

body.flow-start-page .flow-welcome-feature div,
body.flow-start-page .flow-welcome-parent-grid article {
    display: grid;
    gap: 3px;
}

body.flow-start-page .flow-welcome-feature strong,
body.flow-start-page .flow-welcome-parent-grid strong {
    color: #fff;
    font-size: .94rem;
    line-height: 1.2;
}

body.flow-start-page .flow-welcome-feature span,
body.flow-start-page .flow-welcome-parent-grid span {
    color: #c8d6ed;
    font-size: .8rem;
    line-height: 1.35;
}

body.flow-start-page .flow-welcome-panel--parents {
    border-color: rgba(169, 71, 255, .76);
    background: linear-gradient(145deg, rgba(43, 17, 89, .96), rgba(12, 16, 66, .95));
    box-shadow: 0 14px 32px rgba(18, 0, 58, .36), inset 0 1px 0 rgba(255, 255, 255, .08);
}

body.flow-start-page .flow-welcome-panel--parents h2 {
    color: #c078ff;
}

body.flow-start-page .flow-welcome-panel__lead {
    margin: -8px 0 20px;
    color: #e3d9f4;
    text-align: center;
}

body.flow-start-page .flow-welcome-parent-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

body.flow-start-page .flow-welcome-parent-grid article {
    min-width: 0;
    align-content: start;
    justify-items: center;
    padding: 4px 8px;
    text-align: center;
}

body.flow-start-page .flow-welcome-panel--journey {
    position: relative;
    overflow: hidden;
    border-color: rgba(39, 218, 177, .78);
    background:
        linear-gradient(rgba(1, 19, 42, .68), rgba(1, 25, 47, .9)),
        url('../images/robo-arena/reference-production/world-multiplication-hd.png') center / cover no-repeat,
        #052a33;
}

body.flow-start-page .flow-welcome-panel--journey h2 {
    color: #b7f5c5;
}

body.flow-start-page .flow-welcome-panel--journey > p {
    margin: -8px auto 22px;
    color: #e2f5e8;
    text-align: center;
}

body.flow-start-page .flow-welcome-steps {
    position: relative;
    display: grid;
    margin: 0;
    padding: 0;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    list-style: none;
}

body.flow-start-page .flow-welcome-steps::before {
    position: absolute;
    top: 22px;
    right: 8%;
    left: 8%;
    height: 4px;
    border-radius: 4px;
    background: linear-gradient(90deg, #69e351, #40c8f4, #a86cf5, #ffd13b);
    box-shadow: 0 0 12px rgba(255, 214, 54, .58);
    content: '';
}

body.flow-start-page .flow-welcome-steps li {
    position: relative;
    display: grid;
    min-width: 0;
    justify-items: center;
    gap: 5px;
    text-align: center;
}

body.flow-start-page .flow-welcome-steps li > span {
    z-index: 1;
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    color: #fff;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #0a9de7;
    box-shadow: 0 0 14px rgba(28, 203, 255, .68);
    font-size: 1.1rem;
    font-weight: 900;
}

body.flow-start-page .flow-welcome-steps li:nth-child(1) > span { background: #45b936; }
body.flow-start-page .flow-welcome-steps li:nth-child(3) > span { background: #28a846; }
body.flow-start-page .flow-welcome-steps li:nth-child(4) > span { background: #8a43cf; }
body.flow-start-page .flow-welcome-steps li:nth-child(5) > span { background: #e29310; }

body.flow-start-page .flow-welcome-steps strong {
    color: #fff;
    font-size: .82rem;
}

body.flow-start-page .flow-welcome-steps small {
    color: #d4e5df;
    font-size: .7rem;
    line-height: 1.3;
}

body.flow-start-page .flow-welcome-safety {
    display: grid;
    padding: 16px 20px;
    grid-template-columns: 62px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    border: 1px solid rgba(34, 166, 255, .7);
    border-radius: 18px;
    background: rgba(4, 27, 79, .94);
    box-shadow: 0 10px 26px rgba(0, 6, 34, .28);
}

body.flow-start-page .flow-welcome-safety img {
    width: 58px;
    height: 58px;
    object-fit: contain;
}

body.flow-start-page .flow-welcome-safety div {
    display: grid;
    gap: 3px;
}

body.flow-start-page .flow-welcome-safety strong {
    color: #fff;
    font-size: 1.05rem;
}

body.flow-start-page .flow-welcome-safety span {
    color: #cedaee;
    font-size: .82rem;
    line-height: 1.35;
}

body.flow-start-page .flow-welcome-safety b {
    padding: 9px 13px;
    color: #fff;
    border-radius: 16px;
    background: rgba(31, 166, 82, .9);
    white-space: nowrap;
}

body.flow-start-page .flow-welcome-page .flow-sheet {
    width: calc(100% - 56px);
    margin: 0 28px 28px;
}

@media (max-width: 720px) {
    body.flow-start-page .flow-welcome-page {
        width: 100%;
        max-width: none;
    }

    body.flow-start-page .flow-welcome-page .flow-hero {
        height: 450px;
        min-height: 450px;
    }

    body.flow-start-page .flow-welcome-content {
        gap: 14px;
        padding: 22px 12px 12px;
    }

    body.flow-start-page .flow-welcome-panel {
        padding: 18px 14px;
        border-radius: 18px;
    }

    body.flow-start-page .flow-welcome-feature-list {
        grid-template-columns: 1fr;
    }

    body.flow-start-page .flow-welcome-feature:last-child {
        grid-column: auto;
        width: auto;
        justify-self: stretch;
    }

    body.flow-start-page .flow-welcome-parent-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px 8px;
    }

    body.flow-start-page .flow-welcome-parent-grid article:last-child {
        grid-column: 1 / -1;
        width: min(100%, 180px);
        justify-self: center;
    }

    body.flow-start-page .flow-welcome-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px 10px;
    }

    body.flow-start-page .flow-welcome-steps::before {
        display: none;
    }

    body.flow-start-page .flow-welcome-steps li:last-child {
        grid-column: 1 / -1;
    }

    body.flow-start-page .flow-welcome-safety {
        padding: 14px;
        grid-template-columns: 50px minmax(0, 1fr);
        gap: 10px;
    }

    body.flow-start-page .flow-welcome-safety img {
        width: 48px;
        height: 48px;
    }

    body.flow-start-page .flow-welcome-safety b {
        grid-column: 1 / -1;
        justify-self: center;
    }

    body.flow-start-page .flow-welcome-page .flow-sheet {
        width: calc(100% - 24px);
        margin: 0 12px 12px;
    }
}

@media (max-height: 820px) and (max-width: 720px) {
    body.flow-start-page .flow-welcome-page .flow-hero {
        height: 410px;
        min-height: 410px;
    }
}

@media (max-width: 370px) {
    body.flow-start-page .flow-welcome-page .flow-hero {
        height: 402px;
        min-height: 402px;
    }

    body.flow-start-page .flow-welcome-feature {
        grid-template-columns: 46px minmax(0, 1fr);
        gap: 9px;
    }

    body.flow-start-page .flow-welcome-feature img,
    body.flow-start-page .flow-welcome-parent-grid img {
        width: 44px;
        height: 44px;
    }

    body.flow-start-page .flow-welcome-page .flow-sheet {
        width: calc(100% - 16px);
        margin-right: 8px;
        margin-left: 8px;
    }
}
/* WELCOME-FIDELITY-010: exact visual pieces extracted from the user-supplied welcome design. */
body.flow-start-page .flow-welcome-page .flow-hero {
    height: auto;
    min-height: 0;
    aspect-ratio: 720 / 226;
    background: #03133b;
}

body.flow-start-page .flow-welcome-page .flow-hero-art {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

body.flow-start-page .flow-welcome-panel--children {
    overflow: hidden;
}

body.flow-start-page .flow-welcome-children-art {
    display: flex;
    max-width: 650px;
    height: 190px;
    margin: -4px auto 14px;
    align-items: flex-end;
    justify-content: space-between;
    overflow: hidden;
}

body.flow-start-page .flow-welcome-children-art img {
    width: auto;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: screen;
}

body.flow-start-page .flow-welcome-parent-art {
    display: block;
    width: min(100%, 250px);
    height: auto;
    margin: -8px auto 14px;
    border-radius: 16px;
    object-fit: contain;
    mix-blend-mode: screen;
}

body.flow-start-page .flow-welcome-journey-art {
    display: block;
    width: 100%;
    height: auto;
    margin: -4px auto 18px;
    border: 1px solid rgba(45, 226, 184, .5);
    border-radius: 15px;
    object-fit: cover;
    box-shadow: 0 10px 24px rgba(0, 8, 25, .34);
}

@media (max-width: 720px) {
    body.flow-start-page .flow-welcome-page .flow-hero {
        height: auto;
        min-height: 0;
    }

    body.flow-start-page .flow-welcome-children-art {
        height: 150px;
        margin-bottom: 12px;
    }

    body.flow-start-page .flow-welcome-parent-art {
        width: min(100%, 210px);
    }
}

@media (max-width: 370px) {
    body.flow-start-page .flow-welcome-children-art {
        height: 132px;
    }
}
/* WELCOME-EXACT-011: untouched user-supplied poster followed by functional HTML entry controls. */
body.flow-start-page .flow-welcome-page {
    width: min(100%, 720px);
    max-width: 720px;
}

body.flow-start-page .flow-welcome-poster {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #03133b;
}

body.flow-start-page .flow-welcome-poster img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    object-fit: contain;
}
body.flow-start-page .flow-welcome-poster-title {
    position: absolute;
    z-index: 2;
    top: 17.15%;
    right: 15%;
    left: 15%;
    display: block;
    margin: 0;
    padding: .15em .25em .2em;
    color: #fff;
    background: #03123a;
    box-shadow: 0 0 8px 5px #03123a;
    font-size: clamp(1rem, 4.2vw, 2rem);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: 0;
    text-align: center;
    text-shadow: 0 2px 5px rgba(0, 0, 0, .55);
}

body.flow-start-page .flow-welcome-page .flow-sheet {
    width: calc(100% - 32px);
    margin: 16px 16px 24px;
}

@media (max-width: 720px) {
    body.flow-start-page .flow-welcome-page {
        width: 100%;
        max-width: none;
    }

    body.flow-start-page .flow-welcome-page .flow-sheet {
        width: calc(100% - 24px);
        margin: 12px;
    }
}
/* MAIN-SCREEN-USER-REFERENCE-012: exact visual with responsive functional hotspots. */
body.flow-start-page .flow-welcome-page {
    width: min(100%, 853px);
    max-width: 853px;
    min-height: 0;
    border: 0;
    border-radius: 0;
    background: #001443;
    box-shadow: 0 24px 70px rgba(0, 5, 28, .54);
}

body.flow-start-page .flow-main-screen {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #001443;
}

body.flow-start-page .flow-main-screen > img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    object-fit: contain;
}

body.flow-start-page .flow-main-hotspot {
    position: absolute;
    z-index: 3;
    display: block;
    min-height: 44px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .001);
    transform: translateY(-50%);
    cursor: pointer;
    touch-action: manipulation;
}

body.flow-start-page .flow-main-hotspot:hover {
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .34), 0 0 18px rgba(28, 211, 255, .48);
}

body.flow-start-page .flow-main-hotspot:focus-visible {
    outline: 4px solid #fff;
    outline-offset: 3px;
    box-shadow: 0 0 0 7px rgba(0, 179, 255, .8);
}

body.flow-start-page .flow-main-hotspot--child {
    top: 38.18%;
    left: 7.39%;
    width: 37.05%;
    height: max(3.25%, 44px);
}

body.flow-start-page .flow-main-hotspot--parent {
    top: 57.54%;
    left: 7.39%;
    width: 36.93%;
    height: max(3.15%, 44px);
}

body.flow-start-page .flow-main-hotspot--daily {
    top: 90.46%;
    left: 7.85%;
    width: 35.4%;
    height: max(2.3%, 44px);
}

body.flow-start-page .flow-main-hotspot--duel,
body.flow-start-page .flow-main-hotspot--numbers,
body.flow-start-page .flow-main-hotspot--treasure,
body.flow-start-page .flow-main-hotspot--time {
    top: 96.31%;
    width: 18%;
    height: max(5.25%, 44px);
}

body.flow-start-page .flow-main-hotspot--duel { left: 9.61%; }
body.flow-start-page .flow-main-hotspot--numbers { left: 29.78%; }
body.flow-start-page .flow-main-hotspot--treasure { left: 50.06%; }
body.flow-start-page .flow-main-hotspot--time { left: 70.46%; }

@media (max-width: 720px) {
    body.flow-start-page .flow-welcome-page {
        width: 100%;
        max-width: none;
        box-shadow: none;
    }

    body.flow-start-page .flow-main-hotspot {
        border-radius: 10px;
    }
}
/* CHILD-ID-USER-REFERENCE-005: functional reconstruction from the supplied screen. */
body.flow-child-id-page {
    margin: 0;
    min-width: 320px;
    min-height: 100vh;
    min-height: 100dvh;
    color: #fff;
    background: radial-gradient(circle at 50% 23%, rgba(0, 110, 255, .32), transparent 31rem), #00132f;
}

body.flow-child-id-page .child-id-screen {
    display: grid;
    min-height: 100vh;
    min-height: 100dvh;
    place-items: center;
    padding: 18px;
}

body.flow-child-id-page .child-id-stage {
    position: relative;
    width: min(100%, 430px);
    min-height: min(920px, calc(100dvh - 36px));
    overflow: hidden;
    border: 1px solid rgba(38, 145, 223, .42);
    border-radius: 28px;
    background: #00142f;
    box-shadow: 0 28px 70px rgba(0, 2, 22, .48), inset 0 0 70px rgba(0, 102, 212, .08);
}

body.flow-child-id-page .child-id-scene {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 853 / 705;
    object-fit: cover;
}

body.flow-child-id-page .child-id-back {
    position: absolute;
    z-index: 7;
    top: 22px;
    left: 24px;
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border-radius: 50%;
    transition: background-color .16s ease, transform .16s ease;
}

body.flow-child-id-page .child-id-back:hover { background: rgba(19, 111, 194, .24); }
body.flow-child-id-page .child-id-back:active { transform: scale(.95); }

body.flow-child-id-page .child-id-back:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

body.flow-child-id-page .child-id-back img {
    display: block;
    width: 42px;
    height: 42px;
    object-fit: contain;
}

body.flow-child-id-page .child-id-panel {
    position: relative;
    z-index: 1;
    min-height: 555px;
    margin-top: -8.3%;
    padding: 43px 28px 22px;
    border: 2px solid #185984;
    border-top-color: transparent;
    border-bottom: 0;
    border-radius: 28px 28px 0 0;
    background: linear-gradient(180deg, #001b3a 0%, #001630 100%);
    display: flex;
    flex-direction: column;
    box-shadow: inset 0 0 45px rgba(0, 88, 176, .09);
    text-align: center;
}

body.flow-child-id-page .child-id-panel h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(2rem, 8.4vw, 2.45rem);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.08;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .3);
}

body.flow-child-id-page .child-id-intro {
    margin: 12px auto 0;
    color: #c6d1e2;
    font-size: clamp(1rem, 4.4vw, 1.15rem);
    line-height: 1.48;
}

body.flow-child-id-page .child-id-intro strong,
body.flow-child-id-page .child-id-info strong { color: #168dff; }

body.flow-child-id-page .child-id-form { margin-top: 22px; }

body.flow-child-id-page .child-id-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

body.flow-child-id-page .child-id-input-shell { position: relative; }

body.flow-child-id-page .child-id-input-shell::after {
    display: none;
}

body.flow-child-id-page #child-id {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 66px;
    padding: 0 13px 0 19px;
    border: 2px solid #266d9d;
    border-radius: 12px;
    outline: 0;
    color: #fff;
    background:
        linear-gradient(90deg, transparent calc(50% - 7px), #001630 calc(50% - 7px), #001630 calc(50% + 7px), transparent calc(50% + 7px)),
        repeating-linear-gradient(90deg, transparent 0, transparent calc(12.5% - 1px), rgba(53, 112, 151, .42) calc(12.5% - 1px), rgba(53, 112, 151, .42) 12.5%),
        rgba(0, 18, 43, .72);
    font-family: Consolas, "Courier New", monospace;
    font-size: clamp(1.42rem, 7vw, 1.9rem);
    font-weight: 900;
    letter-spacing: .27em;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    box-shadow: inset 0 3px 13px rgba(0, 0, 18, .38);
    caret-color: #24e0ef;
}

body.flow-child-id-page #child-id::placeholder {
    color: #fff;
    opacity: .92;
}

body.flow-child-id-page #child-id:hover { border-color: #3598d7; }

body.flow-child-id-page #child-id:focus {
    border-color: #22cce3;
    box-shadow: 0 0 0 3px rgba(34, 204, 227, .18), inset 0 3px 13px rgba(0, 0, 18, .38);
}

body.flow-child-id-page .child-id-message {
    min-height: 20px;
    margin: 5px 0 0;
    color: #ffb8c0;
    font-size: .76rem;
    line-height: 1.3;
}

body.flow-child-id-page .child-id-message:empty { visibility: hidden; }

body.flow-child-id-page .child-id-info {
    display: grid;
    min-height: 74px;
    padding: 11px 15px;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    border: 1px solid #185984;
    border-radius: 14px;
    color: #becce0;
    background: rgba(0, 16, 40, .52);
    font-size: .88rem;
    line-height: 1.45;
    text-align: left;
}

body.flow-child-id-page .child-id-info__icon,
body.flow-child-id-page .child-id-help summary > span {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    color: #2499ff;
    border: 3px solid currentColor;
    border-radius: 50%;
    font-size: 1.16rem;
    font-weight: 900;
}

body.flow-child-id-page .child-id-submit {
    display: grid;
    width: 100%;
    min-height: 66px;
    margin-top: 18px;
    padding: 8px 22px;
    grid-template-columns: minmax(0, 1fr) 30px;
    align-items: center;
    border: 2px solid #71f0d7;
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(135deg, #20cdb7, #099b8c);
    font: inherit;
    font-size: 1.2rem;
    font-weight: 900;
    letter-spacing: 0;
    box-shadow: 0 9px 22px rgba(0, 208, 185, .25), inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -4px 0 rgba(0, 70, 76, .22);
    cursor: pointer;
    transition: filter .16s ease, transform .16s ease;
}

body.flow-child-id-page .child-id-submit:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

body.flow-child-id-page .child-id-submit:active { transform: translateY(1px); }

body.flow-child-id-page .child-id-submit:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

body.flow-child-id-page .child-id-submit:disabled {
    cursor: wait;
    filter: saturate(.45);
    opacity: .72;
}

body.flow-child-id-page .child-id-submit__arrow {
    width: 18px;
    height: 18px;
    justify-self: center;
    border-top: 5px solid #fff;
    border-right: 5px solid #fff;
    transform: rotate(45deg);
}

body.flow-child-id-page .child-id-help {
    position: relative;
    margin-top: auto;
    padding-top: 14px;
}

body.flow-child-id-page .child-id-help summary {
    display: inline-grid;
    min-height: 48px;
    padding: 4px 8px;
    grid-template-columns: 38px auto;
    align-items: center;
    gap: 12px;
    color: #2c9fff;
    border-radius: 10px;
    font-size: .98rem;
    cursor: pointer;
    list-style: none;
}

body.flow-child-id-page .child-id-help summary::-webkit-details-marker { display: none; }

body.flow-child-id-page .child-id-help summary:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

body.flow-child-id-page .child-id-help summary > span {
    width: 34px;
    height: 34px;
    border-width: 2px;
    font-size: 1rem;
}

body.flow-child-id-page .child-id-help__content {
    position: absolute;
    z-index: 9;
    right: 0;
    bottom: 52px;
    left: 0;
    padding: 16px;
    border: 1px solid #2a79ad;
    border-radius: 15px;
    color: #d8e4f1;
    background: #00234a;
    box-shadow: 0 18px 34px rgba(0, 0, 20, .46);
}

body.flow-child-id-page .child-id-help__content p {
    margin: 0 0 13px;
    font-size: .86rem;
    line-height: 1.45;
}

body.flow-child-id-page .child-id-help__content a {
    display: inline-grid;
    min-height: 44px;
    padding: 8px 14px;
    place-items: center;
    color: #fff;
    border: 1px solid #4cb8ff;
    border-radius: 10px;
    background: #087ee1;
    font-size: .75rem;
    font-weight: 900;
    text-decoration: none;
}

@media (max-width: 720px) {
    body.flow-child-id-page .child-id-screen {
        padding: 0;
        place-items: start center;
    }

    body.flow-child-id-page .child-id-stage {
        width: 100%;
        min-height: 100dvh;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    body.flow-child-id-page .child-id-panel {
        min-height: calc(100dvh - 74.35vw);
    }
}

@media (max-width: 370px) {
    body.flow-child-id-page .child-id-panel {
        padding-right: 20px;
        padding-left: 20px;
    }

    body.flow-child-id-page #child-id {
        padding-left: 14px;
        font-size: 1.35rem;
        letter-spacing: .22em;
    }

    body.flow-child-id-page .child-id-info {
        padding-inline: 12px;
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 9px;
        font-size: .82rem;
    }
}

@media (max-height: 760px) and (max-width: 720px) {
    body.flow-child-id-page .child-id-panel { padding-top: 35px; }
    body.flow-child-id-page .child-id-intro { margin-top: 7px; }
    body.flow-child-id-page .child-id-form { margin-top: 15px; }
    body.flow-child-id-page .child-id-info { min-height: 64px; }

    body.flow-child-id-page .child-id-submit {
        min-height: 58px;
        margin-top: 13px;
    }

    body.flow-child-id-page .child-id-help { margin-top: auto; padding-top: 4px; }
}

@media (prefers-reduced-motion: reduce) {
    body.flow-child-id-page .child-id-back,
    body.flow-child-id-page .child-id-submit { transition: none; }
}

/* CHILD-ID-SLOTS-006: exact per-character placement for the 4 + 4 ID layout. */
body.flow-child-id-page .child-id-input-shell {
    position: relative;
    height: 66px;
}

body.flow-child-id-page .child-id-slot-groups {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    pointer-events: none;
}

body.flow-child-id-page .child-id-slot-group {
    display: grid;
    min-width: 0;
    overflow: hidden;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 2px solid #266d9d;
    border-radius: 12px;
    background: rgba(0, 18, 43, .72);
    box-shadow: inset 0 3px 13px rgba(0, 0, 18, .38);
    transition: border-color .16s ease, box-shadow .16s ease;
}

body.flow-child-id-page .child-id-slot {
    display: grid;
    min-width: 0;
    place-items: center;
    color: #fff;
    border-left: 1px solid rgba(53, 112, 151, .42);
    font-family: Consolas, "Courier New", monospace;
    font-size: clamp(1.42rem, 7vw, 1.9rem);
    font-weight: 900;
    line-height: 1;
    text-align: center;
}

body.flow-child-id-page .child-id-slot:first-child {
    border-left: 0;
}

body.flow-child-id-page .child-id-slot-groups:not(.has-value) .child-id-slot::before {
    color: rgba(255, 255, 255, .88);
    content: attr(data-placeholder);
}

body.flow-child-id-page .child-id-input-shell:hover .child-id-slot-group {
    border-color: #3598d7;
}

body.flow-child-id-page .child-id-input-shell:focus-within .child-id-slot-group {
    border-color: #22cce3;
    box-shadow: 0 0 0 3px rgba(34, 204, 227, .18), inset 0 3px 13px rgba(0, 0, 18, .38);
}

body.flow-child-id-page #child-id {
    position: absolute;
    z-index: 3;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0 !important;
    outline: 0;
    color: transparent;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 16px;
    letter-spacing: 0;
    opacity: .01;
    caret-color: transparent;
    cursor: text;
    -webkit-text-fill-color: transparent;
}

body.flow-child-id-page #child-id::placeholder {
    color: transparent;
    opacity: 0;
    -webkit-text-fill-color: transparent;
}

@media (max-width: 370px) {
    body.flow-child-id-page .child-id-slot-groups {
        gap: 12px;
    }

    body.flow-child-id-page .child-id-slot {
        font-size: 1.35rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.flow-child-id-page .child-id-slot-group {
        transition: none;
    }
}

/* PARENT-REGISTER-USER-REFERENCE-013 */

/* CHILD-ID-SCREEN-BORDER-001: full-screen border without moving the approved layout. */
body.flow-child-id-page .child-id-stage {
    border: 0;
}

body.flow-child-id-page .child-id-stage::after {
    position: absolute;
    inset: 0;
    z-index: 30;
    border: 2px solid rgba(34, 185, 255, .72);
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(130, 231, 255, .16), inset 0 0 30px rgba(14, 165, 233, .14);
    content: "";
    pointer-events: none;
}

@media (max-width: 720px) {
    body.flow-child-id-page .child-id-stage::after {
        border-radius: 0;
    }
}
body.flow-parent-register-page{margin:0;min-width:320px;color:#fff;background:radial-gradient(circle at 50% 8%,#123a87,#00132f 45rem,#00091d)}
.parent-register-screen{display:grid;min-height:100dvh;padding:18px;place-items:start center}.parent-register-card{width:min(100%,590px);overflow:hidden;border:1px solid #284a87;border-radius:28px;background:#071139;box-shadow:0 26px 70px #00051c}
.parent-register-hero{position:relative;height:356px;overflow:hidden}.parent-register-hero>img{display:block;width:100%;height:auto;min-height:100%;object-fit:cover;object-position:top center}.parent-register-hero::before{content:"";position:absolute;z-index:4;top:0;left:0;width:82px;height:112px;background:linear-gradient(135deg,#07123f 0%,#07123f 38%,rgba(7,18,63,.86) 62%,rgba(7,18,63,0) 100%);pointer-events:none}.parent-register-back{position:absolute;top:14px;left:16px;display:grid;width:48px;height:48px;place-items:center;border:1px solid #ffffff24;border-radius:50%;background:#020a2a99}.parent-register-back img{width:28px}.parent-register-back:focus-visible{outline:3px solid #fff}
.parent-register-content{padding:14px 30px 25px;border-top:1px solid #3e81cc80;background:linear-gradient(#08123dfc,#071039)}.parent-register-heading{text-align:center}.parent-register-heading h1{margin:0;font-size:clamp(1.35rem,5vw,1.78rem);font-weight:900;line-height:1.15;letter-spacing:0}.parent-register-heading h1 span{color:#ffc928}.parent-register-heading p{margin:5px 0 12px;color:#d5d7e5}
.parent-register-benefits,.parent-register-form{border:1px solid #5a6fb361;border-radius:17px;background:#040b2e57}.parent-register-benefits{padding:15px 17px 10px}.parent-register-benefits h2,.parent-register-form h2{margin:0 0 10px;color:#d061ea;font-size:.9rem;letter-spacing:0}.parent-register-benefits ul{display:grid;margin:0;padding:0;gap:9px;list-style:none}.parent-register-benefits li{display:grid;grid-template-columns:45px 1fr;align-items:center;gap:10px}.parent-register-benefits li>b{display:grid;width:42px;height:42px;place-items:center;border-radius:50%;background:radial-gradient(circle at 35% 25%,#bc61ef,#55238a 74%);box-shadow:0 0 15px #b948f452}.parent-register-benefits strong,.parent-register-benefits small{display:block}.parent-register-benefits strong{font-size:.95rem}.parent-register-benefits small{margin-top:1px;color:#c4c7d7;font-size:.79rem;line-height:1.25}
.parent-register-form{margin-top:13px;padding:12px 13px 14px}.parent-register-form h2{text-align:center}.parent-register-field{position:relative;display:grid;min-height:48px;margin-top:8px;grid-template-columns:30px 1fr 40px;align-items:center;border:1px solid #455b9f6b;border-radius:11px;background:#010925b8}.parent-register-field>img,.parent-register-field>b{z-index:2;width:18px;height:18px;margin-left:11px;object-fit:contain}.parent-register-field>span{z-index:1;grid-column:2;color:#9098af;font-size:.84rem;pointer-events:none}.parent-register-field input{position:absolute;inset:0;width:100%;height:100%;padding:15px 42px 2px 40px;border:0;outline:0;color:#fff;background:transparent;font:inherit}.parent-register-field:focus-within{border-color:#b54be3;box-shadow:0 0 0 3px #b54be329}.parent-register-field button{position:relative;z-index:3;grid-column:3;width:40px;height:46px;border:0;color:#929bb2;background:transparent;cursor:pointer}
.parent-register-terms{display:flex;min-height:44px;margin:4px 1px 0;align-items:center;gap:9px;color:#aeb5ca;font-size:.74rem}.parent-register-terms input{width:20px;height:20px;accent-color:#a735dd}.parent-register-submit,.parent-register-google{display:grid;width:100%;min-height:51px;place-items:center;border-radius:10px;font:inherit;font-weight:900;text-decoration:none}.parent-register-submit{border:1px solid #cb58f4;color:#fff;background:linear-gradient(#ba45e7,#7122b2);box-shadow:0 9px 18px #9222c947;cursor:pointer}.parent-register-divider{display:flex;margin:12px 0;align-items:center;gap:12px;color:#abb1c2;font-size:.75rem}.parent-register-divider:before,.parent-register-divider:after{height:1px;flex:1;background:#818eb540;content:''}.parent-register-google{grid-template-columns:34px auto 34px;color:#17203d;background:#fff;font-size:.9rem}.parent-register-google b{color:#4285f4;font-size:1.25rem}.parent-register-login{margin:19px 0 0;color:#c5c9d7;font-size:.84rem;text-align:center}.parent-register-login a{margin-left:5px;color:#d45bea;font-weight:800;text-decoration:none}body.flow-parent-register-page .form-message{margin:10px 0;padding:10px 12px;border-radius:10px;font-size:.82rem}
@media(max-width:620px){.parent-register-screen{padding:0}.parent-register-card{border:0;border-radius:0;box-shadow:none}.parent-register-hero{height:60.3vw;min-height:230px;max-height:356px}.parent-register-content{padding:13px 18px 22px}}
@media(max-width:390px){.parent-register-content{padding-inline:13px}.parent-register-benefits{padding-inline:13px}.parent-register-benefits li{grid-template-columns:40px 1fr;gap:8px}.parent-register-benefits li>b{width:38px;height:38px}}

.parent-register-field:focus-within>span,.parent-register-field:has(input:not(:placeholder-shown))>span{opacity:0;visibility:hidden}
/* GLOBAL-BACK-BUTTON-016: canonical child-login back control. */
.arena-back-button{position:absolute!important;z-index:20!important;top:22px!important;left:24px!important;display:grid!important;width:52px!important;height:52px!important;padding:0!important;place-items:center!important;border:0!important;border-radius:50%!important;background:transparent!important;box-shadow:none!important;transition:background-color .16s ease,transform .16s ease!important;touch-action:manipulation}
.arena-back-button:hover{background:rgba(19,111,194,.24)!important}
.arena-back-button:active{transform:scale(.95)!important}
.arena-back-button:focus-visible{outline:3px solid #fff!important;outline-offset:3px!important}
.arena-back-button>img{display:block!important;width:42px!important;height:42px!important;object-fit:contain!important}

.robo-arena .ra-live-game-screen .ra-game-back.arena-back-button {
    position: static !important;
    z-index: 1 !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    place-items: center !important;
    background: #087fd4 !important;
    border: 1px solid rgba(255, 255, 255, .65) !important;
    border-radius: 50% !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .36) !important;
}

.robo-arena .ra-live-game-screen .ra-game-back.arena-back-button > img {
    width: 22px !important;
    height: 22px !important;
    object-fit: contain !important;
}
/* PARENT-REGISTER-INPUT-CENTER-017: keep typed values optically centered in the premium fields. */
.parent-register-field {
    align-items: center;
}

.parent-register-field input {
    height: 100%;
    min-height: 46px;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1;
    display: flex;
    align-items: center;
}

.parent-register-field input:-webkit-autofill,
.parent-register-field input:-webkit-autofill:hover,
.parent-register-field input:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff;
}
/* PARENT-REGISTER-GOOGLE-BUTTON-018: use real Google mark and match the submit button width. */
.parent-register-google {
    width: calc(100% - 28px);
    margin-left: 14px;
    margin-right: 14px;
    box-sizing: border-box;
    grid-template-columns: 34px minmax(0, auto) 34px;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.parent-register-google img,
.robo-arena .flow-google-mark {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.robo-arena .flow-google-mark {
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
}
/* PARENT-SIGNIN-USER-REFERENCE-020: premium parent sign-in screen from supplied reference. */
body.parent-signin-page {
    margin: 0;
    min-height: 100dvh;
    background: #02081f;
}

.parent-signin-screen {
    min-height: 100dvh;
    display: flex;
    justify-content: center;
    color: #ffffff;
    background:
        radial-gradient(circle at 50% 14%, rgba(29, 133, 255, .34), transparent 35%),
        linear-gradient(180deg, #03123b 0%, #02071d 56%, #03153c 100%);
    font-family: inherit;
}

.parent-signin-card {
    position: relative;
    width: min(100%, 430px);
    min-height: 100dvh;
    overflow: hidden;
    background: #030b2a;
    box-shadow: 0 20px 70px rgba(0, 0, 0, .45);
}

.parent-signin-hero {
    position: relative;
    height: clamp(320px, 68vw, 500px);
    overflow: hidden;
    background: #041341;
}

.parent-signin-hero::after {
    position: absolute;
    inset: auto 0 0;
    height: 120px;
    background: linear-gradient(180deg, transparent 0%, rgba(3, 8, 31, .45) 34%, #030b2a 100%);
    content: "";
}

.parent-signin-hero > img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: top center;
}

.parent-signin-content {
    position: relative;
    z-index: 1;
    margin-top: -56px;
    padding: 0 18px 24px;
}

.parent-signin-heading {
    text-align: center;
    text-shadow: 0 4px 14px rgba(0, 0, 0, .36);
}

.parent-signin-heading h1 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(1.45rem, 7.3vw, 2.12rem);
    line-height: 1.08;
    letter-spacing: 0;
    font-weight: 950;
}

.parent-signin-heading h1 span {
    color: #ffc935;
}

.parent-signin-heading p {
    margin: 7px 0 14px;
    color: #cdd5e7;
    font-size: clamp(.98rem, 4.2vw, 1.22rem);
    line-height: 1.3;
}

.parent-signin-panel,
.parent-signin-benefits {
    border: 1px solid rgba(148, 108, 255, .62);
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(24, 23, 72, .86), rgba(5, 11, 39, .92));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 16px 35px rgba(0, 0, 0, .28);
}

.parent-signin-panel {
    padding: 18px 15px 14px;
}

.parent-signin-panel h2,
.parent-signin-benefits h2 {
    margin: 0 0 15px;
    color: #b64cff;
    font-size: 1.16rem;
    line-height: 1.1;
    text-align: center;
    font-weight: 950;
    letter-spacing: 0;
}

.parent-signin-field {
    position: relative;
    display: grid;
    min-height: 58px;
    margin-top: 10px;
    grid-template-columns: 45px 1fr 44px;
    align-items: center;
    border: 1px solid rgba(116, 141, 209, .43);
    border-radius: 13px;
    background: rgba(1, 8, 33, .76);
    overflow: hidden;
}

.parent-signin-field > img {
    position: relative;
    z-index: 2;
    width: 23px;
    height: 23px;
    margin-left: 18px;
    object-fit: contain;
}

.parent-signin-field > span {
    position: relative;
    z-index: 1;
    grid-column: 2;
    color: #b4bbcb;
    font-size: 1.03rem;
    pointer-events: none;
    transition: opacity .12s ease, visibility .12s ease;
}

.parent-signin-field input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0 48px 0 58px;
    border: 0;
    outline: 0;
    color: #ffffff;
    background: transparent;
    font: inherit;
    font-size: 1.03rem;
    line-height: 1;
}

.parent-signin-field:focus-within {
    border-color: #b650ff;
    box-shadow: 0 0 0 3px rgba(182, 80, 255, .2);
}

.parent-signin-field:focus-within > span,
.parent-signin-field:has(input:not(:placeholder-shown)) > span {
    opacity: 0;
    visibility: hidden;
}

.parent-signin-field button {
    position: relative;
    z-index: 3;
    grid-column: 3;
    width: 44px;
    height: 56px;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.parent-signin-field button img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.parent-signin-row {
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #c4c8d8;
    font-size: .93rem;
}

.parent-signin-row a,
.parent-signin-register a {
    color: #b654ff;
    font-weight: 800;
    text-decoration: none;
}

.parent-signin-remember {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.parent-signin-remember input {
    width: 22px;
    height: 22px;
    margin: 0;
    accent-color: #a234f2;
}

.parent-signin-submit,
.parent-signin-google {
    display: grid;
    width: 100%;
    min-height: 51px;
    box-sizing: border-box;
    place-items: center;
    border-radius: 13px;
    font: inherit;
    font-weight: 950;
    text-decoration: none;
}

.parent-signin-submit {
    border: 1px solid #c557ff;
    color: #ffffff;
    background: linear-gradient(180deg, #c451f4 0%, #842bd3 100%);
    box-shadow: 0 10px 18px rgba(130, 43, 211, .38);
    cursor: pointer;
}

.parent-signin-divider {
    display: flex;
    margin: 15px 0 14px;
    align-items: center;
    gap: 13px;
    color: #c5cada;
    font-weight: 700;
}

.parent-signin-divider::before,
.parent-signin-divider::after {
    height: 1px;
    flex: 1;
    background: rgba(161, 176, 221, .42);
    content: "";
}

.parent-signin-google {
    grid-template-columns: 34px minmax(0, auto) 34px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    color: #17203d;
    background: #ffffff;
    font-size: .97rem;
}

.parent-signin-google img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.parent-signin-security {
    display: grid;
    min-height: 72px;
    margin-top: 13px;
    padding: 10px 11px;
    grid-template-columns: 42px 1fr 32px;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(111, 135, 203, .52);
    border-radius: 13px;
    background: rgba(9, 17, 56, .68);
}

.parent-signin-security img:first-child {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    filter: drop-shadow(0 0 8px rgba(177, 69, 255, .35));
}

.parent-signin-security img:last-child {
    width: 25px;
    height: 25px;
    opacity: .88;
}

.parent-signin-security p {
    margin: 0;
    color: #c1c7d8;
    font-size: .86rem;
    line-height: 1.32;
}

.parent-signin-benefits {
    margin-top: 14px;
    padding: 17px 18px 13px;
}

.parent-signin-benefits h2 {
    text-align: left;
    margin-bottom: 13px;
}

.parent-signin-benefits ul {
    display: grid;
    margin: 0;
    padding: 0;
    gap: 0;
    list-style: none;
}

.parent-signin-benefits li {
    display: grid;
    min-height: 60px;
    grid-template-columns: 52px 1fr;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(144, 160, 211, .18);
}

.parent-signin-benefits li:last-child {
    border-bottom: 0;
}

.parent-signin-benefits li > img {
    width: 44px;
    height: 44px;
    padding: 10px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 25%, #b85aff, #4f1d91 76%);
    box-shadow: 0 0 16px rgba(176, 70, 255, .42);
    object-fit: contain;
}

.parent-signin-benefits strong,
.parent-signin-benefits small {
    display: block;
}

.parent-signin-benefits strong {
    color: #ffffff;
    font-size: 1rem;
    line-height: 1.1;
}

.parent-signin-benefits small {
    margin-top: 3px;
    color: #c4cad8;
    font-size: .86rem;
    line-height: 1.22;
}

.parent-signin-register {
    margin: 20px 0 0;
    color: #c5cada;
    font-size: 1rem;
    text-align: center;
}

body.parent-signin-page .form-message {
    margin: 10px 0;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: .85rem;
}

@media (max-width: 620px) {
    .parent-signin-card {
        width: 100%;
        box-shadow: none;
    }

    .parent-signin-content {
        padding-inline: 17px;
    }
}

@media (max-width: 380px) {
    .parent-signin-content {
        padding-inline: 13px;
    }

    .parent-signin-panel,
    .parent-signin-benefits {
        border-radius: 17px;
    }

    .parent-signin-row {
        font-size: .83rem;
    }
}
/* PARENT-SIGNIN-HERO-CROP-BACK-021: cropped hero and rounded colored back control. */
.parent-signin-hero {
    height: clamp(272px, 70vw, 360px);
}

.parent-signin-hero > img {
    object-fit: cover;
    object-position: top center;
}

.parent-signin-content {
    margin-top: -8px;
}

body.parent-signin-page .arena-back-button {
    top: 18px !important;
    left: 18px !important;
    width: 52px !important;
    height: 52px !important;
    border: 1px solid rgba(159, 203, 255, .36) !important;
    border-radius: 50% !important;
    background: rgba(3, 11, 39, .66) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .12) !important;
    backdrop-filter: blur(8px);
}

body.parent-signin-page .arena-back-button:hover {
    background: rgba(16, 79, 156, .78) !important;
}

body.parent-signin-page .arena-back-button > img {
    width: 34px !important;
    height: 34px !important;
}
/* PARENT-SIGNIN-HERO-CLEAN-CROP-022: remove baked-in title remnants from the hero image. */
.parent-signin-hero {
    height: clamp(260px, 66vw, 342px);
}

.parent-signin-content {
    margin-top: 0;
}
/* PARENT-SIGNIN-HERO-HAND-CROP-023: keep Robo Mentor pointing hand visible without showing baked title text. */
.parent-signin-hero {
    height: clamp(282px, 72vw, 368px);
}

.parent-signin-hero::after {
    height: 78px;
}
/* PARENT-SIGNIN-HERO-HIDE-BAKED-TEXT-024: keep the robot hand while hiding baked reference text at hero bottom. */
.parent-signin-hero {
    height: clamp(276px, 70vw, 360px);
}

.parent-signin-hero::after {
    z-index: 2;
    height: 84px;
    background: linear-gradient(180deg, rgba(3, 11, 42, 0) 0%, rgba(3, 11, 42, .96) 30%, #030b2a 62%, #030b2a 100%);
}

.parent-signin-hero > img {
    position: relative;
    z-index: 1;
}

.parent-signin-back {
    z-index: 4 !important;
}
/* PARENT-SIGNIN-MOBILE-FIT-HERO-025: cleaner hero, no baked text, no mobile clipping. */
body.parent-signin-page,
.parent-signin-screen,
.parent-signin-card {
    overflow-x: hidden;
}

.parent-signin-card,
.parent-signin-content,
.parent-signin-panel,
.parent-signin-benefits,
.parent-signin-field,
.parent-signin-submit,
.parent-signin-google {
    box-sizing: border-box;
}

.parent-signin-card {
    width: 100%;
    max-width: 430px;
}

.parent-signin-hero {
    height: clamp(284px, 73vw, 370px);
}

.parent-signin-hero::after {
    z-index: 2;
    height: 34px;
    background: linear-gradient(180deg, rgba(3, 11, 42, 0) 0%, #030b2a 100%);
}

.parent-signin-hero > img {
    object-position: top center;
}

.parent-signin-content {
    width: 100%;
    margin-top: 0;
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
}

.parent-signin-heading {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.parent-signin-heading h1 {
    max-width: 100%;
    font-size: clamp(1.52rem, 7.2vw, 2rem);
    overflow-wrap: anywhere;
}

.parent-signin-heading p {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 0 2px;
    font-size: clamp(.96rem, 4vw, 1.12rem);
    overflow-wrap: anywhere;
}

.parent-signin-panel,
.parent-signin-benefits {
    width: 100%;
    max-width: 100%;
}

.parent-signin-row {
    min-width: 0;
    flex-wrap: wrap;
    row-gap: 6px;
}

.parent-signin-row a {
    max-width: 100%;
    white-space: normal;
    text-align: right;
}

.parent-signin-remember span {
    color: #d2d8e8;
}

@media (max-width: 380px) {
    .parent-signin-content {
        padding-left: 14px;
        padding-right: 14px;
    }

    .parent-signin-panel {
        padding-left: 13px;
        padding-right: 13px;
    }

    .parent-signin-heading h1 {
        font-size: 1.55rem;
    }

    .parent-signin-field input {
        padding-left: 54px;
        padding-right: 44px;
    }

    .parent-signin-row {
        font-size: .84rem;
    }
}
/* PARENT-FORGOT-PASSWORD-HANDOFF-001: premium parent forgot-password screen from designer handoff. */
body.parent-forgot-page {
    min-height: 100dvh;
    margin: 0;
    background: #02081f;
}

.parent-forgot-screen {
    min-height: 100dvh;
    display: flex;
    justify-content: center;
    color: #ffffff;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 50% 11%, rgba(34, 149, 255, .32), transparent 34%),
        linear-gradient(180deg, #05133c 0%, #02071e 62%, #04103a 100%);
}

.parent-forgot-shell {
    position: relative;
    width: min(100%, 430px);
    min-height: 100dvh;
    overflow-x: hidden;
    background: #030b2a;
    box-shadow: 0 20px 70px rgba(0, 0, 0, .45);
}

.parent-forgot-hero {
    position: relative;
    min-height: clamp(230px, 58vw, 330px);
    overflow: hidden;
    isolation: isolate;
}

.parent-forgot-hero::after {
    position: absolute;
    z-index: 3;
    inset: auto 0 0;
    height: 82px;
    background: linear-gradient(180deg, rgba(3, 11, 42, 0) 0%, rgba(3, 11, 42, .88) 48%, #030b2a 100%);
    content: "";
}

.parent-forgot-hero-bg {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: .88;
    filter: saturate(1.12) brightness(.76);
}

.parent-forgot-logo {
    position: absolute;
    z-index: 2;
    top: 14px;
    left: 50%;
    width: min(68%, 285px);
    max-height: 112px;
    object-fit: contain;
    transform: translateX(-50%);
    filter: drop-shadow(0 0 18px rgba(0, 155, 255, .46));
}

.parent-forgot-robot {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: 8px;
    width: min(44%, 178px);
    max-height: 190px;
    object-fit: contain;
    transform: translateX(-50%);
    filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .42));
}

body.parent-forgot-page .arena-back-button {
    top: 18px !important;
    left: 18px !important;
    width: 52px !important;
    height: 52px !important;
    border: 1px solid rgba(159, 203, 255, .36) !important;
    border-radius: 50% !important;
    background: rgba(3, 11, 39, .66) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .12) !important;
    backdrop-filter: blur(8px);
}

body.parent-forgot-page .arena-back-button > img {
    width: 34px !important;
    height: 34px !important;
}

.parent-forgot-column {
    position: relative;
    z-index: 4;
    display: grid;
    width: 100%;
    gap: 14px;
    padding: 0 16px 24px;
    box-sizing: border-box;
}

.parent-forgot-card,
.parent-forgot-info {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(148, 108, 255, .62);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(24, 23, 72, .88), rgba(5, 11, 39, .95));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 16px 35px rgba(0, 0, 0, .28);
}

.parent-forgot-card {
    padding: 20px 17px 17px;
}

.parent-forgot-badge {
    display: grid;
    width: 58px;
    height: 58px;
    margin: 0 auto 12px;
    place-items: center;
    border: 1px solid rgba(190, 93, 255, .68);
    border-radius: 18px;
    background: radial-gradient(circle at 35% 25%, rgba(188, 90, 255, .76), rgba(69, 25, 133, .92) 76%);
    box-shadow: 0 0 18px rgba(176, 70, 255, .38);
}

.parent-forgot-badge img {
    width: 29px;
    height: 29px;
    object-fit: contain;
}

.parent-forgot-badge--success {
    background: radial-gradient(circle at 35% 25%, rgba(34, 211, 238, .84), rgba(22, 130, 255, .82) 76%);
}

.parent-forgot-heading,
.parent-forgot-result {
    text-align: center;
}

.parent-forgot-heading h1,
.parent-forgot-result h1 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(1.62rem, 7.5vw, 2.18rem);
    line-height: 1.08;
    letter-spacing: 0;
    font-weight: 950;
    text-shadow: 0 3px 12px rgba(0, 0, 0, .32);
}

.parent-forgot-heading p,
.parent-forgot-result p {
    margin: 10px auto 0;
    max-width: 34rem;
    color: #cdd5e7;
    font-size: clamp(.96rem, 4vw, 1.1rem);
    line-height: 1.42;
}

.parent-forgot-alert,
.parent-forgot-error {
    color: #ffd5dc;
}

.parent-forgot-alert {
    margin-top: 14px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 89, 103, .42);
    border-radius: 13px;
    background: rgba(114, 16, 43, .32);
    font-size: .9rem;
}

.parent-forgot-form {
    display: grid;
    gap: 9px;
    margin-top: 18px;
}

.parent-forgot-field {
    display: grid;
    gap: 8px;
    color: #f8faff;
    font-weight: 900;
}

.parent-forgot-field > span {
    padding-left: 4px;
    color: #ffffff;
    font-size: .96rem;
}

.parent-forgot-input-shell {
    display: grid;
    min-height: 58px;
    grid-template-columns: 46px 1fr;
    align-items: center;
    border: 1px solid rgba(116, 141, 209, .54);
    border-radius: 14px;
    background: rgba(1, 8, 33, .78);
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.parent-forgot-input-shell:focus-within {
    border-color: #22d3ee;
    box-shadow: 0 0 0 3px rgba(34, 211, 238, .18);
    background: rgba(3, 15, 48, .92);
}

.parent-forgot-input-shell img {
    width: 22px;
    height: 22px;
    margin-left: 15px;
    object-fit: contain;
}

.parent-forgot-input-shell input {
    width: 100%;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    color: #ffffff;
    background: transparent;
    font: inherit;
    font-size: 1rem;
}

.parent-forgot-input-shell input::placeholder {
    color: #8f9bb5;
}

.parent-forgot-help,
.parent-forgot-error {
    margin: 0 4px;
    font-size: .85rem;
    line-height: 1.35;
}

.parent-forgot-help {
    color: #aeb7ca;
}

.parent-forgot-submit {
    display: inline-flex;
    width: 100%;
    min-height: 56px;
    margin-top: 8px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid #c557ff;
    border-radius: 14px;
    color: #ffffff;
    background: linear-gradient(180deg, #c451f4 0%, #842bd3 100%);
    box-shadow: 0 10px 18px rgba(130, 43, 211, .38);
    font: inherit;
    font-weight: 950;
    text-decoration: none;
    cursor: pointer;
}

.parent-forgot-submit:disabled {
    cursor: wait;
    opacity: .74;
}

.parent-forgot-submit--link {
    margin-top: 18px;
}

.parent-forgot-form.is-submitting .button__spinner {
    display: inline-block;
    width: 17px;
    height: 17px;
    border: 2px solid rgba(255, 255, 255, .42);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: parentForgotSpin .7s linear infinite;
}

.parent-forgot-login-link {
    display: inline-flex;
    min-height: 44px;
    margin: 10px auto 0;
    align-items: center;
    justify-content: center;
    color: #b654ff;
    font-weight: 900;
    text-decoration: none;
}

.parent-forgot-info {
    display: grid;
    min-height: 76px;
    padding: 12px 13px;
    grid-template-columns: 44px 1fr;
    align-items: center;
    gap: 11px;
}

.parent-forgot-info img {
    width: 38px;
    height: 38px;
    padding: 8px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 25%, #b85aff, #4f1d91 76%);
    box-shadow: 0 0 16px rgba(176, 70, 255, .34);
    object-fit: contain;
}

.parent-forgot-info h2 {
    margin: 0;
    color: #ffffff;
    font-size: .98rem;
    line-height: 1.15;
}

.parent-forgot-info p {
    margin: 4px 0 0;
    color: #c4cad8;
    font-size: .84rem;
    line-height: 1.32;
}

@keyframes parentForgotSpin {
    to { transform: rotate(360deg); }
}

@media (min-width: 760px) {
    .parent-forgot-shell {
        display: grid;
        max-width: 1040px;
        width: min(100%, 1040px);
        min-height: min(100dvh, 900px);
        margin: 0 auto;
        grid-template-columns: minmax(320px, 1fr) minmax(360px, 460px);
        align-items: center;
        background: transparent;
        box-shadow: none;
    }

    .parent-forgot-hero {
        min-height: 620px;
        border-radius: 28px;
    }

    .parent-forgot-logo {
        top: 40px;
        width: min(78%, 390px);
        max-height: 180px;
    }

    .parent-forgot-robot {
        bottom: 70px;
        width: min(58%, 300px);
        max-height: 320px;
    }

    .parent-forgot-column {
        padding: 28px 22px;
    }
}

@media (max-width: 380px) {
    .parent-forgot-column {
        padding-left: 14px;
        padding-right: 14px;
    }

    .parent-forgot-card {
        padding-left: 14px;
        padding-right: 14px;
        border-radius: 19px;
    }

    .parent-forgot-heading h1,
    .parent-forgot-result h1 {
        font-size: 1.55rem;
    }
}

/* PARENT-VERIFY-EMAIL-HANDOFF-002: premium parent email verification flow. */
body.parent-verify-page {
    margin: 0;
    min-height: 100dvh;
    background: #02081f;
}

.parent-verify-screen {
    min-height: 100dvh;
    display: flex;
    justify-content: center;
    color: #ffffff;
    background:
        radial-gradient(circle at 50% 12%, rgba(41, 132, 255, .34), transparent 35%),
        linear-gradient(180deg, #03123b 0%, #02071d 56%, #03153c 100%);
}

.parent-verify-shell {
    position: relative;
    width: min(100%, 430px);
    min-height: 100dvh;
    overflow: hidden;
    background: #030b2a;
    box-shadow: 0 20px 70px rgba(0, 0, 0, .45);
}

.parent-verify-hero {
    position: relative;
    min-height: clamp(232px, 58vw, 330px);
    overflow: hidden;
    isolation: isolate;
}

.parent-verify-hero::after {
    position: absolute;
    z-index: 3;
    inset: auto 0 0;
    height: 86px;
    background: linear-gradient(180deg, rgba(3, 11, 42, 0) 0%, rgba(3, 11, 42, .9) 52%, #030b2a 100%);
    content: "";
}

.parent-verify-hero-bg {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: .9;
    filter: saturate(1.15) brightness(.74);
}

.parent-verify-logo {
    position: absolute;
    z-index: 2;
    top: 14px;
    left: 50%;
    width: min(70%, 292px);
    max-height: 118px;
    object-fit: contain;
    transform: translateX(-50%);
    filter: drop-shadow(0 0 18px rgba(0, 155, 255, .5));
}

.parent-verify-robot {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: 6px;
    width: min(46%, 186px);
    max-height: 198px;
    object-fit: contain;
    transform: translateX(-50%);
    filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .42));
}

body.parent-verify-page .arena-back-button {
    top: 18px !important;
    left: 18px !important;
    width: 52px !important;
    height: 52px !important;
    border: 1px solid rgba(159, 203, 255, .36) !important;
    border-radius: 50% !important;
    background: rgba(3, 11, 39, .66) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .12) !important;
    backdrop-filter: blur(8px);
}

body.parent-verify-page .arena-back-button > img {
    width: 34px !important;
    height: 34px !important;
}

.parent-verify-column {
    position: relative;
    z-index: 4;
    display: grid;
    width: 100%;
    gap: 14px;
    padding: 0 16px 24px;
    box-sizing: border-box;
}

.parent-verify-card,
.parent-verify-security {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(148, 108, 255, .62);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(24, 23, 72, .88), rgba(5, 11, 39, .95));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 16px 35px rgba(0, 0, 0, .28);
}

.parent-verify-card {
    padding: 20px 17px 17px;
    text-align: center;
}

.parent-verify-card--success {
    border-color: rgba(45, 242, 195, .68);
}

.parent-verify-card--warning {
    border-color: rgba(255, 205, 62, .72);
}

.parent-verify-card--error {
    border-color: rgba(255, 95, 119, .64);
}

.parent-verify-badge {
    display: grid;
    width: 62px;
    height: 62px;
    margin: 0 auto 11px;
    place-items: center;
    border: 1px solid rgba(190, 93, 255, .68);
    border-radius: 19px;
    background: radial-gradient(circle at 35% 25%, rgba(188, 90, 255, .76), rgba(69, 25, 133, .92) 76%);
    box-shadow: 0 0 18px rgba(176, 70, 255, .38);
}

.parent-verify-badge--success {
    border-color: rgba(45, 242, 195, .74);
    background: radial-gradient(circle at 35% 25%, #31f2c5, #0f72d8 74%);
    box-shadow: 0 0 18px rgba(45, 242, 195, .42);
}

.parent-verify-badge--warning {
    border-color: rgba(255, 213, 73, .78);
    background: radial-gradient(circle at 35% 25%, #ffd54f, #d68600 74%);
}

.parent-verify-badge--error {
    border-color: rgba(255, 94, 118, .74);
    background: radial-gradient(circle at 35% 25%, #ff6b81, #8d1234 74%);
}

.parent-verify-badge img {
    width: 31px;
    height: 31px;
    object-fit: contain;
}

.parent-verify-status {
    margin: 0 0 8px;
    color: #b84cff;
    font-size: .86rem;
    font-weight: 950;
    letter-spacing: .04em;
}

.parent-verify-card--success .parent-verify-status {
    color: #31f2c5;
}

.parent-verify-card--warning .parent-verify-status {
    color: #ffd54f;
}

.parent-verify-card--error .parent-verify-status {
    color: #ff8ea0;
}

.parent-verify-card h1 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(1.62rem, 7.5vw, 2.18rem);
    line-height: 1.08;
    letter-spacing: 0;
    font-weight: 950;
    text-shadow: 0 3px 12px rgba(0, 0, 0, .32);
}

.parent-verify-card p {
    margin: 10px auto 0;
    max-width: 35rem;
    color: #cdd5e7;
    font-size: clamp(.96rem, 4vw, 1.1rem);
    line-height: 1.42;
}

.parent-verify-email {
    display: inline-flex;
    min-height: 48px;
    margin-top: 16px;
    padding: 0 15px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid rgba(116, 141, 209, .54);
    border-radius: 15px;
    color: #ffffff;
    background: rgba(1, 8, 33, .78);
}

.parent-verify-email img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.parent-verify-email strong {
    color: #ffffff;
    font-size: 1.04rem;
    overflow-wrap: anywhere;
}

.parent-verify-hint,
.parent-verify-cooldown {
    color: #aeb7ca !important;
    font-size: .88rem !important;
}

.parent-verify-note {
    padding: 10px 12px;
    border-radius: 13px;
    font-size: .9rem !important;
}

.parent-verify-note--success {
    border: 1px solid rgba(45, 242, 195, .38);
    color: #dffff8 !important;
    background: rgba(15, 139, 116, .28);
}

.parent-verify-note--error {
    border: 1px solid rgba(255, 89, 103, .42);
    color: #ffd5dc !important;
    background: rgba(114, 16, 43, .32);
}

.parent-verify-submit {
    display: inline-flex;
    width: 100%;
    min-height: 56px;
    margin-top: 16px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid #c557ff;
    border-radius: 14px;
    color: #ffffff;
    background: linear-gradient(180deg, #c451f4 0%, #842bd3 100%);
    box-shadow: 0 10px 24px rgba(98, 37, 180, .38), inset 0 1px 0 rgba(255, 255, 255, .22);
    cursor: pointer;
    font: inherit;
    font-size: 1rem;
    font-weight: 950;
    letter-spacing: 0;
    text-decoration: none;
}

.parent-verify-submit--success {
    border-color: #31f2c5;
    background: linear-gradient(180deg, #24d7bc 0%, #078acb 100%);
}

.parent-verify-submit[aria-disabled="true"] {
    cursor: wait;
    opacity: .78;
}

.parent-verify-form.is-submitting .button__spinner {
    display: inline-block;
    width: 17px;
    height: 17px;
    border: 2px solid rgba(255, 255, 255, .42);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: parentVerifySpin .7s linear infinite;
}

.parent-verify-resend {
    text-align: left;
}

.parent-verify-resend h2 {
    margin: 0;
    color: #ffffff;
    font-size: 1.1rem;
    line-height: 1.16;
    font-weight: 950;
}

.parent-verify-resend p {
    margin: 8px 0 0;
    color: #c4cad8;
    font-size: .93rem;
    line-height: 1.36;
}

.parent-verify-security {
    display: grid;
    min-height: 76px;
    padding: 12px 13px;
    grid-template-columns: 44px 1fr;
    align-items: center;
    gap: 11px;
}

.parent-verify-security img {
    width: 38px;
    height: 38px;
    padding: 8px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 25%, #31f2c5, #0f72d8 76%);
    box-shadow: 0 0 16px rgba(45, 242, 195, .34);
    object-fit: contain;
}

.parent-verify-security p {
    margin: 0;
    color: #c4cad8;
    font-size: .84rem;
    line-height: 1.32;
}

.parent-verify-security strong {
    color: #ffffff;
}

@keyframes parentVerifySpin {
    to { transform: rotate(360deg); }
}

@media (min-width: 760px) {
    .parent-verify-shell {
        display: grid;
        width: min(100%, 1040px);
        max-width: 1040px;
        min-height: min(100dvh, 900px);
        margin: 0 auto;
        grid-template-columns: minmax(320px, 1fr) minmax(360px, 460px);
        align-items: center;
        background: transparent;
        box-shadow: none;
    }

    .parent-verify-hero {
        min-height: 620px;
        border-radius: 28px;
    }

    .parent-verify-logo {
        top: 40px;
        width: min(78%, 390px);
        max-height: 180px;
    }

    .parent-verify-robot {
        bottom: 70px;
        width: min(58%, 300px);
        max-height: 320px;
    }

    .parent-verify-column {
        padding: 28px 22px;
    }
}

@media (max-width: 380px) {
    .parent-verify-column {
        padding-left: 14px;
        padding-right: 14px;
    }

    .parent-verify-card {
        padding-left: 14px;
        padding-right: 14px;
        border-radius: 19px;
    }

    .parent-verify-card h1 {
        font-size: 1.55rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .parent-verify-form.is-submitting .button__spinner {
        animation: none;
    }
}
/* PARENT-ADD-CHILD-V2-004 */
body.parent-premium-page .parent-add-child-card {
    width: min(100%, 720px);
    margin-inline: auto;
    padding: clamp(18px, 4vw, 30px);
    border: 1px solid rgba(88, 196, 255, .34);
    border-radius: 24px;
    color: #fff;
    background:
        radial-gradient(circle at 50% 0%, rgba(34, 211, 238, .22), transparent 34%),
        linear-gradient(180deg, rgba(14, 26, 78, .96), rgba(6, 13, 45, .98));
    box-shadow: 0 18px 42px rgba(2, 20, 58, .34), inset 0 1px 0 rgba(255,255,255,.16);
}

body.parent-premium-page .parent-add-child-card .eyebrow,
body.parent-premium-page .parent-add-child-card h2,
body.parent-premium-page .parent-add-child-card p,
body.parent-premium-page .parent-add-child-card label,
body.parent-premium-page .parent-add-child-card legend {
    color: inherit;
}

body.parent-premium-page .parent-add-child-card .setup-mentor {
    width: min(42vw, 150px);
    max-height: 150px;
    margin: -6px auto 8px;
    object-fit: contain;
    filter: drop-shadow(0 16px 24px rgba(0,0,0,.28));
}

body.parent-premium-page .parent-add-child-card h2 {
    margin: 0;
    font-size: clamp(1.8rem, 8vw, 2.7rem);
    line-height: .98;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0 3px 0 rgba(3, 33, 96, .8);
}

body.parent-premium-page .parent-add-child-card > p:not(.eyebrow) {
    max-width: 520px;
    margin: 8px auto 18px;
    color: rgba(255,255,255,.84);
    text-align: center;
}

body.parent-premium-page .parent-add-child-form {
    gap: 16px;
}

body.parent-premium-page .parent-add-field,
body.parent-premium-page .parent-add-choice,
body.parent-premium-page .parent-range-field,
body.parent-premium-page .parent-add-info,
body.parent-premium-page .parent-add-validation {
    padding: 14px;
    border: 1px solid rgba(99, 177, 255, .26);
    border-radius: 18px;
    background: rgba(3, 12, 43, .62);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

body.parent-premium-page .parent-add-field label,
body.parent-premium-page .parent-add-choice legend,
body.parent-premium-page .parent-range-heading label {
    display: block;
    margin-bottom: 9px;
    color: #67e8f9;
    font-size: .82rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

body.parent-premium-page .parent-add-input-shell {
    display: grid;
    min-height: 56px;
    grid-template-columns: 30px 1fr;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border: 1px solid rgba(126, 199, 255, .38);
    border-radius: 14px;
    background: rgba(3, 9, 35, .74);
}

body.parent-premium-page .parent-add-input-shell img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

body.parent-premium-page .parent-add-input-shell input {
    width: 100%;
    min-width: 0;
    border: 0;
    color: #fff;
    background: transparent;
    font: inherit;
    font-weight: 800;
    outline: 0;
}

body.parent-premium-page .parent-add-input-shell input::placeholder,
body.parent-premium-page .parent-photo-upload input::file-selector-button {
    color: rgba(255,255,255,.62);
}

body.parent-premium-page .parent-add-help,
body.parent-premium-page .next-step-hint {
    margin: 8px 0 0;
    color: rgba(255,255,255,.72);
    font-size: .86rem;
}

body.parent-premium-page .parent-add-error {
    margin: 8px 0 0;
    color: #fecaca;
    font-weight: 800;
}

body.parent-premium-page .parent-add-validation {
    border-color: rgba(248, 113, 113, .7);
    background: rgba(127, 29, 29, .48);
}

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

body.parent-premium-page .parent-choice-chip,
body.parent-premium-page .parent-avatar-option {
    position: relative;
    display: grid;
    min-width: 0;
    cursor: pointer;
}

body.parent-premium-page .parent-choice-chip input,
body.parent-premium-page .parent-avatar-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

body.parent-premium-page .parent-choice-chip span {
    display: grid;
    min-height: 48px;
    place-items: center;
    border: 1px solid rgba(126, 199, 255, .34);
    border-radius: 14px;
    color: #fff;
    background: rgba(4, 16, 52, .78);
    font-size: 1.25rem;
    font-weight: 1000;
}

body.parent-premium-page .parent-choice-chip input:checked + span {
    border-color: #34d399;
    background: linear-gradient(135deg, #14b8a6, #0ea5e9);
    box-shadow: 0 10px 22px rgba(14, 165, 233, .28);
}

body.parent-premium-page .parent-avatar-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

body.parent-premium-page .parent-avatar-option {
    gap: 7px;
    justify-items: center;
    padding: 10px 8px;
    border: 1px solid rgba(126, 199, 255, .32);
    border-radius: 16px;
    color: rgba(255,255,255,.84);
    background: rgba(4, 16, 52, .76);
    font-size: .76rem;
    font-weight: 900;
    text-align: center;
}

body.parent-premium-page .parent-avatar-option:has(input:checked) {
    border-color: #34d399;
    color: #fff;
    background: linear-gradient(180deg, rgba(20,184,166,.34), rgba(14,165,233,.22));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 10px 22px rgba(14,165,233,.22);
}

body.parent-premium-page .parent-avatar-visual {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
}

body.parent-premium-page .parent-avatar-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.parent-premium-page .parent-avatar-option--photo .parent-avatar-visual strong {
    color: #67e8f9;
    font-size: 2rem;
    line-height: 1;
}

body.parent-premium-page .parent-photo-upload {
    display: grid;
    gap: 10px;
    margin-top: 12px;
    padding: 12px;
    border: 1px dashed rgba(103, 232, 249, .5);
    border-radius: 14px;
    background: rgba(6, 20, 58, .72);
}

body.parent-premium-page .parent-photo-upload[hidden] {
    display: none;
}

body.parent-premium-page .parent-photo-upload input {
    width: 100%;
    color: #fff;
}

body.parent-premium-page .parent-photo-upload .btn {
    justify-self: start;
    min-height: 42px;
    padding: 8px 14px;
}

body.parent-premium-page .parent-range-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

body.parent-premium-page .parent-range-heading output {
    display: inline-flex;
    min-width: 74px;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #04143d;
    background: linear-gradient(180deg, #fde68a, #fbbf24);
    font-weight: 1000;
    box-shadow: 0 8px 18px rgba(251, 191, 36, .28);
}

body.parent-premium-page .parent-range-field input[type="range"] {
    width: 100%;
    accent-color: #14b8a6;
}

body.parent-premium-page .mastery-scale {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 7px;
    color: rgba(255,255,255,.65);
    font-size: .72rem;
    font-weight: 800;
    text-align: center;
}

body.parent-premium-page .parent-add-info {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 12px;
    align-items: start;
}

body.parent-premium-page .parent-add-info > span {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 50%;
    color: #05295d;
    background: #67e8f9;
    font-weight: 1000;
}

body.parent-premium-page .parent-add-info h3 {
    margin: 0 0 4px;
    color: #fff;
    font-size: 1rem;
}

body.parent-premium-page .parent-add-info p {
    margin: 0;
    color: rgba(255,255,255,.76);
}

body.parent-premium-page .parent-add-submit {
    position: relative;
    width: 100%;
    min-height: 58px;
}

body.parent-premium-page .button__spinner {
    display: none;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255,255,255,.38);
    border-top-color: #fff;
    border-radius: 50%;
    animation: parentAddSpin .8s linear infinite;
}

body.parent-premium-page .is-submitting .button__spinner {
    display: inline-block;
}

body.parent-premium-page .is-submitting .parent-add-submit {
    opacity: .86;
}

body.parent-premium-page .parent-bottom-nav a.is-active {
    color: #fff;
    background: linear-gradient(180deg, #0ea5e9, #087fdf);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 8px 18px rgba(14,165,233,.22);
}

body.parent-premium-page .parent-bottom-nav a.is-active img {
    filter: brightness(0) invert(1);
}

@keyframes parentAddSpin {
    to { transform: rotate(360deg); }
}

@media (max-width: 420px) {
    body.parent-premium-page .parent-add-child-card {
        padding: 16px 14px;
        border-radius: 20px;
    }

    body.parent-premium-page .parent-avatar-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.parent-premium-page .parent-add-field,
    body.parent-premium-page .parent-add-choice,
    body.parent-premium-page .parent-range-field,
    body.parent-premium-page .parent-add-info,
    body.parent-premium-page .parent-add-validation {
        padding: 12px;
    }
}

/* PARENT-CHILD-ID-V2-005 */
body.parent-premium-page .parent-child-id-card {
    position: relative;
    width: min(100%, 760px);
    margin-inline: auto;
    padding: clamp(16px, 4vw, 28px);
    overflow: hidden;
    border: 1px solid rgba(96, 165, 250, .36);
    border-radius: 24px;
    color: #fff;
    background:
        linear-gradient(180deg, rgba(4, 13, 48, .42), rgba(4, 13, 48, .98) 34%),
        url('../images/robo-arena/game-arena-premium-background.png') center top / cover no-repeat,
        #07133f;
    box-shadow: 0 22px 48px rgba(1, 16, 52, .38), inset 0 1px 0 rgba(255,255,255,.14);
}

body.parent-premium-page .parent-child-id-card::before {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 50% 0%, rgba(34, 211, 238, .28), transparent 36%);
    content: '';
}

body.parent-premium-page .parent-child-id-card > * {
    position: relative;
    z-index: 1;
}

body.parent-premium-page .parent-child-id-hero {
    display: grid;
    justify-items: center;
    gap: 10px;
    margin: -4px auto 6px;
}

body.parent-premium-page .parent-child-id-logo {
    width: min(58vw, 210px);
    max-height: 120px;
    object-fit: contain;
    filter: drop-shadow(0 12px 18px rgba(0,0,0,.36));
}

body.parent-premium-page .parent-child-id-robot {
    width: min(38vw, 132px);
    max-height: 132px;
    object-fit: contain;
    filter: drop-shadow(0 16px 24px rgba(0,0,0,.34));
}

body.parent-premium-page .parent-child-id-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 4px 0 14px;
}

body.parent-premium-page .parent-child-id-steps span {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid rgba(125, 211, 252, .28);
    border-radius: 999px;
    color: rgba(255,255,255,.72);
    background: rgba(3, 10, 36, .6);
    font-size: .78rem;
    font-weight: 900;
}

body.parent-premium-page .parent-child-id-steps strong {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
}

body.parent-premium-page .parent-child-id-steps .is-complete,
body.parent-premium-page .parent-child-id-steps .is-active {
    color: #fff;
    border-color: rgba(52, 211, 153, .76);
    background: linear-gradient(135deg, rgba(20, 184, 166, .72), rgba(14, 165, 233, .62));
}

body.parent-premium-page .parent-child-id-heading {
    text-align: center;
}

body.parent-premium-page .parent-child-id-heading h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(2.05rem, 9vw, 3.3rem);
    line-height: .98;
    text-transform: uppercase;
    text-shadow: 0 3px 0 rgba(3, 33, 96, .82);
}

body.parent-premium-page .parent-child-id-heading p:not(.eyebrow) {
    max-width: 540px;
    margin: 8px auto 14px;
    color: rgba(255,255,255,.82);
}

body.parent-premium-page .parent-child-id-summary,
body.parent-premium-page .parent-child-id-display,
body.parent-premium-page .parent-child-id-note,
body.parent-premium-page .parent-child-id-error {
    border: 1px solid rgba(125, 211, 252, .3);
    border-radius: 18px;
    background: rgba(3, 11, 39, .72);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.09);
}

body.parent-premium-page .parent-child-id-summary {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 11px;
    align-items: center;
    padding: 12px;
}

body.parent-premium-page .parent-child-id-summary .child-card-photo,
body.parent-premium-page .parent-child-id-summary img.child-card-photo {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    object-fit: cover;
}

body.parent-premium-page .parent-child-id-summary strong,
body.parent-premium-page .parent-child-id-summary span {
    display: block;
    min-width: 0;
}

body.parent-premium-page .parent-child-id-summary strong {
    overflow: hidden;
    color: #fff;
    font-size: 1.14rem;
    font-weight: 1000;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.parent-premium-page .parent-child-id-summary span:not(.parent-child-id-saved) {
    color: rgba(255,255,255,.72);
    font-size: .9rem;
}

body.parent-premium-page .parent-child-id-saved {
    grid-column: 1 / -1;
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 999px;
    color: #052e2b;
    background: linear-gradient(180deg, #a7f3d0, #34d399);
    font-size: .82rem;
    font-weight: 1000;
}

body.parent-premium-page .parent-child-id-display {
    margin-top: 14px;
    padding: 16px 12px;
    text-align: center;
}

body.parent-premium-page .parent-child-id-display p {
    margin: 0 0 8px;
    color: #67e8f9;
    font-size: .78rem;
    font-weight: 1000;
    letter-spacing: .08em;
}

body.parent-premium-page .parent-child-id-value {
    display: grid;
    grid-template-columns: 1fr 14px 1fr;
    gap: 8px;
    align-items: center;
}

body.parent-premium-page .parent-child-id-value .child-id__group {
    display: grid;
    min-height: 72px;
    place-items: center;
    border: 1px solid rgba(125, 211, 252, .42);
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(180deg, rgba(2, 24, 67, .94), rgba(6, 36, 82, .82));
    font-size: clamp(2rem, 12vw, 3.45rem);
    font-weight: 1000;
    line-height: 1;
    text-shadow: 0 3px 0 rgba(0,0,0,.28);
}

body.parent-premium-page .parent-child-id-divider {
    width: 12px;
    height: 3px;
    border-radius: 999px;
    background: rgba(255,255,255,.52);
}

body.parent-premium-page .parent-child-id-display small,
body.parent-premium-page .parent-child-id-profile-hint {
    display: block;
    margin-top: 10px;
    color: rgba(255,255,255,.72);
    font-size: .86rem;
}

body.parent-premium-page .parent-child-id-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 14px 0 4px;
}

body.parent-premium-page .parent-child-id-action {
    min-height: 50px;
    padding-inline: 8px;
    font-size: .76rem;
}

body.parent-premium-page .parent-child-id-action[hidden] {
    display: none;
}

body.parent-premium-page .parent-child-id-action.is-success {
    border-color: #34d399;
    color: #052e2b;
    background: linear-gradient(180deg, #a7f3d0, #34d399);
}

body.parent-premium-page .parent-child-id-status {
    min-height: 22px;
    margin: 8px 0;
    color: #a7f3d0;
    font-size: .88rem;
    font-weight: 900;
    text-align: center;
}

body.parent-premium-page .parent-child-id-status[data-status-type="error"] {
    color: #fecaca;
}

body.parent-premium-page .parent-child-id-status[data-status-type="warning"] {
    color: #fde68a;
}

body.parent-premium-page .parent-child-id-note {
    display: grid;
    gap: 4px;
    margin-top: 10px;
    padding: 12px;
}

body.parent-premium-page .parent-child-id-note strong {
    color: #fff;
    font-size: .98rem;
}

body.parent-premium-page .parent-child-id-note p {
    margin: 0;
    color: rgba(255,255,255,.75);
    font-size: .9rem;
}

body.parent-premium-page .parent-child-id-note--warning {
    border-color: rgba(251, 191, 36, .54);
    background: rgba(68, 34, 5, .48);
}

body.parent-premium-page .parent-child-id-primary-row {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

body.parent-premium-page .parent-child-id-dialog {
    width: min(calc(100% - 28px), 460px);
    border: 1px solid rgba(125, 211, 252, .44);
    border-radius: 20px;
    color: #fff;
    background: #061239;
    box-shadow: 0 20px 60px rgba(0,0,0,.45);
}

body.parent-premium-page .parent-child-id-dialog::backdrop {
    background: rgba(0, 8, 28, .72);
}

body.parent-premium-page .parent-child-id-dialog form {
    display: grid;
    gap: 12px;
}

body.parent-premium-page .parent-child-id-dialog h3,
body.parent-premium-page .parent-child-id-dialog p,
body.parent-premium-page .parent-child-id-dialog li {
    color: #fff;
}

body.parent-premium-page .parent-child-id-dialog-close {
    justify-self: end;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 50%;
    color: #fff;
    background: rgba(255,255,255,.1);
    font-size: 1.5rem;
}

body.parent-premium-page .parent-child-id-print-card {
    display: none;
}

@media (min-width: 980px) {
    body.parent-premium-page .parent-child-id-card {
        display: grid;
        width: min(100%, 1080px);
        grid-template-columns: minmax(260px, .85fr) minmax(420px, 1.15fr);
        gap: 24px;
        align-items: center;
    }

    body.parent-premium-page .parent-child-id-hero {
        margin: 0;
    }

    body.parent-premium-page .parent-child-id-logo {
        width: 260px;
    }

    body.parent-premium-page .parent-child-id-robot {
        width: 210px;
        max-height: 210px;
    }

    body.parent-premium-page .parent-child-id-steps,
    body.parent-premium-page .parent-child-id-heading,
    body.parent-premium-page .parent-child-id-summary,
    body.parent-premium-page .parent-child-id-display,
    body.parent-premium-page .parent-child-id-actions,
    body.parent-premium-page .parent-child-id-status,
    body.parent-premium-page .parent-child-id-note,
    body.parent-premium-page .parent-child-id-profile-hint,
    body.parent-premium-page .parent-child-id-primary-row,
    body.parent-premium-page .parent-child-id-error {
        grid-column: 2;
    }
}

@media (max-width: 370px) {
    body.parent-premium-page .parent-child-id-card {
        padding: 14px 12px;
        border-radius: 20px;
    }

    body.parent-premium-page .parent-child-id-actions {
        grid-template-columns: 1fr;
    }

    body.parent-premium-page .parent-child-id-value .child-id__group {
        min-height: 64px;
    }
}

@media print {
    body * {
        visibility: hidden !important;
    }

    body.parent-premium-page .parent-child-id-print-card,
    body.parent-premium-page .parent-child-id-print-card * {
        visibility: visible !important;
    }

    body.parent-premium-page .parent-child-id-print-card {
        position: fixed;
        inset: 0;
        display: grid !important;
        align-content: start;
        gap: 14px;
        padding: 24mm 18mm;
        color: #111827;
        background: #fff;
        font-family: Arial, sans-serif;
    }

    body.parent-premium-page .parent-child-id-print-card img {
        width: 160px;
        height: auto;
    }

    body.parent-premium-page .parent-child-id-print-card h1 {
        margin: 0;
        color: #111827;
        font-size: 24pt;
    }

    body.parent-premium-page .parent-child-id-print-card strong {
        display: inline-block;
        padding: 8mm 10mm;
        border: 2px solid #111827;
        border-radius: 8px;
        color: #111827;
        font-size: 34pt;
        letter-spacing: .08em;
    }

    body.parent-premium-page .parent-child-id-print-card p,
    body.parent-premium-page .parent-child-id-print-card small {
        max-width: 150mm;
        margin: 0;
        color: #111827;
        font-size: 12pt;
        line-height: 1.45;
    }
}

/* PARENT-CHILD-ID-PROFILE-V2-005 */
body.parent-premium-page .parent-profile-child-id {
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 8px 0 12px;
}

body.parent-premium-page .parent-profile-child-id .child-id__group {
    display: grid;
    min-width: 112px;
    min-height: 58px;
    place-items: center;
    border: 1px solid rgba(14, 165, 233, .34);
    border-radius: 14px;
    color: #06214f;
    background: #f8fdff;
    font-size: clamp(1.7rem, 6vw, 2.5rem);
    font-weight: 1000;
    letter-spacing: .04em;
}

/* PARENT-EDIT-CHILD-V2-006 */
body.parent-premium-page .parent-edit-child-page {
    --edit-bg: #06142f;
    --edit-card: rgba(9, 22, 61, .94);
    --edit-card-2: rgba(17, 28, 78, .96);
    --edit-line: rgba(125, 211, 252, .34);
    --edit-purple: #a855f7;
    --edit-cyan: #22d3ee;
    --edit-yellow: #ffd84d;
    --edit-red: #fb7185;
    --edit-green: #34d399;
    width: min(100%, 1180px);
    margin: 0 auto;
    padding: 10px 12px calc(92px + env(safe-area-inset-bottom));
    color: #f8fbff;
    background:
        radial-gradient(circle at 50% -8%, rgba(34, 211, 238, .2), transparent 26rem),
        linear-gradient(180deg, #071940 0%, #050b22 72%, #040817 100%);
}

body.parent-premium-page .parent-edit-hero {
    position: relative;
    display: grid;
    min-height: 222px;
    place-items: start center;
    overflow: hidden;
    border-radius: 0 0 28px 28px;
    background:
        linear-gradient(180deg, rgba(2, 7, 25, .05), rgba(3, 9, 29, .86)),
        url("../images/robo-arena/game-arena-premium-background.png") center / cover no-repeat;
}

body.parent-premium-page .parent-back-button {
    position: absolute;
    z-index: 3;
    top: 12px;
    left: 12px;
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 50%;
    color: #fff;
    background: rgba(5, 16, 42, .62);
    box-shadow: 0 8px 24px rgba(0,0,0,.28);
    font-size: 2.25rem;
    line-height: 1;
    text-decoration: none;
}

body.parent-premium-page .parent-edit-hero__logo {
    width: min(260px, 70vw);
    max-height: 118px;
    margin-top: 10px;
    object-fit: contain;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.42));
}

body.parent-premium-page .parent-edit-hero__robot {
    position: absolute;
    right: 22px;
    bottom: -5px;
    width: min(145px, 38vw);
    max-height: 160px;
    object-fit: contain;
    filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .42));
}

body.parent-premium-page .parent-edit-message {
    margin: 12px 0;
}

body.parent-premium-page .parent-edit-identity,
body.parent-premium-page .parent-edit-panel {
    border: 1px solid var(--edit-line);
    border-radius: 24px;
    background: linear-gradient(155deg, var(--edit-card-2), var(--edit-card));
    box-shadow: 0 18px 50px rgba(0, 0, 0, .36), inset 0 1px 0 rgba(255,255,255,.08);
}

body.parent-premium-page .parent-edit-identity {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    margin-top: -18px;
    padding: 14px;
}

body.parent-premium-page .parent-edit-avatar {
    width: 78px;
    height: 78px;
    border: 3px solid #22d3ee;
    border-radius: 22px;
    object-fit: cover;
    background: rgba(255,255,255,.08);
}

body.parent-premium-page .parent-edit-identity h1 {
    max-width: 100%;
    margin: 2px 0;
    overflow: hidden;
    font-size: clamp(1.7rem, 8vw, 2.4rem);
    font-weight: 1000;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.parent-premium-page .parent-edit-identity p:not(.eyebrow) {
    margin: 0;
    color: rgba(255,255,255,.78);
}

body.parent-premium-page .parent-edit-identity__stats {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

body.parent-premium-page .parent-edit-identity__stats span,
body.parent-premium-page .parent-edit-metrics article {
    display: grid;
    min-width: 0;
    min-height: 70px;
    place-items: center;
    padding: 8px 6px;
    border: 1px solid rgba(125, 211, 252, .24);
    border-radius: 16px;
    background: rgba(4, 17, 47, .68);
    text-align: center;
}

body.parent-premium-page .parent-edit-identity__stats strong,
body.parent-premium-page .parent-edit-metrics strong {
    color: #fff;
    font-size: 1.25rem;
    font-weight: 1000;
}

body.parent-premium-page .parent-edit-identity__stats small,
body.parent-premium-page .parent-edit-metrics span {
    color: rgba(255,255,255,.68);
    font-size: .72rem;
    font-weight: 850;
    text-transform: uppercase;
}

body.parent-premium-page .parent-edit-metric--points {
    justify-items: center;
}

body.parent-premium-page .parent-edit-metric--points img {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

body.parent-premium-page .parent-edit-tabs {
    position: sticky;
    z-index: 7;
    top: 8px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin: 12px 0;
    padding: 6px;
    border: 1px solid rgba(125, 211, 252, .22);
    border-radius: 18px;
    background: rgba(5, 13, 37, .88);
    backdrop-filter: blur(10px);
}

body.parent-premium-page .parent-edit-tabs a {
    display: grid;
    min-height: 42px;
    place-items: center;
    border-radius: 13px;
    color: #dff7ff;
    background: rgba(18, 35, 84, .72);
    font-size: .78rem;
    font-weight: 1000;
    text-decoration: none;
}

body.parent-premium-page .parent-edit-panel {
    display: grid;
    gap: 16px;
    margin-top: 14px;
    padding: 16px;
}

body.parent-premium-page .parent-edit-section-heading h2,
body.parent-premium-page .parent-edit-danger h2,
body.parent-premium-page .parent-edit-dialog h2 {
    margin: 2px 0 4px;
    color: #fff;
    font-size: clamp(1.35rem, 6vw, 2rem);
    font-weight: 1000;
}

body.parent-premium-page .parent-edit-section-heading p,
body.parent-premium-page .parent-edit-danger p,
body.parent-premium-page .parent-edit-dialog p {
    margin: 0;
    color: rgba(255,255,255,.74);
    line-height: 1.45;
}

body.parent-premium-page .parent-edit-form {
    display: grid;
    gap: 14px;
}

body.parent-premium-page .parent-edit-field {
    display: grid;
    gap: 7px;
    color: #fff;
    font-weight: 900;
}

body.parent-premium-page .parent-edit-field span,
body.parent-premium-page .parent-edit-avatar-picker legend {
    color: #dff7ff;
    font-size: .88rem;
    font-weight: 1000;
}

body.parent-premium-page .parent-edit-field input:not([type="range"]),
body.parent-premium-page .parent-edit-field select {
    width: 100%;
    min-height: 58px;
    padding: 0 16px;
    border: 1px solid rgba(125, 211, 252, .34);
    border-radius: 16px;
    color: #fff;
    background: rgba(3, 11, 36, .78);
    font-weight: 850;
    outline: none;
}

body.parent-premium-page .parent-edit-field input:focus,
body.parent-premium-page .parent-edit-field select:focus {
    border-color: #c084fc;
    box-shadow: 0 0 0 4px rgba(168, 85, 247, .22);
}

body.parent-premium-page .parent-edit-field-grid {
    display: grid;
    gap: 12px;
}

body.parent-premium-page .parent-edit-readonly-metric {
    display: grid;
    gap: 4px;
    padding: 14px;
    border: 1px solid rgba(52, 211, 153, .36);
    border-radius: 16px;
    background: rgba(5, 46, 40, .42);
}

body.parent-premium-page .parent-edit-readonly-metric span,
body.parent-premium-page .parent-edit-readonly-metric small {
    color: rgba(255,255,255,.7);
    font-size: .8rem;
    font-weight: 850;
}

body.parent-premium-page .parent-edit-readonly-metric strong {
    color: #a7f3d0;
    font-size: 1.3rem;
    font-weight: 1000;
}

body.parent-premium-page .parent-edit-range input[type="range"] {
    width: 100%;
    accent-color: var(--edit-purple);
}

body.parent-premium-page .parent-edit-avatar-picker {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

body.parent-premium-page .parent-edit-avatar-picker legend {
    grid-column: 1 / -1;
    margin-bottom: 2px;
}

body.parent-premium-page .parent-edit-avatar-option {
    display: grid;
    min-width: 0;
    gap: 6px;
    justify-items: center;
    padding: 8px 4px;
    border: 1px solid rgba(125, 211, 252, .2);
    border-radius: 16px;
    background: rgba(3, 11, 36, .55);
    text-align: center;
    cursor: pointer;
}

body.parent-premium-page .parent-edit-avatar-option.is-selected {
    border-color: #c084fc;
    box-shadow: 0 0 0 3px rgba(168, 85, 247, .2);
}

body.parent-premium-page .parent-edit-avatar-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

body.parent-premium-page .parent-edit-avatar-option img,
body.parent-premium-page .parent-edit-avatar-choice {
    width: 54px;
    height: 54px;
    border-radius: 15px;
    object-fit: cover;
}

body.parent-premium-page .parent-edit-avatar-option span {
    max-width: 100%;
    overflow: hidden;
    color: #fff;
    font-size: .7rem;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.parent-premium-page .parent-edit-photo-upload {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px dashed rgba(125, 211, 252, .34);
    border-radius: 18px;
    background: rgba(2, 13, 38, .48);
}

body.parent-premium-page .parent-edit-photo-upload[hidden],
body.parent-premium-page .parent-edit-photo-preview[hidden] { display: none; }

body.parent-premium-page .parent-edit-photo-preview {
    margin: 0;
}

body.parent-premium-page .parent-edit-photo-preview img {
    width: 96px;
    height: 96px;
    border-radius: 22px;
    object-fit: cover;
}

body.parent-premium-page .parent-edit-toggle {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 12px;
    border: 1px solid rgba(125, 211, 252, .24);
    border-radius: 18px;
    background: rgba(3, 11, 36, .55);
}

body.parent-premium-page .parent-edit-toggle input {
    width: 36px;
    height: 36px;
    accent-color: var(--edit-green);
}

body.parent-premium-page .parent-edit-toggle strong,
body.parent-premium-page .parent-edit-toggle small {
    display: block;
}

body.parent-premium-page .parent-edit-toggle small {
    margin-top: 2px;
    color: rgba(255,255,255,.68);
}

body.parent-premium-page .parent-edit-primary-button,
body.parent-premium-page .parent-edit-secondary-button,
body.parent-premium-page .parent-edit-warning-button,
body.parent-premium-page .parent-edit-danger-button,
body.parent-premium-page .parent-edit-link-button {
    display: inline-flex;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 16px;
    font-weight: 1000;
    text-decoration: none;
    cursor: pointer;
}

body.parent-premium-page .parent-edit-primary-button {
    width: 100%;
    border: 0;
    color: #fff;
    background: linear-gradient(180deg, #c084fc, #8b2ce0);
    box-shadow: 0 12px 28px rgba(168, 85, 247, .34);
}

body.parent-premium-page .parent-edit-secondary-button,
body.parent-premium-page .parent-edit-link-button {
    border: 1px solid rgba(125, 211, 252, .4);
    color: #a5f3fc;
    background: rgba(2, 18, 50, .62);
}

body.parent-premium-page .parent-edit-warning-button {
    border: 1px solid rgba(251, 191, 36, .46);
    color: #1f1600;
    background: linear-gradient(180deg, #fde68a, #f59e0b);
}

body.parent-premium-page .parent-edit-danger-button {
    border: 1px solid rgba(251, 113, 133, .58);
    color: #fff;
    background: linear-gradient(180deg, #fb7185, #be123c);
}

body.parent-premium-page .parent-edit-button-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

body.parent-premium-page .parent-edit-button-row .parent-edit-warning-button {
    grid-column: 1 / -1;
}

body.parent-premium-page .parent-edit-live-status {
    min-height: 22px;
    margin: 0;
    color: #a7f3d0;
    font-weight: 900;
}

body.parent-premium-page .parent-edit-id-card {
    display: grid;
    gap: 8px;
    padding: 16px;
    border: 1px solid rgba(125, 211, 252, .35);
    border-radius: 20px;
    background: rgba(3, 11, 36, .64);
    text-align: center;
}

body.parent-premium-page .parent-edit-id-card > span,
body.parent-premium-page .parent-edit-id-card small {
    color: rgba(255,255,255,.68);
    font-weight: 850;
}

body.parent-premium-page .parent-edit-id-card strong {
    color: #fff;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: clamp(2.1rem, 12vw, 4rem);
    font-weight: 1000;
    letter-spacing: .08em;
}

body.parent-premium-page .parent-edit-device-list {
    display: grid;
    gap: 10px;
}

body.parent-premium-page .parent-edit-device {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 12px;
    border: 1px solid rgba(125, 211, 252, .24);
    border-radius: 18px;
    background: rgba(3, 11, 36, .55);
}

body.parent-premium-page .parent-edit-device strong,
body.parent-premium-page .parent-edit-device span,
body.parent-premium-page .parent-edit-device small {
    display: block;
}

body.parent-premium-page .parent-edit-device span,
body.parent-premium-page .parent-edit-device small {
    color: rgba(255,255,255,.68);
}

body.parent-premium-page .parent-edit-device-status {
    padding: 7px 10px;
    border-radius: 999px;
    color: #052e2b !important;
    background: #a7f3d0;
    font-size: .72rem;
    font-weight: 1000;
}

body.parent-premium-page .parent-edit-device.is-revoked .parent-edit-device-status {
    color: #fff !important;
    background: rgba(148, 163, 184, .34);
}

body.parent-premium-page .parent-edit-secondary-button.compact {
    grid-column: 1 / -1;
    min-height: 44px;
}

body.parent-premium-page .parent-edit-warning-button.full {
    width: 100%;
}

body.parent-premium-page .parent-edit-empty {
    margin: 0;
    color: rgba(255,255,255,.72);
}

body.parent-premium-page .parent-edit-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

body.parent-premium-page .parent-edit-table-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

body.parent-premium-page .parent-edit-mistakes {
    display: grid;
    gap: 6px;
    margin: 0;
    padding-left: 20px;
    color: rgba(255,255,255,.8);
}

body.parent-premium-page .parent-edit-danger {
    border-color: rgba(251, 113, 133, .44);
}

body.parent-premium-page .parent-edit-bottom-nav {
    position: fixed;
    z-index: 20;
    right: 12px;
    bottom: max(10px, env(safe-area-inset-bottom));
    left: 12px;
    display: grid;
    max-width: 480px;
    margin: 0 auto;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    padding: 8px;
    border: 1px solid rgba(125, 211, 252, .34);
    border-radius: 24px;
    background: rgba(4, 12, 35, .92);
    box-shadow: 0 -12px 34px rgba(0,0,0,.38);
    backdrop-filter: blur(14px);
}

body.parent-premium-page .parent-edit-bottom-nav a {
    display: grid;
    min-width: 0;
    min-height: 54px;
    place-items: center;
    gap: 3px;
    border-radius: 16px;
    color: rgba(255,255,255,.62);
    font-size: .64rem;
    font-weight: 1000;
    text-align: center;
    text-decoration: none;
}

body.parent-premium-page .parent-edit-bottom-nav img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

body.parent-premium-page .parent-edit-bottom-nav a.is-active {
    color: #fff;
    background: linear-gradient(180deg, #22d3ee, #0ea5e9);
}

body.parent-premium-page .parent-edit-bottom-nav a.is-active img {
    filter: brightness(0) invert(1);
}

body.parent-premium-page .parent-edit-dialog {
    width: min(calc(100% - 28px), 470px);
    border: 1px solid rgba(125, 211, 252, .42);
    border-radius: 22px;
    color: #fff;
    background: #061239;
    box-shadow: 0 22px 70px rgba(0,0,0,.55);
}

body.parent-premium-page .parent-edit-dialog::backdrop {
    background: rgba(0, 8, 28, .78);
}

body.parent-premium-page .parent-edit-dialog form {
    display: grid;
    gap: 14px;
}

body.parent-premium-page .parent-edit-dialog-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

@media (min-width: 720px) {
    body.parent-premium-page .parent-edit-child-page {
        display: grid;
        grid-template-columns: minmax(320px, .9fr) minmax(420px, 1.1fr);
        gap: 18px;
        padding-inline: 22px;
    }

    body.parent-premium-page .parent-edit-hero,
    body.parent-premium-page .parent-edit-message,
    body.parent-premium-page .parent-edit-identity,
    body.parent-premium-page .parent-edit-tabs,
    body.parent-premium-page .parent-edit-danger {
        grid-column: 1 / -1;
    }

    body.parent-premium-page .parent-edit-field-grid,
    body.parent-premium-page .parent-edit-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.parent-premium-page .parent-edit-bottom-nav {
        right: 24px;
        left: auto;
        width: 440px;
    }
}

@media (min-width: 1120px) {
    body.parent-premium-page .parent-edit-child-page {
        grid-template-columns: minmax(420px, .95fr) minmax(420px, 1.05fr);
        padding-bottom: 28px;
    }

    body.parent-premium-page .parent-edit-bottom-nav {
        position: sticky;
        grid-column: 1 / -1;
        bottom: 12px;
        justify-self: center;
    }
}

@media (max-width: 370px) {
    body.parent-premium-page .parent-edit-child-page { padding-inline: 8px; }
    body.parent-premium-page .parent-edit-hero { min-height: 200px; }
    body.parent-premium-page .parent-edit-avatar-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.parent-premium-page .parent-edit-button-row { grid-template-columns: 1fr; }
    body.parent-premium-page .parent-edit-dialog-actions { grid-template-columns: 1fr; }
}

/* PARENT-ADD-CHILD-PREMIUM-ALIGN-20260724 */
body.parent-premium-page .parent-add-child-view {
    --add-bg: #06142f;
    --add-deep: #05091c;
    --add-card: rgba(10, 29, 68, .96);
    --add-card-2: rgba(6, 17, 50, .98);
    --add-blue: #1682ff;
    --add-cyan: #22d3ee;
    --add-purple: #963ce8;
    --add-green: #22c98b;
    --add-text: #f8faff;
    --add-muted: #aebbd6;
    position: relative;
    display: grid;
    gap: 0;
    min-height: calc(100dvh - 76px);
    padding: max(16px, env(safe-area-inset-top)) 16px max(28px, env(safe-area-inset-bottom));
    overflow-x: clip;
    color: var(--add-text);
    background:
        radial-gradient(circle at 50% 7%, rgba(22, 130, 255, .34), transparent 21rem),
        radial-gradient(circle at 50% 38%, rgba(34, 211, 238, .12), transparent 24rem),
        linear-gradient(180deg, var(--add-bg), var(--add-deep));
}

body.parent-premium-page .parent-add-child-view .onboarding-progress-panel {
    display: none !important;
}

body.parent-premium-page .parent-add-child-view .form-message {
    position: relative;
    z-index: 5;
    width: min(100%, 430px);
    margin: 10px auto;
}

body.parent-premium-page .parent-add-child-view .parent-onboarding-hero {
    position: relative;
    display: block;
    width: min(100%, 430px);
    min-height: clamp(236px, 34dvh, 300px);
    margin: 0 auto -24px;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid rgba(70, 154, 255, .42);
    border-radius: 30px;
    background:
        linear-gradient(180deg, rgba(5, 15, 45, .10) 0%, rgba(5, 15, 45, .10) 48%, rgba(5, 9, 28, .86) 100%),
        url('../images/robo-arena/game-arena-premium-background.png') center / cover no-repeat,
        #07133f;
    box-shadow: 0 24px 58px rgba(0, 10, 36, .46);
}

body.parent-premium-page .parent-add-child-view .parent-onboarding-hero > div {
    display: none !important;
}

body.parent-premium-page .parent-add-child-view .parent-onboarding-logo {
    position: absolute;
    z-index: 2;
    top: 14px;
    left: 50%;
    width: clamp(198px, 64%, 288px);
    max-height: 126px;
    object-fit: contain;
    transform: translateX(-50%);
    filter: drop-shadow(0 0 18px rgba(0, 149, 255, .46));
}

body.parent-premium-page .parent-add-child-view .parent-onboarding-mentor {
    position: absolute;
    z-index: 2;
    right: 4%;
    bottom: 2px;
    width: clamp(130px, 42%, 188px);
    max-height: 198px;
    object-fit: contain;
    filter: drop-shadow(0 16px 26px rgba(0, 0, 0, .36));
}

body.parent-premium-page .parent-add-child-back {
    position: absolute;
    z-index: 7;
    top: 14px;
    left: 14px;
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: 50%;
    background: rgba(6, 17, 50, .72);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .16);
    backdrop-filter: blur(10px);
}

body.parent-premium-page .parent-add-child-back img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

body.parent-premium-page .parent-add-step-counter {
    position: absolute;
    z-index: 7;
    top: 14px;
    right: 14px;
    display: grid;
    min-width: 72px;
    min-height: 48px;
    place-items: center;
    padding: 0 14px;
    border: 1px solid rgba(70, 154, 255, .58);
    border-radius: 18px;
    color: #fff;
    background: rgba(6, 17, 50, .78);
    font-weight: 900;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
    backdrop-filter: blur(10px);
}

body.parent-premium-page .parent-add-child-view .parent-child-setup.parent-add-child-card {
    position: relative;
    z-index: 3;
    width: min(100%, 430px);
    margin: 0 auto;
    padding: clamp(22px, 6vw, 30px) !important;
    overflow: hidden;
    border: 1px solid rgba(70, 154, 255, .56) !important;
    border-radius: 28px !important;
    color: var(--add-text) !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(34, 211, 238, .16), transparent 18rem),
        linear-gradient(155deg, var(--add-card), var(--add-card-2)) !important;
    box-shadow: 0 18px 52px rgba(0, 13, 45, .42), inset 0 1px 0 rgba(255,255,255,.12) !important;
    backdrop-filter: blur(18px);
}

body.parent-premium-page .parent-add-child-view .parent-add-child-card .setup-mentor {
    display: none !important;
}

body.parent-premium-page .parent-add-child-view .parent-add-child-card .eyebrow {
    margin: 0 0 7px;
    color: var(--add-cyan) !important;
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: .13em;
    text-align: left;
}

body.parent-premium-page .parent-add-child-view .parent-add-child-card h2 {
    margin: 0 0 8px !important;
    color: #fff !important;
    font-size: clamp(2rem, 8vw, 2.7rem) !important;
    line-height: 1.04 !important;
    text-align: left !important;
    text-transform: none !important;
    text-shadow: none !important;
}

body.parent-premium-page .parent-add-child-view .parent-add-child-card > p:not(.eyebrow) {
    margin: 0 0 22px !important;
    color: var(--add-muted) !important;
    text-align: left !important;
    line-height: 1.48;
}

body.parent-premium-page .parent-add-child-view .parent-add-child-form {
    display: grid;
    gap: 24px !important;
}

body.parent-premium-page .parent-add-child-view .parent-add-field,
body.parent-premium-page .parent-add-child-view .parent-add-choice,
body.parent-premium-page .parent-add-child-view .parent-range-field,
body.parent-premium-page .parent-add-child-view .parent-add-info,
body.parent-premium-page .parent-add-child-view .parent-add-validation {
    margin: 0;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.parent-premium-page .parent-add-child-view .parent-add-field label,
body.parent-premium-page .parent-add-child-view .parent-add-choice legend,
body.parent-premium-page .parent-add-child-view .parent-range-heading label {
    margin: 0 0 10px !important;
    color: #fff !important;
    font-size: .95rem !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

body.parent-premium-page .parent-add-child-view .parent-add-input-shell {
    display: grid;
    min-height: 58px;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 0;
    padding: 0 14px 0 0 !important;
    border: 1px solid rgba(76, 127, 215, .68) !important;
    border-radius: 18px !important;
    background: rgba(4, 16, 42, .72) !important;
}

body.parent-premium-page .parent-add-child-view .parent-add-input-shell:focus-within {
    border-color: var(--add-cyan) !important;
    box-shadow: 0 0 0 4px rgba(34, 211, 238, .18);
}

body.parent-premium-page .parent-add-child-view .parent-add-input-shell img {
    width: 22px;
    height: 22px;
    justify-self: center;
    filter: brightness(0) saturate(100%) invert(74%) sepia(85%) saturate(910%) hue-rotate(144deg) brightness(103%) contrast(94%);
}

body.parent-premium-page .parent-add-child-view .parent-add-input-shell input {
    min-height: 56px;
    color: #fff !important;
    font-size: 1rem;
    font-weight: 800;
}

body.parent-premium-page .parent-add-child-view .parent-add-input-shell input::placeholder {
    color: rgba(174, 187, 214, .85) !important;
}

body.parent-premium-page .parent-add-child-view .parent-add-help,
body.parent-premium-page .parent-add-child-view .next-step-hint {
    margin: 8px 0 0 !important;
    color: rgba(174, 187, 214, .86) !important;
    font-size: .88rem !important;
    line-height: 1.42;
}

body.parent-premium-page .parent-add-child-view .parent-grade-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

body.parent-premium-page .parent-add-child-view .parent-choice-chip span {
    min-height: 52px !important;
    border: 1px solid rgba(76, 127, 215, .52) !important;
    border-radius: 16px !important;
    color: var(--add-muted) !important;
    background: rgba(6, 26, 64, .78) !important;
    font-size: 1.15rem !important;
    font-weight: 900 !important;
}

body.parent-premium-page .parent-add-child-view .parent-choice-chip input:checked + span {
    color: #fff !important;
    border-color: var(--add-cyan) !important;
    background: linear-gradient(135deg, var(--add-blue), #1d63e9) !important;
    box-shadow: 0 0 0 4px rgba(34, 211, 238, .15), 0 12px 26px rgba(22,130,255,.26) !important;
}

body.parent-premium-page .parent-add-child-view .parent-avatar-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

body.parent-premium-page .parent-add-child-view .parent-avatar-option {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 0 !important;
    border: 0 !important;
    color: var(--add-muted) !important;
    background: transparent !important;
    font-size: .72rem !important;
    line-height: 1.2;
}

body.parent-premium-page .parent-add-child-view .parent-avatar-visual {
    position: relative;
    width: 68px !important;
    height: 68px !important;
    border: 2px solid rgba(76, 127, 215, .52);
    border-radius: 50% !important;
    background: rgba(7, 28, 66, .82) !important;
}

body.parent-premium-page .parent-add-child-view .parent-avatar-option:has(input:checked) {
    color: #fff !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.parent-premium-page .parent-add-child-view .parent-avatar-option:has(input:checked) .parent-avatar-visual {
    border-color: var(--add-cyan);
    box-shadow: 0 0 0 4px rgba(34, 211, 238, .15), 0 0 24px rgba(34, 211, 238, .22);
}

body.parent-premium-page .parent-add-child-view .parent-avatar-option:has(input:checked) .parent-avatar-visual::after {
    position: absolute;
    right: 0;
    bottom: 0;
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border: 2px solid #fff;
    border-radius: 50%;
    color: #fff;
    background: var(--add-green);
    font-size: 13px;
    font-weight: 900;
    content: "\2713";
}

body.parent-premium-page .parent-add-child-view .parent-photo-upload {
    margin-top: 12px;
    padding: 16px !important;
    border: 1px dashed rgba(150, 60, 232, .52) !important;
    border-radius: 18px !important;
    background: rgba(150, 60, 232, .08) !important;
}

body.parent-premium-page .parent-add-child-view .parent-range-heading output {
    color: var(--add-cyan) !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 1.35rem;
    font-weight: 900;
}

body.parent-premium-page .parent-add-child-view .parent-range-field input[type="range"] {
    width: 100%;
    accent-color: var(--add-cyan);
}

body.parent-premium-page .parent-add-child-view .mastery-scale {
    color: rgba(174,187,214,.78) !important;
}

body.parent-premium-page .parent-add-child-view .parent-add-info {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 16px !important;
    border: 1px solid rgba(34, 211, 238, .32) !important;
    border-radius: 18px !important;
    background: rgba(8, 36, 77, .74) !important;
}

body.parent-premium-page .parent-add-child-view .parent-add-info > span {
    width: 48px !important;
    height: 48px !important;
    border-radius: 16px !important;
    color: #fff !important;
    background: var(--add-blue) !important;
}

body.parent-premium-page .parent-add-child-view .parent-add-submit {
    min-height: 58px !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, #aa54f2, var(--add-purple)) !important;
    box-shadow: 0 12px 28px rgba(110, 38, 201, .34) !important;
}

@media (max-width: 370px) {
    body.parent-premium-page .parent-add-child-view .parent-avatar-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-height: 800px) and (max-width: 480px) {
    body.parent-premium-page .parent-add-child-view .parent-onboarding-hero {
        min-height: 205px;
    }

    body.parent-premium-page .parent-add-child-view .parent-onboarding-logo {
        width: 216px;
    }

    body.parent-premium-page .parent-add-child-view .parent-onboarding-mentor {
        width: 126px;
    }
}

@media (min-width: 960px) {
    body.parent-premium-page .parent-add-child-view {
        grid-template-columns: minmax(420px, 1fr) minmax(480px, 560px);
        gap: 56px;
        align-items: center;
        width: min(100%, 1080px);
        margin: 0 auto;
        padding: 44px;
    }

    body.parent-premium-page .parent-add-child-view .parent-onboarding-hero {
        width: 100%;
        max-width: 560px;
        min-height: 660px;
        margin: 0;
    }

    body.parent-premium-page .parent-add-child-view .parent-onboarding-logo {
        top: 42px;
        width: min(74%, 430px);
        max-height: 180px;
    }

    body.parent-premium-page .parent-add-child-view .parent-onboarding-mentor {
        right: 8%;
        bottom: 70px;
        width: min(58%, 330px);
        max-height: 420px;
    }

    body.parent-premium-page .parent-add-child-view .parent-child-setup.parent-add-child-card {
        width: 100%;
        max-width: 560px;
        max-height: calc(100dvh - 88px);
        overflow-y: auto;
        margin: 0;
    }
}
/* PARENT-ADD-CHILD-RIGHT-PANEL-AVATARS-20260724 */
body.parent-premium-page .parent-add-child-view .parent-child-setup.parent-add-child-card {
    max-width: 620px;
    background:
        linear-gradient(135deg, rgba(22, 45, 88, .92), rgba(6, 20, 58, .98)),
        repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 2px, transparent 2px 20px) !important;
}

body.parent-premium-page .parent-add-child-view .parent-avatar-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 12px;
}

body.parent-premium-page .parent-add-child-view .parent-avatar-option {
    min-height: 102px;
    align-content: start;
}

body.parent-premium-page .parent-add-child-view .parent-avatar-visual {
    width: 76px !important;
    height: 76px !important;
}

body.parent-premium-page .parent-add-child-view .parent-avatar-option span:last-child {
    max-width: 100%;
    overflow-wrap: anywhere;
    color: inherit;
    font-size: .76rem;
    font-weight: 900;
}

body.parent-premium-page .parent-add-child-view .parent-avatar-option--photo .parent-avatar-visual {
    border-style: solid;
    color: #67e8f9;
}

body.parent-premium-page .parent-add-child-view .parent-avatar-option--photo .parent-avatar-visual strong {
    font-size: 2.2rem;
}

body.parent-premium-page .parent-add-child-view .parent-range-field {
    padding-top: 4px !important;
}

body.parent-premium-page .parent-add-child-view .parent-add-info {
    margin-top: -4px;
}

body.parent-premium-page .parent-add-child-view .parent-add-submit {
    margin-top: -2px;
}

@media (min-width: 960px) {
    body.parent-premium-page .parent-add-child-view {
        grid-template-columns: minmax(430px, 480px) minmax(540px, 620px);
        width: min(100%, 1180px);
        gap: 56px;
    }

    body.parent-premium-page .parent-add-child-view .parent-child-setup.parent-add-child-card {
        max-width: 620px;
        max-height: none;
        overflow: visible;
        align-self: center;
    }
}

@media (max-width: 430px) {
    body.parent-premium-page .parent-add-child-view .parent-avatar-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px 8px;
    }

    body.parent-premium-page .parent-add-child-view .parent-avatar-visual {
        width: 64px !important;
        height: 64px !important;
    }

    body.parent-premium-page .parent-add-child-view .parent-avatar-option {
        min-height: 92px;
        font-size: .68rem !important;
    }
}
/* PARENT-ADD-CHILD-HERO-COMPOSITE-V5-20260724 */
body.parent-premium-page .parent-add-child-view .parent-onboarding-hero {
    background: url('../images/robo-arena/parent-add-child-hero-v5.png') center top / cover no-repeat, #07133f !important;
    border-color: rgba(34, 211, 238, .48) !important;
    box-shadow: 0 24px 62px rgba(0, 10, 36, .52), inset 0 1px 0 rgba(255,255,255,.14) !important;
}

body.parent-premium-page .parent-add-child-view .parent-onboarding-logo,
body.parent-premium-page .parent-add-child-view .parent-onboarding-mentor {
    display: none !important;
}

body.parent-premium-page .parent-add-child-view .parent-onboarding-hero::after {
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background:
        linear-gradient(180deg, rgba(2, 8, 28, .08), transparent 46%, rgba(2, 8, 28, .18)),
        radial-gradient(circle at 50% 35%, rgba(34,211,238,.10), transparent 38%);
    content: '';
}

body.parent-premium-page .parent-add-child-back,
body.parent-premium-page .parent-add-step-counter {
    box-shadow: 0 12px 28px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}

@media (max-width: 480px) {
    body.parent-premium-page .parent-add-child-view .parent-onboarding-hero {
        min-height: clamp(330px, 66vh, 640px);
        background-position: center top !important;
    }
}

@media (min-width: 960px) {
    body.parent-premium-page .parent-add-child-view .parent-onboarding-hero {
        min-height: 660px;
        background-position: center top !important;
    }
}
/* PARENT-ADD-CHILD-RESPONSIVE-AVATAR-GRID-20260724 */
body.parent-premium-page .parent-add-child-view .parent-avatar-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.parent-premium-page .parent-add-child-view .parent-avatar-option {
    min-width: 0;
}

body.parent-premium-page .parent-add-child-view .parent-avatar-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (min-width: 700px) and (max-width: 959px) {
    body.parent-premium-page .parent-add-child-view {
        width: min(100%, 760px);
        margin: 0 auto;
        padding-inline: 24px;
    }

    body.parent-premium-page .parent-add-child-view .parent-onboarding-hero,
    body.parent-premium-page .parent-add-child-view .parent-child-setup.parent-add-child-card {
        width: min(100%, 620px);
        max-width: 620px;
    }

    body.parent-premium-page .parent-add-child-view .parent-onboarding-hero {
        min-height: 500px;
    }

    body.parent-premium-page .parent-add-child-view .parent-avatar-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px 10px;
    }
}

@media (min-width: 960px) {
    body.parent-premium-page .parent-add-child-view {
        grid-template-columns: minmax(360px, 480px) minmax(500px, 600px);
        gap: clamp(28px, 4vw, 52px);
        align-items: start;
        min-height: calc(100dvh - 40px);
        padding: clamp(20px, 3vw, 36px);
    }

    body.parent-premium-page .parent-add-child-view .parent-onboarding-hero {
        height: min(660px, calc(100dvh - 80px));
        min-height: min(560px, calc(100dvh - 80px));
        align-self: start;
    }

    body.parent-premium-page .parent-add-child-view .parent-child-setup.parent-add-child-card {
        max-height: calc(100dvh - 80px);
        overflow-y: auto;
        padding: clamp(22px, 2.2vw, 30px) !important;
        align-self: start;
        scrollbar-gutter: stable;
    }

    body.parent-premium-page .parent-add-child-view .parent-add-child-form {
        gap: 18px !important;
    }

    body.parent-premium-page .parent-add-child-view .parent-avatar-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px 10px;
    }

    body.parent-premium-page .parent-add-child-view .parent-avatar-option {
        min-height: 88px;
    }

    body.parent-premium-page .parent-add-child-view .parent-avatar-visual {
        width: 62px !important;
        height: 62px !important;
    }

    body.parent-premium-page .parent-add-child-view .parent-avatar-option span:last-child {
        font-size: .68rem;
        line-height: 1.12;
    }

    body.parent-premium-page .parent-add-child-view .parent-choice-chip span {
        min-height: 50px !important;
    }
}

@media (min-width: 1200px) {
    body.parent-premium-page .parent-add-child-view {
        grid-template-columns: minmax(400px, 500px) minmax(540px, 620px);
        width: min(100%, 1200px);
    }

    body.parent-premium-page .parent-add-child-view .parent-avatar-visual {
        width: 68px !important;
        height: 68px !important;
    }
}
/* PARENT-ADD-CHILD-STACKED-DESKTOP-20260724 */
body.parent-premium-page .parent-add-child-view .parent-avatar-visual {
    overflow: hidden;
    background: transparent !important;
}

body.parent-premium-page .parent-add-child-view .parent-avatar-option:has(input:checked) .parent-avatar-visual {
    border-color: #22d3ee;
    box-shadow: 0 0 0 3px rgba(34, 211, 238, .16), 0 0 22px rgba(34, 211, 238, .34);
}

body.parent-premium-page .parent-add-child-view .parent-avatar-option:has(input:checked) .parent-avatar-visual::after {
    right: 2px;
    bottom: 2px;
}

@media (min-width: 700px) {
    body.parent-premium-page .parent-add-child-view {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: min(100%, 760px) !important;
        max-width: 760px !important;
        min-height: auto !important;
        gap: 0 !important;
        align-items: start !important;
        padding: clamp(18px, 3vw, 34px) 18px 48px !important;
    }

    body.parent-premium-page .parent-add-child-view .parent-onboarding-hero {
        width: min(100%, 720px) !important;
        max-width: 720px !important;
        height: clamp(300px, 42vw, 380px) !important;
        min-height: 300px !important;
        max-height: 380px !important;
        margin: 0 auto -22px !important;
        background-size: cover !important;
        background-position: center top !important;
    }

    body.parent-premium-page .parent-add-child-view .parent-child-setup.parent-add-child-card {
        width: min(100%, 720px) !important;
        max-width: 720px !important;
        max-height: none !important;
        overflow: visible !important;
        margin: 0 auto !important;
        align-self: start !important;
    }

    body.parent-premium-page .parent-add-child-view .parent-avatar-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 14px 12px !important;
    }

    body.parent-premium-page .parent-add-child-view .parent-avatar-option {
        min-height: 94px !important;
    }

    body.parent-premium-page .parent-add-child-view .parent-avatar-visual {
        width: 66px !important;
        height: 66px !important;
    }
}

@media (min-width: 1100px) {
    body.parent-premium-page .parent-add-child-view {
        width: min(100%, 820px) !important;
        max-width: 820px !important;
    }

    body.parent-premium-page .parent-add-child-view .parent-onboarding-hero,
    body.parent-premium-page .parent-add-child-view .parent-child-setup.parent-add-child-card {
        width: min(100%, 780px) !important;
        max-width: 780px !important;
    }

    body.parent-premium-page .parent-add-child-view .parent-onboarding-hero {
        height: 400px !important;
        max-height: 400px !important;
    }
}
/* PARENT-CHILD-ID-PREMIUM-FINAL-20260724 */
body.parent-premium-page .parent-add-child-view:has(.parent-child-id-card) {
    display: block !important;
    width: min(100%, 880px) !important;
    max-width: 880px !important;
    margin: 0 auto !important;
    padding: clamp(14px, 3vw, 34px) 14px max(42px, env(safe-area-inset-bottom)) !important;
    color: #fff;
    background:
        radial-gradient(circle at 50% 0%, rgba(34, 211, 238, .20), transparent 23rem),
        linear-gradient(180deg, #06153f 0%, #02081f 100%) !important;
}

body.parent-premium-page .parent-add-child-view:has(.parent-child-id-card) > .form-message.success {
    width: min(100%, 430px);
    margin: 0 auto 10px !important;
    padding: 11px 14px !important;
    border: 1px solid rgba(52, 211, 153, .42) !important;
    border-radius: 18px !important;
    color: #d1fae5 !important;
    background: rgba(5, 46, 43, .74) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .20), inset 0 1px 0 rgba(255, 255, 255, .12) !important;
    font-size: .92rem;
    font-weight: 900;
}

body.parent-premium-page .parent-child-id-card {
    display: grid !important;
    width: min(100%, 430px) !important;
    max-width: 430px !important;
    margin: 0 auto !important;
    padding: 0 0 18px !important;
    overflow: hidden !important;
    border: 1px solid rgba(34, 211, 238, .42) !important;
    border-radius: 30px !important;
    color: #fff !important;
    background:
        linear-gradient(180deg, rgba(6, 18, 57, .68), rgba(2, 8, 31, .98)),
        #06133e !important;
    box-shadow: 0 24px 58px rgba(0, 10, 36, .48), inset 0 1px 0 rgba(255, 255, 255, .14) !important;
}

body.parent-premium-page .parent-child-id-card::before {
    background:
        radial-gradient(circle at 50% 4%, rgba(34, 211, 238, .24), transparent 16rem),
        radial-gradient(circle at 50% 52%, rgba(139, 92, 246, .12), transparent 20rem) !important;
}

body.parent-premium-page .parent-child-id-card > *:not(.parent-child-id-hero) {
    width: calc(100% - 32px);
    margin-left: auto;
    margin-right: auto;
}

body.parent-premium-page .parent-child-id-hero {
    display: block !important;
    width: 100% !important;
    height: clamp(230px, 56vw, 285px) !important;
    margin: 0 0 -2px !important;
    border-radius: 0 0 28px 28px;
    background:
        linear-gradient(180deg, rgba(2, 8, 31, .02) 0%, rgba(2, 8, 31, .08) 62%, rgba(2, 8, 31, .92) 100%),
        url('../images/robo-arena/parent-add-child-hero-v5.png') center top / cover no-repeat,
        #06133e !important;
    box-shadow: inset 0 -1px 0 rgba(34, 211, 238, .18);
}

body.parent-premium-page .parent-child-id-logo,
body.parent-premium-page .parent-child-id-robot {
    display: none !important;
}

body.parent-premium-page .parent-child-id-steps {
    gap: 8px !important;
    margin-top: 12px !important;
    margin-bottom: 14px !important;
}

body.parent-premium-page .parent-child-id-steps span {
    min-height: 48px !important;
    padding: 0 8px !important;
    border-color: rgba(76, 127, 215, .52) !important;
    color: rgba(210, 220, 242, .82) !important;
    background: rgba(8, 22, 58, .82) !important;
    font-size: .78rem !important;
    line-height: 1.1;
}

body.parent-premium-page .parent-child-id-steps .is-complete,
body.parent-premium-page .parent-child-id-steps .is-active {
    color: #fff !important;
    border-color: rgba(34, 211, 238, .70) !important;
    background: linear-gradient(135deg, #14b8a6, #0ea5e9) !important;
    box-shadow: 0 10px 22px rgba(14, 165, 233, .20) !important;
}

body.parent-premium-page .parent-child-id-steps strong {
    width: 26px !important;
    height: 26px !important;
    color: #fff !important;
    background: rgba(255, 255, 255, .18) !important;
}

body.parent-premium-page .parent-child-id-heading {
    margin-top: 2px !important;
    text-align: center !important;
}

body.parent-premium-page .parent-child-id-heading .eyebrow {
    margin-bottom: 8px !important;
    color: #22d3ee !important;
    font-size: .78rem !important;
    font-weight: 1000 !important;
    letter-spacing: .08em !important;
}

body.parent-premium-page .parent-child-id-heading h2 {
    margin: 0 !important;
    color: #fff !important;
    font-size: clamp(2rem, 9vw, 2.8rem) !important;
    line-height: 1.03 !important;
    text-transform: none !important;
    text-shadow: 0 4px 14px rgba(0, 0, 0, .32) !important;
}

body.parent-premium-page .parent-child-id-heading p:not(.eyebrow) {
    max-width: 340px !important;
    margin: 9px auto 14px !important;
    color: rgba(226, 232, 255, .82) !important;
    font-size: .96rem !important;
    line-height: 1.45 !important;
}

body.parent-premium-page .parent-child-id-summary,
body.parent-premium-page .parent-child-id-display,
body.parent-premium-page .parent-child-id-note,
body.parent-premium-page .parent-child-id-error {
    border-color: rgba(76, 127, 215, .56) !important;
    border-radius: 20px !important;
    background: rgba(8, 22, 58, .86) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 14px 32px rgba(0, 0, 0, .20) !important;
}

body.parent-premium-page .parent-child-id-summary {
    grid-template-columns: 64px minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 13px !important;
}

body.parent-premium-page .parent-child-id-summary .child-card-photo,
body.parent-premium-page .parent-child-id-summary img.child-card-photo {
    width: 60px !important;
    height: 60px !important;
    border: 2px solid rgba(34, 211, 238, .70) !important;
    border-radius: 18px !important;
    background: rgba(5, 15, 44, .70) !important;
}

body.parent-premium-page .parent-child-id-summary strong {
    color: #fff !important;
    font-size: 1.2rem !important;
    font-weight: 1000 !important;
}

body.parent-premium-page .parent-child-id-summary span:not(.parent-child-id-saved) {
    color: rgba(226, 232, 255, .72) !important;
}

body.parent-premium-page .parent-child-id-saved {
    min-height: 40px !important;
    justify-content: flex-start !important;
    padding: 8px 13px !important;
    color: #042f2e !important;
    background: linear-gradient(135deg, #6ee7b7, #34d399) !important;
    font-size: .86rem !important;
    text-align: left !important;
}

body.parent-premium-page .parent-child-id-display {
    margin-top: 14px !important;
    padding: 15px 12px 13px !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(34, 211, 238, .18), transparent 14rem),
        rgba(5, 16, 48, .94) !important;
}

body.parent-premium-page .parent-child-id-display p {
    margin-bottom: 11px !important;
    color: #67e8f9 !important;
    font-size: .78rem !important;
    letter-spacing: .12em !important;
}

body.parent-premium-page .parent-child-id-value {
    grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr) !important;
    gap: 8px !important;
}

body.parent-premium-page .parent-child-id-value .child-id__group {
    min-width: 0 !important;
    min-height: clamp(68px, 18vw, 82px) !important;
    border-color: rgba(34, 211, 238, .42) !important;
    border-radius: 18px !important;
    color: #fff !important;
    background: linear-gradient(180deg, #082762, #051a44) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 10px 22px rgba(0, 0, 0, .22) !important;
    font-size: clamp(2rem, 11vw, 3.2rem) !important;
    font-weight: 1000 !important;
    letter-spacing: .02em !important;
    text-shadow: 0 3px 0 rgba(0, 0, 0, .28) !important;
    white-space: nowrap !important;
}

body.parent-premium-page .parent-child-id-divider {
    justify-self: center !important;
    width: 14px !important;
    background: rgba(226, 232, 255, .58) !important;
}

body.parent-premium-page .parent-child-id-display small,
body.parent-premium-page .parent-child-id-profile-hint {
    color: rgba(226, 232, 255, .70) !important;
}

body.parent-premium-page .parent-child-id-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

body.parent-premium-page .parent-child-id-action,
body.parent-premium-page .parent-child-id-help-button {
    min-height: 48px !important;
    border-color: rgba(34, 211, 238, .42) !important;
    color: #dff8ff !important;
    background: rgba(8, 33, 77, .84) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10) !important;
}

body.parent-premium-page .parent-child-id-note {
    padding: 13px !important;
}

body.parent-premium-page .parent-child-id-note--warning {
    border-color: rgba(255, 211, 79, .48) !important;
    background: rgba(63, 43, 10, .52) !important;
}

body.parent-premium-page .parent-child-id-primary-row {
    gap: 10px !important;
}

body.parent-premium-page .parent-child-id-primary-row .parent-main-cta {
    min-height: 58px !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, #14b8a6, #0ea5e9) !important;
    box-shadow: 0 16px 30px rgba(14, 165, 233, .25) !important;
}

@media (min-width: 700px) {
    body.parent-premium-page .parent-add-child-view:has(.parent-child-id-card) {
        width: min(100%, 920px) !important;
        max-width: 920px !important;
    }

    body.parent-premium-page .parent-child-id-card {
        width: min(100%, 760px) !important;
        max-width: 760px !important;
    }

    body.parent-premium-page .parent-child-id-hero {
        height: 330px !important;
        background-position: center top !important;
    }

    body.parent-premium-page .parent-child-id-card > *:not(.parent-child-id-hero) {
        width: calc(100% - 56px);
    }

    body.parent-premium-page .parent-child-id-summary {
        grid-template-columns: 72px minmax(0, 1fr) auto !important;
    }

    body.parent-premium-page .parent-child-id-saved {
        grid-column: auto !important;
        justify-content: center !important;
    }

    body.parent-premium-page .parent-child-id-actions {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    body.parent-premium-page .parent-child-id-primary-row {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr) !important;
    }
}

@media (min-width: 980px) {
    body.parent-premium-page .parent-child-id-card {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: min(100%, 820px) !important;
        max-width: 820px !important;
        gap: 0 !important;
        align-items: start !important;
    }

    body.parent-premium-page .parent-child-id-steps,
    body.parent-premium-page .parent-child-id-heading,
    body.parent-premium-page .parent-child-id-summary,
    body.parent-premium-page .parent-child-id-display,
    body.parent-premium-page .parent-child-id-actions,
    body.parent-premium-page .parent-child-id-status,
    body.parent-premium-page .parent-child-id-note,
    body.parent-premium-page .parent-child-id-profile-hint,
    body.parent-premium-page .parent-child-id-primary-row,
    body.parent-premium-page .parent-child-id-error {
        grid-column: 1 !important;
    }
}

@media (max-width: 390px) {
    body.parent-premium-page .parent-child-id-card > *:not(.parent-child-id-hero) {
        width: calc(100% - 24px);
    }

    body.parent-premium-page .parent-child-id-steps span {
        min-height: 44px !important;
        font-size: .70rem !important;
    }

    body.parent-premium-page .parent-child-id-value .child-id__group {
        font-size: clamp(1.75rem, 10vw, 2.45rem) !important;
    }
}

/* CHILD ARENA PREMIUM DARK FIX 20260724 */
.robo-arena .child-arena-premium {
    width: min(100%, 1180px);
    min-height: 100dvh;
    gap: 18px;
    padding: 12px clamp(10px, 2.4vw, 24px) 28px;
    color: #fff;
    background:
        radial-gradient(circle at 50% 0%, rgba(34, 211, 238, .34), transparent 32%),
        linear-gradient(180deg, rgba(3, 14, 43, .22), rgba(2, 8, 28, .94) 46%, #030b27),
        url("../images/robo-arena/game-arena-premium-background.png") center top / cover no-repeat;
}
.robo-arena .child-arena-premium .ra-live-arena {
    overflow: hidden;
    color: #fff;
    background: linear-gradient(180deg, rgba(8, 24, 72, .86), rgba(4, 11, 38, .95));
    border: 1px solid rgba(34, 211, 238, .62);
    border-radius: 28px;
    box-shadow: 0 24px 55px rgba(0, 0, 0, .38), 0 0 36px rgba(34, 211, 238, .22);
    backdrop-filter: blur(10px);
}
.robo-arena .child-arena-premium .ra-live-header {
    grid-template-columns: 64px minmax(0, 1fr) 48px;
    min-height: 86px;
    padding: 8px 12px 10px;
    background:
        linear-gradient(180deg, rgba(17, 119, 214, .88), rgba(8, 31, 86, .96)),
        url("../images/robo-arena/game-arena-premium-background.png") center 18% / cover no-repeat;
    border-bottom: 1px solid rgba(34, 211, 238, .42);
}
.robo-arena .child-arena-premium .ra-live-header__mentor {
    width: 58px;
    height: 68px;
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .32));
}
.robo-arena .child-arena-premium .ra-live-header__mentor img {
    width: 58px;
    height: 66px;
}
.robo-arena .child-arena-premium .ra-live-header__title {
    display: grid;
    min-width: 0;
    justify-items: center;
    gap: 2px;
}
.robo-arena .child-arena-premium .ra-live-header__title img {
    width: min(178px, 48vw);
    max-height: 46px;
    object-fit: contain;
    filter: drop-shadow(0 7px 12px rgba(0, 0, 0, .42));
}
.robo-arena .child-arena-premium .ra-live-header h1 {
    color: #fff;
    font-size: clamp(1.05rem, 4.6vw, 1.5rem);
    letter-spacing: 0;
    text-shadow: 0 3px 0 rgba(0, 22, 74, .55);
}
.robo-arena .child-arena-premium .ra-live-icon-link {
    background: rgba(4, 15, 48, .54);
    border-color: rgba(118, 225, 255, .82);
    box-shadow: inset 0 0 16px rgba(34, 211, 238, .18), 0 9px 18px rgba(0, 0, 0, .25);
}
.robo-arena .child-arena-premium .ra-live-settings__menu {
    background: rgba(5, 15, 47, .98);
    border: 1px solid rgba(34, 211, 238, .46);
    box-shadow: 0 18px 32px rgba(0, 0, 0, .42);
}
.robo-arena .child-arena-premium .ra-live-content {
    gap: 10px;
    padding: 12px;
}
.robo-arena .child-arena-premium .ra-live-profile,
.robo-arena .child-arena-premium .ra-live-stats article,
.robo-arena .child-arena-premium .ra-live-action,
.robo-arena .child-arena-premium .ra-live-goal,
.robo-arena .child-arena-premium .arena-plan-strip,
.robo-arena .child-arena-premium .game-module-card,
.robo-arena .child-arena-premium .ra-live-utility a {
    color: #fff;
    background: linear-gradient(180deg, rgba(12, 31, 85, .92), rgba(4, 13, 45, .94));
    border: 1px solid rgba(69, 169, 255, .48);
    border-radius: 22px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 14px 28px rgba(0, 0, 0, .25);
}
.robo-arena .child-arena-premium .ra-live-profile {
    grid-template-columns: 74px minmax(0, 1fr) 78px;
    min-height: 106px;
    padding: 10px;
}
.robo-arena .child-arena-premium .ra-live-profile__avatar {
    width: 66px;
    height: 66px;
    background: radial-gradient(circle, #18e7ff, #063f8f 72%);
    border-color: #1df3ff;
    box-shadow: 0 0 18px rgba(29, 243, 255, .36);
}
.robo-arena .child-arena-premium .ra-live-profile__avatar img {
    width: 62px;
    height: 62px;
}
.robo-arena .child-arena-premium .ra-live-profile__data > strong {
    color: #fff;
    font-size: clamp(1rem, 4vw, 1.25rem);
    text-shadow: 0 2px 0 rgba(0, 0, 0, .25);
}
.robo-arena .child-arena-premium .ra-live-profile__data > span,
.robo-arena .child-arena-premium .ra-live-profile__data > small,
.robo-arena .child-arena-premium .ra-live-profile__energy small {
    color: rgba(232, 244, 255, .82);
}
.robo-arena .child-arena-premium .ra-live-profile__data > span b {
    color: #4deaff;
}
.robo-arena .child-arena-premium .ra-live-profile__energy {
    display: grid;
    min-width: 0;
    justify-items: center;
    align-content: center;
    gap: 2px;
    padding-left: 8px;
    border-left: 1px solid rgba(101, 191, 255, .35);
    text-align: center;
}
.robo-arena .child-arena-premium .ra-live-profile__energy img {
    width: 38px;
    height: 38px;
    object-fit: contain;
}
.robo-arena .child-arena-premium .ra-live-profile__energy strong {
    color: #ffd54f;
    font-size: 1.08rem;
    line-height: 1;
}
.robo-arena .child-arena-premium .ra-live-profile__energy small {
    font-size: .52rem;
    font-weight: 950;
}
.robo-arena .child-arena-premium .ra-live-progress {
    height: 12px;
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .22);
}
.robo-arena .child-arena-premium .ra-live-progress i {
    background: linear-gradient(180deg, #ffe66d, #ffb300 72%, #ff8a00);
    box-shadow: 0 0 12px rgba(255, 209, 64, .5);
}
.robo-arena .child-arena-premium .ra-live-stats {
    gap: 8px;
}
.robo-arena .child-arena-premium .ra-live-stats article {
    grid-template-columns: 1fr;
    justify-items: center;
    min-height: 88px;
    gap: 2px;
    padding: 9px 6px;
    text-align: center;
}
.robo-arena .child-arena-premium .ra-live-stats article > span {
    grid-row: auto;
    width: 42px;
    height: 42px;
    background: radial-gradient(circle, rgba(255, 223, 82, .98), rgba(244, 146, 13, .96));
    border-color: rgba(255, 245, 172, .9);
    box-shadow: 0 0 16px rgba(255, 196, 36, .26);
}
.robo-arena .child-arena-premium .ra-live-stats article:nth-child(2) > span {
    background: radial-gradient(circle, rgba(255, 116, 76, .98), rgba(190, 43, 31, .96));
    border-color: rgba(255, 180, 137, .84);
}
.robo-arena .child-arena-premium .ra-live-stats strong {
    color: #fff;
    font-size: clamp(1.14rem, 5vw, 1.48rem);
    text-shadow: 0 2px 0 rgba(0, 0, 0, .28);
}
.robo-arena .child-arena-premium .ra-live-stats small {
    color: rgba(232, 244, 255, .85);
    font-size: .58rem;
}
.robo-arena .child-arena-premium .ra-live-actions {
    grid-template-columns: 1.08fr .96fr .96fr;
    gap: 8px;
}
.robo-arena .child-arena-premium .ra-live-action {
    min-height: 128px;
    gap: 5px;
    padding: 9px 6px;
    text-shadow: 0 2px 0 rgba(0, 0, 0, .22);
}
.robo-arena .child-arena-premium .ra-live-action.is-primary {
    background: linear-gradient(180deg, rgba(19, 210, 239, .97), rgba(0, 116, 225, .95));
    border-color: rgba(131, 242, 255, .95);
    box-shadow: 0 16px 28px rgba(0, 153, 255, .28), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.robo-arena .child-arena-premium .ra-live-action.is-reward {
    background: linear-gradient(180deg, rgba(255, 207, 57, .98), rgba(226, 124, 8, .96));
    border-color: rgba(255, 242, 151, .92);
    color: #082453;
    text-shadow: none;
}
.robo-arena .child-arena-premium .ra-live-action img {
    width: clamp(72px, 22vw, 104px);
    height: clamp(72px, 22vw, 104px);
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .28));
}
.robo-arena .child-arena-premium .ra-live-action strong {
    font-size: .78rem;
}
.robo-arena .child-arena-premium .ra-live-goal {
    grid-template-columns: 32px minmax(0, 1fr) auto 52px;
    min-height: 66px;
    gap: 8px;
    padding: 8px 9px;
}
.robo-arena .child-arena-premium .ra-live-goal > div > strong,
.robo-arena .child-arena-premium .ra-live-goal > small {
    color: #fff;
}
.robo-arena .child-arena-premium .ra-live-goal > small {
    color: rgba(232, 244, 255, .82);
}
.robo-arena .child-arena-premium .ra-live-goal__chest {
    width: 52px;
    height: 46px;
}
.robo-arena .child-arena-premium .ra-live-bottom-nav {
    min-height: 78px;
    padding: 7px 7px max(7px, env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(10, 30, 79, .96), rgba(4, 11, 39, .98));
    border-top: 1px solid rgba(34, 211, 238, .48);
}
.robo-arena .child-arena-premium .ra-live-bottom-nav a {
    color: rgba(230, 245, 255, .78);
    border-radius: 16px;
}
.robo-arena .child-arena-premium .ra-live-bottom-nav a.is-active {
    color: #fff;
    background: linear-gradient(180deg, #1ba9ff, #075dd7);
}
.robo-arena .child-arena-premium .ra-live-bottom-nav a.is-active::after {
    background: #ffd54f;
}
.robo-arena .child-arena-premium .ra-live-bottom-nav a.is-play {
    color: #fff;
}
.robo-arena .child-arena-premium .ra-live-bottom-nav a.is-play > span {
    background: linear-gradient(180deg, #18e8ff, #0875ff);
    border-color: rgba(255, 255, 255, .72);
    box-shadow: 0 0 18px rgba(24, 232, 255, .36);
}
.robo-arena .child-arena-premium .ra-smart-trainer,
.robo-arena .child-arena-premium .game-module-card,
.robo-arena .child-arena-premium .ra-live-utility a {
    border-radius: 24px;
}
.robo-arena .child-arena-premium .arena-plan-strip p,
.robo-arena .child-arena-premium .game-module-card > p {
    color: rgba(232, 244, 255, .82);
}
.robo-arena .child-arena-premium .arena-plan-strip .status-pill,
.robo-arena .child-arena-premium .module-world-tag,
.robo-arena .child-arena-premium .module-link-strip a {
    color: #5df3ff;
    background: rgba(6, 38, 95, .72);
    border-color: rgba(77, 234, 255, .42);
}
.robo-arena .child-arena-premium .ra-live-section-heading {
    color: #fff;
    text-align: center;
}
.robo-arena .child-arena-premium .ra-live-section-heading > span {
    color: #4deaff;
}
.robo-arena .child-arena-premium .module-reward-ribbon {
    color: #fff;
    background: rgba(255, 184, 27, .18);
    border-color: rgba(255, 213, 79, .44);
}
.robo-arena .child-arena-premium .game-module-stats span {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
}
@media (max-width: 430px) {
    .robo-arena .child-arena-premium {
        padding: 8px 8px 22px;
    }
    .robo-arena .child-arena-premium .ra-live-arena {
        border-radius: 24px;
    }
    .robo-arena .child-arena-premium .ra-live-content {
        gap: 8px;
        padding: 9px;
    }
    .robo-arena .child-arena-premium .ra-live-header {
        grid-template-columns: 52px minmax(0, 1fr) 44px;
        min-height: 78px;
        gap: 6px;
        padding: 7px 8px;
    }
    .robo-arena .child-arena-premium .ra-live-header__mentor,
    .robo-arena .child-arena-premium .ra-live-header__mentor img {
        width: 50px;
        height: 58px;
    }
    .robo-arena .child-arena-premium .ra-live-profile {
        grid-template-columns: 62px minmax(0, 1fr) 66px;
        min-height: 96px;
        gap: 7px;
        padding: 8px;
    }
    .robo-arena .child-arena-premium .ra-live-profile__avatar {
        width: 56px;
        height: 56px;
    }
    .robo-arena .child-arena-premium .ra-live-profile__avatar img {
        width: 52px;
        height: 52px;
    }
    .robo-arena .child-arena-premium .ra-live-profile__energy img {
        width: 31px;
        height: 31px;
    }
    .robo-arena .child-arena-premium .ra-live-stats article {
        min-height: 76px;
        padding: 7px 4px;
    }
    .robo-arena .child-arena-premium .ra-live-stats article > span {
        width: 34px;
        height: 34px;
    }
    .robo-arena .child-arena-premium .ra-live-stats img {
        width: 24px;
        height: 24px;
    }
    .robo-arena .child-arena-premium .ra-live-actions {
        gap: 7px;
    }
    .robo-arena .child-arena-premium .ra-live-action {
        min-height: 106px;
        padding: 7px 4px;
    }
    .robo-arena .child-arena-premium .ra-live-action img {
        width: 64px;
        height: 64px;
    }
    .robo-arena .child-arena-premium .ra-live-action strong {
        font-size: .66rem;
    }
    .robo-arena .child-arena-premium .ra-live-goal {
        grid-template-columns: 27px minmax(0, 1fr) 44px;
        grid-template-rows: auto auto;
        min-height: 62px;
    }
    .robo-arena .child-arena-premium .ra-live-goal > small {
        grid-column: 2;
        grid-row: 2;
        font-size: .58rem;
    }
    .robo-arena .child-arena-premium .ra-live-goal__chest {
        grid-column: 3;
        grid-row: 1 / 3;
        width: 42px;
        height: 38px;
    }
    .robo-arena .child-arena-premium .ra-live-bottom-nav a strong {
        font-size: .5rem;
    }
}
@media (min-width: 900px) {
    .robo-arena .child-arena-premium {
        grid-template-columns: minmax(380px, 430px) minmax(0, 1fr);
        align-items: start;
    }
    .robo-arena .child-arena-premium .ra-live-arena {
        position: sticky;
        top: 18px;
    }
    .robo-arena .child-arena-premium .arena-plan-strip,
    .robo-arena .child-arena-premium .ra-live-section-heading,
    .robo-arena .child-arena-premium .game-hub-grid,
    .robo-arena .child-arena-premium .ra-live-utility {
        min-width: 0;
    }
    .robo-arena .child-arena-premium .game-hub-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* CHILD ARENA HYBRID REFERENCE SHELL 20260724 */
.robo-arena .child-arena-premium {
    background:
        radial-gradient(circle at 50% 0%, rgba(0, 229, 255, .24), transparent 34%),
        linear-gradient(180deg, #06153f 0%, #03091f 58%, #010513 100%);
}
.robo-arena .child-arena-premium .ra-live-arena {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: #fff;
    background: #031038;
    border: 1px solid rgba(67, 210, 255, .74);
    border-radius: 30px;
    box-shadow: 0 24px 56px rgba(0, 0, 0, .46), 0 0 28px rgba(0, 221, 255, .2);
}
.robo-arena .child-arena-premium .ra-live-arena::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: url("../images/robo-arena/child-arena/reference-phone-shell.png") center top / 100% auto no-repeat;
    opacity: .62;
    image-rendering: auto;
}
.robo-arena .child-arena-premium .ra-live-arena::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(2, 9, 34, .18) 0 22%, rgba(2, 9, 34, .62) 34%, rgba(2, 9, 34, .92) 100%),
        radial-gradient(circle at 50% 12%, rgba(30, 226, 255, .18), transparent 38%);
    pointer-events: none;
}
.robo-arena .child-arena-premium .ra-live-header {
    position: relative;
    min-height: 92px;
    background: linear-gradient(180deg, rgba(0, 149, 231, .74), rgba(4, 21, 68, .62));
    border-bottom: 1px solid rgba(112, 226, 255, .42);
}
.robo-arena .child-arena-premium .ra-live-header__title img {
    max-width: 172px;
    max-height: 50px;
    object-fit: contain;
}
.robo-arena .child-arena-premium .ra-live-content,
.robo-arena .child-arena-premium .ra-live-bottom-nav {
    position: relative;
}
.robo-arena .child-arena-premium .ra-live-profile,
.robo-arena .child-arena-premium .ra-live-stats article,
.robo-arena .child-arena-premium .ra-live-action,
.robo-arena .child-arena-premium .ra-live-goal {
    background: linear-gradient(180deg, rgba(5, 18, 57, .96), rgba(6, 14, 45, .98));
    border-color: rgba(84, 203, 255, .58);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 12px 26px rgba(0, 0, 0, .34);
    backdrop-filter: blur(8px);
}
.robo-arena .child-arena-premium .ra-live-action img,
.robo-arena .child-arena-premium .ra-live-stats img,
.robo-arena .child-arena-premium .ra-live-goal img,
.robo-arena .child-arena-premium .ra-live-bottom-nav img {
    image-rendering: auto;
    transform: translateZ(0);
}
.robo-arena .child-arena-premium .ra-live-action img {
    width: min(92px, 24vw);
    height: min(92px, 24vw);
    object-fit: contain;
}
.robo-arena .child-arena-premium .ra-live-stats article > span {
    width: 46px;
    height: 46px;
    overflow: visible;
    background: transparent;
    border: 0;
    box-shadow: none;
}
.robo-arena .child-arena-premium .ra-live-stats img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    filter: drop-shadow(0 6px 9px rgba(0, 0, 0, .32));
}
.robo-arena .child-arena-premium .ra-live-goal__star {
    width: 36px;
    height: 36px;
    object-fit: contain;
}
.robo-arena .child-arena-premium .ra-live-goal__chest {
    width: 56px;
    height: 50px;
    object-fit: contain;
}
.robo-arena .child-arena-premium .ra-live-bottom-nav a > img,
.robo-arena .child-arena-premium .ra-live-bottom-nav a.is-play img {
    object-fit: contain;
}
@media (max-width: 430px) {
    .robo-arena .child-arena-premium .ra-live-arena {
        border-radius: 26px;
    }
    .robo-arena .child-arena-premium .ra-live-header {
        min-height: 86px;
    }
    .robo-arena .child-arena-premium .ra-live-action img {
        width: 66px;
        height: 66px;
    }
    .robo-arena .child-arena-premium .ra-live-stats article > span {
        width: 36px;
        height: 36px;
    }
    .robo-arena .child-arena-premium .ra-live-stats img {
        width: 34px;
        height: 34px;
    }
    .robo-arena .child-arena-premium .ra-live-goal__star {
        width: 28px;
        height: 28px;
    }
    .robo-arena .child-arena-premium .ra-live-goal__chest {
        width: 44px;
        height: 40px;
    }
}
/* PARENT REWARDS PREMIUM - master visual pack 20260724 */
.parent-premium-page .parent-rewards-management {
    --reward-bg: #06142f;
    --reward-panel: rgba(9, 27, 61, .94);
    --reward-panel-2: rgba(16, 47, 97, .92);
    --reward-cyan: #22d3ee;
    --reward-blue: #1682ff;
    --reward-purple: #963ce8;
    --reward-gold: #ffbd2e;
    color: #f8faff;
    background:
        radial-gradient(circle at 50% -8%, rgba(34, 211, 238, .28), transparent 32rem),
        linear-gradient(180deg, #061a3d 0%, #05091c 100%);
}

.parent-premium-page .parent-rewards-management .profile-hero.compact {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(92px, 160px);
    align-items: center;
    gap: 14px;
    min-height: 190px;
    border: 1px solid rgba(70, 154, 255, .5);
    border-radius: 28px;
    background:
        linear-gradient(90deg, rgba(5, 16, 42, .92), rgba(8, 35, 78, .7)),
        url('../images/robo-arena/game-arena-premium-background.png') center / cover no-repeat;
    box-shadow: 0 24px 70px rgba(0, 13, 45, .42);
}

.parent-premium-page .parent-rewards-management .profile-hero.compact::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 46%;
    background: linear-gradient(180deg, transparent, rgba(4, 9, 28, .72));
    pointer-events: none;
}

.parent-premium-page .parent-rewards-management .profile-hero.compact > div,
.parent-premium-page .parent-rewards-management .profile-hero.compact > img {
    position: relative;
    z-index: 1;
}

.parent-premium-page .parent-rewards-management .profile-hero.compact h1 {
    color: #fff;
    font-size: clamp(2rem, 8vw, 3.85rem);
    text-shadow: 0 3px 0 rgba(0, 31, 91, .85), 0 10px 22px rgba(0, 0, 0, .35);
}

.parent-premium-page .parent-rewards-management .profile-hero.compact p {
    max-width: 720px;
    color: rgba(234, 244, 255, .92);
}

.parent-rewards-hero-chest {
    width: min(38vw, 170px);
    justify-self: end;
    filter: drop-shadow(0 20px 24px rgba(0, 0, 0, .36));
}

.parent-reward-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 16px 0;
}

.parent-reward-summary-card {
    display: grid;
    min-height: 128px;
    padding: 14px;
    align-content: center;
    justify-items: center;
    gap: 6px;
    border: 1px solid rgba(70, 154, 255, .45);
    border-radius: 22px;
    color: #fff;
    text-align: center;
    text-decoration: none;
    background: linear-gradient(155deg, rgba(17, 47, 101, .96), rgba(7, 23, 56, .96));
    box-shadow: 0 16px 38px rgba(0, 13, 45, .3);
}

.parent-reward-summary-card img {
    width: 46px;
    height: 46px;
    object-fit: contain;
    filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .26));
}

.parent-reward-summary-card strong {
    color: var(--reward-gold);
    font-size: 2rem;
    line-height: 1;
}

.parent-reward-summary-card span {
    color: rgba(234, 244, 255, .85);
    font-size: .84rem;
    font-weight: 850;
}

.parent-premium-page .parent-rewards-management .panel,
.parent-premium-page .parent-rewards-management .parent-owned-rewards,
.parent-premium-page .parent-rewards-management .parent-custom-reward {
    border-color: rgba(70, 154, 255, .48);
    color: #f8faff;
    background: linear-gradient(155deg, rgba(17, 47, 101, .96), rgba(7, 23, 56, .96));
    box-shadow: 0 20px 54px rgba(0, 13, 45, .36);
}

.parent-rewards-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.parent-rewards-section-head h2,
.parent-rewards-section-head p {
    margin: 0;
}

.parent-rewards-section-head p:not(.eyebrow) {
    margin-top: 5px;
    color: rgba(234, 244, 255, .75);
}

.parent-reward-filter-bar {
    display: grid;
    grid-template-columns: 1fr 1fr minmax(160px, 1.2fr) 1fr auto;
    gap: 10px;
    align-items: end;
    margin-bottom: 16px;
}

.parent-reward-filter-bar label,
.parent-premium-page .parent-rewards-management .stack-form label {
    color: #fff;
    font-weight: 850;
}

.parent-reward-filter-bar input,
.parent-reward-filter-bar select,
.parent-premium-page .parent-rewards-management .stack-form input,
.parent-premium-page .parent-rewards-management .stack-form select,
.parent-premium-page .parent-rewards-management .stack-form textarea,
.parent-premium-page .parent-rewards-management .inline-form input,
.parent-premium-page .parent-rewards-management .inline-form select,
.parent-premium-page .parent-rewards-management .inline-form textarea {
    border: 1px solid rgba(70, 154, 255, .48);
    color: #fff;
    background: rgba(3, 13, 35, .72);
}

.parent-reward-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.parent-reward-card {
    overflow: hidden;
    display: grid;
    grid-template-rows: auto 1fr auto;
    border: 1px solid rgba(70, 154, 255, .48);
    border-radius: 24px;
    background: linear-gradient(160deg, rgba(11, 37, 80, .98), rgba(5, 12, 33, .98));
    box-shadow: 0 18px 44px rgba(0, 13, 45, .34);
}

.parent-reward-card__visual {
    position: relative;
    display: grid;
    min-height: 118px;
    place-items: center;
    background:
        radial-gradient(circle at 50% 42%, rgba(34, 211, 238, .34), transparent 54%),
        linear-gradient(135deg, rgba(22, 130, 255, .65), rgba(150, 60, 232, .34));
}

.parent-reward-card__visual img {
    width: 106px;
    height: 106px;
    object-fit: contain;
    filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .28));
}

.parent-reward-card__status {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 999px;
    color: #fff;
    background: rgba(2, 12, 33, .72);
    font-size: .74rem;
    font-weight: 900;
}

.parent-reward-card.is-active .parent-reward-card__status { color: #031b25; background: #37f2b0; }
.parent-reward-card.is-hidden .parent-reward-card__status { color: #fff; background: rgba(113, 131, 170, .8); }
.parent-reward-card.is-archived { opacity: .72; }

.parent-reward-card__body {
    display: grid;
    gap: 10px;
    padding: 14px;
}

.parent-reward-card__title-row {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 10px;
}

.parent-reward-card h3 {
    margin: 0;
    color: #fff;
    font-size: 1.22rem;
}

.parent-reward-card p {
    margin: 0;
    color: rgba(234, 244, 255, .78);
    line-height: 1.38;
}

.parent-reward-card__meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

.parent-reward-card__meta div {
    min-width: 0;
    padding: 9px;
    border: 1px solid rgba(70, 154, 255, .28);
    border-radius: 14px;
    background: rgba(2, 12, 33, .45);
}

.parent-reward-card__meta dt {
    color: rgba(234, 244, 255, .6);
    font-size: .68rem;
    font-weight: 850;
    text-transform: uppercase;
}

.parent-reward-card__meta dd {
    overflow-wrap: anywhere;
    margin: 2px 0 0;
    color: #fff;
    font-weight: 950;
}

.parent-reward-card__actions {
    display: flex;
    gap: 8px;
    padding: 0 14px 14px;
}

.parent-reward-card__actions .btn,
.parent-reward-card__actions form,
.parent-reward-card__actions button {
    flex: 1 1 0;
}

.parent-reward-empty-state {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 28px 14px;
    color: rgba(234, 244, 255, .78);
    text-align: center;
}

.parent-reward-empty-state img {
    width: 116px;
    height: 116px;
    object-fit: contain;
}

.parent-reward-empty-state h3,
.parent-reward-empty-state p {
    margin: 0;
}

@media (max-width: 900px) {
    .parent-reward-summary-grid,
    .parent-reward-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .parent-reward-filter-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .parent-premium-page .parent-rewards-management .profile-hero.compact {
        grid-template-columns: minmax(0, 1fr) 92px;
        min-height: 170px;
        padding: 18px;
    }

    .parent-rewards-hero-chest {
        width: 92px;
    }

    .parent-reward-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .parent-reward-summary-card {
        min-height: 104px;
        padding: 10px;
    }

    .parent-reward-summary-card img {
        width: 38px;
        height: 38px;
    }

    .parent-reward-filter-bar,
    .parent-reward-card-grid,
    .parent-reward-card__meta {
        grid-template-columns: 1fr;
    }

    .parent-rewards-section-head {
        display: grid;
    }
}
.parent-premium-page .parent-reward-edit-management {
    color: #f8faff;
    background:
        radial-gradient(circle at 50% -8%, rgba(150, 60, 232, .26), transparent 30rem),
        linear-gradient(180deg, #061a3d 0%, #05091c 100%);
}

.parent-premium-page .parent-reward-edit-management .parent-reward-edit-hero {
    border: 1px solid rgba(70, 154, 255, .5);
    border-radius: 28px;
    color: #fff;
    background:
        linear-gradient(90deg, rgba(5, 16, 42, .92), rgba(8, 35, 78, .74)),
        url('../images/robo-arena/game-arena-premium-background.png') center / cover no-repeat;
    box-shadow: 0 24px 70px rgba(0, 13, 45, .42);
}

.parent-premium-page .parent-reward-edit-management .parent-reward-edit-hero h1,
.parent-premium-page .parent-reward-edit-management .parent-reward-edit-hero p {
    color: #fff;
}

.parent-premium-page .parent-reward-edit-management .parent-reward-edit-panel,
.parent-premium-page .parent-reward-edit-management .danger-zone {
    border-color: rgba(70, 154, 255, .48);
    color: #f8faff;
    background: linear-gradient(155deg, rgba(17, 47, 101, .96), rgba(7, 23, 56, .96));
    box-shadow: 0 20px 54px rgba(0, 13, 45, .36);
}

.parent-premium-page .parent-reward-edit-management .stack-form input,
.parent-premium-page .parent-reward-edit-management .stack-form select,
.parent-premium-page .parent-reward-edit-management .stack-form textarea {
    border: 1px solid rgba(70, 154, 255, .48);
    color: #fff;
    background: rgba(3, 13, 35, .72);
}

.parent-premium-page .parent-reward-edit-management .danger-zone {
    border-color: rgba(255, 89, 103, .48);
}
/* PARENT ADD CHILD MASTER PACK STABILIZATION 20260724 */
body.parent-premium-page.parent-onboarding-page:has(.parent-add-child-view) .parent-topbar {
    display: none !important;
}

body.parent-premium-page .parent-add-child-view {
    width: min(100%, 520px) !important;
    max-width: 520px !important;
    margin: 0 auto !important;
    padding: max(12px, env(safe-area-inset-top)) 12px max(36px, env(safe-area-inset-bottom)) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
}

body.parent-premium-page .parent-add-child-view .parent-onboarding-hero {
    width: min(100%, 480px) !important;
    max-width: 480px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 720 / 1040 !important;
    margin: 0 auto -20px !important;
    background: url('../images/robo-arena/parent-add-child-hero-v5.png') center top / contain no-repeat, #06133e !important;
    border-radius: 28px !important;
}

body.parent-premium-page .parent-add-child-view .parent-onboarding-hero::after {
    background: linear-gradient(180deg, rgba(2,8,31,.02), transparent 68%, rgba(2,8,31,.28)) !important;
}

body.parent-premium-page .parent-add-child-view .parent-child-setup.parent-add-child-card {
    width: min(100%, 480px) !important;
    max-width: 480px !important;
    margin: 0 auto !important;
    overflow: visible !important;
    max-height: none !important;
}

body.parent-premium-page .parent-add-child-view .parent-avatar-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px 10px !important;
}

body.parent-premium-page .parent-add-child-view .parent-avatar-option {
    min-height: 94px !important;
}

body.parent-premium-page .parent-add-child-view .parent-avatar-visual {
    width: 68px !important;
    height: 68px !important;
    border-radius: 50% !important;
}

body.parent-premium-page .parent-add-child-view .parent-avatar-option:has(input:checked) .parent-avatar-visual::after {
    content: "\2713" !important;
    font-family: Arial, sans-serif !important;
}

@media (max-width: 390px) {
    body.parent-premium-page .parent-add-child-view .parent-avatar-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

body.parent-premium-page .parent-add-child-view:has(.parent-child-id-card) {
    width: min(100%, 520px) !important;
    max-width: 520px !important;
}

body.parent-premium-page .parent-child-id-card {
    width: min(100%, 480px) !important;
    max-width: 480px !important;
}

body.parent-premium-page .parent-child-id-hero {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 720 / 760 !important;
    background: url('../images/robo-arena/parent-add-child-hero-v5.png') center top / cover no-repeat, #06133e !important;
}

/* CHILD-ARENA-CLEAN-SCREEN-001: real HTML arena, no baked phone-shell UI. */
.robo-arena .child-arena-premium {
    width: min(100%, 1180px);
    min-height: 100dvh;
    margin: 0 auto;
    padding: 10px clamp(8px, 2vw, 22px) 28px;
    gap: 18px;
    color: #fff;
    background:
        radial-gradient(circle at 50% 0%, rgba(38, 220, 255, .28), transparent 33%),
        linear-gradient(180deg, rgba(3, 17, 57, .95), #02081f 58%, #010410 100%);
}

.robo-arena .child-arena-premium .ra-live-arena {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    color: #fff;
    background:
        linear-gradient(180deg, rgba(3, 18, 58, .2), rgba(3, 13, 43, .96) 34%, rgba(1, 7, 27, .98)),
        url("../images/robo-arena/game-arena-premium-background.png") center top / cover no-repeat;
    border: 2px solid rgba(41, 214, 255, .8);
    border-radius: 28px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .48), 0 0 28px rgba(0, 221, 255, .22);
}

.robo-arena .child-arena-premium .ra-live-arena::before {
    display: none;
}

.robo-arena .child-arena-premium .ra-live-arena::after {
    background:
        linear-gradient(180deg, rgba(3, 13, 43, .06) 0 20%, rgba(2, 8, 31, .58) 34%, rgba(2, 7, 28, .9) 100%),
        radial-gradient(circle at 50% 9%, rgba(31, 231, 255, .14), transparent 35%);
}

.robo-arena .child-arena-premium .ra-live-header {
    grid-template-columns: 58px minmax(0, 1fr) 46px;
    min-height: 74px;
    gap: 8px;
    padding: 7px 10px;
    background: linear-gradient(180deg, rgba(8, 167, 231, .9), rgba(5, 53, 137, .92));
    border-bottom: 1px solid rgba(104, 232, 255, .48);
}

.robo-arena .child-arena-premium .ra-live-header__mentor,
.robo-arena .child-arena-premium .ra-live-header__mentor img {
    width: 52px;
    height: 58px;
}

.robo-arena .child-arena-premium .ra-live-header__title img {
    display: none;
}

.robo-arena .child-arena-premium .ra-live-header h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.22rem, 5.2vw, 1.62rem);
    font-weight: 950;
    line-height: 1;
    letter-spacing: 0;
    text-shadow: 0 2px 0 rgba(0, 28, 83, .58);
}

.robo-arena .child-arena-premium .ra-live-icon-link {
    width: 44px;
    height: 44px;
    border-color: rgba(151, 238, 255, .86);
    background: rgba(5, 19, 57, .58);
    box-shadow: inset 0 0 16px rgba(42, 225, 255, .18), 0 8px 18px rgba(0, 0, 0, .24);
}

.robo-arena .child-arena-premium .ra-live-content {
    gap: 8px;
    padding: 9px 10px 10px;
}

.robo-arena .child-arena-premium .ra-live-profile,
.robo-arena .child-arena-premium .ra-live-stats article,
.robo-arena .child-arena-premium .ra-live-action,
.robo-arena .child-arena-premium .ra-live-goal {
    color: #fff;
    background: linear-gradient(180deg, rgba(5, 19, 58, .95), rgba(3, 10, 35, .98));
    border: 1px solid rgba(89, 208, 255, .62);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 12px 26px rgba(0, 0, 0, .34);
    backdrop-filter: blur(8px);
}

.robo-arena .child-arena-premium .ra-live-profile {
    grid-template-columns: 62px minmax(0, 1fr) 64px;
    min-height: 92px;
    gap: 8px;
    padding: 8px;
    border-radius: 20px;
}

.robo-arena .child-arena-premium .ra-live-profile__avatar {
    width: 56px;
    height: 56px;
    border: 2px solid #2bf4ff;
    background: radial-gradient(circle at 50% 35%, #1cecff, #064391 74%);
}

.robo-arena .child-arena-premium .ra-live-profile__avatar img {
    width: 52px;
    height: 52px;
}

.robo-arena .child-arena-premium .ra-live-profile__data {
    gap: 3px;
}

.robo-arena .child-arena-premium .ra-live-profile__data > strong {
    color: #fff;
    font-size: clamp(.98rem, 4.2vw, 1.2rem);
    line-height: 1.08;
}

.robo-arena .child-arena-premium .ra-live-profile__data > span {
    align-items: center;
    gap: 4px;
    color: rgba(232, 247, 255, .9);
    font-size: .62rem;
}

.robo-arena .child-arena-premium .ra-live-profile__data > span b {
    color: #49eaff;
}

.robo-arena .child-arena-premium .ra-live-profile__level-shield {
    width: 14px;
    height: 14px;
}

.robo-arena .child-arena-premium .ra-live-profile__data > small {
    color: rgba(232, 247, 255, .82);
    font-size: .62rem;
}

.robo-arena .child-arena-premium .ra-live-profile__energy {
    gap: 1px;
    min-width: 58px;
    padding-left: 6px;
    border-left: 1px solid rgba(104, 214, 255, .34);
}

.robo-arena .child-arena-premium .ra-live-profile__energy img {
    width: 29px;
    height: 29px;
}

.robo-arena .child-arena-premium .ra-live-profile__energy strong {
    color: #ffd84d;
    font-size: 1rem;
    white-space: nowrap;
}

.robo-arena .child-arena-premium .ra-live-profile__energy small {
    color: rgba(232, 247, 255, .76);
    font-size: .46rem;
}

.robo-arena .child-arena-premium .ra-live-progress {
    height: 10px;
    background: rgba(255, 255, 255, .2);
    border-color: rgba(255, 255, 255, .24);
}

.robo-arena .child-arena-premium .ra-live-stats {
    gap: 7px;
}

.robo-arena .child-arena-premium .ra-live-stats article {
    min-height: 78px;
    padding: 7px 4px;
    border-radius: 18px;
}

.robo-arena .child-arena-premium .ra-live-stats article > span {
    width: 36px;
    height: 36px;
}

.robo-arena .child-arena-premium .ra-live-stats img {
    width: 34px;
    height: 34px;
}

.robo-arena .child-arena-premium .ra-live-stats strong {
    color: #fff;
    font-size: clamp(1.03rem, 5.2vw, 1.42rem);
}

.robo-arena .child-arena-premium .ra-live-stats small {
    color: rgba(235, 247, 255, .85);
    font-size: .52rem;
}

.robo-arena .child-arena-premium .ra-live-actions {
    grid-template-columns: 1.08fr .96fr .96fr;
    gap: 7px;
}

.robo-arena .child-arena-premium .ra-live-action {
    min-height: 116px;
    gap: 4px;
    padding: 7px 5px;
    border-radius: 20px;
    text-decoration: none;
}

.robo-arena .child-arena-premium .ra-live-action.is-primary {
    background: linear-gradient(180deg, #21d5f1, #087ee6);
    border-color: rgba(143, 243, 255, .95);
}

.robo-arena .child-arena-premium .ra-live-action:not(.is-primary):not(.is-reward) {
    background: linear-gradient(180deg, rgba(8, 24, 70, .96), rgba(2, 9, 34, .98));
}

.robo-arena .child-arena-premium .ra-live-action.is-reward {
    color: #082453;
    background: linear-gradient(180deg, #ffdb51, #ef920d);
    border-color: rgba(255, 244, 168, .95);
}

.robo-arena .child-arena-premium .ra-live-action img {
    width: clamp(58px, 18vw, 76px);
    height: clamp(58px, 18vw, 76px);
}

.robo-arena .child-arena-premium .ra-live-action strong {
    color: inherit;
    font-size: .68rem;
}

.robo-arena .child-arena-premium .ra-live-goal {
    grid-template-columns: 28px minmax(0, 1fr) 42px;
    grid-template-rows: auto auto;
    min-height: 66px;
    gap: 6px;
    padding: 8px;
    border-radius: 20px;
}

.robo-arena .child-arena-premium .ra-live-goal > div {
    gap: 4px;
}

.robo-arena .child-arena-premium .ra-live-goal > div > strong {
    color: #fff;
    font-size: .72rem;
}

.robo-arena .child-arena-premium .ra-live-goal > small {
    grid-column: 2;
    grid-row: 2;
    color: rgba(232, 247, 255, .82);
    font-size: .55rem;
    white-space: normal;
}

.robo-arena .child-arena-premium .ra-live-goal__star {
    width: 27px;
    height: 27px;
}

.robo-arena .child-arena-premium .ra-live-goal__chest {
    grid-column: 3;
    grid-row: 1 / 3;
    width: 42px;
    height: 38px;
}

.robo-arena .child-arena-premium .ra-live-bottom-nav {
    min-height: 78px;
    padding: 7px 7px max(7px, env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(7, 22, 64, .98), rgba(3, 10, 35, .98));
    border-top: 1px solid rgba(77, 210, 255, .52);
}

.robo-arena .child-arena-premium .ra-live-bottom-nav a {
    min-height: 62px;
    color: rgba(232, 247, 255, .78);
    border-radius: 15px;
    text-decoration: none;
}

.robo-arena .child-arena-premium .ra-live-bottom-nav a > img {
    width: 25px;
    height: 25px;
}

.robo-arena .child-arena-premium .ra-live-bottom-nav a strong {
    font-size: .5rem;
}

.robo-arena .child-arena-premium .ra-live-bottom-nav a.is-active {
    color: #fff;
    background: linear-gradient(180deg, #1dafff, #0867df);
}

.robo-arena .child-arena-premium .ra-live-bottom-nav a.is-active::after {
    background: #ffd54f;
}

.robo-arena .child-arena-premium .ra-live-bottom-nav a.is-play > span {
    width: 54px;
    height: 54px;
    margin-top: -20px;
    background: linear-gradient(180deg, #1ee9ff, #0876ff);
    border-color: rgba(255, 255, 255, .76);
    box-shadow: 0 0 18px rgba(30, 233, 255, .36);
}

.robo-arena .child-arena-premium .ra-live-settings__menu {
    z-index: 20;
}

.robo-arena .child-arena-premium .ra-smart-trainer,
.robo-arena .child-arena-premium .game-module-card,
.robo-arena .child-arena-premium .ra-live-utility a {
    color: #fff;
    background: linear-gradient(180deg, rgba(5, 19, 58, .95), rgba(3, 10, 35, .98));
    border: 1px solid rgba(89, 208, 255, .46);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 14px 28px rgba(0, 0, 0, .24);
}

@media (max-width: 430px) {
    .robo-arena .child-arena-premium {
        gap: 14px;
        padding: 7px 7px 22px;
    }

    .robo-arena .child-arena-premium .ra-live-arena {
        border-radius: 24px;
    }
}

@media (max-width: 370px) {
    .robo-arena .child-arena-premium .ra-live-header {
        grid-template-columns: 48px minmax(0, 1fr) 42px;
        min-height: 70px;
    }

    .robo-arena .child-arena-premium .ra-live-header__mentor,
    .robo-arena .child-arena-premium .ra-live-header__mentor img {
        width: 46px;
        height: 52px;
    }

    .robo-arena .child-arena-premium .ra-live-profile {
        grid-template-columns: 54px minmax(0, 1fr) 62px;
    }

    .robo-arena .child-arena-premium .ra-live-profile__avatar {
        width: 50px;
        height: 50px;
    }

    .robo-arena .child-arena-premium .ra-live-profile__avatar img {
        width: 46px;
        height: 46px;
    }

    .robo-arena .child-arena-premium .ra-live-action {
        min-height: 106px;
    }
}

@media (min-width: 900px) {
    .robo-arena .child-arena-premium {
        grid-template-columns: minmax(380px, 460px) minmax(0, 1fr);
        align-items: start;
        gap: 30px;
    }

    .robo-arena .child-arena-premium .ra-live-arena {
        position: sticky;
        top: 18px;
        max-width: 460px;
    }
}

/* PARENT-ONBOARDING-THREE-STEPS-CLEAN-001 */
body.parent-premium-page.parent-onboarding-page {
    background:
        radial-gradient(circle at 50% -10%, rgba(34, 211, 238, .26), transparent 34%),
        linear-gradient(180deg, #05112f 0%, #071a41 46%, #020617 100%) !important;
}

body.parent-premium-page.parent-onboarding-page:has(.parent-add-child-view) .parent-topbar {
    display: none !important;
}

body.parent-premium-page .parent-add-child-view {
    width: min(100%, 1180px) !important;
    max-width: 1180px !important;
    min-height: 100dvh !important;
    margin: 0 auto !important;
    padding: clamp(12px, 2.2vw, 28px) clamp(10px, 2vw, 26px) max(28px, env(safe-area-inset-bottom)) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: clamp(12px, 2vw, 22px) !important;
    align-content: start !important;
    color: #fff !important;
}

body.parent-premium-page .parent-add-child-view > .form-message {
    width: min(100%, 760px);
    margin: 0 auto !important;
    border-radius: 18px;
}

body.parent-premium-page .parent-add-child-view .onboarding-progress-panel {
    width: min(100%, 760px) !important;
    max-width: 760px !important;
    margin: 0 auto !important;
    padding: 14px !important;
    color: #f8fbff !important;
    background: linear-gradient(145deg, rgba(9, 27, 61, .94), rgba(9, 20, 48, .96)) !important;
    border: 1px solid rgba(34, 211, 238, .34) !important;
    border-radius: 24px !important;
    box-shadow: 0 20px 54px rgba(0, 9, 32, .36) !important;
}

body.parent-premium-page .parent-add-child-view .onboarding-progress-panel h2,
body.parent-premium-page .parent-add-child-view .onboarding-progress-panel .muted {
    display: none !important;
}

body.parent-premium-page .parent-add-child-view .onboarding-steps {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

body.parent-premium-page .parent-add-child-view .onboarding-steps article,
body.parent-premium-page .parent-add-child-view .onboarding-steps > div {
    min-height: 86px !important;
    padding: 12px 8px !important;
    display: grid !important;
    place-items: center !important;
    gap: 5px !important;
    text-align: center !important;
    color: #d9e8ff !important;
    background: rgba(6, 18, 48, .72) !important;
    border: 1px solid rgba(73, 152, 255, .34) !important;
    border-radius: 18px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

body.parent-premium-page .parent-add-child-view .onboarding-steps article > span,
body.parent-premium-page .parent-add-child-view .onboarding-steps > div > strong {
    width: 30px !important;
    height: 30px !important;
    display: grid !important;
    place-items: center !important;
    color: #001d40 !important;
    background: linear-gradient(180deg, #69e9ff, #168bff) !important;
    border-radius: 999px !important;
    font-weight: 1000 !important;
}

body.parent-premium-page .parent-add-child-view .onboarding-steps .is-current {
    border-color: rgba(45, 229, 255, .9) !important;
    box-shadow: 0 0 0 3px rgba(34, 211, 238, .16), 0 0 22px rgba(34, 211, 238, .22) !important;
}

body.parent-premium-page .parent-add-child-view .onboarding-steps .is-complete {
    border-color: rgba(52, 241, 178, .78) !important;
    background: rgba(4, 72, 84, .62) !important;
}

body.parent-premium-page .parent-add-child-view .onboarding-steps small,
body.parent-premium-page .parent-add-child-view .onboarding-steps span {
    color: inherit !important;
}

body.parent-premium-page .parent-add-child-view .parent-onboarding-hero {
    width: min(100%, 500px) !important;
    max-width: 500px !important;
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 720 / 1040 !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    color: #fff !important;
    background:
        linear-gradient(180deg, rgba(4, 16, 45, .03), rgba(3, 10, 33, .18) 56%, rgba(3, 10, 33, .58)),
        url('../images/robo-arena/parent-add-child-hero-v5.png') center top / cover no-repeat,
        #06133e !important;
    border: 1px solid rgba(34, 211, 238, .55) !important;
    border-radius: 28px !important;
    box-shadow: 0 24px 70px rgba(0, 10, 34, .42) !important;
}

body.parent-premium-page .parent-add-child-view .parent-onboarding-hero > div,
body.parent-premium-page .parent-add-child-view .parent-onboarding-logo,
body.parent-premium-page .parent-add-child-view .parent-onboarding-mentor {
    display: none !important;
}

body.parent-premium-page .parent-add-child-view .parent-add-step-counter {
    top: 18px !important;
    right: 18px !important;
    color: #fff !important;
    background: rgba(6, 15, 43, .88) !important;
    border: 1px solid rgba(255, 255, 255, .22) !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .22) !important;
}

body.parent-premium-page .parent-add-child-view .parent-child-setup.parent-add-child-card,
body.parent-premium-page .parent-child-id-card,
body.parent-premium-page .parent-reward-gate {
    width: min(100%, 760px) !important;
    max-width: 760px !important;
    margin: 0 auto !important;
    color: #f8fbff !important;
    background:
        linear-gradient(135deg, rgba(33, 64, 116, .82), rgba(5, 18, 48, .96)),
        linear-gradient(120deg, transparent, rgba(255, 255, 255, .06), transparent) !important;
    border: 1px solid rgba(76, 154, 255, .54) !important;
    border-radius: 28px !important;
    box-shadow: 0 24px 70px rgba(0, 10, 34, .46) !important;
}

body.parent-premium-page .parent-add-child-view .parent-child-setup.parent-add-child-card {
    padding: clamp(24px, 4vw, 42px) !important;
    overflow: visible !important;
}

body.parent-premium-page .parent-add-child-view .parent-child-setup.parent-add-child-card .setup-mentor {
    display: none !important;
}

body.parent-premium-page .parent-add-child-view .parent-child-setup.parent-add-child-card h2,
body.parent-premium-page .parent-child-id-card h2,
body.parent-premium-page .parent-reward-gate h2 {
    margin: 0 0 8px !important;
    color: #fff !important;
    font-size: clamp(2.05rem, 5.6vw, 3.35rem) !important;
    line-height: .98 !important;
    letter-spacing: 0 !important;
    text-shadow: 0 3px 0 rgba(3, 20, 62, .42) !important;
}

body.parent-premium-page .parent-add-child-view .eyebrow {
    color: #22e2ff !important;
    letter-spacing: .12em !important;
}

body.parent-premium-page .parent-add-child-view .parent-add-field label,
body.parent-premium-page .parent-add-child-view .parent-add-choice legend,
body.parent-premium-page .parent-add-child-view .parent-range-heading label {
    color: #fff !important;
}

body.parent-premium-page .parent-add-child-view .parent-add-input-shell,
body.parent-premium-page .parent-add-child-view .parent-choice-chip span,
body.parent-premium-page .parent-add-child-view .parent-range-field,
body.parent-premium-page .parent-add-child-view .parent-add-info,
body.parent-premium-page .parent-child-id-display,
body.parent-premium-page .parent-child-id-note {
    color: #f8fbff !important;
    background: rgba(3, 13, 35, .72) !important;
    border-color: rgba(74, 154, 255, .52) !important;
}

body.parent-premium-page .parent-add-child-view input,
body.parent-premium-page .parent-add-child-view textarea,
body.parent-premium-page .parent-add-child-view select {
    color: #fff !important;
}

body.parent-premium-page .parent-add-child-view ::placeholder {
    color: rgba(225, 235, 255, .7) !important;
}

body.parent-premium-page .parent-add-child-view .parent-avatar-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px 12px !important;
}

body.parent-premium-page .parent-add-child-view .parent-avatar-option {
    min-height: 104px !important;
    color: #eaf4ff !important;
}

body.parent-premium-page .parent-add-child-view .parent-avatar-visual {
    width: 76px !important;
    height: 76px !important;
    border-radius: 50% !important;
    background: rgba(8, 24, 58, .82) !important;
    border: 2px solid rgba(75, 151, 255, .62) !important;
}

body.parent-premium-page .parent-add-child-view .parent-avatar-visual img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: inherit !important;
}

body.parent-premium-page .parent-add-child-view .parent-avatar-option:has(input:checked) .parent-avatar-visual {
    border-color: #21e7ff !important;
    box-shadow: 0 0 0 4px rgba(33, 231, 255, .16), 0 0 24px rgba(33, 231, 255, .34) !important;
}

body.parent-premium-page .parent-add-child-view .parent-avatar-option:has(input:checked) .parent-avatar-visual::after {
    content: "\2713" !important;
    display: grid !important;
    place-items: center !important;
    right: -2px !important;
    bottom: -2px !important;
    width: 26px !important;
    height: 26px !important;
    color: #fff !important;
    background: linear-gradient(180deg, #34f1b2, #0aa37f) !important;
    border: 2px solid #071a41 !important;
    border-radius: 999px !important;
    font-family: Arial, sans-serif !important;
    font-weight: 900 !important;
}

body.parent-premium-page .parent-child-id-card {
    overflow: hidden !important;
    padding: 0 0 clamp(24px, 4vw, 38px) !important;
}

body.parent-premium-page .parent-child-id-hero {
    width: 100% !important;
    height: clamp(180px, 31vw, 290px) !important;
    min-height: 180px !important;
    aspect-ratio: auto !important;
    background:
        linear-gradient(180deg, rgba(4, 18, 49, .05), rgba(4, 12, 34, .36)),
        url('../images/robo-arena/parent-add-child-hero-v5.png') center top / cover no-repeat,
        #06133e !important;
    border-radius: 0 0 26px 26px !important;
}

body.parent-premium-page .parent-child-id-card > *:not(.parent-child-id-hero) {
    width: min(100% - 32px, 640px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body.parent-premium-page .parent-child-id-heading,
body.parent-premium-page .parent-child-id-summary,
body.parent-premium-page .parent-child-id-display,
body.parent-premium-page .parent-child-id-actions,
body.parent-premium-page .parent-child-id-note,
body.parent-premium-page .parent-child-id-primary-row {
    margin-top: 16px !important;
}

body.parent-premium-page .parent-child-id-steps {
    margin-top: 18px !important;
}

body.parent-premium-page .parent-child-id-summary {
    background: rgba(6, 18, 48, .82) !important;
    border: 1px solid rgba(73, 152, 255, .4) !important;
    border-radius: 22px !important;
}

body.parent-premium-page .parent-child-id-value {
    gap: 12px !important;
}

body.parent-premium-page .parent-child-id-value .child-id__group {
    min-width: 0 !important;
    flex: 1 1 0 !important;
    color: #fff !important;
    background: linear-gradient(180deg, #082b70, #04183f) !important;
    border: 1px solid rgba(68, 170, 255, .72) !important;
    border-radius: 16px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 12px 24px rgba(0, 0, 0, .22) !important;
}

body.parent-premium-page .parent-reward-gate {
    padding: clamp(24px, 4vw, 42px) !important;
    text-align: center !important;
    overflow: hidden !important;
}

body.parent-premium-page .parent-reward-gate__visual {
    min-height: 170px;
    margin: -10px -10px 16px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(100px, 160px);
    gap: 10px;
    align-items: center;
    background:
        radial-gradient(circle at 82% 32%, rgba(255, 198, 48, .36), transparent 26%),
        linear-gradient(135deg, rgba(8, 36, 83, .76), rgba(6, 18, 49, .2));
    border-radius: 24px;
}

body.parent-premium-page .parent-reward-gate__logo {
    width: min(88%, 300px);
    justify-self: center;
    filter: drop-shadow(0 16px 24px rgba(0, 0, 0, .34));
}

body.parent-premium-page .parent-reward-gate__chest {
    width: min(88%, 150px);
    justify-self: center;
    filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .36));
}

body.parent-premium-page .parent-reward-gate > p:not(.eyebrow) {
    max-width: 600px;
    margin: 0 auto 16px !important;
    color: #dbeafe !important;
}

body.parent-premium-page .parent-reward-gate__meter {
    height: 18px;
    padding: 3px;
    overflow: hidden;
    background: rgba(2, 10, 30, .7);
    border: 1px solid rgba(73, 152, 255, .46);
    border-radius: 999px;
}

body.parent-premium-page .parent-reward-gate__meter span {
    display: block;
    height: 100%;
    min-width: 8px;
    background: linear-gradient(90deg, #22d3ee, #34f1b2, #ffcf40);
    border-radius: inherit;
    box-shadow: 0 0 18px rgba(52, 241, 178, .36);
}

body.parent-premium-page .parent-reward-gate__count {
    margin: 12px auto 18px;
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    color: #eaf4ff;
}

body.parent-premium-page .parent-reward-gate__count strong {
    color: #ffcf40;
    font-size: 1.7rem;
}

body.parent-premium-page .parent-reward-gate__checks {
    max-width: 560px;
    margin: 0 auto 20px;
    padding: 0;
    display: grid;
    gap: 10px;
    list-style: none;
    text-align: left;
}

body.parent-premium-page .parent-reward-gate__checks li {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    color: #f8fbff;
}

body.parent-premium-page .parent-reward-gate__checks span {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    color: #031b25;
    background: linear-gradient(180deg, #69e9ff, #168bff);
    border-radius: 999px;
    font-weight: 1000;
}

body.parent-premium-page .parent-reward-gate .parent-main-cta,
body.parent-premium-page .parent-child-id-card .parent-main-cta,
body.parent-premium-page .parent-add-child-view .parent-add-submit {
    min-height: 58px !important;
    color: #fff !important;
    background: linear-gradient(180deg, #24e4c0, #1095d8) !important;
    border: 1px solid rgba(111, 255, 238, .76) !important;
    border-radius: 18px !important;
    box-shadow: 0 14px 28px rgba(0, 184, 216, .26) !important;
}

@media (min-width: 900px) {
    body.parent-premium-page .parent-add-child-view.parent-onboarding-step-child {
        grid-template-columns: minmax(340px, 500px) minmax(430px, 1fr) !important;
        grid-template-areas:
            "hero progress"
            "hero form" !important;
        align-items: start !important;
        column-gap: clamp(28px, 5vw, 64px) !important;
    }

    body.parent-premium-page .parent-add-child-view.parent-onboarding-step-child .parent-onboarding-hero {
        grid-area: hero !important;
        position: sticky !important;
        top: 24px !important;
    }

    body.parent-premium-page .parent-add-child-view.parent-onboarding-step-child .onboarding-progress-panel {
        grid-area: progress !important;
        width: 100% !important;
        max-width: none !important;
    }

    body.parent-premium-page .parent-add-child-view.parent-onboarding-step-child .parent-child-setup.parent-add-child-card {
        grid-area: form !important;
        width: 100% !important;
        max-width: none !important;
    }

    body.parent-premium-page .parent-add-child-view.parent-onboarding-step-id,
    body.parent-premium-page .parent-add-child-view.parent-onboarding-step-rewards {
        width: min(100%, 860px) !important;
        max-width: 860px !important;
        place-items: start center !important;
    }
}

@media (max-width: 760px) {
    body.parent-premium-page .parent-add-child-view {
        padding: 10px 10px 28px !important;
    }

    body.parent-premium-page .parent-add-child-view .parent-onboarding-hero {
        width: min(100%, 430px) !important;
        aspect-ratio: 720 / 880 !important;
        border-radius: 24px !important;
    }

    body.parent-premium-page .parent-add-child-view .onboarding-progress-panel {
        padding: 10px !important;
        border-radius: 20px !important;
    }

    body.parent-premium-page .parent-add-child-view .onboarding-steps {
        gap: 7px !important;
    }

    body.parent-premium-page .parent-add-child-view .onboarding-steps article,
    body.parent-premium-page .parent-add-child-view .onboarding-steps > div {
        min-height: 78px !important;
        padding: 9px 5px !important;
        font-size: .78rem !important;
    }

    body.parent-premium-page .parent-add-child-view .parent-child-setup.parent-add-child-card,
    body.parent-premium-page .parent-child-id-card,
    body.parent-premium-page .parent-reward-gate {
        border-radius: 24px !important;
    }

    body.parent-premium-page .parent-add-child-view .parent-child-setup.parent-add-child-card {
        padding: 22px 18px !important;
    }

    body.parent-premium-page .parent-add-child-view .parent-avatar-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 12px 8px !important;
    }

    body.parent-premium-page .parent-add-child-view .parent-avatar-option {
        min-height: 92px !important;
        font-size: .78rem !important;
    }

    body.parent-premium-page .parent-add-child-view .parent-avatar-visual {
        width: 62px !important;
        height: 62px !important;
    }

    body.parent-premium-page .parent-child-id-card > *:not(.parent-child-id-hero) {
        width: min(100% - 24px, 640px) !important;
    }

    body.parent-premium-page .parent-child-id-value {
        gap: 8px !important;
    }

    body.parent-premium-page .parent-child-id-value .child-id__group {
        font-size: clamp(2.15rem, 13vw, 3.4rem) !important;
    }

    body.parent-premium-page .parent-reward-gate {
        padding: 22px 16px !important;
    }

    body.parent-premium-page .parent-reward-gate__visual {
        grid-template-columns: 1fr 112px;
        min-height: 138px;
    }
}

@media (max-width: 380px) {
    body.parent-premium-page .parent-add-child-view .parent-avatar-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* CHILD-ARENA-REFERENCE-REALIGN-001: restore the canonical bright mobile Moja arena. */
.robo-arena .child-arena-premium {
    width: min(100%, 1180px) !important;
    min-height: 100dvh !important;
    margin: 0 auto !important;
    padding: clamp(10px, 2vw, 24px) !important;
    display: grid !important;
    grid-template-columns: minmax(360px, 430px) minmax(0, 1fr) !important;
    gap: clamp(18px, 3vw, 34px) !important;
    align-items: start !important;
    color: #08245a !important;
    background:
        radial-gradient(circle at 12% 0%, rgba(255, 210, 76, .25), transparent 28%),
        radial-gradient(circle at 90% 4%, rgba(34, 211, 238, .34), transparent 30%),
        linear-gradient(180deg, #eaffff 0%, #f7fdff 48%, #e9f9ff 100%) !important;
}

.robo-arena .child-arena-premium .ra-live-arena {
    width: min(100%, 430px) !important;
    min-height: min(844px, calc(100dvh - 20px)) !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    isolation: isolate !important;
    color: #08245a !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(247, 253, 255, .94) 150px, rgba(247, 253, 255, .98) 100%),
        url("../images/robo-arena/game-arena-background.png") center top / 120% auto no-repeat,
        #f6fdff !important;
    border: 3px solid #19c9ec !important;
    border-radius: 28px !important;
    box-shadow: 0 24px 58px rgba(8, 50, 93, .18), 0 0 0 7px rgba(195, 244, 255, .65) !important;
    backdrop-filter: none !important;
}

.robo-arena .child-arena-premium .ra-live-arena::before,
.robo-arena .child-arena-premium .ra-live-arena::after {
    display: none !important;
}

.robo-arena .child-arena-premium .ra-live-header {
    min-height: 74px !important;
    padding: 7px 10px !important;
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) 46px !important;
    gap: 8px !important;
    align-items: center !important;
    color: #fff !important;
    background: linear-gradient(180deg, #12aee9 0%, #0870d8 100%) !important;
    border-bottom: 2px solid rgba(0, 107, 190, .45) !important;
    box-shadow: 0 10px 20px rgba(0, 101, 188, .18) !important;
}

.robo-arena .child-arena-premium .ra-live-header__mentor,
.robo-arena .child-arena-premium .ra-live-header__mentor img {
    width: 54px !important;
    height: 58px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 5px 7px rgba(0, 57, 116, .25)) !important;
}

.robo-arena .child-arena-premium .ra-live-header__title {
    display: grid !important;
    justify-items: center !important;
    align-items: center !important;
    min-width: 0 !important;
}

.robo-arena .child-arena-premium .ra-live-header__title img {
    display: none !important;
}

.robo-arena .child-arena-premium .ra-live-header h1 {
    margin: 0 !important;
    color: #fff !important;
    font-size: clamp(1.28rem, 5vw, 1.62rem) !important;
    font-weight: 1000 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-shadow: 0 2px 0 rgba(0, 45, 103, .55) !important;
}

.robo-arena .child-arena-premium .ra-live-icon-link {
    width: 44px !important;
    height: 44px !important;
    display: grid !important;
    place-items: center !important;
    border: 2px solid rgba(193, 249, 255, .92) !important;
    border-radius: 999px !important;
    background: rgba(0, 111, 201, .42) !important;
    box-shadow: inset 0 0 18px rgba(255, 255, 255, .16), 0 8px 16px rgba(0, 72, 151, .24) !important;
}

.robo-arena .child-arena-premium .ra-live-icon-link img {
    width: 25px !important;
    height: 25px !important;
}

.robo-arena .child-arena-premium .ra-live-settings__menu {
    z-index: 30 !important;
    right: 0 !important;
    color: #fff !important;
    background: #061a4a !important;
    border: 1px solid rgba(49, 220, 255, .55) !important;
    box-shadow: 0 18px 36px rgba(0, 20, 60, .36) !important;
}

.robo-arena .child-arena-premium .ra-live-content {
    flex: 1 1 auto !important;
    display: grid !important;
    gap: 9px !important;
    align-content: start !important;
    padding: 10px 12px 8px !important;
}

.robo-arena .child-arena-premium .ra-live-profile,
.robo-arena .child-arena-premium .ra-live-stats article,
.robo-arena .child-arena-premium .ra-live-action,
.robo-arena .child-arena-premium .ra-live-goal {
    color: #08245a !important;
    background: rgba(255, 255, 255, .93) !important;
    border: 1px solid rgba(76, 184, 229, .62) !important;
    box-shadow: 0 10px 23px rgba(31, 102, 148, .12), inset 0 1px 0 rgba(255, 255, 255, .96) !important;
    backdrop-filter: none !important;
}

.robo-arena .child-arena-premium .ra-live-profile {
    min-height: 96px !important;
    padding: 8px 10px !important;
    display: grid !important;
    grid-template-columns: 68px minmax(0, 1fr) 66px !important;
    gap: 9px !important;
    align-items: center !important;
    border-radius: 22px !important;
}

.robo-arena .child-arena-premium .ra-live-profile__avatar {
    width: 62px !important;
    height: 62px !important;
    border: 3px solid #22ddee !important;
    background: radial-gradient(circle at 50% 36%, #e6ffff 0%, #20d9f6 46%, #066ed1 100%) !important;
    box-shadow: 0 0 0 4px rgba(34, 221, 238, .14) !important;
}

.robo-arena .child-arena-premium .ra-live-profile__avatar img {
    width: 56px !important;
    height: 56px !important;
    object-fit: cover !important;
}

.robo-arena .child-arena-premium .ra-live-profile__data {
    min-width: 0 !important;
    display: grid !important;
    gap: 4px !important;
}

.robo-arena .child-arena-premium .ra-live-profile__data > strong {
    overflow: hidden !important;
    color: #06215a !important;
    font-size: clamp(1.05rem, 4.5vw, 1.26rem) !important;
    font-weight: 1000 !important;
    line-height: 1.06 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    text-shadow: none !important;
}

.robo-arena .child-arena-premium .ra-live-profile__data > span {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    color: #14356e !important;
    font-size: .64rem !important;
    line-height: 1.1 !important;
}

.robo-arena .child-arena-premium .ra-live-profile__data > span b {
    color: #0078d6 !important;
    font-weight: 1000 !important;
}

.robo-arena .child-arena-premium .ra-live-profile__level-shield {
    width: 14px !important;
    height: 14px !important;
    object-fit: contain !important;
}

.robo-arena .child-arena-premium .ra-live-profile__data > small {
    color: #2c4977 !important;
    font-size: .62rem !important;
    font-weight: 850 !important;
}

.robo-arena .child-arena-premium .ra-live-profile__energy {
    min-width: 0 !important;
    min-height: 72px !important;
    padding: 6px 5px !important;
    display: grid !important;
    justify-items: center !important;
    align-content: center !important;
    gap: 2px !important;
    text-align: center !important;
    color: #08245a !important;
    background: linear-gradient(180deg, #ffffff, #f2fbff) !important;
    border: 1px solid rgba(90, 178, 224, .55) !important;
    border-radius: 18px !important;
}

.robo-arena .child-arena-premium .ra-live-profile__energy img {
    width: 30px !important;
    height: 30px !important;
    object-fit: contain !important;
}

.robo-arena .child-arena-premium .ra-live-profile__energy strong {
    color: #0b58b3 !important;
    font-size: 1.02rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.robo-arena .child-arena-premium .ra-live-profile__energy small {
    color: #7290b5 !important;
    font-size: .43rem !important;
    font-weight: 1000 !important;
}

.robo-arena .child-arena-premium .ra-live-progress {
    height: 9px !important;
    overflow: hidden !important;
    background: #dcebf3 !important;
    border: 1px solid #9db7c9 !important;
    border-radius: 999px !important;
    box-shadow: inset 0 1px 2px rgba(13, 43, 76, .12) !important;
}

.robo-arena .child-arena-premium .ra-live-progress i,
.robo-arena .child-arena-premium .ra-trainer-progress i {
    display: block !important;
    height: 100% !important;
    border-radius: inherit !important;
    background: linear-gradient(90deg, #ffd33d, #ff9f1c) !important;
}

.robo-arena .child-arena-premium .ra-live-stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

.robo-arena .child-arena-premium .ra-live-stats article {
    min-height: 80px !important;
    padding: 7px 5px 8px !important;
    display: grid !important;
    justify-items: center !important;
    align-content: center !important;
    gap: 3px !important;
    border-radius: 18px !important;
    text-align: center !important;
}

.robo-arena .child-arena-premium .ra-live-stats article > span {
    width: 40px !important;
    height: 40px !important;
    display: grid !important;
    place-items: center !important;
}

.robo-arena .child-arena-premium .ra-live-stats img {
    width: 38px !important;
    height: 38px !important;
    object-fit: contain !important;
}

.robo-arena .child-arena-premium .ra-live-stats strong {
    color: #08245a !important;
    font-size: clamp(1.1rem, 5.5vw, 1.45rem) !important;
    line-height: 1 !important;
    font-weight: 1000 !important;
}

.robo-arena .child-arena-premium .ra-live-stats small {
    color: #163b72 !important;
    font-size: .52rem !important;
    font-weight: 1000 !important;
    line-height: 1.05 !important;
}

.robo-arena .child-arena-premium .ra-live-actions {
    display: grid !important;
    grid-template-columns: 1.08fr .96fr .96fr !important;
    gap: 7px !important;
}

.robo-arena .child-arena-premium .ra-live-action {
    min-height: 104px !important;
    padding: 8px 6px !important;
    display: grid !important;
    justify-items: center !important;
    align-content: center !important;
    gap: 6px !important;
    border-radius: 20px !important;
    text-align: center !important;
    text-decoration: none !important;
    transform: translateZ(0) !important;
}

.robo-arena .child-arena-premium .ra-live-action.is-primary {
    color: #fff !important;
    background: linear-gradient(180deg, #27d9f5 0%, #0b91e8 100%) !important;
    border-color: #7bf7ff !important;
    box-shadow: 0 12px 28px rgba(4, 142, 217, .28), inset 0 1px 0 rgba(255, 255, 255, .32) !important;
}

.robo-arena .child-arena-premium .ra-live-action:not(.is-primary):not(.is-reward) {
    color: #08245a !important;
    background: rgba(255, 255, 255, .94) !important;
}

.robo-arena .child-arena-premium .ra-live-action.is-reward {
    color: #08245a !important;
    background: linear-gradient(180deg, #ffdd57 0%, #f4a31a 100%) !important;
    border-color: #fff0a7 !important;
}

.robo-arena .child-arena-premium .ra-live-action img {
    width: clamp(54px, 15vw, 72px) !important;
    height: clamp(54px, 15vw, 72px) !important;
    object-fit: contain !important;
    filter: drop-shadow(0 7px 8px rgba(12, 54, 104, .16)) !important;
}

.robo-arena .child-arena-premium .ra-live-action strong {
    color: inherit !important;
    font-size: .68rem !important;
    font-weight: 1000 !important;
    line-height: 1 !important;
}

.robo-arena .child-arena-premium .ra-live-goal {
    min-height: 66px !important;
    padding: 8px 10px !important;
    display: grid !important;
    grid-template-columns: 32px minmax(0, 1fr) 44px !important;
    grid-template-rows: auto auto !important;
    gap: 5px 8px !important;
    align-items: center !important;
    border-radius: 20px !important;
}

.robo-arena .child-arena-premium .ra-live-goal > div {
    display: grid !important;
    gap: 5px !important;
}

.robo-arena .child-arena-premium .ra-live-goal > div > strong {
    color: #08245a !important;
    font-size: .72rem !important;
    font-weight: 1000 !important;
}

.robo-arena .child-arena-premium .ra-live-goal > small {
    grid-column: 2 !important;
    grid-row: 2 !important;
    color: #2c4977 !important;
    font-size: .55rem !important;
    font-weight: 900 !important;
    white-space: normal !important;
}

.robo-arena .child-arena-premium .ra-live-goal__star {
    width: 30px !important;
    height: 30px !important;
    object-fit: contain !important;
}

.robo-arena .child-arena-premium .ra-live-goal__chest {
    grid-column: 3 !important;
    grid-row: 1 / 3 !important;
    width: 42px !important;
    height: 40px !important;
    object-fit: contain !important;
}

.robo-arena .child-arena-premium .ra-live-bottom-nav {
    min-height: 74px !important;
    margin: 0 8px 8px !important;
    padding: 6px 7px max(6px, env(safe-area-inset-bottom)) !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 3px !important;
    color: #173c71 !important;
    background: rgba(255, 255, 255, .96) !important;
    border: 1px solid rgba(84, 184, 228, .55) !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 25px rgba(27, 93, 141, .14) !important;
}

.robo-arena .child-arena-premium .ra-live-bottom-nav a {
    min-height: 58px !important;
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    gap: 3px !important;
    color: #446184 !important;
    border-radius: 15px !important;
    text-decoration: none !important;
}

.robo-arena .child-arena-premium .ra-live-bottom-nav a > img {
    width: 24px !important;
    height: 24px !important;
    object-fit: contain !important;
}

.robo-arena .child-arena-premium .ra-live-bottom-nav a strong {
    color: inherit !important;
    font-size: .49rem !important;
    font-weight: 1000 !important;
    line-height: 1 !important;
}

.robo-arena .child-arena-premium .ra-live-bottom-nav a.is-active {
    color: #fff !important;
    background: linear-gradient(180deg, #25bdff, #1178ee) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2) !important;
}

.robo-arena .child-arena-premium .ra-live-bottom-nav a.is-active::after {
    background: #ffd54f !important;
}

.robo-arena .child-arena-premium .ra-live-bottom-nav a.is-play > span {
    width: 58px !important;
    height: 58px !important;
    margin-top: -23px !important;
    display: grid !important;
    place-items: center !important;
    border: 3px solid #dffbff !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, #4cf4ff, #1193ff) !important;
    box-shadow: 0 0 18px rgba(34, 211, 238, .42), 0 9px 15px rgba(0, 97, 190, .18) !important;
}

.robo-arena .child-arena-premium .ra-live-bottom-nav a.is-play > span img {
    width: 42px !important;
    height: 42px !important;
    object-fit: contain !important;
}

.robo-arena .child-arena-premium .ra-smart-trainer {
    width: 100% !important;
    max-width: 680px !important;
    margin: 0 !important;
    padding: clamp(18px, 2.4vw, 28px) !important;
    color: #08245a !important;
    background: rgba(255, 255, 255, .94) !important;
    border: 1px solid rgba(76, 184, 229, .62) !important;
    border-radius: 26px !important;
    box-shadow: 0 18px 42px rgba(28, 86, 126, .14) !important;
    position: static !important;
}

.robo-arena .child-arena-premium .ra-trainer-summary {
    display: grid !important;
    grid-template-columns: 86px minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: center !important;
}

.robo-arena .child-arena-premium .ra-trainer-mentor {
    width: 84px !important;
    height: 94px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 10px 14px rgba(11, 73, 127, .18)) !important;
}

.robo-arena .child-arena-premium .status-pill {
    width: max-content !important;
    max-width: 100% !important;
    color: #fff !important;
    background: linear-gradient(180deg, #158be5, #075cb8) !important;
    border: 0 !important;
}

.robo-arena .child-arena-premium .ra-trainer-copy h2,
.robo-arena .child-arena-premium .ra-live-section-heading h2 {
    color: #08245a !important;
}

.robo-arena .child-arena-premium .ra-trainer-copy p,
.robo-arena .child-arena-premium .plan-focus-chip span {
    color: #24476f !important;
}

.robo-arena .child-arena-premium .ra-trainer-progress {
    height: 11px !important;
    overflow: hidden !important;
    background: #dcebf3 !important;
    border-radius: 999px !important;
}

.robo-arena .child-arena-premium .plan-focus-chip {
    margin-top: 16px !important;
    color: #08245a !important;
    background: #eafaff !important;
    border: 1px solid rgba(76, 184, 229, .55) !important;
    border-radius: 18px !important;
}

.robo-arena .child-arena-premium .ra-trainer-cta {
    color: #fff !important;
    background: linear-gradient(180deg, #25c7e8, #1394e8) !important;
    border-radius: 14px !important;
    text-decoration: none !important;
}

.robo-arena .child-arena-premium .game-module-card,
.robo-arena .child-arena-premium .ra-live-utility a {
    color: #08245a !important;
    background: rgba(255, 255, 255, .94) !important;
    border: 1px solid rgba(76, 184, 229, .55) !important;
    box-shadow: 0 12px 26px rgba(28, 86, 126, .12) !important;
}

.robo-arena .child-arena-premium .ra-live-section-heading {
    color: #0479c7 !important;
}

@media (min-width: 900px) {
    .robo-arena .child-arena-premium .ra-live-arena {
        position: sticky !important;
        top: 16px !important;
    }

    .robo-arena .child-arena-premium .ra-live-section-heading,
    .robo-arena .child-arena-premium .game-hub-grid,
    .robo-arena .child-arena-premium .ra-live-utility {
        grid-column: 2 !important;
    }
}

@media (max-width: 899px) {
    .robo-arena .child-arena-premium {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        justify-items: center !important;
    }

    .robo-arena .child-arena-premium .ra-smart-trainer,
    .robo-arena .child-arena-premium .ra-live-section-heading,
    .robo-arena .child-arena-premium .game-hub-grid,
    .robo-arena .child-arena-premium .ra-live-utility {
        width: min(100%, 430px) !important;
    }
}

@media (max-width: 430px) {
    .robo-arena .child-arena-premium {
        min-height: 100dvh !important;
        padding: 0 !important;
        background: #eafaff !important;
    }

    .robo-arena .child-arena-premium .ra-live-arena {
        width: 100% !important;
        min-height: 100dvh !important;
        border-width: 0 0 3px !important;
        border-radius: 0 0 26px 26px !important;
        box-shadow: none !important;
    }

    .robo-arena .child-arena-premium .ra-live-content {
        gap: 8px !important;
        padding: 9px 10px 7px !important;
    }

    .robo-arena .child-arena-premium .ra-live-profile {
        grid-template-columns: 62px minmax(0, 1fr) 62px !important;
        min-height: 92px !important;
    }

    .robo-arena .child-arena-premium .ra-live-stats article {
        min-height: 76px !important;
    }

    .robo-arena .child-arena-premium .ra-live-action {
        min-height: 98px !important;
    }

    .robo-arena .child-arena-premium .ra-smart-trainer,
    .robo-arena .child-arena-premium .ra-live-section-heading,
    .robo-arena .child-arena-premium .game-hub-grid,
    .robo-arena .child-arena-premium .ra-live-utility {
        width: calc(100% - 20px) !important;
    }
}

@media (max-width: 370px) {
    .robo-arena .child-arena-premium .ra-live-header {
        min-height: 68px !important;
        grid-template-columns: 48px minmax(0, 1fr) 42px !important;
    }

    .robo-arena .child-arena-premium .ra-live-header__mentor,
    .robo-arena .child-arena-premium .ra-live-header__mentor img {
        width: 46px !important;
        height: 50px !important;
    }

    .robo-arena .child-arena-premium .ra-live-profile {
        grid-template-columns: 54px minmax(0, 1fr) 58px !important;
        gap: 6px !important;
    }

    .robo-arena .child-arena-premium .ra-live-profile__avatar {
        width: 50px !important;
        height: 50px !important;
    }

    .robo-arena .child-arena-premium .ra-live-profile__avatar img {
        width: 45px !important;
        height: 45px !important;
    }

    .robo-arena .child-arena-premium .ra-live-actions {
        gap: 6px !important;
    }

    .robo-arena .child-arena-premium .ra-live-action {
        min-height: 104px !important;
    }
}

/* FINAL-PREMIUM-SHELL-001: dark arena shell for final child/parent/game surfaces. */
body.ra-game-page,
body:has(.child-arena-premium) {
    background:
        radial-gradient(circle at 50% -8%, rgba(36, 214, 255, .24) 0, rgba(36, 214, 255, 0) 34%),
        radial-gradient(circle at 10% 18%, rgba(122, 64, 255, .16) 0, rgba(122, 64, 255, 0) 26%),
        linear-gradient(180deg, #061539 0%, #071d5d 45%, #020713 100%) !important;
}

body.ra-game-page::before,
body:has(.child-arena-premium)::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    pointer-events: none !important;
    background:
        linear-gradient(rgba(64, 222, 255, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(64, 222, 255, .045) 1px, transparent 1px) !important;
    background-size: 42px 42px !important;
    mask-image: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,0)) !important;
    z-index: 0 !important;
}

.robo-arena .child-arena-premium {
    width: 100% !important;
    max-width: 1180px !important;
    min-height: 100dvh !important;
    margin: 0 auto !important;
    padding: clamp(12px, 2.2vw, 26px) !important;
    display: grid !important;
    grid-template-columns: minmax(320px, 430px) minmax(0, 1fr) !important;
    gap: clamp(18px, 3vw, 30px) !important;
    align-items: start !important;
    color: #f8fbff !important;
    background:
        radial-gradient(circle at 20% 14%, rgba(37, 202, 255, .20), transparent 24%),
        radial-gradient(circle at 72% 6%, rgba(255, 211, 69, .14), transparent 18%),
        linear-gradient(180deg, #06173d 0%, #071d54 48%, #020817 100%) !important;
    position: relative !important;
    isolation: isolate !important;
}

.robo-arena .child-arena-premium::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: -1 !important;
    opacity: .42 !important;
    background: url("../images/robo-arena/game-arena-premium-background.png") top center / cover no-repeat !important;
    filter: saturate(1.12) contrast(1.04) brightness(.68) !important;
}

.robo-arena .child-arena-premium .ra-live-arena {
    width: min(100%, 430px) !important;
    min-height: min(844px, calc(100dvh - 24px)) !important;
    overflow: hidden !important;
    border: 2px solid rgba(34, 221, 255, .88) !important;
    border-radius: 30px !important;
    background:
        linear-gradient(180deg, rgba(247, 253, 255, .96) 0%, rgba(234, 250, 255, .98) 100%) !important;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.28) inset,
        0 24px 64px rgba(0, 0, 0, .42),
        0 0 44px rgba(20, 203, 255, .24) !important;
}

.robo-arena .child-arena-premium .ra-smart-trainer,
.robo-arena .child-arena-premium .game-module-card,
.robo-arena .child-arena-premium .ra-live-utility a {
    color: #f8fbff !important;
    background:
        linear-gradient(145deg, rgba(7, 22, 62, .94), rgba(8, 34, 82, .88)) !important;
    border: 1px solid rgba(48, 214, 255, .64) !important;
    box-shadow:
        0 22px 50px rgba(0, 0, 0, .34),
        0 0 0 1px rgba(255,255,255,.06) inset !important;
}

.robo-arena .child-arena-premium .ra-trainer-copy h2,
.robo-arena .child-arena-premium .ra-live-section-heading h2 {
    color: #ffffff !important;
}

.robo-arena .child-arena-premium .ra-trainer-copy p,
.robo-arena .child-arena-premium .plan-focus-chip span {
    color: rgba(232, 246, 255, .88) !important;
}

.robo-arena .child-arena-premium .plan-focus-chip {
    background: rgba(233, 251, 255, .10) !important;
    border-color: rgba(56, 218, 255, .50) !important;
    color: #fff !important;
}

@media (max-width: 899px) {
    .robo-arena .child-arena-premium {
        grid-template-columns: minmax(0, 1fr) !important;
        justify-items: center !important;
    }
}

@media (max-width: 430px) {
    .robo-arena .child-arena-premium {
        min-height: 100dvh !important;
        padding: 10px 8px 18px !important;
        background:
            linear-gradient(180deg, #061539 0%, #071d5d 52%, #020713 100%) !important;
    }

    .robo-arena .child-arena-premium .ra-live-arena {
        width: 100% !important;
        min-height: calc(100dvh - 20px) !important;
        border-width: 2px !important;
        border-radius: 26px !important;
        box-shadow:
            0 0 0 1px rgba(255,255,255,.22) inset,
            0 18px 46px rgba(0, 0, 0, .36),
            0 0 32px rgba(20, 203, 255, .24) !important;
    }
}

body.ra-game-page {
    min-height: 100dvh !important;
    color: #f8fbff !important;
}

.robo-arena.ra-live-game-page {
    width: min(100%, 1180px) !important;
    min-height: 100dvh !important;
    margin: 0 auto !important;
    padding: clamp(12px, 2.2vw, 28px) !important;
    display: grid !important;
    place-items: center !important;
    color: #f8fbff !important;
    background:
        radial-gradient(circle at 50% 4%, rgba(38, 218, 255, .22), transparent 25%),
        linear-gradient(180deg, rgba(3, 14, 42, .28), rgba(1, 6, 18, .70)),
        url("../images/robo-arena/game-arena-premium-background.png") center / cover no-repeat !important;
}

.robo-arena.ra-live-game-page .game-root {
    width: 100% !important;
    max-width: 980px !important;
}

.robo-arena .game-setup {
    width: min(100%, 880px) !important;
    margin: 0 auto !important;
    padding: clamp(18px, 3vw, 30px) !important;
    color: #ffffff !important;
    background:
        linear-gradient(180deg, rgba(5, 18, 56, .86), rgba(3, 10, 32, .96)),
        url("../images/robo-arena/game-arena-premium-background.png") center / cover no-repeat !important;
    border: 1px solid rgba(57, 217, 255, .72) !important;
    border-radius: 30px !important;
    box-shadow:
        0 24px 70px rgba(0, 0, 0, .48),
        0 0 0 1px rgba(255,255,255,.08) inset,
        0 0 44px rgba(17, 204, 255, .22) !important;
    overflow: hidden !important;
}

.robo-arena .game-setup::before {
    content: "" !important;
    display: block !important;
    width: min(300px, 76vw) !important;
    height: clamp(108px, 18vw, 158px) !important;
    margin: 0 auto 8px !important;
    background: url("../images/robo-arena/canonical-v057/logo-arena.png") center / contain no-repeat !important;
    filter: drop-shadow(0 14px 18px rgba(0,0,0,.28)) !important;
}

.robo-arena .game-setup .panel-heading {
    justify-content: center !important;
    text-align: center !important;
    gap: 12px !important;
}

.robo-arena .game-setup .panel-heading h1,
.robo-arena .game-setup h2 {
    color: #ffffff !important;
    text-shadow: 0 3px 0 rgba(0,0,0,.22) !important;
}

.robo-arena .game-setup .panel-heading p,
.robo-arena .game-setup small,
.robo-arena .game-setup em,
.robo-arena .game-setup label {
    color: rgba(236, 247, 255, .88) !important;
}

.robo-arena .game-setup .mode-buttons .chip,
.robo-arena .game-setup .table-picker label,
.robo-arena .game-setup select {
    color: #ffffff !important;
    background: rgba(4, 16, 50, .74) !important;
    border: 1px solid rgba(72, 199, 255, .42) !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .18) !important;
}

.robo-arena .game-setup .mode-buttons .chip.active,
.robo-arena .game-setup .table-picker label:has(input:checked) {
    background: linear-gradient(180deg, #23c9d3, #128ee9) !important;
    border-color: rgba(122, 242, 255, .92) !important;
    color: #ffffff !important;
}

.robo-arena .game-setup .daily-limit-card article,
.robo-arena .game-setup .speed-rule-card,
.robo-arena .game-setup .learning-plan-card {
    color: #ffffff !important;
    background: rgba(5, 18, 56, .78) !important;
    border: 1px solid rgba(72, 199, 255, .44) !important;
    border-radius: 22px !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .22) !important;
}

.robo-arena .game-setup .daily-limit-card article span,
.robo-arena .game-setup .speed-rule-card strong,
.robo-arena .game-setup .learning-plan-card h2 {
    color: #ffffff !important;
}

.robo-arena .game-setup .status-pill {
    color: #061539 !important;
    background: linear-gradient(180deg, #f8d94b, #ff9f18) !important;
    border: 0 !important;
}

.robo-arena .game-setup .btn.primary.huge {
    min-height: 62px !important;
    color: #ffffff !important;
    background: linear-gradient(180deg, #24dfc5, #078bdc) !important;
    border: 1px solid rgba(132, 255, 246, .82) !important;
    border-radius: 18px !important;
    box-shadow: 0 15px 30px rgba(0, 178, 221, .28) !important;
}

.robo-arena .ra-live-game-screen {
    background:
        linear-gradient(180deg, rgba(6, 26, 71, .84), rgba(3, 13, 43, .96)),
        url("../images/robo-arena/game-arena-premium-background.png") center / cover no-repeat !important;
    border-color: rgba(43, 220, 255, .72) !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .46), 0 0 46px rgba(18, 202, 255, .22) !important;
}

@media (max-width: 430px) {
    .robo-arena.ra-live-game-page {
        padding: 8px !important;
    }

    .robo-arena .game-setup {
        min-height: calc(100dvh - 16px) !important;
        border-radius: 26px !important;
        padding: 16px !important;
    }
}

/* CORE-DESIGN-ALIGNMENT-001: keep Moja arena first viewport readable without goal/nav overlap. */
@media (max-width: 430px) {
    body .robo-arena .child-arena-premium .ra-live-arena {
        height: calc(100dvh - 20px) !important;
        min-height: 0 !important;
    }

    body .robo-arena .child-arena-premium .ra-live-content {
        flex: 0 0 auto !important;
        display: grid !important;
        grid-template-rows: 108px 8px 109px 12px 149px 12px 113px !important;
        gap: 0 !important;
        min-height: 0 !important;
        padding: 9px 10px 7px !important;
        overflow: visible !important;
    }

    body .robo-arena .child-arena-premium .ra-live-profile {
        grid-row: 1 !important;
        height: 108px !important;
        min-height: 0 !important;
    }

    body .robo-arena .child-arena-premium .ra-live-stats {
        grid-row: 3 !important;
    }

    body .robo-arena .child-arena-premium .ra-live-stats article {
        min-height: 90px !important;
    }

    body .robo-arena .child-arena-premium .ra-live-actions {
        grid-row: 5 !important;
    }

    body .robo-arena .child-arena-premium .ra-live-action {
        min-height: 122px !important;
    }

    body .robo-arena .child-arena-premium .ra-live-goal {
        grid-row: 7 !important;
        min-height: 82px !important;
        padding-bottom: 9px !important;
    }

    body .robo-arena .child-arena-premium .ra-live-bottom-nav {
        flex: 0 0 78px !important;
        min-height: 78px !important;
        margin: auto 8px 8px !important;
    }
}

@media (max-width: 370px), (max-height: 810px) and (max-width: 430px) {
    body .robo-arena .child-arena-premium .ra-live-content {
        grid-template-rows: 100px 7px 101px 10px 138px 10px 104px !important;
        padding-top: 8px !important;
    }

    body .robo-arena .child-arena-premium .ra-live-profile {
        height: 100px !important;
    }

    body .robo-arena .child-arena-premium .ra-live-stats article {
        min-height: 84px !important;
    }

    body .robo-arena .child-arena-premium .ra-live-action {
        min-height: 112px !important;
    }

    body .robo-arena .child-arena-premium .ra-live-goal {
        min-height: 76px !important;
    }
}

/* CORE-DESIGN-ALIGNMENT-001: start screen rebuilt with editable HTML text and user-supplied assets. */
body.flow-start-page .flow-start-html {
    position: relative;
    display: grid;
    width: min(100%, 1040px);
    min-height: min(860px, calc(100dvh - 48px));
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
    overflow: hidden;
    color: #fff;
    border: 1px solid rgba(77, 214, 255, .72);
    border-radius: 30px;
    background: #03133b;
    box-shadow: 0 24px 70px rgba(0, 5, 28, .54), inset 0 0 0 1px rgba(255, 255, 255, .08);
}

body.flow-start-page .flow-start-html__hero {
    position: relative;
    min-height: 100%;
    overflow: hidden;
    background: #03133b;
}

body.flow-start-page .flow-start-html__hero-art {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

body.flow-start-page .flow-start-html__flag {
    position: absolute;
    z-index: 3;
    top: 18px;
    right: 18px;
    width: 48px;
    height: 48px;
    object-fit: contain;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .35));
}

body.flow-start-page .flow-start-html__panel {
    display: grid;
    align-content: center;
    padding: clamp(24px, 3.8vw, 44px);
    background:
        radial-gradient(circle at 78% 8%, rgba(27, 221, 255, .18), transparent 18rem),
        linear-gradient(180deg, rgba(4, 26, 83, .98), rgba(2, 12, 43, .98));
}

body.flow-start-page .flow-start-html__kicker {
    margin: 0 0 10px;
    color: #24e7f4;
    font-size: .86rem;
    font-weight: 900;
    letter-spacing: 0;
    text-align: center;
    text-transform: uppercase;
}

body.flow-start-page .flow-start-html__panel h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 950;
    line-height: 1.04;
    text-align: center;
    text-shadow: 0 3px 14px rgba(0, 0, 0, .32);
}

body.flow-start-page .flow-start-html__intro {
    max-width: 430px;
    margin: 14px auto 22px;
    color: rgba(231, 244, 255, .9);
    font-size: 1rem;
    line-height: 1.45;
    text-align: center;
}

body.flow-start-page .flow-start-html__actions {
    display: grid;
    gap: 12px;
}

body.flow-start-page .flow-start-html__button {
    display: grid;
    min-height: 72px;
    grid-template-columns: 52px minmax(0, 1fr) 38px;
    gap: 12px;
    align-items: center;
    padding: 9px 13px;
    color: #fff;
    border: 1px solid rgba(145, 239, 255, .58);
    border-radius: 22px;
    box-shadow: 0 16px 30px rgba(0, 7, 36, .28), inset 0 1px 0 rgba(255, 255, 255, .24);
    text-decoration: none;
    transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}

body.flow-start-page .flow-start-html__button:hover {
    filter: brightness(1.08);
    transform: translateY(-2px);
}

body.flow-start-page .flow-start-html__button:active {
    transform: translateY(1px);
}

body.flow-start-page .flow-start-html__button:focus-visible {
    outline: 4px solid #fff;
    outline-offset: 3px;
}

body.flow-start-page .flow-start-html__button img {
    width: 52px;
    height: 52px;
    object-fit: contain;
}

body.flow-start-page .flow-start-html__button span {
    min-width: 0;
    color: #fff;
    font-size: clamp(1rem, 2vw, 1.2rem);
    font-weight: 950;
    line-height: 1.1;
    text-align: center;
    text-transform: uppercase;
}

body.flow-start-page .flow-start-html__button b {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    color: #05224d;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .2);
    font-size: 1.85rem;
    font-weight: 900;
    line-height: 1;
}

body.flow-start-page .flow-start-html__button--child {
    background: linear-gradient(180deg, #23dfce, #0798d9);
}

body.flow-start-page .flow-start-html__button--parent {
    background: linear-gradient(180deg, #139cff, #0757dd);
}

body.flow-start-page .flow-start-html__button--install {
    border-color: rgba(255, 232, 103, .88);
    background: linear-gradient(180deg, #ffc72e, #f18d05);
}

@media (max-width: 720px) {
    body.flow-start-page .flow-phone-wrap {
        padding: 0;
    }

    body.flow-start-page .flow-start-html {
        display: grid;
        width: 100%;
        min-height: 100dvh;
        grid-template-columns: 1fr;
        grid-template-rows: minmax(0, 42dvh) minmax(0, 58dvh);
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    body.flow-start-page .flow-start-html__hero {
        min-height: 0;
    }

    body.flow-start-page .flow-start-html__hero-art {
        object-position: center 10%;
    }

    body.flow-start-page .flow-start-html__flag {
        top: 13px;
        right: 13px;
        width: 40px;
        height: 40px;
    }

    body.flow-start-page .flow-start-html__panel {
        align-content: start;
        padding: 18px 20px 18px;
        border-radius: 26px 26px 0 0;
        box-shadow: 0 -16px 30px rgba(0, 6, 34, .24);
    }

    body.flow-start-page .flow-start-html__kicker {
        margin-bottom: 7px;
        font-size: .74rem;
    }

    body.flow-start-page .flow-start-html__panel h1 {
        font-size: clamp(2rem, 8vw, 2.35rem);
    }

    body.flow-start-page .flow-start-html__intro {
        margin: 10px auto 14px;
        font-size: .92rem;
        line-height: 1.38;
    }

    body.flow-start-page .flow-start-html__actions {
        gap: 10px;
    }

    body.flow-start-page .flow-start-html__button {
        min-height: 64px;
        grid-template-columns: 46px minmax(0, 1fr) 34px;
        gap: 9px;
        padding: 7px 11px;
        border-radius: 19px;
    }

    body.flow-start-page .flow-start-html__button img {
        width: 46px;
        height: 46px;
    }

    body.flow-start-page .flow-start-html__button span {
        font-size: .98rem;
    }

    body.flow-start-page .flow-start-html__button b {
        width: 32px;
        height: 32px;
        font-size: 1.65rem;
    }
}

@media (max-width: 370px), (max-height: 810px) and (max-width: 720px) {
    body.flow-start-page .flow-start-html {
        grid-template-rows: minmax(0, 40dvh) minmax(0, 60dvh);
    }

    body.flow-start-page .flow-start-html__panel {
        padding: 14px 14px 16px;
    }

    body.flow-start-page .flow-start-html__intro {
        font-size: .86rem;
    }

    body.flow-start-page .flow-start-html__button {
        min-height: 60px;
    }
}

/* CORE-DESIGN-ALIGNMENT-001: premium child results screen with safe mobile history table. */
body.ra-results-page {
    color: #f8fbff;
    background:
        radial-gradient(circle at 50% -8%, rgba(35, 225, 255, .28), transparent 32%),
        linear-gradient(180deg, #061947 0%, #030b27 54%, #010514 100%);
}

.robo-arena.ra-live-results {
    width: min(calc(100% - 24px), 1180px);
    padding: 12px clamp(8px, 2vw, 22px) 112px;
    color: #f8fbff;
}

.robo-arena.ra-live-results .profile-hero {
    min-height: 232px;
    border: 2px solid rgba(74, 220, 255, .78);
    border-radius: 28px;
    background:
        linear-gradient(90deg, rgba(2, 16, 54, .88), rgba(4, 70, 139, .38)),
        url('../images/robo-arena/game-arena-premium-background.png') center 44% / cover no-repeat;
    box-shadow: 0 22px 54px rgba(0, 0, 0, .42), 0 0 28px rgba(0, 221, 255, .18);
}

.robo-arena.ra-live-results .profile-hero::before {
    background: linear-gradient(180deg, rgba(13, 211, 243, .12), rgba(2, 10, 35, .35));
}

.robo-arena.ra-live-results .profile-hero h1,
.robo-arena.ra-live-results .profile-hero h2 {
    text-shadow: 0 3px 0 rgba(0, 18, 58, .45);
}

.robo-arena.ra-live-results .summary-grid {
    gap: 12px;
}

.robo-arena.ra-live-results .summary-grid .metric-card,
.robo-arena.ra-live-results .panel {
    color: #fff;
    background: linear-gradient(180deg, rgba(10, 31, 82, .94), rgba(4, 13, 44, .96));
    border: 1px solid rgba(77, 210, 255, .52);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 30px rgba(0,0,0,.28);
}

.robo-arena.ra-live-results .summary-grid .metric-card span,
.robo-arena.ra-live-results .panel h2,
.robo-arena.ra-live-results .mastery-row strong {
    color: #fff;
}

.robo-arena.ra-live-results .summary-grid .metric-card small,
.robo-arena.ra-live-results .panel p,
.robo-arena.ra-live-results .mastery-row span,
.robo-arena.ra-live-results .mastery-row small,
.robo-arena.ra-live-results .muted {
    color: rgba(232, 244, 255, .82);
}

.robo-arena.ra-live-results .level-banner.compact {
    color: #fff;
    background: linear-gradient(135deg, rgba(17, 177, 229, .96), rgba(16, 185, 165, .86));
    border: 1px solid rgba(128, 243, 255, .68);
    border-radius: 24px;
    box-shadow: 0 16px 34px rgba(0, 134, 214, .25);
}

.robo-arena.ra-live-results .xp-panel {
    color: #fff;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.32);
    border-radius: 18px;
}

.robo-arena.ra-live-results .skin-token {
    color: #fff;
    background: linear-gradient(180deg, rgba(8, 30, 79, .9), rgba(3, 13, 42, .96));
    border-color: rgba(77, 210, 255, .46);
}

.robo-arena.ra-live-results .skin-token.unlocked {
    border-color: rgba(45, 238, 255, .9);
    box-shadow: 0 0 20px rgba(45, 238, 255, .18), inset 0 0 0 1px rgba(255,255,255,.14);
}

.robo-arena.ra-live-results .badge-chip,
.robo-arena.ra-live-results .table-badge {
    color: #fff;
    background: rgba(6, 38, 95, .72);
    border-color: rgba(77, 234, 255, .42);
}

.robo-arena.ra-live-results .table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

.robo-arena.ra-live-results table {
    width: 100%;
    min-width: 0;
    color: #fff;
    border-collapse: separate;
    border-spacing: 0 8px;
}

.robo-arena.ra-live-results th,
.robo-arena.ra-live-results td {
    padding: 10px 8px;
    color: inherit;
    background: rgba(255,255,255,.08);
    border: 0;
}

.robo-arena.ra-live-results th {
    color: #5df3ff;
    font-size: .72rem;
    text-align: left;
    text-transform: uppercase;
}

.robo-arena.ra-live-results td:first-child,
.robo-arena.ra-live-results th:first-child {
    border-radius: 12px 0 0 12px;
}

.robo-arena.ra-live-results td:last-child,
.robo-arena.ra-live-results th:last-child {
    border-radius: 0 12px 12px 0;
}

.robo-arena.ra-live-results .ra-reward-bottom-nav {
    display: grid;
    min-height: 78px;
    padding: 7px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    background: linear-gradient(180deg, rgba(8, 30, 78, .98), rgba(4, 11, 39, .98));
    border-color: rgba(77, 210, 255, .58);
    border-radius: 18px;
}

.robo-arena.ra-live-results .ra-reward-bottom-nav a {
    min-height: 62px;
    padding: 4px 2px;
    justify-content: center;
    color: rgba(232, 247, 255, .78);
}

.robo-arena.ra-live-results .ra-reward-bottom-nav img {
    width: 25px;
    height: 25px;
}

.robo-arena.ra-live-results .ra-reward-bottom-nav strong {
    font-size: .5rem;
}

.robo-arena.ra-live-results .ra-reward-bottom-nav a.is-active {
    color: #fff;
    background: linear-gradient(180deg, #1ba9ff, #075dd7);
}

@media (max-width: 720px) {
    .robo-arena.ra-live-results {
        width: 100%;
        padding: 8px 8px 124px;
    }

    .robo-arena.ra-live-results .profile-hero {
        min-height: 194px;
        padding: 14px;
        border-radius: 22px;
    }

    .robo-arena.ra-live-results .ra-results-mentor-stage {
        grid-template-columns: 112px minmax(0, 1fr);
        gap: 10px;
    }

    .robo-arena.ra-live-results .ra-results-mentor {
        height: 148px;
    }

    .robo-arena.ra-live-results .summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .robo-arena.ra-live-results .summary-grid .metric-card {
        min-height: 82px;
        padding: 10px;
    }

    .robo-arena.ra-live-results .level-banner.compact,
    .robo-arena.ra-live-results .panel {
        border-radius: 20px;
    }

    .robo-arena.ra-live-results .level-banner.compact {
        margin-bottom: 172px;
    }

    .robo-arena.ra-live-results .panel {
        padding: 14px;
    }

    .robo-arena.ra-live-results table,
    .robo-arena.ra-live-results thead,
    .robo-arena.ra-live-results tbody,
    .robo-arena.ra-live-results tr,
    .robo-arena.ra-live-results th,
    .robo-arena.ra-live-results td {
        display: block;
        width: 100%;
    }

    .robo-arena.ra-live-results thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .robo-arena.ra-live-results tr {
        display: grid;
        gap: 4px;
        margin-bottom: 10px;
        padding: 10px;
        background: rgba(255,255,255,.08);
        border: 1px solid rgba(77, 210, 255, .32);
        border-radius: 16px;
    }

    .robo-arena.ra-live-results td {
        display: flex;
        min-width: 0;
        padding: 0;
        justify-content: space-between;
        gap: 10px;
        background: transparent;
        border-radius: 0;
        overflow-wrap: anywhere;
    }

    .robo-arena.ra-live-results td:nth-child(1)::before { content: "Na\010Din"; }
    .robo-arena.ra-live-results td:nth-child(2)::before { content: "Rezultat"; }
    .robo-arena.ra-live-results td:nth-child(3)::before { content: "Datum"; }

    .robo-arena.ra-live-results td::before {
        color: #5df3ff;
        font-size: .72rem;
        font-weight: 950;
        text-transform: uppercase;
    }
}

@media (max-width: 370px) {
    .robo-arena.ra-live-results .profile-hero {
        min-height: 184px;
    }

    .robo-arena.ra-live-results .ra-results-mentor-stage {
        grid-template-columns: 98px minmax(0, 1fr);
    }

    .robo-arena.ra-live-results .ra-results-mentor {
        height: 132px;
    }
}

/* CORE-DESIGN-ALIGNMENT-001: premium child rewards screen aligned with results shell. */
body.ra-rewards-page {
    color: #f8fbff;
    background:
        radial-gradient(circle at 50% -8%, rgba(35, 225, 255, .28), transparent 32%),
        linear-gradient(180deg, #061947 0%, #030b27 54%, #010514 100%);
}

.robo-arena.ra-live-rewards {
    width: min(calc(100% - 24px), 1180px);
    padding: 12px clamp(8px, 2vw, 22px) 112px;
    color: #f8fbff;
}

.robo-arena.ra-live-rewards .ra-reward-hero {
    min-height: 214px;
    border: 2px solid rgba(74, 220, 255, .78);
    border-radius: 28px;
    background:
        linear-gradient(90deg, rgba(2, 16, 54, .88), rgba(4, 70, 139, .38)),
        url('../images/robo-arena/game-arena-premium-background.png') center 44% / cover no-repeat;
    box-shadow: 0 22px 54px rgba(0, 0, 0, .42), 0 0 28px rgba(0, 221, 255, .18);
}

.robo-arena.ra-live-rewards .ra-reward-hero::before {
    background: linear-gradient(180deg, rgba(13, 211, 243, .12), rgba(2, 10, 35, .35));
}

.robo-arena.ra-live-rewards .ra-reward-hero h1 {
    text-shadow: 0 3px 0 rgba(0, 18, 58, .45);
}

.robo-arena.ra-live-rewards .ra-reward-hero .stat-orbit {
    color: #08316b;
    border-radius: 18px;
    box-shadow: 0 15px 30px rgba(0, 42, 96, .28), inset 0 1px 0 rgba(255,255,255,.8);
}

.robo-arena.ra-live-rewards .summary-grid {
    gap: 12px;
}

.robo-arena.ra-live-rewards .summary-grid .metric-card,
.robo-arena.ra-live-rewards .panel,
.robo-arena.ra-live-rewards .reward-card,
.robo-arena.ra-live-rewards .claim-card {
    color: #fff;
    background: linear-gradient(180deg, rgba(10, 31, 82, .94), rgba(4, 13, 44, .96));
    border: 1px solid rgba(77, 210, 255, .52);
    border-radius: 22px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 30px rgba(0,0,0,.28);
}

.robo-arena.ra-live-rewards .summary-grid .metric-card span,
.robo-arena.ra-live-rewards .panel h2,
.robo-arena.ra-live-rewards .reward-card h2,
.robo-arena.ra-live-rewards .reward-section-head h2,
.robo-arena.ra-live-rewards .claim-card h3 {
    color: #fff;
}

.robo-arena.ra-live-rewards .summary-grid .metric-card small,
.robo-arena.ra-live-rewards .panel p,
.robo-arena.ra-live-rewards .reward-card p,
.robo-arena.ra-live-rewards .reward-card small,
.robo-arena.ra-live-rewards .reward-section-head small,
.robo-arena.ra-live-rewards .claim-card,
.robo-arena.ra-live-rewards .muted {
    color: rgba(232, 244, 255, .82);
}

.robo-arena.ra-live-rewards .helper-strip {
    color: #fff;
    background: linear-gradient(135deg, rgba(17, 177, 229, .86), rgba(16, 185, 165, .72));
    border: 1px solid rgba(128, 243, 255, .68);
    border-radius: 22px;
    box-shadow: 0 16px 34px rgba(0, 134, 214, .2);
}

.robo-arena.ra-live-rewards .reward-section-head {
    color: #fff;
}

.robo-arena.ra-live-rewards .reward-grid {
    gap: 14px;
}

.robo-arena.ra-live-rewards .reward-card {
    overflow: hidden;
}

.robo-arena.ra-live-rewards .reward-state-locked {
    opacity: .96;
    border-color: rgba(255, 202, 40, .58);
}

.robo-arena.ra-live-rewards .reward-state-exhausted {
    opacity: .78;
    border-color: rgba(148, 163, 184, .5);
}

.robo-arena.ra-live-rewards .reward-card-visual {
    min-width: 0;
}

.robo-arena.ra-live-rewards .reward-meta {
    color: rgba(232, 244, 255, .82);
}

.robo-arena.ra-live-rewards .status-pill {
    color: #06285f;
    background: #fff;
}

.robo-arena.ra-live-rewards .ra-reward-bottom-nav {
    display: grid;
    min-height: 78px;
    padding: 7px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    background: linear-gradient(180deg, rgba(8, 30, 78, .98), rgba(4, 11, 39, .98));
    border-color: rgba(77, 210, 255, .58);
    border-radius: 18px;
}

.robo-arena.ra-live-rewards .ra-reward-bottom-nav a {
    min-height: 62px;
    padding: 4px 2px;
    justify-content: center;
    color: rgba(232, 247, 255, .78);
}

.robo-arena.ra-live-rewards .ra-reward-bottom-nav img {
    width: 25px;
    height: 25px;
}

.robo-arena.ra-live-rewards .ra-reward-bottom-nav strong {
    font-size: .5rem;
}

.robo-arena.ra-live-rewards .ra-reward-bottom-nav a.is-active {
    color: #fff;
    background: linear-gradient(180deg, #1ba9ff, #075dd7);
}

@media (max-width: 720px) {
    .robo-arena.ra-live-rewards {
        width: 100%;
        padding: 8px 8px 124px;
    }

    .robo-arena.ra-live-rewards .ra-reward-hero {
        min-height: 186px;
        padding: 14px;
        grid-template-columns: minmax(0, 1fr) 94px;
        gap: 10px;
        border-radius: 22px;
    }

    .robo-arena.ra-live-rewards .ra-reward-hero h1 {
        font-size: clamp(1.6rem, 8vw, 2.2rem);
    }

    .robo-arena.ra-live-rewards .ra-reward-hero p {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }

    .robo-arena.ra-live-rewards .ra-reward-hero .stat-orbit {
        width: 92px;
        min-height: 104px;
        padding: 8px;
    }

    .robo-arena.ra-live-rewards .ra-reward-hero .stat-orbit img {
        width: 78px;
        height: 58px;
    }

    .robo-arena.ra-live-rewards .summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .robo-arena.ra-live-rewards .summary-grid .metric-card {
        min-height: 82px;
        padding: 10px;
    }

    .robo-arena.ra-live-rewards .helper-strip {
        margin-bottom: 178px;
        padding: 12px;
    }

    .robo-arena.ra-live-rewards .reward-grid,
    .robo-arena.ra-live-rewards .claims-grid {
        grid-template-columns: 1fr;
    }

    .robo-arena.ra-live-rewards .panel,
    .robo-arena.ra-live-rewards .reward-card,
    .robo-arena.ra-live-rewards .claim-card {
        padding: 14px;
        border-radius: 20px;
    }
}

@media (max-width: 370px) {
    .robo-arena.ra-live-rewards .ra-reward-hero {
        min-height: 178px;
        grid-template-columns: minmax(0, 1fr) 84px;
    }

    .robo-arena.ra-live-rewards .ra-reward-hero .stat-orbit {
        width: 84px;
    }
}

/* CORE-DESIGN-ALIGNMENT-001: shared child bottom navigation */
.robo-arena .ra-live-bottom-nav,
.robo-arena .ra-reward-bottom-nav,
.robo-arena .ra-secondary-bottom-nav {
    position: fixed !important;
    right: max(10px, env(safe-area-inset-right)) !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    left: max(10px, env(safe-area-inset-left)) !important;
    z-index: 60 !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 4px !important;
    width: auto !important;
    max-width: 560px !important;
    min-height: 74px !important;
    margin: 0 auto !important;
    padding: 7px !important;
    border: 1px solid rgba(82, 212, 246, .38) !important;
    border-radius: 22px !important;
    background: linear-gradient(180deg, rgba(10, 43, 96, .96), rgba(6, 22, 61, .98)) !important;
    box-shadow: 0 18px 34px rgba(0, 18, 56, .34), inset 0 1px 0 rgba(255, 255, 255, .16) !important;
    backdrop-filter: blur(12px) !important;
}

.robo-arena .ra-live-bottom-nav a,
.robo-arena .ra-reward-bottom-nav a,
.robo-arena .ra-secondary-bottom-nav a {
    position: relative !important;
    display: grid !important;
    min-width: 0 !important;
    min-height: 58px !important;
    padding: 5px 2px !important;
    place-items: center !important;
    align-content: center !important;
    gap: 3px !important;
    color: rgba(224, 244, 255, .76) !important;
    border-radius: 16px !important;
    text-decoration: none !important;
    background: transparent !important;
}

.robo-arena .ra-live-bottom-nav a > img,
.robo-arena .ra-reward-bottom-nav a > img,
.robo-arena .ra-secondary-bottom-nav a > img {
    display: block !important;
    width: 28px !important;
    height: 28px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 4px 7px rgba(0, 14, 44, .28)) !important;
}

.robo-arena .ra-live-bottom-nav a strong,
.robo-arena .ra-reward-bottom-nav a strong,
.robo-arena .ra-secondary-bottom-nav a strong {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    color: inherit !important;
    font-size: .56rem !important;
    font-weight: 1000 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.robo-arena .ra-live-bottom-nav a.is-active,
.robo-arena .ra-reward-bottom-nav a.is-active,
.robo-arena .ra-secondary-bottom-nav a.is-active {
    color: #fff !important;
    background: linear-gradient(180deg, #36dfff, #1378ef) !important;
    box-shadow: 0 0 0 1px rgba(226, 250, 255, .28), 0 8px 18px rgba(21, 121, 239, .32) !important;
}

.robo-arena .ra-live-bottom-nav a.is-active::after,
.robo-arena .ra-reward-bottom-nav a.is-active::after,
.robo-arena .ra-secondary-bottom-nav a.is-active::after {
    content: "" !important;
    position: absolute !important;
    right: 50% !important;
    bottom: 3px !important;
    width: 18px !important;
    height: 3px !important;
    border-radius: 999px !important;
    background: #ffd84d !important;
    transform: translateX(50%) !important;
}

.robo-arena .ra-live-bottom-nav a[href*="play.php"],
.robo-arena .ra-reward-bottom-nav a[href*="play.php"],
.robo-arena .ra-secondary-bottom-nav a[href*="play.php"] {
    transform: translateY(-8px) !important;
}

.robo-arena .ra-live-bottom-nav a[href*="play.php"] > img,
.robo-arena .ra-reward-bottom-nav a[href*="play.php"] > img,
.robo-arena .ra-secondary-bottom-nav a[href*="play.php"] > img {
    width: 36px !important;
    height: 36px !important;
}

@media (min-width: 900px) {
    .robo-arena .ra-live-bottom-nav,
    .robo-arena .ra-reward-bottom-nav,
    .robo-arena .ra-secondary-bottom-nav {
        right: 50% !important;
        left: auto !important;
        width: min(560px, calc(100vw - 32px)) !important;
        transform: translateX(50%) !important;
    }
}

@media (max-width: 370px) {
    .robo-arena .ra-live-bottom-nav,
    .robo-arena .ra-reward-bottom-nav,
    .robo-arena .ra-secondary-bottom-nav {
        gap: 2px !important;
        min-height: 70px !important;
        padding: 6px !important;
    }

    .robo-arena .ra-live-bottom-nav a,
    .robo-arena .ra-reward-bottom-nav a,
    .robo-arena .ra-secondary-bottom-nav a {
        min-height: 54px !important;
    }

    .robo-arena .ra-live-bottom-nav a strong,
    .robo-arena .ra-reward-bottom-nav a strong,
    .robo-arena .ra-secondary-bottom-nav a strong {
        font-size: .5rem !important;
    }
}

.robo-arena.ra-child-profile .ra-profile-reference,
.robo-arena.ra-switch-child .ra-switch-child__shell,
.robo-arena.ra-live-results .ra-live-results-shell,
.robo-arena.ra-live-rewards .ra-live-rewards-shell {
    padding-bottom: max(118px, calc(94px + env(safe-area-inset-bottom))) !important;
}

@media (max-width: 700px) {
    .robo-arena.ra-child-profile .ra-profile-reference__settings-panel {
        margin-top: 220px !important;
    }
}

/* CHILD-MY-ARENA-REFERENCE-001: dark premium Moja arena layout */
body.robo-arena-page:has(.child-arena-premium) {
    background:
        radial-gradient(circle at 50% 0, rgba(33, 213, 255, .26), transparent 28rem),
        linear-gradient(180deg, #031c54 0%, #04143f 44%, #020a25 100%) !important;
}

.robo-arena .child-arena-premium {
    width: min(100%, 920px) !important;
    gap: clamp(18px, 3vw, 26px) !important;
    padding: 0 0 118px !important;
    color: #fff !important;
}

.robo-arena .child-arena-premium .ra-live-arena {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    color: #fff !important;
    border: 1px solid rgba(57, 213, 255, .44) !important;
    border-radius: clamp(24px, 5vw, 42px) !important;
    background:
        linear-gradient(180deg, rgba(1, 23, 74, .18), rgba(1, 10, 42, .72)),
        url("../images/robo-arena/game-arena-premium-background.png") center top / cover no-repeat !important;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .08) inset,
        0 26px 74px rgba(0, 4, 30, .58),
        0 0 54px rgba(21, 180, 255, .24) !important;
}

.robo-arena .child-arena-premium .ra-live-arena::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: -2 !important;
    background:
        radial-gradient(circle at 74% 29%, rgba(42, 218, 255, .34), transparent 10rem),
        radial-gradient(circle at 14% 46%, rgba(31, 124, 255, .24), transparent 14rem),
        linear-gradient(180deg, rgba(1, 15, 56, .1) 0%, rgba(2, 8, 32, .86) 100%) !important;
}

.robo-arena .child-arena-premium .ra-live-arena::after {
    content: "" !important;
    position: absolute !important;
    top: 220px !important;
    right: -2% !important;
    z-index: -1 !important;
    width: min(50vw, 420px) !important;
    aspect-ratio: 9 / 13 !important;
    background: url("../images/robo-arena/reference-production/robo-mentor-full.png") center bottom / contain no-repeat !important;
    filter: drop-shadow(0 22px 28px rgba(0, 7, 33, .4)) !important;
    pointer-events: none !important;
}

.robo-arena .child-arena-premium .ra-live-header {
    display: grid !important;
    grid-template-columns: 1fr minmax(124px, 28%) 44px !important;
    min-height: 120px !important;
    align-items: start !important;
    padding: clamp(18px, 4vw, 32px) clamp(18px, 4vw, 36px) 4px !important;
    gap: 12px !important;
    background: transparent !important;
}

.robo-arena .child-arena-premium .ra-live-header__mentor {
    display: none !important;
}

.robo-arena .child-arena-premium .ra-live-header__title {
    display: grid !important;
    justify-items: end !important;
}

.robo-arena .child-arena-premium .ra-live-header__title img {
    width: min(100%, 190px) !important;
    max-height: 108px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 0 18px rgba(37, 211, 255, .48)) !important;
}

.robo-arena .child-arena-premium .ra-live-header h1 {
    position: absolute !important;
    top: 270px !important;
    left: clamp(22px, 5vw, 50px) !important;
    z-index: 2 !important;
    margin: 0 !important;
    color: #fff !important;
    font-size: clamp(3.4rem, 12vw, 6rem) !important;
    font-weight: 1000 !important;
    line-height: .92 !important;
    text-align: left !important;
    text-shadow: 0 8px 26px rgba(0, 0, 0, .32) !important;
    text-transform: none !important;
}

.robo-arena .child-arena-premium .ra-live-header h1::after {
    content: "VJE\017DBAJ. OSVAJAJ. ZNAJ." !important;
    display: block !important;
    margin-top: 22px !important;
    color: #24e7ff !important;
    font-size: clamp(1.35rem, 4.3vw, 2.2rem) !important;
    line-height: 1.1 !important;
    text-transform: uppercase !important;
    text-shadow: 0 0 16px rgba(31, 224, 255, .44) !important;
}

.robo-arena .child-arena-premium .ra-live-settings {
    justify-self: end !important;
    z-index: 6 !important;
}

.robo-arena .child-arena-premium .ra-live-icon-link {
    width: 44px !important;
    height: 44px !important;
    border-color: rgba(81, 221, 255, .7) !important;
    background: rgba(3, 29, 81, .74) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 0 18px rgba(40, 212, 255, .28) !important;
}

.robo-arena .child-arena-premium .ra-live-content {
    position: relative !important;
    display: grid !important;
    gap: clamp(16px, 3.6vw, 28px) !important;
    padding: 0 clamp(18px, 4vw, 36px) clamp(20px, 4vw, 36px) !important;
}

.robo-arena .child-arena-premium .ra-live-profile {
    grid-template-columns: clamp(76px, 16vw, 122px) minmax(0, 1fr) !important;
    min-height: clamp(104px, 19vw, 148px) !important;
    padding: 0 min(30vw, 230px) 0 0 !important;
    align-items: center !important;
    gap: clamp(14px, 3vw, 28px) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.robo-arena .child-arena-premium .ra-live-profile__avatar {
    width: clamp(74px, 16vw, 122px) !important;
    height: clamp(74px, 16vw, 122px) !important;
    border: 4px solid #59cfff !important;
    background: linear-gradient(180deg, rgba(21, 126, 255, .42), rgba(2, 16, 58, .84)) !important;
    box-shadow: 0 0 0 4px rgba(7, 80, 172, .7), 0 0 24px rgba(42, 207, 255, .54) !important;
}

.robo-arena .child-arena-premium .ra-live-profile__avatar img {
    width: 94% !important;
    height: 94% !important;
    object-fit: cover !important;
}

.robo-arena .child-arena-premium .ra-live-profile__data > strong {
    color: #fff !important;
    font-size: clamp(2.2rem, 8.2vw, 4.1rem) !important;
    font-weight: 1000 !important;
    letter-spacing: 0 !important;
    text-shadow: 0 8px 22px rgba(0, 0, 0, .26) !important;
}

.robo-arena .child-arena-premium .ra-live-profile__data > span {
    color: #20eaff !important;
    font-size: clamp(1.25rem, 4.1vw, 2rem) !important;
    font-weight: 1000 !important;
}

.robo-arena .child-arena-premium .ra-live-profile__level-shield,
.robo-arena .child-arena-premium .ra-live-profile__data > small,
.robo-arena .child-arena-premium .ra-live-profile__data .ra-live-progress,
.robo-arena .child-arena-premium .ra-live-profile__energy {
    display: none !important;
}

.robo-arena .child-arena-premium .ra-live-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 !important;
    padding: clamp(12px, 3vw, 20px) clamp(12px, 3.4vw, 24px) !important;
    border: 1px solid rgba(74, 210, 255, .58) !important;
    border-radius: clamp(22px, 4vw, 34px) !important;
    background: linear-gradient(180deg, rgba(6, 42, 111, .88), rgba(2, 14, 59, .88)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 0 28px rgba(31, 191, 255, .22) !important;
}

.robo-arena .child-arena-premium .ra-live-stats article {
    min-height: 72px !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
    gap: 4px !important;
    padding: 0 clamp(8px, 2vw, 18px) !important;
    color: #fff !important;
    background: transparent !important;
    border: 0 !important;
    border-right: 1px solid rgba(91, 206, 255, .35) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-align: center !important;
}

.robo-arena .child-arena-premium .ra-live-stats article:last-child {
    border-right: 0 !important;
}

.robo-arena .child-arena-premium .ra-live-stats article > span {
    grid-row: auto !important;
    width: 38px !important;
    height: 38px !important;
    background: transparent !important;
    border: 0 !important;
}

.robo-arena .child-arena-premium .ra-live-stats img {
    width: 36px !important;
    height: 36px !important;
}

.robo-arena .child-arena-premium .ra-live-stats strong {
    color: #fff !important;
    font-size: clamp(1.2rem, 4vw, 2.05rem) !important;
    font-weight: 1000 !important;
}

.robo-arena .child-arena-premium .ra-live-stats small {
    color: rgba(236, 247, 255, .9) !important;
    font-size: clamp(.72rem, 2vw, 1rem) !important;
    font-weight: 1000 !important;
}

.robo-arena .child-arena-premium .ra-live-actions {
    position: relative !important;
    z-index: 2 !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(12px, 2.4vw, 22px) !important;
    margin-top: clamp(245px, 43vw, 390px) !important;
}

.robo-arena .child-arena-premium .ra-live-action {
    min-height: clamp(172px, 38vw, 270px) !important;
    padding: clamp(14px, 3vw, 24px) clamp(10px, 2vw, 18px) !important;
    color: #fff !important;
    border: 1px solid rgba(78, 215, 255, .62) !important;
    border-radius: clamp(22px, 4vw, 34px) !important;
    background: linear-gradient(180deg, rgba(10, 58, 142, .9), rgba(1, 14, 56, .92)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 0 26px rgba(17, 167, 255, .23) !important;
}

.robo-arena .child-arena-premium .ra-live-action.is-reward {
    background: linear-gradient(180deg, rgba(82, 56, 18, .8), rgba(7, 17, 58, .92)) !important;
    border-color: rgba(255, 205, 53, .68) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 0 28px rgba(255, 186, 17, .23) !important;
}

.robo-arena .child-arena-premium .ra-live-action img {
    width: clamp(92px, 22vw, 150px) !important;
    height: clamp(92px, 22vw, 150px) !important;
    filter: drop-shadow(0 0 16px rgba(32, 221, 255, .38)) !important;
}

.robo-arena .child-arena-premium .ra-live-action strong {
    color: #fff !important;
    font-size: clamp(1.24rem, 4vw, 2.05rem) !important;
    font-weight: 1000 !important;
}

.robo-arena .child-arena-premium .ra-live-action small {
    display: block !important;
    max-width: 12em !important;
    color: rgba(237, 247, 255, .92) !important;
    font-size: clamp(.92rem, 2.5vw, 1.25rem) !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
}

.robo-arena .child-arena-premium .ra-live-action__arrow {
    display: grid !important;
    min-width: 70px !important;
    min-height: 40px !important;
    place-items: center !important;
    margin-top: 4px !important;
    color: #fff !important;
    font-size: 2rem !important;
    font-weight: 1000 !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, #18ceff, #086ce8) !important;
    box-shadow: 0 0 18px rgba(22, 213, 255, .36) !important;
}

.robo-arena .child-arena-premium .ra-live-action.is-reward .ra-live-action__arrow {
    background: linear-gradient(180deg, #ffd94c, #f4a500) !important;
    box-shadow: 0 0 20px rgba(255, 199, 43, .44) !important;
}

.robo-arena .child-arena-premium .ra-live-goal,
.robo-arena .child-arena-premium .arena-plan-strip,
.robo-arena .child-arena-premium .game-hub-grid,
.robo-arena .child-arena-premium .ra-live-utility {
    margin-inline: clamp(18px, 4vw, 36px) !important;
}

.robo-arena .child-arena-premium .ra-live-goal {
    grid-template-columns: clamp(62px, 15vw, 104px) minmax(0, 1fr) auto clamp(62px, 15vw, 106px) !important;
    min-height: clamp(116px, 24vw, 170px) !important;
    padding: clamp(14px, 3vw, 24px) !important;
    color: #fff !important;
    border: 1px solid rgba(76, 216, 255, .6) !important;
    border-radius: clamp(22px, 4vw, 32px) !important;
    background: linear-gradient(180deg, rgba(8, 60, 144, .88), rgba(3, 18, 72, .9)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 0 26px rgba(24, 199, 255, .22) !important;
}

.robo-arena .child-arena-premium .ra-live-goal__star,
.robo-arena .child-arena-premium .ra-live-goal__chest {
    width: 100% !important;
    height: auto !important;
    max-height: 92px !important;
    object-fit: contain !important;
}

.robo-arena .child-arena-premium .ra-live-goal > div {
    gap: 5px !important;
}

.robo-arena .child-arena-premium .ra-live-goal > div > strong {
    color: #24eaff !important;
    font-size: clamp(1rem, 3vw, 1.55rem) !important;
    font-weight: 1000 !important;
}

.robo-arena .child-arena-premium .ra-live-goal b {
    color: #fff !important;
    font-size: clamp(1.1rem, 3vw, 1.5rem) !important;
    line-height: 1.15 !important;
}

.robo-arena .child-arena-premium .ra-live-goal em {
    color: rgba(236, 247, 255, .9) !important;
    font-size: clamp(.78rem, 2vw, 1rem) !important;
    font-style: normal !important;
    font-weight: 800 !important;
}

.robo-arena .child-arena-premium .ra-live-goal > small {
    color: #fff !important;
    font-size: clamp(2rem, 8vw, 4rem) !important;
    font-weight: 1000 !important;
}

.robo-arena .child-arena-premium .ra-goal-scope {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.robo-arena .child-arena-premium .ra-live-progress {
    height: 15px !important;
    background: rgba(5, 25, 78, .9) !important;
    border: 1px solid rgba(84, 222, 255, .74) !important;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, .3) !important;
}

.robo-arena .child-arena-premium .ra-live-progress i {
    background: linear-gradient(90deg, #26f4ff, #14bfe9) !important;
    box-shadow: 0 0 16px rgba(31, 237, 255, .52) !important;
}

.robo-arena .child-arena-premium .arena-plan-strip {
    grid-template-columns: minmax(0, 1.1fr) minmax(210px, .85fr) !important;
    color: #fff !important;
    border: 1px solid rgba(70, 213, 255, .56) !important;
    border-radius: clamp(22px, 4vw, 34px) !important;
    background: linear-gradient(180deg, rgba(7, 48, 125, .9), rgba(2, 14, 58, .92)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 0 26px rgba(24, 199, 255, .2) !important;
}

.robo-arena .child-arena-premium .ra-trainer-summary {
    display: grid !important;
    grid-template-columns: clamp(82px, 18vw, 128px) minmax(0, 1fr) !important;
    gap: clamp(12px, 3vw, 22px) !important;
    align-items: center !important;
}

.robo-arena .child-arena-premium .ra-trainer-mentor {
    width: 100% !important;
    height: auto !important;
    filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .34)) !important;
}

.robo-arena .child-arena-premium .ra-trainer-copy h2,
.robo-arena .child-arena-premium .ra-trainer-copy h3 {
    color: #fff !important;
}

.robo-arena .child-arena-premium .ra-trainer-copy h2 {
    color: #20eaff !important;
    text-transform: uppercase !important;
}

.robo-arena .child-arena-premium .ra-trainer-copy p,
.robo-arena .child-arena-premium .ra-trainer-copy small,
.robo-arena .child-arena-premium .plan-focus-chip > span {
    color: rgba(236, 247, 255, .9) !important;
}

.robo-arena .child-arena-premium .plan-focus-chip {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
    color: #fff !important;
    background: transparent !important;
    border: 0 !important;
}

.robo-arena .child-arena-premium .ra-trainer-weakness {
    display: grid !important;
    gap: 4px !important;
    padding: 14px !important;
    border: 1px solid rgba(72, 212, 255, .44) !important;
    border-radius: 18px !important;
    background: rgba(6, 34, 94, .72) !important;
    text-align: center !important;
}

.robo-arena .child-arena-premium .ra-trainer-weakness span {
    color: rgba(238, 248, 255, .9) !important;
    font-weight: 1000 !important;
}

.robo-arena .child-arena-premium .ra-trainer-weakness strong {
    color: #34e9ff !important;
    font-size: clamp(2rem, 6vw, 3rem) !important;
    font-weight: 1000 !important;
}

.robo-arena .child-arena-premium .ra-trainer-cta {
    min-height: 54px !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, #19cbff, #0874e8) !important;
    box-shadow: 0 0 20px rgba(26, 203, 255, .32) !important;
}

.robo-arena .child-arena-premium .ra-live-section-heading {
    margin-inline: clamp(22px, 5vw, 42px) !important;
}

.robo-arena .child-arena-premium .ra-live-section-heading > span {
    color: #22eaff !important;
    font-size: clamp(1.25rem, 3.8vw, 1.9rem) !important;
    text-shadow: 0 0 18px rgba(37, 232, 255, .36) !important;
}

.robo-arena .child-arena-premium .game-hub-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: clamp(10px, 2vw, 18px) !important;
    padding: clamp(14px, 3vw, 22px) !important;
    border: 1px solid rgba(70, 213, 255, .48) !important;
    border-radius: clamp(22px, 4vw, 34px) !important;
    background: linear-gradient(180deg, rgba(7, 48, 125, .82), rgba(2, 14, 58, .9)) !important;
}

.robo-arena .child-arena-premium .game-module-card,
.robo-arena .child-arena-premium .game-module-card.active {
    grid-column: auto !important;
    gap: 8px !important;
    min-height: 250px !important;
    padding: 12px !important;
    color: #fff !important;
    border: 1px solid rgba(82, 212, 255, .34) !important;
    border-radius: 18px !important;
    background: linear-gradient(180deg, rgba(12, 61, 138, .78), rgba(4, 17, 62, .84)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14) !important;
}

.robo-arena .child-arena-premium .game-module-card.active {
    border-color: #22eaff !important;
    box-shadow: 0 0 22px rgba(34, 234, 255, .34), inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}

.robo-arena .child-arena-premium .game-module-head {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    gap: 8px !important;
    text-align: center !important;
}

.robo-arena .child-arena-premium .game-module-head .status-pill,
.robo-arena .child-arena-premium .game-module-card > p,
.robo-arena .child-arena-premium .module-mission-line,
.robo-arena .child-arena-premium .module-reward-ribbon,
.robo-arena .child-arena-premium .game-module-actions,
.robo-arena .child-arena-premium .module-link-strip {
    display: none !important;
}

.robo-arena .child-arena-premium .game-module-head .ra-module-art {
    width: 100% !important;
    max-width: 150px !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    border-radius: 16px !important;
}

.robo-arena .child-arena-premium .game-module-head h2 {
    color: #fff !important;
    font-size: clamp(1rem, 2.7vw, 1.35rem) !important;
}

.robo-arena .child-arena-premium .module-world-tag {
    color: #fff !important;
    background: rgba(16, 214, 100, .9) !important;
    border-color: rgba(65, 255, 145, .5) !important;
}

.robo-arena .child-arena-premium .game-module-stats {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
}

.robo-arena .child-arena-premium .game-module-stats span {
    background: transparent !important;
    border: 0 !important;
}

.robo-arena .child-arena-premium .game-module-stats span:nth-child(2),
.robo-arena .child-arena-premium .game-module-stats span:nth-child(3) {
    display: none !important;
}

.robo-arena .child-arena-premium .locked-world-note {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    color: rgba(228, 240, 255, .75) !important;
    background: transparent !important;
    border: 0 !important;
    text-align: center !important;
}

.robo-arena .child-arena-premium .locked-world-note img {
    width: 42px !important;
    height: 42px !important;
}

@media (max-width: 700px) {
    .robo-arena .child-arena-premium {
        padding-bottom: 108px !important;
    }

    .robo-arena .child-arena-premium .ra-live-arena {
        border-radius: 24px !important;
    }

    .robo-arena .child-arena-premium .ra-live-arena::after {
        top: 246px !important;
        right: -20px !important;
        width: 54vw !important;
    }

    .robo-arena .child-arena-premium .ra-live-header {
        grid-template-columns: 1fr 138px 40px !important;
        min-height: 104px !important;
        padding: 18px 18px 0 !important;
    }

    .robo-arena .child-arena-premium .ra-live-header h1 {
        top: 260px !important;
        left: 24px !important;
        max-width: 58% !important;
        font-size: clamp(3.2rem, 15vw, 4.3rem) !important;
    }

    .robo-arena .child-arena-premium .ra-live-header h1::after {
        margin-top: 14px !important;
        font-size: clamp(1.08rem, 5.8vw, 1.45rem) !important;
    }

    .robo-arena .child-arena-premium .ra-live-content {
        padding-inline: 18px !important;
    }

    .robo-arena .child-arena-premium .ra-live-profile {
        min-height: 92px !important;
        padding-right: 148px !important;
        gap: 14px !important;
    }

    .robo-arena .child-arena-premium .ra-live-stats {
        padding: 10px 8px !important;
    }

    .robo-arena .child-arena-premium .ra-live-actions {
        gap: 9px !important;
        margin-top: 235px !important;
    }

    .robo-arena .child-arena-premium .ra-live-action {
        min-height: 178px !important;
        padding: 12px 8px !important;
    }

    .robo-arena .child-arena-premium .ra-live-action img {
        width: 74px !important;
        height: 74px !important;
    }

    .robo-arena .child-arena-premium .ra-live-action strong {
        font-size: 1.1rem !important;
    }

    .robo-arena .child-arena-premium .ra-live-action small {
        font-size: .78rem !important;
    }

    .robo-arena .child-arena-premium .ra-live-action__arrow {
        min-width: 56px !important;
        min-height: 34px !important;
        font-size: 1.6rem !important;
    }

    .robo-arena .child-arena-premium .ra-live-goal {
        grid-template-columns: 54px minmax(0, 1fr) auto 58px !important;
        min-height: 104px !important;
        padding: 12px !important;
    }

    .robo-arena .child-arena-premium .ra-live-goal > small {
        font-size: 2.25rem !important;
    }

    .robo-arena .child-arena-premium .arena-plan-strip {
        grid-template-columns: 1fr !important;
    }

    .robo-arena .child-arena-premium .game-hub-grid {
        grid-template-columns: repeat(4, minmax(112px, 1fr)) !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
    }

    .robo-arena .child-arena-premium .game-module-card {
        scroll-snap-align: start !important;
    }
}

@media (max-width: 370px) {
    .robo-arena .child-arena-premium .ra-live-profile {
        padding-right: 128px !important;
    }

    .robo-arena .child-arena-premium .ra-live-header__title img {
        width: 118px !important;
    }

    .robo-arena .child-arena-premium .ra-live-actions {
        margin-top: 210px !important;
    }

    .robo-arena .child-arena-premium .ra-live-action {
        min-height: 166px !important;
    }
}

/* CHILD-MY-ARENA-REFERENCE-001 final stacking guard */
body .robo-arena .child-arena-premium .ra-live-profile {
    grid-row: 1 !important;
}

body .robo-arena .child-arena-premium .ra-live-stats {
    grid-row: 2 !important;
    margin-bottom: clamp(235px, 43vw, 380px) !important;
}

body .robo-arena .child-arena-premium .ra-live-actions {
    grid-row: 3 !important;
    margin-top: 0 !important;
    z-index: 4 !important;
}

body .robo-arena .child-arena-premium .ra-live-goal {
    grid-row: 4 !important;
    position: relative !important;
    z-index: 5 !important;
    margin-top: 0 !important;
}

body .robo-arena .child-arena-premium .ra-live-header h1 {
    top: clamp(320px, 62vw, 475px) !important;
}

body .robo-arena .child-arena-premium .ra-live-arena::after {
    top: clamp(285px, 52vw, 410px) !important;
}

@media (max-width: 700px) {
    body .robo-arena .child-arena-premium .ra-live-stats {
        margin-bottom: 230px !important;
    }

    body .robo-arena .child-arena-premium .ra-live-header h1 {
        top: 365px !important;
        font-size: clamp(3rem, 13vw, 3.75rem) !important;
    }

    body .robo-arena .child-arena-premium .ra-live-arena::after {
        top: 315px !important;
        width: 50vw !important;
    }
}

@media (max-width: 370px) {
    body .robo-arena .child-arena-premium .ra-live-stats {
        margin-bottom: 205px !important;
    }

    body .robo-arena .child-arena-premium .ra-live-header h1 {
        top: 345px !important;
    }
}

/* CHILD-MY-ARENA-REFERENCE-001 flex flow guard */
body .robo-arena .child-arena-premium .ra-live-content {
    display: flex !important;
    flex-direction: column !important;
    gap: clamp(16px, 3.6vw, 28px) !important;
}

body .robo-arena .child-arena-premium .ra-live-profile,
body .robo-arena .child-arena-premium .ra-live-stats,
body .robo-arena .child-arena-premium .ra-live-actions,
body .robo-arena .child-arena-premium .ra-live-goal {
    grid-row: auto !important;
}

body .robo-arena .child-arena-premium .ra-live-bottom-nav {
    position: static !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 18px clamp(18px, 4vw, 36px) clamp(18px, 4vw, 34px) !important;
    transform: none !important;
}

/* Shared child navigation has four canonical destinations. */
.robo-arena .ra-live-bottom-nav,
.robo-arena .ra-reward-bottom-nav,
.robo-arena .ra-secondary-bottom-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

body .robo-arena .child-arena-premium .ra-live-arena {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
}

body .robo-arena .child-arena-premium .ra-live-header__title img {
    display: block !important;
}

body .robo-arena .child-arena-premium .ra-live-goal {
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) auto 62px !important;
    grid-template-rows: auto !important;
}

body .robo-arena .child-arena-premium .ra-live-goal__star {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: center !important;
    width: 54px !important;
    height: 54px !important;
}

body .robo-arena .child-arena-premium .ra-live-goal > div {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    align-self: center !important;
}

body .robo-arena .child-arena-premium .ra-live-goal > small {
    grid-column: 3 !important;
    grid-row: 1 !important;
    width: auto !important;
    height: auto !important;
    align-self: center !important;
    justify-self: center !important;
}

body .robo-arena .child-arena-premium .ra-live-goal__chest {
    grid-column: 4 !important;
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: center !important;
    width: 58px !important;
    height: 58px !important;
}

@media (max-width: 700px) {
    body .robo-arena .child-arena-premium .ra-live-actions {
        margin-bottom: 18px !important;
    }

    body .robo-arena .child-arena-premium .ra-live-goal {
        grid-template-columns: 58px minmax(0, 1fr) 86px !important;
        min-height: 122px !important;
    }

    body .robo-arena .child-arena-premium .ra-live-goal > div {
        grid-column: 2 !important;
        width: 100% !important;
    }

    body .robo-arena .child-arena-premium .ra-live-goal > small {
        grid-column: 3 !important;
        font-size: 2rem !important;
    }

    body .robo-arena .child-arena-premium .ra-live-goal__chest {
        display: none !important;
    }
}

/* CHILD-LIGHT-ARENA-REFERENCE-001: bright dynamic Moja arena from 2026-07-25 reference */
body.robo-arena-page:has(.child-arena-premium) {
    background:
        radial-gradient(circle at 8% 8%, rgba(255, 255, 255, .95), transparent 12rem),
        radial-gradient(circle at 86% 10%, rgba(97, 209, 255, .65), transparent 18rem),
        linear-gradient(180deg, #43c8ff 0%, #dff7ff 38%, #effcff 72%, #b8ecff 100%) !important;
}

body .robo-arena .child-arena-premium {
    width: min(100%, 941px) !important;
    max-width: 941px !important;
    gap: 18px !important;
    padding: 0 10px 20px !important;
    color: #073681 !important;
    background:
        radial-gradient(circle at 12% 18%, rgba(255,255,255,.82), transparent 14rem),
        radial-gradient(circle at 88% 58%, rgba(255,255,255,.7), transparent 16rem),
        linear-gradient(180deg, #bdf0ff 0%, #effcff 46%, #c8f1ff 100%) !important;
}

body .robo-arena .child-arena-premium .ra-live-arena {
    display: block !important;
    min-height: 0 !important;
    overflow: hidden !important;
    color: #073681 !important;
    border: 0 !important;
    border-radius: 0 0 28px 28px !important;
    background:
        radial-gradient(circle at 12% 8%, rgba(255,255,255,.98), transparent 12rem),
        radial-gradient(circle at 72% 10%, rgba(255,255,255,.88), transparent 14rem),
        radial-gradient(circle at 50% 44%, rgba(255,255,255,.7), transparent 18rem),
        linear-gradient(180deg, #33bdff 0%, #bff4ff 36%, #eefbff 66%, #c7f1ff 100%) !important;
    box-shadow: none !important;
}

body .robo-arena .child-arena-premium .ra-live-arena::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    background: url("../images/robo-arena/child-my-arena-light-reference.png") top center / 100% auto no-repeat !important;
    opacity: .18 !important;
    pointer-events: none !important;
}

body .robo-arena .child-arena-premium .ra-live-arena::after {
    content: "" !important;
    position: absolute !important;
    z-index: 1 !important;
    top: clamp(18px, 6vw, 42px) !important;
    right: clamp(6px, 3vw, 36px) !important;
    width: clamp(118px, 30vw, 290px) !important;
    aspect-ratio: 1 / 1.25 !important;
    background: url("../images/robo-arena/reference-production/robo-mentor-full.png") center top / contain no-repeat !important;
    filter: drop-shadow(0 18px 20px rgba(15, 92, 173, .22)) !important;
    pointer-events: none !important;
}

body .robo-arena .child-arena-premium .ra-live-header {
    position: relative !important;
    z-index: 2 !important;
    display: grid !important;
    grid-template-columns: minmax(118px, 31%) minmax(0, 1fr) 48px !important;
    min-height: clamp(210px, 46vw, 400px) !important;
    align-items: start !important;
    gap: 8px !important;
    padding: clamp(16px, 4vw, 36px) clamp(12px, 4vw, 38px) 0 !important;
    background: transparent !important;
}

body .robo-arena .child-arena-premium .ra-live-header__title {
    display: contents !important;
}

body .robo-arena .child-arena-premium .ra-live-header__title img {
    display: block !important;
    grid-column: 1 !important;
    width: min(100%, 290px) !important;
    max-height: none !important;
    object-fit: contain !important;
    filter: drop-shadow(0 12px 18px rgba(31, 91, 179, .22)) !important;
}

body .robo-arena .child-arena-premium .ra-live-header h1 {
    position: static !important;
    grid-column: 2 !important;
    align-self: center !important;
    max-width: min(95%, 360px) !important;
    margin: 0 auto !important;
    color: #2c6cff !important;
    font-size: clamp(2.9rem, 9vw, 6rem) !important;
    font-weight: 1000 !important;
    line-height: .9 !important;
    text-align: center !important;
    text-shadow:
        0 3px 0 rgba(255, 255, 255, .95),
        0 8px 18px rgba(55, 107, 225, .18) !important;
}

body .robo-arena .child-arena-premium .ra-live-header h1::after {
    content: "Vje\017Ebaj. Osvajaj. Znaj." !important;
    display: block !important;
    margin-top: clamp(10px, 2vw, 18px) !important;
    color: #073681 !important;
    font-size: clamp(1rem, 2.6vw, 1.5rem) !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    text-shadow: none !important;
}

body .robo-arena .child-arena-premium .ra-live-settings {
    grid-column: 3 !important;
    z-index: 4 !important;
}

body .robo-arena .child-arena-premium .ra-live-icon-link {
    width: 48px !important;
    height: 48px !important;
    border: 0 !important;
    background: rgba(255, 255, 255, .92) !important;
    box-shadow: 0 9px 18px rgba(35, 88, 158, .18), inset 0 1px 0 rgba(255,255,255,.9) !important;
}

body .robo-arena .child-arena-premium .ra-live-icon-link img {
    filter: none !important;
}

body .robo-arena .child-arena-premium .ra-live-profile {
    display: none !important;
}

body .robo-arena .child-arena-premium .ra-live-content {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: clamp(14px, 2.5vw, 22px) !important;
    padding: 0 clamp(12px, 4vw, 38px) clamp(18px, 4vw, 34px) !important;
}

body .robo-arena .child-arena-premium .ra-live-stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(8px, 2vw, 16px) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body .robo-arena .child-arena-premium .ra-live-stats article {
    display: grid !important;
    grid-template-columns: clamp(40px, 10vw, 76px) minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    min-height: clamp(74px, 15vw, 118px) !important;
    align-items: center !important;
    justify-items: start !important;
    gap: 0 clamp(8px, 2vw, 16px) !important;
    padding: clamp(8px, 2vw, 16px) !important;
    color: #073681 !important;
    border: 1px solid rgba(129, 160, 204, .24) !important;
    border-radius: clamp(16px, 3vw, 26px) !important;
    background: rgba(255,255,255,.88) !important;
    box-shadow: 0 10px 20px rgba(42, 88, 146, .15), inset 0 1px 0 rgba(255,255,255,.95) !important;
    text-align: left !important;
}

body .robo-arena .child-arena-premium .ra-live-stats article > span {
    grid-row: 1 / 3 !important;
    width: clamp(38px, 10vw, 74px) !important;
    height: clamp(38px, 10vw, 74px) !important;
    border: 0 !important;
    background: transparent !important;
}

body .robo-arena .child-arena-premium .ra-live-stats img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

body .robo-arena .child-arena-premium .ra-live-stats strong {
    color: #092d82 !important;
    font-size: clamp(1.8rem, 5vw, 3.25rem) !important;
    font-weight: 1000 !important;
}

body .robo-arena .child-arena-premium .ra-live-stats small {
    color: #092d82 !important;
    font-size: clamp(.82rem, 2vw, 1.25rem) !important;
    font-weight: 900 !important;
}

body .robo-arena .child-arena-premium .ra-live-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(10px, 2vw, 22px) !important;
    margin: 0 !important;
    z-index: 3 !important;
}

body .robo-arena .child-arena-premium .ra-live-action {
    min-height: clamp(190px, 36vw, 330px) !important;
    gap: clamp(6px, 1.5vw, 12px) !important;
    padding: clamp(12px, 2.8vw, 26px) !important;
    align-items: center !important;
    color: #fff !important;
    border: 2px solid rgba(255,255,255,.72) !important;
    border-radius: clamp(20px, 3vw, 34px) !important;
    background:
        radial-gradient(circle at 30% 8%, rgba(255,255,255,.32), transparent 7rem),
        linear-gradient(180deg, #16bfff, #0474e7) !important;
    box-shadow: 0 14px 26px rgba(30, 112, 203, .25), inset 0 1px 0 rgba(255,255,255,.45) !important;
}

body .robo-arena .child-arena-premium .ra-live-action:nth-child(2) {
    background:
        radial-gradient(circle at 30% 8%, rgba(255,255,255,.34), transparent 7rem),
        linear-gradient(180deg, #47f1bd, #04a982) !important;
}

body .robo-arena .child-arena-premium .ra-live-action:nth-child(1) {
    min-height: clamp(210px, 40vw, 350px) !important;
    padding-top: clamp(16px, 3.2vw, 30px) !important;
    padding-bottom: clamp(16px, 3.2vw, 30px) !important;
}

body .robo-arena .child-arena-premium .ra-live-action:nth-child(1) img {
    width: 72px !important;
    height: 72px !important;
    transform: scale(2.8) !important;
    transform-origin: center center !important;
}

body .robo-arena .child-arena-premium .ra-live-action.is-reward {
    min-height: clamp(190px, 36vw, 330px) !important;
    gap: clamp(6px, 1.5vw, 12px) !important;
    padding: clamp(12px, 2.8vw, 26px) !important;
    align-items: center !important;
    background:
        radial-gradient(circle at 30% 8%, rgba(255,255,255,.34), transparent 7rem),
        linear-gradient(180deg, #bd73ff, #7229d6) !important;
}

body .robo-arena .child-arena-premium .ra-live-action.is-reward img {
    width: clamp(80px, 18vw, 170px) !important;
    height: clamp(80px, 18vw, 170px) !important;
    transform: none !important;
}

body .robo-arena .child-arena-premium .ra-live-action.is-reward strong {
    font-size: clamp(1.45rem, 4vw, 2.7rem) !important;
}

body .robo-arena .child-arena-premium .ra-live-action.is-reward small {
    font-size: clamp(.9rem, 2.4vw, 1.45rem) !important;
}

body .robo-arena .child-arena-premium .ra-live-action img {
    width: clamp(80px, 18vw, 170px) !important;
    height: clamp(80px, 18vw, 170px) !important;
    filter: drop-shadow(0 10px 14px rgba(12, 55, 130, .2)) !important;
}

body .robo-arena .child-arena-premium .ra-live-action strong {
    color: #fff !important;
    font-size: clamp(1.45rem, 4vw, 2.7rem) !important;
    text-shadow: 0 3px 0 rgba(5, 54, 129, .2) !important;
}

body .robo-arena .child-arena-premium .ra-live-action small {
    color: rgba(255,255,255,.96) !important;
    font-size: clamp(.9rem, 2.4vw, 1.45rem) !important;
    line-height: 1.2 !important;
}

body .robo-arena .child-arena-premium .ra-live-action__arrow {
    min-width: clamp(42px, 8vw, 70px) !important;
    min-height: clamp(42px, 8vw, 70px) !important;
    color: #0062cb !important;
    border-radius: 999px !important;
    background: #fff !important;
    box-shadow: 0 8px 16px rgba(37, 72, 133, .22) !important;
}

body .robo-arena .child-arena-premium .ra-live-goal {
    display: grid !important;
    grid-template-columns: clamp(48px, 10vw, 82px) minmax(0, 1fr) auto clamp(56px, 12vw, 104px) !important;
    min-height: clamp(96px, 17vw, 150px) !important;
    align-items: center !important;
    gap: clamp(8px, 2vw, 18px) !important;
    margin: 0 !important;
    padding: clamp(10px, 2.5vw, 22px) !important;
    color: #092d82 !important;
    border: 1px solid rgba(129, 160, 204, .26) !important;
    border-radius: clamp(16px, 3vw, 26px) !important;
    background: rgba(255,255,255,.88) !important;
    box-shadow: 0 10px 20px rgba(42, 88, 146, .14), inset 0 1px 0 rgba(255,255,255,.95) !important;
}

body .robo-arena .child-arena-premium .ra-live-goal__star,
body .robo-arena .child-arena-premium .ra-live-goal__chest {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: 96px !important;
}

body .robo-arena .child-arena-premium .ra-live-goal > div > strong,
body .robo-arena .child-arena-premium .ra-live-goal b,
body .robo-arena .child-arena-premium .ra-live-goal em,
body .robo-arena .child-arena-premium .ra-live-goal > small {
    color: #092d82 !important;
}

body .robo-arena .child-arena-premium .ra-live-goal > div {
    gap: 4px !important;
}

body .robo-arena .child-arena-premium .ra-live-goal > small {
    font-size: clamp(1.8rem, 5vw, 3rem) !important;
}

body .robo-arena .child-arena-premium .ra-live-progress {
    height: 14px !important;
    background: #d8e8f2 !important;
    border: 1px solid rgba(120, 162, 205, .34) !important;
    box-shadow: inset 0 2px 5px rgba(48, 93, 139, .13) !important;
}

body .robo-arena .child-arena-premium .ra-live-progress i {
    background: linear-gradient(90deg, #14c8ff, #1aa7ef) !important;
}

body .robo-arena .child-arena-premium .arena-plan-strip {
    grid-template-columns: minmax(0, .85fr) minmax(180px, .65fr) !important;
    gap: clamp(8px, 2vw, 16px) !important;
    margin: 0 clamp(12px, 4vw, 38px) !important;
    color: #092d82 !important;
    border: 1px solid rgba(129, 160, 204, .25) !important;
    border-radius: clamp(16px, 3vw, 26px) !important;
    background: rgba(255,255,255,.88) !important;
    box-shadow: 0 10px 20px rgba(42, 88, 146, .14), inset 0 1px 0 rgba(255,255,255,.95) !important;
}

body .robo-arena .child-arena-premium .ra-trainer-copy h2,
body .robo-arena .child-arena-premium .ra-trainer-copy h3,
body .robo-arena .child-arena-premium .ra-trainer-copy p,
body .robo-arena .child-arena-premium .ra-trainer-copy small,
body .robo-arena .child-arena-premium .plan-focus-chip > span {
    color: #092d82 !important;
}

body .robo-arena .child-arena-premium .ra-trainer-copy h2 {
    color: #092d82 !important;
}

body .robo-arena .child-arena-premium .ra-trainer-weakness {
    border-color: rgba(129, 160, 204, .25) !important;
    background: rgba(239, 248, 255, .82) !important;
}

body .robo-arena .child-arena-premium .ra-trainer-weakness span,
body .robo-arena .child-arena-premium .ra-trainer-weakness strong {
    color: #092d82 !important;
}

body .robo-arena .child-arena-premium .ra-live-section-heading {
    margin-inline: clamp(12px, 4vw, 38px) !important;
    text-align: center !important;
}

body .robo-arena .child-arena-premium .ra-live-section-heading > span,
body .robo-arena .child-arena-premium .ra-live-section-heading h2 {
    color: #092d82 !important;
}

body .robo-arena .child-arena-premium .game-hub-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    margin: 0 clamp(12px, 4vw, 38px) !important;
    padding: 0 !important;
    gap: clamp(8px, 2vw, 18px) !important;
    border: 0 !important;
    background: transparent !important;
}

body .robo-arena .child-arena-premium .game-module-card,
body .robo-arena .child-arena-premium .game-module-card.active {
    min-height: clamp(168px, 31vw, 290px) !important;
    color: #092d82 !important;
    border: 2px solid rgba(255,255,255,.78) !important;
    border-radius: clamp(16px, 3vw, 28px) !important;
    background: rgba(255,255,255,.72) !important;
    box-shadow: 0 10px 20px rgba(42, 88, 146, .16), inset 0 1px 0 rgba(255,255,255,.95) !important;
}

body .robo-arena .child-arena-premium .game-module-card.active {
    background: linear-gradient(180deg, rgba(0, 139, 255, .9), rgba(1, 93, 213, .9)) !important;
    color: #fff !important;
    box-shadow: 0 0 20px rgba(0, 156, 255, .34), 0 10px 22px rgba(42, 88, 146, .18) !important;
}

body .robo-arena .child-arena-premium .game-module-head h2,
body .robo-arena .child-arena-premium .game-module-stats strong,
body .robo-arena .child-arena-premium .game-module-stats small {
    color: inherit !important;
}

body .robo-arena .child-arena-premium .ra-live-utility {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    margin-inline: clamp(12px, 4vw, 38px) !important;
}

body .robo-arena .child-arena-premium .ra-live-utility a {
    color: #092d82 !important;
    border: 1px solid rgba(129, 160, 204, .24) !important;
    border-radius: clamp(14px, 2.6vw, 24px) !important;
    background: rgba(255,255,255,.86) !important;
    box-shadow: 0 8px 16px rgba(42, 88, 146, .13) !important;
}

body .robo-arena .child-arena-premium .ra-live-bottom-nav {
    position: static !important;
    margin: 8px clamp(12px, 4vw, 38px) 0 !important;
    color: #092d82 !important;
    border: 1px solid rgba(129, 160, 204, .24) !important;
    border-radius: clamp(18px, 3.6vw, 30px) !important;
    background: rgba(255,255,255,.9) !important;
    box-shadow: 0 10px 20px rgba(42, 88, 146, .14), inset 0 1px 0 rgba(255,255,255,.96) !important;
}

body .robo-arena .child-arena-premium .ra-live-bottom-nav a {
    color: #092d82 !important;
}

body .robo-arena .child-arena-premium .ra-live-bottom-nav a.is-active {
    color: #fff !important;
    background: linear-gradient(180deg, #18c9ff, #0785ef) !important;
    box-shadow: 0 0 18px rgba(15, 183, 255, .38) !important;
}

@media (max-width: 700px) {
    body .robo-arena .child-arena-premium {
        padding-inline: 0 !important;
    }

    body .robo-arena .child-arena-premium .ra-live-header {
        grid-template-columns: 125px minmax(0, 1fr) 44px !important;
        min-height: 245px !important;
        padding: 16px 16px 0 !important;
    }

    body .robo-arena .child-arena-premium .ra-live-header h1 {
        font-size: clamp(2.5rem, 11vw, 3.8rem) !important;
    }

    body .robo-arena .child-arena-premium .ra-live-arena::after {
        width: 128px !important;
        top: 18px !important;
        right: 46px !important;
        opacity: .98 !important;
    }

    body .robo-arena .child-arena-premium .ra-live-stats article {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto auto !important;
        justify-items: center !important;
        text-align: center !important;
        padding: 8px !important;
    }

    body .robo-arena .child-arena-premium .ra-live-stats article > span {
        grid-row: auto !important;
        width: 42px !important;
        height: 42px !important;
    }

    body .robo-arena .child-arena-premium .ra-live-stats strong {
        max-width: 100% !important;
        overflow: visible !important;
        font-size: 1.9rem !important;
        line-height: .95 !important;
        text-overflow: clip !important;
        white-space: nowrap !important;
    }

    body .robo-arena .child-arena-premium .ra-live-stats small {
        width: 100% !important;
        overflow: visible !important;
        font-size: .72rem !important;
        line-height: 1.05 !important;
        text-align: center !important;
        text-overflow: clip !important;
        white-space: normal !important;
    }

    body .robo-arena .child-arena-premium .ra-live-actions {
        gap: 8px !important;
    }

    body .robo-arena .child-arena-premium .ra-live-action {
        min-height: 168px !important;
        padding: 10px 7px !important;
    }

    body .robo-arena .child-arena-premium .ra-live-action img {
        width: 68px !important;
        height: 68px !important;
    }

    body .robo-arena .child-arena-premium .ra-live-action strong {
        font-size: 1.08rem !important;
    }

    body .robo-arena .child-arena-premium .ra-live-action small {
        font-size: .78rem !important;
    }

    body .robo-arena .child-arena-premium .ra-live-goal {
        grid-template-columns: 48px minmax(0, 1fr) 62px !important;
    }

    body .robo-arena .child-arena-premium .ra-live-goal__chest {
        display: none !important;
    }

    body .robo-arena .child-arena-premium .arena-plan-strip {
        grid-template-columns: 1fr !important;
    }

    body .robo-arena .child-arena-premium .game-hub-grid {
        grid-template-columns: repeat(4, minmax(124px, 1fr)) !important;
        overflow-x: auto !important;
    }
}

body .robo-arena .child-arena-premium .ra-smart-trainer,
body .robo-arena .child-arena-premium .arena-plan-strip {
    background: rgba(255, 255, 255, .88) !important;
}

body .robo-arena .child-arena-premium .ra-live-section-heading h2 {
    text-shadow: 0 2px 0 rgba(255, 255, 255, .78) !important;
}

/* CHILD-LIGHT-ARENA-REFERENCE-002: final spacing and dynamic icon polish */
body .robo-arena .child-arena-premium .ra-live-action:nth-child(2) img {
    width: clamp(82px, 12vw, 124px) !important;
    height: clamp(66px, 10vw, 104px) !important;
    object-fit: contain !important;
    filter: drop-shadow(0 10px 14px rgba(0, 93, 126, .2)) !important;
}

body .robo-arena .child-arena-premium .ra-live-action:not(.is-primary):not(.is-reward) {
    background:
        radial-gradient(circle at 50% 6%, rgba(255, 255, 255, .62), transparent 33%),
        linear-gradient(180deg, rgba(60, 244, 206, .97), rgba(0, 178, 148, .96)) !important;
}

/* IKONICE-IZGLED-001: equal optical size and alignment for all three action cards. */
body .robo-arena .child-arena-premium .ra-live-actions {
    align-items: stretch !important;
}

body .robo-arena .child-arena-premium .ra-live-action,
body .robo-arena .child-arena-premium .ra-live-action:nth-child(1),
body .robo-arena .child-arena-premium .ra-live-action.is-reward {
    min-height: clamp(190px, 36vw, 330px) !important;
    padding: clamp(12px, 2.8vw, 26px) !important;
    grid-template-rows: minmax(0, 1fr) auto auto auto !important;
    align-items: center !important;
}

body .robo-arena .child-arena-premium .ra-live-action img,
body .robo-arena .child-arena-premium .ra-live-action:nth-child(1) img,
body .robo-arena .child-arena-premium .ra-live-action:nth-child(2) img,
body .robo-arena .child-arena-premium .ra-live-action.is-reward img {
    width: clamp(88px, 18vw, 170px) !important;
    height: clamp(88px, 18vw, 170px) !important;
    object-fit: contain !important;
    transform: none !important;
    transform-origin: center center !important;
    align-self: center !important;
    justify-self: center !important;
}

body .robo-arena .child-arena-premium .ra-live-action strong,
body .robo-arena .child-arena-premium .ra-live-action small {
    align-self: center !important;
    margin: 0 !important;
}

body .robo-arena .child-arena-premium .ra-live-action__arrow {
    align-self: end !important;
    margin-top: auto !important;
}

@media (max-width: 700px) {
    body .robo-arena .child-arena-premium .ra-live-action,
    body .robo-arena .child-arena-premium .ra-live-action:nth-child(1),
    body .robo-arena .child-arena-premium .ra-live-action.is-reward {
        min-height: 168px !important;
        padding: 10px 7px !important;
    }

    body .robo-arena .child-arena-premium .ra-live-action img,
    body .robo-arena .child-arena-premium .ra-live-action:nth-child(1) img,
    body .robo-arena .child-arena-premium .ra-live-action:nth-child(2) img,
    body .robo-arena .child-arena-premium .ra-live-action.is-reward img {
        width: 78px !important;
        height: 78px !important;
    }
}

body .robo-arena .child-arena-premium .game-module-card:not(.active) > p,
body .robo-arena .child-arena-premium .game-module-card:not(.active) .game-module-stats small {
    color: #214384 !important;
}

@media (max-width: 700px) {
    body .robo-arena .child-arena-premium .ra-live-actions {
        margin-bottom: 20px !important;
    }

    body .robo-arena .child-arena-premium .ra-live-action__arrow {
        margin-top: auto !important;
        flex: 0 0 42px !important;
        width: 42px !important;
        height: 42px !important;
    }

    body .robo-arena .child-arena-premium .ra-live-action:nth-child(2) img {
        width: 78px !important;
        height: 64px !important;
    }
}

/* CHILD-LIGHT-ARENA-REFERENCE-003: visible reference robot and cleaner cutout icons */
body .robo-arena .child-arena-premium .ra-live-arena::after {
    display: none !important;
}

body .robo-arena .child-arena-premium .ra-live-header__mentor {
    display: block !important;
    position: absolute !important;
    z-index: 2 !important;
    top: clamp(10px, 3vw, 30px) !important;
    right: clamp(28px, 5vw, 72px) !important;
    width: clamp(112px, 30vw, 280px) !important;
    height: auto !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: none !important;
}

body .robo-arena .child-arena-premium .ra-live-header__mentor img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    filter: drop-shadow(0 18px 22px rgba(24, 86, 173, .26)) !important;
}

body .robo-arena .child-arena-premium .ra-live-header h1,
body .robo-arena .child-arena-premium .ra-live-header__title img,
body .robo-arena .child-arena-premium .ra-live-settings {
    position: relative !important;
    z-index: 4 !important;
}

body .robo-arena .child-arena-premium .ra-live-stats img,
body .robo-arena .child-arena-premium .ra-live-goal__star,
body .robo-arena .child-arena-premium .ra-live-action img {
    mix-blend-mode: normal !important;
}

@media (max-width: 700px) {
    body .robo-arena .child-arena-premium .ra-live-header {
        display: block !important;
        min-height: 252px !important;
        padding: 0 !important;
    }

    body .robo-arena .child-arena-premium .ra-live-header__mentor {
        top: 48px !important;
        right: 8px !important;
        width: 112px !important;
        opacity: .98 !important;
    }

    body .robo-arena .child-arena-premium .ra-live-header__title img {
        position: absolute !important;
        top: 24px !important;
        left: 16px !important;
        width: 128px !important;
    }

    body .robo-arena .child-arena-premium .ra-live-header h1 {
        position: absolute !important;
        top: 70px !important;
        left: 144px !important;
        right: 102px !important;
        max-width: none !important;
        margin: 0 !important;
        font-size: clamp(2.15rem, 9vw, 3.15rem) !important;
        line-height: .88 !important;
        text-align: left !important;
    }

    body .robo-arena .child-arena-premium .ra-live-settings {
        position: absolute !important;
        top: 16px !important;
        right: 16px !important;
    }

    body .robo-arena .child-arena-premium .ra-live-stats img {
        transform: scale(1.08) !important;
    }
}

@media (min-width: 701px) {
    body .robo-arena .child-arena-premium {
        display: flex !important;
        grid-template-columns: none !important;
        flex-direction: column !important;
        width: min(100%, 1180px) !important;
        max-width: 1180px !important;
        padding: 0 16px 26px !important;
    }

    body .robo-arena .child-arena-premium .ra-live-arena {
        width: 100% !important;
        max-width: none !important;
        grid-column: auto !important;
        border-radius: 28px !important;
    }

    body .robo-arena .child-arena-premium .ra-live-header {
        display: grid !important;
        grid-template-columns: minmax(180px, 250px) minmax(260px, 1fr) minmax(210px, 300px) 56px !important;
        min-height: clamp(300px, 31vw, 390px) !important;
        align-items: center !important;
        padding: clamp(24px, 3vw, 40px) clamp(26px, 4vw, 46px) 0 !important;
    }

    body .robo-arena .child-arena-premium .ra-live-header__title {
        display: contents !important;
    }

    body .robo-arena .child-arena-premium .ra-live-header__title img {
        position: relative !important;
        grid-column: 1 !important;
        top: auto !important;
        left: auto !important;
        width: min(100%, 240px) !important;
        justify-self: start !important;
    }

    body .robo-arena .child-arena-premium .ra-live-header h1 {
        position: relative !important;
        grid-column: 2 !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        align-self: center !important;
        justify-self: center !important;
        text-align: center !important;
        font-size: clamp(4rem, 6.6vw, 6.2rem) !important;
        line-height: .86 !important;
    }

    body .robo-arena .child-arena-premium .ra-live-header__mentor {
        position: relative !important;
        grid-column: 3 !important;
        top: auto !important;
        right: auto !important;
        width: min(100%, 280px) !important;
        justify-self: center !important;
        align-self: end !important;
    }

    body .robo-arena .child-arena-premium .ra-live-settings {
        position: relative !important;
        grid-column: 4 !important;
        top: auto !important;
        right: auto !important;
        justify-self: end !important;
        align-self: start !important;
    }

    body .robo-arena .child-arena-premium .ra-live-content {
        width: 100% !important;
        max-width: none !important;
        padding-inline: clamp(22px, 4vw, 52px) !important;
    }

    body .robo-arena .child-arena-premium .ra-live-actions,
    body .robo-arena .child-arena-premium .ra-live-stats {
        width: 100% !important;
        max-width: none !important;
    }

    body .robo-arena .child-arena-premium .ra-live-actions {
        min-height: clamp(230px, 28vw, 340px) !important;
        align-items: stretch !important;
    }

    body .robo-arena .child-arena-premium .ra-live-action {
        min-height: clamp(230px, 28vw, 340px) !important;
    }

    body .robo-arena .child-arena-premium .ra-live-action img {
        width: clamp(104px, 13vw, 174px) !important;
        height: clamp(90px, 13vw, 174px) !important;
    }

    body .robo-arena .child-arena-premium .arena-plan-strip,
    body .robo-arena .child-arena-premium .game-hub-grid,
    body .robo-arena .child-arena-premium .ra-live-utility,
    body .robo-arena .child-arena-premium .ra-live-bottom-nav,
    body .robo-arena .child-arena-premium .ra-live-section-heading {
        grid-column: auto !important;
        width: auto !important;
        max-width: none !important;
    }
}
/* GLOBAL-PREMIUM-TYPOGRAPHY-001
   Shared visual baseline for the premium Robo Arena redesign. */
@font-face {
    font-family: "Robo Arena Premium";
    src: url("../fonts/fredoka/fredoka-500.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Robo Arena Premium";
    src: url("../fonts/fredoka/fredoka-600.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Robo Arena Premium";
    src: url("../fonts/fredoka/fredoka-700.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
:root {
    --ra-premium-font: "Robo Arena Premium", "Arial Rounded MT Bold", "Trebuchet MS", Arial, sans-serif;
}
body.robo-arena-page,
body.parent-shell,
body.admin-shell,
.robo-arena,
.parent-premium-page,
.parent-auth-page,
.admin-shell,
.ra-secondary-topbar,
.ra-secondary-bottom-nav {
    font-family: var(--ra-premium-font) !important;
    letter-spacing: 0 !important;
}
body.robo-arena-page button,
body.robo-arena-page input,
body.robo-arena-page select,
body.robo-arena-page textarea,
body.parent-shell button,
body.parent-shell input,
body.parent-shell select,
body.parent-shell textarea,
body.admin-shell button,
body.admin-shell input,
body.admin-shell select,
body.admin-shell textarea {
    font-family: inherit !important;
    letter-spacing: 0 !important;
}

/* CHILD-ID-FINAL-REFERENCE-001: align active child ID entry with final-reference-pack/02-child-flow. */
body.flow-child-id-page {
    min-width: 320px;
    min-height: 100dvh;
    color: #09215d;
    background:
        radial-gradient(circle at 50% 6%, rgba(50, 179, 255, .34), transparent 34rem),
        linear-gradient(180deg, #021c52 0%, #073a86 48%, #031849 100%) !important;
    font-family: var(--ra-premium-font) !important;
}

body.flow-child-id-page .child-id-screen {
    display: grid !important;
    min-height: 100dvh !important;
    padding: 18px !important;
    place-items: center !important;
}

body.flow-child-id-page .child-id-stage {
    width: min(100%, 390px) !important;
    min-height: min(100dvh - 36px, 812px) !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 28px !important;
    background:
        radial-gradient(circle at 50% 18%, rgba(255, 255, 255, .95), rgba(242, 250, 255, .92) 25rem, rgba(228, 244, 255, .96) 100%),
        #eff9ff !important;
    box-shadow:
        0 30px 78px rgba(0, 6, 36, .38),
        inset 0 0 0 1px rgba(255, 255, 255, .9) !important;
}

body.flow-child-id-page .child-id-stage::before {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(circle at 12% 14%, rgba(23, 165, 255, .14), transparent 8rem),
        radial-gradient(circle at 88% 12%, rgba(119, 187, 255, .18), transparent 9rem),
        linear-gradient(180deg, rgba(255, 255, 255, .75), rgba(232, 246, 255, .9));
    content: "";
    pointer-events: none;
}

body.flow-child-id-page .child-id-stage::after {
    border: 2px solid rgba(65, 177, 255, .56) !important;
    border-radius: inherit !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .85),
        inset 0 0 24px rgba(45, 169, 255, .18) !important;
}

body.flow-child-id-page .arena-back-button,
body.flow-child-id-page .child-id-back {
    top: 18px !important;
    left: 18px !important;
    width: 42px !important;
    height: 42px !important;
    border: 1px solid rgba(24, 123, 217, .2) !important;
    background: rgba(255, 255, 255, .82) !important;
    box-shadow: 0 8px 18px rgba(15, 76, 148, .16) !important;
}

body.flow-child-id-page .arena-back-button:hover,
body.flow-child-id-page .child-id-back:hover {
    background: #fff !important;
}

body.flow-child-id-page .arena-back-button > img,
body.flow-child-id-page .child-id-back > img {
    width: 24px !important;
    height: 24px !important;
    filter: invert(35%) sepia(98%) saturate(2384%) hue-rotate(201deg) brightness(95%) contrast(96%) !important;
}

body.flow-child-id-page .child-id-panel {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    min-height: min(100dvh - 36px, 812px) !important;
    margin: 0 !important;
    padding: 18px 20px 20px !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #08236a !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: center !important;
}

body.flow-child-id-page .child-id-topbar {
    display: grid;
    min-height: 42px;
    place-items: center;
    color: #1146b7;
    font-size: .88rem;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

body.flow-child-id-page .child-id-lock {
    display: grid;
    width: 88px;
    height: 88px;
    margin: 20px auto 18px;
    place-items: center;
    border: 1px solid rgba(78, 160, 231, .38);
    border-radius: 24px;
    background: linear-gradient(180deg, #e9f7ff, #cfefff);
    box-shadow:
        0 15px 30px rgba(34, 123, 210, .18),
        inset 0 1px 0 rgba(255, 255, 255, .95);
}

body.flow-child-id-page .child-id-lock img {
    width: 58px;
    height: 58px;
    object-fit: contain;
}

body.flow-child-id-page .child-id-panel h1 {
    max-width: 270px;
    margin: 0 auto !important;
    color: #08236a !important;
    font-size: 1.16rem !important;
    font-weight: 900 !important;
    line-height: 1.18 !important;
    text-shadow: none !important;
}

body.flow-child-id-page .child-id-intro {
    max-width: 280px;
    margin: 7px auto 0 !important;
    color: #08236a !important;
    font-size: 1.08rem !important;
    font-weight: 800 !important;
    line-height: 1.22 !important;
}

body.flow-child-id-page .child-id-form {
    margin-top: 18px !important;
}

body.flow-child-id-page .child-id-input-shell {
    height: 45px !important;
}

body.flow-child-id-page .child-id-slot-groups {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
}

body.flow-child-id-page .child-id-slot-group {
    display: grid !important;
    min-width: 0 !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.flow-child-id-page .child-id-slot {
    min-width: 0 !important;
    height: 45px !important;
    border: 1px solid rgba(34, 105, 185, .18) !important;
    border-radius: 8px !important;
    color: #061d62 !important;
    background: linear-gradient(180deg, #ffffff, #eef7ff) !important;
    box-shadow:
        0 5px 12px rgba(22, 71, 127, .12),
        inset 0 1px 0 rgba(255, 255, 255, .98) !important;
    font-family: var(--ra-premium-font) !important;
    font-size: 1.06rem !important;
    font-weight: 900 !important;
    line-height: 45px !important;
}

body.flow-child-id-page .child-id-slot:first-child {
    border-left: 1px solid rgba(34, 105, 185, .18) !important;
}

body.flow-child-id-page .child-id-slot-groups:not(.has-value) .child-id-slot::before {
    color: #061d62 !important;
    opacity: .95 !important;
}

body.flow-child-id-page #child-id {
    position: absolute !important;
    z-index: 3 !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: .01 !important;
    -webkit-text-fill-color: transparent !important;
}

body.flow-child-id-page .child-id-message {
    min-height: 19px !important;
    margin: 5px 0 0 !important;
    color: #b51d38 !important;
    font-size: .76rem !important;
    font-weight: 800 !important;
}

body.flow-child-id-page .child-id-info {
    display: grid !important;
    min-height: 56px !important;
    margin-top: 5px !important;
    padding: 8px 12px !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: center !important;
    border: 1px solid rgba(10, 174, 113, .38) !important;
    border-radius: 13px !important;
    color: #074a58 !important;
    background: linear-gradient(180deg, #f2fff9, #def9ee) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9) !important;
    font-size: .82rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    text-align: left !important;
}

body.flow-child-id-page .child-id-info__icon {
    width: 30px !important;
    height: 30px !important;
    border: 0 !important;
    border-radius: 50% !important;
    color: #fff !important;
    background: linear-gradient(180deg, #31d489, #13a667) !important;
    box-shadow: 0 7px 14px rgba(18, 164, 103, .25) !important;
}

body.flow-child-id-page .child-id-info__icon::before {
    color: #fff;
    content: "\2713";
    font-size: 1rem;
    font-weight: 900;
}

body.flow-child-id-page .child-id-keypad {
    display: grid;
    margin-top: 18px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

body.flow-child-id-page .child-id-keypad button {
    display: grid;
    min-height: 50px;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(35, 96, 176, .16);
    border-radius: 10px;
    color: #061d62;
    background: linear-gradient(180deg, #fff, #edf6ff);
    box-shadow:
        0 5px 14px rgba(25, 91, 160, .14),
        inset 0 1px 0 rgba(255, 255, 255, .95);
    font: inherit;
    font-size: 1.42rem;
    font-weight: 900;
    cursor: pointer;
}

body.flow-child-id-page .child-id-keypad button:focus-visible,
body.flow-child-id-page .child-id-help summary:focus-visible {
    outline: 3px solid #0f86ff !important;
    outline-offset: 2px !important;
}

body.flow-child-id-page .child-id-keypad__clear::before {
    color: #1478d8;
    content: "\232B";
    font-size: 1.2rem;
    font-weight: 900;
}

body.flow-child-id-page .child-id-submit {
    width: auto !important;
    min-height: 50px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #28d8bd, #13aa86) !important;
    box-shadow:
        0 7px 17px rgba(17, 164, 129, .28),
        inset 0 1px 0 rgba(255, 255, 255, .38) !important;
}

body.flow-child-id-page .child-id-submit span::before {
    color: #fff;
    content: "\2713";
    font-size: 1.35rem;
    font-weight: 900;
}

body.flow-child-id-page .child-id-keypad button:hover {
    transform: translateY(-1px);
    filter: brightness(1.03);
}

body.flow-child-id-page .child-id-keypad button:active {
    transform: translateY(1px);
}

body.flow-child-id-page .child-id-help {
    margin-top: auto !important;
    padding-top: 15px !important;
}

body.flow-child-id-page .child-id-help summary {
    min-height: 44px !important;
    color: #0d55b8 !important;
    font-size: .9rem !important;
    font-weight: 900 !important;
}

body.flow-child-id-page .child-id-help summary > span {
    width: 30px !important;
    height: 30px !important;
    color: #268df3 !important;
    border-width: 2px !important;
    font-size: .92rem !important;
}

body.flow-child-id-page .child-id-help__content {
    color: #09215d !important;
    background: #fff !important;
    border: 1px solid rgba(32, 111, 190, .18) !important;
    box-shadow: 0 18px 34px rgba(25, 71, 132, .22) !important;
}

body.flow-child-id-page .child-id-help__content a {
    border: 0 !important;
    border-radius: 11px !important;
    background: linear-gradient(180deg, #188cff, #0877dc) !important;
    box-shadow: 0 7px 15px rgba(8, 119, 220, .24) !important;
}

@media (max-width: 720px) {
    body.flow-child-id-page .child-id-screen {
        padding: 0 !important;
        place-items: stretch !important;
    }

    body.flow-child-id-page .child-id-stage,
    body.flow-child-id-page .child-id-panel {
        width: 100% !important;
        min-height: 100dvh !important;
        border-radius: 0 !important;
    }

    body.flow-child-id-page .child-id-stage::after {
        border-radius: 0 !important;
    }
}

@media (max-width: 370px) {
    body.flow-child-id-page .child-id-panel {
        padding-inline: 16px !important;
    }

    body.flow-child-id-page .child-id-lock {
        margin-top: 14px;
    }

    body.flow-child-id-page .child-id-slot-group {
        gap: 5px !important;
    }

    body.flow-child-id-page .child-id-slot {
        height: 42px !important;
        font-size: .98rem !important;
        line-height: 42px !important;
    }
}

@media (max-height: 760px) and (max-width: 720px) {
    body.flow-child-id-page .child-id-lock {
        width: 76px;
        height: 76px;
        margin: 12px auto;
    }

    body.flow-child-id-page .child-id-lock img {
        width: 50px;
        height: 50px;
    }

    body.flow-child-id-page .child-id-keypad {
        margin-top: 12px;
        gap: 7px;
    }

    body.flow-child-id-page .child-id-keypad button,
    body.flow-child-id-page .child-id-submit {
        min-height: 45px !important;
    }
}

/* CHILD-LOGIN-RESTORE-001: restore the approved dark child ID screen after the arena-scope correction. */
body.flow-child-id-page {
    color: #fff !important;
    background: radial-gradient(circle at 50% 23%, rgba(0, 110, 255, .32), transparent 31rem), #00132f !important;
}

body.flow-child-id-page .child-id-screen {
    display: grid !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    place-items: center !important;
    padding: 18px !important;
}

body.flow-child-id-page .child-id-stage {
    position: relative !important;
    width: min(100%, 430px) !important;
    min-height: min(920px, calc(100dvh - 36px)) !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 28px !important;
    background: #00142f !important;
    box-shadow: 0 28px 70px rgba(0, 2, 22, .48), inset 0 0 70px rgba(0, 102, 212, .08) !important;
}

body.flow-child-id-page .child-id-stage::before {
    display: none !important;
}

body.flow-child-id-page .child-id-stage::after {
    position: absolute !important;
    inset: 0 !important;
    z-index: 30 !important;
    display: block !important;
    border: 2px solid rgba(34, 185, 255, .72) !important;
    border-radius: inherit !important;
    box-shadow: inset 0 0 0 1px rgba(130, 231, 255, .16), inset 0 0 30px rgba(14, 165, 233, .14) !important;
    content: "" !important;
    pointer-events: none !important;
}

body.flow-child-id-page .child-id-scene {
    position: relative !important;
    z-index: 2 !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 853 / 705 !important;
    object-fit: cover !important;
}

body.flow-child-id-page .arena-back-button,
body.flow-child-id-page .child-id-back {
    top: 22px !important;
    left: 24px !important;
    width: 52px !important;
    height: 52px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.flow-child-id-page .arena-back-button:hover,
body.flow-child-id-page .child-id-back:hover {
    background: rgba(19, 111, 194, .24) !important;
}

body.flow-child-id-page .arena-back-button > img,
body.flow-child-id-page .child-id-back > img {
    width: 42px !important;
    height: 42px !important;
    object-fit: contain !important;
    filter: none !important;
}

body.flow-child-id-page .child-id-panel {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    min-height: 555px !important;
    margin-top: -8.3% !important;
    padding: 43px 28px 22px !important;
    flex-direction: column !important;
    border: 2px solid #185984 !important;
    border-top-color: transparent !important;
    border-bottom: 0 !important;
    border-radius: 28px 28px 0 0 !important;
    color: #fff !important;
    background: linear-gradient(180deg, #001b3a 0%, #001630 100%) !important;
    box-shadow: inset 0 0 45px rgba(0, 88, 176, .09) !important;
    text-align: center !important;
}

body.flow-child-id-page .child-id-panel h1 {
    margin: 0 !important;
    color: #fff !important;
    font-size: clamp(2rem, 8.4vw, 2.45rem) !important;
    font-weight: 900 !important;
    line-height: 1.08 !important;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .3) !important;
}

body.flow-child-id-page .child-id-intro {
    margin: 12px auto 0 !important;
    color: #c6d1e2 !important;
    font-size: clamp(1rem, 4.4vw, 1.15rem) !important;
    font-weight: 700 !important;
    line-height: 1.48 !important;
}

body.flow-child-id-page .child-id-intro strong,
body.flow-child-id-page .child-id-info strong {
    color: #168dff !important;
}

body.flow-child-id-page .child-id-form {
    margin-top: 22px !important;
}

body.flow-child-id-page .child-id-input-shell {
    position: relative !important;
    height: 66px !important;
}

body.flow-child-id-page .child-id-slot-groups {
    position: absolute !important;
    z-index: 1 !important;
    inset: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    pointer-events: none !important;
}

body.flow-child-id-page .child-id-slot-group {
    display: grid !important;
    min-width: 0 !important;
    overflow: hidden !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0 !important;
    border: 2px solid #266d9d !important;
    border-radius: 12px !important;
    background: rgba(0, 18, 43, .72) !important;
    box-shadow: inset 0 3px 13px rgba(0, 0, 18, .38) !important;
}

body.flow-child-id-page .child-id-slot {
    display: grid !important;
    min-width: 0 !important;
    height: auto !important;
    place-items: center !important;
    color: #fff !important;
    border: 0 !important;
    border-left: 1px solid rgba(53, 112, 151, .42) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-family: Consolas, "Courier New", monospace !important;
    font-size: clamp(1.42rem, 7vw, 1.9rem) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-align: center !important;
}

body.flow-child-id-page .child-id-slot:first-child {
    border-left: 0 !important;
}

body.flow-child-id-page .child-id-slot-groups:not(.has-value) .child-id-slot::before {
    color: rgba(255, 255, 255, .88) !important;
    content: attr(data-placeholder) !important;
}

body.flow-child-id-page #child-id {
    position: absolute !important;
    z-index: 3 !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 16px !important;
    letter-spacing: 0 !important;
    opacity: .01 !important;
    caret-color: transparent !important;
    cursor: text !important;
    -webkit-text-fill-color: transparent !important;
}

body.flow-child-id-page .child-id-message {
    min-height: 20px !important;
    margin: 5px 0 0 !important;
    color: #ffb8c0 !important;
    font-size: .76rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

body.flow-child-id-page .child-id-info {
    display: grid !important;
    min-height: 74px !important;
    margin-top: 0 !important;
    padding: 11px 15px !important;
    grid-template-columns: 46px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    border: 1px solid #185984 !important;
    border-radius: 14px !important;
    color: #becce0 !important;
    background: rgba(0, 16, 40, .52) !important;
    box-shadow: none !important;
    font-size: .88rem !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
    text-align: left !important;
}

body.flow-child-id-page .child-id-info__icon,
body.flow-child-id-page .child-id-help summary > span {
    display: grid !important;
    width: 38px !important;
    height: 38px !important;
    place-items: center !important;
    color: #2499ff !important;
    border: 3px solid currentColor !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 1.16rem !important;
    font-weight: 900 !important;
}

body.flow-child-id-page .child-id-info__icon::before {
    content: none !important;
}

body.flow-child-id-page .child-id-submit {
    display: grid !important;
    width: 100% !important;
    min-height: 66px !important;
    margin-top: 18px !important;
    padding: 8px 22px !important;
    grid-template-columns: minmax(0, 1fr) 30px !important;
    align-items: center !important;
    border: 2px solid #71f0d7 !important;
    border-radius: 18px !important;
    color: #fff !important;
    background: linear-gradient(135deg, #20cdb7, #099b8c) !important;
    font: inherit !important;
    font-size: 1.2rem !important;
    font-weight: 900 !important;
    box-shadow: 0 9px 22px rgba(0, 208, 185, .25), inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -4px 0 rgba(0, 70, 76, .22) !important;
}

body.flow-child-id-page .child-id-submit__arrow {
    width: 18px !important;
    height: 18px !important;
    justify-self: center !important;
    border-top: 5px solid #fff !important;
    border-right: 5px solid #fff !important;
    transform: rotate(45deg) !important;
}

body.flow-child-id-page .child-id-submit span::before {
    content: none !important;
}

body.flow-child-id-page .child-id-help {
    position: relative !important;
    margin-top: auto !important;
    padding-top: 14px !important;
}

body.flow-child-id-page .child-id-help summary {
    display: inline-grid !important;
    min-height: 48px !important;
    padding: 4px 8px !important;
    grid-template-columns: 38px auto !important;
    align-items: center !important;
    gap: 12px !important;
    color: #2c9fff !important;
    border-radius: 10px !important;
    font-size: .98rem !important;
    font-weight: 700 !important;
}

body.flow-child-id-page .child-id-help summary > span {
    width: 34px !important;
    height: 34px !important;
    border-width: 2px !important;
    font-size: 1rem !important;
}

body.flow-child-id-page .child-id-help__content {
    position: absolute !important;
    z-index: 9 !important;
    right: 0 !important;
    bottom: 52px !important;
    left: 0 !important;
    padding: 16px !important;
    border: 1px solid #2a79ad !important;
    border-radius: 15px !important;
    color: #d8e4f1 !important;
    background: #00234a !important;
    box-shadow: 0 18px 34px rgba(0, 0, 20, .46) !important;
}

body.flow-child-id-page .child-id-help__content a {
    display: inline-grid !important;
    min-height: 44px !important;
    padding: 8px 14px !important;
    place-items: center !important;
    color: #fff !important;
    border: 1px solid #4cb8ff !important;
    border-radius: 10px !important;
    background: #087ee1 !important;
    font-size: .75rem !important;
    font-weight: 900 !important;
    text-decoration: none !important;
}

body.flow-child-id-page .child-id-keypad,
body.flow-child-id-page .child-id-lock,
body.flow-child-id-page .child-id-topbar {
    display: none !important;
}

@media (max-width: 720px) {
    body.flow-child-id-page .child-id-screen {
        padding: 0 !important;
        place-items: start center !important;
    }

    body.flow-child-id-page .child-id-stage {
        width: 100% !important;
        min-height: 100dvh !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    body.flow-child-id-page .child-id-stage::after {
        border-radius: 0 !important;
    }

    body.flow-child-id-page .child-id-panel {
        min-height: calc(100dvh - 74.35vw) !important;
    }
}

@media (max-width: 370px) {
    body.flow-child-id-page .child-id-panel {
        padding-right: 20px !important;
        padding-left: 20px !important;
    }

    body.flow-child-id-page .child-id-slot-groups {
        gap: 12px !important;
    }

    body.flow-child-id-page .child-id-slot {
        font-size: 1.35rem !important;
    }

    body.flow-child-id-page .child-id-info {
        padding-inline: 12px !important;
        grid-template-columns: 40px minmax(0, 1fr) !important;
        gap: 9px !important;
        font-size: .82rem !important;
    }
}

/* FINAL-AUDIT-20260726: actual final cascade layer for premium alignment. */
.robo-arena .arena-plan-strip .ra-trainer-cta {
    min-height: 46px !important;
    height: auto !important;
    padding: 9px 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    line-height: 1.05 !important;
}

.robo-arena .ra-world-arrow {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    display: inline-grid !important;
    place-items: center !important;
}

.robo-arena .mode-buttons .chip {
    min-height: 46px !important;
}

@media (min-width: 980px) {
    body.robo-arena-page.ra-profile-page .robo-arena.ra-child-profile {
        display: flex !important;
        justify-content: center !important;
        align-items: flex-start !important;
    }

    body.robo-arena-page.ra-profile-page .robo-arena.ra-child-profile .ra-profile-reference {
        width: min(100%, 1040px) !important;
        max-width: 1040px !important;
        margin-inline: auto !important;
        grid-template-columns: minmax(390px, 430px) minmax(420px, 1fr) !important;
        grid-template-areas:
            "top top"
            "hero mission"
            "stats list"
            "settings list" !important;
        justify-content: center !important;
        align-items: start !important;
        gap: 14px !important;
    }

    body.robo-arena-page.ra-profile-page .robo-arena.ra-child-profile .ra-profile-reference__top {
        grid-area: top !important;
        width: 430px !important;
    }

    body.robo-arena-page.ra-profile-page .robo-arena.ra-child-profile .ra-profile-reference__hero {
        grid-area: hero !important;
    }

    body.robo-arena-page.ra-profile-page .robo-arena.ra-child-profile .ra-profile-reference__stats {
        grid-area: stats !important;
    }

    body.robo-arena-page.ra-profile-page .robo-arena.ra-child-profile .ra-profile-reference__mission {
        grid-area: mission !important;
        min-height: 170px !important;
    }

    body.robo-arena-page.ra-profile-page .robo-arena.ra-child-profile .ra-profile-reference__list {
        grid-area: list !important;
        min-height: 372px !important;
    }

    body.robo-arena-page.ra-profile-page .robo-arena.ra-child-profile .ra-profile-reference__settings-panel {
        grid-area: settings !important;
    }
}

/* WORLD-CARD-ICON-NORMALIZE-FINAL-20260728: same visual rhythm for every world in every galaxy. */
.robo-arena .ra-world-carousel {
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) 46px !important;
    align-items: center !important;
    gap: 8px !important;
}

.robo-arena .ra-world-track {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: clamp(88px, 20vw, 126px) !important;
    gap: clamp(10px, 2.2vw, 14px) !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
}

.robo-arena .ra-world-track::-webkit-scrollbar {
    display: none !important;
}

.robo-arena .ra-world-card {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    grid-template-rows: clamp(72px, 16vw, 92px) minmax(32px, auto) 20px !important;
    align-items: start !important;
    justify-items: center !important;
    gap: 6px !important;
    padding: 10px 8px 8px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    scroll-snap-align: start !important;
}

.robo-arena .ra-world-art {
    position: relative !important;
    display: grid !important;
    width: clamp(68px, 15vw, 88px) !important;
    height: clamp(58px, 13vw, 76px) !important;
    min-width: clamp(68px, 15vw, 88px) !important;
    min-height: clamp(58px, 13vw, 76px) !important;
    margin: 0 auto !important;
    place-items: end center !important;
    overflow: visible !important;
}

.robo-arena .ra-world-art > img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center bottom !important;
    transform: none !important;
    filter: drop-shadow(0 6px 10px rgba(33, 96, 160, .22)) !important;
}

.robo-arena .ra-world-art > b {
    position: absolute !important;
    left: 50% !important;
    bottom: -2px !important;
    display: grid !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    place-items: center !important;
    transform: translateX(-50%) !important;
    border-radius: 999px !important;
    border: 2px solid rgba(255, 255, 255, .9) !important;
    background: linear-gradient(180deg, #35c9ff 0%, #127be8 100%) !important;
    box-shadow: 0 4px 10px rgba(23, 103, 196, .28) !important;
    color: #fff !important;
    font-size: .78rem !important;
    font-weight: 950 !important;
    line-height: 1 !important;
}

.robo-arena .ra-card-lock {
    position: absolute !important;
    top: 2px !important;
    right: 2px !important;
    display: grid !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    place-items: center !important;
    border-radius: 999px !important;
    background: radial-gradient(circle at 35% 28%, #fff8c7 0 20%, #ffd85c 42%, #d99b10 100%) !important;
    box-shadow: 0 4px 10px rgba(133, 92, 0, .24) !important;
}

.robo-arena .ra-card-lock > img {
    display: block !important;
    width: 72% !important;
    height: 72% !important;
    object-fit: contain !important;
}

.robo-arena .ra-world-card > strong {
    display: flex !important;
    min-height: 30px !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    color: #123a88 !important;
    font-size: clamp(.58rem, 1.9vw, .74rem) !important;
    font-weight: 950 !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
}

.robo-arena .ra-world-stars {
    display: grid !important;
    grid-template-columns: repeat(3, 13px) !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 2px !important;
    width: 43px !important;
    height: 16px !important;
    margin: 0 auto !important;
}

.robo-arena .ra-world-stars img {
    display: block !important;
    width: 13px !important;
    height: 13px !important;
    object-fit: contain !important;
}

.robo-arena .ra-world-stars img.is-empty {
    visibility: hidden !important;
    opacity: 0 !important;
}

@media (max-width: 430px) {
    .robo-arena .ra-world-carousel {
        grid-template-columns: 42px minmax(0, 1fr) 42px !important;
        gap: 6px !important;
    }

    .robo-arena .ra-world-track {
        grid-auto-columns: calc((100% - 30px) / 4) !important;
        gap: 10px !important;
    }

    .robo-arena .ra-world-card {
        grid-template-rows: 68px 30px 18px !important;
        gap: 5px !important;
        padding: 8px 6px 7px !important;
    }

    .robo-arena .ra-world-art {
        width: 64px !important;
        height: 58px !important;
        min-width: 64px !important;
        min-height: 58px !important;
    }

    .robo-arena .ra-world-card > strong {
        font-size: .56rem !important;
    }
}

@media (min-width: 720px) {
    .robo-arena .ra-world-track {
        grid-auto-columns: 128px !important;
        gap: 14px !important;
    }

    .robo-arena .ra-world-card {
        grid-template-rows: 94px 34px 20px !important;
    }

    .robo-arena .ra-world-art {
        width: 90px !important;
        height: 78px !important;
        min-width: 90px !important;
        min-height: 78px !important;
    }
}

/* 2026-07-29: public entry and parent auth screens from the approved sky reference. */
body.auth-sky-page {
    min-width: 320px;
    margin: 0;
    color: #0b327a;
    background-color: #8bdcff;
    background-image: url("../images/robo-arena/child-light/arena-sky-no-rainbow.png");
    background-position: top center;
    background-size: max(100%, 940px) auto;
    background-attachment: fixed;
    font-family: "Arial Rounded MT Bold", "Trebuchet MS", Arial, sans-serif;
    letter-spacing: 0;
}

body.auth-sky-page *,
body.auth-sky-page *::before,
body.auth-sky-page *::after {
    box-sizing: border-box;
}

body.auth-sky-page img {
    display: block;
}

.auth-entry-screen {
    width: 100%;
    min-height: 100dvh;
    padding: 24px 16px 34px;
}

.auth-entry {
    width: min(100%, 900px);
    margin: 0 auto;
}

.auth-entry__hero {
    position: relative;
    min-height: 500px;
}

.auth-entry__logo {
    position: absolute;
    z-index: 2;
    top: 10px;
    left: 3%;
    width: min(49%, 430px);
    height: auto;
    filter: drop-shadow(0 10px 18px rgba(0, 69, 145, .22));
}

.auth-entry__robot {
    position: absolute;
    z-index: 3;
    top: 24px;
    right: 2%;
    width: min(42%, 355px);
    height: auto;
    filter: drop-shadow(0 12px 16px rgba(0, 73, 142, .24));
}

.auth-entry__hero p {
    position: absolute;
    right: 8%;
    bottom: 56px;
    width: 43%;
    margin: 0;
    color: #082b72;
    font-size: clamp(1.1rem, 2.8vw, 1.65rem);
    font-weight: 900;
    line-height: 1.35;
    text-align: center;
}

.auth-entry__panel,
.auth-entry__install,
.auth-entry__safety {
    border: 1px solid rgba(107, 162, 215, .42);
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 14px 32px rgba(32, 105, 153, .18);
    backdrop-filter: blur(7px);
}

.auth-entry__panel {
    padding: 30px 26px;
    border-radius: 34px;
}

.auth-entry__panel h1 {
    display: flex;
    margin: 0 0 28px;
    align-items: center;
    justify-content: center;
    gap: 18px;
    color: #0d3b87;
    font-size: clamp(1.45rem, 4vw, 2.25rem);
    font-weight: 950;
    line-height: 1.1;
    text-align: center;
    text-transform: uppercase;
}

.auth-entry__panel h1 span {
    color: #ffc014;
    font-size: .85em;
}

.auth-entry__choices {
    display: grid;
    gap: 18px;
}

.auth-entry__choice {
    display: grid;
    min-height: 142px;
    padding: 18px 20px;
    grid-template-columns: 112px minmax(0, 1fr) 230px;
    align-items: center;
    gap: 20px;
    border: 1px solid #c8ddf2;
    border-radius: 28px;
    color: #0b327a;
    background: #fff;
    box-shadow: 0 8px 18px rgba(30, 92, 137, .13);
    text-decoration: none;
    transition: transform .16s ease, box-shadow .16s ease;
}

.auth-entry__choice:hover {
    transform: translateY(-2px);
    box-shadow: 0 13px 24px rgba(30, 92, 137, .19);
}

.auth-entry__choice:focus-visible,
.auth-entry__install:focus-visible {
    outline: 4px solid #ffc928;
    outline-offset: 4px;
}

.auth-entry__choice-icon {
    display: grid;
    width: 100px;
    height: 100px;
    place-items: center;
    border: 3px solid #d6e8fb;
    border-radius: 50%;
    background: linear-gradient(145deg, #fff, #e9f6ff);
    box-shadow: 0 7px 14px rgba(23, 86, 145, .14);
}

.auth-entry__choice-icon img {
    width: 62px;
    height: 62px;
    object-fit: contain;
}

.auth-entry__choice--login .auth-entry__choice-icon img,
.auth-entry__choice--register .auth-entry__choice-icon img {
    width: 72px;
    height: 72px;
}

.auth-entry__choice--login .auth-entry__choice-icon {
    border-color: #b9e4ff;
    background: radial-gradient(circle at 32% 24%, #fff 0 23%, #e7f7ff 58%, #ccecff 100%);
}

.auth-entry__choice--register .auth-entry__choice-icon {
    border-color: #e2ccff;
    background: radial-gradient(circle at 32% 24%, #fff 0 22%, #f3e9ff 58%, #e4d1ff 100%);
}

.auth-entry__choice-copy {
    min-width: 0;
}

.auth-entry__choice-copy strong,
.auth-entry__choice-copy small {
    display: block;
}

.auth-entry__choice-copy strong {
    margin-bottom: 7px;
    color: #0a327d;
    font-size: clamp(1rem, 2.4vw, 1.35rem);
    font-weight: 950;
    text-transform: uppercase;
}

.auth-entry__choice-copy small {
    color: #3f5d8d;
    font-size: clamp(.88rem, 1.8vw, 1.05rem);
    line-height: 1.45;
}

.auth-entry__choice-cta {
    display: flex;
    min-height: 76px;
    padding: 14px 20px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border: 2px solid rgba(255, 255, 255, .6);
    border-radius: 22px;
    color: #fff;
    background: linear-gradient(180deg, #24b7f5, #0878e5);
    box-shadow: 0 9px 16px rgba(5, 105, 207, .25);
    font-size: clamp(.95rem, 2.2vw, 1.25rem);
    font-weight: 950;
    text-align: center;
    text-transform: uppercase;
}

.auth-entry__choice-cta b {
    font-size: 2rem;
    line-height: .8;
}

.auth-entry__choice--register .auth-entry__choice-cta {
    background: linear-gradient(180deg, #bd62f5, #6525dc);
}

.auth-entry__panel--roles {
    padding-top: 26px;
}

.auth-entry__panel--roles h1 {
    color: #0b327a;
    font-size: clamp(1.9rem, 5.7vw, 3.35rem);
    line-height: 1.06;
}

.auth-entry__panel--roles h1 span {
    color: #1971f3;
}

.auth-entry__lead {
    margin: -6px 0 24px;
    color: #244b86;
    font-size: clamp(1rem, 2.2vw, 1.3rem);
    font-weight: 850;
    text-align: center;
}

.auth-entry__role-group {
    display: grid;
    gap: 12px;
    padding: 18px 20px 20px;
    border: 2px solid rgba(204, 229, 253, .95);
    border-radius: 28px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 10px 22px rgba(34, 104, 164, .12);
}

.auth-entry__role-group > h2 {
    display: flex;
    margin: 0;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #0b327a;
    font-size: clamp(1.25rem, 3.3vw, 2rem);
    font-weight: 950;
    line-height: 1.1;
    text-align: center;
    text-transform: uppercase;
}

.auth-entry__role-group > h2 img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.auth-entry__role-group > h2 span {
    color: #ffbf1e;
}

.auth-entry__role-group > p {
    margin: -4px 0 4px;
    color: #244b86;
    font-size: clamp(.9rem, 2vw, 1.08rem);
    font-weight: 760;
    line-height: 1.35;
    text-align: center;
}

.auth-entry__role-group .auth-entry__choice {
    min-height: 122px;
}

.auth-entry__role-group--teacher {
    border-color: rgba(204, 222, 255, .98);
}

.auth-entry__choice--child {
    border-color: #9bdc72;
    background: linear-gradient(90deg, #f4ffeb, #fff);
}

.auth-entry__choice--child .auth-entry__choice-copy strong {
    color: #138125;
}

.auth-entry__choice--child .auth-entry__choice-cta {
    background: linear-gradient(180deg, #55da66, #0eaa32);
}

.auth-entry__install {
    display: grid;
    min-height: 150px;
    margin-top: 20px;
    padding: 18px 26px;
    grid-template-columns: 150px minmax(0, 1fr) 210px;
    align-items: center;
    gap: 22px;
    border-radius: 30px;
    color: #0b327a;
    text-decoration: none;
}

.auth-entry__install > img {
    width: 135px;
    height: 110px;
    object-fit: contain;
}

.auth-entry__install span > * {
    display: block;
}

.auth-entry__install small {
    margin-bottom: 8px;
    color: #0b75db;
    font-size: .92rem;
    font-style: normal;
    font-weight: 950;
    text-transform: uppercase;
}

.auth-entry__install strong {
    margin-bottom: 6px;
    font-size: 1.35rem;
}

.auth-entry__install em {
    color: #4d6591;
    font-size: .95rem;
    font-style: normal;
    line-height: 1.4;
}

.auth-entry__install > b {
    display: flex;
    min-height: 68px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-radius: 20px;
    color: #fff;
    background: linear-gradient(180deg, #5edb63, #17a635);
    box-shadow: 0 8px 16px rgba(20, 143, 48, .23);
    font-size: 1.12rem;
    text-transform: uppercase;
}

.auth-entry__safety {
    display: flex;
    width: min(100%, 700px);
    min-height: 72px;
    margin: 20px auto 0;
    padding: 12px 22px;
    align-items: center;
    justify-content: center;
    gap: 14px;
    border-radius: 24px;
    color: #385586;
    line-height: 1.35;
}

.auth-entry__safety img {
    width: 48px;
    height: 48px;
}

.auth-entry__safety strong {
    display: block;
    color: #0b327a;
}

/* Parent registration. */
body.flow-parent-register-page .parent-register-screen {
    display: block;
    min-height: 100dvh;
    padding: 20px 16px 40px;
}

body.flow-parent-register-page .parent-register-card {
    width: min(100%, 820px);
    margin: 0 auto;
    overflow: visible;
    border: 0;
    border-radius: 0;
    color: #0b327a;
    background: transparent;
    box-shadow: none;
}

body.flow-parent-register-page .parent-register-hero {
    position: relative;
    height: 390px;
    overflow: visible;
}

body.flow-parent-register-page .parent-register-hero::before {
    display: none;
}

body.flow-parent-register-page .parent-register-logo {
    position: absolute;
    top: 0;
    left: 3%;
    width: 45%;
    min-height: 0;
    object-fit: contain;
    filter: drop-shadow(0 10px 16px rgba(0, 62, 133, .2));
}

body.flow-parent-register-page .parent-register-robot {
    position: absolute;
    top: 2px;
    right: 2%;
    width: 39%;
    min-height: 0;
    object-fit: contain;
    filter: drop-shadow(0 10px 16px rgba(0, 62, 133, .2));
}

body.flow-parent-register-page .parent-register-back,
body.parent-signin-page .parent-signin-back {
    position: fixed;
    z-index: 20;
    top: 14px;
    left: 14px;
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border: 2px solid rgba(255, 255, 255, .8);
    border-radius: 50%;
    background: linear-gradient(145deg, #3ea6ff, #1853d3);
    box-shadow: 0 6px 13px rgba(0, 66, 146, .28);
}

body.flow-parent-register-page .parent-register-back img,
body.parent-signin-page .parent-signin-back img {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

body.flow-parent-register-page .parent-register-content {
    padding: 0;
    border: 0;
    color: #0b327a;
    background: transparent;
}

body.flow-parent-register-page .parent-register-heading {
    margin: -42px 0 22px;
    text-align: center;
}

body.flow-parent-register-page .parent-register-heading h1 {
    margin: 0;
    color: #1266dc;
    font-size: clamp(2rem, 7vw, 3.3rem);
    font-weight: 950;
    line-height: .94;
    text-shadow: 0 3px 0 #fff, 0 5px 0 #3025aa;
}

body.flow-parent-register-page .parent-register-heading p {
    width: min(100%, 600px);
    margin: 20px auto 0;
    color: #082e70;
    font-size: clamp(1rem, 2.7vw, 1.35rem);
    font-weight: 800;
    line-height: 1.45;
}

body.flow-parent-register-page .parent-register-panel {
    margin: 0;
    padding: 30px 38px 34px;
    border: 1px solid rgba(127, 165, 205, .4);
    border-radius: 32px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 16px 34px rgba(31, 100, 148, .18);
}

body.flow-parent-register-page .parent-register-form {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

body.flow-parent-register-page .parent-register-form h2 {
    margin: 0 0 22px;
    color: #1766ca;
    font-size: clamp(1.25rem, 3.3vw, 1.75rem);
    font-weight: 950;
    text-align: center;
}

body.flow-parent-register-page .parent-register-form h2 span {
    color: #ffc115;
}

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

body.flow-parent-register-page .parent-register-field {
    position: relative;
    display: grid;
    min-height: 72px;
    margin: 14px 0 0;
    grid-template-columns: 54px minmax(0, 1fr) 48px;
    align-items: center;
    border: 2px solid #d6dfed;
    border-radius: 18px;
    background: #fff;
}

body.flow-parent-register-page .parent-register-field:focus-within {
    border-color: #2688ef;
    box-shadow: 0 0 0 4px rgba(38, 136, 239, .14);
}

body.flow-parent-register-page .parent-register-field > img {
    z-index: 2;
    width: 25px;
    height: 25px;
    margin-left: 18px;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(34%) sepia(98%) saturate(1638%) hue-rotate(196deg) brightness(93%);
}

body.flow-parent-register-page .parent-register-field > span {
    z-index: 1;
    grid-column: 2;
    color: #8b91ab;
    font-size: 1rem;
    font-weight: 800;
    pointer-events: none;
}

body.flow-parent-register-page .parent-register-field input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0 52px 0 54px;
    border: 0;
    outline: 0;
    color: #0b327a;
    background: transparent;
    font: inherit;
    font-size: 1rem;
    font-weight: 800;
    line-height: normal;
}

body.flow-parent-register-page .parent-register-field button {
    position: relative;
    z-index: 3;
    grid-column: 3;
    width: 46px;
    height: 68px;
    border: 0;
    color: #1471d6;
    background: transparent;
    font-size: 1.25rem;
    cursor: pointer;
}

body.flow-parent-register-page .parent-register-terms {
    display: flex;
    min-height: 48px;
    margin: 18px 2px 12px;
    align-items: center;
    gap: 12px;
    color: #173d78;
    font-size: .94rem;
    line-height: 1.4;
}

body.flow-parent-register-page .parent-register-terms input {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    accent-color: #6f2ce8;
}

body.flow-parent-register-page .parent-register-submit {
    min-height: 76px;
    border: 1px solid #c177fb;
    border-radius: 24px;
    color: #fff;
    background: linear-gradient(180deg, #c347f4, #5e29e7);
    box-shadow: 0 10px 20px rgba(105, 39, 218, .28);
    font-size: 1.3rem;
}

body.flow-parent-register-page .parent-register-divider {
    width: 100%;
    margin: 24px auto 18px;
    color: #1269cf;
    font-size: 1.05rem;
    font-weight: 950;
}

body.flow-parent-register-page .parent-register-google {
    width: 100%;
    min-height: 72px;
    margin: 0;
    grid-template-columns: 44px minmax(0, auto) 44px;
    border: 1px solid #d0dae8;
    border-radius: 20px;
    color: #0b327a;
    background: #fff;
    box-shadow: 0 8px 15px rgba(35, 83, 125, .13);
    font-size: 1rem;
}

body.flow-parent-register-page .parent-register-google img {
    width: 31px;
    height: 31px;
}

/* Parent sign in. */
body.parent-signin-page .parent-signin-screen {
    display: block;
    min-height: 100dvh;
    padding: 20px 16px 42px;
    background: transparent !important;
}

body.parent-signin-page .parent-signin-card {
    width: min(100%, 820px);
    margin: 0 auto;
    overflow: visible;
    border: 0;
    border-radius: 0;
    color: #0b327a;
    background: transparent;
    box-shadow: none;
}

body.parent-signin-page .parent-signin-hero {
    position: relative;
    height: 430px;
    overflow: visible;
    background: transparent !important;
}

body.parent-signin-page .parent-signin-hero::after {
    display: none;
}

body.parent-signin-page .parent-signin-logo {
    position: absolute;
    top: 0;
    left: 1%;
    width: 49%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 10px 16px rgba(0, 62, 133, .2));
}

body.parent-signin-page .parent-signin-robot {
    position: absolute;
    top: 14px;
    right: 1%;
    width: 40%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 10px 16px rgba(0, 62, 133, .2));
}

body.parent-signin-page .parent-signin-content {
    padding: 0;
    color: #0b327a;
    background: transparent;
}

body.parent-signin-page .parent-signin-heading {
    margin: -66px 0 24px;
    text-align: center;
}

body.parent-signin-page .parent-signin-heading h1 {
    margin: 0;
    color: #0b327a;
    font-size: clamp(1.8rem, 5.5vw, 2.8rem);
    font-weight: 950;
    line-height: 1.05;
}

body.parent-signin-page .parent-signin-heading h1 span {
    color: #ffc115;
}

body.parent-signin-page .parent-signin-heading p {
    margin: 13px 0 0;
    color: #50658e;
    font-size: clamp(1rem, 2.5vw, 1.3rem);
}

body.parent-signin-page .parent-signin-panel {
    padding: 34px 42px 36px;
    border: 1px solid rgba(127, 165, 205, .4);
    border-radius: 34px;
    color: #0b327a;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 16px 34px rgba(31, 100, 148, .18);
}

body.parent-signin-page .parent-signin-panel h2 {
    margin: 0 0 24px;
    color: #1e73db;
    font-size: clamp(1.4rem, 3.5vw, 1.9rem);
    font-weight: 950;
    text-align: center;
}

body.parent-signin-page .parent-signin-field {
    position: relative;
    display: grid;
    min-height: 86px;
    margin-top: 18px;
    grid-template-columns: 68px minmax(0, 1fr) 62px;
    align-items: center;
    border: 2px solid #d5dfec;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 6px 12px rgba(35, 83, 125, .08);
}

body.parent-signin-page .parent-signin-field:focus-within {
    border-color: #2688ef;
    box-shadow: 0 0 0 4px rgba(38, 136, 239, .14);
}

body.parent-signin-page .parent-signin-field > img {
    z-index: 2;
    width: 31px;
    height: 31px;
    margin-left: 22px;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(43%) sepia(97%) saturate(1803%) hue-rotate(190deg) brightness(99%);
}

body.parent-signin-page .parent-signin-field > span {
    z-index: 1;
    grid-column: 2;
    color: #9098ae;
    font-size: 1.15rem;
    font-weight: 800;
    pointer-events: none;
}

body.parent-signin-page .parent-signin-field input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0 64px 0 68px;
    border: 0;
    outline: 0;
    color: #0b327a;
    background: transparent;
    font: inherit;
    font-size: 1.1rem;
    font-weight: 800;
    line-height: normal;
}

body.parent-signin-page .parent-signin-field button {
    position: relative;
    z-index: 3;
    grid-column: 3;
    width: 60px;
    height: 82px;
    border: 0;
    background: transparent;
    cursor: pointer;
}

body.parent-signin-page .parent-signin-field button img {
    width: 34px;
    height: 34px;
    filter: brightness(0) saturate(100%) invert(37%) sepia(98%) saturate(1376%) hue-rotate(190deg);
}

body.parent-signin-page .parent-signin-row {
    display: flex;
    min-height: 56px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: #4d638d;
    font-size: 1rem;
}

body.parent-signin-page .parent-signin-row a {
    color: #0a83ef;
    font-weight: 800;
    text-decoration: none;
}

body.parent-signin-page .parent-signin-remember {
    display: flex;
    align-items: center;
    gap: 10px;
}

body.parent-signin-page .parent-signin-remember span {
    color: #4d638d !important;
    opacity: 1 !important;
}

body.parent-signin-page .parent-signin-remember input {
    width: 28px;
    height: 28px;
    accent-color: #2688ef;
}

body.parent-signin-page .parent-signin-submit {
    min-height: 80px;
    border: 1px solid #c172f4;
    border-radius: 24px;
    color: #fff;
    background: linear-gradient(105deg, #1f8ff4, #a83cf0);
    box-shadow: 0 10px 20px rgba(62, 89, 207, .27);
    font-size: 1.35rem;
}

body.parent-signin-page .parent-signin-divider {
    margin: 26px 0 20px;
    color: #1269cf;
    font-size: 1.1rem;
    font-weight: 950;
}

body.parent-signin-page .parent-signin-google {
    min-height: 76px;
    grid-template-columns: 50px minmax(0, auto) 50px;
    border: 1px solid #d0dae8;
    border-radius: 22px;
    color: #0b327a;
    background: #fff;
    box-shadow: 0 8px 15px rgba(35, 83, 125, .13);
    font-size: 1.06rem;
}

body.parent-signin-page .parent-signin-google img {
    width: 34px;
    height: 34px;
}

body.parent-signin-page .parent-signin-security {
    display: grid;
    min-height: 114px;
    margin: 24px 0 0;
    padding: 18px 24px;
    grid-template-columns: 80px minmax(0, 1fr);
    align-items: center;
    gap: 20px;
    border: 1px solid rgba(127, 165, 205, .4);
    border-radius: 28px;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 12px 24px rgba(31, 100, 148, .16);
}

body.parent-signin-page .parent-signin-security img:first-child {
    width: 68px;
    height: 68px;
}

body.parent-signin-page .parent-signin-security p {
    margin: 0;
    color: #51668e;
    font-size: .98rem;
    line-height: 1.45;
}

body.parent-signin-page .parent-signin-security strong,
body.parent-signin-page .parent-signin-security span {
    display: block;
}

body.parent-signin-page .parent-signin-security strong {
    margin-bottom: 5px;
    color: #0b327a;
    font-size: 1.1rem;
}

/* 2026-07-30: start screen rebuilt from the supplied Matematicka Arena reference slices. */
body.flow-start-page.auth-sky-page {
    overflow-x: hidden;
    background:
        linear-gradient(180deg, rgba(15, 160, 255, .1), rgba(218, 246, 255, .42)),
        url("../images/robo-arena/child-light/arena-sky-no-rainbow.png"),
        linear-gradient(180deg, #0aa7ff 0%, #7edbff 31%, #d8f4ff 100%);
    background-position: top center, top center, top center;
    background-repeat: no-repeat, repeat-y, no-repeat;
    background-size: 100% 100%, min(100%, 941px) auto, cover;
    background-attachment: fixed;
}

body.flow-start-page.auth-sky-page .auth-entry-screen {
    padding: 8px 14px 28px;
}

body.flow-start-page.auth-sky-page .auth-entry-screen--reference {
    display: block;
    width: 100vw;
    min-height: 100dvh;
    padding: 0;
    overflow-x: hidden;
    overflow-y: visible;
    background: #d7f5ff;
}

.auth-reference-start {
    position: relative;
    width: min(100%, 941px);
    max-width: 941px;
    height: auto;
    aspect-ratio: 941 / 2100;
    min-width: 0;
    min-height: 0;
    margin: 0 auto;
    overflow: hidden;
    background-color: #d7f5ff;
    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%;
    flex: none;
}

.auth-reference-start__image {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    max-width: none;
    height: auto;
    object-fit: contain;
    object-position: top center;
    clip-path: inset(0 0 69.65% 0);
}

.auth-reference-start__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.auth-reference-start__hotspots {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
}

.auth-reference-start__hotspot {
    position: absolute;
    display: block;
    overflow: hidden;
    border-radius: 18px;
    color: transparent;
    text-indent: -9999px;
    text-decoration: none;
    pointer-events: auto;
    transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}

.auth-reference-start__hotspot::after {
    position: absolute;
    inset: 0;
    border: 2px solid rgba(255, 255, 255, 0);
    border-radius: inherit;
    background: linear-gradient(110deg, transparent 18%, rgba(255, 255, 255, .44) 47%, transparent 76%);
    background-position: 160% 0;
    background-size: 220% 100%;
    content: "";
    opacity: 0;
    transition: opacity .18s ease, background-position .42s ease, border-color .18s ease;
}

.auth-reference-start__hotspot:hover {
    transform: translateY(-2px) scale(1.025);
    filter: saturate(1.12) brightness(1.05);
    box-shadow: 0 9px 18px rgba(16, 91, 177, .25);
}

.auth-reference-start__hotspot:hover::after {
    background-position: -65% 0;
    border-color: rgba(255, 255, 255, .62);
    opacity: 1;
}

.auth-reference-start__hotspot:active {
    transform: translateY(1px) scale(.975);
    filter: saturate(1.04) brightness(.96);
    box-shadow: 0 3px 8px rgba(16, 91, 177, .2);
}

.auth-reference-start__hotspot--install {
    transform-origin: center;
    animation: auth-install-invite 2.8s ease-in-out infinite;
}

.auth-reference-start__hotspot--install::after {
    border-color: rgba(255, 255, 255, .38);
    background-position: 160% 0;
    opacity: .28;
    animation: auth-install-shimmer 2.8s ease-in-out infinite;
}

.auth-reference-start__hotspot--install:hover,
.auth-reference-start__hotspot--install:active {
    animation-play-state: paused;
}

.auth-reference-start__equal-panels {
    position: absolute;
    z-index: 6;
    top: min(53.9vw, 507px);
    left: 3.45%;
    width: 93.1%;
    height: auto;
    bottom: 0;
    display: grid;
    grid-template-rows: minmax(0, .5fr) repeat(2, minmax(0, 1fr)) minmax(0, .42fr);
    gap: 5px;
    padding: 5px .75%;
    overflow: hidden;
    background: transparent;
    container-type: inline-size;
}

.auth-reference-access {
    display: grid;
    min-width: 0;
    min-height: 0;
    height: 100%;
    grid-template-rows: minmax(0, .56fr) repeat(2, minmax(0, 1.06fr));
    row-gap: 3px;
    padding: 1.15% 3.25% max(10px, 1.5%);
    overflow: hidden;
    border: clamp(1px, .35cqw, 3px) solid #bfe7fb;
    border-radius: clamp(11px, 3.4cqw, 30px);
    background: rgba(255, 255, 255, .98);
    box-shadow:
        0 clamp(3px, 1.2cqw, 11px) clamp(8px, 2.2cqw, 20px) rgba(30, 113, 176, .18),
        inset 0 0 0 clamp(1px, .5cqw, 4px) rgba(247, 253, 255, .96);
}

.auth-reference-access__header {
    display: grid;
    min-height: 0;
    align-content: center;
    justify-items: center;
}

.auth-reference-access__header h2 {
    display: flex;
    min-width: 0;
    margin: 0;
    align-items: center;
    justify-content: center;
    gap: clamp(3px, 1.15cqw, 10px);
    color: #092c79;
    font-size: clamp(16px, 4.5cqw, 30px);
    font-weight: 950;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

.auth-reference-access__header h2 > img,
.auth-reference-access__people {
    width: clamp(18px, 5cqw, 44px);
    height: clamp(18px, 5cqw, 44px);
    flex: 0 0 auto;
    object-fit: contain;
}

.auth-reference-access__header h2 > b {
    color: #ffc51d;
    font-size: .86em;
    line-height: 1;
}

.auth-reference-access__header p {
    margin: clamp(2px, .65cqw, 6px) 0 0;
    color: #173a83;
    font-size: clamp(11px, 2.7cqw, 17px);
    font-weight: 650;
    line-height: 1.12;
    text-align: center;
    white-space: nowrap;
}

.auth-reference-access__people {
    position: relative;
    display: inline-block;
}

.auth-reference-access__people i {
    position: absolute;
    bottom: 13%;
    width: 52%;
    height: 46%;
    border-radius: 50% 50% 28% 28%;
    background: linear-gradient(180deg, #22b7ff, #075eea);
}

.auth-reference-access__people i::before {
    position: absolute;
    top: -58%;
    left: 20%;
    width: 60%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: linear-gradient(180deg, #28c5ff, #075eea);
    content: "";
}

.auth-reference-access__people i:first-child {
    left: 5%;
}

.auth-reference-access__people i:last-child {
    right: 5%;
}

.auth-reference-access__row {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 0;
    margin-top: 0;
    padding: 1.2% 2.25%;
    grid-template-columns: 15% minmax(0, 1fr) 38%;
    align-items: center;
    gap: 1.8%;
    overflow: visible;
    border: clamp(1px, .22cqw, 2px) solid #dcecf8;
    border-radius: clamp(8px, 2.5cqw, 22px);
    color: #0b327a;
    background: linear-gradient(180deg, #fff, #fbfdff);
    box-shadow: 0 clamp(2px, .7cqw, 6px) clamp(5px, 1.5cqw, 14px) rgba(31, 99, 155, .12);
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.auth-reference-access__row:hover {
    z-index: 2;
    transform: translateY(-2px);
    border-color: rgba(111, 191, 244, .82);
    box-shadow: 0 clamp(4px, 1.1cqw, 10px) clamp(8px, 2.1cqw, 19px) rgba(31, 99, 155, .2);
}

.auth-reference-access__row:active {
    transform: translateY(1px) scale(.992);
    box-shadow: 0 2px 6px rgba(31, 99, 155, .16);
}

.auth-reference-access__row:focus-visible {
    outline: clamp(2px, .45cqw, 4px) solid #ffc928;
    outline-offset: -2px;
}

.auth-reference-access__icon {
    display: grid;
    width: min(100%, 76px);
    aspect-ratio: 1;
    place-self: center;
    place-items: center;
    border-radius: 50%;
}

.auth-reference-access__icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.auth-reference-access__copy {
    min-width: 0;
}

.auth-reference-access__copy strong,
.auth-reference-access__copy small {
    display: block;
}

.auth-reference-access__copy strong {
    margin-bottom: clamp(1px, .5cqw, 5px);
    color: #0a2e78;
    font-size: clamp(14px, 3.4cqw, 23px);
    font-weight: 950;
    line-height: 1;
}

.auth-reference-access__copy small {
    color: #173a83;
    font-size: clamp(11px, 2.25cqw, 15px);
    font-weight: 580;
    line-height: 1.28;
}

.auth-reference-access__button {
    position: relative;
    top: 0;
    display: flex;
    width: 100%;
    height: calc(100% - 10px);
    min-height: 44px;
    max-height: 94px;
    padding: 0 5%;
    align-items: center;
    align-self: center;
    justify-content: center;
    gap: 5%;
    border: clamp(1px, .22cqw, 2px) solid rgba(255, 255, 255, .7);
    border-radius: clamp(8px, 2.2cqw, 20px);
    color: #fff;
    background: linear-gradient(180deg, #18b7f5, #056fd7);
    box-shadow: 0 clamp(3px, .8cqw, 7px) 0 #0754b8, 0 clamp(5px, 1.4cqw, 13px) clamp(7px, 1.7cqw, 15px) rgba(5, 105, 207, .22);
    font-size: clamp(12px, 2.8cqw, 20px);
    font-weight: 950;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

.auth-reference-access__button::after {
    position: absolute;
    top: -30%;
    left: -55%;
    width: 34%;
    height: 160%;
    transform: rotate(18deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .58), transparent);
    content: "";
    opacity: 0;
    pointer-events: none;
}

.auth-reference-access__row:hover .auth-reference-access__button {
    transform: translateY(-2px) scale(1.025);
    filter: saturate(1.12) brightness(1.06);
    box-shadow: 0 clamp(4px, 1cqw, 9px) 0 #0754b8, 0 clamp(7px, 1.8cqw, 16px) clamp(9px, 2.2cqw, 20px) rgba(5, 105, 207, .3);
}

.auth-reference-access__row:hover .auth-reference-access__button::after,
.auth-reference-access__row:focus-visible .auth-reference-access__button::after {
    animation: auth-button-shine .55s ease forwards;
    opacity: 1;
}

.auth-reference-access__row:active .auth-reference-access__button {
    transform: translateY(2px) scale(.97);
    filter: saturate(1.04) brightness(.95);
    box-shadow: 0 2px 0 #0754b8, 0 4px 8px rgba(5, 105, 207, .2);
}

.auth-reference-access__button b {
    font-size: 1.55em;
    line-height: .7;
}

.auth-reference-access__row--register .auth-reference-access__button {
    background: linear-gradient(180deg, #ad59f2, #6723d6);
    box-shadow: 0 clamp(3px, .8cqw, 7px) 0 #4f1bb2, 0 clamp(5px, 1.4cqw, 13px) clamp(7px, 1.7cqw, 15px) rgba(92, 41, 196, .2);
}

.auth-reference-access__row--register:hover .auth-reference-access__button {
    box-shadow: 0 clamp(4px, 1cqw, 9px) 0 #4f1bb2, 0 clamp(7px, 1.8cqw, 16px) clamp(9px, 2.2cqw, 20px) rgba(92, 41, 196, .28);
}

.auth-reference-access__row--register:active .auth-reference-access__button {
    box-shadow: 0 2px 0 #4f1bb2, 0 4px 8px rgba(92, 41, 196, .18);
}

.auth-reference-action {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 0;
    height: 100%;
    padding: 1.5% 2.25%;
    grid-template-columns: 25% minmax(0, 1fr) 34%;
    align-items: center;
    gap: 1.5%;
    overflow: hidden;
    border: clamp(1px, .3cqw, 3px) solid #9ddd79;
    border-radius: clamp(10px, 3.2cqw, 28px);
    color: #173a83;
    background: linear-gradient(90deg, #f3ffec, #fbfff8);
    box-shadow: 0 clamp(3px, .9cqw, 8px) clamp(7px, 1.8cqw, 16px) rgba(40, 127, 52, .15);
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.auth-reference-action--install {
    grid-template-columns: 24% minmax(0, 1fr) 34%;
    padding-top: .5%;
    padding-bottom: 2.5%;
    border-color: #cde9fb;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 clamp(3px, .9cqw, 8px) clamp(7px, 1.8cqw, 16px) rgba(30, 113, 176, .16);
}

.auth-reference-action:hover {
    z-index: 8;
    transform: translateY(-2px);
    border-color: #62cd3a;
    box-shadow: 0 clamp(5px, 1.2cqw, 11px) clamp(10px, 2.2cqw, 20px) rgba(40, 127, 52, .24);
}

.auth-reference-action--install:hover {
    border-color: #86cff3;
    box-shadow: 0 clamp(5px, 1.2cqw, 11px) clamp(10px, 2.2cqw, 20px) rgba(30, 113, 176, .24);
}

.auth-reference-action:active {
    transform: translateY(1px) scale(.992);
}

.auth-reference-action:focus-visible {
    outline: clamp(2px, .45cqw, 4px) solid #ffc928;
    outline-offset: 2px;
}

.auth-reference-action__art {
    display: block;
    width: 100%;
    height: clamp(38px, 12cqw, 58px);
    max-height: none;
    align-self: center;
    object-fit: contain;
    object-position: center bottom;
}

.auth-reference-action--child .auth-reference-action__art {
    width: 106%;
    height: clamp(62px, 19cqw, 82px);
    margin-left: -4%;
}

.auth-reference-action--child {
    grid-template-columns: 30% minmax(0, 1fr) 34%;
}

.auth-reference-action--install .auth-reference-action__art {
    height: clamp(46px, 15cqw, 68px);
}

.auth-reference-action__copy {
    display: block;
    min-width: 0;
}

.auth-reference-action__copy strong,
.auth-reference-action__copy small {
    display: block;
}

.auth-reference-action__copy strong {
    color: #128027;
    font-size: clamp(13px, 3.2cqw, 26px);
    font-weight: 950;
    line-height: 1.05;
    white-space: nowrap;
}

.auth-reference-action__copy strong > b {
    color: #3ccf43;
}

.auth-reference-action--install .auth-reference-action__copy strong {
    color: #0a2e78;
    font-size: clamp(12px, 2.8cqw, 23px);
    line-height: 1.08;
    white-space: normal;
}

.auth-reference-action__copy small {
    margin-top: clamp(2px, .55cqw, 5px);
    color: #173a83;
    font-size: clamp(10px, 2.05cqw, 15px);
    font-weight: 600;
    line-height: 1.22;
}

.auth-reference-action__download {
    display: inline-grid;
    width: 1.35em;
    aspect-ratio: 1;
    margin-right: .25em;
    place-items: center;
    border-radius: .22em;
    color: #fff;
    background: #087bea;
    line-height: 1;
}

.auth-reference-action__button {
    position: relative;
    display: flex;
    width: 100%;
    height: clamp(48px, 11cqw, 58px);
    min-height: 48px;
    padding: 0 4%;
    align-items: center;
    justify-content: center;
    gap: 5%;
    overflow: hidden;
    border: clamp(1px, .22cqw, 2px) solid rgba(255, 255, 255, .72);
    border-radius: clamp(8px, 2.2cqw, 20px);
    color: #fff;
    background: linear-gradient(180deg, #58d948, #12a82a);
    box-shadow: 0 clamp(3px, .75cqw, 7px) 0 #0b8b20, 0 clamp(5px, 1.25cqw, 11px) clamp(7px, 1.6cqw, 14px) rgba(24, 145, 39, .22);
    font-size: clamp(11px, 2.45cqw, 19px);
    font-weight: 950;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

.auth-reference-action__button > b {
    font-size: 1.55em;
    line-height: .7;
}

.auth-reference-action--install .auth-reference-action__button {
    height: clamp(44px, 10cqw, 54px);
    min-height: 44px;
    background: linear-gradient(180deg, #ffbd23, #ff7710);
    box-shadow: 0 clamp(3px, .75cqw, 7px) 0 #d95500, 0 clamp(5px, 1.25cqw, 11px) clamp(7px, 1.6cqw, 14px) rgba(224, 91, 0, .25);
    animation: auth-install-invite 2.8s ease-in-out infinite;
}

.auth-reference-action--install .auth-reference-action__button::after {
    position: absolute;
    top: -30%;
    left: -55%;
    width: 34%;
    height: 160%;
    transform: rotate(18deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .62), transparent);
    content: "";
    opacity: .28;
    animation: auth-install-shimmer 2.8s ease-in-out infinite;
    pointer-events: none;
}

.auth-reference-action--install:hover .auth-reference-action__button,
.auth-reference-action--install:active .auth-reference-action__button {
    animation-play-state: paused;
}

@keyframes auth-button-shine {
    from {
        left: -55%;
    }

    to {
        left: 125%;
    }
}

@keyframes auth-install-invite {
    0%, 58%, 100% {
        transform: scale(1);
        filter: saturate(1) brightness(1);
        box-shadow: 0 5px 12px rgba(233, 111, 0, .2);
    }

    68% {
        transform: scale(1);
        filter: saturate(1.18) brightness(1.08);
        box-shadow: 0 10px 24px rgba(255, 142, 0, .42), 0 0 0 4px rgba(255, 202, 61, .2);
    }

    78% {
        transform: scale(1);
        filter: saturate(1.08) brightness(1.03);
        box-shadow: 0 6px 16px rgba(233, 111, 0, .3);
    }
}

@keyframes auth-install-shimmer {
    0%, 55% {
        background-position: 160% 0;
        opacity: .18;
    }

    75% {
        background-position: -65% 0;
        opacity: .72;
    }

    100% {
        background-position: -65% 0;
        opacity: .18;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-reference-start__hotspot,
    .auth-reference-start__hotspot::after,
    .auth-reference-access__row,
    .auth-reference-access__button {
        animation: none;
        transition: none;
    }

    .auth-reference-action,
    .auth-reference-action__button,
    .auth-reference-action__button::after {
        animation: none;
        transition: none;
    }

    .auth-reference-start__hotspot--install,
    .auth-reference-start__hotspot--install::after {
        animation: none;
    }

    .auth-reference-access__button::after {
        display: none;
    }
}

@media (max-width: 380px) {
    .auth-reference-access__row {
        grid-template-columns: 15% minmax(0, 1fr) 39%;
    }

    .auth-reference-access__button {
        font-size: 11px;
    }

    .auth-reference-action__copy strong {
        font-size: 12px;
    }
}

.auth-reference-start__hotspot:focus-visible {
    outline: 4px solid #fff;
    outline-offset: 4px;
    box-shadow: 0 0 0 8px rgba(15, 112, 255, .62);
}

.auth-reference-start__hotspot--teacher-login {
    left: 60.25%;
    top: 38.33%;
    width: 28.5%;
    height: 7%;
}

.auth-reference-start__hotspot--teacher-register {
    left: 60.25%;
    top: 46.52%;
    width: 28.5%;
    height: 7%;
}

.auth-reference-start__hotspot--parent-login {
    left: 60.25%;
    top: 62.6%;
    width: 28.5%;
    height: 7%;
}

.auth-reference-start__hotspot--parent-register {
    left: 60.25%;
    top: 70.79%;
    width: 28.5%;
    height: 7%;
}

.auth-reference-start__hotspot--child {
    left: 67.95%;
    top: 79.52%;
    width: 25.25%;
    height: 7%;
}

.auth-reference-start__hotspot--install {
    left: 67.3%;
    top: 90.85%;
    width: 26%;
    height: 7%;
}

@media (min-width: 942px) {
    body.flow-start-page.auth-sky-page {
        background: #fff;
        background-image: none;
        background-attachment: scroll;
    }

    body.flow-start-page.auth-sky-page .auth-entry-screen--reference {
        min-height: 100dvh;
        height: auto;
        background: #fff;
    }

    .auth-reference-start {
        width: min(100vw, 941px);
        height: auto;
        min-height: 0;
        aspect-ratio: 941 / 2100;
        margin: 0 auto;
        box-shadow: none;
    }

    .auth-reference-start__image {
        object-fit: contain;
        object-position: top center;
    }
}

body.flow-start-page.auth-sky-page .auth-entry {
    width: min(100%, 930px);
}

body.flow-start-page.auth-sky-page .auth-entry__hero {
    min-height: 0;
    height: clamp(300px, 47vw, 475px);
    margin-bottom: 8px;
    overflow: visible;
    background-image: url("../images/robo-arena/user-start-reference/hero-scene-top.png");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
}

body.flow-start-page.auth-sky-page .auth-entry__hero-copy {
    position: absolute;
    z-index: 4;
    left: 50%;
    bottom: 0;
    width: min(92%, 560px);
    transform: translateX(-50%);
    text-align: center;
}

body.flow-start-page.auth-sky-page .auth-entry__hero-copy h1 {
    margin: 0;
    color: #11348d;
    font-size: clamp(2.05rem, 5.3vw, 3.35rem);
    font-weight: 950;
    line-height: 1.06;
    letter-spacing: 0;
    text-shadow: 0 3px 0 rgba(255, 255, 255, .85);
}

body.flow-start-page.auth-sky-page .auth-entry__hero-copy h1 span {
    color: #1165f4;
}

body.flow-start-page.auth-sky-page .auth-entry__hero-copy p {
    position: static;
    width: auto;
    margin: 12px 0 0;
    color: #122978;
    font-size: clamp(1.05rem, 2.5vw, 1.45rem);
    font-weight: 850;
    line-height: 1.2;
}

body.flow-start-page.auth-sky-page .auth-entry__panel,
body.flow-start-page.auth-sky-page .auth-entry__install {
    border: 3px solid rgba(185, 226, 255, .95);
    background: rgba(255, 255, 255, .94);
    box-shadow:
        0 18px 30px rgba(39, 135, 205, .18),
        inset 0 0 0 5px rgba(244, 251, 255, .82);
    backdrop-filter: blur(6px);
}

body.flow-start-page.auth-sky-page .auth-entry__panel {
    padding: 18px 20px 20px;
    border-radius: 34px;
}

body.flow-start-page.auth-sky-page .auth-entry__choices {
    gap: 16px;
}

body.flow-start-page.auth-sky-page .auth-entry__role-group {
    gap: 12px;
    padding: 18px 18px 20px;
    border: 0;
    border-radius: 28px;
    background: transparent;
    box-shadow: none;
}

body.flow-start-page.auth-sky-page .auth-entry__role-group + .auth-entry__role-group {
    border-top: 2px solid rgba(183, 222, 249, .76);
    padding-top: 22px;
}

body.flow-start-page.auth-sky-page .auth-entry__role-group > h2 {
    gap: 11px;
    color: #092b78;
    font-size: clamp(1.55rem, 3.4vw, 2.05rem);
    text-shadow: 0 2px 0 rgba(255, 255, 255, .8);
}

body.flow-start-page.auth-sky-page .auth-entry__role-group > h2 img {
    width: 40px;
    height: 40px;
}

body.flow-start-page.auth-sky-page .auth-entry__role-group > p {
    margin: -2px 0 8px;
    color: #1b3d89;
    font-size: clamp(.98rem, 2vw, 1.16rem);
    font-weight: 760;
}

body.flow-start-page.auth-sky-page .auth-entry__choice {
    min-height: 118px;
    padding: 14px 18px;
    grid-template-columns: 118px minmax(0, 1fr) 260px;
    gap: 20px;
    border: 2px solid rgba(207, 226, 244, .95);
    border-radius: 24px;
    background: linear-gradient(180deg, #fff, #fbfdff);
    box-shadow:
        0 10px 18px rgba(31, 99, 155, .13),
        inset 0 0 0 1px rgba(255, 255, 255, .9);
}

body.flow-start-page.auth-sky-page .auth-entry__choice-icon {
    width: 92px;
    height: 92px;
    border: 2px solid rgba(205, 226, 246, .92);
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 25%, #fff 0 20%, #eff8ff 55%, #d7eeff 100%);
    box-shadow:
        inset 0 0 0 4px rgba(255, 255, 255, .7),
        0 9px 18px rgba(23, 86, 145, .15);
}

body.flow-start-page.auth-sky-page .auth-entry__choice-icon img,
body.flow-start-page.auth-sky-page .auth-entry__choice--login .auth-entry__choice-icon img,
body.flow-start-page.auth-sky-page .auth-entry__choice--register .auth-entry__choice-icon img {
    width: 72px;
    height: 72px;
    object-fit: contain;
}

body.flow-start-page.auth-sky-page .auth-entry__choice--register .auth-entry__choice-icon {
    border-color: rgba(223, 204, 255, .95);
    background:
        radial-gradient(circle at 35% 25%, #fff 0 20%, #f5eeff 56%, #e5d6ff 100%);
}

body.flow-start-page.auth-sky-page .auth-entry__choice-copy strong {
    margin-bottom: 7px;
    color: #092b78;
    font-size: clamp(1.18rem, 2.35vw, 1.48rem);
    line-height: 1.08;
    text-transform: none;
}

body.flow-start-page.auth-sky-page .auth-entry__choice-copy small {
    color: #1e3e8d;
    font-size: clamp(.96rem, 1.8vw, 1.11rem);
    font-weight: 650;
    line-height: 1.35;
    max-width: 100%;
    overflow-wrap: anywhere;
}

body.flow-start-page.auth-sky-page .auth-entry__choice-cta {
    width: 100%;
    min-width: 0;
    min-height: 76px;
    overflow: hidden;
    border-radius: 18px;
    background: linear-gradient(180deg, #16b9ff 0%, #0877e2 100%);
    box-shadow:
        0 8px 0 #0656b8,
        0 14px 20px rgba(0, 74, 173, .24);
    font-size: clamp(1rem, 2.25vw, 1.35rem);
    line-height: 1.05;
    white-space: normal;
}

body.flow-start-page.auth-sky-page .auth-entry__choice--register .auth-entry__choice-cta {
    background: linear-gradient(180deg, #b75dff 0%, #6c25d9 100%);
    box-shadow:
        0 8px 0 #551bb1,
        0 14px 20px rgba(91, 31, 180, .24);
}

body.flow-start-page.auth-sky-page .auth-entry__choice--child {
    min-height: 132px;
    margin-top: 8px;
    border-color: rgba(129, 214, 105, .96);
    background: linear-gradient(90deg, #efffe9 0%, #fff 72%);
}

body.flow-start-page.auth-sky-page .auth-entry__choice--child .auth-entry__choice-icon {
    width: 240px;
    height: 112px;
}

body.flow-start-page.auth-sky-page .auth-entry__choice--child .auth-entry__choice-icon img {
    width: 240px;
    height: 112px;
    object-fit: contain;
}

body.flow-start-page.auth-sky-page .auth-entry__choice--child .auth-entry__choice-copy strong {
    color: #138125;
    font-size: clamp(1.35rem, 2.8vw, 1.75rem);
    text-transform: uppercase;
}

body.flow-start-page.auth-sky-page .auth-entry__choice--child .auth-entry__choice-cta {
    background: linear-gradient(180deg, #70df4e 0%, #18a927 100%);
    box-shadow:
        0 8px 0 #0b8420,
        0 14px 20px rgba(11, 132, 32, .22);
}

body.flow-start-page.auth-sky-page .auth-entry__install {
    min-height: 146px;
    margin-top: 18px;
    padding: 18px 22px;
    grid-template-columns: 172px minmax(0, 1fr) 230px;
    border-radius: 30px;
}

body.flow-start-page.auth-sky-page .auth-entry__install > img {
    width: 160px;
    height: 128px;
}

body.flow-start-page.auth-sky-page .auth-entry__install small {
    color: #093680;
    font-size: 1.05rem;
}

body.flow-start-page.auth-sky-page .auth-entry__install strong {
    color: #092b78;
    font-size: clamp(1.18rem, 2.3vw, 1.45rem);
    line-height: 1.12;
}

body.flow-start-page.auth-sky-page .auth-entry__install em {
    color: #1e3e8d;
    font-weight: 650;
}

body.flow-start-page.auth-sky-page .auth-entry__install > b {
    min-height: 72px;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffbb20 0%, #ff7412 100%);
    box-shadow:
        0 8px 0 #d14c00,
        0 14px 20px rgba(221, 86, 0, .22);
    font-size: clamp(1rem, 2.2vw, 1.25rem);
}

@media (max-width: 700px) {
    body.flow-start-page.auth-sky-page .auth-entry-screen:not(.auth-entry-screen--reference) {
        padding: 6px 7px 18px;
    }

    body.flow-start-page.auth-sky-page .auth-entry {
        width: min(100%, 430px);
    }

    body.flow-start-page.auth-sky-page .auth-entry__hero {
        min-height: 0;
        height: clamp(226px, 68vw, 292px);
        margin-bottom: 4px;
        background-size: 100% auto;
    }

    body.flow-start-page.auth-sky-page .auth-entry__logo {
        display: none;
    }

    body.flow-start-page.auth-sky-page .auth-entry__robot {
        display: none;
    }

    body.flow-start-page.auth-sky-page .auth-entry__hero-copy {
        bottom: 4px;
        width: 96%;
    }

    body.flow-start-page.auth-sky-page .auth-entry__hero-copy h1 {
        font-size: clamp(1.45rem, 6.6vw, 1.82rem);
        line-height: 1.04;
    }

    body.flow-start-page.auth-sky-page .auth-entry__hero-copy p {
        margin-top: 8px;
        font-size: clamp(.98rem, 4.3vw, 1.18rem);
    }

    body.flow-start-page.auth-sky-page .auth-entry__panel {
        padding: 12px 10px 13px;
        border-width: 2px;
        border-radius: 24px;
        box-shadow:
            0 10px 18px rgba(39, 135, 205, .15),
            inset 0 0 0 4px rgba(244, 251, 255, .8);
    }

    body.flow-start-page.auth-sky-page .auth-entry__choices {
        gap: 10px;
    }

    body.flow-start-page.auth-sky-page .auth-entry__role-group {
        gap: 8px;
        padding: 10px 8px 12px;
    }

    body.flow-start-page.auth-sky-page .auth-entry__role-group + .auth-entry__role-group {
        padding-top: 14px;
    }

    body.flow-start-page.auth-sky-page .auth-entry__role-group > h2 {
        gap: 7px;
        flex-wrap: wrap;
        font-size: clamp(.98rem, 4.5vw, 1.24rem);
    }

    body.flow-start-page.auth-sky-page .auth-entry__role-group > h2 span {
        display: none;
    }

    body.flow-start-page.auth-sky-page .auth-entry__role-group > h2 img {
        width: 28px;
        height: 28px;
    }

    body.flow-start-page.auth-sky-page .auth-entry__role-group > p {
        margin-bottom: 3px;
        font-size: .78rem;
        line-height: 1.22;
    }

    body.flow-start-page.auth-sky-page .auth-entry__choice {
        min-height: 92px;
        padding: 9px;
        grid-template-columns: 58px minmax(0, 1fr);
        gap: 8px;
        border-radius: 18px;
    }

    body.flow-start-page.auth-sky-page .auth-entry__choice-icon,
    body.flow-start-page.auth-sky-page .auth-entry__choice-icon img,
    body.flow-start-page.auth-sky-page .auth-entry__choice--login .auth-entry__choice-icon img,
    body.flow-start-page.auth-sky-page .auth-entry__choice--register .auth-entry__choice-icon img {
        width: 52px;
        height: 52px;
    }

    body.flow-start-page.auth-sky-page .auth-entry__choice-icon {
        width: 58px;
        height: 58px;
    }

    body.flow-start-page.auth-sky-page .auth-entry__choice-copy strong {
        margin-bottom: 4px;
        font-size: clamp(.9rem, 3.8vw, 1.06rem);
    }

    body.flow-start-page.auth-sky-page .auth-entry__choice-copy small {
        font-size: clamp(.68rem, 2.75vw, .78rem);
        line-height: 1.25;
    }

    body.flow-start-page.auth-sky-page .auth-entry__choice-cta {
        min-height: 50px;
        padding: 7px 5px;
        grid-column: 1 / -1;
        border-radius: 14px;
        box-shadow:
            0 5px 0 #0656b8,
            0 9px 13px rgba(0, 74, 173, .2);
        font-size: clamp(.66rem, 2.75vw, .78rem);
        line-height: 1.02;
    }

    body.flow-start-page.auth-sky-page .auth-entry__choice--register .auth-entry__choice-cta {
        box-shadow:
            0 5px 0 #551bb1,
            0 9px 13px rgba(91, 31, 180, .2);
    }

    body.flow-start-page.auth-sky-page .auth-entry__choice-cta b {
        font-size: 1.4rem;
    }

    body.flow-start-page.auth-sky-page .auth-entry__choice--child {
        min-height: 92px;
        margin-top: 4px;
        grid-template-columns: 102px minmax(0, 1fr);
        border-radius: 20px;
    }

    body.flow-start-page.auth-sky-page .auth-entry__choice--child .auth-entry__choice-icon,
    body.flow-start-page.auth-sky-page .auth-entry__choice--child .auth-entry__choice-icon img {
        width: 102px;
        height: 66px;
    }

    body.flow-start-page.auth-sky-page .auth-entry__choice--child .auth-entry__choice-copy strong {
        font-size: clamp(.95rem, 4.2vw, 1.12rem);
    }

    body.flow-start-page.auth-sky-page .auth-entry__choice--child .auth-entry__choice-copy small {
        font-size: .72rem;
    }

    body.flow-start-page.auth-sky-page .auth-entry__choice--child .auth-entry__choice-cta {
        box-shadow:
            0 5px 0 #0b8420,
            0 9px 13px rgba(11, 132, 32, .18);
    }

    body.flow-start-page.auth-sky-page .auth-entry__install {
        min-height: 98px;
        margin-top: 10px;
        padding: 10px;
        grid-template-columns: 68px minmax(0, 1fr);
        gap: 8px;
        border-width: 2px;
        border-radius: 22px;
    }

    body.flow-start-page.auth-sky-page .auth-entry__install > img {
        width: 72px;
        height: 70px;
    }

    body.flow-start-page.auth-sky-page .auth-entry__install small {
        margin-bottom: 3px;
        font-size: .7rem;
    }

    body.flow-start-page.auth-sky-page .auth-entry__install strong {
        margin-bottom: 3px;
        font-size: .88rem;
    }

    body.flow-start-page.auth-sky-page .auth-entry__install em {
        font-size: .7rem;
        line-height: 1.18;
    }

    body.flow-start-page.auth-sky-page .auth-entry__install > b {
        min-height: 50px;
        padding: 7px 5px;
        grid-column: 1 / -1;
        border-radius: 14px;
        box-shadow:
            0 5px 0 #d14c00,
            0 9px 13px rgba(221, 86, 0, .18);
        font-size: .72rem;
        line-height: 1.05;
    }
}

@media (max-width: 360px) {
    body.flow-start-page.auth-sky-page .auth-entry__choice {
        grid-template-columns: 58px minmax(0, 1fr) 96px;
    }

    body.flow-start-page.auth-sky-page .auth-entry__choice--child {
        grid-template-columns: 96px minmax(0, 1fr);
    }

    body.flow-start-page.auth-sky-page .auth-entry__choice--child .auth-entry__choice-cta {
        grid-column: 1 / -1;
    }

    body.flow-start-page.auth-sky-page .auth-entry__install {
        grid-template-columns: 68px minmax(0, 1fr);
    }

    body.flow-start-page.auth-sky-page .auth-entry__install > b {
        grid-column: 1 / -1;
    }
}

@media (max-width: 700px) {
    .auth-entry-screen {
        padding: 10px 10px 24px;
    }

    .auth-entry__hero {
        min-height: 350px;
    }

    .auth-entry__logo {
        top: 12px;
        left: 1%;
        width: 57%;
    }

    .auth-entry__robot {
        top: 26px;
        right: 0;
        width: 44%;
    }

    .auth-entry__hero p {
        right: 20%;
        bottom: 35px;
        width: 60%;
        font-size: 1rem;
    }

    .auth-entry__panel {
        padding: 22px 14px;
        border-radius: 26px;
    }

    .auth-entry__panel h1 {
        gap: 9px;
        margin-bottom: 18px;
        font-size: 1.25rem;
    }

    .auth-entry__choices {
        gap: 13px;
    }

    .auth-entry__choice {
        min-height: 134px;
        padding: 14px;
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 12px;
        border-radius: 22px;
    }

    .auth-entry__choice-icon {
        width: 68px;
        height: 68px;
    }

    .auth-entry__choice-icon img {
        width: 43px;
        height: 43px;
    }

    .auth-entry__choice-copy strong {
        font-size: .92rem;
    }

    .auth-entry__choice-copy small {
        font-size: .78rem;
    }

    .auth-entry__choice-cta {
        min-height: 52px;
        padding: 10px 12px;
        grid-column: 1 / -1;
        border-radius: 16px;
        font-size: .9rem;
    }

    .auth-entry__install {
        min-height: 130px;
        padding: 14px;
        grid-template-columns: 78px minmax(0, 1fr);
        gap: 12px;
        border-radius: 24px;
    }

    .auth-entry__install > img {
        width: 72px;
        height: 72px;
    }

    .auth-entry__install small {
        font-size: .73rem;
    }

    .auth-entry__install strong {
        font-size: 1rem;
    }

    .auth-entry__install em {
        font-size: .77rem;
    }

    .auth-entry__install > b {
        min-height: 50px;
        grid-column: 1 / -1;
        border-radius: 16px;
        font-size: .9rem;
    }

    .auth-entry__safety {
        padding: 10px 14px;
        font-size: .77rem;
    }

    .auth-entry__safety img {
        width: 40px;
        height: 40px;
    }

    body.flow-parent-register-page .parent-register-screen,
    body.parent-signin-page .parent-signin-screen {
        padding: 8px 10px 28px;
    }

    body.flow-parent-register-page .parent-register-hero,
    body.parent-signin-page .parent-signin-hero {
        height: 330px;
    }

    body.flow-parent-register-page .parent-register-logo,
    body.parent-signin-page .parent-signin-logo {
        top: 24px;
        left: 2%;
        width: 55%;
    }

    body.flow-parent-register-page .parent-register-robot,
    body.parent-signin-page .parent-signin-robot {
        top: 46px;
        right: -2%;
        width: 46%;
    }

    body.flow-parent-register-page .parent-register-heading {
        margin: -54px 0 20px;
    }

    body.flow-parent-register-page .parent-register-heading h1 {
        font-size: 2.08rem;
    }

    body.flow-parent-register-page .parent-register-heading p {
        margin-top: 15px;
        font-size: .98rem;
    }

    body.flow-parent-register-page .parent-register-panel,
    body.parent-signin-page .parent-signin-panel {
        padding: 24px 16px 28px;
        border-radius: 26px;
    }

    .parent-register-name-row {
        gap: 9px;
    }

    body.flow-parent-register-page .parent-register-field {
        min-height: 64px;
        grid-template-columns: 45px minmax(0, 1fr) 42px;
        border-radius: 15px;
    }

    body.flow-parent-register-page .parent-register-field > img {
        width: 21px;
        height: 21px;
        margin-left: 13px;
    }

    body.flow-parent-register-page .parent-register-field > span,
    body.flow-parent-register-page .parent-register-field input {
        font-size: .86rem;
    }

    body.flow-parent-register-page .parent-register-field input {
        padding-left: 45px;
    }

    body.flow-parent-register-page .parent-register-submit {
        min-height: 66px;
        font-size: 1.08rem;
    }

    body.flow-parent-register-page .parent-register-google {
        width: 100%;
        min-height: 64px;
        padding: 0 12px;
        font-size: .87rem;
    }

    body.parent-signin-page .parent-signin-heading {
        margin: -56px 0 20px;
    }

    body.parent-signin-page .parent-signin-heading h1 {
        font-size: 1.67rem;
    }

    body.parent-signin-page .parent-signin-heading p {
        font-size: .98rem;
    }

    body.parent-signin-page .parent-signin-field {
        min-height: 70px;
        margin-top: 13px;
        grid-template-columns: 52px minmax(0, 1fr) 50px;
        border-radius: 17px;
    }

    body.parent-signin-page .parent-signin-field > img {
        width: 25px;
        height: 25px;
        margin-left: 16px;
    }

    body.parent-signin-page .parent-signin-field > span,
    body.parent-signin-page .parent-signin-field input {
        font-size: .95rem;
    }

    body.parent-signin-page .parent-signin-field input {
        padding-left: 52px;
    }

    body.parent-signin-page .parent-signin-row {
        min-height: 54px;
        font-size: .84rem;
    }

    body.parent-signin-page .parent-signin-remember input {
        width: 24px;
        height: 24px;
    }

    body.parent-signin-page .parent-signin-submit {
        min-height: 66px;
        font-size: 1.1rem;
    }

    body.parent-signin-page .parent-signin-google {
        min-height: 64px;
        grid-template-columns: 42px minmax(0, auto) 42px;
        font-size: .9rem;
    }

    body.parent-signin-page .parent-signin-security {
        min-height: 104px;
        margin-inline: 0;
        padding: 16px;
        grid-template-columns: 60px minmax(0, 1fr);
        gap: 14px;
    }

    body.parent-signin-page .parent-signin-security img:first-child {
        width: 54px;
        height: 54px;
    }

    body.parent-signin-page .parent-signin-security p {
        font-size: .8rem;
    }

body.parent-signin-page .parent-signin-security strong {
    font-size: .92rem;
    }
}

/* Teacher auth extension. */
body.teacher-signin-page .teacher-auth-heading h1 span,
body.teacher-register-page .teacher-auth-heading h1,
body.teacher-register-page .teacher-auth-panel h2,
body.teacher-signin-page .teacher-auth-panel h2 {
    color: #7d32df;
}

body.teacher-signin-page .teacher-auth-heading h1 {
    text-transform: none;
}

body.teacher-signin-page .teacher-auth-submit,
body.teacher-register-page .teacher-auth-submit {
    background: linear-gradient(180deg, #c855fb, #682be5);
    box-shadow: 0 10px 20px rgba(111, 43, 229, .29);
}

body.teacher-register-page .teacher-register-form {
    display: grid;
    gap: 0;
}

body.teacher-register-page .parent-register-field {
    overflow: visible;
}

body.teacher-register-page .parent-register-field > span {
    position: absolute;
    top: 10px;
    left: 54px;
    z-index: 3;
    grid-column: auto;
    color: #6f7fa1;
    font-size: .76rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: .01em;
    opacity: 1 !important;
    visibility: visible !important;
}

body.teacher-register-page .parent-register-field input,
body.teacher-register-page .teacher-select-field select {
    padding-top: 24px;
    padding-bottom: 8px;
}

body.teacher-register-page .teacher-select-field select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0 52px 0 54px;
    border: 0;
    outline: 0;
    color: #0b327a;
    appearance: none;
    background: transparent;
    font: inherit;
    font-size: 1rem;
    font-weight: 800;
    line-height: normal;
}

body.teacher-register-page .teacher-school-picker {
    position: relative;
    margin-top: 14px;
}

body.teacher-register-page .teacher-school-field {
    margin-top: 0;
}

body.teacher-register-page .teacher-school-suggestions {
    position: absolute;
    z-index: 40;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    display: grid;
    max-height: 272px;
    overflow-y: auto;
    padding: 8px;
    border: 1px solid #d6dfed;
    border-radius: 18px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 14px 32px rgba(25, 72, 121, .18);
}

body.teacher-register-page .teacher-school-option {
    display: grid;
    width: 100%;
    padding: 11px 12px;
    justify-items: start;
    gap: 4px;
    border: 0;
    border-radius: 14px;
    color: #0b327a;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

body.teacher-register-page .teacher-school-option:hover,
body.teacher-register-page .teacher-school-option:focus-visible {
    background: #eff7ff;
    outline: none;
}

body.teacher-register-page .teacher-school-option strong,
body.teacher-register-page .teacher-school-option span {
    display: block;
}

body.teacher-register-page .teacher-school-option strong {
    font-size: .95rem;
    font-weight: 900;
}

body.teacher-register-page .teacher-school-option span,
body.teacher-register-page .teacher-field-note {
    color: #537196;
    font-size: .82rem;
    line-height: 1.35;
}

body.teacher-register-page .teacher-field-note {
    margin: 8px 2px 0;
}

body.teacher-register-page .teacher-grade-field {
    margin: 14px 0 0;
    padding: 18px 16px 16px;
    border: 2px solid #d6dfed;
    border-radius: 22px;
    background: #fff;
}

body.teacher-register-page .teacher-grade-field legend {
    display: inline-flex;
    padding: 0 8px;
    align-items: center;
    gap: 8px;
    color: #0b327a;
    font-size: .9rem;
    font-weight: 950;
}

body.teacher-register-page .teacher-grade-field legend img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

body.teacher-register-page .teacher-grade-field > p {
    margin: 0 0 14px;
    color: #5a7393;
    font-size: .9rem;
    line-height: 1.4;
}

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

body.teacher-register-page .teacher-grade-chip {
    position: relative;
    display: block;
}

body.teacher-register-page .teacher-grade-chip input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

body.teacher-register-page .teacher-grade-chip span {
    display: grid;
    min-height: 52px;
    padding: 10px 8px;
    place-items: center;
    border: 2px solid #d6dfed;
    border-radius: 16px;
    color: #0b327a;
    background: #f9fcff;
    font-size: .92rem;
    font-weight: 900;
    text-align: center;
    transition: border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease;
}

body.teacher-register-page .teacher-grade-chip input:checked + span {
    border-color: #7d32df;
    color: #6c29dc;
    background: #f6efff;
    box-shadow: 0 10px 18px rgba(125, 50, 223, .14);
}

body.teacher-register-page .teacher-grade-chip input:focus-visible + span {
    outline: 3px solid rgba(125, 50, 223, .24);
    outline-offset: 2px;
}

body.teacher-register-page .teacher-grade-chip:hover span {
    transform: translateY(-1px);
}

body.teacher-register-page .teacher-grade-error {
    margin: 12px 0 0;
}

body.teacher-register-page .teacher-select-field::after {
    content: "\2304";
    position: relative;
    z-index: 3;
    grid-column: 3;
    color: #0b4fc2;
    font-size: 1.7rem;
    font-weight: 950;
    text-align: center;
    pointer-events: none;
}

.teacher-auth-note,
.teacher-auth-home {
    display: grid;
    align-items: center;
    color: #0b327a;
    text-decoration: none;
}

.teacher-auth-note {
    margin: 18px 0 0;
    padding: 16px 18px;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 14px;
    border: 1px solid #dfcdfd;
    border-radius: 18px;
    background: #fbf7ff;
    font-size: .95rem;
    line-height: 1.4;
}

.teacher-auth-note img {
    width: 44px;
    height: 44px;
}

.teacher-auth-note strong {
    color: #7431dc;
}

.teacher-auth-home {
    min-height: 102px;
    margin: 22px 0 0;
    padding: 16px 22px;
    grid-template-columns: 72px minmax(0, 1fr) 34px;
    gap: 18px;
    border: 2px solid rgba(255, 255, 255, .8);
    border-radius: 28px;
    background: rgba(255, 255, 255, .72);
    box-shadow: 0 11px 22px rgba(31, 100, 148, .15);
}

.teacher-auth-home img {
    width: 58px;
    height: 58px;
    object-fit: contain;
}

.teacher-auth-home strong,
.teacher-auth-home small {
    display: block;
}

.teacher-auth-home strong {
    margin-bottom: 6px;
    font-size: 1.05rem;
}

.teacher-auth-home small {
    color: #0a83ef;
    font-size: 1rem;
    font-weight: 850;
}

.teacher-auth-home b {
    color: #0878e5;
    font-size: 2.4rem;
    line-height: 1;
}

@media (max-width: 700px) {
    .auth-entry__panel--roles {
        padding-top: 20px;
    }

    .auth-entry__panel--roles h1 {
        font-size: 1.9rem;
    }

    .auth-entry__lead {
        margin-bottom: 18px;
        font-size: .96rem;
    }

    .auth-entry__role-group {
        padding: 14px;
        border-radius: 24px;
    }

    .auth-entry__role-group > h2 {
        font-size: 1.18rem;
    }

    .auth-entry__role-group > h2 img {
        width: 31px;
        height: 31px;
    }

    .auth-entry__role-group > p {
        font-size: .82rem;
    }

    body.teacher-register-page .teacher-select-field select {
        padding-left: 45px;
        font-size: .86rem;
    }

    body.teacher-register-page .parent-register-field > span {
        top: 9px;
        left: 46px;
        font-size: .68rem;
    }

    body.teacher-register-page .parent-register-field input,
    body.teacher-register-page .teacher-select-field select {
        padding-top: 22px;
    }

    body.teacher-register-page .teacher-grade-field {
        padding: 16px 12px 14px;
        border-radius: 18px;
    }

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

    body.teacher-register-page .teacher-grade-chip span {
        min-height: 48px;
        font-size: .84rem;
    }

    .teacher-auth-note {
        padding: 13px 14px;
        grid-template-columns: 44px minmax(0, 1fr);
        font-size: .82rem;
    }

    .teacher-auth-note img {
        width: 38px;
        height: 38px;
    }

    .teacher-auth-home {
        min-height: 84px;
        padding: 13px 16px;
        grid-template-columns: 54px minmax(0, 1fr) 24px;
        gap: 12px;
        border-radius: 22px;
    }

    .teacher-auth-home img {
        width: 48px;
        height: 48px;
    }

    .teacher-auth-home strong {
        font-size: .86rem;
    }

    .teacher-auth-home small {
        font-size: .82rem;
    }
}

@media (max-width: 390px) {
    .auth-entry__hero {
        min-height: 326px;
    }

    body.flow-parent-register-page .parent-register-hero,
    body.parent-signin-page .parent-signin-hero {
        height: 305px;
    }

    body.flow-parent-register-page .parent-register-heading h1 {
        font-size: 1.85rem;
    }

    body.parent-signin-page .parent-signin-row {
        align-items: center;
        flex-direction: row;
        justify-content: space-between;
        gap: 10px;
    }
}

/* END 2026-07-29: public entry and parent auth screens. */

/* START 2026-08-06: teacher dashboard surfaces. */
body.teacher-dashboard-page {
    background:
        radial-gradient(circle at top, rgba(59, 153, 255, .28), transparent 38%),
        linear-gradient(180deg, #f3fbff 0%, #eef7ff 100%);
}

.teacher-hub {
    padding: 28px 16px 40px;
}

.teacher-shell {
    width: min(1160px, 100%);
    margin: 0 auto;
}

.teacher-hero {
    position: relative;
    min-height: 212px;
    margin-bottom: 18px;
    padding: 26px 28px 22px;
    overflow: hidden;
    border-radius: 34px;
    background: linear-gradient(180deg, #0e46c8 0%, #062b88 100%);
    box-shadow: 0 24px 48px rgba(8, 52, 141, .22);
}

.teacher-hero__stars {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 12% 30%, rgba(255, 255, 255, .85) 0 2px, transparent 2px),
        radial-gradient(circle at 24% 66%, rgba(69, 209, 255, .85) 0 7px, transparent 7px),
        radial-gradient(circle at 69% 24%, rgba(255, 255, 255, .8) 0 2px, transparent 2px),
        radial-gradient(circle at 84% 38%, rgba(189, 90, 255, .65) 0 8px, transparent 8px),
        radial-gradient(circle at 76% 70%, rgba(69, 209, 255, .8) 0 6px, transparent 6px);
    opacity: .85;
}

.teacher-hero__logo {
    position: relative;
    z-index: 2;
    display: block;
    width: min(260px, 52vw);
    margin: 10px auto 0;
}

.teacher-hero__profile {
    position: absolute;
    z-index: 2;
    top: 28px;
    right: 28px;
    display: flex;
    align-items: center;
    gap: 14px;
    color: #fff;
}

.teacher-avatar {
    display: inline-grid;
    width: 64px;
    height: 64px;
    place-items: center;
    border: 3px solid rgba(255, 255, 255, .92);
    border-radius: 50%;
    color: #0b3ca7;
    background: linear-gradient(180deg, #dff7ff 0%, #8bd8ff 100%);
    box-shadow: 0 12px 26px rgba(0, 17, 74, .24);
    font-size: 1.35rem;
    font-weight: 900;
}

.teacher-avatar--small {
    width: 44px;
    height: 44px;
    font-size: 1rem;
}

.teacher-avatar--large {
    width: 92px;
    height: 92px;
    font-size: 2rem;
}

.teacher-hero__profile strong,
.teacher-hero__profile small {
    display: block;
}

.teacher-hero__profile strong {
    font-size: 1.8rem;
    line-height: 1.05;
}

.teacher-hero__profile small {
    margin-top: 4px;
    font-size: 1.05rem;
    opacity: .92;
}

.teacher-panel {
    margin-bottom: 18px;
    padding: 24px;
    border: 1px solid rgba(146, 205, 255, .6);
    border-radius: 28px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 16px 32px rgba(21, 90, 175, .11);
}

.teacher-panel--welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.teacher-panel--welcome h1,
.teacher-empty-state h1,
.teacher-student-hero h1 {
    margin: 0;
    color: #112d95;
    font-size: clamp(2rem, 3vw, 3.25rem);
    line-height: 1.05;
}

.teacher-panel--welcome p,
.teacher-empty-state p,
.teacher-student-hero p {
    margin: 8px 0 0;
    color: #20437d;
    font-size: 1.15rem;
}

.teacher-actions {
    display: flex;
    gap: 12px;
}

.teacher-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 0 24px;
    border: 0;
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(180deg, #2d8fff 0%, #0c5ae5 100%);
    box-shadow: 0 10px 22px rgba(20, 97, 214, .24);
    font-size: 1rem;
    font-weight: 800;
    text-decoration: none;
}

.teacher-button--ghost {
    color: #0d58dc;
    background: #edf6ff;
    box-shadow: inset 0 0 0 1px rgba(13, 88, 220, .14);
}

.teacher-summary-grid,
.teacher-two-column {
    display: grid;
    gap: 18px;
}

.teacher-summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.teacher-two-column {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
}

.teacher-summary-card {
    padding: 18px 20px;
    border-radius: 24px;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
    box-shadow: inset 0 0 0 1px rgba(187, 224, 255, .75);
}

.teacher-summary-card span,
.teacher-summary-card small {
    display: block;
    color: #426393;
}

.teacher-summary-card strong {
    display: block;
    margin: 10px 0 4px;
    color: #122d96;
    font-size: clamp(2rem, 2.8vw, 3rem);
    line-height: 1;
}

.teacher-class-grid,
.teacher-focus-grid,
.teacher-student-grid,
.teacher-topic-cards {
    display: grid;
    gap: 18px;
}

.teacher-class-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.teacher-focus-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.teacher-student-grid,
.teacher-topic-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.teacher-class-card,
.teacher-focus-card,
.teacher-student-card,
.teacher-topic-card {
    padding: 22px;
    border-radius: 24px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: inset 0 0 0 1px rgba(190, 228, 255, .8);
}

.teacher-class-card__header,
.teacher-class-card__stats,
.teacher-student-row,
.teacher-recommendation-row,
.teacher-section-heading,
.teacher-student-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.teacher-class-card__header h3,
.teacher-section-heading h2,
.teacher-student-card strong,
.teacher-topic-card strong {
    margin: 0;
    color: #12319a;
}

.teacher-class-card__header p,
.teacher-section-heading p,
.teacher-muted {
    margin: 6px 0 0;
    color: #5b76a3;
}

.teacher-status-badge,
.teacher-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    font-size: .95rem;
    font-weight: 800;
}

.teacher-status-badge--good {
    color: #169d3d;
    background: #eafaf0;
}

.teacher-status-badge--info {
    color: #1458e0;
    background: #eaf2ff;
}

.teacher-status-badge--warn,
.teacher-pill--priority {
    color: #e46c00;
    background: #fff3e8;
}

.teacher-pill--practice {
    color: #7431dc;
    background: #f3ebff;
}

.teacher-class-card__stats div {
    min-width: 0;
}

.teacher-class-card__stats strong,
.teacher-focus-card b,
.teacher-student-card b,
.teacher-topic-card b {
    display: block;
    color: #12319a;
    font-size: 2rem;
    line-height: 1;
}

.teacher-class-card__stats span,
.teacher-focus-card small,
.teacher-student-card small,
.teacher-topic-card small {
    color: #56739b;
}

.teacher-mini-trend,
.teacher-line-chart {
    display: flex;
    align-items: end;
    gap: 10px;
}

.teacher-mini-trend {
    min-height: 68px;
    margin: 18px 0;
}

.teacher-mini-trend span,
.teacher-line-chart__item span {
    display: block;
    width: 100%;
    border-radius: 999px 999px 8px 8px;
    background: linear-gradient(180deg, #3fb4ff 0%, #0d60e5 100%);
}

.teacher-mini-trend span {
    flex: 1 1 0;
}

.teacher-focus-card,
.teacher-student-card,
.teacher-topic-card {
    text-align: center;
}

.teacher-topic-chip {
    display: inline-grid;
    width: 60px;
    height: 60px;
    margin-bottom: 12px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    font-size: 1.6rem;
    font-weight: 900;
}

.teacher-topic-chip--green { background: linear-gradient(180deg, #42d77f 0%, #1da85a 100%); }
.teacher-topic-chip--orange { background: linear-gradient(180deg, #ffad43 0%, #ff7a00 100%); }
.teacher-topic-chip--purple { background: linear-gradient(180deg, #bf6dff 0%, #7c2cff 100%); }
.teacher-topic-chip--gold { background: linear-gradient(180deg, #ffd34d 0%, #f0a400 100%); }
.teacher-topic-chip--teal { background: linear-gradient(180deg, #39d6db 0%, #00a1b8 100%); }
.teacher-topic-chip--blue { background: linear-gradient(180deg, #63baff 0%, #0e63e8 100%); }

.teacher-line-chart {
    min-height: 180px;
    padding-top: 12px;
}

.teacher-line-chart__item {
    flex: 1 1 0;
    text-align: center;
}

.teacher-line-chart__item small {
    display: block;
    margin-top: 10px;
    color: #617ca5;
    font-size: .88rem;
}

.teacher-topic-list,
.teacher-student-list,
.teacher-recommendation-list {
    display: grid;
    gap: 14px;
}

.teacher-topic-row,
.teacher-student-row,
.teacher-recommendation-row {
    padding: 14px 16px;
    border-radius: 18px;
    background: #f8fbff;
}

.teacher-student-row,
.teacher-student-card {
    color: inherit;
    text-decoration: none;
}

.teacher-topic-row__progress {
    flex: 1 1 auto;
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: #e5eef9;
}

.teacher-topic-row__progress i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #42d77f 0%, #0d60e5 100%);
}

.teacher-student-row b {
    color: #12319a;
    font-size: 1.5rem;
}

.teacher-student-hero {
    justify-content: flex-start;
}

.teacher-student-hero__content {
    flex: 1 1 auto;
}

.teacher-mistake-table {
    overflow: hidden;
    border-radius: 20px;
    box-shadow: inset 0 0 0 1px rgba(190, 228, 255, .8);
}

.teacher-mistake-table__head,
.teacher-mistake-table__row {
    display: grid;
    grid-template-columns: 1.1fr .9fr .7fr .7fr;
    gap: 12px;
    align-items: center;
    padding: 16px 18px;
}

.teacher-mistake-table__head {
    color: #45638e;
    background: #f3f9ff;
    font-weight: 800;
}

.teacher-mistake-table__row:nth-child(even) {
    background: #fbfdff;
}

.teacher-answer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 12px;
    border-radius: 12px;
    font-weight: 800;
}

.teacher-answer--bad {
    color: #e34a4a;
    background: #ffeef0;
}

.teacher-answer--good {
    color: #169d3d;
    background: #ebfaef;
}

.teacher-note {
    margin: 0;
    padding: 18px 20px;
    border-radius: 20px;
    color: #234070;
    background: #f4f9ff;
    font-size: 1.05rem;
    line-height: 1.65;
}

.teacher-empty-state {
    text-align: center;
}

@media (max-width: 980px) {
    .teacher-summary-grid,
    .teacher-class-grid,
    .teacher-focus-grid,
    .teacher-student-grid,
    .teacher-topic-cards,
    .teacher-two-column {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .teacher-hub {
        padding: 18px 10px 28px;
    }

    .teacher-hero {
        min-height: 184px;
        padding: 20px 18px 18px;
        border-radius: 28px;
    }

    .teacher-hero__profile {
        top: 18px;
        right: 18px;
        gap: 10px;
    }

    .teacher-avatar {
        width: 54px;
        height: 54px;
        font-size: 1.05rem;
    }

    .teacher-avatar--large {
        width: 76px;
        height: 76px;
        font-size: 1.6rem;
    }

    .teacher-hero__profile strong {
        font-size: 1.15rem;
    }

    .teacher-hero__profile small {
        font-size: .84rem;
    }

    .teacher-panel,
    .teacher-class-card,
    .teacher-focus-card,
    .teacher-student-card,
    .teacher-topic-card {
        padding: 18px;
        border-radius: 22px;
    }

    .teacher-panel--welcome,
    .teacher-class-card__header,
    .teacher-class-card__stats,
    .teacher-student-hero,
    .teacher-recommendation-row,
    .teacher-topic-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .teacher-summary-grid,
    .teacher-class-grid,
    .teacher-focus-grid,
    .teacher-student-grid,
    .teacher-topic-cards,
    .teacher-two-column {
        grid-template-columns: 1fr;
    }

    .teacher-button {
        width: 100%;
    }

    .teacher-mistake-table__head,
    .teacher-mistake-table__row {
        grid-template-columns: 1fr;
    }
}
/* END 2026-08-06: teacher dashboard surfaces. */

/* GLOBAL-BACK-CONTROL-20260803: keep the canonical control above page-specific Robo styles. */
body .arena-back-button,
body .context-back-button,
body .ra-profile-reference__back,
.robo-arena .ra-live-game-screen .ra-game-back.arena-back-button {
    position: fixed !important;
    z-index: 1000 !important;
    top: max(14px, calc(env(safe-area-inset-top) + 10px)) !important;
    left: max(14px, calc(env(safe-area-inset-left) + 10px)) !important;
    display: grid !important;
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    padding: 0 !important;
    place-items: center !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: inherit !important;
    background: transparent !important;
    box-shadow: none !important;
    text-decoration: none !important;
    transform: none !important;
    filter: none !important;
    touch-action: manipulation !important;
    transition: transform .16s ease, filter .16s ease !important;
}

body .arena-back-button:hover,
body .context-back-button:hover,
body .ra-profile-reference__back:hover,
.robo-arena .ra-live-game-screen .ra-game-back.arena-back-button:hover {
    transform: translateY(-2px) scale(1.04) !important;
    filter: brightness(1.04) !important;
}

body .arena-back-button:active,
body .context-back-button:active,
body .ra-profile-reference__back:active,
.robo-arena .ra-live-game-screen .ra-game-back.arena-back-button:active {
    transform: translateY(2px) scale(.96) !important;
}

body .arena-back-button:focus-visible,
body .context-back-button:focus-visible,
body .ra-profile-reference__back:focus-visible,
.robo-arena .ra-live-game-screen .ra-game-back.arena-back-button:focus-visible {
    outline: 4px solid #ffd43b !important;
    outline-offset: 3px !important;
}

body .arena-back-button > img,
body .context-back-button > img,
body .ra-profile-reference__back > img,
.robo-arena .ra-live-game-screen .ra-game-back.arena-back-button > img {
    display: block !important;
    width: 57px !important;
    height: 52px !important;
    object-fit: contain !important;
    filter: none !important;
}

/* CHILD-SCREEN-AUDIT-FIX-20260803 */
body.ra-profile-page .ra-profile-reference__top {
    grid-template-columns: 56px minmax(0, 1fr) 56px !important;
    min-height: 76px !important;
    padding-inline: 14px !important;
}

body.ra-profile-page .ra-profile-reference__top h1 {
    grid-column: 2 !important;
    text-align: center !important;
}

body.ra-profile-page .ra-profile-reference__settings {
    grid-column: 3 !important;
    justify-self: end !important;
}

body.ra-rewards-page .ra-reward-hero,
body.ra-results-page .game-profile-hero {
    padding-left: clamp(76px, 12vw, 96px) !important;
}

body.ra-game-page .game-setup[data-smart-trainer="1"] .panel-heading,
body.ra-game-page .game-root[data-smart-trainer="1"] .game-setup .panel-heading {
    padding-left: 72px !important;
}

body.ra-game-page .game-root[data-smart-trainer="1"] .panel-heading > div {
    min-width: 0 !important;
}

body.ra-game-page .game-root[data-smart-trainer="1"] .panel-heading h1,
body.ra-game-page .game-root[data-smart-trainer="1"] .panel-heading p {
    overflow-wrap: anywhere !important;
}

body.admin-login-page .narrow-page {
    padding-top: 82px !important;
}

body.admin-login-page .login-panel .panel-heading {
    padding-left: 0 !important;
}

.robo-arena.ra-switch-child .hero-actions .btn,
.robo-arena.ra-switch-child .button-row .btn,
.robo-arena.ra-switch-child .button-row form {
    min-height: 46px !important;
}

.leaderboard-page {
    padding-top: 76px !important;
}

.leaderboard-page .leader-list li {
    min-height: 48px !important;
}

@media (min-width: 1000px) {
    body.robo-arena-page:has(#child-arena-master) #child-arena-master {
        width: min(1180px, calc(100% - 48px)) !important;
        max-width: 1180px !important;
    }

    body.ra-results-page .robo-arena.ra-live-results .summary-grid,
    body.ra-rewards-page .robo-arena.ra-live-rewards .summary-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 620px) {
    body.ra-results-page .summary-grid > :last-child:nth-child(odd),
    body.ra-rewards-page .summary-grid > :last-child:nth-child(odd) {
        grid-column: 1 / -1 !important;
    }

    body.ra-rewards-page .ra-reward-hero,
    body.ra-results-page .game-profile-hero {
        min-height: 190px !important;
        padding-left: 74px !important;
    }

    body.ra-game-page .game-root[data-smart-trainer="1"] .game-setup .panel-heading {
        grid-template-columns: 58px minmax(0, 1fr) !important;
        padding: 18px 14px 18px 74px !important;
    }
}

/* Keep the world-game controls inside their own HUD. This must remain after
   the global back-control rules because the game uses a five-column layout. */
html body.ra-game-page .robo-arena .ra-live-game-screen .ra-game-back.arena-back-button {
    position: static !important;
    inset: auto !important;
    grid-area: back !important;
    align-self: center !important;
    justify-self: center !important;
    z-index: 5 !important;
}

html body.ra-game-page .robo-arena .game-root[data-auto-start="1"] .ra-question-kicker,
html body.ra-game-page .robo-arena .game-root[data-world-skin][data-auto-start="1"] .ra-question-kicker {
    display: none !important;
}

html body.ra-game-page .robo-arena .game-root[data-auto-start="1"] .ra-equation-row::after,
html body.ra-game-page .robo-arena .game-root[data-world-skin][data-auto-start="1"] .ra-equation-row::after {
    content: none !important;
    display: none !important;
}

/* IKONICE-CACHE-001: optical normalization for artwork with different internal whitespace. */
body.robo-arena-page #child-arena-master .ra-live-action {
    grid-template-rows: clamp(88px, 18vw, 170px) auto auto auto !important;
}

body.robo-arena-page #child-arena-master .ra-live-action > img {
    width: clamp(88px, 18vw, 170px) !important;
    height: clamp(88px, 18vw, 170px) !important;
    align-self: center !important;
    justify-self: center !important;
    object-fit: contain !important;
    transform-origin: center center !important;
}

body.robo-arena-page #child-arena-master .ra-live-action.is-primary.is-daily-goal {
    min-height: calc(clamp(172px, 38vw, 270px) + 20px) !important;
    padding-bottom: calc(clamp(14px, 3vw, 24px) + 20px) !important;
}

body.robo-arena-page #child-arena-master .ra-live-action.is-primary.is-daily-goal .ra-live-action__arrow {
    transform: translateY(5px) !important;
}

body.robo-arena-page #child-arena-master .ra-live-action:nth-child(2) > img {
    transform: scale(.78) !important;
}

body.robo-arena-page #child-arena-master .ra-live-action.is-reward > img {
    transform: scale(1.35) !important;
}

@media (max-width: 700px) {
    body.robo-arena-page #child-arena-master .ra-live-action {
        grid-template-rows: 78px auto auto auto !important;
    }

    body.robo-arena-page #child-arena-master .ra-live-action.is-primary.is-daily-goal {
        min-height: calc(104px + 20px) !important;
        padding-bottom: 20px !important;
    }

    body.robo-arena-page #child-arena-master .ra-live-action > img {
        width: 78px !important;
        height: 78px !important;
    }

    body.robo-arena-page #child-arena-master .ra-live-action.is-daily-goal > img {
        width: 88px !important;
        height: 88px !important;
    }
}
html body.robo-arena-page #child-arena-master .ra-live-stat-card--trophies {
    min-width: 0 !important;
}

html body.robo-arena-page #child-arena-master .ra-live-stat-trigger {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 100% !important;
    padding: 0 !important;
    grid-template-columns: inherit !important;
    grid-template-rows: inherit !important;
    align-items: center !important;
    justify-items: start !important;
    gap: inherit !important;
    color: inherit !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: inherit !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

html body.robo-arena-page #child-arena-master .ra-live-stat-trigger > span {
    grid-row: 1 / 3 !important;
    width: clamp(38px, 10vw, 74px) !important;
    height: clamp(38px, 10vw, 74px) !important;
    align-self: center !important;
    justify-self: start !important;
}

html body.robo-arena-page #child-arena-master .ra-live-stat-trigger > strong {
    display: block !important;
    min-width: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    align-self: end !important;
    justify-self: start !important;
    overflow: visible !important;
    white-space: nowrap !important;
    line-height: .95 !important;
    transform: none !important;
}

html body.robo-arena-page #child-arena-master .ra-live-stat-trigger > small {
    display: block !important;
    min-width: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    align-self: start !important;
    justify-self: start !important;
}

@media (max-width: 640px) {
    html body.robo-arena-page #child-arena-master .ra-live-stat-trigger {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto auto !important;
        justify-items: center !important;
        text-align: center !important;
    }

    html body.robo-arena-page #child-arena-master .ra-live-stat-trigger > span {
        grid-row: auto !important;
        width: 42px !important;
        height: 42px !important;
        justify-self: center !important;
    }

    html body.robo-arena-page #child-arena-master .ra-live-stat-trigger > strong,
    html body.robo-arena-page #child-arena-master .ra-live-stat-trigger > small {
        width: 100% !important;
        justify-self: center !important;
        text-align: center !important;
    }
}

html body.robo-arena-page #child-arena-master .ra-live-action {
    height: 36.65cqi !important;
}

/* START TEACHER-PIXEL-PERFECT-003 */
@font-face {
    font-family: "Teacher Inter";
    src: url("../fonts/teacher/Inter-Regular.otf") format("opentype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Teacher Inter";
    src: url("../fonts/teacher/Inter-Medium.otf") format("opentype");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "Teacher Inter";
    src: url("../fonts/teacher/Inter-Regular.otf") format("opentype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Teacher Inter";
    src: url("../fonts/teacher/Inter-Medium.otf") format("opentype");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "Teacher Inter";
    src: url("../fonts/teacher/Inter-SemiBold.otf") format("opentype");
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "Teacher Inter";
    src: url("../fonts/teacher/Inter-Bold.otf") format("opentype");
    font-style: normal;
    font-weight: 700 900;
    font-display: swap;
}

html body.teacher-reference-page {
    --teacher-bg: #f3f7ff;
    --teacher-surface: #fff;
    --teacher-soft: #f8fbff;
    --teacher-text: #0b1f73;
    --teacher-body: #29437a;
    --teacher-muted: #6e87b7;
    --teacher-blue: #0f5bff;
    --teacher-purple: #8f45ff;
    --teacher-green: #27c45d;
    --teacher-orange: #ffaf1a;
    --teacher-red: #ff5d4d;
    --teacher-teal: #18c4d6;
    --teacher-border: #d9e8ff;
    margin: 0;
    color: var(--teacher-body);
    background: var(--teacher-bg) !important;
    font-family: "Teacher Inter", "Segoe UI", Arial, sans-serif !important;
    letter-spacing: 0;
}

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

html body.teacher-reference-page .site-header,
html body.teacher-reference-page .site-footer,
html body.teacher-reference-page .mobile-bottom-nav { display: none !important; }

html body.teacher-reference-page .teacher-hub { min-height: 100vh; padding: 0 0 40px; }

html body.teacher-reference-page .teacher-shell {
    width: min(1120px, 100%);
    min-height: 100vh;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 36px;
    background: #fff;
    box-shadow: 0 20px 60px rgba(12, 53, 126, .13);
}

html body.teacher-reference-page .teacher-content { padding: 0 36px 28px; }

html body.teacher-reference-page .teacher-app-header {
    position: relative;
    height: 172px;
    margin: 0 0 42px;
    overflow: visible;
    border-radius: 0 0 50% 50% / 0 0 19% 19%;
    background:
        radial-gradient(circle at 14% 18%, rgba(255,255,255,.2), transparent 22%),
        linear-gradient(180deg, #0b3bb6 0%, #0833a6 48%, #0a51d6 100%);
    box-shadow: 0 8px 18px rgba(12, 53, 126, .16);
}

html body.teacher-reference-page .teacher-app-header::before,
html body.teacher-reference-page .teacher-app-header::after {
    position: absolute;
    content: "+";
    color: #42a9ff;
    font-size: 52px;
    font-weight: 900;
    line-height: 1;
    text-shadow: 110px 25px 0 rgba(59,167,255,.66), 235px -10px 0 rgba(59,167,255,.48);
    opacity: .75;
}

html body.teacher-reference-page .teacher-app-header::before { top: 52px; left: 190px; }
html body.teacher-reference-page .teacher-app-header::after { top: 64px; right: 185px; color: #8f45ff; text-shadow: 120px -28px 0 rgba(59,167,255,.5); }

html body.teacher-reference-page .teacher-app-header__logo {
    position: absolute;
    z-index: 4;
    top: 4px;
    left: 50%;
    width: 190px;
    height: 154px;
    object-fit: contain;
    transform: translateX(-50%);
    filter: drop-shadow(0 6px 10px rgba(0, 20, 90, .25));
}

html body.teacher-reference-page .teacher-header-decoration {
    --teacher-decoration-color: #35b7ff;
    --teacher-decoration-shadow: rgba(53, 183, 255, .42);
    position: absolute;
    z-index: 2;
    display: block;
    filter: drop-shadow(0 4px 5px var(--teacher-decoration-shadow));
}
html body.teacher-reference-page .teacher-header-decoration::before,
html body.teacher-reference-page .teacher-header-decoration::after {
    position: absolute;
    top: 0;
    left: 38%;
    width: 24%;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(180deg, #72d7ff, var(--teacher-decoration-color));
    content: "";
}
html body.teacher-reference-page .teacher-header-decoration::after { transform: rotate(90deg); }
html body.teacher-reference-page .teacher-header-decoration--one { top: 38px; left: 145px; width: 42px; height: 42px; }
html body.teacher-reference-page .teacher-header-decoration--two { top: 92px; left: 285px; width: 38px; height: 30px; }
html body.teacher-reference-page .teacher-header-decoration--three {
    --teacher-decoration-color: #8f45ff;
    --teacher-decoration-shadow: rgba(143, 69, 255, .42);
    right: 132px;
    bottom: 25px;
    width: 45px;
    height: 45px;
}

html body.teacher-reference-page .teacher-app-header__profile {
    position: absolute;
    z-index: 5;
    top: 28px;
    right: 108px;
    display: flex;
    align-items: center;
    gap: 14px;
    color: #fff;
}

html body.teacher-reference-page .teacher-app-header__profile strong,
html body.teacher-reference-page .teacher-app-header__profile small { display: block; color: #fff; }
html body.teacher-reference-page .teacher-app-header__profile strong { font-size: 21px; font-weight: 700; line-height: 1.2; }
html body.teacher-reference-page .teacher-app-header__profile small { margin-top: 4px; font-size: 16px; font-weight: 500; }

html body.teacher-reference-page .teacher-header-logout {
    position: absolute;
    z-index: 8;
    top: 30px;
    right: 28px;
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border: 1px solid rgba(255,255,255,.48);
    border-radius: 999px;
    color: #fff;
    background: rgba(255,255,255,.14);
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(0,25,90,.18);
}

html body.teacher-reference-page .teacher-header-logout:hover,
html body.teacher-reference-page .teacher-header-logout:focus-visible {
    background: rgba(255,255,255,.24);
}

html body.teacher-reference-page .teacher-avatar {
    display: block;
    overflow: hidden;
    box-sizing: border-box;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    background: #eaf7ff;
}
html body.teacher-reference-page .teacher-avatar--teacher { width: 72px; height: 72px; border: 3px solid #fff; box-shadow: 0 5px 15px rgba(0, 15, 75, .3); }
html body.teacher-reference-page .teacher-avatar--small {
    width: 40px;
    height: 40px;
    padding: 2px;
    border: 2px solid #b9e4ff;
    object-fit: contain;
    object-position: center;
    background: linear-gradient(180deg,#ffffff,#eef8ff);
}
html body.teacher-reference-page .teacher-avatar--large {
    width: 112px;
    height: 112px;
    padding: 6px;
    border: 4px solid #fff;
    object-fit: contain;
    object-position: center;
    background: linear-gradient(180deg,#ffffff,#eef8ff);
    box-shadow: 0 0 0 3px #76d8ff, 0 10px 24px rgba(12, 53, 126, .18);
}

html body.teacher-reference-page .teacher-header-robot { position: absolute; z-index: 4; bottom: -17px; left: 130px; width: 125px; height: 150px; object-fit: contain; object-position: center bottom; }

html body.teacher-reference-page .arena-back-button {
    position: absolute !important;
    z-index: 20 !important;
    top: 30px !important;
    left: 30px !important;
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    min-height: 72px !important;
    border-width: 3px !important;
    transform: none !important;
}

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

html body.teacher-reference-page .teacher-page-heading {
    display: flex;
    min-height: 122px;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin: 0 0 24px;
}

html body.teacher-reference-dashboard .teacher-page-heading { min-height: 146px; }

html body.teacher-reference-page .teacher-page-heading h1,
html body.teacher-reference-page .teacher-student-hero h1 {
    margin: 0;
    color: var(--teacher-text);
    font-size: 56px;
    font-weight: 800;
    line-height: 60px;
}

html body.teacher-reference-page .teacher-page-heading p,
html body.teacher-reference-page .teacher-student-hero p { margin: 7px 0 0; color: var(--teacher-body); font-size: 16px; font-weight: 500; line-height: 24px; }

html body.teacher-reference-page .teacher-filter-group { display: flex; gap: 16px; }
html body.teacher-reference-page .teacher-filter {
    display: inline-flex;
    min-width: 230px;
    height: 58px;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 0 22px;
    border: 1px solid #c6daff;
    border-radius: 29px;
    color: var(--teacher-text);
    background: #fff;
    box-shadow: 0 8px 20px rgba(12,53,126,.1);
    font: inherit;
    font-size: 17px;
    font-weight: 700;
}
html body.teacher-reference-page .teacher-filter img { width: 28px; height: 28px; object-fit: contain; }
html body.teacher-reference-page .teacher-filter > span:last-child { margin-left: auto; color: var(--teacher-blue); font-size: 22px; }
html body.teacher-reference-page .teacher-filter--small { min-width: 230px; height: 44px; font-size: 14px; }
html body.teacher-reference-page .teacher-sliders { color: var(--teacher-blue); font-size: 27px; }

html body.teacher-reference-page .teacher-panel,
html body.teacher-reference-page .teacher-kpi-card,
html body.teacher-reference-page .teacher-coach-card {
    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-page .teacher-panel { margin: 0 0 24px; padding: 24px; }

html body.teacher-reference-page .teacher-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0 0 18px; }
html body.teacher-reference-page .teacher-section-heading h2 { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--teacher-text); font-size: 24px; font-weight: 800; line-height: 30px; }
html body.teacher-reference-page .teacher-section-heading h2 > img { width: 30px; height: 30px; object-fit: contain; }
html body.teacher-reference-page .teacher-section-heading h2 small { font-size: 14px; font-weight: 600; }
html body.teacher-reference-page .teacher-section-heading p { margin: 3px 0 0 40px; color: var(--teacher-muted); font-size: 14px; }
html body.teacher-reference-page .teacher-text-action { border: 0; color: var(--teacher-blue); background: transparent; font: inherit; font-size: 16px; font-weight: 700; }
html body.teacher-reference-page .teacher-lightning,
html body.teacher-reference-page .teacher-line-icon,
html body.teacher-reference-page .teacher-book-icon { color: var(--teacher-blue); font-size: 30px; font-weight: 900; }
html body.teacher-reference-page .teacher-note-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; color: var(--teacher-blue); flex-shrink: 0; }
html body.teacher-reference-page .teacher-note-icon svg { width: 20px; height: 20px; }

html body.teacher-reference-page .teacher-summary-strip { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px; margin: 0 0 24px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
html body.teacher-reference-page .teacher-summary-card { display: flex; min-width: 0; min-height: 136px; align-items: center; gap: 14px; padding: 24px 20px; border: 1px solid var(--teacher-border); border-radius: 20px; background: #fff; box-shadow: 0 12px 32px rgba(12,53,126,.1); }
html body.teacher-reference-page .teacher-summary-card > img { flex: 0 0 64px; width: 64px; height: 64px; object-fit: contain; }
html body.teacher-reference-page .teacher-summary-card span,
html body.teacher-reference-page .teacher-summary-card small { display: block; color: var(--teacher-body); font-size: 14px; line-height: 20px; }
html body.teacher-reference-page .teacher-summary-card span { min-height: 40px; text-transform: uppercase; font-weight: 700; }
html body.teacher-reference-page .teacher-summary-card strong { display: block; margin: 2px 0; color: var(--teacher-text); font-size: 28px; font-weight: 800; line-height: 32px; }

html body.teacher-reference-page .teacher-classes-panel { min-height: 600px; }
html body.teacher-reference-page .teacher-class-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
html body.teacher-reference-page .teacher-class-card { display: block; min-height: 260px; padding: 18px 20px; border: 1px solid var(--teacher-border); border-radius: 24px; color: inherit; background: linear-gradient(180deg,#fff,#fbfdff); box-shadow: 0 8px 20px rgba(12,53,126,.08); text-decoration: none; }
html body.teacher-reference-page .teacher-class-card__header { display: grid; grid-template-columns: 68px 1fr auto; align-items: center; gap: 14px; min-height: 82px; border-bottom: 1px solid var(--teacher-border); }
html body.teacher-reference-page .teacher-school-mark {
    display: grid;
    width: 68px;
    height: 68px;
    place-items: center;
    overflow: hidden;
    object-fit: contain;
    object-position: center;
    font-size: 34px;
    line-height: 1;
}
html body.teacher-reference-page .teacher-class-card__header h3 { margin: 0; color: var(--teacher-text); font-size: 34px; font-weight: 800; }

html body.teacher-reference-page .teacher-status-badge { display: inline-flex; min-height: 42px; align-items: center; gap: 8px; padding: 0 14px; border-radius: 999px; white-space: nowrap; font-size: 14px; font-weight: 700; }
html body.teacher-reference-page .teacher-status-badge i { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; color: #fff; font-style: normal; }
html body.teacher-reference-page .teacher-status-badge--good { color: #21a451; background: #ecfff3; }
html body.teacher-reference-page .teacher-status-badge--good i { background: #27c45d; }
html body.teacher-reference-page .teacher-status-badge--info { color: #0f5bff; background: #eff6ff; }
html body.teacher-reference-page .teacher-status-badge--info i { background: #0f5bff; }
html body.teacher-reference-page .teacher-status-badge--warn { color: #ff6d2d; background: #fff1e8; }
html body.teacher-reference-page .teacher-status-badge--warn i { background: #ff5d4d; }

html body.teacher-reference-page .teacher-status-img { height: 42px; width: auto; object-fit: contain; }

html body.teacher-reference-page .teacher-class-card__stats { display: grid; grid-template-columns: repeat(3,1fr); min-height: 74px; align-items: center; border-bottom: 1px solid var(--teacher-border); }
html body.teacher-reference-page .teacher-class-card__stats > div { display: grid; grid-template-columns: auto auto; align-items: center; justify-content: center; gap: 2px 7px; border-right: 1px solid var(--teacher-border); text-align: center; }
html body.teacher-reference-page .teacher-class-card__stats > div:last-child { border-right: 0; }
html body.teacher-reference-page .teacher-class-card__stats img { grid-row: 1 / 3; width: 28px; height: 28px; object-fit: contain; }
html body.teacher-reference-page .teacher-class-card__stats strong { color: var(--teacher-text); font-size: 23px; line-height: 24px; }
html body.teacher-reference-page .teacher-class-card__stats span { color: var(--teacher-muted); font-size: 12px; }

html body.teacher-reference-page .teacher-mini-line { position: relative; height: 79px; padding-top: 26px; }
html body.teacher-reference-page .teacher-mini-line > span { position: absolute; top: 8px; left: 0; color: var(--teacher-body); font-size: 13px; font-weight: 600; }
html body.teacher-reference-page .teacher-mini-line svg { width: calc(100% - 58px); height: 58px; overflow: visible; }
html body.teacher-reference-page .teacher-mini-line path { vector-effect: non-scaling-stroke; }
html body.teacher-reference-page .teacher-mini-line circle { fill: #fff; stroke: #1d64ff; stroke-width: 3; }
html body.teacher-reference-page .teacher-mini-line b { position: absolute; right: 0; bottom: 17px; color: var(--teacher-text); font-size: 22px; }

html body.teacher-reference-page .teacher-focus-panel { min-height: 222px; }
html body.teacher-reference-page .teacher-focus-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 14px; }
html body.teacher-reference-page .teacher-focus-card { display: flex; min-height: 112px; align-items: center; gap: 10px; padding: 14px; border: 1px solid var(--teacher-border); border-radius: 20px; background: #fff; }
html body.teacher-reference-page .teacher-focus-card > img { width: 58px; height: 58px; object-fit: contain; }
html body.teacher-reference-page .teacher-focus-card strong,
html body.teacher-reference-page .teacher-focus-card b,
html body.teacher-reference-page .teacher-focus-card small { display: block; }
html body.teacher-reference-page .teacher-focus-card strong { font-size: 14px; }
html body.teacher-reference-page .teacher-focus-card b { margin: 2px 0 6px; color: var(--teacher-text); font-size: 28px; }
html body.teacher-reference-page .teacher-focus-card small { padding: 4px 8px; border-radius: 999px; color: var(--teacher-body); background: #edf5ff; font-size: 11px; text-align: center; }

html body.teacher-reference-page .teacher-dashboard-footer-grid { display: grid; grid-template-columns: 500px 1fr; gap: 24px; margin: 0; }
html body.teacher-reference-page .teacher-dashboard-footer-grid > * { margin: 0; }
html body.teacher-reference-page .teacher-quick-panel,
html body.teacher-reference-page .teacher-coach-card { min-height: 190px; }
html body.teacher-reference-page .teacher-quick-actions { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
html body.teacher-reference-page .teacher-quick-actions a { display: flex; min-height: 140px; align-items: center; justify-content: center; flex-direction: column; gap: 6px; border: 1px solid var(--teacher-border); border-radius: 18px; color: var(--teacher-text); background: #fff; font-size: 12px; font-weight: 700; text-align: center; text-decoration: none; }
html body.teacher-reference-page .teacher-quick-actions img { width: 96px; height: 96px; object-fit: contain; }

html body.teacher-reference-page .teacher-coach-card { position: relative; display: flex; align-items: center; overflow: hidden; margin: 0; padding: 24px; background: linear-gradient(135deg,#fffdf0,#eaf7ff); }
html body.teacher-reference-page .teacher-coach-card > div { position: relative; z-index: 2; width: 55%; }
html body.teacher-reference-page .teacher-coach-card h2 { margin: 0 0 12px; color: var(--teacher-text); font-size: 22px; }
html body.teacher-reference-page .teacher-coach-card h2 span { color: #ffd33d; }
html body.teacher-reference-page .teacher-coach-card p { margin: 0; color: var(--teacher-body); font-size: 14px; line-height: 1.55; }
html body.teacher-reference-page .teacher-coach-card > img { position: absolute; z-index: 1; right: -2px; bottom: -108px; width: 230px; height: auto; object-fit: contain; }

html body.teacher-reference-class .teacher-page-heading { min-height: 120px; }
html body.teacher-reference-class .teacher-page-heading h1 { font-size: 50px; }
html body.teacher-reference-class .teacher-filter { min-width: 210px; }

html body.teacher-reference-page .teacher-class-kpis { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-bottom: 24px; }
html body.teacher-reference-page .teacher-kpi-card { display: flex; min-height: 136px; align-items: center; gap: 12px; padding: 20px; }
html body.teacher-reference-page .teacher-kpi-card > img { flex: 0 0 62px; width: 62px; height: 62px; object-fit: contain; }
html body.teacher-reference-page .teacher-kpi-card span,
html body.teacher-reference-page .teacher-kpi-card small { display: block; color: var(--teacher-body); font-size: 13px; line-height: 18px; }
html body.teacher-reference-page .teacher-kpi-card span { min-height: 36px; font-weight: 700; }
html body.teacher-reference-page .teacher-kpi-card strong { display: block; margin: 3px 0; color: var(--teacher-text); font-size: 28px; line-height: 32px; }
html body.teacher-reference-page .teacher-kpi-card .teacher-positive { color: #11a844; }

html body.teacher-reference-page .teacher-analysis-grid { display: grid; grid-template-columns: 592px 432px; gap: 24px; margin: 0 0 24px; }
html body.teacher-reference-page .teacher-analysis-grid > * { margin: 0; }
html body.teacher-reference-page .teacher-progress-panel,
html body.teacher-reference-page .teacher-mastery-panel { height: 390px; }
html body.teacher-reference-page .teacher-analysis-grid--middle { grid-template-columns: 468px 556px; }
html body.teacher-reference-page .teacher-help-panel,
html body.teacher-reference-page .teacher-matrix-panel { min-height: 398px; }
html body.teacher-reference-page .teacher-analysis-grid--bottom { grid-template-columns: 620px 404px; }
html body.teacher-reference-page .teacher-assignments-panel,
html body.teacher-reference-page .teacher-quick-overview { min-height: 286px; }

html body.teacher-reference-page .teacher-chart { position: relative; height: 292px; padding: 12px 0 36px 42px; background: repeating-linear-gradient(to bottom,transparent 0 51px,#dde8fb 52px 53px); }
html body.teacher-reference-page .teacher-chart svg { width: 100%; height: 228px; overflow: visible; }
html body.teacher-reference-page .teacher-chart polyline { fill: none; stroke: #1d64ff; stroke-width: 4; vector-effect: non-scaling-stroke; }
html body.teacher-reference-page .teacher-chart circle { fill: #1d64ff; stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; }
html body.teacher-reference-page .teacher-chart__axis { position: absolute; inset: 12px auto 36px 0; display: flex; width: 36px; justify-content: space-between; flex-direction: column; color: var(--teacher-body); font-size: 12px; }
html body.teacher-reference-page .teacher-chart__labels { position: absolute; right: 0; bottom: 2px; left: 42px; display: flex; justify-content: space-between; color: var(--teacher-body); font-size: 11px; }

html body.teacher-reference-page .teacher-topic-list { display: grid; gap: 19px; padding-top: 4px; }
html body.teacher-reference-page .teacher-topic-row { display: grid; grid-template-columns: 30px 112px 1fr 42px; align-items: center; gap: 12px; padding: 0; background: transparent; }
html body.teacher-reference-page .teacher-topic-row__icon { width: 28px; height: 28px; object-fit: contain; object-position: center; }
html body.teacher-reference-page .teacher-topic-row > .teacher-math-icon { width: 30px; height: 30px; font-size: 16px; box-shadow: none; }
html body.teacher-reference-page .teacher-topic-row strong { color: var(--teacher-text); font-size: 14px; }
html body.teacher-reference-page .teacher-topic-row b { color: var(--teacher-text); font-size: 15px; text-align: right; }
html body.teacher-reference-page .teacher-topic-row__progress { height: 12px; overflow: hidden; border-radius: 999px; background: #e7eef9; }
html body.teacher-reference-page .teacher-topic-row__progress i { display: block; height: 100%; border-radius: inherit; }

html body.teacher-reference-page .teacher-topic-fill--green { background: #27c45d !important; }
html body.teacher-reference-page .teacher-topic-fill--orange { background: #ff8a00 !important; }
html body.teacher-reference-page .teacher-topic-fill--purple { background: #8f45ff !important; }
html body.teacher-reference-page .teacher-topic-fill--gold { background: #ffaf1a !important; }
html body.teacher-reference-page .teacher-topic-fill--teal { background: #18c4d6 !important; }
html body.teacher-reference-page .teacher-topic-fill--blue { background: #2d86ff !important; }

html body.teacher-reference-page .teacher-student-list { display: grid; gap: 0; }
html body.teacher-reference-page .teacher-student-row { display: grid; grid-template-columns: 40px 1fr 44px 82px; align-items: center; gap: 10px; min-height: 56px; padding: 7px 0; border-bottom: 1px solid #e6f0ff; color: inherit; text-decoration: none; }
html body.teacher-reference-page .teacher-student-row strong { color: var(--teacher-text); font-size: 15px; }
html body.teacher-reference-page .teacher-student-row b { color: #f04a3a; font-size: 17px; }
html body.teacher-reference-page .teacher-student-row > span { padding: 5px 7px; border-radius: 8px; color: #f04a3a; background: #fff0ed; font-size: 10px; text-align: center; }

html body.teacher-reference-page .teacher-matrix-scroll { overflow-x: auto; }
html body.teacher-reference-page .teacher-heatmap { width: 100%; border-collapse: separate; border-spacing: 6px; color: var(--teacher-text); font-size: 11px; text-align: center; }
html body.teacher-reference-page .teacher-heatmap th { min-width: 58px; font-weight: 700; }
html body.teacher-reference-page .teacher-heatmap thead th { height: 66px; vertical-align: top; }
html body.teacher-reference-page .teacher-heatmap thead img,
html body.teacher-reference-page .teacher-heatmap thead .teacher-math-icon { display: block; width: 34px; height: 34px; margin: 0 auto 3px; object-fit: contain; }
html body.teacher-reference-page .teacher-heatmap thead small { display: block; overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
html body.teacher-reference-page .teacher-heatmap tbody th { min-width: 85px; text-align: left; }
html body.teacher-reference-page .teacher-heatmap td { height: 44px; border-radius: 10px; font-weight: 700; }
html body.teacher-reference-page .teacher-heatmap--average { background: #e8fff0; }
html body.teacher-reference-page .teacher-heatmap--good { background: #efffea; }
html body.teacher-reference-page .teacher-heatmap--medium { background: #fff6d9; }
html body.teacher-reference-page .teacher-heatmap--bad { background: #fff0dc; }
html body.teacher-reference-page .teacher-heatmap--lowest { color: #f04a3a; background: #ffecec; }

html body.teacher-reference-page .teacher-assignment-list { display: grid; gap: 0; }
html body.teacher-reference-page .teacher-assignment-list article { display: grid; grid-template-columns: 42px 1fr 70px 18px; align-items: center; gap: 10px; min-height: 62px; border-bottom: 1px solid #e6f0ff; }
html body.teacher-reference-page .teacher-assignment-list img { width: 38px; height: 38px; object-fit: contain; object-position: center; }
html body.teacher-reference-page .teacher-assignment-list > article > .teacher-math-icon { justify-self: center; align-self: center; }
html body.teacher-reference-page .teacher-assignment-list strong { display: block; color: var(--teacher-text); font-size: 14px; }
html body.teacher-reference-page .teacher-assignment-list small { display: block; margin-top: 2px; color: var(--teacher-muted); font-size: 10px; }
html body.teacher-reference-page .teacher-assignment-list span { color: #16a84d; font-size: 11px; font-weight: 700; }
html body.teacher-reference-page .teacher-assignment-list b { color: var(--teacher-blue); font-size: 24px; }

html body.teacher-reference-page .teacher-quick-overview > div:not(.teacher-section-heading) { display: flex; min-height: 66px; align-items: center; gap: 12px; border-bottom: 1px solid #e6f0ff; }
html body.teacher-reference-page .teacher-quick-overview > div > img { width: 54px; height: 54px; object-fit: contain; object-position: center; }
html body.teacher-reference-page .teacher-quick-overview > div > .teacher-ui-icon { justify-self: center; align-self: center; }
html body.teacher-reference-page .teacher-quick-overview p { margin: 0; color: var(--teacher-body); font-size: 13px; }
html body.teacher-reference-page .teacher-quick-overview strong { display: block; color: var(--teacher-text); font-size: 25px; }
html body.teacher-reference-page .teacher-quick-overview small { display: block; color: var(--teacher-muted); font-size: 10px; }

html body.teacher-reference-student .teacher-app-header { margin-bottom: 8px; }
html body.teacher-reference-page .teacher-student-hero { display: flex; min-height: 154px; align-items: center; gap: 24px; padding: 20px 28px; }
html body.teacher-reference-page .teacher-student-hero__content { flex: 1 1 auto; }
html body.teacher-reference-page .teacher-student-hero h1 { font-size: 46px; line-height: 50px; }
html body.teacher-reference-page .teacher-student-hero p { display: flex; align-items: center; gap: 8px; }
html body.teacher-reference-page .teacher-student-hero p img { width: 25px; height: 25px; object-fit: contain; }
html body.teacher-reference-page .teacher-student-hero p i { height: 26px; margin: 0 10px; border-left: 1px solid var(--teacher-border); }

html body.teacher-reference-page .teacher-student-hero__content .teacher-class-meta-line {
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-top: 8px;
}

html body.teacher-reference-page .teacher-student-hero__content .teacher-class-meta-chip {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 4px 6px;
    border: 1px solid #d5e5ff;
    border-radius: 999px;
    color: #0b2b7d;
    background: linear-gradient(180deg, #ffffff, #f6fbff);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.15;
    box-shadow: 0 8px 18px rgba(16, 86, 210, .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-button { display: inline-flex; height: 64px; align-items: center; justify-content: center; gap: 12px; padding: 0 28px; border: 1px solid #0f5bff; border-radius: 18px; color: #fff; background: linear-gradient(180deg,#3ba7ff,#0e75ff); box-shadow: 0 8px 16px rgba(14,117,255,.24); font: inherit; font-size: 18px; font-weight: 700; text-decoration: none; }
html body.teacher-reference-page .teacher-button > img { width: 34px; height: 34px; object-fit: contain; filter: brightness(0) invert(1); }
html body.teacher-reference-page .teacher-button--compact { min-width: 152px; height: 48px; padding: 0 18px; border-radius: 13px; font-size: 16px; }

html body.teacher-reference-page .teacher-student-overview { display: grid; min-height: 154px; grid-template-columns: repeat(3,1fr); padding: 22px 24px; }
html body.teacher-reference-page .teacher-student-overview > article { min-width: 0; padding: 0 28px; border-right: 1px solid var(--teacher-border); }
html body.teacher-reference-page .teacher-student-overview > article:first-child { padding-left: 0; }
html body.teacher-reference-page .teacher-student-overview > article:last-child { padding-right: 0; border-right: 0; }
html body.teacher-reference-page .teacher-student-overview article > span { display: block; margin-bottom: 12px; color: var(--teacher-text); font-size: 17px; font-weight: 600; }
html body.teacher-reference-page .teacher-mastery-content { display: flex; align-items: center; gap: 18px; }
html body.teacher-reference-page .teacher-mastery-content > strong { color: var(--teacher-text); font-size: 52px; line-height: 52px; }
html body.teacher-reference-page .teacher-progress-ring { display: grid; width: 78px; height: 78px; flex: 0 0 78px; place-items: center; border-radius: 50%; background: conic-gradient(#27c45d calc(var(--value) * 1%),#e4ebf1 0); }
html body.teacher-reference-page .teacher-progress-ring i { width: 60px; height: 60px; border-radius: 50%; background: #fff; }
html body.teacher-reference-page .teacher-support-status { display: inline-flex; min-height: 44px; align-items: center; gap: 10px; padding: 0 15px; border: 1px solid #ffbcb3; border-radius: 13px; }
html body.teacher-reference-page .teacher-support-status i { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 50%; color: #fff; background: #ff5d4d; font-style: normal; }
html body.teacher-reference-page .teacher-support-status--warn { color: #f04a3a; background: #fff0ed; }
html body.teacher-reference-page .teacher-support-status--info { color: #0f5bff; background: #eff6ff; }
html body.teacher-reference-page .teacher-support-status--good { color: #21a451; background: #ecfff3; }
html body.teacher-reference-page .teacher-status-overview p { margin: 10px 0 0; color: var(--teacher-body); font-size: 13px; line-height: 18px; }
html body.teacher-reference-page .teacher-weekly-overview { overflow: hidden; min-width: 0; }
html body.teacher-reference-page .teacher-weekly-overview > strong { display: block; color: #10a846; font-size: 32px; }
html body.teacher-reference-page .teacher-sparkline { overflow: hidden; width: 100%; }
html body.teacher-reference-page .teacher-sparkline svg { width: 100%; height: 68px; }
html body.teacher-reference-page .teacher-sparkline polyline { fill: none; stroke: #17ad4c; stroke-width: 4; vector-effect: non-scaling-stroke; }
html body.teacher-reference-page .teacher-sparkline circle { fill: #fff; stroke: #17ad4c; stroke-width: 3; }

html body.teacher-reference-page .teacher-improvement-panel { min-height: 250px; }
html body.teacher-reference-page .teacher-topic-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
html body.teacher-reference-page .teacher-topic-card { display: grid; min-height: 186px; grid-template-columns: 72px 1fr; align-items: center; gap: 15px; padding: 20px; border: 1px solid var(--teacher-border); border-radius: 20px; background: linear-gradient(180deg,#fff,#fbfdff); }
html body.teacher-reference-page .teacher-topic-card > img { width: 68px; height: 68px; object-fit: contain; object-position: center; }
html body.teacher-reference-page .teacher-topic-card > .teacher-math-icon { justify-self: center; align-self: center; }
html body.teacher-reference-page .teacher-topic-card strong,
html body.teacher-reference-page .teacher-topic-card b { display: block; color: var(--teacher-text); }
html body.teacher-reference-page .teacher-topic-card strong { font-size: 18px; }
html body.teacher-reference-page .teacher-topic-card b { margin: 3px 0 12px; font-size: 28px; }
html body.teacher-reference-page .teacher-priority { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 12px; font-size: 13px; }
html body.teacher-reference-page .teacher-priority i { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; color: #fff; font-style: normal; }
html body.teacher-reference-page .teacher-priority--high { color: #f04a3a; }
html body.teacher-reference-page .teacher-priority--high i { background: #ff5d4d; }
html body.teacher-reference-page .teacher-priority--medium { color: #ff9800; }
html body.teacher-reference-page .teacher-priority--medium i { background: #ffaf1a; }

html body.teacher-reference-page .teacher-priority-img { display: block; width: 104px; height: auto; object-fit: contain; margin-top: 12px; }

html body.teacher-reference-page .teacher-student-progress-panel { min-height: 246px; }
html body.teacher-reference-page .teacher-chart--student { height: 180px; padding-top: 0; background-size: auto 39px; }
html body.teacher-reference-page .teacher-chart--student svg { height: 180px; }
html body.teacher-reference-page .teacher-chart--student .teacher-chart__axis { top: 0; bottom: 36px; }

html body.teacher-reference-page .teacher-errors-panel { min-height: 188px; }
html body.teacher-reference-page .teacher-mistake-table { overflow: hidden; border: 1px solid var(--teacher-border); border-radius: 14px; }
html body.teacher-reference-page .teacher-mistake-table__head,
html body.teacher-reference-page .teacher-mistake-table__row { display: grid; grid-template-columns: 1.15fr .9fr .9fr .8fr; align-items: center; gap: 10px; min-height: 44px; padding: 7px 18px; }
html body.teacher-reference-page .teacher-mistake-table__head { color: var(--teacher-body); background: #f8fbff; font-size: 13px; font-weight: 600; }
html body.teacher-reference-page .teacher-mistake-table__row { border-top: 1px solid var(--teacher-border); }
html body.teacher-reference-page .teacher-mistake-table__row strong { color: var(--teacher-text); font-size: 17px; }
html body.teacher-reference-page .teacher-answer { display: inline-flex; width: 62px; min-height: 32px; align-items: center; justify-content: center; border-radius: 8px; font-weight: 700; }
html body.teacher-reference-page .teacher-answer--bad { color: #f04a3a; background: #ffecec; }
html body.teacher-reference-page .teacher-answer--good { color: #21a451; background: #e8fff0; }

html body.teacher-reference-page .teacher-recommendations-panel { min-height: 220px; }
html body.teacher-reference-page .teacher-recommendation-list { display: grid; gap: 0; }
html body.teacher-reference-page .teacher-recommendation-row { display: grid; grid-template-columns: 48px 1fr 180px 152px; align-items: center; gap: 14px; min-height: 58px; border-bottom: 1px solid var(--teacher-border); }
html body.teacher-reference-page .teacher-recommendation-row > img { width: 42px; height: 42px; object-fit: contain; object-position: center; }
html body.teacher-reference-page .teacher-recommendation-row > .teacher-math-icon { justify-self: center; align-self: center; }
html body.teacher-reference-page .teacher-recommendation-row strong { display: block; color: var(--teacher-text); font-size: 15px; }
html body.teacher-reference-page .teacher-recommendation-row small { display: block; margin-top: 2px; color: var(--teacher-body); font-size: 12px; }
html body.teacher-reference-page .teacher-recommendation-badge { padding: 8px 14px; border: 1px solid #ffc9c2; border-radius: 999px; color: #f04a3a; background: #fff0ed; font-size: 12px; text-align: center; }

html body.teacher-reference-page .teacher-assignment-form { display: contents; }
html body.teacher-reference-page .teacher-flash { margin: 4px 0 14px; padding: 14px 18px; border-radius: 14px; font-size: 14px; line-height: 20px; }
html body.teacher-reference-page .teacher-flash--success { color: #1c7c44; background: #e7f8ee; border: 1px solid #b7e6cb; }
html body.teacher-reference-page .teacher-flash--error { color: #b42318; background: #fef0ee; border: 1px solid #f4c4be; }
html body.teacher-reference-page .teacher-button--assign { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; }
html body.teacher-reference-page .teacher-active-assignments { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--teacher-border); }
html body.teacher-reference-page .teacher-active-assignments h3 { margin: 0 0 10px; color: var(--teacher-body); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; }
html body.teacher-reference-page .teacher-active-assignments--students { display: grid; gap: 12px; }
html body.teacher-reference-page .teacher-assignment-student-group { display: grid; gap: 0; overflow: hidden; border: 1px solid var(--teacher-border); border-radius: 14px; background: #fff; }
html body.teacher-reference-page .teacher-assignment-student-group > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; background: #f7fbff; border-bottom: 1px solid var(--teacher-border); }
html body.teacher-reference-page .teacher-assignment-student-group > header strong { color: var(--teacher-text); font-size: 14px; }
html body.teacher-reference-page .teacher-assignment-student-group > header span { color: var(--teacher-body); font-size: 12px; font-weight: 800; }
html body.teacher-reference-page .teacher-active-assignment { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--teacher-border); }
html body.teacher-reference-page .teacher-assignment-student-group .teacher-active-assignment { padding: 10px 12px; }
html body.teacher-reference-page .teacher-active-assignment:last-child { border-bottom: 0; }
html body.teacher-reference-page .teacher-active-assignment > img { width: 38px; height: 38px; object-fit: contain; object-position: center; }
html body.teacher-reference-page .teacher-active-assignment > .teacher-math-icon { justify-self: center; align-self: center; }
html body.teacher-reference-page .teacher-active-assignment strong { display: block; color: var(--teacher-text); font-size: 14px; }
html body.teacher-reference-page .teacher-active-assignment small { display: block; margin-top: 2px; color: var(--teacher-body); font-size: 12px; }

html body.teacher-reference-page .teacher-profile-form {
    display: grid;
    gap: 18px;
}

html body.teacher-reference-page .teacher-profile-form__grid,
html body.teacher-reference-page .teacher-profile-password > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

html body.teacher-reference-page .teacher-profile-form label,
html body.teacher-reference-page .teacher-profile-grades legend,
html body.teacher-reference-page .teacher-profile-password strong {
    color: var(--teacher-text);
    font-size: 13px;
    font-weight: 900;
}

html body.teacher-reference-page .teacher-profile-form input {
    width: 100%;
    min-height: 48px;
    margin-top: 7px;
    padding: 0 14px;
    border: 1px solid #bed5fa;
    border-radius: 14px;
    color: var(--teacher-text);
    background: #fff;
    font: inherit;
    font-weight: 800;
}

html body.teacher-reference-page .teacher-profile-grades {
    margin: 0;
    padding: 14px;
    border: 1px solid #c5dafb;
    border-radius: 18px;
    background: #fff;
}

html body.teacher-reference-page .teacher-profile-grades > div {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
    margin-top: 10px;
}

html body.teacher-reference-page .teacher-profile-grades input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

html body.teacher-reference-page .teacher-profile-grades span {
    display: grid;
    min-height: 42px;
    place-items: center;
    border: 2px solid #d6e4fb;
    border-radius: 12px;
    color: #17449b;
    background: #f8fbff;
    font-weight: 900;
}

html body.teacher-reference-page .teacher-profile-grades input:checked + span {
    border-color: #1768ff;
    color: #fff;
    background: #1768ff;
}

html body.teacher-reference-page .teacher-profile-password {
    display: grid;
    gap: 8px;
    padding: 14px;
    border-radius: 18px;
    background: #f7fbff;
}

html body.teacher-reference-page .teacher-profile-password small {
    color: var(--teacher-body);
    font-size: 12px;
}

html body.teacher-reference-page .teacher-profile-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

html body.teacher-reference-page .teacher-profile-actions .teacher-button {
    min-width: 190px;
}
html body.teacher-reference-page .teacher-assignment-status { padding: 6px 12px; border-radius: 999px; color: #1c7c44; background: #e7f8ee; font-size: 12px; font-weight: 700; white-space: nowrap; }

html body.teacher-reference-page .teacher-notes-panel { min-height: 128px; }
html body.teacher-reference-page .teacher-note { margin: 0; padding: 14px 18px; border-radius: 14px; color: var(--teacher-text); background: #eef7ff; font-size: 14px; line-height: 21px; }

html body.teacher-reference-page .teacher-coach-card--student { min-height: 148px; margin-bottom: 0; justify-content: center; }
html body.teacher-reference-page .teacher-coach-card--student > img { right: auto; bottom: -110px; left: 45px; width: 210px; height: 300px; }
html body.teacher-reference-page .teacher-coach-card--student > div { width: 62%; margin-left: 190px; }
html body.teacher-reference-page .teacher-coach-card--student h2 { font-size: 28px; }
html body.teacher-reference-page .teacher-coach-card--student p { font-size: 16px; }

html body.teacher-reference-page a:focus-visible,
html body.teacher-reference-page button:focus-visible { outline: 4px solid #ffd95a; outline-offset: 3px; }

@media (min-width: 1121px) {
    html body.teacher-reference-page .teacher-shell { margin-top: 0; }
}

@media (max-width: 900px) {
    html body.teacher-reference-page .teacher-shell { border-radius: 0; }
    html body.teacher-reference-page .teacher-content { padding: 0 24px 24px; }
    html body.teacher-reference-page .teacher-app-header__profile { right: 96px; }
    html body.teacher-reference-page .teacher-header-robot { left: 92px; }
    html body.teacher-reference-page .teacher-page-heading h1 { font-size: 42px; line-height: 46px; }
    html body.teacher-reference-page .teacher-summary-strip,
    html body.teacher-reference-page .teacher-class-kpis { grid-template-columns: repeat(2,1fr); }
    html body.teacher-reference-page .teacher-class-grid { grid-template-columns: 1fr; }
    html body.teacher-reference-page .teacher-classes-panel { min-height: auto; }
    html body.teacher-reference-page .teacher-focus-grid { grid-template-columns: repeat(3,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-dashboard-footer-grid > *,
    html body.teacher-reference-page .teacher-analysis-grid > * { width: 100%; height: auto; min-height: 0; }
    html body.teacher-reference-page .teacher-student-overview { grid-template-columns: 1fr 1fr; }
    html body.teacher-reference-page .teacher-student-overview > article:nth-child(2) { border-right: 0; }
    html body.teacher-reference-page .teacher-student-overview > article:last-child { grid-column: 1 / -1; margin-top: 18px; padding: 18px 0 0; border-top: 1px solid var(--teacher-border); }
}

@media (max-width: 640px) {
    html body.teacher-reference-page .teacher-hub { padding-bottom: 0; }
    html body.teacher-reference-page .teacher-content { padding: 0 16px 18px; }
    html body.teacher-reference-page .teacher-app-header { height: 132px; margin-bottom: 20px; border-radius: 0 0 50% 50% / 0 0 15% 15%; }
    html body.teacher-reference-page .teacher-app-header__logo { top: 7px; width: 150px; height: 112px; }
    html body.teacher-reference-page .teacher-app-header__profile { display: none !important; visibility: hidden; pointer-events: none; }
    html body.teacher-reference-page .teacher-avatar--teacher { width: 42px; height: 42px; border-width: 2px; }
    html body.teacher-reference-page .teacher-header-robot { right: 10px; bottom: 3px; left: auto; display: block; width: 50px; height: 72px; object-fit: contain; object-position: center bottom; }
    html body.teacher-reference-page .teacher-header-decoration--one { top: 40px; left: 70px; width: 28px; height: 28px; }
    html body.teacher-reference-page .teacher-header-decoration--two { top: 88px; left: 100px; width: 24px; height: 18px; }
    html body.teacher-reference-page .teacher-header-decoration--three { right: 55px; bottom: 18px; width: 28px; height: 28px; }
    html body.teacher-reference-page .teacher-app-header::before,
    html body.teacher-reference-page .teacher-app-header::after { display: none; }
    html body.teacher-reference-page .arena-back-button { top: 24px !important; left: 12px !important; width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; border-width: 2px !important; }
    html body.teacher-reference-page .teacher-page-heading { min-height: 0; align-items: flex-start; flex-direction: column; gap: 12px; margin-bottom: 16px; }
    html body.teacher-reference-page .teacher-page-heading h1 { font-size: 30px; line-height: 34px; }
    html body.teacher-reference-page .teacher-page-heading p { margin-top: 3px; font-size: 13px; line-height: 18px; }
    html body.teacher-reference-page .teacher-filter-group { width: 100%; gap: 8px; }
    html body.teacher-reference-page .teacher-filter { min-width: 0; width: auto; height: 46px; padding: 0 14px; gap: 8px; font-size: 13px; }
    html body.teacher-reference-page .teacher-filter-group .teacher-filter { flex: 1 1 0; }
    html body.teacher-reference-page .teacher-filter img { width: 22px; height: 22px; }
    html body.teacher-reference-page .teacher-panel { margin-bottom: 16px; padding: 14px; border-radius: 18px; }
    html body.teacher-reference-page .teacher-section-heading { margin-bottom: 12px; }
    html body.teacher-reference-page .teacher-section-heading h2 { gap: 6px; font-size: 17px; line-height: 22px; }
    html body.teacher-reference-page .teacher-section-heading h2 > img { width: 22px; height: 22px; }
    html body.teacher-reference-page .teacher-section-heading p { margin-left: 28px; font-size: 10px; line-height: 14px; }
    html body.teacher-reference-page .teacher-text-action { font-size: 11px; }
    html body.teacher-reference-page .teacher-summary-strip { min-height: 0; margin-bottom: 16px; gap: 10px; }
    html body.teacher-reference-page .teacher-summary-card { gap: 7px; min-height: 86px; padding: 10px; }
    html body.teacher-reference-page .teacher-summary-card > img { flex-basis: 40px; width: 40px; height: 40px; }
    html body.teacher-reference-page .teacher-summary-card span { min-height: 22px; font-size: 8px; line-height: 11px; }
    html body.teacher-reference-page .teacher-summary-card strong { margin: 0; font-size: 22px; line-height: 24px; }
    html body.teacher-reference-page .teacher-summary-card small { font-size: 9px; line-height: 12px; }
    html body.teacher-reference-dashboard .teacher-class-grid { grid-template-columns: repeat(2,1fr); gap: 8px; }
    html body.teacher-reference-dashboard .teacher-class-card { min-height: 176px; padding: 8px; border-radius: 14px; }
    html body.teacher-reference-dashboard .teacher-class-card__header { grid-template-columns: 38px 1fr; gap: 5px; min-height: 52px; }
    html body.teacher-reference-dashboard .teacher-school-mark { width: 38px; height: 38px; font-size: 22px; }
    html body.teacher-reference-dashboard .teacher-class-card__header h3 { font-size: 19px; }
    html body.teacher-reference-dashboard .teacher-status-badge { grid-column: 1 / -1; justify-self: end; min-height: 22px; margin-top: -22px; padding: 0 6px; gap: 3px; font-size: 7px; }
    html body.teacher-reference-dashboard .teacher-status-badge i { width: 14px; height: 14px; }
    html body.teacher-reference-dashboard .teacher-status-img { grid-column: 1 / -1; justify-self: end; height: 20px; width: auto; margin-top: -18px; }
    html body.teacher-reference-dashboard .teacher-class-card__stats { min-height: 54px; }
    html body.teacher-reference-dashboard .teacher-class-card__stats > div { display: flex; flex-wrap: wrap; gap: 1px 3px; }
    html body.teacher-reference-dashboard .teacher-class-card__stats img { width: 16px; height: 16px; }
    html body.teacher-reference-dashboard .teacher-class-card__stats strong { font-size: 12px; line-height: 14px; }
    html body.teacher-reference-dashboard .teacher-class-card__stats span { flex-basis: 100%; font-size: 7px; }
html body.teacher-reference-dashboard .teacher-mini-line { height: 56px; padding-top: 18px; }
html body.teacher-reference-dashboard .teacher-mini-line > span { top: 4px; font-size: 7px; }
html body.teacher-reference-dashboard .teacher-mini-line svg { width: calc(100% - 30px); height: 38px; }
html body.teacher-reference-dashboard .teacher-mini-line b { bottom: 10px; font-size: 11px; }
    html body.teacher-reference-dashboard .teacher-focus-grid { grid-template-columns: repeat(5,1fr); gap: 4px; }
    html body.teacher-reference-dashboard .teacher-focus-card { min-width: 0; min-height: 84px; flex-direction: column; gap: 1px; padding: 6px 2px; text-align: center; }
    html body.teacher-reference-dashboard .teacher-focus-card > img { width: 30px; height: 30px; }
    html body.teacher-reference-dashboard .teacher-focus-card strong { overflow: hidden; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
    html body.teacher-reference-dashboard .teacher-focus-card b { margin: 0; font-size: 13px; }
    html body.teacher-reference-dashboard .teacher-focus-card small { padding: 2px 3px; font-size: 6px; }
    html body.teacher-reference-page .teacher-dashboard-footer-grid { grid-template-columns: 1.1fr 1fr; gap: 8px; }
    html body.teacher-reference-page .teacher-quick-panel,
    html body.teacher-reference-page .teacher-coach-card { min-height: 132px; }
    html body.teacher-reference-page .teacher-quick-actions { gap: 3px; }
    html body.teacher-reference-page .teacher-quick-actions a { min-height: 82px; gap: 2px; border-radius: 10px; font-size: 7px; }
    html body.teacher-reference-page .teacher-quick-actions img { width: 31px; height: 31px; }
    html body.teacher-reference-page .teacher-coach-card { padding: 12px; }
    html body.teacher-reference-page .teacher-coach-card > div { width: 60%; }
    html body.teacher-reference-page .teacher-coach-card h2 { margin-bottom: 5px; font-size: 12px; }
    html body.teacher-reference-page .teacher-coach-card p { font-size: 7px; line-height: 1.45; }
    html body.teacher-reference-page .teacher-coach-card > img { right: -15px; bottom: -68px; width: 125px; height: auto; }
    html body.teacher-reference-page .teacher-class-kpis { grid-template-columns: repeat(2,1fr); gap: 10px; margin-bottom: 16px; }
    html body.teacher-reference-page .teacher-kpi-card { min-height: 108px; gap: 8px; padding: 12px; border-radius: 16px; align-items: flex-start; }
    html body.teacher-reference-page .teacher-kpi-card > img { flex-basis: 45px; width: 45px; height: 45px; }
    html body.teacher-reference-page .teacher-kpi-card span { min-height: 28px; font-size: 9px; line-height: 13px; }
    html body.teacher-reference-page .teacher-kpi-card strong { font-size: 23px; line-height: 25px; }
    html body.teacher-reference-page .teacher-kpi-card small { font-size: 8px; line-height: 11px; }
    html body.teacher-reference-page .teacher-analysis-grid { gap: 16px; margin-bottom: 16px; }
    html body.teacher-reference-page .teacher-progress-panel,
    html body.teacher-reference-page .teacher-mastery-panel,
    html body.teacher-reference-page .teacher-help-panel,
    html body.teacher-reference-page .teacher-matrix-panel,
    html body.teacher-reference-page .teacher-assignments-panel,
    html body.teacher-reference-page .teacher-quick-overview { height: auto; min-height: 0; }
    html body.teacher-reference-page .teacher-chart { height: 240px; padding-left: 34px; overflow: hidden; }
    html body.teacher-reference-page .teacher-chart svg { height: 190px; }
    html body.teacher-reference-page .teacher-chart__axis { width: 28px; font-size: 9px; }
    html body.teacher-reference-page .teacher-chart__labels { left: 34px; font-size: 8px; }
    html body.teacher-reference-page .teacher-topic-row { grid-template-columns: 32px minmax(88px,110px) minmax(0,1fr) 40px; gap: 10px; }
    html body.teacher-reference-page .teacher-topic-row__icon { width: 22px; height: 22px; }
    html body.teacher-reference-page .teacher-topic-row > .teacher-math-icon { width: 32px; height: 32px; font-size: 16px; font-weight: 800; }
    html body.teacher-reference-page .teacher-topic-list { gap: 14px; }
    html body.teacher-reference-page .teacher-topic-row strong { min-width: 0; font-size: 12px; line-height: 15px; }
    html body.teacher-reference-page .teacher-topic-row b { font-size: 13px; }
    html body.teacher-reference-page .teacher-student-row { grid-template-columns: 42px minmax(0,1fr) 42px 78px; gap: 8px; }
    html body.teacher-reference-page .teacher-avatar--small { width: 42px; height: 42px; padding: 2px; }
    html body.teacher-reference-page .teacher-student-row strong { min-width: 0; font-size: 12px; }
    html body.teacher-reference-page .teacher-student-row b { font-size: 13px; }
    html body.teacher-reference-page .teacher-student-row > span { font-size: 8px; }
    html body.teacher-reference-page .teacher-student-hero { display: grid; grid-template-columns: 74px 1fr; min-height: 0; gap: 12px; padding: 14px; }
    html body.teacher-reference-page .teacher-avatar--large {
        width: 72px;
        height: 72px;
        padding: 4px;
        object-fit: contain;
        object-position: center;
    }
    html body.teacher-reference-page .teacher-student-hero h1 { font-size: 23px; line-height: 27px; }
    html body.teacher-reference-page .teacher-student-hero p { gap: 4px; font-size: 10px; }
    html body.teacher-reference-page .teacher-student-hero p img { width: 16px; height: 16px; }
    html body.teacher-reference-page .teacher-student-hero p i { height: 16px; margin: 0 4px; }
    html body.teacher-reference-page .teacher-student-hero .teacher-button { grid-column: 1 / -1; width: 100%; height: 48px; font-size: 14px; }
    html body.teacher-reference-page .teacher-student-overview { grid-template-columns: 1fr; padding: 12px 16px; }
    html body.teacher-reference-page .teacher-student-overview > article { padding: 14px 0; border-right: 0; border-bottom: 1px solid var(--teacher-border); }
    html body.teacher-reference-page .teacher-student-overview > article:last-child { grid-column: auto; margin: 0; border-top: 0; border-bottom: 0; }
    html body.teacher-reference-page .teacher-topic-cards { grid-template-columns: 1fr; gap: 10px; }
    html body.teacher-reference-page .teacher-topic-card { min-height: 118px; grid-template-columns: 58px 1fr; padding: 13px; }
    html body.teacher-reference-page .teacher-topic-card > img { width: 54px; height: 54px; }
    html body.teacher-reference-page .teacher-topic-card strong { font-size: 15px; }
    html body.teacher-reference-page .teacher-topic-card b { font-size: 23px; }
    html body.teacher-reference-page .teacher-priority-img { width: 80px; margin-top: 8px; }
    html body.teacher-reference-page .teacher-chart--student { height: 210px; }
    html body.teacher-reference-page .teacher-chart--student svg { height: 170px; }
    html body.teacher-reference-page .teacher-mistake-table { overflow-x: auto; }
    html body.teacher-reference-page .teacher-mistake-table__head,
    html body.teacher-reference-page .teacher-mistake-table__row { min-width: 540px; }
    html body.teacher-reference-page .teacher-recommendation-row { grid-template-columns: 42px 1fr auto; gap: 8px; padding: 9px 0; }
    html body.teacher-reference-page .teacher-recommendation-row > img { width: 38px; height: 38px; }
    html body.teacher-reference-page .teacher-recommendation-badge { grid-column: 2; justify-self: start; padding: 5px 8px; font-size: 9px; }
    html body.teacher-reference-page .teacher-recommendation-row .teacher-button { grid-column: 3; grid-row: 1 / 3; min-width: 84px; height: 42px; padding: 0 10px; font-size: 12px; }
    html body.teacher-reference-page .teacher-quick-overview > div:not(.teacher-section-heading) { min-height: 58px; gap: 10px; }
    html body.teacher-reference-page .teacher-quick-overview > div > .teacher-ui-icon { flex: 0 0 38px; width: 38px; height: 38px; font-size: 14px; box-shadow: none; }
    html body.teacher-reference-page .teacher-quick-overview p { font-size: 11px; line-height: 14px; }
    html body.teacher-reference-page .teacher-quick-overview strong { font-size: 18px; line-height: 20px; }
    html body.teacher-reference-page .teacher-quick-overview small { font-size: 9px; line-height: 12px; }
    html body.teacher-reference-page .teacher-coach-card--student { display: flex; min-height: 130px; padding-left: 120px; }
    html body.teacher-reference-page .teacher-coach-card--student > img { right: auto; bottom: -62px; left: -4px; width: 130px; height: 195px; }
    html body.teacher-reference-page .teacher-coach-card--student > div { width: 100%; margin-left: 0; }
    html body.teacher-reference-page .teacher-coach-card--student h2 { font-size: 16px; }
    html body.teacher-reference-page .teacher-coach-card--student p { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    html body.teacher-reference-page * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}
/* END TEACHER-PIXEL-PERFECT-003 */

/* GLOBAL-VISUAL-AUDIT-006 */
body.parent-premium-page .parent-premium > .parent-bottom-nav {
    position: fixed;
    z-index: 70;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
}

@media (min-width: 901px) {
    body.parent-premium-page .parent-premium > .parent-bottom-nav {
        display: none;
    }
}

@media (max-width: 900px) {
    html body.teacher-reference-page .teacher-analysis-grid > * {
        min-width: 0;
    }
}

@media (max-width: 620px) {
    body.foundation-classroom-body .foundation-header .foundation-back.arena-back-button {
        position: static !important;
        inset: auto !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        margin: 0 !important;
    }

    body.foundation-classroom-body .foundation-header .foundation-back.arena-back-button > img {
        width: 28px !important;
        height: 28px !important;
    }
}

/* Clean CSS icon replacements for damaged raster exports in the supplied package. */
html body.teacher-reference-page .teacher-ui-icon {
    display: grid;
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    place-items: center;
    border: 1px solid rgba(15,91,255,.08);
    border-radius: 50%;
    font-style: normal;
    font-size: 23px;
    font-weight: 800;
    letter-spacing: 0;
    box-shadow: 0 6px 14px rgba(12,53,126,.09);
    overflow: visible;
}

html body.teacher-reference-page .teacher-ui-icon--class { color: #0f5bff; background: #eaf7ff; }
html body.teacher-reference-page .teacher-ui-icon--students { color: #16b653; background: #e9fff1; }
html body.teacher-reference-page .teacher-ui-icon--accuracy { color: #8f45ff; background: #f3e8ff; }
html body.teacher-reference-page .teacher-ui-icon--help { color: #ff5d4d; background: #fff1e8; }
html body.teacher-reference-page .teacher-ui-icon--assignment { color: #0f75ef; background: #eaf7ff; }

html body.teacher-reference-page .teacher-section-icon,
html body.teacher-reference-page .teacher-calendar-icon,
html body.teacher-reference-page .teacher-meta-icon,
html body.teacher-reference-page .teacher-target-icon {
    color: #0f5bff;
    font-style: normal;
    font-weight: 800;
}

/* PARENT-AUDIT-243: production parent flow polish and mobile-safe tables. */
body.parent-profile-reference-page .parent-premium:not(.parent-onboarding) > .parent-dashboard-intro { order: 1 !important; }
body.parent-profile-reference-page .parent-premium:not(.parent-onboarding) > .parent-children-heading { order: 2 !important; }
body.parent-profile-reference-page .parent-premium:not(.parent-onboarding) > .parent-children-primary { order: 3 !important; }
body.parent-profile-reference-page .parent-premium:not(.parent-onboarding) > .parent-action-grid { order: 4 !important; }
body.parent-profile-reference-page .parent-premium:not(.parent-onboarding) > .parent-claims-preview { order: 5 !important; }
body.parent-profile-reference-page .parent-premium:not(.parent-onboarding) > .parent-dashboard-coach { order: 6 !important; }
body.parent-profile-reference-page .parent-premium:not(.parent-onboarding) > .parent-dashboard-profile-settings { order: 7 !important; }

body.parent-profile-reference-page .parent-notifications-page {
    width: min(1200px, calc(100% - 28px));
    gap: 18px;
}

body.parent-profile-reference-page .parent-notifications-page > * { order: 10; }
body.parent-profile-reference-page .parent-notifications-page > .profile-hero { order: 1; }
body.parent-profile-reference-page .parent-notifications-page > .form-message { order: 2; }
body.parent-profile-reference-page .parent-notifications-page > .panel { order: 3; }

body.parent-profile-reference-page .parent-notifications-page .profile-hero.compact {
    position: relative;
    display: grid;
    min-height: 190px;
    grid-template-columns: minmax(0, 1fr) minmax(112px, 168px);
    align-items: center;
    gap: 18px;
    padding: clamp(18px, 3vw, 28px);
    overflow: hidden;
    border: 1px solid rgba(104, 176, 244, .35);
    border-radius: 24px;
    background:
        radial-gradient(circle at 86% 25%, rgba(35, 205, 238, .2), transparent 12rem),
        linear-gradient(135deg, #ffffff 0%, #eef9ff 70%, #f3efff 100%);
    box-shadow: 0 16px 36px rgba(5, 57, 153, .12);
}

body.parent-profile-reference-page .parent-notifications-page .profile-hero.compact > div:first-child {
    display: grid !important;
    min-width: 0;
    gap: 8px;
}

body.parent-profile-reference-page .parent-notifications-page .profile-hero.compact h1 {
    margin: 0;
    color: #08285f;
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1.05;
}

body.parent-profile-reference-page .parent-notifications-page .profile-hero.compact p {
    max-width: 620px;
    margin: 0;
    color: #456386;
}

body.parent-profile-reference-page .parent-notifications-page .profile-hero.compact .btn {
    width: fit-content;
    margin-top: 8px;
}

body.parent-profile-reference-page .parent-notifications-page .stat-orbit {
    display: grid;
    width: min(36vw, 144px);
    min-width: 108px;
    aspect-ratio: 1;
    place-items: center;
    align-content: center;
    justify-self: end;
    border: 1px dashed rgba(13, 134, 224, .25);
    border-radius: 50%;
    color: #08285f;
    background: rgba(255, 255, 255, .78);
    box-shadow: inset 0 0 0 8px rgba(234, 248, 255, .9), 0 14px 30px rgba(5, 57, 153, .08);
}

body.parent-profile-reference-page .parent-notifications-page .stat-orbit span {
    display: block;
    font-size: clamp(2rem, 6vw, 3rem);
    font-weight: 900;
    line-height: 1;
}

body.parent-profile-reference-page .parent-notifications-page .stat-orbit small {
    color: #62748d;
    font-weight: 900;
}

body.parent-profile-reference-page .parent-notifications-page .notification-list {
    display: grid;
    gap: 12px;
}

body.parent-profile-reference-page .parent-notifications-page .notification-card {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    padding: 16px;
    border: 1px solid rgba(104, 176, 244, .25);
    border-radius: 18px;
    background: linear-gradient(145deg, #fff, #f5fbff);
}

body.parent-profile-reference-page .parent-notifications-page .notification-card.unread {
    border-color: rgba(8, 120, 238, .45);
    box-shadow: 0 10px 24px rgba(8, 120, 238, .1);
}

body.parent-profile-reference-page .parent-notifications-page .notification-card h3,
body.parent-profile-reference-page .parent-notifications-page .notification-card p {
    overflow-wrap: anywhere;
}

@media (max-width: 720px) {
    body.parent-profile-reference-page .parent-notifications-page {
        width: min(100% - 14px, 620px);
        gap: 12px;
    }

    body.parent-profile-reference-page .parent-notifications-page .profile-hero.compact {
        grid-template-columns: 1fr auto;
        min-height: 0;
        padding: 18px 14px;
        border-radius: 20px;
    }

    body.parent-profile-reference-page .parent-notifications-page .profile-hero.compact > div:first-child,
    body.parent-profile-reference-page .parent-notifications-page .profile-hero.compact > a {
        display: grid !important;
    }

    body.parent-profile-reference-page .parent-notifications-page .profile-hero.compact .btn {
        width: 100%;
        min-width: 0;
        white-space: normal;
    }

    body.parent-profile-reference-page .parent-notifications-page .stat-orbit {
        width: 96px;
        min-width: 96px;
    }

    body.parent-profile-reference-page .parent-notifications-page .notification-card {
        grid-template-columns: 1fr;
        padding: 14px;
    }
}

@media (max-width: 520px) {
    body.parent-profile-reference-page .parent-reference-errors .parent-reference-table-scroll {
        max-width: 100%;
        overflow: visible;
        border: 0;
        border-radius: 0;
    }

    body.parent-profile-reference-page .parent-reference-errors table,
    body.parent-profile-reference-page .parent-reference-errors thead,
    body.parent-profile-reference-page .parent-reference-errors tbody,
    body.parent-profile-reference-page .parent-reference-errors tr,
    body.parent-profile-reference-page .parent-reference-errors td {
        display: block;
        width: 100%;
        min-width: 0 !important;
    }

    body.parent-profile-reference-page .parent-reference-errors thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    body.parent-profile-reference-page .parent-reference-errors tbody {
        display: grid;
        gap: 10px;
    }

    body.parent-profile-reference-page .parent-reference-errors tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding: 12px;
        border: 1px solid rgba(104, 176, 244, .24);
        border-radius: 16px;
        background: #fff;
    }

    body.parent-profile-reference-page .parent-reference-errors td {
        display: flex;
        min-height: 34px;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 0;
        border: 0;
        color: #08285f;
        white-space: normal;
    }

    body.parent-profile-reference-page .parent-reference-errors td:first-child {
        grid-column: 1 / -1;
        padding-bottom: 6px;
        border-bottom: 1px solid rgba(104, 176, 244, .18);
    }

    body.parent-profile-reference-page .parent-reference-errors td::before {
        color: #60728f;
        font-size: 11px;
        font-weight: 900;
        text-transform: uppercase;
    }

    body.parent-profile-reference-page .parent-reference-errors td:nth-child(1)::before { content: "Primjer"; }
    body.parent-profile-reference-page .parent-reference-errors td:nth-child(2)::before { content: "Odgovor"; }
    body.parent-profile-reference-page .parent-reference-errors td:nth-child(3)::before { content: "Točno"; }
    body.parent-profile-reference-page .parent-reference-errors td:nth-child(4)::before { content: "Učestalost"; }
}
html body.teacher-reference-page .teacher-section-icon { font-size: 28px; }
html body.teacher-reference-page .teacher-section-icon--red { color: #ff5d4d; }
html body.teacher-reference-page .teacher-calendar-icon { font-size: 24px; }

/* Nova ikona za "Aktivnost učenika" - SVG slika */
html body .teacher-calendar-icon-img,
.teacher-calendar-icon-img {
    display: inline-block;
    vertical-align: middle;
    width: 56px !important;
    height: 56px !important;
    margin-right: 8px;
    flex-shrink: 0;
}

html body.teacher-reference-page .teacher-meta-icon { font-size: 20px; }
html body.teacher-reference-page .teacher-target-icon { color: #fff; font-size: 28px; }
html body.teacher-reference-page .teacher-target-icon--image {
    display: inline-grid;
    place-items: center;
    flex: 0 0 clamp(48px, 6vw, 66px);
    width: clamp(48px, 6vw, 66px);
    height: clamp(48px, 6vw, 66px);
    font-size: 0;
    line-height: 0;
}
html body.teacher-reference-page .teacher-target-icon--image > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

html body.teacher-reference-page .teacher-school-mark {
    display: grid;
    width: 68px;
    height: 68px;
    place-items: center;
    border-radius: 18px;
    color: #0f5bff;
    background: #eaf7ff;
}

html body.teacher-reference-page .teacher-stat-dot {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    grid-row: 1 / 3;
    font-style: normal;
    font-size: 20px;
    font-weight: 900;
}
html body.teacher-reference-page .teacher-stat-dot--green { color: #27c45d; }
html body.teacher-reference-page .teacher-stat-dot--purple { color: #8f45ff; }
html body.teacher-reference-page .teacher-stat-dot--red { color: #ff5d4d; }

html body.teacher-reference-page .teacher-math-icon {
    display: inline-grid;
    flex: 0 0 auto;
    width: 58px;
    height: 58px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    font-style: normal;
    font-size: 28px;
    font-weight: 900;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    overflow: visible;
    box-shadow: 0 7px 14px rgba(12,53,126,.16);
}
html body.teacher-reference-page .teacher-math-icon--green { background: linear-gradient(180deg,#42dc7f,#14ad51); }
html body.teacher-reference-page .teacher-math-icon--orange { background: linear-gradient(180deg,#ffad42,#ff7100); }
html body.teacher-reference-page .teacher-math-icon--purple { background: linear-gradient(180deg,#b35cff,#7126d8); }
html body.teacher-reference-page .teacher-math-icon--gold { background: linear-gradient(180deg,#ffd54f,#f0a000); }
html body.teacher-reference-page .teacher-math-icon--teal { background: linear-gradient(180deg,#39d7d5,#0ba9b4); }
html body.teacher-reference-page .teacher-math-icon--blue { background: linear-gradient(180deg,#45b8ff,#0f5bff); }

html body.teacher-reference-page .teacher-quick-icon {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    font-style: normal;
    font-size: 30px;
    font-weight: 900;
    overflow: visible;
}
html body.teacher-reference-page .teacher-quick-icon--blue { color: #0f5bff; }
html body.teacher-reference-page .teacher-quick-icon--green { color: #27c45d; }
html body.teacher-reference-page .teacher-quick-icon--purple { color: #8f45ff; }
html body.teacher-reference-page .teacher-quick-icon--orange { color: #ff7b21; }

html body.teacher-reference-page .teacher-ui-icon,
html body.teacher-reference-page .teacher-school-mark,
html body.teacher-reference-page .teacher-stat-dot,
html body.teacher-reference-page .teacher-math-icon,
html body.teacher-reference-page .teacher-quick-icon {
    overflow: hidden;
    border: 0;
    background: transparent;
    box-shadow: none;
}

html body.teacher-reference-page .teacher-ui-icon > img,
html body.teacher-reference-page .teacher-school-mark > img,
html body.teacher-reference-page .teacher-stat-dot > img,
html body.teacher-reference-page .teacher-math-icon > img,
html body.teacher-reference-page .teacher-quick-icon > img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    border-radius: inherit;
}

html body.teacher-reference-page .teacher-quick-icon { border-radius: 8px; }
html body.teacher-reference-page .teacher-stat-dot { border-radius: 50%; }

html body.teacher-reference-page .teacher-kpi-card > .teacher-ui-icon { flex-basis: 62px; width: 62px; height: 62px; }
html body.teacher-reference-page .teacher-heatmap thead .teacher-math-icon { width: 34px; height: 34px; margin: 0 auto 3px; font-size: 16px; box-shadow: none; }
html body.teacher-reference-page .teacher-assignment-list > article > .teacher-math-icon,
html body.teacher-reference-page .teacher-recommendation-row > .teacher-math-icon { width: 42px; height: 42px; font-size: 21px; box-shadow: none; }
html body.teacher-reference-page .teacher-quick-overview > div > .teacher-ui-icon { flex: 0 0 54px; width: 54px; height: 54px; font-size: 20px; }
html body.teacher-reference-page .teacher-topic-card > .teacher-math-icon {
    width: 56px;
    height: 56px;
    font-size: 24px;
    box-shadow: none;
}

html body.teacher-reference-page .teacher-priority-badge {
    display: inline-flex;
    width: auto;
    min-height: 24px;
    align-items: center;
    justify-content: center;
    margin-top: 8px;
    padding: 4px 9px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}
html body.teacher-reference-page .teacher-priority-badge--high { color: #f04438; background: #fff1f0; }
html body.teacher-reference-page .teacher-priority-badge--medium { color: #e69600; background: #fff8df; }

@media (max-width: 640px) {
    html body.teacher-reference-page .teacher-ui-icon { flex-basis: 40px; width: 40px; height: 40px; font-size: 14px; }
    html body.teacher-reference-page .teacher-school-mark { width: 38px; height: 38px; border-radius: 10px; }
    html body.teacher-reference-page .teacher-stat-dot { width: 18px; height: 18px; font-size: 13px; }
    html body.teacher-reference-page .teacher-focus-card > .teacher-math-icon { width: 30px; height: 30px; font-size: 16px; box-shadow: none; }
    html body.teacher-reference-page .teacher-quick-icon { width: 31px; height: 31px; font-size: 20px; }
    html body.teacher-reference-page .teacher-kpi-card > .teacher-ui-icon { flex-basis: 34px; width: 34px; height: 34px; font-size: 12px; box-shadow: none; }
    html body.teacher-reference-page .teacher-quick-overview > div > .teacher-ui-icon { flex: 0 0 38px; width: 38px; height: 38px; font-size: 14px; box-shadow: none; }
    html body.teacher-reference-page .teacher-topic-card > .teacher-math-icon {
        width: 44px;
        height: 44px;
        font-size: 19px;
    }
    html body.teacher-reference-page .teacher-priority-badge { min-height: 22px; padding: 4px 8px; font-size: 9px; }
    html body.teacher-reference-page .teacher-recommendation-row > .teacher-math-icon { width: 38px; height: 38px; font-size: 18px; }

    html body.teacher-reference-page .teacher-summary-card > .teacher-ui-icon,
    html body.teacher-reference-page .teacher-kpi-card > .teacher-ui-icon {
        align-self: center;
        justify-self: center;
        margin: 0;
    }

    html body.teacher-reference-page .teacher-topic-row > .teacher-math-icon,
    html body.teacher-reference-page .teacher-topic-card > .teacher-math-icon,
    html body.teacher-reference-page .teacher-recommendation-row > .teacher-math-icon,
    html body.teacher-reference-page .teacher-assignment-list > article > .teacher-math-icon {
        align-self: center;
        justify-self: center;
        margin: 0;
    }
}

/* START TEACHER-CLASS-SWITCHER-005 */
html body.teacher-reference-page .teacher-class-context {
    display: grid;
    grid-template-columns: minmax(280px, .9fr) minmax(420px, 1.1fr);
    align-items: center;
    gap: 22px;
    margin: 0 0 24px;
    padding: 18px 22px;
    border: 1px solid #c6daff;
    border-radius: 20px;
    background: linear-gradient(180deg, #ffffff, #f7fbff);
    box-shadow: 0 10px 26px rgba(12, 53, 126, .1);
}

html body.teacher-reference-page .teacher-class-context__selector {
    display: grid;
    grid-template-columns: auto minmax(180px, 1fr) auto;
    align-items: center;
    gap: 12px;
}

html body.teacher-reference-page .teacher-class-context__selector label,
html body.teacher-reference-page .teacher-class-context__code span {
    color: #29437a;
    font-size: 13px;
    font-weight: 700;
}

html body.teacher-reference-page .teacher-class-context__select-wrap {
    position: relative;
    min-width: 0;
}

html body.teacher-reference-page .teacher-class-context__select-wrap select {
    width: 100%;
    height: 48px;
    padding: 0 42px 0 15px;
    border: 1px solid #bcd4ff;
    border-radius: 14px;
    color: #0b1f73;
    background: #fff;
    appearance: none;
    font: inherit;
    font-size: 16px;
    font-weight: 800;
}

html body.teacher-reference-page .teacher-class-context__select-wrap > span {
    position: absolute;
    top: 50%;
    right: 15px;
    color: #0f5bff;
    pointer-events: none;
    transform: translateY(-55%);
    font-size: 22px;
}

html body.teacher-reference-page .teacher-class-context__show {
    min-height: 44px;
    padding: 0 16px;
    border: 0;
    border-radius: 12px;
    color: #fff;
    background: #0f5bff;
    font: inherit;
    font-weight: 700;
}

html body.teacher-reference-page .teacher-class-context__code {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px 48px;
    align-items: center;
    gap: 10px;
    padding-left: 22px;
    border-left: 1px solid #d9e8ff;
}

html body.teacher-reference-page .teacher-class-context__code > div {
    display: grid;
    gap: 2px;
}

html body.teacher-reference-page .teacher-class-context__code strong {
    color: #0b1f73;
    font-family: Consolas, "Courier New", monospace;
    font-size: 28px;
    letter-spacing: 0;
    line-height: 1.1;
}

html body.teacher-reference-page .teacher-class-context__code strong.teacher-class-context__missing {
    color: #d4552e;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
}

html body.teacher-reference-page .teacher-class-context__code small {
    color: #6e87b7;
    font-size: 11px;
}

html body.teacher-reference-page .teacher-class-context__icon-button {
    display: grid;
    width: 48px;
    height: 48px;
    padding: 0;
    place-items: center;
    border: 1px solid #a9c9ff;
    border-radius: 50%;
    color: #0f5bff;
    background: #fff;
    box-shadow: 0 6px 14px rgba(14, 117, 255, .13);
    font-size: 24px;
    font-weight: 800;
}

html body.teacher-reference-page .teacher-class-context__icon-button--refresh {
    color: #fff;
    background: #0f5bff;
}

html body.teacher-reference-page .teacher-class-context__notice {
    grid-column: 1 / -1;
    min-height: 18px;
    margin: -12px 0 0;
    color: #138a43;
    font-size: 12px;
    font-weight: 700;
    text-align: right;
}

html body.teacher-reference-page .teacher-class-context--empty {
    display: block;
}

@media (max-width: 900px) {
    html body.teacher-reference-page .teacher-class-context {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    html body.teacher-reference-page .teacher-class-context__code {
        padding: 14px 0 0;
        border-top: 1px solid #d9e8ff;
        border-left: 0;
    }
}

@media (max-width: 640px) {
    html body.teacher-reference-page .teacher-class-context {
        margin-bottom: 16px;
        padding: 14px;
        border-radius: 16px;
    }

    html body.teacher-reference-page .teacher-class-context__selector {
        grid-template-columns: 1fr auto;
    }

    html body.teacher-reference-page .teacher-class-context__selector label {
        grid-column: 1 / -1;
    }

    html body.teacher-reference-page .teacher-class-context__select-wrap select {
        height: 46px;
        font-size: 14px;
    }

    html body.teacher-reference-page .teacher-class-context__show {
        min-height: 42px;
        padding: 0 12px;
        font-size: 12px;
    }

    html body.teacher-reference-page .teacher-class-context__code {
        grid-template-columns: minmax(0, 1fr) 42px 42px;
        gap: 8px;
    }

    html body.teacher-reference-page .teacher-class-context__code strong {
        font-size: 22px;
    }

    html body.teacher-reference-page .teacher-class-context__icon-button {
        width: 42px;
        height: 42px;
        font-size: 20px;
    }

    html body.teacher-reference-page .teacher-class-context__notice {
        margin-top: -8px;
        text-align: left;
    }
}
/* END TEACHER-CLASS-SWITCHER-005 */

/* START TEACHER-RESPONSIVE-BLOCKS-016 */
html body.teacher-reference-page,
html body.teacher-reference-page .teacher-shell,
html body.teacher-reference-page .teacher-hub {
    max-width: 100%;
    overflow-x: clip;
}

html body.teacher-reference-page .teacher-content,
html body.teacher-reference-page .teacher-content *,
html body.teacher-reference-page .teacher-panel,
html body.teacher-reference-page .teacher-panel > *,
html body.teacher-reference-page [class*="teacher-"] {
    min-width: 0;
    box-sizing: border-box;
}

html body.teacher-reference-page img {
    max-width: 100%;
}

html body.teacher-reference-page .teacher-ui-icon,
html body.teacher-reference-page .teacher-school-mark,
html body.teacher-reference-page .teacher-stat-dot,
html body.teacher-reference-page .teacher-math-icon,
html body.teacher-reference-page .teacher-quick-icon,
html body.teacher-reference-page .teacher-avatar,
html body.teacher-reference-page .teacher-topic-row__icon {
    flex-shrink: 0;
    aspect-ratio: 1;
}

html body.teacher-reference-page .teacher-ui-icon > img,
html body.teacher-reference-page .teacher-school-mark > img,
html body.teacher-reference-page .teacher-stat-dot > img,
html body.teacher-reference-page .teacher-math-icon > img,
html body.teacher-reference-page .teacher-quick-icon > img,
html body.teacher-reference-page .teacher-topic-row__icon,
html body.teacher-reference-page .teacher-topic-card > img,
html body.teacher-reference-page .teacher-recommendation-row > img,
html body.teacher-reference-page .teacher-summary-card > img,
html body.teacher-reference-page .teacher-kpi-card > img {
    object-fit: contain;
    object-position: center;
}

html body.teacher-reference-page .teacher-avatar img,
html body.teacher-reference-page img.teacher-avatar {
    object-fit: contain;
    object-position: center;
}

html body.teacher-reference-page h1,
html body.teacher-reference-page h2,
html body.teacher-reference-page h3,
html body.teacher-reference-page p,
html body.teacher-reference-page strong,
html body.teacher-reference-page small,
html body.teacher-reference-page span,
html body.teacher-reference-page a,
html body.teacher-reference-page button,
html body.teacher-reference-page label {
    overflow-wrap: anywhere;
}

html body.teacher-reference-page .teacher-matrix-scroll,
html body.teacher-reference-page .teacher-mistake-table {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}

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

@media (max-width: 640px) {
    html body.teacher-reference-page .teacher-summary-strip,
    html body.teacher-reference-page .teacher-class-kpis,
    html body.teacher-reference-page .teacher-class-grid,
    html body.teacher-reference-page .teacher-dashboard-footer-grid {
        grid-template-columns: 1fr;
    }

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

    html body.teacher-reference-page .teacher-summary-card > img,
    html body.teacher-reference-page .teacher-summary-card > .teacher-ui-icon,
    html body.teacher-reference-page .teacher-kpi-card > img,
    html body.teacher-reference-page .teacher-kpi-card > .teacher-ui-icon {
        flex: 0 0 48px;
        width: 48px;
        height: 48px;
    }

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

    html body.teacher-reference-page .teacher-summary-card strong,
    html body.teacher-reference-page .teacher-kpi-card strong {
        font-size: 25px;
        line-height: 29px;
    }

    html body.teacher-reference-page .teacher-summary-card small,
    html body.teacher-reference-page .teacher-kpi-card small {
        font-size: 11px;
        line-height: 15px;
    }

    html body.teacher-reference-dashboard .teacher-class-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    html body.teacher-reference-dashboard .teacher-class-card {
        min-height: 224px;
        padding: 14px;
    }

    html body.teacher-reference-dashboard .teacher-class-card__header {
        grid-template-columns: 52px minmax(0, 1fr) auto;
        gap: 10px;
    }

    html body.teacher-reference-dashboard .teacher-school-mark {
        width: 52px;
        height: 52px;
    }

    html body.teacher-reference-dashboard .teacher-class-card__header h3 { font-size: 24px; }
    html body.teacher-reference-dashboard .teacher-status-badge,
    html body.teacher-reference-dashboard .teacher-status-img {
        grid-column: auto;
        margin: 0;
        justify-self: end;
    }

    html body.teacher-reference-dashboard .teacher-status-badge {
        min-height: 30px;
        padding: 0 10px;
        font-size: 10px;
    }

    html body.teacher-reference-dashboard .teacher-class-card__stats img { width: 22px; height: 22px; }
    html body.teacher-reference-dashboard .teacher-class-card__stats strong { font-size: 17px; line-height: 20px; }
    html body.teacher-reference-dashboard .teacher-class-card__stats span { font-size: 10px; line-height: 14px; }

    html body.teacher-reference-dashboard .teacher-focus-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    html body.teacher-reference-dashboard .teacher-focus-card {
        min-height: 116px;
        gap: 4px;
        padding: 10px 8px;
    }

    html body.teacher-reference-dashboard .teacher-focus-card > img,
    html body.teacher-reference-dashboard .teacher-focus-card > .teacher-math-icon {
        width: 42px;
        height: 42px;
    }

    html body.teacher-reference-dashboard .teacher-focus-card strong {
        overflow: visible;
        font-size: 11px;
        line-height: 14px;
        text-overflow: clip;
        white-space: normal;
    }

    html body.teacher-reference-dashboard .teacher-focus-card b { font-size: 18px; }
    html body.teacher-reference-dashboard .teacher-focus-card small { font-size: 9px; line-height: 12px; }

    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;
        padding: 8px;
        font-size: 11px;
        line-height: 14px;
    }

    html body.teacher-reference-page .teacher-quick-actions img,
    html body.teacher-reference-page .teacher-quick-icon { width: 44px; height: 44px; }

    html body.teacher-reference-page .teacher-coach-card { min-height: 170px; }
    html body.teacher-reference-page .teacher-coach-card > div { width: 62%; }
    html body.teacher-reference-page .teacher-coach-card h2 { font-size: 17px; line-height: 22px; }
    html body.teacher-reference-page .teacher-coach-card p { font-size: 11px; line-height: 16px; }
    html body.teacher-reference-page .teacher-coach-card > img { right: 4px; bottom: 0; width: 110px; height: auto; max-height: calc(100% - 8px); object-fit: contain; object-position: center bottom; }

    html body.teacher-reference-page .teacher-topic-row {
        grid-template-columns: 40px minmax(0, 1fr) 52px;
        gap: 8px;
    }

    html body.teacher-reference-page .teacher-topic-row > strong { grid-column: 2; }
    html body.teacher-reference-page .teacher-topic-row > .teacher-progress-track { grid-column: 2 / -1; }
    html body.teacher-reference-page .teacher-topic-row > b { grid-column: 3; grid-row: 1; }
    html body.teacher-reference-page .teacher-topic-row > .teacher-math-icon { width: 40px; height: 40px; }

    html body.teacher-reference-page .teacher-student-row {
        grid-template-columns: 44px minmax(0, 1fr) auto;
        gap: 8px;
    }

    html body.teacher-reference-page .teacher-student-row b { justify-self: end; }
    html body.teacher-reference-page .teacher-student-row > span {
        grid-column: 2 / -1;
        justify-self: start;
        font-size: 10px;
        line-height: 14px;
    }

    html body.teacher-reference-page .teacher-recommendation-row {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 8px 10px;
    }

    html body.teacher-reference-page .teacher-recommendation-row .teacher-button {
        grid-column: 1 / -1;
        grid-row: auto;
        width: 100%;
        min-width: 0;
    }

    html body.teacher-reference-page .teacher-recommendation-badge {
        grid-column: 2;
        max-width: 100%;
        white-space: normal;
    }

    html body.teacher-reference-page .teacher-student-hero {
        grid-template-columns: 64px minmax(0, 1fr);
    }

    html body.teacher-reference-page .teacher-avatar--large { width: 64px; height: 64px; }

    html body.teacher-reference-page .teacher-class-context__code strong {
        font-size: clamp(17px, 6vw, 22px);
        overflow-wrap: normal;
        word-break: normal;
        white-space: nowrap;
    }
}

@media (max-width: 360px) {
    html body.teacher-reference-page .teacher-content { padding-inline: 10px; }
    html body.teacher-reference-page .teacher-panel { padding: 12px; }
    html body.teacher-reference-page .teacher-filter-group { flex-wrap: wrap; }
    html body.teacher-reference-page .teacher-filter-group .teacher-filter { flex-basis: 100%; }
    html body.teacher-reference-dashboard .teacher-focus-grid { grid-template-columns: 1fr; }

    html body.teacher-reference-page .teacher-class-context__selector { grid-template-columns: 1fr; }
    html body.teacher-reference-page .teacher-class-context__show { width: 100%; }
    html body.teacher-reference-page .teacher-class-context__code {
        grid-template-columns: minmax(0, 1fr) 40px 40px;
        gap: 6px;
    }
    html body.teacher-reference-page .teacher-class-context__icon-button { width: 40px; height: 40px; }

    html body.teacher-reference-page .teacher-section-heading {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    html body.teacher-reference-page .teacher-chart { padding-left: 30px; }
    html body.teacher-reference-page .teacher-chart__labels { left: 30px; }
}
/* END TEACHER-RESPONSIVE-BLOCKS-016 */

/* START TEACHER-CLASS-MANAGEMENT-019 */
html body.teacher-reference-page .teacher-class-management { margin-bottom: 18px; }
html body.teacher-reference-page .teacher-class-management summary { cursor: pointer; list-style: none; color: var(--teacher-text); font-size: 17px; font-weight: 800; }
html body.teacher-reference-page .teacher-class-management summary::-webkit-details-marker { display: none; }
html body.teacher-reference-page .teacher-class-management__grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 18px; margin-top: 18px; }
html body.teacher-reference-page .teacher-class-management__form { display: grid; grid-template-columns: minmax(0,1fr) minmax(130px,.45fr) auto; align-items: end; gap: 12px; margin-top: 18px; }
html body.teacher-reference-page .teacher-class-management__grid .teacher-class-management__form { grid-template-columns: minmax(0,1fr) auto; margin-top: 0; }
html body.teacher-reference-page .teacher-class-management label { color: var(--teacher-body); font-size: 12px; font-weight: 700; }
html body.teacher-reference-page .teacher-class-management input,
html body.teacher-reference-page .teacher-class-management select { width: 100%; height: 46px; margin-top: 5px; padding: 0 13px; border: 1px solid var(--teacher-border); border-radius: 12px; color: var(--teacher-text); background: #fff; font: inherit; }
html body.teacher-reference-page .teacher-class-management .teacher-button { min-width: 130px; height: 46px; }
html body.teacher-reference-page .teacher-class-management__note { margin: 12px 0 0; color: var(--teacher-muted); font-size: 12px; line-height: 18px; }
html body.teacher-reference-page .teacher-class-management__danger { padding: 14px; border: 1px solid #ffc7c2; border-radius: 14px; background: #fff7f6; }
html body.teacher-reference-page .teacher-class-management__danger strong { color: #b42318; }
html body.teacher-reference-page .teacher-class-management__danger p { color: #7a302a; font-size: 12px; line-height: 18px; }
html body.teacher-reference-page .teacher-button--danger { border: 0; background: #d92d20; }
@media (max-width:700px) {
    html body.teacher-reference-page .teacher-class-management__grid,
    html body.teacher-reference-page .teacher-class-management__form,
    html body.teacher-reference-page .teacher-class-management__grid .teacher-class-management__form { grid-template-columns: 1fr; }
    html body.teacher-reference-page .teacher-class-management .teacher-button { width: 100%; }
}
/* END TEACHER-CLASS-MANAGEMENT-019 */

/* START TEACHER-STUDENT-ERRORS-020 */
html body.teacher-reference-page .teacher-error-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
html body.teacher-reference-page .teacher-error-summary article {
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid var(--teacher-border);
    border-radius: 14px;
    background: #f8fbff;
}
html body.teacher-reference-page .teacher-error-summary span { display: block; color: var(--teacher-body); font-size: 12px; line-height: 17px; }
html body.teacher-reference-page .teacher-error-summary strong { display: block; margin-top: 4px; color: var(--teacher-text); font-size: 25px; line-height: 29px; }
html body.teacher-reference-page .teacher-error-history-scroll {
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--teacher-border);
    border-radius: 14px;
    overscroll-behavior-inline: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}
html body.teacher-reference-page .teacher-error-history { width: 100%; min-width: 920px; border-collapse: collapse; color: var(--teacher-body); font-size: 12px; }
html body.teacher-reference-page .teacher-error-history th,
html body.teacher-reference-page .teacher-error-history td { padding: 11px 13px; border-bottom: 1px solid var(--teacher-border); text-align: left; vertical-align: middle; white-space: nowrap; }
html body.teacher-reference-page .teacher-error-history th { position: sticky; top: 0; z-index: 1; color: var(--teacher-text); background: #eef6ff; font-size: 11px; text-transform: uppercase; }
html body.teacher-reference-page .teacher-error-history tbody tr:nth-child(even) { background: #fbfdff; }
html body.teacher-reference-page .teacher-error-history tbody tr:last-child td { border-bottom: 0; }
html body.teacher-reference-page .teacher-error-history td:nth-child(2) { max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
html body.teacher-reference-page .teacher-error-history strong { color: var(--teacher-text); font-size: 15px; }
@media (max-width: 640px) {
    html body.teacher-reference-page .teacher-error-summary { grid-template-columns: 1fr; gap: 8px; }
    html body.teacher-reference-page .teacher-error-summary article { display: flex; min-height: 58px; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; }
    html body.teacher-reference-page .teacher-error-summary strong { margin: 0; font-size: 21px; }
    html body.teacher-reference-page .teacher-error-history { min-width: 850px; }
    html body.teacher-reference-page .teacher-error-history th,
    html body.teacher-reference-page .teacher-error-history td { padding: 9px 10px; }
}
/* END TEACHER-STUDENT-ERRORS-020 */

/* START TEACHER-DAILY-ACTIVITY-021 */
html body.teacher-reference-page .teacher-activity-date-form { display: flex; align-items: center; gap: 8px; color: var(--teacher-body); font-size: 12px; font-weight: 700; }
html body.teacher-reference-page .teacher-activity-date-form input { height: 42px; padding: 0 11px; border: 1px solid var(--teacher-border); border-radius: 12px; color: var(--teacher-text); background: #fff; font: inherit; }
html body.teacher-reference-page .teacher-activity-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-bottom: 16px; }
html body.teacher-reference-page .teacher-activity-summary article { display: flex; min-height: 72px; align-items: center; justify-content: space-between; padding: 13px 16px; border: 1px solid var(--teacher-border); border-radius: 14px; background: #f8fbff; }
html body.teacher-reference-page .teacher-activity-summary span { color: var(--teacher-body); font-size: 13px; font-weight: 700; }
html body.teacher-reference-page .teacher-activity-summary strong { color: var(--teacher-text); font-size: 27px; }
html body.teacher-reference-page .teacher-activity-summary--active strong { color: #0c9f49; }
html body.teacher-reference-page .teacher-activity-summary--inactive strong { color: #e23c32; }
html body.teacher-reference-page .teacher-activity-layout { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-bottom: 18px; }
html body.teacher-reference-page .teacher-activity-list { min-width: 0; padding: 14px; border: 1px solid var(--teacher-border); border-radius: 14px; }
html body.teacher-reference-page .teacher-activity-list h3 { margin: 0 0 9px; color: var(--teacher-text); font-size: 15px; }
html body.teacher-reference-page .teacher-activity-list a { display: grid; grid-template-columns: 12px minmax(0,1fr); gap: 2px 9px; padding: 9px 0; border-bottom: 1px solid #edf2fb; color: inherit; text-decoration: none; }
html body.teacher-reference-page .teacher-activity-list a:last-of-type { border-bottom: 0; }
html body.teacher-reference-page .teacher-activity-list strong { color: var(--teacher-text); font-size: 13px; }
html body.teacher-reference-page .teacher-activity-list small { grid-column: 2; color: var(--teacher-muted); font-size: 10px; line-height: 14px; }
html body.teacher-reference-page .teacher-activity-dot { width: 10px; height: 10px; margin-top: 4px; border-radius: 50%; }
html body.teacher-reference-page .teacher-activity-dot--active { background: #18b95b; box-shadow: 0 0 0 4px #e2f8eb; }
html body.teacher-reference-page .teacher-activity-dot--inactive { background: #ed5147; box-shadow: 0 0 0 4px #ffebe9; }
html body.teacher-reference-page .teacher-activity-week-scroll { max-width: 100%; overflow-x: auto; border: 1px solid var(--teacher-border); border-radius: 14px; -webkit-overflow-scrolling: touch; }
html body.teacher-reference-page .teacher-activity-week { width: 100%; min-width: 680px; border-collapse: collapse; }
html body.teacher-reference-page .teacher-activity-week th,
html body.teacher-reference-page .teacher-activity-week td { padding: 9px 10px; border-bottom: 1px solid var(--teacher-border); text-align: center; }
html body.teacher-reference-page .teacher-activity-week thead th { color: var(--teacher-body); background: #f4f8ff; font-size: 11px; }
html body.teacher-reference-page .teacher-activity-week tbody th { max-width: 190px; color: var(--teacher-text); font-size: 12px; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body.teacher-reference-page .teacher-activity-day { display: inline-grid; width: 26px; height: 26px; place-items: center; border-radius: 50%; font-size: 13px; font-weight: 800; }
html body.teacher-reference-page .teacher-activity-day--active { color: #087b39; background: #dff8e9; }
html body.teacher-reference-page .teacher-activity-day--inactive { color: #a6b0c4; background: #eef2f8; }
@media (max-width:640px) {
    html body.teacher-reference-page .teacher-daily-activity .teacher-section-heading { align-items: stretch; flex-direction: column; }
    html body.teacher-reference-page .teacher-activity-date-form { width: 100%; justify-content: space-between; }
    html body.teacher-reference-page .teacher-activity-date-form input { flex: 1; min-width: 0; }
    html body.teacher-reference-page .teacher-activity-summary { grid-template-columns: 1fr; gap: 8px; }
    html body.teacher-reference-page .teacher-activity-summary article { min-height: 56px; }
    html body.teacher-reference-page .teacher-activity-layout { grid-template-columns: 1fr; }
}
/* END TEACHER-DAILY-ACTIVITY-021 */

/* START TEACHER-ACTIVITY-PERIODS-023 */
html body.teacher-reference-page .teacher-activity-date-form { flex-wrap: wrap; justify-content: flex-end; }
html body.teacher-reference-page .teacher-activity-date-form select { height: 42px; max-width: 220px; padding: 0 34px 0 11px; border: 1px solid var(--teacher-border); border-radius: 12px; color: var(--teacher-text); background: #fff; font: inherit; }
html body.teacher-reference-page .teacher-activity-week-title { margin: 20px 0 10px; color: var(--teacher-text); font-size: 15px; }
@media (max-width: 640px) {
    html body.teacher-reference-page .teacher-activity-date-form { display: grid; grid-template-columns: auto minmax(0, 1fr); }
    html body.teacher-reference-page .teacher-activity-date-form select,
    html body.teacher-reference-page .teacher-activity-date-form input { width: 100%; max-width: none; }
}
/* END TEACHER-ACTIVITY-PERIODS-023 */

/* START TEACHER-PARTIAL-ACTIVITY-242 */
html body.teacher-reference-page .teacher-stat-dot--amber { color: #f59e0b; }
html body.teacher-reference-page .teacher-activity-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
html body.teacher-reference-page .teacher-activity-summary--partial strong { color: #d97706; }
html body.teacher-reference-page .teacher-activity-layout { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html body.teacher-reference-page .teacher-activity-dot--partial { background: #f59e0b; box-shadow: 0 0 0 4px #fff3d7; }
html body.teacher-reference-page .teacher-activity-day--partial { color: #9a5a00; background: #fff3d7; }
@media (max-width: 900px) {
    html body.teacher-reference-page .teacher-activity-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html body.teacher-reference-page .teacher-activity-layout { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    html body.teacher-reference-page .teacher-activity-summary { grid-template-columns: 1fr; }
}
/* END TEACHER-PARTIAL-ACTIVITY-242 */

/* START FULL-RESPONSIVE-QA-027 */
body.flow-auth-page,
body.flow-start-page,
body.flow-child-id-page,
body.parent-premium-page,
body.ra-profile-page,
body.ra-switch-child-page,
body.ra-results-page,
body.ra-rewards-page,
body.teacher-reference-page { min-width: 0 !important; max-width: 100%; }
/* END FULL-RESPONSIVE-QA-027 */

/* START TEACHER-ASSIGNMENT-HISTORY-022 */
html body.teacher-reference-page .teacher-active-assignment--completed,
html body.teacher-reference-page .teacher-active-assignment--archived { opacity: .82; }
html body.teacher-reference-page .teacher-assignment-status--active { color: #087b39; background: #dff8e9; }
html body.teacher-reference-page .teacher-assignment-status--completed { color: #0f5bff; background: #e8f1ff; }
html body.teacher-reference-page .teacher-assignment-status--archived { color: #667085; background: #eef1f5; }
html body.teacher-reference-page .teacher-active-assignments { max-height: 680px; overflow-y: auto; overscroll-behavior-block: contain; scrollbar-gutter: stable; }
@media (max-width:640px) {
    html body.teacher-reference-page .teacher-active-assignment { grid-template-columns: 38px minmax(0,1fr); }
    html body.teacher-reference-page .teacher-active-assignment .teacher-assignment-status { grid-column: 2; justify-self: start; }
}
/* END TEACHER-ASSIGNMENT-HISTORY-022 */

/* 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;
}
/* FLOW-AUTH-ICON-ALIGN-070: canonical premium mail/password icons in classic auth and forgot/reset flows. */
.parent-forgot-input-shell img[src*="premium-auth/"],
.parent-forgot-badge img[src*="premium-auth/"],
.robo-arena .flow-field > 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;
}

.parent-forgot-input-shell img[src*="premium-auth/"] {
    width: 24px !important;
    height: 24px !important;
    margin-left: 14px !important;
}

.parent-forgot-badge img[src*="premium-auth/"] {
    width: min(54%, 28px) !important;
    height: min(54%, 28px) !important;
}

.robo-arena .flow-field > img[src*="premium-auth/"] {
    width: 24px !important;
    height: 24px !important;
}

/* TEACHER-PROFILE-VISIBLE-235: keep account controls visible after older mobile overrides. */
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: profile school picker and modal navigation. */
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;
        gap: 2px !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;
    }
}

/* === Teacher Trend Panel === */
html body.teacher-reference-page .teacher-trend-panel { display: block; padding: 24px; border: 1px solid var(--teacher-border); border-radius: 24px; background: linear-gradient(180deg, #fff, #fbfdff); box-shadow: 0 8px 20px rgba(12,53,126,.08); }
html body.teacher-reference-page .teacher-trend-header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; }
html body.teacher-reference-page .teacher-trend-title { display: flex; align-items: center; gap: 12px; }
html body.teacher-reference-page .teacher-trend-icon { font-size: 28px; line-height: 1; }
html body.teacher-reference-page .teacher-trend-title h2 { margin: 0; color: var(--teacher-text); font-size: 22px; font-weight: 800; }
html body.teacher-reference-page .teacher-trend-title p { margin: 0; color: var(--teacher-muted); font-size: 13px; }
html body.teacher-reference-page .teacher-trend-filters { display: flex; gap: 8px; }
html body.teacher-reference-page .teacher-trend-filter { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border: 1px solid var(--teacher-border); border-radius: 18px; background: #fff; color: var(--teacher-muted); font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
html body.teacher-reference-page .teacher-trend-filter:hover { background: #f0f6ff; color: var(--teacher-text); }
html body.teacher-reference-page .teacher-trend-filter.is-active { background: #1d64ff; color: #fff; border-color: #1d64ff; }
html body.teacher-reference-page .teacher-trend-chart-wrap { display: flex; gap: 12px; align-items: stretch; min-height: 240px; }
html body.teacher-reference-page .teacher-trend-y-axis { display: flex; flex-direction: column; justify-content: space-between; padding: 8px 0; min-width: 40px; text-align: right; }
html body.teacher-reference-page .teacher-trend-y-axis span { color: var(--teacher-muted); font-size: 12px; font-weight: 500; line-height: 1; }
html body.teacher-reference-page .teacher-trend-chart-area { flex: 1; min-width: 0; }
html body.teacher-reference-page .teacher-trend-chart-area svg { width: 100%; height: 100%; min-height: 220px; overflow: visible; }
html body.teacher-reference-page .teacher-trend-chart-area polyline { fill: none; stroke: #1d64ff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
html body.teacher-reference-page .teacher-trend-chart-area circle.teacher-trend-dot-current { fill: #fff; stroke: #22c55e; stroke-width: 3; }
html body.teacher-reference-page .teacher-trend-chart-area circle.teacher-trend-dot-pulse { fill: none; stroke: #22c55e; stroke-width: 2; opacity: .35; }
html body.teacher-reference-page .teacher-trend-change { display: flex; align-items: center; gap: 6px; margin-top: 16px; padding: 10px 16px; border-radius: 14px; font-size: 14px; }
html body.teacher-reference-page .teacher-trend-change.is-positive { background: #f0fdf4; color: #16a34a; }
html body.teacher-reference-page .teacher-trend-change.is-negative { background: #fef2f2; color: #dc2626; }
html body.teacher-reference-page .teacher-trend-change-icon { font-size: 18px; font-weight: 700; }
html body.teacher-reference-page .teacher-trend-change strong { font-size: 16px; font-weight: 800; }
html body.teacher-reference-page .teacher-trend-change span { color: var(--teacher-muted); font-size: 13px; }

/* Responsive - tablet */
@media (min-width: 720px) {
    html body.teacher-reference-dashboard .teacher-trend-panel { padding: 28px 32px; }
    html body.teacher-reference-dashboard .teacher-trend-title h2 { font-size: 26px; }
}

/* Responsive - mobile */
@media (max-width: 719px) {
    html body.teacher-reference-dashboard .teacher-trend-panel { padding: 16px; border-radius: 18px; }
    html body.teacher-reference-dashboard .teacher-trend-header { flex-direction: column; gap: 12px; }
    html body.teacher-reference-dashboard .teacher-trend-title h2 { font-size: 20px; }
    html body.teacher-reference-dashboard .teacher-trend-filters { width: 100%; }
    html body.teacher-reference-dashboard .teacher-trend-filter { flex: 1; justify-content: center; height: 32px; padding: 0 10px; font-size: 12px; }
    html body.teacher-reference-dashboard .teacher-trend-chart-wrap { min-height: 180px; }
    html body.teacher-reference-dashboard .teacher-trend-y-axis { min-width: 32px; }
    html body.teacher-reference-dashboard .teacher-trend-y-axis span { font-size: 10px; }
    html body.teacher-reference-dashboard .teacher-trend-chart-area svg { min-height: 180px; }
}

/* ============================================================
   PARENT-ONBOARDING-FIX-CYCLE-2-20260924
   Ciljane izmjene roditeljskog onboarding toka (koraci 01-06)
   prema fix-brief-cycle-2.md. Prefiksirano na roditeljske
   stranice; kasniji izvor u datoteci osigurava prednost.
   ============================================================ */

/* ---------- Korak 05 (rewards.php): jednokolonski raspored na desktopu (Issue 6) ---------- */
@media (min-width: 900px) {
    body.parent-premium-page .parent-onboarding.parent-rewards-management {
        display: block;
        width: min(100% - 40px, 980px);
    }
    body.parent-premium-page .parent-onboarding.parent-rewards-management > * {
        grid-column: auto !important;
        grid-row: auto !important;
    }
}

/* rewards.php koristi div djecu u .onboarding-steps; preslikaj article stilove */
body.parent-premium-page .parent-onboarding.parent-rewards-management .onboarding-steps > div {
    display: grid;
    min-width: 0;
    min-height: 110px;
    padding: 16px 12px;
    align-content: center;
    justify-items: center;
    gap: 8px;
    border: 2px solid #cceaf5;
    border-radius: 14px;
    background: #fff;
    text-align: center;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
body.parent-premium-page .parent-onboarding.parent-rewards-management .onboarding-steps > div > strong {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 50%;
    background: #e6f4fb;
    color: #0ea5e9;
    font-weight: 900;
    font-size: 1rem;
    border: 2px solid #cceaf5;
    transition: background .2s, color .2s, border-color .2s;
}
body.parent-premium-page .parent-onboarding.parent-rewards-management .onboarding-steps > div > span {
    font-size: .9rem;
    font-weight: 900;
    color: #08285f;
    line-height: 1.2;
}
body.parent-premium-page .parent-onboarding.parent-rewards-management .onboarding-steps > div.is-complete {
    border-color: #14b8a6;
    background: #f0fdfa;
}
body.parent-premium-page .parent-onboarding.parent-rewards-management .onboarding-steps > div.is-complete > strong {
    background: #14b8a6;
    color: #fff;
    border-color: #14b8a6;
}
body.parent-premium-page .parent-onboarding.parent-rewards-management .onboarding-steps > div.is-complete > span { color: #14b8a6; }
body.parent-premium-page .parent-onboarding.parent-rewards-management .onboarding-steps > div.is-current {
    border-color: #0ea5e9;
    background: #eff9ff;
    box-shadow: 0 0 0 4px rgba(14, 165, 233, .12);
}
body.parent-premium-page .parent-onboarding.parent-rewards-management .onboarding-steps > div.is-current > strong {
    background: #0ea5e9;
    color: #fff;
    border-color: #0ea5e9;
}
body.parent-premium-page .parent-onboarding.parent-rewards-management .onboarding-steps > div.is-current > span { color: #0ea5e9; }

/* sticky CTA kontrast */
body.parent-premium-page .parent-onboarding.parent-rewards-management .parent-onboarding-sticky .btn {
    background: linear-gradient(135deg, #08aeea 0%, #0878ee 52%, #6635ed 100%) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 10px 22px rgba(15, 98, 225, .24) !important;
}

/* ---------- Korak 05: sakrij redundantni sazetak tijekom onboardinga (Issue 7) ---------- */
body.parent-premium-page .parent-onboarding.parent-rewards-management .parent-reward-summary-grid { display: none !important; }

/* ---------- Korak 05: kompaktna mreza prijedloga (6) (Issue 7) ---------- */
body.parent-premium-page .parent-onboarding.parent-rewards-management .onboarding-reward-presets {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
}
body.parent-premium-page .parent-onboarding.parent-rewards-management .onboarding-reward-presets button {
    min-height: 148px !important;
    padding: 12px 8px !important;
}
@media (max-width: 720px) {
    body.parent-premium-page .parent-onboarding.parent-rewards-management .onboarding-reward-presets { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 420px) {
    body.parent-premium-page .parent-onboarding.parent-rewards-management .onboarding-reward-presets button { min-height: 128px; padding: 8px 3px; font-size: .72rem; }
}

/* ---------- Korak 03 (index.php): kompaktno plavo zaglavlje (Issue 3) ---------- */
body.parent-premium-page .parent-add-child-view .parent-onboarding-hero {
    display: grid;
    width: min(100%, 760px) !important;
    max-width: 760px !important;
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: auto !important;
    margin: 0 auto 14px !important;
    padding: 14px 18px !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%) !important;
    color: #fff !important;
    box-shadow: 0 14px 34px rgba(4, 74, 124, .22) !important;
}
body.parent-premium-page .parent-add-child-view .parent-onboarding-hero::after { display: none !important; }
body.parent-premium-page .parent-add-child-view .parent-onboarding-hero > div {
    display: block !important;
    text-align: left !important;
    padding: 0 !important;
}
body.parent-premium-page .parent-add-child-view .parent-onboarding-hero .eyebrow {
    display: inline-block !important;
    margin-bottom: 2px !important;
    color: #fff !important;
    font-size: .68rem !important;
    letter-spacing: .1em !important;
}
body.parent-premium-page .parent-add-child-view .parent-onboarding-hero h1 {
    margin: 0 !important;
    color: #fff !important;
    font-size: clamp(1.3rem, 4.4vw, 1.7rem) !important;
    line-height: 1.1 !important;
    text-shadow: none !important;
}
body.parent-premium-page .parent-add-child-view .parent-onboarding-hero p { display: none !important; }
body.parent-premium-page .parent-add-child-view .parent-onboarding-logo,
body.parent-premium-page .parent-add-child-view .parent-onboarding-mentor { display: none !important; }
body.parent-premium-page .parent-add-child-view .parent-add-step-counter {
    position: static !important;
    top: auto !important;
    right: auto !important;
    min-width: 52px !important;
    height: 30px !important;
    color: #0ea5e9 !important;
    background: #fff !important;
    border: 0 !important;
    border-radius: 999px !important;
    font-size: .78rem !important;
    font-weight: 900 !important;
    box-shadow: 0 4px 10px rgba(3, 40, 90, .18) !important;
}
body.parent-premium-page .parent-add-child-view .parent-add-child-back {
    background: rgba(255, 255, 255, .22) !important;
    border-color: rgba(255, 255, 255, .4) !important;
}

/* kompaktni panel napretka */
body.parent-premium-page .parent-add-child-view .onboarding-progress-panel {
    width: min(100%, 760px) !important;
    margin: 0 auto 14px !important;
    padding: 12px !important;
}
body.parent-premium-page .parent-add-child-view .onboarding-progress-panel > h2 { margin: 0 0 10px !important; font-size: 1.05rem !important; }
body.parent-premium-page .parent-add-child-view .onboarding-steps article {
    min-height: 84px !important;
    padding: 10px 8px !important;
    gap: 5px !important;
}
body.parent-premium-page .parent-add-child-view .onboarding-steps article > span { width: 30px !important; height: 30px !important; font-size: .9rem !important; }
@media (max-width: 720px) {
    body.parent-premium-page .parent-add-child-view .onboarding-progress-panel { padding: 8px !important; }
    body.parent-premium-page .parent-add-child-view .onboarding-steps article { min-height: 52px !important; padding: 4px 2px !important; font-size: .68rem !important; }
    body.parent-premium-page .parent-add-child-view .onboarding-steps article > span { width: 24px !important; height: 24px !important; font-size: .78rem !important; }
    body.parent-premium-page .parent-add-child-view .onboarding-steps article small { display: none !important; }
}

/* svijetla kartica obrasca */
body.parent-premium-page .parent-add-child-view .parent-child-setup.parent-add-child-card {
    width: min(100%, 760px) !important;
    max-width: 760px !important;
    margin: 0 auto !important;
    padding: clamp(20px, 4vw, 36px) !important;
    overflow: visible !important;
    color: #08285f !important;
    background: #fff !important;
    border: 1px solid #cceaf5 !important;
    border-radius: 20px !important;
    box-shadow: 0 14px 34px rgba(5, 86, 137, .12) !important;
}
body.parent-premium-page .parent-add-child-view .parent-child-setup.parent-add-child-card h2 {
    color: #08285f !important;
    font-size: clamp(1.5rem, 4.4vw, 1.9rem) !important;
    text-shadow: none !important;
}
body.parent-premium-page .parent-add-child-view .eyebrow { color: #0ea5e9 !important; }
body.parent-premium-page .parent-add-child-view .parent-add-field label,
body.parent-premium-page .parent-add-child-view .parent-add-choice legend,
body.parent-premium-page .parent-add-child-view .parent-range-heading label {
    color: #08285f !important;
}
body.parent-premium-page .parent-add-child-view .parent-add-input-shell,
body.parent-premium-page .parent-add-child-view .parent-range-field,
body.parent-premium-page .parent-add-child-view .parent-add-info {
    color: #08285f !important;
    background: #fff !important;
    border-color: #cceaf5 !important;
}
body.parent-premium-page .parent-add-child-view input,
body.parent-premium-page .parent-add-child-view textarea,
body.parent-premium-page .parent-add-child-view select {
    color: #08285f !important;
}
body.parent-premium-page .parent-add-child-view ::placeholder { color: #7d93ab !important; }

/* ---------- Korak 03: svijetli razredni izbor (Issue 4) ---------- */
body.parent-premium-page .parent-add-child-view .parent-choice-chip {
    min-height: 52px !important;
    padding: 6px !important;
    border: 2px solid #cceaf5 !important;
    border-radius: 12px !important;
    background: #fff !important;
}
body.parent-premium-page .parent-add-child-view .parent-choice-chip span {
    color: #08285f !important;
    background: transparent !important;
    border: 0 !important;
    font-size: 1.25rem !important;
    font-weight: 900 !important;
}
body.parent-premium-page .parent-add-child-view .parent-choice-chip:has(input:checked) {
    border-color: #0ea5e9 !important;
    background: #0ea5e9 !important;
    box-shadow: 0 0 0 4px rgba(14, 165, 233, .14) !important;
}
body.parent-premium-page .parent-add-child-view .parent-choice-chip:has(input:checked) span { color: #fff !important; }

/* svijetli avatari */
body.parent-premium-page .parent-add-child-view .parent-avatar-option {
    min-height: 96px !important;
    color: #08285f !important;
    background: #fff !important;
    border-color: #cceaf5 !important;
}
body.parent-premium-page .parent-add-child-view .parent-avatar-visual {
    width: 68px !important;
    height: 68px !important;
    background: #f4fbff !important;
    border: 2px solid #cceaf5 !important;
}
body.parent-premium-page .parent-add-child-view .parent-avatar-option:has(input:checked) .parent-avatar-visual {
    border-color: #0ea5e9 !important;
    box-shadow: 0 0 0 4px rgba(14, 165, 233, .14) !important;
}
body.parent-premium-page .parent-add-child-view .parent-avatar-option:has(input:checked) .parent-avatar-visual::after {
    background: linear-gradient(180deg, #34f1b2, #0aa37f) !important;
    border-color: #fff !important;
}

/* ---------- Korak 04 (index.php): svijetla kompaktna ID kartica (Issue 5) ---------- */
body.parent-premium-page .parent-add-child-view .parent-child-id-card {
    display: block !important;
    width: min(100%, 760px) !important;
    max-width: 760px !important;
    margin: 0 auto !important;
    padding: clamp(20px, 4vw, 34px) !important;
    overflow: hidden !important;
    color: #08285f !important;
    background: #fff !important;
    border: 1px solid #cceaf5 !important;
    border-radius: 20px !important;
    box-shadow: 0 14px 34px rgba(5, 86, 137, .12) !important;
}
body.parent-premium-page .parent-add-child-view .parent-child-id-card::before { display: none !important; }
body.parent-premium-page .parent-add-child-view .parent-child-id-card > * { position: relative !important; z-index: 1 !important; }
body.parent-premium-page .parent-add-child-view .parent-child-id-hero {
    display: flex !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    background: transparent !important;
    border-radius: 0 !important;
}
body.parent-premium-page .parent-add-child-view .parent-child-id-hero .parent-child-id-logo { display: none !important; }
body.parent-premium-page .parent-add-child-view .parent-child-id-hero .parent-child-id-robot {
    display: block !important;
    width: 60px !important;
    height: 60px !important;
    max-height: 60px !important;
    object-fit: contain !important;
    filter: none !important;
}
body.parent-premium-page .parent-add-child-view .parent-child-id-steps {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 0 0 14px !important;
}
body.parent-premium-page .parent-add-child-view .parent-child-id-steps span {
    min-height: 38px !important;
    border: 1px solid #cceaf5 !important;
    border-radius: 999px !important;
    color: #5d7891 !important;
    background: #f4fbff !important;
    font-size: .76rem !important;
}
body.parent-premium-page .parent-add-child-view .parent-child-id-steps strong {
    background: #e6f4fb !important;
    color: #0ea5e9 !important;
}
body.parent-premium-page .parent-add-child-view .parent-child-id-steps .is-complete,
body.parent-premium-page .parent-add-child-view .parent-child-id-steps .is-active {
    color: #fff !important;
    border-color: #0ea5e9 !important;
    background: linear-gradient(135deg, #14b8a6, #0ea5e9) !important;
}
body.parent-premium-page .parent-add-child-view .parent-child-id-steps .is-complete strong,
body.parent-premium-page .parent-add-child-view .parent-child-id-steps .is-active strong {
    background: rgba(255, 255, 255, .22) !important;
    color: #fff !important;
}
body.parent-premium-page .parent-add-child-view .parent-child-id-heading h2 {
    color: #08285f !important;
    font-size: clamp(1.5rem, 5.4vw, 2rem) !important;
    line-height: 1.1 !important;
    text-transform: none !important;
    text-shadow: none !important;
}
body.parent-premium-page .parent-add-child-view .parent-child-id-heading p:not(.eyebrow) { color: #5d7891 !important; }
body.parent-premium-page .parent-add-child-view .parent-child-id-summary,
body.parent-premium-page .parent-add-child-view .parent-child-id-display,
body.parent-premium-page .parent-add-child-view .parent-child-id-note {
    border: 1px solid #cceaf5 !important;
    border-radius: 14px !important;
    background: #f4fbff !important;
    box-shadow: none !important;
}
body.parent-premium-page .parent-add-child-view .parent-child-id-summary strong { color: #08285f !important; }
body.parent-premium-page .parent-add-child-view .parent-child-id-summary span:not(.parent-child-id-saved) { color: #5d7891 !important; }
body.parent-premium-page .parent-add-child-view .parent-child-id-display { padding: 18px 14px !important; }
body.parent-premium-page .parent-add-child-view .parent-child-id-display p { color: #0ea5e9 !important; }
body.parent-premium-page .parent-add-child-view .parent-child-id-value {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
}
body.parent-premium-page .parent-add-child-view .parent-child-id-value .child-id__group {
    display: inline-flex !important;
    min-width: 64px !important;
    min-height: 58px !important;
    padding: 8px 12px !important;
    place-items: center !important;
    border: 2px solid #cceaf5 !important;
    border-radius: 12px !important;
    color: #08285f !important;
    background: #fff !important;
    font-size: clamp(1.5rem, 7vw, 2.1rem) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-shadow: none !important;
}
body.parent-premium-page .parent-add-child-view .parent-child-id-divider {
    width: 12px !important;
    height: 3px !important;
    background: #b9d8ea !important;
}
body.parent-premium-page .parent-add-child-view .parent-child-id-display small,
body.parent-premium-page .parent-add-child-view .parent-child-id-profile-hint { color: #5d7891 !important; }
body.parent-premium-page .parent-add-child-view .parent-child-id-status { color: #0a8fce !important; }
body.parent-premium-page .parent-add-child-view .parent-child-id-status[data-status-type="error"] { color: #dc2626 !important; }
body.parent-premium-page .parent-add-child-view .parent-child-id-status[data-status-type="warning"] { color: #b45309 !important; }
body.parent-premium-page .parent-add-child-view .parent-child-id-note strong { color: #08285f !important; }
body.parent-premium-page .parent-add-child-view .parent-child-id-note p { color: #5d7891 !important; }
body.parent-premium-page .parent-add-child-view .parent-child-id-note--warning {
    border-color: #fcd34d !important;
    background: #fffbeb !important;
}
body.parent-premium-page .parent-add-child-view .parent-child-id-safe {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin: 10px 0 0 !important;
    padding: 8px 12px !important;
    border-radius: 999px !important;
    color: #07553f !important;
    background: #e7f8f1 !important;
    font-size: .84rem !important;
    font-weight: 800 !important;
}
body.parent-premium-page .parent-add-child-view .parent-child-id-safe img { width: 18px !important; height: 18px !important; object-fit: contain !important; }
body.parent-premium-page .parent-add-child-view .parent-child-id-dialog {
    color: #08285f !important;
    background: #fff !important;
    border: 1px solid #cceaf5 !important;
}
body.parent-premium-page .parent-add-child-view .parent-child-id-dialog h3,
body.parent-premium-page .parent-add-child-view .parent-child-id-dialog p,
body.parent-premium-page .parent-add-child-view .parent-child-id-dialog li { color: #08285f !important; }
body.parent-premium-page .parent-add-child-view .parent-child-id-dialog-close {
    color: #08285f !important;
    background: #f4fbff !important;
    border-color: #cceaf5 !important;
}
@media (min-width: 980px) {
    body.parent-premium-page .parent-add-child-view .parent-child-id-card {
        display: block !important;
        width: min(100%, 760px) !important;
    }
    body.parent-premium-page .parent-add-child-view .parent-child-id-card > * { grid-column: auto !important; }
}

/* ---------- Korak 06 (index.php): zavrsna cestitka (Issue 8) ---------- */
body.parent-premium-page .onboarding-complete-card {
    width: min(100%, 760px) !important;
    margin: 0 auto !important;
    padding: clamp(24px, 5vw, 44px) !important;
    text-align: center !important;
    border: 1px solid #cceaf5 !important;
    border-radius: 24px !important;
    background: #fff !important;
    box-shadow: 0 18px 44px rgba(5, 86, 137, .14) !important;
}
body.parent-premium-page .onboarding-complete-card .onboarding-complete-celebrate {
    position: relative !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    margin: 0 auto 10px !important;
}
body.parent-premium-page .onboarding-complete-card .onboarding-complete-celebrate img {
    width: 150px !important;
    height: 150px !important;
    object-fit: contain !important;
}
body.parent-premium-page .onboarding-complete-card .onboarding-complete-flag {
    position: relative !important;
    display: block !important;
    width: 16px !important;
    height: 92px !important;
    margin: 0 0 8px -6px !important;
}
body.parent-premium-page .onboarding-complete-card .onboarding-complete-flag::before {
    content: '' !important;
    position: absolute !important;
    left: 7px !important;
    top: 0 !important;
    width: 3px !important;
    height: 92px !important;
    border-radius: 2px !important;
    background: #0ea5e9 !important;
}
body.parent-premium-page .onboarding-complete-card .onboarding-complete-flag::after {
    content: '' !important;
    position: absolute !important;
    left: 10px !important;
    top: 2px !important;
    width: 30px !important;
    height: 20px !important;
    background: linear-gradient(180deg, #ffd54f, #ffb300) !important;
    clip-path: polygon(0 0, 100% 50%, 0 100%) !important;
}
body.parent-premium-page .onboarding-complete-card .onboarding-complete-summary {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin: 16px 0 !important;
    text-align: left !important;
}
body.parent-premium-page .onboarding-complete-card .onboarding-complete-summary div {
    display: grid !important;
    gap: 2px !important;
    padding: 12px 14px !important;
    border: 1px solid #cceaf5 !important;
    border-radius: 12px !important;
    background: #f4fbff !important;
}
body.parent-premium-page .onboarding-complete-card .onboarding-complete-summary small {
    color: #5d7891 !important;
    font-size: .72rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
}
body.parent-premium-page .onboarding-complete-card .onboarding-complete-summary strong {
    color: #08285f !important;
    font-size: 1.05rem !important;
    font-weight: 900 !important;
    overflow-wrap: anywhere !important;
}
@media (max-width: 480px) {
    body.parent-premium-page .onboarding-complete-card .onboarding-complete-summary { grid-template-columns: 1fr !important; }
}

/* ---------- Korak 02 (verify-email.php): svijetla povrsina (Issue 2) ---------- */
body.parent-verify-page .parent-verify-shell {
    background: #f2faff !important;
    box-shadow: none !important;
}
body.parent-verify-page .parent-verify-hero {
    min-height: clamp(150px, 34vw, 210px) !important;
    border-radius: 0 0 22px 22px !important;
    background: linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%) !important;
}
body.parent-verify-page .parent-verify-hero::after { display: none !important; }
body.parent-verify-page .parent-verify-hero-bg { display: none !important; }
body.parent-verify-page .parent-verify-logo {
    top: 14px !important;
    width: min(56%, 220px) !important;
    max-height: 96px !important;
    filter: drop-shadow(0 6px 14px rgba(0, 40, 90, .28)) !important;
}
body.parent-verify-page .parent-verify-robot {
    bottom: 4px !important;
    width: min(34%, 130px) !important;
    max-height: 140px !important;
    filter: drop-shadow(0 10px 18px rgba(0, 40, 90, .3)) !important;
}
body.parent-verify-page .arena-back-button {
    background: rgba(255, 255, 255, .24) !important;
    border-color: rgba(255, 255, 255, .5) !important;
    box-shadow: 0 8px 24px rgba(0, 40, 90, .18) !important;
}
body.parent-verify-page .parent-verify-column { padding-top: 18px !important; }
body.parent-verify-page .parent-verify-card,
body.parent-verify-page .parent-verify-security {
    border: 1px solid #cceaf5 !important;
    background: #fff !important;
    box-shadow: 0 14px 34px rgba(5, 86, 137, .12) !important;
}
body.parent-verify-page .parent-verify-card--success { border-color: #6ee7b7 !important; }
body.parent-verify-page .parent-verify-card--warning { border-color: #fcd34d !important; }
body.parent-verify-page .parent-verify-card--error { border-color: #fda4af !important; }
body.parent-verify-page .parent-verify-badge {
    border-color: #cceaf5 !important;
    background: radial-gradient(circle at 35% 25%, #e0f2fe, #bae6fd 76%) !important;
    box-shadow: 0 0 18px rgba(14, 165, 233, .22) !important;
}
body.parent-verify-page .parent-verify-badge--success {
    border-color: #6ee7b7 !important;
    background: radial-gradient(circle at 35% 25%, #d1fae5, #6ee7b7 76%) !important;
}
body.parent-verify-page .parent-verify-badge--warning {
    border-color: #fcd34d !important;
    background: radial-gradient(circle at 35% 25%, #fef3c7, #fcd34d 76%) !important;
}
body.parent-verify-page .parent-verify-badge--error {
    border-color: #fda4af !important;
    background: radial-gradient(circle at 35% 25%, #fee2e2, #fda4af 76%) !important;
}
body.parent-verify-page .parent-verify-status { color: #0ea5e9 !important; }
body.parent-verify-page .parent-verify-card--success .parent-verify-status { color: #0a8f6e !important; }
body.parent-verify-page .parent-verify-card--warning .parent-verify-status { color: #b45309 !important; }
body.parent-verify-page .parent-verify-card--error .parent-verify-status { color: #dc2626 !important; }
body.parent-verify-page .parent-verify-card h1 {
    color: #08285f !important;
    text-shadow: none !important;
}
body.parent-verify-page .parent-verify-card p { color: #5d7891 !important; }
body.parent-verify-page .parent-verify-email {
    border: 1px solid #cceaf5 !important;
    color: #08285f !important;
    background: #f4fbff !important;
}
body.parent-verify-page .parent-verify-email strong { color: #08285f !important; }
body.parent-verify-page .parent-verify-hint,
body.parent-verify-page .parent-verify-cooldown { color: #5d7891 !important; }
body.parent-verify-page .parent-verify-note--success {
    border: 1px solid #6ee7b7 !important;
    color: #07553f !important;
    background: #e7f8f1 !important;
}
body.parent-verify-page .parent-verify-note--error {
    border: 1px solid #fda4af !important;
    color: #7f1d1d !important;
    background: #fee2e2 !important;
}
body.parent-verify-page .parent-verify-submit {
    border: 1px solid #0ea5e9 !important;
    background: linear-gradient(135deg, #08aeea 0%, #0878ee 52%, #6635ed 100%) !important;
    box-shadow: 0 10px 22px rgba(15, 98, 225, .24) !important;
}
body.parent-verify-page .parent-verify-submit--success {
    border-color: #14b8a6 !important;
    background: linear-gradient(135deg, #14b8a6 0%, #0ea5e9 100%) !important;
}
body.parent-verify-page .parent-verify-resend h2 { color: #08285f !important; }
body.parent-verify-page .parent-verify-resend p { color: #5d7891 !important; }
body.parent-verify-page .parent-verify-security img {
    background: radial-gradient(circle at 35% 25%, #d1fae5, #6ee7b7 76%) !important;
    box-shadow: 0 0 16px rgba(20, 184, 166, .22) !important;
}
body.parent-verify-page .parent-verify-security p { color: #5d7891 !important; }
body.parent-verify-page .parent-verify-security strong { color: #08285f !important; }
body.parent-verify-page .parent-verify-change-email {
    margin: 0 !important;
    color: #5d7891 !important;
    font-size: .88rem !important;
    text-align: center !important;
}
body.parent-verify-page .parent-verify-change-email a {
    color: #0a8fce !important;
    font-weight: 800 !important;
    text-decoration: underline !important;
}
@media (min-width: 760px) {
    body.parent-verify-page .parent-verify-shell {
        display: grid !important;
        width: min(100%, 1040px) !important;
        max-width: 1040px !important;
        min-height: min(100dvh, 900px) !important;
        margin: 0 auto !important;
        grid-template-columns: minmax(320px, 1fr) minmax(360px, 460px) !important;
        align-items: center !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    body.parent-verify-page .parent-verify-hero {
        min-height: 560px !important;
        border-radius: 28px !important;
    }
    body.parent-verify-page .parent-verify-logo { top: 40px !important; width: min(70%, 320px) !important; max-height: 150px !important; }
    body.parent-verify-page .parent-verify-robot { bottom: 60px !important; width: min(50%, 260px) !important; max-height: 280px !important; }
    body.parent-verify-page .parent-verify-column { padding: 28px 22px !important; }
}

/* ---------- Korak 01 (sign-in.php): kompaktni hero + tekstualni brand (Issue 1) ---------- */
html body.parent-login-v2-page .parent-login-v2-hero {
    height: clamp(240px, 46cqi, 420px) !important;
}
html body.parent-login-v2-page .parent-login-v2-logo {
    width: min(44cqi, 400px) !important;
    height: min(22cqi, 200px) !important;
}
html body.parent-login-v2-page .parent-login-v2-characters {
    width: min(64cqi, 580px) !important;
}
html body.parent-login-v2-page .parent-login-v2-brand {
    position: absolute;
    z-index: 3;
    top: calc(4.5cqi + 22cqi + 1cqi);
    left: 50%;
    display: block;
    width: max-content;
    max-width: 90%;
    margin: 0;
    padding: 6px 16px;
    transform: translateX(-50%);
    border-radius: 999px;
    color: #0a2673;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 6px 14px rgba(21, 73, 170, .16);
    font-size: clamp(12px, 2cqi, 17px);
    font-weight: 800;
    letter-spacing: .02em;
    text-align: center;
}
html body.parent-login-v2-page .parent-login-v2-panel { margin-top: 0 !important; }
html body.parent-login-v2-page .parent-login-v2-heading h1 { font-size: clamp(28px, 4.6cqi, 42px) !important; }
html body.parent-login-v2-page .arena-google-divider { color: #4b5c72 !important; }