* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #e9e9eb;
  color: #111;
}

body {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  overflow: hidden;
}

/* 手机外壳 */
.phone-frame {
  width: 100%;
  max-width: 430px;
  height: 100vh;
  background: #fff;
  position: relative;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

/* 内容区 */
.content {
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0;
}

/* 视图切换 */
.view {
  display: none;
  position: relative;
}
.view.active {
  display: block;
  animation: viewFadeIn 0.35s ease;
}
@keyframes viewFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 顶栏状态瞬移：视图切换重算 scrolled 时不播放背景渐变，避免闪烁 */
.bar-no-anim {
  transition: none !important;
}

/* 顶部状态栏（悬浮覆盖 · 沉浸式：顶部透明，滚动后白底 + 模糊） */
.top-bar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 0 16px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), transparent);
  color: #fff;
  border-bottom: none;
  transition: background 0.3s ease, color 0.3s ease, backdrop-filter 0.3s ease;
}

.top-bar.scrolled {
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  color: #111;
  box-shadow: none;
}

/* 滚动后顶栏变白，上传的白色 logo 反转为黑色以便看清 */
.top-bar.scrolled .top-ohli-img {
  filter: invert(1);
  transition: filter 0.3s ease;
}

/* 让首屏内容上移到栏下方，实现栏悬浮覆盖不占行 */
.hero-carousel {
  margin-top: -60px;
}

.top-brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.top-ohli-logo {
  width: 47px;
  height: auto;
  display: block;
}

.top-ohli-img {
  height: 28px;
  width: auto;
  max-width: 98px;
  object-fit: contain;
  display: block;
  background: transparent !important;
}

.ohli-logo-heart {
  fill: currentColor;
}

.ohli-logo-text {
  fill: currentColor;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.top-icon-btn {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
  border-radius: 50%;
  text-decoration: none;
  transition: background 0.2s ease;
}

.top-icon-btn:active {
  background: rgba(255, 255, 255, 0.25);
}

.top-bar.scrolled .top-icon-btn:active {
  background: #f0f0f0;
}

/* Hero 轮播 */
.hero-carousel {
  position: relative;
  width: 100%;
  height: 82vh;
  max-height: 760px;
  overflow: hidden;
  background: #ddd;
}

.hero-slides {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.hero-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.hero-slide img.loaded {
  opacity: 1;
}

/* 底部渐变遮罩，增加层次感 */
.hero-carousel::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.25), transparent);
  pointer-events: none;
  z-index: 4;
}

.hero-dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 2px;
  display: flex;
  gap: 0;
  z-index: 5;
}

.hero-segment {
  flex: 1;
  height: 100%;
  background: #d0d0d0;
  transition: background 0.4s ease;
}

.hero-segment.active {
  background: #000;
}

/* Logo 装饰区 */
.logo-section {
  padding: 60px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: #fff;
}

.logo-item {
  width: 100%;
  display: flex;
  justify-content: center;
}

.logo-item img {
  max-width: 220px;
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
  background: transparent !important;
}

/* ============ 商品分类横条（首页轮播图下方） ============ */
.category-strip {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 16px 16px 26px;
  background: #fff;
  overflow-x: auto;
  scrollbar-width: none;
}

.category-strip::-webkit-scrollbar {
  display: none;
}

.category-item {
  flex: 0 0 calc((100% - 24px) / 4);
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

.category-item-img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 6px;
  background: #f6f6f6;
  display: block;
}

.category-item-name {
  font-size: 12px;
  color: #333;
  letter-spacing: 1px;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============ 二级页顶栏（返回占 logo 位 + 搜索/商店图标） ============ */
.sub-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 60px;
  padding: 0 12px 0 8px;
  background: #fff;
  color: #111;
  border-bottom: 1px solid #f2f2f2;
}

/* 顶栏中间标题（ronron 式）：沉浸态白字压图，滚过后随顶栏变黑字 */
.sub-topbar-title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 46%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 1px;
  color: inherit;
  pointer-events: none;
}

/* 详情页顶栏「商品 / 详情」tab（电商式：当前项加粗，其余灰） */
.cf-top-tabs {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  transition: opacity 0.3s ease;
  align-items: center;
  gap: 26px;
}

.cf-top-tab {
  border: none;
  background: none;
  padding: 4px 0;
  font-size: 15px;
  font-weight: 500;
  color: #999;
  cursor: pointer;
  transition: color 0.2s ease;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cf-top-tab.active {
  color: #111;
  font-weight: 600;
}

/* 沉浸态（压图）：非当前 tab 用半透明白 */
.sub-topbar.immersive .cf-top-tab {
  color: rgba(255, 255, 255, 0.75);
}

.sub-topbar.immersive .cf-top-tab.active {
  color: #fff;
}

/* 白底态（滚过封面）：恢复黑灰体系 */
.sub-topbar.immersive.scrolled .cf-top-tab {
  color: #999;
}

.sub-topbar.immersive.scrolled .cf-top-tab.active {
  color: #111;
}

.top-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: inherit;
  flex: 0 0 auto;
}

.top-back:active {
  background: #f0f0f0;
  border-radius: 50%;
}

/* 沉浸式二级页顶栏（众筹列表/详情）：与首页一致，透明渐变压图，滚过后白底毛玻璃 */
/* 沉浸态：顶栏自身完全透明无背景（渐变暗化由下方海报/封面的衔接层统一绘制，避免元素边界渲染出黑线） */
.sub-topbar.immersive {
  background: transparent;
  color: #fff;
  border-bottom-color: transparent;
}

.sub-topbar.immersive.scrolled {
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  color: #111;
}

/* 白底顶栏内图标按压态（覆盖首页沉浸式白色按压背景） */
.sub-topbar .top-icon-btn:active {
  background: #f0f0f0;
}

.sub-topbar.immersive .top-icon-btn:active,
.sub-topbar.immersive .top-back:active {
  background: rgba(255, 255, 255, 0.18);
}

/* 众筹列表海报 / 详情封面上移到顶栏下方，实现顶栏悬浮覆盖 */
#cf-list-banner {
  margin-top: -60px;
}

.cf-detail-page .cf-cover {
  margin-top: -60px;
}

/* 图顶渐变衔接层：顶栏区域的暗化渐变统一画在这里（与图片同一元素），柔化图顶边、顶栏无任何自身背景边界 */
#cf-list-banner::before,
.cf-detail-page .cf-cover::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0.12) 55%, rgba(0, 0, 0, 0) 100%);
  z-index: 1;
  pointer-events: none;
}

/* ============ 商品分类二级页 ============ */
/* 全灰底白卡浮起（理想商城式）；顶栏右侧筛选入口，筛选走底部弹层 */
.view-category {
  background: #f5f5f5;
}

/* 顶栏右侧筛选按钮（三条滑杆），沉浸态白字/滚后黑字随顶栏 */
.top-filter-btn {
  margin-left: auto;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
  border-radius: 50%;
  text-decoration: none;
}

.top-filter-btn:active {
  background: rgba(0, 0, 0, 0.06);
}

/* 搜索页双态（flex 列布局）：idle 搜索框垂直居中（下方一排推荐词，历史隐藏）→ active 搜索框弹到顶部（下方历史记录） */
.view-search.active {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.search-area {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 10px 14px; /* 左右 10px 与商品卡片边缘对齐 */
  transition: margin-top 0.3s ease;
}

.view-search.mode-idle .search-history {
  order: 1;
  flex: 0 0 auto;
  display: none; /* 居中态隐藏历史，改显推荐词（CSS 覆盖 JS 内联显示） */
}

.view-search.mode-idle .search-area {
  order: 2;
  margin-top: 32vh;  /* 搜索框偏居中（推荐词跟在框下方） */
  margin-bottom: 0;
}

.view-search.mode-idle .search-exit {
  order: 3;  /* 叉固定排在搜索区之后（默认 order:0 会窜到顶部） */
}

.view-search.mode-active .search-area {
  order: 1;
  margin-top: 12px; /* 与顶部留一点距离 */
  margin-bottom: 0;
}

.view-search.mode-active .search-history {
  order: 2;
  flex: 0 0 auto;  /* 弹顶后历史记录显示在搜索框下方 */
}

/* 结果网格 / 空态：始终排在搜索框下方（元素复用 .cat-grid/.cat-empty class，不设 order 会默认 0 窜到框上面） */
.view-search .cat-grid,
.view-search .cat-empty {
  order: 3;
}

/* 推荐词胶囊（仅居中态显示，单行横滑） */
.search-recommend {
  display: none;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.search-recommend::-webkit-scrollbar {
  display: none;
}

.view-search.mode-idle .search-recommend {
  display: flex;
}

/* 搜索行：搜索框 + 弹顶态右侧「取消」 */
.search-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.search-row .search-box {
  flex: 1;
  min-width: 0; /* 横排内伸展占满，剩余宽度让给取消 */
}

.search-cancel {
  flex: 0 0 auto;
  display: none; /* 仅弹顶态显示 */
  border: none;
  background: none;
  padding: 0;
  font-size: 14px;
  color: #111;
  cursor: pointer;
}

.view-search.mode-active .search-cancel {
  display: block;
}

/* 详情页页尾 logo：滑到底部的提醒标识（内容流末尾，滑到底自然可见） */
.cf-end-logo {
  order: 10;
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  padding: 40px 0 96px; /* 底部避开悬浮行动栏 */
  opacity: 0.8;
}

.cf-end-logo img {
  height: 30px;
  width: auto;
}

.recommend-tag {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 5px;
  border: none;
  background: rgba(17, 17, 17, 0.05);
  color: #333;
  font-size: 13px;
  line-height: 1;
  padding: 10px 16px;
  border-radius: 0; /* 与历史记录词条同款直角灰底 */
  cursor: pointer;
  transition: background 0.15s ease;
}

.recommend-tag:active {
  background: rgba(17, 17, 17, 0.12);
}

.recommend-tag svg {
  flex: 0 0 auto;
  line-height: 0;
}

/* 搜索历史：标题行 + 直角透明灰底词条 */
.search-history {
  padding: 16px 10px 0; /* 左右与搜索框、商品卡片对齐 */
}

.search-history-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.search-history-head span {
  font-size: 13px;
  color: #999;
  letter-spacing: 1px;
}

.search-history-head button {
  display: flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: none;
  padding: 4px 0;
  font-size: 12px;
  color: #999;
  cursor: pointer;
}

.search-history-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.history-tag {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: none;
  background: rgba(17, 17, 17, 0.05);
  color: #333;
  font-size: 13px;
  line-height: 1;
  padding: 10px 16px;
  border-radius: 0;
  cursor: pointer;
  transition: background 0.15s ease;
}

.history-tag:active {
  background: rgba(17, 17, 17, 0.12);
}

/* 居中态下方的叉：返回上一级（弹顶后隐藏） */
.search-exit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 26px auto 0;
  border: 1px solid #d8d8d8;
  border-radius: 50%;
  background: #fff;
  color: #555;
  cursor: pointer;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.search-exit:active {
  opacity: 0.6;
  transform: scale(0.92);
}

.view-search.mode-active .search-exit {
  display: none;
}

/* 无结果/未输入时隐藏结果网格（去掉空态色块） */
.view-search:not(.has-results) .cat-grid {
  display: none;
}

.search-box {
  flex: 0 0 auto;  /* search-area 为纵排 flex，flex:1 会把框往垂直方向拉伸/压塌 */
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  background: #fff;
  border: 1px solid #111;
  border-radius: 0;
  padding: 0 14px;
}

.search-box input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: none;
  font-size: 15px;
  color: #111;
}

.search-box input::-webkit-search-cancel-button {
  display: none;
}

.search-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.search-go-icon {
  flex: 0 0 auto;
  line-height: 0;
}

/* 结果网格：灰底白卡浮起（分类页/搜索页共用同一套卡片） */
.cat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 10px;
  margin: 0 0 48px;
  background: #f5f5f5;
}

/* 商品卡片（理想商城式）：白底直角卡浮在灰底上；方形图 + 名称两行 + 价格，无额外装饰 */
.goods-card {
  display: block;
  position: relative;
  text-decoration: none;
  color: inherit;
  min-width: 0;
  background: #fff;
  border-radius: 0;
  padding-bottom: 16px;
}

.goods-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f6f6f6;
}

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

.goods-name {
  font-size: 14px;
  color: #222;
  margin: 12px 12px 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.goods-price {
  font-size: 17px;
  font-weight: 600;
  color: #111;
  margin: 8px 12px 0;
}

.cat-empty {
  text-align: center;
  color: #999;
  font-size: 13px;
  letter-spacing: 1px;
  padding: 64px 24px;
  background: transparent;
}

/* ============ 众筹 SKU 弹层（型号 + 颜色，底部滑出） ============ */
.sku-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
}

.sku-modal.show {
  display: block;
}

.sku-mask {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.sku-modal.show .sku-mask {
  opacity: 1;
}

.sku-sheet {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 105%);
  width: 100%;
  max-width: 430px;
  box-sizing: border-box;
  background: #fff;
  border-radius: 14px 14px 0 0;
  padding: 18px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  transition: transform 0.3s ease;
}

.sku-modal.show .sku-sheet {
  transform: translate(-50%, 0);
}

.sku-close {
  position: absolute;
  top: 12px;
  right: 10px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  cursor: pointer;
}

.sku-head {
  display: flex;
  gap: 12px;
  padding-right: 36px;
}

.sku-head img {
  width: 86px;
  height: 86px;
  object-fit: cover;
  background: #f6f6f6;
  flex: 0 0 auto;
  display: block;
}

.sku-head-info {
  min-width: 0;
}

.sku-price {
  font-size: 22px;
  font-weight: 700;
  color: #111;
  margin: 4px 0 8px;
}

.sku-title {
  font-size: 13px;
  color: #555;
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sku-group {
  margin-top: 18px;
}

.sku-label {
  font-size: 13px;
  color: #888;
  margin: 0 0 10px;
}

.sku-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.sku-opt {
  padding: 9px 16px;
  font-size: 13px;
  color: #333;
  background: #f5f5f5;
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
}

.sku-opt.selected {
  background: #fff;
  border-color: #111;
  color: #111;
  font-weight: 600;
}

.sku-submit {
  display: block;
  width: 100%;
  margin-top: 22px;
  height: 46px;
  background: #111;
  color: #fff;
  border: none;
  font-size: 15px;
  letter-spacing: 2px;
  cursor: pointer;
}

/* ============ 分类页筛选弹层（底部滑出单选列表） ============ */
.sort-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
}

.sort-modal.show {
  display: block;
}

.sort-mask {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.sort-modal.show .sort-mask {
  opacity: 1;
}

.sort-sheet {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 105%);
  width: 100%;
  max-width: 430px;
  box-sizing: border-box;
  background: #fff;
  border-radius: 14px 14px 0 0;
  padding: 0 16px calc(16px + env(safe-area-inset-bottom, 0px));
  transition: transform 0.3s ease;
}

.sort-modal.show .sort-sheet {
  transform: translate(-50%, 0);
}

.sort-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0 6px;
  font-size: 15px;
  font-weight: 600;
  color: #111;
}

.sort-head button {
  display: flex;
  padding: 4px;
  border: none;
  background: none;
  cursor: pointer;
}

.sort-opts {
  padding: 6px 0 4px;
}

.sort-opt {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  padding: 13px 10px;
  font-size: 14px;
  color: #333;
  letter-spacing: 1px;
  background: none;
  border: none;
  border-radius: 0;
  cursor: pointer;
}

.sort-opt.active {
  font-weight: 700;
  color: #111;
}

.sort-opt.active::after {
  content: '✓';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 700;
}

/* ============ 众筹模块 ============ */
.crowdfunding {
  margin: 0 20px 0;
  background: #fff;
  border: 1px solid #eee;
  overflow: hidden;
  transition: box-shadow 0.4s ease;
}

.crowdfunding:hover {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
}

.cf-cover {
  position: relative;
  width: 100%;
  /* 1:1 商品主图比例 */
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #eee;
  border-radius: 0;
}

.cf-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 封面轮播轨道 */
.cf-cover-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease;
}

.cf-cover-slide {
  flex: 0 0 100%;
  height: 100%;
  overflow: hidden;
}

/* 右下角长条指示条：灰色圆角轨道 + 黑色进度段（宽=1/N，平滑滑动；粗细与首页轮播一致 2px） */
.cf-cover-indicator {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 88px;
  height: 2px;
  background: rgba(17, 17, 17, 0.18);
  border-radius: 1px;
  overflow: hidden;
  z-index: 5;
}

.cf-cover-indicator-bar {
  display: block;
  height: 100%;
  background: #111;
  border-radius: 1px;
  transition: transform 0.45s ease;
}

/* 悬停放大仅用于非详情页的封面区块（详情页封面不做整体缩放） */
.crowdfunding:not(#crowdfunding-detail):hover .cf-cover img {
  transform: scale(1.05);
}

/* 详情页 tag：标题前的小黑标签（原封面右上角绝对定位已移除，避免与顶栏图标重叠） */
.cf-tag {
  display: inline-block;
  vertical-align: 3px;
  margin-right: 8px;
  padding: 3px 9px;
  background: #111;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  border-radius: 3px;
}

/* 详情两列骨架：移动端两列 display:contents，
   子项在 .cf-main-grid 中按 order 排成单列（与旧版顺序一致） */
.cf-main-grid {
  display: flex;
  flex-direction: column;
  padding-bottom: 96px;
}
.cf-left-col,
.cf-right-col {
  display: contents;
}
.cf-cover { order: 1; }
.cf-title { order: 2; margin-top: 20px; padding: 0 20px; }
.cf-desc { order: 3; padding: 0 20px; }
.cf-progress { order: 4; padding: 0 20px; }
.cf-models-head { order: 5; padding: 0 20px; }
.cf-models { order: 6; padding: 0 20px; }
.cf-detail-content { order: 7; padding: 0 20px; }
.cf-rewards { order: 8; padding: 0 20px; }
.cf-action-bar { order: 9; }

.cf-title {
  font-size: 18px;
  font-weight: 600;
  color: #111;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}

.cf-desc {
  font-size: 13px;
  line-height: 1.7;
  color: #777;
  margin-bottom: 18px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 进度条 */
.cf-progress {
  margin-bottom: 16px;
}

/* 进度条两端的日期 */
.cf-progress-dates {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #888;
  margin-bottom: 6px;
  letter-spacing: 0.5px;
}

.cf-days-left {
  font-size: 11px;
  color: #aaa;
}

.cf-progress-bar {
  width: 100%;
  height: 8px;
  background: #f0f0f0;
  overflow: hidden;
  position: relative;
}

.cf-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #111, #333);
  width: 0;
  transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.cf-progress-fill::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #fff;
  opacity: 0.4;
}

.cf-progress-info {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 8px;
}

.cf-percent {
  font-size: 22px;
  font-weight: 800;
  color: #111;
  letter-spacing: -0.5px;
}

.cf-goal {
  font-size: 12px;
  color: #999;
}

/* 达成条件行（条件 + 达成状态 占一格，居中于上方分隔线与项目详情上边框之间） */
.cf-condition-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0 0;
  margin-bottom: 16px;
  border-top: 1px solid #f0f0f0;
}

.cf-condition-info {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.cf-condition-label {
  font-size: 12px;
  color: #999;
  letter-spacing: 0.5px;
}

.cf-condition-num {
  font-size: 14px;
  font-weight: 600;
  color: #111;
}

/* 最低众筹人数提示 — 简约文字，无背景框 */
.cf-min-backers {
  font-size: 12px;
  color: #ff6b35;
  text-align: right;
  white-space: nowrap;
}
.cf-min-backers.reached {
  color: #2ea043;
}

/* 项目详情区 */
.cf-detail-content {
  margin-bottom: 18px;
  padding-top: 8px;
  border-top: 1px solid #f0f0f0;
}

.cf-detail-title {
  font-size: 15px;
  font-weight: 600;
  color: #111;
  margin: 16px 0 10px;
  padding-left: 10px;
  border-left: 3px solid #111;
}

.cf-detail-text {
  font-size: 13px;
  line-height: 1.8;
  color: #555;
}

.cf-detail-text p {
  margin: 0 0 10px;
}

.cf-detail-text img {
  width: 100%;
  border-radius: 0;
  margin: 8px 0;
  display: block;
}

/* 详情插图加载中/失败：未加载前图片无自然高度会塌成空白，
   用 4:3 占位框撑出与图片接近的展示尺寸（加载完成后恢复自然比例） */
.cf-detail-text img.is-loading,
.cf-detail-text img.is-error {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* 档位列表 */
.cf-rewards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}

.cf-reward {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: #fafafa;
  border: 1px solid #eee;
  transition: background 0.3s ease, border-color 0.3s ease;
  cursor: pointer;
  position: relative;
}

.cf-reward:hover {
  background: #f3f3f3;
  border-color: #ccc;
}

/* 选中态：简洁轻量，仅背景微变 + 名称加粗 */
.cf-reward.selected {
  background: #e5e5e5;
  border-color: #ccc;
}

.cf-reward.selected .cf-reward-name {
  font-weight: 700;
}

/* 已选标记：不显示 */
.cf-reward .cf-reward-check {
  display: none;
}

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

.cf-reward-name {
  font-size: 14px;
  font-weight: 600;
  color: #111;
  margin-bottom: 2px;
}

.cf-reward-desc {
  font-size: 11px;
  color: #888;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cf-reward-right {
  text-align: right;
  flex-shrink: 0;
  margin-left: 12px;
}

.cf-reward-price {
  font-size: 16px;
  font-weight: 700;
  color: #111;
}

.cf-reward-price::before {
  content: '¥';
  font-size: 11px;
  font-weight: 600;
  margin-right: 1px;
}

.cf-reward-backers {
  font-size: 10px;
  color: #999;
  margin-top: 2px;
}

/* 悬浮快速置顶按钮（位于操作栏上方，不被胶囊遮挡） */
.cf-back-top {
  position: fixed;
  right: 16px;
  bottom: 86px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  z-index: 61;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
  opacity: 0;
  pointer-events: none;
}

.cf-back-top.show {
  opacity: 1;
  pointer-events: auto;
}

.cf-back-top:hover {
  background: #f5f5f5;
  color: #333;
  transform: scale(1.06);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.cf-back-top svg {
  display: block;
}

@media (min-width: 500px) {
  .cf-back-top {
    right: calc(50% - 215px + 16px);
  }
}

/* 底部操作栏（参考截图）：白底通栏贴底，左 logo+客服+分享，右「立即支持」大按钮 */
.cf-action-bar {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 430px;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
  background: #fff;
  border-top: 1px solid #ececec;
  pointer-events: auto;
}

/* 左侧：logo + 客服 + 分享 */
.cf-action-left {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

/* 操作栏 logo（双行 ohli） */
.cf-bar-logo {
  display: flex;
  align-items: center;
  margin-right: 6px;
  line-height: 0;
}

.cf-bar-logo img {
  height: 26px;
  width: auto;
  display: block;
  background: transparent !important;
}

.cf-action-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: #333;
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.cf-action-icon:active {
  background: rgba(0, 0, 0, 0.06);
  transform: scale(0.92);
}

/* 右侧：「立即支持」黑色大按钮（撑满剩余宽度） */
.cf-pledge-btn.cf-pledge-capsule {
  flex: 1;
  min-width: 0;
  height: 46px;
  padding: 0 24px;
  background: #111;
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 2px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease, opacity 0.2s ease;
  white-space: nowrap;
}

.cf-pledge-btn.cf-pledge-capsule:active {
  opacity: 0.75;
}

/* 未选档位时的禁用态 */
.cf-pledge-btn.cf-pledge-capsule.disabled {
  background: #ccc;
  color: #fff;
  cursor: pointer;
}

/* 众筹完成 / 失败 / 结束状态下的按钮 */
.cf-pledge-btn.cf-pledge-capsule.cf-btn-success { background: #111; }
.cf-pledge-btn.cf-pledge-capsule.cf-btn-failed,
.cf-pledge-btn.cf-pledge-capsule.cf-btn-ended { background: #888; }

/* 轻提示 toast */
.toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
  padding: 12px 22px;
  font-size: 14px;
  border-radius: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 300;
  transition: opacity 0.25s ease, transform 0.25s ease;
  white-space: nowrap;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* ============ 3D 封面流相册 ============ */
.coverflow-section {
  padding: 28px 0 24px;
  background: transparent;
  margin-bottom: 24px;
  position: relative;
}

.coverflow-title-bar {
  text-align: center;
  margin-bottom: 18px;
}

.coverflow-title {
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  color: #222;
  letter-spacing: 4px;
  margin: 0 0 4px;
}

.coverflow-subtitle {
  text-align: center;
  font-size: 11px;
  color: rgba(0, 0, 0, 0.4);
  letter-spacing: 3px;
  margin: 0;
}

.coverflow-stage {
  position: relative;
  overflow: hidden;
  padding: 0 4px;
  perspective: 1200px;
}

.coverflow-viewport {
  overflow: hidden;
  padding: 16px 0 50px;
  touch-action: pan-y;
}

.coverflow-track {
  display: flex;
  gap: 12px;
  padding: 0 28px;
  will-change: transform;
  transform-style: preserve-3d;
}

.coverflow-card {
  flex: 0 0 78%;
  aspect-ratio: 3 / 4;
  border-radius: 0;
  cursor: pointer;
  background: transparent;
  position: relative;
  transform: scale(0.82);
  opacity: 0.45;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.4s ease,
              box-shadow 0.4s ease;
  z-index: 1;
}

.coverflow-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  border-radius: 0;
  -webkit-box-reflect: below 2px linear-gradient(to bottom, rgba(0, 0, 0, 0.25), transparent 55%);
}

.coverflow-card.active {
  transform: scale(1.08) translateZ(40px);
  opacity: 1;
  z-index: 5;
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.25),
              0 4px 10px -4px rgba(0, 0, 0, 0.12);
}

.coverflow-reflection-floor {
  display: none;
}

.coverflow-info {
  text-align: center;
  margin-top: 14px;
  min-height: 36px;
}

.coverflow-name {
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: #222;
  letter-spacing: 1px;
  transition: opacity 0.4s ease;
}

.coverflow-desc {
  text-align: center;
  font-size: 11px;
  color: rgba(0, 0, 0, 0.4);
  letter-spacing: 2px;
  margin-top: 3px;
  transition: opacity 0.4s ease;
}

.coverflow-dots {
  display: none;
}

/* ============ 照片商品模块（右侧穿搭大图 + 左侧编号商品） ============ */
.photo-module {
  padding: 12px 24px 20px;
  background: #fff;
  overflow: visible;
}

/* 标题：• 文字 • 格式（与 coverflow 标题一致） */
.photo-title {
  text-align: center;
  font-size: 18px;
  font-weight: 800;
  color: #222;
  letter-spacing: 4px;
  margin: 0 0 14px;
}
.photo-title-bar {
  text-align: center;
  margin-bottom: 18px;
}

.photo-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: visible;
  background: transparent;
  border-radius: 0;
  touch-action: pan-y;
}

/* photo-bg 样式在下方定义（全屏填充背景图） */

/* 视口：撑满 stage，overflow hidden 裁切轨道 */
.photo-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 2;
}

/* 轮播轨道：横向 flex 排列幻灯片，translateX 切换 */
.photo-track {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

/* 每张幻灯片：背景大图 + 商品卡片浮层，占满轨道宽度 */
.photo-slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 0;
  background: #fff;
}

/* 背景大图：全屏填充（穿搭整体造型） */
.photo-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

.photo-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* 商品卡片容器：不限制布局，每个卡片自由定位 */
.photo-cards {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* 单个商品卡片：透明底 + 简约 */
.photo-card {
  display: block;
  text-decoration: none;
  color: #111;
  position: absolute;
  width: 76px;
  background: transparent;
  overflow: visible;
  pointer-events: auto;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.photo-card:active {
  transform: scale(0.93);
}

.photo-card-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: transparent;
  overflow: visible;
  position: relative;
}

.photo-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* 简约 + 按钮：半透明圆 + SVG 加号 */
.photo-card-thumb::after {
  content: '';
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: rgba(0,0,0,0.3);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M4 0h2v10H4z' fill='white'/%3E%3Cpath d='M0 4h10v2H0z' fill='white'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 8px 8px;
  pointer-events: none;
}

/* ============ 简单轮播：左右箭头 + 底部圆点 ============ */
/* 圆形半透明箭头，绝对定位在 stage 左右两侧垂直居中 */
.photo-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  opacity: 0.85;
  transition: opacity 0.2s ease;
  -webkit-user-select: none;
  user-select: none;
  /* 让箭头在图片上更醒目：加细描边阴影 */
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.45));
}
.photo-arrow:hover {
  opacity: 1;
}
.photo-arrow:active {
  opacity: 0.7;
}
.photo-arrow svg {
  display: block;
}
.photo-arrow-prev { left: 8px; }
.photo-arrow-next { right: 8px; }

/* 搭配商品底部指示条：按用户要求去掉（电脑端与手机端都不显示） */
.photo-segments {
  display: none;
}
.photo-segment {
  flex: 1;
  height: 100%;
  background: rgba(0, 0, 0, 0.18);
  transition: background 0.4s ease;
  cursor: pointer;
}
.photo-segment.active {
  background: #000;
}

/* 菜单 */
.menu {
  padding: 10px 24px 30px;
}

.menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 18px 0;
  border: none;
  background: none;
  border-bottom: 1px solid #eee;
  text-decoration: none;
  color: #111;
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: background 0.3s ease, padding 0.3s ease;
}

.menu-item:hover {
  background: #fafafa;
  padding-left: 8px;
  padding-right: 8px;
}

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

.menu-label {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.menu-arrow {
  color: #bbb;
  font-size: 18px;
  transition: transform 0.3s ease, color 0.3s ease;
}

.menu-item:hover .menu-arrow {
  transform: translateX(4px);
  color: #111;
}

/* 底部 */
.footer {
  text-align: center;
  padding: 20px 24px 30px;
  color: #aaa;
  font-size: 12px;
  line-height: 1.8;
}

.footer p {
  margin: 0;
}

/* 底部模块：手机端只保留版权，左右两栏与分隔线隐藏（手机端布局保持原样） */
.footer-app-text,
.footer-app-qrs,
.home-bottom-divider {
  display: none;
}

/* 社交媒体胶囊：左 logo + 右文字，滚动到可视区依次浮现，悬停放大 */
.social-icons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.social-icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: #f5f5f5;
  color: #555;
  text-decoration: none;
  /* 默认隐藏：滚动到可视区时由 .visible 触发浮现 */
  opacity: 0;
  transform: translateY(20px) scale(0.92);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.25s ease, color 0.25s ease;
}

/* 滚动到可视区时依次浮现 */
.social-icons.visible .social-icon {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.social-icons.visible .social-icon:nth-child(1) { transition-delay: 0s; }
.social-icons.visible .social-icon:nth-child(2) { transition-delay: 0.12s; }
.social-icons.visible .social-icon:nth-child(3) { transition-delay: 0.24s; }
.social-icons.visible .social-icon:nth-child(4) { transition-delay: 0.36s; }

/* 悬停：胶囊反色，只有 logo 放大 */
.social-icon:hover,
.social-icon:active {
  background: #111;
  color: #fff;
}

.social-icon svg {
  flex-shrink: 0;
  transition: transform 0.3s ease;
}
.social-icon:hover svg {
  transform: scale(1.2);
}

.social-icon-text {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.social-icon-img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  display: block;
  background: transparent !important;
  flex-shrink: 0;
  transition: filter 0.25s ease, transform 0.25s ease;
}

/* 悬停时图标反色变白 + 放大（只有 logo 放大，胶囊不放大） */
.social-icon:hover .social-icon-img,
.social-icon:active .social-icon-img {
  filter: brightness(0) invert(1);
  transform: scale(1.25);
}

@keyframes socialPop {
  0% { transform: scale(1); }
  40% { transform: scale(1.35) rotate(-8deg); }
  70% { transform: scale(0.92) rotate(4deg); }
  100% { transform: scale(1) rotate(0); }
}

/* 加载占位 */
img {
  background: transparent;
  opacity: 0;
  transition: opacity 0.7s ease;
}

img.loaded {
  opacity: 1;
}

/* 图片加载中：灰底 + 居中 logo + "加载中"文字，浅黑呼吸 */
img.is-loading {
  opacity: 1;
  background-color: #f6f6f6;
  background-image:
    url('/images/hli-logo-black.png'),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='72'%20height='26'%3E%3Ctext%20x='38'%20y='17'%20text-anchor='middle'%20font-family='PingFang%20SC,Microsoft%20YaHei,sans-serif'%20font-size='14'%20fill='%23999'%20letter-spacing='3'%3E加载中%3C/text%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat;
  /* logo 实际渲染 40×31、文字层高 20，留 8px 间距；文字字形在层高内偏上，整体再下移 3px 做视觉居中 */
  background-position: center calc(50% - 11px), center calc(50% + 23px);
  background-size: 40px auto, auto 20px;
  animation: imgLogoPulse 1.8s ease-in-out infinite;
}

@keyframes imgLogoPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

/* 图片加载失败：灰底 + 旋转爱心刷新图标（与加载 logo 同尺寸同黑色）+ 提示文字，点击重试 */
img.is-error {
  opacity: 1;
  background-color: #f6f6f6;
  background-image:
    url('/images/reload-spin.svg'),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='132'%20height='26'%3E%3Ctext%20x='66'%20y='17'%20text-anchor='middle'%20font-family='PingFang%20SC,Microsoft%20YaHei,sans-serif'%20font-size='13'%20fill='%23999'%20letter-spacing='1'%3E加载失败%20点击重试%3C/text%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat;
  /* 图标 40×40、文字层高 20，留 8px 间距；文字字形偏上，整体下移 3px 做视觉居中 */
  background-position: center calc(50% - 11px), center calc(50% + 27px);
  background-size: 40px 40px, auto 20px;
  cursor: pointer;
}

/* 透明 logo 图不显示占位灰底（众筹操作栏 / 加载界面） */
.cf-bar-logo img.is-loading,
.cf-bar-logo img.is-error,
.jump-logo-img.is-loading,
.jump-logo-img.is-error {
  background: transparent;
  animation: none;
  opacity: 0;
}
.cf-bar-logo img,
.jump-logo-img {
  background: transparent;
}

/* 滚动渐入 */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* 弹窗 */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  gap: 16px;
}

.modal.show {
  display: flex;
}

.modal-mask {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  animation: fadeIn 0.3s ease;
}

.modal-dialog {
  position: relative;
  width: 100%;
  max-width: 280px;
  background: #fff;
  border-radius: 0;
  padding: 28px 22px 24px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  animation: modalIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: center;
}

.modal-close {
  position: relative;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  z-index: 2;
  transition: transform 0.3s ease, color 0.3s ease;
}

.modal-close:hover {
  color: #ddd;
  transform: rotate(90deg);
}

.modal-body {
  text-align: center;
}

.modal-body .modal-title {
  font-size: 17px;
  font-weight: 500;
  margin-bottom: 8px;
  color: #111;
  letter-spacing: 0.3px;
}

.modal-body .modal-subtitle {
  font-size: 14px;
  color: #999;
  margin-bottom: 20px;
}

.modal-body .modal-image {
  max-width: 160px;
  max-height: 240px;
  width: 100%;
  object-fit: contain;
  margin: 0 auto 20px;
  display: block;
}

/* 弹窗二维码加载中 / 失败：占位尺寸与实际二维码一致（160×160） */
.modal-body .modal-image.is-loading,
.modal-body .modal-image.is-error {
  width: 160px;
  height: 160px;
  background-color: #f6f6f6;
  background-repeat: no-repeat, no-repeat;
}
.modal-body .modal-image.is-loading {
  background-image:
    url('/images/hli-logo-black.png'),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='72'%20height='26'%3E%3Ctext%20x='38'%20y='17'%20text-anchor='middle'%20font-family='PingFang%20SC,Microsoft%20YaHei,sans-serif'%20font-size='14'%20fill='%23999'%20letter-spacing='3'%3E加载中%3C/text%3E%3C/svg%3E");
  /* 弹窗 logo 实际渲染 44×34、文字层高 20，留 8px 间距；文字字形偏上，整体下移 3px 视觉居中 */
  background-position: center calc(50% - 11px), center calc(50% + 24px);
  background-size: 44px auto, auto 20px;
  animation: imgLogoPulse 1.8s ease-in-out infinite;
}
.modal-body .modal-image.is-error {
  background-image:
    url('/images/reload-spin.svg'),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='132'%20height='26'%3E%3Ctext%20x='66'%20y='17'%20text-anchor='middle'%20font-family='PingFang%20SC,Microsoft%20YaHei,sans-serif'%20font-size='13'%20fill='%23999'%20letter-spacing='1'%3E加载失败%20点击重试%3C/text%3E%3C/svg%3E");
  /* 弹窗图标 44×44、文字层高 20，留 8px 间距；文字字形偏上，整体下移 3px 视觉居中 */
  background-position: center calc(50% - 11px), center calc(50% + 29px);
  background-size: 44px 44px, auto 20px;
  cursor: pointer;
}

.modal-body .modal-desc {
  font-size: 13px;
  line-height: 1.7;
  color: #666;
  margin-bottom: 20px;
}

.modal-body .modal-link-btn {
  display: block;
  width: 100%;
  padding: 12px 24px;
  background: #111;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  text-align: center;
  letter-spacing: 0.5px;
  border: none;
  border-radius: 0;
  cursor: pointer;
  box-sizing: border-box;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.modal-body .modal-link-btn:hover {
  background: #000;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modalIn {
  from { transform: scale(0.92) translateY(12px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}

/* ============ 右侧悬浮圆形通知按钮 ============ */
.notify-btn {
  position: absolute;
  right: 14px;
  bottom: 24px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  color: #333;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  z-index: 49;
  transition: transform 0.2s ease, opacity 0.3s ease;
}

.notify-btn:active {
  transform: scale(0.92);
}

.notify-btn.hidden {
  opacity: 0;
  pointer-events: none;
}

.notify-dot {
  position: absolute;
  top: 9px;
  right: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff4757;
  border: 1.5px solid #fff;
}

/* ============ 通知弹窗（居中图片 · 底部叉号） ============ */
.notify-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  gap: 16px;
}

.notify-modal.show {
  display: flex;
}

.notify-mask {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  animation: fadeIn 0.3s ease;
}

.notify-dialog {
  position: relative;
  width: 100%;
  max-width: 340px;
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: hidden;
  animation: modalIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.notify-image {
  width: 100%;
  display: block;
  border-radius: 0;
}

.notify-x-close {
  position: relative;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, color 0.2s ease;
  z-index: 1;
}

.notify-x-close:hover {
  color: #ddd;
  transform: rotate(90deg);
}

/* ============ 众筹列表页 ============ */
.cf-list-page {
  padding: 0 0 16px;
}

/* 顶部海报横幅（单张固定尺寸，非轮播）
   手机端：固定 240px 横幅；电脑端由 1024 媒体查询覆盖 */
.cf-list-banner {
  position: relative;
  width: 100%;
  height: 240px;
  overflow: hidden;
  background: #f6f6f6;
  border-radius: 0;
}

/* 海报轮播轨道（自动切换，无指示条） */
.cf-banner-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease;
}

.cf-banner-slide {
  flex: 0 0 100%;
  height: 100%;
  overflow: hidden;
}

/* 沉浸式单张海报 */
.cf-list-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 沉浸式：banner 底部渐变融入页面白底，海报与列表无分界（参照 QQ 音乐艺人页） */
.cf-list-banner::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 45%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 55%, rgba(255, 255, 255, 0.88) 80%, #fff 100%);
  pointer-events: none;
  z-index: 1;
}

.cf-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  /* 沉浸式：列表上移叠入 banner 底部渐变区 */
  margin-top: -20px;
  padding: 20px 16px 20px;
  position: relative;
  z-index: 2;
}

/* 已结束卡片的弱化处理 */
.cf-card.cf-card-ended {
  opacity: 0.72;
}

.cf-card.cf-card-ended .cf-card-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.35);
  pointer-events: none;
}

.cf-card.cf-card-ended .cf-card-percent {
  color: #999;
}

/* ============ 众筹流程弹窗 ============ */
.process-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  gap: 16px;
}

.process-modal.show {
  display: flex;
}

.process-mask {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  animation: fadeIn 0.3s ease;
}

.process-dialog {
  position: relative;
  width: 100%;
  max-width: 320px;
  background: #fff;
  border-radius: 0;
  padding: 32px 22px 26px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  animation: modalIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.process-x-close {
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.25s ease, transform 0.25s ease;
  position: relative;
  z-index: 3;
}

.process-x-close:hover {
  color: #ddd;
  transform: rotate(90deg);
}

.process-title {
  font-size: 20px;
  font-weight: 800;
  text-align: center;
  margin-bottom: 24px;
  letter-spacing: 2px;
  color: #111;
}

.process-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.process-item {
  display: flex;
  gap: 14px;
}

.process-no {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background: #111;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}

.process-content {
  flex: 1;
  padding-top: 4px;
}

.process-name {
  font-size: 15px;
  font-weight: 700;
  color: #111;
  margin-bottom: 4px;
}

.process-desc {
  font-size: 12px;
  line-height: 1.6;
  color: #777;
}

.cf-card {
  display: flex;
  gap: 12px;
  background: #fff;
  border: 1px solid #eee;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  border-radius: 0;
  height: 130px;
  padding: 10px;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
  cursor: pointer;
}

.cf-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.1);
}

.cf-card-cover {
  position: relative;
  width: 110px;
  height: 110px;
  flex-shrink: 0;
  background: #f6f6f6;
  overflow: hidden;
}

.cf-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.cf-card:hover .cf-card-cover img {
  transform: scale(1.06);
}

/* tag 移出图片：显示在卡片标题前的小黑标签 */
.cf-card-tag {
  display: inline-block;
  vertical-align: 2px;
  margin-right: 6px;
  padding: 2px 7px;
  background: #111;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  border-radius: 3px;
}

.cf-card-body {
  flex: 1;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
}

.cf-card-title {
  font-size: 15px;
  font-weight: 600;
  color: #111;
  margin-bottom: 4px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cf-card-desc {
  font-size: 12px;
  color: #888;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 10px;
}

.cf-card-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.cf-card-percent {
  font-size: 18px;
  font-weight: 800;
  color: #111;
}

.cf-card-raised {
  font-size: 11px;
  color: #999;
}

.cf-status-tag {
  display: inline-block;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
}

.cf-status-success {
  background: #111;
  color: #fff;
}

.cf-status-failed {
  background: #ccc;
  color: #666;
}

.cf-status-ended {
  background: #888;
  color: #fff;
}

.cf-card-mini-bar {
  height: 3px;
  background: #f0f0f0;
  margin-top: 6px;
  overflow: hidden;
}

.cf-card-mini-bar-fill {
  height: 100%;
  background: #111;
  transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============ 众筹详情页 ============ */
.cf-detail-page {
  display: none;
}
.cf-detail-page.show {
  display: block;
  animation: cfDetailFadeIn 0.3s ease;
}

/* 详情页淡入：仅 opacity，避免 transform 影响内部 fixed 底部栏 */
@keyframes cfDetailFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 详情页采用封面沉浸式 + 悬浮返回按钮，无需独立导航栏 */
#crowdfunding-detail {
  position: relative;
}

#crowdfunding-detail {
  margin: 0;
  border-left: none;
  border-right: none;
  border-top: none;
  overflow: visible;
  /* 手机端底部贴底操作栏（fixed）会让内容滑过，预留空间避免最后一屏被遮 */
  padding-bottom: 96px;
}

/* ============ 支持成功弹窗 ============ */
.pledge-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  gap: 16px;
}

.pledge-modal.show {
  display: flex;
}

.pledge-mask {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  animation: fadeIn 0.3s ease;
}

.pledge-dialog {
  position: relative;
  width: 86%;
  max-width: 300px;
  background: #fff;
  border-radius: 0;
  padding: 36px 24px 28px;
  text-align: center;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4);
  animation: pledgePop 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 2;
}

@keyframes pledgePop {
  0% { transform: scale(0.7); opacity: 0; }
  60% { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes pledgeBounce {
  0% { transform: scale(0); }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* 群聊二维码区域 */
.pledge-qr {
  margin: 18px auto 10px;
  width: 240px;
  text-align: center;
  animation: pledgeBounce 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}

.pledge-qr img {
  width: 140px;
  height: 140px;
  margin: 0 auto;
  display: block;
  border: 1px solid #eee;
  background: #fff;
  object-fit: cover;
}

/* 众筹二维码占位（140×140）继承全局 img.is-loading / img.is-error 统一样式，灰底覆盖白底 */
.pledge-qr img.is-loading,
.pledge-qr img.is-error {
  background-color: #f6f6f6;
}

.pledge-qr-tip {
  font-size: 12px;
  color: #999;
  margin-top: 8px;
  letter-spacing: 1px;
}

.pledge-qr-btns {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.pledge-qr-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1.5px solid #111;
  background: #fff;
  color: #111;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.5px;
  padding: 10px 0;
  cursor: pointer;
}

.pledge-qr-btn:active {
  opacity: 0.75;
}

.pledge-qr-btn.pledge-qr-go {
  background: #111;
  color: #fff;
}

/* 二维码未配置占位 */
.pledge-qr-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 140px;
  height: 140px;
  margin: 0 auto;
  background: #f4f4f4;
  border: 1px dashed #d5d5d5;
}

.pledge-qr-empty span {
  font-size: 12px;
  color: #666;
}

.pledge-qr-empty small {
  font-size: 10px;
  color: #aaa;
}

/* 保存按钮禁用态（二维码未配置） */
.pledge-qr-btn.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* 关闭叉号：位于弹框下方，无圆圈 */
.pledge-x-close {
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.25s ease, transform 0.25s ease;
  font: inherit;
  z-index: 3;
}

.pledge-x-close:hover {
  color: #ddd;
  transform: rotate(90deg);
}

/* ============ 跳转加载遮罩（微信风格） ============ */
.jump-mask {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 9000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.jump-mask.show {
  opacity: 1;
  visibility: visible;
}

.jump-card {
  width: 100%;
  max-width: 420px;
  height: 88vh;
  background: #fff;
  border-radius: 20px 20px 0 0;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  overflow: hidden;
}
.jump-mask.show .jump-card {
  transform: translateY(0);
}

/* 悬浮返回按钮 */
.jump-float-back {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
  transition: transform 0.2s ease;
}

.jump-float-back:active {
  transform: scale(0.92);
}

.jump-handle {
  width: 40px;
  height: 5px;
  background: #d9d9d9;
  border-radius: 0;
  margin: 10px auto 4px;
}

.jump-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 0 30px 50px;
}

/* hli logo 图片加载：透明度由浅到黑呼吸 */
.jump-logo-loader {
  display: flex;
  align-items: center;
  justify-content: center;
}

.jump-logo-img {
  width: 64px;
  height: auto;
  display: block;
  animation: jumpLogoFade 2s ease-in-out infinite;
  background: transparent !important;
}

@keyframes jumpLogoFade {
  0%   { opacity: 0.22; }
  45%  { opacity: 1; }
  55%  { opacity: 1; }
  100% { opacity: 0.22; }
}

.jump-text {
  font-size: 14px;
  color: #666;
  text-align: center;
  line-height: 1.6;
}

.pledge-title {
  font-size: 22px;
  font-weight: 800;
  color: #111;
  margin-bottom: 6px;
  letter-spacing: 1px;
}

.pledge-group-title {
  display: none;
  font-size: 18px;
  font-weight: 500;
  color: #111;
  margin-bottom: 4px;
  letter-spacing: 1px;
}

/* 群聊回看模式：隐藏成功标题/数字滚动/礼花，只显示群聊区 */
.pledge-modal.group-only .pledge-title,
.pledge-modal.group-only .pledge-sub,
.pledge-modal.group-only .pledge-number,
.pledge-modal.group-only .pledge-confetti {
  display: none;
}

.pledge-modal.group-only .pledge-group-title {
  display: block;
}

.pledge-modal.group-only .pledge-qr {
  margin-top: 4px;
}

.pledge-reward {
  font-size: 14px;
  color: #555;
  margin-bottom: 18px;
  min-height: 20px;
}

.pledge-sub {
  font-size: 13px;
  color: #888;
  margin: 4px 0;
}

.pledge-number {
  font-size: 48px;
  font-weight: 900;
  color: #111;
  line-height: 1.1;
  margin: 6px 0;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
}

/* 礼花 */
.pledge-confetti {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.confetti-piece {
  position: absolute;
  width: 8px;
  height: 14px;
  top: -20px;
  opacity: 0;
  animation: confettiFall linear forwards;
}

@keyframes confettiFall {
  0% {
    transform: translateY(0) rotateZ(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotateZ(720deg);
    opacity: 0.9;
  }
}

/* ============ 分享海报弹窗 ============ */
.share-modal {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  gap: 16px;
}

.share-modal.show {
  display: flex;
}

.share-mask {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  animation: fadeIn 0.3s ease;
}

.share-dialog {
  position: relative;
  width: 100%;
  max-width: 300px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.share-poster {
  width: 100%;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
  animation: pledgePop 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.share-poster canvas {
  display: block;
  width: 100%;
  height: auto;
}

.share-save-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  background: transparent;
  color: #fff;
  border: none;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.share-save-btn:hover {
  opacity: 0.75;
  transform: translateY(-2px);
}

.share-x-close {
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.25s ease, transform 0.25s ease;
  z-index: 3;
}

.share-x-close:hover {
  color: #ddd;
  transform: rotate(90deg);
}

/* ============ 广告弹窗 ============ */
.ad-modal {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  gap: 16px;
}

.ad-modal.show {
  display: flex;
}

.ad-mask {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  animation: fadeIn 0.3s ease;
}

.ad-dialog {
  position: relative;
  width: 100%;
  /* 可见卡片宽 = 弹窗宽 - 44px 露边 = 280px，与菜单弹窗（.modal-dialog）同宽 */
  max-width: 324px;
  z-index: 2;
}

/* 多通知横向轨道：卡片之间留出间距，整体可平移 */
.ad-track {
  display: flex;
  gap: 10px;
  will-change: transform;
}

/* 单个通知卡片（圆角为 0）：固定尺寸，图片铺满背景、超出裁剪；宽度比视口窄，让下一张卡片漏出一条边 */
.ad-notice {
  flex: 0 0 calc(100% - 44px);
  box-sizing: border-box;
  position: relative;
  width: 100%;
  height: 420px;
  background: #000;
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
  animation: pledgePop 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 只有一个通知时卡片占满宽度 */
.ad-track.single .ad-notice {
  flex-basis: 100%;
}

/* 多张通知时：卡片在弹窗内水平居中（卡片比容器窄 44px，左补一半 22px），
   下一张卡片在右侧露出的边条与左侧留宽对称，视觉不再偏左 */
.ad-track:not(.single) .ad-notice {
  margin-left: 22px;
}

/* 背景图：铺满固定大小卡片，超出部分裁剪 */
.ad-notice-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* 黑色按钮（无圆角）浮于图片底部 */
.ad-notice-btn {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 150px;
  padding: 12px 34px;
  background: #111;
  color: #fff;
  border-radius: 0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: transform 0.2s ease, background 0.2s ease;
}

.ad-notice-btn:active {
  transform: translateX(-50%) scale(0.96);
  background: #000;
}

.ad-x-close {
  position: absolute;
  left: 50%;
  /* 叉号紧贴卡片正下方 16px（与菜单弹窗 .modal-close 位置一致）；
     270 = 半张卡片高 210 + 间隙 16 + 按钮高 44，卡片本身保持正居中 */
  bottom: max(20px, calc(50% - 270px));
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  transition: color 0.25s ease, transform 0.25s ease;
  transform: translateX(-50%);
  z-index: 3;
}

.ad-x-close:hover {
  color: #ddd;
  transform: translateX(-50%) rotate(90deg);
}

/* ============ 首页底部展示图片位 ============ */
.home-logo-section {
  padding: 10px 24px 30px;
  display: flex;
  justify-content: center;
}

.home-logo-section .home-ohli-logo {
  width: 90px;
  height: auto;
  display: block;
  color: #111;
}

/* 后台配置的展示图片：手机端居中，按容器宽度等比缩放 */
.home-logo-link {
  display: flex;
  justify-content: center;
  width: 100%;
}
.home-logo-img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 240px;
  object-fit: contain;
}

/* 响应式：桌面端居中显示手机框 */
@media (min-width: 500px) {
  body {
    padding: 20px 0;
    align-items: center;
  }
  .phone-frame {
    height: calc(100vh - 40px);
    max-height: 900px;
    border-radius: 0;
    overflow: hidden;
    border: 10px solid #1a1a1a;
  }
}

/* ============ 众筹型号选择 ============ */
.cf-models-head {
  font-size: 15px;
  font-weight: 600;
  color: #111;
  margin: 18px 0 10px;
}

.cf-models-sub {
  font-size: 11px;
  font-weight: 400;
  color: #999;
  margin-left: 8px;
}

.cf-models {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cf-model-item {
  background: #f7f7f7;
  border: 1.5px solid transparent;
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.cf-model-item.selected {
  background: #fff;
  border-color: #111;
}

.cf-model-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.cf-model-name {
  font-size: 14px;
  font-weight: 600;
  color: #111;
}

.cf-model-price {
  font-size: 14px;
  font-weight: 600;
  color: #111;
  white-space: nowrap;
}

.cf-model-bar {
  height: 4px;
  background: #e8e8e8;
  margin: 10px 0 8px;
  overflow: hidden;
}

.cf-model-fill {
  height: 100%;
  background: #111;
  transition: width 0.5s ease;
}

.cf-model-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cf-model-count {
  font-size: 11px;
  color: #777;
}

.cf-model-need {
  font-size: 11px;
  color: #999;
}

.cf-model-badge {
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: #111;
  padding: 2px 8px;
}

.cf-model-item.reached .cf-model-fill {
  background: #111;
}

/* 我已提交的型号：浅灰底柔和标识，无黑框、不可再选 */
.cf-model-item.mine {
  background: #f2f2f2;
  border-color: transparent;
  cursor: default;
}

.cf-mine-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  background: #111;
  color: #fff;
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.5px;
  vertical-align: 1px;
}

.cf-model-mine {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 11px;
  color: #888;
}

.cf-mine-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

/* 查看群聊：透明纯文字（无下划线，按压变黑） */
.cf-group-btn {
  border: none;
  background: transparent;
  color: #555;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.5px;
  padding: 0;
  cursor: pointer;
}

.cf-group-btn:active {
  color: #111;
}

/* 取消支持：恢复小尺寸黑框按钮，背景透明 */
.cf-cancel-btn {
  border: 1px solid #111;
  background: transparent;
  color: #111;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.5px;
  padding: 5px 14px;
  cursor: pointer;
}

.cf-cancel-btn:active {
  background: #111;
  color: #fff;
}

/* ============ 众筹 ID 提交弹窗 ============ */
.id-modal {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.id-modal.show {
  opacity: 1;
  pointer-events: auto;
}

.id-mask {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.id-dialog {
  position: relative;
  width: 86%;
  max-width: 300px;
  background: #fff;
  border-radius: 0;
  padding: 28px 22px 22px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4);
  animation: pledgePop 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 2;
}

/* 提交 ID 弹窗顶部：复制小红书 ID 教程图片，贴顶铺满 */
.id-guide {
  margin: -28px -22px 18px;
}
.id-guide[hidden] {
  display: none;
}
.id-guide img {
  display: block;
  width: 100%;
  max-height: 46vh;
  background: #f6f6f6;
  object-fit: contain;
}

.id-title {
  font-size: 17px;
  font-weight: 600;
  color: #111;
  text-align: center;
  margin: 0 0 8px;
}

.id-model-line {
  font-size: 12px;
  color: #777;
  text-align: center;
  margin: 0 0 16px;
  word-break: break-all;
}

.id-input {
  width: 100%;
  box-sizing: border-box;
  border: none;
  border-bottom: 1.5px solid #111;
  background: #f7f7f7;
  padding: 10px 12px;
  font-size: 14px;
  color: #111;
  outline: none;
}

.id-input::placeholder {
  color: #bbb;
}

.id-error {
  font-size: 12px;
  color: #d33;
  min-height: 18px;
  margin: 8px 0 2px;
  text-align: center;
}

.id-submit {
  display: block;
  width: 100%;
  border: none;
  background: #111;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
  padding: 12px 0;
  cursor: pointer;
  margin-top: 6px;
}

.id-submit:disabled {
  opacity: 0.6;
  cursor: default;
}

.id-tip {
  font-size: 11px;
  color: #aaa;
  text-align: center;
  margin: 10px 0 0;
}

/* ==================================================================
   电脑端适配（≥1024px）
   策略：保留 .content 内部滚动与全部 JS 逻辑，拓宽外壳，
   内容按宽屏重排：首页模块居中限宽、众筹列表多列网格、详情页收窄。
   ================================================================== */
@media (min-width: 1024px) {
  /* 外壳：真正铺满宽屏，重置 500px 断点残留的手机壳边框、高度限制与 body 间距 */
  body { padding: 0; background: #fff; }
  .phone-frame {
    width: 100%;
    max-width: none;
    height: 100vh;
    max-height: none;
    border: none;
    box-shadow: none;
  }

  /* ============ 首页整屏分屏（小米汽车官网风格：每个模块占满一屏 + 滚动吸附） ============ */
  .content.snap-home { scroll-snap-type: y mandatory; }
  .content.snap-home .home-hero-block,
  .content.snap-home .coverflow-section,
  .content.snap-home .photo-module,
  .content.snap-home .home-bottom-split {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  /* 第一屏：Hero 满屏 + 商品分类横条（同屏组成第一屏，图占满剩余空间） */
  .content.snap-home .home-hero-block {
    height: 100vh;
    display: flex;
    flex-direction: column;
  }
  .content.snap-home .home-hero-block .hero-carousel {
    flex: 1 1 auto;
    height: auto;
    max-height: none;
    min-height: 0;
  }
  .content.snap-home .home-hero-block .category-strip {
    flex: 0 0 auto;
    justify-content: center;
    overflow-x: visible;
    padding: 20px 24px 34px;
  }
  .content.snap-home .home-hero-block .category-item {
    flex: 0 1 132px;
  }

  /* 第二屏：封面流纵向居中整屏 */
  .content.snap-home .coverflow-section {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 auto;
    padding: 40px 24px;
  }
  .content.snap-home .coverflow-card { flex: 0 0 320px; }

  /* 第三屏：搭配商品纵向居中整屏（宽度受视口高度约束，保证 16:9 图不溢出） */
  .content.snap-home .photo-module {
    min-height: 100vh;
    max-width: min(1200px, calc((100vh - 200px) * 16 / 9));
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 auto;
    padding: 40px 0;
  }

  /* ============ 首页 ============ */
  /* Hero：宽屏沉浸式大图 */
  .hero-carousel { height: 88vh; max-height: 860px; }
  .hero-dots { width: 440px; }

  /* Logo 装饰区 */
  .logo-section { padding: 80px 20px; }
  .logo-item img { max-width: 260px; }

  /* 商品分类二级页 / 搜索页：内容居中限宽，网格 3 列 */
  .sub-topbar { height: 72px; padding: 0 24px 0 16px; }
  /* 桌面顶栏更高，覆盖偏移同步加大 */
  #cf-list-banner { margin-top: -72px; }
  .cf-detail-page .cf-cover { margin-top: -72px; }
  /* 分类页：灰底白卡（3 列）+ 顶栏右侧筛选 */
  .search-area { padding: 22px 24px 14px; gap: 12px; max-width: 1248px; margin: 0 auto; }
  .view-search.mode-idle .search-area { margin-top: 30vh; }
  .view-search.mode-active .search-area { margin-top: 16px; }
  .search-box { height: 48px; }
  .cat-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    max-width: 1200px;
    margin: 0 auto 64px;
    padding: 24px;
  }
  .goods-name { font-size: 15px; margin: 12px 14px 0; }
  .goods-price { font-size: 19px; margin: 8px 14px 0; }
  .cat-empty { padding: 96px 24px; font-size: 14px; background: transparent; }

  /* 3D 封面流：卡片固定宽，一屏可见约 3 张 */
  .coverflow-section {
    max-width: 1200px;
    margin: 0 auto 48px;
    padding: 56px 24px 40px;
  }
  /* 标题靠左（与卡片左缘对齐） */
  .coverflow-title-bar {
    text-align: left;
    margin-bottom: 22px;
    padding: 0 4px;
  }
  .coverflow-title { font-size: 22px; }
  .coverflow-info { text-align: left; padding: 0 4px; }
  .coverflow-card { flex: 0 0 300px; }

  /* 照片商品：桌面平铺（标题靠左，与封面流对齐） */
  .photo-module {
    max-width: 1200px;
    margin: 0 auto 48px;
    padding: 56px 0 40px;
  }
  .photo-title {
    text-align: center;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 4px;
    margin: 0 0 4px;
    padding: 0 24px;
  }
  .photo-title-bar {
    text-align: center;
    margin-bottom: 22px;
    padding: 0 24px;
  }
  /* 桌面端背景图改为横屏比例（16:9），手机端保持 4:5 竖屏 */
  .photo-stage {
    aspect-ratio: 16 / 9;
  }
  /* 桌面端商品小卡片保持原尺寸（手机端缩小到 76px） */
  .photo-card {
    width: 84px;
  }
  .photo-card-thumb::after {
    width: 18px;
    height: 18px;
  }

  /* ============ 首页最后一屏：APP 下载区 + 底部信息（整屏：上 2/3 / 下 1/3，整体贴底） ============ */
  .home-bottom-split {
    height: 100vh;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
    max-width: none;
    margin: 0;
    /* 上下不留白：让「上 2/3 / 下 1/3」严格按整屏高度切分，且末屏内容贴住浏览器底边 */
    padding: 0 24px;
  }
  /* 上：底部信息占 2/3（扣掉中间 1px 分隔线；内容在区块内纵向居中） */
  .home-bottom-split .home-bottom-info {
    flex: 0 0 auto;
    height: calc(66.6667% - 0.6667px);
    min-height: 0;
    align-content: center;
    padding: 40px 0;
  }
  /* 下：APP 模块占 1/3（扣掉中间 1px 分隔线） */
  .home-bottom-split .footer-app {
    flex: 0 0 auto;
    height: calc(33.3333% - 0.3333px);
    min-height: 0;
  }

  /* 底部模块（横线下方）：左 = Logo 图 + 特性文案，右 = 两个二维码；版权与二维码同中轴 */
  .footer-app {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    justify-items: center;
    /* 整体在「下 1/3」区域内纵向居中：既与横线拉开距离，也不贴浏览器底边 */
    align-content: center;
    column-gap: 64px;
    row-gap: 18px;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 32px 0;
  }
  .footer-app-qrs { display: flex; }

  /* 分隔线：分隔「底部信息」与「底部模块」，与内容同宽居中 */
  .home-bottom-divider {
    display: block;
    width: 100%;
    max-width: 1200px;
    height: 1px;
    margin: 0 auto;
    background: #e5e5e5;
  }

  /* 左栏：Logo 图片 + 特性文案，栏内水平居中 */
  .footer-app-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }
  .footer-app-logo {
    width: 76px;
    height: 76px;
    object-fit: contain;
    display: block;
  }
  .footer-app-logo-empty {
    width: 76px;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f6f6f6;
    color: #bbb;
    font-size: 12px;
  }
  .footer-app-features {
    font-size: 15px;
    color: #9a9a9a;
    letter-spacing: 1px;
    margin: 0;
    text-align: center;
  }
  .footer-app-qrs {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 28px;
  }
  .footer-app-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .footer-app-qr-box {
    position: relative;
    width: 130px;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f6f6f6;
  }
  .footer-app-qr-img { width: 100%; height: 100%; object-fit: contain; display: block; }
  .footer-app-qr-empty { color: #bbb; font-size: 12px; }
  .footer-app-qr-label { font-size: 13px; color: #666; margin: 0; text-align: center; }

  /* 底部信息：左右分栏（左展示图片完整不裁剪 / 右菜单+社交胶囊） */
  .home-bottom-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 48px;
    align-items: stretch;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
  }

  /* 左列：高度由右列内容（菜单首行文字顶 → 社交胶囊底）拉伸决定；图片完整显示、不裁剪，顶底正好贴列盒 */
  .home-logo-section {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    align-self: stretch;
    padding: 0;
    display: flex;
  }
  .home-logo-section .home-ohli-logo {
    width: 110px;
    align-self: center;
  }
  .home-logo-link {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    /* top 4px：抵消菜单首行字体行距，使图片顶=第一行文字墨顶；bottom:0 保证图底=胶囊底（不设 height，由 top/bottom 共同决定） */
    top: 4px;
    width: 100%;
    justify-content: stretch;
  }
  .home-logo-img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain;
    /* 左对齐：图片左缘与 APP 模块标题左缘对齐（与参考图一致） */
    object-position: left center;
  }

  /* 右列：菜单 + 社交胶囊自然排列，其内容总高即左图高度 */
  .home-bottom-right {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
  }
  .menu {
    max-width: none;
    margin: 0;
    padding: 0;
  }
  /* 菜单项恢复自然高度；首项贴顶且文字行高为 1，使第一行文字顶与图片顶齐 */
  .menu-item {
    flex: 0 0 auto;
    padding: 20px 0;
  }
  .menu-item:first-child {
    padding-top: 0;
  }
  .menu-label {
    font-size: 17px;
    line-height: 1;
  }

  /* 社交胶囊：菜单下方左对齐；作为右列最后一项，其底边即图片底边 */
  .social-icons {
    justify-content: flex-start;
    margin: 24px 0 0;
  }

  /* 版权与标语：放在二维码正下方，与两个二维码同一中轴（居中） */
  .footer {
    grid-column: 2;
    grid-row: 2;
    max-width: none;
    margin: 0;
    padding: 0;
    text-align: center;
  }

  /* ============ 众筹列表页 ============ */
  /* 顶部海报：固定高度横幅（单张，非轮播），返回键悬浮其上 */
  .cf-list-banner {
    max-width: none;
    margin: 0;
    height: 360px;
  }
  .cf-list {
    max-width: 1080px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    padding: 40px 32px;
  }
  .cf-card { height: 140px; }

  /* ============ 众筹详情页：左右两栏（左：轮播+项目详情 / 右：进度+型号+立即支持） ============ */
  .crowdfunding { max-width: none; }
  #crowdfunding-detail { padding-bottom: 0; }
  .cf-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    gap: 56px;
    max-width: 1240px;
    margin: 0 auto;
    padding: 24px 40px 80px;
    align-items: start;
  }
  .cf-left-col {
    display: flex;
    flex-direction: column;
    gap: 48px;
  }
  .cf-right-col {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 24px;
  }
  /* 重置移动端水平内边距（列内自行排版） */
  .cf-title, .cf-desc, .cf-progress, .cf-models-head, .cf-models,
  .cf-detail-content, .cf-rewards {
    padding-left: 0;
    padding-right: 0;
  }
  .cf-title { margin-top: 0; }

  /* 封面：1:1 商品主图比例 */
  .cf-cover {
    aspect-ratio: 1 / 1;
    max-height: none;
  }

  /* 操作栏：型号选择框正下方，静态撑满右列（白底通栏样式，与移动端一致） */
  .cf-action-bar {
    position: static;
    left: auto;
    bottom: auto;
    transform: none;
    width: 100%;
    max-width: none;
    margin-top: 22px;
    padding: 10px 0 0;
    border-top: 1px solid #ececec;
    pointer-events: auto;
  }
  .cf-action-bar .cf-bar-logo img { height: 30px; }
  .cf-action-bar .cf-pledge-capsule { height: 50px; }

  /* 置顶按钮：右列购买信息已常驻，隐藏 */
  .cf-back-top { display: none; }

  /* ============ 弹窗：宽屏适当放大，保持直角 ============ */
  .modal-dialog { max-width: 360px; }
  .process-dialog { max-width: 400px; }
  .pledge-dialog { max-width: 360px; }
  .share-dialog { max-width: 340px; }
  /* 广告弹窗（电脑端）：弹窗居中、不铺满屏幕；
     两张卡片取消轮播，横向平铺并排显示；叉叉在弹窗下方水平居中 */
  .ad-modal.pc-full {
    padding: 24px;
    gap: 18px;
    justify-content: center;
  }
  .ad-modal.pc-full .ad-dialog {
    width: 100%;
    max-width: 600px;
    min-width: 0;
    overflow: visible;
  }
  .ad-modal.pc-full .ad-track {
    width: 100%;
    min-width: 0;
    flex-direction: row;
    gap: 12px;
    transform: none !important;
  }
  .ad-modal.pc-full .ad-notice {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    margin-left: 0; /* 抵消手机端的居中偏移 */
    height: min(440px, 60vh);
  }
  .ad-modal.pc-full .ad-notice-btn { bottom: 20px; }
  .ad-modal.pc-full .ad-x-close {
    position: static;
    left: auto;
    bottom: auto;
    margin: 0 auto;
    transform: none;
  }
  .ad-modal.pc-full .ad-x-close:hover {
    transform: rotate(90deg);
  }
}

/* 宽屏电脑（≥1440px）：众筹列表三列 */
@media (min-width: 1440px) {
  .cf-list {
    grid-template-columns: repeat(3, 1fr);
    max-width: 1280px;
  }
}