/* ShenaAI 前台页 · 移动端响应式增强（共享样式）
   覆盖 用户中心/account、开发者中心/developer、数据商城/store、电子书城/books。
   设计：不改各页 HTML，仅以相同选择器在窄屏覆盖内联样式；需在各页 <style> 之后 <link> 引入。 */

/* 平板及以下：收窄主区留白 */
@media (max-width: 1024px) {
  main { padding-left: 16px !important; padding-right: 16px !important; }
}

/* 手机 */
@media (max-width: 760px) {
  /* 顶部：nav（account/developer）与 header（store/books）均换行可滚 */
  nav, header {
    flex-wrap: wrap;
    gap: 8px 12px !important;
    padding: 10px 14px !important;
  }
  nav b, header .logo { font-size: 15px !important; }
  nav img { height: 26px !important; }
  nav .links {
    margin-left: 0 !important;
    width: 100%;
    overflow-x: auto;
    gap: 14px !important;
    -webkit-overflow-scrolling: touch;
  }
  nav .links a, nav a, header .pill { white-space: nowrap; }
  /* header 内的 flex 撑开占位符在换行时不再强行占满 */
  header > span[style*="flex"], header .sp { flex-basis: 100%; height: 0; }

  main { padding: 16px 12px 72px !important; }
  h1, .hero h1 { font-size: 22px !important; }
  h2 { font-size: 15px !important; }
  .panel { padding: 14px !important; border-radius: 8px; }

  /* 卡片网格：min(100%,280px) 确保任何宽度都不溢出，自适应 1~2 列 */
  .grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)) !important; gap: 14px !important; }
  .plans { grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)) !important; }

  /* 表格：可横向滚动，列不换行（account 有多张明细表） */
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  th, td { padding: 8px 8px !important; }

  /* 表单铺满 + iOS 聚焦不缩放 */
  .row { gap: 8px; }
  .row input, .row select, .row button { flex: 1 1 140px; min-width: 0; }
  input, select, textarea { font-size: 16px !important; }

  /* KPI 卡片更紧凑 */
  .kpi .c { min-width: 90px; }
  .kpi .n { font-size: 20px !important; }

  /* 电子书阅读器（books overlay）：窄屏收紧留白 */
  .reader { padding: 22px 14px 80px !important; }
  .reader h2 { font-size: 20px !important; }
}

/* 超小屏：KPI/网格强制单列，按钮留白收紧 */
@media (max-width: 420px) {
  .kpi { grid-template-columns: repeat(2, 1fr) !important; }
  .btn { padding: 9px 12px; }
}