/* ================================================================
 * mobile-pages.css — 页面级移动端小程序化（在 mobile-app.css 之后加载）
 * 针对各高频页面的具体 DOM 结构做小程序化：卡片/侧栏/列表/表单/悬浮
 * ================================================================ */

@media (max-width: 768px) {
  /* ========== 通用顶栏（各页 .topbar）========== */
  .topbar { position: sticky; top: calc(54px + env(safe-area-inset-top)) !important; z-index: 99 !important; }
  .topbar-inner { padding: 8px 12px !important; gap: 8px !important; max-width: 100% !important; }
  .topbar .logo { font-size: 16px !important; }
  .topbar .backhome { font-size: 12px !important; padding: 6px 12px !important; }
  .topbar .search { display: none !important; }

  /* ========== 通用内容容器 ========== */
  .wrap, .container, .main-content { margin: 0 !important; padding: 0 12px 20px !important; max-width: 100% !important; display: block !important; }
  .side { width: 100% !important; display: flex !important; flex-wrap: nowrap !important; gap: 8px !important; overflow-x: auto !important; padding: 10px 12px !important; margin: 0 !important; box-shadow: none !important; border: none !important; background: transparent !important; }
  .side h3 { display: none !important; }
  .side a {
    flex-shrink: 0 !important; padding: 7px 14px !important; border-radius: 999px !important;
    font-size: 13px !important; background: #fff !important; border: 1px solid #E5E7F0 !important;
    color: #4B5563 !important; white-space: nowrap !important;
  }
  .side a.active { background: #2D7CF5 !important; color: #fff !important; border-color: #2D7CF5 !important; font-weight: 500 !important; }
  .side a:hover { background: #EEF3FF !important; color: #2D7CF5 !important; }

  /* ========== 通用卡片（.th-card 及变体）========== */
  .th-card { border-radius: 12px !important; border: 1px solid #EEEEF0 !important; box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important; }
  .th-card .cover { height: 100px !important; font-size: 32px !important; border-radius: 0 !important; }
  .th-card .body { padding: 10px !important; }
  .th-card .title { font-size: 13px !important; min-height: 38px !important; margin: 0 !important; line-height: 1.45 !important; color: #1A1A2E !important; }
  .th-card .meta { font-size: 11px !important; margin-top: 6px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #A5A5B5 !important; }
  .th-card .price { font-size: 15px !important; padding-top: 6px !important; color: #FF4D4F !important; }
  .th-card .price.free { font-size: 14px !important; color: #00B578 !important; }
  .th-card .buyBtn { padding: 4px 14px !important; font-size: 12px !important; border-radius: 999px !important; background: linear-gradient(135deg,#2D7CF5,#5A9BFF) !important; }

  /* 网格统一两列 */
  .grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }

  /* ========== 筛选 chip 区 ========== */
  .filters { flex-wrap: nowrap !important; overflow-x: auto !important; gap: 8px !important; padding-bottom: 6px !important; margin-bottom: 12px !important; }
  .filters .chip, .filters button, .filters a, .sort {
    flex-shrink: 0 !important; font-size: 12px !important; padding: 6px 13px !important;
    border-radius: 999px !important; border: 1px solid #E5E7F0 !important; background: #fff !important; color: #4B5563 !important;
  }
  .filters .chip.active, .filters button.active { background: #2D7CF5 !important; color: #fff !important; border-color: #2D7CF5 !important; }

  /* ========== 标题区 ========== */
  .title { font-size: 18px !important; margin: 4px 0 2px !important; }
  .sub { font-size: 12px !important; margin-bottom: 12px !important; color: #8E8EA0 !important; }
  .crumb { font-size: 12px !important; }

  /* ========== 我的页 ========== */
  .profile-card {
    margin: 12px !important; border-radius: 16px !important; padding: 20px 16px !important;
    background: linear-gradient(135deg, #2D7CF5, #5A9BFF) !important;
    box-shadow: 0 6px 20px rgba(45,124,245,0.25) !important;
  }
  .profile-avatar { width: 64px !important; height: 64px !important; font-size: 32px !important; border-radius: 50% !important; border: 2px solid rgba(255,255,255,0.6) !important; }
  .profile-name { color: #fff !important; font-size: 18px !important; font-weight: 600 !important; }
  .profile-bio { color: rgba(255,255,255,0.85) !important; font-size: 12px !important; }
  .profile-meta, .profile-card .stat, .profile-card .stat-row { color: rgba(255,255,255,0.9) !important; }
  .profile-edit { background: rgba(255,255,255,0.2) !important; color: #fff !important; border: 1px solid rgba(255,255,255,0.4) !important; border-radius: 999px !important; }
  .sec { margin: 12px !important; border-radius: 14px !important; border: 1px solid #EEEEF0 !important; box-shadow: 0 2px 10px rgba(0,0,0,0.04) !important; }
  .sec-title { font-size: 14px !important; font-weight: 600 !important; padding: 12px 14px 8px !important; }
  .sec-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 4px !important; }
  .sec-grid .ic { font-size: 22px !important; }
  .sec-grid .k { font-size: 11px !important; }

  /* ========== 社区/帖子 ========== */
  .post, .card.post {
    border-radius: 12px !important; border: 1px solid #EEEEF0 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04) !important; margin-bottom: 10px !important;
  }
  .post .nm { font-size: 14px !important; font-weight: 600 !important; }
  .fab {
    width: 48px !important; height: 48px !important; border-radius: 50% !important;
    background: linear-gradient(135deg,#2D7CF5,#5A9BFF) !important;
    box-shadow: 0 6px 18px rgba(45,124,245,0.35) !important;
    bottom: calc(70px + env(safe-area-inset-bottom)) !important;
  }

  /* ========== 详情页 ========== */
  .hero { border-radius: 14px !important; margin: 12px !important; }
  .hero .cover { height: 150px !important; font-size: 48px !important; }
  .info { padding: 16px !important; }
  .gallery-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
  .desc, .intro { padding: 12px !important; font-size: 14px !important; line-height: 1.7 !important; }

  /* ========== 列表行（消息/订单/收藏等）========== */
  .row, .cards .row, .item {
    border-radius: 12px !important; border: 1px solid #EEEEF0 !important;
    background: #fff !important; box-shadow: 0 2px 8px rgba(0,0,0,0.03) !important;
    padding: 12px 14px !important; margin: 0 12px 10px !important;
  }
  .row-t, .row-s { font-size: 13px !important; }
  .empty { padding: 40px 0 !important; font-size: 13px !important; }

  /* ========== 上传/表单 ========== */
  .drop-zone { border-radius: 14px !important; min-height: 140px !important; }
  .field { margin-bottom: 14px !important; }
  .field label, .field .h { font-size: 13px !important; font-weight: 600 !important; margin-bottom: 6px !important; }
  .field input, .field textarea, .field select {
    border-radius: 10px !important; border: 1px solid #E5E7F0 !important;
    padding: 10px 12px !important; font-size: 16px !important; background: #fff !important;
    width: 100% !important; box-sizing: border-box !important;
  }
  .field input:focus, .field textarea:focus { border-color: #2D7CF5 !important; outline: none !important; }

  /* ========== 登录/注册 ========== */
  .login-card, .auth-card, form.panel {
    margin: 20px 16px !important; border-radius: 16px !important;
    border: 1px solid #EEEEF0 !important; box-shadow: 0 4px 16px rgba(0,0,0,0.06) !important;
  }

  /* ========== 卡片式容器统一 ========== */
  .card, .panel, .box {
    border-radius: 12px !important; border: 1px solid #EEEEF0 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04) !important;
  }
  .card { margin: 10px 12px !important; padding: 14px !important; }
  .panel, .box { margin: 10px 12px !important; padding: 14px !important; }
  .panel, .box { background: #fff !important; }

  /* ========== 按钮统一 ========== */
  .btn { border-radius: 999px !important; font-size: 14px !important; padding: 9px 20px !important; line-height: 1.4 !important; }
  .btn-primary { background: linear-gradient(135deg,#2D7CF5,#5A9BFF) !important; border: none !important; color: #fff !important; box-shadow: 0 4px 14px rgba(45,124,245,0.25) !important; }
  .btn:active { opacity: 0.85; }

  /* ========== 隐藏桌面冗余 ========== */
  .adSlot, .bannerHit, .cooperation-banner { margin: 10px 12px !important; border-radius: 12px !important; }

  /* ========== 详情页 detail.html（PC 左右分栏→移动端上下布局）========== */
  .hero { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 0 !important; padding: 0 !important; margin: 10px 12px !important; border-radius: 14px !important; overflow: hidden; background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,0.05); }
  .hero .cover { width: 100% !important; height: 0 !important; padding-bottom: 60% !important; aspect-ratio: 16/10 !important; position: relative; border-radius: 0 !important; font-size: 64px !important; }
  .hero .cover img, .hero .cover > * { position: absolute !important; inset: 0; }
  .hero .info { width: 100% !important; padding: 16px 16px 20px !important; }
  .hero .info h1 { font-size: 19px !important; font-weight: 600 !important; line-height: 1.5 !important; color: #1A1A2E !important; margin: 0 0 12px !important; white-space: normal !important; word-break: break-word !important; }
  .tagrow { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; margin-bottom: 10px !important; }
  .tagrow .tag { font-size: 12px !important; padding: 3px 10px !important; border-radius: 999px !important; background: #EEF3FF !important; color: #2D7CF5 !important; }
  .hero .stat { font-size: 12px !important; color: #8E8EA0 !important; margin: 6px 0 12px !important; }
  .pricebox { font-size: 22px !important; font-weight: 600 !important; color: #FF4D4F !important; }
  .pricebox .pts { font-size: 13px !important; color: #A5A5B5 !important; font-weight: 400 !important; }
  .btnrow { display: flex !important; flex-direction: row !important; gap: 10px !important; margin-top: 16px !important; }
  .btnrow .btn { flex: 1 !important; writing-mode: horizontal-tb !important; white-space: nowrap !important; text-align: center !important; padding: 12px 0 !important; font-size: 15px !important; min-width: 0 !important; }
  .btnrow .btn-primary { background: linear-gradient(135deg,#2D7CF5,#5A9BFF) !important; color: #fff !important; border: none !important; }
  .btnrow .btn-ghost { background: #fff !important; color: #2D7CF5 !important; border: 1px solid #2D7CF5 !important; }

  /* 详情页其他区 */
  .section { margin: 10px 12px !important; padding: 16px !important; border-radius: 12px !important; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.04); }
  .section h3 { font-size: 15px !important; font-weight: 600 !important; margin: 0 0 10px !important; color: #1A1A2E !important; }
  .desc { font-size: 14px !important; line-height: 1.7 !important; color: #4B5563 !important; }
  .gallery-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
  .gallery-grid img { border-radius: 8px !important; aspect-ratio: 1; object-fit: cover; }
  .author-card { display: flex !important; align-items: center !important; gap: 12px !important; padding: 8px 0 !important; }
  .author-card .avatar { width: 44px !important; height: 44px !important; font-size: 22px !important; }
  .intro { font-size: 13px !important; color: #8E8EA0 !important; line-height: 1.6 !important; }
  .preview-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
  .preview-grid img { border-radius: 8px !important; aspect-ratio: 1; object-fit: cover; }
  .reviews h3 { font-size: 15px !important; }
  .dead-warn { font-size: 13px !important; padding: 10px 12px !important; border-radius: 8px !important; background: #FFF7E6 !important; color: #D46B08 !important; border: 1px solid #FFE7BA !important; }

  /* 详情页侧栏（作者/相关推荐）单列化 */
  #side { width: 100% !important; margin: 0 !important; padding: 0 !important; }
  #side .side-rel { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; }
  #side .side-rel-item { display: flex !important; align-items: center !important; gap: 10px !important; padding: 10px !important; border-radius: 10px !important; background: #fff; border: 1px solid #EEEEF0; }
  #side .side-rel-item .c { width: 56px !important; height: 56px !important; flex-shrink: 0; border-radius: 8px; font-size: 24px; }

  /* 评价卡 */
  .review, .rv-item { padding: 12px !important; border-radius: 10px !important; border: 1px solid #EEEEF0; margin-bottom: 10px; }
}