diff --git a/docs/design-system.md b/docs/design-system.md
new file mode 100644
index 0000000..24b1dd3
--- /dev/null
+++ b/docs/design-system.md
@@ -0,0 +1,396 @@
+# 戒烟助手 - 设计语言文档
+
+> 所有页面和组件必须遵循此文档，确保视觉一致性。
+
+---
+
+## 1. 色彩体系
+
+### 品牌色 — 薄荷绿
+
+| 用途 | 色值 | 示例场景 |
+|------|------|---------|
+| 主色 | `#34C8A0` | 按钮、进度条、选中态边框 |
+| 主色深 | `#1a8c62` | 选中文字、强调文字 |
+| 主色最深 | `#0D3D2E` | 页面标题、数值文字 |
+| 辅助文字 | `#52806E` | 副标题 |
+| 次要文字 | `#7aA898` | 说明文字、标签、单位 |
+| 淡底色 | `#9CC5B5` | placeholder 文字 |
+
+### 功能色
+
+| 用途 | 色值 | 场景 |
+|------|------|------|
+| 成功/正向 | `#1a8c62` | 下降趋势、达成状态 |
+| 警告 | `#B45309` | 上升趋势、需注意 |
+| 警告背景 | `rgba(251, 191, 36, 0.14)` | 警告标签底色 |
+| 危险 | `#DC2626` | 高数值指标 |
+| 信息蓝 | `#2563EB` | 对比数据（实际值） |
+
+### 背景与表面
+
+| 用途 | 色值 |
+|------|------|
+| 页面背景渐变 | `linear-gradient(180deg, #E6F7F2 0%, #F0FBF7 40%, #FAFFFE 100%)` |
+| 卡片底色 | `rgba(255, 255, 255, 0.88)` |
+| 卡片边框 | `rgba(52, 200, 160, 0.14)` |
+| 卡片阴影 | `0 4rpx 18rpx rgba(52, 200, 160, 0.07)` |
+| 浅底色块 | `rgba(52, 200, 160, 0.06)` |
+| 选中底色 | `rgba(52, 200, 160, 0.09)` |
+| 选中边框 | `rgba(52, 200, 160, 0.45)` |
+
+---
+
+## 2. 字体规范
+
+### 字体栈
+
+```css
+font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+```
+
+### 字号层级
+
+| 级别 | 字号 | 字重 | 颜色 | 用途 |
+|------|------|------|------|------|
+| H1 | 38rpx | 700 | `#0D3D2E` | 页面大标题 |
+| H2 | 28rpx | 600 | `#0D3D2E` | 卡片标题 |
+| H3 | 26rpx | 600 | `#1a5c45` | 区块标签（section-label） |
+| 数值大 | 52rpx | 700 | `#0D3D2E` | 核心指标数字 |
+| 数值中 | 38-42rpx | 700 | `#0D3D2E` | 次要指标数字 |
+| 正文 | 25rpx | 400 | `#52806E` | 描述文字 |
+| 辅助 | 21-22rpx | 400 | `#7aA898` | 标签、单位、说明 |
+| 小字 | 20rpx | 500 | `#7aA898` | 注释、补充信息 |
+
+---
+
+## 3. 间距与圆角
+
+### 间距
+
+| 级别 | 数值 | 用途 |
+|------|------|------|
+| xs | 6-8rpx | 元素内部微间距 |
+| sm | 14-16rpx | 标签之间、紧凑元素间距 |
+| md | 20rpx | 卡片之间、区块之间 |
+| lg | 28rpx | 页面侧边距 |
+
+### 圆角
+
+| 元素 | 圆角 |
+|------|------|
+| 卡片 | 24rpx |
+| 选项卡片 | 20rpx |
+| 标签（pill） | 999rpx |
+| 按钮 | 48rpx（大按钮）/ 999rpx（小标签） |
+| 输入框/选择器 | 12-14rpx |
+| 圆形按钮/圆环 | 50% |
+| 数据色块 | 14rpx |
+
+---
+
+## 4. 组件样式规范
+
+### 4.1 卡片（Card）
+
+所有独立内容区域使用卡片包裹。
+
+```css
+.card {
+  background: rgba(255, 255, 255, 0.88);
+  border-radius: 24rpx;
+  border: 1.5rpx solid rgba(52, 200, 160, 0.14);
+  box-shadow: 0 4rpx 18rpx rgba(52, 200, 160, 0.07);
+  padding: 24rpx;
+  margin-bottom: 20rpx;
+}
+```
+
+**禁止**：使用旧版灰蓝阴影 `rgba(15, 23, 42, 0.06)`，统一使用薄荷绿阴影。
+
+### 4.2 选择卡片（Mode Card / Option Card）
+
+```css
+/* 默认态 */
+.option-card {
+  background: rgba(255, 255, 255, 0.72);
+  border: 2rpx solid rgba(52, 200, 160, 0.1);
+  border-radius: 20rpx;
+  box-shadow: 0 2rpx 10rpx rgba(52, 200, 160, 0.04);
+}
+
+/* 选中态 */
+.option-card-active {
+  background: rgba(52, 200, 160, 0.09);
+  border-color: rgba(52, 200, 160, 0.45);
+  box-shadow: 0 4rpx 16rpx rgba(52, 200, 160, 0.14);
+}
+```
+
+### 4.3 标签选项（Pill Tag）
+
+```css
+/* 默认态 */
+.tag {
+  padding: 14rpx 26rpx;
+  border-radius: 999rpx;
+  background: rgba(255, 255, 255, 0.9);
+  font-size: 25rpx;
+  color: #4a7a66;
+  border: 1.5rpx solid rgba(52, 200, 160, 0.18);
+}
+
+/* 选中态 */
+.tag-active {
+  background: rgba(52, 200, 160, 0.12);
+  border-color: rgba(52, 200, 160, 0.45);
+  color: #1a7f61;
+  font-weight: 600;
+}
+```
+
+### 4.4 按钮
+
+```css
+/* 主按钮 */
+.btn-primary {
+  height: 96rpx;
+  background: linear-gradient(180deg, #3DD9AE 0%, #34C8A0 100%);
+  border-radius: 48rpx;
+  color: #FFFFFF;
+  font-size: 32rpx;
+  font-weight: 600;
+  box-shadow: 0 12rpx 28rpx rgba(52, 200, 160, 0.28);
+}
+
+/* 圆形操作按钮（+/-） */
+.btn-circle {
+  width: 60rpx;
+  height: 60rpx;
+  border-radius: 50%;
+  background: rgba(52, 200, 160, 0.1);
+  color: #34C8A0;
+  font-size: 38rpx;
+  border: 1.5rpx solid rgba(52, 200, 160, 0.25);
+}
+```
+
+### 4.5 输入框
+
+```css
+.input {
+  background: rgba(52, 200, 160, 0.06);
+  border: 1.5rpx solid rgba(52, 200, 160, 0.2);
+  border-radius: 12rpx;
+  color: #0D3D2E;
+  font-weight: 600;
+}
+
+/* placeholder */
+placeholder-style: "color: #9CC5B5"
+```
+
+### 4.6 进度条
+
+```css
+.progress-bar {
+  height: 10rpx;
+  background: rgba(52, 200, 160, 0.1);
+  border-radius: 999rpx;
+}
+
+.progress-fill {
+  background: linear-gradient(90deg, #34C8A0, #3DD9AE);
+  border-radius: 999rpx;
+}
+
+/* 未完成态 */
+.progress-fill-pending {
+  background: rgba(52, 200, 160, 0.3);
+}
+```
+
+### 4.7 圆环指标（Ring）
+
+```css
+.ring {
+  width: 110rpx;
+  height: 110rpx;
+  border-radius: 50%;
+  /* 使用 conic-gradient 动态渲染 */
+  /* 主色: #34C8A0, 底色: #E8F8F3 */
+}
+
+.ring-inner {
+  width: 82rpx;
+  height: 82rpx;
+  border-radius: 50%;
+  background: #FFFFFF;
+  box-shadow: 0 4rpx 12rpx rgba(52, 200, 160, 0.1);
+}
+```
+
+### 4.8 状态标签（Chip）
+
+```css
+/* 正向 */
+.chip-good {
+  background: rgba(52, 200, 160, 0.12);
+  color: #1a8c62;
+}
+
+/* 警告 */
+.chip-warn {
+  background: rgba(251, 191, 36, 0.14);
+  color: #B45309;
+}
+
+/* 中性 */
+.chip-neutral {
+  background: rgba(52, 200, 160, 0.06);
+  color: #7aA898;
+}
+```
+
+### 4.9 Segment（Tab 切换）
+
+```css
+.segment {
+  background: rgba(255, 255, 255, 0.82);
+  padding: 6rpx;
+  border-radius: 22rpx;
+  border: 1.5rpx solid rgba(52, 200, 160, 0.14);
+  box-shadow: 0 4rpx 16rpx rgba(52, 200, 160, 0.07);
+}
+
+.segment-item {
+  font-size: 24rpx;
+  font-weight: 600;
+  color: #7aA898;
+  border-radius: 16rpx;
+}
+
+.segment-active {
+  background: #FFFFFF;
+  color: #0D3D2E;
+  box-shadow: 0 4rpx 12rpx rgba(52, 200, 160, 0.12);
+}
+```
+
+### 4.10 空状态
+
+```css
+.empty-block {
+  padding: 32rpx;
+  border-radius: 16rpx;
+  background: rgba(52, 200, 160, 0.04);
+}
+
+/* 虚线边框变体 */
+.empty-block-dashed {
+  border: 2rpx dashed rgba(52, 200, 160, 0.2);
+  background: transparent;
+}
+
+.empty-text {
+  font-size: 24rpx;
+  color: #7aA898;
+}
+```
+
+### 4.11 底部安全区
+
+```css
+.bottom-safe {
+  height: calc(32rpx + env(safe-area-inset-bottom));
+}
+
+/* 固定底部按钮区域 */
+.footer-fixed {
+  position: fixed;
+  left: 0; right: 0; bottom: 0;
+  padding: 20rpx 28rpx;
+  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
+  background: linear-gradient(180deg, transparent 0%, rgba(240, 251, 247, 0.97) 35%);
+}
+```
+
+---
+
+## 5. 数据可视化配色
+
+| 数据类型 | 色值/色阶 |
+|---------|----------|
+| 0 / 无数据 | `rgba(52, 200, 160, 0.06)` |
+| 低（1-3） | `rgba(52, 200, 160, 0.18)` |
+| 中（4-8） | `rgba(251, 191, 36, 0.2)` |
+| 高（9+） | `rgba(239, 68, 68, 0.15)` |
+| 圆环已完成 | `#34C8A0` |
+| 圆环未完成 | `#E8F8F3` |
+
+---
+
+## 6. 禁止事项
+
+| 禁止 | 替代方案 |
+|------|---------|
+| 灰蓝色阴影 `rgba(15, 23, 42, *)` | 薄荷绿阴影 `rgba(52, 200, 160, *)` |
+| 旧主色 `#1AA37A` / `#1aa37a` | 新主色 `#34C8A0`（按钮/进度条）或 `#1a8c62`（文字） |
+| 灰色文字 `#6B7280` / `#94A3B8` | 绿调文字 `#7aA898` / `#52806E` |
+| 灰色背景 `#F1F5F9` / `#F8FAFC` | 绿调背景 `rgba(52, 200, 160, 0.06)` |
+| 纯白卡片背景 `#FFFFFF` | 半透明白 `rgba(255, 255, 255, 0.88)` |
+| `backdrop-filter: blur()` | 不再使用模糊滤镜（性能考虑），用不透明度代替 |
+| 旧页面背景渐变 `#edf2f8 → #fbfdff` | 薄荷绿渐变 `#E6F7F2 → #FAFFFE` |
+
+---
+
+## 7. 快速参考
+
+开发新页面时复制此基础结构：
+
+```vue
+<template>
+  <view class="page">
+    <view class="status-bar" :style="{ height: navBarHeight + 'px' }"></view>
+
+    <view class="card">
+      <text class="card-title">标题</text>
+      <!-- 内容 -->
+    </view>
+
+    <view class="bottom-safe"></view>
+  </view>
+</template>
+
+<style scoped>
+.page {
+  min-height: 100vh;
+  background: linear-gradient(180deg, #E6F7F2 0%, #F0FBF7 40%, #FAFFFE 100%);
+  padding: 0 28rpx;
+  box-sizing: border-box;
+}
+
+.status-bar {
+  background: transparent;
+}
+
+.card {
+  background: rgba(255, 255, 255, 0.88);
+  border-radius: 24rpx;
+  padding: 24rpx;
+  margin-bottom: 20rpx;
+  border: 1.5rpx solid rgba(52, 200, 160, 0.14);
+  box-shadow: 0 4rpx 18rpx rgba(52, 200, 160, 0.07);
+}
+
+.card-title {
+  font-size: 28rpx;
+  font-weight: 600;
+  color: #0D3D2E;
+}
+
+.bottom-safe {
+  height: calc(32rpx + env(safe-area-inset-bottom));
+}
+</style>
+```
diff --git a/src/api/auth.js b/src/api/auth.js
index 0c6608b..325fa99 100644
--- a/src/api/auth.js
+++ b/src/api/auth.js
@@ -1,14 +1,17 @@
 import { request } from './request'
 import { MINI_PROGRAM_ID } from '@/config'
-import { storage, SESSION_KEY, USER_KEY } from '@/utils/storage'
+import pinia, { useUserStore } from '@/stores'
+import { storage, SESSION_KEY, USER_KEY, USER_MODE_KEY } from '@/utils/storage'
 
-const H5_DEBUG_SESSION_KEY = 'o3dUk5QYaPdfMN9hBxeuouE0q63E'
+const H5_DEBUG_SESSION_KEY = 'FxLFPHHBw49loODmRSvqdg=='
 
 export function applyH5DebugSession() {
 	let applied = false
 	// #ifdef H5
-	if (process.env.NODE_ENV === 'development' && !storage.get(SESSION_KEY)) {
+	if (process.env.NODE_ENV === 'development' && storage.get(SESSION_KEY) !== H5_DEBUG_SESSION_KEY) {
 		storage.set(SESSION_KEY, H5_DEBUG_SESSION_KEY)
+		storage.remove(USER_KEY)
+		storage.remove(USER_MODE_KEY)
 		applied = true
 	}
 	// #endif
@@ -25,9 +28,11 @@ export async function login() {
 						mini_program_id: MINI_PROGRAM_ID,
 						code: loginRes.code
 					})
-
-					storage.set(SESSION_KEY, res.data.session_key)
-					storage.set(USER_KEY, res.data.user)
+					const userStore = useUserStore(pinia)
+					userStore.setUser(res.data.user, res.data.session_key)
+					if (res.data.user?.mode) {
+						userStore.setMode(res.data.user.mode)
+					}
 
 					resolve(res.data)
 				} catch (e) {
diff --git a/src/api/request.js b/src/api/request.js
index 4c0e420..23898ca 100644
--- a/src/api/request.js
+++ b/src/api/request.js
@@ -13,6 +13,7 @@ function isInvalidToken(res) {
 export const request = {
 	async request(options) {
 		const sessionKey = storage.get(SESSION_KEY)
+		// 测试 
 		const isRetryAfter401 = options._retryAfter401 === true
 
 		return new Promise((resolve, reject) => {
diff --git a/src/components/smoke-record-dialog/smoke-record-dialog.vue b/src/components/smoke-record-dialog/smoke-record-dialog.vue
index 4546051..2e242bb 100644
--- a/src/components/smoke-record-dialog/smoke-record-dialog.vue
+++ b/src/components/smoke-record-dialog/smoke-record-dialog.vue
@@ -262,10 +262,11 @@ export default {
 	overflow: hidden;
 	transform: translateY(100%);
 	transition: transform 0.3s ease-out;
-	padding-bottom: 16rpx;
+	padding-bottom: 0;
 	border-top: 2rpx solid rgba(255, 255, 255, 0.72);
 	backdrop-filter: blur(28rpx);
 	-webkit-backdrop-filter: blur(28rpx);
+	box-shadow: 0 20rpx 48rpx rgba(15, 23, 42, 0.18);
 }
 
 .dialog-show {
@@ -308,7 +309,8 @@ export default {
 
 .dialog-body {
 	padding: 16rpx 32rpx 24rpx;
-	max-height: 62vh;
+	padding-bottom: 40rpx;
+	max-height: 58vh;
 	overflow-y: auto;
 }
 
@@ -538,6 +540,8 @@ export default {
 
 .dialog-footer {
 	padding: 16rpx 32rpx 32rpx;
+	padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
+	background: linear-gradient(180deg, rgba(248, 250, 252, 0) 0%, rgba(248, 250, 252, 0.96) 28%);
 }
 
 .dialog-btn-primary {
diff --git a/src/pages.json b/src/pages.json
index f26ccfb..f2a4d62 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -24,6 +24,12 @@
 				"navigationStyle": "custom"
 			}
 		},
+		{
+			"path": "pages/stats-calendar/index",
+			"style": {
+				"navigationBarTitleText": "日历详情"
+			}
+		},
 		{
 			"path": "pages/ai/index",
 			"style": {
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index f476bb4..719005c 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -1,8 +1,8 @@
 <template>
-	<view class="page">
+	<view class="page" :class="{ 'page-record': !isQuitMode }">
 		<!-- 背景装饰 -->
-		<view class="bg-gradient"></view>
-		<view class="bg-pattern"></view>
+		<view v-if="isQuitMode" class="bg-gradient"></view>
+		<view v-if="isQuitMode" class="bg-pattern"></view>
 
 		<view class="nav-placeholder" :style="{ height: navBarHeight + 'px' }"></view>
 
@@ -16,100 +16,92 @@
 
 		<view v-else class="content">
 			<!-- 戒烟模式 -->
-			<view v-if="isQuitMode">
-				<!-- 核心数据卡片 -->
-				<view class="hero-card">
-					<!-- 天数展示 -->
-					<view class="days-display">
-						<view class="days-ring">
-							<view class="days-ring-inner">
-								<text class="days-number">{{ quitDays }}</text>
-								<text class="days-label">天</text>
-							</view>
+			<view v-if="isQuitMode" class="quit-home">
+				<view class="quit-hero-card">
+					<view class="quit-hero-top">
+						<view class="quit-hero-copy">
+							<text class="quit-hero-eyebrow">无烟旅程</text>
+							<text class="quit-hero-title">今天也在慢慢变好</text>
+							<text class="quit-hero-subtitle">{{ quitEncouragement }}</text>
 						</view>
-						<text class="days-subtitle">已坚持戒烟</text>
+						<text class="quit-hero-chip">{{ todayChecked ? '今日已完成' : '等待打卡' }}</text>
 					</view>
 
-					<!-- 数据指标 -->
-					<view class="metrics-row">
-						<view class="metric-item">
-							<text class="metric-icon">💰</text>
-							<view class="metric-content">
-								<text class="metric-value">¥{{ savedMoney }}</text>
-								<text class="metric-label">已省下</text>
+					<view class="quit-overview">
+						<view class="quit-days-card">
+							<view class="quit-days-ring">
+								<view class="quit-days-ring-inner">
+									<text class="quit-days-number">{{ quitDays }}</text>
+									<text class="quit-days-label">天</text>
+								</view>
 							</view>
+							<text class="quit-days-hint">连续无烟</text>
 						</view>
-						<view class="metric-divider"></view>
-						<view class="metric-item">
-							<text class="metric-icon">🚬</text>
-							<view class="metric-content">
-								<text class="metric-value">{{ avoidedCigs }}</text>
-								<text class="metric-label">少抽(支)</text>
+
+						<view class="quit-metrics-grid">
+							<view class="quit-metric-card">
+								<text class="quit-metric-kicker">已省下</text>
+								<text class="quit-metric-value">¥{{ savedMoney }}</text>
 							</view>
-						</view>
-						<view class="metric-divider"></view>
-						<view class="metric-item">
-							<text class="metric-icon">⏱️</text>
-							<view class="metric-content">
-								<text class="metric-value">{{ lifeSaved }}</text>
-								<text class="metric-label">延长(小时)</text>
+							<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>
 					</view>
 				</view>
 
-				<!-- 打卡区域 -->
-				<view class="checkin-section">
-					<view
-						class="checkin-card"
-						:class="{ 'checkin-done': todayChecked }"
-						@tap="handleQuitCheckin"
-					>
-						<view class="checkin-icon-wrap">
-							<view class="checkin-icon" :class="{ 'checkin-icon-done': todayChecked }">
-								<text v-if="todayChecked">✓</text>
-								<text v-else>+</text>
-							</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="checkin-content">
-							<text class="checkin-title">{{ todayChecked ? '今日已打卡' : '今天没抽烟' }}</text>
-							<text class="checkin-desc">{{ todayChecked ? `${todayCheckinTime} 已记录` : '点击打卡，记录无烟的一天' }}</text>
-						</view>
-						<view v-if="todayChecked" class="checkin-badge">
-							<text class="checkin-badge-text">+1</text>
+						<view class="quit-checkin-copy">
+							<text class="quit-checkin-title">{{ todayChecked ? '今日已打卡' : '今天没抽烟' }}</text>
+							<text class="quit-checkin-desc">{{ todayChecked ? `${todayCheckinTime} 已完成记录` : '点击打卡，确认自己度过了无烟的一天' }}</text>
 						</view>
 					</view>
+					<view class="quit-checkin-side">
+						<text class="quit-checkin-side-label">{{ todayChecked ? '已完成' : '去打卡' }}</text>
+					</view>
 				</view>
 
-				<!-- 健康恢复进度 -->
-				<view class="health-section">
-					<view class="section-header">
-						<text class="section-title">健康恢复</text>
-						<text class="section-value">{{ healthProgress }}%</text>
+				<view class="quit-health-card">
+					<view class="quit-health-header">
+						<view>
+							<text class="quit-health-title">健康恢复</text>
+							<text class="quit-health-subtitle">身体正在按自己的节奏修复</text>
+						</view>
+						<text class="quit-health-value">{{ healthProgress }}%</text>
 					</view>
-					<view class="health-bar">
-						<view class="health-bar-fill" :style="{ width: healthProgress + '%' }"></view>
+					<view class="quit-health-bar">
+						<view class="quit-health-bar-fill" :style="{ width: healthProgress + '%' }"></view>
 					</view>
-					<view class="health-milestones">
+					<view class="quit-health-milestones">
 						<view
 							v-for="(milestone, index) in healthMilestones"
 							:key="index"
-							class="milestone-item"
-							:class="{ 'milestone-done': quitDays >= milestone.days }"
+							class="quit-milestone-item"
+							:class="{ 'quit-milestone-done': quitDays >= milestone.days }"
 						>
-							<view class="milestone-dot"></view>
-							<text class="milestone-text">{{ milestone.label }}</text>
+							<view class="quit-milestone-dot"></view>
+							<text class="quit-milestone-text">{{ milestone.label }}</text>
 						</view>
 					</view>
 				</view>
 
-				<!-- 今日激励 -->
-				<view class="motivation-section">
-					<view class="motivation-card">
-						<text class="motivation-quote">"</text>
-						<text class="motivation-text">{{ quitEncouragement }}</text>
-						<text class="motivation-tip">{{ healthTip }}</text>
-					</view>
+				<view class="quit-motivation-card">
+					<text class="quit-motivation-label">今日提醒</text>
+					<text class="quit-motivation-text">{{ healthTip }}</text>
 				</view>
 			</view>
 
@@ -122,9 +114,10 @@
 							<view class="summary-title-accent"></view>
 							<view>
 								<text class="summary-title summary-title-record">记录</text>
+								<text class="summary-subtitle summary-subtitle-record">今天的节奏与变化</text>
 							</view>
 						</view>
-						<text class="record-header-more">···</text>
+						<text class="record-header-chip">今日概览</text>
 					</view>
 
 					<view class="record-overview">
@@ -615,6 +608,10 @@ onShareAppMessage(() => ({
 	box-sizing: border-box;
 }
 
+.page-record {
+	background: linear-gradient(180deg, #F6F8F6 0%, #EFF4F1 52%, #E9F0EC 100%);
+}
+
 /* ===== 背景装饰 ===== */
 .bg-gradient {
 	position: absolute;
@@ -692,300 +689,391 @@ onShareAppMessage(() => ({
 	padding: 24rpx 24rpx 200rpx;
 }
 
-/* ===== 戒烟模式 - 英雄卡片 ===== */
-.hero-card {
-	background: linear-gradient(135deg, #FFFFFF 0%, #F0FDF9 100%);
-	border-radius: 32rpx;
-	padding: 48rpx 32rpx;
-	margin-bottom: 24rpx;
-	box-shadow: 0 8rpx 32rpx rgba(26, 163, 122, 0.08);
-	border: 1rpx solid rgba(26, 163, 122, 0.1);
+/* ===== 戒烟模式 ===== */
+.quit-home {
+	display: flex;
+	flex-direction: column;
+	gap: 24rpx;
 }
 
-.days-display {
+.quit-hero-card,
+.quit-checkin-card,
+.quit-health-card,
+.quit-motivation-card {
+	position: relative;
+	overflow: hidden;
+	background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(251, 253, 252, 0.94) 100%);
+	-webkit-backdrop-filter: blur(20px);
+	backdrop-filter: blur(20px);
+	border-radius: 32rpx;
+	border: 1rpx solid rgba(15, 23, 42, 0.06);
+	box-shadow:
+		0 20rpx 44rpx rgba(15, 23, 42, 0.06),
+		0 6rpx 14rpx rgba(15, 23, 42, 0.03),
+		inset 0 1rpx 0 rgba(255, 255, 255, 0.88);
+}
+
+.quit-hero-card::before,
+.quit-health-card::before,
+.quit-motivation-card::before {
+	content: '';
+	position: absolute;
+	width: 240rpx;
+	height: 240rpx;
+	left: -72rpx;
+	top: -72rpx;
+	border-radius: 50%;
+	background: radial-gradient(circle, rgba(52, 200, 160, 0.14) 0%, rgba(52, 200, 160, 0) 72%);
+	pointer-events: none;
+}
+
+.quit-hero-card {
+	padding: 28rpx 24rpx;
+}
+
+.quit-hero-top,
+.quit-overview,
+.quit-health-header,
+.quit-health-milestones {
+	position: relative;
+	z-index: 1;
+}
+
+.quit-hero-top {
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	gap: 16rpx;
+	margin-bottom: 26rpx;
+}
+
+.quit-hero-copy {
+	flex: 1;
+	min-width: 0;
+}
+
+.quit-hero-eyebrow {
+	display: inline-flex;
+	align-items: center;
+	padding: 8rpx 18rpx;
+	border-radius: 999rpx;
+	background: rgba(240, 252, 248, 0.94);
+	border: 1rpx solid rgba(15, 23, 42, 0.05);
+	font-size: 20rpx;
+	font-weight: 600;
+	color: #6b7280;
+}
+
+.quit-hero-title {
+	display: block;
+	margin-top: 16rpx;
+	font-size: 42rpx;
+	line-height: 1.2;
+	font-weight: 800;
+	color: #111827;
+}
+
+.quit-hero-subtitle {
+	display: block;
+	margin-top: 10rpx;
+	font-size: 24rpx;
+	line-height: 1.6;
+	color: #6b7280;
+}
+
+.quit-hero-chip {
+	flex-shrink: 0;
+	padding: 10rpx 18rpx;
+	border-radius: 999rpx;
+	background: rgba(240, 252, 248, 0.94);
+	border: 1rpx solid rgba(15, 23, 42, 0.05);
+	font-size: 21rpx;
+	font-weight: 600;
+	color: #14936d;
+}
+
+.quit-overview {
+	display: flex;
+	align-items: center;
+	gap: 18rpx;
+}
+
+.quit-days-card {
+	width: 216rpx;
+	flex-shrink: 0;
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	margin-bottom: 40rpx;
 }
 
-.days-ring {
+.quit-days-ring {
 	width: 200rpx;
 	height: 200rpx;
+	padding: 14rpx;
 	border-radius: 50%;
-	background: linear-gradient(135deg, #D1FAE5 0%, #A7F3D0 100%);
-	padding: 16rpx;
-	box-shadow: 0 8rpx 24rpx rgba(26, 163, 122, 0.15);
+	background: linear-gradient(180deg, #ffffff 0%, #f8fbf9 100%);
+	border: 1rpx solid rgba(15, 23, 42, 0.05);
+	box-shadow: inset 0 2rpx 6rpx rgba(15, 23, 42, 0.04), 0 10rpx 24rpx rgba(15, 23, 42, 0.05);
 }
 
-.days-ring-inner {
+.quit-days-ring-inner {
 	width: 100%;
 	height: 100%;
 	border-radius: 50%;
-	background: #FFFFFF;
+	background: linear-gradient(180deg, rgba(240, 252, 248, 0.96) 0%, rgba(248, 251, 249, 0.96) 100%);
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
-	box-shadow: inset 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
+	box-shadow: inset 0 1rpx 0 rgba(255, 255, 255, 0.92);
 }
 
-.days-number {
-	font-size: 72rpx;
+.quit-days-number {
+	font-size: 74rpx;
 	font-weight: 800;
-	color: #059669;
 	line-height: 1;
+	color: #14936d;
 	font-family: 'DIN Alternate', -apple-system, sans-serif;
 }
 
-.days-label {
-	font-size: 28rpx;
-	color: #6B7280;
-	margin-top: 4rpx;
+.quit-days-label {
+	margin-top: 6rpx;
+	font-size: 26rpx;
+	font-weight: 600;
+	color: #6b7280;
 }
 
-.days-subtitle {
-	font-size: 28rpx;
-	color: #6B7280;
+.quit-days-hint {
 	margin-top: 16rpx;
+	font-size: 24rpx;
+	color: #6b7280;
 }
 
-/* ===== 数据指标行 ===== */
-.metrics-row {
-	display: flex;
-	align-items: center;
-	justify-content: space-around;
-	padding: 24rpx 0;
-	background: rgba(26, 163, 122, 0.04);
-	border-radius: 20rpx;
+.quit-metrics-grid {
+	flex: 1;
+	display: grid;
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+	gap: 14rpx;
 }
 
-.metric-item {
-	display: flex;
-	align-items: center;
-	gap: 12rpx;
+.quit-metric-card {
+	padding: 18rpx 18rpx 20rpx;
+	border-radius: 22rpx;
+	background: linear-gradient(180deg, #fbfcfc 0%, #f7faf8 100%);
+	border: 1rpx solid rgba(15, 23, 42, 0.05);
+	box-shadow: inset 0 1rpx 0 rgba(255, 255, 255, 0.92);
 }
 
-.metric-icon {
-	font-size: 32rpx;
+.quit-metric-card-wide {
+	grid-column: 1 / -1;
 }
 
-.metric-content {
-	display: flex;
-	flex-direction: column;
+.quit-metric-kicker {
+	display: block;
+	font-size: 21rpx;
+	color: #6b7280;
 }
 
-.metric-value {
-	font-size: 32rpx;
-	font-weight: 700;
+.quit-metric-value {
+	display: block;
+	margin-top: 10rpx;
+	font-size: 34rpx;
+	line-height: 1.2;
+	font-weight: 800;
 	color: #111827;
 	font-family: 'DIN Alternate', -apple-system, sans-serif;
 }
 
-.metric-label {
-	font-size: 22rpx;
-	color: #9CA3AF;
-}
-
-.metric-divider {
-	width: 1rpx;
-	height: 48rpx;
-	background: rgba(26, 163, 122, 0.15);
-}
-
-/* ===== 打卡区域 ===== */
-.checkin-section {
-	margin-bottom: 24rpx;
-}
-
-.checkin-card {
+.quit-checkin-card {
 	display: flex;
 	align-items: center;
-	padding: 32rpx;
-	background: #FFFFFF;
-	border-radius: 24rpx;
-	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
-	border: 2rpx solid rgba(26, 163, 122, 0.1);
+	justify-content: space-between;
+	gap: 18rpx;
+	padding: 26rpx 24rpx;
 }
 
-.checkin-done {
-	background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
-	border-color: rgba(26, 163, 122, 0.2);
+.quit-checkin-card-done {
+	background: linear-gradient(180deg, rgba(240, 252, 248, 0.98) 0%, rgba(249, 252, 250, 0.94) 100%);
 }
 
-.checkin-icon-wrap {
-	margin-right: 24rpx;
+.quit-checkin-main {
+	display: flex;
+	align-items: center;
+	gap: 18rpx;
+	flex: 1;
+	min-width: 0;
 }
 
-.checkin-icon {
-	width: 80rpx;
-	height: 80rpx;
-	border-radius: 50%;
-	background: linear-gradient(135deg, #059669 0%, #047857 100%);
+.quit-checkin-icon {
+	width: 84rpx;
+	height: 84rpx;
+	border-radius: 28rpx;
+	flex-shrink: 0;
+	background: linear-gradient(180deg, #31c18b 0%, #1da36f 100%);
+	box-shadow: 0 16rpx 30rpx rgba(29, 163, 111, 0.22);
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	box-shadow: 0 4rpx 12rpx rgba(5, 150, 105, 0.3);
 }
 
-.checkin-icon text {
+.quit-checkin-icon text {
 	font-size: 36rpx;
-	color: #FFFFFF;
-	font-weight: 600;
+	font-weight: 700;
+	color: #ffffff;
 }
 
-.checkin-icon-done {
-	background: linear-gradient(135deg, #10B981 0%, #059669 100%);
+.quit-checkin-icon-done {
+	background: linear-gradient(180deg, #26b47f 0%, #14936d 100%);
 }
 
-.checkin-content {
+.quit-checkin-copy {
 	flex: 1;
+	min-width: 0;
 }
 
-.checkin-title {
+.quit-checkin-title {
 	display: block;
 	font-size: 32rpx;
-	font-weight: 600;
+	font-weight: 700;
 	color: #111827;
 }
 
-.checkin-desc {
+.quit-checkin-desc {
 	display: block;
-	font-size: 24rpx;
-	color: #6B7280;
-	margin-top: 4rpx;
+	margin-top: 8rpx;
+	font-size: 23rpx;
+	line-height: 1.6;
+	color: #6b7280;
 }
 
-.checkin-badge {
-	padding: 8rpx 20rpx;
-	background: #059669;
+.quit-checkin-side {
+	flex-shrink: 0;
+	padding: 12rpx 18rpx;
 	border-radius: 999rpx;
+	background: rgba(240, 252, 248, 0.94);
+	border: 1rpx solid rgba(15, 23, 42, 0.05);
 }
 
-.checkin-badge-text {
-	font-size: 24rpx;
+.quit-checkin-side-label {
+	font-size: 21rpx;
 	font-weight: 600;
-	color: #FFFFFF;
+	color: #14936d;
 }
 
-/* ===== 健康恢复进度 ===== */
-.health-section {
-	background: #FFFFFF;
-	border-radius: 24rpx;
-	padding: 32rpx;
-	margin-bottom: 24rpx;
-	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
+.quit-health-card {
+	padding: 26rpx 24rpx 24rpx;
 }
 
-.section-header {
+.quit-health-header {
 	display: flex;
+	align-items: flex-start;
 	justify-content: space-between;
-	align-items: center;
-	margin-bottom: 20rpx;
+	gap: 16rpx;
+	margin-bottom: 18rpx;
 }
 
-.section-title {
-	font-size: 28rpx;
-	font-weight: 600;
-	color: #374151;
-}
-
-.section-value {
-	font-size: 28rpx;
+.quit-health-title {
+	display: block;
+	font-size: 30rpx;
 	font-weight: 700;
-	color: #059669;
+	color: #111827;
 }
 
-.health-bar {
-	height: 12rpx;
-	background: #E5E7EB;
+.quit-health-subtitle {
+	display: block;
+	margin-top: 8rpx;
+	font-size: 22rpx;
+	line-height: 1.5;
+	color: #6b7280;
+}
+
+.quit-health-value {
+	font-size: 34rpx;
+	font-weight: 800;
+	color: #14936d;
+}
+
+.quit-health-bar {
+	position: relative;
+	z-index: 1;
+	height: 14rpx;
+	background: rgba(15, 23, 42, 0.06);
 	border-radius: 999rpx;
 	overflow: hidden;
-	margin-bottom: 24rpx;
 }
 
-.health-bar-fill {
+.quit-health-bar-fill {
 	height: 100%;
-	background: linear-gradient(90deg, #10B981 0%, #059669 100%);
+	background: linear-gradient(90deg, #31c18b 0%, #14936d 100%);
 	border-radius: 999rpx;
 	transition: width 0.5s ease;
 }
 
-.health-milestones {
+.quit-health-milestones {
 	display: flex;
 	justify-content: space-between;
+	gap: 8rpx;
+	margin-top: 22rpx;
 }
 
-.milestone-item {
+.quit-milestone-item {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 	gap: 8rpx;
+	flex: 1;
 }
 
-.milestone-dot {
+.quit-milestone-dot {
 	width: 16rpx;
 	height: 16rpx;
 	border-radius: 50%;
-	background: #E5E7EB;
-	border: 2rpx solid #D1D5DB;
+	background: rgba(15, 23, 42, 0.08);
+	border: 2rpx solid rgba(15, 23, 42, 0.1);
 }
 
-.milestone-done .milestone-dot {
-	background: #10B981;
-	border-color: #059669;
+.quit-milestone-done .quit-milestone-dot {
+	background: #31c18b;
+	border-color: #14936d;
 }
 
-.milestone-text {
+.quit-milestone-text {
 	font-size: 20rpx;
-	color: #9CA3AF;
+	color: #9ca3af;
 }
 
-.milestone-done .milestone-text {
-	color: #059669;
-	font-weight: 500;
-}
-
-/* ===== 今日激励 ===== */
-.motivation-section {
-	margin-bottom: 24rpx;
-}
-
-.motivation-card {
-	background: linear-gradient(135deg, #FFFFFF 0%, #FEF3C7 100%);
-	border-radius: 24rpx;
-	padding: 32rpx;
-	position: relative;
-	overflow: hidden;
-	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
-}
-
-.motivation-quote {
-	position: absolute;
-	top: 16rpx;
-	left: 24rpx;
-	font-size: 64rpx;
-	color: rgba(245, 158, 11, 0.2);
-	font-family: Georgia, serif;
-	line-height: 1;
-}
-
-.motivation-text {
-	display: block;
-	font-size: 30rpx;
+.quit-milestone-done .quit-milestone-text {
+	color: #14936d;
 	font-weight: 600;
-	color: #92400E;
-	line-height: 1.6;
-	padding-left: 32rpx;
 }
 
-.motivation-tip {
+.quit-motivation-card {
+	padding: 24rpx;
+}
+
+.quit-motivation-label {
+	position: relative;
+	z-index: 1;
+	display: inline-flex;
+	align-items: center;
+	padding: 8rpx 18rpx;
+	border-radius: 999rpx;
+	background: rgba(240, 252, 248, 0.94);
+	border: 1rpx solid rgba(15, 23, 42, 0.05);
+	font-size: 20rpx;
+	font-weight: 600;
+	color: #6b7280;
+}
+
+.quit-motivation-text {
+	position: relative;
+	z-index: 1;
 	display: block;
-	font-size: 24rpx;
-	color: #B45309;
 	margin-top: 16rpx;
-	padding-left: 32rpx;
-	line-height: 1.5;
+	font-size: 28rpx;
+	line-height: 1.7;
+	font-weight: 600;
+	color: #374151;
 }
 
 /* ===== 记录模式 ===== */
@@ -1002,13 +1090,30 @@ onShareAppMessage(() => ({
 }
 
 .summary-card-record {
-	background: linear-gradient(145deg, rgba(235, 251, 245, 0.9) 0%, rgba(255, 255, 255, 0.95) 100%);
-	border-color: rgba(20, 184, 130, 0.15);
-	box-shadow: 0 24rpx 56rpx rgba(20, 184, 130, 0.08), inset 0 2rpx 8rpx rgba(255, 255, 255, 1);
+	background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(251, 253, 252, 0.94) 100%);
+	-webkit-backdrop-filter: blur(20px);
+	backdrop-filter: blur(20px);
+	border-color: rgba(15, 23, 42, 0.06);
+	box-shadow:
+		0 20rpx 44rpx rgba(15, 23, 42, 0.06),
+		0 6rpx 14rpx rgba(15, 23, 42, 0.03),
+		inset 0 1rpx 0 rgba(255, 255, 255, 0.88);
 	padding: 28rpx 24rpx;
 	border-radius: 32rpx;
 }
 
+.summary-card-record::before {
+	content: '';
+	position: absolute;
+	width: 240rpx;
+	height: 240rpx;
+	left: -72rpx;
+	top: -72rpx;
+	border-radius: 50%;
+	background: radial-gradient(circle, rgba(52, 200, 160, 0.14) 0%, rgba(52, 200, 160, 0) 72%);
+	pointer-events: none;
+}
+
 .summary-card-top {
 	display: flex;
 	align-items: flex-start;
@@ -1022,13 +1127,16 @@ onShareAppMessage(() => ({
 	margin-bottom: 16rpx;
 }
 
-.record-header-more {
-	font-size: 42rpx;
-	line-height: 1;
-	font-weight: 700;
-	letter-spacing: 4rpx;
-	color: #1f4b3d;
-	transform: translateY(-4rpx);
+.record-header-chip {
+	flex-shrink: 0;
+	padding: 10rpx 18rpx;
+	border-radius: 999rpx;
+	background: rgba(248, 250, 249, 0.96);
+	border: 1rpx solid rgba(15, 23, 42, 0.06);
+	font-size: 21rpx;
+	font-weight: 600;
+	color: #6b7280;
+	box-shadow: 0 8rpx 18rpx rgba(15, 23, 42, 0.04);
 }
 
 .summary-heading {
@@ -1057,7 +1165,19 @@ onShareAppMessage(() => ({
 }
 
 .summary-title-record {
-	color: #123329;
+	color: #111827;
+}
+
+.summary-subtitle {
+	display: block;
+	margin-top: 8rpx;
+	font-size: 22rpx;
+	line-height: 1.5;
+	color: #6b7280;
+}
+
+.summary-subtitle-record {
+	color: #67727e;
 }
 
 .record-overview {
@@ -1076,16 +1196,17 @@ onShareAppMessage(() => ({
 	align-items: center;
 	justify-content: center;
 	flex-shrink: 0;
-	box-shadow: inset 0 4rpx 12rpx rgba(0,0,0,0.03), 0 4rpx 12rpx rgba(255,255,255,0.8);
-	background: rgba(248, 255, 251, 0.4);
+	box-shadow: inset 0 2rpx 6rpx rgba(15, 23, 42, 0.04), 0 10rpx 24rpx rgba(15, 23, 42, 0.05);
+	background: linear-gradient(180deg, #ffffff 0%, #f8fbf9 100%);
+	border: 1rpx solid rgba(15, 23, 42, 0.05);
 }
 
 .record-ring-inner {
 	width: 100%;
 	height: 100%;
 	border-radius: 50%;
-	background: rgba(255, 255, 255, 0.95);
-	box-shadow: 0 4rpx 16rpx rgba(20, 184, 130, 0.08);
+	background: rgba(255, 255, 255, 0.96);
+	box-shadow: inset 0 1rpx 0 rgba(255, 255, 255, 0.9);
 	display: flex;
 	flex-direction: column;
 	align-items: center;
@@ -1095,10 +1216,10 @@ onShareAppMessage(() => ({
 }
 
 .record-ring-value {
-	font-size: 34rpx;
+	font-size: 40rpx;
 	line-height: 1.2;
 	font-weight: 800;
-	color: #14b882;
+	color: #14936d;
 	font-family: 'DIN Alternate', -apple-system, sans-serif;
 }
 
@@ -1106,7 +1227,7 @@ onShareAppMessage(() => ({
 	margin-top: 8rpx;
 	font-size: 20rpx;
 	font-weight: 500;
-	color: #5c8274;
+	color: #6b7280;
 }
 
 .record-metric-group {
@@ -1120,11 +1241,9 @@ onShareAppMessage(() => ({
 	gap: 0;
 	border-radius: 28rpx;
 	overflow: hidden;
-	background: rgba(255, 255, 255, 0.6);
-	-webkit-backdrop-filter: blur(10px);
-	backdrop-filter: blur(10px);
-	border: 1rpx solid rgba(255, 255, 255, 0.8);
-	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.02);
+	background: linear-gradient(180deg, #fbfcfc 0%, #f7faf8 100%);
+	border: 1rpx solid rgba(15, 23, 42, 0.05);
+	box-shadow: inset 0 1rpx 0 rgba(255, 255, 255, 0.9);
 }
 
 .record-metric-item {
@@ -1146,7 +1265,7 @@ onShareAppMessage(() => ({
 	top: 28rpx;
 	bottom: 28rpx;
 	width: 2rpx;
-	background: rgba(20, 184, 130, 0.1);
+	background: rgba(15, 23, 42, 0.06);
 }
 
 .summary-metric-label {
@@ -1158,7 +1277,7 @@ onShareAppMessage(() => ({
 }
 
 .record-metric-item .summary-metric-label {
-	color: #6b9184;
+	color: #6b7280;
 }
 
 .summary-metric-value-row {
@@ -1170,7 +1289,7 @@ onShareAppMessage(() => ({
 }
 
 .summary-metric-value {
-	font-size: 48rpx;
+	font-size: 52rpx;
 	font-weight: 800;
 	color: #1a1a1a;
 	line-height: 1;
@@ -1178,7 +1297,7 @@ onShareAppMessage(() => ({
 }
 
 .record-metric-item .summary-metric-value {
-	color: #14b882;
+	color: #111827;
 }
 
 .summary-metric-unit {
@@ -1188,7 +1307,7 @@ onShareAppMessage(() => ({
 }
 
 .record-metric-item .summary-metric-unit {
-	color: #52776a;
+	color: #6b7280;
 }
 
 .record-group-note {
@@ -1197,8 +1316,10 @@ onShareAppMessage(() => ({
 	font-size: 22rpx;
 	font-weight: 500;
 	line-height: 1.5;
-	color: #6f9487;
-	background: rgba(20, 184, 130, 0.05);
+	color: #4b5563;
+	background: linear-gradient(180deg, #fafcfb 0%, #f5f8f6 100%);
+	border: 1rpx solid rgba(15, 23, 42, 0.05);
+	box-shadow: inset 0 1rpx 0 rgba(255, 255, 255, 0.9);
 	padding: 10rpx 14rpx;
 	border-radius: 16rpx;
 }
@@ -1217,21 +1338,20 @@ onShareAppMessage(() => ({
 	text-align: center;
 	border-radius: 999rpx;
 	justify-content: center;
-	background: rgba(255, 255, 255, 0.85);
-	-webkit-backdrop-filter: blur(10px);
-	backdrop-filter: blur(10px);
-	border: 2rpx solid rgba(255, 255, 255, 1);
-	box-shadow: 0 12rpx 28rpx rgba(83, 157, 128, 0.1);
+	background: linear-gradient(180deg, #ffffff 0%, #f7faf8 100%);
+	border: 2rpx solid rgba(15, 23, 42, 0.06);
+	box-shadow: 0 14rpx 28rpx rgba(15, 23, 42, 0.07);
 	display: flex;
 }
 
 .primary-pill-smoke {
-	background: linear-gradient(180deg, rgba(255, 242, 240, 0.9) 0%, rgba(255, 224, 218, 0.9) 100%);
-	border-color: rgba(255, 255, 255, 0.8);
+	background: linear-gradient(180deg, #ffffff 0%, #f7faf8 100%);
 }
 
 .primary-pill-resist {
-	background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(241, 255, 248, 0.95) 100%);
+	background: linear-gradient(180deg, #31c18b 0%, #1da36f 100%);
+	border-color: transparent;
+	box-shadow: 0 16rpx 30rpx rgba(29, 163, 111, 0.22);
 }
 
 .primary-pill-title {
@@ -1241,21 +1361,40 @@ onShareAppMessage(() => ({
 }
 
 .record-action-row .primary-pill-smoke .primary-pill-title {
-	color: #cb5a49;
+	color: #111827;
 }
 
 .record-action-row .primary-pill-resist .primary-pill-title {
-	color: #1f755e;
+	color: #ffffff;
 }
 
 /* ===== 记录模式 - 健康数据卡片 ===== */
 .health-data-card {
-	background: linear-gradient(135deg, #FFFFFF 0%, #F0FDF9 100%);
+	background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(251, 253, 252, 0.94) 100%);
+	-webkit-backdrop-filter: blur(20px);
+	backdrop-filter: blur(20px);
 	border-radius: 24rpx;
 	padding: 32rpx;
 	margin-top: 24rpx;
-	box-shadow: 0 8rpx 24rpx rgba(26, 163, 122, 0.08);
-	border: 1rpx solid rgba(26, 163, 122, 0.1);
+	box-shadow:
+		0 18rpx 38rpx rgba(15, 23, 42, 0.06),
+		0 6rpx 14rpx rgba(15, 23, 42, 0.03),
+		inset 0 1rpx 0 rgba(255, 255, 255, 0.9);
+	border: 1rpx solid rgba(15, 23, 42, 0.06);
+	position: relative;
+	overflow: hidden;
+}
+
+.health-data-card::before {
+	content: '';
+	position: absolute;
+	width: 220rpx;
+	height: 220rpx;
+	right: -64rpx;
+	top: -88rpx;
+	border-radius: 50%;
+	background: radial-gradient(circle, rgba(52, 200, 160, 0.12) 0%, rgba(52, 200, 160, 0) 72%);
+	pointer-events: none;
 }
 
 .health-data-header {
@@ -1268,12 +1407,12 @@ onShareAppMessage(() => ({
 .health-data-title {
 	font-size: 30rpx;
 	font-weight: 700;
-	color: #111827;
+	color: #17372e;
 }
 
 .health-data-subtitle {
 	font-size: 24rpx;
-	color: #9CA3AF;
+	color: #6b7280;
 }
 
 .health-metrics {
@@ -1287,8 +1426,10 @@ onShareAppMessage(() => ({
 	align-items: center;
 	gap: 16rpx;
 	padding: 20rpx;
-	background: rgba(26, 163, 122, 0.04);
+	background: linear-gradient(180deg, #fbfcfc 0%, #f7faf8 100%);
 	border-radius: 16rpx;
+	border: 1rpx solid rgba(15, 23, 42, 0.05);
+	box-shadow: inset 0 1rpx 0 rgba(255, 255, 255, 0.92);
 }
 
 .health-metric-icon {
@@ -1323,7 +1464,7 @@ onShareAppMessage(() => ({
 }
 
 .health-metric-value {
-	font-size: 28rpx;
+	font-size: 30rpx;
 	font-weight: 700;
 	color: #111827;
 	font-family: 'DIN Alternate', -apple-system, sans-serif;
@@ -1331,7 +1472,7 @@ onShareAppMessage(() => ({
 
 .health-metric-label {
 	font-size: 22rpx;
-	color: #6B7280;
+	color: #6b7280;
 	margin-top: 2rpx;
 }
 
@@ -1341,8 +1482,10 @@ onShareAppMessage(() => ({
 	gap: 12rpx;
 	margin-top: 24rpx;
 	padding: 16rpx 20rpx;
-	background: rgba(26, 163, 122, 0.06);
+	background: linear-gradient(180deg, #f7fbf9 0%, #f2f7f4 100%);
 	border-radius: 12rpx;
+	border: 1rpx solid rgba(15, 23, 42, 0.05);
+	box-shadow: inset 0 1rpx 0 rgba(255, 255, 255, 0.9);
 }
 
 .health-tip-icon {
@@ -1351,7 +1494,7 @@ onShareAppMessage(() => ({
 
 .health-tip-text {
 	font-size: 24rpx;
-	color: #059669;
+	color: #4b5563;
 	line-height: 1.5;
 }
 </style>
diff --git a/src/pages/logs/index.vue b/src/pages/logs/index.vue
index d1c347a..132d764 100644
--- a/src/pages/logs/index.vue
+++ b/src/pages/logs/index.vue
@@ -1,29 +1,41 @@
 <template>
 	<view class="page">
-		<view class="page-glow page-glow-a"></view>
-		<view class="page-glow page-glow-b"></view>
-		<view class="page-header">
-			<text class="page-eyebrow">History</text>
-			<text class="page-title">记录历史</text>
-			<text class="page-subtitle">按时间查看抽烟和忍住记录。</text>
-		</view>
-
-		<!-- 筛选标签 -->
-		<view class="filters">
-			<view class="tabs">
-				<view
-					v-for="tab in tabs"
-					:key="tab.value"
-					class="tab"
-					:class="{ 'tab-active': currentTab === tab.value }"
-					@tap="currentTab = tab.value"
-				>
-					{{ tab.label }}
+		<view class="hero-card card">
+			<text class="hero-title">记录历史</text>
+			<text class="hero-subtitle">按时间查看抽烟和忍住记录，随时回看自己的变化轨迹。</text>
+			<view class="hero-stats">
+				<view class="hero-stat">
+					<text class="hero-stat-value">{{ filteredLogs.length }}</text>
+					<text class="hero-stat-label">当前筛选</text>
+				</view>
+				<view class="hero-stat">
+					<text class="hero-stat-value">{{ smokeCount }}</text>
+					<text class="hero-stat-label">抽烟</text>
+				</view>
+				<view class="hero-stat">
+					<text class="hero-stat-value">{{ resistedCount }}</text>
+					<text class="hero-stat-label">忍住</text>
+				</view>
+			</view>
+		</view>
+
+		<view class="section">
+			<text class="section-label">筛选记录</text>
+			<view class="filters card">
+				<view class="tabs">
+					<view
+						v-for="tab in tabs"
+						:key="tab.value"
+						class="tab"
+						:class="{ 'tab-active': currentTab === tab.value }"
+						@tap="currentTab = tab.value"
+					>
+						{{ tab.label }}
+					</view>
 				</view>
 			</view>
 		</view>
 
-		<!-- 记录列表 -->
 		<scroll-view
 			class="scroll-container"
 			scroll-y
@@ -32,7 +44,8 @@
 			@refresherrefresh="onRefresh"
 			@scrolltolower="onLoadMore"
 		>
-			<!-- 骨架屏 -->
+			<text class="section-label">时间记录</text>
+
 			<view v-if="logsStore.loading && logsStore.logs.length === 0" class="skeleton">
 				<view v-for="i in 3" :key="i" class="skeleton-item">
 					<view class="skeleton-dot"></view>
@@ -44,7 +57,6 @@
 				</view>
 			</view>
 
-			<!-- 时间轴 -->
 			<view v-else-if="filteredLogs.length > 0" class="log-list">
 				<view v-for="(group, date) in groupedLogs" :key="date" class="log-group">
 					<view class="group-header">
@@ -97,14 +109,12 @@
 				</view>
 			</view>
 
-			<!-- 空状态 -->
 			<view v-else class="empty-state">
 				<text class="empty-icon">记</text>
 				<text class="empty-text">暂无记录</text>
 				<text class="empty-hint">点击右下角按钮开始记录</text>
 			</view>
 
-			<!-- 加载更多 -->
 			<view v-if="logsStore.loading && logsStore.logs.length > 0" class="loading-more">
 				<text class="loading-text">加载中...</text>
 			</view>
@@ -112,14 +122,14 @@
 			<view v-if="!logsStore.hasMore && logsStore.logs.length > 0" class="no-more">
 				<text class="no-more-text">没有更多了</text>
 			</view>
+
+			<view class="bottom-safe"></view>
 		</scroll-view>
 
-		<!-- 浮动按钮 -->
 		<view class="fab" @tap="addLog">
 			<text class="fab-icon">+</text>
 		</view>
 		
-		<!-- 编辑弹框 -->
 		<smoke-record-dialog 
 			v-model:show="showEditDialog" 
 			:type="editType"
@@ -159,6 +169,9 @@ const filteredLogs = computed(() => {
 	return logs.filter(log => log.type === currentTab.value)
 })
 
+const smokeCount = computed(() => filteredLogs.value.filter(log => log.type === 'smoke').length)
+const resistedCount = computed(() => filteredLogs.value.filter(log => log.type === 'resisted').length)
+
 // 按日期分组
 const groupedLogs = computed(() => {
 	return filteredLogs.value.reduce((groups, log) => {
@@ -305,40 +318,15 @@ onShareAppMessage(() => {
 <style scoped>
 .page {
 	min-height: 100vh;
-	position: relative;
-	background:
-		radial-gradient(circle at top left, rgba(52, 200, 160, 0.16), transparent 30%),
-		radial-gradient(circle at top right, rgba(255, 255, 255, 0.92), transparent 24%),
-		linear-gradient(180deg, #edf2f8 0%, #f5f7fb 38%, #fbfdff 100%);
+	display: flex;
+	flex-direction: column;
+	background: linear-gradient(180deg, #E6F7F2 0%, #F0FBF7 40%, #FAFFFE 100%);
+	padding: 24rpx 28rpx 0;
 	box-sizing: border-box;
-	overflow: hidden;
 }
 
-.page-glow {
-	position: absolute;
-	border-radius: 50%;
-	filter: blur(24rpx);
-	opacity: 0.72;
-	pointer-events: none;
-}
-
-.page-glow-a {
-	top: 60rpx;
-	left: -140rpx;
-	width: 360rpx;
-	height: 360rpx;
-	background: rgba(52, 200, 160, 0.14);
-}
-
-.page-glow-b {
-	top: 360rpx;
-	right: -120rpx;
-	width: 320rpx;
-	height: 320rpx;
-	background: rgba(255, 255, 255, 0.9);
-}
-
-.page-header,
+.hero-card,
+.section,
 .filters,
 .scroll-container,
 .fab {
@@ -346,53 +334,85 @@ onShareAppMessage(() => {
 	z-index: 1;
 }
 
-.page-header {
-	padding: 32rpx 32rpx 8rpx;
+.card {
+	background: rgba(255, 255, 255, 0.88);
+	border-radius: 24rpx;
+	border: 1.5rpx solid rgba(52, 200, 160, 0.14);
+	box-shadow: 0 4rpx 18rpx rgba(52, 200, 160, 0.07);
+	padding: 24rpx;
 }
 
-.page-eyebrow {
+.hero-card {
+	margin-bottom: 20rpx;
+}
+
+.hero-title {
 	display: block;
-	font-size: 20rpx;
+	font-size: 38rpx;
+	line-height: 1.2;
 	font-weight: 700;
-	letter-spacing: 4rpx;
-	text-transform: uppercase;
-	color: #98a2b3;
+	color: #0D3D2E;
 }
 
-.page-title {
+.hero-subtitle {
 	display: block;
 	margin-top: 10rpx;
-	font-size: 42rpx;
-	line-height: 1.18;
-	font-weight: 700;
-	color: #111827;
+	font-size: 25rpx;
+	line-height: 1.5;
+	color: #52806E;
 }
 
-.page-subtitle {
+.hero-stats {
+	display: flex;
+	gap: 16rpx;
+	margin-top: 24rpx;
+}
+
+.hero-stat {
+	flex: 1;
+	background: rgba(52, 200, 160, 0.06);
+	border: 1.5rpx solid rgba(52, 200, 160, 0.1);
+	border-radius: 20rpx;
+	padding: 18rpx 14rpx;
+}
+
+.hero-stat-value {
+	display: block;
+	font-size: 40rpx;
+	font-weight: 700;
+	color: #0D3D2E;
+}
+
+.hero-stat-label {
 	display: block;
 	margin-top: 8rpx;
-	font-size: 24rpx;
-	line-height: 1.5;
-	color: #667085;
+	font-size: 22rpx;
+	color: #7aA898;
+}
+
+.section {
+	margin-bottom: 20rpx;
+}
+
+.section-label {
+	display: block;
+	margin: 0 0 14rpx 6rpx;
+	font-size: 26rpx;
+	font-weight: 600;
+	color: #1a5c45;
 }
 
 .filters {
-	display: flex;
-	align-items: center;
-	gap: 16rpx;
-	padding: 16rpx 32rpx 8rpx;
+	padding: 24rpx;
 }
 
 .tabs {
 	display: flex;
-	flex: 1;
-	background: rgba(255, 255, 255, 0.76);
-	border-radius: 24rpx;
+	background: rgba(255, 255, 255, 0.82);
+	border-radius: 22rpx;
 	padding: 6rpx;
-	box-shadow: 0 12rpx 28rpx rgba(15, 23, 42, 0.06);
-	border: 2rpx solid rgba(255, 255, 255, 0.66);
-	backdrop-filter: blur(24rpx);
-	-webkit-backdrop-filter: blur(24rpx);
+	border: 1.5rpx solid rgba(52, 200, 160, 0.14);
+	box-shadow: 0 4rpx 16rpx rgba(52, 200, 160, 0.07);
 }
 
 .tab {
@@ -400,73 +420,56 @@ onShareAppMessage(() => {
 	text-align: center;
 	padding: 14rpx 0;
 	border-radius: 16rpx;
-	font-size: 26rpx;
-	color: #6B7280;
-	transition: all 0.2s;
+	font-size: 24rpx;
 	font-weight: 600;
+	color: #7aA898;
 }
 
 .tab-active {
-	background: rgba(255, 255, 255, 0.92);
-	color: #111827;
-	box-shadow: 0 8rpx 18rpx rgba(15, 23, 42, 0.06);
-}
-
-.filter-btn {
-	width: 72rpx;
-	height: 72rpx;
-	border-radius: 20rpx;
-	background-color: #FFFFFF;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	border: 2rpx solid #ECFDF3;
-	box-shadow: 0 6rpx 14rpx rgba(16, 185, 129, 0.1);
-}
-
-.filter-icon {
-	font-size: 32rpx;
+	background: #FFFFFF;
+	color: #0D3D2E;
+	box-shadow: 0 4rpx 12rpx rgba(52, 200, 160, 0.12);
 }
 
 .scroll-container {
-	height: calc(100vh - 10rpx);
-	padding: 0 32rpx 40rpx;
+	flex: 1;
+	min-height: 0;
+	padding-bottom: calc(140rpx + env(safe-area-inset-bottom));
 	box-sizing: border-box;
 }
 
-/* 骨架屏 */
 .skeleton {
-	padding-top: 24rpx;
+	padding-top: 6rpx;
 }
 
 .skeleton-item {
-	position: relative;
-	padding-left: 80rpx;
-	margin-bottom: 32rpx;
+	display: flex;
+	gap: 20rpx;
+	margin-bottom: 20rpx;
 }
 
 .skeleton-dot {
-	position: absolute;
-	left: 0;
-	top: 16rpx;
-	width: 48rpx;
-	height: 48rpx;
-	border-radius: 50%;
-	background: linear-gradient(90deg, #E5E7EB 25%, #F3F4F6 50%, #E5E7EB 75%);
+	width: 64rpx;
+	height: 64rpx;
+	border-radius: 18rpx;
+	background: linear-gradient(90deg, rgba(52, 200, 160, 0.08) 25%, rgba(52, 200, 160, 0.18) 50%, rgba(52, 200, 160, 0.08) 75%);
 	background-size: 200% 100%;
 	animation: shimmer 1.5s infinite;
+	flex-shrink: 0;
 }
 
 .skeleton-card {
-	background: rgba(255, 255, 255, 0.82);
-	border-radius: 28rpx;
+	flex: 1;
+	background: rgba(255, 255, 255, 0.88);
+	border-radius: 24rpx;
 	padding: 24rpx;
-	border: 2rpx solid rgba(255, 255, 255, 0.66);
+	border: 1.5rpx solid rgba(52, 200, 160, 0.14);
+	box-shadow: 0 4rpx 18rpx rgba(52, 200, 160, 0.07);
 }
 
 .skeleton-line {
 	height: 24rpx;
-	background: linear-gradient(90deg, #E5E7EB 25%, #F3F4F6 50%, #E5E7EB 75%);
+	background: linear-gradient(90deg, rgba(52, 200, 160, 0.08) 25%, rgba(52, 200, 160, 0.18) 50%, rgba(52, 200, 160, 0.08) 75%);
 	background-size: 200% 100%;
 	animation: shimmer 1.5s infinite;
 	border-radius: 8rpx;
@@ -491,30 +494,30 @@ onShareAppMessage(() => {
 	100% { background-position: 200% 0; }
 }
 
-/* 列表分组 */
 .log-group {
-	margin-bottom: 32rpx;
+	margin-bottom: 28rpx;
 }
 
 .group-header {
 	display: flex;
 	align-items: center;
 	gap: 12rpx;
-	margin-bottom: 16rpx;
+	margin-bottom: 14rpx;
 }
 
 .group-title {
-	font-size: 30rpx;
+	font-size: 28rpx;
 	font-weight: 700;
-	color: #0F172A;
+	color: #0D3D2E;
 }
 
 .group-count {
 	font-size: 22rpx;
-	color: #667085;
-	background-color: rgba(255, 255, 255, 0.76);
+	color: #7aA898;
+	background-color: rgba(52, 200, 160, 0.06);
 	padding: 6rpx 16rpx;
 	border-radius: 999rpx;
+	border: 1.5rpx solid rgba(52, 200, 160, 0.14);
 }
 
 .group-items {
@@ -525,25 +528,22 @@ onShareAppMessage(() => {
 
 .log-card {
 	position: relative;
-	background: rgba(255, 255, 255, 0.82);
-	border-radius: 28rpx;
+	background: rgba(255, 255, 255, 0.88);
+	border-radius: 24rpx;
 	padding: 24rpx 24rpx 20rpx 24rpx;
-	box-shadow: 0 14rpx 32rpx rgba(15, 23, 42, 0.06);
+	box-shadow: 0 4rpx 18rpx rgba(52, 200, 160, 0.07);
 	display: flex;
 	gap: 20rpx;
 	overflow: hidden;
-	backdrop-filter: blur(24rpx);
-	-webkit-backdrop-filter: blur(24rpx);
+	border: 1.5rpx solid rgba(52, 200, 160, 0.14);
 }
 
 .log-card-resisted {
-	background: linear-gradient(135deg, rgba(245, 255, 251, 0.95), rgba(255, 255, 255, 0.88));
-	border: 2rpx solid rgba(255, 255, 255, 0.7);
+	background: linear-gradient(135deg, rgba(245, 255, 251, 0.96), rgba(255, 255, 255, 0.88));
 }
 
 .log-card-smoke {
-	background: linear-gradient(135deg, rgba(255, 248, 242, 0.95), rgba(255, 255, 255, 0.88));
-	border: 2rpx solid rgba(255, 255, 255, 0.7);
+	background: linear-gradient(135deg, rgba(255, 250, 244, 0.96), rgba(255, 255, 255, 0.88));
 }
 
 .log-bar {
@@ -552,11 +552,11 @@ onShareAppMessage(() => {
 	top: 0;
 	bottom: 0;
 	width: 8rpx;
-	background-color: #10B981;
+	background-color: #34C8A0;
 }
 
 .log-card-smoke .log-bar {
-	background-color: #F97316;
+	background-color: #B45309;
 }
 
 .log-icon {
@@ -572,13 +572,13 @@ onShareAppMessage(() => {
 }
 
 .icon-resisted {
-	background-color: rgba(16, 185, 129, 0.16);
-	color: #0F766E;
+	background-color: rgba(52, 200, 160, 0.12);
+	color: #1a8c62;
 }
 
 .icon-smoke {
-	background-color: rgba(249, 115, 22, 0.15);
-	color: #C2410C;
+	background-color: rgba(251, 191, 36, 0.14);
+	color: #B45309;
 }
 
 .log-main {
@@ -603,24 +603,24 @@ onShareAppMessage(() => {
 .log-time {
 	font-size: 30rpx;
 	font-weight: 700;
-	color: #0F172A;
+	color: #0D3D2E;
 }
 
 .log-tag {
 	font-size: 22rpx;
-	padding: 6rpx 14rpx;
-	border-radius: 12rpx;
-	font-weight: 700;
+	padding: 8rpx 16rpx;
+	border-radius: 999rpx;
+	font-weight: 600;
 }
 
 .tag-smoke {
-	background-color: #FEE2E2;
-	color: #DC2626;
+	background-color: rgba(251, 191, 36, 0.14);
+	color: #B45309;
 }
 
 .tag-resisted {
-	background-color: #DCFCE7;
-	color: #16A34A;
+	background-color: rgba(52, 200, 160, 0.12);
+	color: #1a8c62;
 }
 
 .log-right {
@@ -632,24 +632,24 @@ onShareAppMessage(() => {
 
 .count-pill {
 	font-size: 22rpx;
-	color: #DC2626;
-	background-color: #FEE2E2;
-	padding: 6rpx 14rpx;
-	border-radius: 12rpx;
-	font-weight: 700;
+	color: #B45309;
+	background-color: rgba(251, 191, 36, 0.14);
+	padding: 8rpx 16rpx;
+	border-radius: 999rpx;
+	font-weight: 600;
 }
 
 .thumb-pill {
 	font-size: 24rpx;
-	background-color: #DCFCE7;
-	color: #16A34A;
-	padding: 6rpx 12rpx;
-	border-radius: 12rpx;
+	background-color: rgba(52, 200, 160, 0.12);
+	color: #1a8c62;
+	padding: 8rpx 14rpx;
+	border-radius: 999rpx;
 }
 
 .log-desc {
-	font-size: 24rpx;
-	color: #475467;
+	font-size: 25rpx;
+	color: #52806E;
 	line-height: 1.5;
 	margin-bottom: 10rpx;
 }
@@ -669,10 +669,11 @@ onShareAppMessage(() => {
 
 .log-interval {
 	font-size: 22rpx;
-	color: #667085;
-	background-color: rgba(255, 255, 255, 0.72);
-	padding: 4rpx 12rpx;
+	color: #7aA898;
+	background-color: rgba(52, 200, 160, 0.06);
+	padding: 6rpx 14rpx;
 	border-radius: 999rpx;
+	border: 1.5rpx solid rgba(52, 200, 160, 0.12);
 }
 
 .log-actions {
@@ -684,31 +685,31 @@ onShareAppMessage(() => {
 
 .action-btn {
 	font-size: 22rpx;
-	padding: 6rpx 14rpx;
+	padding: 8rpx 16rpx;
 	border-radius: 999rpx;
-	background-color: rgba(255, 255, 255, 0.8);
-	border: 2rpx solid rgba(15, 23, 42, 0.08);
-	color: #667085;
+	background-color: rgba(255, 255, 255, 0.9);
+	border: 1.5rpx solid rgba(52, 200, 160, 0.18);
+	color: #7aA898;
 }
 
 .edit-btn {
 	color: #2563EB;
-	border-color: #DBEAFE;
-	background-color: #EFF6FF;
+	border-color: rgba(37, 99, 235, 0.18);
+	background-color: rgba(37, 99, 235, 0.08);
 }
 
 .delete-btn {
 	color: #DC2626;
-	border-color: #FECACA;
-	background-color: #FEF2F2;
+	border-color: rgba(220, 38, 38, 0.16);
+	background-color: rgba(220, 38, 38, 0.08);
 }
 
 .level-unknown {
-	color: #64748B;
+	color: #7aA898;
 }
 
 .level-1 {
-	color: #16A34A;
+	color: #1a8c62;
 }
 
 .level-2 {
@@ -727,43 +728,44 @@ onShareAppMessage(() => {
 	color: #EF4444;
 }
 
-/* 空状态 */
 .empty-state {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
 	padding: 120rpx 32rpx;
+	border-radius: 24rpx;
+	border: 2rpx dashed rgba(52, 200, 160, 0.2);
+	background: transparent;
 }
 
 .empty-icon {
 	width: 112rpx;
 	height: 112rpx;
 	border-radius: 36rpx;
-	background: rgba(255, 255, 255, 0.82);
-	border: 2rpx solid rgba(255, 255, 255, 0.68);
+	background: rgba(52, 200, 160, 0.06);
+	border: 1.5rpx solid rgba(52, 200, 160, 0.14);
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	font-size: 40rpx;
 	font-weight: 700;
-	color: #98a2b3;
+	color: #7aA898;
 	margin-bottom: 24rpx;
 }
 
 .empty-text {
 	font-size: 32rpx;
-	color: #6B7280;
-	font-weight: 500;
+	color: #0D3D2E;
+	font-weight: 600;
 	margin-bottom: 12rpx;
 }
 
 .empty-hint {
-	font-size: 26rpx;
-	color: #9CA3AF;
+	font-size: 24rpx;
+	color: #7aA898;
 }
 
-/* 加载状态 */
 .loading-more, .no-more {
 	text-align: center;
 	padding: 32rpx;
@@ -771,22 +773,21 @@ onShareAppMessage(() => {
 
 .loading-text, .no-more-text {
 	font-size: 24rpx;
-	color: #9CA3AF;
+	color: #7aA898;
 }
 
-/* 浮动按钮 */
 .fab {
 	position: fixed;
 	right: 32rpx;
 	bottom: 140rpx;
 	width: 96rpx;
 	height: 96rpx;
-	background: linear-gradient(180deg, #32c59d 0%, #1aa37a 100%);
+	background: linear-gradient(180deg, #3DD9AE 0%, #34C8A0 100%);
 	border-radius: 50%;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	box-shadow: 0 16rpx 34rpx rgba(26, 163, 122, 0.24);
+	box-shadow: 0 12rpx 28rpx rgba(52, 200, 160, 0.28);
 	transition: all 0.3s;
 	z-index: 100;
 }
@@ -800,4 +801,8 @@ onShareAppMessage(() => {
 	color: #FFFFFF;
 	font-weight: 300;
 }
+
+.bottom-safe {
+	height: calc(32rpx + env(safe-area-inset-bottom));
+}
 </style>
diff --git a/src/pages/mode-select/index.vue b/src/pages/mode-select/index.vue
index f4bcca5..79cc547 100644
--- a/src/pages/mode-select/index.vue
+++ b/src/pages/mode-select/index.vue
@@ -71,6 +71,21 @@ function setupNavBar() {
 	}
 }
 
+function isProfileCompleted(profileData) {
+	const profile = profileData?.profile
+	return profileData?.is_completed ||
+		(profile && profile.onboarding_completed_at) ||
+		(profile && profile.baseline_cigs_per_day > 0)
+}
+
+function goHome() {
+	uni.switchTab({ url: '/pages/index/index' })
+}
+
+function goOnboarding() {
+	uni.redirectTo({ url: '/pages/onboarding/index' })
+}
+
 async function selectMode(mode) {
 	if (submitting.value) return
 	submitting.value = true
@@ -78,20 +93,15 @@ async function selectMode(mode) {
 
 	try {
 		const profileData = await profileStore.saveProfile({ mode })
-		const profile = profileData.profile
-		const isCompleted = profileData.is_completed ||
-			(profile && profile.onboarding_completed_at) ||
-			(profile && profile.baseline_cigs_per_day > 0)
-
-		if (!profileData.exists || !isCompleted) {
-			uni.redirectTo({ url: '/pages/onboarding/index' })
+		if (!profileData.exists || !isProfileCompleted(profileData)) {
+			goOnboarding()
 			return
 		}
 
-		uni.switchTab({ url: '/pages/index/index' })
+		goHome()
 	} catch (e) {
 		console.error('selectMode error:', e)
-		uni.switchTab({ url: '/pages/index/index' })
+		goHome()
 	} finally {
 		submitting.value = false
 	}
@@ -100,6 +110,22 @@ async function selectMode(mode) {
 onMounted(async () => {
 	setupNavBar()
 	await waitForLogin()
+
+	// New users go directly to onboarding (single-page flow)
+	try {
+		const profileData = await profileStore.fetchProfile()
+		if (!profileData?.exists || !isProfileCompleted(profileData)) {
+			goOnboarding()
+			return
+		}
+		if (profileData?.profile?.mode || userStore.mode) {
+			goHome()
+		}
+	} catch (e) {
+		if (userStore.mode) {
+			goHome()
+		}
+	}
 })
 </script>
 
diff --git a/src/pages/onboarding/index.vue b/src/pages/onboarding/index.vue
index 2e19426..7f3c78b 100644
--- a/src/pages/onboarding/index.vue
+++ b/src/pages/onboarding/index.vue
@@ -17,6 +17,7 @@
 						:class="{ 'mode-switch-item-active': formData.mode === item.value }"
 						@tap="selectMode(item.value)"
 					>
+						<text class="mode-switch-icon">{{ item.icon }}</text>
 						<text class="mode-switch-title">{{ item.label }}</text>
 						<text class="mode-switch-desc">{{ item.desc }}</text>
 					</view>
@@ -98,7 +99,7 @@
 							v-model="priceYuan"
 							class="inline-field"
 							placeholder="25"
-							placeholder-style="color: #9CA3AF"
+							placeholder-style="color: #9CC5B5"
 						/>
 						<text class="inline-unit">元/包</text>
 					</view>
@@ -131,8 +132,8 @@ const navBarHeight = ref(0)
 const modeSaving = ref(false)
 
 const modeOptions = [
-	{ value: 'quit', label: '戒烟打卡', desc: '按天记录今天没抽' },
-	{ value: 'record', label: '记录抽烟', desc: '按支数记录变化' }
+	{ value: 'quit', label: '戒烟打卡', desc: '按天打卡，坚持戒烟', icon: '🌿' },
+	{ value: 'record', label: '记录抽烟', desc: '按支数记录变化趋势', icon: '📊' }
 ]
 
 const formData = ref({
@@ -274,50 +275,56 @@ onShareAppMessage(() => {
 </script>
 
 <style scoped>
+/* ── 页面基础 ── */
 .page {
 	min-height: 100vh;
-	background:
-		radial-gradient(circle at top left, rgba(52, 200, 160, 0.16), transparent 30%),
-		radial-gradient(circle at top right, rgba(255, 255, 255, 0.92), transparent 22%),
-		linear-gradient(180deg, #edf2f8 0%, #f5f7fb 38%, #fbfdff 100%);
+	background: linear-gradient(180deg, #E6F7F2 0%, #F0FBF7 40%, #FAFFFE 100%);
 	display: flex;
 	flex-direction: column;
 }
 
 .nav-area {
-	padding: 24rpx 32rpx;
+	padding: 20rpx 32rpx 16rpx;
 	background: transparent;
 }
 
 .nav-title {
 	display: block;
-	font-size: 40rpx;
+	font-size: 38rpx;
 	font-weight: 700;
-	color: #111827;
+	color: #0D3D2E;
 }
 
 .nav-subtitle {
 	display: block;
-	margin-top: 8rpx;
-	font-size: 26rpx;
-	color: #6B7280;
+	margin-top: 6rpx;
+	font-size: 24rpx;
+	color: #52806E;
 }
 
+/* ── 滚动区 ── */
 .content {
 	flex: 1;
-	padding: 0 32rpx;
+	padding: 0 28rpx;
 }
 
+/* ── 卡片式表单区块 ── */
 .form-section {
-	margin-bottom: 40rpx;
+	margin-bottom: 20rpx;
+	background: rgba(255, 255, 255, 0.88);
+	border-radius: 24rpx;
+	border: 1.5rpx solid rgba(52, 200, 160, 0.14);
+	box-shadow: 0 4rpx 18rpx rgba(52, 200, 160, 0.07);
+	padding: 28rpx 24rpx;
 }
 
 .section-label {
 	display: block;
-	margin-bottom: 16rpx;
-	font-size: 28rpx;
+	margin-bottom: 18rpx;
+	font-size: 26rpx;
 	font-weight: 600;
-	color: #374151;
+	color: #1a5c45;
+	letter-spacing: 0.4rpx;
 }
 
 .section-row {
@@ -326,7 +333,7 @@ onShareAppMessage(() => {
 	align-items: center;
 }
 
-/* Mode switch */
+/* ── 模式选择 ── */
 .mode-switch {
 	display: grid;
 	grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -334,35 +341,50 @@ onShareAppMessage(() => {
 }
 
 .mode-switch-item {
-	padding: 24rpx;
+	padding: 28rpx 20rpx;
 	border-radius: 20rpx;
-	background: rgba(255, 255, 255, 0.8);
-	border: 2rpx solid rgba(255, 255, 255, 0.66);
-	box-shadow: 0 8rpx 24rpx rgba(15, 23, 42, 0.05);
+	background: rgba(255, 255, 255, 0.72);
+	border: 2rpx solid rgba(52, 200, 160, 0.1);
+	box-shadow: 0 2rpx 10rpx rgba(52, 200, 160, 0.04);
+	transition: all 0.2s;
 }
 
 .mode-switch-item-active {
-	background: rgba(255, 255, 255, 0.96);
-	border-color: rgba(26, 163, 122, 0.3);
-	box-shadow: 0 8rpx 24rpx rgba(26, 163, 122, 0.1);
+	background: rgba(52, 200, 160, 0.09);
+	border-color: rgba(52, 200, 160, 0.45);
+	box-shadow: 0 4rpx 16rpx rgba(52, 200, 160, 0.14);
+}
+
+.mode-switch-icon {
+	display: block;
+	font-size: 40rpx;
+	margin-bottom: 10rpx;
 }
 
 .mode-switch-title {
 	display: block;
 	font-size: 28rpx;
-	font-weight: 600;
-	color: #111827;
+	font-weight: 700;
+	color: #0D3D2E;
+}
+
+.mode-switch-item-active .mode-switch-title {
+	color: #1a8c62;
 }
 
 .mode-switch-desc {
 	display: block;
-	margin-top: 8rpx;
-	font-size: 22rpx;
-	line-height: 1.4;
-	color: #6b7280;
+	margin-top: 6rpx;
+	font-size: 21rpx;
+	line-height: 1.5;
+	color: #7aA898;
 }
 
-/* Inline input */
+.mode-switch-item-active .mode-switch-desc {
+	color: #3a9e78;
+}
+
+/* ── 数字步进器 ── */
 .inline-input {
 	display: flex;
 	align-items: center;
@@ -370,71 +392,70 @@ onShareAppMessage(() => {
 }
 
 .inline-btn {
-	width: 56rpx;
-	height: 56rpx;
+	width: 60rpx;
+	height: 60rpx;
 	border-radius: 50%;
-	background: rgba(255, 255, 255, 0.9);
+	background: rgba(52, 200, 160, 0.1);
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	font-size: 36rpx;
-	color: #1aa37a;
-	border: 2rpx solid rgba(255, 255, 255, 0.72);
-	box-shadow: 0 4rpx 12rpx rgba(15, 23, 42, 0.06);
+	font-size: 38rpx;
+	color: #34C8A0;
+	border: 1.5rpx solid rgba(52, 200, 160, 0.25);
 }
 
 .inline-value {
-	font-size: 36rpx;
+	font-size: 38rpx;
 	font-weight: 700;
-	color: #111827;
-	min-width: 48rpx;
+	color: #0D3D2E;
+	min-width: 52rpx;
 	text-align: center;
 }
 
 .inline-unit {
-	font-size: 26rpx;
-	color: #6B7280;
+	font-size: 24rpx;
+	color: #7aA898;
 }
 
 .inline-field {
 	width: 100rpx;
 	font-size: 32rpx;
 	font-weight: 600;
-	color: #111827;
+	color: #0D3D2E;
 	text-align: center;
-	background: rgba(255, 255, 255, 0.9);
-	padding: 12rpx 16rpx;
+	background: rgba(52, 200, 160, 0.06);
+	padding: 10rpx 14rpx;
 	border-radius: 12rpx;
-	border: 2rpx solid rgba(255, 255, 255, 0.72);
+	border: 1.5rpx solid rgba(52, 200, 160, 0.2);
 }
 
-/* Options row */
+/* ── 标签选择 ── */
 .options-row {
 	display: flex;
 	flex-wrap: wrap;
-	gap: 16rpx;
+	gap: 14rpx;
 }
 
 .option-tag {
-	padding: 16rpx 28rpx;
+	padding: 14rpx 26rpx;
 	border-radius: 999rpx;
-	background: rgba(255, 255, 255, 0.84);
-	font-size: 26rpx;
-	color: #374151;
-	border: 2rpx solid rgba(255, 255, 255, 0.72);
-	box-shadow: 0 4rpx 12rpx rgba(15, 23, 42, 0.04);
+	background: rgba(255, 255, 255, 0.9);
+	font-size: 25rpx;
+	color: #4a7a66;
+	border: 1.5rpx solid rgba(52, 200, 160, 0.18);
 }
 
 .option-tag-active {
-	background: rgba(26, 163, 122, 0.12);
-	border-color: rgba(26, 163, 122, 0.3);
+	background: rgba(52, 200, 160, 0.12);
+	border-color: rgba(52, 200, 160, 0.45);
 	color: #1a7f61;
+	font-weight: 600;
 }
 
-/* Time row */
+/* ── 作息时间 ── */
 .time-row {
 	display: flex;
-	gap: 24rpx;
+	gap: 20rpx;
 }
 
 .time-item {
@@ -442,52 +463,52 @@ onShareAppMessage(() => {
 }
 
 .time-label {
-	font-size: 24rpx;
-	color: #6B7280;
+	font-size: 22rpx;
+	color: #7aA898;
 	display: block;
 	margin-bottom: 8rpx;
 }
 
 .time-picker {
-	background: rgba(255, 255, 255, 0.9);
-	padding: 20rpx 24rpx;
-	border-radius: 12rpx;
-	font-size: 32rpx;
+	background: rgba(52, 200, 160, 0.06);
+	padding: 18rpx 20rpx;
+	border-radius: 14rpx;
+	font-size: 30rpx;
 	font-weight: 600;
-	color: #111827;
+	color: #0D3D2E;
 	text-align: center;
-	border: 2rpx solid rgba(255, 255, 255, 0.72);
-	box-shadow: 0 4rpx 12rpx rgba(15, 23, 42, 0.04);
+	border: 1.5rpx solid rgba(52, 200, 160, 0.2);
 }
 
+/* ── 底部空白 + 按钮 ── */
 .bottom-space {
 	height: 160rpx;
 }
 
-/* Footer */
 .footer {
 	position: fixed;
 	left: 0;
 	right: 0;
 	bottom: 0;
-	padding: 24rpx 32rpx;
-	padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
-	background: linear-gradient(180deg, transparent 0%, rgba(248, 250, 252, 0.95) 40%);
+	padding: 20rpx 28rpx;
+	padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
+	background: linear-gradient(180deg, transparent 0%, rgba(240, 251, 247, 0.97) 35%);
 }
 
 .btn-primary {
 	height: 96rpx;
-	background: linear-gradient(180deg, #32c59d 0%, #1aa37a 100%);
+	background: linear-gradient(180deg, #3DD9AE 0%, #34C8A0 100%);
 	border-radius: 48rpx;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	box-shadow: 0 12rpx 28rpx rgba(26, 163, 122, 0.22);
+	box-shadow: 0 12rpx 28rpx rgba(52, 200, 160, 0.28);
 }
 
 .btn-text {
 	font-size: 32rpx;
 	font-weight: 600;
 	color: #FFFFFF;
+	letter-spacing: 1rpx;
 }
 </style>
diff --git a/src/pages/profile/index.vue b/src/pages/profile/index.vue
index 9daa50d..6e7ee29 100644
--- a/src/pages/profile/index.vue
+++ b/src/pages/profile/index.vue
@@ -1,54 +1,26 @@
 <template>
 	<view class="page">
-		<view class="page-glow page-glow-a"></view>
-		<view class="page-glow page-glow-b"></view>
+		<view class="page-bg"></view>
 		<view class="nav-placeholder" :style="{ height: navBarHeight + 'px' }"></view>
 
-		<view class="page-header">
-			<text class="header-eyebrow">Account</text>
-			<text class="header-title">个人中心</text>
-			<text class="header-subtitle">模式切换、分享与基础设置</text>
-		</view>
-
-		<view class="user-section">
-			<image class="avatar" :src="userAvatar" mode="aspectFill"></image>
-			<view class="user-copy">
-				<text class="user-name">{{ userName }}</text>
-				<text class="user-desc">已连接戒烟记录与统计数据</text>
-				<view class="user-meta">
-					<text class="user-pill">{{ modeText }}</text>
-					<text class="user-pill user-pill-muted">{{ shareToken ? '分享已启用' : '分享未生成' }}</text>
+		<view class="section">
+			<text class="section-label">当前账号</text>
+			<view class="user-section card">
+				<image class="avatar" :src="userAvatar" mode="aspectFill"></image>
+				<view class="user-copy">
+					<text class="user-name">{{ userName }}</text>
+					<text class="user-desc">已连接戒烟记录与统计数据</text>
+					<view class="user-meta">
+						<text class="user-pill">{{ modeText }}</text>
+						<text class="user-pill user-pill-muted">{{ shareToken ? '分享已启用' : '分享未生成' }}</text>
+					</view>
 				</view>
 			</view>
 		</view>
 
 		<view class="section">
-			<view class="mode-card">
-				<view class="mode-card-header">
-					<view class="menu-icon menu-icon-accent">
-						<text class="menu-glyph">模</text>
-					</view>
-					<view class="menu-content">
-						<text class="menu-label">打卡模式</text>
-						<text class="menu-desc">直接切换成“戒烟打卡”或“记录抽烟”</text>
-					</view>
-				</view>
-				<view class="mode-switch">
-					<view
-						v-for="item in modeOptions"
-						:key="item.value"
-						class="mode-switch-item"
-						:class="{ 'mode-switch-item-active': userStore.mode === item.value }"
-						@tap="changeMode(item.value)"
-					>
-						<text class="mode-switch-title">{{ item.label }}</text>
-						<text class="mode-switch-desc">{{ item.desc }}</text>
-					</view>
-				</view>
-				<text class="mode-hint">当前：{{ modeText }}</text>
-			</view>
-
-			<view class="menu-list">
+			<text class="section-label">常用操作</text>
+			<view class="menu-list card">
 				<view class="menu-item">
 					<view class="menu-icon menu-icon-accent">
 						<text class="menu-glyph">享</text>
@@ -59,11 +31,11 @@
 						<view class="menu-actions">
 							<text class="menu-action" @tap.stop="previewSharePage">预览分享页</text>
 							<text class="menu-action-sep">·</text>
-							<text class="menu-action" @tap.stop="handleRefreshShare">刷新分享链接</text>
+							<text class="menu-action" @tap.stop="handleRefreshShare">刷新</text>
 						</view>
 					</view>
 					<button class="share-btn" open-type="share" :disabled="shareLoading || !shareToken">
-						{{ shareLoading ? '生成中' : '分享' }}
+						{{ shareLoading ? '生成中' : '去分享' }}
 					</button>
 				</view>
 
@@ -75,7 +47,7 @@
 					</view>
 					<view class="menu-content">
 						<text class="menu-label">重新填写问卷</text>
-						<text class="menu-desc">修改吸烟基线与个人信息</text>
+						<text class="menu-desc">修改打卡模式、吸烟基线等个人信息</text>
 					</view>
 					<text class="menu-arrow">›</text>
 				</view>
@@ -83,14 +55,15 @@
 		</view>
 
 		<view class="section">
-			<view class="menu-list">
+			<text class="section-label">更多设置</text>
+			<view class="menu-list card">
 				<view class="menu-item" @tap="clearCache">
 					<view class="menu-icon menu-icon-muted">
 						<text class="menu-glyph">清</text>
 					</view>
 					<view class="menu-content">
 						<text class="menu-label">清除缓存</text>
-						<text class="menu-desc">仅清理本地缓存，不影响云端记录</text>
+						<text class="menu-desc">仅清理本地缓存，不影响云端数据</text>
 					</view>
 					<text class="menu-arrow">›</text>
 				</view>
@@ -111,6 +84,7 @@
 		</view>
 
 		<text class="version">版本 1.0.0</text>
+		<view class="bottom-safe"></view>
 	</view>
 </template>
 
@@ -129,12 +103,7 @@ const { waitForLogin } = useLogin()
 const shareToken = ref('')
 const shareExpireAt = ref('')
 const shareLoading = ref(false)
-const modeSaving = ref(false)
 const navBarHeight = ref(0)
-const modeOptions = [
-	{ value: 'quit', label: '戒烟打卡', desc: '按天记录今天没抽' },
-	{ value: 'record', label: '记录抽烟', desc: '按支数记录变化' }
-]
 
 const userName = computed(() => userStore.user?.nickname || '戒烟用户')
 const userAvatar = computed(() => userStore.user?.avatar_url || 'https://linghu-wmr.oss-cn-beijing.aliyuncs.com/smt/avatar.png')
@@ -215,25 +184,6 @@ function previewSharePage() {
 	})
 }
 
-async function changeMode(nextMode) {
-	if (!nextMode || nextMode === userStore.mode || modeSaving.value) return
-	modeSaving.value = true
-	try {
-		uni.showLoading({ title: '切换中...' })
-		await profileStore.saveProfile({ mode: nextMode })
-		uni.hideLoading()
-		uni.showToast({ title: '模式已切换', icon: 'success' })
-		setTimeout(() => {
-			uni.switchTab({ url: '/pages/index/index' })
-		}, 250)
-	} catch (e) {
-		uni.hideLoading()
-		uni.showToast({ title: '切换失败', icon: 'none' })
-	} finally {
-		modeSaving.value = false
-	}
-}
-
 function goOnboarding() {
 	uni.navigateTo({ url: '/pages/onboarding/index' })
 }
@@ -286,98 +236,59 @@ onShow(async () => {
 .page {
 	min-height: 100vh;
 	position: relative;
-	background:
-		radial-gradient(circle at top left, rgba(52, 200, 160, 0.16), transparent 30%),
-		radial-gradient(circle at top right, rgba(255, 255, 255, 0.92), transparent 22%),
-		linear-gradient(180deg, #edf2f8 0%, #f5f7fb 38%, #fbfdff 100%);
-	padding: 0 24rpx 168rpx;
+	background-color: #F5F7F6;
+	padding: 0 32rpx 0;
 	box-sizing: border-box;
-	overflow: hidden;
 }
 
-.page-glow {
+.page-bg {
 	position: absolute;
-	border-radius: 50%;
-	filter: blur(24rpx);
-	opacity: 0.72;
-	pointer-events: none;
-}
-
-.page-glow-a {
-	top: 100rpx;
-	left: -140rpx;
-	width: 360rpx;
-	height: 360rpx;
-	background: rgba(52, 200, 160, 0.15);
-}
-
-.page-glow-b {
-	top: 340rpx;
-	right: -120rpx;
-	width: 320rpx;
-	height: 320rpx;
-	background: rgba(255, 255, 255, 0.86);
+	top: 0;
+	left: 0;
+	right: 0;
+	height: 500rpx;
+	background: linear-gradient(180deg, #DDF3EB 0%, #F5F7F6 100%);
+	z-index: 0;
 }
 
 .nav-placeholder,
-.page-header,
-.user-section,
 .section,
 .version {
 	position: relative;
 	z-index: 1;
 }
 
-.page-header {
-	padding: 24rpx 6rpx 18rpx;
+.section {
+	margin-bottom: 36rpx;
 }
 
-.header-eyebrow {
+.section-label {
 	display: block;
-	font-size: 20rpx;
-	font-weight: 700;
-	letter-spacing: 4rpx;
-	text-transform: uppercase;
-	color: #98a2b3;
+	margin: 0 0 16rpx 16rpx;
+	font-size: 28rpx;
+	font-weight: 600;
+	color: #666666;
 }
 
-.header-title {
-	display: block;
-	margin-top: 10rpx;
-	font-size: 42rpx;
-	line-height: 1.18;
-	font-weight: 700;
-	color: #111827;
-}
-
-.header-subtitle {
-	display: block;
-	margin-top: 8rpx;
-	font-size: 24rpx;
-	line-height: 1.5;
-	color: #667085;
+.card {
+	background: #FFFFFF;
+	border-radius: 32rpx;
+	padding: 32rpx;
+	box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.03);
 }
 
 .user-section {
 	display: flex;
 	align-items: center;
-	gap: 24rpx;
-	padding: 12rpx 28rpx 32rpx;
-	margin-bottom: 24rpx;
-	background: rgba(255, 255, 255, 0.74);
-	border: 2rpx solid rgba(255, 255, 255, 0.66);
-	border-radius: 32rpx;
-	box-shadow: 0 16rpx 42rpx rgba(15, 23, 42, 0.08);
-	backdrop-filter: blur(24rpx);
-	-webkit-backdrop-filter: blur(24rpx);
+	gap: 32rpx;
 }
 
 .avatar {
-	width: 132rpx;
-	height: 132rpx;
+	width: 128rpx;
+	height: 128rpx;
 	border-radius: 50%;
-	border: 4rpx solid rgba(255, 255, 255, 0.82);
-	background-color: rgba(255, 255, 255, 0.7);
+	background-color: #F0F4F2;
+	flex-shrink: 0;
 }
 
 .user-copy {
@@ -388,219 +299,139 @@ onShow(async () => {
 }
 
 .user-name {
-	font-size: 40rpx;
+	font-size: 38rpx;
 	font-weight: 700;
-	color: #111827;
+	color: #1A1A1A;
 }
 
 .user-desc {
 	display: block;
 	margin-top: 8rpx;
-	font-size: 24rpx;
-	line-height: 1.5;
-	color: #667085;
+	font-size: 26rpx;
+	color: #999999;
 }
 
 .user-meta {
 	display: flex;
 	flex-wrap: wrap;
-	gap: 12rpx;
-	margin-top: 18rpx;
+	gap: 16rpx;
+	margin-top: 16rpx;
 }
 
 .user-pill {
-	padding: 10rpx 20rpx;
+	padding: 8rpx 20rpx;
 	border-radius: 999rpx;
-	background: rgba(52, 200, 160, 0.12);
-	border: 2rpx solid rgba(255, 255, 255, 0.64);
+	background: #E8F5F0;
 	font-size: 22rpx;
 	font-weight: 600;
-	color: #17795c;
+	color: #10B981;
 }
 
 .user-pill-muted {
-	background: rgba(255, 255, 255, 0.78);
-	color: #667085;
-}
-
-.section {
-	margin-bottom: 24rpx;
-}
-
-.mode-card {
-	background: rgba(255, 255, 255, 0.76);
-	border-radius: 32rpx;
-	padding: 30rpx 24rpx;
-	border: 2rpx solid rgba(255, 255, 255, 0.66);
-	box-shadow: 0 16rpx 42rpx rgba(15, 23, 42, 0.08);
-	backdrop-filter: blur(24rpx);
-	-webkit-backdrop-filter: blur(24rpx);
-	margin-bottom: 16rpx;
-}
-
-.mode-card-header {
-	display: flex;
-	align-items: center;
-	gap: 24rpx;
-	margin-bottom: 20rpx;
+	background: #F5F5F5;
+	color: #999999;
 }
 
 .menu-list {
-	display: flex;
-	flex-direction: column;
-	background: rgba(255, 255, 255, 0.8);
-	border-radius: 32rpx;
-	border: 2rpx solid rgba(255, 255, 255, 0.66);
-	box-shadow: 0 16rpx 42rpx rgba(15, 23, 42, 0.08);
-	backdrop-filter: blur(24rpx);
-	-webkit-backdrop-filter: blur(24rpx);
-	overflow: hidden;
+	padding: 8rpx 32rpx;
 }
 
 .menu-item {
 	display: flex;
 	align-items: center;
 	gap: 24rpx;
-	padding: 28rpx 24rpx;
+	padding: 24rpx 0;
+	background: transparent;
 }
 
 .menu-divider {
-	margin: 0 24rpx;
-	height: 2rpx;
-	background: rgba(15, 23, 42, 0.06);
+	height: 1px;
+	background: #F0F0F0;
+	margin: 0;
 }
 
 .menu-icon {
-	width: 64rpx;
-	height: 64rpx;
-	border-radius: 20rpx;
+	width: 72rpx;
+	height: 72rpx;
+	border-radius: 50%;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	border: 2rpx solid rgba(255, 255, 255, 0.7);
+	flex-shrink: 0;
 }
 
 .menu-icon-accent {
-	background: rgba(52, 200, 160, 0.14);
+	background: #E8F5F0;
 }
 
 .menu-icon-muted {
-	background: rgba(255, 255, 255, 0.82);
+	background: #F5F5F5;
 }
 
 .menu-glyph {
-	font-size: 24rpx;
+	font-size: 30rpx;
 	font-weight: 700;
-	color: #111827;
+}
+
+.menu-icon-accent .menu-glyph {
+	color: #10B981;
+}
+
+.menu-icon-muted .menu-glyph {
+	color: #999999;
 }
 
 .menu-content {
 	flex: 1;
 	display: flex;
 	flex-direction: column;
-	gap: 4rpx;
+	gap: 6rpx;
 }
 
 .menu-label {
 	font-size: 30rpx;
-	color: #111827;
+	color: #1A1A1A;
 	font-weight: 600;
 }
 
 .menu-desc {
 	font-size: 24rpx;
-	line-height: 1.5;
-	color: #667085;
+	line-height: 1.4;
+	color: #999999;
 }
 
 .menu-actions {
-	margin-top: 6rpx;
+	margin-top: 8rpx;
 	display: flex;
 	align-items: center;
 	flex-wrap: wrap;
-	gap: 8rpx;
+	gap: 12rpx;
 	font-size: 24rpx;
-	color: #1aa37a;
 }
 
 .menu-action {
-	color: #1aa37a;
+	color: #10B981;
+	font-weight: 500;
 }
 
 .menu-action-sep {
-	color: #98a2b3;
-}
-
-.menu-arrow {
-	font-size: 36rpx;
-	color: #98a2b3;
-}
-
-.menu-value {
-	font-size: 24rpx;
-	font-weight: 600;
-	color: #1aa37a;
-}
-
-.mode-switch {
-	display: flex;
-	gap: 12rpx;
-	padding: 8rpx;
-	border-radius: 24rpx;
-	background: rgba(247, 249, 252, 0.92);
-	border: 2rpx solid rgba(15, 23, 42, 0.05);
-}
-
-.mode-switch-item {
-	flex: 1;
-	padding: 22rpx 18rpx;
-	border-radius: 20rpx;
-	background: transparent;
-	border: 2rpx solid transparent;
-}
-
-.mode-switch-item-active {
-	background: rgba(255, 255, 255, 0.94);
-	border-color: rgba(255, 255, 255, 0.76);
-	box-shadow: 0 8rpx 18rpx rgba(15, 23, 42, 0.06);
-}
-
-.mode-switch-title {
-	display: block;
-	font-size: 28rpx;
-	font-weight: 700;
-	color: #111827;
-}
-
-.mode-switch-desc {
-	display: block;
-	margin-top: 8rpx;
-	font-size: 22rpx;
-	line-height: 1.5;
-	color: #667085;
-}
-
-.mode-hint {
-	display: block;
-	margin-top: 16rpx;
-	font-size: 22rpx;
-	color: #1aa37a;
+	color: #D4D4D4;
 }
 
 .share-btn {
 	margin: 0;
-	padding: 12rpx 22rpx;
-	line-height: 1.4;
-	font-size: 24rpx;
+	padding: 12rpx 32rpx;
+	line-height: 1.5;
+	font-size: 26rpx;
 	border: none;
 	border-radius: 999rpx;
 	color: #FFFFFF;
-	background: linear-gradient(180deg, #32c59d 0%, #1aa37a 100%);
-	box-shadow: 0 12rpx 28rpx rgba(26, 163, 122, 0.2);
+	background: #10B981;
+	font-weight: 600;
 }
 
 .share-btn[disabled] {
-	background: #98a2b3;
+	background: #A7F3D0;
 	color: #FFFFFF;
 }
 
@@ -608,11 +439,20 @@ onShow(async () => {
 	border: none;
 }
 
+.menu-arrow {
+	font-size: 36rpx;
+	color: #CCCCCC;
+}
+
 .version {
 	display: block;
 	text-align: center;
-	font-size: 22rpx;
-	color: #98a2b3;
-	margin-top: 32rpx;
+	font-size: 24rpx;
+	color: #B0B0B0;
+	margin-top: 40rpx;
+}
+
+.bottom-safe {
+	height: calc(40rpx + env(safe-area-inset-bottom));
 }
 </style>
diff --git a/src/pages/stats-calendar/index.vue b/src/pages/stats-calendar/index.vue
new file mode 100644
index 0000000..0b7da89
--- /dev/null
+++ b/src/pages/stats-calendar/index.vue
@@ -0,0 +1,593 @@
+<template>
+	<view class="page">
+
+		<view class="card">
+			<view class="month-bar">
+				<view class="month-arrow" @tap="changeMonth(-1)">‹</view>
+				<view class="month-copy">
+					<text class="month-title">{{ monthTitle }}</text>
+					<text class="month-subtitle">{{ monthSubtitle }}</text>
+				</view>
+				<view class="month-arrow" :class="{ 'month-arrow-disabled': !canGoNextMonth }" @tap="changeMonth(1)">›</view>
+			</view>
+
+			<view class="summary-row">
+				<view class="summary-chip">
+					<text class="summary-chip-label">本月已抽</text>
+					<view class="summary-chip-value-row">
+						<text class="summary-chip-value">{{ monthSmokeTotal }}</text>
+						<text class="summary-chip-unit">支</text>
+					</view>
+				</view>
+				<view class="summary-chip summary-chip-soft">
+					<text class="summary-chip-label">本月忍住</text>
+					<view class="summary-chip-value-row">
+						<text class="summary-chip-value">{{ monthResistedTotal }}</text>
+						<text class="summary-chip-unit">次</text>
+					</view>
+				</view>
+				<view class="summary-chip summary-chip-soft">
+					<text class="summary-chip-label">记录天数</text>
+					<view class="summary-chip-value-row">
+						<text class="summary-chip-value">{{ activeDayCount }}</text>
+						<text class="summary-chip-unit">天</text>
+					</view>
+				</view>
+			</view>
+
+			<view class="calendar-legend">
+				<view class="legend-item">
+					<view class="legend-dot legend-dot-smoke"></view>
+					<text class="legend-text">已抽</text>
+				</view>
+				<view class="legend-item">
+					<view class="legend-dot legend-dot-resisted"></view>
+					<text class="legend-text">忍住</text>
+				</view>
+				<text class="legend-tip">点击灰色日期可切换到对应月份</text>
+			</view>
+
+			<view class="weekday-row">
+				<text v-for="item in weekdayNames" :key="item" class="weekday-item">{{ item }}</text>
+			</view>
+
+			<view class="calendar-grid">
+				<view
+					v-for="item in calendarDays"
+					:key="item.key"
+					class="calendar-cell"
+					:class="{
+						'calendar-cell-muted': !item.isCurrentMonth,
+						'calendar-cell-selected': item.date === selectedDate,
+						'calendar-cell-today': item.isToday,
+						'calendar-cell-disabled': item.isFuture
+					}"
+					@tap="selectDay(item)"
+				>
+					<view class="calendar-cell-top">
+						<text class="calendar-day">{{ item.day }}</text>
+						<view v-if="item.isToday" class="calendar-today-dot"></view>
+					</view>
+					<view class="calendar-count-wrap">
+						<text class="calendar-count-value">{{ item.smokeCount }}</text>
+						<text class="calendar-count-unit">支</text>
+					</view>
+				</view>
+			</view>
+		</view>
+
+		<view class="bottom-safe"></view>
+	</view>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { useLogin } from '@/hooks/useLogin'
+import * as api from '@/api'
+
+const { waitForLogin } = useLogin()
+
+const weekdayNames = ['日', '一', '二', '三', '四', '五', '六']
+const currentMonth = ref(startOfMonth(new Date()))
+const selectedDate = ref(formatDate(new Date()))
+const monthLogs = ref([])
+const todayText = formatDate(new Date())
+
+const monthTitle = computed(() => {
+	const date = currentMonth.value
+	return `${date.getFullYear()} 年 ${date.getMonth() + 1} 月`
+})
+
+const monthSubtitle = computed(() => {
+	return `共 ${monthLogs.value.length} 条记录`
+})
+
+const monthSummaryMap = computed(() => buildDailySummaryMap(monthLogs.value))
+const canGoNextMonth = computed(() => {
+	return formatDate(startOfMonth(currentMonth.value)) < formatDate(startOfMonth(new Date()))
+})
+
+const calendarDays = computed(() => {
+	const monthStart = startOfMonth(currentMonth.value)
+	const monthEnd = endOfMonth(currentMonth.value)
+	const gridStart = startOfWeek(monthStart)
+	const gridEnd = endOfWeek(monthEnd)
+	const result = []
+	const summaryMap = monthSummaryMap.value
+
+	for (let date = new Date(gridStart); date <= gridEnd; date = addDays(date, 1)) {
+		const dateKey = formatDate(date)
+		const summary = summaryMap.get(dateKey) || { smokeCount: 0, resistedCount: 0 }
+		result.push({
+			key: dateKey,
+			date: dateKey,
+			day: date.getDate(),
+			isCurrentMonth: date.getMonth() === monthStart.getMonth(),
+			isToday: dateKey === todayText,
+			isFuture: dateKey > todayText,
+			smokeCount: summary.smokeCount,
+			resistedCount: summary.resistedCount
+		})
+	}
+
+	return result
+})
+
+const monthSmokeTotal = computed(() => {
+	return monthLogs.value.reduce((total, item) => {
+		return normalizeLogType(item) === 'resisted' ? total : total + (Number(item.num) || 0)
+	}, 0)
+})
+
+const monthResistedTotal = computed(() => {
+	return monthLogs.value.reduce((total, item) => {
+		return normalizeLogType(item) === 'resisted' ? total + 1 : total
+	}, 0)
+})
+
+const activeDayCount = computed(() => monthSummaryMap.value.size)
+
+async function fetchMonthLogs() {
+	const start = formatDate(startOfMonth(currentMonth.value))
+	const end = formatDate(endOfMonth(currentMonth.value))
+	try {
+		await waitForLogin()
+		const res = await api.getLogs({
+			page: 1,
+			page_size: 200,
+			type: 'all',
+			start,
+			end
+		})
+		monthLogs.value = res.data?.items || []
+	} catch (e) {
+		console.error('fetchMonthLogs error:', e)
+		monthLogs.value = []
+	}
+}
+
+async function initPage(dateText) {
+	const baseDate = parseDate(dateText) || new Date()
+	currentMonth.value = startOfMonth(baseDate)
+	selectedDate.value = formatDate(baseDate)
+	await fetchMonthLogs()
+}
+
+async function changeMonth(offset) {
+	const next = new Date(currentMonth.value)
+	next.setMonth(next.getMonth() + offset)
+	if (offset > 0 && formatDate(startOfMonth(next)) > formatDate(startOfMonth(new Date()))) {
+		return
+	}
+	currentMonth.value = startOfMonth(next)
+	selectedDate.value = formatDate(startOfMonth(next))
+	await fetchMonthLogs()
+}
+
+async function selectDay(item) {
+	if (item.isFuture) return
+	if (!item.isCurrentMonth) {
+		currentMonth.value = startOfMonth(parseDate(item.date))
+		selectedDate.value = item.date
+		await fetchMonthLogs()
+		return
+	}
+	selectedDate.value = item.date
+}
+
+onLoad(async (options) => {
+	await initPage(options?.date)
+})
+
+function buildDailySummaryMap(logs) {
+	const map = new Map()
+	logs.forEach(log => {
+		const dateKey = resolveLogDate(log)
+		if (!dateKey) return
+		const current = map.get(dateKey) || { smokeCount: 0, resistedCount: 0 }
+		if (normalizeLogType(log) === 'resisted') {
+			current.resistedCount += 1
+		} else {
+			current.smokeCount += Number(log.num) || 0
+		}
+		map.set(dateKey, current)
+	})
+	return map
+}
+
+function resolveLogDate(log) {
+	if (typeof log?.smoke_time === 'string' && log.smoke_time) {
+		return log.smoke_time.split('T')[0]
+	}
+	if (log?.smoke_at) {
+		return formatDate(new Date(log.smoke_at))
+	}
+	if (log?.createtime) {
+		return formatDate(typeof log.createtime === 'number' ? new Date(log.createtime * 1000) : new Date(log.createtime))
+	}
+	return ''
+}
+
+function normalizeLogType(log) {
+	const rawType = log?.type
+	if (typeof rawType === 'string') {
+		const value = rawType.toLowerCase()
+		if (value === 'resisted' || value === 'resist') return 'resisted'
+		if (value === 'smoke' || value === 'log_smoke') return 'smoke'
+	}
+	if (typeof rawType === 'number') {
+		if (rawType === 0) return 'resisted'
+		if (rawType === 1) return 'smoke'
+	}
+	if (log?.num === 0) return 'resisted'
+	return 'smoke'
+}
+
+function parseDate(value) {
+	if (!value) return null
+	const date = new Date(`${value}T00:00:00`)
+	if (Number.isNaN(date.getTime())) return null
+	return date
+}
+
+function formatDate(date) {
+	const y = date.getFullYear()
+	const m = String(date.getMonth() + 1).padStart(2, '0')
+	const d = String(date.getDate()).padStart(2, '0')
+	return `${y}-${m}-${d}`
+}
+
+function startOfMonth(date) {
+	return new Date(date.getFullYear(), date.getMonth(), 1)
+}
+
+function endOfMonth(date) {
+	return new Date(date.getFullYear(), date.getMonth() + 1, 0)
+}
+
+function startOfWeek(date) {
+	const result = new Date(date)
+	result.setDate(result.getDate() - result.getDay())
+	return result
+}
+
+function endOfWeek(date) {
+	const result = new Date(date)
+	result.setDate(result.getDate() + (6 - result.getDay()))
+	return result
+}
+
+function addDays(date, offset) {
+	const result = new Date(date)
+	result.setDate(result.getDate() + offset)
+	return result
+}
+</script>
+
+<style scoped>
+.page {
+	min-height: 100vh;
+	background: linear-gradient(180deg, #F6F8F6 0%, #EFF4F1 52%, #E9F0EC 100%);
+	padding: 20rpx;
+	box-sizing: border-box;
+}
+
+.page-header {
+	margin-bottom: 18rpx;
+}
+
+.page-eyebrow {
+	display: inline-flex;
+	align-items: center;
+	padding: 8rpx 18rpx;
+	border-radius: 999rpx;
+	background: rgba(255, 255, 255, 0.68);
+	border: 1rpx solid rgba(255, 255, 255, 0.72);
+	font-size: 20rpx;
+	font-weight: 600;
+	color: #6b7280;
+	margin-bottom: 16rpx;
+}
+
+.page-subtitle {
+	display: block;
+	margin-top: 2rpx;
+	font-size: 24rpx;
+	line-height: 1.5;
+	color: #52806E;
+}
+
+.card {
+	position: relative;
+	overflow: hidden;
+	background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(251, 253, 252, 0.94) 100%);
+	-webkit-backdrop-filter: blur(20px);
+	backdrop-filter: blur(20px);
+	border-radius: 32rpx;
+	padding: 22rpx;
+	margin-bottom: 16rpx;
+	border: 1rpx solid rgba(15, 23, 42, 0.06);
+	box-shadow:
+		0 20rpx 44rpx rgba(15, 23, 42, 0.06),
+		0 6rpx 14rpx rgba(15, 23, 42, 0.03),
+		inset 0 1rpx 0 rgba(255, 255, 255, 0.88);
+}
+
+.card::before {
+	content: '';
+	position: absolute;
+	width: 240rpx;
+	height: 240rpx;
+	left: -72rpx;
+	top: -72rpx;
+	border-radius: 50%;
+	background: radial-gradient(circle, rgba(52, 200, 160, 0.14) 0%, rgba(52, 200, 160, 0) 72%);
+	pointer-events: none;
+}
+
+.month-bar {
+	position: relative;
+	z-index: 1;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 16rpx;
+	margin-bottom: 16rpx;
+}
+
+.month-arrow {
+	width: 64rpx;
+	height: 64rpx;
+	border-radius: 18rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: linear-gradient(180deg, #ffffff 0%, #f7faf8 100%);
+	border: 2rpx solid rgba(15, 23, 42, 0.06);
+	box-shadow: 0 14rpx 28rpx rgba(15, 23, 42, 0.07);
+	font-size: 40rpx;
+	color: #1a8c62;
+}
+
+.month-arrow-disabled {
+	opacity: 0.4;
+	box-shadow: none;
+}
+
+.month-copy {
+	flex: 1;
+	text-align: center;
+}
+
+.month-title {
+	display: block;
+	font-size: 30rpx;
+	font-weight: 800;
+	color: #111827;
+}
+
+.month-subtitle {
+	display: block;
+	margin-top: 6rpx;
+	font-size: 22rpx;
+	color: #6b7280;
+}
+
+.summary-row {
+	position: relative;
+	z-index: 1;
+	display: grid;
+	grid-template-columns: repeat(3, minmax(0, 1fr));
+	gap: 12rpx;
+	margin-bottom: 14rpx;
+}
+
+.summary-chip {
+	padding: 16rpx 14rpx;
+	border-radius: 22rpx;
+	background: linear-gradient(180deg, rgba(240, 252, 248, 0.96) 0%, rgba(247, 251, 249, 0.96) 100%);
+	border: 1rpx solid rgba(15, 23, 42, 0.05);
+	box-shadow: inset 0 1rpx 0 rgba(255, 255, 255, 0.9);
+}
+
+.summary-chip-soft {
+	background: linear-gradient(180deg, #fbfcfc 0%, #f7faf8 100%);
+}
+
+.summary-chip-label {
+	display: block;
+	font-size: 20rpx;
+	color: #7aA898;
+}
+
+.summary-chip-value-row {
+	display: flex;
+	align-items: baseline;
+	gap: 6rpx;
+	margin-top: 8rpx;
+}
+
+.summary-chip-value {
+	font-size: 34rpx;
+	font-weight: 800;
+	line-height: 1;
+	color: #111827;
+}
+
+.summary-chip-unit {
+	font-size: 20rpx;
+	color: #6b7280;
+}
+
+.calendar-legend {
+	position: relative;
+	z-index: 1;
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+	gap: 14rpx;
+	margin-bottom: 14rpx;
+	padding: 12rpx 14rpx;
+	border-radius: 16rpx;
+	background: linear-gradient(180deg, #fafcfb 0%, #f5f8f6 100%);
+	border: 1rpx solid rgba(15, 23, 42, 0.05);
+}
+
+.legend-item {
+	display: inline-flex;
+	align-items: center;
+	gap: 8rpx;
+}
+
+.legend-dot {
+	width: 16rpx;
+	height: 16rpx;
+	border-radius: 50%;
+}
+
+.legend-dot-smoke {
+	background: #1a8c62;
+}
+
+.legend-dot-resisted {
+	background: #a7d9c6;
+}
+
+.legend-text {
+	font-size: 21rpx;
+	color: #4b5563;
+}
+
+.legend-tip {
+	margin-left: auto;
+	font-size: 20rpx;
+	color: #9ca3af;
+}
+
+.weekday-row {
+	position: relative;
+	z-index: 1;
+	display: grid;
+	grid-template-columns: repeat(7, minmax(0, 1fr));
+	margin-bottom: 12rpx;
+	padding: 0 4rpx;
+}
+
+.weekday-item {
+	text-align: center;
+	font-size: 22rpx;
+	font-weight: 600;
+	color: #7aA898;
+}
+
+.calendar-grid {
+	position: relative;
+	z-index: 1;
+	display: grid;
+	grid-template-columns: repeat(7, minmax(0, 1fr));
+	gap: 10rpx;
+}
+
+.calendar-cell {
+	min-height: 138rpx;
+	padding: 14rpx 10rpx 12rpx;
+	border-radius: 22rpx;
+	background: linear-gradient(180deg, #ffffff 0%, #f7faf8 100%);
+	border: 1rpx solid rgba(15, 23, 42, 0.05);
+	display: flex;
+	flex-direction: column;
+	gap: 8rpx;
+	box-shadow:
+		inset 0 1rpx 0 rgba(255, 255, 255, 0.92),
+		0 8rpx 18rpx rgba(15, 23, 42, 0.04);
+}
+
+.calendar-cell-selected {
+	background: linear-gradient(180deg, rgba(240, 252, 248, 0.98) 0%, rgba(247, 252, 249, 0.96) 100%);
+	border-color: rgba(52, 200, 160, 0.24);
+	box-shadow:
+		inset 0 1rpx 0 rgba(255, 255, 255, 0.96),
+		0 12rpx 22rpx rgba(29, 163, 111, 0.08);
+}
+
+.calendar-cell-today {
+	box-shadow:
+		inset 0 0 0 2rpx rgba(26, 140, 98, 0.16),
+		0 10rpx 20rpx rgba(15, 23, 42, 0.04);
+}
+
+.calendar-cell-muted {
+	opacity: 0.42;
+	box-shadow: none;
+}
+
+.calendar-cell-disabled {
+	opacity: 0.3;
+	box-shadow: none;
+}
+
+.calendar-cell-top {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 8rpx;
+}
+
+.calendar-day {
+	font-size: 24rpx;
+	font-weight: 700;
+	color: #123329;
+}
+
+.calendar-today-dot {
+	width: 12rpx;
+	height: 12rpx;
+	border-radius: 50%;
+	color: #1a8c62;
+	background: #1a8c62;
+}
+
+.calendar-count-wrap {
+	display: flex;
+	align-items: baseline;
+	gap: 4rpx;
+}
+
+.calendar-count-value {
+	font-size: 34rpx;
+	line-height: 1;
+	font-weight: 800;
+	color: #14936d;
+}
+
+.calendar-count-unit {
+	font-size: 18rpx;
+	font-weight: 600;
+	color: #6b7280;
+}
+
+.bottom-safe {
+	height: calc(28rpx + env(safe-area-inset-bottom));
+}
+</style>
diff --git a/src/pages/stats/index.vue b/src/pages/stats/index.vue
index 58dc941..991123d 100644
--- a/src/pages/stats/index.vue
+++ b/src/pages/stats/index.vue
@@ -1,14 +1,9 @@
 <template>
 	<view class="page">
-		<view class="page-glow page-glow-a"></view>
-		<view class="page-glow page-glow-b"></view>
-		<view class="sticky-bar">
-			<view class="status-bar" :style="{ height: navBarHeight + 'px' }"></view>
-			<view class="page-head">
-				<text class="page-eyebrow">Statistics</text>
-				<text class="page-title">数据统计</text>
-				<text class="page-subtitle">趋势、恢复和储蓄会在这里汇总。</text>
-			</view>
+		<view class="status-bar" :style="{ height: navBarHeight + 'px' }"></view>
+
+		<!-- Tab 切换 -->
+		<view class="segment-wrap">
 			<view class="segment">
 				<view
 					v-for="tab in tabs"
@@ -22,173 +17,151 @@
 			</view>
 		</view>
 
+		<!-- 洞察卡片 -->
 		<view class="insight-card">
 			<view class="insight-icon" :class="insightIconClass">
 				<text class="insight-glyph">{{ insightEmoji }}</text>
 			</view>
 			<view class="insight-content">
-				<text class="insight-title">每周洞察</text>
+				<text class="insight-title">阶段洞察</text>
 				<text class="insight-desc">{{ insightText }}</text>
 			</view>
 		</view>
 
-		<view class="section">
-			<view class="section-header">
+		<!-- 吸烟趋势 -->
+		<view class="card">
+			<view class="card-header">
 				<view>
-					<text class="section-title">吸烟趋势</text>
-					<text class="section-sub">{{ trendRangeText }}</text>
-				</view>
-				<view class="status-chip" :class="statusChipClass">
-					<text class="status-icon" :class="statusIconClass">{{ statusArrow }}</text>
-					<text class="status-text">{{ statusText }}</text>
+					<text class="card-title">吸烟趋势</text>
+					<text class="card-sub">{{ weeklyTrendRangeText }}</text>
 				</view>
+				<view class="card-link" @tap="goCalendarDetail">日历详情</view>
 			</view>
 
-			<view class="trend-card">
-				<view class="trend-header">
-					<text class="trend-label">日均吸烟量</text>
-					<view class="trend-value-row">
-						<text class="trend-value">{{ averageCount }}</text>
-						<text class="trend-unit">支/天</text>
+			<!-- 日均数据 -->
+			<view class="avg-row">
+				<text class="avg-value">{{ weeklyAverageCount }}</text>
+				<text class="avg-unit">支/天</text>
+			</view>
+
+			<!-- 日历格式趋势 -->
+			<view v-if="weeklyTrendItems.length > 0" class="cal-grid">
+				<view v-for="(item, index) in weeklyTrendItems" :key="index" class="cal-cell" :class="{ 'cal-cell-today': item.isHighlight }">
+					<text class="cal-weekday">{{ item.weekday }}</text>
+					<text class="cal-date">{{ item.date }}</text>
+					<view class="cal-dot" :class="calDotClass(item.count)">
+						<text class="cal-count">{{ item.count }}</text>
 					</view>
 				</view>
-				<scroll-view v-if="trendItems.length > 0" scroll-x class="trend-chart-scroll" :show-scrollbar="false">
-					<view class="trend-chart" :style="{ minWidth: trendChartMinWidth }">
-						<view v-for="(item, index) in trendItems" :key="index" class="trend-bar-item">
-							<view v-if="item.isHighlight && item.count > 0" class="trend-bubble">{{ item.count }}</view>
-							<view class="trend-bar-wrap">
-								<view class="trend-bar" :style="{ height: item.height }"></view>
-							</view>
-							<text class="trend-bar-label" :class="{ 'trend-bar-label-active': item.isHighlight }">{{ item.label }}</text>
-						</view>
+			</view>
+			<view v-else class="empty-block">
+				<text class="empty-text">暂无趋势数据</text>
+			</view>
+		</view>
+
+		<!-- 健康与储蓄 -->
+		<view class="card">
+			<view class="card-header">
+				<text class="card-title">节省金额</text>
+				<text class="card-sub">{{ moneySubtitle }}</text>
+			</view>
+			<view v-if="moneyAvailable" class="money-body">
+				<view class="money-left">
+					<text class="money-value">{{ savedMoneyText }}</text>
+					<view class="progress-bar">
+						<view class="progress-fill progress-fill-money" :style="{ width: moneyPercent + '%' }"></view>
 					</view>
-				</scroll-view>
-				<view v-else class="trend-chart-empty">
-					<text class="trend-chart-empty-text">暂无趋势数据</text>
+					<text class="money-target">目标 ¥{{ moneyTargetYuan }} ({{ moneyPercent }}%)</text>
+				</view>
+				<view class="ring" :style="moneyRingStyle">
+					<view class="ring-inner">
+						<text class="ring-value">{{ moneyRingText }}</text>
+					</view>
+				</view>
+			</view>
+			<view v-else class="empty-block empty-block-dashed">
+				<text class="empty-text">完善基础信息后解锁节省金额</text>
+			</view>
+
+			<view v-if="moneyAvailable" class="metric-chips">
+				<view class="metric-chip metric-chip-warm">
+					<text class="metric-label">预计</text>
+					<text class="metric-val">{{ moneyExpectedTotal }}</text>
+					<text class="metric-unit">支</text>
+				</view>
+				<view class="metric-chip metric-chip-cool">
+					<text class="metric-label">实际</text>
+					<text class="metric-val">{{ moneyActualTotal }}</text>
+					<text class="metric-unit">支</text>
 				</view>
 			</view>
 		</view>
 
-		<view class="section">
-			<text class="section-title">健康与储蓄</text>
-
-			<view class="savings-card">
-				<view class="savings-header">
-					<view class="savings-icon" :class="moneyIconClass">
-						<text class="icon-glyph">省</text>
-					</view>
-					<view class="savings-header-text">
-						<text class="savings-title">节省金额</text>
-						<text class="savings-subtitle">{{ moneySubtitle }}</text>
-					</view>
-				</view>
-				<view class="savings-body">
-					<view class="savings-left">
-						<text class="savings-value">{{ savedMoneyText }}</text>
-						<view class="savings-bar">
-							<view class="savings-bar-fill" :style="{ width: moneyPercent + '%' }"></view>
-						</view>
-						<text v-if="moneyAvailable" class="savings-sub">目标 ¥{{ moneyTargetYuan }} ({{ moneyPercent }}%)</text>
-						<view class="savings-metrics" v-if="moneyAvailable">
-							<view class="metric-chip">
-								<text class="metric-label">预计</text>
-								<text class="metric-value">{{ moneyExpectedTotal }}</text>
-								<text class="metric-unit">支</text>
-							</view>
-							<view class="metric-chip metric-chip-actual">
-								<text class="metric-label">实际</text>
-								<text class="metric-value">{{ moneyActualTotal }}</text>
-								<text class="metric-unit">支</text>
-							</view>
-						</view>
-					</view>
-					<view class="savings-ring" :style="moneyRingStyle">
-						<view class="savings-ring-inner">
-							<text class="ring-value">{{ moneyRingText }}</text>
-						</view>
-					</view>
-				</view>
-				<view v-if="!moneyAvailable" class="card-empty">
-					<text class="card-empty-icon">待</text>
-					<text class="card-empty-text">完善基础信息后解锁节省金额</text>
+		<!-- 健康恢复 -->
+		<view class="card">
+			<view class="card-header">
+				<view class="card-title-row">
+					<text class="card-title">健康恢复里程碑</text>
 				</view>
+				<view class="badge" :class="{ 'badge-muted': !healthAvailable }">{{ healthStatusText }}</view>
 			</view>
-
-			<view class="health-card">
-				<view class="health-header">
-					<view class="health-title-row">
-						<view class="health-icon" :class="healthIconClass">
-							<text class="icon-glyph">肺</text>
-						</view>
-						<text class="health-title">健康恢复里程碑</text>
-					</view>
-					<view class="health-badge" :class="{ 'health-badge-muted': !healthAvailable }">{{ healthStatusText }}</view>
+			<view v-if="healthAvailable" class="health-overview">
+				<view class="health-stat">
+					<text class="health-stat-value">{{ smokeFreeText }}</text>
+					<text class="health-stat-label">无烟时长</text>
 				</view>
-					<view v-if="healthAvailable" class="health-overview">
-						<view class="health-metric">
-							<view class="health-metric-icon">时</view>
-						<text class="health-metric-value">{{ smokeFreeText }}</text>
-						<text class="health-metric-label">无烟时长</text>
-					</view>
-					<view class="health-ring" :style="healthRingStyle">
-						<view class="health-ring-inner">
-							<text class="ring-value">{{ lungRecoveryPercent }}%</text>
-							<text class="ring-label">肺功能</text>
-						</view>
-					</view>
-				</view>
-				<view v-else class="card-empty">
-					<text class="card-empty-icon">未</text>
-					<text class="card-empty-text">暂无健康数据，记录一次后解锁</text>
-				</view>
-				<view class="health-list">
-					<view v-for="(item, index) in healthItems" :key="index" class="health-item">
-						<view class="health-item-row">
-							<text class="health-item-name">{{ item.name }}</text>
-							<text class="health-item-percent" :class="{ 'health-item-percent-muted': item.percent < 100 }">{{ item.percent }}%</text>
-						</view>
-						<view class="health-bar">
-							<view
-								class="health-bar-fill"
-								:class="{ 'health-bar-fill-muted': item.percent < 100 }"
-								:style="{ width: item.percent + '%' }"
-							></view>
-						</view>
+				<view class="ring" :style="healthRingStyle">
+					<view class="ring-inner">
+						<text class="ring-value">{{ lungRecoveryPercent }}%</text>
+						<text class="ring-label">肺功能</text>
 					</view>
 				</view>
 			</view>
-
-			<view class="stats-grid">
-				<view class="mini-card">
-					<view class="mini-icon mini-icon-fire" :class="streakIconClass">
-						<text class="icon-glyph">续</text>
+			<view v-else class="empty-block empty-block-dashed">
+				<text class="empty-text">暂无健康数据，记录一次后解锁</text>
+			</view>
+			<view v-if="healthItems.length > 0" class="health-list">
+				<view v-for="(item, index) in healthItems" :key="index" class="health-item">
+					<view class="health-item-top">
+						<text class="health-item-name">{{ item.name }}</text>
+						<text class="health-item-pct" :class="{ 'health-item-pct-done': item.percent >= 100 }">{{ item.percent }}%</text>
 					</view>
-					<text class="mini-label">连续记录</text>
-					<view class="mini-value-row">
-						<text class="mini-value">{{ streakDays }}</text>
-						<text class="mini-unit">天</text>
+					<view class="progress-bar">
+						<view
+							class="progress-fill"
+							:class="item.percent >= 100 ? 'progress-fill-done' : 'progress-fill-pending'"
+							:style="{ width: item.percent + '%' }"
+						></view>
 					</view>
-					<text class="mini-sub">连续记录天数</text>
-				</view>
-				<view class="mini-card">
-					<view class="mini-icon mini-icon-block" :class="resistedIconClass">
-						<text class="icon-glyph">忍</text>
-					</view>
-					<text class="mini-label">已拒绝</text>
-					<view class="mini-value-row">
-						<text class="mini-value">{{ resistedTotal }}</text>
-						<text class="mini-unit">次</text>
-					</view>
-					<text class="mini-sub">成功抵抗烟瘾</text>
 				</view>
 			</view>
 		</view>
+
+		<!-- 底部小卡片 -->
+		<view class="mini-grid">
+			<view class="mini-card">
+				<text class="mini-label">连续记录</text>
+				<view class="mini-value-row">
+					<text class="mini-value">{{ streakDays }}</text>
+					<text class="mini-unit">天</text>
+				</view>
+			</view>
+			<view class="mini-card">
+				<text class="mini-label">已拒绝</text>
+				<view class="mini-value-row">
+					<text class="mini-value">{{ resistedTotal }}</text>
+					<text class="mini-unit">次</text>
+				</view>
+			</view>
+		</view>
+
+		<view class="bottom-safe"></view>
 	</view>
 </template>
 
 <script setup>
 import { ref, computed, onMounted, watch } from 'vue'
-import { onShareAppMessage } from '@dcloudio/uni-app'
+import { onShareAppMessage, onShow } from '@dcloudio/uni-app'
 import { useLogin } from '@/hooks/useLogin'
 import * as api from '@/api'
 
@@ -203,6 +176,9 @@ const tabs = [
 
 const currentTab = ref('week')
 const statsData = ref(null)
+const weeklyStatsData = ref(null)
+
+const WEEKDAY_NAMES = ['日', '一', '二', '三', '四', '五', '六']
 
 const changePercent = computed(() => {
 	const value = statsData.value?.change_percent
@@ -235,12 +211,17 @@ const insightText = computed(() => {
 const trendRangeText = computed(() => {
 	const start = statsData.value?.start
 	const end = statsData.value?.end
-	if (!start || !end) {
-		return ''
-	}
+	if (!start || !end) return ''
 	return formatRangeText(start, end)
 })
 
+const weeklyTrendRangeText = computed(() => {
+	const start = weeklyStatsData.value?.start
+	const end = weeklyStatsData.value?.end
+	if (!start || !end) return '固定展示最近 7 天'
+	return `${formatRangeText(start, end)} · 固定展示最近 7 天`
+})
+
 const statusText = computed(() => {
 	if (changePercent.value === null) return '暂无对比'
 	const sign = changePercent.value > 0 ? '+' : ''
@@ -248,8 +229,8 @@ const statusText = computed(() => {
 })
 
 const statusChipClass = computed(() => {
-	if (changePercent.value === null) return 'status-neutral'
-	return changePercent.value <= 0 ? 'status-good' : 'status-warn'
+	if (changePercent.value === null) return 'chip-neutral'
+	return changePercent.value <= 0 ? 'chip-good' : 'chip-warn'
 })
 
 const statusArrow = computed(() => {
@@ -258,8 +239,8 @@ const statusArrow = computed(() => {
 })
 
 const statusIconClass = computed(() => {
-	if (changePercent.value === null) return 'status-icon-neutral'
-	return changePercent.value <= 0 ? 'status-icon-good' : 'status-icon-warn'
+	if (changePercent.value === null) return 'arrow-neutral'
+	return changePercent.value <= 0 ? 'arrow-good' : 'arrow-warn'
 })
 
 const averageCount = computed(() => {
@@ -268,35 +249,46 @@ const averageCount = computed(() => {
 	return Number(avg) || 0
 })
 
-// 图表仅使用接口返回的 trend 渲染，无数据时为空
-const trendItems = computed(() => {
-	const trend = statsData.value?.trend
-	const trendUnit = statsData.value?.trend_unit
-	if (!trend || !Array.isArray(trend) || trend.length === 0) {
-		return []
-	}
-	const counts = trend.map(item => Number(item.count) || 0)
-	const maxCount = Math.max(...counts, 0)
+const weeklyAverageCount = computed(() => {
+	const avg = weeklyStatsData.value?.daily_average
+	if (avg === undefined || avg === null) return 0
+	return Number(avg) || 0
+})
+
+const weeklyTrendItems = computed(() => {
+	const trend = weeklyStatsData.value?.trend
+	if (!trend || !Array.isArray(trend) || trend.length === 0) return []
 	return trend.map((item, index) => {
 		const count = Number(item.count) || 0
-		const height = maxCount > 0
-			? `${Math.max((count / maxCount) * 100, count > 0 ? 6 : 0)}%`
-			: '0%'
-		return {
-			label: formatTrendLabel(item.label, trendUnit),
-			count,
-			height,
-			isHighlight: index === trend.length - 1
+		const label = item.label || ''
+		let weekday = ''
+		let date = ''
+		if (label.includes('-')) {
+			const parts = label.split('-')
+			const y = parseInt(parts[0], 10)
+			const m = parseInt(parts[1], 10) - 1
+			const d = parseInt(parts[2] || parts[1], 10)
+			if (parts.length >= 3) {
+				const dt = new Date(y, m, d)
+				weekday = WEEKDAY_NAMES[dt.getDay()]
+				date = String(d)
+			} else {
+				weekday = ''
+				date = `${parseInt(parts[1], 10)}月`
+			}
+		} else {
+			date = label
 		}
+		return { weekday, date, count, isHighlight: index === trend.length - 1 }
 	})
 })
 
-// 图表最小宽度：保证每根柱子有足够空间，年视图 12 个月时不被挤压或裁切
-const trendChartMinWidth = computed(() => {
-	const n = trendItems.value.length
-	const perItem = 80
-	return `${Math.max(n * perItem, 400)}rpx`
-})
+function calDotClass(count) {
+	if (count === 0) return 'cal-dot-zero'
+	if (count <= 3) return 'cal-dot-low'
+	if (count <= 8) return 'cal-dot-mid'
+	return 'cal-dot-high'
+}
 
 const savedMoneyText = computed(() => {
 	const money = statsData.value?.money
@@ -334,9 +326,7 @@ const moneyTargetCent = computed(() => {
 const moneyPercent = computed(() => {
 	const money = statsData.value?.money
 	const target = moneyTargetCent.value
-	if (!money || !money.available || target <= 0) {
-		return 0
-	}
+	if (!money || !money.available || target <= 0) return 0
 	const percent = Math.round((money.saved_cent / target) * 100)
 	return Math.min(Math.max(percent, 0), 100)
 })
@@ -349,15 +339,10 @@ const moneyTargetYuan = computed(() => {
 
 const moneyRingStyle = computed(() => {
 	if (!moneyAvailable.value) {
-		return {
-			background: 'conic-gradient(#E2E8F0 0deg 360deg)'
-		}
-	}
-	const percent = moneyPercent.value
-	const angle = Math.round(percent * 3.6)
-	return {
-		background: `conic-gradient(#F59E0B 0deg ${angle}deg, #F1F5F9 ${angle}deg 360deg)`
+		return { background: 'conic-gradient(#E2E8F0 0deg 360deg)' }
 	}
+	const angle = Math.round(moneyPercent.value * 3.6)
+	return { background: `conic-gradient(#34C8A0 0deg ${angle}deg, #E8F8F3 ${angle}deg 360deg)` }
 })
 
 const moneyRingText = computed(() => {
@@ -385,14 +370,10 @@ const lungRecoveryPercent = computed(() => {
 
 const healthRingStyle = computed(() => {
 	if (!healthAvailable.value) {
-		return {
-			background: 'conic-gradient(#E2E8F0 0deg 360deg)'
-		}
+		return { background: 'conic-gradient(#E2E8F0 0deg 360deg)' }
 	}
 	const angle = Math.round(lungRecoveryPercent.value * 3.6)
-	return {
-		background: `conic-gradient(#10B981 0deg ${angle}deg, #E2E8F0 ${angle}deg 360deg)`
-	}
+	return { background: `conic-gradient(#34C8A0 0deg ${angle}deg, #E8F8F3 ${angle}deg 360deg)` }
 })
 
 const smokeFreeText = computed(() => {
@@ -412,9 +393,7 @@ const healthItems = computed(() => {
 	if (!health || !health.available || !health.milestones || health.milestones.length === 0) return []
 	const minutes = health.smoke_free_minutes || 0
 	return health.milestones.map(item => {
-		if (item.reached) {
-			return { name: item.name, percent: 100 }
-		}
+		if (item.reached) return { name: item.name, percent: 100 }
 		const baseMinutes = item.minutes || 1
 		const percent = Math.min(Math.round((minutes / baseMinutes) * 100), 100)
 		return { name: item.name, percent }
@@ -424,56 +403,6 @@ const healthItems = computed(() => {
 const streakDays = computed(() => statsData.value?.streak_days ?? 0)
 const resistedTotal = computed(() => statsData.value?.resisted_total ?? 0)
 
-const moneyIconClass = computed(() => {
-	const money = statsData.value?.money
-	if (!money || !money.available) return 'icon-muted'
-	if (moneyPercent.value >= 60) return 'icon-strong'
-	if (moneyPercent.value >= 30) return 'icon-mid'
-	return 'icon-low'
-})
-
-const healthIconClass = computed(() => {
-	const health = statsData.value?.health
-	if (!health || !health.available) return 'icon-muted'
-	const minutes = health.smoke_free_minutes || 0
-	if (minutes >= 1440) return 'icon-strong'
-	if (minutes >= 120) return 'icon-mid'
-	return 'icon-low'
-})
-
-const streakIconClass = computed(() => {
-	if (streakDays.value <= 0) return 'icon-muted'
-	if (streakDays.value >= 7) return 'icon-strong'
-	if (streakDays.value >= 3) return 'icon-mid'
-	return 'icon-low'
-})
-
-const resistedIconClass = computed(() => {
-	if (resistedTotal.value <= 0) return 'icon-muted'
-	if (resistedTotal.value >= 10) return 'icon-strong'
-	if (resistedTotal.value >= 5) return 'icon-mid'
-	return 'icon-low'
-})
-
-function formatTrendLabel(label, unit) {
-	if (!label) return ''
-	if (unit === 'month') {
-		const parts = label.split('-')
-		if (parts.length >= 2) {
-			return `${parseInt(parts[1], 10)}月`
-		}
-		return label
-	}
-	if (label.includes('-')) {
-		const parts = label.split('-')
-		const day = parts[2] || parts[1]
-		if (day) {
-			return `${parseInt(day, 10)}日`
-		}
-	}
-	return label
-}
-
 function formatRangeText(start, end) {
 	const startParts = start.split('-')
 	const endParts = end.split('-')
@@ -482,9 +411,7 @@ function formatRangeText(start, end) {
 	const startDay = parseInt(startParts[2], 10)
 	const endMonth = parseInt(endParts[1], 10)
 	const endDay = parseInt(endParts[2], 10)
-	if (startMonth === endMonth) {
-		return `${startMonth}月${startDay}日-${endDay}日`
-	}
+	if (startMonth === endMonth) return `${startMonth}月${startDay}日-${endDay}日`
 	return `${startMonth}月${startDay}日-${endMonth}月${endDay}日`
 }
 
@@ -509,13 +436,31 @@ async function fetchStats() {
 	}
 }
 
-watch(currentTab, () => {
-	fetchStats()
-})
+async function fetchWeeklyStats() {
+	try {
+		await waitForLogin()
+		const res = await api.getStats({ range: 'week' })
+		weeklyStatsData.value = res.data
+	} catch (e) {
+		console.error('fetchWeeklyStats error:', e)
+	}
+}
+
+function goCalendarDetail() {
+	uni.navigateTo({ url: '/pages/stats-calendar/index' })
+}
+
+watch(currentTab, () => { fetchStats() })
 
 onMounted(() => {
 	setupNavBar()
 	fetchStats()
+	fetchWeeklyStats()
+})
+
+onShow(() => {
+	fetchStats()
+	fetchWeeklyStats()
 })
 
 onShareAppMessage(() => {
@@ -527,98 +472,31 @@ onShareAppMessage(() => {
 </script>
 
 <style scoped>
+/* ── 页面 ── */
 .page {
 	min-height: 100vh;
-	position: relative;
-	background:
-		radial-gradient(circle at top left, rgba(52, 200, 160, 0.16), transparent 30%),
-		radial-gradient(circle at top right, rgba(255, 255, 255, 0.92), transparent 24%),
-		linear-gradient(180deg, #edf2f8 0%, #f5f7fb 38%, #fbfdff 100%);
-	padding: 0 32rpx 200rpx;
+	background: linear-gradient(180deg, #E6F7F2 0%, #F0FBF7 40%, #FAFFFE 100%);
+	padding: 0 28rpx 0;
 	box-sizing: border-box;
-	overflow: hidden;
 }
 
 .status-bar {
 	background: transparent;
-	height: 0;
 }
 
-.page-glow {
-	position: absolute;
-	border-radius: 50%;
-	filter: blur(24rpx);
-	opacity: 0.72;
-	pointer-events: none;
-}
-
-.page-glow-a {
-	top: 88rpx;
-	left: -140rpx;
-	width: 360rpx;
-	height: 360rpx;
-	background: rgba(52, 200, 160, 0.14);
-}
-
-.page-glow-b {
-	top: 340rpx;
-	right: -120rpx;
-	width: 320rpx;
-	height: 320rpx;
-	background: rgba(255, 255, 255, 0.9);
-}
-
-.sticky-bar {
-	position: sticky;
-	top: 0;
-	z-index: 20;
-	background: linear-gradient(180deg, rgba(237, 242, 248, 0.96) 0%, rgba(245, 247, 251, 0.92) 76%, rgba(251, 253, 255, 0) 100%);
-	padding-left: 8rpx;
-	padding-right: 8rpx;
-	padding-bottom: 8rpx;
-}
-
-.page-head {
-	padding: 24rpx 14rpx 18rpx;
-}
-
-.page-eyebrow {
-	display: block;
-	font-size: 20rpx;
-	font-weight: 700;
-	letter-spacing: 4rpx;
-	text-transform: uppercase;
-	color: #98a2b3;
-}
-
-.page-title {
-	display: block;
-	margin-top: 10rpx;
-	font-size: 42rpx;
-	line-height: 1.18;
-	font-weight: 700;
-	color: #111827;
-}
-
-.page-subtitle {
-	display: block;
-	margin-top: 8rpx;
-	font-size: 24rpx;
-	line-height: 1.5;
-	color: #667085;
+/* ── Tab 切换 ── */
+.segment-wrap {
+	padding: 8rpx 0 20rpx;
 }
 
 .segment {
 	display: flex;
-	background: rgba(255, 255, 255, 0.76);
+	background: rgba(255, 255, 255, 0.82);
 	padding: 6rpx;
-	border-radius: 24rpx;
+	border-radius: 22rpx;
 	gap: 6rpx;
-	margin: 0 6rpx 16rpx;
-	border: 2rpx solid rgba(255, 255, 255, 0.66);
-	box-shadow: 0 12rpx 28rpx rgba(15, 23, 42, 0.06);
-	backdrop-filter: blur(24rpx);
-	-webkit-backdrop-filter: blur(24rpx);
+	border: 1.5rpx solid rgba(52, 200, 160, 0.14);
+	box-shadow: 0 4rpx 16rpx rgba(52, 200, 160, 0.07);
 }
 
 .segment-item {
@@ -627,392 +505,309 @@ onShareAppMessage(() => {
 	padding: 14rpx 0;
 	font-size: 24rpx;
 	font-weight: 600;
-	color: #64748B;
+	color: #7aA898;
 	border-radius: 16rpx;
-	transition: all 0.2s;
 }
 
 .segment-active {
-	background: rgba(255, 255, 255, 0.92);
-	color: #111827;
-	box-shadow: 0 8rpx 18rpx rgba(15, 23, 42, 0.06);
+	background: #FFFFFF;
+	color: #0D3D2E;
+	box-shadow: 0 4rpx 12rpx rgba(52, 200, 160, 0.12);
 }
 
+/* ── 洞察卡片 ── */
 .insight-card {
 	display: flex;
-	gap: 20rpx;
+	gap: 18rpx;
 	align-items: flex-start;
-	background: rgba(255, 255, 255, 0.78);
-	border: 2rpx solid rgba(255, 255, 255, 0.66);
-	border-radius: 30rpx;
-	padding: 24rpx;
-	margin-bottom: 28rpx;
-	box-shadow: 0 14rpx 34rpx rgba(15, 23, 42, 0.06);
-	backdrop-filter: blur(24rpx);
-	-webkit-backdrop-filter: blur(24rpx);
+	background: rgba(255, 255, 255, 0.88);
+	border: 1.5rpx solid rgba(52, 200, 160, 0.14);
+	border-radius: 24rpx;
+	padding: 22rpx;
+	margin-bottom: 20rpx;
+	box-shadow: 0 4rpx 18rpx rgba(52, 200, 160, 0.07);
 }
 
 .insight-icon {
-	width: 64rpx;
-	height: 64rpx;
-	border-radius: 20rpx;
-	background: linear-gradient(135deg, #BBF7D0 0%, #A7F3D0 100%);
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	box-shadow: 0 10rpx 18rpx rgba(16, 185, 129, 0.18);
-}
-
-.insight-icon.insight-good {
-	background: linear-gradient(135deg, #BBF7D0 0%, #A7F3D0 100%);
-	box-shadow: 0 10rpx 18rpx rgba(16, 185, 129, 0.18);
-}
-
-.insight-icon.insight-warn {
-	background: linear-gradient(135deg, #FED7AA 0%, #FDBA74 100%);
-	box-shadow: 0 10rpx 18rpx rgba(249, 115, 22, 0.18);
-}
-
-.insight-icon.insight-neutral {
-	background: linear-gradient(135deg, #E2E8F0 0%, #CBD5F5 100%);
-	box-shadow: 0 10rpx 18rpx rgba(100, 116, 139, 0.12);
-}
-
-.insight-glyph,
-.icon-glyph {
-	font-size: 24rpx;
-	font-weight: 700;
-	line-height: 1;
-}
-
-.insight-title {
-	font-size: 26rpx;
-	font-weight: 600;
-	color: #0F172A;
-	display: block;
-	margin-bottom: 8rpx;
-}
-
-.insight-desc {
-	font-size: 24rpx;
-	color: #475569;
-	line-height: 1.6;
-}
-
-.section {
-	margin-bottom: 32rpx;
-}
-
-.section-header {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	margin-bottom: 16rpx;
-}
-
-.section-title {
-	font-size: 30rpx;
-	font-weight: 600;
-	color: #111827;
-}
-
-.section-sub {
-	font-size: 22rpx;
-	color: #94A3B8;
-	margin-top: 6rpx;
-	display: block;
-}
-
-.status-chip {
-	display: flex;
-	align-items: center;
-	gap: 8rpx;
-	padding: 8rpx 16rpx;
-	border-radius: 999rpx;
-	font-size: 22rpx;
-	font-weight: 600;
-	border: 2rpx solid transparent;
-}
-
-.status-good {
-	background-color: #E8FFF1;
-	color: #16A34A;
-	border-color: #BBF7D0;
-}
-
-.status-warn {
-	background-color: #FEF3C7;
-	color: #D97706;
-	border-color: #FDE68A;
-}
-
-.status-neutral {
-	background-color: #F1F5F9;
-	color: #64748B;
-	border-color: #E2E8F0;
-}
-
-.status-icon {
-	width: 22rpx;
-	height: 22rpx;
-	border-radius: 999rpx;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	font-size: 18rpx;
-	font-weight: 700;
-	line-height: 1;
-}
-
-.status-icon-good {
-	background-color: rgba(22, 163, 74, 0.15);
-	color: #16A34A;
-}
-
-.status-icon-warn {
-	background-color: rgba(217, 119, 6, 0.15);
-	color: #D97706;
-}
-
-.status-icon-neutral {
-	background-color: rgba(100, 116, 139, 0.15);
-	color: #64748B;
-}
-
-.status-text {
-	font-size: 22rpx;
-}
-
-.trend-card {
-	background: rgba(255, 255, 255, 0.82);
-	border-radius: 32rpx;
-	padding: 24rpx;
-	border: 2rpx solid rgba(255, 255, 255, 0.66);
-	box-shadow: 0 16rpx 36rpx rgba(15, 23, 42, 0.06);
-	backdrop-filter: blur(24rpx);
-	-webkit-backdrop-filter: blur(24rpx);
-}
-
-.trend-header {
-	margin-bottom: 24rpx;
-}
-
-.trend-label {
-	font-size: 24rpx;
-	color: #94A3B8;
-	display: block;
-	margin-bottom: 10rpx;
-}
-
-.trend-value-row {
-	display: flex;
-	align-items: baseline;
-	gap: 8rpx;
-}
-
-.trend-value {
-	font-size: 56rpx;
-	font-weight: 700;
-	color: #111827;
-}
-
-.trend-unit {
-	font-size: 24rpx;
-	color: #94A3B8;
-}
-
-.trend-chart-scroll {
-	width: 100%;
-	margin-top: 8rpx;
-}
-
-.trend-chart-empty {
-	width: 100%;
-	height: 240rpx;
-	margin-top: 8rpx;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	background: #F8FAFC;
-	border-radius: 16rpx;
-}
-
-.trend-chart-empty-text {
-	font-size: 26rpx;
-	color: #94A3B8;
-}
-
-.trend-chart {
-	display: flex;
-	align-items: flex-end;
-	justify-content: space-between;
-	height: 240rpx;
-	gap: 12rpx;
-	padding: 36rpx 8rpx 0;
-	box-sizing: border-box;
-}
-
-.trend-bar-item {
-	flex: 1;
-	min-width: 56rpx;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: flex-end;
-	position: relative;
-	flex-shrink: 0;
-	overflow: visible;
-}
-
-.trend-bar-wrap {
-	width: 32rpx;
-	height: 180rpx;
-	display: flex;
-	align-items: flex-end;
-	justify-content: center;
-	flex-shrink: 0;
-}
-
-.trend-bar {
-	width: 32rpx;
-	min-height: 12rpx;
-	background: linear-gradient(180deg, #34D399 0%, #10B981 100%);
-	border-radius: 12rpx 12rpx 8rpx 8rpx;
-}
-
-.trend-bubble {
-	position: absolute;
-	top: 0;
-	transform: translateY(-12rpx);
-	background-color: #0F766E;
-	color: #FFFFFF;
-	font-size: 20rpx;
-	padding: 4rpx 10rpx;
-	border-radius: 12rpx;
-}
-
-.trend-bar-label {
-	margin-top: 12rpx;
-	font-size: 22rpx;
-	color: #94A3B8;
-}
-
-.trend-bar-label-active {
-	color: #16A34A;
-	font-weight: 600;
-}
-
-.savings-card {
-	background: rgba(255, 255, 255, 0.82);
-	border-radius: 32rpx;
-	padding: 24rpx;
-	margin-top: 20rpx;
-	border: 2rpx solid rgba(255, 255, 255, 0.66);
-	box-shadow: 0 16rpx 36rpx rgba(15, 23, 42, 0.06);
-	backdrop-filter: blur(24rpx);
-	-webkit-backdrop-filter: blur(24rpx);
-}
-
-.savings-header {
-	display: flex;
-	align-items: center;
-	gap: 12rpx;
-	margin-bottom: 16rpx;
-}
-
-.savings-icon {
 	width: 56rpx;
 	height: 56rpx;
 	border-radius: 16rpx;
-	background: linear-gradient(135deg, #FDE68A 0%, #FBBF24 100%);
-	position: relative;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	color: #D97706;
-	box-shadow: 0 8rpx 16rpx rgba(245, 158, 11, 0.2);
-	overflow: hidden;
+	flex-shrink: 0;
 }
 
-.savings-icon.icon-muted {
-	background: #F1F5F9;
-	color: #94A3B8;
-	box-shadow: none;
+.insight-good {
+	background: rgba(52, 200, 160, 0.15);
+	color: #1a8c62;
 }
 
-.savings-icon.icon-low {
-	background: linear-gradient(135deg, #FEF3C7 0%, #FCD34D 100%);
+.insight-warn {
+	background: rgba(251, 191, 36, 0.18);
+	color: #B45309;
 }
 
-.savings-icon.icon-mid {
-	background: linear-gradient(135deg, #FCD34D 0%, #F59E0B 100%);
+.insight-neutral {
+	background: rgba(52, 200, 160, 0.08);
+	color: #52806E;
 }
 
-.savings-icon.icon-strong {
-	background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
+.insight-glyph {
+	font-size: 22rpx;
+	font-weight: 700;
 }
 
-.savings-title {
-	font-size: 26rpx;
+.insight-title {
+	font-size: 24rpx;
 	font-weight: 600;
-	color: #111827;
+	color: #0D3D2E;
+	display: block;
+	margin-bottom: 6rpx;
 }
 
-.savings-header-text {
+.insight-desc {
+	font-size: 23rpx;
+	color: #52806E;
+	line-height: 1.6;
+}
+
+/* ── 通用卡片 ── */
+.card {
+	background: rgba(255, 255, 255, 0.88);
+	border-radius: 24rpx;
+	padding: 24rpx;
+	margin-bottom: 20rpx;
+	border: 1.5rpx solid rgba(52, 200, 160, 0.14);
+	box-shadow: 0 4rpx 18rpx rgba(52, 200, 160, 0.07);
+}
+
+.card-header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	margin-bottom: 16rpx;
+}
+
+.card-link {
+	flex-shrink: 0;
+	padding: 8rpx 16rpx;
+	border-radius: 999rpx;
+	background: rgba(52, 200, 160, 0.08);
+	font-size: 22rpx;
+	font-weight: 600;
+	color: #1a8c62;
+}
+
+.card-title-row {
+	display: flex;
+	align-items: center;
+	gap: 10rpx;
+}
+
+.card-title {
+	font-size: 28rpx;
+	font-weight: 600;
+	color: #0D3D2E;
+}
+
+.card-sub {
+	font-size: 21rpx;
+	color: #7aA898;
+	margin-top: 4rpx;
+	display: block;
+}
+
+/* ── 状态标签 ── */
+.status-chip {
+	display: flex;
+	align-items: center;
+	gap: 6rpx;
+	padding: 6rpx 14rpx;
+	border-radius: 999rpx;
+	font-size: 21rpx;
+	font-weight: 600;
+}
+
+.chip-good {
+	background: rgba(52, 200, 160, 0.12);
+	color: #1a8c62;
+}
+
+.chip-warn {
+	background: rgba(251, 191, 36, 0.14);
+	color: #B45309;
+}
+
+.chip-neutral {
+	background: rgba(52, 200, 160, 0.06);
+	color: #7aA898;
+}
+
+.status-arrow {
+	font-size: 18rpx;
+	font-weight: 700;
+}
+
+.arrow-good { color: #1a8c62; }
+.arrow-warn { color: #D97706; }
+.arrow-neutral { color: #7aA898; }
+
+.status-text {
+	font-size: 21rpx;
+}
+
+/* ── 日均 ── */
+.avg-row {
+	display: flex;
+	align-items: baseline;
+	gap: 8rpx;
+	margin-bottom: 20rpx;
+}
+
+.avg-value {
+	font-size: 52rpx;
+	font-weight: 700;
+	color: #0D3D2E;
+}
+
+.avg-unit {
+	font-size: 22rpx;
+	color: #7aA898;
+}
+
+/* ── 日历格式趋势 ── */
+.cal-grid {
+	display: flex;
+	gap: 0;
+}
+
+.cal-cell {
+	flex: 1;
 	display: flex;
 	flex-direction: column;
-	gap: 4rpx;
+	align-items: center;
+	gap: 8rpx;
+	padding: 10rpx 0;
 }
 
-.savings-subtitle {
+.cal-cell-today {
+	position: relative;
+}
+
+.cal-cell-today::before {
+	content: '';
+	position: absolute;
+	inset: 2rpx;
+	border-radius: 16rpx;
+	background: rgba(52, 200, 160, 0.06);
+}
+
+.cal-weekday {
 	font-size: 20rpx;
-	color: #94A3B8;
+	color: #7aA898;
+	font-weight: 500;
+	position: relative;
 }
 
-.savings-body {
+.cal-date {
+	font-size: 26rpx;
+	font-weight: 600;
+	color: #0D3D2E;
+	position: relative;
+}
+
+.cal-dot {
+	width: 52rpx;
+	height: 52rpx;
+	border-radius: 14rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	position: relative;
+}
+
+.cal-dot-zero {
+	background: rgba(52, 200, 160, 0.06);
+}
+
+.cal-dot-low {
+	background: rgba(52, 200, 160, 0.18);
+}
+
+.cal-dot-mid {
+	background: rgba(251, 191, 36, 0.2);
+}
+
+.cal-dot-high {
+	background: rgba(239, 68, 68, 0.15);
+}
+
+.cal-count {
+	font-size: 22rpx;
+	font-weight: 700;
+	color: #0D3D2E;
+}
+
+.cal-dot-zero .cal-count {
+	color: #9CC5B5;
+}
+
+.cal-dot-high .cal-count {
+	color: #DC2626;
+}
+
+/* ── 空状态 ── */
+.empty-block {
+	padding: 32rpx;
+	border-radius: 16rpx;
+	background: rgba(52, 200, 160, 0.04);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.empty-block-dashed {
+	border: 2rpx dashed rgba(52, 200, 160, 0.2);
+	background: transparent;
+}
+
+.empty-text {
+	font-size: 24rpx;
+	color: #7aA898;
+}
+
+/* ── 节省金额 ── */
+.money-body {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
 	gap: 20rpx;
 }
 
-.savings-left {
+.money-left {
 	flex: 1;
 }
 
-.savings-value {
-	font-size: 44rpx;
+.money-value {
+	font-size: 42rpx;
 	font-weight: 700;
-	color: #111827;
-	margin-bottom: 16rpx;
+	color: #0D3D2E;
+	margin-bottom: 12rpx;
 	display: block;
 }
 
-.savings-bar {
-	height: 10rpx;
-	background-color: #F1F5F9;
-	border-radius: 999rpx;
-	overflow: hidden;
-}
-
-.savings-bar-fill {
-	height: 100%;
-	background-color: #F59E0B;
-	border-radius: 999rpx;
-}
-
-.savings-sub {
-	font-size: 22rpx;
-	color: #94A3B8;
-	margin-top: 10rpx;
+.money-target {
+	font-size: 21rpx;
+	color: #7aA898;
+	margin-top: 8rpx;
 	display: block;
 }
 
-.savings-metrics {
+.metric-chips {
 	display: flex;
-	align-items: center;
 	gap: 12rpx;
-	margin-top: 14rpx;
+	margin-top: 16rpx;
 }
 
 .metric-chip {
@@ -1021,15 +816,18 @@ onShareAppMessage(() => {
 	align-items: baseline;
 	justify-content: center;
 	gap: 6rpx;
-	padding: 6rpx 12rpx;
+	padding: 8rpx 12rpx;
 	border-radius: 12rpx;
-	background-color: #FFFBEB;
-	color: #B45309;
 	font-weight: 600;
 }
 
-.metric-chip-actual {
-	background-color: #EFF6FF;
+.metric-chip-warm {
+	background: rgba(52, 200, 160, 0.08);
+	color: #1a8c62;
+}
+
+.metric-chip-cool {
+	background: rgba(59, 130, 246, 0.08);
 	color: #2563EB;
 }
 
@@ -1038,7 +836,7 @@ onShareAppMessage(() => {
 	opacity: 0.8;
 }
 
-.metric-value {
+.metric-val {
 	font-size: 24rpx;
 }
 
@@ -1047,130 +845,82 @@ onShareAppMessage(() => {
 	opacity: 0.7;
 }
 
-.savings-ring {
-	width: 120rpx;
-	height: 120rpx;
-	border-radius: 50%;
-	display: flex;
-	align-items: center;
-	justify-content: center;
+/* ── 进度条 ── */
+.progress-bar {
+	height: 10rpx;
+	background: rgba(52, 200, 160, 0.1);
+	border-radius: 999rpx;
+	overflow: hidden;
 }
 
-.savings-ring-inner {
-	width: 88rpx;
-	height: 88rpx;
+.progress-fill {
+	height: 100%;
+	border-radius: 999rpx;
+}
+
+.progress-fill-money {
+	background: linear-gradient(90deg, #34C8A0, #3DD9AE);
+}
+
+.progress-fill-done {
+	background: linear-gradient(90deg, #34C8A0, #3DD9AE);
+}
+
+.progress-fill-pending {
+	background: rgba(52, 200, 160, 0.3);
+}
+
+/* ── 圆环 ── */
+.ring {
+	width: 110rpx;
+	height: 110rpx;
 	border-radius: 50%;
-	background-color: #FFFFFF;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	box-shadow: 0 6rpx 16rpx rgba(245, 158, 11, 0.12);
+	flex-shrink: 0;
+}
+
+.ring-inner {
+	width: 82rpx;
+	height: 82rpx;
+	border-radius: 50%;
+	background: #FFFFFF;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: 2rpx;
+	box-shadow: 0 4rpx 12rpx rgba(52, 200, 160, 0.1);
 }
 
 .ring-value {
 	font-size: 22rpx;
 	font-weight: 700;
-	color: #111827;
+	color: #0D3D2E;
 }
 
-.card-empty {
-	margin-top: 16rpx;
-	padding: 12rpx 16rpx;
-	border-radius: 16rpx;
-	background-color: #F8FAFC;
-	border: 2rpx dashed #E2E8F0;
-	display: flex;
-	align-items: center;
-	gap: 10rpx;
+.ring-label {
+	font-size: 16rpx;
+	color: #7aA898;
 }
 
-.card-empty-icon {
-	font-size: 24rpx;
-	font-weight: 700;
-}
-
-.card-empty-text {
-	font-size: 22rpx;
-	color: #94A3B8;
-}
-
-.health-card {
-	background: rgba(255, 255, 255, 0.82);
-	border-radius: 32rpx;
-	padding: 24rpx;
-	margin-top: 24rpx;
-	border: 2rpx solid rgba(255, 255, 255, 0.66);
-	box-shadow: 0 16rpx 36rpx rgba(15, 23, 42, 0.06);
-	backdrop-filter: blur(24rpx);
-	-webkit-backdrop-filter: blur(24rpx);
-}
-
-.health-header {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	margin-bottom: 20rpx;
-}
-
-.health-title-row {
-	display: flex;
-	align-items: center;
-	gap: 12rpx;
-}
-
-.health-icon {
-	width: 48rpx;
-	height: 48rpx;
-	background: linear-gradient(135deg, #DCFCE7 0%, #A7F3D0 100%);
-	border-radius: 14rpx;
-	position: relative;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	color: #16A34A;
-	box-shadow: 0 8rpx 16rpx rgba(16, 185, 129, 0.18);
-}
-
-.health-icon.icon-muted {
-	background: #F1F5F9;
-	color: #94A3B8;
-	box-shadow: none;
-}
-
-.health-icon.icon-low {
-	background: linear-gradient(135deg, #DCFCE7 0%, #86EFAC 100%);
-}
-
-.health-icon.icon-mid {
-	background: linear-gradient(135deg, #BBF7D0 0%, #4ADE80 100%);
-}
-
-.health-icon.icon-strong {
-	background: linear-gradient(135deg, #34D399 0%, #10B981 100%);
-}
-
-.health-title {
-	font-size: 26rpx;
-	font-weight: 600;
-	color: #111827;
-}
-
-.health-badge {
+/* ── 徽章 ── */
+.badge {
 	font-size: 20rpx;
 	padding: 6rpx 14rpx;
 	border-radius: 999rpx;
-	background-color: #E8FFF1;
-	color: #16A34A;
+	background: rgba(52, 200, 160, 0.12);
+	color: #1a8c62;
 	font-weight: 600;
-	border: 2rpx solid #BBF7D0;
 }
 
-.health-badge-muted {
-	background-color: #F1F5F9;
-	color: #64748B;
-	border-color: #E2E8F0;
+.badge-muted {
+	background: rgba(52, 200, 160, 0.06);
+	color: #7aA898;
 }
 
+/* ── 健康概览 ── */
 .health-overview {
 	display: flex;
 	align-items: center;
@@ -1179,210 +929,98 @@ onShareAppMessage(() => {
 	margin-bottom: 20rpx;
 }
 
-.health-metric {
+.health-stat {
 	flex: 1;
-	background-color: #F0FDF4;
-	border-radius: 18rpx;
-	padding: 16rpx;
-	display: flex;
-	flex-direction: column;
-	gap: 6rpx;
-	border: 2rpx solid #DCFCE7;
+	background: rgba(52, 200, 160, 0.06);
+	border-radius: 16rpx;
+	padding: 18rpx;
+	border: 1.5rpx solid rgba(52, 200, 160, 0.12);
 }
 
-.health-metric-icon {
-	width: 40rpx;
-	height: 40rpx;
-	border-radius: 14rpx;
-	background: rgba(52, 200, 160, 0.14);
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	font-size: 20rpx;
+.health-stat-value {
+	display: block;
+	font-size: 28rpx;
 	font-weight: 700;
-	color: #17795c;
+	color: #0D3D2E;
+	margin-bottom: 4rpx;
 }
 
-.health-metric-value {
-	font-size: 26rpx;
-	font-weight: 700;
-	color: #0F172A;
-}
-
-.health-metric-label {
+.health-stat-label {
 	font-size: 20rpx;
-	color: #64748B;
-}
-
-.health-ring {
-	width: 120rpx;
-	height: 120rpx;
-	border-radius: 50%;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-
-.health-ring-inner {
-	width: 88rpx;
-	height: 88rpx;
-	border-radius: 50%;
-	background-color: #FFFFFF;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	gap: 2rpx;
-	box-shadow: 0 6rpx 16rpx rgba(16, 185, 129, 0.12);
-}
-
-.ring-label {
-	font-size: 18rpx;
-	color: #94A3B8;
+	color: #7aA898;
 }
 
+/* ── 健康列表 ── */
 .health-list {
 	display: flex;
 	flex-direction: column;
-	gap: 16rpx;
+	gap: 14rpx;
 }
 
-.health-item-row {
+.health-item-top {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	margin-bottom: 8rpx;
+	margin-bottom: 6rpx;
 }
 
 .health-item-name {
-	font-size: 24rpx;
-	color: #111827;
+	font-size: 23rpx;
+	color: #0D3D2E;
 	font-weight: 500;
 }
 
-.health-item-percent {
-	font-size: 22rpx;
-	color: #16A34A;
+.health-item-pct {
+	font-size: 21rpx;
+	color: #7aA898;
 	font-weight: 600;
 }
 
-.health-item-percent-muted {
-	color: #94A3B8;
+.health-item-pct-done {
+	color: #1a8c62;
 }
 
-.health-bar {
-	height: 10rpx;
-	background-color: #F1F5F9;
-	border-radius: 999rpx;
-	overflow: hidden;
-}
-
-.health-bar-fill {
-	height: 100%;
-	background-color: #16A34A;
-	border-radius: 999rpx;
-}
-
-.health-bar-fill-muted {
-	background-color: #C7E6D4;
-}
-
-.stats-grid {
+/* ── 底部小卡片 ── */
+.mini-grid {
 	display: flex;
-	gap: 20rpx;
-	margin-top: 24rpx;
+	gap: 16rpx;
+	margin-bottom: 20rpx;
 }
 
 .mini-card {
 	flex: 1;
-	background: rgba(255, 255, 255, 0.82);
-	border-radius: 28rpx;
-	padding: 24rpx;
-	border: 2rpx solid rgba(255, 255, 255, 0.66);
-	box-shadow: 0 14rpx 32rpx rgba(15, 23, 42, 0.05);
-	backdrop-filter: blur(24rpx);
-	-webkit-backdrop-filter: blur(24rpx);
+	background: rgba(255, 255, 255, 0.88);
+	border-radius: 20rpx;
+	padding: 22rpx;
+	border: 1.5rpx solid rgba(52, 200, 160, 0.14);
+	box-shadow: 0 4rpx 18rpx rgba(52, 200, 160, 0.07);
 }
 
-.mini-icon {
-	width: 40rpx;
-	height: 40rpx;
-	border-radius: 12rpx;
-	margin-bottom: 12rpx;
-	position: relative;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-
-.mini-icon-fire {
-	background-color: #FEE2E2;
-	color: #F97316;
-}
-
-.mini-icon-block {
-	background-color: #E0E7FF;
-	color: #6366F1;
-}
-
-.mini-icon.icon-muted {
-	background-color: #F1F5F9;
-	color: #94A3B8;
-}
-
-.mini-icon-fire.icon-low {
-	background-color: #FFE8D2;
-}
-
-.mini-icon-fire.icon-mid {
-	background-color: #FFD8B5;
-}
-
-.mini-icon-fire.icon-strong {
-	background-color: #FDBA74;
-}
-
-.mini-icon-block.icon-low {
-	background-color: #E0E7FF;
-}
-
-.mini-icon-block.icon-mid {
-	background-color: #C7D2FE;
-}
-
-.mini-icon-block.icon-strong {
-	background-color: #A5B4FC;
-}
-
-
 .mini-label {
 	font-size: 22rpx;
-	color: #64748B;
-	margin-bottom: 10rpx;
+	color: #7aA898;
+	margin-bottom: 8rpx;
 	display: block;
 }
 
 .mini-value-row {
 	display: flex;
 	align-items: baseline;
-	gap: 8rpx;
+	gap: 6rpx;
 }
 
 .mini-value {
 	font-size: 40rpx;
 	font-weight: 700;
-	color: #111827;
+	color: #0D3D2E;
 }
 
 .mini-unit {
-	font-size: 22rpx;
-	color: #94A3B8;
+	font-size: 21rpx;
+	color: #7aA898;
 }
 
-.mini-sub {
-	font-size: 22rpx;
-	color: #94A3B8;
-	margin-top: 6rpx;
-	display: block;
+.bottom-safe {
+	height: calc(32rpx + env(safe-area-inset-bottom));
 }
 </style>
diff --git a/vite.config.js b/vite.config.js
index f89dada..4d1766e 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -5,9 +5,13 @@ import Uni from '@uni-helper/plugin-uni'
 
 export default defineConfig({
   server: {
+    host: '0.0.0.0',
+    port: 5173,
+    strictPort: true,
     proxy: {
       '/api/v1': {
-        target: 'http://localhost:8080',
+        // target: 'http://localhost:8080',
+        target: 'http://nas.quitsmok.top:8300',
         changeOrigin: true
       }
     }