:root {
  --mobile-bottom-nav-h: 68px;
}

/* 统一：避免横向滚动条 */
html,
body {
  overflow-x: hidden;
}

/* 触摸体验：按钮/输入更好点 */
button,
.btn,
.record-btn,
.clear-btn {
  touch-action: manipulation;
}

@media (max-width: 768px) {
  /* 关键兜底：彻底取消任何“窄列居中/最大宽度”限制，避免右侧留白 */
  .page-root,
  .app,
  .content,
  .dashboard,
  section.card {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 结构：侧栏改为底部栏 */
  .app {
    flex-direction: column;
  }

  .sidebar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: var(--mobile-bottom-nav-h);
    padding: 8px 10px;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    gap: 10px;
    background: rgba(255, 255, 255, 0.82);
    border-top: 1px solid rgba(226, 231, 235, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 60;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .sidebar .logo {
    display: none;
  }

  .sidebar button {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    font-size: 18px;
  }

  /* 兼容你们内联的康复库按钮 */
  .sidebar button.sidebar-btn-kf {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    border-radius: 14px !important;
  }

  /* 主内容：缩小边距，并给底部栏留出空间 */
  .content {
    padding: 14px 14px calc(var(--mobile-bottom-nav-h) + 18px) !important;
    align-items: stretch !important;
  }

  /* 覆盖部分页面的内联固定 padding */
  body .content {
    padding: 14px 14px calc(var(--mobile-bottom-nav-h) + 18px) !important;
    align-items: stretch !important;
  }

  /* 顶部栏：避免标题被搜索框挤到“丢字” */
  .topbar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .topbar .titles h1 {
    font-size: 20px !important;
    line-height: 1.2;
  }

  .topbar-right {
    width: 100%;
    gap: 10px;
  }

  .topbar-right input {
    min-width: 0 !important;
    width: 100%;
    flex: 1 1 auto;
    padding: 0 14px;
  }

  /* 许多页面用 .dashboard 两列网格：统一改为单列 */
  .dashboard {
    grid-template-columns: 1fr !important;
    justify-items: stretch !important;
  }

  /* 覆盖少量页面的两列自定义网格（例如 profile/rehab 内联） */
  body .dashboard {
    grid-template-columns: 1fr !important;
    justify-items: stretch !important;
  }

  /* 康复库：左右两卡在手机端堆叠，避免出现“左侧空白栏” */
  .left-card,
  .right-card {
    grid-column: 1 / -1 !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* 康复库病种卡：小屏时两列太挤，改为单列更舒服 */
  .disease-list {
    grid-template-columns: 1fr !important;
  }

  /* 一些页面用固定最大高度/宽度：弹窗更贴合手机 */
  .coach-modal {
    width: calc(100vw - 20px) !important;
    max-height: calc(100vh - 20px) !important;
    border-radius: 16px !important;
  }

  /* 首页动作指导弹窗：手机端更贴屏 */
  .action-guide-dialog {
    width: calc(100vw - 20px) !important;
    max-height: calc(100vh - 20px) !important;
    border-radius: 16px !important;
  }

  /* 首页：强制 hero / 任务卡单列铺满（避免被桌面栅格挤成“竖排字”） */
  .hero,
  .task-card,
  .cta-section {
    grid-column: 1 / -1 !important;
    min-height: 0 !important;
  }

  .hero {
    padding: 18px !important;
  }

  .task-card {
    padding: 18px !important;
  }

  /* 首页任务标题/标签：允许换行，不截断、不挤压 */
  .task-item label strong {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word;
  }

  /* 训练页等会有悬浮入口：避免被底部栏遮挡 */
  #shfKfFab {
    bottom: calc(var(--mobile-bottom-nav-h) + 18px) !important;
  }

  /* 常见按钮条（训练页/历史页）避免贴边 */
  .counter-actions-row,
  .coach-modal-actions {
    flex-wrap: wrap;
  }

  /* 文本与表单：更适合手机阅读与输入 */
  input,
  select,
  textarea {
    font-size: 16px; /* iOS 防止自动放大 */
  }

  /* 小屏列表/按钮：点击区域更舒适 */
  .record-btn,
  .clear-btn {
    padding: 10px 12px !important;
    border-radius: 12px !important;
  }

  /* 徽章：手机端改成更紧凑的网格，避免“巨大圆章挤爆/错位” */
  /* 备注：部分机型/浏览器对 grid 的拉伸与居中组合存在兼容差异，
     这里改为 flex 两列换行，确保“铺满屏幕、无右侧留白”。 */
  .content,
  .dashboard,
  .achievements-card {
    width: 100% !important;
  }

  .achievements-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    gap: 14px 12px !important;
    width: 100% !important;
  }

  .achievement {
    width: calc(50% - 6px) !important;
    align-items: center !important;
  }

  .achievement-icon {
    width: 92px !important;
    height: 92px !important;
    margin: 0 auto;
  }

  .achievement-title {
    font-size: 12px !important;
  }

  .achievement-desc {
    font-size: 11px !important;
    max-width: 14em;
  }

  /* 卡片圆角略收紧，避免视觉过“胖” */
  .card {
    border-radius: 18px;
    width: 100% !important;
  }

  /* 用户列表：手机端按钮横排会挤压，改为纵向/可换行布局 */
  .user-item {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .user-actions-row {
    width: 100% !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
  }

  .user-actions-row button,
  .user-actions-row .btn-secondary,
  .user-actions-row .btn-primary {
    flex: 1 1 auto;
    min-width: 84px;
  }

  /* 用户中心特化：确保两张卡（用户列表/徽章）绝不缩在左侧 */
  .user-list-card,
  .achievements-card {
    width: 100% !important;
    max-width: none !important;
  }

  #userList,
  #achievementsGrid {
    width: 100% !important;
  }

  /* 页脚：放到真正最底部，并为底部导航留出空间，避免遮挡切换图标 */
  footer,
  body > footer {
    padding-bottom: calc(var(--mobile-bottom-nav-h) + 18px) !important;
  }

  .site-footer-legal {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    font-size: 12px !important;
    gap: 10px 18px !important;
  }
}

/* 触摸设备兜底：部分手机浏览器会用“桌面宽度”渲染，max-width 断点不触发。
   用 pointer: coarse 强制走移动端排版（不影响电脑端鼠标/触控板）。 */
@media (pointer: coarse) {
  .page-root,
  .app,
  .content,
  .dashboard,
  section.card {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .app {
    flex-direction: column;
  }

  .sidebar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: var(--mobile-bottom-nav-h);
    padding: 8px 10px;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    gap: 10px;
    background: rgba(255, 255, 255, 0.82);
    border-top: 1px solid rgba(226, 231, 235, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 60;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .sidebar .logo {
    display: none;
  }

  .content {
    padding: 14px 14px calc(var(--mobile-bottom-nav-h) + 18px) !important;
    align-items: stretch !important;
  }

  .topbar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .topbar-right {
    width: 100%;
  }

  .topbar-right input {
    min-width: 0 !important;
    width: 100% !important;
  }

  .dashboard {
    grid-template-columns: 1fr !important;
    justify-items: stretch !important;
  }

  .hero,
  .task-card,
  .cta-section,
  .left-card,
  .right-card {
    grid-column: 1 / -1 !important;
  }

  .disease-list {
    grid-template-columns: 1fr !important;
  }

  .content,
  .dashboard,
  .achievements-card {
    width: 100% !important;
  }

  .achievements-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    gap: 14px 12px !important;
    width: 100% !important;
  }

  .achievement {
    width: calc(50% - 6px) !important;
  }

  .achievement-icon {
    width: 92px !important;
    height: 92px !important;
  }

  .card {
    width: 100% !important;
  }

  .user-item {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .user-actions-row {
    width: 100% !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
  }

  .user-actions-row button,
  .user-actions-row .btn-secondary,
  .user-actions-row .btn-primary {
    flex: 1 1 auto;
    min-width: 84px;
  }

  .user-list-card,
  .achievements-card {
    width: 100% !important;
    max-width: none !important;
  }

  #userList,
  #achievementsGrid {
    width: 100% !important;
  }

  footer,
  body > footer {
    padding-bottom: calc(var(--mobile-bottom-nav-h) + 18px) !important;
  }

  .site-footer-legal {
    font-size: 12px !important;
    gap: 10px 18px !important;
  }
}

@media (max-width: 420px) {
  :root {
    --mobile-bottom-nav-h: 64px;
  }

  .sidebar button {
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }
}