feat(timer): 循环训练组进度改为圆环分段弧 + 信息气泡三行合一

- progress-ring 新增 sets/currentSet/resting/successColor 属性,
  圆环外圈绘制分段弧(已完成=主色/当前=呼吸光点/休息下一组=绿),单组模式零渲染
- timer 删除顶部 circuit-bar 进度面板,布局骨架三模式统一
- 呼吸环淡化(描边 0.55→0.20,柔光渐变强度减半)
- 目标卡与提示气泡合并为 info-bubble,状态文案(撑住/休息中/已暂停)并入气泡顶部

pages/index/index.js

@@ -19,18 +19,11 @@ Page({
     // 空则回退占位(人形图标 + "运动达人"),settings 改完回首页即刷新。
     nickName: '',
     avatarUrl: '',
-    // Ring number font size in rpx. WeChat auto-scales text by the user's
-    // font-size setting (fontSizeScaleFactor) but does NOT scale rpx box
-    // dimensions — so on a real device with enlarged system font the 84rpx
-    // number grows past the fixed-size circular ring and gets clipped. We
-    // cancel that scale here so the number renders at a constant visual size
-    // (matching the devtools/simulator) on every device. See _readFontScale().
-    targetTimeFontSize: 96,
     streakCount: 0,
     planName: '',
     planDay: 1,
     planTotal: 7,
-    // hero / 进度地图 / dial 相关展示字段(由 refresh 生成)
+    // hero / 进度地图 / 时长展示相关字段(由 refresh 生成)
     greetText: '你好',
     streakText: '今天开启坚持之旅',
     questNodes: [],
@@ -52,50 +45,9 @@ Page({
 
   onLoad() {
     themeMod.applyThemeToPage(this)
-    this._readFontScale()
     this._firstShow = true
   },
 
-  /**
-   * Read the device's WeChat font-size scale and compensate the ring number
-   * so it never overflows the fixed circular clip on real devices.
-   *
-   * WeChat auto-applies `fontSizeScaleFactor` to ALL text (including rpx font
-   * sizes) but leaves rpx box dimensions untouched. A user who bumps up the
-   * system font therefore sees enlarged text inside a non-enlarged ring.
-   *
-   * CRITICAL asymmetry: the DevTools simulator reports the SAME
-   * `fontSizeScaleFactor` as a real device (the user's actual WeChat setting)
-   * but does NOT actually scale rendered text. So if we compensate there, the
-   * number ends up too small in the simulator. We therefore SKIP the
-   * compensation under DevTools (host.env === 'devtools') and keep the design
-   * size — matching what the simulator renders literally.
-   *
- * On real devices, dividing our design size by the factor cancels the
- * auto-scale, keeping the number a constant 96rpx-equivalent everywhere.
-   * Bounded so a bad reading can only ever make the number smaller (safe),
-   * never larger (overflow).
-   */
-  _readFontScale() {
-    let factor = 1
-    try {
-      const info = wx.getAppBaseInfo ? wx.getAppBaseInfo() : wx.getSystemInfoSync()
-      const isDevtools = info.host && info.host.env === 'devtools'
-      if (!isDevtools) {
-        if (typeof info.fontSizeScaleFactor === 'number' && info.fontSizeScaleFactor > 0) {
-          factor = info.fontSizeScaleFactor
-        } else if (typeof info.fontSizeSetting === 'number' && info.fontSizeSetting > 0) {
-          // fontSizeScaleFactor == currentFontSize / standardFontSize(17px)
-          factor = info.fontSizeSetting / 17
-        }
-      }
-    } catch (e) {}
-    const DESIGN = 96
-    let size = Math.round(DESIGN / factor)
-    size = Math.max(48, Math.min(96, size))
-    this.setData({ targetTimeFontSize: size })
-  },
-
   onShow() {
     themeMod.applyThemeToPage(this)
     try {

pages/index/index.wxml

@@ -1,4 +1,4 @@
-<view class="container page-enter" style="{{themeStyle}}">
+<view class="container page-enter index-page" style="{{themeStyle}}">
 
   <!-- 全宽渐变头图 hero -->
   <view class="hero">
@@ -37,12 +37,10 @@
     <text class="quest-tip">{{questTip}}</text>
   </ui-card>
 
-  <!-- 计时环 dial -->
+  <!-- 今日目标时长(无圆环, 大字流光时间) -->
   <view class="timer-wrap">
-    <view class="dial">
-      <text class="dial-time" style="font-size: {{targetTimeFontSize}}rpx;">{{todayTargetText}}</text>
-      <text class="dial-label">今日目标时长</text>
-    </view>
+    <text class="time-display">{{todayTargetText}}</text>
+    <text class="time-label">今日目标时长</text>
     <view class="benefit">⚡ 预计消耗 <text class="benefit-hl">{{estKcal}}</text> 千卡</view>
   </view>
 

pages/index/index.wxss

@@ -3,6 +3,14 @@
    底部留大内边距给下方 quest-card 负 margin 上浮叠住。文字统一白色,图标用
    *White 变体(若有)。hero 用 opacity-only 动画,避免 transform 把 .container
    变成 containing block 而破坏弹窗定位(同 app.wxss pageIn 思路)。 */
+
+/* index-page:仅本页面把 .container 升级为 flex 列,
+   时钟区 flex:1 居中,操作按钮 margin-top:auto 贴底(不动全局 container)。 */
+.index-page {
+  display: flex;
+  flex-direction: column;
+}
+
 .hero {
   margin: -24rpx -24rpx 0;
   padding: 24rpx 24rpx 72rpx;
@@ -199,57 +207,41 @@
   100% { box-shadow: 0 0 0 4rpx rgba(var(--primary-rgb), 0); }
 }
 
-/* ===== 计时环 dial ===== */
+/* ===== 今日目标时长(无圆环, 大字流光) =====
+   在 index-page 这条 flex 列里 .timer-wrap 充当"中间时钟区":flex:1 占满
+   hero+quest 与底部按钮之间的剩余高度,内部再垂直居中把"00:30 / 今日目标
+   时长 / 预计消耗 千卡"这组文字真正落到屏幕中部(原来只是默认排在卡片下方) */
 .timer-wrap {
-  text-align: center;
-  margin: 32rpx 0 8rpx;
-}
-
-.dial {
-  width: 320rpx;
-  height: 320rpx;
-  border-radius: 50%;
-  margin: 0 auto;
-  position: relative;
-  background: radial-gradient(circle at 35% 30%, #ffffff, #f4f6f2 70%);
-  box-shadow: inset 0 4rpx 14rpx rgba(var(--primary-rgb), 0.12), 0 10rpx 24rpx rgba(var(--primary-rgb), 0.12);
+  flex: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  animation: ringBreathe 3s ease-in-out infinite;
-}
-
-/* 虚线刻度环 */
-.dial::before {
-  content: '';
-  position: absolute;
-  inset: 14rpx;
-  border-radius: 50%;
-  border: 2rpx dashed rgba(var(--primary-rgb), 0.28);
-}
-
-.dial-time {
-  font-size: 84rpx;
-  font-weight: 800;
-  color: var(--primary);
-  font-variant-numeric: tabular-nums;
-  letter-spacing: -1rpx;
-  line-height: 1;
-  max-width: 280rpx;
   text-align: center;
-  white-space: nowrap;
-  overflow: hidden;
+  min-height: 0;
 }
 
-.dial-label {
-  font-size: 24rpx;
+.time-display {
+  display: block;
+  font-family: 'Saira Condensed', 'Arial Narrow', sans-serif;
+  font-size: 200rpx;
+  font-weight: 900;
+  line-height: 1.1;
+  letter-spacing: 6rpx;
+  font-variant-numeric: tabular-nums;
+  color: var(--primary);
+  text-shadow: 0 8rpx 6rpx rgba(var(--primary-rgb), 0.35);
+}
+
+.time-label {
+  display: block;
+  font-size: 26rpx;
   color: var(--text-secondary);
   margin-top: 8rpx;
 }
 
 .benefit {
-  margin-top: 20rpx;
+  margin-top: 18rpx;
   font-size: 28rpx;
   color: var(--text-secondary);
 }
@@ -260,17 +252,16 @@
   font-size: 30rpx;
 }
 
-@keyframes ringBreathe {
-  0%, 100% { transform: scale(1); }
-  50%      { transform: scale(1.02); }
-}
-
 /* ===== action buttons ===== */
+/* 在 index-page flex 列里,3 个按钮(rechallenge + free + circuit)靠
+   margin-top:auto 推到列底、紧贴底部 toolbar 上方,与上方居中的时钟
+   区之间自然留白;gap 保持按钮自身间距不变 */
 .action-buttons {
   display: flex;
   flex-direction: column;
   gap: 24rpx;
   margin: 8rpx 0 8rpx;
+  margin-top: auto;
 }
 
 /* 自由训练 / 循环训练 并排一行 */

pages/timer/timer.js

@@ -37,13 +37,8 @@ Page({
     workTotal: 0,           // effective held seconds (excludes rest)
     isResting: false,
     phaseTip: '',           // 阶段切换提示文本(如"最后一组！"/"休息 15 秒")
-    // 顶部循环进度面板:组进度胶囊点阵
-    circuitDots: [],        // [1..sets],仅用于 wx:for 渲染,组数过多时不渲染
-    circuitShowDots: true,  // 组数 > DOTS_MAX 时退化为线性进度条
-    circuitTotalWork: 0,    // sets × holdPerSet,面板里作为"目标秒数"展示
-    dotsDone: 0,            // 已完成组数
-    dotsActive: 0,          // 正在进行的组序号(休息时为 0)
-    dotsNext: 0,            // 休息时即将开始的组序号(工作时为 0)
+    // 组进度改由 progress-ring 外圈分段弧呈现,仅需传 sets/currentSet/resting,
+    // 页面不再维护点阵渲染数据(circuitDots/dotsDone 等已随旧面板一并删除)。
     celebrationLevel: 'normal',  // normal / first / milestone / record
     celebrationMessage: '',
     confettiPieces: [],
@@ -222,8 +217,8 @@ Page({
       sets,
       restPerSet: rest,
       onTick: (t) => {
-        // 组进度点阵三态。休息阶段 CircuitTimer 的 setIndex 仍指向"刚做完
-        // 的那一组",所以 resting 时 setIndex 组算已完成、下一组标为 next。
+        // 组进度语义与旧点阵一致:休息时 setIndex 仍指向"刚做完的那一组",
+        // 组件按 resting 自行推导已完成/进行中/下一组三态(外圈分段弧)。
         const resting = t.phase === 'resting'
         this.setData({
           currentSet: t.setIndex,
@@ -233,9 +228,6 @@ Page({
           phaseElapsed: t.phaseElapsed,
           workTotal: t.workTotal,
           isResting: resting,
-          dotsDone: resting ? t.setIndex : Math.max(0, t.setIndex - 1),
-          dotsActive: resting ? 0 : t.setIndex,
-          dotsNext: resting ? t.setIndex + 1 : 0,
           // Reuse the single-hold display fields so progress-ring / completion
           // number keep working: the ring shows the CURRENT set's countdown.
           remaining: t.phaseRemaining,
@@ -244,7 +236,9 @@ Page({
           statusText: resting ? '休息中' : '撑住',
           runningTip: resting ? '' : this.data.phaseTip,
           tipType: 'phase',
-          tipIcon: this.data.icons.peopleFill
+          tipIcon: this.data.icons.peopleFill,
+          // 环内副标题:宏观进度(第几组)交给外圈分段弧,这里只报当前组位次。
+          ringSubText: `第 ${t.setIndex}/${t.sets} 组`
         })
         this._circuitCue(t)
       },
@@ -252,13 +246,9 @@ Page({
       onComplete: () => this._onCircuitComplete()
     })
 
-    // 点阵超过 DOTS_MAX 个就挤成头发丝了,退化成一条线性进度条。
-    const DOTS_MAX = 15
-    const dots = []
-    if (sets <= DOTS_MAX) {
-      for (let i = 1; i <= sets; i++) dots.push(i)
-    }
-
+    // 组数上限 50(见 _int 的 clamp),环形外圈 360° 空间充裕,即使 50 段也
+    // 不至于挤成线(旧点阵的 DOTS_MAX=15 是受横向卡片宽度限制,环形无此问题),
+    // 因此分段弧不做数量降级,页面也无须维护点阵渲染数据。
     const durText = this._durationText(hold)
     this.setData({
       isCircuitMode: true,
@@ -268,12 +258,6 @@ Page({
       circuitHold: hold,
       circuitRest: rest,
       circuitSessions: this._circuitCfg.sessionsPerWeek,
-      circuitDots: dots,
-      circuitShowDots: sets <= DOTS_MAX,
-      circuitTotalWork: sets * hold,
-      dotsDone: 0,
-      dotsActive: 0,
-      dotsNext: 0,
       currentSet: 0,
       totalSets: sets,
       phase: 'idle',
@@ -294,7 +278,9 @@ Page({
       showCompletion: false,
       goalLine: `每组 ${durText} · 共 ${sets} 组`,
       ringTicks: Math.min(hold, 60),
-      ringSubText: `每组 ${durText}`,
+      // idle 时环内副标题承载配置摘要(组数 + 休息时长),运行时由 onTick
+      // 换成"第 X/Y 组"。休息时长为 0 时不展示"休息"段。
+      ringSubText: `共 ${sets} 组${rest > 0 ? ' · 休息 ' + rest + ' 秒' : ''}`,
       statusText: '准备开始',
       runningTip: '',
       tipType: 'posture',

pages/timer/timer.wxml

@@ -15,44 +15,9 @@
     <text class="achievement-text">{{celebrationMessage}}</text>
   </view>
 
-  <!-- 循环训练进度面板:组点阵 + 第 X/Y 组 + 阶段徽章 + 累计秒数。
-       层次分工:这里管「第几组」(宏观),中间的进度环管「本组还剩几秒」(微观)。 -->
-  <view
-    class="circuit-bar {{isResting ? 'is-rest' : ''}} {{status === 'paused' ? 'is-paused' : ''}}"
-    wx:if="{{isCircuitMode && status !== 'completed'}}"
-  >
-    <!-- 组进度点阵:已完成 / 进行中 / 下一组 三态 -->
-    <view class="circuit-dots" wx:if="{{circuitShowDots}}">
-      <view
-        wx:for="{{circuitDots}}"
-        wx:key="*this"
-        class="circuit-dot {{item <= dotsDone ? 'is-done' : ''}} {{item === dotsActive ? 'is-active' : ''}} {{item === dotsNext ? 'is-next' : ''}}"
-      ></view>
-    </view>
-    <!-- 组数过多(>15)时退化为线性进度条,避免点阵挤成头发丝 -->
-    <view class="circuit-track" wx:else>
-      <view class="circuit-track-fill" style="width: {{dotsDone * 100 / totalSets}}%"></view>
-    </view>
-
-    <view class="circuit-meta">
-      <view class="circuit-count">
-        <text class="circuit-count-num">{{status === 'idle' ? totalSets : currentSet}}</text>
-        <text class="circuit-count-total" wx:if="{{status !== 'idle'}}">/{{totalSets}}</text>
-        <text class="circuit-count-unit">组</text>
-      </view>
-      <view class="circuit-phase circuit-phase--{{status === 'paused' ? 'pause' : (status === 'idle' ? 'idle' : (isResting ? 'rest' : 'work'))}}">
-        <view class="circuit-phase-dot"></view>
-        <text class="circuit-phase-text">{{status === 'paused' ? '已暂停' : (status === 'idle' ? '准备开始' : (isResting ? '休息中' : '撑住'))}}</text>
-      </view>
-    </view>
-
-    <text class="circuit-sub">
-      <block wx:if="{{status === 'idle'}}">每组 {{circuitHold}} 秒{{circuitRest > 0 ? ' · 休息 ' + circuitRest + ' 秒' : ''}}</block>
-      <block wx:else>已撑 {{workTotal}} 秒 · 目标 {{circuitTotalWork}} 秒</block>
-    </text>
-  </view>
-
-  <!-- 呼吸引导环 + 进度条 -->
+  <!-- 呼吸引导环 + 进度条。循环训练的组进度不再占一块独立面板,
+       而是由 progress-ring 在圆环外圈画一圈分段弧(见组件的 sets/currentSet/resting 属性),
+       保证单组/自由/循环三模式共用同一套页面骨架,切换零跳动。 -->
   <view class="ring-wrapper">
     <view class="breathe-ring breathe-ring-1 {{status === 'running' ? 'fast' : ''}}"
       wx:if="{{status !== 'completed'}}"></view>
@@ -60,13 +25,16 @@
       wx:if="{{status !== 'completed'}}"></view>
     <view class="breathe-ring breathe-ring-3 {{status === 'running' ? 'fast' : ''}}"
       wx:if="{{status !== 'completed'}}"></view>
+    <!-- 呼吸光环:进度环外侧一圈可见的描边辉光,随呼吸收放(idle 慢/running 快) -->
+    <view class="breath-aura {{status === 'running' ? 'fast' : ''}}"
+      wx:if="{{status !== 'completed'}}"></view>
 
     <progress-ring
       wx:if="{{status !== 'completed'}}"
       duration="{{duration}}"
       remaining="{{isCompleted ? 0 : remaining}}"
       elapsed="{{elapsed}}"
-      size="{{360}}"
+      size="{{420}}"
       ringWidth="{{22}}"
       status="{{status}}"
       primaryColor="{{theme.primary}}"
@@ -74,6 +42,9 @@
       trackColor="{{isCircuitMode ? '#EEEEEE' : (elapsed >= duration ? '#00B578' : '#EEEEEE')}}"
       ticks="{{ringTicks}}"
       subText="{{ringSubText}}"
+      sets="{{totalSets}}"
+      currentSet="{{currentSet}}"
+      resting="{{isResting}}"
     ></progress-ring>
 
     <!-- 完成庆祝粒子 -->
@@ -87,18 +58,23 @@
     </view>
   </view>
 
-  <!-- 状态文案(环下方) + 目标信息卡 + 运行提示 -->
-  <view class="timer-status status--{{status}}" wx:if="{{status !== 'completed'}}">{{statusText}}</view>
-
-  <view class="goal-card" wx:if="{{status !== 'completed'}}">
-    <image class="goal-icon" src="{{icons.targetFill}}" mode="aspectFit"></image>
-    <text class="goal-text">{{goalLine}}</text>
-    <text class="goal-arrow">›</text>
-  </view>
-
-  <view class="timer-tip timer-tip--{{tipType}}" wx:if="{{runningTip}}">
-    <image class="timer-tip-icon" src="{{tipIcon}}" mode="aspectFit"></image>
-    <text class="timer-tip-text">{{runningTip}}</text>
+  <!-- 信息气泡:状态 + 目标摘要 + 运行提示 三行合一(三模式公用)。
+       环下方原 statusText(撑住/休息中/已暂停)并入气泡顶部,圆环下只留一张卡。 -->
+  <view class="info-bubble" wx:if="{{status !== 'completed'}}">
+    <view class="info-line info-line--status info-line--{{status}} {{isResting ? 'info-line--rest' : ''}}">
+      <view class="info-status-dot"></view>
+      <text class="info-status-text">{{statusText}}</text>
+    </view>
+    <view class="info-divider"></view>
+    <view class="info-line info-line--goal">
+      <image class="info-icon" src="{{icons.targetFill}}" mode="aspectFit"></image>
+      <text class="info-text">{{goalLine}}</text>
+    </view>
+    <view class="info-divider" wx:if="{{runningTip}}"></view>
+    <view class="info-line info-line--tip info-line--{{tipType}}" wx:if="{{runningTip}}">
+      <image class="info-icon" src="{{tipIcon}}" mode="aspectFit"></image>
+      <text class="info-text">{{runningTip}}</text>
+    </view>
   </view>
 
   <!-- 控制按钮 -->

pages/timer/timer.wxss

@@ -9,227 +9,14 @@
   box-sizing: border-box;
 }
 
-/* ---- 循环训练进度面板 ----
-   注意:整块不设固定 height,靠 padding 撑开。真机大字体档下文字会被微信
-   放大,固定高度 + overflow 会把数字裁掉(项目里踩过这个坑)。 */
-.circuit-bar {
-  /* 抬一层:呼吸光晕(.breathe-ring, z-index:0)在 DOM 里排在本面板之后,
-     不抬层会把橙色晕染盖到卡片上。 */
-  position: relative;
-  z-index: 1;
-  width: 620rpx;
-  max-width: 86%;
-  box-sizing: border-box;
-  padding: 26rpx 32rpx 22rpx;
-  margin-bottom: 12rpx;
-  background: var(--card-bg);
-  border: 1rpx solid rgba(var(--primary-rgb), 0.14);
-  border-radius: 28rpx;
-  box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.05);
-  transition: border-color 0.35s ease, box-shadow 0.35s ease;
-  animation: circuitBarIn 0.45s cubic-bezier(0.34, 1.4, 0.64, 1) both;
-}
-
-/* 休息态整块降温:边框转成 success 绿,和"撑住"的主色态形成对比 */
-.circuit-bar.is-rest {
-  border-color: rgba(var(--success-rgb), 0.32);
-  box-shadow: 0 6rpx 20rpx rgba(var(--success-rgb), 0.10);
-}
-
-@keyframes circuitBarIn {
-  0%   { opacity: 0; transform: translateY(-16rpx); }
-  100% { opacity: 1; transform: translateY(0); }
-}
-
-/* --- 组进度点阵 ---
-   整行铺满面板内宽,每段按组数严格等分(分段进度条式)。 */
-.circuit-dots {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  /* 锁住行高:当前组比其它段高 6rpx,不锁行高会在 idle→running 时整块跳一下 */
-  min-height: 18rpx;
-  gap: 8rpx;
-  margin-bottom: 22rpx;
-}
-
-/* flex:1 1 0 + min-width:0 → 每段等分剩余宽度,与内容无关。
-   不设 max-width:一旦封顶,组数少时点阵就只占左边一截(此前的问题)。
-   当前组不再靠"加宽"强调(那会破坏等分),改为增高+发光,宽度恒等分。 */
-.circuit-dot {
-  flex: 1 1 0;
-  min-width: 0;
-  height: 12rpx;
-  border-radius: 6rpx;
-  background: var(--bg-soft);
-  transition: height 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
-}
-
-.circuit-dot.is-done {
-  background: var(--primary);
-  opacity: 0.85;
-}
-
-/* 当前组:增高 + 渐变 + 发光呼吸,一眼锁定进度位置(宽度仍等分) */
-.circuit-dot.is-active {
-  height: 18rpx;
-  border-radius: 9rpx;
-  opacity: 1;
-  background: linear-gradient(90deg, var(--primary), var(--primary-light));
-  box-shadow: 0 0 14rpx rgba(var(--primary-rgb), 0.55);
-  animation: circuitDotPulse 1.5s ease-in-out infinite;
-}
-
-/* 休息时高亮"下一组",给用户一个即将开始的预告焦点 */
-.circuit-dot.is-next {
-  height: 18rpx;
-  border-radius: 9rpx;
-  background: rgba(var(--success-rgb), 0.45);
-  animation: circuitDotPulse 1.8s ease-in-out infinite;
-}
-
-@keyframes circuitDotPulse {
-  0%, 100% { opacity: 1; }
-  50%      { opacity: 0.55; }
-}
-
-/* 暂停时冻结所有呼吸动画,静止本身就是"已暂停"的信号 */
-.circuit-bar.is-paused .circuit-dot {
-  animation: none;
-}
-
-/* --- 组数过多时的线性降级条 --- */
-.circuit-track {
-  height: 12rpx;
-  border-radius: 6rpx;
-  background: var(--bg-soft);
-  overflow: hidden;
-  margin-bottom: 22rpx;
-}
-
-.circuit-track-fill {
-  height: 100%;
-  border-radius: 6rpx;
-  background: linear-gradient(90deg, var(--primary), var(--primary-light));
-  transition: width 0.4s ease;
-}
-
-/* --- 主信息行:大数字 + 阶段徽章 --- */
-.circuit-meta {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.circuit-count {
-  display: flex;
-  align-items: baseline;
-}
-
-.circuit-count-num {
-  font-size: 56rpx;
-  font-weight: 800;
-  color: var(--text);
-  line-height: 1;
-  font-variant-numeric: tabular-nums;
-  letter-spacing: -1rpx;
-}
-
-.circuit-count-total {
-  font-size: 32rpx;
-  font-weight: 600;
-  color: var(--text-secondary);
-  line-height: 1;
-  margin-left: 2rpx;
-}
-
-.circuit-count-unit {
-  font-size: 26rpx;
-  color: var(--text-secondary);
-  margin-left: 8rpx;
-}
-
-/* --- 阶段徽章 --- */
-.circuit-phase {
-  display: flex;
-  align-items: center;
-  gap: 10rpx;
-  padding: 12rpx 24rpx;
-  border-radius: 30rpx;
-  transition: background 0.3s ease;
-}
-
-/* 状态指示灯用 CSS 画而非 icon:项目里的 SVG 图标颜色烤死在 data URI 里,
-   CSS 改不动;这里需要跟随状态换色,纯 CSS 圆点是唯一干净的做法。 */
-.circuit-phase-dot {
-  width: 14rpx;
-  height: 14rpx;
-  border-radius: 50%;
-  flex-shrink: 0;
-}
-
-.circuit-phase-text {
-  font-size: 26rpx;
-  font-weight: 600;
-  line-height: 1;
-  white-space: nowrap;
-}
-
-/* 工作态:主色渐变实心 + 白灯白字 */
-.circuit-phase--work {
-  background: linear-gradient(135deg, var(--primary), var(--primary-light));
-  box-shadow: 0 4rpx 14rpx rgba(var(--primary-rgb), 0.32);
-}
-.circuit-phase--work .circuit-phase-dot {
-  background: #FFFFFF;
-  animation: phaseDotBlink 1.2s ease-in-out infinite;
-}
-.circuit-phase--work .circuit-phase-text { color: #FFFFFF; }
-
-/* 休息态:绿色淡底,视觉降温 */
-.circuit-phase--rest {
-  background: rgba(var(--success-rgb), 0.14);
-}
-.circuit-phase--rest .circuit-phase-dot {
-  background: var(--success);
-  animation: phaseDotBlink 1.8s ease-in-out infinite;
-}
-.circuit-phase--rest .circuit-phase-text { color: var(--success); }
-
-/* 待机态 / 暂停态:中性灰,不抢视觉 */
-.circuit-phase--idle,
-.circuit-phase--pause {
-  background: var(--bg-soft);
-}
-.circuit-phase--idle .circuit-phase-dot,
-.circuit-phase--pause .circuit-phase-dot {
-  background: var(--text-secondary);
-}
-.circuit-phase--idle .circuit-phase-text,
-.circuit-phase--pause .circuit-phase-text {
-  color: var(--text-secondary);
-}
-
-@keyframes phaseDotBlink {
-  0%, 100% { opacity: 1;   transform: scale(1); }
-  50%      { opacity: 0.4; transform: scale(0.8); }
-}
-
-/* --- 副信息行 --- */
-.circuit-sub {
-  display: block;
-  margin-top: 14rpx;
-  font-size: 24rpx;
-  color: var(--text-secondary);
-  line-height: 1.3;
-}
-
 /* ---- ring wrapper ---- */
 .ring-wrapper {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
+  /* 圆环与下方(状态词/目标卡/提示)整组拉开间距,按钮靠 margin-top:auto 贴底不受影响 */
+  margin-bottom: 44rpx;
 }
 
 /* breathing guide rings — soft radial glows instead of hard outline circles,
@@ -237,21 +24,53 @@
 .breathe-ring {
   position: absolute;
   border-radius: 50%;
-  background: radial-gradient(circle, rgba(var(--primary-rgb), 0.10) 0%, rgba(var(--primary-rgb), 0) 65%);
+  background: radial-gradient(circle, rgba(var(--primary-rgb), 0.13) 0%, rgba(var(--primary-rgb), 0) 68%);
   animation: breathePulse 3.5s ease-in-out infinite;
   pointer-events: none;
   z-index: 0;
 }
 
-.breathe-ring-1 { width: 520rpx; height: 520rpx; animation-delay: 0s; }
-.breathe-ring-2 { width: 440rpx; height: 440rpx; animation-delay: 0.5s; background: radial-gradient(circle, rgba(var(--primary-rgb), 0.14) 0%, rgba(var(--primary-rgb), 0) 65%); }
-.breathe-ring-3 { width: 380rpx; height: 380rpx; animation-delay: 1s; background: radial-gradient(circle, rgba(var(--primary-rgb), 0.18) 0%, rgba(var(--primary-rgb), 0) 65%); }
+.breathe-ring-1 { width: 620rpx; height: 620rpx; animation-delay: 0s; }
+.breathe-ring-2 { width: 540rpx; height: 540rpx; animation-delay: 0.5s; background: radial-gradient(circle, rgba(var(--primary-rgb), 0.17) 0%, rgba(var(--primary-rgb), 0) 66%); }
+.breathe-ring-3 { width: 460rpx; height: 460rpx; animation-delay: 1s; background: radial-gradient(circle, rgba(var(--primary-rgb), 0.22) 0%, rgba(var(--primary-rgb), 0) 63%); }
 
 .breathe-ring.fast { animation: breathePulseFast 1.4s ease-in-out infinite; }
 .breathe-ring.fast.breathe-ring-1 { animation-delay: 0s; }
 .breathe-ring.fast.breathe-ring-2 { animation-delay: 0.25s; }
 .breathe-ring.fast.breathe-ring-3 { animation-delay: 0.5s; }
 
+/* ---- 呼吸光环:进度环外侧一圈淡化的描边辉光 ---- */
+.breath-aura {
+  position: absolute;
+  /* 直径略大于进度环(420),落在刻度/进度弧外侧,不遮挡中间时钟 */
+  width: 488rpx;
+  height: 488rpx;
+  border-radius: 50%;
+  /* 细线 + 低透明度:只是隐约的呼吸边界,不跟倒计时环抢视觉 */
+  border: 4rpx solid rgba(var(--primary-rgb), 0.20);
+  box-shadow:
+    0 0 30rpx rgba(var(--primary-rgb), 0.22),
+    inset 0 0 20rpx rgba(var(--primary-rgb), 0.10);
+  animation: auraBreathe 4s ease-in-out infinite;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.breath-aura.fast {
+  animation: auraBreatheFast 2.4s ease-in-out infinite;
+}
+
+/* 柔和呼吸:幅度小(scale 0.96↔1.04)、透明度压低(0.3↔0.5),留出呼吸感但始终很淡 */
+@keyframes auraBreathe {
+  0%, 100% { transform: scale(0.96); opacity: 0.30; }
+  50%      { transform: scale(1.04); opacity: 0.50; }
+}
+
+@keyframes auraBreatheFast {
+  0%, 100% { transform: scale(0.97); opacity: 0.34; }
+  50%      { transform: scale(1.05); opacity: 0.55; }
+}
+
 /* celebration burst */
 .celebrate-burst {
   position: absolute;
@@ -281,115 +100,105 @@
   100% { opacity: 0; transform: translate(0, -80rpx) scale(0.4); }
 }
 
-/* ---- 状态文案(环下方) ---- */
-.timer-status {
-  margin-top: 40rpx;
-  font-size: 36rpx;
-  font-weight: 700;
-  color: var(--text);
-  line-height: 1.2;
-  text-align: center;
+/* ---- 信息气泡·状态行(原环下方 statusText 并入气泡顶部) ----
+   状态色:running=主色 / 休息中=绿 / idle、paused=中性灰。
+   resting 时 status 字段仍是 running,额外用 .info-line--rest 覆盖为绿。
+   小圆点用 currentColor 跟随状态色,纯 CSS 画(项目 SVG 图标色烤死改不动)。 */
+.info-line--status {
+  gap: 12rpx;
 }
 
-.timer-status.status--running { color: var(--primary); }
-.timer-status.status--paused { color: var(--text-secondary); }
+.info-status-dot {
+  width: 14rpx;
+  height: 14rpx;
+  border-radius: 50%;
+  background: currentColor;
+  flex-shrink: 0;
+}
 
-/* ---- 目标信息卡 ---- */
-.goal-card {
+.info-status-text {
+  font-size: 32rpx;
+  font-weight: 700;
+  line-height: 1.3;
+  color: var(--text);
+}
+
+.info-line--status.status--running { color: var(--primary); }
+.info-line--status.status--running .info-status-dot {
+  animation: statusDotBlink 1.6s ease-in-out infinite;
+}
+.info-line--status.info-line--rest { color: var(--success); }
+.info-line--status.info-line--rest .info-status-dot {
+  animation: statusDotBlink 1.8s ease-in-out infinite;
+}
+.info-line--status.status--paused,
+.info-line--status.status--idle { color: var(--text-secondary); }
+
+/* 暂停时冻结呼吸,静止本身就是"已暂停"的信号 */
+.info-line--status.status--paused .info-status-dot { animation: none; }
+
+@keyframes statusDotBlink {
+  0%, 100% { opacity: 1;   transform: scale(1); }
+  50%      { opacity: 0.35; transform: scale(0.75); }
+}
+
+/* ---- 信息气泡:状态 + 目标摘要 + 运行提示 合并为一张卡(三模式公用) ----
+   三行结构:上=状态(最醒目,状态色) / 中=目标常驻(小字次级) / 下=动态提示。
+   休息/暂停/待机时提示行为空,分隔线和提示行整体消失,气泡自动收缩。 */
+.info-bubble {
   display: flex;
-  align-items: center;
+  flex-direction: column;
+  box-sizing: border-box;
   width: 620rpx;
   max-width: 86%;
-  box-sizing: border-box;
-  margin-top: 28rpx;
+  /* 承接原 timer-status 的 40rpx 间距,圆环与卡片保持呼吸感 */
+  margin-top: 40rpx;
   padding: 24rpx 28rpx;
-  background: var(--card-bg);
-  border: 1rpx solid rgba(var(--primary-rgb), 0.12);
-  border-radius: 24rpx;
-  box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.05);
+  background: rgba(var(--primary-rgb), 0.08);
+  border-radius: 26rpx;
 }
 
-.goal-icon {
-  width: 40rpx;
-  height: 40rpx;
+.info-line {
+  display: flex;
+  align-items: center;
+}
+
+.info-icon {
+  width: 32rpx;
+  height: 32rpx;
   flex-shrink: 0;
-  margin-right: 16rpx;
+  margin-right: 12rpx;
 }
 
-.goal-text {
+.info-text {
   flex: 1;
   min-width: 0;
-  font-size: 28rpx;
-  font-weight: 600;
-  color: var(--text);
-  line-height: 1.3;
-}
-
-.goal-arrow {
-  font-size: 40rpx;
-  color: var(--text-secondary);
-  line-height: 1;
-  margin-left: 8rpx;
-}
-
-/* ---- 运行提示(气泡卡片:姿态 / 阶段 / 目标达成) ---- */
-.timer-tip {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  gap: 14rpx;
-  margin-top: 18rpx;
-  max-width: 100%;
-  padding: 20rpx 32rpx;
-  background: #fff;
-  border-left: 8rpx solid var(--primary);
-  border-radius: 20rpx;
-  box-shadow: 0 8rpx 24rpx rgba(var(--primary-rgb), 0.14);
-  animation: tipPulse 2.4s ease-in-out infinite;
-}
-
-/* 小三角指向圆环 */
-.timer-tip::before {
-  content: '';
-  position: absolute;
-  top: -16rpx;
-  left: 50%;
-  transform: translateX(-50%);
-  border-left: 16rpx solid transparent;
-  border-right: 16rpx solid transparent;
-  border-bottom: 16rpx solid #fff;
-}
-
-.timer-tip--done {
-  border-left-color: var(--success);
-}
-
-.timer-tip-icon {
-  width: 40rpx;
-  height: 40rpx;
-  flex-shrink: 0;
-}
-
-.timer-tip-text {
-  font-size: 30rpx;
-  font-weight: 600;
-  color: var(--text);
   line-height: 1.4;
 }
 
-.timer-tip--done .timer-tip-text {
-  color: var(--success);
+/* 目标行:静态摘要,主色小字 */
+.info-line--goal .info-text {
+  font-size: 26rpx;
+  font-weight: 500;
+  color: var(--primary);
 }
 
-@keyframes tipPulse {
-  0%, 100% {
-    transform: scale(1);
-    box-shadow: 0 8rpx 24rpx rgba(var(--primary-rgb), 0.14);
-  }
-  50% {
-    transform: scale(1.03);
-    box-shadow: 0 12rpx 32rpx rgba(var(--primary-rgb), 0.22);
-  }
+/* 分隔线:提示行出现时才渲染 */
+.info-divider {
+  height: 1rpx;
+  background: rgba(var(--primary-rgb), 0.14);
+  margin: 14rpx 0;
+}
+
+/* 提示行:动态信息,比目标行大一号更突出 */
+.info-line--tip .info-text {
+  font-size: 30rpx;
+  font-weight: 600;
+  color: var(--text);
+}
+
+.info-line--done .info-text {
+  color: var(--success);
 }
 
 /* ---- controls ---- */