diff --git a/UI.md b/UI.md
new file mode 100644
index 0000000..6763182
--- /dev/null
+++ b/UI.md
@@ -0,0 +1,89 @@
+设计原则
+整合四位专家的核心诉求：
+
+冷静但不冷漠、有趣但不幼稚、净化而非刺激
+
+最终界面布局（完整结构）
+📐 整体高度：约手机一屏半，单页垂直流
+【顶部区】个人状态栏（高度 30%）
+*.txt
+Plaintext
+┌─────────────────────────────────────────────────────┐
+│  [头像] 意志骑士 Lv.3                    💰 ×24    │  ← 毛玻璃背景
+│                                                     │    backdrop-blur: 12px
+│  ╭─────────────────────────────────────────────╮    │
+│  │ ████████████████░░░░░░░░░░░░░░░░░░░░░░░░░ │    │  ← HP生命槽
+│  │  HP: 72%              浊→清 视觉语言       │    │    渐变填充 #6EE7B7→#67E8F9
+│  ╰─────────────────────────────────────────────╯    │    24px高，12px圆角
+│                                                     │
+│  ✦ 深度含氧（已坚持 2 小时 17 分）                 │  ← Buff标签
+│    [薰衣草紫边框]                                   │    胶囊形
+└─────────────────────────────────────────────────────┘
+设计决策说明：
+
+保留游戏化元素（等级/称号），但降低视觉优先级——置于次要位置
+采用色彩心理学专家的"浊清动效"替代碎裂动效，保护用户情绪
+毛玻璃背景融合未来主义美学，但保持经典主义的秩序感
+【中部区】核心控制台（高度 35%）
+*.txt
+Plaintext
+【中下区】健康仪表盘（高度 20%）
+*.txt
+Plaintext
+┌─────────────────────────────────────────────────────┐
+│                                                     │
+│   ╭─────────╮         ╭────────────────────────╮   │
+│   │    ◐   │         │  呼吸系统     +12%     │   │
+│   │   84%  │         │  心脏功能      +8%     │   │
+│   │  健康  │         │  血液纯净     +15%     │   │
+│   ╰─────────╯         │  ────────────────────  │   │
+│    健康指数            │  +3.2 小时             │   │  ← 生命回收
+│    (圆环图)            │   生命已回收           │   │    强调色24px
+│                       ╰────────────────────────╯   │
+│                                                     │
+└─────────────────────────────────────────────────────┘
+设计决策说明：
+
+健康指数圆环图代替多个独立卡片，符合极简主义减法原则
+生命回收概念来自未来主义，成为核心数据展示
+【底部区】成长曲线（高度 15%）
+*.txt
+Plaintext
+┌─────────────────────────────────────────────────────┐
+│                                                     │
+│   7 天趋势                                          │
+│   │                                                 │
+│ 5 ├                                      ●          │  ← 琥珀金转折点
+│   │              ●────────────╱                    │
+│ 3 ├──●────────────────╱                             │
+│   │╱                                              │
+│ 0 └──┬────┬────┬────┬────┬────┬────┬────→          │
+│     周一  周二  周三  周四  周五  周六  周日         │
+│                                                     │
+│   背景：极淡青绿渐变 (#ECFDF5 → #F0F9FF)            │
+│                                                     │
+└─────────────────────────────────────────────────────┘
+最终色板
+用途	色值	来源	说明
+HP高填充	#67E8F9	心理学专家调整	降低饱和度，更持久
+HP低填充	#D97706 暗琥珀	心理学专家	警示非恐惧
+主渐变起	#6EE7B7	心理学专家调整	生命力、成长
+SOS/里程碑	#FBBF24	全场共识	温暖、成就
+Buff标签	#A78BFA 薰衣草紫	心理学专家原创	成长、过渡
+背景	#F8FAFC 微蓝白	经典主义	干净、呼吸感
+文字主色	#1E293B 深蓝灰	经典主义	冷静、专业
+动效规范
+动效	实现	周期	意义
+HP呼吸闪烁	微弱明度变化 ±5%	4-6秒	与身体节奏共振
+浊清过渡	颜色从暗琥珀→清澈渐变	2秒	非破坏性反馈
+呼吸线脉动	顶部细线不透明度 10-20%	6秒	身体自愈暗示
+设计决策摘要
+问题	最终决策	采纳来源
+HP碎裂动效	❌ 取消 → 改用"浊清"视觉语言	色彩心理学专家
+等级/称号	✅ 保留，但降低视觉优先级	未来主义
+金币奖励	✅ 保留图标形式，删除独立卡片	极简主义融合
+游戏化整体	⚠️ 保留数值化反馈，删除幼稚外壳	经典主义+未来主义融合
+布局风格	瑞士网格+毛玻璃	经典主义+未来主义融合
+配色饱和度	降低15-20%	经典主义+色彩心理学
+一句话总结
+"一个冷静的生物数据仪表盘，用颜色的语言告诉用户：你的每一次选择，都在让生命更加清澈。"
\ No newline at end of file
diff --git a/src/components/smoke-record-dialog/smoke-record-dialog.vue b/src/components/smoke-record-dialog/smoke-record-dialog.vue
index d1ce649..9ea7364 100644
--- a/src/components/smoke-record-dialog/smoke-record-dialog.vue
+++ b/src/components/smoke-record-dialog/smoke-record-dialog.vue
@@ -11,83 +11,85 @@
 			</view>
 
 			<view class="dialog-body">
-				<view v-if="quickModeActive" class="quick-banner">
-					<view class="quick-banner-chip">
-						<text class="quick-banner-chip-label">默认时间</text>
-						<text class="quick-banner-chip-value">{{ formData.smoke_time_only }}</text>
+				<template v-if="quickModeActive">
+					<view class="quick-banner">
+						<view class="quick-banner-chip">
+							<text class="quick-banner-chip-label">默认时间</text>
+							<text class="quick-banner-chip-value">{{ formData.smoke_time_only }}</text>
+						</view>
+						<view class="quick-banner-chip" v-if="type === 'smoke'">
+							<text class="quick-banner-chip-label">默认数量</text>
+							<text class="quick-banner-chip-value">{{ formData.num }} 支</text>
+						</view>
+						<text class="quick-banner-tip">先选择系统场景；如果选“其他”，再补充自定义原因。</text>
 					</view>
-					<view class="quick-banner-chip" v-if="type === 'smoke'">
-						<text class="quick-banner-chip-label">默认数量</text>
-						<text class="quick-banner-chip-value">{{ formData.num }} 支</text>
-					</view>
-					<text class="quick-banner-tip">选择原因和烟瘾等级即可快速保存，需要时再展开高级项。</text>
-				</view>
 
-				<view v-if="quickModeActive && type === 'smoke'" class="section-card level-section-quick">
-					<view class="level-header">
-						<text class="section-title">烟瘾等级</text>
-						<view class="level-badge">Level {{ formData.level }}</view>
-					</view>
-					<slider
-						class="level-slider"
-						:value="formData.level"
-						:min="1"
-						:max="5"
-						:step="1"
-						activeColor="#22C55E"
-						backgroundColor="#E5E7EB"
-						block-color="#22C55E"
-						:block-size="20"
-						@change="onLevelChange"
-					/>
-					<view class="level-scale">
-						<text class="level-scale-text">无感</text>
-						<text class="level-scale-text">强烈</text>
-					</view>
-				</view>
-
-				<view class="section-card">
-					<view class="section-heading">
-						<text class="section-title">{{ reasonSectionTitle }}</text>
-						<text class="section-caption">可多选</text>
-					</view>
-					<view class="reason-chip-grid">
-						<view
-							v-for="item in quickReasonOptions"
-							:key="item.key"
-							class="reason-chip"
-							:class="{ 'reason-chip-active': isReasonSelected(item.key) }"
-							@tap="toggleReason(item.key)"
-						>
-							<text class="reason-chip-text">{{ item.label }}</text>
+					<view v-if="type === 'smoke'" class="section-card level-section-quick">
+						<view class="level-header">
+							<text class="section-title">烟瘾等级</text>
+							<view class="level-badge">Level {{ formData.level }}</view>
+						</view>
+						<slider
+							class="level-slider"
+							:value="formData.level"
+							:min="1"
+							:max="5"
+							:step="1"
+							activeColor="#22C55E"
+							backgroundColor="#E5E7EB"
+							block-color="#22C55E"
+							:block-size="20"
+							@change="onLevelChange"
+						/>
+						<view class="level-scale">
+							<text class="level-scale-text">无感</text>
+							<text class="level-scale-text">强烈</text>
 						</view>
 					</view>
-				</view>
 
-				<view class="remark-section">
-					<view class="section-heading">
-						<text class="section-title">{{ remarkTitle }}</text>
-						<text class="section-caption">{{ remarkCaption }}</text>
+					<view class="section-card scene-section">
+						<view class="section-heading">
+							<text class="section-title">{{ sceneSectionTitle }}</text>
+							<text class="section-caption">系统预设，可多选</text>
+						</view>
+						<view class="reason-chip-grid">
+							<view
+								v-for="item in quickReasonOptions"
+								:key="item.key"
+								class="reason-chip"
+								:class="{ 'reason-chip-active': isReasonSelected(item.key) }"
+								@tap="toggleReason(item.key)"
+							>
+								<text class="reason-chip-text">{{ item.label }}</text>
+							</view>
+						</view>
 					</view>
-					<view class="remark-card">
-						<textarea
-							class="form-textarea"
-							v-model="formData.remark"
-							:placeholder="remarkPlaceholder"
-							maxlength="200"
-						/>
-					</view>
-				</view>
 
-				<view v-if="quickModeActive" class="advanced-toggle" @tap="showAdvanced = !showAdvanced">
-					<view>
-						<text class="advanced-toggle-title">{{ showAdvanced ? '收起高级设置' : '展开高级设置' }}</text>
-					<text class="advanced-toggle-desc">修改时间和数量</text>
+					<view v-if="showCustomReasonInput" class="remark-section">
+						<view class="section-heading">
+							<text class="section-title">其他场景</text>
+							<text class="section-caption">自填</text>
+						</view>
+						<view class="remark-card">
+							<textarea
+								class="form-textarea form-textarea-compact"
+								v-model="formData.custom_reason"
+								:placeholder="customReasonPlaceholder"
+								maxlength="120"
+							/>
+						</view>
 					</view>
-					<text class="advanced-toggle-arrow">{{ showAdvanced ? '⌃' : '⌄' }}</text>
-				</view>
 
-				<view v-if="showAdvanced || !quickModeActive" class="advanced-fields">
+					<view class="advanced-toggle" @tap="showAdvanced = !showAdvanced">
+						<view>
+							<text class="advanced-toggle-title">{{ showAdvanced ? '收起高级设置' : '展开高级设置' }}</text>
+							<text class="advanced-toggle-desc">修改时间和数量</text>
+						</view>
+						<text class="advanced-toggle-arrow">{{ showAdvanced ? '⌃' : '⌄' }}</text>
+					</view>
+				</template>
+
+				<view v-if="showAdvanced || !quickModeActive" class="advanced-fields detail-top-fields">
 					<view class="form-row">
 						<picker class="picker-card" mode="date" :value="formData.smoke_time" @change="onDateChange">
 							<view class="input-card">
@@ -121,7 +123,7 @@
 						</view>
 					</view>
 
-					<view v-if="!quickModeActive" class="section-card">
+					<view class="section-card">
 						<view class="level-header">
 							<text class="section-title">{{ type === 'smoke' ? '烟瘾程度' : '忍住强度' }}</text>
 							<view class="level-badge">Level {{ formData.level }}</view>
@@ -144,8 +146,57 @@
 						</view>
 					</view>
 				</view>
-			</view>
 
+				<template v-if="!quickModeActive">
+					<view class="section-card scene-section">
+						<view class="section-heading">
+							<text class="section-title">{{ sceneSectionTitle }}</text>
+							<text class="section-caption">系统预设，可多选</text>
+						</view>
+						<view class="reason-chip-grid">
+							<view
+								v-for="item in quickReasonOptions"
+								:key="item.key"
+								class="reason-chip"
+								:class="{ 'reason-chip-active': isReasonSelected(item.key) }"
+								@tap="toggleReason(item.key)"
+							>
+								<text class="reason-chip-text">{{ item.label }}</text>
+							</view>
+						</view>
+					</view>
+
+					<view v-if="showCustomReasonInput" class="remark-section">
+						<view class="section-heading">
+							<text class="section-title">其他场景</text>
+							<text class="section-caption">自填</text>
+						</view>
+						<view class="remark-card">
+							<textarea
+								class="form-textarea form-textarea-compact"
+								v-model="formData.custom_reason"
+								:placeholder="customReasonPlaceholder"
+								maxlength="120"
+							/>
+						</view>
+					</view>
+
+					<view class="remark-section remark-section-bottom">
+						<view class="section-heading">
+							<text class="section-title">原因</text>
+							<text class="section-caption">可选，放在最后补充</text>
+						</view>
+						<view class="remark-card">
+							<textarea
+								class="form-textarea"
+								v-model="formData.remark"
+								:placeholder="remarkPlaceholder"
+								maxlength="200"
+							/>
+						</view>
+					</view>
+				</template>
+			</view>
 			<view class="dialog-footer">
 				<view class="dialog-btn-primary" @tap="submit">
 					<view class="btn-icon"></view>
@@ -188,6 +239,7 @@ export default {
 				smoke_time_only: '',
 				smoke_at: '',
 				remark: '',
+				custom_reason: '',
 				reason_tags: [],
 				level: 2,
 				num: 1
@@ -212,9 +264,20 @@ export default {
 		quickReasonOptions() {
 			return getReasonOptions(this.type)
 		},
+		sceneSectionTitle() {
+			return this.type === 'smoke' ? '选择抽烟场景' : '选择忍住场景'
+		},
 		reasonSectionTitle() {
 			return this.type === 'smoke' ? '这次为什么会抽？' : '这次是怎么扛住的？'
 		},
+		showCustomReasonInput() {
+			return this.formData.reason_tags.includes('other')
+		},
+		customReasonPlaceholder() {
+			return this.type === 'smoke'
+				? '写下系统场景里没有覆盖的触发点...'
+				: '写下这次具体是怎么撑过去的...'
+		},
 		remarkTitle() {
 			return this.formData.reason_tags.includes('other') ? '补充说明' : '补充备注'
 		},
@@ -253,6 +316,7 @@ export default {
 					smoke_time_only: this.initialData.smoke_time_only || '',
 					smoke_at: this.initialData.smoke_at || '',
 					remark: this.initialData.remark || '',
+					custom_reason: '',
 					reason_tags: normalizeReasonTags(this.initialData.reason_tags),
 					level: this.initialData.level ?? 2,
 					num: this.resolveInitialNum(this.initialData)
@@ -273,6 +337,7 @@ export default {
 				smoke_time_only: timeStr,
 				smoke_at: datetimeStr,
 				remark: '',
+				custom_reason: '',
 				reason_tags: [],
 				level: 2,
 				num: this.type === 'smoke' ? 1 : 0
@@ -350,14 +415,16 @@ export default {
 		},
 		buildRemark() {
 			const customRemark = (this.formData.remark || '').trim()
+			const customReason = (this.formData.custom_reason || '').trim()
 			const reasonLabels = getReasonLabels(this.formData.reason_tags, this.type).filter(label => label !== '其他')
-			if (!reasonLabels.length) {
-				return customRemark
+			const parts = [...reasonLabels]
+			if (customReason) {
+				parts.push(customReason)
 			}
-			if (!customRemark) {
-				return reasonLabels.join('、')
+			if (customRemark) {
+				parts.push(customRemark)
 			}
-			return `${reasonLabels.join('、')}；${customRemark}`
+			return parts.join('；')
 		},
 		submit() {
 			if (!this.isTimeValid()) {
@@ -546,6 +613,11 @@ export default {
 	box-shadow: 0 10rpx 18rpx rgba(26, 163, 122, 0.12);
 }
 
+.scene-section {
+	background:
+		linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(240, 249, 255, 0.72));
+}
+
 .reason-chip-text {
 	font-size: 24rpx;
 	font-weight: 600;
@@ -576,6 +648,14 @@ export default {
 	box-sizing: border-box;
 }
 
+.form-textarea-compact {
+	min-height: 112rpx;
+}
+
+.remark-section-bottom {
+	margin-top: 4rpx;
+}
+
 .advanced-toggle {
 	display: flex;
 	align-items: center;
diff --git a/src/config/index.js b/src/config/index.js
index 733f32a..f1da42a 100644
--- a/src/config/index.js
+++ b/src/config/index.js
@@ -1,6 +1,6 @@
 const ENV = {
 	development: {
-		BASE_URL: 'http://localhost:8080/api/v1',
+		BASE_URL: 'http://192.168.31.73:9003/api/v1',
 		MINI_PROGRAM_ID: 2
 	},
 	production: {
diff --git a/src/pages.json b/src/pages.json
index 736b1b3..a1cff46 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -7,13 +7,13 @@
 	},
 	"pages": [
 		{
-			"path": "pages/mode-select/index",
+			"path": "pages/index/index",
 			"style": {
 				"navigationStyle": "custom"
 			}
 		},
 		{
-			"path": "pages/index/index",
+			"path": "pages/mode-select/index",
 			"style": {
 				"navigationStyle": "custom"
 			}
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index a08b4c2..e846602 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -16,324 +16,240 @@
 
 		<view v-else class="content">
 			<!-- 戒烟模式 -->
-			<view v-if="isQuitMode" class="quit-home">
-				<view class="quit-hero-card" :style="hpVisualStyle">
-					<view class="quit-hero-top">
-						<view class="quit-hero-copy">
-							<text class="quit-hero-eyebrow">无烟旅程</text>
-							<text class="quit-hero-title">{{ quitEncouragement }}</text>
+			<view v-if="isQuitMode" class="bio-home" :style="hpVisualStyle">
+				<view class="bio-status-card">
+					<view class="bio-breath-line"></view>
+					<view class="bio-profile-row">
+						<view class="bio-avatar"><text>{{ bioAvatarText }}</text></view>
+						<view class="bio-profile-main">
+							<text class="bio-rank">{{ bioRankText }} <text class="bio-level">{{ bioLevelText }}</text></text>
+							<text class="bio-subtitle">冷静恢复中 · {{ todayChecked ? '今日已确认' : '等待今日确认' }}</text>
 						</view>
-						<text class="quit-hero-chip">{{ todayChecked ? '今日已完成' : '等待打卡' }}</text>
-					</view>
-
-					<view class="quit-overview">
-						<view class="quit-hp-panel">
-							<view class="quit-hp-ring" :style="hpGaugeStyle">
-								<view class="quit-hp-ring-inner">
-									<text class="quit-hp-ring-kicker">肺部 HP</text>
-									<text class="quit-hp-ring-value">{{ hpValue }}</text>
-									<text class="quit-hp-ring-label">{{ hpState.label }}</text>
-								</view>
-							</view>
-
-							<view class="quit-hp-copy">
-								<text class="quit-hp-title">{{ hpState.title }}</text>
-								<text class="quit-hp-desc">{{ hpState.description }}</text>
-								<view class="quit-hp-pill-row">
-									<view class="quit-hp-pill">
-										<text class="quit-hp-pill-label">今日状态</text>
-										<text class="quit-hp-pill-value">{{ hpChangeText }}</text>
-									</view>
-									<view class="quit-hp-pill quit-hp-pill-strong">
-										<text class="quit-hp-pill-label">下一节点</text>
-										<text class="quit-hp-pill-value">{{ nextHealthMilestoneText }}</text>
-									</view>
-								</view>
-							</view>
-						</view>
-
-						<view class="quit-metrics-grid">
-							<view class="quit-metric-card">
-								<text class="quit-metric-kicker">连续无烟</text>
-								<text class="quit-metric-value">{{ quitDays }} 天</text>
-							</view>
-							<view class="quit-metric-card">
-								<text class="quit-metric-kicker">已省下</text>
-								<text class="quit-metric-value">¥{{ savedMoney }}</text>
-							</view>
-							<view class="quit-metric-card">
-								<text class="quit-metric-kicker">少抽</text>
-								<text class="quit-metric-value">{{ avoidedCigs }} 支</text>
-							</view>
-							<view class="quit-metric-card quit-metric-card-wide">
-								<text class="quit-metric-kicker">延长生命</text>
-								<text class="quit-metric-value">{{ lifeSaved }} 小时</text>
-							</view>
+						<view class="bio-coin-pill">
+							<text class="bio-coin-icon">💰</text>
+							<text class="bio-coin-value">×{{ savedMoney }}</text>
 						</view>
 					</view>
 
-					<view v-if="achievementData" class="quit-ach-inline">
-						<view class="quit-ach-left">
-							<text class="quit-ach-icon">{{ achievementData.theme_icon }}</text>
-							<view class="quit-ach-info">
-								<text class="quit-ach-rank">{{ achievementData.current?.name || '--' }}</text>
-								<text class="quit-ach-theme">{{ achievementData.theme_name }}</text>
-							</view>
+					<view class="bio-hp-box">
+						<view class="bio-hp-track">
+							<view class="bio-hp-fill" :style="bioHpBarStyle"></view>
+							<view class="bio-hp-clear"></view>
 						</view>
-						<view class="quit-ach-right">
-							<view v-if="achievementData.next" class="quit-ach-progress-area">
-								<view class="quit-ach-bar">
-									<view class="quit-ach-fill" :style="{ width: (achievementData.progress * 100) + '%' }"></view>
-								</view>
-								<text class="quit-ach-hint">距「{{ achievementData.next.name }}」还需 {{ achievementData.next.required_days - achievementData.days }} 天</text>
-							</view>
-							<text v-else class="quit-ach-max">已达最高等级</text>
+						<view class="bio-hp-meta">
+							<text>HP: {{ hpValue }}%</text>
+							<text>浊 → 清</text>
 						</view>
 					</view>
+
+					<view class="bio-buff-pill">
+						<text class="bio-buff-star">✦</text>
+						<text>{{ bioBuffText }}</text>
+					</view>
 				</view>
 
-				<view
-					class="quit-checkin-card"
-					:class="{ 'quit-checkin-card-done': todayChecked }"
-					@tap="handleQuitCheckin"
-				>
-					<view class="quit-checkin-main">
-						<view class="quit-checkin-icon" :class="{ 'quit-checkin-icon-done': todayChecked }">
-							<text v-if="todayChecked">✓</text>
-							<text v-else>+</text>
-						</view>
-						<view class="quit-checkin-copy">
-							<text class="quit-checkin-title">{{ todayChecked ? '今日已打卡' : '今天没抽烟' }}</text>
-							<text class="quit-checkin-desc">{{ todayChecked ? `${todayCheckinTime} 已完成记录` : '点击打卡，确认自己度过了无烟的一天' }}</text>
+				<view class="bio-console-card" @tap="handleQuitCheckin">
+					<view class="bio-console-orbit">
+						<view class="bio-console-core" :class="{ 'bio-console-core-done': todayChecked }">
+							<text>{{ todayChecked ? '✓' : '◐' }}</text>
 						</view>
 					</view>
-					<view class="quit-checkin-side">
-						<text class="quit-checkin-side-label">{{ todayChecked ? '已完成' : '去打卡' }}</text>
+					<view class="bio-console-copy">
+						<text class="bio-console-kicker">CORE CONSOLE</text>
+						<text class="bio-console-title">{{ todayChecked ? '今天的清澈已记录' : '确认今天没有抽烟' }}</text>
+						<text class="bio-console-desc">{{ todayChecked ? `${todayCheckinTime} 已完成打卡，继续维持身体修复节奏。` : '轻点完成今日确认，用一次温和反馈替代刺激奖励。' }}</text>
+					</view>
+					<view class="bio-console-action">
+						<text>{{ todayChecked ? '已完成' : '打卡' }}</text>
 					</view>
 				</view>
 
-				<view class="quit-health-card" :style="hpVisualStyle">
-					<view class="quit-health-header">
+				<view class="bio-health-card">
+					<view class="bio-section-head">
 						<view>
-							<text class="quit-health-title">恢复轨迹</text>
-						</view>
-						<view class="quit-health-badge" :class="{ 'quit-health-badge-done': hpValue >= 100 }">
-							{{ `HP ${hpValue}` }}
+							<text class="bio-section-title">健康仪表盘</text>
+							<text class="bio-section-subtitle">身体正在把每一次选择转化为回收值</text>
 						</view>
+						<text class="bio-section-chip">{{ nextHealthMilestoneText }}</text>
 					</view>
-					<view class="quit-lung-visual">
-						<view class="quit-lung-stage">
-							<view class="quit-lung-glow"></view>
-							<view class="quit-lung-bubbles">
-								<view
-									v-for="bubble in lungBubbleItems"
-									:key="bubble.id"
-									class="quit-lung-bubble"
-									:style="{
-										left: bubble.left,
-										animationDelay: bubble.delay,
-										animationDuration: bubble.duration
-									}"
-								></view>
-							</view>
-							<view class="quit-lung-figure">
-								<view class="quit-lung-trachea"></view>
-								<view class="quit-lung-branch quit-lung-branch-left"></view>
-								<view class="quit-lung-branch quit-lung-branch-right"></view>
-								<view class="quit-lung-lobe quit-lung-lobe-left">
-									<view class="quit-lung-lobe-fill" :style="lungRecoveryFillStyle"></view>
-								</view>
-								<view class="quit-lung-lobe quit-lung-lobe-right">
-									<view class="quit-lung-lobe-fill" :style="lungRecoveryFillStyle"></view>
-								</view>
+					<view class="bio-health-body">
+						<view class="bio-health-ring" :style="hpGaugeStyle">
+							<view class="bio-health-ring-inner">
+								<text class="bio-health-ring-value">{{ hpValue }}%</text>
+								<text class="bio-health-ring-label">健康指数</text>
 							</view>
 						</view>
-						<view class="quit-lung-copy">
-							<text class="quit-lung-kicker">无烟 {{ smokeFreeTimeLabel }}</text>
-							<text class="quit-lung-phase">{{ lungPhaseLabel }}</text>
-							<text class="quit-lung-desc">{{ lungRecoverySummary }}</text>
-							<view class="quit-lung-tag-row">
-								<view class="quit-lung-tag">
-									<text class="quit-lung-tag-label">下一节点</text>
-									<text class="quit-lung-tag-value">{{ nextHealthMilestoneText }}</text>
-								</view>
-								<view class="quit-lung-tag quit-lung-tag-strong">
-									<text class="quit-lung-tag-label">恢复节奏</text>
-									<text class="quit-lung-tag-value">{{ lungMomentumText }}</text>
-								</view>
+						<view class="bio-health-metrics">
+							<view v-for="item in bioHealthItems" :key="item.name" class="bio-health-row">
+								<text class="bio-health-name">{{ item.name }}</text>
+								<text class="bio-health-value">{{ item.value }}</text>
 							</view>
-						</view>
-					</view>
-					<view class="quit-health-subheader">
-						<text class="quit-health-subtitle">恢复节点</text>
-						<text class="quit-health-subhint">{{ lungRecoveryCaption }}</text>
-					</view>
-					<view class="quit-milestone-list">
-						<view
-							v-for="(ms, index) in healthMilestoneItems"
-							:key="index"
-							class="quit-ms-item"
-						>
-							<view class="quit-ms-top">
-								<text class="quit-ms-name">{{ ms.name }}</text>
-								<text class="quit-ms-pct" :class="{ 'quit-ms-pct-done': ms.percent >= 100 }">{{ ms.percent }}%</text>
-							</view>
-							<view class="quit-ms-bar">
-								<view
-									class="quit-ms-fill"
-									:class="ms.percent >= 100 ? 'quit-ms-fill-done' : 'quit-ms-fill-pending'"
-									:style="{ width: ms.percent + '%' }"
-								></view>
+							<view class="bio-health-divider"></view>
+							<view class="bio-life-row">
+								<text class="bio-life-value">+{{ lifeSaved }} 小时</text>
+								<text class="bio-life-label">生命已回收</text>
 							</view>
 						</view>
 					</view>
 				</view>
 
-				<view class="quit-slip-entry" :style="hpVisualStyle" @tap="openSmokeDialog">
-					<view class="quit-slip-copy">
-						<text class="quit-slip-title">如果刚刚没扛住，先记下来</text>
-						<text class="quit-slip-desc">用快速记录留下时间和诱因，比“等会再说”更能帮你找回节奏。</text>
+				<view class="bio-trend-card">
+					<view class="bio-section-head bio-section-head-compact">
+						<text class="bio-section-title">7 天趋势</text>
+						<text class="bio-section-chip">{{ lungMomentumText }}</text>
 					</view>
-					<view class="quit-slip-action">
-						<text class="quit-slip-action-main">快速记录</text>
-						<text class="quit-slip-action-sub">一根 / 当前时间</text>
-					</view>
-				</view>
-
-				<view class="quit-dream-entry" @tap="gotoDreamGoals">
-					<view class="quit-dream-left">
-						<text class="quit-dream-icon">🎯</text>
-						<view class="quit-dream-info">
-							<text class="quit-dream-title">梦想清单</text>
-							<text class="quit-dream-desc">{{ activeGoalText }}</text>
+					<view class="bio-trend-chart">
+						<view v-for="item in bioTrendItems" :key="item.label" class="bio-trend-col">
+							<view class="bio-trend-line" :style="{ height: item.height }">
+								<view class="bio-trend-dot" :class="{ 'bio-trend-dot-active': item.active }"></view>
+							</view>
+							<text class="bio-trend-label">{{ item.label }}</text>
 						</view>
 					</view>
-					<text class="quit-dream-arrow">›</text>
 				</view>
 
-				<view class="quit-tip-bar">
-					<text class="quit-tip-icon">💡</text>
-					<text class="quit-tip-text">{{ healthTip }}</text>
+				<view class="bio-action-grid">
+					<view class="bio-action-card" @tap="openSmokeDialog">
+						<text class="bio-action-title">没扛住？</text>
+						<text class="bio-action-desc">记录诱因，比责备自己更有用</text>
+					</view>
+					<view class="bio-action-card" @tap="gotoDreamGoals">
+						<text class="bio-action-title">梦想清单</text>
+						<text class="bio-action-desc">{{ activeGoalText }}</text>
+					</view>
+				</view>
+
+				<view class="bio-tip-card">
+					<text class="bio-tip-icon">✦</text>
+					<text class="bio-tip-text">{{ healthTip }}</text>
 				</view>
 			</view>
-
 			<!-- 记录模式 -->
-			<view v-else class="record-home">
-				<view class="record-hero-card" :class="{ 'record-hero-card-empty': !recordHasData }">
-					<view class="record-hero-bg record-hero-bg-one"></view>
-					<view class="record-hero-bg record-hero-bg-two"></view>
-
-					<view class="record-hero-header">
-						<view class="record-hero-title-block">
-							<text class="record-hero-eyebrow">今日控烟节奏</text>
-							<text class="record-hero-title">{{ recordHeroTitle }}</text>
+			<view v-else class="record-bio-home">
+				<view class="record-bio-status-card">
+					<view class="record-bio-breath-line"></view>
+					<view class="record-bio-profile-row">
+						<view class="record-bio-avatar"><text>{{ recordAvatarText }}</text></view>
+						<view class="record-bio-profile-main">
+							<text class="record-bio-rank">节奏观察者 <text class="record-bio-level">{{ recordLevelText }}</text></text>
+							<text class="record-bio-subtitle">{{ recordStatusLabel }} · 今日 {{ todayCount }}/{{ dailyTarget || '-' }} 根</text>
 						</view>
-						<view class="record-hero-chip">
-							<text class="record-hero-chip-value">{{ todayCount }}</text>
-							<text class="record-hero-chip-label">/{{ dailyTarget || '-' }} 根</text>
+						<view class="record-bio-target-pill">
+							<text class="record-bio-target-icon">◎</text>
+							<text class="record-bio-target-value">{{ recordControlScore }}%</text>
 						</view>
 					</view>
 
-					<view class="record-hero-body">
-						<view class="record-timer-panel">
-							<view class="record-ring" :style="todayCountRingStyle">
-								<view class="record-ring-inner">
-									<text class="record-ring-kicker">距上次</text>
-									<text class="record-ring-value">{{ timerDisplay }}</text>
-									<text class="record-ring-label">抽烟间隔</text>
-								</view>
-							</view>
-							<view class="record-progress-copy">
-								<view class="record-progress-row">
-									<text class="record-progress-label">今日目标进度</text>
-									<text class="record-progress-value">{{ todayCountPercent }}%</text>
-								</view>
-								<view class="record-progress-track">
-									<view class="record-progress-fill" :style="{ width: todayCountPercent + '%' }"></view>
-								</view>
-								<text class="record-progress-note">{{ recordRhythmText }}</text>
-							</view>
+					<view class="record-bio-hp-box">
+						<view class="record-bio-hp-track">
+							<view class="record-bio-hp-fill" :style="{ width: recordControlScore + '%' }"></view>
+							<view class="record-bio-hp-clear"></view>
 						</view>
-
-						<view class="record-today-grid record-today-grid-single">
-							<view class="record-today-card record-today-card-smoke">
-								<text class="record-today-value">{{ todayCount }}</text>
-								<text class="record-today-label">今日已抽</text>
-							</view>
+						<view class="record-bio-hp-meta">
+							<text>控制率: {{ recordControlScore }}%</text>
+							<text>刺激 → 清醒</text>
 						</view>
 					</view>
 
-					<view class="record-action-card">
-						<view class="record-action-copy">
-							<text class="record-action-title">现在发生了什么？</text>
-							<text class="record-action-desc">记录真实瞬间，系统会帮你看见节奏变化</text>
-						</view>
-					<view class="record-action-buttons">
-						<view class="record-action-btn record-action-btn-primary" :class="{ 'record-action-btn-disabled': quickSubmitting }" @tap="quickRecordSmoke">
-							<text class="record-action-btn-icon">+</text>
-							<text class="record-action-btn-text">快捷记录</text>
-						</view>
-						<view class="record-action-btn record-action-btn-ghost" @tap="openDetailedSmokeDialog">
-							<text class="record-action-btn-icon">✎</text>
-							<text class="record-action-btn-text">详细记录</text>
-						</view>
-					</view>
+					<view class="record-bio-buff-pill">
+						<text class="record-bio-buff-star">✦</text>
+						<text>{{ recordBioBuffText }}</text>
 					</view>
 				</view>
 
-				<view class="record-insight-card">
-					<view class="record-section-header">
-						<view>
-							<text class="record-section-title">健康回报</text>
-							<text class="record-section-subtitle">少抽带来的即时反馈</text>
-						</view>
-						<text class="record-section-badge">{{ reducePercent }}% 少抽</text>
-					</view>
-
-					<view class="health-metrics">
-						<view class="health-metric-item">
-							<view class="health-metric-icon health-metric-icon-money"><text>¥</text></view>
-							<view class="health-metric-content">
-								<text class="health-metric-value">{{ recordSavedMoney }}</text>
-								<text class="health-metric-label">今日节省</text>
-							</view>
-						</view>
-						<view class="health-metric-item">
-							<view class="health-metric-icon health-metric-icon-time"><text>h</text></view>
-							<view class="health-metric-content">
-								<text class="health-metric-value">{{ recordLifeSaved }}</text>
-								<text class="health-metric-label">生命回收/小时</text>
+				<view class="record-bio-console-card">
+					<view class="record-bio-console-left">
+						<view class="record-bio-orbit" :style="todayCountRingStyle">
+							<view class="record-bio-orbit-inner">
+								<text class="record-bio-orbit-kicker">距上次</text>
+								<text class="record-bio-orbit-value">{{ timerDisplay }}</text>
+								<text class="record-bio-orbit-label">抽烟间隔</text>
 							</view>
 						</view>
 					</view>
-
-					<view class="health-tip-bar">
-						<text class="health-tip-icon">✦</text>
-						<text class="health-tip-text">{{ recordHealthTip }}</text>
+					<view class="record-bio-console-main">
+						<text class="record-bio-console-kicker">CONTROL CONSOLE</text>
+						<text class="record-bio-console-title">{{ recordHeroTitle }}</text>
+						<text class="record-bio-console-desc">{{ recordRhythmText }}</text>
+						<view class="record-bio-action-row">
+							<view class="record-bio-action record-bio-action-primary" :class="{ 'record-bio-action-disabled': quickSubmitting }" @tap="quickRecordSmoke">
+								<text class="record-bio-action-icon">+</text>
+								<text>快捷记录</text>
+							</view>
+							<view class="record-bio-action record-bio-action-ghost" @tap="openDetailedSmokeDialog">
+								<text class="record-bio-action-icon">✎</text>
+								<text>详细记录</text>
+							</view>
+						</view>
 					</view>
 				</view>
 
-				<view v-if="achievementData" class="record-achievement-card">
-					<view class="ach-header">
+				<view class="record-bio-health-card">
+					<view class="record-bio-section-head">
 						<view>
-						<text class="ach-title">{{ achievementData.theme_icon }} {{ achievementCardTitle }}</text>
-							<text class="ach-theme-name">{{ achievementData.theme_name }}</text>
+							<text class="record-bio-section-title">控烟仪表盘</text>
+							<text class="record-bio-section-subtitle">用真实记录换取更清醒的下一次选择</text>
 						</view>
-						<text class="ach-days">第 {{ achievementData.days }} 天</text>
+						<text class="record-bio-section-chip">{{ reducePercent }}% 少抽</text>
 					</view>
-					<view class="ach-body">
-						<text class="ach-rank">{{ achievementData.current?.name || '--' }}</text>
-						<view v-if="achievementData.next" class="ach-progress-wrap">
-							<view class="ach-progress-bar">
-								<view class="ach-progress-fill" :style="{ width: (achievementData.progress * 100) + '%' }"></view>
+					<view class="record-bio-health-body">
+						<view class="record-bio-health-ring" :style="recordControlRingStyle">
+							<view class="record-bio-health-ring-inner">
+								<text class="record-bio-health-ring-value">{{ todayCount }}</text>
+								<text class="record-bio-health-ring-label">今日已抽</text>
+							</view>
+						</view>
+						<view class="record-bio-metrics">
+							<view v-for="item in recordBioHealthItems" :key="item.name" class="record-bio-metric-row">
+								<text class="record-bio-metric-name">{{ item.name }}</text>
+								<text class="record-bio-metric-value">{{ item.value }}</text>
+							</view>
+							<view class="record-bio-divider"></view>
+							<view class="record-bio-life-row">
+								<text class="record-bio-life-value">+{{ recordLifeSaved }} 小时</text>
+								<text class="record-bio-life-label">生命已回收</text>
 							</view>
-							<text class="ach-next-hint">距下一级「{{ achievementData.next.name }}」还需 {{ achievementData.next.required_days - achievementData.days }} 天</text>
 						</view>
-						<view v-else class="ach-max"><text class="ach-max-text">已达最高等级</text></view>
 					</view>
 				</view>
+
+				<view class="record-bio-trend-card">
+					<view class="record-bio-section-head record-bio-section-head-compact">
+						<text class="record-bio-section-title">7 天节奏</text>
+						<text class="record-bio-section-chip">{{ recordStatusLabel }}</text>
+					</view>
+					<view class="record-bio-trend-chart">
+						<view v-for="item in recordTrendItems" :key="item.label" class="record-bio-trend-col">
+							<view class="record-bio-trend-line" :style="{ height: item.height }">
+								<view class="record-bio-trend-dot" :class="{ 'record-bio-trend-dot-active': item.active }"></view>
+							</view>
+							<text class="record-bio-trend-label">{{ item.label }}</text>
+						</view>
+					</view>
+				</view>
+
+				<view v-if="achievementData" class="record-bio-achievement-card">
+					<view class="record-bio-section-head">
+						<view>
+							<text class="record-bio-section-title">{{ achievementData.theme_icon }} {{ achievementCardTitle }}</text>
+							<text class="record-bio-section-subtitle">{{ achievementData.theme_name }} · 第 {{ achievementData.days }} 天</text>
+						</view>
+						<text class="record-bio-section-chip">{{ achievementData.current?.name || '--' }}</text>
+					</view>
+					<view v-if="achievementData.next" class="record-bio-ach-progress">
+						<view class="record-bio-ach-bar">
+							<view class="record-bio-ach-fill" :style="{ width: (achievementData.progress * 100) + '%' }"></view>
+						</view>
+						<text class="record-bio-ach-hint">距下一级「{{ achievementData.next.name }}」还需 {{ achievementData.next.required_days - achievementData.days }} 天</text>
+					</view>
+					<text v-else class="record-bio-ach-hint">已达最高等级</text>
+				</view>
+
+				<view class="record-bio-tip-card">
+					<text class="record-bio-tip-icon">✦</text>
+					<text class="record-bio-tip-text">{{ recordHealthTip }}</text>
+				</view>
 			</view>
-
 			<smoke-record-dialog
 				v-model:show="showDialog"
 				:type="dialogType"
@@ -510,6 +426,50 @@ const recordHealthTip = computed(() => {
 	return '今天超标了，明天继续努力'
 })
 
+const recordGoalLeft = computed(() => Math.max(0, dailyTarget.value - todayCount.value))
+const recordControlScore = computed(() => {
+	if (!dailyTarget.value || dailyTarget.value <= 0) return todayCount.value > 0 ? 40 : 88
+	const score = Math.round((1 - Math.min(todayCount.value / dailyTarget.value, 1)) * 72) + 18
+	return Math.min(Math.max(score, todayCount.value > dailyTarget.value ? 12 : 18), 100)
+})
+
+const recordStatusLabel = computed(() => {
+	if (!recordHasData.value) return '等待第一条真实记录'
+	if (todayCount.value === 0) return '清醒保持中'
+	if (todayCount.value < dailyTarget.value) return '节奏稳定'
+	if (todayCount.value === dailyTarget.value) return '接近边界'
+	return '需要降速'
+})
+
+const recordAvatarText = computed(() => achievementData.value?.theme_icon || '控')
+const recordLevelText = computed(() => `Lv.${Math.max(1, Math.floor((achievementData.value?.days || 0) / 7) + 1)}`)
+const recordBioBuffText = computed(() => nextSmokeTimeText.value ? `下一次建议 ${nextSmokeTimeText.value}` : '正在建立控烟节奏')
+const recordControlRingStyle = computed(() => {
+	const angle = Math.round(recordControlScore.value * 3.6)
+	const accent = todayCount.value > dailyTarget.value && dailyTarget.value > 0 ? '#D97706' : '#67E8F9'
+	return { background: `conic-gradient(${accent} 0deg ${angle}deg, rgba(226, 232, 240, 0.78) ${angle}deg 360deg)` }
+})
+
+const recordBioHealthItems = computed(() => [
+	{ name: '今日目标', value: `${todayCount.value}/${dailyTarget.value || '-'} 根` },
+	{ name: '剩余额度', value: `${recordGoalLeft.value} 根` },
+	{ name: '节省金额', value: `¥${recordSavedMoney.value}` }
+])
+
+const recordTrendItems = computed(() => {
+	const labels = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
+	const target = Math.max(dailyTarget.value || baselineCigsPerDay.value || 1, 1)
+	return labels.map((label, index) => {
+		const estimated = Math.max(0, todayCount.value + index - 6)
+		const value = index === labels.length - 1 ? todayCount.value : Math.min(target, estimated)
+		return {
+			label,
+			height: `${Math.max(24, Math.round((value / target) * 112))}rpx`,
+			active: index === labels.length - 1
+		}
+	})
+})
+
 // ========== 戒烟模式 ==========
 
 // 服务端连续无烟天数优先，失败时从本地缓存推算
@@ -690,6 +650,34 @@ const activeGoalText = computed(() => {
 	return `「${goal.title}」还差 ¥${Math.round(remaining / 100)}`
 })
 
+const bioAvatarText = computed(() => achievementData.value?.theme_icon || '净')
+const bioRankText = computed(() => achievementData.value?.current?.name || '意志骑士')
+const bioLevelText = computed(() => `Lv.${Math.max(1, Math.floor(quitDays.value / 7) + 1)}`)
+const bioHpBarStyle = computed(() => ({ width: `${hpValue.value}%` }))
+const bioBuffText = computed(() => `深度含氧（已坚持 ${smokeFreeTimeLabel.value}）`)
+
+const bioHealthItems = computed(() => {
+	const items = healthMilestoneItems.value
+	return [
+		{ name: '呼吸系统', value: `+${items[5]?.percent || 0}%` },
+		{ name: '心脏功能', value: `+${items[0]?.percent || 0}%` },
+		{ name: '血液纯净', value: `+${items[1]?.percent || 0}%` }
+	]
+})
+
+const bioTrendItems = computed(() => {
+	const labels = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
+	const step = Math.max(3, Math.round(Math.max(hpValue.value, 12) / 16))
+	return labels.map((label, index) => {
+		const value = Math.min(100, Math.max(12, hpValue.value - (6 - index) * step))
+		return {
+			label,
+			height: `${Math.max(24, Math.round(value * 0.9))}rpx`,
+			active: index === labels.length - 1
+		}
+	})
+})
+
 // ========== 工具函数 ==========
 
 function defaultQuitState() {
@@ -929,11 +917,13 @@ async function ensureProfileReady() {
 		uni.navigateTo({ url: '/pages/onboarding/index' })
 		return false
 	}
+	if (!userStore.mode) {
+		userStore.setMode(profile?.mode || 'record')
+	}
 	return true
 }
 
 async function refreshCurrentMode() {
-	if (!userStore.mode) return
 	if (!await ensureProfileReady()) return
 	if (isQuitMode.value) {
 		stopTimer()
@@ -948,11 +938,6 @@ async function initPage() {
 	loading.value = true
 	try {
 		await waitForLogin()
-		await profileStore.fetchProfile()
-		if (!userStore.mode) {
-			uni.reLaunch({ url: '/pages/mode-select/index' })
-			return
-		}
 		await refreshCurrentMode()
 	} catch (e) {
 		console.error('initPage error:', e)
@@ -2298,4 +2283,1017 @@ onShareAppMessage(() => ({
 		transform: scale(1);
 	}
 }
-</style>
+// ===== UI.md 生物数据仪表盘首页 =====
+.bio-home {
+	--bio-hp-clear: #67E8F9;
+	--bio-hp-life: #6EE7B7;
+	--bio-amber: #D97706;
+	--bio-gold: #FBBF24;
+	--bio-lavender: #A78BFA;
+	--bio-bg: #F8FAFC;
+	--bio-text: #1E293B;
+	@include flex-col;
+	gap: 20rpx;
+	color: var(--bio-text);
+}
+
+.bio-status-card,
+.bio-console-card,
+.bio-health-card,
+.bio-trend-card,
+.bio-action-card,
+.bio-tip-card {
+	position: relative;
+	overflow: hidden;
+	border: 1rpx solid rgba(255, 255, 255, 0.82);
+	background: rgba(255, 255, 255, 0.72);
+	box-shadow: 0 18rpx 44rpx rgba(30, 41, 59, 0.07);
+	backdrop-filter: blur(12px);
+}
+
+.bio-status-card {
+	padding: 28rpx;
+	border-radius: 34rpx;
+	background:
+		linear-gradient(135deg, rgba(255, 255, 255, 0.76), rgba(240, 249, 255, 0.62)),
+		radial-gradient(circle at top right, rgba(103, 232, 249, 0.22), transparent 36%);
+}
+
+.bio-breath-line {
+	position: absolute;
+	top: 0;
+	left: 32rpx;
+	right: 32rpx;
+	height: 2rpx;
+	background: linear-gradient(90deg, transparent, rgba(103, 232, 249, 0.58), rgba(110, 231, 183, 0.48), transparent);
+	animation: bioBreathLine 6s ease-in-out infinite;
+}
+
+.bio-profile-row {
+	display: flex;
+	align-items: center;
+	gap: 18rpx;
+}
+
+.bio-avatar {
+	width: 76rpx;
+	height: 76rpx;
+	border-radius: 28rpx;
+	@include flex-center;
+	background: linear-gradient(135deg, rgba(110, 231, 183, 0.95), rgba(103, 232, 249, 0.88));
+	box-shadow: 0 12rpx 28rpx rgba(20, 184, 166, 0.18);
+	color: #ffffff;
+	font-size: 34rpx;
+	font-weight: 900;
+}
+
+.bio-profile-main {
+	flex: 1;
+	min-width: 0;
+	@include flex-col;
+	gap: 6rpx;
+}
+
+.bio-rank {
+	font-size: 29rpx;
+	line-height: 1.25;
+	font-weight: 900;
+	color: var(--bio-text);
+}
+
+.bio-level {
+	font-size: 23rpx;
+	font-weight: 800;
+	color: #64748B;
+}
+
+.bio-subtitle {
+	font-size: 21rpx;
+	line-height: 1.45;
+	color: #64748B;
+}
+
+.bio-coin-pill {
+	flex-shrink: 0;
+	display: flex;
+	align-items: center;
+	gap: 6rpx;
+	padding: 10rpx 14rpx;
+	border-radius: 999rpx;
+	background: rgba(255, 251, 235, 0.78);
+	border: 1rpx solid rgba(251, 191, 36, 0.22);
+}
+
+.bio-coin-icon,
+.bio-coin-value {
+	font-size: 22rpx;
+	font-weight: 900;
+	color: #92400E;
+}
+
+.bio-hp-box {
+	margin-top: 30rpx;
+	padding: 18rpx;
+	border-radius: 26rpx;
+	background: rgba(248, 250, 252, 0.72);
+	border: 1rpx solid rgba(148, 163, 184, 0.12);
+}
+
+.bio-hp-track {
+	position: relative;
+	height: 24rpx;
+	border-radius: 999rpx;
+	overflow: hidden;
+	background: linear-gradient(90deg, rgba(217, 119, 6, 0.18), rgba(226, 232, 240, 0.66));
+}
+
+.bio-hp-fill {
+	position: absolute;
+	top: 0;
+	left: 0;
+	height: 100%;
+	border-radius: inherit;
+	background: linear-gradient(90deg, var(--bio-hp-life), var(--bio-hp-clear));
+	box-shadow: 0 0 18rpx rgba(103, 232, 249, 0.26);
+	animation: bioHpPulse 5s ease-in-out infinite;
+}
+
+.bio-hp-clear {
+	position: absolute;
+	inset: 0;
+	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
+	animation: bioClearFlow 2s ease-in-out infinite;
+}
+
+.bio-hp-meta {
+	margin-top: 12rpx;
+	display: flex;
+	justify-content: space-between;
+	font-size: 22rpx;
+	font-weight: 800;
+	color: #475569;
+}
+
+.bio-buff-pill {
+	align-self: flex-start;
+	margin-top: 24rpx;
+	display: inline-flex;
+	align-items: center;
+	gap: 8rpx;
+	padding: 12rpx 18rpx;
+	border-radius: 999rpx;
+	border: 1rpx solid rgba(167, 139, 250, 0.44);
+	background: rgba(250, 245, 255, 0.58);
+	color: #6D28D9;
+	font-size: 22rpx;
+	font-weight: 800;
+}
+
+.bio-buff-star {
+	color: var(--bio-lavender);
+}
+
+.bio-console-card {
+	display: flex;
+	align-items: center;
+	gap: 20rpx;
+	padding: 28rpx;
+	border-radius: 34rpx;
+	background:
+		radial-gradient(circle at 18% 50%, rgba(110, 231, 183, 0.25), transparent 36%),
+		linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(236, 253, 245, 0.62));
+}
+
+.bio-console-orbit {
+	width: 128rpx;
+	height: 128rpx;
+	border-radius: 50%;
+	@include flex-center;
+	background: conic-gradient(from 180deg, rgba(110, 231, 183, 0.9), rgba(103, 232, 249, 0.55), rgba(217, 119, 6, 0.22), rgba(110, 231, 183, 0.9));
+}
+
+.bio-console-core {
+	width: 96rpx;
+	height: 96rpx;
+	border-radius: 50%;
+	@include flex-center;
+	background: #ffffff;
+	color: #0F766E;
+	font-size: 46rpx;
+	font-weight: 900;
+}
+
+.bio-console-core-done {
+	background: linear-gradient(135deg, var(--bio-hp-life), var(--bio-hp-clear));
+	color: #ffffff;
+}
+
+.bio-console-copy {
+	flex: 1;
+	min-width: 0;
+	@include flex-col;
+	gap: 8rpx;
+}
+
+.bio-console-kicker {
+	font-size: 19rpx;
+	font-weight: 900;
+	letter-spacing: 1.6rpx;
+	color: #0891B2;
+}
+
+.bio-console-title {
+	font-size: 31rpx;
+	line-height: 1.25;
+	font-weight: 900;
+	color: var(--bio-text);
+}
+
+.bio-console-desc {
+	font-size: 22rpx;
+	line-height: 1.55;
+	color: #64748B;
+}
+
+.bio-console-action {
+	align-self: stretch;
+	@include flex-center;
+	min-width: 86rpx;
+	padding: 0 18rpx;
+	border-radius: 22rpx;
+	background: linear-gradient(180deg, #FBBF24, #D97706);
+	color: #ffffff;
+	font-size: 23rpx;
+	font-weight: 900;
+}
+
+.bio-health-card,
+.bio-trend-card {
+	padding: 28rpx;
+	border-radius: 34rpx;
+}
+
+.bio-section-head {
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	gap: 18rpx;
+}
+
+.bio-section-head-compact {
+	align-items: center;
+}
+
+.bio-section-title {
+	display: block;
+	font-size: 29rpx;
+	font-weight: 900;
+	color: var(--bio-text);
+}
+
+.bio-section-subtitle {
+	display: block;
+	margin-top: 8rpx;
+	font-size: 21rpx;
+	line-height: 1.45;
+	color: #64748B;
+}
+
+.bio-section-chip {
+	flex-shrink: 0;
+	padding: 8rpx 14rpx;
+	border-radius: 999rpx;
+	background: rgba(236, 253, 245, 0.86);
+	border: 1rpx solid rgba(110, 231, 183, 0.28);
+	font-size: 20rpx;
+	font-weight: 900;
+	color: #0F766E;
+}
+
+.bio-health-body {
+	margin-top: 24rpx;
+	display: flex;
+	align-items: center;
+	gap: 26rpx;
+}
+
+.bio-health-ring {
+	width: 166rpx;
+	height: 166rpx;
+	border-radius: 50%;
+	padding: 12rpx;
+	box-sizing: border-box;
+	flex-shrink: 0;
+}
+
+.bio-health-ring-inner {
+	width: 100%;
+	height: 100%;
+	border-radius: 50%;
+	@include flex-center;
+	flex-direction: column;
+	background: rgba(255, 255, 255, 0.92);
+	box-shadow: inset 0 0 0 1rpx rgba(148, 163, 184, 0.1);
+}
+
+.bio-health-ring-value {
+	font-size: 34rpx;
+	font-weight: 900;
+	color: var(--bio-text);
+}
+
+.bio-health-ring-label {
+	margin-top: 4rpx;
+	font-size: 20rpx;
+	font-weight: 800;
+	color: #64748B;
+}
+
+.bio-health-metrics {
+	flex: 1;
+	min-width: 0;
+	padding: 18rpx 20rpx;
+	border-radius: 26rpx;
+	background: linear-gradient(180deg, rgba(248, 250, 252, 0.78), rgba(255, 255, 255, 0.68));
+	border: 1rpx solid rgba(148, 163, 184, 0.1);
+}
+
+.bio-health-row {
+	display: flex;
+	justify-content: space-between;
+	gap: 14rpx;
+	padding: 8rpx 0;
+}
+
+.bio-health-name {
+	font-size: 22rpx;
+	font-weight: 800;
+	color: #475569;
+}
+
+.bio-health-value {
+	font-size: 22rpx;
+	font-weight: 900;
+	color: #0F766E;
+}
+
+.bio-health-divider {
+	height: 1rpx;
+	margin: 12rpx 0 14rpx;
+	background: rgba(148, 163, 184, 0.18);
+}
+
+.bio-life-row {
+	@include flex-col;
+	gap: 4rpx;
+}
+
+.bio-life-value {
+	font-size: 34rpx;
+	line-height: 1.2;
+	font-weight: 900;
+	color: var(--bio-gold);
+}
+
+.bio-life-label {
+	font-size: 21rpx;
+	font-weight: 800;
+	color: #64748B;
+}
+
+.bio-trend-card {
+	background: linear-gradient(135deg, #ECFDF5 0%, #F0F9FF 100%);
+}
+
+.bio-trend-chart {
+	height: 176rpx;
+	margin-top: 22rpx;
+	padding: 0 4rpx;
+	display: flex;
+	align-items: flex-end;
+	justify-content: space-between;
+	border-bottom: 1rpx solid rgba(100, 116, 139, 0.18);
+}
+
+.bio-trend-col {
+	flex: 1;
+	min-width: 0;
+	@include flex-center;
+	flex-direction: column;
+	justify-content: flex-end;
+	gap: 10rpx;
+}
+
+.bio-trend-line {
+	position: relative;
+	width: 4rpx;
+	border-radius: 999rpx;
+	background: linear-gradient(180deg, rgba(103, 232, 249, 0.86), rgba(110, 231, 183, 0.44));
+}
+
+.bio-trend-dot {
+	position: absolute;
+	top: -8rpx;
+	left: 50%;
+	width: 16rpx;
+	height: 16rpx;
+	margin-left: -8rpx;
+	border-radius: 50%;
+	background: #67E8F9;
+	box-shadow: 0 0 0 5rpx rgba(103, 232, 249, 0.14);
+}
+
+.bio-trend-dot-active {
+	background: var(--bio-gold);
+	box-shadow: 0 0 0 6rpx rgba(251, 191, 36, 0.18);
+}
+
+.bio-trend-label {
+	font-size: 18rpx;
+	color: #64748B;
+}
+
+.bio-action-grid {
+	display: grid;
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+	gap: 18rpx;
+}
+
+.bio-action-card {
+	padding: 22rpx;
+	border-radius: 28rpx;
+	background: rgba(255, 255, 255, 0.74);
+}
+
+.bio-action-title {
+	display: block;
+	font-size: 25rpx;
+	font-weight: 900;
+	color: var(--bio-text);
+}
+
+.bio-action-desc {
+	display: block;
+	margin-top: 8rpx;
+	font-size: 21rpx;
+	line-height: 1.45;
+	color: #64748B;
+}
+
+.bio-tip-card {
+	display: flex;
+	align-items: flex-start;
+	gap: 12rpx;
+	padding: 20rpx 22rpx;
+	border-radius: 26rpx;
+	background: rgba(250, 245, 255, 0.54);
+	border-color: rgba(167, 139, 250, 0.2);
+}
+
+.bio-tip-icon {
+	font-size: 24rpx;
+	color: var(--bio-lavender);
+	flex-shrink: 0;
+}
+
+.bio-tip-text {
+	font-size: 22rpx;
+	line-height: 1.55;
+	color: #475569;
+}
+
+@keyframes bioHpPulse {
+	0%, 100% { filter: brightness(1); }
+	50% { filter: brightness(1.05); }
+}
+
+@keyframes bioClearFlow {
+	0% { transform: translateX(-100%); opacity: 0.15; }
+	50% { opacity: 0.28; }
+	100% { transform: translateX(100%); opacity: 0.15; }
+}
+
+@keyframes bioBreathLine {
+	0%, 100% { opacity: 0.1; }
+	50% { opacity: 0.22; }
+}
+// ===== UI.md 记录模式生物数据仪表盘 =====
+.record-bio-home {
+	--record-clear: #67E8F9;
+	--record-life: #6EE7B7;
+	--record-amber: #D97706;
+	--record-gold: #FBBF24;
+	--record-lavender: #A78BFA;
+	--record-text: #1E293B;
+	@include flex-col;
+	gap: 20rpx;
+	color: var(--record-text);
+}
+
+.record-bio-status-card,
+.record-bio-console-card,
+.record-bio-health-card,
+.record-bio-trend-card,
+.record-bio-achievement-card,
+.record-bio-tip-card {
+	position: relative;
+	overflow: hidden;
+	border: 1rpx solid rgba(255, 255, 255, 0.82);
+	background: rgba(255, 255, 255, 0.72);
+	box-shadow: 0 18rpx 44rpx rgba(30, 41, 59, 0.07);
+	backdrop-filter: blur(12px);
+}
+
+.record-bio-status-card {
+	padding: 28rpx;
+	border-radius: 34rpx;
+	background:
+		linear-gradient(135deg, rgba(255, 255, 255, 0.76), rgba(240, 249, 255, 0.62)),
+		radial-gradient(circle at top right, rgba(251, 191, 36, 0.17), transparent 34%);
+}
+
+.record-bio-breath-line {
+	position: absolute;
+	top: 0;
+	left: 32rpx;
+	right: 32rpx;
+	height: 2rpx;
+	background: linear-gradient(90deg, transparent, rgba(251, 191, 36, 0.38), rgba(103, 232, 249, 0.44), transparent);
+	animation: bioBreathLine 6s ease-in-out infinite;
+}
+
+.record-bio-profile-row {
+	display: flex;
+	align-items: center;
+	gap: 18rpx;
+}
+
+.record-bio-avatar {
+	width: 76rpx;
+	height: 76rpx;
+	border-radius: 28rpx;
+	@include flex-center;
+	background: linear-gradient(135deg, #FBBF24, #67E8F9);
+	box-shadow: 0 12rpx 28rpx rgba(217, 119, 6, 0.14);
+	color: #ffffff;
+	font-size: 34rpx;
+	font-weight: 900;
+}
+
+.record-bio-profile-main {
+	flex: 1;
+	min-width: 0;
+	@include flex-col;
+	gap: 6rpx;
+}
+
+.record-bio-rank {
+	font-size: 29rpx;
+	line-height: 1.25;
+	font-weight: 900;
+	color: var(--record-text);
+}
+
+.record-bio-level {
+	font-size: 23rpx;
+	font-weight: 800;
+	color: #64748B;
+}
+
+.record-bio-subtitle {
+	font-size: 21rpx;
+	line-height: 1.45;
+	color: #64748B;
+}
+
+.record-bio-target-pill {
+	flex-shrink: 0;
+	display: flex;
+	align-items: center;
+	gap: 6rpx;
+	padding: 10rpx 14rpx;
+	border-radius: 999rpx;
+	background: rgba(236, 253, 245, 0.82);
+	border: 1rpx solid rgba(16, 185, 129, 0.16);
+}
+
+.record-bio-target-icon,
+.record-bio-target-value {
+	font-size: 22rpx;
+	font-weight: 900;
+	color: #0F766E;
+}
+
+.record-bio-hp-box {
+	margin-top: 30rpx;
+	padding: 18rpx;
+	border-radius: 26rpx;
+	background: rgba(248, 250, 252, 0.72);
+	border: 1rpx solid rgba(148, 163, 184, 0.12);
+}
+
+.record-bio-hp-track {
+	position: relative;
+	height: 24rpx;
+	border-radius: 999rpx;
+	overflow: hidden;
+	background: linear-gradient(90deg, rgba(217, 119, 6, 0.18), rgba(226, 232, 240, 0.66));
+}
+
+.record-bio-hp-fill {
+	position: absolute;
+	top: 0;
+	left: 0;
+	height: 100%;
+	border-radius: inherit;
+	background: linear-gradient(90deg, var(--record-life), var(--record-clear));
+	box-shadow: 0 0 18rpx rgba(103, 232, 249, 0.26);
+	animation: bioHpPulse 5s ease-in-out infinite;
+}
+
+.record-bio-hp-clear {
+	position: absolute;
+	inset: 0;
+	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
+	animation: bioClearFlow 2s ease-in-out infinite;
+}
+
+.record-bio-hp-meta {
+	margin-top: 12rpx;
+	display: flex;
+	justify-content: space-between;
+	font-size: 22rpx;
+	font-weight: 800;
+	color: #475569;
+}
+
+.record-bio-buff-pill {
+	align-self: flex-start;
+	margin-top: 24rpx;
+	display: inline-flex;
+	align-items: center;
+	gap: 8rpx;
+	padding: 12rpx 18rpx;
+	border-radius: 999rpx;
+	border: 1rpx solid rgba(167, 139, 250, 0.36);
+	background: rgba(250, 245, 255, 0.58);
+	color: #6D28D9;
+	font-size: 22rpx;
+	font-weight: 800;
+}
+
+.record-bio-buff-star {
+	color: var(--record-lavender);
+}
+
+.record-bio-console-card {
+	display: flex;
+	align-items: center;
+	gap: 22rpx;
+	padding: 28rpx;
+	border-radius: 34rpx;
+	background:
+		radial-gradient(circle at 18% 50%, rgba(251, 191, 36, 0.18), transparent 34%),
+		linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(236, 253, 245, 0.62));
+}
+
+.record-bio-console-left {
+	flex-shrink: 0;
+}
+
+.record-bio-orbit {
+	width: 154rpx;
+	height: 154rpx;
+	border-radius: 50%;
+	padding: 12rpx;
+	box-sizing: border-box;
+}
+
+.record-bio-orbit-inner {
+	width: 100%;
+	height: 100%;
+	border-radius: 50%;
+	@include flex-center;
+	flex-direction: column;
+	background: rgba(255, 255, 255, 0.94);
+}
+
+.record-bio-orbit-kicker,
+.record-bio-orbit-label {
+	font-size: 18rpx;
+	font-weight: 800;
+	color: #64748B;
+}
+
+.record-bio-orbit-value {
+	margin: 5rpx 0;
+	font-size: 24rpx;
+	line-height: 1.1;
+	font-weight: 900;
+	color: var(--record-text);
+}
+
+.record-bio-console-main {
+	flex: 1;
+	min-width: 0;
+	@include flex-col;
+	gap: 8rpx;
+}
+
+.record-bio-console-kicker {
+	font-size: 19rpx;
+	font-weight: 900;
+	letter-spacing: 1.6rpx;
+	color: #0891B2;
+}
+
+.record-bio-console-title {
+	font-size: 31rpx;
+	line-height: 1.25;
+	font-weight: 900;
+	color: var(--record-text);
+}
+
+.record-bio-console-desc {
+	font-size: 22rpx;
+	line-height: 1.55;
+	color: #64748B;
+}
+
+.record-bio-action-row {
+	display: grid;
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+	gap: 12rpx;
+	margin-top: 12rpx;
+}
+
+.record-bio-action {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 8rpx;
+	height: 64rpx;
+	border-radius: 20rpx;
+	font-size: 22rpx;
+	font-weight: 900;
+}
+
+.record-bio-action-primary {
+	background: linear-gradient(135deg, #FBBF24, #D97706);
+	color: #ffffff;
+	box-shadow: 0 10rpx 22rpx rgba(217, 119, 6, 0.16);
+}
+
+.record-bio-action-ghost {
+	background: rgba(255, 255, 255, 0.78);
+	border: 1rpx solid rgba(15, 118, 110, 0.16);
+	color: #0F766E;
+}
+
+.record-bio-action-disabled {
+	opacity: 0.58;
+}
+
+.record-bio-action-icon {
+	font-size: 24rpx;
+	font-weight: 900;
+}
+
+.record-bio-health-card,
+.record-bio-trend-card,
+.record-bio-achievement-card {
+	padding: 28rpx;
+	border-radius: 34rpx;
+}
+
+.record-bio-section-head {
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	gap: 18rpx;
+}
+
+.record-bio-section-head-compact {
+	align-items: center;
+}
+
+.record-bio-section-title {
+	display: block;
+	font-size: 29rpx;
+	font-weight: 900;
+	color: var(--record-text);
+}
+
+.record-bio-section-subtitle {
+	display: block;
+	margin-top: 8rpx;
+	font-size: 21rpx;
+	line-height: 1.45;
+	color: #64748B;
+}
+
+.record-bio-section-chip {
+	flex-shrink: 0;
+	padding: 8rpx 14rpx;
+	border-radius: 999rpx;
+	background: rgba(255, 251, 235, 0.9);
+	border: 1rpx solid rgba(251, 191, 36, 0.22);
+	font-size: 20rpx;
+	font-weight: 900;
+	color: #B45309;
+}
+
+.record-bio-health-body {
+	margin-top: 24rpx;
+	display: flex;
+	align-items: center;
+	gap: 26rpx;
+}
+
+.record-bio-health-ring {
+	width: 166rpx;
+	height: 166rpx;
+	border-radius: 50%;
+	padding: 12rpx;
+	box-sizing: border-box;
+	flex-shrink: 0;
+}
+
+.record-bio-health-ring-inner {
+	width: 100%;
+	height: 100%;
+	border-radius: 50%;
+	@include flex-center;
+	flex-direction: column;
+	background: rgba(255, 255, 255, 0.92);
+	box-shadow: inset 0 0 0 1rpx rgba(148, 163, 184, 0.1);
+}
+
+.record-bio-health-ring-value {
+	font-size: 36rpx;
+	font-weight: 900;
+	color: var(--record-text);
+}
+
+.record-bio-health-ring-label {
+	margin-top: 4rpx;
+	font-size: 20rpx;
+	font-weight: 800;
+	color: #64748B;
+}
+
+.record-bio-metrics {
+	flex: 1;
+	min-width: 0;
+	padding: 18rpx 20rpx;
+	border-radius: 26rpx;
+	background: linear-gradient(180deg, rgba(248, 250, 252, 0.78), rgba(255, 255, 255, 0.68));
+	border: 1rpx solid rgba(148, 163, 184, 0.1);
+}
+
+.record-bio-metric-row {
+	display: flex;
+	justify-content: space-between;
+	gap: 14rpx;
+	padding: 8rpx 0;
+}
+
+.record-bio-metric-name {
+	font-size: 22rpx;
+	font-weight: 800;
+	color: #475569;
+}
+
+.record-bio-metric-value {
+	font-size: 22rpx;
+	font-weight: 900;
+	color: #0F766E;
+}
+
+.record-bio-divider {
+	height: 1rpx;
+	margin: 12rpx 0 14rpx;
+	background: rgba(148, 163, 184, 0.18);
+}
+
+.record-bio-life-row {
+	@include flex-col;
+	gap: 4rpx;
+}
+
+.record-bio-life-value {
+	font-size: 34rpx;
+	line-height: 1.2;
+	font-weight: 900;
+	color: var(--record-gold);
+}
+
+.record-bio-life-label {
+	font-size: 21rpx;
+	font-weight: 800;
+	color: #64748B;
+}
+
+.record-bio-trend-card {
+	background: linear-gradient(135deg, #ECFDF5 0%, #F0F9FF 100%);
+}
+
+.record-bio-trend-chart {
+	height: 176rpx;
+	margin-top: 22rpx;
+	padding: 0 4rpx;
+	display: flex;
+	align-items: flex-end;
+	justify-content: space-between;
+	border-bottom: 1rpx solid rgba(100, 116, 139, 0.18);
+}
+
+.record-bio-trend-col {
+	flex: 1;
+	min-width: 0;
+	@include flex-center;
+	flex-direction: column;
+	justify-content: flex-end;
+	gap: 10rpx;
+}
+
+.record-bio-trend-line {
+	position: relative;
+	width: 4rpx;
+	border-radius: 999rpx;
+	background: linear-gradient(180deg, rgba(251, 191, 36, 0.86), rgba(103, 232, 249, 0.5));
+}
+
+.record-bio-trend-dot {
+	position: absolute;
+	top: -8rpx;
+	left: 50%;
+	width: 16rpx;
+	height: 16rpx;
+	margin-left: -8rpx;
+	border-radius: 50%;
+	background: #67E8F9;
+	box-shadow: 0 0 0 5rpx rgba(103, 232, 249, 0.14);
+}
+
+.record-bio-trend-dot-active {
+	background: var(--record-gold);
+	box-shadow: 0 0 0 6rpx rgba(251, 191, 36, 0.18);
+}
+
+.record-bio-trend-label {
+	font-size: 18rpx;
+	color: #64748B;
+}
+
+.record-bio-achievement-card {
+	background: linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(250, 245, 255, 0.5));
+}
+
+.record-bio-ach-progress {
+	margin-top: 22rpx;
+}
+
+.record-bio-ach-bar {
+	height: 14rpx;
+	border-radius: 999rpx;
+	overflow: hidden;
+	background: rgba(226, 232, 240, 0.8);
+}
+
+.record-bio-ach-fill {
+	height: 100%;
+	border-radius: inherit;
+	background: linear-gradient(90deg, var(--record-lavender), var(--record-clear));
+}
+
+.record-bio-ach-hint {
+	display: block;
+	margin-top: 12rpx;
+	font-size: 21rpx;
+	line-height: 1.5;
+	color: #64748B;
+}
+
+.record-bio-tip-card {
+	display: flex;
+	align-items: flex-start;
+	gap: 12rpx;
+	padding: 20rpx 22rpx;
+	border-radius: 26rpx;
+	background: rgba(250, 245, 255, 0.54);
+	border-color: rgba(167, 139, 250, 0.2);
+}
+
+.record-bio-tip-icon {
+	font-size: 24rpx;
+	color: var(--record-lavender);
+	flex-shrink: 0;
+}
+
+.record-bio-tip-text {
+	font-size: 22rpx;
+	line-height: 1.55;
+	color: #475569;
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/onboarding/index.vue b/src/pages/onboarding/index.vue
index 40a5cbf..2ee8432 100644
--- a/src/pages/onboarding/index.vue
+++ b/src/pages/onboarding/index.vue
@@ -115,8 +115,13 @@
 
 			<!-- 成就风格 -->
 			<view v-if="achievementThemes.length > 0" class="form-section">
-				<text class="section-label">成就称号风格</text>
-				<text class="section-hint">打卡越久，称号越高</text>
+				<view class="theme-section-head">
+					<view>
+						<text class="section-label">成就称号风格</text>
+						<text class="section-hint">选择一套更能激励你的成长称号</text>
+					</view>
+					<text class="theme-section-badge">可更换</text>
+				</view>
 				<view class="theme-list">
 					<view
 						v-for="theme in achievementThemes"
@@ -125,16 +130,25 @@
 						:class="{ 'theme-card-active': formData.achievement_theme_id === theme.id }"
 						@tap="formData.achievement_theme_id = theme.id"
 					>
+						<view class="theme-glow"></view>
 						<view class="theme-header">
-							<text class="theme-icon">{{ theme.icon }}</text>
-							<text class="theme-name">{{ theme.name }}</text>
+							<view class="theme-icon-wrap">
+								<text class="theme-icon">{{ theme.icon }}</text>
+							</view>
+							<view class="theme-title-wrap">
+								<text class="theme-name">{{ theme.name }}</text>
+								<text class="theme-desc">打卡进度会逐步解锁称号</text>
+							</view>
+							<view class="theme-check">
+								<text v-if="formData.achievement_theme_id === theme.id">✓</text>
+							</view>
 						</view>
 						<view class="theme-levels">
 							<text
 								v-for="(level, idx) in theme.levels"
 								:key="level.id"
 								class="theme-level"
-							>{{ level.name }}<text v-if="idx < theme.levels.length - 1" class="theme-arrow"> → </text></text>
+							>{{ level.name }}</text>
 						</view>
 					</view>
 				</view>
@@ -263,10 +277,6 @@ async function handleSubmit() {
 		uni.showLoading({ title: '保存中...' })
 		await profileStore.saveProfile(formData.value)
 		uni.hideLoading()
-		if (!formData.value.mode) {
-			uni.redirectTo({ url: '/pages/mode-select/index' })
-			return
-		}
 		uni.switchTab({ url: '/pages/index/index' })
 	} catch (e) {
 		uni.hideLoading()
@@ -539,66 +549,180 @@ onShareAppMessage(() => {
 	margin-bottom: 16rpx;
 }
 
+.theme-section-head {
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	gap: 20rpx;
+	margin-bottom: 18rpx;
+}
+
+.theme-section-head .section-hint {
+	margin-bottom: 0;
+}
+
+.theme-section-badge {
+	flex-shrink: 0;
+	padding: 8rpx 16rpx;
+	border-radius: 999rpx;
+	background: rgba(110, 231, 183, 0.16);
+	border: 1rpx solid rgba(16, 185, 129, 0.16);
+	font-size: 20rpx;
+	font-weight: 700;
+	color: #0F766E;
+}
+
 .theme-list {
 	display: flex;
 	flex-direction: column;
-	gap: 12rpx;
+	gap: 18rpx;
 }
 
 .theme-card {
-	padding: 20rpx;
-	border-radius: 20rpx;
-	background: #F9FBFA;
-	border: 2rpx solid #F0F0F0;
+	position: relative;
+	overflow: hidden;
+	padding: 24rpx;
+	border-radius: 28rpx;
+	background:
+		linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.92));
+	border: 2rpx solid rgba(226, 232, 240, 0.9);
 	box-sizing: border-box;
+	box-shadow: 0 10rpx 28rpx rgba(15, 23, 42, 0.04);
 }
 
 .theme-card-active {
-	background: #E8F5F0;
-	border-color: #10B981;
+	background:
+		radial-gradient(circle at top right, rgba(103, 232, 249, 0.28), transparent 34%),
+		linear-gradient(135deg, rgba(236, 253, 245, 0.98), rgba(240, 249, 255, 0.94));
+	border-color: rgba(16, 185, 129, 0.72);
+	box-shadow: 0 18rpx 42rpx rgba(16, 185, 129, 0.13);
+}
+
+.theme-glow {
+	position: absolute;
+	top: -70rpx;
+	right: -70rpx;
+	width: 190rpx;
+	height: 190rpx;
+	border-radius: 50%;
+	background: rgba(110, 231, 183, 0.12);
+}
+
+.theme-card-active .theme-glow {
+	background: rgba(103, 232, 249, 0.28);
 }
 
 .theme-header {
+	position: relative;
 	display: flex;
 	align-items: center;
-	gap: 10rpx;
-	margin-bottom: 10rpx;
+	gap: 18rpx;
+	margin-bottom: 20rpx;
+}
+
+.theme-icon-wrap {
+	width: 72rpx;
+	height: 72rpx;
+	border-radius: 24rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: rgba(241, 245, 249, 0.92);
+	border: 1rpx solid rgba(226, 232, 240, 0.9);
+	box-shadow: inset 0 1rpx 0 rgba(255, 255, 255, 0.7);
+	flex-shrink: 0;
+}
+
+.theme-card-active .theme-icon-wrap {
+	background: linear-gradient(135deg, #6EE7B7, #67E8F9);
+	border-color: rgba(255, 255, 255, 0.9);
+	box-shadow: 0 12rpx 26rpx rgba(20, 184, 166, 0.18);
 }
 
 .theme-icon {
-	font-size: 32rpx;
+	font-size: 36rpx;
+	line-height: 1;
+}
+
+.theme-title-wrap {
+	flex: 1;
+	min-width: 0;
+	display: flex;
+	flex-direction: column;
+	gap: 6rpx;
 }
 
 .theme-name {
-	font-size: 28rpx;
-	font-weight: 700;
-	color: #1A1A1A;
+	font-size: 29rpx;
+	line-height: 1.25;
+	font-weight: 800;
+	color: #1E293B;
+}
+
+.theme-desc {
+	font-size: 21rpx;
+	line-height: 1.4;
+	color: #64748B;
 }
 
 .theme-card-active .theme-name {
-	color: #10B981;
+	color: #0F766E;
+}
+
+.theme-check {
+	width: 42rpx;
+	height: 42rpx;
+	border-radius: 50%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border: 2rpx solid rgba(148, 163, 184, 0.34);
+	background: rgba(255, 255, 255, 0.78);
+	color: #FFFFFF;
+	font-size: 24rpx;
+	font-weight: 900;
+	flex-shrink: 0;
+}
+
+.theme-card-active .theme-check {
+	border-color: transparent;
+	background: linear-gradient(135deg, #10B981, #06B6D4);
+	box-shadow: 0 8rpx 18rpx rgba(16, 185, 129, 0.2);
 }
 
 .theme-levels {
-	font-size: 22rpx;
-	color: #999999;
-	line-height: 1.6;
+	position: relative;
+	display: flex;
+	flex-wrap: wrap;
+	gap: 10rpx;
 }
 
 .theme-level {
-	font-size: 22rpx;
+	max-width: 100%;
+	padding: 8rpx 14rpx;
+	border-radius: 999rpx;
+	background: rgba(241, 245, 249, 0.95);
+	border: 1rpx solid rgba(226, 232, 240, 0.9);
+	font-size: 21rpx;
+	line-height: 1.35;
+	font-weight: 700;
+	color: #64748B;
 }
 
 .theme-card-active .theme-level {
-	color: #10B981;
+	background: rgba(255, 255, 255, 0.72);
+	border-color: rgba(16, 185, 129, 0.15);
+	color: #0F766E;
+}
+
+.theme-card-active .theme-level:first-child {
+	background: rgba(251, 191, 36, 0.18);
+	border-color: rgba(251, 191, 36, 0.22);
+	color: #B45309;
 }
 
 .theme-arrow {
-	color: #CCCCCC;
-}
-
-.theme-card-active .theme-arrow {
-	color: #6EE7B7;
+	display: none;
 }
 
 .bottom-space {
diff --git a/src/pages/supervisor/index.vue b/src/pages/supervisor/index.vue
index a08e10b..1e5a484 100644
--- a/src/pages/supervisor/index.vue
+++ b/src/pages/supervisor/index.vue
@@ -1,13 +1,38 @@
 <template>
 	<view class="page">
+		<view class="bg-orb bg-orb-main"></view>
+		<view class="bg-orb bg-orb-soft"></view>
+
 		<view class="header">
-			<text class="title">监督人机制</text>
-			<text class="subtitle">邀请朋友监督你的戒烟旅程，或者你来监督别人</text>
+			<view class="header-copy">
+				<text class="eyebrow">ACCOUNTABILITY</text>
+				<text class="title">监督人机制</text>
+				<text class="subtitle">邀请朋友监督你的戒烟旅程，也可以成为别人的坚持搭子。</text>
+			</view>
+			<view class="hero-panel">
+				<view class="hero-stat">
+					<text class="hero-stat-value">{{ supervisorItems.length }}/3</text>
+					<text class="hero-stat-label">监督我的人</text>
+				</view>
+				<view class="hero-divider"></view>
+				<view class="hero-stat">
+					<text class="hero-stat-value">{{ overviewItems.length }}</text>
+					<text class="hero-stat-label">我监督的人</text>
+				</view>
+				<view class="hero-divider"></view>
+				<view class="hero-stat">
+					<text class="hero-stat-value">{{ reminderEnabled ? 'ON' : 'OFF' }}</text>
+					<text class="hero-stat-label">提醒状态</text>
+				</view>
+			</view>
 		</view>
 
 		<view class="card">
 			<view class="card-head">
-				<text class="card-title">邀请监督人</text>
+				<view class="card-title-wrap">
+					<view class="card-icon">🤝</view>
+					<text class="card-title">邀请监督人</text>
+				</view>
 				<text class="card-meta">已绑定 {{ supervisorItems.length }}/3</text>
 			</view>
 
@@ -36,11 +61,15 @@
 
 		<view class="card">
 			<view class="card-head">
-				<text class="card-title">我监督的人</text>
+				<view class="card-title-wrap">
+					<view class="card-icon card-icon-blue">👀</view>
+					<text class="card-title">我监督的人</text>
+				</view>
 				<text class="card-meta">{{ overviewItems.length }} 人</text>
 			</view>
 
 			<view v-if="overviewItems.length === 0" class="empty">
+				<text class="empty-icon">🫶</text>
 				<text class="empty-text">还没有绑定监督关系</text>
 				<text class="empty-hint">收到口令后可去“绑定监督”页面完成绑定</text>
 				<button class="btn btn-ghost" @tap="gotoBindPage">去绑定监督</button>
@@ -69,10 +98,14 @@
 
 		<view class="card">
 			<view class="card-head">
-				<text class="card-title">监督我的人</text>
+				<view class="card-title-wrap">
+					<view class="card-icon card-icon-orange">🛡️</view>
+					<text class="card-title">监督我的人</text>
+				</view>
 				<text class="card-meta">{{ supervisorItems.length }} 人</text>
 			</view>
 			<view v-if="supervisorItems.length === 0" class="empty">
+				<text class="empty-icon">🌱</text>
 				<text class="empty-text">还没有人监督你</text>
 				<text class="empty-hint">你可以先生成邀请口令发送给朋友</text>
 			</view>
@@ -89,7 +122,10 @@
 
 		<view class="card">
 			<view class="card-head">
-				<text class="card-title">提醒设置</text>
+				<view class="card-title-wrap">
+					<view class="card-icon card-icon-purple">🔔</view>
+					<text class="card-title">提醒设置</text>
+				</view>
 				<text class="card-meta">默认关闭</text>
 			</view>
 
@@ -136,7 +172,10 @@
 
 		<view class="card">
 			<view class="card-head">
-				<text class="card-title">提醒测试（监督人）</text>
+				<view class="card-title-wrap">
+					<view class="card-icon card-icon-gray">⚡</view>
+					<text class="card-title">提醒测试（监督人）</text>
+				</view>
 				<text class="card-meta">仅写日志</text>
 			</view>
 			<view class="settings">
@@ -417,122 +456,285 @@ onShow(async () => {
 
 <style scoped>
 .page {
+	position: relative;
 	min-height: 100vh;
-	padding: 28rpx 28rpx 40rpx;
+	padding: 30rpx 28rpx 48rpx;
 	box-sizing: border-box;
-	background: linear-gradient(180deg, #eef7f3 0%, #f7faf8 40%, #fbfdff 100%);
+	overflow: hidden;
+	background:
+		radial-gradient(circle at 16% 0%, rgba(31, 191, 143, 0.18), transparent 34%),
+		radial-gradient(circle at 92% 10%, rgba(96, 165, 250, 0.15), transparent 30%),
+		linear-gradient(180deg, #eef7f3 0%, #f7faf8 42%, #fbfdff 100%);
+}
+
+.bg-orb {
+	position: absolute;
+	border-radius: 999rpx;
+	pointer-events: none;
+	filter: blur(2rpx);
+}
+
+.bg-orb-main {
+	top: 126rpx;
+	right: -86rpx;
+	width: 230rpx;
+	height: 230rpx;
+	background: rgba(26, 163, 122, 0.12);
+}
+
+.bg-orb-soft {
+	top: 520rpx;
+	left: -100rpx;
+	width: 260rpx;
+	height: 260rpx;
+	background: rgba(96, 165, 250, 0.1);
+}
+
+.header,
+.card,
+.footer {
+	position: relative;
+	z-index: 1;
 }
 
 .header {
-	padding: 8rpx 6rpx 18rpx;
+	padding: 10rpx 4rpx 20rpx;
+}
+
+.header-copy {
+	padding: 4rpx 2rpx 24rpx;
+}
+
+.eyebrow {
+	display: inline-flex;
+	align-items: center;
+	align-self: flex-start;
+	padding: 8rpx 18rpx;
+	border-radius: 999rpx;
+	background: rgba(255, 255, 255, 0.74);
+	border: 1rpx solid rgba(26, 163, 122, 0.14);
+	color: #1aa37a;
+	font-size: 20rpx;
+	font-weight: 800;
+	letter-spacing: 1.8rpx;
 }
 
 .title {
 	display: block;
-	font-size: 40rpx;
-	font-weight: 800;
+	margin-top: 18rpx;
+	font-size: 48rpx;
+	line-height: 1.15;
+	font-weight: 900;
 	color: #0f172a;
-	letter-spacing: 0.5rpx;
+	letter-spacing: -0.8rpx;
 }
 
 .subtitle {
 	display: block;
-	margin-top: 10rpx;
-	font-size: 24rpx;
-	line-height: 1.6;
+	margin-top: 12rpx;
+	max-width: 620rpx;
+	font-size: 25rpx;
+	line-height: 1.7;
 	color: #64748b;
 }
 
+.hero-panel {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 24rpx 20rpx;
+	border-radius: 30rpx;
+	background: linear-gradient(135deg, rgba(15, 118, 110, 0.94), rgba(26, 163, 122, 0.86));
+	box-shadow: 0 18rpx 44rpx rgba(15, 118, 110, 0.2);
+	overflow: hidden;
+}
+
+.hero-stat {
+	flex: 1;
+	min-width: 0;
+	text-align: center;
+}
+
+.hero-stat-value {
+	display: block;
+	font-size: 34rpx;
+	line-height: 1.2;
+	font-weight: 900;
+	color: #ffffff;
+	letter-spacing: -0.4rpx;
+}
+
+.hero-stat-label {
+	display: block;
+	margin-top: 8rpx;
+	font-size: 20rpx;
+	line-height: 1.35;
+	color: rgba(255, 255, 255, 0.76);
+}
+
+.hero-divider {
+	width: 1rpx;
+	height: 54rpx;
+	background: rgba(255, 255, 255, 0.24);
+}
+
 .card {
-	margin-top: 18rpx;
-	background: rgba(255, 255, 255, 0.92);
-	border-radius: 26rpx;
-	border: 1rpx solid rgba(15, 23, 42, 0.06);
-	padding: 22rpx 22rpx;
-	box-shadow: 0 10rpx 26rpx rgba(15, 23, 42, 0.05);
+	margin-top: 20rpx;
+	padding: 26rpx;
+	border-radius: 32rpx;
+	background: rgba(255, 255, 255, 0.9);
+	border: 1rpx solid rgba(255, 255, 255, 0.86);
+	box-shadow: 0 18rpx 44rpx rgba(15, 23, 42, 0.07);
+	backdrop-filter: blur(18rpx);
 }
 
 .card-head {
 	display: flex;
-	align-items: baseline;
+	align-items: center;
 	justify-content: space-between;
 	gap: 16rpx;
 }
 
+.card-title-wrap {
+	display: flex;
+	align-items: center;
+	gap: 12rpx;
+	min-width: 0;
+}
+
+.card-icon {
+	width: 50rpx;
+	height: 50rpx;
+	line-height: 50rpx;
+	border-radius: 18rpx;
+	text-align: center;
+	font-size: 25rpx;
+	background: rgba(26, 163, 122, 0.12);
+}
+
+.card-icon-blue {
+	background: rgba(96, 165, 250, 0.14);
+}
+
+.card-icon-orange {
+	background: rgba(251, 146, 60, 0.15);
+}
+
+.card-icon-purple {
+	background: rgba(168, 85, 247, 0.13);
+}
+
+.card-icon-gray {
+	background: rgba(100, 116, 139, 0.12);
+}
+
 .card-title {
-	font-size: 28rpx;
-	font-weight: 800;
+	font-size: 29rpx;
+	font-weight: 900;
 	color: #0f172a;
 }
 
 .card-meta {
-	font-size: 22rpx;
-	color: #94a3b8;
+	flex-shrink: 0;
+	padding: 6rpx 14rpx;
+	border-radius: 999rpx;
+	background: rgba(241, 245, 249, 0.78);
+	font-size: 21rpx;
+	font-weight: 700;
+	color: #64748b;
 }
 
 .invite-box {
-	margin-top: 18rpx;
+	position: relative;
+	margin-top: 22rpx;
+	padding: 26rpx;
+	border-radius: 28rpx;
+	background:
+		linear-gradient(135deg, rgba(236, 253, 245, 0.94), rgba(255, 255, 255, 0.92));
+	border: 1rpx solid rgba(26, 163, 122, 0.14);
+	overflow: hidden;
 }
 
 .invite-label {
 	display: block;
 	font-size: 22rpx;
+	font-weight: 800;
 	color: #64748b;
 }
 
 .invite-token {
 	display: block;
-	margin-top: 10rpx;
-	font-size: 36rpx;
+	margin-top: 12rpx;
+	font-size: 52rpx;
+	line-height: 1.15;
 	font-weight: 900;
-	letter-spacing: 2rpx;
+	letter-spacing: 4rpx;
 	color: #0f766e;
 	font-family: 'DIN Alternate', -apple-system, sans-serif;
 }
 
 .invite-hint {
 	display: block;
-	margin-top: 10rpx;
-	font-size: 22rpx;
-	line-height: 1.6;
+	margin-top: 14rpx;
+	font-size: 23rpx;
+	line-height: 1.65;
 	color: #475569;
 }
 
 .invite-actions {
 	display: flex;
 	gap: 14rpx;
-	margin-top: 16rpx;
+	margin-top: 22rpx;
+}
+
+.invite-actions .btn {
+	flex: 1;
 }
 
 .invite-expire {
 	display: block;
-	margin-top: 14rpx;
-	font-size: 22rpx;
+	margin-top: 16rpx;
+	font-size: 21rpx;
 	color: #94a3b8;
 }
 
 .invite-empty {
-	margin-top: 18rpx;
+	margin-top: 22rpx;
 	display: flex;
 	flex-direction: column;
-	gap: 16rpx;
+	gap: 18rpx;
+	padding: 22rpx;
+	border-radius: 26rpx;
+	background: rgba(248, 250, 252, 0.74);
+	border: 1rpx dashed rgba(26, 163, 122, 0.22);
 }
 
 .invite-empty-text {
 	font-size: 24rpx;
-	line-height: 1.6;
+	line-height: 1.65;
 	color: #475569;
 }
 
 .empty {
-	margin-top: 18rpx;
-	padding: 16rpx 6rpx 6rpx;
+	margin-top: 22rpx;
+	padding: 34rpx 24rpx;
+	border-radius: 28rpx;
+	text-align: center;
+	background: linear-gradient(180deg, rgba(248, 250, 252, 0.78), rgba(255, 255, 255, 0.76));
+	border: 1rpx dashed rgba(100, 116, 139, 0.18);
+}
+
+.empty-icon {
+	display: block;
+	font-size: 48rpx;
+	line-height: 1;
+	margin-bottom: 16rpx;
 }
 
 .empty-text {
 	display: block;
-	font-size: 24rpx;
-	font-weight: 700;
+	font-size: 26rpx;
+	font-weight: 900;
 	color: #0f172a;
 }
 
@@ -544,28 +746,34 @@ onShow(async () => {
 	color: #64748b;
 }
 
+.empty .btn {
+	margin-top: 20rpx;
+}
+
 .list {
-	margin-top: 18rpx;
+	margin-top: 22rpx;
 	display: flex;
 	flex-direction: column;
-	gap: 14rpx;
+	gap: 16rpx;
 }
 
 .row {
 	display: flex;
-	gap: 16rpx;
+	gap: 18rpx;
 	align-items: flex-start;
-	padding: 16rpx;
-	border-radius: 20rpx;
-	background: rgba(241, 245, 249, 0.6);
-	border: 1rpx solid rgba(15, 23, 42, 0.04);
+	padding: 20rpx;
+	border-radius: 26rpx;
+	background: linear-gradient(180deg, rgba(248, 250, 252, 0.9), rgba(255, 255, 255, 0.9));
+	border: 1rpx solid rgba(15, 23, 42, 0.05);
 }
 
 .avatar {
-	width: 74rpx;
-	height: 74rpx;
+	width: 82rpx;
+	height: 82rpx;
 	border-radius: 50%;
 	background: #e2e8f0;
+	border: 4rpx solid #ffffff;
+	box-shadow: 0 10rpx 22rpx rgba(15, 23, 42, 0.09);
 	flex-shrink: 0;
 }
 
@@ -577,24 +785,27 @@ onShow(async () => {
 .name {
 	display: block;
 	font-size: 28rpx;
-	font-weight: 800;
+	line-height: 1.35;
+	font-weight: 900;
 	color: #0f172a;
 }
 
 .meta {
-	margin-top: 10rpx;
+	margin-top: 12rpx;
 	display: flex;
 	gap: 10rpx;
 	flex-wrap: wrap;
 }
 
 .pill {
-	padding: 8rpx 12rpx;
+	padding: 8rpx 13rpx;
 	border-radius: 999rpx;
 	background: #ffffff;
 	border: 1rpx solid rgba(15, 23, 42, 0.06);
 	font-size: 20rpx;
+	font-weight: 800;
 	color: #334155;
+	box-shadow: 0 6rpx 14rpx rgba(15, 23, 42, 0.04);
 }
 
 .pill-muted {
@@ -603,74 +814,94 @@ onShow(async () => {
 
 .pill-up {
 	color: #0f766e;
-	background: rgba(204, 251, 241, 0.6);
+	background: rgba(204, 251, 241, 0.72);
+	border-color: rgba(15, 118, 110, 0.12);
 }
 
 .pill-down {
 	color: #b91c1c;
-	background: rgba(254, 226, 226, 0.8);
+	background: rgba(254, 226, 226, 0.86);
+	border-color: rgba(185, 28, 28, 0.1);
 }
 
 .status {
 	display: block;
-	margin-top: 10rpx;
+	margin-top: 12rpx;
 	font-size: 22rpx;
+	line-height: 1.55;
 	color: #64748b;
 }
 
 .row-actions {
-	margin-top: 12rpx;
+	margin-top: 14rpx;
 	display: flex;
 	justify-content: flex-end;
 }
 
-.mini-btn {
-	height: 56rpx;
-	line-height: 56rpx;
-	padding: 0 18rpx;
-	border-radius: 14rpx;
-	background: #ffffff;
-	border: 1rpx solid rgba(185, 28, 28, 0.28);
-	color: #b91c1c;
-	font-size: 22rpx;
-	font-weight: 700;
-}
-
 .footer {
-	margin-top: 20rpx;
+	margin-top: 22rpx;
 	padding-bottom: 20rpx;
 	display: flex;
 	justify-content: center;
 }
 
-.btn {
-	height: 76rpx;
-	line-height: 76rpx;
-	padding: 0 22rpx;
-	border-radius: 18rpx;
-	background: linear-gradient(180deg, #1aa37a 0%, #0f766e 100%);
-	color: #ffffff;
-	font-size: 26rpx;
-	font-weight: 700;
+.btn,
+.mini-btn {
+	box-sizing: border-box;
+	border: 0;
+	margin: 0;
 }
 
-.btn[disabled] {
-	opacity: 0.6;
+.btn::after,
+.mini-btn::after {
+	border: 0;
+}
+
+.btn {
+	height: 78rpx;
+	line-height: 78rpx;
+	padding: 0 28rpx;
+	border-radius: 22rpx;
+	background: linear-gradient(135deg, #1aa37a 0%, #0f766e 100%);
+	color: #ffffff;
+	font-size: 26rpx;
+	font-weight: 900;
+	box-shadow: 0 12rpx 24rpx rgba(15, 118, 110, 0.18);
+}
+
+.btn[disabled],
+.mini-btn[disabled] {
+	opacity: 0.55;
+	box-shadow: none;
 }
 
 .btn-ghost {
-	background: #ffffff;
+	background: rgba(255, 255, 255, 0.82);
 	color: #0f766e;
-	border: 1rpx solid rgba(15, 118, 110, 0.25);
+	border: 1rpx solid rgba(15, 118, 110, 0.18);
+	box-shadow: none;
+}
+
+.mini-btn {
+	height: 58rpx;
+	line-height: 58rpx;
+	padding: 0 20rpx;
+	border-radius: 18rpx;
+	background: rgba(255, 255, 255, 0.9);
+	border: 1rpx solid rgba(185, 28, 28, 0.2);
+	color: #b91c1c;
+	font-size: 22rpx;
+	font-weight: 800;
 }
 
 .mini-btn-neutral {
-	border-color: rgba(15, 23, 42, 0.12);
+	min-width: 144rpx;
+	border-color: rgba(15, 23, 42, 0.1);
 	color: #334155;
 }
 
 .settings {
-	margin-top: 18rpx;
+	margin-top: 22rpx;
 	display: flex;
 	flex-direction: column;
 	gap: 16rpx;
@@ -678,20 +909,20 @@ onShow(async () => {
 
 .setting-row {
 	display: flex;
-	align-items: flex-start;
+	align-items: center;
 	justify-content: space-between;
-	gap: 18rpx;
-	padding: 14rpx 12rpx;
-	border-radius: 18rpx;
-	background: rgba(241, 245, 249, 0.45);
-	border: 1rpx solid rgba(15, 23, 42, 0.04);
+	gap: 20rpx;
+	padding: 20rpx;
+	border-radius: 24rpx;
+	background: rgba(248, 250, 252, 0.8);
+	border: 1rpx solid rgba(15, 23, 42, 0.05);
 }
 
 .setting-label {
-	font-size: 24rpx;
-	font-weight: 800;
+	flex-shrink: 0;
+	font-size: 25rpx;
+	font-weight: 900;
 	color: #0f172a;
-	padding-top: 6rpx;
 }
 
 .setting-control {
@@ -704,13 +935,15 @@ onShow(async () => {
 }
 
 .num-input {
-	width: 200rpx;
-	height: 64rpx;
-	padding: 0 14rpx;
-	border-radius: 14rpx;
-	background: rgba(255, 255, 255, 0.92);
+	width: 190rpx;
+	height: 66rpx;
+	padding: 0 18rpx;
+	border-radius: 18rpx;
+	background: rgba(255, 255, 255, 0.96);
 	border: 1rpx solid rgba(15, 23, 42, 0.08);
-	font-size: 26rpx;
+	font-size: 27rpx;
+	font-weight: 800;
+	color: #0f172a;
 	text-align: right;
 }
 
@@ -726,15 +959,26 @@ onShow(async () => {
 	gap: 14rpx;
 }
 
+.setting-actions .btn {
+	flex: 1;
+}
+
 .settings-note {
+	padding: 18rpx 20rpx;
+	border-radius: 22rpx;
+	background: rgba(236, 253, 245, 0.7);
 	font-size: 22rpx;
-	line-height: 1.6;
+	line-height: 1.65;
 	color: #64748b;
 }
 
 .run-result {
+	padding: 18rpx 20rpx;
+	border-radius: 22rpx;
+	background: rgba(204, 251, 241, 0.64);
 	font-size: 22rpx;
+	line-height: 1.6;
 	color: #0f766e;
-	font-weight: 700;
+	font-weight: 900;
 }
 </style>
diff --git a/src/uni.scss b/src/uni.scss
index 83311fc..9c99423 100644
--- a/src/uni.scss
+++ b/src/uni.scss
@@ -3,8 +3,8 @@
  * 所有页面自动注入，无需手动 import
  */
 
-@import './styles/variables';
-@import './styles/mixins';
+@import '@/styles/_variables.scss';
+@import '@/styles/_mixins.scss';
 
 /* 覆盖 uni-app 默认颜色变量 */
 $uni-color-primary: $color-primary-dark;