/* ==========================================================================
   前台（顾客端）· 390px 移动优先
   对应设计稿：F1 首页 / F2 详情 / F3 客服弹窗 / F4 兑换说明 / F5 无结果
               F6 暂未展示 / F7 加载失败 / F8 搜索结果
   ========================================================================== */

/* ============ 页面外壳（桌面预览时居中显示为手机；真机全屏） ============ */
body.front {
  background: #E9EAEC;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 32px 0;
  min-height: 100vh;
}

.phone {
  position: relative;
  width: 390px;
  flex: none;
  background: var(--white);
  border-radius: 24px;          /* 设计稿 F1/F5 外框圆角 */
  overflow: hidden;
  box-shadow: var(--sh-phone);
  display: flex;
  flex-direction: column;
}

@media (max-width: 430px) {
  body.front { padding: 0; background: var(--white); }
  .phone { width: 100%; border-radius: 0; box-shadow: none; min-height: 100vh; }
}

/* ================= 状态栏（已废弃） =================
   设计稿里画的手机外壳状态栏（固定 9:41 + 信号/电量图标）已不再渲染：
   那是设计稿的装饰，不是页面内容 —— 真机上会显示错误的时间，且系统状态栏本就承担此职。
   JS 侧的 statusBar()/mountStatusBar() 已同步移除，这里只保留兼容规则以防旧缓存页面残留。 */
.statusbar { display: none; }

/* ================= 品牌头部 60px ================= */
.brandbar {
  flex: none;
  height: 60px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: 9px; }
.brand-logo {
  width: 32px; height: 32px; flex: none;
  border-radius: 10px; overflow: hidden;
}
.brand-logo img { width: 100%; height: 100%; object-fit: cover; }
.brand-text { display: flex; flex-direction: column; gap: 1px; }
.brand-name { font-size: 15px; font-weight: 700; letter-spacing: .2px; }
.brand-sub  { font-size: 10px; color: var(--ink-4); }

.brand-link {
  display: flex; align-items: center; gap: 2px;
  font-size: 12px; color: var(--ink-2);
}

/* ================= 导航栏 54px ================= */
.navbar {
  flex: none;
  height: 54px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.navbar .nav-back { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }
.navbar .nav-title { font-size: 16px; font-weight: 600; }
.navbar .nav-side  { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }
.navbar .nav-center {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 7px;
}
.navbar .nav-center img { width: 22px; height: 22px; border-radius: 7px; }

/* ================= 内容容器 ================= */
.content {
  flex: 1;
  padding: 4px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.content.gap-12 { gap: 12px; }

/* ================= 主张横幅 ================= */
.banner {
  background: var(--lime-bg);
  border-radius: var(--r-xl);
  padding: 16px 12px 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.banner-text { display: flex; flex-direction: column; gap: 7px; }
.banner-title { font-size: 20px; font-weight: 800; letter-spacing: .3px; }
.banner-sub   { font-size: 11.5px; color: var(--deep-2); }
.banner-art   { width: 66px; height: 59px; flex: none; }

/* ================= 搜索框 ================= */
.search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 14px;
  background: var(--field);
  border-radius: 22px;
}
.search input {
  flex: 1; min-width: 0;
  border: 0; background: none; outline: none;
  font-size: 13px; color: var(--ink);
}
.search input::placeholder { color: var(--ink-5); }
.search .ico { color: var(--ink-4); }

/* ================= 分类横滑 ================= */
.cats { display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; }
.cats::-webkit-scrollbar { display: none; }
.cat {
  flex: none;
  height: 30px;
  padding: 0 10px;
  border-radius: 15px;
  background: var(--field);
  color: var(--ink-2);
  font-size: 12.5px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.cat.is-active { background: var(--lime); color: var(--ink); font-weight: 500; }

/* ================= 筛选 / 排序 ================= */
.filterbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.selects { display: flex; gap: 8px; }
.select {
  height: 30px;
  padding: 0 12px;
  border-radius: 15px;
  background: var(--field);
  color: var(--ink-2);
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.selects .select { padding: 0 10px; }
.sorts { display: flex; align-items: center; gap: 14px; }
.sort {
  font-size: 12.5px;
  color: var(--ink-4);
  white-space: nowrap;
  padding: 0;
}
.sort.is-active {
  color: var(--ink);
  font-weight: 600;
  background: var(--lime-soft);
  height: 26px;
  padding: 0 10px;
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
}

/* ================= 区块标题 ================= */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.section-head .left { display: flex; align-items: center; gap: 8px; }
.section-title { font-size: 16px; font-weight: 700; }
.section-note  { font-size: 11px; color: var(--ink-5); }

.badge {
  display: inline-flex; align-items: center;
  height: 18px; padding: 0 7px;
  border-radius: 9px;
  background: var(--field);
  color: var(--ink-4);
  font-size: 10px;
}

/* ================= 物料网格与卡片 ================= */
.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.card { display: flex; flex-direction: column; gap: 8px; cursor: pointer; }

.cover {
  position: relative;
  height: 186px;
  border-radius: var(--r-cover);
  overflow: hidden;
  background: var(--field);
}
.cover img { width: 100%; height: 100%; object-fit: cover; }

.tag {
  position: absolute; left: 8px; top: 8px;
  padding: 4px 8px;
  border-radius: var(--r-sm);
  background: var(--lime);
  color: var(--ink);
  font-size: 10px;
  line-height: 1;
  font-weight: 500;
}
.tag.is-off { background: var(--line); color: var(--ink-2); font-weight: 400; }

.card-name {
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.3;
}

.card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.points {
  padding: 3px 7px;
  border-radius: var(--r-xs);
  background: var(--lime);
  color: var(--ink);
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
}
.points.is-off { background: var(--line); color: var(--ink-2); }

.likes {
  display: inline-flex; align-items: center; gap: 3px;
  color: var(--ink-3); font-size: 11.5px;
  flex: none;
  /* 列表里爱心是独立按钮：点它只点赞，不跳详情页 */
  border: 0; padding: 0; margin: 0; background: none;
  font-family: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, opacity .12s ease;
}
.likes .ico { color: var(--heart); }
/* 点击反馈：轻微回弹，让"点到了"有触感 */
.likes:active { transform: scale(.88); }
.likes[data-busy] { opacity: .55; cursor: default; }
.likes:focus-visible { outline: 2px solid var(--heart); outline-offset: 2px; border-radius: 6px; }

/* 详情页标题区的爱心只是展示（点赞动作由底部按钮承担），别让它看起来可点 */
.d-title .likes { cursor: default; }
.d-title .likes:active { transform: none; }

/* ================= 底部提示条 ================= */
.notice {
  display: flex; align-items: flex-start; gap: 7px;
  padding: 11px 12px;
  border-radius: var(--r-nav);
  background: var(--bg);
  color: var(--ink-3);
  font-size: 11px;
  line-height: 1.4;
}
.notice .ico { flex: none; margin-top: 1px; color: var(--ink-4); }

/* ================= 加载更多 ================= */
.loadmore {
  height: 42px;
  border-radius: 21px;
  background: var(--field);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 500;
  display: flex; align-items: center; justify-content: center;
  width: 100%;
}
.loadmore.is-end {
  background: none;
  color: var(--ink-5);
  font-size: 11px;
  font-weight: 400;
}

/* ================= 结果统计行 ================= */
.resultbar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.result-count { font-size: 13px; font-weight: 600; }
.result-filtered { font-size: 11px; color: var(--ink-5); }

/* ================= 已选条件 chips ================= */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 12px;
  border-radius: 15px;
  background: var(--field);
  color: var(--ink-2);
  font-size: 11.5px;
  white-space: nowrap;
}
.chip .ico { color: var(--ink-4); }

/* ================= 空状态 / 状态块 ================= */
.empty-state {
  display: flex; flex-direction: column; align-items: center;
  gap: 13px; padding-top: 44px; text-align: center;
}
.empty-art {
  width: 104px; height: 104px; border-radius: 52px;
  background: var(--lime-bg);
  display: flex; align-items: center; justify-content: center;
}
.empty-title { font-size: 16px; font-weight: 600; }
.empty-desc  { font-size: 12px; color: var(--ink-3); line-height: 1.55; }
.empty-hint  { font-size: 10.5px; color: var(--ink-6); }

.btn-row { display: flex; gap: 10px; justify-content: center; }

/* 整块居中状态页（F6 / F7） */
.state-block {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 13px; padding: 0 24px 60px; text-align: center;
}

/* ================= 按钮 ================= */
.btn {
  height: 42px;
  padding: 0 20px;
  border-radius: 21px;
  font-size: 13px;
  font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  white-space: nowrap;
}
.btn-lime { background: var(--lime); color: var(--ink); }
.btn-ghost { background: var(--white); color: var(--ink); border: 1px solid var(--line-2); }
.btn-block { width: 100%; }

/* ================= F2 详情页 ================= */
.hero { position: relative; height: 368px; background: var(--field); }
.hero img { width: 100%; height: 100%; object-fit: cover; }
.hero-idx {
  position: absolute; right: 12px; bottom: 12px;
  padding: 3px 9px; border-radius: 11px;
  background: rgba(20, 22, 26, .56);
  color: #fff; font-size: 11px;
}

.thumbs { display: flex; gap: 8px; }
.thumb {
  width: 64px; height: 64px; flex: none;
  border-radius: var(--r-nav);
  overflow: hidden;
  background: var(--field);
  border: 2px solid transparent;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb.is-active { border-color: var(--lime); }

.d-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.d-name { font-size: 18px; font-weight: 700; }
.d-title .likes { margin-left: auto; }

.d-points { font-size: 17px; font-weight: 700; color: var(--deep); }

.kv-list { display: flex; flex-direction: column; gap: 8px; }
.kv { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; }
.kv .k { color: var(--ink-4); }
.kv .v { color: var(--ink); }
.copy-mini { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-4); }

/* 内容卡（详情页各模块） */
.panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 14px;
  display: flex; flex-direction: column; gap: 12px;
}
.panel-head { display: flex; align-items: center; gap: 7px; }
.panel-title { font-size: 14px; font-weight: 600; }
.panel-head .badge { margin-left: auto; }
.panel-head .ico { color: var(--deep-2); }

.hl-card { background: var(--lime-bg); border-radius: var(--r-cover); padding: 12px; display: flex; flex-direction: column; gap: 9px; }
.hl-item { display: flex; gap: 8px; font-size: 12px; line-height: 1.5; }
.hl-num {
  width: 17px; height: 17px; flex: none; margin-top: 1px;
  border-radius: 50%; background: var(--lime);
  color: var(--ink); font-size: 10px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}

.info-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 12px; padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.info-row:last-child { border-bottom: 0; padding-bottom: 0; }
.info-row .k { color: var(--ink-4); flex: none; }
.info-row .v { color: var(--ink); text-align: right; }

.moment-img { width: 100%; height: 150px; border-radius: var(--r-cover); overflow: hidden; background: var(--field); }
.moment-img img { width: 100%; height: 100%; object-fit: cover; }
.panel .caption { font-size: 11px; color: var(--ink-5); line-height: 1.5; }
.panel .body-text { font-size: 12px; color: var(--ink-2); line-height: 1.6; }

/* 折叠面板 */
.fold-head {
  display: flex; align-items: center; gap: 7px; width: 100%;
}
.fold-head .ico { color: var(--deep-2); }
.fold-head .caret { margin-left: auto; color: var(--ink-4); transition: transform .2s; }
.panel.is-open .fold-head .caret { transform: rotate(180deg); }
.fold-body { display: none; flex-direction: column; gap: 11px; }
.panel.is-open .fold-body { display: flex; }

.step { display: flex; gap: 9px; }
.step-num {
  width: 20px; height: 20px; flex: none; margin-top: 1px;
  border-radius: 50%; background: var(--lime);
  color: var(--ink); font-size: 11px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.step-text { display: flex; flex-direction: column; gap: 2px; }
.step-text b { font-size: 12.5px; font-weight: 600; }
.step-text span { font-size: 11.5px; color: var(--ink-3); line-height: 1.5; }

/* ================= 底部操作条 ================= */
.actionbar {
  flex: none;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px 12px;
  background: var(--white);
  border-top: 1px solid var(--line);
}
.act-like {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: 40px; flex: none;
  font-size: 10px; color: var(--ink-4);
}
.act-like .ico { color: var(--heart); }
/* 本访客已赞过：按钮文字提亮，图标已由 heartFill 画成实心 */
.act-like.is-liked { color: var(--heart); }
.act-like.is-liked span { font-weight: 600; }
.actionbar .btn { flex: 1; }

/* ================= 点赞动画（抖音式：心形弹跳 + 粒子飞散） ================= */
/* 触发时给图标加 .is-pop，播一次弹跳；粒子由 JS 动态生成 */
@keyframes st-heart-pop {
  0%   { transform: scale(1); }
  28%  { transform: scale(.78); }   /* 先压一下，蓄力 */
  52%  { transform: scale(1.34); }  /* 弹出去 */
  74%  { transform: scale(.94); }
  100% { transform: scale(1); }
}
@keyframes st-heart-ring {
  0%   { transform: scale(.5); opacity: .85; }
  100% { transform: scale(2.1); opacity: 0; }
}
@keyframes st-particle {
  0%   { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--px), var(--py)) scale(.2); opacity: 0; }
}

/* 动画容器：脱离文档流，不撑开布局 */
.likes, .act-like {
  position: relative;
}
.st-anim {
  position: absolute; left: 50%; top: 50%;
  width: 0; height: 0; pointer-events: none;
  z-index: 5;
}
/* 图标弹跳：作用在 svg 上，不影响内部 path 的 fill */
.st-anim-host { animation: st-heart-pop .62s cubic-bezier(.28, .84, .42, 1) both; }
.st-ring {
  position: absolute; left: 50%; top: 50%;
  width: 26px; height: 26px; margin: -13px 0 0 -13px;
  border: 2px solid var(--heart); border-radius: 50%;
  animation: st-heart-ring .55s ease-out forwards;
}
.st-dot {
  position: absolute; left: 50%; top: 50%;
  width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px;
  border-radius: 50%; background: var(--heart);
  animation: st-particle .72s cubic-bezier(.22, .68, .36, 1) forwards;
}
/* 尊重「减少动态效果」的系统偏好 */
@media (prefers-reduced-motion: reduce) {
  .st-anim-host, .st-ring, .st-dot { animation: none; }
  .st-anim { display: none; }
}

/* ================= F3 客服弹窗 ================= */
.mask {
  position: absolute; inset: 0;
  background: rgba(20, 22, 26, .45);
  display: none;
  z-index: 40;
}
.mask.is-open { display: block; }

.sheet {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 332px;
  background: var(--white);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-modal);
  padding: 30px 22px 22px;
  display: none;
  flex-direction: column; align-items: center; gap: 12px;
  z-index: 41;
  text-align: center;
}
.sheet.is-open { display: flex; }
.sheet-close {
  position: absolute; right: 14px; top: 14px;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-5);
}
.sheet-logo {
  width: 64px; height: 64px; border-radius: var(--r-lg);
  display: block; object-fit: contain;
}
.sheet-title { font-size: 17px; font-weight: 700; line-height: 1.45; }
.sheet-desc  { font-size: 12px; color: var(--ink-3); line-height: 1.6; }
.sheet .btn { width: 100%; margin-top: 4px; }

/* ================= F4 兑换说明 ================= */
.card-box {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 14px;
  display: flex; flex-direction: column; gap: 13px;
}
.card-box > .box-head { display: flex; align-items: center; gap: 7px; }
.box-title { font-size: 14px; font-weight: 600; }
.box-head .ico { color: var(--deep-2); }

.bullets { display: flex; flex-direction: column; gap: 9px; }
.bullets li { display: flex; gap: 8px; font-size: 12px; color: var(--ink-2); line-height: 1.5; }
.bullets li::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: var(--lime); flex: none; margin-top: 7px;
}

.path-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.path-row:last-child { border-bottom: 0; padding-bottom: 0; }
.path-row .k { color: var(--ink-4); }
.path-row .v { color: var(--ink); font-weight: 500; text-align: right; }

.foot-note { font-size: 10.5px; color: var(--ink-5); line-height: 1.6; }

/* ================= 布局辅助 ================= */
.content-12 { gap: 12px; }

.stack { display: flex; flex-direction: column; gap: 12px; }

/* ================= 轻提示 ================= */
.toast {
  position: absolute;
  left: 50%; bottom: 96px;
  transform: translate(-50%, 8px);
  max-width: 320px;
  background: rgba(20, 22, 26, .88);
  color: #fff;
  font-size: 12px; line-height: 1.5;
  padding: 10px 14px;
  border-radius: var(--r-nav);
  opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 60;
}
.toast.is-show { opacity: 1; transform: translate(-50%, 0); }

/* 通用：绿色描边标签（可兑换等） */
.tag-lime {
  display: inline-flex; align-items: center;
  padding: 3px 8px; border-radius: var(--r-sm);
  background: var(--lime); color: var(--ink);
  font-size: 10.5px; font-weight: 500;
}
.tag-gray {
  display: inline-flex; align-items: center;
  padding: 3px 8px; border-radius: var(--r-sm);
  background: var(--line); color: var(--ink-2);
  font-size: 10.5px;
}

/* 演示数据提示条：接口不可用时出现，避免把兜底数据当成真实库存 */
.data-note {
  display: flex; align-items: center; justify-content: center;
  padding: 8px 12px; border-radius: var(--r-md);
  background: #FFF8E1; color: #8A6D1F;
  font-size: 12px; line-height: 1.4;
}