@media (max-width: 760px) {
  html,
  body,
  #app {
    max-width: 100%;
    overflow-x: hidden;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  img,
  video,
  canvas,
  iframe,
  svg,
  input,
  textarea,
  select,
  button {
    max-width: 100%;
  }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    grid-template-columns: 1fr;
    gap: 10px;
    min-height: 0;
    padding: 10px 12px;
  }

  .workspace-hero,
  .page-head,
  .reader-head,
  .compact-head {
    width: auto;
    max-width: none;
    margin: 12px;
    padding: 18px 14px;
    border-radius: 20px;
  }

  .workspace-head,
  .page-head,
  .app-shell,
  .dashboard-layout,
  .student-management-workspace,
  .assignment-workbench,
  .calendar-layout,
  .fullcalendar-shell,
  .fullcalendar-shell.with-inspector,
  .user-admin-grid,
  .homework-page,
  .lesson-shell,
  .managed-students,
  .lesson-title-editor,
  .task-editor-grid,
  .assignment-form-grid,
  .user-form-grid,
  .settings-grid,
  .modal-grid,
  .schedule-form-grid,
  .topic-task-row,
  .user-row,
  .managed-student-button,
  .calendar-student,
  .access-course-button {
    grid-template-columns: 1fr !important;
    min-width: 0;
  }

  .brand,
  .session-box,
  .home-tabs,
  .workspace-actions,
  .course-actions,
  .calendar-toolbar,
  .calendar-controls,
  .form-actions,
  .lesson-actions,
  .student-actions {
    width: 100%;
    min-width: 0;
  }

  .session-box,
  .workspace-actions,
  .course-actions,
  .form-actions,
  .lesson-actions,
  .student-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .session-box > button,
  .workspace-actions > button,
  .workspace-actions > .course-actions button,
  .course-actions > button,
  .form-actions > button,
  .lesson-actions > button,
  .student-actions > button,
  .inline-form > .primary-button,
  .inline-form > .secondary-button,
  .inline-form > .danger-button {
    width: 100%;
    min-width: 0;
    justify-content: center;
    white-space: normal;
  }

  .workspace-head h1,
  .page-head h1,
  .reader-head h1,
  h1 {
    max-width: 100%;
    font-size: clamp(27px, 10vw, 36px);
    line-height: 1.08;
    overflow-wrap: anywhere;
  }

  .workspace-head p:not(.eyebrow),
  .page-head p,
  .reader-head p {
    max-width: 100%;
    font-size: 14px;
    line-height: 1.45;
  }

  .workspace-hero .section-hint,
  .section-hint {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 12px 13px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.35;
  }

  .workspace-hero .summary-cards,
  .summary-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .summary-card,
  .workspace-hero .summary-card {
    min-height: 86px;
    padding: 13px;
    border-radius: 16px;
  }

  .summary-card strong,
  .workspace-hero .summary-card strong {
    font-size: 28px;
    line-height: 1;
  }

  .course-list,
  .lesson-list,
  .form-wrap,
  .reader-body,
  .assignment-workbench,
  .calendar-page,
  .user-admin-grid,
  .managed-students,
  .student-management-workspace,
  .homework-page {
    width: auto;
    max-width: none;
    padding-inline: 12px;
  }

  .course-list {
    grid-template-columns: 1fr;
  }

  .course-card,
  .lesson-row,
  .reader-card,
  .homework-card,
  .inline-form,
  .student-access-card,
  .access-panel,
  .managed-student-list,
  .managed-student-detail,
  .calendar-sidebar,
  .schedule-inspector,
  .fullcalendar-shell {
    min-width: 0;
    border-radius: 18px;
  }

  .course-open {
    min-height: 210px;
    padding: 18px;
  }

  .course-open strong {
    font-size: 21px;
    overflow-wrap: anywhere;
  }

  .lesson-open {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 12px;
    width: 100%;
    padding: 14px;
    text-align: left;
  }

  .lesson-open > span {
    width: 38px;
    height: 38px;
  }

  .lesson-open strong {
    font-size: 17px;
    overflow-wrap: anywhere;
  }

  .lesson-open p,
  .lesson-open small {
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .lesson-delete {
    margin: 0 14px 14px;
  }

  .lesson-main .reader-head {
    padding: 18px 14px;
  }

  .lesson-main .section-hint {
    width: auto;
    max-width: none;
    margin: 10px 12px 0;
  }

  .lesson-step-bar {
    gap: 10px;
    padding: 12px;
    align-items: center;
  }

  .lesson-step-tabs {
    max-width: calc(100vw - 82px);
    scroll-padding-inline: 12px;
  }

  .lesson-step-tab {
    flex-basis: 142px;
    min-width: 142px;
    max-width: 142px;
    min-height: 50px;
    padding: 8px 10px;
  }

  .lesson-step-tab small {
    font-size: 11px;
  }

  .add-block-button {
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
  }

  .calendar-page {
    padding-inline: 10px;
  }

  .calendar-toolbar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: stretch;
  }

  .calendar-view-switch,
  .calendar-controls {
    width: 100%;
  }

  .calendar-view-switch {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .calendar-controls {
    grid-template-columns: 42px 1fr 42px !important;
  }

  .calendar-range-label {
    min-width: 0;
    text-align: center;
  }

  .fullcalendar-shell {
    overflow: auto;
  }

  .fc,
  .fc .fc-view-harness,
  .fc-scrollgrid {
    min-width: 720px;
  }

  .schedule-inspector {
    position: static;
    max-height: none;
  }

  .modal,
  .modal-panel,
  .dialog,
  .confirm-dialog {
    width: min(calc(100vw - 24px), 560px);
    max-width: calc(100vw - 24px);
  }
}

@media (max-width: 480px) {
  .workspace-hero,
  .page-head,
  .reader-head,
  .compact-head {
    margin: 8px;
    padding: 16px 12px;
  }

  .workspace-hero .summary-cards,
  .summary-cards {
    grid-template-columns: 1fr;
  }

  .workspace-head h1,
  .page-head h1,
  .reader-head h1,
  h1 {
    font-size: clamp(25px, 11vw, 32px);
  }

  .course-list,
  .lesson-list,
  .form-wrap,
  .reader-body,
  .assignment-workbench,
  .calendar-page,
  .user-admin-grid,
  .managed-students,
  .student-management-workspace,
  .homework-page {
    padding-inline: 8px;
  }

  .lesson-open {
    grid-template-columns: 36px minmax(0, 1fr);
    padding: 12px;
  }

  .lesson-open > span {
    width: 34px;
    height: 34px;
  }

  .lesson-step-tabs {
    max-width: calc(100vw - 72px);
  }

  .lesson-step-tab {
    flex-basis: 126px;
    min-width: 126px;
    max-width: 126px;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .lesson-step-tab strong {
    display: none;
  }

  .task-image-editor-head,
  .task-file-card,
  .task-attachment-link {
    align-items: stretch;
    flex-direction: column;
  }

  .task-file-card .danger-button,
  .task-attachment-link {
    width: 100%;
  }
}