@media (max-width: 600px) and (orientation: portrait) and (pointer: coarse) {
  :root[data-ielts-phone] .portal-student-bar {
    gap: 4px;
    padding-inline: 10px;
  }
  :root[data-ielts-phone] .portal-student-bar > div { min-width: 0; gap: 4px; }
  :root[data-ielts-phone] .portal-student-home {
    padding: 20px 16px calc(32px + env(safe-area-inset-bottom));
    overscroll-behavior-y: contain;
  }
  :root[data-ielts-phone] .portal-learning-brand {
    grid-template-columns: 108px minmax(0, 1fr);
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
  }
  :root[data-ielts-phone] .portal-learning-brand img { width: 108px; height: auto; object-fit: contain; }
  :root[data-ielts-phone] .portal-learning-brand strong { font-size: 16px; line-height: 1.35; }
  :root[data-ielts-phone] .portal-learning-brand p { margin-top: 5px; font-size: 12px; line-height: 1.45; }
  :root[data-ielts-phone] .portal-student-heading { margin-bottom: 16px; }
  :root[data-ielts-phone] .portal-student-heading h1 { font-size: 22px; overflow-wrap: anywhere; }
  :root[data-ielts-phone] .portal-module-grid { gap: 10px; margin-bottom: 26px; }
  :root[data-ielts-phone] .portal-module-grid > button { min-height: 76px; gap: 14px; padding: 15px 16px; }
  :root[data-ielts-phone] .portal-module-grid strong { font-size: 17px; }
  :root[data-ielts-phone] .portal-module-grid small { margin-top: 4px; }
  :root[data-ielts-phone] .weekly-student { margin: 22px 0; }
  :root[data-ielts-phone] .weekly-student-days { border: 0; gap: 8px; }
  :root[data-ielts-phone] .weekly-student-days > section {
    border: 1px solid #dce5e4;
    border-radius: 6px;
    padding: 12px 14px;
  }
  :root[data-ielts-phone] .weekly-student-days > section:last-child { border: 1px solid #dce5e4; }
  :root[data-ielts-phone] .weekly-student-days header { align-items: center; font-size: 14px; }
  :root[data-ielts-phone] .weekly-student-days button { min-height: 48px; padding: 12px 2px; font-size: 14px; line-height: 1.5; }
  :root[data-ielts-phone] .weekly-student-days p { margin: 10px 0 0; }
  :root[data-ielts-phone] .portal-student-assignment { padding: 14px; }
  :root[data-ielts-phone] .portal-student-assignment li button { min-height: 44px; }
  :root[data-ielts-phone] .daily-home-shell .home-workspace { padding-inline: 14px; }
  :root[data-ielts-phone] .daily-home-shell .topbar, :root[data-ielts-phone] .daily-home-shell .top-actions { min-width: 0; }
  :root[data-ielts-phone] .daily-home-shell .top-actions button { min-height: 44px; white-space: normal; }
  :root[data-ielts-phone] .daily-home-shell .learning-banner > div { padding: 12px 8px; }
  :root[data-ielts-phone] .daily-home-shell .learning-banner strong { font-size: 18px; }
  :root[data-ielts-phone] .learning-mode .task-heading, :root[data-ielts-phone] .learning-mode .lesson-page { padding-inline: 14px; }
  :root[data-ielts-phone] .learning-mode .focus-topbar { min-width: 0; }
  :root[data-ielts-phone] .learning-mode :is(input, textarea, select) { font-size: 16px; }

  :root[data-ielts-phone] .portal-login-panel { width: calc(100% - 32px); margin-top: 24px; }
  :root[data-ielts-phone] .portal-login-panel h1 { font-size: 25px; }
  :root[data-ielts-phone] .portal-login :is(input, select, textarea),
  :root[data-ielts-phone] .portal-teacher :is(input, select, textarea),
  :root[data-ielts-phone] .portal-dialog :is(input, select, textarea) { max-width: 100%; font-size: 16px; }
  :root[data-ielts-phone] .portal-role button { min-height: 44px; }
  :root[data-ielts-phone] .portal-owner-bar { padding: 8px 12px; gap: 6px; }
  :root[data-ielts-phone] .portal-owner-bar .portal-role { display: flex; overflow-x: auto; scrollbar-width: thin; }
  :root[data-ielts-phone] .portal-owner-bar .portal-role button { flex: 0 0 auto; min-height: 44px; }
  :root[data-ielts-phone] .portal-sidebar { min-width: 0; padding: 4px 8px 0; }
  :root[data-ielts-phone] .portal-sidebar nav {
    justify-content: flex-start;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }
  :root[data-ielts-phone] .portal-sidebar nav button { flex: 0 0 auto; min-height: 48px; padding: 10px 12px; white-space: nowrap; }
  :root[data-ielts-phone] .portal-topbar { min-height: 48px; padding: 0 12px; }
  :root[data-ielts-phone] .portal-main { min-width: 0; padding: 16px 14px calc(28px + env(safe-area-inset-bottom)); }
  :root[data-ielts-phone] .portal-page-title { flex-wrap: wrap; align-items: flex-start; gap: 12px; margin-bottom: 20px; }
  :root[data-ielts-phone] .portal-page-title > div { min-width: 0; }
  :root[data-ielts-phone] .portal-page-title h1 { font-size: 21px; overflow-wrap: anywhere; }
  :root[data-ielts-phone] .portal-actions { flex-wrap: wrap; gap: 8px; }
  :root[data-ielts-phone] .portal-table-wrap, :root[data-ielts-phone] .weekly-table-scroll { max-width: 100%; -webkit-overflow-scrolling: touch; }
  :root[data-ielts-phone] .portal-table-wrap { scrollbar-width: thin; }
  :root[data-ielts-phone] .portal-teacher :is(.portal-primary, .portal-secondary, .portal-icon),
  :root[data-ielts-phone] .portal-dialog :is(.portal-primary, .portal-secondary, .portal-icon) { min-height: 44px; }
  :root[data-ielts-phone] .portal-dialog { max-width: calc(100% - 20px); max-height: calc(100dvh - 20px); }
  :root[data-ielts-phone] .portal-dialog-body { overflow-y: auto; overscroll-behavior: contain; }
  :root[data-ielts-phone] .cambridge-bundle-tabs { max-height: 28vh; overflow-y: auto; }
  :root[data-ielts-phone] .ielts-test-header { gap: 6px; padding: 6px 10px; }
  :root[data-ielts-phone] .ielts-test-actions { gap: 5px; }
  :root[data-ielts-phone] .ielts-test-actions button { min-height: 40px; }
  :root[data-ielts-phone] .cambridge-reading-shell { gap: 6px; padding: 6px; }
  :root[data-ielts-phone] .cambridge-reading-pane-toolbar { padding: 6px 8px; }
  :root[data-ielts-phone] .cambridge-reading-pane-toolbar button { min-height: 40px; }
  :root[data-ielts-phone] .cambridge-reading-workspace input,
  :root[data-ielts-phone] .cambridge-test-workspace input { font-size: 16px; }
  :root[data-ielts-phone] :is(.portal-form, .portal-form-columns, .portal-filters, .exam-publish-form, .exam-marking-page, .weekly-planner) { min-width: 0; max-width: 100%; }
  :root[data-ielts-phone] :is(.portal-form, .exam-publish-form) fieldset { min-width: 0; }
  :root[data-ielts-phone] .portal-form-footer { flex-wrap: wrap; gap: 8px; }
  :root[data-ielts-phone] .portal-dialog > header { gap: 8px; }
  :root[data-ielts-phone] .portal-dialog > header h2 { min-width: 0; overflow-wrap: anywhere; }
  :root[data-ielts-phone] :is(.portal-student-choices, .portal-catalog, .exam-student-options) { -webkit-overflow-scrolling: touch; }
  :root[data-ielts-phone] .weekly-navigation { gap: 6px; }
  :root[data-ielts-phone] .weekly-navigation button { min-width: 44px; min-height: 44px; }
  :root[data-ielts-phone] .weekly-picker > div { -webkit-overflow-scrolling: touch; }
  :root[data-ielts-phone] .weekly-table-scroll { scrollbar-color: #91a9ad #eaf1f1; }
  :root[data-ielts-phone] .exam-reviewer-grid { grid-template-columns: minmax(0, 1fr); }
  :root[data-ielts-phone] .exam-panel-toolbar { gap: 8px; }
  :root[data-ielts-phone] .exam-marking-list article { gap: 10px; }
  :root[data-ielts-phone] .exam-marking-list article > div { min-width: 0; overflow-wrap: anywhere; }
  :root[data-ielts-phone] :is(.exam-answer-label textarea, .exam-card-gap input) { font-size: 16px; }
  :root[data-ielts-phone] :is(.exam-student-sheet, .exam-marking-page, .exam-library-item) { min-width: 0; }
  :root[data-ielts-phone] .exam-paper-image { max-width: 100%; height: auto; }

  /* Phone visual hierarchy: section dividers, clear states and calm contrast. */
  :root[data-ielts-phone] .portal-student { background: #f3f7f8; }
  :root[data-ielts-phone] .portal-student-bar { border-bottom: 1px solid #c9dce1; background: #fff; }
  :root[data-ielts-phone] .portal-student-home { background: #f7fafb; }
  :root[data-ielts-phone] .portal-learning-brand { border-bottom: 1px solid #cbdde2; }
  :root[data-ielts-phone] .portal-student-heading { padding-bottom: 14px; border-bottom: 1px solid #d3e2e5; }
  :root[data-ielts-phone] .portal-student-heading h1 { color: #163b4a; }
  :root[data-ielts-phone] .portal-student-heading .portal-overline { color: #527986; }
  :root[data-ielts-phone] .portal-module-grid > button { border-radius: 6px; border-left-width: 4px; }
  :root[data-ielts-phone] .portal-module-grid > button:first-child { background: #07566f; border-color: #07566f; border-left-color: #55c1cb; color: #fff; }
  :root[data-ielts-phone] .portal-module-grid > button:first-child small { color: #d6eef0; opacity: 1; }
  :root[data-ielts-phone] .portal-module-grid > button:nth-child(2) { background: #f4f5fa; border-color: #d5dce8; border-left-color: #7c87ad; color: #344a68; }
  :root[data-ielts-phone] .portal-module-grid > button:nth-child(3) { background: #edf7f3; border-color: #ccdfd5; border-left-color: #3c8b6c; color: #245f4c; }
  :root[data-ielts-phone] :is(.weekly-student, .portal-student-assignments) > .portal-section-heading { padding-bottom: 10px; border-bottom: 2px solid #b5cfd5; }
  :root[data-ielts-phone] :is(.weekly-student, .portal-student-assignments) > .portal-section-heading h2 { color: #173f50; }
  :root[data-ielts-phone] .weekly-student-days > section { background: #fff; border-color: #d1e0e3; border-left: 3px solid #b5cbd0; }
  :root[data-ielts-phone] .weekly-student-days > section:last-child { border-color: #d1e0e3; border-left: 3px solid #b5cbd0; }
  :root[data-ielts-phone] .weekly-student-days .weekly-today { border-left-color: #268264; box-shadow: none; background: #eef8f3; }
  :root[data-ielts-phone] .weekly-student-days header { color: #244c59; border-bottom-color: #d3e3e3; }
  :root[data-ielts-phone] .weekly-student-days li:last-child { border-bottom: 0; }
  :root[data-ielts-phone] .portal-student-assignment { background: #fff; border: 1px solid #d4e2e4; border-left: 3px solid #83aab2; border-radius: 6px; }

  :root[data-ielts-phone] .daily-home-shell .home-workspace { background: #f7fafb; }
  :root[data-ielts-phone] .daily-home-shell .daily-mobile-menu { border-color: #8eb6c3; background: #eaf4f6; color: #07566f; }
  :root[data-ielts-phone] .daily-home-shell .topbar { padding-bottom: 16px; border-bottom: 2px solid #b7d1d8; }
  :root[data-ielts-phone] .daily-home-shell .top-actions .review-progress-pill { border-color: #9fbec7; background: #eef7f7; color: #07566f; }
  :root[data-ielts-phone] .home-workspace .learning-banner { border: 1px solid #cee1e4; border-radius: 6px; background: #eaf5f5; }
  :root[data-ielts-phone] .home-workspace .learning-banner > div { border: 0; border-right: 1px solid #c6dfe2; }
  :root[data-ielts-phone] .home-workspace .learning-banner > div:last-child { border-right: 0; }
  :root[data-ielts-phone] .home-workspace .summary-grid { border-bottom: 1px solid #cbdde0; }
  :root[data-ielts-phone] .home-workspace .summary-grid .exam-countdown-card { background: #f0f5f9; border-left: 3px solid #7b99b1; }
  :root[data-ielts-phone] .home-workspace .summary-mistakes { border-bottom: 1px solid #d8e5e6; }
  :root[data-ielts-phone] .home-workspace .dashboard-panel:not(.review-dashboard-panel) h2 { color: #173f50; }
  :root[data-ielts-phone] .home-workspace .review-dashboard-panel { border-left: 3px solid #c38645; background: #fff6ed; }
  :root[data-ielts-phone] .daily-home-shell .sidebar.mobile-open { background: #f7fafb; border-right: 1px solid #a9c7ce; }
  :root[data-ielts-phone] .daily-home-shell .group-button { border-bottom: 1px solid #d6e4e6; }
  :root[data-ielts-phone] .learning-mode .focus-topbar { border-bottom: 2px solid #c0d9de; }
  :root[data-ielts-phone] .learning-mode .task-heading { border-bottom: 1px solid #c6dce1; }
  :root[data-ielts-phone] .learning-mode .question-card { border-color: #c8dade; }

  :root[data-ielts-phone] .review-workspace .review-task-tabs { grid-template-columns: minmax(0, 1fr); }
  :root[data-ielts-phone] .review-workspace .review-task-tabs button {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 4px 10px;
    min-width: 0;
  }
  :root[data-ielts-phone] .review-workspace .review-task-tabs button > span,
  :root[data-ielts-phone] .review-workspace .review-task-tabs button > small {
    min-width: 0;
    overflow-wrap: anywhere;
    line-height: 1.5;
  }
  :root[data-ielts-phone] .review-workspace .review-task-tabs button > small { grid-column: 1; }
  :root[data-ielts-phone] .review-workspace .review-task-tabs button > strong {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin: 0;
    white-space: nowrap;
  }
  :root[data-ielts-phone] .review-workspace .review-card-heading {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 16px;
  }
  :root[data-ielts-phone] .review-workspace .review-card-heading > div { min-width: 0; }
  :root[data-ielts-phone] .review-workspace .review-card-heading .eyebrow { overflow-wrap: anywhere; line-height: 1.5; }
  :root[data-ielts-phone] .review-workspace .review-item .question-title {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  :root[data-ielts-phone] .review-workspace .review-item .question-title p {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  :root[data-ielts-phone] .portal-teacher { background: #f4f8f9; }
  :root[data-ielts-phone] .portal-sidebar { background: #f3f7f8; border-bottom: 1px solid #c8dce0; }
  :root[data-ielts-phone] .portal-sidebar nav { gap: 4px; }
  :root[data-ielts-phone] .portal-sidebar nav button { border: 1px solid transparent; border-radius: 5px 5px 0 0; color: #4f6973; }
  :root[data-ielts-phone] .portal-sidebar nav button.active { background: #fff; border-color: #c9dde1; border-bottom: 3px solid #087087; color: #07566f; }
  :root[data-ielts-phone] .portal-topbar { border-bottom: 1px solid #cbdde1; }
  :root[data-ielts-phone] .portal-main { background: #fff; }
  :root[data-ielts-phone] .portal-page-title { padding-bottom: 14px; border-bottom: 2px solid #c2d9de; }
  :root[data-ielts-phone] .portal-page-title h1 { color: #173f50; }
  :root[data-ielts-phone] .portal-metrics { border-color: #cbdde1; }
  :root[data-ielts-phone] .portal-table-wrap { border: 1px solid #cfdee1; border-radius: 4px; background: #fff; }
  :root[data-ielts-phone] .portal-table th { background: #edf5f6; color: #315c69; }
  :root[data-ielts-phone] .portal-table tbody tr:nth-child(even) { background: #f8fbfb; }
  :root[data-ielts-phone] .weekly-toolbar { border-bottom: 2px solid #c2d9de; }
  :root[data-ielts-phone] .weekly-table thead th { background: #eaf4f5; }
  :root[data-ielts-phone] .weekly-picker { border-left: 3px solid #4397a0; }
  :root[data-ielts-phone] .exam-panel-toolbar { padding-bottom: 10px; border-bottom: 1px solid #cfdee1; }
  :root[data-ielts-phone] .exam-library-item { border-color: #d5e3e5; }
  :root[data-ielts-phone] .exam-skill-tabs button[aria-selected='true'] { border-color: #07566f; background: #07566f; }
  :root[data-ielts-phone] .cambridge-bundle-tabs, :root[data-ielts-phone] .ielts-test-header { border-bottom-color: #b7d2d8; }
}

@media (min-width: 601px) and (max-height: 500px) and (orientation: landscape) and (pointer: coarse) {
  :root[data-ielts-phone] .portal-teacher { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  :root[data-ielts-phone] .portal-sidebar { min-width: 0; padding: 2px 8px 0; }
  :root[data-ielts-phone] :is(.portal-sidebar > .portal-brand, .portal-sidebar-caption, .portal-sidebar-bottom) { display: none; }
  :root[data-ielts-phone] .portal-sidebar nav { flex-direction: row; gap: 0; justify-content: flex-start; overflow-x: auto; scrollbar-width: thin; }
  :root[data-ielts-phone] .portal-sidebar nav button { flex: 0 0 auto; min-height: 44px; padding: 8px 12px; white-space: nowrap; }
  :root[data-ielts-phone] .portal-teacher-body { height: auto; min-height: 0; }
  :root[data-ielts-phone] .portal-owner-bar { padding: 4px 10px; }
  :root[data-ielts-phone] .portal-owner-bar .portal-role { display: flex; overflow-x: auto; }
  :root[data-ielts-phone] .portal-owner-bar .portal-role button { flex: 0 0 auto; min-height: 40px; }
  :root[data-ielts-phone] .portal-topbar { min-height: 44px; }
  :root[data-ielts-phone] .portal-main { min-width: 0; padding: 12px 16px calc(20px + env(safe-area-inset-bottom)); }
  :root[data-ielts-phone] :is(.portal-table-wrap, .weekly-table-scroll) { max-width: 100%; -webkit-overflow-scrolling: touch; }
  :root[data-ielts-phone] .portal-dialog { max-height: calc(100dvh - 12px); max-width: calc(100% - 20px); }
  :root[data-ielts-phone] .portal-dialog-body { overflow-y: auto; }
  :root[data-ielts-phone] .cambridge-reading-shell { min-height: 0; }
  :root[data-ielts-phone] :is(.cambridge-reading-workspace, .cambridge-test-workspace) input { font-size: 16px; }
  :root[data-ielts-phone] .portal-sidebar { background: #f3f7f8; border-bottom: 1px solid #c8dce0; }
  :root[data-ielts-phone] .portal-sidebar nav { gap: 4px; }
  :root[data-ielts-phone] .portal-sidebar nav button { border: 1px solid transparent; color: #4f6973; }
  :root[data-ielts-phone] .portal-sidebar nav button.active { background: #fff; border-color: #c9dde1; border-bottom: 3px solid #087087; color: #07566f; }
  :root[data-ielts-phone] .portal-topbar, :root[data-ielts-phone] .portal-student-bar { border-bottom: 1px solid #cbdde1; }
  :root[data-ielts-phone] .portal-page-title { padding-bottom: 10px; border-bottom: 2px solid #c2d9de; }
  :root[data-ielts-phone] .portal-table-wrap { border: 1px solid #cfdee1; background: #fff; }
  :root[data-ielts-phone] .portal-table th { background: #edf5f6; color: #315c69; }
  :root[data-ielts-phone] .portal-module-grid > button { border-left: 4px solid #75a9b5; }
  :root[data-ielts-phone] .portal-module-grid > button:first-child { border-left-color: #55c1cb; }
  :root[data-ielts-phone] .portal-module-grid > button:nth-child(2) { border-left-color: #7c87ad; }
  :root[data-ielts-phone] .portal-module-grid > button:nth-child(3) { border-left-color: #3c8b6c; }
  :root[data-ielts-phone] .ielts-test-header, :root[data-ielts-phone] .cambridge-bundle-tabs { border-bottom-color: #b7d2d8; }
}

@media (max-width: 600px) and (orientation: portrait) and (pointer: coarse),
       (min-width: 601px) and (max-height: 500px) and (orientation: landscape) and (pointer: coarse) {
  :root[data-ielts-phone] .review-workspace .review-task-tabs {
    display: flex;
    flex-direction: column;
    max-height: none;
    overflow: visible;
  }
  :root[data-ielts-phone] .review-workspace .review-task-tabs button {
    flex: 0 0 auto;
    height: auto;
    min-width: 0;
  }
  :root[data-ielts-phone] :is(.portal-study > .cambridge-reading-workspace, .portal-study > .cambridge-bundle-workspace > .cambridge-reading-workspace) .cambridge-reading-shell {
    display: block;
    overflow-y: auto;
    overflow-x: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0;
  }
  :root[data-ielts-phone] :is(.portal-study > .cambridge-reading-workspace, .portal-study > .cambridge-bundle-workspace > .cambridge-reading-workspace) .cambridge-reading-pane {
    display: block;
    min-height: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
  }
  :root[data-ielts-phone] :is(.portal-study > .cambridge-reading-workspace, .portal-study > .cambridge-bundle-workspace > .cambridge-reading-workspace) :is(.cambridge-reading-passage-text, .cambridge-reading-questions) {
    overflow: visible;
    min-height: 0;
  }
  :root[data-ielts-phone] :is(.portal-study > .cambridge-reading-workspace, .portal-study > .cambridge-bundle-workspace > .cambridge-reading-workspace) .cambridge-reading-pane + .cambridge-reading-pane {
    border-top: 6px solid #eef3f4;
  }
  :root[data-ielts-phone] :is(.portal-study > .cambridge-test-workspace, .portal-study > .cambridge-bundle-workspace > .cambridge-test-workspace) .ielts-question-palette div {
    grid-template-columns: repeat(auto-fill, 44px);
    gap: 4px;
  }
  :root[data-ielts-phone] :is(.portal-study > .cambridge-test-workspace, .portal-study > .cambridge-bundle-workspace > .cambridge-test-workspace) .ielts-question-palette button {
    width: 44px;
    height: 44px;
    font-size: 13px;
  }
  :root[data-ielts-phone] :is(.portal-study > .cambridge-test-workspace, .portal-study > .cambridge-bundle-workspace > .cambridge-test-workspace) :is(.cambridge-answer-slot strong, .cambridge-choice-group strong) {
    width: 19px;
    height: 19px;
    font-size: 11px;
  }
}