@media (max-width: 1100px) {
  .mk-hero {
    grid-template-columns: 1fr;
  }

  .mk-steps-grid {
    grid-template-columns: 1fr;
  }

  .mk-grid,
  .mk-grid.mk-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 800px) {
  .mk-nav {
    flex-wrap: wrap;
    justify-content: center;
  }

  .mk-nav-links {
    order: 3;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }

  .mk-stats {
    grid-template-columns: 1fr;
  }

  .mk-kpi-strip {
    grid-template-columns: 1fr 1fr;
  }

  .mk-grid,
  .mk-grid.mk-grid-2,
  .mk-grid.mk-grid-3 {
    grid-template-columns: 1fr;
  }

  .mk-hero-actions .btn {
    width: 100%;
  }
}
@media (max-width: 1100px) {
  .app-shell-auth {
    grid-template-columns: 1fr;
  }

  .app-top-header {
    position: static;
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .app-top-left {
    width: 100%;
  }

  .app-top-chips {
    justify-content: flex-start;
    width: 100%;
  }

  .app-left-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100vh;
    width: 270px;
    border-radius: 0 18px 18px 0;
    min-height: 100vh;
    transform: translateX(-105%);
    transition: transform 0.24s ease;
    z-index: 1100;
  }

  body.sidebar-open .app-left-sidebar {
    transform: translateX(0);
  }

  .sidebar-backdrop {
    display: block;
  }

  body.sidebar-open .sidebar-backdrop {
    opacity: 1;
    pointer-events: auto;
  }
}
@media (max-width: 768px) {
  .sidebar-toggle-btn {
    width: 36px;
    height: 36px;
  }

  .app-top-header {
    padding: 10px;
  }

  .app-top-chip {
    width: 34px;
    min-width: 34px;
    height: 34px;
    font-size: 0.72rem;
  }

  .app-top-chip i {
    width: 20px;
    height: 20px;
  }

  .balance-warning-inner {
    flex-direction: column;
    align-items: stretch;
  }

  .balance-warning-actions {
    width: 100%;
  }

  .balance-warning-actions .btn {
    flex: 1 1 auto;
  }
}
@media (max-width: 1100px) {
  .account-layout,
  .settings-layout,
  .payment-layout {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  .account-avatar-xl,
  .account-photo-preview {
    width: 96px;
    height: 96px;
  }

  .account-actions {
    justify-content: stretch;
  }

  .account-actions .btn {
    width: 100%;
  }

  .usage-chart-wrap {
    min-height: 260px;
  }
}
@media (max-width: 992px) {
  .texts-hero-body {
    flex-direction: column;
    align-items: flex-start;
  }

  .texts-hero-actions {
    width: 100%;
    justify-content: flex-start;
  }
}
@media (max-width: 992px) {
  .reading-hero {
    padding: 16px;
  }

  .reading-hero-main {
    flex-direction: column;
    align-items: stretch;
  }

  .reading-hero-progress {
    min-width: 0;
    width: 100%;
  }

  .reading-progress-ring {
    width: 96px;
    height: 96px;
  }

  .reading-progress-ring-inner {
    width: 74px;
    height: 74px;
    font-size: 1.02rem;
  }
}
@media (max-width: 576px) {
  .reading-hero-title {
    margin-top: 12px;
    font-size: 1.34rem;
  }

  .reading-hero-controls {
    display: grid;
    grid-template-columns: 1fr;
  }

  .reading-switch,
  .reading-control,
  .detect-words-btn {
    width: 100%;
  }

  .font-size-control {
    justify-content: space-between;
  }
}
@media (max-width: 768px) {
  .paragraph-reading-actions {
    align-items: stretch;
  }

  .start-paragraph-recording,
  .stop-paragraph-recording,
  .cancel-paragraph-recording,
  .play-user-recording,
  .repeat-user-recording {
    width: 100%;
    justify-content: center;
  }

  .paragraph-reading-status-wrap {
    width: 100%;
  }
}
@media (max-width: 768px) {
  .match-word-title {
    font-size: 1.18rem;
  }

  .match-word-example {
    font-size: 0.9rem;
  }

  .match-meaning-text {
    font-size: 0.95rem;
  }

  .review-card {
    padding: 14px;
  }

  .review-card-header {
    flex-direction: column;
    align-items: stretch;
  }

  .review-content-grid {
    grid-template-columns: 1fr;
  }

  .review-example-block {
    grid-column: auto;
  }

  .review-actions > * {
    width: 100%;
  }

  .review-actions .btn {
    width: 100%;
  }
}
@media (max-width: 992px) {
  .flashcard-grid {
    grid-template-columns: 1fr;
  }

  .flashcard-info-grid {
    grid-template-columns: 1fr;
  }

  .flashcard-top-row {
    flex-direction: column;
    align-items: stretch;
  }
}
@media (max-width: 992px) {
  .dashboard-page {
    --dash-section-space: 14px;
  }

  .dashboard-hero {
    grid-template-columns: 1fr;
  }

  .dashboard-hero-side {
    align-items: flex-start;
  }

  .dashboard-split-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-heatmap-shell {
    --heat-cell-size: 14px;
    --heat-cell-gap: 3px;
    --heat-label-width: 24px;
  }
}
@media (max-width: 768px) {
  .dashboard-page {
    --dash-section-space: 12px;
  }

  .dashboard-hero {
    padding: 16px;
  }

  .hero-mastery-ring {
    width: 154px;
  }

  .hero-mastery-value {
    font-size: 2.1rem;
  }

  .hero-mastery-help {
    font-size: 0.8rem;
  }

  .dashboard-metric-card {
    padding: 14px;
  }

  .dashboard-panel {
    padding: 14px;
  }

  .dashboard-metrics-grid {
    grid-template-columns: 1fr;
  }

  .metric-value {
    font-size: 1.4rem;
  }

  .trend-summary {
    grid-template-columns: 1fr;
  }

  .trend-bar-wrap {
    height: 94px;
  }

  .panel-meta {
    white-space: normal;
  }

  .heatmap-panel-header {
    align-items: flex-start;
  }

  .heatmap-year-form {
    margin-left: 0;
    width: 100%;
    align-items: flex-start;
  }

  .heatmap-year-controls {
    width: 100%;
  }

  .heatmap-year-input {
    width: 100px;
  }

  .dashboard-heatmap-shell {
    --heat-cell-size: 12px;
    --heat-cell-gap: 3px;
    --heat-label-width: 24px;
  }
}
@media (max-width: 768px) {
  .exam-paper {
    padding: 16px;
  }

  .exam-copy,
  .exam-part {
    padding-left: 14px;
  }

  .exam-paper-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Mobile experience layer: clearer hierarchy, touch-friendly controls, and safer viewport spacing. */
@media (max-width: 1100px) {
  body.sidebar-open {
    overflow: hidden;
  }

  main.container-fluid {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
    padding-bottom: calc(1.25rem + env(safe-area-inset-bottom));
  }

  .app-shell {
    padding: 0;
  }

  .app-left-sidebar {
    width: min(86vw, 320px);
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }

  .app-top-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
    gap: 8px;
    padding-bottom: 4px;
  }

  .app-top-chips::-webkit-scrollbar {
    height: 6px;
  }

  .app-top-chip {
    scroll-snap-align: start;
    flex: 0 0 auto;
    min-width: 44px;
    min-height: 44px;
    padding: 0 12px 0 10px;
  }

  .app-top-chip i {
    width: 24px;
    height: 24px;
  }

  .app-top-chip .chip-value {
    font-size: 0.9rem;
  }

  .app-top-chip .chip-text {
    display: none;
  }

  .chip-user,
  .chip-best,
  .chip-actions,
  .chip-words,
  .chip-date {
    display: none;
  }

  .card,
  .modal-content {
    border-radius: 16px;
  }
}

@media (max-width: 768px) {
  .sidebar-toggle-btn {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }

  .btn,
  .form-control,
  .form-select,
  .input-group-text,
  .app-sidebar-link,
  .app-sidebar-sublink,
  .app-sidebar-summary,
  .app-sidebar-footer-btn {
    min-height: 44px;
  }

  .btn {
    font-weight: 700;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
  }

  input.form-control,
  select.form-select,
  textarea.form-control,
  .ts-wrapper.single .ts-control {
    font-size: 16px;
  }

  .app-top-header {
    gap: 10px;
    padding: 12px 12px 10px 56px;
    border-radius: 20px;
    border-color: #cfe3d9;
    background:
      radial-gradient(circle at 100% 0%, rgba(42, 123, 228, 0.12), transparent 40%),
      radial-gradient(circle at 0% 100%, rgba(31, 157, 98, 0.14), transparent 45%),
      linear-gradient(132deg, #ffffff 0%, #f6fcf9 56%, #ecf7f1 100%);
    box-shadow: 0 14px 26px rgba(15, 88, 56, 0.12);
  }

  .app-top-left {
    width: 100%;
    min-height: 36px;
  }

  .app-top-page-name {
    font-size: 1.24rem;
    line-height: 1.05;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .app-top-chips {
    margin-top: 4px;
    padding-bottom: 6px;
    gap: 6px;
  }

  .app-top-chip {
    min-width: 46px;
    min-height: 40px;
    height: 40px;
    padding: 0 10px 0 8px;
    border-color: #cfe2d8;
    background: rgba(255, 255, 255, 0.94);
  }

  .app-top-chip i {
    width: 22px;
    height: 22px;
    font-size: 0.8rem;
  }

  .app-top-chip .chip-value {
    font-size: 0.83rem;
  }

  .chip-balance .chip-value {
    max-width: 86px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .paragraph-actions {
    width: auto;
    align-self: flex-end;
    justify-content: flex-end;
  }

  .paragraph-action-btn {
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    border-radius: 12px;
    padding: 0;
    justify-content: center;
    gap: 0;
  }

  .paragraph-action-btn .btn-label {
    display: none;
  }

  .paragraph-action-btn .spinner-border {
    margin-left: 0 !important;
    width: 0.9rem;
    height: 0.9rem;
  }

  .content-wrapper,
  .reading-wrapper {
    max-width: 100%;
  }

  .table-responsive {
    overflow-x: auto;
    border-radius: 12px;
  }

  .modal-dialog {
    margin: 12px;
  }

}

@media (pointer: coarse) {
  .app-top-chip,
  .app-sidebar-link,
  .app-sidebar-sublink,
  .app-sidebar-summary,
  .page-link {
    min-height: 44px;
  }
}