From e92f1bdfaee841e32c2b8bfa2a431945bb6b35e5 Mon Sep 17 00:00:00 2001
From: nepiedg <yunchuansong@163.com>
Date: Tue, 31 Mar 2026 21:29:54 +0800
Subject: [PATCH] feat: refresh h5 debug workflow and ui design

---
 docs/design-system.md           |  396 +++++++++
 src/api/auth.js                 |    5 +-
 src/api/request.js              |    1 +
 src/pages/logs/index.vue        |  387 ++++-----
 src/pages/mode-select/index.vue |   14 +
 src/pages/onboarding/index.vue  |  173 ++--
 src/pages/profile/index.vue     |  243 ++----
 src/pages/stats/index.vue       | 1407 +++++++++++--------------------
 vite.config.js                  |    6 +-
 9 files changed, 1303 insertions(+), 1329 deletions(-)
 create mode 100644 docs/design-system.md

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..f548de6 100644
--- a/src/api/auth.js
+++ b/src/api/auth.js
@@ -2,13 +2,14 @@ import { request } from './request'
 import { MINI_PROGRAM_ID } from '@/config'
 import { storage, SESSION_KEY, USER_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)
 		applied = true
 	}
 	// #endif
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/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..693a970 100644
--- a/src/pages/mode-select/index.vue
+++ b/src/pages/mode-select/index.vue
@@ -100,6 +100,20 @@ async function selectMode(mode) {
 onMounted(async () => {
 	setupNavBar()
 	await waitForLogin()
+
+	// New users go directly to onboarding (single-page flow)
+	try {
+		const profileData = await profileStore.fetchProfile()
+		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' })
+		}
+	} catch (e) {
+		// If fetch fails, let user choose mode normally
+	}
 })
 </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..2c2ad32 100644
--- a/src/pages/profile/index.vue
+++ b/src/pages/profile/index.vue
@@ -1,29 +1,25 @@
 <template>
 	<view class="page">
-		<view class="page-glow page-glow-a"></view>
-		<view class="page-glow page-glow-b"></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">
+			<text class="section-label">使用模式</text>
+			<view class="mode-card card">
 				<view class="mode-card-header">
 					<view class="menu-icon menu-icon-accent">
 						<text class="menu-glyph">模</text>
@@ -48,7 +44,8 @@
 				<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>
@@ -83,7 +80,8 @@
 		</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>
@@ -111,6 +109,7 @@
 		</view>
 
 		<text class="version">版本 1.0.0</text>
+		<view class="bottom-safe"></view>
 	</view>
 </template>
 
@@ -286,98 +285,50 @@ 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: linear-gradient(180deg, #E6F7F2 0%, #F0FBF7 40%, #FAFFFE 100%);
+	padding: 0 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: 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);
 }
 
 .nav-placeholder,
-.page-header,
-.user-section,
 .section,
 .version {
 	position: relative;
 	z-index: 1;
 }
 
-.page-header {
-	padding: 24rpx 6rpx 18rpx;
+.section {
+	margin-bottom: 20rpx;
 }
 
-.header-eyebrow {
+.section-label {
 	display: block;
-	font-size: 20rpx;
-	font-weight: 700;
-	letter-spacing: 4rpx;
-	text-transform: uppercase;
-	color: #98a2b3;
+	margin: 0 0 14rpx 6rpx;
+	font-size: 26rpx;
+	font-weight: 600;
+	color: #1a5c45;
 }
 
-.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: rgba(255, 255, 255, 0.88);
+	border-radius: 24rpx;
+	padding: 24rpx;
+	border: 1.5rpx solid rgba(52, 200, 160, 0.14);
+	box-shadow: 0 4rpx 18rpx rgba(52, 200, 160, 0.07);
 }
 
 .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);
 }
 
 .avatar {
-	width: 132rpx;
-	height: 132rpx;
+	width: 120rpx;
+	height: 120rpx;
 	border-radius: 50%;
-	border: 4rpx solid rgba(255, 255, 255, 0.82);
-	background-color: rgba(255, 255, 255, 0.7);
+	border: 4rpx solid rgba(52, 200, 160, 0.16);
+	background-color: rgba(52, 200, 160, 0.06);
 }
 
 .user-copy {
@@ -388,110 +339,93 @@ onShow(async () => {
 }
 
 .user-name {
-	font-size: 40rpx;
+	font-size: 38rpx;
 	font-weight: 700;
-	color: #111827;
+	color: #0D3D2E;
 }
 
 .user-desc {
 	display: block;
 	margin-top: 8rpx;
-	font-size: 24rpx;
+	font-size: 25rpx;
 	line-height: 1.5;
-	color: #667085;
+	color: #52806E;
 }
 
 .user-meta {
 	display: flex;
 	flex-wrap: wrap;
-	gap: 12rpx;
-	margin-top: 18rpx;
+	gap: 14rpx;
+	margin-top: 16rpx;
 }
 
 .user-pill {
-	padding: 10rpx 20rpx;
+	padding: 14rpx 26rpx;
 	border-radius: 999rpx;
 	background: rgba(52, 200, 160, 0.12);
-	border: 2rpx solid rgba(255, 255, 255, 0.64);
+	border: 1.5rpx solid rgba(52, 200, 160, 0.18);
 	font-size: 22rpx;
 	font-weight: 600;
-	color: #17795c;
+	color: #1a8c62;
 }
 
 .user-pill-muted {
-	background: rgba(255, 255, 255, 0.78);
-	color: #667085;
-}
-
-.section {
-	margin-bottom: 24rpx;
+	background: rgba(52, 200, 160, 0.06);
+	color: #7aA898;
 }
 
 .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;
+	gap: 20rpx;
 	margin-bottom: 20rpx;
 }
 
 .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;
 }
 
 .menu-item {
 	display: flex;
 	align-items: center;
-	gap: 24rpx;
-	padding: 28rpx 24rpx;
+	gap: 20rpx;
+	padding: 6rpx 0;
 }
 
 .menu-divider {
-	margin: 0 24rpx;
+	margin: 16rpx 0;
 	height: 2rpx;
-	background: rgba(15, 23, 42, 0.06);
+	background: rgba(52, 200, 160, 0.12);
 }
 
 .menu-icon {
 	width: 64rpx;
 	height: 64rpx;
-	border-radius: 20rpx;
+	border-radius: 18rpx;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	border: 2rpx solid rgba(255, 255, 255, 0.7);
+	border: 1.5rpx solid rgba(52, 200, 160, 0.18);
 }
 
 .menu-icon-accent {
-	background: rgba(52, 200, 160, 0.14);
+	background: rgba(52, 200, 160, 0.12);
 }
 
 .menu-icon-muted {
-	background: rgba(255, 255, 255, 0.82);
+	background: rgba(52, 200, 160, 0.06);
 }
 
 .menu-glyph {
 	font-size: 24rpx;
 	font-weight: 700;
-	color: #111827;
+	color: #1a8c62;
 }
 
 .menu-content {
@@ -502,15 +436,15 @@ onShow(async () => {
 }
 
 .menu-label {
-	font-size: 30rpx;
-	color: #111827;
+	font-size: 28rpx;
+	color: #0D3D2E;
 	font-weight: 600;
 }
 
 .menu-desc {
-	font-size: 24rpx;
+	font-size: 25rpx;
 	line-height: 1.5;
-	color: #667085;
+	color: #52806E;
 }
 
 .menu-actions {
@@ -519,57 +453,54 @@ onShow(async () => {
 	align-items: center;
 	flex-wrap: wrap;
 	gap: 8rpx;
-	font-size: 24rpx;
-	color: #1aa37a;
+	font-size: 22rpx;
+	color: #1a8c62;
 }
 
 .menu-action {
-	color: #1aa37a;
+	color: #1a8c62;
 }
 
 .menu-action-sep {
-	color: #98a2b3;
+	color: #7aA898;
 }
 
 .menu-arrow {
 	font-size: 36rpx;
-	color: #98a2b3;
+	color: #7aA898;
 }
 
 .menu-value {
 	font-size: 24rpx;
 	font-weight: 600;
-	color: #1aa37a;
+	color: #1a8c62;
 }
 
 .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);
+	gap: 16rpx;
 }
 
 .mode-switch-item {
 	flex: 1;
-	padding: 22rpx 18rpx;
+	padding: 22rpx 20rpx;
 	border-radius: 20rpx;
-	background: transparent;
-	border: 2rpx solid transparent;
+	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);
 }
 
 .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);
+	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-title {
 	display: block;
 	font-size: 28rpx;
 	font-weight: 700;
-	color: #111827;
+	color: #0D3D2E;
 }
 
 .mode-switch-desc {
@@ -577,30 +508,30 @@ onShow(async () => {
 	margin-top: 8rpx;
 	font-size: 22rpx;
 	line-height: 1.5;
-	color: #667085;
+	color: #7aA898;
 }
 
 .mode-hint {
 	display: block;
 	margin-top: 16rpx;
 	font-size: 22rpx;
-	color: #1aa37a;
+	color: #1a8c62;
 }
 
 .share-btn {
 	margin: 0;
-	padding: 12rpx 22rpx;
+	padding: 16rpx 28rpx;
 	line-height: 1.4;
 	font-size: 24rpx;
 	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: linear-gradient(180deg, #3DD9AE 0%, #34C8A0 100%);
+	box-shadow: 0 12rpx 28rpx rgba(52, 200, 160, 0.28);
 }
 
 .share-btn[disabled] {
-	background: #98a2b3;
+	background: #9CC5B5;
 	color: #FFFFFF;
 }
 
@@ -612,7 +543,11 @@ onShow(async () => {
 	display: block;
 	text-align: center;
 	font-size: 22rpx;
-	color: #98a2b3;
-	margin-top: 32rpx;
+	color: #7aA898;
+	margin-top: 28rpx;
+}
+
+.bottom-safe {
+	height: calc(32rpx + env(safe-area-inset-bottom));
 }
 </style>
diff --git a/src/pages/stats/index.vue b/src/pages/stats/index.vue
index 58dc941..745e65d 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,6 +17,7 @@
 			</view>
 		</view>
 
+		<!-- 洞察卡片 -->
 		<view class="insight-card">
 			<view class="insight-icon" :class="insightIconClass">
 				<text class="insight-glyph">{{ insightEmoji }}</text>
@@ -32,157 +28,137 @@
 			</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>
+					<text class="card-title">吸烟趋势</text>
+					<text class="card-sub">{{ trendRangeText }}</text>
 				</view>
 				<view class="status-chip" :class="statusChipClass">
-					<text class="status-icon" :class="statusIconClass">{{ statusArrow }}</text>
+					<text class="status-arrow" :class="statusIconClass">{{ statusArrow }}</text>
 					<text class="status-text">{{ statusText }}</text>
 				</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">{{ averageCount }}</text>
+				<text class="avg-unit">支/天</text>
+			</view>
+
+			<!-- 日历格式趋势 -->
+			<view v-if="trendItems.length > 0" class="cal-grid">
+				<view v-for="(item, index) in trendItems" :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>
 
@@ -204,6 +180,8 @@ const tabs = [
 const currentTab = ref('week')
 const statsData = ref(null)
 
+const WEEKDAY_NAMES = ['日', '一', '二', '三', '四', '五', '六']
+
 const changePercent = computed(() => {
 	const value = statsData.value?.change_percent
 	if (value === undefined || value === null) return null
@@ -235,9 +213,7 @@ 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)
 })
 
@@ -248,8 +224,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 +234,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 +244,40 @@ 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)
+	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 +315,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 +328,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 +359,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 +382,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 +392,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 +400,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,9 +425,7 @@ async function fetchStats() {
 	}
 }
 
-watch(currentTab, () => {
-	fetchStats()
-})
+watch(currentTab, () => { fetchStats() })
 
 onMounted(() => {
 	setupNavBar()
@@ -527,98 +441,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 +474,299 @@ 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-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 +775,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 +795,7 @@ onShareAppMessage(() => {
 	opacity: 0.8;
 }
 
-.metric-value {
+.metric-val {
 	font-size: 24rpx;
 }
 
@@ -1047,130 +804,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 +888,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
       }
     }