:root {
    --ink: #1d274d;
    --muted: #667083;
    --line: #e2e6dc;
    --paper: #fbfaf6;
    --panel: #ffffff;
    --green: #28aaa0;
    --violet: #7250a6;
    --coral: #f39a32;
    --amber: #f2b23c;
    --blue: #2169a8;
    --navy: #1d274d;
    --shadow: 0 16px 38px rgba(29, 39, 77, .12);
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 96px;
}
* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ink);
    background: var(--paper);
    line-height: 1.5;
}
a { color: inherit; }
.container { width: min(1160px, calc(100% - 32px)); margin: 0 auto; padding: 28px 0 56px; }
.topbar, .child-topbar {
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
    padding: 12px max(16px, calc((100vw - 1160px) / 2));
    background: #ffffff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 100;
    box-shadow: 0 8px 20px rgba(29, 39, 77, .05);
}
.brand-cluster {
    display: flex;
    align-items: center;
    gap: 22px;
    min-width: 0;
}
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 850; font-size: 1.35rem; text-decoration: none; color: var(--navy); }
.brand img { width: 46px; height: 46px; object-fit: contain; border-radius: 8px; }
.brand-logo {
    width: 252px;
    height: 84px;
    object-fit: contain;
    object-position: left center;
    border-radius: 0;
}
.nav { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.nav a, .link-button, .nav-dropdown-trigger { border: 0; background: transparent; font: inherit; text-decoration: none; color: var(--muted); cursor: pointer; padding: 8px 10px; }
.nav .is-active, .nav a:hover, .link-button:hover, .nav-dropdown-trigger:hover { color: var(--ink); }
.nav-toggle {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 54px;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--navy);
    font: inherit;
    font-weight: 900;
    cursor: pointer;
    box-shadow: none;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}
.nav-toggle:hover,
.nav-toggle[aria-expanded="true"] {
    background: rgba(40, 170, 160, .10);
    color: var(--green);
}
.nav-toggle span {
    display: block;
    width: 32px;
    height: 5px;
    border-radius: 999px;
    background: currentColor;
    transition: transform .18s ease, opacity .18s ease;
}
.nav-toggle strong {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
}
.nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(29, 39, 77, .26);
    backdrop-filter: blur(4px);
}

@media (max-width: 1100px) {
    body.nav-open {
        overflow: hidden;
    }
    .topbar,
    .child-topbar {
        align-items: center;
        gap: 12px;
    }
    .topbar .brand,
    .child-topbar .brand {
        min-width: 0;
    }
    .brand-cluster {
        width: auto;
        flex: 1 1 auto;
        justify-content: flex-start;
        gap: 12px;
        min-width: 0;
    }
    .nav-toggle {
        display: inline-flex;
        position: relative;
        z-index: 120;
        flex: 0 0 auto;
    }
    .topbar > .nav,
    .child-topbar > .nav {
        position: fixed;
        top: 14px;
        right: 14px;
        bottom: 14px;
        z-index: 110;
        width: min(390px, calc(100vw - 28px));
        display: grid;
        align-content: start;
        gap: 6px;
        padding: 86px 16px 18px;
        overflow-y: auto;
        border: 1px solid rgba(40, 170, 160, .20);
        border-radius: 18px;
        background:
            linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(247, 252, 251, .98)),
            #fff;
        box-shadow: 0 28px 70px rgba(29, 39, 77, .22);
        transform: translateX(calc(100% + 32px));
        opacity: 0;
        pointer-events: none;
        transition: transform .22s ease, opacity .18s ease;
    }
    .topbar > .nav.is-open,
    .child-topbar > .nav.is-open {
        transform: translateX(0);
        opacity: 1;
        pointer-events: auto;
    }
    .topbar > .nav::before,
    .child-topbar > .nav::before {
        content: "Navigation";
        position: absolute;
        left: 18px;
        top: 22px;
        color: var(--green);
        font-size: .78rem;
        font-weight: 950;
        letter-spacing: .08em;
        text-transform: uppercase;
    }
    .topbar > .nav a,
    .topbar > .nav .link-button,
    .topbar > .nav .nav-dropdown-trigger,
    .child-topbar > .nav a,
    .child-topbar > .nav .link-button,
    .child-topbar > .nav .nav-dropdown-trigger {
        width: 100%;
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 14px;
        border: 1px solid rgba(29, 39, 77, .08);
        border-radius: 12px;
        background: rgba(255, 255, 255, .78);
        color: var(--navy);
        font-weight: 850;
    }
    .topbar > .nav a.is-active,
    .topbar > .nav .nav-dropdown-trigger.is-active,
    .child-topbar > .nav a.is-active,
    .child-topbar > .nav .nav-dropdown-trigger.is-active {
        border-color: rgba(40, 170, 160, .28);
        background: linear-gradient(135deg, rgba(40, 170, 160, .12), rgba(255, 255, 255, .86));
        color: var(--green);
    }
    .topbar > .nav .button.primary,
    .child-topbar > .nav .button.primary {
        justify-content: center;
        border-color: transparent;
        color: #fff;
    }
    .topbar > .nav .nav-dropdown,
    .child-topbar > .nav .nav-dropdown {
        width: 100%;
        padding: 0;
    }
    .topbar > .nav .nav-dropdown::before,
    .child-topbar > .nav .nav-dropdown::before {
        display: none;
    }
    .topbar > .nav .nav-dropdown-menu,
    .child-topbar > .nav .nav-dropdown-menu {
        position: static;
        min-width: 0;
        margin: 6px 0 8px;
        padding: 8px;
        border-radius: 12px;
        box-shadow: none;
        background: rgba(251, 250, 246, .85);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        display: none;
    }
    .topbar > .nav .nav-dropdown.is-open .nav-dropdown-menu,
    .topbar > .nav .nav-dropdown:focus-within .nav-dropdown-menu,
    .child-topbar > .nav .nav-dropdown.is-open .nav-dropdown-menu,
    .child-topbar > .nav .nav-dropdown:focus-within .nav-dropdown-menu {
        display: grid;
    }
    .topbar > .nav .nav-dropdown-menu a,
    .child-topbar > .nav .nav-dropdown-menu a {
        min-height: 42px;
        border: 0;
        background: transparent;
        font-weight: 780;
    }
    .topbar > .nav .logout-icon-form,
    .child-topbar > .nav .logout-icon-form {
        width: 100%;
    }
    .topbar > .nav .nav-icon-button,
    .child-topbar > .nav .nav-icon-button {
        width: 100%;
        height: 48px;
        border-radius: 12px;
    }
    .topbar > .nav .nav-icon-button svg,
    .child-topbar > .nav .nav-icon-button svg {
        width: 21px;
        height: 21px;
    }
}
.nav-dropdown {
    position: relative;
    padding: 2px 0;
}
.nav-dropdown-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.nav-dropdown-trigger::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
}
.nav-dropdown-menu {
    position: absolute;
    top: calc(100% - 2px);
    left: 0;
    min-width: 210px;
    display: grid;
    gap: 4px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 18px 42px rgba(29, 39, 77, .14);
    z-index: 30;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}
.nav-dropdown::before {
    content: "";
    position: absolute;
    left: -8px;
    right: -8px;
    top: 100%;
    height: 14px;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.is-open .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(6px);
}
.nav-dropdown-menu a {
    display: block;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--ink);
}
.nav-dropdown-menu a:hover {
    background: #fbfcf8;
}
.nav-icon-button {
    width: 40px;
    height: 40px;
    display: inline-grid;
    place-items: center;
    padding: 0 !important;
    border: 1px solid var(--line) !important;
    border-radius: 50%;
    background: #ffffff !important;
    color: var(--ink) !important;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(29, 39, 77, .06);
}
.nav-icon-button:hover,
.nav-icon-button.is-active {
    border-color: rgba(40, 170, 160, .52) !important;
    color: var(--green) !important;
}
.nav-icon-button svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.3;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.logout-icon-form {
    margin: 0;
}
.logout-icon {
    background: #fff3d8 !important;
    color: #8a6310 !important;
}
.nav-badge-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.nav-badge {
    min-width: 22px;
    height: 22px;
    display: inline-grid;
    place-items: center;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--coral);
    color: white;
    font-size: .74rem;
    font-weight: 900;
    box-shadow: 0 6px 14px rgba(243, 154, 50, .32);
}
.nav-ai-credits {
    min-width: 136px;
    display: grid !important;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 2px 8px;
    padding: 7px 10px !important;
    border: 1px solid rgba(40, 170, 160, .22);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(40, 170, 160, .08), rgba(255, 255, 255, .92));
    color: var(--ink) !important;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(29, 39, 77, .05);
}
.brand-ai-credits {
    position: relative;
    min-width: 154px;
    padding: 9px 12px !important;
    border-color: rgba(40, 170, 160, .28);
    background:
        linear-gradient(135deg, rgba(40, 170, 160, .10), rgba(255, 255, 255, .96)),
        #fff;
    box-shadow: 0 14px 32px rgba(29, 39, 77, .08);
}
.brand-ai-credits::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 9px;
    bottom: 9px;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(40, 170, 160, .34), transparent);
}
.nav-ai-credits span {
    font-size: .72rem;
    font-weight: 800;
    color: var(--muted);
}
.nav-ai-credits strong {
    font-size: .82rem;
    font-weight: 900;
    color: var(--green);
}
.nav-ai-credits em {
    font-size: .72rem;
    font-style: normal;
    font-weight: 900;
    color: var(--violet);
}
.nav-ai-credits i {
    grid-column: 1 / -1;
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(29, 39, 77, .08);
}
.nav-ai-credits i::before {
    content: "";
    display: block;
    width: var(--ai-credit-usage, 0%);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--green), #7bd7c9);
}
.nav-ai-credits.is-low {
    border-color: rgba(243, 154, 50, .34);
    background: linear-gradient(135deg, rgba(243, 154, 50, .10), rgba(255, 255, 255, .94));
}
.nav-ai-credits.is-low strong {
    color: #a56b12;
}
.nav-ai-credits.is-low i::before {
    background: linear-gradient(90deg, var(--amber), var(--coral));
}
.account-credits-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
    gap: 18px;
    align-items: stretch;
    margin-bottom: 18px;
}
.account-credits-hero > div:first-child,
.credits-plan-card,
.credits-balance-card,
.credits-shop-section,
.credits-history-grid > article {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 16px 36px rgba(29, 39, 77, .07);
}
.account-credits-hero > div:first-child {
    padding: 28px;
}
.account-credits-hero h1 {
    margin: 0 0 10px;
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 1.05;
}
.account-credits-hero p {
    max-width: 780px;
    color: var(--muted);
    font-size: 1.05rem;
}
.credits-plan-card {
    display: grid;
    align-content: center;
    gap: 8px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(40, 170, 160, .10), #fff);
}
.credits-plan-card span,
.credits-balance-card span,
.credit-pack-card span {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.credits-plan-card strong {
    color: var(--navy);
    font-size: 1.8rem;
}
.credits-balance-grid {
    display: grid;
    grid-template-columns: 1.35fr .85fr .85fr;
    gap: 14px;
    margin-bottom: 18px;
}
.credits-balance-card {
    display: grid;
    gap: 10px;
    padding: 22px;
}
.credits-balance-card strong {
    display: block;
    color: var(--navy);
    font-size: clamp(2rem, 4vw, 3.1rem);
    line-height: 1;
}
.credits-balance-card small {
    color: var(--muted);
    font-weight: 700;
}
.credits-balance-card.main i {
    height: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(29, 39, 77, .08);
}
.credits-balance-card.main i::before {
    content: "";
    display: block;
    width: var(--credit-used, 0%);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--green), #8ce0d3);
}
.credits-balance-card.reserve {
    background: linear-gradient(135deg, rgba(114, 80, 166, .08), #fff);
}
.credits-balance-card.total {
    background: linear-gradient(135deg, rgba(243, 154, 50, .08), #fff);
}
.section-heading-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 16px;
}
.section-heading-row h2,
.credits-history-grid h2 {
    margin: 0 0 8px;
}
.credits-shop-section {
    padding: 24px;
    margin-bottom: 18px;
}
.credits-usage-guide {
    display: grid;
    grid-template-columns: minmax(220px, .72fr) minmax(0, 1.28fr);
    gap: 18px;
    margin-bottom: 18px;
    padding: 18px;
    border: 1px solid rgba(40, 170, 160, .22);
    border-radius: 8px;
    background:
        linear-gradient(135deg, #ffffff, #f7fcfb),
        radial-gradient(circle at 100% 0%, rgba(40, 170, 160, .12), transparent 34%);
}
.credits-usage-guide h3,
.credits-usage-guide p {
    margin-bottom: 0;
}
.credits-usage-guide p {
    color: var(--muted);
}
.credits-usage-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.credits-usage-grid article {
    display: grid;
    gap: 4px;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .76);
}
.credits-usage-grid article.wide {
    grid-column: 1 / -1;
}
.credits-usage-grid span {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 950;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.credits-usage-grid strong {
    color: var(--navy);
    font-size: 1.15rem;
}
.credits-usage-grid small {
    color: var(--muted);
    font-weight: 760;
    line-height: 1.4;
}
.credit-pack-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
.credit-pack-card {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 18px;
    border: 1px solid rgba(40, 170, 160, .22);
    border-radius: 8px;
    background: #fff;
}
.credit-pack-card strong {
    color: var(--navy);
    font-size: 1.45rem;
}
.credit-pack-card p {
    margin: 0;
    color: var(--green);
    font-size: 1.25rem;
    font-weight: 900;
}
.credit-pack-card small {
    min-height: 54px;
    color: var(--muted);
    font-weight: 700;
}
.credits-history-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.credits-history-grid > article {
    padding: 22px;
}
.credit-history-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--line);
}
.credit-history-row strong,
.credit-history-row small {
    display: block;
}
.credit-history-row small {
    color: var(--muted);
}
.credit-history-row > span {
    white-space: nowrap;
    color: var(--navy);
    font-weight: 900;
}
.credit-history-row > span.positive {
    color: var(--green);
}
.credit-history-row > span.negative {
    color: #a56b12;
}
.admin-ai-credit-panel {
    background:
        linear-gradient(135deg, rgba(40, 170, 160, .08), rgba(255, 255, 255, .96)),
        #fff;
}
.admin-credit-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 14px 0 16px;
}
.admin-credit-metrics div {
    padding: 14px;
    border: 1px solid rgba(40, 170, 160, .18);
    border-radius: 8px;
    background: #fff;
}
.admin-credit-metrics span {
    display: block;
    color: var(--muted);
    font-size: .76rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.admin-credit-metrics strong {
    display: block;
    color: var(--navy);
    font-size: 1.45rem;
}
.credit-positive {
    color: var(--green);
    font-weight: 900;
}
.credit-negative {
    color: #a56b12;
    font-weight: 900;
}
.guest-shell {
    min-height: 100vh; display: grid; place-items: center; padding: 24px;
    background:
        radial-gradient(circle at 18% 14%, rgba(40, 170, 160, .10), transparent 30%),
        radial-gradient(circle at 82% 18%, rgba(243, 154, 50, .12), transparent 28%),
        linear-gradient(135deg, #fbfaf6, #f3f7f2 56%, #fff6eb);
}
.auth-panel {
    width: min(520px, 100%); background: var(--panel); border: 1px solid var(--line);
    border-radius: 8px; padding: 34px; box-shadow: var(--shadow);
}
.auth-panel-wide {
    width: min(1120px, calc(100vw - 32px));
    padding: 22px;
}
.auth-logo {
    display: block;
    width: min(260px, 78%);
    aspect-ratio: auto;
    object-fit: contain;
    margin: 0 auto 18px;
    border-radius: 0;
}
.oyani-logo { filter: drop-shadow(0 10px 18px rgba(29, 39, 77, .10)); }
.auth-brand-subtitle {
    max-width: 360px;
    margin: -8px auto 4px;
    color: var(--navy);
    font-size: .98rem;
    font-weight: 850;
    line-height: 1.35;
    text-align: center;
}
.auth-brand-signature {
    margin: 0 auto 22px;
    color: var(--teal);
    font-size: .78rem;
    font-weight: 950;
    letter-spacing: .14em;
    text-align: center;
    text-transform: uppercase;
}
.tagline {
    color: var(--muted);
    font-size: .88rem;
    font-weight: 800;
    letter-spacing: .26em;
    text-transform: uppercase;
    margin-top: -12px;
}
.auth-entry {
    display: grid;
    gap: 8px;
    margin-bottom: 18px;
    text-align: left;
}
.auth-entry h1 {
    margin-bottom: 0;
    font-size: clamp(1.55rem, 3vw, 2.15rem);
    line-height: 1.08;
}
.auth-entry .lead {
    margin-bottom: 0;
    font-size: 1rem;
}
.auth-form-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.auth-form-row a,
.auth-bottom-link a {
    color: var(--green);
    font-weight: 850;
    text-decoration: none;
}
.auth-form-row a:hover,
.auth-bottom-link a:hover {
    text-decoration: underline;
}
.auth-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}
.home-choice-grid {
    grid-template-columns: 1fr;
}
.auth-choice-card {
    display: grid;
    gap: 4px;
    min-height: 92px;
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background:
        linear-gradient(135deg, #ffffff, #fbfcf8),
        radial-gradient(circle at 92% 8%, rgba(40, 170, 160, .12), transparent 32%);
    text-decoration: none;
    box-shadow: 0 10px 22px rgba(29, 39, 77, .055);
}
.auth-choice-card:hover {
    border-color: rgba(40, 170, 160, .48);
    transform: translateY(-1px);
}
.auth-choice-card strong {
    color: var(--ink);
    font-size: 1rem;
}
.auth-choice-card span,
.child-login-helper span {
    color: var(--muted);
    font-size: .92rem;
}
.child-choice {
    background:
        linear-gradient(135deg, #fff7e8, #ffffff),
        radial-gradient(circle at 92% 8%, rgba(243, 154, 50, .16), transparent 32%);
}
.child-login-helper {
    display: grid;
    gap: 3px;
    margin-top: 16px;
    padding: 14px;
    border: 1px solid rgba(40, 170, 160, .20);
    border-radius: 8px;
    background: #f3fbf7;
}
.auth-bottom-link {
    margin: 16px 0 0;
}
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(2rem, 4vw, 3.6rem); line-height: 1.05; letter-spacing: 0; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.05rem; }
.lead { font-size: 1.1rem; color: var(--muted); }
.eyebrow { color: var(--green); font-weight: 800; text-transform: uppercase; font-size: .78rem; letter-spacing: .08em; margin-bottom: 8px; }
.button {
    display: inline-flex; align-items: center; justify-content: center; min-height: 42px;
    border-radius: 8px; padding: 10px 16px; text-decoration: none; border: 1px solid transparent;
    font-weight: 750; cursor: pointer; white-space: nowrap;
}
.primary { background: var(--navy); color: white; }
.secondary { background: white; border-color: var(--line); color: var(--ink); }
.danger { background: #fff7f5; border-color: rgba(191, 77, 77, .24); color: #9c3939; }
.danger:hover { background: #ffece8; border-color: rgba(191, 77, 77, .38); }
.child { background: var(--coral); color: var(--navy); }
.auth-actions, .button-row, .difficulty-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.form-card, .form-grid { display: grid; gap: 14px; }
.form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.full { grid-column: 1 / -1; }
label { display: grid; gap: 6px; color: var(--muted); font-weight: 650; }
input, select, textarea {
    width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 11px 12px;
    font: inherit; color: var(--ink); background: white;
}
textarea { resize: vertical; }
.notice { padding: 12px 14px; border-radius: 8px; margin-bottom: 16px; border: 1px solid var(--line); background: white; }
.notice.success { border-color: #b9d8c7; background: #eef8f1; }
.notice.error { border-color: #e7bbb3; background: #fff0ed; }
.otp-suggestion {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    background: #f8fbfb;
    border-color: #b9dedb;
}
.dashboard-otp-suggestion {
    margin-bottom: 22px;
    background:
        radial-gradient(circle at 96% 20%, rgba(40, 170, 160, .10), transparent 28%),
        linear-gradient(135deg, #ffffff, #f7fcfb);
    box-shadow: 0 12px 28px rgba(29, 39, 77, .06);
}
.dashboard-otp-suggestion div {
    display: grid;
    gap: 4px;
}
.dashboard-otp-suggestion span {
    color: var(--muted);
    font-weight: 650;
}
.otp-secret {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px;
    background: #fbfcf8;
    display: grid;
    gap: 8px;
    margin: 14px 0;
}
.otp-secret code {
    font-size: 1.05rem;
    color: var(--navy);
    word-break: break-all;
}
.otp-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 22px;
    align-items: center;
    margin-bottom: 18px;
    background:
        linear-gradient(135deg, rgba(242, 250, 248, .96), rgba(255, 251, 243, .96));
}
.otp-hero h2 {
    max-width: 860px;
    margin-bottom: 10px;
}
.otp-hero p {
    max-width: 780px;
}
.otp-store-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border: 1px solid rgba(42, 173, 163, .24);
    border-radius: 8px;
    background: rgba(255, 255, 255, .74);
    box-shadow: 0 16px 36px rgba(25, 54, 66, .08);
}
.otp-app-mark {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--green), #65c7c1);
    color: #fff;
    font-weight: 900;
    font-size: 1.45rem;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .38);
    flex: 0 0 auto;
}
.otp-store-card p,
.store-note p {
    margin: 3px 0 0;
    color: var(--muted);
}
.otp-store-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 240px)) minmax(260px, 1fr);
    gap: 14px;
    align-items: stretch;
    margin-bottom: 22px;
}
.store-badge {
    min-height: 76px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    border-radius: 8px;
    background: var(--navy);
    color: white;
    text-decoration: none;
    box-shadow: 0 16px 34px rgba(18, 31, 69, .16);
    transition: transform .18s ease, box-shadow .18s ease;
}
.store-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 42px rgba(18, 31, 69, .2);
}
.store-badge-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .12);
    font-size: 1.25rem;
    font-weight: 800;
    flex: 0 0 auto;
}
.store-badge small {
    display: block;
    color: rgba(255, 255, 255, .72);
    font-size: .72rem;
    font-weight: 650;
    line-height: 1.2;
}
.store-badge span:last-child {
    font-weight: 850;
    line-height: 1.15;
}
.store-note {
    padding: 15px 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcf8;
}
.otp-setup-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
}
.panel-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}
.otp-steps {
    display: grid;
    gap: 10px;
    margin: 16px 0;
}
.otp-steps p {
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .72);
}
.otp-steps strong {
    color: var(--green);
    margin-right: 6px;
}
.otp-advanced {
    margin: 0 0 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px 14px;
    background: #fff;
}
.otp-advanced summary {
    cursor: pointer;
    font-weight: 800;
    color: var(--navy);
}
.otp-advanced code {
    word-break: break-all;
}
.page-head { display: flex; justify-content: space-between; gap: 24px; align-items: end; margin-bottom: 24px; }
.page-head p { color: var(--muted); max-width: 760px; }
.cards-grid, .dashboard-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: 22px; }
.dashboard-grid { grid-template-columns: 1.1fr 1fr; }
.child-trace-grid { grid-template-columns: 1fr; }
.child-trace-grid .child-wide-form {
    grid-column: 1 / -1;
    order: 1;
}
.child-trace-grid .trace-collapsible {
    grid-column: 1 / -1;
    order: 2;
    padding: 0;
    overflow: hidden;
}
.trace-collapsible summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    cursor: pointer;
    list-style: none;
    padding: 18px 20px;
    background: linear-gradient(135deg, rgba(244, 248, 243, .98), rgba(255, 252, 246, .96));
}
.trace-collapsible summary::-webkit-details-marker { display: none; }
.trace-collapsible summary::after {
    content: "\203A";
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: rgba(42, 174, 164, .12);
    color: var(--teal);
    font-size: 1.6rem;
    font-weight: 900;
    transition: transform .18s ease, background .18s ease;
}
.trace-collapsible[open] summary::after {
    transform: rotate(90deg);
    background: rgba(42, 174, 164, .18);
}
.trace-collapsible summary span {
    display: grid;
    gap: 4px;
}
.trace-collapsible summary strong {
    color: var(--navy);
    font-size: 1.15rem;
}
.trace-collapsible summary small {
    color: var(--muted);
    font-weight: 700;
}
.trace-collapsible summary em {
    margin-left: auto;
    min-width: 34px;
    height: 34px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(29, 39, 77, .08);
    color: var(--navy);
    font-style: normal;
    font-weight: 900;
}
.trace-collapsible > form,
.trace-collapsible > p {
    margin: 0 20px 18px;
}
.trace-collapsible > form:first-of-type,
.trace-collapsible > p:first-of-type {
    margin-top: 18px;
}
.trace-collapsible > .inline-form {
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .72);
}
.quick-balance-panel {
    margin-bottom: 22px;
}
.quick-balance-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.quick-balance-card {
    display: grid;
    gap: 16px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: linear-gradient(145deg, #ffffff, #fbfcf8);
}
.quick-balance-head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
}
.quick-balance-head strong,
.quick-balance-head small {
    display: block;
}
.quick-balance-head small {
    color: var(--muted);
    font-weight: 800;
}
.quick-balance-head a {
    color: var(--green);
    font-weight: 900;
    text-decoration: none;
}
.quick-balance-metrics {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}
.quick-balance-metrics span {
    display: grid;
    gap: 3px;
    padding: 10px;
    border-radius: 8px;
    background: rgba(42, 174, 164, .08);
    color: var(--muted);
    font-size: .82rem;
    font-weight: 900;
}
.quick-balance-metrics b {
    color: var(--navy);
    font-size: 1.35rem;
    line-height: 1;
}
.quick-balance-objectives {
    display: grid;
    gap: 8px;
}
.quick-balance-objectives p {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 3px 10px;
    align-items: start;
    margin: 0;
    padding: 10px;
    border: 1px solid rgba(226, 230, 220, .9);
    border-radius: 8px;
    background: rgba(255, 255, 255, .72);
}
.quick-balance-objectives strong,
.quick-balance-objectives small {
    min-width: 0;
}
.quick-balance-objectives small {
    grid-column: 2;
    color: var(--muted);
    font-weight: 700;
}
.balance-status {
    grid-row: span 2;
    align-self: start;
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(29, 39, 77, .08);
    color: var(--navy);
    font-size: .75rem;
    font-weight: 900;
    white-space: nowrap;
}
.balance-status.success { background: rgba(42, 174, 164, .14); color: var(--green); }
.balance-status.progress { background: rgba(92, 150, 214, .14); color: var(--blue); }
.balance-status.soft { background: rgba(42, 174, 164, .09); color: var(--muted); }
.balance-status.warn { background: rgba(250, 180, 72, .18); color: #8a6310; }
.balance-status.review { background: rgba(226, 108, 93, .14); color: var(--coral); }
.card, .panel, .objective-card {
    background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 20px; box-shadow: 0 8px 22px rgba(44,59,55,.06);
}
.card-title-row { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.section-title { display: flex; justify-content: space-between; gap: 14px; align-items: center; margin-bottom: 18px; }
.section-title h2, .section-title p { margin: 0; }
.child-title { display: flex; align-items: center; gap: 12px; }
.child-title.large { gap: 16px; }
.child-title h1, .child-title h2, .child-title p { margin: 0; }
.child-day-kicker {
    color: var(--green);
    font-size: .95rem;
    font-weight: 950;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.child-greeting-title {
    margin-top: 4px;
    color: var(--navy);
    font-size: clamp(1.2rem, 2.5vw, 2.3rem);
    line-height: 1.08;
}
.child-avatar {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    --avatar-color: #28aaa0;
    border: 3px solid transparent;
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(135deg, var(--avatar-color), rgba(255,255,255,.95), #9ee5dd, var(--avatar-color)) border-box;
    background-size: 220% 220%;
    box-shadow: 0 8px 18px rgba(29, 39, 77, .12), 0 0 18px color-mix(in srgb, var(--avatar-color) 42%, transparent);
    animation: avatarBorderGlow 7s ease-in-out infinite;
}
.child-title.large .child-avatar { width: 78px; height: 78px; }
.icon-avatar {
    display: inline-grid;
    place-items: center;
    color: var(--avatar-color);
    font-weight: 900;
    font-size: 1.45rem;
}
.child-avatar-custom {
    padding: 4px;
}
.avatar-icon-preview {
    width: 52px;
    height: 52px;
    display: inline-grid;
    place-items: center;
    margin-top: 10px;
    border-radius: 999px;
    --avatar-color: #28aaa0;
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(135deg, var(--avatar-color), rgba(255,255,255,.95), #9ee5dd, var(--avatar-color)) border-box;
    background-size: 220% 220%;
    color: var(--avatar-color);
    border: 3px solid transparent;
    box-shadow: 0 10px 22px rgba(29, 39, 77, .12), 0 0 18px color-mix(in srgb, var(--avatar-color) 38%, transparent);
    animation: avatarBorderGlow 7s ease-in-out infinite;
    font-weight: 900;
    font-size: 1.25rem;
}
.avatar-icon-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    display: block;
}
.avatar-icon-preview.has-image {
    overflow: hidden;
    padding: 3px;
}
.avatar-icon-preview.has-image img {
    width: 100%;
    height: 100%;
    border-radius: 999px;
}
.avatar-choice-row {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(300px, 1fr) 144px 112px;
    gap: 12px;
    align-items: stretch;
    padding: 12px;
    border: 1px solid rgba(185, 222, 219, .80);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.97), rgba(247,252,251,.97)),
        radial-gradient(circle at 92% 18%, rgba(40, 170, 160, .10), transparent 26%);
    box-shadow: 0 10px 24px rgba(29, 39, 77, .05);
}
.avatar-choice-row label {
    margin: 0;
}
.avatar-select-field {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 7px;
}
.avatar-preview-field {
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 6px;
    min-width: 96px;
    padding: 0 2px;
}
.avatar-preview-field > span:first-child {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 850;
}
.avatar-preview-field .avatar-icon-preview {
    width: 82px !important;
    height: 82px !important;
    margin-top: 0;
}
.avatar-preview-shell {
    position: relative;
    display: inline-grid;
    place-items: center;
}
.avatar-preview-clear {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 28px;
    height: 28px;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(226, 230, 220, .96);
    border-radius: 999px;
    background: #fff;
    color: var(--navy);
    box-shadow: 0 8px 18px rgba(29, 39, 77, .16);
    cursor: pointer;
    font-size: 1.15rem;
    font-weight: 900;
    line-height: 1;
}
.avatar-preview-clear:hover,
.avatar-preview-clear:focus-visible {
    border-color: rgba(226, 108, 93, .42);
    color: var(--coral);
    outline: none;
}
.avatar-preview-clear[hidden] {
    display: none;
}
.avatar-color-field {
    display: grid;
    align-content: start;
    justify-items: start;
    gap: 7px;
    min-width: 0;
}
.avatar-color-field input[type="color"] {
    width: 58px;
    height: 40px;
    padding: 4px;
    border-radius: 8px;
    cursor: pointer;
}
.avatar-color-field small,
.avatar-select-field small {
    max-width: 100%;
}
@keyframes avatarBorderGlow {
    0%, 100% { background-position: 0% 50%; box-shadow: 0 8px 18px rgba(29, 39, 77, .12), 0 0 12px color-mix(in srgb, var(--avatar-color) 30%, transparent); }
    50% { background-position: 100% 50%; box-shadow: 0 10px 22px rgba(29, 39, 77, .14), 0 0 24px color-mix(in srgb, var(--avatar-color) 46%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
    .child-avatar,
    .avatar-icon-preview {
        animation: none;
    }
}
.pill { display: inline-flex; border-radius: 999px; padding: 5px 9px; background: #edf5f2; color: var(--green); font-size: .82rem; font-weight: 800; }
.pill.warn { background: #fff3d8; color: #8a6310; }

.admin-preview-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.admin-preview-actions form {
    margin: 0;
}
.admin-preview-actions.wide {
    margin-top: 14px;
}
.admin-interface-preview-panel {
    margin-bottom: 22px;
    background: linear-gradient(145deg, #ffffff, #f7fcfb);
}
.admin-preview-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    padding: 14px 16px;
    border: 1px solid rgba(33, 105, 168, .22);
    border-radius: 8px;
    background: #eef8ff;
    color: var(--navy);
    box-shadow: 0 12px 28px rgba(29, 39, 77, .08);
}
.admin-preview-banner strong,
.admin-preview-banner span {
    display: block;
}
.admin-preview-banner span {
    color: var(--muted);
    font-weight: 750;
}
.admin-preview-banner form {
    margin: 0;
}

.library-resource-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 24px;
}
.library-premium-hub {
    display: grid;
    gap: 12px;
    margin-bottom: 18px;
}
.library-hub-card {
    border: 1px solid rgba(226, 230, 220, .95);
    border-radius: 8px;
    background: linear-gradient(135deg, #ffffff, #fbfcf8);
    box-shadow: 0 12px 28px rgba(29, 39, 77, .06);
    overflow: hidden;
}
.library-hub-card summary {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    padding: 18px 20px;
    cursor: pointer;
    list-style: none;
}
.library-hub-card summary::after {
    content: "";
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--green);
    border-bottom: 2px solid var(--green);
    transform: rotate(45deg);
    transition: transform .18s ease, margin-top .18s ease;
}
.library-hub-card[open] summary::after {
    margin-top: 6px;
    transform: rotate(225deg);
}
.library-hub-card summary::-webkit-details-marker {
    display: none;
}
.library-hub-card summary > span {
    display: grid;
    gap: 4px;
}
.library-hub-card summary strong {
    color: var(--navy);
    font-size: 1.08rem;
}
.library-hub-card summary small,
.library-hub-body,
.library-mini-list span {
    color: var(--muted);
}
.library-hub-card summary em {
    flex: 0 0 auto;
    padding: 7px 10px;
    border-radius: 999px;
    background: #edf8f6;
    color: var(--green);
    font-size: .82rem;
    font-style: normal;
    font-weight: 900;
}
.library-search-panel {
    border-color: rgba(40, 170, 160, .24);
    background:
        radial-gradient(circle at 92% 12%, rgba(40, 170, 160, .16), transparent 28%),
        linear-gradient(135deg, #ffffff 0%, #f7fcfb 48%, #eef9f7 100%);
}
.library-search-panel summary {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .94), rgba(237, 248, 246, .72)),
        radial-gradient(circle at 0% 0%, rgba(247, 183, 122, .12), transparent 30%);
}
.library-search-panel[open] summary {
    border-bottom: 1px solid rgba(40, 170, 160, .16);
}
.library-search-head {
    gap: 18px;
}
.library-hub-body {
    display: grid;
    gap: 12px;
    padding: 0 20px 18px;
    font-weight: 700;
}
.library-private-list {
    display: grid;
    gap: 10px;
}
.library-private-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 13px 14px;
    border: 1px solid rgba(40, 170, 160, .16);
    border-radius: 8px;
    background:
        linear-gradient(135deg, #ffffff, #fbfffd),
        radial-gradient(circle at 100% 0%, rgba(40, 170, 160, .10), transparent 30%);
}
.library-private-item div {
    display: grid;
    gap: 3px;
    min-width: 0;
}
.library-private-item span {
    color: var(--green);
    font-size: .78rem;
    font-weight: 950;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.library-private-item strong {
    color: var(--navy);
    font-size: 1rem;
    line-height: 1.25;
}
.library-private-item small {
    color: var(--muted);
    font-weight: 760;
}
.library-mini-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.library-mini-list article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 10px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}
.library-mini-list strong,
.library-mini-list span {
    min-width: 0;
}
.library-mini-list span {
    grid-column: 1;
    font-size: .9rem;
}
.library-mini-list .button {
    grid-column: 2;
    grid-row: 1 / span 2;
}
.library-per-child-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.library-command-center {
    margin-bottom: 18px;
    background: linear-gradient(145deg, #ffffff, #f7fcfb);
}
.library-entry-note {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    margin-bottom: 24px;
    border-color: rgba(40, 170, 160, .18);
    background:
        radial-gradient(circle at 94% 20%, rgba(40, 170, 160, .10), transparent 28%),
        linear-gradient(135deg, #ffffff, #fbfcf8);
}
.library-entry-note h2,
.library-entry-note p {
    margin: 0;
}
.library-entry-note .button-row {
    justify-content: flex-end;
}
.library-kpis {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.library-kpis span {
    display: grid;
    gap: 2px;
    min-width: 92px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--muted);
    font-size: .8rem;
    font-weight: 850;
}
.library-kpis strong {
    color: var(--green);
    font-size: 1.28rem;
    line-height: 1;
}
.library-filter-form {
    display: grid;
    grid-template-columns: minmax(240px, 1.4fr) repeat(3, minmax(140px, 1fr));
    gap: 12px;
    align-items: end;
}
.library-filter-form label {
    margin: 0;
    color: var(--muted);
    font-weight: 900;
}
.library-filter-form input,
.library-filter-form select {
    width: 100%;
    min-height: 42px;
    margin-top: 5px;
}
.library-filter-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}
.library-collection-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
.library-collection-card {
    display: grid;
    gap: 6px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(44,59,55,.05);
}
.library-collection-card.is-active,
.library-collection-card:hover {
    border-color: rgba(40, 170, 160, .35);
    background: #f7fcfb;
}
.library-collection-card strong {
    color: var(--navy);
}
.library-collection-card span,
.library-collection-card small {
    color: var(--muted);
    font-weight: 750;
}
.library-resource-card {
    display: grid;
    gap: 14px;
    align-content: start;
    overflow: hidden;
    background:
        linear-gradient(145deg, #ffffff 0%, #ffffff 58%, #fbfcf8 100%);
}
.library-resource-card h2 {
    margin: 0;
    color: var(--navy);
    font-size: clamp(1.2rem, 1.1rem + .35vw, 1.55rem);
    line-height: 1.18;
}
.library-resource-top {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-start;
}
.library-resource-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}
.library-resource-status {
    flex: 0 0 auto;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(29, 39, 77, .06);
    color: var(--muted);
    font-size: .78rem;
    font-weight: 900;
}
.library-resource-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    color: var(--muted);
    font-weight: 780;
}
.library-resource-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.library-resource-facts span {
    padding: 5px 8px;
    border-radius: 999px;
    background: #f4f0e8;
    color: var(--muted);
    font-size: .76rem;
    font-weight: 900;
}
.library-used-line {
    margin: 0;
    color: var(--green);
    font-size: .9rem;
    font-weight: 850;
}
.library-resource-body {
    display: grid;
    gap: 12px;
    min-width: 0;
}
.library-resource-body > p {
    margin: 0;
    color: var(--navy);
    overflow-wrap: anywhere;
}
.library-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.library-card-actions form {
    margin: 0;
}
.library-usage-details {
    max-width: 100%;
}
.library-usage-details ol {
    margin: 10px 0 0;
    padding: 0 12px 12px 32px;
}
.library-usage-details li {
    color: var(--navy);
    overflow-wrap: anywhere;
}
.library-usage-details li + li {
    margin-top: 6px;
}
.library-search-results-compact {
    display: grid;
    gap: 14px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(29, 39, 77, .10);
}
.library-compact-list {
    display: grid;
    gap: 10px;
}
.library-compact-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid rgba(29, 39, 77, .10);
    border-radius: 8px;
    background: rgba(255, 255, 255, .82);
}
.library-compact-item div {
    display: grid;
    gap: 4px;
    min-width: 0;
}
.library-compact-item span,
.library-compact-item small {
    color: var(--muted);
    font-weight: 800;
}
.library-compact-item strong {
    color: var(--navy);
    font-size: 1.02rem;
    overflow-wrap: anywhere;
}
.library-modal-source {
    display: block;
    height: 0;
    margin: 0;
    overflow: visible;
}
.library-modal-source .library-resource-card {
    display: contents;
}
.library-modal-source .library-resource-card > :not(.library-detail-panel) {
    display: none !important;
}
.school-year-head {
    align-items: end;
}
.school-year-command {
    display: grid;
    grid-template-columns: minmax(260px, .85fr) minmax(0, 1.15fr);
    gap: 22px;
    align-items: center;
    background:
        linear-gradient(135deg, rgba(255,255,255,.98), rgba(247,252,251,.94)),
        radial-gradient(circle at 100% 0%, rgba(40,170,160,.14), transparent 32%);
}
.school-year-status-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}
.school-year-status-tile {
    display: grid;
    gap: 6px;
    min-height: 104px;
    padding: 14px;
    border: 1px solid rgba(29, 39, 77, .10);
    border-radius: 8px;
    background: #fff;
    color: var(--navy);
    text-decoration: none;
    box-shadow: 0 14px 34px rgba(29, 39, 77, .05);
}
.school-year-status-tile span {
    color: var(--muted);
    font-weight: 900;
}
.school-year-status-tile strong {
    align-self: end;
    font-size: 2rem;
    line-height: 1;
}
.school-year-status-tile.is-active {
    border-color: rgba(40, 170, 160, .45);
    box-shadow: 0 18px 40px rgba(40, 170, 160, .14);
}
.status-non-commence { background: linear-gradient(135deg, #ffffff, #f5f7fb); }
.status-deja-aborde { background: linear-gradient(135deg, #ffffff, #eef8f6); }
.status-entrainement { background: linear-gradient(135deg, #ffffff, #fff8ea); }
.status-a-consolider { background: linear-gradient(135deg, #ffffff, #f0f7ff); }
.status-acquis { background: linear-gradient(135deg, #ffffff, #effaf1); }
.school-year-top-grid,
.school-year-report-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr);
    gap: 18px;
    margin-top: 18px;
}
.school-year-priority-list,
.school-year-scope-list,
.school-year-objective-list,
.school-year-mini-list {
    display: grid;
    gap: 10px;
}
.school-year-priority-item,
.school-year-scope-list div,
.school-year-objective {
    border: 1px solid rgba(29, 39, 77, .10);
    border-radius: 8px;
    background: rgba(255, 255, 255, .86);
}
.school-year-priority-item {
    display: grid;
    gap: 8px;
    padding: 14px;
}
.school-year-priority-item span,
.school-year-priority-item small,
.school-year-linked-facts span {
    color: var(--muted);
    font-weight: 800;
}
.school-year-priority-item strong {
    color: var(--navy);
    font-size: 1.05rem;
}
.school-year-scope-list div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
}
.school-year-scope-list span {
    color: var(--muted);
    font-weight: 900;
}
.school-year-scope-list strong {
    color: var(--navy);
    font-size: 1.45rem;
}
.school-year-init-box {
    display: grid;
    gap: 8px;
    margin-top: 16px;
    padding: 14px;
    border: 1px solid rgba(40,170,160,.22);
    border-radius: 8px;
    background: #f7fcfb;
}
.school-year-filters {
    margin-top: 18px;
    align-items: end;
}
.school-year-subjects {
    display: grid;
    gap: 14px;
    margin-top: 18px;
}
.school-year-subject-card {
    padding: 0;
    overflow: hidden;
}
.school-year-subject-card summary {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 18px;
    cursor: pointer;
    list-style: none;
}
.school-year-subject-card summary::-webkit-details-marker {
    display: none;
}
.school-year-subject-card summary span {
    display: grid;
    gap: 4px;
}
.school-year-subject-card summary strong {
    color: var(--navy);
    font-size: 1.2rem;
}
.school-year-subject-card summary small,
.school-year-subject-card summary em {
    color: var(--muted);
    font-style: normal;
    font-weight: 800;
}
.school-year-objective-list {
    padding: 0 18px 18px;
}
.school-year-objective {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, .72fr);
    gap: 16px;
    padding: 16px;
}
.school-year-objective-main {
    display: grid;
    gap: 8px;
    min-width: 0;
}
.school-year-objective-main h3 {
    margin: 0;
    color: var(--navy);
    font-size: 1.05rem;
}
.school-year-objective-main p {
    margin: 0;
    color: var(--muted);
}
.school-year-linked-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.school-year-linked-facts span,
.school-year-mini-list span {
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(29, 39, 77, .05);
}
.school-year-progress-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-content: start;
}
.school-year-progress-form label {
    margin: 0;
    color: var(--muted);
    font-size: .86rem;
    font-weight: 900;
}
.school-year-progress-form .full,
.school-year-progress-form .button-row {
    grid-column: 1 / -1;
}
.school-year-progress-form select,
.school-year-progress-form input,
.school-year-progress-form textarea {
    width: 100%;
    margin-top: 5px;
}
.library-add-week-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 96px;
    gap: 12px;
    align-items: end;
    padding: 14px;
    border: 1px solid rgba(40, 170, 160, .22);
    border-radius: 8px;
    background: #f7fcfb;
    overflow: hidden;
}
.library-add-week-form label {
    min-width: 0;
    margin: 0;
    color: var(--muted);
    font-size: .86rem;
    font-weight: 900;
}
.library-add-week-form select,
.library-add-week-form input {
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    margin-top: 5px;
    font-size: .95rem;
}
.library-add-week-form .button {
    grid-column: 1 / -1;
    min-height: 40px;
    width: 100%;
    justify-content: center;
    white-space: normal;
    line-height: 1.15;
}
.library-feedback-row {
    padding-top: 2px;
}
.library-detail-panel {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    padding: clamp(14px, 3vw, 34px);
    background: rgba(29, 39, 77, .32);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .18s ease, visibility .18s ease;
}
.library-detail-panel.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.library-detail-card {
    width: min(1420px, 100%);
    max-height: min(880px, calc(100vh - 42px));
    overflow: auto;
    display: grid;
    align-content: start;
    gap: 18px;
    padding: clamp(18px, 2.4vw, 30px);
    border: 1px solid rgba(40, 170, 160, .24);
    border-radius: 10px;
    background:
        radial-gradient(circle at 100% 0%, rgba(40, 170, 160, .10), transparent 26%),
        linear-gradient(135deg, #ffffff, #fbfcf8);
    box-shadow: 0 28px 70px rgba(29, 39, 77, .24);
}
.library-detail-card h2,
.library-detail-card h3,
.library-detail-card p {
    margin: 0;
}
.library-detail-card section,
.library-modal-action-card {
    display: grid;
    gap: 8px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcf8;
}
.library-modal-main {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(360px, .75fr);
    gap: clamp(16px, 2vw, 28px);
    align-items: start;
}
.library-modal-reading {
    display: grid;
    gap: 14px;
    min-width: 0;
}
.library-modal-summary {
    border-color: rgba(40, 170, 160, .22);
    background:
        linear-gradient(135deg, #ffffff, #f7fcfb),
        radial-gradient(circle at 100% 0%, rgba(40, 170, 160, .08), transparent 30%);
}
.library-summary-lead {
    color: var(--navy);
    font-size: 1.05rem;
    font-weight: 820;
    line-height: 1.48;
}
.library-more-text {
    display: grid;
    gap: 8px;
    padding-top: 2px;
}
.library-more-text summary {
    width: fit-content;
    cursor: pointer;
    color: var(--green);
    font-weight: 950;
}
.library-more-text p {
    color: var(--muted);
    font-size: .95rem;
    font-weight: 720;
    line-height: 1.55;
}
.library-modal-actions {
    position: sticky;
    top: 0;
    display: grid;
    gap: 14px;
    min-width: 0;
}
.library-modal-action-card {
    background:
        linear-gradient(135deg, #ffffff, #f7fcfb),
        radial-gradient(circle at 100% 0%, rgba(40, 170, 160, .10), transparent 30%);
}
.library-modal-action-card summary {
    cursor: pointer;
    color: var(--navy);
    font-weight: 950;
}
.library-modal-form {
    grid-template-columns: 1fr 1fr;
    margin-top: 4px;
}
.library-modal-form [data-placement-date-label],
.library-modal-form [data-placement-period-fields] {
    grid-column: 1 / -1;
}
.library-placement-period {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(40, 170, 160, .18);
    border-radius: 8px;
    background: rgba(255, 255, 255, .7);
}
.library-placement-period[hidden] {
    display: none;
}
.library-edit-resource-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.library-edit-resource-form .full,
.library-edit-resource-form .button {
    grid-column: 1 / -1;
}
.library-edit-resource-form label {
    margin: 0;
    color: var(--muted);
    font-size: .86rem;
    font-weight: 900;
}
.library-edit-resource-form input,
.library-edit-resource-form select,
.library-edit-resource-form textarea {
    width: 100%;
    margin-top: 5px;
}
.library-panel-close {
    justify-self: end;
    width: 38px;
    height: 38px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: #fff;
    color: var(--navy);
    font-size: 1.5rem;
    cursor: pointer;
}
.library-used-form {
    display: grid;
    grid-template-columns: 1fr 160px;
    gap: 10px;
    padding: 14px;
    border: 1px solid rgba(40, 170, 160, .22);
    border-radius: 8px;
    background: #f7fcfb;
}
.library-used-form .full,
.library-used-form .button {
    grid-column: 1 / -1;
}
.library-add-resource-panel {
    display: grid;
    grid-template-columns: 1fr;
    margin-bottom: 22px;
}
.library-resource-form {
    display: grid;
    gap: 18px;
    background: linear-gradient(145deg, #ffffff, #fbfcf8);
}
.library-form-intro {
    padding: 16px 18px;
    border: 1px solid rgba(40, 170, 160, .22);
    border-radius: 8px;
    background: #f7fcfb;
}
.library-form-intro h2,
.library-form-intro p {
    margin-bottom: 0;
}
.library-form-section {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}
.library-form-section-title,
.library-form-advanced summary {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: start;
}
.library-form-section-title span,
.library-form-advanced summary > span {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #edf8f6;
    color: var(--green);
    font-weight: 950;
}
.library-form-section-title h3,
.library-form-advanced h3 {
    margin: 0;
    color: var(--navy);
}
.library-form-section-title p,
.library-form-advanced summary p {
    margin: 3px 0 0;
    color: var(--muted);
    font-weight: 650;
}
.library-form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.library-form-grid .full,
.library-form-actions {
    grid-column: 1 / -1;
}
.library-form-grid textarea {
    min-height: 92px;
}
.library-form-advanced summary {
    cursor: pointer;
    list-style: none;
}
.library-form-advanced summary::-webkit-details-marker {
    display: none;
}
.library-form-advanced summary em {
    align-self: center;
    padding: 8px 12px;
    border-radius: 999px;
    background: #edf8f6;
    color: var(--green);
    font-size: .82rem;
    font-style: normal;
    font-weight: 900;
}
.library-form-advanced[open] summary em {
    background: var(--green);
    color: #fff;
}
.library-form-actions {
    display: flex;
    justify-content: flex-end;
}

.create-ai-head {
    align-items: center;
}
.create-ai-shell {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: start;
    margin-bottom: 20px;
}
.create-ai-form,
.create-ai-preview,
.create-ai-save {
    background: linear-gradient(145deg, #ffffff, #fbfcf8);
}
.create-ai-flow {
    display: grid;
    gap: 16px;
}
.create-flow-title {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: start;
    padding: 18px;
    border: 1px solid #b9dedb;
    border-radius: 8px;
    background:
        linear-gradient(135deg, #eefafa, #ffffff 74%),
        radial-gradient(circle at 100% 0%, rgba(40, 170, 160, .14), transparent 36%);
}
.create-flow-title h2,
.create-flow-title p {
    margin-bottom: 0;
}
.create-flow-title p {
    max-width: 780px;
    color: var(--muted);
}
.create-flow-title > span {
    flex: 0 0 auto;
    padding: 8px 12px;
    border-radius: 999px;
    background: white;
    color: var(--green);
    font-size: .78rem;
    font-weight: 950;
    text-transform: uppercase;
    box-shadow: 0 10px 24px rgba(29, 39, 77, .08);
}
.create-flow-card {
    display: grid;
    gap: 14px;
    padding: 18px;
    border: 1px solid rgba(226, 230, 220, .96);
    border-radius: 8px;
    background: rgba(255,255,255,.78);
    box-shadow: 0 12px 28px rgba(29, 39, 77, .055);
}
.create-flow-card-head {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}
.create-flow-card-head > span {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: #edf8f6;
    color: var(--green);
    font-weight: 950;
}
.create-flow-card-head h3,
.create-flow-card-head p {
    margin-bottom: 0;
}
.create-flow-card-head p {
    color: var(--muted);
}
.create-flow-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
.create-flow-grid label,
.create-flow-final label {
    display: grid;
    gap: 7px;
    color: var(--ink);
    font-weight: 850;
}
.create-flow-grid select,
.create-flow-grid input,
.create-flow-final textarea {
    width: 100%;
}
.create-period-grid {
    grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) minmax(180px, .8fr) minmax(180px, .8fr);
}
.create-period-grid label[hidden] {
    display: none;
}
.create-scope-choice {
    background:
        linear-gradient(135deg, #ffffff, #f7fbfa),
        radial-gradient(circle at 100% 0%, rgba(40, 170, 160, .08), transparent 34%);
}
.create-scope-duration {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr);
    gap: 12px;
    margin-top: 12px;
}
.create-scope-duration label {
    display: grid;
    gap: 7px;
    color: var(--ink);
    font-weight: 850;
}
.create-scope-duration label[hidden] {
    display: none;
}
.create-scope-duration select {
    width: 100%;
}
.create-agenda-choice {
    border-color: rgba(40, 170, 160, .18);
    background: linear-gradient(135deg, #fbfcf8, #ffffff);
}
.create-agenda-choice[hidden] {
    display: none;
}
.create-scope-choice .muted {
    margin: 10px 0 0;
}
.create-agenda-choice .muted {
    margin: 10px 0 0;
}
.create-flow-final {
    background:
        linear-gradient(180deg, rgba(255,255,255,.95), rgba(251,252,248,.95)),
        radial-gradient(circle at 100% 0%, rgba(114, 80, 166, .08), transparent 34%);
}
.create-flow-submit {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    padding-top: 4px;
}
.create-flow-submit .button {
    min-width: 220px;
    justify-content: center;
}
.create-submit-note {
    display: grid;
    gap: 4px;
    max-width: 620px;
    padding: 13px 15px;
    border: 1px solid rgba(40, 170, 160, .22);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(247, 252, 251, .96)),
        radial-gradient(circle at 0% 0%, rgba(40, 170, 160, .10), transparent 30%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .78);
}
.create-submit-note strong {
    color: var(--green);
    font-size: .78rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.create-submit-note span {
    color: var(--muted);
    font-size: .92rem;
    font-weight: 780;
    line-height: 1.45;
}
.create-submit-note.is-credit {
    border-color: rgba(247, 183, 122, .42);
    background:
        linear-gradient(135deg, #ffffff, #fffaf2),
        radial-gradient(circle at 0% 0%, rgba(247, 183, 122, .16), transparent 32%);
}
.create-submit-note.is-credit strong {
    color: #a96a26;
}
.discovery-composer-note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.discovery-composer-note span {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-weight: 760;
}
.create-completion-card {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    margin-bottom: 18px;
    border-color: rgba(40, 170, 160, .28);
    background:
        linear-gradient(135deg, #ffffff, #f3fbfa),
        radial-gradient(circle at 100% 0%, rgba(40, 170, 160, .12), transparent 34%);
}
.create-completion-card h2,
.create-completion-card p {
    margin-bottom: 0;
}
.create-ai-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(29, 39, 77, .22);
}
.create-ai-modal[hidden] {
    display: none;
}
.create-ai-modal-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 430px);
    gap: 16px;
    width: min(1280px, calc(100vw - 48px));
    max-height: min(86vh, 920px);
    overflow: auto;
    padding: 20px;
    border: 1px solid rgba(185, 222, 219, .95);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 28px 70px rgba(29, 39, 77, .22);
}
.create-ai-modal-card > .library-panel-close {
    position: sticky;
    top: 0;
    grid-column: 1 / -1;
    justify-self: end;
    z-index: 2;
}
body.modal-open {
    overflow: hidden;
}
.create-ai-preview {
    display: grid;
    gap: 14px;
    align-content: start;
}
.create-ai-preview[hidden] {
    display: none;
}
.create-ai-preview h2,
.create-ai-preview h3,
.create-ai-preview p {
    margin: 0;
}
.create-ai-preview section {
    display: grid;
    gap: 6px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .78);
}
.create-ai-preview ol {
    margin: 0;
    padding-left: 20px;
}
.create-ai-preview li small {
    display: block;
    color: var(--muted);
    font-weight: 750;
}
.create-ai-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.create-ai-facts span {
    padding: 5px 8px;
    border-radius: 999px;
    background: #f4f0e8;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 900;
}
.create-ai-save {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    align-content: start;
    align-items: stretch;
    min-width: 0;
    overflow: hidden;
}
.create-ai-save > div,
.create-ai-save .feature-toggle {
    grid-column: auto;
}
.create-ai-save h2 {
    max-width: 360px;
    font-size: clamp(1.45rem, 2vw, 1.9rem);
    line-height: 1.22;
}
.create-ai-save label,
.create-ai-save select,
.create-ai-save .button,
.create-ai-save .feature-toggle {
    width: 100%;
    min-width: 0;
}
.create-ai-save .feature-toggle {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
    background: linear-gradient(135deg, #ffffff, #fbfcf8);
}
.create-ai-save .feature-toggle strong,
.create-ai-save .feature-toggle small {
    overflow-wrap: break-word;
}
.create-ai-save .feature-toggle input {
    width: 20px;
    height: 20px;
}
.create-ai-save .button {
    min-height: 52px;
    justify-content: center;
    white-space: normal;
}
.create-recommendation-card {
    display: grid;
    gap: 7px;
    padding: 16px;
    border: 1px solid rgba(40, 170, 160, .28);
    border-radius: 8px;
    background:
        linear-gradient(135deg, #f4fbfa, #ffffff),
        radial-gradient(circle at 100% 0%, rgba(40, 170, 160, .16), transparent 32%);
}
.create-recommendation-card strong {
    color: var(--green);
    font-size: .86rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.create-recommendation-card p {
    margin: 0;
    color: var(--navy);
    font-size: 1.05rem;
    font-weight: 900;
}
.create-recommendation-card small {
    color: var(--muted);
    font-weight: 760;
    line-height: 1.45;
}
.create-action-stack {
    display: grid;
    gap: 10px;
}
.create-ai-save .create-planning-toggle {
    border-color: rgba(40, 170, 160, .28);
    background:
        linear-gradient(135deg, rgba(40, 170, 160, .08), rgba(255, 255, 255, .96)),
        #ffffff;
}
.create-save-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(40, 170, 160, .18);
    border-radius: 8px;
    background: linear-gradient(145deg, #ffffff, #f7fcfb);
}
.create-day-warning {
    margin: 0;
}
.create-planning-fields[hidden] {
    display: none;
}
.create-planning-fields {
    position: relative;
    align-items: end;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75);
}
.create-planning-note {
    grid-column: 1 / -1;
    margin: -2px 0 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(40, 170, 160, .07);
    color: var(--muted);
    font-size: .88rem;
    font-weight: 760;
    line-height: 1.45;
}
.create-week-mode {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fffdf8;
}
.create-week-mode[hidden],
.create-confirm-replace[hidden],
.create-day-warning[hidden] {
    display: none;
}
.create-week-mode legend {
    padding: 0 6px;
    color: var(--green);
    font-size: .78rem;
    font-weight: 950;
    text-transform: uppercase;
}
.create-week-mode label,
.create-draft-edit label {
    font-weight: 850;
}
.create-confirm-replace {
    padding: 12px;
    border: 1px solid rgba(202, 110, 71, .34);
    border-radius: 8px;
    background: #fff7f1;
}
.create-draft-edit {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .72);
}
.create-draft-edit summary {
    padding: 14px;
    color: var(--navy);
    font-weight: 950;
    cursor: pointer;
}
.create-draft-edit[open] {
    padding: 0 14px 14px;
}
.create-draft-edit[open] summary {
    margin: 0 -14px 12px;
    border-bottom: 1px solid var(--line);
}
.create-draft-edit label {
    display: grid;
    gap: 7px;
    margin-top: 10px;
}
.create-draft-edit textarea,
.create-draft-edit input {
    width: 100%;
}
.public-home-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
    gap: 24px;
    align-items: end;
    min-height: 68vh;
    padding: clamp(42px, 7vw, 86px) 0 28px;
}
.public-home-hero h1 {
    max-width: 980px;
    font-size: clamp(2.4rem, 5vw, 5.4rem);
    line-height: .98;
}
.public-home-hero p {
    max-width: 780px;
    color: var(--muted);
    font-size: 1.16rem;
}
.public-home-hero aside,
.public-trust-band {
    padding: 22px;
    border: 1px solid rgba(40, 170, 160, .24);
    border-radius: 8px;
    background: linear-gradient(145deg, #ffffff, #f6fbfa);
    box-shadow: var(--shadow);
}
.public-home-hero aside strong,
.public-home-hero aside span {
    display: block;
}
.public-home-hero aside strong {
    margin-bottom: 8px;
    color: var(--navy);
    font-size: 1.4rem;
}
.public-value-grid,
.public-fit-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin: 24px 0;
}
.public-fit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.public-value-grid article {
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: white;
}
.public-trust-band {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    margin: 24px 0;
}
.recommended-plan {
    border-color: rgba(40, 170, 160, .55);
    box-shadow: 0 20px 44px rgba(40, 170, 160, .14);
}
.recommended-ribbon {
    display: inline-block;
    width: fit-content;
    margin-bottom: 10px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #edf8f6;
    color: var(--green);
    font-size: .78rem;
    font-weight: 950;
    text-transform: uppercase;
}
.real-day-adapter {
    margin: 14px 0;
    padding: 14px;
    border: 1px solid rgba(40, 170, 160, .26);
    border-radius: 8px;
    background: #f7fcfb;
}
.real-day-adapter summary {
    color: var(--navy);
    font-weight: 950;
    cursor: pointer;
}
.real-day-adapter form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: end;
    margin-top: 12px;
}
.real-day-adapter p {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--muted);
}
.report-insight-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
.report-insight-grid article {
    border: 1px solid rgba(40, 170, 160, .16);
    border-radius: 8px;
    padding: 18px;
    background: rgba(255,255,255,.82);
}
.report-insight-grid ul {
    margin: 12px 0 0;
    padding-left: 20px;
}
.create-guided-fieldset {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 16px;
    border: 1px solid rgba(40, 170, 160, .18);
    border-radius: 8px;
    background: #fbfcf8;
}
.create-guided-fieldset[hidden] {
    display: none;
}
.create-guided-fieldset legend {
    padding: 0 6px;
    color: var(--navy);
    font-weight: 950;
}
.create-guided-fieldset legend small {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 800;
}
.create-choice-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.create-choice-pills label {
    margin: 0;
}
.create-choice-pills input {
    position: absolute;
    opacity: 0;
}
.create-choice-pills span {
    display: inline-flex;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--navy);
    font-weight: 900;
    cursor: pointer;
}
.create-choice-pills input:checked + span {
    border-color: rgba(40, 170, 160, .45);
    background: #edf8f6;
    color: var(--green);
}
.create-per-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.create-per-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    margin: 8px 0 0;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}
.create-per-option small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
}
.empty-state.soft {
    padding: 18px;
    border: 1px dashed var(--line);
    border-radius: 8px;
    background: rgba(255,255,255,.65);
}
.empty-state.soft h3,
.empty-state.soft p {
    margin-bottom: 6px;
}
.progress-summary {
    display: inline-grid;
    gap: 4px;
    min-width: 170px;
    margin: 18px 0;
    padding: 14px 16px;
    border: 1px solid rgba(40, 170, 160, .16);
    border-radius: 8px;
    background: linear-gradient(145deg, #f7fcfb, #ffffff);
}
.progress-summary span {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 950;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.progress-summary strong {
    color: var(--green);
    font-size: 1.75rem;
    line-height: 1;
}
.progress-summary small {
    color: var(--muted);
    font-weight: 750;
}
.quick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.quick-grid div,
.quick-grid a {
    min-height: 70px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px;
    font-weight: 800;
    background: #fbfcf8;
    color: var(--navy);
    text-decoration: none;
}
.quick-grid a {
    display: flex;
    align-items: center;
}
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { color: var(--muted); font-size: .9rem; }
.objective-list { display: grid; gap: 14px; }
.objective-card { display: grid; grid-template-columns: 1.4fr .45fr .42fr .8fr auto; gap: 14px; align-items: start; }
.objective-card > label,
.objective-card > button {
    margin-top: 0;
}
.objective-card > button {
    align-self: end;
}
.per-link-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, .55fr);
    gap: 18px;
    align-items: center;
    margin-bottom: 22px;
}
.per-link-intro h2,
.per-link-intro p { margin-bottom: 0; }
.per-template-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.template-chip {
    border: 1px solid #b9dedb;
    border-radius: 999px;
    padding: 9px 12px;
    background: #f6fbfa;
    color: var(--green);
    font-weight: 900;
    cursor: pointer;
}
.template-chip:hover { background: #edf8f6; }
.per-link-helper {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid #d7e8e3;
    border-radius: 8px;
    background: linear-gradient(135deg, #fbfcf8, #f6fbfa);
}
.per-link-helper-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
}
.per-link-helper-head p {
    margin: 4px 0 0;
    color: var(--muted);
    font-weight: 650;
}
.per-suggestion-list {
    display: grid;
    gap: 8px;
}
.per-suggestion-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(130px, .28fr);
    gap: 10px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: white;
}
.per-suggestion-card input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--green);
}
.per-suggestion-card strong,
.per-suggestion-card small,
.per-suggestion-card em {
    display: block;
}
.per-suggestion-card small {
    color: var(--navy);
    font-weight: 800;
}
.per-suggestion-card em {
    margin-top: 3px;
    color: var(--muted);
    font-style: normal;
    font-size: .86rem;
}
.per-manual-picker {
    border-top: 1px solid var(--line);
    padding-top: 10px;
}
.per-manual-picker summary {
    cursor: pointer;
    color: var(--navy);
    font-weight: 900;
}
.per-manual-search {
    display: block;
    margin-top: 12px;
}
.per-manual-list {
    display: grid;
    gap: 8px;
    max-height: 360px;
    margin-top: 10px;
    overflow: auto;
    padding-right: 4px;
}
.per-manual-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255,255,255,.82);
}
.per-manual-option:hover {
    border-color: rgba(40, 170, 160, .42);
    background: #ffffff;
}
.per-manual-option input {
    margin-top: 4px;
    accent-color: var(--green);
}
.per-manual-option strong,
.per-manual-option small {
    display: block;
}
.per-manual-option small {
    color: var(--muted);
    font-weight: 750;
    line-height: 1.35;
}
.per-action-details {
    margin-top: 12px;
    border: 1px solid rgba(40, 170, 160, .22);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(40, 170, 160, .06), rgba(242, 178, 60, .05));
}
.per-action-details summary {
    cursor: pointer;
    padding: 12px 14px;
    color: var(--green);
    font-weight: 950;
}
.per-action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 0 12px 12px;
}
.per-action-card {
    display: grid;
    gap: 8px;
    align-content: start;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .9);
}
.per-action-card h4,
.per-action-card p {
    margin: 0;
}
.per-action-card h4 {
    font-size: 1rem;
}
.per-action-card p,
.per-action-card small {
    color: var(--muted);
    font-weight: 650;
}
.per-action-card small {
    display: block;
    font-size: .86rem;
}
.program-item { display: grid; grid-template-columns: auto 1fr; align-items: start; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcf8; }
.program-item input[type="checkbox"] { width: 22px; height: 22px; margin-top: 2px; }
.weekly-summary-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}
.weekly-summary-strip article {
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 12px 28px rgba(29, 39, 77, .055);
}
.weekly-summary-strip span {
    display: block;
    color: var(--green);
    font-size: 1.7rem;
    font-weight: 900;
}
.weekly-summary-strip small {
    color: var(--muted);
    font-weight: 800;
}
.weekly-summary-strip .attention {
    border-color: rgba(233, 143, 72, .38);
    background: #fff9ee;
}
.weekly-program-head { align-items: center; }
.add-activity-jump { white-space: nowrap; }
.weekly-ai-period-panel {
    margin-bottom: 18px;
}
.weekly-ai-actions {
    display: grid;
    grid-template-columns: auto auto minmax(360px, 1fr);
    gap: 12px;
    align-items: end;
}
.weekly-ai-period-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(140px, 1fr)) auto;
    gap: 10px;
    align-items: end;
}
.weekly-program-shell { display: grid; gap: 18px; }
.weekly-program-board { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: start; }
.weekly-planning-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}
.weekly-planning-actions .button {
    white-space: nowrap;
}
.weekly-suggestions-panel,
.weekly-custom-panel,
.weekly-parent-items-panel,
.weekly-note-panel,
.weekly-tracking-panel { margin-bottom: 0; }
.weekly-item-list,
.weekly-parent-item-list,
.weekly-tracking-table { display: grid; gap: 10px; }
.weekly-item-card {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 14px;
    border: 1px solid rgba(226, 230, 220, .95);
    border-radius: 8px;
    background: #ffffff;
    cursor: pointer;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.weekly-item-card:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(29, 39, 77, .075); }
.weekly-item-card input[type="checkbox"] { margin-top: 5px; accent-color: var(--green); }
.weekly-item-card em,
.source-chip {
    display: inline-flex;
    width: fit-content;
    margin-bottom: 5px;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: .72rem;
    font-style: normal;
    font-weight: 900;
    line-height: 1;
}
.weekly-item-card strong,
.weekly-track-row strong { display: block; color: var(--navy); }
.weekly-item-card small,
.weekly-track-row small { display: block; margin-top: 4px; color: var(--muted); }
.attachment-line,
.attachment-link {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 6px;
    margin-top: 7px;
    padding: 6px 9px;
    border-radius: 999px;
    background: #f4f0e8;
    color: var(--brown);
    font-weight: 850;
    text-decoration: none;
}
.attachment-link:hover {
    background: #fff3d8;
    color: var(--navy);
}
.weekly-item-card.is-suggested { background: linear-gradient(135deg, #ffffff, #fbfcf8); }
.weekly-item-card.is-suggested em,
.source-suggested { background: #edf5f2; color: var(--green); }
.weekly-item-card.is-parent { border-color: rgba(240, 212, 163, .92); background: linear-gradient(135deg, #fffdf8, #ffffff); }
.weekly-item-card.is-parent em,
.source-parent { background: #fff3d8; color: #8a6310; }
.source-per { background: #eef8ff; color: #2169a8; }
.weekly-checkmark {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #edf5f2;
}
.weekly-checkmark::before {
    content: "";
    width: 12px;
    height: 7px;
    border-left: 3px solid var(--green);
    border-bottom: 3px solid var(--green);
    transform: rotate(-45deg) translate(1px, -1px);
}
.weekly-item-card:has(input[type="checkbox"]:not(:checked)) { opacity: .62; }
.weekly-item-card:has(input[type="checkbox"]:not(:checked)) .weekly-checkmark { background: #f4f4ef; }
.weekly-item-card:has(input[type="checkbox"]:not(:checked)) .weekly-checkmark::before { border-color: transparent; }
.weekly-placement-controls {
    display: grid;
    grid-template-columns: auto minmax(160px, 1fr) auto 92px;
    gap: 8px;
    align-items: center;
    margin-top: 10px;
}
.weekly-placement-controls span {
    color: var(--muted);
    font-size: .82rem;
    font-weight: 900;
    text-transform: uppercase;
}
.weekly-placement-controls select,
.weekly-placement-controls input {
    min-height: 42px;
    padding: 8px 10px;
    font-size: .96rem;
}
.weekly-custom-panel { position: static; width: 100%; }
.weekly-collapsible-card,
.weekly-day-item-details {
    display: block;
}
.weekly-collapsible-card summary,
.weekly-day-item-details summary {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    cursor: pointer;
    list-style: none;
}
.weekly-collapsible-card summary::-webkit-details-marker,
.weekly-day-item-details summary::-webkit-details-marker {
    display: none;
}
.weekly-collapsible-card summary em {
    display: block;
    color: var(--green);
    font-size: .76rem;
    font-style: normal;
    font-weight: 950;
    text-transform: uppercase;
}
.weekly-collapsible-card summary strong,
.weekly-day-item-details summary strong {
    display: block;
    color: var(--navy);
}
.collapse-arrow {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #edf8f6;
    color: var(--green);
    font-weight: 950;
    transition: transform .16s ease;
}
.weekly-collapsible-card[open] .collapse-arrow,
.weekly-day-item-details[open] .collapse-arrow {
    transform: rotate(180deg);
}
.weekly-collapsible-card > p {
    margin: 10px 0 0;
}
.quick-add-card {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid rgba(40, 170, 160, .18);
    border-radius: 8px;
    background: linear-gradient(145deg, #ffffff, #f7fcfb);
    margin-top: 14px;
}
.quick-add-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--navy);
    color: #fff;
    font-size: 1.6rem;
    font-weight: 900;
    line-height: 1;
}
.weekly-custom-destination {
    display: grid;
    gap: 10px;
    margin: 4px 0 0;
    padding: 14px;
    border: 1px solid rgba(40, 170, 160, .16);
    border-radius: 8px;
    background: rgba(255, 255, 255, .72);
}
.weekly-custom-destination legend {
    padding: 0 6px;
    color: var(--green);
    font-size: .78rem;
    font-weight: 950;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.weekly-custom-destination .feature-toggle {
    background: #fff;
}
.weekly-custom-placement {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid rgba(226, 230, 220, .95);
    border-radius: 8px;
    background: #fff;
}
.weekly-custom-period {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.weekly-custom-dates-title {
    grid-column: 1 / -1;
    color: var(--green);
    font-size: .78rem;
    font-weight: 950;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.weekly-custom-period small {
    grid-column: 1 / -1;
}
.weekly-note-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: end; }
.weekly-note-panel > details { grid-column: 1 / -1; }
.weekly-note-panel label { margin: 0; }
.weekly-save-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.weekly-table-tools {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin: 12px 0 14px;
    padding: 12px 14px;
    border: 1px solid rgba(40, 170, 160, .16);
    border-radius: 8px;
    background: linear-gradient(135deg, #ffffff, #f7fcfb);
}
.weekly-table-tools p {
    margin: 0;
    color: var(--muted);
    font-weight: 750;
}
.weekly-track-row {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) 160px minmax(220px, .8fr) auto;
    gap: 12px;
    align-items: center;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}
.weekly-track-row.is-parent { border-color: rgba(240, 212, 163, .92); background: #fffdf8; }
.weekly-calendar-panel,
.weekly-report-panel { margin-top: 18px; }
.weekly-day-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(190px, 1fr));
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 4px;
}
.weekly-day-card {
    min-width: 190px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff, #fbfcf8);
}
.weekly-day-card header {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: flex-start;
    margin-bottom: 12px;
}
.weekly-day-card header strong {
    display: block;
    color: var(--navy);
    font-size: 1rem;
}
.weekly-day-card header small,
.weekly-day-card header span {
    color: var(--muted);
    font-weight: 850;
}
.weekly-day-items {
    display: grid;
    gap: 10px;
}
.weekly-day-item {
    display: block;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    cursor: grab;
}
.weekly-day-item.is-dragging {
    opacity: .58;
    cursor: grabbing;
    box-shadow: 0 16px 34px rgba(29, 39, 77, .16);
}
.weekly-day-card[data-weekly-date] {
    transition: border-color .16s ease, box-shadow .16s ease;
}
.weekly-day-item.done {
    border-color: rgba(40, 170, 160, .35);
    background: #f5fbf9;
}
.weekly-day-item.skipped {
    border-color: rgba(233, 143, 72, .4);
    background: #fffaf0;
}
.weekly-day-item-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 10px;
}
.weekly-day-item-details > .source-chip,
.weekly-day-item-details > small,
.weekly-day-item-details > .weekly-parent-cues,
.weekly-day-item-details > .attachment-link {
    margin-top: 8px;
}
.weekly-day-item-actions select,
.weekly-day-item-actions input {
    min-height: 40px;
    padding: 8px 10px;
    font-size: .92rem;
}
.weekly-status-line {
    color: var(--muted);
    font-weight: 850;
}
.weekly-report-list {
    display: grid;
    gap: 10px;
}
.weekly-report-row {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) 220px auto;
    gap: 12px;
    align-items: end;
    padding: 14px;
    border: 1px solid rgba(233, 143, 72, .3);
    border-radius: 8px;
    background: #fffaf0;
}
.weekly-report-row strong {
    display: block;
    color: var(--navy);
}
.weekly-report-row small {
    color: var(--muted);
    font-weight: 780;
}
.weekly-report-row label { margin: 0; }
.inline-form { display: grid; grid-template-columns: 1fr 150px 1fr auto; gap: 10px; align-items: center; margin-bottom: 10px; }
.check-inline { display: inline-flex; align-items: center; gap: 6px; margin: 4px 12px 4px 0; color: var(--ink); }
.check-inline input { width: auto; }
.project-subject-field {
    gap: 10px;
}
.project-subject-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 14px;
    margin-top: 4px;
}
.project-subject-grid .check-inline {
    margin: 0;
    min-width: 0;
}
.install-warning {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 10px;
    padding: 14px;
    border: 1px solid #e7bbb3;
    border-radius: 8px;
    background: #fff7f4;
}
.install-warning input { width: auto; margin-top: 4px; }
.muted { color: var(--muted); }
.per-oyani-identifier {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: .82rem;
    font-weight: 650;
}

.child-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        radial-gradient(circle at 14% 10%, rgba(33, 105, 168, .10), transparent 28%),
        radial-gradient(circle at 86% 12%, rgba(114, 80, 166, .10), transparent 24%),
        #fbfaf6;
}
.child-login-panel {
    width: min(520px, 100%);
}
.child-container { max-width: 980px; }
.child-hero {
    padding: 26px 0 18px;
}
.child-hero h1 { max-width: 850px; }
.child-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-bottom: 22px; }
.big-tile {
    min-height: 170px; border-radius: 8px; color: white; text-decoration: none; padding: 24px;
    display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; box-shadow: var(--shadow);
}
.big-tile span { font-size: 2rem; font-weight: 900; }
.big-tile small { font-size: 1rem; }
.big-tile.math { background: var(--green); }
.big-tile.french { background: var(--violet); }
.big-tile.progress { background: var(--blue); }
.big-tile.training { background: linear-gradient(135deg, #28aaa0, #2169a8); }
.big-tile.gentle-review { background: linear-gradient(135deg, #2bb6a8, #f2b23c); }
.big-tile.soft-session { background: linear-gradient(135deg, #28aaa0, #f2b23c); }
.child-day-shell {
    display: grid;
    gap: 22px;
}
.child-day-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
    gap: 22px;
    align-items: center;
    padding: 22px;
    border: 1px solid rgba(40, 170, 160, .22);
    border-radius: 8px;
    background: linear-gradient(145deg, #ffffff, #f5fbfa);
    box-shadow: 0 18px 44px rgba(29, 39, 77, .08);
}
.child-day-intro {
    max-width: 720px;
    margin: 14px 0 0;
    color: var(--muted);
    font-size: 1.12rem;
    font-weight: 760;
}
.child-age-little .child-day-intro {
    color: var(--navy);
    font-size: 1.35rem;
    font-weight: 900;
}
.child-day-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}
.child-choice-panel {
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .84);
    box-shadow: var(--shadow);
}
.child-day-activities {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
.child-day-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    min-height: 250px;
    padding: 16px;
    border: 1px solid rgba(40, 170, 160, .25);
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff, #fbfcf8);
}
.child-age-little .child-day-card {
    grid-template-columns: 1fr;
}
.child-day-card-number {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--green);
    color: white;
    font-size: 1.35rem;
    font-weight: 950;
}
.child-day-card-body {
    display: grid;
    gap: 10px;
    align-content: start;
}
.child-day-card-body h3 {
    margin: 0;
    color: var(--navy);
    font-size: clamp(1.35rem, 2vw, 1.9rem);
}
.child-age-older .child-day-card-body h3 {
    font-size: 1.35rem;
}
.child-day-card-body p {
    margin: 0;
}
.child-day-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 8px;
}
.child-age-little .child-day-actions {
    grid-template-columns: 1fr;
}
.child-day-actions .button {
    min-height: 48px;
    padding: 10px 12px;
}
.child-day-empty {
    grid-column: 1 / -1;
    padding: 22px;
    border: 1px dashed rgba(40, 170, 160, .35);
    border-radius: 8px;
    background: #f7fcfb;
}
.child-day-empty h2,
.child-day-empty p {
    margin-bottom: 8px;
}
.child-day-shortcuts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.child-day-shortcuts .big-tile {
    min-height: 120px;
}
.child-training-shell {
    display: grid;
    gap: 22px;
}
.child-training-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 390px);
    gap: 22px;
    align-items: center;
    padding: 24px;
    border: 1px solid rgba(40, 170, 160, .22);
    border-radius: 8px;
    background:
        linear-gradient(145deg, #ffffff, #f6fbfa),
        radial-gradient(circle at 100% 0%, rgba(242, 178, 60, .12), transparent 32%);
    box-shadow: 0 18px 44px rgba(29, 39, 77, .08);
}
.child-training-hero h1 {
    margin: 0;
    color: var(--navy);
    font-size: clamp(2.1rem, 5vw, 4rem);
}
.child-training-hero p:not(.eyebrow):not(.child-day-kicker) {
    max-width: 680px;
    color: var(--muted);
    font-size: 1.12rem;
    font-weight: 780;
}
.child-age-little .child-training-hero p:not(.eyebrow):not(.child-day-kicker) {
    color: var(--navy);
    font-size: 1.28rem;
    font-weight: 900;
}
.child-training-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.child-training-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 16px;
    min-height: 230px;
    padding: 20px;
    border: 1px solid rgba(29, 39, 77, .10);
    border-radius: 8px;
    background: #fff;
    color: var(--navy);
    text-decoration: none;
    box-shadow: 0 18px 42px rgba(29, 39, 77, .07);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.child-training-card[href]:hover {
    transform: translateY(-2px);
    border-color: rgba(40, 170, 160, .36);
    box-shadow: 0 22px 50px rgba(29, 39, 77, .10);
}
.child-training-card.is-preview {
    background: linear-gradient(145deg, rgba(255,255,255,.82), rgba(247,252,251,.72));
}
.child-training-icon {
    width: 74px;
    height: 74px;
    display: grid;
    place-items: center;
    border-radius: 24px;
    color: white;
    font-size: 1.55rem;
    font-weight: 950;
    box-shadow: 0 14px 30px rgba(29, 39, 77, .12);
}
.child-training-card.french .child-training-icon { background: linear-gradient(135deg, #7250a6, #c88bd7); }
.child-training-hero.french-focus {
    background:
        radial-gradient(circle at 12% 18%, rgba(114, 80, 166, .13), transparent 28%),
        linear-gradient(145deg, #ffffff, #fbf8ff);
}
.child-training-hero.geography-focus {
    background:
        radial-gradient(circle at 12% 18%, rgba(113, 148, 93, .15), transparent 28%),
        linear-gradient(145deg, #ffffff, #f8fcf6);
}
.child-french-topic-card {
    border-color: rgba(114, 80, 166, .20);
}
.child-french-topic-card > span {
    background: linear-gradient(135deg, #7250a6, #c88bd7);
}
.child-geography-topic-card {
    border-color: rgba(113, 148, 93, .24);
}
.child-geography-topic-card > span {
    background: linear-gradient(135deg, #71945d, #28aaa0);
}
.child-geography-play-panel {
    background: linear-gradient(180deg, #ffffff, #f8fcf6);
}
.child-geography-oyani-link {
    display: block;
    margin-top: 8px;
    color: var(--muted);
    font-weight: 800;
    line-height: 1.45;
}
.child-geography-visual-card {
    display: grid;
    grid-template-columns: minmax(130px, 180px) minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    margin: 4px 0 18px;
    padding: 14px;
    border: 1px solid rgba(113, 148, 93, .22);
    border-radius: 8px;
    background:
        radial-gradient(circle at 20% 20%, rgba(242, 178, 60, .16), transparent 30%),
        linear-gradient(145deg, #ffffff, #f8fcf6);
}
.child-geography-visual-map {
    position: relative;
    overflow: hidden;
    min-height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid rgba(33, 105, 168, .14);
    background:
        linear-gradient(90deg, rgba(33, 105, 168, .08) 1px, transparent 1px),
        linear-gradient(rgba(33, 105, 168, .08) 1px, transparent 1px),
        #fff;
    background-size: 24px 24px;
}
.child-geography-visual-map::before,
.child-geography-visual-map::after {
    content: "";
    position: absolute;
    pointer-events: none;
}
.child-geography-visual-map::before {
    inset: 12px;
    border: 1px dashed rgba(33, 105, 168, .14);
    border-radius: 999px;
}
.child-geography-visual-map::after {
    width: 52px;
    height: 52px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(40, 170, 160, .16), transparent 68%);
}
.child-geography-visual-map span {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    min-height: 42px;
    padding: 8px 10px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(40, 170, 160, .22);
    color: var(--navy);
    font-weight: 950;
    box-shadow: 0 12px 24px rgba(29, 39, 77, .08);
}
.child-geography-visual-card.country_capital .child-geography-visual-map {
    background:
        radial-gradient(circle at 22% 45%, rgba(113, 148, 93, .18) 0 16%, transparent 17%),
        radial-gradient(circle at 70% 35%, rgba(242, 178, 60, .18) 0 13%, transparent 14%),
        linear-gradient(90deg, rgba(33, 105, 168, .08) 1px, transparent 1px),
        linear-gradient(rgba(33, 105, 168, .08) 1px, transparent 1px),
        #fff;
    background-size: auto, auto, 24px 24px, 24px 24px;
}
.child-geography-visual-card.swiss_badge .child-geography-visual-map span:first-child {
    min-width: 58px;
    border-radius: 8px;
    border-color: rgba(217, 71, 64, .22);
    background: linear-gradient(145deg, #fff, #fff7f6);
}
.child-geography-visual-card.world_map .child-geography-visual-map {
    background:
        radial-gradient(ellipse at 24% 52%, rgba(113, 148, 93, .22) 0 19%, transparent 20%),
        radial-gradient(ellipse at 64% 48%, rgba(113, 148, 93, .18) 0 24%, transparent 25%),
        linear-gradient(145deg, rgba(33, 105, 168, .08), rgba(255,255,255,.92));
}
.child-geography-visual-card.map_tools .child-geography-visual-map {
    display: grid;
    grid-template-columns: repeat(3, 42px);
    grid-template-rows: repeat(3, 42px);
}
.child-geography-visual-card.map_tools .child-geography-visual-map span:nth-child(1) { grid-column: 2; grid-row: 1; }
.child-geography-visual-card.map_tools .child-geography-visual-map span:nth-child(2) { grid-column: 3; grid-row: 2; }
.child-geography-visual-card.map_tools .child-geography-visual-map span:nth-child(3) { grid-column: 2; grid-row: 3; }
.child-geography-visual-card.map_tools .child-geography-visual-map span:nth-child(4) { grid-column: 1; grid-row: 2; }
.child-geography-visual-card.region_card .child-geography-visual-map span:nth-child(2) {
    border-color: rgba(242, 178, 60, .32);
    background: linear-gradient(145deg, #fffdf6, #ffffff);
}
.child-geography-visual-card strong,
.child-geography-visual-card p,
.child-geography-visual-card small {
    margin: 0;
}
.child-geography-visual-card strong {
    display: block;
    color: var(--green);
    margin-bottom: 5px;
}
.child-geography-visual-card small {
    display: block;
    margin-top: 8px;
    color: var(--muted);
    font-weight: 800;
}
.geography-per-oyani-panel {
    border-color: rgba(33, 105, 168, .12);
    background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,252,246,.9));
}
.geography-history-insights {
    border-color: rgba(113, 148, 93, .18);
    background: linear-gradient(135deg, #ffffff, #f8fcf6);
}
.geography-planning-strip {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
    margin: 14px 0 18px;
}
.geography-planning-strip article {
    display: grid;
    gap: 4px;
    padding: 12px;
    border: 1px solid rgba(29, 39, 77, .10);
    border-radius: 8px;
    background: #fff;
}
.geography-planning-strip article.recommended {
    border-color: rgba(40, 170, 160, .34);
    background: linear-gradient(145deg, rgba(40, 170, 160, .10), #fff);
    box-shadow: 0 12px 28px rgba(40, 170, 160, .10);
}
.geography-planning-strip span,
.geography-planning-strip small {
    color: var(--muted);
    font-weight: 850;
}
.geography-planning-strip strong {
    color: var(--navy);
}
.geography-day-picker-form {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) auto;
    gap: 8px;
    align-items: end;
    width: 100%;
}
.geography-day-picker-form label {
    display: grid;
    gap: 5px;
    margin: 0;
}
.geography-day-picker-form label span {
    color: var(--muted);
    font-size: .86rem;
    font-weight: 900;
}
.geography-admin-guide,
.geography-admin-toolbar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 16px 0;
}
.geography-admin-guide article,
.geography-admin-toolbar label {
    padding: 14px;
    border: 1px solid rgba(29, 39, 77, .10);
    border-radius: 8px;
    background: linear-gradient(145deg, #fff, #f8fcf6);
}
.geography-admin-guide strong,
.geography-admin-guide p,
.geography-admin-toolbar label {
    margin: 0;
}
.geography-admin-guide p {
    color: var(--muted);
    font-weight: 750;
}
.geography-admin-content-card {
    gap: 10px;
}
.geography-admin-variants,
.geography-admin-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.geography-admin-variants em {
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(40, 170, 160, .10);
    color: var(--green);
    font-style: normal;
    font-weight: 850;
}
.geography-admin-preview {
    padding: 10px 12px;
    border: 1px solid rgba(29, 39, 77, .08);
    border-radius: 8px;
    background: #fff;
}
.geography-admin-preview summary {
    cursor: pointer;
    color: var(--navy);
    font-weight: 950;
}
.geography-admin-preview p {
    margin: 8px 0 0;
}
.geography-parent-overview {
    border-color: rgba(113, 148, 93, .22);
    background:
        radial-gradient(circle at 10% 12%, rgba(113, 148, 93, .14), transparent 28%),
        linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(248, 252, 246, .94));
}
.child-french-topic-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}
.child-french-topic-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid rgba(114, 80, 166, .18);
    background: #fff;
    color: var(--navy);
    text-decoration: none;
    font-weight: 950;
    box-shadow: 0 12px 24px rgba(29, 39, 77, .07);
}
.child-french-topic-actions a:first-child {
    border-color: transparent;
    background: linear-gradient(135deg, #1d274d, #7250a6);
    color: #fff;
}
.child-french-play-panel {
    background: linear-gradient(180deg, #ffffff, #fbf8ff);
}
.child-french-source {
    margin: 14px 0;
    padding: 16px 18px;
    border-left: 4px solid rgba(114, 80, 166, .45);
    border-radius: 8px;
    background: rgba(114, 80, 166, .07);
    color: var(--navy);
    font-weight: 850;
}
.child-french-series-reflection {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}
.child-french-series-reflection article {
    padding: 15px;
    border: 1px solid rgba(114, 80, 166, .14);
    border-radius: 8px;
    background: rgba(255, 255, 255, .78);
}
.child-french-series-reflection strong,
.child-french-series-reflection p {
    display: block;
    margin: 0;
}
.child-french-series-reflection strong {
    margin-bottom: 6px;
    color: var(--green);
    font-weight: 950;
}
.child-french-series-reflection p {
    color: var(--navy);
    font-weight: 800;
}
.french-parent-snapshot {
    margin-bottom: 22px;
}
.french-parent-overview,
.french-weekly-bridge,
.french-progress-center {
    display: grid;
    gap: 18px;
    margin-bottom: 22px;
    border-color: rgba(114, 80, 166, .18);
    background:
        linear-gradient(145deg, #ffffff, #fbf8ff),
        radial-gradient(circle at 100% 0%, rgba(114, 80, 166, .12), transparent 36%);
}
.french-parent-overview {
    grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr);
    align-items: stretch;
}
.french-parent-overview-main,
.french-parent-overview-columns,
.french-weekly-bridge-grid {
    min-width: 0;
}
.french-parent-overview-main h2,
.french-parent-overview-main p,
.french-weekly-bridge h3,
.french-priority-list p,
.french-planned-list p {
    margin: 0;
}
.french-parent-overview-main {
    display: grid;
    gap: 10px;
    align-content: center;
}
.french-parent-overview-main h2 {
    color: var(--navy);
    font-size: clamp(1.7rem, 3vw, 2.35rem);
}
.french-parent-overview-main > p {
    color: var(--muted);
    font-weight: 760;
}
.french-parent-overview-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.french-parent-overview-columns article,
.french-priority-list article,
.french-planned-list p {
    padding: 14px;
    border: 1px solid rgba(29, 39, 77, .09);
    border-radius: 8px;
    background: rgba(255, 255, 255, .78);
}
.french-parent-overview-columns strong,
.french-priority-list strong,
.french-planned-list strong {
    display: block;
    color: var(--navy);
    font-weight: 950;
}
.french-parent-overview-columns p,
.french-priority-list p,
.french-planned-list span {
    color: var(--muted);
    font-weight: 760;
}
.french-progress-center {
    background:
        radial-gradient(circle at 92% 10%, rgba(40, 170, 160, .12), transparent 28%),
        linear-gradient(145deg, #ffffff, #fbf8ff);
}
.french-progress-grid {
    display: grid;
    grid-template-columns: .75fr .75fr minmax(280px, 1.4fr);
    gap: 12px;
}
.french-progress-grid article,
.french-progress-table article {
    padding: 15px;
    border: 1px solid rgba(29, 39, 77, .09);
    border-radius: 8px;
    background: rgba(255, 255, 255, .82);
}
.french-progress-grid span,
.french-progress-table span {
    display: block;
    color: var(--muted);
    font-weight: 900;
}
.french-progress-grid strong,
.french-progress-table strong {
    display: block;
    color: var(--navy);
    font-weight: 950;
}
.french-progress-grid strong {
    margin-top: 5px;
    font-size: 1.7rem;
}
.french-progress-grid p {
    margin: 6px 0 0;
    color: var(--muted);
    font-weight: 760;
}
.french-progress-table {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.french-progress-table article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
}
.french-progress-quick-form {
    justify-self: end;
}
.french-subskill-panel,
.french-adaptation-approval {
    grid-column: 1 / -1;
    padding: 14px;
    border: 1px solid rgba(114, 80, 166, .12);
    border-radius: 8px;
    background: rgba(255, 255, 255, .72);
}
.french-subskill-panel strong,
.french-adaptation-approval strong {
    display: block;
    color: var(--navy);
    font-weight: 950;
}
.french-subskill-panel > div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
.french-subskill-panel span {
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(114, 80, 166, .08);
    color: var(--navy);
    font-weight: 850;
}
.french-adaptation-approval {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
}
.french-adaptation-approval p {
    margin: 4px 0 0;
    color: var(--muted);
    font-weight: 760;
}
.french-weekly-bridge-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
    gap: 14px;
}
.french-weekly-bridge-grid > div {
    display: grid;
    gap: 10px;
}
.french-priority-list,
.french-planned-list {
    display: grid;
    gap: 10px;
}
.french-priority-list article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
}
.french-priority-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}
.french-priority-actions .button {
    white-space: nowrap;
}
.french-history-insights {
    display: grid;
    gap: 16px;
    margin-bottom: 18px;
    border-color: rgba(114, 80, 166, .16);
    background: linear-gradient(145deg, #ffffff, #fbf8ff);
}
.french-history-insight-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.french-history-insight-grid article,
.french-history-advice,
.french-history-spelling {
    padding: 14px;
    border: 1px solid rgba(29, 39, 77, .09);
    border-radius: 8px;
    background: rgba(255, 255, 255, .78);
}
.french-history-insight-grid span,
.french-history-advice strong,
.french-history-spelling strong {
    display: block;
    color: var(--green);
    font-weight: 950;
}
.french-history-insight-grid strong {
    display: block;
    margin-top: 4px;
    color: var(--navy);
    font-size: 1.4rem;
}
.french-history-insight-grid p,
.french-history-advice p {
    margin: 5px 0 0;
    color: var(--muted);
    font-weight: 760;
}
.french-history-advice .button-row {
    margin-top: 12px;
}
.french-history-spelling > div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
.french-history-spelling span {
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(114, 80, 166, .08);
    color: var(--navy);
    font-weight: 850;
}
.french-parent-snapshot .stat-card {
    display: grid;
    gap: 8px;
    border-color: rgba(114, 80, 166, .18);
    background: linear-gradient(145deg, #ffffff, #fbf8ff);
}
.french-parent-snapshot .stat-card span {
    color: var(--muted);
    font-weight: 900;
}
.french-parent-snapshot .stat-card strong {
    color: var(--navy);
    font-size: 2rem;
    line-height: 1;
}
.french-parent-snapshot .stat-card p {
    margin: 0;
    color: var(--muted);
}
.french-admin-content-panel {
    display: grid;
    gap: 18px;
}
.french-admin-content-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
.french-admin-content-form .full {
    grid-column: 1 / -1;
}
.french-admin-content-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.french-admin-content-list article {
    padding: 14px;
    border: 1px solid rgba(29, 39, 77, .09);
    border-radius: 8px;
    background: rgba(255, 255, 255, .8);
}
.french-admin-content-list span,
.french-admin-content-list small {
    display: block;
    color: var(--muted);
    font-weight: 850;
}
.french-admin-content-list strong {
    display: block;
    margin: 5px 0;
    color: var(--green);
    font-weight: 950;
}
.french-admin-content-list p {
    margin: 0 0 6px;
    color: var(--navy);
    font-weight: 850;
}
.child-training-card.math .child-training-icon { background: linear-gradient(135deg, #28aaa0, #2169a8); }
.child-training-card.geography .child-training-icon { background: linear-gradient(135deg, #2169a8, #f2b23c); }
.child-training-card.german .child-training-icon { background: linear-gradient(135deg, #243b6b, #f2b23c); }
.child-training-card.discoveries .child-training-icon { background: linear-gradient(135deg, #f2b23c, #28aaa0); }
.child-training-card.review .child-training-icon { background: linear-gradient(135deg, #6b7280, #2169a8); }
.child-training-card-body {
    display: grid;
    gap: 8px;
    align-content: start;
    min-width: 0;
}
.child-training-card-body span {
    width: fit-content;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(40, 170, 160, .10);
    color: var(--green);
    font-size: .82rem;
    font-weight: 950;
}
.child-training-card-body h2 {
    margin: 0;
    color: var(--navy);
    font-size: clamp(1.45rem, 2.6vw, 2rem);
}
.child-training-card-body p {
    margin: 0;
    color: var(--muted);
    font-weight: 750;
}
.child-training-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 4px;
}
.child-training-tags small {
    padding: 7px 9px;
    border-radius: 999px;
    background: rgba(29, 39, 77, .05);
    color: var(--navy);
    font-weight: 850;
}
.child-training-card-body strong {
    margin-top: 6px;
    color: var(--green);
    font-weight: 950;
}
.child-age-little .child-training-grid {
    grid-template-columns: 1fr;
}
.child-age-little .child-training-card {
    min-height: 210px;
}
.child-age-little .child-training-icon {
    width: 88px;
    height: 88px;
    border-radius: 28px;
    font-size: 1.8rem;
}
.child-age-little .child-training-card-body h2 {
    font-size: 2rem;
}
.child-math-shell {
    display: grid;
    gap: 22px;
}
.child-training-hero.math-focus {
    background:
        linear-gradient(145deg, #ffffff, #f4fbfb),
        radial-gradient(circle at 100% 0%, rgba(33, 105, 168, .14), transparent 34%);
}
.child-math-topic-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.child-math-topic-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    min-height: 170px;
    padding: 18px;
    border: 1px solid rgba(29, 39, 77, .10);
    border-radius: 8px;
    background: linear-gradient(145deg, #ffffff, #f7fcfb);
    color: var(--navy);
    text-decoration: none;
    box-shadow: 0 18px 42px rgba(29, 39, 77, .07);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.child-math-topic-card:hover {
    transform: translateY(-2px);
    border-color: rgba(40, 170, 160, .36);
    box-shadow: 0 22px 50px rgba(29, 39, 77, .10);
}
.child-math-topic-card > span {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border-radius: 22px;
    background: linear-gradient(135deg, #28aaa0, #2169a8);
    color: white;
    font-size: 1.8rem;
    font-weight: 950;
}
.child-math-topic-card h2,
.child-math-topic-card p {
    margin: 0;
}
.child-math-topic-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}
.child-math-topic-card h2 {
    color: var(--navy);
    font-size: 1.45rem;
    min-width: 0;
}
.child-math-topic-card p {
    margin-top: 5px;
    color: var(--muted);
    font-weight: 760;
}
.child-math-learning-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}
.child-math-learning-row small,
.child-math-learning-row em {
    display: inline-flex;
    width: fit-content;
    padding: 6px 10px;
    border-radius: 999px;
    font-style: normal;
    font-size: .78rem;
    line-height: 1.2;
    font-weight: 900;
}
.child-math-learning-row small {
    background: rgba(33, 105, 168, .08);
    color: var(--navy);
}
.child-math-learning-row em {
    background: rgba(40, 170, 160, .12);
    color: var(--green);
}
.child-math-level-hint {
    display: inline-flex;
    flex: 0 0 auto;
    width: fit-content;
    margin: 2px 0 0 auto;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(40, 170, 160, .10);
    color: var(--green);
    font-weight: 900;
}
.child-math-level-hint.is-challenge {
    background: rgba(242, 178, 60, .18);
    color: #8b5a0a;
}
.child-math-topic-card strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: fit-content;
    min-height: 42px;
    margin-top: 14px;
    padding: 10px 16px;
    border-radius: 999px;
    background: linear-gradient(135deg, #1d274d, #2169a8);
    color: #fff;
    font-weight: 950;
    box-shadow: 0 12px 24px rgba(33, 105, 168, .18);
    transition: transform .18s ease, box-shadow .18s ease;
}
.child-math-topic-card strong::after {
    content: "→";
    font-size: 1.05rem;
    line-height: 1;
}
.child-math-topic-card:hover strong {
    transform: translateX(2px);
    box-shadow: 0 15px 30px rgba(33, 105, 168, .24);
}
.child-math-play-panel {
    align-content: start;
    gap: 14px;
    width: min(980px, 100%);
    min-height: auto;
    padding: clamp(20px, 3vw, 36px);
    position: relative;
    scroll-margin-top: 104px;
}
.child-math-play-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
}
.child-question-report-form {
    margin: 0;
}
.child-question-report-row {
    grid-column: 1 / -1;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    padding-top: 0;
    margin-top: -6px;
}
.child-question-report-button {
    appearance: none;
    display: grid;
    justify-items: center;
    align-items: center;
    gap: 4px;
    min-width: 54px;
    border: 1px solid rgba(255, 255, 255, .92);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(250, 252, 251, .88));
    color: var(--navy);
    cursor: pointer;
    font: inherit;
    font-size: .68rem;
    font-weight: 950;
    line-height: 1;
    padding: 7px 8px 8px;
    box-shadow:
        0 12px 22px rgba(29, 39, 77, .10),
        inset 0 1px 0 rgba(255, 255, 255, .90);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.child-question-report-mark {
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background:
        radial-gradient(circle at 34% 23%, rgba(255, 255, 255, .72) 0 13%, rgba(255, 255, 255, 0) 28%),
        radial-gradient(circle at 64% 72%, #df001b 0 18%, rgba(223, 0, 27, 0) 42%),
        linear-gradient(145deg, #ff2836 0%, #fb001f 45%, #cf001b 100%);
    color: #fff;
    box-shadow:
        inset 0 2px 5px rgba(255, 255, 255, .42),
        inset 0 -6px 10px rgba(139, 0, 20, .18),
        0 8px 16px rgba(207, 0, 27, .18);
}
.child-question-report-bang {
    display: block;
    color: #fff;
    font-size: 1.18rem;
    font-weight: 950;
    line-height: .95;
    text-shadow: 0 2px 4px rgba(91, 0, 12, .18);
}
.child-question-report-label {
    display: block;
    color: var(--navy);
    font-size: .68rem;
    font-weight: 950;
    letter-spacing: .02em;
}
.child-question-report-button:hover,
.child-question-report-button:focus-visible {
    border-color: rgba(40, 170, 160, .34);
    background: linear-gradient(145deg, #fff, #f8fdfc);
    box-shadow:
        0 22px 42px rgba(29, 39, 77, .16),
        0 0 0 6px rgba(40, 170, 160, .08),
        inset 0 1px 0 rgba(255, 255, 255, .95);
    transform: translateY(-2px);
    outline: none;
}
.child-math-play-head h1 {
    margin: 0;
    color: var(--navy);
    font-size: clamp(1.55rem, 3vw, 2.55rem);
    line-height: 1.12;
    max-width: 850px;
}
.child-math-series-kicker {
    width: fit-content;
    margin: 0 0 10px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(40, 170, 160, .10);
    color: var(--green);
    font-weight: 950;
}
.child-math-adaptation-pill {
    width: fit-content;
    margin: -4px 0 12px;
    padding: 6px 11px;
    border-radius: 999px;
    background: rgba(242, 178, 60, .16);
    color: #8b5a0a;
    font-weight: 900;
}
.child-math-series-progress {
    width: min(520px, 100%);
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: #edf4f2;
    border: 1px solid rgba(40, 170, 160, .14);
}
.child-math-series-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #28aaa0, #2169a8);
    box-shadow: 0 8px 20px rgba(40, 170, 160, .24);
    transition: width .25s ease;
}
.child-math-series-result {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
    align-items: stretch;
    max-width: 920px;
}
.child-math-series-result > div,
.child-math-series-result article {
    padding: 16px;
    border-radius: 8px;
    border: 1px solid rgba(40, 170, 160, .16);
    background: linear-gradient(145deg, #fff, #f7fcfb);
}
.child-math-series-result > div {
    min-width: 120px;
    display: grid;
    place-items: center;
    text-align: center;
    color: var(--green);
}
.child-math-series-result span {
    font-size: 2.2rem;
    font-weight: 950;
    color: var(--navy);
}
.child-math-series-result h2,
.child-math-series-result p {
    margin: 0;
}
.child-math-series-result h2 {
    margin-bottom: 6px;
    font-size: 1.05rem;
    color: var(--navy);
}
.parent-math-mini-bilan {
    display: grid;
    gap: 8px;
    margin: 14px 0;
    padding: 12px;
    border: 1px solid rgba(40, 170, 160, .14);
    border-radius: 8px;
    background: linear-gradient(145deg, #f7fcfb, #fff);
}
.parent-math-mini-bilan > span {
    color: var(--green);
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .78rem;
}
.parent-math-mini-bilan p {
    margin: 0;
}
.parent-math-mini-bilan strong,
.parent-math-mini-bilan small {
    display: block;
}
.parent-math-mini-bilan small {
    color: var(--muted);
    font-weight: 750;
}
.child-math-visual-hint {
    max-width: 760px;
    padding: 14px 16px;
    border: 1px solid rgba(33, 105, 168, .14);
    border-radius: 8px;
    background: linear-gradient(145deg, #f7fcfb, #fff);
}
.child-math-visual-hint strong,
.child-math-visual-hint p {
    margin: 0;
}
.child-math-visual-hint strong {
    display: block;
    margin-bottom: 5px;
    color: var(--green);
}
.child-math-parent-section {
    display: grid;
    gap: 18px;
}
.child-math-parent-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
.child-math-parent-card {
    display: grid;
    gap: 10px;
    padding: 16px;
    border: 1px solid rgba(29, 39, 77, .10);
    border-radius: 8px;
    background: linear-gradient(145deg, #fff, #f7fcfb);
}
.child-math-parent-card > span {
    width: fit-content;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(40, 170, 160, .10);
    color: var(--green);
    font-weight: 950;
}
.child-math-parent-card h3,
.child-math-parent-card p {
    margin: 0;
}
.math-oyani-link,
.math-per-links {
    padding-top: 10px;
    border-top: 1px solid var(--line);
}
.math-oyani-link small,
.math-per-links small {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-weight: 760;
}
.math-learning-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.math-learning-metrics span {
    width: fit-content;
    padding: 6px 9px;
    border-radius: 999px;
    background: rgba(29, 39, 77, .05);
    color: var(--muted);
    font-size: .82rem;
    font-weight: 850;
}
.math-parent-recommendation {
    padding: 12px;
    border: 1px solid rgba(33, 105, 168, .12);
    border-radius: 8px;
    background: rgba(33, 105, 168, .04);
}
.math-parent-recommendation strong,
.math-parent-recommendation p {
    margin: 0;
}
.math-parent-recommendation strong {
    display: block;
    margin-bottom: 5px;
    color: var(--navy);
}
.french-offline-activities {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid rgba(114, 80, 166, .12);
    border-radius: 8px;
    background: rgba(114, 80, 166, .04);
}
.french-offline-activities > strong,
.french-offline-activities b,
.french-offline-activities small {
    display: block;
}
.french-offline-activities > strong {
    color: var(--navy);
    font-weight: 950;
}
.french-offline-activities p {
    margin: 0;
    padding-top: 8px;
    border-top: 1px solid rgba(29, 39, 77, .08);
}
.french-offline-activities b {
    color: var(--green);
}
.french-offline-activities small {
    margin-top: 3px;
    color: var(--muted);
    font-weight: 760;
}
.child-math-parent-head {
    align-items: flex-start;
}
.math-parent-control-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
    gap: 16px;
    margin-bottom: 18px;
}
.math-parent-settings {
    align-items: end;
}
.math-parent-guide {
    background:
        linear-gradient(145deg, #fff, #f7fcfb),
        radial-gradient(circle at 100% 0%, rgba(40, 170, 160, .12), transparent 34%);
}
.child-math-parent-grid.detailed {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.math-parent-topic-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.math-theme-picker {
    margin: 0;
    padding: 14px;
    border: 1px solid rgba(29, 39, 77, .10);
    border-radius: 8px;
    background: rgba(40, 170, 160, .04);
}
.math-theme-picker legend {
    padding: 0 8px;
    color: var(--navy);
    font-weight: 950;
}
.math-theme-picker p {
    margin: 0 0 10px;
    color: var(--muted);
    font-weight: 760;
}
.math-theme-picker > div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
}
.math-resource-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.math-parent-topic-list article,
.math-attempt-list p,
.math-resource-grid article {
    margin: 0;
    padding: 14px;
    border: 1px solid rgba(29, 39, 77, .09);
    border-radius: 8px;
    background: #fff;
}
.math-parent-topic-list strong,
.math-parent-topic-list span,
.math-parent-topic-list small,
.math-attempt-list strong,
.math-attempt-list span,
.math-attempt-list small,
.math-resource-grid strong,
.math-resource-grid span {
    display: block;
}
.math-parent-topic-list span,
.math-parent-topic-list small,
.math-attempt-list span,
.math-attempt-list small,
.math-resource-grid span {
    color: var(--muted);
    font-weight: 760;
}
.math-history-filters {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: end;
}
.math-history-list {
    display: grid;
    gap: 10px;
}
.math-history-list article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 14px;
    border: 1px solid rgba(29, 39, 77, .09);
    border-radius: 8px;
    background: #fff;
}
.math-history-list article.success {
    border-color: rgba(40, 170, 160, .18);
}
.math-history-list article.review {
    border-color: rgba(242, 178, 60, .28);
}
.math-history-list span,
.math-history-list small {
    color: var(--muted);
    font-weight: 780;
}
.math-attempt-list {
    display: grid;
    gap: 10px;
}
.math-per-links p small {
    display: block;
    color: var(--muted);
}
.child-math-answer-form {
    max-width: 760px;
    gap: 12px;
}
.child-math-play-panel .child-math-answer-form {
    max-width: none;
}
.child-math-play-panel .child-math-answer-form input {
    max-width: 760px;
}
.child-math-play-panel .difficulty-row {
    width: 100%;
}
.child-math-play-panel .child-question-report-inline {
    margin-left: auto !important;
    margin-right: clamp(4px, 1vw, 12px);
}
.exercise-panel {
    min-height: 420px; border-radius: 8px; padding: clamp(24px, 6vw, 56px); display: grid; align-content: center;
    background: white; border: 1px solid var(--line); box-shadow: var(--shadow);
}
.answer-form { display: grid; gap: 18px; max-width: 620px; }
.answer-form input { font-size: clamp(1.35rem, 2.4vw, 1.8rem); min-height: 60px; }
.difficulty-help {
    margin: 0;
    color: var(--muted);
    font-weight: 750;
}
.child-feedback-pill {
    width: fit-content;
    margin: 0 0 6px;
    padding: 9px 13px;
    border-radius: 999px;
    background: #edf8f6;
    color: var(--green);
    font-weight: 900;
}
.difficulty-row .button {
    min-height: 52px;
}
.oyani-speech {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    max-width: 760px;
    margin: 10px 0;
}
.oyani-speech-image {
    width: 92px;
    height: 92px;
    display: grid;
    place-items: center;
    border-radius: 28px;
    background: linear-gradient(145deg, #f3fffd, #fff8ec);
    box-shadow: 0 16px 34px rgba(29, 39, 77, .12);
    overflow: hidden;
}
.oyani-speech-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.oyani-speech-bubble {
    position: relative;
    padding: 14px 18px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 14px 34px rgba(29, 39, 77, .09);
}
.oyani-speech-bubble::before {
    content: "";
    position: absolute;
    left: -9px;
    top: 34px;
    width: 18px;
    height: 18px;
    border-left: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, .92);
    transform: rotate(45deg);
}
.oyani-speech-bubble span {
    display: block;
    margin-bottom: 4px;
    color: var(--teal);
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: .78rem;
}
.oyani-speech-bubble p {
    margin: 0;
    color: var(--ink);
    font-weight: 750;
    line-height: 1.45;
    white-space: normal;
}
.oyani-speech-large {
    max-width: 880px;
}
.oyani-speech-large .oyani-speech-image {
    width: 128px;
    height: 128px;
}
.oyani-speech-compact .oyani-speech-image {
    width: 76px;
    height: 76px;
    border-radius: 22px;
}
.oyani-speech-success .oyani-speech-bubble {
    background: #f4fffb;
}
.oyani-speech-error .oyani-speech-bubble,
.oyani-speech-help .oyani-speech-bubble {
    background: #fffaf0;
}
.oyani-speech-pause .oyani-speech-bubble,
.oyani-speech-progress .oyani-speech-bubble {
    background: #f5fbff;
}
.soft-session-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
}
.soft-session-hero p {
    max-width: 680px;
}
.soft-session-mascot {
    width: 112px;
    height: 112px;
    border-radius: 28px;
    box-shadow: 0 16px 34px rgba(29, 39, 77, .12);
}
.soft-session-start-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(280px, .95fr);
    gap: 18px;
    margin-bottom: 22px;
}
.soft-session-start {
    display: grid;
    gap: 16px;
}
.soft-session-number-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.soft-session-number-row small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-weight: 800;
}
.soft-session-principles {
    display: grid;
    align-content: start;
    gap: 14px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.96), rgba(251,252,248,.94)),
        radial-gradient(circle at 92% 10%, rgba(40, 170, 160, .14), transparent 32%);
}
.soft-session-principles div {
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: white;
}
.soft-session-principles p {
    margin: 4px 0 0;
}
.soft-session-room {
    display: grid;
    grid-template-columns: minmax(250px, .9fr) minmax(260px, 1fr);
    gap: 18px;
    align-items: center;
    padding: clamp(20px, 4vw, 34px);
    border: 1px solid rgba(185, 222, 219, .9);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.94), rgba(242, 248, 247, .96)),
        radial-gradient(circle at 88% 12%, rgba(242, 178, 60, .18), transparent 34%);
    box-shadow: 0 16px 42px rgba(29, 39, 77, .08);
    margin-bottom: 22px;
}
.soft-session-timer {
    display: grid;
    justify-items: center;
    gap: 12px;
    text-align: center;
}
.soft-session-ring {
    width: min(280px, 72vw);
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: conic-gradient(var(--green) var(--session-progress), #edf1ea 0);
    box-shadow: inset 0 0 0 14px white, 0 16px 36px rgba(29, 39, 77, .10);
}
.soft-session-ring span {
    width: calc(100% - 44px);
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: white;
    color: var(--navy);
    font-size: clamp(2.4rem, 8vw, 4rem);
    font-weight: 950;
}
.soft-session-companion {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
}
.soft-session-companion img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 36px;
    box-shadow: 0 16px 34px rgba(29, 39, 77, .12);
}
.soft-session-bubble {
    position: relative;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: white;
    color: var(--navy);
    font-size: 1.15rem;
    font-weight: 850;
    box-shadow: 0 12px 28px rgba(29, 39, 77, .055);
}
.soft-session-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
.soft-session-room.is-pause-time .soft-session-ring,
.soft-session-room.is-breathing .soft-session-ring {
    background: conic-gradient(#f2b23c var(--session-progress), #fff3d8 0);
}
.soft-session-room.is-complete .soft-session-ring {
    background: conic-gradient(var(--green) 100%, #edf1ea 0);
}
.soft-session-finish {
    margin-bottom: 22px;
}
.soft-session-history {
    display: grid;
    gap: 8px;
}
.soft-session-history p {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    padding: 10px 0;
    border-top: 1px solid var(--line);
}
.soft-session-history span {
    color: var(--muted);
    font-weight: 850;
}
.child-progress-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.account-head {
    align-items: center;
}
.account-identity {
    display: flex;
    align-items: center;
    gap: 18px;
}
.account-photo {
    width: 92px;
    height: 92px;
    border-radius: 24px;
    object-fit: cover;
    border: 4px solid white;
    box-shadow: 0 16px 34px rgba(29, 39, 77, .14);
    flex: 0 0 auto;
}
.account-photo-fallback {
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--green), var(--blue));
    color: white;
    font-weight: 950;
    font-size: 1.8rem;
}
.account-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
    align-items: start;
}
.account-main-stack {
    display: grid;
    gap: 18px;
}
.account-profile-card small {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-weight: 750;
}
.account-side {
    display: grid;
    gap: 18px;
}
.account-security-card {
    background:
        linear-gradient(145deg, rgba(255,255,255,.96), rgba(251,252,248,.94)),
        radial-gradient(circle at 92% 10%, rgba(40, 170, 160, .14), transparent 32%);
}
.account-children-card {
    background:
        linear-gradient(145deg, rgba(255,255,255,.98), rgba(249,253,251,.96)),
        radial-gradient(circle at 100% 0%, rgba(40, 170, 160, .12), transparent 28%);
}
.account-child-list {
    display: grid;
    gap: 14px;
}
.account-child-row {
    display: grid;
    grid-template-columns: minmax(260px, .95fr) minmax(190px, .65fr) minmax(360px, 1fr);
    gap: 18px;
    align-items: center;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.94), rgba(249,253,251,.9)),
        radial-gradient(circle at 2% 12%, rgba(40,170,160,.11), transparent 28%);
    box-shadow: 0 14px 34px rgba(29, 39, 77, .06);
}
.account-child-summary {
    display: flex;
    align-items: center;
    gap: 16px;
}
.account-child-summary strong,
.account-child-summary small {
    display: block;
}
.account-child-avatar-wrap .child-avatar {
    width: 74px;
    height: 74px;
    font-size: 1.55rem;
    box-shadow: 0 18px 36px rgba(40,170,160,.18);
}
.account-child-edit-link {
    display: inline-flex;
    margin-top: 8px;
    color: var(--green);
    font-weight: 900;
    text-decoration: none;
}
.account-child-edit-link:hover {
    text-decoration: underline;
}
.account-fixed-login input[readonly] {
    background: #f8faf7;
    color: var(--muted);
    cursor: default;
}
.account-fixed-login small {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-weight: 750;
}
.account-child-password-fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
.account-child-password-compact {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: end;
    padding: 12px;
    border: 1px solid rgba(226, 230, 220, .92);
    border-radius: 8px;
    background: rgba(255,255,255,.72);
}
.child-profile-edit-card {
    max-width: 1180px;
    margin-inline: auto;
    background:
        linear-gradient(145deg, rgba(255,255,255,.98), rgba(249,253,251,.95)),
        radial-gradient(circle at 96% 8%, rgba(40,170,160,.12), transparent 30%);
}
.account-edit-avatar-preview {
    align-self: end;
}
.account-edit-avatar-preview .avatar-icon-preview {
    width: 96px !important;
    height: 96px !important;
}
.guided-tour {
    position: fixed;
    inset: 0;
    z-index: 3000;
    pointer-events: none;
}
.guided-tour-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 24, 54, .22);
    backdrop-filter: blur(2px);
    pointer-events: auto;
}
.guided-tour-card {
    position: absolute;
    z-index: 3004;
    display: grid;
    gap: 12px;
    padding: 20px;
    border: 1px solid rgba(190, 239, 232, .95);
    border-radius: 8px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.98), rgba(250,253,251,.97)),
        radial-gradient(circle at 100% 0%, rgba(40,170,160,.13), transparent 34%);
    box-shadow: 0 24px 70px rgba(15, 24, 54, .2);
    pointer-events: auto;
}
.guided-tour-card h2,
.guided-tour-card p {
    margin: 0;
}
.guided-tour-card p:not(.eyebrow) {
    color: var(--muted);
    font-weight: 760;
    line-height: 1.55;
}
.guided-tour-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}
.parent-help-bubble {
    position: fixed !important;
    right: max(8px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    width: 118px;
    height: 118px;
    z-index: 3200;
    pointer-events: none;
}
.parent-help-bubble-button {
    position: absolute;
    right: 0;
    bottom: 0;
    display: grid;
    place-items: center;
    width: 118px;
    height: 118px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    overflow: visible;
    pointer-events: auto;
    transition: transform .18s ease, box-shadow .18s ease;
}
.parent-help-bubble-button:hover,
.parent-help-bubble-button:focus-visible {
    transform: translateY(-3px) scale(1.02);
    outline: none;
}
.parent-help-bubble-button img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 18px 24px rgba(29, 39, 77, .18));
}
.parent-help-bubble-panel {
    position: absolute;
    right: 0;
    bottom: calc(100% + 10px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: min(430px, calc(100vw - 32px));
    height: min(640px, calc(100vh - 126px));
    max-height: min(640px, calc(100vh - 126px));
    overflow: hidden;
    padding: 0;
    border: 1px solid rgba(40, 170, 160, .28);
    border-radius: 8px;
    background: linear-gradient(145deg, #fff, #fbfcf8);
    box-shadow: 0 24px 60px rgba(29, 39, 77, .24);
    pointer-events: auto;
}
.parent-help-bubble-panel[hidden] {
    display: none;
}
.parent-help-bubble-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: start;
    padding: 16px 16px 14px;
    border-bottom: 1px solid rgba(226, 230, 220, .92);
    background:
        linear-gradient(135deg, #ffffff, #f3fbfa),
        radial-gradient(circle at 100% 0%, rgba(40, 170, 160, .12), transparent 34%);
}
.parent-help-bubble-head h2,
.parent-help-bubble-head p {
    margin: 0;
}
.parent-help-bubble-head h2 {
    font-size: 1.25rem;
}
.parent-help-bubble-head span {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: .82rem;
    font-weight: 760;
    line-height: 1.35;
}
.parent-help-bubble-head button {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--navy);
    font-size: 1.4rem;
    cursor: pointer;
}
.parent-help-search-panel {
    display: grid;
    gap: 16px;
    margin-bottom: 18px;
    border-color: rgba(40, 170, 160, .24);
    background:
        linear-gradient(135deg, #ffffff, #f6fbfa),
        radial-gradient(circle at 100% 0%, rgba(40, 170, 160, .12), transparent 34%);
}
.parent-help-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: end;
    padding: 12px;
    border-top: 1px solid rgba(226, 230, 220, .92);
    background: rgba(255, 255, 255, .96);
}
.parent-help-search textarea {
    width: 100%;
    min-height: 46px;
    max-height: 120px;
    resize: vertical;
    border-radius: 8px;
    background: #fbfcf8;
}
.parent-help-search .button {
    min-height: 46px;
    white-space: nowrap;
}
.parent-help-results {
    display: grid;
    align-content: start;
    gap: 12px;
    min-height: 0;
    overflow: auto;
    padding: 14px;
    background:
        linear-gradient(180deg, rgba(251,252,248,.92), rgba(255,255,255,.94)),
        radial-gradient(circle at 0% 0%, rgba(40, 170, 160, .08), transparent 34%);
}
.parent-help-chat-message {
    max-width: 96%;
}
.parent-help-chat-message-user {
    justify-self: end;
    max-width: 86%;
    padding: 10px 12px;
    border-radius: 8px;
    background: #edf8f6;
    color: var(--navy);
    font-weight: 850;
    line-height: 1.35;
}
.parent-help-feedback {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 10px;
    border: 1px solid rgba(40, 170, 160, .18);
    border-radius: 8px;
    background: #f7fcfb;
}
.parent-help-feedback span {
    flex: 1 1 100%;
    color: var(--muted);
    font-size: .9rem;
    font-weight: 850;
}
.parent-help-status {
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .82);
    color: var(--muted);
    font-weight: 820;
}
.parent-help-status.is-alert {
    border-color: rgba(202, 110, 71, .34);
    background: #fff7f1;
    color: #74492f;
}
.parent-help-result-card {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid rgba(226, 230, 220, .95);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(29, 39, 77, .055);
}
.parent-help-result-card span,
.parent-help-result-card small {
    color: var(--muted);
    font-weight: 760;
}
.parent-help-result-card strong {
    display: block;
    margin-top: 2px;
    color: var(--navy);
    font-size: 1.05rem;
}
.parent-help-result-card p {
    margin: 0;
}
.parent-help-category-grid {
    margin-bottom: 18px;
}
.tour-highlight {
    position: relative;
    z-index: 3001;
    outline: 3px solid rgba(40,170,160,.42);
    outline-offset: 6px;
    box-shadow: 0 0 0 10px rgba(255,255,255,.88), 0 18px 46px rgba(40,170,160,.2);
    border-radius: 8px;
}
.garden { display: flex; gap: 10px; align-items: end; height: 90px; }
.garden span { width: 34px; background: var(--green); border-radius: 18px 18px 4px 4px; }
.garden span:nth-child(1) { height: 42px; } .garden span:nth-child(2) { height: 68px; } .garden span:nth-child(3) { height: 54px; }
.report-body { background: #fbfaf6; }
.report-page { width: min(980px, calc(100% - 32px)); margin: 0 auto; padding: 36px 0; color: var(--ink); }
.report-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 28px;
    align-items: center;
    margin-bottom: 20px;
    padding: 24px 26px;
    border: 1px solid rgba(226, 230, 220, .98);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,253,252,.96) 58%, rgba(255,250,240,.96)),
        radial-gradient(circle at 3% 10%, rgba(40, 170, 160, .13), transparent 28%);
    box-shadow: 0 18px 44px rgba(29, 39, 77, .08);
}
.report-brand-block {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    align-items: center;
    gap: 24px;
}
.report-logo {
    width: 150px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}
.report-brand-block > div:last-child {
    display: grid;
    gap: 6px;
}
.report-header h1 {
    max-width: 620px;
    margin: 0;
    font-size: clamp(2.3rem, 5vw, 4.2rem);
    line-height: .95;
    letter-spacing: 0;
}
.report-actions {
    display: grid;
    gap: 10px;
    justify-items: stretch;
    min-width: 220px;
}
.report-actions .button {
    width: 100%;
    justify-content: center;
    text-align: center;
}
.report-brand-subtitle {
    max-width: 560px;
    margin: 4px 0 0;
    color: var(--muted);
    font-weight: 800;
    font-size: 1.02rem;
    line-height: 1.45;
}
.report-brand-signature {
    margin: 0;
    color: var(--teal);
    font-size: .78rem;
    font-weight: 950;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.report-identity-card,
.report-summary-grid {
    display: grid;
    gap: 12px;
    margin-bottom: 18px;
}
.report-identity-card {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.report-identity-card div,
.report-summary-grid article,
.report-cp-note,
.report-section {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: white;
}
.report-identity-card div,
.report-summary-grid article {
    padding: 14px;
}
.report-identity-card span,
.report-summary-grid span {
    display: block;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.report-identity-card strong,
.report-summary-grid strong {
    display: block;
    margin-top: 4px;
    color: var(--navy);
    font-size: 1.12rem;
}
.report-identity-card small {
    color: var(--muted);
    font-weight: 700;
}
.report-summary-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.report-summary-grid strong {
    font-size: 1.55rem;
}
.report-cp-note,
.report-section {
    margin-bottom: 18px;
    padding: 18px;
}
.report-cp-note {
    background: #f6fbfa;
}
.report-cp-note ul {
    margin-bottom: 0;
    color: var(--muted);
    font-weight: 650;
}
.report-footer {
    margin-top: 24px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: .9rem;
    text-align: center;
}
.report-meta { background: #f5f7f4; border: 1px solid var(--line); padding: 14px; border-radius: 8px; }
.public-hero {
    min-height: 62vh;
    display: grid;
    grid-template-columns: minmax(220px, 360px) 1fr;
    gap: 36px;
    align-items: center;
}
.public-hero img,
.public-logo-frame {
    width: 100%;
    max-width: 360px;
    aspect-ratio: 1;
    border-radius: 8px;
    box-shadow: var(--shadow);
}
.public-logo-frame {
    display: grid;
    place-items: center;
    background: white;
    padding: 28px;
}
.public-logo-frame img {
    width: 100%;
    max-width: 300px;
    aspect-ratio: auto;
    box-shadow: none;
}
.price {
    font-size: 2rem;
    font-weight: 900;
    color: var(--navy);
}
.price span { font-size: 1rem; color: var(--muted); }
.subscription-hero {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 22px;
    align-items: end;
    margin-bottom: 22px;
    padding: 28px;
    border: 1px solid #b9dedb;
    border-radius: 8px;
    background:
        linear-gradient(135deg, #eefafa, #ffffff 72%),
        radial-gradient(circle at 8% 15%, rgba(40, 170, 160, .16), transparent 28%);
    box-shadow: 0 18px 42px rgba(29, 39, 77, .09);
}
.subscription-hero h1 {
    max-width: 820px;
}
.subscription-hero p {
    color: var(--muted);
    max-width: 760px;
}
.subscription-hero-card {
    display: grid;
    gap: 6px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: white;
}
.subscription-hero-card span {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.subscription-hero-card strong {
    font-size: 1.35rem;
}
.plan-choice-focus {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    margin: -4px 0 14px;
    padding: 18px 20px;
    border: 1px solid rgba(40, 170, 160, .22);
    border-radius: 8px;
    background:
        radial-gradient(circle at 94% 18%, rgba(40, 170, 160, .11), transparent 28%),
        linear-gradient(135deg, #ffffff, #f7fcfb);
    box-shadow: 0 14px 32px rgba(29, 39, 77, .07);
}
.plan-choice-focus h2,
.plan-choice-focus p {
    margin: 0;
}
.plan-choice-focus p {
    color: var(--muted);
    max-width: 760px;
}
.plan-choice-guidance {
    margin-bottom: 0;
}
.upgrade-trial-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 22px;
    margin-bottom: 22px;
    padding: 24px;
    border: 1px solid #b9dedb;
    border-radius: 8px;
    background:
        linear-gradient(135deg, #eefafa, #ffffff 72%),
        radial-gradient(circle at 8% 15%, rgba(40, 170, 160, .16), transparent 28%);
    box-shadow: 0 18px 42px rgba(29, 39, 77, .09);
}
.upgrade-trial-hero.compact {
    padding: 18px 20px;
}
.upgrade-trial-hero.trial-deadline-alert {
    border-color: rgba(243, 154, 50, .38);
    background:
        linear-gradient(135deg, #fff8e8, #ffffff 72%),
        radial-gradient(circle at 6% 16%, rgba(243, 154, 50, .15), transparent 28%);
}
.trial-decision-hero {
    align-items: stretch;
}
.upgrade-trial-hero h2,
.upgrade-trial-hero p {
    margin-bottom: 0;
}
.trial-choice-panel {
    display: grid;
    grid-template-columns: repeat(3, minmax(210px, 1fr));
    gap: 12px;
    min-width: min(760px, 100%);
}
.trial-choice-card {
    display: grid;
    gap: 10px;
    align-content: start;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255,255,255,.82);
}
.trial-choice-card.highlighted {
    border-color: #b9dedb;
    background: #f6fbfa;
    box-shadow: 0 12px 28px rgba(40, 170, 160, .10);
}
.trial-choice-card.quiet {
    background: #fbfcf8;
}
.trial-choice-card.trial-rhythm-card {
    border-color: rgba(114, 80, 166, .20);
    background:
        linear-gradient(135deg, rgba(114, 80, 166, .08), rgba(255, 255, 255, .96)),
        #ffffff;
}
.trial-choice-reminder {
    display: grid;
    gap: 4px;
    max-width: 620px;
    margin-top: 16px;
    padding: 14px 16px;
    border: 1px solid rgba(40, 170, 160, .22);
    border-radius: 8px;
    background: rgba(255, 255, 255, .74);
}
.trial-choice-reminder strong {
    color: var(--navy);
}
.trial-choice-reminder span {
    color: var(--muted);
    font-weight: 750;
}
.trial-rhythm-options {
    display: grid;
    gap: 8px;
}
.trial-rhythm-options span {
    padding: 9px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--navy);
    font-weight: 900;
}
.choice-kicker {
    width: fit-content;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(40, 170, 160, .10);
    color: var(--teal);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.trial-choice-card strong {
    color: var(--navy);
    font-size: 1rem;
}
.trial-choice-card label,
.trial-choice-label {
    color: var(--navy);
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.35;
}
.trial-choice-card select {
    margin-top: 8px;
}
.trial-choice-card small {
    color: var(--muted);
    font-weight: 700;
}
.subscription-plan-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 18px;
    padding-top: 38px;
}
.subscription-plan-grid.is-onboarding-choice {
    padding-top: 14px;
}
.subscription-plan-card {
    display: grid;
    gap: 14px;
    align-content: start;
    position: relative;
    overflow: hidden;
}
.subscription-plan-card.free-plan-card {
    grid-column: 1 / -1;
    grid-template-columns: minmax(280px, .72fr) minmax(360px, 1fr) minmax(360px, .62fr);
    grid-template-areas:
        "head features price"
        "head features action";
    gap: 18px 32px;
    align-items: stretch;
    padding: 30px;
    border-color: rgba(40, 170, 160, .20);
    background:
        radial-gradient(circle at 96% 12%, rgba(40, 170, 160, .10), transparent 30%),
        linear-gradient(135deg, #ffffff 0%, #f8fbfa 52%, #fbfbf6 100%);
    box-shadow: 0 18px 42px rgba(29, 39, 77, .07);
}
.subscription-plan-card.paid-plan-card {
    min-height: 100%;
    padding-top: 26px;
}
.subscription-plan-card.current-plan {
    border-color: #b9dedb;
    background: #f7fcfb;
}
.subscription-plan-card.recommended-plan {
    border-color: #f0d4a3;
    box-shadow: 0 20px 46px rgba(29, 39, 77, .13);
}
.recommended-ribbon {
    position: absolute;
    top: -34px;
    left: 50%;
    width: min(360px, calc(100% - 24px));
    transform: translateX(-50%);
    padding: 10px 16px;
    border: 1px solid rgba(240, 212, 163, .95);
    border-radius: 14px 14px 0 0;
    background: #fff3d8;
    color: #8a6310;
    font-size: .82rem;
    font-weight: 900;
    line-height: 1.15;
    text-align: center;
    box-shadow: 0 10px 24px rgba(138, 99, 16, .10);
    z-index: 2;
}
.subscription-plan-card .plan-card-head {
    align-items: flex-start;
    min-height: 138px;
}
.subscription-plan-card.free-plan-card .plan-card-head {
    grid-area: head;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    align-items: start;
    align-content: center;
    padding-right: 4px;
}
.subscription-plan-card.free-plan-card .plan-emotional-line {
    margin-top: 22px;
    max-width: 420px;
}
.subscription-plan-card.free-plan-card .free-plan-chip {
    justify-self: start;
    margin-top: 10px;
}
.free-plan-downgrade-note {
    max-width: 470px;
    margin: 22px 0 0;
    padding: 14px 16px;
    border: 1px solid rgba(40, 170, 160, .16);
    border-radius: 8px;
    background: rgba(255, 255, 255, .78);
    color: var(--muted);
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.45;
}
.subscription-plan-card .price {
    align-self: end;
}
.plan-price-block {
    display: grid;
    gap: 6px;
}
.subscription-plan-card.free-plan-card .plan-price-block {
    grid-area: price;
    align-self: end;
    align-content: center;
    min-width: 0;
    padding: 20px 22px;
    border: 1px solid rgba(40, 170, 160, .16);
    border-radius: 8px;
    background: rgba(255, 255, 255, .86);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}
.subscription-plan-card.free-plan-card .price {
    display: flex;
    align-items: baseline;
    gap: 5px;
    white-space: nowrap;
    font-size: clamp(2.15rem, 3.2vw, 3rem);
    line-height: 1;
}
.subscription-plan-card.free-plan-card .price span {
    white-space: nowrap;
}
.subscription-plan-card .plan-chip {
    flex: 0 0 auto;
    justify-content: center;
    min-width: 108px;
    min-height: 48px;
    padding: 8px 14px;
    text-align: center;
    line-height: 1.15;
}
.plan-description {
    color: var(--muted);
    min-height: 48px;
}
.subscription-feature-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.subscription-plan-card.free-plan-card .subscription-feature-list {
    grid-area: features;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: center;
    column-gap: 22px;
    row-gap: 2px;
    padding: 6px 30px 6px 0;
    border-right: 1px solid rgba(105, 119, 145, .18);
}
.subscription-feature-list li {
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
    font-weight: 700;
}
.subscription-plan-card.free-plan-card .subscription-feature-list li {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 10px 0;
    color: var(--navy);
    font-size: .98rem;
    font-weight: 800;
    line-height: 1.35;
}
.subscription-feature-list li.included {
    color: var(--navy);
}
.subscription-feature-list li.limited {
    color: var(--muted);
}
.subscription-proof-grid,
.subscription-reassurance {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}
.subscription-proof-grid article,
.subscription-reassurance article {
    display: grid;
    gap: 6px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: white;
    box-shadow: 0 10px 26px rgba(29, 39, 77, .06);
}
.subscription-proof-grid span,
.subscription-reassurance p {
    color: var(--muted);
}
.subscription-reassurance {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.upgrade-trial-form {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid #b9dedb;
    border-radius: 8px;
    background: #f6fbfa;
}
.subscription-action-stack {
    display: grid;
    gap: 12px;
    margin-top: auto;
}
.subscription-action-stack .upgrade-trial-form {
    margin-top: 0;
}
.upgrade-trial-form small {
    color: var(--muted);
    font-weight: 600;
}
.downgrade-form {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcf8;
}
.downgrade-form small {
    color: var(--muted);
    font-weight: 600;
}
.reactivation-note {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    margin-bottom: 18px;
    padding: 14px 16px;
    border: 1px solid #b9dedb;
    border-radius: 8px;
    background: #f6fbfa;
}
.reactivation-note span {
    color: var(--muted);
}
.stats-grid { margin-bottom: 22px; }
.stats-grid strong { font-size: 1.8rem; color: var(--navy); }
.stats-head {
    margin-bottom: 16px;
}
.stats-filter-bar {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) repeat(2, minmax(150px, .8fr)) auto auto;
    gap: 12px;
    align-items: end;
    padding: 16px;
    margin-bottom: 20px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: white;
    box-shadow: 0 12px 28px rgba(29, 39, 77, .07);
}
.stats-hero-grid {
    display: grid;
    grid-template-columns: 1.25fr repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}
.stats-hero-card {
    display: grid;
    gap: 8px;
    min-height: 150px;
    align-content: end;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.95)),
        radial-gradient(circle at 12% 0%, rgba(40, 170, 160, .12), transparent 30%);
    box-shadow: 0 16px 36px rgba(29, 39, 77, .08);
}
.stats-hero-card.revenue {
    background:
        linear-gradient(135deg, #eefafa, #ffffff 72%),
        radial-gradient(circle at 8% 15%, rgba(40, 170, 160, .16), transparent 28%);
    border-color: #b9dedb;
}
.stats-hero-card span,
.stats-kpi-grid span {
    color: var(--muted);
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.stats-hero-card strong {
    color: var(--navy);
    font-size: clamp(1.7rem, 3vw, 2.7rem);
    line-height: 1;
}
.stats-hero-card small {
    color: var(--muted);
}
.stats-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
.stats-kpi-grid div {
    display: grid;
    gap: 6px;
    min-height: 88px;
    align-content: center;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcf8;
}
.stats-kpi-grid strong {
    color: var(--navy);
    font-size: 1.45rem;
}
.stats-section-grid {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 18px;
    margin-bottom: 18px;
}
.stats-section-grid.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.stats-panel {
    display: grid;
    gap: 14px;
    align-content: start;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: white;
    box-shadow: 0 12px 30px rgba(29, 39, 77, .07);
}
.stats-panel h2 {
    margin-bottom: 0;
}
.ai-consumption-panel {
    margin-bottom: 18px;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(255, 255, 255, .96)),
        radial-gradient(circle at 5% 0%, rgba(40, 170, 160, .10), transparent 34%);
}
.ai-consumption-panel > summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    cursor: pointer;
    list-style: none;
    padding-bottom: 2px;
}
.ai-consumption-panel > summary::-webkit-details-marker {
    display: none;
}
.ai-consumption-panel > summary span {
    display: grid;
    gap: 4px;
}
.ai-consumption-panel > summary strong {
    color: var(--navy);
    font-size: clamp(1.28rem, 2vw, 1.72rem);
    line-height: 1.12;
}
.ai-consumption-panel > summary em {
    color: var(--muted);
    font-style: normal;
}
.ai-consumption-panel > summary b {
    position: relative;
    flex: 0 0 auto;
    padding: 10px 42px 10px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: white;
    color: var(--navy);
    box-shadow: 0 10px 22px rgba(29, 39, 77, .07);
}
.ai-consumption-panel > summary b::after {
    content: "⌄";
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--green);
    font-size: 1.3rem;
    line-height: 1;
}
.ai-consumption-panel[open] > summary b::after {
    transform: translateY(-50%) rotate(180deg);
}
.ai-consumption-dashboard {
    display: grid;
    gap: 14px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}
.ai-consumption-lead {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, .34fr);
    gap: 18px;
    align-items: end;
    padding: 20px;
    border: 1px solid #b9dedb;
    border-radius: 8px;
    background:
        linear-gradient(135deg, #eefafa, #ffffff 72%),
        radial-gradient(circle at 90% 0%, rgba(40, 170, 160, .16), transparent 34%);
}
.ai-consumption-lead h2 {
    color: var(--navy);
    font-size: clamp(1.9rem, 4vw, 3rem);
    margin-bottom: 6px;
}
.ai-consumption-lead p {
    max-width: 760px;
    margin-bottom: 0;
    color: var(--muted);
}
.ai-consumption-lead.risk-watch {
    border-color: #f1d28c;
    background: linear-gradient(135deg, #fff8e7, #ffffff 72%);
}
.ai-consumption-lead.risk-high {
    border-color: #efb7b7;
    background: linear-gradient(135deg, #fff0f0, #ffffff 72%);
}
.ai-lead-number {
    display: grid;
    gap: 6px;
    padding: 16px;
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 8px;
    background: rgba(255,255,255,.74);
    box-shadow: 0 12px 28px rgba(29, 39, 77, .08);
}
.ai-lead-number span {
    color: var(--muted);
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.ai-lead-number strong {
    color: var(--navy);
    font-size: clamp(1.35rem, 2.8vw, 2.15rem);
    line-height: 1;
}
.ai-consumption-overview {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
.ai-consumption-overview div,
.ai-risk-grid article {
    display: grid;
    gap: 6px;
    min-height: 104px;
    align-content: end;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: white;
    box-shadow: 0 10px 24px rgba(29, 39, 77, .055);
}
.ai-consumption-overview span,
.ai-risk-grid span,
.ai-real-cost-form label span {
    color: var(--muted);
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.ai-consumption-overview strong,
.ai-risk-grid strong {
    color: var(--navy);
    font-size: 1.32rem;
}
.ai-consumption-overview small,
.ai-risk-grid small {
    color: var(--muted);
}
.ai-provider-consumption-grid,
.ai-risk-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.ai-risk-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ai-provider-consumption-card {
    display: grid;
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.95)),
        radial-gradient(circle at 100% 0%, rgba(40, 170, 160, .10), transparent 32%);
    box-shadow: 0 14px 30px rgba(29, 39, 77, .07);
}
.ai-provider-consumption-head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: start;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}
.ai-provider-consumption-head h2 {
    color: var(--navy);
    font-size: clamp(1.5rem, 3vw, 2.15rem);
    line-height: 1;
    margin-bottom: 6px;
}
.ai-provider-chip-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}
.ai-provider-chip-grid span {
    display: grid;
    gap: 4px;
    min-height: 72px;
    align-content: center;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcf8;
}
.ai-provider-chip-grid small {
    color: var(--muted);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.ai-provider-chip-grid strong {
    color: var(--navy);
    font-size: 1rem;
    line-height: 1.12;
}
.metric-list.compact {
    gap: 2px;
}
.ai-mini-bars {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(251, 252, 248, .82);
}
.ai-mini-bars > strong {
    color: var(--navy);
}
.ai-mini-bars p {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    color: var(--muted);
    font-size: .9rem;
}
.ai-mini-bars b {
    color: var(--navy);
}
.ai-mini-bars div {
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: #edf0ea;
}
.ai-mini-bars div span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--green), #76d1c9);
}
.ai-real-cost-form {
    display: grid;
    grid-template-columns: minmax(250px, .65fr) minmax(160px, .28fr) minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 18px;
    border: 1px solid #b9dedb;
    border-radius: 8px;
    background:
        linear-gradient(135deg, #eefafa, #ffffff 74%),
        radial-gradient(circle at 100% 0%, rgba(40, 170, 160, .12), transparent 36%);
    box-shadow: 0 12px 30px rgba(29, 39, 77, .07);
}
.ai-real-cost-form h2,
.ai-real-cost-form p {
    margin-bottom: 0;
}
.ai-real-cost-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.ai-cost-month-field {
    display: grid;
    gap: 7px;
    padding: 12px;
    border: 1px solid #b9dedb;
    border-radius: 8px;
    background: rgba(255,255,255,.82);
}
.ai-real-cost-form label {
    display: grid;
    gap: 7px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255,255,255,.8);
}
.ai-real-cost-form input {
    min-width: 0;
}
.suggestion-head {
    margin-bottom: 18px;
}
.suggestion-family-grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 18px;
    margin-bottom: 20px;
}
.suggestion-intro-card,
.suggestion-form-card {
    display: grid;
    gap: 14px;
    align-content: start;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.95)),
        radial-gradient(circle at 0% 0%, rgba(40, 170, 160, .12), transparent 34%);
    box-shadow: 0 14px 32px rgba(29, 39, 77, .08);
}
.suggestion-intro-card h2,
.suggestion-form-card h2 {
    color: var(--navy);
    margin-bottom: 0;
}
.suggestion-intro-card p {
    color: var(--muted);
    margin-bottom: 0;
}
.suggestion-principles {
    display: grid;
    gap: 8px;
}
.suggestion-principles span {
    padding: 10px 12px;
    border: 1px solid #b9dedb;
    border-radius: 8px;
    background: #eefafa;
    color: var(--navy);
    font-weight: 850;
}
.suggestion-form-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.suggestion-form-card .full,
.suggestion-form-card button {
    grid-column: 1 / -1;
}
.suggestion-form-card label,
.admin-suggestion-response label {
    display: grid;
    gap: 7px;
}
.suggestion-form-card label span,
.admin-suggestion-response label span {
    color: var(--ink);
    font-weight: 850;
}
.suggestion-list,
.admin-suggestion-list {
    display: grid;
    gap: 14px;
}
.suggestion-card,
.admin-suggestion-card {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcf8;
}
.suggestion-card-head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: start;
}
.suggestion-card-head h3 {
    color: var(--navy);
    margin: 8px 0 3px;
}
.suggestion-response-box {
    display: grid;
    gap: 6px;
    padding: 13px;
    border: 1px solid #b9dedb;
    border-radius: 8px;
    background: linear-gradient(135deg, #eefafa, #fff);
}
.suggestion-response-box strong {
    color: var(--navy);
}
.suggestion-response-box p {
    margin-bottom: 0;
}
.suggestion-response-box small {
    color: var(--muted);
}
.suggestion-admin-kpis {
    margin-bottom: 18px;
}
.admin-suggestion-card {
    grid-template-columns: minmax(0, 1fr) minmax(280px, .38fr);
    background: white;
    box-shadow: 0 12px 30px rgba(29, 39, 77, .07);
}
.admin-suggestion-body {
    display: grid;
    gap: 12px;
}
.admin-suggestion-response {
    display: grid;
    gap: 12px;
    align-content: start;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcf8;
}
.status-submitted { background: #fff8e7; color: #8a6310; }
.status-reviewing { background: #edf2fb; color: var(--blue); }
.status-planned { background: #f2eef8; color: var(--violet); }
.status-done { background: #eefafa; color: var(--green); }
.status-closed { background: #f2f2ef; color: var(--muted); }
.metric-list {
    display: grid;
    gap: 10px;
}
.metric-list p {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: baseline;
    margin: 0;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
}
.metric-list p:last-child { border-bottom: 0; }
.metric-list span { color: var(--muted); }
.metric-list strong { color: var(--navy); font-size: 1.05rem; }
.bar-list {
    display: grid;
    gap: 8px;
}
.bar-list p {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    margin: 0;
    font-size: .92rem;
}
.bar-list > div {
    height: 9px;
    border-radius: 999px;
    background: #edf1ea;
    overflow: hidden;
    margin-bottom: 8px;
}
.bar-list > div span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--green), var(--blue));
}
.admin-cockpit {
    display: grid;
    grid-template-columns: minmax(280px, .9fr) 1.6fr;
    gap: 16px;
    margin-bottom: 22px;
}
.cockpit-search,
.global-search-panel {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: end;
    padding: 18px;
    border: 1px solid #b9dedb;
    border-radius: 8px;
    background: linear-gradient(135deg, #eefafa, #ffffff 74%);
    box-shadow: 0 16px 36px rgba(29, 39, 77, .08);
}
.cockpit-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.cockpit-kpis article,
.family-profile-card {
    display: grid;
    gap: 6px;
    align-content: end;
    min-height: 120px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: white;
    box-shadow: 0 12px 30px rgba(29, 39, 77, .07);
}
.cockpit-kpis span,
.family-profile-card span {
    color: var(--muted);
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.cockpit-kpis strong,
.family-profile-card strong {
    color: var(--navy);
    font-size: 1.7rem;
    line-height: 1;
}
.cockpit-kpis small,
.family-profile-card small {
    color: var(--muted);
}
.risk-panel {
    margin-bottom: 22px;
    padding: 20px;
    border: 1px solid #f0d4a3;
    border-radius: 8px;
    background: linear-gradient(135deg, #fff8ea, #ffffff 76%);
    box-shadow: 0 18px 42px rgba(29, 39, 77, .08);
}
.risk-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
.risk-card {
    display: grid;
    gap: 12px;
    align-content: start;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .88);
}
.risk-card h3,
.risk-card p {
    margin-bottom: 0;
}
.risk-signals {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.risk-signals span {
    display: inline-flex;
    padding: 4px 8px;
    border-radius: 999px;
    background: #fff3d8;
    color: #8a6310;
    font-size: .74rem;
    font-weight: 850;
}
.family-profile-hero {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 22px;
    margin-bottom: 22px;
    padding: 24px;
    border: 1px solid #b9dedb;
    border-radius: 8px;
    background: linear-gradient(135deg, #eefafa, #ffffff 72%);
    box-shadow: 0 18px 42px rgba(29, 39, 77, .09);
}
.family-profile-hero h1,
.family-profile-hero p {
    margin-bottom: 0;
}
.family-profile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.family-profile-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
.family-profile-card.highlight {
    border-color: #b9dedb;
    background: #f3fbfa;
}
.family-profile-columns,
.billing-grid,
.search-results-grid,
.support-admin-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}
.profile-row,
.search-result-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
}
.profile-row:last-child,
.search-result-row:last-child {
    border-bottom: 0;
}
.profile-row div,
.search-result-row div {
    display: grid;
    gap: 2px;
}
.profile-row small,
.search-result-row small {
    color: var(--muted);
}
.compact-form {
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}
.billing-line {
    margin: 0;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
}
.internal-note-list {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}
.internal-note,
.support-message.internal-message {
    border: 1px dashed #d8c6ed;
    border-radius: 8px;
    padding: 12px;
    background: #f8f3ff;
}
.internal-note small {
    display: block;
    color: var(--muted);
    margin: 2px 0 8px;
}
.internal-note p {
    margin-bottom: 0;
}
.timeline {
    display: grid;
    gap: 10px;
}
.timeline p {
    display: grid;
    gap: 2px;
    margin: 0;
    padding-left: 12px;
    border-left: 3px solid var(--green);
}
.timeline small {
    color: var(--muted);
}
.settings-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 22px;
}
.settings-overview {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: -6px 0 22px;
}
.settings-summary-card {
    display: grid;
    gap: 6px;
    min-height: 118px;
    align-content: end;
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: white;
    box-shadow: 0 12px 28px rgba(29, 39, 77, .07);
    position: relative;
    overflow: hidden;
}
.settings-summary-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: var(--green);
}
.settings-summary-card span {
    color: var(--muted);
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.settings-summary-card strong {
    color: var(--navy);
    font-size: 1.12rem;
}
.settings-summary-card small {
    color: var(--muted);
    line-height: 1.35;
}
.settings-summary-stripe::before { background: var(--green); }
.settings-summary-smtp::before { background: var(--blue); }
.settings-summary-support::before { background: var(--coral); }
.settings-summary-security::before { background: var(--violet); }
.settings-summary-ai::before { background: var(--blue); }
.settings-ai {
    grid-column: 1 / -1;
}
.settings-ai .settings-card-icon {
    background: #edf2fb;
    color: var(--blue);
}

.ai-security-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 14px 0;
}

.ai-security-grid span {
    display: grid;
    gap: 4px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .78);
    color: var(--muted);
    font-weight: 700;
}

.ai-security-grid strong {
    color: var(--ink);
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.ai-policy-panel {
    display: grid;
    gap: 5px;
    padding: 14px;
    border: 1px solid #b9dedb;
    border-radius: 8px;
    background: linear-gradient(135deg, #eefafa, #ffffff 75%);
}
.ai-policy-panel strong {
    color: var(--navy);
}
.ai-policy-panel p {
    margin-bottom: 0;
    color: var(--muted);
}
.ai-provider-console {
    display: grid;
    gap: 14px;
}
.ai-provider-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.ai-provider-card {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid rgba(226, 230, 220, .96);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(252, 253, 249, .98)),
        radial-gradient(circle at 100% 0%, rgba(40, 170, 160, .08), transparent 34%);
    box-shadow: 0 12px 28px rgba(29, 39, 77, .07);
}
.ai-provider-main {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    align-items: start;
}
.ai-provider-card h3 {
    margin-bottom: 4px;
    color: var(--navy);
    font-size: 1.12rem;
}
.ai-provider-card .muted {
    margin-bottom: 0;
}
.ai-provider-card-head {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 12px;
}
.ai-provider-controls,
.ai-inline-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.ai-inline-fields:has(> :nth-child(3)) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ai-routing-grid,
.ai-task-routing {
    display: grid;
    gap: 10px;
}
.ai-routing-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ai-task-routing {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ai-route-row {
    display: grid;
    gap: 10px;
    align-content: start;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcf8;
}
.ai-route-row span {
    display: grid;
    gap: 3px;
    color: var(--ink);
    font-weight: 850;
}
.ai-route-row small {
    color: var(--muted);
    font-size: .83rem;
    font-weight: 560;
}
.ai-route-row.compact {
    grid-template-columns: minmax(0, 1fr) 160px;
    align-items: center;
}
.ai-cost-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.ai-cost-grid label {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(74px, .42fr) minmax(74px, .42fr);
    gap: 8px;
    align-items: center;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}
.ai-cost-grid span {
    color: var(--ink);
    font-size: .85rem;
    font-weight: 850;
}
.ai-cost-grid input {
    min-width: 0;
    padding: 9px 10px;
}
.settings-card {
    display: grid;
    gap: 18px;
    padding: 22px;
    border: 1px solid rgba(226, 230, 220, .95);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(255, 255, 255, .95)),
        radial-gradient(circle at 10% 0%, rgba(40, 170, 160, .10), transparent 30%);
    box-shadow: 0 16px 36px rgba(29, 39, 77, .08);
    align-content: start;
}
.settings-card-head {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}
.settings-card-head h2,
.settings-card-head p {
    margin-bottom: 0;
}
.settings-card-icon {
    width: 46px;
    height: 46px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 8px;
    background: #edf5f2;
    color: var(--green);
    font-weight: 950;
    letter-spacing: .04em;
}
.settings-stripe .settings-card-icon { background: #edf5f2; color: var(--green); }
.settings-smtp .settings-card-icon { background: #edf2fb; color: var(--blue); }
.settings-support .settings-card-icon { background: #fff3d8; color: #8a6310; }
.settings-security .settings-card-icon { background: #f2eef8; color: var(--violet); }
.settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.setting-field {
    display: grid;
    gap: 8px;
    align-content: start;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcf8;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.setting-field:focus-within {
    border-color: rgba(40, 170, 160, .55);
    box-shadow: 0 10px 24px rgba(40, 170, 160, .10);
    transform: translateY(-1px);
}
.setting-label,
.setting-field strong {
    color: var(--ink);
    font-weight: 850;
}
.setting-field small {
    color: var(--muted);
    font-size: .84rem;
    font-weight: 540;
}
.setting-check {
    grid-template-columns: auto 1fr;
    align-items: start;
}
.setting-check input {
    width: 20px;
    height: 20px;
    margin-top: 3px;
    accent-color: var(--green);
}
.setting-check span {
    display: grid;
    gap: 3px;
}
.setting-check small {
    grid-column: auto;
}
.setting-secret {
    background:
        linear-gradient(180deg, #fbfcf8, #ffffff),
        radial-gradient(circle at 100% 0%, rgba(114, 80, 166, .10), transparent 36%);
}
.settings-savebar {
    position: sticky;
    grid-column: 1 / -1;
    bottom: 14px;
    z-index: 4;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 18px 42px rgba(29, 39, 77, .14);
    backdrop-filter: blur(10px);
}
.settings-savebar div {
    display: grid;
    gap: 2px;
}
.settings-savebar span {
    color: var(--muted);
    font-size: .9rem;
}
.settings-insights {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 18px;
    margin-top: 22px;
}
.email-admin-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 18px;
    margin-bottom: 18px;
}
.email-template-list {
    display: grid;
    gap: 10px;
    align-content: start;
}
.email-template-list a {
    display: grid;
    gap: 3px;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: white;
    text-decoration: none;
}
.email-template-list a.is-active {
    border-color: #b9dedb;
    background: #f3fbfa;
    box-shadow: 0 12px 26px rgba(40, 170, 160, .10);
}
.email-template-list small,
.email-variable-help small {
    color: var(--muted);
}
.content-editor-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}
.content-editor-tabs a {
    display: grid;
    gap: 4px;
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    color: var(--ink);
    text-decoration: none;
    box-shadow: 0 12px 28px rgba(29, 39, 77, .06);
}
.content-editor-tabs a.is-active {
    border-color: rgba(40, 170, 160, .55);
    background: linear-gradient(135deg, #f1fbfa, #ffffff 78%);
    box-shadow: 0 16px 34px rgba(40, 170, 160, .12);
}
.content-editor-tabs span {
    color: var(--navy);
    font-weight: 950;
}
.content-editor-tabs small {
    color: var(--muted);
    font-weight: 750;
}
.content-editor-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 18px;
    align-items: start;
}
.content-editor-main,
.content-preview-panel {
    display: grid;
    gap: 14px;
}
.content-editor-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: start;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}
.content-editor-head h2,
.content-editor-head p {
    margin-bottom: 0;
}
.content-section-editor {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcf8;
    overflow: hidden;
}
.content-section-editor summary {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    padding: 14px 16px;
    color: var(--navy);
    font-weight: 950;
    cursor: pointer;
    list-style: none;
}
.content-section-editor summary::-webkit-details-marker {
    display: none;
}
.content-section-editor summary::after {
    content: "⌄";
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: #e6f7f5;
    color: var(--green);
}
.content-section-editor[open] summary::after {
    transform: rotate(180deg);
}
.content-section-editor summary small {
    color: var(--muted);
    font-weight: 650;
}
.content-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 0 16px 16px;
}
.content-wide-field {
    grid-column: 1 / -1;
}
.content-field-grid textarea {
    min-height: 150px;
    line-height: 1.55;
}
.content-savebar {
    margin-top: 4px;
}
.content-preview-panel {
    position: sticky;
    top: 92px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(255, 255, 255, .95)),
        radial-gradient(circle at 100% 0%, rgba(40, 170, 160, .12), transparent 34%);
}
.content-preview-panel h2,
.content-preview-panel p {
    margin-bottom: 0;
}
.content-preview-highlight {
    display: grid;
    gap: 6px;
    padding: 13px;
    border: 1px solid #b9dedb;
    border-radius: 8px;
    background: #f2fbfa;
}
.content-preview-highlight span,
.content-preview-panel small,
.content-preview-sections span {
    color: var(--muted);
}
.content-preview-sections {
    display: grid;
    gap: 10px;
}
.content-preview-sections article {
    display: grid;
    gap: 5px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
}
.email-editor-panel {
    display: grid;
    gap: 14px;
}
.email-rich-field {
    display: grid;
    gap: 8px;
}
.email-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcf8;
}
.email-toolbar button,
.email-toolbar select,
.email-toolbar input[type="color"] {
    width: auto;
    min-height: 36px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    color: var(--ink);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}
.email-toolbar button {
    padding: 7px 11px;
}
.email-toolbar input[type="color"] {
    width: 42px;
    padding: 4px;
}
.email-visual-editor {
    min-height: 330px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    color: var(--ink);
    outline: none;
    overflow: auto;
}
.email-visual-editor:focus {
    border-color: rgba(40, 170, 160, .48);
    box-shadow: 0 0 0 4px rgba(40, 170, 160, .10);
}
.email-visual-editor p {
    margin: 0 0 12px;
}
.email-visual-editor a {
    color: var(--green);
    font-weight: 850;
}
.email-template-form,
.email-test-form {
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: white;
    box-shadow: 0 12px 30px rgba(29, 39, 77, .07);
}
.email-test-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: end;
}
.email-variable-help {
    padding: 12px;
    border: 1px dashed #b9dedb;
    border-radius: 8px;
    background: #f6fbfa;
}
.email-variable-help p {
    margin-bottom: 4px;
}
.email-preview-grid {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 18px;
    margin-bottom: 18px;
}
.email-preview-frame {
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    background: #f4f6f2;
}
.email-preview-frame iframe {
    display: block;
    width: 100%;
    min-height: 520px;
    border: 0;
    background: white;
}
.admin-security-list {
    display: grid;
    gap: 12px;
}
.admin-security-card {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcf8;
}
.admin-security-card h3,
.admin-security-card p {
    margin-bottom: 0;
}
.admin-security-card small {
    grid-column: 1 / -1;
    color: var(--muted);
}
.security-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}
.ticket-row {
    border-bottom: 1px solid var(--line);
    padding: 12px 0;
}
.ticket-row:last-child { border-bottom: 0; }
.row-warning {
    background: #fff6e2;
}
.support-thread {
    display: grid;
    gap: 14px;
}
.support-message {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px;
    background: #fbfcf8;
}
.support-message.admin-message {
    background: #eef8f7;
    border-color: #c9e7e3;
}
.support-message-body {
    min-width: 0;
}
.support-message-body p {
    margin-bottom: 8px;
}
.support-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 10px 22px rgba(18, 31, 69, .12);
    background: #eef8f7;
    flex: 0 0 auto;
}
.support-avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 900;
}
.support-avatar-support,
.support-avatar-admin {
    background: linear-gradient(135deg, var(--green), #6ecac4);
}
.support-avatar-parent {
    background: linear-gradient(135deg, var(--navy), #5e6894);
}
.support-answer-head {
    display: flex;
    align-items: center;
    gap: 12px;
}
.support-answer-head .support-avatar {
    width: 42px;
    height: 42px;
}
.support-answer-head strong {
    display: block;
    margin-top: 2px;
    color: var(--ink);
}
.support-alert-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding: 18px 20px;
    margin-bottom: 22px;
    border: 1px solid #f0d4a3;
    border-radius: 8px;
    background:
        linear-gradient(135deg, #fff8ea, #ffffff 72%),
        radial-gradient(circle at 8% 15%, rgba(243, 154, 50, .18), transparent 28%);
    box-shadow: 0 14px 34px rgba(29, 39, 77, .08);
}
.support-alert-card.parent-alert {
    border-color: #b9dedb;
    background:
        linear-gradient(135deg, #eefafa, #ffffff 74%),
        radial-gradient(circle at 8% 15%, rgba(40, 170, 160, .16), transparent 28%);
}
.support-alert-card.calm {
    border-color: var(--line);
    background: #fbfcf8;
}
.support-alert-card h2,
.support-alert-card p {
    margin-bottom: 0;
}
.alert-dot {
    width: 10px;
    height: 10px;
    display: inline-block;
    border-radius: 50%;
    background: var(--coral);
    box-shadow: 0 0 0 6px rgba(243, 154, 50, .16);
    margin-right: 8px;
}
.support-ticket-stack {
    display: grid;
    gap: 14px;
}
.ticket-card {
    display: grid;
    gap: 10px;
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcf8;
}
.ticket-card.needs-reply {
    border-color: #b9dedb;
    background: #f2fbfa;
}
.ticket-card-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: start;
}
.ticket-card-head p,
.ticket-card-head h3 {
    margin-bottom: 0;
}
.status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 9px;
    border-radius: 999px;
    background: #edf1ea;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 900;
    white-space: nowrap;
}
.status-waiting_parent,
.status-waiting_admin {
    background: #e7f6f4;
    color: var(--green);
}
.status-attention {
    background: #fff3d8;
    color: #8a6310;
    box-shadow: inset 0 0 0 1px rgba(242, 178, 60, .35);
}
.status-danger {
    background: #fff0ed;
    color: #a83222;
    box-shadow: inset 0 0 0 1px rgba(168, 50, 34, .22);
}
.status-calm {
    background: #edf5f2;
    color: #477064;
}
.status-resolved,
.status-closed {
    background: #edf5f2;
    color: #477064;
}
.status-active {
    background: #e7f6f4;
    color: var(--green);
}
.status-inactive {
    background: #fff0ed;
    color: #a83222;
}
.status-invited {
    background: #fff3d8;
    color: #8a6310;
}
.support-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin: -8px 0 18px;
}
.ticket-priority-row {
    transition: background .16s ease, box-shadow .16s ease;
}
.ticket-priority-row.priority-attention {
    background: linear-gradient(90deg, rgba(255, 243, 216, .72), rgba(255, 255, 255, 0) 45%);
}
.ticket-priority-row.priority-danger {
    background: linear-gradient(90deg, rgba(255, 240, 237, .92), rgba(255, 255, 255, 0) 48%);
    box-shadow: inset 4px 0 0 #d04733;
}
.due-helper {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-weight: 800;
}
.due-badge {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 9px;
    border-radius: 8px;
    background: #fbfcf8;
    border: 1px solid var(--line);
    font-size: .86rem;
    font-weight: 850;
    white-space: nowrap;
}
.due-attention {
    background: #fff8ea;
    border-color: #f0d4a3;
    color: #8a6310;
}
.due-danger {
    background: #fff0ed;
    border-color: #e7bbb3;
    color: #a83222;
}
.due-calm {
    color: var(--muted);
}
.ticket-number-link {
    color: var(--navy);
    text-decoration: none;
}
.ticket-number-link:hover {
    color: var(--green);
    text-decoration: underline;
}
.ticket-reply-preview {
    padding: 12px;
    border-left: 3px solid var(--green);
    border-radius: 8px;
    background: white;
}
.ticket-reply-preview span {
    display: block;
    color: var(--muted);
    font-size: .82rem;
    font-weight: 800;
    margin-bottom: 5px;
}
.ticket-reply-preview p {
    margin-bottom: 0;
}
.ticket-reply-form {
    display: grid;
    gap: 10px;
    padding-top: 4px;
}
.ticket-reply-form .button {
    justify-self: end;
}
.support-main-cta {
    box-shadow: 0 12px 26px rgba(29, 39, 77, .18);
}
.support-parent-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 22px;
    margin-bottom: 22px;
    padding: 24px;
    border: 1px solid #b9dedb;
    border-radius: 8px;
    background:
        linear-gradient(135deg, #eefafa, #ffffff 72%),
        radial-gradient(circle at 8% 15%, rgba(40, 170, 160, .16), transparent 28%);
    box-shadow: 0 18px 42px rgba(29, 39, 77, .09);
}
.support-parent-hero h2 {
    max-width: 760px;
    margin-bottom: 8px;
}
.support-parent-hero p {
    max-width: 820px;
    margin-bottom: 0;
    color: var(--muted);
}
.support-create-panel {
    margin-bottom: 24px;
}
.attachment-drop {
    padding: 13px;
    border: 1px dashed #b9dedb;
    border-radius: 8px;
    background: #f6fbfa;
}
.attachment-drop input {
    background: white;
}
.attachment-drop.compact {
    padding: 10px;
}
.support-ticket-detail {
    display: grid;
    gap: 14px;
}
.empty-support-state {
    display: grid;
    gap: 10px;
    justify-items: start;
}
.support-ticket-wide-list {
    display: grid;
    gap: 18px;
}
.ticket-wide-card {
    display: grid;
    gap: 16px;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.99), rgba(255,255,255,.95)),
        radial-gradient(circle at 3% 0%, rgba(33, 105, 168, .08), transparent 28%);
    box-shadow: 0 16px 36px rgba(29, 39, 77, .08);
}
.ticket-wide-card.needs-reply {
    border-color: #b9dedb;
    box-shadow: 0 18px 42px rgba(40, 170, 160, .12);
}
.ticket-wide-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: start;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}
.ticket-wide-head h3,
.ticket-wide-head p {
    margin-bottom: 0;
}
.support-answer-box {
    display: grid;
    gap: 8px;
    padding: 15px;
    border-left: 4px solid var(--green);
    border-radius: 8px;
    background: #f3fbfa;
}
.support-answer-box span {
    color: var(--green);
    font-size: .82rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.support-answer-box p {
    margin-bottom: 0;
}
.support-answer-box.muted-box {
    border-left-color: var(--line);
    background: #fbfcf8;
}
.support-answer-box.muted-box span {
    color: var(--muted);
}
.attachment-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.attachment-gallery a {
    width: 150px;
    display: grid;
    gap: 6px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: white;
    text-decoration: none;
    color: var(--ink);
}
.attachment-gallery img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--line);
}
.attachment-gallery span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--muted);
    font-size: .8rem;
}
.ticket-actions-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: end;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}
.ticket-close-form {
    align-self: end;
}
.inline-admin-form {
    display: grid;
    grid-template-columns: 120px 150px 190px auto;
    gap: 8px;
    align-items: center;
}
.permission-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.permission-grid fieldset {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px;
    background: #fbfcf8;
}
.permission-grid legend {
    font-weight: 850;
    color: var(--navy);
}
.permission-grid label,
.child-access-list label {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 8px;
    padding: 7px 0;
}
.permission-grid input,
.child-access-list input {
    width: auto;
    margin-top: 4px;
}
.permission-grid small {
    grid-column: 2;
    color: var(--muted);
    font-weight: 500;
}
.technical-permission {
    color: #7a4b1e;
}
.access-list {
    display: grid;
    gap: 18px;
}
.access-card {
    border: 1px solid rgba(226, 230, 220, .95);
    border-radius: 8px;
    padding: 20px;
    display: grid;
    gap: 16px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(255, 255, 255, .95)),
        radial-gradient(circle at 8% 0%, rgba(33, 105, 168, .08), transparent 28%);
    box-shadow: 0 16px 36px rgba(29, 39, 77, .08);
}
.access-card-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: start;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}
.access-identity {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
}
.access-avatar {
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--green), var(--blue));
    color: white;
    font-size: 1.15rem;
    font-weight: 950;
    box-shadow: 0 10px 22px rgba(40, 170, 160, .22);
}
.access-kicker {
    margin-bottom: 2px;
    color: var(--green);
    font-size: .75rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.access-card h3 {
    margin-bottom: 2px;
    font-size: 1.18rem;
}
.access-card p {
    margin-bottom: 0;
}
.access-meta {
    display: grid;
    justify-items: end;
    gap: 10px;
    min-width: 210px;
}
.access-meta label {
    width: 100%;
}
.role-chip {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #edf5f2;
    color: var(--green);
    font-size: .78rem;
    font-weight: 900;
    white-space: nowrap;
}
.role-overview-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 14px 0 18px;
}
.role-overview-strip span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 11px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fbfcf8;
    color: var(--ink);
    font-size: .86rem;
    font-weight: 900;
}
.role-admin {
    background: #edf2fb;
    color: var(--blue);
}
.role-parent {
    background: #fff3d8;
    color: #8a6310;
}
.role-teacher {
    background: #f2eef8;
    color: var(--violet);
}
.access-section-label {
    display: inline-flex;
    width: fit-content;
    padding: 5px 9px;
    border-radius: 999px;
    background: #fbfcf8;
    border: 1px solid var(--line);
    color: var(--muted);
    font-size: .78rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.access-actions {
    display: flex;
    justify-content: flex-end;
}
.section-title-row {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 18px;
    margin-bottom: 16px;
}
.section-title-row h2,
.section-title-row p {
    margin-bottom: 0;
}
.plan-admin-section {
    margin-bottom: 24px;
}
.plan-admin-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}
.plan-admin-card {
    display: grid;
    gap: 18px;
    padding: 22px;
    border: 1px solid rgba(226, 230, 220, .95);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(255, 255, 255, .94)),
        radial-gradient(circle at 14% 0%, rgba(40, 170, 160, .12), transparent 32%);
    box-shadow: 0 18px 42px rgba(29, 39, 77, .09);
}
.plan-card-head {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}
.plan-card-head h3 {
    margin: 3px 0 0;
    font-size: 1.25rem;
}
.plan-kicker {
    color: var(--muted);
    font-size: .76rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.plan-chip {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #edf5f2;
    color: var(--green);
    font-size: .78rem;
    font-weight: 900;
}
.plan-chip.support-standard {
    background: #edf2fb;
    color: var(--blue);
}
.plan-chip.support-priority {
    background: #fff3d8;
    color: #8a6310;
}
.plan-admin-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.plan-admin-fields label:first-child,
.plan-admin-fields label:nth-child(6) {
    grid-column: 1 / -1;
}
.plan-feature-grid {
    display: grid;
    gap: 10px;
}
.feature-toggle {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcf8;
    color: var(--ink);
}
.feature-toggle input {
    width: 18px;
    height: 18px;
    margin-top: 3px;
    accent-color: var(--green);
}
.feature-toggle span {
    display: grid;
    gap: 2px;
}
.feature-toggle strong {
    font-size: .95rem;
}
.feature-toggle small {
    color: var(--muted);
    font-weight: 550;
}
.option-stack {
    display: grid;
    gap: 12px;
}
.option-stack textarea {
    min-height: 88px;
}
.share-card {
    border-color: rgba(40, 170, 160, .28);
    background: linear-gradient(135deg, #ffffff 0%, #fbfffc 100%);
}
.share-card h3 {
    margin: 8px 0 6px;
    font-size: 1.15rem;
}
.legal-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
.legal-card {
    display: grid;
    gap: 10px;
    align-content: start;
}
.legal-card h2,
.legal-card p,
.legal-card ul {
    margin: 0;
}
.legal-card ul {
    padding-left: 22px;
}
.legal-card li + li {
    margin-top: 6px;
}
.legal-card a {
    color: var(--green);
    font-weight: 850;
    text-decoration: none;
}
.legal-notice-box {
    margin-bottom: 22px;
}
.public-footer {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    padding: 22px max(16px, calc((100vw - 1160px) / 2));
    border-top: 1px solid var(--line);
    background: #ffffff;
    color: var(--muted);
}
.public-footer div,
.public-footer nav {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}
.public-footer strong {
    color: var(--navy);
}
.public-footer a {
    color: var(--muted);
    font-weight: 800;
    text-decoration: none;
}
.public-footer a:hover {
    color: var(--green);
}
.plan-card-actions {
    display: flex;
    justify-content: flex-end;
}
pre {
    white-space: pre-wrap;
    background: #f5f7f4;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px;
}

.reward-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
    gap: 22px;
    align-items: stretch;
    margin-bottom: 22px;
}
.reward-hero-copy,
.reward-hero-panel,
.reward-principles article,
.reward-child-card,
.reward-empty {
    border: 1px solid rgba(226, 230, 220, .96);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 18px 44px rgba(29, 39, 77, .08);
}
.reward-hero-copy {
    padding: 30px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(255, 255, 255, .94)),
        radial-gradient(circle at 8% 8%, rgba(40, 170, 160, .15), transparent 28%),
        radial-gradient(circle at 92% 10%, rgba(243, 154, 50, .14), transparent 30%);
}
.reward-hero-copy h1 {
    max-width: 760px;
    margin-bottom: 10px;
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.04;
}
.reward-hero-copy p {
    max-width: 780px;
    margin-bottom: 0;
    color: var(--muted);
    font-size: 1.04rem;
}
.reward-hero-panel {
    display: grid;
    align-content: center;
    gap: 12px;
    padding: 24px;
    background:
        linear-gradient(180deg, rgba(29, 39, 77, .94), rgba(29, 39, 77, .88)),
        radial-gradient(circle at 70% 0%, rgba(40, 170, 160, .36), transparent 34%);
}
.reward-hero-panel span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 42px;
    padding: 9px 12px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 8px;
    color: #fffaf1;
    font-weight: 850;
}
.reward-hero-panel span::after {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 5px rgba(40, 170, 160, .16);
}
.reward-principles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}
.reward-principles article {
    padding: 18px;
}
.reward-principles strong {
    display: block;
    margin-bottom: 5px;
    font-size: 1.04rem;
}
.reward-principles p {
    margin-bottom: 0;
    color: var(--muted);
}
.reward-empty {
    padding: 28px;
    display: grid;
    gap: 10px;
    justify-items: start;
}
.reward-config-grid {
    display: grid;
    gap: 22px;
}
.reward-child-card {
    overflow: hidden;
}
.reward-card-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    padding: 22px 24px;
    border-bottom: 1px solid var(--line);
    background:
        linear-gradient(90deg, rgba(251, 252, 248, .98), rgba(255, 255, 255, .96)),
        radial-gradient(circle at 0% 0%, rgba(33, 105, 168, .08), transparent 28%);
}
.reward-child-identity {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
.reward-child-avatar,
.preview-avatar {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    color: white;
    font-weight: 950;
    background: linear-gradient(135deg, var(--green), var(--blue));
}
.reward-child-avatar {
    width: 54px;
    height: 54px;
    font-size: 1.25rem;
    box-shadow: 0 12px 24px rgba(40, 170, 160, .24);
}
.reward-card-head h2,
.reward-card-head p {
    margin-bottom: 0;
}
.reward-card-body {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(330px, .9fr);
    gap: 22px;
    padding: 24px;
}
.reward-mode-panel h3 {
    margin-bottom: 4px;
}
.reward-mode-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}
.reward-mode-option {
    position: relative;
    display: grid;
    min-height: 112px;
    padding: 15px 15px 15px 46px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcf8;
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.reward-mode-option:hover,
.reward-mode-option:focus-within {
    transform: translateY(-1px);
    border-color: rgba(40, 170, 160, .46);
    box-shadow: 0 12px 26px rgba(29, 39, 77, .08);
}
.reward-mode-option.is-selected {
    border-color: rgba(40, 170, 160, .72);
    background:
        linear-gradient(180deg, rgba(237, 245, 242, .96), rgba(255, 255, 255, .98));
    box-shadow: inset 0 0 0 1px rgba(40, 170, 160, .28), 0 14px 30px rgba(40, 170, 160, .12);
}
.reward-mode-option.is-locked-premium {
    border-color: rgba(240, 212, 163, .95);
    background:
        linear-gradient(145deg, rgba(255, 253, 248, .98), rgba(255, 255, 255, .96));
    box-shadow: inset 4px 0 0 rgba(242, 178, 60, .65);
    cursor: not-allowed;
}
.reward-mode-option.is-locked-premium:hover,
.reward-mode-option.is-locked-premium:focus-within {
    transform: none;
    border-color: rgba(240, 212, 163, .95);
    box-shadow: inset 4px 0 0 rgba(242, 178, 60, .65), 0 12px 26px rgba(138, 99, 16, .07);
}
.reward-mode-option input {
    position: absolute;
    left: 15px;
    top: 17px;
    width: 20px;
    height: 20px;
    accent-color: var(--green);
}
.reward-mode-option span {
    display: grid;
    gap: 6px;
    align-content: start;
}
.reward-mode-option strong {
    font-size: 1rem;
}
.reward-mode-option small {
    color: var(--muted);
    font-weight: 550;
}
.premium-mode-badge {
    width: fit-content;
    padding: 5px 9px;
    border-radius: 999px;
    background: #fff3d8;
    color: #8a6310;
    font-size: .72rem;
    font-style: normal;
    font-weight: 950;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.reward-preview {
    display: grid;
    gap: 14px;
}
.reward-preview-copy,
.reward-preview-stage,
.reward-parent-note {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
}
.reward-preview-copy {
    padding: 18px;
}
.reward-preview-copy span {
    display: inline-flex;
    margin-bottom: 8px;
    color: var(--green);
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.reward-preview-copy h3 {
    margin-bottom: 6px;
}
.reward-preview-copy p {
    margin-bottom: 8px;
    color: var(--muted);
}
.reward-preview-copy small {
    color: var(--ink);
    font-weight: 800;
}
.reward-preview-stage {
    min-height: 270px;
    display: grid;
    align-content: start;
    gap: 16px;
    padding: 18px;
    overflow: hidden;
    background:
        linear-gradient(180deg, #ffffff, #fbfcf8),
        radial-gradient(circle at 86% 12%, rgba(242, 178, 60, .16), transparent 26%);
}
.preview-child-top {
    display: flex;
    align-items: center;
    gap: 12px;
}
.preview-avatar {
    width: 44px;
    height: 44px;
}
.preview-child-top strong,
.preview-child-top small {
    display: block;
}
.preview-child-top small {
    color: var(--muted);
    font-weight: 650;
}
.preview-visual {
    min-height: 102px;
    display: grid;
    place-items: center;
}
.preview-message {
    width: 100%;
    padding: 16px;
    border-radius: 8px;
    background: #edf5f2;
    color: var(--ink);
    font-weight: 850;
    text-align: center;
}
.preview-message.is-muted {
    background: #f5f7f4;
    color: var(--muted);
}
.preview-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}
.preview-badges span {
    padding: 9px 12px;
    border-radius: 999px;
    background: #fff3d8;
    color: #80570d;
    font-size: .84rem;
    font-weight: 900;
    box-shadow: 0 8px 18px rgba(242, 178, 60, .18);
}
.preview-badges span:nth-child(2) {
    background: #edf5f2;
    color: var(--green);
}
.preview-badges span:nth-child(3) {
    background: #f2eef8;
    color: var(--violet);
}
.preview-garden {
    position: relative;
    width: min(210px, 100%);
    height: 112px;
    border-bottom: 7px solid rgba(40, 170, 160, .28);
}
.preview-garden span,
.preview-garden i {
    position: absolute;
    bottom: 0;
    display: block;
}
.preview-garden span {
    width: 16px;
    border-radius: 999px 999px 4px 4px;
    background: linear-gradient(180deg, var(--green), #147d75);
}
.preview-garden span::before,
.preview-garden span::after {
    content: "";
    position: absolute;
    width: 34px;
    height: 22px;
    border-radius: 999px 999px 999px 4px;
    background: rgba(40, 170, 160, .75);
}
.preview-garden span::before {
    right: 6px;
    top: 12px;
    transform: rotate(-22deg);
}
.preview-garden span::after {
    left: 7px;
    top: 26px;
    transform: rotate(22deg);
    background: rgba(242, 178, 60, .86);
}
.preview-garden span:nth-child(1) {
    left: 34px;
    height: 62px;
}
.preview-garden span:nth-child(2) {
    left: 96px;
    height: 92px;
}
.preview-garden span:nth-child(3) {
    left: 158px;
    height: 48px;
}
.preview-garden i {
    left: 4px;
    bottom: 8px;
    width: 188px;
    height: 18px;
    border-radius: 50%;
    background: rgba(29, 39, 77, .06);
}
.preview-points {
    width: min(250px, 100%);
    display: grid;
    gap: 10px;
    justify-items: center;
    padding: 18px;
    border: 1px solid rgba(33, 105, 168, .18);
    border-radius: 8px;
    background: #edf2fb;
}
.preview-points strong {
    font-size: 3rem;
    line-height: 1;
    color: var(--blue);
}
.preview-points > span {
    font-weight: 900;
}
.preview-points div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px;
}
.preview-points small {
    padding: 5px 8px;
    border-radius: 999px;
    background: white;
    color: var(--muted);
    font-weight: 800;
}
.reward-preview-stage > p {
    margin-bottom: 0;
    color: var(--muted);
    font-weight: 650;
}
.reward-parent-note {
    padding: 16px;
    background: #fbfcf8;
}
.reward-locked-note {
    padding: 16px;
    border-top: 1px solid var(--line);
    background: #fffaf0;
}
.reward-locked-note strong {
    display: block;
    margin-bottom: 4px;
    color: #8a6310;
}
.reward-locked-note p {
    margin-bottom: 0;
    color: var(--muted);
}
.reward-parent-note strong {
    display: block;
    margin-bottom: 4px;
}
.reward-parent-note p {
    margin-bottom: 0;
    color: var(--muted);
}
.premium-preview-gate,
.reward-preview-gate,
.premium-discovery-strip,
.premium-report-preview {
    border: 1px solid rgba(226, 230, 220, .96);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(255, 255, 255, .95)),
        radial-gradient(circle at 8% 0%, rgba(40, 170, 160, .12), transparent 28%),
        radial-gradient(circle at 92% 8%, rgba(242, 178, 60, .14), transparent 26%);
    box-shadow: 0 18px 44px rgba(29, 39, 77, .08);
}
.premium-preview-gate {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, .65fr) auto;
    gap: 18px;
    align-items: center;
    margin-bottom: 22px;
    padding: 22px;
}
.reward-preview-gate {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    margin-bottom: 22px;
    padding: 22px;
}
.reward-preview-gate h2,
.reward-preview-gate p {
    margin-bottom: 0;
}
.reward-preview-gate p,
.reward-gate-actions span {
    color: var(--muted);
}
.reward-gate-actions {
    display: grid;
    gap: 8px;
    justify-items: start;
    min-width: 240px;
}
.premium-preview-gate h2,
.premium-preview-gate p {
    margin-bottom: 0;
}
.premium-preview-gate p {
    color: var(--muted);
}
.premium-target {
    margin-top: 8px;
    color: var(--ink) !important;
    font-weight: 750;
}
.premium-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}
.premium-benefits span {
    padding: 8px 10px;
    border-radius: 999px;
    background: #edf5f2;
    color: var(--green);
    font-size: .84rem;
    font-weight: 900;
}
.premium-gate-actions {
    display: grid;
    gap: 10px;
    min-width: 210px;
}
.reward-child-card.is-premium-preview {
    position: relative;
}
.reward-child-card.is-premium-preview .reward-preview-stage {
    border-color: rgba(40, 170, 160, .32);
}
.reward-child-card.is-premium-preview button[disabled],
.subscription-plan-card button[disabled] {
    cursor: not-allowed;
    opacity: .72;
}
.premium-report-preview {
    margin: 16px 0 22px;
    padding: 18px;
}
.premium-report-preview p {
    margin-bottom: 0;
    color: var(--muted);
}
.premium-discovery-strip {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr);
    gap: 18px;
    align-items: center;
    margin-bottom: 22px;
    padding: 22px;
}
.premium-discovery-strip h2,
.premium-discovery-strip p {
    margin-bottom: 0;
}
.premium-discovery-strip p {
    color: var(--muted);
}
.premium-discovery-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.premium-discovery-card {
    min-height: 94px;
    display: grid;
    align-content: space-between;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcf8;
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.premium-discovery-card:hover {
    transform: translateY(-1px);
    border-color: rgba(40, 170, 160, .45);
    box-shadow: 0 12px 26px rgba(29, 39, 77, .08);
}
.premium-discovery-card span {
    color: var(--green);
    font-size: .84rem;
    font-weight: 900;
}
.admin-filter-bar {
    display: grid;
    grid-template-columns: minmax(260px, 1.2fr) minmax(160px, .7fr) minmax(180px, .8fr) auto auto;
    gap: 14px;
    align-items: end;
    margin-bottom: 22px;
    padding: 18px;
    border: 1px solid rgba(226, 230, 220, .96);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(29, 39, 77, .07);
}
.admin-users-overview {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}
.admin-users-overview article {
    display: grid;
    gap: 4px;
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(29, 39, 77, .06);
}
.admin-users-overview span {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.admin-users-overview strong {
    color: var(--navy);
    font-size: 1.8rem;
    line-height: 1;
}
.admin-users-list {
    display: grid;
    gap: 14px;
}
.admin-user-card {
    position: relative;
    display: grid;
    gap: 14px;
    padding-right: 76px;
}
.admin-user-card.is-current-user {
    border-color: rgba(40, 170, 160, .38);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(255, 255, 255, .95)),
        radial-gradient(circle at 100% 0%, rgba(40, 170, 160, .12), transparent 32%);
}
.admin-user-form {
    display: grid;
    gap: 14px;
}
.admin-user-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: start;
}
.admin-user-head h2,
.admin-user-head p {
    margin-bottom: 0;
}
.admin-user-fields {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}
.admin-user-detail {
    display: grid;
    gap: 14px;
}
.admin-user-toggle {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #edf8f5;
    color: var(--green);
    cursor: pointer;
    font-size: 1.35rem;
    font-weight: 900;
    display: grid;
    place-items: center;
    transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.admin-user-toggle:hover {
    background: #dff3ef;
    border-color: rgba(40, 170, 160, .35);
}
.admin-user-toggle[aria-expanded="true"] .toggle-chevron {
    transform: rotate(180deg);
}
.toggle-chevron {
    display: inline-block;
    transition: transform .18s ease;
    line-height: 1;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.admin-user-family {
    grid-column: span 2;
}
.admin-user-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.admin-user-meta span {
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fbfcf8;
    color: var(--muted);
    font-size: .85rem;
    font-weight: 780;
}
.admin-user-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.admin-user-delete {
    position: absolute;
    right: 20px;
    bottom: 20px;
}
.admin-user-card:has(.admin-user-delete) .admin-user-actions {
    padding-right: 126px;
}
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 24px 0;
    flex-wrap: wrap;
}
.pagination-page {
    display: inline-grid;
    place-items: center;
    min-width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #ffffff;
    color: var(--navy);
    font-weight: 900;
    text-decoration: none;
}
.pagination-page.is-active {
    background: var(--navy);
    color: #ffffff;
    border-color: var(--navy);
}
.button.is-disabled {
    pointer-events: none;
    opacity: .45;
}
.admin-reward-overview {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}
.admin-reward-overview article,
.admin-reward-card {
    border: 1px solid rgba(226, 230, 220, .96);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(29, 39, 77, .07);
}
.admin-reward-overview article {
    padding: 18px;
    display: grid;
    gap: 4px;
}
.admin-reward-overview span {
    color: var(--muted);
    font-weight: 850;
}
.admin-reward-overview strong {
    font-size: 2.1rem;
    line-height: 1;
}
.admin-reward-overview small {
    color: var(--green);
    font-weight: 900;
}
.admin-reward-list {
    display: grid;
    gap: 14px;
}
.admin-reward-card {
    display: grid;
    grid-template-columns: 1fr .8fr;
    gap: 14px;
    padding: 16px;
    align-items: end;
}
.admin-reward-card > label {
    grid-column: 1 / -1;
}
.admin-reward-mode-stack {
    display: grid;
    gap: 16px;
}
.reward-admin-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 18px;
}
.reward-admin-tabs a {
    padding: 10px 13px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    text-decoration: none;
    font-weight: 850;
}
.reward-admin-tabs a:hover {
    border-color: #b9dedb;
    background: #f3fbfa;
}
.admin-reward-mode-panel {
    border: 1px solid rgba(226, 230, 220, .96);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 16px 36px rgba(29, 39, 77, .07);
    overflow: hidden;
}
.admin-reward-mode-panel summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 22px;
    cursor: pointer;
    list-style: none;
    background:
        linear-gradient(135deg, rgba(249, 252, 250, .98), rgba(255, 252, 246, .96));
}
.admin-reward-mode-panel summary::-webkit-details-marker {
    display: none;
}
.admin-reward-mode-panel summary h2,
.admin-reward-mode-panel summary p {
    margin-bottom: 0;
}
.admin-reward-mode-panel summary strong {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--green);
    background: #eaf8f6;
    box-shadow: inset 0 0 0 1px rgba(42, 173, 163, .18);
    flex: 0 0 auto;
}
.admin-reward-mode-body {
    display: grid;
    gap: 16px;
    padding: 18px 22px 22px;
    border-top: 1px solid var(--line);
}
.reward-mode-guidance {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.reward-mode-guidance span {
    padding: 8px 10px;
    border-radius: 999px;
    background: #f3fbfa;
    color: var(--muted);
    font-weight: 800;
}
.reward-mode-guidance strong {
    color: var(--green);
}
.reward-create-panel {
    background: #fbfcf8;
}
.reward-create-panel h3 {
    margin-bottom: 14px;
}
.admin-reward-mode-list {
    display: grid;
    gap: 14px;
}
.admin-reward-editor {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}
.reward-editor-head {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}
.reward-editor-head > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.admin-reward-thumb {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    object-fit: cover;
    border: 1px solid var(--line);
    background: #f3fbfa;
    box-shadow: 0 12px 24px rgba(29, 39, 77, .08);
}
.admin-reward-thumb.placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--green);
    font-size: 1.8rem;
    font-weight: 900;
}
.reward-editor-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.reward-editor-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 6px;
}
.reward-visibility-checks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcf8;
}
.reward-visibility-checks label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ink);
    font-weight: 800;
}
.reward-visibility-checks input {
    width: auto;
}
.badge-preview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.badge-preview-card {
    display: grid;
    gap: 8px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: linear-gradient(135deg, #fff, #fbfcf8);
}
.badge-preview-card span:first-child {
    color: var(--green);
    font-size: .78rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.badge-preview-card .admin-reward-thumb {
    width: 58px;
    height: 58px;
}
.badge-preview-card p {
    color: var(--muted);
    margin-bottom: 0;
}
.parent-earned-badges {
    margin-bottom: 22px;
}
.parent-earned-badge-grid,
.child-badge-list {
    display: grid;
    gap: 12px;
}
.parent-earned-badge-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.parent-earned-badge-grid article,
.child-badge-card {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcf8;
}
.parent-earned-badge-grid img,
.child-badge-card img,
.badge-fallback,
.child-badge-card > span {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    object-fit: cover;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eaf8f6;
    color: var(--green);
    font-weight: 900;
}
.parent-earned-badge-grid p,
.parent-earned-badge-grid small,
.child-badge-card p {
    margin-bottom: 0;
    color: var(--muted);
}

.child-badge-unlock {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(17, 29, 62, .28);
    backdrop-filter: blur(8px);
}
.child-badge-unlock-card {
    width: min(520px, 100%);
    padding: 32px;
    border: 1px solid var(--line);
    border-radius: 28px;
    background: linear-gradient(145deg, #fffaf0, #f3fffd);
    box-shadow: 0 28px 70px rgba(17, 29, 62, .22);
    text-align: center;
}
.child-badge-unlock-card img,
.child-badge-unlock-fallback {
    width: 132px;
    height: 132px;
    margin: 0 auto 14px;
    border-radius: 999px;
    object-fit: contain;
}
.child-badge-unlock-fallback {
    display: grid;
    place-items: center;
    background: #fff3cf;
    color: #9a6a08;
    font-size: 58px;
}
.child-badge-unlock-card h1 {
    margin: 0 0 10px;
    font-size: clamp(2rem, 5vw, 3.1rem);
}
.child-badge-unlock-card strong {
    display: block;
    margin-bottom: 10px;
    color: var(--teal);
}
.child-badge-unlock-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 22px;
}
.reward-manual-award {
    display: grid;
    grid-template-columns: minmax(220px, 1.1fr) minmax(180px, .7fr) minmax(220px, 1fr) auto;
    align-items: end;
    gap: 16px;
    margin: -10px 0 28px;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: rgba(255, 255, 255, .78);
    box-shadow: var(--shadow-soft);
}
.reward-manual-award h3,
.reward-manual-award p {
    margin: 0;
}
.reward-manual-award label {
    display: grid;
    gap: 8px;
    font-weight: 800;
    color: var(--muted);
}
.reward-manual-award select,
.reward-manual-award input {
    width: 100%;
}
.admin-reward-award {
    grid-template-columns: minmax(240px, .8fr) minmax(0, 1.6fr);
    margin: 0 0 18px;
}
.reward-award-inline {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 14px;
    align-items: end;
}
.preview-mixed {
    display: grid;
    gap: 10px;
}
.toggle-line {
    display: inline-flex;
    grid-auto-flow: column;
    align-items: center;
    gap: 8px;
    margin-right: auto;
    color: var(--ink);
}
.toggle-line input {
    width: auto;
}
.reward-empty-mode {
    padding: 16px;
    border: 1px dashed #cfd8ca;
    border-radius: 8px;
    background: #fbfcf8;
}
.reward-empty-mode h3,
.reward-empty-mode p {
    margin-bottom: 0;
}
.auth-onboarding {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(260px, .62fr) minmax(0, 1.38fr);
    gap: 24px;
    align-items: start;
}
.auth-onboarding-copy {
    position: sticky;
    top: 28px;
    padding: 24px;
    border: 1px solid rgba(226, 230, 220, .96);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(255, 255, 255, .94)),
        radial-gradient(circle at 10% 8%, rgba(40, 170, 160, .15), transparent 30%),
        radial-gradient(circle at 90% 12%, rgba(242, 178, 60, .16), transparent 30%);
    box-shadow: 0 18px 44px rgba(29, 39, 77, .08);
}
.auth-onboarding-copy h1 {
    margin-bottom: 10px;
    font-size: clamp(1.8rem, 2.8vw, 2.45rem);
    line-height: 1.08;
    overflow-wrap: anywhere;
}
.auth-onboarding-copy p {
    color: var(--muted);
    font-size: .98rem;
}
.auth-onboarding-steps {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}
.auth-onboarding-steps span {
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcf8;
    font-weight: 850;
    line-height: 1.25;
}
.register-premium-form {
    width: 100%;
    display: grid;
    gap: 16px;
    padding: 24px;
    border: 1px solid rgba(226, 230, 220, .96);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(29, 39, 77, .06);
}
.register-premium-form .button.primary {
    width: 100%;
    min-height: 52px;
}
.required-hint {
    justify-self: start;
    margin: -2px 0 0;
    padding: 7px 10px;
    border: 1px solid rgba(40, 170, 160, .18);
    border-radius: 999px;
    background: #f7fcfb;
    color: var(--muted);
    font-size: .82rem;
    font-weight: 800;
}
.required-hint span,
.required-label em {
    color: var(--teal);
    font-style: normal;
    font-weight: 950;
}
.required-label {
    display: inline-flex;
    gap: 4px;
    align-items: baseline;
}
.password-field {
    position: relative;
    display: block;
}
.password-field input {
    padding-right: 52px;
}
.password-toggle {
    position: absolute;
    top: 50%;
    right: 8px;
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    transform: translateY(-50%);
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}
.password-toggle:hover,
.password-toggle:focus-visible {
    border-color: rgba(40, 170, 160, .24);
    background: #f7fcfb;
    color: var(--navy);
    outline: none;
}
.password-toggle svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.form-section-title {
    padding-top: 4px;
    border-top: 1px solid var(--line);
}
.form-section-title:first-of-type {
    padding-top: 0;
    border-top: 0;
}
.form-section-title span,
.setup-panel-intro span {
    color: var(--green);
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.form-section-title h2,
.form-section-title p,
.setup-panel-intro h2,
.setup-panel-intro p {
    margin-bottom: 0;
}
.form-section-title h2 {
    font-size: clamp(1.35rem, 2.4vw, 1.85rem);
    line-height: 1.15;
}
.form-section-title p,
.setup-panel-intro p {
    color: var(--muted);
}
.two-column-fields,
.three-column-fields,
.setup-fields {
    display: grid;
    gap: 14px;
}
.two-column-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.three-column-fields {
    grid-template-columns: .7fr 1fr .55fr;
}
.child-setup-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(290px, .5fr);
    gap: 22px;
    margin-bottom: 22px;
    padding: 28px;
    border: 1px solid rgba(226, 230, 220, .96);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(255, 255, 255, .95)),
        radial-gradient(circle at 8% 8%, rgba(40, 170, 160, .13), transparent 30%);
    box-shadow: 0 18px 44px rgba(29, 39, 77, .08);
}
.child-setup-hero h1 {
    max-width: 760px;
    margin-bottom: 8px;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.06;
}
.child-setup-hero p {
    max-width: 760px;
    margin-bottom: 0;
    color: var(--muted);
}
.child-setup-hero ol {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.child-setup-hero li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcf8;
    font-weight: 850;
}
.child-setup-hero li strong {
    width: 32px;
    height: 32px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    background: var(--green);
    color: white;
}
.child-setup-form {
    display: grid;
    gap: 18px;
}
.setup-panel {
    display: grid;
    grid-template-columns: minmax(230px, .42fr) minmax(0, 1fr);
    gap: 22px;
    padding: 22px;
    border: 1px solid rgba(226, 230, 220, .96);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(29, 39, 77, .07);
}
.setup-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.setup-fields.compact {
    grid-column: 2;
}
.pedagogical-start-card {
    grid-column: 2;
    display: grid;
    gap: 16px;
    padding: 18px;
    border: 1px solid rgba(185, 222, 219, .95);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(246, 251, 250, .98), rgba(255,255,255,.98)),
        radial-gradient(circle at 100% 0%, rgba(40, 170, 160, .13), transparent 30%);
    box-shadow: 0 14px 32px rgba(29, 39, 77, .06);
}
.pedagogical-start-intro {
    display: grid;
    gap: 5px;
}
.pedagogical-start-intro h3,
.pedagogical-start-intro p {
    margin: 0;
}
.pedagogical-start-intro p {
    color: var(--muted);
}
.pedagogical-start-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: stretch;
}
.premium-field {
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255,255,255,.86);
}
.premium-field > small,
.premium-field small {
    color: var(--muted);
    font-weight: 750;
    line-height: 1.35;
}
.duration-unit-field {
    display: grid;
    grid-template-columns: minmax(90px, 1fr) minmax(130px, .8fr);
    gap: 10px;
}
.duration-unit-field input,
.duration-unit-field select {
    width: 100%;
}
.per-guidance-note {
    grid-column: 1 / -1;
    display: grid;
    gap: 4px;
    padding: 14px 16px;
    border: 1px solid rgba(242, 178, 60, .28);
    border-radius: 8px;
    background: #fffaf0;
}
.per-guidance-note strong {
    color: #8a6310;
}
.per-guidance-note p {
    margin: 0;
    color: var(--muted);
}
.setup-choice-grid {
    grid-column: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.per-starting-point-grid {
    margin-top: 14px;
}
.per-starting-point-grid .setup-choice-card {
    min-height: 118px;
    background: linear-gradient(145deg, #ffffff, #f7fbf8);
}
.setup-choice-card {
    position: relative;
    display: grid;
    min-height: 126px;
    padding: 15px 14px 15px 44px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcf8;
    cursor: pointer;
}
.setup-choice-card:focus-within,
.setup-choice-card:hover {
    border-color: rgba(40, 170, 160, .48);
    box-shadow: 0 12px 24px rgba(29, 39, 77, .07);
}
.setup-choice-card input {
    position: absolute;
    left: 14px;
    top: 17px;
    width: 18px;
    height: 18px;
    accent-color: var(--green);
}
.setup-choice-card span {
    display: grid;
    gap: 5px;
}
.setup-choice-card small {
    color: var(--muted);
    font-weight: 550;
}
.child-login-preview {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 16px;
    border: 1px solid rgba(33, 105, 168, .18);
    border-radius: 8px;
    background: #edf2fb;
}
.setup-submit-bar,
.onboarding-dashboard-card {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    padding: 22px;
    border: 1px solid rgba(226, 230, 220, .96);
    border-radius: 8px;
    background:
        linear-gradient(135deg, #ffffff, #fbfcf8),
        radial-gradient(circle at 92% 0%, rgba(40, 170, 160, .12), transparent 28%);
    box-shadow: 0 16px 36px rgba(29, 39, 77, .08);
}
.setup-submit-bar p,
.onboarding-dashboard-card p {
    margin-bottom: 0;
    color: var(--muted);
}
.onboarding-dashboard-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.first-run-shell {
    display: grid;
    gap: 18px;
}
.first-run-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: clamp(22px, 4vw, 34px);
    background:
        linear-gradient(145deg, rgba(255,255,255,.98), rgba(251,252,248,.96)),
        radial-gradient(circle at 94% 10%, rgba(40, 170, 160, .13), transparent 32%);
}
.first-run-main h2,
.first-run-main p,
.first-run-note h2,
.first-run-note p {
    margin-bottom: 0;
}
.first-run-main.first-run-hero {
    min-height: 210px;
    border-color: rgba(40, 170, 160, .22);
    background:
        radial-gradient(circle at 94% 18%, rgba(40, 170, 160, .13), transparent 30%),
        linear-gradient(135deg, #ffffff, #f7fcfb);
    box-shadow: 0 18px 42px rgba(29, 39, 77, .08);
}
.first-run-main.first-run-hero h2 {
    max-width: 760px;
    font-size: clamp(2rem, 4vw, 3.3rem);
    line-height: 1.03;
}
.first-run-main.first-run-hero p:not(.eyebrow) {
    max-width: 720px;
    color: var(--muted);
    font-size: 1.05rem;
}
.first-run-main.first-run-hero .button {
    min-width: 230px;
    min-height: 54px;
}
.first-run-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
.first-run-steps article {
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: white;
    box-shadow: 0 10px 24px rgba(29, 39, 77, .05);
}
.first-run-steps span {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: #e7f6f4;
    color: var(--green);
    font-weight: 950;
    margin-bottom: 10px;
}
.first-run-steps strong {
    display: block;
    color: var(--navy);
    font-size: 1.05rem;
    margin-bottom: 6px;
}
.first-run-steps p {
    margin: 0;
    color: var(--muted);
}
.inline-child-create {
    display: grid;
    gap: 18px;
    padding-top: 4px;
    scroll-margin-top: 90px;
}
.inline-child-create .child-setup-hero {
    margin-top: 0;
}
.parent-dashboard-head {
    align-items: center;
}
.parent-child-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.parent-action-grid {
    grid-template-columns: 1fr;
}
.parent-action-list {
    display: grid;
    gap: 14px;
}
.parent-action-child-group {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid rgba(226, 230, 220, .98);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.96), rgba(251,252,248,.94)),
        radial-gradient(circle at 100% 0%, rgba(40, 170, 160, .10), transparent 30%);
    box-shadow: 0 10px 24px rgba(29, 39, 77, .045);
}
.parent-action-child-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
}
.parent-action-child-head .child-title {
    gap: 10px;
}

.today-family-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr);
    gap: 18px;
    margin-bottom: 22px;
    align-items: start;
}
.today-family-main,
.today-family-side,
.family-week-strip {
    background: linear-gradient(145deg, #ffffff, #fbfcf8);
}
.today-family-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 16px 0;
}
.today-family-metrics span,
.family-week-grid article,
.shared-theme-card,
.parent-language-card {
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .82);
}
.today-family-metrics strong {
    display: block;
    color: var(--green);
    font-size: 1.55rem;
    line-height: 1;
}
.today-item-list {
    display: grid;
    gap: 10px;
}
.today-item-row {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 130px minmax(180px, .9fr) auto auto;
    gap: 10px;
    align-items: end;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}
.today-item-row.done {
    border-color: rgba(40, 170, 160, .32);
    background: #f5fbf9;
}
.today-item-row.skipped {
    border-color: rgba(233, 143, 72, .36);
    background: #fffaf0;
}
.today-item-row strong,
.family-week-grid strong,
.shared-theme-card strong,
.parent-language-card strong {
    display: block;
    color: var(--navy);
}
.today-item-row small,
.shared-theme-card small,
.parent-language-card p,
.family-week-grid small,
.family-week-grid span {
    color: var(--muted);
    font-weight: 750;
}
.today-item-row label span {
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 900;
    text-transform: uppercase;
}
.today-item-row select,
.today-item-row input {
    min-height: 40px;
    padding: 8px 10px;
}
.today-trace-check {
    align-self: center;
    white-space: nowrap;
}
.today-family-side {
    display: grid;
    gap: 12px;
}
.parent-language-card p {
    margin: 6px 0 0;
}
.family-command-center {
    display: grid;
    gap: 18px;
    margin-bottom: 22px;
    padding: 24px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.98), rgba(249,253,251,.96)),
        radial-gradient(circle at 100% 0%, rgba(40,170,160,.13), transparent 30%),
        radial-gradient(circle at 0% 100%, rgba(255,177,63,.12), transparent 28%);
}
.command-center-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: start;
}
.command-center-head h2,
.command-center-head p,
.command-focus-card h3,
.command-adapt-card h3,
.command-create-card h3 {
    margin-bottom: 0;
}
.command-center-head p {
    max-width: 820px;
    color: var(--muted);
    font-weight: 760;
}
.day-load-pill {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    padding: 8px 13px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: white;
    color: var(--muted);
    font-weight: 950;
    white-space: nowrap;
}
.day-load-pill.light {
    color: var(--green);
    background: #eefafa;
    border-color: #c8e9e5;
}
.day-load-pill.busy {
    color: #8a6310;
    background: #fff8ea;
    border-color: #f0d4a3;
}
.command-center-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(260px, .85fr) minmax(240px, .75fr);
    gap: 14px;
}
.command-focus-card,
.command-adapt-card,
.command-create-card,
.today-activities-panel {
    display: grid;
    gap: 14px;
    padding: 18px;
    border: 1px solid rgba(226,230,220,.96);
    border-radius: 8px;
    background: rgba(255,255,255,.82);
    box-shadow: 0 14px 34px rgba(29,39,77,.055);
}
.command-focus-card {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    background:
        linear-gradient(135deg, rgba(255,255,255,.95), rgba(244,252,250,.94)),
        radial-gradient(circle at 100% 0%, rgba(40,170,160,.13), transparent 34%);
}
.command-card-label {
    color: var(--green);
    font-size: .78rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.command-focus-card p,
.command-adapt-card p {
    margin: 8px 0 0;
    color: var(--muted);
    font-weight: 760;
}
.command-focus-actions,
.command-quick-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.command-adapt-card form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: end;
}
.command-adapt-card select {
    min-height: 44px;
}
.command-quick-links {
    display: grid;
}
.command-quick-links a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcf8;
    color: var(--navy);
    font-weight: 900;
    text-decoration: none;
}
.command-quick-links a:hover {
    border-color: #bfe7e3;
    color: var(--green);
}
.command-metrics-row,
.command-child-strip {
    display: grid;
    gap: 10px;
}
.command-metrics-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.command-child-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.command-metrics-row span,
.command-child-strip article {
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255,255,255,.78);
}
.command-metrics-row strong {
    display: block;
    color: var(--green);
    font-size: 1.55rem;
    line-height: 1;
}
.command-child-strip strong,
.command-child-strip span,
.command-child-strip small {
    display: block;
}
.command-child-strip span,
.command-child-strip small {
    color: var(--muted);
    font-weight: 780;
}
.today-activities-panel {
    scroll-margin-top: 96px;
}
.empty-soft-state {
    padding: 18px;
    border: 1px dashed rgba(40, 170, 160, .35);
    border-radius: 8px;
    background: #f7fcfb;
}
.empty-soft-state p {
    margin: 6px 0 0;
    color: var(--muted);
}
.family-week-strip {
    margin-bottom: 22px;
}
.family-week-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}
.weekly-family-setup {
    grid-template-columns: minmax(0, 1fr) minmax(240px, .45fr) auto;
}
.weekly-setup-fields {
    display: grid;
    grid-template-columns: 220px minmax(260px, 1fr);
    gap: 12px;
    align-items: end;
}
.weekly-materials {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding-top: 4px;
}
.weekly-materials > span {
    width: 100%;
    color: var(--muted);
    font-size: .82rem;
    font-weight: 900;
    text-transform: uppercase;
}
.weekly-family-principle {
    padding: 12px;
    border: 1px solid rgba(40, 170, 160, .18);
    border-radius: 8px;
    background: #f7fcfb;
}
.weekly-family-principle span,
.weekly-family-principle small {
    display: block;
    color: var(--muted);
    font-weight: 750;
}
.weekly-parent-cues {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.weekly-parent-cues span {
    padding: 4px 7px;
    border-radius: 999px;
    background: #f4f0e8;
    color: var(--muted);
    font-size: .74rem;
    font-weight: 900;
}

@media (max-width: 980px) {
    .today-family-shell,
    .command-center-grid,
    .weekly-family-setup,
    .weekly-setup-fields {
        grid-template-columns: 1fr;
    }
    .command-center-head,
    .command-focus-card {
        display: grid;
        grid-template-columns: 1fr;
    }
    .command-metrics-row,
    .command-child-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .today-item-row {
        grid-template-columns: 1fr;
    }
    .family-week-grid,
    .today-family-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .library-resource-grid {
        grid-template-columns: 1fr;
    }
    .library-private-item {
        grid-template-columns: 1fr;
        align-items: stretch;
    }
    .library-private-item .button {
        width: 100%;
        justify-content: center;
    }
    .library-mini-list {
        grid-template-columns: 1fr;
    }
    .library-filter-form,
    .library-collection-strip {
        grid-template-columns: 1fr 1fr;
    }
    .public-home-hero,
    .public-value-grid,
    .public-fit-grid,
    .public-trust-band,
    .report-insight-grid,
    .create-per-columns,
    .real-day-adapter form {
        grid-template-columns: 1fr;
    }
    .public-trust-band {
        display: grid;
    }
    .library-add-week-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .library-add-week-form label:nth-of-type(3) {
        grid-column: 1 / -1;
    }
    .library-add-week-form .button {
        grid-column: 1 / -1;
        width: 100%;
    }
    .library-modal-main {
        grid-template-columns: 1fr;
    }
    .library-modal-actions {
        position: static;
    }
    .create-ai-shell,
    .create-ai-modal-card,
    .create-ai-save,
    .create-save-grid {
        grid-template-columns: 1fr;
        align-items: stretch;
    }
    .create-completion-card {
        flex-direction: column;
        align-items: stretch;
    }
    .discovery-composer-note {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 640px) {
    .parent-help-bubble {
        right: max(6px, env(safe-area-inset-right));
        bottom: max(8px, env(safe-area-inset-bottom));
        width: 92px;
        height: 92px;
    }
    .parent-help-bubble-button {
        width: 92px;
        height: 92px;
    }
    .parent-help-bubble-panel {
        right: 0;
        bottom: calc(100% + 8px);
        width: calc(100vw - 16px);
        height: min(620px, calc(100vh - 112px));
        max-height: min(620px, calc(100vh - 112px));
    }
    .parent-help-search {
        grid-template-columns: 1fr;
    }
    .parent-help-search .button {
        width: 100%;
    }
    .family-week-grid,
    .today-family-metrics,
    .command-metrics-row,
    .command-child-strip,
    .command-adapt-card form {
        grid-template-columns: 1fr;
    }
    .family-command-center {
        padding: 16px;
    }
    .library-resource-card {
        padding: 16px;
    }
    .library-resource-top,
    .library-resource-meta {
        display: grid;
        justify-content: initial;
    }
    .library-resource-status {
        width: fit-content;
    }
    .library-add-week-form {
        grid-template-columns: 1fr;
    }
    .library-add-week-form label:nth-of-type(3) {
        grid-column: auto;
    }
    .library-filter-form,
    .library-collection-strip,
    .library-entry-note,
    .library-mini-list,
    .library-used-form {
        grid-template-columns: 1fr;
    }
    .library-entry-note .button-row {
        justify-content: stretch;
    }
    .library-filter-actions {
        display: grid;
    }
    .library-compact-item {
        grid-template-columns: 1fr;
    }
    .school-year-command,
    .school-year-top-grid,
    .school-year-report-grid,
    .school-year-objective {
        grid-template-columns: 1fr;
    }
    .school-year-status-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .school-year-progress-form {
        grid-template-columns: 1fr;
    }
    .library-detail-card {
        width: 100%;
        max-height: calc(100vh - 20px);
        padding: 20px;
    }
    .library-edit-resource-form,
    .library-modal-form {
        grid-template-columns: 1fr;
    }
    .library-placement-period {
        grid-template-columns: 1fr;
    }
    .create-ai-modal {
        padding: 10px;
    }
    .create-ai-modal-card {
        max-height: calc(100vh - 20px);
        padding: 14px;
    }
}
.parent-action-child-head .child-avatar {
    width: 42px;
    height: 42px;
}
.parent-action-child-head strong {
    color: var(--navy);
    font-size: 1.05rem;
}
.parent-action-child-head > span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #edf8f6;
    color: var(--green);
    font-weight: 900;
}
.parent-action-child-links {
    display: grid;
    gap: 8px;
}
.parent-action-list a {
    display: grid;
    gap: 4px;
    padding: 13px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .84);
    text-decoration: none;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.parent-action-list a:hover {
    transform: translateY(-1px);
    border-color: rgba(40, 170, 160, .38);
    box-shadow: 0 10px 22px rgba(29, 39, 77, .06);
}
.parent-action-list strong {
    color: var(--navy);
}
.parent-action-list span {
    color: var(--muted);
    font-weight: 650;
}
.premium-discovery-strip.subtle {
    margin-top: 0;
    background: #fbfcf8;
    box-shadow: none;
}
.exercise-summary-list {
    display: grid;
    gap: 10px;
}
.exercise-summary-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .86);
    overflow: hidden;
}
.exercise-summary-card summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
}
.exercise-summary-card summary::-webkit-details-marker {
    display: none;
}
.exercise-summary-card summary::before {
    content: "+";
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: #edf8f6;
    color: var(--teal);
    font-weight: 900;
}
.exercise-summary-card[open] summary::before {
    content: "−";
}
.exercise-summary-card summary > span:first-of-type {
    display: grid;
    gap: 3px;
    min-width: 0;
    flex: 1;
}
.exercise-summary-card strong {
    color: var(--navy);
}
.exercise-summary-card small {
    color: var(--muted);
    font-weight: 700;
}
.exercise-summary-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-weight: 800;
    white-space: nowrap;
}
.exercise-summary-meta b,
.exercise-summary-meta em {
    border-radius: 999px;
    padding: 5px 9px;
    font-style: normal;
}
.exercise-summary-meta b {
    background: #f4f0e8;
    color: var(--brown);
}
.exercise-summary-meta em.success {
    background: #edf8f6;
    color: var(--green);
}
.exercise-summary-meta em.review {
    background: #fff2df;
    color: #9b6510;
}
.exercise-summary-details {
    display: grid;
    gap: 0;
    padding: 0 16px 12px 52px;
}
.exercise-summary-details p {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    padding: 9px 0;
    border-top: 1px solid var(--line);
}
.exercise-summary-details span,
.exercise-summary-details small {
    color: var(--muted);
}

@media (max-width: 900px) {
    body.nav-open {
        overflow: hidden;
    }
    .topbar,
    .child-topbar {
        align-items: center;
        gap: 12px;
    }
    .topbar .brand,
    .child-topbar .brand {
        min-width: 0;
    }
    .nav-toggle {
        display: inline-flex;
        position: relative;
        z-index: 120;
    }
    .topbar > .nav,
    .child-topbar > .nav {
        position: fixed;
        top: 14px;
        right: 14px;
        bottom: 14px;
        z-index: 110;
        width: min(390px, calc(100vw - 28px));
        display: grid;
        align-content: start;
        gap: 6px;
        padding: 86px 16px 18px;
        overflow-y: auto;
        border: 1px solid rgba(40, 170, 160, .20);
        border-radius: 18px;
        background:
            linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(247, 252, 251, .98)),
            #fff;
        box-shadow: 0 28px 70px rgba(29, 39, 77, .22);
        transform: translateX(calc(100% + 32px));
        opacity: 0;
        pointer-events: none;
        transition: transform .22s ease, opacity .18s ease;
    }
    .topbar > .nav.is-open,
    .child-topbar > .nav.is-open {
        transform: translateX(0);
        opacity: 1;
        pointer-events: auto;
    }
    .topbar > .nav::before,
    .child-topbar > .nav::before {
        content: "Navigation";
        position: absolute;
        left: 18px;
        top: 22px;
        color: var(--green);
        font-size: .78rem;
        font-weight: 950;
        letter-spacing: .08em;
        text-transform: uppercase;
    }
    .topbar > .nav a,
    .topbar > .nav .link-button,
    .topbar > .nav .nav-dropdown-trigger,
    .child-topbar > .nav a,
    .child-topbar > .nav .link-button,
    .child-topbar > .nav .nav-dropdown-trigger {
        width: 100%;
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 14px;
        border: 1px solid rgba(29, 39, 77, .08);
        border-radius: 12px;
        background: rgba(255, 255, 255, .78);
        color: var(--navy);
        font-weight: 850;
    }
    .topbar > .nav a.is-active,
    .topbar > .nav .nav-dropdown-trigger.is-active,
    .child-topbar > .nav a.is-active,
    .child-topbar > .nav .nav-dropdown-trigger.is-active {
        border-color: rgba(40, 170, 160, .28);
        background: linear-gradient(135deg, rgba(40, 170, 160, .12), rgba(255, 255, 255, .86));
        color: var(--green);
    }
    .topbar > .nav .button.primary,
    .child-topbar > .nav .button.primary {
        justify-content: center;
        border-color: transparent;
        color: #fff;
    }
    .topbar > .nav .nav-dropdown,
    .child-topbar > .nav .nav-dropdown {
        width: 100%;
        padding: 0;
    }
    .topbar > .nav .nav-dropdown::before,
    .child-topbar > .nav .nav-dropdown::before {
        display: none;
    }
    .topbar > .nav .nav-dropdown-menu,
    .child-topbar > .nav .nav-dropdown-menu {
        position: static;
        min-width: 0;
        margin: 6px 0 8px;
        padding: 8px;
        border-radius: 12px;
        box-shadow: none;
        background: rgba(251, 250, 246, .85);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        display: none;
    }
    .topbar > .nav .nav-dropdown.is-open .nav-dropdown-menu,
    .topbar > .nav .nav-dropdown:focus-within .nav-dropdown-menu,
    .child-topbar > .nav .nav-dropdown.is-open .nav-dropdown-menu,
    .child-topbar > .nav .nav-dropdown:focus-within .nav-dropdown-menu {
        display: grid;
    }
    .topbar > .nav .nav-dropdown-menu a,
    .child-topbar > .nav .nav-dropdown-menu a {
        min-height: 42px;
        border: 0;
        background: transparent;
        font-weight: 780;
    }
    .topbar > .nav .logout-icon-form,
    .child-topbar > .nav .logout-icon-form {
        width: 100%;
    }
    .topbar > .nav .nav-icon-button,
    .child-topbar > .nav .nav-icon-button {
        width: 100%;
        height: 48px;
        border-radius: 12px;
    }
    .topbar > .nav .nav-icon-button svg,
    .child-topbar > .nav .nav-icon-button svg {
        width: 21px;
        height: 21px;
    }
    .cards-grid, .dashboard-grid, .child-actions { grid-template-columns: 1fr; }
    .subscription-plan-card.free-plan-card {
        grid-template-columns: 1fr;
        grid-template-areas:
            "head"
            "price"
            "features"
            "action";
        padding: 22px;
    }
    .subscription-plan-card.free-plan-card .subscription-feature-list {
        grid-template-columns: 1fr;
        padding-right: 0;
        border-right: 0;
    }
    .subscription-plan-card.free-plan-card .plan-card-head {
        grid-template-columns: 1fr;
        padding-right: 0;
    }
    .subscription-plan-card.free-plan-card .plan-price-block {
        align-self: stretch;
    }
    .subscription-plan-card.free-plan-card .price {
        font-size: 2.25rem;
    }
    .page-head { display: grid; align-items: start; }
    .form-grid, .objective-card, .inline-form, .reward-hero, .reward-principles, .reward-card-body, .reward-mode-grid, .premium-preview-gate, .reward-preview-gate, .premium-discovery-strip, .premium-discovery-grid, .auth-onboarding, .two-column-fields, .three-column-fields, .child-setup-hero, .setup-panel, .setup-fields, .setup-choice-grid, .pedagogical-start-grid, .child-login-preview, .first-run-main, .first-run-steps, .parent-action-grid, .per-link-intro, .per-suggestion-card, .quick-balance-grid, .per-action-grid, .legal-layout { grid-template-columns: 1fr; }
    .public-footer { align-items: flex-start; flex-direction: column; }
    .public-hero, .subscription-hero, .plan-choice-focus, .subscription-proof-grid, .subscription-reassurance, .commercial-reassurance-strip, .inline-admin-form, .permission-grid, .settings-form, .settings-grid, .settings-overview, .settings-insights, .ai-security-grid, .ai-provider-grid, .ai-provider-main, .ai-provider-controls, .ai-inline-fields, .ai-routing-grid, .ai-task-routing, .ai-cost-grid, .ai-consumption-lead, .ai-consumption-overview, .ai-provider-consumption-grid, .ai-provider-chip-grid, .ai-risk-grid, .ai-real-cost-form, .ai-real-cost-fields, .create-flow-grid, .create-scope-duration, .suggestion-family-grid, .suggestion-form-card, .admin-suggestion-card, .content-editor-tabs, .content-editor-shell, .content-field-grid, .email-admin-layout, .email-test-form, .email-preview-grid, .stats-filter-bar, .stats-hero-grid, .stats-kpi-grid, .stats-section-grid, .stats-section-grid.three, .plan-admin-grid, .plan-admin-fields, .admin-cockpit, .cockpit-search, .cockpit-kpis, .risk-grid, .family-profile-grid, .family-profile-columns, .billing-grid, .search-results-grid, .support-admin-grid, .global-search-panel, .admin-filter-bar, .admin-users-overview, .admin-user-fields, .per-bulk-toolbar, .admin-reward-overview, .admin-reward-card, .reward-editor-head, .reward-editor-head > div, .reward-editor-grid, .badge-preview-grid, .reward-visibility-checks, .parent-earned-badge-grid, .reward-manual-award, .reward-award-inline, .report-identity-card, .report-summary-grid { grid-template-columns: 1fr; }
    .quick-grid { grid-template-columns: repeat(2, 1fr); }
    .duration-unit-field { grid-template-columns: 1fr; }
    .project-subject-grid { grid-template-columns: 1fr; }
    .quick-balance-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .quick-balance-objectives p { grid-template-columns: 1fr; }
    .quick-balance-objectives small { grid-column: 1; }
    .balance-status { grid-row: auto; justify-self: start; }
    .tagline { letter-spacing: .14em; }
    .brand-cluster { width: auto; flex: 1 1 auto; justify-content: flex-start; gap: 12px; min-width: 0; }
    .brand-ai-credits { min-width: 128px; max-width: 148px; }
    .brand span { display: none; }
    .brand-logo { width: 198px; height: 68px; }
    .topbar, .child-topbar { padding-top: 10px; padding-bottom: 10px; }
    .support-alert-card, .support-parent-hero, .upgrade-trial-hero, .reactivation-note, .ticket-card-head, .ticket-wide-head, .ticket-actions-panel, .access-card-head, .family-profile-hero, .profile-row, .search-result-row { display: grid; }
    .report-header, .report-brand-block, .report-actions { display: grid; justify-content: stretch; grid-template-columns: 1fr; }
    .report-header { padding: 20px; }
    .report-logo { max-width: 180px; width: 58%; }
    .settings-card-head, .settings-savebar, .admin-security-card { display: grid; }
    .ai-route-row.compact, .ai-cost-grid label { grid-template-columns: 1fr; }
    .create-flow-title,
    .create-flow-submit {
        display: grid;
    }
    .create-submit-note {
        max-width: none;
    }
    .create-flow-submit .button {
        width: 100%;
        min-width: 0;
    }
    .content-preview-panel { position: static; }
    .content-editor-head { display: grid; }
    .admin-user-head { display: grid; }
    .admin-user-family { grid-column: auto; }
    .admin-user-delete { position: static; }
    .admin-user-card { padding-right: 18px; }
    .admin-user-toggle { position: static; justify-self: end; order: -1; }
    .admin-user-card:has(.admin-user-delete) .admin-user-actions { padding-right: 0; }
    .security-badges { justify-content: flex-start; }
    .access-meta { justify-items: stretch; min-width: 0; }
    .ticket-reply-form .button, .ticket-close-form .button { justify-self: stretch; width: 100%; }
    .per-link-helper-head { display: grid; }
    .per-template-row { justify-content: flex-start; }
    .auth-panel-wide {
        width: min(100%, calc(100vw - 20px));
        padding: 12px;
    }
    .auth-onboarding-copy {
        position: static;
        padding: 18px;
    }
    .auth-onboarding-copy h1 {
        font-size: clamp(1.55rem, 8vw, 2.1rem);
    }
    .auth-onboarding-copy p {
        font-size: .95rem;
    }
    .register-premium-form {
        padding: 18px;
    }
    .form-section-title h2 {
        font-size: 1.35rem;
    }
    .setup-fields.compact, .setup-choice-grid, .pedagogical-start-card { grid-column: auto; }
    .avatar-choice-row {
        grid-template-columns: 1fr;
        align-items: stretch;
    }
    .avatar-preview-field {
        justify-items: start;
    }
    .setup-submit-bar, .onboarding-dashboard-card { display: grid; }
    .auth-choice-grid { grid-template-columns: 1fr; }
    .onboarding-dashboard-actions { justify-content: stretch; }
.onboarding-dashboard-actions .button { width: 100%; }
}

.plan-emotion-icon {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-right: 8px;
    border-radius: 999px;
    background: #f3fbf7;
    vertical-align: middle;
    font-size: 1.1rem;
}
.plan-emotional-line {
    margin: 4px 0 0;
    color: var(--green);
    font-weight: 850;
}
.annual-saving-card {
    display: grid;
    gap: 4px;
    align-self: center;
    min-width: 220px;
    padding: 16px;
    border: 1px solid rgba(40, 170, 160, .22);
    border-radius: 8px;
    background: #f3fbf7;
    color: var(--ink);
    box-shadow: 0 12px 26px rgba(29, 39, 77, .06);
}
.annual-saving-card strong,
.annual-saving-line strong {
    color: var(--green);
}
.annual-saving-card span,
.annual-saving-line span {
    color: var(--muted);
}
.annual-saving-line {
    display: grid;
    gap: 3px;
    margin: 8px 0 12px;
    padding: 10px 12px;
    border: 1px solid rgba(40, 170, 160, .18);
    border-radius: 8px;
    background: #f7fcfa;
    font-size: .92rem;
}
.annual-saving-mini {
    display: block;
    margin-top: 8px;
    color: var(--green) !important;
    font-weight: 850;
}
.commercial-reassurance-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: -8px 0 24px;
}
.commercial-reassurance-strip article {
    display: grid;
    gap: 4px;
    padding: 16px 18px;
    border: 1px solid rgba(40, 170, 160, .20);
    border-radius: 8px;
    background: linear-gradient(135deg, #ffffff, #f7fbfa);
    box-shadow: 0 12px 28px rgba(29, 39, 77, .06);
}
.commercial-reassurance-strip strong {
    color: var(--navy);
    font-size: 1rem;
}
.commercial-reassurance-strip span {
    color: var(--muted);
    font-weight: 650;
}
.subscription-policy-strip {
    margin-top: -6px;
}
.subscription-cancel-note {
    margin: 10px 0 6px;
    padding: 10px 12px;
    border: 1px solid rgba(40, 170, 160, .18);
    border-radius: 8px;
    background: #f7fbfa;
    color: var(--muted);
    font-size: .92rem;
    font-weight: 750;
}
.subscription-cancel-note.free-note {
    margin-top: 6px;
    background: #ffffff;
}
.subscription-plan-card.free-plan-card .subscription-cancel-note.free-note {
    margin-top: 18px;
    line-height: 1.45;
}
.plan-action-zone {
    display: grid;
    gap: 10px;
    align-self: end;
    min-width: 0;
}
.subscription-plan-card.free-plan-card .plan-action-zone {
    grid-area: action;
    align-self: start;
}
.subscription-plan-card.free-plan-card .downgrade-form {
    padding: 0;
    border: 0;
    background: transparent;
}
.subscription-plan-card.free-plan-card .downgrade-form .button {
    width: 100%;
    min-height: 48px;
    padding-inline: 16px;
    white-space: normal;
    line-height: 1.15;
}
.subscription-feature-list li {
    display: grid;
    gap: 3px;
}
.subscription-feature-list small {
    color: var(--muted);
    font-weight: 550;
}
.oyani-experience-band,
.oyani-parent-companion {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 22px 0;
}
.oyani-experience-band article,
.oyani-companion-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 16px;
    padding: 22px;
    border: 1px solid rgba(226, 230, 220, .96);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(252, 249, 241, .92)),
        radial-gradient(circle at 95% 12%, rgba(40, 170, 160, .12), transparent 34%);
    box-shadow: 0 16px 34px rgba(29, 39, 77, .07);
}
.experience-icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 18px;
    background: #ecf8f5;
    font-size: 1.45rem;
}
.oyani-companion-card {
    grid-template-columns: 1fr;
}
.oyani-companion-copy p:last-child {
    margin-bottom: 0;
    color: var(--muted);
}
.wellbeing-action-grid,
.adaptation-mode-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}
.wellbeing-action-grid span,
.adaptation-mode-grid span {
    display: grid;
    gap: 3px;
    min-height: 68px;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .76);
    font-weight: 850;
}
.adaptation-mode-grid small {
    color: var(--muted);
    font-weight: 600;
}
.mascot-strategy {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 22px;
}
.mascot-strategy article {
    padding: 16px;
    border: 1px solid rgba(226, 230, 220, .96);
    border-radius: 8px;
    background: #ffffff;
    color: var(--muted);
    font-weight: 700;
    box-shadow: 0 12px 28px rgba(29, 39, 77, .06);
}
.oyani-component-list {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}
.oyani-component-list span {
    padding: 9px 11px;
    border: 1px solid rgba(40, 170, 160, .18);
    border-radius: 999px;
    background: #f3fbf7;
    color: var(--ink);
    font-weight: 850;
}
.mascot-rules {
    display: grid;
    gap: 10px;
}
.mascot-rules p {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    gap: 10px;
    margin: 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcf8;
}
.mascot-rules span {
    color: var(--muted);
}
.mascot-admin-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.mascot-admin-card {
    position: relative;
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid rgba(226, 230, 220, .96);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 14px 32px rgba(29, 39, 77, .07);
}
.mascot-preview {
    display: grid;
    place-items: center;
    min-height: 190px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background:
        linear-gradient(45deg, #f6f4ef 25%, transparent 25%),
        linear-gradient(-45deg, #f6f4ef 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #f6f4ef 75%),
        linear-gradient(-45deg, transparent 75%, #f6f4ef 75%),
        #fffdfa;
    background-size: 22px 22px;
    background-position: 0 0, 0 11px, 11px -11px, -11px 0;
    overflow: hidden;
}
.mascot-preview img {
    max-width: 100%;
    max-height: 210px;
    object-fit: contain;
}
.mascot-admin-card .full,
.mascot-edit-form .full {
    grid-column: 1 / -1;
}
.mascot-delete-form {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    margin: 0;
}
.mascot-delete-button {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(204, 53, 53, .22);
    border-radius: 50%;
    background: #fff2f2;
    color: #b42318;
    font-size: 1.35rem;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(180, 35, 24, .12);
}
.mascot-delete-button:hover {
    background: #b42318;
    color: white;
}
.mascot-card-summary {
    display: grid;
    gap: 10px;
}
.mascot-card-summary h3,
.mascot-card-summary p {
    margin-bottom: 0;
}
.mascot-card-summary p {
    color: var(--muted);
}
.mascot-card-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.mascot-card-badges span {
    padding: 6px 9px;
    border-radius: 999px;
    background: #f3fbf7;
    color: var(--green);
    font-size: .78rem;
    font-weight: 900;
}
.mascot-details {
    border-top: 1px solid var(--line);
    padding-top: 10px;
}
.mascot-details summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    color: var(--ink);
    font-weight: 900;
    list-style: none;
}
.mascot-details summary::-webkit-details-marker {
    display: none;
}
.mascot-details summary::after {
    content: "";
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .16s ease;
}
.mascot-details[open] summary::after {
    transform: translateY(3px) rotate(225deg);
}
.mascot-edit-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}
.features-hero,
.features-close {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, .34fr);
    gap: 22px;
    align-items: end;
    margin-bottom: 28px;
    padding: 30px;
    border: 1px solid rgba(226, 230, 220, .96);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(252, 249, 241, .94)),
        radial-gradient(circle at 92% 10%, rgba(40, 170, 160, .13), transparent 28%);
    box-shadow: 0 18px 44px rgba(29, 39, 77, .08);
}
.features-hero h1 {
    max-width: 900px;
    font-size: clamp(2rem, 4vw, 3rem);
}
.features-hero-note {
    display: grid;
    gap: 6px;
    padding: 16px;
    border: 1px solid rgba(40, 170, 160, .22);
    border-radius: 8px;
    background: #f3fbf7;
}
.features-hero-note span,
.feature-category-card p,
.features-close p {
    color: var(--muted);
}
.features-plan-section {
    display: grid;
    gap: 18px;
    margin: 28px 0;
}
.features-plan-head {
    display: flex;
    gap: 14px;
    align-items: start;
    padding: 22px;
    border: 1px solid rgba(226, 230, 220, .96);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 14px 32px rgba(29, 39, 77, .06);
}
.features-plan-head h2,
.features-plan-head p {
    margin-bottom: 0;
}
.feature-category-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.feature-category-card {
    display: grid;
    align-content: start;
    gap: 10px;
    min-height: 100%;
    padding: 20px;
    border: 1px solid rgba(226, 230, 220, .96);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(29, 39, 77, .055);
}
.feature-category-card h3,
.feature-category-card p {
    margin-bottom: 0;
}
.feature-category-card ul {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.feature-category-card li {
    position: relative;
    padding-left: 18px;
    color: var(--ink);
    font-weight: 650;
}
.feature-category-card li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .72em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
}
.highlighted-feature {
    grid-column: span 2;
    background:
        linear-gradient(135deg, #ffffff, #fbfcf8),
        radial-gradient(circle at 95% 8%, rgba(242, 178, 60, .18), transparent 34%);
}
.features-close {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    margin-top: 34px;
}
.features-close h2 {
    font-size: clamp(1.7rem, 3vw, 2.4rem);
}

.pedagogy-head {
    align-items: center;
}
.pedagogy-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}
.pedagogy-stat-card {
    min-height: 132px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: linear-gradient(145deg, #ffffff, #fbfcf8);
    box-shadow: 0 12px 28px rgba(29, 39, 77, .055);
    display: grid;
    align-content: space-between;
    gap: 8px;
}
.pedagogy-stat-card span,
.pedagogy-stat-card small {
    color: var(--muted);
    font-weight: 800;
}
.pedagogy-stat-card strong {
    color: var(--navy);
    font-size: 2.15rem;
    line-height: 1;
}
.pedagogy-stat-card.published {
    background: linear-gradient(145deg, #ffffff, #eef8f1);
}
.pedagogy-stat-card.review,
.pedagogy-stat-card.attention {
    background: linear-gradient(145deg, #ffffff, #fff8ea);
}
.stat-card-link {
    justify-self: start;
    padding: 7px 10px;
    border: 1px solid rgba(240, 212, 163, .95);
    border-radius: 999px;
    background: #fff;
    color: #8a6310;
    font-size: .82rem;
    font-weight: 900;
    text-decoration: none;
}
.stat-card-link:hover {
    background: #fff3d8;
}
.pedagogy-guide {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;
}
.pedagogy-guide p,
.pedagogy-guide h2 {
    margin-bottom: 0;
}
.pedagogy-flow {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}
.pedagogy-flow span {
    padding: 9px 12px;
    border-radius: 999px;
    background: #edf5f2;
    color: var(--green);
    font-weight: 900;
}
.pedagogy-filter-panel {
    margin-bottom: 22px;
}
.pedagogy-filters {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
    align-items: end;
    gap: 12px;
}
.section-title-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: start;
    margin-bottom: 16px;
}
.section-title-row p,
.section-title-row h2 {
    margin-bottom: 0;
}
.table-scroll {
    overflow-x: auto;
}
.per-bulk-toolbar {
    display: grid;
    grid-template-columns: minmax(230px, .9fr) minmax(220px, .8fr) minmax(0, 1.3fr);
    gap: 12px;
    align-items: end;
    margin: 0 0 16px;
    padding: 14px;
    border: 1px solid rgba(40, 170, 160, .22);
    border-radius: 8px;
    background:
        linear-gradient(135deg, #ffffff, #fbfffd),
        radial-gradient(circle at 0% 0%, rgba(40, 170, 160, .12), transparent 34%);
    box-shadow: 0 12px 28px rgba(29, 39, 77, .06);
}
.per-bulk-toolbar small {
    grid-column: 1 / -1;
    color: var(--muted);
    font-weight: 760;
}
.pedagogy-visibility-panel {
    margin-bottom: 20px;
    background:
        linear-gradient(135deg, #ffffff, #f7fcfb),
        radial-gradient(circle at 100% 0%, rgba(40, 170, 160, .12), transparent 32%);
}
.pedagogy-visibility-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    align-items: end;
    padding: 14px;
    border: 1px solid rgba(40, 170, 160, .20);
    border-radius: 8px;
    background: rgba(255, 255, 255, .74);
}
.pedagogy-visibility-form label {
    margin: 0;
    color: var(--muted);
    font-size: .86rem;
    font-weight: 900;
}
.pedagogy-visibility-form .full {
    grid-column: 1 / -1;
}
.pedagogy-visibility-form select,
.pedagogy-visibility-form input {
    width: 100%;
    margin-top: 5px;
}
.inline-range {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.pedagogy-visibility-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}
.pedagogy-visibility-list article {
    display: grid;
    gap: 5px;
    padding: 12px 14px;
    border: 1px solid rgba(29, 39, 77, .10);
    border-radius: 8px;
    background: #fff;
}
.pedagogy-visibility-list strong {
    color: var(--navy);
}
.pedagogy-visibility-list span,
.pedagogy-visibility-list small,
.pedagogy-visibility-list p {
    margin: 0;
    color: var(--muted);
    font-weight: 760;
}
.per-select-all {
    grid-template-columns: auto 1fr;
    align-items: center;
    color: var(--navy);
    font-weight: 900;
}
.per-select-all input,
.per-select-col input {
    width: 20px;
    height: 20px;
    accent-color: var(--green);
}
.per-bulk-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}
.per-select-col {
    width: 92px;
    min-width: 92px;
    text-align: center;
}
.pedagogy-table td:nth-child(2) {
    min-width: 310px;
}
.pedagogy-table td p,
.pedagogy-table td small {
    display: block;
    margin: 4px 0 0;
}
.pedagogy-objective-details {
    margin-top: 10px;
    border: 1px solid rgba(226, 230, 220, .9);
    border-radius: 8px;
    background: #fbfcf8;
}
.pedagogy-objective-details summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    padding: 9px 11px;
    color: var(--green);
    font-weight: 900;
    list-style: none;
}
.pedagogy-objective-details summary::-webkit-details-marker {
    display: none;
}
.pedagogy-objective-details summary::after {
    content: "\203A";
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: rgba(42, 174, 164, .12);
    color: var(--teal);
    font-size: 1.2rem;
    transition: transform .18s ease, background .18s ease;
}
.pedagogy-objective-details[open] summary::after {
    transform: rotate(90deg);
    background: rgba(42, 174, 164, .18);
}
.parent-objective-details {
    max-width: 760px;
}
.pedagogy-objective-details div {
    display: grid;
    gap: 10px;
    padding: 0 11px 11px;
}
.pedagogy-objective-details div p {
    margin: 0;
    color: var(--muted);
}
.pedagogy-link-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.pedagogy-link-chips span {
    padding: 6px 8px;
    border-radius: 8px;
    background: #fbfcf8;
    border: 1px solid var(--line);
    font-size: .84rem;
    font-weight: 850;
    color: var(--muted);
}
.status-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    min-width: 180px;
}
.review-hint {
    color: var(--muted);
    font-weight: 750;
}
.button.small {
    min-height: 38px;
    padding: 8px 12px;
}
.pedagogy-status-draft,
.pedagogy-status-submitted {
    background: #fff3d8;
    color: #8a6310;
}
.pedagogy-status-review {
    background: #e7f6f4;
    color: var(--green);
}
.pedagogy-status-published,
.pedagogy-status-approved {
    background: #eef8f1;
    color: #477064;
}
.pedagogy-status-archived,
.pedagogy-status-rejected {
    background: #f0f1ed;
    color: var(--muted);
}
.pedagogy-two-columns {
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
}
.proposal-list {
    display: grid;
    gap: 12px;
}
.proposal-card {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fbfcf8;
}
.proposal-card h3,
.proposal-card p {
    margin-bottom: 0;
}
.proposal-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: end;
}
.compact-list {
    display: grid;
    gap: 8px;
    margin-top: 8px;
}
.compact-list p {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
    padding: 8px 0;
    border-top: 1px solid var(--line);
}
.compact-list span {
    color: var(--muted);
    font-weight: 900;
}

@media (max-width: 900px) {
    .oyani-experience-band,
    .oyani-parent-companion,
    .mascot-strategy,
    .mascot-admin-grid,
    .mascot-edit-form,
    .features-hero,
    .feature-category-grid,
    .wellbeing-action-grid,
    .adaptation-mode-grid,
    .pedagogy-stats,
    .pedagogy-guide,
    .pedagogy-filters,
    .pedagogy-two-columns,
    .oyani-speech,
    .soft-session-hero,
    .child-day-hero,
    .child-training-hero,
    .child-training-grid,
    .soft-session-start-grid,
    .soft-session-room,
    .soft-session-companion,
    .child-progress-grid,
    .account-grid,
     .trial-choice-panel,
     .weekly-program-board,
    .weekly-note-panel,
    .weekly-track-row,
     .weekly-ai-actions,
     .weekly-ai-period-form,
     .weekly-report-row,
     .otp-hero,
     .otp-store-grid,
     .otp-setup-grid,
     .account-credits-hero,
     .credits-balance-grid,
     .credits-usage-guide,
     .credits-usage-grid,
     .credit-pack-grid,
     .credits-history-grid,
     .admin-credit-metrics {
         grid-template-columns: 1fr;
     }
     .credits-usage-grid article.wide {
         grid-column: auto;
     }
     .otp-store-grid {
         align-items: stretch;
     }
    .child-day-activities,
     .child-day-shortcuts,
     .child-training-card,
     .child-geography-visual-card,
     .child-math-topic-grid,
     .child-math-topic-card {
         grid-template-columns: 1fr;
     }
     .child-math-topic-title-row {
         align-items: flex-start;
     }
     .child-math-play-head {
         display: grid;
     }
     .child-math-series-result {
         grid-template-columns: 1fr;
     }
     .child-math-parent-grid {
         grid-template-columns: 1fr;
     }
     .child-french-series-reflection,
     .math-parent-control-grid,
     .french-parent-overview,
     .french-parent-overview-columns,
     .french-progress-grid,
     .french-progress-table,
     .french-weekly-bridge-grid,
     .french-history-insight-grid,
     .french-adaptation-approval,
     .child-math-parent-grid.detailed,
     .math-parent-topic-list,
     .french-admin-content-form,
     .french-admin-content-list,
     .geography-planning-strip,
     .geography-day-picker-form,
     .geography-admin-guide,
     .geography-admin-toolbar,
     .math-resource-grid,
     .math-history-filters,
     .math-history-list article {
         grid-template-columns: 1fr;
     }
     .french-priority-list article {
         grid-template-columns: 1fr;
     }
     .pedagogy-visibility-form,
     .pedagogy-visibility-list {
         grid-template-columns: 1fr;
     }
     .oyani-speech {
         align-items: start;
     }
     .oyani-speech-bubble::before {
         top: -8px;
         left: 34px;
         border-left: 1px solid var(--line);
         border-bottom: 0;
         border-top: 1px solid var(--line);
     }
     .otp-store-card,
     .panel-title-row {
         align-items: flex-start;
     }
     .weekly-summary-strip {
         grid-template-columns: repeat(2, minmax(0, 1fr));
     }
     .weekly-placement-controls {
         grid-template-columns: 1fr;
     }
     .weekly-custom-panel {
         position: static;
     }
    .weekly-save-actions,
    .weekly-table-tools {
        justify-content: stretch;
        align-items: stretch;
        flex-direction: column;
    }
    .weekly-save-actions .button,
    .weekly-table-tools .button {
        width: 100%;
    }
    .account-identity {
        align-items: flex-start;
    }
    .account-photo {
        width: 72px;
        height: 72px;
        border-radius: 20px;
    }
    .account-child-row,
    .account-child-password-fields,
    .account-child-password-compact {
        grid-template-columns: 1fr;
    }
    .account-child-password-compact .button {
        width: 100%;
    }
    .soft-session-mascot,
    .soft-session-companion img {
        width: 116px;
        height: 116px;
    }
    .soft-session-number-row {
        grid-template-columns: 1fr;
    }
    .oyani-experience-band article {
        grid-template-columns: 1fr;
    }
    .features-hero,
    .features-close,
    .features-plan-head,
    .feature-category-card {
        padding: 18px;
    }
    .highlighted-feature {
        grid-column: auto;
    }
}

@media print {
    body { background: white; }
    .print-hide { display: none; }
    .report-page { width: 100%; padding: 0; }
    .report-header,
    .report-identity-card div,
    .report-summary-grid article,
    .report-cp-note,
    .report-section {
        box-shadow: none;
        break-inside: avoid;
    }
    .report-header {
        grid-template-columns: 1fr;
        padding: 12mm 0 8mm;
        border-width: 0 0 1px;
        border-radius: 0;
        background: white;
    }
    .report-brand-block {
        grid-template-columns: 120px 1fr;
    }
    .report-logo {
        width: 108px;
    }
    .report-header h1 {
        font-size: 30pt;
    }
    .report-body { background: white; }
    .panel, .card { box-shadow: none; }
}