diff --git a/src/pages.json b/src/pages.json
index a1cff46..a350085 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -51,7 +51,7 @@
 		{
 			"path": "pages/share/index",
 			"style": {
-				"navigationBarTitleText": "戒烟分享"
+				"navigationBarTitleText": "成就海报"
 			}
 		},
 		{
diff --git a/src/pages/logs/index.vue b/src/pages/logs/index.vue
index 723bacd..8efffb9 100644
--- a/src/pages/logs/index.vue
+++ b/src/pages/logs/index.vue
@@ -1,41 +1,43 @@
 <template>
 	<view class="page">
-		<view class="filters-sticky">
-			<view class="filters">
-				<view class="date-filters">
-					<view
-						v-for="option in dateFilters"
-						:key="option.value"
-						class="date-filter"
-						:class="{ 'date-filter-active': currentDateFilter === option.value }"
-						@tap="currentDateFilter = option.value"
-					>
-						{{ option.label }}
+		<view class="fixed-summary">
+			<view class="filters-sticky">
+				<view class="filters">
+					<view class="date-filters">
+						<view
+							v-for="option in dateFilters"
+							:key="option.value"
+							class="date-filter"
+							:class="{ 'date-filter-active': currentDateFilter === option.value }"
+							@tap="currentDateFilter = option.value"
+						>
+							{{ option.label }}
+						</view>
 					</view>
 				</view>
 			</view>
-		</view>
 
-		<view class="overview">
-			<view class="overview-item overview-primary">
-				<text class="overview-label">今日已抽</text>
-				<text class="overview-value">{{ todaySmokeCount }}</text>
-				<text class="overview-unit">根</text>
+			<view class="overview">
+				<view class="overview-item overview-primary">
+					<text class="overview-label">今日已抽</text>
+					<text class="overview-value">{{ todaySmokeCount }}</text>
+					<text class="overview-unit">根</text>
+				</view>
+				<view class="overview-item">
+					<text class="overview-label">当前列表</text>
+					<text class="overview-value">{{ filteredLogs.length }}</text>
+					<text class="overview-unit">条</text>
+				</view>
+				<view class="overview-item">
+					<text class="overview-label">最近记录</text>
+					<text class="overview-clock">{{ latestDisplayTime }}</text>
+				</view>
 			</view>
-			<view class="overview-item">
-				<text class="overview-label">当前列表</text>
-				<text class="overview-value">{{ filteredLogs.length }}</text>
-				<text class="overview-unit">条</text>
-			</view>
-			<view class="overview-item">
-				<text class="overview-label">最近记录</text>
-				<text class="overview-clock">{{ latestDisplayTime }}</text>
-			</view>
-		</view>
 
-		<view class="section-head">
-			<text class="section-label">时间记录</text>
-			<text class="section-note">{{ currentDateFilterLabel }} · 按日期倒序</text>
+			<view class="section-head">
+				<text class="section-label">时间记录</text>
+				<text class="section-note">{{ currentDateFilterLabel }} · 按日期倒序</text>
+			</view>
 		</view>
 
 		<scroll-view
@@ -369,9 +371,18 @@ onShareAppMessage(() => {
 	overflow: hidden;
 }
 
+.fixed-summary {
+	position: relative;
+	z-index: 2;
+	flex-shrink: 0;
+	background:
+		linear-gradient(180deg, #F6F8F6 0%, #EFF4F1 100%);
+	padding-bottom: 4rpx;
+}
+
 .filters-sticky {
 	position: relative;
-	height: 88rpx;
+	height: 92rpx;
 	flex-shrink: 0;
 	z-index: 20;
 }
@@ -414,7 +425,7 @@ onShareAppMessage(() => {
 	display: grid;
 	grid-template-columns: 1.25fr 1fr 1fr;
 	gap: 14rpx;
-	margin-bottom: 20rpx;
+	margin-bottom: 18rpx;
 	flex-shrink: 0;
 }
 
@@ -471,7 +482,7 @@ onShareAppMessage(() => {
 	align-items: center;
 	justify-content: space-between;
 	gap: 16rpx;
-	margin-bottom: 18rpx;
+	padding-bottom: 16rpx;
 	flex-shrink: 0;
 }
 
@@ -489,12 +500,12 @@ onShareAppMessage(() => {
 }
 
 .scroll-container {
-	flex: 1;
-	height: 0;
+	flex: none;
+	height: calc(100vh - 280rpx);
 	min-height: 0;
 	position: relative;
-	z-index: 0;
-	padding-top: 0;
+	z-index: 1;
+	padding-top: 8rpx;
 	padding-bottom: calc(140rpx + env(safe-area-inset-bottom));
 	box-sizing: border-box;
 }
diff --git a/src/pages/profile/index.vue b/src/pages/profile/index.vue
index 85378e6..532330b 100644
--- a/src/pages/profile/index.vue
+++ b/src/pages/profile/index.vue
@@ -1,6 +1,5 @@
 <template>
 	<view class="page">
-		<canvas canvas-id="achievementPosterCanvas" class="poster-canvas"></canvas>
 		<view class="page-bg"></view>
 		<view class="nav-placeholder" :style="{ height: navBarHeight + 'px' }"></view>
 
@@ -48,8 +47,8 @@
 						<text class="menu-label">生成成就海报</text>
 						<text class="menu-desc">{{ posterDesc }}</text>
 					</view>
-					<button class="share-btn" :disabled="posterSaving" @tap.stop="handleSaveAchievementPoster">
-						{{ posterSaving ? '生成中' : '生成' }}
+					<button class="share-btn" @tap.stop="goAchievementPoster">
+						生成
 					</button>
 				</view>
 
@@ -129,26 +128,22 @@
 </template>
 
 <script setup>
-import { computed, ref, onMounted, getCurrentInstance } from 'vue'
+import { computed, ref, onMounted } from 'vue'
 import { onShareAppMessage, onShow } from '@dcloudio/uni-app'
 import { useProfileStore } from '@/stores/profile'
 import { useUserStore } from '@/stores/user'
 import { useLogin } from '@/hooks/useLogin'
-import { getAchievement, getStats } from '@/api/smoke'
-import { downloadMiniProgramTestCode, updateUserProfile, uploadFile } from '@/api/auth'
+import { getAchievement } from '@/api/smoke'
+import { updateUserProfile, uploadFile } from '@/api/auth'
 import { getLatestNSTIResult } from '@/utils/nsti'
 
 const profileStore = useProfileStore()
 const userStore = useUserStore()
 const { waitForLogin } = useLogin()
-const { proxy } = getCurrentInstance()
-const MEDALLION_IMAGE = '../../static/achievements/theme-medallion.png'
 
 const navBarHeight = ref(0)
 const latestNSTIResult = ref(null)
-const posterSaving = ref(false)
 const achievementData = ref(null)
-const statsData = ref(null)
 
 const userName = computed(() => userStore.user?.nickname || '戒烟用户')
 const userAvatar = computed(() => userStore.user?.avatar_url || 'https://linghu-wmr.oss-cn-beijing.aliyuncs.com/smt/avatar.png')
@@ -164,7 +159,6 @@ const nstiDesc = computed(() => latestNSTIResult.value
 const currentAchievement = computed(() => achievementData.value?.current || null)
 const achievementTitle = computed(() => currentAchievement.value?.name || '戒烟新星')
 const achievementTheme = computed(() => achievementData.value?.theme_name || '少抽成就')
-const achievementIcon = computed(() => achievementData.value?.theme_icon || currentAchievement.value?.icon || '净')
 const achievementScore = computed(() => Number(achievementData.value?.score) || 0)
 const posterDesc = computed(() => {
 	if (!achievementData.value) return '生成你的等级称号、少抽进度和节省成果'
@@ -182,25 +176,10 @@ function setupNavBar() {
 	}
 }
 
-function formatDateTime(value) {
-	const d = new Date(value)
-	if (Number.isNaN(d.getTime())) return ''
-	const y = d.getFullYear()
-	const m = String(d.getMonth() + 1).padStart(2, '0')
-	const day = String(d.getDate()).padStart(2, '0')
-	const hh = String(d.getHours()).padStart(2, '0')
-	const mm = String(d.getMinutes()).padStart(2, '0')
-	return `${y}-${m}-${day} ${hh}:${mm}`
-}
-
 async function fetchPosterData() {
 	try {
-		const [achievementRes, statsRes] = await Promise.all([
-			getAchievement(),
-			getStats({ range: 'month' })
-		])
+		const achievementRes = await getAchievement()
 		achievementData.value = achievementRes.data?.achievement || null
-		statsData.value = statsRes.data || null
 	} catch (e) {
 		console.error('fetchPosterData error:', e)
 	}
@@ -275,6 +254,10 @@ function goSupervisor() {
 	uni.navigateTo({ url: '/pages/supervisor/index' })
 }
 
+function goAchievementPoster() {
+	uni.navigateTo({ url: '/pages/share/index' })
+}
+
 function clearCache() {
 	uni.showModal({
 		title: '清除缓存',
@@ -301,260 +284,6 @@ function copyInfo() {
 	})
 }
 
-function safeNumber(value) {
-	if (value === undefined || value === null || value === '') return 0
-	const num = Number(value)
-	return Number.isNaN(num) ? 0 : num
-}
-
-function moneyYuan(cent) {
-	return (safeNumber(cent) / 100).toFixed(2)
-}
-
-function posterMetrics() {
-	const money = statsData.value?.money || {}
-	const expected = safeNumber(money.expected_total)
-	const actual = safeNumber(money.actual_total)
-	const reduced = Math.max(expected - actual, 0)
-	const metrics = achievementData.value?.metrics || {}
-	const score = achievementScore.value || safeNumber(metrics.score)
-
-	return [
-		{ label: '少抽积分', value: score, unit: '分' },
-		{ label: '本月少抽', value: reduced, unit: '支' },
-		{ label: '节省金额', value: `¥${moneyYuan(money.saved_cent)}`, unit: '' },
-		{ label: '连续记录', value: safeNumber(statsData.value?.streak_days), unit: '天' },
-		{ label: '日均支数', value: safeNumber(statsData.value?.daily_average), unit: '支' },
-		{ label: '本月实际', value: actual, unit: '支' }
-	]
-}
-
-function splitTextLines(ctx, text, maxWidth, maxLines = 2) {
-	if (!text) return []
-	const lines = []
-	let line = ''
-	for (let i = 0; i < text.length; i += 1) {
-		const testLine = line + text[i]
-		if (ctx.measureText(testLine).width > maxWidth && line) {
-			lines.push(line)
-			line = text[i]
-			if (lines.length >= maxLines) break
-			continue
-		}
-		line = testLine
-	}
-	if (lines.length < maxLines && line) lines.push(line)
-	if (lines.length === maxLines) {
-		const lastIndex = lines.length - 1
-		let lastLine = lines[lastIndex]
-		while (ctx.measureText(`${lastLine}...`).width > maxWidth && lastLine.length > 1) {
-			lastLine = lastLine.slice(0, -1)
-		}
-		lines[lastIndex] = lastLine.length < lines[lastIndex].length ? `${lastLine}...` : lastLine
-	}
-	return lines
-}
-
-function drawTextLines(ctx, lines, x, startY, lineHeight) {
-	let y = startY
-	lines.forEach((line) => {
-		ctx.fillText(line, x, y)
-		y += lineHeight
-	})
-	return y
-}
-
-function roundRect(ctx, x, y, width, height, radius, fillStyle) {
-	ctx.save()
-	ctx.beginPath()
-	ctx.setFillStyle(fillStyle)
-	ctx.moveTo(x + radius, y)
-	ctx.lineTo(x + width - radius, y)
-	ctx.quadraticCurveTo(x + width, y, x + width, y + radius)
-	ctx.lineTo(x + width, y + height - radius)
-	ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height)
-	ctx.lineTo(x + radius, y + height)
-	ctx.quadraticCurveTo(x, y + height, x, y + height - radius)
-	ctx.lineTo(x, y + radius)
-	ctx.quadraticCurveTo(x, y, x + radius, y)
-	ctx.closePath()
-	ctx.fill()
-	ctx.restore()
-}
-
-function getImageInfo(src) {
-	return new Promise((resolve) => {
-		if (!src) {
-			resolve(null)
-			return
-		}
-		uni.getImageInfo({
-			src,
-			success: resolve,
-			fail: () => resolve(null)
-		})
-	})
-}
-
-function drawAchievementPoster(qrPath = '', medallionInfo = null) {
-	return new Promise((resolve, reject) => {
-		const canvasId = 'achievementPosterCanvas'
-		const ctx = uni.createCanvasContext(canvasId, proxy)
-		const width = 750
-		const height = 1334
-		const cardX = 36
-		const cardY = 42
-		const cardW = 678
-
-		ctx.setFillStyle('#EEF4F1')
-		ctx.fillRect(0, 0, width, height)
-		roundRect(ctx, cardX, cardY, cardW, 1250, 36, '#FFFFFF')
-		roundRect(ctx, 64, 72, 622, 410, 32, '#0F766E')
-		roundRect(ctx, 84, 94, 582, 370, 28, 'rgba(255,255,255,0.12)')
-
-		ctx.setFillStyle('rgba(255,255,255,0.82)')
-		ctx.setFontSize(24)
-		ctx.fillText('戒烟助手 · 成就海报', 108, 138)
-
-		if (medallionInfo?.path) {
-			ctx.drawImage(medallionInfo.path, 108, 170, 150, 150)
-		} else {
-			ctx.setFillStyle('rgba(255,255,255,0.2)')
-			ctx.beginPath()
-			ctx.arc(183, 245, 75, 0, Math.PI * 2)
-			ctx.fill()
-		}
-		ctx.setFillStyle('#FFFFFF')
-		ctx.setFontSize(64)
-		ctx.fillText(achievementIcon.value, 154, 270)
-
-		ctx.setFillStyle('#FFFFFF')
-		ctx.setFontSize(46)
-		ctx.fillText(achievementTitle.value, 286, 222)
-		ctx.setFontSize(24)
-		ctx.setFillStyle('rgba(255,255,255,0.86)')
-		drawTextLines(ctx, splitTextLines(ctx, `${userName.value} 正在解锁「${achievementTheme.value}」`, 340, 2), 286, 266, 34)
-
-		const progress = Math.round((safeNumber(achievementData.value?.progress) || 0) * 100)
-		roundRect(ctx, 108, 354, 500, 18, 9, 'rgba(255,255,255,0.22)')
-		roundRect(ctx, 108, 354, Math.max(18, Math.min(500, progress * 5)), 18, 9, '#FBBF24')
-		ctx.setFillStyle('rgba(255,255,255,0.86)')
-		ctx.setFontSize(22)
-		const nextName = achievementData.value?.next?.name
-		ctx.fillText(nextName ? `距下一称号：${nextName}` : '已达成当前最高称号', 108, 410)
-
-		const metrics = posterMetrics()
-		const gridX = 64
-		const gridY = 524
-		const itemW = 296
-		const itemH = 126
-		metrics.forEach((item, index) => {
-			const col = index % 2
-			const row = Math.floor(index / 2)
-			const x = gridX + col * 326
-			const y = gridY + row * 150
-			roundRect(ctx, x, y, itemW, itemH, 24, index === 0 ? '#ECFDF5' : '#F8FAFC')
-			ctx.setFillStyle('#64748B')
-			ctx.setFontSize(22)
-			ctx.fillText(item.label, x + 28, y + 40)
-			ctx.setFillStyle('#0F172A')
-			ctx.setFontSize(38)
-			ctx.fillText(String(item.value), x + 28, y + 92)
-			if (item.unit) {
-				ctx.setFillStyle('#64748B')
-				ctx.setFontSize(20)
-				ctx.fillText(item.unit, x + 28 + ctx.measureText(String(item.value)).width + 8, y + 92)
-			}
-		})
-
-		roundRect(ctx, 64, 1000, 622, 164, 28, '#FFF7ED')
-		ctx.setFillStyle('#9A3412')
-		ctx.setFontSize(28)
-		ctx.fillText('今天的小进步', 100, 1056)
-		ctx.setFillStyle('#475569')
-		ctx.setFontSize(24)
-		const note = achievementScore.value > 0
-			? `每一次少抽都会计入积分。现在是 ${achievementScore.value} 分，继续记录就能升级称号。`
-			: '开始记录后，系统会根据少抽表现生成积分和称号。'
-		drawTextLines(ctx, splitTextLines(ctx, note, 520, 2), 100, 1102, 34)
-
-		if (qrPath) {
-			roundRect(ctx, 498, 1190, 138, 138, 18, '#F8FAFC')
-			ctx.drawImage(qrPath, 509, 1201, 116, 116)
-		}
-		ctx.setFillStyle('#64748B')
-		ctx.setFontSize(24)
-		ctx.fillText('扫码一起开始少抽计划', 96, 1238)
-		ctx.setFillStyle('#94A3B8')
-		ctx.setFontSize(20)
-		ctx.fillText(`生成于 ${formatDateTime(new Date())}`, 96, 1278)
-
-		ctx.draw(false, () => {
-			setTimeout(() => {
-				uni.canvasToTempFilePath(
-					{
-						canvasId,
-						x: 0,
-						y: 0,
-						width,
-						height,
-						destWidth: width,
-						destHeight: height,
-						fileType: 'png',
-						quality: 1,
-						success: (res) => resolve(res.tempFilePath),
-						fail: reject
-					},
-					proxy
-				)
-			}, 180)
-		})
-	})
-}
-
-function savePosterToAlbum(filePath) {
-	return new Promise((resolve, reject) => {
-		uni.saveImageToPhotosAlbum({
-			filePath,
-			success: resolve,
-			fail: reject
-		})
-	})
-}
-
-async function handleSaveAchievementPoster() {
-	if (posterSaving.value) return
-	posterSaving.value = true
-	uni.showLoading({ title: '生成海报中...', mask: true })
-	try {
-		await fetchPosterData()
-		const [qrPath, medallionInfo] = await Promise.all([
-			downloadMiniProgramTestCode({ path: 'pages/index/index', width: 240 }).catch(() => ''),
-			getImageInfo(MEDALLION_IMAGE)
-		])
-		const posterPath = await drawAchievementPoster(qrPath, medallionInfo)
-		await savePosterToAlbum(posterPath)
-		uni.showToast({ title: '海报已保存', icon: 'success' })
-	} catch (error) {
-		console.error('achievement poster error:', error)
-		const message = error?.errMsg || error?.message || ''
-		if (message.includes('auth deny') || message.includes('authorize')) {
-			uni.showModal({
-				title: '需要相册权限',
-				content: '请允许保存到相册，这样才能保存成就海报。',
-				success: (res) => {
-					if (res.confirm) uni.openSetting()
-				}
-			})
-		} else {
-			uni.showToast({ title: '海报生成失败', icon: 'none' })
-		}
-	} finally {
-		uni.hideLoading()
-		posterSaving.value = false
-	}
-}
-
 onShareAppMessage(() => {
 	return {
 		title: `${userName.value}正在解锁「${achievementTitle.value}」`,
@@ -583,15 +312,6 @@ onShow(async () => {
 	box-sizing: border-box;
 }
 
-.poster-canvas {
-	position: fixed;
-	left: -9999px;
-	top: -9999px;
-	width: 750px;
-	height: 1334px;
-	pointer-events: none;
-}
-
 .page-bg {
 	position: absolute;
 	top: 0;
diff --git a/src/pages/share/index.vue b/src/pages/share/index.vue
index efffd90..f08b03e 100644
--- a/src/pages/share/index.vue
+++ b/src/pages/share/index.vue
@@ -1,597 +1,666 @@
 <template>
 	<view class="page">
-		<view v-if="loading" class="state-wrap">
-			<text class="state-text">加载分享数据中...</text>
+		<canvas canvas-id="achievementPosterCanvas" class="poster-canvas"></canvas>
+
+		<view class="hero">
+			<text class="hero-kicker">成就海报</text>
+			<text class="hero-title">{{ achievementTitle }}</text>
+			<text class="hero-desc">{{ posterSubtitle }}</text>
 		</view>
 
-		<view v-else-if="errorText" class="state-wrap">
-			<text class="state-text">{{ errorText }}</text>
-			<button class="retry-btn" @tap="reload">重新加载</button>
-		</view>
-
-		<view v-else>
-			<view class="owner-card">
-				<image class="avatar" :src="owner.avatar_url || defaultAvatar" mode="aspectFill"></image>
-				<view class="owner-main">
-					<text class="owner-name">{{ owner.nickname || '戒烟用户' }}</text>
-					<text class="owner-desc">分享了自己的戒烟记录（只读）</text>
-				</view>
-			</view>
-
-			<view class="overview-grid">
-				<view class="overview-item">
-					<text class="overview-label">今日吸烟</text>
-					<text class="overview-value">{{ overview.today_count || 0 }}</text>
-				</view>
-				<view class="overview-item">
-					<text class="overview-label">今日忍住</text>
-					<text class="overview-value">{{ overview.resisted_count || 0 }}</text>
-				</view>
-				<view class="overview-item">
-					<text class="overview-label">连续记录</text>
-					<text class="overview-value">{{ overview.streak_days || 0 }}天</text>
-				</view>
-				<view class="overview-item">
-					<text class="overview-label">较昨日变化</text>
-					<text class="overview-value" :class="overview.exceeded_yesterday ? 'warning' : 'success'">
-						{{ overview.exceeded_yesterday ? '+' : '-' }}{{ overview.reduced_from_yesterday || 0 }}
-					</text>
-				</view>
-			</view>
-
-			<view class="section">
-				<view class="section-header">
-					<text class="section-title">统计报表</text>
-					<view class="range-tabs">
-						<view
-							v-for="item in rangeTabs"
-							:key="item.value"
-							class="range-item"
-							:class="{ active: range === item.value }"
-							@tap="switchRange(item.value)"
-						>
-							{{ item.label }}
-						</view>
-					</view>
-				</view>
-
-				<view class="stats-row">
-					<view class="stats-block">
-						<text class="stats-key">日均支数</text>
-						<text class="stats-val">{{ stats.daily_average || 0 }}</text>
-					</view>
-					<view class="stats-block">
-						<text class="stats-key">变化幅度</text>
-						<text class="stats-val">{{ stats.change_percent || 0 }}%</text>
-					</view>
-					<view class="stats-block">
-						<text class="stats-key">范围忍住</text>
-						<text class="stats-val">{{ stats.resisted_total || 0 }}</text>
-					</view>
-				</view>
-
-				<view class="trend-wrap">
-					<view v-for="(item, index) in stats.trend || []" :key="index" class="trend-item">
-						<text class="trend-label">{{ item.label }}</text>
-						<view class="trend-bar-bg">
-							<view class="trend-bar" :style="{ width: trendWidth(item.count) + '%' }"></view>
-						</view>
-						<text class="trend-count">{{ item.count }}</text>
-					</view>
-				</view>
-			</view>
-
-			<view class="section">
-				<view class="section-header">
-					<text class="section-title">记录详情（只读）</text>
-					<view class="range-tabs">
-						<view
-							v-for="item in logTypeTabs"
-							:key="item.value"
-							class="range-item"
-							:class="{ active: logType === item.value }"
-							@tap="switchLogType(item.value)"
-						>
-							{{ item.label }}
-						</view>
-					</view>
-				</view>
-
-				<view v-if="logs.length === 0" class="empty-box">
-					<text class="empty-text">暂无记录</text>
-				</view>
-				<view v-else class="log-list">
-					<view v-for="item in logs" :key="item.id" class="log-item" @tap="showDetail(item)">
-						<view class="log-top">
-							<text class="log-time">{{ displayTime(item) }}</text>
-							<text class="log-type" :class="resolveType(item) === 'resisted' ? 'resisted' : 'smoke'">
-								{{ resolveType(item) === 'resisted' ? '已忍住' : '已抽烟' }}
-							</text>
-						</view>
-						<view class="log-meta">
-							<text>数量：{{ item.num ?? 0 }}</text>
-							<text>强度：{{ levelLabel(item.level) }}</text>
-						</view>
-						<text class="log-remark">{{ (item.remark && String(item.remark).trim()) || '无备注' }}</text>
-					</view>
-				</view>
-
-				<button
-					v-if="logs.length < total"
-					class="load-more"
-					:disabled="loadingMore"
-					@tap="loadMore"
+		<view class="style-section">
+			<text class="section-title">选择风格</text>
+			<view class="style-grid">
+				<view
+					v-for="item in posterStyles"
+					:key="item.value"
+					class="style-card"
+					:class="{ 'style-card-active': currentStyle === item.value }"
+					@tap="currentStyle = item.value"
 				>
-					{{ loadingMore ? '加载中...' : '加载更多' }}
-				</button>
+					<view class="style-preview" :style="{ background: item.preview }">
+						<text class="style-preview-icon">{{ item.icon }}</text>
+					</view>
+					<text class="style-name">{{ item.label }}</text>
+					<text class="style-desc">{{ item.desc }}</text>
+				</view>
 			</view>
 		</view>
+
+		<view class="poster-preview" :class="`poster-preview-${currentStyle}`">
+			<view class="preview-medal">
+				<text class="preview-icon">{{ achievementIcon }}</text>
+			</view>
+			<view class="preview-copy">
+				<text class="preview-theme">{{ achievementTheme }}</text>
+				<text class="preview-title">{{ achievementTitle }}</text>
+				<text class="preview-score">积分 {{ achievementScore }}</text>
+			</view>
+		</view>
+
+		<view class="metric-grid">
+			<view v-for="item in metricCards" :key="item.label" class="metric-card">
+				<text class="metric-label">{{ item.label }}</text>
+				<view class="metric-value-row">
+					<text class="metric-value">{{ item.value }}</text>
+					<text v-if="item.unit" class="metric-unit">{{ item.unit }}</text>
+				</view>
+			</view>
+		</view>
+
+		<button class="generate-btn" :disabled="posterSaving || loading" @tap="handleSavePoster">
+			{{ posterSaving ? '生成中...' : '生成并保存海报' }}
+		</button>
+
+		<view class="bottom-safe"></view>
 	</view>
 </template>
 
 <script setup>
-import { computed, ref } from 'vue'
-import { onLoad, onShareAppMessage } from '@dcloudio/uni-app'
-import { getShareData } from '@/api'
+import { computed, getCurrentInstance, onMounted, ref } from 'vue'
+import { onShareAppMessage } from '@dcloudio/uni-app'
+import { getAchievement, getStats } from '@/api/smoke'
+import { downloadMiniProgramTestCode } from '@/api/auth'
+import { useLogin } from '@/hooks/useLogin'
+import { useUserStore } from '@/stores/user'
 
-const defaultAvatar = 'https://linghu-wmr.oss-cn-beijing.aliyuncs.com/smt/avatar.png'
+const { waitForLogin } = useLogin()
+const userStore = useUserStore()
+const { proxy } = getCurrentInstance()
 
-const loading = ref(true)
-const loadingMore = ref(false)
-const errorText = ref('')
+const loading = ref(false)
+const posterSaving = ref(false)
+const currentStyle = ref('fresh')
+const achievementData = ref(null)
+const statsData = ref(null)
 
-const shareToken = ref('')
-const range = ref('week')
-const logType = ref('all')
-
-const owner = ref({})
-const overview = ref({})
-const stats = ref({})
-const logs = ref([])
-
-const page = ref(1)
-const pageSize = ref(20)
-const total = ref(0)
-
-const rangeTabs = [
-	{ label: '周', value: 'week' },
-	{ label: '月', value: 'month' },
-	{ label: '年', value: 'year' }
+const posterStyles = [
+	{
+		label: '清新进阶',
+		value: 'fresh',
+		icon: '净',
+		desc: '轻盈、干净，适合日常分享',
+		preview: 'linear-gradient(135deg, #ECFDF5 0%, #E0F2FE 100%)'
+	},
+	{
+		label: '金色勋章',
+		value: 'medal',
+		icon: '奖',
+		desc: '更像成就证书，突出称号',
+		preview: 'linear-gradient(135deg, #FFF7ED 0%, #FEF3C7 100%)'
+	},
+	{
+		label: '深色能量',
+		value: 'night',
+		icon: '燃',
+		desc: '对比强，适合展示战绩',
+		preview: 'linear-gradient(135deg, #0F172A 0%, #115E59 100%)'
+	}
 ]
 
-const logTypeTabs = [
-	{ label: '全部', value: 'all' },
-	{ label: '已抽烟', value: 'smoke' },
-	{ label: '已忍住', value: 'resisted' }
-]
+const userName = computed(() => userStore.user?.nickname || '戒烟用户')
+const currentAchievement = computed(() => achievementData.value?.current || null)
+const achievementTitle = computed(() => currentAchievement.value?.name || '戒烟新星')
+const achievementTheme = computed(() => achievementData.value?.theme_name || '少抽成就')
+const achievementIcon = computed(() => achievementData.value?.theme_icon || currentAchievement.value?.icon || '净')
+const achievementScore = computed(() => Number(achievementData.value?.score) || 0)
+const posterSubtitle = computed(() => `${userName.value} 正在解锁「${achievementTheme.value}」`)
 
-const maxTrend = computed(() => {
-	const values = (stats.value?.trend || []).map((item) => Number(item.count) || 0)
-	const max = Math.max(...values, 0)
-	return max <= 0 ? 1 : max
+const metricCards = computed(() => {
+	const money = statsData.value?.money || {}
+	const expected = safeNumber(money.expected_total)
+	const actual = safeNumber(money.actual_total)
+	const reduced = Math.max(expected - actual, 0)
+	return [
+		{ label: '少抽积分', value: achievementScore.value, unit: '分' },
+		{ label: '本月少抽', value: reduced, unit: '支' },
+		{ label: '节省金额', value: `¥${moneyYuan(money.saved_cent)}`, unit: '' },
+		{ label: '连续记录', value: safeNumber(statsData.value?.streak_days), unit: '天' }
+	]
 })
 
-function trendWidth(count) {
-	const n = Number(count) || 0
-	return Math.max(8, Math.round((n / maxTrend.value) * 100))
+function safeNumber(value) {
+	if (value === undefined || value === null || value === '') return 0
+	const num = Number(value)
+	return Number.isNaN(num) ? 0 : num
 }
 
-function resolveType(item) {
-	if ((item?.level || 0) === 0 && (item?.num || 0) === 0) {
-		return 'resisted'
-	}
-	return 'smoke'
+function moneyYuan(cent) {
+	return (safeNumber(cent) / 100).toFixed(2)
 }
 
-function levelLabel(level) {
-	const value = Number(level)
-	if (Number.isNaN(value)) return '未知'
-	if (value <= 1) return '轻微'
-	if (value === 2) return '中等'
-	if (value === 3) return '明显'
-	if (value === 4) return '强烈'
-	return '极强'
+function formatDateTime(value) {
+	const d = new Date(value)
+	if (Number.isNaN(d.getTime())) return ''
+	const y = d.getFullYear()
+	const m = String(d.getMonth() + 1).padStart(2, '0')
+	const day = String(d.getDate()).padStart(2, '0')
+	const hh = String(d.getHours()).padStart(2, '0')
+	const mm = String(d.getMinutes()).padStart(2, '0')
+	return `${y}-${m}-${day} ${hh}:${mm}`
 }
 
-function displayTime(item) {
-	if (item?.smoke_at) {
-		return String(item.smoke_at).replace('T', ' ').slice(0, 19)
-	}
-	if (item?.smoke_time) {
-		return String(item.smoke_time).slice(0, 10)
-	}
-	if (item?.createtime) {
-		const ts = Number(item.createtime)
-		if (!Number.isNaN(ts) && ts > 0) {
-			const d = new Date(ts * 1000)
-			const y = d.getFullYear()
-			const m = String(d.getMonth() + 1).padStart(2, '0')
-			const day = String(d.getDate()).padStart(2, '0')
-			const h = String(d.getHours()).padStart(2, '0')
-			const mm = String(d.getMinutes()).padStart(2, '0')
-			const s = String(d.getSeconds()).padStart(2, '0')
-			return `${y}-${m}-${day} ${h}:${mm}:${s}`
-		}
-	}
-	return '--'
-}
-
-async function fetchShare(resetLogs = false) {
-	if (!shareToken.value) {
-		errorText.value = '分享参数缺失'
-		loading.value = false
-		return
-	}
-
-	if (resetLogs) {
-		page.value = 1
-		logs.value = []
-	}
-
-	const params = {
-		range: range.value,
-		type: logType.value,
-		page: page.value,
-		page_size: pageSize.value
-	}
-
+async function fetchPosterData() {
+	loading.value = true
 	try {
-		const res = await getShareData(shareToken.value, params)
-		const payload = res.data || {}
-		owner.value = payload.owner || {}
-		overview.value = payload.overview || {}
-		stats.value = payload.stats || {}
-
-		const logPayload = payload.logs || {}
-		const items = logPayload.items || []
-		if (resetLogs) {
-			logs.value = items
-		} else {
-			logs.value = [...logs.value, ...items]
-		}
-		total.value = Number(logPayload.total || 0)
-		page.value = Number(logPayload.page || page.value)
+		await waitForLogin()
+		const [achievementRes, statsRes] = await Promise.all([
+			getAchievement(),
+			getStats({ range: 'month' })
+		])
+		achievementData.value = achievementRes.data?.achievement || null
+		statsData.value = statsRes.data || null
 	} catch (e) {
-		console.error('fetchShare error:', e)
-		errorText.value = e?.message || '分享已失效或不可访问'
+		console.error('fetchPosterData error:', e)
+		uni.showToast({ title: '加载数据失败', icon: 'none' })
 	} finally {
 		loading.value = false
-		loadingMore.value = false
 	}
 }
 
-async function switchRange(next) {
-	if (range.value === next) return
-	range.value = next
-	loading.value = true
-	errorText.value = ''
-	await fetchShare(true)
+function roundRect(ctx, x, y, width, height, radius, fillStyle) {
+	ctx.save()
+	ctx.beginPath()
+	ctx.setFillStyle(fillStyle)
+	ctx.moveTo(x + radius, y)
+	ctx.lineTo(x + width - radius, y)
+	ctx.quadraticCurveTo(x + width, y, x + width, y + radius)
+	ctx.lineTo(x + width, y + height - radius)
+	ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height)
+	ctx.lineTo(x + radius, y + height)
+	ctx.quadraticCurveTo(x, y + height, x, y + height - radius)
+	ctx.lineTo(x, y + radius)
+	ctx.quadraticCurveTo(x, y, x + radius, y)
+	ctx.closePath()
+	ctx.fill()
+	ctx.restore()
 }
 
-async function switchLogType(next) {
-	if (logType.value === next) return
-	logType.value = next
-	loading.value = true
-	errorText.value = ''
-	await fetchShare(true)
+function splitTextLines(ctx, text, maxWidth, maxLines = 2) {
+	if (!text) return []
+	const lines = []
+	let line = ''
+	for (let i = 0; i < text.length; i += 1) {
+		const testLine = line + text[i]
+		if (ctx.measureText(testLine).width > maxWidth && line) {
+			lines.push(line)
+			line = text[i]
+			if (lines.length >= maxLines) break
+			continue
+		}
+		line = testLine
+	}
+	if (lines.length < maxLines && line) lines.push(line)
+	return lines.slice(0, maxLines)
 }
 
-async function loadMore() {
-	if (loadingMore.value || logs.value.length >= total.value) return
-	loadingMore.value = true
-	page.value += 1
-	await fetchShare(false)
+function drawTextLines(ctx, lines, x, startY, lineHeight) {
+	let y = startY
+	lines.forEach(line => {
+		ctx.fillText(line, x, y)
+		y += lineHeight
+	})
+	return y
 }
 
-function showDetail(item) {
-	uni.showModal({
-		title: '记录详情',
-		showCancel: false,
-		content: [
-			`时间：${displayTime(item)}`,
-			`类型：${resolveType(item) === 'resisted' ? '已忍住' : '已抽烟'}`,
-			`数量：${item.num ?? 0}`,
-			`强度：${levelLabel(item.level)}`,
-			`备注：${(item.remark && String(item.remark).trim()) || '无备注'}`
-		].join('\n')
+function getPalette(style) {
+	if (style === 'medal') {
+		return {
+			bg: '#FFF7ED',
+			card: '#FFFFFF',
+			hero: '#B45309',
+			hero2: '#F59E0B',
+			accent: '#FBBF24',
+			text: '#1F2937',
+			muted: '#92400E',
+			soft: '#FEF3C7'
+		}
+	}
+	if (style === 'night') {
+		return {
+			bg: '#0F172A',
+			card: '#111827',
+			hero: '#134E4A',
+			hero2: '#0EA5E9',
+			accent: '#67E8F9',
+			text: '#F8FAFC',
+			muted: '#CBD5E1',
+			soft: '#1E293B'
+		}
+	}
+	return {
+		bg: '#EEF4F1',
+		card: '#FFFFFF',
+		hero: '#0F766E',
+		hero2: '#06B6D4',
+		accent: '#34D399',
+		text: '#0F172A',
+		muted: '#64748B',
+		soft: '#ECFDF5'
+	}
+}
+
+function drawMedal(ctx, x, y, size, palette) {
+	const center = x + size / 2
+	ctx.setFillStyle(palette.accent)
+	ctx.beginPath()
+	ctx.arc(center, y + size / 2, size / 2, 0, Math.PI * 2)
+	ctx.fill()
+	ctx.setFillStyle('rgba(255,255,255,0.34)')
+	ctx.beginPath()
+	ctx.arc(center, y + size / 2, size / 2 - 14, 0, Math.PI * 2)
+	ctx.fill()
+	ctx.setFillStyle(palette.hero)
+	ctx.beginPath()
+	ctx.arc(center, y + size / 2, size / 2 - 28, 0, Math.PI * 2)
+	ctx.fill()
+	ctx.setFillStyle('#FFFFFF')
+	ctx.setFontSize(62)
+	ctx.fillText(achievementIcon.value, center - 31, y + size / 2 + 22)
+}
+
+function drawPoster(qrPath = '') {
+	return new Promise((resolve, reject) => {
+		const canvasId = 'achievementPosterCanvas'
+		const ctx = uni.createCanvasContext(canvasId, proxy)
+		const width = 750
+		const height = 1334
+		const palette = getPalette(currentStyle.value)
+		const money = statsData.value?.money || {}
+		const expected = safeNumber(money.expected_total)
+		const actual = safeNumber(money.actual_total)
+		const reduced = Math.max(expected - actual, 0)
+		const progress = Math.round(safeNumber(achievementData.value?.progress) * 100)
+		const nextName = achievementData.value?.next?.name
+
+		ctx.setFillStyle(palette.bg)
+		ctx.fillRect(0, 0, width, height)
+		roundRect(ctx, 36, 40, 678, 1254, 36, palette.card)
+		roundRect(ctx, 64, 70, 622, 430, 34, palette.hero)
+		roundRect(ctx, 64, 70, 622, 430, 34, currentStyle.value === 'night' ? 'rgba(14,165,233,0.14)' : 'rgba(255,255,255,0.08)')
+
+		ctx.setFillStyle('rgba(255,255,255,0.86)')
+		ctx.setFontSize(24)
+		ctx.fillText('戒烟助手 · 成就海报', 104, 132)
+		drawMedal(ctx, 104, 166, 156, palette)
+
+		ctx.setFillStyle('#FFFFFF')
+		ctx.setFontSize(48)
+		ctx.fillText(achievementTitle.value, 292, 220)
+		ctx.setFontSize(24)
+		drawTextLines(ctx, splitTextLines(ctx, `${userName.value} 正在解锁「${achievementTheme.value}」`, 340, 2), 292, 266, 34)
+
+		roundRect(ctx, 104, 374, 500, 18, 9, 'rgba(255,255,255,0.22)')
+		roundRect(ctx, 104, 374, Math.max(18, Math.min(500, progress * 5)), 18, 9, palette.accent)
+		ctx.setFillStyle('rgba(255,255,255,0.9)')
+		ctx.setFontSize(22)
+		ctx.fillText(nextName ? `距下一称号：${nextName}` : '已达成当前最高称号', 104, 430)
+
+		const metrics = [
+			{ label: '少抽积分', value: achievementScore.value, unit: '分' },
+			{ label: '本月少抽', value: reduced, unit: '支' },
+			{ label: '节省金额', value: `¥${moneyYuan(money.saved_cent)}`, unit: '' },
+			{ label: '连续记录', value: safeNumber(statsData.value?.streak_days), unit: '天' },
+			{ label: '日均支数', value: safeNumber(statsData.value?.daily_average), unit: '支' },
+			{ label: '本月实际', value: actual, unit: '支' }
+		]
+
+		metrics.forEach((item, index) => {
+			const col = index % 2
+			const row = Math.floor(index / 2)
+			const x = 64 + col * 326
+			const y = 548 + row * 148
+			roundRect(ctx, x, y, 296, 124, 24, currentStyle.value === 'night' ? '#1E293B' : palette.soft)
+			ctx.setFillStyle(palette.muted)
+			ctx.setFontSize(22)
+			ctx.fillText(item.label, x + 28, y + 40)
+			ctx.setFillStyle(palette.text)
+			ctx.setFontSize(38)
+			ctx.fillText(String(item.value), x + 28, y + 92)
+			if (item.unit) {
+				ctx.setFontSize(20)
+				ctx.fillText(item.unit, x + 28 + ctx.measureText(String(item.value)).width + 8, y + 92)
+			}
+		})
+
+		roundRect(ctx, 64, 1016, 622, 154, 28, currentStyle.value === 'night' ? '#1E293B' : '#FFF7ED')
+		ctx.setFillStyle(currentStyle.value === 'night' ? '#67E8F9' : '#9A3412')
+		ctx.setFontSize(28)
+		ctx.fillText('今天的小进步', 100, 1070)
+		ctx.setFillStyle(palette.muted)
+		ctx.setFontSize(24)
+		const note = achievementScore.value > 0
+			? `每一次少抽都会计入积分。现在是 ${achievementScore.value} 分，继续记录就能升级称号。`
+			: '开始记录后，系统会根据少抽表现生成积分和称号。'
+		drawTextLines(ctx, splitTextLines(ctx, note, 520, 2), 100, 1116, 34)
+
+		if (qrPath) {
+			roundRect(ctx, 500, 1190, 136, 136, 18, currentStyle.value === 'night' ? '#FFFFFF' : '#F8FAFC')
+			ctx.drawImage(qrPath, 511, 1201, 114, 114)
+		}
+		ctx.setFillStyle(palette.muted)
+		ctx.setFontSize(23)
+		ctx.fillText('扫码一起开始少抽计划', 96, 1238)
+		ctx.setFontSize(20)
+		ctx.fillText(`生成于 ${formatDateTime(new Date())}`, 96, 1278)
+
+		ctx.draw(false, () => {
+			setTimeout(() => {
+				uni.canvasToTempFilePath(
+					{
+						canvasId,
+						x: 0,
+						y: 0,
+						width,
+						height,
+						destWidth: width,
+						destHeight: height,
+						fileType: 'png',
+						quality: 1,
+						success: res => resolve(res.tempFilePath),
+						fail: reject
+					},
+					proxy
+				)
+			}, 180)
+		})
 	})
 }
 
-async function reload() {
-	loading.value = true
-	errorText.value = ''
-	await fetchShare(true)
+function savePosterToAlbum(filePath) {
+	return new Promise((resolve, reject) => {
+		uni.saveImageToPhotosAlbum({
+			filePath,
+			success: resolve,
+			fail: reject
+		})
+	})
 }
 
-onLoad(async (options) => {
-	shareToken.value = String(options?.share_token || '').trim()
-	await fetchShare(true)
+async function handleSavePoster() {
+	if (posterSaving.value) return
+	posterSaving.value = true
+	uni.showLoading({ title: '生成海报中...', mask: true })
+	try {
+		if (!achievementData.value || !statsData.value) {
+			await fetchPosterData()
+		}
+		const qrPath = await downloadMiniProgramTestCode({ path: 'pages/index/index', width: 240 }).catch(() => '')
+		const posterPath = await drawPoster(qrPath)
+		await savePosterToAlbum(posterPath)
+		uni.showToast({ title: '海报已保存', icon: 'success' })
+	} catch (error) {
+		console.error('save poster error:', error)
+		const message = error?.errMsg || error?.message || ''
+		if (message.includes('auth deny') || message.includes('authorize')) {
+			uni.showModal({
+				title: '需要相册权限',
+				content: '请允许保存到相册，这样才能保存成就海报。',
+				success: res => {
+					if (res.confirm) uni.openSetting()
+				}
+			})
+		} else {
+			uni.showToast({ title: '海报生成失败', icon: 'none' })
+		}
+	} finally {
+		uni.hideLoading()
+		posterSaving.value = false
+	}
+}
+
+onMounted(() => {
+	fetchPosterData()
 })
 
-onShareAppMessage(() => {
-	return {
-		title: '戒烟助手 - 查看我的戒烟记录',
-		path: shareToken.value
-			? `pages/share/index?share_token=${shareToken.value}`
-			: 'pages/index/index'
-	}
-})
+onShareAppMessage(() => ({
+	title: `${userName.value}正在解锁「${achievementTitle.value}」`,
+	path: 'pages/share/index'
+}))
 </script>
 
 <style scoped>
 .page {
 	min-height: 100vh;
-	padding: 24rpx;
+	padding: 28rpx 28rpx 48rpx;
 	box-sizing: border-box;
-	background:
-		radial-gradient(circle at top left, rgba(52, 200, 160, 0.14), transparent 28%),
-		linear-gradient(180deg, #edf2f8 0%, #f5f7fb 38%, #fbfdff 100%);
+	background: linear-gradient(180deg, #F6F8F6 0%, #EFF4F1 52%, #E9F0EC 100%);
 }
 
-.state-wrap {
-	padding: 120rpx 40rpx;
-	text-align: center;
+.poster-canvas {
+	position: fixed;
+	left: -9999px;
+	top: -9999px;
+	width: 750px;
+	height: 1334px;
+	pointer-events: none;
 }
 
-.state-text {
-	font-size: 28rpx;
-	color: #6b7280;
+.hero {
+	padding: 28rpx 4rpx 24rpx;
 }
 
-.retry-btn {
-	margin-top: 24rpx;
-	font-size: 26rpx;
-	background: linear-gradient(180deg, #32c59d 0%, #1aa37a 100%);
-	color: #fff;
-	border: none;
-	border-radius: 16rpx;
-}
-
-.owner-card {
-	display: flex;
-	align-items: center;
-	gap: 20rpx;
-	padding: 24rpx;
-	background: rgba(255, 255, 255, 0.82);
-	border-radius: 28rpx;
-	border: 2rpx solid rgba(255, 255, 255, 0.68);
-	box-shadow: 0 16rpx 36rpx rgba(15, 23, 42, 0.06);
-	backdrop-filter: blur(24rpx);
-	-webkit-backdrop-filter: blur(24rpx);
-}
-
-.avatar {
-	width: 90rpx;
-	height: 90rpx;
-	border-radius: 50%;
-	background: #e5e7eb;
-}
-
-.owner-main {
-	display: flex;
-	flex-direction: column;
-	gap: 6rpx;
-}
-
-.owner-name {
-	font-size: 32rpx;
-	font-weight: 700;
-	color: #111827;
-}
-
-.owner-desc {
-	font-size: 24rpx;
-	color: #6b7280;
-}
-
-.overview-grid {
-	margin-top: 20rpx;
-	display: grid;
-	grid-template-columns: repeat(2, 1fr);
-	gap: 16rpx;
-}
-
-.overview-item {
-	padding: 20rpx;
-	background: rgba(255, 255, 255, 0.82);
-	border-radius: 24rpx;
-	border: 2rpx solid rgba(255, 255, 255, 0.68);
-	box-shadow: 0 12rpx 28rpx rgba(15, 23, 42, 0.05);
-}
-
-.overview-label {
-	font-size: 22rpx;
-	color: #6b7280;
-}
-
-.overview-value {
-	margin-top: 10rpx;
+.hero-kicker {
 	display: block;
-	font-size: 34rpx;
-	font-weight: 700;
-	color: #111827;
+	font-size: 22rpx;
+	font-weight: 800;
+	color: #0F766E;
 }
 
-.overview-value.success {
-	color: #10b981;
+.hero-title {
+	display: block;
+	margin-top: 8rpx;
+	font-size: 46rpx;
+	font-weight: 900;
+	color: #0F172A;
 }
 
-.overview-value.warning {
-	color: #ef4444;
+.hero-desc {
+	display: block;
+	margin-top: 8rpx;
+	font-size: 24rpx;
+	line-height: 1.5;
+	color: #64748B;
 }
 
-.section {
-	margin-top: 20rpx;
-	padding: 20rpx;
-	background: rgba(255, 255, 255, 0.82);
-	border-radius: 28rpx;
-	border: 2rpx solid rgba(255, 255, 255, 0.68);
-	box-shadow: 0 16rpx 36rpx rgba(15, 23, 42, 0.06);
-	backdrop-filter: blur(24rpx);
-	-webkit-backdrop-filter: blur(24rpx);
-}
-
-.section-header {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	gap: 12rpx;
+.style-section {
+	margin-top: 8rpx;
 }
 
 .section-title {
-	font-size: 30rpx;
-	font-weight: 700;
-	color: #111827;
+	display: block;
+	margin-bottom: 14rpx;
+	font-size: 28rpx;
+	font-weight: 900;
+	color: #0F172A;
 }
 
-.range-tabs {
-	display: flex;
-	gap: 8rpx;
-}
-
-.range-item {
-	padding: 8rpx 18rpx;
-	font-size: 22rpx;
-	color: #6b7280;
-	border-radius: 999rpx;
-	background: #f3f4f6;
-}
-
-.range-item.active {
-	background: rgba(255, 255, 255, 0.92);
-	color: #111827;
-	box-shadow: 0 8rpx 18rpx rgba(15, 23, 42, 0.06);
-}
-
-.stats-row {
-	margin-top: 18rpx;
+.style-grid {
 	display: grid;
 	grid-template-columns: repeat(3, 1fr);
-	gap: 12rpx;
-}
-
-.stats-block {
-	padding: 14rpx;
-	border-radius: 18rpx;
-	background: rgba(247, 249, 252, 0.92);
-}
-
-.stats-key {
-	font-size: 20rpx;
-	color: #6b7280;
-}
-
-.stats-val {
-	display: block;
-	margin-top: 8rpx;
-	font-size: 30rpx;
-	font-weight: 700;
-	color: #111827;
-}
-
-.trend-wrap {
-	margin-top: 18rpx;
-	display: flex;
-	flex-direction: column;
-	gap: 10rpx;
-}
-
-.trend-item {
-	display: grid;
-	grid-template-columns: 1.5fr 3fr 0.8fr;
-	align-items: center;
-	gap: 10rpx;
-}
-
-.trend-label,
-.trend-count {
-	font-size: 22rpx;
-	color: #374151;
-}
-
-.trend-bar-bg {
-	height: 16rpx;
-	border-radius: 999rpx;
-	background: #e5e7eb;
-	overflow: hidden;
-}
-
-.trend-bar {
-	height: 100%;
-	background: linear-gradient(90deg, #34d399, #10b981);
-}
-
-.empty-box {
-	padding: 40rpx 0;
-	text-align: center;
-}
-
-.empty-text {
-	font-size: 24rpx;
-	color: #6b7280;
-}
-
-.log-list {
-	margin-top: 14rpx;
-	display: flex;
-	flex-direction: column;
 	gap: 14rpx;
 }
 
-.log-item {
-	padding: 18rpx;
-	border-radius: 20rpx;
-	background: rgba(247, 249, 252, 0.92);
+.style-card {
+	min-width: 0;
+	padding: 14rpx;
+	border-radius: 22rpx;
+	background: rgba(255, 255, 255, 0.78);
+	border: 2rpx solid rgba(255, 255, 255, 0.78);
+	box-shadow: 0 12rpx 26rpx rgba(15, 23, 42, 0.05);
 }
 
-.log-top {
+.style-card-active {
+	border-color: rgba(16, 185, 129, 0.72);
+}
+
+.style-preview {
+	height: 92rpx;
+	border-radius: 18rpx;
 	display: flex;
-	justify-content: space-between;
 	align-items: center;
+	justify-content: center;
 }
 
-.log-time {
-	font-size: 24rpx;
-	font-weight: 600;
-	color: #111827;
+.style-preview-icon {
+	font-size: 34rpx;
+	font-weight: 900;
+	color: #FFFFFF;
 }
 
-.log-type {
-	font-size: 20rpx;
-	padding: 6rpx 12rpx;
-	border-radius: 999rpx;
+.style-name {
+	display: block;
+	margin-top: 12rpx;
+	font-size: 23rpx;
+	font-weight: 900;
+	color: #0F172A;
 }
 
-.log-type.smoke {
-	background: #ffedd5;
-	color: #c2410c;
+.style-desc {
+	display: block;
+	margin-top: 6rpx;
+	font-size: 19rpx;
+	line-height: 1.35;
+	color: #64748B;
 }
 
-.log-type.resisted {
-	background: #dcfce7;
-	color: #047857;
-}
-
-.log-meta {
-	margin-top: 10rpx;
+.poster-preview {
+	margin-top: 24rpx;
+	padding: 30rpx;
+	border-radius: 30rpx;
 	display: flex;
-	gap: 18rpx;
-	font-size: 22rpx;
-	color: #4b5563;
+	align-items: center;
+	gap: 24rpx;
+	box-shadow: 0 18rpx 38rpx rgba(15, 23, 42, 0.08);
 }
 
-.log-remark {
+.poster-preview-fresh {
+	background: linear-gradient(135deg, #ECFDF5, #E0F2FE);
+}
+
+.poster-preview-medal {
+	background: linear-gradient(135deg, #FFF7ED, #FEF3C7);
+}
+
+.poster-preview-night {
+	background: linear-gradient(135deg, #0F172A, #115E59);
+}
+
+.preview-medal {
+	width: 118rpx;
+	height: 118rpx;
+	border-radius: 50%;
+	background: rgba(255, 255, 255, 0.32);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+}
+
+.preview-icon {
+	font-size: 48rpx;
+	font-weight: 900;
+	color: #FFFFFF;
+}
+
+.preview-copy {
+	flex: 1;
+	min-width: 0;
+}
+
+.preview-theme {
+	display: block;
+	font-size: 22rpx;
+	font-weight: 800;
+	color: rgba(15, 23, 42, 0.62);
+}
+
+.poster-preview-night .preview-theme,
+.poster-preview-night .preview-score {
+	color: rgba(255, 255, 255, 0.7);
+}
+
+.preview-title {
+	display: block;
+	margin-top: 6rpx;
+	font-size: 36rpx;
+	font-weight: 900;
+	color: #0F172A;
+}
+
+.poster-preview-night .preview-title {
+	color: #FFFFFF;
+}
+
+.preview-score {
+	display: block;
 	margin-top: 8rpx;
-	font-size: 22rpx;
-	color: #6b7280;
+	font-size: 24rpx;
+	font-weight: 800;
+	color: #64748B;
 }
 
-.load-more {
-	margin-top: 16rpx;
-	font-size: 24rpx;
-	border-radius: 14rpx;
+.metric-grid {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: 14rpx;
+	margin-top: 24rpx;
+}
+
+.metric-card {
+	padding: 22rpx;
+	border-radius: 22rpx;
+	background: rgba(255, 255, 255, 0.8);
+	border: 1rpx solid rgba(255, 255, 255, 0.82);
+}
+
+.metric-label {
+	display: block;
+	font-size: 22rpx;
+	color: #64748B;
+	font-weight: 800;
+}
+
+.metric-value-row {
+	display: flex;
+	align-items: baseline;
+	gap: 6rpx;
+	margin-top: 10rpx;
+}
+
+.metric-value {
+	font-size: 38rpx;
+	line-height: 1;
+	font-weight: 900;
+	color: #0F172A;
+}
+
+.metric-unit {
+	font-size: 20rpx;
+	font-weight: 800;
+	color: #64748B;
+}
+
+.generate-btn {
+	margin: 28rpx 0 0;
+	height: 88rpx;
+	border-radius: 999rpx;
+	background: linear-gradient(135deg, #10B981, #06B6D4);
+	color: #FFFFFF;
+	font-size: 28rpx;
+	font-weight: 900;
+	box-shadow: 0 18rpx 34rpx rgba(16, 185, 129, 0.24);
+}
+
+.generate-btn::after {
 	border: none;
-	background: rgba(255, 255, 255, 0.88);
-	color: #1a7f61;
+}
+
+.generate-btn[disabled] {
+	opacity: 0.7;
+}
+
+.bottom-safe {
+	height: calc(32rpx + env(safe-area-inset-bottom));
 }
 </style>