/* ============================================================
   平板 / 大屏「自适应」层（≥600px 生效，不覆盖手机端 <600px 布局）
   设计目标：任意宽/任意高运行时自适应，不吃死某个固定尺寸。
   - 根容器：超大屏铺到「合理宽度」后居中（高度自适应不改）
   - 列表类：卡片列数随宽度自动增减（grid auto-fill/minmax）
   - 表单类：限制合理宽度并居中，长表单不拉到全宽
   - 独立性：本文件为「渐进增强」层，可整页删除回滚，不影响手机端
   ============================================================ */

/* —— 1. 根容器：任意尺寸自适应；超大屏铺到合理宽度后居中 ——
   max-width 仅作阅读性上限（可调），窗口不超过它即铺满，超过才居中留白；
   高度保持 100dvh 自适应不动。 */
@media (min-width: 600px) {
  #app {
    max-width: 1360px;
  }
}

/* —— 2. 我的记录页（列表）：列数随宽度自动增减 ——
   auto-fill + minmax：够宽自动加列，变窄自动减列，不做死断点。 */
@media (min-width: 600px) {
  #list-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--mc-gap-md);
    align-content: start;
  }
  #list-container > .empty-state {
    grid-column: 1 / -1;
    min-height: 60vh;
    justify-content: center;
  }
}

/* —— 3. 消息中心：同列表，列数自动增减 —— */
@media (min-width: 600px) {
  #notifications-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--mc-gap-sm);
  }
  #notifications-container > .notification-item {
    margin-bottom: 0;
  }
  #notifications-container > .empty-state {
    grid-column: 1 / -1;
    min-height: 60vh;
    justify-content: center;
  }
}

/* —— 4. 表单类页面：限制合理宽度并居中（长表单不要拉到全宽） —— */
@media (min-width: 600px) {
  .submit-page,
  .detail-page {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
  }
}

/* —— 5. 登录 / 注册页：面板限宽居中 —— */
@media (min-width: 600px) {
  .login-page {
    align-items: center;
  }
  .auth-panel {
    width: 100%;
    max-width: 380px;
  }
  .auth-tabs {
    max-width: 260px;
    margin: 0 auto;
  }
}

/* —— 6. 个人中心页：平板下加大卡片留白，区块更舒展 —— */
@media (min-width: 600px) {
  .profile-card {
    padding: calc(var(--mc-gap-lg) + 8px);
  }
  .profile-section {
    padding: var(--mc-gap-md) calc(var(--mc-gap-lg) + 4px);
  }
}

/* —— 7. 提交页上传区：双列并排 —— */
@media (min-width: 600px) {
  .uploads-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--mc-gap-md);
  }
  .uploads-grid .uploader-zone {
    min-height: 220px;
  }
}

/* —— 8. 页面通用留白：平板下加大呼吸感 —— */
@media (min-width: 600px) {
  .page {
    padding: calc(var(--mc-gap-lg) + var(--safe-top))
      var(--mc-gap-lg)
      calc(96px + var(--safe-bottom));
  }
  .page-header {
    margin-bottom: var(--mc-gap-md);
  }
}

/* ============================================================
   提交页底部操作栏：任意大屏/矮屏下避免与悬浮 Tab 导航重叠
   - .bottom-action-bar 为 position:fixed 贴底(z50)，悬浮 Tab 栏
     (.tab-bar, z100) 也贴底居中；在矮/横屏窗口两者会重叠，
     导致「提交皮肤/暂存草稿」按钮被 Tab 栏盖住。
   - 修复原则：保持操作栏贴底(bottom:0)，不整体抬升，
     仅在原有基础上把内容底部内边距加大 72px（让出 Tab 胶囊
     高度 ≈56px + 底距 8px + 间距），使按钮落到 Tab 上方、紧贴
     而不悬空；手机端 <600px 保持原布局不变。
   ============================================================ */
@media (min-width: 600px) {
  .bottom-action-bar {
    bottom: 0;
    padding-bottom: calc(var(--mc-gap-md) + var(--safe-bottom) + 72px);
  }
}