.page { padding-bottom: 60rpx; }
.head { font-size: 30rpx; font-weight: 700; color: #2f6f4f; text-align: center; }
.species { display: flex; gap: 24rpx; align-items: center; }
.sp-emoji {
  width: 110rpx; height: 110rpx;
  border-radius: 22rpx;
  background: #f3faf3;
  border: 2rpx solid #d5ecd5;
  display: flex; align-items: center; justify-content: center;
  font-size: 62rpx;
}
.sp-emoji.locked { filter: grayscale(1); opacity: .35; }
.sp-info { flex: 1; }
.sp-info .t { font-size: 30rpx; font-weight: 700; color: #3a5a3a; }
.tag {
  font-size: 20rpx; color: #fff; background: #4caf50;
  border-radius: 999rpx; padding: 2rpx 14rpx; margin-left: 10rpx;
}
.tag-lock { background: #b0b8b0; }
.sp-info .d { font-size: 22rpx; color: #8a9a8a; margin-top: 6rpx; }
.stages { display: flex; gap: 10rpx; margin-top: 14rpx; flex-wrap: wrap; }
.stage-dot {
  font-size: 20rpx;
  padding: 4rpx 14rpx;
  border-radius: 999rpx;
  background: #eef3ee;
  color: #aab4aa;
}
.stage-dot.got { background: #e7f7e7; color: #3e9e4f; font-weight: 600; }