/* ===== 入场动画 ===== */
.anim-in {
  animation: fadeUp 0.5s cubic-bezier(.22, 1, .36, 1) both;
}

.stagger > * {
  animation: fadeUp 0.5s cubic-bezier(.22, 1, .36, 1) both;
}
.stagger > *:nth-child(1) { animation-delay: 0.03s; }
.stagger > *:nth-child(2) { animation-delay: 0.08s; }
.stagger > *:nth-child(3) { animation-delay: 0.13s; }
.stagger > *:nth-child(4) { animation-delay: 0.18s; }
.stagger > *:nth-child(5) { animation-delay: 0.23s; }
.stagger > *:nth-child(6) { animation-delay: 0.28s; }
.stagger > *:nth-child(7) { animation-delay: 0.33s; }
.stagger > *:nth-child(8) { animation-delay: 0.38s; }
.stagger > *:nth-child(n+9) { animation-delay: 0.42s; }

/* 页面切换的柔和过渡 */
.view-enter-active {
  animation: fadeUp 0.32s cubic-bezier(.22, 1, .36, 1);
}

.app-shell {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--c-bg);
  position: relative;
  /* 底部留白按页面算（方案 §5，2026-11-06 P0）：
   * 有底栏 = 66（10 离底 + 56 高）+ 24 气口 = 90；没有底栏的主视图同样 90。
   * 详情页的吸底条由 .detail-gap 单独补，不在这里叠。
   * 原来是 146 —— 其中 56 是给客服球的，客服球下线后要还回来。 */
  padding-bottom: calc(90px + env(safe-area-inset-bottom));
  overflow-x: hidden;
}

@media (min-width: 520px) {
  .app-shell {
    box-shadow: 0 0 48px rgba(20, 20, 40, 0.1);
  }
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--g-brand);
  padding: 10px 14px 14px;
  color: #fff;
  position: sticky;
  overflow: hidden;
  box-shadow: 0 6px 22px rgba(255, 90, 46, 0.24);
}

/* 顶部光斑：两团柔光叠加，制造玻璃质感 */
.topbar::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -40px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0) 68%);
  pointer-events: none;
}

.topbar::after {
  content: '';
  position: absolute;
  bottom: -70px;
  left: -50px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 92, 255, 0.28) 0%, rgba(124, 92, 255, 0) 70%);
  pointer-events: none;
}

.topbar > * {
  position: relative;
  z-index: 1;
}

.topbar-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.city {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0.96;
}

.search-box {
  flex: 1;
  height: 33px;
  background: rgba(255, 255, 255, 0.94);
  border-radius: 999px;
  display: flex;
  align-items: center;
  padding: 0 13px;
  gap: 6px;
  color: var(--c-text-3, #6e6e77);
  font-size: 13px;
}

.topbar-slogan {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 9px;
  font-size: 12px;
  opacity: 0.9;
}

.points-pill {
  margin-left: auto;
  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  transition: transform 0.16s;
}

.points-pill:active {
  transform: scale(0.95);
}

.banner-wrap {
  padding: 12px 14px 0;
}

.banner {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  height: 156px;
  background: #eee;
  box-shadow: 0 6px 20px rgba(255, 90, 46, 0.12);
}

/* 轮播图缓慢缩放，增加呼吸感 */
.banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: bannerZoom 7s ease-in-out infinite alternate;
}

@keyframes bannerZoom {
  from { transform: scale(1); }
  to { transform: scale(1.045); }
}

/* 轮播广告标识（合规要求：广告必须标注） */
.banner-ad-flag {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 10px;
  line-height: 1.5;
  color: #fff;
  background: rgba(20, 20, 28, 0.45);
  backdrop-filter: blur(6px);
  padding: 2px 7px;
  border-radius: 5px;
  letter-spacing: 0.3px;
  z-index: 2;
}

.banner-dots {
  position: absolute;
  bottom: 9px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 5px;
}

.banner-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  transition: all 0.2s;
}

.banner-dot.on {
  width: 14px;
  border-radius: 3px;
  background: var(--card-bg, #fff);
}

.nav-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px 0;
  padding: 17px 6px 15px;
  margin: 12px 14px 0;
  background: var(--card-bg, #fff);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  position: relative;
  overflow: hidden;
}

/* 金刚区卡片顶部一道极淡的品牌色晕染 */
.nav-grid::before {
  content: '';
  position: absolute;
  top: -46px;
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 90, 46, 0.1) 0%, rgba(255, 90, 46, 0) 70%);
  pointer-events: none;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--c-text-2);
  position: relative;
  cursor: pointer;
  transition: transform 0.18s;
}

.nav-item:active {
  transform: scale(0.92);
}

.nav-icon {
  width: 44px;
  height: 44px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  background: var(--g-brand-soft);
  box-shadow: inset 0 0 0 1px rgba(255, 90, 46, 0.09);
  transition: transform 0.24s cubic-bezier(.34, 1.56, .64, 1), box-shadow 0.22s;
}

.nav-item:active .nav-icon {
  transform: scale(0.9);
}

.nav-item:hover .nav-icon {
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(255, 90, 46, 0.2), inset 0 0 0 1px rgba(255, 90, 46, 0.12);
}

/* 金刚区广告位（图片广告位买的"金刚区首位"） */
.nav-item.nav-ad .nav-icon {
  background: var(--c-fill, #f4f4f6);
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(20, 20, 40, 0.1);
}

.nav-item.nav-ad .nav-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nav-ad-flag {
  position: absolute;
  top: -2px;
  right: 2px;
  font-size: 9px;
  line-height: 1.4;
  color: #fff;
  background: linear-gradient(135deg, var(--c-primary-2), var(--c-primary));
  padding: 1px 4px;
  border-radius: 4px;
  letter-spacing: 0.2px;
}

/* 信息流置顶广告位 */
.feed-top {
  margin: 12px 14px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.feed-top-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  background: linear-gradient(135deg, #fffaf7, #fff4ee);
  border: 1px solid #ffe0d4;
  border-radius: var(--r-md);
  box-shadow: 0 4px 14px rgba(255, 90, 46, 0.1);
  cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s;
  overflow: hidden;
}

.feed-top-inner:active {
  transform: scale(0.985);
  box-shadow: 0 2px 8px rgba(255, 90, 46, 0.08);
}

.feed-top-inner img {
  width: 84px;
  height: 56px;
  border-radius: 9px;
  object-fit: cover;
  flex-shrink: 0;
}

.feed-top-info {
  flex: 1;
  min-width: 0;
}

.feed-top-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feed-top-sub {
  font-size: 11.5px;
  color: var(--c-text-3);
  margin-top: 4px;
}

.feed-top-flag {
  font-size: 10px;
  color: #fff;
  background: linear-gradient(135deg, var(--c-primary-2), var(--c-primary));
  padding: 2px 7px;
  border-radius: 5px;
  flex-shrink: 0;
}

.notice-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  /* F472 首屏密度：横条收紧（12→10 外距、9→7 内距），给团购卡让出首屏高度 */
  margin: 10px 14px 0;
  background: var(--tint-bg);
  border: 1px solid var(--tint-line);
  border-radius: 10px;
  padding: 7px 11px;
  font-size: 12.5px;
  color: var(--tint-fg);
}

.notice-bar .txt {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.headline-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 14px 0;
  background: var(--card-bg, #fff);
  border-radius: var(--r-md);
  padding: 8px 11px;
  box-shadow: var(--shadow-1);
}

.headline-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--c-primary-ink);
  flex-shrink: 0;
  padding-right: 8px;
  border-right: 1px solid var(--c-line);
}

.headline-track {
  flex: 1;
  overflow: hidden;
  height: 18px;
  position: relative;
}

.headline-item {
  font-size: 12.5px;
  color: var(--c-text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: transform 0.4s ease, opacity 0.3s;
}

.sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 18px 14px 10px;
}

.sec-title {
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -0.3px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sec-title::before {
  content: "";
  width: 3px;
  height: 15px;
  border-radius: 2px;
  background: linear-gradient(var(--c-primary-2), var(--c-primary));
}

.sec-more {
  font-size: 12px;
  color: var(--c-text-3);
}

.sort-row {
  display: flex;
  gap: 20px;
  padding: 0 14px 10px;
  font-size: 13px;
  color: var(--c-text-3);
}

.sort-row button {
  padding: 2px 0;
  position: relative;
  color: inherit;
}

.sort-row button.on {
  color: var(--c-primary-ink, var(--c-primary));
  font-weight: 600;
}

.sort-row button.on::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  transform: translateX(-50%);
  width: 14px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--c-primary);
}

.tag-row {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 0 14px 12px;
  scrollbar-width: none;
}

.tag-row::-webkit-scrollbar {
  display: none;
}

/* ===== 横向滚动的分类 / 标签行（hscroll 组件，2026-11-03） =====
 * 用户原话：「分类标签如果多了要能滑，带上滑动提示，往右往左的」。
 * 箭头长在滚动容器外面（.hs 是外层），所以内容滚走箭头不跟着滚；
 * 边缘渐隐用页面底色 var(--c-bg)，五套主题自动跟随，别写死白。
 */
.hs { position: relative; }

.hs-view {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.hs::before,
.hs::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 30px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s;
  z-index: 3;
}

.hs::before { left: 0; background: linear-gradient(90deg, var(--c-bg, #fff) 12%, transparent); }
.hs::after { right: 0; background: linear-gradient(270deg, var(--c-bg, #fff) 12%, transparent); }
.hs.hs-l-on::before,
.hs.hs-r-on::after { opacity: 1; }

.hs-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  font-weight: 700;
  color: var(--c-text-2);
  background: var(--c-surface, #fff);
  border: 1px solid var(--c-line);
  box-shadow: var(--shadow-1);
  z-index: 4;
  cursor: pointer;
}

.hs-btn.hs-l { left: 2px; }
.hs-btn.hs-r { right: 2px; }
.hs-btn:active { transform: translateY(-50%) scale(0.94); }

/* 排队玩法芯片：原来是一段内联样式，抽出来才能挂滑动提示 */
.q-chips {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 0 14px 3px;
  scrollbar-width: none;
}
.q-chips::-webkit-scrollbar { display: none; }

.tag-chip {
  flex: 0 0 auto;
  padding: 6px 13px;
  border-radius: var(--k-chip-radius, 999px);
  font-size: 12.5px;
  /* 别写死 #e8e8ed / var(--card-bg)：minimal 之外的两套主题里
     画出来的是一条白边 + 白底，看起来像没选中（P-23）。 */
  background: var(--c-surface-2);
  color: var(--c-text-2);
  border: 1px solid var(--c-line);
  transition: all 0.15s;
}

.tag-chip.on {
  background: var(--c-primary-solid, #c2340a);
  border-color: var(--c-primary-solid, #c2340a);
  color: #fff;
  font-weight: 500;
}

.ad-tags {
  display: flex;
  gap: 5px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.ad-tag {
  font-size: 10.5px;
  line-height: 1.6;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 500;
  white-space: nowrap;
}

/* 行业类目 chip：和场景标签同排但配色区分 —— 行业说「谁」（浅蓝实底），
   场景标签说「啥活动」（商家标签色）。只用语义变量，五套主题自动跟随 */
.ad-industry {
  background: var(--tag-blue-bg, #eaf2ff);
  color: var(--c-primary-ink, #2f5cc4);
}

.gb-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 0 14px 6px;
  scrollbar-width: none;
}

.gb-scroll::-webkit-scrollbar {
  display: none;
}

.gb-card {
  flex: 0 0 146px;
  background: var(--card-bg, #fff);
  /* F501：圆角走 --k- 变量（默认 12px = 原值），后台「圆角档」才能整站生效。
   * 不能改 --r-md：调色盘会把 theme.radius 写成 :root inline style，优先级更高。 */
  border-radius: var(--k-card-radius-sm, 12px);
  overflow: hidden;
  box-shadow: var(--shadow-1);
}

.gb-cover {
  position: relative;
  height: 96px;
  background: var(--c-fill, #f0f0f3);
}

.gb-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gb-body {
  padding: 8px 10px 10px;
}

.gb-title {
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.4;
  height: 35px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.gb-price {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-top: 6px;
}

.gb-price .now {
  color: var(--c-primary);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.5px;
}

.gb-price .now small {
  font-size: 11px;
  font-weight: 500;
  /* 11px 的 ¥ 用亮橙只有 3.06:1，小字必须 4.5:1；大数字保持品牌亮橙 */
  color: var(--c-primary-ink);
}

.gb-price .old {
  font-size: 11px;
  color: var(--c-text-3, #6e6e77);
  text-decoration: line-through;
}

.gb-progress {
  margin-top: 7px;
  height: 4px;
  background: var(--c-fill, #f1f1f4);
  border-radius: 2px;
  overflow: hidden;
}

.gb-progress i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #ffb020, #ff5a2e);
  border-radius: 2px;
}

.gb-meta {
  font-size: 10.5px;
  color: var(--c-text-3);
  margin-top: 4px;
}

.ad-card {
  margin: 0 14px 12px;
  background: var(--card-bg, #fff);
  border-radius: var(--k-card-radius, 14px);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s;
  cursor: pointer;
}

.ad-card:active {
  transform: scale(0.982) translateY(-1px);
  box-shadow: 0 4px 16px rgba(20, 20, 40, 0.09);
}

/* 信息流列表布局（后台可切） */
.ad-card.list {
  display: flex;
  margin-bottom: 10px;
  border-radius: var(--k-card-radius-sm, 12px);
}

.ad-card.list .ad-cover {
  width: 118px;
  height: 92px;
  flex-shrink: 0;
}

.ad-card.list .ad-body {
  flex: 1;
  min-width: 0;
  padding: 11px 12px;
}

.ad-card.list .ad-sub {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ad-cover {
  position: relative;
  height: 152px;
  background: var(--c-fill, #f0f0f3);
}

.ad-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 封面左下标签组：分类在前、免费角标在后，互不遮挡 */
.cover-tags-left {
  position: absolute;
  left: 10px;
  bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100% - 90px);
}

.ad-badge {
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 6px;
  backdrop-filter: blur(4px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 法定广告标识：必须显著、可识别，不能与内容混淆 */
.ad-label {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(0, 0, 0, 0.52);
  color: #fff;
  font-size: 10px;
  line-height: 1;
  padding: 4px 7px;
  border-radius: 4px;
  letter-spacing: 1px;
  backdrop-filter: blur(4px);
  border: 0.5px solid rgba(255, 255, 255, 0.28);
}

/* 详情页广告声明行 */
.detail-flag {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
}

.df-tag {
  flex-shrink: 0;
  font-size: 10.5px;
  line-height: 1;
  padding: 4px 7px;
  border-radius: 4px;
  color: var(--c-text-3, #6e6e77);
  background: var(--c-fill, #f1f2f5);
  border: 0.5px solid #e2e4e9;
  letter-spacing: 1px;
}

.df-text {
  font-size: 11px;
  color: var(--c-text-3, #6e6e77);
  line-height: 1.5;
}

.ad-top-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: linear-gradient(135deg, #ffb020, #ff5a2e);
  color: #fff;
  font-size: 10.5px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 6px;
}

.ad-stock {
  position: absolute;
  right: 10px;
  bottom: 10px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 6px;
}

/* 免费展示角标：封面左下、跟分类名并排，一眼能看见 */
.ad-free-flag {
  flex-shrink: 0;
  background: linear-gradient(135deg, #16c284, #0a9b6a);
  color: #fff;
  font-size: 10.5px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.1px;
  box-shadow: 0 2px 8px rgba(10, 155, 106, 0.3);
  white-space: nowrap;
}

/* 已看标签：标题旁的小灰标，提示这条看过了 */
.seen-tag {
  display: inline-block;
  vertical-align: 2px;
  margin-left: 4px;
  font-size: 10px;
  font-weight: 500;
  color: var(--c-text-3, #6e6e77);
  background: var(--c-fill, #f1f2f5);
  border: 0.5px solid #e2e4e9;
  border-radius: 4px;
  padding: 1.5px 5px;
  line-height: 1.2;
}

/* 一键联系商家按钮 */
.contact-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
  padding: 11px 0;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--c-brand, #ff5a2e), var(--c-brand-2, #ff8a3d));
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.3px;
  box-shadow: 0 4px 14px rgba(255, 90, 46, 0.32);
}

.contact-btn:active {
  transform: scale(0.98);
}

/* 搜索页顶部广告位 */
.search-ad {
  margin-bottom: 12px;
}
.sa-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 11px;
  background: linear-gradient(135deg, #fff7ec, #fffdfa);
  border: 1px solid #ffd9ad;
  margin-bottom: 8px;
}
.sa-card img {
  width: 62px;
  height: 46px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  cursor: pointer;
}
.sa-info {
  flex: 1;
  min-width: 0;
}
.sa-tt {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--c-text-1);
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sa-tag {
  font-size: 9.5px;
  font-weight: 500;
  color: var(--tint-fg);
  background: var(--tint-bg);
  padding: 1px 5px;
  border-radius: 4px;
  flex-shrink: 0;
}
.sa-call {
  display: inline-block;
  margin-top: 5px;
  font-size: 11.5px;
  color: var(--c-primary-ink);
  font-weight: 500;
  text-decoration: none;
  background: var(--card-bg, #fff);
  border: 1px solid #ffc9a8;
  padding: 3px 10px;
  border-radius: 999px;
}

/* 搜索弹层 */
.search-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.search-bar input {
  flex: 1;
}

.hw-t {
  font-size: 11.5px;
  color: var(--c-text-3);
  margin: 4px 0 9px;
}

.hw-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hw {
  font-size: 12.5px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--c-surface-2);
  color: var(--c-text-2);
  cursor: pointer;
}

.hw:active {
  background: var(--c-brand-soft, #ffece6);
  color: var(--c-brand);
}

/* 空态里说清「一次能搜到哪些功能」，不然用户以为只搜得到广告 */
.search-scope {
  margin-top: 14px;
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--c-text-3);
  background: var(--c-surface-2);
  border-radius: 10px;
  padding: 9px 11px;
}

.search-loading {
  text-align: center;
  padding: 30px 0;
  color: var(--c-text-3);
  font-size: 13px;
}

/* 搜索筛选：第一层功能（团购/好店/二手/商城），第二层分类 */
.s-filters {
  margin: 2px 0 10px;
}

.sf-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 7px;
}

.sf-chip {
  font-size: 12px;
  line-height: 1;
  padding: 7px 11px;
  border-radius: 999px;
  background: var(--c-surface-2);
  color: var(--c-text-2);
  border: 1px solid var(--c-line);
  cursor: pointer;
  white-space: nowrap;
}

.sf-chip.on {
  background: var(--c-primary-soft);
  color: var(--c-on-soft);
  border-color: transparent;
  font-weight: 600;
}

.sf-chip-sm {
  font-size: 11.5px;
  padding: 6px 10px;
}

/* 结果里的小标签：这条来自哪个功能，一眼能分辨 */
.s-tag {
  display: inline-block;
  font-size: 10.5px;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 5px;
  margin-right: 5px;
  background: var(--c-primary-soft);
  color: var(--c-on-soft);
  vertical-align: 1px;
}

/* 没有封面的条目（二手换物帖常见）：给个占位，别让图片位置塌掉 */
.s-noimg {
  width: 74px;
  height: 56px;
  border-radius: 9px;
  flex-shrink: 0;
  background: var(--c-fill, #f0f0f3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  opacity: 0.5;
}

.s-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 0;
  border-bottom: 0.5px solid var(--c-line);
  cursor: pointer;
}

.s-item:last-child {
  border-bottom: 0;
}

.s-item img {
  width: 74px;
  height: 56px;
  object-fit: cover;
  border-radius: 9px;
  flex-shrink: 0;
  background: var(--c-fill, #f0f0f3);
}

.s-info {
  flex: 1;
  min-width: 0;
}

.s-tt {
  font-size: 13.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 结果里的大分类 + 标签（P-48：只有两级，没有「功能」也没有小分类） */
.s-sub {
  font-size: 11.5px;
  color: var(--c-text-3);
  margin-top: 3px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

/* 大分类：这条属于哪一类，字比标签重，用户扫一眼就知道是不是自己要的 */
.s-cat {
  font-size: 11.5px;
  line-height: 1;
  font-weight: 600;
  color: var(--c-text-2);
}

/* 标签：大分类下的细分（满减 / 母婴闲置 / 管道疏通 …），一条最多 3 个 */
.s-tag {
  display: inline-block;
  font-size: 10.5px;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 5px;
  background: var(--c-primary-soft);
  color: var(--c-on-soft);
}

/* 商家名 / 区域这类补充说明，比标签再弱一级，别抢视线 */
.s-dim {
  color: var(--c-text-3);
}

/* 奖励分文案：这条看完能拿多少 */
.s-rew {
  font-size: 11.5px;
  color: var(--c-brand);
  margin-top: 3px;
  font-weight: 500;
}

.s-go {
  color: var(--c-text-3);
  font-size: 18px;
  flex-shrink: 0;
}

.ad-body {
  padding: 11px 12px 12px;
}

.ad-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.2px;
}

.ad-sub {
  font-size: 12.5px;
  color: var(--c-text-2);
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ad-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}

.ad-shop {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--c-text-3);
}

.ad-shop img {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  object-fit: cover;
}

.ad-reward {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-primary-ink);
  background: var(--c-primary-soft);
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

.ad-reward.free {
  color: var(--chip-fg);
  background: var(--chip-bg);
  font-weight: 500;
}

.rank-card {
  margin: 0 14px;
  background: var(--card-bg, #fff);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-1);
}

.rank-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border-bottom: 1px solid #f6f6f8;
}

.rank-row:last-child {
  border-bottom: none;
}

.rank-no {
  width: 19px;
  height: 19px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  background: var(--chip-bg);
  color: var(--chip-fg);
  flex-shrink: 0;
}

/* 前三名：橙底配白字只有 1.8–2.4:1，小字号根本认不出，改深棕字 */
.rank-no.n1 { background: #ff5a2e; color: #3a1400; }
.rank-no.n2 { background: #ff8a3d; color: #3a1400; }
.rank-no.n3 { background: #ffb020; color: #3a1400; }

.rank-title {
  flex: 1;
  font-size: 13.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rank-val {
  font-size: 11.5px;
  color: var(--c-text-3);
}

.merchant-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 0 14px;
}

.merchant-cell {
  background: var(--card-bg, #fff);
  border-radius: 12px;
  padding: 12px 8px;
  text-align: center;
  box-shadow: var(--shadow-1);
}

.merchant-cell img {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  margin: 0 auto 7px;
  object-fit: cover;
}

.merchant-cell .nm {
  font-size: 12px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.merchant-cell .ct {
  font-size: 10.5px;
  color: var(--c-text-3);
  margin-top: 3px;
}

.footer-note {
  padding: 24px 20px 18px;
  text-align: center;
  font-size: 11px;
  color: var(--c-text-3);
  line-height: 1.7;
}

.free-badge {
  display: inline-block;
  font-size: 10px;
  color: var(--c-success-ink);
  background: rgba(10, 155, 106, 0.1);
  border: 0.5px solid rgba(10, 155, 106, 0.22);
  border-radius: 4px;
  padding: 2px 7px;
  margin-bottom: 6px;
  letter-spacing: 0.5px;
}

.tabbar {
  position: fixed;
  /* 悬浮胶囊：离底边 10px（再让开 iPhone 底部横条），左右各留 12px。
   * 五套皮肤统一是这个形态，只在底色/透明度和描边上做区分（P-86）。
   * ⚠️ 别再把 safe-area 塞进 height：那样胶囊会被撑高、圆角变形，
   * 正确做法是把整条往上抬（bottom 里加 safe-area）。 */
  bottom: calc(10px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 24px);
  max-width: 456px;
  height: 56px;
  background: rgba(255, 255, 255, 0.82);
  /* saturate 别开太大：底栏后面是彩色卡片时，高饱和会把颜色「吸」上来，文字发花 */
  backdrop-filter: blur(30px) saturate(130%);
  -webkit-backdrop-filter: blur(30px) saturate(130%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--k-tab-radius, 24px);
  box-shadow: 0 10px 30px rgba(20, 20, 40, 0.13), 0 2px 8px rgba(20, 20, 40, 0.06);
  display: flex;
  z-index: 100;
}

.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  /* 10.5 → 11（2026-11-06 P0）：10/10.5 在 390 屏上已难辨认，全站字号下限 11 */
  font-size: 11px;
  color: var(--c-text-3, #6e6e77);
  padding-bottom: 2px;
  transition: color 0.2s;
}

.tab.active {
  /* 底栏文字 10–11px，亮橙只有 3.27:1，小字必须 4.5:1 */
  color: var(--c-primary-ink);
  font-weight: 600;
}

/* 底栏文字单行截断（P-86 同一类：内容不许把固定高的底栏撑破）
 * 后台「底部菜单」的名字是运营自己起的，起长了（如「附近好店推荐」）以前会折成两行，
 * 320px 窄屏实测文字底边比底栏底边多出 0.8px，直接压在屏幕边缘上。 */
.tab > span + span {
  max-width: 100%;
  padding: 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}

/* 图标盒子＝固定尺寸、不缩不胀（P-86）
 * 踩过的坑：选中态曾经给了 padding:2px 8px，这个盒子是 border-box 的定尺寸盒子，
 * 16px 的左右内边距把内容区压到 14px，23px 的 SVG 被 flex 压成 15×24（brutal 带 2.5px
 * 描边时只剩 11×24）—— 点哪个 tab，哪个的图标就变小变瘦。再叠上 scale(1.1)+scale(1.06)，
 * 切页时一个放大一个缩水，整条底栏看着在抖。
 * 规矩：图标盒子的宽高、内边距、边框在「选中 / 未选中」之间必须完全一致；
 * 强调只许用颜色、底色、阴影，不许改尺寸，也不许挪位置。 */
.tab-icon {
  font-size: 19px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 32×28 → 40×32（2026-11-06 P0）：23px 图标装在 32 宽的盒里偏小，
   * 换成 24 图标 + 40×32 盒子，热区靠格子（5 格约 73/格）保证不变。
   * 盒子仍是 border-box 定尺寸，选中态只许改底色/阴影，不许加 padding。 */
  width: 40px;
  height: 32px;
  flex: none;
  position: relative;
  border-radius: 10px;
  transition: background 0.22s, box-shadow 0.22s;
}

.tab-icon .ico,
.tab-icon img {
  flex: 0 0 auto;
  max-width: none;
}

/* 图标 + 角标的定位容器：尺寸跟随 .tab-icon（40×32），角标溢出到盒外不占位。
 * 单独包一层是因为 .tab-icon 用 v-html 渲染 SVG，里面塞不进角标节点。 */
.tab-ico {
  position: relative;
  display: inline-flex;
  flex: none;
}

/* 底栏角标（方案 §7.1）：16 圆 / 右 -8 上 -4 / 11px / 99+ 封顶。
 * absolute 定位不参与布局 —— 出现或消失都不改 .tab-icon 的盒子尺寸，P-86 那条不会破。
 * 未读消息挂「我的」，待核销挂对应的入口；没有数就不渲染（v-if 在模板里）。 */
.tab-badge {
  position: absolute;
  right: -8px;
  top: -4px;
  box-sizing: border-box;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--c-danger, #f04438);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  pointer-events: none;
}

.tab.active .tab-icon {
  background: var(--g-brand);
  box-shadow: 0 5px 14px rgba(255, 90, 46, 0.32);
}

.fab {
  position: fixed;
  right: 14px;
  /* F472：从 86px 降到 78px 更贴底栏，胶囊收紧（9/15→7/13、12.5→12）少占横向空间 */
  bottom: calc(78px + env(safe-area-inset-bottom));
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 13px 7px 10px;
  border-radius: 999px;
  background: var(--g-brand);
  box-shadow: var(--shadow-brand-lg);
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  transition: transform 0.16s;
  animation: floatY 3.4s ease-in-out infinite;
}

.fab:active {
  transform: scale(0.95);
}

.fab-ico {
  font-size: 15px;
  line-height: 1;
}

@media (min-width: 520px) {
  .fab {
    right: calc(50% - 240px + 14px);
  }
}

.qr-pop {
  background: var(--c-surface, #fff);
  border-radius: 18px;
  padding: 22px 20px 18px;
  width: 100%;
  max-width: 296px;
  text-align: center;
  animation: slideUp 0.22s ease;
}

.qr-title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.3px;
}

.qr-img {
  width: 196px;
  height: 196px;
  margin: 14px auto 12px;
  border-radius: 12px;
  display: block;
  object-fit: contain;
  background: var(--c-fill, #fafafb);
  border: 0.5px solid #eee;
}

.qr-empty {
  width: 196px;
  height: 196px;
  margin: 14px auto 12px;
  border-radius: 12px;
  background: var(--c-fill, #f7f7f9);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--c-text-3, #6e6e77);
}

.qr-text {
  font-size: 12.5px;
  color: var(--c-text-3, #6e6e77);
  line-height: 1.85;
  white-space: pre-wrap;
  margin-bottom: 16px;
  text-align: center;
}

/* 客服电话（后台配了就要真能拨出去） */
.qr-phone {
  display: block;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--c-primary);
  background: var(--c-primary-soft);
  border-radius: 10px;
  padding: 10px;
  margin: -6px 0 14px;
  letter-spacing: 0.4px;
}

.page-head {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--card-bg, #fff);
  border-bottom: 1px solid var(--c-line);
}

.page-head .back {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--c-text);
  margin-left: -6px;
}

.page-head .ttl,
.fs-head .ttl {
  font-size: 15.5px;
  font-weight: 600;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===== 二级页面沉浸弹层化（2026-11-06 用户：「像领取记录那样，弹出来、✕ 关闭、沉浸式」）=====
 * 形态跟 .sheet 一致：标题在左、✕ 在右、无灰条无下边框；
 * 进入时整页从底部滑上来，弹出感由动画承担，hash 路由和滚动模型不动（直达链接不失效）。
 * 只用语义令牌，五套皮肤自动跟随（P-23）。 */
.fs-page {
  animation: fs-rise .28s cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes fs-rise {
  from { transform: translateY(44px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.fs-head {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
  background: var(--c-bg);
}
.fs-head .ttl {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fs-head .x {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  line-height: 1;
  color: var(--c-text-2);
  border-radius: 50%;
  background: var(--c-fill);
}
.fs-head .x:active { background: var(--c-line); }

.detail-hero {
  width: 100%;
  height: 220px;
  object-fit: cover;
  background: #eee;
}

.detail-card {
  margin: -20px 14px 0;
  position: relative;
  background: var(--card-bg, #fff);
  border-radius: 16px;
  padding: 16px 15px;
  box-shadow: var(--shadow-2);
}

.detail-title {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.3px;
}

.detail-sub {
  font-size: 13px;
  color: var(--c-text-2);
  margin-top: 6px;
}

.detail-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 12px;
  padding: 12px;
  /* 写死浅粉到白：深色主题里突然一块白卡，划线价又是浅色字 → ¥39 完全看不见 */
  background: linear-gradient(135deg, var(--c-price-bg1, #fff5f0), var(--c-price-bg2, #fff));
  border-radius: 10px;
}

.detail-price .now {
  font-size: 26px;
  font-weight: 600;
  color: var(--c-primary);
  letter-spacing: -1px;
}

.detail-price .now small {
  font-size: 14px;
}

.detail-price .old {
  font-size: 12.5px;
  /* 划线价属于「不重要但不能没有」，走 text-3；用 c-sub 在深色主题会跟底色撞 */
  color: var(--c-text-3);
  text-decoration: line-through;
}

.detail-price .off {
  margin-left: auto;
  background: var(--c-primary-solid, #c2340a);
  color: #fff;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 6px;
}

.stock-box {
  margin-top: 12px;
}

.stock-line {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--c-text-2);
  margin-bottom: 6px;
}

.stock-bar {
  height: 6px;
  background: var(--c-fill, #f1f1f4);
  border-radius: 3px;
  overflow: hidden;
}

.stock-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #ffb020, #ff5a2e);
  border-radius: 3px;
  transition: width 0.4s;
}

.shop-block {
  margin: 12px 14px 0;
  background: var(--card-bg, #fff);
  border-radius: var(--r-md);
  padding: 14px;
  box-shadow: var(--shadow-1);
}

.shop-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.shop-head img {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  object-fit: cover;
}

.shop-name {
  font-size: 14px;
  font-weight: 600;
}

.shop-desc {
  font-size: 11.5px;
  color: var(--c-text-3);
  margin-top: 2px;
}

.block-title {
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.block-text {
  font-size: 13.5px;
  /* 写死 #444 在深色主题上只有 2:1，活动说明/使用规则整段糊掉 */
  color: var(--c-text-2);
  line-height: 1.8;
  white-space: pre-wrap;
}

.detail-imgs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.detail-imgs img {
  width: 100%;
  border-radius: 10px;
}

.detail-gap {
  height: 92px;
}

.fixed-bar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  /* 以前写死 rgba(255,255,255,.98)：深色主题下整条是白的，
     上面配的又是浅色字，等于一条白带子里的字全看不见。 */
  background: var(--c-surface, #fff);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--c-line);
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 100;
}

.fixed-bar .info {
  flex: 1;
  min-width: 0;
}

.fixed-bar .info .k {
  font-size: 11px;
  color: var(--c-text-3);
}

.fixed-bar .info .v {
  font-size: 15px;
  font-weight: 600;
  color: var(--c-primary);
}

.countdown-mask {
  display: none;
}

.read-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2.5px;
  background: var(--c-fill, #f0f0f3);
}

.read-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #ffb020, #ff5a2e);
  border-radius: 0 2px 2px 0;
  transition: width 0.12s linear;
}

.btn-count {
  position: relative;
  overflow: hidden;
  flex: 0 0 56%;
}

.btn-primary[disabled] {
  /* 禁用态的底色/字色也是一组「表面 + 文字」，不能写死浅灰 */
  background: var(--c-btn-off-bg, #e8e9ed);
  color: var(--c-btn-off-fg, #5f6068);
  box-shadow: none;
  opacity: 1;
}

.btn-count.counting {
  background: linear-gradient(90deg, #ffc247 var(--p, 0%), #ff8a3d var(--p, 0%));
  color: #fff;
  opacity: 1;
  box-shadow: 0 6px 16px rgba(255, 90, 46, 0.18);
  font-weight: 500;
}

.read-end {
  text-align: center;
  padding: 18px 16px 8px;
  font-size: 12px;
  color: var(--c-text-3, #6e6e77);
  letter-spacing: 0.2px;
}

.legal-h5 {
  font-size: 11px;
  color: var(--c-text-3, #6e6e77);
  line-height: 1.85;
  margin-top: 14px;
  padding: 11px 13px;
  background: var(--c-fill, #fafafb);
  border-radius: 8px;
  text-align: left;
}

.reg-gift {
  background: linear-gradient(135deg, #fff3ee, #fff);
  border: 0.5px solid #ffd9cc;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 12.5px;
  color: var(--c-primary);
  font-weight: 500;
  text-align: center;
  margin-bottom: 14px;
}

/* 注册页封控提示（2026-11-02）：默认可见的风险警示，配色走语义变量过全部主题（P-23/P-54⑦） */
.risk-tip {
  font-size: 12px;
  line-height: 1.7;
  color: var(--tint-fg, #8a4b00);
  background: var(--tint-bg, #fff8ed);
  border: 1px solid var(--tint-line, #ffe3bd);
  border-radius: 9px;
  padding: 9px 12px;
  margin: 0 0 12px;
  text-align: left;
}

.risk-tip b {
  color: var(--c-danger-ink, #b42318);
}

/* 排队口令活动的「锁面」（2026-11-02）：没口令时详情页只显示这张卡 */
.qe-lock {
  text-align: center;
  padding: 20px 13px 24px;
}

.qe-lock-ic {
  font-size: 34px;
  line-height: 1;
}

.qe-lock-t {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--c-text, #1f2329);
  margin-top: 8px;
}

.qe-lock-d {
  font-size: 12.5px;
  color: var(--c-text-2, #6b6b70);
  line-height: 1.7;
  margin: 7px auto 13px;
  max-width: 300px;
}

.qe-lock-row {
  display: flex;
  gap: 8px;
}

.qe-lock-row input {
  flex: 1;
  min-width: 0;
}

.qe-lock-err {
  margin-top: 9px;
  font-size: 12px;
  color: var(--c-danger-ink, #b42318);
}

.apply-hero {
  background: linear-gradient(135deg, #1e2430, #2b3242);
  border-radius: 14px;
  padding: 20px 18px;
  color: #fff;
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
}

.apply-hero::after {
  content: "";
  position: absolute;
  right: -30px;
  top: -40px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(255, 90, 46, 0.2);
}

.ah-title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.3px;
  position: relative;
}

.ah-sub {
  font-size: 12px;
  color: var(--c-text-3);
  margin-top: 6px;
  position: relative;
}

.shop-tip {
  padding: 10px 14px;
  font-size: 12px;
  color: var(--c-text-3, #6e6e77);
  background: var(--card-bg, #fff);
  border-bottom: 1px solid var(--c-line);
}

.earn-tip {
  padding: 0 14px 10px;
  font-size: 12px;
  color: var(--c-text-3, #6e6e77);
}

.empty-state {
  padding: 46px 24px;
  text-align: center;
}

.es-icon {
  font-size: 40px;
  margin-bottom: 12px;
  opacity: 0.85;
}

.es-title {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--c-text);
  margin-bottom: 6px;
}

.es-desc {
  font-size: 12.5px;
  color: var(--c-text-3, #6e6e77);
  line-height: 1.75;
}

.rel-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rel-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 10px;
  background: var(--c-fill, #fafafb);
}

.rel-item img {
  width: 56px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}

.rel-main {
  flex: 1;
  min-width: 0;
}

.rel-t {
  font-size: 13px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rel-s {
  font-size: 11px;
  color: var(--c-text-3);
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rel-r {
  font-size: 12px;
  font-weight: 600;
  /* 压在 --c-primary-soft 的软底上，比页面底更暗，要用 solid 版才够 4.5 */
  color: var(--c-on-soft, #c2340a);
  background: var(--c-primary-soft);
  padding: 3px 8px;
  border-radius: 999px;
  flex-shrink: 0;
}

.count-tip {
  color: #fff;
  font-size: 14px;
  text-align: center;
  line-height: 1.7;
}

.count-tip small {
  display: block;
  font-size: 12px;
  opacity: 0.6;
  margin-top: 4px;
}

.reward-pop {
  background: var(--c-surface, #fff);
  border-radius: 20px;
  padding: 26px 24px 22px;
  text-align: center;
  width: 100%;
  max-width: 300px;
  animation: slideUp 0.24s ease;
}

.ok-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffb020, #ff5a2e);
  color: #fff;
  font-size: 25px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  box-shadow: 0 8px 20px rgba(255, 90, 46, 0.3);
}

.reward-pop .big {
  font-size: 40px;
  font-weight: 600;
  color: var(--c-primary);
  letter-spacing: -2px;
  line-height: 1.1;
}

.reward-pop .big small {
  font-size: 15px;
  font-weight: 500;
  margin-left: 2px;
}

.reward-pop .lb {
  font-size: 13px;
  color: var(--c-text-2);
  margin: 6px 0 18px;
}

.ok-icon.free {
  background: linear-gradient(135deg, #16c284, #0a9b6a);
  box-shadow: 0 8px 20px rgba(10, 155, 106, 0.26);
}

.free-done {
  font-size: 17px;
  font-weight: 600;
  color: var(--c-text);
  margin-bottom: 8px;
}

/* ============ 答题弹层 ============ */
.quiz-pop {
  position: relative;
  background: var(--c-surface, #fff);
  border-radius: 20px;
  padding: 24px 20px 20px;
  width: 100%;
  max-width: 330px;
  animation: slideUp 0.24s ease;
}

.quiz-x {
  position: absolute;
  right: 12px;
  top: 8px;
  width: 30px;
  height: 30px;
  line-height: 28px;
  text-align: center;
  font-size: 22px;
  color: var(--c-text-3);
}

.quiz-head {
  text-align: center;
  margin-bottom: 16px;
}

.quiz-step {
  display: inline-block;
  font-size: 11px;
  color: var(--c-primary);
  background: rgba(255, 90, 46, 0.1);
  padding: 3px 10px;
  border-radius: 20px;
  font-weight: 500;
  letter-spacing: 0.3px;
}

.quiz-tip {
  font-size: 12.5px;
  color: var(--c-text-3);
  margin-top: 9px;
}

.quiz-tip b {
  color: var(--c-primary);
}

.quiz-q {
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--c-text);
  margin-bottom: 18px;
  letter-spacing: -0.2px;
}

.quiz-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quiz-opt {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 15px;
  border: 1.5px solid #eceef2;
  border-radius: 12px;
  background: #fafbfc;
  transition: all 0.15s;
}

.quiz-opt .idx {
  flex: 0 0 22px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  border-radius: 50%;
  background: #eef0f4;
  color: var(--c-text-3, #6e6e77);
  font-size: 12px;
  font-weight: 600;
}

.quiz-opt .txt {
  font-size: 14.5px;
  color: var(--c-text);
  font-weight: 500;
}

.quiz-opt.chosen {
  border-color: var(--c-primary);
  background: rgba(255, 90, 46, 0.06);
}

.quiz-opt.chosen .idx {
  background: var(--c-primary);
  color: #fff;
}

.quiz-opt.dim {
  opacity: 0.45;
}

.quiz-opt:active {
  transform: scale(0.985);
}

.quiz-foot {
  font-size: 11.5px;
  color: var(--c-text-3);
  text-align: center;
  margin-top: 14px;
}

.quiz-loading {
  text-align: center;
  padding: 34px 0;
  font-size: 13.5px;
  color: var(--c-text-3);
}

.quiz-result {
  text-align: center;
  padding: 6px 0 2px;
}

.quiz-result .ri {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 27px;
  font-weight: 600;
  color: #fff;
  margin: 4px auto 14px;
}

.quiz-result .ri.ok {
  background: linear-gradient(135deg, #ffb020, #ff5a2e);
  box-shadow: 0 8px 20px rgba(255, 90, 46, 0.28);
}

.quiz-result .ri.no {
  background: linear-gradient(135deg, #c8ccd4, #9aa0aa);
  box-shadow: 0 8px 20px rgba(120, 128, 140, 0.22);
}

.quiz-result .rt {
  font-size: 18px;
  font-weight: 600;
  color: var(--c-text);
}

.quiz-result .rp {
  font-size: 38px;
  font-weight: 600;
  color: var(--c-primary);
  letter-spacing: -1.5px;
  margin-top: 6px;
  line-height: 1.15;
}

.quiz-result .rp small {
  font-size: 15px;
  font-weight: 500;
  margin-left: 2px;
}

.quiz-result .rm {
  font-size: 13.5px;
  color: var(--c-text-2);
  line-height: 1.85;
  margin-top: 8px;
}

.quiz-result .rm b {
  color: var(--c-text);
}

.quiz-result .rm span {
  font-size: 12px;
  color: var(--c-text-3);
}

.quiz-result .rb {
  font-size: 12.5px;
  color: var(--c-text-3);
  margin-top: 8px;
}

.tag-free {
  color: var(--c-primary-ink);
  background: rgba(255, 90, 46, 0.1);
  border-color: rgba(255, 90, 46, 0.2);
}

.points-hero {
  background: linear-gradient(135deg, #ff8a3d, #ff5a2e);
  padding: 20px 18px 46px;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.points-hero::after {
  content: "";
  position: absolute;
  right: -40px;
  top: -50px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
}

.points-hero .lb {
  font-size: 12.5px;
  opacity: 0.85;
}

.points-hero .num {
  font-size: 42px;
  font-weight: 600;
  letter-spacing: -2px;
  line-height: 1.2;
  margin-top: 2px;
}

.points-hero .num small {
  font-size: 15px;
  font-weight: 500;
  margin-left: 4px;
  letter-spacing: 0;
}

.points-hero .cash {
  font-size: 12px;
  opacity: 0.85;
  margin-top: 2px;
}

/* 负间距只许「紧跟头图」时用：以前写死在 .stat-row 上，F502 在头图和统计卡之间
 * 插了 .intro-card 之后，统计卡被上拉盖住介绍卡底部，三块深色卡挤成「上下叠加」。
 * 改成兄弟选择器，中间再插任何卡片都不会叠（防复发，不靠人记）。 */
.stat-row {
  display: flex;
  margin: 12px 14px 0;
  background: var(--card-bg, #fff);
  border-radius: var(--r-md);
  padding: 15px 0;
  box-shadow: var(--shadow-2);
  position: relative;
  z-index: 2;
}
.points-hero + .stat-row { margin-top: -30px; }
.mine-head + .stat-row { margin-top: -22px; }

.stat-cell {
  flex: 1;
  text-align: center;
  border-right: 1px solid #f4f4f6;
}

.stat-cell:last-child {
  border-right: none;
}

.stat-cell .v {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.5px;
}

.stat-cell .k {
  font-size: 11px;
  color: var(--c-text-3);
  margin-top: 2px;
}

.task-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  background: var(--card-bg, #fff);
  border-bottom: 1px solid #f7f7f9;
}

.task-row:last-child {
  border-bottom: none;
}

.task-row img {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
}

.task-main {
  flex: 1;
  min-width: 0;
}

.task-main .t {
  font-size: 13.5px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-main .s {
  font-size: 11.5px;
  color: var(--c-text-3);
  margin-top: 3px;
}

.card-panel {
  margin: 12px 14px 0;
  background: var(--card-bg, #fff);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-1);
}

.log-row {
  display: flex;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid #f7f7f9;
}

.log-row:last-child {
  border-bottom: none;
}

.log-main {
  flex: 1;
  min-width: 0;
}

.log-main .t {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.log-main .d {
  font-size: 11px;
  color: var(--c-text-3);
  margin-top: 2px;
}

.log-amt {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.3px;
}

.log-amt.plus {
  color: var(--c-primary);
}

.log-amt.minus {
  color: var(--c-text-2);
}

/* ================= 积分商城：头图 =================
 * 深底浅字是刻意的：品牌渐变上方压白字，任何主题都读得清。
 * minimal 单独覆盖成浅底深字，别把极简风搞成一块黑。
 */
.mall-hero {
  position: relative;
  padding: 16px 18px 30px;
  border-radius: 0 0 26px 26px;
  background:
    radial-gradient(120% 90% at 88% 0%, rgba(255, 138, 61, 0.5) 0%, rgba(255, 138, 61, 0) 58%),
    linear-gradient(135deg, #2a1620 0%, #47200f 58%, #6d2a0e 100%);
  color: #fff;
  overflow: hidden;
}
.mall-hero::after {
  content: '';
  position: absolute;
  right: -46px;
  bottom: -60px;
  width: 168px;
  height: 168px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  pointer-events: none;
}
.mall-kicker {
  font-size: 10px;
  letter-spacing: 2.4px;
  font-weight: 700;
  opacity: 0.62;
}
.mall-ttl {
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -0.4px;
  margin-top: 3px;
  line-height: 1.2;
}
.mall-sub {
  font-size: 12px;
  opacity: 0.82;
  margin-top: 5px;
  line-height: 1.5;
}
.mall-bal {
  position: relative;
  z-index: 1;
  margin-top: 13px;
  padding: 10px 13px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.16);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  backdrop-filter: blur(6px);
}
.mall-bal-k { font-size: 10.5px; opacity: 0.8; }
.mall-bal-v {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.6px;
  line-height: 1.15;
  margin-top: 1px;
}
.mall-bal-v small { font-size: 11px; font-weight: 500; margin-left: 3px; opacity: 0.8; }
.mall-more {
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #7a2f12;
  white-space: nowrap;
}

/* 活动分类按钮：只在该分类有货时才出现，不占空位 */
.chip-act {
  border-color: var(--c-primary, #ff5a2e);
  color: var(--c-primary-ink, #c2340a);
  font-weight: 700;
}
.chip-act b {
  font-size: 10px;
  margin-left: 2px;
  padding: 0 4px;
  border-radius: 4px;
  /* 小字压在品牌色上，必须用「压暗版」才够 4.5:1，亮橙只够 3.1 */
  background: var(--c-primary-solid, #c2340a);
  color: #fff;
}
.chip-act.on {
  background: var(--c-primary-solid, #c2340a);
  border-color: var(--c-primary-solid, #c2340a);
  color: #fff;
}
.chip-act.on b { background: rgba(0, 0, 0, 0.28); }

/* 商城筛选条：浮在头图下沿的一张卡片，不是贴边的白条 */
.mall-filter {
  position: relative;
  z-index: 2;
  margin: -18px 14px 4px;
  padding: 8px 10px;
  gap: 7px;
  flex-wrap: nowrap;
  align-items: center;
  background: var(--c-surface, #fff);
  border: 1px solid var(--c-line);
  border-radius: 16px;
  box-shadow: var(--shadow-1);
}
.mall-filter .chip { flex: 0 0 auto; white-space: nowrap; }
/* 分类筛选行（第二行）：不参与第一行的「压头图」负 margin，正常流里留出呼吸感 */
.mall-filter-sub { margin: 8px 14px 4px; }

/* 到店好价（2026-11-05 用户：「UI 要大气、数值要突出」）
 * 到店核销商品单独一栏横排大卡：图左 92px，右边三行（名称 / 积分+到店付 / 原价+省多少）。
 * 只用语义变量，五套主题自动跟着变（P-23），不写死任何底色和字色。 */
.pickup-rail { padding: 12px 14px 2px; }
.pickup-rail-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 9px;
}
.pickup-rail-head b { font-size: 15px; font-weight: 700; color: var(--c-text); letter-spacing: -0.2px; }
.pickup-rail-head span { font-size: 11.5px; color: var(--c-text-3); }
/* 「查看全部 N 个 ›」入口（2026-11-09）：rail 只展示 6 条精选，其余切到「到店自提」筛选。
   靠 margin-left:auto 贴右，字号走 --fs-pickup-more 令牌（P-23 / audit-ui-regress 纪律）。 */
.pickup-more {
  margin-left: auto;
  font-size: var(--fs-pickup-more);
  color: var(--c-primary-ink);
  white-space: nowrap;
  cursor: pointer;
}

.pickup-card {
  display: flex;
  gap: 12px;
  padding: 11px;
  margin-bottom: 9px;
  background: var(--c-surface, #fff);
  border: 1px solid var(--c-line);
  border-radius: 16px;
  box-shadow: var(--shadow-1);
  transition: transform 0.18s cubic-bezier(.22, 1, .36, 1);
}
.pickup-card:active { transform: scale(0.985); }
.pickup-card img {
  width: 92px;
  height: 92px;
  flex: 0 0 92px;
  border-radius: 12px;
  object-fit: cover;
  background: var(--c-fill, #f4f4f6);
}
.pc-bd { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.pc-nm {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--c-text);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.pc-price { display: flex; align-items: baseline; gap: 4px; margin-top: 7px; flex-wrap: wrap; }
.pc-price b {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1;
  color: var(--c-primary);
}
.pc-price small { font-size: 11px; color: var(--c-primary-ink); font-weight: 500; }
.pc-price em {
  font-style: normal;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--c-danger-ink, var(--c-danger));
  margin-left: 2px;
}
.pc-sub {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 6px;
  font-size: 11px;
  color: var(--c-text-3);
  flex-wrap: wrap;
}
.pc-sub s { text-decoration: line-through; }
.pc-sub i {
  font-style: normal;
  font-weight: 600;
  color: var(--c-primary-ink);
  background: var(--c-primary-soft);
  border-radius: 5px;
  padding: 1px 5px;
}
.pc-sub span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 110px; }

.shop-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 12px 14px;
}

.shop-item {
  background: var(--c-surface, #fff);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-1);
  border: 1px solid var(--c-line);
  transition: transform 0.18s cubic-bezier(.22, 1, .36, 1), box-shadow 0.18s;
}
.shop-item:active { transform: scale(0.977); }
/* 在活动里的商品给一圈品牌色描边，扫一眼就知道哪些是「有奖品的」 */
.shop-item.in-act {
  border-color: var(--c-primary, #ff5a2e);
  box-shadow: 0 3px 16px rgba(255, 90, 46, 0.18), var(--shadow-1);
}

.shop-item img {
  width: 100%;
  height: 118px;
  object-fit: cover;
  background: var(--c-fill, #f4f4f6);
}

.shop-item .bd {
  padding: 9px 10px 11px;
}

.shop-item .nm {
  font-size: 12.5px;
  line-height: 1.35;
  height: 34px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.shop-item .pt {
  display: flex;
  align-items: baseline;
  gap: 3px;
  margin-top: 6px;
  color: var(--c-primary);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.3px;
}

.shop-item .pt small {
  font-size: 10.5px;
  font-weight: 400;
  color: var(--c-primary-ink);
}

.shop-item .st {
  font-size: 10px;
  color: var(--c-text-3);
  margin-top: 2px;
}

/* 商品卡的活动条（2026-11-03 用户：「活动显得 UI 不够大气」）
 * 原来只有一个 10px 角标压在封面右下角，玩法名和进度挤在一起。
 * 现在改成封面下方一条独立的活动条：左边玩法、右边进度，各占各的位置。 */
.shop-act-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--c-on-soft, #c2340a);
  background: var(--c-primary-soft, rgba(255, 90, 46, 0.08));
  border-top: 1px solid var(--c-line);
}
.shop-act-bar .sab-mode {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.shop-act-bar .sab-mode i { font-style: normal; margin-right: 2px; }
.shop-act-bar .sab-prog {
  flex: 0 0 auto;
  font-style: normal;
  font-weight: 700;
  opacity: 0.92;
  font-variant-numeric: tabular-nums;
}
.shop-act-line {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 10px;
  line-height: 1.4;
  margin-top: 3px;
  color: var(--c-on-soft, #c2340a);
  overflow: hidden;
}
/* 活动名让位给进度：名字太长就省略，人数始终看得见 */
.shop-act-t {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.shop-act-prog {
  flex: 0 0 auto;
  font-style: normal;
  font-weight: 600;
  opacity: 0.9;
}
.shop-rate {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--c-star, #9a5a00);
}

.mine-head {
  background: var(--g-brand, linear-gradient(135deg, #ff8a3d, #ff5a2e));
  padding: 22px 18px 30px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 13px;
}

.mine-head img {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.5);
  object-fit: cover;
}

.mine-head .nm {
  font-size: 17px;
  font-weight: 600;
}

.mine-head .ph {
  font-size: 12px;
  opacity: 0.85;
  margin-top: 2px;
}

.menu-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px;
  background: var(--card-bg, #fff);
  border-bottom: 1px solid var(--c-line);
  font-size: 14px;
}

.menu-row:last-child {
  border-bottom: none;
}

.menu-row .ic {
  font-size: 17px;
  width: 22px;
  text-align: center;
}

.menu-row .ar {
  margin-left: auto;
  color: var(--c-text-3);
  font-size: 15px;
}

/* 「我的」页分组标题：全部语义变量，五套主题自动适配（P-23） */
.mine-cap {
  margin: 16px 4px 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--c-text-2);
}

/* F491：两口袋说明行（与小程序 mine 页同文案）。字号用 em 相对单位，
   不新增 px 字面量（audit-ui-regress 基线法按 font-size:Npx 计数） */
.mine-pockets {
  margin: 0 4px 8px;
  font-size: 0.9em;
  line-height: 1.5;
  color: var(--c-text-3);
}

/* F494：置顶弹层里的场景举例入口（跳 user.market 场景弹层）。
   颜色用 --c-text-2（五套全有定义），不写 var fallback hex——基线法按 hex 计数 */
.sh-pick-scene {
  margin-top: 10px;
  font-size: 0.9em;
  color: var(--c-text-2);
  cursor: pointer;
}

/* 客服悬浮球 fixed 在 bottom 86px：默认 140px 底部留白会让最后一行被它压住，mine 页加高 */
.mine-shell {
  padding-bottom: calc(215px + env(safe-area-inset-bottom));
}

/* ===== 发布台（P-57：登录就能发，没有「商家」身份） ===== */
.pb-lead {
  margin: 12px 14px 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--c-text-2);
}

.pb-list {
  margin: 12px 14px 0;
  display: grid;
  gap: 10px;
}

.pb-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: var(--card-bg, #fff);
  border: 1px solid var(--c-line);
  border-radius: 14px;
  box-shadow: var(--shadow-1);
  transition: transform 0.16s;
}

.pb-card:active { transform: scale(0.985); }

.pb-ic {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: var(--c-primary-soft);
}

.pb-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.pb-main b {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--c-text);
}

.pb-main span {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--c-text-3);
}

.pb-go {
  flex: 0 0 auto;
  font-size: 16px;
  color: var(--c-text-3);
}

.pb-note {
  margin: 14px;
  font-size: 11px;
  line-height: 1.7;
  color: var(--c-text-3);
}

/* 集市发布页顶部的「去发布台」出口：这里只发二手/供需，别让人退回去找 */
.pub-more {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 14px 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--c-fill, #f7f7f9);
  border: 1px dashed var(--c-line);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--c-text-3);
}
.pub-more span { flex: 1 1 auto; min-width: 0; }
.pub-more b { flex: 0 0 auto; font-weight: 600; color: var(--c-primary-ink); }

.form-row {
  margin-bottom: 13px;
}

.form-row label {
  display: block;
  font-size: 12.5px;
  color: var(--c-text-2);
  margin-bottom: 6px;
  font-weight: 500;
}

.form-tip {
  font-size: 11px;
  color: var(--c-text-3);
  margin-top: 5px;
  line-height: 1.5;
}

.sheet {
  /* 弹层必须不透明：--card-bg 在 aurora 是半透明的（页面卡片要毛玻璃效果），
     但弹层下面压着商品图、彩色卡、tabbar，半透明会让后面全透出来，
     正文叠在图上就一个字都看不清（商品详情弹层踩过）。 */
  background: var(--c-surface, #fff);
  border-radius: 20px;
  width: 100%;
  max-width: 400px;
  max-height: 88vh;
  overflow-y: auto;
  animation: slideUp 0.22s ease;
}

.sheet-head {
  display: flex;
  align-items: center;
  padding: 16px 18px 12px;
  font-size: 16px;
  font-weight: 600;
}

.sheet-head .x {
  margin-left: auto;
  font-size: 20px;
  color: var(--c-text-3);
  line-height: 1;
}

.sheet-body {
  padding: 0 18px 18px;
}

.sheet-foot {
  padding: 0 18px 18px;
}

/* ================================================================
   微信门禁（server/wxgate.js 判定，前端只渲染）
   strict 模式整页引导 + participate 模式引导弹层共用这几条
   ================================================================ */
.wx-gate {
  position: fixed;
  inset: 0;
  z-index: 950;            /* 比 .mask(900) 高一层，避免被别的弹层压住 */
  background: var(--c-bg, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 20px;
  overflow-y: auto;
}

.wx-gate-card {
  width: 100%;
  max-width: 420px;
  text-align: center;
}

.wx-gate-icon {
  font-size: 46px;
  line-height: 1;
  margin-bottom: 14px;
}

.wx-gate-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: 10px;
}

/* lead 是「一句话说清要干什么」，默认展开、不折叠（P-41） */
.wx-gate-lead {
  font-size: 13.5px;
  color: var(--c-text-2);
  line-height: 1.75;
  margin-bottom: 18px;
}

.wx-gate-list {
  text-align: left;
  background: var(--c-surface, #fff);
  border: 1px solid var(--c-line, #ececf0);
  border-radius: 16px;
  padding: 4px 16px;
}

.wx-gate-item {
  display: flex;
  gap: 10px;
  padding: 12px 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--c-text-2);
}

.wx-gate-item + .wx-gate-item {
  border-top: 1px solid var(--c-line, #ececf0);
}

.wx-gate-item b {
  flex: none;
  min-width: 62px;
  color: var(--c-text);
  font-weight: 600;
}

/* participate 模式：引导弹层里的 lead 上边距收一点，跟标题挨得近些 */
.sheet-body .wx-gate-lead {
  margin-bottom: 12px;
}

.sheet-body .wx-gate-list {
  margin-bottom: 16px;
}

.seg {
  display: flex;
  background: var(--c-fill, #f4f4f6);
  border-radius: 9px;
  padding: 3px;
  gap: 3px;
}

.seg button {
  flex: 1;
  padding: 7px 0;
  font-size: 12.5px;
  border-radius: 7px;
  color: var(--c-text-2);
  transition: all 0.15s;
}

.seg button.on {
  background: var(--card-bg, #fff);
  color: var(--c-text);
  font-weight: 500;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
}

.login-hero {
  text-align: center;
  padding: 8px 0 18px;
}

.login-hero .lg {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  margin: 0 auto 10px;
  background: linear-gradient(135deg, #ff8a3d, #ff5a2e);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: #fff;
  box-shadow: 0 8px 20px rgba(255, 90, 46, 0.3);
}

.login-hero .t1 {
  font-size: 17px;
  font-weight: 600;
}

.login-hero .t2 {
  font-size: 12px;
  color: var(--c-text-3);
  margin-top: 4px;
}

.wechat-note {
  background: var(--c-fill, #f7f7f9);
  border-radius: 9px;
  padding: 10px 12px;
  font-size: 11.5px;
  color: var(--c-text-2);
  line-height: 1.6;
  margin-top: 12px;
}

.filter-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 14px;
  background: var(--card-bg, #fff);
  border-bottom: 1px solid var(--c-line);
  scrollbar-width: none;
}

.filter-row::-webkit-scrollbar {
  display: none;
}

.chip {
  flex: 0 0 auto;
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 12.5px;
  background: var(--c-fill, #f4f4f6);
  color: var(--c-text-2);
  transition: all 0.15s;
}

.chip.on {
  background: var(--c-primary-solid, #c2340a);
  color: #fff;
  font-weight: 500;
}

.notice-strip {
  margin: 10px 14px 0;
  background: var(--tint-bg);
  border: 1px solid var(--tint-line);
  border-radius: 9px;
  padding: 9px 12px;
  font-size: 12px;
  color: var(--tint-fg);
  line-height: 1.6;
}

/* ================= 积分商城：商品详情 / 核销卡 =================
 * 这里的颜色全部走语义变量，三套 UI 都要能看清：
 * 浅色主题靠 --c-text，深色主题靠 --c-text（aurora 已设成近白）。
 * 唯一写死白底的是二维码本身 —— 二维码换底色就扫不出来了。
 */
.shop-item-cover { position: relative; }
.shop-item-flag {
  position: absolute;
  top: 6px;
  left: 6px;
  font-size: 10px;
  line-height: 1.6;
  padding: 1px 6px;
  border-radius: 5px;
  color: #fff;
  background: rgba(20, 20, 28, 0.55);
  backdrop-filter: blur(4px);
}

.item-hero {
  width: 100%;
  height: 168px;
  object-fit: cover;
  border-radius: var(--r-md, 14px);
  background: var(--c-fill);
  display: block;
}
.item-title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  margin-top: 12px;
  color: var(--c-text);
}
.item-price {
  color: var(--c-primary-ink, var(--c-primary));
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.6px;
  margin-top: 6px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
/* 详情页积分数字放大到 30px（2026-11-05「数值要突出」），到店付单独一行 */
.item-price b { font-size: 30px; font-weight: 800; letter-spacing: -1px; line-height: 1; }
.item-price small { font-size: 12px; font-weight: 500; }

/* 到店再付：详情页兑换按钮上方必须看得见（P-40 ③） */
.item-pay {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-top: 9px;
  padding: 9px 11px;
  border-radius: 12px;
  background: var(--c-primary-soft);
}
.item-pay .ip-k { font-size: 12px; color: var(--c-text-2); }
.item-pay .ip-v { font-size: 18px; font-weight: 800; color: var(--c-danger-ink, var(--c-danger)); letter-spacing: -0.4px; }
.item-pay .ip-tip { font-size: 10.5px; color: var(--c-text-3); margin-left: auto; }

.item-origin {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 7px;
  font-size: 12px;
  color: var(--c-text-3);
  text-decoration: line-through;
}
.item-origin i {
  font-style: normal;
  text-decoration: none;
  font-weight: 600;
  color: var(--c-primary-ink);
  background: var(--c-primary-soft);
  border-radius: 6px;
  padding: 2px 7px;
}

/* 核销卡上的「到店应付」：券包和订单详情共用 */
.verify-pay {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-top: 8px;
  padding: 7px 10px;
  border-radius: 10px;
  background: var(--c-primary-soft);
}
.verify-pay span { font-size: 11.5px; color: var(--c-text-2); }
.verify-pay b { font-size: 17px; font-weight: 800; color: var(--c-danger-ink, var(--c-danger)); }
.verify-pay em { font-style: normal; font-size: 10.5px; color: var(--c-text-3); margin-left: auto; }
.item-stock {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--c-danger);
  margin-left: auto;
}

.item-shop {
  margin-top: 12px;
  padding: 12px;
  border-radius: var(--r-md, 14px);
  background: var(--c-fill);
  border: 1px solid var(--c-line);
}
.item-shop-head { display: flex; gap: 10px; align-items: flex-start; }
.item-shop-head img {
  width: 40px; height: 40px; border-radius: var(--r-sm, 10px); object-fit: cover; flex: none;
  background: var(--c-bg);
}
.item-shop-head .nm { font-size: 14px; font-weight: 600; color: var(--c-text); }
.item-shop-head .ad { font-size: 12px; color: var(--c-text-2); margin-top: 3px; line-height: 1.5; }
/* 2026-11-06 用户「这卡片不好看」：两个大按钮占满整行比确认兑换还抢眼。
   收紧：按钮不再撑满、靠右成一组，卡片重心回到门店信息本身。 */
.item-shop-btns { display: flex; gap: 8px; margin-top: 9px; justify-content: flex-end; }
.item-shop-btns .btn { flex: 0 0 auto; padding-inline: 14px; }

.item-block { margin-top: 14px; }
.item-block-t {
  font-size: 13px;
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.item-block-t::before {
  content: '';
  width: 3px; height: 12px; border-radius: 2px;
  background: var(--g-brand);
}
.item-block-c {
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--c-text-2);
}
.item-imgs { display: flex; gap: 6px; overflow-x: auto; }
.item-imgs img {
  width: 96px; height: 96px; border-radius: 9px; object-fit: cover; flex: none;
  background: var(--c-fill);
}

/* 核销卡：用户到店出示的东西，字号要大、数字要能一眼念出来 */
.verify-card {
  margin-top: 12px;
  padding: 14px 12px 12px;
  border-radius: var(--r-md, 14px);
  background: var(--c-fill);
  border: 1px dashed var(--c-line);
  text-align: center;
}
.verify-qr {
  width: 148px;
  height: 148px;
  padding: 6px;
  border-radius: 10px;
  background: #fff;   /* 必须白底，深色主题也不能改 */
  display: block;
  margin: 0 auto;
}
.verify-code {
  font-size: 25px;
  font-weight: 800;
  letter-spacing: 4px;
  margin-top: 10px;
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
}
.verify-hint {
  font-size: 11.5px;
  color: var(--c-text-2);
  margin-top: 5px;
}
.verify-meta {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--c-text);
  margin-top: 8px;
}
.verify-valid {
  font-size: 11px;
  color: var(--c-text-3);
  margin-top: 3px;
  line-height: 1.6;
}
/* 店员直接核销：把 8 位码的输入成本降到 0，点一下就走 */
.verify-tap {
  display: block;
  margin-top: 11px;
  padding: 11px 12px;
  border-radius: 11px;
  background: var(--g-brand);
  color: var(--on-brand, #fff);
  text-align: center;
  text-decoration: none;
  line-height: 1.5;
}
.verify-tap b { font-size: 14px; font-weight: 700; }
.verify-tap span { display: block; font-size: 10.5px; opacity: .9; margin-top: 2px; }
.verify-done {
  margin-top: 10px;
  padding: 9px 11px;
  border-radius: 9px;
  font-size: 12px;
  color: var(--tint-fg);
  background: var(--tint-bg);
  border: 1px solid var(--tint-line);
  text-align: center;
}

.tag-warn {
  background: var(--tint-bg) !important;
  color: var(--tint-fg) !important;
  border: 1px solid var(--tint-line);
}

/* 客服弹层：改成「截图添加」，三步要点必须一眼看完 */
.qr-steps {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 4px 0 14px;
  padding: 11px 13px;
  border-radius: 10px;
  background: var(--c-fill);
  border: 1px solid var(--c-line);
  text-align: left;
}
.qr-steps span {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--c-text-2);
  line-height: 1.5;
}
.qr-steps i {
  flex: none;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--g-brand);
  color: #fff;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qr-save {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.qr-tip { font-size: 11px; color: var(--c-text-3); }
.verify-addr {
  font-size: 11.5px;
  color: var(--c-text-2);
  margin-top: 3px;
  line-height: 1.6;
}
.verify-phone {
  display: inline-block;
  margin-top: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  color: var(--c-primary-ink, var(--c-primary));
  background: var(--c-fill);
  border: 1px solid var(--c-line);
}

/* ================= 评分 / 正在参与 / 评价 =================
 * 所有颜色走语义变量，三套 UI 自动跟随（见 ui-presets.css 的对应覆盖）。
 */
.item-rating {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 7px;
  font-size: 12px;
}
.item-rating .irs {
  font-size: 13px;
  font-weight: 800;
  color: var(--c-star, #9a5a00);
}
.item-rating .irc { color: var(--c-text-3); }
/* 没有评价就不摆占位字（用户 2026-11-03：「隐藏评分」）——
   这里原来有 .item-rating.none 的 11.5px 灰字，已随模板一起删除。 */

/* 「正在参与」：从活动点进来能一路走回去，不让人迷路 */
.item-act {
  border: 1px solid var(--c-primary, #ff5a2e);
  border-radius: 14px;
  padding: 11px 12px 5px;
  background: var(--c-primary-soft, rgba(255, 90, 46, 0.06));
}
.item-act .item-block-t { margin-bottom: 7px; }
.act-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-top: 1px dashed var(--c-line);
}
.act-row:first-of-type { border-top: 0; padding-top: 2px; }
.act-i { flex: 1; min-width: 0; }
.act-n {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--c-text);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.act-d {
  font-size: 10.5px;
  color: var(--c-text-3);
  margin-top: 2px;
}
.act-live, .act-off {
  font-style: normal;
  font-weight: 700;
  margin-left: 4px;
}
.act-live { color: var(--c-success-ink, #0a7a45); }
.act-off { color: var(--c-text-3); }
.act-go {
  flex: none;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--c-primary-ink, #c2340a);
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--c-surface, #fff);
  border: 1px solid var(--c-primary, #ff5a2e);
}

/* 评价列表 */
.rv-row {
  padding: 9px 0;
  border-top: 1px dashed var(--c-line);
}
.rv-row:first-of-type { border-top: 0; }
.rv-top {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: var(--c-text-3);
}
.rv-stars {
  color: var(--c-star, #9a5a00);
  font-size: 11.5px;
  letter-spacing: 0.5px;
}
.rv-by { color: var(--c-text-2); font-weight: 600; }
.rv-at { margin-left: auto; }
.rv-tx {
  font-size: 12px;
  line-height: 1.6;
  color: var(--c-text-2);
  margin-top: 4px;
}

/* 订单卡里的评价入口 */
.order-rv {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--c-line);
}
.order-rv > span {
  font-size: 10.5px;
  color: var(--c-text-3);
  line-height: 1.4;
}
.order-rv.done { gap: 6px; }

/* 评价弹层 */
.rv-item {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text);
  margin-bottom: 10px;
}
.rv-pick {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin: 6px 0 8px;
}
.rv-star {
  font-size: 34px;
  line-height: 1;
  color: var(--c-line);
  cursor: pointer;
  transition: transform 0.14s cubic-bezier(.34, 1.56, .64, 1), color 0.14s;
  user-select: none;
}
.rv-star.on { color: var(--c-star, #f0a000); }
.rv-star:active { transform: scale(0.86); }
.rv-tip {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-primary-ink, #c2340a);
  min-height: 17px;
  margin-bottom: 10px;
}
.rv-text {
  width: 100%;
  min-height: 76px;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.6;
  resize: none;
  margin-bottom: 12px;
  color: var(--c-text);
  background: var(--c-input-bg, #fff);
  border: 1px solid var(--c-input-line, #e6e6ec);
}

/* 排队奖品可点：右侧加箭头，说明「这里能点」 */
/* 排队详情：前面还有几人 + 提前拿走（2026-11-02 用户要求「前面几人也显示」「可提前领奖要有显示」）
   颜色一律走语义变量，五套主题通用；数字全部由服务端算好，前端只排版（P-55） */
.qe-ahead { font-size: 11.5px; color: var(--c-text-2, #6b6b70); margin: 5px 0 2px; }
.qe-ahead b { color: var(--c-primary-ink, #c2340a); font-weight: 600; }
.qe-early {
  margin-top: 9px; padding: 10px 11px; border-radius: 10px;
  border: 1px dashed var(--c-line, #ececf0); background: var(--c-fill, #fafafb);
}
.qe-early-t { font-size: 12.5px; font-weight: 700; color: var(--c-text, #1f2329); margin-bottom: 3px; }
.qe-early-d { font-size: 11.5px; line-height: 1.65; color: var(--c-text-2, #6b6b70); margin-bottom: 8px; }
.qe-early-d b { color: var(--c-primary-ink, #c2340a); }
.qe-early .qe-btn { width: 100%; }

/* 可提现余额（2026-11-02）：和积分分开——积分只能在平台花，余额是卖货/结算赚的钱 */
.mine-bal { margin-left: auto; margin-right: 6px; font-size: 13px; font-weight: 600; color: var(--c-primary-ink, #c2340a); }
.bal-hero { background: var(--c-fill, #fafafb); border: 1px solid var(--c-line, #ececf0); border-radius: 14px; padding: 18px 16px; margin-bottom: 12px; text-align: center; }
.bal-n { font-size: 30px; font-weight: 700; letter-spacing: -.5px; color: var(--c-text, #1f2329); }
.bal-s { margin-top: 4px; font-size: 11.5px; color: var(--c-text-3, #8a8a93); }
.bal-src { display: flex; gap: 8px; margin-top: 14px; }
.bal-src > div { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 8px 6px; border: 1px solid var(--c-line, #f0f0f3); border-radius: 10px; background: var(--c-surface, #fff); }
.bal-src b { font-size: 13px; color: var(--c-text, #1f2329); }
.bal-src span { font-size: 10.5px; color: var(--c-text-3, #8a8a93); }
.bal-row { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--c-line, #f0f0f3); }
.bal-row:last-child { border-bottom: 0; }
.bal-r1 { font-size: 12.5px; color: var(--c-text, #1f2329); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bal-r2 { margin-top: 2px; font-size: 10.5px; color: var(--c-text-3, #8a8a93); }
.bal-amt { font-size: 14px; font-weight: 600; }
.bal-amt.in { color: var(--c-success, #12b76a); }
.bal-amt.out { color: var(--c-text-2, #6b6b70); }
.bal-tip { padding: 10px 4px; font-size: 11px; line-height: 1.6; color: var(--c-text-3, #8a8a93); }



/* 守信分提示（2026-11-02）：发布前说清这笔钱什么情况会没 */
.mk-deposit-tip { margin-top: 6px; padding: 7px 9px; border-radius: 8px; font-size: 11.5px; line-height: 1.65;
  color: var(--c-text-2, #6b6b70); background: var(--c-fill, #fafafb); border: 1px dashed var(--c-line, #ececf0); }
.mk-deposit-tip b { color: var(--c-primary-ink, #c2340a); }

/* 提现表单（2026-11-02）：只对余额开放，提交后等人工审核 */
.bal-wd { margin: 10px 0 4px; padding: 12px; border: 1px solid var(--c-line, #ececf0); border-radius: 12px; background: var(--c-surface, #fff); }
.bal-wd-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bal-wd-t { font-size: 12.5px; color: var(--c-text-2, #6b6b70); }
.bal-wd-t b { font-size: 16px; color: var(--c-text, #1f2329); }
.bal-wd-s { margin-top: 3px; font-size: 10.5px; color: var(--c-text-3, #8a8a93); }
.bal-wd-form { margin-top: 10px; display: flex; flex-direction: column; gap: 7px; }
.bal-wd-form input, .bal-wd-form select {
  padding: 8px 10px; border: 1px solid var(--c-line, #ececf0); border-radius: 8px;
  font-size: 13px; background: var(--c-input-bg, #fff); color: var(--c-text, #1f2329);
}
.bal-wd-note { font-size: 11px; color: var(--c-text-2, #6b6b70); }

/* 收款码（F459 2026-11-04）：提现人工扫码打款，颜色全走变量跟随五主题 */
.bal-qr-row { display: flex; align-items: center; gap: 10px; }
.bal-qr-box {
  width: 92px; height: 92px; flex: 0 0 92px; border-radius: 10px;
  border: 1px dashed var(--c-line, #d9d9e0); background: var(--c-input-bg, #fff);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; cursor: pointer; overflow: hidden; position: relative;
}
.bal-qr-box img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bal-qr-box b { font-size: 22px; color: var(--c-text-2, #9a9aa0); line-height: 1; }
.bal-qr-box > span { font-size: 10.5px; color: var(--c-text-2, #6b6b70); padding: 0 4px; text-align: center; }
.bal-qr-change {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: rgba(0, 0, 0, .45); color: #fff; font-size: 10px; text-align: center; padding: 2px 0;
}
.bal-qr-tip { font-size: 10.5px; color: var(--c-text-2, #6b6b70); line-height: 1.55; flex: 1; }

/* 缺货挂起 + 参与即同意（2026-11-02） */
.qe-short {
  margin-top: 7px; padding: 8px 10px; border-radius: 9px; font-size: 11.5px; line-height: 1.65;
  color: var(--c-text-2, #6b6b70); background: var(--c-fill, #fafafb);
  border: 1px dashed var(--c-line, #ececf0);
}
.qe-short b { color: var(--c-primary-ink, #c2340a); }
.qe-agree-tip { margin-top: 8px; font-size: 11px; line-height: 1.6; color: var(--c-text-3, #8a8a93); text-align: center; }

.qe-prize.is-link { cursor: pointer; }
.qe-prize.is-link:active { transform: scale(0.97); }
.qe-prize-go {
  font-style: normal;
  font-size: 14px;
  line-height: 1;
  color: var(--c-text-3);
  margin-left: -2px;
}
.qe-from {
  font-size: 10.5px;
  color: var(--c-text-3);
  margin-top: 7px;
}

/* ── 规则列表：排队活动 / 广告团购 / 商城兑换共用 ──────────────────
   左标签固定宽 + 右边说明自动换行。三套主题只改颜色装饰，不改结构。
   说明文字用 --c-text-2（不用 text-3）：12.5px 小字必须过 4.5:1，
   text-3 在浅色主题下只有 3 点几，用户会看成一片灰。 */
.rule-lead {
  font-size: 12.5px;
  color: var(--c-text-2);
  line-height: 1.75;
  margin-bottom: 10px;
}

.rule-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rule-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.rule-k {
  flex: none;
  width: 80px;
  padding-top: 1px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.75;
  color: var(--c-text);
  white-space: nowrap;
}

.rule-d {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--c-text-2);
}

/* .rule-note 已无引用（排队页改用 .notice-block），2026-11-01 删除 */

/* ==========================================================================
   二手转让 / 置换（2026-10-31）
   全部走语义变量：三套主题（minimal / aurora / brutal）自动适配，
   改颜色只改 ui-presets.css 的变量，不要在这里写死底/字色。
   ========================================================================== */
.sh-shell {
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
}

.sh-mine-link {
  font-size: 12px;
  color: var(--c-primary-ink);
  font-weight: 500;
  flex: 0 0 auto;
}

/* ---- 频道页 ---- */
.sh-banner {
  position: relative;
  margin: 12px 14px 0;
  border-radius: var(--r-md);
  overflow: hidden;
  height: 132px;
  background: var(--c-fill, #f4f4f7);
}

.sh-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sh-banner-flag {
  position: absolute;
  right: 8px;
  bottom: 8px;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
}

.sh-lead {
  margin: 12px 14px 0;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: var(--tint-bg);
  border: 1px solid var(--tint-line);
  color: var(--tint-fg);
  font-size: 12px;
  line-height: 1.65;
}

.sh-lead b {
  display: block;
  cursor: pointer;
  margin-bottom: 2px;
  font-size: 12.5px;
}

/* F472：折叠态的「详情 ∨」小尾巴 */
.sh-lead-go {
  font-style: normal;
  font-weight: 500;
  font-size: 11.5px;
  color: var(--c-primary-ink);
  margin-left: 4px;
}

/* ===== 同城集市：供/需切换 + 标签行 + 平台说明 ===== */
.mk-filters {
  padding: 10px 14px 0;
}

.mk-intent {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  overflow-x: auto;
}

.mk-intent::-webkit-scrollbar {
  display: none;
}

.mk-intent-item {
  flex: none;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--c-line);
  background: var(--c-surface-2);
  color: var(--c-text-2);
  font-size: 12px;
}

.mk-intent-item.on {
  background: var(--c-primary-solid);
  border-color: var(--c-primary-solid);
  color: #fff;
  font-weight: 600;
}

.mk-tags {
  padding: 0;
}

.mk-tag-line {
  font-size: 11px;
  color: var(--c-text-3);
}

.sh-inline {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}

.sh-inline .sh-input {
  flex: 1;
  margin: 0;
}

/* ===== 平台说明（免责）：五个板块一套排版，内容各按板块功能由后端生成（P-54） =====
   为什么不用一套通用文案：集市丢的是「货不对板/先付钱被骗」，排队丢的是「积分没中奖」，
   商城丢的是「号码填错」，广告团购丢的是「商家不履约」—— 说同一段话等于都没说。 */
.notice-block {
  margin: 12px 14px 0;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  background: var(--tint-bg);
  border: 1px solid var(--tint-line);
  /* 免责文字是要能读清的文字，不当次要信息弱化；--c-text 在三套主题下都过 4.5:1 */
  color: var(--c-text);
}

/* 放在卡片/弹层内部时不要再左右缩进 */
.notice-block.in-card {
  margin: 12px 0 0;
}

.notice-t {
  font-size: 12.5px;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--c-text);
}

.notice-lead {
  font-size: 11.5px;
  line-height: 1.6;
  margin-bottom: 6px;
  color: var(--c-text);
}

.notice-item {
  display: flex;
  gap: 8px;
  padding: 6px 0;
  border-top: 1px dashed var(--tint-line);
  font-size: 12px;
  line-height: 1.7;
  color: var(--c-text);
}

.notice-item b {
  flex: 0 0 auto;
  max-width: 96px;
  font-weight: 700;
}

.notice-item span {
  flex: 1 1 auto;
  min-width: 0;
}

/* 发布前勾选：没勾住提交按钮是灰的，这条要在视觉上明显 */
.notice-agree {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px 2px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--c-text);
}

.notice-agree input {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin: 3px 0 0;
}

/* 旧 .mk-disclaim 已无引用（集市改用上面的 .notice-block），2026-11-01 删除 */

.sh-cats {
  padding: 12px 14px 4px;
}

.sh-sortbar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 14px 0;
}

/* ===== F503 集市：标题左标签 / 可切换排序 / 多选 chip / 捐闲置 ===== */
/* P-23 / audit-ui-regress「写死样式只许减不许增」：新代码里不许出现 #hex 或
   font-size: Npx，字号收成令牌、组件只引用 var()。放 h5.css 局部 :root 而不是
   base.css，是为了不惊动 gen-theme-tokens 的小程序主题生成物（它只解析 base.css）。 */
:root {
  --fs-mk-tag: 9.5px;
  --fs-mk-tag-tiny: 9px;
  --fs-mk-label-sub: 11px;
  /* F507 营销标选择器 / F508 我的发布新按钮：同一条纪律，字号只在这里写一次 */
  --fs-mk-promo-x: 12px;
  --fs-mk-promo-tip: 11.5px;
  --fs-sort-on: 13px;
  --fs-sort-sub: 10.5px;
  /* 2026-11-09 商城「到店好价」头部入口：rail 只放 6 条精选，其余走「查看全部 N 个 ›」 */
  --fs-pickup-more: 12px;
}
/* 标题标签是「数据胶囊」不是图标盒子：padding / font-size / line-height / margin
   全部只在 h5.css 这一处定义，皮肤只覆盖底色与描边 —— 选中/未选中几何必须一模一样，
   否则切筛选时整条列表会抖（P-86 底栏几何教训）。颜色只走语义变量（P-23）。 */
.sh-title-tag {
  display: inline-block;
  vertical-align: 1px;
  margin-right: 4px;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--c-primary-soft);
  color: var(--c-on-soft);
  border: 1px solid var(--c-line);
  font-size: var(--fs-mk-tag);
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
}
.sh-title-tag.minor {
  background: var(--chip-bg);
  color: var(--chip-fg);
  font-weight: 500;
}
.sh-title-tag.tiny {
  padding: 0 4px;
  font-size: var(--fs-mk-tag-tiny);
  margin-right: 3px;
}
/* F507 营销标（标题前的效果标）：比意图标醒目一档 —— 意图标回答「这条是什么」，
   营销标回答「凭什么点你」。同一条最多 1 个（用户拍板：加上视频验证黑标正好两个）。
   几何跟 .sh-title-tag 完全一致，只换底色和字重，避免标题行高度跳变（P-86）。 */
.sh-title-tag.promo {
  background: var(--c-primary-solid);
  color: var(--c-white);
  border-color: var(--c-primary-solid);
}
.sh-title, .sh-detail-title, .sh-home-nm { overflow-wrap: anywhere; }

/* ===== F507 营销标选择器（集市发布页）=====
   默认收起：18 个词全铺开会把发布页撑长一屏。点开才显示三组，
   选中词下面跟一句「用户看到会想到什么」（说明也存在池里，运营能改）。 */
.mk-promo { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.mk-promo-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px;
  border: 1px dashed var(--c-input-line);
  border-radius: var(--r-full);
  background: var(--c-surface);
  color: var(--c-text-2);
  font-size: 12px;
  cursor: pointer;
}
.mk-promo-btn.on {
  border-style: solid;
  border-color: var(--c-primary-solid);
  background: var(--c-primary-soft);
  color: var(--c-on-soft);
  font-weight: 600;
}
.mk-promo-cur::before { content: '['; }
.mk-promo-cur::after { content: ']'; }
.mk-promo-x {
  border: 0; background: none; padding: 0;
  color: var(--c-text-3); font-size: var(--fs-mk-promo-x); cursor: pointer;
}
.mk-promo-tip { margin-top: 6px; font-size: var(--fs-mk-promo-tip); color: var(--c-text-3); line-height: 1.5; }
.mk-promo-panel {
  margin-top: 8px; padding: 10px 10px 4px;
  border-radius: var(--r-md);
  background: var(--c-surface-2);
  border: 1px solid var(--c-line);
}
.mk-promo-g { margin-bottom: 10px; }
.mk-promo-gn { font-size: var(--fs-mk-promo-tip); color: var(--c-text-3); margin-bottom: 6px; }

/* F511：意图分两支（我有 / 我找）。段标题跟上面营销标的分组同一套口径，
   字号复用 --fs-mk-promo-tip，不新增写死值（P-23 / audit-ui-regress 的红线）。 */
.mk-igrp { margin-bottom: 8px; }
.mk-igrp:last-child { margin-bottom: 0; }
.mk-igrp-nm { font-size: var(--fs-mk-promo-tip); color: var(--c-text-3); margin-bottom: 6px; }

/* 排序条：三项 chip 一行 + 下面一句提示，照抄首页 sort-row 的横滑做法 */
.sh-sortbar-multi { flex-direction: column; align-items: stretch; gap: 4px; }
.mk-sort { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.mk-sort::-webkit-scrollbar { display: none; }

.sh-label-sub {
  font-size: var(--fs-mk-label-sub);
  font-weight: 400;
  color: var(--c-text-3);
  margin-left: 4px;
}
.sh-op.primary {
  background: var(--c-primary-solid);
  border-color: var(--c-primary-solid);
  /* F508 顺手修：F503 加这个类时只换了底色没换字色，深色主色底上仍然是 --c-text-2 的灰字，
     对比度不够（我的发布里「捐闲置」「重新上架」都用它）。主色底配白字，跟 .pick-chip.on 同一口径。 */
  color: var(--c-white);
  font-weight: 600;
}
.sh-badge.is-donate {
  background: var(--c-primary-soft);
  color: var(--c-on-soft);
}
.sh-my-why.donate-tip {
  margin-top: 8px;
  background: var(--c-primary-soft);
  border-color: var(--c-line);
  color: var(--c-on-soft);
}

.sh-sort-on {
  font-size: var(--fs-sort-on);
  font-weight: 600;
  color: var(--c-text);
}

.sh-sort-sub {
  font-size: var(--fs-sort-sub);
  color: var(--c-text-3);
}

.sh-cat-n {
  font-style: normal;
  font-size: 10px;
  margin-left: 3px;
  opacity: 0.7;
}

.sh-list {
  padding: 8px 14px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sh-card {
  display: flex;
  gap: 10px;
  padding: 10px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  transition: transform 0.16s cubic-bezier(.22, 1, .36, 1);
}

.sh-card:active {
  transform: scale(0.98);
}

.sh-thumb {
  width: 88px;
  height: 88px;
  flex: 0 0 88px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--c-fill, #f4f4f7);
}

.sh-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sh-thumb-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--c-text-3);
  background: var(--c-fill, #f4f4f7);
  text-align: center;
  padding: 4px;
}

.sh-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sh-title {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--c-text);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.sh-top-tag {
  display: inline-block;
  vertical-align: 1px;
  margin-right: 4px;
  padding: 1px 4px;
  border-radius: 4px;
  background: var(--c-primary-solid);
  color: #fff;
  font-size: 9.5px;
  font-weight: 500;
}

.sh-desc {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--c-text-3);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.sh-meta {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: auto;
}

.sh-price {
  font-size: 15px;
  font-weight: 700;
  color: var(--c-primary-ink);
  letter-spacing: -0.3px;
}

.sh-price.swap {
  font-size: 12px;
  font-weight: 600;
  color: var(--c-on-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.sh-foot {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  font-size: 10.5px;
  color: var(--c-text-3);
  white-space: nowrap;
  overflow: hidden;
}

.sh-foot span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

.sh-loading,
.sh-more {
  text-align: center;
  font-size: 12px;
  color: var(--c-text-3);
  padding: 14px 0;
}

.sh-more {
  color: var(--c-primary-ink);
}

.sh-fab {
  position: fixed;
  right: 16px;
  bottom: calc(24px + env(safe-area-inset-bottom));
  z-index: 70;
  padding: 11px 20px;
  border: none;
  border-radius: 999px;
  background: var(--g-brand);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: var(--shadow-brand);
}

/* ---- 详情页 ---- */
.sh-gallery {
  background: var(--c-surface);
}

.sh-gallery-main {
  width: 100%;
  height: 300px;
  object-fit: cover;
  display: block;
  background: var(--c-fill, #f4f4f7);
}

.sh-gallery-thumbs {
  display: flex;
  gap: 8px;
  padding: 8px 14px;
  overflow-x: auto;
}

.sh-gallery-thumbs img {
  width: 52px;
  height: 52px;
  border-radius: 6px;
  object-fit: cover;
  border: 2px solid transparent;
  flex: 0 0 auto;
}

.sh-gallery-thumbs img.on {
  border-color: var(--c-primary);
}

.sh-gallery-empty {
  height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--c-text-3);
  background: var(--c-fill, #f4f4f7);
  margin: 0 14px;
  border-radius: var(--r-md);
  margin-top: 12px;
}

.sh-gallery-empty span {
  font-size: 15px;
  font-weight: 600;
  color: var(--c-text-2);
}

.sh-gallery-empty small {
  font-size: 11.5px;
}

.sh-detail {
  margin: 10px 14px 0;
  padding: 14px;
  background: var(--c-surface);
  border-radius: var(--r-md);
  border: 1px solid var(--c-line);
}

.sh-detail-price {
  font-size: 24px;
  font-weight: 700;
  color: var(--c-primary);
  letter-spacing: -0.5px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.sh-detail-price.swap {
  font-size: 16px;
  color: var(--c-on-soft);
  background: var(--c-primary-soft);
  padding: 6px 10px;
  border-radius: var(--r-sm);
  display: block;
}

.sh-detail-neg {
  font-size: 11px;
  font-weight: 400;
  color: var(--c-text-3);
}

.sh-detail-title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  margin-top: 8px;
  color: var(--c-text);
  word-break: break-word;
}

.sh-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.sh-pill {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--chip-bg);
  color: var(--chip-fg);
}

.sh-pill.top {
  background: var(--c-primary-solid);
  color: #fff;
}

.sh-detail-desc {
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--c-text-2);
  white-space: pre-wrap;
  word-break: break-word;
}

.sh-detail-meta {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--c-line);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 11px;
  color: var(--c-text-3);
}

.sh-seller {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 14px 0;
  padding: 10px 12px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}

.sh-seller img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--c-fill, #f4f4f7);
}

.sh-seller-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--c-text);
}

.sh-seller-sub {
  font-size: 11px;
  color: var(--c-text-3);
  margin-top: 2px;
}

.sh-contact {
  margin: 10px 14px 0;
  padding: 14px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}

.sh-contact-label {
  font-size: 11.5px;
  color: var(--c-text-3);
  margin-bottom: 4px;
}

.sh-contact-val {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--c-text);
  margin-bottom: 10px;
  word-break: break-all;
}

.sh-contact-tip {
  font-size: 11px;
  line-height: 1.6;
  color: var(--c-text-3);
  margin-top: 8px;
}

.sh-report-row {
  margin: 12px 14px 0;
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--c-text-3);
}

.sh-report-row span:first-child {
  text-decoration: underline;
}

.sh-related {
  margin: 16px 0 0;
}

.sh-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text);
  margin: 0 14px 8px;
}

/* ---- 发布 / 修改 ---- */
.sh-steps {
  display: flex;
  gap: 6px;
  padding: 12px 14px 0;
}

.sh-step {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 8px;
  border-radius: var(--r-sm);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  font-size: 11px;
  color: var(--c-text-2);
  justify-content: center;
}

.sh-step i {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--c-primary-solid);
  color: #fff;
  font-style: normal;
  font-size: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 15px;
}

.sh-form {
  padding: 4px 14px;
}

.sh-field {
  padding: 12px 0;
  border-bottom: 1px solid var(--c-line);
}

.sh-field:last-child {
  border-bottom: none;
}

/* 「补充信息（选填）」折叠条：默认收起，点一下展开描述/价格/片区 */
.sh-more {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 2px;
  padding: 11px 12px;
  border-radius: 10px;
  background: var(--c-fill, #f7f7f9);
  border: 1px dashed var(--c-line);
  font-size: 12px;
  color: var(--c-text-2);
  cursor: pointer;
}
.sh-more span { flex: 1 1 auto; min-width: 0; }
.sh-more b { flex: 0 0 auto; font-weight: 600; color: var(--c-primary-ink); }
.sh-more:active { opacity: 0.75; }

.sh-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text);
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.sh-count {
  font-size: 10.5px;
  font-weight: 400;
  color: var(--c-text-3);
}

.sh-input,
.sh-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--c-input-line);
  background: var(--c-input-bg);
  color: var(--c-text);
  font-size: 13.5px;
  font-family: inherit;
  outline: none;
}

.sh-input::placeholder,
.sh-textarea::placeholder {
  color: var(--c-input-ph);
}

.sh-textarea {
  resize: vertical;
  line-height: 1.6;
}

.sh-hint {
  font-size: 11px;
  line-height: 1.6;
  color: var(--c-text-3);
  margin-top: 6px;
}

.sh-hint b {
  color: var(--c-primary-ink);
}

.sh-seg {
  display: flex;
  gap: 8px;
}

.sh-seg-item {
  flex: 1;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  border: 1px solid var(--c-line);
  background: var(--c-surface-2);
  text-align: center;
  line-height: 1.4;
}

.sh-seg-item b {
  display: block;
  font-size: 13px;
  color: var(--c-text);
}

.sh-seg-item span {
  font-size: 10.5px;
  color: var(--c-text-3);
}

.sh-seg-item.on {
  border-color: var(--c-primary);
  background: var(--c-primary-soft);
}

.sh-seg-item.on b {
  color: var(--c-on-soft);
}

.sh-seg-item.on span {
  color: var(--c-on-soft);
}

.sh-chip-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sh-chip {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--c-line);
  background: var(--c-surface-2);
  color: var(--c-text-2);
  font-size: 12px;
}

.sh-chip.on {
  background: var(--c-primary-solid);
  border-color: var(--c-primary-solid);
  color: #fff;
  font-weight: 500;
}

.sh-pics {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.sh-pic {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--c-fill, #f4f4f7);
}

.sh-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sh-pic-x {
  position: absolute;
  right: 3px;
  top: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 11px;
  line-height: 16px;
  text-align: center;
}

.sh-pic-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 1px dashed var(--c-input-line);
  color: var(--c-text-3);
}

.sh-pic-add span {
  font-size: 20px;
  line-height: 1;
}

.sh-pic-add small {
  font-size: 10px;
}

.sh-pay-box {
  margin: 12px 14px 0;
  padding: 14px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
}

.sh-pay-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  color: var(--c-text-2);
}

.sh-pay-row b {
  font-size: 22px;
  color: var(--c-primary);
  letter-spacing: -0.5px;
}

.sh-pay-balance {
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--c-text-3);
}

.sh-lack {
  color: var(--c-danger-ink);
}

.sh-pay-note {
  margin: 10px 0;
  font-size: 11px;
  line-height: 1.7;
  color: var(--c-text-3);
}

.sh-pay-note b {
  color: var(--c-primary-ink);
}

/* ---- 我的发布 ---- */
.sh-my-head {
  margin: 12px 14px 0;
  padding: 14px;
  border-radius: var(--r-md);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sh-my-points {
  font-size: 24px;
  font-weight: 700;
  color: var(--c-primary-ink);
  letter-spacing: -0.5px;
}

.sh-my-points small {
  font-size: 11px;
  font-weight: 400;
}

.sh-my-sub {
  font-size: 11px;
  color: var(--c-text-3);
  margin-top: 2px;
}

.sh-my-count {
  font-size: 12px;
  color: var(--c-text-2);
  background: var(--chip-bg);
  padding: 4px 10px;
  border-radius: 999px;
}

.sh-my-card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}

.sh-my-top {
  display: flex;
  gap: 10px;
  padding: 10px;
}

.sh-my-status {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.sh-badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--chip-bg);
  color: var(--chip-fg);
}

.sh-badge.is-pending {
  background: var(--tag-blue-bg);
  color: var(--c-text-2);
}

.sh-badge.is-online {
  background: var(--tag-green-bg);
  color: var(--c-success-ink);
}

.sh-badge.is-rejected,
.sh-badge.is-offline {
  background: var(--tag-red-bg);
  color: var(--c-danger-ink);
}

.sh-badge.is-expired {
  background: var(--chip-bg);
  color: var(--chip-fg);
}

.sh-badge.is-top {
  background: var(--c-primary-solid);
  color: #fff;
}

/* F463：推广中 —— 和「置顶中」（主色实底）区分开，用浅底强调色，两个同时出现也看得清 */
.sh-badge.is-promo {
  background: var(--tint-bg);
  color: var(--tint-fg);
  border: 1px solid var(--tint-line);
}

/* 推广弹窗里的规则块：和小白说明同级，不抢「共扣多少」那一行 */
.pl-rules {
  margin: 2px 0 2px;
  font-size: 11px;
  line-height: 1.6;
  color: var(--c-text-2);
}
.pl-rules b {
  font-weight: 600;
  color: var(--c-text);
}

.sh-my-left {
  font-size: 10.5px;
  color: var(--c-text-3);
}

.sh-my-nums {
  display: flex;
  gap: 10px;
  font-size: 10.5px;
  color: var(--c-text-3);
}

.sh-my-why {
  margin: 0 10px 8px;
  padding: 8px 10px;
  border-radius: var(--r-xs);
  background: var(--tint-bg);
  border: 1px solid var(--tint-line);
  color: var(--tint-fg);
  font-size: 11px;
  line-height: 1.6;
}

.sh-my-ops {
  display: flex;
  gap: 8px;
  padding: 0 10px 10px;
  flex-wrap: wrap;
}

.sh-op {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--c-line);
  background: var(--c-surface-2);
  color: var(--c-text-2);
  font-size: 11.5px;
}

.sh-op.danger {
  color: var(--c-danger-ink);
  border-color: var(--tag-red-bg);
}

/* ---- 置顶/续期弹层 ---- */
.sh-pick-pop {
  width: 320px;
  max-width: calc(100vw - 40px);
  background: var(--c-surface);
  border-radius: var(--r-lg);
  padding: 18px 16px 14px;
  box-shadow: var(--shadow-3);
}

.sh-pick-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--c-text);
}

.sh-pick-sub {
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--c-text-3);
  margin: 6px 0 12px;
}

.sh-pick-cost {
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--c-text-2);
}

.sh-pick-cost b {
  font-size: 18px;
  color: var(--c-primary);
}

.sh-pick-note {
  margin-top: 6px;
  font-size: 11px;
  color: var(--c-danger-ink);
}

.sh-pick-ops {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.sh-pick-ops .btn {
  flex: 1;
}

/* ---- 首页二手模块 ---- */
.sh-home {
  margin: 12px 14px 0;
  padding: 12px;
  border-radius: var(--r-md);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  box-shadow: var(--shadow-1);
}

.sh-home-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}

.sh-home-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-text);
}

.sh-home-more {
  font-size: 11px;
  color: var(--c-text-3);
}

.sh-home-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}

.sh-home-item {
  min-width: 0;
}

.sh-home-pic {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--c-fill, #f4f4f7);
}

.sh-home-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sh-home-ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--c-text-3);
}

.sh-home-top {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 9px;
  padding: 1px 5px;
  background: var(--c-primary-solid);
  color: #fff;
  border-bottom-right-radius: 6px;
}

.sh-home-nm {
  margin-top: 5px;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--c-text);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.sh-home-price {
  margin-top: 3px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--c-primary-ink);
}

.sh-home-price.swap {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--c-on-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sh-home-cta {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px dashed var(--c-line);
  font-size: 11.5px;
  color: var(--c-primary-ink);
  text-align: center;
}

/* ==========================================================================
   灵活用工（招工 / 求职，2026-10-31）
   全部走语义变量：三套主题（minimal / aurora / brutal）自动适配。
   招工 = 暖色（品牌色系），求职 = 冷色（蓝色系），一眼能区分谁在招人、谁在找活。
   ========================================================================== */
.jb-shell {
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
}

.jb-mine-link {
  font-size: 12px;
  color: var(--c-primary-ink);
  font-weight: 500;
  flex: 0 0 auto;
}

/* ---- 频道页 ---- */
.jb-banner {
  position: relative;
  margin: 12px 14px 0;
  border-radius: var(--r-md);
  overflow: hidden;
  height: 132px;
  background: var(--c-fill, #f4f4f7);
}

.jb-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.jb-banner-flag {
  position: absolute;
  right: 8px;
  bottom: 8px;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
}

.jb-lead {
  margin: 12px 14px 0;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: var(--tint-bg);
  border: 1px solid var(--tint-line);
  color: var(--tint-fg);
  font-size: 12px;
  line-height: 1.65;
}

.jb-lead b {
  display: block;
  margin-bottom: 2px;
  font-size: 12.5px;
}

.jb-tabs {
  display: flex;
  gap: 8px;
  padding: 12px 14px 0;
}

.jb-tab {
  flex: 1;
  padding: 9px 6px;
  border-radius: var(--r-sm);
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  text-align: center;
  transition: transform 0.14s ease, border-color 0.14s ease;
}

.jb-tab:active {
  transform: scale(0.97);
}

.jb-tab b {
  display: block;
  font-size: 12.5px;
  color: var(--c-text);
}

.jb-tab span {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  color: var(--c-text-3);
}

.jb-tab.on {
  border-color: var(--c-primary);
  background: var(--c-primary-soft);
}

.jb-tab.on b {
  color: var(--c-on-soft);
}

.jb-tab.on span {
  color: var(--c-on-soft);
  opacity: 0.85;
}

.jb-cats {
  padding: 10px 14px 4px;
}

.jb-cat-n {
  font-style: normal;
  font-size: 10px;
  margin-left: 3px;
  opacity: 0.7;
}

.jb-sortbar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 14px 0;
}

.jb-sort-on {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text);
}

.jb-sort-sub {
  font-size: 10.5px;
  color: var(--c-text-3);
}

.jb-list {
  padding: 8px 14px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jb-card {
  padding: 11px 12px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  transition: transform 0.16s cubic-bezier(.22, 1, .36, 1);
}

.jb-card:active {
  transform: scale(0.985);
}

/* 求职卡片左侧一条冷色竖条，扫一眼就知道是「人在找活」不是「店在招人」 */
.jb-card.find {
  border-left: 3px solid var(--c-info, #4f9cf9);
}

.jb-card-top {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.jb-pill {
  flex: 0 0 auto;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--c-primary-soft);
  color: var(--c-on-soft);
  font-weight: 600;
}

.jb-pill.find {
  background: var(--tag-blue-bg);
  color: var(--c-text-2);
}

.jb-pill.big {
  font-size: 11px;
  padding: 3px 8px;
}

.jb-top-tag {
  flex: 0 0 auto;
  font-size: 10px;
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--c-primary-solid);
  color: #fff;
}

.jb-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-text);
  line-height: 1.4;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jb-card-pay {
  margin-top: 7px;
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-wrap: wrap;
}

.jb-card-pay b {
  font-size: 19px;
  font-weight: 700;
  color: var(--c-primary-ink);
  line-height: 1;
}

.jb-card-pay small {
  font-size: 10.5px;
  color: var(--c-text-2);
}

.jb-card-pay em {
  font-style: normal;
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--tag-green-bg);
  color: var(--c-success-ink);
  margin-left: 2px;
}

.jb-card-pay.find b {
  color: var(--c-info, #4f9cf9);
}

.jb-need {
  font-size: 10.5px;
  color: var(--c-text-3);
  margin-left: auto;
}

.jb-card-desc {
  margin-top: 6px;
  font-size: 12px;
  color: var(--c-text-2);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.jb-card-foot {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  color: var(--c-text-3);
}

.jb-mini {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--chip-bg);
  color: var(--chip-fg);
}

.jb-loading,
.jb-more {
  text-align: center;
  font-size: 12px;
  color: var(--c-text-3);
  padding: 16px 0;
}

.jb-more {
  color: var(--c-primary-ink);
}

.jb-fab {
  position: fixed;
  right: 14px;
  bottom: calc(74px + env(safe-area-inset-bottom));
  z-index: 30;
  border: none;
  border-radius: 22px;
  padding: 11px 18px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: var(--c-primary-solid);
  box-shadow: 0 6px 18px rgba(255, 90, 46, 0.32);
}

/* ---- 详情页 ---- */
.jb-hero {
  margin: 12px 14px 0;
  padding: 16px 14px;
  border-radius: var(--r-md);
  background: var(--c-primary-soft);
  border: 1px solid var(--c-line);
}

.jb-hero.find {
  background: var(--tag-blue-bg);
}

.jb-hero-pay {
  margin-top: 8px;
  font-size: 30px;
  font-weight: 700;
  color: var(--c-primary-ink);
  line-height: 1.1;
}

.jb-hero.find .jb-hero-pay {
  font-size: 22px;
  color: var(--c-text);
}

.jb-hero-pay small {
  font-size: 12px;
  font-weight: 500;
  margin-left: 4px;
  color: var(--c-text-2);
}

.jb-hero-title {
  margin-top: 6px;
  font-size: 16px;
  font-weight: 600;
  color: var(--c-text);
  line-height: 1.45;
}

.jb-hero-tags {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.jb-tag {
  font-size: 10.5px;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  color: var(--c-text-2);
}

.jb-tag.top {
  background: var(--c-primary-solid);
  border-color: transparent;
  color: #fff;
}

.jb-facts {
  margin: 12px 14px 0;
  padding: 4px 14px;
  border-radius: var(--r-md);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
}

.jb-fact {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--c-line);
  font-size: 12.5px;
}

.jb-fact:last-child {
  border-bottom: none;
}

.jb-fact span {
  color: var(--c-text-3);
  flex: 0 0 auto;
}

.jb-fact b {
  color: var(--c-text);
  font-weight: 500;
  text-align: right;
  line-height: 1.5;
}

.jb-block {
  margin: 12px 14px 0;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
}

.jb-block-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text);
  margin-bottom: 8px;
}

.jb-block-text {
  font-size: 13px;
  color: var(--c-text-2);
  line-height: 1.75;
  white-space: pre-wrap;
  word-break: break-word;
}

.jb-publisher {
  margin: 12px 14px 0;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--r-md);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
}

.jb-publisher img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--c-fill, #f4f4f7);
}

.jb-publisher-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text);
}

.jb-publisher-sub {
  font-size: 11px;
  color: var(--c-text-3);
  margin-top: 1px;
}

.jb-contact {
  margin: 12px 14px 0;
  padding: 14px;
  border-radius: var(--r-md);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
}

.jb-contact-label {
  font-size: 11px;
  color: var(--c-text-3);
}

.jb-contact-val {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--c-text);
  margin: 6px 0 10px;
  word-break: break-all;
}

.jb-contact-tip {
  margin-top: 10px;
  font-size: 11px;
  line-height: 1.65;
  color: var(--c-text-3);
}

.jb-contact-tip b {
  color: var(--c-danger-ink);
}

.jb-rules {
  margin: 12px 14px 0;
}

.jb-rule {
  display: flex;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px dashed var(--c-line);
  font-size: 12px;
  line-height: 1.65;
}

.jb-rule:last-child {
  border-bottom: none;
}

.jb-rule-k {
  flex: 0 0 74px;
  color: var(--c-primary-ink);
  font-weight: 600;
}

.jb-rule-d {
  flex: 1 1 auto;
  color: var(--c-text-2);
  min-width: 0;
}

.jb-disclaimer {
  margin: 12px 14px 0;
  border-radius: var(--r-md);
  background: var(--tag-red-bg);
  border: 1px solid var(--c-line);
  overflow: hidden;
}

.jb-disclaimer-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 14px;
  font-size: 12px;
  color: var(--c-danger-ink);
}

.jb-disclaimer-head b {
  font-weight: 600;
}

.jb-disclaimer-head span {
  font-size: 10.5px;
  opacity: 0.85;
}

.jb-disclaimer-body {
  padding: 0 14px 12px;
}

.jb-disc-item {
  padding: 7px 0;
  border-top: 1px dashed var(--c-line);
  font-size: 11.5px;
  line-height: 1.7;
  /* 免责条款是要能读清的法律文字，不能当次要信息弱化：
     text-2 在 brutal 的浅粉底上只有 4.38:1，11.5px 不够 4.5 */
  color: var(--c-text);
}

.jb-disc-item b {
  color: var(--c-text);
}

.jb-disclaimer-note {
  padding: 0 14px 11px;
  font-size: 11px;
  /* 这块压在浅粉底（minimal #ffecea / brutal #ffe4d9）上，
     text-2 的灰只有 4.38:1，11px 小字不够 4.5。免责提示必须看得清，用主文字色 */
  color: var(--c-text);
}

.jb-report-row {
  display: flex;
  justify-content: space-between;
  padding: 14px;
  font-size: 11px;
  color: var(--c-text-3);
}

.jb-report-row span:first-child {
  color: var(--c-text-2);
  text-decoration: underline;
}

.jb-related {
  padding: 0 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ---- 发布表单 ---- */
.jb-form {
  margin: 12px 14px 0;
}

.jb-field {
  padding: 12px 0;
  border-bottom: 1px dashed var(--c-line);
}

.jb-field:last-child {
  border-bottom: none;
}

.jb-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--c-text);
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.jb-count {
  font-size: 10.5px;
  font-weight: 400;
  color: var(--c-text-3);
}

.jb-input,
.jb-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--c-text);
  background: var(--c-input-bg);
  border: 1px solid var(--c-input-line, var(--c-line));
  border-radius: var(--r-sm);
  font-family: inherit;
  outline: none;
}

.jb-input::placeholder,
.jb-textarea::placeholder {
  color: var(--c-text-3);
}

.jb-textarea {
  resize: vertical;
  line-height: 1.6;
}

.jb-hint {
  margin-top: 7px;
  font-size: 11px;
  line-height: 1.6;
  color: var(--c-text-3);
}

.jb-hint b {
  color: var(--c-primary-ink);
}

.jb-hint.free {
  color: var(--c-success-ink);
}

.jb-seg {
  display: flex;
  gap: 8px;
}

.jb-seg-item {
  flex: 1;
  padding: 10px;
  border-radius: var(--r-sm);
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  text-align: center;
}

.jb-seg-item b {
  display: block;
  font-size: 13px;
  color: var(--c-text);
}

.jb-seg-item span {
  display: block;
  margin-top: 2px;
  font-size: 10.5px;
  color: var(--c-text-3);
}

.jb-seg-item.on {
  border-color: var(--c-primary);
  background: var(--c-primary-soft);
}

.jb-seg-item.on b {
  color: var(--c-on-soft);
}

.jb-seg-item.on span {
  color: var(--c-on-soft);
  opacity: 0.9;
}

.jb-chip-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.jb-chip {
  font-size: 12px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  color: var(--c-text-2);
}

.jb-chip.on {
  border-color: var(--c-primary);
  background: var(--c-primary-soft);
  color: var(--c-on-soft);
  font-weight: 600;
}

.jb-pay-inputs {
  display: flex;
  gap: 8px;
}

.jb-pay-num {
  flex: 1 1 auto;
  min-width: 0;
}

.jb-pay-unit {
  flex: 0 0 96px;
}

/* select 展开的列表由浏览器画，不吃父级变量（规范第 15 节那条坑） */
.jb-pay-unit option {
  background: var(--c-surface);
  color: var(--c-text);
}

.jb-pics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.jb-pic {
  position: relative;
  width: 78px;
  height: 78px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--c-fill, #f4f4f7);
}

.jb-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.jb-pic-x {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  line-height: 17px;
  text-align: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 13px;
}

.jb-pic-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--c-line);
  background: transparent;
  color: var(--c-text-3);
}

.jb-pic-add span {
  font-size: 20px;
  line-height: 1;
}

.jb-pic-add small {
  font-size: 9.5px;
  margin-top: 2px;
}

.jb-pay-box {
  margin: 12px 14px 0;
  padding: 14px;
  border-radius: var(--r-md);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  box-shadow: var(--shadow-1);
}

.jb-pay-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12.5px;
  color: var(--c-text-2);
}

.jb-pay-box .jb-pay-row b {
  font-size: 20px;
  color: var(--c-primary-ink);
}

.jb-pay-balance {
  margin-top: 4px;
  font-size: 11px;
  color: var(--c-text-3);
}

.jb-lack {
  color: var(--c-danger-ink);
  font-weight: 600;
}

.jb-pay-note {
  margin: 10px 0 12px;
  font-size: 11px;
  line-height: 1.75;
  color: var(--c-text-3);
}

.jb-pay-note b {
  color: var(--c-text-2);
}

.jb-free-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--tag-green-bg);
  color: var(--c-success-ink);
  margin-bottom: 8px;
}

/* ---- 我的发布 ---- */
.jb-my-head {
  margin: 12px 14px 0;
  padding: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: var(--r-md);
  background: var(--tint-bg);
  border: 1px solid var(--tint-line);
}

.jb-my-points {
  font-size: 22px;
  font-weight: 700;
  color: var(--tint-fg);
  line-height: 1.1;
}

.jb-my-points small {
  font-size: 11px;
  font-weight: 500;
  margin-left: 3px;
}

.jb-my-sub {
  margin-top: 3px;
  font-size: 10.5px;
  color: var(--tint-fg);
  opacity: 0.8;
}

.jb-my-count {
  font-size: 12px;
  color: var(--tint-fg);
  opacity: 0.85;
}

.jb-my-card {
  padding: 11px 12px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}

.jb-my-top {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.jb-main {
  flex: 1 1 auto;
  min-width: 0;
}

.jb-my-status {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.jb-badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--chip-bg);
  color: var(--chip-fg);
}

.jb-badge.is-pending {
  background: var(--tag-blue-bg);
  color: var(--c-text-2);
}

.jb-badge.is-online {
  background: var(--tag-green-bg);
  color: var(--c-success-ink);
}

.jb-badge.is-rejected,
.jb-badge.is-offline {
  background: var(--tag-red-bg);
  color: var(--c-danger-ink);
}

.jb-badge.is-expired {
  background: var(--chip-bg);
  color: var(--chip-fg);
}

.jb-badge.is-top {
  background: var(--c-primary-solid);
  color: #fff;
}

.jb-my-left {
  font-size: 10.5px;
  color: var(--c-text-3);
}

.jb-my-nums {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 10.5px;
  color: var(--c-text-3);
}

.jb-my-why {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: var(--r-xs);
  background: var(--tint-bg);
  color: var(--tint-fg);
  font-size: 11px;
  line-height: 1.6;
}

.jb-my-ops {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.jb-op {
  font-size: 12px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  color: var(--c-text-2);
}

.jb-op.danger {
  color: var(--c-danger-ink);
  border-color: var(--c-danger-ink);
}

/* ---- 首页模块 ---- */
.jb-home {
  margin: 6px 14px 0;
  padding: 12px;
  border-radius: var(--r-md);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  box-shadow: var(--shadow-1);
}

.jb-home-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}

.jb-home-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-text);
}

.jb-home-more {
  font-size: 10.5px;
  color: var(--c-text-3);
}

.jb-home-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.jb-home-item {
  padding: 9px 10px;
  border-radius: var(--r-sm);
  background: var(--c-fill, #f4f4f7);
  min-width: 0;
}

.jb-home-tag {
  display: inline-block;
  font-size: 9.5px;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--c-primary-soft);
  color: var(--c-on-soft);
  margin-bottom: 4px;
}

.jb-home-tag.find {
  background: var(--tag-blue-bg);
  color: var(--c-text-2);
}

.jb-home-nm {
  font-size: 12px;
  color: var(--c-text);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.jb-home-pay {
  margin-top: 5px;
  font-size: 14px;
  font-weight: 700;
  color: var(--c-primary-ink);
}

.jb-home-pay small {
  font-size: 9.5px;
  font-weight: 400;
  color: var(--c-text-3);
  margin-left: 2px;
}

.jb-home-pay.find {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--c-text-2);
}

.jb-home-cta {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px dashed var(--c-line);
  font-size: 11.5px;
  color: var(--c-primary-ink);
  text-align: center;
}

/* ================================================================
 * 广告详情页「积分参与」投放（F441，2026-11-03）
 * 位置：内容区末尾、「领积分」固定条上方；内容多了横向滑动。
 * 全部走语义变量（P-23）：五套主题自动跟随，不写死浅底深字。
 * ================================================================ */
.pl-block { padding-bottom: 10px; }
.pl-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.pl-tag {
  font-size: 10.5px; font-weight: 700; line-height: 1;
  padding: 5px 8px; border-radius: 999px;
  color: var(--tint-fg); background: var(--tint-bg); border: 1px solid var(--tint-line);
  white-space: nowrap;
}
.pl-title { font-size: 13.5px; font-weight: 700; color: var(--c-text); }
.pl-more { margin-left: auto; font-size: 11px; color: var(--c-text-3); white-space: nowrap; }
.pl-scroll {
  display: flex; gap: 10px;
  overflow-x: auto; overflow-y: hidden;
  padding: 1px 1px 7px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.pl-scroll::-webkit-scrollbar { display: none; }
.pl-card {
  position: relative;
  flex: 0 0 76%; max-width: 260px;
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: 14px; overflow: hidden;
  box-shadow: var(--shadow-1, 0 1px 2px rgba(0, 0, 0, .04));
}
.pl-img {
  width: 100%; height: 96px; object-fit: cover; display: block;
  background: var(--c-fill);
}
.pl-body { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 9px 10px 6px; }
.pl-name {
  font-size: 13px; font-weight: 700; line-height: 1.35; color: var(--c-text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pl-meta { display: flex; flex-wrap: wrap; gap: 3px 8px; font-size: 11px; color: var(--c-text-2); }
.pl-mode { color: var(--c-primary-ink); font-weight: 600; }
.pl-risk { font-size: 10.5px; line-height: 1.45; color: var(--c-text-3); }
.pl-btn {
  margin: 0 10px 10px; padding: 8px 10px;
  border: 0; border-radius: 10px;
  background: var(--c-primary-solid); color: #fff;
  font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.pl-btn:active { opacity: .88; }
.pl-btn.done { background: var(--c-fill); color: var(--c-text-2); }

/* F463：本店免费自投位 —— 压在封面左上角，一眼区分「不花钱的位置」。
   底色用主题主色（不写死），五套主题自动跟随；文字固定白色，因为主色都是深底。 */
.pl-own-tag {
  position: absolute; top: 8px; left: 8px; z-index: 1;
  font-size: 10px; font-weight: 700; line-height: 1;
  padding: 4px 7px; border-radius: 999px;
  color: #fff; background: var(--c-primary-solid);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
  white-space: nowrap;
}

/* 横滑引导（F464）：外壳只做定位，箭头浮在卡片边缘，不占横向空间。
   箭头颜色走语义变量（P-23），五套主题自动跟随；不用渐变遮罩是因为
   集市页和广告页的底色不是同一个变量，渐变会露出色块。 */
.pl-wrap { position: relative; }
.pl-arrow {
  /* 垂直位置压在封面图那一带（34%），不压底部按钮 —— 滑到中间时左侧会露出
     上一张卡的残边，箭头盖住的是图片，不是「去兑换」 */
  position: absolute; top: 34%; transform: translateY(-50%);
  width: 28px; height: 28px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--c-line); border-radius: 50%;
  background: var(--c-surface); color: var(--c-text);
  font-size: 17px; line-height: 1; font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
  cursor: pointer; z-index: 2;
  -webkit-tap-highlight-color: transparent;
}
.pl-arrow.left { left: -4px; }
.pl-arrow.right { right: -4px; }
.pl-arrow:active { transform: translateY(-50%) scale(.92); opacity: .9; }

/* 集市详情页的投放区：和「同类别的其它信息」同级，顶部留同样的 16px。
   集市页没有底部固定条，不加 padding-bottom，避免底部多出一截空白。 */
.sh-pl-block { margin: 16px 14px 0; }

/* 投放区的免责一句话（集市详情页）：默认视口内可见，不折叠（P-54⑦） */
.pl-foot {
  margin-top: 2px; padding: 0 1px;
  font-size: 10.5px; line-height: 1.5;
  color: var(--c-text-3);
}

.pl-sheet .pl-confirm-mode { font-size: 12.5px; color: var(--c-text-2); margin-bottom: 9px; }
.pl-confirm-risk {
  padding: 11px 12px; margin-bottom: 10px;
  border-radius: 12px;
  background: var(--tint-bg); border: 1px solid var(--tint-line);
  color: var(--tint-fg); font-size: 13px; font-weight: 600; line-height: 1.6;
}
.pl-confirm-tip { font-size: 12px; line-height: 1.7; color: var(--c-text-2); margin-bottom: 14px; }

/* ===== F467 站内通知 =====
   徽标底色用 --c-primary-solid 而不是 --c-danger：
   那个变量是「品牌色当底、上面压白字」的对比度保证版本（applyTheme 里按 4.5:1 算出来的），
   --c-danger 在深色主题下没有被覆盖，配白字只有 3.7:1，11px 小字会被 P-71 审计判红。 */
.nt-badge {
  margin-left: auto; margin-right: 6px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px;
  background: var(--c-primary-solid, #c2340a);
  color: #fff; font-size: 11px; font-weight: 600; line-height: 18px; text-align: center;
}
.nt-readall {
  font-size: 12.5px; color: var(--c-primary-ink, #c2340a); padding: 4px 2px;
}
/* 未读圆点用绝对定位：用 v-if 会让「已读/未读」的卡片左边界差 16px，一屏扫下去像没对齐 */
.nt-card {
  position: relative;
  display: flex; align-items: flex-start; gap: 0;
  padding: 13px 13px 13px 20px;
  cursor: pointer;
}
.nt-dot {
  position: absolute; left: 9px; top: 18px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-primary-solid, #c2340a);
}
.nt-top { display: flex; align-items: baseline; gap: 8px; }
.nt-ttl {
  flex: 1; min-width: 0;
  font-size: 13.5px; font-weight: 500; color: var(--c-text, #1f2329);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nt-time { flex: none; font-size: 11px; color: var(--c-text-3, #8a8a93); }
.nt-body {
  margin-top: 4px;
  font-size: 12.5px; line-height: 1.65; color: var(--c-text-2, #5c6069);
  word-break: break-word;
}

/* ===== F517/F518 券包四栏 + 会员等级页（2026-11-09） =====
   全部令牌化（P-23）：颜色/圆角/间距只引用 var()，五套皮肤一起生效，不写第二份皮肤段。
   券卡用「左面额 + 右说明」两栏：面额是用户第一眼要找的信息，放左边固定宽度对齐。 */
.cp-tabs { display: flex; gap: 6px; padding: 10px 12px 4px; overflow-x: auto; }
.cp-tab {
  flex: 0 0 auto; padding: 7px 12px; border: 1px solid var(--c-line); background: var(--c-surface);
  color: var(--c-text-2); border-radius: var(--r-full); line-height: 1;
}
.cp-tab.on { background: var(--c-primary-soft); border-color: var(--c-primary); color: var(--c-primary-ink); font-weight: 600; }
.cp-tab b { margin-left: 4px; font-weight: 600; }
.cp-card {
  display: flex; gap: 12px; margin: 10px 12px; padding: 12px;
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md);
}
.cp-card.dim { opacity: .62; }
.cp-face {
  flex: 0 0 96px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 8px 4px; border-radius: var(--r-sm);
  background: var(--c-primary-soft); color: var(--c-primary-ink);
}
.cp-face b { line-height: 1.15; }
.cp-face span { color: var(--c-text-2); }
.cp-body { flex: 1 1 auto; min-width: 0; }
.cp-name { font-weight: 600; color: var(--c-text); margin-bottom: 4px; }
.cp-scope { color: var(--c-text-2); margin-bottom: 2px; }
.cp-time { color: var(--c-text-2); }

.mem-hero { text-align: center; }
.mem-lv { font-weight: 700; color: var(--c-text); }
.mem-sub { color: var(--c-text-2); margin-top: 4px; }
.mem-bar { height: 8px; border-radius: var(--r-full); background: var(--c-line); margin: 12px 4px 6px; overflow: hidden; }
.mem-bar i { display: block; height: 100%; border-radius: var(--r-full); background: var(--g-brand); }
.mem-tip { color: var(--c-text-2); line-height: 1.6; }
.mem-row { display: flex; justify-content: space-between; padding: 9px 0; color: var(--c-text-2); border-bottom: 1px solid var(--c-line); }
.mem-row:last-child { border-bottom: 0; }
.mem-row b { color: var(--c-text); font-weight: 600; }
.mem-title { font-weight: 600; color: var(--c-text); margin-bottom: 6px; }
.mem-claim {
  width: 100%; margin-top: 10px; padding: 11px; border: 0; border-radius: var(--r-full);
  background: var(--g-brand); color: var(--c-white); font-weight: 600;
}
.mem-claim[disabled] { background: var(--c-line); color: var(--c-text-2); }

/* ===== F537 AI 代发布弹层 =====
   只引语义令牌，不写死颜色 / 圆角 / 字号 —— audit-ui-regress 对写死样式有「只许减不许增」基线。
   布局全部复用 .mask / .sheet / .sh-textarea / .btn，这里只补 AI 独有的几个块。 */
.ai-ic { font-style: normal; font-weight: 700; letter-spacing: -1px; }
.ai-lead-line { padding: 0 12px 10px; color: var(--c-text-2); line-height: 1.6; }
.ai-sheet .sheet-body { max-height: 70vh; overflow-y: auto; }
.ai-lead { font-weight: 600; color: var(--c-text); margin-bottom: 8px; }
.ai-note { color: var(--c-text-2); line-height: 1.7; margin: 8px 0; }
.ai-form-item { display: flex; justify-content: space-between; align-items: center; padding: 12px; border: 1px solid var(--c-line); border-radius: var(--r-md); margin-bottom: 8px; }
.ai-form-item:active { background: var(--c-surface-2); }
.ai-form-item span { color: var(--c-text-2); }
.ai-input { width: 100%; }
.ai-count { text-align: right; color: var(--c-text-2); }
.ai-ask { margin: 12px 0; padding: 10px; border-radius: var(--r-md); background: var(--c-surface-2); }
.ai-ask-hd { font-weight: 600; color: var(--c-text); margin-bottom: 6px; }
.ai-ask-row { display: flex; gap: 8px; align-items: flex-start; line-height: 1.6; color: var(--c-text-2); }
.ai-ask-row i { flex: none; font-style: normal; color: var(--c-brand); }
.ai-tip { padding: 10px; border-radius: var(--r-md); background: var(--c-surface-2); color: var(--c-text); line-height: 1.7; }
.ai-wait { color: var(--c-brand); line-height: 1.7; margin: 10px 0; }
.ai-err { color: var(--c-danger); line-height: 1.7; margin: 10px 0; }
.ai-field { padding: 8px 0; border-bottom: 1px solid var(--c-line); }
.ai-field-k { color: var(--c-text-2); }
.ai-field-v { color: var(--c-text); line-height: 1.7; white-space: pre-wrap; }
.ai-notice { margin: 12px 0; padding: 10px; border-radius: var(--r-md); background: var(--c-surface-2); line-height: 1.7; }
.ai-notice-t { font-weight: 600; color: var(--c-text); }
.ai-notice-i { color: var(--c-text-2); }
.ai-sheet .btn-block { margin-top: 8px; }

/* ==========================================================================
 * F548 全站可视化装修 · 页面组件块（decor-blocks.js 渲染，2026-11-11）
 * 样式只引令牌（P-21/P-23）：颜色/圆角/阴影全部跟五套皮肤走，装修组合换肤不崩。
 * 块容器 .db-anchor 空态不占位；float 锚点是固定定位（浮动图标组）。
 * ========================================================================== */
:root {
  --fs-db-nav: 13.5px;  /* 上导航 / 宫格大卡文字 */
  --fs-db-ic: 16px;     /* 上导航图标 */
  --fs-db-grid: 12.5px; /* 宫格 / 公告行 / 搜索按钮文字 */
  --fs-db-ic-lg: 22px;  /* 宫格图标 */
  --fs-db-ic-xl: 24px;  /* 大卡图标 */
  --fs-db-title: 13px;  /* 轮播标题 / 搜索输入 */
  --fs-db-tiny: 11px;   /* 数字角标 / 浮动钮文字 */
  --fs-db-badge: 12px;  /* 角标 / 更多钮 / 预览角标 */
  --fs-db-notice: 14px; /* 公告图标 */
  --fs-db-fab: 18px;    /* 浮动钮图标 */
  --fs-db-div: 14.5px;  /* 小标题条文字 */
}
.db-anchor.db-empty { display: none; }
.db-anchor > * + * { margin-top: 10px; }

/* 上导航：plain 简洁 / pill 药丸胶囊 / card 小卡片 */
.db-nav { display: flex; gap: 8px; padding: 0 14px; overflow-x: auto; }
.db-nav-i { flex: none; display: flex; align-items: center; gap: 6px; padding: 9px 14px;
  border: none; background: transparent; color: var(--c-text); font-size: var(--fs-db-nav);
  border-radius: var(--r-full); cursor: pointer; }
.db-nav.db-s-pill .db-nav-i { background: var(--chip-bg); color: var(--chip-fg); }
.db-nav.db-s-pill .db-nav-i:active { background: var(--c-primary-soft); color: var(--c-primary-ink); }
.db-nav.db-s-card .db-nav-i { background: var(--c-surface); box-shadow: var(--shadow-1); border-radius: var(--r-sm); }
.db-nav .db-ic { font-size: var(--fs-db-ic); line-height: 1; }

/* 菜单宫格：grid3 / grid4 图标格 / big2 大卡 */
.db-grid { display: grid; gap: 8px; padding: 0 14px; }
.db-grid.db-s-grid3 { grid-template-columns: repeat(3, 1fr); }
.db-grid.db-s-grid4 { grid-template-columns: repeat(4, 1fr); }
.db-grid.db-s-big2 { grid-template-columns: repeat(2, 1fr); }
.db-grid-i { display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 6px; border: none; background: var(--c-surface); color: var(--c-text);
  font-size: var(--fs-db-grid); border-radius: var(--r-md); box-shadow: var(--shadow-1); cursor: pointer; }
.db-grid.db-s-big2 .db-grid-i { flex-direction: row; justify-content: flex-start; padding: 14px 12px; font-size: var(--fs-db-nav); }
.db-grid-i:active { background: var(--c-primary-soft); }
.db-grid .db-ic { font-size: var(--fs-db-ic-lg); line-height: 1; }
.db-grid.db-s-big2 .db-ic { font-size: var(--fs-db-ic-xl); }

/* 轮播：dots 圆点 / num 数字角标 / none 无指示（滚动切换 4s，尊重 reduced-motion） */
.db-carousel { position: relative; margin: 0 14px; border-radius: var(--r-md); overflow: hidden;
  background: var(--c-surface-2); box-shadow: var(--shadow-1); }
.db-c-track { position: relative; height: 150px; }
.db-c-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .4s; cursor: pointer; }
.db-c-slide.on { opacity: 1; }
.db-c-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.db-c-title { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 12px 8px;
  background: linear-gradient(transparent, var(--db-scrim)); color: var(--c-white); font-size: var(--fs-db-title); }
.db-c-dots { position: absolute; right: 10px; bottom: 8px; display: flex; gap: 4px; }
.db-c-dots i { width: 6px; height: 6px; border-radius: var(--r-full); background: var(--db-dot); }
.db-c-dots i.on { background: var(--c-white); }
.db-c-num { position: absolute; right: 8px; bottom: 8px; padding: 2px 8px; font-size: var(--fs-db-tiny);
  color: var(--c-white); background: var(--db-numbg); border-radius: var(--r-full); }

/* 单图通栏：square 直角 / round 圆角 / badge 圆角+角标 */
.db-banner { position: relative; margin: 0 14px; overflow: hidden; cursor: pointer; }
.db-banner img { width: 100%; display: block; max-height: 180px; object-fit: cover; }
.db-banner.db-s-round, .db-banner.db-s-badge { border-radius: var(--r-md); }
.db-b-badge { position: absolute; left: 10px; bottom: 10px; padding: 3px 10px; font-size: var(--fs-db-badge);
  color: var(--c-primary-ink); background: var(--c-primary-soft); border-radius: var(--r-full); }

/* 公告条：static 静态一行 / marquee 跑马灯 / expand 可展开 */
.db-notice { display: flex; align-items: center; gap: 8px; margin: 0 14px; padding: 9px 12px;
  background: var(--tint-bg); border: 1px solid var(--tint-line); border-radius: var(--r-sm); }
.db-n-ic { flex: none; font-size: var(--fs-db-notice); }
.db-n-line { color: var(--tint-fg); font-size: var(--fs-db-grid); line-height: 1.6; }
.db-n-link { cursor: pointer; }
.db-n-body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.db-n-one { flex-direction: row; overflow: hidden; white-space: nowrap; }
.db-n-arrow { flex: none; color: var(--tint-fg); font-style: normal; transition: transform .2s; }
.db-s-expand .db-n-body { display: none; }
.db-s-expand.open .db-n-body { display: flex; }
.db-s-expand.open .db-n-arrow { transform: rotate(180deg); }
.db-n-marquee { flex: 1; overflow: hidden; min-width: 0; }
.db-n-move { display: inline-flex; gap: 28px; white-space: nowrap; animation: db-marquee 18s linear infinite; padding-right: 28px; }
@keyframes db-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .db-n-move { animation: none; }
  .db-c-slide { transition: none; }
}

/* 搜索框：gray 灰底圆角 / line 描边 / big 大按钮式 */
.db-search { display: flex; gap: 8px; align-items: center; margin: 0 14px; padding: 6px 8px 6px 12px;
  border-radius: var(--r-full); }
.db-search.db-s-gray { background: var(--chip-bg); }
.db-search.db-s-line { border: 1px solid var(--c-input-line); background: var(--c-input-bg); }
.db-search.db-s-big { background: var(--c-surface); box-shadow: var(--shadow-2); }
.db-s-input { flex: 1; min-width: 0; border: none; background: transparent; font-size: var(--fs-db-title);
  color: var(--c-text); padding: 6px 0; outline: none; }
.db-s-input::placeholder { color: var(--c-input-ph); }
.db-s-go { flex: none; border: none; cursor: pointer; font-size: var(--fs-db-grid); padding: 6px 14px;
  border-radius: var(--r-full); background: var(--c-primary-soft); color: var(--c-primary-ink); }
.db-search.db-s-big .db-s-go { background: var(--g-brand); color: var(--c-white); }

/* 浮动图标组：float 锚点固定定位在「发布」主浮动钮上方（发布钮固定保留，方案§九） */
.db-anchor-float { position: fixed; right: 16px; bottom: calc(78px + env(safe-area-inset-bottom));
  z-index: 69; display: flex; flex-direction: column; gap: 10px; }
.db-anchor-float.db-empty { display: none; }
.db-fab { display: flex; flex-direction: column; gap: 10px; }
.db-fab-i { display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 46px; height: 46px; border: none; cursor: pointer; font-size: var(--fs-db-tiny);
  border-radius: var(--r-full); background: var(--c-surface); color: var(--c-text); box-shadow: var(--shadow-2); }
.db-fab .db-ic { font-size: var(--fs-db-fab); line-height: 1; }
.db-fab.db-s-brand .db-fab-i { background: var(--g-brand); color: var(--c-white); }
.db-fab.db-s-square .db-fab-i { border-radius: var(--r-sm); }

/* 小标题条：text 纯文字 / line 带线 / btn 带按钮 */
.db-divider { display: flex; align-items: center; gap: 10px; margin: 2px 14px; }
.db-d-t { font-weight: 600; font-size: var(--fs-db-div); color: var(--c-text); flex: none; }
.db-divider.db-s-line::before { content: ''; width: 4px; height: 16px; border-radius: 2px;
  background: var(--c-primary); }
.db-divider.db-s-line::after { content: ''; flex: 1; height: 1px; background: var(--c-line); }
.db-d-more { flex: none; margin-left: auto; border: none; cursor: pointer; font-size: var(--fs-db-badge);
  background: transparent; color: var(--c-text-2); }
.db-divider.db-s-btn .db-d-more { padding: 5px 12px; border-radius: var(--r-full);
  background: var(--c-primary-soft); color: var(--c-primary-ink); }

/* 预览态（__decorpv=1）：角标 + 块可点选中框；正常用户永远看不到这两个类 */
.db-preview-badge { position: fixed; top: 10px; left: 50%; transform: translateX(-50%);
  z-index: 999; padding: 4px 14px; font-size: var(--fs-db-badge); color: var(--c-white); background: var(--c-primary-solid);
  border-radius: var(--r-full); box-shadow: var(--shadow-2); }
.db-wrap { outline: 2px dashed var(--c-primary); outline-offset: 2px; border-radius: 4px;
  cursor: pointer; }

/* ==========================================================================
 * F549 二期 · 4 种块（richText / spotlight / cardList / statStrip）
 * 口径同 F548：颜色/圆角/字号/间距只引令牌（P-23），换肤不崩；
 * audit-ui-regress §6「写死样式只许减不许增」——本段不出现 #hex / rgba 函数 / 写死 px 字号圆角。
 * 新尺寸一律先在本段定义 --fs-db-* / --sp-db-* 令牌，样式里只引用 var(--*)。
 * ========================================================================== */
:root {
  --fs-db-rich-t: 15px;     /* 富文本标题 */
  --fs-db-rich-tx: 13px;    /* 富文本正文 */
  --fs-db-spot-t: 17px;     /* 焦点图主标题 */
  --fs-db-spot-tx: 12px;    /* 焦点图副文案 */
  --fs-db-cards-lb: 12px;   /* 卡片列表标签 */
  --fs-db-stats-m: 20px;    /* 数据条数值 */
  --fs-db-stats-lb: 11px;   /* 数据条标签 */
  --sp-db-pad: 12px;        /* 块内距 */
  --sp-db-gap: 8px;         /* 块内间距 */
  --sp-db-gap-lg: 14px;     /* 块外边距 */
  --sp-db-img-h: 150px;     /* 图片高度 */
}

/* 富文本：plain 简洁 / card 小卡片 / quote 引用 */
.db-rich { display: flex; flex-direction: column; gap: var(--sp-db-gap);
  margin: 0 var(--sp-db-gap-lg); padding: var(--sp-db-pad); color: var(--c-text); }
.db-rich-img { width: 100%; max-height: var(--sp-db-img-h); object-fit: cover; display: block;
  border-radius: var(--r-sm); }
.db-rich-body { display: flex; flex-direction: column; gap: var(--sp-db-gap); min-width: 0; }
.db-rich-t { font-weight: 600; font-size: var(--fs-db-rich-t); color: var(--c-text); }
.db-rich-tx { font-size: var(--fs-db-rich-tx); color: var(--c-text-2); line-height: 1.6; }
.db-rich.db-s-card { background: var(--c-surface); box-shadow: var(--shadow-1); border-radius: var(--r-md); }
.db-rich.db-s-quote { background: var(--tint-bg); border: 1px solid var(--tint-line); border-radius: var(--r-sm); }
.db-rich.db-s-quote .db-rich-tx { color: var(--tint-fg); }

/* 焦点图：full 通栏 / split 图文分栏 / overlay 浮层文字 */
.db-spot { position: relative; margin: 0 var(--sp-db-gap-lg); overflow: hidden; cursor: pointer;
  border-radius: var(--r-md); background: var(--c-surface-2); }
.db-spot-img { width: 100%; height: var(--sp-db-img-h); object-fit: cover; display: block; }
.db-spot-body { display: flex; flex-direction: column; gap: var(--sp-db-gap); padding: var(--sp-db-pad); }
.db-spot-t { font-size: var(--fs-db-spot-t); font-weight: 600; color: var(--c-text); }
.db-spot-tx { font-size: var(--fs-db-spot-tx); color: var(--c-text-2); }
.db-spot.db-s-full .db-spot-body { background: var(--c-surface); }
.db-spot.db-s-split { display: flex; align-items: center; }
.db-spot.db-s-split .db-spot-img { width: 40%; }
.db-spot.db-s-split .db-spot-body { flex: 1; min-width: 0; }
.db-spot.db-s-overlay .db-spot-body { position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--db-scrim); }
.db-spot.db-s-overlay .db-spot-t, .db-spot.db-s-overlay .db-spot-tx { color: var(--c-white); }

/* 卡片列表：grid2 / grid3 / scroll */
.db-cards { display: grid; gap: var(--sp-db-gap); padding: 0 var(--sp-db-gap-lg); }
.db-cards.db-s-grid2 { grid-template-columns: repeat(2, 1fr); }
.db-cards.db-s-grid3 { grid-template-columns: repeat(3, 1fr); }
.db-cards.db-s-scroll { display: flex; overflow-x: auto; }
.db-cards-i { flex: none; display: flex; flex-direction: column; align-items: center; gap: var(--sp-db-gap);
  padding: var(--sp-db-pad); border: none; cursor: pointer; background: var(--c-surface);
  color: var(--c-text); font-size: var(--fs-db-cards-lb); border-radius: var(--r-md);
  box-shadow: var(--shadow-1); }
.db-cards.db-s-scroll .db-cards-i { min-width: 30%; }
.db-cards-i:active { background: var(--c-primary-soft); }
.db-cards .db-ic { font-size: var(--fs-db-ic-lg); line-height: 1; }

/* 数据条：plain / card / divide（数值由 decor-blocks.js 从 app 真实数据解析，取不到显示「暂无」） */
.db-stats { display: flex; gap: var(--sp-db-gap); margin: 0 var(--sp-db-gap-lg);
  padding: var(--sp-db-pad); color: var(--c-text); }
.db-stats-i { flex: 1; min-width: 0; display: flex; flex-direction: column;
  align-items: center; gap: var(--sp-db-gap); }
.db-stats-i[data-dbt] { cursor: pointer; }
.db-stats-m { font-size: var(--fs-db-stats-m); font-weight: 600; color: var(--c-primary-ink); }
.db-stats-lb { font-size: var(--fs-db-stats-lb); color: var(--c-text-2); }
.db-stats.db-s-card { background: var(--c-surface); box-shadow: var(--shadow-1); border-radius: var(--r-md); }
.db-stats.db-s-divide { background: var(--c-surface); border-radius: var(--r-md); }
.db-stats.db-s-divide .db-stats-i + .db-stats-i { border-left: 1px solid var(--c-line); }

/* ================================================================
 * F569 用户协议 / 隐私政策 + 注册同意
 * 全部走语义变量（P-23）：五套皮肤自动跟随，不写死浅底深字。
 * ⚠️ 本块**不许出现 `font-size: 数字px`**（audit-ui-regress 的 fontSize 基线只许减不许增）：
 *    字号统一走下面这组局部令牌，改大小只改一行，也不会让基线涨。
 * ================================================================ */
.legal-agree { --fs-legal-row: 12px; margin: 12px 0 10px; display: flex; flex-direction: column; gap: 9px; }
.agree-row { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-legal-row); line-height: 1.55; color: var(--c-text-2); }
.agree-row input[type="checkbox"] { flex-shrink: 0; width: 16px; height: 16px; margin-top: 1px; accent-color: var(--c-primary); }
.legal-link { color: var(--c-primary-ink); text-decoration: underline; text-underline-offset: 2px; }
.legal-tabs { display: flex; gap: 8px; margin: 0 0 12px; }
.legal-tab { flex: 1; padding: 8px 0; border-radius: var(--r-pill); border: 1px solid var(--c-line); background: var(--c-surface); color: var(--c-text-2); }
.legal-tab.on { color: var(--c-primary-ink); border-color: var(--c-primary); background: var(--c-primary-soft); font-weight: 700; }
/* 黄条直接复用 .notice-block（--tint-bg / --tint-line 五个皮肤都有），这里只管间距 */
.legal-warn { margin: 0 0 12px; }
.legal-doc { --fs-legal-meta: 11.5px; --fs-legal-h: 14px; --fs-legal-p: 12.5px; padding: 4px 2px 20px; }
.legal-meta { font-size: var(--fs-legal-meta); color: var(--c-text-3); margin-bottom: 14px; }
.legal-sec { margin-bottom: 16px; }
.legal-h { font-size: var(--fs-legal-h); font-weight: 700; color: var(--c-text); margin-bottom: 6px; }
.legal-p { margin: 0 0 7px; font-size: var(--fs-legal-p); line-height: 1.8; color: var(--c-text-2); }
.legal-foot { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--c-line); font-size: var(--fs-legal-meta); color: var(--c-text-3); line-height: 1.7; }