diff --git a/TUICallKit-Vue3/training/pages/components/grip-ring-canvas.vue b/TUICallKit-Vue3/training/pages/components/grip-ring-canvas.vue
index a6361748..5e0f040b 100644
--- a/TUICallKit-Vue3/training/pages/components/grip-ring-canvas.vue
+++ b/TUICallKit-Vue3/training/pages/components/grip-ring-canvas.vue
@@ -23,7 +23,7 @@
                 <view class="hint-icon">
                     <view class="play-triangle" />
                 </view>
-                <text class="hint-text">点击开始</text>
+                <text class="hint-text">{{ hintText || '点击开始' }}</text>
             </view>
 
             <!-- BPM 显示 (播放时显示) -->
@@ -42,9 +42,12 @@ import CrushCanvas from './crush-canvas.vue'
 interface Props {
     bpm: number
     isPlaying: boolean
+    hintText?: string
 }
 
-const props = defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), {
+    hintText: '点击开始',
+})
 
 const emit = defineEmits<{
     togglePlay: []
@@ -78,25 +81,24 @@ defineExpose({
     justify-content: center;
     position: relative;
     overflow: hidden;
-    /* 与页面背景一致,无可见边界 */
-    background: #f8fafc;
+    background: linear-gradient(180deg, #f0fdfa 0%, #f8fafc 55%, #f1f5f9 100%);
 }
 
-/* 环境氛围 - 中心大放射光晕,营造空间感 */
+/* 环境氛围 - 中心放射光晕 */
 .ambient-glow {
     position: absolute;
-    width: 1400rpx;
-    height: 1400rpx;
+    width: 1200rpx;
+    height: 1200rpx;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     border-radius: 50%;
     background:
         radial-gradient(circle,
-            rgba(255, 255, 255, 1) 0%,
-            rgba(241, 245, 249, 0.6) 25%,
-            rgba(226, 232, 240, 0.3) 50%,
-            transparent 75%);
+            rgba(204, 251, 241, 0.9) 0%,
+            rgba(240, 253, 250, 0.5) 30%,
+            rgba(241, 245, 249, 0.2) 55%,
+            transparent 72%);
     pointer-events: none;
 }
 
@@ -105,8 +107,8 @@ defineExpose({
  * ============================================================ */
 .ring-container {
     position: relative;
-    width: 640rpx;
-    height: 640rpx;
+    width: 560rpx;
+    height: 560rpx;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -117,13 +119,13 @@ defineExpose({
 /* 外发光 - 只在播放时显示(节省 GPU) */
 .ring-aura {
     position: absolute;
-    width: 700rpx;
-    height: 700rpx;
+    width: 620rpx;
+    height: 620rpx;
     border-radius: 50%;
     background: radial-gradient(circle,
-        rgba(244, 114, 182, 0.45) 0%,
-        rgba(244, 114, 182, 0.15) 35%,
-        rgba(244, 114, 182, 0) 70%);
+        rgba(20, 184, 166, 0.4) 0%,
+        rgba(45, 212, 191, 0.15) 35%,
+        rgba(20, 184, 166, 0) 70%);
     opacity: 0;
     transition: opacity 0.3s ease;
     will-change: transform, opacity;
@@ -150,8 +152,8 @@ defineExpose({
  * ============================================================ */
 .grip-ring {
     position: relative;
-    width: 520rpx;
-    height: 520rpx;
+    width: 460rpx;
+    height: 460rpx;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -163,28 +165,28 @@ defineExpose({
     transform: scale(0.96);
 }
 
-/* 外圈 - 粉色渐变(精致质感) */
+/* 外圈 - 青绿渐变(与页面品牌色一致) */
 .ring-outer-circle {
     position: absolute;
     width: 100%;
     height: 100%;
     border-radius: 50%;
     background: linear-gradient(135deg,
-        #fda4af 0%,
-        #f472b6 50%,
-        #ec4899 100%);
+        #5eead4 0%,
+        #2dd4bf 45%,
+        #14b8a6 100%);
     box-shadow:
-        0 24rpx 64rpx rgba(236, 72, 153, 0.4),
-        0 12rpx 32rpx rgba(244, 114, 182, 0.3),
-        inset 0 -20rpx 40rpx rgba(190, 24, 93, 0.35),
-        inset 0 20rpx 40rpx rgba(255, 255, 255, 0.5);
+        0 20rpx 56rpx rgba(20, 184, 166, 0.35),
+        0 10rpx 28rpx rgba(45, 212, 191, 0.25),
+        inset 0 -18rpx 36rpx rgba(15, 118, 110, 0.3),
+        inset 0 18rpx 36rpx rgba(255, 255, 255, 0.45);
 }
 
 /* 顶部高光 - 模拟材质感 */
 .ring-highlight {
     position: absolute;
-    width: 420rpx;
-    height: 120rpx;
+    width: 360rpx;
+    height: 100rpx;
     top: 40rpx;
     border-radius: 50%;
     background: radial-gradient(ellipse,
@@ -196,13 +198,13 @@ defineExpose({
 /* 内圈中空 */
 .ring-inner-circle {
     position: absolute;
-    width: 280rpx;
-    height: 280rpx;
+    width: 250rpx;
+    height: 250rpx;
     border-radius: 50%;
-    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
+    background: linear-gradient(135deg, #ffffff 0%, #f0fdfa 100%);
     box-shadow:
-        inset 0 8rpx 20rpx rgba(190, 24, 93, 0.3),
-        inset 0 -2rpx 8rpx rgba(255, 255, 255, 0.8);
+        inset 0 8rpx 20rpx rgba(15, 118, 110, 0.25),
+        inset 0 -2rpx 8rpx rgba(255, 255, 255, 0.85);
 }
 
 /* 播放时的挤压动画(只影响 transform,GPU 加速) */
@@ -245,15 +247,15 @@ defineExpose({
 }
 
 .hint-icon {
-    width: 108rpx;
-    height: 108rpx;
+    width: 96rpx;
+    height: 96rpx;
     display: flex;
     align-items: center;
     justify-content: center;
     background: rgba(255, 255, 255, 0.98);
     border-radius: 50%;
     box-shadow:
-        0 12rpx 32rpx rgba(236, 72, 153, 0.35),
+        0 12rpx 32rpx rgba(20, 184, 166, 0.28),
         inset 0 2rpx 4rpx rgba(255, 255, 255, 0.9);
     animation: hint-bounce 2s ease-in-out infinite;
     will-change: transform;
@@ -262,10 +264,10 @@ defineExpose({
 .play-triangle {
     width: 0;
     height: 0;
-    border-left: 36rpx solid #ec4899;
-    border-top: 24rpx solid transparent;
-    border-bottom: 24rpx solid transparent;
-    margin-left: 10rpx;
+    border-left: 32rpx solid #0f766e;
+    border-top: 22rpx solid transparent;
+    border-bottom: 22rpx solid transparent;
+    margin-left: 8rpx;
 }
 
 @keyframes hint-bounce {
@@ -278,10 +280,10 @@ defineExpose({
 }
 
 .hint-text {
-    font-size: 28rpx;
-    color: #be185d;
+    font-size: 26rpx;
+    color: #0f766e;
     font-weight: 700;
-    letter-spacing: 4rpx;
+    letter-spacing: 3rpx;
     text-shadow: 0 2rpx 8rpx rgba(255, 255, 255, 0.9);
 }
 
@@ -299,8 +301,8 @@ defineExpose({
 }
 
 .bpm-value {
-    font-size: 88rpx;
-    color: #be185d;
+    font-size: 80rpx;
+    color: #0f766e;
     font-weight: 900;
     line-height: 1;
     letter-spacing: -2rpx;
@@ -310,7 +312,7 @@ defineExpose({
 
 .bpm-label {
     font-size: 22rpx;
-    color: #ec4899;
+    color: #14b8a6;
     font-weight: 700;
     letter-spacing: 6rpx;
     margin-top: 2rpx;
diff --git a/TUICallKit-Vue3/training/pages/grip-ring.vue b/TUICallKit-Vue3/training/pages/grip-ring.vue
index 300aecb6..1e2d63e1 100644
--- a/TUICallKit-Vue3/training/pages/grip-ring.vue
+++ b/TUICallKit-Vue3/training/pages/grip-ring.vue
@@ -1,48 +1,102 @@
 <template>
     <view class="page" :style="rootStyle">
+        <!-- ===== 页头 ===== -->
+        <view class="page-header">
+            <view class="header-main">
+                <text class="page-title">握力环训练</text>
+                <text class="page-subtitle">跟随节奏 · 握紧停顿 · 完全放松</text>
+            </view>
+            <view class="status-pill" :class="{ active: isPlaying, paused: isPaused }">
+                <view class="status-dot" />
+                <text class="status-text">{{ statusText }}</text>
+            </view>
+        </view>
+
         <!-- ===== 握力环画布区域 ===== -->
         <view class="stage-canvas-wrapper">
             <GripRingCanvas
                 ref="gripCanvasRef"
                 :bpm="currentBpm"
                 :is-playing="isPlaying"
+                :hint-text="centerHintText"
                 @toggle-play="onTogglePlay"
             />
 
-            <!-- BGM 开关按钮 -->
             <view class="bgm-toggle" @click="toggleBgm">
                 <text class="bgm-icon">{{ bgmEnabled ? '🎵' : '🔇' }}</text>
             </view>
-        </view>
 
-        <!-- ===== 实时统计 ===== -->
-        <view v-if="isPlaying || totalReps > 0" class="stats-bar">
-            <view class="stat-item-inline">
-                <text class="stat-label-inline">次数</text>
-                <text class="stat-value-inline">{{ totalReps }}</text>
-            </view>
-            <view class="stat-item-inline">
-                <text class="stat-label-inline">时长</text>
-                <text class="stat-value-inline">{{ formatTime(elapsedSeconds) }}</text>
-            </view>
-            <view class="stat-item-inline">
-                <text class="stat-label-inline">消耗糖分</text>
-                <text class="stat-value-inline">{{ totalSugar.toFixed(1) }}g</text>
+            <!-- 倒计时浮标(仅有目标且训练已开始时显示) -->
+            <view v-if="remainingSeconds !== null && hasStats" class="countdown-badge">
+                <text class="countdown-label">剩余</text>
+                <text class="countdown-value">{{ formatTime(remainingSeconds) }}</text>
             </view>
         </view>
 
-        <!-- ===== 三档位推荐 ===== -->
-        <view class="presets">
-            <view
-                v-for="p in GRIP_PRESETS"
-                :key="p.id"
-                class="preset"
-                :class="{ active: currentPreset === p.id, disabled: isPlaying }"
-                @click="onPresetTap(p.id)"
-            >
-                <text class="preset-name">{{ p.label }}</text>
-                <text class="preset-bpm">{{ p.bpm }} BPM</text>
-                <text class="preset-desc">{{ p.desc }}</text>
+        <!-- ===== 控制面板：统计 + 档位 + 目标 ===== -->
+        <view class="control-deck" :class="{ 'is-playing': isPlaying, 'is-paused': isPaused }">
+            <view class="stats-row">
+                <view class="stat-chip">
+                    <text class="stat-chip-label">次数</text>
+                    <text class="stat-chip-value" :class="{ muted: !hasStats }">{{ hasStats ? totalReps : '—' }}</text>
+                </view>
+                <view class="stat-chip">
+                    <text class="stat-chip-label">时长</text>
+                    <text class="stat-chip-value" :class="{ muted: !hasStats }">{{ hasStats ? formatTime(elapsedSeconds) : '—' }}</text>
+                </view>
+                <view class="stat-chip">
+                    <text class="stat-chip-label">糖分</text>
+                    <text class="stat-chip-value" :class="{ muted: !hasStats }">{{ hasStats ? `${totalSugar.toFixed(1)}g` : '—' }}</text>
+                </view>
+            </view>
+
+            <view class="deck-divider" />
+
+            <view class="presets-block">
+                <view class="presets-header">
+                    <text class="presets-title">训练强度</text>
+                    <text v-if="isPlaying" class="presets-hint">训练中不可切换</text>
+                </view>
+                <view class="presets">
+                    <view
+                        v-for="p in GRIP_PRESETS"
+                        :key="p.id"
+                        class="preset"
+                        :class="{ active: currentPreset === p.id, disabled: isPlaying }"
+                        @click="onPresetTap(p.id)"
+                    >
+                        <text class="preset-icon">{{ PRESET_ICONS[p.id] }}</text>
+                        <text class="preset-name">{{ p.label }}</text>
+                        <text class="preset-bpm">{{ p.bpm }} BPM</text>
+                        <text class="preset-desc">{{ p.desc }}</text>
+                    </view>
+                </view>
+            </view>
+
+            <view class="deck-divider" />
+
+            <view class="target-block">
+                <view class="target-header">
+                    <text class="target-title">训练目标</text>
+                    <text class="target-hint">到时间自动结束</text>
+                </view>
+                <view class="target-chips">
+                    <view
+                        v-for="t in TARGET_OPTIONS"
+                        :key="t.minutes"
+                        class="target-chip"
+                        :class="{ active: targetMinutes === t.minutes, disabled: isPlaying }"
+                        @click="onTargetTap(t.minutes)"
+                    >
+                        <text class="target-chip-text">{{ t.label }}</text>
+                    </view>
+                </view>
+            </view>
+
+            <!-- 仅暂停时显示一行提示 + 结束训练文字链 -->
+            <view v-if="isPaused" class="action-bar">
+                <text class="paused-hint-text">已暂停 · 点击握力环继续</text>
+                <text class="end-link" @click="onEndTraining">结束训练 ›</text>
             </view>
         </view>
 
@@ -57,8 +111,16 @@
             </view>
         </view>
 
-        <!-- ===== 训练完成卡片 ===== -->
-        <view v-if="showSummary" class="completion-card">
+        <!-- ===== 动作要领 ===== -->
+        <view class="tips-strip">
+            <view v-for="(tip, i) in TIPS" :key="i" class="tip-chip">
+                <text class="tip-text">{{ tip }}</text>
+            </view>
+        </view>
+
+        <!-- ===== 训练完成（浮层） ===== -->
+        <view v-if="showSummary" class="summary-mask" @click="dismissSummary">
+            <view class="completion-card" @click.stop>
             <view class="completion-header">
                 <text class="completion-emoji">🎉</text>
                 <text class="completion-title">训练完成</text>
@@ -109,23 +171,20 @@
             </view>
 
             <view class="action-row">
+                <button class="btn-share" open-type="share">
+                    <text class="share-icon">📤</text>
+                </button>
+                <button class="btn-secondary" @click="onContinue">继续训练</button>
                 <button class="btn-primary" @click="onRestart">再来一次</button>
             </view>
-        </view>
-
-        <!-- ===== 动作要领 ===== -->
-        <view class="tips-card">
-            <text class="tips-title">动作要领</text>
-            <text class="tips-item">• 完全握紧停顿 1 秒</text>
-            <text class="tips-item">• 完全张开放松</text>
-            <text class="tips-item">• 左右手交替训练</text>
+            </view>
         </view>
     </view>
 </template>
 
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
-import { onShow, onHide } from '@dcloudio/uni-app'
+import { onShow, onHide, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
 import { useMetronome } from '../hooks/useMetronome'
 import GripRingCanvas from './components/grip-ring-canvas.vue'
 
@@ -143,6 +202,26 @@ const GRIP_PRESETS: readonly GripPreset[] = [
     { id: 'heavy', bpm: 100, label: '重度', desc: '强化 · 挑战' },
 ]
 
+const PRESET_ICONS: Record<PresetId, string> = {
+    light: '🌱',
+    medium: '💪',
+    heavy: '🔥',
+}
+
+const TIPS = ['握紧停 1 秒', '完全放松', '左右手交替'] as const
+
+interface TargetOption {
+    minutes: 0 | 5 | 10 | 15
+    label: string
+}
+
+const TARGET_OPTIONS: readonly TargetOption[] = [
+    { minutes: 0, label: '自由' },
+    { minutes: 5, label: '5 分钟' },
+    { minutes: 10, label: '10 分钟' },
+    { minutes: 15, label: '15 分钟' },
+]
+
 // 奖励配置 - 按难度递增
 interface RewardConfig {
     emoji: string
@@ -208,6 +287,7 @@ const FOOD_SUGAR_TABLE = [
 ]
 
 const currentPreset = ref<PresetId>('medium')
+const targetMinutes = ref<0 | 5 | 10 | 15>(0) // 训练目标(0=自由)
 const gripCanvasRef = ref<any>(null)
 const showRewardPopup = ref(false)
 const showSummary = ref(false)
@@ -239,6 +319,32 @@ const metronome = useMetronome({
 const { isPlaying } = metronome
 
 const intervalMs = computed(() => 60000 / currentBpm.value)
+const hasStats = computed(() => isPlaying.value || totalReps.value > 0)
+const isPaused = computed(() => !isPlaying.value && totalReps.value > 0 && !showSummary.value)
+
+// 目标剩余秒数(targetMinutes=0 时返回 null,代表无目标)
+const remainingSeconds = computed<number | null>(() => {
+    if (targetMinutes.value === 0) return null
+    const total = targetMinutes.value * 60
+    return Math.max(0, total - elapsedSeconds.value)
+})
+
+// 环中心显示的提示文字
+const centerHintText = computed(() => (isPaused.value ? '点击继续' : '点击开始'))
+
+// 状态胶囊文字
+const statusText = computed(() => {
+    if (isPlaying.value) return '训练中'
+    if (isPaused.value) return '已暂停'
+    return '待开始'
+})
+
+// 分享文案
+const shareTitle = computed(() => {
+    if (totalReps.value === 0) return '握力环训练 · 一起练起来'
+    return `刚刚完成 ${totalReps.value} 次握力训练，消耗 ${totalSugar.value.toFixed(1)}g 糖分 💪`
+})
+
 
 const rootStyle = computed(() => ({
     '--beat-duration': `${intervalMs.value}ms`,
@@ -394,49 +500,68 @@ function toggleBgm() {
     }
 }
 
-// 档位切换
+// 档位切换 - 仅训练中禁用(暂停时可重新选)
 function onPresetTap(id: PresetId) {
     if (isPlaying.value) return
     currentPreset.value = id
     metronome.setBpm(preset.value.bpm)
 }
 
-// 播放/暂停切换
+// 训练目标切换 - 训练中禁用
+function onTargetTap(minutes: 0 | 5 | 10 | 15) {
+    if (isPlaying.value) return
+    targetMinutes.value = minutes
+}
+
+// 点击环:开始 / 暂停 / 继续(不再直接弹结算)
 function onTogglePlay() {
     if (isPlaying.value) {
-        // 暂停 - 显示总结
-        metronome.stop()
-        stopBgm()
-        stopTimer()
-        uni.setKeepScreenOn({ keepScreenOn: false })
-        showSummary.value = true
+        pauseTraining()
     } else {
-        // 开始/继续
-        if (showSummary.value) {
-            // 从总结页继续 - 不重置数据
-            showSummary.value = false
-        } else if (totalReps.value === 0) {
-            // 首次开始 - 重置数据
+        if (totalReps.value === 0) {
             resetStats()
         }
-
-        metronome.start()
-        startBgm()
-        startTimer()
-        uni.setKeepScreenOn({ keepScreenOn: true })
+        startTrainingInternal()
     }
 }
 
-// 重新开始
-function onRestart() {
-    showSummary.value = false
-    resetStats()
+function startTrainingInternal() {
     metronome.start()
     startBgm()
     startTimer()
     uni.setKeepScreenOn({ keepScreenOn: true })
 }
 
+function pauseTraining() {
+    metronome.stop()
+    stopBgm()
+    stopTimer()
+    uni.setKeepScreenOn({ keepScreenOn: false })
+}
+
+// 显式结束训练 - 弹结算页
+function onEndTraining() {
+    if (totalReps.value === 0) return
+    pauseTraining()
+    showSummary.value = true
+}
+
+function dismissSummary() {
+    showSummary.value = false
+}
+
+function onContinue() {
+    showSummary.value = false
+    startTrainingInternal()
+}
+
+// 再来一次
+function onRestart() {
+    showSummary.value = false
+    resetStats()
+    startTrainingInternal()
+}
+
 // 重置统计
 function resetStats() {
     totalReps.value = 0
@@ -461,6 +586,11 @@ function startTimer() {
     timerInterval.value = setInterval(() => {
         elapsedSeconds.value = Math.floor((Date.now() - startTime.value) / 1000)
         totalSugar.value = calculateSugar(elapsedSeconds.value)
+
+        // 到达训练目标 → 自动结束
+        if (targetMinutes.value > 0 && elapsedSeconds.value >= targetMinutes.value * 60) {
+            onEndTraining()
+        }
     }, 1000) as unknown as number
 }
 
@@ -476,6 +606,17 @@ onShow(() => {
     metronome.preload()
 })
 
+// 分享给好友(微信小程序)
+onShareAppMessage(() => ({
+    title: shareTitle.value,
+    path: '/training/pages/grip-ring',
+}))
+
+// 分享到朋友圈
+onShareTimeline(() => ({
+    title: shareTitle.value,
+}))
+
 onHide(() => {
     if (isPlaying.value) {
         metronome.stop()
@@ -520,42 +661,140 @@ $shadow-sm: 0 4rpx 12rpx rgba(15, 23, 42, 0.04);
     position: relative;
     min-height: 100vh;
     box-sizing: border-box;
-    padding: 30rpx 28rpx 50rpx;
-    background: $bg-color;
+    padding: 24rpx 28rpx calc(48rpx + env(safe-area-inset-bottom));
+    background: linear-gradient(180deg, #f0fdfa 0%, $bg-color 28%, $bg-color 100%);
     display: flex;
     flex-direction: column;
-    align-items: center;
+    align-items: stretch;
     gap: 20rpx;
     color: $text-1;
+    overflow-x: hidden;
+}
+
+/* ============================================================
+ * 页头
+ * ============================================================ */
+.page-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 16rpx;
+    flex-shrink: 0;
+}
+
+.header-main {
+    display: flex;
+    flex-direction: column;
+    gap: 6rpx;
+    flex: 1;
+    min-width: 0;
+}
+
+.page-title {
+    font-size: 40rpx;
+    font-weight: 800;
+    color: $text-1;
+    letter-spacing: 1rpx;
+    line-height: 1.2;
+}
+
+.page-subtitle {
+    font-size: 24rpx;
+    color: $text-3;
+    line-height: 1.4;
+}
+
+.status-pill {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    gap: 8rpx;
+    padding: 10rpx 18rpx;
+    border-radius: 999rpx;
+    background: rgba(255, 255, 255, 0.85);
+    border: 2rpx solid $card-border;
+    box-shadow: $shadow-sm;
+
+    &.active {
+        background: $brand-soft;
+        border-color: rgba(20, 184, 166, 0.35);
+
+        .status-dot {
+            background: $brand;
+            box-shadow: 0 0 0 4rpx rgba(20, 184, 166, 0.25);
+            animation: status-pulse 1.2s ease-in-out infinite;
+        }
+
+        .status-text {
+            color: $brand-deep;
+        }
+    }
+
+    &.paused {
+        background: #fef3c7;
+        border-color: rgba(245, 158, 11, 0.4);
+
+        .status-dot {
+            background: #f59e0b;
+        }
+
+        .status-text {
+            color: #92400e;
+        }
+    }
+}
+
+.status-dot {
+    width: 12rpx;
+    height: 12rpx;
+    border-radius: 50%;
+    background: $text-3;
+}
+
+.status-text {
+    font-size: 22rpx;
+    font-weight: 600;
+    color: $text-2;
+    white-space: nowrap;
+}
+
+@keyframes status-pulse {
+    0%, 100% {
+        transform: scale(1);
+        opacity: 1;
+    }
+    50% {
+        transform: scale(1.15);
+        opacity: 0.85;
+    }
 }
 
 /* ============================================================
  * 画布区域
  * ============================================================ */
 .stage-canvas-wrapper {
-    width: 100vw;
+    /* 用 calc 替代 100vw，避免右侧被裁切导致圆角不对称 */
+    width: calc(100% + 56rpx);
     margin-left: -28rpx;
     margin-right: -28rpx;
-    margin-top: -30rpx; /* 向上拉,贴近导航栏 */
     flex-shrink: 0;
-    /* 占主屏 60%,确保下方统计栏和档位可见 */
-    height: 60vh;
-    min-height: 720rpx;
-    max-height: 900rpx;
+    height: 520rpx;
     display: flex;
     justify-content: center;
     align-items: center;
-    margin-bottom: 24rpx;
     position: relative;
+    border-radius: 0 0 40rpx 40rpx;
+    overflow: hidden;
+    box-sizing: border-box;
 }
 
 /* ============================================================
- * BGM 开关按钮
+ * BGM 开关
  * ============================================================ */
 .bgm-toggle {
     position: absolute;
-    top: 32rpx;
-    right: 32rpx;
+    top: 24rpx;
+    right: 28rpx;
     width: 72rpx;
     height: 72rpx;
     border-radius: 50%;
@@ -612,108 +851,132 @@ $shadow-sm: 0 4rpx 12rpx rgba(15, 23, 42, 0.04);
 }
 
 /* ============================================================
- * 实时统计栏
+ * 控制面板（统计 + 档位合一）
  * ============================================================ */
-.stats-bar {
+.control-deck {
     width: 100%;
+    box-sizing: border-box;
     background: $card-bg;
-    border-radius: $radius-card;
-    padding: 24rpx 28rpx;
+    border-radius: 28rpx;
+    padding: 24rpx 20rpx 20rpx;
     box-shadow:
-        0 4rpx 16rpx rgba(15, 23, 42, 0.04),
-        0 1rpx 2rpx rgba(15, 23, 42, 0.04);
+        0 8rpx 32rpx rgba(15, 23, 42, 0.06),
+        0 1rpx 0 rgba(255, 255, 255, 0.9) inset;
+    border: 2rpx solid rgba(255, 255, 255, 0.8);
+    transition: box-shadow 0.25s ease;
+
+    &.is-playing {
+        box-shadow:
+            0 12rpx 40rpx rgba(20, 184, 166, 0.12),
+            0 0 0 2rpx rgba(20, 184, 166, 0.12);
+    }
+}
+
+.stats-row {
     display: flex;
-    justify-content: space-around;
-    align-items: center;
-    gap: 16rpx;
-    border: 2rpx solid rgba(20, 184, 166, 0.08);
-    position: relative;
-    overflow: hidden;
+    gap: 12rpx;
 }
 
-.stats-bar::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 3rpx;
-    background: linear-gradient(90deg, transparent, $brand, transparent);
-}
-
-.stat-item-inline {
+.stat-chip {
+    flex: 1;
+    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
+    border-radius: 20rpx;
+    padding: 18rpx 8rpx 16rpx;
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: 8rpx;
-    flex: 1;
-    position: relative;
+    gap: 6rpx;
+    border: 2rpx solid rgba(15, 23, 42, 0.04);
 }
 
-.stat-item-inline:not(:last-child)::after {
-    content: '';
-    position: absolute;
-    right: -8rpx;
-    top: 20%;
-    bottom: 20%;
-    width: 2rpx;
-    background: linear-gradient(to bottom, transparent, $card-border, transparent);
-}
-
-.stat-label-inline {
-    font-size: 22rpx;
+.stat-chip-label {
+    font-size: 20rpx;
     color: $text-3;
     font-weight: 500;
-    letter-spacing: 1rpx;
 }
 
-.stat-value-inline {
-    font-size: 32rpx;
-    color: $brand-deep;
+.stat-chip-value {
+    font-size: 34rpx;
     font-weight: 800;
+    color: $brand-deep;
     font-variant-numeric: tabular-nums;
-    letter-spacing: 0;
+    line-height: 1.1;
+
+    &.muted {
+        color: #cbd5e1;
+        font-weight: 600;
+    }
 }
 
-/* ============================================================
- * 三档位推荐
- * ============================================================ */
-.presets {
-    width: 100%;
+.deck-divider {
+    height: 2rpx;
+    margin: 20rpx 8rpx 18rpx;
+    background: linear-gradient(90deg, transparent, $card-border, transparent);
+}
+
+.presets-block {
     display: flex;
+    flex-direction: column;
     gap: 14rpx;
 }
 
+.presets-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 4rpx;
+}
+
+.presets-title {
+    font-size: 26rpx;
+    font-weight: 700;
+    color: $text-1;
+}
+
+.presets-hint {
+    font-size: 20rpx;
+    color: $text-3;
+}
+
+.presets {
+    display: flex;
+    gap: 12rpx;
+}
+
 .preset {
     flex: 1;
-    background: $card-bg;
-    border: 2rpx solid $card-border;
-    border-radius: $radius-card;
-    padding: 26rpx 8rpx;
+    background: #f8fafc;
+    border: 2rpx solid transparent;
+    border-radius: 20rpx;
+    padding: 20rpx 6rpx 18rpx;
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: 8rpx;
-    box-shadow: $shadow-sm;
+    gap: 4rpx;
     transition: all 0.18s;
 
+    .preset-icon {
+        font-size: 32rpx;
+        line-height: 1;
+        margin-bottom: 4rpx;
+    }
+
     .preset-name {
-        font-size: 28rpx;
+        font-size: 26rpx;
         font-weight: 700;
         color: $text-1;
-        letter-spacing: 2rpx;
     }
     .preset-bpm {
         font-size: 22rpx;
         color: $text-2;
-        font-weight: 600;
+        font-weight: 700;
         font-variant-numeric: tabular-nums;
     }
     .preset-desc {
         font-size: 18rpx;
         color: $text-3;
-        letter-spacing: 1rpx;
-        margin-top: 2rpx;
+        text-align: center;
+        line-height: 1.3;
     }
 
     &:active {
@@ -721,20 +984,16 @@ $shadow-sm: 0 4rpx 12rpx rgba(15, 23, 42, 0.04);
     }
 
     &.disabled {
-        opacity: 0.5;
+        opacity: 0.45;
         pointer-events: none;
     }
 
     &.active {
-        background: $brand-soft;
+        background: linear-gradient(160deg, $brand-soft 0%, #ecfeff 100%);
         border-color: $brand;
-        box-shadow:
-            0 8rpx 20rpx rgba(20, 184, 166, 0.18),
-            inset 0 0 0 2rpx rgba(20, 184, 166, 0.4);
+        box-shadow: 0 6rpx 16rpx rgba(20, 184, 166, 0.15);
 
-        .preset-name {
-            color: $brand-deep;
-        }
+        .preset-name,
         .preset-bpm {
             color: $brand-deep;
         }
@@ -744,6 +1003,183 @@ $shadow-sm: 0 4rpx 12rpx rgba(15, 23, 42, 0.04);
     }
 }
 
+/* ============================================================
+ * 训练目标 chips
+ * ============================================================ */
+.target-block {
+    display: flex;
+    flex-direction: column;
+    gap: 14rpx;
+}
+
+.target-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 4rpx;
+}
+
+.target-title {
+    font-size: 26rpx;
+    font-weight: 700;
+    color: $text-1;
+}
+
+.target-hint {
+    font-size: 20rpx;
+    color: $text-3;
+}
+
+.target-chips {
+    display: flex;
+    gap: 12rpx;
+}
+
+.target-chip {
+    flex: 1;
+    height: 72rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #f8fafc;
+    border: 2rpx solid transparent;
+    border-radius: 16rpx;
+    transition: all 0.18s;
+
+    .target-chip-text {
+        font-size: 24rpx;
+        font-weight: 600;
+        color: $text-2;
+    }
+
+    &:active {
+        transform: scale(0.97);
+    }
+
+    &.disabled {
+        opacity: 0.45;
+        pointer-events: none;
+    }
+
+    &.active {
+        background: $brand-soft;
+        border-color: $brand;
+
+        .target-chip-text {
+            color: $brand-deep;
+        }
+    }
+}
+
+/* ============================================================
+ * 倒计时浮标
+ * ============================================================ */
+.countdown-badge {
+    position: absolute;
+    top: 24rpx;
+    left: 28rpx;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 8rpx 20rpx 10rpx;
+    border-radius: 16rpx;
+    background: rgba(255, 255, 255, 0.92);
+    box-shadow:
+        0 4rpx 16rpx rgba(15, 23, 42, 0.08),
+        0 0 0 2rpx rgba(20, 184, 166, 0.18);
+    z-index: 20;
+}
+
+.countdown-label {
+    font-size: 18rpx;
+    color: $text-3;
+    line-height: 1.1;
+}
+
+.countdown-value {
+    font-size: 32rpx;
+    font-weight: 800;
+    color: $brand-deep;
+    font-variant-numeric: tabular-nums;
+    line-height: 1.1;
+    margin-top: 2rpx;
+}
+
+/* ============================================================
+ * 控制面板底部操作（仅暂停时显示）
+ * ============================================================ */
+.action-bar {
+    margin-top: 18rpx;
+    padding: 14rpx 4rpx 2rpx;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12rpx;
+    border-top: 2rpx dashed rgba(15, 23, 42, 0.06);
+}
+
+.paused-hint-text {
+    flex: 1;
+    font-size: 22rpx;
+    color: $text-3;
+    letter-spacing: 1rpx;
+}
+
+.end-link {
+    flex-shrink: 0;
+    padding: 8rpx 4rpx;
+    font-size: 24rpx;
+    color: $text-2;
+    font-weight: 500;
+    letter-spacing: 1rpx;
+
+    &:active {
+        color: $text-1;
+    }
+}
+
+/* ============================================================
+ * 动作要领条
+ * ============================================================ */
+.tips-strip {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10rpx;
+    justify-content: center;
+}
+
+.tip-chip {
+    padding: 10rpx 20rpx;
+    background: rgba(255, 255, 255, 0.7);
+    border-radius: 999rpx;
+    border: 2rpx solid $card-border;
+}
+
+.tip-text {
+    font-size: 22rpx;
+    color: $text-2;
+    line-height: 1.3;
+}
+
+/* ============================================================
+ * 完成浮层
+ * ============================================================ */
+.summary-mask {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(15, 23, 42, 0.45);
+    backdrop-filter: blur(6rpx);
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+    z-index: 900;
+    padding: 0 24rpx calc(32rpx + env(safe-area-inset-bottom));
+    animation: fade-in 0.2s ease;
+}
+
 /* ============================================================
  * 奖励弹窗
  * ============================================================ */
@@ -852,17 +1288,30 @@ $shadow-sm: 0 4rpx 12rpx rgba(15, 23, 42, 0.04);
  * ============================================================ */
 .completion-card {
     width: 100%;
+    max-width: 700rpx;
     background: linear-gradient(135deg, #f0fdfa, #ecfeff);
-    border-radius: $radius-card;
-    padding: 40rpx 28rpx 32rpx;
+    border-radius: 32rpx 32rpx 28rpx 28rpx;
+    padding: 40rpx 28rpx 36rpx;
     display: flex;
     flex-direction: column;
     gap: 28rpx;
     align-items: center;
     box-shadow:
-        0 8rpx 32rpx rgba(20, 184, 166, 0.08),
-        0 2rpx 8rpx rgba(15, 23, 42, 0.04);
+        0 -8rpx 48rpx rgba(15, 23, 42, 0.12),
+        0 8rpx 32rpx rgba(20, 184, 166, 0.08);
     border: 2rpx solid rgba(20, 184, 166, 0.1);
+    animation: sheet-up 0.35s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+@keyframes sheet-up {
+    from {
+        transform: translateY(100%);
+        opacity: 0;
+    }
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
 }
 
 .completion-header {
@@ -1046,40 +1495,49 @@ $shadow-sm: 0 4rpx 12rpx rgba(15, 23, 42, 0.04);
     width: 100%;
 }
 
-.btn-primary {
-    background: $brand;
-    color: #fff;
+.btn-primary,
+.btn-secondary,
+.btn-share {
+    flex: 1;
     border-radius: 999rpx;
-    font-size: 30rpx;
+    font-size: 28rpx;
     height: 88rpx;
     line-height: 88rpx;
     border: none;
-    padding: 0 48rpx;
+    padding: 0 16rpx;
+
+    &::after {
+        border: none;
+    }
 }
 
-/* ============================================================
- * 动作要领
- * ============================================================ */
-.tips-card {
-    width: 100%;
-    background: $card-bg;
-    border-radius: $radius-card;
-    padding: 24rpx;
-    display: flex;
-    flex-direction: column;
-    gap: 8rpx;
-    box-shadow: $shadow-sm;
+.btn-primary {
+    background: $brand;
+    color: #fff;
+}
 
-    .tips-title {
-        font-size: 28rpx;
-        font-weight: 600;
-        color: $text-1;
-        margin-bottom: 8rpx;
-    }
-    .tips-item {
-        font-size: 26rpx;
-        color: $text-2;
-        line-height: 1.6;
+.btn-secondary {
+    background: #fff;
+    color: $brand-deep;
+    border: 2rpx solid rgba(20, 184, 166, 0.35);
+}
+
+.btn-share {
+    flex: 0 0 auto;
+    width: 88rpx;
+    padding: 0;
+    background: #f0fdfa;
+    color: $brand-deep;
+    border: 2rpx solid rgba(20, 184, 166, 0.25);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6rpx;
+    font-size: 24rpx;
+
+    .share-icon {
+        font-size: 30rpx;
+        line-height: 1;
     }
 }
 </style>