/* Teacher portal only. Desktop tables and business event handlers are retained. */
.tp-mobile-flow-summary, .tp-mobile-class-picker, .tp-mobile-calendar-controls { display: none; }

@media (max-width: 720px), (pointer: coarse) and (max-height: 500px) {
  #teacher-app { --topbar-offset: 66px; }
  #teacher-app .main { padding: 16px 12px 24px !important; scroll-padding-block: 16px; }
  #teacher-app .topbar { flex-wrap: nowrap !important; gap: 8px !important; padding: 10px 12px !important; min-height: 64px; }
  #teacher-app .tp-brand-group { flex: 1 1 auto; min-width: 0; gap: 8px !important; }
  #teacher-app .brand { min-width: 0; gap: 8px; font-size: 14px !important; }
  #teacher-app .brand > span:not(.brand-tag) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #teacher-app .brand-mark { width: 28px; height: 28px; border-radius: 9px; flex-shrink: 0; }
  #teacher-app .brand-tag, #teacher-app .teacher-page-back-btn { display: none !important; }
  #teacher-app .topbar-right { flex: 0 0 auto; gap: 6px !important; flex-wrap: nowrap !important; }
  #teacher-app #billing-entry { padding: 8px !important; font-size: 12px !important; min-height: 40px; white-space: nowrap; }
  #teacher-app .teacher-launcher-trigger, #teacher-app .teacher-user-pill { min-width: 40px; min-height: 40px; }
  #teacher-app .page-header { margin-bottom: 18px; }
  #teacher-app .page-title { line-height: 1.35; overflow-wrap: anywhere; }
  #teacher-app .page-desc { line-height: 1.75; }

  /* Keep the existing AI button in its own flex row, clear of scrollable content. */
  #teacher-app #fabAi {
    position: relative !important; inset: auto !important; transform: none !important;
    display: flex !important; flex: 0 0 auto; align-items: center; justify-content: center; flex-direction: row !important;
    gap: 8px; width: 100% !important; height: auto !important; min-height: 48px; margin: 0 !important;
    padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    border: 0 !important; border-top: 1px solid #e0e6f0 !important; border-radius: 0 !important;
    background: #fff !important; box-shadow: none !important; z-index: 40;
  }
  #teacher-app #fabAi .fab-ai-orb { width: 28px !important; height: 28px !important; min-width: 28px; margin: 0 !important; animation: none !important; filter: none !important; }
  #teacher-app #fabAi .fab-ai-orb img { width: 28px !important; height: 28px !important; object-fit: contain; }
  #teacher-app #fabAi .fab-ai-label { position: static !important; transform: none !important; background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; font-size: 14px; color: #4356bd; }
  #teacher-app:has(#panel-home.active) #fabAi,
  .tp-mobile-editing #teacher-app #fabAi { display: none !important; }

  /* The original cells become labelled mobile cards; no duplicate controls. */
  #teacher-app .tp-mobile-records { display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100%; border: 0; background: transparent; }
  #teacher-app .tp-mobile-records > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  #teacher-app .tp-mobile-records > tbody { display: grid; gap: 12px; width: 100%; }
  #teacher-app .tp-mobile-records > tbody > tr {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px;
    padding: 16px; border: 1px solid #e0e6f0; border-radius: 14px; background: #fff;
  }
  #teacher-app .tp-mobile-records > tbody > tr > td {
    display: grid; grid-template-columns: 5em minmax(0, 1fr); gap: 10px; align-items: start;
    width: auto !important; min-width: 0 !important; max-width: 100%; padding: 0 !important;
    border: 0 !important; text-align: left !important; white-space: normal !important;
    font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; background: transparent;
  }
  #teacher-app .tp-mobile-records td[data-mobile-label]::before { content: attr(data-mobile-label); color: #77859b; font-size: 12px; font-weight: 500; }
  #teacher-app .tp-mobile-records td.tp-mobile-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 12px !important; border-top: 1px solid #edf0f6 !important; }
  #teacher-app .tp-mobile-records td.tp-mobile-actions::before { display: none; }
  #teacher-app .tp-mobile-records td .btn { min-height: 42px; max-width: 100%; margin: 0; white-space: normal; }
  #teacher-app .tp-mobile-records td.tp-mobile-actions .btn { flex: 1 1 auto; }
  #teacher-app .tp-mobile-records tr.tp-mobile-empty { display: block; padding: 24px 16px; }
  #teacher-app .tp-mobile-records tr.tp-mobile-empty > td { display: block; text-align: center !important; color: #77859b; }
  #teacher-app .tp-mobile-records.tp-mobile-selectable > thead { position: static; width: auto; height: auto; clip-path: none; display: block; margin-bottom: 12px; }
  #teacher-app .tp-mobile-records.tp-mobile-selectable > thead tr { display: block; }
  #teacher-app .tp-mobile-records.tp-mobile-selectable > thead th { display: none; }
  #teacher-app .tp-mobile-records.tp-mobile-selectable > thead th.tp-mobile-select-all { display: flex; gap: 8px; align-items: center; width: auto !important; padding: 10px 4px !important; background: none; border: 0; }
  #teacher-app .tp-mobile-select-all::after { content: '全选当前可处理的记录'; font-size: 13px; }
  #teacher-app .tp-mobile-records input[type=checkbox] { width: 20px !important; height: 20px !important; margin: 0; }
  #teacher-app .duty-grade-swap-table-card { padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible; }
  #teacher-app .duty-grade-swap-table-card > .page-header { padding: 0 2px 12px !important; }
  #teacher-app .oc-review-table-scroll, #teacher-app .duty-batch-table-wrap { overflow: visible; min-width: 0; }
  #teacher-app #panel-duty-acad-openclass .oc-review-table-scroll { padding: 0 14px 14px; }
  #teacher-app #panel-duty-acad-openclass .oc-review-batch { width: 100%; flex-wrap: wrap; gap: 8px; }

  #teacher-app .tp-mobile-records[data-mobile-kind=swap] > tbody > tr { grid-template-columns: minmax(0, 1fr) auto; gap: 14px 8px; }
  #teacher-app .tp-mobile-records[data-mobile-kind=swap] > tbody > tr > td:first-child { display: flex; gap: 4px; align-items: center; grid-area: 1 / 1; font-weight: 600; color: #60708a; }
  #teacher-app .tp-mobile-records[data-mobile-kind=swap] > tbody > tr > td:first-child::before { content: '#'; font-size: inherit; }
  #teacher-app .tp-mobile-records[data-mobile-kind=swap] > tbody > tr > td:nth-child(3) { grid-area: 1 / 2; display: block; padding: 3px 9px !important; font-size: 12px; font-weight: 600; color: #4356a8; background: #eef2ff; border-radius: 6px; }
  #teacher-app .tp-mobile-records[data-mobile-kind=swap] > tbody > tr > td:nth-child(3)::before,
  #teacher-app .tp-mobile-records[data-mobile-kind=swap] .duty-swap-content-cell::before { display: none; }
  #teacher-app .tp-mobile-records[data-mobile-kind=swap] .duty-swap-content-cell { grid-column: 1 / -1; display: block; }
  #teacher-app .tp-mobile-records[data-mobile-kind=swap] td.tp-mobile-actions { grid-column: 1 / -1; }
  #teacher-app .tp-mobile-records .gs-swap { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; width: 100%; gap: 12px; }
  #teacher-app .tp-mobile-records .gs-swap__line { grid-template-columns: 2.5em minmax(0, 1fr); gap: 4px 8px; padding-left: 10px; border-left: 2px solid #dbe4fb; }
  #teacher-app .tp-mobile-records .gs-swap__role { font-size: 12px; line-height: 24px; }
  #teacher-app .tp-mobile-records .gs-swap__name { font-size: 15px; line-height: 24px; white-space: normal; overflow-wrap: anywhere; }
  #teacher-app .tp-mobile-records .gs-swap__lesson { grid-column: 1 / -1; font-size: 13px; line-height: 1.8; color: #52637e; white-space: normal; }
  #teacher-app .tp-mobile-records .gs-swap__meta { padding: 10px 12px; margin: 0; background: #f6f8fc; border-radius: 8px; font-size: 12px; color: #66758b; line-height: 1.7; }
  #teacher-app .tp-mobile-records .gs-swap-actions { display: flex !important; width: 100%; gap: 8px; }
  #teacher-app .tp-mobile-records[data-mobile-kind=swap] tr.tp-mobile-empty > td { display: block; font-weight: 400; }
  #teacher-app .tp-mobile-records[data-mobile-kind=swap] tr.tp-mobile-empty > td::before { display: none; }

  #teacher-app .tp-mobile-flow-summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 13px 14px; margin-bottom: 16px; border: 1px solid #e0e6f0; border-radius: 12px; background: #fff; color: #354bad; text-align: left; font: inherit; cursor: pointer; }
  #teacher-app .tp-mobile-flow-summary strong { font-size: 13px; }
  #teacher-app .tp-mobile-flow-summary small { flex-shrink: 0; font-size: 11px; color: #748198; }
  #teacher-app #panel-swap :is(#adjustFlowSteps, #substituteFlowSteps) { display: none !important; }
  #teacher-app #panel-swap :is(#adjustFlowSteps, #substituteFlowSteps).tp-mobile-flow-expanded { display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 0; width: 100%; border-radius: 12px; margin-top: -8px; }
  #teacher-app #panel-swap .tp-mobile-flow-expanded .flow-step { padding: 9px 12px; white-space: normal; text-align: left; font-size: 13px; background: none; }
  #teacher-app #panel-swap .tp-mobile-flow-expanded .flow-step::after { display: none; }
  #teacher-app #panel-duty-acad-batch .duty-batch-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 12px 8px; overflow: visible; }
  #teacher-app #panel-duty-acad-batch .duty-batch-flow__item { display: flex; flex-direction: column; gap: 7px; padding: 0; min-width: 0; font-size: 12px; white-space: normal; text-align: center; }
  #teacher-app #panel-duty-acad-batch .duty-batch-flow__sep { display: none; }
  #teacher-app .swap-form-actions { flex-wrap: wrap; }
  #teacher-app .swap-form-actions .btn { min-height: 44px; flex: 1 1 140px; }
  #teacher-app #panel-duty-acad-sub .duty-toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  #teacher-app #panel-duty-acad-sub .duty-toolbar > label, #teacher-app #dutySubLogMeta { grid-column: 1 / -1; }
  #teacher-app #btnDutySubRefresh { grid-column: 1 / -1; }
  #teacher-app #panel-duty-acad-sub .duty-toolbar .btn { min-height: 42px; white-space: normal; }

  #teacher-app .tp-mobile-class-picker { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; width: 100%; font-size: 13px; font-weight: 600; color: #52637e; }
  #teacher-app .tp-mobile-class-picker select { flex: 1; width: 0; min-width: 0; min-height: 42px; padding: 8px 12px; border: 1px solid #d7dfed; border-radius: 9px; background: #fff; color: #25354e; font: inherit; }
  #teacher-app :is(#dutySchoolClassTabs, #dutyAcadClassTabs) { display: none; }
  #teacher-app .duty-class-rail-wrap { overflow: visible; }
  #teacher-app .tp-mobile-calendar-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
  #teacher-app .tp-mobile-calendar-modes { display: flex; padding: 3px; border-radius: 9px; background: #eef2f8; }
  #teacher-app .tp-mobile-calendar-modes button { min-height: 36px; padding: 6px 14px; border: 0; border-radius: 7px; color: #66758b; background: transparent; font: inherit; font-size: 13px; cursor: pointer; }
  #teacher-app .tp-mobile-calendar-modes button[aria-pressed=true] { background: #fff; color: #4356bd; box-shadow: 0 1px 4px #1d325512; }
  #teacher-app .tp-mobile-calendar-controls select { margin-left: auto; width: auto; min-height: 40px; border: 1px solid #d7dfed; border-radius: 8px; padding: 6px 10px; background: #fff; color: #4356bd; font: inherit; font-size: 13px; }
  #teacher-app .tp-mobile-scroll-hint { font-size: 11px; color: #748198; margin-left: auto; }
  #teacher-app .tp-mobile-calendar-controls [hidden] { display: none !important; }
  #teacher-app .tp-mobile-calendar { max-width: 100%; overflow: auto !important; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  #teacher-app .tp-mobile-calendar table[data-mobile-view=day] { width: 100% !important; min-width: 0 !important; table-layout: fixed; }
  #teacher-app .tp-mobile-calendar table[data-mobile-view=day] .tp-mobile-day-hidden { display: none !important; }
  #teacher-app .tp-mobile-calendar table[data-mobile-view=day] :is(th, td):not(.period):not(:first-child) { width: auto !important; min-width: 0 !important; }
  #teacher-app .tp-mobile-calendar table[data-mobile-view=day] :is(th, td):first-child { width: 65px !important; min-width: 65px !important; }
  #teacher-app .tp-mobile-calendar table[data-mobile-view=week] { min-width: 660px !important; }
  #teacher-app .tp-mobile-calendar table[data-mobile-view=week] :is(th, td):first-child { position: sticky; left: 0; z-index: 2; background: #f5f7fb; }
  #teacher-app .tp-mobile-calendar table th { position: sticky; top: 0; background: #f5f7fb; z-index: 3; }
  #teacher-app .tp-mobile-calendar table[data-mobile-view=week] th:first-child { z-index: 4; }
  #teacher-app .teaching-subnav { flex-wrap: nowrap !important; overflow-x: auto !important; max-width: 100%; padding-bottom: 8px; scrollbar-width: thin; scroll-padding-inline: 8px; }
  #teacher-app .teaching-subnav button { flex-shrink: 0; min-height: 42px; }

  /* Fit dialogs to the visible viewport; long content scrolls inside the panel. */
  #teacher-app .modal:not([hidden]) { padding: 12px; }
  #teacher-app .modal-panel { width: min(100%, 640px) !important; min-width: 0 !important; max-width: calc(100vw - 24px) !important; max-height: calc(100dvh - 24px) !important; overflow: auto; margin: auto; }
  #teacher-app dialog[open] { position: fixed; inset: 0; width: calc(100vw - 24px); max-width: 640px; max-height: calc(100dvh - 24px); margin: auto; overflow: auto; box-sizing: border-box; }
  #teacher-app .modal-head { gap: 8px; }
  #teacher-app .modal-head h2 { min-width: 0; font-size: 18px; overflow-wrap: anywhere; }
  #teacher-app .modal-head > button { flex-shrink: 0; min-height: 40px; }
  #teacher-app .modal-actions { flex-wrap: wrap; gap: 8px; }
  #teacher-app .modal-actions .btn { min-height: 42px; white-space: normal; }
}

/* Stable teacher edition: preserve the original cells, event handlers and data. */
html.tablet-page-teacher-route .tablet-landscape-guard { display: none !important; }
@media (max-width: 720px), (pointer: coarse) and (max-height: 500px) {
  html.tablet-page-teacher-route, html.tablet-page-teacher-route body { overflow-x: hidden !important; }
  html.tablet-page-teacher-route body { overflow-y: auto; }
  #teacher-app.app { height: var(--tp-visual-height, 100dvh) !important; min-height: 0 !important; max-height: var(--tp-visual-height, 100dvh) !important; }
  #teacher-app .sidebar:not(.is-open) { display: none !important; }
  #teacher-app .app-body { min-height: 0 !important; flex-direction: column !important; }
  #teacher-app .menu-mobile { display: inline-flex; min-height: 40px; }
  #teacher-app .main { min-width: 0 !important; min-height: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; }
  #teacher-app :is(input:not([type=checkbox]):not([type=radio]), select, textarea) { max-width: 100%; min-width: 0; font-size: 16px; }
  #teacher-app :is(.btn, .el-button) { min-height: 42px; }
  #teacher-app #panel-schedule :is(.schedule-toolbar, .schedule-week-picker, .schedule-actions) { flex-wrap: wrap; min-width: 0; gap: 8px; }
  #teacher-app #panel-schedule :is(.schedule-topbar, .schedule-board-card) { min-width: 0; max-width: 100%; }
  #teacher-app #panel-schedule .schedule-board-card { height: auto !important; max-height: none !important; overflow: visible !important; }
  #teacher-app #panel-schedule #timetableContainer.tp-mobile-calendar { display: block !important; width: 100% !important; min-height: 0 !important; height: auto !important; max-height: none !important; padding: 0 !important; }
  #teacher-app .tp-mobile-calendar-controls { flex: 0 0 auto; width: 100%; }
  #teacher-app .tp-mobile-calendar-controls select { max-width: 100%; }
  #teacher-app :is(#panel-schedule #timetableContainer, #modalLesson #modalLessonTimetable) .tp-mobile-day-cards[data-mobile-view=day] { display: block !important; width: 100% !important; }
  #teacher-app :is(#panel-schedule #timetableContainer, #modalLesson #modalLessonTimetable) .tp-mobile-day-cards[data-mobile-view=day] > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  #teacher-app :is(#panel-schedule #timetableContainer, #modalLesson #modalLessonTimetable) .tp-mobile-day-cards[data-mobile-view=day] > tbody { display: grid; gap: 10px; width: 100%; }
  #teacher-app :is(#panel-schedule #timetableContainer, #modalLesson #modalLessonTimetable) .tp-mobile-day-cards[data-mobile-view=day] > tbody > tr { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; padding: 12px 14px; border: 1px solid #e0e6f0; border-radius: 12px; background: #fff; }
  #teacher-app :is(#panel-schedule #timetableContainer, #modalLesson #modalLessonTimetable) .tp-mobile-day-cards[data-mobile-view=day] > tbody > tr > td { display: block; width: 100% !important; min-width: 0 !important; max-width: 100%; border: 0 !important; padding: 0 !important; text-align: left !important; white-space: normal; }
  #teacher-app :is(#panel-schedule #timetableContainer, #modalLesson #modalLessonTimetable) .tp-mobile-day-cards[data-mobile-view=day] > tbody > tr > td:first-child { width: 100% !important; min-width: 0 !important; font-size: 12px; color: #748299; margin-bottom: 7px; }
  #teacher-app :is(#panel-schedule #timetableContainer, #modalLesson #modalLessonTimetable) .tp-mobile-day-cards[data-mobile-view=day] .period-time { display: inline; margin-left: 8px; }
  #teacher-app :is(#panel-schedule #timetableContainer, #modalLesson #modalLessonTimetable) .tp-mobile-day-cards[data-mobile-view=day] .lesson-cell { min-height: 44px; cursor: pointer; }
  #teacher-app :is(#panel-schedule #timetableContainer, #modalLesson #modalLessonTimetable) .tp-mobile-day-cards[data-mobile-view=day] .lesson-cell:empty::before { content: '空档'; color: #9aa6b6; font-size: 13px; }
  #teacher-app :is(#panel-schedule #timetableContainer, #modalLesson #modalLessonTimetable) .tp-mobile-day-cards[data-mobile-view=day] .lesson-block { width: 100%; min-height: 44px; max-height: none !important; padding: 10px 12px !important; white-space: normal; }
  #teacher-app :is(#panel-schedule #timetableContainer, #modalLesson #modalLessonTimetable) .tp-mobile-day-cards[data-mobile-view=day] .lesson-block strong { font-size: 16px; white-space: normal; }
  #teacher-app :is(#panel-schedule #timetableContainer, #modalLesson #modalLessonTimetable) .tp-mobile-day-cards[data-mobile-view=day] .lesson-block span { white-space: normal; }
  #teacher-app :is(#panel-schedule #timetableContainer, #modalLesson #modalLessonTimetable) .tp-mobile-day-cards[data-mobile-view=day] :is(.break-row,.timetable-evening-break) { padding: 8px 12px; background: #f4f6fa; }
  #teacher-app :is(#panel-schedule #timetableContainer, #modalLesson #modalLessonTimetable) .tp-mobile-day-cards[data-mobile-view=day] :is(.break-row,.timetable-evening-break) td { margin: 0; }
  #teacher-app .tp-mobile-calendar table[data-mobile-view=week] { table-layout: fixed; }
  #teacher-app .tp-mobile-calendar table[data-mobile-view=week] :is(th,td) { overflow-wrap: anywhere; }
  #teacher-app #modalLesson .modal-lesson-picker { display: flex; flex-direction: column; min-height: 0; }
  #teacher-app #modalLesson :is(.lesson-picker-toolbar,.lesson-picker-meta,.lesson-picker-selected) { flex: 0 0 auto; max-width: 100%; }
  #teacher-app #modalLesson .lesson-picker-toolbar { display: grid; grid-template-columns: 1fr; gap: 8px; }
  #teacher-app #modalLesson .lesson-picker-toolbar :is(label,select) { width: 100%; min-width: 0; }
  #teacher-app #modalLessonTimetable.tp-mobile-calendar { min-height: 0 !important; max-height: none !important; height: auto !important; flex: 0 0 auto; }
  #teacher-app .tp-mobile-picker .picker-selected .lesson-block { border: 2px solid #4356bd !important; background: #eef2ff !important; }
  #teacher-app .tp-mobile-picker .pickable-disabled { opacity: .55; }
  #teacher-app .tp-mobile-picker .tp-mobile-scroll-hint { display: none; }
  #teacher-app .duty-publish-archive { display: grid; gap: 12px; padding: 14px; margin: 12px 0; background: #f5f7fc; border: 1px solid #e0e6f0; border-radius: 12px; }
  #teacher-app .duty-publish-archive[hidden] { display: none; }
  #teacher-app .duty-publish-archive__head { display: grid; gap: 5px; font-size: 13px; }
  #teacher-app .duty-publish-archive__head span { color: #748299; font-size: 12px; }
  #teacher-app .duty-publish-archive__fields { display: grid; grid-template-columns: 1fr; gap: 12px; }
  #teacher-app #panel-duty-acad-holiday :is(.duty-batch-form__grid,.duty-batch-field--wide) { grid-template-columns: minmax(0,1fr); min-width: 0; }
  #teacher-app #panel-duty-acad-holiday .duty-batch-field { display: flex; flex-direction: column; gap: 7px; align-items: stretch; }
  #teacher-app #panel-duty-acad-holiday :is(input[type=date],input[type=text],select) { width: 100%; min-width: 0; min-height: 44px; }
  #teacher-app #panel-duty-acad-holiday label:has(input[type=checkbox]) { flex-direction: row; align-items: flex-start; }
  #teacher-app #panel-duty-acad-holiday input[type=checkbox] { flex: 0 0 20px; width: 20px; height: 20px; }
  #teacher-app :is(#panel-duty-subject-openclass,#panel-perf-workload) .duty-toolbar { display: flex; flex-wrap: wrap; gap: 8px; }
  #teacher-app #panel-duty-subject-openclass .duty-toolbar > label { width: 100%; display: flex; gap: 8px; align-items: center; }
  #teacher-app #panel-duty-subject-openclass .duty-toolbar :is(input,select) { flex: 1; width: 0; min-height: 42px; }
  #teacher-app .tp-mobile-records .perf-input { width: 100% !important; }
  html.tablet-page-teacher-route .el-overlay-dialog { padding: 12px 0; }
  html.tablet-page-teacher-route .el-dialog { width: calc(100vw - 24px) !important; max-width: 640px !important; max-height: calc(var(--tp-visual-height, 100dvh) - 24px); margin: 0 auto !important; display: flex; flex-direction: column; overflow: hidden; padding: 16px !important; }
  html.tablet-page-teacher-route .el-dialog__header { flex: 0 0 auto; padding: 0 32px 12px 0 !important; }
  html.tablet-page-teacher-route .el-dialog__body { min-height: 0; max-height: none !important; flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 14px 0 !important; }
  html.tablet-page-teacher-route .el-dialog__footer { flex: 0 0 auto; padding: 12px 0 0 !important; }
  html.tablet-page-teacher-route .el-dialog__footer :is(.el-button,.btn) { min-height: 42px; margin: 4px 4px 0 0; white-space: normal; }
  html.tablet-page-teacher-route .el-drawer { max-width: 100vw !important; width: 100% !important; max-height: var(--tp-visual-height, 100dvh); }
  html.tablet-page-teacher-route .el-message-box { max-width: calc(100vw - 24px); }
  html.tablet-page-teacher-route :is(.el-dialog,.el-drawer) .el-form-item { display: flex; flex-direction: column; align-items: stretch; }
  html.tablet-page-teacher-route :is(.el-dialog,.el-drawer) .el-form-item__label { width: auto !important; height: auto; padding: 0 0 6px !important; text-align: left; justify-content: flex-start; line-height: 1.5; }
  html.tablet-page-teacher-route :is(.el-dialog,.el-drawer) .el-form-item__content { width: 100%; min-width: 0; margin-left: 0 !important; }
  html.tablet-page-teacher-route :is(.el-dialog,.el-drawer) :is(.el-input,.el-select,.el-textarea) { width: 100%; max-width: 100%; }
  html.tablet-page-teacher-route :is(.el-dialog,.el-drawer) .el-input__inner { font-size: 16px; }
  html.tablet-page-teacher-route :is(.exercise-manage,.tag-manage) { margin: 12px !important; padding: 12px !important; min-width: 0; max-width: calc(100% - 24px); box-sizing: border-box; }
  html.tablet-page-teacher-route :is(.action-bar,.left-actions,.right-actions,.tag-actions,.tag-manage .card-header) { flex-wrap: wrap; gap: 8px; }
  html.tablet-page-teacher-route .filter-select { width: 100% !important; }
  html.tablet-page-teacher-route :is(.exercise-manage,.tag-manage) .el-form--inline { display: flex; flex-direction: column; align-items: stretch; }
  html.tablet-page-teacher-route :is(.exercise-manage,.tag-manage) .el-form-item { margin-right: 0; }
  html.tablet-page-teacher-route :is(.exercise-manage,.tag-manage) .el-select { width: 100% !important; }
  html.tablet-page-teacher-route .el-pagination { max-width: 100%; justify-content: flex-start; flex-wrap: wrap; row-gap: 8px; }
  html.tablet-page-teacher-route .el-card { max-width: 100%; min-width: 0; }
  html.tablet-page-teacher-route :is(.cx-toolbar,.cx-filter-row,.cx-btn-row,.cx-toolbar-row) { flex-wrap: wrap; gap: 8px; }
  html.tablet-page-teacher-route .cx-toolbar > * { max-width: 100%; }
  html.tablet-page-teacher-route :is(.cx-workspace,.cx-workspace-master) { grid-template-columns: minmax(0,1fr) !important; }
  html.tablet-page-teacher-route .cx-side { max-height: 240px; overflow: auto; }
  html.tablet-page-teacher-route .cx-sidebar { width: 100% !important; flex: 0 0 auto !important; max-height: 140px; overflow: auto; }
  html.tablet-page-teacher-route .cx-topbar { padding: 10px 12px; flex-wrap: wrap; gap: 8px; }
  html.tablet-page-teacher-route .cx-page-body { padding: 12px; }
  #teacher-app .modal-panel, #teacher-app dialog[open] { max-height: calc(var(--tp-visual-height, 100dvh) - 24px) !important; }
}

@media (max-width: 720px), (pointer: coarse) and (max-height: 500px) {
  html.tablet-page-teacher-route .modal:not([hidden]) { padding: 12px; }
  html.tablet-page-teacher-route .modal-panel { box-sizing: border-box; width: min(100%,640px) !important; min-width: 0 !important; max-width: calc(100vw - 24px) !important; max-height: calc(var(--tp-visual-height,100dvh) - 24px) !important; overflow: auto; margin: auto; padding: 16px !important; }
  html.tablet-page-teacher-route .modal-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  html.tablet-page-teacher-route .modal-actions .btn { min-height: 42px; white-space: normal; flex: 1 1 120px; }
  html.tablet-page-teacher-route .eve-swap-toolbar { display: grid; grid-template-columns: 1fr !important; gap: 8px; }
  html.tablet-page-teacher-route .eve-swap-toolbar :is(input,select,label) { width: 100% !important; min-width: 0; }
  html.tablet-page-teacher-route .eve-swap-grid { grid-template-columns: 1fr !important; max-width: 100%; }
  #teacher-app .duty-evening-toolbar { flex-wrap: wrap; gap: 8px; }
  #teacher-app .duty-evening-week-nav { flex-wrap: wrap; min-width: 0; }
  #teacher-app .duty-evening-board__body { max-width: 100%; overflow: auto; -webkit-overflow-scrolling: touch; }
  #teacher-app .duty-subj-board-wrap { max-width: 100%; overflow-x: auto; }
  #teacher-app .duty-demo-modal-panel--wide { width: 100% !important; }
  html.tablet-page-teacher-route .teacher-login-page { height: auto; min-height: 100dvh; overflow-y: auto; padding-bottom: max(18px,env(safe-area-inset-bottom)); }
}

@media (max-width: 720px), (pointer: coarse) and (max-height: 500px) {
  #teacher-app :is(#panel-schedule #timetableContainer, #modalLesson #modalLessonTimetable) .tp-mobile-day-cards[data-mobile-view=day] > tbody > tr { height: auto !important; min-height: 0 !important; }
  #teacher-app :is(#panel-schedule #timetableContainer, #modalLesson #modalLessonTimetable) .tp-mobile-day-cards[data-mobile-view=day] > tbody > tr > td { position: static !important; inset: auto !important; height: auto !important; min-height: 0; background: transparent !important; box-shadow: none !important; }
  #teacher-app :is(#panel-schedule #timetableContainer, #modalLesson #modalLessonTimetable) .tp-mobile-day-cards[data-mobile-view=day] > tbody > tr > td.period { display: flex; align-items: baseline; gap: 8px; width: 100% !important; background: none !important; border: 0 !important; border-radius: 0; padding: 0 !important; }
  #teacher-app :is(#panel-schedule #timetableContainer, #modalLesson #modalLessonTimetable) .tp-mobile-day-cards[data-mobile-view=day] :is(tr,td.period)::before,
  #teacher-app :is(#panel-schedule #timetableContainer, #modalLesson #modalLessonTimetable) .tp-mobile-day-cards[data-mobile-view=day] :is(tr,td.period)::after { display: none !important; }
  #teacher-app :is(#panel-schedule #timetableContainer, #modalLesson #modalLessonTimetable) .tp-mobile-day-cards[data-mobile-view=day] .lesson-cell { min-height: 32px !important; }
  #teacher-app :is(#panel-schedule #timetableContainer, #modalLesson #modalLessonTimetable) .tp-mobile-day-cards[data-mobile-view=day] .lesson-block { box-shadow: none !important; border-radius: 8px; }
  #teacher-app .tp-mobile-help { margin: 0 0 14px; color: #748299; font-size: 13px; }
  #teacher-app .tp-mobile-help > summary { min-height: 36px; padding: 7px 0; cursor: pointer; }
  #teacher-app .tp-mobile-help p { font-size: 13px; line-height: 1.65; margin: 8px 0; }
}
@media (min-width: 721px) and (min-height: 501px) {
  #teacher-app .tp-mobile-help > summary { display: none; }
  #teacher-app .tp-mobile-help { display: contents; }
}

@media (max-width: 720px), (pointer: coarse) and (max-height: 500px) {
  #teacher-app :is(#panel-schedule #timetableContainer, #modalLesson #modalLessonTimetable) table.tp-mobile-day-cards[data-mobile-view=day] { width: 100% !important; min-width: 0 !important; max-width: 100% !important; table-layout: auto !important; }
  #teacher-app :is(#panel-schedule #timetableContainer, #modalLesson #modalLessonTimetable) .tp-mobile-day-cards[data-mobile-view=day] > tbody { width: 100% !important; min-width: 0 !important; max-width: 100% !important; }
  #teacher-app :is(#panel-schedule #timetableContainer, #modalLesson #modalLessonTimetable) .tp-mobile-day-cards[data-mobile-view=day] > tbody > tr { width: 100% !important; min-width: 0 !important; max-width: 100% !important; }
  #teacher-app :is(#panel-schedule #timetableContainer, #modalLesson #modalLessonTimetable) .tp-mobile-day-cards[data-mobile-view=day] td.period { width: 100% !important; min-width: 0 !important; max-width: none !important; white-space: nowrap !important; }
  #teacher-app :is(#panel-schedule #timetableContainer, #modalLesson #modalLessonTimetable) .tp-mobile-day-cards[data-mobile-view=day] .period-time { max-width: none !important; white-space: nowrap !important; }
  #teacher-app :is(#panel-schedule #timetableContainer, #modalLesson #modalLessonTimetable) .tp-mobile-day-cards[data-mobile-view=day] .timetable-break-row { display: none !important; }
  #teacher-app :is(#panel-schedule #timetableContainer, #modalLesson #modalLessonTimetable) .tp-mobile-day-cards[data-mobile-view=day] .day-past .lesson-block { opacity: 1; color: #64748b; }
}

@media (max-width: 720px), (pointer: coarse) and (max-height: 500px) {
  html.tablet-page-teacher-route .modal:not([hidden]) { top: var(--tp-visual-top,0px) !important; bottom: auto !important; left: 0; right: 0; height: var(--tp-visual-height,100dvh) !important; box-sizing: border-box; }
  html.tablet-page-teacher-route .el-overlay-dialog { top: var(--tp-visual-top,0px) !important; bottom: auto !important; height: var(--tp-visual-height,100dvh) !important; box-sizing: border-box; }
  #teacher-app dialog[open] { top: calc(var(--tp-visual-top,0px) + 12px) !important; bottom: auto !important; margin-top: 0 !important; }
  html.tablet-page-teacher-route .el-drawer { top: var(--tp-visual-top,0px) !important; bottom: auto !important; height: var(--tp-visual-height,100dvh) !important; }
}

@media (max-width: 720px), (pointer: coarse) and (max-height: 500px) {
  html.tablet-page-teacher-route .teacher-launcher-layer { top: var(--tp-visual-top,0px); bottom: auto; height: var(--tp-visual-height,100dvh); }
  html.tablet-page-teacher-route .teacher-launcher-panel { display: flex; flex-direction: column; height: 100%; max-height: 100%; }
  html.tablet-page-teacher-route :is(.teacher-launcher-head,.teacher-launcher-search,.teacher-launcher-tabs) { flex-shrink: 0; }
  html.tablet-page-teacher-route .teacher-launcher-body { flex: 1 1 auto; min-height: 0; height: auto; max-height: none; overflow: auto; }
  html.tablet-page-teacher-route .modal-panel :is(input:not([type=checkbox]):not([type=radio]),select,textarea) { min-width: 0; max-width: 100%; font-size: 16px; }
}

/* The legacy picker removes inner scrolling. Keep week scrolling inside the
   constrained mobile table, while the existing modal handles vertical scroll. */
@media (max-width: 720px), (pointer: coarse) and (max-height: 500px) {
  #teacher-app #modalLesson #modalLessonTimetable.tp-mobile-calendar {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y pinch-zoom !important;
  }
}