<template>
	<view class="planet" :style="{'--statusbar': statusBarHeight + 'px'}">
		<view class="planet-bg">
			<view class="bg-aura bg-aura-a"></view>
			<view class="bg-aura bg-aura-b"></view>
			<view class="bg-aura bg-aura-c"></view>
			<view class="bg-space-dust bg-space-dust-a"></view>
			<view class="bg-space-dust bg-space-dust-b"></view>
			<view class="bg-shooting bg-shooting-a"></view>
			<view class="bg-shooting bg-shooting-b"></view>
			<view class="bg-orbit bg-orbit-a"></view>
			<view class="bg-orbit bg-orbit-b"></view>
			<view class="bg-star" v-for="(s, i) in stars" :key="i" :style="s"></view>
			<view class="bg-planet bg-planet-a"></view>
			<view class="bg-planet bg-planet-b"></view>
		</view>

		<view class="nav" :style="{height: navHeight + 'px', paddingTop: statusBarHeight + 'px'}">
			<view class="nav-back" @tap="goBack">
				<text class="nav-back-icon">‹</text>
			</view>
			<view class="nav-title">白嫖星球</view>
		</view>

		<scroll-view scroll-y enhanced :show-scrollbar="false" class="planet-scroll" :style="{paddingTop: (navHeight + 10) + 'px'}">
			<!-- 骨架屏 -->
			<view v-if="loading" class="skeleton">
				<view class="sk-block sk-header"></view>
				<view class="sk-block sk-me"></view>
				<view class="sk-block sk-row"></view>
				<view class="sk-block sk-list"></view>
			</view>

			<block v-else>
				<planet-header
					:data="home"
					@ticketlog="goTicketLog"
					@draw="goDrawResult"
					@guide="showGuideModal"
					@rank="goRank">
				</planet-header>

				<planet-daily-loop
					:data="home.dailyLoop"
					:my-ticket-count="home.myTicketCount"
					@collect="onDailyCollect"
					@revenge="onDailyRevenge"
					@more="goMore"
					@join="onJoinPool">
				</planet-daily-loop>

				<planet-adventure-entry @start="goAdventure" @arena="goArena"></planet-adventure-entry>

				<planet-me
					:data="home"
					@sign="onSign"
					@openbox="openBox">
				</planet-me>

				<planet-box
					:available="home.boxAvailable"
					:opening="boxOpening"
					@open="openBox">
				</planet-box>

				<view class="bottom-space"></view>
			</block>
		</scroll-view>

		<!-- 追捕浮层 -->
		<hunt-modal
			:show="huntModal.show"
			:phase="huntModal.phase"
			:result="huntModal.result"
			:target="huntModal.target"
			@close="closeHunt">
		</hunt-modal>

		<view v-if="boxResult.show" class="box-result-mask" @tap="boxResult.show=false">
			<view class="box-result" @tap.stop>
				<view class="box-result-burst"></view>
				<view class="box-result-icon">BLIND BOX</view>
				<view class="box-result-title">{{boxResult.data.rewardName}}</view>
				<view class="box-result-desc">{{boxResult.data.message}}</view>
				<view class="box-result-btn" @tap="boxResult.show=false">收下了</view>
			</view>
		</view>

		<view v-if="guideVisible" class="guide-mask" @tap="guideVisible=false">
			<view class="guide-card" @tap.stop>
				<view class="guide-kicker">BANJINLI GUIDE</view>
				<view class="guide-title">白嫖星球玩法说明书</view>
				<view class="guide-list">
					<view class="guide-item">
						<text>1</text>
						<view>每天签到、开补给箱、玩学院助推赛都能获得星球券。</view>
					</view>
					<view class="guide-item">
						<text>2</text>
						<view>把星球券投入奖池，券越多，开奖时瓜分现金奖励的权重越高。</view>
					</view>
					<view class="guide-item">
						<text>3</text>
						<view>排行榜里可以发起星际追查，有机会从榜上同学那里追回补给券。</view>
					</view>
					<view class="guide-item">
						<text>4</text>
						<view>补给地图里有券树、仓库、防御塔、地标和任务，适合长期经营。</view>
					</view>
				</view>
				<view class="guide-btn" @tap="guideVisible=false">知道怎么玩了</view>
			</view>
		</view>
	</view>
</template>

<script>
	import planetHeader from '@/package1/components/planet/planet-header.vue'
	import planetMe from '@/package1/components/planet/planet-me.vue'
	import planetBox from '@/package1/components/planet/planet-box.vue'
	import huntModal from '@/package1/components/planet/hunt-modal.vue'
	import planetDailyLoop from '@/package1/components/planet/planet-daily-loop.vue'
	import planetAdventureEntry from '@/package1/components/planet/planet-adventure-entry.vue'

	export default {
		components: {
			planetHeader,
			planetMe,
			planetBox,
			huntModal,
			planetDailyLoop,
			planetAdventureEntry
		},
		data() {
			return {
				statusBarHeight: 20,
				navHeight: 64,
				loading: true,
				userId: '',
				regionId: '',
				nickname: '',
				avatar: '',
				college: '',
				home: {
					poolAmount: 0,
					joinCount: 0,
					myTicketCount: 0,
					myRankNo: 0,
					remainHunt: 3,
					tasks: [],
					rankList: [],
					buffShop: [],
					newsList: [],
					myBuffs: [],
					operate: {},
					dailyLoop: {}
				},
				boxOpening: false,
				boxResult: {
					show: false,
					data: {}
				},
				guideVisible: false,
				huntModal: {
					show: false,
					phase: 'searching',
					result: null,
					target: {}
				}
			}
		},
		computed: {
			stars() {
				const arr = []
				for (let n = 1; n <= 20; n++) {
					const top = (n * 29) % 100
					const left = (n * 47) % 100
					const delay = (n % 12) / 2
					const size = (n % 4) + 1
					arr.push(`top:${top}%;left:${left}%;width:${size}px;height:${size}px;animation-delay:${delay}s;`)
				}
				return arr
			}
		},
		onLoad() {
			const sys = uni.getSystemInfoSync()
			this.statusBarHeight = sys.statusBarHeight || 20
			this.initNavHeight()
			this.userId = uni.getStorageSync('id') || ''
			this.nickname = uni.getStorageSync('nickName') || uni.getStorageSync('nickname') || ''
			this.avatar = uni.getStorageSync('avatarUrl') || uni.getStorageSync('avatar') || ''
			try {
				const area = uni.getStorageSync('area')
				if (area) {
					this.regionId = JSON.parse(area).id || ''
				}
			} catch (e) {}
			this.loadHome()
		},
		methods: {
			initNavHeight() {
				try {
					const menu = uni.getMenuButtonBoundingClientRect && uni.getMenuButtonBoundingClientRect()
					if (menu && menu.top && menu.height) {
						this.navHeight = menu.top + menu.height + 8
						return
					}
				} catch (e) {}
				this.navHeight = this.statusBarHeight + 44
			},
			loadHome(silent) {
				if (!this.userId) {
					this.tui.toast('请先登录')
					return
				}
				if (!this.regionId) {
					this.loading = false
					this.tui.toast('未获取到校区信息，白嫖星球仅限本区域内进行')
					return
				}
				if (!silent) this.loading = true
				this.tui.request('/app/planet/home', 'POST', {
					userId: this.userId,
					regionId: this.regionId,
					nickname: this.nickname,
					avatar: this.avatar,
					college: this.college
				}, false, false, true).then((res) => {
					this.loading = false
					if (res.code == 200 && res.result) {
						this.home = res.result
					} else if (res.message) {
						this.tui.toast(res.message)
					}
				}).catch(() => {
					this.loading = false
				})
			},
			onSign() {
				this.tui.request('/app/planet/sign', 'POST', {
					userId: this.userId,
					regionId: this.regionId
				}).then((res) => {
					this.tui.toast(res.message, 1500, res.code == 200)
					if (res.code == 200) this.loadHome(true)
				})
			},
			openBox() {
				if (!this.home.boxAvailable || this.boxOpening) return
				this.boxOpening = true
				this.tui.request('/app/planet/box/open', 'POST', {
					userId: this.userId,
					regionId: this.regionId
				}).then((res) => {
					setTimeout(() => {
						this.boxOpening = false
						if (res.code == 200 && res.result) {
							this.boxResult.data = res.result
							this.boxResult.show = true
							this.loadHome(true)
						} else {
							this.tui.toast(res.message)
						}
					}, 800)
				}).catch(() => {
					this.boxOpening = false
				})
			},
			onHunt(item) {
				if (item.self) {
					this.tui.toast('不能追捕自己')
					return
				}
				if (item.shielded) {
					this.tui.toast('目标已开启防护罩')
					return
				}
				if (this.home.remainHunt <= 0) {
					this.tui.toast('今日追捕次数已用完')
					return
				}
				this.huntModal.show = true
				this.huntModal.phase = 'searching'
				this.huntModal.result = null
				this.huntModal.target = item
				// 动画阶段推进
				setTimeout(() => { this.huntModal.phase = 'locking' }, 900)
				setTimeout(() => { this.huntModal.phase = 'chasing' }, 1800)
				this.tui.request('/app/planet/hunt', 'POST', {
					userId: this.userId,
					regionId: this.regionId,
					toUserId: item.userId
				}, false, false, true).then((res) => {
					setTimeout(() => {
						if (res.code == 200 && res.result) {
							this.huntModal.result = res.result
							this.huntModal.phase = 'result'
							this.loadHome(true)
						} else {
							this.huntModal.show = false
							this.tui.toast(res.message)
						}
					}, 2600)
				}).catch(() => {
					this.huntModal.show = false
				})
			},
			closeHunt() {
				this.huntModal.show = false
				this.huntModal.result = null
			},
			operateRequest(url, data, successText) {
				this.tui.request(url, 'POST', Object.assign({
					userId: this.userId,
					regionId: this.regionId
				}, data || {})).then((res) => {
					this.tui.toast(res.code == 200 ? successText : res.message, 1500, res.code == 200)
					if (res.code == 200) this.loadHome(true)
				})
			},
			onRandomSearch() {
				this.startSearch('/app/planet/search/random', {}, { nickname: '随机同校区玩家' })
			},
			onDailyCollect() {
				if (!this.home.dailyLoop || !this.home.dailyLoop.signedToday) {
					this.onSign()
					return
				}
				if (this.home.dailyLoop.boxAvailable) {
					this.openBox()
					return
				}
				this.tui.toast('今天的顺手券已经收完')
			},
			onDailyRevenge() {
				const loop = this.home.dailyLoop || {}
				if (loop.hasRevengeTarget && loop.revengeTarget && loop.revengeTarget.fromUserId) {
					this.startSearch('/app/planet/search/target', { toUserId: loop.revengeTarget.fromUserId }, loop.revengeTarget)
				} else {
					this.onRandomSearch()
				}
			},
			startSearch(url, data, target) {
				this.huntModal.show = true
				this.huntModal.phase = 'searching'
				this.huntModal.result = null
				this.huntModal.target = target || { nickname: '同校区玩家' }
				setTimeout(() => { this.huntModal.phase = 'locking' }, 900)
				setTimeout(() => { this.huntModal.phase = 'chasing' }, 1800)
				this.tui.request(url, 'POST', Object.assign({
					userId: this.userId,
					regionId: this.regionId
				}, data || {}), false, false, true).then((res) => {
					setTimeout(() => {
						if (res.code == 200 && res.result) {
							this.huntModal.result = {
								result: res.result.intercepted ? 'shield' : 'success',
								message: res.result.message,
								gainTickets: res.result.gainTickets,
								totalGain: res.result.gainTickets,
								remainHunt: res.result.remainSearchCount
							}
							this.huntModal.phase = 'result'
							this.loadHome(true)
						} else {
							this.huntModal.show = false
							this.tui.toast(res.message)
						}
					}, 2200)
				}).catch(() => {
					this.huntModal.show = false
				})
			},
			onJoinPool() {
				const loop = this.home.dailyLoop || {}
				if ((this.home.myTicketCount || 0) <= 0) {
					this.tui.toast('星球券不足')
					return
				}
				this.home.myTicketCount = Math.max(0, (this.home.myTicketCount || 0) - 1)
				loop.myPoolTickets = (loop.myPoolTickets || 0) + 1
				this.$set(this.home, 'dailyLoop', loop)
				this.tui.request('/app/planet/pool/join', 'POST', {
					userId: this.userId,
					regionId: this.regionId,
					tickets: 1
				}).then((res) => {
					if (res.code == 200) {
						this.loadHome(true)
					} else {
						this.home.myTicketCount = (this.home.myTicketCount || 0) + 1
						loop.myPoolTickets = Math.max(0, (loop.myPoolTickets || 0) - 1)
						this.$set(this.home, 'dailyLoop', loop)
						this.tui.toast(res.message)
					}
				}).catch(() => {
					this.home.myTicketCount = (this.home.myTicketCount || 0) + 1
					loop.myPoolTickets = Math.max(0, (loop.myPoolTickets || 0) - 1)
					this.$set(this.home, 'dailyLoop', loop)
				})
			},
			goDrawResult() {
				uni.navigateTo({
					url: '/package1/planet/drawResult'
				})
			},
			goTicketLog() {
				uni.navigateTo({
					url: '/package1/planet/ticketLog'
				})
			},
			goAdventure() {
				uni.navigateTo({
					url: '/package1/planet/adventure'
				})
			},
			goArena() {
				uni.navigateTo({
					url: '/package1/planet/pkHall'
				})
			},
			goRank() {
				uni.navigateTo({
					url: '/package1/planet/rank'
				})
			},
			goMore() {
				uni.navigateTo({
					url: '/package1/planet/more'
				})
			},
			showGuideModal() {
				this.guideVisible = true
			},
			goBack() {
				uni.reLaunch({ url: '/pages/index/index' })
			}
		}
	}
</script>

<style lang="scss" scoped>
	.planet {
		min-height: 100vh;
		background:
			radial-gradient(circle at 50% 260rpx, rgba(255,255,255,0.72), rgba(255,255,255,0) 360rpx),
			linear-gradient(155deg, #F3FFF4 0%, #EAF8FF 42%, #F7EEFF 76%, #FFF8DE 100%);
		position: relative;
		overflow: hidden;
		color: #12342F;
	}

	.planet-bg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 1500rpx;
		z-index: 0;
		overflow: hidden;
		pointer-events: none;
	}

	.bg-aura {
		position: absolute;
		border-radius: 50%;
		opacity: 0.72;
	}

	.bg-aura-a {
		width: 520rpx;
		height: 520rpx;
		right: -160rpx;
		top: 74rpx;
		background: radial-gradient(circle, rgba(79,183,255,0.34), rgba(79,183,255,0));
	}

	.bg-aura-b {
		width: 460rpx;
		height: 460rpx;
		left: -180rpx;
		top: 360rpx;
		background: radial-gradient(circle, rgba(53,214,166,0.35), rgba(53,214,166,0));
		animation-delay: -2.5s;
	}

	.bg-aura-c {
		width: 420rpx;
		height: 420rpx;
		right: -110rpx;
		top: 860rpx;
		background: radial-gradient(circle, rgba(143,124,255,0.22), rgba(143,124,255,0));
		animation-delay: -4s;
	}

	.bg-space-dust {
		position: absolute;
		border-radius: 50%;
		background:
			radial-gradient(circle, rgba(255,255,255,0.9) 0 2rpx, transparent 3rpx),
			radial-gradient(circle, rgba(53,214,166,0.5) 0 2rpx, transparent 3rpx),
			radial-gradient(circle, rgba(143,124,255,0.38) 0 2rpx, transparent 3rpx);
		background-size: 86rpx 92rpx, 124rpx 116rpx, 156rpx 148rpx;
		opacity: 0.38;
	}

	.bg-space-dust-a {
		left: -120rpx;
		top: 120rpx;
		width: 980rpx;
		height: 860rpx;
	}

	.bg-space-dust-b {
		left: -180rpx;
		top: 900rpx;
		width: 1000rpx;
		height: 760rpx;
		animation-delay: -6s;
		opacity: 0.24;
	}

	@keyframes dustDrift {
		0% { transform: translate3d(0, 0, 0); }
		100% { transform: translate3d(-86rpx, 92rpx, 0); }
	}

	.bg-shooting {
		position: absolute;
		width: 180rpx;
		height: 3rpx;
		border-radius: 999rpx;
		background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.9), rgba(79,183,255,0.25));
		transform: rotate(-30deg);
		opacity: 0.52;
	}

	.bg-shooting-a {
		right: -160rpx;
		top: 240rpx;
	}

	.bg-shooting-b {
		right: -160rpx;
		top: 780rpx;
		width: 130rpx;
		animation-delay: -2.8s;
		opacity: 0.72;
	}

	@keyframes shooting {
		0% { transform: translate3d(180rpx, -80rpx, 0) rotate(-30deg); opacity: 0; }
		10% { opacity: 1; }
		60% { opacity: 1; }
		100% { transform: translate3d(-760rpx, 300rpx, 0) rotate(-30deg); opacity: 0; }
	}

	@keyframes auraFloat {
		0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
		50% { transform: translate3d(18rpx, -34rpx, 0) scale(1.06); }
	}

	.bg-orbit {
		position: absolute;
		border: 2rpx solid rgba(255,255,255,0.72);
		border-radius: 50%;
		transform: rotate(-18deg);
	}

	.bg-orbit-a {
		width: 920rpx;
		height: 300rpx;
		left: -60rpx;
		top: 250rpx;
		opacity: 0.34;
	}

	.bg-orbit-b {
		width: 720rpx;
		height: 210rpx;
		right: -190rpx;
		top: 680rpx;
		opacity: 0.26;
	}

	.bg-star {
		position: absolute;
		background: rgba(255,255,255,0.92);
		border-radius: 50%;
		box-shadow: 0 0 12rpx rgba(79,183,255,0.45);
		opacity: 0.55;
	}

	@keyframes twinkle {
		0%, 100% { opacity: 0.28; transform: scale(0.8); }
		50% { opacity: 0.85; transform: scale(1.28); }
	}

	.bg-planet {
		position: absolute;
		border-radius: 50%;
		opacity: 0.8;
		box-shadow: inset -18rpx -22rpx 42rpx rgba(18,52,47,0.08), 0 22rpx 60rpx rgba(53,214,166,0.18);
	}

	.bg-planet-a {
		width: 120rpx;
		height: 120rpx;
		right: 34rpx;
		top: 106rpx;
		background: radial-gradient(circle at 32% 28%, #FFFFFF 0%, #BAF7CF 32%, #7DE2FF 100%);
	}

	.bg-planet-b {
		width: 92rpx;
		height: 92rpx;
		left: 24rpx;
		top: 760rpx;
		background: radial-gradient(circle at 30% 30%, #FFFFFF 0%, #FFE7A8 36%, #FFB7D1 100%);
	}

	@keyframes float {
		0%, 100% { transform: translateY(0) translateX(0); }
		50% { transform: translateY(-24rpx) translateX(12rpx); }
	}

	.nav {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 20;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(243,255,244,0.9);
	}

	.nav-back {
		position: absolute;
		left: 24rpx;
		bottom: 12rpx;
		width: 56rpx;
		height: 56rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(255,255,255,.72);
		box-shadow: 0 8rpx 20rpx rgba(18,52,47,.08);
	}

	.nav-back-icon {
		color: #12342F;
		font-size: 42rpx;
		font-weight: 300;
		line-height: 1;
		transform: translateY(-2rpx);
	}

	.nav-title {
		color: #12342F;
		font-size: 32rpx;
		font-weight: 900;
		letter-spacing: 1rpx;
		padding-bottom: 14rpx;
	}

	.planet-scroll {
		position: relative;
		z-index: 5;
		height: 100vh;
		box-sizing: border-box;
		padding-left: 22rpx;
		padding-right: 22rpx;
	}

	.bottom-space {
		height: 60rpx;
	}

	/* 骨架屏 */
	.skeleton {
		padding-top: 22rpx;
	}

	.sk-block {
		border-radius: 36rpx;
		background: linear-gradient(90deg, rgba(255,255,255,0.45) 25%, rgba(255,255,255,0.9) 37%, rgba(255,255,255,0.45) 63%);
		background-size: 400% 100%;
		animation: shimmer 1.4s ease infinite;
		margin-bottom: 24rpx;
		box-shadow: 0 18rpx 42rpx rgba(53,214,166,0.1);
	}

	.sk-header { height: 520rpx; border-radius: 48rpx; }
	.sk-me { height: 150rpx; }
	.sk-row { height: 220rpx; }
	.sk-list { height: 330rpx; }

	@keyframes shimmer {
		0% { background-position: 100% 50%; }
		100% { background-position: 0 50%; }
	}

	/* 宝箱结果 */
	.box-result-mask {
		position: fixed;
		top: 0; left: 0; right: 0; bottom: 0;
		background: rgba(18,52,47,0.28);
		backdrop-filter: blur(8px);
		z-index: 60;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.box-result {
		position: relative;
		width: 540rpx;
		padding: 62rpx 40rpx 42rpx;
		border-radius: 48rpx;
		background: linear-gradient(155deg, rgba(255,255,255,0.92), rgba(244,255,249,0.78));
		border: 2rpx solid rgba(255,255,255,0.9);
		box-shadow: 0 34rpx 80rpx rgba(53,214,166,0.24);
		text-align: center;
		overflow: hidden;
	}

	.box-result-burst {
		position: absolute;
		top: -60rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 400rpx;
		height: 400rpx;
		background: radial-gradient(circle, rgba(255,184,77,0.36), transparent 62%);
		animation: pulse 1.6s ease-in-out infinite;
	}

	@keyframes pulse {
		0%, 100% { transform: translateX(-50%) scale(0.9); opacity: 0.6; }
		50% { transform: translateX(-50%) scale(1.1); opacity: 1; }
	}

	.box-result-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 190rpx;
		height: 190rpx;
		border-radius: 46rpx;
		background: linear-gradient(145deg, #FFFFFF, #DDF8FF 48%, #E8DFFF);
		color: #22B889;
		font-size: 24rpx;
		font-weight: 900;
		letter-spacing: 1rpx;
		position: relative;
		animation: bounce 1s ease infinite;
		box-shadow: inset -16rpx -20rpx 34rpx rgba(143,124,255,0.16), 0 22rpx 48rpx rgba(79,183,255,0.18);
	}

	@keyframes bounce {
		0%, 100% { transform: translateY(0); }
		50% { transform: translateY(-12rpx); }
	}

	.box-result-title {
		margin-top: 20rpx;
		color: #12342F;
		font-size: 36rpx;
		font-weight: 800;
	}

	.box-result-desc {
		margin-top: 12rpx;
		color: #42635E;
		font-size: 26rpx;
	}

	.box-result-btn {
		margin-top: 36rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		background: linear-gradient(135deg, #35D6A6, #4FB7FF);
		color: #FFFFFF;
		font-size: 30rpx;
		font-weight: 700;
		box-shadow: 0 18rpx 36rpx rgba(53,214,166,0.25);
	}

	.guide-mask {
		position: fixed;
		top: 0; left: 0; right: 0; bottom: 0;
		background: rgba(18,52,47,0.32);
		z-index: 70;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 36rpx;
	}

	.guide-card {
		position: relative;
		width: 100%;
		padding: 44rpx 34rpx 34rpx;
		border-radius: 46rpx;
		background: linear-gradient(155deg, rgba(255,255,255,0.96), rgba(240,255,248,0.88));
		border: 2rpx solid rgba(255,255,255,0.92);
		box-shadow: 0 34rpx 80rpx rgba(53,214,166,0.24);
		overflow: hidden;
	}

	.guide-card:before {
		content: '';
		position: absolute;
		right: -100rpx;
		top: -120rpx;
		width: 320rpx;
		height: 320rpx;
		border-radius: 50%;
		background: radial-gradient(circle, rgba(79,183,255,0.24), transparent 68%);
	}

	.guide-kicker {
		position: relative;
		color: #59CBB5;
		font-size: 20rpx;
		font-weight: 900;
		letter-spacing: 3rpx;
	}

	.guide-title {
		position: relative;
		margin-top: 10rpx;
		color: #12342F;
		font-size: 40rpx;
		font-weight: 900;
	}

	.guide-list {
		position: relative;
		margin-top: 26rpx;
	}

	.guide-item {
		margin-top: 16rpx;
		padding: 20rpx;
		border-radius: 28rpx;
		background: rgba(255,255,255,0.72);
		display: flex;
		gap: 16rpx;
		color: #42635E;
		font-size: 25rpx;
		line-height: 1.45;
		font-weight: 700;
	}

	.guide-item text {
		width: 42rpx;
		height: 42rpx;
		line-height: 42rpx;
		border-radius: 50%;
		text-align: center;
		background: linear-gradient(135deg, #35D6A6, #4FB7FF);
		color: #FFFFFF;
		font-size: 22rpx;
		font-weight: 900;
		flex-shrink: 0;
	}

	.guide-btn {
		position: relative;
		margin-top: 30rpx;
		height: 82rpx;
		line-height: 82rpx;
		border-radius: 999rpx;
		text-align: center;
		background: linear-gradient(135deg, #35D6A6, #4FB7FF);
		color: #FFFFFF;
		font-size: 28rpx;
		font-weight: 900;
		box-shadow: 0 18rpx 36rpx rgba(53,214,166,0.24);
	}
</style>
