/* 旅人九阶 - 成长中心 */

.growth-hero {
  position: relative;
  padding: 20px 18px 24px;
  /* 山雨后的青绿，配合「诗和远方」的调性，避免游戏化的金紫配色 */
  background: linear-gradient(160deg, #1f4f45 0%, #2d6b58 55%, #3f8b6e 100%);
  color: #fff;
  border-radius: 0 0 22px 22px;
}

.hero-back {
  position: absolute;
  top: 16px; left: 14px;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 20px;
  text-decoration: none;
  background: rgba(255, 255, 255, .16);
  border-radius: 50%;
}

.hero-inner { text-align: center; padding-top: 6px; }

.hero-level-badge {
  display: inline-block;
  padding: 3px 12px;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .5px;
  background: rgba(255, 255, 255, .2);
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
}

.hero-level-name {
  margin: 0 0 6px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 2px;
}

.hero-motto {
  margin: 0 0 18px;
  font-size: 13px;
  opacity: .88;
  line-height: 1.6;
}

.hero-progress { margin-bottom: 16px; }

.progress-track {
  height: 6px;
  background: rgba(255, 255, 255, .22);
  border-radius: 999px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #ffe9a8, #ffd166);
  border-radius: 999px;
  transition: width .6s ease;
}

.progress-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 7px;
  font-size: 12px;
  opacity: .85;
}

.hero-stats {
  display: flex;
  justify-content: space-around;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .18);
}

.hs-item { display: flex; flex-direction: column; gap: 3px; }
.hs-item b { font-size: 19px; font-weight: 700; }
.hs-item span { font-size: 11px; opacity: .8; }

/* ---------- 通用卡片 ---------- */

.card {
  margin: 14px 12px;
  padding: 16px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 1px 8px rgba(0, 0, 0, .05);
}

.card-title {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
  color: #1f2d28;
}

.card-sub {
  margin: 0 0 14px;
  font-size: 12px;
  color: #8a9691;
  line-height: 1.5;
}

.muted { color: #9aa5a0; font-size: 13px; margin: 0; }

.btn-primary {
  display: inline-block;
  padding: 11px 20px;
  background: #2d6b58;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  border: none;
  border-radius: 10px;
}

.btn-primary.disabled {
  background: #c3ccc8;
  pointer-events: none;
}

.btn-ghost {
  display: inline-block;
  padding: 10px 20px;
  color: #2d6b58;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  background: #f1f7f4;
  border-radius: 10px;
}

.btn-block { display: block; width: 100%; box-sizing: border-box; }

.lock-hint {
  margin: 10px 0 0;
  font-size: 12px;
  color: #b07d3a;
  line-height: 1.6;
  background: #fdf6e8;
  padding: 9px 11px;
  border-radius: 8px;
}

.guest-cta {
  margin: 14px 12px;
  padding: 18px 16px;
  text-align: center;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 1px 8px rgba(0, 0, 0, .05);
}

.guest-cta p { margin: 0 0 12px; font-size: 14px; color: #4a5854; }

/* ---------- 挣分方式 ---------- */

.task-list { margin-bottom: 14px; }

.task-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid #f2f5f4;
}

.task-row:last-child { border-bottom: none; }

.task-label {
  font-size: 13px;
  color: #37453f;
  display: flex;
  align-items: center;
  gap: 6px;
}

.task-note {
  font-size: 10px;
  color: #9aa5a0;
  background: #f4f6f5;
  padding: 1px 5px;
  border-radius: 4px;
}

.task-points {
  font-size: 14px;
  font-weight: 700;
  color: #2d6b58;
}

/* ---------- 九阶阶梯 ---------- */

.ladder-row {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #f2f5f4;
  opacity: .55;
}

.ladder-row:last-child { border-bottom: none; }
.ladder-row.reached { opacity: 1; }

.ladder-row.current {
  margin: 0 -8px;
  padding: 12px 8px;
  background: #f4faf7;
  border-radius: 10px;
  border-bottom-color: transparent;
}

.lr-left {
  flex-shrink: 0;
  width: 52px;
  text-align: center;
}

.lr-level {
  display: block;
  font-size: 11px;
  color: #9aa5a0;
  font-weight: 600;
}

.lr-name {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  font-weight: 700;
  color: #1f2d28;
  letter-spacing: 1px;
}

.lr-body { flex: 1; min-width: 0; }

.lr-threshold {
  font-size: 12px;
  color: #2d6b58;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 7px;
}

.lr-you {
  font-size: 10px;
  color: #fff;
  background: #2d6b58;
  padding: 1px 6px;
  border-radius: 999px;
  font-weight: 500;
}

.lr-motto {
  margin: 3px 0 6px;
  font-size: 12px;
  color: #7d8a85;
  font-style: italic;
  line-height: 1.5;
}

.lr-unlocks {
  margin: 0;
  padding-left: 16px;
  font-size: 12px;
  color: #4a5854;
  line-height: 1.7;
}

/* ---------- 谷内礼遇 ---------- */

.perk-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-bottom: 14px;
}

.perk-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 12px 6px;
  background: #f7f9f8;
  border-radius: 10px;
  opacity: .5;
}

.perk-item.on {
  background: #f1f9f5;
  border: 1px solid #cfe8dc;
  opacity: 1;
}

.perk-icon { font-size: 21px; }
.perk-name { font-size: 11px; color: #6b7873; }
.perk-value { font-size: 12px; font-weight: 700; color: #2d6b58; text-align: center; }

/* ---------- 徽章墙 ---------- */

.badge-wall {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.badge-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 13px 7px;
  background: #f7f9f8;
  border-radius: 10px;
  text-align: center;
}

/* 未获得的徽章去色但仍可见，让人知道还有什么可拿 */
.badge-item:not(.got) { filter: grayscale(1); opacity: .42; }
.badge-item.got { background: #fdf8ec; border: 1px solid #f0e3c4; }

.badge-icon { font-size: 25px; }
.badge-name { font-size: 12px; font-weight: 600; color: #37453f; }
.badge-desc { font-size: 10px; color: #9aa5a0; line-height: 1.4; }

/* ---------- 贡献榜 ---------- */

.lb-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 0;
  border-bottom: 1px solid #f2f5f4;
}

.lb-row:last-child { border-bottom: none; }

.lb-rank {
  flex-shrink: 0;
  width: 24px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: #8a9691;
}

.lb-name {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: #1f2d28;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lb-level {
  flex-shrink: 0;
  font-size: 11px;
  color: #2d6b58;
  background: #f1f7f4;
  padding: 2px 7px;
  border-radius: 999px;
}

.lb-exp {
  flex-shrink: 0;
  width: 52px;
  text-align: right;
  font-size: 13px;
  font-weight: 600;
  color: #37453f;
}