/* ========================================
   首页样式 - 1:1还原小程序
   设计基准：375px宽 = 750rpx
   ======================================== */

/* ========== 页面容器 ========== */
/* 对齐小程序：页面整体左右留 32rpx(≈4.27vw) 边距，帖子列表等不再贴边通栏 */
/* 【关键】加手机宽度上限并居中：小程序永远锁定手机宽度，H5若不限制，在电脑/平板/大窗口下会铺满整屏被同比放大（又宽又长）。发布页/详情页已有此限制，首页补齐 */
#page-home { max-width: 430px; margin: 0 auto; padding: 0 4.27vw; box-sizing: border-box; }

/* ========== 悬浮搜索栏（上滑吸顶态）========== */
.floating-search {
  position: fixed; top: 0; left: 50%; right: auto; width: 100%; max-width: 114.67vw; z-index: 100;
  padding: 0 3.2vw; padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: 6px;
  background: #fff; border-bottom: 1px solid #e8e8e8;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
  transform: translate(-50%, -120%); opacity: 0;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), opacity .25s ease;
  pointer-events: none;
}
.floating-search.show { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.floating-search-bar { display: flex; align-items: center; min-height: 10.67vw; }
.floating-search-box {
  flex: 1; display: flex; align-items: center; min-width:0; overflow:hidden;
  background: #f5f7f8; border-radius: 5.33vw;
  padding: 2.13vw 3.2vw; box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.floating-search-box .district-pill { background: #f0faf8; }
.floating-search-box .search-icon { width: 4.53vw; height: 4.53vw; margin-right: 2.13vw; opacity: .5; flex-shrink: 0; }
.floating-search-box .search-input { flex: 1; min-width:0; font-size: 3.47vw; color: #333; height: 5.6vw; border: none; outline: none; background: transparent; }
.search-inner-btn{color:#1DB9A6;font-size:3.2vw;font-weight:600;margin-left:1.6vw;white-space:nowrap;flex-shrink:0;cursor:pointer;padding:1.33vw 3.47vw;background:#F0FAF8;border:1.5px solid rgba(29,185,166,0.25);border-radius:2.67vw;line-height:1.2}
.search-inner-btn:active{background:#e6f5f1}

/* ========== 首页悬浮按钮组（群 + 客服）========== */
.home-fab-group {
  position: fixed; left: max(1.6vw, calc(50% - 57.33vw + 1.6vw)); bottom: 37.33vw;
  z-index: 600; display: flex; flex-direction: column; gap: 2.93vw; align-items: center;
}
/* 入场飞入动画：从右侧飞入到左侧原位（对齐小程序 sideBarFlyIn） */
@keyframes fabFlyIn {
  from { opacity: 0; transform: translateX(80vw) scale(0.35); }
  55%  { opacity: 1; transform: translateX(-8px) scale(1.06); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
.home-fab {
  width: auto; height: auto; border-radius: 0;
  background: transparent; box-shadow: none; border: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer; transition: transform .12s, opacity .12s;
  animation: fabFlyIn 1.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.home-fab-group .home-fab:nth-child(2) { animation-delay: .2s; }
/* 点击反馈：!important 覆盖入场动画的 fill 状态 */
.home-fab:active { transform: scale(.9) !important; opacity: .8 !important; }
.home-fab-icon { width: 6.4vw; height: 6.4vw; object-fit: contain; }
.home-fab-icon-customer { width: 9.6vw; height: 9.6vw; }
.home-fab-label { font-size: 2.67vw; color: #1DB9A6; margin-top: 0.53vw; line-height: 1; font-weight: 600; }

/* ========== 联系客服二维码弹窗（单码居中）========== */
.contact-qr-wrap { display: flex; align-items: center; justify-content: center; padding: 3.2vw 4vw 1.07vw; }
.contact-qr-img {
  width: 48vw; height: 48vw; max-width: 220px; max-height: 220px;
  object-fit: contain; border-radius: 1.07vw; background: #fff;
  -webkit-touch-callout: default; /* 允许微信内长按识别二维码 */
}
.contact-qr-ph {
  width: 48vw; height: 48vw; max-width: 220px; max-height: 220px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6vw;
  background: #f5f7f8; border-radius: 1.07vw; color: #98A8A8; font-size: 2.93vw;
}
.contact-qr-spin {
  width: 6.4vw; height: 6.4vw; border: 3px solid #E0E0E0; border-top-color: #1DB9A6;
  border-radius: 50%; animation: contact-qr-spin 0.8s linear infinite;
}
@keyframes contact-qr-spin { to { transform: rotate(360deg); } }
.contact-qr-tip { text-align: center; font-size: 2.93vw; color: #5A6B6B; padding: 0 4vw 1.07vw; }

/* ========== 群二维码弹窗（双码横排）========== */
.community-rows { padding: 2.67vw 4vw 1.6vw; display: flex; flex-direction: column; gap: 2.67vw; }
.co-row-card {
  display: flex; align-items: center; gap: 3.2vw;
  background: var(--bg-grey); border-radius: 2.67vw; padding: 3.2vw;
}
.co-row-qr { width: clamp(76px, 22vw, 108px); height: clamp(20.27vw, 22vw, 28.8vw); border-radius: 2.13vw; background: #fff; object-fit: contain; flex-shrink: 0; padding: 1.07vw; box-sizing: border-box; }
.co-row-qr-placeholder { width: clamp(76px, 22vw, 108px); height: clamp(20.27vw, 22vw, 28.8vw); border-radius: 2.13vw; background: #fff; display: none; align-items: center; justify-content: center; font-size: clamp(40px, 9vw, 56px); flex-shrink: 0; padding: 1.07vw; box-sizing: border-box; }
.co-row-info { flex: 1; min-width: 0; }
.co-row-name { font-size: 3.73vw; font-weight: 700; color: var(--text-primary); margin-bottom: 1.07vw; }
.co-row-desc { font-size: 3.2vw; color: var(--text-muted); line-height: 1.5; }
.co-row-hint { margin-top: 1.6vw; font-size: 2.93vw; color: #1DB9A6; font-weight: 600; }

/* 悬浮态区县选择面板 */
.floating-district-panel {
  background: #fff; border-radius: 0 0 4.27vw 4.27vw;
  max-height: 0; opacity: 0; transform: scaleY(0); transform-origin: top;
  transition: all .25s ease; padding: 0 3.2vw;
  box-shadow: 0 3px 10px rgba(0,0,0,.1);
}
.floating-district-panel.open { max-height: 200px; opacity: 1; transform: scaleY(1); padding: 1.6vw 2.67vw; }
.floating-district-panel .district-options { display: inline-flex; gap: 3.47vw; white-space: nowrap; }
.floating-district-panel .district-option { display: inline-flex; align-items: center; gap: 0.8vw; padding: 0.8vw 0; cursor: pointer; }
.floating-district-panel .option-name { font-size: 2.93vw; color: #1DB9A6; }
.floating-district-panel .option-hint { font-size: 2.13vw; color: rgba(29,185,166,.5); }
.floating-district-panel .district-option.active .option-name { color: #fff; font-weight: 700; background: #1DB9A6; padding: 0.4vw 2.13vw; border-radius: 2.67vw; }
.floating-district-panel .district-option.active .option-hint { display: none; }

/* ========== 头部渐变区域 ========== */
.header-gradient {
  background: linear-gradient(180deg, #1DB9A6 0%, #2DD4BF 50%, #d8f3ee 100%);
  /* 绿色辐射加大并向下延伸到分类Tab栏：背景突破页面边距铺满，内容回填边距；顶部留安全区，底部加 3.2vw 让绿色多铺一截 */
  margin: 0 -4.27vw;
  padding: env(safe-area-inset-top) 4.27vw 3.2vw;
  box-sizing: border-box;
}

/* ========== 搜索栏 ========== */
.search-bar { display: flex; align-items: center; position: relative; padding: 2.13vw 0 0; min-height: 12.8vw; }
.search-box {
  width: 100%; display: flex; align-items: center; min-width:0;
  background: #fff; border-radius: 1.07vw;
  padding: 2.13vw 3.2vw; box-sizing: border-box;
  box-shadow: 0 0.53vw 2.13vw rgba(29,185,166,0.25);
}
/* 平台统计数据（对齐小程序：absolute 印在搜索栏底边下方，不占行高） */
.search-stats {
  position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
  margin-top: 0.27vw;
  display: flex; align-items: baseline; gap: 0.53vw;
  z-index: 2; pointer-events: none; white-space: nowrap;
}
.search-stats .stats-label { font-size: 2.67vw; color: rgba(255,255,255,0.75); }
.search-stats .stats-val { font-size: 2.67vw; color: #FF2D2D; font-weight: 700; }
.search-stats .stats-sep { font-size: 2.4vw; color: rgba(255,255,255,0.45); margin: 0 1.33vw; }
.district-pill {
  display: inline-flex; align-items: center;
  background: #f0faf8; border-radius: 2.67vw;
  padding: 0 2.13vw; height: 6.4vw; margin-right: 1.6vw; flex-shrink: 0;
  border: 1.5px solid rgba(29,185,166,.25); cursor: pointer; font-size: 3.2vw; color: #1DB9A6;
}
.district-pill-text { font-size: 3.2vw; color: #1DB9A6; white-space: nowrap; }
.district-pill-text.active { font-weight: 600; }
.district-arrow {
  display: inline-block; margin-left: 0.53vw; width: 0; height: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid #1DB9A6; transition: transform .2s;
}
.district-arrow.open { transform: rotate(180deg); }
.search-box .search-icon { width: 4.53vw; height: 4.53vw; margin-right: 2.13vw; opacity: .5; flex-shrink: 0; }
.search-box .search-input { flex: 1; min-width:0; font-size: 3.47vw; color: #333; height: 5.6vw; border: none; outline: none; background: transparent; }
.search-box .search-input::placeholder { color: rgba(153,153,153,.75); }


/* ========== 区县选择面板 ========== */
.district-panel { position: relative; z-index: 10;
  background: linear-gradient(135deg, #1AB89C, #22C4AD);
  border-radius: 0 0 4.27vw 4.27vw; overflow: hidden;
  max-height: 0; opacity: 0; transition: max-height .25s ease, opacity .2s ease;
  padding: 0 2.67vw; margin-top: -5px;
  box-shadow: 0 3px 10px rgba(29,185,166,.3);
}
.district-panel.open { max-height: 100px; opacity: 1; padding: 1.6vw 2.67vw; margin-top: 0.67vw; }
.district-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.district-scroll::-webkit-scrollbar { display: none; }
.district-options { display: inline-flex; gap: 3.47vw; white-space: nowrap; }
.district-option { display: inline-flex; align-items: center; gap: 0.8vw; padding: 0.8vw 0; cursor: pointer; }
.district-option .option-name { font-size: 2.93vw; color: rgba(255,255,255,.75); }
.district-option .option-hint { font-size: 2.13vw; color: rgba(255,255,255,.55); }
.district-option.active { position: relative; }
.district-option.active .option-name { color: #fff; font-weight: 700; }
.district-option.active::after {
  content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 80%; height: 0.53vw; background: #fff; border-radius: 0.27vw;
}

/* ========== 8宫格分类轮播（CSS snap 滑动翻页）========== */
/* margin-top：为搜索栏底边下方的统计数据(.search-stats，absolute不占行高)让出空间，
   避免8宫格第一行图标与"浏览量/分享量/发帖量"重叠（对齐小程序视觉间距） */
.category-swiper-wrapper {
  overflow: hidden; position: relative; margin-top: 4vw;
}
.category-swiper {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  scroll-behavior: smooth; height: 19.5vw;
}
.category-swiper::-webkit-scrollbar { display: none; }
.category-swiper-item {
  flex: 0 0 100%; scroll-snap-align: start;
  height: 19.5vw; display: flex; align-items: center; justify-content: center;
}
.category-grid-4 {
  display: flex; justify-content: space-around; align-items: center;
  width: 100%; max-width: 106.67vw; padding: 0.67vw 1.07vw;
}

/* 分页指示器 */
.category-indicator {
  display: flex; justify-content: center; gap: 1.33vw; padding: 0 0 0.53vw;
}
.category-dot {
  width: 1.33vw; height: 1.33vw; border-radius: 50%;
  background: rgba(29,185,166,.3); transition: all .2s;
}
.category-dot.active { background: #1DB9A6; width: 4vw; border-radius: 0.67vw; }
.cat-item {
  display: flex; flex-direction: column; align-items: center;
  padding: 0.8vw 0.4vw; cursor: pointer; transition: all .15s;
}
.cat-item:active { opacity: .75; transform: scale(.95); }
.cat-icon {
  width: 9.6vw; height: 9.6vw; border-radius: 2.4vw;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 0.8vw; position: relative;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.cat-text { font-size: 3.37vw; font-weight: 700; color: #fff; line-height: 1; }

/* 分类图标颜色（与小程序一致） */
.cat-icon.job        { background: #1DB9A6; }
.cat-icon.house      { background: #28C9B3; }
.cat-icon.secondhand { background: #5BAE7A; }
.cat-icon.service    { background: #8B5CF6; }
.cat-icon.ad         { background: #1DB9A6; }
.cat-icon.car        { background: #3B82F6; }
.cat-icon.business   { background: #EC4899; }
.cat-icon.find       { background: #10B981; }

.badge {
  position: absolute; top: -1.33vw; right: -1.33vw;
  background: linear-gradient(135deg, #1DB9A6, #28C9B3);
  color: #fff; font-size: 2.13vw; padding: 0.13vw 1.07vw;
  border-radius: 1.33vw 1.33vw 1.33vw 0; font-weight: 600; z-index: 2;
}
.badge.new { background: linear-gradient(135deg, #5BAE7A, #4A9E6A); }
.cat-name { font-size: 3.07vw; color: #2D3A3A; font-weight: 500; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ========== 广告位轮播（对齐小程序 ad-swiper 组件：300rpx≈40vw 高、16rpx≈2.13vw 圆角） ========== */
.ad-swiper-wrapper{overflow:hidden;border-radius:2.13vw;position:relative;background:transparent;margin-bottom:4px}
.ad-swiper-track{display:flex;transition:transform .4s ease}
.ad-swiper-slide{min-width:100%;height:40vw;position:relative;overflow:hidden;cursor:pointer}
/* 有图：整卡全宽图（cover 裁边填满，不显示文字，对齐小程序 mode=aspectFill） */
.ad-swiper-img-full{width:100%;height:100%;object-fit:cover;display:block}
/* 无图：渐变卡 + 白标题 + 半透明白描述逐行（对齐小程序 default-card） */
.ad-swiper-card{width:100%;height:100%;background:linear-gradient(135deg,#1DB9A6,#28C9B3);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3.2vw;box-sizing:border-box}
.ad-swiper-card-title{font-size:18px;font-weight:700;color:#fff;margin-bottom:6px;text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ad-swiper-card-desc-wrap{display:flex;flex-direction:column;align-items:center}
.ad-swiper-card-desc{font-size:12px;color:rgba(255,255,255,0.8);line-height:1.6;text-align:center;word-break:break-all;max-width:100%}
/* 指示点：白色圆点（对齐小程序 indicator-dots 默认白点），叠加在轮播底部 */
.ad-swiper-dots{display:flex;justify-content:center;gap:1.33vw;padding:0;position:absolute;bottom:1.6vw;left:0;right:0;z-index:2}
.ad-swiper-dot{width:2.13vw;height:2.13vw;border-radius:50%;background:rgba(255,255,255,0.4);transition:all .3s}
.ad-swiper-dot.active{background:#fff;transform:scale(1.25)}

/* ========== Tab栏 吸顶容器 ========== */
.sticky-anchor { position: sticky; top: 0; z-index: 10; background: linear-gradient(180deg, #d8f3ee 0%, #f0faf8 100%); padding: 0; }
.sticky-anchor.float-under { top: 50px; z-index: 99; }

/* Tab栏 */
.tab-bar {
  white-space: nowrap; background: #fff; border-radius: 2.67vw 2.67vw 0 0;
  padding-top: 0.53vw; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.tab-bar::-webkit-scrollbar { display: none; }
.tab-item {
  display: inline-block; padding: 1.33vw 2.93vw; font-size: 3.47vw;
  color: #555; cursor: pointer; position: relative; z-index: 6;
  transition: color .2s, opacity .15s; min-height: 6.4vw; white-space: nowrap;
}
.tab-item:active { opacity: 0.6; }
.tab-item.active { color: #1DB9A6; font-weight: 700; }
.tab-item.active::after {
  content: ''; position: absolute; bottom: 1.07vw; left: 50%; transform: translateX(-50%);
  width: 4vw; height: 0.67vw; background: #1DB9A6; border-radius: 0.4vw;
}

/* ========== 求职招聘子筛选栏 ========== */


/* ========== 信息列表 ========== */
.info-list {
  background: transparent; border-radius: 0 0 2.67vw 2.67vw;
  padding: 1.33vw 0 env(safe-area-inset-bottom);
}

/* 信息卡片 */
.info-item {
  background: #fff; margin-bottom: 0.67vw; padding: 2.67vw 4.27vw;
  border-radius: 1.6vw; box-shadow: 0 0.27vw 1.07vw rgba(29,185,166,0.08);
  display: flex; gap: 0.53vw; cursor: pointer;
  transition: transform .15s; position: relative; overflow: hidden;
  box-sizing: border-box; align-items: flex-start; min-height: 13.33vw;
}
.info-item:active { transform: scale(.985); opacity: .92; }
.info-item.is-super-top {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #E8FCF9, #DFFBF7);
  border: 1px solid transparent;
  background-image: linear-gradient(#E8FCF9, #DFFBF7), linear-gradient(135deg, #2EF0CC, #14B89F);
  background-origin: border-box; background-clip: padding-box, border-box;
  box-shadow: 0 2px 9px rgba(46,240,204,.15);
}
.info-item.is-super-top::before {
  content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,235,170,.2), transparent);
  animation: super-shimmer 2s ease-in-out infinite;
}
.info-item.is-top {
  background: linear-gradient(135deg, #EDF9F7, #EAF7F4);
  border: 1px solid #A8DDD2; box-shadow: 0 2px 9px rgba(29,185,166,.12);
}

@keyframes super-shimmer {
  0% { left: -100%; } 100% { left: 200%; }
}

/* ========== 信息卡片 - 内容区 ========== */
.info-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.8vw; }

/* 标题行（方案C：两行标题，超出裁切） */
/* ★ max-height 精确等于两行行高(3.73vw×1.4×2=10.44vw)，原 10.8vw 多出 1.3px 导致第三行顶部隐隐约约露出 */
.title-row { display: block; overflow: hidden; max-height: 10.44vw; position: relative; min-width: 0; }
.category-tag {
  font-size: 2.4vw; padding: 0.27vw 1.6vw; border-radius: 0.8vw;
  font-weight: 600; flex-shrink: 0; white-space: nowrap; color: #fff; line-height: 1.4;
}
.title {
  flex: 1; font-size: 3.73vw; color: #2D3A3A; line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.title.title-top { font-weight: 700; }
.title.title-super { color: #0A9585; font-weight: 800; }
/* 方案C：合并标题（两行 + 时间/图标浮第二行右侧，对齐小程序首页） */
.title.merged,
.car-title.merged {
  display: block;
  white-space: normal;
  word-break: break-word;
  font-weight: 700;
  line-height: 1.4;
  overflow: visible;
  padding-right: 0;
}
.title.merged::before,
.car-title.merged::before {
  content: '';
  float: right;
  width: 0;
  height: 5.3vw;   /* ≈ 一行高，把时间/图标挤到第二行右侧 */
}
.core-info-inline {
  float: right;
  clear: right;
  margin-left: 1.06vw;
  display: flex;
  align-items: flex-end;
  height: 5.3vw;   /* = 第二行行高，底部与标题文字底对齐 */
  gap: 0.53vw;
  white-space: nowrap;
  line-height: 1.4;
  background: transparent;
}
/* ═══════════════════════════════════════════════════════════
   置顶帖标题：1:1 复刻小程序方案C（pages/index/index.wxss line 534-624）
   - .title-row: block + overflow:hidden + max-height:2行 负责裁切
   - .top-badge / .image-icon: float:left 在 .title-row 直接子元素，文字绕排
   - .title-clamp: block 包裹层（不可 overflow:hidden，否则变BFC不再绕开红标）
   - .title.merged: block + overflow:visible（本层不裁切，由 title-row 负责）
   - .title.merged::before: float:right width:0 height:一行 占第一行右侧浮动通道
   - .core-info-inline: float:right + clear:right 被挤到第二行右侧，transparent 背景
   - 无省略号、无白色遮罩、无 JS、无 absolute —— 与小程序完全一致
   ═══════════════════════════════════════════════════════════ */

/* 废弃 spacer 元素 */
.title-spacer { display: none !important; }

/* 置顶帖 title-row / car-title-row：block + overflow:hidden + 「跟随字号」的自适应两行裁切
   ★ 为什么要改成自适应（2026-08-31 修：苹果手机微信内置浏览器里，置顶帖标题第二行下沿被切）：
     原先把框高写死成 10.44vw（= 3.73vw 字号 × 1.4 行高 × 2 行），刚好两行、零余量。
     苹果手机的浏览器（Safari 内核）在换算 vw、计算行高时会取整，每行比理论值高一点点，
     两行一累积就顶穿这个框 → 第二行下沿被切掉。安卓和电脑上字体不同、恰好没顶穿，所以只在苹果上犯病。
     小程序的 rpx 由微信自己换算、更稳，所以小程序同样是「零余量」却没事 —— 网页端的 vw 没有这层保护。
   ★ 改法：框高不再写死 vw 数字，改用 em 绑定到标题字号（思路同小程序的 rpx：跟着字号/屏幕自适应），
     并额外留安全垫，专门吸收苹果浏览器的整像素取整。
     · 两行 = 行高 1.4 × 2 = 2.8em
     · 安全垫 ≈ 0.15em（约半行空隙的一半）
     · 上限校验：第三行字的顶部 ≈ 2.8em + (1.4em - 字高约 0.89em) / 2 ≈ 3.055em ＞ 2.95em
       → 既保证第二行完整显示，又绝不会露出第三行 */
html body .info-item.is-top .title-row,
html body .info-item.is-super-top .title-row,
html body .info-item.car-card.is-top .car-title-row,
html body .info-item.car-card.is-super-top .car-title-row {
  display: block !important;
  overflow: hidden !important;
  font-size: 3.73vw !important;    /* em 的基准字号，必须与标题字号(.title.merged / .car-title.merged)一致 */
  max-height: 2.95em !important;   /* 自适应两行(2.8em) + 安全垫(0.15em)，不再写死 vw */
  position: relative;
  min-width: 0;
}
/* 车辆卡置顶帖标题同样扩为 4 行（仅 car-title-row；普通 .title-row 维持 2 行）
   4 行 = 1.4 × 4 = 5.6em + 安全垫 0.15em → 5.75em
   上限校验：第 5 行字的顶部 ≈ 5.6em + 0.255em = 5.855em ＞ 5.75em → 不会露出第 5 行 */
html body .info-item.car-card.is-top .car-title-row,
html body .info-item.car-card.is-super-top .car-title-row {
  max-height: 5.75em !important;
}

/* 置顶帖 .title-clamp 包裹层：block，不可 overflow:hidden
   ★ 一旦 overflow:hidden 会变 BFC，文字不再绕开左侧浮动的红标，整块(含第二行)右推 */
html body .info-item.is-top .title-clamp,
html body .info-item.is-super-top .title-clamp {
  display: block;
  min-width: 0;
}

/* 置顶帖 .title.merged：block + overflow:visible（本层不裁切，两行裁切由外层 title-row max-height 负责）
   ★ badge+icon 已移到 title-row 直接子元素，本层只含 时间(内部float) + 文字 */
html body .info-item.is-top .title.merged,
html body .info-item.is-super-top .title.merged,
html body .info-item.car-card.is-top .car-title.merged,
html body .info-item.car-card.is-super-top .car-title.merged {
  display: block !important;
  overflow: visible !important;       /* 本层不裁切 */
  white-space: normal !important;
  word-break: break-word !important;
  padding: 0 !important;
  line-height: 1.4 !important;
  font-size: 3.73vw !important;
  float: none !important;
}

/* 置顶帖 ::before 占位：float:right width:0 height:一行(5.3vw)
   ★ 占住第一行右侧浮动通道(宽0不挤字)→第一行文字排满到最右
   ★ 时间 float:right+clear:right 被挤到 ::before 下方 → 第二行右侧 */
html body .info-item.is-top .title.merged::before,
html body .info-item.is-super-top .title.merged::before,
html body .info-item.car-card.is-top .car-title.merged::before,
html body .info-item.car-card.is-super-top .car-title.merged::before {
  content: '' !important;
  float: right !important;
  width: 0 !important;
  height: 5.3vw !important;   /* ≈ 一行高，把时间挤到第二行 */
  display: block !important;
}

/* 置顶帖 ::after 伪元素：已废弃
   ★ 方案C 不用 ::after（::before 占位 + float 已实现绕排，::after 反而干扰） */
html body .info-item.is-top .title.merged::after,
html body .info-item.is-super-top .title.merged::after,
html body .info-item.car-card.is-top .car-title.merged::after,
html body .info-item.car-card.is-super-top .car-title.merged::after {
  content: none !important;
  display: none !important;
}

/* 置顶帖 时间 .core-info-inline：float:right + clear:right 被挤到第二行右侧
   ★ transparent 背景（无白色遮罩，对齐小程序硬约束第4条）
   ★ height:5.3vw + align-items:flex-end 底部与第二行文字底对齐
   ★ 在 .title.merged 内部（float 脱离文档流，DOM 顺序不影响视觉） */
html body .info-item.is-top .core-info-inline,
html body .info-item.is-super-top .core-info-inline,
html body .info-item.car-card.is-top .core-info-inline,
html body .info-item.car-card.is-super-top .core-info-inline {
  float: right !important;
  clear: right !important;
  margin: 0 0 0 1.06vw !important;
  padding: 0 !important;
  display: flex !important;
  align-items: flex-end !important;
  height: 5.3vw !important;            /* 第二行行高 */
  gap: 0.53vw;
  white-space: nowrap;
  line-height: 1.4 !important;
  background: transparent !important;   /* 无白色遮罩 */
  z-index: 3;
}

.image-icon{width:3.73vw;height:3.73vw;flex-shrink:0;border-radius:0.53vw;background:#E8F8F5;position:relative;margin-left:0.53vw}
.image-icon::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:1.87vw;height:1.6vw;border:1.5px solid #1DB9A6;border-radius:0.4vw;box-sizing:border-box}
.image-icon::after{content:'';position:absolute;top:0.4vw;right:0.4vw;width:0.67vw;height:0.67vw;background:#1DB9A6;border-radius:50%}

/* 置顶标签（浮左，标题文字绕右侧排） */
.top-badge {
  float: left; margin: 0.8vw 1.33vw 0 0;
  font-size: 2.4vw; font-weight: 700; padding: 0.27vw 1.6vw; border-radius: 0.8vw;
  color: #fff; white-space: nowrap; flex-shrink: 0; line-height: 1.4;
}
.top-badge.super { background: linear-gradient(135deg, #FF3B30, #D60000); }
.top-badge.normal { background: linear-gradient(135deg, #FF5252, #FF2D2D); }
/* 超级置顶角标叠加在图片左上角（对齐小程序 car-thumb 内 thumb-badge） */
.top-badge.thumb-badge {
  position: absolute; top: 0; left: 0; float: none; margin: 0; z-index: 2;
  border-radius: 0 0 1.6vw 0; box-shadow: 0 0.27vw 0.8vw rgba(0,0,0,0.25);
}

/* ★ 置顶帖 badge / image-icon：在 .title-row 直接子元素 float:left，第一行文字绕排 */
html body .info-item.is-top .title-row > .top-badge,
html body .info-item.is-super-top .title-row > .top-badge {
  float: left !important;
  margin: 0.8vw 1.33vw 0 0 !important;
}
html body .info-item.is-top .title-row > .image-icon,
html body .info-item.is-super-top .title-row > .image-icon {
  float: left;
  margin: 0.8vw 0.8vw 0 0;   /* top 对齐 badge，right 留缝给标题文字 */
}

/* ═══════════════════════════════════════════════════════════
   置顶帖（默认卡片，非车辆）改为单行：与普通帖同构（红标 + 图标 + 标题 + 时间 一行内）
   ★ 仅作用于 .info-item.is-top / .is-super-top 且非 .car-card；车辆卡片(.car-card)两行方案C 完全不动
   ★ 红标(.top-badge)/图片图标(.image-icon)/置顶背景渐变 一律不修改
   ════════════════════════════════════════════════════════════ */
/* ★ 置顶帖默认卡片单行样式已合并到下方"普通帖样式块"（is-top/is-super-top 直接引用 .is-plain 同套规则），
   单一来源，不再单独维护覆盖块；车辆卡片(.car-card)两行方案C 不受影响。 */

/* 图片标识 */
.image-icon {
  width: 3.73vw; height: 3.73vw; flex-shrink: 0; border-radius: 0.53vw;
  background: #E8F8F5; position: relative; margin-left: 0.53vw;
}
.image-icon::before {
  content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 1.87vw; height: 1.6vw; border: 1px solid #1DB9A6; border-radius: 0.4vw;
}
.image-icon::after {
  content: ''; position: absolute; top: 0.67vw; right: 0.67vw;
  width: 0.67vw; height: 0.67vw; background: #1DB9A6; border-radius: 50%;
}

/* 商家认证图标已不再使用（小程序首页已去掉认证角标），保留 .pub-name 兼容 */
.pub-name{font-size:2.4vw;color:#5A6B6B;white-space:nowrap}
.info-content{flex:1;min-width:0}

/* 核心信息行（首页卡片已改用 .core-info-inline 浮排，此定义保留作兜底） */
.core-info-row { display: flex; flex-wrap: nowrap; overflow: hidden; align-items: center; gap: 0.8vw; margin-top: 0.27vw; }
.time-in-core { font-size: 2.67vw; color: #999; flex-shrink: 0; }
.core-info-item { font-size: 2.67vw; color: #5A6B6B; font-weight: 500; white-space: nowrap; flex-shrink: 0; line-height: 1.6; }
.core-info-item:first-child { color: #333; font-weight: 700; font-size: 2.93vw; }
.core-divider { font-size: 2.4vw; color: #A8DDD2; margin: 0 -0.27vw; }
.core-address { font-size: 2.67vw; color: var(--text-secondary, #5A6B6B); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; line-height: 1.6; }

/* ═══════════════════════════════════════════════════════════
   ⭐⭐⭐ 普通帖（is-plain）+ 图片图标 样式改动
   1. 图片图标替换为本地 images/image-icon-photo.png
   2. 普通帖上下留白 2.67vw + 单行标题上下居中白背景
   3. 普通帖图片图标放最左侧（title-row 最前）+ 图标大小=字体大小（3.73vw）
   ════════════════════════════════════════════════════════════ */

/* ---------- ① 图片图标：替换本地图片，去掉伪元素绘制的绿框红点 ---------- */
html body .image-icon {
  /* 图标大小 = 字体大小 3.73vw（和.title font-size一致，保证视觉和文字一样大） */
  width: 3.73vw !important;
  height: 3.73vw !important;
  flex-shrink: 0;
  /* 用本地图片 image-icon-photo.png，cover/contain 按你图片效果选，先 contain */
  background-color: transparent !important;
  background-image: url(../images/image-icon-photo.png) !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: contain !important;
  border-radius: 0.53vw;
  position: relative;
  margin-left: 0;
}
/* 彻底干掉原来 CSS 伪元素画的绿框和红点，防止重叠 */
html body .image-icon::before,
html body .image-icon::after {
  display: none !important;
  content: none !important;
}

/* ---------- ② 普通帖：上下留白 2.67vw + 单行标题居中白背景 ---------- */
html body .info-item.is-plain {
  /* 基类 L260 已经是 padding:2.67vw 4.27vw，这里再锁一次，防止被覆盖 */
  padding-top: 2.67vw !important;
  padding-bottom: 2.67vw !important;
  /* 把 align-items:flex-start → center，让单行内容在白背景上下居中 */
  align-items: center !important;
  /* 基类 min-height:13.33vw 太大，普通帖单行不需要那么高，auto 收缩 */
  min-height: auto !important;
  /* 白色背景（对齐小程序普通帖） */
  background: #fff !important;
}
/* 置顶帖默认卡片：垂直居中/高度与普通帖一致（保留置顶背景渐变，不动 background） */
html body .info-item.is-top:not(.car-card),
html body .info-item.is-super-top:not(.car-card) {
  align-items: center !important;
  min-height: auto !important;
}
/* 普通帖 title-row：改成 flex 横向排列，图标/标题/时间一行搞定，垂直居中 */
html body .info-item.is-plain .title-row,
html body .info-item.is-top:not(.car-card) .title-row,
html body .info-item.is-super-top:not(.car-card) .title-row {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  overflow: visible !important;
  max-height: none !important;
  position: static !important;
  min-width: 0;
  gap: 0.8vw; /* 图标、标题、时间之间的间距 */
}
/* 普通帖 标题：强制单行（white-space:nowrap + ellipsis），撑满中间空间 */
html body .info-item.is-plain .title.merged,
html body .info-item.is-plain .car-title.merged,
html body .info-item.is-top:not(.car-card) .title.merged,
html body .info-item.is-super-top:not(.car-card) .title.merged,
html body .info-item.is-top:not(.car-card) .car-title.merged,
html body .info-item.is-super-top:not(.car-card) .car-title.merged {
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  line-height: 1.4 !important;
  font-size: 3.73vw !important; /* 和置顶帖标题字号一致 */
  /* ★ 强制锁单行最大高度=1.4em，之前ratio=1.71是实际盒高2行，现在锁死最多1行高！ */
  max-height: 1.4em !important;
  height: auto !important;
}
/* 普通帖不需要两行方案C的 float 占位伪元素，直接干掉 */
html body .info-item.is-plain .title.merged::before,
html body .info-item.is-plain .car-title.merged::before,
html body .info-item.is-plain .title.merged::after,
html body .info-item.is-plain .car-title.merged::after,
html body .info-item.is-top:not(.car-card) .title.merged::before,
html body .info-item.is-super-top:not(.car-card) .title.merged::before,
html body .info-item.is-top:not(.car-card) .car-title.merged::before,
html body .info-item.is-super-top:not(.car-card) .car-title.merged::before,
html body .info-item.is-top:not(.car-card) .title.merged::after,
html body .info-item.is-super-top:not(.car-card) .title.merged::after,
html body .info-item.is-top:not(.car-card) .car-title.merged::after,
html body .info-item.is-super-top:not(.car-card) .car-title.merged::after {
  display: none !important;
  content: none !important;
}
/* 普通帖 时间容器 core-info-inline：不要 float:right，改用 flex 横向对齐，垂直居中 */
html body .info-item.is-plain .core-info-inline,
html body .info-item.is-top:not(.car-card) .core-info-inline,
html body .info-item.is-super-top:not(.car-card) .core-info-inline {
  float: none !important;
  clear: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.53vw;
  white-space: nowrap;
  line-height: 1.4 !important;
}
/* 普通帖里的 图片图标（title-row 最前面）：flex 对齐，不要 margin */
html body .info-item.is-plain .title-row > .image-icon,
html body .info-item.is-top:not(.car-card) .title-row > .image-icon,
html body .info-item.is-super-top:not(.car-card) .title-row > .image-icon {
  float: none !important;
  margin: 0 !important;
  flex-shrink: 0;
}
/* 普通帖里的 时间字号 对齐小程序（和置顶帖一样 2.67vw） */
html body .info-item.is-plain .time-in-core,
html body .info-item.is-top:not(.car-card) .time-in-core,
html body .info-item.is-super-top:not(.car-card) .time-in-core {
  font-size: 2.67vw !important;
  color: #999 !important;
}

/* ═══════════════════════════════════════════════════════════
   ★ v2415 修复：删除 paid-new 的 line-clamp 特殊样式
   根因：所有置顶帖 isPaid=true（format.js L264），新帖走 paid-new 分支导致：
     ① 时间放 .title-clamp 外部被 .title-row overflow:hidden 裁切 → 不显示
     ② .core-info-inline float:none → 时间在第二行左侧而非右侧
     ③ 超级置顶 titleCls='paid-new' 而非 'title-super' → 字体变黑
   修复：home.js 不再生成 paid-new 类名，所有置顶帖统一用方案C（float + ::before + max-height）
   ════════════════════════════════════════════════════════════ */

/* ========== 车辆交易卡片（左图右文）========== */
.info-item.car-card { align-items: stretch; padding: 2.13vw 4.27vw; gap: 2.13vw; }
.car-thumb {
  width: 24vw; height: 18.67vw; flex-shrink: 0; position: relative;
  border-radius: 1.33vw; overflow: hidden; background: #f5f7f8;
}
.car-thumb-img { width: 100%; height: 100%; object-fit: cover; }
.car-thumb-count {
  position: absolute; bottom: 0.4vw; right: 0.4vw; background: rgba(0,0,0,.55);
  color: #fff; font-size: 2.13vw; padding: 0.13vw 1.07vw; border-radius: 0.8vw;
}

/* 卡片需相对定位，刷新按钮绝对居中浮于其上 */
.info-item { position: relative; }

/* ========== 刷新按钮（对齐小程序 refresh-btn，绝对居中浮于卡片上） ========== */
/* ★ C方案：按钮 DOM 照常生成，但默认透明；首页列表加载完1秒后 #post-list 加 .refresh-ready 统一淡入。
   避免列表秒显时按钮突兀闪现，同时给 _markMineAsync 异步标记 isMine 留时间，保证按钮出现时机一致。 */
.refresh-btn {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 5; background: transparent; border: none;
  opacity: 0; transition: opacity .4s ease, filter .3s ease;
  cursor: pointer;
}
#post-list.refresh-ready .refresh-btn { opacity: 1; }
/* ★ 首页刷新按钮置灰：视觉变灰 + 过滤 + 鼠标禁用。onclick 里还会硬拦截 data-disabled=true */
.refresh-btn[disabled],
.refresh-btn[disabled='true'],
.refresh-btn.disabled,
.refresh-btn[data-disabled='true'] {
  opacity: .35 !important;
  filter: grayscale(100%) brightness(1.2);
  cursor: not-allowed !important;
  pointer-events: none;
}
.refresh-arrow {
  width: 7.47vw; height: 7.47vw; display: block;
  animation: refresh-bob 1.1s ease-in-out infinite;
}
@keyframes refresh-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-1.33vw); } }

/* ========== 刷新确认弹窗（对齐小程序 modal-mask / modal-center） ========== */
.modal-mask { position: fixed; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0,0,0,.5); z-index: 1600; display: none; }
.modal-mask.modal-center { display: none; align-items: center; justify-content: center; }
.modal-content { background: #fff; border-radius: 3.2vw; width: 80vw; max-width: 520px; overflow: hidden; }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 3.2vw 4.27vw; border-bottom: 1px solid #F2F2F7; }

/* ========== 关注服务号+开启推送 提示弹窗（对齐小程序 oa-service-*） ========== */
.oa-service-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.55); z-index: 1200; display: none; align-items: center; justify-content: center; }
.oa-service-card { background: #fff; border-radius: 3.2vw; width: 88%; max-height: 85vh; overflow-y: auto; padding: 5.33vw 4.27vw calc(4.27vw + env(safe-area-inset-bottom)); box-sizing: border-box; position: relative; animation: popIn 0.22s ease-out; text-align: center; }
.oa-service-close { position: absolute; top: 3.2vw; right: 3.2vw; font-size: 5.33vw; color: #98A8A8; line-height: 1; padding: 1.07vw; z-index: 1; cursor: pointer; }
.oa-service-header { display: flex; flex-direction: column; align-items: center; margin-bottom: 2.13vw; }
/* 公众号标签徽章（对齐小程序 oa-service-badge） */
.oa-service-badge {
  display: inline-block; font-size: 2.67vw; font-weight: 600; color: #fff;
  background: linear-gradient(135deg, #1DB9A6, #28C9B3);
  padding: 0.53vw 2.67vw; border-radius: 1.07vw; margin-bottom: 1.6vw;
}
.oa-service-title { font-size: 4.27vw; font-weight: 700; color: #2D3A3A; }
.oa-service-desc { font-size: 3.47vw; color: #E53935; font-weight: 600; line-height: 1.6; display: block; margin-bottom: 3.73vw; padding: 0 2.67vw; }
/* mine 页的服务号弹窗描述用绿色（对齐小程序 mine.wxss #6B8A84） */
.oa-service-desc.mine-svc-desc { color: #6B8A84; font-weight: 500; }
.oa-service-qr { width: 40vw; height: 40vw; display: block; margin: 0 auto; border-radius: 2.13vw; background: #fff; padding: 1.6vw; box-sizing: border-box; border: 1px solid #E8EDED; }
.oa-service-qr-placeholder { width: 40vw; height: 40vw; margin: 0 auto 3.73vw; border-radius: 2.13vw; background: #F5F7FA; border: 1px dashed #ddd; display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; }
/* QR 加载旋转圆（mine 页服务号弹窗 oa-loading 引用） */
.oa-loading { width: 6.4vw; height: 6.4vw; border: 3px solid #C9EFE6; border-top-color: #1DB9A6; border-radius: 50%; animation: oa-loading-spin 0.8s linear infinite; margin-bottom: 1.6vw; }
@keyframes oa-loading-spin { to { transform: rotate(360deg); } }
.oa-service-ph-text { font-size: 8.53vw; margin-bottom: 1.6vw; }
.oa-service-ph-hint { font-size: 3.2vw; color: #999; }
.oa-service-tip { display: block; font-size: 3.2vw; color: #98A8A8; margin: 2.13vw 0 0; }
.oa-service-follow-btn { display: inline-block; margin: 1.6vw auto 0; background: rgba(29,185,166,0.1); color: #1DB9A6; font-size: 3.2vw; padding: 1.07vw 3.2vw; border-radius: 4vw; cursor: pointer; user-select: none; }
.oa-service-follow-btn:active { opacity: 0.7; }

/* 弹窗内三类订阅开关（对齐小程序 oa-notify-*） */
.oa-notify-list { margin-top: 3.73vw; background: #F7FAFA; border-radius: 2.13vw; overflow: hidden; text-align: left; }
.oa-notify-item { display: flex; align-items: center; justify-content: space-between; padding: 2.93vw 3.2vw; border-bottom: 1px solid #EEF2F2; }
.oa-notify-item:last-child { border-bottom: none; }
.oa-notify-left { flex: 1; padding-right: 2.67vw; }
.oa-notify-name { font-size: 3.73vw; color: #333; }
.oa-notify-desc { display: block; margin-top: 0.8vw; font-size: 2.67vw; color: #999; }
.oa-notify-switch { position: relative; display: inline-block; width: 11.5vw; height: 6.93vw; flex-shrink: 0; cursor: pointer; }
.oa-notify-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; }
.oa-notify-slider { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: #ccc; border-radius: 5.33vw; transition: background 0.2s; }
.oa-notify-slider::after { content: ''; position: absolute; width: 5.6vw; height: 5.6vw; left: 0.67vw; top: 0.67vw; background: #fff; border-radius: 50%; transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.oa-notify-switch input:checked + .oa-notify-slider { background: #1DB9A6; }
.oa-notify-switch input:checked + .oa-notify-slider::after { transform: translateX(4.8vw); }
.oa-notify-foot { display: block; margin-top: 2.13vw; font-size: 2.67vw; color: #aaa; line-height: 1.5; text-align: left; padding: 0 1.07vw; }
.oa-service-confirm { margin-top: 3.73vw; background: linear-gradient(135deg, #1DB9A6, #16A085); color: #fff; font-size: 4vw; font-weight: 600; border-radius: 5.87vw; padding: 2.93vw 0; text-align: center; cursor: pointer; }
.oa-service-confirm:active { opacity: 0.85; }
/* mine 页「我知道了」按钮 → 白底绿字描边（对齐小程序 mine.wxss） */
.oa-service-confirm.mine-svc-confirm { background: #fff; color: #1DB9A6; border: 1px solid #1DB9A6; }
.oa-service-confirm.mine-svc-confirm:active { background: #E8FAF6; opacity: 1; }

/* ====== mine 页通知开关卡片（对齐小程序 oa-notify-card） ====== */
.oa-notify-card {
  margin-top: 3.73vw;
  padding: 3.73vw 3.2vw;
  background: linear-gradient(135deg, #E8FAF6, #F2FCF9);
  border-radius: 2.13vw;
  border: 1px solid #C9EFE6;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.oa-notify-card .oa-notify-name { display: block; font-size: 3.73vw; color: #1C7C6E; font-weight: 600; }
.oa-notify-card .oa-notify-desc { display: block; margin-top: 1.07vw; font-size: 2.93vw; color: #6B8A84; line-height: 1.5; }
/* mine 通知卡片内的按钮（对齐小程序 oa-notify-btn 胶囊按钮） */
.oa-notify-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 5.33vw; min-height: 8.53vw; line-height: 8.53vw;
  font-size: 3.47vw; color: #fff; font-weight: 600;
  background: linear-gradient(135deg, #1DB9A6, #16A085);
  border-radius: 4.27vw; border: none; cursor: pointer;
  align-self: flex-end; margin-top: 2.67vw;
}
.oa-notify-btn:active { opacity: 0.75; }
.modal-header-left { display: flex; align-items: center; gap: 1.6vw; }
.modal-icon { font-size: 4.8vw; }
.modal-title { font-size: 4vw; font-weight: 600; color: #2D3A3A; }
.modal-close { font-size: 5.33vw; color: #999; padding: 0 1.33vw; line-height: 1; cursor: pointer; }
.modal-body { padding: 3.2vw 4.27vw 4.27vw; }
.refresh-sub { font-size: 3.47vw; color: #5A6B6B; text-align: center; margin-bottom: 2.67vw; }
.refresh-info-card { background: #F0FAF8; border-radius: 2.13vw; padding: 2.67vw; text-align: center; font-size: 3.47vw; color: #1DB9A6; margin-bottom: 3.2vw; }
.modal-btns { display: flex; gap: 2.67vw; }
.btn-skip, .btn-buy { flex: 1; height: 11.73vw; border-radius: 5.33vw; border: none; font-size: 3.73vw; font-weight: 600; cursor: pointer; }
.btn-skip { background: #f0f0f0; color: #666; }
.btn-buy { background: linear-gradient(135deg, #1DB9A6, #17A08D); color: #fff; }
.btn-buy:active { opacity: .85; }
.btn-buy:disabled, .btn-buy[disabled='true'], .btn-buy.disabled {
  background: #C8D6D5 !important;
  background-image: none !important;
  color: #ffffff !important;
  opacity: 1;
  cursor: not-allowed;
  border: none;
}
/* 刷新卡套餐选项（对齐小程序 myAds.wxss L346-L364：1:1 rpx→px 翻译） */
.card-options { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 12px; }
.card-option {
  background: #F8F9FB; border: 1px solid #E8ECF0; border-radius: 7px;
  padding: 10px 7px; text-align: center; position: relative; cursor: pointer;
}
.card-option:active { opacity: 0.7; }
.card-option.selected { border-color: #1DB9A6; background: #F0FAF8; }
.card-option.option-recommend { border-color: #FFE0B2; background: #FFFDE7; }
.card-option.option-recommend.selected { border-color: #F57C00; background: #FFF3E0; }
.card-opt-count { font-size: 15px; font-weight: 700; color: #333; display: block; }
.card-opt-price { font-size: 14px; font-weight: 700; color: #1DB9A6; display: block; margin-top: 2px; }
.card-opt-badge {
  position: absolute; top: -2px; right: -2px;
  font-size: 8px; color: #fff; background: #1DB9A6;
  padding: 1px 4px; border-radius: 0 5px 0 5px;
}
.card-opt-badge.badge-hot { background: #F57C00; }
.card-opt-badge.badge-best { background: #E53935; }
.car-info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 0.8vw; }
.car-title-row { display: block; overflow: hidden; max-height: 20.89vw; position: relative; min-width: 0; }  /* 车辆卡标题：4 行 = 3.73vw×1.4×4≈20.89；时间/角标沿用浮动方案不独占行 */
.car-cat-tag { font-size: 2.4vw; padding: 0.27vw 1.6vw; border-radius: 0.8vw; font-weight: 600; flex-shrink: 0; white-space: nowrap; color: #fff; }
.car-title {
  flex: 1; font-size: 3.73vw; color: #2D3A3A; line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
/* 左图右文卡片时间浮第二行右侧 */
.car-time-inline {
  float: right; clear: right; margin-left: 1.06vw;
  background: transparent; font-size: 2.67vw; color: #999;
  line-height: 5.3vw; white-space: nowrap;
}
.car-title.title-top { font-weight: 700; }
.car-title.title-super { color: #0A9585; font-weight: 800; }
.car-attrs { display: flex; flex-wrap: nowrap; overflow: hidden; align-items: center; gap: 0; }
.car-attr { font-size: 2.67vw; color: #555; white-space: nowrap; flex-shrink: 0; }
.car-attr-sep { font-size: 2.4vw; color: #ccc; margin: 0 0.67vw; flex-shrink: 0; }
.car-footer { display: flex; align-items: center; gap: 1.33vw; }
.car-address { font-size: 2.67vw; color: #999; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.car-time { font-size: 2.67vw; color: #999; flex-shrink: 0; }

/* ========== 空状态 ========== */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 10.67vw 4vw; min-height: 53.33vw;
}
.empty-text { font-size: 2.93vw; color: #999; }

/* ========== 加载区域 ========== */
.load-more-area { display: flex; align-items: center; justify-content: center; padding: 2.67vw 0 4vw; gap: 1.33vw; }
.load-more-text { font-size: 2.67vw; color: #999; }
.load-more-done { color: #bbb; }
.loading-spinner-sm { width: 3.47vw; height: 3.47vw; border: 2px solid #E8F8F5; border-top-color: #1DB9A6; border-radius: 50%; animation: spin .8s linear infinite; }

/* ========== 回到顶部 ========== */
.back-to-top {
  position: fixed; right: max(3.2vw, calc(50% - 57.33vw + 3.2vw)); bottom: 25.6vw; z-index: 99;
  opacity: 0; transform: translateY(15px) scale(.6);
  transition: all .3s ease; pointer-events: none;
}
.back-to-top.show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.back-top-btn {
  width: 8.53vw; height: 8.53vw; border-radius: 50%;
  background: rgba(255,255,255,.85); display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px rgba(0,0,0,.12); border: 1px solid rgba(29,185,166,.25);
  cursor: pointer; transition: all .2s;
}
.back-top-btn:active { transform: scale(.9); box-shadow: 0 1px 5px rgba(0,0,0,.08); }
.back-top-arrow { font-size: 4vw; color: #1DB9A6; font-weight: 800; line-height: 1; }

/* ========== 骨架屏 ========== */
.skeleton-list { padding: 1.07vw 0; }
.skeleton-card {
  background: #fff; margin-bottom: 0.4vw; padding: 1.33vw 2.93vw;
  border-radius: 2.13vw; display: flex; gap: 2.13vw;
}
.skeleton-thumb { width: 19.2vw; height: 14.93vw; border-radius: 1.07vw; }
.skeleton-body { flex: 1; display: flex; flex-direction: column; gap: 1.33vw; }
.skeleton-title { height: 2.93vw; width: 65%; }
.skeleton-text { height: 2.13vw; width: 45%; }
.skeleton-text-sm { height: 2.13vw; width: 30%; }

/* ========== 网络错误 ========== */
.network-error { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10.67vw 4vw; }
.network-error-icon { font-size: 36px; margin-bottom: 12px; }
.network-error-text { font-size: 2.93vw; color: #666; margin-bottom: 3.2vw; }
.network-error-btn {
  background: #1DB9A6; color: #fff; padding: 1.6vw 5.07vw; border-radius: 4.27vw;
  font-size: 2.93vw; font-weight: 500; cursor: pointer; border: none;
}

/* ========== 底部操作栏 ========== */
.home-action-bar { display: flex; justify-content: center; gap: 4.27vw; padding: 2.13vw 2.67vw; }
.action-btn-icon {
  display: inline-flex; align-items: center; gap: 0.8vw;
  padding: 1.6vw 4.27vw; background: #fff; border-radius: 4.27vw;
  box-shadow: 0 2px 8px rgba(29,185,166,.08);
  font-size: 2.93vw; font-weight: 500; color: #1DB9A6; cursor: pointer;
  transition: background .15s;
}
.action-btn-icon:active { background: #E8F8F5; }

/* ========== 收藏引导气泡动画 ========== */
@keyframes collectBubbleIn {
  0% { opacity: 0; transform: translateY(-10px); }
  100% { opacity: 1; transform: translateY(0); }
}