/*
 * Mobile-only layout layer.
 *
 * Desktop keeps the existing compact presentation untouched. Phone viewports
 * use their real CSS pixel width, readable type and touch-sized controls.
 */
@media (max-width: 760px),
  (max-width: 940px) and (max-height: 540px) and (hover: none) and (pointer: coarse) {
  :root[data-display-scale="compact"],
  :root[data-display-scale="standard"] {
    zoom: 100%;
  }

  html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    font-size: 100%;
    scrollbar-gutter: auto;
    scroll-padding-top: 156px;
  }

  body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
    font-size: 16px;
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  #app,
  main,
  section,
  article,
  aside,
  header,
  footer,
  nav,
  form,
  fieldset {
    min-width: 0;
  }

  img,
  video,
  canvas,
  svg {
    max-width: 100%;
  }

  .shell,
  body[data-page] .shell,
  body[data-page="book-preview"] .shell,
  body[data-page="daily-reading"] .shell,
  body[data-page="quick-memory"] main.knowledge-page.shell {
    width: calc(100% - 20px);
    max-width: none;
    margin-inline: auto;
  }

  .card {
    padding: 18px;
    border-radius: 18px;
  }

  input,
  select,
  textarea {
    min-height: 48px;
    font-size: 16px;
  }

  .button,
  .button-link,
  button {
    min-height: 44px;
    font-size: 16px;
  }

  /* Shared phone navigation: search remains available and every route is a
     full-size target. The two-row grid avoids horizontal page scrolling. */
  :is(body > .topbar, body > #app > .topbar) {
    position: sticky !important;
    inset: auto;
    top: 0;
  }

  :is(body > .topbar, body > #app > .topbar) + main {
    margin-top: 0;
  }

  body[data-page] .topbar .nav,
  body[data-page^="admin-"] .topbar .nav {
    width: calc(100% - 20px);
    min-height: 0;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 8px;
    padding: 8px 0;
    zoom: 100%;
  }

  :is(body > .topbar, body > #app > .topbar) .brand {
    grid-column: 1;
    width: 44px;
    min-width: 44px;
    justify-self: start;
  }

  :is(body > .topbar, body > #app > .topbar) .brand-logo {
    width: 44px;
    height: 44px;
  }

  :is(body > .topbar, body > #app > .topbar) .brand-name {
    display: none;
  }

  .global-word-search {
    grid-column: 2;
    width: 100%;
    justify-self: stretch;
  }

  .global-word-search-field {
    height: 44px;
    border-radius: 14px;
  }

  .global-word-search input {
    min-height: 42px;
    padding-left: 12px;
    font-size: 16px;
  }

  .global-word-search button[type="submit"] {
    width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;
    font-size: 0;
  }

  .global-word-search button[type="submit"]::before {
    content: "→";
    font-size: 18px;
  }

  :is(body > .topbar, body > #app > .topbar) .nav-links {
    grid-column: 1 / -1;
    width: 100%;
    max-width: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
    overflow: visible;
    padding: 5px;
    border-radius: 16px;
  }

  :is(body > .topbar, body > #app > .topbar) .nav-links a,
  :is(body > .topbar, body > #app > .topbar) .feedback-launcher {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 8px 5px;
    overflow: hidden;
    border-radius: 11px;
    font-size: 15px;
    line-height: 1.2;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  :is(body > .topbar, body > #app > .topbar) #accountNav {
    width: 100%;
    max-width: none;
  }

  :is(body > .topbar, body > #app > .topbar) .feedback-launcher {
    gap: 4px;
    box-shadow: none;
  }

  .feedback-launcher > span:first-child {
    width: 18px;
    height: 18px;
    flex: none;
  }

  .global-word-search-panel {
    position: fixed;
    inset: 68px 10px auto;
    width: auto;
    max-height: calc(100dvh - 78px);
    padding: 18px 16px;
    border-radius: 18px;
    font-size: 16px;
  }

  .global-word-search-close,
  .personal-wordbook-star,
  .icon-btn,
  .sound-button {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  .footer {
    width: calc(100% - 28px);
    padding: 30px 0 max(24px, env(safe-area-inset-bottom));
    font-size: 14px;
  }

  .feedback-dialog {
    width: calc(100% - 20px);
    max-height: calc(100dvh - 20px);
    border-radius: 20px;
  }

  .feedback-form,
  .feedback-thanks {
    padding: 20px 16px;
  }

  .feedback-dialog-head h2,
  .feedback-thanks h2 {
    font-size: 25px;
  }

  .feedback-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  /* Shared editorial hero. */
  body[data-page] .inspiration-hero,
  body[data-page="daily-reading"] .daily-reading-hero.inspiration-hero {
    min-height: 0;
    display: block;
    margin: 18px 0 24px;
    padding: 26px 18px 24px;
  }

  body[data-page] .inspiration-hero::before {
    top: 30px;
    right: 6px;
    font-size: 104px;
    opacity: .48;
  }

  body[data-page] .inspiration-hero__copy {
    width: 100%;
  }

  body[data-page] .inspiration-hero__meta {
    gap: 8px;
    padding-right: 58px;
  }

  body[data-page] .inspiration-hero .eyebrow {
    font-size: 12px;
  }

  body[data-page] .inspiration-hero__index {
    padding-left: 8px;
    font-size: 9px;
  }

  body[data-page] .inspiration-hero h1,
  body[data-page="daily-reading"] .daily-reading-hero h1 {
    max-width: 100%;
    margin: 26px 0 14px;
    font-size: clamp(38px, 11vw, 46px);
    line-height: 1.14;
  }

  body[data-page] .inspiration-hero p,
  body[data-page="daily-reading"] .daily-reading-hero p {
    font-size: 16px;
    line-height: 1.72;
  }

  body[data-page] .inspiration-hero__signature {
    margin-top: 18px;
  }

  body[data-page] .inspiration-hero__signature small {
    font-size: 12px;
  }

  body[data-page] .inspiration-hero__seal {
    right: 10px;
    bottom: 14px;
    width: 38px;
    height: 38px;
    font-size: 20px;
  }

  body[data-page="daily-reading"] .inspiration-hero .reading-date-card {
    display: none;
  }

  /* Account and authentication. */
  body[data-page="account"] .account-main--guest {
    width: 100%;
    padding-top: 0;
  }

  body[data-page="account"] .account-auth-shell {
    min-height: 0;
    grid-template-columns: 1fr;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  body[data-page="account"] .auth-story {
    min-height: 250px;
  }

  body[data-page="account"] .auth-value-strip {
    display: none;
  }

  body[data-page="account"] .auth-access {
    margin-top: -20px;
    padding: 30px 18px max(30px, env(safe-area-inset-bottom));
    border-radius: 22px 22px 0 0;
  }

  body[data-page="account"] .auth-wordmark {
    margin-bottom: 10px;
    transform: none;
  }

  body[data-page="account"] .auth-wordmark > img {
    width: 56px;
    height: 50px;
  }

  body[data-page="account"] .auth-wordmark strong {
    font-size: 26px;
  }

  body[data-page="account"] .auth-wordmark small {
    font-size: 15px;
  }

  body[data-page="account"] .auth-heading h1 {
    font-size: 36px;
  }

  body[data-page="account"] .auth-heading p,
  body[data-page="account"] .account-profile-title > p,
  body[data-page="account"] .account-data-action > p {
    font-size: 20px;
  }

  body[data-page="account"] .auth-mode-switch {
    margin: 20px 0 18px;
  }

  body[data-page="account"] .auth-mode-switch button {
    min-height: 58px;
    font-size: 22px;
  }

  body[data-page="account"] .auth-field > input,
  body[data-page="account"] .auth-control input,
  body[data-page="account"] .auth-submit {
    min-height: 62px;
    font-size: 20px;
  }

  body[data-page="account"] .account-profile-card,
  body[data-page="account"] .account-status-card,
  body[data-page="account"] .star-coin-card,
  body[data-page="account"] .referral-card,
  body[data-page="account"] .account-memory-curve,
  body[data-page="account"] .account-data-card {
    padding: 16px 14px;
  }

  /* Book catalogue and planning. */
  body[data-page="books"] .library-catalog {
    gap: 18px;
    padding: 0 2px 22px;
  }

  body[data-page="books"] .library-catalog__intro h2 {
    font-size: 34px;
    line-height: 1.18;
  }

  body[data-page="books"] .library-catalog__intro p {
    font-size: 16px;
  }

  body[data-page="books"] .library-catalog__stats dt {
    font-size: 14px;
  }

  body[data-page="books"] .library-catalog__stats dd {
    font-size: 25px;
  }

  body[data-page="books"] .category-heading {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
    padding: 18px 15px 15px;
  }

  body[data-page="books"] .category-heading__number {
    width: 38px;
    height: 38px;
    font-size: 13px;
  }

  body[data-page="books"] .category-heading h2 {
    font-size: 29px;
  }

  body[data-page="books"] .category-heading p,
  body[data-page="books"] .category-count-badge {
    font-size: 13px;
  }

  body[data-page="books"] .category-count-badge {
    grid-column: 2;
    justify-self: start;
  }

  body[data-page="books"] .book-cards {
    padding: 12px;
  }

  body[data-page="books"] .book-card.book-card-simple {
    grid-template-columns: 58px minmax(0, 1fr) !important;
    gap: 12px;
    min-height: 106px;
    padding: 10px 12px 10px 10px;
  }

  body[data-page="books"] .book-card__spine {
    min-height: 84px;
  }

  body[data-page="books"] .book-card__spine span {
    font-size: 34px;
  }

  body[data-page="books"] .book-card.book-card-simple h3 {
    margin: 4px 0 8px;
    font-size: 20px;
  }

  body[data-page="books"] .book-word-count,
  body[data-page="books"] .book-card__action {
    font-size: 13px;
  }

  body[data-page="book-preview"] .book-preview-page {
    padding-top: 14px;
  }

  body[data-page="book-preview"] .book-preview-hero {
    gap: 18px;
    padding: 18px;
  }

  body[data-page="book-preview"] .book-preview-hero h1 {
    font-size: 38px;
  }

  body[data-page="book-preview"] .book-preview-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-page="book-preview"] .book-preview-primary-action {
    width: 100%;
  }

  body[data-page="book-preview"] .catalog-head,
  body[data-page="book-preview"] .catalog-controls {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  body[data-page="book-preview"] .catalog-controls input {
    min-width: 0;
  }

  body[data-page="book-preview"] .word-preview-row {
    grid-template-columns: 34px minmax(0, 1fr) 44px;
    gap: 10px;
    padding: 14px 4px;
  }

  body[data-page="book-preview"] .word-preview-word {
    align-items: flex-start;
    flex-direction: column;
  }

  /* Daily reading remains content-first on a single column. */
  body[data-page="daily-reading"] .daily-reading-main {
    padding-bottom: 32px;
  }

  body[data-page="daily-reading"] .reading-workspace,
  body[data-page="daily-reading"] .reading-aside,
  body[data-page="daily-reading"] .reading-vocabulary {
    grid-template-columns: 1fr;
  }

  body[data-page="daily-reading"] .reading-lead {
    grid-template-columns: 1fr;
    padding-bottom: 10px;
    border-radius: 16px;
  }

  body[data-page="daily-reading"] .reading-cover {
    grid-column: 1;
    grid-row: 1;
    height: auto;
  }

  body[data-page="daily-reading"] .reading-cover img {
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 10;
    object-fit: cover;
  }

  body[data-page="daily-reading"] .reading-header {
    grid-column: 1;
    grid-row: 2;
    width: calc(100% - 20px);
    margin: -38px 10px 0;
    padding: 20px 16px;
    border-radius: 3px 12px 12px 3px;
  }

  body[data-page="daily-reading"] .reading-title-en {
    font-size: 32px;
    line-height: 1.08;
  }

  body[data-page="daily-reading"] .reading-title-zh {
    font-size: 18px;
  }

  body[data-page="daily-reading"] .reading-dek {
    font-size: 16px;
  }

  body[data-page="daily-reading"] .reading-guide {
    grid-template-columns: 1fr;
  }

  body[data-page="daily-reading"] .reading-body,
  body[data-page="daily-reading"] .reading-learning-card {
    padding: 20px 16px;
    border-radius: 16px;
  }

  body[data-page="daily-reading"] .reading-body-heading,
  body[data-page="daily-reading"] .reading-body-heading-actions {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
  }

  body[data-page="daily-reading"] .reading-inline-translation,
  body[data-page="daily-reading"] .reading-paragraph-audio {
    min-height: 44px;
  }

  body[data-page="daily-reading"] .reading-paragraph {
    grid-template-columns: 1fr;
    gap: 8px;
    padding-left: 0;
  }

  body[data-page="daily-reading"] .reading-paragraph-en {
    max-width: none;
    font-size: 21px;
    line-height: 1.72;
  }

  body[data-page="daily-reading"] .reading-translation,
  body[data-page="daily-reading"] .reading-vocab-item p,
  body[data-page="daily-reading"] .reading-sentence p {
    font-size: 17px;
  }

  body[data-page="daily-reading"] .reading-sentence blockquote {
    font-size: 21px;
    line-height: 1.65;
  }

  body[data-page="daily-reading"] .reading-tools-card,
  body[data-page="daily-reading"] .reading-archive-card,
  body[data-page="daily-reading"] .reading-utility-card,
  body[data-page="daily-reading"] .reading-history-card {
    padding: 16px;
  }

  /* Quick memory. */
  body[data-page="quick-memory"] .knowledge-part-nav,
  body[data-page="quick-memory"] .knowledge-detail {
    padding: 16px;
    border-radius: 18px;
  }

  body[data-page="quick-memory"] .knowledge-part-nav-head {
    display: block;
  }

  body[data-page="quick-memory"] .knowledge-part-nav-head h2 {
    font-size: 31px;
  }

  body[data-page="quick-memory"] .knowledge-part-nav-head p {
    margin-top: 8px;
    font-size: 16px;
  }

  body[data-page="quick-memory"] .knowledge-part-grid,
  body[data-page="quick-memory"] .knowledge-lesson-tools {
    grid-template-columns: 1fr !important;
  }

  body[data-page="quick-memory"] .knowledge-part-button {
    min-height: 80px !important;
    padding: 12px !important;
  }

  body[data-page="quick-memory"] .knowledge-part-copy strong {
    font-size: 21px !important;
  }

  body[data-page="quick-memory"] .knowledge-part-copy small {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }

  body[data-page="quick-memory"] .knowledge-detail-head h2 {
    font-size: 38px !important;
  }

  body[data-page="quick-memory"] .knowledge-detail-head p {
    font-size: 17px !important;
    line-height: 1.65 !important;
  }

  body[data-page="quick-memory"] .knowledge-section-title {
    padding: 20px 0 12px;
  }

  body[data-page="quick-memory"] .knowledge-section-title h3 {
    font-size: 28px;
  }

  body[data-page="quick-memory"] .knowledge-tool-field > span,
  body[data-page="quick-memory"] .knowledge-lesson-tool-status {
    font-size: 14px;
  }

  body[data-page="quick-memory"] .knowledge-lesson-summary-copy strong {
    font-size: 21px;
  }

  body[data-page="quick-memory"] .knowledge-word-row {
    grid-template-columns: 1fr !important;
  }

  body[data-page="quick-memory"] .knowledge-word-meta {
    border-right: 0 !important;
    border-bottom: 1px solid var(--line) !important;
  }

  body[data-page="quick-memory"] .knowledge-word-meta h4 {
    font-size: 30px;
  }

  body[data-page="quick-memory"] .knowledge-audio-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-page="quick-memory"] .knowledge-audio-button {
    min-width: 0;
    min-height: 48px;
    padding: 8px;
  }

  body[data-page="quick-memory"] .knowledge-audio-ipa {
    overflow: hidden;
    font-size: 13px;
    text-overflow: ellipsis;
  }

  body[data-page="quick-memory"] .knowledge-book-line {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 10px;
  }

  body[data-page="quick-memory"] .knowledge-book-line p,
  body[data-page="quick-memory"] .knowledge-book-examples p,
  body[data-page="quick-memory"] .knowledge-book-examples small {
    font-size: 17px;
    line-height: 1.65;
  }

  /* Exam library, paper pages and focus workspace. */
  body[data-page="exams"] .exam-library-hero,
  body[data-page="exams"] .exam-card-head,
  body[data-page="exam-paper"] .exam-paper-hero,
  body[data-page="exam-result"] .exam-result-hero {
    grid-template-columns: 1fr;
  }

  body[data-page="exams"] .exam-archive-index {
    grid-template-columns: 1fr;
  }

  body[data-page="exams"] .exam-archive-summary {
    padding: 20px 18px;
    border-right: 0;
    border-bottom: 1px solid var(--color-border);
  }

  body[data-page="exams"] .exam-archive-summary h2 {
    font-size: 30px;
  }

  body[data-page="exams"] .exam-archive-summary > p {
    font-size: 16px;
  }

  body[data-page="exams"] .exam-archive-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  body[data-page="exams"] .exam-archive-stats div {
    padding: 9px 6px;
  }

  body[data-page="exams"] .exam-archive-stats dt {
    font-size: 12px;
    line-height: 1.3;
    white-space: normal;
  }

  body[data-page="exams"] .exam-archive-stats dd {
    font-size: 21px;
  }

  body[data-page="exams"] .exam-toolbar {
    width: 100%;
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 18px;
  }

  body[data-page="exams"] .exam-toolbar__heading {
    display: grid;
    gap: 3px;
  }

  body[data-page="exams"] .exam-toolbar__heading span {
    font-size: 13px;
  }

  body[data-page="exams"] .exam-toolbar__heading strong {
    font-size: 18px;
  }

  body[data-page="exams"] .exam-filter-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  body[data-page="exams"] .exam-filter {
    width: 100%;
    min-width: 0;
    min-height: 52px;
    padding: 8px;
  }

  body[data-page="exams"] .exam-filter > strong {
    font-size: 16px;
  }

  body[data-page="exams"] .exam-library-tools {
    display: grid;
    gap: 8px;
  }

  body[data-page="exams"] .exam-library-count {
    font-size: 15px;
    white-space: normal;
  }

  body[data-page="exams"] .exam-library-hero,
  body[data-page="exams"] .exam-paper-card,
  body[data-page="exam-paper"] .exam-paper-hero,
  body[data-page="exam-result"] .exam-result-hero,
  body[data-page="exam-result"] .exam-review-card {
    padding: 18px;
  }

  body[data-page="exams"] .exam-library-grid,
  body[data-page="exams"] .exam-paper-meta,
  body[data-page="exam-result"] .exam-result-metrics {
    grid-template-columns: 1fr;
  }

  body[data-page="exams"] .exam-card-head h2,
  body[data-page="exam-paper"] .exam-paper-hero h1,
  body[data-page="exam-result"] .exam-review-head h3 {
    font-size: 25px;
  }

  body[data-page="exams"] .exam-category-tabs,
  body[data-page="exams"] .exam-month-nav-links {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  body[data-page="exams"] .exam-category-tabs::-webkit-scrollbar,
  body[data-page="exams"] .exam-month-nav-links::-webkit-scrollbar {
    display: none;
  }

  body[data-page="exams"] .exam-category-tabs > *,
  body[data-page="exams"] .exam-month-nav-links > * {
    min-height: 44px;
  }

  body[data-page="exam-paper"] .exam-paper-actions,
  body[data-page="exam-result"] .exam-result-actions,
  body[data-page="exam-result"] .exam-review-head {
    align-items: stretch;
    flex-direction: column;
  }

  body[data-page="exam-paper"] .exam-paper-actions > *,
  body[data-page="exam-result"] .exam-result-actions > * {
    width: 100%;
  }

  body[data-page="exam-session"] {
    overflow: hidden;
    font-size: 16px;
  }

  body[data-page="exam-session"] .exam-focus-bar {
    position: sticky;
    top: 0;
    min-height: 104px;
    padding: 8px 10px;
  }

  body[data-page="exam-session"] .exam-focus-title strong {
    max-width: 54vw;
    font-size: 16px;
  }

  body[data-page="exam-session"] .save-status,
  body[data-page="exam-session"] .exam-shortcuts {
    display: none;
  }

  body[data-page="exam-session"] .exam-focus-stats,
  body[data-page="exam-session"] .exam-focus-stats button {
    font-size: 14px;
  }

  body[data-page="exam-session"] .exam-workspace {
    height: calc(100dvh - 104px);
  }

  body[data-page="exam-session"] .exam-question-map {
    padding: 8px 10px;
  }

  body[data-page="exam-session"] .question-number {
    width: 44px;
    height: 44px;
  }

  body[data-page="exam-session"] .exam-material-pane,
  body[data-page="exam-session"] .exam-question-pane {
    padding: 18px 14px 28px;
  }

  body[data-page="exam-session"] .exam-reading-text,
  body[data-page="exam-session"] .exam-listening-transcript,
  body[data-page="exam-session"] .exam-question-card {
    font-size: 18px;
    line-height: 1.72;
  }

  body[data-page="exam-session"] .exam-question-card h1 {
    font-size: 23px;
    line-height: 1.45;
  }

  body[data-page="exam-session"] .exam-option {
    min-height: 52px;
    grid-template-columns: 34px minmax(0, 1fr);
    padding: 11px;
    border-radius: 14px;
    font-size: 16px;
  }

  body[data-page="exam-session"] .exam-question-controls {
    gap: 8px;
  }

  body[data-page="exam-session"] .exam-question-controls button {
    min-width: 0;
    flex: 1;
  }

  body[data-page="exam-session"] .exam-annotation-toolbar {
    max-width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  /* Learning and reinforcement. The optional separate mini window is hidden
     on phones; the normal learning flow and every answer action remain. */
  body[data-page="learn"] .mini-window-launch {
    display: none !important;
  }

  body.learning-active:not(.mini-mode) {
    overflow: hidden;
  }

  body.learning-active:not(.mini-mode) main.shell {
    width: calc(100% - 12px);
    padding: 6px 0 max(8px, env(safe-area-inset-bottom));
  }

  :root[data-display-scale="compact"] body.learning-active:not(.mini-mode) .study-layout,
  body.learning-active:not(.mini-mode) .study-layout {
    width: 100%;
    height: calc(100dvh - 154px);
    min-height: 0;
  }

  body.learning-active:not(.mini-mode) .study-card {
    padding: 10px 9px 8px;
    border-radius: 18px;
  }

  body.learning-active:not(.mini-mode) .study-summary,
  body.learning-active:not(.mini-mode) .study-summary-book,
  body.learning-active:not(.mini-mode) .study-summary-line b {
    font-size: 14px;
  }

  body.learning-active:not(.mini-mode) .word-title {
    font-size: clamp(58px, 20vw, 82px);
  }

  body.learning-active:not(.mini-mode) .pron-big {
    font-size: 22px;
  }

  body.learning-active:not(.mini-mode) .sense-meaning,
  body.learning-active:not(.mini-mode) .memo,
  body.learning-active:not(.mini-mode) .example-sentence {
    font-size: 17px;
  }

  body.learning-active:not(.mini-mode) .study-main-actions {
    gap: 6px;
  }

  body.learning-active:not(.mini-mode) .status-btn {
    min-height: 58px;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    padding: 7px 4px;
  }

  body.learning-active:not(.mini-mode) .status-btn::after,
  body.learning-active:not(.mini-mode) .status-btn .shortcut-badge,
  body.learning-active:not(.mini-mode) .status-btn .status-copy small,
  body.learning-active:not(.mini-mode) .mastered-action .shortcut-badge,
  body.learning-active:not(.mini-mode) .mastered-action small {
    display: none;
  }

  body.learning-active:not(.mini-mode) .status-btn .status-copy {
    grid-column: 1;
  }

  body.learning-active:not(.mini-mode) .status-btn .status-copy strong {
    font-size: 20px;
  }

  body.learning-active:not(.mini-mode) .mastered-action {
    min-height: 44px;
  }

  body[data-page="reinforcement"] .reinforcement-shell {
    padding-top: 22px;
  }

  body[data-page="reinforcement"] .reinforcement-head {
    display: grid;
    gap: 12px;
  }

  body[data-page="reinforcement"] .reinforcement-head h1 {
    font-size: 38px;
  }

  body[data-page="reinforcement"] .choice-option {
    min-height: 52px;
    padding: 12px;
    font-size: 16px;
  }

  /* Admin pages keep all tables and actions, changing only their arrangement. */
  body[data-page^="admin-"] > #app > .topbar + .admin-shell {
    margin-top: 0;
  }

  body[data-page^="admin-"] .admin-workspace {
    width: calc(100% - 20px);
    margin-top: 10px;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  body[data-page^="admin-"] .admin-sidebar {
    position: static;
    width: 100%;
    height: auto;
    padding: 12px;
    overflow: visible;
  }

  body[data-page^="admin-"] .admin-sidebar-heading {
    margin-bottom: 10px;
  }

  body[data-page^="admin-"] .admin-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  body[data-page^="admin-"] .admin-nav a {
    min-height: 44px;
  }

  body[data-page^="admin-"] .admin-main,
  body[data-page^="admin-"] .admin-main-content,
  body[data-page^="admin-"] .admin-page {
    min-width: 0;
  }

  body[data-page^="admin-"] .admin-page-head,
  body[data-page^="admin-"] .admin-toolbar,
  body[data-page^="admin-"] .admin-card-head {
    align-items: stretch;
    flex-direction: column;
  }

  body[data-page^="admin-"] .admin-table-wrap,
  body[data-page^="admin-"] .admin-table-scroll {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }
}

@media (max-width: 420px) {
  :is(body > .topbar, body > #app > .topbar) .nav-links a,
  :is(body > .topbar, body > #app > .topbar) .feedback-launcher {
    font-size: 14px;
  }

  body[data-page] .inspiration-hero h1,
  body[data-page="daily-reading"] .daily-reading-hero h1 {
    font-size: clamp(35px, 10.5vw, 42px);
  }

  body[data-page="daily-reading"] .reading-title-en {
    font-size: 29px;
  }

  body[data-page="quick-memory"] .knowledge-audio-options {
    grid-template-columns: 1fr;
  }

  body[data-page="exam-session"] .exam-focus-title strong {
    max-width: 48vw;
  }
}

@media (max-width: 340px) {
  :is(body > .topbar, body > #app > .topbar) .nav-links {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  html {
    scroll-padding-top: 204px;
  }

  :root[data-display-scale="compact"] body.learning-active:not(.mini-mode) .study-layout,
  body.learning-active:not(.mini-mode) .study-layout {
    height: calc(100dvh - 202px);
  }
}