@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&display=swap');

:root {
    color-scheme: light;
    --ink: #18281a;
    --forest: #243d28;
    --sage: #3d6b47;
    --sage-m: #6a9e74;
    --sage-l: #c4ddc8;
    --sage-p: #eef5f0;
    --terra: #a0522d;
    --terra-l: #eeddd4;
    --gold: #c49a3c;
    --cream: #faf7f1;
    --cream-d: #ede7d9;
    --muted: #6b7c6b;
    --line: #ede7d9;
    --panel: #ffffff;
    --bg: #faf7f1;
    --accent: #3d6b47;
    --accent-2: #a0522d;
    --warm: #c49a3c;
    --danger: #a13b3b;
    --serif: 'Playfair Display', Georgia, serif;
    --sans: 'DM Sans', system-ui, sans-serif;
    --shadow: 0 16px 44px rgba(24, 40, 26, 0.10);
}

.alignment-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.alignment-grid > div {
    border: 1px solid rgba(33, 58, 40, 0.12);
    border-radius: 8px;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.64);
}

.alignment-grid h4 {
    margin: 0 0 0.7rem;
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.alignment-grid p,
.compact-list {
    margin: 0;
}

.alignment-grid p + p {
    margin-top: 0.75rem;
}

.compact-list {
    padding-left: 1.1rem;
}

.compact-list li + li {
    margin-top: 0.45rem;
}

.compact-list span,
.muted {
    color: var(--muted);
}

.subject-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin: 1.2rem 0;
}

@media (max-width: 980px) {
    .alignment-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .alignment-grid {
        grid-template-columns: 1fr;
    }
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    background:
        linear-gradient(180deg, rgba(237, 231, 217, .75), rgba(250, 247, 241, .95)),
        var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    line-height: 1.45;
}

a {
    color: inherit;
}

.brand-link {
    color: inherit;
    text-decoration: none;
}

.app-shell {
    width: min(1280px, calc(100% - 40px));
    margin: 0 auto;
    padding: 28px 0 40px;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 24px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.brand-mark {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 10px;
    background: var(--forest);
    color: #fff;
    font-weight: 700;
    letter-spacing: 0;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}

.companion-avatar {
    display: block;
    width: 54px;
    height: 54px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    object-fit: cover;
    box-shadow: 0 8px 22px rgba(24, 40, 26, .10);
}

.companion-avatar.small {
    width: 48px;
    height: 48px;
    border-radius: 12px;
}

.brand h1 {
    margin: 0;
    font-family: var(--serif);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.1;
}

.brand p {
    margin: 4px 0 0;
    color: var(--muted);
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--panel);
    color: var(--muted);
    white-space: nowrap;
}

.role-orientation {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 18px 0;
    padding: 0;
    list-style: none;
}

.role-orientation li {
    position: relative;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    min-height: 86px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .74);
}

.role-orientation li::after {
    content: '';
    position: absolute;
    top: 29px;
    right: -8px;
    z-index: 2;
    width: 14px;
    height: 14px;
    border-top: 1px solid var(--sage-l);
    border-right: 1px solid var(--sage-l);
    background: var(--bg);
    transform: rotate(45deg);
}

.role-orientation li:last-child::after {
    display: none;
}

.role-orientation li > span {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--sage-l);
    border-radius: 999px;
    background: var(--sage-p);
    color: var(--forest);
    font-weight: 800;
}

.role-orientation strong,
.role-orientation small {
    display: block;
}

.role-orientation strong {
    margin-top: 2px;
    color: var(--forest);
    font-size: 0.94rem;
}

.role-orientation small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.35;
}

.role-orientation li.current {
    border-color: rgba(61, 107, 71, .42);
    background: #eef5f0;
    box-shadow: 0 8px 20px rgba(24, 40, 26, .06);
}

.admin-overview-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.admin-overview-card {
    position: relative;
    display: grid;
    gap: 8px;
    min-height: 190px;
    padding: 22px 22px 20px;
    border: 1px solid rgba(42, 91, 66, .22);
    border-radius: 8px;
    background: #fffdf8;
}

.admin-overview-card.attention {
    border-color: rgba(174, 84, 43, .38);
    background: #fff9f2;
}

.admin-overview-card > strong {
    padding-right: 42px;
    color: var(--forest);
    font-family: var(--serif);
    font-size: 1.65rem;
    line-height: 1.12;
}

.admin-overview-card > span:not(.admin-overview-mark) {
    color: var(--muted);
    line-height: 1.48;
}

.admin-overview-card > a {
    align-self: end;
    color: var(--terra);
    font-weight: 800;
    text-decoration: none;
}

.admin-overview-card > a:hover {
    text-decoration: underline;
}

.environment-switch-links {
    display: grid;
    gap: 6px;
    margin-top: auto;
}

.environment-switch-links a,
.environment-switch-details a {
    color: var(--terra);
    font-weight: 800;
    text-decoration: none;
}

.environment-switch-links a:hover,
.environment-switch-details a:hover {
    text-decoration: underline;
}

.environment-switch-details {
    display: grid;
    gap: 6px;
    color: var(--muted);
    font-size: .9rem;
}

.environment-switch-details summary {
    cursor: pointer;
    color: var(--muted);
    font-weight: 700;
}

.admin-overview-mark {
    position: absolute;
    top: 18px;
    right: 18px;
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid rgba(42, 91, 66, .28);
    border-radius: 50%;
    color: var(--forest);
    font-weight: 900;
}

@media (max-width: 860px) {
    .admin-overview-grid {
        grid-template-columns: 1fr;
    }
}

.role-orientation li.current > span {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}

/* Parent home: a calm interpretation layer, not an administrative dashboard. */
.parent-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
    gap: 1rem;
    align-items: stretch;
    margin: 18px 0;
    padding: 1.35rem;
    border: 1px solid rgba(45, 103, 72, .23);
    border-left: 6px solid var(--accent);
    border-radius: 8px;
    background: linear-gradient(115deg, rgba(238, 245, 240, .96), rgba(255, 253, 248, .96));
}

.parent-hero--watch {
    border-left-color: #be8525;
    background: linear-gradient(115deg, rgba(255, 248, 227, .96), rgba(255, 253, 248, .96));
}

.parent-hero--attention {
    border-left-color: #b14f36;
    background: linear-gradient(115deg, rgba(255, 239, 233, .96), rgba(255, 253, 248, .96));
}

.parent-hero-copy {
    align-self: center;
}

.parent-hero-copy .eyebrow,
.parent-week-card .eyebrow,
.parent-support-heading .eyebrow,
.parent-section-heading .eyebrow {
    margin: 0 0 .25rem;
}

.parent-hero-copy h2,
.parent-section-heading h2,
.parent-support-heading h2 {
    margin: 0;
}

.parent-hero-copy .button {
    margin-top: .9rem;
}

.parent-week-card {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: .7rem;
    align-content: start;
    padding: 1rem;
    border: 1px solid rgba(45, 103, 72, .18);
    border-radius: 8px;
    background: rgba(255, 255, 255, .72);
}

.parent-week-card h3,
.parent-week-card p {
    margin: 0;
}

.parent-week-card p:not(.eyebrow) {
    margin-top: .35rem;
    color: var(--muted);
    line-height: 1.45;
}

.parent-week-symbol,
.parent-support-symbol,
.parent-book-symbol {
    position: relative;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(45, 103, 72, .24);
    border-radius: 8px;
    background: rgba(232, 240, 235, .78);
    color: var(--forest);
}

.parent-week-symbol::before {
    content: '';
    width: 14px;
    height: 16px;
    border: 2px solid currentColor;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent 0 27%, currentColor 27% 33%, transparent 33%);
}

.parent-week-symbol::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 2px;
    background: currentColor;
    box-shadow: 0 4px 0 currentColor;
    transform: translate(4px, 2px);
}

.parent-support-panel,
.parent-book-panel {
    margin-top: 18px;
    padding: 1.15rem 1.25rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .78);
}

.parent-support-heading,
.parent-section-heading {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.parent-section-heading {
    justify-content: space-between;
    align-items: flex-start;
}

.parent-section-heading > p {
    max-width: 42rem;
    margin: .15rem 0 0;
    color: var(--muted);
    line-height: 1.45;
}

.parent-support-symbol::before {
    content: '';
    width: 15px;
    height: 15px;
    border: 2px solid currentColor;
    border-radius: 50%;
}

.parent-support-symbol::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-1px) rotate(42deg);
}

.parent-support-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(210px, .56fr);
    gap: 1rem;
    align-items: center;
    margin-top: .9rem;
    padding-top: .9rem;
    border-top: 1px solid var(--line);
}

.parent-support-content p,
.parent-support-next span {
    display: block;
    margin: .3rem 0 0;
    color: var(--muted);
    line-height: 1.45;
}

.parent-support-next {
    padding: .75rem .85rem;
    border-left: 3px solid var(--sage);
    border-radius: 0 6px 6px 0;
    background: var(--sage-p);
}

.parent-action-notice {
    margin: 18px 0 0;
    padding: .85rem 1rem;
    border-left: 3px solid var(--sage);
    background: var(--sage-p);
    color: var(--forest);
    font-weight: 700;
}

.parent-pacing-panel {
    margin-top: 18px;
    padding: 1.1rem;
    border-top: 3px solid var(--terra);
    background: rgba(255, 250, 244, .78);
}

.parent-pacing-panel--approved {
    border-top-color: #3d8a59;
    background: rgba(248, 252, 248, .78);
}

.parent-pacing-reason {
    max-width: 78ch;
    margin: 1rem 0;
    color: var(--ink);
    line-height: 1.52;
}

.parent-pacing-items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
}

.parent-pacing-item {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: .65rem;
    padding: .75rem;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(255, 253, 248, .82);
}

.parent-pacing-mark {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 50%;
    background: rgba(177, 84, 44, .15);
    color: var(--terra);
    font-size: 1.25rem;
    font-weight: 900;
    line-height: 1;
}

.parent-pacing-item--reduce .parent-pacing-mark {
    background: rgba(61, 138, 89, .13);
    color: #276941;
}

.parent-pacing-item strong,
.parent-pacing-item span,
.parent-pacing-item small {
    display: block;
}

.parent-pacing-item strong {
    color: var(--forest);
}

.parent-pacing-item span {
    margin-top: .12rem;
    color: var(--muted);
    font-size: .82rem;
    font-weight: 800;
}

.parent-pacing-item small {
    margin-top: .28rem;
    color: var(--muted);
    font-size: .76rem;
    line-height: 1.38;
}

.parent-pacing-actions {
    margin-top: .9rem;
    padding-top: .9rem;
    border-top: 1px solid var(--line);
}

.parent-pacing-actions .field {
    max-width: 720px;
}

.parent-pacing-note {
    margin: .75rem 0 0;
    color: var(--muted);
    font-size: .84rem;
    line-height: 1.45;
}

.parent-subject-panel {
    margin-top: 18px;
}

.parent-traffic-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem 1rem;
    margin: 1rem 0 .75rem;
    color: var(--muted);
    font-size: .84rem;
}

.parent-traffic-legend span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.parent-subject-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .6rem;
}

.parent-subject-card {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr);
    gap: .65rem;
    align-items: start;
    min-height: 94px;
    padding: .75rem;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(255, 253, 248, .76);
}

.parent-subject-card strong,
.parent-subject-card span,
.parent-subject-card small {
    display: block;
}

.parent-subject-card strong {
    color: var(--forest);
}

.parent-subject-card span {
    margin-top: .12rem;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 800;
}

.parent-subject-card small {
    margin-top: .25rem;
    color: var(--muted);
    font-size: .75rem;
    line-height: 1.35;
}

.parent-light {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-top: .28rem;
    border: 1px solid rgba(25, 45, 32, .22);
    border-radius: 50%;
    background: #9aa59e;
}

.parent-light--green { background: #3d8a59; }
.parent-light--yellow { background: #d49a27; }
.parent-light--red { background: #bd5b43; }
.parent-light--grey { background: #9aa59e; }

.parent-year-plan {
    margin-top: 18px;
    padding: 1.1rem;
    border-top: 3px solid var(--sage);
    background: rgba(250, 252, 248, .7);
}

.parent-year-plan-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
    margin-top: 1rem;
}

.parent-year-subject {
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(255, 253, 248, .86);
}

.parent-year-subject-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    padding: .8rem .9rem;
    color: var(--forest);
    border-bottom: 1px solid var(--line);
}

.parent-year-subject-title {
    display: grid;
    gap: .08rem;
    min-width: 0;
}

.parent-year-subject-title strong {
    font-size: .95rem;
}

.parent-year-subject-title small,
.parent-year-progress {
    color: var(--muted);
    font-size: .77rem;
}

.parent-year-progress {
    margin-left: auto;
    white-space: nowrap;
}

.parent-year-subject-intro {
    margin: 0;
    padding: .65rem .9rem .15rem;
    color: var(--muted);
    font-size: .82rem;
    line-height: 1.4;
}

.parent-topic-list {
    display: grid;
    gap: .35rem;
    margin: 0;
    padding: .75rem .9rem .9rem;
    list-style: none;
}

.parent-topic {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .6rem;
    padding: .42rem .5rem;
    border-left: 3px solid #b8c0b9;
    color: var(--ink);
    font-size: .86rem;
    line-height: 1.35;
}

.parent-topic-main {
    display: inline-flex;
    align-items: baseline;
    gap: .55rem;
    min-width: 0;
}

.parent-topic-marker {
    width: .52rem;
    height: .52rem;
    flex: 0 0 .52rem;
    border: 1px solid #94a097;
    border-radius: 50%;
    background: #fffdf8;
}

.parent-topic small {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 800;
}

.parent-topic--complete {
    border-color: #3d8a59;
    background: rgba(61, 138, 89, .09);
}

.parent-topic--complete small {
    color: #276941;
}

.parent-topic--complete .parent-topic-marker {
    border-color: #276941;
    background: #3d8a59;
}

.parent-topic--active {
    border-color: var(--terra);
    background: rgba(177, 84, 44, .08);
}

.parent-topic--active .parent-topic-marker {
    border-color: var(--terra);
    background: var(--terra);
}

.parent-year-plan-empty {
    margin-top: .9rem;
    padding: .9rem;
    border-left: 3px solid var(--sage);
    background: var(--sage-p);
}

.parent-year-plan-empty p {
    margin: .25rem 0 0;
    color: var(--muted);
    line-height: 1.45;
}

.parent-family-switcher {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 1rem 0;
    padding: .8rem .95rem;
    border-left: 3px solid var(--sage);
    background: var(--sage-p);
}

.parent-family-switcher .eyebrow {
    margin-bottom: .2rem;
}

.parent-family-children {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .45rem;
}

.parent-family-child {
    display: grid;
    gap: .12rem;
    min-width: 11rem;
    padding: .55rem .65rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--ink);
    text-decoration: none;
    background: rgba(255, 253, 248, .84);
}

.parent-family-child:hover,
.parent-family-child:focus-visible {
    border-color: var(--forest);
    outline: none;
}

.parent-family-child.is-current {
    border-color: var(--forest);
    box-shadow: inset 3px 0 0 var(--forest);
}

.parent-family-child--attention:not(.is-current) {
    border-color: #bd5b43;
}

.parent-family-child span {
    font-weight: 800;
}

.parent-family-child small {
    color: var(--muted);
    font-size: .72rem;
    line-height: 1.3;
}

.parent-family-hero {
    margin-top: 1rem;
    padding: 1.25rem;
    border-top: 3px solid var(--forest);
    background: rgba(250, 252, 248, .76);
}

.parent-family-hero h2 {
    margin: .15rem 0 .45rem;
    color: var(--forest);
}

.parent-family-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .8rem;
    margin-top: 1rem;
}

.parent-family-card {
    display: grid;
    gap: .9rem;
    min-height: 13rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-top: 3px solid var(--sage);
    border-radius: 7px;
    color: var(--ink);
    text-decoration: none;
    background: rgba(255, 253, 248, .9);
}

.parent-family-card:hover,
.parent-family-card:focus-visible {
    border-color: var(--forest);
    outline: none;
}

.parent-family-card--attention {
    border-top-color: #bd5b43;
}

.parent-family-card--watch {
    border-top-color: var(--terra);
}

.parent-family-card-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .8rem;
}

.parent-family-card h3 {
    margin: .1rem 0 0;
    color: var(--forest);
}

.parent-family-card p:not(.eyebrow) {
    margin: 0;
    color: var(--muted);
    line-height: 1.45;
}

.parent-family-state {
    flex: 0 0 auto;
    padding: .32rem .45rem;
    border-radius: 4px;
    color: #276941;
    font-size: .72rem;
    font-weight: 800;
    background: rgba(61, 138, 89, .1);
}

.parent-family-state--attention {
    color: #903821;
    background: rgba(189, 91, 67, .12);
}

.parent-family-card footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: .7rem;
    margin-top: auto;
    color: var(--muted);
    font-size: .78rem;
    line-height: 1.35;
}

.parent-family-card footer strong {
    flex: 0 0 auto;
    color: var(--forest);
}

.parent-book-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .7rem;
    margin-top: 1rem;
}

.parent-book-chapter {
    display: grid;
    gap: .32rem;
    min-height: 142px;
    padding: .85rem;
    border: 1px solid rgba(177, 84, 44, .25);
    border-left: 4px solid var(--terra);
    border-radius: 7px;
    background: rgba(255, 250, 244, .84);
    color: inherit;
    text-decoration: none;
}

.parent-book-chapter:hover {
    border-color: rgba(177, 84, 44, .5);
    box-shadow: 0 7px 18px rgba(86, 54, 30, .08);
}

.parent-book-chapter > span {
    color: var(--terra);
    font-size: .76rem;
    font-weight: 800;
    text-transform: uppercase;
}

.parent-book-chapter strong {
    color: var(--forest);
    font-family: var(--serif);
    font-size: 1.1rem;
    line-height: 1.22;
}

.parent-book-chapter small {
    color: var(--muted);
    line-height: 1.36;
}

.parent-book-empty {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: .75rem;
    align-items: center;
    margin-top: .9rem;
    padding: .9rem;
    border: 1px dashed rgba(45, 103, 72, .28);
    border-radius: 7px;
    background: rgba(248, 251, 248, .8);
}

.parent-book-empty p {
    margin: .25rem 0 0;
    color: var(--muted);
    line-height: 1.45;
}

.parent-book-symbol::before {
    content: '';
    width: 15px;
    height: 18px;
    border: 2px solid currentColor;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent 0 28%, currentColor 28% 34%, transparent 34%);
}

.parent-detail-note {
    margin-top: 18px;
    padding: .9rem 1.1rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .62);
}

.parent-detail-note summary {
    cursor: pointer;
    color: var(--forest);
    font-weight: 800;
}

.parent-detail-note p {
    margin: .7rem 0;
    color: var(--muted);
    line-height: 1.45;
}

@media (max-width: 860px) {
    .parent-hero,
    .parent-support-content {
        grid-template-columns: 1fr;
    }

    .parent-subject-grid,
    .parent-book-grid,
    .parent-year-plan-list,
    .parent-pacing-items,
    .parent-family-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .parent-hero,
    .parent-support-panel,
    .parent-book-panel {
        padding: 1rem;
    }

    .parent-section-heading {
        display: grid;
        gap: .75rem;
    }

    .parent-section-heading .button {
        width: 100%;
    }

    .parent-subject-grid,
    .parent-book-grid,
    .parent-year-plan-list,
    .parent-pacing-items,
    .parent-family-grid {
        grid-template-columns: 1fr;
    }

    .parent-family-switcher,
    .parent-family-card footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .parent-family-children {
        justify-content: flex-start;
        width: 100%;
    }

    .parent-family-child {
        min-width: 0;
        width: 100%;
    }

    .parent-year-subject-heading {
        align-items: flex-start;
    }

    .parent-year-progress {
        white-space: normal;
        text-align: right;
    }
}

@media (max-width: 860px) {
    .role-orientation {
        grid-template-columns: 1fr;
    }

    .role-orientation li::after {
        top: auto;
        right: auto;
        bottom: -8px;
        left: 24px;
        transform: rotate(135deg);
    }
}

.status-dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--danger);
}

.status-dot.ok {
    background: var(--accent);
}

.ai-status-light {
    position: fixed;
    left: 18px;
    bottom: 18px;
    z-index: 1200;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid rgba(24, 40, 26, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    color: var(--ink);
    font: 700 0.86rem/1 var(--sans);
    box-shadow: 0 10px 28px rgba(24, 40, 26, 0.14);
    cursor: help;
}

.ai-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--gold);
    box-shadow: 0 0 0 4px rgba(196, 154, 60, 0.14);
}

.ai-status-light.state-ok .ai-status-dot {
    background: var(--accent);
    box-shadow: 0 0 0 4px rgba(61, 107, 71, 0.14);
}

.ai-status-light.state-quota .ai-status-dot,
.ai-status-light.state-error .ai-status-dot,
.ai-status-light.state-disabled .ai-status-dot {
    background: var(--danger);
    box-shadow: 0 0 0 4px rgba(161, 59, 59, 0.14);
}

@media (max-width: 680px) {
    .ai-status-light {
        left: 10px;
        bottom: 10px;
        min-height: 36px;
        padding: 0 10px;
        font-size: 0.78rem;
    }
}

.hero {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
    gap: 18px;
    align-items: stretch;
    margin-bottom: 18px;
}

.hero-main,
.panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: var(--shadow);
}

.hero-main {
    padding: 30px;
    background:
        radial-gradient(circle at top right, rgba(196, 154, 60, .14), transparent 34%),
        linear-gradient(135deg, var(--forest), var(--ink));
    color: #fff;
    overflow: hidden;
}

.eyebrow {
    margin: 0 0 12px;
    color: var(--terra);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .18em;
}

.hero-main .eyebrow {
    color: rgba(196, 154, 60, .95);
}

.hero-main h2 {
    margin: 0;
    max-width: 840px;
    font-family: var(--serif);
    font-weight: 700;
    font-size: clamp(30px, 4vw, 54px);
    line-height: 1.04;
}

.hero-main .lead {
    max-width: 800px;
    margin: 18px 0 0;
    color: rgba(255,255,255,.72);
    font-size: 18px;
    font-weight: 300;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid var(--terra);
    background: var(--terra);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
}

.button:disabled {
    cursor: wait;
    opacity: .82;
}

.loading-label {
    display: none;
}

.button.secondary {
    background: #fff;
    color: var(--forest);
    border-color: var(--line);
}

.hero-actions.no-margin {
    margin-top: 0;
}

.panel {
    padding: 22px;
}

.panel h3 {
    margin: 0 0 14px;
    font-family: var(--serif);
    font-weight: 700;
    font-size: 19px;
}

.definition-list {
    display: grid;
    gap: 12px;
}

.definition-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 10px;
}

.definition-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.definition-row span {
    color: var(--muted);
}

.definition-row strong {
    text-align: right;
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.metric {
    min-height: 104px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--panel);
}

.metric span {
    color: var(--muted);
    font-size: 13px;
}

.metric strong {
    display: block;
    margin-top: 8px;
    font-family: var(--serif);
    font-size: 30px;
    line-height: 1;
}

.metric.wide-metric {
    grid-column: span 2;
}

.metric.wide-metric strong {
    font-family: var(--sans);
    font-size: 18px;
    line-height: 1.35;
}

.notification-layout {
    grid-template-columns: minmax(0, 1.3fr) minmax(340px, .7fr);
    align-items: start;
}

.notification-role-tabs {
    margin-bottom: 18px;
}

.notification-list,
.notification-compose,
.notification-recent {
    display: grid;
    gap: 14px;
}

.notification-card {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--line);
    border-left: 6px solid var(--sage);
    border-radius: 10px;
    background: #fffdf9;
}

.notification-card.priority-important {
    border-left-color: var(--gold);
}

.notification-card.priority-urgent {
    border-left-color: var(--danger);
    background: #fff7f4;
}

.notification-card.status-done,
.notification-card.status-archived {
    opacity: .76;
}

.notification-card-head,
.notification-actions {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.notification-card-head h3 {
    margin: 8px 0 4px;
}

.notification-actions form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.notification-recent {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.8fr);
    gap: 18px;
}

.content-grid > * {
    min-width: 0;
}

.dashboard-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
    align-items: start;
}

.settings-card details {
    display: grid;
    gap: 14px;
}

.companion-greeting {
    display: flex;
    justify-content: center;
    margin-bottom: 14px;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.companion-greeting video {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    max-height: none;
    border: 1px solid var(--line);
    border-radius: 10px;
    object-fit: contain;
    object-position: center;
    background: var(--sage-p);
}

.companion-greeting-script {
    display: grid;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.companion-greeting-script strong {
    color: var(--forest);
    font-size: 14px;
}

.companion-greeting-script span {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.45;
}

.settings-card summary {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-weight: 800;
}

.settings-card summary::-webkit-details-marker {
    display: none;
}

.settings-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: var(--sage-p);
    color: var(--forest);
    font-size: 18px;
}

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

.dashboard-action {
    background: #fff;
}

.vocabulary-dashboard-card {
    position: relative;
    color: inherit;
    text-decoration: none;
    border-color: rgba(61, 107, 71, 0.22);
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.vocabulary-dashboard-card:hover {
    transform: translateY(-1px);
    border-color: rgba(160, 82, 45, 0.45);
}

.vocabulary-dashboard-card.has-due-vocabulary {
    border-color: rgba(196, 154, 60, 0.7);
    background:
        radial-gradient(circle at top right, rgba(196, 154, 60, 0.18), transparent 38%),
        #fffdf9;
    animation: vocabulary-dashboard-pulse 1800ms ease-in-out infinite;
}

.vocabulary-dashboard-card.has-due-vocabulary::after {
    content: "";
    position: absolute;
    top: 14px;
    right: 14px;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--gold);
    box-shadow: 0 0 0 6px rgba(196, 154, 60, 0.14);
}

.dashboard-action .button {
    justify-self: start;
    margin-top: 8px;
}

@keyframes vocabulary-dashboard-pulse {
    0%, 100% {
        box-shadow: var(--shadow);
    }
    50% {
        box-shadow: 0 0 0 4px rgba(196, 154, 60, 0.14), var(--shadow);
    }
}

.subject-accordion {
    display: grid;
    gap: 12px;
}

.subject-details {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fffdf9;
    overflow: hidden;
}

.subject-details summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    cursor: pointer;
}

.subject-details summary::-webkit-details-marker {
    display: none;
}

.subject-details summary strong {
    font-family: var(--serif);
    font-size: 21px;
}

.subject-details summary span {
    color: var(--muted);
    text-align: right;
}

.canonical-path-strip {
    display: grid;
    gap: 12px;
    margin: 0 16px 16px;
    padding: 14px;
    border: 1px solid rgba(62, 109, 75, 0.18);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(235, 246, 239, 0.95), rgba(255, 253, 249, 0.96));
}

.canonical-path-meta,
.canonical-path-next,
.canonical-path-status {
    display: grid;
    gap: 5px;
}

.canonical-path-meta strong,
.canonical-path-next strong,
.canonical-path-status strong {
    color: var(--ink);
}

.canonical-path-meta span,
.canonical-path-next span,
.canonical-path-status span,
.path-step-link small {
    color: var(--muted);
}

.canonical-path-next {
    grid-template-columns: 1fr;
}

.subject-details .canonical-path-next {
    display: none;
}

.subject-details .didactic-next-steps {
    display: grid;
}

.didactic-next-step {
    border-color: rgba(62, 109, 75, 0.24);
    background: rgba(255, 255, 255, 0.82);
}

.weekly-package-list {
    display: grid;
    gap: 8px;
}

.weekly-package-item {
    grid-template-columns: auto 1fr;
    align-items: center;
}

.weekly-package-item.is-started {
    border-color: rgba(62, 109, 75, 0.28);
    background: rgba(235, 246, 239, 0.95);
}

.weekly-package-item.is-preparing {
    border-color: rgba(83, 92, 103, 0.22);
    background: rgba(246, 247, 248, 0.96);
    color: var(--muted);
    cursor: default;
}

.weekly-package-number {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: var(--forest);
    color: #fff;
    font-weight: 800;
}

.path-step-link {
    display: grid;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid rgba(172, 84, 43, 0.22);
    border-radius: 10px;
    background: #fffdf9;
    color: var(--ink);
    text-decoration: none;
}

.path-step-link:hover,
.path-step-link:focus-visible {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(172, 84, 43, 0.12);
}

.path-step-link.is-preparing:hover {
    border-color: rgba(83, 92, 103, 0.22);
    box-shadow: none;
}

.canonical-status-gap {
    border-left: 4px solid #c49a3c;
    padding-left: 10px;
}

.canonical-status-ready {
    border-left: 4px solid var(--accent);
    padding-left: 10px;
}

.curriculum-summary-main {
    display: grid;
    gap: 3px;
}

.curriculum-summary-main span {
    text-align: left;
}

.curriculum-subject-progress {
    display: grid;
    gap: 7px;
    min-width: min(260px, 38vw);
}

.curriculum-subject-progress span {
    font-size: 14px;
}

.curriculum-progress-track {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--line);
}

.curriculum-progress-track i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--accent);
}

.curriculum-time-status {
    display: grid;
    gap: 8px;
    min-width: min(380px, 46vw);
}

.curriculum-time-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.curriculum-time-head strong {
    font-family: var(--sans) !important;
    font-size: 15px !important;
    color: var(--accent);
}

.curriculum-time-head span {
    font-size: 13px;
}

.curriculum-time-status.behind .curriculum-time-head strong {
    color: var(--clay);
}

.curriculum-time-status.ahead .curriculum-time-head strong {
    color: #2d6772;
}

.curriculum-time-track {
    position: relative;
    height: 10px;
    overflow: visible;
    border-radius: 999px;
    background: var(--line);
}

.curriculum-time-track i {
    display: block;
    height: 100%;
    max-width: 100%;
    border-radius: inherit;
    background: var(--accent);
}

.curriculum-time-status.behind .curriculum-time-track i {
    background: var(--clay);
}

.curriculum-time-status.ahead .curriculum-time-track i {
    background: #2d6772;
}

.curriculum-time-track b {
    position: absolute;
    top: -4px;
    width: 3px;
    height: 18px;
    border-radius: 999px;
    background: var(--ink);
    transform: translateX(-50%);
}

.curriculum-time-facts {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.curriculum-time-facts span,
.curriculum-time-status small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.curriculum-density {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px 10px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.curriculum-density span {
    font-weight: 700;
}

.curriculum-density.behind {
    color: var(--clay);
}

.curriculum-density.ahead {
    color: #2d6772;
}

.curriculum-planning-audit {
    margin: 14px 0 18px;
    padding: 14px 16px;
    border: 1px solid rgba(45, 103, 114, 0.18);
    border-radius: 8px;
    background: rgba(232, 240, 235, 0.65);
    color: var(--muted);
}

.curriculum-planning-audit strong {
    display: block;
    margin-bottom: 5px;
    color: var(--ink);
}

.curriculum-planning-audit p {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
}

.subject-readiness-card {
    margin: 16px 0;
    padding: 16px 18px;
    border-radius: 8px;
    border: 1px solid rgba(64, 112, 75, 0.24);
    background: rgba(232, 240, 235, 0.72);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.7fr);
    gap: 18px;
    align-items: start;
}

.subject-readiness-card.behind {
    border-color: rgba(174, 80, 42, 0.28);
    background: rgba(247, 235, 227, 0.72);
}

.subject-readiness-card.neutral {
    border-color: rgba(45, 103, 114, 0.22);
    background: rgba(245, 242, 234, 0.78);
}

.subject-readiness-card h3 {
    margin: 0 0 6px;
}

.subject-readiness-card p {
    margin: 0;
    color: var(--muted);
}

.subject-readiness-card ul {
    margin: 0;
    padding-left: 18px;
    color: var(--ink);
    font-weight: 700;
}

.subject-readiness-card li + li {
    margin-top: 6px;
}

.curriculum-time-status small {
    text-align: right;
}

.companion-advice {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    margin: 0 16px 16px;
    padding: 14px;
    border: 1px solid var(--sage-l);
    border-radius: 10px;
    background: var(--sage-p);
}

.companion-advice.behind {
    border-color: rgba(170, 82, 43, .28);
    background: rgba(255, 248, 239, .94);
}

.companion-advice-avatar {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff !important;
    font-weight: 900;
    text-align: center !important;
}

.companion-advice strong {
    display: block;
    margin-bottom: 4px;
    color: var(--forest);
}

.companion-advice p {
    margin: 0;
    color: var(--muted);
}

.subject-policy-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, .9fr);
    gap: 18px;
    margin: 0 16px 16px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(255, 255, 255, .72);
}

.subject-policy-card .eyebrow {
    margin: 0 0 4px;
}

.subject-policy-card h3 {
    margin: 0 0 8px;
    font-size: 23px;
}

.subject-policy-card p {
    margin: 0;
    color: var(--muted);
}

.subject-policy-lists {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.subject-policy-lists > div {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 7px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
}

.subject-policy-lists strong {
    flex-basis: 100%;
    color: var(--forest);
    font-size: 14px;
}

.subject-policy-lists span {
    padding: 5px 8px;
    border: 1px solid rgba(45, 103, 114, .18);
    border-radius: 999px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.enrichment-pool {
    margin: 0 16px 16px;
    padding: 16px;
    border: 1px solid rgba(45, 103, 114, .24);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(245, 250, 247, .95), rgba(255, 252, 246, .95));
}

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

.enrichment-pool-head .eyebrow {
    margin: 0 0 4px;
}

.enrichment-pool-head h3 {
    margin: 0;
    font-size: 23px;
}

.enrichment-pool-head > span {
    padding: 7px 11px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    background: rgba(255, 255, 255, .72);
}

.enrichment-pool-intro {
    max-width: 860px;
    margin: 0 0 14px;
    color: var(--muted);
}

.enrichment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 10px;
}

.enrichment-card {
    display: grid;
    gap: 10px;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .78);
}

.enrichment-card div {
    display: grid;
    gap: 4px;
}

.enrichment-card span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0;
}

.enrichment-card strong {
    color: var(--forest);
    font-size: 17px;
}

.enrichment-card p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
}

.notice-panel {
    border-color: rgba(166, 65, 48, .35);
    background: #fff7f1;
}

.notice-panel p {
    margin: 6px 0 0;
}

.replacement-choice-panel {
    border-color: rgba(191, 132, 44, .38);
    background: #fffaf0;
}

.replacement-choice-panel h3 {
    margin-top: 0;
}

.replacement-choice-list {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.replacement-choice-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.replacement-choice-item div {
    display: grid;
    gap: 4px;
}

.replacement-choice-item strong {
    color: var(--forest);
}

.replacement-choice-item span {
    color: var(--muted);
}

.learning-path-rules h3 {
    margin-top: 0;
}

.learning-path-rule-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
}

.learning-path-rule-grid article {
    display: grid;
    gap: 6px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .82);
}

.learning-path-rule-grid strong {
    color: var(--forest);
}

.learning-path-rule-grid span {
    color: var(--muted);
}

.learning-path-board {
    display: grid;
    gap: 14px;
}

.learning-path-card {
    display: grid;
    gap: 14px;
}

.learning-path-head,
.recommended-topic,
.active-topic-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.learning-path-head h3 {
    margin: 0;
}

.topic-count {
    flex: 0 0 auto;
    padding: 8px 11px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--forest);
    font-weight: 800;
    background: #fff;
}

.learning-path-stop {
    border-color: rgba(166, 65, 48, .35);
}

.learning-path-caution,
.learning-path-focus {
    border-color: rgba(191, 132, 44, .38);
}

.timeplan-strip {
    display: grid;
    gap: 4px;
    padding: 12px;
    border-left: 4px solid var(--sage);
    border-radius: 8px;
    background: var(--sage-p);
}

.timeplan-strip span {
    color: var(--muted);
}

.active-topic-list {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .82);
}

.active-topic-row + .active-topic-row {
    padding-top: 8px;
    border-top: 1px solid var(--line);
}

.small-button {
    min-height: 0;
    padding: 8px 12px;
    font-size: 14px;
}

.recommended-topic-form {
    display: grid;
    gap: 12px;
}

.compact-field input {
    min-height: 44px;
}

.recommended-topic {
    align-items: end;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.recommended-topic div {
    display: grid;
    gap: 5px;
}

.recommended-topic span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0;
}

.recommended-topic strong {
    color: var(--forest);
    font-size: 19px;
}

.recommended-topic p {
    margin: 0;
    color: var(--muted);
}

.advanced-topic-picker summary {
    cursor: pointer;
    color: var(--forest);
    font-weight: 800;
}

.embedded-form {
    margin-top: 14px;
}

@media (max-width: 720px) {
    .learning-path-head,
    .recommended-topic,
    .active-topic-row {
        align-items: stretch;
        flex-direction: column;
    }

    .topic-count,
    .small-button,
    .recommended-topic .button,
    .replacement-choice-item .button {
        width: 100%;
        text-align: center;
    }

    .replacement-choice-item {
        align-items: stretch;
        flex-direction: column;
    }
}

.current-topic {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 16px 14px;
    padding: 12px;
    border: 1px solid var(--sage-l);
    border-radius: 10px;
    background: var(--sage-p);
}

.current-topic div {
    display: grid;
    gap: 3px;
}

.topic-map,
.math-mindmap {
    display: grid;
    gap: 12px;
    padding: 0 16px 16px;
}

.math-mindmap {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.topic-domain {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
}

.topic-domain h4 {
    margin: 0;
    color: var(--forest);
    font-size: 15px;
}

.topic-domain-empty p {
    margin: 0;
    color: var(--muted);
}

.topic-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.curriculum-area-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
    padding: 0 16px 16px;
}

.curriculum-area {
    display: grid;
    align-content: start;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.curriculum-area h3 {
    margin: 0 0 6px;
    color: var(--forest);
    font-size: 20px;
}

.curriculum-area-progress {
    display: inline-block;
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 700;
}

.curriculum-area p {
    margin: 0;
    color: var(--muted);
}

.curriculum-topic-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.curriculum-topic-list li {
    display: grid;
    gap: 3px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
}

.curriculum-topic-list li:first-child {
    padding-top: 0;
    border-top: 0;
}

.curriculum-topic-list span {
    color: var(--muted);
}

.curriculum-topic-accordion {
    display: grid;
    gap: 10px;
}

.curriculum-topic {
    border-top: 1px solid var(--line);
    padding-top: 10px;
}

.curriculum-topic:first-child {
    border-top: 0;
    padding-top: 0;
}

.curriculum-topic summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
}

.curriculum-topic summary span {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 14px;
}

.curriculum-topic p {
    margin: 8px 0 0;
}

.curriculum-topic.is-passed summary strong {
    color: #1f7a42;
}

.curriculum-topic.is-passed summary span {
    color: #1f7a42;
    font-weight: 700;
}

.resource-unit-list {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.resource-unit {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--sage-p);
}

.resource-unit.is-passed {
    border-color: #8bc7a0;
    background: #edf8ef;
    box-shadow: inset 4px 0 0 #2f8f50;
}

.resource-unit.is-passed strong {
    color: #1f7a42;
}

.resource-unit div:first-child {
    display: grid;
    gap: 2px;
}

.resource-unit div:first-child span,
.resource-meta {
    color: var(--muted);
    font-size: 14px;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 8px;
    border-radius: 999px;
    font-weight: 800;
}

.status-pill.passed {
    color: #1f7a42;
    background: #dff3e4;
}

.resource-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.curriculum-skill-lines {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0 2px;
}

.curriculum-skill-lines span {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 9px;
    border: 1px solid #d9cbb3;
    border-radius: 999px;
    background: #fffaf1;
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
}

.curation-pill {
    background: #f2eadf;
    color: var(--ink);
}

.curation-pill.core {
    background: #dff3e4;
    color: #1f6f3d;
}

.curation-pill.support {
    background: #edf3ea;
    color: #51694e;
}

.curation-pill.extension {
    background: #fff0d4;
    color: #8d5912;
}

.curation-pill.review {
    background: #f3eee6;
    color: var(--muted);
}

.tiny-button {
    min-height: 34px;
    padding: 7px 12px;
    font-size: 14px;
}

@media (max-width: 760px) {
    .subject-details summary {
        align-items: flex-start;
        flex-direction: column;
    }

    .curriculum-subject-progress,
    .curriculum-time-status {
        width: 100%;
        min-width: 0;
    }

    .curriculum-time-head,
    .curriculum-time-facts {
        justify-content: flex-start;
    }

    .curriculum-time-status small {
        text-align: left;
    }

    .curriculum-topic summary,
    .resource-unit {
        grid-template-columns: 1fr;
    }

    .curriculum-topic summary {
        align-items: flex-start;
    }

    .resource-meta {
        justify-content: flex-start;
    }
}

.topic-chip {
    display: inline-grid;
    gap: 2px;
    max-width: 260px;
    min-height: 48px;
    padding: 9px 11px;
    border: 1px solid var(--line);
    border-left: 5px solid var(--muted);
    border-radius: 10px;
    background: #fffdf9;
    color: var(--ink);
    text-decoration: none;
}

.topic-chip span {
    font-weight: 700;
    line-height: 1.2;
}

.topic-chip em {
    color: var(--muted);
    font-style: normal;
    font-size: 12px;
}

.topic-chip.started {
    border-left-color: var(--gold);
}

.topic-chip.practiced {
    border-left-color: #377ca8;
}

.topic-chip.secure {
    border-left-color: var(--sage);
}

.topic-chip.review {
    border-left-color: var(--danger);
    background: #fff7f6;
}

.subject-list,
.competency-list,
.migration-list {
    display: grid;
    gap: 10px;
}

.subject-item,
.competency-item,
.migration-item {
    display: grid;
    gap: 5px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fffdf9;
}

.subject-head,
.competency-head,
.migration-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.subject-head strong,
.competency-head strong,
.migration-head strong {
    min-width: 0;
}

.tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tag {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    background: #fffdf9;
    font-size: 12px;
}

.tag.core {
    color: #fff;
    background: var(--sage);
    border-color: var(--sage);
}

.tag.profile {
    color: #fff;
    background: var(--terra);
    border-color: var(--terra);
}

.muted {
    color: var(--muted);
}

.section-title {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 18px;
    margin-bottom: 14px;
}

.section-title p {
    margin: 6px 0 0;
    color: var(--muted);
}

.section-title h3 {
    margin: 0;
    font-family: var(--serif);
}

.narrow-shell,
.app-shell.narrow {
    width: min(940px, calc(100% - 40px));
}

.calm-panel {
    margin-bottom: 18px;
}

.page-title {
    margin: 0;
    font-family: var(--serif);
    font-weight: 700;
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.08;
}

.lead.compact {
    max-width: 760px;
}

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

.step-label {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-bottom: 10px;
    border-radius: 50%;
    background: var(--sage);
    color: #fff;
    font-weight: 700;
}

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

.form-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-spacer {
    margin-top: 18px;
}

.field {
    display: grid;
    gap: 7px;
}

.field span,
.field-caption {
    color: var(--muted);
    font-size: 14px;
}

.field input,
.field select,
.field textarea {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px 12px;
    background: #fff;
    color: var(--ink);
    font: inherit;
}

.field textarea {
    resize: vertical;
}

.response-part-guide {
    display: grid;
    gap: 0.6rem;
    margin: 0.2rem 0 0.65rem;
}

.response-part-guide-item {
    display: grid;
    gap: 0.4rem;
    border: 1px solid rgba(170, 83, 43, 0.24);
    border-left: 4px solid rgba(170, 83, 43, 0.62);
    border-radius: 10px;
    background: #fffaf2;
    padding: 0.7rem 0.8rem;
}

.response-part-guide-item strong {
    color: var(--forest);
}

.response-part-guide-item span {
    color: var(--ink);
}

.response-part-guide-item small {
    color: var(--muted);
    font-size: 0.85rem;
}

.response-part-guide-item textarea {
    min-height: 58px;
    margin-top: 0.25rem;
    background: #fffdf9;
}

.response-part-guide-item input[data-response-part-input] {
    max-width: 260px;
    margin-top: 0.25rem;
    background: #fffdf9;
    font-size: 1.08rem;
    font-weight: 700;
}

.numeric-checkpoint-formula {
    color: var(--forest);
    font-size: 1.06rem;
}

.choice-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.choice-card {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fffdf9;
    cursor: pointer;
}

.choice-card input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--accent);
}

.choice-card span {
    font-weight: 700;
}

.choice-card:has(input:checked) {
    border-color: var(--accent);
    background: var(--sage-p);
}

.avatar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 10px;
}

.avatar-choice {
    position: relative;
    display: grid;
    gap: 7px;
    justify-items: center;
    min-height: 150px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fffdf9;
    text-align: center;
    cursor: pointer;
}

.avatar-choice input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
}

.avatar-choice img {
    width: 76px;
    height: 76px;
    border-radius: 16px;
}

.avatar-choice span {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.2;
}

.avatar-choice:has(input:checked) {
    border-color: var(--accent);
    background: var(--sage-p);
    box-shadow: inset 0 0 0 2px rgba(61, 107, 71, .12);
}

.action-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 18px;
}

.compact-actions {
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 0;
}

.notice {
    margin: 0 0 18px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
}

.notice.success {
    border-color: #9ad1c9;
    background: #effaf7;
    color: #155e54;
}

.notice.soft {
    border-color: rgba(45, 103, 72, 0.18);
    background: rgba(232, 240, 235, 0.62);
    color: var(--muted);
}

.notice.warning {
    border-color: #f0c77a;
    background: #fff8e8;
    color: #6f4a10;
}

.notice.danger {
    border-color: #e6b2b2;
    background: #fff4f4;
    color: var(--danger);
}

.feedback-popover {
    position: sticky;
    top: 12px;
    z-index: 10;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
    margin-bottom: 18px;
    padding: 16px 18px;
    border: 1px solid #9ad1c9;
    border-radius: 10px;
    background: #effaf7;
    box-shadow: var(--shadow);
    color: #155e54;
}

.feedback-popover h3,
.feedback-popover p {
    margin: 0;
}

.feedback-popover h3 {
    margin-bottom: 6px;
    font-family: var(--serif);
}

.feedback-popover .eyebrow {
    margin-bottom: 8px;
    color: #155e54;
}

.feedback-close {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(21, 94, 84, .25);
    border-radius: 999px;
    color: #155e54;
    font-size: 22px;
    line-height: 1;
    text-decoration: none;
}

.resume-panel {
    margin-bottom: 18px;
}

.simple-list {
    display: grid;
    gap: 10px;
}

.simple-list > * {
    min-width: 0;
}

.simple-item {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fffdf9;
    overflow-wrap: anywhere;
}

.simple-item span {
    color: var(--ink);
    line-height: 1.58;
}

/* Verbindliche Stundenmatrix: Themen → Einheiten → konkrete Stunden. */
.matrix-reading-guide {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    align-items: center;
    margin: 0 0 18px;
    padding: 13px 16px;
    border: 1px solid rgba(62, 109, 75, .22);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(235, 246, 239, .96), rgba(255, 253, 249, .96));
    color: var(--ink);
    line-height: 1.45;
}

.matrix-reading-guide strong {
    margin-right: 4px;
    color: #155e54;
}

.matrix-reading-guide span {
    color: var(--muted);
    font-size: 14px;
}

.matrix-reading-guide b {
    color: var(--ink);
}

.matrix-topic {
    display: grid;
    gap: 14px;
    margin: 16px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fffdf9;
}

.matrix-topic-head,
.matrix-unit-head,
.matrix-lesson-head {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    justify-content: space-between;
}

.matrix-kicker {
    margin: 0 0 4px;
    color: var(--terra);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.matrix-topic h3,
.matrix-unit h4 {
    margin: 0;
    color: var(--ink);
    font-family: var(--serif);
    line-height: 1.24;
}

.matrix-topic h3 {
    font-size: 22px;
}

.matrix-unit h4 {
    font-size: 18px;
}

.matrix-period {
    flex: 0 0 auto;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(196, 154, 60, .12);
    color: #714a0b;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.3;
    white-space: nowrap;
}

.matrix-unit {
    display: grid;
    gap: 12px;
    padding: 15px;
    border: 1px solid rgba(62, 109, 75, .20);
    border-left: 4px solid var(--sage);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(235, 246, 239, .62), rgba(255, 255, 255, .92));
}

.matrix-connection {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 8px;
    margin: 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(255, 244, 224, .78);
    color: var(--ink);
    font-size: 14px;
    line-height: 1.46;
}

.matrix-connection > span:first-child {
    grid-row: span 2;
    color: var(--terra);
    font-size: 19px;
    font-weight: 800;
}

.matrix-connection b {
    color: #8d5912;
}

.matrix-connection > span:last-child {
    color: var(--ink);
}

.matrix-lesson-path {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.matrix-lesson {
    position: relative;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 11px;
    align-items: stretch;
    padding: 0 0 14px;
}

.matrix-lesson:last-child {
    padding-bottom: 0;
}

.matrix-lesson:not(:last-child)::before {
    position: absolute;
    top: 30px;
    bottom: 0;
    left: 14px;
    width: 2px;
    background: rgba(62, 109, 75, .30);
    content: "";
}

.matrix-lesson-marker {
    z-index: 1;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--sage);
    box-shadow: 0 0 0 1px rgba(62, 109, 75, .3);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
}

.matrix-lesson-body {
    min-width: 0;
    padding: 11px 13px;
    border: 1px solid rgba(83, 92, 103, .18);
    border-radius: 9px;
    background: #fff;
}

.matrix-lesson-body strong {
    color: var(--ink);
    line-height: 1.35;
}

.matrix-lesson-body p {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.52;
}

.matrix-lesson-body p b {
    display: block;
    margin-bottom: 2px;
    color: #155e54;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.matrix-objectives {
    margin-top: .8rem;
    padding: .7rem .8rem;
    border-left: 3px solid var(--sage, #2f7852);
    border-radius: 0 8px 8px 0;
    background: #f4faf6;
    color: var(--ink);
    font-size: .94rem;
    line-height: 1.5;
}

.matrix-objectives > b {
    display: block;
    margin-bottom: .28rem;
    color: #155e54;
    font-size: .73rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.matrix-objectives ul {
    margin: 0;
    padding-left: 1.15rem;
}

.matrix-objectives li + li {
    margin-top: .25rem;
}

.matrix-source-link {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem .55rem;
    align-items: baseline;
    margin-top: .8rem !important;
    padding-top: .7rem;
    border-top: 1px solid var(--line-soft, #e8e1d6);
    font-size: .92rem;
}

.matrix-source-link b {
    margin: 0;
}

.matrix-source-link a {
    color: var(--brand-strong, #1f5b3b);
    font-weight: 700;
}

.matrix-sofatutor-proposal {
    margin-top: .85rem;
    padding: .8rem;
    border: 1px dashed rgba(31, 91, 59, .34);
    border-radius: 9px;
    background: #fbfdfb;
}

.matrix-sofatutor-proposal label {
    display: block;
    margin-bottom: .42rem;
    color: #155e54;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.matrix-sofatutor-proposal-row {
    display: flex;
    gap: .55rem;
    align-items: center;
}

.matrix-sofatutor-proposal-row input {
    flex: 1 1 20rem;
    min-width: 0;
}

.matrix-sofatutor-proposal-row .button {
    flex: 0 0 auto;
    white-space: nowrap;
}

.matrix-sofatutor-proposal small {
    display: block;
    margin-top: .48rem;
    color: var(--muted);
    line-height: 1.42;
}

.matrix-sofatutor-proposal-status {
    margin-top: .55rem !important;
    font-size: .86rem !important;
}

.matrix-sofatutor-proposal-status b {
    display: inline !important;
    margin: 0 !important;
    font-size: inherit !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

@media (max-width: 620px) {
    .matrix-reading-guide,
    .matrix-topic {
        padding: 13px;
    }

    .matrix-topic {
        margin: 12px;
    }

    .matrix-sofatutor-proposal-row {
        align-items: stretch;
        flex-direction: column;
    }

    .matrix-topic-head,
    .matrix-unit-head,
    .matrix-lesson-head {
        flex-direction: column;
        gap: 7px;
    }

    .matrix-topic h3 {
        font-size: 20px;
    }

    .matrix-period {
        align-self: flex-start;
    }
}

.split-item {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.inline-link {
    color: var(--terra);
    font-weight: 700;
}

.companion-panel {
    border-color: var(--sage-l);
    background:
        radial-gradient(circle at top right, rgba(196, 154, 60, .10), transparent 32%),
        linear-gradient(180deg, #ffffff 0%, var(--sage-p) 100%);
}

.dialog-panel {
    display: grid;
    gap: 12px;
    margin: 18px 0;
}

.dialog-bubble {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    width: min(78%, 720px);
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    box-shadow: var(--shadow);
}

.dialog-bubble.ai {
    justify-self: start;
    border-color: var(--sage-l);
    background: var(--sage-p);
}

.dialog-bubble.student {
    justify-self: end;
    border-color: var(--terra-l);
    background: #fff7f2;
}

.dialog-bubble.student {
    justify-content: flex-end;
}

.bubble-avatar {
    flex: 0 0 auto;
    margin-top: 2px;
}

.bubble-body {
    position: relative;
    min-width: 0;
}

.dialog-bubble.student .bubble-body {
    text-align: left;
}

.dialog-bubble span {
    display: block;
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.dialog-bubble p {
    margin: 0;
}

.dialog-bubble small {
    display: block;
    margin-top: 8px;
    color: var(--muted);
}

.inline-recommendation {
    display: grid;
    gap: 6px;
    margin-top: 12px;
    padding: 12px;
    border: 1px solid var(--sage-l);
    border-radius: 10px;
    background: #fff;
}

.inline-recommendation span {
    margin: 0;
    color: var(--ink);
    font-size: 15px;
}

.inline-recommendation em {
    color: var(--muted);
    font-style: normal;
    font-size: 13px;
}

.inline-recommendation .button {
    justify-self: start;
    margin-top: 4px;
}

.dialog-form {
    position: sticky;
    bottom: 0;
}

.intro-dialog-form {
    position: static;
    display: grid;
    gap: 10px;
    margin-top: 12px;
    padding: 14px 16px;
}

.intro-dialog-form .communication-helper {
    gap: 8px;
    margin-bottom: 4px;
    padding: 10px 12px;
}

.intro-dialog-form .helper-chips {
    gap: 6px;
}

.intro-dialog-form .helper-chips span {
    padding: 6px 9px;
    font-size: 12px;
}

.intro-dialog-form .field {
    gap: 5px;
}

.intro-dialog-form textarea {
    min-height: 86px;
    max-height: 132px;
}

.intro-dialog-form .action-row {
    margin-top: 6px;
}

.communication-helper {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
    padding: 12px;
    border: 1px solid var(--sage-l);
    border-radius: 12px;
    background: var(--sage-p);
}

.communication-helper strong {
    color: var(--forest);
    font-size: 14px;
}

.helper-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.helper-chips span {
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fffdfa;
    color: var(--ink);
    font-size: 13px;
}

.lesson-timeline {
    display: grid;
    gap: 14px;
}

.reference-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .75fr);
    gap: 14px;
    margin-bottom: 14px;
}

.reference-card {
    overflow: hidden;
}

.reference-card-formula {
    background:
        linear-gradient(180deg, #ffffff 0%, #fffdf9 100%);
}

.reference-card-visual {
    background: var(--sage-p);
}

.math-stack {
    display: grid;
    gap: 14px;
    margin-top: 16px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fffdf9;
}

.math-line {
    color: var(--ink);
    font-size: 21px;
    text-align: center;
}

.school-formula-block {
    display: inline-flex;
    align-items: baseline;
    width: fit-content;
    max-width: 100%;
    margin: 8px 0;
    padding: 5px 10px;
    border: 1px solid #1f1b18;
    background: #fff;
    color: #111;
    font-size: 1.12em;
    line-height: 1.25;
    white-space: nowrap;
}

.school-formula-inline {
    color: #111;
    white-space: nowrap;
}

.school-formula-block mjx-container,
.school-formula-inline mjx-container {
    margin: 0 !important;
}

.visual-frame {
    display: grid;
    gap: 10px;
    margin: 16px 0 0;
}

.visual-frame img {
    width: 100%;
    max-height: 340px;
    object-fit: contain;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
}

.visual-frame figcaption {
    color: var(--muted);
    font-size: 12px;
}

.visual-frame a {
    color: var(--terra);
    font-weight: 700;
}

.video-frame {
    display: grid;
    gap: 10px;
    margin: 16px 0 0;
}

.video-frame iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #111;
}

.video-frame figcaption {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
    color: var(--muted);
    font-size: 12px;
}

.video-frame a {
    color: var(--terra);
    font-weight: 700;
}

.resource-link-card {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
    margin-top: 16px;
    padding: 14px;
    border: 1px solid rgba(75, 117, 86, .28);
    border-radius: 10px;
    background: #f3faf5;
}

.resource-task-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, auto);
    align-items: center;
    gap: 16px;
    margin: 18px 0;
    padding: 18px;
    border: 2px solid rgba(196, 154, 60, .48);
    border-radius: 10px;
    background:
        radial-gradient(circle at top right, rgba(196, 154, 60, .18), transparent 34%),
        #fffaf0;
    box-shadow: 0 12px 30px rgba(24, 40, 26, .10);
}

.resource-link-card span,
.resource-task-box span {
    color: #8a5a16;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.resource-link-card a,
.resource-task-box strong {
    color: var(--forest);
    font-weight: 800;
}

.resource-task-box strong {
    display: block;
    margin-top: 3px;
    font-size: 20px;
    line-height: 1.2;
}

.resource-task-copy p {
    margin: 8px 0 0;
    color: var(--muted);
}

.resource-open-button {
    justify-self: end;
    min-height: 58px;
    padding: 0 24px;
    border-color: #8a5a16;
    background: linear-gradient(135deg, var(--terra), #8a3f20);
    color: #fff;
    font-size: 17px;
    box-shadow: 0 0 0 0 rgba(160, 82, 45, .36);
    animation: resource-cta-pulse 1.9s ease-in-out infinite;
}

.resource-open-button:hover,
.resource-open-button:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(160, 82, 45, .24);
}

.resource-cycle-note {
    grid-column: 1 / -1;
    padding: 12px 14px;
    border: 1px solid #d7e6dc;
    border-radius: 8px;
    background: rgba(255, 255, 255, .72);
}

.resource-cycle-note strong {
    display: block;
    margin-bottom: 6px;
    color: var(--forest);
}

.resource-cycle-note ol {
    margin: 0;
    padding-left: 22px;
    color: var(--muted);
}

.resource-cycle-note li + li {
    margin-top: 4px;
}

@keyframes resource-cta-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(160, 82, 45, .32);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(160, 82, 45, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .resource-open-button,
    .vocabulary-dashboard-card.has-due-vocabulary {
        animation: none;
    }
}

@media (max-width: 760px) {
    .resource-task-box {
        grid-template-columns: 1fr;
    }

    .resource-open-button {
        justify-self: stretch;
        width: 100%;
    }

    .lesson-companion-help-note {
        margin-left: 0;
    }
}

@media (max-width: 760px) {
    .lesson-compass-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 520px) {
    .lesson-compass-grid {
        grid-template-columns: 1fr;
    }
}

.lesson-step,
.lesson-step-preview-locked {
    position: relative;
}

.lesson-completed-trail {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 12px 16px;
    border: 1px solid #d7e6dc;
    border-left: 4px solid #5b8a67;
    border-radius: 8px;
    background: #f5faf6;
}

.lesson-completed-trail-check {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #3f7750;
    color: #fff;
    font-weight: 800;
}

.lesson-completed-trail .eyebrow {
    margin: 0 0 3px;
}

.lesson-completed-trail strong,
.lesson-completed-trail p,
.lesson-completed-trail small {
    display: block;
}

.lesson-completed-trail strong {
    color: var(--forest);
}

.lesson-completed-trail p {
    margin: 3px 0 0;
    color: var(--muted);
}

.lesson-completed-trail small {
    margin-top: 6px;
    color: #627568;
}

.lesson-step-preview-locked,
.lesson-step:has(.lesson-locked) {
    opacity: .72;
}

.lesson-step-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.step-state {
    margin: 0 0 10px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
}

.lesson-compass {
    margin: 12px 0 18px;
    padding: 12px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.lesson-compass-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.lesson-compass-item {
    min-width: 0;
}

.lesson-compass-item span {
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.lesson-compass-item p,
.lesson-compass-check {
    margin: 0;
    color: var(--ink);
    font-size: 13px;
    line-height: 1.45;
}

.lesson-compass-check {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--line);
    color: var(--muted);
}

.lesson-content {
    display: grid;
    gap: 10px;
}

.lesson-content p {
    max-width: 78ch;
    margin: 0;
    color: var(--muted);
}

.companion-speech {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.speech-card {
    position: relative;
    padding: 12px 14px;
    border: 1px solid var(--sage-l);
    border-radius: 10px;
    background: var(--sage-p);
}

.tts-button {
    position: absolute;
    top: 10px;
    right: 10px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid rgba(61, 107, 71, .18);
    border-radius: 999px;
    background: rgba(255, 255, 255, .82);
    color: var(--forest);
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
}

.tts-button:hover,
.tts-button.is-playing {
    border-color: var(--forest);
    background: var(--forest);
    color: #fff;
}

.tts-button.is-loading {
    color: transparent;
}

.tts-button.is-loading::after {
    content: "";
    width: 13px;
    height: 13px;
    border: 2px solid rgba(61, 107, 71, .25);
    border-top-color: var(--forest);
    border-radius: 999px;
    animation: spin .8s linear infinite;
}

.speech-card .tts-button + p,
.lesson-prompt .tts-button + strong,
.bubble-body .tts-button + span {
    padding-right: 34px;
}

.button.is-loading .button-label {
    display: none;
}

.button.is-loading .loading-label {
    display: inline;
}

.speaking-demo {
    margin-bottom: 18px;
}

.speaking-flow {
    display: grid;
    gap: 16px;
    margin-top: 18px;
}

.speaking-task-card {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.speaking-example,
.speaking-record-card,
.speaking-feedback-card {
    position: relative;
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fffdf9;
}

.speaking-feedback-card[hidden] {
    display: none;
}

.speaking-record-card[hidden],
.speaking-intent-panel[hidden],
.speaking-intent-result[hidden] {
    display: none;
}

.speaking-example {
    border-color: var(--sage-l);
    background: #fff;
}

.speaking-example strong,
.speaking-record-card h3,
.speaking-feedback-card h3 {
    margin: 0;
    font-family: var(--serif);
    color: var(--forest);
}

.speaking-example p,
.speaking-record-card p,
.speaking-feedback-card p {
    margin: 0;
    color: var(--muted);
}

.speaking-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.speaking-file-button {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.speaking-file-button input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.speaking-live-status {
    min-height: 24px;
    font-weight: 700;
}

.speaking-meter {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
}

.speaking-meter > div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.speaking-meter strong {
    color: var(--forest);
}

.speaking-meter span {
    color: var(--muted);
    font-size: 14px;
    font-weight: 700;
}

.speaking-meter-track {
    width: 100%;
    height: 12px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--cream-d);
}

.speaking-meter-track i {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--muted);
    transition: width .08s linear, background-color .12s ease;
}

.speaking-meter.is-low .speaking-meter-track i {
    background: var(--danger);
}

.speaking-meter.is-good .speaking-meter-track i {
    background: var(--accent);
}

.speaking-meter.is-hot .speaking-meter-track i {
    background: var(--gold);
}

.speaking-recognized {
    margin: -4px 0 0;
    padding: 10px 12px;
    border: 1px solid var(--sage-l);
    border-radius: 10px;
    background: var(--sage-p);
    color: var(--forest);
    font-weight: 700;
}

.speaking-recognized[hidden] {
    display: none;
}

.speaking-score-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.speaking-score-row span {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.speaking-score-row span.is-good {
    border-color: var(--sage-l);
    background: var(--sage-p);
    color: var(--forest);
}

.speaking-score-row span.is-open {
    border-color: #e6c8ba;
    background: var(--terra-l);
    color: var(--terra);
}

.speaking-target-sentence {
    position: relative;
    display: grid;
    gap: 4px;
    padding: 14px;
    border: 1px solid var(--sage-l);
    border-radius: 10px;
    background: var(--sage-p);
}

.speaking-target-sentence strong {
    color: var(--forest);
}

.speaking-target-sentence p {
    padding-right: 34px;
    color: var(--ink);
    font-size: 18px;
    font-weight: 700;
}

.speaking-target-translation {
    padding: 10px 12px;
    border-left: 3px solid var(--sage-l);
    border-radius: 8px;
    background: #f7faf2;
    color: var(--forest) !important;
    font-weight: 700;
}

.speaking-followup-box {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(31, 87, 82, .18);
    border-radius: 10px;
    background: #fff;
}

.speaking-followup-box > strong {
    color: var(--forest);
}

.speaking-intent-panel {
    display: grid;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
}

.speaking-intent-result {
    display: grid;
    gap: 8px;
}

.speaking-intent-target {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 12px;
    border: 1px solid var(--sage-l);
    border-radius: 10px;
    background: var(--sage-p);
}

.speaking-intent-target strong {
    color: var(--forest);
}

.speaking-intent-target small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-weight: 700;
}

.speaking-practice-card {
    border-color: var(--sage-l);
    background: #fdfcf8;
}

.speech-card::before,
.lesson-prompt::before {
    content: "";
    position: absolute;
    top: 18px;
    left: -8px;
    width: 14px;
    height: 14px;
    border-left: 1px solid var(--sage-l);
    border-bottom: 1px solid var(--sage-l);
    background: inherit;
    transform: rotate(45deg);
}

.lesson-prompt {
    position: relative;
    display: grid;
    gap: 10px;
    padding: 16px 18px;
    border: 1px solid rgba(151, 79, 57, .18);
    border-left: 5px solid var(--terra);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .74) 0%, rgba(255, 250, 242, .94) 100%);
}

.lesson-prompt strong {
    font-family: var(--serif);
    color: var(--terra);
}

.lesson-prompt span {
    color: var(--ink);
    line-height: 1.55;
}

.student-teacher-surface {
    display: grid;
    gap: 10px;
}

.student-teacher-surface p {
    margin: 0;
}

.student-teacher-surface .teacher-lead {
    color: var(--ink);
    font-size: 1.03rem;
    line-height: 1.62;
}

.teacher-surface-steps {
    display: grid;
    gap: 8px;
}

.teacher-surface-steps p {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 12px 14px;
    border: 1px solid rgba(151, 79, 57, .16);
    border-radius: 8px;
    background: rgba(255, 253, 249, .9);
    color: var(--ink);
    line-height: 1.55;
}

.teacher-surface-steps p > span:first-child {
    color: var(--terra);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.teacher-surface-steps .teacher-surface-value {
    min-width: 0;
}

.teacher-surface-steps .teacher-answer-format {
    background: #fffdf7;
    border-left: 3px solid #c98a4f;
    padding-left: 0.75rem;
}

.student-teacher-surface .teacher-surface-help {
    padding: 10px 12px;
    border: 1px solid rgba(45, 103, 72, .2);
    border-radius: 8px;
    background: #f7fbf8;
    color: var(--forest);
    font-size: 14px;
    line-height: 1.45;
}

@media (max-width: 560px) {
    .teacher-surface-steps p {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

.lesson-companion-help-note {
    display: grid;
    gap: 4px;
    margin: 12px 0 14px 64px;
    padding: 12px 14px;
    border: 1px solid rgba(45, 103, 72, .2);
    border-radius: 10px;
    background: #f7fbf8;
    color: var(--forest);
}

.lesson-companion-help-note strong {
    display: block;
    font-size: 14px;
}

.lesson-companion-help-note span {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.45;
}

.teacher-move-surface {
    display: grid;
    gap: 9px;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid rgba(151, 79, 57, .22);
}

.lesson-prompt .teacher-move-surface > strong {
    font-family: var(--sans);
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.teacher-move-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 14px;
}

.teacher-move-item {
    min-width: 0;
}

.teacher-move-item span {
    display: block;
    margin-bottom: 3px;
    color: var(--terra);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.teacher-move-item p {
    margin: 0;
    color: var(--ink);
    font-size: 13px;
    line-height: 1.4;
}

@media (max-width: 520px) {
    .teacher-move-grid {
        grid-template-columns: 1fr;
    }
}

.prompt-speech {
    margin-top: 14px;
}

.prompt-speech .lesson-prompt::before {
    border-color: var(--terra-l);
}

.step-visual {
    display: grid;
    gap: 10px;
    margin: 16px 0 0;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fffdf9;
}

.step-visual figcaption {
    color: var(--terra);
    font-family: var(--serif);
    font-weight: 700;
}

.step-visual small {
    color: var(--muted);
    font-weight: 700;
}

.step-visual small a {
    color: var(--terra);
}

.concept-card-visual {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.concept-card-visual span {
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 14px;
    border: 1px solid rgba(180, 84, 46, 0.22);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(255, 251, 242, 0.95), rgba(239, 248, 241, 0.95));
    color: var(--ink);
    font-weight: 800;
    text-align: center;
}

.scene-sketch-visual {
    display: grid;
    grid-template-columns: minmax(120px, 0.9fr) minmax(0, 2fr);
    gap: 14px;
    align-items: stretch;
    margin-top: 10px;
}

.scene-sketch-center {
    min-height: 150px;
    display: grid;
    place-items: center;
    padding: 18px;
    border: 1px solid rgba(68, 117, 111, 0.28);
    border-radius: 10px;
    background:
        linear-gradient(135deg, rgba(239, 248, 241, 0.96), rgba(255, 251, 242, 0.96)),
        repeating-linear-gradient(45deg, transparent 0 12px, rgba(68, 117, 111, 0.08) 12px 13px);
    color: var(--ink);
    text-align: center;
    font-weight: 900;
}

.scene-sketch-center span {
    max-width: 15ch;
}

.scene-sketch-points {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
}

.scene-sketch-points span {
    min-height: 68px;
    display: flex;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid rgba(180, 84, 46, 0.18);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    font-weight: 750;
    line-height: 1.35;
}

.process-diagram-visual {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: stretch;
    margin-top: 10px;
}

.process-diagram-visual .process-diagram-step {
    flex: 1 1 150px;
    display: flex;
    gap: 10px;
    align-items: center;
    min-height: 64px;
    padding: 12px;
    border: 1px solid rgba(68, 117, 111, 0.24);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    font-weight: 750;
}

.process-diagram-visual .process-diagram-arrow {
    align-self: center;
    color: var(--sage);
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
}

.lesson-frame-panel {
    align-self: start;
}

.lesson-frame-details {
    display: grid;
    gap: 14px;
}

.lesson-frame-details > summary {
    cursor: pointer;
    color: var(--forest);
    font-family: var(--serif);
    font-size: 1.1rem;
    font-weight: 800;
    list-style: none;
}

.lesson-frame-details > summary::-webkit-details-marker {
    display: none;
}

.lesson-frame-details > summary::after {
    content: "+";
    float: right;
    color: var(--terra);
    font-family: var(--sans);
    font-size: 1.25rem;
    line-height: 1;
}

.lesson-frame-details[open] > summary::after {
    content: "−";
}

.anatomy-signal-map {
    display: grid;
    gap: 14px;
    margin-top: 12px;
    padding: 14px;
    border: 1px solid rgba(47, 109, 83, 0.3);
    border-radius: 8px;
    background: #fbfdf9;
}

.anatomy-signal-map-svg {
    display: block;
    width: 100%;
    max-width: 960px;
    height: auto;
    margin: 0 auto;
    border-radius: 6px;
    background: #ffffff;
}

.anatomy-signal-scene > * {
    vector-effect: non-scaling-stroke;
}

.anatomy-signal-cup,
.anatomy-signal-arm,
.anatomy-signal-torso,
.anatomy-signal-head,
.anatomy-signal-spine {
    fill: #f5eadf;
    stroke: #634b3e;
    stroke-width: 2.3;
}

.anatomy-signal-steam {
    fill: none;
    stroke: #9ca4aa;
    stroke-width: 2;
}

.anatomy-signal-heat {
    fill: #e7785d;
    opacity: 0.78;
}

.anatomy-signal-muscle {
    fill: #d46d65;
    stroke: #934d49;
    stroke-width: 1.8;
}

.anatomy-signal-spinal-cord {
    fill: none;
    stroke: #8d725c;
    stroke-width: 8;
    stroke-linecap: round;
}

.anatomy-signal-brain {
    fill: #dcb9be;
    stroke: #8f6670;
    stroke-width: 2;
}

.anatomy-signal-switch {
    fill: #f1c55a;
    stroke: #8a6a23;
    stroke-width: 2;
}

.anatomy-signal-path {
    fill: none;
    stroke-width: 6;
    stroke-linecap: round;
}

.anatomy-signal-path.stimulus {
    stroke: #bb4c34;
}

.anatomy-signal-path.sensory {
    stroke: #246aaa;
}

.anatomy-signal-path.motor,
.anatomy-signal-withdraw {
    stroke: #337853;
    stroke-width: 6;
    fill: none;
}

.anatomy-signal-path.awareness {
    stroke: #7d5f98;
    stroke-dasharray: 10 8;
}

.anatomy-signal-labels text {
    fill: #203329;
    font-family: inherit;
    font-size: 20px;
    font-weight: 750;
}

.anatomy-signal-map-svg-premium {
    max-width: 1120px;
    border: 1px solid rgba(47, 109, 83, 0.16);
}

.anatomy-signal-map-svg-premium .anatomy-signal-background {
    fill: url(#anatomy-signal-bg);
    stroke: rgba(47, 109, 83, 0.17);
    stroke-width: 2;
}

.anatomy-signal-map-svg-premium .anatomy-signal-kicker {
    fill: #a34c27;
    font-family: inherit;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 2px;
}

.anatomy-signal-map-svg-premium .anatomy-signal-heading {
    fill: #193e32;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 29px;
    font-weight: 700;
}

.anatomy-signal-map-svg-premium .anatomy-signal-cue circle {
    fill: #397654;
}

.anatomy-signal-map-svg-premium .anatomy-signal-cue > text:not(.anatomy-signal-cue-text):not(.anatomy-signal-cue-subtext) {
    fill: #fff;
    font-family: inherit;
    font-size: 18px;
    font-weight: 800;
    text-anchor: middle;
}

.anatomy-signal-map-svg-premium .anatomy-signal-cue-text {
    fill: #203329;
    font-family: inherit;
    font-size: 18px;
    font-weight: 800;
}

.anatomy-signal-map-svg-premium .anatomy-signal-cue-subtext {
    fill: #62756a;
    font-family: inherit;
    font-size: 15px;
}

.anatomy-signal-map-svg-premium .anatomy-signal-cup,
.anatomy-signal-map-svg-premium .anatomy-signal-arm,
.anatomy-signal-map-svg-premium .anatomy-signal-hand,
.anatomy-signal-map-svg-premium .anatomy-signal-neck,
.anatomy-signal-map-svg-premium .anatomy-signal-head {
    fill: url(#anatomy-signal-body);
    stroke: #765948;
    stroke-width: 2.4;
}

.anatomy-signal-map-svg-premium .anatomy-signal-torso {
    fill: url(#anatomy-signal-shirt);
    stroke: #173f36;
    stroke-width: 2.4;
}

.anatomy-signal-map-svg-premium .anatomy-signal-cup {
    fill: #f8f6f0;
    stroke: #875a44;
}

.anatomy-signal-map-svg-premium .anatomy-signal-cup-rim,
.anatomy-signal-map-svg-premium .anatomy-signal-hair,
.anatomy-signal-map-svg-premium .anatomy-signal-switch-mark {
    fill: none;
    stroke: #563e33;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.anatomy-signal-map-svg-premium .anatomy-signal-hair {
    fill: #4a352d;
    stroke: #4a352d;
}

.anatomy-signal-map-svg-premium .anatomy-signal-heat {
    fill: url(#anatomy-signal-heat);
    opacity: 1;
}

.anatomy-signal-map-svg-premium .anatomy-signal-steam {
    stroke-width: 3;
}

.anatomy-signal-map-svg-premium .anatomy-signal-muscle {
    fill: #d36c61;
    stroke: #984840;
    stroke-width: 2.2;
}

.anatomy-signal-map-svg-premium .anatomy-signal-spine {
    fill: none;
    stroke: #c7d6d0;
    stroke-width: 16;
    stroke-linecap: round;
}

.anatomy-signal-map-svg-premium .anatomy-signal-spinal-cord {
    stroke: #f0c65a;
    stroke-width: 8;
}

.anatomy-signal-map-svg-premium .anatomy-signal-brain {
    fill: #d9b4bb;
    stroke: #8a6069;
    stroke-width: 2.4;
}

.anatomy-signal-map-svg-premium .anatomy-signal-switch {
    fill: #ffd56c;
    stroke: #896619;
    stroke-width: 2.5;
}

.anatomy-signal-map-svg-premium .anatomy-signal-path {
    stroke-width: 8;
    filter: drop-shadow(0 2px 1px rgba(23, 52, 44, 0.15));
}

.anatomy-signal-map-svg-premium .anatomy-signal-withdraw {
    stroke-width: 7;
    stroke-dasharray: 8 6;
}

.anatomy-signal-map-svg-premium .anatomy-signal-label rect {
    fill: #fff;
    stroke: rgba(47, 109, 83, 0.24);
    stroke-width: 1.5;
}

.anatomy-signal-map-svg-premium .anatomy-signal-label text {
    fill: #203329;
    font-size: 17px;
}

.anatomy-signal-map-svg-premium .anatomy-signal-label-heat rect {
    stroke: #d67858;
}

.anatomy-signal-map-svg-premium .anatomy-signal-label-sensory rect {
    stroke: #4c82b6;
}

.anatomy-signal-map-svg-premium .anatomy-signal-label-muscle rect {
    stroke: #55906b;
}

.anatomy-signal-map-svg-premium .anatomy-signal-label-brain rect {
    stroke: #9677aa;
}

.anatomy-signal-map-svg-premium .anatomy-signal-key rect {
    fill: rgba(47, 109, 83, 0.22);
}

.anatomy-signal-map-svg-premium .anatomy-signal-key text {
    fill: #56695f;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
}

.anatomy-signal-map-svg-premium .anatomy-signal-key-dot.sensory {
    fill: #246aaa;
}

.anatomy-signal-map-svg-premium .anatomy-signal-key-dot.motor {
    fill: #337853;
}

.anatomy-signal-map-svg-premium .anatomy-signal-key-dot.awareness {
    fill: #7d5f98;
}

.anatomy-signal-map-svg-mobile {
    display: none;
}

.anatomy-signal-map-svg-mobile .anatomy-mobile-background {
    fill: url(#anatomy-mobile-bg);
    stroke: rgba(47, 109, 83, 0.2);
    stroke-width: 2;
}

.anatomy-signal-map-svg-mobile .anatomy-mobile-kicker {
    fill: #a34c27;
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.6px;
}

.anatomy-signal-map-svg-mobile .anatomy-mobile-heading {
    fill: #193e32;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 19px;
    font-weight: 700;
}

.anatomy-signal-map-svg-mobile .anatomy-mobile-subheading {
    fill: #466459;
    font-family: inherit;
    font-size: 15px;
    font-weight: 750;
}

.anatomy-signal-map-svg-mobile .anatomy-mobile-cup,
.anatomy-signal-map-svg-mobile .anatomy-mobile-arm,
.anatomy-signal-map-svg-mobile .anatomy-mobile-hand,
.anatomy-signal-map-svg-mobile .anatomy-mobile-head {
    fill: #f1d5bf;
    stroke: #765948;
    stroke-width: 2;
}

.anatomy-signal-map-svg-mobile .anatomy-mobile-torso {
    fill: url(#anatomy-mobile-shirt);
    stroke: #173f36;
    stroke-width: 2;
}

.anatomy-signal-map-svg-mobile .anatomy-mobile-steam {
    fill: none;
    stroke: #9ca4aa;
    stroke-width: 2.5;
    stroke-linecap: round;
}

.anatomy-signal-map-svg-mobile .anatomy-mobile-heat {
    fill: url(#anatomy-mobile-heat);
}

.anatomy-signal-map-svg-mobile .anatomy-mobile-hair {
    fill: #4a352d;
    stroke: #4a352d;
}

.anatomy-signal-map-svg-mobile .anatomy-mobile-spine {
    fill: none;
    stroke: #c7d6d0;
    stroke-width: 14;
    stroke-linecap: round;
}

.anatomy-signal-map-svg-mobile .anatomy-mobile-cord {
    fill: none;
    stroke: #f0c65a;
    stroke-width: 7;
    stroke-linecap: round;
}

.anatomy-signal-map-svg-mobile .anatomy-mobile-brain {
    fill: #d9b4bb;
    stroke: #8a6069;
    stroke-width: 2;
}

.anatomy-signal-map-svg-mobile .anatomy-mobile-switch {
    fill: #ffd56c;
    stroke: #896619;
    stroke-width: 2;
}

.anatomy-signal-map-svg-mobile .anatomy-mobile-path,
.anatomy-signal-map-svg-mobile .anatomy-mobile-withdraw {
    fill: none;
    stroke-width: 6;
    stroke-linecap: round;
    filter: drop-shadow(0 1px 1px rgba(23, 52, 44, 0.13));
}

.anatomy-signal-map-svg-mobile .anatomy-mobile-path.stimulus {
    stroke: #bb4c34;
}

.anatomy-signal-map-svg-mobile .anatomy-mobile-path.sensory {
    stroke: #246aaa;
}

.anatomy-signal-map-svg-mobile .anatomy-mobile-path.motor,
.anatomy-signal-map-svg-mobile .anatomy-mobile-withdraw {
    stroke: #337853;
}

.anatomy-signal-map-svg-mobile .anatomy-mobile-path.awareness {
    stroke: #7d5f98;
    stroke-dasharray: 8 6;
}

.anatomy-signal-map-svg-mobile .anatomy-mobile-label rect,
.anatomy-signal-map-svg-mobile .anatomy-mobile-message {
    fill: #fff;
    stroke: rgba(47, 109, 83, 0.28);
    stroke-width: 1.2;
}

.anatomy-signal-map-svg-mobile .anatomy-mobile-label text,
.anatomy-signal-map-svg-mobile .anatomy-mobile-key text,
.anatomy-signal-map-svg-mobile .anatomy-mobile-message + text,
.anatomy-signal-map-svg-mobile .anatomy-mobile-message ~ text {
    fill: #203329;
    font-family: inherit;
    font-size: 13px;
    font-weight: 750;
}

.anatomy-signal-map-svg-mobile .anatomy-mobile-key rect {
    fill: rgba(47, 109, 83, 0.2);
}

.anatomy-signal-map-svg-mobile .anatomy-mobile-key .sensory {
    fill: #246aaa;
}

.anatomy-signal-map-svg-mobile .anatomy-mobile-key .motor {
    fill: #337853;
}

.anatomy-signal-map-svg-mobile .anatomy-mobile-key .awareness {
    fill: #7d5f98;
}

@media (max-width: 620px) {
    .anatomy-signal-map-svg-premium:not(.anatomy-signal-map-svg-mobile) {
        display: none;
    }

    .anatomy-signal-map-svg-mobile {
        display: block;
        width: 100%;
        max-width: 360px;
        height: auto;
    }
}

.anatomy-signal-legend {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: anatomy-stage;
}

.anatomy-signal-legend li {
    counter-increment: anatomy-stage;
    min-height: 56px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 11px;
    border: 1px solid rgba(47, 109, 83, 0.2);
    border-radius: 6px;
    background: #ffffff;
    color: var(--ink);
    font-weight: 700;
    line-height: 1.35;
}

.anatomy-signal-legend li::before {
    content: counter(anatomy-stage);
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    background: #397654;
    color: #fff;
    font-size: 0.82rem;
}

.string-vibration-simulation {
    margin-top: 12px;
    border: 1px solid rgba(47, 109, 83, 0.28);
    background: #f6fbf7;
    padding: 16px;
    display: grid;
    gap: 14px;
}

.string-vibration-simulation-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 14px;
}

.string-vibration-simulation-head strong {
    color: var(--ink);
    font-size: 1.05rem;
}

.string-vibration-simulation-head span,
.string-vibration-note {
    color: var(--muted);
}

.string-vibration-control {
    display: grid;
    grid-template-columns: minmax(170px, 1fr) minmax(140px, 2fr) auto;
    align-items: center;
    gap: 12px;
    font-weight: 750;
}

.string-vibration-control input {
    accent-color: var(--sage);
}

.string-vibration-control output {
    min-width: 66px;
    padding: 6px 8px;
    border: 1px solid var(--line);
    background: #fff;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.string-vibration-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.string-vibration-presets button {
    border: 1px solid rgba(47, 109, 83, 0.38);
    background: #fff;
    color: var(--ink);
    padding: 7px 10px;
    font: inherit;
    font-weight: 750;
    cursor: pointer;
}

.string-vibration-presets button:hover,
.string-vibration-presets button:focus-visible {
    border-color: var(--sage);
    background: #e6f1e8;
}

.string-vibration-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.string-vibration-play {
    border: 1px solid var(--sage);
    background: var(--sage);
    color: #fff;
    padding: 8px 12px;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.string-vibration-play:hover,
.string-vibration-play:focus-visible {
    background: #244f3d;
}

.string-vibration-actions span {
    color: var(--muted);
    font-size: 0.92rem;
}

.string-vibration-stage {
    overflow: hidden;
    border: 1px solid rgba(47, 109, 83, 0.22);
    background: #fff;
}

.string-vibration-readings {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-bottom: 1px solid rgba(47, 109, 83, 0.18);
    background: #eef7f0;
}

.string-vibration-reading {
    display: grid;
    gap: 3px;
    min-height: 64px;
    padding: 10px 14px;
    border-right: 1px solid rgba(47, 109, 83, 0.18);
}

.string-vibration-reading:last-child {
    border-right: 0;
}

.string-vibration-reading small {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.string-vibration-reading strong {
    color: var(--ink);
    font-size: 1.1rem;
}

.string-vibration-canvas {
    display: block;
    width: 100%;
    height: 220px;
}

.string-vibration-stage-caption {
    margin: 0;
    padding: 0 14px 12px;
    color: var(--muted);
    font-size: 0.86rem;
}

.string-vibration-result {
    margin: 0;
    padding: 10px 12px;
    border-left: 4px solid var(--sage);
    background: #fff;
    font-weight: 700;
}

.string-vibration-note {
    margin: 0;
    line-height: 1.45;
}

.string-vibration-fallback {
    margin: 14px 0 0;
    border-top: 1px solid rgba(55, 88, 71, 0.2);
    color: var(--muted);
}

.string-vibration-fallback summary {
    padding: 12px 0;
    cursor: pointer;
    color: var(--ink);
    font-weight: 700;
}

.string-vibration-fallback p {
    margin: 0 0 10px;
}

.string-vibration-fallback table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

.string-vibration-fallback th,
.string-vibration-fallback td {
    padding: 8px 10px;
    border: 1px solid rgba(55, 88, 71, 0.2);
    text-align: left;
}

@media (max-width: 680px) {
    .string-vibration-control {
        grid-template-columns: 1fr;
    }

    .string-vibration-control output {
        width: max-content;
    }

    .string-vibration-readings {
        grid-template-columns: 1fr;
    }

    .string-vibration-reading {
        min-height: 0;
        border-right: 0;
        border-bottom: 1px solid rgba(47, 109, 83, 0.18);
    }

    .string-vibration-reading:last-child {
        border-bottom: 0;
    }
}

.process-diagram-visual em {
    width: 28px;
    height: 28px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--sage);
    color: #fff;
    font-style: normal;
    font-weight: 900;
}

.bar-chart-visual {
    display: grid;
    grid-template-columns: 2.6rem minmax(0, 1fr);
    gap: 0.55rem;
    align-items: stretch;
    min-height: 15rem;
    padding: 1rem;
    border: 1px solid #bdd7c6;
    background: #fbfdf9;
}

.bar-chart-scale {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: end;
    padding: 0.45rem 0.35rem 2.35rem 0;
    color: #49675a;
    font-weight: 700;
    font-size: 0.82rem;
}

.bar-chart-bars {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(4.5rem, 1fr));
    gap: 0.75rem;
    align-items: end;
    min-height: 13rem;
    padding: 0.6rem 0.65rem 0;
    border-left: 2px solid #315a44;
    border-bottom: 2px solid #315a44;
    background: repeating-linear-gradient(to top, transparent 0, transparent 24%, #dce9df 24.5%, transparent 25%);
}

.bar-chart-column {
    display: grid;
    grid-template-rows: minmax(9rem, 1fr) auto;
    align-items: end;
    gap: 0.3rem;
    min-width: 0;
    text-align: center;
}

.bar-chart-bar {
    display: block;
    width: min(3.75rem, 75%);
    height: var(--bar-height);
    justify-self: center;
    border: 1px solid #23543d;
    background: #6fab7e;
}

.bar-chart-label {
    min-height: 2.2rem;
    color: #243c30;
    font-weight: 700;
    line-height: 1.15;
}

.bar-chart-axis-label {
    grid-column: 2;
    margin: 0;
    color: #49675a;
    font-size: 0.85rem;
}

.evidence-compare-visual {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    margin-top: 10px;
}

.evidence-compare-visual section {
    min-height: 220px;
    padding: 16px;
    border: 1px solid rgba(68, 117, 111, 0.24);
    border-radius: 10px;
    background: linear-gradient(180deg, #ffffff 0%, #f8faf7 100%);
    color: var(--ink);
}

.evidence-compare-visual strong,
.evidence-compare-visual em,
.evidence-compare-visual small {
    display: block;
}

.evidence-compare-visual strong {
    font-size: 1.02rem;
    color: var(--forest);
}

.evidence-compare-visual em {
    margin-top: 4px;
    color: var(--terracotta);
    font-style: normal;
    font-weight: 800;
}

.evidence-compare-visual ul {
    margin: 12px 0 0;
    padding-left: 1.15rem;
}

.evidence-compare-visual li {
    margin: 7px 0;
    line-height: 1.35;
}

.evidence-compare-visual small {
    margin-top: 12px;
    color: var(--muted);
    font-weight: 750;
}

.labeled-world-map-visual {
    background: #f5fbff;
    border: 1px solid #c8d9e8;
    border-radius: 8px;
    padding: .85rem;
}

.world-map-stage {
    position: relative;
    min-height: 310px;
    overflow: hidden;
    border: 1px solid #b8c9d8;
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .65), rgba(255, 255, 255, 0)),
        #dff3ff;
}

.world-landmass,
.world-water-label {
    position: absolute;
    display: grid;
    place-items: center;
    transform: translate(-50%, -50%);
    font-weight: 800;
}

.world-landmass {
    color: #163b24;
    background: #9fd17f;
    border: 2px solid #4f8a52;
    box-shadow: inset 0 0 0 999px rgba(255, 255, 255, .08);
}

.world-landmass b {
    align-items: center;
    background: #ffffff;
    border: 2px solid #2f6f45;
    border-radius: 999px;
    display: inline-flex;
    font-size: 1.05rem;
    height: 2rem;
    justify-content: center;
    min-width: 2rem;
    padding: 0 .35rem;
}

.world-landmass-oval { border-radius: 48% 52% 45% 55%; }
.world-landmass-long { border-radius: 55% 45% 50% 50%; }
.world-landmass-ring { border-radius: 999px 999px 40% 40%; }
.world-landmass-small { border-radius: 60% 40% 55% 45%; }

.world-water-label {
    background: #ffffff;
    border: 2px solid #3278a8;
    border-radius: 999px;
    color: #17486a;
    height: 2rem;
    min-width: 2rem;
    padding: 0 .35rem;
}

.world-map-compass {
    align-items: center;
    display: grid;
    gap: .15rem;
    grid-template-columns: repeat(3, 1.8rem);
    justify-content: end;
    margin-bottom: .5rem;
}

.world-map-compass span {
    align-items: center;
    background: #ffffff;
    border: 1px solid #b8c9d8;
    border-radius: 999px;
    color: #334e68;
    display: inline-flex;
    font-weight: 800;
    height: 1.8rem;
    justify-content: center;
}

.world-map-compass span:first-child,
.world-map-compass span:last-child {
    grid-column: 2;
}

@media (max-width: 640px) {
    .world-map-stage {
        min-height: 240px;
    }

    .world-landmass b,
    .world-water-label {
        font-size: .9rem;
        height: 1.65rem;
        min-width: 1.65rem;
    }
}

.step-visual-image {
    display: block;
    width: min(100%, 720px);
    min-height: 180px;
    aspect-ratio: 16 / 10;
    max-height: 340px;
    object-fit: contain;
    object-position: center;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
}

.image-generation-wait {
    display: flex;
    align-items: center;
    gap: 18px;
    width: min(100%, 720px);
    min-height: 220px;
    padding: 24px;
    border: 1px solid rgba(63, 110, 75, .24);
    border-radius: 14px;
    background:
        radial-gradient(circle at 18% 22%, rgba(63, 110, 75, .16), transparent 28%),
        linear-gradient(135deg, #f8f4ea 0%, #edf6f0 100%);
    color: var(--forest);
}

.image-generation-wait strong {
    display: block;
    margin-bottom: 6px;
    font-family: var(--serif);
    font-size: clamp(1.2rem, 2vw, 1.65rem);
    line-height: 1.15;
}

.image-generation-wait p {
    margin: 0;
    color: var(--muted);
    font-weight: 700;
}

.image-generation-orbit {
    position: relative;
    flex: 0 0 86px;
    width: 86px;
    height: 86px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .76);
    box-shadow: inset 0 0 0 1px rgba(63, 110, 75, .18), 0 16px 30px rgba(24, 40, 26, .12);
}

.image-generation-orbit::before {
    content: "";
    position: absolute;
    inset: 17px;
    border: 3px solid rgba(63, 110, 75, .2);
    border-top-color: var(--terra);
    border-radius: inherit;
    animation: image-spin 1.1s linear infinite;
}

.image-generation-orbit span {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--terra);
    animation: image-pulse 1.4s ease-in-out infinite;
}

.image-generation-orbit span:nth-child(1) {
    top: 18px;
    left: 38px;
}

.image-generation-orbit span:nth-child(2) {
    right: 20px;
    bottom: 24px;
    animation-delay: .18s;
}

.image-generation-orbit span:nth-child(3) {
    left: 20px;
    bottom: 24px;
    animation-delay: .36s;
}

@keyframes image-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes image-pulse {
    0%, 100% {
        transform: scale(.78);
        opacity: .46;
    }

    50% {
        transform: scale(1.16);
        opacity: 1;
    }
}

@media (max-width: 620px) {
    .image-generation-wait {
        align-items: flex-start;
        flex-direction: column;
        min-height: 240px;
    }
}

.hundred-grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns, 10), minmax(0, 1fr));
    gap: 4px;
    width: min(100%, 460px);
}

.hundred-grid span {
    aspect-ratio: 1;
    border: 1px solid rgba(83, 62, 40, .24);
    border-radius: 4px;
    background: #f6e4ca;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}

.hundred-grid span.marked {
    background: #8b4f2a;
    border-color: #6e3f22;
}

.hundred-grid span.popped {
    transform: translateY(-5px);
    box-shadow: 0 6px 10px rgba(24, 40, 26, .16), inset 0 0 0 1px rgba(255,255,255,.22);
}

.chocolate-visual .hundred-grid {
    padding: 10px;
    border: 1px solid rgba(83, 62, 40, .18);
    border-radius: 10px;
    background: #d49a5b;
}

.fraction-bar {
    display: grid;
    grid-template-columns: repeat(var(--fraction-columns, 4), minmax(0, 1fr));
    width: min(100%, 560px);
    min-height: 54px;
    border: 2px solid var(--forest);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

.fraction-bar span {
    border-right: 1px solid rgba(36, 61, 40, .26);
    background: #fffdf9;
}

.fraction-bar span:last-child {
    border-right: 0;
}

.fraction-bar span.marked {
    background: var(--terra-l);
}

.number-line-visual {
    position: relative;
    width: min(100%, 720px);
    min-height: 110px;
    margin: 10px 8px 0;
    padding: 54px 0 34px;
}

.number-line-axis {
    position: absolute;
    left: 0;
    right: 12px;
    top: 58px;
    height: 3px;
    background: var(--forest);
}

.number-line-arrow {
    position: absolute;
    top: 52px;
    right: 0;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 13px solid var(--forest);
}

.number-line-tick,
.number-line-point {
    position: absolute;
    top: 47px;
    width: 2px;
    height: 24px;
    background: var(--forest);
    transform: translateX(-1px);
}

.number-line-tick em,
.number-line-point em {
    position: absolute;
    top: 28px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--muted);
    font-style: normal;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.number-line-point {
    top: 50px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--terra);
    transform: translateX(-7px);
}

.number-line-point em {
    top: -28px;
    color: var(--terra);
}

.number-line-segment {
    position: absolute;
    top: 52px;
    height: 14px;
    border-radius: 999px;
    background: rgba(160, 82, 45, .26);
}

.boxplot-visual {
    display: grid;
    gap: 14px;
    width: min(100%, 720px);
}

.boxplot-values {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.boxplot-values span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    min-height: 30px;
    padding: 0 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--forest);
    font-weight: 700;
}

.boxplot-chart {
    position: relative;
    min-height: 150px;
    margin: 6px 10px 0;
    padding: 62px 0 48px;
}

.boxplot-axis,
.boxplot-whisker {
    position: absolute;
    top: 86px;
    height: 3px;
    background: var(--forest);
}

.boxplot-axis {
    left: 0;
    right: 0;
    opacity: .2;
}

.boxplot-cap {
    position: absolute;
    top: 66px;
    width: 2px;
    height: 42px;
    background: var(--forest);
    transform: translateX(-1px);
}

.boxplot-cap span,
.boxplot-marker span,
.boxplot-median span {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.boxplot-cap span {
    top: 48px;
}

.boxplot-box {
    position: absolute;
    top: 58px;
    height: 58px;
    border: 3px solid var(--terra);
    border-radius: 8px;
    background: rgba(160, 82, 45, .16);
}

.boxplot-median {
    position: absolute;
    top: 52px;
    width: 4px;
    height: 70px;
    background: var(--forest);
    border-radius: 999px;
    transform: translateX(-2px);
}

.boxplot-median span {
    top: -28px;
    color: var(--forest);
}

.boxplot-marker {
    position: absolute;
    top: 120px;
    width: 2px;
    height: 18px;
    background: var(--terra);
    transform: translateX(-1px);
}

.boxplot-marker span {
    top: 22px;
}

.coordinate-visual {
    width: min(100%, 620px);
}

.coordinate-svg {
    width: 100%;
    min-height: 260px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
}

.coordinate-svg .grid {
    stroke: rgba(36, 61, 40, .12);
    stroke-width: 1;
}

.coordinate-svg .axis {
    stroke: var(--forest);
    stroke-width: 2;
}

.coordinate-svg .plot-line {
    stroke: var(--terra);
    stroke-width: 3;
}

.coordinate-svg .plot-point {
    fill: var(--terra);
}

.coordinate-svg text {
    fill: var(--forest);
    font: 700 12px var(--sans);
}

.geometry-area-visual {
    width: min(100%, 680px);
    margin: 10px auto 0;
}

.geometry-area-svg {
    display: block;
    width: 100%;
    min-height: 330px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.geometry-square {
    stroke: var(--forest);
    stroke-width: 4;
}

.geometry-square.square-a { fill: #dcebdc; }
.geometry-square.square-b { fill: #f8dfcf; }
.geometry-square.square-c { fill: #d8e9ef; }

.geometry-triangle {
    fill: #fffdf8;
    stroke: var(--forest);
    stroke-width: 4;
}

.geometry-side,
.geometry-right-angle {
    fill: none;
    stroke: var(--ink);
    stroke-width: 4;
    stroke-linejoin: miter;
}

.geometry-area-label {
    fill: var(--forest);
    font: 800 38px var(--sans);
}

.geometry-side-label {
    fill: var(--terra);
    font: italic 800 26px var(--serif);
}

.geometry-area-formula {
    display: flex;
    justify-content: center;
    margin: 12px 0 0;
    color: #111;
    font-size: 1.22rem;
}

.balance-visual {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 12px;
    align-items: end;
    width: min(100%, 620px);
}

.balance-pan {
    min-height: 70px;
    display: grid;
    place-items: center;
    padding: 12px;
    border: 2px solid var(--terra);
    border-radius: 10px;
    background: #fff;
    color: var(--forest);
    font-weight: 700;
    text-align: center;
}

.punnett-visual {
    display: grid;
    grid-template-columns: minmax(86px, .8fr) repeat(var(--punnett-columns, 2), minmax(88px, 1fr));
    gap: 8px;
    width: min(520px, 100%);
    margin: 0 auto;
}

.punnett-corner,
.punnett-head,
.punnett-cell {
    display: grid;
    place-items: center;
    min-height: 58px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    font-weight: 800;
}

.punnett-corner,
.punnett-head {
    background: var(--sage-p);
    color: var(--forest);
}

.punnett-head.side {
    background: #fff7f2;
    color: var(--terra);
}

.punnett-cell {
    font-size: 22px;
    font-family: var(--serif);
}

.phenotype-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
}

.phenotype-list span {
    min-height: 28px;
    padding: 4px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fffdf9;
    color: var(--muted);
    font-size: 13px;
}

.balance-stand {
    width: 46px;
    height: 82px;
    border-bottom: 8px solid var(--forest);
    position: relative;
}

.balance-stand::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 6px;
    height: 82px;
    transform: translateX(-50%);
    background: var(--forest);
    border-radius: 999px;
}

.lesson-answer {
    position: relative;
    display: grid;
    gap: 12px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    scroll-margin-top: 22px;
}

.lesson-answer:target,
.lesson-answer.is-input-target {
    margin-inline: -10px;
    padding: 48px 10px 14px;
    border: 2px solid rgba(176, 83, 43, .55);
    border-radius: 14px;
    background: rgba(255, 250, 240, .82);
    animation: lesson-input-pulse 1.15s ease-in-out 3;
}

.lesson-answer:target::before,
.lesson-answer.is-input-target::before {
    content: "Jetzt hier eingeben";
    position: absolute;
    top: 10px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    background: var(--terra);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    box-shadow: 0 10px 22px rgba(176, 83, 43, .24);
}

.lesson-answer textarea {
    min-height: 118px;
    background: #fffdf9;
}

.lesson-teacher-inspection {
    display: grid;
    gap: 4px;
    margin: 0 0 18px;
    border-color: rgba(176, 83, 43, .36);
    background: #fff8eb;
}

.lesson-teacher-inspection-fields {
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.lesson-teacher-inspection-fields:disabled {
    opacity: 1;
}

.lesson-teacher-inspection-fields:disabled input,
.lesson-teacher-inspection-fields:disabled textarea,
.lesson-teacher-inspection-fields:disabled select,
.lesson-teacher-inspection-fields:disabled button {
    cursor: not-allowed;
}

@keyframes lesson-input-pulse {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(176, 83, 43, .30);
    }
    50% {
        box-shadow: 0 0 0 9px rgba(176, 83, 43, .10);
    }
}

@media (prefers-reduced-motion: reduce) {
    .lesson-answer:target,
    .lesson-answer.is-input-target {
        animation: none;
    }
}

.quiz-field {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.quiz-field legend {
    margin-bottom: 10px;
    color: var(--muted);
    font-weight: 700;
}

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

.quiz-options.two {
    grid-template-columns: repeat(2, minmax(0, 220px));
}

.quiz-option {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fffdf9;
    cursor: pointer;
    font-weight: 700;
}

.quiz-option input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--terra);
}

.quiz-option:has(input:checked) {
    border-color: var(--terra);
    background: var(--terra-l);
}

.quiz-letter {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--forest);
    color: #fff;
    font-size: 13px;
}

.short-answer-field input {
    max-width: 240px;
    font-size: 22px;
    font-weight: 700;
}

.cloze-support {
    display: grid;
    gap: 10px;
    margin: 0 0 14px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fffdf9;
}

.cloze-support p {
    margin: 0;
    color: var(--muted);
    font-size: 15px;
}

.cloze-word-bank {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.cloze-word-bank strong {
    margin-right: 4px;
    color: var(--forest);
    font-size: 14px;
}

.cloze-word-bank em {
    flex-basis: 100%;
    margin-bottom: 2px;
    color: var(--muted);
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
}

.cloze-word-bank button,
.cloze-word-bank span {
    padding: 6px 10px;
    border: 1px solid rgba(174, 84, 43, .22);
    border-radius: 999px;
    background: var(--terra-l);
    color: var(--ink);
}

.cloze-word-bank button {
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
}

.cloze-word-bank button:hover,
.cloze-word-bank button:focus-visible,
.cloze-word-bank button.is-used {
    border-color: var(--terra);
    background: #fff7f2;
    box-shadow: inset 0 0 0 1px rgba(160, 82, 45, .18);
}

.cloze-word-bank button:disabled {
    cursor: default;
    opacity: .72;
}

.interactive-task {
    display: grid;
    gap: 12px;
    margin: 12px 0 18px;
    padding: 14px;
    border: 1px solid rgba(75, 117, 86, .24);
    border-radius: 8px;
    background: #fbfdfb;
}

.interactive-task > strong {
    color: var(--forest);
}

.slider-task input[type="range"] {
    width: 100%;
    accent-color: var(--terra);
}

.slider-task output {
    justify-self: start;
    min-width: 90px;
    padding: 7px 10px;
    border: 1px solid #ead8cb;
    border-radius: 8px;
    background: #fff7f1;
    color: var(--forest);
    font-weight: 800;
}

.match-row,
.sort-row,
.cloze-row {
    display: grid;
    grid-template-columns: minmax(150px, .7fr) minmax(220px, 1fr);
    gap: 10px;
    align-items: center;
}

.match-row > span,
.sort-row > span,
.cloze-row > span {
    color: var(--forest);
    font-weight: 800;
}

.match-row select,
.sort-row select,
.cloze-row select {
    min-height: 42px;
    padding: 8px 10px;
    border: 1px solid rgba(75, 117, 86, .25);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    font: inherit;
}

.drag-match-board {
    display: grid;
    gap: 16px;
    margin-top: 14px;
}

.drag-match-source,
.drag-match-targets {
    display: grid;
    gap: 10px;
}

.drag-match-heading {
    color: var(--forest);
    font-weight: 800;
}

.drag-match-token,
.drag-match-target {
    border: 1px solid rgba(47, 113, 72, .26);
    border-radius: 7px;
    box-sizing: border-box;
    color: var(--ink);
    font: inherit;
    line-height: 1.35;
    text-align: left;
}

.drag-match-token {
    background: #fffdf8;
    cursor: grab;
    padding: 12px 14px;
}

.drag-match-token:focus-visible,
.drag-match-token.is-selected {
    box-shadow: 0 0 0 3px rgba(47, 113, 72, .2);
    outline: 0;
}

.drag-match-token.is-assigned {
    background: #eef7ef;
}

.drag-match-target {
    background: #f6faf5;
    min-height: 68px;
    padding: 10px 12px;
}

.drag-match-target:focus-visible {
    box-shadow: 0 0 0 3px rgba(174, 84, 43, .2);
    outline: 0;
}

.drag-match-target-label {
    color: var(--forest);
    display: block;
    font-weight: 800;
}

.drag-match-target-hint,
.drag-match-hint {
    color: var(--muted);
    display: block;
    font-size: 14px;
    margin: 4px 0 0;
}

.drag-match-assigned-list {
    display: grid;
    gap: 6px;
    margin-top: 8px;
}

.drag-match-assigned-token {
    background: #eef7ef;
    border: 1px solid rgba(47, 113, 72, .24);
    border-radius: 5px;
    display: block;
    padding: 7px 8px;
}

.drag-match-task[data-interactive-error]::after {
    color: #a53f22;
    content: attr(data-interactive-error);
    display: block;
    font-weight: 800;
    margin-top: 10px;
}

.sequence-sort-board {
    display: grid;
    gap: 10px;
    margin-top: 4px;
}

.sequence-sort-token {
    align-items: center;
    background: #fffdf8;
    border: 1px solid rgba(47, 113, 72, .26);
    border-radius: 7px;
    cursor: grab;
    display: grid;
    gap: 10px;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    min-height: 58px;
    padding: 10px 12px;
}

.sequence-sort-token.is-dragover {
    border-color: var(--terra);
    box-shadow: 0 0 0 3px rgba(174, 84, 43, .18);
}

.sequence-sort-position {
    align-items: center;
    background: var(--forest);
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    font-weight: 800;
    height: 30px;
    justify-content: center;
    width: 30px;
}

.sequence-sort-text {
    color: var(--ink);
    font-weight: 700;
    line-height: 1.35;
}

.sequence-sort-controls {
    display: inline-flex;
    gap: 6px;
}

.sequence-sort-move {
    align-items: center;
    background: #eef7ef;
    border: 1px solid rgba(47, 113, 72, .28);
    border-radius: 6px;
    color: var(--forest);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: 20px;
    font-weight: 800;
    height: 34px;
    justify-content: center;
    line-height: 1;
    width: 34px;
}

.sequence-sort-move:focus-visible,
.sequence-sort-move:hover {
    border-color: var(--terra);
    box-shadow: 0 0 0 3px rgba(174, 84, 43, .16);
    outline: 0;
}

.sequence-sort-hint {
    color: var(--muted);
    margin: 0;
}

@media (max-width: 620px) {
    .sequence-sort-token {
        grid-template-columns: 30px minmax(0, 1fr);
    }

    .sequence-sort-controls {
        grid-column: 2;
    }
}

.statement-row {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 12px;
    border: 1px solid rgba(75, 117, 86, .18);
    border-radius: 8px;
    background: #fff;
}

.statement-row legend {
    color: var(--forest);
    font-weight: 800;
}

.statement-row label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-right: 12px;
}

.statement-row input {
    accent-color: var(--terra);
}

.lesson-answer-actions {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.lesson-choice-help {
    display: grid;
    gap: 4px;
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid rgba(61, 107, 71, .18);
    border-radius: 10px;
    background: #f7fbf8;
    color: var(--forest);
}

.lesson-choice-help strong {
    font-size: 15px;
}

.lesson-choice-help span {
    color: var(--muted);
    font-size: 14px;
}

.structured-note-field {
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px dashed rgba(61, 107, 71, .28);
    border-radius: 12px;
    background: rgba(247, 251, 248, .72);
}

.structured-note-field textarea {
    min-height: 72px;
}

.structured-note-field small {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-weight: 650;
}

.sofatutor-proof-box {
    display: grid;
    gap: 8px;
    margin-top: 14px;
    padding: 14px;
    border: 1px solid rgba(61, 107, 71, .24);
    border-radius: 10px;
    background: #f7fbf8;
}

.sofatutor-proof-box strong {
    color: var(--forest);
}

.sofatutor-proof-box p,
.sofatutor-proof-box small {
    margin: 0;
    color: var(--muted);
}

.sofatutor-proof-dropzone {
    display: grid;
    gap: 8px;
    padding: 14px;
    border: 2px dashed rgba(138, 90, 22, .45);
    border-radius: 8px;
    background: #fffdf9;
    cursor: pointer;
}

.sofatutor-proof-dropzone.is-ready {
    border-color: rgba(61, 107, 71, .55);
    background: #effaf7;
}

.sofatutor-proof-dropzone.is-dragover {
    border-color: var(--terra);
    background: #fff8e8;
}

.sofatutor-proof-dropzone span {
    color: var(--forest);
    font-weight: 750;
}

.sofatutor-proof-dropzone input {
    width: 100%;
}

.lesson-path-button {
    align-items: flex-start;
    justify-content: flex-start;
    width: min(100%, 340px);
    min-height: 76px;
    padding: 12px 14px;
    border-color: rgba(61, 107, 71, .24);
    background: #fff;
    color: var(--forest);
    text-align: left;
    white-space: normal;
}

.lesson-path-button .button-label {
    display: grid;
    gap: 3px;
}

.lesson-path-button strong {
    font-size: 15px;
    line-height: 1.2;
}

.lesson-path-button small {
    color: var(--muted);
    font-weight: 600;
    line-height: 1.25;
}

.lesson-advance-button {
    border-color: rgba(196, 154, 60, .45);
    background: #fffaf0;
}

.lesson-path-button:hover,
.lesson-path-button:focus-visible {
    border-color: var(--sage);
    box-shadow: 0 8px 20px rgba(24, 40, 26, .10);
}

.lesson-end-button {
    align-self: center;
    margin-left: auto;
}

@media (max-width: 640px) {
    .lesson-answer-actions {
        align-items: stretch;
    }

    .lesson-complete-panel .lesson-answer-actions {
        padding-right: 0;
        padding-bottom: 94px;
    }

    .lesson-end-button {
        width: 100%;
        margin-left: 0;
    }
}

.lesson-answer[data-saving="true"] .lesson-path-button::before {
    border-color: rgba(61, 107, 71, .25);
    border-top-color: var(--forest);
}

.saving-hint {
    display: none;
    margin: 0;
    color: var(--muted);
    font-weight: 700;
}

.lesson-answer[data-saving="true"] .button-label {
    display: none;
}

.lesson-answer[data-saving="true"] .loading-label,
.lesson-answer[data-saving="true"] .saving-hint {
    display: inline;
}

.lesson-answer[data-saving="true"] .button::before {
    content: "";
    width: 14px;
    height: 14px;
    margin-right: 8px;
    border: 2px solid rgba(255,255,255,.45);
    border-top-color: #fff;
    border-radius: 999px;
    animation: spin .8s linear infinite;
}

.lesson-feedback {
    margin: 12px 0 0;
    border-left-width: 5px;
    border-radius: 8px;
    background:
        linear-gradient(180deg, #f7fffb 0%, #eefaf4 100%);
    color: #173522;
    font-size: 1.03rem;
    line-height: 1.62;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.lesson-locked {
    margin: 14px 0 0;
}

.notebook-panel {
    margin-top: 18px;
    background:
        linear-gradient(90deg, rgba(61, 107, 71, .08) 1px, transparent 1px),
        linear-gradient(180deg, #ffffff 0%, #fffdf9 100%);
    background-size: 28px 28px, auto;
}

.notebook-panel .simple-item {
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .88) 0%, rgba(255, 253, 249, .96) 100%);
}

.notebook-panel .simple-item strong {
    font-family: var(--serif);
    color: var(--forest);
}

.notebook-panel .simple-item span {
    max-width: 74ch;
    color: #1f2f25;
    font-size: 1.02rem;
    line-height: 1.62;
}

.notebook-cloze {
    display: block;
    padding: 10px 12px;
    border: 1px dashed var(--sage-m);
    border-radius: 8px;
    background: rgba(255, 255, 255, .72);
    color: var(--ink);
    font-weight: 600;
}

.lesson-complete-panel {
    position: relative;
    overflow: hidden;
    margin-top: 18px;
    border-color: rgba(61, 107, 71, .28);
    background:
        radial-gradient(circle at 18% 18%, rgba(174, 84, 43, .14), transparent 24%),
        radial-gradient(circle at 84% 12%, rgba(61, 107, 71, .16), transparent 22%),
        linear-gradient(180deg, #fffdf9 0%, #eef7f0 100%);
}

.lesson-complete-panel h2 {
    margin: 0 0 10px;
}

/* Keep the final lesson actions clear of the fixed learning-companion control. */
.lesson-complete-panel .lesson-answer-actions {
    padding-right: clamp(0px, 8vw, 116px);
    padding-bottom: 92px;
}

.completion-check {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    margin: 12px 0 18px;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(61, 107, 71, .1);
    color: var(--forest);
    font-weight: 800;
}

.completion-check span {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--forest);
    color: #fff;
}

.completion-summary {
    max-width: 760px;
    margin: 18px 0;
    padding: 16px 20px;
    border: 1px solid rgba(61, 107, 71, .18);
    border-left: 5px solid rgba(61, 107, 71, .48);
    border-radius: 8px;
    background: rgba(255, 255, 255, .82);
}

.completion-summary h3 {
    margin: 0 0 8px;
}

.completion-summary ul {
    margin: 0;
    padding-left: 20px;
    line-height: 1.62;
}

.completion-summary li + li {
    margin-top: 6px;
}

.experiment-protocol {
    display: grid;
    gap: 14px;
    margin-top: 16px;
    padding: 14px 16px;
    border: 1px solid rgba(61, 107, 71, .18);
    border-radius: 10px;
    background: #fffdf9;
}

.experiment-protocol strong {
    color: var(--forest);
}

.experiment-protocol ul,
.experiment-protocol ol {
    margin: 8px 0 0;
    padding-left: 22px;
}

.experiment-protocol li + li {
    margin-top: 5px;
}

.experiment-protocol .protocol-lines li {
    padding: 7px 0 9px;
    border-bottom: 1px dashed rgba(61, 107, 71, .24);
}

.firework-field span {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--terra);
    box-shadow:
        0 -28px 0 var(--forest),
        20px -20px 0 var(--terra),
        28px 0 0 var(--sage),
        20px 20px 0 var(--forest),
        0 28px 0 var(--terra),
        -20px 20px 0 var(--sage),
        -28px 0 0 var(--forest),
        -20px -20px 0 var(--terra);
    animation: firework-pop 1.8s ease-out infinite;
    opacity: .65;
}

.firework-field span:nth-child(1) {
    top: 46px;
    right: 110px;
}

.firework-field span:nth-child(2) {
    top: 86px;
    right: 220px;
    animation-delay: .35s;
    transform: scale(.75);
}

.firework-field span:nth-child(3) {
    top: 42px;
    left: 72px;
    animation-delay: .7s;
    transform: scale(.6);
}

@keyframes firework-pop {
    0% {
        opacity: 0;
        transform: scale(.25) rotate(0deg);
    }
    35% {
        opacity: .75;
    }
    100% {
        opacity: 0;
        transform: scale(1.05) rotate(35deg);
    }
}

.source-panel {
    margin-bottom: 14px;
}

.source-panel summary {
    cursor: pointer;
    color: var(--muted);
    font-weight: 700;
}

.source-panel[open] summary {
    margin-bottom: 12px;
    color: var(--terra);
}

.tag-row.roomy {
    gap: 10px;
}

.progress-track {
    width: 100%;
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--cream-d);
}

.progress-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--accent);
}

.workbook-hero {
    margin-bottom: 18px;
}

.workbook-units {
    display: grid;
    gap: 14px;
}

.workbook-unit {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fffdf9;
    overflow: hidden;
}

.workbook-unit summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    cursor: pointer;
}

.workbook-unit summary strong {
    display: block;
    margin-bottom: 4px;
    font-family: var(--serif);
    color: var(--forest);
    font-size: 22px;
}

.workbook-unit summary small {
    display: block;
    color: var(--muted);
    font-size: 15px;
}

.workbook-task-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 0 16px 16px;
}

.workbook-task-card {
    display: grid;
    gap: 12px;
    align-content: space-between;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
}

.workbook-task-card h3 {
    margin: 10px 0 6px;
    font-size: 18px;
}

.workbook-task-card p {
    margin: 0;
    color: var(--muted);
}

.workbook-unit-setting {
    display: grid;
    gap: 8px;
    margin: 0 16px 16px;
    padding: 18px;
    border: 1px solid var(--workbook-line, var(--line));
    border-left: 6px solid var(--workbook-red, var(--terra));
    border-radius: 8px;
    background: #fff8ea;
}

.workbook-unit-setting strong {
    color: var(--workbook-red, var(--terra));
    font-size: 18px;
}

.workbook-unit-setting p {
    margin: 0;
    color: var(--ink);
}

.workbook-unit-setting .button {
    justify-self: start;
    margin-top: 6px;
}

.workbook-journey {
    position: relative;
}

.workbook-station-number {
    display: block;
    margin-top: 8px;
    color: var(--workbook-teal, var(--sage));
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.workbook-station-prompt {
    padding-top: 8px;
    border-top: 1px dashed var(--line);
    color: var(--ink) !important;
}

.workbook-feedback {
    margin-top: 14px;
    padding: 16px;
    border: 1px solid var(--sage-l);
    border-radius: 10px;
    background: var(--sage-p);
}

.workbook-feedback[hidden] {
    display: none;
}

.workbook-feedback h3 {
    margin-top: 0;
}

.workbook-feedback ul {
    margin: 8px 0 0;
}

.workbook-language-diagnosis {
    display: grid;
    gap: 10px;
    margin: 14px 0;
}

.workbook-writing-integrity {
    display: grid;
    gap: 8px;
    margin: 14px 0;
    padding: 12px 14px;
    border: 1px solid rgba(170, 82, 43, .24);
    border-radius: 10px;
    background: rgba(255, 250, 239, .86);
}

.workbook-writing-integrity strong {
    color: var(--clay, #aa522b);
}

.workbook-understanding-training {
    display: grid;
    gap: 0.85rem;
    margin: 14px 0;
    padding: 16px;
    border: 1px solid rgba(31, 111, 120, 0.22);
    border-left: 6px solid var(--workbook-teal, #1f6f78);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(243, 250, 249, 0.96), rgba(255, 253, 247, 0.98));
}

.workbook-understanding-training h4,
.workbook-understanding-training p,
.workbook-understanding-training ol {
    margin: 0;
}

.workbook-understanding-training blockquote {
    margin: 0;
    padding: 12px 14px;
    border-left: 3px solid rgba(31, 111, 120, 0.32);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.7);
    color: var(--forest);
    font-weight: 750;
}

.workbook-understanding-training ol {
    padding-left: 1.35rem;
}

.workbook-understanding-training li + li {
    margin-top: 0.35rem;
}

.workbook-understanding-question {
    display: grid;
    gap: 0.35rem;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(236, 246, 239, 0.9);
}

.workbook-understanding-question strong {
    color: var(--forest);
}

.workbook-writing-integrity p,
.workbook-writing-integrity ul {
    margin: 0;
}

.independent-writing-notice {
    margin: 0 0 8px;
    color: var(--muted);
    font-size: 0.95rem;
    font-weight: 700;
}

.independent-writing-notice.is-warning {
    color: var(--clay, #aa522b);
    animation: independent-writing-pulse 1.3s ease;
}

.workbook-revision-hint {
    display: block;
    margin: 0 0 8px;
    color: var(--muted);
    font-weight: 700;
}

@keyframes independent-writing-pulse {
    0% {
        transform: translateY(0);
    }
    35% {
        transform: translateY(-1px);
    }
    100% {
        transform: translateY(0);
    }
}

.workbook-correction-group {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid rgba(29, 111, 120, .18);
    border-radius: 10px;
    background: rgba(255, 253, 248, .78);
}

.workbook-correction-group h4 {
    margin: 0;
    color: var(--workbook-teal, var(--sage));
}

.workbook-correction-item {
    display: grid;
    gap: 5px;
    padding: 10px;
    border-radius: 8px;
    background: #fffdf8;
}

.workbook-correction-item p {
    margin: 0;
}

.workbook-correction-item span {
    font-weight: 800;
    color: var(--muted);
}

.workbook-correction-item code {
    white-space: normal;
    font-family: inherit;
    color: var(--ink);
    background: transparent;
}

.workbook-correction-item small {
    color: var(--muted);
    line-height: 1.45;
}

.workbook-reading-text {
    display: grid;
    gap: 12px;
    margin-bottom: 16px;
}

.workbook-reading-text p {
    margin: 0;
    color: var(--ink);
}

.workbook-choice-grid {
    grid-template-columns: 1fr;
    margin-top: 10px;
}

.workbook-material-page {
    --workbook-red: #9b1c28;
    --workbook-teal: #1d6f78;
    --workbook-ink: #242424;
    --workbook-muted: #69717a;
    --workbook-line: #d7dbe0;
    --workbook-bg: #eef1f4;
    background: var(--workbook-bg);
    color: var(--workbook-ink);
}

.workbook-material-page .app-shell.narrow-shell {
    width: min(1080px, calc(100% - 40px));
}

.workbook-material-page .brand-mark,
.workbook-material-page .button:not(.secondary),
.workbook-original-button {
    background: var(--workbook-red);
    border-color: var(--workbook-red);
}

.workbook-original-sheet {
    margin: 0 auto 28px;
    overflow: hidden;
    border: 1px solid var(--workbook-line);
    background: #fff;
    box-shadow: 0 12px 32px rgba(24, 32, 42, .09);
}

.workbook-original-head {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 310px;
    overflow: hidden;
    border-bottom: 6px solid var(--workbook-red);
    background: #222;
}

.workbook-original-hero {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.workbook-original-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .08), rgba(0, 0, 0, .2) 42%, rgba(0, 0, 0, .68));
}

.workbook-original-title {
    position: relative;
    z-index: 1;
    max-width: 780px;
    padding: 34px 38px;
    color: #fff;
}

.workbook-original-title .kicker {
    margin: 0 0 8px;
    color: #fff;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}

.workbook-original-title h2 {
    margin: 0;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: clamp(32px, 5vw, 48px);
    line-height: 1.05;
}

.workbook-original-title .question {
    margin: 8px 0 0;
    color: #fff;
    font-size: 20px;
    font-weight: 750;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}

.workbook-original-section {
    padding: 24px 38px;
    border-bottom: 1px solid var(--workbook-line);
}

.workbook-original-section:last-child {
    border-bottom: 0;
}

.workbook-original-section h3 {
    margin: 0 0 12px;
    color: var(--workbook-red);
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 22px;
    font-weight: 800;
}

.workbook-task-meta {
    margin: 0 0 10px;
    color: var(--workbook-muted);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.workbook-task-intro {
    max-width: 820px;
    margin: 0;
}

.workbook-task-briefing {
    display: grid;
    gap: 8px;
    margin: 16px 0;
    padding: 18px;
    border: 1px solid var(--workbook-line);
    border-left: 6px solid var(--workbook-red);
    border-radius: 8px;
    background: #fff8ea;
}

.workbook-task-briefing strong {
    color: var(--workbook-red);
    font-size: 18px;
}

.workbook-task-briefing p {
    margin: 0;
}

.workbook-mission-box {
    display: grid;
    gap: 6px;
    margin-top: 4px;
    padding: 14px 16px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--workbook-line);
}

.workbook-mission-box b,
.workbook-guidance-grid b,
.workbook-check-bridge b {
    color: var(--workbook-teal);
}

.workbook-guidance-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
}

.workbook-guidance-grid > div {
    padding: 14px 16px;
    border: 1px solid var(--workbook-line);
    border-radius: 8px;
    background: #fffdf7;
}

.workbook-guidance-grid ol,
.workbook-guidance-grid ul {
    margin: 8px 0 0;
    padding-left: 22px;
}

.workbook-guidance-grid li + li {
    margin-top: 5px;
}

.workbook-check-bridge {
    display: grid;
    gap: 6px;
    padding-top: 2px;
}

.workbook-task-visual {
    margin: 18px 0;
    overflow: hidden;
    border: 1px solid var(--workbook-line);
    border-radius: 10px;
    background: #fff;
}

.workbook-task-visual img {
    display: block;
    width: 100%;
    max-height: 360px;
    object-fit: cover;
}

.workbook-task-visual figcaption {
    margin: 0;
    padding: 12px 16px;
    color: var(--workbook-muted);
    font-size: 15px;
    line-height: 1.45;
    background: #fffdf7;
    border-top: 1px solid var(--workbook-line);
}

.workbook-exercise,
.workbook-audio-box {
    margin: 16px 0;
    padding: 16px;
    border: 1px solid var(--workbook-line);
    border-radius: 8px;
    background: #fff;
}

.workbook-exercise h4,
.workbook-audio-box strong,
.workbook-source-material h4 {
    display: block;
    margin: 0 0 10px;
    color: var(--workbook-teal);
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 16px;
    font-weight: 800;
}

.workbook-source-material {
    margin: 16px 0;
    padding: 18px;
    border: 1px solid #e2c69a;
    border-left: 6px solid var(--workbook-red);
    border-radius: 8px;
    background: #fff8ea;
}

.workbook-source-material p {
    margin: 0;
}

.workbook-source-material p + p {
    margin-top: 12px;
}

.workbook-source-material ul {
    margin: 8px 0 0;
    padding-left: 22px;
}

.workbook-speaking-brief {
    display: grid;
    gap: 14px;
    margin-bottom: 18px;
    padding: 18px;
    border: 1px solid var(--workbook-line);
    border-left: 6px solid var(--workbook-red);
    border-radius: 8px;
    background: #fff8ea;
}

.workbook-speaking-brief h4 {
    margin: 0;
    color: var(--workbook-red);
    font-size: 22px;
}

.workbook-speaking-brief p {
    margin: 0;
}

.workbook-speaking-taskline {
    display: grid;
    gap: 4px;
    padding: 12px;
    border: 1px solid #e2c69a;
    border-radius: 8px;
    background: #fff;
}

.workbook-roleplay-card {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid #c9ddd6;
    border-radius: 8px;
    background: #eef8f5;
}

.workbook-roleplay-card > strong {
    color: var(--workbook-teal);
}

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

.workbook-roleplay-grid p {
    padding: 10px;
    border-radius: 8px;
    background: #fff;
}

.workbook-repair-phrases {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.workbook-repair-phrases b {
    flex-basis: 100%;
    color: var(--workbook-teal);
}

.workbook-repair-phrases span {
    display: inline-flex;
    padding: 5px 9px;
    border: 1px solid #bdd5cd;
    border-radius: 999px;
    background: #fff;
    font-weight: 800;
}

.workbook-speaking-taskline strong,
.workbook-speaking-grid strong {
    color: var(--workbook-teal);
}

.workbook-speaking-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.workbook-speaking-grid > div {
    padding: 14px;
    border: 1px solid var(--workbook-line);
    border-radius: 8px;
    background: #fff;
}

.workbook-speaking-grid ol,
.workbook-speaking-grid ul {
    margin: 8px 0 0;
    padding-left: 22px;
}

.workbook-speaking-target {
    color: var(--workbook-muted);
    font-weight: 700;
}

.workbook-audio-box {
    background: #f7fafb;
}

.workbook-audio-box audio {
    width: 100%;
}

.workbook-selfcheck {
    display: grid;
    gap: 8px;
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}

.workbook-selfcheck li,
.workbook-question label {
    display: block;
    padding: 8px 10px;
    border: 1px solid var(--workbook-line);
    border-radius: 6px;
    background: #fbfbfc;
}

.workbook-selfcheck input,
.workbook-question input {
    margin-right: 8px;
    accent-color: var(--workbook-red);
}

.workbook-vocab-table {
    width: 100%;
    margin: 12px 0;
    border-collapse: collapse;
}

.workbook-vocab-table th,
.workbook-vocab-table td {
    padding: 9px 8px;
    border-top: 1px solid var(--workbook-line);
    text-align: left;
    vertical-align: top;
}

.workbook-vocab-table th {
    width: 32%;
    color: var(--workbook-teal);
}

.vocabulary-trainer-callout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 1rem 0;
    padding: 1rem;
    border: 1px solid rgba(45, 103, 72, 0.18);
    border-radius: 8px;
    background: rgba(232, 240, 235, 0.68);
}

.vocabulary-trainer-callout div {
    display: grid;
    gap: 0.25rem;
}

.vocabulary-trainer-callout strong {
    color: var(--forest);
}

.vocabulary-trainer-callout span {
    color: var(--muted);
    font-size: 0.92rem;
}

.vocabulary-trainer-meta {
    display: grid;
    gap: 0.25rem;
    min-width: min(260px, 100%);
}

.vocabulary-trainer-meta small,
.vocabulary-context-note {
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 750;
}

.vocabulary-trainer-hero {
    margin-bottom: 1rem;
}

.vocabulary-hero-image {
    margin: 0 0 1rem;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid rgba(45, 103, 72, 0.16);
    aspect-ratio: 16 / 5;
    background: var(--paper);
}

.vocabulary-hero-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.vocabulary-summary-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 1rem;
}

.vocabulary-summary-row span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 34px;
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 750;
}

.vocabulary-summary-row strong {
    color: var(--forest);
}

.vocabulary-card,
.vocabulary-feedback {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
}

.vocabulary-feedback {
    scroll-margin-top: 18px;
}

.vocabulary-feedback-audio {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 0.75rem;
    border-left: 3px solid var(--sage);
    background: rgba(232, 240, 235, 0.58);
    color: var(--forest);
    font-weight: 750;
}

.vocabulary-feedback-audio .tts-button {
    position: static;
    flex: 0 0 auto;
}

.vocabulary-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.vocabulary-card-head h2,
.vocabulary-feedback h3 {
    margin: 0;
}

.vocabulary-card-head > span {
    flex: 0 0 auto;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    font-weight: 850;
}

.vocabulary-prompt {
    display: grid;
    gap: 0.45rem;
    padding: 1.1rem;
    border: 1px solid rgba(177, 84, 44, 0.24);
    border-left: 5px solid var(--terra);
    border-radius: 8px;
    background: rgba(247, 235, 227, 0.58);
}

.vocabulary-prompt span,
.vocabulary-prompt small {
    color: var(--muted);
    font-weight: 750;
}

.vocabulary-prompt strong {
    font-size: clamp(1.35rem, 3vw, 2rem);
    color: var(--ink);
}

.vocabulary-overview,
.vocabulary-learning-units {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
}

.vocabulary-overview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.vocabulary-overview-head h2,
.vocabulary-learning-units h2 {
    margin: 0;
}

.vocabulary-overview-intro,
.vocabulary-learning-units > p:not(.eyebrow) {
    max-width: 72ch;
    margin: 0;
    color: var(--muted);
}

.vocabulary-overview-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
}

.vocabulary-overview-word {
    display: grid;
    gap: 0.68rem;
    min-width: 0;
    padding: 1rem;
    border: 1px solid rgba(45, 103, 72, 0.2);
    border-radius: 8px;
    background: #fff;
}

.vocabulary-overview-translation {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 0.55rem;
    color: var(--ink);
}

.vocabulary-overview-translation > span {
    color: var(--muted);
    font-weight: 750;
}

.vocabulary-overview-translation > b {
    color: var(--terra);
    font-size: 1.1rem;
}

.vocabulary-overview-tts,
.vocabulary-overview-example {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    min-width: 0;
}

.vocabulary-overview-tts .tts-button,
.vocabulary-overview-example .tts-button {
    position: static;
    flex: 0 0 auto;
}

.vocabulary-overview-tts strong {
    overflow-wrap: anywhere;
    color: var(--forest);
}

.vocabulary-overview-example {
    padding: 0.58rem 0.65rem;
    border-left: 3px solid var(--sage-l);
    background: rgba(232, 240, 235, 0.54);
    color: var(--ink);
    font-size: 0.92rem;
    line-height: 1.45;
}

.vocabulary-overview-example span {
    min-width: 0;
}

.vocabulary-overview-word small {
    color: var(--muted);
    font-weight: 750;
}

.vocabulary-unit-link {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
}

.vocabulary-unit-link > span {
    display: grid;
    gap: 0.18rem;
}

.vocabulary-unit-link > span > span,
.vocabulary-unit-link em {
    color: var(--muted);
    font-size: 0.9rem;
    font-style: normal;
}

.vocabulary-unit-link em {
    white-space: nowrap;
    font-weight: 800;
}

.vocabulary-form {
    display: grid;
    gap: 0.8rem;
}

.vocabulary-form input[type="text"] {
    min-height: 58px;
    border: 2px solid rgba(45, 103, 72, 0.22);
    border-radius: 12px;
    padding: 0.9rem 1rem;
    font: inherit;
    font-size: 1.2rem;
}

.vocab-input-notice {
    display: none;
    margin-top: 0.45rem;
    color: var(--terra);
    font-size: 0.88rem;
    font-weight: 800;
}

.vocab-input-notice.is-visible {
    display: block;
}

.vocabulary-feedback {
    position: relative;
    overflow: hidden;
    padding: 1rem;
    border: 1px solid rgba(45, 103, 72, 0.22);
    border-radius: 8px;
    background: rgba(232, 240, 235, 0.72);
}

.vocabulary-feedback.correct {
    border-color: rgba(45, 103, 72, 0.38);
    background:
        radial-gradient(circle at 18% 20%, rgba(221, 187, 76, 0.18), transparent 26%),
        rgba(232, 240, 235, 0.9);
    animation: vocabulary-success-pop 520ms ease-out both;
}

.vocabulary-feedback.needs-practice {
    border-color: rgba(177, 84, 44, 0.26);
    background: rgba(247, 235, 227, 0.58);
}

.vocabulary-reward {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.vocabulary-reward span {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--gold);
    opacity: 0;
    animation: vocabulary-reward-dot 900ms ease-out forwards;
}

.vocabulary-reward span:nth-child(1) {
    left: 13%;
    top: 24%;
}

.vocabulary-reward span:nth-child(2) {
    left: 28%;
    top: 10%;
    background: var(--forest);
    animation-delay: 80ms;
}

.vocabulary-reward span:nth-child(3) {
    right: 23%;
    top: 18%;
    animation-delay: 140ms;
}

.vocabulary-reward span:nth-child(4) {
    right: 13%;
    top: 38%;
    background: var(--terra);
    animation-delay: 40ms;
}

.vocabulary-reward span:nth-child(5) {
    left: 48%;
    top: 7%;
    background: rgba(45, 103, 72, 0.65);
    animation-delay: 180ms;
}

.vocabulary-answer-line {
    display: grid;
    gap: 0.25rem;
    padding: 0.8rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.7);
}

.vocabulary-answer-line span,
.vocabulary-answer-line small,
.vocabulary-example {
    color: var(--muted);
}

.vocabulary-answer-line strong {
    color: var(--forest);
    font-size: 1.35rem;
}

.vocabulary-important-word {
    display: grid;
    gap: 0.25rem;
    padding: 0.95rem 1rem;
    border: 1px solid rgba(177, 84, 44, 0.3);
    border-left: 5px solid var(--terra);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.76);
}

.vocabulary-important-word span,
.vocabulary-important-word small {
    color: var(--muted);
    font-weight: 800;
}

.vocabulary-important-word strong {
    color: var(--terra);
    font-size: 1.45rem;
}

.vocabulary-example {
    margin: 0;
    font-style: italic;
}

@keyframes vocabulary-success-pop {
    0% {
        transform: scale(0.985);
        box-shadow: 0 0 0 rgba(45, 103, 72, 0);
    }

    45% {
        transform: scale(1.012);
        box-shadow: 0 18px 38px rgba(45, 103, 72, 0.16);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 10px 24px rgba(45, 103, 72, 0.08);
    }
}

@keyframes vocabulary-reward-dot {
    0% {
        opacity: 0;
        transform: translateY(18px) scale(0.55);
    }

    22% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateY(-28px) scale(1.2);
    }
}

.workbook-match-row,
.workbook-gap-row {
    display: grid;
    grid-template-columns: minmax(140px, .6fr) minmax(220px, 1fr);
    gap: 10px;
    align-items: center;
    margin: 8px 0;
}

.workbook-gap-question {
    display: block;
    color: var(--workbook-teal);
    font-size: .92rem;
    font-weight: 800;
    line-height: 1.35;
}

.workbook-match-row select,
.workbook-gap-row select {
    min-height: 38px;
    padding: 5px 8px;
    border: 1px solid var(--workbook-line);
    border-radius: 6px;
    background: #fff;
    color: var(--workbook-ink);
    font: inherit;
}

.workbook-question {
    display: grid;
    gap: 6px;
    margin: 14px 0;
    padding: 0;
    border: 0;
}

.workbook-question legend {
    margin-bottom: 4px;
    color: var(--workbook-ink);
    font-weight: 700;
}

.workbook-reading-text {
    padding: 16px;
    border: 1px solid var(--workbook-line);
    border-radius: 8px;
    background: #fbfbfc;
}

.workbook-reading-text p + p {
    margin-top: 12px;
}

.workbook-gap-text p {
    font-size: 18px;
    line-height: 1.65;
}

.workbook-local-result {
    margin: 12px 0 0;
    font-weight: 800;
    color: var(--workbook-teal);
    white-space: pre-line;
}

.workbook-local-result.warn {
    color: var(--workbook-red);
}

.workbook-local-result.good {
    color: #2e8b57;
}

.math-path-card {
    display: grid;
    gap: 12px;
    margin: 14px 0 16px;
    padding: 14px;
    border: 1px solid #d9cbb2;
    border-radius: 8px;
    background: #fffaf0;
}

.math-subject-note {
    display: grid;
    gap: 6px;
    margin: 16px 0;
    padding: 14px 16px;
    border: 1px solid #d9cbb2;
    border-radius: 8px;
    background: linear-gradient(135deg, #fffaf0, #f6fbf8);
}

.deutsch-subject-note {
    border-color: rgba(169, 81, 45, 0.22);
    background: linear-gradient(135deg, #fff8f2, #fffdf9);
}

.biology-subject-note {
    border-color: rgba(58, 122, 92, 0.24);
    background: linear-gradient(135deg, #f2fbf5, #f8fcff);
}

.physics-subject-note {
    border-color: rgba(37, 89, 122, 0.24);
    background: linear-gradient(135deg, #f3f8fc, #fffdf4);
}

.chemistry-subject-note {
    border-color: rgba(139, 85, 42, 0.24);
    background: linear-gradient(135deg, #fff8ee, #f8fbf2);
}

.math-subject-note strong {
    color: #1b3722;
    font-size: 18px;
}

.math-subject-note p {
    margin: 0;
    color: #546858;
}

.math-path-head {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.math-path-head span {
    padding: 5px 9px;
    border: 1px solid #d7b88f;
    border-radius: 999px;
    background: #fff;
    color: #7a421f;
    font-size: 13px;
    font-weight: 800;
}

.math-path-card > strong {
    color: #1b3722;
    font-size: 18px;
}

.deutsch-path-card {
    border-color: rgba(169, 81, 45, 0.22);
    background: #fffdf9;
}

.biology-path-card {
    border-color: rgba(58, 122, 92, 0.22);
    background: #fafffb;
}

.physics-path-card {
    border-color: rgba(37, 89, 122, 0.22);
    background: #fbfdff;
}

.chemistry-path-card {
    border-color: rgba(139, 85, 42, 0.22);
    background: #fffaf3;
}

.deutsch-path-card > p {
    margin: 4px 0 0;
    color: #546858;
}

.biology-path-card .math-path-head span {
    border-color: rgba(58, 122, 92, 0.26);
    color: #276342;
}

.physics-path-card .math-path-head span {
    border-color: rgba(37, 89, 122, 0.26);
    color: #25597a;
}

.chemistry-path-card .math-path-head span {
    border-color: rgba(139, 85, 42, 0.26);
    color: #8b552a;
}

.biology-path-card .math-path-grid div {
    border-color: #d5e6dc;
    background: #f8fcf9;
}

.physics-path-card .math-path-grid div {
    border-color: #d3e3ec;
    background: #f8fbfd;
}

.chemistry-path-card .math-path-grid div {
    border-color: #ead9c5;
    background: #fffcf8;
}

.biology-path-card .math-path-grid span {
    color: #276342;
}

.physics-path-card .math-path-grid span {
    color: #25597a;
}

.chemistry-path-card .math-path-grid span {
    color: #8b552a;
}

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

.math-path-grid div {
    padding: 10px;
    border: 1px solid #eadcc8;
    border-radius: 8px;
    background: #fff;
}

.math-path-grid span {
    display: block;
    margin-bottom: 4px;
    color: #aa542c;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.math-path-grid p {
    margin: 0;
    color: #546858;
}

.math-quality-details,
.math-standard-details {
    border-top: 1px solid #eadcc8;
    padding-top: 10px;
}

.deutsch-quality-details {
    border-top-color: rgba(169, 81, 45, 0.18);
}

.biology-quality-details {
    border-top-color: rgba(58, 122, 92, 0.18);
}

.math-quality-details summary,
.math-standard-details summary {
    cursor: pointer;
    color: #1b3722;
    font-weight: 900;
}

.math-quality-grid,
.math-standard-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.math-quality-grid div,
.math-standard-grid div {
    padding: 10px;
    border: 1px solid #dce7dd;
    border-radius: 8px;
    background: #f8fcf9;
}

.math-quality-grid span,
.math-standard-grid span {
    display: block;
    margin-bottom: 4px;
    color: #3b6f4a;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.math-quality-grid p,
.math-standard-grid p {
    margin: 0;
    color: #546858;
}

.math-standard-details {
    border-top-color: #d7e3ef;
}

.math-standard-grid div {
    border-color: #d7e3ef;
    background: #f7fbff;
}

.math-standard-grid span {
    color: #315f7d;
}

.curriculum-standard-card {
    display: grid;
    gap: 10px;
    margin: 14px 0 16px;
    padding: 14px;
    border: 1px solid #d7e3ef;
    border-radius: 8px;
    background: #f7fbff;
}

.deutsch-path-card + .curriculum-standard-card {
    border-color: rgba(169, 81, 45, 0.16);
    background: #fffaf6;
}

.curriculum-standard-card summary {
    cursor: pointer;
    color: #17384e;
    font-weight: 900;
}

.interactive-resource-card {
    margin: 14px 0;
    padding: 14px;
    border: 1px solid rgba(37, 105, 122, .22);
    border-radius: 10px;
    background: #f4fbfc;
}

.interactive-resource-card summary {
    cursor: pointer;
    color: #1f5966;
    font-weight: 900;
}

.interactive-resource-list {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.interactive-resource-unit {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(37, 105, 122, .16);
    border-radius: 8px;
    background: #fff;
}

.interactive-resource-unit strong {
    color: #183321;
}

.interactive-resource-unit p {
    margin: 4px 0 0;
    color: var(--muted);
}

.web-map-frame {
    overflow: hidden;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 1px solid rgba(24, 51, 33, .18);
    border-radius: 8px;
    background: #f6f3ec;
}

.web-map-frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.map-task-list {
    display: grid;
    gap: 6px;
    margin: 12px 0 0;
    padding-left: 22px;
    color: #536757;
    font-weight: 700;
}

.lesson-step-chat {
    display: grid;
    gap: 10px;
    margin: 16px 0;
}

.lesson-step-chat-turn {
    max-width: min(760px, 92%);
    padding: 12px 14px;
    border: 1px solid #d7e6dc;
    border-radius: 8px;
    background: #f4fbf7;
}

.lesson-step-chat-turn.student {
    justify-self: end;
    border-color: #ead6ca;
    background: #fff7f2;
}

.lesson-step-chat-turn strong {
    display: block;
    margin-bottom: 4px;
    color: #627568;
    font-size: 14px;
}

.lesson-step-chat-turn p {
    margin: 0;
    color: #183321;
}

.workbook-next-panel {
    display: grid;
    gap: 8px;
    border-top: 4px solid var(--workbook-red);
    background: #fbfbfc;
}

.workbook-next-panel strong {
    color: var(--workbook-teal);
    font-size: 18px;
}

.workbook-next-panel p {
    margin: 0;
    color: var(--workbook-muted);
}

.workbook-next-panel .button {
    justify-self: start;
    margin-top: 4px;
}

.workbook-original-section .correct {
    border-color: #2e8b57 !important;
    background: #eef8f1 !important;
}

.workbook-original-section .incorrect {
    border-color: #b83535 !important;
    background: #fff0f0 !important;
}

.workbook-original-section .field textarea {
    border-color: var(--workbook-line);
    border-radius: 8px;
    background: #fff;
}

.workbook-original-section .word-count {
    margin: 6px 0 10px;
    color: var(--workbook-muted);
    font-weight: 700;
}

.workbook-original-section .word-count.ok {
    color: #2e8b57;
}

.workbook-original-section .word-count.warn {
    color: var(--workbook-red);
}

@media (max-width: 980px) {
    .hero,
    .content-grid,
    .reference-grid,
    .speaking-task-card,
    .workbook-task-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .metric-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .choice-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .app-shell {
        width: min(100% - 24px, 1280px);
        padding-top: 18px;
    }

    .topbar {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
        padding-bottom: 18px;
    }

    .topbar .brand {
        width: 100%;
        min-width: 0;
    }

    .topbar .brand > div:last-child {
        min-width: 0;
    }

    .topbar .brand h1,
    .topbar .brand p {
        overflow-wrap: anywhere;
    }

    .topbar .hero-actions.no-margin {
        display: grid;
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .topbar .hero-actions.no-margin .button {
        width: 100%;
        min-height: 40px;
        justify-content: center;
        padding-inline: 10px;
        font-size: 0.92rem;
    }

    .hero-main {
        min-width: 0;
        padding: 22px;
    }

    .hero-main h2,
    .hero-main .lead,
    .definition-row strong {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .hero-main h2 {
        font-size: 2rem;
        line-height: 1.08;
    }

    .metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .form-grid.two,
    .choice-grid,
    .quiz-options,
    .quiz-options.two,
    .match-row,
    .sort-row,
    .cloze-row,
    .workbook-match-row,
    .workbook-gap-row,
    .workbook-speaking-grid {
        grid-template-columns: 1fr;
    }

    .workbook-roleplay-grid {
        grid-template-columns: 1fr;
    }

    .workbook-original-section,
    .workbook-original-title {
        padding: 22px;
    }

    .math-path-grid,
    .math-quality-grid,
    .math-standard-grid {
        grid-template-columns: 1fr;
    }

    .workbook-original-head {
        min-height: 240px;
    }

    .workbook-guidance-grid {
        grid-template-columns: 1fr;
    }

    .dialog-bubble {
        width: 100%;
    }

    .subject-head,
    .competency-head,
    .migration-head,
    .definition-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .definition-row strong {
        text-align: left;
    }
}

@media (max-width: 420px) {
    .topbar .hero-actions.no-margin {
        grid-template-columns: 1fr;
    }

    .topbar .hero-actions.no-margin .button {
        min-height: 38px;
        white-space: normal;
    }
}
.workbook-speech-fields {
    border: 1px solid rgba(30, 73, 47, 0.18);
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(245, 250, 246, 0.96), rgba(255, 252, 245, 0.98));
    padding: clamp(1.1rem, 2vw, 1.8rem);
    display: grid;
    gap: 1.1rem;
}

.workbook-model-sentences,
.workbook-speech-chunks,
.workbook-speech-builder {
    display: grid;
    gap: 0.75rem;
}

.workbook-speech-line,
.workbook-speech-chip {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.65rem 0.8rem;
    align-items: center;
    border: 1px solid rgba(174, 85, 46, 0.22);
    border-radius: 16px;
    background: #fffdf8;
    padding: 0.75rem 0.9rem;
}

.workbook-speech-line .tts-button,
.workbook-speech-chip .tts-button,
.workbook-inline-tts .tts-button,
.workbook-readable-line .tts-button,
.workbook-speaking-phrase .tts-button {
    position: static;
    flex: 0 0 auto;
}

.workbook-speech-line span,
.workbook-speech-chip span {
    font-weight: 800;
    color: var(--forest);
}

.workbook-speech-chip small {
    grid-column: 2;
    color: var(--muted);
    font-weight: 700;
}

.workbook-speech-chip-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0.75rem;
}

.workbook-speech-builder {
    border-top: 1px solid rgba(30, 73, 47, 0.12);
    padding-top: 0.9rem;
}

.workbook-speech-builder div {
    display: grid;
    gap: 0.2rem;
}

.workbook-speech-builder span {
    font-weight: 900;
    color: var(--forest);
}

.workbook-speech-builder p {
    margin: 0;
    color: var(--muted);
}

.workbook-inline-tts {
    display: inline-flex;
    gap: 0.45rem;
    align-items: center;
    min-width: 0;
}

.workbook-inline-tts.soft {
    margin-top: 0.35rem;
}

.workbook-readable-line {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.65rem;
    align-items: start;
}

.workbook-speaking-phrase {
    display: flex;
    gap: 0.45rem;
    align-items: center;
}

.workbook-preteach-box {
    border: 1px solid rgba(30, 73, 47, 0.16);
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(244, 249, 244, 0.96), rgba(255, 252, 245, 0.98));
    box-shadow: 0 16px 36px rgba(30, 73, 47, 0.07);
    display: grid;
    gap: 1rem;
    padding: clamp(1rem, 2vw, 1.45rem);
}

.workbook-writing-scaffold {
    border: 1px solid rgba(30, 73, 47, 0.14);
    border-radius: 20px;
    background: rgba(248, 252, 248, 0.96);
    display: grid;
    gap: 0.9rem;
    padding: clamp(1rem, 2vw, 1.35rem);
}

.workbook-writing-scaffold h4 {
    margin: 0.15rem 0 0.25rem;
}

.workbook-german-help {
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid rgba(29, 111, 120, .22);
    border-radius: 10px;
    background: rgba(255, 253, 248, .82);
}

.workbook-german-help summary {
    cursor: pointer;
    color: var(--workbook-teal, var(--sage));
    font-weight: 800;
}

.workbook-german-help p {
    margin: 10px 0 0;
    color: var(--muted);
}

.workbook-preteach-box h4 {
    margin: 0.2rem 0 0.35rem;
}

.workbook-videotutor-prereq {
    border-left: 4px solid var(--ochre);
    background: rgba(255, 250, 239, 0.9);
    border-radius: 16px;
    padding: 0.85rem 1rem;
}

.workbook-videotutor-prereq ul {
    margin: 0.45rem 0 0;
}

.workbook-videotutor-gate {
    display: grid;
    gap: 1rem;
    border: 1px solid rgba(157, 57, 49, 0.18);
    border-left: 6px solid var(--workbook-red);
    border-radius: 18px;
    background: linear-gradient(135deg, #fff9f4, #f7fbfc);
    padding: clamp(1rem, 2vw, 1.45rem);
}

.workbook-videotutor-gate h4 {
    margin: 0.15rem 0 0.35rem;
    color: var(--workbook-red);
}

.workbook-videotutor-gate p {
    margin: 0;
    color: var(--workbook-muted);
}

.workbook-videotutor-unit {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.85rem;
    align-items: center;
    border: 1px solid rgba(31, 111, 120, 0.2);
    border-radius: 16px;
    background: #fff;
    padding: 0.85rem;
}

.workbook-videotutor-unit > span {
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 999px;
    background: var(--workbook-teal);
    color: #fff;
    font-weight: 900;
}

.workbook-videotutor-unit strong {
    display: block;
    color: var(--workbook-teal);
}

.workbook-videotutor-unit .button {
    white-space: nowrap;
}

@media (max-width: 740px) {
    .workbook-videotutor-unit {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .workbook-videotutor-unit .button {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

.workbook-preteach-words {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0.75rem;
}

.workbook-preteach-word {
    border: 1px solid rgba(174, 85, 46, 0.18);
    border-radius: 16px;
    background: #fffdf8;
    display: grid;
    gap: 0.45rem;
    padding: 0.75rem;
}

.workbook-linking-board {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.2fr);
    gap: 1rem;
}

.workbook-linking-board > div {
    display: grid;
    gap: 0.65rem;
}

.workbook-linking-pool,
.workbook-linking-targets {
    display: grid;
    gap: 0.55rem;
}

.workbook-link-chip,
.workbook-link-target {
    border: 1px solid rgba(174, 85, 46, 0.24);
    border-radius: 999px;
    background: #fffaf3;
    color: var(--forest);
    cursor: pointer;
    font: inherit;
    font-weight: 850;
    padding: 0.65rem 0.85rem;
    text-align: left;
}

.workbook-link-chip.is-selected {
    border-color: var(--ochre);
    box-shadow: 0 0 0 3px rgba(174, 85, 46, 0.15);
}

.workbook-link-target {
    border-radius: 16px;
    display: grid;
    gap: 0.35rem;
}

.workbook-link-target em {
    color: var(--muted);
    font-style: normal;
    font-weight: 750;
}

.workbook-link-target.is-filled {
    background: rgba(236, 246, 239, 0.92);
}

.workbook-link-target.correct {
    border-color: rgba(48, 125, 75, 0.55);
}

.workbook-link-target.incorrect {
    border-color: rgba(174, 85, 46, 0.7);
    background: rgba(255, 244, 236, 0.95);
}

.workbook-preteach-result {
    font-weight: 850;
    margin: 0;
}

.workbook-preteach-result.good {
    color: var(--success);
}

.workbook-preteach-result.warn {
    color: var(--ochre);
}

@media (max-width: 760px) {
    .workbook-linking-board {
        grid-template-columns: 1fr;
    }
}

.issue-report {
    margin-top: 1.1rem;
    border: 1px solid rgba(45, 86, 61, 0.18);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
    padding: 0.2rem 0.45rem;
}

.issue-report summary {
    cursor: pointer;
    color: var(--forest);
    font-weight: 800;
    padding: 0.75rem 0.85rem;
}

.issue-report[open] {
    padding-bottom: 0.9rem;
}

.issue-report-grid {
    display: grid;
    grid-template-columns: minmax(12rem, 0.8fr) minmax(16rem, 1.4fr);
    gap: 1rem;
    padding: 0 0.85rem;
}

.field.compact {
    gap: 0.35rem;
}

.field.compact select,
.field.compact textarea {
    min-height: auto;
}

.issue-report-text textarea {
    resize: vertical;
}

.issue-report-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.85rem 0.85rem 0;
}

.issue-report-result {
    color: var(--muted);
    font-weight: 700;
}

.issue-report-result.success {
    color: #1f7a4a;
}

.issue-report-result.error {
    color: #a1262f;
}

.quality-report-list {
    display: grid;
    gap: 1rem;
}

.quality-report-card {
    display: grid;
    gap: 0.85rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.72);
    padding: 1rem;
}

.quality-report-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.quality-report-head > div {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.quality-report-card p {
    margin: 0;
}

.quality-report-meta {
    display: grid;
    gap: 0.45rem;
    margin: 0;
}

.quality-report-meta div {
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr);
    gap: 0.75rem;
}

.quality-report-meta dt {
    color: var(--muted);
    font-weight: 800;
}

.quality-report-meta dd {
    margin: 0;
}

@media (max-width: 760px) {
    .issue-report-grid {
        grid-template-columns: 1fr;
    }

    .quality-report-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .quality-report-meta div {
        grid-template-columns: 1fr;
        gap: 0.1rem;
    }
}

.assistant-widget {
    position: fixed;
    right: clamp(14px, 2vw, 26px);
    bottom: clamp(14px, 2vw, 26px);
    z-index: 1200;
    font-family: var(--sans);
}

.special-keyboard {
    position: fixed;
    right: clamp(14px, 2vw, 26px);
    bottom: calc(clamp(14px, 2vw, 26px) + 82px);
    z-index: 1190;
    font-family: var(--sans);
}

.special-keyboard-toggle {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #fffdf8;
    color: var(--forest);
    box-shadow: 0 14px 34px rgba(24, 40, 26, 0.2);
    cursor: pointer;
    font-weight: 900;
    font-size: 1.05rem;
}

.special-keyboard-toggle span {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: rgba(45, 103, 72, 0.1);
}

.special-keyboard-panel {
    position: absolute;
    right: 0;
    bottom: 66px;
    width: min(430px, calc(100vw - 28px));
    overflow: hidden;
    border: 1px solid rgba(30, 73, 47, 0.18);
    border-radius: 18px;
    background: #fffdf8;
    box-shadow: 0 22px 70px rgba(24, 40, 26, 0.22);
}

.special-keyboard-panel[hidden] {
    display: none;
}

.special-keyboard-panel header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.82rem 0.9rem;
    background: var(--forest);
    color: #fff;
}

.special-keyboard-panel header strong {
    font-size: 0.98rem;
}

.special-keyboard-panel header button {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    cursor: pointer;
    font-size: 1.15rem;
}

.special-keyboard-tabs {
    display: flex;
    gap: 0.35rem;
    padding: 0.72rem 0.72rem 0;
    overflow-x: auto;
}

.special-keyboard-tabs button {
    flex: 0 0 auto;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--forest);
    padding: 0.42rem 0.68rem;
    cursor: pointer;
    font: inherit;
    font-size: 0.84rem;
    font-weight: 800;
}

.special-keyboard-tabs button.active {
    border-color: rgba(45, 103, 72, 0.55);
    background: rgba(45, 103, 72, 0.1);
}

.special-keyboard-keys {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(42px, 1fr));
    gap: 0.45rem;
    padding: 0.72rem;
}

.special-keyboard-keys button {
    min-height: 42px;
    border: 1px solid rgba(30, 73, 47, 0.16);
    border-radius: 12px;
    background: #fff;
    color: var(--ink);
    cursor: pointer;
    font: inherit;
    font-weight: 850;
    box-shadow: 0 4px 12px rgba(24, 40, 26, 0.05);
}

.special-keyboard-keys button:hover,
.special-keyboard-keys button:focus-visible {
    border-color: rgba(177, 84, 44, 0.55);
    background: rgba(177, 84, 44, 0.08);
}

.special-keyboard-panel p {
    margin: 0;
    padding: 0 0.85rem 0.82rem;
    color: var(--muted);
    font-size: 0.86rem;
}

.assistant-widget-toggle {
    position: relative;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border: 3px solid #fff;
    border-radius: 999px;
    background: var(--forest);
    box-shadow: 0 16px 38px rgba(24, 40, 26, 0.26);
    cursor: pointer;
}

.assistant-widget-toggle img,
.assistant-widget header img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.assistant-widget-toggle [data-assistant-pulse] {
    position: absolute;
    inset: -8px;
    border: 2px solid rgba(45, 103, 72, 0.34);
    border-radius: inherit;
    animation: assistant-pulse 1.9s ease-out infinite;
    pointer-events: none;
}

@keyframes assistant-pulse {
    0% {
        transform: scale(0.86);
        opacity: 0.86;
    }
    100% {
        transform: scale(1.28);
        opacity: 0;
    }
}

.assistant-widget-panel {
    position: absolute;
    right: 0;
    bottom: 78px;
    display: grid;
    grid-template-rows: auto minmax(180px, 1fr) auto;
    width: min(390px, calc(100vw - 28px));
    max-height: min(620px, calc(100vh - 120px));
    overflow: hidden;
    border: 1px solid rgba(30, 73, 47, 0.18);
    border-radius: 18px;
    background: #fffdf8;
    box-shadow: 0 22px 70px rgba(24, 40, 26, 0.24);
}

.assistant-widget-panel[hidden] {
    display: none;
}

.assistant-widget-panel header {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.9rem;
    background: var(--forest);
    color: #fff;
}

.assistant-widget-panel header img {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.75);
}

.assistant-widget-panel header strong,
.assistant-widget-panel header span {
    display: block;
}

.assistant-widget-panel header span {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.88rem;
}

.assistant-widget-panel header button {
    border: 0;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 1.25rem;
}

.assistant-widget-messages {
    display: grid;
    align-content: start;
    gap: 0.65rem;
    overflow: auto;
    padding: 0.9rem;
    background: linear-gradient(180deg, rgba(245, 250, 246, 0.94), rgba(255, 253, 248, 0.96));
}

.assistant-widget-message {
    max-width: 88%;
    padding: 0.7rem 0.82rem;
    border-radius: 15px;
    background: #fff;
    color: var(--ink);
    box-shadow: 0 6px 18px rgba(24, 40, 26, 0.07);
}

.assistant-widget-message p {
    margin: 0;
    line-height: 1.45;
}

.assistant-widget-message p + p,
.assistant-widget-message p + ul,
.assistant-widget-message p + ol,
.assistant-widget-message ul + p,
.assistant-widget-message ol + p {
    margin-top: 0.55rem;
}

.assistant-widget-message ul,
.assistant-widget-message ol {
    margin: 0;
    padding-left: 1.15rem;
    line-height: 1.45;
}

.assistant-widget-message li + li {
    margin-top: 0.25rem;
}

.assistant-widget-message strong {
    color: var(--forest);
    font-weight: 800;
}

.assistant-widget-message code {
    padding: 0.08rem 0.25rem;
    border-radius: 0.35rem;
    background: rgba(45, 103, 72, 0.08);
    font-family: var(--sans);
}

.assistant-widget-message.student {
    justify-self: end;
    background: #f2e4d9;
}

.assistant-widget-message.assistant {
    justify-self: start;
    border: 1px solid rgba(45, 103, 72, 0.15);
}

.assistant-widget-message.pending {
    color: var(--muted);
}

.assistant-widget-message.error {
    border-color: rgba(161, 38, 47, 0.24);
    color: #8f2630;
}

.assistant-widget-panel form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 0.65rem;
    padding: 0.9rem;
    border-top: 1px solid var(--line);
    background: #fffdf8;
}

.assistant-widget-panel textarea {
    grid-column: 1 / -1;
    min-height: 48px;
    max-height: 130px;
    resize: vertical;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 0.72rem 0.78rem;
    font: inherit;
}

.assistant-widget-attachment {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
    padding: 0.48rem 0.62rem;
    border: 1px solid rgba(45, 103, 72, 0.18);
    border-radius: 12px;
    background: rgba(232, 240, 235, 0.62);
    color: var(--forest);
    font-size: 0.9rem;
    font-weight: 800;
}

.assistant-widget-attachment[hidden] {
    display: none;
}

.assistant-widget-attachment button {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 999px;
    background: rgba(30, 73, 47, 0.1);
    color: var(--forest);
    cursor: pointer;
    font-size: 1rem;
}

.assistant-widget-file {
    align-self: end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--forest);
    cursor: pointer;
    font-weight: 800;
}

.assistant-widget-file input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.assistant-widget-panel form .button {
    align-self: end;
}

.metric-link {
    color: inherit;
    text-decoration: none;
}

.signal-sync-note {
    display: inline-flex;
    width: fit-content;
    margin-top: 1rem;
    padding: 0.65rem 0.9rem;
    border: 1px solid rgba(45, 103, 72, 0.18);
    border-radius: 999px;
    background: rgba(232, 240, 235, 0.72);
    color: var(--forest);
    font-weight: 800;
}

.signal-case-list {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
}

.signal-case-card {
    border-left: 6px solid rgba(45, 103, 72, 0.25);
}

.signal-case-card.priority-urgent {
    border-left-color: #a1262f;
}

.signal-case-card.priority-action {
    border-left-color: var(--rust);
}

.signal-case-card.priority-watch {
    border-left-color: #c88a1a;
}

.signal-case-card.priority-info {
    border-left-color: var(--forest);
}

.signal-case-head,
.signal-action-controls {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.signal-case-head h3 {
    margin: 0.55rem 0 0.25rem;
}

.priority-pill {
    background: rgba(177, 85, 45, 0.12);
    color: var(--rust);
}

.priority-urgent .priority-pill {
    background: rgba(161, 38, 47, 0.12);
    color: #8f2630;
}

.signal-case-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(260px, 0.8fr);
    gap: 1rem;
    margin-top: 1rem;
}

.signal-case-main,
.signal-case-side,
.signal-action-form {
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255, 253, 248, 0.74);
}

.signal-case-main h4,
.signal-case-side h4 {
    margin: 0 0 0.45rem;
    color: var(--teal);
}

.signal-case-main h4:not(:first-child),
.signal-case-side h4:not(:first-child) {
    margin-top: 1rem;
}

.compact-list {
    gap: 0.55rem;
}

.compact-list .simple-item {
    padding: 0.7rem;
}

.signal-action-form {
    margin-top: 1rem;
}

.signal-action-form textarea {
    min-height: 86px;
}

.signal-action-controls {
    align-items: flex-end;
    flex-wrap: wrap;
    margin-top: 0.8rem;
}

.signal-action-controls .field.compact {
    min-width: 190px;
    flex: 1 1 190px;
}

.signal-check {
    flex: 1 1 260px;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(45, 103, 72, 0.18);
    border-radius: 14px;
    background: rgba(232, 240, 235, 0.48);
}

.intake-overview {
    align-items: start;
}

.student-admin-list,
.contract-requirement-list,
.admin-intake-form,
.subject-intake-list {
    display: grid;
    gap: 1rem;
}

.student-admin-card,
.contract-requirement,
.subject-intake-card {
    display: grid;
    gap: 0.8rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(255, 253, 248, 0.78);
}

.student-admin-card {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.student-admin-card strong,
.student-admin-card span,
.contract-requirement strong,
.contract-requirement span {
    display: block;
}

.student-admin-card span,
.contract-requirement p,
.contract-requirement span {
    margin: 0.25rem 0 0;
    color: var(--muted);
}

.student-admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    justify-content: flex-end;
}

.intake-section {
    display: grid;
    gap: 1rem;
}

.intake-section h3 {
    margin-bottom: 0;
}

.intake-grid {
    display: grid;
    gap: 1rem;
}

.intake-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.intake-grid.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.intake-grid.four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.field small {
    color: var(--muted);
    font-size: 0.86rem;
}

.check-row {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.55rem;
    color: var(--forest);
    font-weight: 800;
}

.check-row input {
    margin-top: 0.2rem;
}

.subject-intake-title {
    align-items: center;
    font-family: var(--serif);
    font-size: 1.18rem;
}

.compact-fields .field {
    gap: 0.3rem;
}

.inline-inputs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
}

.support-flag-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.7rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(255, 253, 248, 0.72);
}

.prior-knowledge-table {
    display: grid;
    gap: 0.35rem;
    overflow-x: auto;
}

.prior-row {
    display: grid;
    grid-template-columns: minmax(180px, 1.2fr) repeat(6, minmax(120px, 1fr));
    gap: 0.35rem;
    align-items: center;
    min-width: 920px;
}

.prior-row > strong,
.prior-row > span {
    color: var(--forest);
    font-weight: 900;
}

.prior-head {
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--line);
}

.prior-row select {
    min-height: 40px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    padding: 0 0.45rem;
    font: inherit;
}

.intro-shell {
    max-width: 1120px;
}

.intro-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    border-color: rgba(36, 61, 40, 0.35);
    background:
        linear-gradient(135deg, rgba(36, 61, 40, 0.97), rgba(53, 95, 64, 0.9)),
        #243d28;
}

.intro-hero .eyebrow {
    color: #f2c46d;
}

.intro-hero h2 {
    max-width: 820px;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.22);
}

.intro-hero .lead {
    max-width: 850px;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.2);
}

.intro-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.intro-step-card {
    display: grid;
    gap: 0.45rem;
    align-content: start;
    min-height: 176px;
}

.intro-step-card > span {
    display: inline-grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 999px;
    background: var(--forest);
    color: #fff;
    font-weight: 900;
}

.intro-step-card strong {
    color: var(--forest);
    font-size: 1.08rem;
}

.intro-step-card p {
    margin: 0;
    color: var(--muted);
}

.intro-choice-form {
    display: grid;
    gap: 1.2rem;
}

.intro-choice-form h3 {
    margin: 0;
    font-size: clamp(1.5rem, 3vw, 2rem);
}

.intro-avatar-grid {
    grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
}

.intro-avatar-grid .avatar-choice {
    min-height: 170px;
    justify-content: center;
    border-width: 2px;
}

.intro-avatar-grid .avatar-choice img {
    width: 86px;
    height: 86px;
}

.intro-avatar-grid .avatar-choice:has(input:checked) {
    border-color: var(--forest);
    background: rgba(232, 240, 235, 0.75);
    box-shadow: 0 0 0 4px rgba(45, 103, 72, 0.1);
}

.notice-panel {
    display: grid;
    gap: 0.55rem;
    border-color: rgba(18, 105, 103, 0.25);
    background: rgba(235, 248, 246, 0.72);
}

.notice-panel p {
    margin: 0;
    color: var(--muted);
}

.portfolio-shell {
    max-width: 1280px;
}

.portfolio-hero {
    margin-bottom: 1.2rem;
}

.portfolio-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
    margin-top: 1.2rem;
    max-width: 880px;
}

.portfolio-stats span {
    display: grid;
    gap: 0.2rem;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(45, 103, 72, 0.18);
    border-radius: 8px;
    background: rgba(255, 253, 248, 0.72);
    color: var(--muted);
}

.portfolio-stats strong {
    color: var(--forest);
    font-family: var(--serif);
    font-size: 1.65rem;
    line-height: 1;
}

.portfolio-folder {
    margin-bottom: 1.3rem;
}

.portfolio-subject-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.7rem;
}

.portfolio-subject-card {
    display: grid;
    gap: 0.25rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 253, 248, 0.8);
    text-decoration: none;
    color: var(--ink);
}

.portfolio-subject-card:hover,
.portfolio-subject-card.active {
    border-color: rgba(45, 103, 72, 0.45);
    background: rgba(232, 240, 235, 0.78);
}

.portfolio-subject-card strong {
    font-size: 1.05rem;
    color: var(--forest);
}

.portfolio-subject-card span,
.portfolio-meta,
.portfolio-entry .muted {
    color: var(--muted);
}

.portfolio-section-heading {
    margin: 1.4rem 0 0.7rem;
}

.portfolio-section-heading h2 {
    margin: 0.2rem 0 0;
    font-size: clamp(1.8rem, 4vw, 2.55rem);
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
}

.portfolio-entry {
    display: grid;
    gap: 0.75rem;
    align-content: start;
}

.portfolio-entry h3 {
    margin: 0;
}

.portfolio-entry p {
    margin: 0;
}

.competency-report-entry {
    border-color: rgba(18, 105, 103, 0.24);
}

.competency-report-entry small {
    color: var(--muted);
    font-weight: 700;
}

.portfolio-meta {
    display: flex;
    justify-content: space-between;
    gap: 0.8rem;
    font-size: 0.9rem;
    font-weight: 800;
}

.portfolio-media {
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

/* The learning book is a readable synthesis, deliberately separate from the
   evidence archive below. It uses one generous page per completed unit. */
.learning-book-tabs {
    display: inline-flex;
    gap: 0.2rem;
    margin: 0 0 1rem;
    padding: 0.28rem;
    border: 1px solid rgba(45, 103, 72, 0.22);
    border-radius: 8px;
    background: rgba(255, 253, 248, 0.82);
}

.learning-book-tabs a {
    padding: 0.58rem 0.82rem;
    border-radius: 6px;
    color: var(--muted);
    font-weight: 800;
    text-decoration: none;
}

.learning-book-tabs a:hover,
.learning-book-tabs a.active {
    background: var(--forest);
    color: #fff;
}

.learning-book-hero {
    margin: 0 0 1rem;
    padding: clamp(1.5rem, 4vw, 3.1rem);
    border: 1px solid rgba(45, 103, 72, 0.28);
    border-left: 9px solid var(--forest);
    border-radius: 8px;
    background:
        linear-gradient(115deg, rgba(235, 244, 237, 0.98), rgba(255, 253, 248, 0.96));
}

.learning-book-hero h2 {
    max-width: 820px;
    margin: 0.25rem 0 0.65rem;
    font-family: var(--serif);
    font-size: clamp(2rem, 4.5vw, 3.35rem);
    line-height: 1.04;
}

.learning-book-hero .lead {
    max-width: 770px;
    margin: 0;
}

.learning-book-index {
    margin: 1.6rem 0;
    padding: 1.25rem clamp(1.25rem, 3vw, 2rem);
    border-top: 2px solid var(--forest);
    border-bottom: 1px solid var(--line);
    background: rgba(255, 253, 248, 0.56);
}

.learning-book-index h2 {
    margin: 0.15rem 0 1rem;
    font-family: var(--serif);
    font-size: clamp(1.75rem, 3vw, 2.4rem);
}

.learning-book-index ol {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.55rem 1.1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.learning-book-index a {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--ink);
    font-weight: 800;
    text-decoration: none;
}

.learning-book-index a:hover {
    color: var(--forest);
    text-decoration: underline;
}

.learning-book-index a span {
    display: grid;
    width: 1.65rem;
    height: 1.65rem;
    place-items: center;
    border-radius: 50%;
    background: var(--forest);
    color: #fff;
    font-size: 0.8rem;
}

.learning-book-chapter {
    position: relative;
    margin: 1.45rem 0;
    padding: clamp(1.3rem, 3.5vw, 2.8rem);
    border: 1px solid rgba(130, 101, 61, 0.25);
    border-left: 9px solid rgba(45, 103, 72, 0.74);
    border-radius: 8px;
    background: #fffdf8;
    box-shadow: 0 7px 22px rgba(61, 48, 28, 0.08);
}

.learning-book-chapter > header {
    max-width: 860px;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid rgba(130, 101, 61, 0.22);
}

.learning-book-chapter h2 {
    margin: 0.25rem 0 0.55rem;
    color: var(--forest);
    font-family: var(--serif);
    font-size: clamp(2rem, 4vw, 3.05rem);
    line-height: 1.06;
}

.learning-book-goal {
    max-width: 760px;
    margin: 0;
    color: var(--muted);
    font-size: 1.1rem;
}

.learning-book-preview-mark {
    width: fit-content;
    margin: 0 0 0.65rem;
    padding: 0.38rem 0.55rem;
    border: 1px solid rgba(173, 85, 45, 0.35);
    border-radius: 6px;
    background: rgba(255, 244, 224, 0.82);
    color: #8a3f22;
    font-size: 0.88rem;
    font-weight: 800;
}

.learning-book-visual,
.learning-book-process-visual {
    max-width: 900px;
    margin: 1.35rem 0;
    padding: 0.85rem;
    border: 1px solid rgba(45, 103, 72, 0.22);
    border-radius: 8px;
    background: #fff;
}

.learning-book-visual img {
    display: block;
    width: 100%;
    max-height: 580px;
    object-fit: contain;
}

.learning-book-visual figcaption,
.learning-book-process-visual figcaption {
    padding: 0.65rem 0.35rem 0.1rem;
    color: var(--muted);
    font-weight: 700;
}

.learning-book-process-visual ol {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
    gap: 0.7rem;
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
    counter-reset: learning-book-steps;
}

.learning-book-process-visual li {
    min-height: 80px;
    padding: 0.8rem 0.8rem 0.8rem 2.7rem;
    position: relative;
    border: 1px solid rgba(45, 103, 72, 0.2);
    border-radius: 7px;
    background: rgba(235, 244, 237, 0.62);
    counter-increment: learning-book-steps;
    font-weight: 700;
}

.learning-book-process-visual li::before {
    content: counter(learning-book-steps);
    position: absolute;
    top: 0.75rem;
    left: 0.7rem;
    display: grid;
    width: 1.45rem;
    height: 1.45rem;
    place-items: center;
    border-radius: 50%;
    background: var(--forest);
    color: #fff;
    font-size: 0.8rem;
}

.learning-book-section {
    max-width: 820px;
    margin: 1.25rem 0;
}

.learning-book-section h3 {
    margin: 0 0 0.35rem;
    color: var(--forest);
    font-family: var(--serif);
    font-size: 1.45rem;
}

.learning-book-section p,
.learning-book-merksatz p {
    margin: 0;
    font-size: 1.08rem;
    line-height: 1.65;
}

.learning-book-example {
    padding: 1rem 1.15rem;
    border-left: 4px solid var(--ochre);
    background: rgba(255, 244, 224, 0.62);
}

.learning-book-merksatz {
    max-width: 820px;
    margin: 1.25rem 0;
    padding: 1.05rem 1.2rem;
    border: 1px solid rgba(18, 105, 103, 0.28);
    border-radius: 8px;
    background: rgba(235, 248, 246, 0.75);
}

.learning-book-merksatz span {
    display: block;
    margin-bottom: 0.3rem;
    color: var(--teal);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.learning-book-transfer {
    padding-top: 0.8rem;
    border-top: 1px dashed rgba(130, 101, 61, 0.42);
}

.learning-book-terms {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 1.1rem;
}

.learning-book-terms span {
    padding: 0.36rem 0.55rem;
    border: 1px solid rgba(45, 103, 72, 0.24);
    border-radius: 999px;
    background: rgba(232, 240, 235, 0.7);
    color: var(--forest);
    font-size: 0.9rem;
    font-weight: 750;
}

.portfolio-media img {
    display: block;
    width: 100%;
    max-height: 260px;
    object-fit: cover;
}

.portfolio-block {
    display: grid;
    gap: 0.35rem;
    padding: 0.85rem;
    border: 1px solid rgba(222, 207, 184, 0.9);
    border-radius: 8px;
    background: rgba(255, 253, 248, 0.82);
}

.portfolio-block strong {
    color: var(--forest);
}

.student-sample {
    border-color: rgba(170, 83, 45, 0.25);
    background: rgba(244, 226, 217, 0.42);
}

.success-note {
    border-color: rgba(18, 105, 103, 0.22);
    background: rgba(235, 248, 246, 0.62);
}

.admin-shell {
    max-width: 1480px;
}

.admin-layout {
    display: grid;
    grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.admin-sidebar {
    position: sticky;
    top: 1rem;
    display: grid;
    gap: 1rem;
    max-height: calc(100vh - 2rem);
    overflow: auto;
}

.admin-search {
    display: grid;
    gap: 0.75rem;
}

.admin-student-list {
    display: grid;
    gap: 0.55rem;
}

.admin-student-row {
    display: grid;
    gap: 0.2rem;
    padding: 0.8rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 253, 248, 0.78);
    color: var(--ink);
    text-decoration: none;
}

.admin-student-row:hover,
.admin-student-row.active {
    border-color: rgba(45, 103, 72, 0.45);
    background: rgba(232, 240, 235, 0.78);
}

.admin-student-row strong {
    color: var(--forest);
}

.admin-student-row span {
    color: var(--muted);
}

.admin-student-row em {
    width: fit-content;
    padding: 0.16rem 0.45rem;
    border-radius: 999px;
    background: rgba(170, 83, 45, 0.12);
    color: var(--copper);
    font-style: normal;
    font-weight: 900;
    font-size: 0.84rem;
}

.admin-main {
    display: grid;
    gap: 1rem;
}

.admin-student-hero {
    margin-bottom: 0;
}

.admin-metrics {
    margin: 0;
}

.admin-two-column {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.admin-section {
    display: grid;
    gap: 1rem;
}

.admin-card-grid,
.admin-progress-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 0.75rem;
}

.admin-mini-card,
.admin-progress-card,
.admin-note-block {
    display: grid;
    gap: 0.35rem;
    padding: 0.85rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 253, 248, 0.75);
}

.admin-mini-card strong,
.admin-progress-card strong,
.admin-note-block strong {
    color: var(--forest);
}

.admin-mini-card span,
.admin-mini-card p,
.admin-note-block p {
    margin: 0;
    color: var(--muted);
}

.admin-progress-card {
    align-content: start;
}

.progress-line {
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(222, 207, 184, 0.8);
}

.progress-line span {
    display: block;
    height: 100%;
    min-width: 4px;
    border-radius: inherit;
    background: var(--forest);
}

.admin-activity-panel {
    border-color: rgba(58, 111, 74, 0.2);
}

.activity-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-weight: 900;
    white-space: nowrap;
}

.activity-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.activity-summary-card,
.activity-day-card {
    display: grid;
    gap: 0.35rem;
    padding: 0.85rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 253, 248, 0.82);
}

.activity-summary-card span,
.activity-day-card small {
    color: var(--muted);
}

.activity-summary-card strong {
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    color: var(--forest);
}

.activity-summary-card small {
    color: var(--muted);
    line-height: 1.4;
}

.activity-day-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.65rem;
}

.activity-day-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.activity-day-head strong {
    color: var(--ink);
}

.activity-day-head span {
    font-weight: 900;
}

.activity-bar {
    height: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(222, 207, 184, 0.85);
}

.activity-bar span {
    display: block;
    height: 100%;
    min-width: 0;
    border-radius: inherit;
    background: currentColor;
}

.activity-status-pill.status-ok,
.activity-summary-card.status-ok,
.activity-day-card.status-ok {
    color: #2f6e42;
    border-color: rgba(47, 110, 66, 0.35);
    background: rgba(232, 246, 234, 0.92);
}

.activity-status-pill.status-start,
.activity-summary-card.status-start,
.activity-day-card.status-start {
    color: #2f5f73;
    border-color: rgba(47, 95, 115, 0.35);
    background: rgba(232, 244, 248, 0.94);
}

.activity-status-pill.status-warn,
.activity-summary-card.status-warn,
.activity-day-card.status-warn {
    color: #8a6500;
    border-color: rgba(170, 132, 28, 0.45);
    background: rgba(255, 247, 214, 0.95);
}

.activity-status-pill.status-low,
.activity-summary-card.status-low,
.activity-day-card.status-low {
    color: #9b241f;
    border-color: rgba(160, 43, 34, 0.45);
    background: rgba(255, 235, 232, 0.96);
}

.activity-status-pill.status-none,
.activity-summary-card.status-none,
.activity-day-card.status-none {
    color: #151515;
    border-color: rgba(20, 20, 20, 0.35);
    background: rgba(235, 235, 232, 0.96);
}

.auth-shell {
    min-height: 100vh;
    display: grid;
    align-items: center;
    width: min(1440px, calc(100% - 56px));
    padding: 34px 0;
}

.auth-page {
    background:
        radial-gradient(circle at 8% 8%, rgba(196, 154, 60, .14), transparent 28%),
        linear-gradient(135deg, #f5f1e8 0%, #f9f7f2 52%, #e9ede6 100%);
}

.auth-landing {
    display: grid;
    grid-template-columns: minmax(0, 1.38fr) minmax(360px, .62fr);
    min-height: min(680px, calc(100vh - 68px));
    overflow: hidden;
    border: 1px solid rgba(36, 61, 40, .13);
    border-radius: 22px;
    background: rgba(255, 255, 255, .76);
    box-shadow: 0 24px 70px rgba(24, 40, 26, .15);
}

.auth-visual {
    position: relative;
    display: grid;
    align-items: end;
    min-height: 500px;
    padding: clamp(32px, 5vw, 72px);
    color: #fff;
    background-image:
        linear-gradient(90deg, rgba(20, 43, 28, .95) 0%, rgba(25, 51, 34, .80) 41%, rgba(25, 51, 34, .23) 73%, rgba(25, 51, 34, .08) 100%),
        linear-gradient(0deg, rgba(10, 25, 16, .55), transparent 52%),
        url('images/homeschooling-hero-login.png');
    background-position: center, center, center;
    background-size: cover;
}

.auth-visual-content {
    position: relative;
    z-index: 1;
    max-width: 640px;
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 0 0 clamp(52px, 10vh, 118px);
}

.auth-brand-mark {
    width: 72px;
    height: 72px;
    object-fit: contain;
    filter: brightness(0) invert(1) contrast(1.15);
    opacity: .96;
}

.auth-brand-name {
    display: grid;
    gap: 1px;
    margin: 0;
    color: rgba(255, 255, 255, .96);
    font-family: var(--serif);
    font-size: 1.06rem;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1.1;
}

.auth-brand-name strong,
.auth-brand-name small {
    color: rgba(255, 255, 255, .72);
    font-family: var(--sans);
    font-size: .63rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.auth-brand-name small {
    margin-top: 4px;
    color: rgba(224, 191, 113, .96);
    font-size: .57rem;
    letter-spacing: .18em;
}

.auth-visual .eyebrow {
    margin-bottom: 18px;
    color: rgba(224, 191, 113, .96);
}

.auth-visual h1 {
    max-width: 680px;
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(2.65rem, 5vw, 5.2rem);
    font-weight: 600;
    letter-spacing: -.035em;
    line-height: .98;
}

.auth-visual .lead {
    max-width: 550px;
    margin: 24px 0 0;
    color: rgba(255, 255, 255, .86);
    font-size: clamp(1.05rem, 1.4vw, 1.28rem);
    line-height: 1.55;
}

.auth-visual-note {
    margin: 30px 0 0;
    color: rgba(255, 255, 255, .70);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.auth-card {
    display: grid;
    align-content: center;
    gap: 18px;
    padding: clamp(30px, 4vw, 62px);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: rgba(255, 255, 255, .96);
}

.auth-card h2 {
    margin: 0;
    color: var(--ink);
    font-family: var(--serif);
    font-size: clamp(2rem, 2.6vw, 2.7rem);
    line-height: 1.05;
}

.auth-card .eyebrow {
    margin: 0 0 -5px;
}

.auth-intro {
    max-width: 27rem;
    margin: 0 0 6px;
    color: var(--muted);
    line-height: 1.55;
}

.auth-card .button {
    width: 100%;
    min-height: 50px;
    margin-top: 4px;
    background: var(--terra);
    box-shadow: 0 9px 18px rgba(160, 82, 45, .17);
}

.auth-help {
    margin: 0;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.5;
}

.portal-shell .portal-hero {
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 420px);
}

.portal-student-grid {
    display: grid;
    gap: 16px;
}

.portal-student-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.82);
}

.portal-student-card strong {
    display: block;
    font-size: 1.1rem;
}

.portal-student-card span {
    color: var(--muted);
}

.portal-link-card {
    text-decoration: none;
    color: inherit;
    transition: transform 160ms ease, border-color 160ms ease;
}

.portal-link-card:hover {
    transform: translateY(-1px);
    border-color: rgba(176, 86, 45, 0.45);
}

.portal-admin-grid {
    margin-top: 24px;
}

.soft-panel {
    margin-top: 18px;
    background: rgba(247, 250, 246, 0.82);
}

.role-check {
    align-items: flex-start;
    max-width: 360px;
}

.role-check span {
    display: grid;
    gap: 3px;
}

.role-check small {
    color: var(--muted);
    font-size: 0.86rem;
    line-height: 1.35;
}

.compact-form {
    gap: 12px;
}

/* Role-specific dashboard surfaces: warm at home, calm for families, clear for school operations. */
.dashboard-page {
    background:
        radial-gradient(circle at 8% 4%, rgba(196, 154, 60, .13), transparent 25%),
        linear-gradient(135deg, #f5f1e8 0%, #fbfaf7 56%, #e9eee8 100%);
}

.dashboard-page .narrow-shell {
    width: min(1380px, calc(100% - 48px));
    padding-top: 24px;
    padding-bottom: 46px;
}

.dashboard-page .topbar {
    margin-bottom: 22px;
    padding: 10px 0 18px;
    border-bottom: 1px solid rgba(45, 103, 72, .15);
}

.dashboard-brand-mark {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    padding: 7px;
    border: 1px solid rgba(196, 154, 60, .42);
    border-radius: 14px;
    background: linear-gradient(145deg, #244b32, #112b1d);
    box-shadow: 0 10px 24px rgba(23, 45, 31, .18);
}

.dashboard-brand-mark img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.dashboard-page .brand h1 {
    font-family: var(--serif);
    font-size: clamp(1.45rem, 2.2vw, 1.85rem);
    letter-spacing: -.02em;
}

.dashboard-page .brand p {
    max-width: 580px;
    color: #61735f;
}

.dashboard-hero {
    gap: 20px;
    margin-bottom: 24px;
}

.dashboard-hero .hero-main,
.parent-dashboard-hero {
    position: relative;
    min-height: 360px;
    border: 1px solid rgba(31, 66, 42, .24);
    border-radius: 18px;
    box-shadow: 0 20px 48px rgba(25, 49, 35, .15);
}

.dashboard-hero .hero-main {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 38px;
    isolation: isolate;
}

.student-dashboard-hero .hero-main {
    background-image:
        linear-gradient(90deg, rgba(12, 38, 25, .98) 0%, rgba(16, 48, 31, .91) 42%, rgba(18, 48, 30, .22) 100%),
        url('images/dashboard-student-hero.png');
    background-size: cover;
    background-position: center;
}

.admin-dashboard-hero .hero-main {
    background-image:
        linear-gradient(90deg, rgba(10, 33, 22, .98) 0%, rgba(13, 42, 28, .90) 44%, rgba(15, 44, 28, .28) 100%),
        url('images/dashboard-admin-hero.png');
    background-size: cover;
    background-position: center;
}

.dashboard-hero .hero-main h2 {
    max-width: 660px;
    font-size: clamp(2.25rem, 4.1vw, 4rem);
}

.dashboard-hero .hero-main .lead {
    max-width: 620px;
    color: rgba(255, 255, 255, .86);
    font-size: 1.08rem;
}

.dashboard-hero .hero-main .muted {
    color: rgba(255, 255, 255, .68);
}

.dashboard-side-panel {
    border-radius: 18px;
    border-color: rgba(45, 103, 72, .19);
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 16px 34px rgba(32, 61, 43, .11);
}

.dashboard-side-panel .simple-item {
    padding-top: 13px;
    padding-bottom: 13px;
}

.student-dashboard .student-vocabulary-now,
.student-dashboard .role-orientation,
.parent-dashboard .parent-support-panel,
.admin-dashboard .admin-overview-card,
.dashboard-page .content-grid > .panel {
    border-radius: 15px;
    box-shadow: 0 12px 28px rgba(31, 60, 42, .08);
}

.student-dashboard .role-orientation {
    margin-top: 24px;
    padding: 10px;
    border: 1px solid rgba(45, 103, 72, .15);
    background: rgba(255, 255, 255, .78);
}

.student-dashboard .role-orientation li {
    border-radius: 10px;
}

.parent-dashboard-hero {
    grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr);
    gap: 20px;
    padding: 0;
    overflow: hidden;
    border-left: 1px solid rgba(31, 66, 42, .24);
    background-image:
        linear-gradient(90deg, rgba(247, 243, 234, .98) 0%, rgba(247, 243, 234, .94) 43%, rgba(247, 243, 234, .26) 100%),
        url('images/dashboard-parent-hero.png');
    background-size: cover;
    background-position: center;
}

.parent-dashboard-hero.parent-hero--watch,
.parent-dashboard-hero.parent-hero--attention {
    background-image:
        linear-gradient(90deg, rgba(249, 242, 226, .98) 0%, rgba(249, 242, 226, .94) 43%, rgba(249, 242, 226, .26) 100%),
        url('images/dashboard-parent-hero.png');
}

.parent-dashboard-hero .parent-hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 360px;
    padding: 38px;
}

.parent-dashboard-hero .parent-hero-copy h2 {
    max-width: 640px;
    font-family: var(--serif);
    font-size: clamp(2rem, 3.6vw, 3.35rem);
    line-height: 1.04;
}

.parent-dashboard-hero .parent-hero-copy .lead {
    max-width: 620px;
    margin-bottom: 0;
    color: #425449;
    font-size: 1.06rem;
    line-height: 1.55;
}

.parent-dashboard-hero .parent-week-card {
    align-self: end;
    margin: 24px;
    background: rgba(255, 255, 255, .94);
}

.parent-dashboard .parent-support-panel {
    border-color: rgba(45, 103, 72, .18);
    background: linear-gradient(135deg, rgba(241, 248, 243, .95), rgba(255, 253, 248, .96));
}

.admin-dashboard .admin-overview-card {
    border-top: 4px solid rgba(45, 103, 72, .72);
    background: rgba(255, 255, 255, .9);
}

.admin-dashboard .admin-overview-card.attention {
    border-top-color: var(--terra);
}

.admin-dashboard .admin-student-management,
.admin-dashboard .admin-family-management {
    border-radius: 16px;
    box-shadow: 0 14px 30px rgba(31, 60, 42, .08);
}

.communication-search {
    display: flex;
    align-items: end;
    flex-wrap: wrap;
    gap: 10px;
    margin: 20px 0 8px;
    padding: 14px;
    border: 1px solid rgba(45, 103, 72, .15);
    border-radius: 12px;
    background: rgba(244, 248, 243, .82);
}

.communication-search .field {
    flex: 1 1 290px;
}

.communication-search .field span {
    margin-bottom: 6px;
}

.communication-search-result {
    margin: 0 0 14px;
    color: var(--muted);
    font-size: .92rem;
}

@media (max-width: 860px) {
    .dashboard-page .narrow-shell {
        width: min(720px, calc(100% - 28px));
        padding-top: 14px;
    }

    .dashboard-page .topbar {
        align-items: flex-start;
    }

    .dashboard-hero,
    .parent-dashboard-hero {
        grid-template-columns: 1fr;
    }

    .dashboard-hero .hero-main,
    .parent-dashboard-hero .parent-hero-copy {
        min-height: 390px;
        padding: 28px;
    }

    .parent-dashboard-hero .parent-week-card {
        margin: 0 20px 20px;
    }

    .communication-search .button {
        width: 100%;
    }

    .dashboard-page .topbar .hero-actions {
        margin-top: 14px;
    }
}

@media (max-width: 860px) {
    .student-admin-card,
    .intake-grid.two,
    .intake-grid.three,
    .intake-grid.four,
    .intro-steps,
    .auth-hero,
    .auth-landing,
    .portal-shell .portal-hero {
        grid-template-columns: 1fr;
    }

    .auth-shell {
        width: min(720px, calc(100% - 32px));
        padding: 16px 0;
    }

    .auth-landing {
        min-height: auto;
    }

    .auth-visual {
        min-height: 460px;
    }

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

    .auth-card {
        padding: 34px 28px 38px;
    }

    .student-admin-actions {
        justify-content: flex-start;
    }

    .portal-student-card {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 760px) {
    .vocabulary-trainer-callout,
    .vocabulary-card-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .vocabulary-trainer-callout .button {
        width: 100%;
    }

    .special-keyboard {
        right: 12px;
        bottom: 88px;
    }

    .special-keyboard-panel {
        right: -2px;
        max-height: min(72vh, 520px);
        overflow: auto;
    }

    .assistant-widget-panel {
        right: -4px;
        width: calc(100vw - 24px);
    }

    .assistant-widget-panel form {
        grid-template-columns: 1fr;
    }

    .signal-case-head,
    .signal-action-controls {
        flex-direction: column;
    }

    .signal-case-grid {
        grid-template-columns: 1fr;
    }

    .portfolio-grid,
    .portfolio-subject-nav {
        grid-template-columns: 1fr;
    }

    .learning-book-tabs {
        display: grid;
        width: 100%;
    }

    .learning-book-tabs a {
        text-align: center;
    }

    .learning-book-chapter {
        border-left-width: 6px;
        padding: 1.1rem;
    }

    .learning-book-index ol,
    .learning-book-process-visual ol {
        grid-template-columns: 1fr;
    }

    .admin-layout,
    .admin-two-column,
    .activity-summary-grid {
        grid-template-columns: 1fr;
    }

.admin-sidebar {
    position: static;
    max-height: none;
}
}

.navigation-loading-overlay {
    align-items: center;
    background: rgba(243, 238, 227, 0.72);
    backdrop-filter: blur(6px);
    display: flex;
    inset: 0;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    transition: opacity 160ms ease;
    z-index: 9998;
}

.navigation-loading-overlay.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.structured-material {
    border: 1px solid rgba(42, 91, 66, 0.2);
    border-left: 5px solid rgba(42, 91, 66, 0.54);
    border-radius: 8px;
    background:
        linear-gradient(180deg, #fffef9 0%, #fbf8ef 100%);
    padding: 1rem 1.1rem;
    margin: 1rem 0;
}

.cloze-blank-line {
    display: inline-block;
    width: clamp(5.2rem, 12vw, 8.5rem);
    height: .9em;
    margin: 0 .12em;
    vertical-align: -.08em;
    border-bottom: 2px solid currentColor;
}

.mini-scene-material > strong {
    display: block;
    color: var(--forest);
    font-family: var(--serif);
    font-size: 1.1rem;
    margin-bottom: 0.65rem;
}

.schoolbook-text {
    max-width: 74ch;
    color: #1f2f25;
    font-size: 1.03rem;
    line-height: 1.68;
    letter-spacing: 0;
}

.schoolbook-text p {
    margin: 0;
}

.schoolbook-text p + p {
    margin-top: .78rem;
}

.schoolbook-key-points {
    display: grid;
    gap: .64rem;
    margin: 0;
}

.schoolbook-key-point {
    display: grid;
    grid-template-columns: minmax(9.5rem, 15rem) minmax(0, 1fr);
    gap: .35rem 1rem;
    align-items: start;
    padding: .58rem .72rem;
    border-left: 3px solid rgba(42, 91, 66, .38);
    background: rgba(255, 255, 255, .62);
    border-radius: 0 .45rem .45rem 0;
}

.schoolbook-key-point dt {
    color: var(--forest);
    font-weight: 750;
}

.schoolbook-key-point dd {
    margin: 0;
}

.schoolbook-list {
    margin: .1rem 0;
    padding-left: 1.25rem;
}

.schoolbook-list li + li {
    margin-top: .38rem;
}

@media (max-width: 600px) {
    .schoolbook-key-point {
        grid-template-columns: 1fr;
        gap: .12rem;
    }
}

.mini-scene-text {
    white-space: pre-wrap;
    font-family: Georgia, "Times New Roman", serif;
    color: #173522;
    background:
        linear-gradient(180deg, #fff 0%, #fffaf2 100%);
    border: 1px solid rgba(170, 83, 43, 0.18);
    border-radius: 8px;
    padding: 1rem 1.1rem;
    margin: 0 0 0.8rem;
}

.target-language-audio {
    position: relative;
    display: flex;
    align-items: center;
    gap: .55rem;
    width: fit-content;
    max-width: 100%;
    margin: .7rem 0 .15rem;
    padding: .45rem .78rem .45rem .52rem;
    border: 1px solid rgba(42, 91, 66, .24);
    border-radius: 8px;
    background: #eef6ee;
    color: #173522;
    font-weight: 700;
}

.target-language-audio .tts-button {
    position: static;
    flex: 0 0 auto;
}

.target-language-audio-dialogue {
    align-items: flex-start;
    flex-direction: column;
    width: min(100%, 760px);
}

.target-language-audio-segments {
    display: grid;
    gap: .45rem;
    width: 100%;
}

.target-language-audio-segment {
    align-items: center;
    display: grid;
    gap: .45rem;
    grid-template-columns: auto minmax(4.5rem, auto) 1fr;
}

.target-language-audio-speaker {
    color: #556b59;
    font-weight: 800;
}

.target-language-audio-line {
    font-weight: 600;
}

.source-audio {
    border: 1px solid #b9d5c4;
    border-radius: 8px;
    background: #f4faf5;
    display: grid;
    gap: .55rem;
    margin-top: .7rem;
    padding: .8rem .9rem;
}

.source-audio-heading {
    align-items: baseline;
    color: #204c35;
    display: flex;
    gap: .6rem;
    justify-content: space-between;
}

.source-audio-heading span {
    color: #5a7462;
    font-size: .88rem;
    font-weight: 700;
}

.source-audio audio {
    max-width: 100%;
    width: 100%;
}

.mini-scene-signals,
.mini-scene-building-blocks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.mini-scene-signal,
.mini-scene-building-blocks span {
    display: inline-flex;
    gap: 0.35rem;
    align-items: baseline;
    border: 1px solid rgba(170, 83, 43, 0.18);
    border-radius: 999px;
    background: #fffaf2;
    padding: 0.45rem 0.7rem;
    color: #173522;
}

.mini-scene-building-blocks {
    margin-top: 0.8rem;
}

.mini-scene-building-blocks > strong {
    width: 100%;
}

.navigation-loading-card {
    align-items: center;
    background: #fffdf8;
    border: 1px solid rgba(35, 64, 42, 0.16);
    border-radius: 8px;
    box-shadow: 0 22px 60px rgba(28, 43, 31, 0.18);
    color: #213824;
    display: flex;
    gap: 14px;
    max-width: min(420px, calc(100vw - 40px));
    padding: 18px 22px;
}

.navigation-loading-spinner {
    border: 3px solid rgba(33, 56, 36, 0.15);
    border-top-color: #ad552d;
    border-radius: 999px;
    flex: 0 0 auto;
    height: 30px;
    width: 30px;
    animation: wvh-spin 780ms linear infinite;
}

.navigation-loading-title {
    font-weight: 800;
    margin: 0;
}

.navigation-loading-text {
    color: #667663;
    margin: 2px 0 0;
}

@keyframes wvh-spin {
    to {
        transform: rotate(360deg);
    }
}

.activity-lab-page {
    background: #f4efe5;
    color: #182b1d;
}

.activity-lab-shell {
    margin: 0 auto;
    max-width: 1240px;
    padding: 32px 22px 64px;
}

.activity-lab-hero {
    align-items: flex-start;
    display: flex;
    gap: 24px;
    justify-content: space-between;
    margin-bottom: 24px;
}

.activity-lab-hero h1 {
    font-family: var(--serif);
    font-size: clamp(2.1rem, 4vw, 4.3rem);
    letter-spacing: 0;
    line-height: 1.02;
    margin: 0 0 10px;
}

.activity-lab-hero p {
    font-size: 1.08rem;
    line-height: 1.55;
    margin: 0;
    max-width: 760px;
}

.activity-lab-policy,
.activity-demo-card {
    background: #fffdf8;
    border: 1px solid rgba(35, 64, 42, 0.14);
    border-radius: 8px;
    box-shadow: 0 18px 44px rgba(26, 43, 30, 0.08);
}

.activity-lab-policy {
    border-left: 6px solid #2f7148;
    margin-bottom: 24px;
    padding: 20px 24px;
}

.activity-lab-policy h2,
.activity-demo-card h2 {
    font-family: var(--serif);
    letter-spacing: 0;
    margin: 0 0 10px;
}

.activity-lab-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
}

.activity-demo-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    padding: 20px;
}

.activity-demo-card[data-activity-state="correct"] {
    border-color: rgba(47, 113, 72, 0.55);
}

.activity-demo-card[data-activity-state="incorrect"] {
    border-color: rgba(173, 85, 45, 0.55);
}

.activity-demo-head {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.activity-demo-head span,
.activity-purpose,
.activity-prompt {
    font-weight: 800;
}

.activity-demo-head span {
    color: #a8542d;
    font-size: .78rem;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.activity-demo-head small {
    color: #5d6d61;
}

.activity-purpose {
    color: #2f7148;
    margin: 0;
}

.activity-prompt {
    background: #f8efe7;
    border-left: 4px solid #ad552d;
    border-radius: 8px;
    margin: 0;
    padding: .75rem .9rem;
}

.activity-playground {
    border: 1px solid rgba(42, 91, 66, .18);
    border-radius: 8px;
    display: grid;
    gap: 12px;
    padding: 14px;
}

.activity-token-bank,
.activity-role-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.activity-token-bank button,
.activity-role-row button,
.activity-sort-list button,
.activity-timeline button,
.activity-annotate-text button {
    border: 1px solid rgba(42, 91, 66, .22);
    border-radius: 8px;
    background: #edf6ee;
    color: #18351f;
    cursor: pointer;
    font: inherit;
    font-weight: 800;
    padding: .55rem .75rem;
}

.activity-target-grid {
    display: grid;
    gap: 10px;
}

.activity-drop-target {
    border: 1px dashed rgba(42, 91, 66, .48);
    border-radius: 8px;
    min-height: 70px;
    padding: .75rem;
}

.activity-drop-target[data-state="ok"] {
    background: #e7f4e8;
}

.activity-drop-target[data-state="try"] {
    background: #fff4e6;
}

.activity-sort-list,
.activity-timeline {
    display: grid;
    gap: 8px;
    margin: 0;
    padding-left: 1.2rem;
    position: relative;
}

.activity-sort-list li,
.activity-timeline li {
    align-items: center;
    background: #fffaf2;
    border: 1px solid rgba(170, 83, 43, .18);
    border-radius: 8px;
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr auto auto;
    padding: .65rem .75rem;
    position: relative;
    z-index: 1;
}

.activity-sort-list li::after,
.activity-timeline li::after {
    background: #2f7148;
    bottom: -10px;
    content: "";
    height: 12px;
    left: 1.1rem;
    opacity: .48;
    position: absolute;
    width: 3px;
}

.activity-sort-list li:last-child::after,
.activity-timeline li:last-child::after {
    display: none;
}

.activity-timeline li {
    border-left: 5px solid #2f7148;
}

.activity-cloze-text,
.activity-model-line {
    background: #fffaf2;
    border: 1px solid rgba(170, 83, 43, .18);
    border-radius: 8px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.1rem;
    line-height: 1.55;
    margin: 0;
    padding: .9rem 1rem;
}

.activity-hotspot-scene {
    aspect-ratio: 16 / 9;
    background:
        radial-gradient(circle at 25% 45%, #d9473d 0 4%, transparent 4.3%),
        radial-gradient(circle at 54% 36%, #6fa7d9 0 5%, transparent 5.4%),
        linear-gradient(180deg, #e9f4ee 0%, #fffaf2 100%);
    border: 1px solid rgba(42, 91, 66, .18);
    border-radius: 8px;
    position: relative;
}

.activity-hotspot-scene button {
    align-items: center;
    background: #fff;
    border: 2px solid #2f7148;
    border-radius: 999px;
    display: inline-flex;
    font-weight: 900;
    height: 34px;
    justify-content: center;
    left: var(--x);
    position: absolute;
    top: var(--y);
    transform: translate(-50%, -50%);
    width: 34px;
}

.activity-hotspot-scene button.selected,
.activity-role-row button.selected,
.activity-annotate-text button.selected {
    background: #2f7148;
    color: #fff;
}

.activity-annotate-text {
    display: grid;
    gap: 8px;
    margin: 0;
}

.activity-annotate-text button {
    text-align: left;
}

.activity-playground textarea {
    border: 1px solid rgba(42, 91, 66, .22);
    border-radius: 8px;
    font: inherit;
    padding: .8rem;
    resize: vertical;
}

.activity-string-sim {
    align-items: center;
    background: #f7fbf8;
    border: 1px solid rgba(42, 91, 66, .18);
    border-radius: 8px;
    display: flex;
    height: 90px;
    justify-content: center;
    overflow: hidden;
}

.activity-string-sim span {
    --string-width: 60%;
    --wave-speed: 760ms;
    animation: activity-string-wave var(--wave-speed) ease-in-out infinite;
    background: #ad552d;
    border-radius: 999px;
    display: block;
    height: 4px;
    width: var(--string-width);
}

@keyframes activity-string-wave {
    0%, 100% {
        transform: translateY(0) scaleY(1);
    }
    50% {
        transform: translateY(-8px) scaleY(2.5);
    }
}

.activity-review-note {
    color: #7a5b2b;
    font-weight: 800;
    margin: 0;
}

.activity-playground output {
    color: #49654f;
    font-weight: 800;
    min-height: 1.4em;
}

.activity-demo-card[data-activity-state="correct"] .activity-playground output {
    color: #24613b;
}

.activity-demo-card[data-activity-state="incorrect"] .activity-playground output {
    color: #8a3f22;
}

@media (max-width: 720px) {
    .activity-lab-hero {
        display: grid;
    }

    .activity-lab-grid {
        grid-template-columns: 1fr;
    }
}

/* Student home: repeated visual waymarks help pupils scan the next useful
   action without turning the learning space into a dashboard of metrics. */
.student-week-guide {
    display: grid;
    gap: 1rem;
    align-content: start;
}

.student-vocabulary-now {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    margin: 18px 0;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(177, 84, 44, 0.3);
    border-left: 5px solid var(--terra);
    border-radius: 8px;
    background: linear-gradient(100deg, rgba(247, 235, 227, 0.88), rgba(255, 255, 255, 0.96));
}

.student-vocabulary-symbol {
    position: relative;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(177, 84, 44, 0.32);
    border-radius: 8px;
    background: #fff;
}

.student-vocabulary-symbol::before,
.student-vocabulary-symbol::after {
    content: '';
    position: absolute;
    box-sizing: border-box;
}

.student-vocabulary-symbol::before {
    top: 12px;
    left: 10px;
    width: 26px;
    height: 19px;
    border: 2px solid var(--terra);
    border-radius: 8px;
}

.student-vocabulary-symbol::after {
    bottom: 10px;
    left: 16px;
    width: 6px;
    height: 6px;
    border-bottom: 2px solid var(--terra);
    border-left: 2px solid var(--terra);
    transform: skewY(-35deg);
}

.student-vocabulary-copy {
    min-width: 0;
}

.student-vocabulary-copy .eyebrow {
    margin: 0 0 0.18rem;
}

.student-vocabulary-copy h3,
.student-vocabulary-copy p {
    margin: 0;
}

.student-vocabulary-copy p:not(.eyebrow) {
    margin-top: 0.25rem;
    color: var(--muted);
}

.student-vocabulary-languages {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.55rem;
}

.student-vocabulary-languages span {
    padding: 0.22rem 0.5rem;
    border: 1px solid rgba(177, 84, 44, 0.22);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.76);
    color: var(--terra);
    font-size: 0.8rem;
    font-weight: 800;
}

.student-week-guide-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.student-week-guide-head .eyebrow {
    margin: 0 0 0.12rem;
}

.student-week-guide-head h3 {
    margin: 0;
}

.student-week-avatar {
    width: 56px;
    height: 56px;
    flex: 0 0 auto;
    border: 2px solid #fff;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 2px rgba(45, 103, 72, 0.25);
}

.student-week-route {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
    padding-top: 0.15rem;
}

.student-week-route > div {
    display: grid;
    grid-template-columns: 31px minmax(0, 1fr);
    column-gap: 0.4rem;
    align-items: center;
    min-width: 0;
}

.student-week-route strong,
.student-week-route small {
    display: block;
}

.student-week-route strong {
    color: var(--forest);
    font-size: 0.83rem;
}

.student-week-route small {
    color: var(--muted);
    font-size: 0.72rem;
    line-height: 1.25;
}

.student-symbol,
.role-orientation-icon,
.student-home-link-icon {
    position: relative;
    display: grid;
    place-items: center;
    color: var(--forest);
}

.student-symbol {
    grid-row: span 2;
    width: 29px;
    height: 29px;
    border: 1px solid var(--sage-l);
    border-radius: 50%;
    background: var(--sage-p);
}

.role-orientation-icon::before,
.role-orientation-icon::after,
.student-symbol::before,
.student-symbol::after,
.student-home-link-icon::before,
.student-home-link-icon::after {
    content: '';
    position: absolute;
    box-sizing: border-box;
}

.role-icon-start::before,
.student-symbol-start::before,
.student-home-link-icon.is-week::before {
    width: 14px;
    height: 12px;
    border: 2px solid currentColor;
    border-radius: 2px;
    background: linear-gradient(180deg, currentColor 0 3px, transparent 3px);
}

.role-icon-start::after,
.student-symbol-start::after,
.student-home-link-icon.is-week::after {
    width: 2px;
    height: 4px;
    border-radius: 2px;
    background: currentColor;
    box-shadow: 5px 0 0 currentColor;
    transform: translateY(-7px);
}

.role-icon-practice::before,
.student-symbol-practice::before {
    width: 15px;
    height: 5px;
    border: 2px solid currentColor;
    border-radius: 2px;
    transform: rotate(-43deg);
}

.role-icon-practice::after,
.student-symbol-practice::after {
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-right: 5px solid currentColor;
    transform: translate(-8px, 7px) rotate(-43deg);
}

.role-icon-notebook::before,
.student-symbol-notebook::before,
.student-home-link-icon.is-notebook::before {
    width: 13px;
    height: 16px;
    border: 2px solid currentColor;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent 0 28%, currentColor 28% 34%, transparent 34%);
}

.role-icon-notebook::after,
.student-symbol-notebook::after,
.student-home-link-icon.is-notebook::after {
    width: 5px;
    height: 2px;
    background: currentColor;
    box-shadow: 0 4px 0 currentColor;
    transform: translate(2px, 2px);
}

.student-home-link {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 0.75rem;
    align-items: center;
}

.student-home-link-icon {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(45, 103, 72, 0.22);
    border-radius: 8px;
    background: rgba(232, 240, 235, 0.76);
}

.simple-item .student-home-link-icon {
    color: var(--forest);
}

.student-home-link-copy {
    display: grid;
    gap: 0.18rem;
}

.student-home-link-copy strong {
    color: var(--forest);
}

.student-home-link-icon.is-words::before {
    width: 16px;
    height: 12px;
    border: 2px solid currentColor;
    border-radius: 7px;
}

.student-home-link-icon.is-words::after {
    bottom: 11px;
    left: 11px;
    width: 5px;
    height: 5px;
    border-bottom: 2px solid currentColor;
    border-left: 2px solid currentColor;
    transform: skewY(-35deg);
}

.role-orientation li.current .role-orientation-icon {
    color: #fff;
}

.tutor-workspace-intro {
    margin-bottom: 18px;
}

.tutor-student-picker {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
    gap: 24px;
    align-items: end;
    margin-bottom: 18px;
}

.tutor-student-picker h3,
.tutor-workspace-panel h3,
.tutor-communication-panel h3,
.tutor-learning-book-panel h3,
.tutor-decisions-panel h3 {
    margin: 0;
}

.tutor-student-picker-form {
    display: flex;
    gap: 10px;
    align-items: end;
}

.tutor-student-picker-form .field {
    flex: 1 1 auto;
}

.tutor-workspace-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(210px, .35fr);
    gap: 26px;
    margin: 22px 0 18px;
    padding: 28px 30px;
    border: 1px solid rgba(35, 79, 54, .26);
    border-left: 6px solid var(--forest);
    border-radius: 8px;
    background: #f5f8f3;
}

.tutor-workspace-hero.tone-attention {
    border-left-color: var(--terra);
    background: #fff7f1;
}

.tutor-workspace-hero.tone-working {
    border-left-color: #2e766d;
    background: #f0f8f6;
}

.tutor-workspace-hero h2 {
    margin: 0 0 8px;
    color: var(--forest);
}

.tutor-workspace-hero p:not(.eyebrow) {
    margin: 0;
    max-width: 78ch;
    line-height: 1.65;
}

.tutor-workspace-meta {
    display: grid;
    align-content: start;
    gap: 8px;
    padding-top: 8px;
    color: var(--muted);
}

.tutor-workspace-meta span {
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(35, 79, 54, .16);
}

.tutor-workspace-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

.tutor-workspace-panel {
    display: grid;
    align-content: start;
    gap: 10px;
    min-height: 205px;
}

.tutor-workspace-panel strong {
    color: var(--forest);
}

.tutor-workspace-panel p {
    margin: 0;
    line-height: 1.6;
}

.tutor-workspace-panel small {
    color: var(--muted);
    font-weight: 700;
}

.tutor-communication-panel,
.tutor-learning-book-panel,
.tutor-decisions-panel {
    margin-top: 18px;
}

.tutor-communication-panel > .muted {
    margin: -4px 0 16px;
}

.tutor-communication-list {
    display: grid;
    gap: 12px;
}

.tutor-communication-item {
    padding: 18px 20px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: #fffdf9;
}

.tutor-communication-item h4,
.tutor-decision-item h4,
.tutor-learning-book-item h4 {
    margin: 10px 0 6px;
    color: var(--forest);
}

.tutor-communication-item p,
.tutor-decision-item p {
    margin: 7px 0;
    line-height: 1.6;
}

.effect-pill.effect-verified,
.effect-pill.effect-applied,
.effect-pill.effect-not_required {
    border-color: rgba(38, 111, 73, .25);
    background: #edf6ef;
    color: #226342;
}

.effect-pill.effect-planned,
.effect-pill.effect-pending {
    border-color: rgba(165, 103, 38, .22);
    background: #fff8e7;
    color: #7e521e;
}

.effect-pill.effect-blocked {
    border-color: rgba(169, 64, 38, .24);
    background: #fff0eb;
    color: #973d25;
}

.tutor-learning-book-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.tutor-learning-book-item {
    min-width: 0;
    padding: 16px;
    border-left: 4px solid var(--sage);
    background: #f8faf6;
}

.tutor-learning-book-item > span {
    color: var(--terra);
    font-size: .79rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.tutor-learning-book-item p {
    margin: 0;
    color: var(--ink);
    line-height: 1.55;
}

.tutor-decision-item {
    padding: 20px;
}

.admin-student-management > .muted {
    margin: -4px 0 16px;
    max-width: 82ch;
}

.admin-student-roster {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.admin-student-roster-item {
    display: grid;
    gap: 9px;
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--line);
    border-left: 4px solid var(--sage);
    border-radius: 8px;
    background: #fffdf9;
}

.admin-student-roster-item.tone-attention {
    border-left-color: var(--terra);
    background: #fff8f3;
}

.admin-student-roster-item.tone-working {
    border-left-color: #2e766d;
    background: #f4faf8;
}

.admin-student-roster-head {
    display: flex;
    gap: 12px;
    justify-content: space-between;
    align-items: start;
}

.admin-student-roster-head h4 {
    margin: 0 0 3px;
    color: var(--forest);
}

.admin-student-roster-head > div > span,
.admin-student-roster-meta,
.admin-student-roster-item small {
    color: var(--muted);
    line-height: 1.48;
}

.admin-student-roster-item > p {
    margin: 0;
    color: var(--ink);
    font-weight: 700;
}

.admin-student-roster-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: .9rem;
}

.admin-family-management > .muted {
    margin: -4px 0 16px;
    max-width: 84ch;
}

.admin-family-roster {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.admin-family-roster-item {
    display: grid;
    gap: 12px;
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--line);
    border-left: 4px solid #2e766d;
    border-radius: 8px;
    background: #fbfdfb;
}

.admin-family-roster-head {
    display: flex;
    gap: 12px;
    justify-content: space-between;
    align-items: start;
}

.admin-family-roster-head h4 {
    margin: 0 0 3px;
    color: var(--forest);
}

.admin-family-roster-head > div > span {
    color: var(--muted);
    font-size: .9rem;
}

.admin-family-access {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.admin-family-access span {
    padding: 4px 8px;
    border: 1px solid rgba(46, 118, 109, .18);
    border-radius: 999px;
    background: #eef8f5;
    color: #215d55;
    font-size: .78rem;
    font-weight: 700;
}

.admin-family-children {
    display: grid;
    gap: 8px;
}

.admin-family-children a {
    display: grid;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid rgba(35, 79, 54, .13);
    border-radius: 6px;
    background: #fff;
    color: var(--ink);
    text-decoration: none;
}

.admin-family-children a:hover {
    border-color: rgba(35, 79, 54, .34);
    background: #f5faf5;
}

.admin-family-children span {
    color: var(--muted);
    font-size: .88rem;
}

@media (max-width: 720px) {
    .tutor-student-picker,
    .tutor-workspace-hero,
    .tutor-workspace-grid,
    .tutor-learning-book-list {
        grid-template-columns: 1fr;
    }

    .tutor-student-picker-form {
        align-items: stretch;
        flex-direction: column;
    }

    .tutor-student-picker-form .button {
        width: 100%;
    }

    .tutor-workspace-hero {
        padding: 22px 18px;
    }

    .admin-student-roster {
        grid-template-columns: 1fr;
    }

    .admin-family-roster {
        grid-template-columns: 1fr;
    }

    .admin-student-roster-head {
        align-items: start;
        flex-direction: column;
    }

    .admin-family-roster-head {
        align-items: start;
        flex-direction: column;
    }

    .vocabulary-overview-head,
    .student-vocabulary-now {
        align-items: flex-start;
    }

    .vocabulary-overview-list {
        grid-template-columns: 1fr;
    }

    .student-vocabulary-now {
        grid-template-columns: 48px minmax(0, 1fr);
    }

    .student-vocabulary-now .button {
        grid-column: 1 / -1;
        width: 100%;
    }

    .student-week-route {
        grid-template-columns: 1fr;
    }

    .student-week-route > div {
        grid-template-columns: 31px minmax(0, 1fr) minmax(115px, 1.2fr);
    }

    .student-week-route small {
        grid-column: 3;
        grid-row: 1;
    }
}