/* Shared mobile cards, controls, tabs, loading, and sheets. */
@media (max-width: 768px) {
  /* Shared card language */
  .result-card,
  .study-card,
  .exercise-card,
  .grammar-card,
  .sentence-card,
  .profile-card,
  .admin-card,
  .about-card,
  .log-item,
  .review-card,
  .stat-card,
  .settings-card,
  .word-card,
  .quiz-card {
    border-radius: var(--mobile-radius-lg) !important;
    border-color: color-mix(in srgb, var(--border) 80%, transparent) !important;
    box-shadow: 0 12px 34px rgba(24,39,75,.055) !important;
  }

  button,
  .btn,
  input,
  textarea,
  select,
  .mode-tab,
  .tab-btn {
    border-radius: 16px;
  }

  /* Common page tabs / controls */
  .mode-tabs,
  .tab-bar,
  .filter-tabs {
    padding: 5px !important;
    gap: 4px !important;
    border-radius: 20px !important;
    background: color-mix(in srgb, var(--surface) 90%, transparent) !important;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .mode-tabs::-webkit-scrollbar,
  .tab-bar::-webkit-scrollbar,
  .filter-tabs::-webkit-scrollbar { display: none; }

  .modal-panel {
    top: auto !important;
    left: 10px !important;
    right: 10px !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-width: none !important;
    padding: 30px 20px 20px !important;
    border-radius: 30px !important;
    transform: none !important;
    animation: mobile-sheet-in .3s var(--ease-out) both !important;
  }
  .modal-input { min-height: 50px; border-radius: 17px !important; }
  .modal-panel .btn-full { min-height: 50px; border-radius: 17px !important; }
  /* Shared cards */
  body .result-card,
  body .exercise-card,
  body .grammar-card,
  body .sentence-card,
  body .profile-card,
  body .admin-card,
  body .about-card,
  body .log-item {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 26px !important;
    box-shadow: 0 12px 34px rgba(24,39,75,.07) !important;
  }

  /* Study */
  body #study-container,
  body #study-heatmap {
    padding: 20px 16px !important;
    margin-top: 0 !important;
    margin-bottom: 16px !important;
  }
  body .mode-tabs,
  body .sub-tabs { gap: 7px !important; overflow-x: auto; justify-content: flex-start !important; scrollbar-width: none; }
  body .mode-tab,
  body .sub-tab,
  body .filter-pill { min-height: 42px; border-radius: 16px !important; white-space: nowrap; }
  body .quiz-options { grid-template-columns: 1fr !important; }
  body .dict-input-row { flex-direction: column !important; }

  /* Exercise */
  body .exercise-card { padding: 20px 16px !important; margin-top: 0 !important; }
  body .exercise-buttons { flex-direction: column !important; }
  body .exercise-buttons .btn,
  body .exercise-buttons button { width: 100%; min-height: 48px; border-radius: 17px !important; }
  body #level-pills,
  body #type-pills { overflow-x: auto; max-width: 100%; padding-bottom: 2px; scrollbar-width: none; }

  /* Grammar / sentence chat */
  body .grammar-layout,
  body .sentence-layout { display: block !important; }
  body .grammar-history,
  body .sentence-history { display: none !important; }
  body .grammar-card,
  body .sentence-card { min-height: calc(100dvh - 110px); }
  body .grammar-header,
  body .sentence-header { padding: 18px 16px 0 !important; }
  body .grammar-messages,
  body .sentence-messages {
    min-height: 42dvh !important;
    max-height: none !important;
    padding: 16px !important;
  }
  body .grammar-msg,
  body .sentence-msg { max-width: 92% !important; border-radius: 18px !important; }
  body .grammar-input,
  body .sentence-input {
    position: sticky;
    bottom: 0;
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom)) !important;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }
  body .grammar-input input,
  body .sentence-input input { min-width: 0; min-height: 48px; border-radius: 18px !important; }
  body .grammar-input button,
  body .sentence-input button { min-width: 64px; border-radius: 18px !important; padding: 10px 15px !important; }
  body .grammar-quick { overflow-x: auto; flex-wrap: nowrap !important; padding: 0 16px 14px !important; scrollbar-width: none; }

  /* Profile / admin / info pages */
  body .profile-card,
  body .admin-card { padding: 20px 16px !important; }
  body .admin-header,
  body .profile-header { align-items: flex-start !important; }
  body table { display: block; width: 100%; overflow-x: auto; }

  .assistant-card, .profile-card, .review-card { border-radius: var(--mobile-radius-lg) !important; }
  .assistant-messages { min-height: 42dvh; }
  .assistant-input { position: sticky; bottom: 0; padding-bottom: calc(12px + env(safe-area-inset-bottom)); background: var(--surface); }
  .assistant-input textarea, .modal-input, input, textarea { font-size: max(16px, 1em); }
  button, .btn, .mode-tab, .sub-tab, .profile-tab { min-height: 44px; }
  .filter-pill, .mode-tab, .sub-tab { min-width: 44px !important; min-height: 44px !important; }
  .dictionary-entry-actions :is(.speak-btn, .bookmark-btn, .copy-btn) { min-width: 44px !important; min-height: 44px !important; }
  .modal-panel { max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 20px); overflow-y: auto; }
  .toast { border-radius: var(--mobile-radius-md); }
  .empty-state { padding: 28px 12px; }
}