.page { min-height: 100vh; background: #F9FAFB; } .content { padding: 32rpx; } .loading-state, .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 200rpx; color: #9CA3AF; font-size: 28rpx; } .empty-state text { margin-top: 24rpx; margin-bottom: 48rpx; } .back-btn { background: #B06AB3; color: #ffffff; padding: 20rpx 60rpx; border-radius: 999rpx; font-size: 28rpx; } /* Package Header */ .package-header { border-radius: 48rpx; padding: 60rpx 48rpx; color: #ffffff; position: relative; overflow: hidden; box-shadow: 0 20rpx 40rpx rgba(0, 0, 0, 0.1); margin-bottom: 48rpx; } .header-main { display: flex; align-items: center; gap: 32rpx; position: relative; z-index: 2; } .header-info { display: flex; flex-direction: column; gap: 8rpx; } .package-title { font-size: 48rpx; font-weight: 900; letter-spacing: 2rpx; } .package-subtitle { font-size: 28rpx; opacity: 0.9; } .header-decoration { position: absolute; right: -40rpx; bottom: -40rpx; width: 240rpx; height: 240rpx; background: rgba(255, 255, 255, 0.1); border-radius: 50%; z-index: 1; } /* Benefits Section */ .benefits-section { background: #ffffff; border-radius: 40rpx; padding: 48rpx 40rpx; box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.02); } .section-title { display: flex; align-items: center; justify-content: center; gap: 24rpx; margin-bottom: 48rpx; } .section-title text { font-size: 32rpx; font-weight: 800; color: #111827; } .title-line { flex: 1; height: 2rpx; background: #F3F4F6; max-width: 80rpx; } .benefits-list { display: flex; flex-direction: column; gap: 32rpx; } .benefit-item { display: flex; align-items: flex-start; gap: 24rpx; } .check-icon { width: 48rpx; height: 48rpx; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.03); border-radius: 50%; flex-shrink: 0; margin-top: 4rpx; } .benefit-text { font-size: 30rpx; color: #374151; line-height: 1.6; font-weight: 500; } .footer-tip { text-align: center; margin-top: 60rpx; color: #9CA3AF; font-size: 24rpx; }