@import url("./style.css") layer(base);
@import url("./product.css") layer(legacy-product);

/* Unified product interface */
:root {
  --product-white: #ffffff;
  --product-ink: #151618;
  --product-navy: #151618;
  --product-muted: #6d727a;
  --product-line: #151618;
  --product-soft-line: #d9dce1;
  --product-soft: #f3f4f5;
  --product-accent: #3157d5;
  --product-danger: #e34c3d;
  --product-radius: .55rem;
  --product-shadow: 0 1.15rem 2.8rem rgba(20, 24, 33, .08);
  --motion-out: cubic-bezier(.23, 1, .32, 1);
  --motion-in-out: cubic-bezier(.77, 0, .175, 1);
  --motion-drawer: cubic-bezier(.32, .72, 0, 1);
  --accent: var(--product-accent);
  --text: var(--product-ink);
  --muted: var(--product-muted);
  --line: var(--product-soft-line);
}

html { background: #fff; }
body { background: #fff; color: var(--product-ink); font-family: Inter, "Microsoft YaHei", "PingFang SC", Arial, sans-serif; letter-spacing: -.012em; }
button, input, textarea, select { font-family: inherit; }
button { transition: transform .14s var(--motion-out), background-color .2s ease, border-color .2s ease, color .2s ease; }
button:active:not(:disabled) { transform: scale(.97); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid rgba(49, 87, 213, .72); outline-offset: 3px; }

/* Quiet global shell */
.sidebar { height: 4.75rem; padding-inline: clamp(1.25rem, 4vw, 4.25rem); gap: clamp(2.5rem, 7vw, 7rem); border-bottom: 1px solid var(--product-soft-line); background: rgba(255,255,255,.97); backdrop-filter: blur(14px); }
.sidebar::after { display: none; }
.brand { gap: .55rem; }
.brand > i { display: none; }
.brand span { gap: .5rem; }
.brand b { font-size: 1.9rem; font-style: normal; font-weight: 900; letter-spacing: -.065em; }
.brand small { color: #555b64; font-size: 1rem; font-weight: 720; }
.nav-list { gap: clamp(1.5rem, 3.5vw, 3rem); }
.nav-list a { padding-inline: .15rem; font-size: .96rem; font-weight: 760; }
.nav-list a::after { bottom: .05rem; height: .2rem; background: var(--product-danger); }
.nav-list a > span { height: auto; line-height: 1.4; overflow: visible; }
.nav-list a > span i { height: auto; transition: none; }
.nav-list a > span::after { display: none; }
.nav-list a:hover > span i, .nav-list a:focus-visible > span i { transform: none; }
.sidebar-foot { min-width: 10rem; }
.sidebar-foot p { display: none; }
.mini-progress > div:first-child { color: var(--product-muted); font-size: .68rem; }
.mini-progress .bar { height: .22rem; background: #e7e9ec; }
.mini-progress .bar i { background: var(--product-accent); }
.view { width: min(100%, 100rem); min-height: calc(100vh - 4.75rem); padding: clamp(1.75rem, 3.8vw, 3.75rem) clamp(1.25rem, 4vw, 4.25rem); }

.page-kicker { display: inline-block; color: var(--product-accent); font-size: .72rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.page-title { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(18rem, .85fr); align-items: end; gap: 1.5rem 3rem; margin-bottom: 2.1rem; padding-bottom: 2rem; border-bottom: 1px solid var(--product-soft-line); }
.page-title > .page-kicker { grid-column: 1 / -1; }
.page-title h1, .module-detail-head h1, .lesson-head h1 { max-width: 12ch; margin: 0; font-size: clamp(3.15rem, 5.8vw, 6.2rem); line-height: 1.01; letter-spacing: -.052em; font-weight: 880; }
.page-title p { justify-self: end; max-width: 34rem; margin: 0; color: var(--product-muted); }
.eyebrow, .technical-label, .level-badge, .grammar-kind { border: 0; border-radius: 0; padding: 0; background: transparent; color: var(--product-accent); font-family: inherit; font-size: .7rem; font-weight: 850; letter-spacing: .075em; }
.panel, .module-card, .question-card, .vocab-card, .stat-card, .task-card { border-color: var(--product-soft-line); border-radius: var(--product-radius); background: #fff; box-shadow: none; }
.primary-btn, .check-btn, .secondary-btn, .danger-btn, .ghost-btn { min-height: 2.85rem; border-width: 1px; border-color: var(--product-soft-line); border-radius: var(--product-radius); padding: .68rem 1rem; letter-spacing: -.015em; transition: transform .14s var(--motion-out), background-color .2s ease, border-color .2s ease, color .2s ease; }
.primary-btn, .check-btn { border-color: var(--product-ink); background: var(--product-ink); color: #fff; }
.secondary-btn, .ghost-btn { background: #fff; color: var(--product-ink); }
.secondary-btn:hover { border-color: var(--product-ink); }
.primary-btn:hover, .check-btn:hover, .secondary-btn:hover, .danger-btn:hover,
.today-action-arrow:hover b, .today-route-rail button:hover b,
.vocab-card:hover .vocab-open { transform: none; }
.primary-btn:active:not(:disabled), .check-btn:active:not(:disabled),
.secondary-btn:active:not(:disabled), .danger-btn:active:not(:disabled),
.ghost-btn:active:not(:disabled) { transform: scale(.97); }

/* Onboarding */
.onboarding-layout { width: 100%; min-height: calc(100vh - 12rem); grid-template-columns: minmax(31rem, 1.08fr) minmax(27rem, .92fr); gap: clamp(3rem, 7vw, 7.5rem); align-items: center; }
.onboarding-copy { order: 2; }
.onboarding-copy h1 { max-width: 11ch; margin: .85rem 0 1.35rem; font-size: clamp(3.2rem, 3.7vw, 4.1rem); line-height: 1.04; letter-spacing: -.045em; font-weight: 880; }
.onboarding-copy > p { max-width: 38rem; margin: 0 0 1.7rem; color: var(--product-muted); font-size: 1rem; }
.onboarding-copy ol { margin: 0 0 1.6rem; border-top-color: var(--product-soft-line); }
.onboarding-copy li { min-height: 3.2rem; grid-template-columns: 3.25rem 1fr; border-bottom-color: var(--product-soft-line); }
.onboarding-copy li b { color: var(--product-accent); font-family: inherit; font-size: .7rem; }
.onboarding-copy .primary-btn { min-width: 12rem; }
.onboarding-copy > small { color: var(--product-muted); }
.onboarding-media { order: 1; height: clamp(31rem, 70vh, 45rem); clip-path: none; border-radius: var(--product-radius); box-shadow: var(--product-shadow); }
.onboarding-media::after { display: none; }
.onboarding-media img { object-position: 50% 50%; }

/* Today */
.today-dashboard { gap: 1.4rem; }
.today-primary-grid { display: grid; grid-template-columns: minmax(25rem, .72fr) minmax(34rem, 1.28fr); gap: clamp(1.5rem, 2.5vw, 2.5rem); align-items: stretch; }
.today-overview { min-height: clamp(35rem, 66vh, 43rem); display: flex; flex-direction: column; gap: 1rem; align-items: stretch; }
.today-intro { display: flex; min-height: 0; flex: 1; flex-direction: column; }
.today-meta-row { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: .9rem; border-bottom: 1px solid var(--product-soft-line); color: var(--product-muted); font-size: .74rem; }
.today-meta-row b { color: var(--product-ink); }
.today-intro h1 { margin: clamp(3rem, 7vh, 5.6rem) 0 1.1rem; display: block; max-width: 8ch; font-size: clamp(4rem, 6vw, 6.3rem); line-height: .98; letter-spacing: -.06em; font-weight: 880; }
.today-intro h1 span { display: block; }
.today-intro h1 span:last-child { margin-left: 0; }
.today-intro p { max-width: 31rem; margin: 0; color: var(--product-muted); font-size: 1rem; }
.today-action-board { min-height: 0; margin-top: auto; display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); clip-path: none; border-top: 1px solid var(--product-soft-line); background: transparent; }
.today-action-board > * { min-width: 0; padding: 1.15rem 1.1rem 1.15rem 0; border: 0; border-right: 1px solid var(--product-soft-line); background: #fff; }
.today-action-board .today-next-lesson { padding-left: 1.15rem; border-right: 0; }
.today-review-count span, .today-next-lesson > span { color: var(--product-muted); font-family: inherit; letter-spacing: 0; }
.today-review-count strong { margin: .3rem 0 .1rem; font-size: 3.7rem; font-weight: 840; letter-spacing: -.075em; }
.today-review-count small, .today-next-lesson small { color: var(--product-muted); }
.today-next-lesson h2 { margin: .25rem 0 .35rem; font-size: clamp(1.35rem, 2vw, 2rem); line-height: 1.05; }
.today-action-arrow { grid-column: 1 / -1; min-height: 3.8rem; padding: .8rem 1.05rem; display: flex; flex-direction: row; justify-content: space-between; border: 0; border-radius: var(--product-radius); background: var(--product-ink); color: #fff; }
.today-action-arrow b { font-size: 1.45rem; }
.editorial-carousel { min-width: 0; }
.editorial-carousel-stage { min-height: clamp(35rem, 66vh, 43rem); height: 100%; grid-template-columns: minmax(0, 1fr) clamp(4.25rem, 7.5vw, 7rem); gap: .55rem; padding-bottom: 3rem; }
.editorial-carousel-main, .editorial-carousel-peek { border-radius: var(--product-radius); overflow: hidden; background: var(--product-soft); }
.editorial-carousel-peek { clip-path: none; }
.editorial-slide { clip-path: none; opacity: 0; transition: none; }
.editorial-slide.is-active { opacity: 1; }
.editorial-slide img { transform: scale(1.018); }
.editorial-slide figcaption { left: 1rem; bottom: 1rem; padding: .5rem .65rem; border: 0; border-radius: .38rem; background: #fff; color: var(--product-ink); box-shadow: var(--product-shadow); }
.editorial-slide figcaption span { color: var(--product-accent); }
.editorial-carousel-controls { margin-top: -2.75rem; min-height: 2.7rem; padding: 0; border: 0; }
.editorial-carousel-controls > button { min-height: 2.45rem; border: 0; background: transparent; }
.editorial-carousel-progress span { background: var(--product-soft-line); }
.editorial-carousel-progress span::before { background: var(--product-danger); }
.editorial-carousel-dots button { background: var(--product-soft-line); }
.editorial-carousel-dots button.is-active { background: var(--product-accent); }
.today-route-rail { min-height: 4.65rem; grid-template-columns: 1fr .55fr .8fr; border-block-color: var(--product-soft-line); }
.today-route-rail > * { padding: .8rem 1.25rem; border-right-color: var(--product-soft-line); }
.today-route-rail p span { color: var(--product-muted); }
.today-route-rail p b { font-size: 1rem; }
.today-route-rail button { font-size: .92rem; }
.today-route-rail button b { font-size: 1.35rem; }
.local-note { color: var(--product-muted); }
.local-note span { color: var(--product-accent); }

/* Catalog */
.course-page-title { margin-bottom: 1.5rem; }
.course-page-title h1 { max-width: 12ch; font-size: clamp(3.1rem, 5.1vw, 5.5rem); line-height: 1; }
.course-editorial { display: none; }
.course-search { width: min(100%, 34rem); margin: 0; display: grid; gap: .45rem; }
.course-search > span { color: var(--product-ink); font-size: .72rem; font-weight: 800; }
.course-search input { min-height: 3.15rem; border: 1px solid var(--product-soft-line); border-radius: var(--product-radius); padding: 0 1rem; background: #fff; }
.level-tabs { margin: -3.15rem 0 1.8rem min(36rem, 45%); display: flex; justify-content: flex-end; gap: .4rem; overflow: visible; }
.level-tab { min-width: 0; min-height: 2.75rem; padding: .55rem .85rem; border: 1px solid var(--product-soft-line); border-radius: 2rem; background: #fff; }
.level-tab.active { border-color: var(--product-ink); background: var(--product-ink); color: #fff; }
.catalog-count { margin-bottom: .55rem; color: var(--product-muted); font-size: .75rem; text-align: right; }
.module-grid { display: block; border-top: 1px solid var(--product-ink); }
.module-card { min-height: 7.1rem; display: grid; grid-template-columns: 4.5rem minmax(18rem, 1fr) 12rem minmax(10rem, 18rem) 2.5rem; grid-template-rows: auto auto; align-items: center; gap: 0 1.2rem; padding: 1.1rem .75rem; border: 0; border-bottom: 1px solid var(--product-soft-line); border-radius: 0; cursor: pointer; transition: background .2s ease; }
.module-card:hover { transform: none; background: var(--product-soft); box-shadow: none; }
.module-card::before { content: attr(data-module-number); grid-column: 1; grid-row: 1 / 3; font-size: 2.25rem; font-weight: 850; letter-spacing: -.06em; }
.module-card::after { content: "→"; grid-column: 5; grid-row: 1 / 3; font-size: 1.25rem; text-align: center; }
.module-card .module-top { grid-column: 2; grid-row: 1; display: flex; gap: .7rem; align-items: center; }
.module-card .level-badge { color: var(--product-accent); }
.module-card .status-badge { border: 0; background: transparent; color: var(--product-muted); font-size: .7rem; }
.module-card h3 { grid-column: 2; grid-row: 2; margin: .25rem 0 0; font-size: 1.55rem; line-height: 1.1; }
.module-card p { grid-column: 3; grid-row: 1 / 3; margin: 0; color: var(--product-muted); }
.module-card .bar { grid-column: 4; grid-row: 1 / 3; height: .35rem; border-radius: 1rem; background: #e9eaec; }
.module-card .bar i { border-radius: inherit; background: var(--product-accent); }
.catalog-empty { padding: 4rem 0; text-align: center; }
.module-detail-head { padding-bottom: 2rem; border-bottom: 1px solid var(--product-soft-line); }
.module-detail-head .eyebrow { color: var(--product-accent); }
.module-detail-head p { max-width: 48rem; color: var(--product-muted); }
.lesson-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .55rem; }
.lesson-chip { min-height: 5.5rem; border: 1px solid var(--product-soft-line); border-radius: var(--product-radius); background: #fff; text-align: left; }
.lesson-chip:hover { border-color: var(--product-accent); background: var(--product-soft); }

/* Lesson */
#app:has(.lesson-head) { display: block; max-width: 94rem; margin-inline: auto; }
.lesson-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 2rem; padding: 0 0 1.5rem; border-bottom: 1px solid var(--product-soft-line); }
.lesson-title-copy > .level-badge { color: var(--product-accent); }
.lesson-head h1 { max-width: 14ch; margin: .5rem 0 .3rem; font-size: clamp(3rem, 5.2vw, 5rem); }
.lesson-title-copy > p { margin: 0; color: var(--product-muted); }
.lesson-objectives-disclosure { margin-top: .55rem; }
.lesson-objectives-disclosure summary { color: var(--product-muted); }
.lesson-head-tools { align-items: end; }
.lesson-progress-count { min-width: 6rem; }
.lesson-progress-count b { font-size: 2.15rem; }
.lesson-progress-count small { color: var(--product-muted); }
.lesson-status-badge { border-color: var(--product-soft-line); border-radius: var(--product-radius); }
.lesson-status-badge.done { background: var(--product-soft); color: var(--product-accent); }
.lesson-completion { min-height: 3.5rem; margin: 1rem 0; padding: .4rem .5rem .4rem 1rem; border: 1px solid var(--product-soft-line); border-radius: var(--product-radius); background: #fff; }
.lesson-completion summary { min-height: 2.6rem; }
.lesson-completion > button { min-height: 2.65rem; }
.lesson-tabs { position: sticky; z-index: 30; top: 4.75rem; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; margin: 0; border: 1px solid var(--product-soft-line); border-radius: var(--product-radius); overflow: hidden; background: #fff; }
.lesson-tabs button { min-height: 4rem; padding: .55rem .65rem; border: 0; border-right: 1px solid var(--product-soft-line); border-radius: 0; background: #fff; font-size: .82rem; text-align: left; }
.lesson-tabs button:last-child { border-right: 0; }
.lesson-tabs button span { margin-right: .45rem; color: var(--product-muted); font-size: .66rem; }
.lesson-tabs button.active { background: var(--product-soft); color: var(--product-ink); box-shadow: inset 0 -.2rem var(--product-accent); }
.lesson-tabs button.visited span { color: var(--product-accent); }
#app:has(.lesson-head) .lesson-head,
#app:has(.lesson-head) .lesson-completion,
#app:has(.lesson-head) .lesson-tabs { margin-right: calc(clamp(20rem, 23vw, 22rem) + 1.35rem); }
#lessonContent { padding-top: 1.25rem; }
#app:has(.lesson-head) #lessonContent { animation: none; transform: none; }
.lesson-layout { grid-template-columns: minmax(0, 1fr) clamp(20rem, 23vw, 22rem); gap: 1.35rem; }
.reading-card, .vocab-section, .exercise-section, .output-box, .grammar-card, .question-card { border-color: var(--product-soft-line); border-radius: var(--product-radius); }
.reading-card, .vocab-section { padding: clamp(1.25rem, 2.2vw, 2rem); }
.reading-card-heading, .vocab-section-head { padding-bottom: 1rem; }
.reading-card-heading h2, .vocab-section-head h2 { font-size: clamp(1.8rem, 2.8vw, 2.6rem); }
.audio-player-card { border-radius: var(--product-radius); background: var(--product-soft); }
.audio-learning-modes { border-color: var(--product-soft-line); border-radius: var(--product-radius); overflow: hidden; }
.audio-learning-modes button { border-right-color: var(--product-soft-line); }
.audio-learning-modes button.active { background: var(--product-ink); color: #fff; box-shadow: none; }
.reading-sentence { border-bottom-color: var(--product-soft-line); }
.sentence-spanish { font-size: clamp(1.08rem, 1.6vw, 1.35rem); }
.sentence-chinese { color: var(--product-muted); }
.click-word:hover, .audio-word:hover { background: rgba(49,87,213,.1); color: var(--product-accent); }
.is-audio-active-word { background: rgba(49,87,213,.15); color: var(--product-accent); }
.vocab-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--product-soft-line); }
.vocab-card { min-height: 5.2rem; padding: .75rem .85rem; border: 0; border-right: 1px solid var(--product-soft-line); border-bottom: 1px solid var(--product-soft-line); border-radius: 0; }
.vocab-card:nth-child(even) { border-right: 0; }
.vocab-card:hover, .vocab-card.is-selected { background: var(--product-soft); }
.vocab-card.is-selected { box-shadow: inset .2rem 0 var(--product-accent); }
.vocab-index { color: var(--product-muted); }
.vocab-open { color: var(--product-accent); }
.word-inspector { position: fixed; z-index: 40; top: 9.7rem; right: max(clamp(1.25rem, 4vw, 4.25rem), calc((100vw - 100rem) / 2 + 4.25rem)); bottom: auto; width: clamp(20rem, 23vw, 22rem); max-height: calc(100vh - 10.7rem); }
.word-inspector-scrim { display: none; }
.word-side { width: 100%; height: auto; max-height: calc(100vh - 10.7rem); min-height: 31rem; padding: 1.25rem; border: 1px solid var(--product-soft-line); border-radius: var(--product-radius); background: var(--product-soft); overflow: auto; }
.word-side.empty { padding: 1.5rem; border-left: 1px solid var(--product-soft-line); background: var(--product-soft); }
.word-empty-mark { color: var(--product-muted); font-size: 3rem; }
.word-side-header { padding: 0 0 1rem; border-bottom: 0; }
.word-side-header h2 { margin: 1.6rem 0 .45rem; font-size: 2.3rem; }
.word-side-close { background: transparent; }
.word-chip-row span { border-color: var(--product-soft-line); border-radius: 1.2rem; background: #fff; }
.word-meaning-block { margin: 0 0 1rem; padding: 1rem; border: 0; border-radius: .45rem; background: #fff; }
.word-meaning-block strong { font-size: 1.35rem; }
.word-facts { margin: 0; }
.word-facts > div { grid-template-columns: minmax(5.5rem, .85fr) 1.15fr; border-bottom-color: var(--product-soft-line); }
.word-facts dd { text-align: right; }
.word-subsection { padding: .65rem 0 1rem; }
.word-subsection-title { border-top-color: var(--product-soft-line); font-family: inherit; }
.form-card-grid, .form-card-grid.two { border-color: var(--product-soft-line); }
.form-card-grid > div, .indeclinable-card { border-color: var(--product-soft-line); border-radius: 0; }
.word-side-actions { bottom: -1.25rem; margin: 0 -1.25rem -1.25rem; padding: .8rem 1.25rem 1.25rem; border-top-color: var(--product-soft-line); background: var(--product-soft); }
.word-side-actions .word-save-btn { border-color: var(--product-accent); background: var(--product-accent); }
.grammar-card { padding: 1.5rem; }
.example-list code { border-radius: .35rem; background: var(--product-soft); }
.question-list { gap: .9rem; }
.question-card { padding: clamp(1.1rem, 2vw, 1.6rem); }
.option { border-color: var(--product-soft-line); border-radius: var(--product-radius); background: #fff; }
.option:hover, .option.selected { border-color: var(--product-accent); background: rgba(49,87,213,.06); }
.output-stage-card, .output-rubric-item { border-color: var(--product-soft-line); border-radius: var(--product-radius); }
.lesson-step-navigation { margin-top: 1.2rem; padding: .9rem 0 0; border: 0; border-top: 1px solid var(--product-soft-line); border-radius: 0; background: #fff; }

/* Review */
.review-page-title h1 { max-width: 9ch; font-size: clamp(3.1rem, 5.2vw, 5.6rem); line-height: 1; }
.review-stats { grid-template-columns: repeat(4, 1fr); margin-bottom: 1.8rem; border-block-color: var(--product-soft-line); }
.review-stats .stat-card { min-height: 7rem; padding: 1.2rem 1.35rem; border-right-color: var(--product-soft-line); }
.review-stats .stat-card b { font-size: 2.8rem; font-weight: 840; }
.review-stats .stat-card span { color: var(--product-muted); }
.review-session { min-height: 27rem; margin-right: min(22rem, 25vw); padding: clamp(1.5rem, 3vw, 2.4rem); border-color: var(--product-soft-line); }
.review-session-head { border-bottom-color: var(--product-soft-line); }
.review-recall-card { min-height: 18rem; padding: 2rem 0 0; border: 0; }
.review-recall-card h3 { max-width: 20ch; font-size: clamp(2rem, 4vw, 3.8rem); line-height: 1.08; letter-spacing: -.05em; }
.review-answer { border-color: var(--product-soft-line); border-radius: var(--product-radius); background: var(--product-soft); }
.review-ratings { gap: .5rem; }
.review-ratings button { border-color: var(--product-soft-line); border-radius: var(--product-radius); }
.upcoming-reviews { margin-top: 1.2rem; border-color: var(--product-soft-line); }

/* Progress */
.progress-editorial { min-height: 25rem; grid-template-columns: minmax(0, 1fr) minmax(25rem, .85fr); gap: 3rem; margin-bottom: 1.8rem; border-bottom-color: var(--product-soft-line); }
.progress-editorial .page-title { display: block; align-self: center; padding: 0; border: 0; }
.progress-editorial .page-title h1 { max-width: 11ch; margin: .85rem 0 1.2rem; font-size: clamp(3.3rem, 5.3vw, 5.5rem); line-height: 1; }
.progress-editorial .page-title p { margin: 0; }
.progress-editorial picture { min-height: 24rem; border-radius: var(--product-radius); clip-path: none; }
.progress-editorial-caption { right: 1rem; bottom: 1rem; padding: .65rem .8rem; border: 0; border-radius: .4rem; background: #fff; color: var(--product-ink); box-shadow: var(--product-shadow); }
.analytics-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 1.5rem; border-block: 1px solid var(--product-soft-line); }
.analytics-kpis article { min-height: 7.4rem; padding: 1.15rem 1.25rem; border-right: 1px solid var(--product-soft-line); }
.analytics-kpis article:last-child { border-right: 0; }
.analytics-kpis article b { font-size: 2.65rem; }
.analytics-kpis article span, .analytics-kpis article small { display: block; color: var(--product-muted); }
.analytics-grid { grid-template-columns: 1.2fr .8fr; gap: 1rem; border: 0; }
.analytics-grid .panel, .weak-analysis { padding: 1.35rem; border-color: var(--product-soft-line); }
.metric-row div, .metric-row i { border-radius: 1rem; }
.metric-row i { background: var(--product-accent); transform-origin: left center; }
.weak-tag-grid article, .personal-route article { border-color: var(--product-soft-line); border-radius: var(--product-radius); }

.toast {
  transition: transform .14s var(--motion-out), opacity .14s var(--motion-out);
}
.toast.show {
  transition-duration: .18s;
}

@media (hover: hover) and (pointer: fine) {
  .primary-btn:hover, .check-btn:hover, .secondary-btn:hover, .danger-btn:hover { transform: translateY(-1px); }
  .today-action-arrow:hover b { transform: translateX(.25rem); }
  .today-route-rail button:hover b, .vocab-card:hover .vocab-open { transform: translateX(.2rem); }
}

@media (max-width: 1180px) {
  .today-primary-grid { grid-template-columns: minmax(21rem, .75fr) minmax(28rem, 1.25fr); }
  .today-overview, .editorial-carousel-stage { min-height: 34rem; }
  .today-intro h1 { margin-top: 2.8rem; font-size: clamp(3.6rem, 6.8vw, 5.5rem); }
  .level-tabs { margin-left: 0; justify-content: flex-start; overflow-x: auto; }
  .module-card { grid-template-columns: 4rem minmax(17rem, 1fr) 10rem minmax(9rem, 14rem) 2.5rem; }
  .lesson-layout { grid-template-columns: minmax(0, 1fr); }
  #app:has(.lesson-head) .lesson-head,
  #app:has(.lesson-head) .lesson-completion,
  #app:has(.lesson-head) .lesson-tabs { margin-right: 0; }
  .word-inspector.is-empty { display: none; }
  .word-inspector.has-word { position: fixed; inset: 4.75rem 0 0; z-index: 80; width: auto; max-height: none; pointer-events: none; }
  .word-inspector.has-word .word-inspector-scrim { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; background: rgba(21,22,24,.18); pointer-events: auto; }
  .word-inspector.has-word .word-side { position: absolute; inset: 0 0 0 auto; width: min(25rem, 52vw); max-height: none; height: 100%; border-radius: .75rem 0 0 .75rem; pointer-events: auto; }
  .review-session { margin-right: 0; }
  .analytics-kpis { grid-template-columns: repeat(3, 1fr); }
  .analytics-kpis article:nth-child(3) { border-right: 0; }
  .analytics-kpis article:nth-child(-n+3) { border-bottom: 1px solid var(--product-soft-line); }
}

@media (max-width: 820px) {
  .sidebar { gap: 2.5rem; padding-inline: 1.25rem; }
  .nav-list { gap: 1.2rem; }
  .sidebar-foot { display: none; }
  .view { padding: 1.5rem 1.25rem 3rem; }
  .page-title { grid-template-columns: 1fr; gap: 1rem; }
  .page-title p { justify-self: start; }
  .onboarding-layout { min-height: 0; grid-template-columns: 1fr; gap: 1.75rem; }
  .onboarding-copy { order: 2; }
  .onboarding-media { order: 1; height: 24rem; }
  .today-primary-grid { grid-template-columns: 1fr; }
  .today-overview { min-height: 31rem; }
  .today-intro h1 { margin-top: 3rem; }
  .editorial-carousel-stage { min-height: 31rem; }
  .module-card { grid-template-columns: 3.5rem minmax(15rem, 1fr) 9rem 10rem 2.5rem; gap: 0 .8rem; }
  .module-card p { font-size: .78rem; }
  .lesson-head { grid-template-columns: 1fr; }
  .lesson-head-tools { justify-content: flex-start; }
  .lesson-tabs { overflow-x: auto; grid-template-columns: repeat(6, minmax(9rem, 1fr)); }
  .review-stats { grid-template-columns: repeat(2, 1fr); }
  .review-stats .stat-card:nth-child(2) { border-right: 0; }
  .review-stats .stat-card:nth-child(-n+2) { border-bottom: 1px solid var(--product-soft-line); }
  .progress-editorial { grid-template-columns: 1fr; gap: 1.5rem; }
  .progress-editorial picture { min-height: 20rem; }
  .analytics-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  body { padding-top: 3.85rem; }
  .sidebar { position: fixed; inset: auto 0 0; z-index: 70; height: calc(4.6rem + env(safe-area-inset-bottom)); padding: 0 .5rem env(safe-area-inset-bottom); display: block; border-top: 1px solid var(--product-soft-line); border-bottom: 0; backdrop-filter: blur(16px); }
  .brand { position: fixed; z-index: 72; left: 1rem; right: auto; top: 0; width: auto; height: 3.85rem; margin: 0; transform: none; }
  .brand b { font-size: 1.8rem; }
  .brand small { display: none; }
  .nav-list { width: 100%; height: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
  .nav-list a { min-width: 0; padding: .45rem .15rem .35rem; flex-direction: column; justify-content: center; gap: .15rem; font-size: .72rem; }
  .nav-list a svg { display: block; width: 1.15rem; height: 1.15rem; }
  .nav-list a::after { left: 28%; right: 28%; top: 0; bottom: auto; }
  .sidebar-foot { display: none; }
  .main::before { content: ""; position: fixed; z-index: 68; left: 0; right: 0; top: 0; height: 3.85rem; background: rgba(255,255,255,.97); border-bottom: 1px solid var(--product-soft-line); backdrop-filter: blur(14px); }
  .topbar { position: fixed; z-index: 71; top: 0; left: 0; right: 0; width: 100%; height: 3.85rem; padding: 0 1rem; display: flex; align-items: center; justify-content: space-between; background: transparent; border: 0; transform: none; }
  .topbar .menu-btn, .topbar .top-actions { display: none; }
  .topbar .crumb { color: var(--product-muted); font-size: .75rem; font-weight: 750; }
  .view { min-height: 0; padding: 1rem 1rem calc(5.6rem + env(safe-area-inset-bottom)); }
  .page-title { margin-bottom: 1.2rem; padding-bottom: 1.2rem; }
  .page-title h1, .module-detail-head h1, .lesson-head h1 { font-size: clamp(2.7rem, 13vw, 4rem); line-height: 1.02; letter-spacing: -.045em; }
  .onboarding-layout { display: flex; gap: 1.4rem; }
  .onboarding-media { width: 100%; height: 18rem; min-height: 0; max-height: none; border-radius: var(--product-radius); }
  .onboarding-copy h1 { font-size: clamp(3rem, 14vw, 4.4rem); line-height: 1.02; }
  .today-dashboard { gap: 1rem; }
  .today-primary-grid { display: block; }
  .today-overview { min-height: 0; }
  .today-meta-row { padding-bottom: .75rem; }
  .today-intro h1 { margin: 3rem 0 .9rem; font-size: clamp(3.55rem, 17vw, 5rem); }
  .today-intro p { margin-bottom: 1.2rem; }
  .today-action-board { grid-template-columns: 6.9rem minmax(0, 1fr); }
  .today-action-board > * { padding: .85rem .75rem .85rem 0; }
  .today-action-board .today-next-lesson { padding-left: .85rem; }
  .today-review-count strong { font-size: 3rem; }
  .today-next-lesson h2 { font-size: 1.25rem; }
  .today-action-arrow { min-height: 3.65rem; margin-top: .7rem; padding: .75rem 1rem; }
  .editorial-carousel { margin-top: 1.25rem; }
  .editorial-carousel-stage { min-height: 23rem; grid-template-columns: minmax(0,1fr) 3.25rem; padding-bottom: 2.7rem; }
  .editorial-slide figcaption { max-width: calc(100% - 1.2rem); left: .6rem; bottom: .6rem; }
  .editorial-slide figcaption b { font-size: .8rem; }
  .editorial-carousel-controls { margin-top: -2.55rem; }
  .editorial-carousel-controls > button span, .editorial-carousel-dots { display: none; }
  .today-route-rail { grid-template-columns: 1fr 1fr; }
  .today-route-rail > * { padding: .7rem; }
  .today-route-rail p:nth-child(2) { border-right: 0; }
  .today-route-rail button { grid-column: 1 / -1; min-height: 3.25rem; border-top: 1px solid var(--product-soft-line); }
  .course-search { width: 100%; }
  .level-tabs { margin: 1rem 0; justify-content: flex-start; }
  .level-tab { flex: 0 0 auto; min-height: 2.5rem; padding: .45rem .75rem; }
  .catalog-count { text-align: left; }
  .module-card { min-height: 6.5rem; grid-template-columns: 3.2rem minmax(0,1fr) 2.3rem; grid-template-rows: auto auto; gap: 0 .65rem; }
  .module-card::before { grid-column: 1; font-size: 1.8rem; }
  .module-card::after { grid-column: 3; }
  .module-card .module-top, .module-card h3 { grid-column: 2; }
  .module-card h3 { font-size: 1.15rem; }
  .module-card p, .module-card .bar { display: none; }
  .lesson-head { display: block; padding-bottom: 1.1rem; }
  .lesson-title-copy > p { font-size: .82rem; }
  .lesson-head-tools { margin-top: .9rem; }
  .lesson-head-tools .secondary-btn { display: none; }
  .lesson-objectives-disclosure { display: none; }
  .lesson-completion { order: initial; grid-template-columns: minmax(0,1fr) auto; margin: .8rem 0; }
  .lesson-tabs { position: sticky; top: 3.85rem; margin: 0 -1rem; border-radius: 0; border-inline: 0; grid-template-columns: repeat(6, minmax(6.4rem, 1fr)); scrollbar-width: none; }
  .lesson-tabs::-webkit-scrollbar { display: none; }
  .lesson-tabs button { min-height: 3.65rem; padding: .45rem .55rem; font-size: .72rem; }
  #lessonContent { padding-top: 1rem; }
  .reading-card, .vocab-section { padding: 1rem; }
  .vocab-grid { grid-template-columns: 1fr; }
  .vocab-card, .vocab-card:nth-child(even) { border-right: 0; }
  .word-inspector.has-word { inset: 3.85rem 0 calc(4.6rem + env(safe-area-inset-bottom)); }
  .word-inspector.has-word .word-side { inset: auto 0 0; width: 100%; height: min(62vh, 34rem); padding: 1rem; border-radius: 1rem 1rem 0 0; animation: none; }
  .word-inspector.has-word .word-side::before { content: ""; display: block; width: 3rem; height: .25rem; margin: -.35rem auto .55rem; border-radius: 1rem; background: #b7bbc1; }
  .word-side-actions { margin-inline: -1rem; margin-bottom: -1rem; }
  .lesson-step-navigation { position: sticky; bottom: calc(4.6rem + env(safe-area-inset-bottom)); margin-inline: -1rem; padding: .7rem 1rem; background: rgba(255,255,255,.96); backdrop-filter: blur(12px); }
  .review-stats { grid-template-columns: 1fr 1fr; }
  .review-stats .stat-card { min-height: 6rem; padding: 1rem; }
  .review-stats .stat-card b { font-size: 2.25rem; }
  .review-recall-card h3 { font-size: clamp(2rem, 10vw, 3rem); }
  .review-ratings { grid-template-columns: 1fr 1fr; }
  .progress-editorial { display: flex; flex-direction: column-reverse; }
  .progress-editorial picture { min-height: 15rem; max-height: 32vh; }
  .progress-editorial .page-title { padding-top: .9rem; }
  .progress-editorial-caption { top: 1rem; bottom: auto; }
  .analytics-kpis { grid-template-columns: 1fr 1fr; }
  .analytics-kpis article { border-bottom: 1px solid var(--product-soft-line); }
  .analytics-kpis article:nth-child(2n) { border-right: 0; }
}

@media (max-width: 390px) {
  .today-intro h1 { font-size: 3.45rem; }
  .today-meta-row b { max-width: 8rem; text-align: right; }
  .today-action-board { grid-template-columns: 6.5rem minmax(0, 1fr); }
  .editorial-carousel-stage { min-height: 21.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  button:active:not(:disabled),
  .primary-btn:active:not(:disabled), .check-btn:active:not(:disabled),
  .secondary-btn:active:not(:disabled), .danger-btn:active:not(:disabled),
  .ghost-btn:active:not(:disabled) { transform: none; opacity: .82; }
  .editorial-slide, .today-action-arrow b, .module-card, .course-level-group > summary i { transition: none; }
}

/* v24.1 typography pass — bilingual hierarchy and wide-screen rhythm */
:root {
  --font-ui: "Noto Sans SC", "HarmonyOS Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  --font-display: "Noto Sans SC", "HarmonyOS Sans SC", "Microsoft YaHei UI", "PingFang SC", system-ui, sans-serif;
  --font-reading: Georgia, "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --layout-max: 120rem;
}

html { font-size: 16px; }
body {
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.7;
  letter-spacing: 0;
  font-synthesis: none;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}
button, input, textarea, select { font-family: var(--font-ui); font-size: .9375rem; line-height: 1.45; letter-spacing: 0; }
.view { width: min(100%, var(--layout-max)); max-width: var(--layout-max); }

.brand b { font-family: Arial, sans-serif; font-size: 1.85rem; font-weight: 800; letter-spacing: -.045em; }
.brand small { font-size: .9375rem; font-weight: 600; letter-spacing: 0; }
.nav-list a { font-size: .9375rem; font-weight: 650; letter-spacing: 0; }
.mini-progress, .today-review-count strong, .lesson-progress-count, .review-stats, .analytics-kpis, .module-card::before { font-variant-numeric: tabular-nums; }

.page-kicker, .eyebrow, .technical-label, .level-badge, .grammar-kind {
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .045em;
}
.page-title h1, .module-detail-head h1, .lesson-head h1,
.today-intro h1, .onboarding-copy h1, .review-recall-card h3,
.reading-card-heading h2, .vocab-section-head h2 {
  font-family: var(--font-display);
  font-weight: 750;
  letter-spacing: -.022em;
  text-wrap: balance;
}
.page-title h1, .module-detail-head h1, .lesson-head h1 {
  max-width: 10em;
  font-size: clamp(3.35rem, 4.8vw, 4.9rem);
  line-height: 1.08;
}
.page-title p, .lesson-title-copy > p, .today-intro p, .onboarding-copy > p {
  font-size: 1rem;
  line-height: 1.75;
  letter-spacing: 0;
}
.course-page-title h1 { max-width: 8.5em; font-size: clamp(3.25rem, 4.35vw, 4.5rem); line-height: 1.08; }
.review-page-title h1 { max-width: 7.5em; font-size: clamp(3.25rem, 4.35vw, 4.5rem); line-height: 1.08; }
.progress-editorial .page-title h1 { max-width: 9em; font-size: clamp(3.25rem, 4.35vw, 4.5rem); line-height: 1.08; }
.onboarding-copy h1 { max-width: 9em; font-size: clamp(3.15rem, 3.65vw, 4rem); line-height: 1.1; }
.today-intro h1 { max-width: 7em; font-size: clamp(3.75rem, 5.2vw, 5.35rem); line-height: 1.06; }
.lesson-head h1 { max-width: 12em; font-size: clamp(3.2rem, 4.4vw, 4.4rem); line-height: 1.08; }

.section-head h2, .module-card h3, .today-next-lesson h2,
.review-session h2, .analytics-grid h2, .word-side-header h2 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.015em;
}
.module-card h3 { font-size: 1.35rem; line-height: 1.35; }
.module-card p, .catalog-count, .today-meta-row, .local-note { font-size: .8125rem; line-height: 1.6; }
.today-next-lesson h2 { font-size: clamp(1.35rem, 1.75vw, 1.75rem); line-height: 1.22; }
.today-review-count strong { font-weight: 750; letter-spacing: -.03em; }
.primary-btn, .check-btn, .secondary-btn, .danger-btn, .ghost-btn,
.today-action-arrow, .level-tab, .lesson-tabs button { font-weight: 650; }

.reading-card-heading h2, .sentence-spanish, .word-examples p b,
.review-answer p[lang="es"], .long-reading .spanish-text {
  font-family: var(--font-reading);
}
.reading-card-heading h2 { font-size: clamp(2rem, 2.6vw, 2.65rem); line-height: 1.22; letter-spacing: -.02em; }
.sentence-spanish { font-size: clamp(1.15rem, 1.45vw, 1.35rem); line-height: 1.65; letter-spacing: -.008em; }
.sentence-chinese { font-family: var(--font-ui); font-size: .9375rem; line-height: 1.7; letter-spacing: 0; }
.word-side { font-size: .9375rem; line-height: 1.65; }
.word-side-header h2 { font-size: 2.15rem; line-height: 1.15; }
.word-meaning-block strong { font-size: 1.3rem; line-height: 1.35; }
.review-recall-card h3 { max-width: 14em; font-size: clamp(2rem, 3.5vw, 3.3rem); line-height: 1.18; }
.review-stats .stat-card b, .analytics-kpis article b { font-weight: 720; letter-spacing: -.03em; }
.progress-editorial .page-title { align-self: start; padding-top: clamp(3.5rem, 8vh, 6rem); }

.word-inspector { right: max(clamp(1.25rem, 4vw, 4.25rem), calc((100vw - var(--layout-max)) / 2 + 4.25rem)); }

@media (max-width: 760px) {
  body { font-size: .96875rem; line-height: 1.72; }
  .page-title h1, .module-detail-head h1, .lesson-head h1 { max-width: none; font-size: clamp(2.65rem, 12vw, 3.45rem); line-height: 1.08; letter-spacing: -.018em; }
  .course-page-title h1, .review-page-title h1 { font-size: clamp(2.75rem, 12.5vw, 3.35rem); line-height: 1.08; }
  .today-intro h1 { max-width: none; margin-top: 2.75rem; font-size: clamp(3.2rem, 14.5vw, 3.75rem); line-height: 1.05; letter-spacing: -.025em; }
  .onboarding-copy h1 { max-width: none; font-size: clamp(2.8rem, 12.5vw, 3.35rem); line-height: 1.08; }
  .progress-editorial .page-title h1 { max-width: none; font-size: clamp(2.7rem, 11.5vw, 3.25rem); line-height: 1.1; }
  .progress-editorial .page-title { padding-top: .75rem; }
  .lesson-head h1 { font-size: clamp(2.6rem, 11.5vw, 3.2rem); line-height: 1.08; }
  .page-title p, .lesson-title-copy > p, .today-intro p, .onboarding-copy > p { font-size: .9375rem; line-height: 1.72; }
  .module-card h3 { font-size: 1.125rem; line-height: 1.4; }
  .lesson-tabs button { font-size: .75rem; line-height: 1.35; }
  .reading-card-heading h2 { font-size: 2rem; }
  .sentence-spanish { font-size: 1.125rem; line-height: 1.7; }
}

/* Unified layout: one hierarchy, one accent, one radius scale. */
.nav-list a::after,
.editorial-carousel-progress span::before { background: var(--product-accent); }

.page-title { align-items: start; margin-bottom: 1.5rem; padding-bottom: 1.5rem; }
.page-title h1,
.module-detail-head h1,
.lesson-head h1 { font-size: clamp(2.75rem, 4vw, 4rem); line-height: 1.06; }
.course-page-title h1,
.review-page-title h1,
.progress-editorial .page-title h1 { font-size: clamp(2.8rem, 3.8vw, 3.9rem); }
.today-intro h1 { font-size: clamp(3.5rem, 4.8vw, 4.8rem); }

.today-action-board {
  border: 1px solid var(--product-soft-line);
  border-radius: var(--product-radius);
  overflow: hidden;
}
.today-action-board > * { padding: 1rem; }
.today-action-board .today-next-lesson { padding-left: 1rem; }
.today-action-arrow { margin: 0; border-top: 1px solid var(--product-soft-line); border-radius: 0; }
.today-review-count strong { font-size: 3.25rem; }
.today-overview,
.editorial-carousel-stage { min-height: clamp(31rem, 60vh, 38rem); }

.course-level-groups { border-top: 1px solid var(--product-ink); }
.course-level-group { border-bottom: 1px solid var(--product-soft-line); }
.course-level-group > summary {
  min-height: 5rem;
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr) auto 2rem;
  align-items: center;
  gap: 1rem;
  padding: .8rem .75rem;
  cursor: pointer;
  list-style: none;
}
.course-level-group > summary::-webkit-details-marker { display: none; }
.course-level-group > summary:hover { background: var(--product-soft); }
.course-level-group > summary span { color: var(--product-accent); font-size: 2rem; font-weight: 800; letter-spacing: -.04em; }
.course-level-group > summary b { font-size: 1rem; }
.course-level-group > summary small { color: var(--product-muted); }
.course-level-group > summary i { font-size: 1.5rem; font-style: normal; text-align: center; transition: transform .2s ease; }
.course-level-group[open] > summary i { transform: rotate(45deg); }
.course-level-group .module-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--product-soft-line); }
.course-level-group .module-card {
  min-height: 7.25rem;
  grid-template-columns: 3.5rem minmax(0, 1fr) 2rem;
  grid-template-rows: auto auto;
  padding: 1rem;
  border-right: 1px solid var(--product-soft-line);
}
.course-level-group .module-card:nth-child(2n) { border-right: 0; }
.course-level-group .module-card::before { grid-column: 1; font-size: 1.8rem; }
.course-level-group .module-card::after { grid-column: 3; }
.course-level-group .module-card .module-top,
.course-level-group .module-card h3 { grid-column: 2; }
.course-level-group .module-card h3 { font-size: 1.2rem; }
.course-level-group .module-card p,
.course-level-group .module-card .bar { display: none; }

.module-assessment-callout {
  margin-bottom: 1rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--product-soft-line);
  border-radius: var(--product-radius);
  background: var(--product-soft);
  color: var(--product-ink);
}
.module-detail-head {
  margin: 0 0 1rem;
  padding: .75rem 0 1.5rem;
  border: 0;
  border-bottom: 1px solid var(--product-soft-line);
  border-radius: 0;
  background: none;
  color: var(--product-ink);
}
.module-detail-head h1 { margin: .5rem 0; }
.module-detail-head p { margin: 0; }
.lesson-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-top: 1.25rem; }
.lesson-chip,
.lesson-chip:last-child { min-height: 4.75rem; padding: .8rem; border: 1px solid var(--product-soft-line); border-radius: var(--product-radius); }
.lesson-chip:hover { border-color: var(--product-accent); background: rgba(49,87,213,.06); }
.source-layout { grid-template-columns: minmax(0, 1fr) 17rem; gap: 1rem; }
.source-layout > .panel { border-color: var(--product-soft-line); }

.lesson-head { gap: 1.25rem; padding-bottom: 1rem; }
.lesson-head h1 { margin: .35rem 0 .2rem; font-size: clamp(2.5rem, 3.4vw, 3.45rem); }
.lesson-title-copy > p { font-size: .9rem; }
.lesson-head-tools { gap: .6rem; }
.lesson-progress-count b { font-size: 1.75rem; }
.lesson-completion { min-height: 3rem; margin: .7rem 0; }
.lesson-tabs button { min-height: 3.35rem; }
#lessonContent { padding-top: .85rem; }
.question-card .options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.option { min-height: 3rem; }
.audio-unavailable { color: #555d68; }

.review-page-title { margin-bottom: 1rem; }
.review-session { width: min(100%, 68rem); min-height: 0; margin: 0 0 1rem; padding: clamp(1.25rem, 2vw, 1.8rem); }
.review-recall-card { min-height: 12rem; padding-top: 1.25rem; }
.review-recall-card h3 { font-size: clamp(1.8rem, 3vw, 2.8rem); }
.review-stats { width: min(100%, 68rem); margin: 0 0 1rem; }
.review-stats .stat-card { min-height: 5.5rem; padding: .9rem 1rem; }
.review-stats .stat-card b { font-size: 2.1rem; }

.progress-editorial { min-height: 0; grid-template-columns: minmax(0, 1.2fr) minmax(20rem, .8fr); gap: 2rem; margin-bottom: 1.25rem; padding-bottom: 1.25rem; }
.progress-editorial .page-title { align-self: center; padding: 0; }
.progress-editorial .page-title h1 { margin: .55rem 0 .85rem; }
.progress-editorial picture { min-height: 17rem; height: 20rem; }
.analytics-kpis { margin-bottom: 1.25rem; }
.analytics-kpis article { min-height: 6rem; padding: .9rem 1rem; }
.analytics-kpis article b { font-size: 2.15rem; }

@media (min-width: 761px) and (max-width: 1180px) {
  #app:has(.lesson-head) .lesson-head,
  #app:has(.lesson-head) .lesson-completion,
  #app:has(.lesson-head) .lesson-tabs { margin-right: 21rem; }
  .lesson-layout { grid-template-columns: minmax(0, 1fr) 20rem; }
  .word-inspector.is-empty { display: block; }
  .word-inspector.has-word { inset: 6rem 1.25rem auto auto; width: 20rem; max-height: calc(100vh - 7rem); pointer-events: auto; }
  .word-inspector.has-word .word-inspector-scrim { display: none; }
  .word-inspector.has-word .word-side { position: static; width: 100%; height: auto; max-height: calc(100vh - 7rem); border-radius: var(--product-radius); animation: none; }
}

@media (max-width: 820px) {
  .course-level-group .module-grid { grid-template-columns: 1fr; }
  .course-level-group .module-card,
  .course-level-group .module-card:nth-child(2n) { border-right: 0; }
  .lesson-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .progress-editorial { grid-template-columns: 1fr; }
  .progress-editorial picture { height: 17rem; min-height: 0; }
}

@media (max-width: 760px) {
  .page-title h1,
  .module-detail-head h1,
  .lesson-head h1,
  .course-page-title h1,
  .review-page-title h1,
  .progress-editorial .page-title h1 { font-size: clamp(2.25rem, 10vw, 2.9rem); }
  .today-intro h1 { margin-top: 2rem; font-size: clamp(2.9rem, 13vw, 3.35rem); }
  .today-action-board > * { padding: .8rem; }
  .today-action-board .today-next-lesson { padding-left: .8rem; }
  .course-level-group > summary { min-height: 4.25rem; grid-template-columns: 4.5rem 1fr 1.5rem; gap: .6rem; padding-inline: .45rem; }
  .course-level-group > summary span { font-size: 1.5rem; }
  .course-level-group > summary small { display: none; }
  .course-level-group .module-card { min-height: 5.8rem; }
  .module-assessment-callout { align-items: stretch; flex-direction: column; }
  .lesson-strip { grid-template-columns: 1fr; }
  .lesson-chip,
  .lesson-chip:last-child { min-height: 4.25rem; }
  .question-card .options { grid-template-columns: 1fr; }
  .review-recall-card { min-height: 10rem; }
  .review-stats .stat-card { min-height: 5rem; }
  .progress-editorial { display: grid; }
  .progress-editorial .page-title { order: 1; padding-top: 0; }
  .progress-editorial picture { order: 2; max-height: none; }
  .progress-editorial-caption { top: auto; bottom: 1rem; }
}