:root {
    --bg: #f5f7fb;
    --surface: #ffffff;
    --surface-soft: #f8fafc;
    --text: #121826;
    --muted: #667085;
    --border: #dfe5ee;
    --border-strong: #c8d1df;
    --blue: #246bfe;
    --green: #16a34a;
    --red: #dc2626;
    --yellow: #f5b301;
    --shadow: 0 18px 42px rgba(25, 34, 53, 0.1);
    --nav-height: 74px;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--bg);
    width: 100%;
    overflow-x: clip;
}

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    color: var(--text);
    background: #fff;
    width: 100%;
    overflow-x: clip;
}

a {
    color: inherit;
}

button,
input,
textarea,
select {
    font: inherit;
    letter-spacing: 0;
}

img {
    max-width: 100%;
}

[hidden] {
    display: none !important;
}

.app-main {
    width: min(1120px, 100%);
    margin: 0 auto;
    padding: 86px 18px calc(var(--nav-height) + 32px);
}

.app-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.88);
    /* border-bottom: 1px solid rgba(223, 229, 238, 0.82); */
    backdrop-filter: blur(18px);
}

.app-topbar-inner {
    width: min(1120px, 100%);
    min-height: 64px;
    margin: 0 auto;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-weight: 800;
}

.brand-mark {
    width: 34px;
    height: 34px;
    border: 1px solid var(--border);
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    color: var(--blue);
    box-shadow: 0 8px 18px rgba(36, 107, 254, 0.08);
}

.topbar-profile {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.topbar-profile-group {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
}

.topbar-profile-text {
    min-width: 0;
    display: grid;
    /* gap: 3px; */
}

.topbar-profile-name {
    min-width: 0;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.98rem;
    font-weight: 800;
}

.topbar-profile-role {
    min-width: 0;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9rem;
    line-height: 1.15;
    color: #6f84ad;
}

.topbar-gadget-timer {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-variant-numeric: tabular-nums;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.topbar-gadget-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

.topbar-gadget-clear-form {
    margin: 0;
    flex: 0 0 auto;
}

.dev-control-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}

.topbar-gadget-clear-btn {
    width: 34px;
    height: 34px;
    padding: 0;
    cursor: pointer;
}

.topbar-gadget-clear-btn:hover,
.topbar-gadget-clear-btn:focus {
    transform: translateY(-1px);
}

.topbar-gadget-clear-btn img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.topbar-gadget-timer-icon {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    display: block;
    object-fit: contain;
}

.top-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.icon-btn {
    position: relative;
    width: 50px;
    height: 50px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: var(--surface);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.9rem;
    text-decoration: none;
}

.icon-btn:hover,
.icon-btn:focus {
    border-color: var(--border-strong);
    background: var(--surface-soft);
}

.icon-btn img {
    width: 19px;
    height: 19px;
    object-fit: contain;
}

.icon-btn-svg {
    width: 19px;
    height: 19px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.badge-dot {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--red);
}

body.child-home-theme:not(.child-content-theme) .has-unread-notifications .notification-bell-icon,
body.parent-page-index .has-unread-notifications .notification-bell-icon {
    transform-origin: center;
    animation: child-balance-coin-pop 0.9s cubic-bezier(.2, .8, .2, 1) 0.08s both;
}

body.child-home-theme:not(.child-content-theme) .has-unread-notifications .notification-badge-dot,
body.parent-page-index .has-unread-notifications .notification-badge-dot {
    transform-origin: center;
    animation: child-balance-coin-pop 0.9s cubic-bezier(.2, .8, .2, 1) 0.14s both;
}

.notification-close-icon {
    display: block;
    width: 23px;
    height: 23px;
    background: url("/static/stock/plus.png") center / contain no-repeat;
    transform: rotate(45deg);
}

.avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #eef3fb;
    /* border: 1px solid var(--border); */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-weight: 800;
    color: var(--blue);
    flex: 0 0 42px;
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.user-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.user-chip-text {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.user-chip-name {
    font-size: 0.92rem;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.user-chip-role {
    font-size: 0.76rem;
    color: var(--muted);
}

.bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45;
    background: rgb(255, 255, 255);

}

.bottom-nav-inner {
    width: min(760px, 100%);
    margin: 0 auto;
    min-height: var(--nav-height);
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
    display: flex;
    align-items: stretch;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}

.bottom-nav-inner::-webkit-scrollbar {
    display: none;
}

.nav-link,
.btn,
.icon-btn,
.select-trigger,
.select-option,
.file-picker-btn,
.dots-btn,
.points-stepper-btn,
.learning-carousel-btn,
.trophy-award-trigger,
.trophy-chip-trigger,
.shop-cart-btn,
.video-btn,
.quest-btn,
.auth-google-btn {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.nav-link {
    position: relative;
    --nav-edge-scale: 1;
    flex: 0 0 82px;
    min-width: 82px;
    min-height: 54px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--muted);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 0.74rem;
    font-weight: 800;
    transform-origin: center;
    will-change: transform;
}

.nav-icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    max-width: none;
    transform: scale(var(--nav-edge-scale));
    transform-origin: center;
    transition: transform 180ms ease;
    will-change: transform;
}

.nav-link.is-loading .nav-icon-wrap {
    animation: bc-nav-loading-spin 0.95s linear infinite;
}

.nav-link img {
    width: 19px;
    height: 19px;
    object-fit: contain;
    opacity: 0.76;
    transform-origin: center;
    will-change: transform;
}

.nav-link span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-link .nav-icon-wrap {
    overflow: visible;
}

.tap-bounce {
    transform-origin: center;
    will-change: transform;
}

.nav-icon-wrap.is-tapping > img {
    animation: nav-icon-tap 220ms ease-out;
}

.nav-link.is-tapping {
    animation: nav-link-surface-tap 220ms ease-out;
}

.tap-bounce.is-tapping {
    animation: nav-icon-tap 220ms ease-out;
}

@keyframes nav-icon-tap {
    0% {
        transform: scale(1) translateY(0);
    }
    35% {
        transform: scale(0.88) translateY(1px);
    }
    72% {
        transform: scale(1.14) translateY(-3px);
    }
    100% {
        transform: scale(1) translateY(0);
    }
}

@keyframes nav-link-surface-tap {
    0% {
        transform: scale(1);
    }
    35% {
        transform: scale(0.95);
    }
    72% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes bc-nav-loading-spin {
    from {
        transform: scale(var(--nav-edge-scale)) rotate(0deg);
    }
    to {
        transform: scale(var(--nav-edge-scale)) rotate(360deg);
    }
}

.nav-badge {
    position: absolute;
    top: -9px;
    right: -11px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--red);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.66rem;
    line-height: 1;
    font-weight: 900;
}

.parent-notice-badge {
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--red);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    line-height: 1;
    font-weight: 900;
    flex: 0 0 auto;
}

.nav-link.is-active {
    border-color: rgba(36, 107, 254, 0.18);
    color: var(--blue);
    background: #e5f3ff;
}

.flash-stack {
    display: grid;
    gap: 10px;
    margin-bottom: 18px;
}

.flash {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    padding: 12px 14px;
    color: var(--text);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

.flash.success {
    background: #ffffff;
    color: #0f7a37;
    border-radius: 20px;
    font-size: small;
}

.flash.success::before {
    content: "";
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    background: url("/static/icons/menu/check.png") center / contain no-repeat;
}

.flash.error {
    border-color: rgba(220, 38, 38, 0.24);
    background: #ffffff;
    color: #b91c1c;
}

.flash.info {
    border-color: rgba(36, 107, 254, 0.22);
    background: #ffffff;
    color: #1d4ed8;
}

.auth-shell {
    width: min(560px, 100%);
    margin: 0 auto;
    min-height: calc(100vh - 120px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-pane {
    /* width: 100%;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: var(--shadow);
    padding: 24px; */
}

.auth-title {
    margin: 0 0 20px;
    font-size: 2rem;
    line-height: 1.05;
}

.auth-switch {
    margin-top: 16px;
    color: var(--muted);
    font-size: 0.94rem;
}

.auth-switch a {
    color: var(--blue);
    font-weight: 800;
}

body.auth-page {
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
    background:
        radial-gradient(circle at 12% 14%, rgba(255, 229, 122, 0.42), transparent 18%),
        radial-gradient(circle at 84% 12%, rgba(121, 202, 255, 0.34), transparent 20%),
        linear-gradient(180deg, #8fd9ff 0%, #d8f4ff 18%, #f9fdff 46%, #fff6c8 100%);
}

body.auth-page.login-page {
    background: linear-gradient(180deg, rgb(143 217 255 / 0%), rgba(255, 246, 200, 0.18)), url(/static/bgs/login.png) center top / cover repeat-y, linear-gradient(180deg, #8fd9ff00 0%, #d8f4ff00 18%, #f9fdff00 46%, #fff6c800 100%);
}

body.auth-page.register-page {
    background: linear-gradient(180deg, rgba(143, 217, 255, 0.16), rgb(255 246 200 / 0%)), url(/static/bgs/register.png) center top / cover repeat-y;
}

body.auth-page.register-page.register-role-stage {
    background: linear-gradient(180deg, rgba(143, 217, 255, 0.08), rgba(255, 255, 255, 0.04)), url(/static/bgs/r_1.png) center top / cover repeat-y;
}

body.auth-page .app-topbar,
body.auth-page .bottom-nav {
    display: none;
}

body.auth-page .app-main {
    width: min(430px, 100%);
    height: 100dvh;
    /* min-height: 100dvh; */
    margin: 0 auto;
    padding: clamp(12px, 2dvh, 20px) 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    overflow: hidden;
}

body.auth-page .flash-stack {
margin-bottom: -83px;
    width: 90%;
    align-self: anchor-center;}

body.auth-page.auth-booting .app-main,
body.auth-page.auth-booting .flash-stack {
    visibility: hidden;
}

.auth-boot-overlay {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(circle at 12% 14%, rgba(255, 229, 122, 0.42), transparent 18%),
        radial-gradient(circle at 84% 12%, rgba(121, 202, 255, 0.34), transparent 20%),
        linear-gradient(180deg, #8fd9ff 0%, #d8f4ff 18%, #f9fdff 46%, #fff6c8 100%);
    opacity: 1;
    visibility: visible;
    transition: opacity 240ms ease, visibility 0s linear 240ms;
}

body.auth-page.login-page .auth-boot-overlay {
    background: linear-gradient(180deg, rgb(143 217 255 / 0%), rgba(255, 246, 200, 0.18)), url(/static/bgs/login.png) center top / cover repeat-y, linear-gradient(180deg, #8fd9ff00 0%, #d8f4ff00 18%, #f9fdff00 46%, #fff6c800 100%);
}

body.auth-page.register-page .auth-boot-overlay {
    background: linear-gradient(180deg, rgba(143, 217, 255, 0.16), rgb(255 246 200 / 0%)), url(/static/bgs/register.png) center top / cover repeat-y;
}

body.auth-page.register-page.register-role-stage .auth-boot-overlay {
    background: linear-gradient(180deg, rgba(143, 217, 255, 0.08), rgba(255, 255, 255, 0.04)), url(/static/bgs/r_1.png) center top / cover repeat-y;
}

.auth-boot-overlay.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.soft-nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 130;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(14px);
    opacity: 1;
    visibility: visible;
    transition: opacity 240ms ease, visibility 0s linear 240ms;
}

.soft-nav-overlay.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.auth-boot-overlay-card {
    display: grid;
    justify-items: center;
    gap: 50px;
}

.auth-boot-overlay-logo {
    width: min(66vw, 170px);
    height: auto;
    display: block;
    object-fit: contain;
    animation: loginLogoFloat 2.4s ease-in-out infinite;
}

.auth-boot-overlay-spinner {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 3px solid rgba(47, 103, 246, 0.18);
    border-top-color: #2f67f6;
    animation: subscriptionActionSpin 0.7s linear infinite;
    box-shadow: 0 8px 24px rgba(47, 103, 246, 0.12);
}

body.auth-page .auth-shell {
    display: flex;
    width: 100%;
    flex: 1 1 auto;
    min-height: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

body.auth-page .auth-pane-login {
    width: min(100%, 300px);
    padding: 18px 18px 16px;
    border-radius: 32px;
}

body.auth-page.login-page .auth-pane-login {
    /* margin-top: -30px; */
}

.auth-brand {
    display: grid;
    justify-items: center;
    margin: 0 0 28px;
}

.auth-brand-logo {
    width: min(100%, 170px);
    height: auto;
    display: block;
    object-fit: contain;
}

body.auth-page.login-page .auth-brand-logo {
    animation: loginLogoFloat 2.8s ease-in-out infinite;
    will-change: transform;
}

body.auth-page.register-page .auth-brand-logo {
    animation: loginLogoFloat 2.8s ease-in-out infinite;
    will-change: transform;
}

@keyframes loginLogoFloat {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0);
    }
}

body.auth-page .auth-title {
    margin: 0 0 18px;
    font-size: 1.5rem;
    line-height: 0.98;
    color: #ffffff;
}

body.auth-page.register-page .auth-register-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 14px;
}

body.auth-page.register-page .auth-register-title img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    flex: 0 0 auto;
}

body.auth-page .auth-form {
    display: grid;
    gap: 6px;
}

body.auth-page .field {
    margin-bottom: 14px;
}

body.auth-page .field label {
    margin-bottom: 6px;
    font-size: 0.84rem;
    font-weight: 500;
    color: #4d628b;
}

body.auth-page .input {
    min-height: 54px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff, #f6faff);
    color: #1d2a53;
}

body.auth-page .input:focus {
    box-shadow:
        inset 0 0 0 2px rgba(47, 103, 246, 0.28),
        0 0 0 4px rgba(47, 103, 246, 0.08);
}

body.auth-page .input.is-invalid,
body.auth-page .auth-form.has-invalid-credentials .input.is-invalid {
    box-shadow: inset 0 0 0 2px rgba(220, 38, 38, 0.85);
    background: linear-gradient(180deg, #fff7f7, #fff1f1);
}

body.auth-page .input.is-invalid:focus,
body.auth-page .auth-form.has-invalid-credentials .input.is-invalid:focus {
    box-shadow:
        inset 0 0 0 2px rgba(220, 38, 38, 0.9),
        0 0 0 4px rgba(220, 38, 38, 0.12);
}

body.auth-page .auth-submit-btn {
    position: relative;
    min-height: 54px;
    margin-top: 10px;
    border: 0;
    border-radius: 18px;
    background: linear-gradient(135deg, #4a88ff, #2f67f6);
    box-shadow: none;
}

body.auth-page .auth-submit-btn.is-loading {
    pointer-events: none;
    color: transparent !important;
}

body.auth-page .auth-submit-btn.is-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 18px;
    height: 18px;
    margin: auto;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.28);
    border-top-color: #ffffff;
    animation: subscriptionActionSpin 0.75s linear infinite;
}

body.auth-page .auth-alt-btn {
    min-height: 54px;
    margin-top: 0;
    border: 0;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff, #f6faff);
    color: #1d2a53;
    font-weight: 500;
    font-size: 14px;
}

body.auth-page .auth-google-btn {
    position: relative;
    gap: 13px;
}

body.auth-page .auth-google-btn::before {
    content: "";
    width: 28px;
    height: 31px;
    display: block;
    background: url("./icons/langs/codes/google.png") center / contain no-repeat;
    flex: 0 0 auto;
}

body.auth-page .auth-download-btn {
    position: relative;
    gap: 13px;
    margin-top: 10px;
    width: 100% !important;
    display: flex;
}

body.auth-page .auth-download-btn[data-auth-download-reveal] {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    transition: opacity 0.22s ease-out, transform 0.22s ease-out;
    will-change: opacity, transform;
}

body.auth-page .auth-download-btn[data-auth-download-reveal].is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    animation: authDownloadRevealPop 0.62s cubic-bezier(.22, .61, .36, 1) both;
}

body.auth-page .auth-download-btn::before {
    content: "";
    width: 28px;
    height: 28px;
    display: block;
    border-radius: 9px;
    background: url("./icons/ico.png") center / cover no-repeat;
    flex: 0 0 auto;
}

body.auth-page .auth-download-btn[data-auth-download-reveal].is-visible::before {
    transform-origin: center;
    animation: child-balance-coin-pop 0.9s cubic-bezier(.2, .8, .2, 1) 0.08s both;
}

@keyframes authDownloadRevealPop {
    0% {
        transform: translate3d(0, 22px, 0) scale(0.94);
    }
    62% {
        transform: translate3d(0, -1px, 0) scale(1.045);
    }
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
}

body.auth-page .auth-download-btn.is-loading {
    pointer-events: none;
    color: transparent !important;
}

body.auth-page .auth-download-btn.is-loading::before {
    opacity: 0;
}

body.auth-page .auth-download-btn.is-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 18px;
    height: 18px;
    margin: auto;
    border-radius: 999px;
    border: 2px solid rgba(47, 103, 246, 0.18);
    border-top-color: #2f67f6;
    animation: subscriptionActionSpin 0.75s linear infinite;
}

body.auth-page .auth-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0;
    color: #7b8eb7;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

body.auth-page .auth-divider::before,
body.auth-page .auth-divider::after {
    content: "";
    height: 1px;
    flex: 1 1 auto;
    background: rgba(171, 196, 236, 0.55);
}

body.auth-page .auth-link-row {
    margin-top: 10px;
    text-align: center;
}

body.auth-page .auth-link-row a {
    color: #2f67f6;
    font-size: 0.92rem;
    text-decoration: none;
}

body.auth-page .auth-switch {
    text-align: center;
    color: #66799f;
}

body.auth-page .auth-switch a {
    display: block;
    margin-top: 4px;
    color: #2f67f6;
}

body.auth-page .auth-invite-actions {
    display: grid;
    gap: 16px;
    margin: 12px 0 8px;
}

body.auth-page .auth-manual-open-btn {
    margin-top: 0;
}

body.auth-page #registerManualFields[hidden] {
    display: none !important;
}

body.auth-page .auth-register-language-field {
    margin-bottom: 14px;
}

body.auth-page .auth-register-language-field .select-trigger {
    min-height: 54px;
}

body.auth-page .auth-avatar-field .file-picker {
    border: 0;
}

body.auth-page.register-page .auth-pane-login {
    padding-top: 14px;
}

body.auth-page .auth-language-field {
    margin-bottom: 12px;
}

body.auth-page .auth-pane-login .select-trigger,
body.auth-page .auth-pane-login .file-picker,
body.auth-page .auth-pane-login .file-picker-btn,
body.auth-page .auth-pane-login .float-field {
    border-radius: 18px;
}

body.auth-page .auth-pane-login .select-wrap {
    z-index: 1;
}

body.auth-page .auth-pane-login .select-wrap.is-open {
    z-index: 30;
}

body.auth-page .auth-pane-login .select-trigger {
    min-height: 54px;
    border: 0;
    background: linear-gradient(180deg, #ffffff, #f6faff);
    box-shadow: inset 0 0 0 1px rgba(171, 196, 236, 0.45);
    color: #1d2a53;
}

body.auth-page .auth-pane-login .float-field,
body.auth-page .auth-pane-login .file-picker {
    border: 0;
    background: linear-gradient(180deg, #ffffff, #f6faff);
    /* box-shadow: inset 0 0 0 1px rgba(171, 196, 236, 0.45); */
}

body.auth-page .auth-pane-login .float-field {
    padding: 12px 12px 12px;
}

body.auth-page .auth-pane-login .file-picker {
    min-height: 54px;
}

body.auth-page .auth-pane-login .file-picker-btn {
    min-height: 54px;
    border-radius: 18px;
    background: transparent;
    color: #1d2a53;
}

body.auth-page .auth-pane-login .float-head {
    background: linear-gradient(180deg, #ffffff, #f6faff);
    color: #1d2a53;
}

body.auth-page .auth-back-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 30px;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    text-shadow: 0 2px 10px rgba(29, 42, 83, 0.18);
}

body.auth-page .auth-back-link:hover,
body.auth-page .auth-back-link:focus-visible {
    color: #ffffff;
    text-decoration: none;
    opacity: 0.92;
}

body.auth-page .auth-back-link-icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
    flex: 0 0 40px;
}

body.auth-page .auth-avatar-field .float-head {
    top: -2px;
    font-size: 0.92rem;
    gap: 10px;
    padding: 2px 10px;
}

body.auth-page .auth-avatar-field .float-head img {
    width: 16px;
    height: 16px;
}

body.auth-page .auth-pane-login .select-trigger:focus,
body.auth-page .auth-pane-login .select-trigger:hover {
    /* box-shadow:
        inset 0 0 0 2px rgba(47, 103, 246, 0.28),
        0 0 0 4px rgba(47, 103, 246, 0.08); */
}

body.auth-page .auth-pane-login .select-menu {
    border-radius: 20px;
    border: 1px solid rgba(171, 196, 236, 0.38);
    box-shadow: none;
}

body.auth-page .auth-pane-login .select-option {
    min-height: 50px;
}

body.auth-page .auth-avatar-picker {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px;
    border-radius: 22px;
    border: 1px solid rgba(171, 196, 236, 0.36);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(246, 250, 255, 0.92));
}

body.auth-page .auth-avatar-preview {
    position: relative;
    width: 88px;
    height: 88px;
    flex: 0 0 88px;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(180deg, #edf6ff, #ffffff);
    box-shadow: inset 0 0 0 1px rgba(171, 196, 236, 0.45);
}

body.auth-page .auth-avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.auth-page .auth-avatar-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 28, 46, 0.74);
    color: #ffffff;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

body.auth-page .auth-avatar-controls {
    min-width: 0;
    flex: 1 1 auto;
    display: grid;
    gap: 10px;
    align-content: start;
}

body.auth-page .auth-avatar-input {
    display: none;
}

body.auth-page .auth-avatar-trigger {
    min-height: 44px;
    width: 100%;
    border-radius: 16px;
}

body.auth-page .auth-avatar-name {
    min-width: 0;
    color: #66799f;
    font-size: 0.84rem;
    line-height: 1.45;
    word-break: break-word;
}

body.auth-page .auth-google-profile-card {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 54px;
}

body.auth-page.register-page .auth-google-profile {
    margin-top: 16px;
}

body.auth-page.register-page .auth-google-avatar-override {
    margin-top: 14px;
}

body.auth-page .auth-google-profile-avatar {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    object-fit: cover;
    box-shadow: inset 0 0 0 1px rgba(171, 196, 236, 0.45);
}

body.auth-page .auth-google-profile-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
    color: #1d2a53;
}

body.auth-page .auth-google-profile-copy strong {
    font-size: 0.98rem;
}

body.auth-page .auth-google-profile-copy span {
    color: #66799f;
    font-size: 0.84rem;
    word-break: break-word;
}

body.auth-page .auth-invite-card {
    margin-bottom: 12px;
}

body.auth-page .auth-invite-card-body {
    display: grid;
    gap: 12px;
}

body.auth-page .auth-invite-profile {
    display: flex;
    align-items: center;
    gap: 12px;
}

body.auth-page .auth-invite-avatar {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: linear-gradient(180deg, #edf5ff, #ffffff);
    box-shadow: inset 0 0 0 1px rgba(171, 196, 236, 0.45);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #24417e;
    font-weight: 900;
    font-size: 1rem;
}

body.auth-page .auth-invite-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.auth-page .auth-invite-copy {
    display: grid;
    gap: 4px;
    color: #1d2a53;
}

body.auth-page .auth-invite-copy strong {
    font-size: 0.98rem;
}

body.auth-page .auth-invite-copy span,
body.auth-page .auth-invite-stats {
    color: #66799f;
    font-size: 0.84rem;
    line-height: 1.45;
}

body.auth-page .auth-note {
    margin: 0 0 16px;
    text-align: center;
    color: #4d628b;
    line-height: 1.6;
}

body.auth-page .auth-notice-title {
    text-align: center;
    margin-bottom: 12px;
}

body.auth-page.register-page .auth-password-field {
    margin-bottom: 30px;
}

body.auth-page .auth-password-toggle-field .input {
    padding-right: 56px;
}

body.auth-page .auth-password-toggle {
    position: absolute;
    right: 15px;
    top: calc(100% - 42px);
    width: 24px;
    height: 30px;
    border: 0;
    padding: 0;
    border-radius: 999px;
    background: transparent center / 18px 18px no-repeat;
    background-image: url(/static/icons/crossed-eye.png);
    cursor: pointer;
    z-index: 2;
    transition: transform 0.18s ease, opacity 0.18s ease;
    -webkit-tap-highlight-color: transparent;
}

body.auth-page .auth-password-toggle.is-visible {
    background-image: url("/static/icons/eye.png");
}

body.auth-page .auth-password-toggle:hover,
body.auth-page .auth-password-toggle:focus-visible {
    opacity: 1;
    transform: scale(1.06);
    outline: none;
}

body.auth-page .auth-password-toggle:active {
    transform: scale(0.94);
}

body.auth-page.register-page .float-field {
    margin-bottom: 12px;
}

@media (max-width: 560px) {
    body.auth-page.login-page,
    body.auth-page.register-page {
        background-position: center top, center top, center top;
        background-size: auto, auto 100dvh, auto;
        background-repeat: no-repeat, no-repeat, no-repeat;
    }

    body.auth-page .app-main {
        padding: 12px 16px;
    }

    body.auth-page .auth-pane-login {
        width: min(100%, 250px);
    }

    .auth-brand {
        margin-bottom: 30px;
    }

    body.auth-page .auth-avatar-picker {
        padding: 12px;
    }
}

.field,
.float-field {
    position: relative;
    margin-bottom: 15px;
    
}

.field label,
.float-head {
    align-items: center;
    gap: 15px;
    color: var(--text);
    font-weight: 500;
    white-space: nowrap;
}

.field label {
    margin-bottom: 7px;
}

.field-help {
    margin-top: 6px;
    color: #66799f;
    font-size: 0.84rem;
    line-height: 1.4;
}

.float-field {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    padding: 18px 12px 12px;
}

.float-head {
    position: absolute;
    top: 0;
    left: 12px;
    transform: translateY(-50%);
    padding: 0 8px;
    background: var(--surface);
    z-index: 1;
    pointer-events: none;
    padding: 3px 10px;
    /* border: 1px solid #246bfe; */
    border-radius: 9px;
    
}

.input,
.textarea,
.select-trigger {
    width: 100%;
    min-height: 48px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #ffffff;
    color: var(--text);
    padding: 0 13px;
    outline: none;
}

.input,
.textarea {
    display: block;
}

.textarea {
    padding: 12px 13px;
    resize: vertical;
    min-height: 92px;
}

.input:focus,
.textarea:focus,
.select-trigger:focus {
    border-color: rgba(36, 107, 254, 0.68);
    box-shadow: 0 0 0 3px rgba(36, 107, 254, 0.12);
}

.select-wrap {
    position: relative;
}

.select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.select-trigger-value {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.select-trigger-value img {
    width: 25px;
    height: 25px;
    object-fit: contain;
    flex: 0 0 auto;
}

.select-trigger-value .language-logo,
.select-option .language-logo {
    width: auto;
    height: 18px;
    max-width: 78px;
    object-fit: contain;
    flex: 0 0 auto;
}

.select-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    z-index: 10;
    max-height: min(337px, calc(100dvh - 160px));
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: var(--shadow);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
}

.select-menu[hidden] {
    display: none;
}

.select-option {
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    min-height: 48px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    cursor: pointer;
    font-weight: 700;
}

.select-option:last-child {
    border-bottom: 0;
}

.select-option:hover,
.select-option.is-active {
    background: #5196ff30;
}

.select-option img:not(.language-logo),
.float-head img {
    width: 25px;
    height: 25px;
    object-fit: contain;
}

.btn {
    min-height: 52px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    font-weight: 800;
    cursor: pointer;
}

.btn:hover,
.btn:focus {
    background: var(--surface-soft);
    border-color: var(--border-strong);
}

.btn.primary {
    border-color: var(--blue);
    background: var(--blue);
    color: #ffffff;
}

.btn.danger {
    border-color: rgba(220, 38, 38, 0.24);
    background: rgba(220, 38, 38, 0.08);
    color: var(--red);
}

.btn.green {
    border-color: rgba(22, 163, 74, 0.24);
    background: rgba(22, 163, 74, 0.08);
    color: var(--green);
}

.btn.full {
    width: 100%;
}

.page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 18px;
}

.page-title {
    margin: 0;
    font-size: clamp(1.75rem, 4vw, 2.8rem);
    line-height: 1.05;
}

.page-subtitle {
    margin: 8px 0 0;
    color: var(--muted);
}

body.parent-theme {
    background: #dff4ff url('/static/bgs/1.png') center top / 100% auto repeat-y;
}

body.parent-theme .app-topbar {
    background: transparent;
    backdrop-filter: none;
}

body.parent-theme .app-topbar-inner {
    width: min(430px, 100%);
    min-height: 88px;
    margin: 16px auto 0;
    padding: 12px 16px;
    position: relative;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.88));
    overflow: hidden;
}

body.parent-theme .app-main {
    width: min(430px, 100%);
    padding-top: 122px;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: calc(var(--nav-height) + 60px);
}

body.parent-theme .topbar-profile {
    position: relative;
    z-index: 1;
    gap: 14px;
}

body.parent-theme .topbar-profile .avatar {
    width: 58px;
    height: 58px;
    border-radius: 22px;
    border: 4px solid rgba(255, 255, 255, 0.95);
    background: #ffffff;
    flex-basis: 58px;
}

body.parent-theme .topbar-profile-name {
    font-size: 0.98rem;
    font-weight: 900;
    color: #1e2b56;
    max-width: 160px;
}

body.parent-theme .top-actions {
    position: relative;
    z-index: 1;
    gap: 12px;
}

body.parent-theme .top-actions .icon-btn {
    width: 54px;
    height: 54px;
    border-radius: 20px;
    border-color: rgba(255, 255, 255, 0.82);
    background: rgba(255, 255, 255, 0.94);
}

body.parent-theme .top-actions .icon-btn img {
    width: 35px;
    height: 35px;
}

body.parent-theme .badge-dot {
    top: 9px;
    right: 9px;
    width: 11px;
    height: 11px;
    background: #ff5f78;
}

body.parent-theme .bottom-nav {
    background: transparent;
    padding: 0 0 10px;
}

body.parent-theme .bottom-nav-inner.parent-nav {
    width: min(430px, 100%);
    margin-bottom: 8px;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
    gap: 6px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.96);
}

body.parent-theme .nav-link {
    flex-basis: 66px;
    min-width: 66px;
    min-height: 72px;
    /* gap: 6px; */
    font-size: 0.72rem;
    border-radius: 17px;
}
body.parent-theme .nav-link img {
    width: 42px;
    height: 42px;
    opacity: 1;
}

body.parent-theme .nav-link.is-active {
    border-color: rgb(36 107 254 / 0%);
    color: var(--blue);
    background: radial-gradient(#ffffff, rgb(180 205 255 / 35%));
}

body.parent-theme .flash {
    border-radius: 24px;
}

body.parent-page-settings .flash {
    border-radius: 30px;
    padding: 18px 22px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(171, 196, 236, 0.28);
    font-size: 1rem;
    line-height: 1.45;
    font-weight: 500;
}

body.parent-page-settings .flash.success {
    border-color: rgba(91, 207, 107, 0.28);
    background: #ffffff;
    color: #314773;
}

body.parent-page-settings .flash.error {
    border-color: rgba(244, 114, 114, 0.28);
    background: #ffffff;
    color: #b91c1c;
}

body.parent-page-settings .flash.info {
    border-color: rgba(96, 165, 250, 0.28);
    background: #ffffff;
    color: #1d4ed8;
}

body.parent-theme .notification-backdrop {
    background: rgba(56, 107, 164, 0.2);
    backdrop-filter: blur(8px);
}

body.parent-theme .notification-sheet {
    left: 50%;
    right: auto;
    top: 104px;
    width: min(430px, calc(100vw - 24px));
    height: auto;
    max-height: min(78vh, 700px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 0;
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 252, 255, 0.96));
    transform: translate(-50%, -14px) scale(0.98);
}

body.parent-theme .notification-sheet::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 50%;
    width: 58px;
    height: 6px;
    border-radius: 999px;
    background: rgba(138, 168, 214, 0.44);
    transform: translateX(-50%);
}

body.parent-theme .notification-modal.show .notification-sheet {
    transform: translate(-50%, 0) scale(1);
}

body.parent-theme .notification-head {
    min-height: 74px;
    padding: 18px 18px 12px;
    border-bottom: 0;
}

body.parent-theme .notification-list {
    max-height: none;
    flex: 0 1 auto;
    overflow-y: auto;
    display: grid;
}

.parent-page {
    display: grid;
    gap: 18px;
    min-width: 0;
    max-width: 100%;
}

.panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.panel-head-copy {
    display: grid;
    gap: 17px;
}

.panel-kicker {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(36, 107, 254, 0.08);
    color: #2451c6;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.panel-title {
    margin: 0;
    font-size: clamp(1.3rem, 2vw, 1.75rem);
    line-height: 1.08;
}

.panel-subtitle {
    margin: 0;
    max-width: 64ch;
    color: var(--muted);
    line-height: 1.55;
    /* margin-bottom: 20px; */
}

.settings-toggle {
    width: 100%;
    min-height: 78px;
    margin: 0 0 20px;
    padding: 16px 18px;
    border-radius: 24px;
    /* background: linear-gradient(180deg, #ffffff, #f8fbff); */
    /* box-shadow: inset 0 0 0 1px rgba(171, 196, 236, 0.34); */
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    white-space: normal;
}

.settings-toggle-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.settings-toggle-ui {
    position: relative;
    width: 58px;
    height: 34px;
    border-radius: 999px;
    background: #d9e6fb;
    transition: background 0.18s ease;
}

.settings-toggle-ui::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 6px 14px rgba(36, 56, 102, 0.16);
    transition: transform 0.18s ease;
}

.settings-toggle-input:checked + .settings-toggle-ui {
    background: linear-gradient(135deg, #4a88ff, #2f67f6);
}

.settings-toggle-input:checked + .settings-toggle-ui::after {
    transform: translateX(24px);
}

.settings-toggle-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.settings-toggle-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #1d2a53;
    /* font-weight: 900; */
    white-space: normal;
}

.settings-toggle-title-icon {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    object-fit: contain;
}

.settings-toggle-text {
    color: #66799f;
    /* font-size: 0.92rem; */
    /* line-height: 1.45; */
    white-space: normal;
}

.settings-toggle-details {
    margin: -4px 0 16px;
    /* background: rgba(248, 251, 255, 0.92); */
}

.settings-toggle-details[hidden] {
    display: none;
}

.settings-toggle-details-head {
    display: grid;
    gap: 4px;
    padding: 16px 0 12px;
}

.settings-toggle-details-head strong {
    color: #1d2a53;
    font-size: 1rem;
}

.settings-toggle-details-head span {
    color: #66799f;
    font-size: 0.9rem;
    line-height: 1.4;
}

.settings-check-grid {
    display: grid;
    gap: 10px;
    padding-bottom: 16px;
}

.settings-gadget-options-grid {
    display: grid;
    gap: 12px;
    padding-bottom: 16px;
}

.settings-gadget-option {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: inset 0 0 0 1px rgba(171, 196, 236, 0.22);
}

.settings-gadget-option-main {
    min-height: auto;
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 12px;
    cursor: pointer;
    padding-top: 0;
}

.settings-gadget-option-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
}

.settings-gadget-option-fields .settings-inline-field {
    min-width: 0;
}

.settings-gadget-option-fields .settings-inline-label {
    display: block;
    margin-bottom: 8px;
    line-height: 1.15;
}

.settings-gadget-option-fields .settings-inline-help {
    margin-top: 8px;
}

.settings-gadget-option-fields .settings-inline-input {
    width: 100%;
    min-width: 0;
}

.settings-plan-grid {
    /* grid-template-columns: repeat(2, minmax(0, 1fr)); */
    gap: 12px;
    align-items: start;
}

.settings-card-pack-grid {
    grid-template-columns: minmax(0, 1fr);
}

.settings-card-pack-card {
    grid-template-columns: minmax(0, 1fr) minmax(170px, 220px);
    align-items: center;
    column-gap: 18px;
    row-gap: 0;
    padding: 14px 16px;
}

.settings-card-pack-card .settings-check-card {
    grid-column: 1;
    min-height: auto;
    padding: 11px 8px;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    align-self: center;
}

.settings-card-pack-card .settings-plan-fields {
    grid-column: 2;
    grid-template-columns: minmax(0, 1fr);
    align-self: center;
    gap: 0;
}

.settings-card-pack-card .settings-check-copy {
    gap: 6px;
}

.settings-card-pack-card .settings-inline-label {
    margin-bottom: 8px;
}

.settings-plan-card {
    display: grid;
    gap: 10px;
    padding: 10px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: inset 0 0 0 1px rgba(171, 196, 236, 0.22);
    align-content: start;
}

.settings-check-card {
    min-height: 68px;
    padding: 12px 14px;
    border-radius: 20px;
    background: #ffffff;
    /* box-shadow: inset 0 0 0 1px rgba(171, 196, 236, 0.34); */
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.settings-check-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.settings-check-ui {
    width: 27px;
    height: 27px;
    border-radius: 8px;
    background: #edf4ff;
    box-shadow: inset 0 0 0 2px rgba(171, 196, 236, 0.58);
    position: relative;
}

.settings-check-input:checked + .settings-check-ui {
    background: linear-gradient(135deg, #4a88ff, #2f67f6);
    box-shadow: none;
}

.settings-check-input:checked + .settings-check-ui::after {
    content: "";
    position: absolute;
    left: 9px;
    top: 5px;
    width: 7px;
    height: 12px;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    transform: rotate(42deg);
}

.settings-check-copy {
    display: grid;
    gap: 4px;
}

.settings-check-title {
    color: #1d2a53;
    font-weight: 900;
}

.settings-check-text {
    color: #66799f;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.settings-plan-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

body.parent-page-settings .settings-plan-grid .settings-plan-card:has(.settings-plan-fields > .settings-inline-field:only-child) .settings-plan-fields {
    grid-template-columns: minmax(0, 1fr);
}

.settings-inline-field {
    margin: 0;
    width: auto;
    min-width: 0;
}

#cardPacksEmptyRateField {
    width: 100%;
    margin: 0;
}

.settings-card-pack-empty-option {
    display: grid;
    gap: 0;
}

.settings-card-pack-empty-option .settings-toggle-sub-main {
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.settings-card-pack-empty-option #cardPacksEmptyRateField {
    margin-top: 10px;
    padding-top: 14px;
    border-top: 1px solid rgba(171, 196, 236, 0.28);
}

.settings-card-pack-empty-option #cardPacksEmptyRateField label {
    display: block;
}

.settings-inline-field.is-hidden {
    display: none;
}

.settings-inline-field .settings-inline-help {
    display: block;
    margin-top: 6px;
}

@media (max-width: 760px) {
    .settings-gadget-option {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .settings-gadget-option-main {
        padding-top: 0;
    }

    .settings-gadget-option-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .settings-card-pack-card {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 10px;
    }

    .settings-card-pack-card .settings-check-card,
    .settings-card-pack-card .settings-plan-fields {
        grid-column: 1;
    }

    .settings-card-pack-card .settings-plan-fields {
        grid-template-columns: minmax(0, 1fr);
    }
}

.settings-inline-label {
    display: inline-flex;
    margin-bottom: 6px;
    color: #5a7099;
    font-size: 0.82rem;
    font-weight: 800;
}

.settings-inline-input {
    min-height: 44px;
    border-radius: 16px;
}

.settings-inline-help {
    display: block;
    margin-top: 6px;
    color: #7c8fb4;
    font-size: 0.8rem;
}

.settings-toggle-sub {
    margin: 4px 0 14px;
    padding: 14px 16px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: inset 0 0 0 1px rgba(171, 196, 236, 0.2);
}

.family-link-panel {
    display: grid;
    gap: 18px;
    padding: 22px 20px;
    background:
        radial-gradient(circle at top right, rgba(74, 136, 255, 0.14), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(245, 250, 255, 0.98));
}

.settings-tabs-carousel {
    position: relative;
    width: 100%;
    min-height: 50px;
    overflow: hidden;
}

.settings-tabs-nav {
    display: flex;
    align-items: stretch;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-inline: 44px;
    padding-bottom: 4px;
    padding-left: 0;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-top: 4px !important;
}

.settings-tabs-nav::-webkit-scrollbar {
    display: none;
}

.settings-tabs-carousel.is-static .settings-tabs-scroll-btn {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.settings-tabs-scroll-btn {
    position: absolute;
    top: 50%;
    z-index: 3;
    width: 50px;
    height: 50px;
    padding: 0;
    border: 0;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.16s ease;
    -webkit-tap-highlight-color: transparent;
    transform: translateY(-50%);
}

.settings-tabs-scroll-btn img {
    width: 50px;
    height: 50px;
    display: block;
    object-fit: contain;
}

.settings-tabs-scroll-btn.tap-bounce.is-tapping {
    animation: none;
}

.settings-tabs-scroll-btn.tap-bounce.is-tapping img {
    animation: nav-icon-tap 220ms ease-out;
}

.settings-tabs-scroll-btn:disabled {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.settings-tabs-scroll-btn.prev {
    left: 0;
}

.settings-tabs-scroll-btn.next {
    right: 0;
}

.settings-tab-btn {
    flex: 0 0 auto;
    min-height: 50px;
    padding: 10px 16px !important;
    border: 0;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 249, 255, 0.98));
    box-shadow: inset 0 0 0 1px rgba(171, 196, 236, 0.26);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #5d7198;
    font-size: 0.82rem;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

.settings-tab-btn img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex: 0 0 auto;
}

body.parent-page-settings [data-settings-tab-panel] .panel-top-badge img.is-settings-tab-pop {
    transform-origin: center;
    animation: child-balance-coin-pop 0.56s cubic-bezier(.2, .8, .2, 1);
}

.settings-tab-btn.is-active {
    background: linear-gradient(135deg, #4a88ff, #2f67f6);
    box-shadow: none;
    color: #ffffff;
}

.settings-tabs-layout {
    grid-template-columns: minmax(0, 1fr);
}

.settings-tabs-layout > [data-settings-tab-panel][hidden] {
    display: none !important;
}

.family-link-head {
    display: grid;
    gap: 14px;
}

.family-link-switch {
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    align-self: start;
    justify-self: end;
    padding: 6px;
    border-radius: 20px;
    background: rgba(233, 241, 255, 0.92);
    box-shadow: inset 0 0 0 1px rgba(171, 196, 236, 0.22);
    width: 100%;
}

.family-link-switch-btn {
    min-width: 118px;
    min-height: 44px;
    padding: 0 14px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: #60749a;
    font-size: 0.88rem;
    font-weight: 900;
    cursor: pointer;
}

.family-link-switch-btn.is-active {
    background: linear-gradient(135deg, #4a88ff, #2f67f6);
    color: #ffffff;
}

.family-link-form {
    display: grid;
    gap: 14px;
}

.family-link-form-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 14px;
    align-items: stretch;
}

.family-link-code-input {
    height: 52px !important;
    border-radius: 18px;
    align-self: end;
}

.parent-referral-panel {
    display: grid;
    gap: 16px;
}

.parent-referral-bonus-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 20px;
    background:#fbfbfb;
    box-shadow: inset 0 0 0 1px rgba(239, 193, 70, 0.34);
}

.parent-referral-bonus-card img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    flex: 0 0 auto;
}

.parent-referral-bonus-copy {
    display: grid;
    gap: 4px;
}

.parent-referral-bonus-copy strong {
    color: #946200;
    font-size: 0.95rem;
    line-height: 1.18;
}

.parent-referral-bonus-copy span {
    color: #a1711f;
    font-size: 0.84rem;
    line-height: 1.32;
}

.parent-referral-switch {
    justify-self: start;
}

.parent-referral-view[hidden] {
    display: none !important;
}

.parent-referral-card {
    padding: 12px 10px 8px;
}

.parent-referral-card .friend-invite-copy {
    margin-left: 6px;
}

.parent-referral-link-row .input[readonly] {
    color: #37518b;
    font-size: 0.9rem;
}

.parent-referral-actions-row {
    grid-template-columns: minmax(0, 1fr) 60px;
    align-items: stretch;
}

.parent-referral-actions-row .family-link-submit,
.parent-referral-share-btn {
    background: linear-gradient(135deg, #eaf2ff, #d8e7ff);
    color: #37518b;
    box-shadow: inset 0 0 0 1px rgba(171, 196, 236, 0.32) !important;
    border-radius: 18px;
    border: 0;
    outline: none;
}

.parent-referral-actions-row .family-link-submit:hover,
.parent-referral-actions-row .family-link-submit:focus,
.parent-referral-share-btn:hover,
.parent-referral-share-btn:focus {
    background: linear-gradient(135deg, #dfeaff, #cfe1ff);
    color: #30497f;
    box-shadow: inset 0 0 0 1px rgba(171, 196, 236, 0.38);
    outline: none;
}

.parent-referral-share-btn {
    min-height: 52px;
    width: 60px;
    min-width: 60px;
    justify-self: stretch;
    align-self: stretch;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.parent-referral-share-btn img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    display: block;
}

.parent-referral-share-btn:hover,
.parent-referral-share-btn:focus {
    background: linear-gradient(135deg, #dfeaff, #cfe1ff);
}

.family-link-submit {
    min-height: 52px;
    border-radius: 18px;
}

.family-link-form.is-disconnect .family-link-submit {
    border-color: #ef4444;
    background: linear-gradient(135deg, #ff7b7b, #ef4444);
    color: white;
}

.family-link-form.is-disconnect .family-link-submit:hover,
.family-link-form.is-disconnect .family-link-submit:focus {
    border-color: #dc2626;
    background: linear-gradient(135deg, #ff6b6b, #dc2626);
}

.family-link-subtitle {
    max-width: 540px;
}

.panel-chip-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.billing-hero-panel {
    display: grid;
    gap: 0;
    /* margin-bottom: 18px; */
    padding: 20px 16px 18px;
    border-radius: 28px;
    background:
        radial-gradient(circle at top left, rgba(20, 197, 255, 0.16), transparent 42%),
        radial-gradient(circle at top right, rgba(47, 103, 246, 0.16), transparent 36%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 249, 255, 0.98));
}

.billing-hero-panel.is-vip-only {
    gap: 0;
    margin-bottom: 18px;
}

.billing-hero-head {
    display: grid;
    gap: 18px;
    margin-bottom: 15px;
}

.subscription-cycle-switch {
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    align-self: start;
    width: 100%;
    max-width: 100%;
    padding: 6px;
    border-radius: 20px;
    background: rgba(233, 241, 255, 0.92);
    box-shadow: inset 0 0 0 1px rgba(171, 196, 236, 0.22);
    margin-top: 5px;
}

.subscription-cycle-option {
    min-width: 110px;
    padding: 10px 14px;
    border-radius: 14px;
    color: #60749a;
    font-size: 0.88rem;
    font-weight: 900;
    text-align: center;
    text-decoration: none;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.subscription-cycle-option.is-active {
    background: linear-gradient(135deg, #4a88ff, #2f67f6) !important;
    color: #ffffff;
}

.subscription-cycle-label {
    line-height: 1;
}

.subscription-cycle-deal {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.subscription-cycle-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: rgba(255, 123, 65, 0.16);
    color: #f05a28;
    font-size: 0.68rem;
    font-weight: 950;
    line-height: 1;
}

.subscription-cycle-option.is-active .subscription-cycle-badge {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

.subscription-cycle-badge img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex: 0 0 auto;
}

.subscription-family-note {
    margin: 15px 10px;
    max-width: 360px;
    color: #60749a;
    font-size: 0.88rem;
    line-height: 1.5;
}

.legal-link-row {
    display: grid;
    gap: 12px;
}

.legal-link-card {
display: flex;
    align-items: center;
    justify-content: center;
    /* min-height: 54px; */
    padding: 7px 13px;
    border-radius: 18px;
    text-decoration: none;
    font-weight: 800;
    color: #2a4e93;
    /* background: linear-gradient(135deg, rgba(232, 240, 255, 0.98), rgba(255, 255, 255, 0.98)); */
    text-align: center;
}

.legal-link-card:hover,
.legal-link-card:focus {
    transform: translateY(-1px);
    color: #ffffff;
    background: linear-gradient(135deg, #4a88ff, #2f67f6);
}

.legal-links-panel {
    display: none !important;
    gap: 0;
    padding-top: 14px;
    padding-bottom: 14px;
}

.legal-page-shell {
    width: min(880px, 100%);
    margin: 0 auto;
}

.legal-page-card {
    display: grid;
    gap: 22px;
}

.legal-page-hero {
    display: grid;
    gap: 10px;
}

.legal-page-sections {
    display: grid;
    gap: 16px;
}

.legal-page-section {
    display: grid;
    gap: 10px;
    padding: 18px 18px 16px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: inset 0 0 0 1px rgba(171, 196, 236, 0.24);
}

.legal-page-section h2 {
    margin: 0;
    color: #163167;
    font-size: 1rem;
    line-height: 1.25;
}

.legal-page-section p {
    margin: 0;
    color: #5f7298;
    line-height: 1.65;
}

.legal-page-list {
    margin: 0;
    padding-left: 20px;
    color: #5f7298;
    line-height: 1.65;
}

.legal-page-list li + li {
    margin-top: 8px;
}

.billing-hero-copy {
    display: grid;
    gap: 0;
    max-width: 680px;
}

.billing-status-card {
    min-width: 0;
    width: 100%;
    display: grid;
    gap: 4px;
    padding: 13px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: inset 0 0 0 1px rgba(171, 196, 236, 0.24);
}

.billing-status-card.is-active {
    gap: 10px;
}

.billing-status-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.billing-status-main {
    display: flex;
    align-items: center;
    gap: 15px;
    min-width: 0;
}

.billing-status-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.billing-status-copy-compact {
    gap: 2px;
}

.billing-status-icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
    flex: 0 0 auto;
}

.billing-status-card strong {
    color: #11214b;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.12;
}

.billing-status-card span {
    font-size: 0.9rem;
    line-height: 1.32;
}

.billing-status-compact-label {
    color: #5870a0;
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.2;
}

.billing-status-meta {
    display: block;
}

.billing-status-meta-main {
    display: grid;
    gap: 1px;
    white-space: normal;
    font-size: 0.84rem;
    line-height: 1.28;
}

.billing-status-lines {
    display: grid;
    gap: 3px;
}

.billing-status-line {
    display: grid;
    gap: 1px;
}

.billing-status-line-label {
    color: #5870a0;
    font-size: 0.74rem;
    line-height: 1.18;
    text-transform: none;
}

.billing-status-line-value {
    color: #243c70;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.24;
}

.billing-status-meta-side {
    text-align: left;
    white-space: normal;
    font-size: 0.82rem;
    line-height: 1.22;
}

.billing-status-test-form {
    flex: 0 0 auto;
}

.billing-status-test-btn {
    width: 34px;
    height: 34px;
    padding: 0;
}

.billing-status-test-btn img {
    width: 18px;
    height: 18px;
}

.billing-status-menu-btn {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.86);
    color: #4f6694;
    box-shadow: inset 0 0 0 1px rgba(171, 196, 236, 0.24);
}

.billing-status-menu-btn span {
    display: block;
    transform: translateY(-4px);
    font-size: 1.15rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    line-height: 1;
    color: black;
}

.billing-status-card.is-active {
    background: linear-gradient(135deg, rgba(32, 196, 127, 0.16), rgba(255, 255, 255, 0.96));
}

.billing-status-card.is-active.is-plan-start {
    background: linear-gradient(135deg, rgba(91, 207, 107, 0.18), rgba(255, 255, 255, 0.96));
    box-shadow: inset 0 0 0 1px rgba(91, 207, 107, 0.24);
}

.billing-status-card.is-active.is-plan-start strong,
.billing-status-card.is-active.is-plan-start .billing-status-meta {
    color: #23913b;
}

.billing-status-card.is-active.is-plan-smart {
    background: linear-gradient(135deg, rgba(74, 136, 255, 0.18), rgba(255, 255, 255, 0.96));
    box-shadow: inset 0 0 0 1px rgba(74, 136, 255, 0.24);
}

.billing-status-card.is-active.is-plan-smart strong,
.billing-status-card.is-active.is-plan-smart .billing-status-meta {
    color: #2f67f6;
}

.billing-status-card.is-active.is-plan-pro {
    background: linear-gradient(135deg, rgba(181, 108, 255, 0.18), rgba(255, 255, 255, 0.96));
}

.billing-status-card.is-active.is-plan-pro strong,
.billing-status-card.is-active.is-plan-pro .billing-status-meta {
    color: #7a4ef3;
}

.billing-status-card.is-active.is-vip {
    background: transparent;
    box-shadow: inset 0 0 0 1px rgba(236, 189, 47, 0);
}

.billing-status-card.is-active.is-vip strong,
.billing-status-card.is-active.is-vip .billing-status-meta,
.billing-status-card.is-active.is-vip .billing-status-copy span {
    color: #b57702;
}

.billing-status-card.is-active.is-trial {
    background: linear-gradient(135deg, rgba(255, 218, 94, 0.26), rgba(255, 255, 255, 0.98));
    box-shadow: inset 0 0 0 1px rgba(255, 195, 60, 0.28);
}

.billing-status-card.is-active.is-trial strong,
.billing-status-card.is-active.is-trial .billing-status-meta {
    color: #c27806;
}

.billing-status-card.is-active.is-referral-active {
    background: linear-gradient(135deg, rgba(255, 205, 79, 0.24), rgba(255, 255, 255, 0.98));
    box-shadow: inset 0 0 0 1px rgba(239, 175, 38, 0.3);
}

.billing-status-card.is-active.is-referral-active strong,
.billing-status-card.is-active.is-referral-active .billing-status-meta,
.billing-status-card.is-active.is-referral-active .billing-status-copy span {
    color: #b86e02;
}

.billing-status-card.is-active.is-trial.is-trial-day-1 {
    background: linear-gradient(135deg, rgba(122, 227, 66, 0.24), rgba(255, 255, 255, 0.98));
    box-shadow: inset 0 0 0 1px rgba(88, 198, 45, 0.3);
}

.billing-status-card.is-active.is-trial.is-trial-day-1 strong,
.billing-status-card.is-active.is-trial.is-trial-day-1 .billing-status-meta,
.billing-status-card.is-active.is-trial.is-trial-day-1 .billing-status-copy span {
    color: #4f9a18;
}

.billing-status-card.is-active.is-trial.is-trial-day-2 {
    background: linear-gradient(135deg, rgba(92, 155, 255, 0.24), rgba(255, 255, 255, 0.98));
    box-shadow: inset 0 0 0 1px rgba(54, 114, 233, 0.3);
}

.billing-status-card.is-active.is-trial.is-trial-day-2 strong,
.billing-status-card.is-active.is-trial.is-trial-day-2 .billing-status-meta,
.billing-status-card.is-active.is-trial.is-trial-day-2 .billing-status-copy span {
    color: #2d68d8;
}

.billing-status-card.is-active.is-trial.is-trial-day-3 {
    background: linear-gradient(135deg, rgba(255, 108, 170, 0.24), rgba(255, 255, 255, 0.98));
    box-shadow: inset 0 0 0 1px rgba(237, 62, 137, 0.3);
}

.billing-status-card.is-active.is-trial.is-trial-day-3 strong,
.billing-status-card.is-active.is-trial.is-trial-day-3 .billing-status-meta,
.billing-status-card.is-active.is-trial.is-trial-day-3 .billing-status-copy span {
    color: #d63d86;
}

.billing-status-card.is-active.is-trial.is-trial-day-4 {
    background: linear-gradient(135deg, rgba(179, 106, 255, 0.24), rgba(255, 255, 255, 0.98));
    box-shadow: inset 0 0 0 1px rgba(143, 67, 236, 0.3);
}

.billing-status-card.is-active.is-trial.is-trial-day-4 strong,
.billing-status-card.is-active.is-trial.is-trial-day-4 .billing-status-meta,
.billing-status-card.is-active.is-trial.is-trial-day-4 .billing-status-copy span {
    color: #8a3fe0;
}

.billing-status-card.is-active.is-trial.is-trial-day-5 {
    background: linear-gradient(135deg, rgba(255, 164, 77, 0.24), rgba(255, 255, 255, 0.98));
    box-shadow: inset 0 0 0 1px rgba(241, 126, 27, 0.3);
}

.billing-status-card.is-active.is-trial.is-trial-day-5 strong,
.billing-status-card.is-active.is-trial.is-trial-day-5 .billing-status-meta,
.billing-status-card.is-active.is-trial.is-trial-day-5 .billing-status-copy span {
    color: #d97514;
}

.billing-status-card.is-active.is-trial.is-trial-day-6 {
    background: linear-gradient(135deg, rgba(92, 224, 218, 0.24), rgba(255, 255, 255, 0.98));
    box-shadow: inset 0 0 0 1px rgba(31, 184, 179, 0.3);
}

.billing-status-card.is-active.is-trial.is-trial-day-6 strong,
.billing-status-card.is-active.is-trial.is-trial-day-6 .billing-status-meta,
.billing-status-card.is-active.is-trial.is-trial-day-6 .billing-status-copy span {
    color: #179d99;
}

.billing-status-card.is-active.is-trial.is-trial-day-7 {
    background: linear-gradient(135deg, rgba(255, 220, 112, 0.28), rgba(255, 255, 255, 0.98));
    box-shadow: inset 0 0 0 1px rgba(241, 184, 34, 0.32);
}

.billing-status-card.is-active.is-trial.is-trial-day-7 strong,
.billing-status-card.is-active.is-trial.is-trial-day-7 .billing-status-meta,
.billing-status-card.is-active.is-trial.is-trial-day-7 .billing-status-copy span {
    color: #c67c08;
}

.billing-status-card.is-empty {
    padding: 14px 18px;
    background: linear-gradient(180deg, rgba(241, 246, 255, 0.98), rgba(230, 238, 255, 0.95));
    box-shadow: inset 0 0 0 1px rgba(184, 202, 236, 0.4);
}

.billing-status-card.is-empty .billing-status-main {
    align-items: center;
    gap: 12px;
}

.billing-status-card.is-empty .billing-status-icon {
    width: 36px;
    height: 36px;
}

.billing-status-card.is-empty strong {
    color: #37538f;
    font-size: 0.98rem;
    line-height: 1.16;
}

.billing-status-card.is-empty span {
    color: #5d74a3;
    font-size: 0.83rem;
    line-height: 1.24;
}

.billing-status-card.is-bonus-notice {
    padding: 14px 18px;
    /* gap: 14px; */
    background: aliceblue;
    box-shadow: inset 0 0 0 1px rgba(184, 202, 236, 0.4);
}

.billing-status-card.is-bonus-notice .billing-status-main-bonus-notice {
    align-items: center;
    gap: 12px;
}

.billing-status-card.is-bonus-notice .billing-status-icon {
    width: 38px;
    height: 38px;
}

.billing-status-card.is-bonus-notice strong {
    color: #37538f;
    font-size: 0.98rem;
    line-height: 1.16;
}

.billing-status-card.is-bonus-notice span {
    font-size: 0.83rem;
    line-height: 1.24;
}

.billing-status-bonus-layout {
    display: grid;
    gap: 15px;
    margin-top: 2px;
}

.billing-status-bonus-form {
    margin: 0;
}

.billing-status-bonus-btn {
    width: 100%;
    min-width: 0;
    min-height: 64px;
    margin-top: 0;
    padding: 0 22px;
    border: 0;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 1.02rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.01em;

    align-self: stretch;
    justify-self: stretch;
    white-space: nowrap;
    margin-top: 0;
}

.billing-status-bonus-btn-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.14);
}

.billing-status-bonus-btn-label {
    display: inline-block;
}

.billing-status-bonus-note {
    display: block;
    text-align: center;
    font-size: 0.92rem;
    line-height: 1.35;
    color: #5d76b2;
}

body.parent-theme .billing-status-card.is-bonus-notice .billing-status-bonus-btn,
body.parent-theme .billing-status-card.is-bonus-notice .billing-status-bonus-btn:hover,
body.parent-theme .billing-status-card.is-bonus-notice .billing-status-bonus-btn:focus {
min-height: 52px;
    border-radius: 12px;
    margin-top: 9px;
    font-weight: 700;
    font-size: 14px;
}

body.parent-theme .billing-status-card.is-bonus-notice .billing-status-bonus-btn:hover {
    transform: translateY(-1px);
}

@media (max-width: 560px) {
    .billing-status-card.is-bonus-notice {
    }

    .billing-status-bonus-btn {
        min-height: 62px;
        border-radius: 18px;
        font-size: 1rem;
        gap: 10px;
    }

    .billing-status-bonus-btn-icon {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
    }

    .billing-status-bonus-note {
        font-size: 0.88rem;
    }
}

.subscription-feature-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.subscription-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-top: 12px;
}

.subscription-card {
    display: grid;
    gap: 12px;
    padding: 18px;
    border-radius: 26px;
    background: radial-gradient(circle at top right, rgb(94 246 46 / 16%), transparent 34%), linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgb(239 255 238 / 98%));
    box-shadow: inset 0 0 0 1px rgba(171, 196, 236, 0.28);
}

.subscription-card.is-featured {
    background:
        radial-gradient(circle at top right, rgba(46, 103, 246, 0.16), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(238, 246, 255, 0.98));
    /* box-shadow:
        inset 0 0 0 1px rgba(74, 136, 255, 0.28),
        0 18px 36px rgba(47, 103, 246, 0.12); */
}

.subscription-card.is-pro {
    background:
        radial-gradient(circle at top right, rgba(155, 81, 224, 0.24), transparent 36%),
        radial-gradient(circle at bottom left, rgba(111, 66, 193, 0.12), transparent 42%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(247, 239, 255, 0.98));
    box-shadow: inset 0 0 0 1px rgba(186, 148, 255, 0.34);
}

body.parent-theme .subscription-card .btn.primary.subscription-buy-btn {
    border: 0;
    background: linear-gradient(135deg, #5bcf6b, #2fb24a);
    box-shadow: none;
}

body.parent-theme .subscription-card .btn.primary.subscription-buy-btn:hover,
body.parent-theme .subscription-card .btn.primary.subscription-buy-btn:focus {
    background: linear-gradient(135deg, #52c562, #289a40);
}

body.parent-theme .subscription-card.is-featured .btn.primary.subscription-buy-btn {
    background: linear-gradient(135deg, #4a88ff, #2f67f6);
}

body.parent-theme .subscription-card.is-featured .btn.primary.subscription-buy-btn:hover,
body.parent-theme .subscription-card.is-featured .btn.primary.subscription-buy-btn:focus {
    background: linear-gradient(135deg, #3f7ef7, #295ce0);
}

body.parent-theme .subscription-card.is-pro .btn.primary.subscription-buy-btn {
    background: linear-gradient(135deg, #b56cff, #7a4ef3);
}

body.parent-theme .subscription-card.is-pro .btn.primary.subscription-buy-btn:hover,
body.parent-theme .subscription-card.is-pro .btn.primary.subscription-buy-btn:focus {
    background: linear-gradient(135deg, #a45cf2, #6942dc);
}

.subscription-card.is-current {
    /* box-shadow:
        inset 0 0 0 1px rgba(32, 196, 127, 0.34),
        0 16px 30px rgba(32, 196, 127, 0.1); */
}

.subscription-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.subscription-card-actions {
    display: flex;
    align-items: center;
    /* gap: 8px; */
}

.subscription-card .subscription-card-actions > .subscription-test-form {
    display: none;
}

.subscription-test-form {
    margin: 0;
}

.subscription-test-btn {
    width: 30px;
    height: 30px;
    border: 0;
    display: grid;
    place-items: center;
    position: relative;
    padding: 0;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
}

.subscription-test-btn img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    display: block;
}

.subscription-test-btn.is-active {
    /* filter: drop-shadow(0 4px 10px rgba(32, 196, 127, 0.28)); */
}

.subscription-card-pitch {
    color: #2f67f6;
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.subscription-info-btn {
    width: 30px;
    height: 30px;
    border: 0;
    display: grid;
    place-items: center;
    padding: 0;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
}

.subscription-info-btn img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    display: block;
}

.subscription-card-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.subscription-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 900;
    white-space: nowrap;
}

.subscription-badge.is-featured {
    background: #2f67f6;
    color: #ffffff;
}

.subscription-badge.is-image {
    padding: 0;
    min-height: 0;
    background: transparent;
}

.subscription-badge.is-image img {
    display: block;
    width: 52px;
    height: 28px;
    object-fit: contain;
}

.subscription-badge.is-current {
    background: rgba(32, 196, 127, 0.15);
    color: #148756;
}

.subscription-card-price {
    color: #11214b;
    font-size: 1.9rem;
    font-weight: 950;
    letter-spacing: -0.05em;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.28em;
    line-height: 1;
}

.subscription-card-price-amount {
    white-space: nowrap;
}

.subscription-card-price-suffix {
    font-size: 0.55em;
    letter-spacing: -0.03em;
    white-space: nowrap;
}

.subscription-card-price-box {
    display: grid;
    gap: 2px;
}

.subscription-card-price-compare {
    color: #8a98b8;
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(138, 152, 184, 0.548);
}

.subscription-card-price-row {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    min-width: 0;
}

.subscription-card-plan-icon {
    width: 44px;
    height: 44px;
    object-fit: contain;
    flex: 0 0 auto;
}

.subscription-card-tagline {
    margin: 0;
    color: #60749a;
    font-size: 0.94rem;
    line-height: 1.5;
}

.subscription-card-stripe-inline {
    display: inline-flex;
    align-items: center;
    vertical-align: baseline;
}

.subscription-card-stripe-inline img {
    display: block;
    width: 37px;
    height: auto;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
}

.subscription-card-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px;
    color: #132452;
    font-size: 0.88rem;
    font-weight: 500;
}

.subscription-card-list li {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: start;
    gap: 8px;
    padding-left: 0;
}

.subscription-card-list-icon {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    margin-top: 1px;
}

.subscription-card-list-icon img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.subscription-info-sheet {
    padding-bottom: 18px;
}

.subscription-current-sheet {
    padding-bottom: 22px;
}

.subscription-current-sheet-hero {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    margin-top: 6px;
    padding: 14px;
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(32, 196, 127, 0.12), rgba(255, 255, 255, 0.96));
    box-shadow: inset 0 0 0 1px rgba(171, 196, 236, 0.24);
}

.subscription-current-sheet-hero.is-plan-start {
    background: linear-gradient(135deg, rgba(91, 207, 107, 0.16), rgba(255, 255, 255, 0.96));
}

.subscription-current-sheet-hero.is-plan-smart {
    background: linear-gradient(135deg, rgba(74, 136, 255, 0.16), rgba(255, 255, 255, 0.96));
}

.subscription-current-sheet-hero.is-plan-pro {
    background: linear-gradient(135deg, rgba(181, 108, 255, 0.18), rgba(255, 255, 255, 0.96));
}

.subscription-current-sheet-icon {
    width: 58px;
    height: 58px;
    object-fit: contain;
}

.subscription-current-sheet-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.subscription-current-sheet-copy strong {
    color: #11214b;
    font-size: 1.04rem;
    font-weight: 900;
    line-height: 1.12;
}

.subscription-current-sheet-copy span {
    color: #60749a;
    font-size: 0.88rem;
    line-height: 1.35;
}

.subscription-current-sheet-summary {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}

.subscription-current-sheet-row {
    display: grid;
    gap: 4px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(244, 249, 255, 0.96);
    /* box-shadow: inset 0 0 0 1px rgba(171, 196, 236, 0.22); */
}

.subscription-current-sheet-row-label {
    color: #60749a;
    font-size: 0.8rem;
    line-height: 1.2;
}

.subscription-current-sheet-row-value {
    color: #203867;
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.25;
}

.subscription-current-sheet-form {
    margin-top: 18px;
}

.subscription-current-sheet-invoice {
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255, 249, 240, 0.98), rgba(255, 255, 255, 0.98));
    display: grid;
    gap: 12px;
}

.subscription-current-sheet-invoice-copy {
    display: block;
}

.subscription-current-sheet-invoice-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: flex-start;
    gap: 12px;
}

.subscription-current-sheet-invoice-main {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.subscription-current-sheet-invoice-label {
    color: #8d6a2b;
    font-size: 0.8rem;
    line-height: 1.2;
    font-weight: 800;
}

.subscription-current-sheet-invoice-side {
    max-width: 100%;
    display: grid;
    gap: 5px;
}

.subscription-current-sheet-invoice-owner {
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px 5px 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    color: #6e6282;
    font-size: 0.72rem;
    line-height: 1;
    font-weight: 800;
}

.subscription-current-sheet-invoice-owner-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #ffd48d, #ffb251);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    font-size: 0.74rem;
    font-weight: 900;
}

.subscription-current-sheet-invoice-owner-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.subscription-current-sheet-invoice-owner-name {
    min-width: 0;
    max-width: 116px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.subscription-current-sheet-invoice-date-chip {
    flex: 0 0 auto;
    max-width: 100%;
    padding: 6px 10px 7px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.88);
    color: #7a6283;
    font-size: 0.74rem;
    line-height: 1.05;
    font-weight: 800;
    white-space: nowrap;
    display: grid;
    gap: 3px;
}

.subscription-current-sheet-invoice-time {
    font-size: 0.66rem;
    line-height: 1;
    font-weight: 700;
    color: #9a88a1;
}

.subscription-current-sheet-invoice-value {
    color: #203867;
    font-size: 1rem;
    line-height: 1.2;
    font-weight: 900;
}

.subscription-current-sheet-invoice-meta {
    color: #60749a;
    font-size: 0.82rem;
    line-height: 1.28;
    font-weight: 700;
}

.subscription-current-sheet-invoice-link {
    min-height: 48px;
    border-radius: 16px;
    background: linear-gradient(135deg, #ffbf53, #ff9d22);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    font-size: 0.94rem;
    font-weight: 900;
    text-decoration: none;
}

.subscription-current-sheet-invoice-link::after {
    content: "›";
    font-size: 1.15rem;
    line-height: 1;
}

.subscription-current-sheet-invoice-link:hover,
.subscription-current-sheet-invoice-link:focus {
    color: #ffffff;
    text-decoration: none;
    background: linear-gradient(135deg, #ffb844, #ff9713);
}

.subscription-current-sheet-invoice-link::after {
    content: none !important;
}

.subscription-invoice-carousel {
    margin-top: 14px;
}

.subscription-invoice-carousel .learning-carousel-track {
    grid-auto-columns: minmax(100%, 100%);
    gap: 0;
}

.subscription-invoice-carousel .subscription-current-sheet-invoice {
    margin-top: 0;
    min-width: 0;
    scroll-snap-align: start;
    padding-left: 22px;
    padding-right: 22px;
}

.subscription-invoice-carousel-btn {
    top: 50%;
}

.subscription-invoice-carousel-btn.prev {
    left: -18px;
}

.subscription-invoice-carousel-btn.next {
    right: -18px;
}

.subscription-current-sheet-submit {
    min-height: 56px;
    border-radius: 18px;
}

.subscription-feature-sheet-list {
    display: grid;
    gap: 10px;
        margin-top: 20px;
}

.subscription-feature-sheet-item {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 12px;
    border-radius: 18px;
    /* background: rgba(245, 249, 255, 0.92); */
    /* box-shadow: inset 0 0 0 1px rgba(171, 196, 236, 0.24); */
}

.subscription-feature-sheet-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    /* background: #ffffff; */
    /* box-shadow: inset 0 0 0 1px rgba(171, 196, 236, 0.22); */
}

.subscription-feature-sheet-icon img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.subscription-feature-sheet-copy {
    display: grid;
    gap: 4px;
}

.subscription-feature-sheet-copy strong {
    color: #11214b;
    font-size: 0.96rem;
    font-weight: 900;
}

.subscription-feature-sheet-copy span {
    color: #60749a;
    font-size: 0.88rem;
    line-height: 1.45;
}

.subscription-buy-btn[disabled] {
    opacity: 0.7;
    cursor: not-allowed;
}

.subscription-action-btn {
    position: relative;
}

.subscription-action-btn.is-loading {
    pointer-events: none;
}

.subscription-buy-btn.is-loading {
    color: transparent !important;
}

.subscription-test-btn.is-loading img {
    opacity: 0;
}

.subscription-action-btn.is-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 18px;
    height: 18px;
    margin: auto;
    border-radius: 999px;
    border: 2px solid rgba(47, 103, 246, 0.18);
    border-top-color: #2f67f6;
    animation: subscriptionActionSpin 0.75s linear infinite;
}

.subscription-buy-btn.is-loading::after {
    border-color: rgba(255, 255, 255, 0.28);
    border-top-color: #ffffff;
}

.settings-submit-btn {
    position: relative;
}

.settings-submit-btn.is-loading {
    pointer-events: none;
    color: transparent !important;
}

.settings-submit-btn.is-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 18px;
    height: 18px;
    margin: auto;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.28);
    border-top-color: #ffffff;
    animation: subscriptionActionSpin 0.75s linear infinite;
}

@keyframes subscriptionActionSpin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.settings-module-shell {
    margin: 0 0 8px;
    padding: 0;
    border: 0;
    min-width: 0;
}

.settings-module-shell.is-locked {
    opacity: 0.62;
    filter: saturate(0.75);
}

.settings-module-note {
    margin: -4px 0 16px;
    padding: 12px 14px;
    border-radius: 18px;
    background: rgba(47, 103, 246, 0.08);
    color: #47628f;
    font-size: 0.88rem;
    font-weight: 800;
    line-height: 1.45;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.settings-module-note-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
}

.settings-module-note-icon img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.settings-panel-title-with-icon {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.settings-panel-title-with-icon img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    flex: 0 0 auto;
}

.promo-lock-card {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(47, 103, 246, 0.08), rgba(255, 255, 255, 0.96));
    box-shadow: inset 0 0 0 1px rgba(171, 196, 236, 0.24);
}

.promo-lock-icon {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #4a88ff, #2f67f6);
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 900;
}

.promo-lock-icon img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.promo-lock-copy {
    display: grid;
    gap: 6px;
}

.promo-lock-title {
    color: #11214b;
    font-size: 1rem;
    font-weight: 900;
}

.promo-lock-text {
    margin: 0;
    color: #60749a;
    font-size: 0.9rem;
    line-height: 1.45;
}

.panel-chip {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    /* border: 1px solid rgba(36, 107, 254, 0.14); */
    background: rgba(36, 107, 254, 0.08);
    /* color: #1d4ed8; */
    font-size: 0.8rem;
    font-weight: 800;
    white-space: nowrap;
    gap: 7px;
}

.parent-children-grid {
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}

body.parent-page-index .parent-children-grid {
    grid-template-columns: 1fr;
}

.stack-layout {
    display: grid;
    gap: 24px;
}

.promo-module-panel {
    display: grid;
    gap: 18px;
}

.promo-module-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}

.promo-module-icon {
    width: 64px;
    height: 64px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(74, 136, 255, 0.14), rgba(47, 103, 246, 0.06));
    box-shadow: inset 0 0 0 1px rgba(171, 196, 236, 0.28);
}

.promo-module-icon img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.promo-module-copy {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.promo-module-stack {
    display: grid;
    gap: 14px;
}

.promo-module-subpanel {
    padding: 18px 16px;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(248, 251, 255, 0.88), rgba(255, 255, 255, 0.98));
    box-shadow: inset 0 0 0 1px rgba(171, 196, 236, 0.24);
}

.promo-module-subpanel .panel-head {
    margin-bottom: 16px;
}

.promo-module-subpanel .panel-title {
    font-size: 1.05rem;
}

.promo-module-subpanel .panel-subtitle {
    font-size: 0.92rem;
}

body.parent-theme .panel {
    border: 0;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.96);
    padding: 16px;
    box-shadow: 0 22px 46px rgba(72, 124, 177, 0);
}

body.parent-theme .panel.learning-panel {
    box-shadow: 0 22px 46px rgba(72, 124, 177, 0);
}

body.parent-theme .panel.shop-panel {
    box-shadow: 0 22px 46px rgba(72, 124, 177, 0);
}

body.parent-theme .panel.video-panel {
    box-shadow: 0 22px 46px rgba(72, 124, 177, 0);
}

body.parent-theme .panel.quest-panel {
    box-shadow: 0 22px 46px rgba(72, 124, 177, 0);
}

body.parent-theme .grid {
    gap: 16px;
}

body.parent-theme .item-card,
body.parent-theme .child-card,
body.parent-theme .purchase-card {
    /* border: 0; */
    border-radius: 22px;
    box-shadow: none;
}

body.parent-theme .shop-editor-grid .item-card.is-hidden-item {
    background: linear-gradient(180deg, rgba(255, 250, 250, 0.98), rgba(255, 244, 246, 0.98));
    box-shadow: 0 0 0 1px rgb(220 38 38);
    border-radius: 24px 24px 12px 12px;
}

body.parent-theme .shop-editor-grid .item-card.is-hidden-item .item-body {
    background: #ffeded;
}

body.parent-theme .shop-editor-grid .item-card:not(.is-hidden-item) .item-body {
    /* box-shadow: 0 0 0 1px rgb(141, 141, 141); */
    /* border-radius: 24px 24px 12px 12px; */
}

body.parent-theme .item-image {
    /* background: linear-gradient(180deg, #f8fbff, #eef4fb33); */
}

body.parent-theme .item-grid .item-image {
    border-radius: 24px 24px 0 0;
}

body.parent-theme .purchase-card {
    overflow: hidden;
}

body.parent-page-purchases [data-purchases-reveal] {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    transition: opacity 0.5s ease, transform 0.5s ease;
    will-change: opacity, transform;
}

body.child-page-purchases [data-purchases-reveal] {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    transition: opacity 0.56s ease-out, transform 0.56s ease-out;
    will-change: opacity, transform;
}

body.parent-page-purchases .app-topbar[data-purchases-reveal],
body.child-page-purchases .app-topbar[data-purchases-reveal] {
    transform: translate3d(0, -20px, 0);
}

body.parent-page-purchases [data-purchases-reveal].is-visible,
body.parent-page-purchases [data-purchases-reveal].aos-animate,
body.child-page-purchases [data-purchases-reveal].is-visible,
body.child-page-purchases [data-purchases-reveal].aos-animate {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

body.parent-page-purchases [data-purchases-reveal].is-visible .panel-top-badge img,
body.parent-page-purchases [data-purchases-reveal].aos-animate .panel-top-badge img,
body.child-page-purchases [data-purchases-reveal].is-visible .panel-top-badge img,
body.child-page-purchases [data-purchases-reveal].aos-animate .panel-top-badge img {
    transform-origin: center;
    animation: child-balance-coin-pop 0.9s cubic-bezier(.2, .8, .2, 1) 0.08s both;
}

body.child-content-theme [data-child-page-reveal] {
    opacity: 0;
    transform: translate3d(0, 38px, 0);
    transition: opacity 0.72s cubic-bezier(.22, .61, .36, 1), transform 0.72s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
}

body.child-content-theme .app-topbar[data-child-page-reveal] {
    transform: translate3d(0, -26px, 0);
}

body.child-content-theme [data-child-page-reveal].is-visible,
body.child-content-theme [data-child-page-reveal].aos-animate {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

body.parent-theme .dots-btn {

    border-radius: 13px;
    background: rgba(255, 255, 255, 0.96);
}

body.parent-theme .dropdown {
    border-radius: 12px;
}

body.parent-theme .input,
body.parent-theme .textarea,
body.parent-theme .select-trigger,
body.parent-theme .file-control,
body.parent-theme .file-picker {
    border-radius: 12px;
    /* border-color: rgb(207 220 239 / 0%); */
    /* background: #fdfdfd00; */
}

body.parent-theme .float-field {
    border-radius: 12px;
    border-color: rgba(207, 220, 239, 0.65);
    background: rgb(248 250 252);
    padding-top: 20px;
}

body.parent-theme .float-head {
    background: linear-gradient(360deg, #f8fafc, transparent)
}

body.parent-theme .btn {
    min-height: 52px;
    border-radius: 12px;
    margin-top: 9px;
    font-weight: 700;
    font-size: 14px;
}

body.parent-theme .btn.primary {
    /* border: 0; */
    background: linear-gradient(135deg, #4a88ff, #2f67f6);
    color: white;
}

body.parent-theme .btn.primary:hover,
body.parent-theme .btn.primary:focus {
    background: linear-gradient(135deg, #3f7ef7, #295ce0);
    color: white;
}

body.parent-theme .empty {
    min-height: 210px;
    height: auto;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(244, 248, 255, 0.9), rgba(255, 255, 255, 0.82));
}

body.parent-theme .parent-empty-children {
    flex-direction: column;
    gap: 18px;
}

body.parent-theme .parent-empty-children-icon {
    width: 50px;
    height: 50px;
    object-fit: contain;
    flex: 0 0 auto;
}

body.parent-theme .parent-empty-children-action {
    width: min(280px, 100%);
}

body.parent-page-index .parent-children-panel {
    position: relative;
    padding-top: 24px;
}

body.parent-page-index .parent-children-panel > .float-head {
    display: none;
}

body.parent-page-index .parent-children-panel .child-panel-menu-wrap {
    position: absolute;
    top: 18px;
    right: 16px;
    z-index: 2;
}

body.parent-page-index .parent-children-panel .child-panel-menu-btn {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
}

body.parent-page-index .parent-children-panel .home-panel-badge {
    margin-bottom: 18px;
}

body.parent-page-index .parent-children-actions-sheet-body {
    display: grid;
    gap: 18px;
}

body.parent-page-index .parent-children-register-link {
    width: 100%;
}

body.parent-page-index .parent-children-connect-block {
    display: grid;
    gap: 12px;
}

body.parent-page-index .parent-children-connect-copy {
    gap: 6px;
}

body.parent-page-index .parent-children-connect-title {
    margin: 0;
    font-size: 1rem;
    line-height: 1.2;
    font-weight: 900;
    color: #233458;
}

.balance-hero {
    display: grid;
    place-items: center;
    min-height: 180px;
    text-align: center;
    margin-bottom: 28px;
    overflow: visible;
}

.balance-hero.has-balance-bg {
    background-image: linear-gradient(rgba(255, 255, 255, 0), rgb(255 255 255 / 0%)), var(--balance-bg);
    background-size: cover;
    background-position: center;
}

.balance-hero .balance-menu {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 3;
}

.balance-hero .balance-dropdown {
    width: min(340px, calc(100vw - 32px));
}

.balance-value {
    font-size: 3rem;
    line-height: 0.9;
    font-weight: 900;
}

.balance-stats {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.balance-with-coin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: #ffffff9f;
    padding: 10px 25px;
    border-radius: 50px;
}

.balance-coin {
    width: clamp(42px, 9vw, 78px);
    height: clamp(42px, 9vw, 78px);
    object-fit: contain;
}

.balance-coin-3d {
    display: block;
    flex: 0 0 auto;
    width: clamp(38px, 8vw, 68px);
    height: clamp(38px, 8vw, 68px);
    background: transparent;
    pointer-events: none;
    --poster-color: transparent;
}

.balance-coin-3d::part(default-progress-bar) {
    display: none;
}

.balance-learning-count {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: #ffffff9f;
    padding: 10px 25px;
    border-radius: 50px;
    color: var(--text);
    font-size: 3rem;
    line-height: 0.9;
    font-weight: 900;
}

.balance-learning-test-controls {
    position: absolute;
    top: -16px;
    right: 22px;
    display: inline-flex;
    gap: 6px;
}

.balance-learning-test-controls form {
    margin: 0;
}

.balance-learning-test-btn {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ef4444;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
    padding: 0;
}

.balance-learning-test-btn img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.balance-learning-test-btn:hover,
.balance-learning-test-btn:focus {
    border-color: #dc2626;
    transform: translateY(-1px);
}

.balance-book {
    width: clamp(48px, 10vw, 86px);
    height: clamp(48px, 10vw, 86px);
    object-fit: contain;
}

.balance-book-3d {
    display: block;
    flex: 0 0 auto;
    width: clamp(48px, 10vw, 86px);
    height: clamp(48px, 10vw, 86px);
    min-width: clamp(48px, 10vw, 86px);
    pointer-events: none;
    --poster-color: transparent;
}

.balance-book-3d::part(default-progress-bar) {
    display: none;
}

.family-stats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.balance-label {
    margin-top: 12px;
    color: var(--muted);
    font-size: 1rem;
    font-weight: 800;
}

.promo-form {
    width: min(440px, 100%);
    margin: 16px auto 0;
    display: grid;
    gap: 12px;
}

.promo-panel {
    margin-bottom: 28px;
}

.child-home-layout {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.child-home-layout > .panel,
.child-home-layout > .split {
    margin-top: 0;
    margin-bottom: 0;
}

.child-home-layout .gadget-panel {
    order: 5;
}

.child-home-layout .balance-hero {
    order: 10;
}

.child-home-layout .parents-panel {
    order: 20;
}

.child-home-layout .family-panel:not(.friends-panel) {
    order: 30;
}

.child-home-layout .friends-panel {
    order: 40;
}

.child-home-layout .child-trophy-panel {
    order: 15;
}

.child-home-layout .home-video-panel {
    order: 60;
}

.child-home-layout .home-learning-panel {
    order: 70;
}

.child-home-layout .shop-preview-panel {
    order: 80;
}

.child-home-layout .home-quest-panel {
    order: 90;
}

body.child-home-theme {
    background: #dff4ff url('/static/bgs/1.png') center top / cover repeat-y;
}

body.child-home-theme .app-topbar {
    background: transparent;
    backdrop-filter: none;
}

body.child-home-theme .app-topbar-inner {
    width: min(394px, calc(100% - 24px));
    min-height: 88px;
    margin: 16px auto 0;
    padding: 12px 14px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    position: relative;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.88));
    overflow: hidden;
}

body.child-home-theme .app-topbar-inner::before {
    display: none;
}

body.child-home-theme .topbar-profile {
    position: relative;
    z-index: 1;
    gap: 14px;
    min-width: 0;
    width: 100%;
}

body.child-home-theme .topbar-profile .avatar {
    width: 55px;
    height: 55px;
    border-radius: 20px;
    background: #ffffff;
    flex-basis: 55px;
    margin-left: 0;
}

body.child-home-theme .topbar-profile-name {
    font-size: 0.98rem;
    font-weight: 900;
    color: #1e2b56;
    max-width: none;
}

body.child-home-theme .topbar-profile-role {
    max-width: none;
}

body.child-home-theme .topbar-profile-group {
    min-width: 0;
}

body.child-home-theme .topbar-gadget-timer {
    color: #25b33d;
    font-size: 0.88rem;
    letter-spacing: 0.06em;
}

body.child-home-theme .topbar-gadget-timer-icon {
    height: 20px;
    flex-basis: 20px;
}

body.child-home-theme .topbar-gadget-timer.is-warning {
    color: #d97706;
}

body.child-home-theme .topbar-gadget-timer.is-empty {
    color: #dc2626;
}

body.child-home-theme .top-actions {
    position: relative;
    z-index: 1;
    gap: 12px;
    justify-self: end;
    flex: 0 0 auto;
}

body.child-home-theme .top-actions .icon-btn {
    width: 54px;
    height: 54px;
    border-radius: 20px;
    border-color: rgba(255, 255, 255, 0.82);
    background: rgba(255, 255, 255, 0.94);
}

body.child-home-theme .top-actions .icon-btn img {
    width: 38px;
    height: 38px;
}

body.child-home-theme .top-actions .icon-btn-svg {
    width: 22px;
    height: 22px;
    stroke-width: 2.35;
}

body.child-home-theme .badge-dot {
    top: 9px;
    right: 9px;
    width: 11px;
    height: 11px;
    background: #ff5f78;
}

body.child-home-theme .app-main {
    width: min(430px, 100%);
    padding-top: 122px;
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: calc(var(--nav-height) + 60px);
}

body.child-home-theme .child-home-layout {
    gap: 18px;
    position: relative;
}

body.child-home-theme .child-home-layout > .panel,
body.child-home-theme .home-learning-panel,
body.child-home-theme .home-video-panel,
body.child-home-theme .home-quest-panel {
    border: 0;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 22px 46px rgba(72, 124, 177, 0);
}

body.child-home-theme .child-home-layout > .panel {
    padding: 18px 18px 18px;
}

body.child-home-theme .float-head {
    display: none;
}

body.child-home-theme .float-head img {
    width: 18px;
    height: 18px;
}

body.child-home-theme .gadget-panel .float-head {
    background: linear-gradient(135deg, #66d961, #37b84b);
}

body.child-home-theme .balance-hero .float-head {
    background: linear-gradient(135deg, #57b9ff, #2f73ff);
}

body.child-home-theme .video-panel .float-head {
    background: linear-gradient(135deg, #c472ff, #8e47f4);
}

body.child-home-theme .parents-panel .float-head {
    background: linear-gradient(135deg, #ff97b0, #ff758f);
}

body.child-home-theme .learning-panel .float-head {
    background: linear-gradient(135deg, #8f7cff, #5e54ff);
}

body.child-home-theme .quest-panel .float-head {
    background: linear-gradient(135deg, #ffb55c, #ff7e36);
}

body.child-home-theme .promo-panel .float-head,
body.child-home-theme .split .panel .float-head {
    background: linear-gradient(135deg, #58c8ff, #20a6ff);
}

body.child-home-theme .gadget-panel {
    overflow: hidden;
    background:
        radial-gradient(circle at 14% 66%, rgba(255, 208, 71, 0.36), transparent 10%),
        radial-gradient(circle at 86% 26%, rgba(255, 255, 255, 0.9), transparent 22%),
        linear-gradient(180deg, #f5fff1, #ffffff 72%);
    box-shadow: 0 22px 48px rgba(83, 177, 97, 0.18);
}

body.child-home-theme .gadget-timer-card {
    grid-template-columns: 1fr;
    text-align: center;
}

body.child-home-theme .gadget-countdown-wrap {
    width: 100%;
}

body.child-home-theme .gadget-countdown {
    color: #25b33d;
}

body.child-home-theme .balance-hero {
    min-height: 0;
    text-align: left;
    display: grid;
    gap: 25px;
    place-items: stretch;
    background:
        radial-gradient(circle at 82% 18%, rgba(255, 236, 168, 0.58), transparent 20%),
        linear-gradient(180deg, #ffffff, #fafdff);
}

body.child-home-theme .balance-stats {
    display: flex;
    justify-content: center;
    gap: 0;
}

body.child-home-theme .child-gadget-progress {
    display: grid;
    gap: 10px;
    margin-top: -4px;
}

body.child-home-theme .child-gadget-progress-bar {
    --gadget-progress: 0%;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    min-height: 34px;
    border-radius: 20px;
    padding: 0 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: #ffffff;
    background: linear-gradient(135deg, #c86fff00, rgb(215 238 255));
    box-shadow: none;
}

body.child-home-theme .child-gadget-progress-bar::before {
    content: "";
    position: absolute;
    inset: 0;
    width: var(--gadget-progress);
    border-radius: inherit;
    background:  linear-gradient(90deg, #0048ff, #2f67f6) ;
    transition: width 0.9s linear;
    transform-origin: left center;
    z-index: 0;
}

body.child-home-theme .balance-hero:not(.is-animated) .child-gadget-progress-bar::before {
    transform: scaleX(0);
}

body.child-home-theme .child-gadget-progress-title,
body.child-home-theme .child-gadget-progress-timer {
    position: relative;
    z-index: 1;
    font-size: 1.15rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    margin-top: -3px;
}

body.child-home-theme .child-gadget-progress-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: #6b7b9a;
    font-size: 0.9rem;
    font-weight: 800;
}

body.child-home-theme .child-gadget-progress-meta strong {
    color: #24335d;
    font-weight: 900;
}

body.child-home-theme .balance-with-coin {
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 10px;
    border-radius: 24px;
    background: #ffffff00;
    font-size: 3rem;
    /* color: #e43c3c; */
    width: fit-content;
    margin: 0 auto;
    transform-origin: center center;
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

body.child-home-theme .balance-book {
    width: clamp(56px, 10vw, 62px);
}

body.child-home-theme .balance-book-3d {
    width: clamp(56px, 10vw, 62px);
    height: clamp(56px, 10vw, 62px);
    min-width: clamp(56px, 10vw, 62px);
}

body.child-home-theme .balance-coin-3d {
    width: clamp(42px, 8vw, 48px);
    height: clamp(42px, 8vw, 48px);
    min-width: clamp(42px, 8vw, 48px);
}

@keyframes child-balance-flip-in {
    0% {
        opacity: 0;
        transform: perspective(900px) rotateY(-88deg) scale(0.9);
    }
    55% {
        opacity: 1;
        transform: perspective(900px) rotateY(14deg) scale(1.04);
    }
    78% {
        transform: perspective(900px) rotateY(-8deg) scale(0.985);
    }
    100% {
        opacity: 1;
        transform: perspective(900px) rotateY(0deg) scale(1);
    }
}

@keyframes child-balance-coin-pop {
    0%, 24% {
        transform: scale(0.82) rotate(-16deg);
    }
    58% {
        transform: scale(1.16) rotate(10deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
    }
}

@keyframes child-balance-coin-reward-burst {
    0% {
        transform: scale(1) rotate(0deg);
        filter: drop-shadow(0 0 0 rgba(255, 196, 61, 0));
    }
    22% {
        transform: scale(1.22) rotate(-18deg) translateY(-2px);
        filter: drop-shadow(0 0 16px rgba(255, 196, 61, 0.34));
    }
    48% {
        transform: scale(0.94) rotate(16deg) translateY(1px);
        filter: drop-shadow(0 0 10px rgba(79, 124, 255, 0.22));
    }
    72% {
        transform: scale(1.16) rotate(-12deg) translateY(-1px);
        filter: drop-shadow(0 0 18px rgba(255, 138, 61, 0.28));
    }
    100% {
        transform: scale(1) rotate(0deg);
        filter: drop-shadow(0 0 0 rgba(255, 196, 61, 0));
    }
}

@keyframes child-gadget-progress-fill-in {
    0% {
        transform: scaleX(0);
    }
    68% {
        transform: scaleX(1.03);
    }
    100% {
        transform: scaleX(1);
    }
}

body.child-home-theme .balance-hero.is-animating .balance-with-coin {
    animation: child-balance-flip-in 0.96s cubic-bezier(.22, .61, .36, 1) both;
}

body.child-home-theme .balance-hero.is-animating .balance-learning-count {
    animation: child-balance-flip-in 0.96s cubic-bezier(.22, .61, .36, 1) 0.04s both;
}

body.child-home-theme .balance-hero.is-animating .balance-coin-3d {
    animation: child-balance-coin-pop 0.9s cubic-bezier(.2, .8, .2, 1) 0.08s both;
}

body.child-home-theme .balance-hero.is-animating .balance-book {
    animation: child-balance-coin-pop 0.9s cubic-bezier(.2, .8, .2, 1) 0.12s both;
}

body.child-home-theme .balance-hero.is-animating .balance-book-3d {
    animation: child-balance-coin-pop 0.9s cubic-bezier(.2, .8, .2, 1) 0.12s both;
}

body.child-home-theme .balance-hero.is-rewarding .balance-coin-3d {
    animation: child-balance-coin-reward-burst 0.66s cubic-bezier(.2, .8, .2, 1) 2 both;
}

body.child-home-theme .balance-hero.is-animating .child-gadget-progress-bar::before {
    animation: child-gadget-progress-fill-in 1.02s cubic-bezier(.22, .61, .36, 1) 0.08s both;
}

body.child-home-theme .trophy-panel {
    background:
        radial-gradient(circle at 86% 20%, rgba(255, 236, 168, 0.5), transparent 24%),
        linear-gradient(180deg, #ffffff, #fafdff);
}

body.child-home-theme .child-trophy-panel .empty {
    min-height: 132px;
    height: auto;
    border-radius: 16px;
}

body.child-home-theme .trophy-awards-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 36px) / 4);
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}

body.child-home-theme .trophy-awards-row::-webkit-scrollbar {
    display: none;
}

body.child-home-theme .trophy-awards-carousel {
    position: relative;
}

body.child-home-theme .trophy-awards-carousel.is-static .trophy-carousel-btn {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

body.child-home-theme .trophy-award-card {
    width: 100%;
    min-width: 0;
    border-radius: 24px;
    /* padding: 14px; */
    display: grid;
    place-items: center;
    scroll-snap-align: start;
    border: 0;
    background: transparent;
}

body.child-home-theme .trophy-award-trigger {
    cursor: pointer;
}

body.child-home-theme .trophy-carousel-btn {
    top: 50%;
    width: 54px;
    height: 72px;
    z-index: 4;
}

body.child-home-theme .trophy-carousel-btn.prev {
    left: -18px;
}

body.child-home-theme .trophy-carousel-btn.next {
    right: -18px;
}

body.child-home-theme .trophy-award-art {
    width: 100%;
    /* min-height: 120px; */
    display: grid;
    place-items: center;
}

body.child-home-theme .trophy-award-art img {
    width: 100%;
    max-width: 115px;
    height: 80px;
    object-fit: contain;
    display: block;
}

body.child-home-theme .trophy-award-copy {
    display: grid;
    gap: 6px;
}

body.child-home-theme .trophy-award-copy strong {
    color: #1e2b56;
    font-size: 0.98rem;
    line-height: 1.2;
}

body.child-home-theme .trophy-award-copy span {
    color: #6f7fa1;
    font-size: 0.84rem;
    line-height: 1.35;
    font-weight: 700;
}

body.child-home-theme .trophy-award-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

body.child-home-theme .trophy-award-photo {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    overflow: hidden;
    display: inline-block;
    box-shadow: inset 0 0 0 1px rgba(171, 196, 236, 0.4);
}

body.child-home-theme .trophy-award-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

body.child-home-theme .parents-panel {
    border: 0;
}

body.child-home-theme .parents-panel .grid.two {
    grid-template-columns: 1fr;
    gap: 12px;
}

body.child-home-theme .parents-panel .child-card {
    border: 0;
    border-radius: 22px;
}

body.child-home-theme .parents-panel .child-body {
    padding: 14px;
}

body.child-home-theme .parents-panel .avatar {
    width: 52px;
    height: 52px;
    flex-basis: 52px;
}

body.child-home-theme .child-name {
    color: #1e2b56;
    font-size: 0.98rem;
}

body.child-home-theme .muted {
    color: #7180a0;
}

body.child-home-theme .child-home-split {
    gap: 18px;
}

body.child-home-theme .child-home-split .home-stack {
    gap: 18px;
}

body.child-home-theme .child-home-split .panel {
    border: 0;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.96);
    padding: 20px 16px 18px;
    box-shadow: 0 22px 46px rgba(72, 124, 177, 0);
}

body.child-home-theme .family-panel .grid.two {
    grid-template-columns: 1fr;
    gap: 12px;
}

body.child-home-theme .family-panel .child-card {
    border: 0;
    border-radius: 22px;
}

body.child-home-theme .family-panel .child-body {
    padding: 14px;
}

body.child-home-theme .family-panel .child-name {
    font-size: 1.05rem;
}

body.child-home-theme .family-panel .family-stats {
    gap: 10px;
    color: #61739a;
    font-weight: 700;
}

body.child-home-theme .family-panel .menu-wrap .dots-btn {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0);
}

body.child-home-theme .friends-panel {
    position: relative;
    padding-top: 24px;
}

body.child-home-theme .parents-panel {
    position: relative;
    padding-top: 24px;
}

body.child-home-theme .parents-panel .child-panel-menu-wrap,
body.child-home-theme .friends-panel .child-panel-menu-wrap {
    position: absolute;
    top: 18px;
    right: 16px;
    z-index: 2;
}

body.child-home-theme .parents-panel .child-panel-menu-btn,
body.child-home-theme .friends-panel .child-panel-menu-btn {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
}

body.child-home-theme .family-panel .empty,
body.child-home-theme .friends-panel .empty {
    height: auto;
    min-height: 120px;
    padding: 24px 18px;
    border-radius: 16px;
}

body.child-home-theme .shop-preview-panel .shop-grid {
    gap: 14px;
}

body.child-home-theme .shop-preview-panel .item-card {
    border: 0;
    border-radius: 24px;
    background: linear-gradient(180deg, #ffffff, #fbfdff);
    overflow: hidden;
}

body.child-home-theme .shop-preview-panel .item-image {
    aspect-ratio: 1 / 1;
    /* background: linear-gradient(180deg, #f7fbff, #ffffff); */
}

body.child-home-theme .shop-preview-panel .item-grid .item-image {
    border-radius: 24px 24px 0 0;
}

body.child-home-theme .shop-preview-panel .item-grid .item-image img {
    inset: 16px;
    width: calc(100% - 32px);
    height: calc(100% - 32px);
}

body.child-home-theme .shop-preview-panel .item-body {
padding: 14px;
    gap: 10px;
    border-radius: 19px;
}

body.child-home-theme .shop-preview-panel .item-title {
    font-size: 0.98rem;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

body.child-home-theme .shop-preview-panel .shop-cart-btn {
    min-height: 52px;
    border: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, #4a88ff, #2f67f6);
}

body.child-home-theme .home-video-panel,
body.child-home-theme .home-learning-panel,
body.child-home-theme .home-quest-panel {
    padding: 26px 12px 16px;
    overflow: visible;
}

body.child-home-theme .video-panel,
body.child-home-theme .learning-panel,
body.child-home-theme .quest-panel {
    overflow: hidden;
}

body.child-home-theme .video-card,
body.child-home-theme .learning-card,
body.child-home-theme .quest-card {
    border: 0;
    border-radius: 22px;
    overflow: hidden;
    background: #ffffff;
}

body.child-home-theme .video-card .item-image,
body.child-home-theme .learning-card .item-image,
body.child-home-theme .quest-card .item-image {
    border-radius: 0;
}

body.child-home-theme .video-card .item-body,
body.child-home-theme .learning-card .item-body,
body.child-home-theme .quest-card .item-body {
    padding: 14px 12px;
}

body.child-home-theme .shop-preview-panel .shop-cart-btn,
body.child-home-theme .home-learning-panel .learning-reward-btn,
body.child-home-theme .home-learning-panel .learning-submit-btn,
body.child-home-theme .home-video-panel .video-btn,
body.child-home-theme .home-quest-panel .quest-btn {
    min-height: 52px;
    border: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, #c26fff, #9555ef);
}

body.child-home-theme .shop-preview-panel .shop-cart-btn:hover,
body.child-home-theme .shop-preview-panel .shop-cart-btn:focus,
body.child-home-theme .home-learning-panel .learning-reward-btn:hover,
body.child-home-theme .home-learning-panel .learning-reward-btn:focus,
body.child-home-theme .home-learning-panel .learning-submit-btn:hover,
body.child-home-theme .home-learning-panel .learning-submit-btn:focus,
body.child-home-theme .home-video-panel .video-btn:hover,
body.child-home-theme .home-video-panel .video-btn:focus,
body.child-home-theme .home-quest-panel .quest-btn:hover,
body.child-home-theme .home-quest-panel .quest-btn:focus {
    background: linear-gradient(135deg, #b45ef9, #8b4aeb);
}

body.child-home-theme .home-video-panel .video-home-carousel .learning-carousel-track {
    grid-auto-columns: minmax(248px, 84%);
    gap: 18px;
    scroll-padding-inline: 4px;
}

body.child-home-theme .home-video-panel .home-video-card {
    border-radius: 24px;
    background: linear-gradient(180deg, #ffffff, #fbfdff);
    cursor: pointer;
}

body.child-home-theme .home-learning-panel .learning-card .item-image {
    background: #edf6ff;
    border-radius: 19px;
}

body.child-home-theme .home-learning-panel .learning-card .item-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    border-radius: inherit;
}

body.child-home-theme .home-learning-panel .learning-card .item-image img.learning-image-fallback {
    position: static;
    inset: auto;
    width: 50px;
    height: 50px;
    max-width: 50px;
    max-height: 50px;
    object-fit: contain;
    border-radius: 0;
}

body.child-home-theme .home-learning-panel .learning-card .item-body {
    background: transparent;
    border-radius: 0;
}

body.child-home-theme .home-learning-panel .learning-card .item-title {
    color: #214f9b;
}

body.child-home-theme .home-learning-panel .learning-reward-btn,
body.child-home-theme .home-learning-panel .learning-submit-btn {
    background: linear-gradient(135deg, #4d96ff, #2f6df6);
}

body.child-home-theme .home-learning-panel .learning-reward-btn:hover,
body.child-home-theme .home-learning-panel .learning-reward-btn:focus,
body.child-home-theme .home-learning-panel .learning-submit-btn:hover,
body.child-home-theme .home-learning-panel .learning-submit-btn:focus {
    background: linear-gradient(135deg, #3e86f6, #255cdb);
}

body.child-home-theme .shop-preview-panel .item-body {
    background: #fff4e8;
    border-radius: 19px;
}

body.child-home-theme .shop-preview-panel .item-title {
    color: #ab5a16;
}

body.child-home-theme .shop-preview-panel .shop-cart-btn {
    background: linear-gradient(135deg, #ffb04d, #f27a22);
}

body.child-home-theme .shop-preview-panel .shop-cart-btn:hover,
body.child-home-theme .shop-preview-panel .shop-cart-btn:focus {
    background: linear-gradient(135deg, #f5a03f, #df6815);
}

body.child-home-theme .home-quest-panel .learning-card.quest-card .item-body {
    background: transparent;
    border-radius: 0;
}

body.child-home-theme .home-quest-panel .learning-card.quest-card .item-title {
    /* color: #1e7e57; */
}

body.child-home-theme .home-quest-panel .quest-btn {
    background: linear-gradient(135deg, #c26fff, #9555ef);
}

body.child-home-theme .home-quest-panel .quest-btn:hover,
body.child-home-theme .home-quest-panel .quest-btn:focus {
    background: linear-gradient(135deg, #b45ef9, #8b4aeb);
}

body.child-home-theme .home-video-panel .home-video-card .item-image {
    border-radius: 24px 24px 0 0;
    aspect-ratio: 16 / 9;
    background: #fff;
}

body.child-home-theme .home-video-panel .home-video-card .item-body {
    padding: 12px 12px 14px;
    grid-template-rows: auto auto auto;
    gap: 5px;
    margin-top: 5px;
    background: #f2f7ff;
    border-radius: 0;
}

body.child-home-theme .home-video-panel .home-video-card .item-title {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.18;
    font-size: 0.98rem;
}

body.child-home-theme .home-video-card-overlay {
    position: absolute;
    left: 12px;
    right: 12px;
    top: 12px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

body.child-home-theme .home-video-pill {
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 29, 50, 0.72);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.02em;
    backdrop-filter: blur(8px);
}

body.child-home-theme .home-video-pill-light {
    background: rgba(255, 255, 255, 0.92);
    color: #243456;
}

body.child-home-theme .home-video-play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    width: 72px;
    height: 50px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 36, 36, 0.96);
    transform: translate(-50%, -50%);

}

body.child-home-theme .home-video-play-icon {
    width: 0;
    height: 0;
    margin-left: 4px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 18px solid #ffffff;
}

body.child-home-theme .home-video-watch-hint {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 1;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(28, 53, 96, 0.76);
    color: #ffffff;
    font-size: 0.74rem;
    font-weight: 900;
    backdrop-filter: blur(8px);
}

body.child-home-theme .home-video-meta {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

body.child-home-theme .home-video-reward {
    min-height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(47, 179, 61, 0.1);
    color: #1d9b36;
    font-size: 0.82rem;
    font-weight: 900;
}

body.child-home-theme .home-video-reward .coin-icon {
    width: 16px;
    height: 16px;
}

body.child-home-theme .home-video-panel .video-btn {
    min-height: 46px;
    border-radius: 16px;
}

body.child-home-theme .home-video-panel .video-btn .shop-cart-price {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    font-weight: 900;
}

body.child-home-theme .learning-carousel-btn {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    overflow: visible;
    /* background: rgba(255, 255, 255, 0.92); */
}

body.child-home-theme .learning-carousel-btn img {
    width: 50px !important;
    height: 50px !important;
    max-width: none;
}

body.child-home-theme .bottom-nav {
    background: transparent;
    padding: 0 0 10px;
}

body.child-home-theme .bottom-nav-inner {
    width: min(398px, calc(100% - 30px));
    /* margin-bottom: 8px; */
    /* padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px)); */
    gap: 6px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.96);
}

body.child-home-theme .nav-link {
    flex-basis: 66px;
    min-width: 66px;
    min-height: 72px;
    gap: 6px;
    font-size: 0.72rem;
    color: #5c6c8f;
}

body.child-home-theme .nav-link img {
    width: 42px;
    height: 42px;
    opacity: 1;
}

body.child-home-theme .notification-backdrop {
    background: rgba(56, 107, 164, 0.2);
    backdrop-filter: blur(8px);
}

body.child-home-theme .notification-sheet {
    left: 50%;
    right: auto;
    top: 104px;
    width: min(430px, calc(100vw - 24px));
    height: auto;
    max-height: min(78vh, 700px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 0;
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 252, 255, 0.96));
    transform: translate(-50%, -14px) scale(0.98);
}

body.child-home-theme .notification-sheet::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 50%;
    width: 58px;
    height: 6px;
    border-radius: 999px;
    background: rgba(138, 168, 214, 0.44);
    transform: translateX(-50%);
}

body.child-home-theme .notification-modal.show .notification-sheet {
    transform: translate(-50%, 0) scale(1);
}

body.child-home-theme .notification-head {
    min-height: 74px;
    padding: 18px 18px 12px;
    border-bottom: 0;
}

body.child-home-theme .notification-title {
    font-size: 1.45rem;
    font-weight: 900;
    color: #1d2a53;
}

body.child-home-theme .notification-head .icon-btn {
    width: 50px;
    height: 50px;
    min-height: 42px;
    border: 0;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.92);
    color: #1d2a53;
    font-size: 2.0rem;
    line-height: 1;
}

body.child-home-theme .notification-head .icon-btn:focus,
body.child-home-theme .notification-head .icon-btn:focus-visible,
body.parent-theme .notification-head .icon-btn:focus,
body.parent-theme .notification-head .icon-btn:focus-visible {
    outline: none;
    border-color: transparent;
    box-shadow: none;
}

body.child-home-theme .notification-list {
    max-height: none;
    flex: 0 1 auto;
    overflow-y: auto;
    /* padding: 0 14px 14px; */
    display: grid;
    /* gap: 12px; */
}

body.child-home-theme .notice {
    padding: 18px 18px 16px;
    border: 0;
    /* border-radius: 22px; */
    /* background: aliceblue; */
    border-bottom: 1px solid #80808017;
    gap: 3px;
}

body.child-home-theme .notice.is-unread {
    /* background: rgb(249 115 22 / 10%) */
}

body.child-home-theme .notice strong {
    font-size: 1rem;
    line-height: 1.3;
    color: #1c2749;
}

body.child-home-theme .notice .muted {
    color: #6b7ea5;
}

body.child-home-theme .notice-image {
    border: 0;
    border-radius: 18px;
    /* box-shadow: 0 10px 18px rgba(101, 129, 167, 0.12); */
}

body.child-home-theme .notice-time {
    font-size: 0.82rem;
    color: #8391b0;
}

body.child-home-theme .nav-link.is-active {
    border-color: rgb(110 159 255 / 0%);
    /* background: linear-gradient(180deg, rgb(255 89 89 / 11%), rgb(255 132 89 / 5%)); */
    color: #2f73ff;
    border-radius: 19px;
}

body.child-home-theme .app-topbar-inner,
body.child-home-theme .bottom-nav-inner,
body.child-home-theme .child-home-layout > .panel,
body.child-home-theme .home-learning-panel,
body.child-home-theme .home-video-panel,
body.child-home-theme .home-quest-panel {
    max-width: 100%;
}

body.child-home-theme [data-home-reveal] {
    opacity: 0;
    transform: translate3d(0, 52px, 0) scale(0.965);
    transition: opacity 0.84s cubic-bezier(.2, .78, .22, 1), transform 0.84s cubic-bezier(.2, .78, .22, 1);
    will-change: opacity, transform;
}

body.child-home-theme .app-topbar[data-home-reveal] {
    transform: translate3d(0, -30px, 0);
}

body.child-home-theme [data-home-reveal].is-visible,
body.child-home-theme [data-home-reveal].aos-animate {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

.pull-refresh-indicator {
    position: fixed;
    top: 48px;
    left: 50%;
    z-index: 90;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -56px);
    transition: opacity 0.22s ease, transform 0.22s ease;
    --pull-progress: 0;
}

.pull-refresh-indicator-badge {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.pull-refresh-indicator-icon {
    width: 20px;
    height: 20px;
    display: block;
    transform: rotate(calc(var(--pull-progress) * 225deg));
    transition: transform 0.18s ease;
}

.pull-refresh-indicator.is-ready .pull-refresh-indicator-icon {
    transform: rotate(225deg) scale(1.08);
}

.pull-refresh-indicator.is-loading .pull-refresh-indicator-icon {
    animation: pullRefreshSpin 0.72s linear infinite;
}

.pull-refresh-indicator-text {
    display: none;
}

@keyframes pullRefreshSpin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

body.parent-page-index [data-parent-home-reveal] {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    transition: opacity 0.56s ease-out, transform 0.56s ease-out;
}

body.parent-page-index .app-topbar[data-parent-home-reveal] {
    transform: translate3d(0, -20px, 0);
}

body.parent-page-index [data-parent-home-reveal].is-visible,
body.parent-page-index [data-parent-home-reveal].aos-animate {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

body.parent-page-index [data-parent-home-reveal].is-visible .parent-empty-children-icon,
body.parent-page-index [data-parent-home-reveal].aos-animate .parent-empty-children-icon {
    transform-origin: center;
    animation: child-balance-coin-pop 0.9s cubic-bezier(.2, .8, .2, 1) 0.08s both;
}

body.parent-page-quest-editor [data-quest-reveal] {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    transition: opacity 0.56s ease-out, transform 0.56s ease-out;
}

body.parent-page-quest-editor .app-topbar[data-quest-reveal] {
    transform: translate3d(0, -20px, 0);
}

body.parent-page-quest-editor [data-quest-reveal].is-visible,
body.parent-page-quest-editor [data-quest-reveal].aos-animate {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

body.parent-page-quest-editor [data-quest-reveal].is-visible .quest-review-badge-icon,
body.parent-page-quest-editor [data-quest-reveal].aos-animate .quest-review-badge-icon {
    transform-origin: center;
    animation: child-balance-coin-pop 0.9s cubic-bezier(.2, .8, .2, 1) 0.08s both;
}

body.parent-page-shop-editor [data-shop-editor-reveal] {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    transition: opacity 0.56s ease-out, transform 0.56s ease-out;
}

body.parent-page-shop-editor .app-topbar[data-shop-editor-reveal] {
    transform: translate3d(0, -20px, 0);
}

body.parent-page-shop-editor [data-shop-editor-reveal].is-visible,
body.parent-page-shop-editor [data-shop-editor-reveal].aos-animate {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

body.parent-page-shop-editor [data-shop-editor-reveal].is-visible .panel-top-badge img:not(.shop-editor-badge-plus),
body.parent-page-shop-editor [data-shop-editor-reveal].aos-animate .panel-top-badge img:not(.shop-editor-badge-plus) {
    transform-origin: center;
    animation: child-balance-coin-pop 0.9s cubic-bezier(.2, .8, .2, 1) 0.08s both;
}

body.parent-page-learning-editor [data-learning-editor-reveal] {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    transition: opacity 0.56s ease-out, transform 0.56s ease-out;
}

body.parent-page-learning-editor .app-topbar[data-learning-editor-reveal] {
    transform: translate3d(0, -20px, 0);
}

body.parent-page-learning-editor [data-learning-editor-reveal].is-visible,
body.parent-page-learning-editor [data-learning-editor-reveal].aos-animate {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

body.parent-page-learning-editor [data-learning-editor-reveal].is-visible .learning-catalog-badge-icon,
body.parent-page-learning-editor [data-learning-editor-reveal].aos-animate .learning-catalog-badge-icon {
    transform-origin: center;
    animation: child-balance-coin-pop 0.9s cubic-bezier(.2, .8, .2, 1) 0.08s both;
}

body.parent-page-video-editor [data-video-editor-reveal] {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    transition: opacity 0.56s ease-out, transform 0.56s ease-out;
}

body.parent-page-video-editor .app-topbar[data-video-editor-reveal] {
    transform: translate3d(0, -20px, 0);
}

body.parent-page-video-editor [data-video-editor-reveal].is-visible,
body.parent-page-video-editor [data-video-editor-reveal].aos-animate {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

body.parent-page-video-editor [data-video-editor-reveal].is-visible .video-catalog-badge-icon,
body.parent-page-video-editor [data-video-editor-reveal].aos-animate .video-catalog-badge-icon {
    transform-origin: center;
    animation: child-balance-coin-pop 0.9s cubic-bezier(.2, .8, .2, 1) 0.08s both;
}

body.parent-page-promo-codes-page [data-promo-codes-reveal] {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    transition: opacity 0.56s ease-out, transform 0.56s ease-out;
}

body.parent-page-promo-codes-page .app-topbar[data-promo-codes-reveal] {
    transform: translate3d(0, -20px, 0);
}

body.parent-page-promo-codes-page [data-promo-codes-reveal].is-visible,
body.parent-page-promo-codes-page [data-promo-codes-reveal].aos-animate {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

body.parent-page-promo-codes-page [data-promo-codes-reveal].is-visible .promo-code-badge-icon,
body.parent-page-promo-codes-page [data-promo-codes-reveal].aos-animate .promo-code-badge-icon {
    transform-origin: center;
    animation: child-balance-coin-pop 0.9s cubic-bezier(.2, .8, .2, 1) 0.08s both;
}

body.parent-page-promo-codes-page .promo-history-card {
    background: transparent;
    border-radius: 0;
    overflow: visible;
}

body.parent-page-promo-codes-page .promo-history-body {
    padding: 16px;
    display: grid;
    gap: 10px;
    min-width: 0;
    max-width: 100%;
    border-radius: 25px;
    background: #edf3ff;
}

body.parent-page-settings [data-settings-reveal] {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    transition: opacity 0.56s ease-out, transform 0.56s ease-out;
}

body.parent-page-settings .app-topbar[data-settings-reveal] {
    transform: translate3d(0, -20px, 0);
}

body.parent-page-settings [data-settings-reveal].is-visible,
body.parent-page-settings [data-settings-reveal].aos-animate {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

body.parent-page-settings [data-settings-reveal].is-visible .billing-status-card.is-active .billing-status-main,
body.parent-page-settings [data-settings-reveal].aos-animate .billing-status-card.is-active .billing-status-main {
    animation: child-balance-flip-in 0.96s cubic-bezier(.22, .61, .36, 1) both;
}

body.parent-page-settings [data-settings-reveal].is-visible .billing-status-card.is-empty .billing-status-main,
body.parent-page-settings [data-settings-reveal].aos-animate .billing-status-card.is-empty .billing-status-main {
    animation: child-balance-flip-in 0.96s cubic-bezier(.22, .61, .36, 1) both;
}

body.parent-page-settings [data-settings-reveal].is-visible .billing-status-card.is-active .billing-status-icon,
body.parent-page-settings [data-settings-reveal].aos-animate .billing-status-card.is-active .billing-status-icon {
    transform-origin: center;
    animation: child-balance-coin-pop 0.9s cubic-bezier(.2, .8, .2, 1) 0.08s both;
}

body.parent-page-settings [data-settings-reveal].is-visible .settings-lock-pop,
body.parent-page-settings [data-settings-reveal].aos-animate .settings-lock-pop {
    transform-origin: center;
    animation: child-balance-coin-pop 0.9s cubic-bezier(.2, .8, .2, 1) 0.08s both;
}

body.parent-page-settings .split {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
}

body.child-content-theme {
    --child-page-bg-start: #8fd9ff;
    --child-page-bg-mid: #d8f4ff;
    --child-page-bg-end: #fff6c8;
    --child-page-orb-left: rgba(255, 228, 122, 0.58);
    --child-page-orb-right: rgba(121, 202, 255, 0.46);
    --child-page-glow: rgba(255, 220, 130, 0.34);
    --child-page-shadow: rgba(84, 127, 179, 0.14);
    --child-page-card-shadow: rgba(104, 132, 175, 0.1);
    --child-page-text-soft: #7d7094;
    --child-page-pill-bg: rgba(255, 247, 226, 0.9);
    --child-page-pill-text: #705f8f;
    --child-page-accent-1: #57b9ff;
    --child-page-accent-2: #2f73ff;
    background:
        radial-gradient(circle at 0% 100%, var(--child-page-orb-left), transparent 24%),
        radial-gradient(circle at 100% 0%, var(--child-page-orb-right), transparent 28%),
        linear-gradient(180deg, var(--child-page-bg-start) 0%, var(--child-page-bg-mid) 20%, #f9fdff 42%, var(--child-page-bg-end) 100%);
}

body.child-content-theme .page-head,
body.child-content-theme .panel {
    border: 0;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 22px 46px var(--child-page-shadow);
}

body.child-content-theme .page-head {
    margin-bottom: 0;
    padding: 22px 20px 18px;
    align-items: center;
    background:
        radial-gradient(circle at 88% 20%, var(--child-page-glow), transparent 18%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 251, 255, 0.96));
}

body.child-content-theme .page-title {
    color: #253566;
    font-size: clamp(2rem, 6vw, 2.85rem);
    font-weight: 950;
}

body.child-content-theme .page-subtitle {
    color: var(--child-page-text-soft);
    font-weight: 700;
}

body.child-content-theme .split,
body.child-content-theme .grid,
body.child-content-theme .item-grid {
    gap: 18px;
}

body.child-content-theme .panel {
        padding: 16px 16px 18px;
        /* height: 72vh; */
}

body.child-content-theme .float-head {
    display: none;
}

body.child-content-theme .item-card,
body.child-content-theme .child-card,
body.child-content-theme .purchase-card {
    border: 0;
    border-radius: 24px;
    background: linear-gradient(180deg, #ffffff, #fffaf4);
    overflow: hidden;
    box-shadow: 0 14px 30px var(--child-page-card-shadow);
}

body.child-content-theme .purchase-card {
    display: grid;
    grid-template-rows: auto 1fr;
}

body.child-content-theme.child-page-purchases .item-grid.purchases-grid {
    gap: 16px;
}

body.child-content-theme.child-page-purchases .purchases-grid .purchase-card {
    grid-template-columns: none;
    grid-template-rows: auto 1fr;
    align-items: stretch;
}

body.child-content-theme.child-page-purchases .purchases-grid .purchase-card .purchase-image {
    position: relative;
    aspect-ratio: 1 / 1;
    min-height: 0;
    height: auto;
    border-radius: 24px 24px 0 0;
    overflow: hidden;
}

body.child-content-theme.child-page-purchases .purchases-grid .purchase-card .purchase-image img {
    position: absolute;
    inset: 18px;
    width: calc(100% - 36px);
    height: calc(100% - 36px);
    object-fit: contain;
}

body.child-content-theme.child-page-purchases .purchases-grid .purchase-body {
    align-content: start;
    
}

body.child-content-theme.child-page-bonuses .bonus-card {
    grid-template-rows: auto 1fr;
}

body.child-content-theme.child-page-bonuses .bonus-history-image {
    width: calc(100% - 28px);
    height: clamp(180px, 42vw, 240px);
    margin: 14px 14px 0;
    border-radius: 22px;
}

body.child-content-theme.child-page-bonuses .bonus-history-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.child-content-theme.child-page-bonuses .bonuses-load-more-panel {
    min-height: 72px;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

body.child-content-theme.child-page-bonuses .bonuses-load-more-label {
    width: 100%;
    padding: 8px 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

body.child-content-theme.child-page-bonuses .bonuses-load-more-badge {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

body.child-content-theme.child-page-bonuses .bonuses-load-more-icon {
    width: 20px;
    height: 20px;
    display: block;
}

body.child-content-theme.child-page-bonuses .bonuses-load-more-panel.is-loading .bonuses-load-more-icon {
    animation: pullRefreshSpin 0.72s linear infinite;
}

body.child-content-theme.child-page-penalties .penalty-card {
    grid-template-rows: auto 1fr;
}

body.child-content-theme.child-page-penalties .penalty-history-image {
    width: calc(100% - 28px);
    height: clamp(180px, 42vw, 240px);
    margin: 14px 14px 0;
    border-radius: 22px;
}

body.child-content-theme.child-page-penalties .penalty-history-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.child-content-theme.child-page-penalties .penalties-load-more-panel {
    min-height: 72px;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

body.child-content-theme.child-page-penalties .penalties-load-more-label {
    width: 100%;
    padding: 8px 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

body.child-content-theme.child-page-penalties .penalties-load-more-badge {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

body.child-content-theme.child-page-penalties .penalties-load-more-icon {
    width: 20px;
    height: 20px;
    display: block;
}

body.child-content-theme.child-page-penalties .penalties-load-more-panel.is-loading .penalties-load-more-icon {
    animation: pullRefreshSpin 0.72s linear infinite;
}

body.child-content-theme .item-image,
body.child-content-theme .history-image,
body.child-content-theme .learning-hero-image,
body.child-content-theme .video-embed-shell {
    border-radius: 22px;
    /* background: linear-gradient(180deg, #fff7ea, #ffffff);
    box-shadow: 0 12px 24px rgba(136, 146, 179, 0.08); */
}

body.child-content-theme .item-grid .item-image {
    border-radius: 24px 24px 0 0;
}

body.child-content-theme .item-grid .item-image img {
inset: 30px;
    width: calc(100% - 60px);
    height: calc(100% - 60px);
}

body.child-content-theme .history-image {
    overflow: hidden;
}

body.child-content-theme .history-image img,
body.child-content-theme .learning-hero-image img {
    display: block;
    width: 100%;
    height: auto;
}

body.child-content-theme .item-body,
body.child-content-theme .child-body,
body.child-content-theme .purchase-body {
    padding: 14px;
    gap: 10px;
}

body.child-content-theme .item-title,
body.child-content-theme .child-name,
body.child-content-theme .purchase-title {
    color: #1d2a53;
}

body.child-content-theme .item-description,
body.child-content-theme .muted,
body.child-content-theme .learning-lead,
body.child-content-theme .learning-content,
body.child-content-theme .video-watch-note {
    color: var(--child-page-text-soft);
}

body.child-content-theme .pill {
    border: 0;
    border-radius: 14px;
    /* background: var(--child-page-pill-bg); */
    color: var(--child-page-pill-text);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.78);
}

body.child-content-theme .pill.green {
    background: rgba(219, 255, 224, 0.92);
    color: #239a43;
}

body.child-content-theme .pill.price,
body.child-content-theme .quest-price {
    color: #1aa34a;
}

body.child-content-theme .quest-status,
body.child-content-theme .quest-feedback,
body.child-content-theme .learning-completed,
body.child-content-theme .video-completed,
body.child-content-theme .learning-bottom-action,
body.child-content-theme .video-watch-state,
body.child-content-theme .purchase-gadget-timer,
body.child-content-theme .code-box {
    border: 0;
    border-radius: 22px;
    background: linear-gradient(180deg, #ffffff, #fbfdff);
}

body.child-content-theme .purchase-gadget-timer,
body.child-content-theme .code-box {
    padding: 18px;
}

body.child-content-theme .quest-feedback,
body.child-content-theme .learning-completed,
body.child-content-theme .video-completed,
body.child-content-theme .learning-bottom-action,
body.child-content-theme .video-watch-state {
    /* padding: 16px; */
}

body.child-content-theme .flash-stack {
    margin-bottom: 16px;
}

body.child-content-theme .flash {
    border: 0;
    border-radius: 24px;
    padding: 16px 18px;
    font-size: 0.98rem;
    line-height: 1.35;
    box-shadow: inset 0 0 0 1px rgba(171, 196, 236, 0.28);
    background: linear-gradient(180deg, #ffffff, #f9fcff);
}

body.child-content-theme .flash.error {
    color: #d5334e;
    background: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(255, 147, 175, 0.34);
}

body.child-content-theme .flash.success {
    color: #169a47;
    background: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(112, 219, 151, 0.34);
}

body.child-content-theme .flash.info {
    color: #3e67c7;
    background: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(154, 182, 245, 0.34);
}

body.child-content-theme .learning-test-question {
    border: 0;
    border-radius: 28px;

}

body.child-content-theme .learning-answer {
    border-radius: 24px;
}

body.child-content-theme .input,
body.child-content-theme .textarea,
body.child-content-theme .file-control,
body.child-content-theme .file-picker,
body.child-content-theme .points-stepper,
body.child-content-theme .promo-cell,
body.child-content-theme .select-trigger {
    border: 0;
    border-radius: 14px;

}

body.child-content-theme .file-picker-btn {
    border-right: 0;
    border-radius: 16px;
    background: rgba(255, 246, 224, 0.9);
}

body.child-content-theme .promo-cell {
    border-radius: 18px;
}

body.child-content-theme .btn.primary,
body.child-content-theme .btn.green,
body.child-content-theme .shop-cart-btn,
body.child-content-theme .video-btn,
body.child-content-theme .quest-btn,
body.child-content-theme .learning-reward-btn,
body.child-content-theme .learning-submit-btn {
    border: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--child-page-accent-1), var(--child-page-accent-2));
}

body.child-content-theme .btn.danger {
    border: 0;
    border-radius: 16px;
}

body.child-content-theme .shop-cart-btn,
body.child-content-theme .video-btn,
body.child-content-theme .quest-btn,
body.child-content-theme .learning-reward-btn,
body.child-content-theme .learning-submit-btn {
    min-height: 52px;
}

body.child-content-theme .video-progress-btn:disabled {
    background: linear-gradient(135deg, var(--child-page-accent-1), var(--child-page-accent-2));
}

body.child-content-theme .video-progress-btn.is-waiting {
    background: linear-gradient(135deg, var(--child-page-accent-1), var(--child-page-accent-2));
}

body.child-content-theme .empty {
    min-height: 180px;
    height: auto;
    border-radius: 24px;
    /* background: linear-gradient(180deg, #fffdf9, #fff7ea); */
    color: var(--child-page-text-soft);
}

body.child-page-shop {
    --child-page-bg-start: #ffcf86;
    --child-page-bg-mid: #ffe9be;
    --child-page-bg-end: #fff2d8;
    --child-page-orb-left: rgba(255, 210, 94, 0.62);
    --child-page-orb-right: rgba(255, 177, 87, 0.42);
    --child-page-glow: rgba(255, 218, 120, 0.45);
    --child-page-shadow: rgba(184, 127, 43, 0.14);
    --child-page-card-shadow: rgba(174, 129, 59, 0.1);
    --child-page-pill-bg: rgba(255, 243, 213, 0.92);
    --child-page-pill-text: #866548;
    --child-page-text-soft: #8b6f55;
    --child-page-accent-1: #ffb24f;
    --child-page-accent-2: #ff8a31;
}

body.child-page-quests {
    --child-page-bg-start: #ffc995;
    --child-page-bg-mid: #ffe2c2;
    --child-page-bg-end: #fff6dc;
    --child-page-orb-left: rgba(255, 179, 96, 0.56);
    --child-page-orb-right: rgba(255, 136, 76, 0.34);
    --child-page-glow: rgba(255, 208, 126, 0.42);
    --child-page-shadow: rgba(190, 117, 59, 0.14);
    --child-page-card-shadow: rgba(184, 122, 78, 0.1);
    --child-page-pill-bg: rgba(255, 240, 218, 0.92);
    --child-page-pill-text: #855f4c;
    --child-page-text-soft: #8a6b60;
    --child-page-accent-1: #ffad52;
    --child-page-accent-2: #ff7d39;
    background: #ffe4be url('/static/bgs/2.png') center top / cover repeat-y;
}

body.child-page-quests .item-grid,
body.child-page-quests .shop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
}

body.child-page-cart {
    --child-page-bg-start: #9ee3d8;
    --child-page-bg-mid: #d9faf1;
    --child-page-bg-end: #effff8;
    --child-page-orb-left: rgba(114, 225, 196, 0.48);
    --child-page-orb-right: rgba(88, 200, 255, 0.26);
    --child-page-glow: rgba(156, 255, 224, 0.34);
    --child-page-shadow: rgba(81, 149, 136, 0.14);
    --child-page-card-shadow: rgba(90, 148, 154, 0.1);
    --child-page-pill-bg: rgba(230, 255, 247, 0.92);
    --child-page-pill-text: #4c817a;
    --child-page-text-soft: #5e7f86;
    --child-page-accent-1: #4dd7b3;
    --child-page-accent-2: #1cb5a1;
    background: #dff8ef url('/static/bgs/3.png') center top / cover repeat-y;
}

body.child-page-cart .cart-remove-btn {
    justify-content: center;
    color: white;
}

body.child-page-cart .cart-summary-panel {
    padding: 18px 18px 20px;
    gap: 14px;
}

body.child-page-cart .cart-summary-panel .float-head {
    margin-bottom: 0;
}

body.child-page-cart .cart-summary-total {
    font-size: 3.25rem;
}

body.child-page-cart .cart-summary-balance {
    /* margin: 0; */
}



body.child-page-cart .cart-summary-buy-btn:disabled {
    cursor: not-allowed;
    opacity: 0.72;
    background: linear-gradient(135deg, #d7dce7, #b8c0cf);
}

body.child-page-cart .cart-summary-buy-btn.is-loading {
    position: relative;
    pointer-events: none;
    color: transparent !important;
}

body.child-page-cart .cart-summary-buy-btn.is-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 18px;
    height: 18px;
    margin: auto;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.28);
    border-top-color: #ffffff;
    animation: subscriptionActionSpin 0.75s linear infinite;
}

body.child-page-purchases {
    --child-page-bg-start: #b7f0b3;
    --child-page-bg-mid: #e6ffe2;
    --child-page-bg-end: #f8ffef;
    --child-page-orb-left: rgba(145, 228, 107, 0.44);
    --child-page-orb-right: rgba(102, 219, 174, 0.28);
    --child-page-glow: rgba(214, 255, 149, 0.34);
    --child-page-shadow: rgba(98, 156, 89, 0.14);
    --child-page-card-shadow: rgba(107, 158, 116, 0.1);
    --child-page-pill-bg: rgba(238, 255, 230, 0.94);
    --child-page-pill-text: #4f865b;
    --child-page-text-soft: #62806c;
    --child-page-accent-1: #56cf6a;
    --child-page-accent-2: #28b84d;
    background: #e4ffd9 url('/static/bgs/5.png') center top / cover repeat-y;
}

body.child-page-bonuses {
    --child-page-bg-start: #ffe27f;
    --child-page-bg-mid: #fff3b9;
    --child-page-bg-end: #fffceb;
    --child-page-orb-left: rgba(255, 210, 80, 0.56);
    --child-page-orb-right: rgba(255, 166, 73, 0.28);
    --child-page-glow: rgba(255, 235, 148, 0.4);
    --child-page-shadow: rgba(176, 138, 52, 0.14);
    --child-page-card-shadow: rgba(166, 140, 68, 0.1);
    --child-page-pill-bg: rgba(255, 248, 214, 0.94);
    --child-page-pill-text: #89693e;
    --child-page-text-soft: #8d7254;
    --child-page-accent-1: #ffd34a;
    --child-page-accent-2: #ffb322;
    background: #fff1b8 url('/static/bgs/4.png') center top / cover repeat-y;
}

body.child-page-penalties {
    --child-page-bg-start: #ffb3c1;
    --child-page-bg-mid: #ffe0e7;
    --child-page-bg-end: #fff4f7;
    --child-page-orb-left: rgba(255, 139, 165, 0.46);
    --child-page-orb-right: rgba(255, 116, 116, 0.26);
    --child-page-glow: rgba(255, 212, 194, 0.36);
    --child-page-shadow: rgba(176, 104, 118, 0.14);
    --child-page-card-shadow: rgba(166, 110, 126, 0.1);
    --child-page-pill-bg: rgba(255, 237, 241, 0.94);
    --child-page-pill-text: #8d5c69;
    --child-page-text-soft: #8b6875;
    --child-page-accent-1: #ff7f97;
    --child-page-accent-2: #ff5778;
    background: #ffe0e7 url('/static/bgs/6.png') center top / cover repeat-y;
}

body.child-page-settings {
    --child-page-bg-start: #9ed8ff;
    --child-page-bg-mid: #dff4ff;
    --child-page-bg-end: #f4fcff;
    --child-page-orb-left: rgba(118, 198, 255, 0.48);
    --child-page-orb-right: rgba(134, 143, 255, 0.24);
    --child-page-glow: rgba(184, 229, 255, 0.36);
    --child-page-shadow: rgba(89, 132, 176, 0.14);
    --child-page-card-shadow: rgba(98, 136, 172, 0.1);
    --child-page-pill-bg: rgba(234, 246, 255, 0.94);
    --child-page-pill-text: #5a6f95;
    --child-page-text-soft: #6b7da1;
    --child-page-accent-1: #56b7ff;
    --child-page-accent-2: #2f77ff;
    background: #dff4ff url('/static/bgs/1.png') center top / cover no-repeat fixed;
}

body.child-page-settings .flash.success {
    display: none;
}

body.child-home-theme .flash-stack,
body.child-content-theme .flash-stack {
    display: none;
}

body.child-page-settings .panel,
body.child-page-settings .code-box,
body.child-page-settings .select-menu,
body.child-page-settings .btn.primary {
    box-shadow: none;
}

body.child-page-settings .panel {
    height: auto;
    min-height: 0;
}

body.child-page-settings .child-settings-layout {
    display: grid;
    gap: 32px;
}

body.child-page-settings .app-topbar-inner {
    width: min(430px, calc(100% - 24px));
}

body.child-page-settings .child-settings-profile-panel,
body.child-page-settings .child-settings-code-panel,
body.child-page-settings .child-settings-promo-panel,
body.child-page-settings .child-settings-password-panel {
    padding: 22px 20px;
}

.settings-password-panel {
    display: grid;
    gap: 14px;
}

.settings-password-form {
    display: grid;
    gap: 0;
}

.settings-password-form .btn.primary {
    margin-top: 12px;
}

@media (min-width: 761px) {
    .settings-password-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 14px;
    }

    .settings-password-form .field:last-of-type,
    .settings-password-form .btn.primary {
        grid-column: 1 / -1;
    }
}

body.child-page-settings .child-settings-form {
    display: grid;
    gap: 0;
}

body.child-page-settings .child-settings-form .btn.primary {
    margin-top: 12px;
}

body.child-page-settings .settings-block-title {
    margin: 0 0 14px;
    font-size: 1.1rem;
    line-height: 1.2;
    font-weight: 900;
    color: #1b274a;
}

body.child-page-settings .child-settings-code-panel .code-box,
body.child-page-settings .child-settings-promo-panel .promo-form {
    margin-top: 0;
}

body.child-page-settings .child-settings-code-panel .code-box {
    padding: 22px 18px;
    text-align: center;
    /* border: 1px solid rgba(166, 198, 236, 0.8); */
    /* border-radius: 24px; */
    /* background: linear-gradient(180deg, #eef8ff 0%, #dff1ff 100%); */
}

body.child-page-settings .promo-panel {
    margin-bottom: 0;
}

body.child-page-settings .promo-panel .promo-form {
    width: 100%;
}

body.child-page-settings .field label,
body.child-page-settings .float-head {
    display: inline-flex;
    margin-bottom: 8px;
}

body.child-page-settings .float-head img {
    display: block;
}

body.child-page-settings .field {
    margin-bottom: 20px;
}

body.child-page-settings .field .input,
body.child-page-settings .field .select-trigger,
body.child-page-settings .float-field,
body.child-page-settings .file-picker,
body.child-page-settings .file-picker-preview {
    border: 0;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff, #f6faff);
    box-shadow: inset 0 0 0 1px rgba(171, 196, 236, 0.45);
}

body.child-page-settings .field .input,
body.child-page-settings .field .select-trigger {
    min-height: 58px;
    padding: 0 16px;
}

body.child-page-settings .float-field {
    padding: 18px 12px 12px;
}

body.child-page-settings .child-settings-avatar-field {
    border-radius: 12px;
    background: rgb(248 250 252);
    box-shadow: inset 0 0 0 1px rgba(207, 220, 239, 0.65);
    padding-top: 20px;
}

body.child-page-settings .child-settings-avatar-field .float-head {
    background: linear-gradient(360deg, #f8fafc, transparent);
}

body.child-page-settings .child-settings-avatar-field .file-picker {
    border-radius: 12px;
    background: transparent;
    box-shadow: none;
}

body.child-page-settings .child-settings-avatar-field .file-picker-btn {
    border-radius: 12px;
}

body.child-page-settings .file-picker {
    min-height: 58px;
    border-radius: 11px;
    background: linear-gradient(180deg, #ffffff, #f6faff);
}

body.child-page-settings .file-picker-btn {
    min-height: 58px;
    border-radius: 18px;
    background: transparent;
    box-shadow: none;
}

body.child-page-settings .select-trigger-value img,
body.child-page-settings .select-option img,
body.child-page-settings .settings-panel-title-with-icon img {
    width: 26px;
    height: 26px;
}

body.child-page-settings .select-trigger {
    min-height: 58px;
}

body.child-page-videos {
    --child-page-bg-start: #caa4ff;
    --child-page-bg-mid: #efe3ff;
    --child-page-bg-end: #faf4ff;
    --child-page-orb-left: rgba(181, 123, 255, 0.42);
    --child-page-orb-right: rgba(116, 194, 255, 0.24);
    --child-page-glow: rgba(221, 192, 255, 0.34);
    --child-page-shadow: rgba(129, 96, 177, 0.14);
    --child-page-card-shadow: rgba(133, 103, 173, 0.1);
    --child-page-pill-bg: rgba(246, 236, 255, 0.94);
    --child-page-pill-text: #765e95;
    --child-page-text-soft: #7c6f9b;
    --child-page-accent-1: #c26fff;
    --child-page-accent-2: #9555ef;
}

body.child-page-video-detail {
    --child-page-bg-start: #d0b2ff;
    --child-page-bg-mid: #f2e7ff;
    --child-page-bg-end: #fff6ff;
    --child-page-orb-left: rgba(198, 126, 255, 0.42);
    --child-page-orb-right: rgba(255, 172, 211, 0.24);
    --child-page-glow: rgba(234, 196, 255, 0.34);
    --child-page-shadow: rgba(141, 104, 184, 0.14);
    --child-page-card-shadow: rgba(138, 106, 178, 0.1);
    --child-page-pill-bg: rgba(248, 237, 255, 0.94);
    --child-page-pill-text: #7d6396;
    --child-page-text-soft: #816f99;
    --child-page-accent-1: #c76fff;
    --child-page-accent-2: #a353ef;
}

body.child-page-learning-detail {
    --child-page-bg-start: #a8cbff;
    --child-page-bg-mid: #e4f0ff;
    --child-page-bg-end: #f8fbff;
    --child-page-orb-left: rgba(106, 166, 255, 0.44);
    --child-page-orb-right: rgba(120, 123, 255, 0.24);
    --child-page-glow: rgba(198, 221, 255, 0.34);
    --child-page-shadow: rgba(92, 126, 178, 0.14);
    --child-page-card-shadow: rgba(98, 129, 176, 0.1);
    --child-page-pill-bg: rgba(236, 244, 255, 0.94);
    --child-page-pill-text: #5b6d96;
    --child-page-text-soft: #6f7fa3;
    --child-page-accent-1: #5e8cff;
    --child-page-accent-2: #4a63ff;
}

body.child-shop-theme {
    background: #ffe7b1 url('/static/bgs/2.png') center top / cover repeat-y;
}

body.auth-page.login-page,
body.auth-page.register-page,
body.parent-theme,
body.child-home-theme,
body.child-shop-theme,
body.child-page-quests,
body.child-page-cart,
body.child-page-purchases,
body.child-page-bonuses,
body.child-page-penalties {
    min-height: 100dvh;
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

body.child-shop-theme .child-shop-page {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

body.child-shop-theme .child-shop-head,
body.child-shop-theme .child-shop-panel {
    border: 0;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 22px 46px rgba(184, 127, 43, 0.14);
}

body.child-shop-theme .child-shop-head {
    margin-bottom: 0;
    padding: 22px 20px 18px;
    align-items: center;
    background:
        radial-gradient(circle at 88% 20%, rgba(255, 218, 120, 0.45), transparent 18%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 248, 237, 0.96));
}

body.child-shop-theme .child-shop-head .page-title {
    color: #2b2a4a;
    font-size: clamp(2rem, 6vw, 2.8rem);
    font-weight: 950;
}

body.child-shop-theme .child-shop-head .page-subtitle {
    max-width: 28rem;
    color: #8b6f55;
    font-weight: 700;
}

body.child-shop-theme .child-shop-panel {
    /* padding: 20px 16px 16px; */
    height: auto;
    min-height: 0;
}

body.child-shop-theme .child-shop-panel .float-head {
    display: none;
}

body.child-shop-theme .child-shop-grid {
    gap: 14px;
        margin-top: 0px;
}

.card-pack-continue-list {
    display: grid;
    gap: 12px;
}

.card-pack-continue-row {
display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 24px;
    background: linear-gradient(180deg, #ffffff, #ffffff);
    text-decoration: none;
    color: inherit;
}

.card-pack-continue-thumb {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    background: #ffffff;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.card-pack-continue-thumb img {
    width: 58px;
    height: 58px;
    object-fit: contain;
}

.card-pack-continue-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.card-pack-continue-copy strong {
    color: #1d2a53;
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.2;
}

.card-pack-continue-copy span {
    color: #7e7091;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.3;
}

body.child-shop-theme .shop-gadget-panel {
    margin-bottom: 0;
    background:
        radial-gradient(circle at 12% 20%, rgba(255, 227, 152, 0.38), transparent 16%),
        linear-gradient(180deg, #fffaf1, #ffffff 72%);
}

body.child-shop-theme .child-shop-items-panel {
    background:
        radial-gradient(circle at 88% 16%, rgba(255, 219, 138, 0.28), transparent 18%),
        linear-gradient(180deg, #fffdf8, #ffffff 78%);
}

body.child-shop-theme .child-shop-card {
    border: 0;
    border-radius: 24px;
    background: linear-gradient(180deg, #ffffff, #fffaf4);
    overflow: hidden;
}

body.child-shop-theme .child-shop-card .item-image {
    background: #ffffff !important;
}

body.child-shop-theme .child-shop-card .item-body {
    /* min-height: 168px; */
    padding: 14px;
    gap: 10px;
    /* background-color: white !important; */
}

body.child-shop-theme .child-shop-card .item-title {
    color: #1d2a53;
    font-size: 1rem;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

body.child-shop-theme .child-shop-card .item-description {
    color: #7e7091;
}

body.child-shop-theme .child-shop-card .shop-cart-btn {
    min-height: 52px;
    border: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, #ffb24f, #ff8a31);
}

body.child-shop-theme .child-shop-card .shop-cart-btn:hover,
body.child-shop-theme .child-shop-card .shop-cart-btn:focus {
    background: linear-gradient(135deg, #ffa33d, #ff7c20);
}

body.child-shop-theme .child-shop-card .shop-cart-btn:disabled {
    cursor: not-allowed;
    opacity: 0.72;
    background: linear-gradient(135deg, #d7dce7, #b8c0cf);
}

body.child-shop-theme .gadget-shop-card .gadget-shop-image {
    min-height: 132px;
}

.shop-plan-limit-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    /* min-width: 68px; */
    padding: 5px 5px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.94);
    color: #1d2a53;
    font-size: 0.8rem;
    font-weight: 900;
    line-height: 1;
    text-align: center;
}

body.child-shop-theme .empty {
    min-height: 180px;
    height: auto;
    border-radius: 24px;
    background: linear-gradient(180deg, #fffdf9, #fff7ea);
    color: #8b6f55;
}

.parents-panel {
    margin-bottom: 28px;
}

.gadget-panel {
    margin-bottom: 28px;
}

.panel.gadget-state-empty,
.child-card.gadget-state-empty {
    border-color: #dc2626;
}

.panel.gadget-state-warning,
.child-card.gadget-state-warning {
    border-color: #f59e0b;
}

.panel.gadget-state-good,
.child-card.gadget-state-good {
 border: 0;
}

.gadget-timer-card {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 16px;
}

.gadget-timer-label {
    color: var(--text);
    font-size: 1.05rem;
    font-weight: 900;
}

.gadget-timer-hint {
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.35;
}

.gadget-countdown-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    justify-self: center;
}

.gadget-countdown {
    color: #0f172a;
    font-size: clamp(2.2rem, 10vw, 4.3rem);
    font-weight: 950;
    line-height: 0.92;
    letter-spacing: 0.2em;
    white-space: nowrap;
}

.gadget-countdown.is-empty,
.child-gadget-timer.is-empty,
.purchase-gadget-timer strong.is-empty {
    color: #dc2626;
}

.gadget-state-warning .gadget-countdown,
.gadget-state-warning .child-gadget-timer {
    color: #d97706;
}

.gadget-state-good .gadget-countdown,
.gadget-state-good .child-gadget-timer {
    color: #16a34a;
}

.gadget-plan-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.gadget-plan-btn {
    width: 100%;
    min-height: 74px;
    border: 1px solid rgba(37, 99, 235, 0.16);
    border-radius: 12px;
    background: #fff;
    color: var(--text);
    display: grid;
    place-items: center;
    gap: 6px;
    padding: 10px;
    cursor: pointer;
    font: inherit;
    font-weight: 900;
}

.gadget-plan-btn:active {
    transform: translateY(1px);
}

.shop-gadget-panel {
    margin-bottom: 14px;
}

.gadget-shop-grid {
    margin-top: 10px;
}

.gadget-shop-card {
    border-color: rgba(14, 210, 179, 0.38);
    background:
        radial-gradient(circle at 18% 10%, rgba(14, 210, 179, 0.14), transparent 38%),
        #fff;
}

.gadget-shop-image {
    min-height: 118px;
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, rgba(239, 246, 255, 0.98), rgba(240, 253, 250, 0.9));
}

.gadget-shop-image img {
    width: calc(100% - 28px);
    height: calc(100% - 28px);
    object-fit: contain;
    opacity: 1;
}

.child-gadget-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 0;
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 800;
}

.child-gadget-mainline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.child-gadget-icon {
    width: 23px;
    height: 23px;
    object-fit: contain;
    flex: 0 0 auto;
}

.child-card-divider {
    width: 100%;
    border: 0;
    border-top: 1px solid var(--border);
    margin: 2px 0 0;
}

.child-gadget-timer {
    color: #0f172a;
    font-weight: 950;
    letter-spacing: -0.04em;
}


body.parent-theme .parent-child-gadget-progress {
    display: grid;
    gap: 0;
    margin-top: 8px;
}

body.parent-theme .parent-child-gadget-progress-bar {
    --gadget-progress: 0%;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: block;
    min-height: 10px;
    padding: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(211, 231, 255, 0.92), rgba(241, 247, 255, 0.98));
    box-shadow: inset 0 0 0 1px rgba(171, 196, 236, 0.26);
}

body.parent-theme .parent-child-gadget-progress-bar::before {
    content: "";
    position: absolute;
    inset: 0;
    width: var(--gadget-progress);
    border-radius: inherit;
    background: linear-gradient(90deg, #2f67f6, #4a88ff);
    box-shadow: 0 0 16px rgba(47, 103, 246, 0.22);
    transition: width 0.9s linear;
    transform-origin: left center;
}

body.parent-theme .parent-children-grid .child-card-divider {
    display: none;
}

@keyframes parent-child-balance-row-glow {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
        filter: saturate(1);
    }
    35% {
        transform: translate3d(0, -1px, 0) scale(1.03);
        filter: saturate(1.12);
    }
    100% {
        transform: translate3d(0, 0, 0) scale(1);
        filter: saturate(1);
    }
}

body.parent-theme .child-card.is-balance-spotlight .child-balance-line {
    transform-origin: left center;
    animation: parent-child-balance-row-glow 0.72s cubic-bezier(.2, .8, .2, 1) both;
}

body.parent-theme .child-card.is-balance-spotlight [data-child-balance-coin] {
    transform-origin: center;
    animation: child-balance-coin-reward-burst 0.68s cubic-bezier(.2, .8, .2, 1) 1 both;
}

body.parent-theme .child-card.is-balance-spotlight.is-balance-reward .child-balance-line {
    color: #138a45;
}

body.parent-theme .child-card.is-balance-spotlight.is-balance-penalty .child-balance-line {
    color: #c2410c;
}

.child-activity-panel {
    display: grid;
    gap: 10px;
    margin-top: 10px;
    margin-inline: -2px;
    padding: 10px 8px 8px;
    border-radius: 24px;
    min-width: 0;
    max-width: 100%;
    /* background:
        radial-gradient(circle at 12% 12%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.82) 38%, rgba(244, 249, 255, 0.9) 100%),
        linear-gradient(180deg, rgba(232, 244, 255, 0.86), rgba(246, 251, 255, 0.94));
    box-shadow:
        inset 0 0 0 1px rgba(171, 196, 236, 0.32),
        0 12px 28px rgba(124, 157, 208, 0.14); */
}

.child-activity-chart {
    /* min-height: 152px; */
    /* padding: 8px 8px 2px; */
    /* border-radius: 20px; */
    /* background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(241, 248, 255, 0.88)); */
    /* box-shadow: inset 0 0 0 1px rgba(185, 206, 238, 0.32); */
    overflow: hidden;
    min-width: 0;
    max-width: 100%;
}

.child-activity-chart .apexcharts-canvas,
.child-activity-chart svg {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 18px;
}

.child-activity-legend {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 2px;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}

.child-activity-legend::-webkit-scrollbar {
    display: none;
}

.child-activity-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: inset 0 0 0 1px rgba(185, 206, 238, 0.34);
    white-space: nowrap;
    font-size: 0.72rem;
    font-weight: 800;
    flex: 0 0 auto;
}

.child-activity-legend-item strong {
    font-weight: 900;
}

.child-activity-legend-item i {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    display: inline-block;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.92);
}

.child-activity-legend-item i.balance {
    background: #2f67f6;
}

.child-activity-legend-item.balance {
    color: #2f67f6;
}

.child-activity-legend-item i.earned {
    background: #19b46b;
}

.child-activity-legend-item.earned {
    color: #19b46b;
}

.child-activity-legend-item i.penalties {
    background: #ff5b6f;
}

.child-activity-legend-item.penalties {
    color: #e14f65;
}

.child-activity-legend-item i.purchases {
    background: #ffb629;
}

.child-activity-legend-item.purchases {
    color: #d79210;
}

.purchase-gadget-timer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border-radius: 10px;
    background: rgba(14, 210, 179, 0.08);
    color: var(--muted);
    font-weight: 800;
}

.purchase-gadget-timer strong {
    color: #0f172a;
    font-size: 1.4rem;
    letter-spacing: -0.05em;
}

.promo-panel .promo-form {
    margin-top: 4px;
}

.promo-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
}

.promo-cell {
    width: 100%;
    aspect-ratio: 1 / 1;
    border: 1px solid #dfe5ee00;
    border-radius: 17px;
    background: #e5f6ff;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 900;
    text-transform: uppercase
}

.panel {
    position: relative;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.86);
    padding: 20px;
border-color: #0ed2b3;
    box-shadow: 0 0 0 0.2rem rgb(37 144 235 / 12%);
}

.grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.item-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    align-items: stretch;
    gap: 12px;
}

.shop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
}

.item-card,
.child-card,
.purchase-card {
    position: relative;
    /* border: 1px solid var(--border); */
    border-radius: 8px;
    background: var(--surface);
    overflow: hidden;
}

.item-card {
    display: grid;
    grid-template-rows: auto 1fr;
    overflow: visible;
}

.item-card:has(.dropdown:not([hidden])) {
    z-index: 20;
}

.child-card {
    overflow: visible;
    z-index: 1;
    min-width: 0;
    max-width: 100%;
}

.child-card:has(.dropdown:not([hidden])) {
    z-index: 20;
}

.item-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: white;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    color: var(--muted);
    font-weight: 800;
}

.item-image img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.item-grid .item-image {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
}

.item-grid .item-image img {
    position: absolute;
    inset: 18px;
    width: calc(100% - 36px);
    height: calc(100% - 36px);
}

.item-grid .item-image img.item-image-fallback {
    position: static;
    inset: auto;
    width: 50px;
    height: 50px;
    max-width: 50px;
    max-height: 50px;
}

.item-body,
.child-body,
.purchase-body {
    padding: 16px;
    display: grid;
    gap: 10px;
    min-width: 0;
    max-width: 100%;
    border-radius: inherit;
}

.item-title,
.child-name,
.purchase-title {
    margin: 0;
    font-size: 1.08rem;
    line-height: 1.2;
    font-weight: 900;
}

.purchases-panel {
    box-shadow: none;
}

.purchases-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 16px;
}

.purchases-grid .purchase-card {
    display: grid;
    grid-template-rows: auto 1fr;
    min-width: 0;
}

.purchases-grid .meta-avatar {
    width: 20px;
    height: 20px;
    border-radius: 999px;
    object-fit: cover;
    flex: 0 0 20px;
}

.purchases-grid .meta-avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #ffffff 0%, #eff6ff 100%);
    color: #2563eb;
    /* font-size: 12px; */
    font-weight: 800;
    line-height: 1;
    /* border: 1px solid rgba(37, 99, 235, 0.18); */
    margin-right: 5px;
}

.purchases-grid .purchase-image {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 22px 22px 0 0;
    overflow: hidden;
    background: #ffffff;
}

.purchases-grid .purchase-image img {
    position: absolute;
    inset: 18px;
    width: calc(100% - 36px);
    height: calc(100% - 36px);
    object-fit: contain;
}

.purchases-grid .purchase-body {
    /* min-height: 156px; */
    grid-template-rows: auto auto 1fr auto;
    align-content: start;
    padding: 14px;
    gap: 10px;
    background: aliceblue;
}

.purchase-fulfill-btn {
    position: relative;
}

.purchase-fulfill-btn.is-loading,
.purchase-fulfill-btn.is-loading:disabled {
    pointer-events: none;
    color: transparent !important;
    cursor: wait;
}

.purchase-fulfill-btn.is-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 18px;
    height: 18px;
    margin: auto;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.28);
    border-top-color: #ffffff;
    animation: subscriptionActionSpin 0.75s linear infinite;
}

.purchases-grid .purchase-title {
    font-size: 1rem;
    line-height: 1.22;
}

.purchases-grid .purchase-body form {
    align-self: end;
}

.item-grid .item-body {
    /* min-height: 132px; */
    grid-template-rows: auto auto 1fr;
    padding: 12px;
    gap: 8px;
}

.item-grid .item-body form {
    grid-row: 3;
    align-self: end;
}

.item-grid .item-title {
    font-size: 0.98rem;
    line-height: 1.2;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.item-description {
    color: var(--muted);
    font-size: 0.84rem;
    line-height: 1.32;
    overflow: hidden;
    min-width: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.item-grid .item-description {
    min-height: calc(0.84rem * 1.32 * 2);
}

.shop-cart-btn {
    min-height: 44px;
    padding: 0 10px;
    justify-content: center;
    align-items: center;
}

.shop-cart-price {
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.shop-cart-price .coin-icon {
    width: 16px;
    height: 16px;
    margin-left: 0;
}

.shop-plan-note {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4px;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
}

.shop-plan-note-icon {
    width: 14px;
    height: 14px;
    object-fit: contain;
    flex: 0 0 auto;
}

.shop-learning-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.86);
    color: #334155;
    font-size: 0.86rem;
    font-weight: 800;
}

.shop-learning-badge img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.muted {
    color: var(--muted);
}

.meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pill {
    gap: 5px;
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 5px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-soft);
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--muted);
}

.pill.price {
    color: var(--blue);
    border-color: rgba(36, 107, 254, 0.18);
}

.history-image {
    width: 96px;
    height: 96px;
    margin: 14px 14px 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-soft);
    display: block;
    overflow: hidden;
    cursor: zoom-in;
}

.history-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.coin-icon {
    width: 1.2em;
    height: 1.2em;
    object-fit: contain;
    vertical-align: -0.16em;
    margin-left: 0.22em;
}

.pill .coin-icon {
    width: 15px;
    height: 15px;
    margin-left: 4px;
        margin-right: 4px;
}

.points-with-coin {
    display: inline-flex;
    align-items: center;
    gap: 0.28em;
    white-space: nowrap;
}

.points-with-coin .coin-icon {
    margin-left: 0;
}

.pill.green {
    /* color: var(--green);
    border-color: rgba(22, 163, 74, 0.18);
    background: rgba(22, 163, 74, 0.06); */
}

.child-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    max-width: 100%;
}

.child-main {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
}

.child-info {
    flex: 1 1 auto;
    min-width: 0;
}

.trophy-strip {
    margin-top: 8px;
    display: flex;
    /* gap: 8px; */
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding-right: 4px;
    padding-bottom: 2px;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}

.trophy-strip::-webkit-scrollbar {
    display: none;
}

.trophy-chip {
    flex: 0 0 auto;
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    min-height: 40px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    transform-origin: center;
    will-change: transform, opacity, filter;
}

.trophy-chip-trigger {
    appearance: none;
    cursor: pointer;
    font: inherit;
    color: inherit;
    text-align: left;
}

.trophy-chip-trigger:focus-visible {
    outline: 0;
    opacity: 0.82;
}

.trophy-chip img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    flex: 0 0 auto;
}

.trophy-chip.is-entering {
    animation: parent-trophy-chip-enter 0.62s cubic-bezier(.22, .61, .36, 1) both;
}

.trophy-chip.is-removing {
    pointer-events: none;
    animation: parent-trophy-chip-exit 0.42s cubic-bezier(.4, 0, .2, 1) both;
}

@keyframes parent-trophy-chip-enter {
    0% {
        opacity: 0;
        transform: translate3d(0, 8px, 0) scale(0.58) rotate(-10deg);
        filter: saturate(0.84) blur(1px);
    }
    56% {
        opacity: 1;
        transform: translate3d(0, -3px, 0) scale(1.12) rotate(4deg);
        filter: saturate(1.08) blur(0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
        filter: saturate(1) blur(0);
    }
}

@keyframes parent-trophy-chip-exit {
    0% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
        filter: saturate(1) blur(0);
    }
    100% {
        opacity: 0;
        transform: translate3d(0, 8px, 0) scale(0.44) rotate(10deg);
        filter: saturate(0.82) blur(1px);
    }
}

.child-title-line {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.purchase-waiting-badge {
    min-width: 19px;
    height: 19px;
    border-radius: 999px;
    background: #ff2222;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 7px;
    font-size: 0.78rem;
    font-weight: 900;
    line-height: 1;
    flex: 0 0 auto;
    transform-origin: center;
    animation: purchaseBadgePulse 1.2s ease-in-out infinite;
    box-shadow: 0 0 0 0 rgba(255, 34, 34, 0.35);
}

.purchase-waiting-badge img {
    width: 13px;
    height: 13px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

@keyframes purchaseBadgePulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 34, 34, 0.35);
    }
    50% {
        transform: scale(1.14);
        box-shadow: 0 0 0 7px rgba(255, 34, 34, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 34, 34, 0);
    }
}

.menu-wrap {
    position: relative;
    flex: 0 0 auto;
}

.dots-btn {
width: 38px;
    height: 38px;
    border: 1px solid #dfe5ee00;
    border-radius: 8px;
    background: #ffffff00;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.dots-btn img {
    width: 18px;
    height: 18px;
}

.dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 12;
    width: min(400px, calc(100vw - 32px));
    border-radius: 8px;
    background: #ffffff91;
    padding: 12px;
    backdrop-filter: blur(3px);
}

.dropdown[hidden] {
    display: none;
}

.item-menu-wrap {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 15;
}

.item-dots-btn {
    width: 36px;
    height: 36px;
    /* background: rgba(255, 255, 255, 0.94); */
    /* box-shadow: 0 8px 18px rgba(25, 34, 53, 0.12); */
    /* backdrop-filter: blur(10px); */
}

.item-dropdown {
    width: min(230px, calc(100vw - 32px));
    padding: 6px;
}

.dropdown-action {
    width: 100%;
    min-height: 42px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    padding: 0 10px;
    display: flex;
    align-items: center;
    text-align: left;
    text-decoration: none;
    font-weight: 800;
    cursor: pointer;
}

.dropdown-action:hover,
.dropdown-action:focus {
    background: var(--surface-soft);
}

.dropdown-action.danger {
    color: var(--red);
}

.actions-row {
    display: flex;
    gap: 17px;
}

.actions-row > * {
    flex: 1;
    min-width: 0;
}

.points-stepper {
    width: 100%;
    min-height: 48px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    align-items: stretch;
    overflow: hidden;
}

.points-stepper-btn {
    border: 0;
    background: var(--surface-soft);
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    line-height: 1;
    font-weight: 900;
    cursor: pointer;
}

.points-stepper-btn img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    display: block;
}

.points-stepper-btn:hover,
.points-stepper-btn:focus {
    background: #eef3fb;
}

.points-stepper-btn:disabled {
    cursor: default;
    opacity: 0.45;
}

.points-stepper-input {
    min-width: 0;
    width: 100%;
    border: 0;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    background: #ffffff;
    color: var(--text);
    text-align: center;
    font-size: 1.05rem;
    font-weight: 900;
    outline: none;
    -moz-appearance: textfield;
}

.points-stepper-input::-webkit-outer-spin-button,
.points-stepper-input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.points-stepper:focus-within {
    border-color: rgba(36, 107, 254, 0.68);
    box-shadow: 0 0 0 3px rgba(36, 107, 254, 0.12);
}

.file-picker {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 46px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #ffffff;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    gap: 0;
}

.file-picker[hidden] {
    display: none;
}

.file-picker-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    border: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    clip-path: inset(50%);
}

.file-picker-btn {
    flex: 1 1 auto;
    width: 100%;
    min-height: 46px;
    border-right: 0;
    background: var(--surface-soft);
    color: var(--text);
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* font-weight: 800; */
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}

.file-picker-paste-btn {
    flex: 0 0 auto;
    min-width: 112px;
    border: 0;
    /* border-right: 1px solid var(--border); */
    background: #427efc;
    color: #ffffff;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: inherit;
    /* font-weight: 800; */
    cursor: pointer;
    position: relative;
    border-radius: 11px;
}

.file-picker-paste-btn[hidden] {
    display: none;
}

.file-picker-paste-btn.is-loading {
    color: transparent;
    pointer-events: none;
}

.file-picker-paste-btn.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border-radius: 50%;
    border: 2px solid rgba(47, 79, 157, 0.22);
    border-top-color: #3d6df2;
    animation: bc-file-picker-spin 0.7s linear infinite;
}

.file-picker-name {
    display: none;
}

.file-picker:focus-within,
.file-picker:hover {
    border-color: var(--border-strong);
}

.file-picker-shell {
    display: grid;
    gap: 10px;
    width: 100%;
    min-width: 0;
    position: relative;
}

.file-picker-shell.is-loading .file-picker,
.file-picker-shell.is-loading .file-picker-preview {
    opacity: 0.45;
    pointer-events: none;
}

.file-picker-shell.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 34px;
    height: 34px;
    margin: -17px 0 0 -17px;
    border-radius: 50%;
    border: 3px solid rgba(61, 109, 242, 0.18);
    border-top-color: #3d6df2;
    animation: bc-file-picker-spin 0.8s linear infinite;
    z-index: 2;
}

.file-picker-preview {
    position: relative;
    width: 100%;
    min-width: 0;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
    overflow: hidden;
}

.file-picker-preview[hidden] {
    display: none;
}

.file-picker-preview-image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: var(--surface-soft);
}

.file-picker-preview-remove {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.94);
    color: #22304f;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    line-height: 4;
    cursor: pointer;

}

.file-picker-preview-remove:hover,
.file-picker-preview-remove:focus {
    background: rgba(245, 248, 255, 0.98);
}

@keyframes bc-file-picker-spin {
    to {
        transform: rotate(360deg);
    }
}

.split {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 28px;
}

.home-stack {
    display: grid;
    gap: 28px;
    align-content: start;
}

.share-dropdown {
    width: min(320px, calc(100vw - 32px));
}

.empty {
    background: rgb(238 244 255 / 65%) !important;    padding: 28px 18px;
    text-align: center;
    color: var(--muted);
    font-weight: 700;
    /* height: 72vh; */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: medium;
    font-weight: 500;
}
.empty_0 {
background: linear-gradient(180deg, rgb(238 244 255 / 65%), transparent);
    padding: 118px 18px;
    text-align: center;
    color: var(--muted);
    font-weight: 700;
    /* height: 100%; */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: medium;
    font-weight: 500;
    border-radius: 19px;
}

.panel .empty:not(.parent-empty-children) {
    flex-direction: column;
    gap: 18px;
        border-radius: 16px;
}

.panel .empty:not(.parent-empty-children)::before {
    content: "";
    width: 50px;
    height: 50px;
    flex: 0 0 auto;
    background: url('/static/icons/menu/empty_box.png') center / contain no-repeat;
}

.panel .empty.empty-cube-one::before {
    background-image: url('/static/icons/menu/cube_one.png');
}

.panel .empty.empty-cube-two::before {
    background-image: url('/static/icons/menu/cube_two.png');
}

.panel .empty.empty-books::before {
    background-image: url('/static/icons/menu/books.png');
}

.panel .empty.empty-parent::before {
    background-image: url('/static/icons/menu/parent.png');
}

.panel .empty.empty-chair::before {
    background-image: url('/static/icons/menu/chair.png');
}

.panel .empty.empty-ship::before {
    background-image: url('/static/icons/menu/ship.png');
}

.code-box {
    /* border: 1px solid var(--border); */
    border-radius: 8px;
    background: var(--surface-soft);
    padding: 18px;
    text-align: center;
}

.code-value {
    font-size: clamp(2rem, 9vw, 4rem);
    line-height: 1;
    font-weight: 900;
}

.notification-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    pointer-events: none;
}

.notification-modal[hidden] {
    display: none;
}

.notification-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(18, 24, 38, 0.22);
    opacity: 0;
    transition: opacity 0.18s ease;
    pointer-events: auto;
}

.notification-sheet {
    position: absolute;
    left: 50%;
    right: auto;
    top: 76px;
    width: min(420px, calc(100vw - 32px));
    max-height: min(620px, calc(100vh - 96px));
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow);
    overflow: hidden;
    transform: translate(-50%, -10px);
    opacity: 0;
    transition: transform 0.18s ease, opacity 0.18s ease;
    pointer-events: auto;
}

.notification-modal.show .notification-backdrop,
.notification-modal.show .notification-sheet {
    opacity: 1;
}

.notification-modal.show .notification-sheet {
    transform: translate(-50%, 0);
}

.notification-head {
    min-height: 58px;
    border-bottom: 1px solid var(--border);
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.notification-title {
    margin: 0;
    font-size: 1.05rem;
}

body.share-sheet-open {
    overflow: hidden;
}

.share-sheet-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    pointer-events: none;
}

.share-sheet-modal[hidden] {
    display: none;
}

.share-sheet-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(18, 24, 38, 0.18);
    opacity: 0;
    transition: opacity 0.18s ease;
    pointer-events: auto;
}

.share-sheet {
    position: absolute;
    left: 50%;
    right: auto;
    bottom: 12px;
    width: min(430px, calc(100vw - 24px));
    padding: 30px 18px 20px;
    border: 1px solid var(--border);
    border-radius: 30px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 252, 255, 0.96));
    box-shadow: 0 26px 56px rgba(72, 124, 177, 0.22);
    transform: translate(-50%, 22px);
    opacity: 0;
    transition: transform 0.18s ease, opacity 0.18s ease;
    pointer-events: auto;
}

body.parent-page-settings .share-sheet,
body.child-page-settings .share-sheet {
    bottom: 42px;
}

.share-sheet::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 50%;
    width: 58px;
    height: 6px;
    border-radius: 999px;
    background: rgba(138, 168, 214, 0.44);
    transform: translateX(-50%);
}

.share-sheet-modal.show .share-sheet-backdrop,
.share-sheet-modal.show .share-sheet {
    opacity: 1;
}

.share-sheet-modal.show .share-sheet {
    transform: translate(-50%, -20px);
}

.share-sheet-head {
    min-height: 66px;
    padding-top: 6px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.share-sheet-copy {
    display: grid;
    gap: 4px;
}

.share-sheet-title {
    margin: 0;
    font-size: 1.28rem;
    line-height: 1.1;
    font-weight: 900;
    color: #1d2a53;
}

.share-sheet-subtitle {
    margin: 0;
    color: #66799f;
    font-size: 0.95rem;
    font-weight: 700;
}

.share-sheet-close {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
    color: #22304f;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.share-sheet-form {
    margin-top: 10px;
    display: grid;
    gap: 14px;
}

.share-sheet-form > * {
    min-width: 0;
    max-width: 100%;
}

.share-sheet-form .field {
    margin-bottom: 0;
}

.share-sheet-form .field label {
    margin-bottom: 8px;
    color: #1d2a53;
    font-size: 0.98rem;
    font-weight: 900;
}

.trophy-picker-shell {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* border-radius: 22px; */
    /* background: linear-gradient(180deg, #ffffff, #f6faff); */
    /* box-shadow: inset 0 0 0 1px rgba(171, 196, 236, 0.45); */
    /* padding: 12px; */
}

.trophy-picker-track {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-inline: 34px;
    padding-bottom: 2px;
    scrollbar-width: none;
    padding-left: 0 !important;
}

.trophy-picker-track::-webkit-scrollbar {
    display: none;
}

.trophy-picker-shell.is-static .trophy-picker-scroll-btn {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.trophy-picker-scroll-btn {
    position: absolute;
    top: 50%;
    z-index: 3;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transform: translateY(-50%);
    transition: opacity 0.16s ease;
    -webkit-tap-highlight-color: transparent;
}

.trophy-picker-scroll-btn img {
    width: 50px;
    height: 50px;
    display: block;
    object-fit: contain;
}

.trophy-picker-scroll-btn.tap-bounce.is-tapping {
    animation: none;
}

.trophy-picker-scroll-btn.tap-bounce.is-tapping img {
    animation: nav-icon-tap 220ms ease-out;
}

.trophy-picker-scroll-btn.prev {
    left: 0;
}

.trophy-picker-scroll-btn.next {
    right: 0;
}

.trophy-picker-scroll-btn:disabled {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.trophy-picker-card {
    position: relative;
    flex: 0 0 136px;
    min-height: 164px;
    border: 0;
    border-radius: 22px;
    background: linear-gradient(180deg, #fffdf3, #ffffff);
    padding: 12px;
    display: grid;
    gap: 8px;
    align-content: start;
    text-align: left;
    cursor: pointer;
}

.trophy-picker-card img {
    width: 84px;
    height: 84px;
    object-fit: contain;
    margin: 0 auto;
    display: block;
}

.trophy-picker-card strong {
    color: #1d2a53;
    font-size: 0.88rem;
    line-height: 1.15;
}

.trophy-picker-card span {
    color: #6d7ea1;
    font-size: 0.74rem;
    line-height: 1.25;
    font-weight: 700;
}

.trophy-picker-card.is-owned {
    background: linear-gradient(180deg, #fffef8, #fff9e6);
    box-shadow: inset 0 0 0 1px rgba(239, 203, 98, 0.5);
}

.trophy-picker-card.is-selected {
    background: linear-gradient(180deg, #fff3c7, #fffdf5);
    box-shadow: inset 0 0 0 2px rgba(245, 176, 17, 0.9), 0 10px 24px rgba(245, 176, 17, 0.16);
}

.trophy-picker-owned-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.trophy-picker-owned-badge img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    margin: 0;
}

.share-sheet .points-stepper {
    min-height: 52px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff, #f6faff);
    box-shadow: inset 0 0 0 1px rgba(171, 196, 236, 0.45);
    grid-template-columns: 62px minmax(0, 1fr) 62px;
}

.share-sheet .points-stepper-btn {
    /* background: rgba(246, 250, 255, 0.96); */
    color: #1d2a53;
    font-size: 1.8rem;
}

.share-sheet .points-stepper-btn img {
    width: 24px;
    height: 24px;
}

.share-sheet .points-stepper-btn:hover,
.share-sheet .points-stepper-btn:focus {
    background: #edf4ff;
}

.share-sheet .points-stepper-input {
    border-left: 1px solid rgba(171, 196, 236, 0.42);
    border-right: 1px solid rgba(171, 196, 236, 0.42);
    background: transparent;
    color: #1d2a53;
    font-size: 1.45rem;
    font-weight: 900;
}

.share-sheet-submit {
    min-height: 58px;
    border: 0;
    border-radius: 18px;
    background: linear-gradient(135deg, #4a88ff, #2f67f6);
    box-shadow: none;
}

.share-sheet-submit:hover,
.share-sheet-submit:focus {
    background: linear-gradient(135deg, #4280f7, #295ee7);
}

.share-sheet-actions {
    margin-top: 10px;
    display: grid;
    gap: 8px;
}

.share-sheet-actions form {
    margin: 0;
}

.share-sheet-actions .dropdown-action {
    min-height: 52px;
    border-radius: 16px;
    background: rgba(248, 250, 255, 0.94);
    padding: 0 14px;
    justify-content: flex-start;
}

.share-sheet-actions .dropdown-action.danger {
    background: rgba(255, 244, 244, 0.94);
}

body.parent-theme .share-sheet-backdrop {
    background: #ffffff8f;
    backdrop-filter: blur(8px);
}

body.parent-theme .parent-child-sheet {
    bottom: calc(var(--nav-height) + 18px);
    width: min(430px, calc(100vw - 30px));
    border: 0;
    border-radius: 30px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 252, 255, 0.96));
}

body.parent-theme .parent-item-sheet {
    bottom: calc(var(--nav-height) + 18px);
    width: min(430px, calc(100vw - 30px));
    border: 0;
    border-radius: 30px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 252, 255, 0.96));
}

body.parent-theme .parent-child-sheet-form {
    gap: 16px;
}

body.parent-theme .parent-child-sheet-form .float-field,
body.parent-theme .parent-child-sheet-form .file-picker-shell,
body.parent-theme .parent-child-sheet-form .file-picker-preview,
body.parent-theme .parent-child-sheet-form .file-picker,
body.parent-theme .parent-child-sheet-form .points-stepper,
body.parent-theme .parent-child-sheet-form .actions-row {
    min-width: 0;
    max-width: 100%;
}

body.parent-theme .parent-child-sheet-form .actions-row {
    flex-direction: row-reverse;
    margin-top: 4px;
}

body.parent-theme .parent-child-sheet-form .btn.green,
body.parent-theme .parent-child-sheet-form .btn.danger {
    min-height: 62px;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    text-shadow: none;
    box-shadow: none;
    margin-top: 0;
    padding-top: 0;
    align-items: center;
    transform: translateY(-3px);
    font-weight: 900;
}

body.parent-theme .parent-child-sheet-form .btn.green {
    background-image: url('/static/stock/green_btb.png');
    color: #176f3d;
}

body.parent-theme .parent-child-sheet-form .btn.danger {
    background-image: url('/static/stock/danger_btb.png');
    color: #a83b4a;
    box-shadow: none;
}

body.parent-theme .parent-child-sheet-form .btn.green.award-submit-btn:active:not(:disabled),
body.parent-theme .parent-child-sheet-form .btn.green.award-submit-btn.is-pressed:not(:disabled) {
    background-image: url('/static/stock/green_btb_press.png');
}

body.parent-theme .parent-child-sheet-form .btn.danger.award-submit-btn:active:not(:disabled),
body.parent-theme .parent-child-sheet-form .btn.danger.award-submit-btn.is-pressed:not(:disabled) {
    background-image: url('/static/stock/danger_btb_press.png');
}

body.parent-theme .parent-child-sheet-form .btn.green:hover,
body.parent-theme .parent-child-sheet-form .btn.green:focus,
body.parent-theme .parent-child-sheet-form .btn.danger:hover,
body.parent-theme .parent-child-sheet-form .btn.danger:focus {
    background-color: transparent;
    border-color: transparent;
    /* filter: brightness(1.02); */
}

body.parent-theme .parent-child-sheet-form .btn.green:disabled,
body.parent-theme .parent-child-sheet-form .btn.danger:disabled {
    filter: grayscale(0.15);
    opacity: 0.5;
}

body.parent-theme .parent-child-sheet-form .award-submit-btn {
    position: relative;
}

body.parent-theme .parent-child-sheet-form .award-submit-btn.is-loading,
body.parent-theme .parent-child-sheet-form .award-submit-btn.is-loading:disabled {
    color: transparent !important;
    cursor: wait;
    pointer-events: none;
    opacity: 1;
    filter: none;
}

body.parent-theme .parent-child-sheet-form .award-submit-btn.is-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 20px;
    height: 20px;
    margin: auto;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.42);
    border-top-color: #ffffff;
    animation: subscriptionActionSpin 0.72s linear infinite;
}

body.child-home-theme .share-sheet-backdrop {
    background: rgba(56, 107, 164, 0.2);
    backdrop-filter: blur(8px);
}

body.child-home-theme .share-sheet {
    bottom: calc(var(--nav-height) + 80px);
    width: min(398px, calc(100vw - 30px));
    border: 0;
    border-radius: 30px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 252, 255, 0.96));
}

#parentsInviteMenu .friend-mode-switch {
    display: none;
}

#parentsInviteMenu [data-friend-mode-panel] {
    display: block !important;
}

.friend-mode-switch {
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
    margin-top: 8px;
    padding: 6px;
    border-radius: 20px;
    background: rgba(233, 241, 255, 0.92);
    box-shadow: inset 0 0 0 1px rgba(171, 196, 236, 0.22);
}

.friend-mode-option {
    min-height: 50px;
    padding: 0 14px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: #60749a;
    font-size: 0.96rem;
    font-weight: 900;
    cursor: pointer;
}

.friend-mode-option.is-active {
    background: linear-gradient(135deg, #4a88ff, #2f67f6);
    color: #ffffff;
}

.friend-mode-panel {
    margin-top: 14px;
}

.friend-invite-card {
    background: #fbfbfb;
    margin-top: 0;
    padding: 15px;
    border-radius: 20px;
    /* background: transparent; */
    box-shadow: inset 0 0 0 1px rgba(171, 196, 236, 0.35);
    display: grid;
    gap: 10px;
}

.friend-invite-copy {
    display: grid;
    gap: 4px;
    color: #1d2a53;
    margin-left: 25px;
}

.friend-invite-copy strong {
    font-size: 1rem;
    font-weight: 900;
}

.friend-invite-copy span,
.friend-invite-link {
    color: #66799f;
    font-size: 0.84rem;
    line-height: 1.45;
    word-break: break-word;
}

.friend-invite-qr {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 4px;
}

.friend-invite-qr img {
    width: 280px;
    height: 280px;
    padding: 0;
    border-radius: 34px;
    background: transparent;
    box-shadow: none;
}

.friend-add-title {
    margin-top: 0;
    color: #1d2a53;
    font-size: 1rem;
    font-weight: 900;
}

body.child-home-theme.share-sheet-open .learning-carousel-btn {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.notification-list {
    max-height: calc(min(620px, 100vh - 96px) - 58px);
    overflow: auto;
}

.notice {
    padding: 14px;
    border-bottom: 1px solid var(--border);
    display: grid;
    gap: 6px;
}

.notice.is-unread {
    background: rgba(36, 107, 254, 0.05);
}

.notice-points {
    font-weight: 900;
}

.notice-points.plus {
    color: var(--green);
}

.notice-points.minus {
    color: var(--red);
}

.notice-image {
    width: 100%;
    max-height: 180px;
    border: 1px solid var(--border);
    border-radius: 8px;
    object-fit: cover;
    background: var(--surface-soft);
}

.notice.notice-kind-trophy .notice-image {
    max-height: none;
    height: clamp(170px, 42vw, 220px);
    object-fit: contain;
    padding: 12px;
    background: radial-gradient(circle at 50% 18%, rgba(255, 240, 184, 0.94), rgba(255, 255, 255, 0.98) 58%);
    box-sizing: border-box;
}

.notice-time {
    font-size: 0.78rem;
    color: var(--muted);
}

.file-control {
    width: 100%;
    max-width: 100%;
    min-height: 48px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px;
    background: var(--surface);
}

.shop-editor-form {
    display: grid;
}

.shop-editor-mode-field {
    margin-bottom: 2px;
}

.shop-editor-mode-switch {
    width: 100%;
}

.shop-editor-mode-switch .subscription-cycle-option {
    border: 0;
    background: transparent;
    cursor: pointer;
}

.shop-editor-link-panel {
    display: grid;
    gap: 14px;
    margin-bottom: 8px;
}

.shop-editor-link-status {
    min-height: 48px;
    padding: 12px 16px;
    border-radius: 18px;
    background: rgba(233, 241, 255, 0.92);
    color: #516789;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.35;
}

.shop-editor-link-status[data-state="loading"] {
    color: #2f67f6;
    display: flex;
    align-items: center;
    gap: 10px;
}

.shop-editor-link-status[data-state="loading"]::before {
    content: "";
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(47, 103, 246, 0.2);
    border-top-color: #2f67f6;
    animation: authDownloadSpinner 0.72s linear infinite;
    flex: 0 0 auto;
}

.shop-editor-link-status[data-state="success"] {
    color: #177f49;
}

.shop-editor-link-status[data-state="error"] {
    color: #d34747;
}

.shop-editor-link-preview {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 14px;
    padding: 14px;
    border-radius: 22px;
    background: linear-gradient(180deg, #ffffff, #f7fbff);
    box-shadow: inset 0 0 0 1px rgba(171, 196, 236, 0.34);
    align-items: center;
}

.shop-editor-link-preview-media {
    display: grid;
    place-items: center;
    min-height: 112px;
    border-radius: 18px;
    background: rgba(233, 241, 255, 0.6);
    overflow: hidden;
}

.shop-editor-link-preview-image {
    width: 100%;
    height: 112px;
    object-fit: cover;
}

.shop-editor-link-preview-copy {
    min-width: 0;
    display: grid;
    gap: 8px;
}

.shop-editor-link-preview-kicker {
    color: #6d7fa2;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.shop-editor-link-preview-title {
    color: #1d2a53;
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.25;
}

.shop-editor-link-preview-price {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(74, 136, 255, 0.12);
    color: #2f67f6;
    font-size: 0.9rem;
    font-weight: 900;
}

.video-editor-link-preview-duration {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(74, 136, 255, 0.12);
    color: #2f67f6;
    font-size: 0.9rem;
    font-weight: 900;
}

.shop-editor-link-empty {
    color: #667996;
    font-size: 0.88rem;
    line-height: 1.45;
}

@media (max-width: 640px) {
    .shop-editor-link-preview {
        grid-template-columns: 1fr;
    }

    .shop-editor-link-preview-media {
        min-height: 156px;
    }

    .shop-editor-link-preview-image {
        height: 156px;
    }
}

.shop-editor-layout {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
}

.shop-panel {
    border-color: #22c55e;
    box-shadow: 0 0 0 0.2rem rgba(34, 197, 94, 0.12);
}

.shop-editor-collapsible-panel,
.learning-editor-collapsible-panel,
.video-editor-collapsible-panel,
.quest-editor-collapsible-panel,
.promo-editor-collapsible-panel {
    position: relative;
    display: grid;
    gap: 18px;
}

.shop-editor-collapse-row {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 2;
}

.shop-editor-collapse-toggle {
    width: 41px;
    height: 41px;
    border: 0;
    border-radius: 16px;
    background: transparent;
    color: #274690;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
}

.shop-editor-collapse-toggle:active {
    transform: scale(0.96);
}

.shop-editor-collapse-toggle.tap-bounce.is-tapping {
    animation: shop-editor-toggle-tap 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.shop-editor-collapse-icon {
    display: block;
    width: 23px;
    height: 23px;
    background: url("/static/stock/plus.png") center / contain no-repeat;
}

.shop-editor-collapse-toggle[aria-expanded="true"] .shop-editor-collapse-icon {
    background-image: url("/static/stock/minus.png");
}

@keyframes shop-editor-toggle-tap {
    0% {
        transform: scale(1);
    }
    30% {
        transform: scale(0.9);
    }
    72% {
        transform: scale(1.24);
    }
    100% {
        transform: scale(1);
    }
}

.shop-editor-collapse-body {
    display: grid;
    gap: 18px;
}

.shop-editor-collapse-body .panel-head {
    margin-bottom: 0;
}

.shop-editor-badge-plus {
    width: 26px !important;
    height: 26px !important;
    margin-left: -2px;
    margin-right: 1px;
    transform: scale(1.04);
    transform-origin: center;
}

.video-editor-collapsible-panel[data-collapsed="true"] {
    display: none;
}

.shop-editor-collapsible-panel[data-collapsed="true"] {
    display: none;
}

.learning-editor-collapsible-panel[data-collapsed="true"] {
    display: none;
}

.quest-editor-collapsible-panel[data-collapsed="true"] {
    display: none;
}

.promo-editor-collapsible-panel[data-collapsed="true"] {
    display: none;
}

.shop-editor-collapsible-panel[data-collapsed="true"] .panel-title,
.shop-editor-collapsible-panel[data-collapsed="true"] .panel-subtitle,
.shop-editor-collapsible-panel[data-collapsed="true"] .shop-editor-form,
.learning-editor-collapsible-panel[data-collapsed="true"] .panel-title,
.learning-editor-collapsible-panel[data-collapsed="true"] .panel-subtitle,
.learning-editor-collapsible-panel[data-collapsed="true"] .shop-editor-form,
.video-editor-collapsible-panel[data-collapsed="true"] .panel-title,
.video-editor-collapsible-panel[data-collapsed="true"] .panel-subtitle,
.video-editor-collapsible-panel[data-collapsed="true"] .shop-editor-form,
.quest-editor-collapsible-panel[data-collapsed="true"] .panel-title,
.quest-editor-collapsible-panel[data-collapsed="true"] .panel-subtitle,
.quest-editor-collapsible-panel[data-collapsed="true"] .shop-editor-form,
.promo-editor-collapsible-panel[data-collapsed="true"] .panel-title,
.promo-editor-collapsible-panel[data-collapsed="true"] .panel-subtitle,
.promo-editor-collapsible-panel[data-collapsed="true"] .shop-editor-form {
    display: none;
}

.shop-editor-collapsible-panel[data-collapsed="true"] .shop-editor-collapse-body,
.learning-editor-collapsible-panel[data-collapsed="true"] .shop-editor-collapse-body,
.video-editor-collapsible-panel[data-collapsed="true"] .shop-editor-collapse-body,
.quest-editor-collapsible-panel[data-collapsed="true"] .shop-editor-collapse-body,
.promo-editor-collapsible-panel[data-collapsed="true"] .shop-editor-collapse-body {
    gap: 0;
}

.shop-editor-collapsible-panel[data-collapsed="true"] .panel-head-copy,
.learning-editor-collapsible-panel[data-collapsed="true"] .panel-head-copy,
.video-editor-collapsible-panel[data-collapsed="true"] .panel-head-copy,
.quest-editor-collapsible-panel[data-collapsed="true"] .panel-head-copy,
.promo-editor-collapsible-panel[data-collapsed="true"] .panel-head-copy {
    gap: 0;
}

.shop-editor-collapsible-panel[data-collapsed="true"] .panel-head,
.learning-editor-collapsible-panel[data-collapsed="true"] .panel-head,
.video-editor-collapsible-panel[data-collapsed="true"] .panel-head,
.quest-editor-collapsible-panel[data-collapsed="true"] .panel-head,
.promo-editor-collapsible-panel[data-collapsed="true"] .panel-head {
    margin: 0;
}

.shop-list-panel {
    /* margin-top: 28px; */
}

.shop-panel .float-head {
    border-color: rgba(34, 197, 94, 0.22);
}

.shop-panel .empty {
    height: auto;
    min-height: 150px;
}

.shop-infinite-check {
    margin-bottom: 0;
}

.shop-editor-form .float-field .file-picker {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.shop-editor-form .float-field .file-picker-btn {
    background: transparent;
    box-shadow: none;
}

.shop-editor-preview {
    width: 100%;
    max-height: 220px;
    margin-top: 10px;
    border: 1px solid var(--border);
    border-radius: 16px;
    object-fit: cover;
}

.shop-submit-btn {
    position: relative;
    border-color: #16a34a;
    background: #16a34a;
    color: white;
}

.shop-submit-btn.is-loading {
    pointer-events: none;
    color: transparent !important;
}

.shop-submit-btn.is-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 18px;
    height: 18px;
    margin: auto;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.28);
    border-top-color: #ffffff;
    animation: subscriptionActionSpin 0.75s linear infinite;
}

.shop-submit-btn:hover,
.shop-submit-btn:focus {
    border-color: #15803d;
    background: #15803d;
}

.shop-editor-actions {
    display: grid;
    gap: 14px;
}

.shop-editor-actions.has-cancel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
}

@media (min-width: 861px) {
    body.parent-page-settings .billing-hero-panel.is-vip-only {
        display: none;
    }

    body.parent-theme.parent-page-shop-editor {
        background-attachment: fixed;
        background-size: cover;
    }

    body.parent-theme.parent-page-shop-editor .shop-editor-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    body.parent-theme.parent-page-shop-editor .shop-editor-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    body.parent-theme.parent-page-shop-editor .shop-editor-grid .item-card {
        min-width: 0;
    }

    body.parent-theme.parent-page-learning-editor .learning-editor-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    body.parent-theme.parent-page-video-editor .video-editor-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    body.parent-theme.parent-page-quest-editor .quest-editor-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }
}

.shop-editor-actions > * {
    min-width: 0;
}

.checkbox {
    position: relative;
    width: 100%;
    /* min-height: 78px; */
    margin: 0 0 26px;
    padding: 16px 18px 16px 92px;
    border-radius: 24px;
    /* background: linear-gradient(180deg, #ffffff, #f8fbff); */
    /* box-shadow: inset 0 0 0 1px rgba(171, 196, 236, 0.34); */
    display: block;
    cursor: pointer;
}

.checkbox input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.checkbox > span {
    position: relative;
    min-width: 0;
    display: grid;
    align-content: center;
    gap: 4px;
    color: #1d2a53;
    font-weight: 600;
    line-height: 1.35;
}

.checkbox > span::before {
    content: "";
    position: absolute;
    left: -74px;
    top: 50%;
    width: 58px;
    height: 34px;
    border-radius: 999px;
    background: #d9e6fb;
    transform: translateY(-50%);
    transition: background 0.18s ease;
}

.checkbox > span::after {
    content: "";
    position: absolute;
    left: -70px;
    top: 50%;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 6px 14px rgba(36, 56, 102, 0.16);
    transform: translateY(-50%);
    transition: transform 0.18s ease;
}

.checkbox input:checked + span::before {
    background: linear-gradient(135deg, #4a88ff, #2f67f6);
}

.checkbox input:checked + span::after {
    transform: translate(24px, -50%);
}

.checkbox input:focus-visible + span::before {
    box-shadow: 0 0 0 4px rgba(47, 103, 246, 0.08);
}

.promo-type-fields[hidden] {
    display: none;
}

.learning-panel {
    border-color: #8b5cf6;
    box-shadow: 0 0 0 0.2rem rgba(139, 92, 246, 0.12);
}

.home-learning-panel {
    margin-top: 28px;
}

.learning-panel .float-head {
    border-color: rgba(139, 92, 246, 0.24);
}

.learning-panel .empty {
    height: auto;
    min-height: 150px;
    border-radius: 16px;
}

.learning-card {
    border-color: rgba(139, 92, 246, 0.24);
}

.learning-card .item-image {
    position: relative;
    aspect-ratio: 4 / 3;
    min-height: 0;
    background: #fff;
    overflow: hidden;
}

.learning-card .item-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    border-radius: inherit;
}

.learning-card .item-image img.learning-image-fallback {
    position: static;
    inset: auto;
    width: 50px;
    height: 50px;
    max-width: 50px;
    max-height: 50px;
}

.learning-card .item-body {
    /* min-height: 164px; */
    grid-template-rows: auto auto 1fr;
}

.learning-card .item-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.learning-card .item-description {
    min-height: calc(0.84rem * 1.32 * 2);
}

.learning-card .learning-reward-btn {
    grid-row: 3;
    align-self: end;
}

.learning-carousel {
    position: relative;
}

.learning-carousel.is-static .learning-carousel-track {
    grid-auto-columns: minmax(220px, 100%);
}

.learning-carousel.is-static .learning-carousel-btn {
    display: none;
}

.learning-carousel-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(220px, calc((100% - 12px) / 2));
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding: 0;
}

.learning-carousel-track::-webkit-scrollbar {
    display: none;
}

.learning-carousel-track .learning-card {
    scroll-snap-align: start;
    min-width: 0;
    height: 100%;
}

.learning-carousel-btn {
    position: absolute;
    top: 48%;
    z-index: 6;
    width: 58px;
    height: 78px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #6d28d9;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 3.4rem;
    line-height: 1;
    font-weight: 900;
    cursor: pointer;
    transform: translateY(-50%);
    box-shadow: none;
    backdrop-filter: none;
    transition: opacity 0.16s ease;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.learning-carousel-btn img {
    width: 50px;
    height: 50px;
    display: block;
    object-fit: contain;
    transform-origin: center;
    will-change: transform;
}

.learning-carousel-btn.tap-bounce.is-tapping {
    animation: none;
}

.learning-carousel-btn.is-tapping img {
    animation: carousel-arrow-tap 220ms ease-out;
}

@keyframes carousel-arrow-tap {
    0% {
        transform: scale(1);
    }
    38% {
        transform: scale(0.92);
    }
    72% {
        transform: scale(1.08);
    }
    100% {
        transform: scale(1);
    }
}

.learning-carousel-btn.prev {
    left: -17px;
}

.learning-carousel-btn.next {
    right: -17px;
}

.learning-carousel-btn:hover,
.learning-carousel-btn:focus {
    background: transparent;
    color: #5b21b6;
}

.learning-carousel-btn:disabled {
    opacity: 0;
    visibility: hidden;
    cursor: default;
    pointer-events: none;
}

.learning-reward-btn,
.learning-submit-btn {
    border-color: #7c3aed;
    background: #7c3aed;
}

.learning-reward-btn:hover,
.learning-reward-btn:focus,
.learning-submit-btn:hover,
.learning-submit-btn:focus {
    border-color: #6d28d9;
    background: #6d28d9;
}

.learning-reward-btn:disabled,
.learning-submit-btn:disabled {
    border-color: #94a3b8;
    background: #94a3b8;
    cursor: not-allowed;
    opacity: 0.86;
}

.learning-lock-timer {
    min-width: 56px;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.learning-editor-layout {
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
}

.learning-active-check {
    align-self: end;
    margin-bottom: 13px;
}

.reward-field-label img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.learning-editor-form .float-field .file-picker {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.learning-editor-form .float-field .file-picker-btn {
    background: transparent;
    box-shadow: none;
}

.learning-cover-preview {
    width: 100%;
    max-height: 220px;
    margin-top: 10px;
    border: 1px solid var(--border);
    border-radius: 16px;
    object-fit: cover;
}

.learning-ai-actions {
    margin: -4px 0 16px;
    display: grid;
    gap: 8px;
}

.learning-ai-btn {
    border-color: rgba(139, 92, 246, 0.28);
    background: rgba(139, 92, 246, 0.08);
    color: #6d28d9;
}

.learning-ai-btn:hover,
.learning-ai-btn:focus {
    border-color: rgba(139, 92, 246, 0.46);
    background: rgba(139, 92, 246, 0.12);
}

.learning-ai-btn:disabled {
    opacity: 0.7;
    cursor: wait;
}

.learning-ai-status {
    min-height: 20px;
    font-size: 0.84rem;
    font-weight: 800;
}

.learning-ai-status.error {
    color: var(--red);
}

.section-title {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.2;
    font-weight: 900;
}

.learning-questions-editor {
    display: grid;
    /* gap: 14px; */
    margin-top: 8px;
    padding: 18px;
    border-radius: 26px;
    background: linear-gradient(180deg, rgba(248, 251, 255, 0.9), rgba(255, 255, 255, 0.98));
    box-shadow: inset 0 0 0 1px rgba(171, 196, 236, 0.28);
}

.learning-question-list {
    display: grid;
    gap: 14px;
}

.learning-question-actions {
    display: grid;
    gap: 10px;
}

.learning-question-editor {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    padding: 0 12px 12px;
}

.learning-question-editor summary {
    min-height: 46px;
    display: flex;
    align-items: center;
    font-weight: 900;
    cursor: pointer;
}

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

.learning-questions-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.learning-questions-copy {
    display: grid;
    gap: 6px;
}

.learning-questions-note {
    max-width: 46ch;
}

.learning-question-card {
    border: 0;
    border-radius: 26px;
    background: linear-gradient(180deg, #ffffff, #f7fbff);
    padding: 18px;
    display: grid;
    gap: 16px;
    /* box-shadow: inset 0 0 0 1px rgba(207, 220, 239, 0.7); */
}

.learning-question-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.learning-question-chip {
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    background: rgba(36, 107, 254, 0.08);
    color: #2451c6;
    font-size: 0.8rem;
    font-weight: 900;
}

.learning-remove-question,
.learning-option-remove {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 16px;
    background: rgba(255, 96, 123, 0.12);
    color: #d93d61;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}

.learning-options-stack {
    display: grid;
    gap: 10px;
}

.learning-option-row {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 66px;
    padding: 10px 12px;
    border-radius: 20px;
    background: rgba(246, 250, 255, 0.96);
    box-shadow: inset 0 0 0 1px rgba(211, 225, 247, 0.92);
}

.learning-option-input {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;
}

.learning-option-input:focus,
.learning-option-input:focus-visible {
    border: 0;
    box-shadow: none;
    background: transparent;
}

.learning-option-row.is-hidden,
.learning-correct-chip.is-hidden {
    display: none !important;
}

.learning-option-badge {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #5db9ff, #2f73ff);
    color: #ffffff;
    font-weight: 900;
}

.learning-question-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 14px;
}

.learning-correct-group {
    min-width: 0;
    display: grid;
    gap: 10px;
}

.learning-correct-label {
    color: #66799f;
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.learning-correct-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.learning-correct-chip {
    position: relative;
    min-height: 46px;
    padding: 0 14px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 246, 228, 0.92);
    color: #8a6238;
    font-weight: 900;
    cursor: pointer;
}

.learning-correct-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.learning-correct-chip:has(input:checked) {
    background: linear-gradient(135deg, #57b9ff, #2f73ff);
    color: #ffffff;
}

.learning-add-btn,
.learning-option-add-btn {
    border-radius: 16px;
    min-height: 52px;
    padding-inline: 18px;
    white-space: nowrap;
}

.learning-add-btn {
    justify-self: stretch;
}

.learning-add-btn.btn.primary {
    border-color: var(--border);
    background: var(--surface);
    color: var(--text);
}

.learning-add-btn.btn.primary:hover,
.learning-add-btn.btn.primary:focus {
    background: var(--surface-soft);
    border-color: var(--border-strong);
}

.learning-option-add-btn[hidden] {
    display: none !important;
}

.learning-hero-image {
    width: 100%;
    max-height: 340px;
    border: 1px solid rgba(139, 92, 246, 0.24);
    border-radius: 8px;
    overflow: hidden;
    background: var(--surface-soft);
}

.learning-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.learning-lead {
    margin: 18px 0 0;
    color: var(--muted);
    font-weight: 700;
    line-height: 1.55;
}

.learning-content {
    margin-top: 18px;
    line-height: 1.75;
}

.learning-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.learning-image-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 16px 0 20px;
}

.learning-image-grid figure {
    margin: 0;
    display: grid;
    gap: 8px;
}

.learning-image-grid img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background: #fff;
    border: 1px solid rgba(148, 163, 184, 0.24);
    padding: 8px;
}

.learning-image-grid figcaption {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.35;
}

.learning-content p:first-child {
    margin-top: 0;
}

.learning-bottom-action {
    margin-top: 22px;
    display: grid;
    gap: 10px;
}

.learning-locked .muted {
    color: #475569;
}

.learning-completed {
    margin-top: 22px;
    border: 1px solid rgba(22, 163, 74, 0.24);
    border-radius: 8px;
    background: rgba(22, 163, 74, 0.06);
    padding: 14px;
    display: grid;
    gap: 4px;
    color: var(--green);
    font-weight: 800;
}

.learning-test-panel {
    margin-top: 18px;
}

.learning-test-form {
    display: grid;
    gap: 16px;
}

.learning-test-question {
    position: relative;
    overflow: hidden;
    border: 0;
    border-radius: 28px;

    padding: 20px;
    display: grid;
    gap: 14px;

}

.learning-test-question h2 {
margin: 0;
    font-size: 1.05rem;
    line-height: 1.45;
    margin-bottom: 10px;
    color: #10224d;
}

.learning-answer {
    position: relative;
    min-height: 84px;
    border: 0;
    border-radius: 24px;
    background: linear-gradient(180deg, #ffffff, #fbfdff);
    padding: 14px 16px;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    box-shadow: inset 0 0 0 1px rgba(221, 230, 244, 0.96), 0 0 0px rgba(31, 61, 117, 0.05);
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.learning-answer:hover {
    transform: translateY(-1px);
    box-shadow:
        inset 0 0 0 1px rgba(184, 200, 228, 0.96),
        0 14px 28px rgba(31, 61, 117, 0.08);
}

.learning-answer:focus-within {
    transform: translateY(-1px);
    box-shadow:
        inset 0 0 0 2px rgba(47, 103, 246, 0.38),
        0 0 0 4px rgba(47, 103, 246, 0.1),
        0 14px 28px rgba(31, 61, 117, 0.08);
}

.learning-answer input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.learning-answer-mark {
    min-width: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
}

.learning-answer-check {
    position: relative;
    width: 34px;
    height: 34px;
    border-radius: 0;
    display: inline-block;
    background: transparent;
    box-shadow: none;
    flex: 0 0 34px;
    will-change: transform;
}

.learning-answer-check::before,
.learning-answer-check::after {
    content: "";
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 34px 34px;
    transition:
        transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.2s ease;
}

.learning-answer-check::before {
    background-image: url('/static/icons/menu/empty_check.png');
    opacity: 1;
    transform: scale(1);
}

.learning-answer-check::after {
    background-image: url('/static/icons/menu/check.png');
    opacity: 0;
    transform: scale(0.66);
}

@keyframes learning-answer-check-pop {
    0% {
        opacity: 0;
        transform: scale(0.58);
    }
    62% {
        opacity: 1;
        transform: scale(1.12);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.learning-answer-content {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.learning-answer-text {
color: #1d2a53;
    font-weight: 500;
}

.learning-answer:has(input:checked) {
background: rgb(195 240 184 / 41%);
    border: 1px solid #29d900;
    box-shadow: 0 0 0 0.2rem rgb(74 210 38 / 33%);
}

.learning-answer:has(input:checked) .learning-answer-check {
    background-color: transparent;
    box-shadow: none;
}

.learning-answer:has(input:checked) .learning-answer-check::before {
    opacity: 0.12;
    transform: scale(0.84);
}

.learning-answer:has(input:checked) .learning-answer-check::after {
    opacity: 1;
    transform: scale(1);
    animation: learning-answer-check-pop 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.learning-answer:has(input:checked) .learning-answer-text {
    color: #0f3c24;
}

.learning-answer:active .learning-answer-check::before {
    transform: scale(0.93);
}

.learning-answer:active .learning-answer-check::after {
    transform: scale(0.9);
}

@media (max-width: 560px) {
    .learning-test-question {
        padding: 18px 16px;
    }

    .learning-answer {
        min-height: 78px;
        padding: 12px 14px;
        gap: 12px;
    }

    .learning-answer-mark {
        min-width: 24px;
    }
}

.video-panel {
    border-color: #ef4444;
    box-shadow: 0 0 0 0.2rem rgba(239, 68, 68, 0.12);
}

.home-video-panel,
.video-list-panel {
    margin-top: 28px;
}

.video-panel .float-head {
    border-color: rgba(239, 68, 68, 0.24);
}

.video-panel .empty {
    height: auto;
    min-height: 150px;
}

.video-panel .panel-head {
    align-items: flex-start;
}

.shop-panel .panel-head {
    align-items: flex-start;
}

.learning-panel .panel-head {
    align-items: flex-start;
}

.quest-panel .panel-head {
    align-items: flex-start;
}

.video-panel .panel-head-copy {
    flex: 1 1 auto;
}

.shop-panel .panel-head-copy {
    flex: 1 1 auto;
}

.learning-panel .panel-head-copy {
    flex: 1 1 auto;
}

.quest-panel .panel-head-copy {
    flex: 1 1 auto;
}

.video-panel-head-actions {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    flex: 0 0 auto;
    margin-left: auto;
}

.shop-panel-head-actions {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    flex: 0 0 auto;
    margin-left: auto;
}

.learning-panel-head-actions,
.quest-panel-head-actions {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    flex: 0 0 auto;
    margin-left: auto;
}

.promo-panel-head-actions {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 0;
    flex: 0 0 auto;
    margin-left: auto;
}

.promo-catalog-panel .panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.promo-catalog-panel .panel-head .panel-head-copy {
    flex: 1 1 auto;
}

.video-panel .panel-head-copy .panel-chip-row {
    justify-content: flex-start;
}

@media (max-width: 860px) {
    .shop-panel .panel-head {
        flex-direction: row;
        align-items: flex-start;
    }

    .video-panel .panel-head {
        flex-direction: row;
        align-items: flex-start;
    }

    .learning-panel .panel-head,
    .quest-panel .panel-head,
    .promo-catalog-panel .panel-head {
        flex-direction: row;
        align-items: flex-start;
    }
}

.video-card {
    border-color: rgba(239, 68, 68, 0.24);
}

.video-card .item-image {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #111827;
    overflow: hidden;
}

.video-card .item-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
}

.video-card .item-body {
    /* min-height: 176px; */
    grid-template-rows: auto auto auto 1fr;
}

.video-card .item-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.video-card .item-description {
    min-height: calc(0.84rem * 1.32 * 2);
}

.video-card form,
.video-card .video-btn,
.video-card .btn.green {
    grid-row: 4;
    align-self: end;
}

.video-home-group {
    display: grid;
    gap: 10px;
}

.home-panel-badge,
.home-video-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    min-height: 34px;
    margin: 0 0 15px;
    padding: 6px 12px;
    border-radius: 999px;
    /* background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(244, 248, 255, 0.94)); */
    box-shadow: inset 0 0 0 1px rgba(146, 170, 214, 0.28);
    color: #2b3b66;
    font-size: 0.82rem;
    font-weight: 900;
}

.home-panel-badge img,
.home-video-badge img {
    width: 29px;
    height: 29px;
    object-fit: contain;
}

.video-home-carousel {
    overflow: hidden;
}

.video-home-carousel.is-static {
    padding: 0;
}

.home-video-panel .video-home-carousel .learning-carousel-track {
    grid-auto-columns: minmax(220px, calc((100% - 12px) / 2));
    scroll-padding-inline: 34px;
}

.home-video-panel .video-home-carousel .learning-carousel-btn.prev {
    /* left: 0; */
}

.home-video-panel .video-home-carousel .learning-carousel-btn.next {
    /* right: 0; */
}

.video-carousel-btn {
    color: #dc2626;
}

.video-carousel-btn:hover,
.video-carousel-btn:focus {
    color: #b91c1c;
}

.video-btn {
    border-color: #ef4444;
    background: #ef4444;
    color: #ffffff;
}

.video-submit-btn {
    position: relative;
}

.video-submit-btn.is-loading,
.video-submit-btn.is-loading:disabled {
    pointer-events: none;
    border-color: #ef4444;
    background: #ef4444;
    color: transparent !important;
    cursor: wait;
}

.video-submit-btn.is-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 18px;
    height: 18px;
    margin: auto;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.28);
    border-top-color: #ffffff;
    animation: subscriptionActionSpin 0.75s linear infinite;
}

.video-btn:hover,
.video-btn:focus {
    border-color: #dc2626;
    background: #dc2626;
    color: #ffffff;
}

.video-btn:disabled {
    border-color: #fca5a5;
    background: #fca5a5;
    cursor: not-allowed;
}

.video-progress-btn {
    --video-progress: 0%;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.video-progress-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    width: var(--video-progress);
    border-radius: inherit;
    background: linear-gradient(90deg, rgb(151 255 102 / 90%), rgb(232 255 122 / 92%));
    opacity: 0;
    transition: width 0.9s linear, opacity 0.2s ease;
    z-index: 0;
}

.video-progress-btn:disabled,
.video-progress-btn.is-waiting {
    color: #ffffff;
    border-color: transparent;
    background: linear-gradient(135deg, #c86fff, #9c4ef0);
    cursor: not-allowed;
    opacity: 1;
}

.video-progress-btn.is-waiting::before {
    opacity: 1;
}

.video-progress-btn.is-ready::before {
    width: 100%;
    opacity: 0;
}

.video-progress-btn > * {
    position: relative;
    z-index: 1;
}

.video-reward-mode-picker {
    margin-top: 8px;
    display: grid;
    gap: 12px;
}

.video-reward-mode-toggle {
    min-height: 92px;
    margin: 0;
    padding: 16px 18px;
    background: rgba(246, 250, 255, 0.96);
    /* box-shadow: inset 0 0 0 1px rgba(171, 196, 236, 0.34); */
}

.video-reward-mode-toggle:has(.settings-toggle-input:checked) {
    background: linear-gradient(180deg, #ffffff, #f7fbff);
    box-shadow: inset 0 0 0 2px rgba(74, 136, 255, 0.28);
}

.video-reward-mode-toggle .settings-toggle-copy {
    min-width: 0;
    gap: 5px;
}

.video-reward-mode-toggle .settings-toggle-title {
    line-height: 1.2;
}

.video-reward-mode-toggle .settings-toggle-text {
    line-height: 1.45;
}

.video-questions-editor[hidden] {
    display: none !important;
}

.video-editor-layout {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}

.video-editor-layout > * {
    min-width: 0;
}

.video-editor-layout .panel-head-copy,
.video-editor-layout .shop-editor-form,
.video-editor-layout .field,
.video-editor-layout .actions-row,
.video-editor-layout .video-reward-mode-toggle,
.video-editor-layout .video-reward-mode-toggle .settings-toggle-copy,
.video-editor-layout .learning-question-card,
.video-editor-layout .learning-question-footer,
.video-editor-layout .learning-correct-group {
    min-width: 0;
}

.video-editor-thumb {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    background: #111827;
    margin: 6px 0 16px;
}

.video-editor-thumb img {
    width: 100%;
    display: block;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.video-editor-layout .video-editor-link-status,
.video-editor-layout .video-editor-link-preview {
    margin-top: 12px;
}

.video-editor-link-preview-compact {
    position: relative;
    grid-template-columns: 1fr;
    padding: 12px;
}

.video-editor-link-preview-compact .video-editor-link-preview-media {
    min-height: 0;
}

.video-editor-link-preview-clear {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 10px 24px rgba(32, 66, 131, 0.14);
    color: #1d2a53;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}

.video-watch-panel {
    display: grid;
    gap: 18px;
}

.video-embed-shell {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    border: 1px solid rgba(239, 68, 68, 0.24);
    border-radius: 22px;
    overflow: hidden;
    background: #111827;
}

.video-embed-shell iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.video-attention-modal {
    z-index: 420;
}

.video-success-confetti-layer {
    position: fixed;
    inset: 0;
    z-index: 460;
    overflow: hidden;
    pointer-events: none;
}

.video-success-confetti-piece {
    position: absolute;
    top: -14vh;
    width: 14px;
    height: 30px;
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(0deg);
    animation: video-confetti-fall var(--confetti-duration, 1.2s) ease-out var(--confetti-delay, 0s) forwards;
    box-shadow: 0 8px 22px rgba(79, 124, 255, 0.22);
}

.home-trophy-celebration {
    position: fixed;
    inset: 0;
    z-index: 470;
    display: grid;
    place-items: center;
    pointer-events: none;
    padding: 24px;
}

.home-trophy-celebration-card {
    width: min(320px, calc(100vw - 36px));
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 0;
    opacity: 0;
    transform: translate3d(0, 10px, 0);
}

.home-trophy-celebration.is-active .home-trophy-celebration-card {
    animation: home-trophy-celebration-fade 1.9s cubic-bezier(.22, .61, .36, 1) both;
}

.home-trophy-celebration-image {
    width: 188px;
    height: 188px;
    object-fit: contain;
    filter: drop-shadow(0 18px 28px rgba(255, 184, 0, 0.18));
}

.home-trophy-celebration.is-active .home-trophy-celebration-image {
    animation: home-trophy-image-fade 1.9s cubic-bezier(.22, .61, .36, 1) both;
}

@keyframes home-trophy-celebration-fade {
    0% {
        opacity: 0;
        transform: translate3d(0, 10px, 0);
    }
    18% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
    68% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
    86% {
        opacity: 0.64;
        transform: translate3d(0, 0, 0);
    }
    100% {
        opacity: 0;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes home-trophy-image-fade {
    0% {
        opacity: 0;
        transform: translate3d(0, 8px, 0) scale(0.96);
    }
    18% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
    68% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
    86% {
        opacity: 0.7;
        transform: translate3d(0, 0, 0) scale(0.992);
    }
    100% {
        opacity: 0;
        transform: translate3d(0, 0, 0) scale(0.978);
    }
}

@keyframes video-confetti-fall {
    0% {
        opacity: 0;
        transform: translate3d(0, -8vh, 0) rotate(0deg) scale(0.86);
    }
    12% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate3d(var(--confetti-drift, 0px), 118vh, 0) rotate(var(--confetti-rotate, 180deg)) scale(1);
    }
}

body.child-page-video-detail .share-sheet-backdrop.video-attention-backdrop {
    background: rgba(113, 135, 177, 0.2);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.video-attention-sheet {
    left: 50%;
    right: auto;
    bottom: 12px;
    top: auto;
    width: min(430px, calc(100vw - 24px));
    padding: 30px 18px 24px;
    border: 1px solid var(--border);
    border-radius: 30px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 252, 255, 0.96));
    box-shadow: 0 26px 56px rgba(72, 124, 177, 0.22);
    transform: translate(-50%, 22px);
    text-align: left;
}

.video-attention-kicker {
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8b5cf6;
}

.video-attention-sheet .share-sheet-head {
    min-height: 66px;
    justify-content: center;
}

.video-attention-sheet .share-sheet-copy {
    justify-items: center;
    gap: 6px;
    width: 100%;
}

.video-attention-sheet .share-sheet-title {
    width: 100%;
    text-align: center;
    font-size: 1.28rem;
}

.video-attention-text {
    margin: 0;
    color: #6f7fa3;
    font-size: 0.95rem;
    line-height: 1.4;
    font-weight: 700;
}

.video-attention-countdown {
    min-width: 40px;
    margin: 2px auto 12px;
    display: grid;
    place-items: center;
    color: #2f67f6;
    font-size: 2.5rem;
    font-weight: 950;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.video-attention-confirm {
    min-height: 58px;
    width: 100%;
    margin-top: 16px;
    margin-bottom: 2px;
    border-radius: 18px;
    font-size: 1.12rem;
    font-weight: 900;
    color: #ffffff;
}

.video-attention-confirm:hover,
.video-attention-confirm:focus {
    color: #ffffff;
    transform: none;
}

.video-detail-meta {
    margin-top: 2px;
    gap: 10px;
}

.video-detail-meta .pill {
    min-height: 36px;
    padding: 0 14px;
    border-radius: 16px;
    font-size: 0.88rem;
    font-weight: 900;
}

.video-watch-state {
    display: grid;
    gap: 14px;
}

.video-watch-meta {
    min-width: 78px;
    font-variant-numeric: tabular-nums;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 1rem;
    font-weight: 900;
}

.video-watch-note {
    margin: 0;
    font-size: 1rem;
    line-height: 1.55;
}

.video-completed {
    border: 1px solid rgba(22, 163, 74, 0.24);
    border-radius: 8px;
    background: rgba(22, 163, 74, 0.06);
    padding: 14px;
    display: grid;
    gap: 4px;
    color: var(--green);
    font-weight: 800;
}

.video-quiz-ready {
    color: #6d28d9;
    border-color: rgba(139, 92, 246, 0.24);
    background: rgba(139, 92, 246, 0.08);
}

body.child-page-video-detail .video-btn {
    min-height: 64px;
    padding: 0 20px;
    justify-content: space-between;
    gap: 12px;
    font-size: 1rem;
}

body.child-page-video-detail .video-btn .coin-icon {
    width: 18px;
    height: 18px;
}

body.child-page-video-detail .learning-submit-btn,
body.child-page-learning-detail .learning-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 64px;
    padding: 12px 18px;
    text-align: center;
    line-height: 1.1;
}

body.child-page-video-detail .video-btn,
body.child-page-video-detail .learning-submit-btn,
body.child-page-learning-detail .learning-submit-btn {
    position: relative;
}

body.child-page-video-detail .video-btn.is-loading,
body.child-page-video-detail .learning-submit-btn.is-loading,
body.child-page-learning-detail .learning-submit-btn.is-loading {
    pointer-events: none;
    color: transparent !important;
}

body.child-page-video-detail .video-btn.is-loading .video-watch-meta,
body.child-page-video-detail .learning-submit-btn.is-loading .learning-submit-btn-label,
body.child-page-video-detail .learning-submit-btn.is-loading .learning-submit-btn-reward,
body.child-page-learning-detail .learning-submit-btn.is-loading .learning-submit-btn-label,
body.child-page-learning-detail .learning-submit-btn.is-loading .learning-submit-btn-reward {
    opacity: 0;
}

body.child-page-video-detail .video-btn.is-loading::after,
body.child-page-video-detail .learning-submit-btn.is-loading::after,
body.child-page-learning-detail .learning-submit-btn.is-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 18px;
    height: 18px;
    margin: auto;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.28);
    border-top-color: #ffffff;
    animation: subscriptionActionSpin 0.75s linear infinite;
}

body.child-page-video-detail .learning-submit-btn-label,
body.child-page-learning-detail .learning-submit-btn-label {
    display: inline-block;
    font-size: 1rem;
    font-weight: 900;
    white-space: nowrap;
}

body.child-page-video-detail .learning-submit-btn-reward,
body.child-page-learning-detail .learning-submit-btn-reward {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 1rem;
    font-weight: 900;
    white-space: nowrap;
}

body.child-page-video-detail .learning-submit-btn-reward .coin-icon,
body.child-page-learning-detail .learning-submit-btn-reward .coin-icon {
    width: 16px;
    height: 16px;
}

@media (max-width: 560px) {
    .video-detail-meta {
        gap: 8px;
    }

    .video-detail-meta .pill {
        min-height: 34px;
        padding: 0 12px;
        font-size: 0.82rem;
    }

    .video-watch-note {
        font-size: 0.96rem;
        line-height: 1.5;
    }

    body.child-page-video-detail .video-btn {
        min-height: 52px;
        padding: 0 16px;
        font-size: 0.95rem;
    }

    body.child-page-video-detail .learning-submit-btn,
    body.child-page-learning-detail .learning-submit-btn {
        min-height: 52px;
        gap: 8px;
        padding: 12px 16px;
    }

    body.child-page-video-detail .learning-submit-btn-label,
    body.child-page-video-detail .learning-submit-btn-reward,
    body.child-page-learning-detail .learning-submit-btn-label,
    body.child-page-learning-detail .learning-submit-btn-reward {
        font-size: 0.95rem;
    }

    .video-watch-meta {
        min-width: 70px;
        font-size: 0.95rem;
    }
}

.card-pack-open-page {
    display: grid;
    gap: 12px;
    --card-pack-card-width: 238px;
    --card-pack-card-height: 328px;
}

body.child-page-open-card-pack .panel.card-pack-open-panel {
    height: 72vh;
}

body.child-page-open-card-pack .card-pack-open-panel {
    grid-template-rows: auto minmax(0, 1fr) auto;
    align-content: stretch;
}

.card-pack-open-panel {
    display: grid;
    gap: 14px;
    overflow: hidden;
}

.card-pack-open-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.card-pack-open-copy {
    min-width: 0;
}

.card-pack-shop-link {
    border-radius: 999px;
    white-space: nowrap;
}

.card-pack-status {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.card-pack-status .panel-chip strong {
    color: #22315d;
}

.card-pack-stage {
    position: relative;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 24px;
    justify-items: center;
    /* padding: 36px 20px 36px; */
    border-radius: 28px;
    /* background: radial-gradient(circle at top, rgba(255, 255, 255, 0.92), rgba(247, 244, 255, 0.88) 62%, rgba(237, 231, 255, 0.92)); */
    /* box-shadow: inset 0 0 0 1px rgba(170, 194, 236, 0.22); */
    /* height: 96vh; */
}

body.child-page-open-card-pack .card-pack-stage {
    align-content: stretch;
    justify-content: center;
    min-height: 100%;
    transform: none;
}

.card-pack-stage-glow {
    position: absolute;
    inset: 12% 14%;
    border-radius: 999px;
    /* background: radial-gradient(circle, rgb(213 255 119 / 20%), rgba(255, 255, 255, 0)); */
    filter: blur(10px);
    pointer-events: none;
}

.card-pack-stage .scene {
    position: relative;
    width: min(100%, calc(var(--card-pack-card-width) + 14px));
    min-height: 336px;
    display: grid;
    place-items: center;
    perspective: 1400px;
    perspective-origin: center center;
    z-index: 1;
}

.card-pack-stage-note {
    margin: 0;
    text-align: center;
    color: #68789e;
    /* font-weight: 700; */
    font-size: 0.92rem;
    position: relative;
    z-index: 1;
    width: 234px !important;
}

.card-pack-open-page .card3d {
    width: min(100%, var(--card-pack-card-width));
    height: var(--card-pack-card-height);
    position: relative;
    transform-style: preserve-3d;
    transform-origin: center center;
    transition: transform 0.82s cubic-bezier(.22, .61, .36, 1);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    will-change: transform;
}

.card-pack-open-page .card3d,
.card-pack-open-page .card3d * {
    user-select: none;
    -webkit-user-select: none;
}

.card-pack-open-page .card3d.is-flipped {
    transform: rotateY(180deg);
    pointer-events: none;
}

.card-pack-open-page .card3d.is-opened {
    transform: none;
    transform-style: flat;
}

.card-pack-open-page .card3d.is-opened .card-front {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: none;
}

.card-pack-open-page .card3d.is-opened .card-back {
    transform: none;
    backface-visibility: visible;
}

@keyframes card-pack-spin {
    from { transform: rotateY(0deg) scale(1); }
    to { transform: rotateY(720deg) scale(1.02); }
}

.card-pack-open-page .card3d.spin {
    animation: card-pack-spin 0.82s linear forwards;
}

@keyframes card-pack-tap {
    0% { transform: scale(0.94) rotateZ(0deg); }
    18% { transform: scale(1.04) rotateZ(var(--tap-angle, 6deg)); }
    38% { transform: scale(0.97) rotateZ(-3deg); }
    60% { transform: scale(1.02) rotateZ(2deg); }
    100% { transform: scale(1) rotateZ(0deg); }
}

.card-pack-open-page .card3d.tap {
    animation: card-pack-tap 0.48s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.card-pack-open-page .card-face {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border-radius: 26px;
    overflow: hidden;
    backface-visibility: hidden;
}

.card-pack-open-page .card-front,
.card-pack-open-page .card-back {
    color: #20315c;
}

.card-pack-open-page .card-front {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 12px;
    padding: 22px 16px;
    transform: translateZ(1px);
    background:
        radial-gradient(circle at top, rgba(255, 255, 255, 0.94), rgba(244, 232, 255, 0.98) 58%, rgba(192, 113, 255, 0.98));
}

.card-pack-open-page .card-back {
    transform: rotateY(180deg) translateZ(1px);
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 25px;
    text-align: center;
    padding: 18px 16px;
}

.card-pack-open-page .lvl-common .card-front,
.card-pack-open-page .lvl-common .card-back {
    background: radial-gradient(circle at top, rgb(249 241 22 / 28%), #ffe681 62%, #ffc53d)
}

.card-pack-open-page .lvl-rare .card-front,
.card-pack-open-page .lvl-rare .card-back {
    background: radial-gradient(circle at top, #f5ffe8, #8fe973 58%, #39b86d);
}

.card-pack-open-page .lvl-super .card-front,
.card-pack-open-page .lvl-super .card-back {
    background: radial-gradient(circle at top, #edf8ff, #79c9ff 56%, #3c77ff);
    color: #ffffff;
}

.card-pack-open-page .lvl-epic .card-front,
.card-pack-open-page .lvl-epic .card-back {
    background: radial-gradient(circle at top, #fff2ff, #d98fff 56%, #a34dff);
    color: #ffffff;
}

.card-pack-open-page .lvl-mythic .card-front,
.card-pack-open-page .lvl-mythic .card-back {
    background: radial-gradient(circle at top, #fff0e8, #ff9872 56%, #ff5342);
    color: #ffffff;
}

.card-pack-open-page .lvl-legendary .card-front,
.card-pack-open-page .lvl-legendary .card-back {
    background: radial-gradient(circle at top, #eafffa, #7af5db 56%, #0fc8bf);
}

.card-pack-front-index {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: inline-grid;
    place-items: center;
    font-size: 1.2rem;
    font-weight: 900;
    color: #22315d;
    background: rgba(255, 255, 255, 0.68);
    box-shadow: inset 0 0 0 1px rgba(171, 196, 236, 0.28);
}

.card-pack-front-mark {
    width: 126px;
    height: 126px;
    border-radius: 34px;
    display: grid;
    place-items: center;
    /* background: rgba(255, 255, 255, 0.68); */
    /* box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42); */
}

.card-pack-front-mark img {
    width: 112px;
    height: 112px;
    object-fit: contain;
}

.card-pack-front-title {
    font-size: 1rem;
    font-weight: 900;
}

.card-pack-rarity {
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.3);
}

.card-pack-back-image-wrap {
    width: 124px;
    height: 124px;
    border-radius: 28px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.3);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.card-pack-back-image {
    width: 92px;
    height: 92px;
    object-fit: contain;
}

.card-pack-back-image.is-empty-box {
    width: 68px;
    height: 68px;
}

.card-pack-back-image[src=""] {
    display: none;
}

.card-pack-back-title {
    font-size: 1.02rem;
    font-weight: 900;
    line-height: 1.15;
}

.card-pack-back-category {
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 800;
    background: rgba(255, 255, 255, 0.3);
}

.card-pack-back-category:empty {
    display: none;
}

.card-pack-back-description {
    font-size: 0.88rem;
    line-height: 1.45;
    max-width: 92%;
}

.card-pack-open-actions {
    display: grid;
    gap: 10px;
}

body.child-page-open-card-pack .card-pack-open-actions {
    display: none;
}

.card-pack-reward-list {
    display: grid;
    gap: 10px;
}

.card-pack-reward-row {
    display: grid;
    grid-template-columns: 36px 60px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 22px;
    background: rgba(246, 250, 255, 0.9);
    box-shadow: inset 0 0 0 1px rgba(171, 196, 236, 0.22);
}

.card-pack-reward-row.is-current {
    box-shadow: inset 0 0 0 2px rgba(122, 99, 255, 0.24);
}

.card-pack-reward-row.is-revealed {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(240, 250, 241, 0.98));
}

.card-pack-reward-index {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-weight: 900;
    color: #22315d;
    background: rgba(226, 234, 253, 0.9);
}

.card-pack-reward-thumb {
    width: 60px;
    height: 60px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: inset 0 0 0 1px rgba(171, 196, 236, 0.22);
}

.card-pack-reward-thumb img {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.card-pack-reward-thumb img.is-empty-box {
    width: 32px;
    height: 32px;
}

.card-pack-reward-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.card-pack-reward-copy strong {
    font-weight: 900;
    line-height: 1.2;
}

.card-pack-reward-copy span {
    color: #6a7ba1;
    line-height: 1.4;
}

@media (max-width: 640px) {
    .billing-hero-head {
        display: grid;
        /* margin-bottom: 15px; */
    }

    .billing-status-card {
        min-width: 0;
    }

    .billing-status-top {
        gap: 10px;
    }

    .subscription-card-grid {
        grid-template-columns: 1fr;
    }

    .card-pack-open-head {
        display: grid;
    }

    .card-pack-shop-link {
        width: 100%;
        justify-content: center;
    }

    .card-pack-stage {
        padding-inline: 8px;
    }

    .card-pack-stage .scene {
        width: 100%;
        min-height: 330px;
    }

    .card-pack-open-page {
        --card-pack-card-width: 234px;
        --card-pack-card-height: 324px;
    }

    .card-pack-open-page .card3d {
        width: min(100%, var(--card-pack-card-width));
        height: var(--card-pack-card-height);
    }

    .card-pack-reward-row {
        grid-template-columns: 34px 52px minmax(0, 1fr);
        gap: 10px;
        padding: 11px 12px;
    }

    body.child-content-theme.child-page-purchases .purchases-grid .purchase-card {
        grid-template-columns: none;
    }

    body.child-content-theme.child-page-purchases .purchases-grid .purchase-card .purchase-image {
        min-height: 0;
    }

    .card-pack-reward-thumb {
        width: 52px;
        height: 52px;
        border-radius: 16px;
    }

    .card-pack-reward-thumb img {
        width: 38px;
        height: 38px;
    }
}

.quest-panel {
    border-color: #f97316;
    box-shadow: 0 0 0 0.2rem rgba(249, 115, 22, 0.14);
}

.home-quest-panel,
.quest-available-panel,
.quest-list-panel {
    margin-top: 15px;
}

.quest-panel .float-head {
    border-color: rgba(249, 115, 22, 0.28);
}

.quest-review-card .float-field {
    margin-bottom: 0;
    padding-top: 20px;
}

.quest-review-card .float-head {
    transform: translateY(-50%);
}

.quest-review-card .float-field .file-picker {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.quest-review-card .file-picker-btn {
    background: transparent;
    box-shadow: none;
    color: #121826;
}

.quest-editor-layout .file-picker-btn {
    color: #121826;
}

.quest-panel .empty {
    height: auto;
    min-height: 150px;
}

.panel-top-badge {
    margin: 0;
}

.quest-card {
    border-color: rgba(249, 115, 22, 0.28);
}

.quest-card:not(.learning-card) .item-image {
    border-radius: 20px;
    overflow: hidden;
    background: #fff7ed;
}

.quest-card:not(.learning-card) .item-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    border-radius: inherit;
}
.quest-card .item-image img.quest-image-fallback {
    position: static;
    inset: auto;
    width: 50px;
    height: 50px;
    max-width: 50px;
    max-height: 50px;
    object-fit: contain;
    border-radius: 0;
}

.quest-home-carousel {
    overflow: hidden;
}

.quest-home-carousel.is-static {
    padding: 0;
}

.home-quest-panel .quest-home-carousel .learning-carousel-track {
    grid-auto-columns: minmax(220px, 100%);
    scroll-padding-inline: 0 34px;
}

.home-quest-panel .quest-home-carousel .learning-carousel-btn.prev {
    left: 0;
}

.home-quest-panel .quest-home-carousel .learning-carousel-btn.next {
    right: 0;
}

.home-quest-panel .learning-card.quest-card .item-image {
    background: #fff7ed;
    border-radius: 19px;
}

.home-quest-panel .learning-card.quest-card .item-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    border-radius: inherit;
}

.home-quest-panel .learning-card.quest-card .item-image img.quest-image-fallback {
    position: static;
    inset: auto;
    width: 50px;
    height: 50px;
    max-width: 50px;
    max-height: 50px;
    object-fit: contain;
    border-radius: 0;
}

.home-quest-panel .learning-card.quest-card .item-body {
    /* min-height: 164px; */
    grid-template-rows: auto auto 1fr;
}

.home-quest-panel .learning-card.quest-card form,
.home-quest-panel .learning-card.quest-card .quest-btn {
    grid-row: 3;
    align-self: end;
}

.quest-btn {
    border-color: #f97316;
    background: #f97316;
    color: #ffffff;
}

.quest-btn:hover,
.quest-btn:focus {
    border-color: #ea580c;
    background: #ea580c;
    color: #ffffff;
}

.quest-btn:disabled {
    border-color: #fdba74;
    background: #fdba74;
    cursor: not-allowed;
}

.quest-submit-btn {
    position: relative;
}

.quest-submit-btn.is-loading,
.quest-submit-btn.is-loading:disabled {
    pointer-events: none;
    border-color: #f97316;
    background: #f97316;
    color: transparent !important;
    cursor: wait;
}

.quest-submit-btn.is-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 18px;
    height: 18px;
    margin: auto;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.28);
    border-top-color: #ffffff;
    animation: subscriptionActionSpin 0.75s linear infinite;
}

.pill.quest-price {
    /* color: #c2410c; */
    /* border-color: rgba(249, 115, 22, 0.26); */
    /* background: rgba(249, 115, 22, 0.08); */
}

.quest-status {
    min-height: 42px;
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
}

.quest-status.waiting {
    border: 1px solid rgba(249, 115, 22, 0.28);
    background: rgba(249, 115, 22, 0.08);
    color: #c2410c;
}

.quest-submit-form,
.quest-reject-form,
.quest-cancel-form,
.quest-feedback,
.quest-home-group,
.quest-review-list {
    display: grid;
    gap: 30px;
}

.quest-review-card .quest-submit-form {
    order: 10;
}

.quest-review-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 25px;
    align-items: stretch;
}

.quest-review-actions > * {
    min-width: 0;
}

.quest-feedback {
    border: 1px solid rgba(249, 115, 22, 0.24);
    border-radius: 8px;
    background: rgba(249, 115, 22, 0.07);
    padding: 12px;
    color: #7c2d12;
    font-size: 0.86rem;
    line-height: 1.4;
}

.quest-proof {
    width: 100%;
    border: 1px solid rgba(249, 115, 22, 0.24);
    border-radius: 8px;
    overflow: hidden;
    display: block;
    background: #ffffff;
}

.quest-proof img {
    width: 100%;
    max-height: 220px;
    object-fit: cover;
    display: block;
}

.quest-review-card {
    border-color: rgba(249, 115, 22, 0.28);
}

.quest-home-heading {
    margin-bottom: 4px;
}

.quest-carousel-btn {
    color: #ea580c;
}

.quest-carousel-btn:hover,
.quest-carousel-btn:focus {
    color: #c2410c;
}

.quest-editor-layout {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
}

@media (max-width: 860px) {
    .panel-head {
        flex-direction: column;
    }

    .panel-chip-row {
        justify-content: flex-start;
    }

    .parent-children-grid {
        grid-template-columns: 1fr;
    }

    .grid,
    .grid.two,
    .split {
        grid-template-columns: 1fr;
    }

    .item-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .family-link-head {
        grid-template-columns: 1fr;
    }

    .family-link-switch {
        justify-self: stretch;
    }

    .family-link-form-row {
        grid-template-columns: 1fr;
    }

    .parent-referral-actions-row {
        grid-template-columns: minmax(0, 1fr) 60px;
    }

    .gadget-plan-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .learning-carousel-track {
        grid-auto-columns: minmax(214px, 78%);
    }

    .shop-editor-layout,
    .learning-editor-layout,
    .video-editor-layout,
    .quest-editor-layout,
    .learning-options-grid {
        grid-template-columns: 1fr;
    }

    .user-chip-text {
        display: none;
    }

    .topbar-profile-name {
        max-width: 42vw;
    }
}

@media (max-width: 560px) {
    .video-editor-layout .actions-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .video-editor-layout .panel-subtitle,
    .video-editor-layout .settings-toggle-text {
        overflow-wrap: anywhere;
    }

    .child-activity-panel {
        margin-inline: 0;
        padding: 0;
        border-radius: 20px;
    }

    .child-activity-chart {
        min-height: 142px;
        padding: 6px 6px 0;
        border-radius: 18px;
    }

    .child-activity-legend {
        gap: 6px;
    }

    .child-activity-legend-item {
        font-size: 0.68rem;
        padding: 0 8px;
    }

    .learning-questions-editor {
        padding: 14px;
        border-radius: 22px;
    }

    .learning-questions-head {
        display: grid;
        gap: 12px;
    }

    .learning-add-btn {
        width: 100%;
    }

    .learning-question-card {
        padding: 0px;
        border-radius: 22px;
    }

    .learning-option-row {
        grid-template-columns: 44px minmax(0, 1fr) auto;
        gap: 10px;
        padding: 10px;
    }

    .learning-option-badge {
        width: 44px;
        height: 44px;
    }

    .learning-question-footer {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .learning-correct-picker {
        gap: 10px;
    }

    .learning-correct-chip {
        min-width: 46px;
        justify-content: center;
    }

    .learning-option-add-btn {
        width: 100%;
    }

    body.child-home-theme {
        background-position: center top;
        background-size: auto 100dvh;
    }

    body.child-shop-theme {
        background-position: center top;
        background-size: auto 100dvh;
    }

    body.child-page-quests {
        background-position: center top;
        background-size: auto 100dvh;
    }

    body.child-page-cart {
        background-position: center top;
        background-size: auto 100dvh;
    }

    body.child-page-purchases {
        background-position: center top;
        background-size: auto 100dvh;
    }

    body.child-page-bonuses {
        background-position: center top;
        background-size: auto 100dvh;
    }

    body.child-page-penalties {
        background-position: center top;
        background-size: auto 100dvh;
    }

    body.parent-theme .app-main {
        padding-top: 122px;
        width: calc(100% - 34px);
    }

    body.parent-theme .app-topbar-inner {
        width: calc(100% - 34px);
        min-height: 68px;
        margin-top: 33px;
        padding: 8px 10px;
        border-radius: 24px;
    }

    body.parent-theme .topbar-profile .avatar {
        width: 50px;
        height: 50px;
        flex-basis: 50px;
        border-radius: 18px;
    }

    body.parent-theme .bottom-nav-inner.parent-nav {
        width: calc(100% - 34px);
        margin-bottom: 8px;
        border-radius: 26px;
    }

    body.parent-page-settings .billing-hero-panel {
        gap: 0;
        /* margin-bottom: 0;
        padding: 10px 12px; */
    }

    body.parent-page-settings .billing-hero-panel.is-vip-only {
        margin-bottom: 0;
    }

    body.parent-page-settings .billing-hero-panel.is-vip-only .billing-hero-head {
        margin-bottom: 0;
    }

    body.parent-page-settings .parent-page {
        gap: 12px;
    }

    body.parent-page-settings .settings-tabs-nav {
        gap: 12px;
        padding-inline: 36px;
        padding-left: 0;
    }

    body.parent-page-settings .settings-tabs-carousel {
        min-height: 46px;
    }

    body.parent-page-settings .settings-tabs-scroll-btn {
        /* width: 34px;
        height: 34px; */
    }

    body.parent-page-settings .settings-tabs-scroll-btn img {
        width: 35px;
        height: 35px;
    }

    body.parent-page-settings .settings-tabs-scroll-btn.prev {
        left: 0;
    }

    body.parent-page-settings .settings-tabs-scroll-btn.next {
        right: 0;
    }

    body.parent-page-settings .settings-tab-btn {
        min-height: 46px;
        padding: 9px 12px;
        font-size: 0.76rem;
    }

    body.parent-page-settings .settings-tab-btn img {
        width: 18px;
        height: 18px;
    }

    body.parent-page-settings .split {
        gap: 12px;
    }

    .parent-page {
        gap: 18px;
    }

    .gadget-timer-card {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .gadget-plan-grid {
        grid-template-columns: 1fr 1fr;
    }

    .app-topbar-inner {
        padding-left: 12px;
        padding-right: 12px;
    }

    .auth-pane,
    .panel {
        padding: 27px 14px;
    }

    .bottom-nav-inner {
        gap: 2px;
        padding-left: 6px;
        padding-right: 6px;
    }

    .nav-link {
        font-size: 0.68rem;
    }

    .item-grid {
        gap: 10px;
    }

    .item-grid .item-body {
        padding: 10px;
        background: aliceblue;
        border-radius: 0 0 21px 21px;
    }

    .item-grid .meta-row {
        gap: 6px;
    }

    .item-grid .pill {
        font-size: 0.72rem;
        height: 20px !important;
    }

    .trophy-picker-track {
        gap: 8px;
        padding-inline: 28px;
    }

    .trophy-picker-card {
        flex: 0 0 96px;
        min-height: 128px;
        border-radius: 18px;
        padding: 8px;
        gap: 5px;
    }

    .trophy-picker-card img {
        width: 58px;
        height: 58px;
    }

    .trophy-picker-card strong {
        font-size: 0.72rem;
    }

    .trophy-picker-card span {
        font-size: 0.6rem;
        line-height: 1.2;
    }

    .trophy-picker-owned-badge {
        top: 7px;
        right: 7px;
        width: 20px;
        height: 20px;
    }

    .trophy-picker-owned-badge img {
        width: 20px;
        height: 20px;
    }

    .trophy-picker-scroll-btn {
        /* width: 35px;
        height: 35px; */
    }

    .trophy-picker-scroll-btn img {
        /* width: 35px;
        height: 35px; */
    }

    .notification-sheet {
        left: 0;
        right: 0;
        top: auto;
        bottom: 0;
        width: 100%;
        max-height: 82vh;
        border-radius: 8px 8px 0 0;
        transform: translateY(18px);
    }

    body.child-home-theme .notification-sheet,
    body.parent-theme .notification-sheet {
        left: 12px;
        right: 12px;
        top: 104px;
        bottom: auto;
        width: auto;
        height: calc(100vh - 116px);
        max-height: calc(100vh - 116px);
        border-radius: 28px;
        transform: translateY(-14px) scale(0.98);
    }

    body.child-home-theme .notification-modal.show .notification-sheet,
    body.parent-theme .notification-modal.show .notification-sheet {
        transform: translateY(0) scale(1);
    }
}