page { background: #F5F3FF; } .report-page { padding: 24rpx 28rpx 60rpx; } .hero { background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%); color: #fff; border-radius: 24rpx; padding: 36rpx 32rpx; margin-bottom: 24rpx; box-shadow: 0 10rpx 30rpx rgba(124, 58, 237, 0.25); } .hero-badge { display: inline-block; background: rgba(255,255,255,0.2); padding: 6rpx 18rpx; border-radius: 100rpx; font-size: 22rpx; margin-bottom: 18rpx; } .hero-title { font-size: 36rpx; font-weight: 700; line-height: 1.4; margin-bottom: 16rpx; } .hero-mbti { font-size: 24rpx; opacity: 0.9; } .hero-mbti-badge { display: inline-block; background: #fff; color: #7c3aed; padding: 2rpx 16rpx; border-radius: 100rpx; font-weight: 700; margin-left: 6rpx; font-size: 22rpx; } .section { margin-bottom: 24rpx; } .preview-card { background: #fff; border-radius: 24rpx; padding: 28rpx; box-shadow: 0 4rpx 12rpx rgba(31,27,77,0.05); } .preview-title { font-size: 28rpx; font-weight: 700; color: #1F1B4D; margin-bottom: 14rpx; } .preview-text { color: #4C1D95; font-size: 26rpx; line-height: 1.7; padding: 16rpx 18rpx; background: #F5F3FF; border-radius: 14rpx; margin-bottom: 20rpx; } .preview-mask { padding-top: 12rpx; border-top: 1rpx dashed #DDD6FE; } .mask-tip { font-size: 24rpx; color: #6B6894; margin-bottom: 16rpx; } .unlock-row { display: flex; align-items: center; justify-content: space-between; gap: 16rpx; } .price { font-size: 42rpx; font-weight: 700; color: #7c3aed; } .unlock-btn { flex: 1; max-width: 400rpx; min-height: 82rpx; padding: 12rpx 20rpx; box-sizing: border-box; background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%); color: #fff; border: none; border-radius: 100rpx; font-size: 26rpx; font-weight: 600; line-height: 1.35; display: flex; align-items: center; justify-content: center; text-align: center; } .unlock-btn::after { border: none; } .trust { display: flex; flex-direction: column; gap: 10rpx; margin-top: 24rpx; } .trust-item { font-size: 24rpx; color: #6B6894; } .trust-icon { margin-right: 10rpx; } .loading-card { background: #fff; border-radius: 24rpx; padding: 50rpx 24rpx; text-align: center; } .loading-dot { width: 48rpx; height: 48rpx; border-radius: 50%; background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%); margin: 0 auto 16rpx; animation: pulse 1.2s infinite; } @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.2); opacity: 0.6; } } .loading-text { font-size: 26rpx; color: #4C1D95; margin-bottom: 20rpx; } .retry-btn { display: inline-block; padding: 0 32rpx; height: 64rpx; line-height: 64rpx; background: #EDE9FE; color: #7c3aed; border-radius: 100rpx; font-size: 24rpx; } .retry-btn::after { border: none; } .report-body { background: #fff; border-radius: 24rpx; padding: 32rpx; font-size: 28rpx; line-height: 1.8; color: #1F1B4D; white-space: pre-wrap; word-break: break-word; } .done-actions { display: flex; gap: 16rpx; margin-top: 24rpx; } .share-btn, .copy-btn { flex: 1; height: 82rpx; line-height: 82rpx; border-radius: 100rpx; font-size: 26rpx; font-weight: 600; } .share-btn { background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%); color: #fff; border: none; } .share-btn::after, .copy-btn::after { border: none; } .copy-btn { background: #fff; color: #7c3aed; border: 2rpx solid #DDD6FE; } .error-card { background: #fff; border-radius: 24rpx; padding: 50rpx 24rpx; text-align: center; color: #9CA3AF; }