/* Integrated portal only. Desktop layouts and application behavior are unchanged. */
@media (max-width: 1180px) {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { min-width: 0; }
  main, .main, .detail, .course-detail, .course-form-wrap,
  .editor, .editor-main, .editor-aside, .panel, .field,
  .standalone-main, .standalone-meta, .detail-copy,
  .sm-item, .media-item, .course-media-item { min-width: 0; }
  input, textarea, select { max-width: 100%; box-sizing: border-box; }
  textarea { overflow-wrap: anywhere; }
  .course-editor input, .course-editor textarea, .course-form input,
  .course-form textarea, .course-form select, .standalone-field input,
  .standalone-field textarea, .field input, .field textarea, .field select,
  .toolbar input, .toolbar select, .library-hero input, .purchase-row input {
    font-size: 16px !important;
  }
  .course-detail, .standalone-detail, .detail, .course-editor,
  .course-form-wrap, .editor, .panel { overflow-wrap: anywhere; }
  .course-detail img, .standalone-detail img, .detail img,
  .media-item img, .sm-item img { max-width: 100%; }
  .media-section video, .media-section audio, #oss-videos video,
  .sm-item video, .sm-item audio, .course-media-item video,
  .course-media-item audio { width: 100%; max-width: 100%; }
  .youtube-section iframe, .sm-embed iframe, .course-youtube-display iframe {
    max-width: 100%; width: 100%; aspect-ratio: 16 / 9; height: auto;
  }
  .media-item strong, .media-item a, .sm-item strong, .sm-item a,
  .standalone-record dd, .standalone-record dd a, .record .row span,
  .record .row a, .course-media-item strong { overflow-wrap: anywhere; min-width: 0; }
  .table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #app .panel > .table-wrap table { min-width: 680px; }
  #app .editor-aside .table-wrap table { min-width: 0; table-layout: fixed; }
  #app .editor-aside .table-wrap td { overflow-wrap: anywhere; }
}

@media (max-width: 1024px) {
  /* A full-width navigation row keeps every destination accessible. */
  body .site-nav {
    display: grid !important; grid-template-columns: minmax(0, 1fr) auto;
    height: auto !important; min-height: 76px; gap: 8px 12px; padding: 12px 20px 0 !important;
  }
  body .site-nav .site-nav-brand { min-width: 0; margin: 0; }
  body .site-nav .site-nav-account { margin: 0; white-space: nowrap; }
  body .site-nav .site-nav-links {
    position: static !important; transform: none !important;
    grid-column: 1 / -1; grid-row: 2; display: flex !important;
    min-width: 0; width: 100%; max-width: 100%; overflow-x: auto;
    margin: 0 !important; gap: 16px !important; justify-content: flex-start !important;
    -webkit-overflow-scrolling: touch;
  }
  body .site-nav .site-nav-links a {
    flex: 0 0 auto; height: auto !important; min-height: 44px;
    white-space: nowrap; display: flex; align-items: center; padding: 8px 0 !important;
  }
  body .site-head, body .library-header {
    display: grid !important; grid-template-columns: minmax(0, 1fr) auto;
    height: auto !important; min-height: 76px; gap: 8px 12px;
    padding: 12px 20px 0 !important;
  }
  body .site-head .site-title { width: auto !important; min-width: 0; }
  body .site-head .top-nav, body .library-header .global-nav {
    position: static !important; transform: none !important;
    grid-column: 1 / -1; grid-row: 2; display: flex !important;
    width: 100% !important; min-width: 0; max-width: 100%;
    margin: 0 !important; gap: 20px !important; overflow-x: auto;
    -webkit-overflow-scrolling: touch; justify-content: flex-start !important;
  }
  body .site-head .top-nav a, body .library-header .global-nav a {
    flex: 0 0 auto; height: auto !important; min-height: 44px;
    display: flex; align-items: center; white-space: nowrap; padding: 8px 0 !important;
  }
  body .site-head .language, body .library-header .language {
    display: flex !important; position: static !important; transform: none !important;
    margin: 0 !important; width: auto; min-width: 0;
  }
  body header.head { height: auto !important; min-height: 76px !important;
    flex-wrap: wrap; gap: 12px; padding: 16px 20px !important; }
  body header.head .brand { flex: 1 1 180px !important; min-width: 0; max-width: none; }
  body header.head .nav { position: static !important; transform: none !important;
    display: flex !important; flex: 1 0 100%; order: 3;
    width: 100%; min-width: 0; max-width: 100%; overflow-x: auto;
    margin: 0 !important; gap: 20px !important; -webkit-overflow-scrolling: touch; }
  body header.head .nav a { flex: 0 0 auto; white-space: nowrap; min-height: 44px;
    display: flex; align-items: center; padding: 8px 0 !important; }
  body header.head .lang-switch { position: static !important; transform: none !important; }
  .standalone-layout { grid-template-columns: minmax(0, 1fr) !important; gap: 28px !important; }
  .standalone-cover { min-height: 0 !important; width: 100%; max-width: 520px; margin: 0 auto; }
  .standalone-cover img { max-height: 560px; object-fit: contain; }
  .detail .record { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .detail .record .cover { min-height: 0; max-width: 520px; width: 100%; margin: 0 auto; }
  .detail .record .cover img { max-height: 560px; object-fit: contain; }
  .detail-backdrop { padding: 16px; }
  .detail-backdrop .detail-card { max-width: 100%; max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px); }
  .detail .table .row { grid-template-columns: minmax(100px, 30%) minmax(0, 1fr); }
}

@media (max-width: 700px) {
  body .site-head, body .library-header, body .site-nav { padding: 12px 16px 0 !important; }
  body .site-head .site-title { font-size: 14px; }
  body .site-head .top-nav, body .library-header .global-nav { gap: 16px !important; }
  body .main { padding-left: 16px; padding-right: 16px; }
  .course-detail .detail-head { flex-wrap: wrap; align-items: flex-start; }
  .course-detail h1 { font-size: 26px; line-height: 1.4; }
  .course-detail .edit-toggle { flex: 0 0 auto; min-height: 44px; }
  .course-detail .course-card.category-course-detail { padding: 12px !important; }
  #info.course-info.target-course-vertical .category-course-meta dt,
  #info.course-info.target-course-vertical .category-course-meta dd { padding: 14px 8px !important; }
  #info.course-info.target-course-vertical .category-course-content { padding: 18px 14px !important; }
  .media-section, .youtube-section, .course-editor { padding: 16px; }
  .course-editor .sm-youtube, .course-editor .sm-uploads { padding: 12px; }
  .sm-upload-controls input, .cover-upload-actions input { width: 100%; min-width: 0; }
  .course-form-actions, .editor-actions, .standalone-form-actions,
  .detail-actions, .detail .actions { flex-wrap: wrap; }
  .standalone-main { padding-left: 16px; padding-right: 16px; }
  .standalone-title-row { align-items: stretch; flex-direction: column; }
  .standalone-title-row h1 { font-size: 27px; overflow-wrap: anywhere; }
  .standalone-record > div { grid-template-columns: minmax(90px, 32%) minmax(0, 1fr); }
  .standalone-record dt, .standalone-record dd { padding: 13px 10px; }
  .detail-backdrop .detail-card { grid-template-columns: minmax(0, 1fr); }
  .detail-cover { min-height: 0; }
  .detail-copy { padding: 26px 18px; }
  .detail-copy dl > div { gap: 12px; }
  .detail-copy dt, .detail-copy dd { min-width: 0; overflow-wrap: anywhere; }
  .library-hero { flex-direction: column; align-items: stretch; gap: 24px; }
  .library-hero label { width: 100%; max-width: 100%; }
  .library-brand h1 { font-size: 15px; }
  .library-brand p { letter-spacing: 1px; }
  /* Keep admin records legible, with scrolling confined to each table. */
  #app .layout > .main { padding-left: 16px; padding-right: 16px; }
  #app .pagehead { flex-direction: column; align-items: stretch; }
  #app .pagehead > .actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  #app .pagehead > .actions button { min-width: 0; min-height: 44px; padding: 11px 8px; }
  #app .toolbar { flex-direction: column; }
  #app .toolbar input, #app .toolbar select { width: 100%; min-width: 0; }
  #app .panel { padding: 14px; }
  #app .panel > .table-wrap { border: 1px solid #e1e7df; }
  #app .panel > .table-wrap table { min-width: 680px; }
  #app .panel > .table-wrap th, #app .panel > .table-wrap td { padding: 14px 12px; }
  #app #course-list th:first-child, #app #course-list td:first-child { min-width: 110px; white-space: nowrap; }
  #app #course-list td:last-child { white-space: nowrap; }
  #app .editor-aside .table-wrap table { min-width: 0; }
  #app .editor-aside .table-wrap td { padding: 12px 8px; }
  #app .sidebar .nav { -webkit-overflow-scrolling: touch; }
  #app .sidebar .nav button { min-height: 44px; }
  #app .topbar { height: auto; min-height: 60px; padding: 10px 0; }
  #app .stats { grid-template-columns: 1fr; }
  #app .stat strong { margin: 8px 0; }
  #app .editor, #app .editor-main, #app .editor-aside { min-width: 0; }
  #app .editor input, #app .editor textarea, #app .editor select { font-size: 16px; }
  #app .image-field { flex-wrap: wrap; }
  main > .heading h1 { font-size: 27px; }
  main > .stores { gap: 16px; }
  #oss-panel, #drive-panel { padding: 16px; }
  .panel-head > div { min-width: 0; max-width: 100%; }
  .panel-head > div > button { margin-bottom: 8px; min-height: 44px; }
  .upload { min-width: 0; overflow-wrap: anywhere; }
  .upload button, .store button { min-height: 44px; }
  .drive-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
  .drive-more { min-width: 36px; min-height: 36px; }
  .oss-context-menu, .drive-context-menu { max-width: calc(100vw - 16px); }
  dialog { max-width: calc(100vw - 24px); box-sizing: border-box; }
}

@media (pointer: coarse) and (max-width: 1366px) {
  input, textarea, select { font-size: 16px !important; }
  button, .btn, .standalone-action { touch-action: manipulation; }
  .course-form-actions button, .editor-actions button, .standalone-action,
  .sm-upload-controls button, .sm-youtube-controls button, #course-media-dropzone {
    min-height: 44px;
  }
}