/*!
 * 打赏单页 - 感谢名单板块样式
 * 所有类名以 yf- 前缀，避免与页面既有的 wzw / bootstrap 样式冲突
 */

.yf-board,
.yf-board * { box-sizing: border-box; }

.yf-board {
  max-width: 1140px;
  margin: 22px auto 30px;
  padding: 0 15px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #2c3440;
  text-align: left;
}

.yf-board-card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 10px rgb(227 228 228);
}

/* ---------- 渐变标题（与页面「赞助方案」风格一致） ---------- */
.yf-board-head {
  text-align: center;
  background: linear-gradient(135deg, #16aaf7 0, #c696fc 80%);
  padding: 12px 16px;
  color: #fff;
}
.yf-board-head h2 {
  margin: 0;
  font-size: 1.6em;
  font-weight: 600;
  color: #fff;
  letter-spacing: 1px;
}
.yf-board-head p {
  margin: 2px 0 0;
  font-size: .82em;
  opacity: .92;
}

/* ---------- 统计条 ---------- */
.yf-board-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 34px;
  padding: 14px 16px;
  background: #fbfcfe;
  border-bottom: 1px dashed #e9eef5;
}
.yf-stat {
  text-align: center;
  min-width: 92px;
}
.yf-stat b {
  display: block;
  font-size: 1.32em;
  font-weight: 700;
  color: #fe6bb0;
  line-height: 1.25;
}
.yf-stat span {
  font-size: .76em;
  color: #97a1b0;
}

/* ---------- 切换标签 ---------- */
.yf-board-tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px 4px;
}
.yf-tab {
  border: 1px solid #e6eaf1;
  background: #fff;
  color: #5b6675;
  border-radius: 99px;
  padding: 5px 16px;
  font-size: .84em;
  cursor: pointer;
  font-family: inherit;
  transition: all .22s;
}
.yf-tab:hover { border-color: #16aaf7; color: #16aaf7; }
.yf-tab.is-active {
  background: linear-gradient(135deg, #16aaf7 0, #c696fc 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 3px 10px rgba(22, 170, 247, .28);
}

/* ---------- 名单 ---------- */
.yf-board-list {
  list-style: none;
  margin: 0;
  padding: 6px 16px 4px;
}
.yf-item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 11px 0;
  border-bottom: 1px dashed #eef2f7;
}
.yf-item:last-child { border-bottom: 0; }

.yf-avatar {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  user-select: none;
  box-shadow: 0 2px 6px rgba(24, 39, 75, .12);
}
.yf-avatar.g0 { background: linear-gradient(135deg, #16aaf7, #6ec6ff); }
.yf-avatar.g1 { background: linear-gradient(135deg, #fe85ca, #ffb0dd); }
.yf-avatar.g2 { background: linear-gradient(135deg, #85d6ac, #b9ebd0); }
.yf-avatar.g3 { background: linear-gradient(135deg, #ffcd59, #ffe0a0); }
.yf-avatar.g4 { background: linear-gradient(135deg, #ff8566, #ffb39c); }
.yf-avatar.g5 { background: linear-gradient(135deg, #c696fc, #ddc2ff); }

.yf-body { flex: 1; min-width: 0; }
.yf-line1 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.yf-name {
  font-weight: 600;
  font-size: .98em;
  color: #2c3440;
  word-break: break-all;
}
.yf-rank {
  flex: 0 0 auto;
  font-size: .72em;
  font-weight: 700;
  color: #fff;
  background: #c3ccd9;
  border-radius: 4px;
  padding: 1px 6px;
  line-height: 1.5;
}
.yf-rank.r1 { background: linear-gradient(135deg, #ffb300, #ffd54f); }
.yf-rank.r2 { background: linear-gradient(135deg, #9aa7b8, #c3ccd9); }
.yf-rank.r3 { background: linear-gradient(135deg, #cd7f32, #e0a86a); }

.yf-amount {
  margin-left: auto;
  flex: 0 0 auto;
  font-weight: 700;
  color: #fe6bb0;
  font-size: .98em;
  white-space: nowrap;
}
.yf-time {
  flex: 0 0 auto;
  font-size: .74em;
  color: #a8b2c0;
  white-space: nowrap;
}
.yf-msg {
  margin: 3px 0 0;
  font-size: .84em;
  color: #78839a;
  word-break: break-word;
  line-height: 1.55;
}
.yf-badge {
  display: inline-block;
  font-size: .68em;
  padding: 0 6px;
  border-radius: 4px;
  line-height: 1.6;
  vertical-align: 1px;
}
.yf-badge.wx,
.yf-badge.wxpay { background: #e6f7ee; color: #12a15c; }
.yf-badge.zfb,
.yf-badge.alipay { background: #e8f0fe; color: #2f6fed; }
.yf-badge.qqpay { background: #e6f5fd; color: #12b7f5; }
.yf-badge.bank { background: #fdeaea; color: #d7263d; }
.yf-badge.jdpay { background: #fdeceb; color: #e4393c; }

/* ---------- 空状态 / 加载 / 更多 ---------- */
.yf-empty,
.yf-loading {
  text-align: center;
  color: #a8b2c0;
  padding: 34px 16px;
  font-size: .88em;
}
.yf-more-wrap { padding: 4px 16px 18px; text-align: center; }
.yf-more {
  border: 1px solid #e6eaf1;
  background: #fff;
  color: #5b6675;
  border-radius: 99px;
  padding: 7px 26px;
  font-size: .85em;
  cursor: pointer;
  font-family: inherit;
  transition: all .22s;
}
.yf-more:hover { border-color: #16aaf7; color: #16aaf7; }
.yf-more:disabled { opacity: .6; cursor: default; }

.yf-board-note {
  padding: 0 16px 16px;
  margin: 0;
  font-size: .76em;
  color: #a8b2c0;
  text-align: center;
}

/* ---------- 移动端 ---------- */
@media (max-width: 640px) {
  .yf-board { margin: 16px auto 22px; padding: 0 10px; font-size: 14px; }
  .yf-board-head h2 { font-size: 1.35em; }
  .yf-board-stats { gap: 8px 20px; padding: 12px; }
  .yf-stat { min-width: 74px; }
  .yf-board-list { padding: 4px 12px; }
  .yf-avatar { flex-basis: 34px; width: 34px; height: 34px; font-size: 14px; }
  .yf-amount { font-size: .92em; }
  .yf-time { width: 100%; margin-left: 44px; }
}