* { margin: 0; padding: 0; box-sizing: border-box; }
:root { --page-w: 520px; }
body {
  /* 末尾的 emoji 字体栈：显式指定各平台彩色 emoji 字体，
     避免系统回退到不带 emoji 的字体导致显示成黑白轮廓或豆腐块 □ */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
               'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', sans-serif;
  background: #f0f0f0;
  color: #333;
}

/* ===== Header Stats Bar ===== */
.stats-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 18px 10px 14px;
  background: linear-gradient(135deg, #f5a623 0%, #f8b84e 50%, #fcd27a 100%);
}
.stat-item { text-align: center; }
.stat-num {
  font-size: 26px;
  font-weight: 800;
  color: #c41e00;
  line-height: 1.2;
}
.stat-label {
  font-size: 12px;
  color: #555;
  margin-top: 2px;
}
/* 数字后面的单位（如「款」）：比主数字小一号，不抢视觉 */
.stat-unit {
  font-size: .6em;
  font-weight: 800;
  margin-left: 1px;
}


/* ===== Page Container ===== */
.container {
  max-width: var(--page-w, 520px);
  margin: 0 auto;
  min-height: 100vh;
  background: #fff;
}

/* ===== Title Section ===== */
.title-section {
  text-align: center;
  padding: 12px 16px 10px;
}
.title-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* 标题改成两行后整体变高，图标同步放大到与两行文字等高的视觉体量 */
.trophy-icon {
  width: 44px; height: 44px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #ffb020, #ffd86e 55%, #ff9a3d);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  line-height: 1;
  /* 描边：外面一圈白色 + 再一圈金橙描边（贴纸感），最后才是投影和高光 */
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 3.5px rgba(224,150,0,.45),
    0 3px 9px rgba(224,150,0,.5),
    inset 0 1px 0 rgba(255,255,255,.65);
}
/* 图标右移只针对手机/窄屏（对齐顶部第一格）；
   电脑版 ≥900px 时标题居中布局不同，固定右移会让图标压住文字，故不偏移 */
@media (max-width: 899px) {
  /* 标题恢复单行后，图标不再需要向右偏移（偏移会与文字重叠） */
  .trophy-icon { transform: none; }
}
/* 给钱袋图案本身加白色描边：
   彩色 emoji 不吃 -webkit-text-stroke，所以用四向 drop-shadow 描一圈
   （drop-shadow 按图形 alpha 生成轮廓，对 emoji 有效） */
.trophy-icon .trophy-emoji {
  display: inline-block;
  line-height: 1;
  filter:
    drop-shadow(1.5px 0 0 #fff) drop-shadow(-1.5px 0 0 #fff)
    drop-shadow(0 1.5px 0 #fff) drop-shadow(0 -1.5px 0 #fff)
    drop-shadow(0 1px 2px rgba(120,50,0,.35));
}
.main-title {
  font-size: 23px;
  font-weight: 900;
  color: #c0392b;          /* 兜底色：正红（与下载按钮同色系），对比充足 */
  letter-spacing: 1px;
  filter: drop-shadow(0 1px 1px rgba(160,40,25,.22));
}
/* 箭头：加粗加大 + 正红实色，突出「中文 → 英文」的指向关系 */
.title-domain .domain-arrow {
  font-size: 1.5em;
  font-weight: 900;
  margin: 0 3px;
  vertical-align: middle;
  color: #e74c3c;
  -webkit-text-fill-color: #e74c3c;   /* 覆盖父级继承的 transparent */
  animation: none;
}
/* 「徐雯雯」三个字比同行的箭头、胶囊稍大一号，突出中文记忆点 */
.title-domain .domain-cn {
  font-size: 1.18em;
  font-weight: 400;          /* 去掉加粗，恢复正常字重 */
  letter-spacing: 1px;
}
/* 第 2 行里的英文域名：套用标签里「8米」那颗红橙胶囊的样式
   父级带 -webkit-text-fill-color:transparent（会继承），必须显式覆盖成白色否则看不见；
   background-clip 同理要改回 border-box，否则渐变会被裁进文字里只剩白底 */
.title-domain .domain-en {
  /* 改用 inline-flex 垂直居中 + line-height:1，配合上小下大的 padding
     把看不见的基线留白吃掉，白字在胶囊里才是真正的视觉居中 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 9px 7px;      /* 上下合计仍为 9px（胶囊高度不变），整体下移 1px */
  margin-left: 3px;
  border-radius: 8px;
  background: linear-gradient(135deg, #ff6a3d, #e74c3c);
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: #fff;
  -webkit-text-fill-color: #fff;
  font-weight: 900;
  letter-spacing: .3px;
  line-height: 1;
  vertical-align: middle;
  box-shadow: 0 2px 6px rgba(231,76,60,.4);
  /* 抖动 + 呼吸投影：静止一段时间后抖两下再恢复，循环吸睛但不晃眼 */
  animation: capsule-shake 2s ease-in-out infinite;
  position: relative;
  overflow: hidden;          /* 裁掉流光溢出部分 */
}
@keyframes capsule-shake {
  0%, 74%, 100% { transform: translate(0, 0) rotate(0deg);    box-shadow: 0 2px 6px rgba(231,76,60,.4); }
  77%           { transform: translate(-2.5px, 0) rotate(-2deg); }
  81%           { transform: translate(2.5px, 0) rotate(2deg); }
  85%           { transform: translate(-2.5px, 0) rotate(-2deg); }
  89%           { transform: translate(2px, 0) rotate(1.5deg);  box-shadow: 0 3px 10px rgba(231,76,60,.6); }
  93%           { transform: translate(-1px, 0) rotate(-.8deg); }
}
/* 胶囊流光：一道斜向白色亮带从左向右扫过（和标题走马灯同一套语言） */
.title-domain .domain-en::after {
  content: "";
  position: absolute;
  top: -50%; left: 0;
  width: 45%; height: 200%;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.65) 50%,
    rgba(255,255,255,0) 100%);
  transform: translateX(-200%) skewX(-20deg);
  animation: capsule-shine 1.866s ease-in-out infinite;   /* 2.8s 提速 50% */
  pointer-events: none;
}
@keyframes capsule-shine {
  0%        { transform: translateX(-200%) skewX(-20deg); }
  55%, 100% { transform: translateX(420%)  skewX(-20deg); }
}
/* 系统开启「减弱动效」时自动停止 */
@media (prefers-reduced-motion: reduce) {
  .title-domain .domain-en::after { animation: none; opacity: 0; }
  .title-domain .domain-en        { animation: none; }
}
/* 标题第 2 行：网址（单独换行、略小一号，保证与第 1 行有主次）
   用 inline-flex + align-items:center，让「徐雯雯 / 箭头 / 胶囊」
   三个元素强制对齐到同一条垂直中线，不再受各自字体基线差异影响 */
.title-domain {
  display: inline-flex;
  align-items: center;
  margin-top: 4px;
  font-size: .72em;
  letter-spacing: .5px;
  white-space: nowrap;
}
/* 说明：此处原为「橙→红渐变流动文字」（background-clip:text + @keyframes title-flow）。
   该组合在部分浏览器/窄屏光栅化时会把渐变向上渗出 1~3px，表现为标题上方多出一小条
   红色残影、且第 2 行文字出现重影；改用给 h1 强推合成层（transform:translateZ(0)）
   虽能消除渗出，但在真实 GPU 浏览器里会让第 2 行文字错位、与第 1 行重叠。
   为彻底避免这类渲染问题，标题文字统一改为纯色（与原渐变主色一致、同下载按钮色系）；
   第 2 行英文胶囊（.domain-en）的渐变背景与扫光动画是普通背景，不受影响。 */
.main-title,
.title-domain,
.title-domain .domain-cn {
  color: #c0392b;
  -webkit-text-fill-color: #c0392b;
}
/* 系统开启「减弱动效」时自动停止流动，尊重用户偏好 */
@media (prefers-reduced-motion: reduce) {
  .main-title,
  .title-domain { animation: none; }
}
/* ===== Ranking Cards ===== */
.ranking-list { padding: 14px 14px 30px; }

.card {
  display: block;
  padding: 16px 14px;
  margin-bottom: 14px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,.22), 0 2px 6px rgba(0,0,0,.14);
  position: relative;
  transition: transform .15s, box-shadow .15s;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0,0,0,.34), 0 3px 8px rgba(0,0,0,.18);
}
/* Rank Mark (#N) at top-left，33% 透明度 */
.rank-mark {
  position: absolute;
  left: 14px;
  top: 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  color: #bfbfbf;
  opacity: .33;
  pointer-events: none;
  user-select: none;
}
/* Card Body */
.card-body { flex: 1; min-width: 0; position: relative; }

.card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }

/* 首页卡片：图标与平台名点击进入详情页 */
.app-icon-link { display: block; flex-shrink: 0; }
.card-title a { color: inherit; text-decoration: none; }
.card-title a:hover { color: var(--orange); }

.app-icon {
  width: 57.5px; height: 57.5px;
  border-radius: 13.75px;
  display: flex; align-items: center; justify-content: center;
  font-size: 27.5px;
  font-weight: 900;
  color: #fff;
  flex-shrink: 0;
}
img.app-icon { object-fit: cover; display: block; }
.icon-1 { background: linear-gradient(135deg, #e91e63, #ff6090); }
.icon-2 { background: linear-gradient(135deg, #ff5722, #ff8a65); }
.icon-3 { background: linear-gradient(135deg, #ffc107, #ffe066); color: #333; }
.icon-4 { background: linear-gradient(135deg, #00b3b3, #46dccb); }
.icon-5 { background: linear-gradient(135deg, #4caf50, #8bc34a); }
.icon-6 { background: linear-gradient(135deg, #5c6bc0, #8e99f3); }

.card-title-row { flex: 1; min-width: 0; }
.card-title {
  font-size: 19px;
  font-weight: 700;
  color: #222;
}
.card-meta {
  font-size: 13px;
  color: #999;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-meta span { margin-right: 8px; }
.company-icon {
  width: 14px; height: 14px;
  display: inline-block;
  vertical-align: -2px;
  background-image: url("data:image/png;base64,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");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.card-desc {
  font-size: 14px;
  color: #666;
  line-height: 1.45;
  margin: 6px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* 恒占两行高度：文字不足两行时也保留空位，保证所有卡片等高 */
  min-height: 2.9em;
}

/* 标签固定两排、每排最多两个、每行左对齐
   不足或没有标签的位置自动留空，配合固定行高保证所有卡片大小一致 */
.tags {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* 无标签时也恒占两排高度（2 × 20 + 6） */
  min-height: 46px;
}
.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  /* 每行标签整体左对齐，多余的空位留在右侧 */
  justify-content: flex-start;
  /* 该排没有标签时仍保留一行高度 */
  min-height: 20px;
}
/* 独占一行的标签（如邀请码标签）可用满整行宽度：
   文本只要不超过一行就完整显示，超出一行才省略号截断 */
.tag-row > .tag:only-child { max-width: 100%; }

.tag {
  min-width: 0;
  /* 同一排有两个标签时，单个最宽半行，保证每排最多放两个 */
  max-width: calc(50% - 3px);
  height: 20px;
  line-height: 20px;
  padding: 0 8px;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 10px;
  background: #fef4e6;
  color: #e67e22;
  font-weight: 500;
}
/* 含金额的标签「x米」：整枚标签加强，金额本身做成红胶囊（.money 由下方 JS 自动包裹） */
.tag.has-money {
  background: linear-gradient(135deg, #fff1d6, #ffdca8);
  color: #8a3b00;
  font-weight: 700;
  /* 用内阴影画描边，不用 border——border 会在 border-box 下
     把内容区压小 2px，导致文字和胶囊整体下坠 */
  box-shadow: inset 0 0 0 1px #ffcf94;
}
.tag .money {
  display: inline-block;
  padding: 0 5px;
  margin-left: 2px;
  line-height: 16px;   /* 18px - 上下各 1px */
  vertical-align: baseline;
  border-radius: 6px;
  background: linear-gradient(135deg, #ff6a3d, #e74c3c);
  color: #fff;
  font-weight: 900;
  letter-spacing: .3px;
  box-shadow: 0 1px 3px rgba(231,76,60,.35);
}

/* Download Button */
.download-btn {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 4px;
  padding: 8px 14px;
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  color: #fff;
  border: none;
  border-radius: 20px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 0;
  text-decoration: none;
  transition: opacity .15s;
  white-space: nowrap;
}
.download-btn:hover { opacity: .88; }
/* 按钮里的 SVG 图标（替代 emoji，保证任何设备一致渲染） */
.download-btn .btn-icon { flex-shrink: 0; display: block; }

/* ===== Floating Service Button (bottom-left) ===== */
.service-float {
  position: fixed;
  left: 14px;
  left: max(14px, calc(50% - var(--page-w, 520px) / 2 + 14px));
  bottom: 18px;
  z-index: 999;
}
.service-float > summary {
  list-style: none;
  cursor: pointer;
  width: 78px; height: 78px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff6a3d, #e74c3c);
  color: #fff;
  box-shadow: 0 4px 14px rgba(231,76,60,.45);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px;
  font-size: 16.5px;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.service-float > summary::-webkit-details-marker { display: none; }
.service-float > summary .service-ico { font-size: 30px; line-height: 1; display: flex; }
.service-float > summary .service-ico svg { display: block; }
.service-float[open] > summary { opacity: .92; }

/* ===== 客服按钮：内部图标抖动 ===== */
/* 内部小图标抖动：左右微移 + 轻微旋转，周期 1.2s */
@keyframes service-shake {
  0%, 100% { transform: translateX(0)     rotate(0deg); }
  20%      { transform: translateX(-1.5px) rotate(-7deg); }
  40%      { transform: translateX(1.5px)  rotate(7deg); }
  60%      { transform: translateX(-1px)   rotate(-4deg); }
  80%      { transform: translateX(1px)    rotate(4deg); }
}
.service-float > summary .service-ico {
  animation: service-shake 1.2s ease-in-out infinite;
}

/* 展开面板后停止抖动，避免干扰阅读 */
.service-float[open] > summary .service-ico { animation: none; }

/* 系统开启「减弱动效」时自动停止，尊重用户偏好 */
@media (prefers-reduced-motion: reduce) {
  .service-float > summary .service-ico { animation: none; }
}

.service-panel {
  position: absolute;
  left: 0; bottom: 90px;
  width: 206px;
  background: #fff;
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 6px 20px rgba(0,0,0,.22), 0 2px 6px rgba(0,0,0,.14);
  font-size: 13px;
  color: #444;
  line-height: 1.8;
}
.service-panel::after {
  content: "";
  position: absolute;
  left: 33px; bottom: -6px;
  width: 12px; height: 12px;
  background: #fff;
  transform: rotate(45deg);
  box-shadow: 3px 3px 6px rgba(0,0,0,.07);
}
.service-title {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
  color: #c41e00;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px dashed #eee;
}
.service-line {
  display: block;
  text-align: left;
  white-space: nowrap;
  font-size: 13px;
  line-height: 1.8;
}
.service-line b {
  font-size: 13px;
  font-weight: 600;
  color: #222;
  font-variant-numeric: tabular-nums;
}
.service-id {
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  text-decoration: underline dotted #c9c9c9;
  text-underline-offset: 3px;
}
.service-id:active { opacity: .7; }

.copy-pop {
  position: absolute;
  display: none;
  transform: translateX(-50%);
  z-index: 5;
}
.copy-pop.show { display: block; }
.copy-btn {
  border: none;
  border-radius: 8px;
  padding: 5px 14px;
  font-family: inherit;
  font-size: 13px;
  color: #fff;
  background: linear-gradient(135deg, #ff6a3d, #e74c3c);
  box-shadow: 0 2px 8px rgba(231,76,60,.40);
  cursor: pointer;
  white-space: nowrap;
}
.copy-btn:active { opacity: .85; }

/* ===== Bottom Tip ===== */
.page-tip {
  padding: 2px 16px 36px;
  text-align: center;
  font-size: 13px;
  color: #9a9a9a;
  letter-spacing: .5px;
  line-height: 1.6;
}

/* ===== PC 适配 ===== */
@media (min-width: 900px) {
  :root { --page-w: 900px; }
  .container { box-shadow: 0 0 30px rgba(0,0,0,.08); }
  .stats-bar { padding: 22px 16px 18px; }
  .stat-num { font-size: 30px; }
  .main-title { font-size: 26px; }
  .ranking-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: stretch;
  }
  .card { margin-bottom: 0; }
}
@media (min-width: 1280px) {
  :root { --page-w: 1200px; }
  .ranking-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ===== Page Nav ===== */
/* 标题 + 按钮整体吸顶：上划后两者都保持可见 */
.page-head {
  position: sticky; top: 0; z-index: 50;
  background: #fff;
  /* 吸顶时与下方内容拉开层次 */
  box-shadow: 0 6px 14px -12px rgba(0,0,0,.28);
}
.pagenav {
  display: flex; gap: 10px; justify-content: center;
  padding: 0 14px 14px;
}
.pagenav-btn {
  position: relative;
  flex: 1; max-width: 170px;
  border: 1.5px solid #ff9c8a;
  cursor: pointer; font-family: inherit;
  font-size: 16px; font-weight: 800; letter-spacing: .5px;
  color: #c0392b;
  background: #fff; border-radius: 12px; padding: 12px 0;
  transition: transform .15s, background .15s, color .15s,
              box-shadow .15s, border-color .15s;
}
.pagenav-btn:hover  { transform: translateY(-1px); }
.pagenav-btn:active { transform: translateY(0); }

/* 未选中：三个按钮都带轻微呼吸光晕（返现教程下方另有更强的橙色版本） */
.pagenav-btn:not(.active) {
  animation: btn-pulse 2.6s ease-in-out infinite;
}
/* 最新发布错开半拍，避免三个按钮同步闪动显得机械 */
.pagenav-btn[data-page="new"]:not(.active) { animation-delay: .7s; }
@keyframes btn-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(231,76,60,.28); }
  70%      { box-shadow: 0 0 0 7px rgba(231,76,60,0); }
}

.pagenav-btn.active {
  background: linear-gradient(135deg, #ff6a3d, #e74c3c);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 16px rgba(231,76,60,.42);
}

/* ===== 返现教程：重点突出（暖色底 + 呼吸光晕 + 未读角标） ===== */
.pagenav-btn[data-page="case"] {
  border-color: #ff9142;
  color: #b34700;
  background: linear-gradient(135deg, #ffeeda, #ffd9b8);
}
.pagenav-btn[data-page="case"]:not(.active) {
  animation: case-pulse 1.9s ease-in-out infinite;
}
/* 右上角红点：点开后消失，避免干扰 */
.pagenav-btn[data-page="case"]:not(.active)::after {
  content: "";
  position: absolute; top: -5px; right: -5px;
  width: 11px; height: 11px; border-radius: 50%;
  background: #ff3b30;
  box-shadow: 0 0 0 2px #fff;
}
.pagenav-btn[data-page="case"].active {
  background: linear-gradient(135deg, #ff6a3d, #e74c3c);
  color: #fff;
  box-shadow: 0 8px 20px rgba(231,76,60,.5);
  animation: case-pulse-red 1.9s ease-in-out infinite;
}
@keyframes case-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,150,70,.55); }
  70%      { box-shadow: 0 0 0 9px rgba(255,150,70,0); }
}
@keyframes case-pulse-red {
  0%, 100% { box-shadow: 0 8px 20px rgba(231,76,60,.5), 0 0 0 0   rgba(231,76,60,.55); }
  70%      { box-shadow: 0 8px 20px rgba(231,76,60,.5), 0 0 0 9px rgba(231,76,60,0); }
}
.page { display: none; }
.page.active { display: block; }

.page-note {
  text-align: center; color: #8a93a6; font-size: 13px;
  padding: 4px 16px 14px;
}

/* ===== 底部备案区 ===== */
.site-footer {
  padding: 6px 16px 34px;
  text-align: center;
}
/* 绿点呼吸闪烁（参与人数徽章的绿点用） */
@keyframes dot-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(46,204,113,.65); }
  70%  { box-shadow: 0 0 0 7px rgba(46,204,113,0); }
  100% { box-shadow: 0 0 0 0 rgba(46,204,113,0); }
}
.footer-tip {
  margin-top: 10px;
  font-size: 12px; color: #b3b9c4; letter-spacing: .5px;
}
.beian-icon { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; }

/* ===== 返现教程：四步流程示意图（纯 CSS 绘制，不依赖图片） ===== */
.flow-wrap { padding: 2px 14px 10px; }

/* 顶部标题条 */
.flow-head {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 14px; margin-bottom: 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, #fff3e2, #ffdcbb);
  box-shadow: inset 0 0 0 1px #ffcd9b, 0 6px 16px rgba(214,110,20,.12);
}
.flow-head-ico {
  width: 38px; height: 38px; flex: 0 0 38px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; line-height: 1; border-radius: 50%;
  background: linear-gradient(135deg, #ffb020, #ffd86e 55%, #ff9a3d);
  box-shadow: 0 2px 6px rgba(224,150,0,.5), inset 0 1px 0 rgba(255,255,255,.65);
}
.flow-title { font-size: 16px; font-weight: 900; color: #b34700; letter-spacing: .5px; }
.flow-sub { font-size: 12px; color: #9a6a3c; margin-top: 3px; }

/* 步骤列表：左侧序号圆 + 虚线时间轴 */
.flow-list { list-style: none; }
.flow-step { position: relative; padding-left: 48px; }
.flow-step + .flow-step { margin-top: 16px; }
/* 连接虚线：从序号圆底部连到下一步的圆 */
.flow-step:not(:last-child)::after {
  content: "";
  position: absolute; left: 16px; top: 40px; bottom: -16px; width: 2px;
  background: repeating-linear-gradient(to bottom, #ffb27a 0 5px, rgba(255,178,122,0) 5px 10px);
}
.flow-badge {
  position: absolute; left: 0; top: 0;
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 900; color: #fff;
  background: linear-gradient(135deg, #ff8a3d, #e74c3c);
  box-shadow: 0 4px 10px rgba(231,76,60,.35), inset 0 1px 0 rgba(255,255,255,.4);
}

/* 每一步的说明卡片 */
.flow-body {
  padding: 11px 13px 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, #fffaf4, #fff);
  box-shadow: inset 0 0 0 1px #ffe1c4, 0 4px 14px rgba(214,110,20,.10);
}
.flow-step-title { font-size: 15px; font-weight: 800; color: #b34700; line-height: 1.45; }
.flow-desc { font-size: 13px; color: #5b6472; line-height: 1.65; margin-top: 6px; }
.flow-desc b { color: #e74c3c; }

/* 第 4 步（联系客服返现）：绿色强调，引导去点左下角客服 */
.flow-step--last .flow-badge {
  background: linear-gradient(135deg, #4cd07d, #22a45d);
  box-shadow: 0 4px 10px rgba(34,164,93,.35), inset 0 1px 0 rgba(255,255,255,.4);
}
.flow-step--last .flow-body {
  background: linear-gradient(135deg, #f1fdf6, #fff);
  box-shadow: inset 0 0 0 1px #bfe9d1, 0 4px 14px rgba(34,164,93,.12);
}
.flow-step--last .flow-step-title { color: #17804a; }

/* ===== 参与人数徽章 ===== */
.join-count {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 86px;
  height: 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 0 6px;
  background: linear-gradient(135deg, #fff4e8, #ffe2c6);
  box-shadow: inset 0 0 0 1px #ffd3ac;
  border-radius: 16px;
  font-size: 11px;
  color: #8a4b12;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
}
.join-count::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #2ecc71;
  flex-shrink: 0;
  margin-right: 4px;
  animation: dot-pulse 1.8s ease-out infinite;
}
.join-count::after  { content: '人下载'; flex-shrink: 0; }
.join-num {
  width: 4ch;
  flex-shrink: 0;
  text-align: center;
  font-weight: 900;
  color: #d42a10;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

/* ===== 卡片可点击提示：图片与名称可点进详情 ===== */
.app-icon,
.card-title { cursor: pointer; }
.app-icon:active,
.card-title:active { transform: scale(.97); }
/* ===== 手机端：主标题一行显示（站名加长后字号随屏宽自适应） ===== */
@media (max-width: 899px) {
  .main-title {
    font-size: clamp(13px, 4.7vw, 21px);
    white-space: nowrap;
  }
  .main-title .title-domain {
    display: flex;
    justify-content: center;
    margin-top: 6px;
  }
}