/* ==========================================================================
   前台（顾客端）· 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; }

/* ================= 品牌头部 ================= */
.brandbar {
  flex: none;
  min-height: 64px;
  padding: 8px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-logo {
  width: 56px; height: 56px; flex: none;
  border-radius: 12px; overflow: hidden;
}
.brand-logo img { width: 100%; height: 100%; object-fit: contain; }
.brand-text { display: flex; flex-direction: column; }
/* 品牌名首行（后台配置多行时其余行落到 .brand-name-alt 小号字距行） */
.brand-name { font-size: 17px; font-weight: 800; letter-spacing: .5px; line-height: 1.2; }
.brand-name-alt {
  font-size: 9.5px; font-weight: 600; letter-spacing: 2.6px;
  text-transform: uppercase; color: var(--ink-2);
  line-height: 1.3; margin-top: 1px; white-space: pre-line;
}
.brand-sub  { font-size: 11px; color: var(--ink-4); margin-top: 3px; }

.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: 28px; height: 28px; border-radius: 9px; object-fit: cover; }
/* 详情页居中品牌名多行时，英文行用小号字距样式 */
.navbar .nav-center .brand-name-alt { font-size: 7.5px; letter-spacing: 1.8px; margin-top: 0; }

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

/* ================= 主张横幅（可轮播，后台多屏时自动播放） ================= */
.banner {
  position: relative;
  background: var(--field);
  border-radius: var(--r-xl);
  padding: 0;
  overflow: hidden;
  height: 140px;   /* 整图渲染：固定高度，图 cover 充满 */
}
.banner-track {
  display: flex;
  transition: transform .45s cubic-bezier(.22, .68, .36, 1);
  will-change: transform;
}
.banner-track.is-dragging { transition: none; }
.banner-slide {
  flex: none;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: block;
}
.banner-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;   /* 整张铺满横幅区域 */
}

/* 圆点指示器（多屏时出现） */
.banner-dots {
  position: absolute; left: 0; right: 0; bottom: 8px;
  display: none; justify-content: center; gap: 6px;
  pointer-events: none;
}
.banner-dots.is-on { display: flex; }
.banner-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(20, 22, 26, .25);
  transition: width .2s, background .2s;
}
.banner-dot.is-active { width: 14px; border-radius: 3px; background: var(--ink); }

/* ================= 搜索框 ================= */
.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); }

/* 积分榜入口（首页区块标题右侧） */
.rank-entry {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 9px;
  border-radius: 11px;
  background: var(--lime-soft); color: var(--deep);
  font-size: 11.5px; font-weight: 600;
}

.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, .rank-foot {
  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, .rank-foot .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（固定 368px 视口）> .hero-track（横向排列所有图）> .hero-slide > img
   切换靠给 .hero-track 设 translateX。拖拽时禁用 transition 走跟手位移，
   松手后恢复 transition 吸附到目标页。 */
.hero {
  position: relative; height: 368px; background: var(--field);
  overflow: hidden;
  touch-action: pan-y;          /* 纵向仍可滚页面，横向交给手势 */
  -webkit-user-select: none; user-select: none;
}
.hero-track {
  display: flex; height: 100%;
  will-change: transform;
  transition: transform .3s cubic-bezier(.22, .68, .36, 1);
}
/* 拖拽中：关掉过渡，图片严格跟手 */
.hero-track.is-dragging { transition: none; }
.hero-slide { flex: none; width: 100%; height: 100%; }
.hero-slide img {
  width: 100%; height: 100%; object-fit: cover;
  -webkit-user-drag: none; user-drag: none;
  pointer-events: none;         /* 让手势落在容器上，不被 img 抢占 */
}
.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;
  transition: opacity .2s;
  pointer-events: none;
}
/* 拖拽中序号略淡，翻页完成后回来 */
.hero.is-dragging .hero-idx { opacity: .45; }

/* 底部圆点指示器（多图时才出现） */
.hero-dots {
  position: absolute; left: 0; right: 0; bottom: 14px;
  display: none; justify-content: center; gap: 6px;
  pointer-events: none;
}
.hero-dots.is-on { display: flex; }
.hero-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  transition: width .22s, background .22s;
}
.hero-dot.is-active { width: 14px; border-radius: 3px; background: #fff; }

/* 键盘可达性：聚焦时给个描边，方向键也能翻页 */
.hero:focus-visible { outline: 2px solid var(--lime); outline-offset: -2px; }

@media (prefers-reduced-motion: reduce) {
  .hero-track { transition: none; }
  .hero-dot { transition: none; }
}

.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;
}

/* ================= hidden 属性兜底（2026-10-11） =================
   .kv{display:flex} 这类作者样式会覆盖 hidden 属性自带的 UA display:none，
   导致「生日」这类用 hidden 控制的行照样显示。统一兜底：
   只要标了 hidden，无论类名怎么设 display 都强制隐藏。 */
[hidden] { display: none !important; }

/* ================= 主题（后台可切换：粉紫 / 蓝紫 / 柠檬绿 + 可选背景图） =================
   默认（无 theme-* 类）保持原纯白底，向后兼容旧缓存页面；
   加了 theme-* 后改用渐变背景 + 玻璃卡片。小程序端在 app.wxss 同步实现。 */
.phone.theme-pink  { --app-bg: var(--theme-pink); }
.phone.theme-blue  { --app-bg: var(--theme-blue); }
.phone.theme-lime  { --app-bg: var(--theme-lime); }

.phone.theme-pink,
.phone.theme-blue,
.phone.theme-lime {
  background: var(--app-bg);
}

/* 玻璃卡片：大块容器统一半透明 + 毛玻璃 + 浅描边，浮在渐变之上 */
.phone.theme-pink .card,
.phone.theme-blue .card,
.phone.theme-lime .card,
.phone.theme-pink .panel,
.phone.theme-blue .panel,
.phone.theme-lime .panel,
.phone.theme-pink .card-box,
.phone.theme-blue .card-box,
.phone.theme-lime .card-box,
.phone.theme-pink .banner,
.phone.theme-blue .banner,
.phone.theme-lime .banner,
.phone.theme-pink .notice,
.phone.theme-blue .notice,
.phone.theme-lime .notice,
.phone.theme-pink .search,
.phone.theme-blue .search,
.phone.theme-lime .search {
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 6px 22px rgba(20, 22, 26, 0.06);
}

/* 物料卡：整张套玻璃底，内缩一点让封面像嵌在卡片里 */
.phone.theme-pink .card,
.phone.theme-blue .card,
.phone.theme-lime .card {
  border-radius: var(--r-card);
  padding: 8px;
  gap: 6px;
}
.phone.theme-pink .card .cover,
.phone.theme-blue .card .cover,
.phone.theme-lime .card .cover {
  background: rgba(255, 255, 255, 0.35);
}

/* 底部操作条也玻璃化，避免纯白横条割裂渐变 */
.phone.theme-pink .actionbar,
.phone.theme-blue .actionbar,
.phone.theme-lime .actionbar {
  background: rgba(255, 255, 255, 0.66);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255, 255, 255, 0.5);
}

/* 胶囊 / 标签：浅半透明，弱化与渐变的边界 */
.phone.theme-pink .cat,
.phone.theme-blue .cat,
.phone.theme-lime .cat,
.phone.theme-pink .select,
.phone.theme-blue .select,
.phone.theme-lime .select,
.phone.theme-pink .chip,
.phone.theme-blue .chip,
.phone.theme-lime .chip,
.phone.theme-pink .loadmore,
.phone.theme-blue .loadmore,
.phone.theme-lime .loadmore,
.phone.theme-pink .sort.is-active,
.phone.theme-blue .sort.is-active,
.phone.theme-lime .sort.is-active {
  background: rgba(255, 255, 255, 0.5);
}
.phone.theme-pink .loadmore.is-end,
.phone.theme-blue .loadmore.is-end,
.phone.theme-lime .loadmore.is-end {
  background: transparent;
}

/* ================= F9 积分排行榜 ================= */
.rank-tabs { display: flex; gap: 8px; }
.rank-tab {
  flex: 1; height: 34px; border-radius: 17px;
  background: var(--field); color: var(--ink-2);
  font-size: 13px; font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center;
}
.rank-tab.is-active { background: var(--lime); color: var(--ink); font-weight: 600; }

.rank-podium { display: flex; align-items: flex-end; gap: 10px; }
.rank-pod {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 16px 8px 12px; border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.62); border: 1px solid var(--line);
}
.rank-pod.is-top { padding-top: 26px; }
.rank-avatar {
  width: 52px; height: 52px; border-radius: 50%; overflow: hidden; flex: none;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 20px;
}
.rank-avatar img { width: 100%; height: 100%; object-fit: cover; }
.rank-medal { font-size: 20px; line-height: 1; }
.rank-pod .rk-name {
  font-size: 12.5px; font-weight: 600; color: var(--ink); max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rank-pod .rk-pts { font-size: 13px; color: var(--deep); font-weight: 700; }
.rank-pod .rk-pts span { font-size: 10px; color: var(--ink-4); font-weight: 400; }

.rank-list { display: flex; flex-direction: column; gap: 8px; }
.rank-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--r-nav);
  background: rgba(255, 255, 255, 0.62); border: 1px solid var(--line);
}
.rank-no { width: 22px; text-align: center; font-size: 13px; font-weight: 700; color: var(--ink-3); flex: none; }
.rank-row .rank-avatar { width: 36px; height: 36px; font-size: 15px; }
.rank-row .rk-body { flex: 1; min-width: 0; }
.rank-row .rk-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-row .rk-motto { font-size: 11px; color: var(--ink-4); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-row .rk-pts { font-size: 13px; color: var(--deep); font-weight: 700; flex: none; }
.rank-row .rk-pts span { font-size: 10px; color: var(--ink-4); font-weight: 400; }
.rank-empty { text-align: center; color: var(--ink-5); font-size: 12px; padding: 32px 0; }